@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Protest+Revolution&family=Protest+Riot&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');

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

body{
    font-family: myFont;
    height: 100vh;
    width: 100%;
    padding-top: 70px;

    /* padding-top: var(--nav-height); */
}

@font-face{
    font-family: AtypText-Semibold;
    src: url(AtypText-Semibold.ttf);
}

@font-face{
   font-family: myFont;
   src: url(Aeroport.ttf);
}
@font-face{
   font-family: Headlines;
   src: url(Headlines-Bold.otf);
}


nav{
   position: fixed;
   z-index: 99;
   width: 100%;
   background: #fffafa;
   top: 0;
   left: 0;
   /* transition: all 300ms ease-in-out;
   background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) rgba(255, 255, 255,0));
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px); */
   box-shadow: 0 8px 32px 0 rgba(0,0,0,0.10);
   font-family: myFont;
 }
 nav .wrapper{
   position: relative;
   width: 80%;
   padding: 0px 30px;
   height: 70px;
   line-height: 70px;
   margin: auto;
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 .wrapper .logo a{
   color: #020202;
   font-size: 30px;
   font-weight: 600;
   text-decoration: none;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .wrapper .logo a img{
   height: 40px;
 }
 .wrapper .nav-links{
   display: inline-flex;
 }
 .nav-links li{
   list-style: none;
 }
 .nav-links li a{
   color: #030303;
   text-decoration: none;
   font-size: 19px;
   font-weight: 500;
   padding: 9px 15px;
   border-radius: 5px;
   transition: all 0.3s ease;
 }
 .nav-links li a:hover{
   /* background: #e8f2f7; */
   color: #6659e4;
 }
 .nav-links .mobile-item{
   display: none;
 }
 .nav-links .drop-menu{
   position: absolute;
   border-top: 4px solid #6659e4;
   background: #f7f7f8;
   width: 180px;
   line-height: 45px;
   top: 85px;
   opacity: 0;
   visibility: hidden;
   box-shadow: 0 6px 10px rgba(0,0,0,0.15);
 }
 .nav-links li:hover .drop-menu{
   transition: all 0.3s ease;
   top: 70px;
   opacity: 1;
   visibility: visible;
 }
 .drop-menu li a{
   width: 100%;
   display: block;
   padding: 0 0 0 15px;
   font-weight: 400;
   border-radius: 0px;
 }
 .wrapper .btn{
   color: #131212;
   font-size: 20px;
   cursor: pointer;
   display: none;
 }
 .wrapper .btn.close-btn{
   position: absolute;
   right: 30px;
   top: 10px;
   color: #f2f2f2;
 }
 @media all and  (max-width: 970px) {
   .wrapper .btn{
     display: block;
   }
   .wrapper .nav-links{
     position: fixed;
     height: 100vh;
     width: 100%;
     max-width: 350px;
     top: 0;
     left: -100%;
     background: #242526;
     display: block;
     padding: 50px 10px;
     line-height: 50px;
     overflow-y: auto;
     box-shadow: 0px 15px 15px rgba(0,0,0,0.18);
     transition: all 0.3s ease;
   }
   /* custom scroll bar */
   ::-webkit-scrollbar {
     width: 10px;
   }
   ::-webkit-scrollbar-track {
     background: #242526;
   }
   ::-webkit-scrollbar-thumb {
     background: #3A3B3C;
   }
   #menu-btn:checked ~ .nav-links{
     left: 0%;
   }
   #menu-btn:checked ~ .btn.menu-btn{
     display: none;
   }
   #close-btn:checked ~ .btn.menu-btn{
     display: block;
   }
   .nav-links li{
     margin: 15px 10px;
   }
   .nav-links li a{
     padding: 0 20px;
     display: block;
     font-size: 20px;
     color: #ffffff;
   }
   .nav-links .drop-menu{
     position: static;
     opacity: 1;
     top: 65px;
     visibility: visible;
     padding-left: 20px;
     width: 100%;
     max-height: 0px;
     overflow: hidden;
     box-shadow: none;
     transition: all 0.3s ease;
     background-color: #252627;
     border-top: none;
   }
   #showDrop:checked ~ .drop-menu{
     max-height: 100%;
   }
   .nav-links .desktop-item{
     display: none;
   }
   .nav-links .mobile-item{
     display: block;
     color: #f2f2f2;
     font-size: 20px;
     font-weight: 500;
     padding-left: 20px;
     cursor: pointer;
     border-radius: 5px;
     transition: all 0.3s ease;
   }
   .nav-links .mobile-item:hover{
     background: #3A3B3C;
     color: #6659e4;
   }
   .drop-menu li{
     margin: 0;
   }
   .drop-menu li a{
     border-radius: 5px;
     font-size: 18px;
     color: #f0eeee;
   }
 
   .nav-links li a:hover{
     background: #353738;
   }
 }
 nav input{
   display: none;
 }
 
 .desktop-item .dropdown-icon{
     align-items: center;
     position: relative;
     right: -5px;
     transform: rotate(0deg);
     transition: 0.3s ease-in-out all;
 }
 
 
 .desktop-item:hover .dropdown-icon i{
     transform: rotate(180deg);
 }
 
 
 .scroll-down nav{
     transform: translate3d(0, -100%, 0);
 }
 
 .scroll-up nav{
     /* filter: drop-shadow(0 -10px 20px rgb(170,170,170)); */
 }


.main{
    width: 100%;
    height: auto;
}

.main .heading{
    width: 100%;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    background-color: #7752FE;
    /* margin-bottom: 15px; */
}

.main .heading h1{
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: AtypText-Semibold;
    font-size: 6vw;
    font-weight: 800;
}

.main .story{
    width: 100%;
    padding-left: 2vw;
    padding-right: 2vw;
    padding-bottom: 5vw;
    padding-top: 1vw;
    align-items: center;
    /* border: 1px solid black; */
}

 .main .story h1{
    font-size: 4vw;
    text-align: left;
    font-weight: 400;
    line-height: 80px;
    /* padding-bottom: 20px 0; */
 }

 /* .main .story hr{
    margin-top: 10px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
 } */



 .main .goals{
    padding: 2vw 2vw;
    display: flex;
    gap: 2rem;
 }

 .main .goals .sec1{
   width: 30%;
   height: auto;
 } 

 .main .goals h1{
   font-weight: 500;
    font-size: 1.5vw;
 }
 
 .main .goals .sec1 h1{
    font-weight: 500;
    font-size: 1vw;
 }

 .main .goals .sec1 h2{
   font-weight: 400;
    font-size: 1vw;
 }


 .main .goals .sec2{
   width: 30%;
   height: auto;
 } 
 
 .main .goals .sec2 h1{
    font-weight: 500;
    font-size: 1vw;
 }

 .main .goals .sec2 h2{
   font-weight: 400;
    font-size: 1vw;
 }
 
 .main .goals .sec3{
   width: 30%;
   height: auto;
 } 
 
 .main .goals .sec3 h1{
    font-weight: 500;
    font-size: 1vw;
 }

 .main .goals .sec3 h2{
   font-weight: 400;
    font-size: 1vw;
 }
 


.text{
   padding: 1rem 2.5rem;
}

.text h1{
   font-size: 2.5vw;
   font-weight: 500;
   letter-spacing: -1.5px;

}


 .wrapper{
    margin-top: 30px;
 }

 .accordion{
    background-color: white;
    color: rgba(0,0,0,0.8);
    cursor: pointer;
    font-size: 1.2rem;
    width: 100%;
    padding: 1rem 2.5rem;
    border: none;
    outline: none;
    transition: 0.4s;
    display: flex;
    justify-content: space-between;
    align-items: center;
 }

 .accordion h1,h2{
    font-size: 1.4vw;
    font-weight: 500;
 }


 .active,
 .accordion:hover{
    background-color: #F8F8FF;
 }

 .pannel {
    padding: 0 2rem 2.5rem 2rem;
    background-color: white;
    overflow: hidden;
    background-color: #F8F8FF;
    display: none;
    text-align: left;
 }
 
 .pannel p{
    color: rgba(0, 0, 0, 0.7);
    font-size: 1.2rem;
    line-height: 1.5;
    font-weight: 450;
    margin-bottom: 8px;

 }

 .pannel .content{
    width: 100%;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18rem;
 }

 .pannel .content .right{
    width: 50%;
    height: 100%;
    padding-top: 3vw;
 }

 .pannel .content .right h1{
    font-size: 1vw;
    font-weight: 600;
 }

 .pannel .content .right h2{
    font-size: 0.5vw;
 }

 .pannel .content .right .arrow{
    display: flex;
    align-items: center;
    gap: 1.5rem;
 }

 .pannel .content .right .arrow div{
    width: 10px;
    height: 10px;
    background-color: black;
    border-radius: 50px;
 }

 .pannel .content .left{
    width: auto;
    height: 100%;
 }

