* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* DNA Loading Screen Styles */
.Loader {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #f8f8f8;
    overflow: hidden;
    transition: ease 0.3s;
    z-index: 9999;
}

.Loader.hidden {
    animation: fadeOutt 1s;
    animation-fill-mode: forwards;
    overflow-y: visible;
}

@keyframes fadeOutt {
    100% {
        visibility: hidden;
        opacity: 0;
    }
}

.spinnerPairHolder {
    display: grid;
    position: absolute;
    width: 400px;
    height: 100px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.spinnerPairHolder .spinnerPair {
    position: relative;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

     .spinnerPairHolder .spinnerPair .spinnerPairCercle {
         position: absolute;
         width: 25px;
         height: 25px;
         top: 0;
         left: 50%;
         border-radius: 999px;
         transform: translateX(-50%);
         animation: loaderBallsSpin 1s infinite ease-in-out;
     }

.spinnerPairHolder .spinnerPair .spinnerPairCercle:nth-child(1) {
    background-image: linear-gradient(to top right, #667eea, #202749);
}

     .spinnerPairHolder .spinnerPair:nth-child(1) .spinnerPairCercle:nth-child(1) {
         animation-delay: 0s;
     }
     .spinnerPairHolder .spinnerPair:nth-child(2) .spinnerPairCercle:nth-child(1) {
         animation-delay: 0.15s;
     }
     .spinnerPairHolder .spinnerPair:nth-child(3) .spinnerPairCercle:nth-child(1) {
         animation-delay: 0.3s;
     }
     .spinnerPairHolder .spinnerPair:nth-child(4) .spinnerPairCercle:nth-child(1) {
         animation-delay: 0.45s;
     }
     .spinnerPairHolder .spinnerPair:nth-child(5) .spinnerPairCercle:nth-child(1) {
         animation-delay: 0.6s;
     }

.spinnerPairHolder .spinnerPair .spinnerPairCercle:nth-child(2) {
    background-image: linear-gradient(to top right, #0d5a7e 15%, #0ccee7);
}

     .spinnerPairHolder .spinnerPair:nth-child(1) .spinnerPairCercle:nth-child(2) {
         animation-delay: 0.5s;
     }
     .spinnerPairHolder .spinnerPair:nth-child(2) .spinnerPairCercle:nth-child(2) {
         animation-delay: 0.65s;
     }
     .spinnerPairHolder .spinnerPair:nth-child(3) .spinnerPairCercle:nth-child(2) {
         animation-delay: 0.8s;
     }
     .spinnerPairHolder .spinnerPair:nth-child(4) .spinnerPairCercle:nth-child(2) {
         animation-delay: 0.95s;
     }
     .spinnerPairHolder .spinnerPair:nth-child(5) .spinnerPairCercle:nth-child(2) {
         animation-delay: 1.1s;
     }

@keyframes loaderBallsSpin {
    0% {
        top: 0%;
        z-index: 2;
    }
    25% {
        transform: translateX(-50%) scale(1.2, 1.2);
    }
    50% {
        top: calc(100% - 25px);
    }
    75% {
        transform: translateX(-50%) scale(0.8, 0.8);
    }
    100% {
        top: 0%;
        z-index: 1;
    }
}
/* Global font reset */
html, body, * {
  font-family: 'Quicksand', sans-serif;
}
 
body {

    line-height: 1.6;
  
      background: linear-gradient(45deg, #667eea, #b4bde4, #e9b543);
            background-size: 400% 400%;
            animation: gradientShift 8s ease infinite;
        }

        @keyframes gradientShift {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }
        .container{
  max-width:1200px;
 margin: auto;
  background:#fff;
  min-height:100vh;

  /* border-radius:24px; */
  overflow:hidden;           /* <-- key */
}

.header{
  padding: 0;
  background: none;
  position: relative;
  overflow: hidden;              /* keeps the rounded corners clean */
  border-radius: 24px 24px 0 0;  /* or inherit from .container if you prefer */
  /* Optional fixed ratio instead of fixed height:
     aspect-ratio: 16/9;  */
  height: clamp(260px, 55vh, 720px);  /* responsive height */
}

.header::before{
  content: none;  /* removes the dotted SVG overlay */
}

.header-photo{
  width: 100%;
  height: 100%;
  object-fit: cover;   
  border-radius: 15px;  /* fills the box */
  background: #e0e0e0;
background: #e0e0e0;
box-shadow: 0 0 10px #667eea75;
         
  object-position: center;
  display: block;
}
        .logo {
            font-size: 2.5rem;
            font-weight: bold;
            margin-bottom: 0.5rem;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        .tagline {
            font-size: 1.2rem;
            margin-bottom: 1rem;
            opacity: 0.9;
        }

        .subtitle {
            font-size: 1rem;
            opacity: 0.8;
        }
            .nav {
  background:#f8f9fa;
  padding:1rem 0;
  border-bottom:1px solid #e9ecef;
  display:flex;
  justify-content:space-between;   /* space between logo and language selector */
  align-items:center;       /* vertical centring */
  padding-left: 2rem;
  padding-right: 2rem;
}

/* Language Selector Styles */
.language-selector {
  position: relative;
  display: inline-block;
  margin-left: auto;
}

.language-selector .selected-text {
  display: inline-block;
  padding: 0.8rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  color: #000;
  background: #fff;
  border: 2px solid #000;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.25s ease;
  min-width: 120px;
  text-align: center;
}

.language-selector .selected-text:hover {
  background: #667eea;
  color: #fff;
  border-color: #667eea;
  transform: scale(1.05);
  box-shadow: 0 0 20px 6px #667eea88;
}

.language-selector .dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background: #fff;
  border: 2px solid #000;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  z-index: 1000;
  min-width: 120px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.25s ease;
}

.language-selector.active .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.language-selector .dropdown-option {
  display: block;
  padding: 0.8rem 1.5rem;
  color: #000;
  text-decoration: none;
  transition: all 0.25s ease;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}

.language-selector .dropdown-option:last-child {
  border-bottom: none;
}

.language-selector .dropdown-option:hover {
  background: #667eea;
  color: #fff;
}

/* RTL Support for Arabic */
.rtl {
  direction: rtl;
  text-align: right;
}

.rtl .language-selector {
  margin-left: 0;
  margin-right: auto;
}

.rtl .language-selector .dropdown {
  right: auto;
  left: 0;
}

.brand-icon {
  width:10vh;    /* adjust size if needed */
  height:auto;

  
}


        .contact-info {
            display: flex;
            gap: 2rem;
            font-size: 0.9rem;
            color: #666;
        }

        .website {
            color: #667eea;
            text-decoration: none;
            font-weight: 600;
        }

        /* Main Content */
        .main-content {
            padding: 3rem 2rem;
        }

        .hero-section {
            text-align: center;
            margin-bottom: 4rem;
        }

        .hero-title {
            font-size: 2rem;
            color: #2c3e50;
       
            font-weight: 300;
            text-transform: capitalize;
        }

        .hero-subtitle {
            font-size: 1.2rem;
            color: #2c3e50;
            margin-bottom: 2rem;
        }

        /* Statistics */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            margin: 3rem 0;
        }

        .stat-card {
            background: linear-gradient(135deg, #667eea, #202749);
            color: white;
            padding: 1rem;
            border-radius: 15px;
            text-align: center;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            transform: translateY(0);
            transition: transform 0.3s ease;
        }

        .stat-card:hover {
            transform: translateY(-5px);
        }

        .stat-number {
            font-size: 3rem;
            font-weight: bold;
            margin-bottom: 0.5rem;
        }

        .stat-text {
            font-size: 1rem;
            opacity: 0.9;
        }

        .stat-icons {
            margin-bottom: 1rem;
        }

        .stat-icons svg {
            max-width: 100%;
            height: auto;
        }

        /* Disease Cards */
        .diseases-section {
            margin: 4rem 0;
        }

        .section-title {
            font-size: 2rem;
            color: #2c3e50;
            margin-bottom: 2rem;
            text-align: center;
        }

        .diseases-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 2rem;
        }

        .disease-card {
            background: white;
            border: 1px solid #e9ecef;
            border-radius: 15px;
            padding: 2rem;
            box-shadow: 0 5px 20px rgba(0,0,0,0.28);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .disease-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(0,0,0,0.15);
        }

        .disease-icon {
    width: 80px;
    height: 80px;
    background: #667eea;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.disease-icon img {
    width: 60%;
    height: 60%;
    object-fit: contain;
}


        .disease-title {
            font-size: 1.3rem;
            color: #2c3e50;
            margin-bottom: 1rem;
            font-weight: 600;
        }

        .disease-description {
            color: #666;
            margin-bottom: 1rem;
        }

        .variants-count {
            background: #f8f9fa;
            padding: 0.5rem 1rem;
            border-radius: 25px;
            font-size: 0.9rem;
            color: #667eea;
            font-weight: 600;
            display: inline-block;
        }

        /* Risk Chart */
        .chart-section {
            background: #f8f9fa;
            padding: 3rem 2rem;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.28);
            margin: 3rem 0;
            text-align: center;
        }

        .chart-container {
            max-width: 600px;
            margin: 0 auto;
            position: relative;
            height: 300px;
            background: white;
            border-radius: 10px;
            padding: 2rem;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
        }

        .chart-title {
            font-size: 1.2rem;
            color: #2c3e50;
            margin-bottom: 2rem;
        }

        /* Polygenic Risk Responsive */
        .polygenic-visual {
            background: rgba(255,255,255,0.1);
            padding: 2rem;
            border-radius: 10px;
            margin: 2rem 1rem;
            text-align: center;
        }

        .polygenic-visual svg {
            width: 100%;
            max-width: 400px;
            height: auto;
        }

        /* Risk Factors Responsive */
        .risk-factors-visual {
            background: rgba(255,255,255,0.1);
            padding: 2rem;
            border-radius: 15px;
            margin: 2rem 0;
            position: relative;
        }

        .risk-factors-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
            gap: 1rem;
            margin-bottom: 1rem;
        }

        .risk-factor-item {
            text-align: center;
            padding: 0.5rem;
        }

        .risk-factor-item .icon {
            font-size: 1.8rem;
            margin-bottom: 0.5rem;
            display: block;
        }

        .risk-factor-item .label {
            font-size: 0.75rem;
            line-height: 1.2;
        }

        /* Disease Cards with PNG support */
        .disease-icon {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #667eea, #202749);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1rem auto;
            font-size: 1.5rem;
            color: white;
            overflow: hidden;
        }

        .disease-icon img {
            width: 60px;
            height: 60px;
            object-fit: contain;
        }

        /* About Section */
        .about-section {
           background:#f8f9fa;
            color: #2c3e50;
            padding: 3rem 2rem;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.28);
            margin: 3rem 0;
        }
          .about2-section {
               background: linear-gradient(135deg, #667eea, #202749);
            color: #ffffff;
            padding: 3rem 2rem;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.28);
            margin: 3rem 0;
        }

        .about-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 3rem;
        }

        /* --- equal vertical gaps inside the about block --- */
