html {
  scroll-behavior: smooth;
}
   /* ========================= */
/* ✅ Gilroy Font Import */
/* ========================= */
@font-face {
  font-family: 'Gilroy';
  src: url('assets/fonts/Gilroy/Gilroy-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: 'Gilroy';
  src: url('assets/fonts/Gilroy/Gilroy-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Gilroy';
  src: url('assets/fonts/Gilroy/Gilroy-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Gilroy';
  src: url('assets/fonts/Gilroy/Gilroy-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Gilroy';
  src: url('assets/fonts/Gilroy/Gilroy-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Gilroy';
  src: url('assets/fonts/Gilroy/Gilroy-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Gilroy';
  src: url('assets/fonts/Gilroy/Gilroy-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: 'Gilroy';
  src: url('assets/fonts/Gilroy/Gilroy-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
}

/* ========================= */
/* ✅ Base Styles */
/* ========================= */
:root{
  --bg-left: #eaf2ff;
  --bg-right: #f6ffe8;
  --nav-height: 72px;
  --nav-padding: 28px;
  --accent-neon: #d0f102;
  --text-dark: #071a26;
  --muted: #475569;
  --primary-blue: #167bff;
  --max-width: 1180px;
}

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

body{
  font-family: "Gilroy", sans-serif; /* 👈 Force Gilroy globally */
  background: linear-gradient(120deg, var(--bg-left) 0%, #ffffff 40%, var(--bg-right) 100%);
  color:var(--text-dark);
}

    /* ---------- Header ---------- */
    header{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      height: var(--nav-height);
      padding: 0 var(--nav-padding);
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: white;
      /* box-shadow: 0 2px 6px rgba(0,0,0,0.05); */
    }
    #logo{
      display:flex;
      align-items:center;
      /*gap:8px;*/
      font-weight:700;
      font-size:20px;
      color:#0e63b6;
      margin-right: 32px;
    }
    .nav-left{
      display:flex;
      align-items:center;
      flex:1; /* push actions to far right */
      /*gap: 10px;*/
    }
    nav ul{
      list-style:none;
      display:flex;
      gap:35px;
      align-items:center;
      font-weight:400;
      color:black;
      font-size: 16px;
    }
    nav ul li{
      cursor:pointer;
      transition:color 0.2s ease;
    }
    nav ul li:hover{
      color:var(--primary-blue);
    }

nav a {
  text-decoration: none;
  color: #333;
  font-weight: 400;
  transition: color 0.3s;
  /* font-size: 12px; */
}

nav a:hover {
  color: #2563eb;
}
    .nav-actions{
      display:flex;
      gap:12px;
      align-items:center;
    }

    .nav-actions a{
        text-decoration: none;
  transition: color 0.3s;
    }
    .btn{
      padding:10px 16px;
      border-radius:8px;
      font-weight:600;
      font-size:14px;
      cursor:pointer;
      border:1px solid transparent;
      background:transparent;
      transition: all 0.2s ease;
    }
    .btn-outline{
      border-color:#cfe6ff;
      color:var(--primary-blue);
    }
    .btn-outline:hover{
      background:#eaf4ff;
    }
    .btn-primary{
      background:var(--primary-blue);
      color:white;
      box-shadow:0 6px 18px rgba(22,123,255,0.18);
    }
    .btn-primary:hover{
      background:#0f63d0;
    }
    
     .btn-primaryy{
      background:var(--primary-blue);
      color:white;
      box-shadow:0 6px 18px rgba(22,123,255,0.18);
    }

    .btn-primaryy:hover{
      background:#0f63d0;
    }
    
    .btn.btn-primary{
        color:white;
    }

    /* ---------- Hero ---------- */
    .hero{
      width:100%;
      max-width:var(--max-width);
      padding: calc(var(--nav-height) + 46px) 28px 80px;
      margin:0 auto;
      text-align:center;
      /* margin-top: 30px; */
      
    }
    .hero-inner{
      max-width:980px;
      margin:0 auto;
    }
    .eyebrow{
      font-size:14px;
      color:var(--muted);
      margin-bottom:10px;
      font-weight:500;
    }
    .title{
      /* font-weight:700; */
      font-size:65px;
      line-height: 1.4;
      letter-spacing:-1px;
      color:var(--text-dark);
    }
    .title .highlight{
      display:inline-block;
      background:var(--accent-neon);
      padding: 0px 10px;           /* remove padding so no extra space */
    /* line-height: 1;    */
      border-radius:10px;
      transform:translateY(6px);
      /* margin-top:18px; */
      font-size: 72px;
      /* font-weight:800; */
      margin-bottom: 22px;
      line-height: 1.4;
      box-shadow: 0 6px 16px rgba(0,0,0,0.04);
    }
    .sub{
      margin-top:26px;
      font-size:18px;
      color: black;
      max-width:680px;
      margin-left:auto;
      margin-right:auto;
      line-height:1.6;
    }
    .cta{
      margin-top:36px;
    }
    .cta-btn{
      padding:12px 20px;
      border-radius:10px;
      font-weight:700;
      font-size:16px;
      border:none;
      cursor:pointer;
      background:var(--primary-blue);
      color:white;
      box-shadow:0 8px 28px rgba(22,123,255,0.22);
      text-decoration:none;
      display:inline-block;
      transition: background 0.2s ease;
    }
    .cta-btn:hover{
      background:#0f63d0;
    }

  .nav-link {
  position: relative;
  text-decoration: none;
  color: #000;
  padding: 8px 14px;
  transition: color 0.3s ease;
  font-weight: 500;
  display: inline-flex;
  justify-content: center;
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  height: 2px;
  background: #2a7bff;
  transition: width 0.3s ease;
  width: 0;
}

/* Active state */
.nav-link.active::after {
  width: calc(100% - 28px); /* subtract left+right padding (14px each) */
}

.nav-link.active {
  color: #2a7bff;
  font-weight: 600;
}


 

    /* ---------- Hamburger + Mobile Menu ---------- */
    /* Hamburger Button */
.hamburger {
  display: none; /* show only on mobile with media queries */
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--text-dark);
  z-index: 1600;
  position: relative;
}

/* Overlay behind mobile menu */
.mobile-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 1400;
}

.mobile-overlay.show {
  opacity: 1;
  pointer-events: all;
}

/* Mobile Menu */
.mobile-menu {
  position: fixed;
  top: 0;
  right: -100%; /* hidden by default */
  width: 100%; /* optional: adjust menu width */
  max-width: 400px;
  height: 100vh;
  background: #fff;
  box-shadow: -4px 0 10px rgba(0, 0, 0, 0.15);
  transition: right 0.3s ease;
  padding: 24px;
  display: flex;
  flex-direction: column;
  z-index: 1500;
}

.mobile-menu.show {
  right: 0; /* slide in */
}

/* Menu List */
.mobile-menu ul {
  list-style: none;
  padding: 60px 0 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-dark);
}

/* Nav Links */
.mobile-menu .nav-link {
  text-decoration: none;
  color: var(--text-dark);
  transition: color 0.2s ease;
}

.mobile-menu .nav-link:hover {
  color: var(--primary-color);
}

/* Buttons inside mobile menu */
.mobile-menu .btn {
  padding: 10px 18px;
  font-size: 16px;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

/* Close Button */
.close-btn {
  background: none;
  border: none;
  font-size: 26px;
  cursor: pointer;
  position: absolute;
  top: 16px;
  right: 18px;
  z-index: 1600;
}

/* Optional: Media Queries */
@media (max-width: 1024px) {
  .hamburger {
    display: block;
  }
}


    /* ---------- Responsive ---------- */
    @media (max-width:1024px){
      .title{font-size:64px;}
    }
    @media (max-width:768px){
    nav{
        display:none;
    }
      
    .hamburger{
        display:block;
    }
      
    .title{font-size:48px;}
      
    .title .highlight{
        display:block;
        padding:12px 18px;
        font-size:44px;
    }
      
    
    /* .hero{padding:calc(var(--nav-height) + 40px) 18px 80px;} */
    }
    @media (max-width:480px){
      .title{
        font-size:36px;
    }
      .title .highlight{
        display: inline;
        font-size:32px;
        padding:2px 12px;}
 .btn{
      padding:5px 5px;
      border-radius:6px;

    }
        
    }

       .mobile-break {
  display: none;
  
     
}
@media (max-width: 600px) {
  .mobile-break {
    display: block;
  }
}

    /* -----------------------------------video---------------------------------------- */

    .creator-first {
      max-width: 1180px;
      margin: 0 auto;
      text-align: center;
      margin-top: -40px;
    }

    /* Buttons Row */
    .video-tabs {
        display: flex;
  justify-content: center;
  gap: 15px;
  /* margin-bottom: 40px; */
  flex-wrap: wrap;
    }

    .video-tabs button {
       padding: 10px 18px;
  border: 1.5px solid #042143;
  background: #fff;
  color: #0f172a;
  font-weight: 400;
  font-size: 14px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
    }

      .video-tabs button:hover {
       border-color: #2A7BFF;
  color: #2A7BFF;
    }

    .video-tabs button.active{
       border-color: #2A7BFF;
  color: #2A7BFF;
  box-shadow:0 8px 28px rgba(22,123,255,0.15);
  font-weight: 600;
    }


    .role-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.role-buttons button {
  padding: 10px 18px;
  border: 1.5px solid #cbd5e1;
  background: #fff;
  color: #0f172a;
  font-weight: 300;
  font-size: 13px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.role-buttons button.active,
.role-buttons button:hover {
  border-color: #2A7BFF;
  color: #2A7BFF;
}

    /* Video wrapper */
    .video-wrapper {
      position: relative;
      width: 100%;
      max-width: 100%;
      margin: 0 auto;
      border-radius: 18px;
      overflow: hidden;
      background: linear-gradient(135deg, #2c3e50, #bd3f91);
      box-shadow: 0 12px 36px rgba(0,0,0,0.15);
    }

    .video-thumbnail img,
    .video-player {
      width: 100%;
      display: block;
      border-radius: 12px;
    }

    .play-btn {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 1);
      color: #000;
      font-size: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      cursor: pointer;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
      transition: all 0.3s ease;
      z-index: 10;
    }

    .play-btn:hover {
      background: #2a7bff;
      color: white;
      transform: translate(-50%, -50%) scale(1.1);
    }

    .play-btn i {
      pointer-events: none;
    }

    .video-player {
      width: 100%;
      display: none;
    }

    /* Text below video */
    .video-text {
      margin-top: 15px;
      margin-bottom: 10px;
    }

    .video-text h2 {
      font-size: 20px;
      font-weight: 800;
      color: #222;
      line-height: 1.1;
    }

    .video-text span {
      color: #9a9a9a;
      font-weight: 500;
    }

    /* ---------- Responsive ---------- */
    @media (max-width: 1024px) {
      .creator-first {
        padding: 60px 20px;
      }
      .video-text h2 {
        font-size: 44px;
      }
    }

    @media (max-width: 768px) {
      .creator-first {
        padding: 50px 18px;
      }
      .video-text h2 {
        font-size: 34px;
      }
      .play-btn {
        width: 64px;
        height: 64px;
        font-size: 36px;
      }
    }

    @media (max-width: 480px) {
      .creator-first {
        padding: 40px 16px;
        margin-top: -90px;
      }
      .video-text h2 {
        font-size: 26px;
      }
      .play-btn {
        width: 54px;
        height: 54px;
        font-size: 28px;
      }
    }

    /* -------------------------------------------------------------------------------------- */

.frustrations {
  background: radial-gradient(
      circle at top right, 
      rgba(42, 123, 255, 0.4) 0%,   /* light blue glow */
      transparent 20%
    ),
    radial-gradient(
      circle at bottom left, 
      rgba(155, 227, 75, 0.4) 0%,  /* green glow */
      transparent 10%
    ),
    linear-gradient(135deg, #062b3a, #0a3d68, #072436); /* base gradient */
  
  color: #fff;
  padding: 80px 5%;
  text-align: center;

  /* curved corners */
  border-top-left-radius: 40px;
  border-bottom-right-radius: 40px;

  /* max-width: 1400px; */
  margin: 80px auto;
}

.frustrations .section-title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 50px;
}

/* Cards grid */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1280px;
  margin: 0 auto;
}

.card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 30px 20px;
  text-align: left;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
}

.card .icon {
  margin-bottom: 20px;
}

.card h3 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.card p {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #cbd5e1;
}

/* Responsive */
@media (max-width: 992px) {
  .cards {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .cards {
    grid-template-columns: 1fr;
   
  }
  .frustrations {
    padding: 60px 20px;
  }

  /* .frustrations .section-title{
    font-size: 2.5rem;
  } */
}

@media (max-width: 480px) {
.frustrations {
     margin-top: 40px;
  }

  .frustrations .section-title{
    font-size: 2.5rem;
  }

}


/* ------------------------------------------------------------------------------------- */

#usecase {
  scroll-margin-top: 120px; /* adjust this value to match your header height */
}

.roles {
  max-width: 1430px;
  margin: 100px auto;
  padding: 0 5%;
  text-align: center;
  color: #0f172a;
}

.roles h2 {
  text-align: center;
  font-size: 3.4rem;
  margin-bottom: 15px;
  font-weight: 700;
}
.roles h2 span {
  background: #d8ff00;
  padding: 2px 8px;
  border-radius: 4px;
}

.roles-header p {
  font-size: 15px;
  line-height: 1.6;
  color: #475569;
  margin-bottom: 15px;
}

/* Buttons */
.role-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.role-buttons button {
  padding: 10px 18px;
  border: 1.5px solid #042143;
  background: #fff;
  color: #0f172a;
  font-weight: 400;
  font-size: 14px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.role-buttons button.active,
.role-buttons button:hover {
  border-color: #2A7BFF;
  color: #2A7BFF;
}

/* Images */
.role-images {
  display: flex;
  width: 100%;
  gap: 15px;
 
  height: 500px;
 
}

/* .role-images {
  display: flex;
  width: 100%;
  gap: 15px;
  height: 100%;
 
} */

.role-image {
  flex: 1;
  border-radius: 16px;
  overflow: hidden;
  transition: flex 0.5s ease;
  cursor: pointer;
  position: relative;
  background: #f1f5f9;
  filter: brightness(0.9);
}/* Add bottom shade to image */
.role-image::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70%; /* adjust shade height */
  background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0));
  z-index: 1;
}

/* Ensure overlay stays above shade */
.role-image .overlay {
  z-index: 2;
  position: absolute;
}


.role-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.2);
  transition: filter 0.3s ease;
}

.role-image:hover img {
  filter: brightness(0.8);
}

.role-image .overlay p:hover {
    .role-image img{
  filter: brightness(0.8);
}
}
/* Overlay content inside image */
/* Overlay content inside image */
.role-image .overlay {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: auto; /* keep only left side */
  color: #fff;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s ease;
  max-width: 280px; /* keeps text tidy */
  text-align: left; /* force left align */
}

.role-image .overlay h3 {
  font-size: 1.5rem;   /* smaller */
  font-weight: 600;
  margin-bottom: 6px;
}

.role-image .overlay p {
    font-size: 1rem;
    line-height: 1.4;
    margin-bottom: 10px;
    width: 600px;
}

/* Small devices (phones, less than 600px) */
@media (max-width: 599px) {
    .role-image .overlay p {
        font-size: 1rem;
        line-height: 1.4;
        margin-bottom: 10px;
        width: 100%; /* full width for small screens */
    }
}

/* Medium devices (tablets, 600px to 899px) */
@media (min-width: 600px) and (max-width: 899px) {
    .role-image .overlay p {
        font-size: 1rem;
        line-height: 1.4;
        margin-bottom: 10px;
        width: 90%;
    }
}

/* Large devices (desktops, 900px to 1199px) */
@media (min-width: 900px) and (max-width: 1199px) {
    .role-image .overlay p {
        font-size: 1rem;
        line-height: 1.4;
        margin-bottom: 10px;
        width: 600px;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .role-image .overlay p {
        font-size: 1rem;
        line-height: 1.4;
        margin-bottom: 10px;
        width: 600px;
    }
}


.role-image .overlay .btn {
  padding: 8px 14px;
  font-size: 0.85rem;
  border-radius: 6px;

  display: inline-block;
  padding: 8px 14px;
  background: #2A7BFF;
  color: #fff;
  text-decoration: none;
  transition: background 0.3s ease;
}

.role-image .overlay .btn:hover {
  background: #1E63D9;
}

/* Active expanded image */
.role-image.active {
  flex: 3;
}

.role-image.active img {
  filter: brightness(0.6);
}

.role-image.active .overlay {
  opacity: 1;
  transform: translateY(0);
}

/* -------------------------
   ✅ Media Queries
------------------------- */

/* Tablets */
@media (max-width: 1023px) {
  .roles-header h2 {
    font-size: 2rem;
  }
  .role-images {
    height: 280px;
  }
  .role-image .overlay h3 {
    font-size: 1.3rem;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .roles {
    padding: 0 20px;
  }
  .roles-header h2 {
    font-size: 1.8rem;
  }
  .role-buttons {
    flex-direction: column;
    gap: 12px;
  }
  .role-images {
    flex-direction: column;
    height: auto;
  }
  .role-image {
    flex: unset;
    height: 200px;
  }
  .role-image.active {
    flex: unset;
    height: 260px;
  }
  .role-image .overlay {
    bottom: 15px;
    left: 15px;
    right: 15px;
  }

  .role-images {
  display: flex;
  width: 100%;
  gap: 15px;
  height: 100%;
  margin-left: 0px;
 
}
}
 @media (max-width: 480px) {

    .roles{
        margin-top: 10px;
    }
 }


/* ------------------------------------------steps-------------------------------------------- */

.flow-section {
  position: relative; /* already set */
  background: white;
  padding: 100px 8% 8% 8%;
  overflow: hidden;
  /*z-index: 0; */
}

.flow-section::before,
.flow-section::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.6;
  /*z-index: -1;*/
  pointer-events: none; /* makes buttons clickable */
}
.flow-section::before {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle at center, rgba(179, 225, 0, 0.5));
  top: 10%;
  left: -100px;
}
.flow-section::after {
  width: 250px;
  height: 250px;
  background: radial-gradient(circle at center, rgba(0, 180, 255, 0.4));
  bottom: 15%;
  right: -80px;
}

/* Title */
.flow-section h2 {
  text-align: center;
  font-size: 3.4rem;
  margin-bottom: 60px;
  font-weight: 700;
}
.flow-section h2 span {
  background: #d8ff00;
  padding: 2px 8px;
  border-radius: 4px;
}

/* Step layout */
.step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 75px;
  gap: 5%; /* 10% gap between text & image */
}
.step.reverse {
  flex-direction: row-reverse;
}

