@font-face { font-family: Founders; src: url('/assets/fonts/fg_bold.otf'); }
@font-face { font-family: FoundersNarrow; src: url('/assets/fonts/fg_bold_narrow.otf'); }
@font-face { font-family: FoundersRegular; src: url('/assets/fonts/fg_regular.otf'); }
@font-face { font-family: FoundersLight; src: url('/assets/fonts/fg_light_narrow.otf'); }
@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: 'FoundersRegular', serif;
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth;
}
html {
    scroll-behavior: smooth;
}
:root{
    --black:#0e0419;
    --text:#272727;
    --white:#fff;
    --bgGrey:#fcfcfc;
    --s4:#6ba4ff;
    --brand_strategy:#685aab;
    --visual_design:#aa882d;
    --websites_apps:#65aea6;
    --marketting:#ad493b;
    --grd:linear-gradient(to bottom right, #362f76 0%, #352e55 50%, #241b31 100%)
    
}
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;}
.flex.jcs{justify-content: flex-start;}
body{width: 100vw;overflow-x:hidden;background: var(--black);max-width:100vw;overflow-x:hidden}
button{outline:none;border: none;cursor: pointer;transition: 300ms ease;}

/* navbar styles */
.menuBg, .menuToggle{display:none}
.nav{position:relative;background:none;padding:1.5rem 0;transition:300ms ease;z-index:3;width: 85%;margin:0 auto}
/* .nav.fix{animation:slideDown 500ms ease;position:fixed;top:0;left:0;width:100vw;height:auto;background:rgba(0,0,0,.2);padding:5px 30px;box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);z-index:10} */
.navLogo{height:2.2rem;}
.navUl{display: flex;align-items: center}
.navLi{color:var(--white);font-size:125%; padding: 15px 25px; transition: 300ms ease; position:relative;cursor:pointer;font-family: FoundersLight;text-transform: uppercase;opacity: .8;}
.navLi:hover{opacity: 1;}
.nav_lwbtn{margin-left: 10px;height: 5vh;width: auto;cursor: pointer;}
.navLi:not(:has(button))::after{content:'';background:var(--black);position:absolute;bottom:4px;left:50%;height: 2px;width:10%;border-radius: 20px;transform: translateX(-50%) scaleX(0);transition: 300ms ease;}
.navLi:hover::after{transform: translateX(-50%) scaleX(.7);}
.navLi.active::after{content:'';background:var(--black);position:absolute;bottom:0;left:50%;height: 10px;width:10px;border-radius: 50%;transform: translateX(-50%);}
.nav_btn{color:var(--white);background:var(--black);font-size: 95%;padding:.7rem 1.5rem; border-radius: 2rem;transition:500ms ease;border:1px solid var(--black)}
.nav_btn:hover{color:var(--black);background:none}
.navLia{color:var(--black)}
.navLi:has(.nav_btn){padding-right: 0;}
.crtv_btn { display: flex; align-items: center; justify-content: center; color: var(--white); text-transform: uppercase; gap: 0.5rem; position: relative; }
.crtv_btn p { font-family: FoundersNarrow; font-size: 150%; line-height: 150%; }
nav .crtv_btn p { font-size: 125%}

.btn_icon_wrap { height: 100%; aspect-ratio: 1 / 1; display: grid; place-items: center; border: 1px solid var(--white); border-radius: 50%; transition: 200ms ease; position: absolute; top: 50%; left: -18%; transform: translate(-50%, -50%); background: var(--grd); z-index: 1; pointer-events: none; }
.btn_txt_wrap { border: 1px solid var(--white); padding: 0 1.5rem; border-radius: 2rem; background: var(--grd); position: relative; z-index: 2; transition: left 300ms ease; left: 0; }
.crtv_btn:hover .btn_icon_wrap { left: 83%; transform: translate(-50%, -50%) rotate(355deg); }
.crtv_btn:hover .btn_txt_wrap { left: -35%; }

  

