*{
    padding:0;
    margin:0;
    box-sizing: border-box;
}
/* Section spacing */
.container{
    max-width:1552px;
    margin:0 auto;
    padding:0 16px;
    width: 100%;
}
.main-text-logo
 {
    max-width: 400px;
    margin: 0 auto;
    padding-bottom: 32px;
}
.main-video {
    max-width: 1100px;
    width: 100%;
}


/* Flex container */
#about{
    padding:100px 0;
}

#about .aboutinner {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap:56px;
}
#about .aboutinner .left-img {
  width: 50%;
  flex: 1;
  display: flex;
}
#about .aboutinner .left-img img {
  width: 100%;
  object-fit: cover;
  border-radius: 0.75rem;
}

#about .aboutinner .right-block {
  width: 50%;
  flex: 1;
}
#about .right-content {
  display: flex;
  flex-direction: column;
  
}

#about .subtitle {
  display: block;
  font-size: 1.25rem;
  font-weight: 600;
  color: #f15f22;
  margin-bottom: 0.625rem;
}

/* Heading */
.title h2 {
  color: #003660;
  font-size: clamp(2.25rem, 3.8vw + 0.8rem, 3rem);
    line-height: 1.1;
  font-family: serif;
  font-weight: 700;
  margin: 24px 0;
}

.para {
  font-size: clamp(1.125rem, 0.9688rem + 0.5vw, 1.25rem);
    line-height: 1.4;
  padding-right: 1rem;
}
.para p {
  margin-bottom: 1rem;
}

#about .list,.main-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
#about .list li,.main-list li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 1rem;
}
#about .list li::before, .main-list li:before {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 1.5rem;
  height: 1.5rem;
  background-image: url("/assets/images/tick.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}


.how-it-works1 {
  background-color: #f5f5f5; 
  padding:100px 0;
}

/* Inner wrapper */
.how-it-works1 .inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
}