/* Text */
.step-text {
  flex: 50%;
}
.step-text h3 {
  font-size: 30px;
  margin-bottom: 10px;
}
.step-text p {
  font-size: 17px;
  color: #444;
  margin-bottom: 25px;
}
.step-text .btn {
  background: #2a7bff;
  color: #fff;
  padding: 10px 18px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: 0.3s ease;
}
.step-text .btn:hover {
  background: #0fb7a7;
}

/* Images */
.step-images {
  flex: 40%;
  display: flex;
  justify-content: center;
}
.step-images img {
  width: 500px;
  max-width: 1000px;
  border-radius: 12px;
  /* box-shadow: 0 15px 40px rgba(0,0,0,0.15); */
  transition: transform 0.4s ease;
}
.step-images:hover img {
  transform: scale(1.05);
}

/* Responsive */

@media (max-width: 768px) {
  .step {
    flex-direction: column;
    gap: 20px;
    margin-bottom: 60px;
    text-align: left;   /* ✅ text starts from left */
  }

  .step.reverse {
    flex-direction: column;
  }

  .step-images {
    order: -1; /* show images first */
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .step-images img {
    max-width: 90%;  
    width: auto;
    height: auto;
  }

  .step-text {
    flex: 100%;
    padding: 0 10px;
  }

  .step-text h3 {
    font-size: 24px;
  }

  .step-text p {
    font-size: 14px;
    line-height: 1.6;
  }

  .step-text .btn {
    padding: 10px 16px;
    font-size: 15px;
  }

  .flow-section h2{
    font-size: 1.8rem;
  }

  .flow-section{
    padding: 10px 8px;
  }
}

 @media (max-width: 480px) {

    .flow-section{
    margin-top: -35px;
  }
 }



/* -----------------------------------form------------------------------------- */
#form-sec{
  scroll-margin-top: 180px; /* adjust this value to match your header height */
}

