@import url("https://fonts.googleapis.com/css2?family=Audiowide&family=Poppins:wght@400;500;600&display=swap");

:root{
    --header-height : 3.5rem;

    /* ======== Colors =============*/
    --title-color : hsl(0, 30%, 95%);
    --text-color : hsl(0, 0%, 4%);
    --text-color-light : hsl(0 ,0% ,60%);
    /* ====================Font========================= */
--body-font: "Poppins", sans-serif;
--second-font: "Audiowide", sans-serif;
--biggest-font-size: 3rem;
--big-font-size : 1.5rem;
--h1-font-size : 1.5rem;
--h2-font-size : 1.25rem;
--normal-font-size: .938rem;
--small-font-size: .813rem;
/* ==================Font Weight====================== */
--font-regular: 400;
--font-medium: 500;
--font-semi-bold: 600;

/* ===================== z index ====================== */
--z-tooltip: 10;
--z-fixed: 100;
}
/* ===================Responsive =======================*/
@media screen and (min-width : 1150px) {
    :root{
       --biggest-font-size: 5.5rem;
       --big-font-size : 3rem;
       --h1-font-size : 2.25rem;
       --h2-font-size : 1.5rem;
       --normal-font-size: 1rem;
       --small-font-size: .875rem;
     }    
   }
/* =================BASE =========================== */
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html{
    scroll-behavior: smooth;
}

body,
input,
button {
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
}

body{
    background-color: var(--body-color);
    color: var(--text-color);
}

input,
button{
    border: none;
    outline: none;
}

h1,h2,h3,h4{
    color: var(--white-color);
}

ul {
    list-style: none;
  }
  
  a {
    text-decoration: none;
  }
  
  img {
    display: block;
    max-width: 100%;
    height: auto;
  }

  /* =============================Reusable classes==================== */
  .container {
    max-width: 1120px;
    margin-inline: 1.5rem;
  }
  
  .grid {
    display: grid;
    gap: 1.5rem;
  }
  
  .section__title{
    font-size: var(--big-font-size);
    font-family: var(--body-font);
    font-weight: initial;
    margin-bottom: 2rem;
    text-align: center;
  }
  
  .section__title span {
    display: block;
    background: var(--third-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }
  
  .main {
    overflow: hidden;
  }  
  /* ================== Header & NAv =================== */
  .header{
    position: absolute;
    width: 100%;
    background-color: transparent;
    top: 0;
    left: 0;
    z-index: var(--z-fixed);
}
.nav{
   
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    
}
.nav__logo{
    color: var(--text-color);
    font-family: var(--body-font);
    font-weight: var(--font-semi-bold);
    font-size: var(--h12font-size);
    align-items: center;
    display: flex;
    gap : 1rem;
    color: white;
}
.nav__logo img{
    width: 40px;
}
.nav__close,
.nav__toggle{
    display: flex;
    font-size: 1.25rem;
    color: var(--text-color);
    cursor: pointer;
    color: white;
}

/* Navigation for mobile devices */
@media screen and (max-width : 1090px) {
    .nav__menu{
        position: fixed;
        left: 0;
        top: -100%;
        background-color: hsla(0, 0, 0, .3);
        width: 100%;
        padding-block: 4rem;
        backdrop-filter: blur(24px);
        --webkit-backdrop-filter : blur(24px);
        transition: top .4s;
        
        
    }
}
.nav__list{
      text-align: center;
}
.nav__item{
    margin-bottom: 2.5rem;
}
.nav__link{
    position: relative;
    color: white;
    font-family: var(--body-font);
    font-weight: var(--font-medium);
}
.nav__link::after{
    content: '';
    position: absolute;
    background-color:white;
    bottom: 1.2rem;
    width: 0%;
    height: 3px;
    left: 0 ;
    bottom: -.5rem;
    transition: width .3s;
}
.nav__link.active::after, 
.nav__link:hover::after {
    width: 60%;
}
.nav__close{
   position: absolute;
   top: 1rem;
   right: 1.5rem;
}

/* Show menu */
.show-menu{
    top: 0;
}


/*=============== HOME ===============*/
.home{
    position: relative;
}
.home__bg{
    top: 0;
    left: 0;
    width: 100%;
    height: 467px;
    object-fit: cover;
    object-position: center;
    display: block;
}
.title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) !important;
  color: white; 
  font-size: 10px;
  text-align: center;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}