.pannel .content .left video{
   width: 100%;
   height: 100%;
   border-radius: 15px;
   border: 1px solid black;

}

 .wrapper .faq{
   margin: 10px 0;
 }

 .faq.active{
    border: none;
 }

 /* ---------------------------------------------------NAME AND TAGLINE------------------------------------------------ */
 
 .wrapper2{
   margin-top: 30px;
}

.accordion2{
   background-color: white;
   color: rgba(0,0,0,0.8);
   cursor: pointer;
   font-size: 1.2rem;
   width: 100%;
   padding: 1rem 2.5rem;
   border: none;
   outline: none;
   transition: 0.4s;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.accordion2 h1,h2{
   font-size: 1.4vw;
   font-weight: 500;
}


.active1,
.accordion2:hover{
   background-color: #F8F8FF;
}

.pannel2 {
   padding: 0 2rem 2.5rem 2rem;
   background-color: white;
   overflow: hidden;
   background-color: #F8F8FF;
   display: none;
   text-align: left;
}

.pannel2 p{
   color: rgba(0, 0, 0, 0.7);
   font-size: 1.2rem;
   line-height: 1.5;
   font-weight: 450;
   margin-bottom: 8px;

}

.pannel2 .content{
   width: 100%;
   height: 500px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 5rem;
}

.pannel2 .content .right{
   width: 50%;
   height: 100%;
}

.pannel2 .content .right h1{
   font-size: 1vw;
   font-weight: 600;
}

.pannel2 .content .right h2{
   font-size: 0.5vw;
}

.pannel2 .content .right .arrow{
   display: flex;
   align-items: center;
   gap: 1.5rem;
}

.pannel2 .content .right .arrow div{
   width: 10px;
   height: 10px;
   background-color: black;
   border-radius: 50px;
}

.pannel2 .content .left{
   width: auto;
   height: 100%;
}

.pannel2 .content .left video{
  width: 100%;
  height: 100%;
  border-radius: 15px;

}

.wrapper .faq2{
  margin: 10px 0;
}

.faq2 .active{
   border: none;
}


/* -------------------------------------------------------BRAND COLLETRAL------------------------------------------- */

.wrapper3{
   margin-top: 30px;
}

.accordion3{
   background-color: white;
   color: rgba(0,0,0,0.8);
   cursor: pointer;
   font-size: 1.2rem;
   width: 100%;
   padding: 1rem 2.5rem;
   border: none;
   outline: none;
   transition: 0.4s;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.accordion3 h1,h2{
   font-size: 1.4vw;
   font-weight: 500;
}


.active2,
.accordion3:hover{
   background-color: #F8F8FF;
}

.pannel3 {
   padding: 0 2rem 2.5rem 2rem;
   background-color: white;
   overflow: hidden;
   background-color: #F8F8FF;
   display: none;
   text-align: left;
}

.pannel3 p{
   color: rgba(0, 0, 0, 0.7);
   font-size: 1.2rem;
   line-height: 1.5;
   font-weight: 450;
   margin-bottom: 8px;

}

.pannel3 .content{
   width: 100%;
   height: 500px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 1rem;
}

.pannel3 .content .right{
   width: 50%;
   height: 100%;
   padding-top: 3vw;
}

.pannel3 .content .right h1{
   font-size: 1vw;
   font-weight: 600;
}

.pannel3 .content .right h2{
   font-size: 0.5vw;
}

.pannel3 .content .right .arrow{
   display: flex;
   align-items: center;
   gap: 1.5rem;
}

.pannel3 .content .right .arrow div{
   width: 10px;
   height: 10px;
   background-color: black;
   border-radius: 50px;
}

.pannel3 .content .left{
   width: auto;
   height: 100%;
}

.pannel3 .content .left video{
  width: 100%;
  height: 100%;
  border-radius: 15px;
  border: 1px solid black;

}

.wrapper .faq3{
  margin: 10px 0;
}

.faq3 .active{
   border: none;
}

/* -------------------------------------------RESPONSIVE DESIGN--------------------------------- */

.wrapper4{
   margin-top: 30px;
}

.accordion4{
   background-color: white;
   color: rgba(0,0,0,0.8);
   cursor: pointer;
   font-size: 1.2rem;
   width: 100%;
   padding: 1rem 2.5rem;
   border: none;
   outline: none;
   transition: 0.4s;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.accordion4 h1,h2{
   font-size: 1.4vw;
   font-weight: 500;
}


.active3,
.accordion4:hover{
   background-color: #F8F8FF;
}

.pannel4 {
   padding: 0 2rem 2.5rem 2rem;
   background-color: white;
   overflow: hidden;
   background-color: #F8F8FF;
   display: none;
   text-align: left;
}

.pannel4 p{
   color: rgba(0, 0, 0, 0.7);
   font-size: 1.2rem;
   line-height: 1.5;
   font-weight: 450;
   margin-bottom: 8px;

}

.pannel4 .content{
   width: 100%;
   height: 500px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 5rem;
}

.pannel4 .content .right{
   width: 50%;
   height: 100%;
}

.pannel4 .content .right h1{
   font-size: 1vw;
   font-weight: 600;
}

.pannel4 .content .right h2{
   font-size: 0.5vw;
}

.pannel4 .content .right .arrow{
   display: flex;
   align-items: center;
   gap: 1.5rem;
}

.pannel4 .content .right .arrow div{
   width: 10px;
   height: 10px;
   background-color: black;
   border-radius: 50px;
}

.pannel4 .content .left{
   width: auto;
   height: 100%;
   border: 1px solid blue;
}

.pannel4 .content .left video{
  width: 100%;
  height: 100%;
  border-radius: 15px;

}

.wrapper .faq4{
  margin: 10px 0;
}

.faq4 .active{
   border: none;
}


/* --------------------------------------------------------------------CALL TO ACTION----------------------------------------------------------------------- */
.text-wrapper{
   margin-top: 150px;
   background-color: #03001C;
   height: auto;
   width: 100%;
   border-top-left-radius: 20px;
   border-top-right-radius: 20px;
   padding-top: 2vw;
   padding-bottom: 1vw;
   border-bottom-left-radius: 20px;
   border-bottom-right-radius: 20px;
}

.text-wrapper .scroll{
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: #03001C;
   overflow: hidden;
   height: 30vh;
}

.text-wrapper .scroll h1{
   font-size: 12vw;
   font-weight: 700;
   padding: 0 2rem;
   letter-spacing: 1px;
   white-space: nowrap;
   animation: silde 15s linear infinite;
   color: white;
}

@keyframes silde {
   0%{
      transform: translateX(0);
   }
   100%{
      transform: translateX(-100%);
   }
}

.text-wrapper .text{
   align-items: center;
   justify-content: center;
   display: flex;
}

.text-wrapper .text h1{
   color: #F4EEFF;
   letter-spacing: 2px;
   font-size: 1.5vw;
   font-weight: 400;
}

.ending{
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 1vw 1vw;
}

.ending button{
   padding: 1vw 2vw;
   border-radius: 50px;
   border: none;
   background-color: whitesmoke;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 2rem;
}

.ending button div{
   width: 10px;
   height: 10px;
   background-color: #111;
   border-radius: 50px;
}

/* --------------------------------------image-crousel-------------------------------------------- */
.text-wrapper.swiper {
   width: 80%;
   height: 100%;
   margin-left: auto;
   margin-right: auto;
 }

 .swiper-wrapper{
   width: 80%;
 }

 .swiper-wrapper .swiper-slide {
   text-align: center;
   font-size: 15px;
   display: flex;
   justify-content: center;
   align-items: center;
 }

 .swiper-slide img {
   display: block;
   width: 80%;
   height: 80%;
   object-fit: cover;
   border-radius: 30px;
 }

 .swiper-slide video{
   display: block;
   width: 80%;
   height: 80%;
   object-fit: cover;
   border-radius: 30px;
 }

 .swiper-button-next,
 .swiper-button-prev{
   color: whitesmoke;
   /* background-color: #864AF9; */
   border: 2px solid whitesmoke;
   padding: 2vw 2vw;
   border-radius: 50%;
 }


/* ---------------------------------------------ENDING-------------------------------------------- */

/* ------------------------------------------------------PRICE----------------------------------------------------------------------*/

.price{
   padding: 4vw 4vw;
}

.price .ro1 h1 span{
   border-bottom: 3.5px solid black;
}

.price h1{
   font-weight: 300;

}

.contact-info{
   width: 100%;
   height: auto;
   background-color: #cdea68;
   align-items: center;
   justify-content: center;
   padding: 2vw 2vw;
   border-top-left-radius: 20px;
   border-top-right-radius: 20px;
}


.contact-info .text{
   padding: 2vw;
   text-align: center;
}

.contact-info .text h1{
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: AtypText-Semibold;
   font-size: 9vw;
   font-weight: 800;
   line-height: 150px;
}

.contact-info .ctn-button{
   display: flex;
   align-items: center;
   justify-content: center;
   /* margin: 20px 0; */
   height: 100px;
   width: 100%;
}

.contact-info .ctn-button .contact{
   display: flex;
   align-items: center;
   justify-content: center;
   height: 70px;
   width: 350px;
   border-radius: 50px;
   background-color: rgb(27, 25, 34);
   gap: 4rem;
   cursor: pointer;

}
.contact-info .ctn-button a{
   text-decoration: none;
   
}

.contact-info .ctn-button .contact h1{
   color: azure;
   font-size: 1vw;
   font-weight: 400;
}

.contact-info .ctn-button .contact .arrow{
   height: 10px;
   width: 10px;
   background-color: aliceblue;
   border-radius: 50px;
}

.footer{
   /* display: flex; */
   /* justify-content: center;
   align-items: center; */
   padding: 2vw 2vw;
   background-color: #864AF9;
   height: auto; 
}

.footer h1{
   color: whitesmoke;
   font-size: 8vw;
   font-weight: 700;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: myFont;
}

.footer h3{
   opacity: 50%;
   text-align: center;
   color: rgb(231, 231, 231);
   font-size: 2vw;
   font-weight: 100;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: myFont;
}

.footer .gmail{
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;

}

.gmail .gmailtext {
   width: 40%;
   align-items: center;
   justify-content: center;

}

.gmail .gmailtext h2{
   margin-top: 20px;
   color: rgb(231, 231, 231);
   font-size: 2vw;
   font-weight: 100;
   /* display: flex; */
   align-items: center;
   justify-content: center;
   font-family: myFont;
}

.gmailtext hr{
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
}

.row{
   width: 100%;
   margin-top: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.footercol{
   width: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10rem;
}


.underline{
   width: 100%;
   height: 5px;
   background: rgb(254, 254, 255);
   border: 1.5px solid rgb(10, 7, 14);
   border-radius: 3px;
   position: absolute;
   top: 45px;
   left: 0;
   overflow: hidden;
}

.col h4{
   position: relative;
   font-family: myFont;
   color: rgb(231, 231, 231);
   font-size: 2vw;
   font-weight: 100;
}

.underline span{
   width: 25px;
   height: 100%;
   background: rgb(17, 15, 24);
   border-radius: 3px;
   position: absolute;
   top: 0;
   left: 10px;
   animation: moving 2s linear infinite;
}

@keyframes moving{
   0%{
       left: -20px;
   }
   100%{
       left: 100%;
   }
}

.socialIcons{
   margin: 40px;
   display: flex;
   justify-content: center;
}

.socialIcons a{
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
   height: 70px;
   width: 70px;
   background-color: whitesmoke;
   margin: 15px;
   border-radius: 50%;
   border: 2px solid rgb(19, 14, 29);
}

.socialIcons a i{
   font-size: 2rem;
   color: black;
   opacity: 0.9;
}

/* HOVER EFFECT ON SOCIAL ICONS */

.socialIcons a:hover{
   background-color: #111;
   /* transition: 0.5s; */
   border: 2px solid whitesmoke;
}

.socialIcons a:hover i{
   color: whitesmoke;
   transition: 0.5s;
}


/* --------------------------------------------------media quries -----------------------*/

@media all and (min-width: 315px) and (max-width: 375px){
   .wrapper .nav-links{
      position: fixed;
      height: 100vh;
      width: 100%;
      max-width: 350px;
      top: 0;
      left: -110%;
      background: #242526;
      display: block;
      padding: 50px 10px;
      line-height: 50px;
      overflow-y: auto;
      box-shadow: 0px 15px 15px rgba(0,0,0,0.18);
      transition: all 0.3s ease;
   }
   .main .heading{
      height: 100px;
      gap: 0.5rem;
   }
   .main .heading h1{
      font-size: 6vw;
   }
   .main .heading h2{
      font-size: 3vw;
   }
   .main .story{
      height: 70px;
   }
   .main .story h1{
      font-size: 4.5vw;
      line-height: 20px;
   }
   .main .goals{
      gap: 1rem;
   }
   .main .goals h1{
      font-size: 2.8vw;
   }
   .main .goals .sec1 h1{
      font-size: 2vw;
   }
   .main .goals .sec1 h2{
      font-size: 1.6vw;
   }
   .main .goals .sec2 h1{
      font-size: 2vw;
   }
   .main .goals .sec2 h2{
      font-size: 1.6vw;
   }
   .main .goals .sec3 h1{
      font-size: 2vw;
   }
   .main .goals .sec3 h2{
      font-size: 1.6vw;
   }
   .text h1{
      font-size: 5vw;
      letter-spacing: 0.4px;
   }
   /* ---------------------------------------- */
   .wrapper .faq .accordion {
      height: 20px;
   }
   .wrapper .faq .accordion h1,h2{
      font-size: 3vw;
   }
   .wrapper .faq .pannel .content{
      height: auto;
      gap: 1rem;
      display: flex;
      flex-direction: column;
   }
   .wrapper .faq .pannel .content .right{
      width: 100%;
   }
   .wrapper .faq .pannel .content .right h1{
      font-size: 3vw;
   }
   .wrapper .faq .pannel .content .right p{
      font-size: 3vw;
   }
   /* ---------------------------------------------------- */
   .wrapper2 .faq2 .accordion2 {
      height: 20px;
   }
   .wrapper2 .faq2 .accordion2 h1,h2{
      font-size: 3vw;
   }
   .wrapper2 .faq2 .pannel2 .content{
      height: auto;
      gap: 1rem;
      display: flex;
      flex-direction: column;
   }
   .wrapper2 .faq2 .pannel2 .content .right{
      width: 100%;
   }
   .wrapper2 .faq2 .pannel2 .content .right h1{
      font-size: 3vw;
   }
   .wrapper2 .faq2 .pannel2 .content .right p{
      font-size: 3vw;
   }
   /* --------------------------------------- */
   .wrapper3 .faq3 .accordion3 {
      height: 20px;
   }
   .wrapper3 .faq3 .accordion3 h1,h2{
      font-size: 3vw;
   }
   .wrapper3 .faq3 .pannel3 .content{
      height: auto;
      gap: 1rem;
      display: flex;
      flex-direction: column;
   }
   .wrapper3 .faq3 .pannel3 .content .right{
      width: 100%;
   }
   .wrapper3 .faq3 .pannel3 .content .right h1{
      font-size: 3vw;
   }
   .wrapper3 .faq3 .pannel3 .content .right p{
      font-size: 3vw;
   }
   /* -------------------------------------------- */
   .wrapper4 .faq4 .accordion4 {
      height: 20px;
   }
   .wrapper4 .faq4 .accordion4 h1,h2{
      font-size: 3vw;
   }
   .wrapper4 .faq4 .pannel4 .content{
      height: auto;
      gap: 1rem;
      display: flex;
      flex-direction: column;
   }
   .wrapper4 .faq4 .pannel4 .content .right{
      width: 100%;
   }
   .wrapper4 .faq4 .pannel4 .content .right h1{
      font-size: 3vw;
   }
   .wrapper4 .faq4 .pannel4 .content .right p{
      font-size: 3vw;
   }
   /* -------------------------------------------------- */
   .text-wrapper{
      margin-top: 50px;
      height: auto;
      width: 100%;
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      padding-top: 4vw;
      padding-bottom: 1vw;
      border-bottom-left-radius: 20px;
      border-bottom-right-radius: 20px;
   }
   .text-wrapper .scroll{
      height: 15vh;
   }
   .text-wrapper .scroll h1{
      font-size: 19vw;
   }
   .text-wrapper .text h1{
      font-size: 3vw;
   }
   .swiper-slide img {
      display: block;
      width: 95%;
      height: 80%;
      object-fit: cover;
      border-radius: 2vw;
  }
   
  .swiper-slide video{
      display: block;
      width: 95%;
      height: 80%;
      object-fit: cover;
      border-radius: 2vw;
  }
   .swiper-button-prev{
      position: absolute;
      left: 0;
      color: whitesmoke;
      /* background-color: #864AF9; */
      border: 2px solid whitesmoke;
      font-size: 1vw;
      padding: 4vw 4vw;
      border-radius: 50%;
   }
   .swiper-button-next{
      position: absolute;
      right: 0;
      color: whitesmoke;
      /* background-color: #864AF9; */
      border: 2px solid whitesmoke;
      font-size: 1vw;
      padding: 4vw 4vw;
      border-radius: 50%;
   }
   .ending button{
      padding: 2vw 2vw;
      gap: 1rem;
      width: 200px;
      height: 30px;
      font-size: 2.5vw;
   }
   .price .ro1 h1{
      font-size: 4.5vw;
   }
   .contact-info .text h1{
      line-height: 8vw;
   }
   .contact-info .ctn-button a .contact{
      gap: 2rem;
      height: 9vw;
      width: 50vw;
   }
   .contact-info .ctn-button a .contact h1{
      font-size: 3vw;
   }
   .footer{
      height: auto;
  }
  .footer h1{
      font-size: 9vw;
  }
  .footer h3{
      font-size: 3.5vw;
  }
  .footer .gmail .gmailtext h2{
      font-size: 4vw;
  }
  .footer .gmail .gmailtext {
      width: 60%;
  }
  .footer .row .footercol{
      width: 100%;
      gap: 4rem;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  .footer .row .footercol h4{
      font-size: 4vw;
  }
  .footer .row .footercol .col .underline{
      top: 25px;
  }
   
  .footer .socialIcons a{
      width: 50px;
      height: 50px;
  }
}

@media all and (min-width: 375px) and (max-width: 475px){
   .main .heading{
      height: 100px;
      gap: 0.5rem;
   }
   .main .heading h1{
      font-size: 6vw;
   }
   .main .heading h2{
      font-size: 3vw;
   }
   .main .story{
      height: 70px;
   }
   .main .story h1{
      font-size: 4.5vw;
      line-height: 20px;
   }
   .main .goals{
      gap: 1rem;
   }
   .main .goals h1{
      font-size: 2.8vw;
   }
   .main .goals .sec1 h1{
      font-size: 1.5vw;
   }
   .main .goals .sec1 h2{
      font-size: 1.5vw;
   }
   .main .goals .sec2 h1{
      font-size: 1.5vw;
   }
   .main .goals .sec2 h2{
      font-size: 1.5vw;
   }
   .main .goals .sec3 h1{
      font-size: 1.5vw;
   }
   .main .goals .sec3 h2{
      font-size: 1.5vw;
   }
   .text h1{
      font-size: 5vw;
      letter-spacing: 0.4px;
   }
   /* ---------------------------------------- */
   .wrapper .faq .accordion {
      height: 20px;
   }
   .wrapper .faq .accordion h1,h2{
      font-size: 3vw;
   }
   .wrapper .faq .pannel .content{
      height: auto;
      gap: 1rem;
      display: flex;
      flex-direction: column;
   }
   .wrapper .faq .pannel .content .right{
      width: 100%;
   }
   .wrapper .faq .pannel .content .right h1{
      font-size: 3vw;
   }
   .wrapper .faq .pannel .content .right p{
      font-size: 3vw;
   }
   /* ---------------------------------------------------- */
   .wrapper2 .faq2 .accordion2 {
      height: 20px;
   }
   .wrapper2 .faq2 .accordion2 h1,h2{
      font-size: 3vw;
   }
   .wrapper2 .faq2 .pannel2 .content{
      height: auto;
      gap: 1rem;
      display: flex;
      flex-direction: column;
   }
   .wrapper2 .faq2 .pannel2 .content .right{
      width: 100%;
   }
   .wrapper2 .faq2 .pannel2 .content .right h1{
      font-size: 3vw;
   }
   .wrapper2 .faq2 .pannel2 .content .right p{
      font-size: 3vw;
   }
   /* --------------------------------------- */
   .wrapper3 .faq3 .accordion3 {
      height: 20px;
   }
   .wrapper3 .faq3 .accordion3 h1,h2{
      font-size: 3vw;
   }
   .wrapper3 .faq3 .pannel3 .content{
      height: auto;
      gap: 1rem;
      display: flex;
      flex-direction: column;
   }
   .wrapper3 .faq3 .pannel3 .content .right{
      width: 100%;
   }
   .wrapper3 .faq3 .pannel3 .content .right h1{
      font-size: 3vw;
   }
   .wrapper3 .faq3 .pannel3 .content .right p{
      font-size: 3vw;
   }
   /* -------------------------------------------- */
   .wrapper4 .faq4 .accordion4 {
      height: 20px;
   }
   .wrapper4 .faq4 .accordion4 h1,h2{
      font-size: 3vw;
   }
   .wrapper4 .faq4 .pannel4 .content{
      height: auto;
      gap: 1rem;
      display: flex;
      flex-direction: column;
   }
   .wrapper4 .faq4 .pannel4 .content .right{
      width: 100%;
   }
   .wrapper4 .faq4 .pannel4 .content .right h1{
      font-size: 3vw;
   }
   .wrapper4 .faq4 .pannel4 .content .right p{
      font-size: 3vw;
   }
   /* -------------------------------------------------- */
   .text-wrapper{
      margin-top: 50px;
      height: auto;
      width: 100%;
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      padding-top: 4vw;
      padding-bottom: 1vw;
      border-bottom-left-radius: 20px;
      border-bottom-right-radius: 20px;
   }
   .text-wrapper .scroll{
      height: 15vh;
   }
   .text-wrapper .scroll h1{
      font-size: 19vw;
   }
   .text-wrapper .text h1{
      font-size: 3vw;
   }
   .swiper-slide img {
      display: block;
      width: 95%;
      height: 80%;
      object-fit: cover;
      border-radius: 2vw;
  }
   
  .swiper-slide video{
      display: block;
      width: 95%;
      height: 80%;
      object-fit: cover;
      border-radius: 2vw;
  }
   .swiper-button-prev{
      position: absolute;
      left: 0;
      color: whitesmoke;
      /* background-color: #864AF9; */
      border: 2px solid whitesmoke;
      font-size: 1vw;
      padding: 4vw 4vw;
      border-radius: 50%;
   }
   .swiper-button-next{
      position: absolute;
      right: 0;
      color: whitesmoke;
      /* background-color: #864AF9; */
      border: 2px solid whitesmoke;
      font-size: 1vw;
      padding: 4vw 4vw;
      border-radius: 50%;
   }
   .ending button{
      padding: 2vw 2vw;
      gap: 1rem;
      width: 200px;
      height: 30px;
      font-size: 2.5vw;
   }
   .price .ro1 h1{
      font-size: 4.5vw;
   }
   .contact-info .text h1{
      line-height: 8vw;
   }
   .contact-info .ctn-button a .contact{
      gap: 2rem;
      height: 9vw;
      width: 50vw;
   }
   .contact-info .ctn-button a .contact h1{
      font-size: 3vw;
   }
   .footer{
      height: auto;
  }
  .footer h1{
      font-size: 9vw;
  }
  .footer h3{
      font-size: 3.5vw;
  }
  .footer .gmail .gmailtext h2{
      font-size: 4vw;
  }
  .footer .gmail .gmailtext {
      width: 60%;
  }
  .footer .row .footercol{
      width: 100%;
      gap: 4rem;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  .footer .row .footercol h4{
      font-size: 4vw;
  }
  .footer .row .footercol .col .underline{
      top: 25px;
  }
   
  .footer .socialIcons a{
      width: 50px;
      height: 50px;
  }
}

@media all and (min-width: 476px) and (max-width: 640px){
   .main .heading{
      height: 140px;
      gap: 0.5rem;
   }
   .main .heading h1{
      font-size: 6.5vw;
   }
   .main .heading h2{
      font-size: 4vw;
   }
   .main .story{
      height: 90px;
   }
   .main .story h1{
      font-size: 4.5vw;
      line-height: 5vw;
   }
   .main .goals{
      gap: 1rem;
   }
   .main .goals h1{
      font-size: 3vw;
   }
   .main .goals .sec1 h1{
      font-size: 1.9vw;
   }
   .main .goals .sec1 h2{
      font-size: 1.6vw;
   }
   .main .goals .sec2 h1{
      font-size: 1.9vw;
   }
   .main .goals .sec2 h2{
      font-size: 1.6vw;
   }
   .main .goals .sec3 h1{
      font-size: 1.9vw;
   }
   .main .goals .sec3 h2{
      font-size: 1.6vw;
   }
   .text h1{
      font-size: 5vw;
      letter-spacing: 0.4px;
   }
   /* ----------------------------------------------- */

   .wrapper .faq .accordion {
      height: 20px;
   }
   .wrapper .faq .accordion h1,h2{
      font-size: 3vw;
   }
   .wrapper .faq .pannel .content{
      height: auto;
      gap: 1rem;
      display: flex;
      flex-direction: column;
   }
   .wrapper .faq .pannel .content .right{
      width: 100%;
   }
   .wrapper .faq .pannel .content .right h1{
      font-size: 3vw;
   }
   .wrapper .faq .pannel .content .right p{
      font-size: 3vw;
   }
   /* ---------------------------------------------------- */
   .wrapper2 .faq2 .accordion2 {
      height: 20px;
   }
   .wrapper2 .faq2 .accordion2 h1,h2{
      font-size: 3vw;
   }
   .wrapper2 .faq2 .pannel2 .content{
      height: auto;
      gap: 1rem;
      display: flex;
      flex-direction: column;
   }
   .wrapper2 .faq2 .pannel2 .content .right{
      width: 100%;
   }
   .wrapper2 .faq2 .pannel2 .content .right h1{
      font-size: 3vw;
   }
   .wrapper2 .faq2 .pannel2 .content .right p{
      font-size: 3vw;
   }
   /* --------------------------------------- */
   .wrapper3 .faq3 .accordion3 {
      height: 20px;
   }
   .wrapper3 .faq3 .accordion3 h1,h2{
      font-size: 3vw;
   }
   .wrapper3 .faq3 .pannel3 .content{
      height: auto;
      gap: 1rem;
      display: flex;
      flex-direction: column;
   }
   .wrapper3 .faq3 .pannel3 .content .right{
      width: 100%;
   }
   .wrapper3 .faq3 .pannel3 .content .right h1{
      font-size: 3vw;
   }
   .wrapper3 .faq3 .pannel3 .content .right p{
      font-size: 3vw;
   }
   /* -------------------------------------------- */
   .wrapper4 .faq4 .accordion4 {
      height: 20px;
   }
   .wrapper4 .faq4 .accordion4 h1,h2{
      font-size: 3vw;
   }
   .wrapper4 .faq4 .pannel4 .content{
      height: auto;
      gap: 1rem;
      display: flex;
      flex-direction: column;
   }
   .wrapper4 .faq4 .pannel4 .content .right{
      width: 100%;
   }
   .wrapper4 .faq4 .pannel4 .content .right h1{
      font-size: 3vw;
   }
   .wrapper4 .faq4 .pannel4 .content .right p{
      font-size: 3vw;
   }
    /* -------------------------------------------------- */
    .text-wrapper{
      margin-top: 50px;
      height: auto;
      width: 100%;
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      padding-top: 4vw;
      padding-bottom: 1vw;
      border-bottom-left-radius: 20px;
      border-bottom-right-radius: 20px;
   }
   .text-wrapper .scroll{
      height: 15vh;
   }
   .text-wrapper .scroll h1{
      font-size: 19vw;
   }
   .text-wrapper .text h1{
      font-size: 3vw;
   }
   .swiper-slide img {
      display: block;
      width: 95%;
      height: 80%;
      object-fit: cover;
      border-radius: 2vw;
  }
   
  .swiper-slide video{
      display: block;
      width: 95%;
      height: 80%;
      object-fit: cover;
      border-radius: 2vw;
  }
   .swiper-button-prev{
      position: absolute;
      left: 0;
      color: whitesmoke;
      /* background-color: #864AF9; */
      border: 2px solid whitesmoke;
      font-size: 1vw;
      padding: 4vw 4vw;
      border-radius: 50%;
   }
   .swiper-button-next{
      position: absolute;
      right: 0;
      color: whitesmoke;
      /* background-color: #864AF9; */
      border: 2px solid whitesmoke;
      font-size: 1vw;
      padding: 4vw 4vw;
      border-radius: 50%;
   }
   .ending button{
      padding: 2vw 2vw;
      gap: 1rem;
      width: 200px;
      height: 45px;
   }
   .price .ro1 h1{
      font-size: 4.5vw;
   }
   .contact-info .text h1{
      font-size: 10vw;
      line-height: 8vw;
   }
   .contact-info .ctn-button a .contact{
      gap: 2rem;
      height: 9vw;
      width: 50vw;
   }
   .contact-info .ctn-button a .contact h1{
      font-size: 3vw;
   }
   .footer{
      height: auto;
  }
  .footer h1{
      font-size: 9vw;
  }
  .footer h3{
      font-size: 3.5vw;
  }
  .footer .gmail .gmailtext h2{
      font-size: 4vw;
  }
  .footer .gmail .gmailtext {
      width: 60%;
  }
  .footer .row .footercol{
      width: 100%;
      gap: 4rem;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  .footer .row .footercol h4{
      font-size: 4vw;
  }
  .footer .row .footercol .col .underline{
      top: 6vw;
  }
   
  .footer .socialIcons a{
      width: 50px;
      height: 50px;
  }
}

@media all and (min-width: 641px) and (max-width: 768px){
   .main .heading{
      height: 180px;
      gap: 0.5rem;
   }
   .main .heading h1{
      font-size: 6.5vw;
   }
   .main .heading h2{
      font-size: 4vw;
   }
   .main .story{
      height: 120px;
   }
   .main .story h1{
      font-size: 4.5vw;
      line-height: 5vw;
   }
   .main .goals{
      gap: 1rem;
   }
   .main .goals h1{
      font-size: 3vw;
   }
   .main .goals .sec1 h1{
      font-size: 1.9vw;
   }
   .main .goals .sec1 h2{
      font-size: 1.6vw;
   }
   .main .goals .sec2 h1{
      font-size: 1.9vw;
   }
   .main .goals .sec2 h2{
      font-size: 1.6vw;
   }
   .main .goals .sec3 h1{
      font-size: 1.9vw;
   }
   .main .goals .sec3 h2{
      font-size: 1.6vw;
   }
   .text h1{
      font-size: 5vw;
      letter-spacing: 0.4px;
   }
   /* ----------------------------------------------- */
   .wrapper .faq .accordion {
      height: 50px;
   }
   .wrapper .faq .accordion h1,h2{
      font-size: 3vw;
   }
   .wrapper .faq .pannel .content{
      height: auto;
      gap: 1rem;
      display: flex;
      flex-direction: column;
   }
   .wrapper .faq .pannel .content .right{
      width: 100%;
   }
   .wrapper .faq .pannel .content .right h1{
      font-size: 3vw;
   }
   .wrapper .faq .pannel .content .right p{
      font-size: 3vw;
   }
   /* ---------------------------------------------------- */
   .wrapper2 .faq2 .accordion2 {
      height: 50px;
   }
   .wrapper2 .faq2 .accordion2 h1,h2{
      font-size: 3vw;
   }
   .wrapper2 .faq2 .pannel2 .content{
      height: auto;
      gap: 1rem;
      display: flex;
      flex-direction: column;
   }
   .wrapper2 .faq2 .pannel2 .content .right{
      width: 100%;
   }
   .wrapper2 .faq2 .pannel2 .content .right h1{
      font-size: 3vw;
   }
   .wrapper2 .faq2 .pannel2 .content .right p{
      font-size: 3vw;
   }
   /* --------------------------------------- */
   .wrapper3 .faq3 .accordion3 {
      height: 50px;
   }
   .wrapper3 .faq3 .accordion3 h1,h2{
      font-size: 3vw;
   }
   .wrapper3 .faq3 .pannel3 .content{
      height: auto;
      gap: 1rem;
      display: flex;
      flex-direction: column;
   }
   .wrapper3 .faq3 .pannel3 .content .right{
      width: 100%;
   }
   .wrapper3 .faq3 .pannel3 .content .right h1{
      font-size: 3vw;
   }
   .wrapper3 .faq3 .pannel3 .content .right p{
      font-size: 3vw;
   }
   /* -------------------------------------------- */
   .wrapper4 .faq4 .accordion4 {
      height: 50px;
   }
   .wrapper4 .faq4 .accordion4 h1,h2{
      font-size: 3vw;
   }
   .wrapper4 .faq4 .pannel4 .content{
      height: auto;
      gap: 1rem;
      display: flex;
      flex-direction: column;
   }
   .wrapper4 .faq4 .pannel4 .content .right{
      width: 100%;
   }
   .wrapper4 .faq4 .pannel4 .content .right h1{
      font-size: 3vw;
   }
   .wrapper4 .faq4 .pannel4 .content .right p{
      font-size: 3vw;
   }
   /* -------------------------------------------------- */
   .text-wrapper{
      margin-top: 50px;
      height: auto;
      width: 100%;
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      padding-top: 4vw;
      padding-bottom: 1vw;
      border-bottom-left-radius: 20px;
      border-bottom-right-radius: 20px;
   }
   .text-wrapper .scroll{
      height: 15vh;
   }
   .text-wrapper .scroll h1{
      font-size: 19vw;
   }
   .text-wrapper .text h1{
      font-size: 3vw;
   }
   .swiper-slide img {
      display: block;
      width: 95%;
      height: 80%;
      object-fit: cover;
      border-radius: 2vw;
    }
   
    .swiper-slide video{
      display: block;
      width: 95%;
      height: 80%;
      object-fit: cover;
      border-radius: 2vw;
    }
   .swiper-button-prev{
      position: absolute;
      left: 0;
      color: whitesmoke;
      /* background-color: #864AF9; */
      border: 2px solid whitesmoke;
      font-size: 1vw;
      padding: 4vw 4vw;
      border-radius: 50%;
   }
   .swiper-button-next{
      position: absolute;
      right: 0;
      color: whitesmoke;
      /* background-color: #864AF9; */
      border: 2px solid whitesmoke;
      font-size: 1vw;
      padding: 4vw 4vw;
      border-radius: 50%;
   }
   .ending button{
      padding: 2vw 2vw;
      gap: 1rem;
      width: 200px;
      height: 45px;
   }
   .price .ro1 h1{
      font-size: 4.5vw;
   }
   .contact-info .text h1{
      font-size: 10vw;
      line-height: 8vw;
   }
   .contact-info .ctn-button a .contact{
      gap: 2rem;
      height: 9vw;
      width: 50vw;
   }
   .contact-info .ctn-button a .contact h1{
      font-size: 3vw;
   }
   .footer{
      height: auto;
  }
  .footer h1{
      font-size: 9vw;
  }
  .footer h3{
      font-size: 3.5vw;
  }
  .footer .gmail .gmailtext h2{
      font-size: 4vw;
  }
  .footer .gmail .gmailtext {
      width: 60%;
  }
  .footer .row .footercol{
      width: 100%;
      gap: 4rem;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  .footer .row .footercol h4{
      font-size: 4vw;
  }
  .footer .row .footercol .col .underline{
      top: 6vw;
  }
   
  .footer .socialIcons a{
      width: 60px;
      height: 60px;
  }
}

@media all and (min-width: 769px) and (max-width: 1024px){
   .main .heading{
      height: 30vw;
      gap: 0.5rem;
   }
   .main .heading h1{
      font-size: 6.5vw;
   }
   .main .heading h2{
      font-size: 2.5vw;
   }
   .main .story{
      height: 20vw;
   }
   .main .story h1{
      font-size: 4.5vw;
      line-height: 5vw;
   }
   .main .goals{
      gap: 1rem;
   }
   .main .goals h1{
      font-size: 3vw;
   }
   .main .goals .sec1 h1{
      font-size: 1.4vw;
   }
   .main .goals .sec1 h2{
      font-size: 1.2vw;
   }
   .main .goals .sec2 h1{
      font-size: 1.4vw;
   }
   .main .goals .sec2 h2{
      font-size: 1.2vw;
   }
   .main .goals .sec3 h1{
      font-size: 1.4vw;
   }
   .main .goals .sec3 h2{
      font-size: 1.2vw;
   }
   .text h1{
      font-size: 3.5vw;
      letter-spacing: 0.4px;
   }
   /* ----------------------------------------------- */
   .wrapper .faq .accordion {
      height: 7vw;
   }
   .wrapper .faq .accordion h1{
      font-size: 2vw;
   }
   .wrapper .faq .accordion h2{
      font-size: 2vw;
   }
   .wrapper .faq .pannel .content{
      height: auto;
      gap: 1rem;
      display: flex;
   }
   .wrapper .faq .pannel .content .right{
      width: 100%;
   }
   .wrapper .faq .pannel .content .right h1{
      font-size: 2vw;
   }
   .wrapper .faq .pannel .content .right p{
      font-size: 1.6vw;
   }
   /* ---------------------------------------------------- */
   .wrapper2 .faq2 .accordion2 {
      height: 7vw;
   }
   .wrapper2 .faq2 .accordion2 h1{
      font-size: 2vw;
   }
   .wrapper2 .faq2 .accordion2 h2{
      font-size: 2vw;
   }
   .wrapper2 .faq2 .pannel2 .content{
      height: auto;
      gap: 1rem;
      display: flex;
   }
   .wrapper2 .faq2 .pannel2 .content .right{
      width: 50%;
   }
   .wrapper2 .faq2 .pannel2 .content .right h1{
      font-size: 2vw;
   }
   .wrapper2 .faq2 .pannel2 .content .right p{
      font-size: 1.6vw;
   }
   .wrapper2 .faq2 .pannel2 .content .left{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 50%;
   }
   /* --------------------------------------- */
   .wrapper3 .faq3 .accordion3 {
      height: 7vw;
   }
   .wrapper3 .faq3 .accordion3 h1{
      font-size: 2vw;
   }
   .wrapper3 .faq3 .accordion3 h2{
      font-size: 2vw;
   }
   .wrapper3 .faq3 .pannel3 .content{
      height: auto;
      gap: 1rem;
      display: flex;
   }
   .wrapper3 .faq3 .pannel3 .content .right{
      width: 50%;
   }
   .wrapper3 .faq3 .pannel3 .content .right h1{
      font-size: 2vw;
   }
   .wrapper3 .faq3 .pannel3 .content .right p{
      font-size: 1.6vw;
   }
   .wrapper3 .faq3 .pannel3 .content .left{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 50%;
   }
   /* -------------------------------------------- */
   .wrapper4 .faq4 .accordion4 {
      height: 7vw;
   }
   .wrapper4 .faq4 .accordion4 h1{
      font-size: 2vw;
   }
   .wrapper4 .faq4 .accordion4 h2{
      font-size: 2vw;
   }
   .wrapper4 .faq4 .pannel4 .content{
      height: auto;
      gap: 1rem;
      display: flex;
   }
   .wrapper4 .faq4 .pannel4 .content .right{
      width: 50%;
   }
   .wrapper4 .faq4 .pannel4 .content .right h1{
      font-size: 2vw;
   }
   .wrapper4 .faq4 .pannel4 .content .right p{
      font-size: 1.6vw;
   }
   .wrapper4 .faq4 .pannel4 .content .left{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 50%;
   }
   /* -------------------------------------------------- */
   .text-wrapper{
      margin-top: 50px;
      height: auto;
      width: 100%;
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      padding-top: 4vw;
      padding-bottom: 1vw;
      border-bottom-left-radius: 20px;
      border-bottom-right-radius: 20px;
   }
   .text-wrapper .scroll{
      height: 25vh;
   }
   .text-wrapper .scroll h1{
      font-size: 19vw;
   }
   .text-wrapper .text h1{
      font-size: 3vw;
   }
   .swiper-slide img {
      display: block;
      width: 80%;
      height: 80%;
      object-fit: cover;
      border-radius: 25px;
    }
   
    .swiper-slide video{
      display: block;
      width: 80%;
      height: 80%;
      object-fit: cover;
      border-radius: 25px;
    }
   .swiper-button-prev{
      position: absolute;
      left: 0;
      color: whitesmoke;
      border: 2px solid whitesmoke;
      font-size: 1vw;
      padding: 3vw 3vw;
      border-radius: 50%;
   }
   .swiper-button-next{
      position: absolute;
      right: 0;
      color: whitesmoke;
      border: 2px solid whitesmoke;
      font-size: 1vw;
      padding: 3vw 3vw;
      border-radius: 50%;
   }
   .ending button{
      padding: 2vw 2vw;
      gap: 1rem;
      width: 27vw;
      height: 45px;
   }
   .price .ro1 h1{
      font-size: 3vw;
   }
   .contact-info .text h1{
      font-size: 10vw;
      line-height: 8vw;
   }
   .contact-info .ctn-button a .contact{
      gap: 2rem;
      height: 6vw;
      width: 30vw;
   }
   .contact-info .ctn-button a .contact h1{
      font-size: 2vw;
   }
   .footer{
      height: auto;
  }
  .footer h1{
      font-size: 9vw;
  }
  .footer h3{
      font-size: 3.5vw;
  }
  .footer .gmail .gmailtext h2{
      font-size: 4vw;
  }
  .footer .gmail .gmailtext {
      width: 60%;
  }
  .footer .row .footercol{
      width: 100%;
      gap: 4rem;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  .footer .row .footercol h4{
      font-size: 2.5vw;
  }
  .footer .row .footercol .col .underline{
      top: 3.5vw;
  }
   
  .footer .socialIcons a{
      width: 60px;
      height: 60px;
  }
}

@media all and (min-width: 1025px) and (max-width: 1280px){
   .main .heading{
      height: 30vw;
      gap: 0.5rem;
   }
   .main .heading h1{
      font-size: 6.5vw;
   }
   .main .heading h2{
      font-size: 2.5vw;
   }
   .main .story{
      height: 20vw;
   }
   .main .story h1{
      font-size: 4.5vw;
      line-height: 5vw;
   }
   .main .goals{
      gap: 1rem;
   }
   .main .goals h1{
      font-size: 3vw;
   }
   .main .goals .sec1 h1{
      font-size: 1.4vw;
   }
   .main .goals .sec1 h2{
      font-size: 1.2vw;
   }
   .main .goals .sec2 h1{
      font-size: 1.4vw;
   }
   .main .goals .sec2 h2{
      font-size: 1.2vw;
   }
   .main .goals .sec3 h1{
      font-size: 1.4vw;
   }
   .main .goals .sec3 h2{
      font-size: 1.2vw;
   }
   .text h1{
      font-size: 3.5vw;
      letter-spacing: 0.4px;
   }
   /* ----------------------------------------------- */
   .wrapper .faq .accordion {
      height: 7vw;
   }
   .wrapper .faq .accordion h1{
      font-size: 2vw;
   }
   .wrapper .faq .accordion h2{
      font-size: 2vw;
   }
   .wrapper .faq .pannel .content{
      height: auto;
      gap: 1rem;
      display: flex;
   }
   .wrapper .faq .pannel .content .right{
      width: 100%;
   }
   .wrapper .faq .pannel .content .right h1{
      font-size: 2vw;
   }
   .wrapper .faq .pannel .content .right p{
      font-size: 1.6vw;
   }
   /* ---------------------------------------------------- */
   .wrapper2 .faq2 .accordion2 {
      height: 7vw;
   }
   .wrapper2 .faq2 .accordion2 h1{
      font-size: 2vw;
   }
   .wrapper2 .faq2 .accordion2 h2{
      font-size: 2vw;
   }
   .wrapper2 .faq2 .pannel2 .content{
      height: auto;
      gap: 1rem;
      display: flex;
   }
   .wrapper2 .faq2 .pannel2 .content .right{
      width: 50%;
   }
   .wrapper2 .faq2 .pannel2 .content .right h1{
      font-size: 2vw;
   }
   .wrapper2 .faq2 .pannel2 .content .right p{
      font-size: 1.6vw;
   }
   .wrapper2 .faq2 .pannel2 .content .left{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 50%;
   }
   /* --------------------------------------- */
   .wrapper3 .faq3 .accordion3 {
      height: 7vw;
   }
   .wrapper3 .faq3 .accordion3 h1{
      font-size: 2vw;
   }
   .wrapper3 .faq3 .accordion3 h2{
      font-size: 2vw;
   }
   .wrapper3 .faq3 .pannel3 .content{
      height: auto;
      gap: 1rem;
      display: flex;
   }
   .wrapper3 .faq3 .pannel3 .content .right{
      width: 50%;
   }
   .wrapper3 .faq3 .pannel3 .content .right h1{
      font-size: 2vw;
   }
   .wrapper3 .faq3 .pannel3 .content .right p{
      font-size: 1.6vw;
   }
   .wrapper3 .faq3 .pannel3 .content .left{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 50%;
   }
   /* -------------------------------------------- */
   .wrapper4 .faq4 .accordion4 {
      height: 7vw;
   }
   .wrapper4 .faq4 .accordion4 h1{
      font-size: 2vw;
   }
   .wrapper4 .faq4 .accordion4 h2{
      font-size: 2vw;
   }
   .wrapper4 .faq4 .pannel4 .content{
      height: auto;
      gap: 1rem;
      display: flex;
   }
   .wrapper4 .faq4 .pannel4 .content .right{
      width: 50%;
   }
   .wrapper4 .faq4 .pannel4 .content .right h1{
      font-size: 2vw;
   }
   .wrapper4 .faq4 .pannel4 .content .right p{
      font-size: 1.6vw;
   }
   .wrapper4 .faq4 .pannel4 .content .left{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 50%;
   }
   /* -------------------------------------------------- */
   .text-wrapper{
      margin-top: 50px;
      height: auto;
      width: 100%;
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      padding-top: 4vw;
      padding-bottom: 1vw;
      border-bottom-left-radius: 20px;
      border-bottom-right-radius: 20px;
   }
   .text-wrapper .scroll{
      height: 25vh;
   }
   .text-wrapper .scroll h1{
      font-size: 19vw;
   }
   .text-wrapper .text h1{
      font-size: 3vw;
   }
   .swiper-slide img {
      display: block;
      width: 80%;
      height: 80%;
      object-fit: cover;
      border-radius: 25px;
    }
   
    .swiper-slide video{
      display: block;
      width: 80%;
      height: 80%;
      object-fit: cover;
      border-radius: 25px;
    }
   .swiper-button-prev{
      position: absolute;
      left: 0;
      color: whitesmoke;
      border: 2px solid whitesmoke;
      font-size: 1vw;
      padding: 3vw 3vw;
      border-radius: 50%;
   }
   .swiper-button-next{
      position: absolute;
      right: 0;
      color: whitesmoke;
      border: 2px solid whitesmoke;
      font-size: 1vw;
      padding: 3vw 3vw;
      border-radius: 50%;
   }
   .ending button{
      padding: 2vw 2vw;
      gap: 1rem;
      width: 220px;
      height: 45px;
   }
   .price .ro1 h1{
      font-size: 3vw;
   }
   .contact-info .text h1{
      font-size: 10vw;
      line-height: 8vw;
   }
   .contact-info .ctn-button a .contact{
      gap: 2rem;
      height: 4.5vw;
      width: 25vw;
   }
   .contact-info .ctn-button a .contact h1{
      font-size: 1.5vw;
   }
   .footer{
      height: auto;
  }
  .footer h1{
      font-size: 9vw;
  }
  .footer h3{
      font-size: 3.5vw;
  }
  .footer .gmail .gmailtext h2{
      font-size: 3vw;
  }
  .footer .gmail .gmailtext {
      width: 60%;
  }
  .footer .row .footercol{
      width: 100%;
      gap: 4rem;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  .footer .row .footercol h4{
      font-size: 2.5vw;
  }
  .footer .row .footercol .col .underline{
      top: 3.5vw;
  }
   
  .footer .socialIcons a{
      width: 60px;
      height: 60px;
  }
}

@media all and (min-width: 1280px) and (max-width: 1536px){
   .main .heading{
      height: 30vw;
      gap: 0.5rem;
   }
   .main .heading h1{
      font-size: 6.5vw;
   }
   .main .heading h2{
      font-size: 2.5vw;
   }
   .main .story{
      height: 20vw;
   }
   .main .story h1{
      font-size: 4.5vw;
      line-height: 5vw;
   }
   .main .goals{
      gap: 1rem;
   }
   .main .goals h1{
      font-size: 3vw;
   }
   .main .goals .sec1 h1{
      font-size: 1.4vw;
   }
   .main .goals .sec1 h2{
      font-size: 1.2vw;
   }
   .main .goals .sec2 h1{
      font-size: 1.4vw;
   }
   .main .goals .sec2 h2{
      font-size: 1.2vw;
   }
   .main .goals .sec3 h1{
      font-size: 1.4vw;
   }
   .main .goals .sec3 h2{
      font-size: 1.2vw;
   }
   .text h1{
      font-size: 3.5vw;
      letter-spacing: 0.4px;
   }
   /* ----------------------------------------------- */
   .wrapper .faq .accordion {
      height: 7vw;
   }
   .wrapper .faq .accordion h1{
      font-size: 2vw;
   }
   .wrapper .faq .accordion h2{
      font-size: 2vw;
   }
   .wrapper .faq .pannel .content{
      height: auto;
      gap: 1rem;
      display: flex;
   }
   .wrapper .faq .pannel .content .right{
      width: 100%;
   }
   .wrapper .faq .pannel .content .right h1{
      font-size: 2vw;
   }
   .wrapper .faq .pannel .content .right p{
      font-size: 1.6vw;
   }
   /* ---------------------------------------------------- */
   .wrapper2 .faq2 .accordion2 {
      height: 7vw;
   }
   .wrapper2 .faq2 .accordion2 h1{
      font-size: 2vw;
   }
   .wrapper2 .faq2 .accordion2 h2{
      font-size: 2vw;
   }
   .wrapper2 .faq2 .pannel2 .content{
      height: auto;
      gap: 1rem;
      display: flex;
   }
   .wrapper2 .faq2 .pannel2 .content .right{
      width: 50%;
   }
   .wrapper2 .faq2 .pannel2 .content .right h1{
      font-size: 2vw;
   }
   .wrapper2 .faq2 .pannel2 .content .right p{
      font-size: 1.6vw;
   }
   .wrapper2 .faq2 .pannel2 .content .left{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 50%;
   }
   /* --------------------------------------- */
   .wrapper3 .faq3 .accordion3 {
      height: 7vw;
   }
   .wrapper3 .faq3 .accordion3 h1{
      font-size: 2vw;
   }
   .wrapper3 .faq3 .accordion3 h2{
      font-size: 2vw;
   }
   .wrapper3 .faq3 .pannel3 .content{
      height: auto;
      gap: 1rem;
      display: flex;
   }
   .wrapper3 .faq3 .pannel3 .content .right{
      width: 50%;
   }
   .wrapper3 .faq3 .pannel3 .content .right h1{
      font-size: 2vw;
   }
   .wrapper3 .faq3 .pannel3 .content .right p{
      font-size: 1.6vw;
   }
   .wrapper3 .faq3 .pannel3 .content .left{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 50%;
   }
   /* -------------------------------------------- */
   .wrapper4 .faq4 .accordion4 {
      height: 7vw;
   }
   .wrapper4 .faq4 .accordion4 h1{
      font-size: 2vw;
   }
   .wrapper4 .faq4 .accordion4 h2{
      font-size: 2vw;
   }
   .wrapper4 .faq4 .pannel4 .content{
      height: auto;
      gap: 1rem;
      display: flex;
   }
   .wrapper4 .faq4 .pannel4 .content .right{
      width: 50%;
   }
   .wrapper4 .faq4 .pannel4 .content .right h1{
      font-size: 2vw;
   }
   .wrapper4 .faq4 .pannel4 .content .right p{
      font-size: 1.6vw;
   }
   .wrapper4 .faq4 .pannel4 .content .left{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 50%;
   }
   /* -------------------------------------------------- */
   .text-wrapper{
      margin-top: 50px;
      height: auto;
      width: 100%;
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      padding-top: 4vw;
      padding-bottom: 1vw;
      border-bottom-left-radius: 20px;
      border-bottom-right-radius: 20px;
   }
   .text-wrapper .scroll{
      height: 20vh;
   }
   .text-wrapper .scroll h1{
      font-size: 12vw;
   }
   .text-wrapper .text h1{
      font-size: 1.5vw;
   }
   .swiper-slide img {
      display: block;
      width: 80%;
      height: 80%;
      object-fit: cover;
      border-radius: 25px;
    }
   
    .swiper-slide video{
      display: block;
      width: 80%;
      height: 80%;
      object-fit: cover;
      border-radius: 25px;
    }
   .swiper-button-prev{
      position: absolute;
      left: 0;
      color: whitesmoke;
      border: 2px solid whitesmoke;
      font-size: 1vw;
      padding: 3vw 3vw;
      border-radius: 50%;
   }
   .swiper-button-next{
      position: absolute;
      right: 0;
      color: whitesmoke;
      border: 2px solid whitesmoke;
      font-size: 1vw;
      padding: 3vw 3vw;
      border-radius: 50%;
   }
   .ending button{
      padding: 2vw 2vw;
      gap: 1rem;
      width: 220px;
      height: 45px;
   }
   .price .ro1 h1{
      font-size: 3vw;
   }
   .contact-info .text h1{
      font-size: 10vw;
      line-height: 8vw;
   }
   .contact-info .ctn-button a .contact{
      gap: 2rem;
      height: 4.5vw;
      width: 25vw;
   }
   .contact-info .ctn-button a .contact h1{
      font-size: 1.5vw;
   }
   .footer{
      height: auto;
  }
  .footer h1{
      font-size: 9vw;
  }
  .footer h3{
      font-size: 3.5vw;
  }
  .footer .gmail .gmailtext h2{
      font-size: 3vw;
  }
  .footer .gmail .gmailtext {
      width: 60%;
  }
  .footer .row .footercol{
      width: 100%;
      gap: 4rem;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  .footer .row .footercol h4{
      font-size: 2.5vw;
  }
  .footer .row .footercol .col .underline{
      top: 3.5vw;
  }
   
  .footer .socialIcons a{
      width: 60px;
      height: 60px;
  }
}