/*----------------------------------------------------------------------------------- Template Name: eStore Author URI: graygrids.com Author: GrayGrids ----------------------------------------------------------------------------------- CSS INDEX =================== 01. Theme default CSS 02. Header 03. Hero 04. Footer -----------------------------------------------------------------------------------*/ /*================================================================== 01.Common css ==================================================================*/ /*===== Common Style =====*/ @import url("https://fonts.googleapis.com/css?family=Rubik:300,400,500,700,900&display=swap"); body { font-family: "Rubik", sans-serif; font-weight: normal; font-style: normal; color: rgba(0, 0, 0, 0.64); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } * { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } img { max-width: 100%; } a:focus, button:focus, input:focus, textarea:focus { text-decoration: none; outline: none; } a:focus, a:hover { text-decoration: none; } a, i, span { display: inline-block; text-decoration: none; } audio, canvas, iframe, img, svg, video { vertical-align: middle; } h1, h2, h3, h4, h5, h6 { font-family: "Rubik", sans-serif; color: #000; margin: 0; } h1 { font-size: 48px; } h2 { font-size: 36px; } h3 { font-size: 28px; } h4 { font-size: 22px; } h5 { font-size: 18px; } h6 { font-size: 16px; } ol, ul { margin: 0; padding: 0; list-style-type: none; } p { font-size: 16px; line-height: 22px; font-weight: 400; color: rgba(0, 0, 0, 0.64); margin: 0; } .bg_cover { background-position: center center; background-size: cover; background-repeat: no-repeat; width: 100%; height: 100%; } .sticky { position: fixed; top: 0; left: 0; z-index: 9999; background: #fff; width: 100%; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } /*===== All Preloader Style =====*/ .preloader { /* Body Overlay */ position: fixed; top: 0; left: 0; display: table; height: 100%; width: 100%; /* Change Background Color */ background: #fff; z-index: 99999; } .preloader .loader { display: table-cell; vertical-align: middle; text-align: center; } .preloader .loader .ytp-spinner { position: absolute; left: 50%; top: 50%; width: 64px; margin-left: -32px; z-index: 18; pointer-events: none; } .preloader .loader .ytp-spinner .ytp-spinner-container { pointer-events: none; position: absolute; width: 100%; padding-bottom: 100%; top: 50%; left: 50%; margin-top: -50%; margin-left: -50%; -webkit-animation: ytp-spinner-linspin 1568.2353ms linear infinite; animation: ytp-spinner-linspin 1568.2353ms linear infinite; } .preloader .loader .ytp-spinner .ytp-spinner-container .ytp-spinner-rotator { position: absolute; width: 100%; height: 100%; -webkit-animation: ytp-spinner-easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: ytp-spinner-easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; } .preloader .loader .ytp-spinner .ytp-spinner-container .ytp-spinner-rotator .ytp-spinner-left { position: absolute; top: 0; left: 0; bottom: 0; overflow: hidden; right: 50%; } .preloader .loader .ytp-spinner .ytp-spinner-container .ytp-spinner-rotator .ytp-spinner-right { position: absolute; top: 0; right: 0; bottom: 0; overflow: hidden; left: 50%; } .preloader .loader .ytp-spinner-circle { -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; width: 200%; height: 100%; border-style: solid; /* Spinner Color */ border-color: #542DED #542DED #D1D1D1; border-radius: 50%; border-width: 6px; } .preloader .loader .ytp-spinner-left .ytp-spinner-circle { left: 0; right: -100%; border-right-color: #D1D1D1; -webkit-animation: ytp-spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: ytp-spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; } .preloader .loader .ytp-spinner-right .ytp-spinner-circle { left: -100%; right: 0; border-left-color: #D1D1D1; -webkit-animation: ytp-right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: ytp-right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; } /* Preloader Animations */ @-webkit-keyframes ytp-spinner-linspin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes ytp-spinner-linspin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes ytp-spinner-easespin { 12.5% { -webkit-transform: rotate(135deg); transform: rotate(135deg); } 25% { -webkit-transform: rotate(270deg); transform: rotate(270deg); } 37.5% { -webkit-transform: rotate(405deg); transform: rotate(405deg); } 50% { -webkit-transform: rotate(540deg); transform: rotate(540deg); } 62.5% { -webkit-transform: rotate(675deg); transform: rotate(675deg); } 75% { -webkit-transform: rotate(810deg); transform: rotate(810deg); } 87.5% { -webkit-transform: rotate(945deg); transform: rotate(945deg); } to { -webkit-transform: rotate(1080deg); transform: rotate(1080deg); } } @keyframes ytp-spinner-easespin { 12.5% { -webkit-transform: rotate(135deg); transform: rotate(135deg); } 25% { -webkit-transform: rotate(270deg); transform: rotate(270deg); } 37.5% { -webkit-transform: rotate(405deg); transform: rotate(405deg); } 50% { -webkit-transform: rotate(540deg); transform: rotate(540deg); } 62.5% { -webkit-transform: rotate(675deg); transform: rotate(675deg); } 75% { -webkit-transform: rotate(810deg); transform: rotate(810deg); } 87.5% { -webkit-transform: rotate(945deg); transform: rotate(945deg); } to { -webkit-transform: rotate(1080deg); transform: rotate(1080deg); } } @-webkit-keyframes ytp-spinner-left-spin { 0% { -webkit-transform: rotate(130deg); transform: rotate(130deg); } 50% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } to { -webkit-transform: rotate(130deg); transform: rotate(130deg); } } @keyframes ytp-spinner-left-spin { 0% { -webkit-transform: rotate(130deg); transform: rotate(130deg); } 50% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } to { -webkit-transform: rotate(130deg); transform: rotate(130deg); } } @-webkit-keyframes ytp-right-spin { 0% { -webkit-transform: rotate(-130deg); transform: rotate(-130deg); } 50% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } to { -webkit-transform: rotate(-130deg); transform: rotate(-130deg); } } @keyframes ytp-right-spin { 0% { -webkit-transform: rotate(-130deg); transform: rotate(-130deg); } 50% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } to { -webkit-transform: rotate(-130deg); transform: rotate(-130deg); } } /*================================================================== 02.Page Banner css ==================================================================*/ /*===== Page Banner Style =====*/ .page-banner { background-color: #542DED; padding-top: 40px; padding-bottom: 45px; } .page-banner-content .sub-title { font-weight: 500; font-size: 44px; line-height: 55px; color: #fff; } @media (max-width: 767px) { .page-banner-content .sub-title { font-size: 24px; line-height: 28px; } } .page-banner-content .page-title { font-weight: 500; font-size: 60px; line-height: 60px; color: #fff; margin-top: 10px; } @media (max-width: 767px) { .page-banner-content .page-title { font-size: 30px; line-height: 35px; } } /*================================================================== 03.Colors css ==================================================================*/ /*========== White Color =========*/ .white-color { color: #fff; } .white-variant { color: #FAFAFA; } .white-light { color: #F2F2F2; } .bg-white-color { background-color: #fff; } .bg-white-variant { background-color: #FAFAFA; } .bg-white-light { background-color: #F2F2F2; } /*========== Dark Color =========*/ .dark-color { color: #000; } .dark-variant { color: #4C4C4C; } .dark-light { color: #7D7D7D; } .bg-dark-color { background-color: #000; } .bg-dark-variant { background-color: #4C4C4C; } .bg-dark-light { background-color: #7D7D7D; } /*========== Gray Color =========*/ .gray-1 { color: #828282; } .gray-2 { color: #BDBDBD; } .gray-3 { color: #D1D1D1; } .gray-4 { color: #EFEFEF; } .bg-gray-1 { background-color: #828282; } .bg-gray-2 { background-color: #BDBDBD; } .bg-gray-3 { background-color: #D1D1D1; } .bg-gray-4 { background-color: #EFEFEF; } /*========== Primary Shades Color =========*/ .primary-1 { color: #0009D1; } .primary-2 { color: #001AD8; } .primary-3 { color: #4529E7; } .primary-4 { color: #754FF1; } .primary-5 { color: #9270F3; } .primary-6 { color: #B39BF6; } .primary-7 { color: #D2C3F9; } .bg-primary-1 { background-color: #0009D1; } .bg-primary-2 { background-color: #001AD8; } .bg-primary-3 { background-color: #4529E7; } .bg-primary-4 { background-color: #754FF1; } .bg-primary-5 { background-color: #9270F3; } .bg-primary-6 { background-color: #B39BF6; } .bg-primary-7 { background-color: #D2C3F9; } /*========== Primary Color =========*/ .primary-color { color: #542DED; } .primary-variant { color: #2A21DE; } .primary-light { color: #EEE6FD; } .bg-primary-color { background-color: #542DED; } .bg-primary-variant { background-color: #2A21DE; } .bg-primary-light { background-color: #EEE6FD; } /*========== Secondary 1 Color =========*/ .secondary-1-color { color: #E14C7B; } .secondary-1-variant { color: #B62F5C; } .secondary-1-light { color: #FAE5EC; } .bg-secondary-1-color { background-color: #E14C7B; } .bg-secondary-1-variant { background-color: #B62F5C; } .bg-secondary-1-light { background-color: #FAE5EC; } /*========== Secondary 2 Color =========*/ .secondary-2-color { color: #00D4E0; } .secondary-2-variant { color: #00ACB2; } .secondary-2-light { color: #DFFAFA; } .bg-secondary-2-color { background-color: #00D4E0; } .bg-secondary-2-variant { background-color: #00ACB2; } .bg-secondary-2-light { background-color: #DFFAFA; } /*========== Secondary 3 Color =========*/ .secondary-3-color { color: #393D8E; } .secondary-3-variant { color: #161359; } .secondary-3-light { color: #E6E7F1; } .bg-secondary-3-color { background-color: #393D8E; } .bg-secondary-3-variant { background-color: #161359; } .bg-secondary-3-light { background-color: #E6E7F1; } /*========== Success Color =========*/ .success-color { color: #7CB637; } .success-variant { color: #548E24; } .success-light { color: #F1F8E8; } .bg-success-color { background-color: #7CB637; } .bg-success-variant { background-color: #548E24; } .bg-success-light { background-color: #F1F8E8; } /*========== Info Color =========*/ .info-color { color: #00C2FE; } .info-variant { color: #0097EF; } .info-light { color: #D8F5FF; } .bg-info-color { background-color: #00C2FE; } .bg-info-variant { background-color: #0097EF; } .bg-info-light { background-color: #D8F5FF; } /*========== Caution Color =========*/ .caution-color { color: #FFBE27; } .caution-variant { color: #F97C14; } .caution-light { color: #FFFDE6; } .bg-caution-color { background-color: #FFBE27; } .bg-caution-variant { background-color: #F97C14; } .bg-caution-light { background-color: #F1F8E8; } /*========== Error Color =========*/ .error-color { color: #FF4B22; } .error-variant { color: #CA2D0E; } .error-light { color: #FBE8E7; } .bg-error-color { background-color: #FF4B22; } .bg-error-variant { background-color: #CA2D0E; } .bg-error-light { background-color: #FBE8E7; } /*========== Primary Gradients Color =========*/ .primary-gradient-1 { background: -webkit-gradient(linear, left top, left bottom, from(#542DED), to(#2A21DE)); background: linear-gradient(#542DED 0%, #2A21DE 100%); background: linear-gradient(#542DED 0%, #2A21DE 100%); } .primary-gradient-2 { background: -webkit-gradient(linear, left top, left bottom, from(#542DED), to(#EEE6FD)); background: linear-gradient(#542DED 0%, #EEE6FD 100%); } .primary-gradient-3 { background: -webkit-gradient(linear, left top, left bottom, from(#542DED), to(#E14C7B)); background: linear-gradient(#542DED 0%, #E14C7B 100%); } .primary-gradient-4 { background: -webkit-gradient(linear, left top, left bottom, from(#542DED), to(#00D4E0)); background: linear-gradient(#542DED 0%, #00D4E0 100%); } .primary-gradient-5 { background: -webkit-gradient(linear, left top, left bottom, from(#542DED), to(#00C2FE)); background: linear-gradient(#542DED 0%, #00C2FE 100%); } .primary-gradient-6 { background: -webkit-gradient(linear, left top, left bottom, from(#542DED), to(#9270F3)); background: linear-gradient(#542DED 0%, #9270F3 100%); } .primary-gradient-7 { background: -webkit-gradient(linear, left top, left bottom, from(#542DED), to(#4C4C4C)); background: linear-gradient(#542DED 0%, #4C4C4C 100%); } /*========== Secondary Gradients Color =========*/ .secondary-gradient-1 { background: -webkit-gradient(linear, left top, left bottom, from(#E14C7B), to(#B62F5C)); background: linear-gradient(#E14C7B 0%, #B62F5C 100%); } .secondary-gradient-2 { background: -webkit-gradient(linear, left top, left bottom, from(#E14C7B), to(#FAE5EC)); background: linear-gradient(#E14C7B 0%, #FAE5EC 100%); } .secondary-gradient-3 { background: -webkit-gradient(linear, left top, left bottom, from(#E14C7B), to(#00D4E0)); background: linear-gradient(#E14C7B 0%, #00D4E0 100%); } .secondary-gradient-4 { background: -webkit-gradient(linear, left top, left bottom, from(#E14C7B), to(#393D8E)); background: linear-gradient(#E14C7B 0%, #393D8E 100%); } .secondary-gradient-5 { background: -webkit-gradient(linear, left top, left bottom, from(#E14C7B), to(#00C2FE)); background: linear-gradient(#E14C7B 0%, #00C2FE 100%); } .secondary-gradient-6 { background: -webkit-gradient(linear, left top, left bottom, from(#E14C7B), to(#F97C14)); background: linear-gradient(#E14C7B 0%, #F97C14 100%); } .secondary-gradient-7 { background: -webkit-gradient(linear, left top, left bottom, from(#E14C7B), to(#4C4C4C)); background: linear-gradient(#E14C7B 0%, #4C4C4C 100%); } /*========== Accent Gradients Color =========*/ .accent-gradient-1 { background: -webkit-gradient(linear, left top, left bottom, from(#00D4E0), to(#00ACB2)); background: linear-gradient(#00D4E0 0%, #00ACB2 100%); } .accent-gradient-2 { background: -webkit-gradient(linear, left top, left bottom, from(#00D4E0), to(#DFFAFA)); background: linear-gradient(#00D4E0 0%, #DFFAFA 100%); } .accent-gradient-3 { background: -webkit-gradient(linear, left top, left bottom, from(#00D4E0), to(#393D8E)); background: linear-gradient(#00D4E0 0%, #393D8E 100%); } .accent-gradient-4 { background: -webkit-gradient(linear, left top, left bottom, from(#00D4E0), to(#00C2FE)); background: linear-gradient(#00D4E0 0%, #00C2FE 100%); } .accent-gradient-5 { background: -webkit-gradient(linear, left top, left bottom, from(#00D4E0), to(#F97C14)); background: linear-gradient(#00D4E0 0%, #F97C14 100%); } .accent-gradient-6 { background: -webkit-gradient(linear, left top, left bottom, from(#00D4E0), to(#FF4B22)); background: linear-gradient(#00D4E0 0%, #FF4B22 100%); } .accent-gradient-7 { background: -webkit-gradient(linear, left top, left bottom, from(#00D4E0), to(#4C4C4C)); background: linear-gradient(#00D4E0 0%, #4C4C4C 100%); } /*========== Success Gradients Color =========*/ .success-gradient-1 { background: -webkit-gradient(linear, left top, left bottom, from(#7CB637), to(#548E24)); background: linear-gradient(#7CB637 0%, #548E24 100%); } .success-gradient-2 { background: -webkit-gradient(linear, left top, left bottom, from(#7CB637), to(#F1F8E8)); background: linear-gradient(#7CB637 0%, #F1F8E8 100%); } .success-gradient-3 { background: -webkit-gradient(linear, left top, left bottom, from(#7CB637), to(#000)); background: linear-gradient(#7CB637 0%, #000 100%); } /*========== Info Gradients Color =========*/ .info-gradient-1 { background: -webkit-gradient(linear, left top, left bottom, from(#00C2FE), to(#0097EF)); background: linear-gradient(#00C2FE 0%, #0097EF 100%); } .info-gradient-2 { background: -webkit-gradient(linear, left top, left bottom, from(#00C2FE), to(#D8F5FF)); background: linear-gradient(#00C2FE 0%, #D8F5FF 100%); } .info-gradient-3 { background: -webkit-gradient(linear, left top, left bottom, from(#00C2FE), to(#000)); background: linear-gradient(#00C2FE 0%, #000 100%); } /*========== Caution Gradients Color =========*/ .caution-gradient-1 { background: -webkit-gradient(linear, left top, left bottom, from(#FFBE27), to(#F97C14)); background: linear-gradient(#FFBE27 0%, #F97C14 100%); } .caution-gradient-2 { background: -webkit-gradient(linear, left top, left bottom, from(#FFBE27), to(#FFFDE6)); background: linear-gradient(#FFBE27 0%, #FFFDE6 100%); } .caution-gradient-3 { background: -webkit-gradient(linear, left top, left bottom, from(#FFBE27), to(#000)); background: linear-gradient(#FFBE27 0%, #000 100%); } /*========== Error Gradients Color =========*/ .error-gradient-1 { background: -webkit-gradient(linear, left top, left bottom, from(#FF4B22), to(#CA2D0E)); background: linear-gradient(#FF4B22 0%, #CA2D0E 100%); } .error-gradient-2 { background: -webkit-gradient(linear, left top, left bottom, from(#FF4B22), to(#FBE8E7)); background: linear-gradient(#FF4B22 0%, #FBE8E7 100%); } .error-gradient-3 { background: -webkit-gradient(linear, left top, left bottom, from(#FF4B22), to(#000)); background: linear-gradient(#FF4B22 0%, #000 100%); } /*================================================================== 04.Typography css ==================================================================*/ /*========== Heading =========*/ .heading-1 { font-size: 44px; line-height: 55px; } .heading-2 { font-size: 36px; line-height: 45px; } .heading-3 { font-size: 28px; line-height: 35px; } .heading-4 { font-size: 24px; line-height: 30px; } .heading-5 { font-size: 20px; line-height: 28px; } .heading-6 { font-size: 14px; line-height: 18px; } /*========== paragraph =========*/ .paragraph-large { font-size: 18px; line-height: 26px; } .paragraph { font-size: 16px; line-height: 22px; } .paragraph-small { font-size: 14px; line-height: 20px; } .paragraph-xsmall { font-size: 12px; line-height: 16px; } /*========== Font Weight =========*/ .display-1 { font-size: 88px; line-height: 110px; } .display-2 { font-size: 76px; line-height: 95px; } .display-3 { font-size: 64px; line-height: 80px; } .display-4 { font-size: 52px; line-height: 65px; } /*========== Font Weight =========*/ .font-weight-300 { font-weight: 300; } .font-weight-400 { font-weight: 400; } .font-weight-500 { font-weight: 500; } .font-weight-700 { font-weight: 700; } /*================================================================== 05. Buttons css ==================================================================*/ /*===== All Button Common Style =====*/ .main-btn { display: inline-block; text-align: center; white-space: nowrap; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border: 0; padding: 0 16px; font-size: 16px; font-weight: 500; height: 40px; line-height: 40px; cursor: pointer; z-index: 5; -webkit-transition: all 0.4s linear; transition: all 0.4s linear; text-transform: uppercase; letter-spacing: 1px; border-radius: 5px; overflow: hidden; position: relative; background-color: transparent; } @media (max-width: 767px) { .main-btn { padding: 0 14px; font-size: 14px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .main-btn { padding: 0 16px; font-size: 16px; } } .main-btn i { margin: 0 3px; font-size: 22px; line-height: 1; position: relative; top: 2px; } .main-btn img { margin: 0 5px 0 2px; width: 22px; } .main-btn::before { position: absolute; content: ''; top: 50%; left: 50%; width: 0; height: 0; padding: 50%; border-radius: 50%; background-color: rgba(0, 0, 0, 0.15); z-index: -1; color: #fff; -webkit-transform: translate3d(-50%, -50%, 0) scale(0); transform: translate3d(-50%, -50%, 0) scale(0); -webkit-transition: all 0.4s linear; transition: all 0.4s linear; } .icon-btn { width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 50%; font-size: 24px; white-space: nowrap; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border: 0; cursor: pointer; z-index: 5; -webkit-transition: all 0.4s linear; transition: all 0.4s linear; position: relative; overflow: hidden; } .icon-btn img { width: 22px; } .icon-btn::before { position: absolute; content: ''; top: 50%; left: 50%; width: 0; height: 0; padding: 50%; border-radius: 50%; background-color: rgba(0, 0, 0, 0.15); z-index: -1; color: #fff; -webkit-transform: translate3d(-50%, -50%, 0) scale(0); transform: translate3d(-50%, -50%, 0) scale(0); -webkit-transition: all 0.4s linear; transition: all 0.4s linear; } .btn-group > .main-btn:not(:last-child):not(.toggle) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .btn-group > .main-btn:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; } .btn-group.group-2 > .main-btn:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .btn-group.group-2 > .main-btn:not(:first-child):not(.toggle) { border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 0; border-bottom-left-radius: 0; } /*===== Button Shadow Style =====*/ .btn-shadow { -webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.32); box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.32); } /*===== Primary Button Style =====*/ .primary-icon, .primary-btn { background-color: #542DED; color: #fff; } .primary-icon:hover, .primary-btn:hover { color: #fff; } .primary-icon:hover::before, .primary-btn:hover::before { -webkit-transform: translate3d(-50%, -50%, 0) scale(1.5); transform: translate3d(-50%, -50%, 0) scale(1.5); } .primary-icon-border, .primary-btn-border { border: 1px solid #542DED; color: #542DED; line-height: 38px; } .primary-icon-border:hover, .primary-btn-border:hover { -webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.32); box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.32); color: #542DED; } .primary-icon-text, .primary-btn-text { color: #542DED; } .primary-icon-text:hover, .primary-btn-text:hover { color: #542DED; } /*===== Secondary 1 Button Style =====*/ .secondary-1-icon, .secondary-1-btn { background-color: #E14C7B; color: #fff; } .secondary-1-icon:hover, .secondary-1-btn:hover { color: #fff; } .secondary-1-icon:hover::before, .secondary-1-btn:hover::before { -webkit-transform: translate3d(-50%, -50%, 0) scale(1.5); transform: translate3d(-50%, -50%, 0) scale(1.5); } .secondary-1-icon-border, .secondary-1-btn-border { border: 1px solid #E14C7B; color: #E14C7B; line-height: 38px; } .secondary-1-icon-border:hover, .secondary-1-btn-border:hover { -webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.32); box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.32); color: #E14C7B; } .secondary-1-icon-text, .secondary-1-btn-text { color: #E14C7B; } .secondary-1-icon-text:hover, .secondary-1-btn-text:hover { color: #E14C7B; } /*===== Secondary 2 Button Style =====*/ .secondary-2-icon, .secondary-2-btn { background-color: #00D4E0; color: #fff; } .secondary-2-icon:hover, .secondary-2-btn:hover { color: #fff; } .secondary-2-icon:hover::before, .secondary-2-btn:hover::before { -webkit-transform: translate3d(-50%, -50%, 0) scale(1.5); transform: translate3d(-50%, -50%, 0) scale(1.5); } .secondary-2-icon-border, .secondary-2-btn-border { border: 1px solid #00D4E0; color: #00D4E0; } .secondary-2-icon-border:hover, .secondary-2-btn-border:hover { -webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.32); box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.32); color: #00D4E0; } .secondary-2-icon-text, .secondary-2-btn-text { color: #00D4E0; } .secondary-2-icon-text:hover, .secondary-2-btn-text:hover { color: #00D4E0; } /*===== Secondary 3 Button Style =====*/ .secondary-3-icon, .secondary-3-btn { background-color: #393D8E; color: #fff; } .secondary-3-icon:hover, .secondary-3-btn:hover { color: #fff; } .secondary-3-icon:hover::before, .secondary-3-btn:hover::before { -webkit-transform: translate3d(-50%, -50%, 0) scale(1.5); transform: translate3d(-50%, -50%, 0) scale(1.5); } .secondary-3-icon-border, .secondary-3-btn-border { border: 1px solid #393D8E; color: #393D8E; } .secondary-3-icon-border:hover, .secondary-3-btn-border:hover { -webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.32); box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.32); color: #393D8E; } .secondary-3-icon-text, .secondary-3-btn-text { color: #393D8E; } .secondary-3-icon-text:hover, .secondary-3-btn-text:hover { color: #393D8E; } /*===== Success Button Style =====*/ .success-icon, .success-btn { background-color: #7CB637; color: #fff; } .success-icon:hover, .success-btn:hover { color: #fff; } .success-icon:hover::before, .success-btn:hover::before { -webkit-transform: translate3d(-50%, -50%, 0) scale(1.5); transform: translate3d(-50%, -50%, 0) scale(1.5); } .success-icon-border, .success-btn-border { border: 1px solid #7CB637; color: #7CB637; } .success-icon-border:hover, .success-btn-border:hover { -webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.32); box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.32); color: #7CB637; } .success-icon-text, .success-btn-text { color: #7CB637; } .success-icon-text:hover, .success-btn-text:hover { color: #7CB637; } /*===== Info Button Style =====*/ .info-icon, .info-btn { background-color: #00C2FE; color: #fff; } .info-icon:hover, .info-btn:hover { color: #fff; } .info-icon:hover::before, .info-btn:hover::before { -webkit-transform: translate3d(-50%, -50%, 0) scale(1.5); transform: translate3d(-50%, -50%, 0) scale(1.5); } .info-icon-border, .info-btn-border { border: 1px solid #00C2FE; color: #00C2FE; } .info-icon-border:hover, .info-btn-border:hover { -webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.32); box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.32); color: #00C2FE; } .info-icon-text, .info-btn-text { color: #00C2FE; } .info-icon-text:hover, .info-btn-text:hover { color: #00C2FE; } /*===== Caution Button Style =====*/ .caution-icon, .caution-btn { background-color: #FFBE27; color: #fff; } .caution-icon:hover, .caution-btn:hover { color: #fff; } .caution-icon:hover::before, .caution-btn:hover::before { -webkit-transform: translate3d(-50%, -50%, 0) scale(1.5); transform: translate3d(-50%, -50%, 0) scale(1.5); } .caution-icon-border, .caution-btn-border { border: 1px solid #FFBE27; color: #FFBE27; } .caution-icon-border:hover, .caution-btn-border:hover { -webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.32); box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.32); color: #FFBE27; } .caution-icon-text, .caution-btn-text { color: #FFBE27; } .caution-icon-text:hover, .caution-btn-text:hover { color: #FFBE27; } /*===== Error Button Style =====*/ .error-icon, .error-btn { background-color: #FF4B22; color: #fff; } .error-icon:hover, .error-btn:hover { color: #fff; } .error-icon:hover::before, .error-btn:hover::before { -webkit-transform: translate3d(-50%, -50%, 0) scale(1.5); transform: translate3d(-50%, -50%, 0) scale(1.5); } .error-icon-border, .error-btn-border { border: 1px solid #FF4B22; color: #FF4B22; } .error-icon-border:hover, .error-btn-border:hover { -webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.32); box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.32); color: #FF4B22; } .error-icon-text, .error-btn-text { color: #FF4B22; } .error-icon-text:hover, .error-btn-text:hover { color: #FF4B22; } /*===== Gray Button Style =====*/ .gray-icon, .gray-btn { background-color: #D1D1D1; color: #7D7D7D; } .gray-icon:hover, .gray-btn:hover { color: #7D7D7D; } .gray-icon:hover::before, .gray-btn:hover::before { -webkit-transform: translate3d(-50%, -50%, 0) scale(1.5); transform: translate3d(-50%, -50%, 0) scale(1.5); } .gray-icon-border, .gray-btn-border { border: 1px solid #7D7D7D; color: #7D7D7D; } .gray-icon-border:hover, .gray-btn-border:hover { -webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.32); box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.32); color: #7D7D7D; } .gray-icon-text, .gray-btn-text { color: #7D7D7D; } .gray-icon-text:hover, .gray-btn-text:hover { color: #7D7D7D; } /*===== White Button Style =====*/ .white-icon, .white-btn { background-color: #fff; color: #542DED; } .white-icon:hover, .white-btn:hover { color: #fff; } .white-icon:hover::before, .white-btn:hover::before { -webkit-transform: translate3d(-50%, -50%, 0) scale(1.5); transform: translate3d(-50%, -50%, 0) scale(1.5); } .white-icon-border, .white-btn-border { border: 1px solid #fff; color: #fff; } .white-icon-border:hover, .white-btn-border:hover { -webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.32); box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.32); color: #fff; } .white-icon-text, .white-btn-text { color: #fff; } .white-icon-text:hover, .white-btn-text:hover { color: #fff; } /*===== Icon Text Style =====*/ .icon-text-wrapper .icon-text-list { padding-top: 15px; } .icon-text-wrapper .icon-text-list li { display: inline-block; } .icon-text-wrapper .icon-text-list li + li { margin-left: 15px; margin-top: 15px; } .icon-text { height: 20px; line-height: 20px; padding: 0 8px; border-radius: 18px; font-weight: 500; font-size: 12px; } .icon-text.text-style-1 { background-color: #E14C7B; color: #fff; } .icon-text.text-style-2 { background-color: #B62F5C; color: #fff; -webkit-box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.25); box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.25); } .icon-text.text-style-3 { color: #E14C7B; border: 1px solid #E14C7B; line-height: 18px; } .icon-text.text-style-4 { background-color: #fff; color: #E14C7B; -webkit-box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.25); box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.25); } .icon-text.text-style-5 { color: #00D4E0; border: 1px solid #E14C7B; line-height: 18px; } .icon-text.text-style-6 { background-color: #fff; color: #00D4E0; -webkit-box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.25); box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.25); } .icon-text.text-style-7 { color: #7CB637; border: 1px solid #E14C7B; line-height: 18px; } .icon-text.text-style-8 { background-color: #fff; color: #7CB637; -webkit-box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.25); box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.25); } /*===== Icon Text Button Style =====*/ .icon-text-btn { position: relative; overflow: visible; } .icon-text-btn .main-btn { text-transform: capitalize; } .icon-text-btn .icon-text { position: absolute; top: -7px; right: -8px; z-index: 5; } /*===== Product Quantity Style =====*/ .product-quantity { overflow: hidden; border-radius: 4px; } .product-quantity button { width: 40px; height: 40px; padding: 0; font-size: 24px; border: 0; background-color: transparent; -webkit-transition: all 0.4s linear; transition: all 0.4s linear; } .product-quantity input { width: 55px; height: 40px; border: 0; padding: 0 10px; text-align: center; font-weight: 700; background-color: transparent; } .product-quantity.quantity-1 { background-color: #542DED; } .product-quantity.quantity-1 button { color: rgba(255, 255, 255, 0.8); } .product-quantity.quantity-1 button:hover { color: #fff; } .product-quantity.quantity-1 input { color: #fff; } .product-quantity.quantity-2 { background-color: #fff; border: 1px solid #EFEFEF; } .product-quantity.quantity-2 button { color: rgba(0, 0, 0, 0.8); } .product-quantity.quantity-2 button:hover { color: #542DED; } .product-quantity.quantity-2 input { color: #000; } /*================================================================== 06.Dropdown css ==================================================================*/ /*===== All Dropdown Style =====*/ .dropdown .main-btn { text-transform: capitalize; text-align: left; } .dropdown .main-btn::before { display: none; } .dropdown .main-btn i { float: right; line-height: 35px; font-size: 24px; margin: 0; } .dropdown .main-btn.toggle { width: 40px; padding: 0; } .dropdown .main-btn.toggle i { float: none; left: 7px; } .dropdown .main-btn.white-btn:hover { color: #542DED; } .dropdown .dropdown-menu { min-width: inherit; width: 256px; -webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.32); box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.32); border: 0; border-radius: 4px; padding: 0; margin-top: 0; } .dropdown .dropdown-menu li { position: relative; } .dropdown .dropdown-menu li a { font-weight: 500; font-size: 16px; padding: 10px 16px; display: block; -webkit-transition: all 0.4s linear; transition: all 0.4s linear; } @media only screen and (min-width: 768px) and (max-width: 991px) { .dropdown .dropdown-menu li a { font-size: 14px; } } @media (max-width: 767px) { .dropdown .dropdown-menu li a { font-size: 14px; } } .dropdown .dropdown-menu li a i { float: right; font-size: 24px; line-height: 1; -webkit-transition: all 0.4s linear; transition: all 0.4s linear; } @media only screen and (min-width: 768px) and (max-width: 991px) { .dropdown .dropdown-menu li a i { display: none; } } @media (max-width: 767px) { .dropdown .dropdown-menu li a i { display: none; } } .dropdown .dropdown-menu li a .sub-nav-toggler { display: none; } @media only screen and (min-width: 768px) and (max-width: 991px) { .dropdown .dropdown-menu li a .sub-nav-toggler { display: block; position: absolute; right: 0; top: 0; background: none; font-size: 16px; border: 0; width: 41px; height: 41px; } } @media (max-width: 767px) { .dropdown .dropdown-menu li a .sub-nav-toggler { display: block; position: absolute; right: 0; top: 0; background: none; font-size: 16px; border: 0; width: 41px; height: 41px; } } .dropdown .dropdown-menu li a .sub-nav-toggler span { width: 8px; height: 8px; border-left: 1px solid; border-bottom: 1px solid; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); position: relative; top: -5px; } .dropdown .dropdown-menu li:first-child a { border-top-left-radius: 4px; border-top-right-radius: 4px; } .dropdown .dropdown-menu li:last-child a { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } .dropdown .dropdown-menu li .sub-menu { position: absolute; top: 0; left: 100%; width: 256px; -webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.32); box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.32); border: 0; border-radius: 4px; opacity: 0; visibility: hidden; -webkit-transition: all 0.4s linear; transition: all 0.4s linear; } @media only screen and (min-width: 768px) and (max-width: 991px) { .dropdown .dropdown-menu li .sub-menu { position: relative; width: 100%; top: 0; left: 0; display: none; opacity: 1; visibility: visible; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: all 0s linear; transition: all 0s linear; padding-left: 15px; } } @media (max-width: 767px) { .dropdown .dropdown-menu li .sub-menu { position: relative; width: 100%; top: 0; left: 0; display: none; opacity: 1; visibility: visible; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: all 0s linear; transition: all 0s linear; padding-left: 15px; } } .dropdown .dropdown-menu li:hover > .sub-menu { opacity: 1; visibility: visible; } .dropdown.dropdown-white .dropdown-menu { background-color: #fff; } .dropdown.dropdown-white .dropdown-menu li { position: relative; } .dropdown.dropdown-white .dropdown-menu li a { color: #000; } .dropdown.dropdown-white .dropdown-menu li a i { color: #542DED; } @media only screen and (min-width: 768px) and (max-width: 991px) { .dropdown.dropdown-white .dropdown-menu li a .sub-nav-toggler { color: #000; } } @media (max-width: 767px) { .dropdown.dropdown-white .dropdown-menu li a .sub-nav-toggler { color: #000; } } .dropdown.dropdown-white .dropdown-menu li a .sub-nav-toggler span { border-color: #000; } .dropdown.dropdown-white .dropdown-menu li:hover > a { background-color: #542DED; color: #fff; } .dropdown.dropdown-white .dropdown-menu li:hover > a i { color: #fff; } @media only screen and (min-width: 768px) and (max-width: 991px) { .dropdown.dropdown-white .dropdown-menu li:hover > a .sub-nav-toggler { color: #fff; } } @media (max-width: 767px) { .dropdown.dropdown-white .dropdown-menu li:hover > a .sub-nav-toggler { color: #fff; } } .dropdown.dropdown-white .dropdown-menu li:hover > a .sub-nav-toggler span { border-color: #fff; } .dropdown.dropdown-white .dropdown-menu li .sub-menu { background-color: #fff; } @media only screen and (min-width: 768px) and (max-width: 991px) { .dropdown.dropdown-white .dropdown-menu li .sub-menu { background-color: #FAFAFA; } } @media (max-width: 767px) { .dropdown.dropdown-white .dropdown-menu li .sub-menu { background-color: #FAFAFA; } } .dropdown.dropdown-primary .dropdown-menu { background-color: #542DED; } .dropdown.dropdown-primary .dropdown-menu li { position: relative; } .dropdown.dropdown-primary .dropdown-menu li a { color: #fff; } .dropdown.dropdown-primary .dropdown-menu li a i { color: #fff; } @media only screen and (min-width: 768px) and (max-width: 991px) { .dropdown.dropdown-primary .dropdown-menu li a .sub-nav-toggler { color: #fff; } } @media (max-width: 767px) { .dropdown.dropdown-primary .dropdown-menu li a .sub-nav-toggler { color: #fff; } } .dropdown.dropdown-primary .dropdown-menu li a .sub-nav-toggler span { border-color: #fff; } .dropdown.dropdown-primary .dropdown-menu li:hover > a { background-color: #2A21DE; color: #fff; } .dropdown.dropdown-primary .dropdown-menu li:hover > a i { color: #fff; } .dropdown.dropdown-primary .dropdown-menu li .sub-menu { background-color: #542DED; } /*================================================================== 07.Alert & Message css ==================================================================*/ /*===== All Alert Style =====*/ .alert { padding: 14px 16px; padding-right: 40px; margin-bottom: 0; font-size: 16px; } @media (max-width: 767px) { .alert { font-size: 14px; padding: 10px 12px; padding-right: 40px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .alert { font-size: 16px; padding: 14px 16px; padding-right: 40px; } } .alert.alert-dismissible .close { padding: 9px 14px; font-size: 24px; } @media (max-width: 767px) { .alert.alert-dismissible .close { font-size: 20px; padding: 6px 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .alert.alert-dismissible .close { font-size: 24px; padding: 9px 14px; } } .alert figure { margin-bottom: 0; } .alert figure i { font-size: 24px; line-height: 24px; } @media (max-width: 767px) { .alert figure i { font-size: 20px; line-height: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .alert figure i { font-size: 24px; line-height: 24px; } } .alert figure figcaption { padding-left: 10px; } .alert figure figcaption p { margin-top: 8px; } @media (max-width: 767px) { .alert figure figcaption p { font-size: 14px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .alert figure figcaption p { font-size: 16px; } } /*===== Alert Primary Style =====*/ .alert-primary-light { background-color: #EEE6FD; color: #542DED; } .alert-primary-light.alert-dismissible .close { color: rgba(0, 0, 0, 0.8); } .alert-primary-light.alert-dismissible .close:hover { color: rgba(0, 0, 0, 0.8); } .alert-primary-light figure figcaption p { color: #000; } .alert-primary-variant { background-color: #EEE6FD; color: #2A21DE; font-weight: 500; } .alert-primary-variant.alert-dismissible .close { color: rgba(0, 0, 0, 0.8); } .alert-primary-variant.alert-dismissible .close:hover { color: rgba(0, 0, 0, 0.8); } .alert-primary-variant figure figcaption p { color: #000; } .alert-primary-bg { background-color: #542DED; color: #fff; } .alert-primary-bg.alert-dismissible .close { color: rgba(255, 255, 255, 0.8); } .alert-primary-bg.alert-dismissible .close:hover { color: rgba(255, 255, 255, 0.8); } .alert-primary-bg figure figcaption p { color: #fff; } .alert-primary-variant-bg { background-color: #2A21DE; color: #fff; font-weight: 500; } .alert-primary-variant-bg.alert-dismissible .close { color: rgba(255, 255, 255, 0.8); } .alert-primary-variant-bg.alert-dismissible .close:hover { color: rgba(255, 255, 255, 0.8); } .alert-primary-variant-bg figure figcaption p { color: #fff; } /*===== Alert Secondary 1 Style =====*/ .alert-secondary-1-light { background-color: #FAE5EC; color: #E14C7B; } .alert-secondary-1-light.alert-dismissible .close { color: rgba(0, 0, 0, 0.8); } .alert-secondary-1-light.alert-dismissible .close:hover { color: rgba(0, 0, 0, 0.8); } .alert-secondary-1-light figure figcaption p { color: #000; } .alert-secondary-1-variant { background-color: #FAE5EC; color: #B62F5C; font-weight: 500; } .alert-secondary-1-variant.alert-dismissible .close { color: rgba(0, 0, 0, 0.8); } .alert-secondary-1-variant.alert-dismissible .close:hover { color: rgba(0, 0, 0, 0.8); } .alert-secondary-1-variant figure figcaption p { color: #000; } .alert-secondary-1-bg { background-color: #E14C7B; color: #fff; } .alert-secondary-1-bg.alert-dismissible .close { color: rgba(255, 255, 255, 0.8); } .alert-secondary-1-bg.alert-dismissible .close:hover { color: rgba(255, 255, 255, 0.8); } .alert-secondary-1-bg figure figcaption p { color: #fff; } .alert-secondary-1-variant-bg { background-color: #B62F5C; color: #fff; font-weight: 500; } .alert-secondary-1-variant-bg.alert-dismissible .close { color: rgba(255, 255, 255, 0.8); } .alert-secondary-1-variant-bg.alert-dismissible .close:hover { color: rgba(255, 255, 255, 0.8); } .alert-secondary-1-variant-bg figure figcaption p { color: #fff; } /*===== Alert Success Style =====*/ .alert-success-light { background-color: #F1F8E8; color: #7CB637; } .alert-success-light.alert-dismissible .close { color: rgba(0, 0, 0, 0.8); } .alert-success-light.alert-dismissible .close:hover { color: rgba(0, 0, 0, 0.8); } .alert-success-light figure figcaption p { color: #000; } .alert-success-variant { background-color: #F1F8E8; color: #548E24; font-weight: 500; } .alert-success-variant.alert-dismissible .close { color: rgba(0, 0, 0, 0.8); } .alert-success-variant.alert-dismissible .close:hover { color: rgba(0, 0, 0, 0.8); } .alert-success-variant figure figcaption p { color: #000; } .alert-success-bg { background-color: #7CB637; color: #fff; } .alert-success-bg.alert-dismissible .close { color: rgba(255, 255, 255, 0.8); } .alert-success-bg.alert-dismissible .close:hover { color: rgba(255, 255, 255, 0.8); } .alert-success-bg figure figcaption p { color: #fff; } .alert-success-variant-bg { background-color: #548E24; color: #fff; font-weight: 500; } .alert-success-variant-bg.alert-dismissible .close { color: rgba(255, 255, 255, 0.8); } .alert-success-variant-bg.alert-dismissible .close:hover { color: rgba(255, 255, 255, 0.8); } .alert-success-variant-bg figure figcaption p { color: #fff; } /*===== Alert Info Style =====*/ .alert-info-light { background-color: #D8F5FF; color: #00C2FE; } .alert-info-light.alert-dismissible .close { color: rgba(0, 0, 0, 0.8); } .alert-info-light.alert-dismissible .close:hover { color: rgba(0, 0, 0, 0.8); } .alert-info-light figure figcaption p { color: #000; } .alert-info-variant { background-color: #D8F5FF; color: #0097EF; font-weight: 500; } .alert-info-variant.alert-dismissible .close { color: rgba(0, 0, 0, 0.8); } .alert-info-variant.alert-dismissible .close:hover { color: rgba(0, 0, 0, 0.8); } .alert-info-variant figure figcaption p { color: #000; } .alert-info-bg { background-color: #00C2FE; color: #fff; } .alert-info-bg.alert-dismissible .close { color: rgba(255, 255, 255, 0.8); } .alert-info-bg.alert-dismissible .close:hover { color: rgba(255, 255, 255, 0.8); } .alert-info-bg figure figcaption p { color: #fff; } .alert-info-variant-bg { background-color: #0097EF; color: #fff; font-weight: 500; } .alert-info-variant-bg.alert-dismissible .close { color: rgba(255, 255, 255, 0.8); } .alert-info-variant-bg.alert-dismissible .close:hover { color: rgba(255, 255, 255, 0.8); } .alert-info-variant-bg figure figcaption p { color: #fff; } /*===== Alert Caution Style =====*/ .alert-caution-light { background-color: #FFFDE6; color: #FFBE27; } .alert-caution-light.alert-dismissible .close { color: rgba(0, 0, 0, 0.8); } .alert-caution-light.alert-dismissible .close:hover { color: rgba(0, 0, 0, 0.8); } .alert-caution-light figure figcaption p { color: #000; } .alert-caution-variant { background-color: #FFFDE6; color: #F97C14; font-weight: 500; } .alert-caution-variant.alert-dismissible .close { color: rgba(0, 0, 0, 0.8); } .alert-caution-variant.alert-dismissible .close:hover { color: rgba(0, 0, 0, 0.8); } .alert-caution-variant figure figcaption p { color: #000; } .alert-caution-bg { background-color: #FFBE27; color: #fff; } .alert-caution-bg.alert-dismissible .close { color: rgba(255, 255, 255, 0.8); } .alert-caution-bg.alert-dismissible .close:hover { color: rgba(255, 255, 255, 0.8); } .alert-caution-bg figure figcaption p { color: #fff; } .alert-caution-variant-bg { background-color: #F97C14; color: #fff; font-weight: 500; } .alert-caution-variant-bg.alert-dismissible .close { color: rgba(255, 255, 255, 0.8); } .alert-caution-variant-bg.alert-dismissible .close:hover { color: rgba(255, 255, 255, 0.8); } .alert-caution-variant-bg figure figcaption p { color: #fff; } /*===== Alert Error Style =====*/ .alert-error-light { background-color: #FBE8E7; color: #FF4B22; } .alert-error-light.alert-dismissible .close { color: rgba(0, 0, 0, 0.8); } .alert-error-light.alert-dismissible .close:hover { color: rgba(0, 0, 0, 0.8); } .alert-error-light figure figcaption p { color: #000; } .alert-error-variant { background-color: #FBE8E7; color: #CA2D0E; font-weight: 500; } .alert-error-variant.alert-dismissible .close { color: rgba(0, 0, 0, 0.8); } .alert-error-variant.alert-dismissible .close:hover { color: rgba(0, 0, 0, 0.8); } .alert-error-variant figure figcaption p { color: #000; } .alert-error-bg { background-color: #FF4B22; color: #fff; } .alert-error-bg.alert-dismissible .close { color: rgba(255, 255, 255, 0.8); } .alert-error-bg.alert-dismissible .close:hover { color: rgba(255, 255, 255, 0.8); } .alert-error-bg figure figcaption p { color: #fff; } .alert-error-variant-bg { background-color: #CA2D0E; color: #fff; font-weight: 500; } .alert-error-variant-bg.alert-dismissible .close { color: rgba(255, 255, 255, 0.8); } .alert-error-variant-bg.alert-dismissible .close:hover { color: rgba(255, 255, 255, 0.8); } .alert-error-variant-bg figure figcaption p { color: #fff; } /*================================================================== 19. Product css ==================================================================*/ /*===== All Product Style 1 =====*/ .product-style-1 .product-image { position: relative; } .product-style-1 .product-image .product-active .product-item img { width: 100%; } .product-style-1 .product-image .product-active .slick-arrow { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 0.3s linear; transition: all 0.3s linear; bottom: auto; left: 4px; width: 32px; height: 32px; line-height: 32px; text-align: center; color: rgba(0, 0, 0, 0.38); font-size: 32px; z-index: 5; cursor: pointer; } .product-style-1 .product-image .product-active .slick-arrow:hover { color: #000; } .product-style-1 .product-image .product-active .slick-arrow.next { right: 4px; left: auto; } .product-style-1 .product-image .add-wishlist { width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 24px; color: black; position: absolute; top: 5px; right: 5px; z-index: 9; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .product-style-1 .product-image .add-wishlist:hover { color: #542DED; } .product-style-1 .product-content { background-color: rgba(0, 0, 0, 0.64); margin: -50px 42px 0; position: relative; z-index: 5; padding: 30px 20px 35px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .product-style-1 .product-content { margin: -50px 32px 0; padding: 20px 15px 25px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .product-style-1 .product-content { margin: -50px 32px 0; padding: 20px 15px 25px; } } @media (max-width: 767px) { .product-style-1 .product-content { margin: -50px 22px 0; padding: 20px 10px 25px; } } .product-style-1 .product-content .title a { font-weight: 500; font-size: 24px; line-height: 30px; color: #fff; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .product-style-1 .product-content .title a { font-size: 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .product-style-1 .product-content .title a { font-size: 20px; } } @media (max-width: 767px) { .product-style-1 .product-content .title a { font-size: 18px; } } .product-style-1 .product-content .title a:hover { color: #E14C7B; } .product-style-1 .product-content p { color: rgba(255, 255, 255, 0.74); font-size: 16px; line-height: 22px; font-weight: 400; margin-top: 8px; } .product-style-1 .product-content .main-btn { margin-top: 16px; font-weight: 700; letter-spacing: 0; text-transform: capitalize; } /*===== All Product Style 7 =====*/ .product-style-7 { display: -moz-flex; display: -ms-flex; display: -o-flex; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #FAFAFA; } @media (max-width: 767px) { .product-style-7 { display: block; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .product-style-7 { display: -moz-flex; display: -ms-flex; display: -o-flex; display: -webkit-box; display: -ms-flexbox; display: flex; } } .product-style-7 .product-image { position: relative; max-width: 240px; width: 100%; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .product-style-7 .product-image { max-width: 200px; } } @media (max-width: 767px) { .product-style-7 .product-image { max-width: 100%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .product-style-7 .product-image { max-width: 240px; } } .product-style-7 .product-image .product-active .product-item img { width: 100%; } .product-style-7 .product-image .product-active .slick-arrow { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 0.3s linear; transition: all 0.3s linear; bottom: auto; left: 4px; width: 32px; height: 32px; line-height: 32px; text-align: center; color: rgba(0, 0, 0, 0.38); font-size: 32px; z-index: 5; cursor: pointer; } .product-style-7 .product-image .product-active .slick-arrow:hover { color: #000; } .product-style-7 .product-image .product-active .slick-arrow.next { right: 4px; left: auto; } .product-style-7 .product-content { position: relative; z-index: 5; padding: 20px 20px 25px; -moz-flex: 1; -ms-flex: 1; -webkit-box-flex: 1; flex: 1; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .product-style-7 .product-content { padding: 20px 15px 25px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .product-style-7 .product-content { padding: 20px 15px 25px; } } @media (max-width: 767px) { .product-style-7 .product-content { padding: 20px 10px 25px; } } .product-style-7 .product-content .product-meta li { display: inline-block; } .product-style-7 .product-content .product-meta li + li { margin-left: 16px; } .product-style-7 .product-content .product-meta li a { color: #4C4C4C; font-weight: 500; font-size: 16px; line-height: 22px; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .product-style-7 .product-content .product-meta li a { font-size: 14px; line-height: 20px; } } .product-style-7 .product-content .product-meta li a:hover { color: #542DED; } .product-style-7 .product-content .product-meta li span { font-weight: 500; font-size: 16px; line-height: 22px; color: #4C4C4C; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .product-style-7 .product-content .product-meta li span { font-size: 14px; line-height: 20px; } } .product-style-7 .product-content .product-meta li span i { color: #FFBE27; font-size: 24px; } .product-style-7 .product-content .title a { font-weight: 500; font-size: 24px; line-height: 30px; color: #000; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; margin-top: 8px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .product-style-7 .product-content .title a { font-size: 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .product-style-7 .product-content .title a { font-size: 20px; } } @media (max-width: 767px) { .product-style-7 .product-content .title a { font-size: 18px; } } .product-style-7 .product-content .title a:hover { color: #542DED; } .product-style-7 .product-content p { color: rgba(0, 0, 0, 0.74); font-size: 16px; line-height: 22px; font-weight: 400; margin-top: 8px; } .product-style-7 .product-content .price { font-weight: 500; font-size: 24px; color: #E14C7B; line-height: 30px; margin-top: 8px; display: block; } .product-style-7 .product-content .main-btn { margin-top: 16px; font-weight: 700; letter-spacing: 0; text-transform: capitalize; } /*===== All Product Style 25 =====*/ .product-style-25 { background-color: #FAFAFA; position: relative; } @media (max-width: 767px) { .product-style-25 { display: block; } } .product-style-25 .product-image { position: relative; } .product-style-25 .product-image img { width: 100%; } .product-style-25 .product-content { position: absolute; width: 50%; bottom: 0; left: 0; z-index: 5; padding: 20px 20px 25px; background-color: rgba(255, 255, 255, 0.74); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .product-style-25 .product-content { padding: 15px 15px 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .product-style-25 .product-content { padding: 15px 15px 20px; width: 70%; } } @media (max-width: 767px) { .product-style-25 .product-content { padding: 15px 10px 20px; width: 70%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .product-style-25 .product-content { width: 50%; padding: 15px 20px 20px; } } .product-style-25 .product-content .title a { font-weight: 500; font-size: 24px; line-height: 30px; color: #000; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .product-style-25 .product-content .title a { line-height: 22px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .product-style-25 .product-content .title a { font-size: 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .product-style-25 .product-content .title a { font-size: 20px; } } @media (max-width: 767px) { .product-style-25 .product-content .title a { font-size: 18px; } } .product-style-25 .product-content .title a:hover { color: #542DED; } .product-style-25 .product-content p { color: rgba(0, 0, 0, 0.74); font-size: 14px; line-height: 22px; font-weight: 400; } .product-style-25 .product-content .main-btn { margin-top: 16px; font-weight: 700; letter-spacing: 0; text-transform: capitalize; } /*================================================================== 08. Form Elements css ==================================================================*/ /*===== All checkbox Style =====*/ .single-checkbox { margin-top: 16px; display: -moz-flex; display: -ms-flex; display: -o-flex; display: -webkit-box; display: -ms-flexbox; display: flex; } .single-checkbox input[type="checkbox"] { display: none; } .single-checkbox input[type="checkbox"] + label span { width: 20px; height: 20px; border: 2px solid; border-radius: 4px; cursor: pointer; position: relative; display: inline-block; margin: 0 5px -3px 0; } .single-checkbox input[type="checkbox"] + label span::before { position: absolute; content: ''; font: normal normal normal 24px "Material Design Icons"; font-size: inherit; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; top: 0; left: 0; width: 100%; height: 100%; -webkit-transition: all 0.4s linear; transition: all 0.4s linear; -webkit-transform: scale(0); transform: scale(0); font-size: 14px; line-height: 1.2; } .single-checkbox input[type="checkbox"]:checked + label span::before { -webkit-transform: scale(1); transform: scale(1); } .single-checkbox label { font-size: 16px; margin-bottom: 0; } .single-checkbox p { display: inline-block; color: #000; padding-left: 5px; } .checkbox-round input[type="checkbox"] + label span { border-radius: 50%; } .checkbox-round input[type="checkbox"] + label span::before { border-radius: 50%; } /*===== checkbox Style 1 =====*/ .checkbox-style-1 input[type="checkbox"] + label span { border-color: #542DED; } .checkbox-style-1 input[type="checkbox"] + label span::before { content: "\F012C"; } .checkbox-style-1 input[type="checkbox"]:checked + label span::before { -webkit-transform: scale(1); transform: scale(1); color: #542DED; } /*===== checkbox Style 2 =====*/ .checkbox-style-2 input[type="checkbox"] + label span { border-color: #542DED; } .checkbox-style-2 input[type="checkbox"] + label span::before { background-color: #542DED; } .checkbox-style-2 input[type="checkbox"]:checked + label span::before { -webkit-transform: scale(0.8); transform: scale(0.8); color: #542DED; } /*===== checkbox Style 3 =====*/ .checkbox-style-3 input[type="checkbox"] + label span { border-color: #542DED; } .checkbox-style-3 input[type="checkbox"] + label span::before { content: "\F012C"; background-color: #542DED; } .checkbox-style-3 input[type="checkbox"]:checked + label span::before { -webkit-transform: scale(1); transform: scale(1); color: #fff; } /*===== checkbox Style 4 =====*/ .checkbox-style-4 input[type="checkbox"] + label span { border-color: #7D7D7D; } .checkbox-style-4 input[type="checkbox"] + label span::before { content: "\F012C"; } .checkbox-style-4 input[type="checkbox"]:checked + label span:before { -webkit-transform: scale(1); transform: scale(1); color: #7D7D7D; } /*===== checkbox Style 5 =====*/ .checkbox-style-5 input[type="checkbox"] + label span { border-color: #7D7D7D; } .checkbox-style-5 input[type="checkbox"] + label span::before { background-color: #7D7D7D; } .checkbox-style-5 input[type="checkbox"]:checked + label span::before { -webkit-transform: scale(0.8); transform: scale(0.8); color: #7D7D7D; } /*===== checkbox Style 6 =====*/ .checkbox-style-6 input[type="checkbox"] + label span { border-color: #7D7D7D; } .checkbox-style-6 input[type="checkbox"] + label span::before { background-color: #7D7D7D; } .checkbox-style-6 input[type="checkbox"]:checked + label span::before { content: "\F012C"; -webkit-transform: scale(1); transform: scale(1); color: #fff; } /*===== Switch Style 1 =====*/ .switch-button { margin-top: 16px; } .switch-button input[type="checkbox"] { display: none; } .switch-button input[type="checkbox"] + label { margin-bottom: 0; } .switch-button input[type="checkbox"] + label span { position: relative; cursor: pointer; } .switch-button input[type="checkbox"] + label span::before { position: absolute; content: ''; border-radius: 50px; background-color: #EFEFEF; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; width: 100%; height: 100%; } .switch-button input[type="checkbox"] + label span::after { position: absolute; content: ''; border-radius: 50%; background-color: #BDBDBD; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .switch-button input[type="checkbox"]:checked + label span::before { background-color: #EEE6FD; } .switch-button input[type="checkbox"]:checked + label span::after { -webkit-transform: translateX(24px); transform: translateX(24px); background-color: #542DED; } .switch-button p { display: inline-block; position: relative; top: -7px; padding-left: 7px; } .switch-button.switch-style-1 input[type="checkbox"] + label span { width: 50px; height: 26px; } .switch-button.switch-style-1 input[type="checkbox"] + label span::after { width: 20px; height: 20px; top: 3px; left: 3px; } .switch-button.switch-style-2 input[type="checkbox"] + label span { width: 50px; height: 26px; } .switch-button.switch-style-2 input[type="checkbox"] + label span::before { height: 70%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .switch-button.switch-style-2 input[type="checkbox"] + label span::after { width: 26px; height: 26px; top: 0; left: 0; } /*===== All Radio Style =====*/ .single-radio { margin-top: 16px; } .single-radio input[type="radio"] { display: none; } .single-radio input[type="radio"] + label span { width: 20px; height: 20px; border: 2px solid; border-radius: 4px; cursor: pointer; position: relative; display: inline-block; margin: 0 5px -4px 0; } .single-radio input[type="radio"] + label span::before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; -webkit-transition: all 0.4s linear; transition: all 0.4s linear; -webkit-transform: scale(0); transform: scale(0); } .single-radio input[type="radio"]:checked + label span::before { -webkit-transform: scale(1); transform: scale(1); } .single-radio label { font-size: 16px; margin-bottom: 0; } .radio-round input[type="radio"] + label span { border-radius: 50%; } .radio-round input[type="radio"] + label span::before { border-radius: 50%; } /*===== Radio Style 1 =====*/ .radio-style-1 input[type="radio"] + label span { border-color: #542DED; } .radio-style-1 input[type="radio"] + label span::before { background-color: #542DED; } .radio-style-1 input[type="radio"]:checked + label span::before { -webkit-transform: scale(1); transform: scale(1); } /*===== Radio Style 2 =====*/ .radio-style-2 input[type="radio"] + label span { border-color: #542DED; } .radio-style-2 input[type="radio"] + label span::before { background-color: #542DED; } .radio-style-2 input[type="radio"]:checked + label span::before { -webkit-transform: scale(0.8); transform: scale(0.8); } /*===== Radio Style 3 =====*/ .radio-style-3 input[type="radio"] + label span { border-color: #7D7D7D; } .radio-style-3 input[type="radio"] + label span::before { background-color: #7D7D7D; } .radio-style-3 input[type="radio"]:checked + label span::before { -webkit-transform: scale(1); transform: scale(1); } /*===== Radio Style 4 =====*/ .radio-style-4 input[type="radio"] + label span { border-color: #7D7D7D; } .radio-style-4 input[type="radio"] + label span::before { background-color: #7D7D7D; } .radio-style-4 input[type="radio"]:checked + label span::before { -webkit-transform: scale(0.8); transform: scale(0.8); } /*===== Select Style 1 =====*/ .select-style-1 { margin-top: 16px; position: relative; } .select-style-1 label { margin-bottom: 10px; font-size: 13px; margin-left: 18px; font-weight: 300; text-align: left !important; } .select-style-1 .select-items { position: relative; } .select-style-1 .select-items .nice-select { width: 100%; border: 1px solid transparent; height: 40px; line-height: 40px; background-color: #542DED; padding-left: 40px; float: none; } .select-style-1 .select-items .nice-select::after { width: 8px; height: 8px; right: 20px; border-color: #fff; } .select-style-1 .select-items .nice-select .current { font-size: 16px; color: #fff; line-height: 38px; } .select-style-1 .select-items .nice-select .list { width: 100%; background-color: #542DED; } .select-style-1 .select-items .nice-select .list .option { background-color: #542DED; color: #fff; } .select-style-1 .select-items .nice-select .list .option.selected { background-color: #2A21DE; } .select-style-1 .select-items .nice-select .list .option:hover { background-color: #2A21DE !important; } .select-style-1 .select-items .nice-select .list:hover .option:not(:hover) { background-color: #542DED !important; } .select-style-1 .select-items i { position: absolute; top: 1px; left: 10px; font-size: 24px; color: #fff; } .select-style-1 .select-items.select .nice-select { padding: 0 15px; } /*===== Select Style 2 =====*/ .select-style-2 { margin-top: 16px; position: relative; } .select-style-2 label { margin-bottom: 10px; font-size: 13px; margin-left: 18px; font-weight: 300; text-align: left !important; } .select-style-2 .select-items { position: relative; } .select-style-2 .select-items .nice-select { width: 100%; border: 1px solid transparent; height: 40px; line-height: 40px; background-color: #EFEFEF; padding-left: 40px; float: none; } .select-style-2 .select-items .nice-select:focus { border-color: #542DED; } .select-style-2 .select-items .nice-select::after { width: 8px; height: 8px; right: 20px; border-color: #000; } .select-style-2 .select-items .nice-select .current { font-size: 16px; color: #000; line-height: 38px; } .select-style-2 .select-items .nice-select .list { width: 100%; } .select-style-2 .select-items i { position: absolute; top: 1px; left: 10px; font-size: 24px; color: #000; } .select-style-2 .select-items.select .nice-select { padding: 0 15px; } /*===== Select Style 3 =====*/ .select-style-3 { margin-top: 16px; position: relative; } .select-style-3 label { margin-bottom: 10px; font-size: 13px; margin-left: 18px; font-weight: 300; text-align: left !important; } .select-style-3 .select-items { position: relative; } .select-style-3 .select-items .nice-select { width: 100%; border: 1px solid #542DED; height: 40px; line-height: 40px; background-color: transparent; padding-left: 40px; float: none; } .select-style-3 .select-items .nice-select::after { width: 8px; height: 8px; right: 20px; border-color: #000; } .select-style-3 .select-items .nice-select .current { font-size: 16px; color: #000; line-height: 38px; } .select-style-3 .select-items .nice-select .list { width: 100%; background-color: #542DED; } .select-style-3 .select-items .nice-select .list .option { background-color: #542DED; color: #fff; } .select-style-3 .select-items .nice-select .list .option.selected { background-color: #2A21DE; } .select-style-3 .select-items .nice-select .list .option:hover { background-color: #2A21DE !important; } .select-style-3 .select-items .nice-select .list:hover .option:not(:hover) { background-color: #542DED !important; } .select-style-3 .select-items i { position: absolute; top: 2px; left: 10px; font-size: 24px; color: #542DED; } .select-style-3 .select-items.select .nice-select { padding: 0 15px; } /*===== Select Style 4 =====*/ .select-style-4 { margin-top: 16px; position: relative; } .select-style-4 label { margin-bottom: 10px; font-size: 13px; margin-left: 18px; font-weight: 300; text-align: left !important; } .select-style-4 .select-items { position: relative; } .select-style-4 .select-items .nice-select { width: 100%; border: 1px solid #7D7D7D; height: 40px; line-height: 40px; background-color: transparent; padding-left: 40px; float: none; } .select-style-4 .select-items .nice-select::after { width: 8px; height: 8px; right: 20px; border-color: #000; } .select-style-4 .select-items .nice-select .current { font-size: 16px; color: #000; line-height: 38px; } .select-style-4 .select-items .nice-select .list { width: 100%; } .select-style-4 .select-items i { position: absolute; top: 2px; left: 10px; font-size: 24px; color: #000; } .select-style-4 .select-items.select .nice-select { padding: 0 15px; } /*===== form Style =====*/ .single-form { margin-top: 16px; position: relative; } .single-form label { margin-bottom: 10px; font-size: 13px; margin-left: 18px; font-weight: 300; text-align: left !important; } .single-form .form-input { position: relative; } @media (max-width: 767px) { .single-form .form-input + .form-input { margin-top: 16px; } } .single-form .form-input textarea, .single-form .form-input input { width: 100%; height: 40px; padding: 0 15px; padding-left: 40px; border-radius: 4px; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; border: 1px solid transparent; } .single-form .form-input textarea { padding-top: 7px; resize: none; height: 120px; } .single-form .form-input i { position: absolute; top: 1px; left: 10px; font-size: 24px; } .single-form .form-input img { position: absolute; top: 50%; right: 10px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .single-form .form-input .form-error { font-size: 13px; margin-top: 5px; } .single-form .form-input.form textarea, .single-form .form-input.form input { padding: 0 15px; } /*===== Form Default Style =====*/ .form-default.form-border .form-input textarea, .form-default.form-border .form-input input { border-color: #7D7D7D; background-color: transparent; } .form-default label { color: #4C4C4C; } .form-default .form-input textarea, .form-default .form-input input { color: #4C4C4C; background-color: #EFEFEF; } .form-default .form-input textarea:focus, .form-default .form-input input:focus { border-color: #542DED; } .form-default .form-input i { color: #7D7D7D; } .form-default .form-input .form-error { color: #7D7D7D; } /*===== Form White Style =====*/ .form-white.form-border .form-input textarea, .form-white.form-border .form-input input { border-color: rgba(255, 255, 255, 0.24); background-color: transparent; } .form-white label { color: #fff; } .form-white .form-input textarea, .form-white .form-input input { color: #fff; background-color: rgba(255, 255, 255, 0.2); } .form-white .form-input textarea:focus, .form-white .form-input input:focus { border-color: #00D4E0; } .form-white .form-input i { color: rgba(255, 255, 255, 0.6); } .form-white .form-input .form-error { color: #fff; } /*===== Form Primary Style =====*/ .form-primary.form-border .form-input textarea, .form-primary.form-border .form-input input { border-color: #542DED; background-color: transparent; } .form-primary label { color: #542DED; } .form-primary .form-input textarea, .form-primary .form-input input { color: #542DED; background-color: #EEE6FD; } .form-primary .form-input textarea:focus, .form-primary .form-input input:focus { border-color: #542DED; } .form-primary .form-input i { color: #542DED; } .form-primary .form-input .form-error { color: #542DED; } /*===== Form Secondary Style =====*/ .form-secondary.form-border .form-input textarea, .form-secondary.form-border .form-input input { border-color: #00ACB2; background-color: transparent; } .form-secondary label { color: #00ACB2; } .form-secondary .form-input textarea, .form-secondary .form-input input { color: #00ACB2; background-color: #DFFAFA; } .form-secondary .form-input textarea:focus, .form-secondary .form-input input:focus { border-color: #00ACB2; } .form-secondary .form-input i { color: #00ACB2; } .form-secondary .form-input .form-error { color: #00ACB2; } /*===== Form Success Style =====*/ .form-success.form-border .form-input textarea, .form-success.form-border .form-input input { border-color: #7CB637; background-color: transparent; } .form-success label { color: #7CB637; } .form-success .form-input textarea, .form-success .form-input input { color: #7CB637; background-color: #F1F8E8; } .form-success .form-input textarea:focus, .form-success .form-input input:focus { border-color: #7CB637; } .form-success .form-input i { color: #7CB637; } .form-success .form-input .form-error { color: #7CB637; } /*===== Form Info Style =====*/ .form-info.form-border .form-input textarea, .form-info.form-border .form-input input { border-color: #00C2FE; background-color: transparent; } .form-info label { color: #00C2FE; } .form-info .form-input textarea, .form-info .form-input input { color: #00C2FE; background-color: #D8F5FF; } .form-info .form-input textarea:focus, .form-info .form-input input:focus { border-color: #00C2FE; } .form-info .form-input i { color: #00C2FE; } .form-info .form-input .form-error { color: #00C2FE; } /*===== Form Caution Style =====*/ .form-caution.form-border .form-input textarea, .form-caution.form-border .form-input input { border-color: #FFBE27; background-color: transparent; } .form-caution label { color: #FFBE27; } .form-caution .form-input textarea, .form-caution .form-input input { color: #FFBE27; background-color: #FFFDE6; } .form-caution .form-input textarea:focus, .form-caution .form-input input:focus { border-color: #FFBE27; } .form-caution .form-input i { color: #FFBE27; } .form-caution .form-input .form-error { color: #FFBE27; } /*===== Form Error Style =====*/ .form-error.form-border .form-input textarea, .form-error.form-border .form-input input { border-color: #FF4B22; background-color: transparent; } .form-error label { color: #FF4B22; } .form-error .form-input textarea, .form-error .form-input input { color: #FF4B22; background-color: #FBE8E7; } .form-error .form-input textarea:focus, .form-error .form-input input:focus { border-color: #FF4B22; } .form-error .form-input i { color: #FF4B22; } .form-error .form-input .form-error { color: #FF4B22; } /*================================================================== 09. Search css ==================================================================*/ /*===== Search Style 05 =====*/ .search-style-5 { position: relative; display: -moz-flex; display: -ms-flex; display: -o-flex; display: -webkit-box; display: -ms-flexbox; display: flex; } .search-style-5 .search-select .nice-select { float: none; border: 1px solid #D1D1D1; background-color: #fff; height: 40px; line-height: 40px; border-right: 0; border-radius: 0; border-top-left-radius: 4px; border-bottom-left-radius: 4px; padding: 0 10px; padding-right: 28px; } .search-style-5 .search-select .nice-select:focus { border-color: #542DED; } .search-style-5 .search-select .nice-select::after { width: 8px; height: 8px; border-color: #542DED; } .search-style-5 .search-select .nice-select .current { line-height: 40px; font-weight: 500; color: #4C4C4C; } .search-style-5 .search-select .nice-select .list { -webkit-box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.25); box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.25); } .search-style-5 .search-input { width: 100%; } .search-style-5 .search-input input { width: 100%; height: 40px; border: 1px solid #D1D1D1; background-color: #fff; color: #000; border-radius: 0; padding: 0 15px; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .search-style-5 .search-input input:focus { border-color: #542DED; } .search-style-5 .search-btn button { background-color: #542DED; color: #fff; width: 40px; height: 40px; padding: 0; font-size: 20px; border: 0; border-radius: 4px; margin-left: -2px; } .search-style-5.search-dark .nice-select { border: 1px solid rgba(255, 255, 255, 0.24); background-color: transparent; border-right: 0; } .search-style-5.search-dark .nice-select:focus { border-color: #00D4E0; } .search-style-5.search-dark .nice-select::after { border-color: #fff; } .search-style-5.search-dark .nice-select .current { color: #fff; } .search-style-5.search-dark .nice-select .list .option { background-color: #542DED; color: #fff; } .search-style-5.search-dark .nice-select .list .option.selected { background-color: #2A21DE; } .search-style-5.search-dark .nice-select .list .option:hover { background-color: #2A21DE !important; } .search-style-5.search-dark .nice-select .list:hover .option:not(:hover) { background-color: #542DED !important; } .search-style-5.search-dark input { border: 1px solid rgba(255, 255, 255, 0.24); background-color: transparent; color: #fff; } .search-style-5.search-dark input::-webkit-input-placeholder { opacity: 0.6; color: #F2F2F2; } .search-style-5.search-dark input:-ms-input-placeholder { opacity: 0.6; color: #F2F2F2; } .search-style-5.search-dark input::-ms-input-placeholder { opacity: 0.6; color: #F2F2F2; } .search-style-5.search-dark input::placeholder { opacity: 0.6; color: #F2F2F2; } .search-style-5.search-dark input::-moz-placeholder { opacity: 0.6; color: #F2F2F2; } .search-style-5.search-dark input::-moz-placeholder { opacity: 0.6; color: #F2F2F2; } .search-style-5.search-dark input::-webkit-input-placeholder { opacity: 0.6; color: #F2F2F2; } .search-style-5.search-dark input:focus { border-color: #00D4E0; } .search-style-5.search-dark button { background-color: #00D4E0; color: #fff; } /*================================================================== /*================================================================== 10. Breadcrumbs css ==================================================================*/ /*===== Breadcrumbs Style =====*/ .breadcrumbs-style { border-radius: 8px; padding: 1px 32px 16px; /*===== Breadcrumbs Style 01 =====*/ /*===== Breadcrumbs Style 02 =====*/ } @media (max-width: 767px) { .breadcrumbs-style { padding: 1px 16px 16px; } } .breadcrumbs-style .breadcrumb-left { padding-top: 15px; } .breadcrumbs-style .breadcrumb-left .breadcrumb { margin-bottom: 0; padding: 0; border-radius: 0; background-color: transparent; } @media (max-width: 767px) { .breadcrumbs-style .breadcrumb-left .breadcrumb { -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; } } .breadcrumbs-style .breadcrumb-left .breadcrumb .breadcrumb-item { position: relative; line-height: 40px; font-weight: 500; font-size: 16px; } @media (max-width: 767px) { .breadcrumbs-style .breadcrumb-left .breadcrumb .breadcrumb-item { font-size: 14px; } } .breadcrumbs-style .breadcrumb-left .breadcrumb .breadcrumb-item + .breadcrumb-item { padding-left: 60px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .breadcrumbs-style .breadcrumb-left .breadcrumb .breadcrumb-item + .breadcrumb-item { padding-left: 30px; } } @media (max-width: 767px) { .breadcrumbs-style .breadcrumb-left .breadcrumb .breadcrumb-item + .breadcrumb-item { padding-left: 16px; } } .breadcrumbs-style .breadcrumb-left .breadcrumb .breadcrumb-item + .breadcrumb-item::before { content: '\F0142'; font-family: "Material Design Icons"; font-size: 24px; position: absolute; line-height: 40px; left: 20px; padding: 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .breadcrumbs-style .breadcrumb-left .breadcrumb .breadcrumb-item + .breadcrumb-item::before { left: 2px; } } @media (max-width: 767px) { .breadcrumbs-style .breadcrumb-left .breadcrumb .breadcrumb-item + .breadcrumb-item::before { left: -1px; font-size: 18px; } } .breadcrumbs-style .breadcrumb-left .breadcrumb .breadcrumb-item a { -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .breadcrumbs-style .breadcrumb-right { display: -moz-flex; display: -ms-flex; display: -o-flex; display: -webkit-box; display: -ms-flexbox; display: flex; padding-top: 15px; } @media (max-width: 767px) { .breadcrumbs-style .breadcrumb-right { -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; } } .breadcrumbs-style .breadcrumb-right .nice-select { float: none; border: 0; background-color: transparent; height: 40px; line-height: 40px; border-radius: 0; border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .breadcrumbs-style .breadcrumb-right .nice-select::after { width: 8px; height: 8px; } .breadcrumbs-style .breadcrumb-right .nice-select .current { line-height: 40px; font-weight: 500; } .breadcrumbs-style .breadcrumb-right .nice-select .list { -webkit-box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.25); box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.25); } .breadcrumbs-style .breadcrumb-right .breadcrumb-list-grid { padding-left: 10px; } @media (max-width: 767px) { .breadcrumbs-style .breadcrumb-right .breadcrumb-list-grid { padding-left: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .breadcrumbs-style .breadcrumb-right .breadcrumb-list-grid { padding-left: 0; } } .breadcrumbs-style .breadcrumb-right .breadcrumb-list-grid li { display: inline-block; margin-left: 15px; } @media (max-width: 767px) { .breadcrumbs-style .breadcrumb-right .breadcrumb-list-grid li { margin-left: 10px; } } .breadcrumbs-style .breadcrumb-right .breadcrumb-list-grid li a { font-size: 24px; } .breadcrumbs-style.breadcrumbs-style-1 { background-color: #FAFAFA; } .breadcrumbs-style.breadcrumbs-style-1 .breadcrumb-left .breadcrumb .breadcrumb-item { color: #542DED; } .breadcrumbs-style.breadcrumbs-style-1 .breadcrumb-left .breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: #542DED; } .breadcrumbs-style.breadcrumbs-style-1 .breadcrumb-left .breadcrumb .breadcrumb-item a { color: #7D7D7D; } .breadcrumbs-style.breadcrumbs-style-1 .breadcrumb-left .breadcrumb .breadcrumb-item a:hover { color: #542DED; } .breadcrumbs-style.breadcrumbs-style-1 .breadcrumb-right .nice-select::after { border-color: #542DED; } .breadcrumbs-style.breadcrumbs-style-1 .breadcrumb-right .nice-select .current { color: #4C4C4C; } .breadcrumbs-style.breadcrumbs-style-1 .breadcrumb-right .breadcrumb-list-grid li a { color: #7D7D7D; } .breadcrumbs-style.breadcrumbs-style-1 .breadcrumb-right .breadcrumb-list-grid li a.active { color: #542DED; } .breadcrumbs-style.breadcrumbs-style-2 { background-color: #542DED; } .breadcrumbs-style.breadcrumbs-style-2 .breadcrumb-left .breadcrumb .breadcrumb-item { color: #fff; } .breadcrumbs-style.breadcrumbs-style-2 .breadcrumb-left .breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, 0.6); } .breadcrumbs-style.breadcrumbs-style-2 .breadcrumb-left .breadcrumb .breadcrumb-item a { color: rgba(255, 255, 255, 0.6); } .breadcrumbs-style.breadcrumbs-style-2 .breadcrumb-left .breadcrumb .breadcrumb-item a:hover { color: #fff; } .breadcrumbs-style.breadcrumbs-style-2 .breadcrumb-right .nice-select::after { border-color: #fff; } .breadcrumbs-style.breadcrumbs-style-2 .breadcrumb-right .nice-select .current { color: #FAFAFA; } .breadcrumbs-style.breadcrumbs-style-2 .breadcrumb-right .nice-select .list { -webkit-box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.25); box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.25); background-color: transparent; } .breadcrumbs-style.breadcrumbs-style-2 .breadcrumb-right .nice-select .list .option { background-color: #542DED; color: #fff; } .breadcrumbs-style.breadcrumbs-style-2 .breadcrumb-right .nice-select .list .option.selected { background-color: #2A21DE; } .breadcrumbs-style.breadcrumbs-style-2 .breadcrumb-right .nice-select .list .option:hover { background-color: #2A21DE !important; } .breadcrumbs-style.breadcrumbs-style-2 .breadcrumb-right .nice-select .list:hover .option:not(:hover) { background-color: #542DED !important; } .breadcrumbs-style.breadcrumbs-style-2 .breadcrumb-right .breadcrumb-list-grid li a { color: rgba(255, 255, 255, 0.6); } .breadcrumbs-style.breadcrumbs-style-2 .breadcrumb-right .breadcrumb-list-grid li a.active { color: #fff; } /*================================================================== 12. Navbar css ==================================================================*/ /*===== Navbar Style 7 =====*/ .navbar-style-7 { -webkit-box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.08); box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.08); background-color: #fff; } .navbar-style-7 .navbar-mobile { padding: 15px 0; } .navbar-style-7 .desktop-logo { margin-right: 10px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-style-7 .navbar-container { position: fixed; top: 0; left: -290px; width: 280px; height: 100%; background-color: #fff; padding: 50px 0px 15px; z-index: 999; overflow-y: auto; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; -webkit-transition-delay: 0s; transition-delay: 0s; } } @media (max-width: 767px) { .navbar-style-7 .navbar-container { position: fixed; top: 0; left: -290px; width: 280px; height: 100%; background-color: #fff; padding: 50px 0px 15px; z-index: 999; overflow-y: auto; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; -webkit-transition-delay: 0s; transition-delay: 0s; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-style-7 .navbar-container.open { left: 0; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } } @media (max-width: 767px) { .navbar-style-7 .navbar-container.open { left: 0; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } } .navbar-style-7 .navbar-container .navbar-close { position: absolute; top: 5px; right: 15px; } .navbar-style-7 .navbar-container .navbar-close a { font-size: 24px; color: #000; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .navbar-style-7 .navbar-container .navbar-close a:hover { color: #542DED; } .navbar-style-7 .navbar-container .navbar-top-wrapper { background-color: #00ACB2; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-style-7 .navbar-container .navbar-top-wrapper { background-color: transparent; } } @media (max-width: 767px) { .navbar-style-7 .navbar-container .navbar-top-wrapper { background-color: transparent; } } .navbar-style-7 .navbar-container .navbar-top { padding: 3px 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-style-7 .navbar-container .navbar-top .navbar-top-left .navbar-top-link { text-align: center; } } @media (max-width: 767px) { .navbar-style-7 .navbar-container .navbar-top .navbar-top-left .navbar-top-link { text-align: center; } } .navbar-style-7 .navbar-container .navbar-top .navbar-top-left .navbar-top-link li { display: inline-block; } .navbar-style-7 .navbar-container .navbar-top .navbar-top-left .navbar-top-link li a { padding: 0 16px; line-height: 36px; color: #fff; font-size: 14px; text-transform: uppercase; font-weight: 500; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .navbar-style-7 .navbar-container .navbar-top .navbar-top-left .navbar-top-link li a { padding: 0 12px; font-size: 14px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-style-7 .navbar-container .navbar-top .navbar-top-left .navbar-top-link li a { font-size: 14px; padding: 5px; line-height: 22px; color: #000; } } @media (max-width: 767px) { .navbar-style-7 .navbar-container .navbar-top .navbar-top-left .navbar-top-link li a { font-size: 14px; padding: 5px; line-height: 22px; color: #000; } } .navbar-style-7 .navbar-container .navbar-top .navbar-top-left .navbar-top-link li a i { margin-right: 4px; font-size: 18px; } .navbar-style-7 .navbar-container .navbar-top .navbar-top-left .navbar-top-link li a:hover { color: #542DED; } .navbar-style-7 .navbar-container .navbar-top .navbar-top-right .navbar-top-link li { display: inline-block; } .navbar-style-7 .navbar-container .navbar-top .navbar-top-right .navbar-top-link li .nice-select { float: none; border: 0; background-color: transparent; height: 36px; line-height: 36px; border-radius: 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-style-7 .navbar-container .navbar-top .navbar-top-right .navbar-top-link li .nice-select { padding-left: 10px; padding-right: 25px; } } @media (max-width: 767px) { .navbar-style-7 .navbar-container .navbar-top .navbar-top-right .navbar-top-link li .nice-select { padding-left: 10px; padding-right: 25px; } } .navbar-style-7 .navbar-container .navbar-top .navbar-top-right .navbar-top-link li .nice-select::after { width: 8px; height: 8px; border-color: #fff; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-style-7 .navbar-container .navbar-top .navbar-top-right .navbar-top-link li .nice-select::after { border-color: #4C4C4C; } } @media (max-width: 767px) { .navbar-style-7 .navbar-container .navbar-top .navbar-top-right .navbar-top-link li .nice-select::after { border-color: #4C4C4C; } } .navbar-style-7 .navbar-container .navbar-top .navbar-top-right .navbar-top-link li .nice-select .current { line-height: 36px; font-weight: 500; color: #fff; text-transform: uppercase; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .navbar-style-7 .navbar-container .navbar-top .navbar-top-right .navbar-top-link li .nice-select .current { font-size: 14px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-style-7 .navbar-container .navbar-top .navbar-top-right .navbar-top-link li .nice-select .current { font-size: 14px; color: #000; } } @media (max-width: 767px) { .navbar-style-7 .navbar-container .navbar-top .navbar-top-right .navbar-top-link li .nice-select .current { font-size: 14px; color: #000; } } .navbar-style-7 .navbar-container .navbar-top .navbar-top-right .navbar-top-link li .nice-select .list { -webkit-box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.25); box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.25); } .navbar-style-7 .navbar-container .navbar-top .navbar-top-right .navbar-top-link li .nice-select .list .option { display: block; line-height: 30px; min-height: 30px; font-size: 14px; } .navbar-style-7 .navbar-container .navbar-top .navbar-top-right .navbar-top-link li .nice-select:hover::after { border-color: #542DED; } .navbar-style-7 .navbar-container .navbar-top .navbar-top-right .navbar-top-link li .nice-select:hover .current { color: #542DED; } .navbar-style-7 .navbar-container .navbar-top .navbar-top-right .navbar-top-link li a { padding: 0 16px; line-height: 36px; color: #fff; font-size: 14px; text-transform: uppercase; font-weight: 500; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .navbar-style-7 .navbar-container .navbar-top .navbar-top-right .navbar-top-link li a { padding: 0 12px; font-size: 14px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-style-7 .navbar-container .navbar-top .navbar-top-right .navbar-top-link li a { font-size: 14px; padding: 5px; line-height: 22px; color: #000; } } @media (max-width: 767px) { .navbar-style-7 .navbar-container .navbar-top .navbar-top-right .navbar-top-link li a { font-size: 14px; padding: 5px; line-height: 22px; color: #000; } } .navbar-style-7 .navbar-container .navbar-top .navbar-top-right .navbar-top-link li a i { margin-right: 4px; } .navbar-style-7 .navbar-container .navbar-top .navbar-top-right .navbar-top-link li a:hover { color: #542DED; } .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu { display: -moz-flex; display: -ms-flex; display: -o-flex; display: -webkit-box; display: -ms-flexbox; display: flex; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu { display: block; } } @media (max-width: 767px) { .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu { display: block; } } .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li { padding: 17px 0; position: relative; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li { padding: 0; } } @media (max-width: 767px) { .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li { padding: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li.position-static { position: relative !important; } } @media (max-width: 767px) { .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li.position-static { position: relative !important; } } .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li a { padding: 0 16px; line-height: 36px; color: #4C4C4C; font-size: 16px; text-transform: uppercase; font-weight: 500; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; border-radius: 4px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li a { padding: 0 12px; font-size: 14px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li a { display: block; padding: 0; border-bottom: 1px solid #D1D1D1; line-height: 36px; text-transform: capitalize; font-size: 16px; font-weight: 400; border-radius: 0; } } @media (max-width: 767px) { .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li a { display: block; padding: 0; border-bottom: 1px solid #D1D1D1; line-height: 36px; text-transform: capitalize; font-size: 16px; font-weight: 400; border-radius: 0; } } .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li .menu-expand { position: absolute; width: 21px; height: 21px; top: 8px; right: 0; cursor: pointer; } .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li .menu-expand::before { position: absolute; content: ''; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 0; width: 100%; height: 2px; background-color: #000; } .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li .menu-expand::after { position: absolute; content: ''; top: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 2px; height: 100%; background-color: #000; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li.active > .menu-expand::after { height: 0; } .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li:hover > a { background-color: #542DED; color: #fff; -webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.32); box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.32); } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li:hover > a { background-color: #fff; color: #4C4C4C; -webkit-box-shadow: none; box-shadow: none; } } @media (max-width: 767px) { .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li:hover > a { background-color: #fff; color: #4C4C4C; -webkit-box-shadow: none; box-shadow: none; } } .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li .sub-menu { position: absolute; top: 125%; left: 0; z-index: 99; min-width: inherit; width: 256px; -webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.32); box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.32); border: 0; border-radius: 4px; padding: 0; margin-top: 0; background-color: #fff; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; opacity: 0; visibility: hidden; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li .sub-menu { width: 226px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li .sub-menu { position: relative; top: 0; width: 100%; opacity: 1; visibility: visible; -webkit-box-shadow: none; box-shadow: none; padding: 0; padding-left: 15px; -webkit-transition: all 0s linear; transition: all 0s linear; } } @media (max-width: 767px) { .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li .sub-menu { position: relative; top: 0; width: 100%; opacity: 1; visibility: visible; -webkit-box-shadow: none; box-shadow: none; padding: 0; padding-left: 15px; -webkit-transition: all 0s linear; transition: all 0s linear; } } .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li .sub-menu li { position: relative; padding: 0; } .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li .sub-menu li > a { padding: 0 16px; line-height: 46px; font-weight: 500; font-size: 16px; border-radius: 0; display: block; -webkit-transition: all 0.4s linear; transition: all 0.4s linear; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li .sub-menu li > a { font-size: 14px; line-height: 40px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li .sub-menu li > a { display: block; font-size: 14px; padding: 0; border-radius: 0; font-weight: 400; } } @media (max-width: 767px) { .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li .sub-menu li > a { display: block; font-size: 14px; padding: 0; border-radius: 0; font-weight: 400; } } .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li .sub-menu li > a i { float: right; font-size: 24px; line-height: 42px; -webkit-transition: all 0.4s linear; transition: all 0.4s linear; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li .sub-menu li > a i { display: none; } } @media (max-width: 767px) { .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li .sub-menu li > a i { display: none; } } .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li .sub-menu li:first-child > a { border-top-left-radius: 4px; border-top-right-radius: 4px; } .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li .sub-menu li:last-child > a { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li .sub-menu li .sub-menu { position: absolute; top: 25%; left: 100%; width: 256px; -webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.32); box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.32); border: 0; border-radius: 4px; opacity: 0; visibility: hidden; -webkit-transition: all 0.4s linear; transition: all 0.4s linear; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li .sub-menu li .sub-menu { width: 226px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li .sub-menu li .sub-menu { position: relative; width: 100%; top: 0; left: 0; opacity: 1; visibility: visible; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: all 0s linear; transition: all 0s linear; padding-left: 15px; } } @media (max-width: 767px) { .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li .sub-menu li .sub-menu { position: relative; width: 100%; top: 0; left: 0; opacity: 1; visibility: visible; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: all 0s linear; transition: all 0s linear; padding-left: 15px; } } .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li .sub-menu li:hover > .sub-menu { top: 0; opacity: 1; visibility: visible; } .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li:last-child .sub-menu li .sub-menu li .sub-menu { left: auto; right: 100%; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li:last-child .sub-menu li .sub-menu li .sub-menu { left: 0; right: auto; } } @media (max-width: 767px) { .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li:last-child .sub-menu li .sub-menu li .sub-menu { left: 0; right: auto; } } .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li:hover .sub-menu { opacity: 1; visibility: visible; top: 100%; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li:hover .sub-menu { top: 0; } } @media (max-width: 767px) { .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li:hover .sub-menu { top: 0; } } .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li .sub-mega-dropdown { position: absolute; top: 125%; left: 0; z-index: 999; min-width: inherit; width: 100%; -webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.32); box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.32); border: 0; border-radius: 4px; padding: 0; margin-top: 0; background-color: #fff; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; padding: 40px 0 40px; opacity: 0; visibility: hidden; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li .sub-mega-dropdown { position: relative; top: 0; width: 100%; opacity: 1; visibility: visible; -webkit-box-shadow: none; box-shadow: none; padding: 0; padding-left: 15px; -webkit-transition: all 0s linear; transition: all 0s linear; } } @media (max-width: 767px) { .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li .sub-mega-dropdown { position: relative; top: 0; width: 100%; opacity: 1; visibility: visible; -webkit-box-shadow: none; box-shadow: none; padding: 0; padding-left: 15px; -webkit-transition: all 0s linear; transition: all 0s linear; } } .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li .sub-mega-dropdown .mega-dropdown { padding: 0 !important; } .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li .sub-mega-dropdown .mega-dropdown .mega-dropdown-list { width: 25%; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li .sub-mega-dropdown .mega-dropdown .mega-dropdown-list { width: 100%; } } @media (max-width: 767px) { .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li .sub-mega-dropdown .mega-dropdown .mega-dropdown-list { width: 100%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li .sub-mega-dropdown .mega-dropdown .mega-dropdown-list .mega-title { line-height: 36px; border-bottom: 1px solid #D1D1D1; cursor: pointer; } } @media (max-width: 767px) { .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li .sub-mega-dropdown .mega-dropdown .mega-dropdown-list .mega-title { line-height: 36px; border-bottom: 1px solid #D1D1D1; cursor: pointer; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li .sub-mega-dropdown .mega-dropdown .mega-dropdown-list ul { padding-left: 15px; } } @media (max-width: 767px) { .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li .sub-mega-dropdown .mega-dropdown .mega-dropdown-list ul { padding-left: 15px; } } .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li .sub-mega-dropdown .mega-dropdown .mega-dropdown-list ul li { padding: 0; margin-top: 16px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li .sub-mega-dropdown .mega-dropdown .mega-dropdown-list ul li { margin-top: 8px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li .sub-mega-dropdown .mega-dropdown .mega-dropdown-list ul li { margin-top: 0; } } @media (max-width: 767px) { .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li .sub-mega-dropdown .mega-dropdown .mega-dropdown-list ul li { margin-top: 0; } } .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li .sub-mega-dropdown .mega-dropdown .mega-dropdown-list ul li a { font-size: 16px; line-height: 22px; padding: 0; text-transform: capitalize; font-weight: 400; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li .sub-mega-dropdown .mega-dropdown .mega-dropdown-list ul li a { font-size: 14px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li .sub-mega-dropdown .mega-dropdown .mega-dropdown-list ul li a { padding: 0; line-height: 36px; font-size: 14px; } } @media (max-width: 767px) { .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li .sub-mega-dropdown .mega-dropdown .mega-dropdown-list ul li a { padding: 0; line-height: 36px; font-size: 14px; } } .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li .sub-mega-dropdown .mega-dropdown .mega-dropdown-list ul li:hover > a { background-color: transparent; color: #542DED; -webkit-box-shadow: none; box-shadow: none; padding-left: 5px; } .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li:hover .sub-mega-dropdown { top: 100%; opacity: 1; visibility: visible; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li:hover .sub-mega-dropdown { top: 0; } } @media (max-width: 767px) { .navbar-style-7 .navbar-container .main-navbar .navbar-menu .main-menu li:hover .sub-mega-dropdown { top: 0; } } .navbar-style-7 .navbar-cart { padding-left: 15px; position: relative; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-style-7 .navbar-cart { float: right; display: block; } } @media (max-width: 767px) { .navbar-style-7 .navbar-cart { float: right; display: block; } } .navbar-style-7 .navbar-cart .icon-btn { border-radius: 4px; } .navbar-style-7 .navbar-cart .icon-btn::before { display: none; } .navbar-style-7 .navbar-cart .navbar-cart-dropdown { width: 350px; position: absolute; top: 100%; right: 0; z-index: 99; background-color: #fff; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; border-radius: 8px; margin-top: 15px; } @media (max-width: 767px) { .navbar-style-7 .navbar-cart .navbar-cart-dropdown { width: 280px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .navbar-style-7 .navbar-cart .navbar-cart-dropdown { width: 350px; } } .navbar-style-7 .navbar-cart:hover .navbar-cart-dropdown { opacity: 1; visibility: visible; } .navbar-style-7 .navbar-toggle { padding-left: 0; } .navbar-style-7 .navbar-toggle .icon-btn { border-radius: 4px; } .navbar-style-7 .navbar-toggle .icon-btn::before { display: none; } .overlay-7 { position: fixed; top: 0; left: 0; width: 0; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 99; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } .overlay-7.open { width: 100%; -webkit-transition-delay: 0s; transition-delay: 0s; } /*===== Navbar Dark 1 =====*/ .navbar-dark-7 { -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08); box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08); background-color: #393D8E; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-dark-7 .navbar-container { background-color: #161359; } } @media (max-width: 767px) { .navbar-dark-7 .navbar-container { background-color: #161359; } } .navbar-dark-7 .navbar-container .navbar-close a { color: #fff; } .navbar-dark-7 .navbar-container .navbar-close a:hover { color: #FAE5EC; } .navbar-dark-7 .navbar-container .navbar-top-wrapper { background-color: #B62F5C; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-dark-7 .navbar-container .navbar-top-wrapper { background-color: transparent; } } @media (max-width: 767px) { .navbar-dark-7 .navbar-container .navbar-top-wrapper { background-color: transparent; } } .navbar-dark-7 .navbar-container .navbar-top .navbar-top-left .navbar-top-link li a { color: #fff; } .navbar-dark-7 .navbar-container .navbar-top .navbar-top-left .navbar-top-link li a:hover { color: #00D4E0; } .navbar-dark-7 .navbar-container .navbar-top .navbar-top-right .navbar-top-link li .nice-select::after { border-color: #fff; } .navbar-dark-7 .navbar-container .navbar-top .navbar-top-right .navbar-top-link li .nice-select .current { color: #fff; } .navbar-dark-7 .navbar-container .navbar-top .navbar-top-right .navbar-top-link li .nice-select .list { -webkit-box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.25); box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.25); } .navbar-dark-7 .navbar-container .navbar-top .navbar-top-right .navbar-top-link li .nice-select .list .option { background-color: #542DED; color: #fff; } .navbar-dark-7 .navbar-container .navbar-top .navbar-top-right .navbar-top-link li .nice-select .list .option.selected { background-color: #2A21DE; } .navbar-dark-7 .navbar-container .navbar-top .navbar-top-right .navbar-top-link li .nice-select .list .option:hover { background-color: #2A21DE !important; } .navbar-dark-7 .navbar-container .navbar-top .navbar-top-right .navbar-top-link li .nice-select .list:hover .option:not(:hover) { background-color: #542DED !important; } .navbar-dark-7 .navbar-container .navbar-top .navbar-top-right .navbar-top-link li .nice-select:hover::after { border-color: #fff; } .navbar-dark-7 .navbar-container .navbar-top .navbar-top-right .navbar-top-link li .nice-select:hover .current { color: #fff; } .navbar-dark-7 .navbar-container .navbar-top .navbar-top-right .navbar-top-link li a { color: #fff; } .navbar-dark-7 .navbar-container .navbar-top .navbar-top-right .navbar-top-link li a:hover { color: #E14C7B; } .navbar-dark-7 .navbar-container .main-navbar .navbar-menu .main-menu li a { color: #fff; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-dark-7 .navbar-container .main-navbar .navbar-menu .main-menu li a { border-bottom: 1px solid rgba(209, 209, 209, 0.2); } } @media (max-width: 767px) { .navbar-dark-7 .navbar-container .main-navbar .navbar-menu .main-menu li a { border-bottom: 1px solid rgba(209, 209, 209, 0.2); } } .navbar-dark-7 .navbar-container .main-navbar .navbar-menu .main-menu li .menu-expand::before { background-color: #fff; } .navbar-dark-7 .navbar-container .main-navbar .navbar-menu .main-menu li .menu-expand::after { background-color: #fff; } .navbar-dark-7 .navbar-container .main-navbar .navbar-menu .main-menu li:hover > a { background-color: #E14C7B; color: #fff; -webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.32); box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.32); } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-dark-7 .navbar-container .main-navbar .navbar-menu .main-menu li:hover > a { background-color: transparent; color: #E14C7B; -webkit-box-shadow: none; box-shadow: none; } } @media (max-width: 767px) { .navbar-dark-7 .navbar-container .main-navbar .navbar-menu .main-menu li:hover > a { background-color: transparent; color: #E14C7B; -webkit-box-shadow: none; box-shadow: none; } } .navbar-dark-7 .navbar-container .main-navbar .navbar-menu .main-menu li .sub-menu { background-color: #161359; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-dark-7 .navbar-container .main-navbar .navbar-menu .main-menu li .sub-menu { background-color: transparent; } } @media (max-width: 767px) { .navbar-dark-7 .navbar-container .main-navbar .navbar-menu .main-menu li .sub-menu { background-color: transparent; } } .navbar-dark-7 .navbar-container .main-navbar .navbar-menu .main-menu li .sub-mega-dropdown { background-color: #161359; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-dark-7 .navbar-container .main-navbar .navbar-menu .main-menu li .sub-mega-dropdown { background-color: transparent; } } @media (max-width: 767px) { .navbar-dark-7 .navbar-container .main-navbar .navbar-menu .main-menu li .sub-mega-dropdown { background-color: transparent; } } .navbar-dark-7 .navbar-container .main-navbar .navbar-menu .main-menu li .sub-mega-dropdown .mega-dropdown .mega-dropdown-list .mega-title { color: #fff; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-dark-7 .navbar-container .main-navbar .navbar-menu .main-menu li .sub-mega-dropdown .mega-dropdown .mega-dropdown-list .mega-title { border-bottom: 1px solid rgba(209, 209, 209, 0.2); } } @media (max-width: 767px) { .navbar-dark-7 .navbar-container .main-navbar .navbar-menu .main-menu li .sub-mega-dropdown .mega-dropdown .mega-dropdown-list .mega-title { border-bottom: 1px solid rgba(209, 209, 209, 0.2); } } .navbar-dark-7 .navbar-container .main-navbar .navbar-menu .main-menu li .sub-mega-dropdown .mega-dropdown .mega-dropdown-list ul li:hover > a { color: #E14C7B; } .navbar-dark-7 .navbar-toggle .icon-btn, .navbar-dark-7 .navbar-cart .icon-btn { color: #fff; } .overlay-dark-7 { position: fixed; top: 0; left: 0; width: 0; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 99; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } .overlay-dark-7.open { width: 100%; -webkit-transition-delay: 0s; transition-delay: 0s; } /*================================================================== 20. Product Details css ==================================================================*/ /*===== Product Details Style 1 =====*/ .product-details-wrapper { background-color: #FAFAFA; } .product-details-style-1 .product-details-content .sub-title { font-size: 24px; line-height: 30px; color: rgba(0, 0, 0, 0.64); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .product-details-style-1 .product-details-content .sub-title { font-size: 20px; } } @media (max-width: 767px) { .product-details-style-1 .product-details-content .sub-title { font-size: 18px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .product-details-style-1 .product-details-content .sub-title { font-size: 20px; } } .product-details-style-1 .product-details-content .title { font-weight: 500; font-size: 52px; line-height: 65px; color: #000; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .product-details-style-1 .product-details-content .title { font-size: 38px; line-height: 36px; } } @media (max-width: 767px) { .product-details-style-1 .product-details-content .title { font-size: 32px; line-height: 36px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .product-details-style-1 .product-details-content .title { font-size: 38px; line-height: 45px; } } .product-details-style-1 .product-details-content .product-items { margin-top: 32px; } .product-details-style-1 .product-details-content .product-items .item-title { font-size: 16px; font-weight: 400; line-height: 22px; color: #000; } @media (max-width: 767px) { .product-details-style-1 .product-details-content .product-items .item-title { font-size: 14px; } } .product-details-style-1 .product-details-content .product-items .items-wrapper { display: -moz-flex; display: -ms-flex; display: -o-flex; display: -webkit-box; display: -ms-flexbox; display: flex; } .product-details-style-1 .product-details-content .product-items .items-wrapper .single-item { max-width: 130px; text-align: center; -moz-flex: 1; -ms-flex: 1; -webkit-box-flex: 1; flex: 1; margin-top: 8px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .product-details-style-1 .product-details-content .product-items .items-wrapper .single-item { max-width: 110px; } } .product-details-style-1 .product-details-content .product-items .items-wrapper .single-item + .single-item { margin-left: 8px; } .product-details-style-1 .product-details-content .product-items .items-wrapper .single-item .items-image img { width: 100%; border-radius: 8px; -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08); box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08); border: 1px solid #fff; cursor: pointer; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .product-details-style-1 .product-details-content .product-items .items-wrapper .single-item .text { font-weight: 400; font-size: 13px; line-height: 16px; color: #000; margin-top: 11px; } .product-details-style-1 .product-details-content .product-items .items-wrapper .single-item.active .items-image img { -webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.32); box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.32); border-color: #542DED; } .product-details-style-1 .product-details-content .product-select-wrapper { display: -moz-flex; display: -ms-flex; display: -o-flex; display: -webkit-box; display: -ms-flexbox; display: flex; margin-left: -10px; margin-right: -10px; } .product-details-style-1 .product-details-content .product-select-wrapper .select-title { font-size: 16px; line-height: 22px; font-weight: 400; color: #000; } @media (max-width: 767px) { .product-details-style-1 .product-details-content .product-select-wrapper .select-title { font-size: 14px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .product-details-style-1 .product-details-content .product-select-wrapper .select-title { font-size: 16px; } } .product-details-style-1 .product-details-content .product-select-wrapper .select-title span { font-weight: 500; margin-left: 5px; } .product-details-style-1 .product-details-content .product-select-wrapper .select-item { padding-top: 20px; padding-left: 10px; padding-right: 10x; } .product-details-style-1 .product-details-content .product-select-wrapper .select-item .color-select { padding-top: 8px; } .product-details-style-1 .product-details-content .product-select-wrapper .select-item .color-select li { display: inline-block; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #fff; cursor: pointer; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .product-details-style-1 .product-details-content .product-select-wrapper .select-item .color-select li + li { margin-left: 8px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .product-details-style-1 .product-details-content .product-select-wrapper .select-item .color-select li { width: 30px; height: 30px; } } @media (max-width: 767px) { .product-details-style-1 .product-details-content .product-select-wrapper .select-item .color-select li { width: 25px; height: 25px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .product-details-style-1 .product-details-content .product-select-wrapper .select-item .color-select li { width: 30px; height: 30px; } } .product-details-style-1 .product-details-content .product-select-wrapper .select-item .color-select li.active { border-color: #542DED; -webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.32); box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.32); } .product-details-style-1 .product-details-content .product-select-wrapper .select-item .size-select { margin-top: 8px; } .product-details-style-1 .product-details-content .product-select-wrapper .select-item .size-select .nice-select { border: 1px solid #EFEFEF; background-color: transparent; width: 160px; float: none; height: 40px; line-height: 38px; } @media (max-width: 767px) { .product-details-style-1 .product-details-content .product-select-wrapper .select-item .size-select .nice-select { width: 120px; height: 30px; line-height: 28px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .product-details-style-1 .product-details-content .product-select-wrapper .select-item .size-select .nice-select { width: 120px; height: 35px; line-height: 33px; } } .product-details-style-1 .product-details-content .product-select-wrapper .select-item .size-select .nice-select:focus { border-color: #542DED; } .product-details-style-1 .product-details-content .product-select-wrapper .select-item .size-select .nice-select::after { border-color: #542DED; width: 8px; height: 8px; } .product-details-style-1 .product-details-content .product-select-wrapper .select-item .size-select .nice-select .current { color: #000; font-weight: 500; font-size: 16px; line-height: 22px; line-height: 38px; } @media (max-width: 767px) { .product-details-style-1 .product-details-content .product-select-wrapper .select-item .size-select .nice-select .current { font-size: 14px; line-height: 28px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .product-details-style-1 .product-details-content .product-select-wrapper .select-item .size-select .nice-select .current { font-size: 16px; line-height: 33px; } } .product-details-style-1 .product-details-content .product-select-wrapper .select-item .size-select .nice-select .list { width: 100%; } .product-details-style-1 .product-details-content .product-select-wrapper .select-item .size-select .nice-select .list .option { background-color: #FAFAFA; color: #000; } .product-details-style-1 .product-details-content .product-select-wrapper .select-item .size-select .nice-select .list .option.selected { background-color: #EFEFEF; } .product-details-style-1 .product-details-content .product-select-wrapper .select-item .size-select .nice-select .list .option:hover { background-color: #EFEFEF !important; } .product-details-style-1 .product-details-content .product-select-wrapper .select-item .size-select .nice-select .list:hover .option:not(:hover) { background-color: #FAFAFA !important; } .product-details-style-1 .product-details-content .product-select-wrapper .select-item .select-quantity { overflow: hidden; border-radius: 4px; background-color: transparent; border: 1px solid #EFEFEF; display: inline-block; margin-top: 8px; } .product-details-style-1 .product-details-content .product-select-wrapper .select-item .select-quantity button { width: 38px; height: 38px; padding: 0; font-size: 24px; border: 0; background-color: transparent; -webkit-transition: all 0.4s linear; transition: all 0.4s linear; color: #7D7D7D; padding: 0; } @media (max-width: 767px) { .product-details-style-1 .product-details-content .product-select-wrapper .select-item .select-quantity button { height: 28px; width: 28px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .product-details-style-1 .product-details-content .product-select-wrapper .select-item .select-quantity button { height: 34px; width: 34px; } } .product-details-style-1 .product-details-content .product-select-wrapper .select-item .select-quantity button:hover { color: #542DED; } .product-details-style-1 .product-details-content .product-select-wrapper .select-item .select-quantity input { width: 50px; height: 38px; border: 0; padding: 0 10px; text-align: center; font-weight: 700; background-color: transparent; color: #000; } @media (max-width: 767px) { .product-details-style-1 .product-details-content .product-select-wrapper .select-item .select-quantity input { height: 40px; width: 28px; font-size: 14px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .product-details-style-1 .product-details-content .product-select-wrapper .select-item .select-quantity input { height: 35px; width: 45px; font-size: 16px; } } .product-details-style-1 .product-details-content .product-select-wrapper .select-item .country-select { margin-top: 8px; } .product-details-style-1 .product-details-content .product-select-wrapper .select-item .country-select .nice-select { border: 1px solid #EFEFEF; background-color: transparent; width: 350px; float: none; height: 40px; line-height: 38px; } @media (max-width: 767px) { .product-details-style-1 .product-details-content .product-select-wrapper .select-item .country-select .nice-select { width: 280px; height: 30px; line-height: 28px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .product-details-style-1 .product-details-content .product-select-wrapper .select-item .country-select .nice-select { width: 280px; height: 35px; line-height: 33px; } } .product-details-style-1 .product-details-content .product-select-wrapper .select-item .country-select .nice-select:focus { border-color: #542DED; } .product-details-style-1 .product-details-content .product-select-wrapper .select-item .country-select .nice-select::after { border-color: #542DED; width: 8px; height: 8px; } .product-details-style-1 .product-details-content .product-select-wrapper .select-item .country-select .nice-select .current { color: #000; font-weight: 500; font-size: 16px; line-height: 38px; } @media (max-width: 767px) { .product-details-style-1 .product-details-content .product-select-wrapper .select-item .country-select .nice-select .current { line-height: 28px; font-size: 14px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .product-details-style-1 .product-details-content .product-select-wrapper .select-item .country-select .nice-select .current { line-height: 33px; font-size: 16px; } } .product-details-style-1 .product-details-content .product-select-wrapper .select-item .country-select .nice-select .list { width: 100%; } .product-details-style-1 .product-details-content .product-select-wrapper .select-item .country-select .nice-select .list .option { background-color: #FAFAFA; color: #000; } .product-details-style-1 .product-details-content .product-select-wrapper .select-item .country-select .nice-select .list .option.selected { background-color: #EFEFEF; } .product-details-style-1 .product-details-content .product-select-wrapper .select-item .country-select .nice-select .list .option:hover { background-color: #EFEFEF !important; } .product-details-style-1 .product-details-content .product-select-wrapper .select-item .country-select .nice-select .list:hover .option:not(:hover) { background-color: #FAFAFA !important; } .product-details-style-1 .product-details-content .product-price { padding-top: 24px; } .product-details-style-1 .product-details-content .product-price .price-title { font-size: 16px; line-height: 22px; color: #000; font-weight: 400; } @media (max-width: 767px) { .product-details-style-1 .product-details-content .product-price .price-title { font-size: 14px; } } .product-details-style-1 .product-details-content .product-price .sale-price { font-weight: 700; font-size: 36px; line-height: 45px; color: #000; margin-top: 8px; display: inline-block; margin-right: 16px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .product-details-style-1 .product-details-content .product-price .sale-price { font-size: 30px; line-height: 40px; } } @media (max-width: 767px) { .product-details-style-1 .product-details-content .product-price .sale-price { font-size: 28px; line-height: 38px; } } .product-details-style-1 .product-details-content .product-price .regular-price { font-weight: 700; font-size: 28px; line-height: 38px; color: #7D7D7D; margin-top: 8px; text-decoration: line-through; text-decoration-thickness: 3px; display: inline-block; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .product-details-style-1 .product-details-content .product-price .regular-price { font-size: 24px; line-height: 30px; } } @media (max-width: 767px) { .product-details-style-1 .product-details-content .product-price .regular-price { font-size: 20px; line-height: 34px; } } .product-details-style-1 .product-details-content .product-btn { padding-top: 24px; } .product-details-style-1 .product-details-content .product-btn .main-btn { margin-top: 8px; margin-right: 6px; } .product-details-style-1 .product-details-image { position: relative; display: -moz-flex; display: -ms-flex; display: -o-flex; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .product-details-style-1 .product-details-image .product-image { width: 85%; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .product-details-style-1 .product-details-image .product-image { width: 83%; } } @media (max-width: 767px) { .product-details-style-1 .product-details-image .product-image { width: 83%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .product-details-style-1 .product-details-image .product-image { width: 85%; } } .product-details-style-1 .product-details-image .product-image .single-image img { width: 100%; } .product-details-style-1 .product-details-image .product-thumb-image { width: 15%; text-align: center; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .product-details-style-1 .product-details-image .product-thumb-image { width: 17%; } } @media (max-width: 767px) { .product-details-style-1 .product-details-image .product-thumb-image { width: 17%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .product-details-style-1 .product-details-image .product-thumb-image { width: 15%; } } .product-details-style-1 .product-details-image .product-thumb-image .single-thumb { cursor: pointer; border-radius: 4px; margin: 5px 10px; } @media (max-width: 767px) { .product-details-style-1 .product-details-image .product-thumb-image .single-thumb { margin: 3px; } } .product-details-style-1 .product-details-image .product-thumb-image .single-thumb img { width: 60px; border-radius: 4px; opacity: 0.74; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } @media (max-width: 767px) { .product-details-style-1 .product-details-image .product-thumb-image .single-thumb img { width: 40px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .product-details-style-1 .product-details-image .product-thumb-image .single-thumb img { width: 60px; } } .product-details-style-1 .product-details-image .product-thumb-image .single-thumb.slick-current img { -webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.32); box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.32); opacity: 1; } .product-details-style-1 .product-details-image .product-thumb-image .slick-arrow { font-size: 32px; color: #7D7D7D; cursor: pointer; } @media (max-width: 767px) { .product-details-style-1 .product-details-image .product-thumb-image .slick-arrow { font-size: 24px; line-height: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .product-details-style-1 .product-details-image .product-thumb-image .slick-arrow { font-size: 32px; } } /*================================================================== 22. Content Card css ==================================================================*/ /*===== All Content Card Style 1 =====*/ .content-card-style-1 { padding-top: 200px; padding-bottom: 200px; background-color: #eee; position: relative; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .content-card-style-1 { padding-top: 150px; padding-bottom: 150px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .content-card-style-1 { padding-top: 130px; padding-bottom: 130px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .content-card-style-1 { padding-top: 100px; padding-bottom: 100px; } } @media (max-width: 767px) { .content-card-style-1 { padding-top: 80px; padding-bottom: 80px; } } .content-card-style-1 .content-card-image { position: absolute; top: 0; right: 0; width: 50%; height: 100%; background-size: contain; } @media (max-width: 767px) { .content-card-style-1 .content-card-image { position: relative; width: 100%; height: 400px; } } .content-card-style-1 .content-card-image-2 { position: absolute; top: 0; left: 0; width: 50%; height: 100%; background-size: contain; } @media (max-width: 767px) { .content-card-style-1 .content-card-image-2 { position: relative; width: 100%; height: 400px; } } .content-card-style-1 .content-card-content .sub-title { font-weight: 700; font-size: 24px; line-height: 30px; color: black; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .content-card-style-1 .content-card-content .sub-title { font-size: 20px; line-height: 26px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .content-card-style-1 .content-card-content .sub-title { font-size: 18px; line-height: 24px; } } @media (max-width: 767px) { .content-card-style-1 .content-card-content .sub-title { font-size: 16px; line-height: 22px; } } .content-card-style-1 .content-card-content .main-title { font-weight: 500; font-size: 52px; line-height: 65px; color: #000; margin-top: 16px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .content-card-style-1 .content-card-content .main-title { font-size: 40px; line-height: 55px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .content-card-style-1 .content-card-content .main-title { font-size: 30px; line-height: 40px; } } @media (max-width: 767px) { .content-card-style-1 .content-card-content .main-title { font-size: 28px; line-height: 28px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .content-card-style-1 .content-card-content .main-title { font-size: 36px; line-height: 42px; } } .content-card-style-1 .content-card-content p { font-size: 24px; line-height: 30px; color: black; font-weight: 400; margin-top: 24px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .content-card-style-1 .content-card-content p { font-size: 20px; line-height: 26px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .content-card-style-1 .content-card-content p { font-size: 16px; line-height: 22px; } } @media (max-width: 767px) { .content-card-style-1 .content-card-content p { font-size: 14px; line-height: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .content-card-style-1 .content-card-content p { font-size: 16px; line-height: 22px; } } /*===== All Content Card Style 4 =====*/ .content-card-style-4 { background-color: #FAFAFA; } .content-card-style-4 .single-content .content-icon i { font-size: 72px; line-height: 72px; color: #393D8E; } .content-card-style-4 .single-content .content-content .title a { font-weight: 500; font-size: 24px; line-height: 30px; color: #000; } @media (max-width: 767px) { .content-card-style-4 .single-content .content-content .title a { font-size: 20px; } } .content-card-style-4 .single-content .content-content p { font-weight: 300; font-size: 16px; line-height: 22px; color: #000; margin-top: 16px; } .content-card-style-4 .single-content .content-content .more { color: #542DED; text-transform: uppercase; margin-top: 32px; font-weight: 500; font-size: 16px; line-height: 24px; } /*================================================================== 22. Header css ==================================================================*/ /*===== All Header Style 1 =====*/ .header-style-1 { display: -moz-flex; display: -ms-flex; display: -o-flex; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } @media (max-width: 767px) { .header-style-1 { display: block; } } .header-style-1 .header-big { width: 66.67%; } @media (max-width: 767px) { .header-style-1 .header-big { width: 100%; } } .header-style-1 .header-big .single-header-item { position: relative; height: 760px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .header-style-1 .header-big .single-header-item { height: 660px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .header-style-1 .header-big .single-header-item { height: 660px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .header-style-1 .header-big .single-header-item { height: 600px; } } @media (max-width: 767px) { .header-style-1 .header-big .single-header-item { height: 460px; } } .header-style-1 .header-big .single-header-item .header-item-content { position: absolute; bottom: 0; left: 0; width: 70%; padding: 40px; background-color: rgba(255, 255, 255, 0.74); } @media only screen and (min-width: 768px) and (max-width: 991px) { .header-style-1 .header-big .single-header-item .header-item-content { padding: 25px; } } @media (max-width: 767px) { .header-style-1 .header-big .single-header-item .header-item-content { padding: 15px; width: 80%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .header-style-1 .header-big .single-header-item .header-item-content { width: 70%; } } .header-style-1 .header-big .single-header-item .header-item-content .title { font-weight: 300; font-size: 44px; line-height: 55px; color: #000; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .header-style-1 .header-big .single-header-item .header-item-content .title { font-size: 30px; line-height: 42px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .header-style-1 .header-big .single-header-item .header-item-content .title { font-size: 28px; line-height: 38px; } } @media (max-width: 767px) { .header-style-1 .header-big .single-header-item .header-item-content .title { font-size: 18px; line-height: 28px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .header-style-1 .header-big .single-header-item .header-item-content .title { font-size: 28px; line-height: 38px; } } .header-style-1 .header-big .single-header-item .header-item-content .link { font-weight: 700; font-size: 16px; line-height: 24px; color: #542DED; margin-top: 24px; } @media (max-width: 767px) { .header-style-1 .header-big .single-header-item .header-item-content .link { font-size: 14px; } } .header-style-1 .header-big .header-items-active .slick-dots { position: absolute; top: 50%; right: 30px; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 9; } .header-style-1 .header-big .header-items-active .slick-dots li button { background: rgba(0, 0, 0, 0.38); width: 8px; height: 8px; border-radius: 50%; font-size: 0; border: 0; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .header-style-1 .header-big .header-items-active .slick-dots li.slick-active button { background-color: #542DED; -webkit-transform: scale(2); transform: scale(2); } .header-style-1 .header-min { width: 33.33%; } @media (max-width: 767px) { .header-style-1 .header-min { width: 100%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .header-style-1 .header-min { display: -moz-flex; display: -ms-flex; display: -o-flex; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } } .header-style-1 .header-min .header-min-item { height: 380px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .header-style-1 .header-min .header-min-item { height: 330px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .header-style-1 .header-min .header-min-item { height: 330px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .header-style-1 .header-min .header-min-item { height: 300px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .header-style-1 .header-min .header-min-item { width: 50%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .header-style-1 .header-min .header-min-item .product-content { width: 70%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .header-style-1 .header-min .header-min-item .product-content { width: 70%; } } /*===== All Header Style =====*/ .header-style-dark-1 .header-big .single-header-item .header-item-content { background-color: rgba(0, 0, 0, 0.74); } .header-style-dark-1 .header-big .single-header-item .header-item-content .title { color: #fff; } .header-style-dark-1 .header-big .single-header-item .header-item-content .link { color: #00D4E0; } .header-style-dark-1 .header-big .header-items-active .slick-dots li.slick-active button { background-color: #00D4E0; } .header-style-dark-1 .header-min .product-style-25 .product-content { background-color: rgba(0, 0, 0, 0.74); } .header-style-dark-1 .header-min .product-style-25 .product-content .title a { color: #fff; } .header-style-dark-1 .header-min .product-style-25 .product-content p { color: rgba(255, 255, 255, 0.74); } /*================================================================== 24. Reviews css ==================================================================*/ /*===== All Reviews Style =====*/ .reviews-style .reviews-menu .nav { position: relative; display: -moz-inline-flex; display: -ms-inline-flex; display: -o-inline-flex; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .reviews-style .reviews-menu .nav::before { position: absolute; content: ''; width: 100%; height: 2px; border-radius: 50px; background-color: #EFEFEF; left: 0; bottom: 0; } .reviews-style .reviews-menu .nav li a { font-weight: 700; font-size: 16px; line-height: 24px; color: #7D7D7D; padding: 8px 16px; text-transform: uppercase; letter-spacing: 1px; position: relative; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } @media (max-width: 767px) { .reviews-style .reviews-menu .nav li a { padding: 4px 4px; font-size: 13px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .reviews-style .reviews-menu .nav li a { font-size: 16px; padding: 8px 16px; } } .reviews-style .reviews-menu .nav li a::before { position: absolute; content: ''; width: 100%; height: 4px; border-radius: 50px; background-color: #EFEFEF; left: 0; bottom: -1px; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .reviews-style .reviews-menu .nav li a.active { color: #542DED; } .reviews-style .reviews-menu .nav li a.active::before { opacity: 1; visibility: visible; background-color: #542DED; } .reviews-style .reviews-title { margin-top: 32px; } .reviews-style .reviews-title .title { font-size: 20px; line-height: 28px; color: #000; font-weight: 400; } @media (max-width: 767px) { .reviews-style .reviews-title .title { font-size: 16px; } } .reviews-style .reviews-rating-wrapper { display: -moz-flex; display: -ms-flex; display: -o-flex; display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 16px; } .reviews-style .reviews-rating-wrapper .reviews-rating-star { border: 2px solid #EFEFEF; width: 50%; padding: 32px; } @media (max-width: 767px) { .reviews-style .reviews-rating-wrapper .reviews-rating-star { width: 100%; padding: 24px; } } .reviews-style .reviews-rating-wrapper .reviews-rating-star .rating-review { font-size: 16px; line-height: 22px; font-weight: 400; color: rgba(0, 0, 0, 0.64); } .reviews-style .reviews-rating-wrapper .reviews-rating-star .rating-review i { font-size: 20px; color: #FFBE27; } .reviews-style .reviews-rating-wrapper .reviews-rating-star .rating-review span { font-weight: 500; color: #000; } .reviews-style .reviews-rating-wrapper .reviews-rating-star .reviews-rating-bar .single-reviews-rating-bar { display: -moz-flex; display: -ms-flex; display: -o-flex; display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 16px; } .reviews-style .reviews-rating-wrapper .reviews-rating-star .reviews-rating-bar .single-reviews-rating-bar .value { width: 85px; font-size: 14px; line-height: 20px; color: #000; font-weight: 400; } .reviews-style .reviews-rating-wrapper .reviews-rating-star .reviews-rating-bar .single-reviews-rating-bar .rating-bar-inner { width: 200px; height: 20px; background-color: #EFEFEF; border-radius: 50px; position: relative; } @media (max-width: 767px) { .reviews-style .reviews-rating-wrapper .reviews-rating-star .reviews-rating-bar .single-reviews-rating-bar .rating-bar-inner { width: 60%; } } .reviews-style .reviews-rating-wrapper .reviews-rating-star .reviews-rating-bar .single-reviews-rating-bar .rating-bar-inner .bar-inner { position: absolute; height: 100%; top: 0; left: 0; border-radius: 50px; background-color: #E14C7B; } .reviews-style .reviews-rating-wrapper .reviews-rating-star .reviews-rating-bar .single-reviews-rating-bar .percent { width: 50px; font-size: 14px; line-height: 20px; color: #000; font-weight: 400; margin-left: 32px; } @media (max-width: 767px) { .reviews-style .reviews-rating-wrapper .reviews-rating-star .reviews-rating-bar .single-reviews-rating-bar .percent { margin-left: 18px; } } .reviews-style .reviews-rating-wrapper .reviews-rating-form { border: 2px solid #EFEFEF; border-left: 0; width: 50%; padding: 32px; } @media (max-width: 767px) { .reviews-style .reviews-rating-wrapper .reviews-rating-form { width: 100%; border-left: 2px solid #EFEFEF; border-top: 0; padding: 24px; } } .reviews-style .reviews-rating-wrapper .reviews-rating-form .rating-star p { font-weight: 300; font-size: 14px; line-height: 20px; color: #4C4C4C; } .reviews-style .reviews-rating-wrapper .reviews-rating-form .rating-star .stars { display: -moz-flex; display: -ms-flex; display: -o-flex; display: -webkit-box; display: -ms-flexbox; display: flex; } .reviews-style .reviews-rating-wrapper .reviews-rating-form .rating-star .stars li { font-size: 24px; color: #7D7D7D; cursor: pointer; } .reviews-style .reviews-rating-wrapper .reviews-rating-form .rating-star .stars li.hover, .reviews-style .reviews-rating-wrapper .reviews-rating-form .rating-star .stars li.selected { color: #FFBE27; } .reviews-style .reviews-rating-wrapper .reviews-rating-form .rating-form .single-rating-form { display: -moz-flex; display: -ms-flex; display: -o-flex; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: space-between; -ms-flex-pack: space-between; justify-content: space-between; } .reviews-style .reviews-rating-wrapper .reviews-rating-form .rating-form .rating-form-file { display: -moz-flex; display: -ms-flex; display: -o-flex; display: -webkit-box; display: -ms-flexbox; display: flex; } .reviews-style .reviews-rating-wrapper .reviews-rating-form .rating-form .rating-form-file .file { width: 40px; height: 40px; line-height: 40px; text-align: center; margin-top: 16px; } .reviews-style .reviews-rating-wrapper .reviews-rating-form .rating-form .rating-form-file .file input[type="file"] { display: none; } .reviews-style .reviews-rating-wrapper .reviews-rating-form .rating-form .rating-form-file .file input[type="file"] + label { font-size: 24px; color: #4C4C4C; cursor: pointer; line-height: 40px; } .reviews-style .reviews-rating-wrapper .reviews-rating-form .rating-form .rating-form-btn { margin-top: 16px; } .reviews-style .reviews-btn { display: -moz-flex; display: -ms-flex; display: -o-flex; display: -webkit-box; display: -ms-flexbox; display: flex; padding: 16px; padding-top: 8px; border: 2px solid #EFEFEF; -webkit-box-pack: space-between; -ms-flex-pack: space-between; justify-content: space-between; background-color: #FAFAFA; margin-top: -2px; } .reviews-style .reviews-btn .reviews-btn-left { display: -moz-flex; display: -ms-flex; display: -o-flex; display: -webkit-box; display: -ms-flexbox; display: flex; } @media (max-width: 767px) { .reviews-style .reviews-btn .reviews-btn-left { display: block; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .reviews-style .reviews-btn .reviews-btn-left { display: -moz-flex; display: -ms-flex; display: -o-flex; display: -webkit-box; display: -ms-flexbox; display: flex; } } .reviews-style .reviews-btn .reviews-btn-left .dropdown-style { margin-top: 8px; } .reviews-style .reviews-btn .reviews-btn-left .dropdown-style + .dropdown-style { margin-left: 8px; } @media (max-width: 767px) { .reviews-style .reviews-btn .reviews-btn-left .dropdown-style + .dropdown-style { margin-left: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .reviews-style .reviews-btn .reviews-btn-left .dropdown-style + .dropdown-style { margin-left: 8px; } } .reviews-style .reviews-btn .reviews-btn-right .main-btn { margin-top: 8px; font-weight: 400; background-color: #EEE6FD; color: #542DED; } .reviews-style .reviews-btn .reviews-btn-right .main-btn:hover { -webkit-box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.25); box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.25); } .reviews-style .reviews-btn .reviews-btn-right .main-btn + .main-btn { margin-left: 6px; } @media (max-width: 767px) { .reviews-style .reviews-btn .reviews-btn-right .main-btn + .main-btn { margin-left: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .reviews-style .reviews-btn .reviews-btn-right .main-btn + .main-btn { margin-left: 6px; } } .reviews-style .reviews-comment { padding: 8px 32px 18px; padding-top: 8px; border: 2px solid #EFEFEF; margin-top: -2px; } @media (max-width: 767px) { .reviews-style .reviews-comment { padding: 0px 24px 10px; } } .reviews-style .reviews-comment .comment-items > li:last-child .single-review-comment { border-bottom: 0; } .reviews-style .reviews-comment .comment-items .single-review-comment { margin-top: 24px; padding-bottom: 14px; border-bottom: 2px solid #EFEFEF; } .reviews-style .reviews-comment .comment-items .single-review-comment .comment-user-info { display: -moz-flex; display: -ms-flex; display: -o-flex; display: -webkit-box; display: -ms-flexbox; display: flex; } .reviews-style .reviews-comment .comment-items .single-review-comment .comment-user-info .comment-author img { border-radius: 50%; } .reviews-style .reviews-comment .comment-items .single-review-comment .comment-user-info .comment-content { padding-left: 16px; -moz-flex: 1; -ms-flex: 1; -webkit-box-flex: 1; flex: 1; } .reviews-style .reviews-comment .comment-items .single-review-comment .comment-user-info .comment-content .name { font-weight: 500; font-size: 16px; line-height: 22px; color: #000; } .reviews-style .reviews-comment .comment-items .single-review-comment .comment-user-info .comment-content p { font-size: 14px; line-height: 20px; color: #4C4C4C; margin-top: 4px; } .reviews-style .reviews-comment .comment-items .single-review-comment .comment-user-info .comment-content p i { font-size: 20px; color: #FFBE27; } .reviews-style .reviews-comment .comment-items .single-review-comment .comment-user-info .comment-content p .rating strong { font-weight: 500; } .reviews-style .reviews-comment .comment-items .single-review-comment .comment-user-info .comment-content p .date { margin-left: 16px; } @media (max-width: 767px) { .reviews-style .reviews-comment .comment-items .single-review-comment .comment-user-info .comment-content p .date { margin-left: 8px; } } .reviews-style .reviews-comment .comment-items .single-review-comment .comment-user-text { padding-top: 16px; } .reviews-style .reviews-comment .comment-items .single-review-comment .comment-user-text p { font-size: 16px; line-height: 22px; color: #000; } .reviews-style .reviews-comment .comment-items .single-review-comment .comment-user-text .comment-image { display: -moz-flex; display: -ms-flex; display: -o-flex; display: -webkit-box; display: -ms-flexbox; display: flex; padding-top: 8px; } .reviews-style .reviews-comment .comment-items .single-review-comment .comment-user-text .comment-image .image { padding-top: 8px; } .reviews-style .reviews-comment .comment-items .single-review-comment .comment-user-text .comment-image .image + .image { margin-left: 8px; } .reviews-style .reviews-comment .comment-items .single-review-comment .comment-user-text .comment-image .image img { width: 72px; border-radius: 4px; } .reviews-style .reviews-comment .comment-items .single-review-comment .comment-user-text .comment-meta { padding-top: 24px; } .reviews-style .reviews-comment .comment-items .single-review-comment .comment-user-text .comment-meta li { color: #E14C7B; font-size: 16px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; display: inline-block; } .reviews-style .reviews-comment .comment-items .single-review-comment .comment-user-text .comment-meta li i { font-size: 20px; } .reviews-style .reviews-comment .comment-items .single-review-comment .comment-user-text .comment-meta li a { color: #000; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .reviews-style .reviews-comment .comment-items .single-review-comment .comment-user-text .comment-meta li a:hover { color: #542DED; } .reviews-style .reviews-comment .comment-items .single-review-comment .comment-user-text .comment-meta li + li { margin-left: 20px; } .reviews-style .reviews-comment .comment-items .comment-replay { padding-left: 50px; } @media (max-width: 767px) { .reviews-style .reviews-comment .comment-items .comment-replay { padding-left: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .reviews-style .reviews-comment .comment-items .comment-replay { padding-left: 50px; } } /*===== All Reviews Dark Style =====*/ .reviews-dark { background-color: #161359; } .reviews-dark .reviews-menu .nav::before { background-color: rgba(255, 255, 255, 0.16); } .reviews-dark .reviews-menu .nav li a { color: rgba(255, 255, 255, 0.6); } .reviews-dark .reviews-menu .nav li a::before { background-color: #E14C7B; } .reviews-dark .reviews-menu .nav li a.active { color: #E14C7B; } .reviews-dark .reviews-menu .nav li a.active::before { opacity: 1; visibility: visible; background-color: #E14C7B; } .reviews-dark .reviews-title .title { color: #fff; } .reviews-dark .reviews-rating-wrapper .reviews-rating-star { border-color: rgba(255, 255, 255, 0.24); } .reviews-dark .reviews-rating-wrapper .reviews-rating-star .rating-review { color: rgba(255, 255, 255, 0.64); } .reviews-dark .reviews-rating-wrapper .reviews-rating-star .rating-review i { color: #FFBE27; } .reviews-dark .reviews-rating-wrapper .reviews-rating-star .rating-review span { color: #fff; } .reviews-dark .reviews-rating-wrapper .reviews-rating-star .reviews-rating-bar .single-reviews-rating-bar .value { color: #fff; } .reviews-dark .reviews-rating-wrapper .reviews-rating-star .reviews-rating-bar .single-reviews-rating-bar .rating-bar-inner { background-color: rgba(255, 255, 255, 0.16); } .reviews-dark .reviews-rating-wrapper .reviews-rating-star .reviews-rating-bar .single-reviews-rating-bar .rating-bar-inner .bar-inner { background-color: #E14C7B; } .reviews-dark .reviews-rating-wrapper .reviews-rating-star .reviews-rating-bar .single-reviews-rating-bar .percent { color: #fff; } .reviews-dark .reviews-rating-wrapper .reviews-rating-form { border-color: rgba(255, 255, 255, 0.16); } .reviews-dark .reviews-rating-wrapper .reviews-rating-form .rating-star p { color: rgba(255, 255, 255, 0.74); } .reviews-dark .reviews-rating-wrapper .reviews-rating-form .rating-form .rating-form-file .file input[type="file"] + label { color: rgba(255, 255, 255, 0.74); } .reviews-dark .reviews-btn { background-color: rgba(0, 0, 0, 0.24); border-color: rgba(255, 255, 255, 0.24); } .reviews-dark .reviews-btn .reviews-btn-right .main-btn { background-color: rgba(255, 255, 255, 0.16); color: #E14C7B; } .reviews-dark .reviews-comment { border-color: rgba(255, 255, 255, 0.24); } .reviews-dark .reviews-comment .comment-items .single-review-comment { border-color: rgba(255, 255, 255, 0.24); } .reviews-dark .reviews-comment .comment-items .single-review-comment .comment-user-info .comment-content .name { color: #fff; } .reviews-dark .reviews-comment .comment-items .single-review-comment .comment-user-info .comment-content p { color: #FAFAFA; } .reviews-dark .reviews-comment .comment-items .single-review-comment .comment-user-info .comment-content p i { color: #FFBE27; } .reviews-dark .reviews-comment .comment-items .single-review-comment .comment-user-text p { color: #fff; } .reviews-dark .reviews-comment .comment-items .single-review-comment .comment-user-text .comment-meta li { color: #00D4E0; } .reviews-dark .reviews-comment .comment-items .single-review-comment .comment-user-text .comment-meta li a { color: #fff; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .reviews-dark .reviews-comment .comment-items .single-review-comment .comment-user-text .comment-meta li a:hover { color: #E14C7B; } /*================================================================== 24. Footer css ==================================================================*/ /*===== All Footer Style 3 =====*/ .footer-style-3 { background-color: #FAFAFA; } .footer-style-3 .footer-top .footer-widget-subscribe { margin-top: 32px; } .footer-style-3 .footer-top .footer-widget-subscribe p { margin-top: 16px; text-align: center !important; } .footer-style-3 .footer-top .footer-widget-subscribe .subscribe-form .single-form .form-input { position: relative; } .footer-style-3 .footer-top .footer-widget-subscribe .subscribe-form .single-form .form-input .main-btn { width: 40px; height: 40px; line-height: 40px; color: #fff; font-size: 24px; position: absolute; top: 0; right: 0; padding: 0; text-align: center; } .footer-style-3 .footer-top .footer-follow { padding-top: 24px; } .footer-style-3 .footer-top .footer-follow li { display: inline-block; margin: 0 8px; } .footer-style-3 .footer-top .footer-follow li a { font-size: 20px; color: #542DED; } @media (max-width: 767px) { .footer-style-3 .footer-top .footer-follow li a { font-size: 20px; } } .footer-style-3 .footer-widget { margin-top: 32px; } .footer-style-3 .footer-widget .footer-title { text-transform: uppercase; font-weight: 700; font-size: 16px; line-height: 22px; color: #000; } .footer-style-3 .footer-widget .footer-link { padding-top: 12px; } .footer-style-3 .footer-widget .footer-link li { padding: 4px 0; } .footer-style-3 .footer-widget .footer-link li a { font-weight: 500; font-size: 16px; line-height: 22px; color: #000; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } @media only screen and (min-width: 768px) and (max-width: 991px) { .footer-style-3 .footer-widget .footer-link li a { font-size: 14px; } } .footer-style-3 .footer-widget .footer-link li a:hover { color: #542DED; } .footer-style-3 .footer-copyright { padding-top: 52px; } .footer-style-3 .footer-copyright p { font-weight: normal; font-size: 16px; line-height: 22px; color: #000; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .footer-style-3 .footer-copyright p a { color: #000; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .footer-style-3 .footer-copyright p a:hover { color: #542DED; } /*===== All Footer Style Dark 3 =====*/ .footer-dark-style-3 { background-color: #4C4C4C; } .footer-dark-style-3 .footer-top .footer-widget-subscribe p { color: #fff; } .footer-dark-style-3 .footer-top .footer-widget-subscribe .subscribe-form .single-form .form-input input:focus { border-color: #E14C7B; } .footer-dark-style-3 .footer-top .footer-follow li a { color: #fff; } .footer-dark-style-3 .footer-widget .footer-title { color: rgba(255, 255, 255, 0.6); } .footer-dark-style-3 .footer-widget .footer-link li a { color: #fff; } .footer-dark-style-3 .footer-widget .footer-link li a:hover { color: #E14C7B; } .footer-dark-style-3 .footer-copyright p { color: #fff; } .footer-dark-style-3 .footer-copyright p a { color: #fff; } .footer-dark-style-3 .footer-copyright p a:hover { color: #E14C7B; } .features-section .single-feature-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 50px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .features-section .single-feature-wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .features-section .single-feature-wrapper .feature-icon { font-size: 20px; width: 50px; height: 50px; border-radius: 50%; background: #542DED; color: #fff; margin-bottom: 25px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .features-section .single-feature-wrapper .feature-content { margin-left: 25px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .features-section .single-feature-wrapper .feature-content { margin-left: 0px; } } .subscribe-section .subscribe-form .single-form .main-btn { position: absolute; top: 0; right: 0; border-radius: 4px; width: 40px; } .pagination-wrapper ul li a { width: 35px; height: 35px; 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: 1px solid #542DED; color: #828282; font-size: 16px; margin: 5px; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .pagination-wrapper ul li a.active, .pagination-wrapper ul li a:hover { background: #542DED; color: #fff; } .category-wrapper .tab-content .tab-pane { display: block; height: 0; } .category-wrapper .tab-content .tab-pane.active { height: auto; } .product-image .icon-text { position: absolute; z-index: 9; top: 10px; left: 10px; text-transform: uppercase; } .clients-logo-section .client-logo-active .single-logo-wrapper { padding: 10px 20px; text-align: center; opacity: .5; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .clients-logo-section .client-logo-active .single-logo-wrapper:hover { opacity: 1; } .clients-logo-section .client-logo-active .slick-slide:focus { outline: 0; } /*# sourceMappingURL=style.css.map */