var/cache/dev/twig/21/2119ae32daee089bd20d069501a4c145.php line 41

Open in your IDE?
  1. <?php
  3. use Twig\Environment;
  4. use Twig\Error\LoaderError;
  5. use Twig\Error\RuntimeError;
  6. use Twig\Extension\CoreExtension;
  7. use Twig\Extension\SandboxExtension;
  8. use Twig\Markup;
  9. use Twig\Sandbox\SecurityError;
  10. use Twig\Sandbox\SecurityNotAllowedTagError;
  11. use Twig\Sandbox\SecurityNotAllowedFilterError;
  12. use Twig\Sandbox\SecurityNotAllowedFunctionError;
  13. use Twig\Source;
  14. use Twig\Template;
  16. /* Frontend/new_page.html.twig */
  17. class __TwigTemplate_37f647fb2b3e5a980ac5c4f77f2dfcb6 extends Template
  18. {
  19.     private $source;
  20.     private $macros = [];
  22.     public function __construct(Environment $env)
  23.     {
  24.         parent::__construct($env);
  26.         $this->source = $this->getSourceContext();
  28.         $this->parent = false;
  30.         $this->blocks = [
  31.             'seoheader' => [$this, 'block_seoheader'],
  32.             'stylesheets' => [$this, 'block_stylesheets'],
  33.             'javascripts' => [$this, 'block_javascripts'],
  34.             'header' => [$this, 'block_header'],
  35.             'switcher' => [$this, 'block_switcher'],
  36.             'body' => [$this, 'block_body'],
  37.             'footer' => [$this, 'block_footer'],
  38.         ];
  39.     }
  41.     protected function doDisplay(array $context, array $blocks = [])
  42.     {
  43.         $macros = $this->macros;
  44.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  45.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "Frontend/new_page.html.twig"));
  47.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  48.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "Frontend/new_page.html.twig"));
  50.         // line 1
  51.         $context["selected_lang"] = CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, (isset($context["app"]) || array_key_exists("app", $context) ? $context["app"] : (function () { throw new RuntimeError('Variable "app" does not exist.', 1, $this->source); })()), "request", [], "any", false, false, false, 1), "getLocale", [], "method", false, false, false, 1);
  52.         // line 2
  53.         yield "<!DOCTYPE html>  
  54. <html lang=\"";
  55.         // line 3
  56.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape((isset($context["selected_lang"]) || array_key_exists("selected_lang", $context) ? $context["selected_lang"] : (function () { throw new RuntimeError('Variable "selected_lang" does not exist.', 3, $this->source); })()), "html", null, true);
  57.         yield "\" dir=\"ltr\"> 
  58. <head>
  59.     <meta charset=\"UTF-8\">
  60.     <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">
  61.     <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
  62.     <meta name=\"theme-color\" content=\"#263371\">
  63.     <meta name=\"msapplication-navbutton-color\" content=\"#263371\">
  64.     <meta name=\"apple-mobile-web-app-status-bar-style\" content=\"#263371\"> 
  65.     <meta name=\"language\" content=\"";
  66.         // line 11
  67.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape((isset($context["selected_lang"]) || array_key_exists("selected_lang", $context) ? $context["selected_lang"] : (function () { throw new RuntimeError('Variable "selected_lang" does not exist.', 11, $this->source); })()), "html", null, true);
  68.         yield "\"/>
  69.     <meta name=\"robots\" content=\"index, follow, all\"/>
  70.     <meta name=\"googlebot\" content=\"index, follow\"/>
  71.     <meta name=\"copyright\" content=\"elevenmedia\"/> 
  72.     <link rel=\"shortcut icon\" href=\"";
  73.         // line 15
  74.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("favicon.ico"), "html", null, true);
  75.         yield "\" type=\"image/x-icon\">
  76.     <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">
  77.     <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>
  78.     <link href=\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">
  80.     ";
  81.         // line 20
  82.         yield from $this->unwrap()->yieldBlock('seoheader', $context, $blocks);
  83.         // line 23
  84.         yield "
  85.     ";
  86.         // line 24
  87.         yield from $this->unwrap()->yieldBlock('stylesheets', $context, $blocks);
  88.         // line 27
  89.         yield "
  90.     ";
  91.         // line 28
  92.         yield from $this->unwrap()->yieldBlock('javascripts', $context, $blocks);
  93.         // line 31
  94.         yield "
  95.     <style>
  96.         :root {
  97.             --primary-blue: #263371;
  98.             --primary-blue-light: #3a4a8c;
  99.             --primary-blue-dark: #1a2550;
  100.             --accent-orange: #d84c2b;
  101.             --accent-orange-light: #e66a4d;
  102.             --accent-orange-dark: #b83e20;
  103.             --text-dark: #1e293b;
  104.             --text-light: #64748b;
  105.             --background: #f9f9f9;
  106.             --white: #ffffff;
  107.             --card-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  108.             --transition: all 0.3s ease;
  109.             --font-size-base: 1rem;
  110.             --font-size-sm: 0.875rem;
  111.             --font-size-lg: 1.125rem;
  112.             --font-size-xl: 1.25rem;
  113.             --font-size-2xl: 1.5rem;
  114.             --font-size-3xl: 1.875rem;
  115.             --font-size-4xl: 2.25rem;
  116.             --gradient-primary: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
  117.             --gradient-accent: linear-gradient(135deg, var(--accent-orange) 0%, var(--accent-orange-dark) 100%);
  118.         }
  120.         body {
  121.             font-family: 'Poppins', sans-serif;
  122.             color: var(--text-dark);
  123.             line-height: 1.6;
  124.             background-color: var(--background);
  125.             margin: 0;
  126.             padding: 0;
  127.             font-size: var(--font-size-base);
  128.         }
  130.         .page-container {
  131.             max-width: 1200px;
  132.             margin: 0 auto;
  133.             margin-top: 90px;
  134.             padding: 0 20px;
  135.         }
  137.         /* Introduction Section */
  138.         .introduction-section {
  139.             background-color: var(--white);
  140.             border-radius: 20px;
  141.             padding: 40px;
  142.             margin-bottom: 50px;
  143.             box-shadow: var(--card-shadow);
  144.             position: relative;
  145.             overflow: hidden;
  146.         }
  148.         .introduction-section::before {
  149.             content: '';
  150.             position: absolute;
  151.             top: 0;
  152.             left: 0;
  153.             width: 100%;
  154.             height: 100%;
  155.             background: radial-gradient(circle at top right, rgba(216, 76, 43, 0.03), transparent 70%);
  156.             z-index: 0;
  157.         }
  159.         .introduction-title {
  160.             color: var(--primary-blue);
  161.             font-size: var(--font-size-2xl);
  162.             font-weight: 700;
  163.             margin-bottom: 25px;
  164.             position: relative;
  165.             display: inline-block;
  166.         }
  168.         .introduction-title::after {
  169.             content: '';
  170.             position: absolute;
  171.             bottom: -8px;
  172.             left: 0;
  173.             width: 60px;
  174.             height: 3px;
  175.             background: var(--gradient-accent);
  176.             border-radius: 2px;
  177.         }
  179.         .introduction-content {
  180.             position: relative;
  181.             z-index: 1;
  182.         }
  184.         .introduction-text {
  185.             color: var(--text-dark);
  186.             margin-bottom: 20px;
  187.             line-height: 1.8;
  188.             font-size: var(--font-size-base);
  189.         }
  191.         .skills-list {
  192.             margin: 25px 0;
  193.             padding-left: 0;
  194.             list-style-type: none;
  195.         }
  197.         .skills-list li {
  198.             position: relative;
  199.             padding-left: 30px;
  200.             margin-bottom: 15px;
  201.             line-height: 1.6;
  202.         }
  204.         .skills-list li::before {
  205.             content: '';
  206.             position: absolute;
  207.             left: 0;
  208.             top: 8px;
  209.             width: 8px;
  210.             height: 8px;
  211.             border-radius: 50%;
  212.             background-color: var(--accent-orange);
  213.         }
  215.         .financial-info {
  216.             background-color: rgba(38, 51, 113, 0.05);
  217.             padding: 20px;
  218.             border-radius: 10px;
  219.             margin-top: 25px;
  220.         }
  222.         .financial-info p {
  223.             margin: 10px 0;
  224.         }
  226.         /* Logo Header Section - IMPROVED */
  227.         .logo-header {
  228.             position: relative;
  229.             display: flex;
  230.             align-items: center;
  231.             justify-content: center;
  232.             padding: 35px 0;
  233.             background: var(--gradient-primary);
  234.             border-bottom: 1px solid rgba(255,255,255,0.1);
  235.             box-shadow: 0 4px 15px rgba(0,0,0,0.15);
  236.             z-index: 10;
  237.             overflow: hidden;
  238.         }
  240.         .logo-header::before {
  241.             content: '';
  242.             position: absolute;
  243.             top: -50%;
  244.             left: -50%;
  245.             width: 200%;
  246.             height: 200%;
  247.             background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
  248.             animation: pulse-bg 15s infinite alternate;
  249.         }
  251.         @keyframes pulse-bg {
  252.             0% { transform: scale(1); opacity: 0.5; }
  253.             100% { transform: scale(1.2); opacity: 0.8; }
  254.         }
  256.         .logo-container {
  257.             display: flex;
  258.             align-items: center;
  259.             gap: 30px;
  260.             position: relative;
  261.             z-index: 2;
  262.         }
  264.         .main-logo {
  265.             width: 250px;
  266.             height: auto;
  267.             transition: var(--transition);
  268.             filter: brightness(0) invert(1);
  269.             animation: logoGlow 3s infinite alternate;
  270.         }
  272.         @keyframes logoGlow {
  273.             from {
  274.                 filter: brightness(0) invert(1);
  275.             }
  276.             to {
  277.                 filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(255, 255, 255, 0.7));
  278.             }
  279.         }
  281.         .logo-divider {
  282.             height: 60px;
  283.             width: 2px;
  284.             background-color: rgba(255,255,255,0.3);
  285.         }
  287.         .program-title {
  288.             font-size: var(--font-size-2xl);
  289.             font-weight: 700;
  290.             color: var(--white);
  291.             margin: 0;
  292.             text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  293.         }
  295.         .program-subtitle {
  296.             font-size: var(--font-size-base);
  297.             color: rgba(255, 255, 255, 0.9);
  298.             margin: 0;
  299.             text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  300.         }
  302.         /* Hero Gallery Section - IMPROVED */
  303.         .hero-gallery {
  304.             position: relative;
  305.             overflow: hidden;
  306.             border-radius: 20px;
  307.             box-shadow: 0 15px 30px rgba(0,0,0,0.15);
  308.             margin-bottom: 50px;
  309.         }
  311.         .main-image-container {
  312.             height: 500px;
  313.             overflow: hidden;
  314.             position: relative;
  315.         }
  317.         .main-image {
  318.             width: 100%;
  319.             height: 100%;
  320.             object-fit: cover;
  321.             transition: transform 0.7s ease;
  322.         }
  324.         .image-overlay {
  325.             position: absolute;
  326.             top: 0;
  327.             left: 0;
  328.             right: 0;
  329.             background: linear-gradient(to bottom, rgba(38, 51, 113, 0.85), rgba(38, 51, 113, 0.5), transparent);
  330.             padding: 40px;
  331.             width: 100%;
  332.             color: var(--white);
  333.             height: 100%;
  334.             display: flex;
  335.             flex-direction: column;
  336.             justify-content: flex-start;
  337.             box-sizing: border-box;
  338.         }
  340.         .overlay-title {
  341.             margin: 0 0 15px 0;
  342.             font-size: var(--font-size-4xl);
  343.             font-weight: 800;
  344.             text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  345.             animation: fadeInUp 0.8s ease;
  346.             position: relative;
  347.             display: inline-block;
  348.         }
  350.         .overlay-title::after {
  351.             content: '';
  352.             position: absolute;
  353.             bottom: -5px;
  354.             left: 0;
  355.             width: 80px;
  356.             height: 3px;
  357.             background-color: var(--accent-orange);
  358.             border-radius: 3px;
  359.         }
  361.         .overlay-subtitle {
  362.             margin: 0;
  363.             font-size: var(--font-size-xl);
  364.             max-width: 600px;
  365.             text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  366.             animation: fadeInUp 1s ease;
  367.             font-weight: 300;
  368.         }
  370.         .overlay-cta {
  371.             margin-top: 30px;
  372.             display: inline-block;
  373.             background: var(--gradient-accent);
  374.             color: var(--white);
  375.             font-size: var(--font-size-lg);
  376.             font-weight: 600;
  377.             padding: 14px 35px;
  378.             border-radius: 50px;
  379.             text-decoration: none;
  380.             transition: var(--transition);
  381.             box-shadow: 0 4px 15px rgba(216, 76, 43, 0.4);
  382.             align-self: flex-start;
  383.             animation: fadeInUp 1.2s ease;
  384.             position: relative;
  385.             overflow: hidden;
  386.             z-index: 1;
  387.         }
  389.         .overlay-cta::before {
  390.             content: '';
  391.             position: absolute;
  392.             top: 0;
  393.             left: -100%;
  394.             width: 100%;
  395.             height: 100%;
  396.             background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  397.             transition: 0.5s;
  398.             z-index: -1;
  399.         }
  401.         .overlay-cta:hover::before {
  402.             left: 100%;
  403.         }
  405.         .overlay-cta:hover {
  406.             transform: translateY(-3px) scale(1.05);
  407.             box-shadow: 0 8px 25px rgba(216, 76, 43, 0.5);
  408.             color: var(--white);
  409.         }
  411.         @keyframes fadeInUp {
  412.             from {
  413.                 opacity: 0;
  414.                 transform: translateY(20px);
  415.             }
  416.             to {
  417.                 opacity: 1;
  418.                 transform: translateY(0);
  419.             }
  420.         }
  422.         .thumbnail-gallery {
  423.             display: flex;
  424.             overflow-x: auto;
  425.             padding: 20px;
  426.             background-color: var(--white);
  427.             gap: 15px;
  428.             scrollbar-width: thin;
  429.             scrollbar-color: var(--accent-orange) var(--background);
  430.             border-radius: 0 0 20px 20px;
  431.         }
  433.         .thumbnail-gallery::-webkit-scrollbar {
  434.             height: 6px;
  435.         }
  437.         .thumbnail-gallery::-webkit-scrollbar-track {
  438.             background: var(--background);
  439.             border-radius: 3px;
  440.         }
  442.         .thumbnail-gallery::-webkit-scrollbar-thumb {
  443.             background-color: var(--accent-orange);
  444.             border-radius: 20px;
  445.         }
  447.         .thumbnail {
  448.             width: 130px;
  449.             height: 85px;
  450.             object-fit: cover;
  451.             border-radius: 10px;
  452.             cursor: pointer;
  453.             border: 3px solid transparent;
  454.             flex-shrink: 0;
  455.             transition: var(--transition);
  456.             box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  457.             position: relative;
  458.             overflow: hidden;
  459.         }
  461.         .thumbnail::after {
  462.             content: '';
  463.             position: absolute;
  464.             top: 0;
  465.             left: 0;
  466.             width: 100%;
  467.             height: 100%;
  468.             background: rgba(216, 76, 43, 0);
  469.             transition: var(--transition);
  470.         }
  472.         .thumbnail.active {
  473.             border: 3px solid var(--accent-orange);
  474.             transform: scale(1.05);
  475.         }
  477.         .thumbnail.active::after {
  478.             background: rgba(216, 76, 43, 0.1);
  479.         }
  481.         .thumbnail:hover {
  482.             transform: scale(1.05);
  483.             box-shadow: 0 6px 12px rgba(0,0,0,0.15);
  484.             border-color: var(--accent-orange-light);
  485.         }
  487.         .thumbnail:hover::after {
  488.             background: rgba(216, 76, 43, 0.1);
  489.         }
  491.         /* Section Styles - IMPROVED */
  492.         .section {
  493.             padding: 50px 0;
  494.         }
  496.         .section-header {
  497.             text-align: center;
  498.             margin-bottom: 40px;
  499.             position: relative;
  500.         }
  502.         .section-title {
  503.             color: var(--primary-blue);
  504.             font-size: var(--font-size-3xl);
  505.             font-weight: 800;
  506.             margin-bottom: 15px;
  507.             position: relative;
  508.             display: inline-block;
  509.         }
  511.         .section-title::after {
  512.             content: '';
  513.             position: absolute;
  514.             bottom: -12px;
  515.             left: 50%;
  516.             transform: translateX(-50%);
  517.             width: 80px;
  518.             height: 4px;
  519.             background: var(--gradient-accent);
  520.             border-radius: 2px;
  521.         }
  523.         .section-subtitle {
  524.             color: var(--text-light);
  525.             max-width: 800px;
  526.             margin: 25px auto 0;
  527.             font-size: var(--font-size-lg);
  528.             line-height: 1.7;
  529.         }
  531.         /* Program Cards - IMPROVED */
  532.         .program-cards {
  533.             display: flex;
  534.             flex-wrap: wrap;
  535.             gap: 30px;
  536.             justify-content: center;
  537.             margin-bottom: 50px;
  538.         }
  540.         .program-card {
  541.             flex: 1;
  542.             min-width: 300px;
  543.             max-width: 380px;
  544.             background: var(--white);
  545.             padding: 35px;
  546.             border-radius: 20px;
  547.             box-shadow: var(--card-shadow);
  548.             transition: var(--transition);
  549.             position: relative;
  550.             overflow: hidden;
  551.             z-index: 1;
  552.         }
  554.         .program-card::before {
  555.             content: '';
  556.             position: absolute;
  557.             top: 0;
  558.             left: 0;
  559.             width: 100%;
  560.             height: 5px;
  561.             background: var(--gradient-accent);
  562.             transition: var(--transition);
  563.             z-index: -1;
  564.         }
  566.         .program-card::after {
  567.             content: '';
  568.             position: absolute;
  569.             top: 0;
  570.             left: 0;
  571.             width: 100%;
  572.             height: 0;
  573.             background: linear-gradient(180deg, rgba(216, 76, 43, 0.05), transparent);
  574.             transition: var(--transition);
  575.             z-index: -1;
  576.         }
  578.         .program-card:hover {
  579.             transform: translateY(-10px);
  580.             box-shadow: 0 20px 40px rgba(0,0,0,0.1);
  581.         }
  583.         .program-card:hover::before {
  584.             height: 8px;
  585.         }
  587.         .program-card:hover::after {
  588.             height: 100%;
  589.         }
  591.         .program-card-icon {
  592.             width: 70px;
  593.             height: 70px;
  594.             border-radius: 50%;
  595.             display: flex;
  596.             justify-content: center;
  597.             align-items: center;
  598.             margin-bottom: 25px;
  599.             transition: var(--transition);
  600.             background: rgba(216, 76, 43, 0.1);
  601.         }
  603.         .program-card:hover .program-card-icon {
  604.             transform: scale(1.1) rotate(5deg);
  605.             background: rgba(216, 76, 43, 0.15);
  606.         }
  608.         .program-card-icon svg {
  609.             color: var(--accent-orange);
  610.             stroke: var(--accent-orange);
  611.         }
  613.         .program-card-title {
  614.             color: var(--primary-blue);
  615.             font-size: var(--font-size-xl);
  616.             margin: 0 0 20px 0;
  617.             font-weight: 700;
  618.         }
  620.         .program-card-text {
  621.             color: var(--text-light);
  622.             margin-bottom: 25px;
  623.             line-height: 1.7;
  624.             font-size: var(--font-size-base);
  625.         }
  627.         .program-card-feature {
  628.             display: flex;
  629.             align-items: center;
  630.             margin-bottom: 12px;
  631.         }
  633.         .program-card-feature svg {
  634.             margin-right: 12px;
  635.             flex-shrink: 0;
  636.             color: var(--accent-orange);
  637.             stroke: var(--accent-orange);
  638.         }
  640.         .program-card-feature span {
  641.             color: var(--text-light);
  642.             font-size: var(--font-size-base);
  643.         }
  645.         .program-card-cta {
  646.             background: var(--gradient-primary);
  647.             color: var(--white);
  648.             box-shadow: 0 10px 30px rgba(38, 51, 113, 0.3);
  649.         }
  651.         .program-card-cta:hover {
  652.             box-shadow: 0 20px 40px rgba(38, 51, 113, 0.4);
  653.         }
  655.         .program-card-cta .program-card-title,
  656.         .program-card-cta .program-card-text,
  657.         .program-card-cta .program-card-feature span {
  658.             color: var(--white);
  659.         }
  661.         .program-card-cta .program-card-text {
  662.             opacity: 0.9;
  663.         }
  665.         .program-card-cta .program-card-feature span {
  666.             opacity: 0.9;
  667.         }
  669.         .program-card-cta .program-card-icon {
  670.             background-color: rgba(255, 255, 255, 0.2);
  671.         }
  673.         .program-card-cta .program-card-icon svg {
  674.             color: var(--white);
  675.             stroke: var(--white);
  676.         }
  678.         .program-card-cta::after {
  679.             background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent);
  680.         }
  682.         .program-card-button {
  683.             display: inline-block;
  684.             background: var(--gradient-accent);
  685.             color: var(--white);
  686.             padding: 14px 30px;
  687.             text-decoration: none;
  688.             border-radius: 50px;
  689.             font-weight: 600;
  690.             margin-top: 25px;
  691.             transition: var(--transition);
  692.             box-shadow: 0 5px 15px rgba(216, 76, 43, 0.3);
  693.             position: relative;
  694.             overflow: hidden;
  695.             font-size: var(--font-size-base);
  696.         }
  698.         .program-card-button::before {
  699.             content: '';
  700.             position: absolute;
  701.             top: 0;
  702.             left: -100%;
  703.             width: 100%;
  704.             height: 100%;
  705.             background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  706.             transition: 0.5s;
  707.         }
  709.         .program-card-button:hover::before {
  710.             left: 100%;
  711.         }
  713.         .program-card-button:hover {
  714.             transform: translateY(-3px) scale(1.05);
  715.             box-shadow: 0 8px 20px rgba(216, 76, 43, 0.4);
  716.             color: var(--white);
  717.         }
  719.         /* Benefits List - IMPROVED */
  720.         .benefits-list {
  721.             color: var(--text-light);
  722.             padding-left: 5px;
  723.             list-style-type: none;
  724.         }
  726.         .benefits-list li {
  727.             margin-bottom: 15px;
  728.             display: flex;
  729.             align-items: flex-start;
  730.             padding-bottom: 15px;
  731.             border-bottom: 1px dashed rgba(216, 76, 43, 0.2);
  732.             font-size: var(--font-size-base);
  733.             transition: var(--transition);
  734.         }
  736.         .benefits-list li:hover {
  737.             transform: translateX(5px);
  738.         }
  740.         .benefits-list li:last-child {
  741.             border-bottom: none;
  742.             padding-bottom: 0;
  743.         }
  745.         .benefits-list li span {
  746.             color: var(--accent-orange);
  747.             margin-right: 12px;
  748.             font-weight: bold;
  749.             font-size: var(--font-size-lg);
  750.         }
  752.         /* Program Overview Section - IMPROVED */
  753.         .overview-container {
  754.             padding: 50px;
  755.             background-color: var(--white);
  756.             border-radius: 20px;
  757.             box-shadow: var(--card-shadow);
  758.             margin-bottom: 60px;
  759.             position: relative;
  760.             overflow: hidden;
  761.         }
  763.         .overview-container::before {
  764.             content: '';
  765.             position: absolute;
  766.             top: 0;
  767.             left: 0;
  768.             width: 100%;
  769.             height: 100%;
  770.             background: radial-gradient(circle at top right, rgba(216, 76, 43, 0.05), transparent 70%);
  771.             z-index: 0;
  772.         }
  774.         .overview-cards {
  775.             display: flex;
  776.             flex-wrap: wrap;
  777.             gap: 30px;
  778.             margin-top: 40px;
  779.             position: relative;
  780.             z-index: 1;
  781.         }
  783.         .overview-card {
  784.             flex: 1;
  785.             min-width: 300px;
  786.             background-color: var(--background);
  787.             padding: 30px;
  788.             border-radius: 15px;
  789.             position: relative;
  790.             transition: var(--transition);
  791.             overflow: hidden;
  792.             z-index: 1;
  793.         }
  795.         .overview-card::after {
  796.             content: '';
  797.             position: absolute;
  798.             bottom: -100%;
  799.             right: -100%;
  800.             width: 200%;
  801.             height: 200%;
  802.             background: radial-gradient(circle, rgba(216, 76, 43, 0.05), transparent 70%);
  803.             transition: var(--transition);
  804.             z-index: -1;
  805.         }
  807.         .overview-card:hover::after {
  808.             bottom: -50%;
  809.             right: -50%;
  810.         }
  812.         .overview-card:hover {
  813.             transform: translateY(-5px);
  814.             box-shadow: 0 15px 30px rgba(0,0,0,0.1);
  815.         }
  817.         .overview-card-primary {
  818.             border-top: 5px solid var(--primary-blue);
  819.         }
  821.         .overview-card-accent {
  822.             border-top: 5px solid var(--accent-orange);
  823.         }
  825.         .overview-card-title {
  826.             color: var(--primary-blue);
  827.             font-size: var(--font-size-xl);
  828.             margin-top: 0;
  829.             margin-bottom: 20px;
  830.             display: flex;
  831.             align-items: center;
  832.             gap: 12px;
  833.             font-weight: 700;
  834.         }
  836.         .overview-card-title svg {
  837.             color: var(--accent-orange);
  838.             stroke: var(--accent-orange);
  839.         }
  841.         .overview-card-period {
  842.             color: var(--text-light);
  843.             margin-bottom: 20px;
  844.             display: inline-block;
  845.             padding: 6px 15px;
  846.             background-color: rgba(216, 76, 43, 0.1);
  847.             border-radius: 30px;
  848.             font-size: var(--font-size-sm);
  849.         }
  851.         .overview-card-list {
  852.             color: var(--text-dark);
  853.             padding-left: 5px;
  854.             list-style-type: none;
  855.         }
  857.         .overview-card-list li {
  858.             margin-bottom: 14px;
  859.             padding-left: 25px;
  860.             position: relative;
  861.             font-size: var(--font-size-base);
  862.             transition: var(--transition);
  863.         }
  865.         .overview-card-list li:hover {
  866.             transform: translateX(5px);
  867.         }
  869.         .overview-card-list li::before {
  870.             content: '';
  871.             position: absolute;
  872.             left: 0;
  873.             top: 10px;
  874.             width: 8px;
  875.             height: 8px;
  876.             border-radius: 50%;
  877.             background-color: var(--accent-orange);
  878.         }
  880.         .overview-card-content {
  881.             background-color: var(--white);
  882.             padding: 25px;
  883.             border-radius: 12px;
  884.             margin-top: 25px;
  885.             box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  886.         }
  888.         .overview-card-content p {
  889.             color: var(--text-dark);
  890.             margin: 0;
  891.             line-height: 1.7;
  892.             font-size: var(--font-size-base);
  893.         }
  895.         .overview-card-info {
  896.             display: flex;
  897.             align-items: center;
  898.             background-color: rgba(216, 76, 43, 0.1);
  899.             padding: 15px;
  900.             border-radius: 12px;
  901.             margin-top: 20px;
  902.         }
  904.         .overview-card-info svg {
  905.             margin-right: 12px;
  906.             color: var(--accent-orange);
  907.             stroke: var(--accent-orange);
  908.         }
  910.         .overview-card-info span {
  911.             color: var(--primary-blue);
  912.             font-weight: 600;
  913.             font-size: var(--font-size-base);
  914.         }
  916.         /* Degree Cards - IMPROVED */
  917.         .degree-cards {
  918.             display: flex;
  919.             flex-wrap: wrap;
  920.             gap: 30px;
  921.             justify-content: center;
  922.             margin-bottom: 60px;
  923.         }
  925.         .degree-card {
  926.             flex: 1;
  927.             min-width: 300px;
  928.             max-width: 500px;
  929.             background: var(--white);
  930.             padding: 35px;
  931.             border-radius: 20px;
  932.             box-shadow: var(--card-shadow);
  933.             transition: var(--transition);
  934.             position: relative;
  935.             overflow: hidden;
  936.             z-index: 1;
  937.         }
  939.         .degree-card::after {
  940.             content: '';
  941.             position: absolute;
  942.             top: 0;
  943.             left: 0;
  944.             width: 100%;
  945.             height: 0;
  946.             background: linear-gradient(180deg, rgba(216, 76, 43, 0.05), transparent);
  947.             transition: var(--transition);
  948.             z-index: -1;
  949.         }
  951.         .degree-card:hover::after {
  952.             height: 100%;
  953.         }
  955.         .degree-card:hover {
  956.             transform: translateY(-10px);
  957.             box-shadow: 0 20px 40px rgba(0,0,0,0.1);
  958.         }
  960.         .degree-card-primary {
  961.             border-left: 5px solid var(--primary-blue);
  962.         }
  964.         .degree-card-accent {
  965.             border-left: 5px solid var(--accent-orange);
  966.         }
  968.         .degree-card-header {
  969.             display: flex;
  970.             align-items: center;
  971.             margin-bottom: 25px;
  972.         }
  974.         .degree-card-icon {
  975.             width: 65px;
  976.             height: 65px;
  977.             border-radius: 50%;
  978.             display: flex;
  979.             justify-content: center;
  980.             align-items: center;
  981.             flex-shrink: 0;
  982.             transition: var(--transition);
  983.             background: rgba(216, 76, 43, 0.1);
  984.         }
  986.         .degree-card-icon svg {
  987.             color: var(--accent-orange);
  988.             stroke: var(--accent-orange);
  989.         }
  991.         .degree-card:hover .degree-card-icon {
  992.             transform: scale(1.1) rotate(5deg);
  993.             background: rgba(216, 76, 43, 0.15);
  994.         }
  996.         .degree-card-title-container {
  997.             margin-left: 20px;
  998.         }
  1000.         .degree-card-title {
  1001.             color: var(--primary-blue);
  1002.             font-size: var(--font-size-xl);
  1003.             margin: 0 0 8px 0;
  1004.             font-weight: 700;
  1005.         }
  1007.         .degree-card-subtitle {
  1008.             color: var(--text-light);
  1009.             margin: 0;
  1010.             font-size: var(--font-size-base);
  1011.         }
  1013.         .degree-card-content {
  1014.             color: var(--text-dark);
  1015.             line-height: 1.7;
  1016.             padding-top: 15px;
  1017.             border-top: 1px solid rgba(216, 76, 43, 0.1);
  1018.             font-size: var(--font-size-base);
  1019.         }
  1021.         /* Admission Section76,43,0.1);
  1022.             font-size: var(--font-size-base);
  1023.         }
  1025.         /* Admission Section - IMPROVED */
  1026.         .admission-container {
  1027.             padding: 50px;
  1028.             background-color: var(--white);
  1029.             border-radius: 20px;
  1030.             box-shadow: var(--card-shadow);
  1031.             margin-bottom: 60px;
  1032.             position: relative;
  1033.             overflow: hidden;
  1034.         }
  1036.         .admission-container::before {
  1037.             content: '';
  1038.             position: absolute;
  1039.             top: 0;
  1040.             left: 0;
  1041.             width: 100%;
  1042.             height: 100%;
  1043.             background: radial-gradient(circle at bottom left, rgba(216, 76, 43, 0.05), transparent 70%);
  1044.             z-index: 0;
  1045.         }
  1047.         .admission-columns {
  1048.             display: flex;
  1049.             flex-wrap: wrap;
  1050.             gap: 40px;
  1051.             margin-top: 30px;
  1052.             position: relative;
  1053.             z-index: 1;
  1054.         }
  1056.         .admission-column {
  1057.             flex: 1;
  1058.             min-width: 300px;
  1059.         }
  1061.         .admission-title {
  1062.             color: var(--primary-blue);
  1063.             font-size: var(--font-size-xl);
  1064.             margin-bottom: 25px;
  1065.             display: flex;
  1066.             align-items: center;
  1067.             gap: 12px;
  1068.             font-weight: 700;
  1069.         }
  1071.         .admission-title svg {
  1072.             color: var(--accent-orange);
  1073.             stroke: var(--accent-orange);
  1074.         }
  1076.         .requirements-container {
  1077.             background-color: var(--background);
  1078.             padding: 25px;
  1079.             border-radius: 15px;
  1080.             margin-bottom: 25px;
  1081.             box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  1082.             transition: var(--transition);
  1083.             position: relative;
  1084.             overflow: hidden;
  1085.         }
  1087.         .requirements-container::after {
  1088.             content: '';
  1089.             position: absolute;
  1090.             top: 0;
  1091.             left: 0;
  1092.             width: 100%;
  1093.             height: 100%;
  1094.             background: radial-gradient(circle at top right, rgba(216, 76, 43, 0.05), transparent 70%);
  1095.             z-index: -1;
  1096.             opacity: 0;
  1097.             transition: var(--transition);
  1098.         }
  1100.         .requirements-container:hover {
  1101.             transform: translateY(-5px);
  1102.             box-shadow: 0 15px 30px rgba(0,0,0,0.1);
  1103.         }
  1105.         .requirements-container:hover::after {
  1106.             opacity: 1;
  1107.         }
  1109.         .requirement-item {
  1110.             display: flex;
  1111.             align-items: flex-start;
  1112.             gap: 15px;
  1113.             margin-bottom: 20px;
  1114.             padding-bottom: 20px;
  1115.             border-bottom: 1px dashed rgba(216, 76, 43, 0.2);
  1116.             transition: var(--transition);
  1117.         }
  1119.         .requirement-item:hover {
  1120.             transform: translateX(5px);
  1121.         }
  1123.         .requirement-item:last-child {
  1124.             margin-bottom: 0;
  1125.             padding-bottom: 0;
  1126.             border-bottom: none;
  1127.         }
  1129.         .requirement-number {
  1130.             width: 35px;
  1131.             height: 35px;
  1132.             background-color: var(--accent-orange);
  1133.             border-radius: 50%;
  1134.             color: var(--white);
  1135.             display: flex;
  1136.             justify-content: center;
  1137.             align-items: center;
  1138.             font-weight: 600;
  1139.             flex-shrink: 0;
  1140.             transition: var(--transition);
  1141.         }
  1143.         .requirement-item:hover .requirement-number {
  1144.             transform: scale(1.1);
  1145.             box-shadow: 0 5px 10px rgba(216, 76, 43, 0.3);
  1146.         }
  1148.         .requirement-content {
  1149.             flex-grow: 1;
  1150.         }
  1152.         .requirement-title {
  1153.             font-weight: 600;
  1154.             color: var(--primary-blue);
  1155.             margin-bottom: 8px;
  1156.             font-size: var(--font-size-base);
  1157.         }
  1159.         .requirement-description {
  1160.             color: var(--text-light);
  1161.             font-size: var(--font-size-base);
  1162.             line-height: 1.6;
  1163.         }
  1165.         .documents-grid {
  1166.             display: grid;
  1167.             grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  1168.             gap: 15px;
  1169.         }
  1171.         .document-item {
  1172.             display: flex;
  1173.             align-items: center;
  1174.             gap: 12px;
  1175.             background-color: var(--background);
  1176.             padding: 18px;
  1177.             border-radius: 12px;
  1178.             box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  1179.             transition: var(--transition);
  1180.             position: relative;
  1181.             overflow: hidden;
  1182.             z-index: 1;
  1183.         }
  1185.         .document-item::after {
  1186.             content: '';
  1187.             position: absolute;
  1188.             top: 0;
  1189.             left: 0;
  1190.             width: 100%;
  1191.             height: 100%;
  1192.             background: linear-gradient(90deg, rgba(216, 76, 43, 0.05), transparent);
  1193.             opacity: 0;
  1194.             transition: var(--transition);
  1195.             z-index: -1;
  1196.         }
  1198.         .document-item:hover {
  1199.             transform: translateX(5px);
  1200.             box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  1201.         }
  1203.         .document-item:hover::after {
  1204.             opacity: 1;
  1205.         }
  1207.         .document-item svg {
  1208.             color: var(--accent-orange);
  1209.             stroke: var(--accent-orange);
  1210.         }
  1212.         .document-title {
  1213.             font-weight: 600;
  1214.             color: var(--primary-blue);
  1215.             font-size: var(--font-size-base);
  1216.         }
  1218.         /* Important Dates - IMPROVED */
  1219.         .dates-title {
  1220.             color: var(--primary-blue);
  1221.             font-size: var(--font-size-xl);
  1222.             margin: 40px 0 25px;
  1223.             display: flex;
  1224.             align-items: center;
  1225.             gap: 12px;
  1226.             font-weight: 700;
  1227.             position: relative;
  1228.             z-index: 1;
  1229.         }
  1231.         .dates-title svg {
  1232.             color: var(--accent-orange);
  1233.             stroke: var(--accent-orange);
  1234.         }
  1236.         .dates-container {
  1237.             display: flex;
  1238.             flex-wrap: wrap;
  1239.             gap: 20px;
  1240.             justify-content: center;
  1241.             position: relative;
  1242.             z-index: 1;
  1243.         }
  1245.         .date-item {
  1246.             flex: 1;
  1247.             min-width: 200px;
  1248.             max-width: 220px;
  1249.             background-color: var(--background);
  1250.             padding: 25px;
  1251.             border-radius: 15px;
  1252.             text-align: center;
  1253.             transition: var(--transition);
  1254.             box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  1255.             position: relative;
  1256.             overflow: hidden;
  1257.             z-index: 1;
  1258.         }
  1260.         .date-item::after {
  1261.             content: '';
  1262.             position: absolute;
  1263.             bottom: -50%;
  1264.             right: -50%;
  1265.             width: 200%;
  1266.             height: 200%;
  1267.             background: radial-gradient(circle, rgba(216, 76, 43, 0.05), transparent 70%);
  1268.             transition: var(--transition);
  1269.             z-index: -1;
  1270.             opacity: 0;
  1271.         }
  1273.         .date-item:hover::after {
  1274.             opacity: 1;
  1275.         }
  1277.         .date-item:hover {
  1278.             transform: translateY(-10px);
  1279.             box-shadow: 0 15px 30px rgba(0,0,0,0.1);
  1280.         }
  1282.         .date-calendar {
  1283.             width: 65px;
  1284.             height: 65px;
  1285.             background-color: var(--accent-orange);
  1286.             color: var(--white);
  1287.             border-radius: 15px;
  1288.             display: flex;
  1289.             flex-direction: column;
  1290.             justify-content: center;
  1291.             align-items: center;
  1292.             margin: 0 auto 15px;
  1293.             transition: var(--transition);
  1294.             box-shadow: 0 5px 15px rgba(216, 76, 43, 0.2);
  1295.         }
  1297.         .date-item:hover .date-calendar {
  1298.             transform: scale(1.1) rotate(3deg);
  1299.             box-shadow: 0 8px 20px rgba(216, 76, 43, 0.3);
  1300.         }
  1302.         .date-day {
  1303.             font-size: var(--font-size-xl);
  1304.             font-weight: 700;
  1305.         }
  1307.         .date-month {
  1308.             font-size: var(--font-size-sm);
  1309.         }
  1311.         .date-title {
  1312.             font-weight: 600;
  1313.             color: var(--primary-blue);
  1314.             font-size: var(--font-size-base);
  1315.         }
  1317.         /* CTA Section - IMPROVED */
  1318.         .cta-section {
  1319.             background: var(--gradient-primary);
  1320.             border-radius: 20px;
  1321.             overflow: hidden;
  1322.             margin-bottom: 70px;
  1323.             box-shadow: 0 20px 40px rgba(38, 51, 113, 0.3);
  1324.             position: relative;
  1325.         }
  1327.         .cta-container {
  1328.             display: flex;
  1329.             flex-wrap: wrap;
  1330.             position: relative;
  1331.             z-index: 1;
  1332.         }
  1334.         .cta-content {
  1335.             flex: 1;
  1336.             min-width: 300px;
  1337.             padding: 60px;
  1338.             display: flex;
  1339.             flex-direction: column;
  1340.             justify-content: center;
  1341.         }
  1343.         .cta-title {
  1344.             font-size: var(--font-size-4xl);
  1345.             font-weight: 800;
  1346.             color: var(--white);
  1347.             margin: 0 0 25px;
  1348.             line-height: 1;
  1349.             animation: pulse 2s infinite;
  1350.         }
  1352.         .cta-title span {
  1353.             color: var(--accent-orange);
  1354.             position: relative;
  1355.             display: inline-block;
  1356.         }
  1358.            /* PDF Download Section Styles */
  1359.     .pdf-download-section {
  1360.         background-color: var(--white);
  1361.         border-radius: 20px;
  1362.         padding: 50px;
  1363.         margin-bottom: 60px;
  1364.         box-shadow: var(--card-shadow);
  1365.         position: relative;
  1366.         overflow: hidden;
  1367.     }
  1369.     .pdf-download-section::before {
  1370.         content: '';
  1371.         position: absolute;
  1372.         top: 0;
  1373.         left: 0;
  1374.         width: 100%;
  1375.         height: 100%;
  1376.         background: radial-gradient(circle at top right, rgba(216, 76, 43, 0.03), transparent 70%);
  1377.         z-index: 0;
  1378.     }
  1380.     .pdf-download-container {
  1381.         background-color: var(--background);
  1382.         border-radius: 15px;
  1383.         padding: 40px;
  1384.         margin-top: 30px;
  1385.         box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  1386.         display: flex;
  1387.         flex-direction: column;
  1388.         align-items: center;
  1389.         position: relative;
  1390.         overflow: hidden;
  1391.         z-index: 1;
  1392.     }
  1394.     .pdf-download-container::after {
  1395.         content: '';
  1396.         position: absolute;
  1397.         top: 0;
  1398.         left: 0;
  1399.         width: 100%;
  1400.         height: 100%;
  1401.         background: radial-gradient(circle at top right, rgba(216, 76, 43, 0.03), transparent 70%);
  1402.         z-index: -1;
  1403.     }
  1405.     .pdf-preview {
  1406.         display: flex;
  1407.         align-items: center;
  1408.         gap: 30px;
  1409.         margin-bottom: 30px;
  1410.         width: 100%;
  1411.         max-width: 800px;
  1412.         padding-bottom: 30px;
  1413.         border-bottom: 1px dashed rgba(216, 76, 43, 0.2);
  1414.     }
  1416.     .pdf-preview svg {
  1417.         color: var(--accent-orange);
  1418.         flex-shrink: 0;
  1419.         padding: 20px;
  1420.         background-color: rgba(216, 76, 43, 0.1);
  1421.         border-radius: 15px;
  1422.         transition: var(--transition);
  1423.     }
  1425.     .pdf-info {
  1426.         flex-grow: 1;
  1427.     }
  1429.     .pdf-info h3 {
  1430.         color: var(--primary-blue);
  1431.         font-size: var(--font-size-xl);
  1432.         margin: 0 0 15px 0;
  1433.         font-weight: 700;
  1434.     }
  1436.     .pdf-info p {
  1437.         color: var(--text-light);
  1438.         margin-bottom: 15px;
  1439.         line-height: 1.6;
  1440.     }
  1442.     .pdf-details {
  1443.         list-style: none;
  1444.         padding: 0;
  1445.         margin: 0;
  1446.         display: flex;
  1447.         flex-wrap: wrap;
  1448.         gap: 15px;
  1449.     }
  1451.     .pdf-details li {
  1452.         display: flex;
  1453.         align-items: center;
  1454.         gap: 5px;
  1455.         color: var(--text-dark);
  1456.         font-size: var(--font-size-sm);
  1457.         background-color: rgba(38, 51, 113, 0.05);
  1458.         padding: 5px 12px;
  1459.         border-radius: 20px;
  1460.     }
  1462.     .pdf-details li span {
  1463.         font-weight: 600;
  1464.     }
  1466.     .pdf-download-button {
  1467.         display: inline-flex;
  1468.         align-items: center;
  1469.         gap: 10px;
  1470.         background: var(--gradient-primary);
  1471.         color: var(--white);
  1472.         padding: 16px 35px;
  1473.         text-decoration: none;
  1474.         border-radius: 50px;
  1475.         font-weight: 600;
  1476.         transition: var(--transition);
  1477.         box-shadow: 0 8px 20px rgba(38, 51, 113, 0.3);
  1478.         position: relative;
  1479.         overflow: hidden;
  1480.         font-size: var(--font-size-base);
  1481.     }
  1483.     .pdf-download-button::before {
  1484.         content: '';
  1485.         position: absolute;
  1486.         top: 0;
  1487.         left: -100%;
  1488.         width: 100%;
  1489.         height: 100%;
  1490.         background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  1491.         transition: 0.5s;
  1492.     }
  1494.     .pdf-download-button:hover::before {
  1495.         left: 100%;
  1496.     }
  1498.     .pdf-download-button:hover {
  1499.         transform: translateY(-5px) scale(1.05);
  1500.         box-shadow: 0 12px 25px rgba(38, 51, 113, 0.4);
  1501.         color: var(--white);
  1502.     }
  1504.     .pdf-download-button svg {
  1505.         transition: var(--transition);
  1506.     }
  1508.     .pdf-download-button:hover svg {
  1509.         transform: translateY(3px);
  1510.     }
  1512.     /* Responsive adjustments */
  1513.     @media (max-width: 768px) {
  1514.         .pdf-download-section {
  1515.             padding: 40px 30px;
  1516.         }
  1518.         .pdf-preview {
  1519.             flex-direction: column;
  1520.             text-align: center;
  1521.         }
  1523.         .pdf-details {
  1524.             justify-content: center;
  1525.         }
  1526.     }
  1528.     @media (max-width: 480px) {
  1529.         .pdf-download-section {
  1530.             padding: 30px 20px;
  1531.         }
  1533.         .pdf-download-container {
  1534.             padding: 30px 20px;
  1535.         }
  1537.         .pdf-preview svg {
  1538.             width: 80px;
  1539.             height: 80px;
  1540.             padding: 15px;
  1541.         }
  1543.         .pdf-download-button {
  1544.             padding: 12px 25px;
  1545.             font-size: var(--font-size-sm);
  1546.         }
  1547.     }
  1549.         .cta-title span::after {
  1550.             content: '';
  1551.             position: absolute;
  1552.             bottom: -5px;
  1553.             left: 0;
  1554.             width: 100%;
  1555.             height: 3px;
  1556.             background-color: var(--accent-orange);
  1557.             transform: scaleX(0);
  1558.             transform-origin: right;
  1559.             transition: transform 0.5s ease;
  1560.         }
  1562.         .cta-section:hover .cta-title span::after {
  1563.             transform: scaleX(1);
  1564.             transform-origin: left;
  1565.         }
  1567.         .cta-text {
  1568.             color: rgba(255, 255, 255, 0.9);
  1569.             font-size: var(--font-size-lg);
  1570.             margin-bottom: 35px;
  1571.             max-width: 500px;
  1572.             line-height: 1.7;
  1573.         }
  1575.         .cta-button {
  1576.             display: inline-flex;
  1577.             align-items: center;
  1578.             background: var(--gradient-accent);
  1579.             color: var(--white);
  1580.             padding: 16px 35px;
  1581.             text-decoration: none;
  1582.             border-radius: 50px;
  1583.             font-weight: 600;
  1584.             transition: var(--transition);
  1585.             box-shadow: 0 8px 20px rgba(216, 76, 43, 0.3);
  1586.             align-self: flex-start;
  1587.             position: relative;
  1588.             overflow: hidden;
  1589.             font-size: var(--font-size-base);
  1590.         }
  1592.         .cta-button::before {
  1593.             content: '';
  1594.             position: absolute;
  1595.             top: 0;
  1596.             left: -100%;
  1597.             width: 100%;
  1598.             height: 100%;
  1599.             background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  1600.             transition: 0.5s;
  1601.         }
  1603.         .cta-button:hover::before {
  1604.             left: 100%;
  1605.         }
  1607.         .cta-button:hover {
  1608.             transform: translateY(-5px) scale(1.05);
  1609.             box-shadow: 0 12px 25px rgba(216, 76, 43, 0.4);
  1610.             color: var(--white);
  1611.         }
  1613.         .cta-button span {
  1614.             margin-left: 12px;
  1615.             transition: var(--transition);
  1616.         }
  1618.         .cta-button:hover span {
  1619.             transform: translateX(5px);
  1620.         }
  1622.         .cta-contact {
  1623.             flex: 1;
  1624.             min-width: 300px;
  1625.             background-color: rgba(0, 0, 0, 0.1);
  1626.             padding: 60px;
  1627.             display: flex;
  1628.             align-items: center;
  1629.             justify-content: center;
  1630.         }
  1632.         .contact-content {
  1633.             text-align: center;
  1634.         }
  1636.         .contact-icon {
  1637.             width: 110px;
  1638.             height: 110px;
  1639.             background-color: rgba(216, 76, 43, 0.2);
  1640.             border-radius: 50%;
  1641.             display: flex;
  1642.             justify-content: center;
  1643.             align-items: center;
  1644.             margin: 0 auto 25px;
  1645.             transition: var(--transition);
  1646.         }
  1648.         .contact-icon:hover {
  1649.             transform: scale(1.1) rotate(5deg);
  1650.             background-color: rgba(216, 76, 43, 0.3);
  1651.         }
  1653.         .contact-icon svg {
  1654.             color: var(--white);
  1655.             stroke: var(--white);
  1656.         }
  1658.         .contact-title {
  1659.             color: var(--white);
  1660.             font-size: var(--font-size-2xl);
  1661.             margin: 0 0 15px 0;
  1662.             font-weight: 700;
  1663.         }
  1665.         .contact-text {
  1666.             color: rgba(255, 255, 255, 0.9);
  1667.             margin-bottom: 30px;
  1668.             font-size: var(--font-size-base);
  1669.         }
  1671.         .contact-button {
  1672.             display: inline-flex;
  1673.             align-items: center;
  1674.             background-color: var(--white);
  1675.             color: var(--accent-orange);
  1676.             padding: 16px 35px;
  1677.             text-decoration: none;
  1678.             border-radius: 50px;
  1679.             font-weight: 600;
  1680.             transition: var(--transition);
  1681.             box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  1682.             position: relative;
  1683.             overflow: hidden;
  1684.             font-size: var(--font-size-base);
  1685.         }
  1687.         .contact-button::before {
  1688.             content: '';
  1689.             position: absolute;
  1690.             top: 0;
  1691.             left: -100%;
  1692.             width: 100%;
  1693.             height: 100%;
  1694.             background: linear-gradient(90deg, transparent, rgba(216, 76, 43, 0.1), transparent);
  1695.             transition: 0.5s;
  1696.         }
  1698.         .contact-button:hover::before {
  1699.             left: 100%;
  1700.         }
  1702.         .contact-button:hover {
  1703.             transform: translateY(-5px) scale(1.05);
  1704.             box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3);
  1705.             color: var(--accent-orange-dark);
  1706.         }
  1708.         .contact-button span {
  1709.             margin-left: 12px;
  1710.             transition: var(--transition);
  1711.         }
  1713.         .contact-button:hover span {
  1714.             transform: translateX(5px);
  1715.         }
  1717.         .cta-circle {
  1718.             position: absolute;
  1719.             border-radius: 50%;
  1720.             background: rgba(255, 255, 255, 0.05);
  1721.         }
  1723.         .cta-circle-1 {
  1724.             top: -50px;
  1725.             right: -50px;
  1726.             width: 200px;
  1727.             height: 200px;
  1728.         }
  1730.         .cta-circle-2 {
  1731.             bottom: -30px;
  1732.             left: -30px;
  1733.             width: 150px;
  1734.             height: 150px;
  1735.         }
  1737.         .cta-circle-3 {
  1738.             top: -30px;
  1739.             right: 30%;
  1740.             width: 100px;
  1741.             height: 100px;
  1742.         }
  1744.         /* Animation */
  1745.         @keyframes pulse {
  1746.             0% { transform: scale(1); opacity: 0.5; }
  1747.             50% { transform: scale(1.03); opacity: 0.8; }
  1748.             100% { transform: scale(1); opacity: 0.5; }
  1749.         }
  1751.         /* Responsive Styles */
  1752.         @media (max-width: 992px) {
  1753.             .logo-container {
  1754.                 flex-direction: column;
  1755.                 text-align: center;
  1756.                 gap: 15px;
  1757.             }
  1758.             
  1759.             .main-logo {
  1760.                 width: 220px; /* Slightly smaller on tablet */
  1761.             }
  1762.             
  1763.             .logo-divider {
  1764.                 display: none;
  1765.             }
  1766.             
  1767.             .main-image-container {
  1768.                 height: 450px;
  1769.             }
  1771.             .overlay-title {
  1772.                 font-size: var(--font-size-3xl);
  1773.             }
  1775.             .overlay-subtitle {
  1776.                 font-size: var(--font-size-lg);
  1777.             }
  1778.             
  1779.             .cta-content, .cta-contact {
  1780.                 padding: 50px 40px;
  1781.             }
  1783.             .introduction-section {
  1784.                 padding: 30px;
  1785.             }
  1786.         }
  1788.         @media (max-width: 768px) {
  1789.             .main-logo {
  1790.                 width: 200px;
  1791.                 height: auto;
  1792.             }
  1793.             
  1794.             .main-image-container {
  1795.                 height: 400px;
  1796.             }
  1798.             .overlay-title {
  1799.                 font-size: var(--font-size-2xl);
  1800.             }
  1802.             .overlay-subtitle {
  1803.                 font-size: var(--font-size-base);
  1804.             }
  1806.             .section-title {
  1807.                 font-size: var(--font-size-2xl);
  1808.             }
  1810.             .cta-content, .cta-contact {
  1811.                 padding: 40px 30px;
  1812.             }
  1814.             .cta-title {
  1815.                 font-size: var(--font-size-3xl);
  1816.             }
  1817.             
  1818.             .overview-container, .admission-container {
  1819.                 padding: 40px 30px;
  1820.             }
  1821.         }
  1823.         @media (max-width: 480px) {
  1824.             .main-logo {
  1825.                 width: 180px;
  1826.                 height: auto;
  1827.                 transition: var(--transition);
  1828.                 filter: brightness(0) invert(1);
  1829.                 animation: logoGlow 3s infinite alternate;
  1830.             }
  1831.             
  1832.             .main-image-container {
  1833.                 height: 350px;
  1834.             }
  1835.             
  1836.             .image-overlay {
  1837.                 padding: 30px 20px;
  1838.             }
  1840.             .overlay-title {
  1841.                 font-size: var(--font-size-xl);
  1842.             }
  1844.             .overlay-subtitle {
  1845.                 font-size: var(--font-size-base);
  1846.             }
  1848.             .overlay-cta {
  1849.                 font-size: var(--font-size-base);
  1850.                 padding: 12px 25px;
  1851.             }
  1853.             .section-title {
  1854.                 font-size: var(--font-size-xl);
  1855.             }
  1857.             .overview-container, .admission-container {
  1858.                 padding: 30px 20px;
  1859.             }
  1861.             .cta-title {
  1862.                 font-size: var(--font-size-2xl);
  1863.             }
  1865.             .cta-text {
  1866.                 font-size: var(--font-size-base);
  1867.             }
  1868.             
  1869.             .program-card, .overview-card, .degree-card {
  1870.                 padding: 25px 20px;
  1871.             }
  1873.             .introduction-section {
  1874.                 padding: 25px 20px;
  1875.             }
  1876.         }
  1877.     </style>
  1878.     
  1879. </head>
  1880. <body>
  1882.     ";
  1883.         // line 1819
  1884.         yield from $this->unwrap()->yieldBlock('header', $context, $blocks);
  1885.         // line 1822
  1886.         yield " 
  1887.     ";
  1888.         // line 1823
  1889.         yield from $this->unwrap()->yieldBlock('switcher', $context, $blocks);
  1890.         // line 1824
  1891.         yield " 
  1892.     ";
  1893.         // line 1825
  1894.         yield from $this->unwrap()->yieldBlock('body', $context, $blocks);
  1895.         // line 3001
  1896.         yield "
  1897.     ";
  1898.         // line 3002
  1899.         yield from $this->unwrap()->yieldBlock('footer', $context, $blocks);
  1900.         // line 3005
  1901.         yield "
  1902.     <script type=\"text/javascript\" src=\"";
  1903.         // line 3006
  1904.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("assets/js/main.js"), "html", null, true);
  1905.         yield "\"></script>
  1906.     <script>
  1907.         function changeMainImage(thumbnail, title, description) {
  1908.             // Change main image
  1909.             const mainImage = document.getElementById('mainImage');
  1910.             mainImage.src = thumbnail.src;
  1911.             
  1912.             // Change title and description
  1913.             const titleElement = document.getElementById('imageTitle');
  1914.             const descriptionElement = document.getElementById('imageDescription');
  1915.             
  1916.             titleElement.textContent = title;
  1917.             descriptionElement.textContent = description;
  1918.             
  1919.             // Update active thumbnail
  1920.             const thumbnails = document.querySelectorAll('.thumbnail');
  1921.             thumbnails.forEach(thumb => {
  1922.                 thumb.classList.remove('active');
  1923.             });
  1924.             thumbnail.classList.add('active');
  1925.             
  1926.             // Add animation to main image
  1927.             mainImage.style.transform = 'scale(1.05)';
  1928.             setTimeout(() => {
  1929.                 mainImage.style.transform = 'scale(1)';
  1930.             }, 500);
  1931.         }
  1932.         
  1933.         // Smooth scroll for anchor links
  1934.         document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {
  1935.             anchor.addEventListener('click', function(e) {
  1936.                 e.preventDefault();
  1937.                 
  1938.                 const target = document.querySelector(this.getAttribute('href'));
  1939.                 if (target) {
  1940.                     window.scrollTo({
  1941.                         top: target.offsetTop - 80,
  1942.                         behavior: 'smooth'
  1943.                     });
  1944.                 }
  1945.             });
  1946.         });
  1947.     </script>
  1948. </body>
  1949. </html>";
  1950.         
  1951.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  1953.         
  1954.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  1956.         return; yield '';
  1957.     }
  1959.     // line 20
  1960.     public function block_seoheader($context, array $blocks = [])
  1961.     {
  1962.         $macros = $this->macros;
  1963.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  1964.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "seoheader"));
  1966.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  1967.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "seoheader"));
  1969.         // line 21
  1970.         yield "        ";
  1971.         yield from         $this->loadTemplate("Frontend/Render/head/_seoheader.html.twig", "Frontend/new_page.html.twig", 21)->unwrap()->yield($context);
  1972.         // line 22
  1973.         yield "    ";
  1974.         
  1975.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  1977.         
  1978.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  1980.         return; yield '';
  1981.     }
  1983.     // line 24
  1984.     public function block_stylesheets($context, array $blocks = [])
  1985.     {
  1986.         $macros = $this->macros;
  1987.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  1988.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "stylesheets"));
  1990.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  1991.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "stylesheets"));
  1993.         // line 25
  1994.         yield "        ";
  1995.         yield from         $this->loadTemplate("Frontend/Render/head/_stylesheets.html.twig", "Frontend/new_page.html.twig", 25)->unwrap()->yield($context);
  1996.         // line 26
  1997.         yield "    ";
  1998.         
  1999.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  2001.         
  2002.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  2004.         return; yield '';
  2005.     }
  2007.     // line 28
  2008.     public function block_javascripts($context, array $blocks = [])
  2009.     {
  2010.         $macros = $this->macros;
  2011.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  2012.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "javascripts"));
  2014.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  2015.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "javascripts"));
  2017.         // line 29
  2018.         yield "        ";
  2019.         yield from         $this->loadTemplate("Frontend/Render/head/_javascripts.html.twig", "Frontend/new_page.html.twig", 29)->unwrap()->yield($context);
  2020.         // line 30
  2021.         yield "    ";
  2022.         
  2023.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  2025.         
  2026.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  2028.         return; yield '';
  2029.     }
  2031.     // line 1819
  2032.     public function block_header($context, array $blocks = [])
  2033.     {
  2034.         $macros = $this->macros;
  2035.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  2036.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "header"));
  2038.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  2039.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "header"));
  2041.         // line 1820
  2042.         yield "        ";
  2043.         yield $this->env->getRuntime('Symfony\Bridge\Twig\Extension\HttpKernelRuntime')->renderFragment($this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("_header"));
  2044.         yield "
  2045.     ";
  2046.         
  2047.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  2049.         
  2050.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  2052.         return; yield '';
  2053.     }
  2055.     // line 1823
  2056.     public function block_switcher($context, array $blocks = [])
  2057.     {
  2058.         $macros = $this->macros;
  2059.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  2060.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "switcher"));
  2062.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  2063.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "switcher"));
  2065.         
  2066.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  2068.         
  2069.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  2071.         return; yield '';
  2072.     }
  2074.     // line 1825
  2075.     public function block_body($context, array $blocks = [])
  2076.     {
  2077.         $macros = $this->macros;
  2078.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  2079.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "body"));
  2081.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  2082.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "body"));
  2084.         // line 1826
  2085.         yield "        <!-- IMPROVED Logo Header Section with White Logo -->
  2086.         <div class=\"logo-header\">
  2087.             <div class=\"logo-container\">
  2088.                 <img src=\"https://mcgt.um6p.ma//assets/img/12.png\" style=\"width: 300px; height: auto;\" alt=\"Program Logo\"  class=\"main-logo\">                
  2089.             </div>
  2090.         </div>
  2091.     
  2092.         <div class=\"page-container\">
  2093.             <!-- Hero Gallery Section -->
  2094.             <div class=\"hero-gallery\">
  2095.                 <div class=\"main-image-container\">
  2096.                     <img id=\"mainImage\" class=\"main-image\" src=\"https://mcgt.um6p.ma/assets/img/1.jpg\" alt=\"Campus Life\">
  2097.                     <div class=\"image-overlay\">
  2098.                         <h1 id=\"imageTitle\" class=\"overlay-title\">Experience Excellence in Education</h1>
  2099.                         <p id=\"imageDescription\" class=\"overlay-subtitle\">Join our prestigious Master 2 program and learn from world-renowned experts in game theory</p>
  2100.                         <a href=\"#apply\" class=\"overlay-cta\">Apply Now</a>
  2101.                     </div>
  2102.                 </div>
  2104.                 <!-- Thumbnail Gallery -->
  2105.                 <div id=\"imageGallery\" class=\"thumbnail-gallery\">
  2106.                     <img class=\"thumbnail active\" src=\"https://mcgt.um6p.ma/assets/img/1.jpg\" alt=\"Campus View\" 
  2107.                         onclick=\"changeMainImage(this, 'Experience Excellence in Education', 'Join our prestigious Master 2 program and learn from world-renowned experts in game theory')\">
  2108.                     
  2109.                     <img class=\"thumbnail\" src=\"https://mcgt.um6p.ma/assets/img/2.jpg\" alt=\"Student Life\" 
  2110.                         onclick=\"changeMainImage(this, 'Collaborative Learning Environment', 'Engage with peers and faculty in a supportive academic community')\">
  2111.                     
  2112.                     <img class=\"thumbnail\" src=\"https://mcgt.um6p.ma/assets/img/5.jpg\" alt=\"International Community\" 
  2113.                         onclick=\"changeMainImage(this, 'International Perspective', 'Join students from around the world in a diverse learning environment')\">
  2114.                     
  2115.                     <img class=\"thumbnail\" src=\"https://mcgt.um6p.ma/assets/img/6.jpg\" alt=\"Lecture Hall\" 
  2116.                         onclick=\"changeMainImage(this, 'Engaging Lectures', 'Learn from experts through interactive and stimulating lectures')\">
  2117.                     
  2118.                     <img class=\"thumbnail\" src=\"https://mcgt.um6p.ma/assets/img/7.jpg\" alt=\"Study Groups\" 
  2119.                         onclick=\"changeMainImage(this, 'Collaborative Research', 'Work with peers on cutting-edge research projects')\">
  2120.                     
  2121.                     <img class=\"thumbnail\" src=\"https://mcgt.um6p.ma/assets/img/8.jpg\" alt=\"Campus Grounds\" 
  2122.                         onclick=\"changeMainImage(this, 'Beautiful Campus', 'Study in a modern and inspiring environment')\">
  2123.                     
  2124.                     <img class=\"thumbnail\" src=\"https://mcgt.um6p.ma/assets/img/9.jpg\" alt=\"Library\" 
  2125.                         onclick=\"changeMainImage(this, 'Extensive Resources', 'Access to comprehensive library and digital resources')\">
  2126.                     
  2127.                     <img class=\"thumbnail\" src=\"https://mcgt.um6p.ma/assets/img/10.jpg\" alt=\"Graduation\" 
  2128.                         onclick=\"changeMainImage(this, 'Academic Achievement', 'Celebrate your success with a prestigious degree')\">
  2129.                     
  2130.                     <img class=\"thumbnail\" src=\"https://mcgt.um6p.ma/assets/img/11.jpg\" alt=\"Career Opportunities\" 
  2131.                         onclick=\"changeMainImage(this, 'Future Opportunities', 'Open doors to exciting career and research opportunities')\">
  2132.                 </div>
  2133.             </div>
  2135.             <!-- Introduction Section -->
  2136.             <section class=\"introduction-section\">
  2137.                 <div class=\"introduction-content\">
  2138.                     <h2 class=\"introduction-title\">About the Program</h2>
  2139.                     
  2140.                     <p class=\"introduction-text\">The Master 2 in Mathematics and Applications at Paris Dauphine-PSL, specializing in « Game Theory in Mathematics, Economics, and Computation », takes place in Morocco on the campus of Mohammed VI Polytechnic University (UM6P) in Rabat.</p>
  2141.                     
  2142.                     <p class=\"introduction-text\">This program is offered as part of an international partnership with the Moroccan Center for Game Theory and is intended for students already enrolled in a Master 1 at Dauphine-PSL or an equivalent institution in France or the EU which allows to persue the Master 1 degree by a Master 2 at Dauphine-PSL. A few spots are available. </p>
  2143.                     
  2144.                     <p class=\"introduction-text\">Throughout the program, students will develop the following skills:</p>
  2145.                     
  2146.                     <ul class=\"skills-list\">
  2147.                         <li>Mastery of advanced theoretical techniques, including probability, statistics, combinatorics, operations research, convex optimization, game theory, and microeconomic theory.</li>
  2148.                         <li>Mastery of advanced models and methodologies, particularly in market design, auctions, repeated and stochastic games, mean-field games, algorithmic game theory, computational social choice, or multi-agent learning.</li>
  2149.                         <li>Ability to write scientific reports and communicate research findings effectively.</li>
  2150.                     </ul>
  2151.                     
  2152.                     <p class=\"introduction-text\">Successful candidates this year may have the opportunity to pursue a fully funded PhD at the Moroccan Center for Game Theory at UM6P, potentially under co-supervision with Paris Dauphine-PSL University. </p>
  2153.                     
  2154.                     <div class=\"financial-info\">
  2155.                         <p>Students enrolled at Dauphine-PSL are exempt from tuition fees at UM6P. However, they remain responsible for their travel, accommodation, and living expenses. They are eligible for on-campus housing at UM6P and can apply for a living stipend.</p>
  2156.                         
  2157.                         <p>Due to the highly limited number of spots, candidates must have an excellent academic record and a strong motivation to pursue a PhD. Applications must be submitted through our form for admission to Master 2.</p>
  2158.                     </div>
  2159.                 </div>
  2160.             </section>
  2162.             <!-- Program Cards Section -->
  2163.             <section class=\"section\">
  2164.                 <div class=\"section-header\">
  2165.                     <h2 class=\"section-title\">Master 2 Program</h2>
  2166.                     <p class=\"section-subtitle\">A prestigious program designed to develop expertise in game theory</p>
  2167.                 </div>
  2169.                 <div class=\"program-cards\">
  2170.                     <!-- Program Card -->
  2171.                     <div class=\"program-card program-card-primary\">
  2172.                         <div class=\"program-card-icon\">
  2173.                             <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"30\" height=\"30\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">
  2174.                                 <path d=\"M22 10v6M2 10l10-5 10 5-10 5z\"></path>
  2175.                                 <path d=\"M6 12v5c3 3 9 3 12 0v-5\"></path>
  2176.                             </svg>
  2177.                         </div>
  2178.                         <h3 class=\"program-card-title\">Master 2 Program</h3>
  2179.                         <p class=\"program-card-text\">Dauphine-UM6P Master 2 in Applied Mathematics: Game Theory in Mathematics, Economics, and Computation</p>
  2180.                         
  2181.                         <div class=\"program-card-feature\">
  2182.                             <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">
  2183.                                 <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>
  2184.                                 <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"></line>
  2185.                                 <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"></line>
  2186.                                 <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"></line>
  2187.                             </svg>
  2188.                             <span>One academic year (Oct-Sept)</span>
  2189.                         </div>
  2190.                         
  2191.                         <div class=\"program-card-feature\">
  2192.                             <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">
  2193.                                 <path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z\"></path>
  2194.                                 <circle cx=\"12\" cy=\"10\" r=\"3\"></circle>
  2195.                             </svg>
  2196.                             <span>UM6P Rabat Campus</span>
  2197.                         </div>
  2198.                     </div>
  2199.                     
  2200.                     <!-- Benefits Card -->
  2201.                     <div class=\"program-card program-card-accent\">
  2202.                         <div class=\"program-card-icon\">
  2203.                             <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"30\" height=\"30\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">
  2204.                                 <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"></path>
  2205.                                 <polyline points=\"22 4 12 14.01 9 11.01\"></polyline>
  2206.                             </svg>
  2207.                         </div>
  2208.                         <h3 class=\"program-card-title\">Program Benefits</h3>
  2209.                         
  2210.                         <ul class=\"benefits-list\">
  2211.                             <li><span>✓</span> World-class faculty from leading institutions</li>
  2212.                             <li><span>✓</span> Double degree: UM6P and Dauphine-PSL</li>
  2213.                             <li><span>✓</span> Direct access to PhD programs</li>
  2214.                             <li><span>✓</span> Affordable on-campus housing</li>
  2215.                         </ul>
  2216.                     </div>
  2217.                     
  2218.                     <!-- Apply Now Card -->
  2219.                     <div class=\"program-card program-card-cta\">
  2220.                         <div class=\"program-card-icon\">
  2221.                             <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"30\" height=\"30\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">
  2222.                                 <path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"></path>
  2223.                                 <polyline points=\"22,6 12,13 2,6\"></polyline>
  2224.                             </svg>
  2225.                         </div>
  2226.                         <h3 class=\"program-card-title\">Ready to Apply?</h3>
  2227.                         <p class=\"program-card-text\">Applications for the next academic year are now open. Don't miss this opportunity!</p>
  2228.                         
  2229.                         <div class=\"program-card-feature\">
  2230.                             <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">
  2231.                                 <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>
  2232.                                 <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"></line>
  2233.                                 <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"></line>
  2234.                                 <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"></line>
  2235.                             </svg>
  2236.                             <span>Deadline: May 31, 2025</span>
  2237.                         </div>
  2238.                         
  2239.                         <a href=\"#apply\" class=\"program-card-button\">Apply Now</a>
  2240.                     </div>
  2241.                 </div>
  2242.             </section>
  2244.             <!-- Program Overview Section -->
  2245.             <section class=\"section\">
  2246.                 <div class=\"overview-container\">
  2247.                     <div class=\"section-header\">
  2248.                         <h2 class=\"section-title\">Program Overview</h2>
  2249.                         <p class=\"section-subtitle\">A comprehensive curriculum designed to provide expertise in game theory and its applications</p>
  2250.                     </div>
  2252.                     <div class=\"overview-cards\">
  2253.                         <!-- Foundation Courses -->
  2254.                         <div class=\"overview-card overview-card-primary\">
  2255.                             <h3 class=\"overview-card-title\">
  2256.                                 <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">
  2257.                                     <path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"></path>
  2258.                                     <path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"></path>
  2259.                                 </svg>
  2260.                                 Foundation Courses
  2261.                             </h3>
  2262.                             <p class=\"overview-card-period\">October - December</p>
  2263.                             
  2264.                             <ul class=\"overview-card-list\">
  2265.                                 <li>Convex & Online Optimization</li>
  2266.                                 <li>Mathematical Game Theory</li>
  2267.                                 <li>Discrete Optimization & Operations Research</li>
  2268.                                 <li>Probability, Statistics & Control</li>
  2269.                                 <li>Microeconomics</li>
  2270.                             </ul>
  2271.                         </div>
  2272.                         
  2273.                         <!-- Specializations -->
  2274.                         <div class=\"overview-card overview-card-accent\">
  2275.                             <h3 class=\"overview-card-title\">
  2276.                                 <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">
  2277.                                     <polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"></polygon>
  2278.                                 </svg>
  2279.                                 Specializations
  2280.                             </h3>
  2281.                             <p class=\"overview-card-period\">January - April</p>
  2282.                             
  2283.                             <ul class=\"overview-card-list\">
  2284.                                 <li>Stochastic Games</li>
  2285.                                 <li>Optimal Transport, Differential & Mean-Field Games</li>
  2286.                                 <li>Algorithmic Game Theory</li>
  2287.                                 <li>Computational Social Choice</li>
  2288.                                 <li>Multi-Agents Learning</li>
  2289.                                 <li>Micoeconomics Modelling</li>
  2290.                             </ul>
  2291.                         </div>
  2292.                         
  2293.                         <!-- Final Semester -->
  2294.                         <div class=\"overview-card overview-card-primary\">
  2295.                             <h3 class=\"overview-card-title\">
  2296.                                 <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">
  2297.                                     <path d=\"M18 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3H6a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3V6a3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3h12a3 3 0 0 0 3-3 3 3 0 0 0-3-3z\"></path>
  2298.                                 </svg>
  2299.                                 Final Semester
  2300.                             </h3>
  2301.                             <p class=\"overview-card-period\">May - September</p>
  2302.                             
  2303.                             <div class=\"overview-card-content\">
  2304.                                 <p>Dedicated to solving a research problem and writing a Master's thesis under the supervision of world-class researchers.</p>
  2305.                             </div>
  2306.                             
  2307.                             <div class=\"overview-card-info\">
  2308.                                 <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">
  2309.                                     <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>
  2310.                                     <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"></line>
  2311.                                     <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"></line>
  2312.                                 </svg>
  2313.                                 <span>Total Credits: 60 ECTS</span>
  2314.                             </div>
  2315.                         </div>
  2316.                     </div>
  2317.                 </div>
  2318.             </section>
  2321.            <section class=\"section pdf-download-section\">
  2322.                 <div class=\"section-header\">
  2323.                     <h2 class=\"section-title\">Pre-doctoral Year Courses</h2>
  2324.                     <p class=\"section-subtitle\">Download the complete curriculum and course details for the MCGT Pre-doctoral year</p>
  2325.                 </div>
  2327.                 <div class=\"pdf-download-container\">
  2328.                     <div class=\"pdf-preview\">
  2329.                         <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"120\" height=\"120\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\">
  2330.                             <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"></path>
  2331.                             <polyline points=\"14 2 14 8 20 8\"></polyline>
  2332.                             <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"></line>
  2333.                             <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"></line>
  2334.                             <polyline points=\"10 9 9 9 8 9\"></polyline>
  2335.                         </svg>
  2336.                         <div class=\"pdf-info\">
  2337.                             <h3>MCGT Pre-doctoral Year Courses</h3>
  2338.                             <p>Complete curriculum details, course descriptions, and learning outcomes for the pre-doctoral year program.</p>
  2339.                             <ul class=\"pdf-details\">
  2340.                                 <li><span>Format:</span> PDF Document</li>
  2341.                                 <li><span>Size:</span> 2.4 MB</li>
  2342.                                 <li><span>Pages:</span> 24</li>
  2343.                                 <li><span>Last Updated:</span> March 15, 2025</li>
  2344.                             </ul>
  2345.                         </div>
  2346.                     </div>
  2347.                     <a href=\"https://mcgt.um6p.ma/Predoc.pdf\" class=\"pdf-download-button\" target=\"_blank\" download rel=\"noreferrer\">
  2348.                         <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">
  2349.                             <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"></path>
  2350.                             <polyline points=\"7 10 12 15 17 10\"></polyline>
  2351.                             <line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"></line>
  2352.                         </svg>
  2353.                         Download PDF
  2354.                     </a>
  2355.                 </div>
  2356.             </section>
  2358.     
  2360.            <!-- Degrees Section -->
  2361.             <section class=\"section\">
  2362.                 <div class=\"section-header\">
  2363.                     <h2 class=\"section-title\">Dual Degree Program</h2>
  2364.                     <p class=\"section-subtitle\">Graduate with two degrees that open doors worldwide</p>
  2365.                 </div>
  2367.                 <div class=\"degree-cards\">
  2368.                     <div class=\"degree-card degree-card-primary\">
  2369.                         <div class=\"degree-card-header\">
  2370.                             <div class=\"degree-card-icon\">
  2371.                                 <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"30\" height=\"30\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">
  2372.                                     <path d=\"M22 10v6M2 10l10-5 10 5-10 5z\"></path>
  2373.                                     <path d=\"M6 12v5c3 3 9 3 12 0v-5\"></path>
  2374.                                 </svg>
  2375.                             </div>
  2376.                             <div class=\"degree-card-title-container\">
  2377.                                 <h3 class=\"degree-card-title\">Master of Science from UM6P</h3>
  2378.                                 <p class=\"degree-card-subtitle\">Recognized degree with global opportunities</p>
  2379.                             </div>
  2380.                         </div>
  2381.                         <p class=\"degree-card-content\">This degree grants direct access to the PhD program at the Moroccan Center for Game Theory without the need to validate the predoc year.</p>
  2382.                     </div>
  2384.                     <div class=\"degree-card degree-card-accent\">
  2385.                         <div class=\"degree-card-header\">
  2386.                             <div class=\"degree-card-icon\">
  2387.                                 <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"30\" height=\"30\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">
  2388.                                     <path d=\"M22 10v6M2 10l10-5 10 5-10 5z\"></path>
  2389.                                     <path d=\"M6 12v5c3 3 9 3 12 0v-5\"></path>
  2390.                                 </svg>
  2391.                             </div>
  2392.                             <div class=\"degree-card-title-container\">
  2393.                                 <h3 class=\"degree-card-title\">Master 2 from Dauphine-PSL</h3>
  2394.                                 <p class=\"degree-card-subtitle\">Official French second-cycle degree</p>
  2395.                             </div>
  2396.                         </div>
  2397.                         <p class=\"degree-card-content\">This degree (60 ECTS credits) grants access to PhD programs worldwide and is highly valued by employers internationally.</p>
  2398.                     </div>
  2399.                 </div>
  2400.             </section>
  2402.             <!-- Admission & Requirements Section -->
  2403.             <section class=\"section\">
  2404.                 <div class=\"admission-container\">
  2405.                     <div class=\"section-header\">
  2406.                         <h2 class=\"section-title\">Admission & Requirements</h2>
  2407.                         <p class=\"section-subtitle\">Simple steps to join our prestigious program</p>
  2408.                     </div>
  2410.                     <div class=\"admission-columns\">
  2411.                         <!-- Requirements -->
  2412.                         <div class=\"admission-column\">
  2413.                             <h3 class=\"admission-title\">
  2414.                                 <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">
  2415.                                     <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"></path>
  2416.                                     <polyline points=\"22 4 12 14.01 9 11.01\"></polyline>
  2417.                                 </svg>
  2418.                                 Eligibility Requirements
  2419.                             </h3>
  2420.                             
  2421.                             <div class=\"requirements-container\">
  2422.                                 <div class=\"requirement-item\">
  2423.                                     <div class=\"requirement-number\">1</div>
  2424.                                     <div class=\"requirement-content\">
  2425.                                         <div class=\"requirement-title\">Enrolled in Master 1</div>
  2426.                                         <div class=\"requirement-description\">in Mathematics and Applications or equivalent</div>
  2427.                                     </div>
  2428.                                 </div>
  2429.                                 
  2430.                                 <div class=\"requirement-item\">
  2431.                                     <div class=\"requirement-number\">2</div>
  2432.                                     <div class=\"requirement-content\">
  2433.                                         <div class=\"requirement-title\">Successful completion of Master 1</div>
  2434.                                         <div class=\"requirement-description\">is required upon registration</div>
  2435.                                     </div>
  2436.                                 </div>
  2437.                                 
  2438.                                 <div class=\"requirement-item\">
  2439.                                     <div class=\"requirement-number\">3</div>
  2440.                                     <div class=\"requirement-content\">
  2441.                                         <div class=\"requirement-title\">Minimum B2 English proficiency</div>
  2442.                                         <div class=\"requirement-description\">(TOEFL IBT 92, IELTS 6.5, Cambridge FCE 160)</div>
  2443.                                     </div>
  2444.                                 </div>
  2445.                             </div>
  2446.                         </div>
  2447.                         
  2448.                         <!-- Required Documents -->
  2449.                         <div class=\"admission-column\">
  2450.                             <h3 class=\"admission-title\">
  2451.                                 <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">
  2452.                                     <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"></path>
  2453.                                     <polyline points=\"14 2 14 8 20 8\"></polyline>
  2454.                                     <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"></line>
  2455.                                     <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"></line>
  2456.                                     <polyline points=\"10 9 9 9 8 9\"></polyline>
  2457.                                 </svg>
  2458.                                 Required Documents
  2459.                             </h3>
  2460.                             
  2461.                             <div class=\"documents-grid\">
  2462.                                 <div class=\"document-item\">
  2463.                                     <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">
  2464.                                         <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"></path>
  2465.                                         <polyline points=\"14 2 14 8 20 8\"></polyline>
  2466.                                         <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"></line>
  2467.                                         <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"></line>
  2468.                                         <polyline points=\"10 9 9 9 8 9\"></polyline>
  2469.                                     </svg>
  2470.                                     <div class=\"document-title\">Curriculum vitae</div>
  2471.                                 </div>
  2472.                                 
  2473.                                 <div class=\"document-item\">
  2474.                                     <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">
  2475.                                         <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"></path>
  2476.                                         <polyline points=\"14 2 14 8 20 8\"></polyline>
  2477.                                         <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"></line>
  2478.                                         <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"></line>
  2479.                                         <polyline points=\"10 9 9 9 8 9\"></polyline>
  2480.                                     </svg>
  2481.                                     <div class=\"document-title\">motivation letter</div>
  2482.                                 </div>
  2483.                                 
  2484.                                 <div class=\"document-item\">
  2485.                                     <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">
  2486.                                         <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"></path>
  2487.                                         <polyline points=\"14 2 14 8 20 8\"></polyline>
  2488.                                         <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"></line>
  2489.                                         <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"></line>
  2490.                                         <polyline points=\"10 9 9 9 8 9\"></polyline>
  2491.                                     </svg>
  2492.                                     <div class=\"document-title\">Academic references</div>
  2493.                                 </div>
  2494.                                 
  2495.                                 <div class=\"document-item\">
  2496.                                     <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">
  2497.                                         <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"></path>
  2498.                                         <polyline points=\"14 2 14 8 20 8\"></polyline>
  2499.                                         <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"></line>
  2500.                                         <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"></line>
  2501.                                         <polyline points=\"10 9 9 9 8 9\"></polyline>
  2502.                                     </svg>
  2503.                                     <div class=\"document-title\">Transcripts</div>
  2504.                                 </div>
  2505.                             </div>
  2506.                         </div>
  2507.                     </div>
  2508.                     
  2509.                     <!-- Important Dates -->
  2510.                     <h3 class=\"dates-title\">
  2511.                         <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">
  2512.                             <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>
  2513.                             <polyline points=\"12 6 12 12 16 14\"></polyline>
  2514.                         </svg>
  2515.                         Important Dates
  2516.                     </h3>
  2517.                     
  2518.                     <div class=\"dates-container\">
  2519.                         <div class=\"date-item\">
  2520.                             <div class=\"date-calendar\">
  2521.                                 <div class=\"date-day\">31</div>
  2522.                                 <div class=\"date-month\">May</div>
  2523.                             </div>
  2524.                             <div class=\"date-title\">Application Deadline</div>
  2525.                         </div>
  2526.                         
  2527.                         <div class=\"date-item\">
  2528.                             <div class=\"date-calendar\">
  2529.                                 <div class=\"date-day\">6</div>
  2530.                                 <div class=\"date-month\">June</div>
  2531.                             </div>
  2532.                             <div class=\"date-title\">Interview Selection</div>
  2533.                         </div>
  2534.                         
  2535.                         <div class=\"date-item\">
  2536.                             <div class=\"date-calendar\">
  2537.                                 <div class=\"date-day\">16-20</div>
  2538.                                 <div class=\"date-month\">June</div>
  2539.                             </div>
  2540.                             <div class=\"date-title\">Interviews</div>
  2541.                         </div>
  2542.                         
  2543.                         <div class=\"date-item\">
  2544.                             <div class=\"date-calendar\">
  2545.                                 <div class=\"date-day\">1</div>
  2546.                                 <div class=\"date-month\">Oct</div>
  2547.                             </div>
  2548.                             <div class=\"date-title\">Program Start</div>
  2549.                         </div>
  2550.                     </div>
  2551.                 </div>
  2552.             </section>
  2553.             <!-- Faculty Members Section -->
  2554. <section class=\"section\">
  2555.     <div class=\"faculty-container\">
  2556.         <div class=\"section-header\">
  2557.             <h2 class=\"section-title\">Faculty Members</h2>
  2558.             <p class=\"section-subtitle\">Learn from world-renowned experts in game theory, mathematics, economics, and computer science</p>
  2559.         </div>
  2561.         <div class=\"faculty-carousel-wrapper\">
  2562.             <button class=\"faculty-nav prev\" aria-label=\"Previous faculty\" id=\"prevFacultyBtn\">
  2563.                 <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">
  2564.                     <polyline points=\"15 18 9 12 15 6\"></polyline>
  2565.                 </svg>
  2566.             </button>
  2567.             
  2568.             <div class=\"faculty-carousel-container\">
  2569.                 <div class=\"faculty-carousel\" id=\"facultyCarousel\">
  2570.                     <!-- Faculty Card 1 -->
  2571.                     <div class=\"faculty-card\">
  2572.                         <div class=\"faculty-image-container\">
  2573.                             <img src=\"https://mcgt.um6p.ma/uploads/prof/images/644e62fc056e9fca1c1be54d556a9584fda03251.jpg\" alt=\"Badr Missaoui\" class=\"faculty-image\">
  2574.                         </div>
  2575.                         <div class=\"faculty-info\">
  2576.                             <h3 class=\"faculty-name\">Badr Missaoui</h3>
  2577.                             <p class=\"faculty-affiliation\">Moroccan Center for Game Theory</p>
  2578.                             <p class=\"faculty-field\">Mathematics</p>
  2579.                         </div>
  2580.                     </div>
  2581.                     
  2582.                     <!-- Faculty Card 2 -->
  2583.                     <div class=\"faculty-card\">
  2584.                         <div class=\"faculty-image-container\">
  2585.                             <img src=\"https://mcgt.um6p.ma/uploads/prof/images/dd4f9f668fef03e21d47339dd1029ec83121ba7b.png\" alt=\"Bruno Ziliotto\" class=\"faculty-image\">
  2586.                         </div>
  2587.                         <div class=\"faculty-info\">
  2588.                             <h3 class=\"faculty-name\">Bruno Ziliotto</h3>
  2589.                             <p class=\"faculty-affiliation\">Dauphine-PSL</p>
  2590.                             <p class=\"faculty-field\">Mathematics</p>
  2591.                         </div>
  2592.                     </div>
  2593.                     
  2594.                     <!-- Faculty Card 3 -->
  2595.                     <div class=\"faculty-card\">
  2596.                         <div class=\"faculty-image-container\">
  2597.                             <img src=\"https://mcgt.um6p.ma/uploads/prof/images/774ec6c1e5b35332bb1a6cd704b518b8641f901c.jpg\" alt=\"Edith Elkind\" class=\"faculty-image\">
  2598.                         </div>
  2599.                         <div class=\"faculty-info\">
  2600.                             <h3 class=\"faculty-name\">Edith Elkind</h3>
  2601.                             <p class=\"faculty-affiliation\">University of Northwestern</p>
  2602.                             <p class=\"faculty-field\">Computer Science</p>
  2603.                         </div>
  2604.                     </div>
  2605.                     
  2606.                     <!-- Faculty Card 4 -->
  2607.                     <div class=\"faculty-card\">
  2608.                         <div class=\"faculty-image-container\">
  2609.                             <img src=\"https://mcgt.um6p.ma/uploads/prof/images/71c0d7235d2b059f0c005710cc3bdcad43995fa5.png\" alt=\"Eilon Solan\" class=\"faculty-image\">
  2610.                         </div>
  2611.                         <div class=\"faculty-info\">
  2612.                             <h3 class=\"faculty-name\">Eilon Solan</h3>
  2613.                             <p class=\"faculty-affiliation\">TAU</p>
  2614.                             <p class=\"faculty-field\">Mathematics</p>
  2615.                         </div>
  2616.                     </div>
  2617.                     
  2618.                     <!-- Faculty Card 5 -->
  2619.                     <div class=\"faculty-card\">
  2620.                         <div class=\"faculty-image-container\">
  2621.                             <img src=\"https://mcgt.um6p.ma/uploads/prof/images/d627c0a5aa8dfe8a6b5d64dc9b2465750eb7c49b.png\" alt=\"Frédéric Meunier\" class=\"faculty-image\">
  2622.                         </div>
  2623.                         <div class=\"faculty-info\">
  2624.                             <h3 class=\"faculty-name\">Frédéric Meunier</h3>
  2625.                             <p class=\"faculty-affiliation\">Ponts et Chausées</p>
  2626.                             <p class=\"faculty-field\">Operations Research</p>
  2627.                         </div>
  2628.                     </div>
  2629.                     
  2630.                     <!-- Faculty Card 6 -->
  2631.                     <div class=\"faculty-card\">
  2632.                         <div class=\"faculty-image-container\">
  2633.                             <img src=\"https://mcgt.um6p.ma/uploads/prof/images/40b889dbfa13d864bca86007d2f6229aae8abbfc.png\" alt=\"Guillaume Carlier\" class=\"faculty-image\">
  2634.                         </div>
  2635.                         <div class=\"faculty-info\">
  2636.                             <h3 class=\"faculty-name\">Guillaume Carlier</h3>
  2637.                             <p class=\"faculty-affiliation\">Dauphine-PSL</p>
  2638.                             <p class=\"faculty-field\">Mathematics</p>
  2639.                         </div>
  2640.                     </div>
  2641.                     
  2642.                     <!-- Faculty Card 7 -->
  2643.                     <div class=\"faculty-card\">
  2644.                         <div class=\"faculty-image-container\">
  2645.                             <img src=\"https://mcgt.um6p.ma/uploads/prof/images/4059249b4d39daeb54ec4a5af151842c8e7592ef.png\" alt=\"Jason Hartline\" class=\"faculty-image\">
  2646.                         </div>
  2647.                         <div class=\"faculty-info\">
  2648.                             <h3 class=\"faculty-name\">Jason Hartline</h3>
  2649.                             <p class=\"faculty-affiliation\">Northwestern University</p>
  2650.                             <p class=\"faculty-field\">Computer Science</p>
  2651.                         </div>
  2652.                     </div>
  2653.                     
  2654.                     <!-- Faculty Card 8 -->
  2655.                     <div class=\"faculty-card\">
  2656.                         <div class=\"faculty-image-container\">
  2657.                             <img src=\"https://mcgt.um6p.ma/uploads/prof/images/a19822a30fc463e83bc71d56fca90f5cb1d81b16.png\" alt=\"Jérôme Lang\" class=\"faculty-image\">
  2658.                         </div>
  2659.                         <div class=\"faculty-info\">
  2660.                             <h3 class=\"faculty-name\">Jérôme Lang</h3>
  2661.                             <p class=\"faculty-affiliation\">CNRS / Dauphine-PSL</p>
  2662.                             <p class=\"faculty-field\">Computer Science</p>
  2663.                         </div>
  2664.                     </div>
  2665.                     
  2666.                     <!-- Faculty Card 9 -->
  2667.                     <div class=\"faculty-card\">
  2668.                         <div class=\"faculty-image-container\">
  2669.                             <img src=\"https://mcgt.um6p.ma/uploads/prof/images/26d534a2986086115a43387c04629227b16e2a99.png\" alt=\"Johannes Horner\" class=\"faculty-image\">
  2670.                         </div>
  2671.                         <div class=\"faculty-info\">
  2672.                             <h3 class=\"faculty-name\">Johannes Horner</h3>
  2673.                             <p class=\"faculty-affiliation\">CNRS, Toulouse School of Economics</p>
  2674.                             <p class=\"faculty-field\">Economics</p>
  2675.                         </div>
  2676.                     </div>
  2677.                     
  2678.                     <!-- Faculty Card 10 -->
  2679.                     <div class=\"faculty-card\">
  2680.                         <div class=\"faculty-image-container\">
  2681.                             <img src=\"https://mcgt.um6p.ma/uploads/prof/images/527c0c22ecfa841e80879661cd75a2845155f2bc.jpg\" alt=\"José Correa\" class=\"faculty-image\">
  2682.                         </div>
  2683.                         <div class=\"faculty-info\">
  2684.                             <h3 class=\"faculty-name\">José Correa</h3>
  2685.                             <p class=\"faculty-affiliation\">CMM, Santiago Chile</p>
  2686.                             <p class=\"faculty-field\">Operations Research</p>
  2687.                         </div>
  2688.                     </div>
  2689.                     
  2690.                     <!-- Faculty Card 11 -->
  2691.                     <div class=\"faculty-card\">
  2692.                         <div class=\"faculty-image-container\">
  2693.                             <img src=\"https://mcgt.um6p.ma/uploads/prof/images/ad3e6fcb1bf8ddaf0b8010ed59554951996372c2.png\" alt=\"Nizar Touzi\" class=\"faculty-image\">
  2694.                         </div>
  2695.                         <div class=\"faculty-info\">
  2696.                             <h3 class=\"faculty-name\">Nizar Touzi</h3>
  2697.                             <p class=\"faculty-affiliation\">New York University And ABS (UM6P)</p>
  2698.                             <p class=\"faculty-field\">Mathematics</p>
  2699.                         </div>
  2700.                     </div>
  2701.                     
  2702.                     <!-- Faculty Card 12 -->
  2703.                     <div class=\"faculty-card\">
  2704.                         <div class=\"faculty-image-container\">
  2705.                             <img src=\"https://mcgt.um6p.ma/uploads/prof/images/0b1e672365a8cd8eada6fa8e42fb5e7f0e294029.jpg\" alt=\"Olga Gorelkina\" class=\"faculty-image\">
  2706.                         </div>
  2707.                         <div class=\"faculty-info\">
  2708.                             <h3 class=\"faculty-name\">Olga Gorelkina</h3>
  2709.                             <p class=\"faculty-affiliation\">Africa Business School (ABS), UM6P</p>
  2710.                             <p class=\"faculty-field\">Economics</p>
  2711.                         </div>
  2712.                     </div>
  2713.                     
  2714.                     <!-- Faculty Card 13 -->
  2715.                     <div class=\"faculty-card\">
  2716.                         <div class=\"faculty-image-container\">
  2717.                             <img src=\"https://mcgt.um6p.ma/uploads/prof/images/1582d2142c46451bbff76d5dd7e4f58a89fe4d67.jpg\" alt=\"Omar Saadi\" class=\"faculty-image\">
  2718.                         </div>
  2719.                         <div class=\"faculty-info\">
  2720.                             <h3 class=\"faculty-name\">Omar Saadi</h3>
  2721.                             <p class=\"faculty-affiliation\">College of Computing (UM6P)</p>
  2722.                             <p class=\"faculty-field\">Operations Research</p>
  2723.                         </div>
  2724.                     </div>
  2725.                     
  2726.                     <!-- Faculty Card 14 -->
  2727.                     <div class=\"faculty-card\">
  2728.                         <div class=\"faculty-image-container\">
  2729.                             <img src=\"https://mcgt.um6p.ma/uploads/prof/images/6e0a3625839a95da93e89a05e2a747a555b0db9f.jpg\" alt=\"Panayotis Mertikopoulos\" class=\"faculty-image\">
  2730.                         </div>
  2731.                         <div class=\"faculty-info\">
  2732.                             <h3 class=\"faculty-name\">Panayotis Mertikopoulos</h3>
  2733.                             <p class=\"faculty-affiliation\">CNRS, Grenoble</p>
  2734.                             <p class=\"faculty-field\">Computer Science</p>
  2735.                         </div>
  2736.                     </div>
  2737.                     
  2738.                     <!-- Faculty Card 15 -->
  2739.                     <div class=\"faculty-card\">
  2740.                         <div class=\"faculty-image-container\">
  2741.                             <img src=\"https://mcgt.um6p.ma/uploads/prof/images/8bfa1e4bcfe2bc513e37b7ec512654b4994bc06f.jpg\" alt=\"Rida Laraki\" class=\"faculty-image\">
  2742.                         </div>
  2743.                         <div class=\"faculty-info\">
  2744.                             <h3 class=\"faculty-name\">Rida Laraki</h3>
  2745.                             <p class=\"faculty-affiliation\">Director</p>
  2746.                             <p class=\"faculty-field\">Mathematics</p>
  2747.                         </div>
  2748.                     </div>
  2749.                     
  2750.                     <!-- Faculty Card 16 -->
  2751.                     <div class=\"faculty-card\">
  2752.                         <div class=\"faculty-image-container\">
  2753.                             <img src=\"https://mcgt.um6p.ma/uploads/prof/images/86ab55145260511be27f0f2e3e1b1784754be916.png\" alt=\"Sylvain Sorin\" class=\"faculty-image\">
  2754.                         </div>
  2755.                         <div class=\"faculty-info\">
  2756.                             <h3 class=\"faculty-name\">Sylvain Sorin</h3>
  2757.                             <p class=\"faculty-affiliation\">Sorbonne University</p>
  2758.                             <p class=\"faculty-field\">Mathematics</p>
  2759.                         </div>
  2760.                     </div>
  2761.                     
  2762.                     <!-- Faculty Card 17 -->
  2763.                     <div class=\"faculty-card\">
  2764.                         <div class=\"faculty-image-container\">
  2765.                             <img src=\"https://mcgt.um6p.ma/uploads/prof/images/d549fc9449bf3e6237a092cd7e8043b3e4a39c96.png\" alt=\"Tristan Tomala\" class=\"faculty-image\">
  2766.                         </div>
  2767.                         <div class=\"faculty-info\">
  2768.                             <h3 class=\"faculty-name\">Tristan Tomala</h3>
  2769.                             <p class=\"faculty-affiliation\">HEC Paris</p>
  2770.                             <p class=\"faculty-field\">Economics</p>
  2771.                         </div>
  2772.                     </div>
  2773.                     
  2774.                     <!-- Faculty Card 18 -->
  2775.                     <div class=\"faculty-card\">
  2776.                         <div class=\"faculty-image-container\">
  2777.                             <img src=\"https://mcgt.um6p.ma/uploads/prof/images/31a18339ee35677caf1b833e39beb6119b4fad36.jpg\" alt=\"Yann Chevaleyre\" class=\"faculty-image\">
  2778.                         </div>
  2779.                         <div class=\"faculty-info\">
  2780.                             <h3 class=\"faculty-name\">Yann Chevaleyre</h3>
  2781.                             <p class=\"faculty-affiliation\">Dauphine-PSL</p>
  2782.                             <p class=\"faculty-field\">Computer Science</p>
  2783.                         </div>
  2784.                     </div>
  2785.                 </div>
  2786.             </div>
  2787.             
  2788.             <button class=\"faculty-nav next\" aria-label=\"Next faculty\" id=\"nextFacultyBtn\">
  2789.                 <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">
  2790.                     <polyline points=\"9 18 15 12 9 6\"></polyline>
  2791.                 </svg>
  2792.             </button>
  2793.         </div>
  2794.         
  2795.         <div class=\"faculty-dots\" id=\"facultyDots\">
  2796.             <!-- Dots will be generated by JavaScript -->
  2797.         </div>
  2798.     </div>
  2799. </section>
  2801. <style>
  2802.     /* Faculty Carousel Styles */
  2803.     .faculty-container {
  2804.         max-width: 1200px;
  2805.         margin: 0 auto;
  2806.         padding: 0 1.5rem;
  2807.     }
  2808.     
  2809.     .faculty-carousel-wrapper {
  2810.         position: relative;
  2811.         display: flex;
  2812.         align-items: center;
  2813.         margin: 0 auto;
  2814.     }
  2815.     
  2816.     .faculty-carousel-container {
  2817.         width: 100%;
  2818.         overflow: hidden;
  2819.     }
  2820.     
  2821.     .faculty-carousel {
  2822.         display: flex;
  2823.         width: 100%;
  2824.         position: relative;
  2825.         transition: transform 0.5s ease;
  2826.     }
  2827.     
  2828.     .faculty-card {
  2829.         flex: 0 0 auto;
  2830.         padding: 0 0.75rem;
  2831.         transition: all 0.3s ease;
  2832.         box-sizing: border-box; /* Ensure padding is included in width calculation */
  2833.     }
  2834.     
  2835.     .faculty-image-container {
  2836.         position: relative;
  2837.         overflow: hidden;
  2838.         border-radius: 0.5rem 0.5rem 0 0;
  2839.         aspect-ratio: 1/1; /* Fixed aspect ratio for all images */
  2840.         width: 100%;
  2841.         height: 0;
  2842.         padding-bottom: 100%; /* Creates a square container */
  2843.     }
  2844.     
  2845.     .faculty-image {
  2846.         position: absolute;
  2847.         top: 0;
  2848.         left: 0;
  2849.         width: 100%;
  2850.         height: 100%;
  2851.         object-fit: cover; /* Ensures image covers the container without distortion */
  2852.         transition: transform 0.5s ease;
  2853.     }
  2854.     
  2855.     .faculty-card:hover .faculty-image {
  2856.         transform: scale(1.05);
  2857.     }
  2858.     
  2859.     .faculty-info {
  2860.         padding: 1.25rem;
  2861.         background-color: white;
  2862.         border-radius: 0 0 0.5rem 0.5rem;
  2863.         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  2864.         border: 1px solid #e2e8f0;
  2865.         border-top: none;
  2866.         height: 130px; /* Fixed height for info section */
  2867.         display: flex;
  2868.         flex-direction: column;
  2869.     }
  2870.     
  2871.     .faculty-name {
  2872.         font-size: 1.25rem;
  2873.         font-weight: 600;
  2874.         margin-bottom: 0.5rem;
  2875.         color: var(--primary-blue);
  2876.     }
  2877.     
  2878.     .faculty-affiliation {
  2879.         font-size: 0.875rem;
  2880.         color: var(--text-light);
  2881.         margin-bottom: 0.25rem;
  2882.         line-height: 1.4;
  2883.         /* Limit to 2 lines with ellipsis */
  2884.         display: -webkit-box;
  2885.         -webkit-line-clamp: 2;
  2886.         -webkit-box-orient: vertical;
  2887.         overflow: hidden;
  2888.         text-overflow: ellipsis;
  2889.     }
  2890.     
  2891.     .faculty-field {
  2892.         font-size: 0.875rem;
  2893.         color: var(--accent-orange);
  2894.         font-weight: 500;
  2895.         margin-top: auto; /* Push to bottom of container */
  2896.     }
  2897.     
  2898.     .faculty-nav {
  2899.         position: absolute;
  2900.         z-index: 10;
  2901.         width: 3rem;
  2902.         height: 3rem;
  2903.         display: flex;
  2904.         align-items: center;
  2905.         justify-content: center;
  2906.         background-color: white;
  2907.         border-radius: 50%;
  2908.         border: 1px solid #e2e8f0;
  2909.         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  2910.         cursor: pointer;
  2911.         transition: all 0.2s ease;
  2912.     }
  2913.     
  2914.     .faculty-nav:hover {
  2915.         background-color: var(--primary-blue);
  2916.         transform: translateY(-2px);
  2917.         box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1);
  2918.     }
  2919.     
  2920.     .faculty-nav:hover svg {
  2921.         color: white;
  2922.     }
  2923.     
  2924.     .faculty-nav:disabled {
  2925.         opacity: 0.5;
  2926.         cursor: not-allowed;
  2927.         transform: none;
  2928.         box-shadow: none;
  2929.     }
  2930.     
  2931.     .faculty-nav.prev {
  2932.         left: -1.5rem;
  2933.     }
  2934.     
  2935.     .faculty-nav.next {
  2936.         right: -1.5rem;
  2937.     }
  2938.     
  2939.     .faculty-nav svg {
  2940.         width: 1.5rem;
  2941.         height: 1.5rem;
  2942.         color: var(--primary-blue);
  2943.     }
  2944.     
  2945.     .faculty-dots {
  2946.         display: flex;
  2947.         justify-content: center;
  2948.         margin-top: 2rem;
  2949.         gap: 0.5rem;
  2950.     }
  2951.     
  2952.     .faculty-dot {
  2953.         width: 0.5rem;
  2954.         height: 0.5rem;
  2955.         border-radius: 50%;
  2956.         background-color: #cbd5e0;
  2957.         border: none;
  2958.         padding: 0;
  2959.         cursor: pointer;
  2960.         transition: all 0.2s ease;
  2961.     }
  2962.     
  2963.     .faculty-dot:hover {
  2964.         background-color: var(--primary-blue-light);
  2965.     }
  2966.     
  2967.     .faculty-dot.active {
  2968.         background-color: var(--primary-blue);
  2969.         transform: scale(1.2);
  2970.     }
  2971.     
  2972.     /* Responsive adjustments */
  2973.     @media (min-width: 640px) {
  2974.         .faculty-card {
  2975.             width: 50%;
  2976.         }
  2977.         
  2978.         .faculty-nav.prev {
  2979.             left: -1rem;
  2980.         }
  2981.         
  2982.         .faculty-nav.next {
  2983.             right: -1rem;
  2984.         }
  2985.     }
  2986.     
  2987.     @media (min-width: 768px) {
  2988.         .faculty-card {
  2989.             width: 33.333%;
  2990.         }
  2991.     }
  2992.     
  2993.     @media (min-width: 1024px) {
  2994.         .faculty-card {
  2995.             width: 25%;
  2996.         }
  2997.         
  2998.         .faculty-nav.prev {
  2999.             left: -1.5rem;
  3000.         }
  3001.         
  3002.         .faculty-nav.next {
  3003.             right: -1.5rem;
  3004.         }
  3005.     }
  3006.     
  3007.     @media (max-width: 639px) {
  3008.         .faculty-nav {
  3009.             width: 2.5rem;
  3010.             height: 2.5rem;
  3011.         }
  3012.         
  3013.         .faculty-nav.prev {
  3014.             left: -0.75rem;
  3015.         }
  3016.         
  3017.         .faculty-nav.next {
  3018.             right: -0.75rem;
  3019.         }
  3020.         
  3021.         .faculty-info {
  3022.             height: auto;
  3023.             min-height: 130px;
  3024.         }
  3025.     }
  3026. </style>
  3028. <script>
  3029.     document.addEventListener('DOMContentLoaded', function() {
  3030.         // Faculty Carousel
  3031.         const facultyCarousel = document.getElementById('facultyCarousel');
  3032.         const prevFacultyBtn = document.getElementById('prevFacultyBtn');
  3033.         const nextFacultyBtn = document.getElementById('nextFacultyBtn');
  3034.         const facultyDotsContainer = document.getElementById('facultyDots');
  3035.         
  3036.         // Get all faculty cards
  3037.         const facultyCards = facultyCarousel.querySelectorAll('.faculty-card');
  3038.         const totalFacultyCards = facultyCards.length;
  3039.         
  3040.         // Responsive settings
  3041.         let cardsToShow = 4;
  3042.         let currentFacultyIndex = 0;
  3043.         
  3044.         // Set initial card widths
  3045.         function setFacultyCardWidths() {
  3046.             facultyCards.forEach(card => {
  3047.                 card.style.width = `\${100 / cardsToShow}%`;
  3048.             });
  3049.         }
  3050.         
  3051.         // Update cards to show based on screen width
  3052.         function updateFacultyCardsToShow() {
  3053.             const oldCardsToShow = cardsToShow;
  3054.             
  3055.             if (window.innerWidth < 640) {
  3056.                 cardsToShow = 1;
  3057.             } else if (window.innerWidth < 768) {
  3058.                 cardsToShow = 2;
  3059.             } else if (window.innerWidth < 1024) {
  3060.                 cardsToShow = 3;
  3061.             } else {
  3062.                 cardsToShow = 4;
  3063.             }
  3064.             
  3065.             // Only update if the number of cards to show has changed
  3066.             if (oldCardsToShow !== cardsToShow) {
  3067.                 setFacultyCardWidths();
  3068.                 
  3069.                 // Adjust current index to maintain position
  3070.                 if (currentFacultyIndex > 0) {
  3071.                     currentFacultyIndex = Math.min(currentFacultyIndex, totalFacultyCards - cardsToShow);
  3072.                 }
  3073.                 
  3074.                 updateFacultyCarouselPosition();
  3075.                 createFacultyDots();
  3076.                 updateFacultyButtonStates();
  3077.             }
  3078.         }
  3079.         
  3080.         // Create navigation dots
  3081.         function createFacultyDots() {
  3082.             facultyDotsContainer.innerHTML = '';
  3083.             const totalSlides = Math.ceil(totalFacultyCards / cardsToShow);
  3084.             
  3085.             for (let i = 0; i < totalSlides; i++) {
  3086.                 const dot = document.createElement('button');
  3087.                 dot.classList.add('faculty-dot');
  3088.                 if (Math.floor(currentFacultyIndex / cardsToShow) === i) {
  3089.                     dot.classList.add('active');
  3090.                 }
  3091.                 dot.setAttribute('aria-label', `Go to faculty slide \${i + 1}`);
  3092.                 dot.addEventListener('click', () => goToFacultySlide(i * cardsToShow));
  3093.                 facultyDotsContainer.appendChild(dot);
  3094.             }
  3095.         }
  3096.         
  3097.         // Update active dot
  3098.         function updateFacultyDots() {
  3099.             const dots = facultyDotsContainer.querySelectorAll('.faculty-dot');
  3100.             const activeIndex = Math.floor(currentFacultyIndex / cardsToShow);
  3101.             
  3102.             dots.forEach((dot, index) => {
  3103.                 if (index === activeIndex) {
  3104.                     dot.classList.add('active');
  3105.                 } else {
  3106.                     dot.classList.remove('active');
  3107.                 }
  3108.             });
  3109.         }
  3110.         
  3111.         // Update carousel position
  3112.         function updateFacultyCarouselPosition() {
  3113.             const cardWidth = 100 / cardsToShow;
  3114.             facultyCarousel.style.transform = `translateX(-\${currentFacultyIndex * cardWidth}%)`;
  3115.             updateFacultyDots();
  3116.         }
  3117.         
  3118.         // Go to specific slide
  3119.         function goToFacultySlide(index) {
  3120.             const maxIndex = totalFacultyCards - cardsToShow;
  3121.             currentFacultyIndex = Math.min(index, maxIndex);
  3122.             currentFacultyIndex = Math.max(currentFacultyIndex, 0);
  3123.             updateFacultyCarouselPosition();
  3124.             updateFacultyButtonStates();
  3125.         }
  3126.         
  3127.         // Go to previous slide
  3128.         function goToPreviousFaculty() {
  3129.             goToFacultySlide(currentFacultyIndex - cardsToShow);
  3130.         }
  3131.         
  3132.         // Go to next slide
  3133.         function goToNextFaculty() {
  3134.             goToFacultySlide(currentFacultyIndex + cardsToShow);
  3135.         }
  3136.         
  3137.         // Update button states (enabled/disabled)
  3138.         function updateFacultyButtonStates() {
  3139.             const maxIndex = totalFacultyCards - cardsToShow;
  3140.             
  3141.             if (currentFacultyIndex <= 0) {
  3142.                 prevFacultyBtn.setAttribute('disabled', 'true');
  3143.                 prevFacultyBtn.style.opacity = '0.5';
  3144.                 prevFacultyBtn.style.cursor = 'not-allowed';
  3145.             } else {
  3146.                 prevFacultyBtn.removeAttribute('disabled');
  3147.                 prevFacultyBtn.style.opacity = '1';
  3148.                 prevFacultyBtn.style.cursor = 'pointer';
  3149.             }
  3150.             
  3151.             if (currentFacultyIndex >= maxIndex) {
  3152.                 nextFacultyBtn.setAttribute('disabled', 'true');
  3153.                 nextFacultyBtn.style.opacity = '0.5';
  3154.                 nextFacultyBtn.style.cursor = 'not-allowed';
  3155.             } else {
  3156.                 nextFacultyBtn.removeAttribute('disabled');
  3157.                 nextFacultyBtn.style.opacity = '1';
  3158.                 nextFacultyBtn.style.cursor = 'pointer';
  3159.             }
  3160.         }
  3161.         
  3162.         // Event listeners
  3163.         prevFacultyBtn.addEventListener('click', goToPreviousFaculty);
  3164.         nextFacultyBtn.addEventListener('click', goToNextFaculty);
  3165.         window.addEventListener('resize', updateFacultyCardsToShow);
  3166.         
  3167.         // Initialize carousel
  3168.         setFacultyCardWidths();
  3169.         createFacultyDots();
  3170.         updateFacultyButtonStates();
  3171.         
  3172.         // Auto-play functionality
  3173.         let facultyAutoplayInterval;
  3174.         const autoplayDelay = 5000; // 5 seconds
  3175.         
  3176.         function startFacultyAutoplay() {
  3177.             stopFacultyAutoplay(); // Clear any existing interval
  3178.             facultyAutoplayInterval = setInterval(() => {
  3179.                 const maxIndex = totalFacultyCards - cardsToShow;
  3180.                 if (currentFacultyIndex >= maxIndex) {
  3181.                     goToFacultySlide(0); // Loop back to the beginning
  3182.                 } else {
  3183.                     goToNextFaculty();
  3184.                 }
  3185.             }, autoplayDelay);
  3186.         }
  3187.         
  3188.         function stopFacultyAutoplay() {
  3189.             if (facultyAutoplayInterval) {
  3190.                 clearInterval(facultyAutoplayInterval);
  3191.             }
  3192.         }
  3193.         
  3194.         // Start autoplay
  3195.         startFacultyAutoplay();
  3196.         
  3197.         // Pause autoplay on hover or focus
  3198.         facultyCarousel.addEventListener('mouseenter', stopFacultyAutoplay);
  3199.         facultyCarousel.addEventListener('mouseleave', startFacultyAutoplay);
  3200.         facultyCarousel.addEventListener('focusin', stopFacultyAutoplay);
  3201.         facultyCarousel.addEventListener('focusout', startFacultyAutoplay);
  3202.         
  3203.         // Touch swipe support
  3204.         let touchStartX = 0;
  3205.         let touchEndX = 0;
  3206.         
  3207.         facultyCarousel.addEventListener('touchstart', e => {
  3208.             touchStartX = e.changedTouches[0].screenX;
  3209.             stopFacultyAutoplay();
  3210.         }, { passive: true });
  3211.         
  3212.         facultyCarousel.addEventListener('touchend', e => {
  3213.             touchEndX = e.changedTouches[0].screenX;
  3214.             handleFacultySwipe();
  3215.             startFacultyAutoplay();
  3216.         }, { passive: true });
  3217.         
  3218.         function handleFacultySwipe() {
  3219.             const swipeThreshold = 50;
  3220.             if (touchEndX < touchStartX - swipeThreshold) {
  3221.                 // Swipe left, go next
  3222.                 goToNextFaculty();
  3223.             } else if (touchEndX > touchStartX + swipeThreshold) {
  3224.                 // Swipe right, go previous
  3225.                 goToPreviousFaculty();
  3226.             }
  3227.         }
  3228.     });
  3229. </script>
  3230.             <!-- Call to Action Section -->
  3231.             <section id=\"apply\" class=\"cta-section\">
  3232.                 <div class=\"cta-circle cta-circle-1\"></div>
  3233.                 <div class=\"cta-circle cta-circle-2\"></div>
  3234.                 <div class=\"cta-circle cta-circle-3\"></div>
  3235.                 
  3236.                 <div class=\"cta-container\">
  3237.                     <div class=\"cta-content\">
  3238.                         <h2 class=\"cta-title\">APPLY <span>NOW</span></h2>
  3239.                         <p class=\"cta-text\">Join our prestigious Master 2 program and learn from world-renowned experts in game theory, mathematics, economics, and computer science.</p>
  3240.                         <a href=\"https://forms.gle/eDCE96KyhiNyk2Nw8\"  target=\"_blank\"  class=\"cta-button\">Start Your Application <span>→</span></a>
  3241.                     </div>
  3242.                     
  3243.                     <div class=\"cta-contact\">
  3244.                         <div class=\"contact-content\">
  3245.                             <div class=\"contact-icon\">
  3246.                                 <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">
  3247.                                     <path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"></path>
  3248.                                     <polyline points=\"22,6 12,13 2,6\"></polyline>
  3249.                                 </svg>
  3250.                             </div>
  3251.                             <h3 class=\"contact-title\">Have Questions?</h3>
  3252.                             <p class=\"contact-text\">Contact our admissions team for more information about the program.</p>
  3253.                             <a href=\"mailto:[email protected]\" class=\"contact-button\">Contact Us <span>→</span></a>
  3254.                         </div>
  3255.                     </div>
  3256.                 </div>
  3257.             </section>
  3258.         </div>
  3259.     ";
  3260.         
  3261.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  3263.         
  3264.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  3266.         return; yield '';
  3267.     }
  3269.     // line 3002
  3270.     public function block_footer($context, array $blocks = [])
  3271.     {
  3272.         $macros = $this->macros;
  3273.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  3274.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "footer"));
  3276.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  3277.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "footer"));
  3279.         // line 3003
  3280.         yield "        ";
  3281.         yield $this->env->getRuntime('Symfony\Bridge\Twig\Extension\HttpKernelRuntime')->renderFragment($this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("_footer"));
  3282.         yield "
  3283.     ";
  3284.         
  3285.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  3287.         
  3288.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  3290.         return; yield '';
  3291.     }
  3293.     /**
  3294.      * @codeCoverageIgnore
  3295.      */
  3296.     public function getTemplateName()
  3297.     {
  3298.         return "Frontend/new_page.html.twig";
  3299.     }
  3301.     /**
  3302.      * @codeCoverageIgnore
  3303.      */
  3304.     public function isTraitable()
  3305.     {
  3306.         return false;
  3307.     }
  3309.     /**
  3310.      * @codeCoverageIgnore
  3311.      */
  3312.     public function getDebugInfo()
  3313.     {
  3314.         return array (  3280 => 3003,  3270 => 3002,  2085 => 1826,  2075 => 1825,  2056 => 1823,  2042 => 1820,  2032 => 1819,  2021 => 30,  2018 => 29,  2008 => 28,  1997 => 26,  1994 => 25,  1984 => 24,  1973 => 22,  1970 => 21,  1960 => 20,  1904 => 3006,  1901 => 3005,  1899 => 3002,  1896 => 3001,  1894 => 1825,  1891 => 1824,  1889 => 1823,  1886 => 1822,  1884 => 1819,  94 => 31,  92 => 28,  89 => 27,  87 => 24,  84 => 23,  82 => 20,  74 => 15,  67 => 11,  56 => 3,  53 => 2,  51 => 1,);
  3315.     }
  3317.     public function getSourceContext()
  3318.     {
  3319.         return new Source("{% set selected_lang = app.request.getLocale() %}
  3320. <!DOCTYPE html>  
  3321. <html lang=\"{{selected_lang}}\" dir=\"ltr\"> 
  3322. <head>
  3323.     <meta charset=\"UTF-8\">
  3324.     <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">
  3325.     <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
  3326.     <meta name=\"theme-color\" content=\"#263371\">
  3327.     <meta name=\"msapplication-navbutton-color\" content=\"#263371\">
  3328.     <meta name=\"apple-mobile-web-app-status-bar-style\" content=\"#263371\"> 
  3329.     <meta name=\"language\" content=\"{{selected_lang}}\"/>
  3330.     <meta name=\"robots\" content=\"index, follow, all\"/>
  3331.     <meta name=\"googlebot\" content=\"index, follow\"/>
  3332.     <meta name=\"copyright\" content=\"elevenmedia\"/> 
  3333.     <link rel=\"shortcut icon\" href=\"{{ asset('favicon.ico') }}\" type=\"image/x-icon\">
  3334.     <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">
  3335.     <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>
  3336.     <link href=\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">
  3338.     {% block seoheader %}
  3339.         {% include 'Frontend/Render/head/_seoheader.html.twig' %}
  3340.     {% endblock %}
  3342.     {% block stylesheets %}
  3343.         {% include 'Frontend/Render/head/_stylesheets.html.twig'%}
  3344.     {% endblock %}
  3346.     {% block javascripts %}
  3347.         {% include 'Frontend/Render/head/_javascripts.html.twig'%}
  3348.     {% endblock %}
  3350.     <style>
  3351.         :root {
  3352.             --primary-blue: #263371;
  3353.             --primary-blue-light: #3a4a8c;
  3354.             --primary-blue-dark: #1a2550;
  3355.             --accent-orange: #d84c2b;
  3356.             --accent-orange-light: #e66a4d;
  3357.             --accent-orange-dark: #b83e20;
  3358.             --text-dark: #1e293b;
  3359.             --text-light: #64748b;
  3360.             --background: #f9f9f9;
  3361.             --white: #ffffff;
  3362.             --card-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  3363.             --transition: all 0.3s ease;
  3364.             --font-size-base: 1rem;
  3365.             --font-size-sm: 0.875rem;
  3366.             --font-size-lg: 1.125rem;
  3367.             --font-size-xl: 1.25rem;
  3368.             --font-size-2xl: 1.5rem;
  3369.             --font-size-3xl: 1.875rem;
  3370.             --font-size-4xl: 2.25rem;
  3371.             --gradient-primary: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
  3372.             --gradient-accent: linear-gradient(135deg, var(--accent-orange) 0%, var(--accent-orange-dark) 100%);
  3373.         }
  3375.         body {
  3376.             font-family: 'Poppins', sans-serif;
  3377.             color: var(--text-dark);
  3378.             line-height: 1.6;
  3379.             background-color: var(--background);
  3380.             margin: 0;
  3381.             padding: 0;
  3382.             font-size: var(--font-size-base);
  3383.         }
  3385.         .page-container {
  3386.             max-width: 1200px;
  3387.             margin: 0 auto;
  3388.             margin-top: 90px;
  3389.             padding: 0 20px;
  3390.         }
  3392.         /* Introduction Section */
  3393.         .introduction-section {
  3394.             background-color: var(--white);
  3395.             border-radius: 20px;
  3396.             padding: 40px;
  3397.             margin-bottom: 50px;
  3398.             box-shadow: var(--card-shadow);
  3399.             position: relative;
  3400.             overflow: hidden;
  3401.         }
  3403.         .introduction-section::before {
  3404.             content: '';
  3405.             position: absolute;
  3406.             top: 0;
  3407.             left: 0;
  3408.             width: 100%;
  3409.             height: 100%;
  3410.             background: radial-gradient(circle at top right, rgba(216, 76, 43, 0.03), transparent 70%);
  3411.             z-index: 0;
  3412.         }
  3414.         .introduction-title {
  3415.             color: var(--primary-blue);
  3416.             font-size: var(--font-size-2xl);
  3417.             font-weight: 700;
  3418.             margin-bottom: 25px;
  3419.             position: relative;
  3420.             display: inline-block;
  3421.         }
  3423.         .introduction-title::after {
  3424.             content: '';
  3425.             position: absolute;
  3426.             bottom: -8px;
  3427.             left: 0;
  3428.             width: 60px;
  3429.             height: 3px;
  3430.             background: var(--gradient-accent);
  3431.             border-radius: 2px;
  3432.         }
  3434.         .introduction-content {
  3435.             position: relative;
  3436.             z-index: 1;
  3437.         }
  3439.         .introduction-text {
  3440.             color: var(--text-dark);
  3441.             margin-bottom: 20px;
  3442.             line-height: 1.8;
  3443.             font-size: var(--font-size-base);
  3444.         }
  3446.         .skills-list {
  3447.             margin: 25px 0;
  3448.             padding-left: 0;
  3449.             list-style-type: none;
  3450.         }
  3452.         .skills-list li {
  3453.             position: relative;
  3454.             padding-left: 30px;
  3455.             margin-bottom: 15px;
  3456.             line-height: 1.6;
  3457.         }
  3459.         .skills-list li::before {
  3460.             content: '';
  3461.             position: absolute;
  3462.             left: 0;
  3463.             top: 8px;
  3464.             width: 8px;
  3465.             height: 8px;
  3466.             border-radius: 50%;
  3467.             background-color: var(--accent-orange);
  3468.         }
  3470.         .financial-info {
  3471.             background-color: rgba(38, 51, 113, 0.05);
  3472.             padding: 20px;
  3473.             border-radius: 10px;
  3474.             margin-top: 25px;
  3475.         }
  3477.         .financial-info p {
  3478.             margin: 10px 0;
  3479.         }
  3481.         /* Logo Header Section - IMPROVED */
  3482.         .logo-header {
  3483.             position: relative;
  3484.             display: flex;
  3485.             align-items: center;
  3486.             justify-content: center;
  3487.             padding: 35px 0;
  3488.             background: var(--gradient-primary);
  3489.             border-bottom: 1px solid rgba(255,255,255,0.1);
  3490.             box-shadow: 0 4px 15px rgba(0,0,0,0.15);
  3491.             z-index: 10;
  3492.             overflow: hidden;
  3493.         }
  3495.         .logo-header::before {
  3496.             content: '';
  3497.             position: absolute;
  3498.             top: -50%;
  3499.             left: -50%;
  3500.             width: 200%;
  3501.             height: 200%;
  3502.             background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
  3503.             animation: pulse-bg 15s infinite alternate;
  3504.         }
  3506.         @keyframes pulse-bg {
  3507.             0% { transform: scale(1); opacity: 0.5; }
  3508.             100% { transform: scale(1.2); opacity: 0.8; }
  3509.         }
  3511.         .logo-container {
  3512.             display: flex;
  3513.             align-items: center;
  3514.             gap: 30px;
  3515.             position: relative;
  3516.             z-index: 2;
  3517.         }
  3519.         .main-logo {
  3520.             width: 250px;
  3521.             height: auto;
  3522.             transition: var(--transition);
  3523.             filter: brightness(0) invert(1);
  3524.             animation: logoGlow 3s infinite alternate;
  3525.         }
  3527.         @keyframes logoGlow {
  3528.             from {
  3529.                 filter: brightness(0) invert(1);
  3530.             }
  3531.             to {
  3532.                 filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(255, 255, 255, 0.7));
  3533.             }
  3534.         }
  3536.         .logo-divider {
  3537.             height: 60px;
  3538.             width: 2px;
  3539.             background-color: rgba(255,255,255,0.3);
  3540.         }
  3542.         .program-title {
  3543.             font-size: var(--font-size-2xl);
  3544.             font-weight: 700;
  3545.             color: var(--white);
  3546.             margin: 0;
  3547.             text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  3548.         }
  3550.         .program-subtitle {
  3551.             font-size: var(--font-size-base);
  3552.             color: rgba(255, 255, 255, 0.9);
  3553.             margin: 0;
  3554.             text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  3555.         }
  3557.         /* Hero Gallery Section - IMPROVED */
  3558.         .hero-gallery {
  3559.             position: relative;
  3560.             overflow: hidden;
  3561.             border-radius: 20px;
  3562.             box-shadow: 0 15px 30px rgba(0,0,0,0.15);
  3563.             margin-bottom: 50px;
  3564.         }
  3566.         .main-image-container {
  3567.             height: 500px;
  3568.             overflow: hidden;
  3569.             position: relative;
  3570.         }
  3572.         .main-image {
  3573.             width: 100%;
  3574.             height: 100%;
  3575.             object-fit: cover;
  3576.             transition: transform 0.7s ease;
  3577.         }
  3579.         .image-overlay {
  3580.             position: absolute;
  3581.             top: 0;
  3582.             left: 0;
  3583.             right: 0;
  3584.             background: linear-gradient(to bottom, rgba(38, 51, 113, 0.85), rgba(38, 51, 113, 0.5), transparent);
  3585.             padding: 40px;
  3586.             width: 100%;
  3587.             color: var(--white);
  3588.             height: 100%;
  3589.             display: flex;
  3590.             flex-direction: column;
  3591.             justify-content: flex-start;
  3592.             box-sizing: border-box;
  3593.         }
  3595.         .overlay-title {
  3596.             margin: 0 0 15px 0;
  3597.             font-size: var(--font-size-4xl);
  3598.             font-weight: 800;
  3599.             text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  3600.             animation: fadeInUp 0.8s ease;
  3601.             position: relative;
  3602.             display: inline-block;
  3603.         }
  3605.         .overlay-title::after {
  3606.             content: '';
  3607.             position: absolute;
  3608.             bottom: -5px;
  3609.             left: 0;
  3610.             width: 80px;
  3611.             height: 3px;
  3612.             background-color: var(--accent-orange);
  3613.             border-radius: 3px;
  3614.         }
  3616.         .overlay-subtitle {
  3617.             margin: 0;
  3618.             font-size: var(--font-size-xl);
  3619.             max-width: 600px;
  3620.             text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  3621.             animation: fadeInUp 1s ease;
  3622.             font-weight: 300;
  3623.         }
  3625.         .overlay-cta {
  3626.             margin-top: 30px;
  3627.             display: inline-block;
  3628.             background: var(--gradient-accent);
  3629.             color: var(--white);
  3630.             font-size: var(--font-size-lg);
  3631.             font-weight: 600;
  3632.             padding: 14px 35px;
  3633.             border-radius: 50px;
  3634.             text-decoration: none;
  3635.             transition: var(--transition);
  3636.             box-shadow: 0 4px 15px rgba(216, 76, 43, 0.4);
  3637.             align-self: flex-start;
  3638.             animation: fadeInUp 1.2s ease;
  3639.             position: relative;
  3640.             overflow: hidden;
  3641.             z-index: 1;
  3642.         }
  3644.         .overlay-cta::before {
  3645.             content: '';
  3646.             position: absolute;
  3647.             top: 0;
  3648.             left: -100%;
  3649.             width: 100%;
  3650.             height: 100%;
  3651.             background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  3652.             transition: 0.5s;
  3653.             z-index: -1;
  3654.         }
  3656.         .overlay-cta:hover::before {
  3657.             left: 100%;
  3658.         }
  3660.         .overlay-cta:hover {
  3661.             transform: translateY(-3px) scale(1.05);
  3662.             box-shadow: 0 8px 25px rgba(216, 76, 43, 0.5);
  3663.             color: var(--white);
  3664.         }
  3666.         @keyframes fadeInUp {
  3667.             from {
  3668.                 opacity: 0;
  3669.                 transform: translateY(20px);
  3670.             }
  3671.             to {
  3672.                 opacity: 1;
  3673.                 transform: translateY(0);
  3674.             }
  3675.         }
  3677.         .thumbnail-gallery {
  3678.             display: flex;
  3679.             overflow-x: auto;
  3680.             padding: 20px;
  3681.             background-color: var(--white);
  3682.             gap: 15px;
  3683.             scrollbar-width: thin;
  3684.             scrollbar-color: var(--accent-orange) var(--background);
  3685.             border-radius: 0 0 20px 20px;
  3686.         }
  3688.         .thumbnail-gallery::-webkit-scrollbar {
  3689.             height: 6px;
  3690.         }
  3692.         .thumbnail-gallery::-webkit-scrollbar-track {
  3693.             background: var(--background);
  3694.             border-radius: 3px;
  3695.         }
  3697.         .thumbnail-gallery::-webkit-scrollbar-thumb {
  3698.             background-color: var(--accent-orange);
  3699.             border-radius: 20px;
  3700.         }
  3702.         .thumbnail {
  3703.             width: 130px;
  3704.             height: 85px;
  3705.             object-fit: cover;
  3706.             border-radius: 10px;
  3707.             cursor: pointer;
  3708.             border: 3px solid transparent;
  3709.             flex-shrink: 0;
  3710.             transition: var(--transition);
  3711.             box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  3712.             position: relative;
  3713.             overflow: hidden;
  3714.         }
  3716.         .thumbnail::after {
  3717.             content: '';
  3718.             position: absolute;
  3719.             top: 0;
  3720.             left: 0;
  3721.             width: 100%;
  3722.             height: 100%;
  3723.             background: rgba(216, 76, 43, 0);
  3724.             transition: var(--transition);
  3725.         }
  3727.         .thumbnail.active {
  3728.             border: 3px solid var(--accent-orange);
  3729.             transform: scale(1.05);
  3730.         }
  3732.         .thumbnail.active::after {
  3733.             background: rgba(216, 76, 43, 0.1);
  3734.         }
  3736.         .thumbnail:hover {
  3737.             transform: scale(1.05);
  3738.             box-shadow: 0 6px 12px rgba(0,0,0,0.15);
  3739.             border-color: var(--accent-orange-light);
  3740.         }
  3742.         .thumbnail:hover::after {
  3743.             background: rgba(216, 76, 43, 0.1);
  3744.         }
  3746.         /* Section Styles - IMPROVED */
  3747.         .section {
  3748.             padding: 50px 0;
  3749.         }
  3751.         .section-header {
  3752.             text-align: center;
  3753.             margin-bottom: 40px;
  3754.             position: relative;
  3755.         }
  3757.         .section-title {
  3758.             color: var(--primary-blue);
  3759.             font-size: var(--font-size-3xl);
  3760.             font-weight: 800;
  3761.             margin-bottom: 15px;
  3762.             position: relative;
  3763.             display: inline-block;
  3764.         }
  3766.         .section-title::after {
  3767.             content: '';
  3768.             position: absolute;
  3769.             bottom: -12px;
  3770.             left: 50%;
  3771.             transform: translateX(-50%);
  3772.             width: 80px;
  3773.             height: 4px;
  3774.             background: var(--gradient-accent);
  3775.             border-radius: 2px;
  3776.         }
  3778.         .section-subtitle {
  3779.             color: var(--text-light);
  3780.             max-width: 800px;
  3781.             margin: 25px auto 0;
  3782.             font-size: var(--font-size-lg);
  3783.             line-height: 1.7;
  3784.         }
  3786.         /* Program Cards - IMPROVED */
  3787.         .program-cards {
  3788.             display: flex;
  3789.             flex-wrap: wrap;
  3790.             gap: 30px;
  3791.             justify-content: center;
  3792.             margin-bottom: 50px;
  3793.         }
  3795.         .program-card {
  3796.             flex: 1;
  3797.             min-width: 300px;
  3798.             max-width: 380px;
  3799.             background: var(--white);
  3800.             padding: 35px;
  3801.             border-radius: 20px;
  3802.             box-shadow: var(--card-shadow);
  3803.             transition: var(--transition);
  3804.             position: relative;
  3805.             overflow: hidden;
  3806.             z-index: 1;
  3807.         }
  3809.         .program-card::before {
  3810.             content: '';
  3811.             position: absolute;
  3812.             top: 0;
  3813.             left: 0;
  3814.             width: 100%;
  3815.             height: 5px;
  3816.             background: var(--gradient-accent);
  3817.             transition: var(--transition);
  3818.             z-index: -1;
  3819.         }
  3821.         .program-card::after {
  3822.             content: '';
  3823.             position: absolute;
  3824.             top: 0;
  3825.             left: 0;
  3826.             width: 100%;
  3827.             height: 0;
  3828.             background: linear-gradient(180deg, rgba(216, 76, 43, 0.05), transparent);
  3829.             transition: var(--transition);
  3830.             z-index: -1;
  3831.         }
  3833.         .program-card:hover {
  3834.             transform: translateY(-10px);
  3835.             box-shadow: 0 20px 40px rgba(0,0,0,0.1);
  3836.         }
  3838.         .program-card:hover::before {
  3839.             height: 8px;
  3840.         }
  3842.         .program-card:hover::after {
  3843.             height: 100%;
  3844.         }
  3846.         .program-card-icon {
  3847.             width: 70px;
  3848.             height: 70px;
  3849.             border-radius: 50%;
  3850.             display: flex;
  3851.             justify-content: center;
  3852.             align-items: center;
  3853.             margin-bottom: 25px;
  3854.             transition: var(--transition);
  3855.             background: rgba(216, 76, 43, 0.1);
  3856.         }
  3858.         .program-card:hover .program-card-icon {
  3859.             transform: scale(1.1) rotate(5deg);
  3860.             background: rgba(216, 76, 43, 0.15);
  3861.         }
  3863.         .program-card-icon svg {
  3864.             color: var(--accent-orange);
  3865.             stroke: var(--accent-orange);
  3866.         }
  3868.         .program-card-title {
  3869.             color: var(--primary-blue);
  3870.             font-size: var(--font-size-xl);
  3871.             margin: 0 0 20px 0;
  3872.             font-weight: 700;
  3873.         }
  3875.         .program-card-text {
  3876.             color: var(--text-light);
  3877.             margin-bottom: 25px;
  3878.             line-height: 1.7;
  3879.             font-size: var(--font-size-base);
  3880.         }
  3882.         .program-card-feature {
  3883.             display: flex;
  3884.             align-items: center;
  3885.             margin-bottom: 12px;
  3886.         }
  3888.         .program-card-feature svg {
  3889.             margin-right: 12px;
  3890.             flex-shrink: 0;
  3891.             color: var(--accent-orange);
  3892.             stroke: var(--accent-orange);
  3893.         }
  3895.         .program-card-feature span {
  3896.             color: var(--text-light);
  3897.             font-size: var(--font-size-base);
  3898.         }
  3900.         .program-card-cta {
  3901.             background: var(--gradient-primary);
  3902.             color: var(--white);
  3903.             box-shadow: 0 10px 30px rgba(38, 51, 113, 0.3);
  3904.         }
  3906.         .program-card-cta:hover {
  3907.             box-shadow: 0 20px 40px rgba(38, 51, 113, 0.4);
  3908.         }
  3910.         .program-card-cta .program-card-title,
  3911.         .program-card-cta .program-card-text,
  3912.         .program-card-cta .program-card-feature span {
  3913.             color: var(--white);
  3914.         }
  3916.         .program-card-cta .program-card-text {
  3917.             opacity: 0.9;
  3918.         }
  3920.         .program-card-cta .program-card-feature span {
  3921.             opacity: 0.9;
  3922.         }
  3924.         .program-card-cta .program-card-icon {
  3925.             background-color: rgba(255, 255, 255, 0.2);
  3926.         }
  3928.         .program-card-cta .program-card-icon svg {
  3929.             color: var(--white);
  3930.             stroke: var(--white);
  3931.         }
  3933.         .program-card-cta::after {
  3934.             background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent);
  3935.         }
  3937.         .program-card-button {
  3938.             display: inline-block;
  3939.             background: var(--gradient-accent);
  3940.             color: var(--white);
  3941.             padding: 14px 30px;
  3942.             text-decoration: none;
  3943.             border-radius: 50px;
  3944.             font-weight: 600;
  3945.             margin-top: 25px;
  3946.             transition: var(--transition);
  3947.             box-shadow: 0 5px 15px rgba(216, 76, 43, 0.3);
  3948.             position: relative;
  3949.             overflow: hidden;
  3950.             font-size: var(--font-size-base);
  3951.         }
  3953.         .program-card-button::before {
  3954.             content: '';
  3955.             position: absolute;
  3956.             top: 0;
  3957.             left: -100%;
  3958.             width: 100%;
  3959.             height: 100%;
  3960.             background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  3961.             transition: 0.5s;
  3962.         }
  3964.         .program-card-button:hover::before {
  3965.             left: 100%;
  3966.         }
  3968.         .program-card-button:hover {
  3969.             transform: translateY(-3px) scale(1.05);
  3970.             box-shadow: 0 8px 20px rgba(216, 76, 43, 0.4);
  3971.             color: var(--white);
  3972.         }
  3974.         /* Benefits List - IMPROVED */
  3975.         .benefits-list {
  3976.             color: var(--text-light);
  3977.             padding-left: 5px;
  3978.             list-style-type: none;
  3979.         }
  3981.         .benefits-list li {
  3982.             margin-bottom: 15px;
  3983.             display: flex;
  3984.             align-items: flex-start;
  3985.             padding-bottom: 15px;
  3986.             border-bottom: 1px dashed rgba(216, 76, 43, 0.2);
  3987.             font-size: var(--font-size-base);
  3988.             transition: var(--transition);
  3989.         }
  3991.         .benefits-list li:hover {
  3992.             transform: translateX(5px);
  3993.         }
  3995.         .benefits-list li:last-child {
  3996.             border-bottom: none;
  3997.             padding-bottom: 0;
  3998.         }
  4000.         .benefits-list li span {
  4001.             color: var(--accent-orange);
  4002.             margin-right: 12px;
  4003.             font-weight: bold;
  4004.             font-size: var(--font-size-lg);
  4005.         }
  4007.         /* Program Overview Section - IMPROVED */
  4008.         .overview-container {
  4009.             padding: 50px;
  4010.             background-color: var(--white);
  4011.             border-radius: 20px;
  4012.             box-shadow: var(--card-shadow);
  4013.             margin-bottom: 60px;
  4014.             position: relative;
  4015.             overflow: hidden;
  4016.         }
  4018.         .overview-container::before {
  4019.             content: '';
  4020.             position: absolute;
  4021.             top: 0;
  4022.             left: 0;
  4023.             width: 100%;
  4024.             height: 100%;
  4025.             background: radial-gradient(circle at top right, rgba(216, 76, 43, 0.05), transparent 70%);
  4026.             z-index: 0;
  4027.         }
  4029.         .overview-cards {
  4030.             display: flex;
  4031.             flex-wrap: wrap;
  4032.             gap: 30px;
  4033.             margin-top: 40px;
  4034.             position: relative;
  4035.             z-index: 1;
  4036.         }
  4038.         .overview-card {
  4039.             flex: 1;
  4040.             min-width: 300px;
  4041.             background-color: var(--background);
  4042.             padding: 30px;
  4043.             border-radius: 15px;
  4044.             position: relative;
  4045.             transition: var(--transition);
  4046.             overflow: hidden;
  4047.             z-index: 1;
  4048.         }
  4050.         .overview-card::after {
  4051.             content: '';
  4052.             position: absolute;
  4053.             bottom: -100%;
  4054.             right: -100%;
  4055.             width: 200%;
  4056.             height: 200%;
  4057.             background: radial-gradient(circle, rgba(216, 76, 43, 0.05), transparent 70%);
  4058.             transition: var(--transition);
  4059.             z-index: -1;
  4060.         }
  4062.         .overview-card:hover::after {
  4063.             bottom: -50%;
  4064.             right: -50%;
  4065.         }
  4067.         .overview-card:hover {
  4068.             transform: translateY(-5px);
  4069.             box-shadow: 0 15px 30px rgba(0,0,0,0.1);
  4070.         }
  4072.         .overview-card-primary {
  4073.             border-top: 5px solid var(--primary-blue);
  4074.         }
  4076.         .overview-card-accent {
  4077.             border-top: 5px solid var(--accent-orange);
  4078.         }
  4080.         .overview-card-title {
  4081.             color: var(--primary-blue);
  4082.             font-size: var(--font-size-xl);
  4083.             margin-top: 0;
  4084.             margin-bottom: 20px;
  4085.             display: flex;
  4086.             align-items: center;
  4087.             gap: 12px;
  4088.             font-weight: 700;
  4089.         }
  4091.         .overview-card-title svg {
  4092.             color: var(--accent-orange);
  4093.             stroke: var(--accent-orange);
  4094.         }
  4096.         .overview-card-period {
  4097.             color: var(--text-light);
  4098.             margin-bottom: 20px;
  4099.             display: inline-block;
  4100.             padding: 6px 15px;
  4101.             background-color: rgba(216, 76, 43, 0.1);
  4102.             border-radius: 30px;
  4103.             font-size: var(--font-size-sm);
  4104.         }
  4106.         .overview-card-list {
  4107.             color: var(--text-dark);
  4108.             padding-left: 5px;
  4109.             list-style-type: none;
  4110.         }
  4112.         .overview-card-list li {
  4113.             margin-bottom: 14px;
  4114.             padding-left: 25px;
  4115.             position: relative;
  4116.             font-size: var(--font-size-base);
  4117.             transition: var(--transition);
  4118.         }
  4120.         .overview-card-list li:hover {
  4121.             transform: translateX(5px);
  4122.         }
  4124.         .overview-card-list li::before {
  4125.             content: '';
  4126.             position: absolute;
  4127.             left: 0;
  4128.             top: 10px;
  4129.             width: 8px;
  4130.             height: 8px;
  4131.             border-radius: 50%;
  4132.             background-color: var(--accent-orange);
  4133.         }
  4135.         .overview-card-content {
  4136.             background-color: var(--white);
  4137.             padding: 25px;
  4138.             border-radius: 12px;
  4139.             margin-top: 25px;
  4140.             box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  4141.         }
  4143.         .overview-card-content p {
  4144.             color: var(--text-dark);
  4145.             margin: 0;
  4146.             line-height: 1.7;
  4147.             font-size: var(--font-size-base);
  4148.         }
  4150.         .overview-card-info {
  4151.             display: flex;
  4152.             align-items: center;
  4153.             background-color: rgba(216, 76, 43, 0.1);
  4154.             padding: 15px;
  4155.             border-radius: 12px;
  4156.             margin-top: 20px;
  4157.         }
  4159.         .overview-card-info svg {
  4160.             margin-right: 12px;
  4161.             color: var(--accent-orange);
  4162.             stroke: var(--accent-orange);
  4163.         }
  4165.         .overview-card-info span {
  4166.             color: var(--primary-blue);
  4167.             font-weight: 600;
  4168.             font-size: var(--font-size-base);
  4169.         }
  4171.         /* Degree Cards - IMPROVED */
  4172.         .degree-cards {
  4173.             display: flex;
  4174.             flex-wrap: wrap;
  4175.             gap: 30px;
  4176.             justify-content: center;
  4177.             margin-bottom: 60px;
  4178.         }
  4180.         .degree-card {
  4181.             flex: 1;
  4182.             min-width: 300px;
  4183.             max-width: 500px;
  4184.             background: var(--white);
  4185.             padding: 35px;
  4186.             border-radius: 20px;
  4187.             box-shadow: var(--card-shadow);
  4188.             transition: var(--transition);
  4189.             position: relative;
  4190.             overflow: hidden;
  4191.             z-index: 1;
  4192.         }
  4194.         .degree-card::after {
  4195.             content: '';
  4196.             position: absolute;
  4197.             top: 0;
  4198.             left: 0;
  4199.             width: 100%;
  4200.             height: 0;
  4201.             background: linear-gradient(180deg, rgba(216, 76, 43, 0.05), transparent);
  4202.             transition: var(--transition);
  4203.             z-index: -1;
  4204.         }
  4206.         .degree-card:hover::after {
  4207.             height: 100%;
  4208.         }
  4210.         .degree-card:hover {
  4211.             transform: translateY(-10px);
  4212.             box-shadow: 0 20px 40px rgba(0,0,0,0.1);
  4213.         }
  4215.         .degree-card-primary {
  4216.             border-left: 5px solid var(--primary-blue);
  4217.         }
  4219.         .degree-card-accent {
  4220.             border-left: 5px solid var(--accent-orange);
  4221.         }
  4223.         .degree-card-header {
  4224.             display: flex;
  4225.             align-items: center;
  4226.             margin-bottom: 25px;
  4227.         }
  4229.         .degree-card-icon {
  4230.             width: 65px;
  4231.             height: 65px;
  4232.             border-radius: 50%;
  4233.             display: flex;
  4234.             justify-content: center;
  4235.             align-items: center;
  4236.             flex-shrink: 0;
  4237.             transition: var(--transition);
  4238.             background: rgba(216, 76, 43, 0.1);
  4239.         }
  4241.         .degree-card-icon svg {
  4242.             color: var(--accent-orange);
  4243.             stroke: var(--accent-orange);
  4244.         }
  4246.         .degree-card:hover .degree-card-icon {
  4247.             transform: scale(1.1) rotate(5deg);
  4248.             background: rgba(216, 76, 43, 0.15);
  4249.         }
  4251.         .degree-card-title-container {
  4252.             margin-left: 20px;
  4253.         }
  4255.         .degree-card-title {
  4256.             color: var(--primary-blue);
  4257.             font-size: var(--font-size-xl);
  4258.             margin: 0 0 8px 0;
  4259.             font-weight: 700;
  4260.         }
  4262.         .degree-card-subtitle {
  4263.             color: var(--text-light);
  4264.             margin: 0;
  4265.             font-size: var(--font-size-base);
  4266.         }
  4268.         .degree-card-content {
  4269.             color: var(--text-dark);
  4270.             line-height: 1.7;
  4271.             padding-top: 15px;
  4272.             border-top: 1px solid rgba(216, 76, 43, 0.1);
  4273.             font-size: var(--font-size-base);
  4274.         }
  4276.         /* Admission Section76,43,0.1);
  4277.             font-size: var(--font-size-base);
  4278.         }
  4280.         /* Admission Section - IMPROVED */
  4281.         .admission-container {
  4282.             padding: 50px;
  4283.             background-color: var(--white);
  4284.             border-radius: 20px;
  4285.             box-shadow: var(--card-shadow);
  4286.             margin-bottom: 60px;
  4287.             position: relative;
  4288.             overflow: hidden;
  4289.         }
  4291.         .admission-container::before {
  4292.             content: '';
  4293.             position: absolute;
  4294.             top: 0;
  4295.             left: 0;
  4296.             width: 100%;
  4297.             height: 100%;
  4298.             background: radial-gradient(circle at bottom left, rgba(216, 76, 43, 0.05), transparent 70%);
  4299.             z-index: 0;
  4300.         }
  4302.         .admission-columns {
  4303.             display: flex;
  4304.             flex-wrap: wrap;
  4305.             gap: 40px;
  4306.             margin-top: 30px;
  4307.             position: relative;
  4308.             z-index: 1;
  4309.         }
  4311.         .admission-column {
  4312.             flex: 1;
  4313.             min-width: 300px;
  4314.         }
  4316.         .admission-title {
  4317.             color: var(--primary-blue);
  4318.             font-size: var(--font-size-xl);
  4319.             margin-bottom: 25px;
  4320.             display: flex;
  4321.             align-items: center;
  4322.             gap: 12px;
  4323.             font-weight: 700;
  4324.         }
  4326.         .admission-title svg {
  4327.             color: var(--accent-orange);
  4328.             stroke: var(--accent-orange);
  4329.         }
  4331.         .requirements-container {
  4332.             background-color: var(--background);
  4333.             padding: 25px;
  4334.             border-radius: 15px;
  4335.             margin-bottom: 25px;
  4336.             box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  4337.             transition: var(--transition);
  4338.             position: relative;
  4339.             overflow: hidden;
  4340.         }
  4342.         .requirements-container::after {
  4343.             content: '';
  4344.             position: absolute;
  4345.             top: 0;
  4346.             left: 0;
  4347.             width: 100%;
  4348.             height: 100%;
  4349.             background: radial-gradient(circle at top right, rgba(216, 76, 43, 0.05), transparent 70%);
  4350.             z-index: -1;
  4351.             opacity: 0;
  4352.             transition: var(--transition);
  4353.         }
  4355.         .requirements-container:hover {
  4356.             transform: translateY(-5px);
  4357.             box-shadow: 0 15px 30px rgba(0,0,0,0.1);
  4358.         }
  4360.         .requirements-container:hover::after {
  4361.             opacity: 1;
  4362.         }
  4364.         .requirement-item {
  4365.             display: flex;
  4366.             align-items: flex-start;
  4367.             gap: 15px;
  4368.             margin-bottom: 20px;
  4369.             padding-bottom: 20px;
  4370.             border-bottom: 1px dashed rgba(216, 76, 43, 0.2);
  4371.             transition: var(--transition);
  4372.         }
  4374.         .requirement-item:hover {
  4375.             transform: translateX(5px);
  4376.         }
  4378.         .requirement-item:last-child {
  4379.             margin-bottom: 0;
  4380.             padding-bottom: 0;
  4381.             border-bottom: none;
  4382.         }
  4384.         .requirement-number {
  4385.             width: 35px;
  4386.             height: 35px;
  4387.             background-color: var(--accent-orange);
  4388.             border-radius: 50%;
  4389.             color: var(--white);
  4390.             display: flex;
  4391.             justify-content: center;
  4392.             align-items: center;
  4393.             font-weight: 600;
  4394.             flex-shrink: 0;
  4395.             transition: var(--transition);
  4396.         }
  4398.         .requirement-item:hover .requirement-number {
  4399.             transform: scale(1.1);
  4400.             box-shadow: 0 5px 10px rgba(216, 76, 43, 0.3);
  4401.         }
  4403.         .requirement-content {
  4404.             flex-grow: 1;
  4405.         }
  4407.         .requirement-title {
  4408.             font-weight: 600;
  4409.             color: var(--primary-blue);
  4410.             margin-bottom: 8px;
  4411.             font-size: var(--font-size-base);
  4412.         }
  4414.         .requirement-description {
  4415.             color: var(--text-light);
  4416.             font-size: var(--font-size-base);
  4417.             line-height: 1.6;
  4418.         }
  4420.         .documents-grid {
  4421.             display: grid;
  4422.             grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  4423.             gap: 15px;
  4424.         }
  4426.         .document-item {
  4427.             display: flex;
  4428.             align-items: center;
  4429.             gap: 12px;
  4430.             background-color: var(--background);
  4431.             padding: 18px;
  4432.             border-radius: 12px;
  4433.             box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  4434.             transition: var(--transition);
  4435.             position: relative;
  4436.             overflow: hidden;
  4437.             z-index: 1;
  4438.         }
  4440.         .document-item::after {
  4441.             content: '';
  4442.             position: absolute;
  4443.             top: 0;
  4444.             left: 0;
  4445.             width: 100%;
  4446.             height: 100%;
  4447.             background: linear-gradient(90deg, rgba(216, 76, 43, 0.05), transparent);
  4448.             opacity: 0;
  4449.             transition: var(--transition);
  4450.             z-index: -1;
  4451.         }
  4453.         .document-item:hover {
  4454.             transform: translateX(5px);
  4455.             box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  4456.         }
  4458.         .document-item:hover::after {
  4459.             opacity: 1;
  4460.         }
  4462.         .document-item svg {
  4463.             color: var(--accent-orange);
  4464.             stroke: var(--accent-orange);
  4465.         }
  4467.         .document-title {
  4468.             font-weight: 600;
  4469.             color: var(--primary-blue);
  4470.             font-size: var(--font-size-base);
  4471.         }
  4473.         /* Important Dates - IMPROVED */
  4474.         .dates-title {
  4475.             color: var(--primary-blue);
  4476.             font-size: var(--font-size-xl);
  4477.             margin: 40px 0 25px;
  4478.             display: flex;
  4479.             align-items: center;
  4480.             gap: 12px;
  4481.             font-weight: 700;
  4482.             position: relative;
  4483.             z-index: 1;
  4484.         }
  4486.         .dates-title svg {
  4487.             color: var(--accent-orange);
  4488.             stroke: var(--accent-orange);
  4489.         }
  4491.         .dates-container {
  4492.             display: flex;
  4493.             flex-wrap: wrap;
  4494.             gap: 20px;
  4495.             justify-content: center;
  4496.             position: relative;
  4497.             z-index: 1;
  4498.         }
  4500.         .date-item {
  4501.             flex: 1;
  4502.             min-width: 200px;
  4503.             max-width: 220px;
  4504.             background-color: var(--background);
  4505.             padding: 25px;
  4506.             border-radius: 15px;
  4507.             text-align: center;
  4508.             transition: var(--transition);
  4509.             box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  4510.             position: relative;
  4511.             overflow: hidden;
  4512.             z-index: 1;
  4513.         }
  4515.         .date-item::after {
  4516.             content: '';
  4517.             position: absolute;
  4518.             bottom: -50%;
  4519.             right: -50%;
  4520.             width: 200%;
  4521.             height: 200%;
  4522.             background: radial-gradient(circle, rgba(216, 76, 43, 0.05), transparent 70%);
  4523.             transition: var(--transition);
  4524.             z-index: -1;
  4525.             opacity: 0;
  4526.         }
  4528.         .date-item:hover::after {
  4529.             opacity: 1;
  4530.         }
  4532.         .date-item:hover {
  4533.             transform: translateY(-10px);
  4534.             box-shadow: 0 15px 30px rgba(0,0,0,0.1);
  4535.         }
  4537.         .date-calendar {
  4538.             width: 65px;
  4539.             height: 65px;
  4540.             background-color: var(--accent-orange);
  4541.             color: var(--white);
  4542.             border-radius: 15px;
  4543.             display: flex;
  4544.             flex-direction: column;
  4545.             justify-content: center;
  4546.             align-items: center;
  4547.             margin: 0 auto 15px;
  4548.             transition: var(--transition);
  4549.             box-shadow: 0 5px 15px rgba(216, 76, 43, 0.2);
  4550.         }
  4552.         .date-item:hover .date-calendar {
  4553.             transform: scale(1.1) rotate(3deg);
  4554.             box-shadow: 0 8px 20px rgba(216, 76, 43, 0.3);
  4555.         }
  4557.         .date-day {
  4558.             font-size: var(--font-size-xl);
  4559.             font-weight: 700;
  4560.         }
  4562.         .date-month {
  4563.             font-size: var(--font-size-sm);
  4564.         }
  4566.         .date-title {
  4567.             font-weight: 600;
  4568.             color: var(--primary-blue);
  4569.             font-size: var(--font-size-base);
  4570.         }
  4572.         /* CTA Section - IMPROVED */
  4573.         .cta-section {
  4574.             background: var(--gradient-primary);
  4575.             border-radius: 20px;
  4576.             overflow: hidden;
  4577.             margin-bottom: 70px;
  4578.             box-shadow: 0 20px 40px rgba(38, 51, 113, 0.3);
  4579.             position: relative;
  4580.         }
  4582.         .cta-container {
  4583.             display: flex;
  4584.             flex-wrap: wrap;
  4585.             position: relative;
  4586.             z-index: 1;
  4587.         }
  4589.         .cta-content {
  4590.             flex: 1;
  4591.             min-width: 300px;
  4592.             padding: 60px;
  4593.             display: flex;
  4594.             flex-direction: column;
  4595.             justify-content: center;
  4596.         }
  4598.         .cta-title {
  4599.             font-size: var(--font-size-4xl);
  4600.             font-weight: 800;
  4601.             color: var(--white);
  4602.             margin: 0 0 25px;
  4603.             line-height: 1;
  4604.             animation: pulse 2s infinite;
  4605.         }
  4607.         .cta-title span {
  4608.             color: var(--accent-orange);
  4609.             position: relative;
  4610.             display: inline-block;
  4611.         }
  4613.            /* PDF Download Section Styles */
  4614.     .pdf-download-section {
  4615.         background-color: var(--white);
  4616.         border-radius: 20px;
  4617.         padding: 50px;
  4618.         margin-bottom: 60px;
  4619.         box-shadow: var(--card-shadow);
  4620.         position: relative;
  4621.         overflow: hidden;
  4622.     }
  4624.     .pdf-download-section::before {
  4625.         content: '';
  4626.         position: absolute;
  4627.         top: 0;
  4628.         left: 0;
  4629.         width: 100%;
  4630.         height: 100%;
  4631.         background: radial-gradient(circle at top right, rgba(216, 76, 43, 0.03), transparent 70%);
  4632.         z-index: 0;
  4633.     }
  4635.     .pdf-download-container {
  4636.         background-color: var(--background);
  4637.         border-radius: 15px;
  4638.         padding: 40px;
  4639.         margin-top: 30px;
  4640.         box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  4641.         display: flex;
  4642.         flex-direction: column;
  4643.         align-items: center;
  4644.         position: relative;
  4645.         overflow: hidden;
  4646.         z-index: 1;
  4647.     }
  4649.     .pdf-download-container::after {
  4650.         content: '';
  4651.         position: absolute;
  4652.         top: 0;
  4653.         left: 0;
  4654.         width: 100%;
  4655.         height: 100%;
  4656.         background: radial-gradient(circle at top right, rgba(216, 76, 43, 0.03), transparent 70%);
  4657.         z-index: -1;
  4658.     }
  4660.     .pdf-preview {
  4661.         display: flex;
  4662.         align-items: center;
  4663.         gap: 30px;
  4664.         margin-bottom: 30px;
  4665.         width: 100%;
  4666.         max-width: 800px;
  4667.         padding-bottom: 30px;
  4668.         border-bottom: 1px dashed rgba(216, 76, 43, 0.2);
  4669.     }
  4671.     .pdf-preview svg {
  4672.         color: var(--accent-orange);
  4673.         flex-shrink: 0;
  4674.         padding: 20px;
  4675.         background-color: rgba(216, 76, 43, 0.1);
  4676.         border-radius: 15px;
  4677.         transition: var(--transition);
  4678.     }
  4680.     .pdf-info {
  4681.         flex-grow: 1;
  4682.     }
  4684.     .pdf-info h3 {
  4685.         color: var(--primary-blue);
  4686.         font-size: var(--font-size-xl);
  4687.         margin: 0 0 15px 0;
  4688.         font-weight: 700;
  4689.     }
  4691.     .pdf-info p {
  4692.         color: var(--text-light);
  4693.         margin-bottom: 15px;
  4694.         line-height: 1.6;
  4695.     }
  4697.     .pdf-details {
  4698.         list-style: none;
  4699.         padding: 0;
  4700.         margin: 0;
  4701.         display: flex;
  4702.         flex-wrap: wrap;
  4703.         gap: 15px;
  4704.     }
  4706.     .pdf-details li {
  4707.         display: flex;
  4708.         align-items: center;
  4709.         gap: 5px;
  4710.         color: var(--text-dark);
  4711.         font-size: var(--font-size-sm);
  4712.         background-color: rgba(38, 51, 113, 0.05);
  4713.         padding: 5px 12px;
  4714.         border-radius: 20px;
  4715.     }
  4717.     .pdf-details li span {
  4718.         font-weight: 600;
  4719.     }
  4721.     .pdf-download-button {
  4722.         display: inline-flex;
  4723.         align-items: center;
  4724.         gap: 10px;
  4725.         background: var(--gradient-primary);
  4726.         color: var(--white);
  4727.         padding: 16px 35px;
  4728.         text-decoration: none;
  4729.         border-radius: 50px;
  4730.         font-weight: 600;
  4731.         transition: var(--transition);
  4732.         box-shadow: 0 8px 20px rgba(38, 51, 113, 0.3);
  4733.         position: relative;
  4734.         overflow: hidden;
  4735.         font-size: var(--font-size-base);
  4736.     }
  4738.     .pdf-download-button::before {
  4739.         content: '';
  4740.         position: absolute;
  4741.         top: 0;
  4742.         left: -100%;
  4743.         width: 100%;
  4744.         height: 100%;
  4745.         background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  4746.         transition: 0.5s;
  4747.     }
  4749.     .pdf-download-button:hover::before {
  4750.         left: 100%;
  4751.     }
  4753.     .pdf-download-button:hover {
  4754.         transform: translateY(-5px) scale(1.05);
  4755.         box-shadow: 0 12px 25px rgba(38, 51, 113, 0.4);
  4756.         color: var(--white);
  4757.     }
  4759.     .pdf-download-button svg {
  4760.         transition: var(--transition);
  4761.     }
  4763.     .pdf-download-button:hover svg {
  4764.         transform: translateY(3px);
  4765.     }
  4767.     /* Responsive adjustments */
  4768.     @media (max-width: 768px) {
  4769.         .pdf-download-section {
  4770.             padding: 40px 30px;
  4771.         }
  4773.         .pdf-preview {
  4774.             flex-direction: column;
  4775.             text-align: center;
  4776.         }
  4778.         .pdf-details {
  4779.             justify-content: center;
  4780.         }
  4781.     }
  4783.     @media (max-width: 480px) {
  4784.         .pdf-download-section {
  4785.             padding: 30px 20px;
  4786.         }
  4788.         .pdf-download-container {
  4789.             padding: 30px 20px;
  4790.         }
  4792.         .pdf-preview svg {
  4793.             width: 80px;
  4794.             height: 80px;
  4795.             padding: 15px;
  4796.         }
  4798.         .pdf-download-button {
  4799.             padding: 12px 25px;
  4800.             font-size: var(--font-size-sm);
  4801.         }
  4802.     }
  4804.         .cta-title span::after {
  4805.             content: '';
  4806.             position: absolute;
  4807.             bottom: -5px;
  4808.             left: 0;
  4809.             width: 100%;
  4810.             height: 3px;
  4811.             background-color: var(--accent-orange);
  4812.             transform: scaleX(0);
  4813.             transform-origin: right;
  4814.             transition: transform 0.5s ease;
  4815.         }
  4817.         .cta-section:hover .cta-title span::after {
  4818.             transform: scaleX(1);
  4819.             transform-origin: left;
  4820.         }
  4822.         .cta-text {
  4823.             color: rgba(255, 255, 255, 0.9);
  4824.             font-size: var(--font-size-lg);
  4825.             margin-bottom: 35px;
  4826.             max-width: 500px;
  4827.             line-height: 1.7;
  4828.         }
  4830.         .cta-button {
  4831.             display: inline-flex;
  4832.             align-items: center;
  4833.             background: var(--gradient-accent);
  4834.             color: var(--white);
  4835.             padding: 16px 35px;
  4836.             text-decoration: none;
  4837.             border-radius: 50px;
  4838.             font-weight: 600;
  4839.             transition: var(--transition);
  4840.             box-shadow: 0 8px 20px rgba(216, 76, 43, 0.3);
  4841.             align-self: flex-start;
  4842.             position: relative;
  4843.             overflow: hidden;
  4844.             font-size: var(--font-size-base);
  4845.         }
  4847.         .cta-button::before {
  4848.             content: '';
  4849.             position: absolute;
  4850.             top: 0;
  4851.             left: -100%;
  4852.             width: 100%;
  4853.             height: 100%;
  4854.             background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  4855.             transition: 0.5s;
  4856.         }
  4858.         .cta-button:hover::before {
  4859.             left: 100%;
  4860.         }
  4862.         .cta-button:hover {
  4863.             transform: translateY(-5px) scale(1.05);
  4864.             box-shadow: 0 12px 25px rgba(216, 76, 43, 0.4);
  4865.             color: var(--white);
  4866.         }
  4868.         .cta-button span {
  4869.             margin-left: 12px;
  4870.             transition: var(--transition);
  4871.         }
  4873.         .cta-button:hover span {
  4874.             transform: translateX(5px);
  4875.         }
  4877.         .cta-contact {
  4878.             flex: 1;
  4879.             min-width: 300px;
  4880.             background-color: rgba(0, 0, 0, 0.1);
  4881.             padding: 60px;
  4882.             display: flex;
  4883.             align-items: center;
  4884.             justify-content: center;
  4885.         }
  4887.         .contact-content {
  4888.             text-align: center;
  4889.         }
  4891.         .contact-icon {
  4892.             width: 110px;
  4893.             height: 110px;
  4894.             background-color: rgba(216, 76, 43, 0.2);
  4895.             border-radius: 50%;
  4896.             display: flex;
  4897.             justify-content: center;
  4898.             align-items: center;
  4899.             margin: 0 auto 25px;
  4900.             transition: var(--transition);
  4901.         }
  4903.         .contact-icon:hover {
  4904.             transform: scale(1.1) rotate(5deg);
  4905.             background-color: rgba(216, 76, 43, 0.3);
  4906.         }
  4908.         .contact-icon svg {
  4909.             color: var(--white);
  4910.             stroke: var(--white);
  4911.         }
  4913.         .contact-title {
  4914.             color: var(--white);
  4915.             font-size: var(--font-size-2xl);
  4916.             margin: 0 0 15px 0;
  4917.             font-weight: 700;
  4918.         }
  4920.         .contact-text {
  4921.             color: rgba(255, 255, 255, 0.9);
  4922.             margin-bottom: 30px;
  4923.             font-size: var(--font-size-base);
  4924.         }
  4926.         .contact-button {
  4927.             display: inline-flex;
  4928.             align-items: center;
  4929.             background-color: var(--white);
  4930.             color: var(--accent-orange);
  4931.             padding: 16px 35px;
  4932.             text-decoration: none;
  4933.             border-radius: 50px;
  4934.             font-weight: 600;
  4935.             transition: var(--transition);
  4936.             box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  4937.             position: relative;
  4938.             overflow: hidden;
  4939.             font-size: var(--font-size-base);
  4940.         }
  4942.         .contact-button::before {
  4943.             content: '';
  4944.             position: absolute;
  4945.             top: 0;
  4946.             left: -100%;
  4947.             width: 100%;
  4948.             height: 100%;
  4949.             background: linear-gradient(90deg, transparent, rgba(216, 76, 43, 0.1), transparent);
  4950.             transition: 0.5s;
  4951.         }
  4953.         .contact-button:hover::before {
  4954.             left: 100%;
  4955.         }
  4957.         .contact-button:hover {
  4958.             transform: translateY(-5px) scale(1.05);
  4959.             box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3);
  4960.             color: var(--accent-orange-dark);
  4961.         }
  4963.         .contact-button span {
  4964.             margin-left: 12px;
  4965.             transition: var(--transition);
  4966.         }
  4968.         .contact-button:hover span {
  4969.             transform: translateX(5px);
  4970.         }
  4972.         .cta-circle {
  4973.             position: absolute;
  4974.             border-radius: 50%;
  4975.             background: rgba(255, 255, 255, 0.05);
  4976.         }
  4978.         .cta-circle-1 {
  4979.             top: -50px;
  4980.             right: -50px;
  4981.             width: 200px;
  4982.             height: 200px;
  4983.         }
  4985.         .cta-circle-2 {
  4986.             bottom: -30px;
  4987.             left: -30px;
  4988.             width: 150px;
  4989.             height: 150px;
  4990.         }
  4992.         .cta-circle-3 {
  4993.             top: -30px;
  4994.             right: 30%;
  4995.             width: 100px;
  4996.             height: 100px;
  4997.         }
  4999.         /* Animation */
  5000.         @keyframes pulse {
  5001.             0% { transform: scale(1); opacity: 0.5; }
  5002.             50% { transform: scale(1.03); opacity: 0.8; }
  5003.             100% { transform: scale(1); opacity: 0.5; }
  5004.         }
  5006.         /* Responsive Styles */
  5007.         @media (max-width: 992px) {
  5008.             .logo-container {
  5009.                 flex-direction: column;
  5010.                 text-align: center;
  5011.                 gap: 15px;
  5012.             }
  5013.             
  5014.             .main-logo {
  5015.                 width: 220px; /* Slightly smaller on tablet */
  5016.             }
  5017.             
  5018.             .logo-divider {
  5019.                 display: none;
  5020.             }
  5021.             
  5022.             .main-image-container {
  5023.                 height: 450px;
  5024.             }
  5026.             .overlay-title {
  5027.                 font-size: var(--font-size-3xl);
  5028.             }
  5030.             .overlay-subtitle {
  5031.                 font-size: var(--font-size-lg);
  5032.             }
  5033.             
  5034.             .cta-content, .cta-contact {
  5035.                 padding: 50px 40px;
  5036.             }
  5038.             .introduction-section {
  5039.                 padding: 30px;
  5040.             }
  5041.         }
  5043.         @media (max-width: 768px) {
  5044.             .main-logo {
  5045.                 width: 200px;
  5046.                 height: auto;
  5047.             }
  5048.             
  5049.             .main-image-container {
  5050.                 height: 400px;
  5051.             }
  5053.             .overlay-title {
  5054.                 font-size: var(--font-size-2xl);
  5055.             }
  5057.             .overlay-subtitle {
  5058.                 font-size: var(--font-size-base);
  5059.             }
  5061.             .section-title {
  5062.                 font-size: var(--font-size-2xl);
  5063.             }
  5065.             .cta-content, .cta-contact {
  5066.                 padding: 40px 30px;
  5067.             }
  5069.             .cta-title {
  5070.                 font-size: var(--font-size-3xl);
  5071.             }
  5072.             
  5073.             .overview-container, .admission-container {
  5074.                 padding: 40px 30px;
  5075.             }
  5076.         }
  5078.         @media (max-width: 480px) {
  5079.             .main-logo {
  5080.                 width: 180px;
  5081.                 height: auto;
  5082.                 transition: var(--transition);
  5083.                 filter: brightness(0) invert(1);
  5084.                 animation: logoGlow 3s infinite alternate;
  5085.             }
  5086.             
  5087.             .main-image-container {
  5088.                 height: 350px;
  5089.             }
  5090.             
  5091.             .image-overlay {
  5092.                 padding: 30px 20px;
  5093.             }
  5095.             .overlay-title {
  5096.                 font-size: var(--font-size-xl);
  5097.             }
  5099.             .overlay-subtitle {
  5100.                 font-size: var(--font-size-base);
  5101.             }
  5103.             .overlay-cta {
  5104.                 font-size: var(--font-size-base);
  5105.                 padding: 12px 25px;
  5106.             }
  5108.             .section-title {
  5109.                 font-size: var(--font-size-xl);
  5110.             }
  5112.             .overview-container, .admission-container {
  5113.                 padding: 30px 20px;
  5114.             }
  5116.             .cta-title {
  5117.                 font-size: var(--font-size-2xl);
  5118.             }
  5120.             .cta-text {
  5121.                 font-size: var(--font-size-base);
  5122.             }
  5123.             
  5124.             .program-card, .overview-card, .degree-card {
  5125.                 padding: 25px 20px;
  5126.             }
  5128.             .introduction-section {
  5129.                 padding: 25px 20px;
  5130.             }
  5131.         }
  5132.     </style>
  5133.     
  5134. </head>
  5135. <body>
  5137.     {% block header %}
  5138.         {{ render(path('_header')) }}
  5139.     {% endblock %}
  5140.  
  5141.     {% block switcher %}{% endblock %}
  5142.  
  5143.     {% block body %}
  5144.         <!-- IMPROVED Logo Header Section with White Logo -->
  5145.         <div class=\"logo-header\">
  5146.             <div class=\"logo-container\">
  5147.                 <img src=\"https://mcgt.um6p.ma//assets/img/12.png\" style=\"width: 300px; height: auto;\" alt=\"Program Logo\"  class=\"main-logo\">                
  5148.             </div>
  5149.         </div>
  5150.     
  5151.         <div class=\"page-container\">
  5152.             <!-- Hero Gallery Section -->
  5153.             <div class=\"hero-gallery\">
  5154.                 <div class=\"main-image-container\">
  5155.                     <img id=\"mainImage\" class=\"main-image\" src=\"https://mcgt.um6p.ma/assets/img/1.jpg\" alt=\"Campus Life\">
  5156.                     <div class=\"image-overlay\">
  5157.                         <h1 id=\"imageTitle\" class=\"overlay-title\">Experience Excellence in Education</h1>
  5158.                         <p id=\"imageDescription\" class=\"overlay-subtitle\">Join our prestigious Master 2 program and learn from world-renowned experts in game theory</p>
  5159.                         <a href=\"#apply\" class=\"overlay-cta\">Apply Now</a>
  5160.                     </div>
  5161.                 </div>
  5163.                 <!-- Thumbnail Gallery -->
  5164.                 <div id=\"imageGallery\" class=\"thumbnail-gallery\">
  5165.                     <img class=\"thumbnail active\" src=\"https://mcgt.um6p.ma/assets/img/1.jpg\" alt=\"Campus View\" 
  5166.                         onclick=\"changeMainImage(this, 'Experience Excellence in Education', 'Join our prestigious Master 2 program and learn from world-renowned experts in game theory')\">
  5167.                     
  5168.                     <img class=\"thumbnail\" src=\"https://mcgt.um6p.ma/assets/img/2.jpg\" alt=\"Student Life\" 
  5169.                         onclick=\"changeMainImage(this, 'Collaborative Learning Environment', 'Engage with peers and faculty in a supportive academic community')\">
  5170.                     
  5171.                     <img class=\"thumbnail\" src=\"https://mcgt.um6p.ma/assets/img/5.jpg\" alt=\"International Community\" 
  5172.                         onclick=\"changeMainImage(this, 'International Perspective', 'Join students from around the world in a diverse learning environment')\">
  5173.                     
  5174.                     <img class=\"thumbnail\" src=\"https://mcgt.um6p.ma/assets/img/6.jpg\" alt=\"Lecture Hall\" 
  5175.                         onclick=\"changeMainImage(this, 'Engaging Lectures', 'Learn from experts through interactive and stimulating lectures')\">
  5176.                     
  5177.                     <img class=\"thumbnail\" src=\"https://mcgt.um6p.ma/assets/img/7.jpg\" alt=\"Study Groups\" 
  5178.                         onclick=\"changeMainImage(this, 'Collaborative Research', 'Work with peers on cutting-edge research projects')\">
  5179.                     
  5180.                     <img class=\"thumbnail\" src=\"https://mcgt.um6p.ma/assets/img/8.jpg\" alt=\"Campus Grounds\" 
  5181.                         onclick=\"changeMainImage(this, 'Beautiful Campus', 'Study in a modern and inspiring environment')\">
  5182.                     
  5183.                     <img class=\"thumbnail\" src=\"https://mcgt.um6p.ma/assets/img/9.jpg\" alt=\"Library\" 
  5184.                         onclick=\"changeMainImage(this, 'Extensive Resources', 'Access to comprehensive library and digital resources')\">
  5185.                     
  5186.                     <img class=\"thumbnail\" src=\"https://mcgt.um6p.ma/assets/img/10.jpg\" alt=\"Graduation\" 
  5187.                         onclick=\"changeMainImage(this, 'Academic Achievement', 'Celebrate your success with a prestigious degree')\">
  5188.                     
  5189.                     <img class=\"thumbnail\" src=\"https://mcgt.um6p.ma/assets/img/11.jpg\" alt=\"Career Opportunities\" 
  5190.                         onclick=\"changeMainImage(this, 'Future Opportunities', 'Open doors to exciting career and research opportunities')\">
  5191.                 </div>
  5192.             </div>
  5194.             <!-- Introduction Section -->
  5195.             <section class=\"introduction-section\">
  5196.                 <div class=\"introduction-content\">
  5197.                     <h2 class=\"introduction-title\">About the Program</h2>
  5198.                     
  5199.                     <p class=\"introduction-text\">The Master 2 in Mathematics and Applications at Paris Dauphine-PSL, specializing in « Game Theory in Mathematics, Economics, and Computation », takes place in Morocco on the campus of Mohammed VI Polytechnic University (UM6P) in Rabat.</p>
  5200.                     
  5201.                     <p class=\"introduction-text\">This program is offered as part of an international partnership with the Moroccan Center for Game Theory and is intended for students already enrolled in a Master 1 at Dauphine-PSL or an equivalent institution in France or the EU which allows to persue the Master 1 degree by a Master 2 at Dauphine-PSL. A few spots are available. </p>
  5202.                     
  5203.                     <p class=\"introduction-text\">Throughout the program, students will develop the following skills:</p>
  5204.                     
  5205.                     <ul class=\"skills-list\">
  5206.                         <li>Mastery of advanced theoretical techniques, including probability, statistics, combinatorics, operations research, convex optimization, game theory, and microeconomic theory.</li>
  5207.                         <li>Mastery of advanced models and methodologies, particularly in market design, auctions, repeated and stochastic games, mean-field games, algorithmic game theory, computational social choice, or multi-agent learning.</li>
  5208.                         <li>Ability to write scientific reports and communicate research findings effectively.</li>
  5209.                     </ul>
  5210.                     
  5211.                     <p class=\"introduction-text\">Successful candidates this year may have the opportunity to pursue a fully funded PhD at the Moroccan Center for Game Theory at UM6P, potentially under co-supervision with Paris Dauphine-PSL University. </p>
  5212.                     
  5213.                     <div class=\"financial-info\">
  5214.                         <p>Students enrolled at Dauphine-PSL are exempt from tuition fees at UM6P. However, they remain responsible for their travel, accommodation, and living expenses. They are eligible for on-campus housing at UM6P and can apply for a living stipend.</p>
  5215.                         
  5216.                         <p>Due to the highly limited number of spots, candidates must have an excellent academic record and a strong motivation to pursue a PhD. Applications must be submitted through our form for admission to Master 2.</p>
  5217.                     </div>
  5218.                 </div>
  5219.             </section>
  5221.             <!-- Program Cards Section -->
  5222.             <section class=\"section\">
  5223.                 <div class=\"section-header\">
  5224.                     <h2 class=\"section-title\">Master 2 Program</h2>
  5225.                     <p class=\"section-subtitle\">A prestigious program designed to develop expertise in game theory</p>
  5226.                 </div>
  5228.                 <div class=\"program-cards\">
  5229.                     <!-- Program Card -->
  5230.                     <div class=\"program-card program-card-primary\">
  5231.                         <div class=\"program-card-icon\">
  5232.                             <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"30\" height=\"30\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">
  5233.                                 <path d=\"M22 10v6M2 10l10-5 10 5-10 5z\"></path>
  5234.                                 <path d=\"M6 12v5c3 3 9 3 12 0v-5\"></path>
  5235.                             </svg>
  5236.                         </div>
  5237.                         <h3 class=\"program-card-title\">Master 2 Program</h3>
  5238.                         <p class=\"program-card-text\">Dauphine-UM6P Master 2 in Applied Mathematics: Game Theory in Mathematics, Economics, and Computation</p>
  5239.                         
  5240.                         <div class=\"program-card-feature\">
  5241.                             <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">
  5242.                                 <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>
  5243.                                 <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"></line>
  5244.                                 <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"></line>
  5245.                                 <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"></line>
  5246.                             </svg>
  5247.                             <span>One academic year (Oct-Sept)</span>
  5248.                         </div>
  5249.                         
  5250.                         <div class=\"program-card-feature\">
  5251.                             <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">
  5252.                                 <path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z\"></path>
  5253.                                 <circle cx=\"12\" cy=\"10\" r=\"3\"></circle>
  5254.                             </svg>
  5255.                             <span>UM6P Rabat Campus</span>
  5256.                         </div>
  5257.                     </div>
  5258.                     
  5259.                     <!-- Benefits Card -->
  5260.                     <div class=\"program-card program-card-accent\">
  5261.                         <div class=\"program-card-icon\">
  5262.                             <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"30\" height=\"30\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">
  5263.                                 <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"></path>
  5264.                                 <polyline points=\"22 4 12 14.01 9 11.01\"></polyline>
  5265.                             </svg>
  5266.                         </div>
  5267.                         <h3 class=\"program-card-title\">Program Benefits</h3>
  5268.                         
  5269.                         <ul class=\"benefits-list\">
  5270.                             <li><span>✓</span> World-class faculty from leading institutions</li>
  5271.                             <li><span>✓</span> Double degree: UM6P and Dauphine-PSL</li>
  5272.                             <li><span>✓</span> Direct access to PhD programs</li>
  5273.                             <li><span>✓</span> Affordable on-campus housing</li>
  5274.                         </ul>
  5275.                     </div>
  5276.                     
  5277.                     <!-- Apply Now Card -->
  5278.                     <div class=\"program-card program-card-cta\">
  5279.                         <div class=\"program-card-icon\">
  5280.                             <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"30\" height=\"30\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">
  5281.                                 <path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"></path>
  5282.                                 <polyline points=\"22,6 12,13 2,6\"></polyline>
  5283.                             </svg>
  5284.                         </div>
  5285.                         <h3 class=\"program-card-title\">Ready to Apply?</h3>
  5286.                         <p class=\"program-card-text\">Applications for the next academic year are now open. Don't miss this opportunity!</p>
  5287.                         
  5288.                         <div class=\"program-card-feature\">
  5289.                             <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">
  5290.                                 <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>
  5291.                                 <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"></line>
  5292.                                 <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"></line>
  5293.                                 <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"></line>
  5294.                             </svg>
  5295.                             <span>Deadline: May 31, 2025</span>
  5296.                         </div>
  5297.                         
  5298.                         <a href=\"#apply\" class=\"program-card-button\">Apply Now</a>
  5299.                     </div>
  5300.                 </div>
  5301.             </section>
  5303.             <!-- Program Overview Section -->
  5304.             <section class=\"section\">
  5305.                 <div class=\"overview-container\">
  5306.                     <div class=\"section-header\">
  5307.                         <h2 class=\"section-title\">Program Overview</h2>
  5308.                         <p class=\"section-subtitle\">A comprehensive curriculum designed to provide expertise in game theory and its applications</p>
  5309.                     </div>
  5311.                     <div class=\"overview-cards\">
  5312.                         <!-- Foundation Courses -->
  5313.                         <div class=\"overview-card overview-card-primary\">
  5314.                             <h3 class=\"overview-card-title\">
  5315.                                 <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">
  5316.                                     <path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"></path>
  5317.                                     <path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"></path>
  5318.                                 </svg>
  5319.                                 Foundation Courses
  5320.                             </h3>
  5321.                             <p class=\"overview-card-period\">October - December</p>
  5322.                             
  5323.                             <ul class=\"overview-card-list\">
  5324.                                 <li>Convex & Online Optimization</li>
  5325.                                 <li>Mathematical Game Theory</li>
  5326.                                 <li>Discrete Optimization & Operations Research</li>
  5327.                                 <li>Probability, Statistics & Control</li>
  5328.                                 <li>Microeconomics</li>
  5329.                             </ul>
  5330.                         </div>
  5331.                         
  5332.                         <!-- Specializations -->
  5333.                         <div class=\"overview-card overview-card-accent\">
  5334.                             <h3 class=\"overview-card-title\">
  5335.                                 <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">
  5336.                                     <polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"></polygon>
  5337.                                 </svg>
  5338.                                 Specializations
  5339.                             </h3>
  5340.                             <p class=\"overview-card-period\">January - April</p>
  5341.                             
  5342.                             <ul class=\"overview-card-list\">
  5343.                                 <li>Stochastic Games</li>
  5344.                                 <li>Optimal Transport, Differential & Mean-Field Games</li>
  5345.                                 <li>Algorithmic Game Theory</li>
  5346.                                 <li>Computational Social Choice</li>
  5347.                                 <li>Multi-Agents Learning</li>
  5348.                                 <li>Micoeconomics Modelling</li>
  5349.                             </ul>
  5350.                         </div>
  5351.                         
  5352.                         <!-- Final Semester -->
  5353.                         <div class=\"overview-card overview-card-primary\">
  5354.                             <h3 class=\"overview-card-title\">
  5355.                                 <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">
  5356.                                     <path d=\"M18 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3H6a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3V6a3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3h12a3 3 0 0 0 3-3 3 3 0 0 0-3-3z\"></path>
  5357.                                 </svg>
  5358.                                 Final Semester
  5359.                             </h3>
  5360.                             <p class=\"overview-card-period\">May - September</p>
  5361.                             
  5362.                             <div class=\"overview-card-content\">
  5363.                                 <p>Dedicated to solving a research problem and writing a Master's thesis under the supervision of world-class researchers.</p>
  5364.                             </div>
  5365.                             
  5366.                             <div class=\"overview-card-info\">
  5367.                                 <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">
  5368.                                     <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>
  5369.                                     <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"></line>
  5370.                                     <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"></line>
  5371.                                 </svg>
  5372.                                 <span>Total Credits: 60 ECTS</span>
  5373.                             </div>
  5374.                         </div>
  5375.                     </div>
  5376.                 </div>
  5377.             </section>
  5380.            <section class=\"section pdf-download-section\">
  5381.                 <div class=\"section-header\">
  5382.                     <h2 class=\"section-title\">Pre-doctoral Year Courses</h2>
  5383.                     <p class=\"section-subtitle\">Download the complete curriculum and course details for the MCGT Pre-doctoral year</p>
  5384.                 </div>
  5386.                 <div class=\"pdf-download-container\">
  5387.                     <div class=\"pdf-preview\">
  5388.                         <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"120\" height=\"120\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\">
  5389.                             <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"></path>
  5390.                             <polyline points=\"14 2 14 8 20 8\"></polyline>
  5391.                             <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"></line>
  5392.                             <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"></line>
  5393.                             <polyline points=\"10 9 9 9 8 9\"></polyline>
  5394.                         </svg>
  5395.                         <div class=\"pdf-info\">
  5396.                             <h3>MCGT Pre-doctoral Year Courses</h3>
  5397.                             <p>Complete curriculum details, course descriptions, and learning outcomes for the pre-doctoral year program.</p>
  5398.                             <ul class=\"pdf-details\">
  5399.                                 <li><span>Format:</span> PDF Document</li>
  5400.                                 <li><span>Size:</span> 2.4 MB</li>
  5401.                                 <li><span>Pages:</span> 24</li>
  5402.                                 <li><span>Last Updated:</span> March 15, 2025</li>
  5403.                             </ul>
  5404.                         </div>
  5405.                     </div>
  5406.                     <a href=\"https://mcgt.um6p.ma/Predoc.pdf\" class=\"pdf-download-button\" target=\"_blank\" download rel=\"noreferrer\">
  5407.                         <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">
  5408.                             <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"></path>
  5409.                             <polyline points=\"7 10 12 15 17 10\"></polyline>
  5410.                             <line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"></line>
  5411.                         </svg>
  5412.                         Download PDF
  5413.                     </a>
  5414.                 </div>
  5415.             </section>
  5417.     
  5419.            <!-- Degrees Section -->
  5420.             <section class=\"section\">
  5421.                 <div class=\"section-header\">
  5422.                     <h2 class=\"section-title\">Dual Degree Program</h2>
  5423.                     <p class=\"section-subtitle\">Graduate with two degrees that open doors worldwide</p>
  5424.                 </div>
  5426.                 <div class=\"degree-cards\">
  5427.                     <div class=\"degree-card degree-card-primary\">
  5428.                         <div class=\"degree-card-header\">
  5429.                             <div class=\"degree-card-icon\">
  5430.                                 <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"30\" height=\"30\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">
  5431.                                     <path d=\"M22 10v6M2 10l10-5 10 5-10 5z\"></path>
  5432.                                     <path d=\"M6 12v5c3 3 9 3 12 0v-5\"></path>
  5433.                                 </svg>
  5434.                             </div>
  5435.                             <div class=\"degree-card-title-container\">
  5436.                                 <h3 class=\"degree-card-title\">Master of Science from UM6P</h3>
  5437.                                 <p class=\"degree-card-subtitle\">Recognized degree with global opportunities</p>
  5438.                             </div>
  5439.                         </div>
  5440.                         <p class=\"degree-card-content\">This degree grants direct access to the PhD program at the Moroccan Center for Game Theory without the need to validate the predoc year.</p>
  5441.                     </div>
  5443.                     <div class=\"degree-card degree-card-accent\">
  5444.                         <div class=\"degree-card-header\">
  5445.                             <div class=\"degree-card-icon\">
  5446.                                 <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"30\" height=\"30\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">
  5447.                                     <path d=\"M22 10v6M2 10l10-5 10 5-10 5z\"></path>
  5448.                                     <path d=\"M6 12v5c3 3 9 3 12 0v-5\"></path>
  5449.                                 </svg>
  5450.                             </div>
  5451.                             <div class=\"degree-card-title-container\">
  5452.                                 <h3 class=\"degree-card-title\">Master 2 from Dauphine-PSL</h3>
  5453.                                 <p class=\"degree-card-subtitle\">Official French second-cycle degree</p>
  5454.                             </div>
  5455.                         </div>
  5456.                         <p class=\"degree-card-content\">This degree (60 ECTS credits) grants access to PhD programs worldwide and is highly valued by employers internationally.</p>
  5457.                     </div>
  5458.                 </div>
  5459.             </section>
  5461.             <!-- Admission & Requirements Section -->
  5462.             <section class=\"section\">
  5463.                 <div class=\"admission-container\">
  5464.                     <div class=\"section-header\">
  5465.                         <h2 class=\"section-title\">Admission & Requirements</h2>
  5466.                         <p class=\"section-subtitle\">Simple steps to join our prestigious program</p>
  5467.                     </div>
  5469.                     <div class=\"admission-columns\">
  5470.                         <!-- Requirements -->
  5471.                         <div class=\"admission-column\">
  5472.                             <h3 class=\"admission-title\">
  5473.                                 <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">
  5474.                                     <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"></path>
  5475.                                     <polyline points=\"22 4 12 14.01 9 11.01\"></polyline>
  5476.                                 </svg>
  5477.                                 Eligibility Requirements
  5478.                             </h3>
  5479.                             
  5480.                             <div class=\"requirements-container\">
  5481.                                 <div class=\"requirement-item\">
  5482.                                     <div class=\"requirement-number\">1</div>
  5483.                                     <div class=\"requirement-content\">
  5484.                                         <div class=\"requirement-title\">Enrolled in Master 1</div>
  5485.                                         <div class=\"requirement-description\">in Mathematics and Applications or equivalent</div>
  5486.                                     </div>
  5487.                                 </div>
  5488.                                 
  5489.                                 <div class=\"requirement-item\">
  5490.                                     <div class=\"requirement-number\">2</div>
  5491.                                     <div class=\"requirement-content\">
  5492.                                         <div class=\"requirement-title\">Successful completion of Master 1</div>
  5493.                                         <div class=\"requirement-description\">is required upon registration</div>
  5494.                                     </div>
  5495.                                 </div>
  5496.                                 
  5497.                                 <div class=\"requirement-item\">
  5498.                                     <div class=\"requirement-number\">3</div>
  5499.                                     <div class=\"requirement-content\">
  5500.                                         <div class=\"requirement-title\">Minimum B2 English proficiency</div>
  5501.                                         <div class=\"requirement-description\">(TOEFL IBT 92, IELTS 6.5, Cambridge FCE 160)</div>
  5502.                                     </div>
  5503.                                 </div>
  5504.                             </div>
  5505.                         </div>
  5506.                         
  5507.                         <!-- Required Documents -->
  5508.                         <div class=\"admission-column\">
  5509.                             <h3 class=\"admission-title\">
  5510.                                 <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">
  5511.                                     <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"></path>
  5512.                                     <polyline points=\"14 2 14 8 20 8\"></polyline>
  5513.                                     <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"></line>
  5514.                                     <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"></line>
  5515.                                     <polyline points=\"10 9 9 9 8 9\"></polyline>
  5516.                                 </svg>
  5517.                                 Required Documents
  5518.                             </h3>
  5519.                             
  5520.                             <div class=\"documents-grid\">
  5521.                                 <div class=\"document-item\">
  5522.                                     <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">
  5523.                                         <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"></path>
  5524.                                         <polyline points=\"14 2 14 8 20 8\"></polyline>
  5525.                                         <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"></line>
  5526.                                         <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"></line>
  5527.                                         <polyline points=\"10 9 9 9 8 9\"></polyline>
  5528.                                     </svg>
  5529.                                     <div class=\"document-title\">Curriculum vitae</div>
  5530.                                 </div>
  5531.                                 
  5532.                                 <div class=\"document-item\">
  5533.                                     <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">
  5534.                                         <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"></path>
  5535.                                         <polyline points=\"14 2 14 8 20 8\"></polyline>
  5536.                                         <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"></line>
  5537.                                         <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"></line>
  5538.                                         <polyline points=\"10 9 9 9 8 9\"></polyline>
  5539.                                     </svg>
  5540.                                     <div class=\"document-title\">motivation letter</div>
  5541.                                 </div>
  5542.                                 
  5543.                                 <div class=\"document-item\">
  5544.                                     <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">
  5545.                                         <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"></path>
  5546.                                         <polyline points=\"14 2 14 8 20 8\"></polyline>
  5547.                                         <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"></line>
  5548.                                         <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"></line>
  5549.                                         <polyline points=\"10 9 9 9 8 9\"></polyline>
  5550.                                     </svg>
  5551.                                     <div class=\"document-title\">Academic references</div>
  5552.                                 </div>
  5553.                                 
  5554.                                 <div class=\"document-item\">
  5555.                                     <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">
  5556.                                         <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"></path>
  5557.                                         <polyline points=\"14 2 14 8 20 8\"></polyline>
  5558.                                         <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"></line>
  5559.                                         <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"></line>
  5560.                                         <polyline points=\"10 9 9 9 8 9\"></polyline>
  5561.                                     </svg>
  5562.                                     <div class=\"document-title\">Transcripts</div>
  5563.                                 </div>
  5564.                             </div>
  5565.                         </div>
  5566.                     </div>
  5567.                     
  5568.                     <!-- Important Dates -->
  5569.                     <h3 class=\"dates-title\">
  5570.                         <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">
  5571.                             <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>
  5572.                             <polyline points=\"12 6 12 12 16 14\"></polyline>
  5573.                         </svg>
  5574.                         Important Dates
  5575.                     </h3>
  5576.                     
  5577.                     <div class=\"dates-container\">
  5578.                         <div class=\"date-item\">
  5579.                             <div class=\"date-calendar\">
  5580.                                 <div class=\"date-day\">31</div>
  5581.                                 <div class=\"date-month\">May</div>
  5582.                             </div>
  5583.                             <div class=\"date-title\">Application Deadline</div>
  5584.                         </div>
  5585.                         
  5586.                         <div class=\"date-item\">
  5587.                             <div class=\"date-calendar\">
  5588.                                 <div class=\"date-day\">6</div>
  5589.                                 <div class=\"date-month\">June</div>
  5590.                             </div>
  5591.                             <div class=\"date-title\">Interview Selection</div>
  5592.                         </div>
  5593.                         
  5594.                         <div class=\"date-item\">
  5595.                             <div class=\"date-calendar\">
  5596.                                 <div class=\"date-day\">16-20</div>
  5597.                                 <div class=\"date-month\">June</div>
  5598.                             </div>
  5599.                             <div class=\"date-title\">Interviews</div>
  5600.                         </div>
  5601.                         
  5602.                         <div class=\"date-item\">
  5603.                             <div class=\"date-calendar\">
  5604.                                 <div class=\"date-day\">1</div>
  5605.                                 <div class=\"date-month\">Oct</div>
  5606.                             </div>
  5607.                             <div class=\"date-title\">Program Start</div>
  5608.                         </div>
  5609.                     </div>
  5610.                 </div>
  5611.             </section>
  5612.             <!-- Faculty Members Section -->
  5613. <section class=\"section\">
  5614.     <div class=\"faculty-container\">
  5615.         <div class=\"section-header\">
  5616.             <h2 class=\"section-title\">Faculty Members</h2>
  5617.             <p class=\"section-subtitle\">Learn from world-renowned experts in game theory, mathematics, economics, and computer science</p>
  5618.         </div>
  5620.         <div class=\"faculty-carousel-wrapper\">
  5621.             <button class=\"faculty-nav prev\" aria-label=\"Previous faculty\" id=\"prevFacultyBtn\">
  5622.                 <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">
  5623.                     <polyline points=\"15 18 9 12 15 6\"></polyline>
  5624.                 </svg>
  5625.             </button>
  5626.             
  5627.             <div class=\"faculty-carousel-container\">
  5628.                 <div class=\"faculty-carousel\" id=\"facultyCarousel\">
  5629.                     <!-- Faculty Card 1 -->
  5630.                     <div class=\"faculty-card\">
  5631.                         <div class=\"faculty-image-container\">
  5632.                             <img src=\"https://mcgt.um6p.ma/uploads/prof/images/644e62fc056e9fca1c1be54d556a9584fda03251.jpg\" alt=\"Badr Missaoui\" class=\"faculty-image\">
  5633.                         </div>
  5634.                         <div class=\"faculty-info\">
  5635.                             <h3 class=\"faculty-name\">Badr Missaoui</h3>
  5636.                             <p class=\"faculty-affiliation\">Moroccan Center for Game Theory</p>
  5637.                             <p class=\"faculty-field\">Mathematics</p>
  5638.                         </div>
  5639.                     </div>
  5640.                     
  5641.                     <!-- Faculty Card 2 -->
  5642.                     <div class=\"faculty-card\">
  5643.                         <div class=\"faculty-image-container\">
  5644.                             <img src=\"https://mcgt.um6p.ma/uploads/prof/images/dd4f9f668fef03e21d47339dd1029ec83121ba7b.png\" alt=\"Bruno Ziliotto\" class=\"faculty-image\">
  5645.                         </div>
  5646.                         <div class=\"faculty-info\">
  5647.                             <h3 class=\"faculty-name\">Bruno Ziliotto</h3>
  5648.                             <p class=\"faculty-affiliation\">Dauphine-PSL</p>
  5649.                             <p class=\"faculty-field\">Mathematics</p>
  5650.                         </div>
  5651.                     </div>
  5652.                     
  5653.                     <!-- Faculty Card 3 -->
  5654.                     <div class=\"faculty-card\">
  5655.                         <div class=\"faculty-image-container\">
  5656.                             <img src=\"https://mcgt.um6p.ma/uploads/prof/images/774ec6c1e5b35332bb1a6cd704b518b8641f901c.jpg\" alt=\"Edith Elkind\" class=\"faculty-image\">
  5657.                         </div>
  5658.                         <div class=\"faculty-info\">
  5659.                             <h3 class=\"faculty-name\">Edith Elkind</h3>
  5660.                             <p class=\"faculty-affiliation\">University of Northwestern</p>
  5661.                             <p class=\"faculty-field\">Computer Science</p>
  5662.                         </div>
  5663.                     </div>
  5664.                     
  5665.                     <!-- Faculty Card 4 -->
  5666.                     <div class=\"faculty-card\">
  5667.                         <div class=\"faculty-image-container\">
  5668.                             <img src=\"https://mcgt.um6p.ma/uploads/prof/images/71c0d7235d2b059f0c005710cc3bdcad43995fa5.png\" alt=\"Eilon Solan\" class=\"faculty-image\">
  5669.                         </div>
  5670.                         <div class=\"faculty-info\">
  5671.                             <h3 class=\"faculty-name\">Eilon Solan</h3>
  5672.                             <p class=\"faculty-affiliation\">TAU</p>
  5673.                             <p class=\"faculty-field\">Mathematics</p>
  5674.                         </div>
  5675.                     </div>
  5676.                     
  5677.                     <!-- Faculty Card 5 -->
  5678.                     <div class=\"faculty-card\">
  5679.                         <div class=\"faculty-image-container\">
  5680.                             <img src=\"https://mcgt.um6p.ma/uploads/prof/images/d627c0a5aa8dfe8a6b5d64dc9b2465750eb7c49b.png\" alt=\"Frédéric Meunier\" class=\"faculty-image\">
  5681.                         </div>
  5682.                         <div class=\"faculty-info\">
  5683.                             <h3 class=\"faculty-name\">Frédéric Meunier</h3>
  5684.                             <p class=\"faculty-affiliation\">Ponts et Chausées</p>
  5685.                             <p class=\"faculty-field\">Operations Research</p>
  5686.                         </div>
  5687.                     </div>
  5688.                     
  5689.                     <!-- Faculty Card 6 -->
  5690.                     <div class=\"faculty-card\">
  5691.                         <div class=\"faculty-image-container\">
  5692.                             <img src=\"https://mcgt.um6p.ma/uploads/prof/images/40b889dbfa13d864bca86007d2f6229aae8abbfc.png\" alt=\"Guillaume Carlier\" class=\"faculty-image\">
  5693.                         </div>
  5694.                         <div class=\"faculty-info\">
  5695.                             <h3 class=\"faculty-name\">Guillaume Carlier</h3>
  5696.                             <p class=\"faculty-affiliation\">Dauphine-PSL</p>
  5697.                             <p class=\"faculty-field\">Mathematics</p>
  5698.                         </div>
  5699.                     </div>
  5700.                     
  5701.                     <!-- Faculty Card 7 -->
  5702.                     <div class=\"faculty-card\">
  5703.                         <div class=\"faculty-image-container\">
  5704.                             <img src=\"https://mcgt.um6p.ma/uploads/prof/images/4059249b4d39daeb54ec4a5af151842c8e7592ef.png\" alt=\"Jason Hartline\" class=\"faculty-image\">
  5705.                         </div>
  5706.                         <div class=\"faculty-info\">
  5707.                             <h3 class=\"faculty-name\">Jason Hartline</h3>
  5708.                             <p class=\"faculty-affiliation\">Northwestern University</p>
  5709.                             <p class=\"faculty-field\">Computer Science</p>
  5710.                         </div>
  5711.                     </div>
  5712.                     
  5713.                     <!-- Faculty Card 8 -->
  5714.                     <div class=\"faculty-card\">
  5715.                         <div class=\"faculty-image-container\">
  5716.                             <img src=\"https://mcgt.um6p.ma/uploads/prof/images/a19822a30fc463e83bc71d56fca90f5cb1d81b16.png\" alt=\"Jérôme Lang\" class=\"faculty-image\">
  5717.                         </div>
  5718.                         <div class=\"faculty-info\">
  5719.                             <h3 class=\"faculty-name\">Jérôme Lang</h3>
  5720.                             <p class=\"faculty-affiliation\">CNRS / Dauphine-PSL</p>
  5721.                             <p class=\"faculty-field\">Computer Science</p>
  5722.                         </div>
  5723.                     </div>
  5724.                     
  5725.                     <!-- Faculty Card 9 -->
  5726.                     <div class=\"faculty-card\">
  5727.                         <div class=\"faculty-image-container\">
  5728.                             <img src=\"https://mcgt.um6p.ma/uploads/prof/images/26d534a2986086115a43387c04629227b16e2a99.png\" alt=\"Johannes Horner\" class=\"faculty-image\">
  5729.                         </div>
  5730.                         <div class=\"faculty-info\">
  5731.                             <h3 class=\"faculty-name\">Johannes Horner</h3>
  5732.                             <p class=\"faculty-affiliation\">CNRS, Toulouse School of Economics</p>
  5733.                             <p class=\"faculty-field\">Economics</p>
  5734.                         </div>
  5735.                     </div>
  5736.                     
  5737.                     <!-- Faculty Card 10 -->
  5738.                     <div class=\"faculty-card\">
  5739.                         <div class=\"faculty-image-container\">
  5740.                             <img src=\"https://mcgt.um6p.ma/uploads/prof/images/527c0c22ecfa841e80879661cd75a2845155f2bc.jpg\" alt=\"José Correa\" class=\"faculty-image\">
  5741.                         </div>
  5742.                         <div class=\"faculty-info\">
  5743.                             <h3 class=\"faculty-name\">José Correa</h3>
  5744.                             <p class=\"faculty-affiliation\">CMM, Santiago Chile</p>
  5745.                             <p class=\"faculty-field\">Operations Research</p>
  5746.                         </div>
  5747.                     </div>
  5748.                     
  5749.                     <!-- Faculty Card 11 -->
  5750.                     <div class=\"faculty-card\">
  5751.                         <div class=\"faculty-image-container\">
  5752.                             <img src=\"https://mcgt.um6p.ma/uploads/prof/images/ad3e6fcb1bf8ddaf0b8010ed59554951996372c2.png\" alt=\"Nizar Touzi\" class=\"faculty-image\">
  5753.                         </div>
  5754.                         <div class=\"faculty-info\">
  5755.                             <h3 class=\"faculty-name\">Nizar Touzi</h3>
  5756.                             <p class=\"faculty-affiliation\">New York University And ABS (UM6P)</p>
  5757.                             <p class=\"faculty-field\">Mathematics</p>
  5758.                         </div>
  5759.                     </div>
  5760.                     
  5761.                     <!-- Faculty Card 12 -->
  5762.                     <div class=\"faculty-card\">
  5763.                         <div class=\"faculty-image-container\">
  5764.                             <img src=\"https://mcgt.um6p.ma/uploads/prof/images/0b1e672365a8cd8eada6fa8e42fb5e7f0e294029.jpg\" alt=\"Olga Gorelkina\" class=\"faculty-image\">
  5765.                         </div>
  5766.                         <div class=\"faculty-info\">
  5767.                             <h3 class=\"faculty-name\">Olga Gorelkina</h3>
  5768.                             <p class=\"faculty-affiliation\">Africa Business School (ABS), UM6P</p>
  5769.                             <p class=\"faculty-field\">Economics</p>
  5770.                         </div>
  5771.                     </div>
  5772.                     
  5773.                     <!-- Faculty Card 13 -->
  5774.                     <div class=\"faculty-card\">
  5775.                         <div class=\"faculty-image-container\">
  5776.                             <img src=\"https://mcgt.um6p.ma/uploads/prof/images/1582d2142c46451bbff76d5dd7e4f58a89fe4d67.jpg\" alt=\"Omar Saadi\" class=\"faculty-image\">
  5777.                         </div>
  5778.                         <div class=\"faculty-info\">
  5779.                             <h3 class=\"faculty-name\">Omar Saadi</h3>
  5780.                             <p class=\"faculty-affiliation\">College of Computing (UM6P)</p>
  5781.                             <p class=\"faculty-field\">Operations Research</p>
  5782.                         </div>
  5783.                     </div>
  5784.                     
  5785.                     <!-- Faculty Card 14 -->
  5786.                     <div class=\"faculty-card\">
  5787.                         <div class=\"faculty-image-container\">
  5788.                             <img src=\"https://mcgt.um6p.ma/uploads/prof/images/6e0a3625839a95da93e89a05e2a747a555b0db9f.jpg\" alt=\"Panayotis Mertikopoulos\" class=\"faculty-image\">
  5789.                         </div>
  5790.                         <div class=\"faculty-info\">
  5791.                             <h3 class=\"faculty-name\">Panayotis Mertikopoulos</h3>
  5792.                             <p class=\"faculty-affiliation\">CNRS, Grenoble</p>
  5793.                             <p class=\"faculty-field\">Computer Science</p>
  5794.                         </div>
  5795.                     </div>
  5796.                     
  5797.                     <!-- Faculty Card 15 -->
  5798.                     <div class=\"faculty-card\">
  5799.                         <div class=\"faculty-image-container\">
  5800.                             <img src=\"https://mcgt.um6p.ma/uploads/prof/images/8bfa1e4bcfe2bc513e37b7ec512654b4994bc06f.jpg\" alt=\"Rida Laraki\" class=\"faculty-image\">
  5801.                         </div>
  5802.                         <div class=\"faculty-info\">
  5803.                             <h3 class=\"faculty-name\">Rida Laraki</h3>
  5804.                             <p class=\"faculty-affiliation\">Director</p>
  5805.                             <p class=\"faculty-field\">Mathematics</p>
  5806.                         </div>
  5807.                     </div>
  5808.                     
  5809.                     <!-- Faculty Card 16 -->
  5810.                     <div class=\"faculty-card\">
  5811.                         <div class=\"faculty-image-container\">
  5812.                             <img src=\"https://mcgt.um6p.ma/uploads/prof/images/86ab55145260511be27f0f2e3e1b1784754be916.png\" alt=\"Sylvain Sorin\" class=\"faculty-image\">
  5813.                         </div>
  5814.                         <div class=\"faculty-info\">
  5815.                             <h3 class=\"faculty-name\">Sylvain Sorin</h3>
  5816.                             <p class=\"faculty-affiliation\">Sorbonne University</p>
  5817.                             <p class=\"faculty-field\">Mathematics</p>
  5818.                         </div>
  5819.                     </div>
  5820.                     
  5821.                     <!-- Faculty Card 17 -->
  5822.                     <div class=\"faculty-card\">
  5823.                         <div class=\"faculty-image-container\">
  5824.                             <img src=\"https://mcgt.um6p.ma/uploads/prof/images/d549fc9449bf3e6237a092cd7e8043b3e4a39c96.png\" alt=\"Tristan Tomala\" class=\"faculty-image\">
  5825.                         </div>
  5826.                         <div class=\"faculty-info\">
  5827.                             <h3 class=\"faculty-name\">Tristan Tomala</h3>
  5828.                             <p class=\"faculty-affiliation\">HEC Paris</p>
  5829.                             <p class=\"faculty-field\">Economics</p>
  5830.                         </div>
  5831.                     </div>
  5832.                     
  5833.                     <!-- Faculty Card 18 -->
  5834.                     <div class=\"faculty-card\">
  5835.                         <div class=\"faculty-image-container\">
  5836.                             <img src=\"https://mcgt.um6p.ma/uploads/prof/images/31a18339ee35677caf1b833e39beb6119b4fad36.jpg\" alt=\"Yann Chevaleyre\" class=\"faculty-image\">
  5837.                         </div>
  5838.                         <div class=\"faculty-info\">
  5839.                             <h3 class=\"faculty-name\">Yann Chevaleyre</h3>
  5840.                             <p class=\"faculty-affiliation\">Dauphine-PSL</p>
  5841.                             <p class=\"faculty-field\">Computer Science</p>
  5842.                         </div>
  5843.                     </div>
  5844.                 </div>
  5845.             </div>
  5846.             
  5847.             <button class=\"faculty-nav next\" aria-label=\"Next faculty\" id=\"nextFacultyBtn\">
  5848.                 <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">
  5849.                     <polyline points=\"9 18 15 12 9 6\"></polyline>
  5850.                 </svg>
  5851.             </button>
  5852.         </div>
  5853.         
  5854.         <div class=\"faculty-dots\" id=\"facultyDots\">
  5855.             <!-- Dots will be generated by JavaScript -->
  5856.         </div>
  5857.     </div>
  5858. </section>
  5860. <style>
  5861.     /* Faculty Carousel Styles */
  5862.     .faculty-container {
  5863.         max-width: 1200px;
  5864.         margin: 0 auto;
  5865.         padding: 0 1.5rem;
  5866.     }
  5867.     
  5868.     .faculty-carousel-wrapper {
  5869.         position: relative;
  5870.         display: flex;
  5871.         align-items: center;
  5872.         margin: 0 auto;
  5873.     }
  5874.     
  5875.     .faculty-carousel-container {
  5876.         width: 100%;
  5877.         overflow: hidden;
  5878.     }
  5879.     
  5880.     .faculty-carousel {
  5881.         display: flex;
  5882.         width: 100%;
  5883.         position: relative;
  5884.         transition: transform 0.5s ease;
  5885.     }
  5886.     
  5887.     .faculty-card {
  5888.         flex: 0 0 auto;
  5889.         padding: 0 0.75rem;
  5890.         transition: all 0.3s ease;
  5891.         box-sizing: border-box; /* Ensure padding is included in width calculation */
  5892.     }
  5893.     
  5894.     .faculty-image-container {
  5895.         position: relative;
  5896.         overflow: hidden;
  5897.         border-radius: 0.5rem 0.5rem 0 0;
  5898.         aspect-ratio: 1/1; /* Fixed aspect ratio for all images */
  5899.         width: 100%;
  5900.         height: 0;
  5901.         padding-bottom: 100%; /* Creates a square container */
  5902.     }
  5903.     
  5904.     .faculty-image {
  5905.         position: absolute;
  5906.         top: 0;
  5907.         left: 0;
  5908.         width: 100%;
  5909.         height: 100%;
  5910.         object-fit: cover; /* Ensures image covers the container without distortion */
  5911.         transition: transform 0.5s ease;
  5912.     }
  5913.     
  5914.     .faculty-card:hover .faculty-image {
  5915.         transform: scale(1.05);
  5916.     }
  5917.     
  5918.     .faculty-info {
  5919.         padding: 1.25rem;
  5920.         background-color: white;
  5921.         border-radius: 0 0 0.5rem 0.5rem;
  5922.         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  5923.         border: 1px solid #e2e8f0;
  5924.         border-top: none;
  5925.         height: 130px; /* Fixed height for info section */
  5926.         display: flex;
  5927.         flex-direction: column;
  5928.     }
  5929.     
  5930.     .faculty-name {
  5931.         font-size: 1.25rem;
  5932.         font-weight: 600;
  5933.         margin-bottom: 0.5rem;
  5934.         color: var(--primary-blue);
  5935.     }
  5936.     
  5937.     .faculty-affiliation {
  5938.         font-size: 0.875rem;
  5939.         color: var(--text-light);
  5940.         margin-bottom: 0.25rem;
  5941.         line-height: 1.4;
  5942.         /* Limit to 2 lines with ellipsis */
  5943.         display: -webkit-box;
  5944.         -webkit-line-clamp: 2;
  5945.         -webkit-box-orient: vertical;
  5946.         overflow: hidden;
  5947.         text-overflow: ellipsis;
  5948.     }
  5949.     
  5950.     .faculty-field {
  5951.         font-size: 0.875rem;
  5952.         color: var(--accent-orange);
  5953.         font-weight: 500;
  5954.         margin-top: auto; /* Push to bottom of container */
  5955.     }
  5956.     
  5957.     .faculty-nav {
  5958.         position: absolute;
  5959.         z-index: 10;
  5960.         width: 3rem;
  5961.         height: 3rem;
  5962.         display: flex;
  5963.         align-items: center;
  5964.         justify-content: center;
  5965.         background-color: white;
  5966.         border-radius: 50%;
  5967.         border: 1px solid #e2e8f0;
  5968.         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  5969.         cursor: pointer;
  5970.         transition: all 0.2s ease;
  5971.     }
  5972.     
  5973.     .faculty-nav:hover {
  5974.         background-color: var(--primary-blue);
  5975.         transform: translateY(-2px);
  5976.         box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1);
  5977.     }
  5978.     
  5979.     .faculty-nav:hover svg {
  5980.         color: white;
  5981.     }
  5982.     
  5983.     .faculty-nav:disabled {
  5984.         opacity: 0.5;
  5985.         cursor: not-allowed;
  5986.         transform: none;
  5987.         box-shadow: none;
  5988.     }
  5989.     
  5990.     .faculty-nav.prev {
  5991.         left: -1.5rem;
  5992.     }
  5993.     
  5994.     .faculty-nav.next {
  5995.         right: -1.5rem;
  5996.     }
  5997.     
  5998.     .faculty-nav svg {
  5999.         width: 1.5rem;
  6000.         height: 1.5rem;
  6001.         color: var(--primary-blue);
  6002.     }
  6003.     
  6004.     .faculty-dots {
  6005.         display: flex;
  6006.         justify-content: center;
  6007.         margin-top: 2rem;
  6008.         gap: 0.5rem;
  6009.     }
  6010.     
  6011.     .faculty-dot {
  6012.         width: 0.5rem;
  6013.         height: 0.5rem;
  6014.         border-radius: 50%;
  6015.         background-color: #cbd5e0;
  6016.         border: none;
  6017.         padding: 0;
  6018.         cursor: pointer;
  6019.         transition: all 0.2s ease;
  6020.     }
  6021.     
  6022.     .faculty-dot:hover {
  6023.         background-color: var(--primary-blue-light);
  6024.     }
  6025.     
  6026.     .faculty-dot.active {
  6027.         background-color: var(--primary-blue);
  6028.         transform: scale(1.2);
  6029.     }
  6030.     
  6031.     /* Responsive adjustments */
  6032.     @media (min-width: 640px) {
  6033.         .faculty-card {
  6034.             width: 50%;
  6035.         }
  6036.         
  6037.         .faculty-nav.prev {
  6038.             left: -1rem;
  6039.         }
  6040.         
  6041.         .faculty-nav.next {
  6042.             right: -1rem;
  6043.         }
  6044.     }
  6045.     
  6046.     @media (min-width: 768px) {
  6047.         .faculty-card {
  6048.             width: 33.333%;
  6049.         }
  6050.     }
  6051.     
  6052.     @media (min-width: 1024px) {
  6053.         .faculty-card {
  6054.             width: 25%;
  6055.         }
  6056.         
  6057.         .faculty-nav.prev {
  6058.             left: -1.5rem;
  6059.         }
  6060.         
  6061.         .faculty-nav.next {
  6062.             right: -1.5rem;
  6063.         }
  6064.     }
  6065.     
  6066.     @media (max-width: 639px) {
  6067.         .faculty-nav {
  6068.             width: 2.5rem;
  6069.             height: 2.5rem;
  6070.         }
  6071.         
  6072.         .faculty-nav.prev {
  6073.             left: -0.75rem;
  6074.         }
  6075.         
  6076.         .faculty-nav.next {
  6077.             right: -0.75rem;
  6078.         }
  6079.         
  6080.         .faculty-info {
  6081.             height: auto;
  6082.             min-height: 130px;
  6083.         }
  6084.     }
  6085. </style>
  6087. <script>
  6088.     document.addEventListener('DOMContentLoaded', function() {
  6089.         // Faculty Carousel
  6090.         const facultyCarousel = document.getElementById('facultyCarousel');
  6091.         const prevFacultyBtn = document.getElementById('prevFacultyBtn');
  6092.         const nextFacultyBtn = document.getElementById('nextFacultyBtn');
  6093.         const facultyDotsContainer = document.getElementById('facultyDots');
  6094.         
  6095.         // Get all faculty cards
  6096.         const facultyCards = facultyCarousel.querySelectorAll('.faculty-card');
  6097.         const totalFacultyCards = facultyCards.length;
  6098.         
  6099.         // Responsive settings
  6100.         let cardsToShow = 4;
  6101.         let currentFacultyIndex = 0;
  6102.         
  6103.         // Set initial card widths
  6104.         function setFacultyCardWidths() {
  6105.             facultyCards.forEach(card => {
  6106.                 card.style.width = `\${100 / cardsToShow}%`;
  6107.             });
  6108.         }
  6109.         
  6110.         // Update cards to show based on screen width
  6111.         function updateFacultyCardsToShow() {
  6112.             const oldCardsToShow = cardsToShow;
  6113.             
  6114.             if (window.innerWidth < 640) {
  6115.                 cardsToShow = 1;
  6116.             } else if (window.innerWidth < 768) {
  6117.                 cardsToShow = 2;
  6118.             } else if (window.innerWidth < 1024) {
  6119.                 cardsToShow = 3;
  6120.             } else {
  6121.                 cardsToShow = 4;
  6122.             }
  6123.             
  6124.             // Only update if the number of cards to show has changed
  6125.             if (oldCardsToShow !== cardsToShow) {
  6126.                 setFacultyCardWidths();
  6127.                 
  6128.                 // Adjust current index to maintain position
  6129.                 if (currentFacultyIndex > 0) {
  6130.                     currentFacultyIndex = Math.min(currentFacultyIndex, totalFacultyCards - cardsToShow);
  6131.                 }
  6132.                 
  6133.                 updateFacultyCarouselPosition();
  6134.                 createFacultyDots();
  6135.                 updateFacultyButtonStates();
  6136.             }
  6137.         }
  6138.         
  6139.         // Create navigation dots
  6140.         function createFacultyDots() {
  6141.             facultyDotsContainer.innerHTML = '';
  6142.             const totalSlides = Math.ceil(totalFacultyCards / cardsToShow);
  6143.             
  6144.             for (let i = 0; i < totalSlides; i++) {
  6145.                 const dot = document.createElement('button');
  6146.                 dot.classList.add('faculty-dot');
  6147.                 if (Math.floor(currentFacultyIndex / cardsToShow) === i) {
  6148.                     dot.classList.add('active');
  6149.                 }
  6150.                 dot.setAttribute('aria-label', `Go to faculty slide \${i + 1}`);
  6151.                 dot.addEventListener('click', () => goToFacultySlide(i * cardsToShow));
  6152.                 facultyDotsContainer.appendChild(dot);
  6153.             }
  6154.         }
  6155.         
  6156.         // Update active dot
  6157.         function updateFacultyDots() {
  6158.             const dots = facultyDotsContainer.querySelectorAll('.faculty-dot');
  6159.             const activeIndex = Math.floor(currentFacultyIndex / cardsToShow);
  6160.             
  6161.             dots.forEach((dot, index) => {
  6162.                 if (index === activeIndex) {
  6163.                     dot.classList.add('active');
  6164.                 } else {
  6165.                     dot.classList.remove('active');
  6166.                 }
  6167.             });
  6168.         }
  6169.         
  6170.         // Update carousel position
  6171.         function updateFacultyCarouselPosition() {
  6172.             const cardWidth = 100 / cardsToShow;
  6173.             facultyCarousel.style.transform = `translateX(-\${currentFacultyIndex * cardWidth}%)`;
  6174.             updateFacultyDots();
  6175.         }
  6176.         
  6177.         // Go to specific slide
  6178.         function goToFacultySlide(index) {
  6179.             const maxIndex = totalFacultyCards - cardsToShow;
  6180.             currentFacultyIndex = Math.min(index, maxIndex);
  6181.             currentFacultyIndex = Math.max(currentFacultyIndex, 0);
  6182.             updateFacultyCarouselPosition();
  6183.             updateFacultyButtonStates();
  6184.         }
  6185.         
  6186.         // Go to previous slide
  6187.         function goToPreviousFaculty() {
  6188.             goToFacultySlide(currentFacultyIndex - cardsToShow);
  6189.         }
  6190.         
  6191.         // Go to next slide
  6192.         function goToNextFaculty() {
  6193.             goToFacultySlide(currentFacultyIndex + cardsToShow);
  6194.         }
  6195.         
  6196.         // Update button states (enabled/disabled)
  6197.         function updateFacultyButtonStates() {
  6198.             const maxIndex = totalFacultyCards - cardsToShow;
  6199.             
  6200.             if (currentFacultyIndex <= 0) {
  6201.                 prevFacultyBtn.setAttribute('disabled', 'true');
  6202.                 prevFacultyBtn.style.opacity = '0.5';
  6203.                 prevFacultyBtn.style.cursor = 'not-allowed';
  6204.             } else {
  6205.                 prevFacultyBtn.removeAttribute('disabled');
  6206.                 prevFacultyBtn.style.opacity = '1';
  6207.                 prevFacultyBtn.style.cursor = 'pointer';
  6208.             }
  6209.             
  6210.             if (currentFacultyIndex >= maxIndex) {
  6211.                 nextFacultyBtn.setAttribute('disabled', 'true');
  6212.                 nextFacultyBtn.style.opacity = '0.5';
  6213.                 nextFacultyBtn.style.cursor = 'not-allowed';
  6214.             } else {
  6215.                 nextFacultyBtn.removeAttribute('disabled');
  6216.                 nextFacultyBtn.style.opacity = '1';
  6217.                 nextFacultyBtn.style.cursor = 'pointer';
  6218.             }
  6219.         }
  6220.         
  6221.         // Event listeners
  6222.         prevFacultyBtn.addEventListener('click', goToPreviousFaculty);
  6223.         nextFacultyBtn.addEventListener('click', goToNextFaculty);
  6224.         window.addEventListener('resize', updateFacultyCardsToShow);
  6225.         
  6226.         // Initialize carousel
  6227.         setFacultyCardWidths();
  6228.         createFacultyDots();
  6229.         updateFacultyButtonStates();
  6230.         
  6231.         // Auto-play functionality
  6232.         let facultyAutoplayInterval;
  6233.         const autoplayDelay = 5000; // 5 seconds
  6234.         
  6235.         function startFacultyAutoplay() {
  6236.             stopFacultyAutoplay(); // Clear any existing interval
  6237.             facultyAutoplayInterval = setInterval(() => {
  6238.                 const maxIndex = totalFacultyCards - cardsToShow;
  6239.                 if (currentFacultyIndex >= maxIndex) {
  6240.                     goToFacultySlide(0); // Loop back to the beginning
  6241.                 } else {
  6242.                     goToNextFaculty();
  6243.                 }
  6244.             }, autoplayDelay);
  6245.         }
  6246.         
  6247.         function stopFacultyAutoplay() {
  6248.             if (facultyAutoplayInterval) {
  6249.                 clearInterval(facultyAutoplayInterval);
  6250.             }
  6251.         }
  6252.         
  6253.         // Start autoplay
  6254.         startFacultyAutoplay();
  6255.         
  6256.         // Pause autoplay on hover or focus
  6257.         facultyCarousel.addEventListener('mouseenter', stopFacultyAutoplay);
  6258.         facultyCarousel.addEventListener('mouseleave', startFacultyAutoplay);
  6259.         facultyCarousel.addEventListener('focusin', stopFacultyAutoplay);
  6260.         facultyCarousel.addEventListener('focusout', startFacultyAutoplay);
  6261.         
  6262.         // Touch swipe support
  6263.         let touchStartX = 0;
  6264.         let touchEndX = 0;
  6265.         
  6266.         facultyCarousel.addEventListener('touchstart', e => {
  6267.             touchStartX = e.changedTouches[0].screenX;
  6268.             stopFacultyAutoplay();
  6269.         }, { passive: true });
  6270.         
  6271.         facultyCarousel.addEventListener('touchend', e => {
  6272.             touchEndX = e.changedTouches[0].screenX;
  6273.             handleFacultySwipe();
  6274.             startFacultyAutoplay();
  6275.         }, { passive: true });
  6276.         
  6277.         function handleFacultySwipe() {
  6278.             const swipeThreshold = 50;
  6279.             if (touchEndX < touchStartX - swipeThreshold) {
  6280.                 // Swipe left, go next
  6281.                 goToNextFaculty();
  6282.             } else if (touchEndX > touchStartX + swipeThreshold) {
  6283.                 // Swipe right, go previous
  6284.                 goToPreviousFaculty();
  6285.             }
  6286.         }
  6287.     });
  6288. </script>
  6289.             <!-- Call to Action Section -->
  6290.             <section id=\"apply\" class=\"cta-section\">
  6291.                 <div class=\"cta-circle cta-circle-1\"></div>
  6292.                 <div class=\"cta-circle cta-circle-2\"></div>
  6293.                 <div class=\"cta-circle cta-circle-3\"></div>
  6294.                 
  6295.                 <div class=\"cta-container\">
  6296.                     <div class=\"cta-content\">
  6297.                         <h2 class=\"cta-title\">APPLY <span>NOW</span></h2>
  6298.                         <p class=\"cta-text\">Join our prestigious Master 2 program and learn from world-renowned experts in game theory, mathematics, economics, and computer science.</p>
  6299.                         <a href=\"https://forms.gle/eDCE96KyhiNyk2Nw8\"  target=\"_blank\"  class=\"cta-button\">Start Your Application <span>→</span></a>
  6300.                     </div>
  6301.                     
  6302.                     <div class=\"cta-contact\">
  6303.                         <div class=\"contact-content\">
  6304.                             <div class=\"contact-icon\">
  6305.                                 <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">
  6306.                                     <path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"></path>
  6307.                                     <polyline points=\"22,6 12,13 2,6\"></polyline>
  6308.                                 </svg>
  6309.                             </div>
  6310.                             <h3 class=\"contact-title\">Have Questions?</h3>
  6311.                             <p class=\"contact-text\">Contact our admissions team for more information about the program.</p>
  6312.                             <a href=\"mailto:[email protected]\" class=\"contact-button\">Contact Us <span>→</span></a>
  6313.                         </div>
  6314.                     </div>
  6315.                 </div>
  6316.             </section>
  6317.         </div>
  6318.     {% endblock %}
  6320.     {% block footer %}
  6321.         {{ render(path('_footer')) }}
  6322.     {% endblock %}
  6324.     <script type=\"text/javascript\" src=\"{{ asset('assets/js/main.js')}}\"></script>
  6325.     <script>
  6326.         function changeMainImage(thumbnail, title, description) {
  6327.             // Change main image
  6328.             const mainImage = document.getElementById('mainImage');
  6329.             mainImage.src = thumbnail.src;
  6330.             
  6331.             // Change title and description
  6332.             const titleElement = document.getElementById('imageTitle');
  6333.             const descriptionElement = document.getElementById('imageDescription');
  6334.             
  6335.             titleElement.textContent = title;
  6336.             descriptionElement.textContent = description;
  6337.             
  6338.             // Update active thumbnail
  6339.             const thumbnails = document.querySelectorAll('.thumbnail');
  6340.             thumbnails.forEach(thumb => {
  6341.                 thumb.classList.remove('active');
  6342.             });
  6343.             thumbnail.classList.add('active');
  6344.             
  6345.             // Add animation to main image
  6346.             mainImage.style.transform = 'scale(1.05)';
  6347.             setTimeout(() => {
  6348.                 mainImage.style.transform = 'scale(1)';
  6349.             }, 500);
  6350.         }
  6351.         
  6352.         // Smooth scroll for anchor links
  6353.         document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {
  6354.             anchor.addEventListener('click', function(e) {
  6355.                 e.preventDefault();
  6356.                 
  6357.                 const target = document.querySelector(this.getAttribute('href'));
  6358.                 if (target) {
  6359.                     window.scrollTo({
  6360.                         top: target.offsetTop - 80,
  6361.                         behavior: 'smooth'
  6362.                     });
  6363.                 }
  6364.             });
  6365.         });
  6366.     </script>
  6367. </body>
  6368. </html>", "Frontend/new_page.html.twig", "/tmp/8ddc541746824af/templates/Frontend/new_page.html.twig");
  6369.     }
  6370. }