/* Importing Google fonts - Montserrat */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif;
}



.slider-container {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.slider-wrapper .slider-item {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
}

.slider-wrapper .slider-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  filter: grayscale(20%);
  background-image: url("images/slider-1.jpg");
  background-size: cover;
  background-position: center;
}

.slider-wrapper .slider-item:nth-child(2):before {
  background-image: url("images/slider-2.jpg");
}
.slider-wrapper .slider-item:nth-child(3):before {
  background-image: url("images/slider-3.png");
}
.slider-wrapper .slider-item:nth-child(4):before {
  filter: grayscale(25%) brightness(80%);
  background-image: url("images/slider-4.jpg");
}

.slider-wrapper .slider-item:nth-child(5):before {
  background-image: url("images/slider-5.png");
}

.slider-wrapper .slider-item .slide-content {
  position: relative;
  z-index: 10;
  color: #fff;
  width: 100%;
  opacity: 0;
  margin: 0 auto;
  max-width: 1400px;
  padding: 0 20px 10px;
}

.slider-item.swiper-slide-active .slide-content {
  animation: animate_opacity 0.8s 0.6s linear forwards;
}

@keyframes animate_opacity {
  100% {
    opacity: 1;
  }
}

.slider-wrapper .slider-item .slide-content > * {
  max-width: 35%;
}

.slider-item .slide-content .slide-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 5px;
  opacity: 0;
  text-transform: uppercase;
  transform: translateY(60%);
}

.slider-item .slide-content .slide-subtitle {
  font-size: 1rem;
  font-weight: normal;
  opacity: 0;
  transform: translateY(60%);
}

.slider-item.swiper-slide-active :where(.slide-title, .slide-subtitle) {
  animation: animate_text 0.6s 0.6s linear forwards;
}

@keyframes animate_text {
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.slider-item .slide-content .slide-description {
  margin-top: 25px;
  line-height: 25px;
  opacity: 0;
  transform: translateY(60%);
}

.slider-item.swiper-slide-active .slide-description {
  animation: animate_text 0.6s 1s linear forwards;
}

.slider-item .slide-content .slide-button {
  display: block;
  margin-top: 45px;
  color: #fff;
  width: 0;
  padding: 13px 0;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  border: 2px solid #fff;
  transition: 0.5s ease;
  opacity: 0;
  white-space: nowrap;
}

.slider-item.swiper-slide-active .slide-button {
  animation: animate_button 0.5s 1.3s linear forwards;
}

@keyframes animate_button {
  100% {
    width: 250px;
    opacity: 1;
  }
}

.slider-item .slide-content .slide-button span {
  opacity: 0;
}

.slider-item.swiper-slide-active .slide-button span {
  animation: animate_opacity 0.5s 1.5s linear forwards;
}

.slider-item .slide-content .slide-button:hover {
  color: #000;
  background: #fff;
}

.slider-container .slider-controls {
  position: absolute;
  bottom: 45px;
  z-index: 30;
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.slider-controls .slider-pagination {
  display: flex;
  list-style: none;
  margin: 0 auto;
  max-width: 1400px;
  padding: 0 20px;
  position: relative;
  justify-content: space-between;
}

.slider-pagination .slider-indicator {
  position: absolute;
  bottom: 0;
  border-bottom: 2px solid #fff;
  transition: 0.4s ease-in-out;
}

.slider-pagination .slider-tab {
  color: #DBDADA;
  padding: 20px 30px;
  cursor: pointer;
  text-align: center;
  font-size: 0.85rem;
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.slider-controls .slider-tab.current {
  color: #fff;
}

.slider-navigations button {
  position: absolute;
  top: 50%;
  color: #fff;
  z-index: 20;
  border: none;
  height: 40px;
  width: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #202022;
  transform: translateY(-50%);
  transition: 0.4s ease;
}

.slider-navigations button:hover {
  background: #323235;
}

.slider-navigations button.swiper-button-disabled {
  display: none;
}

.slider-navigations button#slide-prev {
  left: 20px;
}

.slider-navigations button#slide-next {
  right: 20px;
}

@media (max-width: 1536px) {
  .slider-wrapper .slider-item .slide-content,
  .slider-controls .slider-pagination {
    width: 85%;
  }
}

@media (max-width: 1024px) {
  .slider-wrapper .slider-item .slide-content,
  .slider-controls .slider-pagination {
    width: 100%;
  }

  .slider-wrapper .slider-item .slide-content > * {
    max-width: 66%;
  }

  .slider-container .slider-controls {
    bottom: 50px;
  }

  @keyframes animate_button {
    100% {
      width: 100%;
      opacity: 1;
    }
  }

  .slider-navigations button {
    top: unset;
    bottom: -15px;
    background: none;
  }

  .slider-navigations button:hover {
    background: none;
  }
}

@media (max-width: 768px) {
  .slider-wrapper .slider-item .slide-content > * {
    max-width: 100%;
  }
}



/* .text-section{
    min-height:100vh;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:0 10%;
} */

.text-section{

    min-height:100vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:120px 10%;

}

.text-section h2{
    font-size:18px;
    font-weight:400;
    margin-bottom:40px;
    letter-spacing:2px;
}

/* .text-section h1{
    font-size:4vw;
    line-height:1.35;
    font-weight:300;
} */

.text-section h1{

    font-size:clamp(2rem, 5vw, 4.5rem);

    line-height:1.4;

    font-weight:300;

    max-width:1100px;

}

/* .text-section h1 span{
    display:inline-block;
    color:rgba(255,255,255,.18);
    transition:color .2s linear;
    margin-right:6px;
} */

.text-section h1 span{

    display:inline;

    color:rgba(0,0,0,.18);

    transition:color .2s linear;

}


@media (max-width:768px){

.text-section{

    padding:80px 25px;

    min-height:auto;

}

.text-section h2{

    font-size:15px;

    margin-bottom:25px;

}

.text-section h1{

    font-size:clamp(1.8rem, 7vw, 2.8rem);

    line-height:1.5;

}

}

@media (max-width:480px){

.text-section{

    padding:70px 20px;

}

.text-section h1{

    font-size:1.8rem;

}

}




/* cards */


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

body{
    background:#f5f9ff;
    font-family:Arial, Helvetica, sans-serif;
}

.services{

    width:90%;
    max-width:1400px;

    margin:auto;
    padding:100px 0;

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:35px;

}

.service-card{

    position:relative;

    height:450px;

    border-radius:24px;

    overflow:hidden;

    cursor:pointer;

    box-shadow:0 15px 40px rgba(0,0,0,.12);

}

.service-card img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:1s ease;

}

