/* =====================================
Template Name: 	Ayushfit.
Description:Buy herbal medicines at Ayushfit, your trusted herbal specialist.
Version:	1.1
========================================*/   
/*[ CSS Table of contents ]
* Global CSS
* Scroll up CSS
* Header CSS
    + Topbar
    + Logo
    + Widget
    + Main Menu
    
* Slider Section CSS
* Doctor Section CSS
* Fun Facts Section CSS NOT DONE
* Advice Section CSS
* Ingredient Section CSS NOT DONE
* Footer CSS
* Muscle Section CSS
* Certification Section CSS
* Guarantee Section CSS
* Testimonial Section CSS
* Feedback Section CSS
* Contact Us CSS
* Product Card Wrapper CSS
* About Us CSS


* Feautes CSS
* Fun Facts CSS
* Why Choose CSS
* Call to Action CSS
* Portfolio CSS
    + Portfolio Single CSS
* Services CSS
* Testimonials CSS
* Departments CSS
* Pricing Table CSS
* Clients CSS
* Team CSS
    + Single Team
* Blog CSS
    + Latest Blog CSS
    + Blog Single CSS
    + Blog Sidebar CSS
* Appointment CSS
* Login CSS
* Register CSS
* Faq CSS
* Contact Us CSS
* Error 404 CSS
* Mail Success CSS
* Newsletter CSS
* Doctor Calendar CSS
* About Us CSS
* Footer CSS
========================================*/ 

/*=============================
	Global CSS 
===============================*/
body {
    
    font-weight: 400;
    font-size: 14px;
    color: #888;
    line-height: 1.5;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

/*=============================
    Scroll Up Button Custom Styles
===============================*/

#scrollUp {
    
    bottom: 15px;
    right: 15px;
    padding: 0; /* Remove padding */
    background: #FFEB3B;
    color: black;
    font-size: 25px;
    width: 45px;
    height: 45px;
    text-align: center;
    line-height: 50px; /* Centers the icon vertically */
    border-radius: 50%; /* Makes the button round */
    box-shadow: 0px 0px 10px #00000026;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center; /* Ensures the icon is centered horizontally and vertically */
    transition: all 0.3s ease;
}

#scrollUp:hover {
    background: #2C2D3F;
}



/* ===================
   Header Styles
==================== */

/* Topbar */
.header .topbar {
    background-color: #fff;
    border-bottom: 1px solid #eee;
    padding: 15px 0;
}

/*Top Right Side Announcement Bar  */ 
.header .bounce {
    height: 40px;
    overflow: hidden;
    background: #fdfdfd;
    width: 70%; /* Set the width of the announcement to 70% of the screen width */
    margin: 0 auto; /* Center the announcement bar horizontally */
}

.header .bounce p {
    position: absolute;
    width: 100%;
    margin: 0;
    line-height: 40px;
    text-align: center;
    animation: bouncing-text 5s linear infinite alternate;
    font-size: 20px;
    font-weight: bold;
    color: #141413;
}

/* Bouncing Text Animation */
@keyframes bouncing-text {
    0% {
        transform: translateX(50%);
    }
    100% {
        transform: translateX(-70%);
    }
}

/*Top Left Side  Contact section */
.header .top-contact {
    list-style: none;
    padding: 0;
    margin: 0;
    float: right;
}

.top-contact li {
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #2c2d3f;
    margin-right: 25px;
}

/* WhatsApp icon and link styling */
.top-contact li i {
    font-size: 20px;  /* Adjust icon size */
    color: #25d366;   /* WhatsApp green color */
    margin-right: 10px;  /* Space between icon and text */
}

.top-contact li a {
    color: #333;
    text-decoration: none;  /* Remove underline */
    font-weight: 500;
    margin-left: 10px;
    display: inline-flex;
}

/* Hover effect for the link */
.top-contact li a:hover {
    color: #1a76d1;  /* Change color to WhatsApp green */
    
}



/* Logo */
.header .logo img{
    width: 10px;
    height: auto;
    
}

/* Main Menu Navigation Styling */
.main-menu .nav.menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
}
/* Navigation List Item Styling */
.main-menu .nav.menu li {
    position: relative;
}

/* Navigation Link Styling */
.main-menu .nav.menu li a {
    font-size: 16px;
    color: #333;
    text-decoration: none;
    padding: 10px 20px;
    display: block;

/* Smooth transition for all effects */
    transition: color 0.3s, background-color 0.3s; 
    font-weight: 500; 
}


/* Hover Effect for Links */
.main-menu .nav.menu li a:hover {
    background-color: #f2f2f2; /* background on hover */
    color: #1a76d1; 
    border-radius: 5px;  /* Optional: Add a slight border-radius for a rounded effect */
}

.header .nav li:hover a::before {
    opacity: 1;
    width: 100%;
    visibility: visible;
}


/* start Button Styling */
.get-quote .btn {
    background-color: #1a76d1;
    color: #fff;
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 10px;
    font-weight: bold;
    transform: background-color 0.3s ease;  
    position: relative; 
}

.get-quote .btn:hover {
    background-color: #166bb7;

    color: #fff;  /* Text color stays white */
    transform: scale(1.05);  /* Slightly grow the button */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  /* Add subtle shadow */
    cursor: pointer;
}


/* Add a subtle scale effect on active (clicked) state */
.get-quote .btn:active {
    transform: scale(0.98);  /* Slightly shrink the button when clicked */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);  /* Make the shadow slightly stronger on click */
}

/* Optional: Smooth transition for text color */
.get-quote .btn:hover {
    color: #fff;
}
/* End Button Styling */



/* Navigation */
.header .navbar {
    background: none;
    box-shadow: none;
    border: none;
    margin: 0;
    height: 0;
    min-height: 0;
}

.header .nav li {
    margin-right: 15px;
    float: left;
}

.header .nav li:last-child {
    margin: 0;
}

.header .nav li a {
    color: #2C2D3F;
    font-size: 14px;
    font-weight: 500;
    text-transform: capitalize;
    padding: 25px 12px;
    position: relative;
    display: inline-block;
}