.formm-section h2 {
  text-align: center;
  font-size: 3.4rem;
  font-weight: 700;
}
.formm-section h2 span {
  background: #d8ff00;
  padding: 2px 8px;
  border-radius: 4px;
}


.form-section {
  position: relative;
  padding: 30px 8% 8% 8%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: gradientMove 10s infinite alternate;
}

/* Decorative gradient blobs */
.form-section::before,
.form-section::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.6;
}
.form-section::before {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle at center, rgba(179, 225, 0, 0.5));
  top: 10%;
  left: -100px;
}
.form-section::after {
  width: 250px;
  height: 250px;
  background: radial-gradient(circle at center, rgba(0, 180, 255, 0.4));
  bottom: 15%;
  right: -80px;
}

.containerr {
  width: 600px;
  background: white;
  padding: 30px;
  border-radius: 20px;
  box-shadow: 0 4px 15px rgba(118,75,162,0.5);
  position: relative;
}

/* =========================
   Stepper
========================= */
.stepper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  position: relative;
}

/* Connector line behind circles */
.stepper::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 40px;
  right: 40px;
  height: 4px;
  background: #e0e0e0;
  z-index: 0;
}

.step-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  /*flex: 1;*/
  position: relative;
  z-index: 1;
}

.stepp {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e0e0e0;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  transition: all 0.4s ease;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.stepp.active {
  background: linear-gradient(135deg, #667eea, #764ba2);
  box-shadow: 0 4px 15px rgba(118,75,162,0.5);
  transform: scale(1.1);
}

.stepp-label {
  margin-top: 8px;
  font-size: 14px;
  color: #444;
  text-align: center;
  font-weight: 500;
}

.stepp.active + .stepp-label {
  color: #764ba2;
  font-weight: 600;
}

/* =========================
   Form
========================= */


form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

input[type="file"], input[type="email"] {
  padding: 10px;
  border-radius: 10px;
  border: 2px solid rgb(218, 184, 247);
  transition: 0.3s;
}

input[type="file"]:hover, input[type="email"]:hover {
  border-color: #667eea;
  box-shadow: 0 0 8px rgba(102,126,234,0.3);
}

#scheduleBtn, #uploadBtn {
  padding: 12px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

input[type="file"]::file-selector-button {
  background: linear-gradient(45deg, #6a11cb, #2575fc);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: 0.3s;
}

input[type="file"]::file-selector-button:hover {
  background: linear-gradient(45deg, #2575fc, #6a11cb);
}
#scheduleBtn:not(:disabled):hover,
#uploadBtn:not(:disabled):hover {
  transform: scale(1.01);
  box-shadow: 0 6px 18px rgba(118,75,162,0.9);
}

/* Cursor style */
#scheduleBtn:disabled,
#uploadBtn:disabled {
  cursor: not-allowed; /* Shows the "disabled" cursor */
}


#confirmation {
  margin-top: 15px;
  font-weight: bold;
  text-align: center;
}

/* Calendly popup container */
.main-container {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
  position: relative;
}

/* Calendly Panel */
.calendly-inline-widget {
  min-width: 350px;
  height: 350px;
  display: none;
}

/* Disabled button styling */
#scheduleBtn:disabled {
  background: #ccc;
  color: #666;
  cursor: not-allowed;
  position: relative;
}

