/* .opacity-0{opacity: 0;}

.header-style-one.header-3{z-index: 11;}

.feature-section-3 .feature-box-3 span{font-size: 38px; font-weight: 600;}
.feature-section-3 .feature-box-3{min-height: 255px;}
.feature-section-3 .feature-service-card-items{min-height: 255px;}

.how-it-work-items-style-3 .title{min-height: 70px;}
.how-it-work-items-style-3 p{min-height: 95px;}

.growth-section .sec-title p{color: #fff;}

.footer-newsletter-wrapper .footer-newsletter-left .icon img{filter: grayscale(1);}
.footer-widget-wrapper .footer-widget-items .contact-list li img{filter: grayscale(1);}
 
*/

.hero-content h1{font-size: 65px !important;} 

/* Hero-3 layout: side margins, top gap, rounded corners to match reference design */
.hero-section.hero-3 {
  margin-left: 30px !important;
  margin-right: 30px !important;
  margin-top: 20px !important;
  border-radius: 30px 30px 0 0 !important;
  padding-top: 155px !important;
  padding-bottom: 0 !important;
}
.hero-section .owl-dots{position: absolute; bottom: 0; width: 100%; text-align: center;}
.hero-section .owl-theme .owl-nav{position: absolute; bottom: 50%; width: 100%; display: flex; justify-content: space-between;}
.hero-section .owl-theme .owl-nav button{
  width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    border: none;
    font-size: 50px;
    background: var(--theme-color7); 
    border-radius: 100%;
}
.hero-section .owl-theme .owl-nav button.owl-prev{margin-left: -35px;}
.hero-section .owl-theme .owl-nav button.owl-next{margin-right: -35px;}
.hero-section .owl-theme .owl-nav button:hover{
  background-color: var(--theme-color-white);
}
.hero-section .owl-theme .owl-nav button:hover span{
  color: var(--theme-color1);
}
.hero-section .owl-theme .owl-nav button.owl-prev span{margin-top: -5px; margin-left: -5px; display: flex; align-items: center; justify-content: center;}
.hero-section .owl-theme .owl-nav button.owl-next span{margin-top: -5px; margin-right: -5px; display: flex; align-items: center; justify-content: center;}

