:root{--poppin:"Poppins",sans-serif;--roboto:"Roboto",sans-serif;--pc:#000037;--boxshadow:rgba(0,0,0,0.35) 0px 5px 15px} body{font-family:'Roboto',sans-serif;float:left;width:100%;color:#000;font-weight:300;background-attachment:fixed;background-size:40%;padding-right:0 !important;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility} .modal-open{padding-right:0 !important;overflow:hidden} ::-moz-selection{color:#000;background:#d7c07f} ::selection{color:#000;background:#d7c07f} .btn{box-shadow:none;outline:none} button{box-shadow:none;outline:none} :focus{outline:0} h1,h2,h3,h4,h5,h6{color:#000} p{color:#000;line-height:30px;font-size:16px;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} a{text-decoration:none} a:hover{color:#0e2c18} ul li,ul li a,ol li,ol li a{color:#161616;font-size:14px;font-weight:300;line-height:26px;text-decoration:none} a:hover,a:focus{text-decoration:none;outline:none} :focus{outline:none} img{max-width:100%;height:auto} .home{height:100vh;position:relative;background-color:#f5f5f5} .video-container{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;background-image:url('../media/bg-optimized.webp');background-size:cover;background-position:center;background-repeat:no-repeat;will-change:transform;contain:layout style paint} .home video{position:absolute;width:100%;height:100%;object-fit:cover;z-index:1;display:block;will-change:opacity;transform:translateZ(0);backface-visibility:hidden} video::-webkit-media-controls{display:none !important} video::-webkit-media-controls-panel{display:none !important} video::-webkit-media-controls-play-button{display:none !important} video::-webkit-media-controls-start-playback-button{display:none !important} .video-loading.hidden{display:none !important;opacity:0 !important;visibility:hidden !important;pointer-events:none !important} @media (min-width:992px){.home video{display:block !important;opacity:1} } .video-fallback{position:absolute;width:100%;height:100%;object-fit:cover;z-index:0;display:block} .video-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;display:none} .video-loading .spinner{width:40px;height:40px;border:4px solid rgba(255,255,255,0.3);border-top:4px solid #fff;border-radius:50%;animation:spin 1s linear infinite} @keyframes spin{0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} } .home-content{position:relative;padding-top:150px;color:#fff;text-align:center} .home p{font-size:clamp(25px,4vw,40px);margin-top:10px} .home-content button{display:block;font-size:clamp(14px,1.5vw,18px);border:1px solid #f1f1f1;border-radius:5px;background:transparent;color:#fff;margin:50px auto 0;padding:12px 20px;cursor:pointer} header{position:fixed;width:100%;z-index:99;background-image:linear-gradient(to bottom ,#000 ,transparent)} header .nav-link{font-size:12px;font-weight:700;text-transform:uppercase;line-height:1em;letter-spacing:0.04em;color:#fff} .navbar-nav .nav-link.active,.navbar-nav .nav-link.show{color:#fff} .logo{width:300px} .nav-link:focus,.nav-link:hover{color:#fff} .ab-exp h2{font-size:120px;font-weight:900;padding:2rem;border:5px solid grey;border-radius:5px} .ab-exp{display:flex;align-items:center;gap:1.5rem;margin:3rem 0} .ab-exp h3{font-size:30px;font-weight:400;text-transform:capitalize;color:#000;line-height:40px} .py-40{padding:4rem 0} figure{height:400px;position:relative;overflow:hidden;margin:0} .pt-40{padding-top:4rem} figure img{position:absolute;width:100%;height:100%;object-fit:cover;transform:scale(1.0);transition:all 400ms ease-in-out} figure:hover img{transform:scale(1.1)} figcaption{z-index:9;position:relative;padding:2rem;height:100%} p.ind-ind{margin-bottom:0;font-size:15px;letter-spacing:1px;color:#fff} p.ind-num{color:#f3f3f3;font-size:100px;bottom:25px;right:25px;opacity:0.5;position:absolute;font-weight:800} figcaption h3{color:#fff;display:inline;word-wrap:initial;letter-spacing:1px;font-size:42px} figure:after{content:'';position:absolute;width:100%;height:100%;background:rgba(0,0,0,0);background-image:linear-gradient(180deg,rgba(0,0,0,.8),#0000,rgba(0,0,0,.7)) !important;top:0;left:0;z-index:0} .scrolled{animation:fade .5s forwards} @keyframes fade{from{background:transparent} to{background:var(--pc)} } .w-box h3{font-size:27px;color:#fff;text-transform:capitalize;font-weight:500} .w-box p{color:#fff;line-height:27px;font-weight:200} .working-process{background:rgb(17 17 17)} .title{font-size:45px;font-weight:500;color:var(--pc);text-transform:capitalize} .service-list{padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin:3rem 0;list-style-position:inside} .service-list li{font-size:20px;font-weight:400} .cta{display:flex;padding:11px 33px;text-decoration:none;font-size:20px;color:white;background:var(--pc);transition:1s;box-shadow:6px 6px 0 black;transform:skewX(-15deg);border:none;cursor:pointer} .my-40{margin:4rem 0} .cta:focus{outline:none} .cta:hover{transition:0.5s;box-shadow:10px 10px 0 gray} .cta .second{transition:0.5s;margin-right:0px} .cta:hover .second{transition:0.5s;margin-right:45px} .span{transform:skewX(15deg)} .second{width:20px;margin-left:30px;position:relative;top:12%} .one{transition:0.4s;transform:translateX(-60%)} .two{transition:0.5s;transform:translateX(-30%)} .cta:hover .three{animation:color_anim 1s infinite 0.2s} .cta:hover .one{transform:translateX(0%);animation:color_anim 1s infinite 0.6s} .cta:hover .two{transform:translateX(0%);animation:color_anim 1s infinite 0.4s} @keyframes color_anim{0%{fill:white} 50%{fill:gray} 100%{fill:white} } .w-box span{display:block;color:#fff;font-size:50px;font-weight:900;opacity:0.4} .w-box{text-align:center} .testimonials video{width:100%} .testimonials p{font-size:14px;line-height:25px;text-align:center;font-style:italic} .faq-section{margin:auto;background:#fff} .faq-item{border-bottom:1px solid #ddd;padding:15px 0} .faq-question{font-weight:400;font-size:16px;cursor:pointer;position:relative} .faq-question::after{content:"+";position:absolute;right:0;font-size:18px;transition:transform 0.3s ease} .faq-item.active .faq-question::after{content:"−"} .faq-answer{display:none;margin-top:10px;color:#444} .transform{background:url(../media/uae_map.jpg)right/cover} .faq-section{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem} .scroller{height:500px} .black{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100vh;-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center} .text-wrap{position:relative;overflow:hidden;width:450px;height:80vh} .panel-text{position:absolute;left:0%;top:0%;right:0%;bottom:0%;z-index:1;width:100%;height:100%;text-align:center;transform:translateY(100%);opacity:0} .p-wrap{position:relative;overflow:hidden;width:100vw;max-width:100vw;height:100vh} .block{position:absolute;left:0%;top:100px;right:0%;bottom:0%;z-index:1;width:100%;height:100%;background-image:url("https://assets.codepen.io/16327/portrait-pattern-1.jpg");background-position:50% 50%;background-size:cover;background-repeat:no-repeat} .block.two{background-image:url("https://assets.codepen.io/16327/portrait-pattern-2.jpg")} .block.three{background-image:url("../media/before-view.webp")} .block.four{background-image:url("../media/after-view.webp")} .main-container{width:auto;height:500px;position:relative;overflow:hidden;background-attachment:fixed;background-position:center;background-size:cover;background-image:url(../media/bg-optimized.webp)} .horizontal-coordinate{position:relative;z-index:100;top:50px;left:50px;color:#fff;font-size:22px;font-weight:bold} .extra-long-container{width:7000px;height:100%;position:relative;background:#fff;mix-blend-mode:screen} .img{position:absolute;z-index:3;top:50%;left:500px;transform:translate(0,-50%);font-size:400px;text-transform:uppercase;font-weight:900;font-family:"Nata Sans",sans-serif} .sub-ban h1{position:absolute;top:50%;left:50%;transform:translate(-50% ,-50%);z-index:9;font-size:90px;font-family:"Nata Sans",sans-serif;color:#fff;text-transform:uppercase;font-weight:900} .sub-ban{height:500px} .p-img img{width:100%;object-fit:cover;aspect-ratio:4/2;border-radius:7px 7px 0 0} .proj-box h3{font-size:24px;font-weight:700;color:var(--pc);margin:1rem 0} .proj-box h4{font-size:17px;color:gray;font-weight:400} .line-clamp{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden} .proj-box{background:#fff;border-radius:7px} .p-cont{padding:0 15px 10px} .proj-box p{font-size:14px;line-height:25px} .detial-banner{height:100vh;position:relative;z-index:1} .proj-content{display:flex;justify-content:flex-end;flex-direction:column} .proj-content h2{font-size:60px;font-weight:900;color:#fff;text-transform:capitalize} .proj-content h3{font-size:37px;font-weight:400;color:#fff} .proj-content ul li h4{font-size:18px;font-weight:900;color:#fff} .proj-content ul{list-style:none;padding:0;margin-top:2rem;display:flex;gap:5rem} .proj-content ul li{padding-left:1rem;border-left:4px solid var(--pc)} .detial-banner::before{background-image:linear-gradient(to top ,#000 ,transparent);height:400px;position:absolute;left:0;bottom:0;content:'';width:100%;z-index:-1} .c-left h2{font-size:35px;color:var(--pc);border-bottom:1px solid var(--pc);padding-bottom:15px} .c-left ul{list-style-type:none;padding:0;margin-top:3rem} .c-left ul li{margin:1.5rem 0;font-size:20px;font-weight:500} .socials i{font-size:30px;margin-right:1rem;color:var(--pc)} .inp-grp input,.inp-grp textarea{width:100%;outline:none;border:none;font-size:15px} .inp-grp{padding:1rem;border-radius:7px;border:1px solid #cdcd} footer{background:#000;padding:4rem 0 1.5rem;z-index:999999;position:relative} #eapps-instagram-feed-1{margin-bottom:-60px} footer p{color:#fff;margin:0;font-weight:300} .project-image img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:3px} .project-image{margin-top:3rem} .overlay{position:absolute;background:rgba(0,0,0,0.6);color:#fff;padding:5px 10px;border-radius:6px;font-size:14px;pointer-events:none;inset:0;display:flex ;align-items:center;justify-content:center;font-size:23px;text-transform:uppercase;font-weight:500} .proj-detial-area div[class*='col'] a{display:block;position:relative} .f-logo{width:340px;margin-bottom:10px} footer h2{color:#fff;font-size:20px;text-transform:capitalize;font-weight:500;margin-bottom:1rem} .f-links{list-style:none;padding:0} .f-links li a{color:#fff;font-size:16px;font-weight:200} .f-links li{margin:8px 0} .f-links svg{margin-right:13px} .f-bottom{background:gray;padding:10px 0} .about-img{position:sticky;top:150px} .f-bottom p{margin:0;font-size:15px;text-align:center} .whats-float{position:fixed;transform:translate(135px,0px);top:40%;right:0;width:180px;overflow:hidden;background-color:#25d366;color:#FFF;border-radius:4px 0 0 4px;z-index:999999;transition:all 0.5s ease-in-out;vertical-align:middle } .whats-float a span{color:white;font-size:15px;padding-top:8px;padding-bottom:10px;position:absolute;line-height:16px;font-weight:bolder} .whats-float i{font-size:30px;margin-right:10px;color:white;line-height:30px;padding:10px;transform:rotate(0deg);transition:all 0.5s ease-in-out;text-align:center} .whats-float:hover{color:#FFFFFF;transform:translate(0px,0px)} .whats-float:hover i{transform:rotate(360deg)}