:root {
      --primary: #1D3557;
      --secondary: #F1FAEE;
      --accent: #E63946;
      --background: #F8F8F8;
      --text: #222222;
      --cta: #457B9D;
      --ctaText: #FFFFFF;
      --headerFont: 'Montserrat', Arial, Helvetica, sans-serif;
      --bodyFont: 'Lato', Arial, Helvetica, sans-serif;
    }
    body {
      background: var(--background);
      color: var(--text);
      font-family: var(--bodyFont);
      font-size: 1.08rem;
      line-height: 1.7;
      min-width: 320px;
      scroll-behavior: smooth;
    }
    h1, h2, h3, h4, h5, h6 {
      font-family: var(--headerFont);
      font-weight: 700;
      letter-spacing: -.02em;
      color: var(--primary);
      text-shadow: 0 3px 16px var(--secondary), 0 1px 2px rgba(68,68,68,0.07);
    }
    [class^="display-"] {
      text-shadow: 0 2px 16px #b6d0f7;
    }
    nav.navbar {
      background: linear-gradient(45deg, var(--secondary) 60%, var(--primary) 100%) !important;
      box-shadow: 0 1px 16px rgba(29,53,87,0.04);
      border-bottom: 2px solid var(--primary);
      z-index: 1080;
    }
    .navbar-brand {
      font-family: var(--headerFont);
      font-size: 2rem;
      letter-spacing: 0.04em;
      color: var(--primary)!important;
      font-weight: 800;
    }
    .nav-link, .nav-link:visited {
      font-weight: 700;
      color: var(--primary)!important;
      font-size: 1.02rem;
      margin-right: .7rem;
      transition: color .18s cubic-bezier(.5,.2,.5,1), text-shadow .2s;
      padding: .5rem 1rem;
      border-radius: .4rem;
      position: relative;
    }
    .nav-link.active,.nav-link:focus, .nav-link:hover {
      background: linear-gradient(45deg, var(--primary) 60%, var(--accent) 100%);
      color: var(--ctaText)!important;
      text-shadow: 0 2px 8px #1D3557bb;
      font-weight: 900;
    }
    .btn-primary, .btn-primary:focus-visible {
      background: linear-gradient(90deg, var(--accent) 20%, var(--primary) 95%);
      color: var(--ctaText)!important;
      border: none;
      font-weight: 800;
      border-radius: 2rem;
      font-family: var(--headerFont);
      padding: 0.65rem 2.2rem;
      min-width: 135px;
      min-height: 44px;
      box-shadow: 0 4px 20px rgba(70, 123,157,0.14);
      transition: background .2s, box-shadow .3s;
    }
    .btn-primary:hover, .btn-primary:focus {
      background: linear-gradient(60deg, var(--primary) 10%, var(--accent) 80%);
      color: var(--ctaText);
      box-shadow: 0 8px 36px rgba(230, 57, 70, 0.22);
    }
    .btn-secondary {
      background: var(--secondary);
      color: var(--cta);
      border: 2px solid var(--cta);
      font-weight: 800;
      border-radius: 2rem;
      font-family: var(--headerFont);
      padding: 0.65rem 2.2rem;
      min-width: 135px;
      min-height: 44px;
      transition: background .18s, border .2s, color .2s;
    }
    .btn-secondary:hover,.btn-secondary:focus {
      background: linear-gradient(90deg, var(--cta) 0%, var(--accent) 89%);
      color: var(--ctaText)!important;
      border: 2px solid var(--accent);
    }
    .cta-strong {
      font-family: var(--headerFont); 
      text-transform: uppercase; 
      color: var(--accent);
      font-size: 1.25em !important;
      font-weight: 900;
      letter-spacing: 0.06em;
    }
    .section-angled-top {
      clip-path: polygon(0 4vw, 100% 0, 100% 100%, 0 100%);
    }
    .section-angled-bottom {
      clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4vw),0 100%);
    }
    .floating-shape {
      position: absolute;
      border-radius: 62% 25% 48% 44%/50% 60% 43% 35%;
      opacity: .16;
      pointer-events:none;
      z-index:0;
    }
    .floating-shape-primary {
      background: radial-gradient(circle at 37% 40%, #457B9D 0%, #1D355733 80%);
      width: 216px;
      height: 216px;
      left: -70px;
      top: 32%;
      animation: floatY 3.5s ease-in-out infinite alternate;
    }
    .floating-shape-accent {
      background: radial-gradient(circle at 63% 60%, #E63946 0%, #457B9D55 90%);
      width: 164px;
      height: 164px;
      right: -60px;
      bottom: 19%;
      animation: floatY 3.2s ease-in-out infinite alternate-reverse;
    }
    @keyframes floatY {
      0% { transform:translateY(0);}
      100% { transform:translateY(-30px);}
    }
    .hero-bg-gradient {
      background: linear-gradient(120deg, #f6fafc 70%, #daf0fa 100%);
      position: relative;
      z-index: 2;
    }
    .section-divider {
      height: 7vw; 
      background: linear-gradient(120deg, #F1FAEE 60%, #1D3557 100%);
    }
    .gradient-border {
      border: 3px solid;
      border-image: linear-gradient(45deg, var(--primary), var(--accent), var(--cta)) 1;
      border-radius: 2rem;
    }
    .gallery-img-hover {
      transition: transform .25s cubic-bezier(.46,.03,.52,.96), box-shadow .18s;
      box-shadow: 0 2px 20px 0 rgba(69,123,157,0.11);
      border-radius: 1.1em;
      cursor: pointer;
    }
    .gallery-img-hover:hover, .gallery-img-hover:focus {
      transform: scale(1.09) rotate(1.2deg);
      box-shadow: 0 12px 48px 0 rgba(230, 57, 70, 0.19);
      z-index: 1;
    }
    .testimonial-avatar {
      border-radius: 100px!important;
      border: 2.5px solid var(--cta);
      box-shadow: 0 2px 16px 0 #E6394666;
    }
    .testimonial-card {
      background: var(--secondary);
      border-radius: 16px;
      padding: 1.8rem 1.4rem;
      box-shadow: 0 1.5px 16px 0 var(--background), 0 0.2px 0.2px 0 #0002;
      min-height: 170px;
      position: relative;
    }
    .testimonial-stars {
      color: #F9D65D;
      font-size: 1.2em;
      letter-spacing: .04em;
    }
    .course-card {
      border: none;
      border-radius: 32px;
      background: linear-gradient(143deg, #F8F8F8 65%, #F1FAEE 96%);
      box-shadow: 0 6px 48px #1d355722;
      transition: box-shadow .24s cubic-bezier(.59,.08,.1,.88), transform .23s;
      cursor: pointer;
      overflow: visible;
      position: relative;
      min-height:355px;
      will-change: transform;
    }
    .course-card:hover, .course-card:focus-within {
      box-shadow:0 16px 48px #e639462b, 0 8px 8px #457B9D12;
      transform: translateY(-9px) scale(1.03) rotate(-1.1deg);
      z-index:2;
    }
    .course-card .btn {
      font-weight: 700;
      margin-top: .8rem;
    }
    .accordion-header .accordion-button:focus, .accordion-header .accordion-button:active, 
    .accordion-header .accordion-button:not(.collapsed) {
      color: var(--accent)!important;
      background: #F1FAEE;
      border-color: var(--primary);
    }
    .section-bg-wave {
      background: linear-gradient(135deg, #F1FAEE 70%, #457B9D 100%);
      border-radius: 0 0 64px 64px / 0 0 32px 32px;
      min-height: 30vw;
      position: relative;
      overflow:hidden;
    }
    .map-iframe {
      border-radius: 1.2em;
      border: 4px solid var(--secondary);
      box-shadow: 0 2px 46px #E6394632;
      width: 100%;
      min-height: 230px;
      margin-bottom: 2rem;
    }
    .footer-main {
      background: var(--primary);
      color: var(--secondary);
      padding: 3rem 0 2.5rem 0;
      position: relative;
      box-shadow:0 -3px 14px #1d355722;
      z-index:6;
    }
    .footer-main a, .footer-main a:visited {
      color: var(--secondary);
      text-decoration:none;
      transition: color .2s, filter .18s;
      opacity:.98;
    }
    .footer-main a:hover, .footer-main a:focus {
      color: var(--accent);
      filter: brightness(1.03) drop-shadow(0 0 2px #fff1);
      text-shadow: 0 2px 8px #fff3;
    }
    .footer-logo {
      font-family: var(--headerFont);
      font-weight: 900;
      font-size:1.7em;
      letter-spacing:.06em;
      color: var(--secondary);
      text-shadow: 0 2px 8px var(--primary);
    }
    .newsletter-box {
      background: var(--secondary);
      border-radius: 2em;
      padding: 2.5rem 2rem 1.6rem 2rem;
      box-shadow:0 2px 36px #E6394618;
      color:var(--primary);
      margin-bottom: 1rem;
    }
    .newsletter-box label, .newsletter-box input, .newsletter-box button {
      font-size: 1.08em;
    }
    .back-to-top {
      background: linear-gradient(225deg, var(--accent) 30%, var(--primary) 85%);
      color: var(--secondary);
      border:none;
      border-radius: 2em;
      font-size:2rem;
      padding:.3em .8em;
      position: fixed;
      z-index: 1042;
      right: 3vw;
      bottom: 7vh;
      box-shadow: 0 2px 14px #E6394644;
      transition: background .18s, color .14s, transform .11s;
      opacity:.94;
      display: none;
    }
    .back-to-top.show {
      display: inline-block;
      animation: popin .38s;
    }
    @keyframes popin { 0% { transform:scale(.7) translateY(30px)} 100% {transform:scale(1) translateY(0)}}
    .social-icon-footer {
      width:40px;
      height:40px;
      border-radius:50%;
      box-shadow:0 1.5px 7px #2222;
      transition:transform .27s, box-shadow .18s, filter .25s;
      margin: .1rem 1rem .6rem 0;
      border:1px solid var(--accent);
      object-fit:cover;
      background:var(--secondary);
      opacity:.9;
      filter: grayscale(0.18);
    }
    .social-icon-footer:hover, .social-icon-footer:focus {
      filter: brightness(1.25) saturate(1.8) drop-shadow(0 0 8px var(--accent));
      transform:scale(1.13) rotate(-9deg);
      box-shadow:0 6px 28px #E6394666;
      opacity:1;
    }
    .form-control:focus {
      border-color: var(--accent);
      box-shadow: 0 3px 16px #457B9D22;
      outline: none;
    }
    .btn:focus, .btn:active {
      outline: 2px solid var(--accent)!important;
      box-shadow:0 0 12px var(--accent);
    }
    @media (min-width:768px) {
      .back-to-top { right:2vw; bottom:4vh;}
      .newsletter-box { margin: 0 auto;}
    }
    @media (max-width:991px) {
      .navbar-brand { font-size: 1.5rem;}
      .nav-link { font-size: 1rem;}
    }
    @media (max-width:576px) {
      .testimonial-card { padding:1.15rem .9rem;}
      .newsletter-box {padding: 1.3rem .85rem;}
      .footer-logo {font-size:1.18em;}
    }
    .cookie-banner {
      position: fixed;
      left: 0;
      right:0;
      bottom: 0;
      z-index: 1097;
      background: #1D3557EE;
      color: #fff;
      padding: 1rem 2rem 1rem 2rem;
      display: none;
      font-size:1.08em;
      box-shadow:0 -2px 14px #0002;
      border-radius: 16px 16px 0 0;
      animation: slideup .42s;
    }
    @keyframes slideup { 0% { transform:translateY(90px);} 100%{transform:translateY(0);} }
    .cookie-banner button {
      margin-left:1.2em;
      background: var(--accent);
      color: #FFF;
      padding: .45em 1.5em;
      font-weight: 700;
      font-size: 1.06em;
      border: none;
      border-radius: 1.2em;
      transition: background .19s, color .14s;
      min-width: 96px;
      min-height:44px;
    }
    .cookie-banner button:hover, .cookie-banner button:focus {
      background: var(--cta);
      color:var(--accent);
      outline:1.5px solid var(--secondary);
    }
    /* Floating particles animation for visual depth */
    .particles {
      position: absolute;
      pointer-events: none;
      z-index: 0;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
    .particle {
      position: absolute;
      width: 13px;
      height: 13px;
      background: radial-gradient(circle, var(--primary) 65%, var(--accent) 98%);
      border-radius: 50%;
      opacity: .13;
      animation: moveParticle 7s linear infinite alternate;
    }
    .particle.p1 { left: 7%; top: 81%; animation-delay: 0.3s;}
    .particle.p2 { left: 67%; top: 11%;animation-delay: .9s;}
    .particle.p3 { left: 44%; top: 47%;animation-delay: 1.7s;}
    .particle.p4 { left: 89%; top: 62%;animation-delay: 2.1s;}
    .particle.p5 { left: 27%; top: 17%;animation-delay: 3.2s;}
    @keyframes moveParticle {
      0% { transform:scale(.8) translateY(0);}
      100% { transform:scale(1.15) translateY(-18px);}
    }
    /* Creative text rotation in hero tagline (for strong emphasis) */
    .hero-tagline-rotate {
      display: inline-block;
      transform: rotate(-2.6deg);
      background: linear-gradient(90deg,var(--accent) 25%,var(--cta) 65%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-weight: 900;
      font-family: var(--headerFont);
      letter-spacing: 0.06em;
      font-size: 1.3em;
    }
    /* 3D-like hover tilt for course cards */
    .course-card-tilt {
      transition: transform 0.22s cubic-bezier(.46,.03,.52,.96), box-shadow .21s;
      will-change: transform;
    }
    .course-card-tilt:hover { 
      transform: perspective(460px) rotateY(8deg) scale(1.04) translateY(-5px)!important;
      box-shadow:0 12px 44px #1d355755, 0 5px 8px #E639463c;
    }
    /* Scroll animations */
    .scroll-animated {
      opacity: 0;
      transform: translateY(56px);
      transition: opacity .68s cubic-bezier(.46,.03,.52,.96), transform .67s cubic-bezier(.46,.03,.52,.96);
    }
    .scrolled-in {
      opacity: 1!important;
      transform: none!important;
    }
    /* Focus ring for accessibility */
    :focus-visible {
      outline: 2px solid var(--accent)!important;
      box-shadow: 0 0 13px var(--accent);
    }