/**
 * Theme Name:     GeneratePress Child
 * Author:         Tom Usborne
 * Template:       generatepress
 * Text Domain:	   generatepress-child
 * Description:    GeneratePress is a lightweight WordPress theme built with a focus on speed and usability. Performance is important to us, which is why a fresh GeneratePress install adds less than 10kb (gzipped) to your page size. We take full advantage of the block editor (Gutenberg), which gives you more control over creating your content. If you use page builders, GeneratePress is the right theme for you. It is completely compatible with all major page builders, including Beaver Builder and Elementor. Thanks to our emphasis on WordPress coding standards, we can boast full compatibility with all well-coded plugins, including WooCommerce. GeneratePress is fully responsive, uses valid HTML/CSS, and is translated into over 25 languages by our amazing community of users. A few of our many features include 60+ color controls, powerful dynamic typography, 5 navigation locations, 5 sidebar layouts, dropdown menus (click or hover), and 9 widget areas. Learn more and check out our powerful premium version at https://generatepress.com
 */


.header {
	background-color: #004C75;
}

.grid-container-custom, .grid-container-custom-menu {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 1200px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

.grid-container {
	padding: 0 20px;
}
.top-bar {
	padding: 10px 0;
	color: white;
	background: red;
}

.top-bar .left-section {
	display: flex;
	align-items: center;
}

.top-bar .left-section span {
	font-size: 14px;
}

.top-bar .right-section a {
	color: white;
	text-decoration: none;
	font-size: 14px;
	margin-left: 20px;
}

.custom-logo-link img{
    height: auto !important;
    max-width: 35%;
}

.main-header {
	padding: 15px 0;
}

.main-header nav ul {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 0;
	padding: 0;
}

header nav ul li a {
  position: relative;
  color: white;
  text-decoration: none;
  font-size: 16px;
  display: inline-block; /* ensures underline matches text width */
  padding-bottom: 3px;   /* space for underline */
}

header nav ul li a:hover{
  
  color: white !important;
  
}
header nav ul li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%; /* same width as text */
  height: 2px; /* underline thickness */
  background-color: white; /* underline color */
  transform: scaleX(0);
  transform-origin: left; /* animate from left side */
  transition: transform 0.5s ease;
}

header nav ul li a:hover::after {
  transform: scaleX(1);
}

/* keep underline on active/current menu item */
header nav ul li.current-menu-item > a::after,
header nav ul li.current_page_item > a::after,
header nav ul li.current-menu-ancestor > a::after {
  transform: scaleX(1);
}
.hamburger-menu {
	display: none;
	color: white;
	font-size: 24px;
	cursor: pointer;
}

.right-section {
	display: flex;
	align-items: center;
	gap: 15px;
}

.right-section a {
	color: white;
	font-size: 18px;
	display: flex;
	align-items: center;
	text-decoration: none;
}

.right-section a:hover {
	color: #ffb700;
}

.right-section .dashicons-cart {
	font-size: 22px;
}

.sign-in-btn{
    padding: 5px 15px;
    background: red;
    border-radius: 5px;
}
.right-section .dashicons-whatsapp,
.right-section .dashicons-facebook,
.right-section .dashicons-instagram {
	font-size: 20px;
}

.right-section .dashicons-whatsapp {
	color: #25D366;
}

.right-section .dashicons-facebook {
	color: #1877f2;
}

.right-section .dashicons-instagram {
	color: #C13584;
}

.right-section .dashicons-whatsapp:hover {
	color: #128C7E;
}

.right-section .dashicons-facebook:hover {
	color: #0062cc;
}

.right-section .dashicons-instagram:hover {
	color: #e1306c;
}

/* General Footer Styles */
.site-footer {
    background-color: #ffffff;
    color: #333;
    padding: 50px 10px;
    font-family: Arial, sans-serif;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0px 20px;
}

.footer-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px; /* Adds space between columns */
}