/* Active Navigation Item (Underline Effect) */
.header .nav li.active a {
    color: #1A76D1;
}


/* Under Effect after mouse on botton */
.header .nav li a::before {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%; /*  under the middle bar size*/
    background: #1A76D1;
    opacity: 0; 
    visibility: visible;
    transition: all 0.4s ease;
}

/* Dropdown Menu (for nested menu items) */
.header .nav li .dropdown {
    background: #fff;
    width: 220px;
    position: absolute;
    left: -20px;
    top: 100%;
    z-index: 999;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
    transform-origin: 0 0 0;
    transform: scaleY(0.2);
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
}
/* Dropdown Hover */
.header .nav li:hover .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}
/* Dropdown Item Styling */
.header .nav .dropdown li {
    margin: 0;
    border-bottom: 1px dashed #eee;
}

.header .nav .dropdown li:last-child {
    border: none;
}

.header .nav .dropdown li a {
    padding: 12px 15px;
    color: #666;
    display: block;
    font-weight: 400;
    background: transparent;
    transition: all 0.2s ease;
}
/* Dropdown Item Hover */
.header .nav .dropdown li:hover a {
    color: #1A76D1;
    
}


/* =========================
   Slider Styles
========================== */

/* General Slider Styles */
.slider {
    position: relative;
    overflow: hidden;  /* Ensures content doesn't overflow the slider */
}

.slideshow-container {
    position: relative;
}

/* Styling the individual slider container */
.single-slider {
    position: relative;
    width: 100%;
    height: 600px;  /* Set the height of the slider */
}

/* Make the image responsive and cover the entire slider area */
.single-slider img {
    width: 100%;  /* Makes the image take up the full width of the container */
    height: 100%; /* Makes the image fill the container height */
    object-fit: cover; /* Ensures the image covers the area while maintaining aspect ratio */
    object-position: center  ; /* Centers the image */
}

/* Styling for text container */
.single-slider .container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;  /* Ensure text stays on top of the image */
}

/* Row and Column setup */
.single-slider .row {
    margin-left: 0;
    margin-right: 0;
}

.single-slider .col-lg-7 {
    padding: 0;
}

/* Text Styling */
.single-slider .text {
    color: green;  /* White text on top of image */
    text-align: left;
}

.single-slider h1 {
    font-size: 40px;
    font-weight: bold;
    line-height: 1.2;
    margin: 10px 0;
}

.single-slider h1 span {
    color: #1a76d1;  /* Highlighted text color */
}

/* Button Styling */
.single-slider .button {
    margin-top: 30px;
}

.single-slider .btn {
    color: #fff;
    background-color: #1a76d1;
    padding: 12px 30px;
    font-weight: 500;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.single-slider .btn:hover {
    background-color: #2c2d3f; /* Darker hover effect */
}

/* Make the text responsive */
@media (max-width: 991px) {
    .single-slider h1 {
        font-size: 30px;
    }
    .single-slider .button .btn {
        padding: 10px 25px;
    }
}

@media (max-width: 768px) {
    .single-slider h1 {
        font-size: 24px;
    }
    .single-slider .button .btn {
        padding: 8px 20px;
    }
}

@media (max-width: 576px) {
    .single-slider h1 {
        font-size: 18px;
    }
    .single-slider .button .btn {
        padding: 8px 15px;
    }
}


/* =========================
   Doctor Section Styles
========================== */
.doctorsection {
    background-color: #f4f4f4;
}

.section-title {
    text-align: center;
    margin-bottom: 30px;
    margin-top: 35px;
}

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

.section-title img{

    display: block; /* Make the image a block element */
    margin: 0 auto; /* Center the image horizontally */
    max-width: 150px; /* Make sure the image is responsive */
    height: auto; /* Maintain aspect ratio */
}



 /* Left Column */

.doctor-left {
    padding: 10px; /* Add space to the right for better spacing */
}



.image-doctor img {
    max-width: 110%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 15px;
}

/* Right Column Styles */

.doctor-right {
    padding: 20px;
}


.doctor-right h3 {
    font-size: 1.8rem;
    margin-bottom: 20px;
    color: #007bff;
    text-align: center;
}

.doctor-right p {
    font-size: 1.4rem;
    line-height: 1.6;
    margin-bottom: 20px;
    text-align: center;
    color: black;
}

.doctor-right .button{
    display: flex; /* Use flexbox to center the button */
    justify-content: center; /* Horizontally center the button */
    align-items: center; /* Vertically center the button if needed */
    margin-top: 20px; /* Add margin for spacing, adjust as needed */
}

/* =========================
   Fun Facts Section Styles
========================== */

.fun-facts {
    position: relative; 
    padding: 100px 0;
    background: url('img/fun-bg.jpg');
    background-size: cover;
    background-repeat: no-repeat;    
}

.fun-facts .overlay {
    background: #f5f5f5;
}

.overlay:before{
	position:absolute;
	content:"";
	left:0;
	top:0;
	height:100%;
	width:100%;
	background:#1a76d1;
	opacity:0.8;
}


.fun-facts .single-fun {
    text-align: center;
    padding: 30px;
     transition: all 0.3s ease;

    /*
    border-radius: 10px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
   
    margin-bottom: 30px;
*/
    position: relative; /* old one*/
    
}
/*.fun-facts .single-fun:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    transform: translateY(-5px);
}
*/
.fun-facts .single-fun i {
     color: #fff; /* #fff to 007bff*/ /* Blue color */
  /* margin-bottom: 15px; /* first one removed*/
   
    position: absolute;
    left: 0; 
    height: 70px;
    width: 70px;
    line-height: 67px;
    font-size: 28px;
    text-align: center;
    padding: 0;
    margin: 0;
    border: 2px solid #fff;  /* White border around the icon */
    border-radius: 50%;
    top: 50%;
    margin-top: -35px;
    transition: all 0.4s ease;


}

.fun-facts .single-fun:hover i {
    color: #1A76D1;/* Lighter blue color on hover */
    background: #fff; /* White background on hover */
    border-color: transparent; /* Remove the border color on hover */
}


.fun-facts .single-fun .content {
    /*display: inline-block;*/
    padding-left: 80px;

}


.fun-facts .single-fun span {
    color: #fff;
    font-weight: 600;
    font-size: 30px;
    position: relative;
    display: block;
    transition: all 0.4s ease;
    margin-bottom: 7px;
    -webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
}


.fun-facts .single-fun .counter {
  
    font-weight: 700;
     display: block;
    margin-bottom: 10px;
}



.fun-facts .single-fun p{
	color:#fff;
	font-size:15px;
}


/* =========================
   End Fun Facts Section Styles
========================== */


/* =========================
   Advice Section Styles
========================== */

/* Container for the entire section */
.advicesection {
    padding: 80px 0;
   /* background-color: #f9f9f9; /* Light background color for contrast */
}

.advice-left{
    margin-left: 20px;
}

/* Section title */
.advice-left h3 {
    font-size: 40px;
    font-weight: 600;
    color: #333;
    margin-bottom: 20px;
    text-align: center;
}

/* Paragraph text styling */
.advice-left p {
    font-size: 19px;
    line-height: 1.6;
   
    text-align: center;
    color: black;
}

/* Right Column (Video)  /* Center the play button */
.advice-right .video-play {
    font-size: 24px;
    color: #fff;
    background-color: #007bff;
    padding: 15px 30px; 
    border-radius: 5px;
    text-decoration: none;
    display: block; 
    text-align: center; 
    width: fit-content; 
    margin: 0 auto;
    transition: background-color 0.3s ease; 
}

/*.choose-right .video-image {
    position: relative;
    max-width: 100%;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}
*/
.video-play:hover {
    background-color: #0056b3;
}

.video-play:hover {
    background-color: #0056b3;
} 

.video-play i {
    margin-right: 10px;
} 


#video-container {
    display: auto;
    margin-top: 20px;
}

