@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Elms+Sans:ital,wght@0,100..900;1,100..900&family=Karla:ital,wght@0,200..800;1,200..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
/* CSS Document */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
}
    body{background:#F7F8F9; color:#222;}

    p{
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: 0.03rem;
}
/* Frosted glass overlay */
    .loader-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.15);
      backdrop-filter: blur(3px);
      -webkit-backdrop-filter: blur(3px);
      min-height: 100vh;
      z-index: 9998;
      animation: fadeIn 0.3s ease-in;
    }
    
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    
    /* Loader center container */
    .loader-center {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      justify-content: center;
      align-items: center;
      pointer-events: none;
      z-index: 9999;
    }
    
    /* Spinning ring */
    .loader-ring {
      position: absolute;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      animation: ring 3s linear infinite;
      will-change: transform;
    }
    
    @keyframes ring {
        0%{
    transform: rotate(0deg);
    box-shadow: 5px 5px 2px #e65c00;
  }
  25%{
    transform: rotate(90deg);
    box-shadow: 5px 5px 2px #821B3B;
  }
  50%{
    transform: rotate(180deg);
    box-shadow: 5px 5px 2px #7a01b2;
  }
  75%{
    transform: rotate(270deg);
    box-shadow: 5px 5px 2px #0f1961;
  }
  100%{
    transform: rotate(360deg);
    box-shadow: 5px 5px 2px #e65c00;
  }
}
    
    .loader-ring:before {
      position: absolute;
      content: '';
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
      border-radius: 50%;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    }
    
    /* Text container */
    .loader-text-wrapper {
      position: relative;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .loader-text-wrapper span {
      position: absolute;
      font-size: 30px;
      text-transform: uppercase;
      letter-spacing: 1px;
    }
    
    .loader-text_1, .loader-text_2 {
      color: #ffffff;
      opacity: 0;
      font-weight: 600;
      text-shadow: 0 0 20px rgba(0, 0, 0, 0.9),
                   0 2px 4px rgba(255, 255, 255, 0.3);
    }
    /* Care text */
    .loader-text_1 {
      animation: showCare 3s ease-in-out infinite;
    }
    
    /* Medox text */
    .loader-text_2 {
      animation: showMedox 3s ease-in-out infinite;
    }
    
    @keyframes showCare {
      0%   { opacity: 0; }
      15%  { opacity: 1; }
      40%  { opacity: 1; }
      50%  { opacity: 0; }
      100% { opacity: 0; }
    }
    
    @keyframes showMedox {
      0%   { opacity: 0; }
      50%  { opacity: 0; }
      60%  { opacity: 1; }
      90%  { opacity: 1; }
      100% { opacity: 0; }
    }

    /* Hide loader class */
    .loader-hidden {
      display: none;
    }
/* Scroll Bar Functionality */
  ::-webkit-scrollbar{
    width: 0.9rem;
  }
  ::-webkit-scrollbar-track{
    background:linear-gradient(75deg, #D8E8F9 0%, #baafce 100%);
  }
  ::-webkit-scrollbar-thumb{
    background: #0f1961;
  }
  ::-webkit-scrollbar-thumb:hover{
    background: #0074B7;
  }
#scrollTopBtn {
  position: fixed;
  bottom: 26px;
  right: 26px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  animation: float 2.4s ease-in-out infinite;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease,
    box-shadow 0.3s ease;
    background: 0.3s ease;
  z-index: 999;
}

/* Show on scroll */
#scrollTopBtn.top_show {
  opacity: 1;
  visibility: visible;
}

/* Arrow */
.top_arrow {
  font-size: 24px;
  font-weight: 700;
  color: #0f1961ff;
  letter-spacing: -2px;
  transform: translateY(1px);
}

/* Hover */
#scrollTopBtn:hover {
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.25),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    background: #0f1961ff;
    .top_arrow{
      color: white;
    }
}

/* Floating animation */
@keyframes float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}
.arrow {
  animation: arrowBounce 1.2s infinite;
}

@keyframes arrowBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
  /* Terms & Privacy Dialog Box Coding */
.terms-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
  opacity: 0;
  transition: .3s ease;
}

/* Show Active Modal */
.terms-overlay.tcp-active {
  display: flex;
  opacity: 1;
}

/* Modal Box */
.term-box {
  width: 90%;
  max-width: 600px;
  max-height: 700px;
  background: #0D1B2A;
  color: #EAF6FF;
  font-family: 'Roboto', sans-serif;
  padding: 40px 30px;
  border-radius: 8px;
  transform: translateY(30px);
  transition: .3s ease;
}

/* Animate Box When Active */
.terms-overlay.tcp-active .term-box { transform: translateY(0); }

/* Scrollable Body */
.terms-text {
  max-height: 400px;
  overflow-y: auto;
  padding-right: 10px;
  font-size: 1rem;
  line-height: 1.55;
  text-align: justify;
}