.footer-column {
    flex: 1 1 calc(20% - 20px); /* Adjust width to prevent overlapping */
    min-width: 180px;
    margin-bottom: 20px; /* Adds spacing at the bottom for proper alignment */
}

.footer-column h4 {
    font-size: 16px;
    margin-bottom: 10px;
    font-weight: bold;
}

.footer-column ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-column ul li {
    margin-bottom: 8px;
}

.footer-column ul li a {
    color: #004C75;
    text-decoration: none;
    font-size: 14px;
}

.footer-column ul li a:hover {
    text-decoration: underline;
}

.contact-us p {
    margin: 8px 0;
    font-size: 14px;
}

.app-links img {
    width: 120px;
    margin-right: 10px;
}

.footer-bottom {
    text-align: center;
    font-size: 12px;
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px solid #ddd;
}

/* Fixing Misalignment and Spacing */
.site-footer {
    overflow: hidden; /* Prevents overflow issues */
}

.footer-container {
    display: flex;
    flex-direction: column; /* Ensures proper stacking for all elements */
}


.container {

	max-width: 1200px;
	margin: 0 auto;
}

.section-title {
	font-size: 2rem;
	text-align: center;
	margin-bottom: 20px;
	color: #333;
}

/* Popular Categories */
.popular-categories {
	background-color: #f9f9f9;
	padding: 40px 0;
}

.categories-flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 20px;
}

.category-item {
	flex: 1 1 calc(33.33% - 20px);
	text-align: center;
	background: #fff;
	padding: 15px;
	border: 1px solid #ddd;
	border-radius: 8px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s;
}

.category-item img {
	width: 100%;
	height: 180px;
	object-fit: cover;
	border-radius: 5px;
}

.category-item h3 {
	font-size: 1.2rem;
	color: #444;
	margin-top: 10px;
}

.category-item:hover {
	transform: translateY(-5px);
}

/* Featured Products */
.featured-products {
	padding: 40px 0;
}

.products-flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 20px;
}

.product-item {
	flex: 1 1 calc(25% - 20px);
	text-align: center;
	background: #fff;
	padding: 15px;
	border: 1px solid #ddd;
	border-radius: 8px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.product-item img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	border-radius: 5px;
}

.product-item h3 {
	font-size: 1.1rem;
	color: #333;
	margin: 10px 0;
}

.product-item .price {
	color: #0073aa;
	font-size: 1rem;
	font-weight: bold;
	margin-bottom: 10px;
}

.add-to-cart {
	display: inline-block;
	padding: 10px 20px;
	background-color: #0073aa;
	color: #fff;
	border-radius: 5px;
	text-decoration: none;
}

.add-to-cart:hover {
	background-color: #005a87;
}

.hamburger-menu {
    display: none;
}

.main-header .menu-container {
    display: flex;
}

/* Shahin's code */
.top-bar {
    background-color: #0078ad;
}


.quantity .input-text{
    padding: 6px 15px;
    border-radius: 5px;
}
/* Shahin's code */

@media (max-width: 1024px) {
    .hamburger-menu {
        display: block;
        margin-left: auto;
    }

    .main-header .menu-container {
        display: none;
    }
    
    .sign-in-btn{
    display: none !important;
}

.right-section .dashicons-cart {
	margin-right: 20px;
}
    
 /*   .grid-container-custom {*/
	/*	align-items: flex-start; */
	/*	flex-direction: column;  */
	/*}*/

    /*.main-header .menu-container.active {*/
    /*    display: block;*/
    /*    position: absolute;*/
    /*    top: 0%;*/
    /*    left: 0;*/
    /*    width: 100%;*/
    /*    background-color: #004C75;*/
    /*    z-index: 1000;*/
    /*}*/
    
    .grid-container-custom-menu {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin: 0 auto;
	padding: 0 20px;
}

    .main-header nav ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 10px;
    }

    .main-header nav ul li {
        width: 100%;
    }

    .main-header nav ul li a {
        display: block;
        width: 100%;
        padding: 10px 20px;
        color: white;
        text-align: left;
    }
}