.about-content{
    display:flex;              /* vertical stack */
    flex-direction:column;
    gap:2rem;                  /* ONE place to control spacing */
}

/* headline a bit larger but now inherits the gap so no manual margin */
.about-content h3{
    font-size:2rem;
    margin:0;
}

/* paragraphs lose their hard‑coded bottom margin – gap does the work */
.about-content p{
    margin:0;
    line-height:1.8;
    opacity:.9;
}
        /* Benefits */
        .benefits-section {
            margin: 4rem 0;
        }

        .benefits-list {
            list-style: none;
            max-width: 800px;
            margin: 0 auto;
        }

        .benefit-item {
            background: white;
            border-left: 4px solid #667eea;
            padding: 1.5rem;
            margin-bottom: 1rem;
            border-radius: 0 10px 10px 0;
            box-shadow: 0 3px 15px rgba(0,0,0,0.1);
        }

        .benefit-item::before {
            content: '✓';
            color: #667eea;
            font-weight: bold;
            margin-right: 1rem;
            font-size: 1.2rem;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .header {
                padding: 1.5rem;
            }

            .logo {
                font-size: 2rem;
            }

            .main-content {
                padding: 1rem;
            }

            .hero-title {
                font-size: 1.5rem;
            }
            .animated-underline{
                font-size: 2rem;
            }
          

            .contact-info {
                flex-direction: column;
                gap: 0.5rem;
            }

            .stats-grid {
                grid-template-columns: 1fr;
            }

            .diseases-grid {
                grid-template-columns: 1fr;
            }

            .about-grid {
                grid-template-columns: 1fr;
            }

            .chart-container {
                height: 250px;
                padding: 1rem;
            }

            .chart-container canvas {
                max-width: 100%;
            }

            .polygenic-visual {
                padding: 1rem;
            }

            .risk-factors-visual {
                padding: 1rem;
            }

            .risk-factors-grid {
                grid-template-columns: repeat(3, 1fr);
                gap: 0.8rem;
            }

            .risk-factor-item .icon {
                font-size: 1.5rem;
            }

            .risk-factor-item .label {
                font-size: 0.7rem;
            }

            .stat-icons svg {
                max-width: 120px;
            }

            .disease-icon {
                width: 60px;
                height: 60px;
            }

            .disease-icon img {
                width: 45px;
                height: 45px;
            }
        }

        @media (max-width: 480px) {
            .risk-factors-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .stat-number {
                font-size: 2.5rem;
            }

            .chart-container {
                height: 200px;
                padding: 0.5rem;
            }
        }

        /* Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .fade-in {
            animation: fadeInUp 0.6s ease forwards;
        }

        /* DNA Helix Animation */
        .dna-helix {
            position: absolute;
            right: 2rem;
            top: 50%;
            transform: translateY(-50%);
            width: 100px;
            height: 100px;
            opacity: 0.1;
        }

        .dna-strand {
            width: 4px;
            height: 100px;
            background: white;
            position: absolute;
            animation: rotate 4s linear infinite;
        }

        .dna-strand:nth-child(2) {
            animation-delay: 2s;
            left: 50px;
        }

        @keyframes rotate {
            from { transform: rotateY(0deg); }
            to { transform: rotateY(360deg); }
        }
        /* animated underline */