/* Scrollbar Style */
.terms-text::-webkit-scrollbar { width: 4px; }
.terms-text::-webkit-scrollbar-thumb { background: #60A3D9; }

/* Headers */
.term-box h2 { text-align:center; margin-bottom:10px; text-transform:uppercase; color:#4DA3FF; }
.terms-text ol li { margin-bottom:15px; }
.terms-text h3 { margin:8px 0; color:#4DA3FF; font-size:1.1rem; }

/* Footer Text */
.term-box h4 { text-align:center; margin:12px 0; }
.term-box h4 span { color:#d13639; }
.terms-text ol {
    list-style: decimal;
    margin-left: 25px;
}

.terms-text ol li::marker {
    font-weight: 700;
    font-size: 17px;
    color: #4DA3FF; /* Matches your blue theme */
}
.term-box strong{
  color: #4DA3FF;
}
.term-box hr{
  margin: 15px auto;
  width: 80%;
}
.term-box td{
  padding-inline: 10px;
}
/* Buttons */
.tcp-button { display:flex; gap:10px; margin-top:15px; }
.tcp-btn {
  flex:1; height:50px;
  border:0; border-radius:6px;
  font-size:17px; font-weight:600;
  cursor:pointer; color:#fff;

}
.tcp-blue-btn { background:#0074B7; }
.tcp-grey-btn { background:#475569; }
.tcp-btn:hover { opacity:.7; }
    /* Header */
/*Top header coding*/
.header{
      background:#F7F8F9;
      padding:18px 12px 5px 12px;
    }

    .container{
      width:100%;
      margin:0 auto;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:20px;
    }

    /* Logo */
    .logo{
      display:flex;
      align-items:center;
      gap:12px;
      min-width:0;
    }
.logo img{
	max-height: 60px;
	padding: 5px 5px 5px 15px;
}

    /* Header info wrapper (right side) */
    .header-info{
      display:flex;
      align-items:center;
      gap:18px;
    }
    /* Right grouped contact info */
    .contact-info{
      display:flex;
      align-items:center;
      gap:12px;
		margin-right: 15px;
    }
    /* Each info box (shared) */
    .info-box{
      display:flex;
      align-items:center;
      gap:8px;
      padding:8px 10px;
      border-radius:8px;
      cursor:pointer;
      position:relative;
      user-select:none;
      transition:transform .12s, background .12s;
      background:transparent;
      min-width:0;
    }
    .info-box:focus{
		outline:2px solid rgba(233,30,99,.14);
		outline-offset:2px;
}
    .info-box:hover{
		transform:translateY(-2px);
		background:#B7D7ED;
		color: white;
}

    .icon-circle{
      	width:36px;
		height:36px;
		border-radius:50%;
		display:flex;
		align-items:center;
		justify-content:center;
		background:#B7D7ED;
		color:#003B73;
		font-size:1rem;
		flex-shrink:0;
    }
.info-box:hover .icon-circle{
	background-color: #003B73;
	color: white;
}
    .info-text p{
      font: size 0.9rem; 
		line-height:1.15; 
		color:#222;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      max-width:220px;
    }
.info-text span {
	display: block;
	color: #666;
	font-size: 0.8rem;
}
    .info-text strong{
		display:block;
		font-weight:600;
		font-size:0.9rem;
}

    /* Tooltip (hidden by default) */
    .tooltip{
      position:absolute;
      left:50%;
      transform:translateX(-50%) translateY(6px);
      top:115%;
      background:#B7D7ED;
      color:#003B73;
      padding:6px 9px;
      border-radius:6px;
      font-size:0.8rem;
      opacity:0;
      pointer-events:none;
      transition:opacity .18s, transform .18s;
      white-space:nowrap;
      z-index:1;
    }
    .tooltip.show{
      opacity:1;
      transform:translateX(-50%) translateY(-6px);
    }

    /* Small arrow under tooltip */
    .tooltip::before{
      content:"";
      position:absolute;
      bottom: 100%;
      left: 50%;
      margin-left: -5px; /* Half of the border-width to center the arrow */
      border-width: 5px;
      border-style: solid;
      border-color: transparent transparent #555 transparent;
      
    }
    @media (max-width: 1400px) {
  .hide {
    display: none !important;
    visibility: hidden;
  }
  .mini-nv-dropdown {
    display: block!important;
    visibility: visible;
  }
}

    /* Responsive behavior */
    @media (max-width:850px){
      .container{padding:5px; gap:8px}
      /* Keep logo at left; control layout with header-info */
      .header-info{gap:8px; align-items:flex-start}

      /* Hide address to free space */
      .address{display:none}

      /* Make contact-info compact and stacked on the right */
      .contact-info{
        display:flex;
        flex-direction:row; /*type here column to change call and email orientation*/
        align-items:flex; /* right-aligned */
        gap:6px;
      }

      /* Reduce sizes to fit */
      .icon-circle{
		  width:30px;
		  height:30px;
		  font-size:0.8rem;
		}
      .info-box{padding:6px 8px}
      .info-text p{font-size:0.8rem; max-width:160px}
      .logo h1{font-size:1.1rem}
      .logo p{font-size:0.7rem}
      .tooltip{font-size:0.7rem; padding:5px 8px}
    }

    /* Very small screens: allow tiny shrink but keep clickable */
    @media (max-width:600px){
		.phone{display: none;}
      .info-text p{max-width:150px}
      .icon-circle{width:28px;height:28px}
      .logo .icon{width:40px;height:40px}
      .mini-nv-dropdown{display: none!important;}
      .nav-header-right .mini-btn-1{
        display: block!important;
        transform: scale(.9);
      }
      .mini-nav .mini-btn{
        display: none;
      }
    }
	@media (max-width:450px){
  .time{display: none;}
  
  /* ✅ Center logo perfectly */
  .logo {
    position: relative;
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }

  .logo img{
    max-height: 80px;
    padding: 10px;
    display: block;
    margin: 0 auto;
  }

  /* ✅ Stack header items vertically for clarity */
  .container {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  .header-info {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* ✅ Adjust nav for small screens */
  .mini-nav {
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 10px; 
  }

  .mini-nav a {
    font-size: 1rem;
    padding: 6px 12px;
  }
}

/* ✅ Mini Nav styling (fix hover effect visibility) */
.mini-nav {
  display: flex;
  gap: 15px;
  position: relative;
  margin-top: 25px;
  justify-content: center;
  flex-wrap: nowrap;
  text-align: center;
  z-index: 8; /* ensures hover span is visible */
}

.mini-nav a {
  position: relative;
  font-size: 1.1rem;
  color: #333;
  text-decoration: none;
  padding: 6px 12px;
  transition: .5s;
  display: inline-block;
  overflow: hidden;
  z-index: 3;
}

.mini-nav a:hover {
  color: #0074B7;
}

.mini-nav a span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-top: 2px solid #0074B7;
  border-radius: 15px;
  transform: scale(0) translateY(50px);
  opacity: 0;
  transition: .5s;
  z-index: -1;
}

.mini-nav a:hover span {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* ✅ Dropdown fix with visible hover animation */
.mini-nv-dropdown {
  position: relative;
  z-index: 999; /* keep dropdown trigger above sticky areas */
  display: none; /*issue convert to inlinee-blocl*/
}

/* ✅ Dropdown Content Always Above */
.mini-nv-dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: -50%;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  min-width: 200px;
  z-index: 10; /* SUPER HIGH to always stay above sticky/fixed elements */
  overflow: hidden;
  padding: 10px 0;
  text-align: center;
}

/* Show dropdown on hover */
.mini-nv-dropdown:hover .mini-nv-dropdown-content {
  display: block;
}

/* Dropdown links */
.mini-nv-dropdown-content a {
  position: relative;
  display: block;
  padding: 10px 20px;
  color: #333;
  text-decoration: none;
  transition: .5s;
  background: #fff;
  z-index: 10;
}

.mini-nv-dropdown-content a:hover {
  color: #0074B7;
  background: #f2f8ff;
}

/* Keep the animated hover border */
.mini-nv-dropdown-content a span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-bottom: 2px solid #0074B7;
  border-radius: 15px;
  transform: scale(0) translateY(30px);
  opacity: 0;
  transition: .5s;
  z-index: -1;
}
.mini-nv-dropdown-content a:hover span {
  transform: scale(1) translateY(0);
  opacity: 1;
}
/* Social Icon Styling (Modified from your provided example) */
.mini-nav .social-icon {  /*  Target icons specifically within .mini-nav */
  display: inline-block;
  font-size: 1.3rem;  /* Adjust as needed */
  line-height: 45px; /* Make sure this value is appropriate */
  text-align: center;
  color: #0f1961;      /* Icon color */
  margin: 0 8px;
  transition: .4s linear;
  position: relative;
  border-radius: 50%;  /* Make it circular */
  text-decoration: none; /* Remove underlines */
}

.mini-nav .social-icon::before, .mini-nav .social-icon::after {
  content: '';
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  transition: .4s linear;
  border-radius: 50%; /* Keep it circular */
}

.mini-nav .social-icon:hover {
  transform: scale(.8);
}

.mini-nav .social-icon:hover::before {
  border-left: 4px solid;
  border-right: 4px solid;
  transform: skewX(20deg);
}

.mini-nav .social-icon:hover::after {
  border-top: 4px solid;
  border-bottom: 4px solid;
  transform: skewY(-20deg);
}


/* Consultation Button */
.mini-btn {
  padding: 8px 16px;
  background-color: #003B73;
  color: white;
  border: none;
  border-radius: 20px;
  text-decoration: none;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
  display: inline-flex;        /* Use flexbox for vertical centering */
  align-items: center;        /* Vertically center the text */
  justify-content: center;   /* Horizontally center the text */
  height: 45px;             /* Match icon height */
  transition: 0.2s ease-in-out;
}

.mini-btn:hover {
  background-color: transparent;  /* Slightly darker on hover */
  border: 2px solid #003B73;
  color: black; /* Ensure text stays white on hover */
  transform: scale(0.9);
}
/* Main Nav Bar Coding */
.nav-container{
  width: 100%;
  margin:auto;
  padding:0 15px;
}
.nav-header{
  position: sticky;
  top: 0;
  width: 100%;
  padding-left: 20px;
  border-bottom: 1px solid hsla(0, 0%, 100%, 0.2);
  z-index: 7;
   background: linear-gradient(180deg, #D8E8F9 0%, #edf2f7 100%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}
.nav-header .nav-container{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-header .nav-main-logo img{
  vertical-align: middle;
  max-height: 40px;
  margin: 15px 0;
}
.nav-header .menu .head{
    display: none;
}
.nav-header .menu ul{
  list-style: none;
}
.nav-header .menu > ul > li{
  display: inline-block;
}
.nav-header .menu .dropdown{
    position: relative;
}
.nav-header .menu > ul > li:not(:last-child){
  margin-right: 20px;
}
.nav-header .menu a{
    text-decoration: none;
    text-transform: capitalize;
    font-size: 1rem;
    color: #0f1961;
    font-style: bold;
    font-weight: 600;
    line-height: 1.5;
    display: block;
}
.nav-header .menu > ul > li > a{
    padding: 18px 0;
}
.nav-header .menu > ul > .dropdown > a{
    padding-right: 15px;
}
.nav-header .menu i{
    font-size: 0.6rem;
    pointer-events: none;
    user-select: none;
    position: absolute;
    color: hsl(0, 0%, 100%);
    top: calc(50% - 5px);
}
.nav-header .menu > ul > li > i{
    right: 0;
}
.nav-header .menu .sub-menu{
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 230px;
    z-index: 1;
    transform-origin: top;
    transform: scaleY(0);
    visibility: hidden;
    opacity: 0;
    background: linear-gradient(180deg, #D8E8F9 0%, #DFD7EE 100%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}
.nav-header .menu li:hover > .sub-menu{
    opacity: 1;
    transform: none;
    visibility: visible;
    transition: all .3s ease;
}
.nav-header .menu .sub-menu a:hover {
  background-color: #003B73;
  border-left: 4px solid #f99720d0;
  color: white;
}
.nav-header .menu a:hover{
    color: #003B73;
}
.nav-header .menu .sub-menu a{
    padding: 6px 24px;
}
.nav-header .menu .sub-menu .dropdown > a{
    padding-right: 34px;
}
.nav-header .menu .sub-menu span{
    background-image: linear-gradient(hsl(0,0%,100%), hsl(0,0%,100%));
    background-size: 0 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size .5s ease;
}
.nav-header .menu span{
    background-image: linear-gradient(#0074B7,#003B73);
    background-size: 0 2px;
    background-repeat: no-repeat;
    background-position: center bottom;
    transition: background-size .5s ease;
}
.nav-header .menu li:hover > a span,
.nav-header .menu .sub-menu li:hover > a span{
    background-size: 100% 2px;
}
.nav-header .menu .sub-menu i{
    transform: rotate(-90deg);
    right: 24px;
}
.nav-header .menu .sub-menu-right{
    left: 100%;
    top: 0;
    /*for making right side sub menu just type left: auto and right: 100%*/
}
/*from here may be not count as nav coding*/
.nav-header-right{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav-header-right *{
  margin-left: 5px;
}
.nav-header-right .open-menu-btn{
  display: none;
}
.nav-header-right .mini-btn-1, .nav-header-right .mini-btn-2{
  border: 2px solid #003B73;
  border-radius: 5px;
  background-color: transparent;
  color: #0f1961;
  padding: 12px 28px;
  margin: -10px 12px;
  font-size: 1rem;
  cursor: pointer;
  display: none;
  transition: all 0.3s ease;
}
.nav-header-right .mini-btn-1:hover,
.nav-header-right .mini-btn-2:hover{
  background-color: #003B73;
  color: white;
}
/*from here mobile counting started*/
@media (max-width: 1024px){
  .mini-nav .mini-nv-dropdown{
    display: none!important;
  }
  .nav-header-right .mini-btn-2{
    display: block!important;
    transform: scale(.9);
  }
  .nav-header{
    padding: 12px 0;
 }
 .mini-nav{
    z-index: 7;
 }
 .nav-header .menu{
    position: fixed;
    right: 0;
    top: 0;
    width: 80%;
    height: 100%;
    background: linear-gradient(180deg, #D8E8F9 0%, #DFD7EE 100%);
    backdrop-filter: blur(10px); 
  -webkit-backdrop-filter: blur(10px); 
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
    padding: 15px 30px 30px;
    overflow-y: auto;
    z-index: 9;
    transform: translateX(100%);
    transition: transform .5s ease;
}
.nav-header .menu .dropdown.active > i{
    transform: rotate(180deg);
    background-color: hsla(0, 0%, 100%, 0.25);
}
.nav-header .menu .dropdown.active > .sub-menu{
    display: block;
}
.nav-header-right .open-menu-btn{
    display: inline-flex;
    position: absolute;
    align-items: center;
    justify-content: space-between;
    width: 25px;
    font-size: 1.5rem;
    color: #0f1961;
    background-color: transparent;
    position: relative;
    cursor: pointer;
    border: none;
    transition: all 0.3s ease;
 }
 .open-menu-btn:hover{
  transform: scale(1.2);
}
 .nav-header .menu .head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
 }
 .nav-header .menu .close-menu-btn{
    height: 35px;
    width: 35px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    cursor: pointer;
    border: none;
 }
 .nav-header .menu .close-menu-btn::before,
 .nav-header .menu .close-menu-btn::after{
    content: "";
    position: absolute;
    width: 80%;
    height: 2px;
    background-color: #0f1961;
 }
 .nav-header .menu .close-menu-btn::before{
    transform: rotate(45deg);
 }
 .nav-header .menu .close-menu-btn::after{
    transform: rotate(-45deg);
 }
    .nav-header .menu.open{
        transform: none;
    }
  .nav-header .menu > ul > li{
    display: block;
}
 .nav-header .menu > ul > li:not(:last-child){
    margin-right: 0;
 }
  .nav-header .menu li{
    border-bottom: 1px solid hsla(0, 0%, 100%, 0.25);}
     
 .nav-header .menu > ul > li > a{
    padding: 12px 0;
 }
 .nav-header .menu > ul > .dropdown > a{
    padding-right: 34px;
 }
  .nav-header .menu i{
    height: 30px;
    width: 30px;
    border: 1px solid hsls(0, 0%, 100%, 0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    cursor: pointer;
    top: 7px;
  }
   .nav-header .menu .sub-menu{
    position: static;
    transform: none;
    visibility: visible;
    opacity: 1;
    box-shadow: none;
    padding: 0;
    transition: none;
    width: 100%;
    display: none;
   }
    .nav-header .menu .sub-menu li:last-child{
    border: none;
    }
    .nav-header .menu .sub-menu a{
    padding: 12px 0 12px 15px;
    }
    .nav-header .menu .sub-menu .sub-menu a{
    padding-left: 30px;}
    .nav-header .menu .sub-menu .sub-menu .sub-menu a{
    padding-left: 45px;}
    .nav-header .menu .sub-menu span{
        background-image: none;
    }
    .nav-header .menu .sub-menu i{
        right: 0px;
        transform: none;
    }   
 }
 /*----for curtain code coding------*/
 .nav-overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 9;
  left: 0;
  top: 0;
  background-color: rgb(0, 0 , 0);
  background-color: rgba(0, 0 , 0,0.9);
  overflow-x: hidden;
  transition: 0.5s;
 }
.nav-overlay-content{
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}
.nav-overlay a{
  padding: 8px;
  text-decoration: none;
  font-size: 1.6rem;
  color: #818181;
  display: block;
  transition: all 0.3s ease;
}
.nav-overlay .nav-overlay-content span{
    background-image: linear-gradient(#0074B7,#003B73);
    background-size: 0 2px;
    padding: 8px;
    background-repeat: no-repeat;
    background-position: center bottom;
    transition: background-size .5s ease;
}
.nav-overlay .nav-overlay-content a:hover > span{
    background-size: 100% 2px;
}
.nav-overlay a:hover, .nav-overlay a:focus{
  
  color: #8ec1ee;
  transform: scale(1.3);
}
.nav-overlay .closebtn{
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 3.8rem;
}
@media (max-height: 450px){
  .nav-overlay a{font-size: 1.2rem;}
  .nav-overlay .closebtn {font-size: 2.5rem; top: 15px; right: 35px;}
}
/*for Consultation BTN pop up for contacting*/
    .cst-container {
  font-family: "Roboto", sans-serif;
  line-height: 1.5;
}
.cst-container {
  display: none;
  position: fixed; /* Start with fixed for better small-screen handling */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  background-color: rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease-in-out;
  overflow-y: auto;
}

@media (max-width: 850px) {
  .cst-container {
    align-items: flex-start; /* Align to the top on small screens */
    padding: 10px; /* Reduce padding on small screens */
  }

  .cst-form {
    margin-top: 20px; /* Add some top margin to the form */
    width: 100%; /* Ensure form takes full width */
    max-width: 100%; /* Remove max-width restriction */
  }

  .cst-contact-info {
    padding: 1.5rem; /* Further reduce padding */
  }

  .cst-form_base {
    padding: 1.5rem; /* Further reduce padding */
  }

  .circle {
    display: none; /* Hide circles on smaller screens if they cause issues */
  }

  .cst-contact-info:before {
    display: none; /* Hide pseudo-element */
  }
  .cst-big-btn {display: none;}
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (min-width: 851px) {
    .cst-small-btn{display: none;}
}
.cst-form {
  /* Existing styles... */
  position: relative;
}
.cst-close-btn{
    position: absolute;
    background: none;
    top: 10px;
    right: 15px;
    border: none;
    outline: none;
    pointer-events: auto;
    cursor: pointer;
    padding: 5px;
    z-index: 2000;
    transition: all 0.3s ease;
}
.cst-big-btn i{
    font-size: 1.8rem;
    color: #fff;
}
.cst-big-btn i:hover{
    transform: scale(1.3);
    color: #0074B7;
}
.cst-small-btn i{
    font-size: 1.8rem;
    color: #003B73;
}
.cst-small-btn i:hover{
    transform: scale(1.3);
    color: #0074B7;
}
.cst-form {
  width: 100%;
  max-width: 820px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  overflow: hidden;
  display: grid;
  position: relative;
  grid-template-columns: repeat(2, 1fr);
}

.cst-contact-form {
  background-color: #003B73;
  position: relative;
}

.circle {
  border-radius: 50%;
  background: linear-gradient(135deg, transparent 20%, #0074B7);
  position: absolute;
}

.circle.one {
  width: 130px;
  height: 130px;
  top: 160px;
  right: -40px;
}

.circle.two {
  width: 80px;
  height: 80px;
  top: 30px;
  right: 60px;
}
.circle.three {
  width: 100px;
  height: 100px;
  bottom: 30px;
  left: 10px;
}
.cst-contact-form:before {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  background-color: #003B73;
  transform: rotate(45deg);
  top: 50px;
  left: -13px;
}

.cst-form_base {
  padding: 2.3rem 2.2rem;
  z-index: 10;
  overflow: hidden;
  position: relative;
}

.cst-title {
  color: #fff;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1;
  margin-bottom: 0.7rem;
}

.cst-input-container {
  position: relative;
  margin: 1rem 0;
}

.cst-input {
  width: 100%;
  outline: none;
  border: 2px solid #fafafa;
  background: none;
  padding: 0.6rem 1.2rem;
  color: #fff;
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  border-radius: 25px;
  transition: 0.3s;
}

textarea.cst-input {
  padding: 0.8rem 1.2rem;
  min-height: 150px;
  border-radius: 22px;
  resize: none;
  overflow-y: auto;
}

.cst-input-container label {
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
  padding: 0 0.4rem;
  color: #fafafa;
  font-size: 0.9rem;
  font-weight: 400;
  pointer-events: none;
  z-index: 1000;
  transition: 0.5s;
}

.cst-input-container.textarea label {
  top: 1rem;
  transform: translateY(0);
}

.cst-btn {
  padding: 0.6rem 1.3rem;
  background-color: #fff;
  border: 2px solid #fafafa;
  font-size: 0.95rem;
  color: #003B73;
  width: 100%;
  line-height: 1;
  border-radius: 25px;
  outline: none;
  cursor: pointer;
  transition: 0.3s;
  margin: 0;
}

.cst-btn:hover {
  background-color: transparent;
  color: #fff;
}

.cst-input-container span {
  position: absolute;
  top: 0;
  left: 25px;
  transform: translateY(-50%);
  font-size: 0.8rem;
  padding: 0 0.4rem;
  color: transparent;
  pointer-events: none;
  z-index: 500;
}

.cst-input-container span:before,
.cst-input-container span:after {
  content: "";
  position: absolute;
  width: 10%;
  opacity: 0;
  transition: 0.3s;
  height: 5px;
  background-color: #003B73;
  top: 50%;
  transform: translateY(-50%);
}

.cst-input-container span:before {
  left: 50%;
}

.cst-input-container span:after {
  right: 50%;
}

.cst-input-container.focus label {
  top: 0;
  transform: translateY(-50%);
  left: 25px;
  font-size: 0.8rem;
}

.cst-input-container.focus span:before,
.cst-input-container.focus span:after {
  width: 50%;
  opacity: 1;
}

.cst-contact-info {
  padding: 2.3rem 2.2rem;
  position: relative;
}

.cst-contact-info .cst-title {
  color: #003B73;
}

.cst-text {
  color: #333;
  margin: 1.5rem 0 2rem 0;
  text-align: justify;
}

.cst-information {
  display: flex;
  color: #555;
  margin: 0.7rem 0;
  align-items: center;
  font-size: 0.95rem;
}
.icon {
  width: 28px;
  margin-right: 0.7rem;
  color: #003B73;
}
.cst-contact-info:before {
  content: "";
  position: absolute;
  width: 110px;
  height: 100px;
  border: 22px solid #003B73;
  border-radius: 50%;
  bottom: 140px;
  right: -50px;
  opacity: 0.3;
}

@media (max-width: 850px) {
  .cst-form {
    grid-template-columns: 1fr;
  }

  .cst-contact-info:before {
    bottom: initial;
    top: -75px;
    right: 65px;
    transform: scale(0.95);
  }

  .cst-contact-form:before {
    top: -13px;
    left: initial;
    right: 70px;
  }
  .cst-text {
    margin: 1rem 0 1.5rem 0;
  }
}

@media (max-width: 480px) {
  .cst-container {
    padding: 1.5rem;
  }

  .cst-contact-info:before {
    display: none;
  }
  .cst-form_base,
  .cst-contact-info {
    padding: 1.7rem 1.6rem;
  }

  .cst-text,
  .cst-information{
    font-size: 0.8rem;
  }

  .cst-title {
    font-size: 1.15rem;
  }
  .icon {
    width: 23px;
  }

  .cst-input {
    padding: 0.45rem 1.2rem;
  }

  .cst-btn {
    padding: 0.45rem 1.2rem;
  }
}
.confirmation-container {
  display: none; /* Initially hidden */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10001; /* Higher than the contact form */
  align-items: center;
  justify-content: center;
}
.confirmation-content {
  background: linear-gradient(180deg, #D8E8F9 0%, #DFD7EE 100%);
    backdrop-filter: blur(10px); 
  -webkit-backdrop-filter: blur(10px); 
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 20px;
  border-radius: 5px;
  text-align: center;
}
#closeConfirmation {
  background-color: #0074B7;
  color: white;
  padding: 10px 20px;
  margin-top: 25px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  font-size: 1rem;
}

/* From to down is footer section */
footer {
  width: 100%;
  position: absolute;
  background: linear-gradient(to right, #00093c, #2d0b00);
  color: #fff;
  padding: 50px 0 30px;
  font-size: 1.1rem;
  line-height: 20px;
  z-index: 5;
}
.row {
  width: 90%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 10px;
}
.col{
  flex-basis: 25%;
  padding: 10px;
  border-left: 1px solid rgba(249, 151  , 32, 0.4);
}
.merge-col{
  flex-basis: 50%;
  padding: 10px;
  border-left: 1px solid rgba(249, 151  , 32, 0.4);
}
.logo{
 margin-bottom: 20px;
}
.col h3, footer h1 {
  width: fit-content;
  margin-bottom: 20px;
  position: relative;
  text-decoration: underline;
  text-decoration-color: #f99720d0;
  text-underline-offset: 10px;
}
footer h1{
  font-size: 2rem;
}
.fot-flexing{
  text-align: justify;
}
footer p{
  line-height: 1.5;
}
.col ul li a{
  text-decoration: none;
  color: #fff;
}
.col ul li a:hover{
  color: #f99720d0;
}
.col ul li{
  list-style: none;
  margin-bottom: 12px;
}
footer i{
  color: white;
}
.fot-hide{
  display: none;
  text-align: justify;
}
.fot-hr{
  width: 80%;
  margin: 20px auto;
  height: 3px;
  border: 2px solid #f99720d0;
}
.fot-btn {
  padding: 0.6rem 1.3rem;
  border: 2px solid #f99720d0;
  background-color: transparent;
  color: #fff!important;
  font-size: 0.95rem;
  color: #003B73;
  width: 100%;
  line-height: 1;
  border-radius: 25px;
  outline: none;
  cursor: pointer;
  transition: 0.3s;
  margin: 0;
}

.fot-btn:hover {
  background-color: #f99720d0;
}
@media (max-width:930px){
  .merge-col{
    flex-basis: 100%;
  }
  .col{
    flex-basis: 50%;
  }
}
@media (min-width:1500px){
  .merge-col{
    flex-basis: 33%;
  }
  .col{
    flex-basis: 25%;
  }
  .fot-hide{
    display: block;
  }
  .fot-flexing{
    display: none;
  }
}
.copyright{
  text-align: center;
  padding: 0 25px;
}
/* Main body coding */
.body-area{
  
  width: 100%;
  position: relative;
}
.section {
    position: relative;
    width: 100%;
    /* height: 500px; */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
}

.section svg {
    position: absolute;
    width: 100%;
}

/* Div 1 - Red with smooth wave bottom */
.section-1 {
    position: relative;
    width: 100%;
    min-height: 600px;   /* full device height */
    height: 90dvh;  /* dynamic mobile height */
    overflow: hidden;
}
@media (min-width: 1360px){
    .section-1{height: 90vh; height: 90dvh;}
}
@media (max-width: 1280px){
    .section-1{height: 80vh; height: 80dvh;}
}
@media (max-width: 850px){
    .section-1{height: 50vh; height: 50dvh; .hero-check{display: none;}}
}
/* Slides wrapper */
.slideshow-container {
    position: absolute;
    inset: 0; /* replaces top/bottom/left/right:0 */
    width: 100%;
    height: 100%;
}

/* Each image slide */
.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    background-size: cover;        /* fill without empty space */
    background-position: top center; /* prevents face cutting */
}

.slide.active {
    opacity: 1;
}

.slide-1 {
    background-image: url('CM-Assets/16.webp');
}

.slide-2 {
    background-image: url('CM-Assets/9.webp');
}

.slide-3 {
    background-image: url('CM-Assets/17.webp');
}
.slide-4 {
    background-image: url('CM-Assets/13.webp');
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    width: 100%;
    z-index: 2;
}

.hero-overlay h1 {
    font-size: 3rem;
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
}
.hero-overlay p {
    font-size: 1.6rem;
    max-width: 650px;
    text-align: justify;
    line-height: 1.6;
    color: white;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.section-1 svg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 2;
}
/* From here is counter section */
.counters {
  margin-inline: 15px;
}
.off-stat-card {
    background: white;
    padding: 32px 24px;
    border-radius: 16px;
    text-align: center;
    border: 2px solid #e2e8f0;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.off-stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.off-stat-value {
    font-size: 40px;
    font-weight: 900;
    background: linear-gradient(to right, #0074B7, #0f1961ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
}

.off-stat-label {
    color: #64748b;
    font-size: 14px;
    font-weight: 600;
}

/* From to down is Our Services Section */
.section-3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: transparent;
    margin-bottom: 10px;
}
.section-3 h1{
    font-size: 3rem;
    margin: 25px 0;
    text-align: center;
    font-weight: 500;
    color: #003B73;
}
.wrapping_text{
    font-size: 1.3rem;
    text-align: justify;
    padding-inline: 50px;
    max-width: 1800px;
}
.wrapping_text b{
    color: #003B73;
}
 .BS-content-box {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Better spacing between bs-cards */
    justify-content: center; /* Centers all bs-cards */
    align-items: stretch;
    max-width: 2500px; /* Your requested max width */
    width: 100%;        /* Responsive */
    margin-top: 30px;
}
 .bs-card {
    min-height: 220px;
    width: 340px; /* fixed width so layout depends on screen space */
    padding: 30px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    background: #fff;
    margin: 10px;
    cursor: pointer;
    animation: pop-up-div 1s ease forwards;
    box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}
@keyframes pop-up-div {
    0% {opacity: 0; scale: 0.5;}
    100%{opacity: 1; scale: 1;}
}
.bs-card i{
    margin: 20px;
    color: #003B73;
    font-size: 2.1rem;
}
.bs-card h2{
    margin-bottom: 12px;
    font-weight: 400;
    text-align: center;
}
.bs-card h2 span{
    position: relative;
    display: inline-block;
}
.bs-card span{
    content: "";
    position: absolute;
    bottom: 5px;         /* space between text and line */
    left: 0;
    width: 100%;
    height: 2px;
    background: #003B73;
}
.bs-card p{
    color: #6c757d;
    text-align: center;
    font-size: 1.1rem;
    text-align: justify;
}
.bs-card:hover i, .bs-card:hover p{
    color: #fff;
}
.bs-card:hover span{
    background: #fff;
}
.bs-card:hover h2{
    font-weight: 500;
    color: #f2f2f2;
}
.bs-card:nth-child(1):hover {
    background-image: 
        linear-gradient(45deg,rgba(0, 59, 115, 0.7), rgba(0, 116, 183, 0.7)),
        url("CM-Assets/T1.webp");
    background-size: cover, cover;
    background-position: center;
}
.bs-card:nth-child(2):hover {
    background-image: 
        linear-gradient(45deg, rgba(0, 59, 115, 0.7), rgba(0, 116, 183, 0.7)),
        url("CM-Assets/T2.jpg");
    background-size: cover, cover;
    background-position: center;
}
.bs-card:nth-child(3):hover {
    background-image: 
        linear-gradient(45deg, rgba(0, 59, 115, 0.7), rgba(0, 116, 183, 0.7)),
        url("CM-Assets/4.webp");
    background-size: cover, cover;
    background-position: center;
}
.bs-card:nth-child(4):hover {
    background-image: 
        linear-gradient(45deg, rgba(0, 59, 115, 0.7), rgba(0, 116, 183, 0.7)),
        url("CM-Assets/T3.webp");
    background-size: cover, cover;
    background-position: center;
}
.bs-card:nth-child(5):hover {
    background-image: 
        linear-gradient(45deg, rgba(0, 59, 115, 0.7), rgba(0, 116, 183, 0.7)),
        url("CM-Assets/8.webp");
    background-size: cover, cover;
    background-position: center;
}
.bs-card:nth-child(6):hover {
    background-image: 
        linear-gradient(45deg, rgba(0, 59, 115, 0.7), rgba(0, 116, 183, 0.7)),
        url("CM-Assets/7.webp");
    background-size: cover, cover;
    background-position: center;
}
.bs-card:nth-child(7):hover {
    background-image: 
        linear-gradient(45deg, rgba(0, 59, 115, 0.7), rgba(0, 116, 183, 0.7)),
        url("CM-Assets/Q1.webp");
    background-size: cover, cover;
    background-position: center;
}
@media (max-width: 991px){
    .section-3{
        padding: 25px;
    }
    .section-3 h1{
        font-size: 2.5rem;
        font-weight: 600;
    }
    .BS-content-box {
        flex-direction: column;
        max-width: 100%;
    }
    .bs-card {
        width: 90%;       /* Full width on small screens */
        margin: 10px auto;
        padding-bottom: 40px;
    }
}

/* Div 4 - BOur Vision Section Coding starts from here */
.section-4 {
    background: linear-gradient(135deg, rgba(105, 138, 185, 0.7), rgba(70, 77, 87, 0.9)),
                url('CM-Assets/N3.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    width: 100%;
    min-height: 600px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    position: relative;
}
@media (min-width:1280px){
    .section-4{
        background: linear-gradient(135deg, rgba(105, 138, 185, 0.7), rgba(70, 77, 87, 0.9)),
                url('CM-Assets/N1.webp');
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
    }
}
.section-4 .wave-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.section-4 .wave-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.vision-content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 50px 20px;
}

.vision-content h1 {
    font-size: 3rem;
    margin: 40px auto 40px auto
}

.vision-content p {
    font-size: 1.1rem;
    max-width: 1400px;
    line-height: 1.8;
    text-align: justify;
    margin-bottom: 50px;
}

/* Responsive */
@media (max-width: 768px) {
    .hero-overlay h1 {
        font-size: 2rem;
    }

    .vision-content h1,
    .why-choose-text h1 {
        font-size: 2rem;
    }

    .section-6 {
        clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%);
    }
}

/* From here to down is speciality section coding */
.specialty-section {
  height: auto;
  width: 100%;
  display: grid;
  place-items: center;
}
.s-content-box {
  display: flex;
  flex-wrap: wrap;
  max-width: 1800px;
}
.s-item-wrapper {
  width: 100%;
  padding: 0 1em 1em 1em;
  text-align: center;
}
.s-card-div {
  width: 100%;
  height: 100%;
  padding: 2em 1.5em;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,1) 50%,
    rgba(0, 116, 184, 1) 50%,         /* light Blue */
    rgba(15, 25, 97, 0.95) 80%,      /* Dark Blue-Indigo */
    rgba(88, 28, 135, 0.85) 100%     /* Rich Purple */
);
  background-size: 100% 200%;
  background-position: 0 2.5%;
  border-radius: 5px;
  box-shadow: 0 0 35px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: 0.5s;
}
.s-card-div h3{
  font-size: 1.5rem;
  font-weight: 600;
  color: #1f194c;
  margin: 1em 0;
}
.specialty-sub{
    font-size: 1.5rem;
    font-weight: 500;
    color: #0074B7;
    text-align: center;
}
.specialty-para{
  padding: 15px;
  max-width: 1400px;
  text-align: justify;
  font-size: 1rem;
  color: #575a7b;
}

.s-ending {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px; /* space between line and text */
  width: 100%;
  transition: all 0.3s ease;
}
.s-ending a{
    text-decoration: none;
    color: inherit;
    font-size: 1.3rem;
}
.s-ending span{
    background: #fff;
    margin: 0 15px;
}
.s-ending::before, .s-ending::after{
    background: linear-gradient(to right, #003B73, #0074B7);
    height: 2px;
    margin-inline: 15px;
    flex: 1;
    content: '';
}
.s-ending:hover{
  color: #0074B7;
  font-weight: 600;
}
.s-icons {
  background-color: rgb(0, 116, 184);
  position: relative;
  margin: auto;
  font-size: 30px;
  height: 2.5em;
  width: 2.5em;
  color: #ffffff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: 0.5s;
}
.s-card-div:hover {
  background-position: 0 100%;
}
.s-card-div:hover .s-icons {
  background-color: #ffffff;
  color: #2c7bfe;
}
.s-card-div:hover h3 {
  color: #ffffff;
}
.s-card-div:hover p {
  color: #f0f0f0;
}
@media (min-width: 768px) {
  section {
    padding: 0 2em;
  }
  .s-item-wrapper {
    flex: 0 50%;
    max-width: 50%;
  }
}
@media (min-width: 992px) {
  section {
    padding: 1em 3em;
  }
  .s-item-wrapper {
    flex: 0 0 33.33%;
    max-width: 33.33%;
  }

}
@media (min-width: 1450px) {
  section {
    padding: 1.5em 4em;
  }
  .s-item-wrapper {
    flex: 0 0 25%;
    max-width: 25%;
  }
}

/* From here to down is why choose us section */
/* ============== DIV 6 - WHY CHOOSE US WITH VIDEO ============== */
.section-6 {
    background: linear-gradient(
                to right,
                rgba(6, 182, 212, 1) 0%,
                rgba(139, 92, 246, 0.95) 50%,
                rgba(147, 51, 234, 0.5) 100%
            );
    position: relative;
    padding: 80px 0;
}

.why-choose-container {
    max-width: 1800px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    padding: 0 40px;
    position: relative;
}

.why-choose-text {
    color: white;
}

.why-choose-text h1 {
    font-size: 2.5rem;
    margin-bottom: 30px;
    margin-top: 25px;
}

.why-choose-text ul {
    list-style: none;
}

.why-choose-text li {
    font-size: 1.3rem;
    margin-bottom: 20px;
    padding-left: 30px;
    position: relative;
    line-height: 1.6;
}

.why-choose-text li::before {
    content: '✓';
    position: absolute;
    left: 0;
    font-weight: bold;
    font-size: 1.5rem;
}

.video-container {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.video-thumbnail {
    width: 100%;
    height: 350px;
    background: url('CM-Assets/H1.webp');
    background-size: cover;
    background-position: center;
    cursor: pointer;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    animation: pulse 2s infinite;
}

.play-button:hover {
    background: linear-gradient(
                to right,
                rgba(6, 182, 212, 1) 0%,
                rgba(139, 92, 246, 0.95) 50%,
                rgba(147, 51, 234, 0.5) 100%
            );;
    transform: translate(-50%, -50%) scale(1.1);
}

.play-button::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 25px solid #4A4A4A;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    margin-left: 5px;
}

@media (max-width: 1024px){
    .why-choose-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .why-choose-text h1 {
    margin-top: 40px;
}
    .video-container{
        margin-bottom: 50px;
    }
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    }
    50% {
        box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
    }
}
/* Video Modal Styles */
.video-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    animation: fadeIn 0.3s ease;
}

.video-modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-modal-content {
    position: relative;
    width: 90%;
    max-width: 1000px;
    background: #000;
    border-radius: 10px;
    overflow: hidden;
    animation: slideIn 0.4s ease;
}

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.Vid-Closer {
    position: absolute;
    top: 40px;
    right: 40px;
    font-size: 60px;
    color: white;
    cursor: pointer;
    z-index: 10;
    transition: transform 0.3s ease;
}

.Vid-Closer:hover {
    transform: rotate(90deg);
    color: #ff4444;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .video-modal-content {
        width: 95%;
    }
}

  /* ============== CONTACT FORM SECTION ============== */
        .idx-form-bottom-section {
            width: 100%;
            padding: 80px 20px;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            position: relative;
            overflow: hidden;
            margin-bottom: 30px;
        }

        .idx-form-bottom-container {
            max-width: 1800px;
            margin: 0 auto;
            position: relative;
            z-index: 2;
        }

        .idx-form-bottom-header {
            text-align: center;
            margin-bottom: 50px;
        }

        .idx-form-bottom-header h2 {
            font-size: 48px;
            color: #003B73;
            margin-bottom: 20px;
            font-weight: bold;
        }

        .idx-form-bottom-header p {
            font-size: 1.3rem;
            color: #555;
            max-width: 1400px;
            margin: 0 auto;
            line-height: 1.6;
        }

        .idx-form-bottom-wrapper {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 60px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(10px);
        }

        /* Donut/Ring Circles */
        .inf-circle {
            border-radius: 50%;
            position: absolute;
            z-index: 0;
            pointer-events: none;
            border: 15px solid;
            background: transparent;
        }

        .inf-circle.inf-one {
            width: 130px;
            height: 130px;
            top: 160px;
            right: -40px;
            border-color: rgba(0, 116, 183, 0.3);
        }

        .inf-circle.inf-two {
            width: 200px;
            height: 200px;
            top: -80px;
            left: -60px;
            border-color: rgba(249, 151, 32, 0.4);
        }

        .inf-circle.inf-three {
            width: 150px;
            height: 150px;
            bottom: 100px;
            left: 100px;
            border-color: rgba(139, 92, 246, 0.3);
        }

        .inf-circle.inf-four {
            width: 180px;
            height: 180px;
            bottom: -60px;
            right: 150px;
            border-color: rgba(6, 182, 212, 0.35);
        }

        .idx-form-bottom-form {
            position: relative;
            z-index: 1;
        }

        .idx-form-bottom-row {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 40px;
            margin-bottom: 40px;
        }

        .idx-form-bottom-row.full {
            grid-template-columns: 1fr;
        }

        .idx-form-bottom-group {
            position: relative;
        }

        .idx-form-bottom-input,
        .idx-form-bottom-select,
        .idx-form-bottom-textarea {
            width: 100%;
            padding: 15px 0;
            font-size: 16px;
            color: #333;
            border: none;
            border-bottom: 2px solid #ddd;
            background: transparent;
            outline: none;
            transition: border-color 0.3s ease;
        }

        .idx-form-bottom-textarea {
            resize: vertical;
            min-height: 120px;
            font-family: inherit;
        }

        .idx-form-bottom-label {
            position: absolute;
            top: 15px;
            left: 0;
            font-size: 16px;
            color: #999;
            pointer-events: none;
            transition: all 0.3s ease;
        }

        .idx-form-bottom-input:focus,
        .idx-form-bottom-select:focus,
        .idx-form-bottom-textarea:focus {
            border-bottom-color: #f99720d0;
        }

        /* Label stays on top when focused or has value */
        .idx-form-bottom-input:focus ~ .idx-form-bottom-label,
        .idx-form-bottom-input:not(:placeholder-shown) ~ .idx-form-bottom-label,
        .idx-form-bottom-select:focus ~ .idx-form-bottom-label,
        .idx-form-bottom-select.has-value ~ .idx-form-bottom-label,
        .idx-form-bottom-textarea:focus ~ .idx-form-bottom-label,
        .idx-form-bottom-textarea:not(:placeholder-shown) ~ .idx-form-bottom-label {
            top: -20px;
            font-size: 14px;
            color: #f99720d0;
            font-weight: 600;
        }

        .idx-form-bottom-select {
            cursor: pointer;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 10px center;
            padding-right: 30px;
        }

        .idx-form-bottom-select option {
            background: white;
            color: #333;
        }

        /* Bottom line animation */
        .idx-form-bottom-group::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background: #f99720d0;
            transition: width 0.4s ease;
        }

        .idx-form-bottom-group:focus-within::after {
            width: 100%;
        }

        .idx-form-bottom-button {
            width: 100%;
            padding: 18px;
            font-size: 18px;
            font-weight: bold;
            color: white;
            border: none;
            border-radius: 10px;
            background: linear-gradient(
                to right,
                rgba(6, 182, 212, 1) 0%,
                rgba(139, 92, 246, 0.95) 50%,
                rgba(147, 51, 234, 0.5) 100%
            );
            cursor: pointer;
            transition: all 0.4s ease;
            box-shadow: 0 8px 20px rgba(139, 92, 246, 0.3);
            position: relative;
            overflow: hidden;
        }

        .idx-form-bottom-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                to right,
                rgba(255, 255, 255, 0.1),
                rgba(255, 255, 255, 0.3),
                rgba(255, 255, 255, 0.1)
            );
            transition: left 0.6s ease;
        }

        .idx-form-bottom-button:hover::before {
            left: 100%;
        }

        .idx-form-bottom-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 30px rgba(139, 92, 246, 0.5);
        }

        .idx-form-bottom-button:active {
            transform: translateY(-1px);
        }

        /* Success/Error Messages */
        .idx-form-message {
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
            text-align: center;
            font-weight: 600;
            display: none;
        }

        .idx-form-message.success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }

        .idx-form-message.error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }

        .idx-form-message.show {
            display: block;
        }

        /* Responsive */
        @media (max-width: 1024px) {
            .idx-form-bottom-wrapper {
                padding: 40px;
            }

            .idx-form-bottom-row {
                gap: 30px;
                margin-bottom: 30px;
            }
        }

        @media (max-width: 768px) {
            .idx-form-bottom-header h2 {
                font-size: 36px;
            }

            .idx-form-bottom-wrapper {
                padding: 30px 20px;
            }

            .idx-form-bottom-row {
                grid-template-columns: 1fr;
                gap: 30px;
            }

            .circle.two {
                width: 120px;
                height: 120px;
                border-width: 10px;
            }

            .circle.three {
                width: 100px;
                height: 100px;
                bottom: 50px;
                left: 20px;
                border-width: 10px;
            }

            .circle.four {
                width: 120px;
                height: 120px;
                border-width: 10px;
                right: 20px;
            }
        }
        /* From here to down is testimonial section */
        .test-cm-section__container {
            max-width: 1400px;
            margin: auto;
            padding: 4rem 1rem;
            text-align: center;
            overflow: hidden;
        }

        .test-cm-section__subtitle {
            font-size: 1.5rem;
            font-weight: 600;
            color: #0074B7;
            margin-bottom: 0.5rem;
        }

        .test-cm-section__title {
            position: relative;
            margin-bottom: 4rem;
            font-size: 2.5rem;
            font-weight: 600;
            color: #0f172a;
            padding-bottom: 1.5rem;
        }

        .test-cm-section__title::after {
            position: absolute;
            content: "";
            left: 50%;
            bottom: 0;
            transform: translateX(-50%);
            height: 3px;
            width: 5rem;
            background-color: #0074B7;
            border-radius: 2px;
        }

        /* Carousel Container */
        .test-cm-carousel {
            position: relative;
            max-width: 100%;
            margin: 0 auto;
        }

        /* Carousel Track Container */
        .test-cm-carousel__track-container {
            overflow: hidden;
            position: relative;
            padding: 1rem 0;
        }

        /* Carousel Track */
        .test-cm-carousel__track {
            display: flex;
            gap: 2rem;
            padding: 0 1rem;
            transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* Testimonial Card */
        .test-cm-section__card {
            position: relative;
            isolation: isolate;
            overflow: hidden;
            padding: 5rem 2rem 2rem;
            background-color: #ffffff;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 116, 183, 0.1);
            transition: all 0.4s ease;
            flex: 0 0 auto;
            min-width: 280px;
        }

        .test-cm-section__card::before {
            position: absolute;
            content: "";
            top: 0;
            left: 0;
            transform: translate(-50%, -50%);
            width: 75%;
            aspect-ratio: 1;
            border-radius: 100%;
            background-color: #0074B7;
            z-index: -1;
            transition: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .test-cm-section__card span {
            position: absolute;
            top: 0;
            left: 0;
            padding: 1rem;
            font-size: 3rem;
            color: #ffffff;
        }

        .test-cm-section__card h4 {
            margin-top: 4rem;
            margin-bottom: 1rem;
            font-size: 1.5rem;
            font-weight: 600;
            color: #0074B7;
            transition: 0.3s;
        }

        .test-cm-section__card p {
            margin-bottom: 2rem;
            color: #94a3b8;
            line-height: 1.8;
            min-height: 120px;
            transition: 0.3s;
        }

        .test-cm-section__card img {
            margin-bottom: 1rem;
            max-width: 100px;
            width: 100px;
            height: 100px;
            object-fit: cover;
            border-radius: 100%;
            border: 3px solid #0074B7;
            transition: 0.3s;
        }

        .test-cm-section__card h5 {
            font-size: 1.25rem;
            font-weight: 600;
            color: #0074B7;
            transition: 0.3s;
        }

        .test-cm-section__card h6 {
            font-size: 1rem;
            font-weight: 400;
            color: #94a3b8;
            transition: 0.3s;
        }

        .test-cm-section__card:hover {
            transform: translateY(-8px);
            box-shadow: 0 8px 30px rgba(0, 116, 183, 0.2);
        }

        .test-cm-section__card:hover::before {
            width: 400%;
        }

        .test-cm-section__card:hover h4,
        .test-cm-section__card:hover h5 {
            color: #ffffff;
        }

        .test-cm-section__card:hover p,
        .test-cm-section__card:hover h6 {
            color: #e8e8e8;
        }

        .test-cm-section__card:hover img {
            border-color: #ffffff;
        }

        /* Navigation Arrows */
        .test-cm-carousel__arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: #ffffff;
            border: 2px solid #0074B7;
            color: #0074B7;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 10;
            transition: all 0.3s ease;
            font-size: 1.5rem;
            box-shadow: 0 4px 15px rgba(0, 116, 183, 0.2);
        }

        .test-cm-carousel__arrow:hover:not(.disabled) {
            background-color: #0074B7;
            color: #ffffff;
            transform: translateY(-50%) scale(1.1);
            box-shadow: 0 6px 20px rgba(0, 116, 183, 0.3);
        }

        .test-cm-carousel__arrow--left {
            left: -25px;
        }

        .test-cm-carousel__arrow--right {
            right: -25px;
        }

        .test-cm-carousel__arrow:active:not(.disabled) {
            transform: translateY(-50%) scale(0.95);
        }

        .test-cm-carousel__arrow.disabled {
            opacity: 0.3;
            cursor: not-allowed;
        }

        /* Professional 3-Dot Navigation */
        .test-cm-carousel__dots {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            margin-top: 3rem;
            padding: 0 1rem;
        }

        .test-cm-carousel__dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #e8e8e8;
            border: 2px solid #0074B7;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            opacity: 0.6;
        }

        .test-cm-carousel__dot:hover {
            background-color: rgba(0, 116, 183, 0.5);
            opacity: 1;
        }

        .test-cm-carousel__dot--active {
            background-color: #0074B7;
            width: 16px;
            height: 16px;
            opacity: 1;
            box-shadow: 0 0 10px rgba(0, 116, 183, 0.5);
        }

        /* Responsive Design */

        /* Large screens - 5 testimonials */
        @media (min-width: 1536px) {
            .test-cm-section__card {
                width: calc((100% - 8rem) / 5);
            }
            .test-cm-section__card:hover::before {
            width: 600%;
        }
        }

        /* Extra Large screens - 4 testimonials */
        @media (min-width: 1281px) and (max-width: 1535px) {
            .test-cm-section__card {
                width: calc((100% - 6rem) / 4);
            }
        }

        /* Large screens - 3 testimonials */
        @media (min-width: 1025px) and (max-width: 1280px) {
            .test-cm-section__card {
                width: calc((100% - 4rem) / 3);
            }
        }

        /* Medium screens - 2 testimonials */
        @media (min-width: 781px) and (max-width: 1024px) {
            .test-cm-section__card {
                width: calc((100% - 2rem) / 2);
            }
            
            .test-cm-carousel__arrow {
                width: 45px;
                height: 45px;
            }
            
            .test-cm-carousel__arrow--left {
                left: -15px;
            }
            
            .test-cm-carousel__arrow--right {
                right: -15px;
            }
        }

        /* Small screens - 1 testimonial */
        @media (max-width: 780px) {
            .test-cm-section__card {
                width: 100%;
                max-width: 400px;
                margin: 0 auto;
            }
            
            .test-cm-section__title {
                font-size: 2rem;
            }
            
            .test-cm-section__subtitle {
                font-size: 1.25rem;
            }
            
            .test-cm-carousel__arrow {
                width: 40px;
                height: 40px;
                font-size: 1.2rem;
            }
            
            .test-cm-carousel__arrow--left {
                left: -10px;
            }
            
            .test-cm-carousel__arrow--right {
                right: -10px;
            }
        }

        @media (max-width: 480px) {
            .test-cm-section__container {
                padding: 3rem 0.5rem;
            }
            
            .test-cm-carousel__arrow--left {
                left: 5px;
            }
            
            .test-cm-carousel__arrow--right {
                right: 5px;
            }
        }
        /* Center-mode visual: scale the center card */
.test-cm-section__card {
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    will-change: transform;
}

/* the card that will be emphasized */
.test-cm-section__card.is-center {
    transform: scale(1.06);
    z-index: 5;
    box-shadow: 0 14px 40px rgba(0, 116, 183, 0.25);
}

/* make clones non-interactive for pointer events (optional) */
.test-cm-section__card.clone {
    pointer-events: none;
}

/* Dots responsiveness: wrap and center if many */
.test-cm-carousel__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap; /* allow wrapping on small screens */
    row-gap: 10px;
    margin-top: 1.5rem;
    padding: 0 1rem;
}

/* Slightly larger clickable area for dots */
.test-cm-carousel__dot {
    width: 12px;
    height: 12px;
    min-width: 12px;
    min-height: 12px;
    border-radius: 999px;
}

/* From here to down is CM Academy Section */
.cm-academy {
    width: 100%;
    position: relative;
    padding: 90px 0 130px;
    background: linear-gradient(135deg, #7d0a2e, #e91e63);
    background-blend-mode: overlay;
    color: #fff;
    overflow: hidden;
}

/* Layout */
.cm-academy-inner {
    width: 90%;
    max-width: 1400px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 70px;
}

/* Left Text */
.cm-academy-text {
    flex: 1;
}

.cm-academy-text h2 {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 10px;
}

.cm-academy-text .slash {
    width: 80px;
    height: 5px;
    background: rgba(255, 255, 255, 0.85);
    transform: skewX(-25deg);
    margin-bottom: 25px;
}

.cm-academy-text p {
    font-size: 18px;
    line-height: 1.65;
    max-width: 550px;
    margin-bottom: 30px;
    text-align: justify;
}

.cm-btn {
    display: inline-block;
    padding: 12px 28px;
    background: #fff;
    color: #A02149;
    font-weight: 600;
    border-radius: 6px;
    text-decoration: none;
    transition: 0.3s ease;
}

.cm-btn:hover {
    background: rgba(255,255,255,0.85);
    transform: translateY(-2px);
}

/* IMAGE FEATHER / DISSOLVE EFFECT */
.cm-academy-img {
    flex: 1;
    text-align: right;
}

.cm-academy-img img {
    width: 100%;
    max-width: 500px;
    border-radius: 20px;

    /* Smooth dissolve into background */
    -webkit-mask-image: radial-gradient(circle, black 55%, transparent 100%);
    opacity: 0.8;
    transition: 0.3s ease;
}

.cm-academy-img img:hover {
    opacity: 1;
}

/* Bottom SVG */
.cm-svg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

/* Responsive */
@media (max-width: 1024px) {
    .cm-academy-inner {
        flex-direction: column;
        text-align: center;
    }
    .cm-academy-img {
        text-align: center;
    }
    .cm-academy-text .slash {
        margin-left: auto;
        margin-right: auto;
    }
}

/* From here to down is the referral program section of index page */
.cm-referral {
    background: linear-gradient(135deg, rgba(0,59,115,0.06) 0%, rgba(7,76,154,0.03) 50%, rgba(124,58,237,0.03) 100%), #f7fbff;
    padding: 64px 20px;
  }

  .cm-referral-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 28px;
    align-items: stretch;
    justify-content: space-between;
  }

  /* Left column: copy */
  .cm-referral-left {
    flex: 1 1 auto;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.95));
    padding: 36px;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(2,6,23,0.06);
    border: 1px solid rgba(3,59,115,0.04);
  }

  .cm-referral-title {
    color: #003B73;
    font-size: 28px;
    margin-bottom: 12px;
    font-weight: 700;
  }

  .cm-referral-lead {
    color: #64748b;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 18px;
  }

  .cm-referral-list {
    list-style: none;
    margin: 0 0 22px 0;
    padding: 0;
    color: #64748b;
    line-height: 1.6;
  }

  .cm-referral-list li {
    padding-left: 18px;
    margin-bottom: 12px;
    position: relative;
  }
  .cm-referral-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
    color: #0074B7;
    font-weight: 700;
    transform: translateY(-3px);
  }

  .cm-referral-cta {
    display: flex;
    gap: 12px;
    margin-top: 8px;
    flex-wrap: wrap;
  }

  .cm-btn-primary {
    background: linear-gradient(90deg, #0074B7, #7c3aed);
    color: #fff;
    padding: 12px 20px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    box-shadow: 0 8px 28px rgba(7,116,183,0.14);
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .cm-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 40px rgba(7,116,183,0.16);
  }
  /* Right column: visual badges */
  .cm-referral-right {
    width: 320px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: center;
    justify-content: center;
  }

  .badge {
    width: 100%;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.95));
    padding: 16px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid rgba(3,59,115,0.04);
    box-shadow: 0 8px 20px rgba(3,59,115,0.06);
  }

  .badge.big { padding: 22px; background: linear-gradient(90deg, rgba(0,116,183,0.08), rgba(124,58,237,0.06)); }

  .badge-value {
    font-size: 36px;
    font-weight: 800;
    color: #0074B7;
    background: linear-gradient(90deg, #0074B7, #7c3aed);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 6px;
  }

  .badge-caption {
    font-size: 13px;
    color: #64748b;
  }

  .rewards-card {
    width: 100%;
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    align-items: center;
    background: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(255,255,255,0.96));
    border: 1px solid rgba(124,58,237,0.06);
    box-shadow: 0 8px 24px rgba(124,58,237,0.04);
  }

  .rewards-ico {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    color: #7c3aed;
  }

  .rewards-title {
    font-weight: 700;
    color: #003B73;
    font-size: 14px;
  }
  .rewards-sub {
    font-size: 13px;
    color: #64748b;
  }

  /* Responsive */
  @media (max-width: 980px) {
    .cm-referral-inner {
      flex-direction: column;
      align-items: stretch;
    }

    .cm-referral-right {
      order: 1;
      width: 100%;
      flex-direction: row;
      justify-content: space-between;
    }

    .badge, .rewards-card { flex: 1; margin: 6px; }
  }

  @media (max-width: 520px) {
    .cm-referral-left { padding: 20px; }
    .cm-referral-title { font-size: 20px; }
    .cm-referral-lead { font-size: 14px; }
    .badge-value { font-size: 28px; }
    .cm-referral-right {
      width: 100%;
      flex-direction: column;
      justify-content: space-between;
    }
  }

  /* From here to dewn is the Service Pages Section */
  .gradient-container {
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
}