/* Tooltip */
#scheduleBtn:disabled::after {
  content: "Please upload PDF and enter email";
  position: absolute;
  /*bottom: 120%;*/
   left: 175%;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  z-index: 10;
}

#scheduleBtn:disabled:hover::after {
  opacity: 1;
}

/* =========================
   Responsive Layout
========================= */

/* Tablets (≤ 1024px) */
@media (max-width: 1024px) {
  .form-section {
    padding: 60px 5%;
  }
  .containerr {
    width: 100%;
    max-width: 400px;
  }
  .main-container {
    gap: 15px;
  }
  .calendly-inline-widget {
    min-width: 300px;
    height: 400px;
  }
  .stepp-label {
    font-size: 13px;
  }
}

/* Mobile (≤ 768px) */
@media (max-width: 768px) {
  .form-section {
    flex-direction: column;
    padding: 50px 5%;
  }
  .main-container {
    flex-direction: column;
    align-items: center;
    gap: 25px;
  }
  .containerr {
    width: 100%;
    max-width: 90%;
    padding: 20px;
  }
  .calendly-inline-widget {
    width: 100% !important;
    max-width: 500px;
    height: 500px;
  }
  /* Keep stepper horizontal, hide labels */
  .stepp-label {
    display: none;
  }
  .stepper {
    justify-content: space-between;
    flex-wrap: nowrap;
  }
  .stepper::before {
    left: 20px;
    right: 20px;
  }
}

