@charset "utf-8"; /* CSS Document */ // : Use a unique and descriptive class name // : Use a value from 100 to 800 .sora- { font-family: "Sora", sans-serif; font-optical-sizing: auto; font-weight: ; font-style: normal; } @media (min-width: 1400px) and (max-width: 2560px) { .container, .container-fluid { max-width: 1280px !important; }} body{font-family: "Sora", sans-serif; } h1,h2,h3,h4,h5,h6{ font-weight: 700;} p, li,a { font-weight: normal; color: #A3A3A3; font-size:15px;} a{ text-decoration: none; transition:1s;} a:hover{ color:#0f3a8a;} ul { padding: 0; margin: 0;} ul li{ padding: 0; margin: 0; list-style: none;} section{ padding: 50px 40px;} @media (max-width: 996px) { section{ padding:50px 0;}} nav button i{ font-size: 35px; } header{ padding:3px 40px 3px 40px; -webkit-box-shadow: 0px 3px 7px -1px rgba(0,0,0,0.36);-moz-box-shadow: 0px 3px 7px -1px rgba(0,0,0,0.36);box-shadow: 0px 3px 7px -1px rgba(0,0,0,0.36);} @media (max-width: 996px) { header{ padding:0;}} .navbar-btn-call-now { background: linear-gradient(to bottom, rgba(0,183,234,1) 0%,rgba(238,93,0,1) 0%,rgba(253,119,0,1) 100%); position: relative;z-index: 10; display: inline-block; text-decoration: none; color:#fff; border-radius:100px; margin-right:10px; transition:1s; font-weight:bold;} .navbar-btn-call-now:after {background: linear-gradient(to bottom, rgba(253,119,0,1) 0%,rgba(238,93,0,1) 100%); content: ''; display: block; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; width: 100%; z-index: -10; transition: opacity 0.5s;border-radius: 100px;} .navbar-btn-call-now:hover:after { opacity: 1;} .navbar-btn-whatsapp { background: linear-gradient(to bottom, rgba(0,183,234,1) 0%,rgba(34,108,27,1) 0%,rgba(43,174,32,1) 100%); position: relative;z-index: 10; display: inline-block; text-decoration: none; color:#fff; border-radius:100px; margin-right:10px; transition:1s; font-weight:bold;} .navbar-btn-whatsapp:after { background: linear-gradient(to bottom, rgba(43,174,32,1) 0%,rgba(34,108,27,1) 100%); content: ''; display: block; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; width: 100%; z-index: -10; transition: opacity 0.5s; border-radius: 100px;} .navbar-btn-whatsapp:hover:after { opacity: 1;} .navbar-btn-whatsapp:hover,.navbar-btn-call-now:hover, .navbar-btn-whatsapp:focus,.navbar-btn-call-now:focus{ color:#fff;} @media (max-width: 996px) { .navbar-btn-call-now, .navbar-btn-whatsapp{ margin-bottom:10px; position:inherit;} .dropdown-item{ text-align:center;} .navbar-btn-call-now:after,.navbar-btn-whatsapp:after { height:0;} } .nav-link i{ font-size:18px;} .navbar-nav form ul li .nav-link { color: #151515; padding: 5px 0 0 5px; width: 2.2rem;} .navbar-nav form ul li .nav-link:hover { color: #0f3a8a;} .navbar-nav form ul li{ padding:0;} .navbar-nav form{ margin-left:5px;} .navbar-expand-lg .navbar-nav form{ margin-top:2px;} .clearHeader {background:#fff;position:fixed;top:0;left:0;width:100%;z-index:999;-webkit-transition: 1s;transition: .3s ease-in-out;}.darkHeader {z-index:1040;background: rgba(255, 255, 255, 0.68);border-radius: 0;box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);backdrop-filter: blur(7.7px);-webkit-backdrop-filter: blur(7.7px);border-bottom: 1px solid rgba(255, 255, 255, 0.87); /* From https://css.glass */background: rgba(255, 255, 255, 0.68);border-radius: 0;box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);backdrop-filter: blur(7.7px);-webkit-backdrop-filter: blur(7.7px);border-bottom: 1px solid rgba(255, 255, 255, 0.87); position:fixed;top:0;left:0;width:100%;z-index:9999;-webkit-transition: 1s;transition: .3s ease-in-out;}.darkHeader .navbar {padding: .5rem 0rem;} .header-style h2{ font-size: 70px; color: #2f2f2f; text-transform: uppercase; } .header-style h3{ font-size:45px;} @media (max-width: 576px) {.header-style h2{font-size: 50px;} .navbar-brand img {width: 170px;}} @media (max-width: 400px) {.header-style h2{font-size: 35px;}} .header-style span{ color: #0f3a8a;} .header-style h4{ color: #A3A3A3; font-size: 15px; text-transform: uppercase;} .about-icon i{ font-size: 25px; color: #0f3a8a;} .about-icon span{ font-size: 15px; font-weight: normal; color:#43474B;} .about-icon h3{ font-size: 45px;} .about-us-bg { background-image: url(../img/about-us-bg.webp); background-position: top; background-size: contain; z-index: 999; position: relative; display: block; margin-top: -200px; padding-top: 200px; background-repeat: repeat-x;} @media (max-width: 1200px) {.about-us-bg {margin-top: -125px; padding-top: 150px;}} @media (max-width: 400px) {.about-us-bg {margin-top: -125px; padding-top: 100px;}} .about-us-content ul{ display:flex;} .about-icon ul li{ display: inline-block; margin-right:5px;} .about-icon ul li:nth-child(1){ margin-top:5px;} .about-icon ul li:nth-child(2){ font-size:25px; width:50px;} .about-icon ul li:nth-child(3) sup{ font-size:35px;} .about-icon ul li:nth-child(4){ margin-top:20px; } .about-icon ul li sup{ font-size:25px;} .about-icon ul li h2{ font-size:40px; color:#000000;} @media (max-width: 400px) {.about-icon ul li h2{ font-size:35px;} .about-icon ul li:nth-child(2){ width:45px;}} .border-class{border-right:1px solid #CBCBCB;} @media (max-width: 996px) {.border-class{ border-right:0;} .about-us-content-mt-0 { margin-top:0;}} @media (max-width: 1200px) { .about-us-content{ margin-top:3rem;} .about-us-content-mt-1{margin-top:1rem;}} .about-us { position:relative; padding-right:7%;} .about-us-12 { position: relative; background-image: url(../img/about-us-inner-12.png); padding: 300px 0; background-size: cover; background-position: center center; background-repeat: no-repeat; border-radius: 25px;} .about-us-container { position: absolute; width: 33%; top: 7%;right: 3%;} .about-us-12 h2{ font-size:17px; color:#D9F5FF; text-transform:uppercase;} .about-us-12 p { color: #2F6374; font-size: 16px; line-height: 23px; font-weight: 300;} .about-us-tag-img { position: absolute; width: 25%;left: 0;right: 0;margin: 0 auto; bottom: 13%;} .about-us-tag-img img{ width:100%;} @media (max-width: 768px) {.about-us-tag-img { width: 54%; bottom: 15%; } .about-us-container {position:absolute;width: 38%; top: 12%; right: 7%;}} @media (max-width: 500px) {.about-us-container { position: absolute; width: 84%; left: 0; right: 0; margin: 0 auto; top: 20%; text-align: center; background: rgba(255,255,255,0.65); padding: 21px; border-radius: 23px; backdrop-filter: blur(10px); border: 2px solid #fff;} .about-us-12 h2 { color: #FF5303; } } @media (max-width: 1200px) {.about-us {padding-right:0;}} .about-us-content p{ color:#43474B; } .about-us .main-img{ border-radius:7px; } .about-us-12 .main-img-12{ width:100%;} .about-us .img-round { position: absolute; right: 12%; top: -13%; animation: mymove 15s infinite; width:30%;} .about-us-12 .img-round-12 { position: absolute; left: 17%; top: -11%; animation: mymove 15s infinite; width: 11%;} @keyframes mymove { 100% {transform: rotate(360deg);}} /*@media (min-width: 765px) and (max-width: 1200px) {.about-us img{ margin-top:3rem}.about-us .img-round { top:-5%;}}*/ @media (max-width: 1200px) {.about-us-12 .img-round-12 { width:25%; }} @media (max-width: 500px) {.about-us-12 .img-round-12 { width: 125px; top: -9%;} } /* ---------- slider ------*/ .btn{display:inline-block;padding:13px 20px;color:#fff;text-decoration:none;position:relative;background:0 0;border:1px solid #e1e1e1;font:12px/1.2 Oswald,sans-serif;letter-spacing:.4em;text-align:center;text-indent:2px;text-transform:uppercase;transition:color .1s linear 50ms} .btn::before{content:"";display:block;position:absolute;top:50%;left:0;width:100%;height:1px;background:#e1e1e1;z-index:1;opacity:0;transition:height .2s,top .2s,opacity 0s linear .2s} .btn::after{transition:border .1s linear 50ms} .btn .btn-inner{position:relative;z-index:2} .slideshow .pagination,.slideshow .slide,.slideshow .slide .image-container,.slideshow .slide-content,.slideshow .slides,.slideshow .slideshow-inner{position:absolute;left:0;width:100%} .btn:hover{color:#373737;transition:color .1s linear} .btn:hover::before{top:0;height:100%;opacity:1;transition:height .2s,top .2s,opacity linear} .btn:hover::after{border-color:#373737;transition:border .1s linear} .slideshow{overflow:hidden;position:relative;width:100%;height:115vh;z-index:1; padding:0;} @media (max-width: 996px) {.slideshow{ height:75vh;}} @media (max-width: 576px) {.slideshow{ height:60vh;}} .slideshow .slideshow-inner{top:0;height:100%} .slideshow .slides{top:0;height:100%;z-index:1} .slideshow .slide{display:none;overflow:hidden;top:0;height:100%;z-index:1;opacity:0;transition:opacity .3s} .slideshow .slide.is-active{display:block} .slideshow .slide.is-loaded{opacity:1} .slideshow .slide .caption{padding:0 100px 0 64px;} .slideshow .slide .image-container{top:0;height:100%;background-position:center;z-index:1;background-size:cover;image-rendering:optimizeQuality} .slideshow .slide .image-container::before{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5)} .slideshow .slide .image{width:100%;object-fit:cover;height:100%} .slideshow .slide-content{top:0;height:100%;z-index:2;color:#fff;text-align:left;display:flex;justify-content:left;align-items:center; text-transform:uppercase;} .slideshow .slide .title{margin:0 auto 15px;max-width:800px;font-family:Sora,sans-serif;font-size:110px;font-weight:700;line-height:105px} .slideshow .slide .text{margin:0 auto;max-width:1000px;font-size:18px;line-height:1.4} .slideshow .slide .btn{margin:15px 0 0;border-color:#fff} .slideshow .slide .btn::before{background:#fff} .slideshow .pagination{bottom:35px;height:12px;cursor:default;z-index:2;text-align:center} .slideshow .pagination .item{display:inline-block;padding:15px 5px;position:relative;width:46px;height:32px;cursor:pointer;text-indent:-999em;z-index:1} .slideshow .pagination .item+.page{margin-left:-2px} .slideshow .pagination .item::before{content:"";display:block;position:absolute;top:15px;left:5px;width:36px;height:2px;background:rgba(255,255,255,.5);transition:background .2s} .slideshow .pagination .item::after{width:0;background:#fff;z-index:2;transition:width .2s} .slideshow .pagination .item.is-active::before,.slideshow .pagination .item:hover::before{background-color:#fff} .slideshow .arrows .arrow{margin:-33px 0 0;padding:20px;position:absolute;top:50%;cursor:pointer;z-index:3} .slideshow .arrows .prev{left:30px} .slideshow .arrows .prev:hover .svg{left:-10px} .slideshow .arrows .next{right:30px}.slideshow .arrows .next:hover .svg{left:10px} .slideshow .arrows .svg{position:relative;left:0;width:14px;height:26px;fill:#fff;transition:left .2s} @media (max-width: 576px) {.slideshow .slide .caption{padding:0 50px}.slideshow .slide .title{ font-size:50px; line-height:50px;}} @media (max-width: 400px) {.slideshow .slide .title{ font-size:46px; line-height:46px;} .slideshow .slide .caption{padding:0 17px}} @media (min-width: 576px) and (max-width: 996px) {.slideshow .slide .title{ font-size:70px; line-height:70px;}} .image-popup-vertical-fit h4{ color:#000000; transition:1s; font-size:16px;} .image-popup-vertical-fit p{ color:#5E6265;} .image-popup-vertical-fit h4:hover{ color:#0f3a8a;} .image-popup-vertical-fit img{ object-fit: cover; height:472px; border-radius:10px;} @media (max-width: 996px) {.image-popup-vertical-fit img{height:350px;}} .magnific-img img {width: 100%; height: auto;} .mfp-bg,.mfp-container,.mfp-wrap{left:0;top:0;width:100%;height:100%}.mfp-container:before,.mfp-content{display:inline-block;vertical-align:middle}a.image-popup-vertical-fit{cursor:-webkit-zoom-in}.mfp-with-zoom .mfp-container,.mfp-with-zoom.mfp-bg{opacity:0;-webkit-backface-visibility:hidden;-webkit-transition:.3s ease-out;-moz-transition:.3s ease-out;-o-transition:.3s ease-out;transition:.3s ease-out}.mfp-arrow:focus,.mfp-arrow:hover,.mfp-close:focus,.mfp-close:hover,.mfp-with-zoom.mfp-ready .mfp-container{opacity:1}.mfp-with-zoom.mfp-ready.mfp-bg{opacity:.98}.mfp-with-zoom.mfp-removing .mfp-container,.mfp-with-zoom.mfp-removing.mfp-bg{opacity:0}.mfp-arrow-left:before{border-right:none!important}.mfp-arrow-right:before{border-left:none!important}.mfp-counter,button.mfp-arrow{opacity:0!important;transition:opacity .2s ease-in,opacity 2s ease-out}.mfp-container:hover .mfp-counter,.mfp-container:hover button.mfp-arrow{opacity:1!important}.mfp-bg{z-index:1042;overflow:hidden;position:fixed;background:#0b0b0b;opacity:.8}.mfp-wrap{z-index:1043;position:fixed;outline:0!important;-webkit-backface-visibility:hidden}.mfp-container{text-align:center;position:absolute;padding:0 8px;box-sizing:border-box}.mfp-container:before{content:'';height:100%}.mfp-align-top .mfp-container:before,.mfp-loading.mfp-figure,.mfp-s-error .mfp-content,.mfp-s-ready .mfp-preloader{display:none}.mfp-content{position:relative;margin:0 auto;text-align:left;z-index:1045}.mfp-ajax-holder .mfp-content,.mfp-inline-holder .mfp-content{width:100%;cursor:auto}.mfp-ajax-cur{cursor:progress}.mfp-zoom-out-cur,.mfp-zoom-out-cur .mfp-image-holder .mfp-close{cursor:-moz-zoom-out;cursor:-webkit-zoom-out;cursor:zoom-out}.mfp-gallery .mfp-image-holder .mfp-figure,.mfp-zoom{cursor:pointer}.mfp-zoom{cursor:-webkit-zoom-in;cursor:-moz-zoom-in;cursor:zoom-in}.mfp-auto-cursor .mfp-content{cursor:auto}.mfp-arrow,.mfp-close,.mfp-counter,.mfp-preloader{-webkit-user-select:none;-moz-user-select:none;user-select:none}.mfp-hide{display:none!important}.mfp-preloader{color:#ccc;position:absolute;top:50%;width:auto;text-align:center;margin-top:-.8em;left:8px;right:8px;z-index:1044}.mfp-close,.mfp-preloader a:hover{color:#fff}.mfp-preloader a{color:#ccc}button.mfp-arrow,button.mfp-close{overflow:visible;cursor:pointer;background:0 0;border:0;-webkit-appearance:none;display:block;outline:0;padding:0;z-index:1046;box-shadow:none;touch-action:manipulation}.mfp-figure:after,.mfp-iframe-scaler iframe{box-shadow:0 0 8px rgba(0,0,0,.6);position:absolute;left:0}button::-moz-focus-inner{padding:0;border:0}.mfp-close{width:44px;height:44px;line-height:44px;position:absolute;right:0;top:0;text-decoration:none;text-align:center;opacity:.65;padding:0 0 18px 10px;font-style:normal;font-size:28px;font-family:Arial,Baskerville,monospace}.mfp-close:active{top:1px}.mfp-close-btn-in .mfp-close{color:#333}.mfp-iframe-holder .mfp-close,.mfp-image-holder .mfp-close{color:#fff;right:-6px;text-align:right;padding-right:6px;width:100%}.mfp-counter{position:absolute;top:0;right:0;color:#ccc;font-size:12px;line-height:18px;white-space:nowrap}.mfp-figure,img.mfp-img{line-height:0}.mfp-arrow{position:absolute;opacity:.65;margin:-55px 0 0;top:50%;padding:0;width:90px;height:110px;-webkit-tap-highlight-color:transparent}.mfp-arrow:active{margin-top:-54px}.mfp-arrow:after,.mfp-arrow:before{content:'';display:block;width:0;height:0;position:absolute;left:0;top:0;margin-top:35px;margin-left:35px;border:inset transparent}.mfp-arrow:after{border-top-width:13px;border-bottom-width:13px;top:8px}.mfp-arrow:before{border-top-width:21px;border-bottom-width:21px;opacity:.7}.mfp-arrow-left{left:0}.mfp-arrow-left:after{border-right:17px solid #fff;margin-left:31px}.mfp-arrow-left:before{margin-left:25px}.mfp-arrow-right{right:0}.mfp-arrow-right:after{border-left:17px solid #fff;margin-left:39px}.mfp-iframe-holder{padding-top:40px;padding-bottom:40px}.mfp-iframe-holder .mfp-content{line-height:0;width:100%;max-width:900px}.mfp-image-holder .mfp-content,img.mfp-img{max-width:100%}.mfp-iframe-holder .mfp-close{top:-40px}.mfp-iframe-scaler{width:100%;height:0;overflow:hidden;padding-top:56.25%}.mfp-iframe-scaler iframe{display:block;top:0;width:100%;height:100%;background:#000}.mfp-figure:after,img.mfp-img{width:auto;height:auto;display:block}img.mfp-img{box-sizing:border-box;padding:40px 0;margin:0 auto}.mfp-figure:after{content:'';top:40px;bottom:40px;right:0;z-index:-1;background:#444}.mfp-figure small{color:#bdbdbd;display:block;font-size:12px;line-height:14px}.mfp-figure figure{margin:0}.mfp-bottom-bar{margin-top:-36px;position:absolute;top:100%;left:0;width:100%;cursor:auto}.mfp-title{text-align:left;line-height:18px;color:#f3f3f3;word-wrap:break-word;padding-right:36px}@media screen and (max-width:800px) and (orientation:landscape),screen and (max-height:300px){.mfp-img-mobile .mfp-image-holder{padding-left:0;padding-right:0}.mfp-img-mobile .mfp-bottom-bar:empty,.mfp-img-mobile img.mfp-img{padding:0}.mfp-img-mobile .mfp-figure:after{top:0;bottom:0}.mfp-img-mobile .mfp-figure small{display:inline;margin-left:5px}.mfp-img-mobile .mfp-bottom-bar{background:rgba(0,0,0,.6);bottom:0;margin:0;top:auto;padding:3px 5px;position:fixed;box-sizing:border-box}.mfp-img-mobile .mfp-counter{right:5px;top:3px}.mfp-img-mobile .mfp-close{top:0;right:0;width:35px;height:35px;line-height:35px;background:rgba(0,0,0,.6);position:fixed;text-align:center;padding:0}}@media all and (max-width:900px){.mfp-arrow{-webkit-transform:scale(.75);transform:scale(.75)}.mfp-arrow-left{-webkit-transform-origin:0;transform-origin:0}.mfp-arrow-right{-webkit-transform-origin:100%;transform-origin:100%}.mfp-container{padding-left:6px;padding-right:6px}} .image-popup-vertical-fit img{ transition:1s;} .image-popup-vertical-fit img:hover{ opacity:.65;} .what-we-do{ background: #D7F4FF; padding-top: 50px; padding-bottom: 75px;} .hovereffect {width: 100%;height: 100%;float: left;overflow: hidden;position: relative;text-align: center; cursor: default;background: #0f3a8a;border-radius: 10px; cursor: pointer;} .hovereffect .overlay {width: 100%;height: 100%;position: absolute;overflow: hidden;top: 0;left: 0;padding: 74% 20px 66% 20px; background: linear-gradient(to bottom, rgba(0,0,0,0) 48%,rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 61%,rgba(0,0,0,0.65) 100%); } .hovereffect img {display: block;position: relative;max-width: none;width: calc(100% + 20px);-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(-10px,0,0); transform: translate3d(-10px,0,0);-webkit-backface-visibility: hidden; backface-visibility: hidden;} .hovereffect:hover img{opacity: 0.4;filter: alpha(opacity=40);-webkit-transform:translate3d(0,0,0);transform: translate3d(0,0,0);} .hovereffect h2 { position: relative;font-size: 25px;overflow: hidden;padding-bottom: 10px;background-color: transparent;} .hovereffect h5 { font-weight: normal; font-size: 15px; } .hovereffect h2, .hovereffect h5{ text-align: center; color: #fff; } .hovereffect h5{ font-weight:normal;} .hovereffect h2:after { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #fff; content: ''; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0);} .hovereffect:hover h2:after { -webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);} .hovereffect a, .hovereffect p {color: #FFF;opacity: 0;filter: alpha(opacity=0);-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0);} .hovereffect:hover a, .hovereffect:hover p { opacity: 1;filter: alpha(opacity=100);-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);} @media (min-width: 992px) and (max-width: 1200px) {.hovereffect .overlay {padding: 195px 20px;}} @media (max-width: 996px) {.what-we-do{ padding-bottom:0;}} .spacer-bg-top{ background: url(../img/what\ we\ do/bg-top.png) top no-repeat;} .spacer-bg-bottom{ background: url(../img/what\ we\ do/bg-bottom.png) bottom no-repeat; padding:60px;} .testimonials{ background-image:url(../img/testimonials-bg.webp); background-size:cover; padding:150px 0;} @media (max-width: 996px) {.testimonials{ background-image:url(../img/testimonials-bg-mobile-view.webp); }} .testimonials-bg-top img{ width:100%;} .carousel{width:100%;margin:0 auto;padding-bottom:50px} .carousel .carousel-item{color:#000000;font-size:14px;text-align:center;overflow:hidden;} .carousel .carousel-item a{color:#0f3a8a} .carousel .img-box{width:100px;height:100px;margin:0 auto;border-radius:50%} .carousel .img-box img{width:100%;height:100%;display:block;border-radius:50%} .carousel .testimonial{padding:30px 0 10px} .carousel p{color:#000000} .carousel .overview{text-align:center;padding-bottom:5px} .carousel .overview b{color:#333;font-size:15px;text-transform:uppercase;display:block;padding-bottom:5px} .carousel .star-rating i{font-size:18px;color:#ffdc12} .carousel-control-next,.carousel-control-prev{width:30px;height:30px;border-radius:50%;background:#000000;text-shadow:none;top:4px} .carousel-control-next i,.carousel-control-prev i{font-size:20px;margin-right:2px} .carousel-control-prev{left:auto;right:40px} .carousel-control-next i{margin-right:-2px} .carousel .carousel-indicators{bottom:15px} .carousel-indicators li,.carousel-indicators li.active{width:11px;height:11px;margin:1px 5px;border-radius:0%} .carousel-indicators li{background:#000000;border:none} .carousel-indicators li.active{background:#0f3a8a} .inner-banner{ background-image:url(../img/gallery/pool-projects-04.png); background-size:cover; padding:10rem 0;} footer{ padding:50px 40px; background-image:url(../img/wave%202.png); background-repeat: no-repeat; background-position:bottom; } .footer-style h4{ margin-bottom: 20px; font-size:18px} .footer-style ul li, .footer-style ul li a, .footer-style ul li p { margin-bottom: 10px; color:#606060; font-size:14px;} .footer-style ul li a:hover{ color:#0f3a8a;} .footer-style .social-media li{ display: inline-flex; padding-right: 10px;} .footer-style .social-media li i{ font-size: 20px;} footer iframe{filter: grayscale(100%);} @media (max-width: 996px) { footer{ padding: 50px 0 0 0;} .mb-md-5{ margin-bottom:3rem;}} @media (max-width: 765px) {footer{ padding: 0 0 0 0;}} .margin-navbar-special{margin-right:20px;} @media (max-width: 996px) {.margin-navbar-special{margin-right:0px; margin-bottom:18px;}} @media (max-width: 996px) {.navbar-nav{padding-top: 6px;} } @media (max-width: 768px) { footer iframe { margin-top:25px;}} /********-----------------inner banner code-----------********/ .inner-banner { background-image: url(../img/gallery/pool-projects-04.png); padding-top: 11rem; padding-bottom: 15rem; padding-left: 2.7rem; position: relative; background-repeat: no-repeat; background-size: cover;} /*.inner-banner .overlay{ position:absolute; width:100%; height:100%; background: linear-gradient(to right, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.1) 28%,rgba(0,0,0,0) 50%); top:0; left:0 }*/ .inner-banner h2{ font-size:70px; z-index:1500; color:#fff; position:relative; color:#fff; text-transform:uppercase; } .inner-banner ul li{ display: inline-block; color:#f15822; font-size:14px;} .inner-banner ul li a{ color:#fff;} .inner-banner ul li a:hover{ color:#0f3a8a;} .inner-banner ul li:nth-child(2){ padding:0 10px; color:#fff;} @media (max-width: 400px) {.inner-banner h2{ font-size:40px;}} @media (max-width: 996px) {.inner-banner{ padding-top: 8rem; padding-bottom: 18rem; padding-left: .25rem;}} .our-specialities ul{ } .our-specialities ul li{ display: inline-block; text-align:center; margin-right:10px; padding:10px; font-size:17px; font-weight:500; margin:0 25px; } .our-specialities ul li p{ color:#000; margin-top:5px; font-weight:500;} @media (max-width: 440px) {.our-specialities ul li{ display: block;}} .our-specialities ul li img { border-radius: 200%; margin-bottom: 10px; -webkit-box-shadow: -16px 0px 0px 0px #D9D9D9; -moz-box-shadow: -16px 0px 0px 0px #D9D9D9; box-shadow: -16px 0px 0px 0px #D9D9D9;} /*.our-specialities p{color:#000; font-weight:500; margin:10px 0 25px 0;} .our-specialities img{ width:50%;} .specialities-font-size{font-size:52px !important;} @media (max-width: 400px) {.specialities-font-size{font-size:35px;}}*/ .special-btn .navbar-btn-call-now ,.special-btn .service-btn { padding-left: 30px; padding-right: 30px;} .service-btn { background: linear-gradient(to bottom, rgb(5 62 170) 0%, rgb(5 62 170) 0%, rgb(49 113 233) 100%); position: relative;z-index: 10; display: inline-block; text-decoration: none; color:#fff; border-radius:100px; margin-right:10px; transition:1s; font-weight:bold; color:#fff!important;} .service-btn:after {background: linear-gradient(to bottom, rgba(49 113 233) 0%,rgba(5 62 170) 100%); content: ''; display: block; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; width: 100%; z-index: -10; transition: opacity 0.5s;border-radius: 100px; color:#fff!important;} .service-btn:hover:after { opacity: 1;} .features-list ul{ list-style-type: none; display: list-item; padding: 0;} .features-list ul li{ position: relative; padding-left: 23px; margin-bottom: 10px; color:#43474B; } .features-list ul li:before{ content: '\F141'; font-family: bootstrap-icons !important; color:#0f3a8a; position: absolute; left: 0; top: 0; font-weight: bold; margin-right:5px; } .about-us-bg-inner { background-image: url(../img/about-us-bg.webp); background-position: top; background-size: contain; z-index: 999; position: relative; display: block; margin-top: -200px; padding-top:175px; background-repeat: repeat-x;} @media (max-width: 996px) {.about-us-bg-inner {padding-top:100px;} } @media (max-width: 1200px) {.about-us-bg-inner-pb-0{ padding-bottom:0;}} .service-pt-5{ padding-top:60px; padding-bottom:0;} .pl-7-pr-0{ padding-right:0; padding-left:7%;} @media (max-width: 1200px) {.pl-7-pr-0{ padding-right:0; padding-left:0;}} .service-page-style .header-style h2{ font-size:52px;} @media (max-width: 500px) {.service-page-style .header-style h2{ font-size:32px;}} @media (max-width: 996px) {.img-mb-4{ margin-bottom:4rem;}} @media (max-width: 765px) { .mb-10{ margin-bottom:1rem;}} @media (max-width: 996px) {.navbar-nav form ul { display: contents; width:100%;} .navbar-nav form ul li{ display: inline-flex; width: 33.3%;text-align: center;} .navbar-nav form ul li a{ width:100%;} .navbar-nav form ul li .nav-link { color: #151515; padding: 5px 0 0 5px; width:100%; text-align: center;}} .navbar-nav li:nth-child(4) a, .navbar-nav li:nth-child(5) a { width: 145px;} @media (max-width: 996px) { .navbar-nav li:nth-child(4) a, .navbar-nav li:nth-child(5) a { width: 48%; margin: 0 auto;display: block; margin-bottom: 9px;} .navbar-nav form { margin-left: 5px; width: 50%; margin: 0 auto;}} .navbar-expand-lg .navbar-nav .nav-link { padding-right: 1rem; padding-left: 1rem;text-align:center;} .navbar-expand-lg .navbar-nav form { margin-top: 2px;} .active{ color:#0f3a8a;} .font-style-h4{ font-size:1.1rem;} .about-style h2{ font-size:52px;} .we-connect-you{padding-top:80px;} .we-connect-you .header-style h2 { font-size:52px;} .we-connect-you p{padding:0 10%; margin-bottom:30px;} @media (max-width: 568px) {.pt-20px{ padding-top:20px;} .we-connect-you .header-style h2, .about-style h2 { font-size:35px;} .about-us-12 p { font-size: 14px; line-height: 21px;}} .pb-30px{ padding-bottom:30px;} /* Preloader container */ #preloader { position: fixed; width: 100%; height: 100%; background-color: #03246b; /* Dark background for preloader */ display: flex; justify-content: center; align-items: center; z-index: 999999; /* Ensure it appears on top */ transition: opacity 0.5s ease, visibility 0.5s ease; /* Fade-out effect */ } /* Hide preloader when not needed */ .hidden { opacity: 0; visibility: hidden; pointer-events: none; } #bg { display: flex; justify-content: center; align-items: center; } #liquid1-clip, #liquid2-clip { transform-origin: 50% 50%; } #liquid1-clip { animation: swingLeft 2s ease-in-out infinite; } #liquid2-clip { animation: swingLeft 2s ease-in-out infinite; animation-delay: 0.3s; } #liquid1 { transform-origin: 50% 50%; animation: liquid1Fill 2s linear infinite; } #liquid2 { transform-origin: 50% 50%; animation: liquid2Fill 2s linear infinite; } #bubble1 { transform-origin: 50% 50%; animation: bubbleRise1 2s linear infinite; } #bubble2 { animation: bubbleRise2 2s linear infinite; } @keyframes liquid1Fill { 0% { transform: translate(0px, 180px) scaleX(-1); } 25% { transform: translate(10px, 144px) scaleX(-2); } 50% { transform: translate(0px, 108px) scaleX(-3); } 75% { transform: translate(-10px, 72px) scaleX(-2); } 100% { transform: translate(0px, 36px) scaleX(-1); } } @keyframes liquid2Fill { 0% { transform: translate(-5px, 165px) scaleX(1); } 25% { transform: translate(-15px, 129px) scaleX(3); } 50% { transform: translate(-5px, 93px) scaleX(2); } 75% { transform: translate(5px, 57px) scaleX(2); } 100% { transform: translate(-5px, 21px) scaleX(1); } } @keyframes bubbleRise1 { from { transform: translate(60px, 280px); } to { transform: translate(60px, 100px); } } @keyframes bubbleRise2 { from { transform: translate(125px, 280px) rotate(45deg); } to { transform: translate(125px, 85px) rotate(45deg); } } @keyframes swingLeft { 0% { transform: rotate(10deg); } 50% { transform: rotate(-10deg); } 100% { transform: rotate(10deg); } } @keyframes swingRight { 0% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } 100% { transform: rotate(-10deg); } } /* Main content */ #content { display: none; /* Initially hidden */ opacity: 0; text-align: center; padding: 20px; transition: opacity 1s ease-in; /* Fade-in effect for content */ } /* Show content after loading */ .loaded #content { display: block; opacity: 1; } /*fixed-button*/ .btn-floating:hover img { margin-bottom: -3px } .btn-floating { position: fixed; right: 25px; overflow: hidden; width: 50px; height: 50px; border-radius: 100px; border: 0; z-index: 9999; color: white; transition: .2s; } .btn-floating:hover { cursor: pointer; } .btn-floating span { font-size: 16px; margin-left: 5px; transition: .2s; line-height: 0px; display: none; } .btn-floating:hover span { display: inline-block; } /* Phone */ .btn-floating.phone { bottom: 85px; background: linear-gradient(to bottom, rgba(0, 183, 234, 1) 0%, rgba(238, 93, 0, 1) 0%, rgba(253, 119, 0, 1) 100%); } .btn-floating.phone:hover { background-color: #c03421; } /* WhatsApp */ .btn-floating.whatsapp { background: linear-gradient(to bottom, rgba(0, 183, 234, 1) 0%, rgba(34, 108, 27, 1) 0%, rgba(43, 174, 32, 1) 100%); bottom: 25px; } .btn-floating.whatsapp:hover { background-color: #1f7a12 } /* dark blue #000000 light blue #0f3a8a grey #A3A3A3 /*