/*@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');*/ html, body { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Open sans', sans-serif; font-size: 62.5%; font-size: 10px; font-size: 15px; } h1, h2, h3, h4, h5, h6 { font-family: "Poppins", sans-serif; color: #242424; line-height: 1.4; font-weight: 700; } a { -webkit-transition: 0.5s all ease; transition: 0.5s all ease; text-decoration: none !important; } p { font-family: 'Open Sans', sans-serif; line-height: 1.8; color: #5c5c5c; font-weight: normal; } .pt-100{ padding-top: 100px; } .pb-70{ padding-bottom: 70px; } .ptb-100{ padding-top: 100px; padding-bottom: 100px; } .section-title { text-align: center; margin-bottom: 15px; max-width: 100%; margin-left: 0; margin-right: auto; margin-top: -5px; position: relative; z-index: 1; } .section-title .sub-title { display: block; color: #f32c2c; font-weight: 700; font-size: 18px; margin-bottom: 10px; } .section-title h2 { font-size: 36px; margin-bottom: 50px; } .cmn-btn { color: #fff; background-color: #f32c2c; display: inline-block; border-radius: 5px; padding: 12px 30px; } .cmn-btn:hover { color: #fff; background-color: #1a1a1a; } /* Navbar section */ .nav { width: 100%; position: fixed; line-height: 23px; text-align: center; } .nav div.logo { float: left; width: auto; height: auto; padding-left: 3rem; } .nav div.logo a { text-decoration: none; color: #fff; font-size: 2.5rem; } .nav div.logo a:hover { color: #fdb139; } .nav div.main_list { height: 31px; float: right; } .nav div.main_list ul { width: 100%; height: 31px; display: flex; list-style: none; margin: 0; padding: 0; } .nav div.main_list ul li { width: auto; height: 31px; padding: 0; padding-right: 3rem; } .nav div.main_list ul li a { text-decoration: none; color: #fff; line-height: 30px; font-size: 1rem; } .nav div.main_list ul li a:hover { color: #fdb139; } /* */ .main-nav { background-color: #202020;; -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; } .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: #2b2a2a; 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: 300; color: #fff; background-color: #fdb139; border-radius: 5px; padding: 12px 25px; } .side-nav a:hover { background-color: #ffffff !important; color: #fdb139;; } a.style{ width:70%; } .row.o_wsale_products_main_row.align-items-start.flex-nowrap { margin-top: 100px; } /* Home section */ .home { width: 100%; height: 100vh; background-image: url(https://images.unsplash.com/photo-1498550744921-75f79806b8a7?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b0f6908fa5e81286213c7211276e6b3d&auto=format&fit=crop&w=1500&q=80); background-position: center top; background-size:cover; } .navTrigger { display: none; } .nav { padding-top: 15px; padding-bottom: 15px; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } nav.nav { background: #202020; z-index: 9999; padding: 12px; } .quick-enquiry a { display: inline-block; font-size: 1rem; font-weight: 500; color: #fff; background-color: #fdb139; border-radius: 5px; padding: 8px 40px; color: #172f47; text-decoration: none !important; } .side-nav a:hover { background-color: #242424; } .logo img { height: 40px; } /* Media qurey section */ @media screen and (min-width: 768px) and (max-width: 1024px) { .container { } } element.style { background: black; width: 100%; Margin: 0 auto; } @media screen and (max-width:768px) { .navTrigger { display: block; } .nav div.logo { margin-left: 15px; } .nav div.main_list { width: 100%; height: 0; overflow: hidden; } .nav div.show_list { height: auto; display: none; } .nav div.main_list ul { flex-direction: column; width: 100%; height: 100vh; right: 0; left: 0; bottom: 0; background-color: #111; /*same background color of navbar*/ background-position: center top; } .nav div.main_list ul li { width: 100%; text-align: right; } .nav div.main_list ul li a { text-align: center; width: 100%; font-size: 3rem; padding: 20px; } .nav div.media_button { display: block; } } /* Animation */ /* Inspiration taken from Dicson https://codemyui.com/simple-hamburger-menu-x-mark-animation/ */ .navTrigger { cursor: pointer; width: 30px; height: 25px; margin: auto; position: absolute; right: 30px; top: 0; bottom: 0; } .navTrigger i { background-color: #fff; border-radius: 2px; content: ''; display: block; width: 100%; height: 4px; } .navTrigger i:nth-child(1) { -webkit-animation: outT 0.8s backwards; animation: outT 0.8s backwards; -webkit-animation-direction: reverse; animation-direction: reverse; } .navTrigger i:nth-child(2) { margin: 5px 0; -webkit-animation: outM 0.8s backwards; animation: outM 0.8s backwards; -webkit-animation-direction: reverse; animation-direction: reverse; } .navTrigger i:nth-child(3) { -webkit-animation: outBtm 0.8s backwards; animation: outBtm 0.8s backwards; -webkit-animation-direction: reverse; animation-direction: reverse; } .navTrigger.active i:nth-child(1) { -webkit-animation: inT 0.8s forwards; animation: inT 0.8s forwards; } .navTrigger.active i:nth-child(2) { -webkit-animation: inM 0.8s forwards; animation: inM 0.8s forwards; } .navTrigger.active i:nth-child(3) { -webkit-animation: inBtm 0.8s forwards; animation: inBtm 0.8s forwards; } @-webkit-keyframes inM { 50% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(45deg); } } @keyframes inM { 50% { transform: rotate(0deg); } 100% { transform: rotate(45deg); } } @-webkit-keyframes outM { 50% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(45deg); } } @keyframes outM { 50% { transform: rotate(0deg); } 100% { transform: rotate(45deg); } } @-webkit-keyframes inT { 0% { -webkit-transform: translateY(0px) rotate(0deg); } 50% { -webkit-transform: translateY(9px) rotate(0deg); } 100% { -webkit-transform: translateY(9px) rotate(135deg); } } @keyframes inT { 0% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(9px) rotate(0deg); } 100% { transform: translateY(9px) rotate(135deg); } } @-webkit-keyframes outT { 0% { -webkit-transform: translateY(0px) rotate(0deg); } 50% { -webkit-transform: translateY(9px) rotate(0deg); } 100% { -webkit-transform: translateY(9px) rotate(135deg); } } @keyframes outT { 0% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(9px) rotate(0deg); } 100% { transform: translateY(9px) rotate(135deg); } } @-webkit-keyframes inBtm { 0% { -webkit-transform: translateY(0px) rotate(0deg); } 50% { -webkit-transform: translateY(-9px) rotate(0deg); } 100% { -webkit-transform: translateY(-9px) rotate(135deg); } } @keyframes inBtm { 0% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-9px) rotate(0deg); } 100% { transform: translateY(-9px) rotate(135deg); } } @-webkit-keyframes outBtm { 0% { -webkit-transform: translateY(0px) rotate(0deg); } 50% { -webkit-transform: translateY(-9px) rotate(0deg); } 100% { -webkit-transform: translateY(-9px) rotate(135deg); } } @keyframes outBtm { 0% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-9px) rotate(0deg); } 100% { transform: translateY(-9px) rotate(135deg); } } .affix { padding: 0; background-color: #111; } .myH2 { text-align:center; font-size: 4rem; } .myP { text-align: justify; padding-left:15%; padding-right:15%; font-size: 20px; } @media all and (max-width:700px){ .myP { padding:2%; } } .banner{ position: relative; height: 100vh; background: black; } .hero-banner{ width: 100%; height: 100%; object-fit: cover; position: absolute; opacity: 0.4; top: 0; left: 0; z-index: 0; } .banner .o_colored_level{ position: absolute; top: 50%; transform: translateY(-50%); z-index: 1 } .banner h1{ font-size: 72px; margin-bottom: 10px; color: #fff; } .banner h1 span { color: #fdb139; } a.btn-quote { display: inline-block; font-size: 1rem; font-weight: 500; color: #fff; background-color: #fdb139; border-radius: 5px; padding: 14px 40px; color: #000000; } .btn-hero{ display: inline-block; font-weight: 300; color: #fff; background-color: #fdb139; border-radius: 5px; padding: 12px 25px; } /*-- Counter CSS --*/ .counter-area { position: relative; margin-top: -80px; } .counter-wrap { max-width: 1110px; margin-left: auto; margin-right: auto; 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 { position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; background-color: #202020; opacity: .99; } .counter-item { text-align: center; margin-bottom: 30px; position: relative; margin-top: -5px; } .counter-item h3 { font-size: 50px; font-weight: 600; color: #fdb139; margin-bottom: 5px; } .counter-item p { margin-bottom: 0; color: #fff; } /*-- End Counter CSS --*/ /*-- Services CSS --*/ .service-item { margin-bottom: 30px; text-align: center; border: 1px solid #fdb139; padding: 30px 25px 28px; 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: #4a686a; font-weight: 500; } .service-item .service-link i { display: inline-block; font-size: 17px; position: relative; top: 3px; } .service-item .service-link:hover { letter-spacing: 1px; } .service-item.two { border: 1px solid #4a686a; } .service-item.two:hover { background-color: #4a686a; } .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: 100px; padding-bottom: 100px; max-width: 550px; margin-left: auto; padding-right: 30px; } .about-area .about-content .section-title { text-align: left; margin-bottom: 20px; margin-left: 0; } .about-area .about-content p { margin-bottom: 30px; text-align: left; } .about-area .about-img { background-size: cover; background-position: center center; background-repeat: no-repeat; opacity:0.4; 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 --*/ /*-- 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; } .estimate-area:before { position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; background-color: #000; opacity: .80; } .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 --*//*-- Footer CSS --*/ footer { background-color: #202020; } .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; } section.footer { margin-top: 20px; } /*-- End Footer CSS --*/ /*----- About CSS -----*/ .page-title-area { position: relative; height: 500px; display:flex; align-items:center; justify-content:center; } .page-title-area .page-title-area-hero{ position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); z-index: 1; opacity:0.4; } .page-title-area .d-table{ position: relative; z-index: 2; } .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 { position: relative; background: black; } .hero-about-us{ width: 100%; height: 100%; object-fit: cover; position: absolute; opacity: 0.4; top: 0; left: 0; z-index: 0; } /*.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: #202020; } .watch-area .watch-item .video-wrap a:hover { color: #fff; } .watch-area .watch-item .watch-content { position: absolute; bottom:0px; 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: #202020; 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: #202020; 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 -----*/ /*-- 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; } .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: 190px; } .choose-contact h2, .choose-contact span { text-align: left; } .watch-display { align-items: flex-end; height: 100%; } /*-- End Choose CSS --*/ /*-- Subscribe CSS --*/ .subscribe-area { position: relative; } .subscribe-area:before { position: absolute; content: ''; width: 100%; height: 50%; left: 0; bottom: 0; background-color: #202020; } .subscribe-area .subscribe-wrap { max-width: 1110px; margin-left: auto; margin-right: auto; padding: 50px 60px 50px; border-radius: 5px; -webkit-box-shadow: 0px 0px 20px 0px #dddddd80; box-shadow: 0px 0px 20px 0px #dddddd80; background-color: #fff; z-index: 1; position: relative; } .subscribe-area .subscribe-wrap .section-title { text-align: left; margin-bottom: 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 --*/ /*-- Projects CSS --*/ .Portfolio { height: 500px; background: #000; } .portfolio-hero{ width: 100%; height: 100%; object-fit: cover; opacity: 0.5; position: absolute; left: 0; top: 0; z-index: 1 } .Portfolio .d-table { position: relative; z-index: 2; } .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 .project-top.two a img { height: 290px; } */ .project-item h3 { font-weight: 600; font-size: 20px; margin-bottom: 5px; } .project-item h3 a { color: #4a686a; } .project-item h3 a:hover { color: #fdb139; } .project-item a { display: block; color: #5d5d5d; } .project-item a:hover { color: #fdb139; } /*-- End Projects CSS --*/ /* pagination-area starts here*/ .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; } /* pagination-area ends here*/ /*-- Services CSS --*/ .service-item { margin-bottom: 30px; text-align: center; border: 1px solid #fdb139; padding: 30px 25px 28px; border-radius: 8px; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } .service-bg{ background-image: url(../images/service-bg.jpg); } .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-top img { width: 100%; } .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: #4a686a; font-weight: 500; } .service-item .service-link i { display: inline-block; font-size: 17px; position: relative; top: 3px; } .service-item .service-link:hover { letter-spacing: 1px; } .service-item.two { border: 1px solid #4a686a; } .service-item.two:hover { background-color: #4a686a; } .service-item.three { border: 1px solid #e54b4b; } .service-item.three:hover { background-color: #e54b4b; } /*-- End Services CSS --*/ /*----- Contact CSS -----*/ .contact-us{ background-image: url(../images/contact-bg.jpg); } .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:auto; max-width: 20%; line-height: 60px; text-align: center; color: #fff; background-color: #4a686a; border-radius: 50%; font-size: 30px; display:block; } .location-area .location-item i img{ width: 25px; } .location-area .location-item h3 { font-weight: 600; font-size: 20px; margin-bottom: 10px; margin-top: 25px; } .location-area .location-item span { display: block; margin-bottom: 8px; font-weight: 500; line-height: 1.3; } .location-area .location-item a { display: block; color: #5d5d5d; font-weight: 500; line-height: 1.3; } .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; padding-bottom: 100px; } .map-area .container-fluid #map { height: 400px; width: 100%; display: block; border: 0; } /*----- End Contact 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-bg{ background-image: url(../images/blog-bg.jpg); } .blog-item:hover { -webkit-transform: translate(0, -10px); transform: translate(0, -10px); } .blog-item a { display: block; } .blog-item a img { width: 100%; border-radius: 10px; margin-bottom: 20px; } .blog-item .blog-bottom { padding: 0 25px 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: #202020; } .blog-item .blog-bottom ul li:last-child:before { display: none; } .blog-item .blog-bottom ul li span { display: inline-block; color: #202020; } .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: #202020; } .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 --*/ /*----- Project Details CSS -----*/ .project-details-area .details-item .details-img img { margin-bottom: 30px; width: 100%; } .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; text-align: left; } .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: #202020; } .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 -----*/ /* widget areaa */ .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: #202020; } .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: #202020; } .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: #202020; 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: #202020; font-size: 17px; text-align: left; position: absolute; left: 0; top: 0; } /* widget areaa */ /*----- Blog Details CSS -----*/ .blog-details-area .details-item .details-img { margin-bottom: 50px; } .blog-details-area .details-item .details-img img { width: 100%; 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; 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; } .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; } .o_cc1, .navbar-light { background-color: #000000; color: #212529; } .blog-details-area .details-item .details-form .cmn-btn { border: 0; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; } .blog-item .blog-bottom h3 a { font-weight: bold; display: block; color: #242424; } .col-lg-7.col-xl-12.mr-lg-auto { margin-top: 15px; } .col-sm-6.col-lg-6 { padding-bottom: 10px; } .form-group.col-12.s_website_form_submit { margin-top: 30px; margin-bottom: 30px; } div#product_detail_main { margin-top: 120px; } span.fa.fa-heart { color: black; } button.btn.btn-outline-primary.bg-white.o_add_wishlist { border-color: black; } button.d-none.d-md-inline-block.btn.btn-outline-primary.bg-white.o_add_compare { border-color: black; } span.fa.fa-exchange { color: black; } a.text-primary.text-decoration-none { color: black !important; font-weight: 500; } .input-group.w-100.w-md-auto.pt-2.pt-md-0.d-md-flex { min-inline-size: 80%; } .container.s_allow_columns { margin-top: 95px; } a.btn.btn-primary.a-submit { color: black; background-color: white; border-color: black; } button.navbar-toggler { min-width: 35px; } img#menu_gear { max-width: 23px; } @media screen and (max-width:768px) { ul.navbar-nav { display: contents; } input.search-query.form-control.oe_search_box.None { max-width: 220px; } } /*----- End Blog Details CSS -----*/ a.nav-link { color: white !important; } section.navigation { background-color: black; } .side-nav { margin: auto; } li.o_wsale_my_cart.align-self-md-start.nav-item.mx-lg-3 { margin-left: 30px !important; margin-bottom:5px !important } td.text-center.td-qty { min-width: 135px; } ::marker { display: none; content: ""; } header .nav-item sup{ position: relative; left: -15px } .logo{ display: flex; align-items:center; } .navbar-toggler{ padding: 15px; width: 60px; height: 60px; } .s_website_form_send{ width:auto !important; } .navbar-light .navbar-toggler-icon{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 4H21V6H3V4ZM3 11H21V13H3V11ZM3 18H21V20H3V18Z' fill='rgba(255,255,255,1)'%3E%3C/path%3E%3C/svg%3E") !important; border-radius: 5px; } .toast-body { color: #fff; }