/*** ==================================================================== Fonts ==================================================================== ***/ /* font-family: 'Ubuntu', sans-serif; font-family: 'Poppins', sans-serif; */ @import './color.scss'; /*** ==================================================================== Reset ==================================================================== ***/ :root{ font-size: 16px; } *{ margin:0px; padding:0px; border:none; outline:none; font-size: 100%; //font-family: montserrat,sans-serif; font-family: 'Roboto', sans-serif; } /*** ==================================================================== Global Settings ==================================================================== ***/ body { font-size:14px; color:#777777; line-height: 28px; font-weight:400; background:#ffffff; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; padding-top: 95px; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } a{ text-decoration:none; cursor:pointer; color:$secondary-color; } a:hover, a:focus, a:visited{ text-decoration:none; outline:none; } .sidebar-page-container, section{ background-color: #ffffff; } h1,h2,h3,h4,h5,h6 { position:relative; font-weight:normal; margin:0px; background:none; line-height:1.2em; } .black-color,.color-black{ color: black !important; } .text-primary{ color: $primary-color !important; } textarea{ overflow:hidden; resize: none; } button{ outline: none !important; cursor: pointer; } p,.text{ font-size: 16px; line-height: 20px; font-weight: 400; color: #8d9297; margin: 0; } li{ line-height: 20px; } .color-white{ color: white !important; } .bg_light{ background-color: #f5f5f5 !important; } .bg_secondary{ background-color: $secondary-color !important; } .auto-container{ position:static; max-width:1200px; padding:0px 15px; margin:0 auto; } .small-container{ position:static; max-width:1000px; padding:0px 15px; margin:0 auto; } .page-wrapper{ position:relative; margin:0 auto; width:100%; min-width:300px; overflow: hidden; z-index: 99; background-color: #ffffff; } ul,li{ list-style:none; padding:0px; margin:0px; } .cursor-pointer{ cursor: pointer; } .theme-btn{ display:inline-block; text-align: center; border-radius: 10px; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -ms-transition:all 0.3s ease; -o-transition:all 0.3s ease; transition:all 0.3s ease; } /*Btn Style One*/ .btn-style-one{ position:relative; font-size:16px; line-height:20px; color:#ffffff; background-color: $secondary-color; padding: 15px 35px; font-weight: 700; overflow: hidden; } .btn-style-one .btn-title{ position: relative; } .btn-style-one:hover{ color:white; -webkit-box-shadow: 0 10px 30px rgba(0,0,0,0.10); -moz-box-shadow: 0 10px 30px rgba(0,0,0,0.10); -ms-box-shadow: 0 10px 30px rgba(0,0,0,0.10); -o-box-shadow: 0 10px 30px rgba(0,0,0,0.10); box-shadow: 0 10px 30px rgba(0,0,0,0.10); } .btn-style-one:before{ position: absolute; left: 0; top: 0; height: 100%; width: 100%; content: ""; background-color: $primary-color; -webkit-transform: scale(0, 1); -ms-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: top right; -ms-transform-origin: top right; transform-origin: top right; -webkit-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); -moz-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); -o-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); /* easeInOutQuint */ -webkit-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); -moz-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); -o-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); /* easeInOutQuint */ } .btn-style-one.bg_white_hover:before{ background-color: white; color: $secondary-color; } .btn-style-one.bg_white_hover:hover{ color: $secondary-color; } .btn-style-one:hover:before{ -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); -webkit-transform-origin: bottom left; -ms-transform-origin: bottom left; transform-origin: bottom left; } /*Btn Style two*/ .btn-style-two{ position:relative; font-size:16px; line-height:20px; color:#ffffff; background-color: $primary-color; padding: 15px 35px; font-weight: 700; overflow: hidden; &.active{ &:before{ -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); -webkit-transform-origin: bottom left; -ms-transform-origin: bottom left; transform-origin: bottom left; } } } .btn-style-two .btn-title{ position: relative; } .btn-style-two:hover{ color:white; -webkit-box-shadow: 0 10px 30px rgba(0,0,0,0.10); -moz-box-shadow: 0 10px 30px rgba(0,0,0,0.10); -ms-box-shadow: 0 10px 30px rgba(0,0,0,0.10); -o-box-shadow: 0 10px 30px rgba(0,0,0,0.10); box-shadow: 0 10px 30px rgba(0,0,0,0.10); } .btn-style-two:before{ position: absolute; left: 0; top: 0; height: 100%; width: 100%; content: ""; background-color: $secondary-color; -webkit-transform: scale(0, 1); -ms-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: top right; -ms-transform-origin: top right; transform-origin: top right; -webkit-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); -moz-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); -o-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); /* easeInOutQuint */ -webkit-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); -moz-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); -o-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); /* easeInOutQuint */ } .btn-style-two:hover:before{ -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); -webkit-transform-origin: bottom left; -ms-transform-origin: bottom left; transform-origin: bottom left; } /*=== List Style One ===*/ .list-style-one{ position: relative; display: block; margin-bottom: 30px; } .list-style-one li{ position: relative; font-size: 15px; line-height: 25px; color: #777777; font-weight: 400; padding-left: 25px; margin-bottom: 10px; } .list-style-one li:before{ position: absolute; left: 0; top: 0; font-size: 14px; line-height: 25px; color: $secondary-color; content: "\f101"; font-weight: 900; font-family: "Font Awesome 5 Free"; } /*=== List Style Two ===*/ .list-style-two{ position: relative; display: block; margin-bottom: 30px; } .list-style-two li{ position: relative; font-size: 14px; line-height: 20px; color: #222222; font-weight: 500; padding-left: 35px; margin-bottom: 15px; } .list-style-two li:before{ position: absolute; left: 0; top: 0; font-size: 14px; line-height: 20px; color: $secondary-color; font-weight: 900; font-family: "Font Awesome 5 Free"; content: "\f061"; } /*=== List Style Three ===*/ .list-style-three{ position: relative; display: block; } .list-style-three li{ position: relative; font-size: 15px; line-height: 25px; color: #777777; font-weight: 400; padding-left: 20px; } .list-style-three li a{ color: #777777; display: inline-block; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .list-style-three li:before{ position: absolute; left: 0; top: 9px; height: 5px; width: 5px; background-color: $secondary-color; content: ""; border-radius: 5px; } .list-style-three li a:hover{ color: $secondary-color; } .theme_color{ color:#25262c; } .pull-right{ float: right; } .pull-left{ float: left; } /*.preloader{ position:fixed; left:0px; top:0px; width:100%; height:100%; z-index:999999; background-color:#ffffff; background-position:center center; background-repeat:no-repeat; background-image:url(../images/icons/preloader.svg); }*/ .preloader:after{ position: absolute; left: 50%; top: 50%; content: "LOADING"; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); margin-top: 45px; font-size: 24px; line-height: 1em; color: $primary-color; text-decoration: underline; font-weight: 400; } img{ display:inline-block; max-width:100%; height:auto; } .tabs-box{ position: relative; } .tabs-box .tab{ display: none; } .tabs-box .active-tab{ display: block; } /*** ==================================================================== Scroll To Top style ==================================================================== ***/ .scroll-to-top{ position: fixed; right: 30px; bottom: 30px; height: 30px; width: 30px; font-size:16px; line-height:30px; color:#040025; text-align:center; cursor:pointer; z-index:100; background:#ffffff; display:none; border-radius: 0; margin: 0 auto; box-shadow: 0 0 5px rgba(0,0,0,0.10); -webkit-transition:all 300ms ease; -moz-transition:all 300ms ease; -ms-transition:all 300ms ease; -o-transition:all 300ms ease; transition:all 300ms ease; } .scroll-to-top:hover{ background:$primary-color; color: #ffffff; } /*** ==================================================================== Main Header style ==================================================================== ***/ .main-header{ position:relative; left:0px; top:0px; width:100%; z-index:999; } .main-header .header-top{ position: relative; background-color: $primary-color; } .main-header .top-left{ position: relative; float: left; } .main-header .top-left .text{ position: relative; padding: 10px 0; font-size: 16px; line-height: 30px; color: #ffffff; font-weight: 400; } .main-header .top-left .text .icon{ color: $secondary-color; margin-right: 5px; } .main-header .top-right{ position: relative; float: right; } .main-header .header-top .social-icon-one{ position: relative; float: left; padding: 10px 0; } .main-header .header-top .btn-box{ position: relative; float: right; margin-left: 20px; } .main-header .header-top .btn-box a{ position: relative; display: block; border-radius: 0; } /*Social Icon One*/ .social-icon-one{ position:relative; } .social-icon-one li{ position:relative; float: left; margin-left: 20px; } .social-icon-one li:first-child{ margin-left: 0; } .social-icon-one li a{ position:relative; display:block; font-size:16px; color:#ffffff; line-height: 29px; -webkit-transition:all 300ms ease; -ms-transition:all 300ms ease; -o-transition:all 300ms ease; -moz-transition:all 300ms ease; transition:all 300ms ease; } .social-icon-one li a:hover{ color: #ffc107; } /*=== Header Upper ===*/ .main-header .header-upper{ position: relative; } .main-header .header-upper .logo-outer{ position: relative; padding:25px 0px; } .main-header .upper-right{ position: relative; padding-top: 40px; } .main-header .info-box{ position:relative; float:left; text-align: left; min-height:50px; padding-left:65px; margin-left:70px; margin-bottom: 30px; } .main-header .info-box:first-child{ margin-left: 0; } .main-header .info-box .icon-box{ position:absolute; left:0px; top: 0; height: 50px; } .main-header .info-box .icon-box span{ font-size: 22px; line-height: 50px; height: 50px; width: 50px; background-color: #3f4d50; border-radius: 50px; color: #ffffff; text-align: center; } .main-header .info-box li{ position:relative; font-size:15px; line-height:24px; color:#3f4d50; font-weight:400; } .main-header .info-box li strong{ display: block; font-size: 16px; } .main-header .info-box li a{ color: #333333; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .main-header .info-box li a:hover{ color: $secondary-color; } /*=== Header Lower ===*/ .main-header .header-lower{ position: relative; background-color: #3f4d50; } .main-header .main-box{ position:relative; left:0px; top:0px; -webkit-transition:all 300ms ease; -moz-transition:all 300ms ease; -ms-transition:all 300ms ease; -o-transition:all 300ms ease; transition:all 300ms ease; } .main-menu{ position:relative; float:left; } .main-menu .navbar-header{ display: none; } .main-menu .navbar-collapse{ padding:0px; } .main-menu .navigation{ position:relative; margin:0px; } .main-menu .navigation > li{ position:relative; float:left; padding:15px 0px; margin-right: 50px; -webkit-transition:all 300ms ease; -moz-transition:all 300ms ease; -ms-transition:all 300ms ease; -o-transition:all 300ms ease; transition:all 300ms ease; } .main-menu .navigation > li > a{ position:relative; display:block; text-align:center; opacity:1; font-weight:500; color:#ffffff; font-size:16px; line-height:30px; padding: 0; text-transform: uppercase; -webkit-transition:all 300ms ease; -moz-transition:all 300ms ease; -ms-transition:all 300ms ease; -o-transition:all 300ms ease; transition:all 300ms ease; } .main-menu .navigation > li > a:before{ position: absolute; left: 50%; bottom: 0; height: 2px; width: 0%; background-color: $secondary-color; content: ""; -webkit-transition:all 300ms ease; -moz-transition:all 300ms ease; -ms-transition:all 300ms ease; -o-transition:all 300ms ease; transition:all 300ms ease; } .main-menu .navigation > li:hover > a:before, .main-menu .navigation > li.current > a:before{ width: 100%; left: 0; } .main-menu .navigation > li > ul{ position:absolute; left:0px; top:100%; width:260px; z-index:100; padding:10px 30px 0; background-color:#ffffff; opacity:0; display:none; box-shadow: 0 0 3px rgba(0,0,0,0.10); -webkit-transform:translateY(30px); -ms-transform:translateY(30px); transform:translateY(30px); transition:all 500ms ease; -moz-transition:all 500ms ease; -webkit-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; -webkit-box-shadow:2px 2px 5px 1px rgba(0,0,0,0.05),-2px 0px 5px 1px rgba(0,0,0,0.05); -ms-box-shadow:2px 2px 5px 1px rgba(0,0,0,0.05),-2px 0px 5px 1px rgba(0,0,0,0.05); -o-box-shadow:2px 2px 5px 1px rgba(0,0,0,0.05),-2px 0px 5px 1px rgba(0,0,0,0.05); -moz-box-shadow:2px 2px 5px 1px rgba(0,0,0,0.05),-2px 0px 5px 1px rgba(0,0,0,0.05); box-shadow:2px 2px 5px 1px rgba(0,0,0,0.05),-2px 0px 5px 1px rgba(0,0,0,0.05); } .main-menu .navigation > li > ul.from-right{ left:auto; right:0px; } .main-menu .navigation > li > ul > li{ position:relative; width:100%; } .main-menu .navigation > li > ul > li:last-child{ border-bottom:none; } .main-menu .navigation > li > ul > li > a{ position:relative; display:block; padding:10px 0px; line-height:29px; font-weight:400; font-size:16px; color:#333333; text-align:left; border-bottom: 1px solid #e5e5e5; text-transform:capitalize; transition:all 500ms ease; -moz-transition:all 500ms ease; -webkit-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; } .main-menu .navigation > li > ul > li:hover > a{ color:$secondary-color; } .main-menu .navigation > li > ul > li.dropdown > a:after{ font-family: 'Font Awesome 5 Free'; content: "\f105"; position:absolute; right:0; top:11px; display:block; line-height:24px; font-size:16px; font-weight:900; z-index:5; } .main-menu .navigation > li > ul > li > ul{ position:absolute; left:100%; top:0px; width:260px; z-index:100; display:none; background-color:#ffffff; opacity:0; padding: 10px 30px 0; margin-left: 30px; -webkit-transform:translateY(30px); -ms-transform:translateY(30px); transform:translateY(30px); transition:all 500ms ease; -moz-transition:all 500ms ease; -webkit-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; -webkit-box-shadow:2px 2px 5px 1px rgba(0,0,0,0.05),-2px 0px 5px 1px rgba(0,0,0,0.05); -ms-box-shadow:2px 2px 5px 1px rgba(0,0,0,0.05),-2px 0px 5px 1px rgba(0,0,0,0.05); -o-box-shadow:2px 2px 5px 1px rgba(0,0,0,0.05),-2px 0px 5px 1px rgba(0,0,0,0.05); -moz-box-shadow:2px 2px 5px 1px rgba(0,0,0,0.05),-2px 0px 5px 1px rgba(0,0,0,0.05); box-shadow:2px 2px 5px 1px rgba(0,0,0,0.05),-2px 0px 5px 1px rgba(0,0,0,0.05); } .main-menu .navigation > li > ul > li > ul > li{ position:relative; width:100%; } .main-menu .navigation > li > ul > li > ul > li:last-child{ border-bottom:none; } .main-menu .navigation > li > ul > li > ul > li > a{ position:relative; display:block; padding:10px 0; line-height:24px; font-weight:400; font-size:16px; color:#333333; text-align:left; text-transform:capitalize; border-bottom: 1px solid #e5e5e5; transition:all 500ms ease; -moz-transition:all 500ms ease; -webkit-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; } .main-menu .navigation > li > ul > li > ul > li > a:hover{ color:$secondary-color; } .main-menu .navigation > li.dropdown:hover > ul{ visibility:visible; opacity:1; top:100%; -webkit-transform:translateY(0px); -ms-transform:translateY(0px); transform:translateY(0px); } .main-menu .navigation li > ul > li.dropdown:hover > ul{ visibility:visible; opacity:1; top:0px; -webkit-transform:translateY(0px); -ms-transform:translateY(0px); transform:translateY(0px); } .main-menu .navigation li.dropdown .dropdown-btn{ position:absolute; right:10px; top:8px; width:34px; height:30px; border:1px solid #ffffff; text-align:center; font-size:16px; line-height:26px; color:#ffffff; cursor:pointer; z-index:5; display:none; } .main-header .outer-box{ position: relative; float: right; } /*search box btn*/ .main-header .search-box-outer{ position:relative; float: left; text-align: center; padding: 15px 0; } .main-header .search-box-btn{ position: relative; display: inline-block; font-size: 20px; line-height: 30px; color: #ffffff; font-weight: 400; border-radius: 50%; background-color: transparent; } .dropdown-toggle::after{ display: none; } .main-header .search-box-outer .dropdown-menu{ top:35px !important; left: auto !important; right: 0 !important; padding:0px; width:280px; border-radius:0px; transform: none !important; border-top:3px solid $secondary-color; } .main-header .search-panel .form-container{ padding:25px 20px; } .main-header .search-panel .form-group{ position:relative; margin:0px; } .main-header .search-panel input[type="text"], .main-header .search-panel input[type="search"], .main-header .search-panel input[type="password"], .main-header .search-panel select{ display:block; width:100%; line-height:24px; padding:7px 40px 7px 15px; height:40px; border:1px solid #e0e0e0; background:#ffffff; font-size: 14px; } .main-header .search-panel input:focus, .main-header .search-panel select:focus{ border-color:$secondary-color; } .main-header .search-panel .search-btn{ position:absolute; right:0px; top:0px; width:40px; height:40px; text-align:center; color:#000000; font-size:12px; background:none; cursor:pointer; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .main-header .search-panel .search-btn:hover{ color: $secondary-color; } /*search box btn*/ .main-header .cart-btn{ position: relative; float: left; margin-right: 25px; padding: 10px 0; } .main-header .cart-btn a{ position: relative; display: block; height: 40px; text-align: center; line-height: 40px; font-size: 24px; color: #ffffff; z-index: 9; } .main-header .cart-btn .count{ position: absolute; right: 0px; top: 0px; height: 16px; width: 16px; text-align: center; line-height: 16px; font-size: 10px; color: #040025; background-color: #ffffff; border-radius: 50%; } /* Btn Box */ .main-header .header-lower .btn-box{ position: relative; float: right; padding: 5px 0; } .main-header .header-lower .btn-box a{ float: right; padding: 15px 25px; } /*** ==================================================================== Header Style Two ==================================================================== ***/ .header-style-two{ position: relative; } .header-style-two .search-box-outer{ margin-left: 40px; padding: 10px 0; } .header-style-two .search-box-btn{ font-size: 16px; } .header-style-two .header-lower{ background-color: #ffffff; box-shadow: 0 0 20px rgba(0,0,0,0.10); } .header-style-two .logo-outer{ position: relative; } .header-style-two .logo{ padding: 25px 0; } .header-style-two .nav-outer{ position: relative; float: right; } .header-style-two .main-menu .navigation > li{ padding: 45px 0; margin-right: 35px; } .header-style-two .main-menu .navigation > li > a{ color: #212529; } .header-style-two .nav-outer .cart-btn{ padding: 40px 0; } .header-style-two .nav-outer .cart-btn a{ color: #212529; font-size: 34px; } .header-style-two .cart-btn .count{ background: #212529; color: #ffffff; } .header-style-two .header-lower .btn-box{ padding: 35px 0; } /*** ==================================================================== Header Style Three ==================================================================== ***/ .header-style-three{ position: relative; } .header-style-three .search-box-outer{ margin-left: 40px; padding: 10px 0; } .header-style-three .search-box-btn{ font-size: 16px; } .header-style-three .header-lower{ background-color: #ffffff; box-shadow: 0 0 20px rgba(0,0,0,0.10); } .header-style-three .logo{ padding: 10px 0; } .header-style-three .nav-outer{ position: relative; float: right; } .header-style-three .main-menu .navigation > li{ padding: 0px; margin-right: 35px; a{ padding: 10px; } } .header-style-three .main-menu .navigation > li > a{ color: #212529; } .header-style-three .nav-outer .cart-btn{ padding: 40px 0; } .header-style-three .nav-outer .cart-btn a{ color: #212529; font-size: 34px; } .header-style-three .cart-btn .count{ background: #212529; color: #ffffff; } /*** ==================================================================== Sticky Header ==================================================================== ***/ .sticky-header { position: fixed; visibility: hidden; opacity: 0; left: 0px; top: 0px; width: 100%; padding: 0px 0px; z-index: 99999; background: #ffffff; box-shadow: 0 0 20px rgba(0,0,0,.05); } .fixed-header .sticky-header{ opacity:1; z-index: 9999; visibility:visible; } .fixed-header .sticky-header .logo{ padding: 10px 0; } .sticky-header .main-menu .navigation > li{ margin-left: 40px; padding: 0 !important; margin-right: 0; background-color: transparent; } .sticky-header .main-menu .navigation > li:after{ display: none; } .sticky-header .main-menu .navigation > li > a{ padding:20px 0px; color: $primary-color; text-transform:capitalize; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .sticky-header .main-menu .navigation > li:hover > a, .sticky-header .main-menu .navigation > li.current > a, .sticky-header .main-menu .navigation > li.current-menu-item > a{ opacity:1; color: $secondary-color; background-color: #ffffff; } .sticky-header .main-menu .navigation > li:before, .sticky-header .main-menu .navigation > li.dropdown > a:after{ display: none; } .sticky-header .main-menu .navigation > li.dropdown:hover > ul{ margin-top: 0; } .sticky-header .auto-container{ max-width: 1200px; } /*** ==================================================================== Mobile Menu ==================================================================== ***/ .nav-outer .mobile-nav-toggler{ position: relative; float: right; font-size: 36px; line-height: 50px; cursor: pointer; color:#ffffff; display: none; } .mobile-menu{ position: fixed; right: 0; left: 0; top: 0; max-width:100%; height: 100%; margin: 0 auto; overflow-y: auto; opacity: 0; visibility: hidden; z-index: 999999; } .mobile-menu .nav-logo{ position:relative; padding:20px 20px; text-align:left; } .mobile-menu .nav-logo img{ max-width:200px; height: 50px; } .mobile-menu-visible{ overflow: hidden; } .mobile-menu-visible .mobile-menu{ opacity: 1; visibility: visible; } .mobile-menu .menu-box{ position: relative; left: 0px; top: 0; bottom: 0; width: 100%; height: 100%; overflow-y: auto; background: #ffffff; padding: 0px 0px; z-index: 5; opacity: 0; visibility: hidden; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transform-origin: top right; -moz-transform-origin: top right; -ms-transform-origin: top right; -o-transform-origin: top right; transform-origin: top right; -webkit-transition: all 200ms ease; -moz-transition: all 200ms ease; -ms-transition: all 200ms ease; -o-transition: all 200ms ease; transition: all 200ms ease; } .mobile-menu-visible .mobile-menu .menu-box{ opacity: 1; visibility: visible; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .mobile-menu .close-btn{ position: absolute; right: 20px; top: 30px; line-height: 30px; width: 30px; text-align: center; font-size: 12px; color: #ffffff; background-color: $secondary-color; cursor: pointer; z-index: 10; -webkit-transform: translateY(-50px); -moz-transform: translateY(-50px); -ms-transform: translateY(-50px); -o-transform: translateY(-50px); transform: translateY(-50px); } .mobile-menu-visible .mobile-menu .close-btn{ -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .mobile-menu .close-btn:hover{ opacity: 0.50; } .mobile-menu .navigation{ position: relative; display: block; padding: 0 20px; } .mobile-menu .navigation > li{ position: relative; display: block; margin-bottom: 10px; } .mobile-menu .navigation > li > a{ font-weight: 500; box-shadow: 0 0 6px rgba(0,0,0,0.05); } .mobile-menu .navigation li > a{ position: relative; display: block; line-height: 20px; padding: 10px 20px; font-size: 16px; color: #404040; text-transform: capitalize; } .mobile-menu .navigation li:hover > a, .mobile-menu .navigation li.current > a{ color:$secondary-color; } .mobile-menu .navigation li.dropdown .dropdown-btn{ position:absolute; right:0px; top:0px; width:40px; height:40px; text-align:center; font-size:12px; line-height:40px; border-left: 1px solid #fafafa; color:#222222; cursor:pointer; z-index:5; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .mobile-menu .navigation li.dropdown .dropdown-btn.active .fa:before{ display: inline-block; position: relative; content: "\f068"; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .mobile-menu .navigation li > ul, .mobile-menu .navigation li > ul > li > ul{ display: none; } /*** ==================================================================== Appointment Form ==================================================================== ***/ .jquery-modal{ z-index: 999; } .model{ padding: 20px; border-radius: 0; overflow: unset; max-width: 1000px; } /*** ==================================================================== Section Title ==================================================================== ***/ .sec-title{ position:relative; margin-bottom:60px; } .sec-title h2{ position: relative; display: block; font-size: 42px; line-height: 36px; color: #3f4d50; font-weight: 600; transition: all 100ms linear; margin-bottom: 5px; } .devider{ position: relative; } .devider span{ position: relative; display: inline-block; height: 30px; width: 30px; background-image: url(../images/icons/icon-devider.png); background-repeat: no-repeat; background-position: center; background-size: cover; animation: rotate 30s infinite ; } .devider:before, .devider:after{ position: absolute; top: 0px; left: 100%; height: 3px; width: 50px; border-radius: 50%; background-color: $secondary-color; content: ""; margin-left: 20px; } .devider:after{ left: auto; right: 100%; margin-left: 0; margin-right: 20px; } .devider:after{ display: none; } .sec-title.text-center .devider:after{ display: block; } .sec-title .text{ position: relative; font-weight: 400; font-size: 15px; line-height: 24px; color: #8d9297; margin-top: 10px; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(36000deg); } } .anim-icons{ position: absolute; left: 0; top: 0; right: 0; height: 100%; width: 100%; max-width: 1170px; margin: 0 auto; } .anim-icons .icon{ position: absolute; background-position: center; background-repeat: no-repeat; } .icon-circle-1{ width: 400px; height: 400px; border: 80px solid rgba(0,0,0,0.05); border-radius: 50%; } /*** ==================================================================== Page Title ==================================================================== ***/ .page-title{ position: relative; padding: 100px 0px; background-repeat: no-repeat; background-size: cover; background-position: center; } .page-title:before{ position:absolute; content: ''; left: 0px; top: 0px; width: 100%; height: 100%; display: block; background-color: rgba(0,0,0,0.60); } .page-title .auto-container{ position:relative; } .page-title h2{ position:relative; color:#ffffff; font-size:54px; line-height:1.2em; margin-bottom: 10px; font-weight: 700; } .page-breadcrumb{ position:relative; margin-top:5px; } .page-breadcrumb li{ position:relative; display:inline-block; margin-right:10px; padding-right:15px; color:#ffffff; font-size:18px; font-weight:400; text-transform:capitalize; } .page-breadcrumb li:after{ position:absolute; content: ">"; right:-2px; top:1px; color:#ffffff; font-size:14px; font-weight: 900; font-family: 'Font Awesome 5 Free'; } .page-breadcrumb li:last-child::after{ display: none; } .page-breadcrumb li:last-child{ padding-right:0px; margin-right:0px; } .page-breadcrumb li a{ color:#ffffff; font-weight:500; text-transform: capitalize; transition:all 0.3s ease; -moz-transition:all 0.3s ease; -webkit-transition:all 0.3s ease; -ms-transition:all 0.3s ease; -o-transition:all 0.3s ease; } .page-breadcrumb li a:hover{ color:#ffbc00; } .play-now { position: relative; display: block; z-index: 9; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .play-now .icon{ position: relative; display: inline-block; height: 80px; width: 80px; text-align: center; line-height: 80px; background-color: #040025; color: #ffffff; z-index: 1; padding-left: 5px; font-size: 24px; display: block; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0 0px 10px 0 rgba(255, 255, 255, .3); -moz-box-shadow: 0 0px 10px 0 rgba(255, 255, 255, .3); -ms-box-shadow: 0 0px 10px 0 rgba(255, 255, 255, .3); -o-box-shadow: 0 0px 10px 0 rgba(255, 255, 255, .3); box-shadow: 0 0px 10px 0 rgba(255, 255, 255, .3); -webkit-transform-origin:center; transform-origin:center; } .play-now .ripple, .play-now .ripple:before, .play-now .ripple:after { position: absolute; top: 50%; left: 50%; height: 70px; width: 70px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); -ms-box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); -o-box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); -webkit-animation: ripple 3s infinite; -moz-animation: ripple 3s infinite; -ms-animation: ripple 3s infinite; -o-animation: ripple 3s infinite; animation: ripple 3s infinite; } .play-now .ripple:before { -webkit-animation-delay: .9s; -moz-animation-delay: .9s; -ms-animation-delay: .9s; -o-animation-delay: .9s; animation-delay: .9s; content: ""; position: absolute; } .play-now .ripple:after { -webkit-animation-delay: .6s; -moz-animation-delay: .6s; -ms-animation-delay: .6s; -o-animation-delay: .6s; animation-delay: .6s; content: ""; position: absolute; } @-webkit-keyframes ripple { 70% {box-shadow: 0 0 0 70px rgba(255, 255, 255, 0);} 100% {box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);} } @keyframes ripple { 70% {box-shadow: 0 0 0 70px rgba(255, 255, 255, 0);} 100% {box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);} } /*** ==================================================================== Banner Section ==================================================================== ***/ .banner-section{ position: relative; overflow: hidden; background-color: rgba(0,0,0,0.01); } .banner-section .icon-circle-1{ right: -380px; bottom: -150px; } .banner-section .icon-cogs-1{ left: -350px; top: -120px; opacity: .40; animation: rotate_two 60s infinite; } @keyframes rotate_two { 0% { transform: rotate(0deg); } 100% { transform: rotate(3600deg); } } .banner-section .slide-item{ position: relative; background-repeat: no-repeat; background-position: center; background-size: cover; } .banner-section .slide-item .content-box{ position: relative; padding: 100px 0; } .banner-section .slide-item .content{ position: relative; z-index: 9; } .banner-section .slide-item .title{ position: relative; display: inline-block; font-size: 16px; line-height: 1.2em; color: #495057; font-weight: 400; margin-bottom: 30px; opacity: 0; background-color: #ffffff; padding: 10px 15px; box-shadow: 0 5px 10px rgba(0,0,0,0.10); -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -ms-transform: translateY(100px); -o-transform: translateY(100px); transform: translateY(100px); -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .banner-section .active .title{ opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 250ms; -moz-transition-delay: 250ms; -ms-transition-delay: 250ms; -o-transition-delay: 250ms; transition-delay: 250ms; } .banner-section .slide-item h1{ position: relative; display: block; font-size: 48px; line-height: 1.2em; color: $primary-color; font-weight: 700; margin-bottom: 20px; opacity: 0; text-transform: uppercase; -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -ms-transform: translateY(100px); -o-transform: translateY(100px); transform: translateY(100px); -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .banner-section .slide-item h1 span{ font-weight: 300; letter-spacing: .06em; } .banner-section .active h1{ opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 250ms; -moz-transition-delay: 250ms; -ms-transition-delay: 250ms; -o-transition-delay: 250ms; transition-delay: 500ms; } .banner-section .slide-item .text{ position: relative; display: block; font-size: 18px; line-height: 30px; color: #3f4d50; font-weight: 400; letter-spacing: 0.06em; margin-bottom: 30px; opacity: 0; -webkit-transform: translateY(50px); -moz-transform: translateY(50px); -ms-transform: translateY(50px); -o-transform: translateY(50px); transform: translateY(50px); -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .banner-section .active .text{ opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 750ms; -moz-transition-delay: 750ms; -ms-transition-delay: 750ms; -o-transition-delay: 750ms; transition-delay: 750ms; } .banner-section .slide-item .btn-box{ opacity: 0; -webkit-transform: translateY(50px); -moz-transform: translateY(50px); -ms-transform: translateY(50px); -o-transform: translateY(50px); transform: translateY(50px); -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .banner-section .slide-item .btn-box .theme-btn{ line-height: 20px; padding: 10px 20px; font-weight: 500; font-size: 16px; } .banner-section .active .btn-box{ opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 1000ms; -moz-transition-delay: 1000ms; -ms-transition-delay: 1000ms; -o-transition-delay: 1000ms; transition-delay: 1000ms; } .banner-section .image-column{ position: relative; } .banner-section .image-column .image-box{ position: relative; text-align: center; overflow: hidden; } .banner-section .image-column .image-box .image{ position: relative; margin-bottom: 0; opacity: 0; -webkit-transform: translateX(50px); -moz-transform: translateX(50px); -ms-transform: translateX(50px); -o-transform: translateX(50px); transform: translateX(50px); -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .banner-section .active .image-box .image{ opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transition-delay: 500ms; -moz-transition-delay: 500ms; -ms-transition-delay: 500ms; -o-transition-delay: 500ms; transition-delay: 500ms; } .banner-section .owl-dots{ position: absolute; bottom: 200px; left: 0; right: 0; margin: 0 auto; max-width: 1170px; text-align: left; display: none; } .banner-section .owl-dot{ position: relative; display: inline-block; margin-right: 10px; height: 15px; width: 15px; background-color: $secondary-color; border-radius: 10px; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .banner-section .owl-nav{ position: absolute; top: 50%; width: 100%; margin-top: -25px; } .banner-section .owl-prev, .banner-section .owl-next{ position: absolute; left: 0; top: 0; height: 50px; width: 50px; border: 1px solid #3f4d50; color: #3f4d50; font-size: 20px; line-height: 50px; font-weight: 400; text-transform: uppercase; text-align: center; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .banner-section .owl-next{ left: auto; right: 0; } .banner-section .owl-prev:hover, .banner-section .owl-next:hover{ background-color: #3f4d50; color: #ffffff; box-shadow: 0 0 30px rgba(0,0,0,0.20); } .banner-section .float-text{ position: absolute; left: 50%; margin-left: -150px; top: 130px; line-height: 1em; font-size: 150px; font-weight: 700; letter-spacing: -.01em; color: black; -webkit-text-fill-color: #ffffff; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #d8d1d1; text-shadow: 0 20px 10px rgba(0,0,0,0.10); opacity: .30; } /*** ==================================================================== Banner Section Two ==================================================================== ***/ .banner-section-two{ position: relative; padding: 200px 0; overflow: hidden; background-repeat: no-repeat; background-position: center; background-size: cover; } .banner-section-two .icon-cogs-2{ left: -320px; top: -120px; opacity: .50; animation: rotate_two 100s infinite; } .banner-section-two .images-outer{ position: absolute; right: 0; top: 0; height: 100%; width: 50%; } .banner-section-two .images-outer .speaker-img{ position: absolute; left: -100px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .banner-section-two .content-box{ position: relative; z-index: 99; max-width: 400px; } .banner-section-two .title{ position: relative; display: inline-block; font-size: 18px; line-height: 1.1em; color: $secondary-color; font-weight: 500; margin-bottom: 20px; padding: 10px 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); opacity: 0; -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -ms-transform: translateY(100px); -o-transform: translateY(100px); transform: translateY(100px); -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .banner-section-two.active .title{ opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 250ms; -moz-transition-delay: 250ms; -ms-transition-delay: 250ms; -o-transition-delay: 250ms; transition-delay: 250ms; } .banner-section-two h1{ position: relative; display: block; font-size: 48px; line-height: 1.2em; color: $primary-color; font-weight: 700; margin-bottom: 20px; opacity: 0; -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -ms-transform: translateY(100px); -o-transform: translateY(100px); transform: translateY(100px); -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .banner-section-two h1 span{ font-weight: 300; letter-spacing: .06em; } .banner-section-two.active h1{ opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 250ms; -moz-transition-delay: 250ms; -ms-transition-delay: 250ms; -o-transition-delay: 250ms; transition-delay: 500ms; } .banner-section-two .text{ position: relative; display: block; font-size: 18px; line-height: 30px; color: #3f4d50; font-weight: 400; letter-spacing: 0.06em; margin-bottom: 30px; opacity: 0; -webkit-transform: translateY(50px); -moz-transform: translateY(50px); -ms-transform: translateY(50px); -o-transform: translateY(50px); transform: translateY(50px); -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .banner-section-two.active .text{ opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 750ms; -moz-transition-delay: 750ms; -ms-transition-delay: 750ms; -o-transition-delay: 750ms; transition-delay: 750ms; } .banner-section-two .btn-box{ opacity: 0; -webkit-transform: translateY(50px); -moz-transform: translateY(50px); -ms-transform: translateY(50px); -o-transform: translateY(50px); transform: translateY(50px); -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .banner-section-two .btn-box .theme-btn{ line-height: 20px; padding: 10px 25px; font-size: 16px; font-weight: 500; } .banner-section-two.active .btn-box{ opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 1000ms; -moz-transition-delay: 1000ms; -ms-transition-delay: 1000ms; -o-transition-delay: 1000ms; transition-delay: 1000ms; } /*** ==================================================================== Banner Section Three ==================================================================== ***/ .banner-section-three{ position: relative; } .banner-section-three .slide-item{ position: relative; background-repeat: no-repeat; background-position: center; background-size: cover; text-align: center; } .banner-section-three .slide-item:before{ position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-color: #000000; opacity: .20; content: ""; } .banner-section-three .slide-item .content-box{ position: relative; height: 500px; width: 100%; display: table; vertical-align: middle; } .banner-section-three .slide-item .content{ position: relative; display: table-cell; vertical-align: middle; z-index: 9; } .banner-section-three .slide-item .title{ position: relative; display: inline-block; font-size: 18px; line-height: 1.1em; color: $secondary-color; font-weight: 500; padding: 7px 25px; border-radius: 5px; background-color: #ffffff; margin-bottom: 30px; opacity: 0; -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -ms-transform: translateY(100px); -o-transform: translateY(100px); transform: translateY(100px); -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .banner-section-three .active .title{ opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 250ms; -moz-transition-delay: 250ms; -ms-transition-delay: 250ms; -o-transition-delay: 250ms; transition-delay: 250ms; } .banner-section-three .slide-item h1{ position: relative; display: block; font-size: 68px; line-height: 1.2em; color: #ffffff; font-weight: 700; margin-bottom: 20px; text-transform: uppercase; opacity: 0; -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -ms-transform: translateY(100px); -o-transform: translateY(100px); transform: translateY(100px); -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .banner-section-three .slide-item h1 span{ font-weight: 300; letter-spacing: .06em; } .banner-section-three .active h1{ opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 250ms; -moz-transition-delay: 250ms; -ms-transition-delay: 250ms; -o-transition-delay: 250ms; transition-delay: 500ms; } .banner-section-three .slide-item .text{ position: relative; display: block; font-size: 22px; line-height: 1.8em; color: #ffffff; font-weight: 400; margin-bottom: 30px; opacity: 0; -webkit-transform: translateY(50px); -moz-transform: translateY(50px); -ms-transform: translateY(50px); -o-transform: translateY(50px); transform: translateY(50px); -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .banner-section-three .active .text{ opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 750ms; -moz-transition-delay: 750ms; -ms-transition-delay: 750ms; -o-transition-delay: 750ms; transition-delay: 750ms; } .banner-section-three .slide-item .btn-box{ opacity: 0; -webkit-transform: translateY(50px); -moz-transform: translateY(50px); -ms-transform: translateY(50px); -o-transform: translateY(50px); transform: translateY(50px); -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .banner-section-three .slide-item .btn-box .theme-btn{ line-height: 30px; padding: 10px 30px; font-weight: 500; } .banner-section-three .active .btn-box{ opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 1000ms; -moz-transition-delay: 1000ms; -ms-transition-delay: 1000ms; -o-transition-delay: 1000ms; transition-delay: 1000ms; } .banner-section-three .image-column{ position: relative; } .banner-section-three .image-column .image-box{ position: relative; text-align: center; } .banner-section-three .image-column .image-box .image{ position: relative; margin-bottom: 0; opacity: 0; -webkit-transform: translateX(50px); -moz-transform: translateX(50px); -ms-transform: translateX(50px); -o-transform: translateX(50px); transform: translateX(50px); -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .banner-section-three .active .image-box .image{ opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transition-delay: 500ms; -moz-transition-delay: 500ms; -ms-transition-delay: 500ms; -o-transition-delay: 500ms; transition-delay: 500ms; } .banner-section-three .owl-nav{ position: absolute; top: 50%; width: 100%; margin-top: -25px; } .banner-section-three .owl-prev, .banner-section-three .owl-next{ position: absolute; left: 0; top: 0; height: 50px; width: 50px; border: 1px solid #3f4d50; color: #3f4d50; font-size: 20px; line-height: 50px; font-weight: 400; text-transform: uppercase; text-align: center; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .banner-section-three .owl-next{ left: auto; right: 0; } .banner-section-three .owl-prev:hover, .banner-section-three .owl-next:hover{ background-color: #3f4d50; color: #ffffff; box-shadow: 0 0 30px rgba(0,0,0,0.20); } .banner-section-three .owl-dots{ display: none; } /*** ==================================================================== Welcome Banner ==================================================================== ***/ .welcome-section{ position: relative; padding: 80px 0 50px; } .welcome-section:before{ position: absolute; left: 0; right: 0; bottom: 0; width: 100%; max-width: 1170px; margin: 0 auto; border-bottom: 1px solid #e5e5e5; content: ""; } .welcome-section .title-column{ position: relative; margin-bottom: 30px; text-align: right; } .welcome-section .title-column .inner-column{ position: relative; padding: 12px 0; } .welcome-section .title-column h2{ position: relative; display: block; font-size: 36px; line-height: 43px; color: #333333; font-weight: 400; } .welcome-section .title-column h2 span{ color: $primary-color; font-weight: 700; } .welcome-section .text-column{ position: relative; } .welcome-section .text-column .inner-column{ position: relative; padding: 16px 0; padding-left: 35px; } .welcome-section .text-column .inner-column:before{ position: absolute; left: 0px; top: 0; height: 100%; width: 2px; background-color: $secondary-color; content: ""; border-radius: 50%; } .welcome-section .text-column .text{ font-size: 15px; line-height: 25px; color: #666666; font-weight: 400; } /*** ==================================================================== About Us ==================================================================== ***/ .about-us{ position: relative; padding: 120px 0 70px; overflow: hidden; } .about-us .sec-title{ margin-bottom: 30px; } .about-us .content-column{ position: relative; margin-bottom: 50px; } .about-us .content-column .inner-column{ position: relative; } .about-us .content-column h2{ position: relative; display: block; font-size: 48px; line-height: 1.2em; color: #3f4d50; font-weight: 600; margin-bottom: 20px; } .about-us .about-years{ position: relative; padding-left: 190px; padding-top: 10px; margin-bottom: 30px; } .about-us .about-years:before{ position: absolute; left: 170px; top: 0; height: 100%; width: 3px; background-color: $secondary-color; content: ""; border-radius: 50%; } .about-us .about-years span{ position: absolute; left: 0; top: 0; font-size: 70px; color: $primary-color; font-weight: 700; margin-right: 10px; line-height: 1em; } .about-us .about-years h3{ position: relative; display: inline-block; font-size: 20px; line-height: 1.2em; color: #3f4d50; font-weight: 500; } .about-us .content-column .text-box{ margin-bottom: 30px; } .about-us .content-column .text-box strong{ position: relative; display: block; font-size: 16px; line-height: 1.6em; margin-bottom: 20px; font-weight: 500; } .about-us .content-column .text-box strong span{ font-size: 20px; color: $secondary-color; } .about-us .content-column .text-box p{ position: relative; font-size: 15px; line-height: 1.6em; margin-bottom: 20px; } .feature-block{ position: relative; margin-bottom: 30px; } .feature-block .inner-box{ position: relative; padding-left: 65px; } .feature-block .icon-box{ position: absolute; left: 0; top: 15px; } .feature-block .icon-box .icon{ display: block; font-size: 42px; line-height: 1em; color: #ffbc00; font-weight: 400; } .feature-block h4{ font-size: 20px; line-height: 1.2em; color: #ffffff; font-weight: 500; margin-bottom: 10px; } .feature-block h4 a{ color: #ffffff; display: inline-block; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .feature-block h4 a:hover{ color: #ffbc00; } .feature-block .text{ font-size: 15px; line-height: 25px; color: #888888; font-weight: 400; } .about-us .image-column{ position: relative; margin-bottom: 50px; } .about-us .image-column .inner-column{ position: relative; } .about-us .image-column .float-text{ position: absolute; right: -160px; top: 190px; line-height: 1em; font-size: 105px; font-weight: 700; background: #fff; letter-spacing: -.05em; text-align: center; color: black; transform: rotate(90deg); -webkit-text-fill-color: #ffffff; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #d8d1d1; text-shadow: 0 15px 10px rgba(0,0,0,0.05); opacity: .50; } .about-us .image-column .image{ position: relative; margin-bottom: 0; } .about-us .image-column .image img{ display: inline-block; width: auto; border: 10px solid #ffffff; box-shadow: 0 0 30px rgba(0,0,0,0.05); } .about-us .image-column .image-2{ position: absolute; right: 0; bottom: 10px; margin-bottom: 0; z-index: 8; } .about-us .image-column .image-2 img{ display: inline-block; border: 7px solid #ffffff; box-shadow: 0 0 20px rgba(0,0,0,0.05); } .about-us.style-two .image-column .image{ text-align: left; } .about-us.style-two .image-column .inner-column:before{ position: absolute; right: 80px; top: 50px; height: 450px; width: 250px; border: 15px solid #f1f1f2; content: ""; } .about-us.style-two .image-column .image-2{ bottom: 60px; left: auto; right: 30px; } .about-us.style-two .icon-cogs-1{ right: -320px; bottom: -100px; animation: rotate_two 100s infinite; opacity: .50; } /*** ==================================================================== About Section Two ==================================================================== ***/ .about-section-two{ position: relative; padding: 120px 0 70px; } .about-section-two .sec-title{ margin-bottom: 30px; } .about-section-two .content-column{ position: relative; margin-bottom: 50px; } .about-section-two .content-column .inner-column{ } .about-section-two .about-years{ position: relative; padding: 10px 30px; background-color: $primary-color; box-shadow: 0 10px 20px rgba(0,0,0,0.30); text-transform: capitalize; margin-bottom: 40px; } .about-section-two .about-years span{ position: relative; font-size: 28px; font-weight: 700; margin-right: 10px; line-height: 1em; color: #ffffff; } .about-section-two .about-years h3{ position: relative; display: inline-block; font-size: 24px; line-height: 1.2em; color: #ffffff; font-weight: 500; } .about-section-two .content-column .text-box{ margin-bottom: 30px; } .about-section-two .content-column .text-box p{ position: relative; margin-bottom: 20px; } .feature-block-three{ position: relative; margin-bottom: 30px; } .feature-block-three .inner-box{ position: relative; padding-left: 65px; } .feature-block-three .icon-box{ position: absolute; left: 0; top: 10px; } .feature-block-three .icon-box .icon{ display: block; font-size: 48px; line-height: 1em; color: $secondary-color; font-weight: 400; } .feature-block-three h4{ font-size: 20px; line-height: 1.2em; color: #343a40; font-weight: 500; margin-bottom: 5px; } .feature-block-three h4 a{ color: #343a40; display: inline-block; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .feature-block-three h4 a:hover{ color: $primary-color; } .feature-block-three .text{ font-size: 15px; line-height: 25px; font-weight: 400; } .about-section-two .image-column{ position: relative; margin-bottom: 50px; } .about-section-two .image-column .inner-column{ position: relative; } .about-section-two .image-column .inner-column:before{ position: absolute; top: 0px; left: 0; right: 0; margin: 0 auto; height: 500px; width: 400px; border: 20px solid $primary-color; content: ""; transform: translateX(50px); } .about-section-two .image-column .image{ position: relative; z-index: 9; padding: 50px; margin-bottom: 0; text-align: center; } .about-section-two .image-column .image img{ display: inline-block; width: auto; box-shadow: 0 0 30px rgba(0,0,0,0.10); } .about-section-two .single-item-carousel{ position: relative; } .about-section-two .single-item-carousel .owl-nav{ display: none; } .about-section-two .single-item-carousel .owl-dots{ position: absolute; left: 0; bottom: 0px; width: 100%; text-align: center; } .about-section-two .single-item-carousel .owl-dot{ position: relative; display: inline-block; height: 12px; width: 12px; background-color: $primary-color; margin: 0 5px; } .about-section-two .single-item-carousel .owl-dot.active{ background-color: $secondary-color; } .max_width_image_wrapper{ max-width: 600px; margin: 0px auto; } .single-item-carousel{ .image_wrapper{ height: 600px; width: 550px; img{ width: 550px; min-height: 600px; max-height: 600px; object-fit: cover; max-width: 100%; display: block; margin: 0px auto; } } } .image_wrapper_services { max-height: 250px; img{ max-height: 250px; min-height: 250px; object-fit: cover; width: 100%; } } .image_wrapper_certification { max-height: 250px; img{ max-height: 250px; min-height: 250px; object-fit: cover; width: 100%; } } /*** ==================================================================== Call To Action Two ==================================================================== ***/ .call-to-action-two{ position: relative; padding: 120px 0; text-align: center; //background-color: rgba(0,0,0,0.01); background-color: rgba($primary-color,1); } .footer_new{ background-color: rgba($primary-color,1); position: relative; } .footer_new:before,.call-to-action-two:before{ position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; opacity: .10; content: ""; } .call-to-action-two.style-two{ background-attachment: fixed; background-repeat: no-repeat; background-position: center top; } .call-to-action-two.style-two:before{ background-color: #000000; opacity: .45; } .call-to-action-two .content{ position: relative; max-width: 900px; margin: 0 auto; } .call-to-action-two .title{ position: relative; display: inline-block; font-size: 18px; line-height: 1.2em; color: $primary-color; font-weight: 500; background-color: #ffffff; padding: 10px 25px; margin-bottom: 40px; box-shadow: 0 20px 30px rgba(0,0,0,.05); border-radius: 10px; } .call-to-action-two h2{ position: relative; display: block; font-size: 42px; line-height: 1.3em; color: #495057; font-weight: 600; margin-bottom: 30px; } .call-to-action-two{ &.normal-text-small-screen{ @media only screen and (max-width: 575px){ h2{ font-size: 20px !important; } } } } .call-to-action-two h2 span { font-weight: 300; display: block; margin-top: 10px; color: white; opacity: 0.7; } .call-to-action-two .number{ position: relative; display: block; font-size: 32px; line-height: 1em; color: #ffbc00; font-weight: 600; margin-bottom: 30px; } .call-to-action-two .number a{ color: #ffbc00; } /*** ==================================================================== Call To Action Three ==================================================================== ***/ .call-to-action-three{ position: relative; padding: 120px 0; text-align: center; } .call-to-action-three:before{ position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-color: rgba(0,0,0,0.10); opacity: .80; content: ""; } .call-to-action-three .content{ position: relative; max-width: 900px; margin: 0 auto; } .call-to-action-three .title{ position: relative; display: inline-block; font-size: 18px; line-height: 1.2em; color: $primary-color; font-weight: 500; background-color: #ffffff; padding: 10px 25px; margin-bottom: 40px; box-shadow: 0 20px 30px rgba(0,0,0,.05); border-radius: 10px; } .call-to-action-three h2{ position: relative; display: block; font-size: 42px; line-height: 1.3em; color: #ffffff; font-weight: 600; margin-bottom: 30px; } .call-to-action-three h2 span { font-weight: 300; display: block; margin-top: 10px; color: $secondary-color; } .call-to-action-three .number{ position: relative; display: block; font-size: 32px; line-height: 1em; color: #ffbc00; font-weight: 600; margin-bottom: 30px; } .call-to-action-three .number a{ color: #ffbc00; } /*** ==================================================================== Services Section Three ==================================================================== ***/ .services-section-three{ position: relative; padding: 60px 0 90px; //background-color: rgba(0,0,0,0.01); background-color: $primary-color; } .services-section-three.alternate{ background-color: #ffffff; } .services-section-three .sec-title{ margin-bottom: 30px; } .services-section-three .sec-title{ margin-bottom: 30px; } .services-section-three .carousel-outer{ position: relative; margin: 0 -30px; } .service-block-three{ position: relative; display: block; padding: 30px; } .service-block-three .inner-box{ position: relative; max-width: 350px; margin: 0 auto; box-shadow: 0 0 30px rgba(0,0,0,0.10); padding: 15px; background-color: #ffffff; } .service-block-three .image-box{ position: relative; } .service-block-three .image-box .image{ position: relative; margin-bottom: 0; overflow: hidden; background-color: #333333; } .service-block-three .image-box img{ position: relative; display: block; width: 100%; height: auto; opacity: .80; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .service-block-three .inner-box:hover .image img{ transform: scale(1.1); opacity: 1; } .service-block-three .image-box .price{ position: absolute; left: 0; top: 30px; font-size: 18px; padding: 5px 15px; padding-right: 20px; color: #ffffff; font-weight: 600; border-radius: 0 15px 15px 0; background-color: $primary-color; z-index: 2; } .service-block-three .lower-content{ position: relative; text-align: center; padding: 30px 15px 15px; } .service-block-three .lower-content h3{ position: relative; font-size: 22px; line-height: 1.2em; color: $secondary-color; font-weight: 500; margin-bottom: 10px; } .service-block-three .lower-content h3 a{ display: inline-block; color: $secondary-color; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .service-block-three .lower-content h3 a:hover{ color: #343a40; } .service-block-three .text{ position: relative; font-size: 16px; line-height: 26px; color: #666666; font-weight: 400; margin-bottom: 15px; } .service-block-three .lower-content .link-box{ position: relative; } .service-block-three .lower-content .link-box a { padding: 5px 15px; font-size: 12px; font-weight: 400; } .services-carousel .owl-nav{ display: block; } .services-carousel .owl-nav{ position: absolute; right: 0px; top: -120px; z-index: 99; } .services-carousel .owl-prev, .services-carousel .owl-next { position: absolute; height: 50px; width: 50px; right: 0; line-height: 46px; text-align: center; font-size: 24px; color: #000000; background: #ffffff; border: 2px solid #000000; -webkit-transition:all 300ms ease; -moz-transition:all 300ms ease; -ms-transition:all 300ms ease; -o-transition:all 300ms ease; transition: all 300ms ease; } .services-carousel .owl-prev{ left: -120px; } .services-carousel .owl-prev:hover, .services-carousel .owl-next:hover{ background: #fff; color: #1e69b8; border-color: #1e69b8; } .feature-block-two{ position: relative; margin-bottom: 30px; } .feature-block-two .inner-box{ position:relative; padding-left:60px; min-height: 50px; } .feature-block-two .icon{ position:absolute; left:0px; top:0px; color:$primary-color; line-height:50px; font-size:40px; height: 50px; font-weight:400; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .feature-block-two h5{ position: relative; display: block; font-size:18px; line-height: 1.2em; font-weight:500; color:#3f4d50; margin-bottom: 5px; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .feature-block-two .text{ font-size: 14px; line-height: 24px; } .progress-bars{ position:relative; margin-bottom: 30px; } /*** ==================================================================== Project Section ==================================================================== ***/ .project-section{ position: relative; padding: 120px 0; } /*=== Mixitup Gallery ===*/ .project-section .filters{ margin-bottom:50px; text-align: center; } .project-section .filters .filter-tabs{ position:relative; display: inline-block; } .project-section .filters li{ position: relative; display: inline-block; line-height: 20px; padding: 7px 20px; cursor: pointer; color: #ffffff; border-radius: 8px; font-size: 14px; margin: 0 8px 15px; background-color: $primary-color; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .project-section .filters .filter.active{ color: #ffffff; background-color: $secondary-color; box-shadow: 0 0 20px rgba(0,0,0,0.20); } .project-section .filters .filter:hover{ background-color: $secondary-color; } .project-section .project-block.mix{ display: none; } .project-section .filter-list{ position: relative; border-top: 10px solid #ffffff; border-right: 5px solid #ffffff; border-left: 5px solid #ffffff; box-shadow: 0 0 30px rgba(0,0,0,0.10); } .project-section .row{ margin: 0 -5px; } .project-block{ position: relative; padding: 0 5px; margin-bottom: 10px; } .project-block .inner-box{ position: relative; max-width: 350px; margin: 0 auto; } .project-block.mix .inner-box{ max-width: 100%; } .project-block .image-box{ position: relative; } .project-block .image-box .image{ position: relative; margin: 0; background-color: #252525; } .project-block .image-box img{ display: block; width: 100%; height: auto; opacity: .80; transition: all 300ms ease; } .project-block .image-box:hover img{ opacity: 1; } .project-block .image-box a{ position: relative; display: block; } .project-block .caption-box{ position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-color: rgba(255,255,255,.99); opacity: 0; transform: scale(.5); visibility: hidden; transition: all 400ms ease; } .project-block .image-box:hover .caption-box{ opacity: 1; visibility: visible; transform: scale(1); box-shadow: inset 0 0 30px rgba(0,0,0,0.10); } .project-block .caption-box .inner{ position: absolute; left: 0; top: 50%; width: 100%; transform: translateY(-50%); text-align: center; } .project-block .caption-box h3{ position: relative; display: block; font-size: 24px; line-height: 1em; color: $primary-color; font-weight: 500; z-index: 9; margin-bottom: 10px; } .project-block .caption-box h3 a{ color: $primary-color; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .project-block .caption-box h3 a:hover{ color: #3f4d50; } .project-block .caption-box span{ position: relative; display: block; font-size: 15px; line-height: 20px; color: $secondary-color; font-weight: 500; z-index: 9; } /*** ==================================================================== Project Section Two ==================================================================== ***/ .project-section-two{ position: relative; } .project-section-two .project-carousel{ position: relative; } .project-section-two .project-block{ padding: 10px 0; } .project-section-two .project-block .image-box{ border: 5px solid #ffffff; box-shadow: 0 0 10px rgba(0,0,0,0.10); } /*** ==================================================================== Project Detail ==================================================================== ***/ .project-detail{ position: relative; padding: 120px 0; z-index: 8; } .project-detail .upper-box{ position: relative; margin-bottom: 40px; } .project-detail .upper-box .image{ position: relative; margin-bottom: 0; } .project-detail .upper-box .image img{ display: block; width: 100%; height: auto; } .project-detail .single-item-carousel .owl-nav{ position: absolute; left: 0; top: 50%; width: 100%; margin-top: -50px; } .project-detail .single-item-carousel .owl-next, .project-detail .single-item-carousel .owl-prev{ position: absolute; left: 0; height: 100px; width: 30px; background-color: rgba(0,0,0,0.5); text-align: center; font-size: 18px; line-height: 100px; color: #ffffff; font-weight: 400; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .project-detail .single-item-carousel .owl-next{ left: auto; right: 0px; } .project-detail .single-item-carousel .owl-next:hover, .project-detail .single-item-carousel .owl-prev:hover{ background-color: rgba(255,255,255,.5); color: #000000; } .project-detail .text-column{ position: relative; margin-bottom: 50px; } .project-detail .text-column .inner-column{ position: relative; padding-right: 30px; } /* Lower Content */ .project-detail .lower-content{ position: relative; } .project-detail .lower-content h2{ position: relative; display: block; font-size: 32px; line-height: 1.2em; color: #343a40; font-weight: 500; margin-bottom: 20px; } .project-detail .lower-content h3{ position: relative; display: block; font-size: 24px; line-height: 1.2em; color: #343a40; font-weight: 500; margin-bottom: 20px; } .project-detail .lower-content h4{ position: relative; display: block; font-size: 20px; line-height: 1.2em; color: #343a40; font-weight: 500; margin-bottom: 20px; } .project-detail .lower-content p{ position: relative; display: block; font-size: 16px; line-height: 26px; color: #777777; font-weight: 400; margin-bottom: 26px; } .project-detail .lower-content .list-style-one li{ color: #777777; margin-bottom: 0; } .project-detail .info-column{ position: relative; } .project-detail .info-column .inner-column{ position: relative; margin-top: 50px; background-color: rgba(0,0,0,0.02); padding: 30px; border-radius: 30px; border: 5px solid #ffffff; box-shadow: 0 0 30px rgba(0,0,0,0.10); } .project-detail .project-info{ position: relative; } .project-detail .project-info li{ position: relative; padding-left: 30px; margin-bottom: 10px; } .project-detail .project-info li .icon{ position: absolute; left: 0; top: 0; font-size: 18px; line-height: 28px; color: $secondary-color; } .project-detail .project-info li strong{ color: #252525; font-size: 16px; line-height: 24px; font-weight: 500; } .project-detail .project-info li p{ font-size: 15px; line-height: 24px; color: #777777; font-weight: 400; margin-bottom: 0; } .project-detail .project-info li p a{ color: #777777; display: inline-block; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .project-detail .project-info li p a:hover{ color: $secondary-color; } /* Load More Option */ .load-more-option{ position: relative; display: block; width: 100%; text-align: center; margin-top: 70px; } .load-more-option li.prev a, .load-more-option li.next a{ position: relative; display: block; font-size: 18px; line-height: 20px; width: 80px; padding: 10px 10px; text-align: center; color: #ffffff; background-color: $primary-color; border-radius: 10px; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .load-more-option li.prev a:hover, .load-more-option li.next a:hover{ box-shadow: 0 10px 10px rgba(0,0,0,0.05); } .load-more-option .load-more{ position: relative; display: inline-block; font-size: 30px; } .load-more-option .load-more a{ position: relative; display: inline-block; font-size: 30px; line-height: 42px; color: $secondary-color; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .load-more-option .load-more a:hover{ color: #000000; } /*** =================================================================== Certificate Section =================================================================== ***/ .certificate-section{ position: relative; padding: 120px 0 90px; } .certificate-section.no-pd-btm{ padding-bottom: 0; } .certificate-section .sec-title{ margin-bottom: 30px; } .certificate-section .carousel-outer{ position: relative; margin: 0 -30px; } .certificate-carousel{ position: relative; } .certificate-carousel .slide-item{ position: relative; padding: 30px; } .certificate-carousel .image-box{ position: relative; max-width: 350px; margin: 0 auto; } .certificate-carousel .image-box .image{ position: relative; margin-bottom: 0; border: 10px solid #ffffff; box-shadow: 0 0 30px rgba(0,0,0,0.10); } .certificate-carousel .image-box img{ position: relative; display: block; width: 100%; } .certificate-carousel .owl-nav{ display: none; } /*** ==================================================================== Pricing Section ==================================================================== ***/ .pricing-section{ position: relative; padding: 120px 0 70px; } .pricing-section.style-two{ background-color: rgba(54,54,54,.01); } .pricing-section .sec-title h2:before{ opacity: .40; } .pricing-section .row{ margin: 0 -30px; } /*** ==================================================================== Pricing Section Two ==================================================================== ***/ .pricing-section-two{ position: relative; padding: 20px 0 10px; } .pricing-section-two.no-pd-top{ padding-top: 0; } .pricing-section-two .sec-title h2:before{ opacity: .40; } .pricing-section-two .row{ margin: 0 -30px; } .pricing-block-two{ position: relative; display: block; padding: 0px 10px; margin-bottom: 50px; } .pricing-block-two .inner-box{ position: relative; //background-color:#ffffff; background-color:#f2f2f2; padding: 20px 15px 20px; max-width: 100%; margin: 0 auto; text-align: center; border-radius: 20px; overflow: hidden; //box-shadow: 0 0px 40px rgba(8,0,0,.05); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .pricing-block-two .inner-box:before{ position: absolute; left: 0; top: 0; height: 235px; width: 100%; background-position: center top; background-repeat: no-repeat; background-size: cover; content: ""; transform: scaleY(-1); opacity: .05; } .pricing-block-two .price{ position: relative; display: block; font-size: 40px; line-height: 1em; //color: $secondary-color; color: $primary-color; font-weight: 400; margin-bottom: 20px; text-shadow: 0 10px 10px rgba(0,0,0,0.10); } .pricing-block-two .title{ position: relative; display: inline-block; width:100%; text-align: center; font-size: 24px; line-height: 1.1em; color: #212639; font-weight: 400; margin-bottom: 15px; //background: #fff; border-radius: 10px; padding: 10px 5px; //box-shadow: 0 10px 20px rgba(0,0,0,0.10); } .pricing-block-two .features{ position: relative; margin-bottom: 20px; min-height: 155px; max-height: 170px; overflow-x: hidden; overflow-y: auto; &.limitBox{ li:nth-child(n+5){ display: none; } } } .pricing-block-two .features li{ position: relative; display: block; font-size: 0.8rem; line-height: 20px; //color: #848484; color: #555; font-weight: 400; padding: 5px 0; border-bottom: 2px dashed white; } .pricing-block-two .features li a{ color: #848484; } .pricing-block-two .features li:last-child{ border-bottom: 0; } .pricing-block-two .btn-box{ position: relative; } .pricing-block-two .btn-box a{ position: relative; padding: 10px 20px; line-height: 10px; } /*** ==================================================================== Products Section ==================================================================== ***/ .products-section{ position: relative; padding: 120px 0 90px; } .products-section .carousel-outer{ position: relative; margin: 0 -30px; } .products-section .products-carousel{ position: relative; } .products-section .sec-title{ margin-bottom: 30px; } .product-block{ position: relative; padding: 30px; } .product-block .inner-box{ position: relative; } .product-block .image-box{ position: relative; overflow: hidden; text-align: center; } .product-block .image{ position: relative; background-color: rgba(0,0,0,0.05); margin-bottom: 0; max-height: 280px; min-height: 280px; } .product-block .image img{ display: inline-block; vertical-align: middle; max-width: 100%; width: auto; height: 100%; object-fit: cover; max-height: 280px; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .product-block .inner-box:hover .image img{ opacity: .80; } .product-block .btn-box{ position: absolute; left: -60px; top: 50%; text-align: center; margin-top: -50px; opacity: 0; visibility: hidden; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .product-block .inner-box:hover .btn-box{ left: 20px; opacity: 1; visibility: visible; } .product-block .btn-box a{ position: relative; display: block; font-size: 15px; line-height: 40px; color: #333333; background-color: #ffffff; height: 40px; width: 40px; box-shadow: 0 0 20px rgba(0,0,0,0.10); text-align: center; border-radius: 50%; margin-bottom: 10px; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .product-block .btn-box a:hover{ background-color: $primary-color; color: #ffffff; } .product-block .content-box{ position: relative; padding: 25px 15px; background-color: #ffffff; box-shadow: 0 0 30px rgba(0,0,0,0.05); } .product-block .content-box{ position: relative; text-align: center; } .product-block h5{ position: relative; font-size: 20px; color: $primary-color; font-weight: 500; margin-bottom: 5px; } .product-block h5 a{ display: inline-block; color: $primary-color; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .product-block h5 a:hover{ color: #495057; } .product-block .price{ position: relative; font-size: 16px; line-height: 26px; color: #212529; font-weight: 500; } .product-block .price del{ font-size: 14px; line-height: 26px; margin-left: 10px; font-weight: 400; color: $secondary-color; } .products-section .owl-nav{ position: absolute; right: 30px; top: -70px; text-align: right; } .products-section .owl-next, .products-section .owl-prev{ position: relative; display: inline-block; margin-left: 10px; height: 40px; width: 40px; text-align: center; line-height: 38px; font-size: 18px; color: #3f4d50; border: 1px solid #3f4d50; transition: all 300ms ease; } .products-section .owl-next:hover, .products-section .owl-prev:hover{ background-color: #3f4d50; color: #ffffff; } .sidebar-page-container .our-shop .row{ margin: 0 -15px; } .sidebar-page-container .our-shop .product-block{ padding: 0 15px; margin-bottom: 60px; } /*+++ ==================================================== FAQ's Section ==================================================== ===*/ .faq-section{ position: relative; padding: 120px 0 90px; } .faq-section.style-two{ padding: 100px 0 50px; } .faq-section.no-pd-top{ padding-top: 0; } .faq-section.style-two .skill-column .inner-column{ position: relative; padding-top: 50px; } .faq-section .content-column{ position: relative; margin-bottom: 30px; } .faq-section .content-column .inner-column{ padding-top: 20px; } .faq-section .image-column{ position: relative; margin-bottom: 50px; } .faq-section .image-column .inner-column{ position: relative; text-align: center; } .faq-section .image-column .float-text{ position: absolute; left: 0; width: 100%; top: 45px; text-align: center; line-height: 1em; font-size: 90px; font-weight: 800; letter-spacing: -.01em; color: black; text-transform: uppercase; -webkit-text-fill-color: #ffffff; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #d8d1d1; text-shadow: 0 10px 10px rgba(0,0,0,0.10); opacity: .50; } .faq-section .image-column .image{ position: relative; margin-bottom: 0; } .faq-section .image-column .caption-box{ position: relative; text-align: center; box-shadow: 0 0 30px rgba(0,0,0,0.10); //background-color: rgba(255,255,255,1); background-color: rgba($primary-color,1); padding: 15px 20px; color: white; } .faq-section .image-column .caption-box span{ display: inline-block; color: white; font-weight: 500; } .faq-section .image-column .caption-box h4{ font-size: 20px; line-height: 1.2em; color: white; } .faq-section .image-column .caption-box h4 a{ color: white; display: inline-block; } .faq-section .image-column .caption-box h4 a:hover{ color: white; text-decoration: underline; } /* Accordian Box */ .accordion-box{ position:relative; } .accordion-box .block{ position: relative; margin-bottom:24px; } .accordion-box .block:last-child{ margin-bottom:0px; } .accordion-box .block .acc-btn{ position:relative; font-size:16px; cursor:pointer; line-height:25px; color:#ffffff; font-weight:400; border-radius:4px; padding:10px 25px 10px 25px; padding-right: 50px; border: 1px solid #dddddd; background-color: $primary-color; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .accordion-box .block .icon-outer{ position:absolute; right:25px; top: 10px; font-size: 16px; line-height: 25px; color: #ffffff; text-align:center; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .accordion-box .block .acc-btn .icon-outer .icon{ position: relative; } .accordion-box .block.active-block{ box-shadow: 0 0 20px rgba(0,0,0,0.10); } .accordion-box .block .acc-btn.active .icon-outer{ -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); } .accordion-box .block .acc-content{ position:relative; display:none; background-color: #ffffff; border: 1px solid #dddddd; border-top: 0; } .accordion-box .block .acc-content.current{ display:block; } .accordion-box .block .content{ position:relative; font-size:16px; padding:20px 25px; } .accordion-box .block .content .text{ position:relative; font-size:15px; line-height: 24px; color:#888888; } .accordion-box .block .content p:last-child{ margin-bottom:0px; } /*** ==================================================================== FAQ Form Section ==================================================================== ***/ .faq-form-section{ position: relative; padding: 120px 0 100px; background-color: #fafafa; } .faq-form-section .faq-form{ position: relative; } .faq-form .form-group{ position:relative; margin-bottom:20px; } .faq-form .form-group input[type="text"], .faq-form .form-group input[type="email"], .faq-form .form-group input[type="url"], .faq-form .form-group textarea, .faq-form .form-group select{ position: relative; display: block; width: 100%; font-size: 15px; color: #222222; line-height: 28px; padding: 10px 25px; background-color: #ffffff; font-weight: 400; height: 50px; border: 1px solid #dddddd; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .faq-form .form-group input:focus, .faq-form .form-group select:focus, .faq-form .form-group textarea:focus{ box-shadow: 0 0 20px rgba(0,0,0,0.10); } .faq-form .form-group textarea{ height: 200px; resize: none; padding-top: 15px; } .faq-form .form-group button{ margin-top: 10px; } /*** ==================================================================== News Section ==================================================================== ***/ .news-section{ position:relative; padding:20px 0 70px; } .news-block{ position:relative; margin: 10px 10px; margin-bottom:50px; } .news-block .inner-box{ position:relative; box-shadow: 0 0 30px rgba(0,0,0,0.05); } .news-block .inner-box .image{ position:relative; display:block; background:#222222; overflow:hidden; } .news-block .inner-box .image img{ position:relative; width:100%; display:block; min-height: 300px; max-height: 300px; object-fit: cover; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -ms-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease; } .news-block .inner-box:hover .image a img{ opacity:0.7; -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .news-block .lower-content{ position:relative; padding:30px 25px 25px; z-index:1; } .news-block .post-info{ position: relative; margin-bottom: 10px; } .news-block .post-info li{ position: relative; display: inline-block; margin-right: 10px; margin-bottom: 5px; font-size: 14px; color:#343a40; line-height: 20px; } .news-block .post-info li span{ display: inline-block; color: $secondary-color; margin-right: 3px; } .news-block .post-info li:last-child{ margin-right: 0; } .news-block .lower-content h3{ position:relative; font-weight:500; font-size:16px; color: #343a40; line-height:1.4em; margin-bottom:10px; } .news-block .lower-content{ h3,h4,h5,h6{ color: #343a40; } } .blog_image{ img{ width: 100%; max-height: 500px; } } .news-block .lower-content h3 a{ position:relative; color:#343a40; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -ms-transition:all 0.3s ease; -o-transition:all 0.3s ease; transition:all 0.3s ease; } .news-block .lower-content h3 a:hover{ color:$secondary-color; } .news-block .lower-content .text{ font-size: 14px; line-height: 24px; margin-bottom: 15px; } .news-block .lower-content .read-more{ position: relative; display: inline-block; line-height: 20px; font-size: 16px; color: $primary-color; font-weight:500; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -ms-transition:all 0.3s ease; -o-transition:all 0.3s ease; transition:all 0.3s ease; } .news-block .lower-content .read-more:hover{ color:#343a40; } .news-section .styled-pagination{ margin-top: 20px; margin-bottom: 50px; } .news-section .styled-pagination{ margin-top: 20px; margin-bottom: 50px; } /*** ==================================================================== Styled Pagination ==================================================================== ***/ .styled-pagination{ position:relative; } .styled-pagination li{ position:relative; display:inline-block; margin: 0 10px 10px 0; } .styled-pagination li:last-child{ margin-right: 0; } .styled-pagination li a{ position:relative; display:inline-block; line-height:50px; font-size:18px; height:50px; width:50px; color:#848484; font-weight:600; text-align:center; background:#ffffff; border-radius: 5px; border:1px solid #e5e5e5; text-transform:capitalize; -webkit-transition:all 500ms ease; -moz-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; transition:all 500ms ease; } .styled-pagination li a:hover, .styled-pagination li a.active{ color:#ffffff; border-color:$primary-color; background-color:$primary-color; box-shadow: 0 5px 10px rgba(0,0,0,0.10); } /*** ==================================================================== Blog Sidebar ==================================================================== ***/ .blog-sidebar{ position: relative; } .blog-sidebar .news-block{ margin-bottom: 60px; } .blog-sidebar .news-block .lower-content .text{ font-size: 16px; line-height: 26px; } .blog-sidebar .news-block .lower-content h3{ font-size: 24px; } /*** ==================================================================== Sidebar Page Container ==================================================================== ***/ .sidebar-page-container{ position:relative; padding:20px 0px 70px; } .sidebar-page-container .our-shop, .sidebar-page-container .blog-single, .sidebar-page-container .blog-sidebar{ padding-right: 20px; } .sidebar-page-container .content-side, .sidebar-page-container .sidebar-side{ margin-bottom:50px; } .sidebar-widget{ position:relative; margin-bottom:50px; } .sidebar-widget:last-child{ margin-bottom: 0; } /* Sidebar Title */ .sidebar-title{ position: relative; margin-bottom: 25px; } .sidebar-title h3{ position: relative; display: block; font-size: 24px; line-height: 1.2em; color: #343a40; font-weight: 500; } /*Search Box Widget*/ .sidebar .search-box .form-group{ position:relative; margin:0px; } .sidebar .search-box .form-group input[type="text"], .sidebar .search-box .form-group input[type="search"]{ position:relative; padding:10px 50px 10px 25px; border: 1px solid #dddddd; background-color: rgba(0,0,0,0.01); display:block; font-size:16px; line-height:28px; width:100%; height:60px; color:#777777; -webkit-transition:all 500ms ease; -moz-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; transition:all 500ms ease; } .sidebar .search-box .form-group button{ position:absolute; right: 0px; top: 0; height:60px; width:60px; display:block; font-size:16px; color:#333333; line-height:100%; font-weight:normal; background-color: transparent; -webkit-transition:all 500ms ease; -moz-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; transition:all 500ms ease; } .sidebar .search-box .form-group button:hover{ color: $secondary-color; } /* Category List */ .category-list{ position: relative; display: block; } .category-list li{ position: relative; margin-bottom: 5px; border-bottom: 0; } .category-list li:last-child{ } .category-list li a{ position: relative; display: block; font-size: 16px; color: #666666; font-weight: 400; line-height: 30px; padding: 10px 20px; padding-left: 45px; background-color: rgba(0,0,0,0.01); -webkit-transition: all 200ms ease; -moz-transition: all 200ms ease; -ms-transition: all 200ms ease; -o-transition: all 200ms ease; transition: all 200ms ease; } .category-list li a:before{ position: absolute; top: 0; left: 20px; height: 50px; line-height: 50px; font-size: 14px; color: #1e69b8; content: "\f105"; font-family: "Font Awesome 5 Free"; font-weight: 900; -webkit-transition: all 200ms ease; -moz-transition: all 200ms ease; -ms-transition: all 200ms ease; -o-transition: all 200ms ease; transition: all 200ms ease; } .category-list li a span{ float: right; font-size: 14px; color: #333333; -webkit-transition: all 200ms ease; -moz-transition: all 200ms ease; -ms-transition: all 200ms ease; -o-transition: all 200ms ease; transition: all 200ms ease; } .category-list li a:hover{ color: #ffffff; background: $primary-color; } .category-list li a:hover:before{ color: #ffffff; } .category-list li a:hover span{ color: #ffffff; } /*Post Widget*/ /*=== Latest News ===*/ .sidebar .latest-news{ position: relative; } .latest-news .post{ position: relative; padding-left: 110px; margin-bottom: 20px; min-height: 75px; } .latest-news .post:last-child{ margin-bottom: 0; } .latest-news .post-thumb{ position: absolute; left: 0; top: 0; height: 70px; width: 85px; margin-bottom: 20px; background-color: rgba(0,0,0,0.05); img{ height: 70px; width: 85px; object-fit: cover; } } .latest-news .post-thumb a:before{ position: absolute; left: 0; top: 0; height: 100%; width: 100%; opacity: .80; content: ""; background-color: $primary-color; z-index: 1; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .latest-news .post-thumb a:after{ position: absolute; height: 20px; width: 20px; left: 50%; top: 50%; margin-left: -10px; margin-top: -10px; text-align: center; line-height: 20px; font-size: 18px; z-index: 9; color: #ffffff; font-weight: 900; content: "\f0c1"; font-family: "Font Awesome 5 Free"; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .latest-news .post-thumb img{ position: relative; display: block; width: 100%; } .latest-news .post h5{ position: relative; font-size: 16px; line-height: 1.4em; color: #222222; font-weight: 500; margin-bottom: 5px; } .latest-news .post h5 a{ color: #222222; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .latest-news .post:hover h5 a{ color: $primary-color; } .latest-news .post .post-info{ position: relative; font-size: 14px; line-height: 24px; color: $secondary-color; font-weight: 400; } .latest-news .post .price{ font-size: 16px; line-height: 20px; color: #777777; font-weight: 400; } .latest-news .post .rating{ position: relative; } .latest-news .post .rating .fa { position: relative; display: inline-block; font-size: 12px; line-height: 20px; color: orange; } /*Popular Tags*/ .sidebar .popular-tags{ position: relative; } .sidebar .popular-tags li{ position: relative; display: inline-block; margin:0px 5px 8px 0px; } .sidebar .popular-tags a{ position:relative; display:block; color:#555555; text-align:center; font-size:16px; line-height: 20px; padding: 5px 20px; background:none; font-weight:400; border:1px solid #e5e5e5; background-color: rgba(0,0,0,.02); text-transform:capitalize; transition:all 300ms ease; -webkit-transition:all 300ms ease; -ms-transition:all 300ms ease; -o-transition:all 300ms ease; -moz-transition:all 300ms ease; } .sidebar .popular-tags a:hover{ border-color:$secondary-color; background-color:$secondary-color; color:#ffffff; } /*** ==================================================================== Blog Single ==================================================================== ***/ .blog-single{ position: relative; } .blog-single .news-block{ margin-bottom: 60px; } .blog-single .news-block .lower-content h3{ font-size: 20px; } .blog-single .news-block .lower-content p{ font-size: 16px; line-height: 26px; margin-bottom: 30px; text-align: justify; } .blog-single .news-block .lower-content p a{ color: $secondary-color; display: inline-block; } .blog-single .news-block .lower-content p a:hover{ text-decoration: underline; } .blog-single .news-block .inner-box .image{ margin-bottom: 30px; } .blog-single .news-block .lower-content{ .desc{ ul{ li{ position: relative; display: block; padding-left: 20px; font-size: 16px; line-height: 26px; margin-bottom: 10px; text-align: justify; &:before{ position: absolute; font-family: "Font Awesome 5 Free"; font-weight: 900; left: 0; top: 0px; color: $secondary-color; font-size: 1rem; content: "\f101"; } } } } } .blog-single blockquote{ position: relative; border-left: 5px solid $secondary-color; background-color: rgba(0,0,0,0.02); font-size: 16px; line-height: 1.8em; padding: 25px 40px; margin: 35px 30px 35px; } .blog-single blockquote:before{ position: absolute; right: 25px; bottom: 25px; font-size: 50px; line-height: 1em; content: "\f10d"; color: #dddddd; font-weight: 900; font-family: "Font Awesome 5 Free"; opacity: .30; } .blog-single blockquote cite{ display: block; font-style: normal; text-align: right; margin-top: 10px; font-size: 14px; } .blog-single blockquote cite strong{ font-weight: 400; color: $primary-color; } /*post share options*/ .blog-single .post-share-options{ position:relative; margin-bottom: 20px; } .blog-single .post-share-options .tags{ position: relative; margin-bottom: 20px; } .blog-single .post-share-options .tags li{ position: relative; display: inline-block; margin-right: 5px; margin-bottom: 10px; } .blog-single .post-share-options .tags a{ position:relative; display: block; font-size:16px; font-weight:400; line-height: 25px; padding: 5px 15px; color:#777777; background-color: #ffffff; border: 1px solid #aaaaaa; border-radius: 5px; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .blog-single .post-share-options .tags a:hover{ color: #ffffff; background-color: #343a40; } .blog-single .post-share-options .social-icon{ position: relative; display: inline-block; margin-bottom: 30px; } .blog-single .post-share-options .social-icon li{ position: relative; display: inline-block; } .blog-single .post-share-options .social-icon li a{ display: inline-block; font-size: 16px; line-height: 25px; color: #777777; padding: 5px 8px; border-radius: 5px; margin-left: 5PX; border: 1px solid #aaaaaa; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .blog-single .post-share-options .social-icon li a:hover{ color: #ffffff; background-color: #343a40; } /*Author Box*/ .author-box{ position:relative; padding: 30px 30px; background-color: #f5f5f5; margin-bottom: 70px; } .author-box .inner-box{ position:relative; padding-left: 160px; min-height: 140px; padding-top: 15px; } .author-box .thumb{ position:absolute; left:0px; top:0px; height: 140px; width: 140px; border-radius: 50%; overflow: hidden; margin-bottom: 20px; box-shadow: 0 0 20px rgba(0, 0, 0, .2); border: 3px solid #fff; } .author-box .thumb img{ display: block; width: 100%; height: auto; } .author-box .name{ position: relative; font-size: 20px; line-height: 28px; color: #3f4d50; font-weight: 500; margin-bottom: 10px; } .author-box .text{ position: relative; float: right; width: 100%; font-size: 16px; line-height: 26px; color: #777777; font-weight: 400; margin-bottom: 10px; } .author-box .social-icon{ position: relative; z-index: 9; } .author-box .social-icon li{ position: relative; display: inline-block; margin-right: 12px; } .author-box .social-icon li a{ position:relative; display: block; text-align: center; font-size:14px; font-weight:400; color:#222222; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .author-box .social-icon li a:hover{ color: $secondary-color; } /*** ==================================================================== Clients Section ==================================================================== ***/ .clients-section{ position:relative; //background-color: rgba(0,0,0,0.02); background-color: rgba($primary-color,1); } .clients-section .sponsors-outer{ position:relative; } .clients-section .sponsors-outer .owl-dots, .clients-section .sponsors-outer .owl-nav{ position:relative; display:none; } .clients-section .sponsors-outer .image-box{ position:relative; text-align:center; padding: 0px 0; margin-bottom: 0; } .clients-section .sponsors-outer .image-box img{ max-width:100%; width: auto; height: auto; margin: 0 auto; -webkit-transition:all 300ms ease; -ms-transition:all 300ms ease; -o-transition:all 300ms ease; -moz-transition:all 300ms ease; transition:all 300ms ease; } /*** ==================================================================== Newsletter Section ==================================================================== ***/ .newsletter-section{ position:relative; z-index: 1; } .newsletter-section:before{ position: absolute; left: 0; bottom: 0; height: 50%; width: 100%; background-color: #3f4d50; content: ""; z-index: -1; } .newsletter-section .inner-container{ background-color: $primary-color; padding: 50px 50px 10px; box-shadow: 0 0 30px rgba(0,0,0,0.10); } .newsletter-section .title-column{ position: relative; margin-bottom: 40px; } .newsletter-section .title-column .inner-column{ position: relative; padding-left: 70px; } .newsletter-section .title-column .icon-box{ position: absolute; left: 0; top: 8px; } .newsletter-section .title-column .icon-box .icon{ font-size: 50px; line-height: 1em; color: #ffc107; font-weight: 400; } .newsletter-section .title-column h2{ position:relative; font-size:30px; color:#ffffff; line-height:1.3em; font-weight:700; } .newsletter-section .title-column .text{ display: block; font-size: 15px; line-height: 25px; color: #ffffff; font-weight: 400; } .newsletter-section .form-column{ position: relative; margin-bottom: 40px; } .newsletter-section .form-column .inner-column{ position: relative; padding-left: 78px; } /*Subscribe Form*/ .subscribe-form .form-group{ position:relative; display:block; margin:0px; width:100%; padding-right:60px; background-color: #ffffff; border-radius: 3px; } .subscribe-form .form-group input[type="text"], .subscribe-form .form-group input[type="tel"], .subscribe-form .form-group input[type="email"], .subscribe-form .form-group textarea{ position:relative; display:block; width:100%; line-height:20px; height:60px; font-size:16px; color:#555555; font-weight: 300; background:#ffffff; padding:10px 25px 10px; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .subscribe-form .form-group input[type="submit"], .subscribe-form .submit-btn{ position:absolute; right:0px; top:0px; height: 60px; width: 60px; color:#ffffff; font-size:18px; cursor:pointer; border-radius: 3px; background-color:$secondary-color; text-transform:uppercase; } .subscribe-form .form-group input[type="submit"]:hover, .subscribe-form .submit-btn:hover{ color: $secondary-color; background-color: #ffffff; } .newsletter-section.style-two{ position: relative; } .newsletter-section.style-two .inner-container{ position: relative; border-radius: 20px; } .newsletter-section.style-two:before{ background-color: #ffffff } /*** ==================================================================== Main Footer ==================================================================== ***/ .main-footer{ position:relative; background-color:#ffffff; &.footer_new{ background-color: $primary-color; } } .main-footer .widgets-section{ position:relative; padding:80px 0px 70px; } .main-footer .widgets-outer{ position: relative; } .main-footer .man-image{ position: absolute; right: -50px; top: 70px; } .main-footer .footer-widget{ position:relative; margin-bottom:30px; } .main-footer .logo-widget{ position:relative; } .main-footer .logo-widget .logo{ position:relative; margin-top: -40px; margin-bottom:25px; } .main-footer .logo-widget .logo img{ display: inline-block; vertical-align: bottom; } .main-footer .logo-widget .logo span{ position: relative; display: inline-block; font-size: 14px; line-height: 1em; color: #cccccc; font-weight: 700; bottom: -3px; } .main-footer .logo-widget .text{ position: relative; font-size: 16px; color: #777777; } .main-footer .logo-widget .copyright{ position: relative; font-size: 0.9rem !important; color: #777777; line-height: 20px; } .main-footer .logo-widget .copyright a{ color: $secondary-color; } .main-footer .logo-widget .copyright a:hover{ text-decoration: underline; } .main-footer .footer-column .widget-title{ position: relative; font-size:24px; font-weight:500; color:#495057; line-height: 20px; margin-bottom: 30px; } /*Social Icon Two*/ .social-icon-two{ position:relative; } .social-icon-two li{ position:relative; margin-right:8px; display:inline-block; } .social-icon-two li a{ position:relative; font-size:14px; color:#777777; line-height: 34px; height: 35px; width: 35px; border-radius: 50px; border: 1px solid #777777; text-align:center; display:inline-block; border-radius:50%; -webkit-transition:all 300ms ease; -ms-transition:all 300ms ease; -o-transition:all 300ms ease; -moz-transition:all 300ms ease; transition:all 300ms ease; } .social-icon-two li a:hover{ color:#ffffff; background-color: $primary-color; border: 1px solid $primary-color; } .main-footer .links-widget{ position:relative; padding-left: 40px; } .main-footer .list{ position: relative; } .main-footer .list li{ position:relative; font-size: 14px; line-height: 24px; color: #777777; font-weight: 400; padding-left: 20px; margin-bottom:5px; } .main-footer .list li:before{ position: absolute; top: 9px; left: 0px; height: 6px; width: 6px; content: ""; background-color: white; border-radius: 6px; } .main-footer .list li a{ position:relative; color: #777777; transition:all 0.3s ease; -moz-transition:all 0.3s ease; -webkit-transition:all 0.3s ease; -ms-transition:all 0.3s ease; -o-transition:all 0.3s ease; } .main-footer .list li a:hover{ color:$primary-color; } .main-footer .contact-widget{ position: relative; padding-left: 30px; } .main-footer .contact-info-list{ position:relative; margin-bottom: 20px; } .main-footer .contact-info-list li{ position:relative; padding-left: 30px; font-size: 14px; line-height: 24px; color: #777777; font-weight: 400; margin-bottom:12px; } .main-footer .contact-info-list li span{ position: absolute; left: 0; top: 0px; color: white; line-height: 24px; font-size: 15px; } .main-footer .contact-info-list li a{ position:relative; color: #777777; transition:all 0.3s ease; -moz-transition:all 0.3s ease; -webkit-transition:all 0.3s ease; -ms-transition:all 0.3s ease; -o-transition:all 0.3s ease; } .main-footer .contact-info-list li a:hover{ color:$primary-color; } /*** ==================================================================== Main Footer Style Two ==================================================================== ***/ .main-footer.style-two{ position: relative; background-color: #3f4d50; } .main-footer.style-two .logo-widget .copyright, .main-footer.style-two .social-icon-two li a, .main-footer.style-two .contact-info-list li, .main-footer.style-two .contact-info-list li a, .main-footer.style-two .list li a, .main-footer.style-two .logo-widget .text{ color: #dddddd; } .main-footer.style-two .logo-widget .copyright, .main-footer.style-two .logo-widget .copyright a, .main-footer.style-two .social-icon-two li a:hover, .main-footer.style-two .footer-column .widget-title, .main-footer.style-two .contact-info-list li a:hover, .main-footer.style-two .list li a:hover{ color: #ffffff; } .main-footer.style-two .contact-info-list li span{ color: #17a2b8; } .main-footer.style-two .social-icon-two li a{ border-color: #eeeeee; } .main-footer.style-two .list li:before{ background-color: $secondary-color; } .login-form button{ top:0px; margin-top:0px; font-size:16px; font-weight:700; padding:10px 36px; line-height: 25px; color:#ffffff; text-transform:uppercase; width: 100%; } .login-form .psw{ position:relative; color:#999999; font-size:16px; transition: all 300ms ease; } .login-form .psw:hover{ text-decoration: underline; } .small-text{ font-size: 0.8rem !important; } .text-sm{ font-size: 0.9rem !important; } .bold-text{ font-weight: 600 !important; } .primary-color{ color: $primary-color; } .normal-text{ font-size: 1rem !important; } .medium-text{ font-size: 1.2rem !important; } .big-text{ font-size: 1.5rem !important; } .bigger-text{ font-size: 2rem !important; } .biggest-text{ font-size: 3rem !important; @media only screen and (max-width: 767px){ font-size: 2rem !important; } @media only screen and (max-width: 575px){ font-size: 1.5rem !important; } } .owl_design_custom{ .owl-next, .owl-prev{ position: relative; display: inline-block; margin-left: 10px; height: 40px; width: 40px; text-align: center; line-height: 38px; font-size: 18px; color: #3f4d50; border: 1px solid #3f4d50; transition: all 300ms ease; } .owl-next:hover, .owl-prev:hover{ background-color: #3f4d50; color: #ffffff; } .owl-nav{ position: absolute; right: 30px; top: -60px; text-align: right; } } .logo_image{ font-size: 30px; font-weight: 600; display:inline-block; img{ max-height: 80px; } } .logo_image_small{ font-size: 30px; font-weight: 600; display:inline-block; img{ max-height: 50px; } } /***********************Old Responsive Codes**********************************/ @media only screen and (max-width: 1139px){ .main-header .info-box{ margin-left: 50px; } .banner-section .slide-item h1{ font-size: 38px; } .service-block .inner-box:before, .banner-section .owl-nav{ display: none; } .service-block .inner-box{ padding: 50px 30px; text-align: center } .service-block .icon-box{ position: relative; display: inline-block; left: 0; top: 0; margin-bottom: 10px; } .fun-fact-section .count-box .count-text{ font-size: 65px; } .video-section .content-box{ padding-left: 0; text-align: center; } .video-section .play-now{ position: relative; display: inline-block; margin: 0 0 30px; } .video-section .image-column .image-box{ position: relative; display: none; } .main-footer .links-widget{ padding-left: 0; } .main-footer .man-image{ right: -80px; } .header-style-three .main-menu .navigation > li, .header-style-two .main-menu .navigation > li{ margin-right: 30px; } .header-style-three .main-menu .navigation > li > a, .header-style-two .main-menu .navigation > li > a{ text-transform: capitalize; } .faq-section .content-column .inner-column{ padding-top: 0; } .newsletter-section .title-column h2{ font-size: 24px; } .contact-section .content-column .inner-column{ margin-right: -30px; } .banner-section-two h1{ font-size: 42px; } .banner-section-two{ padding: 120px 0; } .project-detail .text-column .inner-column{ padding-right: 0; } .features-section .Features-column .inner-column{ padding-left: 0; } } @media only screen and (min-width: 768px){ .main-menu .navigation > li > ul, .main-menu .navigation > li > ul > li > ul{ display:block !important; visibility:hidden; opacity:0; } } @media only screen and (max-width: 1023px){ .sticky-header{ display: none !important; } .nav-outer .mobile-nav-toggler{ display: block; margin: 0; padding: 24px 0; margin-left: 20px; color: #ab7442; } .main-header .nav-outer .main-menu{ display: none; } .main-header .header-upper .logo-outer{ width: 100%; text-align: center; } .main-header .upper-right{ padding-top: 0; width: 100%; display: none; } .main-header .info-box{ padding-left: 0; text-align: center; width: 100%; margin: 0 0 50px; } .main-header .info-box .icon-box{ position: relative; display: inline-block; left: 0; top: 0; margin-bottom: 10px; } .nav-outer .mobile-nav-toggler{ padding: 5px 0; color: #ffffff; } .main-header .outer-box{ float: left; } .banner-section{ text-align: center } .banner-section .slide-item .content-box{ display: block; padding: 120px 0 70px; height: auto; } .banner-section .content-column{ order: 0; margin-bottom: 50px; } .banner-section .content-column h1 br{ display: none; } .banner-section .float-text{ top: 50%; left: 0; width: 100%; text-align: center; margin: 0; } .about-us .image-column .image-2{ right: auto; left: 0; bottom: 50px; } .main-header .search-box-outer .dropdown-menu{ right: auto !important; left: 0 !important; } .features-section .image-column .image, .about-us .image-column .image{ text-align: center; } .faq-section.style-two .skill-column{ order: 0; margin-bottom: 50px; } .faq-section.style-two .skill-column .inner-column{ padding-top: 0; } .main-footer .widgets-section{ max-width: 100%; } .main-footer .man-image{ display: none; } .main-footer .logo-widget .logo{ margin-top: 0; } .main-footer .widgets-section{ padding: 120px 0 70px; } .feature-tabs .tab-btns .tab-btn{ width: 100%; } .call-to-action{ text-align: center; } .call-to-action .title-column{ margin-bottom: 20px; } .call-to-action .title-column .inner{ width: 100%; padding-left: 0; } .call-to-action .icon-certificate{ position: relative; display: inline-block; } .call-to-action .btn-column .inner{ float: none; padding: 0; display: inline-block; width:100%; text-align: center; } .call-to-action .btn-column a{ display: inline-block; } .service-block .inner-box{ padding: 40px 20px; } .header-style-three .nav-outer .mobile-nav-toggler, .header-style-two .nav-outer .mobile-nav-toggler{ color: #222222; padding: 15px 0; font-size: 40px; } .header-style-three .header-lower .btn-box, .header-style-two .header-lower .btn-box, .header-style-three .logo, .header-style-two .logo{ padding: 8px 0; } .header-style-three .logo img, .header-style-two .logo img{ height: 50px; } .header-style-three .nav-outer .cart-btn, .header-style-two .nav-outer .cart-btn{ padding: 20px 0; } .header-style-two .search-box-outer{ float: right; } .header-style-two .search-box-outer .dropdown-menu{ left: auto !important; right: 0 !important; } .banner-section-two .content-box{ max-width: 100%; text-align: center; margin-bottom: 50px; } .banner-section-two .images-outer{ position: relative; display: inline-block; width: 100%; text-align: center; } .banner-section-two .images-outer .speaker-img{ position: relative; margin: 0; left: 0; top: 0; transform: none; } .about-us .content-column{ order: 0; } .why-choose-us .image-column .inner-column:before{ display: none; } .contact-section .content-column{ margin-bottom: 50px; } .contact-form .form-inner{ max-width: 100%; } .newsletter-section .title-column .inner-column, .newsletter-section .form-column .inner-column{ padding-left: 0; text-align: center; } .newsletter-section .title-column .icon-box{ position: relative; display: inline-block; margin-bottom: 30px; } .contact-section .content-column .inner-column{ margin: 0; padding-top: 0; } .banner-section-three .slide-item h1{ font-size: 54px; } .call-to-action-two h2{ font-size: 38px; } .sidebar-page-container .content-side, .faq-section .content-column{ order: 0; } .page-title{ text-align: center } .coming-soon .content .text br{ display: none; } .sidebar-page-container .our-shop, .sidebar-page-container .blog-single, .sidebar-page-container .blog-sidebar{ padding-right: 0; } .service-detail{ padding-left: 0; } .project-detail .info-column .inner-column{ margin-top: 0; } .comments-area .comment-box.reply-comment{ margin-left: 0; } .blog-single blockquote{ margin-left: 0; margin-right: 0; } .feature-block-four .inner-box{ padding-left: 0; padding: 0 15px; text-align: center; } .feature-block-four .icon{ position: relative; display: inline-block; margin-bottom: 15px; } .feature-block-four{ position: relative; float: left; width: 50%; } } @media only screen and (max-width: 767px){ .main-header .top-left{ display: none; } .main-header .top-right{ width: 100%; } .about-us .image-column .image-2{ display: none; } .about-us .image-column .image img{ width: 100%; } .main-footer .contact-widget{ padding-left: 0; } .about-us .content-column h2{ font-size: 30px; } .call-to-action-two h2, .sec-title h2{ font-size: 38px; } .call-to-action-two h2 br{ display: none; } .team-section, .testimonial-section-two, .testimonial-section{ padding: 55px 0; } .page-title, .why-choose-us, .project-section, .faq-section, .products-section, .faq-form-section, .project-detail, .call-to-action-two, .video-section-two, .certificate-section, .contact-section{ padding: 70px 0; } .pricing-section, .checkout-page, .services-section-three, .services-section, .features-section{ padding: 70px 0 40px; } .team-section-two, .cart-section, .pricing-section-two, .services-section-two{ padding: 70px 0 30px; } .about-us, .work-section, .news-section, .login-section, .fun-fact-section, .about-section-two, .team-section-three, .contact-section-two, .faq-section.style-two, .sidebar-page-container, .main-footer .widgets-section{ padding: 70px 0 20px; } .products-section .owl-nav, .banner-section-three .owl-nav, .banner-section-three .slide-item .text br{ display: none; } .banner-section-three .slide-item .content-box{ height: auto; display: block; padding: 120px 0; } .contact-section-two .contact-info li{ width: 50%; } .coming-soon .cs-countdown div:before{ display: none; } .coming-soon .content .content-inner{ padding: 150px 0 100px; } .coming-soon .cs-countdown div{ width: 50%; margin: 0 0 50px; float: left; } .error-section .error-title{ font-size: 140px; margin-bottom: 50px; } .error-section .error-title span{ height: 100px; width: 100px; } .error-section{ padding: 100px 0 90px; } .video-section-two .content-box h2{ font-size: 36px; } .service-detail .two-column .image-column .image img, .feature-block-four{ width: 100%; } .banner-section .float-text{ font-size: 100px; top: 60%; } .about-us .image-column .float-text, .about-us.style-two .image-column .inner-column:before{ display: none; } } @media only screen and (max-width: 599px){ .service-detail .content-box h2, .sec-title h2{ font-size: 22px; } .sec-title .text{ font-size: 16px; } .banner-section-three .slide-item h1{ font-size: 42px; } .banner-section .slide-item h1 span{ display: block; } .coming-soon h1{ font-size: 44px; } .testimonial-block .inner-box:before, .sec-title .text br{ display: none; } .testimonial-block .inner-box{ text-align: center; padding: 40px 20px 35px; } .testimonial-section .sec-title{ margin-bottom: 20px; } .testimonial-block .info-box .thumb{ position: relative; display: inline-block; left: 0; top: 0; } .testimonial-block .info-box{ padding-left: 0; } .video-section-two .content-box .text br, .about-section-two .image-column .inner-column:before, .why-choose-us .image-column .image-2, .why-choose-us .image-column .image-3, .contact-info-tabs .float-icon{ display: none; } .faq-form .form-group button, .contact-info-tabs .tab-btn{ width: 100%; } .newsletter-section .inner-container{ padding: 30px 20px 0; } .page-title h2{ font-size: 38px; } .author-box .inner-box, .comments-area .comment{ padding: 0; } .comments-area .comment-box .reply-btn, .comments-area .comment-box .author-thumb, .author-box .thumb{ position: relative; display: inline-block; } .comments-area .comment-box .reply-btn{ margin-top: 10px; } .error-section h2{ font-size: 30px; } .error-section .text{ font-size: 18px; } .shipping-form button, .cart-section .coupon-btn, .cart-section .cart-options > div, .cart-section .cart-options .cart-btn, .cart-section .totals-table .proceed-btn, .cart-section .apply-coupon .form-group input[type="text"]{ width: 100%; } .cart-section .apply-coupon .form-group{ margin: 0 0 10px; width: 100%; } .cart-section .totals-table .proceed-btn{ padding: 14px 20px; } .order-box ul li{ padding: 25px 0; } .payment-box{ padding: 30px 20px; } .service-detail .two-column .image-column .image img, .service-detail .prod-tabs .tab-btns .tab-btn{ width: 100%; } .video-section-two .content-box h2{ font-size: 32px; line-height: 1.2em; } .call-to-action-two h2{ font-size: 32px; } .project-detail .lower-content h2, .service-detail .content-box h2{ font-size: 28px; } .project-detail .lower-content h3, .service-detail .content-box h3{ font-size: 24px; } .banner-section-two{ padding: 70px 0; } .banner-section-three .slide-item .text{ font-size: 18px; line-height: 1.6em; } } @media only screen and (max-width: 479px) { .main-header .header-top .social-icon-one, .main-header .header-top .btn-box{ position: relative; display: block; width: 100%; margin: 0; text-align: center; } .contact-form .float-icon, .header-style-three .header-lower .btn-box, .header-style-two .search-box-outer, .header-style-two .header-lower .btn-box, .about-us .about-years:before{ display: none; } .header-style-three .nav-outer .cart-btn, .header-style-two .nav-outer .cart-btn{ margin-right: 0; } .main-header .header-top .btn-box a{ margin: 0 -15px; } .main-header .header-top .social-icon-one li{ display: inline-block; float: none; } .banner-section-three .slide-item h1{ font-size: 36px; line-height: 1.2em; } .banner-section-two h1, .banner-section .slide-item h1{ font-size: 32px; } .banner-section-three .slide-item .title, .banner-section-two .title{ font-size: 14px; } .service-detail .prod-tabs .tab-btns .tab-btn{ width: 100%; } .about-us .about-years span{ position: relative; display: inline-block; width: 100%; margin-bottom: 10px; } .about-us .about-years{ padding-left: 0; padding-top: 0; } .feature-tabs .tabs-content .tab .inner-box{ padding: 100px 20px 30px; } .feature-tabs .tabs-content .tab .price{ left: 30px; margin: 0 auto; } .fun-fact-section .count-box, .fun-fact-section .count-box .count-text{ font-size: 54px; } .project-section .filters li{ display: block; } .about-section-two .single-item-carousel .owl-dots{ display: none; } .about-section-two .image-column .image{ padding: 0; } .contact-section-two .contact-info li{ width: 100%; } .contact-form-two{ padding: 40px 20px; } .feature-block-three .icon-box{ position: relative; display: inline-block; margin-bottom: 20px; } .feature-block-three .inner-box{ padding: 0; } .pricing-block-two .price{ font-size: 80px; } .feature-block-two .inner-box{ padding-left: 0; text-align: center; } .feature-block-two .icon{ position: relative; display: inline-block; margin-bottom: 10px; } .banner-section .float-text{ font-size: 60px; top: 70%; } .login-form{ padding: 30px 20px 25px; } .faq-section .image-column .float-text{ font-size: 80px; } } /***********************Old Responsive Codes ends**********************************/ /***********************custom design **********************************/ .breadCrumbWrapper{ background-color: $primary-color; color: white; padding: 15px 10px; .page_title{ font-size: 1.5rem; color: white; font-weight: 600; } p{ color: white; font-size: 0.8rem; font-weight: 600; } } .image_wrapper_services{ max-height: 400px; img{ max-height: 400px; object-fit: cover; width: 100%; border: 4px solid white; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.4); } } .content_container{ h3,h2,h4,h5{ font-weight: 600; font-size: 1.2rem; color: black; text-shadow: 2px 2px 4px rgba(0,0,0,.15); } .image_wrapper{ max-height: 250px; display: block; img{ width: 100%; max-height: 250px; object-fit: cover; display: block; } } .main_content{ p{ font-size: 0.8rem; font-weight: 400; text-align: justify; } } } .content_container_about_us{ h3,h2,h4,h5{ font-weight: 600; font-size: 1.2rem; color: black; text-shadow: 2px 2px 4px rgba(0,0,0,.15); } .image_wrapper{ max-height: 550px; display: block; img{ width: 100%; max-height: 550px; object-fit: cover; display: block; } } .main_content{ p{ text-align: justify; position: relative; font-weight: 400; font-size: 15px; line-height: 24px; color: #8d9297; margin-top: 10px; } ul{ li{ position: relative; font-weight: 400; font-size: 15px; line-height: 24px; color: #8d9297; margin-top: 10px; padding-left: 20px; &:before{ position: absolute; font-family: "Font Awesome 5 Free"; font-weight: 900; left: 0; top: 0px; color: $secondary-color; font-size: 1rem; content: "\f101"; } } } } } .big_text{ font-size: 4rem; font-weight: 600; } .sidebar_section{ background-color: $primary-color; min-height: 400px; color: white; padding: 20px 20px; .common_btn_white{ background-color: white; color: $primary-color; box-shadow: 0px 0px 10px 0px rgba(0,0,0, .1); display: block; width: 100%; padding: 10px 15px; font-size: 1.2rem; font-weight: 400; border: 1px solid white; transition: 0.3s ease-in; cursor: pointer; &:hover{ background-color: $primary-color; border: 1px solid white; color: white; } } } .service_image{ height: 200px; max-height: 200px; img{ height: 100%; width: 100%; min-height: 200px; max-height: 200px; object-fit: cover; } } .brands_image_wrapper{ height: 60px; padding: 0px; a{ display: block; width: 100%; height: 100%; } img{ height: 100%; max-height: 60px; width: 100%; object-fit: contain; display: block; margin: 0px auto; min-height: 60px; } } /***********************custom design ends**********************************/ .form_wrapper_booking{ .form_field_wrapper{ display: block; width: 100%; border: 1px solid rgba(0,0,0,0.15); background-color: white; border-radius: 10px; position: relative; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.05); height: 40px; &.focused{ label{ display: block; top: -5px; left: 20px; z-index: 99; opacity: 1; } .inp_field{ &::placeholder{ opacity: 0; color: white; } } } label{ position: absolute; transition: all 0.3s ease-in; left: 30px; top: 15px; background-color: white; font-size: 0.7rem; font-weight: 600; opacity: 0; z-index: -1; line-height: 10px; margin: 0px; } .inp_field{ display: block; width: 100%; border: none; background-color: white; border-radius: 10px; height: 100%; padding: 0px 10px; font-size: 0.8rem; font-weight: 500; transition: opacity 0.3s ease-in; text-shadow: none; color: #312f2f; &::placeholder{ transition: opacity 0.3s ease-in; color: #312f2f; } } } .form_field_wrapper_dsg_2{ display: block; width: 100%; border: 1px solid rgba(0,0,0,0.15); background-color: white; border-radius: 10px; position: relative; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.05); &.focused{ label{ display: block; top: -5px; left: 20px; z-index: 99; opacity: 1; } .inp_field{ &::placeholder{ opacity: 0; color: white; } } } label{ position: absolute; transition: all 0.3s ease-in; left: 30px; top: 15px; background-color: white; font-size: 0.7rem; font-weight: 600; opacity: 0; z-index: -1; line-height: 10px; margin: 0px; } .inp_field{ display: block; width: 100%; border: none; background-color: white; border-radius: 10px; height: 100%; padding: 5px 10px; font-size: 0.8rem; font-weight: 500; line-height: 23px; &::placeholder{ transition: opacity 0.3s ease-in; color: #312f2f; } } } } .services_selected{ border: 1px solid #f2f2f2; padding: 30px 20px; width: 100%; border-radius: 10px; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.10); display: block; h3,h5{ font-weight: 600; font-size: 1rem; color: black; } p{ color: black; .service_selected{ font-size: 1rem; font-weight: 600; color: $primary-color; @media only screen and (max-width:575px){ font-size: 1rem; } } .comma{ font-size: 1.5rem; font-weight: 600; color: $primary-color; } } } .common_heading{ font-weight: 600; font-size: 1.2rem; color: black; text-shadow: 2px 2px 4px rgba(0,0,0,.15); } .services_wrapper,.packages_wrapper_service{ padding: 10px; background-color: rgba(#f2f2f2,0.4); border: 1px solid rgba(#f2f2f2,0.4); border-radius: 10px; position: relative; transition:background-color 0.1s ease-in; box-shadow: 0px 10px 20px rgba(0, 0, 0, .2); cursor: pointer; label{ color: $primary-color; font-size: 1rem; @media only screen and (max-width:575px){ font-size: 0.8rem; } } .price_text{ color: black; font-size: 1rem; } &.active{ background-color: $primary-color; color: white; label{ color: white; } .price_text{ color: white; } &:after{ height: 30px; width: 100%; bottom: 0px; left: 0px; background-color: darken($primary-color, 5); position: absolute; content: " "; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } } &:hover{ border-color: $primary-color; } } .hiddeninitial{ display: none; } .custom_radio{ display: inline-block; height: 30px; width: 50px; border: 1px solid $primary-color; line-height: 30px; text-align: center; transition: background-color 0.3s ease-in; border-radius: 5px; span{ line-height: 30px; font-weight: 600; font-size: 0.8rem; color: $primary-color; } &:hover,&.active{ background-color: $primary-color; span{ color: white; } &.noSelector{ background-color: $secondary-color; border-color: $secondary-color; } } } .radio_wrapper{ display: none; position: static; } .label_booking{ display: none; } .sum_wrapper{ .title{ font-size: 1.2rem; color: black; font-weight: 600; &.total{ color: $primary-color; font-size: 1.2rem; } } .unit_name{ font-size: 0.8rem; } .price_value{ font-size: 1.2rem; color: black; font-weight: 600; &.total_price{ color: $primary-color; font-size: 2rem; } } } .pay_now_btn{ display: block; width: 100%; background-color: $secondary-color; color: white; border: none; padding: 8px 10px; font-size: 1rem; font-weight: 500; max-width: 300px; margin: 0px 0px 0px auto; border-radius: 10px; &:focus{ outline: none; } } .services_choosed_confirmation{ display: flex; flex-wrap: nowrap; width: 100%; max-width: 600px; .title_wrapper{ width: 150px; padding-right: 15px; font-size: 1rem; text-shadow: 0 20px 10px rgba(0,0,0,0.10); color: black; } .content_wrapper{ width: calc(100% - 150px); } @media only screen and (max-width:575px){ display: block; .title_wrapper,.content_wrapper{ display: block; width: 100%; } .content_wrapper{ margin-top: 10px; } } } .confirmation_page_wrapper{ background-color: #f2f2f2; border-radius: 10px; border-left: 5px solid $secondary-color; padding: 15px 10px; .ttl{ font-size: 1.5rem; text-shadow: 0 20px 10px rgba(0,0,0,0.10); color: black; font-weight: 600; } .content_wrapper{ h5{ font-size: 0.8rem; color: black; font-weight: 400; &.total_label{ font-size: 1rem; color: $primary-color; } } h4{ font-size: 1.2rem; color: black; font-weight: 400; &.total_value{ font-size: 1.5rem; font-weight: 600; color: $primary-color; } } } } .info_wrapper{ .info_text{ font-size: 0.8rem; font-style: italic; } .normal_text{ font-size: 0.8rem; color: black; } } .iframe-wrapper{ background-color: #f2f2f2; border-radius: 10px; border-left: 5px solid $secondary-color; padding: 15px 10px; padding-bottom: 100px; } .custom_btn { background-color: $primary-color; color: white; font-size: 1rem; font-weight: 600; text-transform: uppercase; border-radius: 15px; padding: 5px 15px; display: inline-block; border: none; text-align: center; cursor: pointer; -webkit-transition: -webkit-box-shadow 0.3s ease-in; transition: -webkit-box-shadow 0.3s ease-in; transition: box-shadow 0.3s ease-in; transition: box-shadow 0.3s ease-in, -webkit-box-shadow 0.3s ease-in; &:hover{ color: white; box-shadow: 0px 10px 15px rgba(0,0,0,0.2); } } .thankYouDesign{ .image_wrapper{ img{ max-height: 120px; } } .text-container-thank-you-page{ h3{ display: inline-block; font-size: 2rem; font-weight: 600; position: relative; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15); color: black; } p{ font-size: 0.9rem; font-weight: 500; max-width: 600px; display: block; margin: 0px auto; } } .image_wrapper{ height: 100px; width: 100px; display: inline-block; border: 1px solid #0FB943; border-radius: 100%; padding: 15px; img{ max-height: 70px; object-fit: contain; max-width: 70px; } } } .each_services_design{ margin: 20px 10px; background-color: #f2f2f2; border-bottom: 4px solid $secondary-color; border-radius: 10px; overflow: hidden; .image_block{ height: 200px; width: 100%; img{ max-height: 20px; object-fit: cover; min-height: 200px; } } .content_wrapper{ padding: 10px 15px; h3{ font-size: 1.2rem; font-weight: 600; } p{ font-size: 0.9rem; line-height: 20px; text-align: justify; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; max-height: 108px; /* fallback */ -webkit-line-clamp: 5; /* number of lines to show */ -webkit-box-orient: vertical; height: 108px; text-align: justify; } .text_2{ font-size: 0.9rem; line-height: 20px; text-align: justify; } } } .blog_image_wrapper{ img{ height: 200px; width: 100%; max-height: 200px; object-fit: cover; } } /****************Contact Page***********************/ .contact-form-two{ position: relative; background-color: rgba(0,0,0,0.03); padding: 50px 40px; } .contact-form-two .title-box{ position: relative; margin-bottom: 30px; } .contact-form-two .title-box h4{ position: relative; display: block; font-size: 24px; line-height: 1.2em; color: $secondary-color; margin-bottom: 10px; font-weight: 500; } .contact-form-two .form-group{ position:relative; padding: 0 10px; margin-bottom:20px; } .contact-form-two .form-group:last-child{ margin-bottom: 0; } .contact-form-two .form-group input[type=date], .contact-form-two .form-group input[type=datetime-local], .contact-form-two .form-group input[type=month], .contact-form-two .form-group input[type=time], .contact-form-two .form-group input[type="text"], .contact-form-two .form-group input[type="email"], .contact-form-two .form-group input[type="url"], .contact-form-two .form-group input[type="number"], .contact-form-two .form-group textarea, .contact-form-two .form-group select{ position: relative; display: block; width: 100%; font-size: 16px; color: #999999; line-height: 20px; padding: 10px 20px; border: 1px solid #f1f1f1; background-color: #ffffff; font-weight: 400; height: 50px; border-radius: 5px; -webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; -moz-transition: all 300ms ease; transition: all 300ms ease; } .contact-form-two .form-group input:focus, .contact-form-two .form-group select:focus, .contact-form-two .form-group textarea:focus{ border-color:$secondary-color; } .contact-form-two .form-group select{ cursor:pointer; -webkit-appearance:none; -ms-appearance:none; -o-appearance:none; -moz-appearance:none; background:#ffffff url(../images/icons/icon-select.png) right center no-repeat; } .contact-form-two .form-group textarea{ height: 150px; resize: none; padding: 15px 20px; } .contact-form-two .form-group button{ text-transform: capitalize; padding: 10px 25px; line-height: 20px; font-size: 14px; } .contact-form-two input.error:focus, .contact-form-two select.error:focus, .contact-form-two textarea.error:focus{ border-color:#ff0000; } .contact-form-two label.error{ display:block; font-weight:500; font-size:13px; text-transform:capitalize; line-height:24px; color:#ff0000; padding-top:7px; margin-bottom: 0; } .contact-section-two .contact-info-outer{ position: relative; padding: 50px 0 0; } .contact-section-two .contact-info{ position: relative; } .move_to{ cursor: pointer; } .contact-section-two .contact-info li{ position: relative; width: 25%; float: left; text-align: center; margin-bottom: 50px; @media only screen and (max-width:575px){ width: 48%; } } .contact-section-two .contact-info li p{ display: block; font-size: 14px; line-height: 25px; color: #777777; font-weight: 400; } .contact-section-two .contact-info li strong{ display: block; font-size: 16px; line-height: 25px; color: #156f89; font-weight: 500; } .contact-section-two .contact-info li .icon{ position: relative; display: inline-block; margin-bottom: 10px; height: 50px; width: 50px; text-align: center; font-size: 18px; line-height: 42px; border-radius: 50%; border: 4px solid #ffffff; background-color: $secondary-color; color: #ffffff; box-shadow: 0 0 20px rgba(0,0,0,0.05); } .contact-section-two .contact-info li a{ color: #777777; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .contact-section-two .contact-info li a:hover{ color: $secondary-color; } .contact-section-two .social-icon-three{ position: relative; padding: 10px 20px; box-shadow: 0 0 20px rgba(0,0,0,0.05); } .mapouter{ position:relative; text-align:right; iframe{ height: 400px; width: 100%; margin-bottom: -6px; } } .gmap_canvas { overflow:hidden; background:none!important; } .contactUsInformation{ .icon-wrapper-contact-us{ display: inline-block; cursor: pointer; width: 50px; height: 50px; border-radius: 50%; text-align: center; position: relative; text-decoration: none; z-index: 1; color: white; background-color: $primary-color; text-align: center; &:after{ pointer-events: none; position: absolute; width: 100%; height: 100%; border-radius: 50%; content:''; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } &:before{ speak: none; font-size: 48px; line-height: 90px; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; display: block; -webkit-font-smoothing: antialiased; } i{ font-size: 1.2rem; line-height: 50px; color: white; } } .bold-text{ font-size: 1.2rem; font-weight: 600; } /* Effect 7 */ .hovicon.effect-7 { box-shadow: 0 0 0 4px rgba($primary-color, 1); -webkit-transition: background 0.2s, color 0.2s; -moz-transition: background 0.2s, color 0.2s; transition: background 0.2s, color 0.2s; } .hovicon.effect-7:hover, .hovicon.effect-7:hover i { color: white; } .hovicon.effect-7:after { top: -8px; left: -8px; padding: 8px; z-index: -1; opacity: 0; } /* Effect 7a */ .hovicon.effect-7.sub-a:after { box-shadow: 0 0 0 rgba($primary-color, 1); -webkit-transition: opacity 0.2s, box-shadow 0.2s; -moz-transition: opacity 0.2s, box-shadow 0.2s; transition: opacity 0.2s, box-shadow 0.2s; } .hovicon.effect-7.sub-a:hover:after { opacity: 1; box-shadow: 3px 3px 0 rgba($primary-color, 1); } .hovicon.effect-7.sub-a:before { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); opacity: 0.7; -webkit-transition: -webkit-transform 0.2s, opacity 0.2s; -moz-transition: -moz-transform 0.2s, opacity 0.2s; transition: transform 0.2s, opacity 0.2s; } .hovicon.effect-7.sub-a:hover:before { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; } /* Effect 7b */ .hovicon.effect-7.sub-b:after { box-shadow: 3px 3px rgba($primary-color, 1); -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transition: opacity 0.2s, -webkit-transform 0.2s; -moz-transition: opacity 0.2s, -moz-transform 0.2s; transition: opacity 0.2s, transform 0.2s; } .hovicon.effect-7.sub-b:hover:after { opacity: 1; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } .hovicon.effect-7.sub-b:before { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); opacity: 0.7; -webkit-transition: -webkit-transform 0.2s, opacity 0.2s; -moz-transition: -moz-transform 0.2s, opacity 0.2s; transition: transform 0.2s, opacity 0.2s; } .hovicon.effect-7.sub-b:hover:before { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; } /****************Animation on Hover Outer Container****************************/ .icons-wrapper-contact-page-wrapper{ &:hover{ .hovicon.effect-7, .hovicon.effect-7 i { color: white; } .hovicon.effect-7.sub-a:after { opacity: 1; box-shadow: 3px 3px 0 rgba($primary-color, 1); } .hovicon.effect-7.sub-b:after { opacity: 1; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } .hovicon.effect-7.sub-b:after { opacity: 1; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } .hovicon.effect-7.sub-b:before { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; } } } } .contact_wrapper{ box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.10); border-bottom: 2px solid $secondary-color; .icons-wrapper-contact-page-wrapper{ p{ font-size: 0.8rem; } } } .location_wrapper{ background-color: $primary-color; color: white; font-weight: 600; font-size: 0.8rem; padding: 8px 15px; h3{ color: white; font-weight: 600; font-size: 1.5rem; } } /****************Animation on Hover Outer Container ends****************************/ /****************Contact Page ends***********************/ /****************gallery design ***********************/ .gallery_design{ .image_wrapper{ height: 200px; width: 100%; object-fit: cover; overflow: hidden; display: block; position: relative; //border: 2px solid white; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.20); img{ height: 200px; width: 100%; object-fit: cover; } &.big_image{ height: 424px; width: 100%; object-fit: cover; img{ height: 424px; width: 100%; object-fit: cover; } } &:after{ content: " "; position: absolute; bottom: 0px; left: 0px; width: 100%; height: 100px; z-index: 8; background-image: linear-gradient(to top, rgba(0,0,0,1) , rgba(0,0,0,0.6) 40%,rgba(0,0,0,0.3),rgba(0,0,0,0.2),rgba(0,0,0,0.1),rgba(0,0,0,0),);; } .info_wrapper{ position: absolute; bottom: 10px; left: 0px; max-width: 100%; padding: 0px 10px; z-index: 9; span{ color: white; font-size: 1rem; color: white; font-weight: 600; text-transform: uppercase; } } } } /****************gallery design ends***********************/ /****************************** parsely error design ends *************************************/ .parsley-errors-list.filled { position: absolute; background-color: none; font-size: 0.7rem; color: #f96a6a !important; list-style: none; display: block; top: 100%; left: 20px; border: none !important; } .parsley-errors-list.filled li { color: #f96a6a; font-size: 0.7rem; border: none !important; } /****************************** parsely error design ends *************************************/ .form-container-login{ .form-wrapper{ width: 100%; display: flex; flex-wrap: nowrap; label{ display: inline-block; height: 40px; width: 40px; background-color: $primary-color; color: white; border-top-left-radius: 5px; border-bottom-left-radius: 5px; text-align: center; i{ line-height: 40px; } } input,select{ width: calc(100% - 30px); border: 1px solid rgba(#efefef,0.7); box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1); height: 40px; line-height: 40px; color: black; outline: none; font-size: 0.8rem; padding-left: 20px; border-top-right-radius: 5px;; border-bottom-right-radius: 5px;; &:focus{ outline: none; border: 1px solid $primary-color; } &::placeholder{ font-size: 0.7rem; line-height: 40px; } } } } .hiddenInitial{ display: none; } .form-section { display: none; } .form-section.current { display: inherit; } .common_button{ background-color: $primary-color; color: white; font-size: 0.8rem; font-weight: 600; } /**********************Profile Page*********************************/ .loginBtn{ cursor: pointer; } .each-address-container{ padding: 10px; border-radius: 10px; margin: 10px 10px; transition: box-shadow 0.3s ease-in; //background-color: rgba(silver,0.1); //background-color: #f8f8f8; background-color: white; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2); transition: all 0.3s ease-in; position: relative; min-height: 130px; &:hover{ box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.3); transform: translateY(-10px); .header-block{ h3{ font-weight: 600; } } } .header-block{ h3{ font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; font-weight: 600; max-height: 73px; /* fallback */ -webkit-line-clamp: 2; /* number of lines to show */ -webkit-box-orient: vertical; text-transform: uppercase; } &.one-line-header{ h3{ font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; max-height: 21px; /* fallback */ -webkit-line-clamp: 1; /* number of lines to show */ -webkit-box-orient: vertical; } } } &.active{ background-color: $primary-color; .header-block{ h3{ color: white; } } .address-block{ span{ color: white; } } .edit-address, .delete-address{ color: white; } } &:hover{ cursor: pointer; background-color: $primary-color; .header-block{ h3{ color: white; } } .address-block{ span{ color: white; } } .edit-address,.delete-address{ color: white; } } .address-block{ span{ font-weight: 400; font-size: 0.8rem; display: inline-block; line-height: 15px; } } .edit-address,.delete-address{ position: absolute; text-align: center; bottom: 0px; right: 0px; border-radius: 5px; height: 30px; width: 30px; background-color: transparent; //box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3); color: $primary-color ; font-size: 0.8rem; transition: all 0.3s ease-in; cursor: pointer; i{ line-height: 30px; } &:hover{ box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3); } } .delete-address{ bottom: unset; top: 10px; } .image-block{ position: relative; //border: 1px solid rgba($text-color,0.3); min-height: 100px; max-height: 100px; img{ display: block; height: 100%; width: 100%; min-height: 100px; max-height: 100px; object-fit: contain; //filter: grayscale(100%); } } } .aside-wrapper-main{ background-color: white; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1); padding: 10px ; .main-contents{ ul{ li{ display: inline-block; width: 100%; text-align: left; margin-bottom: 4px; position: relative; a{ display: inline-block; width: 100%; font-size: 0.8rem; font-weight: 600; padding: 10px 10px; position: relative; z-index: 3; color: $primary-color; } &::before{ content: " "; position: absolute; top: 0px; height: 100%; left: 0; width: 0px; opacity: 0; transition: width 0.3s ease-in, opacity 0.1s ease; background-color: $primary-color; } &:hover{ color: white; a{ color: white; } &:before{ width: 100%; opacity: 1; } } &:last-child{ margin-bottom: 0px; } &.active{ color: white; a{ color: white; } &:before{ width: 100%; opacity: 1; } } } } } } .title-wrapper{ .image-wrapper{ .profile-icon{ width: 80px; height: 80px; } } } .info-container-profile{ background-color: white; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1); padding: 10px ; min-height: 60vh; } .inputWrapper{ .common-input{ width: 100%; border: 1px solid #E5E5E5; color: $text-color; font-size: 0.8rem; padding: 8px 10px; border-radius: 5px; font-weight: 500; &::placeholder{ font-size: 0.8rem; color: $text-color; } &:focus{ border-color: $color_gold; color: $color_gold; outline: none; box-shadow: 0px 0px 10px 0px rgba($color_gold,0.2); &::placeholder{ color: $color_gold; } } &:disabled{ background-color: #eeeeee; cursor: not-allowed; } } label{ font-size: 0.8rem; font-weight: 600; } } .addMoreAddress{ display: inline-block; height: 120px; width: 90%; background-color: white; padding: 10px; border-radius: 10px; margin: 10px 10px; transition: box-shadow 0.3s ease-in; box-shadow: 0px 0px 10px 0px rgba($color_gold,0.3); position: relative; cursor: pointer; .sbs-cnt{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } transition: all 0.3s ease-in; &:hover{ box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.3); transform: translateY(-10px); .header-block{ h3{ font-weight: 600; } } } } .table_wrapper_orders{ width: 100%; max-width: 100%; overflow-y: auto; table{ min-width: 500px; } tbody{ td{ font-size: 0.8rem; font-weight: 500; .view_detail_btn{ border-radius: 5px; background-color: $primary-color; color: white; border: none; padding: 2px 10px; display: inline-block; cursor: pointer; font-size: 0.7rem; outline-color: $primary-color; } .active_inactive{ border-radius: 5px; display: inline-block; background-color: #666; color: white; border: none; padding: 5px 10px; cursor: pointer; &.active{ background-color: #009b01; } &.inactive{ background-color: $primary-color; } &.pending { background-color: #f78800; } &.inprogress{ background-color: #666; } &.completed{ background-color: #009b01; } &.canceled{ background-color: $secondary-color; } } } } @media only screen and (max-width:575px){ thead{ th{ font-size: 0.9rem; } } tbody{ td{ font-size: 0.8rem; .view_detail_btn{ font-size: 0.7rem; } .active_inactive{ font-size: 0.7rem; } } } } } .modal-backdrop { width: 100% !important; height: 100% !important; z-index: 99998; background-color: rgba(0, 0, 0, 0.8) !important; opacity: 1 !important; } .modal { width: 100% !important; height: 100% !important; z-index: 999999; position: fixed; } .max1200{ max-width: 1200px; @media only screen and (max-width: 1200px){ max-width: auto; } } .min1200{ min-width: 1200px; @media only screen and (max-width: 1200px){ min-width: 1000px; } @media only screen and (max-width: 1000px){ min-width: 800px; } @media only screen and (max-width: 800px){ min-width: auto; } } .each_af_features{ position: relative; display:flex; flex-wrap: nowrap; padding: 20px 5px 20px 10px; border: 1px solid darken(#f2f2f2, 10); min-height: 100px; .icon_container{ width: 60px; min-width: 60px; text-align: center; margin: auto 0px; i{ font-size: 2rem; color: $primary-color; } } .text_container{ margin: auto 0px; h3{ font-size: 0.8rem; color:#3f4d50; margin-bottom: 0px;; } p{ font-size: 0.8rem; margin-bottom: 0px;; } } } .packages_caroseul_dsg{ .each_package_container{ margin: 20px 10px; } } .each_package_container{ position: relative; background-color: #f2f2f2; border-radius: 10px; margin: 60px 0px 80px 0px; transition: box-shadow 0.3s ease-in; &:hover{ box-shadow: 0 0px 10px rgba(0,0,0,.4); } &.active{ box-shadow: 0 0px 15px rgba(0,0,0,.3); } .content_package{ position: relative; top: 0px; left: 0px; height: 100%; width: 100%; color: black; display: flex; flex-wrap: wrap; flex-direction: column; padding: 15px; min-height: 400px; .btn_container{ margin-top: auto; margin-bottom: 0px; } h3{ font-size: 1.5rem; } } @media only screen and (max-width: 767px){ margin: 0px; } } .points_container{ ul{ padding: 0px; li{ display: inline-block; width: 100%; position: relative; padding: 0px 0px 0px 25px; font-size: 0.8rem; color: $text-color; font-weight: 400; &:before, &::after{ position: absolute; font-family: "Font Awesome 5 Free"; font-weight: 900; left: 0; top: 0px; color: $primary-color; font-size: 1rem; } &.included{ &:before{ content: '\f00c'; } } &.excluded{ &:before{ content: '\f00d'; color: $secondary-color; } } } } } .each_service_package{ background-color: #f5f5f5; padding: 20px 10px; text-align: center; min-height: 200px; .icon_container{ height: 100px; width: 100%; img{ height: 100%; width: 100%; object-fit: contain; min-height: 80px; max-height: 80px; } } .text_container{ margin-top: 10px; h3{ font-size: 1rem; font-weight: 600; } } } .each_brand_category{ border: 1px solid #f5f5f5; background-color: white; padding: 20px 10px; text-align: center; min-height: 100px; .icon_container{ height: 80px; width: 100%; img{ height: 100%; width: 100%; object-fit: contain; min-height: 80px; max-height: 80px; } } .text_container{ margin-top: 10px; display: none; h3{ font-size: 1rem; font-weight: 600; color: #555555; } } &:hover{ box-shadow: 0px 0px 10px 0px rgba(black,0.4); } } /**********************Profile Page ends*********************************/ /**********************New Lauout*********************************/ .et-icon-box-container[data-gap="8"] { grid-row-gap: 8px; grid-column-gap: 8px; } .et-item-set[data-gap="8"] .et-item { padding-left: 4px; padding-right: 4px; padding-bottom: 8px; } .et-item-set[data-gap="8"] .et-item { padding-left: 4px; padding-right: 4px; padding-bottom: 8px; } .et-icon-box-container { position: relative; display: -ms-grid; display: grid; grid-row-gap: 1px; grid-column-gap: 1px; justify-items: stretch; margin-left: 0 !important; margin-right: 0 !important; padding: 1px 0.5px 1px 1px; } .et-icon-box { position: relative; padding: 48px 32px; } .et-icon-box { position: relative; display: flex; flex: 1 0 auto; justify-content: center; transition: color 150ms ease-out, background-color 150ms ease-out, box-shadow 150ms ease-out; } .et-make{ display: flex; justify-content: center; text-align: center; padding: 12px 8px 12px 8px; justify-self: end; } @media only screen and (min-width: 575px){ .et-make-container.column-8 { grid-template-columns: repeat(6, 6fr) !important; } } @media only screen and (max-width: 768px){ .et-make-container.column-8 { grid-template-columns: repeat(6, 6fr) !important; } } @media only screen and (max-width: 675px){ .et-make-container.column-8 { grid-template-columns: repeat(5, 5fr) !important; } } @media only screen and (max-width: 575px){ .et-make-container.column-8 { grid-template-columns: repeat(4, 4fr) !important; } } @media only screen and (max-width: 475px){ .et-make-container.column-8 { grid-template-columns: repeat(3, 3fr) !important; } } @media only screen and (max-width: 375px){ .et-make-container.column-8 { grid-template-columns: repeat(2, 2fr) !important; } } @media only screen and (min-width: 1280px){ .et-make-container.column-8 { grid-template-columns: repeat(8, 8fr) !important; } } .banner_wrapper{ height: 500px; position: relative; &:before{ content: " "; position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; background-color: rgba($primary-color, 0.5); z-index: 3; } img{ min-height: 500px; width: 100%; object-fit: cover; max-height: 500px; } .banner_content{ z-index: 4; position: absolute; top: 50%; left: 0%; width: 100%; transform: translateY(-50%); } @media only screen and (max-width: 767px){ height: 400px; img{ max-height: 400px; min-height: 400px; } } } .search_wrapper{ max-width: 500px; position: relative; .search_box_design{ display: flex; flex-wrap: nowrap; width: 100%; background-color: white; border-radius: 10px; padding: 5px; &:focus,&.focused{ border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } } .icon_wrapper{ width: 50px; text-align: center; i{ line-height: 40px; } } .search_text{ width: calc(100% - 150px); input{ height: 40px; border: none; color: #555; display: inline-block; width: 100%; &::placeholder{ font-size: 0.8rem; } } @media only screen and (max-width: 575px){ width: calc(100% - 90px); } } .btn_container{ button{ border-radius: 5px; width: 100px; color: white; font-weight: 600; font-size: 1rem; height: 40px; border: none; background-color: $primary-color; transition: background-color 0.3s ease-in; &:hover{ background-color: $secondary-color; } @media only screen and (max-width: 575px){ width: 80px; } } } @media only screen and (max-width: 767px){ display: block; margin: 0px auto; } } .search_result_container{ position: absolute; top: 100%; left: 0px; width: 100%; background-color: white; box-shadow: 0px 10px 20px rgba(0,0,0,.3); border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; overflow: hidden; z-index: 2; } .search_result_container_inner .list_design{ padding: 10px 0px; li{ transition: background-color 0.1s ease; cursor: pointer; border-bottom: 1px solid #f5f5f5; a{ padding: 5px 20px; display: block; color: #555555; width: 100%; } &:hover{ background-color: $primary-color; color:white; a{ color: white; } } } max-height: 300px; overflow-x: hidden; overflow-y: auto; } .call_to_action_design{ max-width: 300px; display: block; margin: 0px auto; .text_container_call_to_action{ background-color: white; border-top-left-radius: 10px; border-top-right-radius: 10px; padding: 20px; ul{ padding-left: 0px; li{ display: block; position: relative; padding: 2px 0px 2px 25px; font-size: 0.8rem; &:before{ content: " "; position: absolute; content: '\f00c'; position: absolute; font-family: "Font Awesome 5 Free"; font-weight: 900; left: 0; color: $primary-color; } @media only screen and (max-width:575px){ font-size: 1rem; } } } } .btn_container_call_to_action{ background-color: #f2f2f2; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; padding: 20px 20px; } @media only screen and (max-width: 767px){ max-width: 100%; } @media only screen and (max-width: 575px){ max-width: 100%; } } .poluar_services_list_wrapper{ a{ display: block; box-shadow: 0 2px 5px 0 rgba(0,0,0,.1); margin-bottom: 10px; padding: 8px 10px; border-radius: 10px; color: #333; background-color: white; &:hover{ color: $secondary-color; span{ color: $secondary-color; } } } .poluar_services_list{ display: flex; flex-wrap: nowrap; margin: 0px 5px; .image_wrapper{ width: 80px; text-align: center; height: 40px; } .text_container{ width: calc(100% - 80px); color: black; } } } .border_radius_10{ border-radius: 10px; } .white_dsg{ ul{ li{ a{ color: white !important; &:hover{ color: white; } } } } } .social-icon-four{ display: flex; flex-wrap: nowrap; li{ text-align: center; margin: 0px 2px; a{ display: inline-block; height: 30px; width: 30px; background-color: $primary-color; color: white; transition : background-color 0.3s ease-in; span{ line-height: 30px; } &:hover, &:focus{ background-color: darken($primary-color, 10); } } } } .logo_img{ position: relative; display: block; min-height: 30px; min-width: 200px; overflow: visible; .abs_logo{ position: absolute; bottom: -10px; left: 0px; min-height: 20px; max-width: 300px; max-height: 90px; object-fit: contain; padding: 0px 10px; z-index: 2222; background-color: white; } } .nav_design_custom{ .navbar-nav{ .nav-item{ position: relative; &:before{ content: " "; height: 20px; width: 1px; background-color: #b5b5b5; position: absolute; right: 0px; top: 50%; transform: translateY(-50%); } &.no-line{ &:before{ display: none; } } .nav-link{ text-transform: uppercase; font-weight: 600; font-size: 0.8rem; } @media only screen and (max-width: 991px){ &:before{ display: none; } } } } } .sticky-header-top{ position: fixed; top: 0; width: 100%; z-index: 999; background-color: white; box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, .2); } .our_partners_wrapper{ .item{ margin: 0px 10px; } .each_item_wrapper{ //margin: 10px 0px; height: 80px; //border: 1px solid #f2f2f2; text-align: center; background-color: transparent; justify-content: center; padding: 10px; display: flex !important; //box-shadow: 0px 0px 10px 0px rgba(black,0.2); img{ max-height: 60px; min-height: 60px; width: 100%; height: 100%; object-fit: contain; display: inline-block; justify-content: center; align-self: center; line-height: 80px; filter: grayscale(1); transition: filter 0.3s ease-in; } &:hover{ img{ filter: none; } } } } .logo_footer{ a{ color: white; line-height: 0px; text-transform: uppercase; &:hover{ color: white; }; span{ line-height: 0px; } } } .packages_caroseul_dsg_dots{ .owl-theme .owl-nav.disabled+.owl-dots { margin-top: 10px; } .owl-theme .owl-dots, .owl-theme .owl-nav { text-align: center; -webkit-tap-highlight-color: transparent; } .owl-theme .owl-dots .owl-dot { display: inline-block; zoom: 1; } .owl-carousel .owl-nav .owl-prev, .owl-carousel .owl-nav .owl-next, .owl-carousel .owl-dot { cursor: pointer; cursor: hand; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { background: #869791; } .owl-theme .owl-dots .owl-dot span { width: 10px; height: 10px; margin: 5px 7px; background: #D6D6D6; display: block; -webkit-backface-visibility: visible; transition: opacity .2s ease; border-radius: 30px; } } .border-sm-left{ @media only screen and (min-width: 575px){ border-left: 1px solid #d5d5d5; } } .border-sm-right{ @media only screen and (min-width: 575px){ border-right: 1px solid #d5d5d5; } } .btn-primary{ background-color: $primary-color !important; border-color: $primary-color !important; } .hidden-inital, .hidden_inital{ display: none; } .dropdown_wrapper{ position: relative; display: block; &:hover{ .dropdown_container{ display: block; } } } .dropdown_container{ position: absolute; top: 100%; left: 0px; width: 300px; background-color: white; box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.6); padding: 10px; border-radius: 5px; z-index: 2; &.dropdown_sm{ max-width: 200px; } } .dropdown_inner{ max-height: 400px; overflow-y: auto; overflow-x: hidden; ul{ padding-left: 0px; li{ display: block; border-top: 1px solid #f2f2f2; cursor: pointer; font-size: 0.8rem; padding: 4px 10px; &:last-child{ border-bottom: 1px solid #f2f2f2; } &:hover{ font-weight: 600; font-size: 0.9rem; color: $primary-color; } &.no_border{ border: none; } } } } ::-webkit-scrollbar{ width: 10px; background-color: #f2f2f2; } ::-webkit-scrollbar-track{ background-color: #f2f2f2; } ::-webkit-scrollbar-thumb { background-color: $primary-color; &:hover{ background-color: darken($primary-color, 10); } } .dropdown_inner::-webkit-scrollbar{ width: 3px; background-color: #f2f2f2; } .dropdown_inner::-webkit-scrollbar-track{ background-color: #f2f2f2; } .dropdown_inner::-webkit-scrollbar-thumb { background-color: $primary-color; box-shadow: 0px 0px 2px 0px rgba(white, .5); &:hover{ background-color: darken($primary-color, 10); } } .text-underline{ text-decoration: underline; } .service_page_design{ .content-wrapper{ .desc{ p{ font-size: 0.8rem; } } } } /**********************New Layout ends*********************************/ /***********************breadcrumb **********************************/ .breadCrumbWrapper{ background-color: $primary-color; color: white; padding: 15px 10px; .page_title{ font-size: 1.5rem; color: white; font-weight: 600; } p{ color: white; font-size: 0.8rem; font-weight: 600; } } .left_side_outer{ display: block; position: relative; &:before{ content: " "; position: absolute; height: 100%; width: 100%; top: 0px; left: 0px; background-position: bottom; background-repeat: no-repeat; background-size: contain; } } /*****************breadcrumb ends**************************/ .sidebar-page-container .content-side, .sidebar-page-container .sidebar-side{ margin-bottom:10px; } /*****************Side Bar Design Car Description**************************/ .sidebar-inner{ border-radius: 10px; background-color: white; padding: 30px 10px; } .sidebar-dsg-1{ .side-heading{ font-size: 1.5rem; color: $primary-color; font-weight: 600; } .side-text-1{ font-size: 1rem; color: lighten($primary-color, 5); font-weight: 400; } .side-text-2{ font-size: 0.8rem; color: $color-dark; font-weight: 400; font-style: italic; } .call-btn-design-side{ display: block; width: 100%; font-size: 1.2rem; background-color: $primary-color; color: white; padding: 8px 8px; border-radius: 40px; .icon-container{ background-color: white; //display: inline-block; height: 30px; width: 30px; color: $primary-color; text-align: center; border-radius: 100%; float: left; i{ text-align: center; font-size: 0.8rem; line-height: 30px; display: block; } } } } .content-wrapper{ h3{ color: #009b01; font-weight: 500; } &.content-wrap-2{ h3{ font-size: 1rem; } } ul{ li{ position: relative; display: block; color: #000000; margin-top: 10px; font-weight: 500; display: flex; flex-wrap: nowrap; text-align: left; .counter-design{ height: 30px; min-width: 30px; line-height: 30px; font-size: 0.9rem; border: 1px solid #009b01; border-radius: 100%; display: inline-block; text-align: center; color: #009b01; font-weight: 500; margin-right: 15px; } .counter-content{ display: inline-block; margin-top: 5px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.10); } } } .image-download-app{ display: flex; flex-wrap: nowrap; a{ img{ max-width: 150px; display: block; margin-right: 5px; } } @media only screen and (max-width: 575px){ justify-content: center; } } .download-app-sidebar{ display: flex; flex-wrap: nowrap; img{ display: block; width: 100%; object-fit: contain; max-height: 40px; } } } .tabcontent{ display: none; } .navigation-header-wrapper{ text-align: center; width: 100%; overflow-x: auto; .navigation-header-inner{ min-width: 400px; text-align: center; margin-bottom: 15px; border-bottom: 1px solid $primary-color; ul{ display: inline-block; text-align: center; justify-content: center; margin: 0 auto; li{ display: inline-block; background-color: white; border: 1px solid $primary-color; padding: 10px 15px; cursor: pointer; border-bottom: none; border-top-left-radius: 10px; border-top-right-radius: 10px; &.active{ background-color: $primary-color; color: white; } @media only screen and (max-width: 575px){ padding: 10px 5px; font-size: 0.7rem; } } } } } .tabcontent{ .list-design{ padding-left: 25px; li{ display: inline-block; width: 48%; padding: 4px 10px 4px 0px; color: $color-dark; .list-content{ display: flex; width: 100%; } i{ min-width: 10px; } i{ margin-right: 10px; color: $primary-color; } } } } #compareModal{ .table-wrapper{ max-width: 100%; overflow-x: auto; table{ width: 100%; min-width: 500px; thead{ background: #009b01; color: #fff; tr{ th:nth-child(1) { text-align: left; } th{ border: 1px solid #ddd; padding: 10px; text-align: center; font-size: 0.8rem; } } } tbody{ tr{ td:nth-child(1) { text-align: left; } td{ border: 1px solid #ddd; padding: 15px 10px; text-align: center; font-size: 0.8rem; font-weight: 500; color: #8c979e; b{ color: #009b01; font-size: 1rem; margin-right: 5px; } } .closeStyle{ color: $secondary-color; } .tickStyle{ color: $primary-color; } &:nth-child(even) { background: #f1f1f1; } } } .totals { td:nth-child(1) { border: none; } } .buttonsRows{ td{ border: none; background: white; } } } } } #compareModal{ @media only screen and (max-width:991px){ .modal-dialog{ max-width: 100%; } } } .banner_image_inner{ border-radius: 10px; overflow: hidden; background-color: white; img{ border-radius: 10px; width: 100%; height: auto; max-height: 700px; } } .top_models_we_repair{ h3{ font-size: 0.8rem; color: black; text-align: center; font-weight: 600; } ul{ text-align: center; margin: auto; display: block; list-style-type: none; width: 100%; margin-bottom: 15px; li{ display: inline-block; width: 48%; margin-top: 5px; -webkit-transition: .5s; transition: .5s; font-weight: 600; color: black; font-size: 0.7rem; cursor: pointer; @media only screen and (max-width: 991px){ width: 20%; } @media only screen and (max-width: 575px){ width: 24%; } @media only screen and (max-width: 425px){ width: 24%; } @media only screen and (max-width: 375px){ width: 32%; } .image_wrapper_top_models{ border: 1px solid #ddd; background: transparent; border-radius: 10px; display: block; position: relative; height: 60px; overflow: hidden; img{ max-height: 60px; min-height: 60px; width: 100%; object-fit: contain; } .model_title{ position: absolute; display: block; text-align: center; width: 100%; padding: 10px; top: -40px; transform: translateY(-50%); transition: transform 0.3s ease-in; color: white; } &:before{ background-color: $primary-color; height: 0px; width: 0px; content: " "; top: 50%; left: 50%; transform: translate(-50%, -50%); position: absolute; opacity: 0; transition: height 0.1s ease-in, width 0.1s ease-in; } &:hover{ &:before{ height: 100%; width: 100%; opacity: 1; } .model_title{ top: 50%; } } } @media only screen and (max-width:425px){ display: none; } } } } .form_wrapper_booking{ .form_field_wrapper{ display: block; width: 100%; border: 1px solid rgba(0,0,0,0.15); background-color: white; border-radius: 10px; position: relative; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.05); height: 40px; outline: none; &.focused{ label{ display: block; top: -5px; left: 20px; z-index: 99; opacity: 1; } .inp_field{ &::placeholder{ opacity: 0; color: white; } } } label{ position: absolute; transition: all 0.3s ease-in; left: 30px; top: 15px; background-color: white; font-size: 0.7rem; font-weight: 600; opacity: 0; z-index: -1; line-height: 10px; margin: 0px; } .inp_field{ display: block; width: 100%; border: none; background-color: white; border-radius: 10px; height: 100%; padding: 0px 10px; font-size: 0.8rem; font-weight: 500; transition: opacity 0.3s ease-in; text-shadow: none; color: #312f2f; &::placeholder{ transition: opacity 0.3s ease-in; color: #312f2f; } &:focus{ outline: none; } &:disabled,&:read-only{ cursor: not-allowed; background-color: #eeeeee; } } } .form_field_wrapper_dsg_2{ display: block; width: 100%; border: 1px solid rgba(0,0,0,0.15); background-color: white; border-radius: 10px; position: relative; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.05); &.focused{ label{ display: block; top: -5px; left: 20px; z-index: 99; opacity: 1; } .inp_field{ &::placeholder{ opacity: 0; color: white; } } } label{ position: absolute; transition: all 0.3s ease-in; left: 30px; top: 15px; background-color: white; font-size: 0.7rem; font-weight: 600; opacity: 0; z-index: -1; line-height: 10px; margin: 0px; } .inp_field{ display: block; width: 100%; border: none; background-color: white; border-radius: 10px; height: 100%; padding: 5px 10px; font-size: 0.8rem; font-weight: 500; line-height: 23px; &::placeholder{ transition: opacity 0.3s ease-in; color: #312f2f; } } } } .cursor-pointer{ cursor: pointer; } .editInfoBtn{ display: inline-block; i{ font-size: 16px; } } .hiddenInitial{ display: none; } .noselect { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Old versions of Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */ } .mt_custom_profile{ margin-top: 12px; } .info-text{ font-size: 0.8rem; font-weight: 600; font-style: italic; } .select2-container.select2-container--open { width: 100% !important; z-index: 9999999 !important; } .termsAndConditionsWrapper{ position: relative; display: block; background-color: white; padding: 20px; &:before{ content: " "; position: absolute; height: 100%; width: 100%; background-color: #f2f2f2; top: 0; left: 0px; //clip-path: polygon(0 15%, 100% 54%, 100% 100%, 0 100%); } } .termsAndConditionsInner{ position: relative; display: block; background-color: white; max-width: 900px; margin: 0px auto; padding: 30px; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25); } .static-page-description{ margin-top: 10px; margin-bottom: 100px; color: darken(#e5e5e5, 40); p{ color: darken(#e5e5e5, 40); } h4{ font-weight: 400; font-size: 1.5rem; color: black; } p{ text-align: justify; } ul{ list-style: none; padding-left: 35px; margin-top: 30px; li{ margin-bottom: 30px; display: block; position: relative; color: darken(#e5e5e5, 40); text-align: justify; h3{ font-size: 1rem; text-align: left; } &::before{ height: 10px; width: 10px; top: 6px; left: -20px; position: absolute; content: " "; background-color: #000000; } p{ color: darken(#e5e5e5, 40); } ul{ list-style: none; padding-left: 70px; li{ margin-bottom: 10px; display: block; position: relative; &::before{ height: 12px; width: 12px; top: 5px; left: -20px; position: absolute; content: " "; background-color: #666666; border: 1px solid #666666; border-radius: 100%; } &::after{ height: 4px; width: 4px; top: 9px; left: -16px; position: absolute; content: " "; background-color: white; border-radius: 100%; } } } } } } .content_wrapper_service_page{ p{ font-size: 0.8rem; } h2,h3,h4{ font-size: 1.2rem; font-weight: 600; color: #3f4d50; } h2{ font-size: 2rem; } h5,h6{ font-size: 1rem; font-weight: 500; color: black; } a{ color: $primary-color; } ul{ li{ position: relative; display: block; padding-left: 20px; line-height: 25px; &:before{ position: absolute; font-family: "Font Awesome 5 Free"; font-weight: 900; left: 0; top: 0px; color: $secondary-color; font-size: 1rem; content: "\f101"; } } } } .landing_page{ .content_landing_page{ max-width: 500px; margin: 0px auto; } } .pay_at_location_btn { display: block; width: 100%; background-color: #000000; color: white; border: none; padding: 8px 10px; font-size: 1rem; font-weight: 500; max-width: 300px; margin: 0px 0px 0px auto; border-radius: 10px; } .process_highlight{ ul{ padding: 0px; li{ display: inline-block; width: 100%; position: relative; padding: 0px 0px 0px 25px; font-size: 0.8rem; color: $text-color; font-weight: 400; @media only screen and (max-width:767px){ text-align: left !important; } &:before, &::after{ position: absolute; font-family: "Font Awesome 5 Free"; font-weight: 900; left: 0; top: 0px; color: $secondary-color; font-size: 1rem; } &.included{ &:before{ content: '\f00c'; } } &.excluded{ &:before{ content: '\f00d'; color: $secondary-color; } } } } } .close_btn_modal{ background-color: transparent; color: black; text-align: center; border-radius: 100%; height: 30px; width: 30px; display: inline-block; position: absolute; top: 20px; right: 30px; cursor: pointer; z-index: 99; i{ line-height: 30px; } } #close_btn_modal, .close_btn_modal_exit_intent { width: 25px; height: 25px; background-color: transparent; position: absolute; top: 0px; right: -35px; cursor: pointer; z-index: 99999999; .cross_line1 { height: 40px; width: 2px; margin-left: 12px; background-color: white; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.4); transform: rotate(45deg); z-index: 1; } .cross_line2 { height: 40px; width: 2px; background-color: white; transform: rotate(90deg); Z-index: 2; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.4); } &.bg_secondary_line{ .cross_line1, .cross_line2{ background-color: $secondary-color; } } @media only screen and (max-width: 767px){ right: 15px; top: 10px; } } .each_testimonial{ margin: 10px 15px; .testimonial_head{ background-color: white; padding: 20px 15px 40px 15px; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .1); border-radius: 15px; } .testimonial_header{ } .testimonial_data{ min-height: 120px; p{ font-weight: 400; font-size: 0.8rem; } } .testimonial_footer{ margin-top: -40px; h3{ color: $primary-color; font-size: 1rem; font-weight: 600; } span{ color: #f79028; } } .image_wrapper{ height: 80px; width: 80px; display: block; margin: 0px auto; border: 1px solid #d5d5d5; border-radius: 100%; background-color: white; padding: 4px; img{ object-fit: cover; min-height: 70px; max-height: 70px; width: 70px; display: inline-block; border-radius: 100%; } } .client_data{ } } .smiley_design{ //border: 2px solid $secondary-color; padding: 5px; border-radius: 100%; img{ max-height: 80px; } } .smily_main_wrapper{ box-shadow: 0px 0px 10px 0px rgba(#d5d5d5,0.7); padding: 10px; &.active{ border: 2px solid $secondary-color; } } .address_container{ .each_location_item{ .icon{ position: relative; display: inline-block; margin-bottom: 10px; height: 50px; width: 50px; text-align: center; font-size: 18px; line-height: 42px; border-radius: 50%; border: 4px solid #ffffff; background-color: #ce1432; color: #ffffff; -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.05); box-shadow: 0 0 20px rgba(0, 0, 0, 0.05); } p{ display: block; font-size: 14px; line-height: 25px; color: #777777; font-weight: 400; } } } .each_item_how_it_works{ position: relative; margin: 30px 10px; .counter_text{ position: absolute; top: 50%; transform: translateY(-50%); left: 0px; font-size: 20vw; color: #3f4d50; font-weight: 600; text-shadow: 0px 15px 5px rgba(0,0,0,0.3), 10px 20px 5px rgba(0,0,0,0.1), -10px 20px 5px rgba(0,0,0,0.05); @media only screen and (max-width: 1200px){ font-size: 25vw; } @media only screen and (max-width: 991px){ font-size: 30vw; } @media only screen and (max-width: 767px){ font-size: 35vw; } @media only screen and (max-width: 575px){ font-size: 50vw; } } .info_wrapper{ width: calc(100% - 125px); margin-left: auto; margin-right: 0px; position: relative; border: 5px solid white; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .2); img{ height: 15vw; width: 100%; object-fit: cover; @media only screen and (max-width: 1200px){ height: 20vw; } @media only screen and (max-width: 991px){ height: 25vw; } @media only screen and (max-width: 767px){ height: 30vw; } @media only screen and (max-width: 575px){ height: 40vw; } } .text_container{ position: absolute; bottom: 10px; left: 10px; color: white; h3{ font-size: 1rem; color: white; } } @media only screen and (max-width: 1400px){ width: calc(100% - 90px); } @media only screen and (max-width: 575px){ width: calc(100% - 70px); } } } .how_it_works_main_container{ background-color: #f5f5f5; padding: 80px 10px; } /*****************Side Bar Design Car Description ends**************************/