@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-family: "Figtree";
}

html {
  scroll-behavior: smooth;
  overflow: scroll;
  overflow-x: hidden;
  font-size: 62.5%; /* 1rem = 10px */
}

.body{
  font-size: 1.6rem; /* 1rem = 10px */
}

::-webkit-scrollbar {
  /* width: 0;  Remove scrollbar space */
  /*background: transparent;   Optional: just make scrollbar invisible */
}


/* font-size */
h1{font-size: 50px;}
h2{font-size: 35px;}
h3{font-size: 24px;}
h4{font-size: 20px;}
span{font-size: 18px;}
b{font-size: 16px;}
p{font-size: 16px;}
a, i{font-size: 16px;}
/* font-size */

/* h1, h2, h3, h4, span, b, p, a{color: #1f3c73;} */

/* Navbar */
nav {
  position: fixed;           /* make it float */
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 6rem;
  background-color: rgba(255, 255, 255, 0.95); /* slightly transparent */
  box-shadow: 0 0.2rem 0.5rem rgba(0,0,0,0.1);
  z-index: 1000;
  backdrop-filter: blur(6px); /* optional: smooth glass effect */
}

.logo{
  width: 25rem;
}

.logo img{
  width: 100%;
}

.nav-links {
  display: flex;
  gap: 4rem;
  align-items: center;
}

.nav-links a {
  text-decoration: none;
  color: #1f3c73;
  transition: color 0.3s ease;
}

.nav-links a:hover {
  color: #343132;
}

.btn-contact {
  padding: 1.6rem 3rem;
  color: #1f3c73;
  border-radius: 3rem;
  border: 0.2rem solid #343132;
  /* font-weight: bold; */
}

.btn-contact:hover {
  background-image: linear-gradient(to right, #0c77eb, #15227e, #c40000);
}

a.btn-contact:hover {
  color: #fff;
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 0.6rem;
  cursor: pointer;
  z-index: 1100;
  transition: transform 0.3s ease;
}

.hamburger span {
  width: 2.5rem;
  height: 0.3rem;
  background-color: #333;
  transition: all 0.3s ease;
}

.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(.5rem, .5rem);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(.5rem, -.5rems);
}

/* Lock body when menu open */
body.locked {
  overflow: hidden;
}

/* Fullscreen Menu */
.fullscreen-menu {
  position: fixed;
  top: 0;
  right: -100%; /* start hidden on the right */
  width: 100%;
  height: 100vh;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  transition: right 0.4s ease; /* slide animation */
  z-index: 1050;
}

.fullscreen-menu.active {
  right: 0;
}