.about-section{background-color: #f6f6f6;}
.cus-bg{background-color: #ffffff; width: 100%; height: 120px;}
.sec-title h2{line-height: 1;}
.feature-growth-section .sub-title{margin-bottom: 0;}
/* @media (max-width: 1399.98px) {
  .hero-section.hero-3 {
    padding-top: 150px !important;
  }
} */
.feature-service-card-items{
  margin-top: 30px;
  position: relative;
  z-index: 9;
  padding: 34px 25px;
  padding-top: 0;
  text-align: center;
}
.feature-service-card-items::after{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    content: "";
    background-color: var(--theme-color7);
    -webkit-transform: scale(1, 0);
    transform: scale(1, 0);
    -webkit-transition: -webkit-transform 500ms ease;
    transition: -webkit-transform 500ms ease;
    transition: transform 500ms ease;
    transition: transform 500ms ease, -webkit-transform 500ms ease;
    -webkit-transform-origin: bottom center;
    transform-origin: bottom center;
    z-index: -1;
    top: 0px;
    height: initial;
    border-radius: 15px;
}
.feature-service-card-items::before{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  content: "";
  background-color: var(--theme-color1);
  border-radius: 15px;
  z-index: -1;
  top: 0px;
  height: initial;
  /* min-height: 245px; */
}
.feature-service-card-items:hover::after {
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);
  -webkit-transform-origin: top center;
  transform-origin: top center;
}
.feature-service-card-items:hover .icon{
  background-color: var(--theme-color-white); border: 3px solid var(--theme-color1);
}
.feature-service-card-items:hover .content h3{color: var(--theme-color1);}
.feature-service-card-items:hover .content p{color: var(--theme-color1);}

.team-block-six{overflow: hidden;}
.team-block-six .team-image img{transform: translateX(0);
  transition: transform 0.5s ease-out;}

  .team-block-six:hover .team-image img{transform: scale(1.1) translateX(5px);}


@media (max-width: 575.98px) {
  .hero-section.hero-3 {
    margin-left: 10px !important;
    margin-right: 10px !important;
  }
}

.info.mt-50{margin-top: 34px !important;}

/* Show Apply For ITIN button on all pages */
.outer-box .opacity-0 {
  opacity: 1 !important;
}

.sub-page .header-style-one{position: relative; z-index: 999;}
.sub-page .outer-box .opacity-0{opacity: 1;}
.sub-page .growth-section{margin-bottom: 20px;}

.service-title{display: flex; align-items: center;}
.service-title .title{margin-bottom: 0; margin-left: 20px;}
.service-title .icon img{width: 50px; max-height: 50px;}

.service-block-four{min-height: 470px;}
.service-block-four .content .text{margin-bottom: 0px; font-weight: 600; min-height: 90px;}
/* .service-block-four .content .js--service-desc{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
} */
.service-block-four .content ul{padding-left: 15px; margin-bottom: 15px; min-height: 180px;}
.service-block-four .content ul li{list-style-type: disc; padding: 5px 0 0;}
.service-block-four:hover .service-title h3 {color: var(--theme-color-white);}
.service-block-four:hover .content ul li{color: var(--theme-color-white);}
.service-block-four:hover .service-title .icon img{filter: invert(1);}
.service-block-four .btn-style-two .icon{background: var(--theme-color-white); color: var(--theme-color1);}

.service-know-box .icon svg path{fill: var(--theme-color7);}

.title-outer p{color:#fff; margin-top: 20px; position: relative;}

.service-card-items-2 .content h3{min-height: 50px; font-size: 20px;}

.career-ul{padding-left: 15px;}
.career-ul li{list-style-type: disc; padding: 5px 0; width: 50%; float: left;} 



.feature-block-one.active .inner-box .content-box .feature-title, .feature-block-one:hover .inner-box .content-box .feature-title{
  color: var(--theme-color-white);
}


.header-style-one.header-3{z-index: 99;}
.how-it-work-sec{
  display: flex;
  justify-content: center;
  margin: 15px 0;
}

/***  buttons  ***/
.growth-section .theme-btn.btn-style-one:hover{
  color: var(--theme-color-white);
}

.btn-style-one:before{
  background-color:var(--theme-color1);
}

.how-it-work-sec .theme-btn.btn-style-one {
  padding: 26px 60px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding-right: 100px;
  height: 70px;
  border-radius: 100px;
  /* background: transparent; */
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--headings-color);
}
.how-it-work-sec .theme-btn {
  position: relative;
  margin: 30px 5px 0;
  min-width: 370px;
}
.how-it-work-sec .theme-btn .icon {
  width: 60px;
  height: 60px;
  line-height: 60px;
  border-radius: 50%;
  background-color: var(--theme-color1);
  position: absolute;
  right: 4px;
  top: 4px;
  bottom: 4px;
}
.how-it-work-sec .theme-btn.btn-style-one:hover {
  color: var(--theme-color-white);
}
.how-it-work-sec .theme-btn.btn-style-one::before {
  background: var(--theme-color1);
}
.how-it-work-sec .theme-btn.btn-style-one:hover .icon{background-color:var(--theme-color7)}
.theme-btn .icon {transition: transform 0.5s ease-in-out;}
.theme-btn:hover .icon {
  transform: rotate(45deg);
    transition: transform 0.4s ease-in-out;
}



.doc-box{
  border-radius: 10px;
  padding: 20px;
}
.doc-box .doc-box-title{
  display: flex;
  align-items: center;
}
.doc-box .doc-box-title .icon{
  margin-right: 20px;
}
.doc-box .doc-box-title .icon img{
  width: 45px;
}
.doc-box .doc-box-title h3{
  margin: 0;
}
.doc-box .content{
  max-width: 100%;
}
.growth-block{
  align-items: flex-start;
}


/***   slider   ***/
.slider{
  /* min-height: 770px; */
}
.slider .hero-image img{max-width: 590px;}
.slider .hero-image .text-circle img{max-width: fit-content;}

/***  buttons  ***/

.hero-3 .hero-content .hero-button .theme-btn.btn-style-one:before{background-color: var(--theme-color-white);}
.btn2 {
  padding: 26px 60px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding-right: 100px;
  height: 70px;
  border-radius: 100px;
  background: -webkit-gradient(linear, left top, right top, from(#BEEC6B), to(#169C92));
  background: linear-gradient(90deg, #BEEC6B 0%, #169C92 100%);
  color: var(--theme-color-white);
}
.btn2:before {
  position: absolute;
  left: 0;
  top: 0%;
  height: 100%;
  width: 100%;
  content: "";
  background-color: var(--bg-theme-color1);
  -webkit-transform: scale(1, 0);
  transform: scale(1, 0);
  -webkit-transform-origin: bottom left;
  transform-origin: bottom left;
  transition: -webkit-transform 500ms cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition: -webkit-transform 500ms cubic-bezier(0.86, 0, 0.07, 1);
  transition: transform 500ms cubic-bezier(0.86, 0, 0.07, 1);
  transition: transform 500ms cubic-bezier(0.86, 0, 0.07, 1), -webkit-transform 500ms cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  z-index: -1;
}
.btn2:hover {
  color: var(--headings-color);
}

.testimonial-section-3 .array-button .array-prev:hover i{color: var(--theme-color-white);}

/*** footer ***/
.footer-widget-wrapper .footer-widget-items .contact-list li img{filter: invert(1);}


/***  about us page  ***/
.about-counter .count-box{flex-direction: column;}
.about-counter .count-box h2{font-size: 70px; margin: 0;}
.about-counter .count-box{gap: 0;}
.global-pr{position: relative; padding: 120px 0px 0px; background: var(--theme-color-white);}
.gb-pr-img img{border-radius: 30px;}
.gb-pr-img p{text-align: center;}
.advantage-text {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0px;
  margin: 80px 0 0;
}

/***  form css  ***/
.form-w7{padding: 30px 0px;}
.form-control{height: calc(2.25rem + 10px);}
.nice-select{height: 46px; line-height:46px;}
.nice-select .current{position: relative; top: -10px;}

.form-container {
  max-width: 1000px;
  margin: 0 auto;
}
.wizard-card {
  background: white;
  border-radius: 2rem;
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
/* Step Indicator - Circular with progress connectors */
.step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 2rem 1.5rem 2rem;
  background: white;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.step-wrapper {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: center;
}
.step-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #f0f2f5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.4rem;
  color: #6c757d;
  transition: all 0.3s ease;
  position: relative;
  z-index: 2;
  border: 2px solid #dee2e6;
  background: white;
}
.step-circle.active {
  background: #0b2b3f;
  border-color: #0b2b3f;
  color: white;
  box-shadow: 0 8px 20px rgba(11, 43, 63, 0.25);
}
.step-circle.completed {
  background: #2c7a4d;
  border-color: #2c7a4d;
  color: white;
}
.step-circle.completed i {
  font-size: 1.6rem;
}
.step-label {
  text-align: center;
  margin-top: 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #6c757d;
}
.step-label.active-label {
  color: #0b2b3f;
  font-weight: 700;
}
.step-label.completed-label {
  color: #2c7a4d;
}
.progress-connector {
  flex: 1;
  height: 4px;
  background: #e0e4e9;
  margin: 0 12px;
  border-radius: 4px;
  position: relative;
  top: -8px;
}
.progress-connector-fill {
  height: 100%;
  width: 0%;
  background: #2c7a4d;
  border-radius: 4px;
  transition: width 0.4s ease;
}
.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 80px;
}
.form-step {
  padding: 2rem 2rem 1.8rem;
  animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.step-title {
  font-weight: 700;
  font-size: 1.6rem;
  color: #0b2b3f;
  padding-left: 1rem;
  margin-bottom: 1.8rem;
  padding:0;
}
.form-label {
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #2c3e4e;
  margin-bottom: 0.3rem;
}
.required-star::after {
  content: " *";
  color: #dc3545;
  font-weight: bold;
}
.form-control, .form-select {
  border-radius: 1rem;
  border: 1px solid #e2e8f0;
  padding: 0.7rem 1rem;
  background: #fefefe;
  transition: all 0.2s;
}
.form-control:focus, .form-select:focus {
  border-color: #ffb347;
  box-shadow: 0 0 0 3px rgba(255, 179, 71, 0.2);
  background: white;
}
.info-note {
  font-size: 0.7rem;
  background: #fff8ef;
  border-left: 3px solid #ffb347;
  padding: 0.5rem 0.8rem;
  border-radius: 0.8rem;
}
.btn-navigate {
  border-radius: 40px;
  padding: 0.7rem 2rem;
  font-weight: 600;
  transition: all 0.2s;
}
.btn-next {
  background: #0b2b3f;
  border: none;
  color: white;
}
.btn-next:hover {
  background: #1e4a62;
  transform: translateY(-2px);
}
.btn-prev {
  background: #f1f4f9;
  border: 1px solid #dce3ec;
  color: #2c3e50;
}
.btn-prev:hover {
  background: #e6ecf3;
}
.signature-card {
  background: #fafcff;
  border-radius: 1.2rem;
  padding: 1.2rem;
  border: 1px solid #eef2f8;
}
.footer-note {
  font-size: 0.7rem;
  text-align: center;
  color: #6c86a0;
  padding: 1rem 1.5rem 1.2rem;
  border-top: 1px solid #eef2f8;
  background: white;
}
@media (max-width: 650px) {
  .step-circle { width: 42px; height: 42px; font-size: 1.1rem; }
  .step-label { font-size: 0.6rem; }
  .progress-connector { margin: 0 6px; }
  .step-title { font-size: 1.3rem; }
  .form-step { padding: 1.5rem; }
}
.bg-soft-warning {
  background: #fef5e8;
}
.collapse-toggle {
  cursor: pointer;
  user-select: none;
}
.card-radio-group {
  background: #f8fafd;
  border-radius: 1rem;
  padding: 1rem;
  border: 1px solid #e9edf2;
}
.id-option {
  padding: 0.5rem 0;
}
.id-option input[type="radio"] {
  margin-right: 0.6rem;
  transform: scale(1.1);
  accent-color: #0b2b3f;
}
.other-input {
  margin-top: 0.5rem;
  margin-left: 1.8rem;
}

/***   contact us page   ***/
.contact-details .content-column .inner-column form .type-feild input{background-color: transparent;}
.contact-details .content-column .inner-column form .type-feild textarea{background-color: transparent;}
.contact-details-block{padding: 30px 5px; min-height: 300px;}

/* itin overview page */


.bento-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  margin-bottom: 50px;
}

.itin-card {
  background: #ffffff;
  padding: 40px;
  border-radius: 30px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.05);
  border: 1px solid #f1f5f9;
}

.itin-card.accent-card { background: var(--theme-color1); color: white; border: none; }
.itin-card.accent-card h3 { color: var(--theme-color-white); }
.itin-card .card-header { display: flex; align-items: center; gap: 15px; margin-bottom: 25px; background: transparent; padding: 0; border: none; }
.icon-box { font-size: 1.5rem; background: var(--theme-color7); padding: 10px; border-radius: 12px; }

.card-content-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.card-content-split ul { list-style: none; color: var(--text-main); }
.card-content-split li { margin-bottom: 12px; display: flex; gap: 10px; }
.card-content-split span { color: var(--theme-color7); font-weight: bold; }

.check-list { list-style: none; }
.check-list li { margin-bottom: 15px; font-size: 0.9rem; opacity: 0.9; }

/* Rules Section */
.rules-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  background: rgba(241, 245, 249, 0.5);
  padding: 60px;
  border-radius: 40px;
  border: 1px dashed #cbd5e1;
  margin-bottom: 80px;
}

.rule h4 { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; font-size: 1.2rem; }
.step-num { 
  background: white; width: 32px; height: 32px; 
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; font-size: 0.8rem; box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* CAA Section */
.caa-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  margin-bottom: 100px;
}

.image-wrapper { position: relative; }
.image-wrapper::before {
  content: ''; position: absolute; top: -20px; left: -20px;
  width: 200px; height: 200px; background: rgba(5, 150, 105, 0.1);
  border-radius: 50%; filter: blur(40px); z-index: -1;
}

.image-wrapper img { width: 100%; border-radius: 40px; box-shadow: 0 30px 60px rgba(0,0,0,0.1); border: 8px solid white; }

.caa-content h2 { font-size: 2.5rem; line-height: 1.2; margin-bottom: 30px; }
.underline { text-decoration: underline; text-decoration-color: var(--theme-color7); text-underline-offset: 8px; color: var(--primary); }

.feature-item { display: flex; gap: 15px; margin-bottom: 25px; }
.dot { 
  width: 48px; height: 48px; background: var(--theme-color7); color: var(--theme-color1);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; flex-shrink: 0; font-weight: bold;
}

.overview-page .about-section-three .image-colmun .image-box .about-image{max-height: 500px;}

/* Responsive */
@media (max-width: 992px) {
  .bento-grid, .rules-box, .caa-feature { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .hero h1 { font-size: 3rem; }
}



/* Contact form field errors */
.contact-form-group {
    display: block;
    width: 100%;
    margin-bottom: 45px;
}
/* Remove the original bottom margin from type-feild inside our groups
   so the group wrapper controls spacing instead */
.contact-form-group .type-feild {
    margin-bottom: 0 !important;
}
/* When error is visible, reduce group bottom margin so error sits
   snugly below the field and the next field follows naturally */
.contact-form-group:has(.website-field-error:not(:empty)),
.contact-form-group.has-field-error {
    margin-bottom: 8px;
}
.website-field-error {
    display: none;
    color: #e74c3c;
    font-size: 12px;
    font-weight: 500;
    margin-top: 6px;
    margin-bottom: 20px;
    padding-left: 2px;
    width: 100%;
}
.contact-details .type-feild.has-error input,
.contact-details .type-feild.has-error textarea {
    border-bottom: 1px solid #e74c3c;
}
.contact-form-success {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #eafaf1;
    border: 1px solid #27ae60;
    color: #1e8449;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 500;
}
.contact-form-success i {
    font-size: 18px;
    flex-shrink: 0;
}

/* Contact details block — ensure links inside text turn white on hover */
.contact-details-block:hover .text a {
    color: var(--theme-color-white) !important;
}


/****   form css (from style-new.txt)  ***/
.form-card {
  max-width: 1200px;
  width: 100%;
  background: rgba(255, 255, 255, 0.98);
  border-radius: 8px;
  box-shadow: 0 25px 45px -12px rgba(0, 33, 71, 0.25), 0 8px 18px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  border: 1px solid rgba(0, 33, 71, 0.1);
}
.step-header {
  background: white;
  padding: 1.8rem 2rem 0.8rem 2rem;
  border-bottom: 1px solid #eef2f8;
}
.step-sub {
  color: #5b6f82;
  font-size: 0.9rem;
  font-weight: 400;
  margin-bottom: 1.5rem;
}
.progress-indicator {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 1.2rem 0;
  position: relative;
}
.step-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
  background: transparent;
  flex: 1;
}
.step-badge .step-circle {
  width: 44px;
  height: 44px;
  background: #f1f5f9;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.2rem;
  color: #5e6f8d;
  transition: all 0.25s;
  border: 2px solid #e2e8f0;
  background: white;
  margin-bottom: 8px;
}
.step-badge.active .step-circle {
  background: #002147;
  border-color: #002147;
  color: white;
  box-shadow: 0 8px 14px -8px rgba(0, 33, 71, 0.4);
}
.step-badge.completed .step-circle {
  background: #d4af37;
  border-color: #d4af37;
  color: #002147;
}
.step-badge .step-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #6c7f8f;
}
.step-badge.active .step-label { color: #002147; font-weight: 700; }
.step-badge.completed .step-label { color: #d4af37; font-weight: 600; }
.progress-line {
  position: absolute;
  top: 22px;
  left: 0;
  right: 0;
  height: 3px;
  background: #e2edf2;
  z-index: 0;
  margin: 0 6%;
  border-radius: 8px;
}
.progress-fill {
  height: 100%;
  width: 0%;
  background: #d4af37;
  transition: width 0.35s ease;
  border-radius: 8px;
}
.form-step-content { padding: 2rem 2rem 1.2rem 2rem; background: #ffffff; }
.form-card .form-step { animation: fadeSlide 0.3s ease-out; }
@keyframes fadeSlide { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.form-card .form-label {
  font-weight: 600;
  font-size: 0.85rem;
  color: #002147;
  margin-bottom: 0.4rem;
  letter-spacing: -0.2px;
}
.form-card .form-control, .form-card .form-select {
  border-radius: 8px;
  border: 1.5px solid #e4edf2;
  padding: 0.7rem 1rem;
  font-size: 0.95rem;
  transition: 0.2s;
  background-color: #fefefe;
}
.form-card .form-control:focus, .form-card .form-select:focus {
  border-color: #d4af37;
  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.15);
  outline: none;
}
.checkbox-group-custom {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}
.checkbox-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.6rem 0.9rem;
  background: #fbfdfe;
  border-radius: 8px;
  transition: all 0.2s;
  border: 1px solid #e9eff5;
}
.checkbox-item:hover { background: #f6fafe; border-color: #d4af37; }
.checkbox-item input[type="checkbox"] {
  width: 1.2rem;
  height: 1.2rem;
  margin-top: 0.15rem;
  accent-color: #002147;
  flex-shrink: 0;
  border-radius: 8px;
}
.checkbox-item label {
  font-weight: 500;
  font-size: 0.9rem;
  color: #1e3a4d;
  margin-bottom: 0;
  cursor: pointer;
  flex: 1;
}
.conditional-field {
  margin-left: 1.5rem;
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
  padding-left: 1rem;
  border-left: 3px solid #d4af37;
  background: #f9fdfe;
  border-radius: 8px;
  padding: 1rem;
}
.radio-group-custom {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 0.4rem;
}
.radio-option {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: #fafdff;
  border: 1.5px solid #e2ebf3;
  border-radius: 8px;
  padding: 0.5rem 1.2rem;
  transition: all 0.2s;
  cursor: pointer;
}
.radio-option.selected { border-color: #d4af37; background: #fff9e6; }
.radio-option input { accent-color: #002147; width: 18px; height: 18px; margin: 0; border-radius: 8px; }
.checkbox-modern {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 1rem 0;
}
.checkbox-modern input { accent-color: #002147; width: 1.2rem; height: 1.2rem; border-radius: 8px; }
.upload-card {
  background: #fafcff;
  border-radius: 8px;
  padding: 1rem 1.2rem;
  margin-bottom: 1.5rem;
  border: 1px solid #ecf3f8;
  transition: all 0.2s;
}
.upload-card:hover { border-color: #d4af37; background: #fffdf5; }
.upload-area {
  border: 2px dashed #cbdde6;
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
  transition: all 0.2s;
  background: #fafeff;
  cursor: pointer;
  margin-top: 0.5rem;
}
.upload-area:hover { border-color: #d4af37; background: #fff9e6; }
.upload-icon { font-size: 2rem; color: #002147; margin-bottom: 0.3rem; }
.file-name-display { font-size: 0.8rem; color: #d4af37; font-weight: 500; margin-top: 0.5rem; word-break: break-all; }
.remove-file {
  font-size: 0.7rem;
  color: #dc3545;
  cursor: pointer;
  margin-left: 0.5rem;
}
.remove-file:hover { text-decoration: underline; }
.btn-navigation {
  padding: 0.75rem 1.6rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: 0.2s;
}
.btn-primary-custom {
  background: #002147;
  border: none;
  color: white;
  box-shadow: 0 4px 8px rgba(0, 33, 71, 0.2);
  border-radius: 8px;
}
.btn-primary-custom:hover {
  background: #003366;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 33, 71, 0.25);
  color: #fff;
}
.btn-outline-secondary-custom {
  border: 1.5px solid #cbdde6;
  background: white;
  color: #002147;
  border-radius: 8px;
}
.btn-outline-secondary-custom:hover {
  background: #fff9e6;
  border-color: #d4af37;
  color: #002147;
}
.form-card footer {
  border-top: 1px solid #ecf3f8;
  padding: 1.2rem 2rem 1.8rem 2rem;
  background: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.info-section {
  background: #fafcff;
  border-radius: 8px;
  padding: 1rem 1.2rem;
  margin-bottom: 1.5rem;
  border: 1px solid #ecf3f8;
}
.section-title {
  font-size: 1rem;
  font-weight: 700;
  color: #002147;
  margin-bottom: 1rem;
  border-left: 4px solid #d4af37;
  padding-left: 0.75rem;
}
.subgroup {
  background: #ffffff;
  padding: 0.8rem;
  border-radius: 8px;
  margin-top: 0.5rem;
  border: 1px solid #eef2f8;
}
.preview-box {
  background: #f8fafc;
  border-radius: 8px;
  padding: 1.5rem;
  max-height: 600px;
  overflow-y: auto;
}
.preview-category {
  margin-bottom: 1.2rem;
  border-bottom: 2px solid #d4af37;
  padding-bottom: 0.5rem;
  margin-top: 0.5rem;
}
.preview-category-title {
  font-weight: 700;
  color: #002147;
  font-size: 1rem;
}
.preview-item {
  padding: 0.5rem 0;
  border-bottom: 1px solid #eef2f8;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.preview-label {
  font-weight: 600;
  color: #002147;
  width: 40%;
  font-size: 0.8rem;
}
.preview-value {
  color: #334e68;
  width: 60%;
  font-size: 0.8rem;
  word-break: break-word;
}
.preview-value.empty {
  color: #adb5bd;
  font-style: italic;
}
.badge-status {
  font-size: 0.7rem;
  padding: 0.2rem 0.5rem;
  border-radius: 8px;
  margin-left: 0.5rem;
}
.badge-filled {
  background: #d4af37;
  color: #002147;
}
.badge-empty {
  background: #e9ecef;
  color: #6c757d;
}
.form-card .alert-info { background: #e8f0f9; color: #002147; border-radius: 8px; border: none; }
.form-card .alert-success { background: #fef7e0; color: #002147; border-radius: 8px; border: none; }
@media (max-width: 700px) {
  .step-badge .step-label { font-size: 0.55rem; }
  .step-badge .step-circle { width: 34px; height: 34px; font-size: 0.9rem; border-radius: 8px; }
  .preview-label, .preview-value { width: 100%; }
  .preview-item { flex-direction: column; gap: 0.2rem; }
  .conditional-field { margin-left: 0.5rem; }
}

/* ── Multi-step form: inline step validation alert ── */
.step-validation-alert {
    margin: 0 1.5rem 1rem;
    border-left: 4px solid #dc3545;
    border-radius: 6px;
    font-size: 0.92rem;
    animation: fadeInDown 0.25s ease;
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* main section with primary color #002147 dominance */
.adas-vision-mission {
  background: linear-gradient(135deg, #fefcf9 0%, #f8f5f0 100%);
  position: relative;
  isolation: isolate;
  /* padding: 5rem 2rem 6rem; */
}

/* elegant gold + navy abstract background */
.bg-elegance {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.gold-mist {
  position: absolute;
  top: -20%;
  right: -10%;
  width: 60%;
  height: 60%;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, rgba(212, 175, 55, 0) 70%);
  border-radius: 50%;
  filter: blur(80px);
  animation: floatGold 12s ease-in-out infinite alternate;
}

@keyframes floatGold {
  0% { transform: translate(0, 0) scale(1); opacity: 0.4; }
  100% { transform: translate(-30px, 20px) scale(1.1); opacity: 0.7; }
}

.navy-mist {
  position: absolute;
  bottom: -15%;
  left: -5%;
  width: 55%;
  height: 55%;
  background: radial-gradient(circle, rgba(0, 33, 71, 0.04) 0%, rgba(0, 33, 71, 0) 70%);
  border-radius: 50%;
  filter: blur(70px);
  animation: floatNavy 15s ease-in-out infinite alternate;
}

@keyframes floatNavy {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(40px, -20px) scale(1.15); }
}

/* container */
.container-prestige {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* header styling */
.section-header {
  text-align: center;
  margin-bottom: 4rem;
  animation: fadeInUp 0.8s ease forwards;
}

.gold-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 33, 71, 0.06);
  padding: 0.45rem 1.5rem;
  border-radius: 60px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #d4af37;
  border: 0.5px solid rgba(212, 175, 55, 0.35);
  backdrop-filter: blur(4px);
  margin-bottom: 1rem;
  animation: pulseBorder 3s infinite;
}

@keyframes pulseBorder {
  0% { border-color: rgba(212, 175, 55, 0.3); box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.1); }
  50% { border-color: rgba(212, 175, 55, 0.7); box-shadow: 0 0 12px 2px rgba(212, 175, 55, 0.15); }
  100% { border-color: rgba(212, 175, 55, 0.3); box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
}

.section-header h1 {
  font-family: 'Playfair Display', serif;
  font-size: 3.6rem;
  font-weight: 700;
  color: #002147;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}

.section-header h1 span {
  color: #d4af37;
  font-style: italic;
}

.gold-divider {
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, #d4af37, #f5e5b3, #d4af37);
  margin: 1rem auto 0.8rem;
  border-radius: 4px;
  animation: expandWidth 1s ease-out forwards;
}

@keyframes expandWidth {
  0% { width: 0; opacity: 0; }
  100% { width: 80px; opacity: 1; }
}

.subhead {
  font-size: 0.95rem;
  color: #5a6b7a;
  max-width: 600px;
  margin: 0.8rem auto 0;
}

/* split layout - vision & mission cards */
.split-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  justify-content: center;
  align-items: stretch;
}

.card {
  flex: 1;
  min-width: 300px;
  background: #ffffff;
  border-radius: 1.8rem;
  padding: 2.5rem 2.2rem;
  transition: all 0.4s cubic-bezier(0.2, 0.95, 0.4, 1.05);
  border: 1px solid rgba(212, 175, 55, 0.3);
  box-shadow: 0 20px 35px -12px rgba(0, 33, 71, 0.06);
  position: relative;
  overflow: hidden;
  animation: fadeInUpCard 0.8s ease forwards;
  animation-delay: calc(var(--delay, 0) * 0.1s);
}

.card:first-child { --delay: 1; }
.card:last-child { --delay: 2; }

@keyframes fadeInUpCard {
  from {
      opacity: 0;
      transform: translateY(30px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, #002147, #d4af37, #002147);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}

.card:hover::before {
  transform: scaleX(1);
}

.card:hover {
  transform: translateY(-8px);
  border-color: #d4af37;
  box-shadow: 0 30px 45px -15px rgba(0, 33, 71, 0.15);
}

/* icon style */
.icon-crown {
  width: 70px;
  height: 70px;
  background: rgba(0, 33, 71, 0.05);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(212, 175, 55, 0.4);
  transition: 0.3s;
  animation: floatIcon 3s ease-in-out infinite;
}

@keyframes floatIcon {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.card:hover .icon-crown {
  background: rgba(212, 175, 55, 0.1);
  transform: scale(1.02);
}

.icon-crown i {
  font-size: 2.2rem;
  color: #d4af37;
}

.card-title {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1.2rem;
}

.vision-title {
  color: #002147;
  border-left: 4px solid #d4af37;
  padding-left: 14px;
}

.mission-title {
  color: #002147;
  border-left: 4px solid #d4af37;
  padding-left: 14px;
}

.card-content {
  font-size: 0.95rem;
  line-height: 1.65;
  color: #2c3e4e;
}

/* mission features grid */
.mission-features {
  list-style: none;
  /* margin: 1.2rem 0 0.5rem; */
}

.mission-features li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 5px;
  font-size: 0.88rem;
  font-weight: 500;
  color: #1f3a48;
  padding: 0.2rem 0;
  transition: 0.2s;
}

.mission-features li i {
  width: 24px;
  color: #d4af37;
  font-size: 0.95rem;
  transition: 0.2s;
}

.mission-features li:hover {
  transform: translateX(6px);
  color: #002147;
}

.mission-features li:hover i {
  transform: scale(1.1);
}

/* trust badge row */
.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.5rem;
}

.trust-pill {
  background: rgba(0, 33, 71, 0.05);
  padding: 0.3rem 1.1rem;
  border-radius: 60px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--theme-color7);
  border: 0.5px solid rgba(212, 175, 55, 0.3);
  transition: 0.2s;
  cursor: default;
}

.trust-pill i {
  margin-right: 5px;
  color: #d4af37;
}

.trust-pill:hover {
  background: #d4af37;
  color: #002147;
  border-color: #d4af37;
  transform: translateY(-2px);
}
.trust-pill:hover i{
  color: var(--theme-color1);
}

/* additional global values */
.global-values {
  margin-top: 1rem;
  font-size: 0.85rem;
  background: rgba(212, 175, 55, 0.05);
  padding: 0.8rem 1rem;
  border-radius: 1rem;
  color: #2c5a6e;
  border-left: 2px solid #d4af37;
  transition: 0.2s;
}

.card:hover .global-values {
  background: rgba(212, 175, 55, 0.1);
}

/* footer motto */
.footer-motto {
  text-align: center;
  margin-top: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  animation: fadeInUp 0.8s ease 0.5s forwards;
  opacity: 0;
}

@keyframes fadeInUp {
  from {
      opacity: 0;
      transform: translateY(20px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

.motto-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, #d4af37, #002147, #d4af37, transparent);
  width: 100px;
  animation: linePulse 3s ease-in-out infinite;
}

@keyframes linePulse {
  0%, 100% { opacity: 0.3; width: 80px; }
  50% { opacity: 0.8; width: 110px; }
}

.motto-text {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 1px;
  color: #6b7b8a;
}

.motto-text i {
  color: #d4af37;
  margin: 0 4px;
}

/***   about us page counter  ***/
.stats-section {
  position: relative;
  padding: 5rem 2rem;
  isolation: isolate;
  overflow: hidden;
}

/* animated background elements */
.bg-animation {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.floating-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  animation: floatShape 15s ease-in-out infinite alternate;
}

.shape-1 {
  top: -15%;
  left: -5%;
  width: 45%;
  height: 45%;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.08), rgba(212, 175, 55, 0));
  animation-duration: 18s;
}

.shape-2 {
  bottom: -10%;
  right: -8%;
  width: 50%;
  height: 50%;
  background: radial-gradient(circle, rgba(0, 33, 71, 0.06), rgba(0, 33, 71, 0));
  animation-duration: 22s;
  animation-delay: -3s;
}

.shape-3 {
  top: 30%;
  right: 20%;
  width: 25%;
  height: 25%;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.05), rgba(212, 175, 55, 0));
  animation-duration: 14s;
  animation-delay: -5s;
}

@keyframes floatShape {
  0% {
      transform: translate(0, 0) scale(1);
      opacity: 0.3;
  }
  100% {
      transform: translate(40px, -30px) scale(1.2);
      opacity: 0.6;
  }
}

/* container */
.stats-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* header */
.stats-header {
  text-align: center;
  margin-bottom: 4rem;
  animation: fadeSlideUp 0.8s ease forwards;
}

.gold-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 33, 71, 0.06);
  padding: 0.4rem 1.4rem;
  border-radius: 60px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #d4af37;
  border: 1px solid rgba(212, 175, 55, 0.3);
  margin-bottom: 1rem;
  animation: pulseGold 3s infinite;
}

@keyframes pulseGold {
  0%, 100% { border-color: rgba(212, 175, 55, 0.3); }
  50% { border-color: rgba(212, 175, 55, 0.8); box-shadow: 0 0 12px rgba(212, 175, 55, 0.15); }
}

.stats-header h2 {
  font-family: 'Playfair Display', serif;
  font-size: 3rem;
  font-weight: 700;
  color: #002147;
  letter-spacing: -0.02em;
}

.stats-header h2 span {
  color: #d4af37;
  font-style: italic;
}

.gold-line {
  width: 70px;
  height: 3px;
  background: linear-gradient(90deg, #d4af37, #f5e5b3, #d4af37);
  margin: 1rem auto 0;
  border-radius: 3px;
  animation: expandWidth 0.8s ease-out forwards;
}

@keyframes expandWidth {
  0% { width: 0; opacity: 0; }
  100% { width: 70px; opacity: 1; }
}

.subhead {
  font-size: 0.9rem;
  color: #6a7a6e;
  max-width: 550px;
  margin: 1rem auto 0;
}

/* stats grid */
.stats-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  margin-top: 10rem;
}

/* stat card */
.stat-card {
  flex: 1;
  min-width: 200px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  border-radius: 1.5rem;
  padding: 2rem 1.5rem;
  text-align: center;
  border: 1px solid rgba(212, 175, 55, 0.25);
  box-shadow: 0 15px 35px -12px rgba(0, 33, 71, 0.08);
  transition: all 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
  position: relative;
  overflow: hidden;
  animation: cardFadeIn 0.6s ease forwards;
  opacity: 0;
}

.stat-card:nth-child(1) { animation-delay: 0.1s; }
.stat-card:nth-child(2) { animation-delay: 0.2s; }
.stat-card:nth-child(3) { animation-delay: 0.3s; }
.stat-card:nth-child(4) { animation-delay: 0.4s; }

@keyframes cardFadeIn {
  from {
      opacity: 0;
      transform: translateY(30px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #002147, #d4af37, #002147);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}

.stat-card:hover::before {
  transform: scaleX(1);
}

.stat-card:hover {
  transform: translateY(-8px);
  border-color: #d4af37;
  box-shadow: 0 25px 45px -15px rgba(0, 33, 71, 0.2);
  background: #ffffff;
}

/* icon wrapper */
.stat-icon {
  width: 70px;
  height: 70px;
  background: rgba(0, 33, 71, 0.05);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0;
  border: 1px solid rgba(212, 175, 55, 0.3);
  transition: all 0.3s;
  animation: floatIcon 3s ease-in-out infinite;
}

@keyframes floatIcon {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.stat-card:hover .stat-icon {
  background: rgba(212, 175, 55, 0.1);
  transform: scale(1.05);
}

.stat-icon i {
  font-size: 2rem;
  color: #d4af37;
}

/* number animation */
.stat-number {
  font-size: 3rem;
  font-weight: 800;
  color: #002147;
  margin-bottom: 0.3rem;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  animation: countGlow 2s ease-out;
}

@keyframes countGlow {
  0% {
      text-shadow: 0 0 0 rgba(212, 175, 55, 0);
      opacity: 0;
      transform: scale(0.9);
  }
  30% {
      text-shadow: 0 0 8px rgba(212, 175, 55, 0.5);
  }
  100% {
      text-shadow: 0 0 0 rgba(212, 175, 55, 0);
      opacity: 1;
      transform: scale(1);
  }
}

.stat-number .plus {
  font-size: 2rem;
  color: #d4af37;
}

.stat-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #5a6b7a;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.stat-desc {
  font-size: 0.75rem;
  color: #8a9a8e;
  margin-top: 0.4rem;
}

/* decorative ring on hover */
.stat-card::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.1), transparent);
  transform: translate(-50%, -50%);
  transition: width 0.5s, height 0.5s;
  pointer-events: none;
  z-index: -1;
}

.stat-card:hover::after {
  width: 200%;
  height: 200%;
}

/* footer note */
.stats-footer {
  text-align: center;
  margin-top: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  animation: fadeSlideUp 0.8s ease 0.5s forwards;
  opacity: 0;
}

@keyframes fadeSlideUp {
  from {
      opacity: 0;
      transform: translateY(20px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

.footer-line {
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #d4af37, transparent);
  animation: linePulse 3s ease-in-out infinite;
}

@keyframes linePulse {
  0%, 100% { width: 60px; opacity: 0.3; }
  50% { width: 100px; opacity: 0.8; }
}

.footer-text {
  font-size: 0.7rem;
  letter-spacing: 2px;
  color: #9a8a6e;
  text-transform: uppercase;
}

.footer-text i {
  color: #d4af37;
  margin: 0 6px;
}


.animated-icon {
  font-size: 2.2rem;
  margin-bottom: 1rem;
  display: inline-block;
  width: 52px;
  text-align: center;
  color: #002147;
  transition: color 0.2s;
}

.feature-mini:hover .animated-icon {
  color: #d4af37;
}

/* SWING animation (gentle back-and-forth rotation) */
.icon-swing {
  animation: swing 2.5s ease-in-out infinite;
  transform-origin: center center;
  display: inline-block;
}

@keyframes swing {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(8deg); }
  50% { transform: rotate(-6deg); }
  75% { transform: rotate(4deg); }
  100% { transform: rotate(0deg); }
}

/* PULSE animation (soft scale + opacity) */
.icon-pulse {
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.12); opacity: 0.9; }
  100% { transform: scale(1); opacity: 1; }
}

/* BOUNCE (gentle up-down) */
.icon-bounce {
  animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* SPIN-SLOW (subtle rotation) */
.icon-spin-slow {
  animation: spinSlow 8s linear infinite;
}

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

/* WOBBLE (more playful swing) */
.icon-wobble {
  animation: wobble 2.2s ease-in-out infinite;
  transform-origin: center;
}

@keyframes wobble {
  0%, 100% { transform: rotate(0deg); }
  15% { transform: rotate(6deg); }
  30% { transform: rotate(-4deg); }
  45% { transform: rotate(3deg); }
  60% { transform: rotate(-2deg); }
  75% { transform: rotate(1deg); }
}

/* FLOAT (gentle levitation) */
.icon-float {
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
}

/* heartbeat */
.icon-heartbeat {
  animation: heartbeat 1.5s ease-in-out infinite;
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.15); }
  50% { transform: scale(1.05); }
  70% { transform: scale(1.12); }
}

/* hover pause — better UX, icons stop animating on hover for less distraction */
.feature-mini:hover .animated-icon {
  animation-play-state: paused;
}

.animated-icon i{font-size: 50px;}


/* responsive */
@media (max-width: 850px) {
  .stats-section { padding: 3rem 1.5rem; }
  .stats-header h2 { font-size: 2.2rem; }
  .stat-number { font-size: 2.5rem; }
  .stat-number .plus { font-size: 1.6rem; }
  .stat-card { min-width: 180px; padding: 1.5rem; }
}

@media (max-width: 550px) {
  .stats-grid { gap: 1rem; }
  .stat-card { min-width: 160px; }
  .stat-icon { width: 55px; height: 55px; }
  .stat-icon i { font-size: 1.5rem; }
  .stat-number { font-size: 2rem; }
}

/* scroll reveal animation */
@keyframes subtleReveal {
  from {
      opacity: 0;
      transform: translateY(30px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

.stat-card {
  animation: subtleReveal 0.6s ease forwards;
  opacity: 0;
}

/***  new animation effect  ***/
.animated-banner {
  /* width: 100%; */
  height: 100%;
  /* display: flex;
  align-items: center;
  justify-content: center;
  background-color: #1a1a1a; 
  color: white;
  font-family: sans-serif;
  font-size: 2rem;
  font-weight: bold; */
  position: relative;
  overflow: hidden;
}

/* The Animated Highlight Layer */
.animated-banner::after {
  content: "";
  position: absolute;
  top: 0;
  left: -150%; /* Start off-screen */
  width: 10%;
  height: 100%;
  
  /* This creates the slanted "beam" of light */
  /* background: linear-gradient(
    to right, 
    rgba(255, 255, 255, 0) 0%, 
    rgba(255, 255, 255, 0.3) 50%, 
    rgba(255, 255, 255, 0) 100%
  ); */
  transform: skewX(-25deg);
  
  /* Link to the animation below */
  animation: move-highlight 5s infinite ease-in-out;
}
.sticky-header .nav-outer .main-menu{display: flex; align-items: center;}
.sticky-header .nav-outer .main-menu .btn-style-one{padding: 15px 35px !important;}

.feature-service-card-items .icon{animation: float-and-sway 6s ease-in-out infinite;}
.feature-growth-box-items .icon{animation: float-and-sway 6s ease-in-out infinite;}
.icon-bubble{animation: float-and-sway 6s ease-in-out infinite;}
.choose-us-box-style-2 .icon{animation: float-and-sway 6s ease-in-out infinite;}
.service-title .icon{animation: float-and-sway 6s ease-in-out infinite;}
@keyframes float-and-sway {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  33% {
    transform: translateY(-15px) rotate(3deg); /* Moves up, sways right */
  }
  66% {
    transform: translateY(-8px) rotate(-3deg); /* Moves slightly down, sways left */
  }
}

/* .feature-growth-box-items .icon{animation: morph 6s ease-in-out infinite; transition: all 0.4s ease;} */
@keyframes morph {
  0%, 100% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
  50% {
    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
  }
}

.why-choose-section-2 .circle-shape{animation: floatConstant 3s ease-in-out infinite;}
.service-card-items-2 .service-icon{animation: floatConstant 3s ease-in-out infinite;}
@keyframes floatConstant {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px); /* Moves up */
  }
}
.how-it-work-section .circle-shape{animation: floatConstant1 10s ease-in-out infinite;}
@keyframes floatConstant1 {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-150px); /* Moves up */
  } 
}
.pricing-card-item-2 .pricing-left-ber .pricing-icon img{animation: constantBounce 8s ease-in-out infinite;}
@keyframes constantBounce {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-25px) rotate(5deg); /* Hop up, tilt right */
  }
  50% {
    transform: translateY(0) rotate(0deg); /* Back down */
  }
  75% {
    transform: translateY(-15px) rotate(-5deg); /* Small hop up, tilt left */
  }
}


/* Define the movement */
@keyframes move-highlight {
  0% {
    left: -150%;
  }
  100% {
    left: 150%;
  }
}
.about-content-3 .about-block .inner-box .icon{max-width: 100px; }
.about-content-3 .about-block .inner-box .icon img{}
.about-content-3 .about-block .inner-box .icon{animation: jelly-loop 6s ease-in-out infinite;}
@keyframes jelly-loop {
  0%, 100% { transform: scale(1, 1); }
  25% { transform: scale(1.2, 0.8); } /* Squish flat */
  50% { transform: scale(0.8, 1.2); } /* Stretch tall */
  75% { transform: scale(1.1, 0.9); } /* Slight squish */
}
.how-it-work-items-style-3{padding-top:0;}
.how-it-work-items-style-3 .number{animation: floatNum 3s ease-in-out infinite;}
.about-section-three .content-colmun .content-box .feature-box .shape-image{animation: floatNum 3s ease-in-out infinite;}
/* .service-card-items-2 .service-icon .number{animation: floatNum 3s ease-in-out infinite;} */
@keyframes floatNum {
  0%, 100% {
    transform: translateY(0) scale(1);
    text-shadow: 0 0 20px rgba(0, 123, 255, 0.5);
  }
  50% {
    transform: translateY(-15px) scale(1.05);
    text-shadow: 0 0 40px rgba(0, 123, 255, 0.8);
  }
}
.wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background: #4facfe;
  opacity: 0.5;
  border-radius: 40%;
  animation: wave-flow 5s linear infinite;
  transform: translateY(40%); /* Adjust this to change "fill" level */
}

@keyframes wave-flow {
  from { transform: translateY(40%) rotate(0deg); }
  to { transform: translateY(40%) rotate(360deg); }
} 

.hero-image{animation: gentleFloat 6s ease-in-out infinite;}
@keyframes gentleFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-15px) scale(1.02); /* Slight lift and zoom */
  }
}
.hero-content img{opacity: 0;
  transform: translateY(50px);
  animation: slideInUp 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;}
  @keyframes slideInUp {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

.image-box-style-3 .quate svg{ animation: floatNum 3s ease-in-out infinite;}

/* .wow {
  visibility: visible !important;
  animation-name: none !important;
} */

/*** ***/
/* main section with premium navy & gold accents */
.hyper-journey {
  padding: 5rem 2rem 6rem;
  position: relative;
  isolation: isolate;
}

/* elegant background with gold shimmer */
.hyper-journey::before {
  content: "";
  position: absolute;
  top: -20%;
  left: -10%;
  width: 70%;
  height: 70%;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.06) 0%, rgba(0, 33, 71, 0) 70%);
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
}

.hyper-journey::after {
  content: "";
  position: absolute;
  bottom: -10%;
  right: -5%;
  width: 60%;
  height: 60%;
  background: radial-gradient(circle, rgba(0, 33, 71, 0.04) 0%, rgba(0, 0, 0, 0) 70%);
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
}

/* header premium - navy & gold theme */
.prestige-header {
  text-align: center;
  margin-bottom: 4.5rem;
  position: relative;
}
.super-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(0, 33, 71, 0.08);
  backdrop-filter: blur(8px);
  padding: 0.45rem 1.5rem;
  border-radius: 80px;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  color: #002147;
  border: 1px solid rgba(212, 175, 55, 0.4);
  margin-bottom: 1.5rem;
  transition: 0.2s;
}
.super-badge i {
  font-size: 0.9rem;
  color: #d4af37;
}
.golden-title {
  font-size: 4.2rem;
  font-weight: 700;
  background: linear-gradient(135deg, #002147, #1a3a6b, #d4af37);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
  text-shadow: 0 2px 5px rgba(0,0,0,0.02);
}
.elegant-sub {
  font-size: 1.15rem;
  color: #4a5b6e;
  max-width: 620px;
  margin: 0 auto;
  font-weight: 500;
}

/* FLEX ROW: always single row on full width (desktop) - NO ARROWS */
.magic-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 1.8rem;
  justify-content: center;
  align-items: stretch;
  margin: 0;
  padding: 0;
}

