/*======================================
[ CSS Table of contents ]
01. Preloader CSS
02. Header CSS
+ Logo
+ Category Menu
+ Main Menu
03. Hero Area CSS
04. Small Banner CSS
05. Medium Banner CSS
06. Single Product CSS
07. Shop Sidebar CSS
08. Shop Single CSS
09. Shop Home List CSS
10. Cart CSS
11. Checkout CSS
12. Login & Register CSS
13. Cowndown CSS
14. Shop Services CSS
15. Newslatter CSS
16. About Us CSS
17. Team CSS
18. Blog CSS
+ Blog Archive
+ Blog Sidebar
+ Blog Single
19. Contact CSS
20. 404 Error CSS
21. Footer CSS
========================================*/
@font-face {
font-family: "Averta SemiBold";
src: url("../fonts/avertabsemibold.ttf") format("truetype");
font-weight: 600;
font-style: normal;
}
.color-plate {
position: fixed;
display: block;
z-index: 99998;
padding: 20px;
width: 245px;
background: #fff;
right: -245px;
text-align: left;
top: 30%;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
-webkit-box-shadow: -3px 0px 25px -2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: -3px 0px 25px -2px rgba(0, 0, 0, 0.2);
box-shadow: -3px 0px 25px -2px rgba(0, 0, 0, 0.2);
}
.color-plate.active {
right: 0;
}
.color-plate .color-plate-icon {
position: absolute;
left: -48px;
width: 48px;
height: 45px;
line-height: 45px;
font-size: 21px;
border-radius: 5px 0 0 5px;
background: #fff;
text-align: center;
color: #333;
top: 0;
cursor: pointer;
box-shadow: -4px 0px 5px #00000036;
}
.color-plate h4 {
display: block;
font-size: 15px;
margin-bottom: 5px;
font-weight: 500;
}
.color-plate p {
font-size: 13px;
margin-bottom: 15px;
line-height: 20px;
}
.color-plate span {
width: 42px;
height: 35px;
border-radius: 0;
cursor: pointer;
display: inline-block;
margin-right: 3px;
}
.color-plate span:hover {
cursor: pointer;
}
.color-plate span.color1 {
background: #f7941d;
}
.color-plate span.color2 {
background: #0088cc;
}
.color-plate span.color3 {
background: #32b87d;
}
.color-plate span.color4 {
background: #fe754a;
}
.color-plate span.color5 {
background: #f82f56;
}
.color-plate span.color6 {
background: #00cec9;
}
.color-plate span.color7 {
background: #6c5ce7;
}
.color-plate span.color8 {
background: #85ba46;
}
.color-plate span.color9 {
background: #fd79a8;
}
.color-plate span.color10 {
background: #a29bfe;
}
.color-plate span.color11 {
background: #badc58;
}
.color-plate span.color12 {
background: #ff1d38;
}
/* Preloader */
.preloader {
position: fixed;
top: 0;
left: 0;
z-index: 999999999;
width: 100%;
height: 100%;
background-color: #fff;
overflow: hidden;
}
.preloader-inner {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.preloader-icon {
width: 100px;
height: 100px;
display: inline-block;
padding: 0px;
}
.preloader-icon span {
position: absolute;
display: inline-block;
width: 100px;
height: 100px;
border-radius: 100%;
background: #07562f;
-webkit-animation: preloader-fx 1.6s linear infinite;
animation: preloader-fx 1.6s linear infinite;
}
.preloader-icon span:last-child {
animation-delay: -0.8s;
-webkit-animation-delay: -0.8s;
}
@keyframes preloader-fx {
0% {
transform: scale(0, 0);
opacity: 0.5;
}
100% {
transform: scale(1, 1);
opacity: 0;
}
}
@-webkit-keyframes preloader-fx {
0% {
-webkit-transform: scale(0, 0);
opacity: 0.5;
}
100% {
-webkit-transform: scale(1, 1);
opacity: 0;
}
}
/* End Preloader */
.btn {
position: relative;
font-weight: 500;
font-size: 14px;
color: #fff;
background: #333;
display: inline-block;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
z-index: 5;
display: inline-block;
padding: 13px 32px;
border-radius: 30px;
text-transform: uppercase;
}
.btn:hover {
color: #fff;
background: #f7941d;
}
#scrollUp {
right: 10px;
z-index: 33 !important;
/* bottom: 10px; */
bottom: 80px;
text-align: center;
}
#scrollUp i {
height: 40px;
width: 40px;
line-height: 40px;
background: transparent;
background: #222;
border-radius: 0;
font-size: 18px;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
transition: all 500ms ease;
display: block;
color: #fff;
box-shadow: 0px 4px 19px #00000038;
}
#scrollUp i:hover {
background: #f7941d;
color: #fff;
}
/*======================================
01. Header CSS
========================================*/
/* Topbar */
.topbar {
background-color: #fff;
border-bottom: 1px solid #e2e2e2;
padding: 15px 0;
} /* =========================================
CUSTOM CONTAINER CLASSES
========================================= */
.containers {
width: 100%;
padding-right: var(--bs-gutter-x, 15px);
padding-left: var(--bs-gutter-x, 15px);
margin-right: auto;
margin-left: auto;
}
/* Mobile/Tablet - Full width with padding */
@media (max-width: 991.98px) {
.containers {
max-width: 100%;
padding-right: 20px;
padding-left: 20px;
}
}
/* Desktop - Responsive containers */
@media (min-width: 992px) {
.containers {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.containers {
max-width: 1140px;
}
}
@media (min-width: 1400px) {
.containers {
max-width: 1320px;
}
}
@media (min-width: 1600px) {
.containers {
max-width: 1520px;
}
}
@media (min-width: 1800px) {
.containers {
max-width: 1720px;
}
}
/* Extra small mobile devices (less than 576px) */
@media (max-width: 575.98px) {
.containers {
padding-right: 15px;
padding-left: 15px;
}
}
/* Very small mobile devices (less than 375px) */
@media (max-width: 374.98px) {
.containers {
padding-right: 12px;
padding-left: 12px;
}
}
/* Special case for header to have more space on mobile */
@media (max-width: 991.98px) {
.header .containers {
padding-right: 15px;
padding-left: 15px;
}
}
/* Extra spacing for very small screens */
@media (max-width: 374.98px) {
.header .containers {
padding-right: 10px;
padding-left: 10px;
}
}
/* Ensure no horizontal scroll on mobile */
@media (max-width: 991.98px) {
body {
overflow-x: hidden;
}
.containers {
overflow-x: hidden;
}
}
/* =========================================
HEADER EXTRAS DROPDOWN FOR 992px-1199px
========================================= */
/* Show normal layout on 1200px and above */
@media (min-width: 1200px) {
.header-extras-normal {
display: flex !important;
}
.header-extras-dropdown {
display: none !important;
}
}
/* Show dropdown layout on 992px-1199px */
@media (min-width: 992px) and (max-width: 1199.98px) {
.header-extras-normal {
display: none !important;
}
.header-extras-dropdown {
display: flex !important;
}
/* Compact dropdown toggle */
.compact-toggle {
padding: 8px 15px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 4px;
color: #fff;
text-decoration: none;
transition: all 0.3s ease;
white-space: nowrap;
}
.compact-toggle:hover {
background-color: rgba(255, 255, 255, 0.1);
color: #c1d444;
}
.compact-toggle i {
font-size: 18px;
}
/* Compact menu styling */
.compact-menu {
min-width: 220px;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
padding: 8px 0;
margin-top: 5px;
}
.compact-menu .dropdown-item {
padding: 10px 16px;
color: #333;
display: flex;
align-items: center;
transition: all 0.2s ease;
}
.compact-menu .dropdown-item:hover {
background-color: #f8f9fa;
color: #c1d444;
}
.compact-menu .dropdown-item i {
width: 20px;
text-align: center;
margin-right: 10px;
}
/* Badges in compact menu */
.compact-menu .badge {
font-size: 11px;
padding: 3px 6px;
min-width: 20px;
text-align: center;
}
/* Language submenu */
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .submenu {
position: absolute;
left: 100%;
top: -8px;
display: none;
min-width: 160px;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.dropdown-submenu:hover .submenu {
display: block;
}
/* Adjust main navigation for tighter space */
.header .col-12.col-md-7.d-none.d-lg-flex {
flex: 0 0 55%;
max-width: 55%;
}
.header-extras-dropdown {
flex: 0 0 25%;
max-width: 25%;
}
/* Compact user greeting */
.user-greeting {
font-size: 14px;
}
}
/* If you need a full-width container for specific sections */
.containers-fluid {
width: 100%;
padding-right: var(--bs-gutter-x, 15px);
padding-left: var(--bs-gutter-x, 15px);
margin-right: auto;
margin-left: auto;
}
/* =========================================
FIX HEADER OVERLAPPING ISSUES
========================================= */
/* Apply the containers class to header */
.header .containers {
position: relative;
z-index: 1000;
}
/* Ensure header content doesn't overflow */
.header .row.align-items-center {
flex-wrap: nowrap;
min-height: 80px; /* Adjust based on your logo height */
}
/* Logo column fixed width */
.header .col-6.col-md-2 {
flex: 0 0 auto;
width: auto;
min-width: 150px; /* Minimum width for logo */
}
/* Desktop navigation column */
.header .col-12.col-md-7.d-none.d-lg-flex {
flex: 1 1 auto;
min-width: 0; /* Allow shrinking */
}
/* Desktop icons column */
.header .col-md-3.d-none.d-lg-flex {
flex: 0 0 auto;
width: auto;
min-width: 200px; /* Minimum width for icons */
}
/* Hamburger column for mobile */
.header .col-6.col-md-10.d-lg-none {
flex: 0 0 auto;
width: auto;
}
/* =========================================
SPECIFIC FIXES FOR OVERLAPPING
========================================= */
/* Prevent mega menu from causing horizontal scroll */
.mega-menu-container {
max-width: calc(100vw - 30px); /* Account for container padding */
overflow-x: hidden;
overflow-y: auto;
}
/* Ensure list items don't overflow */
.header-extras .list-main {
flex-wrap: nowrap;
overflow: visible;
}
/* Fix for language selector on small screens */
.language-selector {
position: relative;
}
/* Ensure cart dropdown doesn't get cut off */
.header .shopping {
position: relative;
}
.header .shopping .shopping-item {
position: absolute !important;
top: 100%;
right: 0;
opacity: 0;
visibility: hidden;
transition: all 0.25s ease;
z-index: 99999;
margin-top: -8px;
}
/* =========================================
RESPONSIVE ADJUSTMENTS
========================================= */
/* Tablet adjustments */
@media (max-width: 1199.98px) and (min-width: 992px) {
.header .col-12.col-md-7.d-none.d-lg-flex {
flex: 0 0 60%;
max-width: 60%;
}
.header .col-md-3.d-none.d-lg-flex {
flex: 0 0 25%;
max-width: 25%;
}
/* Adjust mega menu width for tablet */
.mega-menu-container {
max-width: 900px;
left: 50% !important;
transform: translateX(-50%) !important;
}
}
/* Mobile adjustments */
@media (max-width: 991.98px) {
.header .row.align-items-center {
flex-wrap: wrap;
min-height: 70px;
}
.header .col-6.col-md-2 {
flex: 0 0 50%;
max-width: 50%;
}
.header .col-6.col-md-10.d-lg-none {
flex: 0 0 50%;
max-width: 50%;
}
/* Ensure offcanvas fits within viewport */
.offcanvas {
max-width: 100vw;
}
}
/* Small mobile adjustments */
@media (max-width: 575.98px) {
.containers {
padding-right: 10px;
padding-left: 10px;
}
.header .col-6 {
flex: 0 0 50%;
max-width: 50%;
}
/* Reduce spacing on very small screens */
.header .row.align-items-center {
min-height: 60px;
}
}
/* =========================================
UTILITY CLASSES FOR SPACING CONTROL
========================================= */
/* Prevent text overflow */
.text-nowrap-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Force line break if needed */
.force-break {
word-break: break-word;
overflow-wrap: break-word;
}
/* Horizontal scroll container for very long content */
.scroll-horizontal {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.scroll-horizontal::-webkit-scrollbar {
height: 4px;
}
.scroll-horizontal::-webkit-scrollbar-track {
background: #f1f1f1;
}
.scroll-horizontal::-webkit-scrollbar-thumb {
background: #888;
border-radius: 2px;
}
/* =========================================
LANGUAGE SELECTOR STYLES
========================================= */
/* Desktop Language Selector */
.language-selector-desktop {
position: relative;
}
.language-dropdown {
position: relative;
}
.language-toggle {
padding: 8px 24px;
border-radius: 48px;
transition: all 0.3s ease;
color: #fff !important;
background: #449880;
text-decoration: none;
}
.language-toggle:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.language-menu {
position: absolute;
top: 100%;
right: 0;
min-width: 140px;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
padding: 8px 0;
z-index: 1000;
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: all 0.3s ease;
}
.language-dropdown:hover .language-menu {
opacity: 1;
visibility: visible;
transform: translateY(20px);
}
.language-menu .dropdown-item {
padding: 8px 16px;
color: #333;
display: flex;
align-items: center;
transition: all 0.2s ease;
}
.language-menu .dropdown-item:hover {
background-color: #f8f9fa;
color: #c1d444;
}
/* Flag Icons */
.flag-icon {
display: inline-block;
width: 20px;
height: 15px;
background-size: cover;
background-position: center;
border-radius: 2px;
}
.flag-icon-us {
background-image: url('data:image/svg+xml;utf8,');
}
.flag-icon-es {
background-image: url('data:image/svg+xml;utf8,');
}
/* =========================================
RESPONSIVE ADJUSTMENTS FOR HEADER EXTRAS
========================================= */
/* Desktop - ensure proper spacing */
@media (min-width: 992px) {
.header-extras .list-main {
/* gap: 15px !important; */
}
/* Compact language selector for desktop */
.language-toggle .lang-text {
display: inline;
}
/* Prevent icon-only from overlapping */
.header-extras .single-icon {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
}
.header-extras .total-count {
position: absolute;
top: -5px;
right: -5px;
background: #c1d444;
color: #000;
font-size: 10px;
width: 18px;
height: 18px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
}
/* Tablet Landscape (768px - 991px) */
@media (max-width: 991.98px) and (min-width: 768px) {
/* Switch to mobile layout on tablet */
.col-md-3.d-none.d-lg-flex {
display: none !important;
}
/* Ensure hamburger is visible */
.col-6.col-md-10.d-lg-none {
display: block !important;
}
}
/* Tablet Portrait (576px - 767px) */
@media (max-width: 767.98px) and (min-width: 576px) {
.header .row.align-items-center {
min-height: 60px;
}
.logo-wrap img {
max-height: 40px;
}
}
/* Mobile (below 576px) */
@media (max-width: 575.98px) {
.containers {
padding-right: 10px;
padding-left: 10px;
}
.header .row.align-items-center {
min-height: 55px;
}
.logo-wrap img {
max-height: 35px;
}
/* Larger touch target for hamburger */
.navbar-toggler {
padding: 10px;
min-width: 44px;
min-height: 44px;
}
.navbar-toggler i {
font-size: 1.8rem !important;
}
}
/* Small Mobile (below 375px) */
@media (max-width: 374.98px) {
.header .row.align-items-center {
min-height: 50px;
}
.logo-wrap img {
max-height: 30px;
}
}
/* =========================================
FIX OVERLAPPING ISSUES
========================================= */
/* Ensure header extras don't wrap on desktop */
@media (min-width: 992px) {
.header-extras {
white-space: nowrap;
}
.header-extras .list-main {
flex-wrap: nowrap;
overflow: visible;
}
/* Prevent language dropdown from being cut off */
.language-selector-desktop {
position: static;
}
.language-dropdown {
position: relative;
}
.language-menu {
right: 0;
left: auto;
}
/* Ensure cart dropdown positioning */
.shopping {
position: relative;
}
.shopping-item {
right: -15px;
left: auto !important;
}
}
/* Mobile offcanvas language selector */
@media (max-width: 1135.98px) {
/* Style for mobile language dropdown */
#mobileLanguageDropdown {
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 4px;
padding: 8px 12px;
margin: 5px 0;
}
.offcanvas-body .dropdown-menu-light .lang-option {
padding: 8px 20px;
display: flex;
align-items: center;
}
/* Flag icons in mobile */
.offcanvas-body .flag-icon {
width: 24px;
height: 18px;
margin-right: 12px;
}
}
/* =========================================
GOOGLE TRANSLATE STYLING OVERRIDES
========================================= */
/* Hide Google's default translate UI */
.goog-te-banner-frame,
.goog-te-menu-frame,
.goog-te-ftab-frame {
display: none !important;
}
.goog-te-gadget {
display: none !important;
}
/* Style the translated page */
body {
top: 0 !important;
}
/* =========================================
ANIMATION FOR LANGUAGE SWITCH
========================================= */
.lang-option {
position: relative;
overflow: hidden;
}
.lang-option::after {
content: "";
position: absolute;
top: 50%;
left: 10px;
transform: translateY(-50%);
width: 4px;
height: 4px;
background-color: #c1d444;
border-radius: 50%;
opacity: 0;
transition: opacity 0.3s ease;
}
.lang-option.active::after {
opacity: 1;
}
/* =========================================
UTILITY CLASSES FOR LANGUAGE SELECTOR
========================================= */
/* Compact language selector for tight spaces */
.language-toggle.compact .lang-text {
display: none;
}
.language-toggle.compact i.ti-world {
margin-right: 0;
}
/* For very small desktop screens */
@media (max-width: 1199px) and (min-width: 992px) {
.language-toggle .lang-text {
font-size: 14px;
}
.header-extras .list-main {
/* gap: 10px !important; */
}
}
/* Smooth transition for language change */
body.translating {
opacity: 0.7;
pointer-events: none;
transition: opacity 0.3s ease;
}
*/
/* Logo */
.header .logo {
float: left;
margin-top: 35px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.header .navbar {
padding: 0;
}
/* Main Menu */
.navbar-expand-lg .navbar-collapse {
display: block !important;
}
.header.v3 .navbar-expand-lg .navbar-collapse {
display: block !important;
background: #333;
}
/* Active state for main nav items */
.navbar-nav .nav-item.active > .nav-link,
.navbar-nav .nav-item > .nav-link.active {
color: #c1d444 !important;
font-weight: 600; /* optional */
}
/* Also style when inside mega menu dropdown is active (optional) */
.mega-menu-li.active > .nav-link {
color: #c1d444 !important;
}
/* Hover style consistency */
.navbar-nav .nav-link:hover {
color: #c1d444 !important;
}
.navbar-nav .nav-link:active {
color: #c1d444 !important;
}
/* For all dropdowns */
@media (min-width: 992px) {
.navbar-nav .nav-item.dropdown:hover .dropdown-menu,
.mega-menu-li:hover .mega-menu-container {
display: block;
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Disable Bootstrap's click-toggle on desktop */
.dropdown-toggle::after {
display: inline-block !important;
}
.dropdown-toggle[aria-expanded="true"] {
pointer-events: none;
}
/* Adjust mega menu positioning */
.mega-menu-container {
position: absolute;
left: 50% !important;
transform: translateX(-50%) !important;
width: 100%;
max-width: 1200px;
}
}
/* Ensure proper transitions */
.dropdown-menu {
transition: all 0.3s ease;
}
.mega-menu-container {
transition: all 0.3s ease;
}
/* Smooth hover transitions */
@media (min-width: 992px) {
.dropdown-menu {
display: block !important;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.3s ease;
}
.nav-item.dropdown:hover .dropdown-menu,
.mega-menu-li:hover .mega-menu-container {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Mega menu specific */
.mega-menu-container {
display: block !important;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.3s ease;
}
}
/* =========================================
DROPDOWN HOVER & CLICK BEHAVIOR
========================================= */
/* Desktop hover behavior */
@media (min-width: 992px) {
/* Make dropdowns show on hover */
.navbar-nav .nav-item.dropdown:hover .dropdown-menu,
.mega-menu-li:hover .mega-menu-container {
display: block !important;
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Hover styles for nav links */
.navbar-nav .nav-link:hover {
color: #c1d444 !important;
}
/* Clicked state - when dropdown is manually opened via click */
.navbar-nav .nav-item.dropdown.show .nav-link,
.mega-menu-li.show .nav-link {
color: #c1d444 !important;
}
/* Keep dropdown open when clicked (manually opened) */
.navbar-nav .nav-item.dropdown.show .dropdown-menu,
.mega-menu-li.show .mega-menu-container {
display: block !important;
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Arrow rotation for mega menu */
.mega-menu-li .nav-link.dropdown-toggle.active::after {
transform: translateY(-50%) rotate(180deg) !important;
}
}
/* Ensure proper transitions for all dropdowns */
.dropdown-menu {
transition: all 0.3s ease !important;
}
.mega-menu-container {
transition: all 0.3s ease !important;
}
/* Make sure clicked state persists */
.nav-item.dropdown.show,
.mega-menu-li.show {
position: static !important;
}
/* =========================================
DESKTOP DROPDOWN HOVER + CLICK BEHAVIOR
(ONLY affects desktop, mobile remains unchanged)
========================================= */
@media (min-width: 992px) {
/* 1. HOVER BEHAVIOR */
/* Make dropdowns show on hover */
.navbar-nav .nav-item.dropdown:hover .dropdown-menu,
.mega-menu-li:hover .mega-menu-container {
display: block !important;
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Hover color for nav links */
.navbar-nav .nav-link:hover {
color: #c1d444 !important;
}
/* 2. CLICK TO KEEP OPEN BEHAVIOR */
/* When clicked/active, keep dropdown open */
.navbar-nav .nav-item.dropdown.clicked-open .dropdown-menu,
.mega-menu-li.clicked-open .mega-menu-container {
display: block !important;
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Keep link color when clicked */
.navbar-nav .nav-item.dropdown.clicked-open .nav-link,
.mega-menu-li.clicked-open .nav-link {
color: #c1d444 !important;
}
/* 3. OVERRIDE BOOTSTRAP'S ACTIVE STATE FOR DESKTOP */
/* Keep active state for current page, but don't show dropdown */
.navbar-nav .nav-item.dropdown.active .dropdown-menu,
.mega-menu-li.active .mega-menu-container {
display: none !important; /* Don't show dropdown for page active state */
}
.navbar-nav .nav-item.dropdown.active.clicked-open .dropdown-menu,
.mega-menu-li.active.clicked-open .mega-menu-container {
display: block !important; /* But do show if also clicked */
}
/* 4. PREVENT BOOTSTRAP'S DEFAULT CLICK BEHAVIOR ON DESKTOP */
/* This stops Bootstrap from toggling on desktop but keeps it on mobile */
.dropdown-toggle[data-bs-toggle="dropdown"] {
pointer-events: auto;
}
/* 5. MEGA MENU SPECIFIC */
/* Keep mega menu positioned correctly */
.mega-menu-container {
position: absolute;
left: 50% !important;
transform: translateX(-50%) !important;
width: 100%;
max-width: 1200px;
margin-top: 10px;
}
}
/* Smooth transitions for dropdowns */
@media (min-width: 992px) {
.dropdown-menu {
transition: all 0.3s ease !important;
}
.mega-menu-container {
transition: all 0.3s ease !important;
}
/* Optional: Add a delay before closing on hover out (but not on click) */
.navbar-nav .nav-item.dropdown:not(.clicked-open) .dropdown-menu,
.mega-menu-li:not(.clicked-open) .mega-menu-container {
transition-delay: 0.1s;
}
.navbar-nav .nav-item.dropdown.clicked-open .dropdown-menu,
.mega-menu-li.clicked-open .mega-menu-container {
transition-delay: 0s !important;
}
}
.header .nav li a i {
margin-left: 6px;
font-size: 10px;
}
/* Dropdown Menu */
.header .nav li .dropdown {
background: #fff;
width: 220px;
position: absolute;
top: 100%;
z-index: 999;
-webkit-box-shadow: 0px 3px 5px #3333334d;
-moz-box-shadow: 0px 3px 5px #3333334d;
box-shadow: 0px 3px 5px #3333334d;
transform-origin: 0 0 0;
transform: scaleY(0.2);
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
opacity: 0;
visibility: hidden;
padding: 10px;
left: 0;
margin: 0;
}
.header .nav li:hover .dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0px);
}
.header .nav li .dropdown li {
float: none;
margin: 0;
}
.header .nav li .dropdown li a {
padding: 8px 15px;
color: #666;
display: block;
font-weight: 400;
text-transform: capitalize;
background: transparent;
}
.header .nav li .dropdown li a:before {
display: none;
}
.header .nav li .dropdown li:last-child a {
border-bottom: 0px;
}
.header .nav li .dropdown li:hover a {
color: #fff;
background: #f7941d;
}
.header .nav li .dropdown li a:hover {
border-color: transparent;
}
.header .nav li .dropdown li i {
float: right;
margin-top: 8px;
font-size: 10px;
z-index: 5;
}
.header .nav li .dropdown.sub-dropdown {
background: #fff;
width: 220px;
position: absolute;
left: 200px;
top: 0;
z-index: 999;
-webkit-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0px 3px 5px #3333334d;
transform-origin: 0 0 0;
transform: scaleY(0.2);
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
opacity: 0;
visibility: hidden;
padding: 10px;
}
.header .nav li .dropdown li:hover .dropdown.sub-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0px);
}
.header .nav li .dropdown.sub-dropdown li a {
padding: 8px 15px;
color: #666;
display: block;
font-weight: 400;
text-transform: capitalize;
background: transparent;
}
.header .nav li .dropdown li:hover .dropdown.sub-dropdown li a {
background: transparent;
}
.header .nav li .dropdown li .dropdown.sub-dropdown li a:hover {
color: #fff;
background: #f7941d;
}
.header .nav li .dropdown.sub-dropdown li:last-child a {
border-bottom: 0px solid;
}
.mobile-search {
display: none;
}
.header.shop .topbar {
border: none;
padding: 12px 0px;
}
.header.shop .nav-inner {
margin-right: 188px;
}
.header.shop .logo {
float: left;
margin-top: 35px;
}
.header.shop .top-contact {
margin-top: 0px;
}
.header.shop .topbar p {
color: #ccc;
}
.header.shop .topbar .login a {
color: #f7941d;
}
/* Topbar Left Nav */
.header.shop .top-left .list-main li:first-child {
padding-left: 0;
}
.header.shop .top-left .list-main li i {
display: inline-block;
margin-right: 4px;
font-size: 15px;
color: #f7941d;
position: relative;
top: 3px;
}
.header.shop .right-content {
float: right;
}
.header.shop .list-main li {
display: inline-block;
color: #333;
font-size: 13px;
font-weight: 500;
border-right: 1px solid #f0f0f0;
padding: 0px 13px;
}
.header.shop .list-main li i {
display: inline-block;
margin-right: 4px;
font-size: 15px;
color: #f7941d;
position: relative;
top: 1px;
}
.header.shop .list-main li:last-child {
padding-right: 0;
border: none;
}
.header.shop .list-main li a {
color: #333;
}
.header.shop .list-main li a:hover {
color: #f7941d;
}
.header.shop .nav li {
margin-right: 40px;
float: left;
position: relative;
}
.header.shop .nav li {
margin-right: 38px;
position: relative;
}
.header.shop .nav li:last-child {
margin: 0 !important;
}
.header.shop .nav li .new {
background: #f7941d;
color: #fff;
text-transform: uppercase;
font-size: 10px;
padding: 0px 9px;
position: absolute;
left: 0;
top: 6px;
font-weight: 500;
}
.header.shop .nav li .new::before {
position: absolute;
content: "";
left: 4px;
bottom: -8px;
border: 4px solid #f7941d;
border-bottom-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
}
/* Shopping Cart */
.header .shopping {
display: inline-block;
z-index: 9999;
}
.header .shopping .icon {
position: relative;
cursor: pointer;
color: #222;
}
.header .shopping .shopping-item {
position: absolute;
top: 68px;
right: 0;
width: 300px;
background: #fff;
padding: 20px 25px;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
transform: translateY(10px);
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
opacity: 0;
visibility: hidden;
z-index: 99;
}
.header .shopping:hover .shopping-item {
transform: translateY(0px);
opacity: 1;
visibility: visible;
}
.header .shopping .dropdown-cart-header {
padding-bottom: 10px;
margin-bottom: 15px;
border-bottom: 1px solid #e6e6e6;
}
.header .shopping .dropdown-cart-header span {
text-transform: uppercase;
color: #222;
font-size: 13px;
font-weight: 600;
}
.header .shopping .dropdown-cart-header a {
float: right;
text-transform: uppercase;
color: #222;
font-size: 13px;
font-weight: 600;
}
.header .shopping .dropdown-cart-header a:hover {
color: #f7941d;
}
.header .shopping-list li {
overflow: hidden;
border-bottom: 1px solid #e6e6e6;
padding-bottom: 15px;
margin-bottom: 15px;
position: relative;
}
.header .shopping-list li .remove {
position: absolute;
left: 0;
bottom: 16px;
margin-top: -20px;
height: 20px;
width: 20px;
line-height: 18px;
text-align: center;
background: #fff;
color: #222;
border-radius: 0;
font-size: 11px;
border: 1px solid #ededed;
}
.header .shopping-list li .remove:hover {
background: #222;
color: #fff !important;
border-color: transparent;
}
.header .shopping-list .cart-img {
float: right;
border: 1px solid #ededed;
overflow: hidden;
}
.header .shopping-list .cart-img img {
width: 70px;
/* height: 70px; */
border-radius: 0;
}
.header .shopping-list .cart-img:hover img {
transform: scale(1.09);
}
.header .shopping-list .quantity {
line-height: 22px;
font-size: 13px;
padding-bottom: 30px;
}
.header .shopping-list span {
font-size: 14px;
color: #000;
}
.header .shopping-list h4 a {
font-weight: 600;
font-size: 13px;
color: #333;
}
.header .shopping-list h4 a:hover {
color: #f7941d;
}
.header .shopping-item .bottom {
text-align: center;
}
.header .shopping-item .total {
overflow: hidden;
display: block;
padding-bottom: 10px;
}
.header .shopping-item .total span {
text-transform: uppercase;
color: #222;
font-size: 13px;
font-weight: 600;
float: left;
}
.header .shopping-item .total .total-amount {
float: right;
font-size: 14px;
}
.header .shopping-item .bottom .btn {
background: #222;
padding: 10px 20px;
display: block;
color: #fff;
margin-top: 10px;
border-radius: 0px;
text-transform: uppercase;
font-size: 14px;
font-weight: 500;
}
.header .shopping-item .bottom .btn:hover {
background: #f7941d;
color: #fff;
}
.header.shop {
background: #fff;
}
.header.shop .nav-inner {
margin: 0;
float: left;
}
.header.shop .topbar {
background-color: #fff;
border: none;
}
.header.shop.v3 .topbar {
padding: 0;
}
.header.shop.v3 .topbar .inner-content {
border-bottom: 1px solid #eee;
padding: 12px 0px;
}
.header.shop .right-nav li a {
color: #333;
}
.header.shop .logo {
float: left;
margin: 19px 0 0;
}
.header.shop .top-contact {
margin-top: 0px;
}
/* Header Middle */
.header.shop .search-bar-top {
text-align: center;
margin-top: 10px;
}
.header.shop .search-bar {
margin-top: 33px;
width: 460px;
height: 40px;
display: inline-block;
background: #fff;
position: relative;
}
.header.shop .search-bar {
width: 535px;
height: 50px;
display: inline-block;
background: #fff;
position: relative;
margin: 0;
line-height: 45px;
border-radius: 5px;
border: 1px solid #ececec;
}
.header.shop .nice-select {
clear: initial;
margin: 0;
height: 48px;
width: 150px;
border: none;
text-align: center;
background: transparent;
text-transform: capitalize;
padding: 0 0 0 20px;
border-right: 1px solid #eee;
line-height: 50px;
font-size: 14px;
font-weight: 400;
}
.header.shop .nice-select::after {
border-color: #666;
right: 20px;
}
.header.shop .nice-select .list {
border-radius: 0px;
}
.header.shop .nice-select .list li.focus {
font-weight: 400;
}
.header.shop .nice-select .list li {
color: #666;
border-radius: 0px;
font-size: 14px;
font-weight: 400;
}
.header.shop .nice-select .list li:hover {
background: #f7941d;
color: #fff;
}
.header.shop .search-bar form {
display: inline-block;
float: left;
width: 260px;
}
.header.shop .search-bar input {
height: 48px;
background: transparent;
color: #666;
border-radius: 0;
border: none;
font-size: 14px;
font-weight: 400;
padding: 0 25px 0 20px;
width: 328px;
}
.header.shop .search-bar .btnn {
height: 50px;
line-height: 53px;
width: 62px;
text-align: center;
font-size: 18px;
color: #fff;
background: #333333;
position: absolute;
right: -2px;
top: -1px;
border: none;
border-radius: 0 5px 5px 0;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.header.shop .search-bar .btnn:hover {
color: #fff;
background: #f7941d;
}
/* Search Form */
.header.shop .search-top {
opacity: 1;
visibility: visible;
top: 0;
background: transparent;
border: none;
box-shadow: none;
padding: 0;
top: 0;
}
.header.shop .middle-inner {
padding: 20px 0;
background: #fff;
border-top: 1px solid #eee;
}
.header.shop.v3 .middle-inner {
border: none;
}
.header.shop .header-inner {
background: #333;
}
.header.shop.v3 .header-inner {
background: transparent;
}
.header.shop.v2 .header-inner {
background: #fff;
border-top: 1px solid #eee;
}
.header.shop .topbar p {
color: #333;
}
.header.shop .all-category {
color: #fff;
background: transparent;
position: relative;
background: #f7941d;
}
.header.shop .all-category h3 {
padding: 20px 25px;
}
.header.shop .cat-heading {
font-size: 20px;
color: #fff;
}
.header.shop .cat-heading i {
color: #fff;
display: inline-block;
margin-right: 15px;
font-size: 22px;
}
.header.shop .main-category {
position: absolute;
left: 0;
top: 64px;
background: #fff;
z-index: 1;
width: 100%;
-webkit-box-shadow: 0px 5px 15px #0000000a;
-moz-box-shadow: 0px 5px 15px #0000000a;
box-shadow: 0px 5px 15px #0000000a;
}
.header.shop .main-category li {
display: block;
border-bottom: 1px solid #f6f6f6;
position: relative;
}
.header.shop .main-category li:last-child {
border: none;
}
.header.shop .main-category li a {
font-size: 14px;
font-weight: 600;
color: #333;
padding: 13px 25px 13px 25px;
display: block;
text-transform: uppercase;
}
.header.shop .main-category li a i {
display: inline-block;
float: right;
}
.header.shop .sub-category {
background: #fff;
width: 220px;
position: absolute;
left: 238px;
top: 0;
z-index: 999999;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
border-left: 3px solid #f7941d;
-webkit-box-shadow: 0px 5px 15px #0000000a;
-moz-box-shadow: 0px 5px 15px #0000000a;
box-shadow: 0px 5px 15px #0000000a;
}
.header.shop .main-category li:hover .sub-category {
opacity: 1;
visibility: visible;
}
.header.shop .main-category li a {
text-transform: capitalize;
font-weight: 400;
}
.header.shop .main-category li a:hover {
color: #f7941d;
}
.header.shop .main-category .main-mega {
position: relative;
}
.header.shop .main-category li .mega-menu {
width: 850px;
display: inline-block;
height: auto;
position: absolute;
left: 238px;
top: 0;
z-index: 99999;
background: #fff;
border: none;
padding: 30px;
border-left: 3px solid #f7941d;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.header.shop .main-category li:hover .mega-menu {
opacity: 1;
visibility: visible;
}
.header.shop .main-category li .mega-menu .single-menu {
width: 33%;
display: inline-block;
border: none;
padding: 0;
padding-right: 20px;
}
.header.shop .main-category li .mega-menu .single-menu a {
padding: 0;
}
.header.shop .main-category li .mega-menu .single-menu .image {
overflow: hidden;
}
.header.shop .main-category li .mega-menu .single-menu img {
display: block;
height: 100%;
width: 100%;
cursor: pointer;
}
.header.shop .main-category li .mega-menu .single-menu .image:hover img {
transform: scale(1.1);
}
.header.shop .main-category li .mega-menu .single-menu .title-link {
margin-bottom: 20px;
background: #f7941d;
color: #fff;
padding: 2px 13px;
border-radius: 3px;
display: inline-block;
font-size: 14px;
}
.header.shop .main-category li .mega-menu .single-menu .title-link:hover {
background: #333;
color: #fff;
}
.header.shop .main-category li .mega-menu .single-menu .inner-link {
margin-top: 25px;
}
.header.shop .main-category li .mega-menu .single-menu .inner-link a {
margin-bottom: 10px;
}
.header.shop .main-category li .mega-menu .single-menu .inner-link a:hover {
color: #f7941d;
background: transparent;
}
.header.shop
.main-category
li
.mega-menu
.single-menu
.inner-link
a:last-child {
margin-bottom: 0px;
}
.header.shop .menu-origin {
float: none;
display: inline-block;
float: right;
}
.header.shop .nav li {
margin-right: 40px;
float: left;
position: relative;
}
.header.shop .nav li {
margin-right: 5px;
position: relative;
float: none;
}
.header.shop .nav li:last-child {
margin-right: 0;
}
.header.shop .nav li .new {
background: #f7941d;
color: #fff;
text-transform: uppercase;
font-size: 9px;
position: absolute;
left: 21px;
top: 2px;
font-weight: 500;
height: 18px;
line-height: 18px;
text-align: center;
display: block;
}
.header.shop.v2 .nav li a {
color: #333;
}
.header.shop .nav li a {
color: #fff;
text-transform: capitalize;
font-size: 15px;
padding: 20px 15px;
font-weight: 500;
display: block;
position: relative;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.header.shop .nav li:hover a {
color: #fff;
background: #f7941d;
}
.header.shop.v2 .nav li:hover a {
color: #f7941d;
background: transparent;
}
.header.shop .nav li.active a {
color: #fff;
background: #f7941d;
}
.header.shop.v2 .nav li.active a {
color: #333 !important;
background: transparent !important;
}
.header.shop.v2 .nav li.active a {
color: #f7941d !important;
}
.header.shop .nav .dropdown li {
margin: 0;
}
.header.shop .nav li .dropdown li:hover a {
background: #f7941d;
}
.header.shop.v2 .nav li.active .dropdown li a {
color: #333 !important;
}
.header.shop.v2 .nav li.active .dropdown li a:hover {
color: #fff !important;
background: #f7941d !important;
}
.header.shop.v2 .nav li.active .dropdown li a:hover {
color: #fff !important;
}
.header.shop.v2 .nav li .dropdown li:hover a {
color: #f7941d;
}
.header.shop .nav li .dropdown li a {
color: #333;
padding: 8px 15px;
font-weight: 400;
background: #fff;
}
.header.shop.v2 .nav li .dropdown li a {
color: #333;
background: #fff;
}
.header.shop .nav li .dropdown li a {
font-weight: 400;
font-size: 14px;
}
.header.shop .nav li .dropdown li a:hover {
color: #fff;
}
.header.shop.v2 .nav li .dropdown li a:hover {
color: #fff !important;
background: #f7941d;
}
.header.shop .nav li .dropdown li .dropdown.sub-dropdown li a:hover {
background: #f7941d;
}
.header.shop .right-bar {
display: inline-block;
padding: 0;
margin: 0;
top: 20px;
float: right;
position: relative;
}
.header.shop .right-bar .sinlge-bar.top-search a {
transform: translateY(3px);
}
.header.shop .right-bar .sinlge-bar.top-search a:hover {
color: #f7941d;
}
.header.shop .right-bar .sinlge-bar .single-icon {
color: #333;
font-size: 20px;
position: relative;
}
.header.shop .right-bar .sinlge-bar .single-icon:hover {
color: #f7941d;
}
.header.shop .right-bar .sinlge-bar .single-icon .total-count {
position: absolute;
top: -7px;
right: -8px;
background: #f6931d;
width: 18px;
height: 18px;
line-height: 18px;
text-align: center;
color: #fff;
border-radius: 100%;
font-size: 11px;
}
.header.shop .right-bar .sinlge-bar {
display: inline-block;
margin-right: 25px;
}
.header.shop .right-bar .sinlge-bar:last-child {
margin-right: 0px;
}
.header.shop .right-bar .sinlge-bar li a:hover {
color: #f7941d;
}
.mobile-search {
display: none;
}
/* Header Search */
/* Search */
.header .search-top {
display: none;
}
.header .search-top a {
font-size: 17px;
}
.header .search-top a:hover {
color: #f7941d;
}
.header .search-form {
position: absolute;
left: -128px;
z-index: 9999;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
top: 46px;
background: #ffffff75;
padding: 7px;
border-radius: 5px;
transform: scaleY(0);
box-shadow: 0px 4px 7px #0000003b;
padding: 0;
border-radius: 0;
}
.header .search-top.active .search-form {
opacity: 1;
visibility: visible;
transform: scaleY(1);
}
.header .search-form input {
width: 220px;
height: 45px;
line-height: 45px;
padding: 0 60px 0 15px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
border-radius: 3px;
border: none;
background: #fff;
color: #333;
border-radius: 0;
}
.header .search-form button {
position: absolute;
right: 0;
height: 45px;
top: 0;
width: 45px;
background: transparent;
border: none;
color: #3353ea;
border-radius: 0 3px 3px 0;
border-radius: 0;
border-left: 1px solid #eee;
font-size: 15px;
color: #333;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.header .search-form button:hover {
color: #fff;
background: #f7941d;
border-color: transparent;
}
/* Header Sticky */
.header .header-inner {
width: 100%;
z-index: 999;
}
.header.sticky .all-category {
}
.header.sticky .all-category h3 {
cursor: pointer;
}
.header.sticky .all-category .main-category {
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.header.sticky .all-category:hover .main-category {
opacity: 1;
visibility: visible;
}
.header.sticky .header-inner .nav li a {
color: #333;
}
.header.sticky.v3 .header-inner .nav li a {
color: #fff;
}
.header.sticky .header-inner .nav li:hover a {
color: #fff;
}
.header.sticky.v2 .header-inner .nav li:hover a {
color: #f7941d;
}
.header.sticky .header-inner .nav li .dropdown li a {
color: #333;
}
.header.sticky.v2 .header-inner .nav li .dropdown li a {
color: #333;
}
.header.sticky .header-inner .nav li .dropdown li a:hover {
color: #fff;
}
.header.sticky .header-inner .nav li.active a {
color: #fff;
}
.header.sticky .header-inner {
position: fixed;
top: 0;
left: 0;
background: #fff;
animation: fadeInDown 1s both 0.2s;
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
z-index: 999;
}
.header.sticky.v3 .header-inner {
box-shadow: none;
}
.header.sticky.v3 .navbar-expand-lg .navbar-collapse {
animation: fadeInDown 1s both 0.2s;
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}
/*======================================
End Header CSS
========================================*/
/*======================================
Hero Area CSS
========================================*/
.hero-slider {
background: #fff;
overflow: hidden;
}
.hero-slider .single-slider {
height: auto;
background-image: url("https://via.placeholder.com/1900x700");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 510px;
}
.hero-slider .text-inner {
}
.hero-slider .hero-text {
padding: 0 30px;
margin-top: 100px;
}
.hero-slider .hero-text h1 {
line-height: 50px;
font-size: 47px;
font-weight: 700;
color: #f7941d;
margin-bottom: 20px;
}
.hero-slider .hero-text h1 span {
font-size: 20px;
display: block;
margin-bottom: 12px;
color: #333;
font-weight: 700;
line-height: initial;
}
.hero-slider .hero-text p {
color: #333;
margin-bottom: 35px;
}
.hero-slider .hero-text .button {
margin: 0;
}
.hero-slider .hero-text .btn {
color: #fff;
background: #333;
padding: 13px 30px;
line-height: initial;
border: none;
height: auto;
z-index: 0;
}
.hero-slider .hero-text .btn:hover {
background: #f7941d;
color: #fff;
}
/* Start Hero Area 2 CSS */
.hero-area2 {
position: relative;
}
.hero-area2 .single-slider.overlay:before {
background: #f7941d;
opacity: 0;
visibility: hidden;
transform: scale(0.9);
}
.hero-area2 .single-slider.overlay:hover:before {
opacity: 0.9;
visibility: visible;
transform: scale(1);
}
.hero-area2 .single-slider {
height: 500px;
position: relative;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.hero-area2 .single-slider .content {
position: relative;
}
.hero-area2 .single-slider .content {
width: 100%;
padding: 15px;
z-index: 2;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
text-align: center;
padding-top: 120px;
opacity: 0;
visibility: hidden;
transform: scale(1.1);
}
.hero-area2 .single-slider:hover .content {
opacity: 1;
visibility: visible;
transform: scale(1);
}
.hero-area2 .single-slider .content .sub-title {
color: #fff;
text-transform: uppercase;
font-size: 15px;
font-weight: 500;
}
.hero-area2 .single-slider .content .title {
color: #fff;
text-transform: uppercase;
font-size: 24px;
display: block;
margin-top: 10px;
margin-bottom: 10px;
}
.hero-area2 .single-slider .content .des {
color: #fff;
}
.hero-area2 .single-slider .content .button {
}
.hero-area2 .single-slider .content .button .btn {
padding: 9px 25px;
border: 2px solid #fff;
background: transparent;
color: #fff;
margin-top: 25px;
}
.hero-area2 .single-slider .content .button .btn:hover {
background: #fff;
color: #333;
border-color: transparent;
}
/* Owl Nav CSS */
.hero-area2 .owl-carousel .owl-nav {
margin: 0;
position: absolute;
top: 50%;
width: 100%;
margin-top: -30px;
}
.hero-area2 .owl-carousel .owl-nav div {
height: 60px;
width: 40px;
line-height: 60px;
text-align: center;
background: #333;
color: #fff;
font-size: 14px;
position: absolute;
margin: 0;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
padding: 0;
border-radius: 0;
}
.hero-area2 .owl-carousel .owl-nav div:hover {
background: #f7941d;
color: #fff;
}
.hero-area2 .owl-carousel .owl-controls .owl-nav .owl-prev {
left: 0;
}
.hero-area2 .owl-carousel .owl-controls .owl-nav .owl-next {
right: 0;
}
/* Hero Area 3 */
.hero-area3 {
}
.hero-area3 .big-content {
background-image: url("https://via.placeholder.com/850x530");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 511px;
margin-top: 30px;
position: relative;
}
.hero-area3 .big-content .inner {
position: absolute;
right: 0;
top: 50%;
padding: 0 50px 0 360px;
transform: translateY(-50%);
}
.hero-area3 .big-content .title {
font-size: 28px;
margin-bottom: 20px;
font-weight: 700;
text-transform: capitalize;
line-height: 37px;
}
.hero-area3 .big-content .title span {
color: #f7941d;
}
.hero-area3 .big-content .des {
}
.hero-area3 .big-content .button {
margin-top: 40px;
display: block;
}
.hero-area3 .big-content .button .btn {
color: #fff;
}
.hero-area3 .small-content {
height: 240px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
margin-top: 30px;
position: relative;
}
.hero-area3 .small-content.first {
background-image: url("https://via.placeholder.com/450x300");
}
.hero-area3 .small-content.secound {
background-image: url("https://via.placeholder.com/450x300");
}
.hero-area3 .small-content .inner {
padding: 30px;
text-align: right;
position: absolute;
right: 0;
bottom: 0;
}
.hero-area3 .small-content .title {
font-size: 18px;
margin-bottom: 20px;
font-weight: 600;
text-transform: capitalize;
}
.hero-area3 .small-content .title span {
color: #f7941d;
}
.hero-area3 .small-content .des {
}
.hero-area3 .small-content .button {
margin-top: 10px;
display: block;
}
.hero-area3 .small-content .button .btn {
background: transparent;
padding: 0;
color: #333;
border-bottom: 2px solid #333;
font-size: 13px;
}
.hero-area3 .small-content .button .btn:hover {
color: #f7941d;
border-color: #f7941d;
}
/* Hero Area 4 */
.hero-area4 .big-content {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 510px;
margin-top: 30px;
position: relative;
}
.hero-area4 .big-content .inner {
position: absolute;
right: 0;
top: 50%;
padding: 0 80px 0 50px;
transform: translateY(-50%);
}
.hero-area4 .big-content .title {
font-size: 32px;
margin-bottom: 20px;
font-weight: 700;
text-transform: capitalize;
line-height: 35px;
}
.hero-area4 .big-content .title span {
color: #f7941d;
}
.hero-area4 .big-content .des {
}
.hero-area4 .big-content .button {
margin-top: 40px;
display: block;
}
.hero-area4 .big-content .button .btn {
color: #fff;
}
.hero-area4 .owl-carousel .owl-nav {
margin: 0;
position: absolute;
top: 50%;
width: 100%;
margin-top: -20px;
}
.hero-area4 .owl-carousel .owl-nav div {
height: 40px;
width: 40px;
line-height: 40px;
text-align: center;
background: #333;
color: #fff;
font-size: 14px;
position: absolute;
margin: 0;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
padding: 0;
border-radius: 0;
}
.hero-area4 .owl-carousel .owl-nav div:hover {
background: #f7941d;
color: #fff;
}
.hero-area4 .owl-carousel .owl-controls .owl-nav .owl-prev {
left: 0;
}
.hero-area4 .owl-carousel .owl-controls .owl-nav .owl-next {
right: 0;
}
/*======================================
End Hero Area CSS
========================================*/
/*======================================
Start Small Banner CSS
========================================*/
.small-banner {
padding: 30px 0;
padding-bottom: 0;
}
.small-banner .single-banner {
overflow: hidden;
position: relative;
}
.small-banner .single-banner img {
height: 100%;
width: 100%;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.small-banner .single-banner .content {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
padding-left: 35px;
}
.small-banner .single-banner h3 {
font-size: 22px;
font-weight: 700;
text-transform: capitalize;
color: #333;
}
.small-banner .single-banner h3 span {
color: #f7941d;
}
.small-banner .single-banner p {
font-size: 14px;
color: #f7941d;
font-weight: 500;
margin-bottom: 5px;
text-transform: capitalize;
}
.small-banner .single-banner a {
color: #333;
margin-top: 22px;
display: block;
font-size: 12px;
font-weight: 500;
display: inline-block;
text-transform: uppercase;
border-bottom: 2px solid #333;
}
.small-banner .single-banner a:hover {
color: #f7941d;
border-color: #f7941d;
}
/*======================================
End Small Banner CSS
========================================*/
/*======================================
Start Mid Banner CSS
========================================*/
.midium-banner {
padding: 0;
}
.midium-banner .single-banner {
position: relative;
}
.midium-banner .single-banner img {
height: 100%;
width: 100%;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.midium-banner .single-banner .content {
padding-left: 50px;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.midium-banner .single-banner h3 {
font-size: 27px;
font-weight: 700;
text-transform: uppercase;
color: #333;
line-height: 30px;
}
.midium-banner .single-banner h3 span {
color: #f7941d;
}
.midium-banner .single-banner p {
font-size: 13px;
color: #f7941d;
font-weight: 500;
margin-bottom: 5px;
text-transform: uppercase;
}
.midium-banner .single-banner a {
display: inline-block;
font-weight: 600;
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding: 0.375rem 0.75rem;
font-size: 13px;
border-radius: 0.25rem;
background: #333;
color: #fff !important;
padding: 10px 27px;
border-radius: 30px;
margin-top: 25px;
text-transform: uppercase;
}
.midium-banner .single-banner a:hover {
background: #f7941d;
color: #fff;
}
/*======================================
End Mid Banner CSS
========================================*/
/*======================================
Start Most Popular CSS
========================================*/
.pro-tab-viewmore-wrap {
position: relative;
text-align: center;
}
.most-popular .section-title {
margin-bottom: 40px;
}
.pro-tab-viewmore-wrap .pro-viewmore {
position: absolute;
right: 40px;
top: 0;
}
.most-popular .single-product {
margin: 50px 15px 0 15px;
}
/* Slider Nav */
.most-popular .owl-nav {
margin: 0;
position: absolute;
top: 50%;
width: 100%;
margin-top: -25px;
}
.most-popular .owl-carousel .owl-nav div {
height: 60px;
width: 30px;
line-height: 58px;
background: #fff;
color: #333;
position: absolute;
margin: 0;
border-radius: 0;
font-size: 15px;
text-align: center;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
box-shadow: 0px 0px 10px #3333331c;
}
.most-popular .owl-carousel .owl-nav div:hover {
color: #fff;
background: #f7941d;
}
.most-popular .owl-carousel .owl-controls .owl-nav .owl-prev {
left: 0;
}
.most-popular .owl-carousel .owl-controls .owl-nav .owl-next {
right: 0;
}
/*======================================
End Most Popular CSS
========================================*/
/*======================================
Start Single Product CSS
========================================*/
.product-area .nav-tabs {
text-align: center;
display: inline-block;
width: 100%;
border: none;
}
.product-area .nav-tabs .nav-item {
margin-bottom: -1px;
display: inline-block;
}
.product-area .nav-tabs li a {
color: #333;
text-transform: uppercase;
display: inline-block;
position: relative;
margin-right: 5px;
font-weight: 500;
background: #fff;
color: #333;
padding: 3px 14px;
border-radius: 3px;
font-size: 13px;
}
.product-area .nav-tabs li:last-child a {
border-color: transparent;
}
.product-area .nav-tabs li a i {
margin-right: 10px;
}
.product-area .nav-tabs li a.active,
.product-area .nav-tabs li:hover a {
background: #f7941d;
color: #fff;
border-color: transparent;
}
/* Sinlge Product */
.single-product {
margin-top: 50px;
}
.single-product .product-img {
position: relative;
overflow: hidden;
cursor: pointer;
}
.single-product .product-img a {
display: block;
position: relative;
}
.single-product .product-img a img {
width: 100%;
}
.single-product .product-img a img.hover-img {
position: absolute;
left: 0;
top: 0;
z-index: 1;
opacity: 0;
transition: opacity 0.5s ease, transform 2s cubic-bezier(0, 0, 0.44, 1.18),
-webkit-transform 2s cubic-bezier(0, 0, 0.44, 1.18);
}
.single-product .product-img a span.price-dec {
background-color: #f6931d;
display: inline-block;
font-size: 11px;
color: #fff;
right: 20px;
top: 20px;
padding: 1px 16px;
font-weight: 700;
border-radius: 0;
text-align: center;
position: absolute;
text-transform: uppercase;
border-radius: 30px;
height: 26px;
line-height: 25px;
}
.single-product .product-img a span.new {
background-color: #8493ca;
display: inline-block;
font-size: 11px;
color: #fff;
right: 20px;
top: 20px;
padding: 1px 16px;
font-weight: 700;
border-radius: 0;
text-align: center;
position: absolute;
text-transform: uppercase;
border-radius: 30px;
height: 26px;
line-height: 24px;
}
.single-product .product-img a span.hot {
background-color: #2cc95b;
display: inline-block;
font-size: 11px;
color: #fff;
right: 20px;
top: 20px;
padding: 1px 16px;
font-weight: 700;
border-radius: 0;
text-align: center;
position: absolute;
text-transform: uppercase;
border-radius: 30px;
height: 26px;
line-height: 24px;
}
.single-product .product-img a span.out-of-stock {
background-color: #ed1b24;
display: inline-block;
font-size: 11px;
color: #fff;
right: 20px;
top: 20px;
padding: 1px 16px;
font-weight: 700;
border-radius: 0;
text-align: center;
position: absolute;
text-transform: uppercase;
border-radius: 30px;
height: 26px;
line-height: 24px;
}
.single-product .product-img .product-action {
display: inline-block;
position: absolute;
right: 0;
bottom: 0;
z-index: 99;
border-radius: 3px;
}
.single-product .product-img .product-action a {
background-color: transparent;
color: #333;
display: block;
font-size: 16px;
display: inline-block;
margin-right: 15px;
text-align: right;
height: 52px;
position: relative;
top: 2px;
}
.single-product .product-img .product-action a:last-child {
margin-right: 0;
border: none;
}
.single-product .product-img .product-action a i {
line-height: 40px;
}
.single-product .product-img .product-action a span {
visibility: hidden;
position: absolute;
background: #f7941d !important;
color: #fff !important;
text-align: center;
padding: 5px 12px;
z-index: 3;
opacity: 0;
-webkit-transition: opacity 0.6s, margin 0.3s;
-o-transition: opacity 0.6s, margin 0.3s;
transition: opacity 0.6s, margin 0.3s;
font-size: 11px;
right: 0;
line-height: 14px;
top: -12px;
margin-top: -5px;
margin-right: 0;
display: inline-block;
width: 120px;
border-radius: 15px 0 0 15px;
}
.single-product .product-img .button-head .product-action a span::after {
position: absolute;
content: "";
right: 0;
bottom: -12px;
border: 6px solid #f7941d;
border-left: 0px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid transparent;
}
.single-product .product-img .product-action a:hover {
color: #f7941d;
}
.single-product .product-img .product-action a:hover span {
visibility: visible;
opacity: 1;
color: #333;
background: #fff;
margin-top: -12px;
}
.single-product .product-img .product-action.pro-action-width-dec a {
width: 30px;
height: 30px;
font-size: 14px;
}
.single-product .product-img .product-action.pro-action-width-dec a i {
line-height: 30px;
}
.single-product .product-img .product-action.pro-action-width-dec-2 {
bottom: 45px;
}
.single-product .product-img .product-action-2 {
position: absolute;
left: 0;
bottom: 0;
text-align: left;
z-index: 99;
-webkit-transition: all 250ms ease-out;
-o-transition: all 250ms ease-out;
transition: all 250ms ease-out;
}
.single-product .product-img .product-action-2 a {
display: block;
background-color: transparent;
color: #333;
text-align: left;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
line-height: 1;
display: inline-block;
}
.single-product .product-img .product-action-2 a:hover {
color: #f7941d;
}
.single-product .button-head {
background: #fff;
display: inline-block;
height: 40px;
width: 100%;
position: absolute;
left: 0;
bottom: -50px;
z-index: 9;
height: 50px;
line-height: 50px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.single-product:hover .button-head {
bottom: 0;
}
.single-product .product-img .shop-list-quickview {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
text-align: center;
z-index: 99;
margin-top: 20px;
visibility: hidden;
opacity: 0;
-webkit-transition: all 0.35s ease 0s;
-o-transition: all 0.35s ease 0s;
transition: all 0.35s ease 0s;
}
.single-product .product-img .shop-list-quickview a {
color: #000;
background-color: #fff;
display: inline-block;
width: 50px;
height: 50px;
border-radius: 100%;
font-size: 18px;
}
.single-product .product-img .shop-list-quickview a:hover {
background-color: #222;
color: #fff;
}
.single-product .product-img .shop-list-quickview a i {
line-height: 50px;
}
.single-product .product-content {
margin-top: 20px;
}
.single-product .product-img:hover.default-overlay::before {
background-color: rgba(38, 38, 38, 0.2);
z-index: 9;
-webkit-transition: all 250ms ease-out;
-o-transition: all 250ms ease-out;
transition: all 250ms ease-out;
pointer-events: none;
opacity: 1;
}
.single-product .product-img:hover.default-overlay.metro-overlay::before {
background-color: rgba(38, 38, 38, 0.4);
z-index: 9;
-webkit-transition: all 250ms ease-out;
-o-transition: all 250ms ease-out;
transition: all 250ms ease-out;
pointer-events: none;
opacity: 1;
}
.single-product .product-img:hover img.hover-img {
opacity: 1;
}
.single-product .product-content h3 {
line-height: 22px;
}
.single-product .product-content h3 a {
font-size: 14px;
font-weight: 500;
margin: 0;
}
.single-product .product-content h3 a:hover {
color: #f7941d;
}
.single-product .product-content .product-price {
margin: 6px 0 0 0;
}
.single-product .product-content .product-price span {
font-size: 15px;
font-weight: 500;
}
.single-product .product-content .product-price span.old {
text-decoration: line-through;
opacity: 0.6;
margin-right: 2px;
}
/*======================================
End Single Product CSS
========================================*/
/*======================================
Start Shop Sidebar CSS
========================================*/
.shop-sidebar .single-widget {
margin-top: 30px;
background: #f6f7fb;
padding: 30px;
}
.shop-sidebar .single-widget:first-child {
margin-top: 0;
}
.shop-sidebar .single-widget .title {
position: relative;
font-size: 18px;
font-weight: 500;
text-transform: capitalize;
margin-bottom: 25px;
display: block;
border-bottom: 1px solid #ddd;
padding-bottom: 15px;
}
/* Shop Price */
.shop .range .price-filter {
display: block;
margin-top: 20px;
}
.shop .range #slider-range {
box-shadow: none;
border: none;
height: 4px;
background: #f7941d;
color: #f7941d;
border-radius: 0px;
}
.shop .range #slider-range .ui-slider-range {
box-shadow: none;
background: #222;
border-radius: 0px;
border: none;
}
.shop .range .ui-slider-handle.ui-state-default.ui-corner-all {
width: 14px;
height: 14px;
line-height: 10px;
background: #222;
border: none;
border-radius: 100%;
top: -5px;
}
.shop .range .label-input {
margin-top: 15px;
}
.shop .range .label-input span {
margin-right: 5px;
color: #282828;
}
.shop .range .ui-slider-handle.ui-state-default.ui-corner-all {
background: #f7941d;
color: #f7941d;
cursor: pointer;
}
.shop .range .label-input input {
border: none;
margin: 0;
font-weight: 600;
font-size: 14px;
color: #222;
background: transparent;
}
.shop .range .check-box-list {
margin-top: 15px;
}
.shop .range .check-box-list li {
margin-bottom: 5px;
}
.shop .range .check-box-list li:last-child {
margin: 0;
}
.shop .range .check-box-list li label input {
display: inline-block;
margin-right: 6px;
position: relative;
top: 1px;
}
.shop .range .check-box-list li label {
margin: 0;
font-size: 14px;
font-weight: 400;
color: #333;
cursor: pointer;
}
.shop .range .check-box-list .count {
margin-left: 5px;
color: #666;
}
/* Category List */
.shop-sidebar .categor-list {
margin-top: 10px;
}
.shop-sidebar .categor-list li {
}
.shop-sidebar .categor-list li {
margin-bottom: 10px;
}
.shop-sidebar .categor-list li:last-child {
margin-bottom: 0px;
}
.shop-sidebar .categor-list li a {
display: inline-block;
color: #666;
font-weight: 400;
font-size: 14px;
text-transform: capitalize;
}
.shop-sidebar .categor-list li a:hover {
color: #f7941d;
}
/* Recent Post */
.shop-sidebar .single-post {
position: relative;
margin-top: 30px;
padding-bottom: 30px;
border-bottom: 1px solid #ddd;
}
.shop-sidebar .single-post.first {
padding-top: 0px;
}
.shop-sidebar .single-post:last-child {
padding-bottom: 0px;
border: none;
}
.shop-sidebar .single-post .image img {
height: 80px;
width: 80px;
position: absolute;
left: 0;
top: 0;
border-radius: 100%;
}
.shop-sidebar .single-post .content {
padding-left: 100px;
}
.blog-post-title {
font-size: 19px;
margin-bottom: 18px;
color: #000;
}
.blog-post-title a:hover {
color: #07562f;
}
.shop-sidebar .single-post .content h5 a {
color: #222;
font-weight: 500;
font-size: 14px;
font-weight: 500;
display: block;
}
.shop-sidebar .single-post .content h5 a:hover {
color: #f7941d;
}
.shop-sidebar .single-post .content .price {
display: block;
color: #333;
font-weight: 500;
margin: 5px 0 0px 0;
text-transform: uppercase;
font-size: 14px;
}
.shop-sidebar .single-post .reviews li {
display: inline-block;
}
.shop-sidebar .single-post .reviews li i {
color: #999;
}
.shop-sidebar .single-post .reviews li.yellow i {
color: #f7941d;
}
/* Shop Topbar */
.shop .shop-top {
clear: both;
background: #f6f7fb;
padding: 18px 20px 50px 20px;
}
.shop .shop-shorter {
float: left;
}
.shop .single-shorter {
display: inline-block;
margin-right: 10px;
}
.shop .single-shorter:last-child {
margin: 0;
}
.shop .single-shorter label {
display: inline-block;
float: left;
margin: 4px 5px 0 0;
font-weight: 500;
}
.shop .single-shorter option {
}
.shop .nice-select {
clear: initial;
display: inline-block;
margin: 0;
border: 1px solid #e6e6e6;
border-radius: 0px;
height: auto;
width: auto;
border-radius: 0px;
}
.shop .nice-select::after {
border-color: #888;
}
.shop .nice-select .list {
border-radius: 0px;
}
.shop .nice-select .option.selected {
font-weight: 500;
}
.shop .nice-select .list li {
color: #666;
border-radius: 0px;
}
.shop .nice-select .list li:hover {
background: #f7941d;
color: #fff;
}
.shop .view-mode {
float: right;
}
.shop .view-mode li {
display: inline-block;
margin-right: 5px;
}
.shop .view-mode li:last-child {
margin: 0;
}
.shop .view-mode li a {
width: 43px;
height: 32px;
background: transparent;
border: 1px solid #77777775;
text-align: center;
display: block;
line-height: 32px;
color: #888;
border-radius: 0px;
}
.shop .view-mode li.active a,
.shop .view-mode li:hover a {
background: #f7941d;
color: #fff;
border-color: transparent;
}
/*======================================
End Shop Sidebar CSS
========================================*/
/*======================================
Start Shop Single CSS
========================================*/
.shop.single {
padding: 70px 0 100px;
}
.shop.single .product-gallery {
margin-top: 30px;
}
.shop.single .flexslider-thumbnails {
position: relative;
}
.shop.single .product-gallery .slides li {
position: relative;
}
.shop.single .product-gallery .slides li img {
width: 100%;
}
.shop.single .product-gallery {
margin-top: 30px;
}
.shop.single .flexslider-thumbnails {
position: relative;
}
.shop.single .product-gallery .slides li {
position: relative;
}
.shop.single .product-gallery .slides li img {
width: 100%;
}
.product-gallery .flexslider-thumbnails .slides img {
max-width: 75%;
width: 75%;
height: auto;
margin: 0 auto;
display: block;
}
.product-gallery .flexslider-thumbnails .flex-control-thumbs li img {
max-width: 90px;
height: auto;
}
.product-gallery {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
max-width: 100%;
position: relative;
}
/* Main image container with arrows */
.main-product-image {
position: relative;
width: 100%;
max-width: 400px;
margin-bottom: 15px;
overflow: hidden;
}
.main-product-image img {
width: 100%;
height: auto;
display: block;
border-radius: 8px;
}
/* Thumbnail container */
.product-thumbnails {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 10px;
flex-wrap: nowrap;
width: 100%;
max-width: 320px; /* For 3 small thumbnails */
margin-left: auto;
margin-right: auto;
}
/* Small thumbnails */
.product-thumbnail {
width: 80px;
height: 80px;
cursor: pointer;
overflow: hidden;
border: 2px solid transparent;
border-radius: 4px;
transition: all 0.3s ease;
flex: 0 0 auto;
opacity: 0.7;
}
.product-thumbnail:hover {
opacity: 1;
border-color: #ddd;
transform: translateY(-2px);
}
.product-thumbnail.active {
opacity: 1;
border-color: #333;
transform: translateY(-2px);
}
.product-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 2px;
}
/* Hide thumbnails beyond the first 3 */
.product-thumbnail:nth-child(n + 4) {
display: none;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.product-thumbnail {
width: 70px;
height: 70px;
}
.main-product-image .nav-arrow {
width: 35px;
height: 35px;
font-size: 16px;
}
}
@media (max-width: 576px) {
.product-thumbnail {
width: 60px;
height: 60px;
}
.main-product-image .nav-arrow {
width: 30px;
height: 30px;
font-size: 14px;
}
.product-thumbnails {
gap: 6px;
max-width: 200px;
}
}
.shop.single .flex-control-nav {
margin-top: 15px;
}
.shop.single .flex-control-thumbs li {
width: 20%;
position: relative;
margin: 0 8px 10px -3px;
}
.shop.single .flex-control-thumbs li img {
border: none;
padding: 0;
border: 1px solid transparent;
}
.shop.single .flex-control-thumbs li img.flex-active {
border-color: #c1d444;
}
.shop.single .flex-direction-nav {
display: none;
}
.shop.single .product-des {
margin-top: 30px;
}
.shop.single .product-des .short h4 {
font-size: 22px;
font-weight: 600;
margin-top: -5px;
line-height: 28px;
}
.shop.single .product-des .short .description {
font-size: 15px;
line-height: 1.7;
color: #6b7280; /* soft gray */
margin-top: 20px;
padding: 0;
border: none;
box-shadow: none;
background: transparent;
}
.shop.single .product-des .short .description strong,
.shop.single .product-des .short .description b {
display: block;
font-weight: 600;
color: #374151;
margin-bottom: 6px;
}
.shop.single .product-des .total-review {
font-size: 14px;
font-weight: 500;
margin-left: 10px;
display: inline-block;
}
.shop.single .product-des .total-review:hover {
color: #f7941d;
}
.shop.single .product-des .rating {
margin-top: 20px;
display: inline-block;
}
.shop.single .product-des .rating li {
display: inline-block;
}
.shop.single .product-des .rating li i {
color: #03553e;
}
.shop.single .product-des .rating li.dark i {
color: #555;
}
.shop.single .product-des .price {
font-size: 20px;
color: #333;
font-weight: 600;
margin-top: 15px;
}
.shop.single .product-des .price s {
color: #333;
}
.shop.single .product-des .price span {
display: inline-block;
margin-right: 15px;
color: #03553e;
}
.shop.single .product-des .product-buy {
margin-top: 40px;
}
.shop.single .product-des .product-buy {
}
.shop.single .product-des .color {
display: inline-block;
margin-right: 50px;
}
.shop.single .product-des .color h4 {
font-size: 18px;
font-weight: 600;
}
.shop.single .product-des .color h4 span {
display: block;
font-size: 14px;
font-weight: 500;
margin-top: 4px;
}
.shop.single .product-des .color ul {
margin-top: 10px;
}
.shop.single .product-des .color ul li {
display: inline-block;
margin-right: 5px;
}
.shop.single .product-des .color ul li:last-child {
margin-right: 0;
}
.shop.single .product-des .color ul li a {
height: 30px;
width: 30px;
line-height: 30px;
text-align: center;
display: block;
background: #333;
}
.shop.single .product-des .color ul li a i {
font-size: 11px;
color: #fff;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.shop.single .product-des .color ul li a:hover i {
opacity: 1;
visibility: visible;
}
.shop.single .product-des .color ul li .one {
background: #3498db;
}
.shop.single .product-des .color ul li .two {
background: #f7941d;
}
.shop.single .product-des .color ul li .three {
background: #8e44ad;
}
.shop.single .product-des .color ul li .four {
background: #2ecc71;
}
/* Size */
.shop.single .product-des .size {
display: inline-block;
}
.shop.single .product-des .size h4 {
display: block;
font-size: 14px;
font-weight: 500;
margin-top: 0px;
}
.shop.single .product-des .size ul {
display: inline-block;
margin-top: 10px;
}
.shop.single .product-des .size ul li {
display: inline-block;
margin-right: 5px;
}
.shop.single .product-des .size ul li:last-child {
margin-right: 0;
}
.shop.single .product-des .size ul li a {
display: block;
height: 30px;
width: 36px;
border: 1px solid #eee;
text-align: center;
line-height: 30px;
font-size: 14px;
}
.shop.single .product-des .size ul li a:hover {
color: #f7941d;
}
.shop.single .quantity {
display: inline-block;
margin-right: 10px;
}
.shop.single .quantity h6 {
display: inline-block;
margin-right: 10px;
font-size: 15px;
font-weight: 500;
}
.shop.single .quantity .input-group {
width: 151px;
display: inline-block;
}
.shop.single .quantity .button {
display: inline-block;
position: absolute;
top: 0;
display: inline-block;
}
.shop.single .quantity .button.minus {
left: 0;
border-radius: 0;
overflow: hidden;
}
.shop.single .quantity .button.plus {
right: 0;
border-radius: 0;
overflow: hidden;
}
.shop.single .quantity .button .btn {
padding: 0;
width: 35px;
height: 45px;
line-height: 45px;
border-radius: 0px;
background: transparent;
color: #282828;
font-size: 12px;
border: none;
}
.shop.single .quantity .button .btn:hover {
color: #f7941d;
}
.shop.single .quantity .input-number {
border: 1px solid #eceded;
width: 100%;
text-align: center;
height: 45px;
border-radius: 0px;
overflow: hidden;
padding: 0px 38px;
}
.shop.single .add-to-cart {
display: inline-block;
}
.shop.single .add-to-cart .btn {
height: 45px;
width: auto;
padding: 0 42px;
line-height: 45px;
text-align: center;
text-transform: capitalize;
margin-right: 5px;
border-radius: 0px;
background: #333;
color: #fff;
display: inline-block;
font-weight: 500;
}
.shop.single .add-to-cart .btn:hover {
color: #fff;
background: #f7941d;
}
.shop.single .add-to-cart .btn.min {
padding: 0 20px;
font-size: 17px;
position: relative;
top: 1px;
line-height: 45px;
}
.shop.single .cat {
font-size: 14px;
font-weight: 500;
color: #333;
margin-top: 30px;
}
.shop.single .cat a {
display: inline-block;
margin-left: 10px;
}
.shop.single .cat a:hover {
color: #f7941d;
}
.shop.single .availability {
color: #333;
font-size: 14px;
margin-top: 6px;
}
/* Product Tab */
.shop.single .product-info {
margin-top: 50px;
}
.shop.single .nav-tabs {
border: none;
}
.shop.single .nav-tabs li {
margin-right: 10px;
}
.shop.single .nav-tabs li:last-child {
margin-right: 0;
}
.shop.single .nav-tabs li a {
border: 0px solid;
border-radius: 0px;
background: #fff;
color: #333;
padding: 10px 30px;
font-weight: 500;
font-size: 14px;
border: 1px solid #eee;
}
.shop.single .nav-tabs li a i {
margin-right: 10px;
}
.shop.single .nav-tabs li a.active,
.shop.single .nav-tabs li:hover a {
background: #03553e;
color: #fff;
border-color: transparent;
}
.shop.single .tab-single {
}
.shop.single .single-des {
margin-top: 35px;
}
.shop.single .single-des h4 {
margin-bottom: 15px;
font-weight: 500;
font-size: 22px;
}
.shop.single .single-des ul {
}
.shop.single .single-des ul li {
color: #555;
display: block;
margin-bottom: 10px;
position: relative;
padding-left: 20px;
}
.shop.single .single-des ul li::before {
position: absolute;
content: "";
left: 0;
top: 9px;
height: 7px;
width: 7px;
background: #03553e;
border-radius: 50%;
}
.shop.single .single-des p {
}
.shop.single .item-info {
width: 100%;
}
.shop.single .item-info tbody {
}
.shop.single .item-info tbody tr {
}
.shop.single .item-info tbody td {
border: 1px solid #e6e6e6;
padding: 10px;
}
.shop.single .item-info tbody strong {
}
.shop.single .ratting-main {
}
.shop.single .avg-ratting {
margin-bottom: 20px;
}
.shop.single .avg-ratting h4 {
font-size: 18px;
margin: 0;
}
.shop.single .avg-ratting h4 span {
font-size: 14px;
}
.shop.single .single-rating {
margin-bottom: 20px;
}
.shop.single .single-rating:last-child {
margin: 0;
border: none;
padding: 0;
}
.shop.single .rating-author {
float: left;
margin-right: 10px;
padding: 20px;
padding-right: 10px;
}
.shop.single .rating-author img {
width: 60px;
border-radius: 100%;
height: 60px;
}
.shop.single .rating-des {
padding-left: 72px;
background: #f9f8f8;
padding: 17px 20px 17px 107px;
}
.shop.single .rating-des .ratings {
margin: 0;
}
.shop.single .rating-des h6 {
font-size: 14px;
font-weight: 600;
line-height: 18px;
}
.shop.single .ratting-main .single-rating ul {
}
.shop.single .ratting-main .single-rating ul li {
display: inline-block;
}
.shop.single .ratting-main .single-rating ul li i {
color: #f7941d;
font-size: 14px;
}
.shop.single .review-inner label {
display: inline-block;
margin: 0 5px 0 0;
}
.shop.single .review-inner .ratings {
overflow: visible;
display: inline-block;
margin: 0;
}
.shop.single .review-inner .ratings ul {
display: inline-block;
}
.shop.single .ratting-main .single-rating ul {
display: inline-block;
margin-right: 5px;
}
.shop.single .ratings .rate-count {
display: inline-block;
color: #666;
font-size: 13px;
}
.shop.single .comment-review {
margin-bottom: 30px;
}
.shop.single .comment-review .add-review {
margin-top: 30px;
}
.shop.single .comment-review .add-review h5 {
font-size: 18px;
font-weight: 600;
margin-bottom: 7px;
}
.shop.single .comment-review .add-review p {
color: #333;
}
.shop.single .comment-review h4 {
font-size: 15px;
font-weight: 600;
margin-bottom: 7px;
margin-top: 20px;
}
.shop.single .comment-review .review-inner {
margin-bottom: 15px;
display: block;
}
.shop.single .comment-review .rating li {
display: inline-block;
}
.shop.single .comment-review .rating li i {
color: #f7941d;
font-size: 14px;
}
.shop.single .rating-des p {
margin-top: 5px;
}
.shop.single .avg-ratting h4 {
font-size: 20px;
color: #333;
}
.shop.single .avg-ratting {
}
.shop.single .form .form-group input {
width: 100%;
height: 45px;
padding: 10px 20px;
background: #fff;
border: 1px solid #ddd;
resize: none;
border-radius: 0;
color: #333;
}
.shop.single .form .form-group button {
border: none;
padding: 17px 50px;
}
.shop.single .form .form-group textarea {
width: 100%;
height: 200px;
padding: 20px;
background: #fff;
border: 1px solid #ddd;
resize: none;
border-radius: 0;
color: #333;
}
.shop.single .form .form-group label {
color: #333;
position: relative;
}
.shop.single .form .form-group label span {
color: #ff2c18;
display: inline-block;
position: absolute;
right: -12px;
top: 4px;
font-size: 16px;
}
.shop.single .review-panel {
margin-top: 35px;
}
/*======================================
End Shop Single CSS
========================================*/
/*======================================
Start Shop Home List CSS
========================================*/
.shop-home-list {
padding: 0;
padding-bottom: 100px;
}
.shop-home-list .shop-section-title {
margin-bottom: 20px;
}
.shop-home-list .shop-section-title h1 {
font-size: 22px;
margin-bottom: 0;
text-transform: capitalize;
position: relative;
color: #2c2d3f;
font-weight: 700;
margin-bottom: 10px;
padding-bottom: 10px;
}
.shop-home-list .shop-section-title h1::before {
position: absolute;
content: "";
height: 2px;
width: 50px;
background: #f7941d;
left: 0;
bottom: -1px;
}
.shop-home-list .single-list {
overflow: hidden;
position: relative;
margin-top: 30px;
border: 1px solid #eee;
padding: 10px;
}
.shop-home-list .single-list .list-image {
position: relative;
}
.shop-home-list .single-list .list-image.overlay:before {
background: #000;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.shop-home-list .single-list .list-image.overlay:hover:before {
opacity: 0.3;
visibility: visible;
}
.shop-home-list .single-list .list-image .buy {
height: 40px;
width: 40px;
line-height: 40px;
font-size: 14px;
color: #fff;
background: #f7941d;
border-radius: 100%;
display: block;
position: absolute;
left: 50%;
top: 50%;
margin-left: -20px;
margin-top: -20px;
text-align: center;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
transform: scale(0);
opacity: 0;
visibility: hidden;
}
.shop-home-list .single-list .list-image .buy:hover {
background: #fff;
color: #333;
}
.shop-home-list .single-list .list-image:hover .buy {
opacity: 1;
visibility: visible;
transform: scale(1);
}
.shop-home-list .single-list .no-padding {
padding-right: 0px;
}
.shop-home-list .single-list img {
width: 100%;
height: 100%;
}
.shop-home-list .single-list .content {
padding-top: 45px;
padding-right: 12px;
}
.shop-home-list .single-list .content .title {
line-height: 18px;
}
.shop-home-list .single-list .content .title a {
font-size: 14px;
font-weight: 600;
}
.shop-home-list .single-list .content .titlea {
color: #333;
}
.shop-home-list .single-list .content a:hover {
color: #f7941d;
}
.shop-home-list .single-list .content .price {
margin-top: 15px;
font-weight: 500;
background: #f7941d;
display: inline-block;
color: #fff;
padding: 2px 18px;
border-radius: 30px;
font-size: 14px;
font-weight: 500;
}
/*======================================
End Shop Home List CSS
========================================*/
/*======================================
Start Shopping Cart CSS
========================================*/
.table.shopping-summery {
background: #fff;
}
.shopping-cart {
background: #f6f6f6;
padding: 50px 0;
}
.shopping-summery thead .main-hading {
padding: 0px 50px;
}
.shopping-summery thead {
background: #f7941d;
color: #fff;
}
.shopping-summery thead tr th {
border: none;
font-weight: 600;
color: #fff;
text-align: center;
background: #f7941d;
}
.shopping-summery tbody tr {
border-bottom: 1px solid #f7941d;
margin-top: 20px;
}
.shopping-summery tbody tr img {
border-radius: 0;
width: 80px;
/* height: 80px; */
}
.shopping-summery tbody tr:last-child {
border: none;
}
.shopping-summery tbody .product-name a {
font-weight: 600;
color: #282828;
font-weight: 600;
font-size: 17px;
}
.shopping-cart .table p {
font-size: 14px;
color: #666;
}
.shopping-summery tbody .product-name a:hover {
color: #f7941d;
}
.shopping-summery tbody .product img {
max-width: 70px;
border-radius: 100%;
max-height: 65px;
border: 1px solid #e6e6e6;
padding: 4px;
}
.shopping-summery tbody .product:hover img {
border-color: #f7941d;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
.shopping-cart .border {
}
.shopping-cart .table .remove-icon {
font-size: 16px;
}
.shopping-cart .table td {
vertical-align: middle;
border-top: 1px solid #eee;
padding: 30px;
}
.shopping-summery tbody .price {
text-align: center;
}
.shopping-summery tbody .price span {
}
.shopping-cart tbody .qty .input-group {
width: 175px;
display: inline-block;
}
.shopping-cart .qty .button {
display: inline-block;
position: absolute;
top: 0;
}
.shopping-cart .qty .button.minus {
left: 0;
border-radius: 0;
overflow: hidden;
}
.shopping-cart .qty .button.plus {
right: 0;
border-radius: 0;
overflow: hidden;
}
.shopping-cart .qty .button .btn {
padding: 0;
width: 44px;
height: 47px;
line-height: 50px;
border-radius: 0px;
background: transparent;
color: #282828;
border: none;
font-size: 12px;
}
.shopping-cart .qty .button .btn:hover {
color: #f7941d;
}
.shopping-cart .qty .input-number {
border: 1px solid #eceded;
width: 100%;
text-align: center;
height: 47px;
border-radius: 0;
overflow: hidden;
padding: 0px 45px;
}
.shopping-summery tbody .total-amount {
text-align: center;
}
.shopping-summery tbody .total-amount span {
}
.shopping-summery tbody .action {
text-align: center;
}
.shopping-summery tbody .action a:hover {
color: #f7941d;
}
.shopping-cart .total-amount {
margin-top: 50px;
}
.shopping-cart .total-amount .left {
}
.shopping-cart .total-amount .left .coupon {
}
.shopping-cart .total-amount .left .coupon form {
}
.shopping-cart .total-amount .left .coupon form input {
width: 220px;
display: inline-block;
height: 48px;
color: #333;
padding: 0px 20px;
border: none;
box-shadow: 0px 0px 5px #0000000a;
}
.shopping-cart .total-amount .left .coupon form .btn {
display: inline-block;
height: 48px;
border: navajowhite;
margin-left: 4px;
background: transparent;
color: #333;
background: #fff;
box-shadow: 0px 0px 5px #00000012;
}
.shopping-cart .total-amount .left .coupon form .btn:hover {
background: #fff;
color: #f7941d;
}
.shopping-cart .total-amount .left label {
font-size: 22px;
font-weight: 500;
color: #333;
}
.shopping-cart .total-amount .left .checkbox {
text-align: left;
margin: 0;
margin-top: 20px;
}
.shopping-cart .total-amount .left .checkbox label {
font-size: 15px;
font-weight: 400;
color: #333;
position: relative;
padding-left: 30px;
}
.shopping-cart .total-amount .left .checkbox label:hover {
cursor: pointer;
}
.shopping-cart .total-amount .left .checkbox label input {
display: none;
}
.shopping-cart .total-amount .left .checkbox label::before {
position: absolute;
content: "";
left: 0;
top: 4px;
width: 16px;
height: 16px;
border: 1px solid #555555;
border-radius: 0px;
}
.shopping-cart .total-amount .left .checkbox label::after {
position: absolute;
content: "\f00c";
font-family: "Fontawesome";
left: 0;
top: 0;
width: 22px;
height: 22px;
line-height: 24px;
left: 3px;
top: 0px;
opacity: 0;
visibility: hidden;
transform: scale(0);
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
display: block;
font-size: 11px;
}
.shopping-cart .total-amount .left .checkbox label.checked::after {
opacity: 1;
visibility: visible;
transform: scale(1);
}
.shopping-cart .total-amount .right {
padding-left: 100px;
}
.shopping-cart .total-amount .right ul {
}
.shopping-cart .total-amount .right ul li {
font-size: 15px;
font-weight: 400;
color: #333;
margin-bottom: 12px;
}
.shopping-cart .total-amount .right ul li.last {
padding-top: 12px;
border-top: 1px solid #c8c8c8;
color: #333;
font-size: 15px;
font-weight: 400;
}
.shopping-cart .total-amount .right ul li span {
display: inline-block;
float: right;
}
.shopping-cart .total-amount .right .button5 .btn {
text-align: center;
border-radius: 0;
width: 100%;
margin-top: 10px;
height: 46px;
line-height: 18px;
font-size: 13px;
color: #fff;
}
/*======================================
End Shopping Cart CSS
========================================*/
/*======================================
Start Checkout Form CSS
========================================*/
.shop.checkout {
padding: 0;
background: #fff;
padding-top: 20px;
padding-bottom: 50px;
}
.shop.checkout .checkout-form {
margin-top: 30px;
}
.shop.checkout .checkout-form h2 {
font-size: 25px;
color: #333;
font-weight: 700;
line-height: 27px;
}
.shop.checkout .checkout-form p {
font-size: 16px;
color: #333;
font-weight: 400;
margin-top: 12px;
margin-bottom: 30px;
}
.shop.checkout .form {
}
.shop.checkout .form .form-group {
margin-bottom: 25px;
}
.shop.checkout .form .form-group label {
color: #333;
position: relative;
}
.shop.checkout .form .form-group label span {
color: #ff2c18;
display: inline-block;
position: absolute;
right: -12px;
top: 4px;
font-size: 16px;
}
.shop.checkout .form .form-group input {
width: 100%;
height: 45px;
line-height: 50px;
padding: 0 20px;
border-radius: 3px;
border-radius: 0px;
color: #333 !important;
border: none;
background: #f6f7fb;
}
.shop.checkout .form .form-group input:hover {
}
.shop.checkout .nice-select {
width: 100%;
height: 45px;
line-height: 50px;
margin-bottom: 25px;
background: #f6f7fb;
border-radius: 0px;
border: none;
}
.shop.checkout .nice-select .list {
width: 100%;
height: 300px;
overflow: scroll;
}
.shop.checkout .nice-select .list li {
}
.shop.checkout .nice-select .list li.option {
color: #333;
}
.shop.checkout .nice-select .list li.option:hover {
background: #f6f7fb;
color: #333;
}
.shop.checkout .form .address input {
margin-bottom: 15px;
}
.shop.checkout .form .address input:last-child {
margin: 0;
}
.shop.checkout .form .create-account {
margin: 0;
}
.shop.checkout .form .create-account input {
width: auto;
display: inline-block;
height: auto;
border-radius: 100%;
margin-right: 3px;
}
.shop.checkout .form .create-account label {
display: inline-block;
margin: 0;
}
.shop.checkout .order-details {
margin-top: 30px;
background: #fff;
padding: 15px 0 30px 0;
border: 1px solid #eee;
}
.shop.checkout .single-widget {
margin-bottom: 30px;
}
.shop.checkout .single-widget:last-child {
margin: 0;
}
.shop.checkout .single-widget h2 {
position: relative;
font-size: 15px;
font-weight: 600;
padding: 10px 30px;
line-height: 24px;
text-transform: uppercase;
color: #333;
line-height: 64px;
padding-bottom: 5px;
}
.shop.checkout .single-widget h2:before {
position: absolute;
content: "";
left: 30px;
bottom: 0;
height: 2px;
width: 50px;
background: #f7941d;
}
.shop.checkout .single-widget .content ul {
margin-top: 30px;
}
.shop.checkout .single-widget .content ul li {
display: block;
padding: 0px 30px;
font-size: 15px;
font-weight: 400;
color: #333;
margin-bottom: 12px;
}
.shop.checkout .single-widget .content ul li span {
display: inline-block;
float: right;
}
.shop.checkout .single-widget .content ul li.last {
padding-top: 12px;
border-top: 1px solid #ebebeb;
display: block;
font-size: 15px;
font-weight: 400;
color: #333;
}
.shop.checkout .single-widget .checkbox {
text-align: left;
margin: 0;
padding: 0px 30px;
margin-top: 30px;
}
.shop.checkout .single-widget.payement {
padding: 0px 38px;
text-align: center;
margin-top: 30px;
}
.shop.checkout .single-widget.get-button {
text-align: center;
padding: 0px 35px;
}
.shop.checkout .single-widget.get-button .btn {
height: 46px;
width: 100%;
line-height: 19px;
text-align: center;
border-radius: 0;
text-transform: uppercase;
color: #fff;
}
/*======================================
End Checkout Form CSS
========================================*/
/*======================================
Login & Register CSS
========================================*/
.shop.login {
padding: 100px 0;
}
.shop.login .login-form h2 {
position: relative;
font-size: 35px;
color: #333;
font-weight: 400;
line-height: 27px;
text-transform: uppercase;
margin-bottom: 12px;
padding-bottom: 20px;
text-align: center;
}
.shop.login .login-form h2:before {
position: absolute;
content: "";
left: 50%;
bottom: 0;
height: 2px;
width: 50px;
background: #f7941d;
margin-left: -25px;
}
.shop.login .login-form p {
font-size: 14px;
color: #333;
font-weight: 400;
text-align: center;
margin-bottom: 50px;
}
.shop.login .form {
margin-top: 30px;
}
.shop.login .form .form-group {
margin-bottom: 22px;
}
.shop.login .form .form-group input {
width: 100%;
height: 45px;
line-height: 50px;
padding: 0 20px;
border-radius: 3px;
border-radius: 0px;
color: #333 !important;
border: none;
background: #f6f7fb;
}
.shop.login .form .form-group label {
color: #333;
position: relative;
}
.shop.login .form .form-group label span {
color: #ff2c18;
display: inline-block;
position: absolute;
right: -12px;
top: 4px;
font-size: 16px;
}
.shop.login .form .form-group input:hover {
border-color: #1308a3;
color: #1308a3;
}
.shop.login .form .form-group.login-btn {
margin: 0;
}
.shop.login .form button {
border: none;
}
.shop.login .form .btn {
display: inline-block;
margin-right: 10px;
height: 46px;
color: #fff;
line-height: 20px;
}
.shop.login .form .btn:hover {
background: #f7941d;
color: #fff;
}
.shop.login .login-form .checkbox {
text-align: left;
margin: 0;
margin-top: 20px;
display: inline-block;
}
.shop.login .login-form .checkbox label {
font-size: 14px;
font-weight: 400;
color: #333;
position: relative;
padding-left: 20px;
}
.shop.login .login-form .checkbox label:hover {
cursor: pointer;
}
.shop.login .login-form .checkbox label input {
display: none;
}
.shop.login .login-form .checkbox label::before {
position: absolute;
content: "";
left: 0;
top: 6px;
width: 12px;
height: 12px;
border: 1px solid #555555;
border-radius: 0px;
}
.shop.login .login-form .checkbox label::after {
position: absolute;
content: "\f00c";
font-family: "Fontawesome";
width: 12px;
height: 12px;
line-height: 23px;
left: 2px;
top: 0px;
opacity: 0;
visibility: hidden;
transform: scale(0);
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
display: block;
font-size: 9px;
}
.shop.login .login-form .checkbox label.checked::after {
opacity: 1;
visibility: visible;
transform: scale(1);
}
.shop.login .login-form .lost-pass {
display: inline-block;
margin-left: 25px;
color: #333;
font-size: 14px;
font-weight: 400;
}
.shop.login .login-form .lost-pass:hover {
color: #f7941d;
}
/*======================================
End Login CSS
========================================*/
/*======================================
Start Shop List CSS
========================================*/
.shop-list .list-content {
margin-top: 50px;
}
.shop-list .list-content .product-price {
}
.shop-list .list-content .product-price span {
font-size: 14px;
font-weight: 600;
margin-bottom: 3px;
display: block;
}
.shop-list .list-content .title {
line-height: 20px;
}
.shop-list .list-content .title a:hover {
color: #f7941d;
}
.shop-list .list-content .title a {
font-size: 18px;
font-weight: 600;
}
.shop-list .list-content .rating {
margin: 5px 0 8px 0;
}
.shop-list .list-content .rating li {
display: inline-block;
}
.shop-list .list-content .rating li i {
color: #f7941d;
}
.shop-list .list-content .rating li.total {
color: #333;
font-size: 12px;
margin-left: 3px;
}
.shop-list .list-content .des {
}
.shop-list .list-content .btn {
margin-top: 22px;
height: 42px;
line-height: 15px;
color: #333;
background: transparent;
border: 1px solid #cecece;
font-size: 13px;
border-radius: 30px;
height: auto;
line-height: a;
padding: 13px 32px;
}
.shop-list .list-content .btn:hover {
background: #f7941d;
color: #fff;
border-color: transparent;
}
/* Pagination CSS */
.pagination {
text-align: left;
margin: 50px 0 0 0;
display: block;
}
.pagination.center {
text-align: center;
}
.pagination .pagination-list li {
margin-right: 5px;
display: inline-block;
}
.pagination .pagination-list li:last-child {
margin-right: 0px;
}
.pagination .pagination-list li a {
background: #f6f7fb;
color: #666;
padding: 6px 18px;
font-weight: 400;
border: 1px solid #e1e1e1;
font-size: 16px;
border-radius: 0px;
}
.pagination .pagination-list li.active a,
.pagination .pagination-list li:hover a {
background: #f7941d;
color: #fff;
border-color: transparent;
}
.pagination .pagination-list li a i {
font-size: 13px;
}
.pagination .pagination-list li a i {
}
.blog-grids.pagination {
margin-top: 50px;
text-align: center;
}
/*======================================
End Shop List CSS
========================================*/
/*=============================
Start Cowndown CSS
===============================*/
.cown-down {
position: relative;
height: 515px;
overflow: hidden;
}
.cown-down .padding-right {
padding-right: 0;
}
.cown-down .padding-left {
padding-left: 0;
}
.cown-down .image img {
width: 100%;
height: 100%;
}
.cown-down .content {
text-align: center;
background: #fdfbef;
height: 100%;
position: relative;
}
.cown-down .content .heading-block {
position: absolute;
left: 0;
top: 26%;
transform: translateY(-50%);
padding: 75px;
}
.cown-down .content .small-title {
font-size: 13px;
color: #777;
display: block;
text-transform: uppercase;
margin-bottom: 5px;
font-weight: 600;
}
.cown-down .content .title {
font-size: 25px;
font-weight: 600;
margin-bottom: 20px;
text-transform: capitalize;
}
.cown-down .content .price {
margin-top: 35px;
font-size: 35px;
font-weight: 700;
color: #f7941d;
}
.cown-down .content .price s {
margin-top: 35px;
font-size: 24px;
font-weight: 500;
color: #666;
}
.cown-down .content .cdown {
float: none;
text-align: center;
margin-top: 40px;
width: 80px;
display: inline-block;
}
.cown-down .content .cdown {
text-align: center;
}
.cown-down .content .cdown {
display: inline-block;
}
.cown-down .content .cdown span {
color: #333;
font-size: 22px;
font-weight: 400;
text-transform: uppercase;
}
.cown-down .content .cdown p {
font-size: 13px;
color: #666;
text-transform: uppercase;
}
/*=============================
End Cowndown CSS
===============================*/
/*======================================
Start Shop Services CSS
========================================*/
.shop-services.section {
padding: 80px 0 0px 0;
background: #fff;
}
.shop-services.home {
padding: 60px 0;
background: #f6f7fb;
}
.shop-services .single-service {
position: relative;
padding-left: 65px;
}
.shop-services .single-service i {
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
color: #333;
background: transparent;
border-radius: 100%;
display: block;
font-size: 32px;
position: absolute;
left: 0;
top: 0;
}
.shop-services .single-service h4 {
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
line-height: 22px;
color: #333;
}
.shop-services .single-service p {
color: #898989;
line-height: 28px;
font-size: 14px;
}
/*======================================
End Shop Services CSS
========================================*/
/*======================================
Start Shop Newsletter CSS
========================================*/
.shop-newsletter {
background: #fff;
border-top: 5px solid #e2d4be;
padding: 60px 20px;
}
.shop-newsletter .inner {
text-align: center;
}
.shop-newsletter .inner h2 {
color: #07562f;
font-family: "Bebas Neue", sans-serif;
font-size: clamp(22px, 6vw, 70px);
font-weight: 500;
text-transform: uppercase;
margin-bottom: 10px;
}
.shop-newsletter .inner p {
color: #07562f;
font-size: 16px;
margin-bottom: 30px;
}
.shop-newsletter .inner p span {
color: #f7941d;
font-weight: 600;
}
/* Newsletter Form Layout */
.shop-newsletter .newsletter-inner {
display: flex;
justify-content: center;
align-items: stretch;
flex-wrap: wrap;
max-width: 600px;
margin: 0 auto;
}
/* Input */
.shop-newsletter .newsletter-inner input[type="email"] {
flex: 1;
min-width: 0;
height: 55px;
padding: 0 20px;
border: 1px solid #ececec;
border-right: none;
border-radius: 30px 0 0 30px;
font-size: 16px;
outline: none;
}
.shop-newsletter .newsletter-inner input:focus {
border-color: #f7941d;
}
/* Button */
.shop-newsletter .newsletter-inner .btn {
height: 55px;
padding: 0 30px;
background: #ee7a1b;
color: #fff;
border-radius: 0 30px 30px 0;
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
border: none;
cursor: pointer;
transition: 0.3s ease;
}
.shop-newsletter .newsletter-inner .btn:hover {
background: #07562f;
}
/* reCAPTCHA Centering */
.shop-newsletter .form-group {
margin-top: 20px;
}
/* ================================
Responsive Breakpoints
================================ */
/* Tablets */
@media (max-width: 992px) {
.shop-newsletter {
padding: 50px 20px;
}
}
/* Mobile */
@media (max-width: 768px) {
.shop-newsletter .newsletter-inner {
flex-direction: column;
align-items: center;
}
.shop-newsletter .newsletter-inner input[type="email"] {
width: 100%;
padding: 10px;
border-radius: 30px;
border-right: 1px solid #ececec;
margin-bottom: 15px;
}
.shop-newsletter .newsletter-inner .btn {
width: 100%;
border-radius: 30px;
}
}
/* Small Mobile */
@media (max-width: 480px) {
.shop-newsletter {
padding: 40px 15px;
}
.shop-newsletter .inner p {
font-size: 14px;
}
.shop-newsletter .newsletter-inner input[type="email"] {
height: 50px;
}
.shop-newsletter .newsletter-inner .btn {
height: 50px;
font-size: 13px;
}
}
/*======================================
End Shop Newsletter CSS
========================================*/
/*=============================
About US CSS
===============================*/
.about-us {
background: #fff;
}
.about-us .about-content {
padding-right: 50px;
}
.about-us .about-content .story {
display: block;
color: #04aaf4;
margin-bottom: 20px;
font-size: 17px;
}
.about-us .about-content .story i {
color: #04aaf4;
margin-right: 5px;
font-size: 22px;
}
.about-us .about-content h3 {
font-size: 30px;
font-weight: 600;
position: relative;
margin-bottom: 15px;
padding-bottom: 15px;
}
.about-us .about-content h3::before {
position: absolute;
content: "";
left: 0;
bottom: -1px;
height: 2px;
width: 60px;
background: #f7941d;
}
.about-us .about-content h3 span {
display: inline-block;
font-weight: 700;
color: #f7941d;
}
.about-us .about-content p {
line-height: 26px;
margin-bottom: 10px;
}
.about-us .about-content p:last-child {
margin: 0;
}
.about-us .about-content .button {
margin-top: 40px;
}
.about-us .about-content .button .btn {
background: #333;
color: #fff;
margin-right: 15px;
}
.about-us .about-content .button .btn:hover {
background: #f7941d;
color: #fff;
}
.about-us .about-content .button .btn.primary {
background: #f7941d;
color: #fff;
}
.about-us .about-content .button .btn.primary:hover {
background: #333;
color: #fff;
}
.about-us .about-content .button .btn:last-child {
margin: 0;
}
.about-us .about-img {
position: relative;
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
border: 10px solid #fff;
}
.about-us .about-img:before {
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.about-us .about-img:hover:before {
opacity: 0.6;
visibility: visible;
}
.about-us .about-img .video {
height: 64px;
width: 64px;
line-height: 64px;
background: #f7941d;
color: #fff;
font-size: 20px;
border-radius: 100%;
display: block;
text-align: center;
position: absolute;
left: 50%;
top: 50%;
margin-left: -32px;
margin-top: -32px;
padding-left: 4px;
transform: scale(0);
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.about-us .about-img .video:hover {
background: #fff;
color: #f7941d;
}
.about-us .about-img:hover .video {
transform: scale(1);
}
.about-us .about-img img {
height: 100%;
width: 100%;
}
/*=============================
End About US CSS
===============================*/
/*======================================
10. Start Team CSS
========================================*/
.team {
background: #f6f7fb;
}
.team .title-line {
margin-bottom: 40px;
}
.team .single-team {
margin-top: 30px;
position: relative;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
transition: all 500ms ease;
display: inline-block;
overflow: hidden;
text-align: center;
background: #fff;
}
.team .single-team .info-head {
padding: 35px 30px;
}
.team .single-team .image img {
height: 100%;
width: 100%;
}
.team .single-team .info-box {
text-align: center;
}
.team .single-team .info-box .name {
display: block;
font-size: 17px;
color: #333;
font-weight: 500;
margin-bottom: 3px;
text-transform: capitalize;
}
.team .single-team .info-box .designation {
color: #aaa;
font-size: 13px;
}
.team .single-team .social-links {
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
transition: all 500ms ease;
margin-top: 15px;
}
.team .single-team .social-links .social li {
display: inline-block;
margin-right: 15px;
}
.team .single-team .social-links .social li:last-child {
margin-right: 0px;
}
.team .single-team .social-links .social li a {
color: #666;
display: block;
font-size: 14px;
}
.team .single-team .social-links .social li a:hover {
color: #f7941d;
}
/*======================================
End Team CSS
========================================*/
/*======================================
Start Shop Blog CSS
========================================*/
.shop-blog.grid .shop-single-blog {
margin-top: 30px;
}
.shop-blog .row {
row-gap: 30px; /* vertical gap */
margin-bottom: 40px;
}
@media (max-width: 767px) {
.shop-blog .row {
/* row-gap: 3 B0px; vertical gap */
margin-bottom: 40px;
}
}
.shop-blog .shop-single-blog {
display: flex;
flex-direction: column;
height: 100%;
text-align: center;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
background: #fff;
box-shadow: 0px 5px 10px #0000000a;
}
.shop-blog .shop-single-blog:hover {
box-shadow: 0px 10px 10px #0000000a;
}
.shop-blog .shop-single-blog img {
width: 100%;
height: 220px; /* SAME HEIGHT FOR ALL */
object-fit: cover; /* Crop image, no stretch */
display: block;
}
.shop-blog .shop-single-blog .content {
padding: 30px;
flex: 1; /* Fill remaining space */
display: flex;
flex-direction: column;
justify-content: space-between;
}
.shop-blog .shop-single-blog .content .title {
font-size: 17px;
font-weight: 600;
color: #333;
}
.shop-blog .shop-single-blog .content .title:hover {
color: #a2bf43;
}
.shop-blog .shop-single-blog .content .date {
font-size: 14px;
font-weight: 400;
margin-bottom: 5px;
color: #b7b7b7;
}
.shop-blog .shop-single-blog .content .more-btn {
font-size: 14px;
font-weight: 400;
color: #3c3c3c;
margin-top: 10px;
display: block;
}
.banner-blog-heading {
font-family: "Bebas Neue", sans-serif;
text-transform: capitalize;
font-weight: 400;
color: #fff;
font-size: clamp(24px, 5vw, 100px);
margin: 0;
line-height: 1;
text-align: center;
color: #f1e9da;
}
.banner-blog-subheading {
font-family: "Bebas Neue", sans-serif;
font-weight: 400;
color: #fff;
text-transform: uppercase;
font-size: clamp(20px, 3vw, 31px);
margin-top: 10px;
line-height: 1;
text-align: center;
color: #f1e9da;
}
.shop-blog .shop-single-blog .content .more-btn:hover {
color: #a2bf43;
}
/* Related Product */
.related-product {
padding-top: 0;
}
.related-product .section-title {
text-align: center;
margin-bottom: 10px;
padding: 0;
}
.related-product .section-title h2 {
font-size: 25px;
margin-bottom: 0;
text-transform: capitalize;
position: relative;
color: #2c2d3f;
font-weight: 700;
padding-bottom: 15px;
}
/* Blog Sidebar */
.main-sidebar {
background: #fff;
margin-top: 30px;
padding: 15px;
background: transparent;
border: 1px solid transparent;
}
.main-sidebar .single-widget {
margin-bottom: 50px;
}
.main-sidebar .single-widget .title {
position: relative;
font-size: 30px;
font-weight: 800;
color: #0f4c2a;
margin-bottom: 25px;
padding-left: 15px;
padding-bottom: 10px;
}
.main-sidebar .single-widget .title::before {
position: absolute;
content: "";
left: 0;
bottom: 0px;
height: 100%;
width: 3px;
background: #0f773a;
}
.main-sidebar .single-widget:last-child {
margin: 0;
}
.main-sidebar .search {
position: relative;
}
.main-sidebar .search input {
width: 100%;
height: 45px;
box-shadow: none;
text-shadow: none;
font-size: 14px;
border: none;
color: #222;
background: transparent;
padding: 0 70px 0 20px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
border-radius: 0;
border: 1px solid #eee;
}
.main-sidebar .search .button {
position: absolute;
right: 0;
top: 0;
height: 44px;
width: 50px;
line-height: 45px;
box-shadow: none;
text-shadow: none;
text-align: center;
border: none;
font-size: 14px;
color: #fff;
background: #333;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.main-sidebar .search .button:hover {
background: #a2bf43;
color: #fff;
}
/* Category List */
.main-sidebar .categor-list {
margin-top: 15px;
}
.main-sidebar .categor-list li {
}
.main-sidebar .categor-list li {
margin-bottom: 10px;
}
.main-sidebar .categor-list li:last-child {
margin-bottom: 0px;
}
.main-sidebar .categor-list li a {
display: inline-block;
color: #333;
font-size: 14px;
}
.main-sidebar .categor-list li a:hover {
color: #a2bf43;
padding-left: 7px;
}
.main-sidebar .categor-list li a i {
display: inline-block;
margin-right: 0px;
font-size: 9px;
transform: translateY(-1px);
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.main-sidebar .categor-list li a:hover i {
margin-right: 6px;
opacity: 1;
visibility: visible;
}
/* Recent Post */
.main-sidebar .recent-post {
}
.main-sidebar .single-post {
position: relative;
border-bottom: 1px solid #ddd;
display: inline-block;
padding: 17px 0;
}
.main-sidebar .single-post:last-child {
padding-bottom: 0px;
border: none;
}
.main-sidebar .single-post .image {
}
.main-sidebar .single-post .image img {
float: left;
width: 80px;
height: 80px;
margin-right: 20px;
}
.main-sidebar .single-post .content {
padding-left: 100px;
}
.main-sidebar .single-post .content h5 {
line-height: 18px;
}
.main-sidebar .single-post .content h5 a {
color: #2c2d3f;
font-weight: 500;
font-size: 14px;
font-weight: 500;
margin-top: 10px;
display: block;
margin-bottom: 10px;
margin-top: 0;
}
.main-sidebar .single-post .content h5 a:hover {
color: #a2bf43;
}
.main-sidebar .single-post .content .comment {
}
.main-sidebar .single-post .content .comment li {
color: #888;
display: inline-block;
margin-right: 15px;
font-weight: 400;
font-size: 14px;
}
.main-sidebar .single-post .content .comment li:last-child {
margin-right: 0;
}
.main-sidebar .single-post .content .comment li i {
display: inline-block;
margin-right: 5px;
}
/* Blog Tags */
.main-sidebar .side-tags {
}
.main-sidebar .side-tags .tag {
margin-top: 40px;
}
.main-sidebar .side-tags .tag li {
display: inline-block;
margin-right: 7px;
margin-bottom: 20px;
}
.main-sidebar .side-tags .tag li a {
background: #fff;
color: #333;
padding: 8px 14px;
text-transform: capitalize;
border-radius: 0;
font-size: 13px;
background: #f6f7fb;
}
.main-sidebar .side-tags .tag a:hover {
color: #fff;
background: #a2bf43;
border-color: transparent;
}
/* Blog Newslatter CSS */
.main-sidebar .newsletter {
}
.main-sidebar .newsletter .letter-inner {
position: relative;
padding: 35px 30px;
box-shadow: 0px 0px 12px #00000014;
z-index: 2;
overflow: hidden;
}
.main-sidebar .newsletter .letter-inner h4 {
text-transform: capitalize;
margin-bottom: 25px;
font-size: 18px;
font-weight: 600;
line-height: 24px;
}
.main-sidebar .newsletter .letter-inner p {
margin-bottom: 20px;
}
.main-sidebar .newsletter .letter-inner .form-inner {
position: relative;
}
.main-sidebar .newsletter .letter-inner input {
width: 100%;
height: 45px;
background: #fff;
border: none;
border: 1px solid #ddd;
padding: 0px 60px 0px 20px;
box-shadow: none;
text-shadow: none;
border-radius: 0;
}
.main-sidebar .newsletter .letter-inner .form-inner a {
height: 42px;
width: 100%;
background: #f7941d;
color: #fff;
font-size: 14px;
display: block;
text-align: center;
line-height: 42px;
margin-top: 10px;
text-transform: uppercase;
font-weight: 500;
}
.main-sidebar .newsletter .letter-inner .form-inner a:hover {
background: #333;
color: #fff;
}
/* Blog Single CSS */
.blog-single {
background: #f2e9da;
padding: 0px 0px 70px 100px;
}
.blog-single .blog-single-main {
margin-top: 30px;
background: #fff;
}
.blog-single .blog-detail {
background: #fff;
padding-inline: 40px;
}
.blog-single .image {
position: relative;
}
.blog-single .image img {
width: 100%;
height: 100%;
}
.blog-single .blog-title {
font-size: 24px;
font-weight: 600;
text-transform: capitalize;
margin: 40px 0 15px 0;
}
.blog-single .blog-meta {
margin-bottom: 0;
overflow: hidden;
border-bottom: 1px solid #dddddd6e;
padding-bottom: 20px;
margin-bottom: 25px;
}
.blog-single .blog-meta .author i {
color: #f7941d;
margin-right: 10px;
font-size: 13px;
}
.blog-single .blog-meta .author a {
font-size: 13px;
border-right: 1px solid #ddd;
padding: 0px 15px;
}
.blog-single .blog-meta .author a:first-child {
padding-left: 0;
}
.blog-single .blog-meta .author a:last-child {
padding-right: 0;
border: none;
}
.blog-single .blog-meta span {
display: inline-block;
font-size: 14px;
color: #666;
}
.blog-single .blog-meta span a i {
margin-right: 10px;
color: #f7941d;
}
.blog-single .blog-meta span a:hover {
color: #f7941d;
}
.blog-single .content p {
/* margin-bottom: 25px; */
line-height: 26px;
}
.blog-single .content p:last-child {
margin: 0;
}
.blog-single blockquote {
position: relative;
font-size: 13px;
font-weight: 400;
padding-left: 20px;
padding: 10px 20px;
background: #f6f6f6;
padding: 30px 40px 30px 70px;
color: #555;
border: none;
margin-bottom: 25px;
border-left: 3px solid #f7941d;
}
.blog-single blockquote i {
font-size: 30px;
color: #f7941d;
position: absolute;
left: 20px;
top: 20px;
}
.blog-single .content .img-post {
margin-bottom: 25px;
}
.blog-single .share-social .content-tags {
position: relative;
margin-top: 25px;
}
.blog-single .share-social .content-tags h4 {
position: absolute;
left: 0;
top: 7px;
font-size: 15px;
font-weight: 500;
}
.blog-single .share-social .content-tags .tag-inner {
padding-left: 60px;
}
.blog-single .share-social .content-tags .tag-inner li {
display: inline-block;
margin-right: 7px;
margin-bottom: 10px;
margin-top: 4px;
}
.blog-single .share-social .content-tags .tag-inner li:last-child {
margin-right: 0px;
margin-bottom: 0px;
}
.blog-single .share-social .content-tags .tag-inner li a {
border-radius: 30px;
padding: 5px 15px;
background: #f4f7fc;
font-size: 13px;
}
.blog-single .share-social .content-tags .tag-inner li a:hover {
color: #fff;
background: #f7941d;
}
/* Comments */
.blog-single .comments {
margin-top: 40px;
}
.blog-single .comments .comment-title {
position: relative;
font-size: 18px;
font-weight: 600;
text-transform: capitalize;
margin-bottom: 30px;
display: block;
background: #fff;
padding-left: 12px;
}
.blog-single .comments .comment-title:before {
position: absolute;
content: "";
left: 0;
bottom: -1px;
height: 100%;
width: 3px;
background: #f7941d;
}
.blog-single .comments {
}
.blog-single .comments .single-comment {
position: relative;
margin-bottom: 40px;
border-radius: 5px;
padding-left: 95px;
}
.blog-single .comments .single-comment.left {
margin-left: 110px;
}
.blog-single .comments .single-comment img {
height: 70px;
width: 70px;
border-radius: 100%;
position: absolute;
left: 0;
}
.blog-single .single-comment .content {
}
.blog-single .single-comment .content h4 {
color: #333;
font-size: 16px;
font-weight: 500;
margin-bottom: 10px;
display: inline-block;
margin-bottom: 18px;
text-transform: capitalize;
}
.blog-single .single-comment .content h4 span {
display: inline-block;
font-size: 13px;
color: #8d8d8d;
margin: 0;
font-weight: 400;
text-transform: capitalize;
display: block;
margin-top: 5px;
}
.blog-single .single-comment .content p {
color: #666;
font-weight: 400;
display: block;
margin: 0;
margin-bottom: 20px;
line-height: 22px;
}
.blog-single .single-comment .content .button {
}
.blog-single .single-comment .content .btn {
display: inline-block;
color: #666;
font-weight: 400;
color: #6a6a6a;
border-radius: 4px;
text-transform: capitalize;
font-size: 14px;
background: transparent;
padding: 0;
}
.blog-single .single-comment .content a i {
display: inline-block;
margin-right: 5px;
}
.blog-single .single-comment .content a:hover {
color: #f7941d;
}
/* Comment Form */
.blog-single .reply form {
padding: 40px;
border: 1px solid #eee;
}
.blog-single .reply .reply-title {
position: relative;
font-size: 18px;
font-weight: 600;
text-transform: uppercase;
margin-block: 30px;
display: block;
padding-left: 12px;
font-size: 30px;
color: #07562f;
}
.blog-single .reply .reply-title:before {
position: absolute;
content: "";
left: 0;
bottom: -1px;
height: 100%;
width: 3px;
background: #f7941d;
}
.blog-single .reply .form-group {
margin-bottom: 20px;
}
.blog-single .reply .form-group input {
width: 100%;
height: 45px;
line-height: 50px;
padding: 0 20px;
border-radius: 0px;
color: #333 !important;
border: none;
border: 1px solid #eee;
}
.blog-single .reply .form-group textarea {
width: 100%;
height: 200px;
line-height: 50px;
padding: 0 20px;
border-radius: 0px;
color: #333 !important;
border: none;
border: 1px solid #eee;
}
.blog-single .reply .form-group label {
color: #333;
position: relative;
}
.blog-single .reply .form-group label span {
color: #ff2c18;
display: inline-block;
position: absolute;
right: -12px;
top: 4px;
font-size: 16px;
}
.blog-single .reply .button {
text-align: left;
margin-bottom: 0px;
}
.blog-single .reply .button .btn {
height: 50px;
border: none;
}
.pagination-div nav span,
.pagination-div nav a {
background-color: #f58220 !important; /* orange */
color: #fff !important;
border-radius: 6px !important;
padding: 6px 14px !important;
font-size: 14px !important;
margin-top: 20px !important;
}
.pagination-div nav a:hover {
background-color: #e36f10 !important;
color: #fff !important;
}
.pagination-div nav span[aria-current="page"] {
background-color: #d96508 !important;
font-weight: 600 !important;
}
.pagination-div nav a[aria-disabled="true"] {
background-color: #f1b27a !important;
cursor: not-allowed !important;
}
/* Previous & Next buttons rounded */
.pagination-div nav span:first-child,
.pagination-div nav span:last-child,
.pagination-div nav a:first-child,
.pagination-div nav a:last-child {
border-radius: 20px !important;
}
/*======================================
End Shop Blog CSS
========================================*/
/*======================================
21. Contact CSS
========================================*/
.contact-us {
position: relative;
z-index: 43;
background-color: #f2e9da;
}
.contact-us .title {
margin-bottom: 30px;
}
.contact-us .title h4 {
font-size: 17px;
font-weight: 500;
margin-bottom: 5px;
color: #f7941d;
}
.contact-us .title h3 {
font-size: 25px;
text-transform: capitalize;
font-weight: 600;
}
.social-box h5 {
font-size: 34px !important;
text-transform: capitalize !important;
}
.g-recaptcha {
display: flex;
justify-content: center;
}
.social-box img {
filter: hue-rotate(300deg) !important;
}
.contact-us .single-head {
padding: 50px;
box-shadow: 0px 0px 15px #0000001a;
height: 100%;
}
.contact-us .single-info {
text-align: left;
margin-bottom: 30px;
}
.contact-us .single-info i {
color: #fff;
font-size: 18px;
display: inline-block;
margin-bottom: 15px;
height: 40px;
width: 40px;
display: block;
text-align: center;
border-radius: 3px;
line-height: 40px;
background: #f7941d;
}
.contact-us .single-info ul .contact-us .single-info ul li {
margin-bottom: 5px;
}
.contact-us .single-info ul li:last-child {
margin-bottom: 0;
}
.contact-us .single-info ul li a {
font-weight: 400;
}
.contact-us .single-info ul li a:hover {
color: #f7941d;
}
.contact-us .single-info .title {
margin-bottom: 10px;
font-weight: 500;
color: #333;
font-size: 18px;
}
.contact-us .form .form-group input {
height: 40px;
line-height: 48px;
width: 100%;
border: 1px solid #fff;
padding: 0px 20px;
background-color: white !important;
color: #000;
border-radius: 20px;
font-weight: 400;
}
#contact-us ::placeholder {
color: transparent;
opacity: 1;
}
.contact-us .form .form-group textarea {
height: 150px;
width: 100%;
border: 1px solid #e6e2f5;
padding: 15px 20px;
color: #333;
background-color: white !important;
border-radius: 20px;
resize: none;
font-weight: 400;
}
.contact-us .form .form-group label {
color: #000;
position: relative;
}
.form-contact {
background: #ef7a1b;
padding: 20px;
border-radius: 20px;
}
.contact-us .form .form-group label span {
color: #ff2c18;
display: inline-block;
position: absolute;
right: -12px;
top: 4px;
font-size: 16px;
}
.contact-us .form .button {
margin: 0;
}
.contact-us .form .button .btn {
height: 50px;
border: none;
}
#myMap {
height: 500px;
width: 100%;
}
/*======================================
End Contact CSS
========================================*/
/* Mail Success */
.mail-success .mail-inner {
text-align: center;
background: #fff;
padding: 0px 30px;
}
.mail-success .mail-inner h2 {
margin-bottom: 10px;
display: block;
font-weight: 600;
color: #f7941d;
text-transform: uppercase;
font-size: 30px;
}
.mail-success .mail-inner p {
font-size: 14;
color: #333;
margin-bottom: 30px;
line-height: 22px;
}
.mail-success .mail-inner .btn {
color: #fff;
padding: 10px 30px;
}
.mail-success .mail-inner .btn i {
margin-right: 5px;
}
/*=============================
Start 404 Error CSS
===============================*/
.error-page {
background: #fff;
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
.error-page .error-inner {
text-align: center;
flex-direction: initial;
height: auto;
text-align: center;
}
.error-page .error-inner h2 {
color: #f7941d;
margin-bottom: 0;
font-weight: 700;
font-size: 100px;
display: inline-block;
font-size: 120px;
}
.error-page .error-inner h5 {
display: block;
color: #444;
font-size: 20px;
margin-bottom: 20px;
font-weight: 600;
text-transform: capitalize;
}
.error-page .error-inner p {
color: #666;
font-weight: 400;
line-height: 22px;
font-size: 15px;
padding: 0 30px;
}
.error-page .button {
margin-top: 30px;
}
.error-page .button .btn {
margin-right: 15px;
border-radius: 30px;
background: #333;
color: #fff;
font-weight: 600;
font-size: 14px;
font-weight: 500;
border: 1px solid #d7d7d7;
background: transparent;
color: #333;
padding: 10px 28px;
}
.error-page .button .btn:hover {
color: #fff;
background: #f7941d;
border-color: transparent;
}
/*=============================
/End 404 Error CSS
===============================*/
/*=============================
20. Start Footer CSS
===============================*/
.footer {
}
.footer .about {
padding-right: 50px;
}
.footer .single-footer h4 {
font-size: 17px;
font-weight: 600;
color: #fff;
text-transform: capitalize;
margin-bottom: 30px;
}
.footer .about .logo {
margin-bottom: 20px;
}
.footer .about .logo img {
}
.footer .about .text {
color: #fff;
font-weight: 400;
}
.footer .about .call {
color: #fff;
margin-top: 15px;
font-weight: 400;
}
.footer .about .call span {
display: block;
}
.footer .about .call a {
color: #f7941d;
font-size: 20px;
font-weight: 600;
}
.footer .links ul {
}
.footer .links ul li {
display: block;
margin-bottom: 8px;
}
.footer .links ul li:last-child {
margin-bottom: 0;
}
.footer .links ul li a {
color: #fff;
font-weight: 400;
}
.footer .links ul li a:hover {
color: #f7941d;
padding-left: 10px;
}
.footer .social {
}
.footer .social .contact {
}
.footer .social .contact ul {
}
.footer .social .contact ul li {
color: #fff;
display: block;
margin-bottom: 4px;
font-weight: 400;
}
.footer .contact ul li:last-child {
margin-bottom: 0;
}
.footer .social ul {
margin-top: 20px;
}
.footer .social ul li {
display: inline-block;
margin-right: 25px;
}
.footer .social ul li:last-child {
margin-right: 0;
}
.footer .social ul li a {
color: #fff;
display: block;
font-size: 16px;
}
.footer .social ul li a:hover {
color: #f7941d;
}
/* Copyright */
.footer .copyright {
}
.footer .copyright .inner {
border-top: 1px solid #eeeeee3d;
padding: 20px 0;
}
.footer .copyright .left {
}
.footer .copyright .right {
float: right;
}
.footer .copyright p {
color: #fff;
}
.footer .copyright p a {
color: #fff;
text-decoration: underline;
}
/*=============================
End Footer CSS
===============================*/
@font-face {
font-family: "Christmas Mint";
font-style: normal;
font-weight: normal;
font-display: auto;
src: url("../../fonts/Christmas-Mint.ttf") format("truetype");
}
html,
body {
margin: 0;
padding: 0;
}
img {
width: 100%;
}
h2 {
font-family: "Bebas Neue", sans-serif;
font-size: clamp(22px, 4vw, 80px) !important;
font-weight: 500 !important;
text-transform: uppercase;
line-height: 1;
}
h5 {
font-family: "Bebas Neue", sans-serif;
font-size: clamp(22px, 3vw, 60px) !important;
font-weight: 500 !important;
}
.main-btn {
text-decoration: none;
color: #fff;
background: #ee7a1b;
border-radius: 20px;
border: 1px solid #ee7a1b;
padding: 10px 20px 10px 20px;
font-family: "Montserrat", Sans-serif;
font-size: 18px;
transition: 0.5s;
}
.main-btn:hover {
background: #07562f;
color: #fff;
}
.main-btn:visited {
color: #fff;
}
.secondary-btn {
color: #ee7a1b;
border: 1px solid;
border-radius: 6px 6px 6px 6px;
padding: 10px 20px 10px 20px;
text-decoration: none;
transition: 0.5s;
font-family: "Montserrat", Sans-serif;
}
.secondary-btn:hover {
background: #ee7a1b;
color: #fff;
}
.main-pera {
font-family: "Montserrat", sans-serif;
font-size: 16px;
font-weight: 600;
}
form {
margin: 0;
}
h4 {
font-family: "Rubik", sans-serif;
}
header {
background: #03553e;
padding: 7px 0;
}
p {
}
header nav .nav-link {
font-family: "Rubik", sans-serif;
font-size: 18px;
transition: 0.3s;
color: #fff;
font-weight: 500;
}
header nav .active .nav-link {
color: #a2bf43;
}
header nav .nav-link:hover {
color: #a2bf43;
transform: translateY(-5px);
}
header .header-extras {
display: flex;
flex-direction: row;
align-items: center;
}
header .header-extras form select {
background: #033d60;
padding: 8px;
border-radius: 4px;
color: #fff;
}
.logo-wrap img {
width: 210px;
/* max-width: none; */
}
footer {
background: #03553e;
color: #fff;
padding: 60px 0px;
}
.links-wrap {
list-style: none;
padding: 0;
}
.summary-wrap .logo {
width: 180px;
margin-bottom: 22px;
}
footer .summary-wrap .links-wrap {
display: flex;
}
footer .summary-wrap .links-wrap a {
color: #fff;
font-family: "Montserrat", sans-serif;
text-decoration: none;
font-size: 14px;
font-weight: 600;
text-align: justify;
}
/* footer .summary-wrap .links-wrap li:before {
content: "—";
font-size: 12px;
font-weight: 800;
position: absolute;
left: 6%;
top: 50%;
transform: translate(-50%, -50%)
} */
footer .summary-wrap .links-wrap li:nth-child(1):before {
display: none;
}
footer .summary-wrap .links-wrap li:nth-child(1) {
padding-left: 0;
}
footer .summary-wrap .summary {
margin-bottom: 22px;
}
footer .summary-wrap .links-wrap li {
padding-left: 10px;
position: relative;
}
.footer-menu h4 {
margin-bottom: 20px;
}
.footer-menu .links-wrap a {
color: #fff;
text-decoration: none;
font-family: "Montserrat", sans-serif;
padding-left: 20px;
}
.footer-menu .links-wrap li {
margin-bottom: 18px;
}
/*=======HOME PAGE BANNER======*/
.banner-sec.home {
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
url("../images/banner-new.webp") no-repeat;
background-size: cover;
background-position-y: center;
position: relative;
/* padding: 60px 0px 120px 0px; */
}
.banner-text {
position: relative;
z-index: 2;
padding: 100px 0 100px 100px;
margin-left: auto;
background: center center;
}
.extra-img {
width: 10% !important;
margin-bottom: 1rem !important;
}
.banner-heading {
font-family: "Bebas Neue", sans-serif;
text-transform: capitalize;
font-weight: 400;
text-align: left;
color: #f1e9da;
font-size: clamp(24px, 5vw, 100px);
margin: 0;
line-height: 1;
text-align: left;
color: #f1e9da;
}
.banner-heading.bottom-left {
padding: 200px 0 50px;
width: 70%;
background: center center;
}
.banner-heading.right {
padding: 100px 0;
width: 50%;
margin-left: auto;
background: center center;
}
.head-btn {
font-family: "Averta SemiBold", sans-serif;
padding: 15px;
margin-top: 10px !important;
background: #f1e9da4d;
border-radius: 50px;
color: #f1e9da;
text-transform: capitalize;
font-size: 22px;
font-weight: 500;
display: inline-block;
text-decoration: none;
}
.head-btn:hover {
color: #c1d444;
text-decoration: none;
}
.head-btn:visited {
color: #f1e9da !important;
}
/* Keep desktop view exactly as it was */
/* No changes above 992px (desktop) */
/* Tablet (768px - 991px) - Center content */
@media (max-width: 991.98px) {
.banner-sec.home {
padding: 40px 20px 80px 20px;
background-position: center center !important;
min-height: 80vh;
display: flex;
align-items: center;
}
.banner-text {
padding: 0 !important;
margin: 0 auto !important;
text-align: center !important;
width: 100%;
max-width: 800px;
}
.extra-img {
width: 140px !important;
max-width: 20% !important;
margin: 0 auto 1.5rem auto !important;
display: block;
}
.banner-heading {
text-align: center !important;
font-size: clamp(40px, 7vw, 70px);
margin-bottom: 1.5rem !important;
line-height: 1.1;
}
.head-btn {
margin: 0 auto !important;
display: inline-block;
padding: 12px 24px;
font-size: 18px;
}
}
/* Mobile (576px - 767px) */
@media (max-width: 767.98px) {
.banner-sec.home {
padding: 30px 15px 60px 15px;
min-height: 70vh;
}
.banner-text {
padding: 0 !important;
}
.extra-img {
width: 120px !important;
max-width: 25% !important;
margin-bottom: 1.25rem !important;
}
.banner-heading {
font-size: clamp(32px, 8vw, 50px);
margin-bottom: 1.25rem !important;
}
.head-btn {
padding: 10px 20px;
font-size: 16px;
}
}
/* Small Mobile (below 576px) */
@media (max-width: 575.98px) {
.banner-sec.home {
padding: 25px 15px 50px 15px;
min-height: 60vh;
}
.extra-img {
width: 100px !important;
max-width: 30% !important;
margin-bottom: 1rem !important;
}
.banner-heading {
font-size: clamp(28px, 9vw, 40px);
margin-bottom: 1rem !important;
}
.head-btn {
padding: 8px 16px;
font-size: 14px;
}
}
/* Extra Small Mobile (below 375px) */
@media (max-width: 374.98px) {
.banner-sec.home {
padding: 20px 10px 40px 10px;
}
.extra-img {
width: 80px !important;
max-width: 35% !important;
}
.banner-heading {
font-size: clamp(24px, 10vw, 32px);
}
.head-btn {
padding: 6px 12px;
font-size: 13px;
}
}
@media (max-width: 767.98px) {
/* Banner section */
/* General container padding */
.container {
padding-left: 15px !important;
padding-right: 15px !important;
}
/* Founder sections - stack image + text */
.row > .col-md-6 {
flex: 0 0 100%;
max-width: 100%;
margin-bottom: 2rem;
}
/* FIXED: Images become full-width and fill their div */
.btm-img,
.about-wrap .btm-img {
height: auto !important;
min-height: 280px; /* Adjust as needed */
margin-bottom: 1.5rem;
position: relative !important; /* Keep relative for proper stacking */
overflow: hidden !important;
}
/* FIXED: Make images fill their containers */
.btm-img img,
.about-wrap img.about-img,
.btm-img img.img-fluid {
position: static !important; /* Remove absolute positioning */
width: 100% !important;
height: 100% !important; /* Fill the container height */
object-fit: cover !important; /* Ensures image covers area without distortion */
border-radius: 12px;
max-width: 100% !important;
left: 0 !important;
right: 0 !important;
top: 0 !important;
bottom: 0 !important;
}
/* Text blocks */
.content-wrap {
margin-left: 0 !important; /* remove left margin */
padding: 0 10px;
}
.content-wrap h5 {
font-size: 1.6rem;
margin-bottom: 1rem;
text-align: center;
}
.content-wrap .main-pera {
font-size: 1.05rem !important;
line-height: 1.6;
text-align: center; /* Center text on mobile */
}
/* Colored banner strips */
.bg-green,
.orange-bg,
.or-bg {
font-size: 1.4rem !important;
padding: 20px 15px !important;
line-height: 1.4;
text-align: center;
}
/* Call to action button */
.or-bg {
padding: 30px 15px !important;
}
.head-btn {
font-size: 1.3rem !important;
padding: 14px 28px !important;
width: 90%;
max-width: 300px;
text-align: center;
margin: 0 auto !important;
display: block !important;
}
/* Founder order: text first, then image (better reading flow on mobile) */
.btm-col .col-md-6:first-child {
order: 2; /* Image comes after text in btm-col */
}
.btm-col .col-md-6:nth-child(2) {
order: 1; /* Text comes first in btm-col */
}
.about-wrap .col-md-6:first-child {
order: 1; /* Image first in about-wrap */
}
.about-wrap .col-md-6:nth-child(2) {
order: 2; /* Text second in about-wrap */
}
/* Ensure proper spacing between stacked sections */
section .container {
padding-top: 20px;
/* padding-bottom: 20px; */
}
}
/* Poduct Grid */
.products-grid {
}
.products-grid .product-img {
width: 100%;
transition: 0.5s;
}
.products-grid a:hover img {
transform: scale(1.025);
}
.product-tile {
padding-bottom: 40px;
}
.product-tile img {
width: 100%;
transition: 0.5s;
}
.product-tile a:hover img {
transform: scale(1.025);
}
.product-tile .btn-wrap {
text-align: center;
}
/* Order Centered */
section.order-centered {
/* background: #033d60; */
color: #fff;
text-align: center;
}
/* product Cards */
.product-cards .section-head .btn-wrap {
text-align: right;
}
.product-cards .section-head h2 {
color: #033d60;
}
.product-cards .content-wrap h2 {
color: #03543d;
font-weight: 500 !important;
font-size: clamp(14px, 3vw, 26px) !important;
/* min-height: 80px; */
}
.product-cards .price-wrap {
color: #08562f;
font-family: "Montserrat", Sans-serif;
font-size: 18px;
font-weight: 700;
}
.product-cards .product-card {
border: 1px solid #ddd;
padding: 10px;
border-radius: 6px;
margin: 10px 0px;
}
.product-wrap {
margin: 10px 0px;
text-align: center;
}
.product-cards .img-wrap {
position: relative;
}
.product-cards .img-wrap img {
border-radius: 6px;
height: 190px;
object-fit: cover;
}
.product-cards .hover-img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: 0.5s;
}
.product-cards .product-card:hover .hover-img {
opacity: 1;
}
.map-section h2 {
color: #f2e9da;
}
.content-wrap h5 {
color: #033d61;
}
h2.abt-heading {
text-align: center;
margin-bottom: 80px;
}
/* Why Choose Us */
/* Why Choose Us - Desktop styles (unchanged) */
.why-choose-sec {
background-color: #f2e9da;
}
.girl-img {
width: 60%;
margin-top: -140px;
}
.green-heading {
color: #07562f !important;
}
.orange-heading {
color: #ef7a1b !important;
}
.white-heading {
color: #fff !important;
}
.orange-bg {
background-color: #ed791b;
}
.blue-heading {
color: #033d61;
}
.bg-green {
background-color: #03553e;
}
.why-choose-sec .content-wrap {
z-index: 1;
position: relative;
}
.why-choose-sec .cards {
z-index: 1;
position: relative;
}
.why-choose-sec .card-headers {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 12px;
}
.why-choose-sec .card-headers img {
width: 50px;
}
.why-choose-sec .card-wrap {
background: #fff;
color: #000;
padding: 20px;
border-radius: 14px;
height: 100%;
}
.why-choose-sec .cards p {
font-weight: 400;
color: #000;
font-size: 14px;
}
/* Responsive styles for 992px and below */
@media (max-width: 992px) {
.why-choose-sec {
padding: 50px 0px 0px 0px;
}
.girl-img {
width: 80%; /* Increased from 60% for better mobile visibility */
margin-top: 0; /* Removed negative margin for proper stacking */
display: block;
margin-left: auto;
margin-right: auto;
max-width: 500px;
}
.why-choose-sec .row {
flex-direction: column; /* Stack columns vertically */
}
.why-choose-sec .col-md-12.col-lg-6 {
width: 100%;
max-width: 100%;
flex: 0 0 100%;
}
.why-choose-sec .content-wrap {
margin-bottom: 40px;
text-align: center;
}
.why-choose-sec h2.green-heading {
font-size: 32px;
margin-bottom: 20px;
}
.why-choose-sec .main-pera {
font-size: 16px;
line-height: 1.6;
margin-bottom: 15px;
}
}
/* Further adjustments for tablets (768px and below) */
@media (max-width: 768px) {
.why-choose-sec {
padding: 40px 0px 0px 0px;
}
.girl-img {
width: 90%;
max-width: 400px;
}
.why-choose-sec h2.green-heading {
font-size: 28px;
}
.why-choose-sec .main-pera {
font-size: 15px;
}
.why-choose-sec .content-wrap {
padding: 0 15px;
}
}
/* Mobile devices (576px and below) */
@media (max-width: 576px) {
.why-choose-sec {
padding: 40px 0px 0px 0px;
}
.girl-img {
width: 95%;
max-width: 350px;
}
.why-choose-sec h2.green-heading {
font-size: 24px;
margin-bottom: 15px;
}
.why-choose-sec .main-pera {
font-size: 14px;
line-height: 1.5;
margin-bottom: 12px;
}
.why-choose-sec .content-wrap {
padding: 0 10px;
}
}
/* Extra small devices (below 400px) */
@media (max-width: 400px) {
.why-choose-sec h2.green-heading {
font-size: 22px;
}
.why-choose-sec .main-pera {
font-size: 13px;
}
.girl-img {
width: 100%;
max-width: 300px;
}
}
.social-icons-sec {
background: #fc7b04;
padding: 34px 0px;
text-align: center;
position: relative;
}
.follow-icons-sec {
background: #03543d;
padding: 34px 0px;
text-align: center;
position: relative;
}
.social-icons-sec h5 {
color: #fff;
}
.social-wrap {
display: flex;
width: 100%;
max-width: 1200px;
margin: 0 auto;
align-items: center;
gap: 95px;
}
.social-links img {
filter: brightness(0) invert(1);
}
.social-follows-link img {
filter: invert(18%) sepia(90%) saturate(420%) hue-rotate(95deg)
brightness(70%) contrast(110%);
}
.social-follows-link img:hover {
transform: scale(1.1);
transition: 0.3s ease-in-out;
}
.follow-img {
width: 24% !important;
margin-top: -60px !important;
}
.social-col {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
}
.social-icons-sec .social-links a {
transition: 0.5s;
}
.social-icons-sec .social-links a:hover {
transform: scale(1.05);
}
/* Mobile responsive styles ONLY - for below 768px */
@media (max-width: 768px) {
.social-icons-sec {
padding: 25px 0px; /* Reduced padding for mobile */
}
.social-wrap {
flex-direction: column;
gap: 20px;
text-align: center;
}
.follow-img {
width: 50% !important; /* Adjusted for mobile */
max-width: 200px;
margin-top: 0 !important; /* Removed negative margin for mobile */
margin-bottom: 10px;
}
.follow-img img {
width: 100%;
height: auto;
}
.social-icons-sec h5 {
margin-bottom: 15px;
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
}
.social-icons-sec h5 img {
width: 40px !important; /* Adjusted size for mobile */
}
.social-follows-link {
display: flex;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
}
.social-follows-link img {
/* width: 35px; */
/* height: 35px; */
}
}
/* For very small mobile devices */
@media (max-width: 480px) {
.social-icons-sec {
padding: 20px 0px;
}
.follow-img {
width: 60% !important;
max-width: 180px;
}
.social-follows-link {
gap: 10px;
}
.social-follows-link img {
/* width: 32px;
height: 32px; */
}
}
/* For extra small devices */
@media (max-width: 360px) {
.social-icons-sec {
padding: 15px 0px;
}
.follow-img {
width: 70% !important;
}
.social-follows-link {
gap: 8px;
}
.social-follows-link img {
/* width: 28px;
height: 28px; */
}
}
/* .map-section {
background: url("../../images/waves-bg.png") no-repeat top center/cover;
padding: 80px 0px;
background-color: #f2e9da;
} */
.map-section {
padding: 80px 0px;
position: relative; /* ✅ MOST IMPORTANT LINE */
background-color: #f2e9da;
background-image: url("../../images/waves-bg.png"),
url("../../images/catg_bg.png");
background-repeat: no-repeat, repeat;
background-position: top 12%, center top;
background-size: cover, auto;
}
.mapp-section {
padding: 80px 0px;
position: relative; /* ✅ MOST IMPORTANT LINE */
background-color: #f2e9da;
background-repeat: no-repeat, repeat;
background-position: top 12%, center top;
background-size: cover, auto;
}
/* ------------------------ */
/* HOME IMAGE (TOP-RIGHT BRIDGE EFFECT) */
/* ------------------------ */
.map-section::after {
content: "";
position: absolute;
right: clamp(10px, 5vw, 150px);
top: clamp(-100px, -5vh, -140px);
width: clamp(120px, 15vw, 250px);
aspect-ratio: 1 / 1; /* image ka width:height ratio */
background-image: url("../../images/home.png") !important;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
z-index: 10;
pointer-events: none;
}
@media (max-width: 1200px) {
.map-section::after {
right: clamp(5px, 8vw, 60px);
top: clamp(-75px, -5vh, -140px);
width: clamp(100px, 18vw, 200px);
}
}
/* MOBILE / TABLET FINE-TUNING */
@media (max-width: 992px) {
.map-section::after {
right: clamp(5px, 8vw, 60px);
top: clamp(-65px, -4vh, -70px);
width: clamp(100px, 18vw, 200px);
}
}
@media (max-width: 768px) {
.map-section::after {
right: clamp(5px, 10vw, 74px);
top: clamp(-54px, -3vh, -55px);
width: clamp(80px, 20vw, 160px);
}
}
@media (max-width: 480px) {
.map-section::after {
right: 10px;
top: -40px;
width: 120px;
}
}
/* Optional: Extra small devices hide image if crowded ≤ 360px */
@media (max-width: 360px) {
.map-section::after {
display: none;
}
}
.box-sec {
padding: 80px 0px;
background-color: #f2e9da;
/*box*/
}
.parent {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(4, 1fr);
gap: 10px;
}
.div1 {
grid-column: span 3 / span 3;
grid-row: span 4 / span 4;
background: url(../../images/bg-1.png);
background-repeat: no-repeat;
background-position: center center;
padding: 20px;
min-height: 250px;
}
.div5 {
grid-column: span 2 / span 2;
grid-row: span 2 / span 2;
grid-column-start: 4;
background: url(../../images/bg-3.png);
background-repeat: no-repeat;
background-position: center center;
padding: 20px;
min-height: 250px;
}
.div6 {
grid-column: span 2 / span 2;
grid-row: span 2 / span 2;
grid-column-start: 4;
grid-row-start: 3;
background: url(../../images/bg-2.png);
background-repeat: no-repeat;
background-position: center center;
padding: 20px;
min-height: 250px;
}
.div7 {
grid-row: span 4 / span 4;
grid-column-start: 6;
grid-row-start: 1;
background: url(../../images/bg-4.png);
background-repeat: no-repeat;
background-position: center center;
padding: 20px;
min-height: 250px;
}
.div1,
.div5,
.div6,
.div7 {
display: flex;
align-items: center;
/* text vertically center */
justify-content: center;
/* text horizontally center */
text-align: left;
min-height: 220px !important;
border-radius: 20px;
}
.badge-color {
color: #f1e9da;
}
.badge-latin-color {
color: #f1e9da;
}
/* Tablet devices (768px to 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
.parent {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 15px;
}
.div1,
.div5,
.div6,
.div7 {
grid-column: unset !important;
grid-row: unset !important;
grid-column-start: unset !important;
grid-row-start: unset !important;
position: relative;
min-height: 300px !important;
width: 100%;
border-radius: 20px !important;
overflow: hidden;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.div1 {
grid-column: 1 / span 1;
grid-row: 1 / span 1;
}
.div5 {
grid-column: 2 / span 1;
grid-row: 1 / span 1;
}
.div6 {
grid-column: 1 / span 1;
grid-row: 2 / span 1;
}
.div7 {
grid-column: 2 / span 1;
grid-row: 2 / span 1;
background: url(../../images/bg-4.png) center center no-repeat !important;
background-size: cover !important;
}
/* Keep Latin Frozen Bites content inside div1 */
.latin-meals {
position: absolute;
padding: 15px;
border: 2px solid #fff;
background-color: rgba(242, 233, 218, 0.95);
border-radius: 15px;
margin: 0;
z-index: 2;
transform: translateY(70px) !important;
}
.latin-meals p {
font-size: 30px !important;
margin-bottom: 10px;
color: #03543d;
}
/* Keep Arepas content inside div6 */
.arepas {
transform: scale(1) translateY(0);
/* position: absolute; */
bottom: 20px;
left: 20px;
right: 20px;
padding: 15px;
border: 2px solid #fff;
background-color: rgba(242, 233, 218, 0.95);
border-radius: 15px;
margin: 0;
z-index: 2;
}
.arepas p {
font-size: 22px;
margin-bottom: 10px;
color: #03543d;
}
/* Adjust button sizes */
.latin-shop a,
.arepas-shop a {
font-size: 16px;
padding: 8px 16px;
margin-top: 10px;
display: inline-block;
}
/* Center badge text */
.badge-center {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
text-align: center;
padding: 20px;
}
.badge-color {
color: #f1e9da;
font-size: 32px;
line-height: 1.3;
text-align: center;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
.badge-latin-color {
color: #f1e9da;
/* font-size: 32px; */
line-height: 1.3;
text-align: center;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
/* Ensure all boxes have consistent styling */
.div1::before,
.div5::before,
.div6::before,
.div7::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.1);
border-radius: 20px;
z-index: 1;
}
.div1 > *,
.div5 > *,
.div6 > *,
.div7 > * {
position: relative;
z-index: 2;
}
}
/* Mobile devices (768px and below) */
@media (max-width: 768px) {
.parent {
display: flex;
flex-direction: column;
gap: 20px;
}
.div1,
.div5,
.div6,
.div7 {
width: 100%;
min-height: 250px !important;
position: relative;
border-radius: 20px !important;
overflow: hidden;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
display: flex;
align-items: center;
justify-content: center;
}
/* Ensure div7 has its background */
.div7 {
background: url(../../images/bg-4.png) center center no-repeat !important;
background-size: cover !important;
}
.box-sec {
padding: 40px 15px;
}
/* Keep Latin Frozen Bites content inside div1 */
.latin-meals {
bottom: 50px;
/* left: 15px;
right: 15px; */
margin: 0;
transform: scale(0.9) translateY(90px) !important;
}
.latin-meals p {
font-size: 12px;
margin-bottom: 10px;
color: #03543d;
}
/* Keep Arepas content inside div6 */
.arepas {
transform: scale(1) translateY(0);
/* position: absolute; */
bottom: 20px;
left: 15px;
right: 15px;
padding: 15px;
border: 2px solid #fff;
background-color: rgba(242, 233, 218, 0.95);
border-radius: 15px;
margin: 0;
z-index: 2;
}
.arepas p {
font-size: 20px;
margin-bottom: 10px;
color: #03543d;
}
/* Adjust button sizes for mobile */
.latin-shop a,
.arepas-shop a {
font-size: 14px;
padding: 8px 16px;
margin-top: 10px;
display: inline-block;
}
/* Center badge text in div5 */
.badge-center {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
text-align: center;
padding: 20px;
z-index: 2;
}
.badge-color {
color: #f1e9da;
font-size: 45px !important;
line-height: 1.3;
text-align: center;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
.badge-latin-color {
color: #f1e9da;
/* font-size: 45px !important; */
line-height: 1.3;
text-align: center;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
/* Add overlay for better text readability */
.div1::before,
.div5::before,
.div6::before,
.div7::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.1);
border-radius: 20px;
z-index: 1;
}
.div1 > *,
.div5 > *,
.div6 > *,
.div7 > * {
position: relative;
z-index: 2;
}
}
/* Small mobile devices (480px and below) */
@media (max-width: 480px) {
.div1,
.div5,
.div6,
.div7 {
min-height: 220px !important;
}
.latin-meals {
padding: 10px !important;
/* top: 50px;
transform: scale(0.8) !important; */
/* left: 15px; */
/* right: 15px; */
}
.arepas {
padding: 20px !important;
bottom: 15px;
left: 15px;
right: 15px;
}
.latin-meals p {
font-size: 28px !important;
}
.arepas p {
font-size: 16px;
}
.badge-color {
font-size: 24px;
padding: 0 15px;
}
.badge-latin-color {
font-size: 24px;
padding: 0 15px;
}
.latin-shop a,
.arepas-shop a {
font-size: 13px;
padding: 6px 12px;
}
.latin-shop,
.arepas-shop {
margin-top: 0px;
}
}
/* Extra small devices (below 360px) */
@media (max-width: 360px) {
.div1,
.div5,
.div6,
.div7 {
min-height: 200px !important;
}
.latin-meals p {
font-size: 16px;
}
.arepas p {
font-size: 14px;
}
.badge-color {
font-size: 20px;
}
.badge-latin-color {
font-size: 20px;
}
.latin-shop a,
.arepas-shop a {
font-size: 12px;
padding: 5px 10px;
}
}
.wave:before {
content: "";
/* pseudo-element visible banane ke liye */
position: absolute;
/* parent ko relative rakhna hoga */
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("../../images/wavess.png") no-repeat center center/cover;
z-index: 999;
/* taki main content ke neeche rahe */
}
.wave {
position: relative;
}
/* Test css */
.strip-section {
width: 100%;
height: 100%;
background: red;
display: flex;
justify-content: center;
align-items: center;
}
.strips {
background: red;
/* height: 240px; */
}
.blue-strip {
height: 40px;
width: 100%;
position: relative;
z-index: 99999;
}
.red-strip {
position: relative;
height: 40px;
width: 100%;
}
.red-strip .strip {
background: red;
}
.blue-strip .strip {
background: cyan;
height: 40px;
}
.btm-section {
height: 100%;
width: 100%;
background: cyan;
}
.offer-sec {
position: relative;
}
a.cart-btn {
position: absolute;
top: 75%;
left: 54%;
}
a.cart-btn:hover {
transform: scale(1.05);
}
.review-card .img-wrap img {
width: 100%;
border-radius: 6px;
}
.review-card {
color: #fff;
padding: 20px 20px;
border-radius: 6px;
margin: 30px 0;
background: #03553e;
}
.review-card .owl-nav .owl-prev {
position: absolute;
top: 50%;
left: 2%;
transform: translate(-50%, -50%);
display: flex;
justify-content: center;
align-items: center;
}
.review-card .owl-nav .owl-prev span {
font-size: 40px;
font-weight: 500;
display: block;
padding: 4px 20px;
border-radius: 50%;
}
.review-card .content-wrap {
width: 80%;
}
.review-card .owl-nav .owl-next {
position: absolute;
top: 50%;
right: 0;
transform: translate(-50%, -50%);
display: flex;
justify-content: center;
align-items: center;
}
.review-card .owl-nav .owl-next span {
font-size: 40px;
font-weight: 500;
display: block;
padding: 4px 20px;
border-radius: 50%;
}
.header-extras .list-main {
color: #fff;
margin: 0 0px;
font-size: 14px;
padding: 0;
}
.header .single-icon {
color: #fff;
margin: 0 5px;
font-size: 16px;
}
.margin-top-bread {
margin-top: 10%;
}
.breadcrumbs .bread-inner {
text-align: center;
}
.single-product .button-head {
display: none;
}
.single-des p {
padding: 10px;
background: white !important;
}
.nice-select {
width: 100% !important;
margin: 10px 0px !important;
padding: 5px;
}
.variation-radio {
display: flex;
gap: 20px;
margin-top: 20px;
}
.form-check-input {
margin-left: -0.25rem;
}
.dropdown-hover {
position: relative;
display: inline-block;
}
.dropdown-hover .dropdown-menu {
display: none;
position: absolute;
background-color: #fff;
min-width: 150px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
border-radius: 5px;
z-index: 1000;
top: 25px;
left: 5px;
font-weight: 400;
text-align: inherit;
white-space: nowrap;
background-color: #fff;
border: 0;
}
.dropdown-hover:hover .dropdown-menu {
display: block;
}
.dropdown-menu li a {
text-decoration: none;
color: #333;
font-size: 12px;
align-items: center;
}
.dropdown-menu li a i {
color: #dc3545;
/* Red for logout icon */
}
.dropdown-menu li a:hover {
background-color: #f1f1f1;
}
.header-extras {
font-family: "Montserrat";
}
/* .header-extras a{
color: #fff !important;
} */
#offcanvasNavbar {
background: #03553e !important;
}
.bi-list::before {
content: "\f479";
/* background: #0a3e60; */
padding: 5px;
border-radius: 8px;
}
.setup-account-css {
padding: 100px 20px;
}
/* Make auth dropdown appear on hover (desktop only is recommended) */
@media (min-width: 992px) {
/* same breakpoint as your d-lg-flex */
.dropdown-hover:hover .dropdown-menu {
display: block !important;
}
/* Optional: small delay / smooth appearance */
.dropdown-hover .dropdown-menu {
transition: opacity 0.15s ease, visibility 0.15s ease;
opacity: 0;
visibility: hidden;
margin-top: 0; /* remove default gap */
}
.dropdown-hover:hover .dropdown-menu {
opacity: 1;
visibility: visible;
}
/* Prevent it from disappearing too quickly when moving mouse to menu */
.dropdown-hover:hover .dropdown-menu,
.dropdown-hover .dropdown-menu:hover {
display: block !important;
opacity: 1;
visibility: visible;
}
}
@media only screen and (max-width: 1024px) {
.banner-heading.right {
width: auto;
padding: 50px 0px;
}
.logo-wrap img {
width: 290px;
}
.banner-heading.bottom-left {
padding: 50px 0px;
}
footer .summary-wrap .links-wrap {
display: block;
}
footer .summary-wrap .links-wrap li {
padding-left: 0px;
padding: 6px 0px;
}
.shopping-item {
display: none;
}
.shopping-cart tbody .qty .input-group {
width: 100%;
}
.setup-account-css {
padding: 30px 20px;
}
}
@media only screen and (max-width: 768px) {
.banner-heading.right {
padding: 60px 0px;
}
.banner-heading.bottom-left {
padding: 80px 0px;
width: 100%;
}
.logo-wrap img {
width: 290px;
}
.products-grid .product-img {
width: 70%;
}
.section-padding-bottom {
padding: 50px 0px;
}
.footer-menu {
padding-left: 0px;
}
.footer-menu .links-wrap li {
margin-bottom: 8px;
}
.product-cards .section-head .btn-wrap {
text-align: left;
margin-top: 10px;
}
.row.btm-col {
flex-direction: column-reverse;
}
.main-btn {
font-size: 14px;
padding: 10px 15px;
}
.secondary-btn {
padding: 5px 15px;
}
.px-2 {
padding-right: 0.2rem !important;
padding-left: 0.2rem !important;
}
.img-fluid {
/* max-width: 80%; */
}
.card-headers h5 {
font-size: 22px;
}
.why-choose-sec .card-headers img {
width: 40px;
}
.review-card .content-wrap {
width: 100%;
}
}
@media (max-width: 992px) {
.product-cards .content-wrap h2 {
min-height: 50px;
}
.active-lang {
background: #444444 !important;
}
}
.footer-menu .nav-link:focus,
.footer-menu .nav-link:hover {
color: #f7941d !important;
}
.footer-menu a {
transition: color 0.3s ease;
}
.footer-menu a:hover,
.footer-menu .links-a a:hover,
.footer-menu ul li a:hover {
color: #ff6b00 !important; /* Bright orange */
}
.review-card .img-wrap img {
height: 300px;
object-fit: cover;
border-radius: 10px !important;
object-position: top center;
width: 100%;
}
.owl-prev::before {
content: "";
border: solid black;
border-width: 0 2px 2px 0;
display: inline-block;
padding: 5px;
transform: rotate(135deg);
}
.owl-next::before {
content: "";
border: solid black;
border-width: 0 2px 2px 0;
display: inline-block;
padding: 5px;
transform: rotate(-40deg);
}
.owl-prev {
padding: 8px 8px 8px 12px !important;
font-size: 0px !important;
}
.owl-next {
padding: 8px 12px 8px 8px !important;
font-size: 0px !important;
}
td.float-right {
width: 100%;
float: left !important;
display: flex;
border: 0px;
}
.language-selector {
position: fixed;
right: 20px;
top: 15px;
z-index: 999;
font-family: inherit;
}
.selected-lang {
display: flex;
align-items: center;
justify-content: space-between;
background: #449880;
border: 2px solid #03543d;
border-radius: 18px;
padding: 8px 12px;
cursor: pointer;
color: white;
font-weight: 600;
transition: all 0.25s ease;
min-width: 150px;
user-select: none;
}
.selected-lang:hover {
background: #03543d;
box-shadow: 0 3px 10px rgba(7, 86, 47, 0.18);
}
.selected-lang i {
font-size: 14px;
transition: transform 0.3s ease;
}
.language-selector:hover .selected-lang i {
transform: rotate(180deg);
}
.lang-dropdown {
position: absolute;
top: 100%;
right: 0;
background: white;
border: 1px solid white;
border-radius: 6px;
margin-top: 6px;
padding: 6px 0;
min-width: 150px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: all 0.25s ease;
overflow: hidden;
}
.language-selector:hover .lang-dropdown,
.language-selector:focus-within .lang-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.lang-option {
display: block;
padding: 9px 16px;
color: #03543d;
text-decoration: none;
font-weight: 500;
transition: all 0.2s;
}
.lang-option:hover {
background: #e8f5e9;
color: #03543d;
}
.lang-option.active {
background: #03543d;
color: white;
font-weight: 600;
}
/* Hide Google Translate UI elements */
#google_translate_element,
.skiptranslate,
.goog-te-banner-frame,
.goog-te-menu-frame,
.goog-te-combo {
display: none !important;
}
body {
top: 0 !important;
}
/* Mobile adjustments */
@media (max-width: 768px) {
.language-selector {
right: 15px;
top: 12px;
}
.selected-lang {
padding: 7px 10px;
font-size: 14px;
min-width: 130px;
}
.lang-dropdown {
min-width: 130px;
}
}
header .header-extras img {
width: 34px;
margin: 0;
margin-left: 4px;
margin-right: 4px;
}
div#google_translate_button_canvas {
padding-top: 20px;
display: flex;
gap: 20px;
}
@media (max-width: 1380px) {
.extra-col {
justify-content: start !important;
}
}
.skiptranslate {
display: none !important;
}
body {
top: 0px !important;
}
.header-extras i.ti-user {
font-size: 14px;
padding: 7px;
margin: 5px;
background: #a2bf43;
border-radius: 50%;
}
#google_translate_button_canvas .active-lang {
/* padding: 5px !important; */
line-height: 0px !important;
margin: 0 !important;
align-items: center;
display: flex;
}
#google_translate_button_canvas .lang-select {
padding: 5px !important;
}
.content-wrap.why-choose {
height: 320px;
background: #03543d;
border-radius: 10px;
padding: 20px;
color: #fff;
margin-bottom: 20px;
}
.content-wrap.why-choose ul li {
padding: 5px 0px;
}
.content-box p,
.content-box ul li {
font-size: 16px;
padding: 5px 0px;
color: #fff;
}
h4.content-box-title {
margin: 10px 0px;
}
.content-box {
background: #033d60;
color: #fff;
padding: 20px;
border-radius: 10px;
margin-bottom: 10px;
}
.faq-drawer {
margin-bottom: 30px;
}
.faq-drawer__content-wrapper {
font-size: 1.25em;
line-height: 1.4em;
max-height: 0px;
overflow: hidden;
transition: 0.25s ease-in-out;
}
.faq-drawer__title {
border-top: #000 1px solid;
cursor: pointer;
display: block;
font-size: 1.25em;
font-weight: 700;
padding: 30px 0 0 0;
position: relative;
margin-bottom: 0;
transition: all 0.25s ease-out;
}
.faq-drawer__title::after {
border-style: solid;
border-width: 1px 1px 0 0;
content: " ";
display: inline-block;
float: right;
height: 10px;
left: 2px;
position: relative;
right: 20px;
top: 2px;
transform: rotate(135deg);
transition: 0.35s ease-in-out;
vertical-align: top;
width: 10px;
}
/* OPTIONAL HOVER STATE */
.faq-drawer__title:hover {
color: #4e4b52;
}
.faq-drawer__trigger:checked
+ .faq-drawer__title
+ .faq-drawer__content-wrapper {
max-height: 350px;
}
.faq-drawer__trigger:checked + .faq-drawer__title::after {
transform: rotate(-45deg);
transition: 0.25s ease-in-out;
}
input[type="checkbox"] {
display: none;
}
.contact-info-text {
color: #fff;
padding: 20px;
background: #f2e9da;
color: #03543d;
border-radius: 10px;
min-height: 150px;
}
.section-padding {
padding: 50px 0;
}
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
/* Two columns */
gap: 20px;
/* Space between columns */
}
/* Responsive: Stack items into 1 column on small screens */
@media (max-width: 768px) {
.grid-container {
grid-template-columns: 1fr;
/* Single column on mobile */
}
}
.content-wrap ul li {
font-size: 16px;
padding: 5px 0px;
}
.contact-info-text {
font-size: 16px;
}
.main-lg {
font-size: 20px;
line-height: 34px;
color: #000;
text-align: center;
}
button.swal2-confirm.swal2-styled {
background: #fc7b04 !important;
}
#honeypot {
position: absolute;
left: -9999px;
opacity: 0;
}
.boxes-block h4 {
color: #000;
font-size: 20px;
font-weight: 400;
font-family: "Averta SemiBold", sans-serif;
}
/* Original image styling */
.boxes-block img {
border-radius: 10px;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.boxes-block {
padding: 80px 0px;
background-color: #f2e9da;
background-image: url("../../images/catg_bg.png");
background-repeat: repeat;
background-position: center top;
}
.modocasa-foods-box {
position: relative;
}
.modocasa-foods-box .foods-overlay {
position: absolute;
/* bottom: 10px; */ /* adjust as needed */
/* left: 0; */
transform: translateX(31px) translateY(-45px) scale(1.15);
width: 109%;
z-index: 5;
pointer-events: none;
box-shadow: none;
}
@media (min-width: 1024px) {
.modocasa-foods-box .foods-overlay {
transform: translateX(28px) translateY(-66px) scale(1.08);
}
}
.modocasa-foods-box .main-image {
position: relative;
z-index: 1;
}
.products-heading {
font-family: "Bebas Neue", sans-serif;
text-transform: capitalize;
font-weight: 400;
text-align: center;
color: #03543d;
font-size: clamp(24px, 5vw, 60px);
margin: 0;
line-height: 1;
margin-bottom: 90px !important;
}
.cat-banner {
padding: 20px 0px;
background-color: #f1e9d9;
}
.cat-item img {
height: 335px;
object-fit: contain;
display: flex !important;
justify-content: center;
align-items: end;
object-position: bottom;
}
.grid-wrap {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(4, 1fr);
gap: 8px;
}
.grid-item-a {
grid-column: span 3 / span 3;
grid-row: span 4 / span 4;
}
.grid-item-b {
grid-column: span 2 / span 2;
grid-row: span 2 / span 2;
grid-column-start: 4;
}
.grid-item-c {
grid-column: span 2 / span 2;
grid-row: span 2 / span 2;
grid-column-start: 4;
grid-row-start: 3;
}
.galler-box {
padding: 120px 0px 60px 0px;
background: url(../../images/orange-bgs.png);
background-color: #f1e9d9;
}
.galler-box img {
height: 100%;
}
.cat-box {
padding: 60px 0px;
background-color: #f1e9d9;
}
.cat-box h4 {
font-family: "Averta SemiBold", sans-serif;
font-size: 20px;
}
.lg-font {
font-size: 18px !important;
}
.xl-font {
font-size: 28px !important;
}
.or-bg {
position: relative;
z-index: 2;
background: url(../../images/or-bg.png);
background-size: cover;
background-repeat: no-repeat;
background-position: top center;
padding: 70px 0px;
}
.about-wrap {
position: relative;
}
.about-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
/* height: calc(70% + 200px); or-bg ki height ka approx */
object-fit: cover;
z-index: 1;
}
.about-img2 {
position: absolute;
top: -12px;
left: 0;
width: 100%;
height: calc(70% + 185px);
object-fit: cover;
z-index: 1;
}
/* ======================== SHOP PAGE – CLEAN & RESPONSIVE ======================== */
/* Simple CSS-only solution for square containers */
.product-image {
position: relative;
width: 100%;
padding-top: 100%; /* 1:1 Aspect Ratio */
overflow: hidden;
background: #f9f9f9;
}
.product-image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain; /* Ensures entire image is visible */
padding: 20px;
transition: transform 0.5s ease;
background: white;
}
/* For images with known aspect ratios, you can add data attributes */
.product-image img[data-aspect="portrait"] {
width: auto;
height: 100%;
left: 50%;
}
.product-image img[data-aspect="landscape"] {
width: 100%;
height: auto;
top: 50%;
}
.product-card:hover .product-image img {
transform: scale(1.05); /* For portrait */
transform-origin: center center;
}
.product-card:hover .product-image img[data-aspect="landscape"] {
transform: scale(1.05);
}
.shop-container {
display: flex;
min-height: 100vh;
background: #fefaf2;
font-family: "Poppins", sans-serif;
}
/* LEFT SIDEBAR */
.shop-sidebar {
width: 280px;
background: white;
padding: 2rem 1.5rem;
box-shadow: 2px 0 15px rgba(0, 0, 0, 0.05);
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
transition: all 0.3s ease;
z-index: 1000;
border-right: 1px solid #eee;
overflow-y: auto; /* Ensures vertical scrolling if content overflows */
scrollbar-width: none; /* Hides scrollbar in Firefox */
-ms-overflow-style: none; /* Hides scrollbar in IE/Edge (legacy) */
border-radius: 20px;
}
.shop-sidebar::-webkit-scrollbar {
display: none; /* Hides scrollbar in WebKit browsers (Chrome, Safari, etc.) */
}
.shop-sidebar h5 {
color: #0f773a;
font-weight: 900;
margin-bottom: 1.5rem;
font-size: 1.4rem;
padding-left: 0.5rem;
border-left: 4px solid #ff6b35;
padding-left: 1rem;
}
.category-item {
margin-bottom: 1rem;
}
.category-main,
.subcategory,
.sub-sub {
padding: 1rem 1.2rem;
cursor: pointer;
border-radius: 10px;
transition: all 0.3s ease;
display: flex;
justify-content: space-between;
align-items: center;
user-select: none;
margin-bottom: 0.5rem;
color: #555;
font-weight: 500;
border: 1px solid transparent;
}
.category-main {
background: #f9f9f9;
font-size: 1.1rem;
color: #333;
}
.category-main:hover,
.subcategory:hover,
.filterable:hover {
background: #fff8ed;
border-color: #ffd8a8;
}
.category-main.active,
.subcategory.active,
.filterable.active {
background: #0f773a !important;
color: white !important;
font-weight: 600;
border-color: #0f773a;
box-shadow: 0 4px 12px rgba(15, 119, 58, 0.2);
}
.category-main.expandable,
.subcategory.expandable {
background: #f9f9f9;
}
.subcategory {
background: #f5f5f5;
font-size: 1rem;
margin-left: 0.5rem;
}
.flat-filterable {
background: #fafafa;
font-size: 0.95rem;
padding: 0.8rem 1.2rem;
cursor: pointer;
border-radius: 10px;
transition: all 0.3s ease;
margin-bottom: 0.5rem;
}
.filterable {
background: #fafafa;
font-size: 0.95rem;
margin-left: 1.5rem;
padding: 0.8rem 1.2rem;
cursor: pointer;
border-radius: 10px;
transition: all 0.3s ease;
margin-bottom: 0.5rem;
}
.filterable.all-products {
background: #e9f5ee;
border: 2px solid #0f773a;
margin-left: 0;
font-weight: 600;
}
.filterable.all-products.active {
background: #0f773a;
color: white;
}
.subcategories,
.sub-subcategories {
padding-left: 1rem;
display: none;
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.arrow {
font-size: 0.8rem;
transition: transform 0.3s ease;
color: #888;
}
.category-main.expanded .arrow,
.subcategory.expanded .arrow {
color: #0f773a;
transform: rotate(180deg);
}
/* MOBILE SIDEBAR */
.mobile-filter-btn {
display: none;
background: #0f773a;
color: white;
border: none;
padding: 1rem 1.5rem;
font-size: 1.1rem;
width: 100%;
text-align: left;
position: sticky;
top: 0;
z-index: 100;
border-radius: 0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.mobile-filter-btn i {
margin-right: 10px;
}
.mobile-filter-btn .hamburger {
display: inline-flex;
flex-direction: column;
justify-content: space-between;
width: 24px;
height: 18px;
margin-right: 10px;
}
.mobile-filter-btn .hamburger span {
display: block;
height: 2px;
background: white;
border-radius: 2px;
transition: all 0.3s;
}
@media (max-width: 992px) {
.shop-container {
flex-direction: column;
}
.shop-sidebar {
position: fixed;
left: -100%;
width: 100%;
max-width: 320px;
top: 0;
height: 100vh;
z-index: 1050;
padding: 1rem 1.5rem;
background: white;
box-shadow: 5px 0 25px rgba(0, 0, 0, 0.15);
}
.shop-sidebar.open {
left: 0;
animation: slideIn 0.3s ease;
}
.mobile-filter-btn {
display: flex;
align-items: center;
}
@keyframes slideIn {
from {
left: -100%;
}
to {
left: 0;
}
}
.shop-main {
width: 100%;
}
}
.close-sidebar {
background: none;
border: none;
color: #0f773a;
cursor: pointer;
font-size: 2.5rem;
line-height: 1;
padding: 0;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
/* RIGHT SIDE */
.shop-main {
flex: 1;
padding: 2rem;
background: #fefaf2;
width: calc(100% - 280px);
}
.filters-bar {
background: white;
padding: 1.5rem;
border-radius: 15px;
margin-bottom: 2rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
/* position: sticky; */
top: 0;
z-index: 10;
border: 1px solid #eee;
}
.search-box {
position: relative;
width: 100%;
}
.search-box i {
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
color: #0f773a;
font-size: 1.1rem;
}
.search-box input {
width: 100%;
padding: 16px 20px 16px 55px;
border: 2px solid #e0e0e0;
border-radius: 50px;
font-size: 1.05rem;
transition: all 0.3s;
background: #fafafa;
}
.search-box input:focus {
border-color: #0f773a;
outline: none;
background: white;
box-shadow: 0 0 0 3px rgba(15, 119, 58, 0.1);
}
/* Sort Dropdown - FIXED */
.sort-dropdown {
background: white;
border: 2px solid #e0e0e0;
border-radius: 50px;
padding: 12px 25px;
font-size: 1rem;
color: #555;
cursor: pointer;
transition: all 0.3s;
width: 100%;
max-width: 220px;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%230f773a' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 15px center;
background-size: 12px;
padding-right: 45px;
}
.sort-dropdown:focus {
border-color: #0f773a;
outline: none;
box-shadow: 0 0 0 3px rgba(15, 119, 58, 0.1);
}
/* PRODUCTS GRID */
.products-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
animation: fadeInUp 0.5s ease;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.product-card {
background: white;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
border: 1px solid #f0f0f0;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
text-align: center;
height: 100%;
display: flex;
flex-direction: column;
}
.product-card:hover {
transform: translateY(-12px) scale(1.02);
box-shadow: 0 20px 40px rgba(15, 119, 58, 0.15);
border-color: #0f773a33;
}
.product-image {
height: 260px;
overflow: hidden;
background: #f9f9f9;
position: relative;
}
.product-image img {
width: 100%;
height: 100%;
object-fit: contain;
transition: transform 0.6s ease;
}
.product-card:hover img {
transform: scale(1.1);
}
.product-info {
padding: 1.8rem 1.5rem;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.product-name {
font-size: 1.3rem;
font-weight: 700;
color: #333;
margin-bottom: 0.8rem;
line-height: 1.4;
}
.product-price {
font-size: 1.7rem;
font-weight: 900;
color: #ff6b35;
margin: 1rem 0;
}
.btn-add-cart {
background-color: #ff6b35;
color: white;
border: none;
padding: 14px 32px;
border-radius: 50px;
font-weight: bold;
font-size: 1.05rem;
cursor: pointer;
transition: all 0.3s;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: auto;
}
.btn-add-cart:hover {
background-color: #0f773a;
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(15, 119, 58, 0.3);
}
/* RESPONSIVE BREAKPOINTS - FIXED */
@media (max-width: 1200px) {
.products-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
}
@media (max-width: 992px) {
.shop-main {
width: 100%;
padding: 1rem;
}
.products-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.products-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
/* max-width: 500px; */
margin: 0 auto;
}
.filters-bar {
padding: 1.2rem;
margin-bottom: 1.5rem;
}
.search-box {
margin-bottom: 1rem;
}
.sort-dropdown {
width: 100%;
max-width: none;
}
.product-image {
height: 220px;
}
.mobile-filter-btn {
font-size: 1rem;
padding: 0.9rem 1.2rem;
}
.filters-bar .row {
flex-direction: column;
gap: 1rem !important;
}
}
@media (max-width: 480px) {
.shop-sidebar {
width: 100%;
max-width: 280px;
}
.product-card:hover {
transform: translateY(-8px);
}
.product-name {
font-size: 1.2rem;
}
.product-price {
font-size: 1.5rem;
}
.filters-bar {
padding: 1rem;
}
.products-grid {
gap: 1rem;
}
}
/* Overlay for mobile sidebar */
.sidebar-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 1040;
}
.sidebar-overlay.active {
display: block;
animation: fadeInOverlay 0.3s ease;
}
@keyframes fadeInOverlay {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.green-heading {
color: #0f773a;
font-weight: 900;
}
.orange-heading {
color: #ff6b35;
font-weight: 700;
}
/* No Results */
.no-results {
text-align: center;
padding: 4rem 2rem;
background: white;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}
.no-results i {
font-size: 4rem;
color: #ddd;
margin-bottom: 1.5rem;
}
.no-results h3 {
color: #666;
font-weight: 600;
margin-bottom: 1rem;
}
.no-results p {
color: #888;
max-width: 400px;
margin: 0 auto;
}
.latin-meals {
padding: 20px;
border: 2px solid #fff;
background-color: #f2e9da;
border-radius: 20px;
transform: translateY(90px);
}
.latin-meals p {
color: #03543d;
text-align: center;
font-size: 40px;
font-weight: 700;
}
.latin-shop {
display: flex;
justify-content: center;
}
.latin-shop a {
padding: 10px 20px;
margin-top: 20px;
background-color: #e2d2b6;
color: #03543d;
text-decoration: none;
border-radius: 10px;
font-size: 25px;
font-weight: 500;
}
.latin-shop a:hover {
background-color: #03543d;
color: #fff;
transition: 0.3s;
}
.arepas {
padding: 20px;
border: 2px solid #fff;
background-color: #f2e9da;
border-radius: 20px;
transform: scale(0.8), translateY(10px);
}
.arepas p {
color: #03543d;
text-align: center;
font-size: 30px;
font-weight: 700;
}
.arepas-shop {
display: flex;
justify-content: center;
}
.arepas-shop a {
padding: 10px 20px;
margin-top: 20px;
background-color: #e2d2b6;
color: #03543d;
text-decoration: none;
border-radius: 10px;
font-size: 25px;
font-weight: 500;
}
.arepas-shop a:hover {
background-color: #03543d;
color: #fff;
transition: 0.3s;
}
p.main-pera.summary.text-white {
text-align: justify;
}
.hero-testimonial-section {
background-color: #f2e9da;
padding: 20px;
min-height: 250px;
}
.contact-page-wrapper {
min-height: 100vh;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 0.25fr;
gap: 0;
}
.contact-section {
padding: 10px 18px;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
}
/* Backgrounds */
.contact-form-area {
background: #f2e9da;
}
.contact-info-area {
/* background: url("../../images/contactbg.png") center top; */
background-repeat: repeat-x;
background-size: cover;
background-color: #e2d4be;
color: #0f773a;
text-align: center;
}
.follow-us {
color: #e0e0e0;
text-align: center;
font-size: larger;
}
.image-area {
background-size: cover; /* fallback only */
background-position: center;
position: relative;
}
.image-area::before {
content: "";
position: absolute;
inset: 0;
}
.green-heading {
color: #0f773a;
font-weight: 900;
}
.orange-heading {
color: #ff6b35;
font-weight: 700;
}
/* ==================== FORM STYLING – EXACTLY LIKE APPROVED VERSION ==================== */
.contact-section.contact-form-area.form-main {
padding: 2rem 12% !important; /* More horizontal padding */
/* max-width: 1200px; */
margin: 0 auto;
}
.form-main {
background-repeat: repeat;
background-size: cover;
background-color: #e2d4be;
}
/* Title adjustments */
.form-main .title.mb-4 {
margin-bottom: 2rem !important;
}
.form-main .title h2.green-heading {
font-size: 4rem !important; /* Slightly smaller heading */
margin-bottom: 0.5rem;
}
.form-main .title p.orange-heading {
font-size: 1rem !important; /* Smaller paragraph */
/* max-width: 600px; */
/* margin: 0 auto; */
}
/* Form adjustments */
.form-main .form-group {
margin-bottom: 0.6rem !important; /* Reduced spacing between fields */
}
.form-main .form-group label {
font-weight: 600;
color: #333;
margin-bottom: 6px !important; /* Smaller margin */
display: block;
font-size: 0.9rem !important; /* Smaller label font */
}
.form-main .form-group label span {
color: #ff6b35;
font-size: 0.9rem;
}
/* Input field adjustments */
.form-main .form-control {
border-radius: 10px !important; /* Smaller radius */
padding: 10px 16px !important; /* Smaller padding */
font-size: 0.9rem !important; /* Smaller text */
border: 1.5px solid #ddd !important; /* Thinner border */
background-color: #fff;
box-shadow: none;
width: 100%;
height: auto !important;
}
.form-main .form-control:focus {
border-color: #0f773a !important;
outline: none;
box-shadow: 0 0 0 2px rgba(15, 119, 58, 0.1) !important; /* Smaller shadow */
}
.form-main textarea.form-control {
min-height: 100px !important; /* Smaller textarea */
resize: vertical;
padding: 12px 16px !important;
}
/* Button adjustments */
.btn-submit {
background: white;
color: #0f773a;
padding: 12px 40px !important; /* Smaller button */
border-radius: 40px !important; /* Smaller radius */
font-weight: 600 !important; /* Less bold */
font-size: 1rem !important; /* Smaller text */
border: none;
transition: all 0.3s;
cursor: pointer;
min-width: 180px;
}
.btn-submit:hover {
background: #0f773a;
color: white !important;
box-shadow: 0 6px 15px rgba(15, 119, 58, 0.3) !important; /* Smaller shadow */
transform: translateY(-2px);
}
/* Recaptcha adjustments */
.form-main .g-recaptcha {
transform: scale(0.9); /* Make recaptcha smaller */
transform-origin: left center;
}
.form-main .g-recaptcha > div > div {
width: 100% !important;
}
/* Form layout adjustments */
.form-contact .row {
margin-left: -8px !important;
margin-right: -8px !important;
}
.form-contact .col-lg-6,
.form-contact .col-12 {
padding-left: 8px !important;
padding-right: 8px !important;
}
/* Submit button row */
.form-contact .row.justify-content-center.mt-4 {
margin-top: 1.5rem !important; /* Smaller margin */
}
/* Responsive adjustments */
@media (max-width: 768px) {
.contact-section.contact-form-area.form-main {
padding: 1.5rem 4% !important;
}
.form-main .title h2.green-heading {
font-size: 1.7rem !important;
}
.form-main .title p.orange-heading {
font-size: 0.95rem !important;
padding: 0 1rem;
}
.form-main .form-control {
padding: 9px 14px !important;
font-size: 0.88rem !important;
}
.form-main .form-group label {
font-size: 0.88rem !important;
}
.btn-submit {
padding: 10px 30px !important;
font-size: 0.95rem !important;
min-width: 160px;
}
.form-main .g-recaptcha {
transform: scale(0.85);
}
}
@media (max-width: 576px) {
.contact-section.contact-form-area.form-main {
padding: 1rem 3% !important;
}
.form-contact .row {
margin-left: -5px !important;
margin-right: -5px !important;
}
.form-contact .col-lg-6,
.form-contact .col-12 {
padding-left: 5px !important;
padding-right: 5px !important;
}
.form-main .g-recaptcha {
transform: scale(0.8);
margin-bottom: 1rem !important;
}
}
/* Contact Info – Icons + Green Text */
.contact-item {
display: flex;
align-items: flex-start;
margin-bottom: 2rem;
font-size: 1.35rem;
line-height: 1.6;
}
.contact-item svg {
width: 34px;
height: 34px;
margin-right: 18px;
flex-shrink: 0;
fill: #0f773a;
}
.contact-item strong {
display: block;
margin-bottom: 6px;
font-weight: 700;
}
.contact-item a {
color: #0f773a;
text-decoration: none;
font-weight: 600;
}
.contact-item a:hover {
color: #ff6b35;
}
/* Social Links – Bottom Center of Top-Right Image */
.social-panel {
position: absolute;
bottom: 50px;
left: 50%;
transform: translateX(-50%);
text-align: center;
width: 100%;
}
.social-panel h5 {
color: white;
font-weight: 700;
margin-bottom: 15px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
font-size: 1.4rem;
}
.social-links img {
width: 58px;
/* height: 58px; */
transition: transform 0.3s;
}
.social-links img:hover {
transform: scale(1.25);
}
@media (max-width: 992px) {
.contact-page-wrapper {
grid-template-columns: 1fr;
grid-template-rows: auto auto auto auto;
}
.contact-section {
padding: 60px 40px;
}
.social-panel {
position: relative;
bottom: auto;
left: auto;
transform: none;
margin-top: 50px;
}
.social-panel h5 {
color: #0f773a;
text-shadow: none;
}
}
@media (max-width: 576px) {
.contact-section {
padding: 50px 25px;
}
.btn-submit {
width: 100%;
padding: 16px 40px;
}
}
.section-padding-top {
/* padding-top: 50px; */
padding-bottom: 50px;
}
.section-padding-order-top {
padding-top: 50px;
padding-bottom: 50px;
}
/* ==================== FINAL PERFECT MEGA MENU ==================== */
.mega-menu-li {
position: static !important;
}
.mega-menu-li .nav-link.dropdown-toggle {
position: relative;
padding-right: 1.4rem !important; /* make space for arrow */
transition: color 0.2s ease;
}
.mega-menu-li .nav-link.dropdown-toggle::after {
font-family: "bootstrap-icons" !important; /* if using bootstrap icons */
position: absolute;
right: 0.6rem;
top: 50%;
transform: translateY(-50%) rotate(0deg);
transition: transform 0.5s ease;
font-size: 0.85rem;
opacity: 0.9;
}
.mega-menu-li:hover .nav-link.dropdown-toggle::after,
.mega-menu-li .nav-link.dropdown-toggle.active::after {
transform: translateY(-50%) rotate(180deg);
transition: transform 0.5s ease-in-out;
}
/* Optional: change color on hover too */
.mega-menu-li:hover .nav-link.dropdown-toggle {
color: #c1d444 !important;
}
.mega-menu-container {
width: 78vw !important;
max-width: 1300px !important;
left: 50% !important;
transform: translateX(-50%) !important;
border: none !important;
border-radius: 16px !important;
margin-top: 10px !important;
padding: 30px 40px !important;
background: #fff !important;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.16) !important;
z-index: 1050 !important;
}
/* Explore Button */
.mega-explore-btn {
display: block;
background: transparent;
border: 2.5px solid #ff8c00;
color: #ff8c00;
padding: 12px 30px;
border-radius: 50px;
font-weight: 700;
font-size: 1.1rem;
text-align: center;
margin-bottom: 25px;
text-decoration: none !important;
transition: all 0.3s;
}
.mega-explore-btn:hover {
background: #ff8c00;
color: white !important;
}
/* Orange Category Boxes - NEVER change color */
.mega-category {
display: flex;
align-items: center;
background: #ff8c00;
color: white !important;
padding: 16px 20px;
margin-bottom: 14px;
border-radius: 12px;
font-weight: 700;
font-size: 1.1rem;
text-decoration: none !important;
transition: all 0.3s;
}
.mega-category img {
width: 44px;
height: 44px;
margin-right: 16px;
object-fit: contain;
}
.mega-category:hover {
background: #e67e22;
color: white !important;
transform: translateX(6px);
}
/* Force white text - overrides any :visited or browser default */
.mega-category,
.mega-category:link,
.mega-category:visited,
.mega-category:hover,
.mega-category:active {
color: white !important;
text-decoration: none !important;
}
/* Dark green headings */
.mega-heading {
color: #0f4c2a;
font-weight: 700;
font-size: 2.5rem;
margin-bottom: 14px;
padding-bottom: 12px;
border-bottom: 4px solid #0f4c2a;
display: inline-block;
}
/* Subcategory links */
.mega-links a {
display: block;
color: #0f4c2a;
text-decoration: none;
font-size: 1.05rem;
padding: 8px 0;
transition: color 0.3s;
}
.mega-links a:hover {
color: #ff8c00;
}
/* Mobile fix */
@media (max-width: 991px) {
.mega-menu-container {
width: 100% !important;
border-radius: 0 !important;
padding: 20px !important;
transform: none !important;
left: 0 !important;
}
}
/* ==================== GLASSMORPHISM SEARCH BOX ==================== */
.search-box-blog {
display: flex;
justify-content: center;
}
/* Glass container */
.search-box-blog .form {
display: flex; /* IMPORTANT */
align-items: center;
width: 100%;
max-width: 520px;
border-radius: 48px;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 6px 40px rgba(0, 0, 0, 0.12);
/* border: 1px solid rgba(255, 255, 255, 0.4); */
padding: 6px;
gap: 6px;
}
/* Input */
.search-box-blog input {
flex: 1;
background: transparent; /* glass effect */
border: none;
padding: 14px 18px;
font-size: 18px;
outline: none;
color: white;
border-radius: 10px;
}
/* Placeholder */
.search-box-blog input::placeholder {
color: white;
}
/* Button */
.search-box-blog .button {
background: transparent;
border: none;
color: white;
padding: 18px 29px;
border-radius: 48px;
cursor: pointer;
transition: all 0.3s ease;
}
/* Hover */
.search-box-blog .button:hover {
}
/* Icon */
.search-box-blog .button i {
font-size: 24px;
}
.search-box-blog .button i:hover {
color: #03543d;
transition: color 0.3s ease;
}
/* Base image styles */
.product-card .img-wrap {
position: relative;
width: 100%;
height: 240px;
overflow: hidden;
background: #f9f9f9;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
}
.product-card .product-img,
.product-card .img-wrap img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
padding: 12px;
box-sizing: border-box;
transition: transform 0.4s ease;
}
/* When there IS a second (hover) image */
.product-card .hover-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
padding: 12px;
opacity: 0;
transition: opacity 0.4s ease;
}
/* Hover behavior */
.product-card:hover .product-img {
transform: scale(1.08);
/* slight zoom effect */
}
.product-card:hover .hover-img {
opacity: 1;
}
/* When there is NO second image → only show zoom on the main image */
.product-card:not(:has(.hover-img)) .product-img {
transition: transform 0.4s ease;
}
.product-card:not(:has(.hover-img)):hover .product-img {
transform: scale(1.12);
/* a bit stronger zoom when no alternative image */
}
.description,
.single-des {
margin: 0 auto;
padding: 2rem 1.5rem;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
border: 3px solid #f0f0f0;
}
.description p,
.single-des p {
font-size: 1.05rem;
line-height: 1.85;
color: #03553e;
/* margin-bottom: 1.6rem; */
}
.description strong,
.single-des strong {
color: #03553e;
font-weight: 600;
}
/* Highlight important parts */
.description blockquote,
.single-des blockquote {
border-left: 4px solid #f7941d;
padding-left: 1.4rem;
margin: 2rem 0;
font-style: italic;
color: #555;
}
/* Better spacing between sections */
.tab-single > .row > .col-12 > .single-des {
padding: 1.5rem 0;
border-top: 1px solid #eee;
}
/* Add padding-left to all unordered lists in the product detail page */
.product-des ul,
.product-info ul,
.comment-review ul,
.ratting-main ul {
padding-left: 40px !important;
}
/* Specifically for size list */
.product-buy .size ul {
padding-left: 20px !important;
}
/* Specifically for rating stars */
.rating-main ul.rating,
.ratting-main .single-rating ul.rating {
padding-left: 0 !important;
}
/* Specifically for review rating stars in the form */
.rating_box .star-rating__wrap {
padding-left: 0 !important;
}
/* Specifically for the review stars in the rating section */
.single-rating .ratings ul.rating {
padding-left: 0 !important;
}
/* Specifically for tabs navigation */
.nav-main ul.nav-tabs {
padding-left: 0 !important;
}
/* Specifically for product slider thumbnails */
.flexslider-thumbnails ul.slides {
padding-left: 0 !important;
}
/* Specifically for the color options (if enabled) */
.color ul {
padding-left: 0 !important;
}
/* Specifically for the social share list */
.default-social ul {
padding-left: 0 !important;
}
/* Rating */
.rating_box {
display: inline-flex;
}
.star-rating {
font-size: 0;
padding-left: 10px;
padding-right: 10px;
}
.star-rating__wrap {
display: inline-block;
font-size: 1rem;
}
.star-rating__wrap:after {
content: "";
display: table;
clear: both;
}
.star-rating__ico {
float: right;
padding-left: 2px;
cursor: pointer;
color: #f7941d;
font-size: 16px;
margin-top: 5px;
}
.star-rating__ico:last-child {
padding-left: 0;
}
.star-rating__input {
display: none;
}
.star-rating__ico:hover:before,
.star-rating__ico:hover ~ .star-rating__ico:before,
.star-rating__input:checked ~ .star-rating__ico:before {
content: "\F005";
}
.WidgetTitle__Inner-sc-c581efe-1.jdWHYA {
display: none;
}
.selection-bulk {
margin-top: 12px;
padding: 12px 16px;
background-color: #fff7e6; /* soft warning background */
border-left: 4px solid #c44b51;
color: #9e4950;
font-size: 14px;
border-radius: 6px;
}
.selection-bulk::before {
content: "Note:";
font-weight: 600;
margin-right: 6px;
}
.contact-link {
text-decoration: none;
}
.contact-link:hover {
text-decoration: underline;
}
/* checkout css */
li.shipping {
display: inline-flex;
width: 100%;
font-size: 14px;
}
li.shipping .input-group-icon {
width: 100%;
margin-left: 10px;
}
.input-group-icon .icon {
position: absolute;
left: 20px;
top: 0;
line-height: 40px;
z-index: 3;
}
.form-select {
height: 30px;
width: 100%;
}
.form-select .nice-select {
border: none;
border-radius: 0px;
height: 40px;
background: #f6f6f6 !important;
padding-left: 45px;
padding-right: 40px;
width: 100%;
}
.list li {
margin-bottom: 0 !important;
}
.list li:hover {
background: #f7941d !important;
color: white !important;
}
.form-select .nice-select::after {
top: 14px;
}
#zip-warning {
width: 100%;
text-align: justify;
padding: 10px;
}
.StripeElement {
box-sizing: border-box;
height: 40px;
padding: 10px 12px;
border: 1px solid #ced4da;
border-radius: 4px;
background-color: white;
box-shadow: 0 1px 3px 0 #e6ebf1;
transition: box-shadow 150ms ease;
}
.StripeElement--focus {
box-shadow: 0 1px 3px 0 #cfd7df;
}
.StripeElement--invalid {
border-color: #fa755a;
}
.StripeElement--webkit-autofill {
background-color: #fefde5 !important;
}
#payment-form {
max-width: 400px;
margin: 0 auto;
}
button {
background-color: #5469d4;
color: white;
border: none;
padding: 10px 15px;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
.blog-sec {
min-height: 60vh;
height: auto;
position: relative;
padding: 4rem 1rem;
}
.privacy-sec {
position: relative;
min-height: 60vh; /* or 70vh / 80vh depending on how tall you want it */
height: auto;
}
.privacy-sec .container {
height: 100%; /* makes container fill the full height of section */
min-height: inherit; /* important when min-height is used on parent */
}
/* Heading */
.privacy-heading {
font-family: "Bebas Neue", sans-serif;
text-transform: capitalize;
font-weight: 400;
color: #fadbb9;
font-size: clamp(3rem, 10vw, 9rem);
line-height: 1;
margin: 0;
/* Optional: subtle text shadow for better contrast on busy backgrounds */
/* text-shadow: 0 3px 12px rgba(0, 0, 0, 0.6); */
}
/* Mobile adjustments */
.delivery-truck-icon {
position: absolute;
top: 5%;
right: 5%;
width: 165px;
height: auto;
opacity: 0.85; /* subtle overlay feel */
z-index: 1;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}
.arrow-turn-icon {
position: absolute;
top: 5%;
right: 5%;
width: 130px;
height: auto;
opacity: 0.85; /* subtle overlay feel */
z-index: 1;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}
/* Responsive adjustments */
@media (max-width: 992px) {
.delivery-truck-icon {
width: 90px;
top: 15%;
right: 8%;
}
.arrow-turn-icon {
width: 90px;
top: 15%;
right: 8%;
}
}
@media (max-width: 768px) {
.privacy-sec {
min-height: 50vh;
}
.privacy-heading {
font-size: clamp(2.8rem, 12vw, 6.5rem);
}
.delivery-truck-icon {
width: 70px;
top: 12%;
right: 10%;
}
.arrow-turn-icon {
width: 70px;
top: 12%;
right: 10%;
}
}
@media (max-width: 576px) {
.delivery-truck-icon {
width: 60px;
top: 10%;
right: 12%;
}
.arrow-turn-icon {
width: 60px;
top: 10%;
right: 12%;
}
}
/* Price Toggle Styles */
.price-toggle-wrapper {
display: inline-block;
margin-right: 15px;
}
.price-toggle {
display: flex;
align-items: center;
gap: 10px;
background: #f5f5f5;
padding: 5px 10px;
border-radius: 30px;
border: 1px solid #e0e0e0;
}
.toggle-label {
font-size: 14px;
font-weight: 500;
color: #666;
transition: color 0.3s ease;
}
.toggle-label.active {
color: #03553e;
font-weight: 600;
}
.switch {
position: relative;
display: inline-block;
width: 50px;
height: 24px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: 0.4s;
}
.slider:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 4px;
bottom: 4px;
background-color: white;
transition: 0.4s;
}
input:checked + .slider {
background-color: #03553e;
}
input:focus + .slider {
box-shadow: 0 0 1px #03553e;
}
input:checked + .slider:before {
transform: translateX(26px);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.email-link {
color: #03553e;
font-weight: bold;
text-decoration: underline;
}
.wholesale-badge {
display: inline-block;
background: #03553e;
color: white;
font-size: 12px;
padding: 2px 8px;
border-radius: 4px;
margin-left: 8px;
}
.product-price-info {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 5px;
}
.original-price {
text-decoration: line-through;
color: #999;
font-size: 14px;
}
.wholesale-price {
color: #03553e;
font-weight: bold;
}
.payment-info {
padding-inline: 25px;
}
.payment-icons img {
background: #fff;
/* padding-inline: 10px;
padding-block: 5px; */
border-radius: 6px;
border: #0000000a solid 1px;
width: 50px;
}
.paypal-btn {
display: inline-flex; /* Keeps everything in ONE clean line */
align-items: center; /* Perfect vertical alignment */
gap: 8px; /* Space between logo, text, and PayPal wordmark */
background-color: #ffc439; /* Official PayPal yellow */
color: #003087; /* Dark blue text color */
padding: 12px 32px; /* Matches official button padding */
border-radius: 6px; /* Rounded corners like the image */
text-decoration: none;
font-family: "Helvetica Neue", Arial, sans-serif;
font-size: 17px;
font-weight: 700;
border: 1px solid #e5a600; /* Subtle border for depth */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Light shadow like official */
transition: all 0.2s ease;
}
.paypal-btn:hover {
background-color: #f4b731; /* Slightly brighter on hover (real PayPal effect) */
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}
.pp-logo {
height: 26px; /* Matches official PayPal "P" size */
width: auto;
}
.pp-text {
height: 24px; /* Matches official "PayPal" wordmark size */
width: auto;
}
.secure-text {
font-size: 15px;
color: #555;
}
.powered-text {
font-size: 16px;
color: #333;
}
.or-divider {
display: flex;
align-items: center;
text-align: center;
}
.or-divider::before,
.or-divider::after {
content: "";
flex: 1;
border-bottom: 1px solid #ddd;
}
.or-divider span {
padding: 0 10px;
color: #777;
font-weight: 500;
}
.paypal-btn {
display: block;
background: #ffc439;
padding: 14px;
border-radius: 6px;
transition: 0.3s;
}
.paypal-btn:hover {
background: #f5b800;
}
/* Ensure modals are perfectly centered */
.modal-dialog-centered-horizontal {
display: flex;
align-items: center;
justify-content: center;
min-height: calc(100vh - 60px);
margin: 0 auto;
}
.modal.show .modal-dialog-centered-horizontal {
transform: none;
}
/* Ensure modal doesn't exceed viewport */
.modal-dialog-centered-horizontal .modal-content {
max-height: 90vh;
overflow-y: auto;
margin: 20px;
}
/* For mobile devices */
@media (max-width: 576px) {
.modal-dialog-centered-horizontal {
min-height: calc(100vh - 20px);
margin: 10px;
}
.modal-dialog-centered-horizontal .modal-content {
margin: 0;
max-height: calc(100vh - 20px);
}
}
/* Backdrop styling */
.modal-backdrop.show {
opacity: 0.7;
}
.frozen-banner-sec {
background-color: #03553e;
color: white;
padding: 150px;
text-align: center;
min-height: screen;
}