/* Menu Links Animation */
.fullscreen-menu a {
  font-size: 1.8rem;
  color: #333;
  text-decoration: none;
  opacity: 0;
  transform: translateY(2rem);
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.fullscreen-menu.active a {
  opacity: 1;
  transform: translateY(0);
}

.fullscreen-menu.active a:nth-child(2) {
  transition-delay: 0.1s;
}
.fullscreen-menu.active a:nth-child(3) {
  transition-delay: 0.2s;
}
.fullscreen-menu.active a:nth-child(4) {
  transition-delay: 0.3s;
}

.fullscreen-menu .btn-contact {
  font-size: 1.5rem;
  padding: 1.2rem 2.4rem;
}

/* Close button */
.close-btn {
  position: absolute;
  top: 0.5rem;
  right: 2rem;
  font-size: 6rem;
  color: #333;
  cursor: pointer;
  background: none;
  border: none;
}

/* Hamburger to X animation */
.hamburger.active span:nth-child(1) {
  /* transform: rotate(45deg) translate(0.5rem, 0.5rem); */
  opacity: 0;
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  /* transform: rotate(-45deg) translate(0.5em, -0.5rem); */
  opacity: 0;
}

.container{
  padding-top: 8rem;
}

.container-cover{
  display: flex;
  flex-direction: column;
}

.container-cover-text{
  background-image: linear-gradient(to right, #15227e , #0c77eb);
  padding: 6rem;
}

.container-cover-text{
  color: #fff;
}

.container-cover-img{
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;

}

.container-cover-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}


.section-two{
  padding: 6rem;
  display: flex;
}

.section-two-left{
  width: 60%;
  display: flex;
  align-items: center;
}

.section-two-left h1{
  color: #15227e;
}

.section-two-right{
  width: 40%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.section-two-right-card{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.section-two-right-card h4{
  color: #15227e;
}

.section-two-right-card img{
 width: 30%;
}

.section-three{
  padding: 6rem;
  background-image: linear-gradient(to right, #15227e , #0c77eb);
  text-align: center;
}

.section-three h2{
  color: #fff;
}

.section-four{
  display: flex;
  flex-direction: row;
  align-items: center;
  border-bottom: 0.5rem solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(to right, #0c77eb, #15227e, #c40000);
  height: 90vh;
}

.section-four-text{
  width: 50%;
  padding: 6rem;
}

.section-four-text h1{
  color: #15227e;
  padding-bottom: 2rem ;
}

.section-four-text h2{
  padding-bottom: 2rem ;
}

.section-four-text p{
  
}


.section-four-img{
  width: 50%;
  height: 100%;
}

.section-four-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.section-five{
  padding: 6rem 6rem 3rem 6rem;
}

.section-five-text{
  text-align: left;
  padding-bottom: 3rem;
  color: #15227e;
  text-transform: uppercase;
  max-width: 80%;
}

.section-five-img-row{
  display: flex;
  flex-wrap: wrap; /* ensures wrapping on smaller screens */
  gap: 6rem;
  justify-content: center;
  border-bottom: 0.5rem solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(to right, #0c77eb, #15227e, #c40000);
  padding-bottom: 6rem;
}

.section-five-img-row img{
  width: 100%;
  height: 45rem;
  object-fit: cover;
}

.section-five-row{
  padding-top: 6rem;
}

.section-five-row-each{
  padding-bottom: 3rem;
}

.section-five-row-each h4{
  text-transform: uppercase;
  padding-bottom: 1rem;
  color: #15227e;
}

.section-five-3-col-img{
  flex: 1 1 28%; /* flexible: min 30% width */
  max-width: 33%; /* never exceed 1/3 of row */
  box-sizing: border-box;
}

.section-six{
  position: relative;
  width: 100%;
  margin: auto;
}

.section-six-img{
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;

}

.section-six-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;

}

.section-six-text{
  position: absolute;
  bottom: 6rem;
  color: #fff;
  right: 6rem;
  left: 6rem;
  max-width: 80%;
}

.section-services{
  padding: 6rem;
}

.section-services-text{
  color: #15227e;
}

.section-services-card{
  display: flex;
  flex-direction: column;
}

.section-services-card-each{
  display: flex;
  flex-direction: row;
  gap: 6rem;
  padding: 6rem 0;
  border-bottom: 0.5rem solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(to right, #0c77eb, #15227e, #c40000);
  align-items: center;
}

.section-services-card-each-img{
  width: 60%;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.section-services-card-each-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.section-services-card-each-text{
  width: 40%;
}

.section-services-card-each-text h1{
  padding-bottom: 2rem;
  color: #15227e;
}

.section-contact{
  display: flex;
  flex-direction: row;
  align-items: stretch;
  height: auto;
}

.section-contact-text{
  width: 50%;
  padding: 6rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.section-contact-text-header{
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.section-contact-text-header h1{
  color: #1f3c73;
}

.section-contact-text-header p{
  
}

.section-contact-text-col-2{
  display: flex;
  flex-direction: row;
  gap: 2rem;
}

.section-contact-text-col-2-each{
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.section-contact-col-2-text{
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.section-contact-col-2-text h4{
  text-transform: uppercase;
  padding-bottom: 1rem;
  border-bottom: 0.3rem solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(to right, #0c77eb, #15227e, #c40000);
  color: #15227e;
}

.section-contact-col-2-button{
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.section-contact-col-2-button a{
  text-decoration: none;
  color: #15227e;
  display: flex;
  flex-direction: row;
  gap: 1rem;
  align-items: center;
}

.section-contact-col-2-button a:hover{
  color: #0c77eb;
}

.section-contact-img{
  width: 50%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.section-contact-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* FOOTER */
.footer {
  background: linear-gradient(to right, #142b82, #0d6efd); /* adjust to match */
  color: #fff;
  padding: 6rem;
}

.footer-container {
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.footer-right {
  display: flex;
  gap: 1rem;
}

.footer-right a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 4rem;
  height: 4rem;
  border: .2rem solid #fff;
  border-radius: .8rem;
  color: #fff;
  transition: all 0.3s ease;
  text-decoration: none;
}

.footer-right i{
  font-size: 2.5rem;
}

.footer-right a:hover {
  background: #fff;
  color: #0d6efd;
}


/* Responsive */
@media (max-width: 1280px) {
  .section-contact-text-col-2{
    flex-direction: column;
  }

  .section-contact-text-col-2-each{
    width: 100%;
  }

  .section-five-text {
    max-width: 90%;
  }
} 

@media (max-width: 1024px) {
  .section-four{
    height: auto;
  }

  .section-services-card-each {
    gap: 3;
  }
  
}

@media (max-width: 1024px) {
  .section-five-3-col-img {
    flex: 1 1 27%;
  }

  .section-five-img-row img {
    height: 38rem;
  }
}

@media (max-width: 912px) {
  /* font-size */
  h1{font-size: 35px;}
  h2{font-size: 30px;}
  h3{font-size: 24px;}
  h4{font-size: 20px;}
  span{font-size: 17px;}
  b{font-size: 15px;}
  p{font-size: 15px;}
  a, i{font-size: 15px;}
  /* font-size */

  .section-five-img-row img {
    height: 32rem;
  }
}

@media (max-width: 820px) {
  .section-five-3-col-img {
    flex: 1 1 26%;
  }

  .section-five-img-row img {
    height: 28rem;
  }
}

@media (max-width: 768px) {
  nav {
    padding: 1.5rem 3rem;
  }
  .nav-links {
    display: none;
  }
  .hamburger {
    display: flex;
  }

  .container-cover-img{
  height: 60vh;
  }

  .container-cover-text{
    padding: 3rem;
  }

  .section-two{
    padding: 3rem;
    flex-direction: column;
  }
  
  .section-two-left{
    width: 100%;
    padding: 2rem 0;
  }

  .section-two-right{
    width: 100%;
    padding: 2rem 0;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    
  }

  .section-two-right-card{
    width: 30%;
    text-align: center;
  }

  .section-two-right-card img{
    width: 80%;
  }

  .section-three{
    padding: 3rem;
  }

  .section-four{
    height: auto;
    flex-direction: column-reverse;
  }

  .section-four-text{
    width: 100%;
    padding: 3rem;
  }

  .section-four-text h1{
    padding-bottom: 2rem;
  }

  .section-four-img{
    width: 100%;
    height: 80vh;
  }

  .section-four-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .section-five{
    padding: 3rem 3rem 0 3rem;
  }

  .section-five-row{
    padding-top: 3rem;
  }

  .section-five-text {
    text-align: left;
    padding-bottom: 3rem;
  }

  .section-five-img-row{
    gap: 3rem;
    padding-bottom: 3rem;
  }

  .section-five-img-row img {
    height: 45rem;
  }  

  .section-five-3-col-img {
    flex: 1 1 100%; /* stack images vertically */
    max-width: 100%;
  }
  
  

  .section-six-text{
    bottom: 3rem;
    right: 3rem;
    left: 3rem;
    max-width: 90%;
  }

  

  .section-services{
    padding: 3rem;
  }

  .section-services-card-each{
    height: auto;
    flex-direction: column;
    gap: 1rem;
    padding: 3rem 0;
  }

  .section-services-card-each-img{
    width: 100%;
    height: 30rem;
  }

  .section-services-card-each-text{
    width: 100%;
  }

  .section-services-card-each-text h1{
    padding-bottom: 0;
  }

  .section-contact{
    flex-direction: column;
  }

  .section-contact-text {
    width: 100%;
    padding: 3rem; /* reduce padding for mobile */
  }

  .section-contact-text-col-2{
    flex-direction: row;
  }

  .section-contact-img {
    width: 100%;
    height: auto; /* image becomes responsive */
  }

  .section-contact-img img {
    width: 100%;
    height: auto;
    object-fit: cover;
  } 

  .footer-container {
    flex-direction: column;
    text-align: center;
    gap: 1.5rem;
  }
  .footer-left h2 {
    font-size: 1.2rem;
  }
  
}




@media (max-width: 540px) {
  .section-contact-text {
    width: 100%;
    padding: 3rem; /* reduce padding for mobile */
  }

  .section-contact-text-col-2{
    flex-direction: column;
  }

  .section-contact-img {
    width: 100%;
    height: auto; /* image becomes responsive */
  }
}

@media (max-width: 430px) {
    /* font-size */
  h1{font-size: 30px;}
  h2{font-size: 23px;}
  h3{font-size: 20px;}
  h4{font-size: 16px;}
  span{font-size: 15px;}
  b{font-size: 15px;}
  p{font-size: 15px;}
  a{font-size: 15px;}
  /* font-size */
  
  .section-six {
    
  }


}

body.locked {
  overflow: hidden;
}