#video-player {
    width: 100%;
    max-width: 560px;
    height: auto;
}


/* =========================
   Ingredient Section Styles
========================== */

.ingredient {
   /* min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;*/
    padding: 40px 0; 
}

.contain {
    /*
    padding: 80px 0;
    max-width: 950px;
    background-color: red;*/
    width: 80%; 
    margin: 0 auto; 
    
}

.main-card {
    display: flex;
    flex-direction: column;  
    gap: 20px;   
    /*
    justify-content: space-evenly;
    width: 100%;
    background: grey;
    transition: all 1s ease;*/
}
/* not mentioned
#two:checked ~ .main-card {
    margin-left: 100%;
}
*/
.main-card .cards {
    display: flex;
    gap: 20px;  
    transition: all 0.5s ease-in-out; 

    /*width: calc(100% / 2 - 10px);
    justify-content: space-between;
    margin: 0 20px;*/
}

.cards .card {
    width: 300px; /* width: calc(100% / 3 - 10px) change 300px*/
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 
    border-radius: 8px;  /* change 24-8*/
    overflow: hidden; 
    background-color: #fff;

/*
    background: lightyellow;
    width: calc(100% / 3 - 10px);
    padding: 30px;
    border-radius: 24px;
    z-index: 3;
    transition: all .3s ease-out 0s;*/
}

.cards .card .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /*align-items: center;
    text-align: center;
    position: relative;*/
}
/* remove
.cards .card .content::before {
    position: absolute;
    content: '';
    bottom: -1px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 80%;
    height: 90%;
    background: lightblue;
    opacity: 0;
    filter: blur(10px);
    transition: all .3s ease-out;
}

.cards .card .content:hover::before {
    opacity: 0.8;
}

.cards .card .content:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.cards .card .content .img {
    height: 130px;
    width: 130px;
    margin-bottom: 14px;
    background: white;
    padding: 3px;
    border-radius: 50%;
}
*/
.cards .card .content .img img {
    height: auto;  /* change 100% - auto */
    width: 100%;
    border-bottom: 2px solid #f0f0f0; 
    /*
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid rgb(11, 130, 209);
    */
}

.card .details {
    padding: 20px;
    text-align: center;
}

.card .name {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

.card .work p {
    font-size: 14px;
    color: #555;
}


/*
.cards .card .content .details .name {
    font-size: 20px;
    font-weight: bold;
}

.cards .card .content .details .work p {
    font-size: 15px;
    margin-top: 12px;
    line-height: 25px;
}
*/
.point {

    text-align: center; 
    margin-top: 20px; 
    /*
    display: flex;
    margin: 20px;
    justify-content: center;*/
}

.point label {
    display: inline-block; 
    height: 20px; 
    width: 20px; 
    background: grey; 
    margin: 0 5px; 
    border-radius: 50%;
    cursor: pointer; 
    transition: all 0.5s ease;
}

.point .one.active, .point .two.active {
    background-color: #4CAF50;
} 

.point label.active {
    width: 35px;
}

input[type="radio"] {
    display: none;
}

/* Show cards based on radio selection */
#one:checked ~ .main-card #card-set-one {
    display: flex;
}

#two:checked ~ .main-card #card-set-two {
    display: flex;
}

#one:checked ~ .main-card #card-set-two,
#two:checked ~ .main-card #card-set-one {
    display: none;
}



/*=========================
    Start Footer CSS
===========================*/


/* General Footer Styling */
.footer {
    position:relative;   
    padding-top: 5px; /* Add padding to the top  of the footer */
    background-color: #1A76D1; /* Light background color for footer */
    
   
}
/* Footer Top */
.footer-top,
    
  

/* Optional: Adding a slight overlay effect */

.footer .single-footer {
    
    padding: 20px; /* Add padding for each section */
     
    border-radius: 5px; /* Optional: rounded corners for a modern look */
}

.footer h2 {
         
    margin-bottom: 20px; /* Space between heading and content */
    color:#fff;
	font-size:20px;
	font-weight:600;
	text-transform:capitalize;
	padding-bottom:10px;
	position:relative;
}

.footer .single-footer h2::before{
	position: absolute;
	content: "";
	left: 0;
	bottom: 0px;
	height: 3px;
	width: 50px;
	background: #fff;
}