/* each step card container */
.step-orb {
  flex: 1;
  min-width: 0;
  transition: all 0.3s;
}

/* PREMIUM CARD - navy & gold theme, no arrows */
.attract-card {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border-radius: 1.8rem;
  padding: 2rem 1.5rem 1.9rem;
  box-shadow: 0 20px 35px -12px rgba(0, 33, 71, 0.12);
  transition: all 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  border: 1px solid rgba(212, 175, 55, 0.2);
}

/* subtle gold shine effect */
.attract-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.08), transparent);
  transition: left 0.7s ease;
  pointer-events: none;
}
.attract-card:hover::after {
  left: 100%;
}

.attract-card:hover {
  transform: translateY(-8px);
  background: #ffffff;
  box-shadow: 0 30px 45px -16px rgba(0, 33, 71, 0.2);
  border-color: rgba(212, 175, 55, 0.5);
}

/* custom gradient icon bubbles - navy & gold */
.icon-bubble {
  width: 80px;
  height: 80px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.8rem;
  transition: all 0.3s;
  background: linear-gradient(145deg, #002147, #0a2d4e);
  box-shadow: 0 12px 20px -10px rgba(0, 33, 71, 0.3);
  border: 1px solid rgba(212, 175, 55, 0.3);
}

.step1-bubble { background: linear-gradient(135deg, #002147, #103a60); }
.step2-bubble { background: linear-gradient(135deg, #002147, #0f3a5c); }
.step3-bubble { background: linear-gradient(135deg, #002147, #1a3f62); }
.step4-bubble { background: linear-gradient(135deg, #002147, #1a3a5a, #d4af37); box-shadow: 0 12px 20px -8px rgba(212, 175, 55, 0.25); }

.icon-bubble i {
  font-size: 2.4rem;
  color: #d4af37;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

/* step number as chic badge - gold accent */
.meta-step {
  position: absolute;
  top: 20px;
  right: 24px;
  background: rgba(212, 175, 55, 0.12);
  backdrop-filter: blur(4px);
  padding: 0.3rem 1rem;
  border-radius: 40px;
  font-size: 0.7rem;
  font-weight: 800;
  color: #d4af37;
  letter-spacing: 0.5px;
  font-family: monospace;
  border: 0.5px solid rgba(212, 175, 55, 0.3);
}
.step-title-xl {
  font-weight: 700;
  font-size: 1.8rem;
  margin-top: 0.2rem;
  margin-bottom: 0.9rem;
  color: #002147;
  letter-spacing: -0.3px;
  min-height: 70px;
}
.desc-glam {
  color: #4a627a;
  line-height: 1.5;
  font-weight: 450;
  font-size: 0.92rem;
  margin-bottom: 1.5rem;
  flex: 1;
}

/* email element - gold accent */
.glam-email {
  background: rgba(212, 175, 55, 0.08);
  padding: 0.6rem 1rem;
  border-radius: 60px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 0.8rem;
  color: #002147;
  font-family: monospace;
  border: 1px solid rgba(212, 175, 55, 0.3);
  transition: 0.2s;
  width: fit-content;
}
.glam-email i {
  color: #d4af37;
}
.badge-set {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 1rem;
}
.mini-pill {
  background: rgba(0, 33, 71, 0.04);
  border-radius: 100px;
  padding: 0.3rem 1rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: #002147;
  border: 1px solid rgba(212, 175, 55, 0.25);
}
.mini-pill i {
  margin-right: 5px;
  font-size: 0.65rem;
  color: #d4af37;
}


.ks-project-item:before{
  position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: radial-gradient(98.51% 327.21% at 41.63% 275.85%, rgba(0, 7, 31, 0) -7%, rgb(0 33 71) 137.98%, rgb(0 33 71) 99.99%);
    content: "";
    mix-blend-mode: normal;
    border-radius: 50px;
}

/* Responsive: large screens keep one row, no arrows */
@media (min-width: 1200px) {
  .magic-row {
    flex-wrap: nowrap;
  }
}
@media (max-width: 1199.98px) {
  .magic-row {
    flex-wrap: wrap;
    gap: 2rem;
  }
  .step-orb {
    flex: 1 1 280px;
    min-width: 260px;
  }
  .golden-title {
    font-size: 3rem;
  }
}

/* More Options Section - navy & gold elegance */
.more-options-zone {
  margin-top: 5rem;
  background: rgba(0, 33, 71, 0.03);
  border-radius: 2rem;
  padding: 2rem 1.8rem;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(212, 175, 55, 0.3);
}
.pill-option {
  background: white;
  border-radius: 80px;
  padding: 0.65rem 1.5rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: all 0.2s;
  box-shadow: 0 4px 10px rgba(0,0,0,0.02);
  border: 1px solid rgba(212, 175, 55, 0.4);
  color: #002147;
}
.pill-option i {
  color: #d4af37;
}
.pill-option:hover {
  transform: scale(1.02);
  background: #ffffff;
  border-color: #d4af37;
  box-shadow: 0 8px 18px -8px rgba(212, 175, 55, 0.25);
}
.btn-luxury {
  background: linear-gradient(105deg, #002147, #1a3a6b);
  border: none;
  padding: 0.9rem 2.2rem;
  border-radius: 60px;
  font-weight: 700;
  color: white;
  transition: 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  border: 1px solid rgba(212, 175, 55, 0.4);
}
.btn-luxury:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 22px -12px #d4af37;
  background: linear-gradient(105deg, #002147, #2a4a7a);
  color: #d4af37;
}
.btn-outline-luxury {
  background: transparent;
  border: 2px solid #002147;
  color: #002147;
  padding: 0.8rem 2rem;
  border-radius: 60px;
  font-weight: 700;
  transition: 0.2s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-outline-luxury:hover {
  background: #002147;
  color: #d4af37;
  border-color: #d4af37;
}
.footer-widget-items .social-icon{
  margin-top: 15px;
}
.footer-widget-items .social-icon a {
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  text-align: center;
  color: var(--theme-color-white);
  margin-right: 5px;
}
.footer-widget-items .social-icon a:hover{
  background-color: var(--theme-color7);
  color: var(--theme-color1);
}

/***  itin overview  ***/
.bg-emerald-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
}
.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.p-6 {
  padding: 1.5rem;
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.feature-box.cus-box {
  position: relative;
  padding: 42px 50px 40px;
  max-width: 560px;
  width: 100%;
  z-index: 1;
  background-color: var(--bg-theme-color2)

}
.feature-list li{display: flex; align-items: flex-start;}
.feature-list li img{
  width: 24px;
  margin-right: 10px;
  margin-top: 4px;
}
:root {
  
  --secondary-light: #f8f0da;
  --gray-light: #f9f9ff;
}

/* custom card & badge styles */
.itin-container {
  max-width: 1300px;
  width: 100%;
  margin: 0 auto;
}

/* section header styling with gold accent */
.section-badge {
  display: inline-flex;
  align-items: center;
  background: var(--secondary-light);
  color: var(--primary);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  padding: 0.4rem 1rem;
  border-radius: 40px;
  border-left: 4px solid var(--theme-color7);
  text-transform: uppercase;
}

.section-title {
  font-size: 2.7rem;
  font-weight: 800;
  color: var(--theme-color1);
  letter-spacing: -0.02em;
  position: relative;
  display: inline-block;
}

.title-gold {
  color: var(--theme-color7);
}

/* rule cards */
.rule-card {
  background: white;
  border-radius: 1.5rem;
  padding: 1.8rem 1.5rem;
  height: 100%;
  transition: transform 0.25s ease, box-shadow 0.3s ease;
  border: 1px solid rgba(0, 33, 71, 0.08);
  box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
}

.rule-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 36px -14px rgba(0, 33, 71, 0.12);
  border-color: rgba(212, 175, 55, 0.3);
}

.rule-icon {
  background: rgba(212, 175, 55, 0.12);
  width: 54px;
  height: 54px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.rule-icon i {
  font-size: 1.9rem;
  color: var(--theme-color7);
}

.rule-title {
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--theme-color1);
}

.rule-text {
  color: #334155;
  line-height: 1.8;
  font-weight: 500;
  font-size: 1rem;
}

.rule-highlight {
  color: var(--theme-color7);
  font-weight: 700;
}

/* Steps vertical / modern timeline style */
.process-steps {
  background: white;
  border-radius: 2rem;
  padding: 2rem 2rem 1.8rem;
  box-shadow: 0 20px 32px -18px rgba(0, 33, 71, 0.12);
  border: 1px solid rgba(0, 33, 71, 0.05);
  transition: all 0.2s;
}

.step-item {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.step-item:last-child{
  margin-bottom: 0;
}


.step-number {
  flex-shrink: 0;
  width: 58px;
  height: 58px;
  background: var(--theme-color1);
  color: white;
  font-weight: 800;
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
  box-shadow: 0 12px 18px -10px rgba(0, 33, 71, 0.2);
  transition: all 0.2s;
  font-feature-settings: "tnum";
}

.step-content {
  flex: 1;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed #e2e8f0;
}

.step-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--theme-color1);
  letter-spacing: -0.2px;
  margin-bottom: 0.4rem;
}

.step-desc {
  color: #475569;
  font-weight: 500;
  font-size: 0.95rem;
}

.step-item:last-child .step-content {
  border-bottom: none;
}

/* gold accent divider */
.gold-divider {
  height: 4px;
  width: 70px;
  background: var(--theme-color7);
  border-radius: 4px;
  margin: 0.5rem 0 1.5rem 0;
}

/* badge process */
.process-badge {
  background: var(--theme-color1);
  color: white;
  font-weight: 600;
  border-radius: 40px;
  padding: 0.3rem 1rem;
  display: inline-block;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
}

.btn-outline-custom {
  border: 2px solid var(--theme-color1);
  background: transparent;
  color: var(--theme-color1);
  border-radius: 60px;
  font-weight: 600;
  padding: 0.6rem 1.5rem;
  transition: all 0.2s;
}

.btn-outline-custom:hover {
  background: var(--theme-color1);
  color: white;
  border-color: var(--theme-color1);
}

.btn-gold {
  background: var(--theme-color7);
  border: none;
  color: var(--primary);
  font-weight: 700;
  padding: 0.8rem 2rem;
  border-radius: 60px;
  transition: all 0.2s;
  box-shadow: 0 8px 16px -8px rgba(212, 175, 55, 0.3);
}

.btn-gold:hover {
  background: #c5a42b;
  transform: translateY(-2px);
  color: #001a3a;
  box-shadow: 0 14px 22px -10px rgba(212, 175, 55, 0.4);
}

/***  document required  ***/
.auto-container.cus-width-doc{
  max-width: 90%;
}
.luxe-section {
  position: relative;
  background: #002147;  /* primary color */
  padding: 100px 24px;
  isolation: isolate;
  overflow: hidden;
}

/* animated orbs with secondary gold glow */
.gold-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.28;
  pointer-events: none;
  z-index: 0;
  animation: floatPulse 12s infinite alternate ease-in-out;
}

.orb-1 {
  width: 500px;
  height: 500px;
  background: #d4af37;  /* secondary gold */
  top: -180px;
  left: -150px;
}

.orb-2 {
  width: 480px;
  height: 480px;
  background: #d4af37;
  bottom: -150px;
  right: -150px;
  animation-delay: -3s;
}

.orb-3 {
  width: 350px;
  height: 350px;
  background: #b28b2c;
  top: 40%;
  left: 60%;
  filter: blur(130px);
  opacity: 0.2;
}

@keyframes floatPulse {
  0% { transform: translate(0, 0) scale(1); opacity: 0.2; }
  100% { transform: translate(30px, 30px) scale(1.2); opacity: 0.35; }
}

/* container */
.container-noble {
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
  z-index: 5;
}

/* hero with gold accents */
.hero-royal {
  text-align: center;
  margin-bottom: 75px;
  animation: riseUp 0.9s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

.gold-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(212, 175, 55, 0.12);
  backdrop-filter: blur(8px);
  padding: 10px 28px;
  border-radius: 80px;
  border: 1px solid rgba(212, 175, 55, 0.35);
  margin-bottom: 28px;
}

.gold-badge span {
  color: #d4af37;
  font-weight: 600;
  letter-spacing: 1px;
  font-size: 0.8rem;
  text-transform: uppercase;
}

.gold-badge i {
  color: #d4af37;
  font-size: 14px;
}

.hero-royal h1 {
  font-size: 4.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, #ffffff 20%, #f5e2b0 55%, #d4af37 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}

.hero-royal h1 span {
  background: linear-gradient(135deg, #d4af37, #ffdf9c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-desc {
  font-size: 1.2rem;
  color: rgba(220, 235, 255, 0.8);
  max-width: 700px;
  margin: 0 auto;
  font-weight: 400;
  line-height: 1.6;
}

/* card grid */
.grid-prestige {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 38px;
}

/* glass card with primary background and gold borders */
.card-heritage {
  background: rgba(0, 33, 71, 0.75);
  backdrop-filter: blur(14px);
  border-radius: 48px;
  border: 1px solid rgba(212, 175, 55, 0.25);
  padding: 42px 38px;
  transition: all 0.45s cubic-bezier(0.2, 0.95, 0.4, 1.1);
  box-shadow: 0 30px 45px -20px rgba(0, 0, 0, 0.5);
  animation: riseUp 0.9s backwards;
}

.card-heritage:nth-child(1) { animation-delay: 0.1s; }
.card-heritage:nth-child(2) { animation-delay: 0.2s; }

.card-heritage:hover {
  transform: translateY(-12px);
  border-color: rgba(212, 175, 55, 0.65);
  background: rgba(0, 33, 71, 0.88);
  box-shadow: 0 40px 70px -20px rgba(212, 175, 55, 0.2);
}

/* card headers */
.card-header-icon {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 32px;
}

.icon-gold-ring {
  width: 78px;
  height: 78px;
  background: rgba(212, 175, 55, 0.12);
  border-radius: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: #d4af37;
  border: 1px solid rgba(212, 175, 55, 0.4);
  transition: 0.3s;
  animation:pulse 3s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(212,175,55,0.4);}
  70%{box-shadow:0 0 0 18px rgba(212,175,55,0);}
  100%{box-shadow:0 0 0 0 rgba(212,175,55,0);}
}

.card-heritage:hover .icon-gold-ring {
  transform: scale(1.02);
  background: rgba(212, 175, 55, 0.2);
}

.card-header-icon h2 {
  font-size: 2rem;
  font-weight: 700;
  color: white;
  letter-spacing: -0.3px;
}

.subtle-gold-line {
  width: 70px;
  height: 3px;
  background: #d4af37;
  margin: 20px 0 25px 0;
  border-radius: 3px;
}

/* requirement blocks with secondary color accents */
.requirement-block {
  background: rgba(0, 20, 45, 0.6);
  border-radius: 28px;
  padding: 24px;
  margin-bottom: 28px;
  border-left: 4px solid #d4af37;
  transition: 0.25s;
}

.requirement-block:hover {
  background: rgba(0, 25, 55, 0.8);
  transform: translateX(6px);
}

.req-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.req-title i {
  color: #d4af37;
  font-size: 1.3rem;
}

.req-title h4 {
  color: #d4af37;
  font-weight: 700;
  font-size: 1.25rem;
  margin: 0 0 0 15px;
}

.badge-gold-light {
  background: rgba(212, 175, 55, 0.18);
  border-radius: 60px;
  padding: 4px 14px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #e9bc5f;
  letter-spacing: 0.3px;
}

.req-description {
  color: rgba(230, 242, 255, 0.85);
  line-height: 1.7;
  font-size: 0.95rem;
}
.req-description strong{color: var(--theme-color7);}

/* document pills with secondary color */
.doc-gold-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.doc-pill {
  background: rgba(255, 255, 245, 0.05);
  border: 1px solid rgba(212, 175, 55, 0.25);
  padding: 8px 22px;
  border-radius: 60px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #eef4ff;
  transition: 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.doc-pill i {
  color: #d4af37;
  font-size: 0.8rem;
}

.doc-pill:hover {
  background: rgba(212, 175, 55, 0.12);
  transform: translateY(-3px);
  border-color: #d4af37;
}

.grid-double {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.full-span {
  grid-column: span 2;
}

/* business list custom */
.business-list-styled {
  list-style: none;
  margin: 10px 0 0;
}
.business-list-styled li {
  margin-bottom: 14px;
  display: flex;
  gap: 12px;
  align-items: baseline;
  color: #dcebff;
}
.business-list-styled li i {
  color: #d4af37;
  width: 22px;
  font-size: 0.85rem;
}

.info-gold-note {
  margin-top: 24px;
  background: rgba(212, 175, 55, 0.08);
  padding: 18px 22px;
  border-radius: 24px;
  border-left: 4px solid #d4af37;
  font-size: 0.85rem;
  color: #cde2ff;
}


hr {
  border-color: rgba(212, 175, 55, 0.2);
  margin: 20px 0;
}

.why-choose-section-2 .sec-title h2{
  color:var(--theme-color-white);
}

.why-choose-us-content-1 .sec-title h2{font-size: 44px;}
.about-section-three{
  /* padding-bottom: 15px; */
}
.about-section-three .image-colmun .image-box .about-image{
  max-width: 500px;
    border-radius: 12px;
    border: 10px solid var(--theme-color-white);
    -webkit-box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.1019607843);
    box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.1019607843);
}
.about-section-three .image-colmun .image-box .about-image:hover{
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}
.feature-service-card-items .icon img{filter: sepia(1);}
.how-it-work-items-style-3 h3 img{max-width: 100px; filter: grayscale(1);}
.feature-growth-box-items .icon img{width:45px; filter: sepia(1);}
.feature-service-card-items .icon{border: 3px solid var(--theme-color7); background: #fff;}
.feature-growth-box-items .icon{border:3px solid var(--theme-color7); background: #fff;}
.how-it-work-items-style-3 p{min-height: 150px;}
.exp-ren ul li{display: flex; align-items: center; padding: 10px 0;}
.exp-ren ul li .dot{width: 20px; height: 20px; margin-right: 15px;}
.itin-need-sec{background: #f1f1f1;}
.itin-need-sec .feature-growth-box-items::before{background: #fff;}
.document-required-cus .cus-bg{display: none;}
.fees-box {
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1.5px solid #d2d2d2;
    border-radius: 20px;
    min-height: 360px;
}
.fees-box-header {
    background: var(--theme-color1);
    padding: 24px 28px;
    color: #fff;
}
.fees-box-header h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    color: #fff;
}
.fees-box-body {
    padding: 24px 28px;
}
.fee-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid #d2d2d2;
}
.fee-row .label {
    font-size: 14px;
    color: var(--theme-color1);
    font-weight: 500;
}
.fee-row .val {
    font-size: 14px;
    font-weight: 700;
    color: var(--theme-color7);
}
.renew-process img{width: 25px; margin-right: 10px;}
.renew-process .fee-row{justify-content: start; align-items: center;}

/* animations */
@keyframes riseUp {
  from {
      opacity: 0;
      transform: translateY(35px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

@media (max-width: 1024px) {
  .hero-royal h1 {
      font-size: 3.2rem;
  }
  .card-heritage {
      padding: 32px 28px;
  }
  .grid-prestige {
      gap: 28px;
  }
}

@media (max-width: 768px) {
  .luxe-section {
      padding: 70px 18px;
  }
  .grid-prestige {
      grid-template-columns: 1fr;
  }
  .hero-royal h1 {
      font-size: 2.2rem;
  }
  .card-header-icon h2 {
      font-size: 1.5rem;
  }
  .icon-gold-ring {
      width: 60px;
      height: 60px;
      font-size: 28px;
  }
  .grid-double {
      grid-template-columns: 1fr;
  }
  .full-span {
      grid-column: span 1;
  }
  .doc-pill {
      padding: 5px 16px;
      font-size: 0.75rem;
  }
}

/* gold custom text */
.gold-text {
  color: #d4af37;
  font-weight: 600;
}

/* responsive refinement */
@media (max-width: 768px) {
  .section-title {
    font-size: 2rem;
  }
  .rule-title {
    font-size: 1.35rem;
  }
  .step-number {
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
  }
  .step-title {
    font-size: 1.2rem;
  }
  .process-steps {
    padding: 1.5rem;
  }
}

/* card glow effect minor */
.process-steps, .rule-card {
  backdrop-filter: blur(0px);
}
.team-block-six .content-box .social-links{
  transform: inherit;
  opacity: 1;
  visibility:visible;
}
.team-block-six .content-box .social-links ul li a{
  background-color: var(--theme-color1);
  color: var(--theme-color-white);
}

.highlight-taxt{font-weight: 700; color: var(--theme-color1);}
.taxt1{font-weight: 700; color: var(--theme-color7); }
.small-text{font-size: 14px;}

/***  itin overview page  ***/
.subnav {
    background: var(--theme-color-white);
    /* border-bottom: 2px solid var(--border); */
    position: sticky;
    top: 60px;
    z-index: 11;
    overflow-x: auto;
    scrollbar-width: none;
    ;
}
.subnav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: max-content;
    margin-top: 10px;
    background: #f1f1f1
}
.subnav-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 18px;
    height: 50px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--theme-color1);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all .2s;
    white-space: nowrap;
    text-decoration: none;
}
.subnav-item.active {
    color: var(--theme-color7);
    border-bottom-color: var(--theme-color7);
}
.subnav-item .si{max-width: 30px;}
.subnav-item .si img{border: 1px solid var(--theme-color1); border-radius: 5px;}
.subnav-item.active .si img{border: 1px solid var(--theme-color7);}
.sec {
    /* margin-bottom: 56px; */
    scroll-margin-top: 118px;
}
.step-number span{animation: float-and-sway 6s ease-in-out infinite;}
/* WHAT IS ITIN */ 
.what-side { display: flex; flex-direction: column; gap: 12px; }
.what-pill {
  background: var(--theme-color-white); border: 1.5px solid var(--theme-color7);
  border-radius: 10px; padding: 16px 20px;
  display: flex; align-items: center; gap: 14px; transition: all .2s;
  background-color: #f7f7f7;
}
.what-pill:hover { border-color: var(--teal); transform: translateX(4px); }
.what-pill .pi { font-size: 22px; }
.what-pill .pi img{width: 45px; border: 1px solid var(--bg-theme-color1); border-radius: 10px;} 
.what-pill .pt { font-size: 13.5px; font-weight: 600; color: var(--theme-color1); }
.what-pill .ps { font-size: 12px; color: #212121; }

/* USES GRID */
.itin-uses{background: #f7f7f7;}
.uses-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.use-card { background: var(--theme-color-white); border: 1.5px solid var(--theme-color7); border-radius: 10px; padding: 22px 20px; transition: all .25s; }
.use-card:hover { border-color: var(--theme-color1); box-shadow: 0 4px 20px rgba(27,191,173,.1); transform: translateY(-2px); }
.use-icon { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 14px; }
.use-card h3 { font-size: 13.5px; font-weight: 700; color: var(--theme-color1); margin-bottom: 5px; }
.use-card p  { font-size: 12.5px; color: #212121; line-height: 1.55; }

/* WHY BANNER */
.why-banner {
  background: var(--theme-color1);
  border-radius: 10px; padding: 36px 40px; display: grid; gap: 20px;
  /* grid-template-columns: 1fr 1fr; */ align-items: center; margin-bottom: 24px;
}
.why-banner h3 { font-size: 24px; font-weight: 700; color: var(--theme-color-white); margin-bottom: 10px; }
.why-banner p { font-size: 14px; color: var(--theme-color-white); line-height: 1.7; }
.why-list { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.why-list li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--theme-color-white); font-weight: 500; }
.why-list .wck { width: 20px; height: 20px; background: var(--theme-color7); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--teal); font-size: 10px; flex-shrink: 0; }

/* WHO NEEDS */
.who-grid { display: grid; gap: 18px; }
.who-item { display: flex; align-items: center; gap: 14px; background: #f1f1f1; border: 1.5px solid #d2d2d2; border-radius: 10px; padding: 10px 20px; transition: all .2s; }
.who-item:hover { border-color: var(--theme-color1); }
.who-item .wnum { width: 28px; height: 28px; background: var(--theme-color7); border-radius: 7px; display: flex; align-items: center; justify-content: center; color: var(--theme-color1); font-size: 11px; font-weight: 700; flex-shrink: 0; }
.who-item p { font-size: 13.5px; color: #212121; line-height: 1.5; }

/* KEY POINTS + MISTAKES */
.kp-card { background: var(--theme-color-white); border: 1.5px solid #d2d2d2; border-radius: 10px; overflow: hidden; width: 100%;}
.kp-head { padding: 18px 22px; display: flex; align-items: center; gap: 10px; }
.kp-head.green { background:var(--theme-color1);  }
.kp-head.red   { background: var(--theme-color7); }
.kp-head h3 { font-size: 14.5px; font-weight: 700; margin: 0;}
.kp-head.green h3 { color:var(--theme-color-white); }
.kp-head.red h3   { color: var(--theme-color1); }
.kp-body { padding: 18px 22px; }
.kp-list { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.kp-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 15px; line-height: 1.55; }
.kp-list li span { flex-shrink: 0; }
.fees-box-body.renew-process .fee-row{padding: 10px 0px; font-size: 14px;}

.renewal{position:relative; background: #f5f5f5;}
.renewal .pricing-globe-shape{
  top:70%; right:10%;
}

.fees-sec{
  /* background: #f5f5f5; */
}

/***  process  ***/
/* Main Process Section */
    #process {
      max-width: 1400px;
      margin: 0 auto;
      position: relative;
    }

    /* Section Heading with Glow */
    .section-heading {
      text-align: center;
      margin-bottom: 3.5rem;
    }

    .section-heading .badge {
      background: linear-gradient(135deg, #ff7e3a, #ffb347);
      padding: 0.4rem 1.2rem;
      border-radius: 60px;
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.5px;
      color: white;
      margin-bottom: 1rem;
      display: inline-block;
      box-shadow: 0 4px 12px rgba(255, 126, 58, 0.3);
    }

    .section-heading h2 {
      font-size: 2.8rem;
      font-weight: 700;
      background: linear-gradient(135deg, #1a2a3a, #e65c00);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      letter-spacing: -0.02em;
      margin-bottom: 0.5rem;
    }

    .section-heading p {
      color: #6c5b4b;
      font-weight: 500;
      font-size: 1rem;
    }

    /* Timeline Grid */
    .steps-timeline {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 1.5rem;
      position: relative;
    }

    /* Step Card Container */
    .step-card {
      flex: 1;
      min-width: 250px;
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(10px);
      border-radius: 2rem;
      padding: 1.8rem 1.5rem 2rem;
      position: relative;
      transition: all 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.2);
      border: 1px solid var(--theme-color1);
      box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.05);
      opacity: 0;
      transform: translateY(30px);
      animation: fadeUpCard 0.6s ease forwards;
    }

    .step-card:nth-child(1) { animation-delay: 0.1s; }
    .step-card:nth-child(2) { animation-delay: 0.25s; }
    .step-card:nth-child(3) { animation-delay: 0.4s; }
    .step-card:nth-child(4) { animation-delay: 0.55s; }

    @keyframes fadeUpCard {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .step-card:hover {
      transform: translateY(-10px);
      background: white;
      border-color: var(--theme-color7);
      box-shadow: 0 30px 45px -18px rgba(1, 35, 70, 0.25);
    }

    /* Step Number - Large Gradient Badge */
    .step-number {
      width: 65px;
      height: 65px;
      border-radius: 25px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1.5rem;
      box-shadow: 0 12px 20px -8px rgba(1, 35, 70, 0.4);
      transition: all 0.3s;
      position: relative;
      overflow: hidden;
    }

    .step-number::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
      transition: left 0.5s;
    }

    .step-card:hover .step-number::before {
      left: 100%;
    }

    .step-number span {
      font-size: 1.8rem;
      font-weight: 800;
      color: white;
      letter-spacing: -1px;
    }

    /* Step Title */
    .step-title {
      font-size: 1.6rem;
      font-weight: 700;
      color: #1e2f3a;
      margin-bottom: 0.5rem;
      letter-spacing: -0.3px;
    }

    .step-title i {
      font-size: 1.4rem;
      margin-right: 6px;
      color: #ff7e3a;
    }

    /* Underline Accent */
    .title-accent {
      width: 50px;
      height: 4px;
      background: var(--gradient1);
      border-radius: 4px;
      margin: 0.8rem 0 1rem 0;
      transition: width 0.4s ease;
    }

    .step-card:hover .title-accent {
      width: 85px;
    }

    /* Description List */
    .step-desc {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .step-desc li {
      font-size: 0.9rem;
      color: #212121;
      margin-bottom: 0.7rem;
      display: flex;
      align-items: center;
      gap: 8px;
      opacity: 0;
      transform: translateX(-8px);
      animation: fadeInText 0.4s ease forwards;
      text-align: justify;
    }

    .step-card:nth-child(1) .step-desc li:nth-child(1) { animation-delay: 0.2s; }
    .step-card:nth-child(1) .step-desc li:nth-child(2) { animation-delay: 0.3s; }
    .step-card:nth-child(2) .step-desc li:nth-child(1) { animation-delay: 0.35s; }
    .step-card:nth-child(2) .step-desc li:nth-child(2) { animation-delay: 0.45s; }
    .step-card:nth-child(3) .step-desc li:nth-child(1) { animation-delay: 0.5s; }
    .step-card:nth-child(3) .step-desc li:nth-child(2) { animation-delay: 0.6s; }
    .step-card:nth-child(4) .step-desc li:nth-child(1) { animation-delay: 0.65s; }
    .step-card:nth-child(4) .step-desc li:nth-child(2) { animation-delay: 0.75s; }

    @keyframes fadeInText {
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    .step-desc li i {
      font-size: 1rem;
      color: #ff7e3a;
      width: 22px;
      text-align: center;
    }

    /* Decorative Icon Circle inside card */
    .step-icon-bg {
      position: absolute;
      bottom: 1rem;
      right: 1rem;
      font-size: 3rem;
      opacity: 0.06;
      pointer-events: none;
      transition: all 0.3s;
    }

    .step-card:hover .step-icon-bg {
      opacity: 0.12;
      transform: scale(1.05);
    }

    /* ========== CONNECTOR LINES (DESKTOP) ========== */
    @media (min-width: 1100px) {
      .steps-timeline {
        position: relative;
      }
      
      /* Animated connector between cards */
      .steps-timeline::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 8%;
        right: 8%;
        height: 2px;
        background: var(--gradient1);
        transform: translateY(-50%);
        z-index: 0;
        border-radius: 4px;
        opacity: 0;
        animation: drawLine 1s ease forwards 0.9s;
      }
      
      @keyframes drawLine {
        to {
          opacity: 0.5;
        }
      }
      
      /* Arrow dots between steps */
      .step-card:not(:last-child)::after {
        content: '⟶';
        position: absolute;
        right: -30px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.8rem;
        color: var(--theme-color1);
        opacity: 0;
        animation: fadeArrow 0.5s ease forwards 1.1s;
        font-weight: 500;
        z-index: 2;
        text-shadow: 0 2px 6px rgba(1,35,70,0.3);
      }
      
      @keyframes fadeArrow {
        to {
          opacity: 0.8;
          right: -35px;
        }
      }
    }

    /* ========== RESPONSIVE STYLES (Mobile/Tablet) ========== */
    @media (max-width: 1099px) {
      .steps-timeline {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        padding-left: 1rem;
        border-left: 3px solid #ff7e3a;
        margin-left: 1rem;
      }
      
      .step-card {
        width: 100%;
        max-width: 480px;
        margin-left: 0.5rem;
      }
      
      .steps-timeline::before {
        display: none;
      }
      
      .step-card:not(:last-child)::after {
        display: none;
      }
      
      /* vertical connector dot */
      .step-card {
        position: relative;
      }
      
      .step-card::before {
        content: '';
        position: absolute;
        left: -1.8rem;
        top: 50%;
        transform: translateY(-50%);
        width: 12px;
        height: 12px;
        background: #ff7e3a;
        border-radius: 50%;
        box-shadow: 0 0 0 4px rgba(255,126,58,0.2);
        opacity: 0;
        animation: dotPop 0.4s ease forwards;
      }
      
      @keyframes dotPop {
        to { opacity: 1; }
      }
    }

    @media (max-width: 576px) {
      .section-heading h2 {
        font-size: 2rem;
      }
      
      .step-card {
        padding: 1.3rem;
      }
      
      .step-number {
        width: 52px;
        height: 52px;
      }
      
      .step-number span {
        font-size: 1.4rem;
      }
      
      .step-title {
        font-size: 1.3rem;
      }
      
      .step-desc li {
        font-size: 0.8rem;
      }
    }

    /* Pulse animation on step numbers */
    @keyframes softPulse {
      0% {
        box-shadow: 0 8px 18px -6px rgba(255,126,58,0.3);
      }
      100% {
        box-shadow: 0 12px 24px -6px rgba(255,126,58,0.6);
      }
    }
    
    .step-number {
      animation: softPulse 2.5s infinite alternate;
    }
    
    .step-card:hover .step-number {
      animation: none;
    }

    /* Floating background elements */
    .bg-floating {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: -1;
      overflow: hidden;
    }
    
    .bg-floating div {
      position: absolute;
      background: radial-gradient(circle, rgba(255,126,58,0.03), transparent);
      border-radius: 50%;
    }
    
    .bg-floating div:nth-child(1) { width: 300px; height: 300px; top: 10%; left: -100px; }
    .bg-floating div:nth-child(2) { width: 400px; height: 400px; bottom: 0; right: -150px; }
    .bg-floating div:nth-child(3) { width: 200px; height: 200px; top: 40%; right: 20%; }


/* responsive css */
@media (max-width: 800px) {
  .adas-vision-mission { padding: 3rem 1.5rem; }
  .section-header h1 { font-size: 2.5rem; }
  .card-title { font-size: 1.7rem; }
}

@media (max-width: 1920px) {
  .hero-3 .hero-image .text-circle::before{width: 165px; height: 165px;}
}
@media only screen and (max-width: 1700px) {
  .main-menu .navigation>li {
      margin-right: 30px;
  }
  .header-style-one.header-3 .main-box .main-menu{
    margin-right: 30px;
  }
  .main-header .header-lower .outer-box .ui-btn-outer{
    margin-right: 15px;
  }
}
@media (max-width: 1500px) {
  .hero-3 .hero-image .text-circle{right:0;}
  .service-card-items-2 .content{padding: 50px 15px 40px 30px;}
  .header-style-one.header-3 .main-box .main-menu{margin-right: 0;}
  .main-menu .navigation>li{margin-right: 20px;}
  .card-header-icon h2{font-size: 1.5rem;}
  .content-column .col-md-6{visibility: visible !important;}
  .adas-vision-mission{padding-left: 30px; padding-right: 30px;}
}
@media (max-width: 1399.98px) {
  .hero-section.hero-3 {
    padding-top: 120px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 0 !important;
    
  }
  .hero-3 {
    padding: 150px 30px 100px;
    background-image: none !important;
    background-color: var(--headings-color);
  }
  .header-style-one.header-3 {
    background-color: var(--theme-color-white);
  }
  .body-bg {
    margin-top: -10px;
  }
  .sub-page .body-bg{
    margin-top: 20px;
  }
  .main-menu .navigation>li{
    margin-right: 40px;
  }
  .hero-3 .hero-image .text-circle{
    right: 10px;
  }
  .hero-section .owl-theme .owl-nav button{width: 45px; height: 45px; line-height: 50px;}
  .hero-section .owl-theme .owl-nav button.owl-prev{margin-left: -20px;}
  .hero-section .owl-theme .owl-nav button.owl-next{margin-right: -20px;}
  
}
@media (max-width: 1199px) {
  .hero-section .owl-theme .owl-nav button.owl-prev{margin-left: -30px; width: 50px; height: 50px;}
  .hero-section .owl-theme .owl-nav button.owl-next{margin-right: -30px; height: 50px; width: 50px;}
  .hero-section .owl-theme .owl-nav button.owl-prev span{margin-left: -3px;}
  .hero-section .owl-theme .owl-nav button.owl-next span{margin-right: -3px;}
  .hero-3 .hero-content h1{font-size: 45px !important;}
  
  .sticky-header .nav-outer{display: flex; align-items: center;}
  .body-bg{margin-top: -10px;}
  .body-bg .sub-page{margin-top: 0px;}
  .header-style-one.header-3 .main-box .main-menu{margin-right: 0px;}
  .stats-grid{margin-top: 4rem;}
  .contact-details-block{min-height: auto;}
  .contact-details .content-column .inner-column.right-column{max-width: inherit;}
  .auto-container.cus-width-doc{max-width: 100%; padding: 0;}
  .icon-gold-ring{width:60px; height:60px;}
  .header-style-one.header-3 .btn-style-one{padding: 15px 20px !important; display: inline-block;}
  .mobile-nav-toggler{margin-left: 15px; }
  .logo-box .logo img{height: 50px;}
  .main-menu .navigation>li{margin-right: 30px;}
  .sticky-header .nav-outer .main-menu .btn-style-one{padding: 15px 20px !important; min-width: 160px; margin-left: 15px;}
  .sticky-header .mobile-nav-toggler{margin-left: 15px;}
  .feature-growth-box-items{padding: 34px 10px;}
}
@media (max-width: 1023px) {
  .sticky-header .nav-outer .main-menu .navbar-collapse{display: none;}
  .main-header .mobile-nav-toggler{margin-left: 0;}
  .sticky-header .mobile-nav-toggler{margin-left: 15px;}
}
@media (max-width: 991px) {
  .pricing-content-2 p{max-width: 100%;}
  .pricing-card-item-2{visibility: visible !important;}
  .choose-us-content-2 .row .col-xl-12{visibility: visible !important;}
  .service-wrapper .row .col-xl-6{visibility: visible !important;}
  .service-wrapper .row .col-xl-6 .content .theme-btn{visibility: visible !important;}
  .advantage-text{grid-template-columns: repeat(3, 1fr);}
  .image-column-3 .inner-column{margin: 0 auto;}
  .image-column-3 .inner-column .image1{margin: 0 auto;}
  .stats-grid{margin-top: 2rem;}
  .global-pr{padding: 80px 0;}
  .cus-bg{height: 80px;}
  .section-padding-bottom{padding-bottom: 80px;}
  .section-padding-top{padding-top: 80px;}
  .contact-details .content-column .inner-column.right-column{max-width: inherit;}
  .about-content-3{margin-top: 70px;}
  .feature-service-card-items{min-height: 280px;}
  .header-style-one.header-3 .btn-style-one{padding: 15px 20px !important; display: inline-block;}
  .about-image-items-2 .about-image{max-width: 320px; margin: 0 auto;}
  .fees-box{margin-bottom: 30px;}
  .what-grid, .process-layout, .rules-grid, .fees-layout, .renewal-card, .why-banner, .form-badges { grid-template-columns: 1fr; }
  .uses-grid { grid-template-columns: repeat(2, 1fr); }
  .who-grid  { grid-template-columns: 1fr; }
  .page-body, .page-hero { padding-left: 20px; padding-right: 20px; }
  .topnav, .subnav-inner { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 767px) {
  .advantage-text{grid-template-columns: repeat(2, 1fr);}
  h2{font-size: 30px;}
  h3{font-size: 24px;}
  .contact-details-block{min-height: auto;}
  .how-it-work-sec{flex-direction: column; align-items: center;}
  .how-it-work-sec .theme-btn{width: 60%;}
  .about-section-three .image-colmun .image-box .about-image{margin: 0 auto;}
  .uses-grid { grid-template-columns: 1fr; }
  .key-point{flex-direction: column;}
}
@media (max-width: 575px) {
  .service-card-items-2 .content h3{min-height: auto;}
  .service-card-items-2 .content p{min-height: auto;}
  .feature-service-card-items{min-height: auto;}
  .feature-growth-box-items .content{min-height: auto;}
  .how-it-work-sec .theme-btn{width: 80%;}
}
@media (max-width: 480px) {
  .advantage-text{grid-template-columns: repeat(1, 1fr);}
}

/* ── Inline field-level validation errors ── */
.is-invalid-field {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15) !important;
}

.field-inline-error {
    color: #dc3545;
    font-size: 0.8rem;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    animation: fadeInDown 0.2s ease;
}

.info-section:has(.nice-select.open) {
    padding-bottom: 130px; /* Adjust this value based on the height of your dropdown list */
    transition: padding 0.3s ease; /* Makes the expansion look smooth */
}