/* Google Fonts */ @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); /*---------------------------* #Template default CSS *----------------------------*/ body { background: #ffffff; font-family: "Poppins"; font-weight: 400; font-size: 14px; line-height: 1.75; color: #565656; overflow-x: hidden; } @media screen and (max-width: 1199px) { .container { max-width: 100%; } } h1, h2, h3, h4, h5, h6 { font-family: "Raleway"; margin: 0; line-height: 1.25; color: #111111; } p { margin: 0px; line-height: 1.715; } a, button { text-decoration: none; color: inherit; } button { background: transparent; border: 0; padding: 0; outline: 0; } a, button, img, input { -webkit-transition: all 0.3s; transition: all 0.3s; } a:focus { text-decoration: none; outline: 0; } a:hover { text-decoration: none; color: #5a5ac9; } button, input[type="submit"] { cursor: pointer; outline: 0 !important; } img { max-width: 100%; } :focus { outline: 0; } ul { padding: 0; margin: 0; } li { list-style: none; } span { display: inline-block; } span.separator { color: #bfbfbf; margin: 0 8px; line-height: 1; font-size: 14px; } .zoom-in img { -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .zoom-in:hover img { -webkit-transform: scale(1.045) rotate(0.05deg); transform: scale(1.045) rotate(0.05deg); } .theme-border { border: 2px solid #5a5ac9 !important; } .theme-border2 { border: 2px solid #8a72e0 !important; } hr.hr { background-color: #ebebeb; opacity: 1; } span.required { color: #5a5ac9; } .theme1 .hover-color:hover { color: #5a5ac9 !important; } .w-md-50 { width: 100%; max-width: 100%; } @media screen and (min-width: 768px) { .w-md-50 { max-width: 50%; } } /*----------------------- # selection colors -------------------------*/ *::-moz-selection { background: #5a5ac9; color: #ffffff; text-shadow: none; } ::-moz-selection { background: #5a5ac9; color: #ffffff; text-shadow: none; } ::selection { background: #5a5ac9; color: #ffffff; text-shadow: none; } /*----------------------- # Input Placeholder -------------------------*/ input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #565656 !important; opacity: 1; } input::-moz-placeholder, textarea::-moz-placeholder { color: #565656 !important; opacity: 1; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #565656 !important; opacity: 1; } input::-ms-input-placeholder, textarea::-ms-input-placeholder { color: #565656 !important; opacity: 1; } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #565656 !important; opacity: 1; } input::-moz-placeholder, textarea::-moz-placeholder { color: #565656 !important; opacity: 1; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #565656 !important; opacity: 1; } input::-ms-input-placeholder, textarea::-ms-input-placeholder { color: #565656 !important; opacity: 1; } input::placeholder, textarea::placeholder { color: #565656 !important; opacity: 1; } /*-------------------------- input active placeholder --------------------------*/ input:active::-webkit-input-placeholder, textarea:active::-webkit-input-placeholder { color: #565656 !important; opacity: 1; } input:active::-moz-placeholder, textarea:active::-moz-placeholder { color: #565656 !important; opacity: 1; } input:active:-ms-input-placeholder, textarea:active:-ms-input-placeholder { color: #565656 !important; opacity: 1; } input:active::-ms-input-placeholder, textarea:active::-ms-input-placeholder { color: #565656 !important; opacity: 1; } input:active::-webkit-input-placeholder, textarea:active::-webkit-input-placeholder { color: #565656 !important; opacity: 1; } input:active::-moz-placeholder, textarea:active::-moz-placeholder { color: #565656 !important; opacity: 1; } input:active:-ms-input-placeholder, textarea:active:-ms-input-placeholder { color: #565656 !important; opacity: 1; } input:active::-ms-input-placeholder, textarea:active::-ms-input-placeholder { color: #565656 !important; opacity: 1; } input:active::placeholder, textarea:active::placeholder { color: #565656 !important; opacity: 1; } body.open { overflow-y: scroll; } .overlay { bottom: 0; height: 100vh; left: 0; margin: 0; opacity: 0; overflow: hidden; position: fixed; right: 0; top: 0; -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; visibility: hidden; width: 100%; z-index: 9999999; background: rgba(22, 22, 27, 0.97); cursor: pointer; } .open .overlay { opacity: 1; visibility: visible; } .scale { cursor: pointer; height: 100%; position: absolute; width: 100%; } .overlay form.search-box { bottom: 0; height: 60px; left: 0; margin: auto; position: absolute; right: 0; top: 0; z-index: 10; max-width: 80%; -webkit-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; opacity: 0; -webkit-transform: scale(1.1); transform: scale(1.1); } .open .overlay form.search-box { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } .overlay .search-box input { border: 0 none; line-height: 60px; width: 100%; font-size: 14px; background: transparent; border: 1px solid #ebebeb; padding: 10px 50px 10px 10px; height: 60px; color: #ffffff; text-transform: capitalize; } .overlay .search-box input::-webkit-input-placeholder { color: #ffffff !important; } .overlay .search-box input::-moz-placeholder { color: #ffffff !important; } .overlay .search-box input:-ms-input-placeholder { color: #ffffff !important; } .overlay .search-box input::-ms-input-placeholder { color: #ffffff !important; } .overlay .search-box input::placeholder { color: #ffffff !important; } .overlay .search-box button { background-color: transparent; border: 0 none; color: #ffffff; font-size: 25px; position: absolute; right: 20px; top: 10px; padding: 0; } button.close { position: absolute; font-size: 30px; color: #fff; top: 40px; right: 40px; z-index: 33; opacity: 1; } button.close:hover { color: #ffffff !important; opacity: 1 !important; } /*----------------------- # Margin & Padding -------------------------*/ .py-5 { padding-top: 5px; padding-bottom: 5px; } .py-10 { padding-top: 10px; padding-bottom: 10px; } .py-15 { padding-top: 15px; padding-bottom: 15px; } .py-20 { padding-top: 20px; padding-bottom: 20px; } .py-25 { padding-top: 25px; padding-bottom: 25px; } .py-30 { padding-top: 30px; padding-bottom: 30px; } .py-35 { padding-top: 35px; padding-bottom: 35px; } .py-40 { padding-top: 40px; padding-bottom: 40px; } .py-45 { padding-top: 45px; padding-bottom: 45px; } .py-50 { padding-top: 50px; padding-bottom: 50px; } .py-55 { padding-top: 55px; padding-bottom: 55px; } .py-60 { padding-top: 60px; padding-bottom: 60px; } .py-65 { padding-top: 65px; padding-bottom: 65px; } .py-70 { padding-top: 70px; padding-bottom: 70px; } .py-75 { padding-top: 75px; padding-bottom: 75px; } .py-80 { padding-top: 80px; padding-bottom: 80px; } .px-5 { padding-left: 5px; padding-right: 5px; } .px-10 { padding-left: 10px; padding-right: 10px; } .px-15 { padding-left: 15px; padding-right: 15px; } .px-20 { padding-left: 20px; padding-right: 20px; } .px-25 { padding-left: 25px; padding-right: 25px; } .px-30 { padding-left: 30px; padding-right: 30px; } .px-35 { padding-left: 35px; padding-right: 35px; } .px-40 { padding-left: 40px; padding-right: 40px; } .px-45 { padding-left: 45px; padding-right: 45px; } .px-50 { padding-left: 50px; padding-right: 50px; } /*------------------ # Margin Top ------------------*/ .mt-5 { margin-top: 5px; } .mt-10 { margin-top: 10px; } .mt-15 { margin-top: 15px; } .mt-20 { margin-top: 20px; } .mt-25 { margin-top: 25px; } .mt-30 { margin-top: 30px; } .mt-35 { margin-top: 35px; } .mt-40 { margin-top: 40px; } .mt-45 { margin-top: 45px; } .mt-50 { margin-top: 50px; } .mt-55 { margin-top: 55px; } .mt-60 { margin-top: 60px; } .mt-65 { margin-top: 65px; } .mt-70 { margin-top: 70px; } .mt-75 { margin-top: 75px; } .mt-80 { margin-top: 80px; } .mt-85 { margin-top: 85px; } .mt-90 { margin-top: 90px; } .mt-95 { margin-top: 95px; } .mt-100 { margin-top: 100px; } .mt-105 { margin-top: 105px; } .mt-110 { margin-top: 110px; } .mt-115 { margin-top: 115px; } .mt-120 { margin-top: 120px; } .mt-125 { margin-top: 125px; } .mt-130 { margin-top: 130px; } /*------------------ # Margin Bottom ------------------*/ .mb-5 { margin-bottom: 5px; } .mb-10 { margin-bottom: 10px; } .mb-15 { margin-bottom: 15px; } .mb-20 { margin-bottom: 20px; } .mb-25 { margin-bottom: 25px; } .mb-30 { margin-bottom: 30px; } .mb-35 { margin-bottom: 35px; } .mb-40 { margin-bottom: 40px; } .mb-45 { margin-bottom: 45px; } .mb-50 { margin-bottom: 50px; } .mb-55 { margin-bottom: 55px; } .mb-60 { margin-bottom: 60px; } .mb-65 { margin-bottom: 65px; } .mb-70 { margin-bottom: 70px; } .mb-75 { margin-bottom: 75px; } .mb-80 { margin-bottom: 80px; } .mb-85 { margin-bottom: 85px; } .mb-90 { margin-bottom: 90px; } .mb-95 { margin-bottom: 95px; } .mb-100 { margin-bottom: 100px; } .mb-105 { margin-bottom: 105px; } .mb-110 { margin-bottom: 110px; } .mb-115 { margin-bottom: 115px; } .mb-120 { margin-bottom: 120px; } .mb-125 { margin-bottom: 125px; } .mb-130 { margin-bottom: 130px; } /*------------------ # Margin Left ------------------*/ .ml-5 { margin-left: 5px; } .ml-10 { margin-left: 10px; } .ml-15 { margin-left: 15px; } .ml-20 { margin-left: 20px; } .ml-25 { margin-left: 25px; } .ml-30 { margin-left: 30px; } .ml-35 { margin-left: 35px; } .ml-40 { margin-left: 40px; } .ml-45 { margin-left: 45px; } .ml-50 { margin-left: 50px; } /*------------------ # Margin Right ------------------*/ .mr-5 { margin-right: 5px; } .mr-10 { margin-right: 10px; } .mr-15 { margin-right: 15px; } .mr-20 { margin-right: 20px; } .mr-25 { margin-right: 25px; } .mr-30 { margin-right: 30px; } .mr-35 { margin-right: 35px; } .mr-40 { margin-right: 40px; } .mr-45 { margin-right: 45px; } .mr-50 { margin-right: 50px; } /*------------------ # Padding Top ------------------*/ .pt-5 { padding-top: 5px; } .pt-10 { padding-top: 10px; } .pt-15 { padding-top: 15px; } .pt-20 { padding-top: 20px; } .pt-25 { padding-top: 25px; } .pt-30 { padding-top: 30px; } .pt-35 { padding-top: 35px; } .pt-40 { padding-top: 40px; } .pt-45 { padding-top: 45px; } .pt-50 { padding-top: 50px; } .pt-55 { padding-top: 55px; } .pt-60 { padding-top: 60px; } .pt-65 { padding-top: 65px; } .pt-70 { padding-top: 70px; } .pt-75 { padding-top: 75px; } .pt-80 { padding-top: 80px; } .pt-85 { padding-top: 85px; } .pt-90 { padding-top: 90px; } .pt-95 { padding-top: 95px; } .pt-100 { padding-top: 100px; } .pt-105 { padding-top: 105px; } .pt-110 { padding-top: 110px; } .pt-115 { padding-top: 115px; } .pt-120 { padding-top: 120px; } .pt-125 { padding-top: 125px; } .pt-130 { padding-top: 130px; } /*------------------ # Padding Bottom ------------------*/ .pb-5 { padding-bottom: 5px; } .pb-10 { padding-bottom: 10px; } .pb-15 { padding-bottom: 15px; } .pb-20 { padding-bottom: 20px; } .pb-25 { padding-bottom: 25px; } .pb-30 { padding-bottom: 30px; } .pb-35 { padding-bottom: 35px; } .pb-40 { padding-bottom: 40px; } .pb-45 { padding-bottom: 45px; } .pb-50 { padding-bottom: 50px; } .pb-55 { padding-bottom: 55px; } .pb-60 { padding-bottom: 60px; } .pb-65 { padding-bottom: 65px; } .pb-70 { padding-bottom: 70px; } .pb-75 { padding-bottom: 75px; } .pb-80 { padding-bottom: 80px; } .pb-85 { padding-bottom: 85px; } .pb-90 { padding-bottom: 90px; } .pb-95 { padding-bottom: 95px; } .pb-100 { padding-bottom: 100px; } .pb-105 { padding-bottom: 105px; } .pb-110 { padding-bottom: 110px; } .pb-115 { padding-bottom: 115px; } .pb-120 { padding-bottom: 120px; } .pb-125 { padding-bottom: 125px; } .pb-130 { padding-bottom: 130px; } /*--------------- # Padding Left ---------------*/ .pl-5 { padding-left: 5px; } .pl-10 { padding-left: 10px; } .pl-15 { padding-left: 15px; } .pl-20 { padding-left: 20px; } .pl-25 { padding-left: 25px; } .pl-30 { padding-left: 30px; } .pl-35 { padding-left: 35px; } .pl-40 { padding-left: 40px; } .pl-45 { padding-left: 45px; } .pl-50 { padding-left: 50px; } /*--------------- # Padding Right ---------------*/ .pr-5 { padding-right: 5px; } .pr-10 { padding-right: 10px; } .pr-15 { padding-right: 15px; } .pr-20 { padding-right: 20px; } .pr-25 { padding-right: 25px; } .pr-30 { padding-right: 30px; } .pr-35 { padding-right: 35px; } .pr-40 { padding-right: 40px; } .pr-45 { padding-right: 45px; } .pr-50 { padding-right: 50px; } @media screen and (min-width: 1920px) { .px-xl-90 { padding-left: 90px; padding-right: 90px; } } @media screen and (max-width: 991px) { .mr-pe-0 { margin-right: 0px; padding-right: 0px; } } /**************************** button style ****************************/ .btn--sm { padding: 5px 20px; } .btn--md { padding: 10px 25px; } .btn--lg { padding: 15px 30px; } .btn--xl { padding: 18px 35px; } /* border radius in rounded class*/ .rounded { border-radius: 3rem !important; } .btn-rounded { border-radius: 0 5px 5px 0; } /******************************* section-title style *******************************/ @media screen and (max-width: 480px) { .section-title .title { font-size: 20px; } } /**************************** [ 02. header CSS ] *****************************/ /*------------------* # Top Nave *------------------*/ .static-info p { font-size: 14px; line-height: 14px; } .navbar-top li { position: relative; } .navbar-top li img { margin-right: 5px; } .navbar-top li a { font-weight: 400; text-transform: capitalize; padding: 0 15px; line-height: 14px; font-size: 14px; } @media screen and (min-width: 576px) and (max-width: 767px) { .navbar-top li a { padding: 0 8px; } } @media screen and (max-width: 767px) { .topnav-submenu.show { top: 30px !important; } } @media screen and (max-width: 991px) { .topnav-submenu { right: auto !important; left: 0 !important; } } /*------------------* # Main-menu *------------------*/ .main-menu li { margin: 0 1px; position: relative; } .main-menu li a { font-weight: 600; display: block; padding: 20px; text-align: center; line-height: 30px; font-size: 14px; text-transform: uppercase; } @media screen and (min-width: 992px) and (max-width: 1199px) { .main-menu li a { padding: 15px; font-size: 13px; } } .main-menu li a i { font-size: 15px; position: relative; top: 1px; } .theme1 li a { color: #111111; } .theme1 li:hover > a { color: #5a5ac9; } .theme1 li.active > a { color: #5a5ac9; } /*------------------* # Main-menu END *------------------*/ /*------------------* # mega-menu *------------------*/ .mega-menu { position: absolute; top: 100%; left: 0; right: 0; max-width: 100%; opacity: 0; visibility: hidden; z-index: 3; background: #ffffff; padding: 30px 15px; -webkit-box-shadow: 0 0 3.76px 0.24px rgba(0, 0, 0, 0.15); box-shadow: 0 0 3.76px 0.24px rgba(0, 0, 0, 0.15); margin: 0 15px; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateX(-75deg); transform: rotateX(-75deg); } .main-menu li:hover > .mega-menu { opacity: 1; visibility: visible; -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, -webkit-transform 0.3s; transition: transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s, -webkit-transform 0.3s; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); } .mega-menu > li { margin: 0; } .mega-menu li ul li { margin: 0; } .mega-menu li > ul li:last-child a { padding-bottom: 0; } .mega-menu li > ul li > a:hover { padding-left: 5px; } .mega-menu li ul li.mega-menu-title { margin-bottom: 20px; } .mega-menu li ul li.mega-menu-title a { color: #111111; line-height: 1; text-transform: uppercase; font-size: 14px; font-weight: 500; padding: 0 !important; } .mega-menu li a { text-align: left; padding: 0 0 5px; color: #565656; text-transform: capitalize; line-height: 28px; font-weight: 400; font-size: 14px; } .mega-menu-custom-with { max-width: 1110px; min-width: 1110px; left: 23%; } @media screen and (max-width: 1200px) { .mega-menu-custom-with { min-width: 95%; left: 0%; right: 0%; } } .theme1 .mega-menu li ul li.mega-menu-title a:hover { color: #5a5ac9; } .blog-ctry-menu li a { position: relative; font-weight: 400; color: #565656; display: block; font-size: 14px; text-transform: capitalize; line-height: 35px; } .blog-ctry-menu li a::before { content: "\f2c7"; position: absolute; display: inline-block; font-family: "Ionicons"; right: 0; } .blog-ctry-menu li.active a::before { content: "\f462"; } .blog-ctry-menu li ul.category-sub-menu { display: none; } .blog-ctry-menu li ul.category-sub-menu li a { font-size: 13px; line-height: 35px; padding: 0 10px; display: block; color: #707070; } .blog-ctry-menu li ul.category-sub-menu li a::before { content: ""; } /*------------------* # mega-menu END *------------------*/ /*------------------* # sub-menu *------------------*/ .sub-menu { position: absolute; padding: 0; min-width: 240px; z-index: 4; -webkit-box-shadow: 0 0 3.76px 0.24px rgba(0, 0, 0, 0.15); box-shadow: 0 0 3.76px 0.24px rgba(0, 0, 0, 0.15); background: #ffffff; opacity: 0; visibility: hidden; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateX(-75deg); transform: rotateX(-75deg); } .main-menu li:hover > .sub-menu { opacity: 1; visibility: visible; -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, -webkit-transform 0.3s; transition: transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s, -webkit-transform 0.3s; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); } .sub-menu li { padding: 0 20px; border-bottom: 1px solid #eee; margin: 0; } .sub-menu li a { font-weight: 400; text-align: left; text-transform: capitalize; padding: 0; color: #565656; font-size: 14px; line-height: 40px; } .sub-menu li a i { margin-left: 10px; } .sub-menu li:hover > a { padding-left: 5px; } .sub-menu .sub-menu { opacity: 0; visibility: hidden; left: 100%; top: 0; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateX(-75deg); transform: rotateX(-75deg); } /*------------------* # sub-menu END *------------------*/ /**************************** [ 02.1 header sticky CSS ] *****************************/ /******************************* sticky header *******************************/ #sticky.is-isticky { position: fixed; top: 0; left: 0; width: 100%; z-index: 999; -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-animation: ease-in-out 0.5s fadeInDown; animation: ease-in-out 0.5s fadeInDown; -webkit-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.4); box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.4); background: #302C7C; } .theme1.is-isticky { background: #ffffff; } .theme1.is-isticky:hover { background: #ffffff; } #sticky.custom-sticky.is-isticky { padding-top: 4px; padding-bottom: 4px; } @media screen and (max-width: 991px) { #sticky.custom-sticky.is-isticky { position: static !important; } } /******************************* sticky header End *******************************/ /**************************** [ 02.2 search-form CSS ] *****************************/ /* *************** search-form ******************/ .search-form .form-control { padding: 10px 70px 10px 20px; width: 100%; height: 46px; font-size: 14px; background: #ffffff; color: #111111; border: 2px solid transparent; border-radius: 5px; } .search-form .form-control:focus { -webkit-box-shadow: none; box-shadow: none; } .search-form .form-control.theme1-border { border-color: #eee; } .search-body { position: absolute; width: 600px; top: 40px; right: 255px; display: none; z-index: 2; } @media screen and (max-width: 1500px) { .search-body { right: 220px; } } @media screen and (max-width: 1100px) { .search-body { right: 205px; } } .width-calc-from-left { width: calc(100% - 220px); } @media screen and (max-width: 991px) { .width-calc-from-left { width: calc(100%); padding-left: 0px; } } /* *************** search-form End ******************/ /**************************** [ 02.3 cart-links CSS ] *****************************/ /************************************* cart-block-links CSS *************************************/ .cart-block-links li { margin-right: 30px; } .cart-block-links li a { font-size: 20px; font-family: "Raleway"; font-weight: 500; text-align: center; line-height: 25px; } @media screen and (max-width: 767px) { .cart-block-links li a { font-size: 20px; } } .cart-block-links.theme1 a { color: #111111; } .cart-block-links.theme1 a:hover { color: #5a5ac9; } /************************************* cart-block-links CSS END *************************************/ /*********************************** [ 02.4 offcanvas-menu-toggler CSS ] ************************************/ /******************************** offcanvas toggler btn ********************************/ .mobile-menu-toggle svg { width: 50px; position: relative; } @media screen and (min-width: 576px) { .mobile-menu-toggle svg { top: -8px; } } .mobile-menu-toggle svg path { -webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25); transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25); fill: none; stroke-dashoffset: 0; stroke-linecap: round; stroke-width: 30px; } .mobile-menu-toggle svg path#top, .mobile-menu-toggle svg path#bottom { stroke-dasharray: 240px 950px; } .mobile-menu-toggle svg path#middle { stroke-dasharray: 240px 240px; } .mobile-menu-toggle .close svg path#top, .mobile-menu-toggle .close svg path#bottom { stroke-dasharray: -650px; stroke-dashoffset: -650px; } .mobile-menu-toggle .close svg path#middle { stroke-dasharray: 1px 220px; stroke-dashoffset: -115px; } .mobile-menu-toggle.theme1 svg path { stroke: #111111; } /******************************** offcanvas toggler btn END ********************************/ /**************************** [ 02.5 offcanvas CSS ] *****************************/ /******************************** offcanvas menu style ********************************/ body.offcanvas-open { overflow-y: hidden; padding-right: 17px; } @media screen and (max-width: 991px) { body.offcanvas-open { padding-right: 0px; } } .offcanvas-overlay { position: fixed; z-index: 999; top: 0; right: 0; bottom: 0; left: 0; display: none; background-color: rgba(0, 0, 0, 0.5); } .offcanvas { visibility: visible; font-size: 14px; font-weight: 400; position: fixed; z-index: 1000; top: 0; right: 0; left: auto; display: block; overflow: hidden; width: 400px; height: 100vh; -webkit-transform: translateX(100%); transform: translateX(100%); background-color: #ffffff; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .offcanvas.offcanvas-open { -webkit-transform: translateX(0); transform: translateX(0); } .offcanvas.offcanvas-mobile-menu { right: auto; left: 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); } .offcanvas.offcanvas-mobile-menu.offcanvas-open { -webkit-transform: translateX(0); transform: translateX(0); } @media screen and (max-width: 480px) { .offcanvas { width: 300px; } } .offcanvas .inner { padding: 20px; } @media screen and (max-width: 991px) { .offcanvas .inner { overflow-y: scroll; height: 660px; } } @media screen and (max-width: 767px) { .offcanvas .inner { height: calc(100% - 30px); } } @media screen and (max-width: 480px) { .offcanvas .inner { padding: 10px; } } .offcanvas .title { color: #111111; font-weight: 500; } .offcanvas .offcanvas-close { position: relative; width: 20px; height: 20px; text-indent: -9999px; border: 0; background-color: transparent; } .offcanvas .offcanvas-close::after { position: absolute; top: calc(50% - 1px); left: 0; width: 20px; height: 2px; content: ""; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); background-color: #111111; } .offcanvas .offcanvas-close:hover:after { -webkit-transform: rotate(0deg); transform: rotate(0deg); } .offcanvas .offcanvas-close::before { position: absolute; top: calc(50% - 1px); left: 0; width: 20px; height: 2px; content: ""; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; -webkit-transform: rotate(45deg); transform: rotate(45deg); background-color: #111111; } .offcanvas .offcanvas-close:hover:before { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .offcanvas .offcanvas-menu ul li { position: relative; display: block; line-height: 28px; } .offcanvas .offcanvas-menu ul li a { display: block; position: relative; padding: 8px 20px; text-transform: capitalize; border-top: 1px solid #eee; font-size: 14px; font-weight: 500; line-height: 30px; } .offcanvas .offcanvas-menu ul li .offcanvas-submenu { position: static; top: auto; display: none; visibility: visible; width: 100%; min-width: auto; -webkit-transition: none; transition: none; opacity: 1; -webkit-box-shadow: none; box-shadow: none; } .offcanvas .offcanvas-menu ul li .offcanvas-submenu li { line-height: inherit; position: relative; } .offcanvas .offcanvas-menu ul li .offcanvas-submenu li a { font-weight: 400; padding-left: 40px; } .offcanvas .offcanvas-menu ul li .offcanvas-submenu li ul a { padding-left: 60px; } .offcanvas .offcanvas-menu ul li .menu-expand { position: absolute; z-index: 2; top: 0; right: 0; width: 24px; height: 44px; cursor: pointer; background-color: transparent; } .offcanvas .offcanvas-menu ul li .menu-expand::before, .offcanvas .offcanvas-menu ul li .menu-expand::after { position: absolute; top: 50%; left: 0; width: 14px; height: 2px; content: ""; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; background-color: #111111; } .offcanvas .offcanvas-menu ul li .menu-expand::after { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .offcanvas .offcanvas-menu ul li.active > .menu-expand::after { -webkit-transform: rotate(0) scale(0.75); transform: rotate(0) scale(0.75); } .offcanvas .offcanvas-social li { display: inline-block; margin: 0 10px 10px 0; line-height: 40px; padding: 0; } .offcanvas .offcanvas-social li a { position: relative; display: inline-block; vertical-align: middle; font-size: 16px; line-height: 40px; width: 40px; height: 40px; border-radius: 50%; text-align: center; border: 2px solid transparent; z-index: 1; } .theme1 .offcanvas-menu li:hover > .menu-expand:after { background: #5a5ac9; } .theme1 .offcanvas-menu li:hover > .menu-expand:before { background: #5a5ac9; } .theme1 .offcanvas-social a { color: #ffffff; background: #5a5ac9; } .theme1 .offcanvas-social a:hover { background: transparent; color: #5a5ac9; border-color: #5a5ac9; } /******************************** offcanvas menu style ENd ********************************/ /**************************** [ 02.6 offcanvas-cart CSS ] *****************************/ /******************************** offcanvas cart style ********************************/ .offcanvas .inner .head { margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px solid #eee; } .offcanvas .inner .head .offcanvas-close { position: relative; width: 20px; height: 20px; text-indent: -9999px; border: 0; background-color: transparent; } .offcanvas .inner .sub-total { padding-top: 15px; padding-bottom: 15px; border-top: 1px solid #eee; margin: 30px 0; border-bottom: 1px solid #eee; } .offcanvas .inner .sub-total strong { color: #111111; font-weight: 500; } .offcanvas .inner .sub-total .amount { font-weight: 500; } .offcanvas .inner .minicart-message { margin-top: 15px; color: #111111; margin-bottom: 15px; } .minicart-product-list { margin: 0; padding-left: 0; list-style: none; } .minicart-product-list li { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid #ebebeb; } .minicart-product-list li .image { -webkit-box-flex: 1; -ms-flex: 1 0 0px; flex: 1 0 0px; } .minicart-product-list li .image img { max-width: 100%; border: 1px solid #ebebeb; } @media screen and (max-width: 575px) { .minicart-product-list li .image { -webkit-box-flex: 1; -ms-flex: 1 0 50px; flex: 1 0 50px; } } @media screen and (max-width: 575px) { .minicart-product-list li .content { -webkit-box-flex: 1; -ms-flex: 1 0 calc(100% - 75px); flex: 1 0 calc(100% - 75px); } } .theme1 .inner .sub-total .amount { color: #5a5ac9; } .theme1 .minicart-product-list li .content .title:hover { color: #5a5ac9; } .theme1 .minicart-product-list li .content .remove:hover { color: #5a5ac9; } /******************************** offcanvas cart style ENd ********************************/ /**************************** [ 02.7 all-ctry-menu CSS ] *****************************/ /******************************* hero-side-category style *******************************/ .hero-side-category { width: 100%; position: relative; } .hero-side-category .category-toggle { padding: 10px 20px; background-color: #ffffff; color: #111111; font-size: 14px; text-transform: uppercase; font-weight: 500; line-height: 24px; width: 100%; text-align: left; border: 2px solid #eee; border-radius: 5px; position: relative; } .hero-side-category .category-toggle i { display: inline-block; margin-right: 10px; text-align: center; font-size: 18px; -webkit-transform: translate(0, 2px); transform: translate(0, 2px); } .hero-side-category .category-menu { background-color: #ffffff; width: 100%; left: 0; top: 110%; border: 1px solid #ebebeb; position: absolute; display: none; z-index: 2; height: 500px; overflow-x: auto; border-radius: 5px; } .hero-side-category .category-menu li a { display: block; padding: 10px 25px; line-height: 30px; font-size: 14px; color: #253237; font-weight: 400; position: relative; border-bottom: 1px solid #ebebeb; } .hero-side-category .category-menu li a i { position: absolute; right: 30px; } .hero-side-category .category-menu li .category-mega-menu { display: none; } .hero-side-category .category-menu li .category-mega-menu a { padding: 10px 25px 10px 35px; line-height: 30px; font-size: 14px; font-weight: 400; color: #253237; position: relative; margin: 0; text-transform: inherit; } .hero-side-category .category-menu li #more-btn { font-weight: 500; padding-left: 45px; } .hero-side-category .category-menu li #more-btn i { right: auto; left: 30px; } .theme1 .category-menu li:hover > a { color: #5a5ac9; } /*********************************** hero-side-category style END ***********************************/ /*------------------* # Main Content start *------------------*/ /******************************** product-tags style ********************************/ .product-size .title { text-transform: uppercase; margin-bottom: 5px; font-size: 14px; font-weight: 500; color: #111111; line-height: 24px; } .product-size select { background-color: #ffffff; padding: 0 30px 0 10px; -moz-appearance: none; -webkit-appearance: none; height: 40px; font-weight: 400; font-size: 14px; color: #111111; border: 1px solid #ebebeb; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAQAAAD9CzEMAAAAPklEQVR4Ae3TwREAEBQD0V/6do4SXPZg7EsBhsQ8IEmSMOsiuEfg3gL3oXC7wK0bd1G4o8X9F4yIkyQfSrIByQBjp7QuND8AAAAASUVORK5CYII=) no-repeat scroll right 0.5rem center/1.25rem 1.25rem; margin-top: 20px; } .product-size select option { font-weight: 400; } .select-arrow-down { position: absolute; left: calc(100% - 85px); } /* product-widget */ .product-widget .title { font-weight: 600; font-size: 18px; padding-bottom: 20px; margin-bottom: 20px; position: relative; display: block; border-bottom: 1px solid #ebebeb; text-transform: capitalize; } .product-widget .title::before { content: ""; position: absolute; left: 0; bottom: -1px; width: 60px; height: 2px; background: #5a5ac9; } .product-tag li a { font-weight: 400; text-transform: capitalize; display: block; padding: 10px 25px; font-size: 14px; line-height: 20px; color: #565656; border: 1px solid #ebebeb; background: #ffffff; margin: 4px; margin-left: 4px; } .product-tag li a:hover { color: #ffffff; background: #5a5ac9; border-color: #5a5ac9; } /************************************* media CSS *************************************/ @media screen and (min-width: 1200px) and (max-width: 1399px) { .static-media.me-50 { margin-right: 25px; } } @media screen and (min-width: 992px) and (max-width: 1199px) { .static-media.me-50 { margin-right: 30px; } } .phone { line-height: 1; font-size: 14px; } @media screen and (max-width: 767px) { .phone { font-size: 13px; } } .phone a:hover { color: #5a5ac9 !important; } .phone span { line-height: 1; font-size: 14px; } .phone strong { line-height: 1; } .phone .email { line-height: 2rem; } .theme1 .phone a:hover { color: #5a5ac9 !important; } .theme1 .phone.modify a:hover { color: #ffffff !important; } /************************************* media CSS ENd *************************************/ /******************************** slick arrow style ********************************/ .slick-arrow { position: absolute; height: 50px; width: 50px; top: 50%; border: 0px; background: #111111; color: #ffffff; text-align: center; z-index: 1; font-size: 14px; line-height: 50px; -webkit-transform: translateY(-50%); transform: translateY(-50%); border-radius: 50%; } .main-slider .slick-prev { left: 40px; background: #111111; color: #ffffff; opacity: 0; visibility: hidden; } .main-slider .slick-next { right: 40px; background: #111111; color: #ffffff; opacity: 0; visibility: hidden; } .main-slider:hover .slick-arrow { opacity: 1; visibility: visible; } .slick-nav .slick-prev { left: -25px; opacity: 0; visibility: hidden; } @media screen and (max-width: 1199px) { .slick-nav .slick-prev { left: 0px; } } .slick-nav:hover .slick-prev { opacity: 1; visibility: visible; } .slick-nav .slick-next { right: -25px; opacity: 0; visibility: hidden; } @media screen and (max-width: 1199px) { .slick-nav .slick-next { right: 0px; } } .slick-nav:hover .slick-next { visibility: visible; opacity: 1; } .slick-nav-sync .slick-prev { left: -15px; opacity: 0; visibility: hidden; } .slick-nav-sync:hover .slick-prev { left: 15px; opacity: 1; visibility: visible; } .slick-nav-sync .slick-next { right: -15px; opacity: 0; visibility: hidden; } .slick-nav-sync:hover .slick-next { right: 15px; visibility: visible; opacity: 1; } .slick-nav-brand .slick-prev { left: -40px; opacity: 0; visibility: hidden; } @media screen and (max-width: 1024px) { .slick-nav-brand .slick-prev { left: -15px; } } .slick-nav-brand:hover .slick-prev { opacity: 1; visibility: visible; } .slick-nav-brand .slick-next { right: -40px; opacity: 0; visibility: hidden; } @media screen and (max-width: 1024px) { .slick-nav-brand .slick-next { right: -15px; } } .slick-nav-brand:hover .slick-next { visibility: visible; opacity: 1; } .theme1 .slick-arrow:hover { color: #ffffff; background: #5a5ac9; border-color: #5a5ac9; } /* slick dots style */ .dots-style .slick-dots { position: absolute; left: 0; bottom: 30px; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .dots-style .slick-dots li { line-height: 1; } .dots-style .slick-dots li button { width: 14px; height: 14px; text-indent: 2000px; font-size: 0px; display: block; margin: 0 5px; -webkit-transition: all 0.3s; transition: all 0.3s; border-radius: 50%; } .dots-style .slick-dots li button:hover { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } .popular-slider-init.dots-style .slick-dots { bottom: 0px; position: static; margin-top: 30px; } .popular-slider-init.dots-style .slick-dots li button { width: 8px; height: 8px; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .theme1 .slick-dots li button { background: #111111; } .theme1 .slick-dots li button:hover { background: #5a5ac9; } .theme1 .slick-dots li.slick-active button { background: #5a5ac9; } .theme1 .popular-slider-init.dots-style .slick-dots li button { background: #111111; } .theme1 .popular-slider-init.dots-style .slick-dots li button:hover { background: #5a5ac9; } .theme1 .popular-slider-init.dots-style .slick-dots li.slick-active button { width: 28px; background: #5a5ac9; border-radius: 8px; } /******************************** slick arrow style ENd ********************************/ /******************************** Main Slider ********************************/ .slick-slider { background: transparent; } .slider-height { height: 855px; } @media screen and (min-width: 1200px) and (max-width: 1400px) { .slider-height { height: 595px; } } @media screen and (min-width: 992px) and (max-width: 1199px) { .slider-height { height: 595px; } } @media screen and (min-width: 768px) and (max-width: 991px) { .slider-height { height: 450px; } } @media screen and (max-width: 767px) { .slider-height { height: 300px; } } @media screen and (min-width: 576px) and (max-width: 767px) { .slider-height { height: 450px; } } .slider-height2 { height: 714px; } @media screen and (min-width: 1200px) and (max-width: 1400px) { .slider-height2 { height: 600px; } } @media screen and (min-width: 992px) and (max-width: 1199px) { .slider-height2 { height: 480px; } } @media screen and (min-width: 768px) and (max-width: 991px) { .slider-height2 { height: 400px; } } @media screen and (max-width: 767px) { .slider-height2 { height: 300px; } } @media screen and (min-width: 576px) and (max-width: 767px) { .slider-height2 { height: 350px; } } .slider-content-width { max-width: 52%; } @media screen and (min-width: 768px) and (max-width: 1500px) { .slider-content-width { max-width: 52%; } } @media screen and (max-width: 576px) { .slider-content-width { max-width: 100%; } } .slider-content .title { font-weight: 400; font-size: 65px; text-transform: capitalize; } .slider-content .title span { opacity: 0; } @media screen and (min-width: 1200px) and (max-width: 1600px) { .slider-content .title { font-size: 50px; } } @media screen and (min-width: 992px) and (max-width: 1199px) { .slider-content .title { font-size: 45px; } } @media screen and (min-width: 768px) and (max-width: 991px) { .slider-content .title { font-size: 35px; } } @media screen and (max-width: 767px) { .slider-content .title { font-size: 30px; } } .slider-content .text { font-size: 20px; color: #111111; text-transform: uppercase; margin-bottom: 15px; opacity: 0; } @media screen and (min-width: 768px) and (max-width: 991px) { .slider-content .text { font-size: 16px; } } @media screen and (max-width: 767px) { .slider-content .text { font-size: 18px; } } @media screen and (max-width: 767px) { .slider-content .text.mb-25 { margin-bottom: 15px; } } .slider-content .btn { opacity: 0; } @media screen and (max-width: 767px) { .slider-content .btn.mt-45 { margin-top: 30px; } } /******************************** # main slider End ********************************/ /**************************** #Common Banner ****************************/ .banner-thumb img { width: 100%; } @media screen and (max-width: 767px) { .banner-thumb img { width: 100%; } } /**************************** breadcrumb-section ****************************/ @media screen and (max-width: 767px) { .breadcrumb-section { padding-top: 50px; padding-bottom: 50px; } } @media screen and (max-width: 1200px) { .breadcrumb-section { padding-top: 80px; padding-bottom: 80px; } } .breadcrumb-item { text-transform: capitalize; line-height: 1; padding: 0px !important; } @media screen and (max-width: 450px) { .breadcrumb-item { margin: 5px 0px; } } .breadcrumb-item a { display: inline-block; position: relative; color: #111111 !important; line-height: 1; } .breadcrumb-item + .breadcrumb-item::before { content: "\f3d3"; color: #707070 !important; margin: 0 10px; content: "\f3d3"; font-family: "Ionicons"; padding: 0px !important; position: relative; top: 2px; font-size: 14px; } .theme1 .breadcrumb-item a:hover { color: #5a5ac9 !important; } .theme1 .breadcrumb-item.active { color: #5a5ac9; } .breadcrumb-section .section-title { padding-bottom: 30px; } /**************************** breadcrumb-section END ****************************/ /******************************** product tab menu style ********************************/ .product-tab-menu .nav-item { margin: 0px 2px; } @media screen and (max-width: 560px) { .product-tab-menu .nav-item { margin: 0px 2px 5px; } } .product-tab-menu .nav-item .nav-link { font-weight: 600; font-size: 16px; text-transform: capitalize; padding: 8px 15px; color: #111111; } .theme1 .nav-link.active, .theme1 .nav-link:hover { color: #5a5ac9; background: transparent; text-decoration: underline; } /******************************** product tab menu style END ********************************/ /******************************** product links style ********************************/ .actions { position: absolute; z-index: 3; width: 100%; bottom: 30px; } @media screen and (min-width: 768px) { .actions { bottom: 20px; } } .actions li { margin: 0 3px; } .actions li .action { display: block; background: #f6f6f6; color: #111111; width: 40px; height: 40px; font-size: 16px; line-height: 40px; text-align: center; -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); border-radius: 50%; } .actions li .action span { width: 40px; height: 40px; line-height: 40px; display: block; } .product-card .card-body:hover .actions li a { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } .product-card .card-body:hover .actions li:nth-child(2) a { -webkit-transition: all 0.6s; transition: all 0.6s; } .product-card .card-body:hover .actions li:nth-child(3) a { -webkit-transition: all 0.9s; transition: all 0.9s; } .theme1 .actions li:hover .action { background: #5a5ac9; color: #ffffff; } /******************************** product links style END ********************************/ /******************************** product-card style ********************************/ .tab-content .tab-pane.active .product-list { -webkit-animation: zoomIn 0.5s ease; animation: zoomIn 0.5s ease; -webkit-animation-duration: 1s; animation-duration: 1s; } .product-thumbnail img { transform-style: preserve-3d; -webkit-transform-style: preserve-3d; } img.second-img { position: absolute; top: 0; left: 0; opacity: 0; background: #ffffff; } .product-card { border: 0; -webkit-box-shadow: 0 0 11.83px 1.17px rgba(0, 0, 0, 0.06); box-shadow: 0 0 11.83px 1.17px rgba(0, 0, 0, 0.06); } .product-card:hover img.second-img { opacity: 1; z-index: 1; } .product-card.no-shadow { -webkit-box-shadow: none; box-shadow: none; } .product-desc { padding: 18px; } .product-desc .title { margin-bottom: 10px; font-size: 16px; font-weight: 600; line-height: 1.5; } @media screen and (max-width: 991px) { .product-desc .title { font-size: 14px; } } .theme1 .product-desc .title:hover a { color: #5a5ac9; } .star-rating span { font-weight: 400; line-height: 1; margin: 0 1px 0 0; font-size: 18px; color: #fdd835; } .star-rating span .de-selected { color: #eee; } .product-price { font-weight: 700; font-size: 16px; color: #111111; } .product-price .del { margin-right: 2px; } .theme1 .product-price .onsale { color: #5a5ac9; } .pro-btn { background: #f6f6f6; color: #111111; width: 40px; height: 40px; text-align: center; font-weight: 400; line-height: 40px; font-size: 16px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 50%; } .pro-btn-right { position: absolute; right: 20px; } .theme1 .pro-btn:hover { background: #5a5ac9; color: #ffffff; } @media screen and (max-width: 480px) { .product-thumbnail { width: 100%; } } @media screen and (max-width: 480px) { .product-thumbnail a { display: block; } .product-thumbnail a img { width: 100%; } } /******************************** product-card style END ********************************/ /******************************** product Slider ********************************/ .product-slider-init .slick-list { padding: 15px 0; margin: -15px; } .product-slider-init .slick-list .slick-slide { padding: 0 15px; } .product-slider2-init .slick-list { padding: 15px 0; margin: -15px; } .product-slider2-init .slick-list .slick-slide { padding: 0 15px; } /******************************** product Slider End ********************************/ /******************************** popular Slider ********************************/ .popular-slider-init .slick-list { padding: 20px 0px; margin: 0 -15px; } .popular-slider-init .slick-list .slick-slide { padding: 0 15px; } .popular-card { text-align: center; background: #ffffff; border: 0; -webkit-box-shadow: 0 0 11.83px 1.17px rgba(0, 0, 0, 0.06); box-shadow: 0 0 11.83px 1.17px rgba(0, 0, 0, 0.06); border-radius: 0px; } .popular-card .card-body { padding: 20px; } .popular-card .card-body .thumb-naile { display: block; overflow: hidden; } .popular-card .card-body .popular-title { text-transform: uppercase; padding: 20px 0px 0px; font-weight: 600; font-size: 14px; } .popular-card .card-body .popular-title a { display: block; } .theme1 .popular-card { text-align: center; } .theme1 .popular-card .card-body .popular-title a:hover { color: #5a5ac9; } /******************************** popular Slider ENd ********************************/ /******************************** # featured section ********************************/ .featured-init .product-thumbnail img { max-width: 120px; } .featured-init .product-desc { padding: 0 15px; } .featured-init2 .product-thumbnail img { max-width: 120px; } @media screen and (min-width: 480px) and (max-width: 767px) { .featured-init2 .product-thumbnail img { max-width: 100px; } } .featured-init .product-thumbnail { width: auto; } /******************************** # featured section End ********************************/ /******************************** product-ctry-init ********************************/ .product-ctry-init .product-desc .title { font-size: 18px; line-height: 20px; } @media screen and (max-width: 576px) { .product-ctry-init .product-desc .title { font-size: 15px; } } .product-ctry-init .product-price .del { font-size: 19px; } .product-ctry-init .product-price .onsale { font-size: 24px; } .availability p { font-size: 14px; text-transform: capitalize; color: #777; } .availability span.in-stock { font-weight: 400; color: #10a341; } .hot-deal .title { font-weight: 500; font-size: 30px; } /* clockdiv css */ .clockdiv { line-height: 1; margin-top: 20px; } .clockdiv .title { font-size: 14px; color: #707070; line-height: 18px; max-width: 100px; margin-right: 15px; } @media screen and (max-width: 767px) { .clockdiv .title { max-width: 100%; margin: 0 auto 15px; text-align: center; } } .clockdiv span { display: inline-block; padding: 0 10px; text-align: center; color: #111111; position: relative; font-weight: 500; font-size: 22px; } @media screen and (min-width: 768px) and (max-width: 991px) { .clockdiv span { font-size: 18px; } } .clockdiv span::after { position: absolute; top: 0; left: -4px; content: ":"; } .clockdiv span:first-child::after { display: none; } .clockdiv span p { font-size: 12px; margin: 5px 0 0; color: #111111; font-weight: 400; } .product-sync-init .product-thumb img { width: 100%; display: block; margin: 0 auto; } /******************************** product-ctry-init ENd ********************************/ /******************************** brand section ********************************/ .brand-init.border-top { border-color: #ebebeb !important; } .brand-init .slick-list { margin: 0 -15px; } .brand-init .slick-list .slick-slide { padding: 0 15px; } .single-brand a img { display: block; margin: 0 auto; } .single-brand a:hover img { -webkit-transform: scale(1.045) rotate(0.05deg); transform: scale(1.045) rotate(0.05deg); } /*------------------* # Footer *------------------*/ .nletter-form .form-control { height: 47px; background: #ffffff; color: #7e7e7e; padding: 10px 120px 10px 10px; width: 100%; font-size: 14px; border: 1px solid #ffffff; border-radius: 30px; } .nletter-form .form-control:focus { -webkit-box-shadow: none; box-shadow: none; } @media screen and (max-width: 767px) { .social-network { padding-bottom: 20px; } } .social-network li { margin: 0 10px 0 0; } .social-network li a { display: block; color: #111111; background: #ffffff; line-height: 44px; width: 40px; height: 40px; text-align: center; font-size: 15px; border-radius: 50%; } .theme1 .social-network li a:hover { color: #ffffff; background: #5a5ac9; } .social-network2 li { margin: 0 15px 0 0; } @media screen and (max-width: 767px) { .social-network2 li { margin: 0 10px 0 0; } } .social-network2 li a { display: block; line-height: 1; text-align: center; font-size: 20px; } @media screen and (max-width: 767px) { .social-network2 li a { font-size: 16px; } } .theme1 .social-network2 li a { color: #ffffff; } .theme1 .social-network2 li a:hover { color: #5a5ac9; } .theme1 .social-network2.modify li a:hover { color: #ffffff; } .address { margin: 0; } .address-widget .title { font-size: 22px; font-weight: 500; } .address-widget .text { line-height: 1; color: #707070; font-size: 13px; } .theme1 .address-widget .title a:hover { color: #5a5ac9; } /* footer-menu */ .mx-w-400 { max-width: 400px; } .help-text { font-size: 16px; margin-bottom: 5px; } .footer-widget .section-title { position: relative; padding-bottom: 20px; } .footer-widget .section-title::after { position: absolute; left: 0; bottom: -1px; width: 60px; height: 2px; content: ""; } .footer-widget .section-title .title { font-weight: 600; font-size: 18px; } .footer-widget .section-title .title::after { display: none; } .theme1 .footer-widget .section-title::after { background: #5a5ac9; } .footer-menu li { margin-bottom: 5px; } .footer-menu li:last-child { margin-bottom: 0; } .footer-menu li a { font-size: 14px; line-height: 24px; text-transform: capitalize; color: #565656; } .footer-menu li a:hover { padding-left: 5px; } .theme1 .footer-menu li a:hover { color: #5a5ac9; } /* coppy-right */ .coppy-right p { color: #ffffff; } .coppy-right a { color: #5a5ac9; } .theme1 .coppy-right a:hover { color: #5a5ac9; text-decoration: underline; } /******************************** footer section End ********************************/ /**************************** [ 22. scroll-up CSS ] *****************************/ /******************************** scrollUp style ********************************/ #scrollUp { background: #302C7C; width: 40px; height: 40px; bottom: 50px; right: 50px; border-radius: 100%; color: #ffffff; text-align: center; font-size: 22px; line-height: 40px; font-weight: 500; } #scrollUp:hover { background: #302C7C; color: #ffffff; } /******************************** scrollUp style End ********************************/ /*------------------* # Shop Pages *------------------*/ .tab-content .tab-pane.active .grid-view .product-card { -webkit-animation: zoomIn 0.5s ease; animation: zoomIn 0.5s ease; -webkit-animation-duration: 1s; animation-duration: 1s; } .tab-content .tab-pane .grid-view-list .product-card { padding: 15px; } .tab-content .tab-pane.active .grid-view-list .product-card { -webkit-animation: fadeInRight 0.5s ease; animation: fadeInRight 0.5s ease; -webkit-animation-duration: 1s; animation-duration: 1s; } .grid-nav-wraper { padding: 10px 30px; } @media screen and (max-width: 991px) { .grid-nav-wraper { padding: 10px 15px; } } .shop-grid-nav .nav .nav-item { margin-right: 15px; line-height: 1; } .total-products { font-weight: 400; margin-left: 50px; line-height: 20px; font-size: 14px; padding: 5px; } @media screen and (max-width: 991px) { .total-products { margin-left: 20px; } } .shop-grid-nav .nav .nav-link { color: #111111; padding: 0; background: transparent; font-size: 18px; line-height: 30px; } .shop-grid-nav .nav .nav-link.active, .shop-grid-nav .nav .nav-link:hover { color: #5a5ac9; } .shop-grid-button button { width: 100%; background: #ffffff; padding: 2px 15px; line-height: 24px; font-size: 14px; color: #111111; text-align: left; -webkit-box-shadow: none; box-shadow: none; } .shop-grid-button button span { font-size: 20px; } .shop-grid-menu { background: #ffffff; width: calc(100% - 145px); border: 1px solid #ebebeb; } .shop-grid-menu .dropdown-item { font-weight: 400; line-height: 24px; font-size: 14px; padding: 3px 15px; color: #111111; } .shop-grid-menu .dropdown-item:hover { background: #5a5ac9; color: #ffffff; } .sort-by { min-width: 70px; font-weight: 400; line-height: 20px; font-size: 14px; padding: 5px; color: #111111; margin-left: 50px; } @media screen and (max-width: 991px) { .sort-by { margin-left: 0px; } } .product-list-des { padding: 15px 0; } .availability-list p span { color: #5a5ac9; } .grid-view-list .product-desc .title { font-size: 20px; } .custom-select { padding: 0px 15px; height: 30px !important; border: 0px; font-size: 14px; } /*------------------* # Shop Pages End *------------------*/ /*------------------* # About Us Page *------------------*/ .about-content .title { font-weight: 600; color: #111111; text-transform: capitalize; font-size: 30px; max-width: 900px; margin: 0 auto 20px; line-height: 1.4; } @media screen and (max-width: 767px) { .about-content .title { font-size: 25px; } } .about-info .title { font-size: 34px; font-weight: 600; color: #111111; } .single-service .title { font-size: 22px; font-weight: 600; color: #111111; } .service-section .single-blog img { width: 100%; } @media (max-width: 991px) { .whish-list-section .table { min-width: 1030px; } } .whish-list-section .title { font-weight: 700; font-size: 30px; border-bottom: 1px solid #ebebeb; } .whish-list-section .table .thead-light th { background-color: #5a5ac9; border-color: transparent; text-transform: capitalize; font-weight: 500; color: #ffffff; font-size: 16px; } .whish-list-section .table td, .whish-list-section .table th { vertical-align: middle; } .whish-list-section img { max-width: 150px; } .whish-title { font-size: 15px; } .whish-list-price { color: #111111; font-size: 15px; } select.form-control { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: #f1f1f1 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAQAAAD9CzEMAAAAPklEQVR4Ae3TwREAEBQD0V/6do4SXPZg7EsBhsQ8IEmSMOsiuEfg3gL3oXC7wK0bd1G4o8X9F4yIkyQfSrIByQBjp7QuND8AAAAASUVORK5CYII=) no-repeat scroll right 0.5rem center/1.25rem 1.25rem; } .form-control:focus { -webkit-box-shadow: none; box-shadow: none; } .contact-form .title { text-transform: capitalize; color: #111111; line-height: 24px; font-weight: 500; font-size: 1.25rem; margin-bottom: 0.5rem; } .col-form-label { font-size: 14px; color: #111111; padding-top: 0.625rem; text-transform: capitalize; } .contact-form .form-control { background-color: #ffffff; border: 1px solid #ebebeb; font-size: 16px; color: #707070; padding: 0.8rem 1.6rem; height: 38px; line-height: 1.25; border-radius: 0px; } .contact-form textarea.form-control { min-height: 300px; } @media screen and (max-width: 767px) { .contact-form textarea.form-control { min-height: 150px; } } .contact-page-title { font-size: 30px; font-weight: 700; text-transform: capitalize; margin-bottom: 30px; } @media only screen and (max-width: 575px) { .contact-page-title { font-size: 25px; } } .single-contact-block { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #ebebeb; } @media only screen and (max-width: 575px) { .single-contact-block { margin-bottom: 20px; padding-bottom: 20px; } } .single-contact-block:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } .single-contact-block h4 { font-weight: 500; font-size: 20px; line-height: 27px; color: #111111; margin: 15px 0px; } @media only screen and (max-width: 575px) { .single-contact-block h4 { font-size: 20px; } } .single-contact-block h4 img { margin: 5px 20px 20px 0; } .single-contact-block p { font-size: 15px; line-height: 29px; margin-bottom: 0; color: #707070; } span.required { color: #5a5ac9; } .contact-form .form-group { margin-bottom: 20px; } .contact-form label { font-size: 14px; color: #111111; padding: 0.8rem 0rem; text-transform: capitalize; } .contact-form input { line-height: 40px; width: 100%; height: 40px; padding-left: 20px; border: 1px solid #ebebeb; outline: 0; background-color: #ffffff; } .contact-form textarea { line-height: 40px; width: 100%; height: 155px; padding-left: 20px; border: 1px solid #ebebeb; outline: 0; background-color: #ffffff; } .contact-page-side-content { padding-right: 30px; height: 100%; } /* login page */ .log-in-form { border: 1px solid #ebebeb; font-size: 13px; color: #707070; padding: 30px 15px 15px; } .log-in-form .form-control { background-color: #ffffff; border: 1px solid #ebebeb; font-size: 14px; color: #707070; padding: 0.8rem 1.6rem; height: 38px; line-height: 1.25; border-radius: 0px; } .show-password { font-weight: 500; color: #ffffff; border: 0; text-transform: uppercase; font-size: 0.6875rem; padding: 0.67rem 1rem !important; border-radius: 0px; } .login-form-links a { display: inline-block; } .for-get { font-size: 14px; padding-bottom: 15px; } .border-top { border-top: 1px solid #ebebeb !important; } .no-account { display: inline-block; font-size: 14px; margin-top: 15px; } .form-message.error { color: #ff0000; } .form-message.success { color: #008000; } .contact-map #mapid { height: 560px; } .custom-row-2 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -5px; margin-left: -5px; } .custom-row-2 div[class^="col-"] { padding-left: 5px; padding-right: 5px; } .contact-info-wrap { background-color: #f3f3f3; padding: 120px 70px 116px 90px; } .contact-info-wrap .single-contact-info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 40px; } .contact-info-wrap .single-contact-info .contact-icon { margin-right: 20px; } .contact-info-wrap .single-contact-info .contact-icon i { font-size: 20px; color: #111111; display: inline-block; width: 40px; height: 40px; line-height: 40px; border: 1px solid #252525; text-align: center; border-radius: 100%; -webkit-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .contact-info-wrap .single-contact-info .contact-info-dec p { line-height: 1; color: #111111; margin: 0 0 9px; } .contact-info-wrap .single-contact-info .contact-info-dec p a { color: #111111; } .contact-info-wrap .single-contact-info .contact-info-dec p a:hover { color: #5a5ac9; } .contact-info-wrap .single-contact-info:hover .contact-icon i { background-color: #5a5ac9; color: #fff; border-color: #5a5ac9; } .contact-social h3 { font-weight: 700; color: #111111; font-size: 24px; margin: 0 0 17px; line-height: 1; } .contact-social ul li a { color: #666; } .contact-social .social-info li a { margin-right: 15px; } .contact-form { background-color: #f3f3f3; padding: 35px; } @media screen and (max-width: 767px) { .contact-form { padding: 15px; } } .contact-form .contact-title h2 { font-size: 24px; font-weight: 700; color: #111111; line-height: 1; margin-bottom: 36px; margin-left: -10px; } .contact-form .contact-form-style input, .contact-form .contact-form-style textarea { background: transparent; border: 1px solid #c1c1c1; height: 40px; padding: 2px 14px; margin-bottom: 30px; color: #000; width: 100%; outline: none; } .contact-form p { color: #333; } .contact-form .contact-form-style textarea { padding: 20px 14px; margin-bottom: 0; height: 200px; } .contact-map { margin-bottom: 60px; } .contact-form .contact-form-style button { border: none; background-color: #5a5ac9; color: #fff; font-size: 14px; font-weight: 700; text-transform: uppercase; line-height: 1; padding: 15px 52px; margin-top: 33px; outline: none; -webkit-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; border-radius: 30px; } .contact-form .contact-form-style button:hover { background-color: #111111; color: #fff; } .coupon-title { font-size: 20px; text-transform: capitalize; font-weight: 600; margin: 20px 0px 15px; } .check-out-btn { padding: 14px 30px; } /**************************** /******************* map page start ******************/ .map iframe { width: 100%; height: 450px; border: 0; } /* *************** map page End ******************/