/* Agenco Digital Agency HTML-5 Template */ /*** ==================================================================== Attachment Css Files ==================================================================== ***/ @import url('global.css'); @import url('header.css'); @import url('footer.css'); @import url('font-awesome.css'); @import url('flaticon.css'); @import url('animate.css'); @import url('icofont.css'); @import url('owl.css'); @import url('preloader.css'); @import url('jquery-ui.css'); @import url('custom-animate.css'); @import url('jquery.fancybox.min.css'); @import url('jquery.mCustomScrollbar.min.css'); /*** ==================================================================== Main Slider Section ==================================================================== ***/ .main-slider{ position:relative; overflow:hidden; background-color:#f7f7ff; } .main-slider .color-layer{ position:absolute; left:0px; top:0px; width:653px; height:520px; border-radius:100px; margin-left:-500px; margin-top:-120px; transform:rotate(-40deg); background-color:var(--main-color); outline: 2px dashed var(--main-color); outline-offset: 15px; } .main-slider .circle-layer{ position:absolute; left:-35px; top:170px; width:90px; height:90px; opacity:0.15; border-radius:50%; border:15px solid var(--white-color) } .main-slider .vector-layer-one{ position:absolute; left:7%; top:15%; width:567px; height:570px; z-index:1; background-repeat:no-repeat; } .main-slider .vector-layer-two{ position:absolute; left:4%; top:70%; width:65px; height:69px; z-index:1; background-repeat:no-repeat; } .main-slider .vector-layer-three{ position:absolute; right:-5px; top:0px; width:341px; height:465px; z-index:1; background-repeat:no-repeat; } .main-slider .vector-layer-four{ position:absolute; right:5%; bottom:12%; width:102px; height:94px; z-index:1; background-repeat:no-repeat; } .main-slider .vector-layer-five{ position:absolute; left:-20px; top:30%; width:298px; height:307px; z-index:-10; background-repeat:no-repeat; } .main-slider .tp-caption{ z-index:5 !important; } .main-slider .metis.tparrows{ display:none; } .main-slider .tp-dottedoverlay{ background:none !important; } .main-slider .content-image{ position:relative; z-index:99; } .main-slider .border-layer{ position:absolute; content:''; left:0px; top:110px; z-index:-1; width:326px; height:288px; border-radius:25px; border:1px solid #E1E0EF; } .main-slider .dark-color-layer{ position:absolute; right:0px; top:100px; z-index:-1; width:485px; height:485px; border-radius:50%; background-color:#121D2C; outline: 1px dashed var(--white-color-rgba); outline-offset: -20px; } .main-slider .tp-mask-wrap{ overflow:visible !important; } .main-slider .icon-one{ position:absolute; left:-35px; top:350px; width:70px; height:70px; color:var(--white-color); z-index:1; line-height:70px; text-align:center !important; line-height:70px; border-radius:50px; display:inline-block; font-size:var(--font-24); background-color:var(--main-color); } .main-slider .icon-two{ position:absolute; left:40px; top:78px; width:70px; height:70px; color:var(--main-color); z-index:1; line-height:70px; text-align:center !important; line-height:70px; border-radius:50px; display:inline-block; font-size:var(--font-24); background-color:var(--white-color); border:1px solid var(--grey-color-two); } .main-slider .icon-three{ position:absolute; right:30px; top:50px; width:70px; height:70px; color:var(--white-color); z-index:1; line-height:70px; text-align:center !important; line-height:70px; border-radius:50px; display:inline-block; font-size:var(--font-24); background-color:var(--main-color); } .main-slider .icon-four{ position:absolute; right:-100px; top:300px; width:70px; height:70px; color:var(--main-color); z-index:1; line-height:70px; text-align:center !important; line-height:70px; border-radius:50px; display:inline-block; font-size:var(--font-24); background-color:var(--white-color); border:1px solid var(--grey-color-two); } .main-slider .title{ font-weight:500; letter-spacing:1px; font-size:var(--font-24); color:var(--main-color); padding-left:var(--padding-left-35); font-family:var(--font-family-Teko); } .main-slider .title:before{ position:absolute; content:"\ed51"; left:0px; top:-2px; color:var(--main-color); font-family: "IcoFont"; } .main-slider h1{ } .main-slider .button-box .theme-btn{ margin-right:var(--margin-right-15); } .main-slider .button-box{ position:relative; z-index:10; } .main-slider .tp-bannertimer, .main-slider .tp-bullets{ display:none !important; } /*** ==================================================================== Main Slider Section ==================================================================== ***/ .main-slider-two{ position:relative; overflow:hidden; } .main-slider-two .social-list{ position:absolute; left:70px; bottom:40px; transform:rotate(-90deg); transform-origin: -5% 0%; } .main-slider-two .social-list a{ margin:0px 18px; letter-spacing:1px; font-size:var(--font-22); color:var(--white-color); text-transform:uppercase; font-family:var(--font-family-Teko); } .main-slider-two .social-list a:hover{ color:var(--main-color); } .main-slider-two .color-layer{ position:absolute; left:-100px; top:350px; width:653px; height:520px; border-radius:30px; margin-left:-500px; margin-top:-120px; transform:rotate(-40deg); background-color:var(--main-color); outline: 2px dashed var(--white-color-rgba); outline-offset: -18px; } .main-slider-two .vector-layer-one{ position:absolute; left:0px; bottom:0px; width:369px; height:98px; z-index:1; background-repeat:no-repeat; } .main-slider-two .vector-layer-two{ position:absolute; left:50px; bottom:0px; width:509px; height:238px; z-index:1; background-repeat:no-repeat; } .main-slider-two .play-outer{ position:absolute; right:0px; bottom:0px; width:284px; height:940px; border-radius:150px; transform:rotate(-45deg); background-color:var(--main-color); outline: 2px dashed var(--white-color); outline-offset: -18px; } .main-slider-two .play-outer .play-box{ position:relative; width:90px; height:90px; z-index:1; margin:0 auto; line-height:90px; text-align:center; border-radius:50px; display:block; color:var(--main-color); font-size:var(--font-22); margin-top:var(--margin-top-80); background-color:var(--white-color); box-shadow:0px 0px 0px 10px var(--white-color-rgba); } .main-slider-two .social-box{ position:relative; } .main-slider-two .social-box .globe-icon{ position:relative; line-height:1em; color:var(--main-color); font-size:var(--font-100); font-family: "Flaticon"; } .main-slider-two .social-box .twitter-icon:hover, .main-slider-two .social-box .facebook-icon:hover, .main-slider-two .social-box .cofee-icon:hover, .main-slider-two .social-box .pinterest-icon:hover, .main-slider-two .social-box .chat-icon:hover, .main-slider-two .social-box .behance-icon:hover, .main-slider-two .social-box .instagram-icon:hover{ opacity:1; color:var(--main-color); } .main-slider-two .social-box .twitter-icon{ position:absolute; left:-130px; top:-120px; opacity:0.15; color:var(--white-color); font-size:var(--font-60); font-family: "Flaticon"; -webkit-transition:all 500ms ease; -moz-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; transition:all 500ms ease; } .main-slider-two .social-box .facebook-icon{ position:absolute; left:60px; top:-150px; opacity:0.15; color:var(--white-color); font-size:var(--font-50); font-family: "Flaticon"; -webkit-transition:all 500ms ease; -moz-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; transition:all 500ms ease; } .main-slider-two .social-box .cofee-icon{ position:absolute; left:140px; top:-80px; opacity:0.15; color:var(--white-color); font-size:var(--font-50); font-family: "Flaticon"; -webkit-transition:all 500ms ease; -moz-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; transition:all 500ms ease; } .main-slider-two .social-box .pinterest-icon{ position:absolute; left:190px; top:30px; opacity:0.15; color:var(--white-color); font-size:var(--font-40); font-family: "Flaticon"; -webkit-transition:all 500ms ease; -moz-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; transition:all 500ms ease; } .main-slider-two .social-box .chat-icon{ position:absolute; left:20px; bottom:-100px; opacity:0.15; color:var(--white-color); font-size:var(--font-40); font-family: "Flaticon"; -webkit-transition:all 500ms ease; -moz-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; transition:all 500ms ease; } .main-slider-two .social-box .behance-icon{ position:absolute; left:-120px; bottom:-60px; opacity:0.15; color:var(--white-color); font-size:var(--font-40); font-family: "Flaticon"; -webkit-transition:all 500ms ease; -moz-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; transition:all 500ms ease; } .main-slider-two .social-box .instagram-icon{ position:absolute; left:-160px; bottom:50px; opacity:0.15; color:var(--white-color); font-size:var(--font-40); font-family: "Flaticon"; -webkit-transition:all 500ms ease; -moz-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; transition:all 500ms ease; } .main-slider-two .tp-caption{ z-index:5 !important; } .main-slider-two .metis.tparrows{ display:none; } .main-slider-two .tp-dottedoverlay{ opacity:0.73; background: var(--dark-color-four); } .main-slider-two .social-box{ position:relative; z-index:99; } .main-slider-two .tp-mask-wrap{ overflow:visible !important; } .main-slider-two .title{ font-weight:500; letter-spacing:1px; font-size:var(--font-24); color:var(--main-color); padding-left:var(--padding-left-35); font-family:var(--font-family-Teko); } .main-slider-two .title:before{ position:absolute; content:"\ed51"; left:0px; top:-2px; color:var(--main-color); font-family: "IcoFont"; } .main-slider-two h1{ color:var(--white-color); } .main-slider-two .button-box .theme-btn{ margin-right:var(--margin-right-15); } .main-slider-two .button-box{ position:relative; z-index:10; } .main-slider-two .tp-bannertimer, .main-slider-two .tp-bullets{ display:none !important; } /*** ==================================================================== Clients Section ==================================================================== ***/ .clients-section{ position:relative; background-color:var(--grey-color); } .clients-section .auto-container{ max-width:1360px; } .clients-section .inner-container{ position:relative; border-radius:10px; padding:0px 60px; background-color:var(--white-color); } .clients-section .image-box{ padding:30px 0px; } .clients-section .image-box:before{ position:absolute; content:''; top:35px; right:-25px; width:1px; bottom:35px; border-right:1px solid var(--grey-color-two); } .clients-section .image-box img{ position:relative; margin:0 auto; width:auto; filter: grayscale(0%); -webkit-transition:all 500ms ease; -moz-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; transition:all 500ms ease; } .clients-section .image-box:hover img{ filter: grayscale(100%); } .clients-section .owl-dots, .clients-section .owl-nav{ display:none; } /*** ==================================================================== About Section ==================================================================== ***/ .about-section{ position:relative; padding:110px 0px 70px; background-color:var(--grey-color); } .about-section .pattern-layer{ position:absolute; left:0px; bottom:0px; width:244px; height:474px; background-repeat:no-repeat; } .about-section .images-column{ position:relative; margin-bottom:var(--margin-bottom-30); } .about-section .vector-layer-one{ position:absolute; left:-20px; top:35px; width:92px; height:83px; background-repeat:no-repeat; } .about-section .vector-layer-two{ position:absolute; left:-20px; top:70px; width:560px; height:567px; background-repeat:no-repeat; } .about-section .images-column .inner-column{ position:relative; } .about-section .images-column .image{ position:relative; border-radius:12px; overflow:hidden; float:left; margin-top:var(--margin-top-60); } .about-section .images-column .image-two{ position:relative; border-radius:16px; overflow:hidden; display:inline-block; margin-left:var(--margin-left-30); } .about-section .images-column .image-three{ position:relative; border-radius:15px; overflow:hidden; display:inline-block; margin-top:var(--margin-top-25); margin-left:var(--margin-left-30); } .about-section .images-column .image-four{ position:absolute; left:60px; bottom:75px; border-radius:15px; overflow:hidden; display:inline-block; margin-left:var(--margin-left-30); } .about-section .content-column{ position:relative; margin-bottom:var(--margin-bottom-30); } .about-section .content-column .inner-column{ position:relative; padding-left:var(--padding-left-30); } .about-section .content-column .about-list{ position:relative; } .about-section .content-column .about-list li{ position:relative; padding-top:3px; color:var(--text-color); font-size:var(--font-16); padding-left:var(--padding-left-45); margin-bottom:var(--margin-bottom-20); } .about-section .content-column .about-list li:before{ position:absolute; content:'\f00e'; left:0px; top:0px; width:27px; height:27px; line-height:27px; text-align:center; border-radius:50px; font-family:IcoFont; color:var(--main-color); background-color:var(--white-color); box-shadow:0px 0px 15px rgba(0,0,0,0.05); } .about-section .content-column .about-list li:last-child{ margin-bottom:var(--margin-zero); } .quote-box{ position:relative; } .quote-box:before{ position:absolute; content:''; right:0px; bottom:0px; z-index:1; opacity:0.15; border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 15px solid #eaad1f; } .quote-box:after{ position:absolute; content:''; right:10px; bottom:0px; z-index:1; border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 15px solid red; } .quote-box .box-inner{ position:relative; padding:25px 25px; border-radius:3px; margin-top:var(--margin-top-50); background-color:var(--white-color); border:1px solid var(--main-color); } .quote-box .box-inner .quote{ position:absolute; left:-2px; top:-2px; width:31px; height:28px; line-height:28px; text-align:center; color:var(--white-color); border-radius:2px; background-color:var(--main-color); } .quote-box .content{ position:relative; padding-left:var(--padding-left-90); } .quote-box .author-image{ position:absolute; left:0px; top:15px; } .quote-box .author-image img{ position:relative; width:54px; height:54px; overflow:hidden; border-radius:50px; } .quote-box .author-image:before{ position:absolute; content:''; left:5px; top:-12px; width:54px; height:54px; border-radius:50px; background-color:var(--main-color); } .quote-box .text{ position:relative; } .quote-box .designation{ position:relative; color:var(--text-color); font-size:var(--font-16); margin-top:var(--margin-top-10); } .quote-box .designation span{ position:relative; color:var(--main-color); font-family: 'Pacifico', cursive; } .about-section .content-column .experiance-box{ position:relative; margin-bottom:var(--margin-bottom-40); } .about-section .content-column .experiance-box .box-inner{ position:relative; line-height:1.7em; font-size:var(--font-18); color:var(--black-color); font-family:var(--font-family-Roboto); padding-left:var(--padding-left-70); } .about-section .content-column .experiance-box .icon{ position:absolute; left:0px; top:0px; } .about-section .content-column .experiance-box span{ font-weight:600; } .about-section .content-column .button-box{ margin-top:var(--margin-top-40); } .about-section.style-two{ background:none; } /*** ==================================================================== Services Section ==================================================================== ***/ .services-section{ position:relative; overflow:hidden; background-color:var(--grey-color); } .services-section .pattern-layer-one{ position:absolute; left:0px; bottom:0px; width:361px; height:160px; background-repeat:no-repeat; } .services-section .inner-container{ position:relative; padding:110px 0px 70px; border-top:1px solid var(--grey-color-two); } .services-section .content-column{ position:relative; margin-bottom:var(--margin-bottom-30); } .services-section .content-column .inner-column{ position:relative; } .service-block{ position:relative; margin-bottom:var(--margin-bottom-70); } .service-block .inner-box{ position:relative; padding-left:var(--padding-left-70); } .service-block .inner-box .icon-box{ position:absolute; left:0px; top:0px; line-height:1em; transition: all 600ms ease; -moz-transition: all 600ms ease; -webkit-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; } .service-block .inner-box .icon-box:before{ position:absolute; left:10px; top:15px; content:''; width:38px; height:36px; opacity:0.15; transform:rotate(45deg); background-color:var(--main-color); } .service-block .inner-box .icon-box .icon{ position:relative; line-height:1em; font-size:var(--font-48); color:var(--main-color); font-family: "Flaticon"; } .service-block .inner-box:hover .icon-box{ -webkit-transform: scale(-1) rotate(180deg); -moz-transform: scale(-1) rotate(180deg); -ms-transform: scale(-1) rotate(180deg); -o-transform: scale(-1) rotate(180deg); transform: scale(-1) rotate(180deg); } .service-block .inner-box h3{ font-weight:500; } .service-block .inner-box h3 a{ color:var(--heading-color); } .service-block .inner-box h3 a:hover{ color:var(--main-color); } .service-block .inner-box .text{ position:relative; font-size:var(--font-15); margin-top:var(--margin-top-10); } .services-section .images-column{ position:relative; margin-bottom:var(--margin-bottom-30); } .services-section .images-column .inner-column{ position:relative; padding-left:var(--padding-left-60); } .services-section .images-column .image{ position:absolute; right:-40px; top:100px; overflow:hidden; border-radius:10px; display:inline-block; } .services-section .pattern-layer-two{ position:absolute; left:30px; top:-25px; width:137px; height:134px; background-repeat:no-repeat; } .services-section .pattern-layer-three{ position:absolute; right:15px; top:-30px; width:42px; height:41px; background-repeat:no-repeat; } .services-section .pattern-layer-four{ position:absolute; right:-140px; top:70px; width:37px; height:37px; background-repeat:no-repeat; } .services-section .pattern-layer-five{ position:absolute; left:140px; bottom:-90px; width:77px; height:53px; background-repeat:no-repeat; } .services-section .pattern-layer-six{ position:absolute; right:0px; bottom:-70px; width:596px; height:703px; background-repeat:no-repeat; } .services-section .color-box-one{ position:absolute; left:210px; bottom:-50px; width:17px; height:17px; border-radius:50px; background-color:var(--main-color); } .services-section .color-box-two{ position:absolute; left:250px; bottom:-30px; width:10px; height:10px; opacity:0.10; border-radius:50px; background-color:var(--main-color); } /* Video Box */ .video-box{ position:relative; overflow:hidden; display:inline-block; border-radius:70px 20px 20px 20px; } .video-box .video-image{ position:relative; margin:0px; overflow:hidden; } .video-box .video-image img{ position:relative; width:100%; } .video-box:hover .video-image img{ opacity:0.90; transform:scale(1.02,1.02); } .video-box .overlay-box{ position:absolute; left:0px; top:0px; width:100%; height:100%; text-align:center; overflow:hidden; line-height: 45px; overflow:hidden; } .video-box .overlay-box:before{ position:absolute; content:''; left:0px; top:0px; right:0px; bottom:0px; z-index:10; } .video-box .overlay-box .fas{ position: absolute; width:80px; height: 80px; left:50%; top: 50%; z-index:10; font-weight:700; text-align: center; display: inline-block; margin-top: -40px; margin-left:-40px; line-height:80px; border-radius:50%; font-size:var(--font-24); color: var(--white-color); padding-left:var(--padding-left-5); background-color:var(--dark-color); transition:all 600ms ease; -moz-transition:all 600ms ease; -webkit-transition:all 600ms ease; -ms-transition:all 600ms ease; -o-transition:all 600ms ease; } .video-box .overlay-box .fas:after{ position: absolute; content:''; left:-5px; top:5px; right:5px; bottom:-5px; border-radius:50px; display:inline-block; border:1px solid var(--white-color); } .video-box .overlay-box .dott{ position:absolute; right:0px; bottom:10px; width:17px; height:17px; z-index:1; border-radius:50px; background-color:var(--main-color); } .video-box .overlay-box span:hover{ background-color:var(--main-color); } .video-box .ripple, .video-box .ripple:before, .video-box .ripple:after { position: absolute; top: 50%; left: 50%; width:80px; height: 80px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-border-radius: 50% 50% 50% 50%; -moz-border-radius: 50% 50% 50% 50%; -ms-border-radius: 50% 50% 50% 50%; -o-border-radius: 50% 50% 50% 50%; border-radius: 50% 50% 50% 50%; -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); -ms-box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); -o-box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); -webkit-animation: ripple 3s infinite; -moz-animation: ripple 3s infinite; -ms-animation: ripple 3s infinite; -o-animation: ripple 3s infinite; animation: ripple 3s infinite; } .video-box .ripple:before { -webkit-animation-delay: .9s; -moz-animation-delay: .9s; -ms-animation-delay: .9s; -o-animation-delay: .9s; animation-delay: .9s; content: ""; position: absolute; } .video-box .ripple:after { -webkit-animation-delay: .6s; -moz-animation-delay: .6s; -ms-animation-delay: .6s; -o-animation-delay: .6s; animation-delay: .6s; content: ""; position: absolute; } @-webkit-keyframes ripple { 70% {box-shadow: 0 0 0 70px rgba(253, 167, 0, 0);} 100% {box-shadow: 0 0 0 0 rgba(253, 167, 0, 0);} } @keyframes ripple { 70% {box-shadow: 0 0 0 70px rgba(253, 167, 0, 0);} 100% {box-shadow: 0 0 0 0 rgba(253, 167, 0, 0);} } /*** ==================================================================== Principle Section ==================================================================== ***/ .principle-section{ position:relative; overflow:hidden; background-color:var(--grey-color); padding-bottom:var(--padding-bottom-120); } .principle-section .inner-container{ position:relative; padding:100px 0px 50px; } .principle-section .inner-container::before{ position:absolute; content:''; right:-140px; top:0px; bottom:0px; width:200%; border-radius:20px; background-color:var(--white-color); } .principle-section .content-column{ position:relative; margin-bottom:var(--margin-bottom-30); } .principle-section .content-column .inner-column{ position:relative; } .principle-section .content-column .video-content{ padding-left:235px; min-height:138px; margin-bottom:var(--margin-bottom-35); } .principle-section .content-column .video-box-two{ position:absolute; left:0px; top:0px; } .principle-section .content-column .list{ position:relative; } .principle-section .content-column .list li{ position:relative; font-size:var(--font-15); color:var(--text-color); padding-left:var(--padding-left-25); margin-bottom:var(--margin-bottom-10); } .principle-section .content-column .list li:before{ position:absolute; content:'\f00e'; left:0px; top:0px; font-family:IcoFont; color:var(--main-color); } .principle-section .number-list{ position:relative; margin-top:var(--margin-top-20); } .principle-section .number-list li{ position:relative; line-height:1.9em; font-size:var(--font-14); padding-left:var(--padding-left-65); margin-bottom:var(--margin-bottom-30); padding-bottom:var(--padding-left-20); border-bottom:1px solid var(--grey-color-two); } .principle-section .number-list li:last-child{ border:none; margin-bottom:var(--margin-zero); padding-bottom:var(--margin-zero); } .principle-section .number-list li strong{ position:relative; width:100%; display:block; font-weight:500; text-transform:uppercase; font-size:var(--font-22); color:var(--dark-color); font-family:var(--font-family-Teko); margin-bottom:var(--margin-bottom-10); } .principle-section .number-list li .number{ position:absolute; left:0px; top:0px; width:42px; height:42px; font-weight:500; text-align:center; border-radius:50px; line-height:42px; display:inline-block; color:var(--main-color); font-size:var(--font-16); background-color:var(--main-color-rgba); transition:all 300ms ease; -moz-transition:all 300ms ease; -webkit-transition:all 300ms ease; -ms-transition:all 300ms ease; -o-transition:all 300ms ease; } .principle-section .number-list li:hover .number{ color:var(--white-color); background-color:var(--main-color); } .principle-section .number-list li:hover .number{ transform:rotateY(360deg); } /* Skills Section */ .skills .skill-item{ position:relative; margin-bottom:var(--margin-bottom-25); } .skills .skill-item:last-child{ margin-bottom:var(--margin-zero); } .skills .skill-item .skill-bar{ position:relative; width:100%; border-bottom:3px solid #F1F1F2; } .skills .skill-item .skill-bar .bar-inner{ position:relative; width:100%; height:8px; } .skills .skill-item .skill-bar .bar-inner .bar{ position:absolute; left:0px; top:0px; height:3px; width:0px; border-bottom:3px solid var(--main-color); -webkit-transition:all 2000ms ease; -ms-transition:all 2000ms ease; -o-transition:all 2000ms ease; -moz-transition:all 2000ms ease; transition:all 2000ms ease; } .skills .skill-item .skill-header{ position:relative; margin-bottom:6px; } .skills .skill-item .skill-header .skill-title{ font-weight:500; line-height:1.4em; letter-spacing:1px; color:var(--black-color); text-transform:uppercase; font-size:var(--font-18); font-family:var(--font-family-Teko); } .skills .skill-item .skill-percentage{ position:absolute; right:0px; top:-30px; color:var(--black-color); text-transform:uppercase; font-size:var(--font-20); font-family:var(--font-family-Teko); } .skills.style-two .skill-item .skill-bar{ border-bottom-width:5px; } .skills.style-two .skill-item .skill-bar .bar-inner .bar{ top:auto; bottom:-5px; border-bottom-width:5px; } .skills.style-two .skill-item .skill-header .skill-title{ font-size:var(--font-20); } /* Principle Tab */ .principle-tabs{ position:relative; margin-top:var(--margin-top-10); margin-bottom:var(--margin-bottom-40); } .principle-tabs .tab-btns{ position:relative; border-bottom:2px solid var(--main-color); } .principle-tabs .tab-btns .tab-btn{ position:relative; display:inline-block; color:var(--dark-color); text-transform:uppercase; font-size:var(--font-14); font-weight:500; line-height:24px; cursor:pointer; font-weight:700; letter-spacing:1px; padding:11px 26px; transition:all 500ms ease; } .principle-tabs .tab-btns .tab-btn:hover, .principle-tabs .tab-btns .tab-btn.active-btn{ color:var(--white-color); background:var(--main-color); } .principle-tabs .tabs-content{ position:relative; padding-top:var(--padding-top-40); } .principle-tabs .tabs-content .tab{ position:relative; display:none; } .principle-tabs .tabs-content .tab.active-tab{ display:block; } /* Video Box */ .video-box-two{ position:relative; overflow:hidden; width:212px; display:inline-block; border-radius:8px; } .video-box-two .video-image{ position:relative; margin:0px; overflow:hidden; } .video-box-two .video-image img{ position:relative; width:100%; } .video-box-two:hover .video-image img{ opacity:0.90; transform:scale(1.02,1.02); } .video-box-two .overlay-box{ position:absolute; left:0px; top:0px; width:100%; height:100%; text-align:center; overflow:hidden; line-height: 45px; overflow:hidden; } .video-box-two .overlay-box:before{ position:absolute; content:''; left:0px; top:0px; right:0px; bottom:0px; z-index:10; } .video-box-two .overlay-box .fas{ position: absolute; width:48px; height: 48px; left:50%; top: 50%; z-index:10; font-weight:700; text-align: center; display: inline-block; margin-top: -24px; margin-left:-24px; line-height:48px; border-radius:50%; font-size:var(--font-20); color: var(--white-color); padding-left:var(--padding-left-5); background-color:var(--dark-color); transition:all 600ms ease; -moz-transition:all 600ms ease; -webkit-transition:all 600ms ease; -ms-transition:all 600ms ease; -o-transition:all 600ms ease; } .video-box-two .overlay-box span:hover{ background-color:var(--main-color); } .info-column{ position:relative; margin-bottom:var(--margin-bottom-30); } .info-column .inner-column{ position:relative; border-radius:4px; padding:45px 35px; background-color:var(--dark-color-three); } .info-column .info-list{ position:relative; } .info-column .info-list li{ position:relative; line-height:1.7em; color:var(--white-color); font-size:var(--font-18); margin-bottom:var(--margin-bottom-30); padding-bottom:var(--padding-bottom-25); border-bottom:1px solid var(--white-color-rgba); } .info-column .info-list li strong{ position:relative; font-weight:500; display:block; font-size:var(--font-28); text-transform:capitalize; margin-bottom:var(--margin-bottom-20); font-family:var(--font-family-Teko); padding-left:var(--padding-left-35); } .info-column .info-list li strong:before{ position:absolute; content:'\f2c1'; left:0px; top:0px; line-height:1em; font-family: 'FontAwesome'; } .info-column .info-list li a{ position:relative; color:var(--white-color); font-size:var(--font-18); } .info-column .info-list li:last-child{ margin-bottom:var(--margin-zero); } .info-column .opening{ position:relative; color:var(--white-color); margin-top:var(--margin-top-40); padding-left:var(--padding-left-100); } .info-column .opening .icon{ position:absolute; left:0px; top:0px; width:78px; width:78px; line-height:78px; text-align:center; border-radius:3px; color:var(--white-color); font-size:var(--font-30); background-color:var(--white-color-rgba-two); } .info-column .opening strong{ position:relative; font-weight:500; display:block; color:var(--white-color); font-size:var(--font-28); text-transform:capitalize; margin-bottom:var(--margin-bottom-15); font-family:var(--font-family-Teko); } .info-column .social-box{ position:relative; margin-top:var(--margin-top-40); } .info-column .social-box li{ position:relative; display:inline-block; margin-right:var(--margin-right-10); } .info-column .social-box li a{ position:relative; width:50px; height:50px; line-height:50px; text-align:center; display:inline-block; border-radius:50px; font-weight:normal; color:var(--white-color); font-size:var(--font-16); font-family: 'FontAwesome'; margin-bottom:var(--margin-bottom-5); background-color:var(--white-color-rgba-two); } .info-column .info-list li a .icon{ position:relative; display:inline-block; margin-right:var(--margin-right-15); } .info-column .social-box li a:hover{ background-color:var(--main-color); } .mt-35 { margin-top: 35px; } /*** ==================================================================== Business Section ==================================================================== ***/ .business-section{ position:relative; overflow:hidden; padding:120px 0px 70px; background-repeat:repeat; background-color:var(--white-color); } .business-section .auto-container{ max-width:1440px; } .business-section .left-column{ position:relative; margin-bottom:var(--margin-bottom-30); } .business-section .left-column .inner-column{ position:relative; } .business-section .left-column .business-block:nth-child(2){ transform:translateX(-50px); } .business-block{ position:relative; margin-bottom:var(--margin-bottom-70); } .business-block .inner-box{ position:relative; padding:30px 35px; border-radius:8px; background-color:var(--white-color); box-shadow:0px 0px 15px rgba(0,0,0,0.07); } .business-block .inner-box:before{ position:absolute; content:''; right:15px; bottom:15px; width:42px; height:35px; background:url(../images/icons/business-arrow.png) no-repeat; } .business-block .inner-box .content{ position:relative; padding-left:var(--padding-left-85); } .business-block .inner-box .icon-box{ position:absolute; left:0px; top:12px; display:inline-block; transition: all 600ms ease; -moz-transition: all 600ms ease; -webkit-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; } .business-block .inner-box:hover .icon-box{ -webkit-transform: scale(-1) rotate(180deg); -moz-transform: scale(-1) rotate(180deg); -ms-transform: scale(-1) rotate(180deg); -o-transform: scale(-1) rotate(180deg); transform: scale(-1) rotate(180deg); } .business-block .inner-box .icon-box:before{ position:absolute; content:''; left:20px; top:10px; width:50px; height:24px; opacity:0.10; border-radius:50px; transform:rotate(135deg); background-color:var(--main-color); } .business-block .inner-box .icon-box .icon{ position:relative; line-height:1em; color:var(--main-color); font-size:var(--font-60); font-family: "Flaticon"; } .business-block .inner-box h4{ font-weight:500; text-transform:uppercase; } .business-block .inner-box h4 a{ color:var(--heading-color); } .business-block .inner-box:hover h4 a{ color:var(--main-color); } .business-block .inner-box .text{ opacity:0.90; max-width:240px; font-size:var(--font-14); margin-top:var(--margin-top-5); } .business-section .image-column{ position:relative; margin-bottom:var(--margin-bottom-30); } .business-section .image-column .inner-column{ position:relative; text-align:center; padding-top:var(--padding-top-60); } .business-section .image-column .image{ position:relative; overflow:hidden; display:inline-block; border-radius:80px 0px 80px 0px; } .business-section .image-column .circle-layer{ position:absolute; left:10px; top:0px; width:167px; height:167px; border-radius:50%; background-color:var(--main-color); } .business-section .image-column .circle-layer-two{ position:absolute; right:20px; bottom:-30px; width:161px; height:166px; border-radius:15px; background-color:var(--color-three); } .business-section .image-column .pattern-layer{ position:absolute; left:0px; bottom:-40px; width:289px; height:236px; background:no-repeat; } .business-section .right-column{ position:relative; margin-bottom:var(--margin-bottom-30); } .business-section .right-column .inner-column{ position:relative; } .business-section .right-column .business-block:nth-child(2){ transform:translateX(50px); } /*** ==================================================================== Team Section ==================================================================== ***/ .team-section{ position:relative; overflow:hidden; padding:110px 0px 0px; background-color:var(--white-color); } .team-section:before{ position:absolute; content:''; left:0px; bottom:0px; right:0px; height:250px; background-color:var(--grey-color); } .team-section .more-members{ position:relative; margin-top:var(--margin-top-100); } .team-section .more-members .members{ position:relative; } .team-section .more-members .members li{ position:relative; width:62px; height:62px; padding:4px; overflow:hidden; border-radius:50%; margin-left:-22px; display:inline-block; -webkit-transition:all 500ms ease; -moz-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; transition:all 500ms ease; background-color:var(--white-color); box-shadow:0px 0px 10px rgba(0,0,0,0.07); } .team-section .more-members .members:hover li{ margin:0px 2px; } .team-section .more-members .members li:last-child{ width:auto; height:auto; overflow:visible; border-radius:0px; box-shadow:inherit; background:inherit; margin-left:var(--margin-left-15); padding:var(--padding-zero); } .team-section .more-members .members li a{ position:relative; top:-25px; font-weight:500; letter-spacing:1px; color:var(--dark-color); font-size:var(--font-24); font-family:var(--font-family-Teko); padding-right:var(--padding-right-35); } .team-section .more-members .members li a:hover{ color:var(--main-color); } .team-section .more-members .members li a:before{ position:absolute; content:'\f30b'; right:0px; top:6px; font-family: 'FontAwesome'; } .team-section .outer-container{ position:relative; max-width:1590px; margin:0 auto; padding:0px 15px; } .team-block{ position:relative; margin-bottom:var(--margin-bottom-30); } .team-block .inner-box{ position:relative; } .team-block .inner-box .image{ position:relative; border-radius:5px; overflow:hidden; } .team-block .inner-box .image img{ position:relative; width:100%; display:block; } .team-block .inner-box .image .content{ position:absolute; left:30px; bottom:0px; right:30px; text-align:center; border-radius:10px; padding:22px 15px 22px; background-color:var(--white-color); -webkit-transition:all 500ms ease; -moz-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; transition:all 500ms ease; } .team-block .inner-box .image .content:before{ position:absolute; content:''; left:50%; top:0px; opacity:0; margin-left:-7px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 15px solid var(--main-color); -webkit-transition:all 500ms ease; -moz-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; transition:all 500ms ease; } .team-block .inner-box:hover .image .content:before{ top:-14px; opacity:1; -webkit-transition-delay: 150ms; -moz-transition-delay: 150ms; -ms-transition-delay: 150ms; -o-transition-delay: 150ms; transition-delay: 150ms; } .team-block .inner-box:hover .image .content{ bottom:30px; background-color:var(--main-color); } .team-block .inner-box .designation{ position:relative; font-weight:500; opacity:0.75; color:var(--text-color); text-transform:uppercase; -webkit-transition:all 500ms ease; -moz-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; transition:all 500ms ease; } .team-block .inner-box h4{ font-weight:500; margin-top:var(--margin-top-5); } .team-block .inner-box h4 a{ color:var(--heading-color); -webkit-transition:all 500ms ease; -moz-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; transition:all 500ms ease; } .team-block .inner-box h4 a:hover{ color:var(--main-color); } .team-block .inner-box:hover h4 a, .team-block .inner-box:hover .designation{ color:var(--white-color); } .team-block .inner-box .icon-layer-one{ position:absolute; left:15px; bottom:15px; width:18px; height:18px; background-repeat:no-repeat; } .team-block .inner-box .icon-layer-two{ position:absolute; right:15px; bottom:15px; width:25px; height:25px; background-repeat:no-repeat; } .team-block .inner-box .social-outer{ position:absolute; right:25px; top:25px; bottom:25px; overflow:hidden; border-radius:50px; } .team-block .inner-box .social-outer .plus-icon{ position:relative; width:40px; height:40px; color:#5D5D70; z-index:1; text-align:center; line-height:40px; border-radius:50px; display:inline-block; font-size:var(--font-18); background-color:var(--white-color); -webkit-transition:all 500ms ease; -moz-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; transition:all 500ms ease; } .team-block .inner-box:hover .social-outer .plus-icon{ transform:rotate(45deg); } .team-block .inner-box .social-outer .social-box{ position:absolute; left:14px; top:-150%; opacity:0; z-index:1; -webkit-transition:all 500ms ease; -moz-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; transition:all 500ms ease; } .team-block .inner-box:hover .social-outer .social-box{ top:15%; opacity:1; } .team-block .inner-box .social-outer .social-box li{ position:relative; margin-bottom:var(--margin-bottom-10); } .team-block .inner-box .social-outer .social-box li a{ position:relative; font-weight:normal; font-size:var(--font-16); color:var(--white-color); font-family: 'FontAwesome'; } .team-block .inner-box .social-outer .social-box li a:hover{ color:var(--main-color); } /*** ==================================================================== Form Section ==================================================================== ***/ .form-section{ position:relative; overflow:hidden; padding:110px 0px 70px; background-color:var(--grey-color); } .form-section.style-two{ padding-top:var(--padding-top-130); background-color:var(--white-color); } .form-section .form-column{ position:relative; margin-bottom:var(--margin-bottom-30); } .form-section .form-column .inner-column{ position:relative; padding-right:var(--padding-right-30); } /* Default Form*/ .default-form{ position:relative; } .default-form .form-group{ position:relative; margin-bottom:var(--margin-bottom-25); } .default-form .form-group .text{ position:relative; font-size:var(--font-16); color:var(--white-color); margin-bottom:var(--margin-bottom-5); font-family:var(--font-family-DM-Sans); } .default-form input[type="text"], .default-form input[type="email"], .default-form input[type="password"], .default-form select, .default-form textarea{ display:block; width:100%; line-height:28px; height:56px; padding:8px 22px; border-radius:3px; font-size:var(--font-15); color:var(--dark-color); transition:all 500ms ease; -webkit-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; border:1px solid transparent; background:var(--color-two); } .default-form .form-group textarea::-webkit-input-placeholder, .default-form .form-group input::-webkit-input-placeholder{ color:var(--black-color); } .default-form textarea{ height:210px; resize:none; font-size:15px; padding-top:15px; } .default-form input[type="text"]:focus, .default-form input[type="email"]:focus, .default-form input[type="password"]:focus, .default-form select:focus, .default-form textarea:focus{ border-color:var(--main-color); } .default-form .theme-btn{ cursor:pointer; } /* Radio Box */ .default-form .form-group .radio-box{ position:relative; margin-bottom:3px; margin-top:7px; } .default-form .form-group .radio-box label{ color:#2b2b2b; } .default-form .form-group .radio-box label{ position: relative; display: block; width: 100%; line-height: 22px; padding-left: 30px; background:none; font-weight: 400; font-size: var(--font-15); color:var(--black-color); cursor: pointer; margin-bottom: 0; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; font-family:var(--font-family-Roboto); } .default-form .form-group .radio-box input[type="radio"]:checked + label{ border-color: var(--main-color); } .default-form .form-group .form-group .radio-box label { padding-left: 30px; padding-top: 1px; cursor: pointer; } .default-form .form-group .radio-box label:before{ position: absolute; left: 0px; top: 0px; height:17px; width: 17px; content: ""; border-radius: 0px; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; border:1px solid var(--color-three); } .default-form .form-group .radio-box label:after { position: absolute; left: 0px; top: 0; height: 15px; line-height: 15px; max-width: 0; font-size: 14px; color: #ffffff; font-weight: 800; overflow: hidden; background: transparent; text-align: center; font-family: 'FontAwesome'; -webkit-transition: max-width 500ms ease; -moz-transition: max-width 500ms ease; -ms-transition: max-width 500ms ease; -o-transition: max-width 500ms ease; transition: max-width 500ms ease; } .default-form .form-group .radio-box input[type="radio"] { display: none; } .default-form .form-group .radio-box input[type="radio"]:checked + label:before{ border: 7px solid var(--main-color); } .default-form .form-group .radio-box input[type="radio"]:checked + label:after{ max-width: 20px; opacity: 1; } .form-section .image-column{ position:relative; margin-bottom:var(--margin-bottom-30); } .form-section .image-column .inner-column{ position:relative; padding-left:var(--padding-left-50); } .form-section .image-column .image{ position:relative; overflow:hidden; border-radius:30px; margin-top:var(--margin-top-80); } .form-section .image-column .image img{ position:relative; width:100%; display:block; } .form-section .image-column .color-layer{ position:absolute; left:0px; bottom:0px; width:357px; height:285px; border-radius:20px; transform:rotate(20deg); background-color:var(--main-color); } .form-section .image-column .author-box-one{ position:absolute; left:0px; top:230px; overflow:hidden; border-radius:12px; } .form-section .image-column .author-box-two{ position:absolute; right:-90px; bottom:-50px; overflow:hidden; border-radius:12px; } .form-section .image-column .icon{ position:absolute; right:50px; top:-60px; width:135px; height:135px; z-index:1; text-align:center; border-radius:50%; line-height:135px; outline-offset: -10px; font-size:var(--font-54); color:var(--white-color); background-color:var(--main-color); outline: 1px dashed var(--white-color); } /*** ==================================================================== CTA Section ==================================================================== ***/ .cta-section{ position:relative; } .cta-section:before{ position:absolute; content:''; left:0px; top:0px; height:61px; right:0px; background-color:var(--grey-color); } .cta-section .auto-container{ max-width:1440px; } .cta-section .icon-layer-one{ position:absolute; left:20px; top:35px; width:50px; height:50px; background-repeat:no-repeat; } .cta-section .icon-layer-two{ position:absolute; left:42%; top:35px; width:31px; height:33px; background-repeat:no-repeat; } .cta-section .icon-layer-three{ position:absolute; left:48%; bottom:0px; width:369px; height:94px; background-repeat:no-repeat; } .cta-section .inner-container{ position:relative; padding:30px 70px; border-radius:4px; background-color:var(--dark-color); } .cta-section h3{ font-weight:500; font-size:var(--font-40); color:var(--white-color); margin-top:var(--margin-top-10); } .cta-section h3 span{ color:var(--main-color); } /*** ==================================================================== Testimonial Section ==================================================================== ***/ .testimonials-section{ position:relative; padding:120px 0px 70px; background-color:var(--white-color); } .testimonials-section .pattern-layer{ position:absolute; left:-50px; bottom:-190px; width:383px; height:545px; background-repeat:no-repeat; } .testimonials-section .icon-layer { position: absolute; content: ''; left: 15%; top: 2%; width: 20px; height: 20px; background-repeat: no-repeat; } .testimonials-section .thumbs-column{ position:relative; margin-bottom:var(--margin-bottom-30); } .testimonials-section .thumbs-column .inner-column{ position:relative; } .testimonials-section .thumbs-column .quote-icon { position: absolute; top: 38px; right: 22%; } .testimonials-section .thumbs-column .thumbs{ position:relative; } .testimonials-section .thumbs-column .image-one { position: absolute; left: -35px; top: 35px; width: 119px; height: 119px; padding: 7px; overflow: hidden; border-radius: 50%; background-color: var(--white-color); box-shadow: 0px 0px 15px rgba(0,0,0,0.10); } .testimonials-section .thumbs-column .image-one img { border-radius: 50%; } .testimonials-section .thumbs-column .image-two{ position:absolute; right:22%; top:0px; width:119px; height:119px; padding: 5px; overflow:hidden; border-radius:50%; background-color:var(--white-color); box-shadow:0px 0px 15px rgba(0,0,0,0.10); } .testimonials-section .thumbs-column .image-two img{ border-radius:50%; } .testimonials-section .thumbs-column .image-three{ position:relative; left:0%; top:150px; width:126px; height:126px; padding: 5px; overflow:hidden; border-radius:50%; background-color:var(--white-color); box-shadow:0px 0px 15px rgba(0,0,0,0.10); } .testimonials-section .thumbs-column .image-three img{ border-radius:50%; } .testimonials-section .thumbs-column .image-four { position: relative; left: 58%; top: -260px; width: 66px; height: 66px; padding: 5px; overflow: hidden; border-radius: 50%; background-color: var(--white-color); box-shadow: 0px 0px 15px rgba(0,0,0,0.10); } .testimonials-section .thumbs-column .image-four img{ border-radius:50%; } .testimonials-section .thumbs-column .image-five { position: absolute; right: 19%; top: 190px; width: 73px; height: 73px; padding: 5px; overflow: hidden; border-radius: 50%; background-color: var(--white-color); box-shadow: 0px 0px 15px rgba(0,0,0,0.10); } .testimonials-section .thumbs-column .image-five img{ border-radius:50%; } .testimonials-section .thumbs-column .image-six { position: relative; left: 3%; width: 50px; height: 50px; padding: 4px; overflow: hidden; border-radius: 50%; display: inline-block; margin-top: 0; background-color: var(--white-color); box-shadow: 0px 0px 15px rgba(0,0,0,0.10); bottom: 197px; } .testimonials-section .thumbs-column .image-six img{ border-radius:50%; } .testimonials-section .thumbs-column .image-seven{ position:relative; left:42%; bottom:-50px; width:154px; height:154px; padding: 5px; overflow:hidden; border-radius:50%; display:inline-block; background-color:var(--white-color); box-shadow:0px 0px 15px rgba(0,0,0,0.10); } .testimonials-section .thumbs-column .image-seven img{ border-radius:50%; } .testimonials-section .carousel-column{ position:relative; margin-bottom:var(--margin-bottom-30); } .testimonials-section .carousel-column .inner-column{ position:relative; margin-left:-20px; } .testimonials-section .carousel-column .owl-dots{ display:none; } .testimonials-section .carousel-column .owl-nav{ position:absolute; right:100px; bottom:5px; } .testimonials-section .carousel-column .owl-nav .owl-next{ position:relative; width:60px; height:55px; line-height:55px; text-align:center; display:inline-block; font-size:var(--font-20); color:var(--color-nine); font-family: "Flaticon"; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; margin-left:var(--margin-left-5); color:var(--white-color); background-color:var(--main-color); } .testimonials-section .carousel-column .owl-nav .owl-prev{ position:relative; width:60px; height:55px; line-height:55px; text-align:center; display:inline-block; font-size:var(--font-20); color:var(--color-nine); font-family: "Flaticon"; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; margin-left:var(--margin-left-5); } .testimonials-section .carousel-column .owl-nav .owl-prev:hover, .testimonials-section .carousel-column .owl-nav .owl-next:hover{ color:var(--white-color); background-color:var(--main-color); } .testimonial-block{ position:relative; } .testimonial-block .inner-box{ position:relative; } .testimonial-block .inner-box .text{ line-height:1.9em; font-size:var(--font-20); } .testimonial-block .inner-box .text .quote-left{ position:relative; line-height:1em; font-size:var(--font-26); color:var(--main-color); margin-right:var(--margin-right-10); } .testimonial-block .inner-box .text .quote-right{ position:relative; line-height:1em; font-size:var(--font-26); color:var(--main-color); margin-left:var(--margin-left-10); } .testimonial-block .inner-box .author-box{ position:relative; margin-top:var(--margin-top-35); } .testimonial-block .inner-box .author-box .box-inner{ position:relative; min-height:74px; padding-top:var(--padding-top-10); padding-left:var(--padding-left-90); } .testimonial-block .inner-box .author-box .author-image{ position:absolute; left:0px; top:0px; width:74px; height:74px; overflow:hidden; border-radius:50%; } .testimonial-block .inner-box .author-box h4{ font-weight:500; } .testimonial-block .inner-box .author-box .designation{ position:relative; color:var(--main-color); font-size:var(--font-16); margin-top:var(--margin-top-5); } .tm_bg { position: absolute; top: -17px; left: -66px; width: 100%; height: 100%; z-index: -1; background-repeat: no-repeat; } .author_img_wrap { z-index: 1; position: relative; margin-left: -70px; margin-top: -20px; } .author_img { margin-left: -70px; } /*** ==================================================================== Counter Section ==================================================================== ***/ .counter-section{ position:relative; z-index:10; } .counter-section .auto-container{ max-width:1340px; } .counter-section .inner-container{ position:relative; border-radius:5px; overflow:hidden; padding:60px 40px 30px; background-color:var(--main-color); } .counter-section .vector-layer-one{ position:absolute; left:-60px; top:-40px; width:200px; height:205px; } .counter-section .vector-layer-two{ position:absolute; right:-65px; bottom:-40px; width:200px; height:205px; } .counter-section .vector-layer-three{ position:absolute; left:42%; top:-90px; width:200px; height:205px; } .counter-section .vector-layer-four{ position:absolute; left:19%; top:-100px; width:202px; height:201px; } .counter-section .vector-layer-five{ position:absolute; right:19%; top:-100px; width:202px; height:201px; } .counter-section .vector-layer-six{ position:absolute; left:42%; bottom:-100px; width:202px; height:201px; } /* Fact Counter */ .fact-counter{ position:relative; } .fact-counter .counter-column{ position:relative; margin-bottom:var(--margin-bottom-30); } .fact-counter .counter-column .inner{ position:relative; text-align:center; } .fact-counter .counter-column .inner .content{ position:relative; } .fact-counter .counter-column .inner .icon{ font-weight:400; color:var(--white-color); font-size:var(--font-50); font-family: "Flaticon"; display:inline-block; margin-bottom:var(--margin-bottom-35); transition: all 600ms ease; -moz-transition: all 600ms ease; -webkit-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; } .fact-counter .counter-column .inner:hover .icon{ -webkit-transform: scale(-1) rotate(180deg); -moz-transform: scale(-1) rotate(180deg); -ms-transform: scale(-1) rotate(180deg); -o-transform: scale(-1) rotate(180deg); transform: scale(-1) rotate(180deg); } .fact-counter .count-outer .percentage{ position:relative; } .fact-counter .counter-column .inner .count-outer{ position:relative; font-weight:400; line-height:1em; color:var(--white-color); font-size:var(--font-50); font-family:var(--font-family-Teko); } .fact-counter .counter-column h5{ font-weight:400; color:var(--white-color); margin-top:var(--margin-top-10); font-family:var(--font-family-Roboto); } /*** ==================================================================== News Section ==================================================================== ***/ .news-section{ position:relative; margin-top:-144px; padding:270px 0px 80px; background-color:var(--grey-color); } .news-section .news-block{ padding:0px; float:left; } .news-block{ position:relative; margin-bottom:var(--margin-bottom-30); } .news-block .inner-box{ position:relative; background-color:var(--white-color); } .news-block .inner-box .image{ position:relative; overflow:hidden; background-color:var(--main-color); } .news-block .inner-box .image img{ position:relative; width:100%; display:block; -webkit-transition: all 600ms ease; -moz-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; transition: all 600ms ease; } .news-block.active .inner-box .image img, .news-block .inner-box:hover .image img{ opacity:0.60; transform:scale(1.06,1.06) rotate(2deg); } .news-block .inner-box .image:before{ position: absolute; top: 0; left: -85%; z-index: 2; display: block; content: ''; width: 50%; height: 100%; background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%); background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, .3))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%); -webkit-transform: skewX(-25deg); -ms-transform: skewX(-25deg); transform: skewX(-25deg); z-index: 1; } .news-block .inner-box:hover .image::before{ -webkit-animation: shine 1s; animation: shine 1s; } .news-block .inner-box .category{ position:absolute; left:25px; bottom:25px; z-index:1; font-weight:700; padding:12px 42px; letter-spacing:1px; border-radius:50px; display:inline-block; letter-spacing:1px; font-size:var(--font-15); color:var(--white-color); text-transform:uppercase; background-color:var(--dark-color); font-family:var(--font-family-Rubik); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .news-block.active .inner-box .category, .news-block .inner-box:hover .category{ color:var(--dark-color); background-color:var(--white-color); } @-webkit-keyframes shine { 100% { left: 125%; } } @keyframes shine { 100% { left: 125%; } } .news-block .inner-box .lower-content{ position:relative; padding:30px 30px; } .news-block .inner-box .lower-content:before{ position:absolute; content:''; left:0px; top:0px; bottom:0px; right:0px; opacity:0; -webkit-transition: all 600ms ease; -moz-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; transition: all 600ms ease; transform:scale(0.3,1); background-color:var(--main-color); } .news-block.active .inner-box .lower-content:before, .news-block .inner-box:hover .lower-content:before{ opacity:1; transform:scale(1,1); } .news-block .inner-box .post-info{ position:relative; } .news-block .inner-box .post-info li{ position:relative; display:inline-block; font-size:var(--font-16); padding-left:var(--padding-left-25); margin-right:var(--margin-right-15); color:var(--black-color-rgba); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .news-block .inner-box .post-info li .icon{ position:absolute; left:0px; top:2px; color:var(--main-color); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .news-block .inner-box .post-info li:last-child{ margin-right:var(--margin-zero); } .news-block .inner-box h3{ font-weight:600; margin-top:var(--margin-top-20); } .news-block .inner-box h3 a{ color:var(--heading-color); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .news-block .inner-box:hover .post-info li, .news-block .inner-box:hover .post-info li .icon, .news-block .inner-box:hover .read-more, .news-block .inner-box:hover h3 a, .news-block.active .inner-box .post-info li, .news-block.active .inner-box .post-info li .icon, .news-block.active .inner-box .read-more, .news-block.active .inner-box h3 a{ color:var(--white-color); } .news-block .inner-box .read-more{ position:relative; letter-spacing:1px; font-weight:500; color:var(--dark-color); font-size:var(--font-16); text-transform:uppercase; display:inline-block; margin-top:var(--margin-top-20); font-family:var(--font-family-Rubik); padding-right:var(--padding-right-10); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .news-block .inner-box .read-more:before{ position:absolute; content:'\f061'; left:100%; top:-1px; font-family: 'FontAwesome'; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .news-block.active .inner-box .read-more::before, .news-block .inner-box .read-more:hover::before{ left:0%; } .news-block.active .inner-box .read-more, .news-block .inner-box .read-more:hover{ padding-left:var(--padding-left-25); padding-right:var(--padding-zero); } /*** ==================================================================== Featured Section ==================================================================== ***/ .featured-section{ position:relative; padding:65px 0px 30px; background-color:var(--color-eleven); background-position:left bottom; background-repeat:no-repeat; } .feature-block{ position:relative; margin-bottom:var(--margin-bottom-30); } .feature-block .inner-box{ position:relative; } .feature-block .inner-box:before{ position:absolute; content:''; right:15px; top:0px; bottom:0px; width:1px; opacity:0.10; background-color:var(--white-color); } .feature-block:last-child .inner-box::before{ display:none; } .feature-block .inner-box .number{ position:absolute; right:60px; top:20px; opacity:0.50; font-size:var(--font-28); color:var(--white-color); font-family:var(--font-family-Teko); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .feature-block .inner-box:hover .number{ opacity:1; } .feature-block .inner-box .icon{ position:relative; width:60px; height:60px; line-height:60px; border-radius:20px; text-align:center; font-size:var(--font-28); color:var(--white-color); display:inline-block; font-family: "Flaticon"; background-color:var(--white-color-rgba-two); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .feature-block .inner-box:hover .icon{ transform:rotateY(360deg); background-color:var(--main-color); } .feature-block .inner-box h4{ font-weight:600; letter-spacing:1px; margin-top:var(--margin-top-30); } .feature-block .inner-box h4 a{ position:relative; color:var(--white-color); } .feature-block .inner-box .text{ color:#797F90; padding-right:var(--padding-right-30); margin-top:var(--margin-top-15); } .feature-block .inner-box:hover h4 a{ color:var(--main-color); } /*** ==================================================================== About Section Two ==================================================================== ***/ .about-section-two{ position:relative; padding:110px 0px 70px; } .about-section-two .pattern-layer{ position:absolute; left:0px; top:0px; width:485px; height:602px; background-repeat:no-repeat; } .about-section-two .pattern-layer-two{ position:absolute; right:0px; top:0px; width:186px; height:235px; background-repeat:no-repeat; } .about-section-two .images-column{ position:relative; margin-bottom:var(--margin-bottom-30); } .about-section-two .images-column .inner-column{ position:relative; } .about-section-two .images-column .icon-one{ position:absolute; left:-110px; top:60px; width:70px; height:70px; z-index:1; line-height:70px; line-height:70px; border-radius:50px; display:inline-block; font-size:var(--font-24); color:var(--white-color); text-align:center !important; background-color:var(--main-color); } .about-section-two .images-column .icon-two{ position:absolute; right:140px; top:180px; width:110px; height:110px; z-index:1; line-height:110px; text-align:center; border-radius:50%; font-size:var(--font-54); color:var(--white-color); font-family: "Flaticon"; background-color:var(--main-color); } .about-section-two .images-column .icon-two:after{ position:absolute; content:''; left:0px; right:0px; top:0px; bottom:0px; border-radius:50%; outline: 1px dashed var(--grey-color-two); outline-offset: 15px; } .about-section-two .images-column .image{ position:relative; border-radius:6px; overflow:hidden; display:inline-block; } .about-section-two .images-column .image-two{ position:absolute; right:90px; top:40px; border-radius:6px; overflow:hidden; } .about-section-two .images-column .video-box-three{ left:170px; margin-top:-100px; } .about-section-two .images-column .target-icon{ position:absolute; left:-100px; bottom:-40px; width:264px; height:286px; background-repeat:no-repeat; } .about-section-two .content-column{ position:relative; margin-bottom:var(--margin-bottom-35); } .about-section-two .content-column .inner-column{ position:relative; } .about-section-two .content-column .employe-box{ position:relative; margin-bottom:var(--margin-bottom-45); } .about-section-two .content-column .employe-box .box-inner{ position:relative; padding-left:140px; } .about-section-two .content-column .employe-box .globe-icon{ position:absolute; left:0px; top:0px; line-height:1em; font-family: "Flaticon"; color:var(--main-color); font-size:var(--font-120); } .about-section-two .content-column .list{ position:relative; display:inline-block; } .about-section-two .content-column .list li{ position:relative; color:var(--text-color); font-size:var(--font-16); padding-left:var(--padding-left-25); margin-bottom:var(--margin-bottom-10); } .about-section-two .content-column .list li:before{ position:absolute; content:''; left:0px; top:9px; width:6px; height:6px; background-color:var(--main-color); } .about-section-two .content-column .employe{ position:absolute; right:0px; top:-20px; width:160px; height:155px; padding-top:25px; text-align:center; border-radius:5px; background-color:var(--main-color); } .about-section-two .content-column .employe:before{ position:absolute; content:''; left:0px; top:25px; bottom:25px; width:6px; background-color:var(--dark-color); clip-path: polygon(0 0, 100% 4%, 100% 96%, 0% 100%); } .about-section-two .content-column .employe .count-box{ position:relative; font-weight:500; line-height:1em; font-size:var(--font-80); color:var(--white-color); font-family:var(--font-family-Teko); } .about-section-two .content-column .employe .count-box sup{ position:relative; font-weight:300; opacity:0.50; top:-25px; display:inline-block; font-size:var(--font-44); margin-left:var(--margin-left-5); } .about-section-two .content-column .employe .text{ font-weight:500; letter-spacing:1px; font-size:var(--font-15); color:var(--white-color); text-transform:uppercase; font-family:var(--font-family-Roboto); } /* Video Box */ .video-box-three{ position:relative; overflow:hidden; display:inline-block; border-radius:10px; } .video-box-three.style-two{ border-radius:0px; } .video-box-three .video-image{ position:relative; margin:0px; overflow:hidden; } .video-box-three .video-image img{ position:relative; width:100%; } .video-box-three:hover .video-image img{ opacity:0.90; transform:scale(1.02,1.02); } .video-box-three .overlay-box{ position:absolute; left:0px; top:0px; width:100%; height:100%; text-align:center; overflow:hidden; line-height: 45px; overflow:hidden; } .video-box-three .overlay-box:before{ position:absolute; content:''; left:0px; top:0px; right:0px; bottom:0px; z-index:10; } .video-box-three .overlay-box .fas{ position: absolute; width:80px; height: 80px; left:50%; top: 50%; z-index:10; font-weight:700; text-align: center; display: inline-block; margin-top: -40px; margin-left:-40px; line-height:80px; border-radius:50%; font-size:var(--font-24); color: var(--main-color); padding-left:var(--padding-left-5); background-color:var(--white-color); transition:all 600ms ease; -moz-transition:all 600ms ease; -webkit-transition:all 600ms ease; -ms-transition:all 600ms ease; -o-transition:all 600ms ease; } .video-box-three .overlay-box span:hover{ color:var(--white-color); background-color:var(--main-color); } .video-box-three .ripple, .video-box-three .ripple:before, .video-box-three .ripple:after { position: absolute; top: 50%; left: 50%; width:80px; height: 80px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-border-radius: 50% 50% 50% 50%; -moz-border-radius: 50% 50% 50% 50%; -ms-border-radius: 50% 50% 50% 50%; -o-border-radius: 50% 50% 50% 50%; border-radius: 50% 50% 50% 50%; -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); -ms-box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); -o-box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); -webkit-animation: ripple 3s infinite; -moz-animation: ripple 3s infinite; -ms-animation: ripple 3s infinite; -o-animation: ripple 3s infinite; animation: ripple 3s infinite; } .video-box-three .ripple:before { -webkit-animation-delay: .9s; -moz-animation-delay: .9s; -ms-animation-delay: .9s; -o-animation-delay: .9s; animation-delay: .9s; content: ""; position: absolute; } .video-box-three .ripple:after { -webkit-animation-delay: .6s; -moz-animation-delay: .6s; -ms-animation-delay: .6s; -o-animation-delay: .6s; animation-delay: .6s; content: ""; position: absolute; } /*** ==================================================================== Agency Section ==================================================================== ***/ .agency-section{ position:relative; padding:130px 0px 70px; background-color:var(--grey-color); } .agency-section .title-column{ position:relative; margin-bottom:var(--margin-bottom-30); } .agency-section .title-column .inner-column{ position:relative; padding-top:var(--padding-top-40); } .agency-section .title-column .about-list{ position:relative; } .agency-section .title-column .about-list li{ position:relative; padding-top:3px; color:var(--text-color); font-size:var(--font-18); padding-left:var(--padding-left-45); margin-bottom:var(--margin-bottom-25); } .agency-section .title-column .about-list li:before{ position:absolute; content:'\f00e'; left:0px; top:0px; width:27px; height:27px; line-height:27px; text-align:center; border-radius:50px; font-family:IcoFont; color:var(--main-color); background-color:var(--white-color); box-shadow:0px 0px 15px rgba(0,0,0,0.05); } .agency-section .title-column .about-list li:last-child{ margin-bottom:var(--margin-zero); } .agency-section .title-column .button-box{ position:relative; margin-top:var(--margin-top-60); } .agency-section .blocks-column{ position:relative; margin-bottom:var(--margin-bottom-30); } .agency-section .blocks-column .inner-column{ position:relative; } .agency-section .blocks-column .business-block-two:nth-child(2n + 0){ transform:translateY(40px); } /* Business Block Two */ .business-block-two{ position:relative; margin-bottom:var(--margin-bottom-30); } .business-block-two .inner-box{ position:relative; border-radius:8px; overflow:hidden; padding:60px 30px 50px; background-color:var(--white-color); box-shadow:0px 0px 15px rgba(0,0,0,0.07); } .business-block-two .inner-box:before{ position:absolute; content:''; left:0px; top:0px; width:100%; height:100%; overflow:hidden; transition: -webkit-transform 0.4s ease; transition: transform 0.4s ease; transition: transform 0.4s ease, -webkit-transform 0.4s ease; background-color:var(--main-color); transition: all 900ms ease; -moz-transition: all 900ms ease; -webkit-transition: all 900ms ease; -ms-transition: all 900ms ease; -o-transition: all 900ms ease; transition: -webkit-transform 0.4s ease; transition: transform 0.4s ease; transition: transform 0.4s ease, -webkit-transform 0.4s ease; -webkit-transform: scale(0, 1); -ms-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: right center; -ms-transform-origin: right center; transform-origin: right center; background-position:center center; } .business-block-two .inner-box:hover::before{ -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; } .business-block-two .inner-box .vector-icon{ position:absolute; right:45px; top:45px; width:20px; height:20px; opacity:0.50; background-repeat:no-repeat; } .business-block-two .inner-box .content{ position:relative; } .business-block-two .inner-box .icon-box{ position:relative; display:inline-block; transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; -moz-transition:all 500ms ease; -webkit-transition:all 500ms ease; } .business-block-two .inner-box:hover .icon-box{ -webkit-transform: scale(-1) rotate(180deg); -moz-transform: scale(-1) rotate(180deg); -ms-transform: scale(-1) rotate(180deg); -o-transform: scale(-1) rotate(180deg); transform: scale(-1) rotate(180deg); } .business-block-two .inner-box .icon-box:before{ position:absolute; content:''; left:0px; top:-20px; width:67px; height:53px; background:url(../images/icons/vector-20.png) no-repeat; } .business-block-two .inner-box .icon-box .icon{ position:relative; line-height:1em; color:var(--main-color); font-size:var(--font-56); font-family: "Flaticon"; transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; -moz-transition:all 500ms ease; -webkit-transition:all 500ms ease; } .business-block-two .inner-box:hover .text, .business-block-two .inner-box:hover h4 a, .business-block-two .inner-box:hover .icon-box .icon{ color:var(--white-color); } .business-block-two .inner-box h4{ font-weight:500; text-transform:uppercase; margin-top:var(--margin-top-30); } .business-block-two .inner-box h4 a{ color:var(--heading-color); transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; -moz-transition:all 500ms ease; -webkit-transition:all 500ms ease; } .business-block-two .inner-box:hover .view, .business-block-two .inner-box:hover h4 a{ color:var(--white-color); } .business-block-two .inner-box .text{ opacity:0.90; max-width:240px; font-size:var(--font-16); margin-top:var(--margin-top-20); transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; -moz-transition:all 500ms ease; -webkit-transition:all 500ms ease; } .business-block-two .inner-box .view{ position:relative; font-weight:500; display:inline-block; font-size:var(--font-16); color:var(--heading-color); margin-top:var(--margin-top-20); padding-right:var(--padding-right-25); transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; -moz-transition:all 500ms ease; -webkit-transition:all 500ms ease; } .business-block-two .inner-box .view:before{ position:absolute; content:''; right:0px; top:0px; content: "\f116"; font-family: "flaticon"; } /*** ==================================================================== Services Section Two ==================================================================== ***/ .services-section-two{ position:relative; overflow:hidden; padding:110px 0px 80px; } .services-section-two .color-layer{ position:absolute; left:-500px; top:-350px; width:1055px; height:733px; border-radius:60px; transform:rotate(45deg); background-color:var(--main-color); } .services-tabs{ position:relative; } .services-tabs .tab-btns{ position:absolute; left:0px; top:0px; z-index:1; width:370px; border-radius:10px; padding:50px 30px 90px; background-color:var(--grey-color); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 95%); } .services-tabs .tab-btns .tab-btn{ position:relative; display:block; background:none; font-weight:400; line-height:24px; cursor:pointer; width:100%; overflow:hidden; border-radius:7px; padding:18px 40px; display:inline-block; font-size:var(--font-24); color:var(--dark-color); text-transform:capitalize; transition:all 500ms ease; font-family:var(--font-family-Teko); margin-bottom:var(--margin-bottom-10); } .services-tabs .tab-btns .tab-btn:hover, .services-tabs .tab-btns .tab-btn.active-btn{ background:var(--white-color); } .services-tabs .tab-btns .tab-btn:hover::before, .services-tabs .tab-btns .tab-btn.active-btn::before{ opacity:1; left:15px; } .services-tabs .tab-btns .tab-btn:before{ position:absolute; content: "\f189"; left:25px; opacity:0; color:var(--main-color); font-family: "flaticon"; font-size:var(--font-15); transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; -moz-transition:all 500ms ease; -webkit-transition:all 500ms ease; } .services-tabs .tabs-content{ position:relative; padding-left:570px; padding-top:var(--padding-top-40); } .services-tabs .tabs-content .tab{ position:relative; display:none; } .services-tabs .tabs-content .tab.active-tab{ display:block; } /* Fact Counter Two */ .fact-counter-two{ position:relative; margin-top:var(--margin-top-30); } .fact-counter-two .counter-column{ position:relative; margin-bottom:var(--margin-bottom-30); } .fact-counter-two .counter-column .inner{ position:relative; text-align:center; overflow:hidden; border-radius:6px; padding:30px 15px 25px; background-color:var(--grey-color); } .fact-counter-two .counter-column .inner .image-layer{ position:absolute; left:0px; top:60px; right:0px; height:135px; background-position:center top; background-repeat:no-repeat; } .fact-counter-two .counter-column .inner:before{ position:absolute; content:''; left:0px; top:0px; bottom:0px; width:30%; opacity:0; -webkit-transition:all 500ms ease; -moz-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; transition:all 500ms ease; background-color:var(--main-color); } .fact-counter-two .counter-column .inner:hover::before{ width:100%; opacity:1; } .fact-counter-two .counter-column .inner .content{ position:relative; } .fact-counter-two .counter-column .inner .icon{ font-weight:400; line-height:1em; display:block; color:var(--main-color); font-size:var(--font-50); font-family: "Flaticon"; -webkit-transition:all 500ms ease; -moz-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; transition:all 500ms ease; margin-bottom:var(--margin-bottom-25); } .fact-counter-two .count-outer .percentage{ position:relative; } .fact-counter-two .counter-column .inner .count-outer{ position:relative; font-weight:400; line-height:1em; color:var(--black-color); font-size:var(--font-50); font-family:var(--font-family-Teko); -webkit-transition:all 500ms ease; -moz-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; transition:all 500ms ease; } .fact-counter-two .counter-column h5{ font-weight:400; color:#727685; margin-top:var(--margin-top-10); font-family:var(--font-family-Roboto); -webkit-transition:all 500ms ease; -moz-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; transition:all 500ms ease; } .fact-counter-two .counter-column .inner:hover .icon, .fact-counter-two .counter-column .inner:hover h5, .fact-counter-two .counter-column .inner:hover .count-outer{ color:var(--white-color); } /*** ==================================================================== Support Section ==================================================================== ***/ .support-section{ position:relative; } .support-section .inner-container{ position:relative; z-index:1; border-radius:7px; overflow:hidden; background-color:#f6f5f8; } .support-section .social-column{ position:relative; } .support-section .social-column .inner-column{ position:relative; padding:35px 35px; } .support-section .social-column h3{ font-weight:500; display:block; font-size:var(--font-28); text-transform:capitalize; color:var(--heading-color); margin-bottom:var(--margin-bottom-20); font-family:var(--font-family-Teko); padding-left:var(--padding-left-35); } .support-section .social-column h3:before{ position:absolute; content:'\f2c1'; left:0px; top:0px; line-height:1em; color:var(--main-color); font-family: 'FontAwesome'; } .support-section .social-column .social-box{ position:relative; margin-top:var(--margin-top-20); } .support-section .social-column .social-box li{ position:relative; display:inline-block; margin-right:var(--margin-right-5); } .support-section .social-column .social-box li a{ position:relative; width:50px; height:50px; line-height:50px; text-align:center; display:inline-block; border-radius:50px; font-weight:normal; color:var(--main-color); font-size:var(--font-16); font-family: 'FontAwesome'; margin-bottom:var(--margin-bottom-5); background-color:var(--white-color); } .support-section .social-column .social-box li a:hover{ color:var(--white-color); background-color:var(--main-color); } .support-section .content-column{ position:relative; } .support-section .content-column .inner-column{ position:relative; padding:50px 15px 45px 110px; background-position:center center; background-repeat:no-repeat; } .support-section .content-column .pattern-layer{ position:absolute; right:100px; bottom:0px; width:369px; height:94px; background-repeat:no-repeat; } .support-section .content-column .inner-column .phone{ position:absolute; right:30px; top:60px; color:var(--white-color); font-size:var(--font-18); } .support-section .content-column .inner-column .phone .icon{ position:relative; top:1px; margin-right:var(--margin-right-10); } .support-section .content-column .inner-column:before{ position:absolute; content:''; left:0px; top:0px; right:-150px; bottom:0px; z-index:-1; transform: skewX(10deg); border-radius:15px 0px 0px 15px; background-color:var(--main-color); } .support-section .content-column .play-box{ position:absolute; left:-35px; top:60px; } .support-section .content-column .play-box .play-button span{ position: relative; width:70px; height: 70px; z-index:10; font-weight:400; padding-left:4px; line-height:70px; border-radius:50%; text-align: center; display: inline-block; font-size:var(--font-20); color: var(--white-color); transition: all 900ms ease; -moz-transition: all 900ms ease; -webkit-transition: all 900ms ease; -ms-transition: all 900ms ease; -o-transition: all 900ms ease; background-color: var(--dark-color); font-family: "Flaticon"; } .support-section .content-column .play-box .play-button .ripple, .support-section .content-column .play-box .play-button .ripple:before, .support-section .content-column .play-box .play-button .ripple:after { position: absolute; top: 50%; left: 50%; width:70px; height: 70px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-border-radius: 50% 50% 50% 50%; -moz-border-radius: 50% 50% 50% 50%; -ms-border-radius: 50% 50% 50% 50%; -o-border-radius: 50% 50% 50% 50%; border-radius: 50% 50% 50% 50%; -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); -ms-box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); -o-box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); -webkit-animation: ripple 3s infinite; -moz-animation: ripple 3s infinite; -ms-animation: ripple 3s infinite; -o-animation: ripple 3s infinite; animation: ripple 3s infinite; } .support-section .content-column .play-box .play-button .ripple:before { -webkit-animation-delay: .9s; -moz-animation-delay: .9s; -ms-animation-delay: .9s; -o-animation-delay: .9s; animation-delay: .9s; content: ""; position: absolute; } .support-section .content-column .play-box .play-button .ripple:after { -webkit-animation-delay: .6s; -moz-animation-delay: .6s; -ms-animation-delay: .6s; -o-animation-delay: .6s; animation-delay: .6s; content: ""; position: absolute; } .support-section .content-column h2{ color:var(--white-color); font-size:var(--font-48); } .support-section .content-column .text{ font-weight:300; color:var(--white-color); margin-top:var(--margin-top-10); font-family:var(--font-family-Rubik); } /*** ==================================================================== Process Section ==================================================================== ***/ .process-section{ position:relative; padding:130px 0px 80px; } .process-section .pattern-layer-one{ position:absolute; left:0px; width:100%; height:594px; bottom:-320px; background-repeat:no-repeat; } .process-section .pattern-layer-two{ position:absolute; right:0px; width:562px; height:504px; bottom:-200px; background-repeat:no-repeat; } .process-block{ position:relative; margin-bottom:var(--margin-bottom-30); } .process-block .inner-box{ position:relative; text-align:center; } .process-block .inner-box:before{ position:absolute; content:''; right:-80px; top:135px; width:149px; height:44px; background:url(../images/icons/feature-arrow.png) no-repeat; } .process-block:last-child .inner-box:before{ display:none; } .process-block .inner-box .icon-box{ position:relative; width:130px; height:130px; margin:0 auto; } .process-block .inner-box .icon-box:before{ position:absolute; content:''; left:0px; top:0px; right:0px; bottom:0px; background:url(../images/icons/vector-22.png) no-repeat; } .process-block .inner-box h3{ font-weight:600; margin-top:var(--margin-top-30); } .process-block .inner-box h3 a{ color:var(--black-color); transition: all 300ms ease; -moz-transition: all 300ms ease; -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; } .process-block .inner-box .text{ opacity:0.85; padding:0px 30px; margin-top:var(--margin-top-15); } .process-block .inner-box .read-more{ position:relative; font-weight:500; display:inline-block; color:var(--dark-color); font-size:var(--font-20); margin-top:var(--margin-top-20); font-family:var(--font-family-Teko); padding-right:var(--padding-right-25); transition: all 300ms ease; -moz-transition: all 300ms ease; -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; } .process-block .inner-box .read-more:before{ position:absolute; right:0px; top:-1px; content: "\f116"; font-family: "flaticon"; font-size:var(--font-16); } .process-block .inner-box .read-more:hover, .process-block .inner-box h3 a:hover{ color:var(--main-color); } /*** ==================================================================== Project Section ==================================================================== ***/ .project-section{ position:relative; overflow:hidden; } .project-section .left-curve-box{ position:absolute; left:-95px; bottom:-95px; width:185px; height:180px; z-index:10; display:inline-block; transform:rotate(-45deg); background-color:var(--main-color); box-shadow:0px 0px 0px 22px var(--main-color-rgba); } .project-section .right-curve-box{ position:absolute; right:-95px; top:-95px; width:185px; height:180px; z-index:10; display:inline-block; transform:rotate(45deg); background-color:var(--main-color); box-shadow:0px 0px 0px 22px var(--main-color-rgba); } .project-section .outer-container{ position:relative; } .project-section .owl-dots{ display:none; } .project-section .owl-nav{ position:absolute; left:30px; top:50%; right:30px; } .project-section .owl-nav .owl-prev{ position:absolute; left:0px; width:103px; height:26px; font-size:0px; transition: all 300ms ease; -moz-transition: all 300ms ease; -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; background:url(../images/icons/project-left-arrow.png) no-repeat; } .project-section .owl-nav .owl-next{ position:absolute; right:0px; width:103px; height:26px; font-size:0px; transition: all 300ms ease; -moz-transition: all 300ms ease; -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; background:url(../images/icons/project-right-arrow.png) no-repeat; } .project-section .owl-nav .owl-prev:hover, .project-section .owl-nav .owl-next:hover{ filter: contrast(200%); } .project-section .owl-carousel .owl-stage-outer{ overflow:visible; } .project-section .gallery-carousel-two{ max-width:970px; margin:0 auto; } .project-section .project-block .overlay-box{ opacity:0; } .project-section .owl-carousel .owl-item.center .project-block{ opacity:1; } .project-section .owl-carousel .owl-item.center .project-block .image::before{ opacity:0; } .project-section .owl-carousel .owl-item.center .project-block .overlay-box{ opacity:1; } .project-block{ position:relative; } .project-block .inner-box{ position:relative; } .project-block .inner-box .image{ position:relative; } .project-block .inner-box .image:before{ position:absolute; content:''; left:0px; top:0px; right:0px; bottom:0px; z-index:1; opacity:0.47; border-radius:6px; overflow:hidden; background-color:var(--dark-color-four); } .project-block .inner-box .image img{ position:relative; width:100%; display:block; border-radius:6px; overflow:hidden; } .project-block .inner-box .image .overlay-box{ position:absolute; left:0px; right:0px; z-index:2; bottom:30px; text-align:center; } .project-block .inner-box .image .overlay-box .content{ position:relative; max-width:610px; width:100%; text-align:left; display:inline-block; padding:35px 80px 35px; } .project-block .inner-box .image .overlay-box .content:before{ position:absolute; content:''; left:0px; top:0px; right:0px; bottom:0px; background-color:var(--white-color); box-shadow:0px 0px 20px rgba(0,0,0,0.10); clip-path: polygon(5% 0, 95% 0, 100% 50%, 95% 100%, 5% 100%, 0% 50%); } .project-block .inner-box h3{ font-weight:600; font-size:var(--font-38); } .project-block .inner-box h3 a{ color:var(--black-color); transition: all 300ms ease; -moz-transition: all 300ms ease; -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; } .project-block .inner-box h3 a:hover{ color:var(--main-color); } .project-block .inner-box .text{ color:var(--main-color); margin-top:var(--margin-top-5); } .project-block .inner-box .icon{ position:absolute; right:80px; top:35px; width:75px; height:75px; line-height:75px; text-align:center; border-radius:50px; color:var(--white-color); font-size:var(--font-40); background-color:var(--main-color); outline: 2px dashed var(--main-color-rgba); outline-offset: 10px; } /*** ==================================================================== Reward Section ==================================================================== ***/ .reward-section{ position:relative; overflow:hidden; padding:130px 0px 70px; background-position:left bottom; background-repeat:no-repeat; } .reward-section .color-layer{ position:absolute; right:-500px; top:-260px; width:1190px; height:677px; border-radius:80px; transform:rotate(-45deg); background-color:var(--main-color); } .reward-section .content-column{ position:relative; margin-bottom:var(--margin-bottom-30); } .reward-section .content-column .inner-column{ position:relative; } .reward-section .content-column .award-box{ position:relative; margin-bottom:var(--margin-bottom-40); } .reward-section .content-column .award-box .box-inner{ position:relative; padding-left:var(--padding-left-90); } .reward-section .content-column .award-box .icon{ position:absolute; left:0px; top:0px; line-height:1em; color:var(--main-color); font-size:var(--font-80); font-family: "Flaticon"; } .reward-section .content-column .award-box h5{ text-transform:capitalize; font-family:var(--font-family-Roboto); } .reward-section .content-column .award-box .text{ max-width:550px; font-size:var(--font-14); margin-top:var(--margin-top-10); font-family:var(--font-family-Rubik); } .reward-section .content-column .revenue-box{ position:relative; border-radius:10px; padding:55px 45px 40px; background-color:#f7f6fe; } .reward-section .content-column .revenue-box ul{ position:relative; } .reward-section .content-column .revenue-box ul li{ position:relative; font-weight:500; color:var(--black-color); font-size:var(--font-20); border-bottom:2px solid #ECE2E2; padding-left:160px; font-family:var(--font-family-Roboto); padding-bottom:var(--padding-bottom-30); margin-bottom:var(--margin-bottom-30); } .reward-section .content-column .revenue-box ul li .title{ position:absolute; left:0px; } .reward-section .content-column .revenue-box ul li .arrow{ position:relative; margin-left:var(--margin-left-130); } .reward-section .content-column .revenue-box ul li .info{ position:relative; font-style:normal; } .reward-section .content-column .revenue-box ul li .total{ position:absolute; right:0px; top:0px; font-weight:500; color:var(--main-color); font-size:var(--font-32); font-family:var(--font-family-Rubik); } .reward-section .content-column .revenue-box ul li:last-child{ border:none; padding-bottom:var(--padding-zero); margin-bottom:var(--margin-zero); } .reward-section .years-column{ position:relative; margin-bottom:var(--margin-bottom-30); } .reward-section .years-column .inner-column{ position:relative; text-align:right; padding-right:var(--padding-right-120); padding-top:var(--padding-top-50); } .year-block{ position:relative; margin-bottom:var(--margin-bottom-60); } .year-block .block-inner{ position:relative; border-radius:6px; text-align:center; max-width:170px; width:100%; display:inline-block; padding:30px 20px 30px; background-color:var(--white-color); box-shadow:0px 0px 15px rgba(0,0,0,0.10); border-bottom:6px solid transparent; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; } .year-block .block-inner:hover{ border-color:var(--main-color); } .year-block .block-inner .icon{ position:relative; line-height:1em; font-size:var(--font-50); font-family: "Flaticon"; color:var(--main-color); } .year-block .block-inner h3{ font-weight:500; font-size: var(--font-28); color:var(--black-color); margin-top:var(--margin-top-5); } /*** ==================================================================== Team Section Two ==================================================================== ***/ .team-section-two{ position:relative; padding:110px 0px 70px; } .team-block-two{ position:relative; margin-bottom:var(--margin-bottom-30); } .team-block-two .inner-box{ position:relative; text-align:center; padding:35px 20px 45px; border-bottom:4px solid transparent; background-color:var(--white-color); box-shadow:0px 0px 15px rgba(0,0,0,0.05); -webkit-transition:all 500ms ease; -moz-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; transition:all 500ms ease; } .team-block-two .inner-box:hover{ border-color:var(--main-color); } .team-block-two .inner-box:before{ position:absolute; content:''; left:0px; top:0px; right:0px; bottom:0px; opacity:0; transform:scale(0.2,1); background-color:var(--color-six); -webkit-transition:all 500ms ease; -moz-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; transition:all 500ms ease; } .team-block-two .inner-box:hover::before{ opacity:1; transform:scale(1,1); } .team-block-two .inner-box .image{ position:relative; width:160px; height:160px; border-radius:50%; overflow:hidden; margin:0 auto; } .team-block-two .inner-box h3{ font-weight:500; margin-top:var(--margin-top-35); } .team-block-two .inner-box h3 a{ color:var(--heading-color); -webkit-transition:all 500ms ease; -moz-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; transition:all 500ms ease; } .team-block-two .inner-box:hover h3 a{ color:var(--white-color); } .team-block-two .inner-box .designation{ position:relative; font-weight:400; color:var(--main-color); font-size:var(--font-18); text-transform:capitalize; margin-top:var(--margin-top-10); -webkit-transition:all 500ms ease; -moz-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; transition:all 500ms ease; font-family:var(--font-family-Roboto); } .team-block-two .inner-box:hover h4 a, .team-block-two .inner-box:hover .designation{ } .team-block-two .inner-box .color-layer-one{ position:absolute; right:95px; top:20px; width:20px; height:138px; border-radius:50px; transform:rotate(45deg); background-color:var(--main-color); } .team-block-two .inner-box .color-layer-two{ position:absolute; right:80px; top:70px; width:12px; height:120px; border-radius:50px; transform:rotate(45deg); background-color:#ECEBF3; } .team-block-two .inner-box .social-box{ position:relative; margin-top:var(--margin-top-25); } .team-block-two .inner-box .social-box li{ position:relative; margin:0px 4px; display:inline-block; } .team-block-two .inner-box .social-box li a{ position:relative; width:36px; height:36px; line-height:36px; border-radius:50px; font-weight:normal; display:inline-block; font-size:var(--font-12); color:var(--main-color); font-family: 'FontAwesome'; background-color:var(--main-color-rgba); } .team-block-two .inner-box:hover .social-box li a{ color:var(--white-color); background-color:var(--white-color-rgba); } /*** ==================================================================== News Section Two ==================================================================== ***/ .news-section-two{ position:relative; padding:30px 0px 80px; background-position:left bottom; background-repeat:no-repeat; } .news-block-two{ position:relative; margin-bottom:var(--margin-bottom-30); } .news-block-two .inner-box{ position:relative; overflow:hidden; border-radius:8px 8px 0px 0px; background-color:var(--white-color); box-shadow:0px 0px 20px rgba(0,0,0,0.07); } .news-block-two .inner-box .image{ position:relative; overflow:hidden; background-color:var(--main-color); } .news-block-two .inner-box .image img{ position:relative; width:100%; display:block; -webkit-transition: all 600ms ease; -moz-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; transition: all 600ms ease; } .news-block-two .inner-box:hover .image img{ opacity:0.60; transform:scale(1.06,1.06) rotate(2deg); } .news-block-two .inner-box .image:before{ position: absolute; top: 0; left: -85%; z-index: 2; display: block; content: ''; width: 50%; height: 100%; background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%); background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, .3))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%); -webkit-transform: skewX(-25deg); -ms-transform: skewX(-25deg); transform: skewX(-25deg); z-index: 1; } .news-block-two .inner-box:hover .image::before{ -webkit-animation: shine 1s; animation: shine 1s; } .news-block-two .inner-box .date{ position:absolute; left:-57px; top:130px; z-index:1; font-weight:500; padding:10px 30px 8px; font-size:var(--font-14); color:var(--white-color); text-transform:uppercase; transform:rotate(90deg); background-color:var(--main-color); font-family:var(--font-family-Rubik); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; display:inline-block; clip-path: polygon(10% 0, 90% 0, 95% 51%, 100% 100%, 0 100%, 5% 49%); } .news-block-two .inner-box:hover .category{ color:var(--dark-color); background-color:var(--white-color); } .news-block-two .inner-box .lower-content{ position:relative; padding:30px 30px; } .news-block-two .inner-box .post-info{ position:relative; } .news-block-two .inner-box .post-info li{ position:relative; display:inline-block; font-size:var(--font-16); padding-left:var(--padding-left-25); margin-right:var(--margin-right-15); color:var(--black-color-rgba); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; font-family:var(--font-family-Rubik); } .news-block-two .inner-box .post-info li .icon{ position:absolute; left:0px; top:1px; color:var(--main-color); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; font-family: "Flaticon"; } .news-block-two .inner-box .post-info li:last-child{ margin-right:var(--margin-zero); } .news-block-two .inner-box h3{ font-weight:500; margin-top:var(--margin-top-20); } .news-block-two .inner-box h3 a{ color:var(--heading-color); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .news-block-two .inner-box .read-more:hover, .news-block-two .inner-box h3 a:hover{ color:var(--main-color); } .news-block-two .inner-box .read-more{ position:relative; font-weight:500; color:var(--dark-color); font-size:var(--font-17); text-transform:uppercase; display:inline-block; margin-top:var(--margin-top-20); font-family:var(--font-family-Rubik); padding-right:var(--padding-right-10); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .news-block-two .inner-box .read-more:before{ position:absolute; content: "\f142"; left:100%; top:1px; font-family: "flaticon"; font-size:var(--font-16); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .news-block-two .inner-box .read-more:hover::before{ left:0%; } .news-block-two .inner-box .read-more:hover{ padding-left:var(--padding-left-25); padding-right:var(--padding-zero); } /*** ==================================================================== Clients Section Two ==================================================================== ***/ .clients-section-two { position: relative; padding: 50px 0px; background-color: var(--color-four); } .clients-section-two .auto-container{ max-width:1490px; } .clients-section-two .inner-container{ position:relative; } .clients-section-two .image-box{ padding:0px 0px; text-align:center; } .clients-section-two .image-box:before{ position:absolute; content:''; top:0px; right:-25px; width:1px; bottom:0px; border-right:1px solid var(--grey-color-two); } .clients-section-two .image-box img{ position:relative; width:auto; margin:0 auto; filter: grayscale(0%); -webkit-transition:all 500ms ease; -moz-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; transition:all 500ms ease; } .clients-section-two .image-box:hover img{ filter: grayscale(100%); } .clients-section-two .owl-dots, .clients-section-two .owl-nav{ display:none; } /*** ==================================================================== CTA Section Two ==================================================================== ***/ .cta-section-two{ position:relative; margin-top:-82px; z-index:1; } .cta-section-two .auto-container{ max-width:1490px; } .cta-section-two .inner-container{ position:relative; border-radius:4px; padding:50px 80px 45px; background-position:left top; background-repeat:no-repeat; background-color:var(--main-color); } .cta-section-two .vector-layer{ position:absolute; left:45%; top:-25px; width:116px; height:70px; background-repeat:no-repeat; } .cta-section-two .title-column{ position:relative; } .cta-section-two .title-column .inner-column{ position:relative; padding-left:var(--padding-left-90); } .cta-section-two .title-column .icon{ position:absolute; left:0px; top:2px; line-height:1em; color:var(--white-color); font-size:var(--font-60); font-family: "Flaticon"; } .cta-section-two .title-column h3{ color:var(--white-color); font-weight:600; } .cta-section-two .title-column .text{ color:var(--white-color); margin-top:var(--margin-top-5); } /* Subscribe Form */ .subscribe-form-two{ position:relative; } .subscribe-form-two .form-group{ position:relative; margin:0px; width:100%; max-width:100%; overflow:hidden; border-radius:5px; } .subscribe-form-two .form-group .icon{ position:absolute; left:20px; top:22px; z-index:1; opacity:0.50; font-weight:600; line-height:1em; font-size:var(--font-16); color:var(--black-color); font-family: "Flaticon"; padding-right:var(--padding-right-15); border-right:1px solid var(--color-three); } .subscribe-form-two .form-group input[type="text"], .subscribe-form-two .form-group input[type="email"]{ position:relative; line-height:43px; font-size:var(--font-16); padding:10px 15px 10px 65px; display:block; height:60px; width:100%; box-shadow:inherit; font-weight:400; color:var(--black-color); transition:all 500ms ease; -moz-transition:all 500ms ease; -webkit-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; background-color:var(--white-color); } .subscribe-form-two .form-group input::placeholder, .subscribe-form-two .form-group textarea::placeholder{ color:var(--color-three); } .subscribe-form-two .form-group button{ position:absolute; right:0px; top:0px; font-weight:500; padding:19px 30px; font-size:var(--font-14); color:var(--white-color); text-transform:uppercase; background-color:var(--black-color); font-family:var(--font-family-Rubik); } .subscribe-form-two .form-group button:hover{ background-color:var(--color-three); } /*** ==================================================================== Page Title ==================================================================== ***/ .page-title{ position:relative; overflow:hidden; text-align:center; padding:300px 0px 140px; background-size:cover; } .page-title:before{ position:absolute; content:''; left:0px; top:0px; right:0px; bottom:0px; opacity:0.73; background-color: var(--dark-color-four); } .page-title h2{ font-weight:600; color:var(--white-color); padding-bottom:var(--padding-bottom-15); } .page-title .bread-crumb{ position: relative; } .page-title .bread-crumb li{ position: relative; font-weight: 400; display:inline-block; text-transform: capitalize; font-size: var(--font-20); color: var(--white-color); margin-right: var(--margin-right-15); padding-right: var(--padding-right-15); font-family:var(--font-family-Roboto); } .page-title .bread-crumb li:before{ position: absolute; right: -7px; top:0px; color: #ffffff; content: "\f18d"; font-weight:400; font-size: var(--font-10); color: var(--white-color); font-family: "flaticon"; } .page-title .bread-crumb li:last-child{ padding-right: 0; margin-right: 0; } .page-title .bread-crumb li:last-child:before{ display: none; } .page-title .bread-crumb li a{ font-weight: 400; color: var(--main-color); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .page-title .bread-crumb li a:hover{ color: var(--white-color); } /*** ==================================================================== About Info Section ==================================================================== ***/ .about-info-section{ position:relative; padding-bottom:var(--padding-bottom-60); } .about-info-section .pattern-layer-one{ position:absolute; left:0px; width:100%; height:594px; bottom:-320px; background-repeat:no-repeat; } .about-info-section .pattern-layer-two{ position:absolute; right:0px; width:562px; height:504px; bottom:-200px; background-repeat:no-repeat; } .about-info-section .pattern-layer-three { position: absolute; left: 0px; width: 100%; height: 100%; bottom: 0; background-repeat: no-repeat; } .experiance_item { display: flex; } .experiance_item .icon { width: 60px; margin-right: 6px; } .experiance_item .content { width: calc(100% - 66px); } .counter_wrap .number { font-size: 85px; color: #eaad1f; position: relative; } .counter_wrap .plus { position: absolute; top: -10px; right: -18px; font-size: 32px; color: #BDBDBD; font-weight: 400; } .counter_wrap .text { font-size: 25px; font-weight: 500; color: #150E0E; font-weight: 500; } .counter_wrap h1 { line-height: 1; } .experiance_item .content h4 { font-size: 24px; font-weight: 500; margin-bottom: 5px; } .experiance_item .content p { font-size: 14px; } .experiance_list li { position: relative; padding-top: 3px; color: var(--text-color); font-size: var(--font-16); padding-left: var(--padding-left-35); } .experiance_list li::before { position: absolute; content: '\f00e'; left: 0px; top: 0px; width: 27px; height: 27px; line-height: 27px; text-align: center; border-radius: 50px; font-family: IcoFont; color: var(--main-color); background-color: var(--white-color); box-shadow: 0px 0px 15px rgba(0,0,0,0.05); } .mt-30 { margin-top: 30px; } .mt-none-30 { margin-top: -30px; } /* About Tab */ .about-tabs{ position:relative; margin-top:var(--margin-top-10); margin-bottom:var(--margin-bottom-40); } .about-tabs .tab-btns{ position:relative; } .about-tabs .tab-btns .tab-btn{ position:relative; display:inline-block; color: #000; text-transform:uppercase; font-size:var(--font-20); font-weight:500; line-height:24px; cursor:pointer; letter-spacing:1px; padding:18px 32px 15px; transition:all 500ms ease; margin-right:var(--margin-right-10); background-color: #fff; font-family:var(--font-family-Teko); transition: .3s; z-index: 1; box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.05); padding: 10px 48px; border: 0; border-radius: 5px; position: relative; } .about-tabs .tab-btns .tab-btn::before { position: absolute; left: 0; right: 0; bottom: -6px; margin: auto; content: ""; background: #eaad1f; width: 12px; height: 12px; opacity: 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; z-index: -1; } .about-tabs .tab-btns .tab-btn.active-btn { background-color: #eaad1f; color: #fff; } .about-tabs .tab-btns .tab-btn.active-btn::before { opacity: 1; } .about-tabs .tabs-content{ position:relative; padding-top:var(--padding-top-40); } .about-tabs .tabs-content .tab{ position:relative; display:none; } .about-tabs .tabs-content .tab.active-tab{ display:block; } .about-tabs .tabs-content h4{ font-weight:500; margin-bottom:var(--margin-bottom-15); } .about_tab_list { display: flex; flex-wrap: wrap; max-width: 700px; margin-top: -20px; } .about_tab_list li { width: 50%; font-size: 18px; margin-top: 30px; } .about_tab_list li i { color: #eaad1f; margin-right: 5px; } /*** ==================================================================== Team Section Three ==================================================================== ***/ .team-section-three{ position:relative; padding:110px 0px 70px; } .team-block-three{ position:relative; margin-bottom:var(--margin-bottom-30); } .team-block-three .inner-box{ position:relative; text-align:center; background-color:var(--white-color); } .team-block-three .inner-box .image{ position:relative; overflow:hidden; } .team-block-three .inner-box .image img{ position:relative; width:100%; display:block; } .team-block-three .inner-box .image:before{ position: absolute; top: 0; left: -85%; z-index: 2; display: block; content: ''; width: 50%; height: 100%; background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%); background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, .3))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%); -webkit-transform: skewX(-25deg); -ms-transform: skewX(-25deg); transform: skewX(-25deg); z-index: 1; } .team-block-three .inner-box:hover .image::before{ -webkit-animation: shine 1s; animation: shine 1s; } .team-block-three .inner-box .lower-content{ position:relative; padding:30px 15px 25px; } .team-block-three .inner-box .lower-content:before{ position:absolute; content:''; left:0px; top:0px; right:0px; bottom:40px; border-radius:0px 0px 3px 3px; border:1px solid var(--color-two); border-top:none; -webkit-transition:all 500ms ease; -moz-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; transition:all 500ms ease; } .team-block-three .inner-box:hover .lower-content:before{ bottom:0px; } .team-block-three .inner-box:hover .lower-content .social-box{ opacity:1; visibility:visible; } .team-block-three .inner-box h4{ font-weight:500; } .team-block-three .inner-box h4 a{ color:var(--heading-color); -webkit-transition:all 500ms ease; -moz-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; transition:all 500ms ease; } .team-block-three .inner-box h4 a:hover{ color:var(--main-color); } .team-block-three .inner-box .designation{ position:relative; font-weight:400; color:var(--main-color); font-size:var(--font-18); text-transform:capitalize; margin-top:var(--margin-top-5); -webkit-transition:all 500ms ease; -moz-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; transition:all 500ms ease; font-family:var(--font-family-Roboto); } .team-block-three .inner-box:hover h4 a, .team-block-three .inner-box:hover .designation{ } .team-block-three .inner-box .social-box{ position:relative; opacity:0; visibility:hidden; margin-top:var(--margin-top-20); -webkit-transition:all 500ms ease; -moz-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; transition:all 500ms ease; } .team-block-three .inner-box .social-box li{ position:relative; margin:0px 4px; display:inline-block; } .team-block-three .inner-box .social-box li a{ position:relative; width:36px; height:36px; line-height:36px; border-radius:50px; font-weight:normal; display:inline-block; font-size:var(--font-12); color:var(--main-color); font-family: 'FontAwesome'; background-color:var(--main-color-rgba); } .team-block-three .inner-box .social-box li a:hover{ color:var(--white-color); background-color:var(--main-color); } /*** ==================================================================== Services Section Three ==================================================================== ***/ .services-section-three{ position:relative; overflow:hidden; padding:120px 0px 80px; } .services-section-three .owl-nav{ position:absolute; left:-75px; top:50%; right:-75px; z-index:10; margin-top:-25px; transition:all 0.3s ease; -moz-transition:all 0.3s ease; -webkit-transition:all 0.3s ease; -ms-transition:all 0.3s ease; -o-transition:all 0.3s ease; } .services-section-three .owl-nav .owl-prev{ position:absolute; left:0px; width:50px; height:50px; color:var(--main-color); font-size:var(--font-20); line-height:52px; text-align:center; border-radius:0px; transition:all 500ms ease; -moz-transition:all 500ms ease; -webkit-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; background-color:var(--main-color-rgba); } .services-section-three .owl-nav .owl-next{ position:absolute; right:0px; width:50px; height:50px; color:var(--main-color); font-size:var(--font-20); line-height:52px; text-align:center; border-radius:0px; transition:all 500ms ease; -moz-transition:all 500ms ease; -webkit-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; background-color:var(--main-color-rgba); } .services-section-three .owl-nav .owl-prev:hover, .services-section-three .owl-nav .owl-next:hover{ color:var(--white-color); background-color:var(--main-color); } .service-block-two{ position:relative; margin-bottom:var(--margin-bottom-30); } .service-block-two .inner-box{ position:relative; padding:45px 35px; background-color:var(--color-five); } .service-block-two .inner-box .icon{ position:relative; width:88px; height:84px; line-height:84px; text-align:center; border-radius:4px; font-size:var(--font-44); display:inline-block; color:var(--main-color); font-family: "flaticon"; background-color:var(--main-color-rgba); -webkit-transition:all 500ms ease; -moz-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; transition:all 500ms ease; } .service-block-two .inner-box:hover .icon{ color:var(--white-color); background-color:var(--main-color); } .service-block-two .inner-box h3{ font-weight:600; margin-top:var(--margin-top-35); } .service-block-two .inner-box h3 a{ color:var(--black-color); } .service-block-two .inner-box:hover h3 a{ color:var(--main-color); } .service-block-two .inner-box .text{ position:relative; margin-top:var(--margin-top-15); font-family:var(--font-family-Roboto); } .service-block-two .inner-box .arrow{ position:relative; width:47px; height:44px; line-height:44px; text-align:center; display:inline-block; font-size:var(--font-18); color:var(--color-three); font-family: "flaticon"; border-radius:4px; margin-top:var(--margin-top-25); background-color:var(--color-two); -webkit-transition:all 500ms ease; -moz-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; transition:all 500ms ease; } .service-block-two .inner-box:hover .arrow{ color:var(--white-color); background-color:var(--main-color); } /*** ==================================================================== CTA Section Three ==================================================================== ***/ .cta-section-three{ position:relative; z-index:1; } .cta-section-three .inner-container{ position:relative; padding:42px 60px; background-color:var(--main-color); } .cta-section-three .inner-container:before{ position:absolute; content:''; left:0px; top:0px; bottom:0px; width:50%; background-color:var(--dark-color); } .cta-section-three .title-column{ position:relative; } .cta-section-three .title-column .inner-column{ position:relative; } .cta-section-three .title-column h3{ font-weight:600; color:var(--white-color); } .cta-section-three .title-column h3 span{ color:var(--main-color); } .cta-section-three .icon-layer-one{ position:absolute; left:30px; top:-10px; width:50px; height:50px; background-repeat:no-repeat; } .cta-section-three .icon-layer-two{ position:absolute; left:88%; top:-20px; width:31px; height:33px; background-repeat:no-repeat; } .cta-section-three .video-column{ position:relative; } .cta-section-three .video-column .inner-column{ position:relative; padding-left:var(--padding-left-40); } .cta-section-three .video-column h3{ font-weight:600; color:var(--white-color); } .cta-section-three .video-column h3 span{ color:var(--dark-color); } .cta-section-three .video-column .play-box{ position:absolute; right:-10px; top:-15px; } .cta-section-three .video-column .play-box .play-button span{ position: relative; width:70px; height: 70px; z-index:10; font-weight:400; padding-left:4px; line-height:70px; border-radius:50%; text-align: center; display: inline-block; font-size:var(--font-20); color: var(--white-color); transition: all 900ms ease; -moz-transition: all 900ms ease; -webkit-transition: all 900ms ease; -ms-transition: all 900ms ease; -o-transition: all 900ms ease; background-color: var(--dark-color); font-family: "Flaticon"; } .cta-section-three .video-column .play-box .play-button .ripple, .cta-section-three .video-column .play-box .play-button .ripple:before, .cta-section-three .video-column .play-box .play-button .ripple:after { position: absolute; top: 50%; left: 50%; width:70px; height: 70px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-border-radius: 50% 50% 50% 50%; -moz-border-radius: 50% 50% 50% 50%; -ms-border-radius: 50% 50% 50% 50%; -o-border-radius: 50% 50% 50% 50%; border-radius: 50% 50% 50% 50%; -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); -ms-box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); -o-box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); -webkit-animation: ripple 3s infinite; -moz-animation: ripple 3s infinite; -ms-animation: ripple 3s infinite; -o-animation: ripple 3s infinite; animation: ripple 3s infinite; } .cta-section-three .video-column .play-box .play-button .ripple:before { -webkit-animation-delay: .9s; -moz-animation-delay: .9s; -ms-animation-delay: .9s; -o-animation-delay: .9s; animation-delay: .9s; content: ""; position: absolute; } .cta-section-three .video-column .play-box .play-button .ripple:after { -webkit-animation-delay: .6s; -moz-animation-delay: .6s; -ms-animation-delay: .6s; -o-animation-delay: .6s; animation-delay: .6s; content: ""; position: absolute; } /*** ==================================================================== Strategy Section ==================================================================== ***/ .strategy-section{ position:relative; margin-top:-60px; padding:170px 0px 30px; background-color:var(--color-four); } .strategy-section .info-column{ position:relative; margin-bottom:var(--margin-bottom-30); } .strategy-section .info-column .inner-column{ position:relative; padding:35px 35px 40px; background-color:#ffffff; } .strategy-section .info-column .number-list{ position:relative; margin-top:var(--margin-top-20); } .strategy-section .info-column .number-list li{ position:relative; line-height:1.9em; font-size:var(--font-14); padding-left:var(--padding-left-65); margin-bottom:var(--margin-bottom-30); padding-bottom:var(--padding-left-20); border-bottom:1px solid var(--grey-color-two); } .strategy-section .info-column .number-list li:last-child{ border:none; margin-bottom:var(--margin-zero); padding-bottom:var(--margin-zero); } .strategy-section .info-column .number-list li strong{ position:relative; width:100%; display:block; font-weight:500; text-transform:uppercase; font-size:var(--font-22); color:var(--dark-color); font-family:var(--font-family-Teko); margin-bottom:var(--margin-bottom-10); } .strategy-section .info-column .number-list li .number{ position:absolute; left:0px; top:0px; width:42px; height:42px; font-weight:500; text-align:center; border-radius:50px; line-height:42px; display:inline-block; color:var(--main-color); font-size:var(--font-16); background-color:var(--main-color-rgba); transition:all 300ms ease; -moz-transition:all 300ms ease; -webkit-transition:all 300ms ease; -ms-transition:all 300ms ease; -o-transition:all 300ms ease; } .strategy-section .info-column .number-list li:hover .number{ color:var(--white-color); background-color:var(--main-color); } /* Content Column */ .strategy-section .content-column{ position:relative; margin-bottom:var(--margin-bottom-30); } .strategy-section .content-column .inner-column{ position:relative; padding-left:var(--padding-left-60) } .strategy-section .content-column .title-box{ margin-bottom:var(--margin-bottom-30); } .strategy-section .content-column .title-box .title{ position:relative; font-weight:700; color:var(--main-color); font-size:var(--font-18); text-transform:uppercase; padding-left:var(--padding-left-25); } .strategy-section .content-column .title-box .title:before{ position:absolute; content:'//'; left:0px; top:0px; } .strategy-section .content-column .title-box h2{ margin-top:var(--margin-top-20); } /* Strategy Tab */ .strategy-tabs{ position:relative; margin-top:var(--margin-top-10); margin-bottom:var(--margin-bottom-40); } .strategy-tabs .tab-btns{ position:relative; } .strategy-tabs .tab-btns .tab-btn{ position:relative; display:inline-block; color:var(--main-color); text-transform:uppercase; font-size:var(--font-14); font-weight:500; line-height:24px; cursor:pointer; font-weight:700; letter-spacing:1px; padding:11px 26px; transition:all 500ms ease; margin-right:var(--margin-right-10); background-color:var(--main-color-rgba); } .strategy-tabs .tab-btns .tab-btn:before{ position:absolute; content:''; left:50%; bottom:0px; opacity:0; margin-left:-5px; transition:all 300ms ease; -moz-transition:all 300ms ease; -webkit-transition:all 300ms ease; -ms-transition:all 300ms ease; -o-transition:all 300ms ease; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 10px solid var(--main-color); } .strategy-tabs .tab-btns .tab-btn:hover::before, .strategy-tabs .tab-btns .tab-btn.active-btn::before{ opacity:1; bottom:-10px; } .strategy-tabs .tab-btns .tab-btn:hover, .strategy-tabs .tab-btns .tab-btn.active-btn{ color:var(--white-color); background:var(--main-color); } .strategy-tabs .tabs-content{ position:relative; padding-top:var(--padding-top-40); } .strategy-tabs .tabs-content .tab{ position:relative; display:none; } .strategy-tabs .tabs-content .tab.active-tab{ display:block; } .strategy-tabs .tabs-content p{ font-size:var(--font-16); } .strategy-tabs .tabs-content .about-list{ position:relative; } .strategy-tabs .tabs-content .about-list li{ position:relative; padding-top:3px; color:var(--text-color); font-size:var(--font-16); padding-left:var(--padding-left-45); margin-bottom:var(--margin-bottom-20); } .strategy-tabs .tabs-content .about-list li:before{ position:absolute; content:'\f00e'; left:0px; top:0px; width:27px; height:27px; line-height:27px; text-align:center; border-radius:50px; font-family:IcoFont; color:var(--main-color); background-color:var(--white-color); box-shadow:0px 0px 15px rgba(0,0,0,0.05); } .strategy-tabs .tabs-content .about-list li:last-child{ margin-bottom:var(--margin-zero); } /*** ==================================================================== Studio Section ==================================================================== ***/ .studio-section{ position:relative; padding:80px 0px 50px; background-color:var(--black-color); } .studio-section .title-column{ position:relative; margin-bottom:var(--margin-bottom-30); } .studio-section .title-column .inner-column{ position:relative; padding-top:var(--padding-top-40); } .studio-section .title-column h2{ color:var(--white-color); } .studio-section .title-column h2 span{ color:var(--main-color); } .studio-section .counter-column{ position:relative; margin-bottom:var(--margin-bottom-30); } .studio-section .counter-column .inner-column{ position:relative; } /* Fact Counter Three */ .fact-counter-three{ position:relative; } .fact-counter-three .counter-column{ position:relative; margin-bottom:var(--margin-bottom-30); } .fact-counter-three .counter-column .inner{ position:relative; text-align:center; padding:25px 15px; overflow:hidden; border-radius:6px; background-color:var(--main-color); } .fact-counter-three .counter-column .inner:before{ position:absolute; content:''; left:0px; top:0px; bottom:0px; width:30%; opacity:0; -webkit-transition:all 500ms ease; -moz-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; transition:all 500ms ease; background-color:var(--white-color); } .fact-counter-three .counter-column .inner:hover::before{ width:100%; opacity:1; } .fact-counter-three .counter-column .inner .content{ position:relative; } .fact-counter-three .counter-column .inner .icon{ font-weight:400; line-height:1em; display:block; color:var(--white-color); font-size:var(--font-50); font-family: "Flaticon"; -webkit-transition:all 500ms ease; -moz-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; transition:all 500ms ease; margin-bottom:var(--margin-bottom-25); } .fact-counter-three .count-outer .percentage{ position:relative; } .fact-counter-three .counter-column .inner .count-outer{ position:relative; font-weight:400; line-height:1em; color:var(--white-color); font-size:var(--font-50); font-family:var(--font-family-Teko); -webkit-transition:all 500ms ease; -moz-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; transition:all 500ms ease; } .fact-counter-three .counter-column h5{ font-weight:400; color:var(--white-color); margin-top:var(--margin-top-10); font-family:var(--font-family-Roboto); -webkit-transition:all 500ms ease; -moz-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; transition:all 500ms ease; } .fact-counter-three .counter-column .inner:hover .icon, .fact-counter-three .counter-column .inner:hover h5, .fact-counter-three .counter-column .inner:hover .count-outer{ color:var(--main-color); } /*** ==================================================================== Sidebar Page Container ==================================================================== ***/ .sidebar-page-container{ position:relative; padding:100px 0px 80px; } .sidebar-page-container .content-side, .sidebar-page-container .sidebar-side{ margin-bottom:40px; } .sticky-top{ z-index:1; top:100px; } .sidebar-widget{ margin-bottom:var(--margin-bottom-45); } /* Service List */ .service-list{ position:relative; } .service-list li{ position:relative; margin-bottom:var(--margin-bottom-15); } .service-list li a{ position:relative; display:block; font-weight:600; padding:20px 25px; border-radius:4px; color:var(--color-seven); font-size:var(--font-18); transition:all 300ms ease; -moz-transition:all 300ms ease; -webkit-transition:all 300ms ease; -ms-transition:all 300ms ease; -o-transition:all 300ms ease; background-color:var(--main-color-rgba-two); } .service-list li a:before{ position:absolute; content: "\f159"; right:8px; top:9px; width:49px; height:44px; line-height:44px; text-align:center; border-radius:3px; font-family: "flaticon"; transition:all 300ms ease; -moz-transition:all 300ms ease; -webkit-transition:all 300ms ease; -ms-transition:all 300ms ease; -o-transition:all 300ms ease; } .service-list li:last-child{ margin-bottom:var(--margin-zero); } .service-list li.active a, .service-list li a:hover{ color:var(--main-color); } .service-list li.active a::before, .service-list li a:hover::before{ color:var(--white-color); background-color:var(--main-color); } /* Timing Widget */ .timing-widget .widget-content{ padding:35px 35px 40px; border:1px solid var(--color-two); } .timing-widget h3{ font-weight:600; text-transform:uppercase; margin-bottom:var(--margin-bottom-20); } .timing-widget .time-list{ position:relative; } .timing-widget .time-list li{ position:relative; font-size:16px; color:#5C727D; padding-bottom:var(--padding-bottom-15); margin-bottom:var(--margin-bottom-25); border-bottom:2px solid var(--color-two); } .timing-widget .time-list li span{ position:absolute; right:0px; } .timing-widget .time-list li:last-child{ border-bottom:none; margin-bottom:var(--margin-zero); } .timing-widget .button-box{ position:relative; margin-top:var(--margin-top-20); } .timing-widget .button-box .theme-btn{ padding:14px 30px; letter-spacing:0px; text-transform:capitalize; font-size:var(--font-16); font-family:var(--font-family-Roboto); } /* Gallery Widget */ .gallery-widget h3{ font-weight:600; text-transform:uppercase; margin-bottom:var(--margin-bottom-20); } .gallery-widget .image{ position:relative; } .gallery-widget .image img{ position:relative; width:100%; } .gallery-widget h4{ font-weight:600; text-transform:uppercase; margin-top:var(--margin-top-30); } .gallery-widget .text{ margin-top:var(--margin-top-10); } /* Service Detail */ .service-detail{ position:relative; } .service-detail .inner-box{ position:relative; } .service-detail .inner-box .image{ position:relative; } .service-detail .inner-box .image img{ position:relative; width:100%; display:block; } .service-detail .inner-box .lower-content{ position:relative; padding-top:var(--padding-top-40); } .service-detail .inner-box .two-column{ margin-top:var(--margin-top-35); margin-bottom:var(--margin-bottom-30); } .service-detail .inner-box h3{ font-weight:600; } .service-detail .inner-box h4{ font-weight:600; text-transform:uppercase; } .service-detail .inner-box p{ margin-top:var(--margin-top-15); } .service-detail .inner-box .list{ position:relative; } .service-detail .inner-box .list li{ position:relative; font-size:var(--font-15); color:var(--text-color); padding-left:var(--padding-left-25); margin-bottom:var(--margin-bottom-15); } .service-detail .inner-box .list li:before{ position:absolute; content:'\f00e'; left:0px; top:0px; font-family:IcoFont; color:var(--main-color); } /*** ==================================================================== Project Page Section ==================================================================== ***/ .project-page-section{ position:relative; padding:120px 0px 70px; } .project-block-two{ position:relative; margin-bottom:var(--margin-bottom-30); } .project-block-two .inner-box{ position:relative; } .project-block-two .inner-box .image{ position:relative; overflow:hidden; background-color:var(--main-color); } .project-block-two .inner-box .image img{ position:relative; width:100%; display:block; -webkit-transition:all 500ms ease; -moz-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; transition:all 500ms ease; } .project-block-two .inner-box:hover .image img{ opacity:0.80; transform:scale(1.05,1.05); } .project-block-two .inner-box .lower-content{ position:relative; margin-left:15px; margin-right:15px; padding:30px 25px; margin-top:-80px; background-color:var(--white-color); box-shadow:0px 0px 15px rgba(0,0,0,0.06); } .project-block-two .inner-box .lower-content:before{ position:absolute; content:''; left:0px; top:0px; right:0px; bottom:0px; opacity:0; transform:scale(0.3,1); background-color:var(--main-color); -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .project-block-two .inner-box:hover .lower-content:before{ opacity:1; transform:scale(1,1); } .project-block-two .inner-box .category{ position:relative; font-weight:500; opacity:0.70; letter-spacing:1px; text-transform:uppercase; font-family:var(--font-family-Roboto); -webkit-transition:all 500ms ease; -moz-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; transition:all 500ms ease; } .project-block-two .inner-box h3{ font-weight:600; margin-top:var(--margin-top-10); } .project-block-two .inner-box h3 a{ color:var(--heading-color); -webkit-transition:all 500ms ease; -moz-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; transition:all 500ms ease; } .project-block-two .inner-box .view{ position:relative; font-weight:400; color:var(--main-color); font-size:var(--font-15); text-transform:capitalize; display:inline-block; margin-top:var(--margin-top-20); padding-right:var(--padding-right-10); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; margin-top:var(--margin-top-10); font-family:var(--font-family-Roboto); } .project-block-two .inner-box .view:before{ position:absolute; content:'\f061'; left:100%; top:1px; font-family: 'FontAwesome'; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .project-block-two .inner-box:hover .view::before{ left:0%; } .project-block-two .inner-box:hover .view{ padding-left:var(--padding-left-25); padding-right:var(--padding-zero); } .project-block-two .inner-box:hover h3 a, .project-block-two .inner-box:hover .view, .project-block-two .inner-box:hover .category{ opacity:1; color:var(--white-color); } /* Project Widget */ .project-widget .widget-content{ position:relative; padding:35px 30px 35px; box-shadow:0px 0px 18px rgba(0,0,0,0.04); } .project-widget .title{ position:relative; font-weight:500; font-size:var(--font-14); color:var(--main-color); text-transform:uppercase; margin-bottom:var(--margin-bottom-20); font-family:var(--font-family-Roboto); } .project-widget .title span{ position:absolute; right:0px; top:-4px; border-radius:2px; padding:4px 10px 2px; font-size:var(--font-14); color:var(--white-color); display:inline-block; background-color:var(--main-color); } .project-widget .project-list{ position:relative; } .project-widget .project-list li{ position:relative; font-weight:500; padding:10px 0px 12px; color:var(--black-color); font-size:var(--font-14); margin-bottom:var(--margin-bottom-5); font-family:var(--font-family-Roboto); border-bottom:1px solid var(--color-two); } .project-widget .project-list li span{ position:relative; font-weight:400; color:var(--color-three); margin-left:var(--margin-left-25); } .project-widget .button-box{ text-align:center; margin-top:var(--margin-top-35); } .project-widget .button-box a{ letter-spacing:0px; padding:12px 28px; font-size:var(--font-15); text-transform:capitalize; font-family:var(--font-family-Roboto); } .project_info_wrap { display: flex; align-items: center; justify-content: space-between; padding-top: 30px; flex-wrap: wrap; margin-top: -20px; } .project_info { display: flex; align-items: center; flex-wrap: wrap; } .project_info li:not(:last-child) { margin-right: 70px; } .project_item { display: flex; margin-top: 20px; } .project_item .icon { width: 22px; margin-right: 12px; margin-top: 7px; } .project_item .content { width: calc(100% - 34px); } .project_item h3 { font-size: 18px; } .project_item span { font-size: 14px; } .proejct-button { margin-top: 20px; } .proejct-button a { padding: 10px 50px; text-transform: capitalize; font-size: 15px; } .project_widget { background-color: #fff !important; margin-top: 35px; padding: 40px; box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.08); } .info-column .project_widget .opening .icon, .info-column .project_widget .social-box li a { background-color: #FFEDE8; color: #eaad1f; } .info-column .project_widget .social-box li a:hover { color: #fff; background-color: #eaad1f; } .info-column .project_widget .info-list li, .info-column .project_widget .opening strong, .info-column .project_widget .opening, .info-column .project_widget .info-list li a { color: #000; } .info-column .project_widget .info-list li { border-bottom: 1px solid #E5E5E5; } .info-column .project_widget .info-list li strong::before, .info-column .project_widget .info-list li a .icon { color: #eaad1f; } /* Sponsors Widget */ .sponsors-widget .widget-content{ position:relative; padding:35px 30px 35px; box-shadow:0px 0px 18px rgba(0,0,0,0.04); } .sponsors-widget h4{ font-weight:600; margin-bottom:var(--margin-bottom-20); } .sponsors-widget .client-image{ position:relative; } .sponsors-widget .name{ position:relative; font-weight:600; font-size:var(--font-16); color:var(--black-color); margin-top:var(--margin-top-25); font-family:var(--font-family-Roboto); } .sponsors-widget .email{ position:relative; font-weight:400; font-size:var(--font-16); color:var(--color-three); margin-top:var(--margin-top-15); font-family:var(--font-family-Roboto); } .sponsors-widget .email span{ font-weight:600; color:var(--black-color); } .sponsors-widget .social-box{ position:relative; margin-top:var(--margin-top-25); } .sponsors-widget .social-box .share{ position:relative; font-weight:500; font-size:var(--font-20); } .sponsors-widget .social-box li{ position:relative; display:inline-block; margin-right:var(--margin-right-5); } .sponsors-widget .social-box li a{ position:relative; width:40px; height:38px; text-align:center; line-height:38px; border-radius:2px; display:inline-block; font-size:var(--font-14); font-family: 'FontAwesome'; } .sponsors-widget .social-box li.facebook a{ background-color:#e9eef5; color:#285da1; } .sponsors-widget .social-box li.twitter a{ background-color:#e5f6fe; color:#03a9f4; } .sponsors-widget .social-box li.youtube a{ background-color:#fbe7eb; color:#dc164d; } /* Project Detail */ .project-detail{ position:relative; } .project-detail .inner-box{ position:relative; } .project-detail .inner-box .image{ position:relative; } .project-detail .inner-box .image img{ position:relative; width:100%; display:block; } .project-detail .inner-box .lower-content{ position:relative; padding-top:var(--padding-top-35); } .project-detail .inner-box h3{ font-weight:600; text-transform:uppercase; margin-bottom:var(--margin-bottom-10); } .project-detail .inner-box p{ color:#5C727D; margin-bottom:var(--margin-bottom-20); } .project-detail .inner-box h4{ font-weight:600; text-transform:uppercase; margin-bottom:var(--margin-bottom-20); } .project-detail .inner-box .list{ position:relative; } .project-detail .inner-box .list li{ position:relative; font-size:var(--font-15); color:var(--text-color); padding-left:var(--padding-left-25); margin-bottom:var(--margin-bottom-15); } .project-detail .inner-box .list li:before{ position:absolute; content:'\f00e'; left:0px; top:0px; font-family:IcoFont; color:var(--main-color); } .author-widget .widget-content{ position:relative; padding:40px 30px; text-align:center; border:1px solid var(--color-ten); box-shadow:0px 5px 10px rgba(0,0,0,0.04); } .author-widget .author-image{ position:relative; width:95px; height:95px; margin:0 auto; overflow:hidden; border-radius:50%; } .author-widget .widget-content h3{ font-weight:500; margin-top:var(--margin-top-25); } .author-widget .widget-content .designation{ opacity:0.60; color:var(--black-color); margin-top:var(--margin-top-5); } .author-widget .widget-content .text{ position:relative; font-size:var(--font-15); margin-top:var(--margin-top-20); } .author-widget .social-box{ position:relative; margin-top:var(--margin-top-25); } .author-widget .social-box li{ position:relative; margin:0px 4px; display:inline-block; } .author-widget .social-box li a{ position:relative; width:36px; height:36px; line-height:34px; text-align:center; font-weight:normal; font-size:var(--font-14); color:var(--black-color); font-family: 'FontAwesome'; border:1px solid var(--color-four); } .author-widget .social-box li a:hover{ color:var(--white-color); border-color:var(--white-color); background-color:var(--main-color); } /* Search Widget */ .search-widget .widget-content{ position:relative; padding:40px 30px; border:1px solid var(--color-ten); box-shadow:0px 5px 10px rgba(0,0,0,0.04); } .sidebar-title{ position:relative; margin-bottom:var(--margin-bottom-25); } .sidebar-title h3{ font-weight:500; padding-left:var(--padding-left-20); border-left:2px solid var(--main-color); } /* Search Widget */ .sidebar .search-box .form-group{ position:relative; margin:var(--margin-zero); } .sidebar .search-box .form-group input[type="text"], .sidebar .search-box .form-group input[type="search"]{ position:relative; line-height:28px; padding:10px 50px 10px 20px; background:#f5f5f5; display:block; font-size:var(--font-16); width:100%; height:60px; border-radius:0px; transition:all 500ms ease; -moz-transition:all 500ms ease; -webkit-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; } .sidebar .search-box .form-group button{ position:absolute; right:0px; top:0px; height:60px; width:60px; cursor:pointer; display:block; line-height:100%; font-weight:normal; font-size:var(--font-16); color:var(--white-color); background:var(--main-color); } .category-widget .widget-content{ position:relative; padding:40px 30px; border:1px solid var(--color-ten); box-shadow:0px 5px 10px rgba(0,0,0,0.04); } /* Cat List */ .cat-list{ position:relative; } .cat-list li{ position:relative; margin-bottom:var(--margin-bottom-15); } .cat-list li a{ position:relative; display:block; font-size:var(--font-16); color:var(--color-three); padding:16px 25px; border:1px solid var(--color-four); } .cat-list li a span{ position:absolute; right:20px; top:17px; } .cat-list li:last-child{ margin-bottom:var(--margin-zero); } .cat-list li.active a, .cat-list li a:hover{ color:var(--white-color); border-color:var(--main-color); background-color:var(--main-color); } .popular-posts .widget-content{ position:relative; padding:40px 30px; border:1px solid var(--color-ten); box-shadow:0px 5px 10px rgba(0,0,0,0.04); } /* Post Widget */ .sidebar .popular-posts .post{ position:relative; padding:0px 0px; min-height: 81px; padding-left:140px; color:var(--dark-color); font-size:var(--font-14); padding-top:var(--padding-top-5); margin-bottom: var(--margin-bottom-10); } .sidebar .popular-posts .post:last-child{ margin-bottom:var(--margin-zero); border-bottom:none; min-height:auto; } .sidebar .popular-posts .post .post-thumb{ position:absolute; left:0px; top:-4px; width:115px; } .sidebar .popular-posts .post .post-thumb .overlay-box{ position: absolute; content: ''; left: 0px; top: 0px; width: 100%; height: 100%; display: block; color:var(--main-color); font-size: var(--font-20); opacity: 0; text-align: center; transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; background-color: rgba(51,51,51,0.70); } .sidebar .popular-posts .post .post-thumb .overlay-box .fa{ top: 50%; position: relative; margin-top: -12px; display: block; } .sidebar .popular-posts .post:hover .post-thumb .overlay-box{ opacity:1; } .sidebar .popular-posts .post .post-thumb img{ display:block; width:100%; transition:all 0.3s ease; -moz-transition:all 0.3s ease; -webkit-transition:all 0.3s ease; -ms-transition:all 0.3s ease; -o-transition:all 0.3s ease; } .sidebar .popular-posts .post .text{ position:relative; font-weight:500; line-height:1.3em; margin:0px 0px 0px; font-size:var(--font-20); color:var(--dark-color); text-transform:capitalize; font-family:var(--font-family-Teko); } .sidebar .popular-posts .post .text a{ color:var(--dark-color); } .sidebar .popular-posts .post a:hover{ color:var(--main-color); } .sidebar .popular-posts .post-info{ position:relative; font-size:var(--font-14); color:var(--color-three); margin-top:var(--margin-top-5); padding-left:var(--padding-left-25); font-family:var(--font-family-Roboto); } .sidebar .popular-posts .post-info:before{ position:absolute; content:'\f073'; left:0px; top:-1px; color:var(--main-color); font-size:var(--font-14); font-family: 'FontAwesome'; } .gallery-posts .widget-content{ position:relative; padding:40px 35px 30px; border:1px solid var(--color-ten); box-shadow:0px 5px 10px rgba(0,0,0,0.04); } .gallery-posts .gallery-column{ position:relative; padding:0px 5px; margin-bottom:0px; } .gallery-posts .gallery-column .row{ margin:0px -5px; } .gallery-posts .gallery-column .post-thumb{ position:relative; margin-bottom:10px; } .gallery-posts .gallery-column .post-thumb .overlay-box{ position: absolute; content: ''; left: 0px; top: 0px; width: 100%; height: 100%; display: block; color:var(--white-color); font-size: var(--font-14); opacity: 0; text-align: center; transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; background-color: rgba(51,51,51,0.70); } .gallery-posts .gallery-column .post-thumb .overlay-box .fa{ top: 50%; position: relative; margin-top: -6px; display: block; } .gallery-posts .gallery-column .post-thumb:hover .overlay-box{ opacity:1; } .gallery-posts .gallery-column .post-thumb img{ display:block; width:100%; transition:all 0.3s ease; -moz-transition:all 0.3s ease; -webkit-transition:all 0.3s ease; -ms-transition:all 0.3s ease; -o-transition:all 0.3s ease; } .contact-widget .widget-content{ position:relative; padding:40px 30px; border:1px solid var(--color-ten); box-shadow:0px 5px 10px rgba(0,0,0,0.04); } /* Default Form Two */ .default-form-two{ position:relative; } .default-form-two .form-group{ position:relative; margin-bottom:var(--margin-bottom-5); } .default-form-two input[type="text"], .default-form-two input[type="email"], .default-form-two input[type="password"], .default-form-two select, .default-form-two textarea{ display:block; width:100%; line-height:28px; height:56px; padding:8px 0px; border-radius:0px; font-size:var(--font-16); color:var(--dark-color); transition:all 500ms ease; -webkit-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; font-family:var(--font-family-Roboto); border-bottom:1px solid var(--color-two); background:var(--white-color); } .default-form-two .form-group textarea::-webkit-input-placeholder, .default-form-two .form-group input::-webkit-input-placeholder{ color:var(--color-three); } .default-form-two textarea{ height:60px; resize:none; font-size:15px; padding-top:15px; } .default-form-two input[type="text"]:focus, .default-form-two input[type="email"]:focus, .default-form-two input[type="password"]:focus, .default-form-two select:focus, .default-form-two textarea:focus{ border-color:var(--main-color); } .default-form-two .theme-btn{ cursor:pointer; padding:14px 40px; letter-spacing:1px; letter-spacing:0px; font-size:var(--font-15); font-family:var(--font-family-Roboto); margin-top:var(--margin-top-30); } .tags-widget .widget-content{ position:relative; padding:40px 30px 35px; border:1px solid var(--color-ten); box-shadow:0px 5px 10px rgba(0,0,0,0.04); } .tags-widget a{ position:relative; padding:12px 20px 10px; display:inline-block; letter-spacing:1px; border-radius:2px; text-transform:uppercase; color:var(--color-three); margin-right:var(--margin-right-5); margin-bottom:var(--margin-bottom-10); border:1px solid var(--color-ten); } .tags-widget a:hover{ color:var(--white-color); border-color:var(--main-color); background-color:var(--main-color); } .sidebar-social-widget .widget-content{ position:relative; padding:40px 30px 35px; border:1px solid var(--color-ten); box-shadow:0px 5px 10px rgba(0,0,0,0.04); } .sidebar-social-widget .social-box{ position:relative; margin-top:var(--margin-top-10); } .sidebar-social-widget .social-box li{ position:relative; display:inline-block; margin-right:var(--margin-right-5); } .sidebar-social-widget .social-box li a{ position:relative; width:40px; height:40px; line-height:40px; text-align:center; display:inline-block; border-radius:0px; font-weight:normal; color:var(--dark-color); font-size:var(--font-14); font-family: 'FontAwesome'; background-color:var(--grey-color); } .sidebar-social-widget .social-box li a:hover{ color:var(--white-color); background-color:var(--main-color); } /* News Block Three */ .news-block-three{ position:relative; margin-bottom:var(--margin-bottom-40); } .news-block-three .inner-box{ position:relative; background-color:var(--white-color); box-shadow:0px 0px 18px rgba(0,0,0,0.06); } .news-block-three .inner-box .image{ position:relative; overflow:hidden; background-color:var(--main-color); } .news-block-three .inner-box .image img{ position:relative; width:100%; display:block; -webkit-transition: all 600ms ease; -moz-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; transition: all 600ms ease; } .news-block-three .inner-box:hover .image img{ opacity:0.80; transform:scale(1.06,1.06) rotate(2deg); } .news-block-three .inner-box .image:before{ position: absolute; top: 0; left: -85%; z-index: 2; display: block; content: ''; width: 50%; height: 100%; background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%); background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, .3))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%); -webkit-transform: skewX(-25deg); -ms-transform: skewX(-25deg); transform: skewX(-25deg); z-index: 1; } .news-block-three .inner-box:hover .image::before{ -webkit-animation: shine 1s; animation: shine 1s; } .news-block-three .inner-box .overlay-box{ position:absolute; left:0px; top:0px; width:100%; height:100%; text-align:center; overflow:hidden; line-height: 45px; overflow:hidden; } .news-block-three .inner-box .overlay-box:before{ position:absolute; content:''; left:0px; top:0px; right:0px; bottom:0px; z-index:10; } .news-block-three .inner-box .overlay-box .fas{ position: absolute; width:78px; height: 78px; left:50%; top: 50%; z-index:10; font-weight:700; text-align: center; display: inline-block; margin-top: -24px; margin-left:-24px; line-height:78px; border-radius:50%; font-size:var(--font-20); color: var(--main-color); padding-left:var(--padding-left-5); background-color:var(--white-color); transition:all 600ms ease; -moz-transition:all 600ms ease; -webkit-transition:all 600ms ease; -ms-transition:all 600ms ease; -o-transition:all 600ms ease; } .news-block-three .inner-box .overlay-box span:hover{ color:var(--white-color); background-color:var(--main-color); } .news-block-three .inner-box .post-date{ position:absolute; right:25px; top:25px; z-index:1; width:73px; height:70px; font-weight:500; padding:12px 10px; letter-spacing:1px; border-radius:3px; display:inline-block; letter-spacing:1px; text-align:center; font-size:var(--font-20); color:var(--white-color); text-transform:uppercase; background-color:var(--main-color); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .news-block-three .inner-box:hover .category{ color:var(--dark-color); background-color:var(--white-color); } .news-block-three .inner-box .lower-content{ position:relative; padding:30px 30px; } .news-block-three .inner-box .post-info{ position:relative; margin-top:var(--margin-top-20); padding-bottom:var(--padding-bottom-20); border-bottom:1px solid var(--color-four); } .news-block-three .inner-box .post-info li{ position:relative; display:inline-block; font-size:var(--font-15); padding-left:var(--padding-left-25); margin-right:var(--margin-right-15); color:#133344; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; font-family:var(--font-family-Roboto); } .news-block-three .inner-box .post-info li .icon{ position:absolute; left:0px; top:3px; opacity:0.80; color:#133344; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .news-block-three .inner-box .post-info li:last-child{ margin:var(--margin-zero); } .news-block-three .inner-box h2{ font-weight:500; font-size:var(--font-42); margin-top:var(--margin-top-20); } .news-block-three .inner-box h2 a{ color:var(--heading-color); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .news-block-three .inner-box:hover .read-more, .news-block-three .inner-box:hover h2 a{ color:var(--main-color); } .news-block-three .inner-box .text{ margin-top:var(--margin-top-20); margin-bottom:var(--margin-bottom-25); } .news-block-three .inner-box .read-more{ position:relative; font-weight:500; color:var(--dark-color); font-size:var(--font-16); text-transform:uppercase; display:inline-block; font-family:var(--font-family-Roboto); padding-right:var(--padding-right-10); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .news-block-three .inner-box .read-more:before{ position:absolute; content:'\f101'; left:100%; top:0px; font-size:var(--font-14); font-family: 'FontAwesome'; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .news-block-three .inner-box .read-more:hover::before{ left:0%; } .news-block-three .inner-box .read-more:hover{ padding-left:var(--padding-left-25); padding-right:var(--padding-zero); } .news-block-three .inner-box .share-options{ position:relative; } .news-block-three .inner-box .share-options li{ position:relative; display:inline-block; margin-left:var(--margin-left-5); } .news-block-three .inner-box .share-options li a{ position:relative; width:34px; height:34px; line-height:34px; text-align:center; display:inline-block; background-color:#f5f5f5; font-family: flaticon; } .news-block-three .inner-box .share-options li a:hover{ color:var(--white-color); background-color:var(--main-color); } /*** ==================================================================== Styled Pagination ==================================================================== ***/ .blog-classic .styled-pagination{ margin-top:var(--margin-top-60); } .styled-pagination{ position:relative; } .styled-pagination li{ position:relative; display:inline-block; margin:0px 6px 6px 0px; } .styled-pagination li a{ position:relative; display:inline-block; line-height:48px; height:50px; min-width:50px; font-weight:700; text-align:center; font-size:var(--font-16); color:var(--text-color); background:var(-white-color); border:2px solid #eaeaea; text-transform:capitalize; transition:all 500ms ease; -webkit-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; -moz-transition:all 500ms ease; } .styled-pagination li a:hover, .styled-pagination li a.active{ color:var(--white-color); border-color:var(--main-color); background-color:var(--main-color); } .blog-detail{ position:relative; } .blog-detail .inner-box{ position:relative; } .blog-detail .inner-box .image{ position:relative; } .blog-detail .inner-box .image img{ position:relative; width:100%; display:block; } .blog-detail .inner-box .lower-content{ position:relative; padding-top:var(--padding-top-35); } .blog-detail .inner-box h3{ font-weight:600; margin-bottom:var(--margin-bottom-15); } .blog-detail .inner-box blockquote{ position:relative; padding:40px 60px; font-weight:500; line-height:1.2em; font-size:var(--font-40); color:var(--white-color); margin-top:var(--margin-top-30); background-color:var(--color-eight); font-family:var(--font-family-Teko); background-position:center center; background-repeat:no-repeat; margin-bottom:var(--margin-bottom-40); z-index: 1; } .blog-detail .inner-box blockquote::before { position: absolute; top: 75px; right: 27%; height: 100%; z-index: -1; content: "\f10e"; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 200px; color: #243039; } .blog-detail .inner-box blockquote span{ position:relative; line-height:1em; display:block; font-weight:500; font-size:var(--font-17); color:var(--white-color); padding-left:var(--padding-left-60); margin-top:var(--margin-top-20); font-family:var(--font-family-Rubik); } .blog-detail .inner-box blockquote span:before{ position:absolute; content:''; left:0px; top:5px; height:2px; width:45px; background-color:var(--white-color); } .blog-detail .inner-box h4{ font-weight:600; margin-bottom:var(--margin-bottom-15); } .blog-detail .inner-box .two-column{ margin-top:var(--margin-top-30); margin-bottom:var(--margin-bottom-35); } .blog-detail .inner-box .list{ position:relative; } .blog-detail .inner-box .list li{ position:relative; line-height:1.8em; color:var(--text-color); font-size:var(--font-15); padding-left:var(--padding-left-50); margin-bottom:var(--margin-bottom-15); } .blog-detail .inner-box .list li:before{ position:absolute; content:'\f00e'; left:0px; top:6px; width:31px; height:33px; line-height:33px; text-align:center; font-family:IcoFont; color:var(--main-color); background-color:var(--main-color-rgba); } .blog_qoute_wrap { margin-bottom: 20px; } .blog_qoute_wrap .blog_list { margin-top: 30px; } .blog_qoute_wrap .quote-box { margin-top: 30px; } .blog_list li { position: relative; padding-top: 3px; color: var(--text-color); font-size: var(--font-16); padding-left: var(--padding-left-45); margin-bottom: var(--margin-bottom-20); transition: .3s; } .blog_list li::before { position: absolute; content: '\f00e'; left: 0px; top: 0px; width: 27px; height: 27px; line-height: 27px; text-align: center; border-radius: 50px; font-family: IcoFont; color: var(--main-color); background-color: var(--white-color); box-shadow: 0px 0px 15px rgba(0,0,0,0.05); transition: .3s; } .blog_list li:hover::before { background-color: var(--main-color); color: var(--white-color); } /* Post Share Options */ .blog-detail .post-share-options{ position:relative; padding:35px 0px 25px; margin-top: var(--margin-top-30); border-top:1px solid var(--color-two); border-bottom:1px solid var(--color-two); } .blog-detail .post-share-options .tags span{ position:relative; font-weight:500; margin-right:10px; color:var(--dark-color); font-size:var(--font-28); text-transform: capitalize; font-family:var(--font-family-Teko); } .blog-detail .post-share-options .tags a{ position: relative; padding: 10px 20px 8px; display: inline-block; letter-spacing: 1px; border-radius: 2px; text-transform: uppercase; color: var(--color-three); margin-right: var(--margin-right-5); margin-bottom: var(--margin-bottom-10); border: 1px solid var(--color-two); } .blog-detail .post-share-options .tags a:last-child{ margin-right: 0px; } .blog-detail .post-share-options .tags a:hover{ color: var(--white-color); border-color: var(--main-color); background-color: var(--main-color); } .blog-detail .post-share-options .social-box{ position:relative; margin-top:var(--margin-top-5); } .blog-detail .post-share-options .social-box .share{ position:relative; font-weight:500; margin-right:10px; color:var(--dark-color); font-size:var(--font-28); text-transform: capitalize; font-family:var(--font-family-Teko); } .blog-detail .post-share-options .social-box li{ position:relative; display:inline-block; margin-left:var(--margin-left-5); } .blog-detail .post-share-options .social-box li a{ position: relative; width: 40px; height: 40px; line-height: 40px; text-align: center; display: inline-block; border-radius: 0px; font-weight: normal; color: var(--dark-color); font-size: var(--font-14); font-family: 'FontAwesome'; background-color: var(--grey-color); } .blog-detail .post-share-options .social-box li a span{ font-family: 'FontAwesome'; } .blog-detail .post-share-options .social-box li a:hover{ color: var(--white-color); background-color: var(--main-color); } /*** ==================================================================== Comments Area ==================================================================== ***/ .sidebar-page-container .comments-area{ position:relative; padding:35px 0px 25px; margin-top:var(--margin-top-40); border-top:1px solid var(--color-two); border-bottom:1px solid var(--color-two); } .sidebar-page-container .group-title{ position:relative; } .sidebar-page-container .group-title h4{ margin-bottom:var(--margin-bottom-30); } .sidebar-page-container .comments-area .comment-box{ position:relative; margin-bottom:var(--margin-bottom-35); -webkit-transition:all 300ms ease; -ms-transition:all 300ms ease; -o-transition:all 300ms ease; -moz-transition:all 300ms ease; transition:all 300ms ease; } .sidebar-page-container .comments-area .comment-box:last-child{ margin-bottom:var(--margin-zero); } .sidebar-page-container .comments-area .comment{ position:relative; min-height:120px; padding-left:var(--padding-left-110); } .sidebar-page-container .comments-area .reply-comment{ margin-left:var(--margin-left-100); } .sidebar-page-container .comments-area .comment-box .author-thumb{ position:absolute; left:0px; top:0px; width:80px; height:80px; border-radius:50%; overflow:hidden; margin-bottom:var(--margin-bottom-20); } .sidebar-page-container .comments-area .comment-box .author-thumb img{ width:100%; display:block; } .sidebar-page-container .comments-area .comment-info{ margin-bottom:var(--margin-bottom-10); } .sidebar-page-container .comments-area .comment-box strong{ font-size:var(--font-22); font-weight:500; color:var(--dark-color); display:block; line-height:1.3em; display:block; text-transform:capitalize; font-family:var(--font-family-Teko); } .sidebar-page-container .comments-area .comment-box .text{ max-width:485px; color:var(--text-color); font-size:var(--font-14); margin-bottom:var(--margin-bottom-5); font-family:var(--font-family-Roboto); } .sidebar-page-container .comments-area .comment-info .comment-time{ position:relative; font-size:var(--font-14); color:var(--text-color); padding-left:24px; display:inline-block; margin-top:var(--margin-top-10); font-family:var(--font-family-Roboto); } .sidebar-page-container .comments-area .comment-info .comment-time:before{ position:absolute; content: "\f133"; left:0px; top:-1px; color:var(--text-color); font-family: 'FontAwesome'; } .sidebar-page-container .comments-area .comment-box .theme-btn{ position:absolute; right:60px; top:0px; font-weight:400; color:var(--color-three); font-size:var(--font-34); font-family: "Flaticon"; } .sidebar-page-container .comments-area .comment-box .theme-btn span{ margin-right:var(--margin-right-5); } .sidebar-page-container .comments-area .comment-box .theme-btn:hover{ color:var(--main-color); } /* Comment Form*/ .comments-form{ position:relative; margin-top:var(--margin-top-40); } .comments-form .form-group{ position:relative; margin-bottom:var(--margin-bottom-25); } .comments-form input[type="text"], .comments-form input[type="email"], .comments-form input[type="password"], .comments-form select, .comments-form textarea{ display:block; width:100%; line-height:28px; height:60px; padding:8px 25px; border-radius:3px; font-size:var(--font-15); color:var(--dark-color); transition:all 500ms ease; -webkit-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; border:1px solid var(--color-two); background:var(--color-four); } .comments-form .form-group textarea::-webkit-input-placeholder, .comments-form .form-group input::-webkit-input-placeholder{ color:var(--black-color); } .comments-form textarea{ height:210px; resize:none; font-size:15px; padding-top:15px; } .comments-form input[type="text"]:focus, .comments-form input[type="email"]:focus, .comments-form input[type="password"]:focus, .comments-form select:focus, .comments-form textarea:focus{ border-color:var(--main-color); } .comments-form .theme-btn{ cursor:pointer; } /* Radio Box */ .comments-form .form-group .radio-box{ position:relative; margin-top:var(--margin-top-10); margin-bottom:var(--margin-bottom-5); } .comments-form .form-group .radio-box label{ color:#2b2b2b; } .comments-form .form-group .radio-box label{ position: relative; display: inline; height: 30px; width: 100%; line-height: 9px; padding-left: 30px; background:none; font-weight: 400; font-size: var(--font-15); color:var(--black-color); cursor: pointer; margin-bottom: 0; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; font-family:var(--font-family-Roboto); } .comments-form .form-group .radio-box input[type="radio"]:checked + label{ border-color: var(--main-color); } .comments-form .form-group .form-group .radio-box label { padding-left: 30px; padding-top: 1px; cursor: pointer; } .comments-form .form-group .radio-box label:before{ position: absolute; left: 0px; top: 0px; height:17px; width: 17px; content: ""; border-radius: 0px; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; border:1px solid var(--color-three); } .comments-form .form-group .radio-box label:after { position: absolute; left: 0px; top: 0; height: 15px; line-height: 15px; max-width: 0; font-size: var(--font-14); color: #ffffff; font-weight: 800; overflow: hidden; background: transparent; text-align: center; font-family: 'FontAwesome'; -webkit-transition: max-width 500ms ease; -moz-transition: max-width 500ms ease; -ms-transition: max-width 500ms ease; -o-transition: max-width 500ms ease; transition: max-width 500ms ease; } .comments-form .form-group .radio-box input[type="radio"] { display: none; } .comments-form .form-group .radio-box input[type="radio"]:checked + label:before{ border: 7px solid var(--main-color); } .comments-form .form-group .radio-box input[type="radio"]:checked + label:after{ max-width: 20px; opacity: 1; } /*** ==================================================================== Error Section ==================================================================== ***/ .error-section{ position:relative; text-align:center; padding:110px 0px 120px; } .error-section .error_text { font-size: 404px; color: #E4E3E5; font-family: var(--font-family-Teko); margin-bottom: -40px; } .error-section h2{ margin-top:var(--margin-top-40); } .error-section .text{ position:relative; font-size: var(--font-16); margin-top:var(--margin-top-15); margin-bottom:var(--margin-bottom-30); } /*** ==================================================================== Contact Page Section ==================================================================== ***/ .contact-page-section{ position:relative; padding:110px 0px 110px; } .contact-info-block{ position:relative; margin-bottom:var(--margin-bottom-30); } .contact-info-block .inner-box{ position:relative; padding:35px 35px; border:1px solid var(--color-two); } .contact-info-block .inner-box .content{ position:relative; padding-left:var(--padding-left-70); } .contact-info-block .inner-box .icon{ position:absolute; left:0px; top:0px; line-height:1em; font-size:var(--font-50); font-family: "Flaticon"; color:var(--main-color); } .contact-info-block .inner-box h4{ font-weight:600; text-transform:capitalize; margin-bottom:var(--margin-bottom-10); } .contact-info-block .inner-box a{ position:relative; line-height: 1.8em; font-size: var(--font-16); color: var(--text-color); word-wrap:anywhere; } .contact-info-block .inner-box a:hover{ color: var(--main-color); } .contact-form-box{ position:relative; padding:55px 45px 40px; border-radius:6px; margin-top:var(--margin-top-20); border:1px solid var(--color-two); } .contact-form-box .title-box{ position:relative; margin-bottom:var(--margin-bottom-30); } .contact-form-box .title-box h2{ font-size:var(--font-40); } .contact-form-box .title-box .text{ font-size:var(--font-16); margin-top:var(--margin-top-10); } /* Contact Form*/ .contact-form{ position:relative; } .contact-form .form-group{ position:relative; margin-bottom:var(--margin-bottom-25); } .contact-form .form-group .icon{ position:absolute; right:32px; top:20px; color:var(--main-color); font-size:var(--font-18); font-family: "Flaticon"; } .contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="password"], .contact-form select, .contact-form textarea{ display:block; width:100%; line-height:28px; height:60px; padding:8px 25px; border-radius:3px; font-size:var(--font-15); color:var(--dark-color); transition:all 500ms ease; -webkit-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; border:1px solid var(--color-two); background:var(--white-color); } .contact-form .form-group textarea::-webkit-input-placeholder, .contact-form .form-group input::-webkit-input-placeholder{ color:var(--black-color); } .contact-form textarea{ height:310px; resize:none; font-size:15px; padding-top:15px; } .contact-form input[type="text"]:focus, .contact-form input[type="email"]:focus, .contact-form input[type="password"]:focus, .contact-form select:focus, .contact-form textarea:focus{ border-color:var(--main-color); } .contact-form .theme-btn{ padding: 14px 40px; letter-spacing: 1px; letter-spacing: 0px; font-size: var(--font-15); font-family: var(--font-family-Roboto); cursor:pointer; } /*** ================================================================== Contact Map Section ================================================================== ***/ .contact-map-section{ position: relative; } .contact-map-section iframe { position: relative; left: 0; top: 0; width: 100%; height: 571px; margin-bottom: -15px; } .contact-form input.error, .contact-form select.error, .contact-form textarea.error{ border-color:#ff0000 !important; } .contact-form label.error{ display:block; line-height:24px; padding:5px 0px 0px; margin:0px; text-transform:uppercase; font-size:12px; color:#ff0000; font-weight:500; }