.gradient-background {
    position: relative;
    width: 100%;
    min-height: 500px;
    padding: 80px 60px;
    background: linear-gradient(
        to right,
        rgba(6, 182, 212, 1) 0%,
        rgba(139, 92, 246, 0.95) 50%,
        rgba(147, 51, 234, 0.5) 100%
    );
}

.circle-image-wrapper {
    position: absolute;
    top: -160px;
    right: -160px;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    overflow: hidden;
    opacity: 0.4;
    mix-blend-mode: overlay;
}

.circle-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-gradient-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at center,
        transparent 0%,
        transparent 40%,
        rgba(139, 92, 246, 0.6) 70%,
        rgba(147, 51, 234, 0.9) 100%
    );
}

.circle-border-effect {
    position: absolute;
    top: -160px;
    right: -160px;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        inset 0 0 60px rgba(255, 255, 255, 0.1),
        0 0 60px rgba(139, 92, 246, 0.3);
}

.content-wrapper {
    position: relative;
    z-index: 6;
    max-width: 1280px;
    margin-inline: 20px;
    align-items: center;
    justify-content: center;
}

.main-title {
    font-size: 3rem;
    font-weight: bold;
    color: white;
    margin-bottom: 24px;
    max-width: 100%;
    text-align: center;
    line-height: 1.2;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
}