.footer .single-footer p{
	color:#fff;
    text-align: justify;
    
}

/* Styling for Quick Links Section */
.footer .f-link ul {
    list-style: none;
    padding: 0;
    margin: 0;
}


.footer .f-link ul li {
    font-size: 18px;/* Slightly larger text */
    margin-bottom: 10px; /* Space between each link */
}

.footer .f-link ul li a {
    color: #fff; /* Dark text color */
    display: block;
    margin-bottom: 10px; /* Space between list items */
    transition: transform 0.3s ease; /* Smooth transition for transform */

    text-decoration: none;
    padding-left: 10px; /* Padding to align text better */
}

.footer .f-link li a:hover {
    transform: translateX(20px); /* Smooth horizontal shift */
    text-decoration: none;
}


/* Styling for Open Hours Section */
.footer .single-footer.time-sidual {
    list-style: none;
    padding: 0;
    margin: 0;
    /*overflow: hidden;*/
}

.footer .single-footer .time-sidual li {
    font-size: 14px; /* Adjust font size for better readability */
    margin-bottom: 8px; /* Space between hours */
    /*display: block;*/
    color: #fff; /* White color for text */
    /*width: auto;*/
}

.footer .single-footer.time-sidual li span {
    font-weight: bold; /* Make the hours bold for emphasis */
    
    /*display: inline-block;*/
}





/* Add specific styling for AM/PM formatting */
.footer .single-footer .time-sidual li span {
    font-weight: bold; /* Bold for hours */
    color: white; /* Add a contrasting color for the times (yellowish) */
}

.footer .single-footer .time-sidual li {
    font-size: 16px; /* Ensure readability of timings */
    color: #fff; /* Text color for day names */
}

/* Styling for individual day names */
.footer .single-footer .time-sidual li.day {
    font-size: 18px; /* Larger font size for the day name */
    color: white; /* Gold/yellow color for day names */
}




/* Contact Details Section */
.footer .bottom-contact {
    list-style: none;
    padding: 0;
    margin: 0;
    
}

.footer .bottom-contact li {
    font-size: 18px; /* Font size for contact details */
    margin-bottom: 10px; /* Space between contact items */
    font-weight: 400;
   
}

.footer .bottom-contact li a {
    color: #fff; /* Default text color */
    text-decoration: none;
    transition: color 0.3s ease; /* Smooth transition on hover */
    display: block;
    margin-bottom: 10px; /* Space between list items */
}


/* Change the icon color for WhatsApp */
.footer .bottom-contact li a[href*="whatsapp.com"] i {
    color: #25D366; /* WhatsApp green */
}

/* Change the icon color for Mail */
.footer .bottom-contact li a[href^="mailto:"] i {
    color: #d49d38; /* Mail icon color */
}

/* Change the icon color for Facebook */
.footer .bottom-contact li a[href*="facebook.com"] i {
    color: #fff; /* Facebook white */
}

/* Change text color on hover */
.footer .bottom-contact li a:hover {
    text-decoration: none;
    transform: translateX(20px); /* Smooth horizontal shift */
    
}

/* Space between icon and text */
.footer .bottom-contact i {
    margin-right: 10px; /* Space between icon and text */
    display: inline;
}

/* Hover effect for specific icons */
.footer .bottom-contact li a:hover i {
    opacity: 0.6; /* Slight opacity change on hover */
}

/* Copyright Section */
.copyright {
    background-color: #1A76D1; /* Dark background color for the copyright section */
    padding: 5px 0;

}

/* Copyright Text Styling */
.copyright .copyright-content p {
    color: #fff; /* White text color */
    font-size: 14px; /* Smaller text size */ 
    text-align: center; /* Center the text horizontally */
}

/* =========================
   Muscle Section Styles
========================== */

/* Container for the entire section */
.musclesection {
    padding: 80px 0;
   background-color: #f9f9f9; /* Light background color for contrast */
}

.muscle-left{
    margin-right: 20px;
}

/* Section title */
.muscle-left h3 {
    font-size: 40px;
    font-weight: 600;
    color: #333;
    margin-bottom: 20px;
    text-align: center;
}
/* Paragraph text styling for list items */
.muscle-left .list P{
    text-align: center;
    font-size: 22px;
    color:black;
    margin-bottom: 10px;
    font-weight: bold;
}

/* List item styling  */
.muscle-left .list li{
    font-size: 17px;
    line-height: 1.6;
    text-align: center;
    color: black;
    margin-bottom: 15px;
}

.muscle-right{
    margin-left: 20px;
    margin-top: 80px;
}

.muscle-right .image-muscle img{
    height: 350px;
    /* Make sure images are scaled correctly. */
    max-width: 100%;
    width: auto; 
    /* Adjust width automatically to maintain aspect ratio */
    border: 0;
}

/* =========================
   Certification Section Styles
========================== */

.certificate {
    padding-top: 30px ; /* Add spacing around the section */
    padding-bottom: 20;
    background-color: #f8f8f8; /* Optional: Add a light background */
}


.certificate .image-certificate {

    max-width: 950px;
    margin: 0 auto;
    padding: 0 20px; /* Add some padding inside the container */


    text-align: center; /* Center the image */
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically if the container has a height */
    height: auto; /* Optional: Ensure the container takes full height if needed */
}

