@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

* {
  box-sizing: border-box;
}
body{
  font-family: 'Lato', sans-serif;
}


h1,h2,h3,h4,h5{
  font-family: 'Montserrat', sans-serif;;
}
p{
  font-family: 'Roboto', sans-serif; 
}
#hero, #services,#portfolio,#testimonials,#pricing{
  scroll-margin-top: 100px;
}

/* LOADING ANIMATION */
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: black;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  transition: opacity 0.5s ease; /* Smooth transition on hiding */
}

.preloader-text {
  text-shadow: 0 0 5px #0d6efd, 0 0 10px #0d6efd, 0 0 15px #0d6efd, 0 0 20px #0d6efd;
}

/* Prevent scroll while loading */
body.loading {
  overflow: hidden;
}

/* Hide content during loading */
body.loading header,
body.loading .hero-text,
body.loading .hero-video {
  visibility: hidden;
}

/* When assets are fully loaded */
body.loaded .preloader {
  opacity: 0;
  pointer-events: none; /* Prevent interaction after hiding */
}

/* Show the content after loading */
body.loaded header,
body.loaded .hero-text,
body.loaded .hero-video {
  visibility: visible;
 
}




/* menu*/
header{
  z-index: 999;
}
header ul {
  display: flex;
  gap: 1rem;
  align-items: center;
}
header ul li {
  list-style: none;
}
header ul a {
  color: #fff;
  font-size: 1.2rem;
  text-decoration: none;
  opacity: 0.5;
  transition: all.3s ease-in;
}
header ul a:hover {
  text-shadow: 0 0 5px #0d6efd, 0 0 10px #0d6efd, 0 0 15px #0d6efd,
    0 0 20px #0d6efd;
  opacity: 1;
}
.navbar-brand{
  font-family: 'Montserrat', sans-serif;
}
.book {
  opacity: 1;
}

#hero .img-fluid {
  max-height: 450px;
}
#hero {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 92%);
}
#hero h1{
  font-size: calc(1.375rem + 1.5vw) !important;

}
.glass {
  background: rgba(247, 240, 240, 0.2); /* Semi-transparent background */
  border-radius: 15px; /* Rounded corners */
  backdrop-filter: blur(10px); /* Blur effect for the glassmorphism look */
  padding: 20px; /* Add some padding */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: Subtle shadow for depth */
}
.hero-video {
  width: 100%;
  border-radius: 20px;
}
.main-icon i {
  color: gold;
}
.main-text::before {
  content: "";
  height: 100%;
  width: 2px;
  background-color: #c0c0c0;
  position: absolute;
  left: 0;
  top: 0;
}
.swip-hero img {
  position: relative;
}
.swip-hero img:hover {
  cursor: pointer;
}
.swip-hero .icons {
  z-index: 3;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: 0.3s;

  display: flex;
  align-items: center;
  justify-content: center;
}
.swip-hero .icons i {
  color: aquamarine;
  font-size: 1.1rem;
  background-color: black;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.swip-hero:hover .swip-hero .icons {
  transform: translate(50%, 50%);
  backdrop-filter: blur(20px);
}
/* FREE GUIDE */

.successMessage{
  position: fixed;
  max-height: 0;
  overflow: hidden;
  top: 15%;
  right: 0;
  z-index: 50;
  width: 350px;
 display: flex;
 align-items: center;
 justify-content: center;
  font-size: 24px;
  clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
  padding: 5px 3px;
  border-radius: 15px;
  transform: translateX(150px);
  

  transition: all 0.4s ease-in-out;
}
.successMessage.active{
  max-height: 200px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  transform: translateX(0);
  background: green;
}

.free-guide.display {

  display: none;
}
.free-guide input {
  width: 70%;
}
.free-guide input::placeholder {
  color: gray; 
  font-style: italic; /
}
/* MANUAL SLIDER */

.slider {
  height: var(--height);
  overflow: hidden;
  mask-image: linear-gradient(
    to right,
    transparent,
    rgba(0, 0, 0, 0.8) 10% 90%,
    transparent
  );
}

.slider .list {
  display: flex;
  width: 100%;
  min-width: calc(var(--width) * var(--quantity));
  position: relative;
}

.slider .list .item {
  width: var(--width);
  height: var(--height);
  position: absolute;
  left: 100%;
  top: 50%;
  animation: autoRun 20s linear infinite;
  animation-delay: calc((20s / var(--quantity)) * (var(--position) - 1));
}
.slider .list .item img {
  width: 100%;
  mix-blend-mode: color-burn;
}


/* ABOUT PAGE */
.main{
  background-color: #ccc;
  overflow: hidden;
}
#abt-hero{
  z-index: 10;
  height: 50vh;
  background: linear-gradient(90deg, rgba(3,2,19,0.3337710084033614) 0%, rgba(29,24,48,0.7287289915966386) 35%), url(https://images.pexels.com/photos/68631/pexels-photo-68631.jpeg?auto=compress&cs=tinysrgb&w=600);
  background-position: bottom;
  background-size: cover;
  background-repeat: no-repeat;
}
.img-left {
  transform: translateX(-300px); /* Start off-screen to the left */
  opacity: 0; 
  z-index: 20;
}

.text-right {
  transform: translateX(300px); 
  opacity: 0; 
}
.name {
  transform: translateY(100px); 
  opacity: 0; 
}
.intro{
  line-height: 2rem;
}

#about .about-img{
  width: 100%;

  overflow: hidden;
  border-radius: 2rem;
  
}
#about .about-img img{
  display: block;
  object-position: center;
  width: 100%;