.subtitle {
    font-size: 24px;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.6;
    max-width: 100%;
    margin-inline: 20px;
    text-align: justify;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
}

.button-group {
    display: flex;
    gap: 16px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.SP-btn-primary {
    padding: 14px 26px;
    background-color: white;
    color: #0074B7;
    border: none;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.SP-btn-primary:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    transform: scale(1.05);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.SP-btn-secondary {
    padding: 16px 32px;
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.SP-btn-secondary:hover {
    background-color: white;
    color: #7c3aed;
    transform: scale(1.05);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.decorative-circle-1 {
    position: absolute;
    bottom: 40px;
    right: 40px;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.05);
    z-index: 1;
}

.decorative-circle-2 {
    position: absolute;
    top: 50%;
    left: 40px;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.05);
    z-index: 1;
}

/* Responsive Design */
@media (max-width: 768px) {
    .gradient-background {
        min-height: 400px;
        padding: 60px 32px;
    }

    .circle-image-wrapper,
    .circle-border-effect {
        width: 400px;
        height: 400px;
        top: -128px;
        right: -128px;
    }

    .main-title {
        font-size: 2.2rem;
    }

    .subtitle {
        font-size: 1.2rem;
    }

    .decorative-circle-1,
    .decorative-circle-2 {
        display: none;
    }
}

@media (max-width: 480px) {
    .main-title {
        font-size: 2rem;
    }

    .subtitle {
        font-size: 1rem;
    }
}

@media (max-width: 625px){
    .button-group {
        flex-direction: column;
    }

    .SP-btn-primary,
    .SP-btn-secondary {
        width: 100%;
    }
}
.hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
    justify-content:space-around;
}

.hero-badge, .employ-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    color: white;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.15);
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 1rem;
    transition: all 0.4s ease;
}