.animated-underline {
  position: relative;
  text-transform: capitalize;
  display: inline-block;
  font-size: 2.5rem;
}

/* the line */
.animated-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;          /* distance below text */
  height: 3px;           /* line thickness */
  width: 100%;
  background: #667eea;   /* line colour */
border-radius:3px;    
  transform-origin: left;
  transform: scaleX(0);
  animation: underlineLoop 2.5s ease-in-out infinite;
}

@keyframes underlineLoop {
  0%   { transform: scaleX(0); transform-origin: left;  }
  50%  { transform: scaleX(1); transform-origin: left;  }
  50.1%{ transform-origin: right; } /* pivot switch */
  100% { transform: scaleX(0); transform-origin: right; }
}
/* CTA button */
.cta-button{
  display:inline-block;
  margin: 2rem auto; /* vertical spacing + horizontal centering */
  padding:0.8rem 2rem;
  font-size:1rem;
  font-weight:600;
  color:#000;
  background:#fff;
  border:2px solid #000;
  border-radius:50px;                 /* pill shape */
  text-decoration:none;
  cursor:pointer;
  animation:pumpGlow 2.2s ease-in-out infinite;
  transition:all .25s ease;           /* smooth stop on hover */
}

/* on hover: hold the "up" state, no animation */
.cta-button:hover{
  animation:none;
  transform:scale(1.05);
  box-shadow:0 0 20px 6px #667eea88;
  background:#667eea;
  color:#fff;
  border-color:#667eea;
}