.overlay-full-work {
    display: none; /* Initially hidden */
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent background */
    z-index: 9999;
}

.overlay-full-work .lightbox-content {
    position: relative;
    width: 80%;
    height: 80%;
    margin: auto;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
}

#closeLightbox {
    position: absolute;
    top: 10px;
    right: 20px;
    color: #fff;
    font-size: 30px;
    cursor: pointer;
}


@media (max-width: 768px) {
    .hamburger-menu {
        display: block;
    }
}


/* Responsive Design */
@media (max-width: 1024px) {
	.category-item, .product-item {
		flex: 1 1 calc(50% - 20px);
	}
}

@media (max-width: 768px) {
	.category-item, .product-item {
		flex: 1 1 calc(100% - 20px);
	}
}


@media (max-width: 768px) {
    .footer-flex {
        flex-direction: column; /* Stacks the columns vertically */
        align-items: flex-start;
    }

    .footer-column {
        flex: 1 1 100%; /* Full width for small screens */
        margin-bottom: 20px; /* Adds spacing between stacked columns */
    }

    .app-links img {
        width: 100px; /* Reduces size for smaller screens */
    }
}

/* Alignment Fix for Columns */
.footer-column h4 {
    margin-bottom: 10px;
    color: #222;
    font-size: 16px;
    text-transform: uppercase;
    padding-bottom: 5px;
}


@media (max-width: 768px) {
	/*.grid-container-custom {*/
	/*	flex-direction: column;*/
	/*}*/

     .custom-logo-link img {

    max-width: 23%;
}

    .grid-container-custom, .grid-container-custom-menu {
	padding: 0px;
}
	.main-header .menu-container {
		display: none;
		width: 100%;
		margin: 0 auto;
	}
	
	.top-bar .left-section {
	display: flex;
	flex: 2;
   }

.top-bar .left-section {
	flex: 2;
}

	.main-header .menu-container.active {
		display: block;
	}

	.hamburger-menu {
		display: block;
		margin-left: auto;
	}
	
	.owl-carousel .slider-item img {
            width: 100%;
            height: 200px;
            display: block;
            object-fit: cover;
            border-radius: 8px;
            margin-top: 20px;
        }
    
        .homepage-thumbnails .thumbnail-item img {
            width: 100%;
            height: auto;
            border-radius: 8px; /* Adds rounded corners */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Adds smart box shadow */
            transition: transform 0.3s ease, box-shadow 0.3s ease; /* Adds smooth hover effect */
        }
}




/* ---------------------------
   HAMBURGER MENU + NAVIGATION
---------------------------- */

/* Hamburger Menu */
.hamburger-menu {
    display: none; /* hidden by default on large screens */
    flex-direction: column;
    justify-content: space-around;
    height: 30px;
    width: 30px;
    cursor: pointer;
}

.hamburger-menu span {
    display: block;
    height: 3px;
    width: 100%;
    background-color: #fff !important;
    border-radius: 3px;
    transition: all 053s ease;
}

/* Hide bars when active */
.hamburger-menu.active span {
    display: none;
}

/* Show cross instead */
.hamburger-menu.active::before {
    content: "✕"; /* or "\00d7" */
    font-size: 28px;
    color: #fff;
    line-height: 1;
}

/* Menu Container */
.menu-container {
    display: flex; /* visible on desktop */
    justify-content: center;
    align-items: center;
}

.main-menu {
    list-style: none;
    display: flex;
    gap: 15px;
    margin: 0;
    padding: 0;
}

.main-menu li a {
    text-decoration: none;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    padding: 5px 10px;
    position: relative;
    transition: color 0.3s ease;
}