.hero-badge svg, .employ-badge svg {
    width: 20px;
    height: 20px;
    stroke: white;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.hero-badge:hover{
    background: rgba(96, 163, 217, 0.8);
    transform: scale(1.2);
}
.employ-badge:hover{
    background: linear-gradient(to right, #581c87, rgba(88, 28, 135, 0.9), rgba(88, 28, 135, 0.5));
    transform: scale(1.2);
}
.stats-cards {
    display: flex;
    margin-top: 24px;
    flex-direction: row;
    gap: 1.5rem;
    max-width: 1280px;
}
.stat-card {
    display: flex;
    align-items: center;
    padding: 24px;
    width: 33%;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 16px;
    gap: 18px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.stat-card:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateX(-5px);
}

.stat-icon {
    width: 64px;
    height: 64px;
    font-size: 2.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: white;
}
.stat-icon-green {
    background: rgba(34, 197, 94, 0.4);
}

.stat-icon-blue {
    background: rgba(59, 130, 246, 0.4);
}

.stat-icon-purple {
    background: rgba(168, 85, 247, 0.4);
}
.stat-number {
    font-size: 2.25rem;
    font-weight: 700;
    color: white;
    line-height: 1.1;
}

.stat-label {
    color: white;
    opacity: 0.9;
    font-size: 1rem;
    margin-top: 4px;
}

/* RESPONSIVE STYLES */


@media (max-width: 850px) {
    .stat-card {
        padding: 18px;
    }
    .stat-icon {
        width: 54px;
        height: 54px;
    }
    .stat-icon svg {
        width: 26px;
        height: 26px;
    }
    .stat-number {
        font-size: 30px;
    }
    .decorative-circle-1,
    .decorative-circle-2,
    .decorative-circle-3 {
        display: none;
    }
}
@media (max-width: 768px){
    .stats-cards{
        flex-direction: column;
        align-items: center;
    }
    .stat-card{
        width: 90%;
    }
}
@media (max-width: 480px) {
    .stat-number {
        font-size: 26px;
    }
    .stat-label {
        font-size: 13px;
    }
}
.SP-place-holder{
    display: block;
    height: auto;
    pointer-events: none;
    cursor: none;
    
}
.SP-place-holder h1{
    color: transparent;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Standard */
}
.SP-Hide {
        display: block;
    }
@media (max-width: 1500px){
    .SP-Hide {
        display: none;
    }
}
.wave {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin-top: 30px;
}
.SP-Wrapper {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: #333;
}

.SP-Container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 1.5rem;
    position: relative;
    z-index: 6;
}
.SP-btn {
    display: inline-block;
    padding: 1.5rem 2rem;
    font-size: 1.125rem;
    font-weight: 600;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: all 0.3s;
    cursor: pointer;
    border: none;
}
/* Section Styles */
.SP-section {
    padding: 6rem 0;
}

.section-white {
    background: white;
}

.section-gray {
    background: linear-gradient(to bottom, #f9fafb, white);
}
.section-dark { background: linear-gradient(135deg, #111827, #1f2937, #111827); color: white; }
.section-blue {
    background: linear-gradient(135deg, #dbeafe, #e0e7ff);
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    color: #003B73;
    margin-bottom: 4rem;
}

@media (min-width: 1024px) {
    .section-title {
        font-size: 3rem;
    }
}

.grid-2, .grid-3, .grid-4, .grid-6 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .grid-2, .grid-3, .grid-4, .grid-6 {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1024px) {
    .grid-3, .grid-6 {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .grid-4 {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

@media (min-width: 1280px) {
    .grid-6 {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    }
}

.card {
    background: white;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
}

.card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
    transform: translateY(-4px);
}

.card-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    font-size: 2rem;
    transition: all 0.3s;
}

.card:hover .card-icon {
    background: #2563eb !important;
    color: white;
}

.card-icon-blue {
    background: #dbeafe;
    color: #2563eb;
}

.card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 1rem;
}

.card-description {
    color: #4b5563;
    line-height: 1.75;
}
.SP-card-list {
  margin-left: 18px;
  color: #4b5563;
  line-height: 1.75;
}
.use-cases {
  display: flex; 
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
}
.use-case {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255,255,255,0.1);
  padding: 0.5rem 1rem;
  border-radius: 2rem; 
}
/* Service Cards */
.service-card {
    background: white;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    transition: all 0.35s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 25px 35px -5px rgba(0, 0, 0, 0.18);
}

/* ICON - PRO STYLING */
.service-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    font-size: 2rem;
    color: white;
    transition: all 0.35s ease;
    position: relative;
}

/* Glow + Hover */
.service-card:hover .service-icon {
    transform: scale(1.15) rotate(3deg);
    box-shadow: 0 10px 20px rgba(0, 59, 115, 0.45);
}

.service-icon::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 1rem;
    background: inherit;
    filter: blur(20px);
    opacity: 0.35;
    transition: 0.35s ease;
    z-index: -1;
}

.service-card:hover .service-icon::after {
    filter: blur(32px);
    opacity: 0.7;
}
/* Number */
.service-number {
    font-size: 2rem;
    font-weight: 700;
    color: #2563eb;
    margin-right: 0.5rem;
}
/* Timeline */
.timeline {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

.timeline-item {
    display: flex;
    align-items: center;
    margin-bottom: 3rem;
    gap: 2rem;
}

@media (min-width: 1024px) {
    .timeline-item:nth-child(even) {
        flex-direction: row-reverse;
    }
}

@media (max-width: 1023px) {
    .timeline-item {
        flex-direction: column !important;
        text-align: center;
    }
    
    .timeline-item > div:last-child {
        display: none;
    }
}

.timeline-content {
    flex: 1;
    background: white;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.timeline-icon {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #1e40af);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2.5rem;
    position: relative;
    flex-shrink: 0;
}

.timeline-number {
    position: absolute;
    bottom: -0.5rem;
    right: -0.5rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: #bfdbfe;
    color: #1e40af;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
}

.timeline-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 1rem;
}

.timeline-description {
    color: #4b5563;
    line-height: 1.75;
}
.why-card { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 1rem; padding: 2rem; transition: all 0.3s; }
        .why-card:hover { background: rgba(255, 255, 255, 0.1); }
        .why-icon { width: 3.5rem; height: 3.5rem; background: linear-gradient(135deg, #fbbf24, #f97316); border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; color: white; }
        .why-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.75rem; }
        .why-card p { color: #9ca3af; line-height: 1.75; }
/* Benefits */
.benefit-card {
    background: white;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
    display: flex;
    align-items: start;
    gap: 1rem;
}

.benefit-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
    transform: translateY(-4px);
}

.benefit-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    background: #dbeafe;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    transition: all 0.3s;
}

.benefit-card:hover .benefit-icon {
    background: #2563eb;
    color: white;
}

.benefit-text {
    color: #374151;
    font-weight: 500;
    line-height: 1.75;
}

/* CTA Section */
.cta {
    background: linear-gradient(135deg, #8ec1ee, #0074B7, #0f1961ff);
    color: white;
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
}

.cta-decorative {
    position: absolute;
    inset: 0;
    opacity: 0.1;
}

.cta-blur-1 {
    position: absolute;
    top: 2.5rem;
    right: 5rem;
    width: 16rem;
    height: 16rem;
    background: white;
    border-radius: 50%;
}

.cta-blur-2 {
    position: absolute;
    bottom: 2.5rem;
    left: 5rem;
    width: 20rem;
    height: 20rem;
    background: #93c5fd;
    border-radius: 50%;
}

.cta-content {
    position: relative;
    max-width: 1024px;
    margin: 0 auto;
    text-align: center;
    padding: 0 1.5rem;
}

.cta h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

@media (min-width: 1024px) {
    .cta h2 {
        font-size: 3rem;
    }
}

.cta p {
    font-size: 1.25rem;
    line-height: 1.75;
    margin-bottom: 3rem;
    opacity: 0.95;
}

@media (min-width: 1024px) {
    .cta p {
        font-size: 1.5rem;
    }
}

.cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}

@media (min-width: 640px) {
    .cta-buttons {
        flex-direction: row;
    }
}

.SP-btn-outline {
    background: transparent;
    color: white;
    border: 2px solid white;
}

.SP-btn-outline:hover {
    background: white;
    color: #0074B7;
}

/* FAQ Section */
.faq-Container {
    max-width: 896px;
    margin: 0 auto;
}

.faq-item {
    background: #f9fafb;
    border-radius: 1rem;
    margin-bottom: 1rem;
    overflow: hidden;
}

.faq-question {
    width: 100%;
    text-align: left;
    padding: 1.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: #111827;
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: color 0.3s;
}

.faq-question:hover {
    color: #0572b1;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding: 0 1.5rem;
    color: #4b5563;
    line-height: 1.75;
}

.faq-item.active .faq-answer {
    max-height: 500px;
    padding: 0 1.5rem 1.5rem 1.5rem;
}

.faq-icon {
    transition: transform 0.3s;
}

.faq-item.active .faq-icon {
    transform: rotate(180deg);
}
/* Responsive */
@media (max-width: 640px) {
    .section-title {
        font-size: 2rem;
    }
    
    .SP-btn {
        width: 100%;
    }
}

/* From here to down is specialty page coding */
.spe-hero { position: relative; background: linear-gradient(135deg, #003B73, #0074B7); color: white; overflow: hidden; }
.spe-hero-decorative { position: absolute; inset: 0; }
.spe-hero-circle-1 { position: absolute; top: 5rem; right: 5rem; width: 24rem; height: 24rem; border: 40px solid rgba(255,255,255,0.1); border-radius: 50%; }
.spe-hero-circle-2 { position: absolute; left: 5rem; right: 10rem; width: 16rem; height: 16rem; border: 30px solid rgba(255,255,255,0.05); border-radius: 50%; }
.spe-hero-blur-1 { position: absolute; left: -5rem; top: 50%; transform: translateY(-50%); width: 20rem; height: 20rem; background: rgba(255,255,255,0.05); border-radius: 50%; filter: blur(60px); }
.spe-hero-blur-2 { position: absolute; right: 0; bottom: 0; width: 24rem; height: 24rem; background: rgba(34,211,238,0.1); border-radius: 50%; filter: blur(60px); }

.spe-container { max-width: 1600px; margin: 0 auto; padding: 0 1.5rem; position: relative; z-index: 5; }
.spe-hero-content { max-width: 56rem; margin: 0 auto; text-align: center; padding: 6rem 0 8rem; }

.spe-badge { display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); padding: 0.5rem 1rem; border-radius: 2rem; margin-bottom: 2rem; font-size: 0.875rem; font-weight: 500; }

.spe-hero h1 { font-size: 3.5rem; font-weight: 700; line-height: 1.1; margin-bottom: 1.5rem; }
@media (min-width: 1024px) { .spe-hero h1 { font-size: 4.5rem; } }

.spe-hero-subtitle { font-size: 1.5rem; margin-bottom: 2rem; opacity: 0.95; }
.spe-hero-desc { font-size: 1.125rem; margin-bottom: 2.5rem; opacity: 0.9; max-width: 42rem; margin-left: auto; margin-right: auto; }

.spe-hero-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-bottom: 2.5rem; }
.spe-hero-tag { display: flex; align-items: center; gap: 0.75rem; background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); padding: 0.75rem 1.25rem; border-radius: 0.75rem;}


.spe-section-title { text-align: center; font-size: 2.5rem; font-weight: 700; color: #003B73; margin-bottom: auto; }
@media (min-width: 1024px) { .section-title { font-size: 3rem; } }
.section-subtitle { text-align: center; font-size: 1.25rem; color: #4b5563; margin-bottom: 4rem; max-width: 42rem; margin-left: auto; margin-right: auto; }

.trust-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .trust-grid { grid-template-columns: repeat(4, 1fr); } }

.trust-card { background: white; border-radius: 1rem; padding: 2rem; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); text-align: center; transition: all 0.3s; }
.trust-card:hover { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.2); }

.trust-icon { width: 4rem; height: 4rem; margin: 0 auto 1.5rem; border-radius: 1rem; background: linear-gradient(135deg, #003B73, #0074B7);

 display: flex; align-items: center; justify-content: center; color: white; }

.trust-title { font-size: 1.125rem; font-weight: 700; color: #111827; margin-bottom: 0.75rem; }
.trust-desc { color: #4b5563; line-height: 1.6; }
.spe-icon { display: inline-flex; align-items: center; justify-content: center; }

@media (max-width: 640px) {
    .spe-hero h1 { font-size: 2.5rem; }
    .section-title { font-size: 2rem; }
}
/* From here to down is about us section */
.about {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
  color: #333;
}

.About-hero {
  position: relative;
  background: #001F3F;
  color: white;
  color: white;
  overflow: hidden;
  padding: 6rem 0;
}
.about-container {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 1.5rem;
  position: relative;
  z-index: 5;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.About-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(0, 180, 255, 0.35);
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
}

.about h1 {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 1.5rem;
}

@media (min-width: 1024px) {
  .about h1 {
    font-size: 3.75rem;
  }
}

.hero-desc {
  font-size: 1.25rem;
  color: #cbd5e1;
  line-height: 1.75;
  text-align: justify;
  margin-bottom: 2rem;
}

.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.hero-tag {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  transition: all 0.3s ease-in-out;
}

.hero-tag-blue {
  background: #B7D7ED22; /* 13% opacity */
  border: 1px solid #B7D7ED44;
}

.hero-tag-purple {
  background: rgba(168, 85, 247, 0.2);
}
.hero-tag:hover{
    transform: scale(1.1);
}
.hero-image {
  display: none;
  position: relative;
}

@media (min-width: 1024px) {
  .hero-image {
    display: block;
  }
}

.hero-image-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #3b82f6, #804ab3);
  border-radius: 1.5rem;
  opacity: 0.3;
}

.hero-image img {
  position: relative;
  border-radius: 1.5rem;
  width: 100%;
  height: auto;
  object-fit: cover;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.text-center {
  text-align: center;
}
.story-image {
  position: relative;
}

.story-image-bg {
  position: absolute;
  inset: -1rem;
  background: rgba(0, 179, 255, 0.274);
  box-shadow: 0 0 15px rgba(0,180,255,0.4);
  border-radius: 1.5rem;
}

.story-image img {
  position: relative;
  border-radius: 1rem;
  width: 100%;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.story-text h2 {
  font-size: 2.5rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 1.5rem;
}

@media (min-width: 1024px) {
  .story-text h2 {
    font-size: 3rem;
  }
}

.story-text p {
  font-size: 1.125rem;
  color: #4b5563;
  line-height: 1.75;
  margin-bottom: 1.5rem;
}

.story-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.story-card {
  border-radius: 1rem;
  padding: 1.5rem;
}

.story-card-blue {
  background: linear-gradient(to bottom right, #eff6ff, #dbeafe);
}

.story-card-purple {
  background: linear-gradient(to bottom right, #faf5ff, #e9d5ff);
}

.story-card-icon {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 1rem;
}

.story-card h3 {
  font-weight: 700;
  color: #111827;
  margin-bottom: 0.5rem;
}

.story-card p {
  font-size: 0.875rem;
  color: #4b5563;
}

.icon-what-to-do {background: linear-gradient(to bottom right, #3b82f6, #4f46e5);}
.icon-blue {
  background: linear-gradient(to bottom right, #3b82f6, #2563eb);
}

.icon-green {
  background: linear-gradient(to bottom right, #10b981, #059669);
}

.icon-purple {
  background: linear-gradient(to bottom right, #a855f7, #9333ea);
}

.icon-orange {
  background: linear-gradient(to bottom right, #f97316, #ea580c);
}

.icon-pink {
  background: linear-gradient(to bottom right, #ec4899, #db2777);
}

.about-trust-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  padding: 2rem;
  transition: all 0.3s;
}

.about-trust-card:hover {
  background: rgba(255, 255, 255, 0.1);
}

.about-trust-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.about-trust-card p {
  color: #94a3b8;
  line-height: 1.6;
  text-align: justify;
}
@media (max-width: 1023px) {
  .order-1 {
    order: 1;
  }

  .order-2 {
    order: 2;
  }
}

/* from here to down is contact us page coding */
.circle.one {
    width: 150px;
    height: 150px;
    top: 10%;
    left: 25%;
}
.pulse-dot {
    width: 8px;
    height: 8px;
    background: #34d399;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1;transform: scale(1.3); }
    50% { opacity: 0.5; transform: scale(1);}
}

.hero-title {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 16px;
    letter-spacing: -0.025em;
}

.hero-description {
    margin-top: 8px;
    margin-left: auto;
    margin-right: auto;
    color: #f1f1f1;
    padding-inline: 25px;
}

.hero-gradient-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: linear-gradient(to top, #f8fafc, transparent);
}

/* =============================================
   MAIN CONTAINER
   ============================================= */
.main-container {
    max-width: 1024px;
    margin: 0 auto;
    padding: 0 16px;
    margin-top: -32px;
    position: relative;
    z-index: 6;
    padding-bottom: 64px;
}

/* =============================================
   TABS CONTAINER
   ============================================= */
.tabs-container {
    background: white;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.tab-headers {
    display: flex; /* Use flex instead of grid for horizontal scrolling */
    flex-wrap: nowrap; /* Prevent wrapping to new line */
    border-bottom: 1px solid #e2e8f0;
    overflow-x: auto; /* Enable horizontal scrolling */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

.tab-button {
    flex: 0 0 auto; /* Prevent button from shrinking */
    padding: 20px 24px;
    transition: all 0.3s;
    background: none;
    border: none;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

/* Optional: hide scrollbar for cleaner look */
.tab-headers::-webkit-scrollbar {
    display: none;
}

.tab-active {
    background: linear-gradient(to bottom, #f8fafc, #fff);
    border-bottom: 2px solid;
}

.tab-inactive {
    background: transparent;
}

.border-teal {
    border-bottom-color: #0074B7;
}

.border-amber {
    border-bottom-color: #A02149;
}
.border-green {
    border-bottom-color: #f99720d0;
}
.border-violet {
    border-bottom-color: #8b5cf6;
}

.tab-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.tab-icon {
    padding: 8px;
    border-radius: 12px;
    color: white;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
}

.tab-button:hover .tab-icon {
    transform: scale(1.1);
}

.tab-icon-inactive {
    background: #f1f5f9;
    color: #64748b;
    box-shadow: none;
}

.gradient-teal {
    background: linear-gradient(135deg, #0074B7, #60A3D9);
}

.gradient-amber {
    background: linear-gradient(135deg, #A02149, #821B3B);
}
.gradient-green {
    background: linear-gradient(135deg, #f59e0b, #f97316);
}

.gradient-violet {
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
}

.icon-size {
    width: 20px;
    height: 20px;
}

.tab-label {
    font-size: 12px;
    font-weight: 500;
    color: #1e293b;
    text-align: center;
}

.tab-label-inactive {
    color: #64748b;
}
/* =============================================
   CONTACT CARDS
   ============================================= */
.contact-cards {
    margin-top: 48px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.contact-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
    text-decoration: none;
    display: block;
}

.contact-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
}

.contact-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin-bottom: 12px;
    transition: transform 0.2s;
}

.contact-card:hover .contact-icon {
    transform: scale(1.1);
}

.contact-icon-email {
    background: #003B73;
}

.contact-icon-phone {
    background: linear-gradient(to right, #10b981, #14b8a6);
}

.contact-label {
    font-size: 12px;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.contact-value {
    color: #334155;
    font-weight: 500;
    word-break: break-all;
    overflow-wrap: anywhere;
}

/* =============================================
   NEXT STEPS SECTION
   ============================================= */
.next-steps {
    margin-top: 48px;
    background: linear-gradient(to right, #1e293b, #0f172a);
    border-radius: 16px;
    padding: 40px;
    color: white;
}

.next-steps-title {
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 24px;
}


.next-step-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.step-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.step-svg {
    width: 20px;
    height: 20px;
}

.step-text {
    color: #cbd5e1;
    font-size: 16px;
}

/* =============================================
   PRIVACY NOTICE
   ============================================= */
.privacy-notice {
    margin-top: 32px;
    background: #f8fafc;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid #e2e8f0;
}

.privacy-content {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.privacy-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.privacy-icon svg {
    width: 30px;
    height: 30px;
    color: #64748b;
}

.privacy-title {
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 4px;
}

.privacy-text {
    font-size: 14px;
    color: #64748b;
}

/* =============================================
   RESPONSIVE DESIGN - TABLETS
   ============================================= */
@media (min-width: 768px) {
    .hero-title {
        font-size: 48px;
    }
    
    .hero-subtitle {
        font-size: 24px;
    }
    
    .hero-content {
        padding: 96px 16px;
    }
    
    .tab-content-wrapper {
        flex-direction: row;
        gap: 12px;
    }
    
    .tab-label {
        font-size: 14px;
    }
    
    .icon-size {
        width: 20px;
        height: 20px;
    }
    
    .tab-button {
        padding: 20px 24px;
    }
    
    .checkbox-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .checkbox-full {
        grid-column: span 2;
    }
    
    .contact-cards {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .next-steps {
        padding: 40px;
    }
}
@media (min-width: 1024px) {
    .hero-title {
        font-size: 60px;
    }
}
/* From here to down is offer page coding */
/* Coloring Scheme for Offer Section */
/* for changing event section colors */
.cm-event{
            background: linear-gradient(to right, #dc2626, #16a34a);
            color: #fff;
        }
.cm-even-header{
    background: linear-gradient(135deg, #fecaca 0%, #ffffff 50%, #bbf7d0 100%);
}
.cm-even-bage{
    background: linear-gradient(to right, #dc2626, #16a34a);
            color: white;
}
.cm-event-saveing{
    background: linear-gradient(to right, #16a34a, #10b981);
            color: white;
}
.features.event li:before {
            background: #bbf7d0;
            color: #16a34a;
        }
.cm-purple {
            background: linear-gradient(to right, #9333ea, #ec4899);
            box-shadow: 0 10px 15px -3px rgba(147, 51, 234, 0.4);
        }
.cm-blue {
            background: linear-gradient(to right, #2563eb, #06b6d4);
            box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.4);
        }
.off-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

.off-section {
    padding: 80px 0;
}

.off-section:nth-child(odd) {
    background: #ffffff;
}

.off-section:nth-child(even) {
    background: linear-gradient(to bottom, #f8fafc, #ffffff);
}

.off-section-header {
    text-align: center;
    margin-bottom: 64px;
}

.section-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 16px;
}
.badge-blue {
    background: linear-gradient(to right, #2563eb, #06b6d4);
    color: white;
}

.badge-orange {
    background: linear-gradient(to right, #f97316, #fbbf24);
    color: white;
}

.badge-purple {
    background: linear-gradient(to right, #9333ea, #ec4899);
    color: white;
}

.off-section-title {
    font-size: 48px;
    font-weight: 900;
    margin-bottom: 16px;
    color: #0f172a;
}

.off-section-subtitle {
    color: #64748b;
    font-size: 20px;
    max-width: 768px;
    margin: 0 auto;
}

.pricing-card {
    background: white;
    border-radius: 24px;
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.pricing-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}

.pricing-card.featured {
    transform: scale(1.05);
    border: 2px solid #2563eb;
    z-index: 6;
}

.pricing-card.featured:hover {
    transform: scale(1.07) translateY(-10px);
}

.pricing-card.blue {
    border-color: #bfdbfe;
}

.pricing-card.orange {
    border-color: #fed7aa;
}

.pricing-card.purple {
    border-color: #f3e8ff;
}

.ribbon {
    position: absolute;
    top: -3px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
}

.ribbon-content {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    color: white;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 10px 15px -3px rgba(249, 115, 22, 0.4);
}    

.card-header {
    padding: 40px 32px 32px;
}

.card-header.blue {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
}

.card-header.orange {
    background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%);
}

.card-header.purple {
    background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
}

.event-badge-small {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    color: white;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 16px;
}

.plan-name {
    font-size: 24px;
    font-weight: 900;
    margin-bottom: 8px;
    color: #0f172a;
}

.plan-description {
    color: #64748b;
    font-size: 14px;
    margin-bottom: 24px;
}

.price-wrapper {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
}

.price {
    font-size: 56px;
    font-weight: 900;
    line-height: 1;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.price.blue {
    background: linear-gradient(to right, #2563eb, #06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.price.orange {
    background: linear-gradient(to right, #f97316, #fbbf24);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.price.purple {
    background: linear-gradient(to right, #9333ea, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.period {
    color: #64748b;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 16px;
}

.savings-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 600;
    margin-top: 8px;
}

.card-body {
    padding: 32px;
    flex-grow: 1;
}

.features {
    list-style: none;
    margin-bottom: 0;
}

.features li {
    padding: 12px 0;
    padding-left: 32px;
    position: relative;
    color: #475569;
    font-size: 14px;
    line-height: 1.6;
}

.features li:before {
    content: "✓";
    position: absolute;
    left: 0;
    width: 20px;
    height: 20px;
    background: #dbeafe;
    color: #2563eb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 12px;
    top: 12px;
}

.features.orange li:before {
    background: #fed7aa;
    color: #f97316;
}

.features.purple li:before {
    background: #f3e8ff;
    color: #9333ea;
}

.card-footer {
    padding: 0 32px 32px;
}

.off-terms {
    background: #f8fafc;
    padding: 12px 16px;
    border-radius: 12px;
    text-align: center;
    font-size: 12px;
    color: #576880;
    font-weight: 600;
    margin-bottom: 16px;
}

.off-cta-button {
    display: block;
    width: 100%;
    padding: 16px 24px;
    border-radius: 16px;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.off-cta-button.blue {
    background: linear-gradient(to right, #2563eb, #06b6d4);
    color: white;
}

.off-cta-button.orange {
    background: linear-gradient(to right, #f97316, #fbbf24);
    color: white;
}

.off-cta-button.purple {
    background: linear-gradient(to right, #9333ea, #ec4899);
    color: white;
}

.off-cta-button:hover {
    transform: scale(1.02);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15);
    border: 2px solid currentColor;
    color: black;
}

.why-choose-section {
    padding: 80px 0;
    background: linear-gradient(to bottom, #f8fafc, #ffffff);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.feature-card {
    background: white;
    padding: 32px;
    border-radius: 16px;
    border: 2px solid #e2e8f0;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    border-color: #0f1961ff;
}

.feature-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(to right, #0074B7, #0f1961ff);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 16px;
    box-shadow: 0 10px 15px -3px rgba(15, 25, 97, 0.3);
    
}

.feature-title {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 8px;
}

.feature-description {
    color: #64748b;
    line-height: 1.6;
}
/* Form Modal Styles */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(8px);
    z-index: 7;
    padding: 20px;
    overflow-y: auto;
}

.modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: white;
    border-radius: 24px;
    max-width: 700px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    position: relative;
}

.modal-header {
    padding: 40px 40px 32px;
    background: linear-gradient(to right, #0074B7, #0f1961ff);
    position: relative;
    overflow: hidden;
}

.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f1f5f9;
    border: none;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 5;
}

.modal-close:hover {
    background: #e2e8f0;
    transform: rotate(90deg);
}

.modal-title-wrapper {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.modal-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, #2563eb, #06b6d4);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3);
}

.modal-title {
    font-size: 28px;
    font-weight: 900;
    color: #ecf2ff;
}

.modal-subtitle {
    color: #fff;
    font-size: 14px;
}

.selected-offer-box {
    margin-top: 16px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid #fed7aa;
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.selected-offer-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #003B73;
    margin-bottom: 8px;
}

.selected-offer-name {
    font-size: 20px;
    font-weight: 900;
    color: #0f172a;
    margin-bottom: 4px;
}

.selected-offer-price {
    font-size: 24px;
    font-weight: 900;
    background: linear-gradient(to right, #2563eb, #f97316);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.modal-body {
    padding: 40px;
}
.off-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.off-form-group.full-width {
    grid-column: 1 / -1;
}

.off-form-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
}

.off-form-input,
.off-form-select,
.off-form-textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 14px;
    transition: all 0.3s ease;
    font-family: inherit;
}

.off-form-input:focus,
.off-form-select:focus,
.off-form-textarea:focus {
    outline: none;
    border-color: #60A3D9;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
}

.off-form-textarea {
    min-height: 100px;
    resize: vertical;
}

.submit-btn {
    width: 100%;
    padding: 16px 24px;
    background: linear-gradient(135deg, #2563eb, #06b6d4);
    color: white;
    border: none;
    border-radius: 16px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.25);
    margin-top: 24px;
}

.submit-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 20px 25px -5px rgba(37, 99, 235, 0.3);
}

.submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.icon-symbol {
    font-size: 20px;
}

@media (max-width:1024px) {
    .pricing-card.featured {
        transform: scale(1);
    }
}

@media (max-width: 768px) {
    .off-section-title {
        font-size: 32px;
    }
    .off-section-subtitle {
        font-size: 16px;
    }
    .price {
        font-size: 42px;
    }
    .modal-body {
        padding: 24px;
    }
    .modal-header {
        padding: 24px;
    }
}

/* From here to down is referral program page coding */
.refer-wrapper {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background: white;
    overflow-x: hidden;
    text-align: justify;
}

/* refer-hero Section */
.refer-hero {
    background: linear-gradient(135deg, #0f1961 0%, #003B73 50%, #0074B7 100%);
    color: white;
    padding: 100px 20px 100px;
    position: relative;
    overflow: hidden;
    min-height: 80vh;
    display: flex;
    align-items: center;
}

.refer-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('CM-Assets/22.webp');
    background-size: cover;
    background-position: center;
    opacity: 0.3;
}

.refer-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(to top, white, transparent);
}

.refer-hero-content {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.ref-badge {
    display: inline-block;
    background: rgba(249, 151, 32, 0.8);
    color: #fff;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 28px;
    border: 1px solid rgba(249, 151, 32, 0.3);
    backdrop-filter: blur(10px);
}

.refer-wrapper h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    margin-bottom: 24px;
    line-height: 1.15;
}

.refer-hero-desc {
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    color: #fff;
    margin-bottom: 36px;
    line-height: 1.6;
    font-weight: 300;
}

.refer-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 18px 36px;
    background: #f99720;
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 10px 40px rgba(249, 151, 32, 0.4);
    cursor: pointer;
    border: none;
}

.refer-btn:hover {
    background: #e88610;
    transform: translateY(-3px);
    box-shadow: 0 15px 50px rgba(249, 151, 32, 0.5);
}

.refer-btn svg {
    width: 20px;
    height: 20px;
}

/* Section Styles */
.refer-wrapper section {
    padding: 80px 20px;
}

.refer-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 20px;
}

.refer-section-title {
    text-align: center;
    margin-bottom: 60px;
}

.refer-section-title h2 {
    font-size: clamp(1.8rem, 4vw, 3rem);
    color: #0f1961;
    margin-bottom: 16px;
    font-weight: 700;
}

.refer-section-title p {
    font-size: 1.2rem;
    color: #666;
    max-width: 600px;
    margin: 0 auto;
}

/* How It Works */
.how-it-works {
    background: linear-gradient(to bottom, white, #f8f9fa);
}

.step-card {
    background: white;
    padding: 32px;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    height: 100%;
}

.step-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.step-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #0074B7, #60A3D9);
    border-radius: 16px;
    margin-bottom: 20px;
    box-shadow: 0 8px 20px rgba(0, 116, 183, 0.3);
    color: white;
}

.step-icon svg {
    width: 32px;
    height: 32px;
    color: white;
}

.step-label {
    color: #f99720;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.step-card h3 {
    font-size: 1.25rem;
    color: #0f1961;
    margin-bottom: 12px;
    font-weight: 700;
}

.step-card p {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Rewards Structure */
.rewards-section {
    background: white;
}

.reward-card {
    background: white;
    padding: 40px;
    border-radius: 24px;
    border: 2px solid #0074B7;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.reward-card:hover {
    border-color: #60A3D9;
    box-shadow: 0 12px 40px rgba(0, 116, 183, 0.15);
    transform: translateY(-4px);
}

.reward-card .step-icon {
    width: 56px;
    height: 56px;
}

.reward-card .step-icon svg {
    width: 28px;
    height: 28px;
}

.reward-card h3 {
    font-size: 1.4rem;
    color: #0f1961;
    margin-bottom: 8px;
    font-weight: 700;
}

.percentage {
    font-size: 3.5rem;
    font-weight: 800;
    color: #f99720;
    margin: 16px 0;
    line-height: 1;
}

.reward-card > p {
    color: #666;
    margin-bottom: 24px;
    line-height: 1.6;
}

.example-box {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #e9ecef;
}

.example-box strong {
    color: #666;
    font-size: 12px;
    letter-spacing: 0.5px;
}

.example-box p {
    margin-top: 8px;
    color: #555;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Bonus Section */
.bonus-section {
    background: linear-gradient(135deg, #0f1961 0%, #003B73 100%);
    color: white;
    padding: 50px;
    border-radius: 30px;
    margin-top: 20px;
}

@media (max-width: 640px) {
    .bonus-section {
        padding: 30px 20px;
        border-radius: 20px;
    }
}

.bonus-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 40px;
}

.bonus-header svg {
    width: 40px;
    height: 40px;
    color: #f99720;
}

.bonus-header h3 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
}

.bonus-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 28px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.bonus-card:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-4px);
}

.bonus-amount {
    font-size: 2.5rem;
    color: #f99720;
    font-weight: 800;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.bonus-amount svg {
    width: 40px;
    height: 40px;
}

.bonus-card h4 {
    font-size: 1.2rem;
    margin-bottom: 12px;
    font-weight: 600;
}

.bonus-card p {
    color: #60A3D9;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* Discount Section */
.discount-section {
    background: linear-gradient(135deg, #f99720 0%, #e88610 100%);
    color: white;
    padding: 100px 20px;
    text-align: center;
}

.discount-icon {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 28px;
    border: 4px solid rgba(255, 255, 255, 0.4);
}

.discount-icon svg {
    width: 40px;
    height: 40px;
    color: white;
}

.discount-section h2 {
    font-size: clamp(1.8rem, 4vw, 3rem);
    margin-bottom: 24px;
    font-weight: 700;
}

.discount-section p {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    max-width: 900px;
    margin: 0 auto;
    line-height: 1.6;
    opacity: 0.95;
}

/* refer-why Partner */
.refer-why-partner {
    background: linear-gradient(to bottom, #f8f9fa, white);
}

.refer-why-card {
    background: white;
    padding: 32px;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

.refer-why-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
}

.refer-why-card .step-icon {
    background: linear-gradient(135deg, #003B73, #0074B7);
}

.refer-why-card h3 {
    font-size: 1.2rem;
    color: #0f1961;
    margin-bottom: 10px;
    font-weight: 700;
}

.refer-why-card p {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Getting Started */
.getting-started {
    background: linear-gradient(135deg, #0f1961 0%, #003B73 50%, #0074B7 100%);
    color: white;
    position: relative;
    overflow: hidden;
}

.getting-started::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('CM-Assets/H2.webp');
    background-size: cover;
    background-position: center;
    opacity: 0.05;
}

.getting-started .refer-container {
    position: relative;
    z-index: 1;
}

.getting-started .refer-section-title h2 {
    color: white;
}

.getting-started .refer-section-title p {
    color: #60A3D9;
}

.gs-steps {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
}

.gs-step {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 32px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: flex-start;
    gap: 24px;
    transition: all 0.3s ease;
}

.gs-step:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateX(8px);
}

.gs-num {
    font-size: 3rem;
    font-weight: 800;
    color: #f99720;
    line-height: 1;
    min-width: 80px;
}

.gs-content h4 {
    font-size: 1.4rem;
    margin-bottom: 8px;
    font-weight: 700;
}

.gs-content p {
    color: #60A3D9;
    font-size: 1.05rem;
    line-height: 1.5;
}

@media (max-width: 640px) {
    .gs-step {
        flex-direction: column;
        gap: 12px;
    }
    .gs-num {
        font-size: 2rem;
    }
}

/* Final CTA */
.final-cta {
    background: linear-gradient(135deg, #0f1961 0%, #003B73 50%, #0074B7 100%);
    color: white;
    text-align: center;
    padding: 120px 20px;
    position: relative;
    overflow: hidden;
}

.final-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('CM-Assets/6.webp');
    background-size: cover;
    background-position: top;
    opacity: 0.1;
}

.final-cta .refer-container {
    position: relative;
    z-index: 1;
}

.final-cta h2 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    margin-bottom: 24px;
    font-weight: 700;
}

.final-cta p {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    color: #60A3D9;
    margin-bottom: 40px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

/* From here to down is Career Page coding */
.hiring-notice { 
    background: #FEE2E2; /* #FEE2E2 for red while #d1fae5 for green */
    border: 2px solid #F87171; /* #F87171 for red while #6ee7b7 for green */
    border-radius: 1rem;
    padding: 1.5rem;
    max-width: 48rem;
    margin: 3rem auto;
    text-align: center;
}
.hiring-notice h5{
    font-size: 1.2rem;
    font-weight: 600;
    color: #7F1D1D; /* #991B1B for red while #065f46 for green */
    margin-bottom: 8px;
}
.hiring-notice p {
    color: #F87171; /* #F87171 for red while #047857 for green */
}
.employ-hero {
    background: linear-gradient(to right, #581c87, rgba(88, 28, 135, 0.9), rgba(88, 28, 135, 0.5));
    color: white;
    padding: 100px 20px 100px;
    position: relative;
    overflow: hidden;
    min-height: 80vh;
    display: flex;
    align-items: center;
}

.employ-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('CM-Assets/15.webp');
    background-size: cover;
    background-position: top;
    opacity: 0.3;
}

.employ-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(to top, white, transparent);
}
.employ-title{
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    color: #3d0667;
    margin-bottom: 1rem;
}
.employ-section { padding: 3rem 1.5rem; }
.section-purple { background: linear-gradient(135deg, #eef2ff, #e0e7ff, #fce7f3); }
.icon-box { 
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem; 
}
.icon-purple { background: #9333ea; }
.icon-indigo { background: #4f46e5; }
.icon-pink { background: #ec4899; }
.emp-faq .faq-question:hover{ color: #3d0667!important; }

.benefit-box { 
    background: linear-gradient(135deg, #f3e8ff, #ddd6fe);
    border: 1px solid #c4b5fd;
    border-radius: 1rem;
    padding: 1.5rem;
    display: flex;
    align-items: center; 
    gap: 1rem; 
    transition: all 0.3s; 
}
.benefit-box:hover { 
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); 
}
.employ-benefit-icon { 
    width: 3rem; 
    height: 3rem; 
    background: linear-gradient(135deg, #9333ea, #4f46e5); 
    border-radius: 0.75rem; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-shrink: 0; 
}
.leave-header { 
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem; 
}
.leave-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 2px solid #3d0667;
    border-radius: 25px;
    background: transparent;
    color: #3d0667;
    padding: 16px 12px;
    font-size: 0.9rem;
    width: 100%;
    font-weight: 400;
    margin-top: auto;
    transition: all 0.3s ease;
}
.leave-btn:hover {
    background: #3d0667;
    color: white;
    border: 2px solid white;
    font-weight: 600;
}
.leave-div {
  display: flex;
  flex-direction: column;
}

.saving-box { 
    background: linear-gradient(135deg, #9333ea, #4f46e5);
    color: white;
    border-radius: 1rem;
    padding: 2rem;
    text-align: center; 
}

.employ-form-section { /* this is body section code*/
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: linear-gradient(135deg, #eff6ff 0%, #ffffff 50%, #f0f9ff 100%);
    min-height: 100vh;
    color: #334155;
    line-height: 1.6;
}

/* Main Content */
.emp-form-main {
    max-width: 58rem;
    margin: 0 auto;
    padding: 2rem 1rem;
}

/* Form Section */
.form-section {
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
    opacity: 1;
}

.section-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e2e8f0;
}

.section-icon {
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(135deg, #eedbfe 0%, #e8bffe 100%);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    color: #3d0667;
}

.emp-section-title h2 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #3d0667;
}

.emp-section-title p {
    font-size: 0.875rem;
    color: #64748b;
}

/* Form Grid */
.col-span-2 {
    grid-column: span 1;
}

@media (min-width: 768px) {
    .col-span-2 {
        grid-column: span 2;
    }
}

/* Form Elements */
.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #475569;
    margin-bottom: 0.375rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.form-group label svg {
    width: 1rem;
    height: 1rem;
    color: #3d0667;
}

.required {
    color: #ef4444;
}

.form-section input[type="text"],
.form-section input[type="email"],
.form-section input[type="tel"],
.form-section input[type="date"],
.form-section input[type="number"],
.form-section select,
.form-section textarea {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-family: inherit;
    transition: all 0.2s;
    background: white;
}

.form-section input:focus,
.form-section select:focus,
.form-section textarea:focus {
    outline: none;
    border-color: #3d0667;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-section input::placeholder,
.form-section textarea::placeholder {
    color: #8a769b;
}

.form-section  textarea {
    min-height: 100px;
    resize: vertical;
}

/* Checkbox Styles */
.checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.checkbox-wrapper input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: #3d0667;
    cursor: pointer;
}

.checkbox-wrapper label {
    font-size: 0.875rem;
    color: #64748b;
    margin-bottom: 0;
    cursor: pointer;
}

/* Radio Button Styles */
.radio-group {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
}

.radio-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
}

.radio-option:hover {
    border-color: #b593fd;
}

.radio-option.selected {
    border-color: #833bf6;
    background: #eff6ff;
    color: #3d0667;
}

.radio-option input {
    display: none;
}

.radio-option span {
    font-weight: 500;
    text-transform: capitalize;
}

/* Checkbox Group for Multiple Selection */
.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.checkbox-pill {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.875rem;
}

.checkbox-pill:hover {
    border-color: #93c5fd;
}

.checkbox-pill.selected {
    border-color: #703bf6;
    background: #eff6ff;
    color: #3d0667;
}

.checkbox-pill input[type="checkbox"] {
    width: 0.875rem;
    height: 0.875rem;
    accent-color: #3d0667;
}

/* File Upload */
.file-upload {
    border: 2px dashed #cbd5e1;
    border-radius: 0.75rem;
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: #f8fafc;
}

.file-upload:hover {
    border-color: #3d0667;
    background: #eff6ff;
}

.file-upload.has-file {
    border-color: #6622c5;
    background: #f0fdf4;
}

.file-upload input {
    display: none;
}

.file-upload-icon {
    width: 2.5rem;
    height: 2.5rem;
    margin: 0 auto 0.5rem;
    color: #94a3b8;
}

.file-upload p {
    font-size: 0.875rem;
    color: #64748b;
}

.file-upload .file-name {
    color: #7922c5;
    font-weight: 500;
}

/* Conditional Section */
.conditional-section {
    display: none;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
    margin-top: 1rem;
    animation: fadeIn 0.3s ease-out;
}

.conditional-section.visible {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Dynamic Certificates */
.certificates-container {
    margin-top: 1rem;
}

.certificate-item {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
}

.certificate-item .form-group {
    flex: 1;
}

.remove-btn {
    padding: 0.5rem;
    background: #fee2e2;
    color: #dc2626;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s;
}

.remove-btn:hover {
    background: #fecaca;
}

.add-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: #eff6ff;
    color: #3d0667;
    border: 1px dashed #ca93fd;
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s;
}

.add-btn:hover {
    background: #f0dbfe;
}

/* HIPAA Questions */
.hipaa-questions {
    background: #fefce8;
    border: 1px solid #fef08a;
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-top: 1rem;
}

.hipaa-questions h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #854d0e;
    margin-bottom: 1rem;
}

.hipaa-question {
    margin-bottom: 1rem;
}

.hipaa-question p {
    font-size: 0.875rem;
    color: #713f12;
    margin-bottom: 0.5rem;
}

/* Agreement Section */
.agreement-section {
    background: linear-gradient(90deg, #eff6ff 0%, #f0f9ff 100%);
    border-radius: 1rem;
    padding: 1.5rem;
    border: 1px solid #dbbffe;
}

.agreement-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.agreement-checkbox input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.125rem;
    accent-color: #9c25eb;
}

.agreement-checkbox label {
    font-size: 0.875rem;
    color: #475569;
    line-height: 1.5;
}

/* Submit Button */
.emp-submit-btn {
    width: 100%;
    padding: 1rem 2rem;
    background: linear-gradient(90deg, #9525eb 0%, #6e1dd8 100%);
    color: white;
    border: none;
    border-radius: 0.75rem;
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-shadow: 0 4px 14px rgba(186, 37, 235, 0.3);
}

.emp-submit-btn:hover:not(:disabled) {
    background: linear-gradient(90deg, #d81d5b 0%, #691eaf 100%);
    box-shadow: 0 6px 20px rgba(235, 37, 205, 0.4);
    transform: translateY(-1px);
}

.emp-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.emp-submit-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

.spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .form-section {
        padding: 1rem;
    }

    .certificate-item {
        flex-direction: column;
        align-items: stretch;
    }

    .radio-group {
        flex-direction: column;
    }
}