/* =========================
   Guarantee Section Styles
========================== */
.guarantee {
    background-color: #f9f9f9;
    padding: 40px 0;
  }
  
  .guarantee-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }
  
  .guarantee-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
  }
  
  /* Guarantee Item */
  .guarantee-item {
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  }
  
  .guarantee-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
  }
  
  /* Icons */
  .guarantee-icon {

    display: flex;
    justify-content: center;  /* Horizontally center the image */
    align-items: center;      /* Vertically center the image */
    height: 100px;            /* Optional: Set a height for the container (if not already set) */
    
  }
  .guarantee-icon img{
    height: auto;
    /* Make sure images are scaled correctly. */
    max-width: 100%;
    /* Adhere to container width. */
    border: 0;

  }

  .delivery-icon { 
    margin-bottom: 20px;
    width: 80px;  /* Set the width as needed */
    height: auto; /* Maintain aspect ratio */
  }
  
  .return-icon{
    margin-bottom: 20px;
    width: 80px;  /* Set the width as needed */
    height: auto; /* Maintain aspect ratio */
  }
  .customer-icon{
    margin-bottom: 20px;
    width: 80px;  /* Set the width as needed */
    height: auto; /* Maintain aspect ratio */
  }
  
  .guarantee-title {
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
  }
  
  .guarantee-title-hindi {
    font-size: 1rem;
    color: #777;
    display: block;
  }
  
  .guarantee-text {
    font-size: 1rem;
    color: #666;
    margin: 10px 0;
  }
  
  .guarantee-text strong {
    font-weight: bold;
    color: #333;
  }

/* =========================
   Testimonial Section Styles
========================== */

.section-header {
    text-align: center;
    margin-top: 30px;
    font-size: 2em;
    color: #1A76D1;
  }
 

  /* Grid Layout for Testimonials */
  .testimonials-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns */
    gap: 20px;
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
  }

  .testimonial {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
  }

  
  .testimonial-text h2 {
    display: block;
    margin-top: 15px;
    font-weight: bold;
    color: black;
  }
  .testimonial-text p{
    font-size: 1rem;
    color: #555;
    margin-top: 10px;
    font-style: italic;
  }

 
  .testimonial cite {
    display: block;
    margin-top: 15px;
    font-weight: bold;
    color: black;
  }
  
/* =========================
   Feedback Section Styles
========================== */
  
 

  .feedback {
    display: flex;
    justify-content: space-evenly;  /* Spacing between the sections */
    flex-wrap: wrap;  /* Allow sections to wrap to the next row on small screens */
    gap: 20px;  /* Space between items */
    padding: 20px;
    max-width: 1200px;  /* Optional: restrict the container width */
    margin: 0 auto;  /* Center the container */
  }
  
  .journey-section {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 32%;  /* Each section will take up 1/3 of the available space */
    min-width: 280px;  /* Ensure sections do not become too narrow */
    text-align: center; /* Center text */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  .journey-section:nth-child(odd) {
    background-color: #e8f5e9;  /* Light green background for odd sections */
  }
  .section-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .section-image{
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 15px;
    object-fit: cover;  /* Ensure images cover the area without distortion */
  }
  .section-content p {
    font-size: 16px;
    line-height: 1.6;
    color: #555;
    text-align: justify;
  }
  
  .section-content h2 {
    font-size: 24px;
    color: #1A76D1;
    margin-bottom: 15px;
  }
 
/*=========================
   Start Contact Us CSS
===========================*/

/* Contact Us Section */
.contact-us {
    padding: 80px 0;
    background-color: #f9f9f9;
}

/* Inner container */
.contact-us .inner {
    /*box-shadow: 0px 0px 10px #00000024;
    border-radius: 5px;
    overflow: hidden;*/
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    background-color: #fff;
    padding: 20px;
}

/* Contact Us Left (Image) */
.contact-us .contact-us-left {
    /*width: 100%;
    height: 100%;*/
    flex: 1;

}

.contact-us .contact-us-left img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    object-fit: cover;
}/*new*/

/* Contact Us Form */
.contact-us .contact-us-right {
    /*padding: 50px 40px;*/
    flex: 1;
    padding: 40px;

}

.contact-us .contact-us-right h2 {
    position: relative;
    font-size: 32px;
    color: #333;
    text-transform: capitalize;
    font-weight: 600;
    
    margin-bottom: 20px;/* change 12 to 20*/
    /*
    padding-bottom: 20px;
    text-align: left;
    
    line-height: 27px;*/
}

.contact-us .contact-us-right h2:before {
    position: absolute;
    content: "";
    left: 0;
    bottom: -10px;/* change 0 to -10px*/
    height: 2px;
    width: 50px;
    background: #1A76D1;
}

.contact-us .contact-us-right p {
    font-size: 14px;
    color: #333;
    font-weight: 400;
    text-align: left;
    margin-bottom: 50px;
}

 .contact-us .contact-form {
    margin-top: 30px;
}

.contact-us .contact-form .form-group {
    margin-bottom: 22px;
}

.contact-us .contact-form .form-group input,
.contact-us .contact-form .form-group textarea {
    width: 100%;
    border: 1px solid #eee;
    padding: 0px 18px;
    color: #555;
    font-size: 14px;
    font-weight: 400;
    border-radius: 4px;
}

.contact-us .contact-form .form-group input {
    height: 50px;
}

.contact-us .contact-form .form-group textarea {
    height: 100px;
    padding: 18px;
}

.contact-us .contact-form .form-group.login-btn {
    margin: 0;
}

.contact-us .contact-form button {
    border: none;
    background-color: #1A76D1;
    color: #fff;
    width: 100%;
    padding: 15px 0;
    text-align: center;
    font-size: 16px;
    border-radius: 4px;
    cursor: pointer;
}

.contact-us .contact-form .btn:hover {
    background: #155f91;
}

.contact-us .contact-info {
    margin-top: 50px;
}

.contact-us .single-info {
    background: #1a76d1;
    padding: 40px 60px;
    height: 150px;
    border-radius: 10px;
    position: relative;
    transition: all 0.3s ease-out;
}

.contact-us .single-info:before {
    position: absolute;
    content: '';
    bottom: -10px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 80%;
    height: 90%;
    background: #1A76D1;
    opacity: 0;
    filter: blur(10px);
    transition: all 0.3s ease-out;
}

.contact-us .single-info:hover:before {
    opacity: 0.8;
}

.contact-us .single-info:hover {
    transform: translateY(-5px);
}

.contact-us .single-info i {
    font-size: 42px;
    color: #fff;
    position: absolute;
    left: 40px;
}

.contact-us .single-info .content {
    margin-left: 45px;
}

.contact-us .single-info .content h3 {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
}