.title span {
  display: block;
  font-size: 18px; 
  font-weight: normal;
}
.home__content{
    position: relative;
    padding-block: 2rem;
    
}
.home__card-1{
    background-color: #efefef;
    width: 100%;
    margin-top: -4rem;
    padding: 1rem;
}
.home__card-2{
    
    width: 100%;
    margin-top: -4rem;
    padding: 1rem;
}
.card__image-1{
    display: grid;
    justify-content: center;
    margin: 3rem;
}
.card__image-2{
    display: grid;
    justify-content: center;
    margin: 3rem;
    
}
.card__img-1{
  width: 260px;
  border-radius: 30px;
  margin: 2rem auto;
}
.card__img-2{
  width: 260px;
  border-radius: 30px;
  margin: 2rem auto;
}
.card__image-1:hover .card__img-1,
.card__image-2:hover .card__img-2{
transform: scale(1.1) !important;
}

.card__data{
    text-align: center;
    color: var(--text-color);
    padding: 1rem 2rem;
}
.card__title h1{
 margin-bottom: 2rem;
 text-align: center;
 
}
.button{
    display: grid;
    justify-content: center;
    width: 35%;
}
.btn{
  display: grid;
  background-color: black;
  color: white;
  text-align: center;
  width: 30%;
  margin: 1rem 0rem;
  padding: .75rem ;
  border-radius: 8px;
  font-size: 1rem;
  box-shadow: 0 6px 3px black;
}
/* ================================== customer ==================================== */

.customer{
    position: relative;
    background-color:  #efefef;
  }
 
  .customer__container{
    position: relative;
    background-color:  #efefef;
    padding: 2rem 2rem 5rem;
  }
 .customer__container .section__title {
  font-size: 1.7rem;
  margin-top: 0rem;
  font-weight: 500;
}
  .section__title span{
    color: var(--text-color);
    font-family: var(--body-font);
   
  }
  .customer__swiper{
    padding-top: 3rem;
  }
  .customer__card{
    position: relative;
    border: 2px solid transparent;
    padding: 1.5rem 1rem 2rem ;
    text-align: center;
    border-radius: 20px;
    background-color: hsl(0deg 1.96% 4.29% / 75%);
    color: white;
    
  }
  .card__head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
  }
  .customer__left{
    display: flex;
    align-items: center; 
    gap: .55rem;
  }
  .customer__img{
    width: 40px;
    border-radius: 50px;
  }
  .customer__right{
    display: flex;
    align-items: center;
    gap: .55rem;
  }
  .customer__right p{
    font-size: var(--small-font-size);
  }
  .app__logo{
    width: 20px;
    border-radius: 5px;
  }
  .card__description{
    font-size: var(--small-font-size);
  }
  
  /* Swiper Classs */
  .swiper-pagination-bullets.swiper-pagination-horizontal{
    bottom: 2rem !important;
  }
  .swiper-pagination-bullet{
    width: 1rem!important;
    height: 1rem!important;
    opacity: 1!important;
    border: 2px solid black!important;
    background: transparent!important;
  }
  .swiper-pagination-bullet-active{
    /* border: 2px solid transparent !important; */
    background:  linear-gradient(hsl(30, 9%, 18%), hsl(23, 20%, 16%)), padding-box linear-gradient(135deg, hsl(30, 4%, 10%) 0%, hsl(30, 6%, 14%) 100%) border-box !important;
   
  position: relative;
  
  }
  .swiper-pagination-bullet-active::after{
    content: '';
    position: absolute;
    width: .5rem;
    height: .5rem;
    background: var(--third-gradient);
    border-radius: 50%;
    inset: 0;
    margin: auto;
  }
  /* ============= About ===================  */
  .bg__section{
    position: relative;
}
.about__bg{
    top: 0;
    left: 0;
    width: 100%;
    height: 467px;
    object-fit: cover;
    object-position: center;
    display: block;
}
/*  */
  .about__title{
    text-align: center;
    margin-top: 2rem;
  }
  .about__subtitle{
    font-size: 1.2rem;
    text-align: center;
    font-weight: 500;
  }
  .about__description{
    text-align: center;
    margin: auto 1rem 2rem;
    font-size: var(--normal-font-size);
  }
  .about__images{
  display: flex;
  flex-direction: column;
  }
  .about__img{
    width: 15rem;
    align-items: center;
    margin: 1rem auto;
    border-radius: 20px;
    
  }

 /* =========== Privacy policy ============ */
 .privacy__title{
  text-align: center;
  margin-top: 2rem;
 }
 .privacy__content{
  margin: 1rem 1rem;
 }
 .privacy__subtitle{
  font-size: 1.2rem;
  margin: 1rem 0rem;
  font-weight: 800;
 }
 .list{
  list-style-type : disc;
  margin-left: 2rem;
 }
 .privacy__content a{
  text-decoration: underline;
 }
 .sub__list{
  list-style: circle;
  margin-left: 4rem;
 }
 .privacy__description{
  margin: 1rem 0rem;
  font-size: .85rem;
 }
 .text{
      color: gray;
      margin-top: 5rem;
 }