/* Heading block */
.how-it-works1 .heading {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.how-it-works1 .title {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

 .title span {
  display: block;
  width: 150px;
  height: 4px;
  background-color:#f15f22;
}
.how-it-works1 .para {
  text-align: center;

}
/* Card Block Grid */
.how-it-works1 .card-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* Card content */
.how-it-works1 .card-content img {
  display: block;
  margin: 0 auto 12px;
   width:auto;
}
.how-it-works1 .card-content h3 {
     font-size: clamp(1.55rem, 0.625rem + 1.8vw, 1.75rem);
    line-height: 1.3;
  margin-bottom: 0.75rem;
  color:#003660;
}
.how-it-works1 .card-content span {
  font-size: 20px;
  line-height: 1.6;
  display: block;
}
.how-it-works1 .card-border-wrapper {
  position: relative;
  border-radius: 1rem;
  padding: 2px; 
  overflow: hidden; 
}
.how-it-works1 .card-border-wrapper::before {
  content: "";
  position: absolute;
  inset: 0; 
  border-radius: inherit;
  padding: 2px; 
  background: linear-gradient(2.09deg, #FFFCF5 1.78%, #6E8198 106.03%, #1A3961 197.53%);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0); 
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  z-index: 1;
}

.how-it-works1 .card-border-wrapper:hover::before {
  opacity: 1;
}

.how-it-works1 .card-content {
  position: relative;
  z-index: 2;
  background: #fff;
  border-radius: calc(1rem - 2px); 
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  height: 100%;
}


/* Auto tab change */
/* Section base */
.section-tab {
  padding: 2rem 0;
  background-color: #003660;
  color: #fff;
}

/* Tabs layout */
.section-tab .timeline-mid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
    padding:32px 0;
}
.section-tab .title h2{
    color:#ffffff;
}
@media (min-width: 768px) {
  .section-tab .timeline-mid { grid-template-columns: 1fr 1fr; gap: 2rem;   padding:48px 0;}
}
.section-tab .heading {
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    gap:16px;
    text-align: center;
}
.section-tab .menu1 {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.section-tab .menu-item {
  position: relative;
  display: flex;
  align-items: center;
  border: 1.5px solid #fff;
  padding: 1rem 2rem 1rem 3rem;
  border-radius: .75rem;
  cursor: pointer;
  transition: all .3s ease;
}
.section-tab .menu-item.active {
  background: #fff;
  color: #003660;
}

/* Indicator */
.section-tab .indicator {
  position: absolute;
  top: 50%;
  left: 18px;
  width: 6px;
  height: 50%;
  transform: translateY(-50%);
  border-radius: 1.5rem;
  overflow: hidden;
  background: #fff;
}
.section-tab span.divider {
    margin: 0 auto;
}
.section-tab .indicator.animate-load::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 0%;
  background-color: #f15f22;
  animation: lineFill 8s linear forwards;
}
@keyframes lineFill {
  from { height: 0%; }
  to   { height: 100%; }
}
.section-tab .menu-content p{
    font-size: 20px;
    padding: 20px 0;
}
/* Tab text content */
.section-tab .menu-content { display: none; }
.section-tab .menu-content.active { display: block; }

/* Mobile tab image */
.section-tab .content-tab-item { display: none; }
.section-tab .content-tab-item.active { display: block; }
.section-tab .content-tab-item img {
  width: 100%;
  border-radius: .75rem;
  object-fit: cover;
}

/* Right sticky images */
.section-tab .time-right .content-area {
  position: sticky;
  top: 90px;
  width: 100%;
}
.section-tab .content-item { display: none; }
.section-tab .content-item.active { display: block; }
.section-tab .content-item img {
  width: 100%;
  border-radius: .75rem;
  object-fit: cover;
}
.section-tab .menu-item.active .indicator {
    background: #003660;
    height:90%;
}
.section-tab .section-5 h2{
    color:#ffffff;
    text-align: center;
}
.section-tab h3.title {
        font-size: clamp(1.25rem, 0.625rem + 1.8vw, 1.75rem);
    line-height: 1.3;
}
.section-tab .content-tab-item.active .image{
    padding:20px 0;
}
.section-tab ul.main-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    font-size: 20px;
}
.section-tab ul.main-list li{
    margin-bottom:0;
}
.section-tab .bottom-text{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 16px;
}
.section-tab .bottom-text p{
     font-size: 20px;
}
.how-it-works1 .card-block {
    margin-top: 48px;
}

/*------CTA SEction-----  */
/* Button Block */
.btn-block a{
  display: flex;
  gap: 1rem;                  /* space between items */
  justify-content: flex-start; /* align left */
  align-items: center;
  flex-wrap: wrap;
  width: fit-content;         
}


.cta-main-sec{
padding:100px 0;
}
/* Secondary Button */
.cta-main-sec .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background-color: #f15f22;
  color: #ffffff;             
  border-radius: .5rem;
  padding: .75rem 1.5rem;
  font-weight: 600;
  font-size: 18px;
  text-decoration: none;
  transition: all .3s ease;
}
span.divider {
    margin: 0 auto;
}
.cta-main-sec .btn-secondary:hover {
  background-color: #003660;
  color: #fff;
}

.cta-main-sec .btn-secondary img {
  display: inline-block;
    width: 24px;
}
.cta-main-sec .heading {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 24px;
}

/* media query */
@media (min-width: 768px) {
  .how-it-works1 .card-block {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1280px) {
  .how-it-works1 .card-block {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

@media (max-width: 1280px) {
    #about .aboutinner {
    gap: 32px;
  }
}
@media (max-width: 1024px) {   
  #about, .how-it-works1,.cta-main-sec {
  padding:60px 0;
}
    #about .aboutinner {
    gap: 24px;
    flex-direction: column;
  }
  #about .aboutinner .right-block {
  width: 100%;
  flex: 1;
  }
}

@media (max-width: 768px) {
  #about,.how-it-works1, .cta-main-sec {
    padding: 40px 0;
  }
    #about .aboutinner .left-img {
  width: 100%;
}
.section-tab ul.main-list{
    display: grid;
    grid-template-columns: 100%;
}
.how-it-works1 .card-block {
    margin-top: 0;
}
}