.contact-us .single-info .content p {
    color: #fff;
    margin-top: 5px;
}

/*=========================
   End Contact Us CSS
===========================*/
/* ==========================
  Product Card Wrapper Styling
========================== */

.products {
    padding-top: 20px ; /* Add spacing around the section */
    padding-bottom: 20;
    background-color: #f8f8f8; /* Optional: Add a light background */
    
}

/* Card Wrapper - Container for the product card */
.card-wrapper { 
    max-width: 1100px; /* Max width of the card wrapper */
    margin: 0 auto; /* Center the card wrapper */
}

/* Image Styling */
.card-wrapper img {
    width: 100%; /* Ensure images are responsive and take full width */
    display: block; /* Remove extra space below images */
}

/* Image Display - A container to hide overflow of images */
.img-display {
    overflow: hidden; /* Hide overflow content for a clean display */
}

/* Image Showcase - Main container that holds the product images */
.img-showcase {
    display: flex; /* Arrange images horizontally */
    width: 100%; /* Take full width */
    transition: all 0.5s ease; /* Smooth transition for any changes */
}

/* Individual images inside the showcase */
.img-showcase img {
    min-width: 100%; /* Ensure images fill the container */
}

/* ==========================   Image Thumbnails Section ========================== */

/* Image Select - Container for the thumbnails */
.img-select {
    display: flex; /* Display thumbnails horizontally */
}

/* Individual thumbnail image container */
.img-item {
    margin: 0.3rem; /* Add margin between thumbnails */
}

/* Remove margin on specific thumbnails (1st, 2nd, and 3rd) */
.img-item:nth-child(1),
.img-item:nth-child(2),
.img-item:nth-child(3) {
    margin-right: 0; /* Remove right margin on these items */
}

/* Hover effect for image thumbnails */
.img-item:hover {
    opacity: 0.8; /* Slightly fade the thumbnail on hover */
}

/* ==========================   Product Content Section ========================== */

/* Product content - Right section of the product card (title, price, etc.) */
.product-content {
    padding: 2rem 1rem; /* Padding for content */
}

/* Product Title Styling */
.product-title {
    font-size: 3rem; /* Large font size for the title */
    text-transform: capitalize; /* Capitalize the title */
    font-weight: 700; /* Make title bold */
    position: relative; /* Position for the underline effect */
    color: #12263a; /* Dark blue color */
    margin: 1rem 0; /* Space above and below the title */
}

/* Underline effect for product title */
.product-title::after {
    content: ""; /* Empty content for the pseudo-element */
    position: absolute; /* Position it at the bottom of the title */
    left: 0; /* Align it to the left */
    bottom: 0; /* Align it to the bottom */
    height: 4px; /* Height of the underline */
    width: 80px; /* Width of the underline */
    background: #12263a; /* Same dark blue color as the title */
}

/* Link Styling for product link */
.product-link {
    text-decoration: none; /* Remove underline from link */
    text-transform: uppercase; /* Uppercase text for the link */
    font-weight: 400; /* Normal font weight */
    font-size: 0.9rem; /* Smaller font size */
    display: inline-block; /* Display link as inline block */
    margin-bottom: 0.5rem; /* Space below the link */
    background: #256eff; /* Blue background */
    color: #fff; /* White text */
    padding: 0 0.3rem; /* Horizontal padding for the link */
    transition: all 0.5s ease; /* Smooth transition for hover effect */
}

/* Hover effect for product link */
.product-link:hover {
    opacity: 0.9; /* Slightly fade the link on hover */
}

/* ==========================   Product Rating Section ========================== */

/* Product rating styling */
.product-rating {
    color: #ffc107; /* Yellow color for the stars */
}

/* Styling for the rating score */
.product-rating span {
    font-weight: 600; /* Bold the rating score */
    color: #252525; /* Dark gray color for the score */
}

/* =========================   Product Price Section ========================== */

/* Price container */
.product-price {
    margin: 1rem 0; /* Space above and below the price */
    font-size: 1rem; /* Regular font size */
    font-weight: 700; /* Bold font weight */
}

/* Styling for price text */
.product-price span {
    font-weight: 400; /* Normal weight for price text */
}

/* Last price (original price) styling */
.last-price span {
    color: #f64749; /* Red color for the original price */
    text-decoration: line-through; /* Strikethrough the original price */
}

/* New price styling */
.new-price span {
    color: #256eff; /* Blue color for the new price */
}

/* ==========================
   Product Detail Section
========================== */

/* Product details heading */
.product-detail h2 {
    text-transform: capitalize; /* Capitalize the heading */
    color: #12263a; /* Dark blue color */
    padding-bottom: 0.6rem; /* Padding below the heading */
}

/* Product details paragraph */
.product-detail p {
    font-size: 0.9rem; /* Smaller font size */
    padding: 0.3rem; /* Padding around the text */
    opacity: 0.8; /* Slightly faded text */
}

/* List of product features (bullets) */
.product-detail ul {
    margin: 1rem 0; /* Space around the list */
    font-size: 0.9rem; /* Regular font size for the list */
}

/* List item styling (each feature) */
.product-detail ul li {
    margin: 0; /* Remove margin */
    padding-left: 1.7rem; /* Space for the check mark */
    margin: 0.4rem 0; /* Space between list items */
    font-weight: 600; /* Bold font for the list items */
    color: #1A76D1;
}

/* Span inside product detail list items (for additional styling) */
.product-detail ul li span {
    font-weight: 400; /* Normal font weight for spans */
    color: #000;
}

/* ==========================    Purchase Info Section ========================== */

/* Purchase info container (quantity input + buttons) */
.purchase-info {
    margin: 1.5rem 0; /* Space around the section */
}

/* Styling for input and buttons inside purchase info */
.purchase-info input,
.purchase-info .btn {
    border: 1.5px solid #ddd; /* Light gray border */
    border-radius: 25px; /* Rounded corners */
    text-align: center; /* Center the text inside */
    padding: 0.45rem 0.8rem; /* Padding inside the inputs and buttons */
    outline: 0; /* Remove default focus outline */
    margin-right: 0.2rem; /* Space between input and button */
    margin-bottom: 1rem; /* Space below the buttons */
}