/* Extra Small Screens (≤ 480px) */
@media (max-width: 480px) {
  .form-section {
    padding: 40px 4%;
  }
  .containerr {
    padding: 15px;
    border-radius: 15px;
  }
  .calendly-inline-widget {
    height: 450px;
  }
  #scheduleBtn,
  #uploadBtn {
    padding: 10px;
    font-size: 14px;
    border-radius: 10px;
  }
  input[type="file"],
  input[type="email"] {
    font-size: 14px;
    padding: 8px;
  }
  .stepper {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0;
  }
  .stepp-label {
    display: none;
  }
  .stepper::before {
    left: 20px;
    right: 20px;
  }
  
  #scheduleBtn:disabled::after {
  left: 49%;
  top:110%;
  font-size: 8px;
}

.formm-section h2 {
  font-size: 1.8rem;
}
}


   
/* -------------------------------------footer------------------------ */
/* Hero Section */
.heroo {
  position: relative;
  background: #001a2e; /* Deep navy base */
  padding: 120px 8% 80px;
  overflow: hidden;
  border-top-left-radius: 40px;
}

/* Gradient blobs */
.heroo::before,
.heroo::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.6;
  z-index: 0;
}
.heroo::before {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle at center, #0f6 0%, transparent 90%);
  top: 20%;
  left: 40%;
}
.heroo::after {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle at center, #05f 0%, transparent 90%);
  bottom: 20%;
  right: -10%;
}