/* Modern underline hover effect */
.main-menu li a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0;
    height: 2px;
    background-color: #fff;
    transition: width 0.3s ease;
}
.main-menu li a:hover {
    color: #fff;
}
.main-menu li a:hover::after {
    width: 100%;
}

/* Responsive: show hamburger + dropdown */
@media (max-width: 1024px) {
    .menu-container {
        display: none; /* hidden by default on mobile */
        position: absolute;
        top: 100px;
        left: 0;
        width: 100%;
        background-color: #fff;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        z-index: 1000;
    }
    .top-bar .left-section {
	flex: 2;
}

    .menu-container.active {
        display: block; /* show when active */
    }

    .main-menu {
        flex-direction: column;
        margin: 0;
        padding: 0;
    }

    .main-menu li {
        width: 100%;
        text-align: left;
    }

    .main-menu li a {
        display: block;
        padding: 10px 20px;
        text-decoration: none;
        color: #333;
        border-bottom: 1px solid #ddd;
        transition: background 0.3s ease;
    }

    .main-menu li a:hover {
        background-color: #f4f4f4;
    }

    .main-menu li a::after {
        background-color: #333; /* underline in dark on mobile */
    }

    .hamburger-menu {
        display: flex; /* show on mobile */
    }
}

@media (min-width: 1024px) {
    .hamburger-menu {
        display: none; /* hide hamburger on desktop */
    }
}

/* ---------------------------
   HEADER LAYOUT
---------------------------- */
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
}

.left-section a img {
    height: 40px; /* Adjust logo size */
}

.right-section a {
    margin-left: 15px;
    color: #333;
    text-decoration: none;
}

/* ---------------------------
   CONTACT PAGE
---------------------------- */
.contact-us-container {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.contact-us-container h1, 
.contact-us-container h2 {
  color: #2d89ef;
  margin-bottom: 10px;
}

.contact-us-container p {
  margin-bottom: 15px;
}

/* Hero Section */
.contact-hero {
  text-align: center;
  margin-bottom: 30px;
}

.contact-hero h1 {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.contact-hero p {
  max-width: 800px;
  margin: 0 auto;
}

/* Contact Details */
.contact-details {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 30px;
}

.contact-column {
  flex: 1;
  min-width: 300px;
  background: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.social-icons {
  display: flex;
  gap: 10px;
}

.social-icon {
  display: inline-block;
  background: #2d89ef;
  color: #fff;
  padding: 8px 12px;
  border-radius: 5px;
  text-decoration: none;
}

.social-icon:hover {
  background: #1b5eaa;
}

/* Map + Form */
.map-and-form {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.map-container, 
.form-container {
  flex: 1;
  min-width: 300px;
}

iframe {
  border-radius: 8px;
}

/* Contact Form */
.wpcf7 textarea {
  height: 100px;
}

/* ---------------------------
   ABOUT PAGE
---------------------------- */
.about-us-container {
  font-family: Arial, sans-serif;
  color: #333;
  line-height: 1.8;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.about-us-container h1,
.about-us-container h2 {
  color: #2d89ef;
  margin-bottom: 15px;
  text-align: center;
}

.about-us-container h1 {
  font-size: 2.5rem;
  margin-bottom: 20px;
}

.about-us-container h2 {
  font-size: 2rem;
  margin-bottom: 10px;
}

.about-us-container p {
  margin-bottom: 20px;
  text-align: justify;
}

.about-section {
  margin-bottom: 40px;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* List Styling */
.about-section ul {
  padding-left: 20px;
  margin-left: 0px;
}

.about-section ul li {
  margin-bottom: 10px;
  font-size: 16px;
}

.about-section ul li strong {
  color: #2d89ef;
}

/* Responsive About */
@media (max-width: 768px) {
  .about-us-container h1 {
    font-size: 2rem;
  }

  .about-us-container h2 {
    font-size: 1.5rem;
  }

  .about-section {
    padding: 15px;
  }
}