/* @File: Lixi Template Style * This file contains the styling for the actual template, this is the file you need to edit to change the look of the template. This files table contents are outlined below>>>>> ******************************************* ******************************************* ** - Default CSS ** - Home One CSS ** - Home Two CSS ** - Home Three CSS ** - About CSS ** - Service Details CSS ** - Project Details CSS ** - Blog Details CSS ** - Contact CSS ** - User Form CSS ** - Error CSS ** - Coming Soon CSS ** - Rules CSS ** - Preloader CSS ** - Back To Top CSS */ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"); /*----- Default CSS -----*/ body { font-family: "Roboto", sans-serif; color: #5d5d5d; background-color: #fff; font-size: 15px; } h1, h2, h3, h4, h5, h6 { font-family: "Poppins", sans-serif; color: #242424; line-height: 1.4; font-weight: 500; } p { line-height: 1.8; } a { -webkit-transition: 0.5s all ease; transition: 0.5s all ease; text-decoration: none; color: #fdb139; } a:hover { color: #f32c2c; } img { max-width: 100%; } .d-table { width: 100%; height: 100%; } .d-table-cell { vertical-align: middle; } .ptb-100 { padding-top: 100px; padding-bottom: 100px; } .pt-70 { padding-top: 70px; } .pt-100 { padding-top: 100px; } .pb-70 { padding-bottom: 70px; } .pb-100 { padding-bottom: 100px; } button:focus { outline: 0; } .btn.focus, .btn:focus { -webkit-box-shadow: none; box-shadow: none; } /*----- End Default CSS -----*/ /*----- Home One CSS -----*/ /*-- Navbar CSS --*/ .main-nav { background-color: #232323;; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } .main-nav nav { padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; } .main-nav nav .navbar-nav { margin-left: auto; margin-right: auto; } .main-nav nav .navbar-nav .nav-item:hover a { color: #fdb139; } .main-nav nav .navbar-nav .nav-item a { text-transform: capitalize; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } .main-nav nav .navbar-nav .nav-item a:hover, .main-nav nav .navbar-nav .nav-item a:focus, .main-nav nav .navbar-nav .nav-item a.active { color: #fdb139; } .main-nav nav .navbar-nav .nav-item a i { display: inline-block; font-size: 18px; position: relative; top: 2px; } .main-nav nav .navbar-nav .nav-item .dropdown-menu { background: #1d3d5d; padding-top: 0; padding-left: 0; padding-right: 0; padding-bottom: 0; } .main-nav nav .navbar-nav .nav-item .dropdown-menu li:hover .dropdown-menu { top: 0px !important; } .main-nav nav .navbar-nav .nav-item .dropdown-menu li:hover a { color: #fdb139; } .main-nav nav .navbar-nav .nav-item .dropdown-menu li a:hover, .main-nav nav .navbar-nav .nav-item .dropdown-menu li a:focus, .main-nav nav .navbar-nav .nav-item .dropdown-menu li a.active { color: #fdb139; } .main-nav nav .navbar-nav .nav-item .dropdown-menu li .dropdown-menu { left: unset; right: -100%; } .main-nav nav .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a:hover, .main-nav nav .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a:focus, .main-nav nav .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a.active { color: #fdb139; } .main-nav.menu-shrink { padding-top: 10px; padding-bottom: 10px; } .dropdown-toggle::after { display: none; } .side-nav a { display: inline-block; font-weight: 500; color: #fff; background-color: #fdb139; border-radius: 5px; padding: 12px 25px; } .side-nav a:hover { background-color: #242424; } /*-- End Navbar CSS --*/ /*-- Banner CSS --*/ .banner-area { height: 1000px; position: relative; overflow: hidden; } .banner-area .banner-shape img { position: absolute; z-index: -1; } .banner-area .banner-shape img:nth-child(1) { bottom: 165px; right: 0; max-width: 900px; } .banner-area .banner-shape img:nth-child(2) { top: 300px; left: 150px; -webkit-animation: banner-ani-one 10s linear infinite; animation: banner-ani-one 10s linear infinite; } .banner-area .banner-shape img:nth-child(3) { left: 20px; bottom: 150px; -webkit-animation: banner-ani-two 10s linear infinite; animation: banner-ani-two 10s linear infinite; } .banner-area .banner-shape img:nth-child(4) { left: 150px; bottom: 100px; -webkit-animation: banner-ani-three 10s linear infinite; animation: banner-ani-three 10s linear infinite; } .banner-area .banner-shape img:nth-child(5) { left: 400px; bottom: 250px; -webkit-animation: banner-ani-four 10s linear infinite; animation: banner-ani-four 10s linear infinite; } .banner-area .banner-shape img:nth-of-type(6) { right: 200px; top: 300px; -webkit-animation: banner-ani-five 10s linear infinite; animation: banner-ani-five 10s linear infinite; } .banner-area .banner-shape img:nth-of-type(7) { top: 250px; right: 600px; -webkit-animation: banner-ani-six 10s linear infinite; animation: banner-ani-six 10s linear infinite; z-index: -2; } @-webkit-keyframes banner-ani-one { 0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 50% { -webkit-transform: translate(-50px, -50px); transform: translate(-50px, -50px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes banner-ani-one { 0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 50% { -webkit-transform: translate(-50px, -50px); transform: translate(-50px, -50px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes banner-ani-two { 0% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } 50% { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } 100% { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); } } @keyframes banner-ani-two { 0% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } 50% { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } 100% { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); } } @-webkit-keyframes banner-ani-three { 0% { opacity: 1; } 50% { opacity: .10; } 100% { opacity: 1; } } @keyframes banner-ani-three { 0% { opacity: 1; } 50% { opacity: .10; } 100% { opacity: 1; } } @-webkit-keyframes banner-ani-four { 0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 40% { -webkit-transform: translate(-50px, -50px); transform: translate(-50px, -50px); } 70% { -webkit-transform: translate(50px, -50px); transform: translate(50px, -50px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes banner-ani-four { 0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 40% { -webkit-transform: translate(-50px, -50px); transform: translate(-50px, -50px); } 70% { -webkit-transform: translate(50px, -50px); transform: translate(50px, -50px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes banner-ani-five { 0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 40% { -webkit-transform: translate(-80px, -80px); transform: translate(-80px, -80px); } 70% { -webkit-transform: translate(100px, -100px); transform: translate(100px, -100px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes banner-ani-five { 0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 40% { -webkit-transform: translate(-80px, -80px); transform: translate(-80px, -80px); } 70% { -webkit-transform: translate(100px, -100px); transform: translate(100px, -100px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes banner-ani-six { 0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 40% { -webkit-transform: translate(0px, -30px); transform: translate(0px, -30px); } 70% { -webkit-transform: translate(40px, -50px); transform: translate(40px, -50px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes banner-ani-six { 0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 40% { -webkit-transform: translate(0px, -30px); transform: translate(0px, -30px); } 70% { -webkit-transform: translate(40px, -50px); transform: translate(40px, -50px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } .banner-text { max-width: 595px; } .banner-text h1 { font-size: 63px; margin-bottom: 10px; } .banner-text h1 span { color: #fdb139; } .banner-text p { font-size: 18px; font-weight: 500; margin-bottom: 30px; } .cmn-btn { color: #fff; background-color: #fdb239; display: inline-block; border-radius: 5px; padding: 12px 30px; } .cmn-btn:hover { color: #fff; background-color: #242424; } /*-- End Banner CSS --*/ /*-- Counter CSS --*/ .counter-area { position: relative; } .counter-area:before { position: absolute; content: ''; width: 100%; height: 50%; left: 0; top: 0; background-color: #fff; } .counter-area:after { position: absolute; content: ''; width: 100%; height: 50%; right: 0; bottom: 0; background-color: #f5f5f5; z-index: -1; } .counter-wrap { max-width: 1290px; margin-left: auto; margin-right: auto; background-image: url("../img/home-one/counter-bg.jpg"); background-size: cover; background-position: center center; background-repeat: no-repeat; position: relative; padding-top: 50px; padding-bottom: 20px; z-index: 1; } .counter-wrap:before { border-radius: 50px; position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; background-color: #ffc37d; opacity: .85; } .counter-item { text-align: center; margin-bottom: 30px; position: relative; margin-top: -5px; } .counter-item h3 { font-size: 50px; font-weight: 600; color: #151515; margin-bottom: 5px; } .counter-item p { margin-bottom: 0; color: #151515; } /*-- End Counter CSS --*/ /*-- Choose CSS --*/ .choose-area { background-color: #f5f5f5; position: relative; overflow: hidden; } .choose-area .choose-shape img { position: absolute; } .choose-area .choose-shape img:nth-child(1) { top: 330px; left: 345px; -webkit-animation: banner-ani-four 10s linear infinite; animation: banner-ani-four 10s linear infinite; } .choose-area .choose-shape img:nth-child(2) { right: 100px; bottom: -40px; -webkit-animation: banner-ani-three 10s linear infinite; animation: banner-ani-three 10s linear infinite; } .choose-area .choose-shape img:nth-child(3) { top: -200px; right: 0; } .choose-item { margin-bottom: 30px; background-color: #fff; border-radius: 5px; padding: 35px 40px 35px; -webkit-box-shadow: 0px 0px 20px 0px #ddddddad; box-shadow: 0px 0px 20px 0px #ddddddad; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; position: relative; z-index: 1; } .choose-item:hover { -webkit-box-shadow: none; box-shadow: none; } .choose-item:hover i { color: #e9eded; background-color: #232323; } .choose-item i { display: inline-block; width: 60px; height: 60px; line-height: 60px; text-align: center; border-radius: 50%; color: #232323; background-color: #e9eded; font-size: 32px; margin-bottom: 20px; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } .choose-item h3 { font-size: 20px; font-weight: 600; margin-bottom: 15px; } .choose-item p { margin-bottom: 0; } .choose-contact { margin-bottom: 30px; position: relative; z-index: 1; } .choose-contact .section-title { text-align: left; margin-bottom: 25px; max-width: 100%; } .choose-contact p { margin-bottom: 35px; } .choose-contact.two p { margin-bottom: 10px; } .choose-contact.two p:last-child { margin-bottom: 0; } .section-title { text-align: center; margin-bottom: 40px; max-width: 500px; margin-left: auto; margin-right: auto; margin-top: -5px; position: relative; z-index: 1; } .section-title .sub-title { display: block; color: #f32c2c; font-weight: 500; margin-bottom: 8px; } .section-title h2 { font-size: 36px; margin-bottom: 0; } /*-- End Choose CSS --*/ /*-- Services CSS --*/ .service-item { margin-bottom: 30px; text-align: center; /*--border: 1px solid #fdb139;--*/ padding: 21px; border-radius: 8px; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } .service-item:hover { background-color: #fdb139; } .service-item:hover h3 a { color: #fff; } .service-item:hover p { color: #fff; } .service-item:hover .service-link { color: #fff; } .service-item .service-top { position: relative; margin-bottom: 30px; } .service-item .service-top img:last-child { position: absolute; left: 0; right: 0; bottom: 0; margin-left: auto; margin-right: auto; } .service-item h3 { font-size: 20px; margin-bottom: 15px; } .service-item h3 a { color: #242424; } .service-item h3 a:hover { letter-spacing: 1px; } .service-item p { margin-bottom: 12px; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } .service-item .service-link { display: inline-block; color: #232323; font-weight: 500; } .service-item .service-link i { display: inline-block; font-size: 17px; position: relative; top: 2px; } .service-item .service-link:hover { letter-spacing: 1px; } .service-item.two { border: 1px solid #232323; } .service-item.two:hover { background-color: #232323; } .service-item.three { border: 1px solid #e54b4b; } .service-item.three:hover { background-color: #e54b4b; } /*-- End Services CSS --*/ /*-- About CSS --*/ .about-area { background-color: #f5f5f5; } .about-area .container-fluid { padding-left: 0; padding-right: 0; } .about-area .container-fluid .row { margin-left: 0; margin-right: 0; } .about-area .container-fluid .row .col-lg-6 { padding-left: 0; padding-right: 0; } .about-area .container-fluid .row .col-lg-7 { padding-left: 0; padding-right: 0; } .about-area .about-content { padding-top: 40px; padding-bottom: 100px; max-width: 610px; margin-left: auto; padding-right: 9px; } .about-area .about-content .section-title { text-align: left; margin-bottom: 20px; margin-left: 0; } .about-area .about-content p { margin-bottom: 30px; } .about-area .about-img { background-image: url('https://img.youtube.com/vi/8D43bE3Stfk/maxresdefault.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; width: 100%; height: 100%; position: relative; } .about-area .about-img:before { position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; background-color: #000; opacity: .50; } .about-area .about-img img { display: none; } .video-wrap { position: absolute; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .video-wrap a { z-index: 10; display: block; width: 100px; height: 100px; line-height: 110px; border-radius: 50%; position: relative; font-size: 60px; text-align: center; color: #fdb139; } .video-wrap a:before { content: ''; position: absolute; z-index: 0; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); display: block; width: 100px; height: 100px; background-color: #fff; border-radius: 50%; z-index: -1; -webkit-animation: pulse-border 1500ms ease-out infinite; animation: pulse-border 1500ms ease-out infinite; } .video-wrap a:after { content: ''; position: absolute; z-index: 1; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); display: block; width: 100px; height: 100px; background-color: #fff; border-radius: 50%; z-index: -1; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } .video-wrap a:hover { color: #fff; } .video-wrap a:hover:before { background-color: #fdb139; } .video-wrap a:hover:after { background-color: #fdb139; } @-webkit-keyframes pulse-border { 0% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); opacity: 1; } 100% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); opacity: 0; } } @keyframes pulse-border { 0% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); opacity: 1; } 100% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); opacity: 0; } } /*-- End About CSS --*/ /*-- Projects CSS --*/ .project-area { position: relative; overflow: hidden; } .project-area .project-shape img { position: absolute; } .project-area .project-shape img:nth-child(1) { left: 50px; top: 20%; -webkit-animation: banner-ani-five 10s linear infinite; animation: banner-ani-five 10s linear infinite; } .project-area .project-shape img:nth-child(2) { right: 40px; top: 40%; -webkit-animation: banner-ani-two 10s linear infinite; animation: banner-ani-two 10s linear infinite; } .project-item { margin-bottom: 30px; } .project-item:hover .project-top img { -webkit-transform: scale(1.1); transform: scale(1.1); } .project-item .project-top { overflow: hidden; margin-bottom: 15px; border-radius: 5px; } .project-item .project-top a { display: block; } .project-item .project-top a img { width: 100%; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } .project-item h3 { font-weight: 600; font-size: 20px; margin-bottom: 5px; } .project-item h3 a { color: #242424; } .project-item h3 a:hover { color: #fdb139; } .project-item a { display: block; color: #5d5d5d; } .project-item a:hover { color: #fdb139; } /*-- End Projects CSS --*/ /*-- Estimate CSS --*/ .estimate-area { background-image: url("../img/home-one/estimation-bg.jpg"); background-size: cover; background-position: center center; background-repeat: no-repeat; position: relative; text-align: center; z-index: 1; } .estimate-area:before { position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; background-color: #000; opacity: .80; z-index: -1; } .estimate-area .estimate-content { max-width: 800px; margin-left: auto; margin-right: auto; } .estimate-area .estimate-content .section-title h2 { color: #fff; } .estimate-area .estimate-content .form-group { margin-bottom: 20px; } .estimate-area .estimate-content .form-group .form-control { height: 55px; border-radius: 5px; padding-left: 20px; font-size: 15px; border: 1px solid #fff; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } .estimate-area .estimate-content .form-group .form-control:focus { -webkit-box-shadow: none; box-shadow: none; border: 1px solid #fdb139; } .estimate-area .estimate-content .form-group textarea { height: auto !important; padding-top: 15px; } .estimate-area .estimate-content .cmn-btn { border: 0; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } /*-- End Estimate CSS --*/ /*-- Review CSS --*/ .review-area { position: relative; } .review-area .section-title { margin-bottom: 25px; } .review-area .review-shape img { position: absolute; top: 100px; left: 100px; -webkit-animation: banner-ani-six 10s linear infinite; animation: banner-ani-six 10s linear infinite; } .review-area .owl-prev { width: 55px; height: 55px; border-radius: 50px !important; color: #fff !important; background-color: #f32c2c !important; font-size: 30px !important; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } .review-area .owl-prev i { line-height: 55px !important; } .review-area .owl-prev:hover { background-color: #242424 !important; } .review-area .owl-next { width: 55px; height: 55px; border-radius: 50px !important; color: #fff !important; background-color: #f32c2c !important; font-size: 30px !important; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } .review-area .owl-next i { line-height: 55px !important; } .review-area .owl-next:hover { background-color: #242424 !important; } .review-area .owl-theme .owl-nav { margin-top: 0; margin-bottom: -5px; } .review-area .review-item { -webkit-box-shadow: 0px 0px 20px 0px #dddddd80; box-shadow: 0px 0px 20px 0px #dddddd80; text-align: center; margin: 15px 40px 30px; position: relative; padding: 30px 60px 30px; border-radius: 5px; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; background-color: #fff; border: 1px solid #fff; } .review-area .review-item:hover { -webkit-box-shadow: none; box-shadow: none; border: 1px solid #f5f5f5; } .review-area .review-item:hover img { left: 15px; } .review-area .review-item img { width: 80px !important; position: absolute; top: 32px; left: -35px; border-radius: 10px; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } .review-area .review-item h3 { font-weight: 600; font-size: 20px; color: #232323; margin-bottom: 10px; } .review-area .review-item span { display: block; margin-bottom: 12px; } .review-area .review-item ul { margin: 0; padding: 0; margin-bottom: 10px; } .review-area .review-item ul li { list-style-type: none; display: inline-block; } .review-area .review-item ul li i { display: block; font-size: 15px; } .review-area .review-item ul li .checked { color: #fdb139; } .review-area .review-item p { margin-bottom: 0; } .review-area.two .review-item { margin: 0px 35px 30px; } /*-- End Review CSS --*/ /*-- Subscribe CSS --*/ .subscribe-area { position: relative; } .subscribe-area:before { position: absolute; content: ''; width: 100%; height: 50%; left: 0; bottom: 0; background-color: #232323; } .subscribe-area .subscribe-wrap { max-width: 1290px; margin-left: auto; margin-right: auto; padding: 50px 60px 50px; border-radius: 50px; -webkit-box-shadow: 0px 0px 20px 0px #dddddd80; box-shadow: 0px 0px 20px 0px #dddddd80; background-color: #ffcc92; z-index: 1; position: relative; } .subscribe-area .subscribe-wrap .section-title { text-align: left; margin-bottom: 0; margin-left: 0; } .subscribe-area .subscribe-wrap .section-title h2 { font-size: 30px; } .subscribe-area .subscribe-wrap .newsletter-form { position: relative; } .subscribe-area .subscribe-wrap .newsletter-form .form-control { border-radius: 30px; border: 1px solid #b7c3c3; padding-left: 25px; font-size: 15px; height: 50px; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } .subscribe-area .subscribe-wrap .newsletter-form .form-control:focus { -webkit-box-shadow: none; box-shadow: none; border: 1px solid #fdb139; } .subscribe-area .subscribe-wrap .newsletter-form ::-webkit-input-placeholder { color: #242424; } .subscribe-area .subscribe-wrap .newsletter-form :-ms-input-placeholder { color: #242424; } .subscribe-area .subscribe-wrap .newsletter-form ::-ms-input-placeholder { color: #242424; } .subscribe-area .subscribe-wrap .newsletter-form ::placeholder { color: #242424; } .subscribe-area .subscribe-wrap .newsletter-form .cmn-btn { position: absolute; top: 0; right: 0; border: 0; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; opacity: 1; background-color: #fdb139; border-radius: 30px; padding: 13px 30px; } .subscribe-area .subscribe-wrap .newsletter-form .cmn-btn:hover { background-color: #242424; } .subscribe-area .subscribe-wrap .newsletter-form .validation-danger { margin-top: 10px; font-size: 15px; color: #dc3545; } .subscribe-area .subscribe-wrap .newsletter-form .validation-success { margin-top: 10px; font-size: 15px; color: #28a745; } /*-- End Subscribe CSS --*/ /*-- Footer CSS --*/ footer { background-color: #232323; } .footer-item { margin-bottom: 30px; } .footer-item h3 { margin-bottom: 30px; padding-bottom: 10px; position: relative; color: #fdb139; font-size: 20px; } .footer-item h3:before { position: absolute; content: ''; width: 50px; height: 2px; left: 0; bottom: 0; background-color: #fdb139; } .footer-item ul { margin: 0; padding: 0; } .footer-item ul li { list-style-type: none; display: block; } .footer-item ul li a { display: block; } .footer-item .footer-logo a { display: block; margin-bottom: 30px; } .footer-item .footer-logo p { margin-bottom: 0; color: #fff; } .footer-item .footer-company ul li { margin-bottom: 12px; } .footer-item .footer-company ul li:last-child { margin-bottom: 0; } .footer-item .footer-company ul li a { color: #fff; } .footer-item .footer-company ul li a:hover { color: #fdb139; } .footer-item .footer-contact ul li { margin-bottom: 12px; } .footer-item .footer-contact ul li span { display: inline-block; color: #fff; } .footer-item .footer-contact ul li a { display: inline-block; color: #fff; margin-left: 5px; } .footer-item .footer-contact ul li a:hover { color: #fdb139; } .footer-item .footer-social ul li { display: inline-block; margin-right: 5px; } .footer-item .footer-social ul li a { width: 30px; height: 30px; border-radius: 5px; color: #242424; background-color: #fff; text-align: center; font-size: 17px; } .footer-item .footer-social ul li a i { line-height: 30px; } .footer-item .footer-social ul li a:hover { color: #fff; background-color: #fdb139; } .copyright-area { margin-top: 70px; border-top: 1px solid #f5f5f529; text-align: center; padding-top: 25px; padding-bottom: 25px; } .copyright-area p { margin-bottom: 0; color: #fff; } .copyright-area p a { display: inline-block; font-weight: 600; color: #fdb139; } .copyright-area p a:hover { color: #fff; } /*-- End Footer CSS --*/ /*----- End Home One CSS -----*/ /*----- Home Two CSS -----*/ /*-- Banner CSS --*/ .banner-area.two { height: 700px; background-size: cover; background-position: center center; background-repeat: no-repeat; position: relative; } .banner-area.two:before { position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; background-color: #00000096; opacity: .70; } .banner-area.two .banner-text { position: relative; text-align: center; Float:left; max-width: 636px; margin-left: 40px; margin-right: 40px; margin-top: 40px; } .banner-area.two .banner-text h1 { color: #fff; margin-bottom: 30px; } .banner-area.two .banner-text p { color: #fff; font-size: 20px; font-weight: 400; max-width: 645px; margin-left: auto; margin-right: auto; margin-bottom: 50px; } .banner-area.two .banner-text .col-lg-5 { -webkit-box-flex: 0; -ms-flex: 0 0 40%; flex: 0 0 40%; max-width: 40%; } .banner-area.two .banner-text .col-lg-2 { -webkit-box-flex: 0; -ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%; } .banner-area.two .banner-text .banner-form { background-color: #fff; border-radius: 5px; -webkit-box-shadow: 0px 0px 0px 10px #ffffff59; box-shadow: 0px 0px 0px 10px #ffffff59; padding: 35px 35px 15px; } .banner-area.two .banner-text .banner-form h2 { font-weight: 500; font-size: 30px; margin-bottom: 30px; } .banner-area.two .banner-text .banner-form .form-group { margin-bottom: 30px; position: relative; } .banner-area.two .banner-text .banner-form .form-group label { margin-bottom: 0; position: absolute; top: 18px; right: 20px; } .banner-area.two .banner-text .banner-form .form-group label i { display: inline-block; font-size: 20px; color: #232323; } .banner-area.two .banner-text .banner-form .form-group .form-control { height: 55px; border-radius: 5px; border: 1px solid #232323; padding-left: 20px; padding-right: 20px; font-size: 15px; } .banner-area.two .banner-text .banner-form .form-group .form-control:focus { border: 1px solid #fdb139; -webkit-box-shadow: none; box-shadow: none; } .banner-area.two .banner-text .banner-form .form-group ::-webkit-input-placeholder { color: #232323; } .banner-area.two .banner-text .banner-form .form-group :-ms-input-placeholder { color: #232323; } .banner-area.two .banner-text .banner-form .form-group ::-ms-input-placeholder { color: #232323; } .banner-area.two .banner-text .banner-form .form-group ::placeholder { color: #232323; } .banner-area.two .banner-text .banner-form .form-group .nice-select { display: block; width: 100%; height: 55px; border-radius: 5px; border: 1px solid #232323; padding-left: 20px; padding-right: 20px; font-size: 15px; line-height: 55px; color: #232323; } .banner-area.two .banner-text .banner-form .form-group .nice-select::after { border-bottom: 2px solid #999; height: 10px; right: 23px; top: 45%; width: 10px; } .banner-area.two .banner-text .banner-form .form-group .nice-select .list { width: 100%; display: block; } .banner-area.two .banner-text .banner-form .cmn-btn { border: 0; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; background-color: #232323; padding: 12px 10px; display: block; width: 100%; height: 55px; margin-bottom: 30px; } .banner-area.two .banner-text .banner-form .cmn-btn:hover { background-color: #fdb139; } /*-- End Banner CSS --*/ /*-- Choose CSS --*/ .choose-area.two { background-color: #fff; } .choose-area.two .choose-shape img:nth-child(1) { top: unset; bottom: 90px; } .choose-area.two .choose-content .about-img { margin-bottom: 30px; position: relative; z-index: 1; } .choose-area.two .choose-content .about-img img { max-width: 350px; width: 100%; border-radius: 10px; } .choose-area.two .choose-content .about-img img:first-child { margin-bottom: -150px; } .choose-area.two .choose-content .about-img img:last-child { margin-top: -150px; margin-left: 285px; } /*-- End Choose CSS --*/ /*-- Service CSS --*/ .service-area.two { background-color: #f5f5f5; } .service-area.two .service-item { text-align: left; border: 1px solid #fff; background-color: #fff; } .service-area.two .service-item:hover { background-color: #232323; border: 1px solid #456061; } .service-area.two .service-item:hover .service-top i { color: #fdb139; background-color: #456061; } .service-area.two .service-item .service-top { margin-bottom: 16px; } .service-area.two .service-item .service-top i { display: inline-block; width: 60px; height: 60px; line-height: 60px; text-align: center; border-radius: 50%; font-size: 25px; color: #232323; background-color: #e9eded; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } .service-area.two .service-item h3 { margin-bottom: 13px; } /*-- End Service CSS --*/ /*-- About CSS --*/ .about-area.two { background-color: #fff; } .about-area.two .about-content { padding-top: 0; padding-bottom: 0; margin-bottom: 30px; } .about-area.two .about-content p { margin-bottom: 25px; } .about-area.two .about-content ul { margin: 0; padding: 0; } .about-area.two .about-content ul li { list-style-type: none; display: block; margin-bottom: 12px; font-weight: 500; } .about-area.two .about-content ul li:hover i { color: #fff; background-color: #fdb139; } .about-area.two .about-content ul li:last-child { margin-bottom: 0; } .about-area.two .about-content ul li i { display: inline-block; width: 25px; height: 25px; text-align: center; line-height: 25px; border-radius: 50%; color: #fff; background-color: #232323; font-size: 20px; margin-right: 5px; position: relative; top: 2px; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } .about-area.two .choose-img { margin-bottom: 30px; } .about-area.two .choose-img img { max-width: 350px; width: 100%; border-radius: 10px; } .about-area.two .choose-img img:first-child { margin-bottom: -150px; margin-left: 190px; } .about-area.two .choose-img img:last-child { margin-top: -150px; } /*-- End About CSS --*/ /*-- Projects CSS --*/ .project-area.two { background-color: #f5f5f5; } /*-- End Projects CSS --*/ /*-- FAQ CSS --*/ .faq-area .faq-content .accordion { margin: 0; padding: 0; } .faq-area .faq-content .accordion p { display: none; padding: 20px 15px 0 15px; margin-bottom: 0; } .faq-area .faq-content .accordion a { width: 100%; display: block; cursor: pointer; padding: 15px 15px 15px 18px; border: 1px solid #232323; font-weight: 500; border-radius: 5px; font-size: 17px; color: #242424; } .faq-area .faq-content .accordion a:after { position: absolute; right: 20px; content: "+"; top: 10px; color: #000000; font-size: 25px; font-weight: 500; } .faq-area .faq-content .accordion a.active { color: #fff; background-color: #232323; border: 1px solid #232323; } .faq-area .faq-content .accordion a.active:after { content: "-"; font-size: 25px; color: #fff; } .faq-area .faq-content .accordion li { position: relative; list-style-type: none; margin-bottom: 30px; display: block; } .faq-area .faq-content .accordion li:first-child { border-top: 0; } .faq-area .faq-content .accordion li:last-child { margin-bottom: 0; } .faq-area .faq-img { background-image: url("../img/home-two/faq.jpg"); background-size: cover; background-position: center center; background-repeat: no-repeat; width: 100%; height: 100%; } .faq-area .faq-img img { display: none; } /*-- End FAQ CSS --*/ /*-- Team CSS --*/ .team-area { background-color: #f5f5f5; } .team-item { text-align: center; border-radius: 5px; background-color: #fff; padding-bottom: 22px; margin-bottom: 30px; } .team-item:hover .team-top ul { bottom: 20px; opacity: 1; visibility: visible; } .team-item .team-top { position: relative; } .team-item .team-top img { border-radius: 5px 5px 0 0; } .team-item .team-top ul { margin: 0; padding: 0; position: absolute; left: 0; right: 0; bottom: 10px; margin-left: auto; margin-right: auto; opacity: 0; visibility: hidden; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } .team-item .team-top ul li { list-style-type: none; display: inline-block; margin-left: 2px; margin-right: 2px; } .team-item .team-top ul li a { display: block; width: 35px; height: 35px; background-color: #fff; color: #232323; border-radius: 5px; border-radius: 2px; font-size: 20px; } .team-item .team-top ul li a i { line-height: 35px; } .team-item .team-top ul li a:hover { color: #fff; background-color: #fdb139; } .team-item h3 { font-size: 20px; margin-bottom: 8px; margin-top: 15px; } .team-item span { display: block; } /*-- End Team CSS --*/ /*-- Counter CSS --*/ .counter-area.two:before { background-color: #f5f5f5; } .counter-area.two:after { background-color: #fff; } .counter-area.two .counter-item h3 { color: #fff; } /*-- End Counter CSS --*/ /*----- End Home Two CSS -----*/ /*----- Home Three CSS -----*/ /*-- Navbar CSS --*/ .navbar-area.two .main-nav { background-color: #1f1700; /*-webkit-box-shadow: 0px 0px 20px 0px #3b5253ad; box-shadow: 0px 0px 20px 0px #3b5253ad;*/ } /*-- End Navbar CSS --*/ /*-- banner CSS --*/ .banner-area.three { background-color: #1f1700; height: 900px; } .banner-area.three .banner-shape img { z-index: 0; } .banner-area.three .banner-shape img:nth-child(1) { display: block; -webkit-animation: border-transform-default 10s linear infinite alternate forwards; animation: border-transform-default 10s linear infinite alternate forwards; border: 10px solid #fff; bottom: 155px; right: 70px; max-width: 520px; z-index: 1; } .banner-area.three .banner-text { position: relative; z-index: 1; } .banner-area.three .banner-text h1 { color: #fff; } .banner-area.three .banner-text p { color: #fff; } .banner-area.three .banner-text .banner-service .nice-select { width: 100%; display: block; border: 1px solid #fff; padding-left: 15px; font-size: 15px; color: #fff; background-color: transparent; height: 55px; line-height: 55px; } .banner-area.three .banner-text .banner-service .nice-select::after { border-bottom: 2px solid #fff; border-right: 2px solid #fff; height: 7px; width: 7px; right: 18px; } .banner-area.three .banner-text .banner-service .nice-select .list { width: 100%; display: block; } .banner-area.three .banner-text .banner-service .nice-select .list .option { color: #242424; } .banner-area.three .banner-text .banner-service .cmn-btn { border: 0; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; height: 55px; display: block; width: 100%; background-color: #fdb139; } .banner-area.three .banner-text .banner-service .cmn-btn:hover { background-color: #242424; } @-webkit-keyframes border-transform-default { 0%, to { border-radius: 63% 37% 54% 46%/55% 48% 52% 45%; } 14% { border-radius: 40% 60% 54% 46%/49% 60% 40% 51%; } 28% { border-radius: 54% 46% 38% 62%/49% 70% 30% 51%; } 42% { border-radius: 61% 39% 55% 45%/61% 38% 62% 39%; } 56% { border-radius: 61% 39% 67% 33%/70% 50% 50% 30%; } 70% { border-radius: 50% 50% 34% 66%/56% 68% 32% 44%; } 84% { border-radius: 46% 54% 50% 50%/35% 61% 39% 65%; } } @keyframes border-transform-default { 0%, to { border-radius: 63% 37% 54% 46%/55% 48% 52% 45%; } 14% { border-radius: 40% 60% 54% 46%/49% 60% 40% 51%; } 28% { border-radius: 54% 46% 38% 62%/49% 70% 30% 51%; } 42% { border-radius: 61% 39% 55% 45%/61% 38% 62% 39%; } 56% { border-radius: 61% 39% 67% 33%/70% 50% 50% 30%; } 70% { border-radius: 50% 50% 34% 66%/56% 68% 32% 44%; } 84% { border-radius: 46% 54% 50% 50%/35% 61% 39% 65%; } } /*-- End Banner CSS --*/ /*-- Counter CSS --*/ .counter-area.three:before { background-color: #232323; } .counter-area.three:after { background-color: #fff; } .counter-area.three .counter-wrap { background-image: unset; background-color: #fff; -webkit-box-shadow: 0px 0px 20px 0px #2323233b; box-shadow: 0px 0px 20px 0px #2323233b; } .counter-area.three .counter-wrap:before { display: none; } .counter-area.three .counter-wrap .counter-item p { color: #242424; font-weight: 500; } /*-- End Counter CSS --*/ /*-- Service CSS --*/ .service-area.three { border-bottom:1px solid #9E9E9E; background-color: #ffffff; } .service-area.three .service-item { background-color: #f8f8f8; } .service-area.three .service-item:hover { background-color: #fdb139; } .service-area.three .service-item.two:hover { background-color: #232323; } .service-area.three .service-item.three:hover { background-color: #e54b4b; } /*-- End Service CSS --*/ /*-- Blog CSS --*/ .blog-item { margin-bottom: 30px; -webkit-box-shadow: 0px 0px 20px 0px #dddddd80; box-shadow: 0px 0px 20px 0px #dddddd80; text-align: center; border-radius: 12px; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } .blog-item:hover { -webkit-transform: translate(0, -10px); transform: translate(0, -10px); } .blog-item a { display: block; } .blog-item a img { border-radius: 10px; margin-bottom: 20px; } .blog-item .blog-bottom { padding: 0 35px 25px; } .blog-item .blog-bottom h3 { margin-bottom: 10px; font-size: 20px; } .blog-item .blog-bottom h3 a { display: block; color: #242424; } .blog-item .blog-bottom h3 a:hover { color: #fdb139; } .blog-item .blog-bottom ul { margin: 0; padding: 0; margin-bottom: 12px; } .blog-item .blog-bottom ul li { list-style-type: none; display: inline-block; font-size: 14px; position: relative; margin-left: 8px; margin-right: 8px; } .blog-item .blog-bottom ul li:before { position: absolute; content: '/'; top: 0; right: -13px; color: #1d3d5d; } .blog-item .blog-bottom ul li:last-child:before { display: none; } .blog-item .blog-bottom ul li span { display: inline-block; color: #1d3d5d; } .blog-item .blog-bottom ul li a { display: inline-block; color: #fdb139; } .blog-item .blog-bottom ul li a:hover { color: #242424; } .blog-item .blog-bottom p { margin-bottom: 15px; } .blog-item .blog-bottom a { display: inline-block; color: #1d3d5d; } .blog-item .blog-bottom a i { display: inline-block; font-size: 18px; position: relative; top: 3px; } .blog-item .blog-bottom a:hover { color: #fdb139; } .pagination-area { text-align: center; } .pagination-area ul { margin: 0; padding: 0; } .pagination-area ul li { list-style-type: none; display: inline-block; margin-right: 5px; margin-left: 5px; } .pagination-area ul li a { display: block; padding: 7px 12px; border-radius: 5px; border: 1px solid #fdb139; color: #fdb139; } .pagination-area ul li a:hover { color: #fff; background-color: #fdb139; } /*-- End Blog CSS --*/ /*----- End Home Three CSS -----*/ /*----- About CSS -----*/ .page-title-area { background-image: url("../img/page-title-bg.jpg"); background-size: cover; background-position: center center; background-repeat: no-repeat; position: relative; height: 253px; } .page-title-area:before { position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; background-color: #000; opacity: .80; } .page-title-area .title-item { position: relative; text-align: center; padding-top: 50px; } .page-title-area .title-item h2 { font-size: 50px; color: #fdb139; margin-bottom: 10px; } .page-title-area .title-item ul { margin: 0; padding: 0; } .page-title-area .title-item ul li { list-style-type: none; display: inline-block; color: #fff; } .page-title-area .title-item ul li i { display: inline-block; font-size: 20px; position: relative; top: 4px; margin-left: 4px; } .page-title-area .title-item ul li span { display: inline-block; } .page-title-area .title-item ul li a { display: inline-block; color: #fff; } .page-title-area .title-item ul li a:hover { color: #fdb139; } .counter-area.four:after { background-color: #fff; } .watch-area .section-title { text-align: left; max-width: 100%; } .watch-area .watch-item { height: 500px; position: relative; background-image: url('https://img.youtube.com/vi/8D43bE3Stfk/maxresdefault.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; } .watch-area .watch-item:before { position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; background-color: #fdb139; opacity: .70; } .watch-area .watch-item .d-table-cell { vertical-align: bottom; } .watch-area .watch-item .video-wrap a { color: #1d3d5d; } .watch-area .watch-item .video-wrap a:hover { color: #fff; } .watch-area .watch-item .watch-content { position: relative; padding-left: 40px; padding-bottom: 32px; max-width: 325px; } .watch-area .watch-item .watch-content h3 { color: #fff; font-size: 20px; margin-bottom: 5px; } .watch-area .watch-item .watch-content p { margin-bottom: 0; color: #fff; font-size: 15px; } .love-area .love-item .section-title { text-align: left; max-width: 100%; margin-bottom: 25px; } .love-area .love-item p { margin-bottom: 10px; } .love-area .love-item ul { margin: 0; padding: 0; padding-top: 22px; } .love-area .love-item ul li { list-style-type: none; display: block; color: #1d3d5d; font-weight: 500; margin-bottom: 12px; } .love-area .love-item ul li:last-child { margin-bottom: 0; } .love-area .love-item ul li:hover i { background-color: #fdb139; } .love-area .love-item ul li i { width: 25px; height: 25px; line-height: 25px; text-align: center; color: #fff; background-color: #1d3d5d; margin-right: 5px; border-radius: 50%; font-size: 18px; position: relative; top: 2px; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } /*----- End About CSS -----*/ /*----- Service Details CSS -----*/ .service-details-area .details-item .outer { margin-bottom: 50px; } .service-details-area .details-item .outer img { border-radius: 10px; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } .service-details-area .details-item .outer #big { margin-bottom: 30px; } .service-details-area .details-item .outer #thumbs .owl-item img { border: 3px solid transparent; } .service-details-area .details-item .outer #thumbs .owl-item.current img { border: 3px solid #fdb139; } .service-details-area .details-item .details-project .details-project-inner { margin-bottom: 30px; } .service-details-area .details-item .details-project .details-project-inner h3 { font-weight: 600; font-size: 20px; margin-bottom: 10px; } .service-details-area .details-item .details-project .details-project-inner p { margin-bottom: 0; } .service-details-area .details-item .details-choose { margin-bottom: 50px; } .service-details-area .details-item .details-choose h3 { font-weight: 600; font-size: 20px; margin-bottom: 15px; } .service-details-area .details-item .details-choose ul { margin: 0; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; max-width: 525px; } .service-details-area .details-item .details-choose ul li { list-style-type: none; display: block; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; font-weight: 500; font-size: 18px; margin-bottom: 20px; } .service-details-area .details-item .details-choose ul li:hover i { background-color: #1d3d5d; } .service-details-area .details-item .details-choose ul li i { display: inline-block; color: #fff; background-color: #fdb139; width: 35px; height: 35px; line-height: 35px; border-radius: 50%; text-align: center; font-size: 20px; margin-right: 8px; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; position: relative; top: 1px; } .service-details-area .details-item .details-choose img { display: block; margin-bottom: 30px; padding-top: 10px; width: 100%; } .service-details-area .details-item .details-choose p { margin-bottom: 10px; } .service-details-area .details-item .details-choose p:last-child { margin-bottom: 0; } .service-details-area .watch-area .section-title { margin-bottom: 20px; } .service-details-area .watch-area .section-title h2 { font-size: 20px; font-weight: 600; } .service-details-area .watch-area .watch-item { background-image: url("../img/service-details11.jpg"); } .service-details-area .watch-area .watch-item:before { background-color: #1d3d5d; } .widget-area .widget-item { margin-bottom: 30px; } .widget-area .widget-item:last-child { margin-bottom: 0; } .widget-area .widget-item h3 { margin-bottom: 30px; font-weight: 600; font-size: 20px; position: relative; padding-bottom: 10px; border-bottom: 1px solid #f5f5f5; } .widget-area .widget-item h3:before { position: absolute; content: ''; width: 50px; height: 3px; bottom: -2px; border-radius: 0 50% 50% 0; left: 0; background-color: #fdb139; } .widget-area .search form { position: relative; } .widget-area .search form .form-control { border: 1px solid #f5f5f5; height: 50px; border-radius: 5px; padding-left: 15px; font-size: 15px; } .widget-area .search form .form-control:focus { -webkit-box-shadow: none; box-shadow: none; border: 1px solid #fdb139; } .widget-area .search form .btn { position: absolute; top: 0; right: 0; padding: 0; height: 50px; width: 50px; line-height: 50px; color: #fff; background-color: #fdb139; font-size: 18px; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; border-radius: 5px; } .widget-area .search form .btn:hover { background-color: #242424; } .widget-area .cat ul { margin: 0; padding: 0; } .widget-area .cat ul li { list-style-type: none; display: block; background-color: #f5f5f5; padding-top: 12px; padding-bottom: 14px; border-radius: 5px; margin-bottom: 15px; padding-left: 20px; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } .widget-area .cat ul li:hover { background-color: #1d3d5d; } .widget-area .cat ul li:hover a { color: #fff; } .widget-area .cat ul li:last-child { margin-bottom: 0; } .widget-area .cat ul li a { display: block; color: #1d3d5d; } .widget-area .cat ul li a i { display: inline-block; font-size: 20px; color: #fdb139; position: relative; top: 3px; margin-right: 4px; } .widget-area .related .related-inner { margin-bottom: 15px; } .widget-area .related .related-inner:last-child { margin-bottom: 0; } .widget-area .related .related-inner ul { margin: 0; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .widget-area .related .related-inner ul li { list-style-type: none; display: inline-block; -webkit-box-flex: 0; -ms-flex: 0 0 30%; flex: 0 0 30%; max-width: 30%; } .widget-area .related .related-inner ul li img { width: 100%; } .widget-area .related .related-inner ul li:last-child { -webkit-box-flex: 0; -ms-flex: 0 0 60%; flex: 0 0 60%; max-width: 60%; margin-left: 10px; } .widget-area .related .related-inner ul li a { display: block; color: #1d3d5d; font-weight: 500; font-size: 15px; margin-bottom: 3px; } .widget-area .related .related-inner ul li a:hover { color: #fdb139; } .widget-area .related .related-inner ul li span { display: block; font-size: 13px; } .widget-area .newsletter .form-control { height: 50px; border-radius: 5px; padding-left: 15px; background-color: #f5f5f5; font-size: 15px; border: 0; margin-bottom: 15px; } .widget-area .newsletter .form-control:focus { border: 0; -webkit-box-shadow: none; box-shadow: none; } .widget-area .newsletter .cmn-btn { border: 0; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; display: block; width: 100%; height: 50px; } .widget-area .call { text-align: center; background-color: #f32c2c; padding: 18px 15px 20px; border-radius: 5px; } .widget-area .call h3 { color: #fff; margin-bottom: 5px; padding-bottom: 0; border-bottom: 0; } .widget-area .call h3:before { display: none; } .widget-area .call a { display: block; color: #fff; font-weight: 500; } .widget-area .call a:hover { color: #242424; } .widget-area .tags h3 { margin-bottom: 25px; } .widget-area .tags ul { margin: 0; padding: 0; } .widget-area .tags ul li { list-style-type: none; display: inline-block; margin-top: 5px; } .widget-area .tags ul li a { display: block; font-size: 15px; padding: 7px 12px; border: 1px solid #f5f5f5; color: #242424; } .widget-area .tags ul li a:hover { border: 1px solid #f32c2c; background-color: #f32c2c; color: #fff; } .widget-area .information ul { margin: 0; padding: 0; } .widget-area .information ul li { list-style-type: none; display: block; margin-bottom: 15px; text-align: right; position: relative; } .widget-area .information ul li:last-child { margin-bottom: 0; } .widget-area .information ul li span { display: inline-block; font-weight: 500; color: #1d3d5d; font-size: 17px; text-align: left; position: absolute; left: 0; top: 0; } /*----- End Service Details CSS -----*/ /*----- Project Details CSS -----*/ .project-details-area .details-item .details-img img { margin-bottom: 30px; } .project-details-area .details-item .details-img h3 { font-weight: 600; font-size: 28px; margin-bottom: 10px; } .project-details-area .details-item .details-img p { margin-bottom: 30px; } .project-details-area .details-item .details-img p:last-child { margin-bottom: 0; } .project-details-area .details-item .details-img .one-p { margin-bottom: 10px; } .project-details-area .details-item .details-img .details-img-right { margin-bottom: 30px; } .project-details-area .details-item .details-img .details-img-right ul { margin: 0; padding: 0; } .project-details-area .details-item .details-img .details-img-right ul li { list-style-type: none; display: block; font-weight: 500; font-size: 17px; margin-bottom: 15px; } .project-details-area .details-item .details-img .details-img-right ul li:hover i { background-color: #1d3d5d; } .project-details-area .details-item .details-img .details-img-right ul li:last-child { margin-bottom: 0; } .project-details-area .details-item .details-img .details-img-right ul li i { margin-right: 5px; width: 30px; height: 30px; line-height: 30px; text-align: center; color: #fff; background-color: #fdb139; border-radius: 50%; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } /*----- End Project Details CSS -----*/ /*----- Blog Details CSS -----*/ .blog-details-area .details-item .details-img { margin-bottom: 50px; } .blog-details-area .details-item .details-img img { margin-bottom: 25px; } .blog-details-area .details-item .details-img ul { margin: 0; padding: 0; margin-bottom: 16px; position: relative; padding-left: 50px; } .blog-details-area .details-item .details-img ul:before { position: absolute; content: ''; width: 30px; height: 2px; top: 10px; left: 0; background-color: #fdb139; } .blog-details-area .details-item .details-img ul li { list-style-type: none; display: inline-block; font-size: 15px; margin-right: 15px; } .blog-details-area .details-item .details-img ul li i { display: inline-block; color: #fdb139; font-size: 18px; margin-right: 3px; position: relative; top: 2px; } .blog-details-area .details-item .details-img ul li a { display: inline-block; color: #5d5d5d; } .blog-details-area .details-item .details-img ul li a:hover { color: #fdb139; } .blog-details-area .details-item .details-img h2 { margin-bottom: 8px; font-size: 25px; } .blog-details-area .details-item .details-img p { margin-bottom: 10px; } .blog-details-area .details-item .details-img p:last-child { margin-bottom: 0; } .blog-details-area .details-item .details-img blockquote { margin-top: 30px; margin-bottom: 30px; background-color: #f5f5f5; font-size: 18px; font-style: italic; padding: 25px 75px 25px; line-height: 30px; } .blog-details-area .details-item .details-img blockquote span { display: block; position: relative; font-weight: 500; padding-left: 50px; font-style: normal; margin-top: 20px; } .blog-details-area .details-item .details-img blockquote span:before { position: absolute; content: ''; width: 35px; height: 2px; top: 13px; left: 0; background-color: #fdb139; } .blog-details-area .details-item .details-comments { margin-bottom: 50px; } .blog-details-area .details-item .details-comments h3 { font-weight: 600; font-size: 20px; padding-bottom: 10px; margin-bottom: 30px; position: relative; } .blog-details-area .details-item .details-comments h3:before { position: absolute; content: ''; width: 50px; height: 3px; bottom: 0; left: 0; background-color: #fdb139; } .blog-details-area .details-item .details-comments ul { margin: 0; padding: 0; } .blog-details-area .details-item .details-comments ul li { list-style-type: none; display: block; position: relative; padding-left: 115px; margin-bottom: 30px; } .blog-details-area .details-item .details-comments ul li:last-child { margin-bottom: 0; } .blog-details-area .details-item .details-comments ul li img { position: absolute; top: 3px; left: 0; max-width: 85px; border-radius: 5px; } .blog-details-area .details-item .details-comments ul li h4 { font-weight: 600; font-size: 20px; margin-bottom: 3px; } .blog-details-area .details-item .details-comments ul li span { display: block; margin-bottom: 10px; font-size: 14px; } .blog-details-area .details-item .details-comments ul li p { margin-bottom: 10px; } .blog-details-area .details-item .details-comments ul li a { display: inline-block; font-weight: 500; color: #fdb139; } .blog-details-area .details-item .details-comments ul li a:hover { color: #242424; } .blog-details-area .details-item .details-form { background-color: #f5f5f5; padding: 30px 30px 30px; } .blog-details-area .details-item .details-form h3 { font-weight: 600; font-size: 20px; padding-bottom: 10px; margin-bottom: 15px; position: relative; } .blog-details-area .details-item .details-form h3:before { position: absolute; content: ''; width: 50px; height: 3px; bottom: 0; left: 0; background-color: #fdb139; } .blog-details-area .details-item .details-form span { display: block; margin-bottom: 30px; } .blog-details-area .details-item .details-form .form-group { margin-bottom: 30px; } .blog-details-area .details-item .details-form .form-group label { margin-bottom: 10px; font-style: 15px; color: #242424; font-weight: 500; } .blog-details-area .details-item .details-form .form-group .form-control { border-radius: 5px; height: 50px; border: 1px solid #fff; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; background-color: #fff; font-style: 15px; } .blog-details-area .details-item .details-form .form-group .form-control:focus { -webkit-box-shadow: none; box-shadow: none; border: 1px solid #fdb139; } .blog-details-area .details-item .details-form .form-group textarea { padding-top: 10px; height: auto !important; } .blog-details-area .details-item .details-form .cmn-btn { border: 0; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } /*----- End Blog Details CSS -----*/ /*----- Contact CSS -----*/ .location-area .location-item { margin-bottom: 30px; position: relative; text-align: center; border: 1px solid #f5f5f5; border-radius: 5px; padding: 30px 30px 28px; } .location-area .location-item i { margin-bottom: 25px; width: 60px; height: 60px; line-height: 60px; text-align: center; color: #fff; background-color: #fdb239; border-radius: 50%; font-size: 30px; } .location-area .location-item h3 { font-weight: 600; font-size: 25px; margin-bottom: 10px; } .location-area .location-item span { margin-top: 18px; text-align: left; display: block; margin-bottom: 13px; font-weight: 500; line-height: 1.3; } .location-area .location-item a { display: block; color: #5d5d5d; font-weight: 500; line-height: 1.3; text-align:left; } .location-area .location-item a:hover { color: #fdb139; } .contact-area #contactForm { max-width: 800px; margin-left: auto; margin-right: auto; text-align: center; } .contact-area #contactForm .form-group { margin-bottom: 30px; text-align: left; } .contact-area #contactForm .form-group label { margin-bottom: 10px; font-weight: 500; font-size: 15px; color: #242424; } .contact-area #contactForm .form-group .form-control { height: 50px; padding-left: 20px; border: 1px solid #f5f5f5; background-color: #f5f5f5; border-radius: 5px; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } .contact-area #contactForm .form-group .form-control:focus { -webkit-box-shadow: none; box-shadow: none; border: 1px solid #fdb139; } .contact-area #contactForm .form-group textarea { height: auto !important; padding-top: 10px; } .contact-area #contactForm .form-group .list-unstyled { margin-top: 10px; color: #dc3545; } .contact-area #contactForm .cmn-btn { border: 0; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; opacity: 1; } .contact-area #contactForm .text-danger { margin-bottom: 0; margin-top: 10px; } .contact-area #contactForm .text-success { margin-bottom: 0; margin-top: 10px; } .map-area .container-fluid { padding-left: 0; padding-right: 0; } .map-area .container-fluid #map { height: 400px; width: 100%; display: block; border: 0; } /*----- End Contact CSS -----*/ /*----- User Form CSS -----*/ .user-form-area .user-item { max-width: 850px; margin-left: auto; margin-right: auto; border: 1px solid #f5f5f5; border-radius: 5px; padding: 24px 30px 30px; } .user-form-area .user-item h2 { font-size: 35px; margin-bottom: 40px; position: relative; padding-bottom: 15px; } .user-form-area .user-item h2:before { position: absolute; content: ''; width: 50px; height: 3px; left: 0; right: 0; bottom: 0; margin-left: auto; margin-right: auto; background-color: #fdb139; } .user-form-area .user-item form .form-group { margin-bottom: 30px; } .user-form-area .user-item form .form-group .form-control { height: 50px; border-radius: 5px; padding-left: 20px; font-size: 15px; border: 0; background-color: #f5f5f5; } .user-form-area .user-item form .form-group .form-control:focus { -webkit-box-shadow: none; box-shadow: none; border: 0; } .user-form-area .user-item form .cmn-btn { border: 0; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } .user-form-area .user-item form span { display: inline-block; margin-left: 10px; margin-right: 8px; font-size: 15px; position: relative; top: 1px; } .user-form-area .user-item form a { display: inline-block; color: #1d3d5d; font-weight: 500; position: relative; top: 1px; } .user-form-area .user-item form a:hover { color: #fdb139; } /*----- End User Form CSS -----*/ /*----- Error CSS -----*/ .error-area .error-item { height: 800px; text-align: center; } .error-area .error-item .error-img { position: relative; margin-bottom: 50px; margin-top: 50px; } .error-area .error-item .error-img img:nth-child(1) { position: relative; z-index: 1; } .error-area .error-item .error-img img:nth-child(2) { position: absolute; left: 0; right: 195px; bottom: -215px; max-width: 400px; margin-left: auto; margin-right: auto; } .error-area .error-item .error-img img:nth-child(3) { position: absolute; left: 0; right: 325px; top: -80px; max-width: 275px; margin-left: auto; margin-right: auto; } .error-area .error-item .error-img img:nth-child(4) { position: absolute; right: 0; left: 280px; top: -90px; max-width: 300px; margin-left: auto; margin-right: auto; } .error-area .error-item p { margin-bottom: 0; font-weight: 300; font-size: 30px; color: #232323; } /*----- End Error CSS -----*/ /*----- Coming Soon CSS -----*/ .coming-soon-area { height: 100vh; text-align: center; max-width: 800px; margin-left: auto; margin-right: auto; } .coming-soon-area .soon-item h1 { font-weight: 900; font-size: 100px; margin-bottom: 15px; } .coming-soon-area .soon-item span { display: block; font-weight: 700; font-size: 18px; margin-bottom: 30px; } .coming-soon-area .soon-item .coming-inner { padding-top: 20px; padding-bottom: 30px; margin-bottom: 30px; border-radius: 5px; background-color: #fdb139; } .coming-soon-area .soon-item .coming-inner h3 { font-weight: 700; font-size: 40px; margin-bottom: 0; color: #fff; } .coming-soon-area .soon-item .coming-inner p { margin-bottom: 0; color: #fff; } /*----- End Coming Soon CSS -----*/ /*----- Rules CSS -----*/ .rules-area { max-width: 800px; margin-left: auto; margin-right: auto; } .rules-area .rules-item h3 { font-weight: 600; font-size: 20px; margin-bottom: 10px; } .rules-area .rules-item p { margin-bottom: 30px; } .rules-area .rules-item p:last-child { margin-bottom: 0; } /*----- End Rules CSS -----*/ /*----- Preloader -----*/ .loader { position: fixed; z-index: 99999; background: #fdb139; width: 100%; height: 100%; left: 0; top: 0; } .spinner { margin: 100px auto; width: 50px; height: 40px; text-align: center; font-size: 10px; } .spinner > div { background-color: #fff; height: 100%; width: 6px; display: inline-block; -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; animation: sk-stretchdelay 1.2s infinite ease-in-out; } .spinner .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .spinner .rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .spinner .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .spinner .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } @-webkit-keyframes sk-stretchdelay { 0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); } 20% { transform: scaleY(1); -webkit-transform: scaleY(1); } } @keyframes sk-stretchdelay { 0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); } 20% { transform: scaleY(1); -webkit-transform: scaleY(1); } } /*----- End Preloader -----*/ /*----- Back To Top -----*/ #toTop { position: fixed; bottom: 30px; right: 0; cursor: pointer; display: none; z-index: 10; } .back-to-top-btn i { background: #fdb139; color: #fff; height: 50px; width: 50px; line-height: 50px; display: inline-block; text-align: center; font-size: 28px; border-radius: 50%; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; margin-right: 28px; } .back-to-top-btn i:hover { background-color: #242424; color: #fff; } /*----- End Back To Top -----*/ /*----- Buy Now Btn -----*/ .buy-now-btn { right: 20px; z-index: 99; top: 50%; position: fixed; -webkit-transform: translateY(-50%); transform: translateY(-50%); border-radius: 30px; display: inline-block; color: #fff; background-color: #82b440; padding: 10px 20px 10px 42px; -webkit-box-shadow: 0 1px 20px 1px #82b440; box-shadow: 0 1px 20px 1px #82b440; font-size: 13px; font-weight: 600; } .buy-now-btn img { top: 50%; left: 20px; width: 15px; position: absolute; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .buy-now-btn:hover { color: #fff; background-color: #94be5d; } .skill-img { max-width: 100px; /* Set the maximum width for the image */ margin: 21px auto; /* Center the image */ } /* Styles for the new button */ .btn-new-action { background-color: #fdb139; /* Green background */ color: #ffffff; /* White text color */ border: none; /* Remove border */ padding: 10px 20px; /* Padding */ font-size: 18px; /* Font size */ border-radius: 5px; /* Rounded corners */ cursor: pointer; /* Cursor style */ transition: background-color 0.3s ease; /* Smooth transition for background color */ } /* Hover effect for the button */ .btn-new-action:hover { background-color: grey; /* Slightly darker green on hover */ } .gutters-sm { margin-right: -8px; margin-left: -8px; } .gutters-sm>.col, .gutters-sm>[class*=col-] { padding-right: 8px; padding-left: 8px; } .mb-3, .my-3 { margin-bottom: 1rem!important; } .bg-gray-300 { background-color: #e2e8f0; } .h-100 { height: 100%!important; } .shadow-none { box-shadow: none!important; } .pb-0 { padding-bottom: 0!important; } .font-size-16 { font-size: 16px!important; } .avatar-title { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #038edc; color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; font-weight: 500; height: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; } .bg-soft-primary { background-color: rgba(3,142,220,.15)!important; } .rounded-circle { border-radius: 50%!important; } .nav-tabs-custom .nav-item .nav-link.active { color: #038edc; } .nav-tabs-custom .nav-item .nav-link { border: none; } .nav-tabs-custom .nav-item .nav-link.active { color: #038edc; } .avatar-group { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-left: 12px; } .border-end { border-right: 1px solid #eff0f2 !important; } .d-inline-block { display: inline-block!important; } .badge-soft-danger { color: #f34e4e; background-color: rgba(243,78,78,.1); } .badge-soft-warning { color: #f7cc53; background-color: rgba(247,204,83,.1); } .badge-soft-success { color: #51d28c; background-color: rgba(81,210,140,.1); } .avatar-group .avatar-group-item { margin-left: -14px; border: 2px solid #fff; border-radius: 50%; -webkit-transition: all .2s; transition: all .2s; } .avatar-sm { height: 2rem; width: 2rem; } .nav-tabs-custom .nav-item { position: relative; color: #343a40; } .nav-tabs-custom .nav-item .nav-link.active:after { -webkit-transform: scale(1); transform: scale(1); } .nav-tabs-custom .nav-item .nav-link::after { content: ""; background: #038edc; height: 2px; position: absolute; width: 100%; left: 0; bottom: -2px; -webkit-transition: all 250ms ease 0s; transition: all 250ms ease 0s; -webkit-transform: scale(0); transform: scale(0); } .badge-soft-secondary { color: #74788d; background-color: rgba(116,120,141,.1); } .badge-soft-secondary { color: #74788d; } .work-activity { position: relative; color: #74788d; padding-left: 5.5rem } .work-activity::before { content: ""; position: absolute; height: 100%; top: 0; left: 66px; border-left: 1px solid rgba(3,142,220,.25) } .work-activity .work-item { position: relative; border-bottom: 2px dashed #eff0f2; margin-bottom: 14px } .work-activity .work-item:last-of-type { padding-bottom: 0; margin-bottom: 0; border: none } .work-activity .work-item::after,.work-activity .work-item::before { position: absolute; display: block } .work-activity .work-item::before { content: attr(data-date); left: -157px; top: -3px; text-align: right; font-weight: 500; color: #74788d; font-size: 12px; min-width: 120px } .work-activity .work-item::after { content: ""; width: 10px; height: 10px; border-radius: 50%; left: -26px; top: 3px; background-color: #fff; border: 2px solid #038edc } .header-design { background-color: #a4508b; background-image: linear-gradient(326deg, #a4508b 0%, #5f0a87 74%); height: 120px; text-align: center; } .listar-map-button { width: 100%; position: absolute; display: table; right: 0; top: 0; height: 200px; line-height: 164px; white-space: nowrap; font-size: 0; } .listar-map-button { right: auto; /*** box-shadow: 0 0 65px rgba(0,0,0,.07) inset, 0 0 35px rgba(0,0,0,.05) inset;**/ } .listar-map-button-text span { background-color: #fff; color: #252525; text-shadow: none; } .listar-page-header-content .listar-map-button-text span { position: relative; display: inline-block; vertical-align: middle; font-size: 15px; height: 44px; line-height: 1.6; padding: 10px 25px; box-shadow: 0 0 300px rgba(0, 0, 0, 0.65), 0 0 30px rgba(0, 0, 0, 0.06); border-radius: 50px; background-color: rgba(35, 40, 45, 0.9); color: #fff; text-shadow: 1px 1px rgba(0, 0, 0, 0.2); } /********** Template CSS **********/ :root { --primary: #4294E3; --secondary: #8F12FD; --light: #F0F6FF; --dark: #262B47; } /*** Spinner ***/ #spinner { opacity: 0; visibility: hidden; transition: opacity .5s ease-out, visibility 0s linear .5s; z-index: 99999; } #spinner.show { transition: opacity .5s ease-out, visibility 0s linear 0s; visibility: visible; opacity: 1; } /*** Heading ***/ h1, h2, .fw-bold { font-weight: 700 !important; } h3, h4, .fw-semi-bold { font-weight: 600 !important; } h5, h6, .fw-medium { font-weight: 500 !important; } /*** Gradient Text & BG ***/ .text-primary-gradient { background: linear-gradient(to bottom right, #FFC107, #FF9800); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .text-secondary-gradient { background: linear-gradient(to bottom right, var(--secondary), var(--primary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .bg-primary-gradient { background: linear-gradient(to bottom right, #FFC107, #FF9800); } .bg-secondary-gradient { background: linear-gradient(to bottom right, #FFC107, #FF9800); } /*** Button ***/ .btn { transition: .5s; } .btn.btn-primary-gradient, .btn.btn-secondary-gradient { position: relative; overflow: hidden; border: none; color: #FFFFFF; z-index: 1; } .btn.btn-primary-gradient::after, .btn.btn-secondary-gradient::after { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; transition: .5s; z-index: -1; opacity: 0; } .btn.btn-primary-gradient, .btn.btn-secondary-gradient::after { background: linear-gradient(to bottom right, var(--primary), var(--secondary)); } .btn.btn-secondary-gradient, .btn.btn-primary-gradient::after { background: linear-gradient(to bottom right, var(--secondary), var(--primary)); } .btn.btn-primary-gradient:hover::after, .btn.btn-secondary-gradient:hover::after { opacity: 1; } .btn-square { width: 38px; height: 38px; } .btn-sm-square { width: 32px; height: 32px; } .btn-lg-square { width: 48px; height: 48px; } .btn-square, .btn-sm-square, .btn-lg-square { padding: 0; display: flex; align-items: center; justify-content: center; font-weight: normal; border-radius: 50px; } .back-to-top { position: fixed; display: none; right: 45px; bottom: 45px; z-index: 99; border: none; background: linear-gradient(to bottom right, var(--primary), var(--secondary)); } /*** Hero Header ***/ .hero-header { margin-bottom: 6rem; padding: 16rem 0 0 0; background: url(../img/bg-circle.png), url(../img/bg-triangle.png), url(../img/bg-bottom.png), linear-gradient(to bottom right, var(--primary), var(--secondary)); background-position: left 0px top 0px, right 0px top 50%, center bottom; background-repeat: no-repeat; } @media (max-width: 991.98px) { .hero-header { padding: 6rem 0 9rem 0; } } /*** Feature ***/ .feature-item { transition: .5s; } .feature-item:hover { margin-top: -15px; box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .08); } /*** Pricing ***/ .pricing .nav { padding: 2px; } .pricing .nav-link { padding: 12px 30px; font-weight: 500; color: var(--dark); background: #FFFFFF; } .pricing .nav-item:first-child .nav-link { border-radius: 30px 0 0 30px; } .pricing .nav-item:last-child .nav-link { border-radius: 0 30px 30px 0; } .pricing .nav-link.active { color: #FFFFFF; background: linear-gradient(to bottom right, var(--primary), var(--secondary)); } /*** Screenshot ***/ .screenshot-carousel { position: relative; width: 253px; height: 500px; padding: 15px; margin-right: 30px; } .screenshot-carousel::before { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; background: url(../img/screenshot-frame.png) center center no-repeat; background-size: 253px 500px; z-index: 1; } .screenshot-carousel .owl-item img { position: relative; width: 223px; height: 470px; } .screenshot-carousel .owl-dots { position: absolute; top: 50%; right: -30px; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; justify-content: center; } .screenshot-carousel .owl-dot { position: relative; display: inline-block; margin: 5px 0; width: 15px; height: 15px; background: linear-gradient(to bottom right, var(--primary), var(--secondary)); border-radius: 15px; transition: .5s; } .screenshot-carousel .owl-dot::after { position: absolute; content: ""; width: 5px; height: 5px; top: 5px; left: 5px; background: #FFFFFF; border-radius: 5px; } .screenshot-carousel .owl-dot.active { box-shadow: 0 0 10px var(--dark); } /*** Testimonial ***/ .testimonial-carousel .owl-item .testimonial-item, .testimonial-carousel .owl-item .testimonial-item * { transition: .5s; } .testimonial-carousel .owl-item.center .testimonial-item { background: linear-gradient(to bottom right, var(--primary), var(--secondary)); } .testimonial-carousel .owl-item.center .testimonial-item h5, .testimonial-carousel .owl-item.center .testimonial-item p { color: #FFFFFF !important; } .testimonial-carousel .owl-nav { margin-top: 30px; display: flex; justify-content: center; } .testimonial-carousel .owl-nav .owl-prev, .testimonial-carousel .owl-nav .owl-next { margin: 0 12px; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; color: #FFFFFF; background: linear-gradient(to bottom right, var(--primary), var(--secondary)); border-radius: 60px; font-size: 18px; transition: .5s; } .testimonial-carousel .owl-nav .owl-prev:hover, .testimonial-carousel .owl-nav .owl-next:hover { background: linear-gradient(to bottom right, var(--secondary), var(--primary)); } /*** Footer ***/ .footer { margin-top: 6rem; padding-top: 9rem; background: url(../img/bg-circle.png), url(../img/bg-triangle.png), url(../img/bg-top.png), linear-gradient(to bottom right, var(--primary), var(--secondary)); background-position: left 0px bottom 0px, right 0px top 50%, center top; background-repeat: no-repeat; } .footer .btn.btn-social { margin-right: 5px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--light); border: 1px solid rgba(256, 256, 256, .1); border-radius: 40px; transition: .3s; } .footer .btn.btn-social:hover { color: var(--primary); } .footer .btn.btn-link { display: block; margin-bottom: 10px; padding: 0; text-align: left; color: var(--light); font-weight: normal; transition: .3s; } .footer .btn.btn-link::before { position: relative; content: "\f105"; font-family: "Font Awesome 5 Free"; font-weight: 900; margin-right: 10px; } .footer .btn.btn-link:hover { letter-spacing: 1px; box-shadow: none; } .footer .copyright { padding: 25px 0; font-size: 14px; border-top: 1px solid rgba(256, 256, 256, .1); } .footer .copyright a { color: var(--light); } .footer .footer-menu a { margin-right: 15px; padding-right: 15px; border-right: 1px solid rgba(255, 255, 255, .1); } .footer .footer-menu a:last-child { margin-right: 0; padding-right: 0; border-right: none; } /* General Navbar Styles */ .navbar-custom { padding: 15px 20px; /* Adjust padding for better spacing */ } .navbar-custom .navbar-brand .logo-img { height: 40px; /* Adjust logo height */ width: auto; } .navbar-custom .navbar-nav .nav-link { color: #ffffff; /* White text color */ margin: 0 10px; /* Adjust margin between links */ transition: color 0.3s ease; /* Smooth transition for hover effects */ } .navbar-custom .navbar-nav .nav-link:hover { color: #ffdd57; /* Change color on hover */ } .navbar-custom .navbar-nav .btn { color: #ffffff; /* White text color */ background: linear-gradient(to bottom right, #FFC107, #FF9800); /* Primary button color */ border: none; margin: 0 10px; /* Adjust margin between links */ transition: background-color 0.3s ease; /* Smooth transition for hover effects */ } .navbar-custom .navbar-nav .btn:hover { background: linear-gradient(to bottom right, #FFC107, #FF9800); /* Darker shade on hover */ } .navbar-custom .navbar-nav .dropdown-menu { background-color: #343a40; /* Match the dropdown menu background with navbar */ } .navbar-custom .navbar-nav .dropdown-menu .dropdown-item { color: #ffffff; /* White text color for dropdown items */ } .navbar-custom .navbar-nav .dropdown-menu .dropdown-item:hover { color: #ffdd57; /* Change color on hover for dropdown items */ } /* Icon Alignment */ .navbar-custom .navbar-nav .dropdown-item i { margin-right: 8px; /* Space between icon and text */ } /* Mobile View Styles */ @media (max-width: 767.98px) { .navbar-custom { padding: 10px 15px; /* Reduce padding for mobile view */ } .navbar-custom .navbar-brand .logo-img { height: 35px; /* Adjust logo size for mobile */ } .navbar-custom .navbar-nav .nav-link { margin: 5px 0; /* Adjust margin between links for mobile */ } .navbar-custom .navbar-nav .btn { margin: 5px 0; /* Adjust margin for button in mobile view */ } } /* Custom styling for user location */ .navbar-custom #userLocation { color: #ffffff; /* White text color */ margin-left: 15px; /* Space between location and other nav items */ font-weight: bold; /* Bold text for visibility */ } /*----- End Buy Now Btn -----*/ /*# sourceMappingURL=style.css.map */