.heroo .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8%;
  position: relative;
  z-index: 1;
}

/* Left Text */
.heroo-text {
  flex: 45%;
  color: white;
}
.heroo-text h1 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 1.2;
}
.heroo-text p {
  font-size: 1.1rem;
  color: #cfd7e0;
  margin-bottom: 30px;
}
.heroo-text .btn {
  background: #2a7bff;
  color: #fff;
  padding: 14px 28px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
  transition: 0.3s ease;
}
.heroo-text .btn:hover {
  background: #0fb7a7;
}

/* Right Image */
.heroo-image {
  flex: 55%;
  display: flex;
  justify-content: center;
  transform: rotate(-2deg);
}
.heroo-image img {
  width: 100%;
  max-width: 720px;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}

/* Footer */
.footer {
  background: #001a2e;
  padding: 80px 8% 40px;
  color: #cfd7e0;
}
.footer-container {
  max-width: 1400px;
  margin: 0 auto;
}
.footer-logo img {
  width: 140px;
  margin-bottom: 40px;
}
.footer-columns {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
}
.footer-col {
  flex: 1;
  min-width: 200px;
}
.footer-col h4 {
  font-size: 1rem;
  color: #fff;
  margin-bottom: 16px;
}
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-col ul li {
  margin-bottom: 10px;
  font-size: 0.9rem;
  color: #cfd7e0;
  cursor: pointer;
}
.footer-col ul li:hover {
  color: #fff;
}
.footer-bottom {
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: #8fa6bd;
}