/* bottom sheet styles */
.bottom_sheet_bg{position: fixed;z-index:10000;height:100vh;width:100vw;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(--black);border-radius: 15px;box-shadow: 0 4px 10px #ffffff45; width:100%;max-width: 700px;overflow: hidden; animation: bs_slide 300ms ease;padding:20px 0}
.bs_container.pf{max-width:900px}
.bs_head{padding:20px 15px;position:relative;border-bottom: var(--border);text-align: center;}
.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(--white)}
.bsfgrid{display:grid;grid-template-columns: 1fr 1fr;grid-gap: 0 10px;}
.inp_btn2{background:var(--brand_strategy);color:var(--white);margin: -20px 0 40px 0;display: block;width:100%}
.inp_btn2:hover{filter:brightness(120%)}

/* success page styles */
.sbody{position:fixed; top:0;left:0;height:100vh;width:100vw;overflow:hidden;z-index:10;display:flex;align-items: center;justify-content: center;color:var(--white);flex-direction: column;}
.sbody::before, .sbody::after{position:absolute;top:50%;left:50%;content:'';background:var(--black);transform: translate(-50%,-50%); transform-origin: center; animation:zoom 800ms ease-in-out;border-radius: 50%;}
.sbody::before{height:300vh;width:300vh;z-index:12}
.sbody::after{height:305vh;width:315vh;z-index:11;background:var(--pink)}
.sbldiv{background:var(--white);height:100px;width:100px; border-radius: 50%; animation: smallBall 1500ms ease;position:relative;z-index:13;transform-origin: left; overflow: hidden;border:3px solid var(--white)}
.sbldImg{height:3rem;animation:sbImg 1500ms ease;position:absolute;}
.sbldiv::before{content:'';position:absolute;left:0;top:0;background:var(--white);animation:slideSDbefore 4000ms ease;z-index:15;transform-origin: left;height:100%;width:100%;border-radius: 50%}
.sbldiv::after{content:'';position:absolute;right:0;bottom:0;background:#5858584a;animation:slideSDbefore1 3000ms ease;z-index:14;transform-origin: right;height:100%;width:100%;border-radius: 50%}
.checkmark{color:var(--black);z-index:15;font-size:100px;animation:cmAn 4000ms ease-in}
.sbld{z-index:15;animation:slidejksd 4000ms ease;text-align: center; width:70%;max-width:350px;margin-top:20px;font-size: 90%;}
.sbld .intro_head{font-size: 400%;margin-top: -35px;margin-bottom: -15px;color:var(--white);font-weight: 700;font-family: 'Poppins',sans-serif;}
.sbld .intro_p{margin-bottom: 10px;}
.gbhlink{color:var(--white);padding:5px 20px;border: 2px solid var(--white);border-radius: 20px;font-size:85%;font-weight: 500;background:var(--black);transition:300ms ease}
.gbhlink:hover{background:var(--white);color:var(--black)}

/* services */
section.sec{margin:50px 0}
.services{position:relative}
.service{display: flex;align-items: center;justify-content: center;position: sticky;color:var(--white)}
.service_container{display: grid;grid-template-columns: 70% 1fr;width: 85%;padding:2.5rem 0}
.service_img_wrap{display: flex;align-items: center;justify-content: center}
.service_img{width: 100%;object-fit: contain;}
.service.brand_strategy{background:linear-gradient(to bottom right,var(--brand_strategy)0%,var(--black)100%);top:0}
.service.visual_design{background:linear-gradient(to bottom right,var(--visual_design)0%,var(--black)100%);top:20%}
.service.websites_apps{background:linear-gradient(to bottom right,var(--websites_apps)0%,var(--black)100%);top:40%}
.service.marketting{background:linear-gradient(to bottom right,var(--marketting)0%,var(--black)100%);top:60%}
.service_name{font-family: FoundersNarrow, sans-serif;text-transform: uppercase;font-size: 400%;letter-spacing: 1.5px;line-height: 75%;margin-bottom: 1rem;}
.service_desc{font-family: Poppins, sans-serif;width: 70%;font-size: 100%;font-weight: 350; letter-spacing: -0.01rem;}
.service_tags{display: flex;flex-wrap: wrap;gap:8px;width: 70%;margin-top: 2rem;}
.service_tag{display: inline-block;text-transform: uppercase;font-family: FoundersLight;padding:4px 8px;border-radius: 30px;font-size: 80%; letter-spacing: 0.08rem; backdrop-filter: blue(5px);border:1px solid}
.service.brand_strategy .service_tag{background:linear-gradient(to bottom right,rgba(131, 119, 201, 0.5) 0%, rgba(255,255,255,.25)60%, rgba(94, 85, 119,.5) 100%);border-color:#8a7fca;}
.service.visual_design .service_tag{background:linear-gradient(to bottom right,rgba(201, 165, 56, 0.5) 0%, rgba(255,255,255,.25)60%, rgba(115, 98, 66,.5) 100%);border-color:#c0a34c;}
.service.websites_apps .service_tag{background:linear-gradient(to bottom right,rgba(122, 200, 193, 0.5) 0%, rgba(255,255,255,.25)60%, rgba(93, 119, 120,.5) 100%);border-color:#82c3be;}
.service.marketting .service_tag{background:linear-gradient(to bottom right,rgba(204, 102, 85, 0.5) 0%, rgba(255,255,255,.25)60%, rgba(120, 81, 78,.5) 100%);border-color:#c86d5f;}
.section_top{width: 85%;display: flex;align-items: center;justify-content: space-between;color:var(--white);margin:0 auto;padding:16px 0}
.section_head{font-size: 200%;text-transform: uppercase;}

/* our work section */
.our_work_container{display: grid;grid-template-columns: 1fr 1fr;gap:80px;width: 85%;margin:0 auto;margin-bottom: 80px;}
.our_work_card, .ow_img_wrap{position:relative;overflow: hidden;color:var(--white)}
.ow_img_wrap{height: 60vh;border-radius: 20px;}
.w_page .ow_img_wrap{height: 50vh;}
.ow_img{transition:300ms ease;width: 100%;object-fit: cover;height: 100%;}
.our_work_card:hover .ow_img{transform: scale(1.05);}
.ow_detail{padding:20px 0}
.ow_name{font-family: FoundersNarrow;text-transform: uppercase;font-size: 300%;letter-spacing: 2px;line-height: 75%;margin-bottom: 1rem;}
.our_work_card .service_desc{text-transform: uppercase;width: 100%;opacity: .8;font-size: 110%;letter-spacing: -0.01rem;}
.our_work_card, .wwu_div{animation:bs_slide2 linear;animation-timeline: view();animation-range: entry 0% cover 40%;display: block;}
.va_img{height: 7vh;transition:300ms ease}
.va_img:hover{transform: scale(.98);}
.vp_elem{position:absolute;top:0;left:0;height: 100%;width: 100%;z-index:1;display: flex;align-items: center;justify-content: center;background:rgba(0, 0, 0, 0.2);backdrop-filter: blur(5px);pointer-events: none;opacity: 0;transition: 300ms ease;}
.vp_ball{height: 10vw;border-radius: 50%;border:1px solid white;display: flex;align-items: center;justify-content: center;flex-direction: column;color:var(--white);aspect-ratio: 1/1;transition: 300ms ease;transform: scale(0);opacity: 0;}
.vp_ball ion-icon{font-size: 250%;transition: 300ms ease;opacity: 0;transition-delay: 200ms;transform: translateY(20px) rotate(0deg);}
.vp_text{font-family: FoundersLight;text-transform: uppercase;font-size: 180%;}
.our_work_card:hover .vp_elem{opacity: 1;}
.our_work_card:hover .vp_ball{opacity: 1;transform: scale(1);}
.our_work_card:hover .vp_ball ion-icon{opacity: 1;transform: translateY(0) rotate(45deg)}


/* footer styles */
footer{background:linear-gradient(to bottom, #1c0f20 0%, #271b2f 100%);display: flex;align-items: center;justify-content: center;flex-direction: column;padding:80px 0}
.ftr_grid{display: flex;width: 85%;margin-bottom: 80px;align-items: flex-start;justify-content: space-between;}
.fgs_head{text-transform: uppercase;font-family: Founders;font-size: 150%;color:var(--white);position:relative;margin-bottom: 20px;display: inline-block;}
.fgs_head::after{content:'';position:absolute;bottom:-5px;background:var(--white);width: 30%;height: 2px;left:0}
.ftr_lia{font-size: 120%;color:var(--white);line-height: 160%;opacity: .6;transition: 300ms ease;}
.ftr_lia:hover{opacity: 1;}
.ftr_logo{height: 10vh;width: auto;}

/* clients logo styles */
.clients{position:relative;overflow: hidden;height: 50vh;margin:-3vh 0}
.scroll{display: flex;position:absolute;width: 120vw;transform: translate(-50%,-50%);top:50%;left:50%;overflow: hidden;-webkit-mask-image:linear-gradient(90deg,)transparent,#fff 20%, #fff 80%,transparent;background:none;padding:40px 0;}
.clients_img_wrap{white-space: nowrap;animation:scroll var(--time) linear infinite}
.client_logo_wrap{display: flex;align-items: center;justify-content: center;border:1px solid #6a5eaf;border-radius: 16px;padding:20px 40px;display: inline-flex;margin-right: 20px;}
.client_logo_wrap img{height: 90px;width: auto}
.clients_img_wrap.scnd{animation: scroll2 var(--time) linear infinite;animation-delay: calc(var(--time)/-2);}
.clients:nth-of-type(2) .scroll{transform: translate(-50%,-50%) rotate(-5deg)}

/* work with us styles */
.wwu_grid{display: grid;grid-template-columns: 1fr 1fr;grid-gap: 20px;width: 85%;margin:80px auto;color:var(--white)}
.wwu_div{padding:40px;border-radius: 20px;border:2px solid #2c2479;position:relative;display: flex;align-items: center;justify-content: flex-start;height: 35vh;}
.wwu_div.lft{background:linear-gradient(to top left, #1e152a 0%, #2c2479 100%);}
.wwu_txt{font-size: 150%;line-height: 120%;letter-spacing: -0.09rem;}
.wwu_head{font-family: FoundersLight;font-size: 300%;margin-top: -5%;text-align: center;}
.wwu_div.rgt{justify-content: center;flex-direction: column;}
.ltstwkimg{position:absolute;bottom:10%;right:5%;transition:300ms ease;height: 6vh;cursor: pointer;}
.ltstwkimg:hover{transform: scale(.98)}

section.abt{height:100vh;display: flex;align-items: center;text-align: center;justify-content: center;position:relative}
.abt_txt{font-size: 200%;color:gray;width: 84%;transition: color 1s linear;font-weight: 200;line-height: 145%;overflow-wrap:break-word; letter-spacing: -0.01rem;}


/* all work page styles */

.ow_page_top{color:var(--white);display: flex;text-align: center;justify-content: center;flex-direction: column;align-items: center;gap:20px}
.work_cat_ul{display: flex;align-items: center;justify-content: center;gap:1.5rem;margin-bottom: 4rem;}
.work_cat{font-family: FoundersNarrow;text-transform: uppercase;font-size: 150%;letter-spacing: 1px;padding:.4rem 1.5rem;border-radius: 2rem;border:1px solid var(--white);transition:300ms ease;cursor: pointer;position:relative;overflow: hidden}
.work_cat.active{color:#beb0ff;pointer-events: none;}
.work_cat:hover{background:rgba(255,255,255,.1)}
.work_cat.active{border-color:#beb0ff;background:linear-gradient(to bottom right,rgba(131, 119, 201, 0.3) 0%, rgba(255,255,255,.2)60%, rgba(94, 85, 119,.3) 100%);}
/* .work_cat::before{content:'';height: 110%;width: 110%;position:absolute;top:0;left:0} */


/* work detail page styles */
.cs_page{display: grid; grid-template-columns: 60% 1fr;width: 85%;text-align: left;align-items: start;grid-gap: 50px;color:var(--white)}
.csp_p{font-size: 120%;width: 90%;}
.csp_head{color:var(--brand_strategy);font-size: 280%;margin-top: 50px;font-weight: 700;}
.csp_ul{list-style: circle;margin-left: 20px;}
/* .cs_page .ow_cs:hover{color:var(--lblue)} */
.csp_li_p{font-size: 120%;margin-bottom: 5px;max-width: 90%;}
.csp_head.csph1{color:var(--white);font-size: 150%;font-weight: 500;margin-top: 30px;margin-bottom: 5px;margin-left: 5px;width: 80%;}
.csp_right{display: grid;grid-template-columns: 1fr 1fr;grid-gap: 15px;}

.csp_img:nth-of-type(1), .csp_img:nth-of-type(4), .csp_img:nth-of-type(7), .csp_img:nth-of-type(10){grid-column: span 2}
.csp_img{width: 100%;object-fit: cover;height: 100%;transition: 300ms ease;aspect-ratio: 4/3; border-radius: 0.5rem;}

.rw.ocs_wrap{display: grid;grid-template-columns: repeat(3,1fr);width: 82%;margin:20px auto;grid-gap: 20px;}
.ocs_wrap .ow_top{height: 60%;border-radius: 0;}
.ocs_wrap .ow_cs{font-size: 140%;width:90%;}
.ocs_wrap .our_work{border-radius: 30px;overflow: hidden}
.ocs_wrap .ow_detail{padding:20px 5px 0 5px}
.ocs_wrap .ow_tag_li{padding:8px 16px}


.tm_img{height: 100%;object-fit: contain;}

.testimonials{margin-top:50px;width:100%;padding:20px 0}
.testimonial{padding:30px;margin-right:20px;border-radius: 40px;position:relative;color:var(--white)}
.testimonial:nth-of-type(1){margin-left:6%}
.testimonial::after{content:'';position:absolute;top:50%;left:50%;background:linear-gradient(to bottom, var(--blue)0%, var(--pink)100%);height:101%;width:100.5%;transition: 500ms ease;z-index: -2;border-radius: 20px;transform: translate(-50%, -50%);}
.testimonial::before{content:'';position:absolute;top:0;left:0;background:#beb0ff1f;height:100%;width:100%;transition: 500ms ease;z-index: -1;border-radius: 18px}
.client_img{background:var(--white);height:50px;aspect-ratio: 1;border-radius: 50%;margin-right:15px}
.tm_top{display: flex;align-items: center;margin-bottom: 20px;}
.tm_top div{color:var(--white);align-items: flex-start;text-align: left}
.client_name{font-weight: 600}
.tm_top .service_p{font-size:70%}
.intro {position: relative;overflow: hidden;height:85dvh; height: 85vh}
.intro_div {position: relative;width: 100%;height: 100%;}
.trail_img {position: absolute;top: 0;left: 0;width: 200px; height: auto;opacity: 0;pointer-events: none;}
.mob_slides{display: none;}

.intro_content{position:relative;z-index:9999;height: 100%;display: flex;color:var(--white);align-items: flex-end;justify-content: center;pointer-events:none}
.ic_div_wrap{width: 85%;display: flex;align-items: flex-end;justify-content: space-between;margin-bottom: 6vh}
.ic_p{font-size: 180%;width: 50%;line-height: 120%;letter-spacing: -0.05rem;}
.ic_p.p1{font-size: 140%;width: 100%; letter-spacing: -0.05rem;}
.ic_div{width: 68%}
.ic_div.rgt{display: flex;align-items: flex-end;justify-content: flex-end;width: 30%;}
.ic_slide_txt{font-size: 1000%;text-transform: uppercase;font-family: FoundersNarrow;line-height: 80%;margin-top: -16px;position:relative;z-index: 100;}
.ic_slide_txt.brand_strategy{background: linear-gradient(90deg, var(--brand_strategy), #685aab20);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
.ic_slide_txt.visual_design{background: linear-gradient(90deg, var(--visual_design), #685aab20);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
.ic_slide_txt.marketting{background: linear-gradient(90deg, var(--marketting), #685aab20);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
.ic_slide_txt.websites_apps{background: linear-gradient(90deg, var(--websites_apps), #685aab20);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
.ic_txt_{width: 100%;opacity:0;transition:900ms ease;z-index:50;position:relative}
.ic_txt_.swiper-slide-prev{transition-delay: -50ms;}
.ic_txt_.swiper-slide-active{opacity: 1;}
.scrl{position:absolute;bottom: 5%;left:50%;height: 20px;width: auto;object-fit: contain;animation:smoothbounceball 2s alternate infinite}
.ic_txt_slides{position:relative;height: 18vh;padding-top: 2vh}


.inp_grp{position:relative;width:100%;margin-bottom: 20px;background:#0e0419}
.inp_box{background:rgba(255,255,255,.08);padding:20px 25px;outline:none;border:none;color:var(--white);font-size: 105%;width:100%}
.inp_label{color:var(--white);font-size:105%;position:absolute;top:45%;left:25px;transition:300ms ease;transform: translateY(-50%);font-weight: 500;pointer-events: none;opacity: .5;}
.contact_form{width: 100%}
.c_form{width: 80%;}
.inp_box:focus + .inp_label, .inp_box:not(:placeholder-shown) + .inp_label{font-size: 60%;top:1%;background:var(--brand_strategy);z-index:2;color:var(--white);font-weight: 500;opacity: 1;padding:2px 8px;left:25px;border:2px solid var(--brand_strategy);border-radius: 10px;}
.c_form button{margin-top: 5px;padding:15px 35px;font-size: 130%;font-weight: 500;letter-spacing: 1px;transition:300ms ease}
.c_form button:disabled{opacity: .5;pointer-events: none;}


.ow_cs_a{font-size: 130%;margin:20px 0}
.ow_cs_a ion-icon{transform: rotate(45deg);margin-bottom: -5px;}
.our_work_card .ow_cs_a{display: none;}

#loading-screen{position:fixed;height:100vh;width:100vw;top:0;left:0;background:#0e0419;display:flex;align-items:center;justify-content:center;z-index:11000;flex-direction:column;color:white;text-align:center;}
#loading-screen img{height:10vh;width:auto;}
#loading-screen p{font-weight:bolder;text-transform:uppercase}

.word-wrapper{white-space:nowrap;}

@keyframes scroll {
    0%{transform: translateX(184.6%);}
    100%{transform: translateX(-184.6%);}
}
@keyframes scroll2 {
    0%{transform: translateX(84.6%);}
    100%{transform: translateX(-284.6%);}
}

@keyframes scroll3 {
    0%{transform: translateX(222%);}
    100%{transform: translateX(-222%);}
}
@keyframes scroll4 {
    0%{transform: translateX(122%);}
    100%{transform: translateX(-322%);}
}

@media (max-width:900px){
    ::-webkit-scrollbar {height: 0px;width: 0px;}
    nav{max-width: 100vw;overflow-x: hidden;}
    .menuToggle{display:block;background:none;outline:none;border:none;color:var(--black);cursor:pointer;font-size:180%;margin-top: -5px;}
    .menuBg{position: fixed;top:0;left:0;height:100vh;width:100vw;background:rgba(0,0,0,.1);z-index:7;backdrop-filter: blur(2px)}
    .navUl{position: fixed;top:0;left:-100vw;height:100vh;width:70vw;background:var(--white);flex-direction: column;z-index:10;padding-top: 70px;transition:200ms ease}
    .navLogo{height: 2.5rem;}
    .navLia::after{display: none;}
    .navLi:not(:last-child){border-bottom: 1px solid rgba(180, 180, 180, 0.1)}
    .navLi{display: block;width: 90%;}
    .navLia:hover{color:var(--black)}
    .navLia{display:block;margin-left:20px;color:var(--white);width: 100%;}
    .navLia.active::after{display:block;left:-5px;top:50%;transform: translateY(-50%);background: var(--black);}
    .nav.show .menuBg{display:block}
    .nav.show .navUl{left:0}
    nav .btn{margin-top: 15px;margin-left: 15%}
    .nav{padding:15px 0;width: 90%}
    .bsfgrid, .i_abt_grid, .ftr, .int_grid, section.contact .int_grid, .pr_intro{grid-template-columns: 1fr;}
    .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: 20px; max-height: 90vh; overflow-y:scroll}
    .service_container, .our_work_container, .wwu_grid{grid-template-columns: 1fr}

    .service_container{width: 90%;grid-gap: 40px;padding:2rem 0}
    .service_img_wrap{order: 1;}
    .service_detail{order:2}
    .service_name{font-size: 300%;margin-bottom: 1rem;}
    .service_desc{font-size: 95%;width: 100%;}
    .service_tags{margin-top: 1rem;gap:6px}
    .service_tag{padding:4px 12px;font-size: 85%;border-width: 1px;}
    .section_top{justify-content: center;text-align:center;padding:24px 0}
    .section_head{font-size: 150%;}
    section.sec{margin:36px 0}
    section.abt{height:50vh;}
    
    
    .our_work_container{width: 90%;gap:32px;margin-bottom: 20px;}
    .ow_img_wrap, .w_page .ow_img_wrap{height: 40vh;}
    .ow_name{font-size: 240%}
    .our_work_card .service_desc{font-size: 80%;}
    .our_work_card .ow_cs_a{display: block;font-size: 120%;margin:10px 0}
    .ow_cs_a ion-icon{margin-bottom: -3px;}
    .va_img{height: 5vh;}

    .vp_ball{height: 30vw}
    .vp_text{font-size: 140%;}
    .vp_ball ion-icon{font-size: 180%;}

    .ftr_grid{flex-direction: column;margin-bottom: 40px;width: 90%;}
    .ftr_logo{width: 90vw;height: auto;}
    .ftr_grid_sec:not(:nth-of-type(1)) .fgs_head{margin-top: 40px;}
    footer{padding:40px 0;}

    .client_logo_wrap img{height: 80px}
    .client_logo_wrap{padding:10px 20px;margin-right: 20px;}
    .service.brand_strategy, .service.visual_design, .service.websites_apps, .service.marketting{top:0}
    .clients{height: 30vh;margin:0}
    .clients_img_wrap{animation: scroll3 var(--time) linear infinite}
    .clients_img_wrap.scnd{animation: scroll4 var(--time) linear infinite;animation-delay: calc(var(--time)/-2);}

    .wwu_div{height: auto;padding:20px;justify-content: center;text-align: center;flex-direction: column;}
    .wwu_grid{width: 90%;}
    .wwu_txt{font-size: 120%}
    .wwu_head{font-size: 250%;margin: 10px auto 5px auto;}
    .ltstwkimg{position: relative;bottom:0;right:0}

    .abt_txt{font-size: 140%;width: 80%;line-height: 135%; letter-spacing: -0.04rem;}

    .work_cat_ul{width: 90vw;overflow-x: scroll;display: block;white-space: nowrap;padding:20px 0;margin-bottom: 10px;margin-top: -30px;}
    .work_cat{display: inline-block;font-size: 100%;padding:3px 16px;border-width: 2px;margin-right: 6px;}

    .cs_page{grid-template-columns: 1fr;width: 100%;}
    .csp_right{order:1;display: flex;flex-wrap: nowrap;overflow-x: scroll;margin-top: -40px;grid-gap: 12px;overflow-y: hidden;height: 300px;scroll-snap-type: x mandatory; padding: 36px; border-radius: 0;}
    .csp_left{order:2;width: 90%;margin:0 auto}
    .csp_img{flex:0 0 100%;border-radius: 0;transform: skew(0);height: 100%;max-height: 100%;scroll-snap-align: start;}
    .csp_right:hover .csp_img{transform: skew(0deg);}

    .csp_p{font-size: 110%;width: 100%;}
    .csp_head{font-size: 180%;margin-top: 30px;margin-bottom: 5px;font-weight: 800;}
    .csp_li_p{font-size: 100%;max-width: 100%;}
    .csp_head.csph1{font-size: 110%;margin-top: 5px;margin-left: 0px;width: 100%;font-weight: 600;}
    .csp_ul{margin-left: 16px}
    .csp_ul li{margin-bottom: 10px;}
    .rw.ocs_wrap{grid-template-columns: 1fr;width: 90%;}
    .csp_head.csph1{font-size: 140%;}

    .testimonial{margin-right:0;padding:30px 20px}
    .client_name{font-weight: 600;font-size: 100%;line-height: 1rem;margin-bottom: 2px;}
    .tm_top .service_p{font-size:60%}

    .ic_div_wrap{width: 90%;margin-bottom: 6vh;flex-direction: column;text-align: left;}
    .ic_p{font-size: 140%;width: 80%;line-height: 120%;}
    .ic_p.p1{font-size: 110%;width: 100%;}
    .ic_div{width: 100%;}
    .ic_div.rgt{align-items: flex-start;justify-content: flex-start;width: 100%;}
    .ic_slide_txt{font-size: 450%;line-height: 100%;margin-top: -5px;}
    .scrl{position:absolute;bottom:6%;left:50%;height: 14px}
    .ic_txt_slides{position:relative;height: 11vh;padding-top: 0;}
    .trail{display: none;}
    .mob_slides{display: block;margin: 8% auto;}
    .ms_img{width: 80%;margin:0 auto;height: auto;background:var(--black)}
    .intro_content{height: auto}

    .crtv_btn p { font-size: 100%; line-height: 150%; }
    .btn_txt_wrap { padding: 0 1rem;}
    nav .crtv_btn p {font-size: 130%;}
    nav .crtv_btn{left:0}

}
@keyframes rotate {
    0%{transform: rotate(0deg);}
    50%{transform: rotate(360deg);}
    100%{transform: rotate(0deg);}
}
@keyframes slideDown {
    0%{top:-100px}
    100%{top:0}
}
@keyframes slideUp {
    0%{bottom:-100px}
    100%{bottom:0}
}
@keyframes bs_slide {
    0%{opacity:0;margin-bottom: -150px;}
    100%{opacity:1;margin-bottom: 0;}
}
@keyframes bs_slide2 {
    0%{opacity:0;transform: translateY(100px);}
    100%{opacity:1;transform: translateY(0);}
}
@keyframes bs_slide1 {
    0%{margin-bottom: -100vh;}
    100%{margin-bottom: 0;}
}
@keyframes smoothbounceball{ 
    0% { transform:translate(-50%,-50%) scale(.9); filter: brightness(80%);} 
    100% { transform: translate(-50%,-50%) scale(1); filter: brightness(120%);} 
} 
@keyframes zoom {
    0%{transform: translate(-50%,-50%) scale(0);}
    100%{transform: translate(-50%,-50%) scale(1);}
}
@keyframes grow {
    0%{transform: translateY(-50%) scale(0); opacity:0;}
    100%{transform: translateY(-50%) scale(1);opacity: 1;}
}
@keyframes smallBall {
    0%{margin-left:0;transform: scale(0);opacity: 0;}
    50%{margin-left:-50px;transform: scale(.8); width:180px;border-radius: 50px;opacity: 1;}
    100%{margin-left:0;width:100px;}
}
@keyframes sbImg {
    0%{opacity: 0; right:-100px}
    50%{opacity: 1; right:-100px}
    100%{opacity: 1; right:11px}
}
@keyframes cmAn {
    0%{opacity: 0; transform:scale(0)}
    60%{opacity: 0; transform:scale(0)}
    70%{opacity: 1; transform:scale(1)}
    100%{opacity: 1; transform:scale(1)}
}
@keyframes slideSDbefore {
    0%{transform: scale(0);left:-50px}
    50%{transform: scale(0);}
    100%{transform: scale(2);left:0}
}
@keyframes slideSDbefore1 {
    0%{transform: scale(0);right:-50px;bottom:-50px}
    50%{transform: scale(0);bottom:0}
    100%{transform: scale(2);right:0;bottom:0}
}
@keyframes slidejksd {
    0%{opacity:0;margin-bottom: -200px;}
    80%{opacity:0;margin-bottom: -200px;}
    100%{opacity:1;margin-bottom: 0;}
}