templates/Frontend/new_page.html.twig line 1628

Open in your IDE?
  1. {% set selected_lang = app.request.getLocale() %}
  2. <!DOCTYPE html>  
  3. <html lang="{{selected_lang}}" dir="ltr"> 
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">
  8.     <meta name="theme-color" content="#263371">
  9.     <meta name="msapplication-navbutton-color" content="#263371">
  10.     <meta name="apple-mobile-web-app-status-bar-style" content="#263371"> 
  11.     <meta name="language" content="{{selected_lang}}"/>
  12.     <meta name="robots" content="index, follow, all"/>
  13.     <meta name="googlebot" content="index, follow"/>
  14.     <meta name="copyright" content="elevenmedia"/> 
  15.     <link rel="shortcut icon" href="{{ asset('favicon.ico') }}" type="image/x-icon">
  16.     <link rel="preconnect" href="https://fonts.googleapis.com">
  17.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  18.     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
  20.     {% block seoheader %}
  21.         {% include 'Frontend/Render/head/_seoheader.html.twig' %}
  22.     {% endblock %}
  24.     {% block stylesheets %}
  25.         {% include 'Frontend/Render/head/_stylesheets.html.twig'%}
  26.     {% endblock %}
  28.     {% block javascripts %}
  29.         {% include 'Frontend/Render/head/_javascripts.html.twig'%}
  30.     {% endblock %}
  32.     <style>
  33.         :root {
  34.             --primary-blue: #263371;
  35.             --primary-blue-light: #3a4a8c;
  36.             --primary-blue-dark: #1a2550;
  37.             --accent-orange: #d84c2b;
  38.             --accent-orange-light: #e66a4d;
  39.             --accent-orange-dark: #b83e20;
  40.             --text-dark: #1e293b;
  41.             --text-light: #64748b;
  42.             --background: #f9f9f9;
  43.             --white: #ffffff;
  44.             --card-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  45.             --transition: all 0.3s ease;
  46.             --font-size-base: 1rem;
  47.             --font-size-sm: 0.875rem;
  48.             --font-size-lg: 1.125rem;
  49.             --font-size-xl: 1.25rem;
  50.             --font-size-2xl: 1.5rem;
  51.             --font-size-3xl: 1.875rem;
  52.             --font-size-4xl: 2.25rem;
  53.             --gradient-primary: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
  54.             --gradient-accent: linear-gradient(135deg, var(--accent-orange) 0%, var(--accent-orange-dark) 100%);
  55.         }
  57.         body {
  58.             font-family: 'Poppins', sans-serif;
  59.             color: var(--text-dark);
  60.             line-height: 1.6;
  61.             background-color: var(--background);
  62.             margin: 0;
  63.             padding: 0;
  64.             font-size: var(--font-size-base);
  65.         }
  67.         .page-container {
  68.             max-width: 1200px;
  69.             margin: 0 auto;
  70.             margin-top: 90px;
  71.             padding: 0 20px;
  72.         }
  74.         /* Introduction Section */
  75.         .introduction-section {
  76.             background-color: var(--white);
  77.             border-radius: 20px;
  78.             padding: 40px;
  79.             margin-bottom: 50px;
  80.             box-shadow: var(--card-shadow);
  81.             position: relative;
  82.             overflow: hidden;
  83.         }
  85.         .introduction-section::before {
  86.             content: '';
  87.             position: absolute;
  88.             top: 0;
  89.             left: 0;
  90.             width: 100%;
  91.             height: 100%;
  92.             background: radial-gradient(circle at top right, rgba(216, 76, 43, 0.03), transparent 70%);
  93.             z-index: 0;
  94.         }
  96.         .introduction-title {
  97.             color: var(--primary-blue);
  98.             font-size: var(--font-size-2xl);
  99.             font-weight: 700;
  100.             margin-bottom: 25px;
  101.             position: relative;
  102.             display: inline-block;
  103.         }
  105.         .introduction-title::after {
  106.             content: '';
  107.             position: absolute;
  108.             bottom: -8px;
  109.             left: 0;
  110.             width: 60px;
  111.             height: 3px;
  112.             background: var(--gradient-accent);
  113.             border-radius: 2px;
  114.         }
  116.         .introduction-content {
  117.             position: relative;
  118.             z-index: 1;
  119.         }
  121.         .introduction-text {
  122.             color: var(--text-dark);
  123.             margin-bottom: 20px;
  124.             line-height: 1.8;
  125.             font-size: var(--font-size-base);
  126.         }
  128.         .skills-list {
  129.             margin: 25px 0;
  130.             padding-left: 0;
  131.             list-style-type: none;
  132.         }
  134.         .skills-list li {
  135.             position: relative;
  136.             padding-left: 30px;
  137.             margin-bottom: 15px;
  138.             line-height: 1.6;
  139.         }
  141.         .skills-list li::before {
  142.             content: '';
  143.             position: absolute;
  144.             left: 0;
  145.             top: 8px;
  146.             width: 8px;
  147.             height: 8px;
  148.             border-radius: 50%;
  149.             background-color: var(--accent-orange);
  150.         }
  152.         .financial-info {
  153.             background-color: rgba(38, 51, 113, 0.05);
  154.             padding: 20px;
  155.             border-radius: 10px;
  156.             margin-top: 25px;
  157.         }
  159.         .financial-info p {
  160.             margin: 10px 0;
  161.         }
  163.         /* Logo Header Section - IMPROVED */
  164.         .logo-header {
  165.             position: relative;
  166.             display: flex;
  167.             align-items: center;
  168.             justify-content: center;
  169.             padding: 35px 0;
  170.             background: var(--gradient-primary);
  171.             border-bottom: 1px solid rgba(255,255,255,0.1);
  172.             box-shadow: 0 4px 15px rgba(0,0,0,0.15);
  173.             z-index: 10;
  174.             overflow: hidden;
  175.         }
  177.         .logo-header::before {
  178.             content: '';
  179.             position: absolute;
  180.             top: -50%;
  181.             left: -50%;
  182.             width: 200%;
  183.             height: 200%;
  184.             background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
  185.             animation: pulse-bg 15s infinite alternate;
  186.         }
  188.         @keyframes pulse-bg {
  189.             0% { transform: scale(1); opacity: 0.5; }
  190.             100% { transform: scale(1.2); opacity: 0.8; }
  191.         }
  193.         .logo-container {
  194.             display: flex;
  195.             align-items: center;
  196.             gap: 30px;
  197.             position: relative;
  198.             z-index: 2;
  199.         }
  201.         .main-logo {
  202.             width: 250px;
  203.             height: auto;
  204.             transition: var(--transition);
  205.             filter: brightness(0) invert(1);
  206.             animation: logoGlow 3s infinite alternate;
  207.         }
  209.         @keyframes logoGlow {
  210.             from {
  211.                 filter: brightness(0) invert(1);
  212.             }
  213.             to {
  214.                 filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(255, 255, 255, 0.7));
  215.             }
  216.         }
  218.         .logo-divider {
  219.             height: 60px;
  220.             width: 2px;
  221.             background-color: rgba(255,255,255,0.3);
  222.         }
  224.         .program-title {
  225.             font-size: var(--font-size-2xl);
  226.             font-weight: 700;
  227.             color: var(--white);
  228.             margin: 0;
  229.             text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  230.         }
  232.         .program-subtitle {
  233.             font-size: var(--font-size-base);
  234.             color: rgba(255, 255, 255, 0.9);
  235.             margin: 0;
  236.             text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  237.         }
  239.         /* Hero Gallery Section - IMPROVED */
  240.         .hero-gallery {
  241.             position: relative;
  242.             overflow: hidden;
  243.             border-radius: 20px;
  244.             box-shadow: 0 15px 30px rgba(0,0,0,0.15);
  245.             margin-bottom: 50px;
  246.         }
  248.         .main-image-container {
  249.             height: 500px;
  250.             overflow: hidden;
  251.             position: relative;
  252.         }
  254.         .main-image {
  255.             width: 100%;
  256.             height: 100%;
  257.             object-fit: cover;
  258.             transition: transform 0.7s ease;
  259.         }
  261.         .image-overlay {
  262.             position: absolute;
  263.             top: 0;
  264.             left: 0;
  265.             right: 0;
  266.             background: linear-gradient(to bottom, rgba(38, 51, 113, 0.85), rgba(38, 51, 113, 0.5), transparent);
  267.             padding: 40px;
  268.             width: 100%;
  269.             color: var(--white);
  270.             height: 100%;
  271.             display: flex;
  272.             flex-direction: column;
  273.             justify-content: flex-start;
  274.             box-sizing: border-box;
  275.         }
  277.         .overlay-title {
  278.             margin: 0 0 15px 0;
  279.             font-size: var(--font-size-4xl);
  280.             font-weight: 800;
  281.             text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  282.             animation: fadeInUp 0.8s ease;
  283.             position: relative;
  284.             display: inline-block;
  285.         }
  287.         .overlay-title::after {
  288.             content: '';
  289.             position: absolute;
  290.             bottom: -5px;
  291.             left: 0;
  292.             width: 80px;
  293.             height: 3px;
  294.             background-color: var(--accent-orange);
  295.             border-radius: 3px;
  296.         }
  298.         .overlay-subtitle {
  299.             margin: 0;
  300.             font-size: var(--font-size-xl);
  301.             max-width: 600px;
  302.             text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  303.             animation: fadeInUp 1s ease;
  304.             font-weight: 300;
  305.         }
  307.         .overlay-cta {
  308.             margin-top: 30px;
  309.             display: inline-block;
  310.             background: var(--gradient-accent);
  311.             color: var(--white);
  312.             font-size: var(--font-size-lg);
  313.             font-weight: 600;
  314.             padding: 14px 35px;
  315.             border-radius: 50px;
  316.             text-decoration: none;
  317.             transition: var(--transition);
  318.             box-shadow: 0 4px 15px rgba(216, 76, 43, 0.4);
  319.             align-self: flex-start;
  320.             animation: fadeInUp 1.2s ease;
  321.             position: relative;
  322.             overflow: hidden;
  323.             z-index: 1;
  324.         }
  326.         .overlay-cta::before {
  327.             content: '';
  328.             position: absolute;
  329.             top: 0;
  330.             left: -100%;
  331.             width: 100%;
  332.             height: 100%;
  333.             background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  334.             transition: 0.5s;
  335.             z-index: -1;
  336.         }
  338.         .overlay-cta:hover::before {
  339.             left: 100%;
  340.         }
  342.         .overlay-cta:hover {
  343.             transform: translateY(-3px) scale(1.05);
  344.             box-shadow: 0 8px 25px rgba(216, 76, 43, 0.5);
  345.             color: var(--white);
  346.         }
  348.         @keyframes fadeInUp {
  349.             from {
  350.                 opacity: 0;
  351.                 transform: translateY(20px);
  352.             }
  353.             to {
  354.                 opacity: 1;
  355.                 transform: translateY(0);
  356.             }
  357.         }
  359.         .thumbnail-gallery {
  360.             display: flex;
  361.             overflow-x: auto;
  362.             padding: 20px;
  363.             background-color: var(--white);
  364.             gap: 15px;
  365.             scrollbar-width: thin;
  366.             scrollbar-color: var(--accent-orange) var(--background);
  367.             border-radius: 0 0 20px 20px;
  368.         }
  370.         .thumbnail-gallery::-webkit-scrollbar {
  371.             height: 6px;
  372.         }
  374.         .thumbnail-gallery::-webkit-scrollbar-track {
  375.             background: var(--background);
  376.             border-radius: 3px;
  377.         }
  379.         .thumbnail-gallery::-webkit-scrollbar-thumb {
  380.             background-color: var(--accent-orange);
  381.             border-radius: 20px;
  382.         }
  384.         .thumbnail {
  385.             width: 130px;
  386.             height: 85px;
  387.             object-fit: cover;
  388.             border-radius: 10px;
  389.             cursor: pointer;
  390.             border: 3px solid transparent;
  391.             flex-shrink: 0;
  392.             transition: var(--transition);
  393.             box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  394.             position: relative;
  395.             overflow: hidden;
  396.         }
  398.         .thumbnail::after {
  399.             content: '';
  400.             position: absolute;
  401.             top: 0;
  402.             left: 0;
  403.             width: 100%;
  404.             height: 100%;
  405.             background: rgba(216, 76, 43, 0);
  406.             transition: var(--transition);
  407.         }
  409.         .thumbnail.active {
  410.             border: 3px solid var(--accent-orange);
  411.             transform: scale(1.05);
  412.         }
  414.         .thumbnail.active::after {
  415.             background: rgba(216, 76, 43, 0.1);
  416.         }
  418.         .thumbnail:hover {
  419.             transform: scale(1.05);
  420.             box-shadow: 0 6px 12px rgba(0,0,0,0.15);
  421.             border-color: var(--accent-orange-light);
  422.         }
  424.         .thumbnail:hover::after {
  425.             background: rgba(216, 76, 43, 0.1);
  426.         }
  428.         /* Section Styles - IMPROVED */
  429.         .section {
  430.             padding: 50px 0;
  431.         }
  433.         .section-header {
  434.             text-align: center;
  435.             margin-bottom: 40px;
  436.             position: relative;
  437.         }
  439.         .section-title {
  440.             color: var(--primary-blue);
  441.             font-size: var(--font-size-3xl);
  442.             font-weight: 800;
  443.             margin-bottom: 15px;
  444.             position: relative;
  445.             display: inline-block;
  446.         }
  448.         .section-title::after {
  449.             content: '';
  450.             position: absolute;
  451.             bottom: -12px;
  452.             left: 50%;
  453.             transform: translateX(-50%);
  454.             width: 80px;
  455.             height: 4px;
  456.             background: var(--gradient-accent);
  457.             border-radius: 2px;
  458.         }
  460.         .section-subtitle {
  461.             color: var(--text-light);
  462.             max-width: 800px;
  463.             margin: 25px auto 0;
  464.             font-size: var(--font-size-lg);
  465.             line-height: 1.7;
  466.         }
  468.         /* Program Cards - IMPROVED */
  469.         .program-cards {
  470.             display: flex;
  471.             flex-wrap: wrap;
  472.             gap: 30px;
  473.             justify-content: center;
  474.             margin-bottom: 50px;
  475.         }
  477.         .program-card {
  478.             flex: 1;
  479.             min-width: 300px;
  480.             max-width: 380px;
  481.             background: var(--white);
  482.             padding: 35px;
  483.             border-radius: 20px;
  484.             box-shadow: var(--card-shadow);
  485.             transition: var(--transition);
  486.             position: relative;
  487.             overflow: hidden;
  488.             z-index: 1;
  489.         }
  491.         .program-card::before {
  492.             content: '';
  493.             position: absolute;
  494.             top: 0;
  495.             left: 0;
  496.             width: 100%;
  497.             height: 5px;
  498.             background: var(--gradient-accent);
  499.             transition: var(--transition);
  500.             z-index: -1;
  501.         }
  503.         .program-card::after {
  504.             content: '';
  505.             position: absolute;
  506.             top: 0;
  507.             left: 0;
  508.             width: 100%;
  509.             height: 0;
  510.             background: linear-gradient(180deg, rgba(216, 76, 43, 0.05), transparent);
  511.             transition: var(--transition);
  512.             z-index: -1;
  513.         }
  515.         .program-card:hover {
  516.             transform: translateY(-10px);
  517.             box-shadow: 0 20px 40px rgba(0,0,0,0.1);
  518.         }
  520.         .program-card:hover::before {
  521.             height: 8px;
  522.         }
  524.         .program-card:hover::after {
  525.             height: 100%;
  526.         }
  528.         .program-card-icon {
  529.             width: 70px;
  530.             height: 70px;
  531.             border-radius: 50%;
  532.             display: flex;
  533.             justify-content: center;
  534.             align-items: center;
  535.             margin-bottom: 25px;
  536.             transition: var(--transition);
  537.             background: rgba(216, 76, 43, 0.1);
  538.         }
  540.         .program-card:hover .program-card-icon {
  541.             transform: scale(1.1) rotate(5deg);
  542.             background: rgba(216, 76, 43, 0.15);
  543.         }
  545.         .program-card-icon svg {
  546.             color: var(--accent-orange);
  547.             stroke: var(--accent-orange);
  548.         }
  550.         .program-card-title {
  551.             color: var(--primary-blue);
  552.             font-size: var(--font-size-xl);
  553.             margin: 0 0 20px 0;
  554.             font-weight: 700;
  555.         }
  557.         .program-card-text {
  558.             color: var(--text-light);
  559.             margin-bottom: 25px;
  560.             line-height: 1.7;
  561.             font-size: var(--font-size-base);
  562.         }
  564.         .program-card-feature {
  565.             display: flex;
  566.             align-items: center;
  567.             margin-bottom: 12px;
  568.         }
  570.         .program-card-feature svg {
  571.             margin-right: 12px;
  572.             flex-shrink: 0;
  573.             color: var(--accent-orange);
  574.             stroke: var(--accent-orange);
  575.         }
  577.         .program-card-feature span {
  578.             color: var(--text-light);
  579.             font-size: var(--font-size-base);
  580.         }
  582.         .program-card-cta {
  583.             background: var(--gradient-primary);
  584.             color: var(--white);
  585.             box-shadow: 0 10px 30px rgba(38, 51, 113, 0.3);
  586.         }
  588.         .program-card-cta:hover {
  589.             box-shadow: 0 20px 40px rgba(38, 51, 113, 0.4);
  590.         }
  592.         .program-card-cta .program-card-title,
  593.         .program-card-cta .program-card-text,
  594.         .program-card-cta .program-card-feature span {
  595.             color: var(--white);
  596.         }
  598.         .program-card-cta .program-card-text {
  599.             opacity: 0.9;
  600.         }
  602.         .program-card-cta .program-card-feature span {
  603.             opacity: 0.9;
  604.         }
  606.         .program-card-cta .program-card-icon {
  607.             background-color: rgba(255, 255, 255, 0.2);
  608.         }
  610.         .program-card-cta .program-card-icon svg {
  611.             color: var(--white);
  612.             stroke: var(--white);
  613.         }
  615.         .program-card-cta::after {
  616.             background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent);
  617.         }
  619.         .program-card-button {
  620.             display: inline-block;
  621.             background: var(--gradient-accent);
  622.             color: var(--white);
  623.             padding: 14px 30px;
  624.             text-decoration: none;
  625.             border-radius: 50px;
  626.             font-weight: 600;
  627.             margin-top: 25px;
  628.             transition: var(--transition);
  629.             box-shadow: 0 5px 15px rgba(216, 76, 43, 0.3);
  630.             position: relative;
  631.             overflow: hidden;
  632.             font-size: var(--font-size-base);
  633.         }
  635.         .program-card-button::before {
  636.             content: '';
  637.             position: absolute;
  638.             top: 0;
  639.             left: -100%;
  640.             width: 100%;
  641.             height: 100%;
  642.             background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  643.             transition: 0.5s;
  644.         }
  646.         .program-card-button:hover::before {
  647.             left: 100%;
  648.         }
  650.         .program-card-button:hover {
  651.             transform: translateY(-3px) scale(1.05);
  652.             box-shadow: 0 8px 20px rgba(216, 76, 43, 0.4);
  653.             color: var(--white);
  654.         }
  656.         /* Benefits List - IMPROVED */
  657.         .benefits-list {
  658.             color: var(--text-light);
  659.             padding-left: 5px;
  660.             list-style-type: none;
  661.         }
  663.         .benefits-list li {
  664.             margin-bottom: 15px;
  665.             display: flex;
  666.             align-items: flex-start;
  667.             padding-bottom: 15px;
  668.             border-bottom: 1px dashed rgba(216, 76, 43, 0.2);
  669.             font-size: var(--font-size-base);
  670.             transition: var(--transition);
  671.         }
  673.         .benefits-list li:hover {
  674.             transform: translateX(5px);
  675.         }
  677.         .benefits-list li:last-child {
  678.             border-bottom: none;
  679.             padding-bottom: 0;
  680.         }
  682.         .benefits-list li span {
  683.             color: var(--accent-orange);
  684.             margin-right: 12px;
  685.             font-weight: bold;
  686.             font-size: var(--font-size-lg);
  687.         }
  689.         /* Program Overview Section - IMPROVED */
  690.         .overview-container {
  691.             padding: 50px;
  692.             background-color: var(--white);
  693.             border-radius: 20px;
  694.             box-shadow: var(--card-shadow);
  695.             margin-bottom: 60px;
  696.             position: relative;
  697.             overflow: hidden;
  698.         }
  700.         .overview-container::before {
  701.             content: '';
  702.             position: absolute;
  703.             top: 0;
  704.             left: 0;
  705.             width: 100%;
  706.             height: 100%;
  707.             background: radial-gradient(circle at top right, rgba(216, 76, 43, 0.05), transparent 70%);
  708.             z-index: 0;
  709.         }
  711.         .overview-cards {
  712.             display: flex;
  713.             flex-wrap: wrap;
  714.             gap: 30px;
  715.             margin-top: 40px;
  716.             position: relative;
  717.             z-index: 1;
  718.         }
  720.         .overview-card {
  721.             flex: 1;
  722.             min-width: 300px;
  723.             background-color: var(--background);
  724.             padding: 30px;
  725.             border-radius: 15px;
  726.             position: relative;
  727.             transition: var(--transition);
  728.             overflow: hidden;
  729.             z-index: 1;
  730.         }
  732.         .overview-card::after {
  733.             content: '';
  734.             position: absolute;
  735.             bottom: -100%;
  736.             right: -100%;
  737.             width: 200%;
  738.             height: 200%;
  739.             background: radial-gradient(circle, rgba(216, 76, 43, 0.05), transparent 70%);
  740.             transition: var(--transition);
  741.             z-index: -1;
  742.         }
  744.         .overview-card:hover::after {
  745.             bottom: -50%;
  746.             right: -50%;
  747.         }
  749.         .overview-card:hover {
  750.             transform: translateY(-5px);
  751.             box-shadow: 0 15px 30px rgba(0,0,0,0.1);
  752.         }
  754.         .overview-card-primary {
  755.             border-top: 5px solid var(--primary-blue);
  756.         }
  758.         .overview-card-accent {
  759.             border-top: 5px solid var(--accent-orange);
  760.         }
  762.         .overview-card-title {
  763.             color: var(--primary-blue);
  764.             font-size: var(--font-size-xl);
  765.             margin-top: 0;
  766.             margin-bottom: 20px;
  767.             display: flex;
  768.             align-items: center;
  769.             gap: 12px;
  770.             font-weight: 700;
  771.         }
  773.         .overview-card-title svg {
  774.             color: var(--accent-orange);
  775.             stroke: var(--accent-orange);
  776.         }
  778.         .overview-card-period {
  779.             color: var(--text-light);
  780.             margin-bottom: 20px;
  781.             display: inline-block;
  782.             padding: 6px 15px;
  783.             background-color: rgba(216, 76, 43, 0.1);
  784.             border-radius: 30px;
  785.             font-size: var(--font-size-sm);
  786.         }
  788.         .overview-card-list {
  789.             color: var(--text-dark);
  790.             padding-left: 5px;
  791.             list-style-type: none;
  792.         }
  794.         .overview-card-list li {
  795.             margin-bottom: 14px;
  796.             padding-left: 25px;
  797.             position: relative;
  798.             font-size: var(--font-size-base);
  799.             transition: var(--transition);
  800.         }
  802.         .overview-card-list li:hover {
  803.             transform: translateX(5px);
  804.         }
  806.         .overview-card-list li::before {
  807.             content: '';
  808.             position: absolute;
  809.             left: 0;
  810.             top: 10px;
  811.             width: 8px;
  812.             height: 8px;
  813.             border-radius: 50%;
  814.             background-color: var(--accent-orange);
  815.         }
  817.         .overview-card-content {
  818.             background-color: var(--white);
  819.             padding: 25px;
  820.             border-radius: 12px;
  821.             margin-top: 25px;
  822.             box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  823.         }
  825.         .overview-card-content p {
  826.             color: var(--text-dark);
  827.             margin: 0;
  828.             line-height: 1.7;
  829.             font-size: var(--font-size-base);
  830.         }
  832.         .overview-card-info {
  833.             display: flex;
  834.             align-items: center;
  835.             background-color: rgba(216, 76, 43, 0.1);
  836.             padding: 15px;
  837.             border-radius: 12px;
  838.             margin-top: 20px;
  839.         }
  841.         .overview-card-info svg {
  842.             margin-right: 12px;
  843.             color: var(--accent-orange);
  844.             stroke: var(--accent-orange);
  845.         }
  847.         .overview-card-info span {
  848.             color: var(--primary-blue);
  849.             font-weight: 600;
  850.             font-size: var(--font-size-base);
  851.         }
  853.         /* Degree Cards - IMPROVED */
  854.         .degree-cards {
  855.             display: flex;
  856.             flex-wrap: wrap;
  857.             gap: 30px;
  858.             justify-content: center;
  859.             margin-bottom: 60px;
  860.         }
  862.         .degree-card {
  863.             flex: 1;
  864.             min-width: 300px;
  865.             max-width: 500px;
  866.             background: var(--white);
  867.             padding: 35px;
  868.             border-radius: 20px;
  869.             box-shadow: var(--card-shadow);
  870.             transition: var(--transition);
  871.             position: relative;
  872.             overflow: hidden;
  873.             z-index: 1;
  874.         }
  876.         .degree-card::after {
  877.             content: '';
  878.             position: absolute;
  879.             top: 0;
  880.             left: 0;
  881.             width: 100%;
  882.             height: 0;
  883.             background: linear-gradient(180deg, rgba(216, 76, 43, 0.05), transparent);
  884.             transition: var(--transition);
  885.             z-index: -1;
  886.         }
  888.         .degree-card:hover::after {
  889.             height: 100%;
  890.         }
  892.         .degree-card:hover {
  893.             transform: translateY(-10px);
  894.             box-shadow: 0 20px 40px rgba(0,0,0,0.1);
  895.         }
  897.         .degree-card-primary {
  898.             border-left: 5px solid var(--primary-blue);
  899.         }
  901.         .degree-card-accent {
  902.             border-left: 5px solid var(--accent-orange);
  903.         }
  905.         .degree-card-header {
  906.             display: flex;
  907.             align-items: center;
  908.             margin-bottom: 25px;
  909.         }
  911.         .degree-card-icon {
  912.             width: 65px;
  913.             height: 65px;
  914.             border-radius: 50%;
  915.             display: flex;
  916.             justify-content: center;
  917.             align-items: center;
  918.             flex-shrink: 0;
  919.             transition: var(--transition);
  920.             background: rgba(216, 76, 43, 0.1);
  921.         }
  923.         .degree-card-icon svg {
  924.             color: var(--accent-orange);
  925.             stroke: var(--accent-orange);
  926.         }
  928.         .degree-card:hover .degree-card-icon {
  929.             transform: scale(1.1) rotate(5deg);
  930.             background: rgba(216, 76, 43, 0.15);
  931.         }
  933.         .degree-card-title-container {
  934.             margin-left: 20px;
  935.         }
  937.         .degree-card-title {
  938.             color: var(--primary-blue);
  939.             font-size: var(--font-size-xl);
  940.             margin: 0 0 8px 0;
  941.             font-weight: 700;
  942.         }
  944.         .degree-card-subtitle {
  945.             color: var(--text-light);
  946.             margin: 0;
  947.             font-size: var(--font-size-base);
  948.         }
  950.         .degree-card-content {
  951.             color: var(--text-dark);
  952.             line-height: 1.7;
  953.             padding-top: 15px;
  954.             border-top: 1px solid rgba(216, 76, 43, 0.1);
  955.             font-size: var(--font-size-base);
  956.         }
  958.         /* Admission Section76,43,0.1);
  959.             font-size: var(--font-size-base);
  960.         }
  962.         /* Admission Section - IMPROVED */
  963.         .admission-container {
  964.             padding: 50px;
  965.             background-color: var(--white);
  966.             border-radius: 20px;
  967.             box-shadow: var(--card-shadow);
  968.             margin-bottom: 60px;
  969.             position: relative;
  970.             overflow: hidden;
  971.         }
  973.         .admission-container::before {
  974.             content: '';
  975.             position: absolute;
  976.             top: 0;
  977.             left: 0;
  978.             width: 100%;
  979.             height: 100%;
  980.             background: radial-gradient(circle at bottom left, rgba(216, 76, 43, 0.05), transparent 70%);
  981.             z-index: 0;
  982.         }
  984.         .admission-columns {
  985.             display: flex;
  986.             flex-wrap: wrap;
  987.             gap: 40px;
  988.             margin-top: 30px;
  989.             position: relative;
  990.             z-index: 1;
  991.         }
  993.         .admission-column {
  994.             flex: 1;
  995.             min-width: 300px;
  996.         }
  998.         .admission-title {
  999.             color: var(--primary-blue);
  1000.             font-size: var(--font-size-xl);
  1001.             margin-bottom: 25px;
  1002.             display: flex;
  1003.             align-items: center;
  1004.             gap: 12px;
  1005.             font-weight: 700;
  1006.         }
  1008.         .admission-title svg {
  1009.             color: var(--accent-orange);
  1010.             stroke: var(--accent-orange);
  1011.         }
  1013.         .requirements-container {
  1014.             background-color: var(--background);
  1015.             padding: 25px;
  1016.             border-radius: 15px;
  1017.             margin-bottom: 25px;
  1018.             box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  1019.             transition: var(--transition);
  1020.             position: relative;
  1021.             overflow: hidden;
  1022.         }
  1024.         .requirements-container::after {
  1025.             content: '';
  1026.             position: absolute;
  1027.             top: 0;
  1028.             left: 0;
  1029.             width: 100%;
  1030.             height: 100%;
  1031.             background: radial-gradient(circle at top right, rgba(216, 76, 43, 0.05), transparent 70%);
  1032.             z-index: -1;
  1033.             opacity: 0;
  1034.             transition: var(--transition);
  1035.         }
  1037.         .requirements-container:hover {
  1038.             transform: translateY(-5px);
  1039.             box-shadow: 0 15px 30px rgba(0,0,0,0.1);
  1040.         }
  1042.         .requirements-container:hover::after {
  1043.             opacity: 1;
  1044.         }
  1046.         .requirement-item {
  1047.             display: flex;
  1048.             align-items: flex-start;
  1049.             gap: 15px;
  1050.             margin-bottom: 20px;
  1051.             padding-bottom: 20px;
  1052.             border-bottom: 1px dashed rgba(216, 76, 43, 0.2);
  1053.             transition: var(--transition);
  1054.         }
  1056.         .requirement-item:hover {
  1057.             transform: translateX(5px);
  1058.         }
  1060.         .requirement-item:last-child {
  1061.             margin-bottom: 0;
  1062.             padding-bottom: 0;
  1063.             border-bottom: none;
  1064.         }
  1066.         .requirement-number {
  1067.             width: 35px;
  1068.             height: 35px;
  1069.             background-color: var(--accent-orange);
  1070.             border-radius: 50%;
  1071.             color: var(--white);
  1072.             display: flex;
  1073.             justify-content: center;
  1074.             align-items: center;
  1075.             font-weight: 600;
  1076.             flex-shrink: 0;
  1077.             transition: var(--transition);
  1078.         }
  1080.         .requirement-item:hover .requirement-number {
  1081.             transform: scale(1.1);
  1082.             box-shadow: 0 5px 10px rgba(216, 76, 43, 0.3);
  1083.         }
  1085.         .requirement-content {
  1086.             flex-grow: 1;
  1087.         }
  1089.         .requirement-title {
  1090.             font-weight: 600;
  1091.             color: var(--primary-blue);
  1092.             margin-bottom: 8px;
  1093.             font-size: var(--font-size-base);
  1094.         }
  1096.         .requirement-description {
  1097.             color: var(--text-light);
  1098.             font-size: var(--font-size-base);
  1099.             line-height: 1.6;
  1100.         }
  1102.         .documents-grid {
  1103.             display: grid;
  1104.             grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  1105.             gap: 15px;
  1106.         }
  1108.         .document-item {
  1109.             display: flex;
  1110.             align-items: center;
  1111.             gap: 12px;
  1112.             background-color: var(--background);
  1113.             padding: 18px;
  1114.             border-radius: 12px;
  1115.             box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  1116.             transition: var(--transition);
  1117.             position: relative;
  1118.             overflow: hidden;
  1119.             z-index: 1;
  1120.         }
  1122.         .document-item::after {
  1123.             content: '';
  1124.             position: absolute;
  1125.             top: 0;
  1126.             left: 0;
  1127.             width: 100%;
  1128.             height: 100%;
  1129.             background: linear-gradient(90deg, rgba(216, 76, 43, 0.05), transparent);
  1130.             opacity: 0;
  1131.             transition: var(--transition);
  1132.             z-index: -1;
  1133.         }
  1135.         .document-item:hover {
  1136.             transform: translateX(5px);
  1137.             box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  1138.         }
  1140.         .document-item:hover::after {
  1141.             opacity: 1;
  1142.         }
  1144.         .document-item svg {
  1145.             color: var(--accent-orange);
  1146.             stroke: var(--accent-orange);
  1147.         }
  1149.         .document-title {
  1150.             font-weight: 600;
  1151.             color: var(--primary-blue);
  1152.             font-size: var(--font-size-base);
  1153.         }
  1155.         /* Important Dates - IMPROVED */
  1156.         .dates-title {
  1157.             color: var(--primary-blue);
  1158.             font-size: var(--font-size-xl);
  1159.             margin: 40px 0 25px;
  1160.             display: flex;
  1161.             align-items: center;
  1162.             gap: 12px;
  1163.             font-weight: 700;
  1164.             position: relative;
  1165.             z-index: 1;
  1166.         }
  1168.         .dates-title svg {
  1169.             color: var(--accent-orange);
  1170.             stroke: var(--accent-orange);
  1171.         }
  1173.         .dates-container {
  1174.             display: flex;
  1175.             flex-wrap: wrap;
  1176.             gap: 20px;
  1177.             justify-content: center;
  1178.             position: relative;
  1179.             z-index: 1;
  1180.         }
  1182.         .date-item {
  1183.             flex: 1;
  1184.             min-width: 200px;
  1185.             max-width: 220px;
  1186.             background-color: var(--background);
  1187.             padding: 25px;
  1188.             border-radius: 15px;
  1189.             text-align: center;
  1190.             transition: var(--transition);
  1191.             box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  1192.             position: relative;
  1193.             overflow: hidden;
  1194.             z-index: 1;
  1195.         }
  1197.         .date-item::after {
  1198.             content: '';
  1199.             position: absolute;
  1200.             bottom: -50%;
  1201.             right: -50%;
  1202.             width: 200%;
  1203.             height: 200%;
  1204.             background: radial-gradient(circle, rgba(216, 76, 43, 0.05), transparent 70%);
  1205.             transition: var(--transition);
  1206.             z-index: -1;
  1207.             opacity: 0;
  1208.         }
  1210.         .date-item:hover::after {
  1211.             opacity: 1;
  1212.         }
  1214.         .date-item:hover {
  1215.             transform: translateY(-10px);
  1216.             box-shadow: 0 15px 30px rgba(0,0,0,0.1);
  1217.         }
  1219.         .date-calendar {
  1220.             width: 65px;
  1221.             height: 65px;
  1222.             background-color: var(--accent-orange);
  1223.             color: var(--white);
  1224.             border-radius: 15px;
  1225.             display: flex;
  1226.             flex-direction: column;
  1227.             justify-content: center;
  1228.             align-items: center;
  1229.             margin: 0 auto 15px;
  1230.             transition: var(--transition);
  1231.             box-shadow: 0 5px 15px rgba(216, 76, 43, 0.2);
  1232.         }
  1234.         .date-item:hover .date-calendar {
  1235.             transform: scale(1.1) rotate(3deg);
  1236.             box-shadow: 0 8px 20px rgba(216, 76, 43, 0.3);
  1237.         }
  1239.         .date-day {
  1240.             font-size: var(--font-size-xl);
  1241.             font-weight: 700;
  1242.         }
  1244.         .date-month {
  1245.             font-size: var(--font-size-sm);
  1246.         }
  1248.         .date-title {
  1249.             font-weight: 600;
  1250.             color: var(--primary-blue);
  1251.             font-size: var(--font-size-base);
  1252.         }
  1254.         /* CTA Section - IMPROVED */
  1255.         .cta-section {
  1256.             background: var(--gradient-primary);
  1257.             border-radius: 20px;
  1258.             overflow: hidden;
  1259.             margin-bottom: 70px;
  1260.             box-shadow: 0 20px 40px rgba(38, 51, 113, 0.3);
  1261.             position: relative;
  1262.         }
  1264.         .cta-container {
  1265.             display: flex;
  1266.             flex-wrap: wrap;
  1267.             position: relative;
  1268.             z-index: 1;
  1269.         }
  1271.         .cta-content {
  1272.             flex: 1;
  1273.             min-width: 300px;
  1274.             padding: 60px;
  1275.             display: flex;
  1276.             flex-direction: column;
  1277.             justify-content: center;
  1278.         }
  1280.         .cta-title {
  1281.             font-size: var(--font-size-4xl);
  1282.             font-weight: 800;
  1283.             color: var(--white);
  1284.             margin: 0 0 25px;
  1285.             line-height: 1;
  1286.             animation: pulse 2s infinite;
  1287.         }
  1289.         .cta-title span {
  1290.             color: var(--accent-orange);
  1291.             position: relative;
  1292.             display: inline-block;
  1293.         }
  1295.         .cta-title span::after {
  1296.             content: '';
  1297.             position: absolute;
  1298.             bottom: -5px;
  1299.             left: 0;
  1300.             width: 100%;
  1301.             height: 3px;
  1302.             background-color: var(--accent-orange);
  1303.             transform: scaleX(0);
  1304.             transform-origin: right;
  1305.             transition: transform 0.5s ease;
  1306.         }
  1308.         .cta-section:hover .cta-title span::after {
  1309.             transform: scaleX(1);
  1310.             transform-origin: left;
  1311.         }
  1313.         .cta-text {
  1314.             color: rgba(255, 255, 255, 0.9);
  1315.             font-size: var(--font-size-lg);
  1316.             margin-bottom: 35px;
  1317.             max-width: 500px;
  1318.             line-height: 1.7;
  1319.         }
  1321.         .cta-button {
  1322.             display: inline-flex;
  1323.             align-items: center;
  1324.             background: var(--gradient-accent);
  1325.             color: var(--white);
  1326.             padding: 16px 35px;
  1327.             text-decoration: none;
  1328.             border-radius: 50px;
  1329.             font-weight: 600;
  1330.             transition: var(--transition);
  1331.             box-shadow: 0 8px 20px rgba(216, 76, 43, 0.3);
  1332.             align-self: flex-start;
  1333.             position: relative;
  1334.             overflow: hidden;
  1335.             font-size: var(--font-size-base);
  1336.         }
  1338.         .cta-button::before {
  1339.             content: '';
  1340.             position: absolute;
  1341.             top: 0;
  1342.             left: -100%;
  1343.             width: 100%;
  1344.             height: 100%;
  1345.             background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  1346.             transition: 0.5s;
  1347.         }
  1349.         .cta-button:hover::before {
  1350.             left: 100%;
  1351.         }
  1353.         .cta-button:hover {
  1354.             transform: translateY(-5px) scale(1.05);
  1355.             box-shadow: 0 12px 25px rgba(216, 76, 43, 0.4);
  1356.             color: var(--white);
  1357.         }
  1359.         .cta-button span {
  1360.             margin-left: 12px;
  1361.             transition: var(--transition);
  1362.         }
  1364.         .cta-button:hover span {
  1365.             transform: translateX(5px);
  1366.         }
  1368.         .cta-contact {
  1369.             flex: 1;
  1370.             min-width: 300px;
  1371.             background-color: rgba(0, 0, 0, 0.1);
  1372.             padding: 60px;
  1373.             display: flex;
  1374.             align-items: center;
  1375.             justify-content: center;
  1376.         }
  1378.         .contact-content {
  1379.             text-align: center;
  1380.         }
  1382.         .contact-icon {
  1383.             width: 110px;
  1384.             height: 110px;
  1385.             background-color: rgba(216, 76, 43, 0.2);
  1386.             border-radius: 50%;
  1387.             display: flex;
  1388.             justify-content: center;
  1389.             align-items: center;
  1390.             margin: 0 auto 25px;
  1391.             transition: var(--transition);
  1392.         }
  1394.         .contact-icon:hover {
  1395.             transform: scale(1.1) rotate(5deg);
  1396.             background-color: rgba(216, 76, 43, 0.3);
  1397.         }
  1399.         .contact-icon svg {
  1400.             color: var(--white);
  1401.             stroke: var(--white);
  1402.         }
  1404.         .contact-title {
  1405.             color: var(--white);
  1406.             font-size: var(--font-size-2xl);
  1407.             margin: 0 0 15px 0;
  1408.             font-weight: 700;
  1409.         }
  1411.         .contact-text {
  1412.             color: rgba(255, 255, 255, 0.9);
  1413.             margin-bottom: 30px;
  1414.             font-size: var(--font-size-base);
  1415.         }
  1417.         .contact-button {
  1418.             display: inline-flex;
  1419.             align-items: center;
  1420.             background-color: var(--white);
  1421.             color: var(--accent-orange);
  1422.             padding: 16px 35px;
  1423.             text-decoration: none;
  1424.             border-radius: 50px;
  1425.             font-weight: 600;
  1426.             transition: var(--transition);
  1427.             box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  1428.             position: relative;
  1429.             overflow: hidden;
  1430.             font-size: var(--font-size-base);
  1431.         }
  1433.         .contact-button::before {
  1434.             content: '';
  1435.             position: absolute;
  1436.             top: 0;
  1437.             left: -100%;
  1438.             width: 100%;
  1439.             height: 100%;
  1440.             background: linear-gradient(90deg, transparent, rgba(216, 76, 43, 0.1), transparent);
  1441.             transition: 0.5s;
  1442.         }
  1444.         .contact-button:hover::before {
  1445.             left: 100%;
  1446.         }
  1448.         .contact-button:hover {
  1449.             transform: translateY(-5px) scale(1.05);
  1450.             box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3);
  1451.             color: var(--accent-orange-dark);
  1452.         }
  1454.         .contact-button span {
  1455.             margin-left: 12px;
  1456.             transition: var(--transition);
  1457.         }
  1459.         .contact-button:hover span {
  1460.             transform: translateX(5px);
  1461.         }
  1463.         .cta-circle {
  1464.             position: absolute;
  1465.             border-radius: 50%;
  1466.             background: rgba(255, 255, 255, 0.05);
  1467.         }
  1469.         .cta-circle-1 {
  1470.             top: -50px;
  1471.             right: -50px;
  1472.             width: 200px;
  1473.             height: 200px;
  1474.         }
  1476.         .cta-circle-2 {
  1477.             bottom: -30px;
  1478.             left: -30px;
  1479.             width: 150px;
  1480.             height: 150px;
  1481.         }
  1483.         .cta-circle-3 {
  1484.             top: -30px;
  1485.             right: 30%;
  1486.             width: 100px;
  1487.             height: 100px;
  1488.         }
  1490.         /* Animation */
  1491.         @keyframes pulse {
  1492.             0% { transform: scale(1); opacity: 0.5; }
  1493.             50% { transform: scale(1.03); opacity: 0.8; }
  1494.             100% { transform: scale(1); opacity: 0.5; }
  1495.         }
  1497.         /* Responsive Styles */
  1498.         @media (max-width: 992px) {
  1499.             .logo-container {
  1500.                 flex-direction: column;
  1501.                 text-align: center;
  1502.                 gap: 15px;
  1503.             }
  1504.             
  1505.             .main-logo {
  1506.                 width: 220px; /* Slightly smaller on tablet */
  1507.             }
  1508.             
  1509.             .logo-divider {
  1510.                 display: none;
  1511.             }
  1512.             
  1513.             .main-image-container {
  1514.                 height: 450px;
  1515.             }
  1517.             .overlay-title {
  1518.                 font-size: var(--font-size-3xl);
  1519.             }
  1521.             .overlay-subtitle {
  1522.                 font-size: var(--font-size-lg);
  1523.             }
  1524.             
  1525.             .cta-content, .cta-contact {
  1526.                 padding: 50px 40px;
  1527.             }
  1529.             .introduction-section {
  1530.                 padding: 30px;
  1531.             }
  1532.         }
  1534.         @media (max-width: 768px) {
  1535.             .main-logo {
  1536.                 width: 200px;
  1537.                 height: auto;
  1538.             }
  1539.             
  1540.             .main-image-container {
  1541.                 height: 400px;
  1542.             }
  1544.             .overlay-title {
  1545.                 font-size: var(--font-size-2xl);
  1546.             }
  1548.             .overlay-subtitle {
  1549.                 font-size: var(--font-size-base);
  1550.             }
  1552.             .section-title {
  1553.                 font-size: var(--font-size-2xl);
  1554.             }
  1556.             .cta-content, .cta-contact {
  1557.                 padding: 40px 30px;
  1558.             }
  1560.             .cta-title {
  1561.                 font-size: var(--font-size-3xl);
  1562.             }
  1563.             
  1564.             .overview-container, .admission-container {
  1565.                 padding: 40px 30px;
  1566.             }
  1567.         }
  1569.         @media (max-width: 480px) {
  1570.             .main-logo {
  1571.                 width: 180px;
  1572.                 height: auto;
  1573.                 transition: var(--transition);
  1574.                 filter: brightness(0) invert(1);
  1575.                 animation: logoGlow 3s infinite alternate;
  1576.             }
  1577.             
  1578.             .main-image-container {
  1579.                 height: 350px;
  1580.             }
  1581.             
  1582.             .image-overlay {
  1583.                 padding: 30px 20px;
  1584.             }
  1586.             .overlay-title {
  1587.                 font-size: var(--font-size-xl);
  1588.             }
  1590.             .overlay-subtitle {
  1591.                 font-size: var(--font-size-base);
  1592.             }
  1594.             .overlay-cta {
  1595.                 font-size: var(--font-size-base);
  1596.                 padding: 12px 25px;
  1597.             }
  1599.             .section-title {
  1600.                 font-size: var(--font-size-xl);
  1601.             }
  1603.             .overview-container, .admission-container {
  1604.                 padding: 30px 20px;
  1605.             }
  1607.             .cta-title {
  1608.                 font-size: var(--font-size-2xl);
  1609.             }
  1611.             .cta-text {
  1612.                 font-size: var(--font-size-base);
  1613.             }
  1614.             
  1615.             .program-card, .overview-card, .degree-card {
  1616.                 padding: 25px 20px;
  1617.             }
  1619.             .introduction-section {
  1620.                 padding: 25px 20px;
  1621.             }
  1622.         }
  1623.     </style>
  1624.     
  1625. </head>
  1626. <body>
  1628.     {% block header %}
  1629.         {{ render(path('_header')) }}
  1630.     {% endblock %}
  1631.  
  1632.     {% block switcher %}{% endblock %}
  1633.  
  1634.     {% block body %}
  1635.         <!-- IMPROVED Logo Header Section with White Logo -->
  1636.         <div class="logo-header">
  1637.             <div class="logo-container">
  1638.                 <img src="https://mcgt.um6p.ma//assets/img/12.png" style="width: 300px; height: auto;" alt="Program Logo"  class="main-logo">                
  1639.             </div>
  1640.         </div>
  1641.     
  1642.         <div class="page-container">
  1643.             <!-- Hero Gallery Section -->
  1644.             <div class="hero-gallery">
  1645.                 <div class="main-image-container">
  1646.                     <img id="mainImage" class="main-image" src="https://mcgt.um6p.ma/assets/img/1.jpg" alt="Campus Life">
  1647.                     <div class="image-overlay">
  1648.                         <h1 id="imageTitle" class="overlay-title">Experience Excellence in Education</h1>
  1649.                         <p id="imageDescription" class="overlay-subtitle">Join our prestigious Master 2 program and learn from world-renowned experts in game theory</p>
  1650.                         <a href="#apply" class="overlay-cta">Apply Now</a>
  1651.                     </div>
  1652.                 </div>
  1654.                 <!-- Thumbnail Gallery -->
  1655.                 <div id="imageGallery" class="thumbnail-gallery">
  1656.                     <img class="thumbnail active" src="https://mcgt.um6p.ma/assets/img/1.jpg" alt="Campus View" 
  1657.                         onclick="changeMainImage(this, 'Experience Excellence in Education', 'Join our prestigious Master 2 program and learn from world-renowned experts in game theory')">
  1658.                     
  1659.                     <img class="thumbnail" src="https://mcgt.um6p.ma/assets/img/2.jpg" alt="Student Life" 
  1660.                         onclick="changeMainImage(this, 'Collaborative Learning Environment', 'Engage with peers and faculty in a supportive academic community')">
  1661.                     
  1662.                     <img class="thumbnail" src="https://mcgt.um6p.ma/assets/img/5.jpg" alt="International Community" 
  1663.                         onclick="changeMainImage(this, 'International Perspective', 'Join students from around the world in a diverse learning environment')">
  1664.                     
  1665.                     <img class="thumbnail" src="https://mcgt.um6p.ma/assets/img/6.jpg" alt="Lecture Hall" 
  1666.                         onclick="changeMainImage(this, 'Engaging Lectures', 'Learn from experts through interactive and stimulating lectures')">
  1667.                     
  1668.                     <img class="thumbnail" src="https://mcgt.um6p.ma/assets/img/7.jpg" alt="Study Groups" 
  1669.                         onclick="changeMainImage(this, 'Collaborative Research', 'Work with peers on cutting-edge research projects')">
  1670.                     
  1671.                     <img class="thumbnail" src="https://mcgt.um6p.ma/assets/img/8.jpg" alt="Campus Grounds" 
  1672.                         onclick="changeMainImage(this, 'Beautiful Campus', 'Study in a modern and inspiring environment')">
  1673.                     
  1674.                     <img class="thumbnail" src="https://mcgt.um6p.ma/assets/img/9.jpg" alt="Library" 
  1675.                         onclick="changeMainImage(this, 'Extensive Resources', 'Access to comprehensive library and digital resources')">
  1676.                     
  1677.                     <img class="thumbnail" src="https://mcgt.um6p.ma/assets/img/10.jpg" alt="Graduation" 
  1678.                         onclick="changeMainImage(this, 'Academic Achievement', 'Celebrate your success with a prestigious degree')">
  1679.                     
  1680.                     <img class="thumbnail" src="https://mcgt.um6p.ma/assets/img/11.jpg" alt="Career Opportunities" 
  1681.                         onclick="changeMainImage(this, 'Future Opportunities', 'Open doors to exciting career and research opportunities')">
  1682.                 </div>
  1683.             </div>
  1685.             <!-- Introduction Section -->
  1686.             <section class="introduction-section">
  1687.                 <div class="introduction-content">
  1688.                     <h2 class="introduction-title">About the Program</h2>
  1689.                     
  1690.                     <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>
  1691.                     
  1692.                     <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 Paris Dauphine-PSL. The program aims to provide an in-depth understanding of mathematical models, solution concepts, and algorithms essential for comprehending, modeling, and addressing strategic and competitive challenges in various fields, including economics, computer science, operations research, and social sciences.</p>
  1693.                     
  1694.                     <p class="introduction-text">Throughout the program, students will develop the following skills:</p>
  1695.                     
  1696.                     <ul class="skills-list">
  1697.                         <li>Mastery of advanced theoretical techniques, including probability, statistics, combinatorics, operations research, convex optimization, game theory, and microeconomic theory.</li>
  1698.                         <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>
  1699.                         <li>Ability to write scientific reports and communicate research findings effectively.</li>
  1700.                     </ul>
  1701.                     
  1702.                     <p class="introduction-text">Successful candidates this year will 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>
  1703.                     
  1704.                     <div class="financial-info">
  1705.                         <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. The cost of on-campus accommodation ranges between 200 and 250 euros per month.</p>
  1706.                         
  1707.                         <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>
  1708.                     </div>
  1709.                 </div>
  1710.             </section>
  1712.             <!-- Program Cards Section -->
  1713.             <section class="section">
  1714.                 <div class="section-header">
  1715.                     <h2 class="section-title">Master 2 Program</h2>
  1716.                     <p class="section-subtitle">A prestigious program designed to develop expertise in game theory</p>
  1717.                 </div>
  1719.                 <div class="program-cards">
  1720.                     <!-- Program Card -->
  1721.                     <div class="program-card program-card-primary">
  1722.                         <div class="program-card-icon">
  1723.                             <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">
  1724.                                 <path d="M22 10v6M2 10l10-5 10 5-10 5z"></path>
  1725.                                 <path d="M6 12v5c3 3 9 3 12 0v-5"></path>
  1726.                             </svg>
  1727.                         </div>
  1728.                         <h3 class="program-card-title">Master 2 Program</h3>
  1729.                         <p class="program-card-text">Dauphine-UM6P Master 2 in Applied Mathematics: Game Theory in Mathematics, Economics, and Computation</p>
  1730.                         
  1731.                         <div class="program-card-feature">
  1732.                             <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">
  1733.                                 <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
  1734.                                 <line x1="16" y1="2" x2="16" y2="6"></line>
  1735.                                 <line x1="8" y1="2" x2="8" y2="6"></line>
  1736.                                 <line x1="3" y1="10" x2="21" y2="10"></line>
  1737.                             </svg>
  1738.                             <span>One academic year (Oct-Sept)</span>
  1739.                         </div>
  1740.                         
  1741.                         <div class="program-card-feature">
  1742.                             <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">
  1743.                                 <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
  1744.                                 <circle cx="12" cy="10" r="3"></circle>
  1745.                             </svg>
  1746.                             <span>UM6P Rabat Campus</span>
  1747.                         </div>
  1748.                     </div>
  1749.                     
  1750.                     <!-- Benefits Card -->
  1751.                     <div class="program-card program-card-accent">
  1752.                         <div class="program-card-icon">
  1753.                             <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">
  1754.                                 <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
  1755.                                 <polyline points="22 4 12 14.01 9 11.01"></polyline>
  1756.                             </svg>
  1757.                         </div>
  1758.                         <h3 class="program-card-title">Program Benefits</h3>
  1759.                         
  1760.                         <ul class="benefits-list">
  1761.                             <li><span>✓</span> World-class faculty from leading institutions</li>
  1762.                             <li><span>✓</span> Double degree: UM6P and Dauphine-PSL</li>
  1763.                             <li><span>✓</span> Direct access to PhD programs</li>
  1764.                             <li><span>✓</span> Affordable on-campus housing</li>
  1765.                         </ul>
  1766.                     </div>
  1767.                     
  1768.                     <!-- Apply Now Card -->
  1769.                     <div class="program-card program-card-cta">
  1770.                         <div class="program-card-icon">
  1771.                             <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">
  1772.                                 <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>
  1773.                                 <polyline points="22,6 12,13 2,6"></polyline>
  1774.                             </svg>
  1775.                         </div>
  1776.                         <h3 class="program-card-title">Ready to Apply?</h3>
  1777.                         <p class="program-card-text">Applications for the next academic year are now open. Don't miss this opportunity!</p>
  1778.                         
  1779.                         <div class="program-card-feature">
  1780.                             <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">
  1781.                                 <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
  1782.                                 <line x1="16" y1="2" x2="16" y2="6"></line>
  1783.                                 <line x1="8" y1="2" x2="8" y2="6"></line>
  1784.                                 <line x1="3" y1="10" x2="21" y2="10"></line>
  1785.                             </svg>
  1786.                             <span>Deadline: May 31, 2025</span>
  1787.                         </div>
  1788.                         
  1789.                         <a href="#apply" class="program-card-button">Apply Now</a>
  1790.                     </div>
  1791.                 </div>
  1792.             </section>
  1794.             <!-- Program Overview Section -->
  1795.             <section class="section">
  1796.                 <div class="overview-container">
  1797.                     <div class="section-header">
  1798.                         <h2 class="section-title">Program Overview</h2>
  1799.                         <p class="section-subtitle">A comprehensive curriculum designed to provide expertise in game theory and its applications</p>
  1800.                     </div>
  1802.                     <div class="overview-cards">
  1803.                         <!-- Foundation Courses -->
  1804.                         <div class="overview-card overview-card-primary">
  1805.                             <h3 class="overview-card-title">
  1806.                                 <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">
  1807.                                     <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
  1808.                                     <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
  1809.                                 </svg>
  1810.                                 Foundation Courses
  1811.                             </h3>
  1812.                             <p class="overview-card-period">October - December</p>
  1813.                             
  1814.                             <ul class="overview-card-list">
  1815.                                 <li>Convex & Online Optimization</li>
  1816.                                 <li>Mathematical Game Theory</li>
  1817.                                 <li>Discrete Optimization & Operations Research</li>
  1818.                                 <li>Probability, Statistics & Control</li>
  1819.                                 <li>Microeconomics</li>
  1820.                             </ul>
  1821.                         </div>
  1822.                         
  1823.                         <!-- Specializations -->
  1824.                         <div class="overview-card overview-card-accent">
  1825.                             <h3 class="overview-card-title">
  1826.                                 <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">
  1827.                                     <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>
  1828.                                 </svg>
  1829.                                 Specializations
  1830.                             </h3>
  1831.                             <p class="overview-card-period">January - April</p>
  1832.                             
  1833.                             <ul class="overview-card-list">
  1834.                                 <li>Differential & Mean-Field Games</li>
  1835.                                 <li>Optimal Transport and Applications</li>
  1836.                                 <li>Algorithmic Mechanism Design</li>
  1837.                                 <li>Multi-Player Stochastic Games</li>
  1838.                                 <li>And many more specialized courses</li>
  1839.                             </ul>
  1840.                         </div>
  1841.                         
  1842.                         <!-- Final Semester -->
  1843.                         <div class="overview-card overview-card-primary">
  1844.                             <h3 class="overview-card-title">
  1845.                                 <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">
  1846.                                     <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>
  1847.                                 </svg>
  1848.                                 Final Semester
  1849.                             </h3>
  1850.                             <p class="overview-card-period">May - September</p>
  1851.                             
  1852.                             <div class="overview-card-content">
  1853.                                 <p>Dedicated to solving a research problem and writing a Master's thesis under the supervision of world-class researchers.</p>
  1854.                             </div>
  1855.                             
  1856.                             <div class="overview-card-info">
  1857.                                 <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">
  1858.                                     <circle cx="12" cy="12" r="10"></circle>
  1859.                                     <line x1="12" y1="8" x2="12" y2="12"></line>
  1860.                                     <line x1="12" y1="16" x2="12.01" y2="16"></line>
  1861.                                 </svg>
  1862.                                 <span>Total Credits: 60 ECTS</span>
  1863.                             </div>
  1864.                         </div>
  1865.                     </div>
  1866.                 </div>
  1867.             </section>
  1869.             <!-- Degrees Section -->
  1870.             <section class="section">
  1871.                 <div class="section-header">
  1872.                     <h2 class="section-title">Dual Degree Program</h2>
  1873.                     <p class="section-subtitle">Graduate with two prestigious degrees that open doors worldwide</p>
  1874.                 </div>
  1876.                 <div class="degree-cards">
  1877.                     <div class="degree-card degree-card-primary">
  1878.                         <div class="degree-card-header">
  1879.                             <div class="degree-card-icon">
  1880.                                 <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">
  1881.                                     <path d="M22 10v6M2 10l10-5 10 5-10 5z"></path>
  1882.                                     <path d="M6 12v5c3 3 9 3 12 0v-5"></path>
  1883.                                 </svg>
  1884.                             </div>
  1885.                             <div class="degree-card-title-container">
  1886.                                 <h3 class="degree-card-title">Master of Science from UM6P</h3>
  1887.                                 <p class="degree-card-subtitle">Recognized degree with global opportunities</p>
  1888.                             </div>
  1889.                         </div>
  1890.                         <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>
  1891.                     </div>
  1893.                     <div class="degree-card degree-card-accent">
  1894.                         <div class="degree-card-header">
  1895.                             <div class="degree-card-icon">
  1896.                                 <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">
  1897.                                     <path d="M22 10v6M2 10l10-5 10 5-10 5z"></path>
  1898.                                     <path d="M6 12v5c3 3 9 3 12 0v-5"></path>
  1899.                                 </svg>
  1900.                             </div>
  1901.                             <div class="degree-card-title-container">
  1902.                                 <h3 class="degree-card-title">Master 2 from Dauphine-PSL</h3>
  1903.                                 <p class="degree-card-subtitle">Official French second-cycle degree</p>
  1904.                             </div>
  1905.                         </div>
  1906.                         <p class="degree-card-content">This prestigious degree (60 ECTS credits) grants access to PhD programs worldwide and is highly valued by employers internationally.</p>
  1907.                     </div>
  1908.                 </div>
  1909.             </section>
  1911.             <!-- Admission & Requirements Section -->
  1912.             <section class="section">
  1913.                 <div class="admission-container">
  1914.                     <div class="section-header">
  1915.                         <h2 class="section-title">Admission & Requirements</h2>
  1916.                         <p class="section-subtitle">Simple steps to join our prestigious program</p>
  1917.                     </div>
  1919.                     <div class="admission-columns">
  1920.                         <!-- Requirements -->
  1921.                         <div class="admission-column">
  1922.                             <h3 class="admission-title">
  1923.                                 <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">
  1924.                                     <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
  1925.                                     <polyline points="22 4 12 14.01 9 11.01"></polyline>
  1926.                                 </svg>
  1927.                                 Eligibility Requirements
  1928.                             </h3>
  1929.                             
  1930.                             <div class="requirements-container">
  1931.                                 <div class="requirement-item">
  1932.                                     <div class="requirement-number">1</div>
  1933.                                     <div class="requirement-content">
  1934.                                         <div class="requirement-title">Enrolled in Master 1</div>
  1935.                                         <div class="requirement-description">in Mathematics and Applications or equivalent</div>
  1936.                                     </div>
  1937.                                 </div>
  1938.                                 
  1939.                                 <div class="requirement-item">
  1940.                                     <div class="requirement-number">2</div>
  1941.                                     <div class="requirement-content">
  1942.                                         <div class="requirement-title">Successful completion of Master 1</div>
  1943.                                         <div class="requirement-description">is required upon registration</div>
  1944.                                     </div>
  1945.                                 </div>
  1946.                                 
  1947.                                 <div class="requirement-item">
  1948.                                     <div class="requirement-number">3</div>
  1949.                                     <div class="requirement-content">
  1950.                                         <div class="requirement-title">Minimum B2 English proficiency</div>
  1951.                                         <div class="requirement-description">(TOEFL IBT 92, IELTS 6.5, Cambridge FCE 160)</div>
  1952.                                     </div>
  1953.                                 </div>
  1954.                             </div>
  1955.                         </div>
  1956.                         
  1957.                         <!-- Required Documents -->
  1958.                         <div class="admission-column">
  1959.                             <h3 class="admission-title">
  1960.                                 <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">
  1961.                                     <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
  1962.                                     <polyline points="14 2 14 8 20 8"></polyline>
  1963.                                     <line x1="16" y1="13" x2="8" y2="13"></line>
  1964.                                     <line x1="16" y1="17" x2="8" y2="17"></line>
  1965.                                     <polyline points="10 9 9 9 8 9"></polyline>
  1966.                                 </svg>
  1967.                                 Required Documents
  1968.                             </h3>
  1969.                             
  1970.                             <div class="documents-grid">
  1971.                                 <div class="document-item">
  1972.                                     <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">
  1973.                                         <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
  1974.                                         <polyline points="14 2 14 8 20 8"></polyline>
  1975.                                         <line x1="16" y1="13" x2="8" y2="13"></line>
  1976.                                         <line x1="16" y1="17" x2="8" y2="17"></line>
  1977.                                         <polyline points="10 9 9 9 8 9"></polyline>
  1978.                                     </svg>
  1979.                                     <div class="document-title">Curriculum vitae</div>
  1980.                                 </div>
  1981.                                 
  1982.                                 <div class="document-item">
  1983.                                     <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">
  1984.                                         <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
  1985.                                         <polyline points="14 2 14 8 20 8"></polyline>
  1986.                                         <line x1="16" y1="13" x2="8" y2="13"></line>
  1987.                                         <line x1="16" y1="17" x2="8" y2="17"></line>
  1988.                                         <polyline points="10 9 9 9 8 9"></polyline>
  1989.                                     </svg>
  1990.                                     <div class="document-title">Cover letter</div>
  1991.                                 </div>
  1992.                                 
  1993.                                 <div class="document-item">
  1994.                                     <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">
  1995.                                         <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
  1996.                                         <polyline points="14 2 14 8 20 8"></polyline>
  1997.                                         <line x1="16" y1="13" x2="8" y2="13"></line>
  1998.                                         <line x1="16" y1="17" x2="8" y2="17"></line>
  1999.                                         <polyline points="10 9 9 9 8 9"></polyline>
  2000.                                     </svg>
  2001.                                     <div class="document-title">Academic references</div>
  2002.                                 </div>
  2003.                                 
  2004.                                 <div class="document-item">
  2005.                                     <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">
  2006.                                         <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
  2007.                                         <polyline points="14 2 14 8 20 8"></polyline>
  2008.                                         <line x1="16" y1="13" x2="8" y2="13"></line>
  2009.                                         <line x1="16" y1="17" x2="8" y2="17"></line>
  2010.                                         <polyline points="10 9 9 9 8 9"></polyline>
  2011.                                     </svg>
  2012.                                     <div class="document-title">Transcripts</div>
  2013.                                 </div>
  2014.                             </div>
  2015.                         </div>
  2016.                     </div>
  2017.                     
  2018.                     <!-- Important Dates -->
  2019.                     <h3 class="dates-title">
  2020.                         <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">
  2021.                             <circle cx="12" cy="12" r="10"></circle>
  2022.                             <polyline points="12 6 12 12 16 14"></polyline>
  2023.                         </svg>
  2024.                         Important Dates
  2025.                     </h3>
  2026.                     
  2027.                     <div class="dates-container">
  2028.                         <div class="date-item">
  2029.                             <div class="date-calendar">
  2030.                                 <div class="date-day">31</div>
  2031.                                 <div class="date-month">May</div>
  2032.                             </div>
  2033.                             <div class="date-title">Application Deadline</div>
  2034.                         </div>
  2035.                         
  2036.                         <div class="date-item">
  2037.                             <div class="date-calendar">
  2038.                                 <div class="date-day">6</div>
  2039.                                 <div class="date-month">June</div>
  2040.                             </div>
  2041.                             <div class="date-title">Interview Selection</div>
  2042.                         </div>
  2043.                         
  2044.                         <div class="date-item">
  2045.                             <div class="date-calendar">
  2046.                                 <div class="date-day">16-20</div>
  2047.                                 <div class="date-month">June</div>
  2048.                             </div>
  2049.                             <div class="date-title">Interviews</div>
  2050.                         </div>
  2051.                         
  2052.                         <div class="date-item">
  2053.                             <div class="date-calendar">
  2054.                                 <div class="date-day">1</div>
  2055.                                 <div class="date-month">Oct</div>
  2056.                             </div>
  2057.                             <div class="date-title">Program Start</div>
  2058.                         </div>
  2059.                     </div>
  2060.                 </div>
  2061.             </section>
  2063.             <!-- Call to Action Section -->
  2064.             <section id="apply" class="cta-section">
  2065.                 <div class="cta-circle cta-circle-1"></div>
  2066.                 <div class="cta-circle cta-circle-2"></div>
  2067.                 <div class="cta-circle cta-circle-3"></div>
  2068.                 
  2069.                 <div class="cta-container">
  2070.                     <div class="cta-content">
  2071.                         <h2 class="cta-title">APPLY <span>NOW</span></h2>
  2072.                         <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>
  2073.                         <a href="#" class="cta-button">Start Your Application <span>→</span></a>
  2074.                     </div>
  2075.                     
  2076.                     <div class="cta-contact">
  2077.                         <div class="contact-content">
  2078.                             <div class="contact-icon">
  2079.                                 <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">
  2080.                                     <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>
  2081.                                     <polyline points="22,6 12,13 2,6"></polyline>
  2082.                                 </svg>
  2083.                             </div>
  2084.                             <h3 class="contact-title">Have Questions?</h3>
  2085.                             <p class="contact-text">Contact our admissions team for more information about the program.</p>
  2086.                             <a href="mailto:[email protected]" class="contact-button">Contact Us <span>→</span></a>
  2087.                         </div>
  2088.                     </div>
  2089.                 </div>
  2090.             </section>
  2091.         </div>
  2092.     {% endblock %}
  2094.     {% block footer %}
  2095.         {{ render(path('_footer')) }}
  2096.     {% endblock %}
  2098.     <script type="text/javascript" src="{{ asset('assets/js/main.js')}}"></script>
  2099.     <script>
  2100.         function changeMainImage(thumbnail, title, description) {
  2101.             // Change main image
  2102.             const mainImage = document.getElementById('mainImage');
  2103.             mainImage.src = thumbnail.src;
  2104.             
  2105.             // Change title and description
  2106.             const titleElement = document.getElementById('imageTitle');
  2107.             const descriptionElement = document.getElementById('imageDescription');
  2108.             
  2109.             titleElement.textContent = title;
  2110.             descriptionElement.textContent = description;
  2111.             
  2112.             // Update active thumbnail
  2113.             const thumbnails = document.querySelectorAll('.thumbnail');
  2114.             thumbnails.forEach(thumb => {
  2115.                 thumb.classList.remove('active');
  2116.             });
  2117.             thumbnail.classList.add('active');
  2118.             
  2119.             // Add animation to main image
  2120.             mainImage.style.transform = 'scale(1.05)';
  2121.             setTimeout(() => {
  2122.                 mainImage.style.transform = 'scale(1)';
  2123.             }, 500);
  2124.         }
  2125.         
  2126.         // Smooth scroll for anchor links
  2127.         document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  2128.             anchor.addEventListener('click', function(e) {
  2129.                 e.preventDefault();
  2130.                 
  2131.                 const target = document.querySelector(this.getAttribute('href'));
  2132.                 if (target) {
  2133.                     window.scrollTo({
  2134.                         top: target.offsetTop - 80,
  2135.                         behavior: 'smooth'
  2136.                     });
  2137.                 }
  2138.             });
  2139.         });
  2140.     </script>
  2141. </body>
  2142. </html>