.overlay{

    position:absolute;

    left:0;
    bottom:0;

    width:100%;

    height:90px;

    background:linear-gradient(
    to top,
    rgba(10,65,185,.98),
    rgba(10,65,185,.88)
    );

    color:white;

    padding:30px;

    transition:.6s ease;

}

.overlay h3{

    font-size:28px;

    margin-bottom:18px;

    transition:.4s;

}

.overlay p{

    opacity:0;

    transform:translateY(25px);

    transition:.5s;

    line-height:1.7;

    margin-bottom:25px;

}

.overlay a{

    color:white;

    text-decoration:none;

    font-weight:600;

    opacity:0;

    transform:translateY(20px);

    display:inline-block;

    transition:.5s;

}

.service-card:hover img{

    transform:scale(1.12);

}

.service-card:hover{

    transform:translateY(-12px);

    transition:.4s;

    box-shadow:0 30px 60px rgba(0,0,0,.18);

}

.service-card:hover .overlay{

    height:100%;

    padding-top:70px;

}

.service-card:hover h3{

    transform:translateY(-10px);

}

.service-card:hover p{

    opacity:1;

    transform:translateY(0);

    transition-delay:.15s;

}

.service-card:hover a{

    opacity:1;

    transform:translateY(0);

    transition-delay:.3s;

}






/* our journey */

.timeline-title{

    text-align:center;

    font-size:48px;

    color:#111;

    margin-bottom:100px;

}

.body{
    background:#ffffff;
    color:rgb(0, 0, 0);
    font-family:Poppins,sans-serif;
}

.timeline{

    width:1000px;
    max-width:90%;

    margin:150px auto;

    position:relative;

    padding:50px 0;

}

.line{

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    width:3px;

    height:66%;
    

    background:#20324f;
    

}




.progress{

    position:absolute;

    top:0;

    width:100%;

    height:0;

    background:#2f8cff;

}