/* keyframes for pumping + shadow glow */
@keyframes pumpGlow{
  0%   {transform:scale(1);   box-shadow:0 0 0 0 #667eea00;}
  50%  {transform:scale(1.05);box-shadow:0 0 20px 6px #667eea88;}
  100% {transform:scale(1);   box-shadow:0 0 0 0 #667eea00;}
}
/* === SQUARE HERO BANNER ===================================== */
.gb-layout-hero-1{
  position:relative;
   width:80%;               /* shrinks to 80 % of parent */
  margin:0 auto;   
  aspect-ratio:1 / 1;                 /* <— square shape */
  overflow:hidden;
  display:flex;
  scale:1;
  align-items:center;
  border-radius: 15px;
  justify-content:center;
}

/* background GIF fills banner */
.gb-layout-hero-1 .gb-container-image-wrap,
.gb-layout-hero-1 .gb-container-image-wrap img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
    object-position:center;
}

/* dark overlay */
.gb-layout-hero-1::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0, 0, 0, 0.801);
  z-index:0;
}

/* content on top */
.gb-layout-hero-1 .gb-container-content{
  position:relative;
  z-index:1;
  max-width:700px;
  padding:0 5%;
  text-align:center;
  color:#fff;
}

/* headline & paragraph sizes */
.gb-layout-hero-1 h2{
  font-size:clamp(1.8rem,4vw,2.8rem);
  margin-bottom:1rem;
  line-height:1.25;
}
.gb-layout-hero-1 p{
  font-size:clamp(1rem,2.2vw,1.2rem);
  line-height:1.6;
}

        /* User Info Card */
        .user-info-card {
          background: linear-gradient(135deg, #667eea, #202749);
            color: white;
            padding: 2.5rem;
            border-radius: 20px;
            margin: 3rem auto;
            max-width: 500px;
            box-shadow: 0 20px 60px rgba(102, 126, 234, 0.3);
        }

        .user-info-card h3 {
            text-align: center;
            font-size: 1.5rem;
            margin-bottom: 2rem;
            color: white;
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 600;
            color: white;
        }

        .form-group input,
        .form-group select {
            width: 100%;
            padding: 1rem;
            border: none;
            border-radius: 10px;
            font-size: 1rem;
            background: rgba(255, 255, 255, 0.9);
            transition: all 0.3s ease;
        }

        .form-group input:focus,
        .form-group select:focus {
            outline: none;
            background: white;
            box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
        }
.cta2-button {
    display: block;
    width: 100%;
    padding: 1.2rem 2rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: #667eea;
    background: white;
    border: none;
    border-radius: 50px;
    text-decoration: none;
    cursor: pointer;
    text-align: center;
    transition: all 0.5s ease;
    margin-top: 1rem;
    animation: pumpGlow 2.2s ease-in-out infinite;
}

.cta2-button:hover {
    animation: none; /* stop pumping */
    background: #667eea; /* blue background */
    color: white;
    box-shadow: 0 0 25px 10px rgba(255, 255, 255, 0.9); /* keep strong white shadow */
}
/* WhatsApp floating button */
.whatsapp-float{
  position:fixed;
  bottom:22px;
  right:22px;
  width:58px;
  height:58px;
  background:#25D366;
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 25px rgba(0,0,0,.25);
  z-index:1000;
  transition:transform .25s;

  text-decoration:none;            /* <‑‑ remove underline */
}
.whatsapp-float:hover{transform:scale(1.05);}
.whatsapp-float i   {font-size:28px;line-height:0;color:#fff;}

/* Floating Share button (left) */
.share-float{
  position:fixed;
  bottom:22px;
  left:22px;
  width:58px;
  height:58px;
  background:#e63946;           /* red */
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 25px rgba(0,0,0,.25);
  z-index:1000;
  transition:transform .25s;
  text-decoration:none;          /* no underline */
}
.share-float:hover{ transform:scale(1.05); }
.share-float i{ font-size:26px; line-height:0; color:#fff; }

/* Fallback share panel */
.share-panel{
  position:fixed;
  bottom:88px;                   /* just above the button */
  left:22px;
  background:#fff;
  border-radius:14px;
  padding:.6rem;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  z-index:1001;
  width:220px;
  display:none;
}
.share-panel.open{ display:block; animation:fadeInUp .18s ease; }

.share-option{
  display:flex;
  align-items:center;
  gap:.6rem;
  width:100%;
  border:0;
  background:transparent;
  padding:.55rem .6rem;
  border-radius:10px;
  cursor:pointer;
  font-weight:600;
  color:#2c3e50;
}
.share-option:hover{ background:#f2f4f8; }
.share-option i{ width:20px; text-align:center; }

/* small toast for "copied" */
.copy-toast{
  position:fixed;
  bottom:160px;
  left:22px;
  background:#2c3e50;
  color:#fff;
  padding:.4rem .6rem;
  border-radius:8px;
  font-size:.85rem;
  opacity:0;
  transform:translateY(6px);
  transition:all .25s ease;
  z-index:1002;
}
.copy-toast.show{ opacity:1; transform:translateY(0); }

/* Selection Cards Section */
.selection-section {
    padding: 4rem 2rem;
    text-align: center;
}

.selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 0;
}

.selection-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 2px solid transparent;
}

.selection-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    border-color: #667eea;
}

.card-image {
    width: 100%;
    height: 250px;
    overflow: hidden;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.selection-card:hover .card-image img {
    transform: scale(1.05);
}

.card-content {
    padding: 2rem;
    text-align: center;
}

.card-content h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 1rem;
}

.card-content p {
    color: #666;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.card-content .cta-button2 {
    display: inline-block;
    background: linear-gradient(135deg, #667eea, #202749);
    color: white;
    padding: 12px 24px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3);
}

.card-content .cta-button2:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
    background: linear-gradient(135deg, #667eea, #202749);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .selection-grid {
        grid-template-columns: 1fr;
        padding: 0;
        margin: 0;
    }
    
    .selection-card {
        margin: 0;
    }
    
    .card-content {
        padding: 1.5rem;
    }
}