aspect-ratio: 3/2;
  object-fit: cover;
 
}
#about .about-img img.jim,#about .about-img img.victor,#about .about-img img.ochife{
  
  object-position: top;
}

#about .about-img img.olamide{
  object-position: center 20%;
}
.abt-card{
 
}

@keyframes autoRun {
  from {
    left: 100%;
  }
  to {
    left: calc(var(--width) * -1);
  }
}

#services .card-img-top {
  object-fit: cover;
}
.card {
  overflow: hidden;
  transition: 0.3s;
}
#services .card img {
  transition: 1s;
}
#services .card:hover img {
  transform: scale(1.1);

  cursor: pointer;
}
#services .card .card-body {
  max-height: 0;
  overflow: hidden;
  clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);

  transition: 1s all;
}
#services .card:hover .card-body {
  max-height: 500px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);

}
#services .card p {
  opacity: 0;
  transition: 0.5s;
}
#services .card:hover p {
  opacity: 1;
}
.card-img {
  aspect-ratio: 672/494;
  
  object-fit: cover;
}
.svg{
 
  animation: a-svg 10s ease-in-out infinite ;

  
}
@keyframes a-svg {
  0%, 100%{
    transform: scale(0.7);
  }
  50%{
    transform: scale(0.85);

  }
 
}
/* PORTFOLIO */


.testimonial {
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
}
.swiperT {
  
  width: 100%;
  height: 330px;
  background-color: white;
  border: 2px solid gray;
  border-radius: 20px;
  padding: 2rem 1.5rem 0 1.5rem;
  position: relative;
}
.swiper-slideT {
  padding: 0 2.5rem;
}
.client {
  /*   display: grid;
  grid-template-columns: 85px 1fr;
  gap: 1rem; */
  align-items: center;
}
.profil-pic {
  width: 100%;
}
.client h4 {
  text-transform: capitalize;
  font-weight: 500;

  margin-bottom: 0.3rem;
 
}
.client h5 {
  text-transform: capitalize;
  font-size: 0.9rem;
  font-weight: 400;
}
.swiper-slide .text {
  display: block;
  margin: 0;
  padding: 1rem 0;
  line-height: 32px;
}

.swiper-pagination-bullet {
  background-color: rgb(47, 47, 223);
  width: 7px;
  height: 7px;

  cursor: pointer;
  opacity: 0.3;
}
.swiper-pagination-bullet-active {
  opacity: 1;
  width: 12px;
  height: 12px;
}
.testimonial-titles {
  padding-left: 5rem;
}
.testimonial-titles > * {
  color: #fff;
}
.background-section {
  width: 100vw;
  max-width: 75rem;
  height: calc(100% + 60px);
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(calc(-50% + 60px));
  border-bottom-left-radius: 60px;
  background: linear-gradient(55deg, black 20%, gray 20%);
  z-index: -1;
}
.background-section .person2 {
  height: 350px;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 12;
}
.social-icon {
  transition: 0.45s;
}
.social-icon:hover {
  transform: scale(1.2);
}


#pricing {
  background: linear-gradient(25deg, rgb(0, 0, 0), rgba(148, 145, 145, 0.74));
  background-size: 400% 400%;

  -webkit-animation: movingGradient 9s ease infinite;
  -moz-animation: movingGradient 9s ease infinite;
  animation: movingGradient 9s ease infinite;
}

@-webkit-keyframes movingGradient {
  0%{background-position:0% 51%}
  50%{background-position:100% 50%}
  100%{background-position:0% 51%}
}
@-moz-keyframes movingGradient {
  0%{background-position:0% 51%}
  50%{background-position:100% 50%}
  100%{background-position:0% 51%}
}
@keyframes movingGradient {
  0%{background-position:0% 51%}
  50%{background-position:100% 50%}
  100%{background-position:0% 51%}
}


/* PORTFOLIO SHOWCASE SECTION */

.showcase-pic{
  height: 70vh;
  background-image: url("../assets/port1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.showcase{
  margin-top: 8rem;
}

.showcase-video{
 
  max-height: 50vh;
    video{
      width: 100%;
      aspect-ratio: 16/9;
      background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.5));
    }
}

.mg-glass{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s ease-in-out;
  i{
    visibility: hidden;
  }
}

.ads:hover .mg-glass{
  background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2));
  height: 100%;
  cursor: pointer;
  i{
    font-size: 20px;
    color: white;
    visibility: visible;
  }
}
@media (max-width: 1350px) {
  #hero {
    
 
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  .background-section {
   display: none;
  }
}

@media (max-width: 1150px) {
  header ul {
  
    gap: 0.5rem;
    
}
@media (max-width:750px) {

  /* for about section */
  .name {
    transform: translateY(50px); 
    opacity: 0; 
  }
    
}
#hero h1{
  
  font-size: calc(1.3rem + .6vw) !important;
}
 
  .testimonial {
    grid-template-columns: 1fr;
    align-items: center;
  }
  .glass {
    background: rgba(19, 18, 18, 0.4); /* Semi-transparent background */
    border-radius: 15px; /* Rounded corners */
    backdrop-filter: blur(15px); /* Blur effect for the glassmorphism look */
    padding: 20px; /* Add some padding */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: Subtle shadow for depth */
  }
}

@media (max-width: 550px) {
  #hero {
    height: 100dvh;
   
  }
 
  .swiperT {
    width: 100%;
    height: 300px;
    background-color: white;
    border: none;

    padding: 2rem 1rem 0 1rem;
  }
  #services .card-img-top {
    height: 300px;
    
  }
}