/* Specific width for the quantity input */
.purchase-info input {
    width: 60px; /* Set width for the quantity input */
}

/* Button styles */
.purchase-info .btn {
    cursor: pointer; /* Pointer cursor for buttons */
    color: #fff; /* White text color */
}

/* First button (add to cart) styling */
.purchase-info .btn:first-of-type {
    background: #256eff; /* Blue background */
}

/* Second button (buy now) styling */
.purchase-info .btn:last-of-type {
    background: #f64749; /* Red background */
}

/* Button hover effect */
.purchase-info .btn:hover {
    opacity: 0.9; /* Slight fade on hover */
}

/* ==========================   Social Links Section ========================== */

/* Social links container */
.social-links {
    display: flex; /* Display social links horizontally */
    align-items: center; /* Align items vertically */
}

/* Styling for each social link (icon buttons) */
.social-links a {
    display: flex; /* Flexbox to center icons inside the link */
    align-items: center;
    justify-content: center;
    width: 32px; /* Set size of the social button */
    height: 32px;
    color: #000; /* Black color for icons */
    border: 1px solid #000; /* Black border around the icons */
    margin: 0 0.2rem; /* Space between icons */
    border-radius: 50%; /* Make icons circular */
    text-decoration: none; /* Remove underline from links */
    font-size: 0.8rem; /* Font size for the icon */
    transition: all 0.5s ease; /* Smooth transition for hover effect */
}

/* Hover effect for social links */
.social-links a:hover {
    background: #000; /* Black background on hover */
    border-color: transparent; /* Remove border on hover */
    color: #fff; /* White text/icon color */
}

/* ==========================   Product Card Layout ========================== */

/* Product card container styling */
.product {
    display: flex; /* Flexbox layout for product image and content */
    background-color: #fff; /* White background for the card */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow around*/
}



/* ==========================   Customer Details ========================== */
#addToCartBtn {
    padding: 15px 30px; /* Adds padding around the button */
    font-size: 16px; /* Sets the font size of the button text */
    background-color: green; /* Sets the button background color */
    color: white; /* Sets the text color to white */
    border: none; /* Removes the button border */
    cursor: pointer; /* Changes the cursor to a pointer on hover */
}

/* Hover effect for the add to cart button */
#addToCartBtn:hover {
    background-color: #0059b2; /* Changes the background color when hovered */
}






/* The Modal Background (Hidden by Default) */
.modal {
    display: none; /* Hidden by default */
    position: absolute; /* Fixed position */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full screen width */
    height: 100%; /* Full screen height */
    background-color: rgba(0, 0, 0, 0.5); /* Black background with opacity */
    overflow: auto; /* Ensure content scrolls if necessary */
}



/* Modal Content (Form box) */
.modal-content {
    background-color: #fff; /* Sets the background color of the modal */
    margin: 7% auto; /* Centers the modal vertically with a margin */
    padding: 20px; /* Adds padding inside the modal */
    height: fit-content;
    width: 100%; /* Sets the width of the modal */
    max-width: 1000px; /* Sets a maximum width for larger screens */
    border-radius: 10px; /* Rounds the corners of the modal */
    border: 1px solid #1a76d1;
    
}

/* The Close Button */
.close {
    color: #111; /* Sets the initial color of the close button */
    font-size: 40px; /* Makes the close button text large */
    font-weight: bold; /* Makes the close button text bold */
    position: absolute; /* Positions the close button absolutely */
    top: 10px; /* Positions the close button 10px from the top */
    right: 25px; /* Positions the close button 25px from the right */
    cursor: pointer; /* Changes the cursor to a pointer on hover */
}
.close:hover,
.close:focus {
    color: black; /* Changes the close button color when hovered or focused */
}

/* Main-Wrapper */

.main-wrapper {
    position: relative;
    max-width: 930px;
    width: 100%;
    background: #fff;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    height: fit-content;
   
    margin-top: 25px;
    margin-bottom: 25px;
  }
  .main-wrapper h2 {
    font-size: 1.5rem;
    color: #1a76d1;
    font-weight: 500;
    text-align: center;
  }
  .main-wrapper .orderform {
    margin-top: 30px;
  }
  .orderform .input-box {
    width: 100%;
    margin-top: 20px;
  }
  .form-label {
    color: #28a745;

    font-weight: 600;
    font-size: 16px;
    margin-bottom: 10px;
    display: block;



  }
  .orderform :where(.input-box input, .select-box) {
    position: relative;
    height: 50px;
    width: 100%;
    outline: none;
    font-size: 1rem;
    color: #707070;
    margin-top: 8px;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 0 15px;
  }
  .input-box input:focus {
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  }
  .orderform .column {
    display: flex;
    column-gap: 15px;
  }
  .orderform .gender-box {
    margin-top: 20px;
  }
  .gender-box h3 {
    color: #333;
    font-size: 1rem;
    font-weight: 400;
    margin-bottom: 8px;
  }
  .orderform :where(.gender-option, .gender) {
    display: flex;
    align-items: center;
    column-gap: 50px;
    flex-wrap: wrap;
  }
  .orderform .gender {
    column-gap: 5px;
  }
  .gender input {
    accent-color: rgb(130, 106, 251);
  }
  .orderform :where(.gender input, .gender label) {
    cursor: pointer;
  }
  .gender label {
    color: #707070;
  }
  .address :where(input, .select-box) {
    margin-top: 15px;
  }
  .select-box select {
    height: 100%;
    width: 100%;
    outline: none;
    border: none;
    color: #707070;
    font-size: 1rem;
  }
  
  /*Responsive*/
  @media screen and (max-width: 500px) {
    .form .column {
      flex-wrap: wrap;
    }
    .form :where(.gender-option, .gender) {
      row-gap: 15px;
    }
  }
  


    /*Responsive*/
    @media screen and (max-width: 500px) {
        .form .column {
          flex-wrap: wrap;
        }
    }



