@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap');
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Poppins', serif;
    -webkit-tap-highlight-color: transparent;
}
:root{
    --black:#111315;
    --input_bg:#c0c0ff1c;
    --bgGrey: #ffffff;
    --white: #ffffff;
    --border: 1px solid #f3f3f3;
    --border1: 1px solid #dadada;
    --boxShadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
    --txt:#4d4d4d;
}
body.noscroll{overflow-y: hidden;}
ul{list-style: none;}
a{text-decoration: none;}
.flex{display:flex;align-items: center}
.flex.jcc{justify-content: center;}
.flex.jcsb{justify-content: space-between;}
.flex.fdc{flex-direction: column;}
body{width: 100vw;overflow-x:hidden;background: var(--bgGrey);max-width:100vw;overflow-x:hidden}
button{cursor: pointer;outline: none;}
.menuBg, .menuToggle{display:none}
.nav{position:fixed;padding:30px;transition:300ms ease;z-index:10;width: 100%;height: auto;top:0;left: 0
    /* ;mix-blend-mode: exclusion; */
}
.nav.fix{padding:10px;background: #05050654}
.nav.rel{background: #111315d9;padding:15px;position: relative;}
.navLogo{height:60px}
.navUl{display: flex}
.navLi{position: relative;}
.navLia{color:var(--white);font-size:75%;padding: 10px 20px; transition: 300ms ease; position:relative;font-weight: 300;cursor: pointer;text-transform: capitalize;letter-spacing: .3px;font-weight: 300;}
.navLi::before, .navLi::after{content:'';position:absolute;transition:300ms ease-in-out; background: white; height: 1px;width:100%}
.navLi::before{bottom:-2px;transform-origin: right;transform: scaleX(0);right:0;}
.navLi::after{bottom:-6px;transform-origin: left;transform: scaleX(0);left: 0;transition-delay: 200ms;}
.navLi:hover::before, .navLi:hover::after{transform: scaleX(1);}

section{min-height: 100vh;position: relative;max-width: 100vw;overflow: hidden;padding:70px 0}
.intro_video{position: absolute;top: 0;left: 0;z-index: -1;height: 100%;width: 100%;object-fit: cover}
.intro::after{content: '';position: absolute;top:0;left: 0;height: 100%;width: 100%;background: var(--black);opacity: .1;z-index: 1;}
.intro{color: var(--white);width: 100vw;overflow: hidden;height: 100vh;}
.intro_div{position: relative;z-index: 2;text-align: center;}
.star{height: 50px;aspect-ratio: 1;}
.intro_head{font-size: 800%;font-weight: 800;text-transform: uppercase;line-height: 75%;}
.intro_head span{font-weight: 400;display: block;font-size: 58%;letter-spacing: 2.1rem;text-align: center;margin-left: 1.9rem;}
.intro_sub_div{font-size: 120%;}
.intro_p{margin:10px 20px}
.scroll_icon_outer{position: absolute;left: 50%;height: 80px;width: auto;bottom: 10%;z-index: 2;animation: rotate 140000ms ease infinite;}
.scroll_icon{position: absolute;left: 50%;height: 40px;width: auto;bottom: 13%;z-index: 2;transform: translateX(-50%);}
.about_p{width: 80%;font-size: 130%;line-height: 2.5rem;padding:150px 0; font-weight: 300;text-align: center;}
.about_doodle{position: absolute;height: 120px;}
.about_doodle.d1{top:20px;right: 30px;}
.about_doodle.d2{bottom:-20px;left: 10px;}
.about_doodle.d3{top:20px;left: 10px}
.about_doodle.d4{bottom:20px;right: 10px;}
.d3, .d4{height: 200px;}
.about{overflow: hidden;}
.services{background: var(--black);color:var(--white)}
.section_head{font-weight: 700;font-size: 400%;text-transform: uppercase;margin-bottom: 20px;margin-top: 100px;}
.services_card_wrap, .team_wrap{margin:100px auto;width: 80%;}
.services_card_wrap{width: 90%;padding:2rem}
.service_card{transition:300ms ease;text-align: center;padding: 30px 10px;border-radius: 20px;}
.service_img{height: 150px;}
.service_name{font-weight: 600;margin:20px 0;font-size: 130%;text-transform: uppercase;}
.service_p{width: 90%;font-weight: 400;font-size: 90%;}
/* .service_card:hover{background: rgba(255, 255, 255, 0.044)} */
.swiper-wrapper{margin-bottom: 30px;}
.swiper-pagination-bullet {height: 10px;width:10px;background: none;border:2px solid white;cursor:pointer}
.swiper-pagination-bullet-active {background: white}
.scn_btn{position:absolute;top:28%;color:var(--white);transition:500ms ease;aspect-ratio: 1/1;display: grid;place-items: center;font-size:200%;height: 60px;width:60px;border-radius: 50%;z-index:4;border:1px solid transparent;background:rgba(255, 255, 255, 0.088)}
.scn_btn.prv{left:0%}
.scn_btn.nxt{right:0%}
.scn_btn:hover{background:rgba(255, 255, 255, 0.144)}
.team_wrap{display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 10vh 2vw;}
.member{position: relative;overflow: hidden;display: flex;align-items: flex-end;justify-content: center;height: 60vh;}
.member_img{object-fit: cover;width: 85%;height: auto;position: relative;z-index: 1;}
/* .member::before{content: '';position:absolute;bottom: 0;left: 0;z-index: 2;height: 60%;width: 100%;background:linear-gradient(to top, var(--black) 0%, rgba(0,0,0,0) 100%)} */
/* .member::after{content: '';position:absolute;bottom: 0;left: 50%;z-index: 0;width: 80%;aspect-ratio:1;background:rgba(255, 255, 255, 0.1);transform: translateX(-50%);border-top-left-radius: 40%;border-top-right-radius: 60%;} */
.member_name{position: absolute;left: 50%;bottom:5px;font-weight: 800;color:var(--white);text-transform: uppercase;letter-spacing: 3px;font-size: 280%;z-index: 3;transform: translateX(-50%);width: 100%;text-align: center;}
.project_img{height: 40vh;width: auto;object-fit: contain;margin-bottom: 50px;}
.clients_wrap{width: 80%;display: grid;grid-template-columns: repeat(5,1fr);grid-gap: 20px;margin-bottom: 50px;place-items: center;}
.client_logo{height: 100%;width: 100%;object-fit: cover;border-radius: 20px;}
.client{transition:300ms ease}
.client:hover{transform: scale(1.01);}

.footer_li{position: relative;text-transform: uppercase;color: var(--black);border-bottom: 1px solid var(--black);}
.footer_li::before{content:'';width:120%;position: absolute;bottom:0;right:0;transform: translate(5%,10%) scaleX(0);background: var(--black);height: 110%;transition:300ms ease-in-out;z-index:3;transform-origin: right;}
.footer_li::after{content: attr(title);position: absolute;bottom:-100%;right:0;color: var(--white);transition:500ms ease-in-out;z-index:4;opacity:0;pointer-events: none;text-transform: uppercase;}
.footer_li:hover::before{transform: translate(5%,10%) scaleX(1)}
.footer_li:hover::after{bottom:-2px;opacity: 1;}
.ftr_ul{display: flex;flex-direction: column;text-align: right;align-items: right;justify-content: center;}
.ftr_li{margin:5px 0}
.footer_div{display: flex;align-items: flex-start;justify-content: space-between;width:80%;margin:80px 0}
.footer_logo{height: 130px;margin-bottom: 15px;}
.footer_p{max-width: 400px;margin-bottom: 15px;font-size: 80%;color: var(--txt);}

.btn{position: relative;text-transform: uppercase;transition: 300ms ease;font-size: 90%;letter-spacing: 3px;min-width: 250px;font-weight: 600;z-index: 2;display: flex;align-items: center;justify-content: center;border: none;}

.btn::before{position: absolute;height: 98%;width: 98%;content: '';right: -5px;bottom:-5px;z-index: -100}
.btn ion-icon{transform: rotate(45deg);font-size: 140%}
.btn.pri::before{background: var(--bgGrey);}
.btn.sec::before{background: var(--black);}

.btn .main, .btn .span{display: flex;align-items: center;justify-content: space-around;width:100%;height: 100%;padding:10px 22px}
.btn.pri .main, .btn.sec .span{background: var(--bgGrey);color:var(--black);border:2px solid var(--black);transition: 300ms ease;}
.btn.pri .span, .btn.sec .main{background: var(--black);color:var(--bgGrey);border:2px solid var(--bgGrey);transition: 300ms ease;}
.btn .span{transition:300ms ease;transform:scaleY(0);position:absolute;top:0;left: 0;height: 100%;width: 100%;z-index: 4;transform-origin: bottom;}
.btn:hover .span{transform:scaleY(1)}
.span ion-icon{transform: scale(0) rotate(45deg);transform-origin: bottom;transition: 200ms ease;margin-top: -5px;margin-right: 8px;}
.btn:hover .span ion-icon{transform:scale(1) rotate(45deg);transition-delay: 100ms;}

.nl_form{background: var(--black);padding:5px;display: flex;align-items: center;justify-content: space-between;min-width: 450px;margin-bottom: 15px;}
.nl_input{outline: none;background: none;width: 70%;border:none;display: block;height: 100%;color:var(--white);padding:10px;border-right: 1px solid var(--bgGrey);}
.nl_btn{width: 28%;text-transform: uppercase;font-weight: 600;padding: 8px 0;letter-spacing: 1px;}
.nl_btn ion-icon{font-size: 140%;transform: rotate(45deg);margin-bottom: -4px;}

.projects_wrap{display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 20px;margin:30px auto;width: 80%;margin-bottom: 100px;}
.project_video{width: 100%;object-fit: cover;height: 100%;transition: 500ms ease;}
.project.span2{grid-column: span 2;}
.project{height: 60vh;overflow: hidden;}

.section.page{border-bottom:1px solid #11131536;padding-top:0;}
.project:hover .project_video{transform: scale(1.03);filter: brightness(110%);}

.project_category_ul{display: flex;flex-wrap: wrap;align-items: center;justify-content: center;max-width: 80%;}
.pc_li{margin-right:10px}
.pcli_btn{border:2px solid var(--black);background:none;outline:none;transition:300ms ease;padding:10px 22px;text-transform: uppercase;font-weight: 600;}
.pcli_btn:hover{background: #11131523;}
.pcli_btn.active{background: var(--black);color:var(--white)}
.pcli_btn.active:hover{pointer-events: none;}

#s3g_cursor{height:18vh;width:18vh;border-radius: 50%;position:fixed;opacity:0;z-index:0;display: grid;place-items: center;border:2px solid var(--main);pointer-events: none;aspect-ratio: 1/1;background:rgba(255, 255, 255, 0.1);backdrop-filter: blur(5px)}
.s3g_c_point{display: flex;align-items: center;justify-content: center;flex-direction: column;color:var(--black);border-radius: 50%;aspect-ratio: 1/1;}
.s3g_c_point ion-icon{font-size: 350%;}
.s3g_c_point span{font-size: 70%;margin-bottom: -10%;}

.bottom_sheet_bg{position: fixed;z-index:40;height:100vh;width:100vw;height:100dvh;width:100dvw;background:rgba(0,0,0,.2);top:0;left:0;backdrop-filter: blur(2px);}
.bottom_sheet{height:100%;width:100%;position:relative}
.bs_container{background: var(--white);border-radius: 15px;box-shadow: var(--boxShadow); width:100%;max-width: 60vw;overflow: hidden; animation: bs_slide 300ms ease}
.bs_head{padding:20px 15px;position:relative;background:var(--bgGrey);border-bottom: var(--border);text-align: center;}
.project_name{font-weight: 600;font-size: 200%;}
.bs_close_btn{background:none;outline:none;border:none;cursor: pointer; position:absolute;top:15px;right:15px;font-size: 150%;transition: 300ms ease; color:grey;}
.bs_close_btn:hover{color:var(--main)}
.yt_video_cotainer{width:94%;border-radius: 1rem;overflow: hidden;aspect-ratio: 16/9;margin:0 auto 2rem auto}
.ytVideo{width: 100%;height: 100%;}

@media (max-width:738px){
    ::-webkit-scrollbar {height: 0px;width: 0px;}

    .bs_container{position:absolute;left:0;bottom:0;animation:bs_slide1 300ms ease;border-radius: 0; border-top-right-radius: 15px; border-top-left-radius: 15px; padding-bottom: 40px; max-height: 90vh; overflow-y:scroll;max-width: 100vw;padding-bottom: .8rem;}
    .project_name{font-size: 120%;}
    .yt_video_cotainer{margin-bottom: 0}
    #s3g_cursor{background: none;display: none;}
    .menuToggle{display:block;background:none;outline:none;border:none;color:var(--white);cursor:pointer;font-size:180%;margin-bottom: -2px;}
    .menuBg{position: fixed;top:0;left:0;height:100vh;width:100vw;background:rgba(0,0,0,.1);z-index:4;backdrop-filter: blur(1px);}
    .navUl{position: fixed;top:0;left:-100vw;height:100vh;width:80vw;background:var(--black);flex-direction: column;z-index:5;padding-top: 70px;transition:200ms ease}
    .navLia::after{display: none;}
    .navLi:not(:last-child){border-bottom: 1px solid rgba(255, 255, 255, 0.062)}
    .navLia{display:block;margin-left:20px;font-weight: 400;padding:20px}
    .nav.show .menuBg{display:block}
    .nav.show .navUl{left:0}
    .nav{padding:15px}
    .intro_sub_div{flex-direction: column;}
    .intro_head{font-size: 300%;line-height: 120%;}
    .intro_head span{display: block;font-size: 65%;margin-top: -20px;margin-bottom: 20px;letter-spacing: .6rem;margin-left: .8rem;}
    .navLi::before, .navLi::after{display: none;}
    .intro_p{font-size: 80%;}
    .star{height: 30px}
    .scroll_icon_outer{height: 40px;bottom: 5%}
    .scroll_icon{height: 20px;width: auto;bottom: 6%}
    .about_p{font-size:90%;line-height: 160%;}
    .about_doodle{position: absolute;height: 90px;}
    .about_doodle.d1{top:20px;right: 10px;}
    .about_doodle.d2{bottom:-20px;left: 10px;}
    .section_head{font-size: 250%;margin-top: 30px;}
    .team_wrap{grid-template-columns: 1fr 1fr;margin-top: 5vh;}
    .member_img{width: 100%}
    .member{height: 25vh}
    .team_wrap{grid-gap: 40px 20px;}
    .member_name{font-size: 100%;text-align: center;background: var(--white);width: 120%;color:var(--black);letter-spacing: 1px;left:50%}
    /* .member::after{width: 90%} */
    .project_img{height: 30vh}
    .clients_wrap{grid-template-columns: repeat(3,1fr);grid-gap: 5px 10px;}
    .footer_div{flex-direction: column;}
    .ftr_ul{flex-direction: row;justify-content: flex-start;}
    .ftr_li{margin-right:15px}
    .footer_li{letter-spacing: 1px;font-size: 80%;}
    .nl_form{min-width: 85vw;margin-top: 15px;}
    .nl_input{width: 63%;}
    .nl_btn{width: 35%;font-size: 70%;padding:10px 0}
    .footer_div{width:85%;}
    section{padding:40px 0;min-height: 70vh;}
    .projects_wrap{grid-gap: 10px;grid-template-columns: 1fr;}
    .project.span2{grid-column: span 1;}
    .project{border-radius: 5px;overflow: hidden;height: auto;}
    .about_doodle.d3{top:20px;left: 0px}
    .d3, .d4{height: 100px;}
    section:nth-of-type(3){padding-bottom: 150px;}
    .project_category_ul{flex-wrap: nowrap;overflow-x: scroll;justify-content: start;}
    .pcli_btn{white-space: nowrap;padding:6px 14px}
    .services_card_wrap{width: 100%;padding:0 2rem;margin-top: 5%;}
    .scn_btn{font-size:130%;height: 50px;width:50px}
    .scn_btn.prv{left:3%}
    .scn_btn.nxt{right:3%}
}
@keyframes rotate {
    0%{transform: translateX(-50%) rotate(0deg);}
    50%{transform: translateX(-50%) rotate(360deg);}
    100%{transform: translateX(-50%) rotate(0deg);}
}
@keyframes bs_slide {
    0%{opacity:0;margin-bottom: -150px;}
    100%{opacity:1;margin-bottom: 0;}
}
@keyframes bs_slide1 {
    0%{margin-bottom: -100vh;}
    100%{margin-bottom: 0;}
}