.social-icons a {
  color: #cfd7e0;
  margin-left: 16px;
  font-size: 1rem;
  transition: color 0.3s ease;
}
.social-icons a:hover {
  color: #2a7bff; /* highlight on hover */
}

/* Mobile: stack text + icons */
@media (max-width: 480px) {
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
  .social-icons a {
    margin-left: 10px;
    margin-right: 10px;
  }
}


.footer-link{
text-decoration:none;
color:white;
}
/* ========================= */
/* ✅ Responsive Media Queries */
/* ========================= */

@media (max-width: 1200px) {
  .heroo-text h1 {
    font-size: 2.5rem;
  }
  .heroo-text p {
    font-size: 1rem;
  }
}

@media (max-width: 992px) {
  .heroo .container {
    flex-direction: column;
    text-align: center;
    gap: 40px;
  }
  .heroo-text {
    flex: 100%;
  }
  .heroo-image {
    flex: 100%;
    transform: rotate(0deg); /* remove angle for tablets */
  }
  .heroo-image img {
    max-width: 90%;
  }

  .footer-columns {
    flex-direction: column;
    gap: 30px;
  }
  .footer-col {
    min-width: 100%;
  }
}

@media (max-width: 768px) {
  .heroo {
    padding: 80px 6% 60px;
  }
  .heroo-text h1 {
    font-size: 2rem;
  }
  .heroo-text p {
    font-size: 0.95rem;
  }
  .heroo-text .btn {
    padding: 12px 22px;
    font-size: 0.9rem;
  }
  .footer {
    padding: 60px 6% 30px;
  }
  .footer-logo img {
    width: 120px;
  }
}

@media (max-width: 480px) {
  /*.heroo-text h1 {*/
  /*  font-size: 1.7rem;*/
  /*}*/
  .heroo-text p {
    font-size: 0.9rem;
  }
  .heroo-text .btn {
    padding: 10px 18px;
    font-size: 0.85rem;
  }
  .footer-bottom {
    text-align: center;
  }
}