/* Submit Button Styling */
.form-btn {
    padding: 14px 32px;
    border-radius: 6px;
    border: none;
    background-color: #6a64f1;
    color: white;
    font-size: 16px;
    font-weight: 600;
    width: 100%;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 20px;
}

.form-btn:hover {
    background-color: #5f50e1; /* Change to a darker shade on hover */
}


/* Responsive Design for Mobile */
@media (max-width: 768px) {
    .modal-content {
        margin: 5% 20px; /* Adjust margins for smaller screen */
    }



    .form-btn {
        padding: 12px 25px; /* Smaller button padding */
    }
}














/* ==========================
  About us Styling
========================== */
/* General Container */
.aboutcontainer {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0 16px;
}


/* Top Parallax Section */
.top-aboutus {
    background: #fff url('https://images.unsplash.com/photo-1471488738053-f147befc0689?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1938&q=80') center center no-repeat;
    background-size: cover;
    background-attachment: fixed;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;


    position: relative;

}

.top-aboutus h1 {
    font-size: 2.5rem;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.4); /* Semi-transparent black background */
    padding: 20px;
    border-radius: 50px;
    font-weight: bold;
}

/* Grid Layout */
.grid {

    display: flex;
    justify-content: space-between;
    align-items: center; /* Vertically centers the items */
    gap: 16px; /* Adds spacing between the text and image */
    padding: 20px;
    flex-wrap: wrap; /* Ensures responsiveness on smaller screens */
}

@media (min-width: 1024px) {
    .grid {
        grid-template-columns: 1fr 1fr;
    }
}

.text-container {
    flex: 1; /* Ensures the text takes up available space */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically centers the text */
    padding-left: 140px;
    padding-right: 40px;
}

.about-us-title {
    font-size: 2.5rem;
    font-weight: bold;
    color: black;
}

.about-description {
    font-size: 1.2rem;
    color: #333;
    line-height: 1.6;
}
.image-about{
    flex: 1; /* Ensures the image takes up available space */
    display: flex;
    justify-content: center; /* Horizontally centers the image */
    align-items: center;
    padding-left: 40px;
    padding-right: 140px;
}

.image-about img {
    width: 100%;
    height: auto;
    border-radius: 30px;
}

/* Additional Info Section */
.additional-info {
    padding: 20px 0;
    text-align: center;
    max-width: 950px;
    margin: 0 auto;
    
}

.additional-info p {
   color: black;
    font-size: 1rem;
}

/* Vision Banner */
.vision-banner {
    background: #fff url('https://images.unsplash.com/photo-1471488738053-f147befc0689?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1938&q=80') center center no-repeat;
    background-size: cover;
    background-attachment: fixed;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.vision-banner h1 {
    font-size: 3rem;
    font-weight: bold;
    color: black;
    text-transform: uppercase;
}

/* Vision Content */
.vision-content {
    padding: 20px;
    /*padding-top: 32px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;*/
}

.vision-content p {
    font-size: 1rem;
    color: #000;
    margin-bottom: 16px;
    align-items: center;
    text-align: center;
}

.centered-text {
    text-align: center;
    font-size: 1.1rem;
    color: #000;
    
}
/* Centering the #about-us-box content */
#about-us-box {
    text-align: center; /* Center the text inside the box */
    margin: 20px 0; /* Add some space around the box */
 
}

#about-us-box h2 {
    font-size: 1.25rem;
    
    color: black;
}
/* Center the image within #about-us-box */
#about-us-box .about-image {
    display: block; /* Make the image a block element */
    margin: 0 auto; /* Center the image horizontally */
    max-width: 200px; /* Make sure the image is responsive */
    height: auto; /* Maintain aspect ratio */
}

/* Quote Text */
.quote-text {
    font-size: 1.5rem;
    font-style: italic;
    font-weight: bold;
    margin-bottom: 40px;
    text-align: center;
    color: #444;
}

/* Highlight Style */
.highlight {
    color: #28a745; /* Adjust for your brand color */
}

/* Utility Classes */
.text-center {
    text-align: center;
}

/* Top Our Cases Section */
.top-ourcases {
    background: #fff url('https://images.unsplash.com/photo-1492552085122-36706c238263?q=80&w=2097&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA==') center center no-repeat;
    background-size: cover;
    background-attachment: fixed;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;


    position: relative;

}


.top-ourcases h1 {
    font-size: 2.5rem;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.4); /* Semi-transparent black background */
    padding: 20px;
    border-radius: 50px;
    font-weight: bold;
}



/* Vision Banner */
.ourcases-banner {
    background: #fff url('https://images.unsplash.com/photo-1492552085122-36706c238263?q=80&w=2097&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA==') center center no-repeat;
    background-size: cover;
    background-attachment: fixed;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.ourcases-banner h1 {
    font-size: 3rem;
    font-weight: bold;
    color: black;
    text-transform: uppercase;
}


/* Thanks popup*/

.thanks{
    width: 400px;
    background: #fff;
    border-radius: 6px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.1);
    text-align: center;
    padding: 0 30px 30px;
    color: #333;
    visibility: hidden;
    transition: transform 0.4s, top 0.4s;


    display: none; /* Initially hidden by default */
    position: absolute; /* Changed from 'flex' to 'fixed' for better position control */
    z-index: 1; /* Ensures the modal stays on top */
    left: 0; /* Aligns the modal to the left of the screen */
    top: 0; /* Aligns the modal to the top of the screen */
    width: 100%; /* Full width of the screen */
    height: 100%; /* Full height of the screen */
    background-color: rgba(0,0,0,0.5); /* Black background with 50% opacity */




}

.openthanks{
    visibility: visible;
    top: 50%;
    transform: translate(-50%, -50%) scale(1);
}
.thanks img{
    width: 100px;
    margin-top: -50px;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.thanks h2{
    font-size: 38px;
    font-weight: 500;
    margin: 30px 0 10px;
}
.thanks .thanksbtn{
    width: 100%;
    margin-top: 50px;
    padding: 10px 0;
    background: #6fd649;
    color: #fff;
    border: 0;
    outline: none;
    font-size: 18px;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}