/* ================ Contact ================== */

.contact__container{
    padding-bottom: 2rem;
    font-family: var(--body-font);
    justify-content: center;
  }
  .form textarea{
    font-family: var(--body-font);
  } 
  .section__title h1{
    font-size: 2.5rem;
    margin-top: 2rem;
  }
  .contact__title{
     font-weight: 500;
     text-align: center;
     font-size: 2.5rem;
  }
  .accordion {
    width: 100%;
    max-width: 600px;
    margin: 2rem auto;
   
    border-radius: 5px;
    overflow: hidden;
}

.accordion__item {
    border-bottom: 1px solid #ddd;
    color: #585353;
}

.accordion__question {
  padding: 15px 13px;
  font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.accordion__question:hover {
    background-color: #eee;
}

.accordion__answer {
    padding: 15px 13px;
    background-color: white;
    display: none;
}

.accordion__item.active .accordion__answer {
    display: block;
}

.accordion__item.active .accordion__question {
    background-color: #e2e2e2;
}

.arrow {
    width: 12px;
    height: 12px;
    border: solid #444;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    transition: transform 0.3s;
}

.accordion__item.active i {
    transform: rotate(-135deg);
}

  .form{
    max-width: 62%;
    margin: 25px auto;
}
.form .form-input{
   width: 100%;
   font-size: 19px;
   border: 2px solid gray;
   border-radius: 8px;
   margin: 14px 0;
   
   padding: 5px 13px;
}
  .form button{
    cursor: pointer;
    padding: 1rem;
    font-size: 1.5rem;
    background-color: black;
    color: white;
    width: 100%;
    transition: color .4s , background-color .4s;
    border-radius: 12px;
    border: 2px solid black;
  }
  button:hover{
    background-color: white;
    color: black;
    
  }

  /* ============ Footer ======================= */
.footer{
  overflow: hidden;
  background-color: black;
  color: white;
  }
  .footer__container{
   position: relative;
   row-gap: 2.5rem;
   padding-top: 3rem;
  }
  .footer__content{
    row-gap: 2.5rem;
  }
  .footer__links{
    display: flex;
    column-gap: 2rem;
    justify-content: center;
  }
  .footer__link{
    color: var(--white-color);
    font-weight: var(--font-semi-bold);
    transition: color  .4s;
  }
  .footer__link:hover{
    color: grey;
  }

  .footer__copy{
    display: flex;
    /* justify-content: space-between; */
    flex-direction: column;
    align-items: center;
    text-align: center;
    z-index: var(--z-tooltip);
    color: var(--white-color);
    font-size: var(--small-font-size);
    border-top: .1rem solid rgba(256, 256, 256, .1);
    padding: 1rem;
  }
  .footer__copy a{
    color: white;
  }
  .footer__menu{
    display: flex;
    gap: 1rem;
  }
  .footer__menu a{
    color: #F1F8FF;
    padding-right: 0.5rem;
    border-right: .1rem solid rgba(256, 256, 256, .1);color: white;
    margin-top: 1rem;
  }

  /* ==================== Scroll Bar =================================== */

::-webkit-scrollbar{
    width: .6rem;
    border-radius: 50px;
    background-color: hsl(0, 4%, 5%);
  }
  ::-webkit-scrollbar-thumb{
    border-radius: 50px;
    background-color: hsl(240, 5%, 21%);
  }
  
  ::-webkit-scrollbar-thumb:hover{
    border-radius: 50px;
    background-color: hsl(240, 16%, 11%);
  }
/* =============== Scroll up ================ */
.scrollup{
    position: fixed;
    right: 1rem;
    bottom: -50%;
    background-color:#cfc7c7;
    box-shadow: 0 8px 24px hsla(238 , 60% , 4% , .6);
    display: inline-flex;
    padding: 6px;
    color: var(--white-color);
    font-size: 1.25rem;
    z-index: var(--z-tooltip);
    transition: bottom .4s , transform .4s;
  }
  .scrollup:hover{
    transform: translateY(-.5rem);
  }
  /* Show Scroll up */
  
  .show__scroll{
    bottom: 3rem;
  }

/* Breakpoints */

/* ===== FOR SMALL DEVICES ========= */
@media screen and (max-width : 340px) {
    .container{
        margin-inline: 1rem;
    }
    
    .customer__container{
        padding-inline: 1rem;
      }
}
/* For medium devices */
@media screen and (min-width : 540px) {
    .home__container{
        /* left: 12rem; */
        justify-items: center;
    }
   
    .button{
      width: 28%;
    }
    .btn{
      width: 22%;
      font-size: 1.4rem;
    }
    .customer__card{
        width: 685px;
      }
    .customer__right p {
        font-size: .65rem;
    }
    .title {
      font-size: 14px;
    }
    .title__img{
      width: 305px;
    }
    .title span {
      font-size: 20px; 
    }
    .about__images{
      display: flex;
      flex-direction: column;
      }
      .about__img{
        width: 18rem;
        align-items: center;
        margin: 1rem auto;
        border-radius: 20px;
      }
      .accordion{
        max-width:  70%;
      } 
      .accordion__question{
        padding: 15px 1px;
      }
      .accordion__answer{
        padding: 15px 1px;
      }
 
   
}
@media screen and (min-width : 986px) {
   .nav{
        display: flex;
        align-items: center;
        z-index: var(--z-fixed);
    }

    .nav__list{
        font-size: 1rem;
    }
    .nav__item{
        margin:  2rem 1rem;
    }
    .nav__logo{
        font-size: 1rem;
        align-items: center;
    }
    .nav__logo img {
        width: 40px;
    }
    .home__bg{
      position: relative;
    }
    .title {
      font-size: 17px; 
    }
    .title__img {
      width: 400px;
  }
    .title span {
      font-size: 30px;

    }
    .home__card-1{
        max-width: 100%;
        padding: 2rem 0rem;
        display: grid;
       
        grid-template-columns: repeat(2, 484px);
        align-items: center;
    }
    .home__card-2{
        width: 100%;
        margin-top: 0rem;
        display: grid;
        grid-template-columns: repeat(2, 484px);
        align-items: center; 
    }
    .button {
      width: 51%;
  }
  .btn {
    width: 39%;
    font-size: .99rem;
}
    .btn__img{
        width: 15rem;
    }
    .about__images{
      display: flex;
      flex-direction: row;
      /* margin: 0rem 9rem 4rem; */
    }
    .about__img{
        width: 18rem;
        align-items: center;
        margin: 1rem auto;
        border-radius: 20px;
      }
      .section__title h1{
        font-size: 3.5rem;
      }
      .footer__copy{
        justify-content: space-between;
        flex-direction: row;
        padding: 1rem 2rem;
        align-items: baseline;
      }
      .footer__menu a{
        color: #F1F8FF;
        padding-right: 1rem;
        border-right: .1rem solid rgba(256, 256, 256, .1);color: white;
        font-weight: var(--font-semi-bold);
        transition: color .4s;

      }
      .footer__menu a:hover{
        color: grey;
      }
      
}

  /*  FOr large devices  */
  @media screen and (min-width : 1090px) {
    .container{
        margin-inline : auto;
      }
    .nav{
        /* height: calc(var(--header-height) ); */
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .nav__close,
    .nav__toggle{
        display: none;
    }
    .nav__list{
        display: flex;
        /* padding: 2rem 1rem; */
        font-size: 1.15rem;
       
    }
    .nav__item{
        margin:  2rem 1rem;
    }
    .nav__logo{
        font-size: 1.5rem;
        align-items: center;

    }
    .nav__logo img {
        width: 50px;
    }
    .home__bg{
      height: 750px;
      
    }
    .title {
      font-size: 20px; 
    }
    .title span {
  
      font-size: 40px;

    }
    .home__card-1,
    .home__card-2 {
        max-width: 100%;
        padding: 2rem;
        display: grid;
        grid-template-columns: 1fr 1fr; 
        align-items: center;
        
    }

    .home__card-1 .card__image-1,
    .home__card-2 .card__image-2 {
        justify-content: center; 
    }

    .home__card-1 .card__data-1,
    .home__card-2 .card__data-2 {
        justify-content: flex-start; 
    }
    .card__img-1,
    .card__img-2{
      width: 330px;
    }
   .card__data-1,
   .card__data-2{
    padding-right: 11rem;
   }
  

    .card__title h1{
        font-size: 2.23rem;
        text-align: start;
    }
    .customer__container{
        padding: 3.5rem 3.5rem 7.5rem;
      }
    .customer__container .section__title{
      font-weight: 500;
      font-size: 2.7rem;
      }
     
      .customer__card{
        width: 1185px;
      }
      .customer__img {
        width: 45px;
    }
    .app__logo {
        width: 25px;
    }
    .customer__left {
        gap: .5rem;
    }
    .customer__left p{
        font-size: .88rem;
    }
    .customer__right p {
        font-size: .65rem;
    }
      
      .card__description{
        font-size: var(--normal-font-size);
      }
      .swiper-pagination-bullets.swiper-pagination-horizontal{
        bottom: 3rem;
      }
      .about__bg {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        height: 467px;
        object-fit: cover;
        object-position: center;
     }  
     .title {
      font-size: 18px;     
    }
    .title span {
      font-size: 32px; 
    }
    .bg__section .title{
      font-size: 17px;
    }
    .bg__section .title .title__img {
      width: 400px;
  }
    .bg__section .title span{
      font-size: 27px;
    }
     .about__content{
      margin: 1rem auto;
      width: 50%;
     }
     .about__title{
      font-size: 2rem;
      text-align: center;
     }
     .about__subtitle{
      font-size: 1.3rem;
      font-weight: 500;
      text-align: center;
     }
     .about__description{
      text-align: center;
      font-size: var(--normal-font-size);
     }
     .about__images{
      display: flex;
      justify-content: space-evenly;
      margin: 0rem auto;
      gap: 0rem;
      width: 100%;
     }

     .about__images img{
      width: 20rem;
      border-radius: 20px;
     }
     .about__img{
      margin:2rem 0rem;
      
  }
     .privacy__title{
      font-size: 2rem;
      text-align: center;
      margin-top: 1.5rem;
     }
     .privacy__content{
      margin: 3rem !important;
     }
    
     .privacy__subtitle{
      font-size: 1.7rem;
        margin: 1rem auto;
     }
     .privacy__description{
      margin: 1rem auto;
      font-size: var(--normal-font-size);
     }
     .accordion {
      max-width: 80%;
    
     }
     .accordion__question{
      padding: 15px 5px;
      font-size: 18px;
     }
     .accordion__answer{
      padding: 15px 5px;
     }
     .contact__title{
      
      font-size: 3.5rem;
   }

  }