.dot{

    position:absolute;

    bottom:-12px;

    left:50%;

    transform:translateX(-50%);

    width:22px;

    height:22px;

    border-radius:50%;

    background:#4ea3ff;

    box-shadow:
    0 0 10px #4ea3ff,
    0 0 25px #4ea3ff,
    0 0 45px #4ea3ff;

}

.milestone{

    width:40%;

    margin:120px 0;

    opacity:0;

    transform:translateY(80px);

}

.left{

    margin-right:auto;

    text-align:right;

}

.right{

    margin-left:auto;

}







/* Timeline Ending */

.timeline-end{

    margin-top:220px;

    text-align:center;

    position:relative;

     padding-top:60px; 

    /* padding-bottom:80px; */

}

/* Small line connecting from last milestone */

.timeline-end::before{

    content:"";

    position:absolute;

    top:-120px;

    left:50%;

    transform:translateX(-50%);

    width:3px;

    height:120px;

    /* background:#2f8cff; */

}

/* Logo */

.end-logo{

    position:relative;

    z-index:100;

    background:#fff;

    width:120px;

    height:120px;

    margin:auto;

    border-radius:50%;

    background:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    box-shadow:
     0 0 0 45px #eef3fb,   /* same as page background */
        0 0 25px rgba(47,140,255,.15);

}

.end-logo img{

    width:75px;

}

/* Heading */

.timeline-end h2{

    margin-top:40px;

    font-size:42px;

    color:#111;

}

/* Description */

.timeline-end p{

    width:700px;

    max-width:90%;

    margin:30px auto;

    color:#666;

    font-size:18px;

    line-height:1.8;

}

/* CTA */

.join-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-top:15px;

    padding:18px 42px;

    border-radius:50px;

    text-decoration:none;

    color:#fff;

    background:#2563eb;

    font-size:18px;

    font-weight:600;

    transition:.35s;

    box-shadow:
        0 15px 35px rgba(37,99,235,.25);

}

.join-btn:hover{

    transform:translateY(-5px);

    background:#1d4ed8;

    box-shadow:
        0 20px 45px rgba(37,99,235,.35);

}





/* css */



.footer{

    background:#0f172a;

    color:#fff;

    padding:80px 8% 30px;

}

.footer-top{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1.4fr;

    gap:60px;

}

.footer-logo{

    width:140px;

    margin-bottom:25px;

}

.footer-about{

    color:#b8c2d4;

    line-height:1.8;

    margin-bottom:30px;

}

.footer-column h3{

    margin-bottom:25px;

    color:#fff;

    font-size:22px;

}

.footer-column ul{

    list-style:none;

}

.footer-column ul li{

    margin-bottom:14px;

    color:#b8c2d4;

}

.footer-column ul li a{

    color:#b8c2d4;

    text-decoration:none;

    transition:.3s;

}

.footer-column ul li a:hover{

    color:#4ea3ff;

    padding-left:8px;

}

.contact-item{

    display:flex;

    gap:15px;

    margin-bottom:22px;

    color:#b8c2d4;

    line-height:1.7;

}

.contact-item i{

    color:#4ea3ff;

    font-size:22px;

    margin-top:3px;

}

.social-links{

    display:flex;

    gap:18px;

}

.social-links a{

    width:45px;

    height:45px;

    border-radius:50%;

    background:#18253f;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    transition:.35s;

}

.social-links a:hover{

    background:#2563eb;

    transform:translateY(-5px);

}

.footer-divider{

    height:1px;

    background:rgba(255,255,255,.08);

    margin:60px 0 30px;

}

.footer-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:20px;

}

.footer-bottom p{

    color:#8fa2c4;

}

.footer-bottom-links{

    display:flex;

    gap:25px;

}

.footer-bottom-links a{

    color:#8fa2c4;

    text-decoration:none;

    transition:.3s;

}

.footer-bottom-links a:hover{

    color:#4ea3ff;

}

/* Tablet */

@media(max-width:992px){

.footer-top{

grid-template-columns:repeat(2,1fr);

}

}

/* Mobile */

@media(max-width:768px){

.footer{

padding:60px 30px;

}

.footer-top{

grid-template-columns:1fr;

gap:45px;

}

.footer-bottom{

flex-direction:column;

text-align:center;

}

.footer-bottom-links{

flex-wrap:wrap;

justify-content:center;

}

}