/* Basic Reset and Typography */
body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    color: #111;
    background-color:#fbf9f9;
    font-size: 12px;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background-color: #d3d3d3;
    position: relative;
    height: 60px; /* Set the desired height */
}
.logo img {
    max-width: 120px; /* Adjust this value as needed */
    height: auto;
}

/* Contact Information */
.headcontact-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.headcontact-link {
    font-family: 'Quicksand', sans-serif; /* Apply Quicksand only to contact info */
    text-decoration: none;
    color: #99693d;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
}

.headcontact-link i {
    color: #99693d;
    font-size: 16px;
}

/* Adjust hover effect */
.headcontact-link:hover {
    color: #759ca3;
    transform: translateX(3px);
}


/* Menu Items (Links) */
nav {
    display: flex;
    gap: 20px;
}
.hamburger {
    display: none;
    border: none;
    background-color: transparent;
    font-size: 1.5rem;
    cursor: pointer;
    color: #99693d; /* Force black text color */
}

nav a,
nav ul li a {
    text-decoration: none;
    color: #99693d;
    font-weight:500;
    line-height:1.7;
    margin: 0 10px;
    font-size: 14px;
}

nav ul li a {
    color: white;
    font-weight: 900;
}
nav a:hover {
    color: #759ca3;
    transform: translateX(5px); /* Subtle movement */
}

.hero {
    background: url('images/hero-bg.png') center/cover;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color:#99693d;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent overlay */
    
}

.hero-content h1 {
    font-family: 'Quicksand', sans-serif;
    font-size: 2.7rem; /* Increased font size for impact */
    font-weight: 600; /* Semi-bold font weight */
    line-height: 1.2; /* Improved line spacing */
    letter-spacing: 0.02em; /* Subtle letter spacing */
    margin-bottom: 15px; /* Adjusted margin */
    
}
.hero-content .btn {
    background-color: #99693d;
    color: #fff;
    padding: 8px 15px;
    border-radius: 5px;
    font-size: 15px;
}
/* Hover effect */
.hero-content .btn:hover {
    background-color: #759ca3; /* Change background color on hover */
    transform: scale(1.05); /* Slightly enlarge the button on hover */
    cursor: pointer; /* Change the cursor to a pointer */
}
.intro {
    display: flex;
    padding: 30px;
    background-color: #f0f0f0;
}

.intro-text h2 {
    font-family: 'Dancing Script', cursive;
    font-size: 1.8rem;
    font-style: italic;
    color: #99693d;
    margin-bottom: 10px;
}

.intro-image img {
    max-width: 250px;
    height: 300px;
    border-radius: 5px;
    margin-right: 20px;
}

/* Values Section Styles */
.values {
    background-color: #74816b; /* Use #74816b as background color */
    padding: 30px;
    text-align: center;
}

.values-content {
    display: flex;
    justify-content: center;
}

.value {
    margin: 0 30px;
}

.value h3 {
    color: white;
    font-size: 16px;
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
}

/* Interactive Heading Lines (Values) */
.value h3::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    transform: translateX(-50%);
    width: 60%;
    height: 3px;
    background: linear-gradient(to right, #99693d, #d3d3d3);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.value:hover h3::after {
    width: 100%;
}

/* Green Line Beneath About Us and Our Values Grids */
.values-content {
    border-bottom: 3px solid #d3d3d3;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

/* Values Paragraphs */
.values p {
    font-size: 0.9rem;
    color: white; /* White color for Values paragraphs */
    line-height: 1.4;
}

/* Mission Section Styles */
.mission {
    background: linear-gradient(135deg, #f0f0f0, #fff);
    padding: 40px 20px;
}

.mission-content {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    
}

.mission-item {
    background-color: #d8d8d8;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 45%;
    margin: 10px 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mission-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.mission-item h3 {
    color: #99693d;
    font-size: 16px;
    position: relative;
    text-align: center;  /* Centers the text */
    display: block;  /* Ensures it behaves like a block element */
    margin: 0 auto;  /* Centers the block element horizontally */
}
.mission-item p {
    text-align: center; /* Center only the paragraph text */
}

/* Interactive Heading Lines (Mission) */
.mission-item h3::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    transform: translateX(-50%);
    width: 60%;
    height: 3px;
    background: linear-gradient(to right, #99693d, #d3d3d3);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.mission-item:hover h3::after {
    width: 100%;
}

.icon-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    margin: 0 auto 10px;
    border-radius: 50%;
}

.mission-item:first-of-type .icon-container {
    background-color:#99693d;
}

/* Yellow icon for "Our Vision" */
.mission-item:last-of-type .icon-container {
    background-color:  #99693d; 
}

.mission-icon {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1);
    }
    


/* Common Styles */
h3 {
    font-size: 1.5rem;
    color: #99693d;
    margin-bottom: 10px;
}

p {
    font-size: 0.9rem;
    color: #555; /* Default gray for other paragraphs */
    line-height: 1.4;
}
/*  
.counseling {
    padding: 30px;
    background-color: #fff;
    text-align: center;
}

.counseling h2 {
    color: #99693d;
    margin-bottom: 10px;
}

.counseling p {
    margin-bottom: 20px;
}

.counseling img {
    max-width: 500px;
    margin: 10px 0;
    border-radius: 8px;
}
*/
/* Why Choose Section */
.why-choose {
    background-color: #f0f0f0;
    padding: 10px; /* Reduced padding */
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.why-choose div {
    text-align: left;
    max-width: 45%;
}

.why-choose h3 {
    color: #99693d;
    font: 1.9em 'Quicksand', sans-serif;
    font-weight: 600;
    margin-bottom: 10px;
}

.why-choose ul {
    list-style-type: disc;
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.6;
}

.why-choose li {
    margin-bottom: 5px;
    padding: 10px;
    border: 1px solid #d6d6d6;
    border-radius: 5px;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.why-choose li:hover {
    border-color: #bb8b62;
    background-color: #f5f5f5;
}

.why-choose img {
    max-width: 40%; /* Adjusted width */
    max-height: 300px; /* Adjusted height */
    height: auto;
    border-radius: 8px;
    margin-top: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
/* Service Showcase Styles */
.services-showcase {
    background-color: white;
    padding: 60px 20px;
    text-align: center;
    border-radius: 8px;
}

.services-showcase h2 {
    font-size: 22px;
    color: #fff;
    margin-bottom: 30px;
    font-weight: 600;
    text-transform: capitalize;
    background-color: #74816B;
    padding: 10px 20px;
    border-radius: 8px;
}

/* Grid Layout */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-top: 30px;
}

/* Outer Card Container */
.service-card {
    position: relative;
    background-color: #d7d7d7;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    overflow: hidden;
    height: 150px;
    -webkit-perspective: 1000px;
    perspective: 1000px;
}

/* Add 3D Tilt Effect */
.service-card:hover {
    transform: scale(1.03);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.2);
}

/* Subtle Glow Border Effect */
.service-card::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 8px;
    background: linear-gradient(45deg, #7dac99ea, #99693d);
    opacity: 0.4;
    transition: opacity 0.4s ease-in-out;
    z-index: -1;
}

.service-card:hover::before {
    opacity: 1;
}

/* Front & Back Panels */
.service-front, .service-back {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out;
    will-change: transform;
}

/* Front Panel */
.service-front {
    background-color: #d7d7d7;
    color: rgb(74, 100, 78);
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

/* Back Panel */
.service-back {
    background-color: white;
    color: #fff;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

/* Flip Effect */
.service-card:hover .service-front {
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

.service-card:hover .service-back {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

/* Icon */
.service-icon {
    font-size: 2em;
    color: #99693d;
    transition: transform 0.3s ease-in-out;
    margin-bottom: 10px;
}

/* Hover Effect for Icon */
.service-card:hover .service-icon {
    transform: scale(1.2) rotate(5deg);
    color: #759ca3;
}

/* Liquid Ripple Hover Effect */
.service-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 80%);
    opacity: 0;
    transition: opacity 0.3s;
}

.service-card:hover::after {
    opacity: 1;
}

/* Text Styles */
h3 {
    font-size: 1.4em;
    margin-bottom: 8px;
    font-weight: bold;
}

/* Description Text Adjustments */
.service-back p { /* Target paragraph elements within service-back */
    font-size: 1.1em; /* Reduced font size */
    line-height: 1.4; /* Adjust line height for readability */
    padding: 0 10px; /* Add padding for spacing */
}
/* Blog Section */
#blog-section {
    text-align: center;
    padding: 30px 0;
    background: #f9f9f9;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
}

/* Blog Title (Full Width) */
.blog-title {
    font-size: 22px;
    color: #fff;
    margin: 12px auto;
    font-weight: 600;
    text-transform: capitalize;
    background-color: #74816B;
    padding: 10px 20px;
    border-radius: 5px;
    text-align: center;
    display: block;
    width: 95%;
    box-sizing: border-box;
}

/* Blog Container (Grid Layout) */
#blog-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two columns on desktop */
    gap: 15px;
    padding: 20px 0;
    background: #f9f9f9;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
}

/* Individual Blog Post */
.medium-post {
    width: 95%;
    padding: 12px;
    border-radius: 5px;
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    text-align: left;
    margin: 10px auto;
    box-sizing: border-box;
}

/* Hover Effects */
.medium-post:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Blog Post Title */
.medium-post h2 {
    font-size: 1.5em;
    color: #333;
    margin-bottom: 6px;
    transition: color 0.3s ease;
}

.medium-post a {
    text-decoration: none;
    color: #0073e6;
}

.medium-post a:hover h2 {
    color: darkgray;
}

/* Blog Date */
.medium-post p {
    font-size: 1.1em;
    color: #666;
    margin-bottom: 10px;
}

/* Blog Post Content (Hidden by Default) */
.post-content {
    display: none;
    padding: 10px;
    margin-top: 10px;
    border-top: 1px solid #ddd;
    font-size: 1.1em;
    color: #444;
    line-height: 1.8;
    max-height: 200px;
    overflow-y: auto;
    padding-right: 10px;
}

/* Scrollbar Styling */
.post-content::-webkit-scrollbar {
    width: 6px;
}
.post-content::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 10px;
}
.post-content::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

/* Toggle Button */
.toggle-content {
    background-color: #ddd;
    color: #333;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 1em;
    font-weight: 600;
    margin-top: 10px;
    display: block;
    text-align: center;
    width: 100%;
    transition: background 0.3s ease;
    font-family: 'Quicksand', sans-serif;
}

/* Button Hover */
.toggle-content:hover {
    background-color: #bbb;
}

/* Responsive Styles for Mobile */
@media (max-width: 768px) {
    #blog-container {
        grid-template-columns: 1fr; /* Single column on mobile */
    }
}
/* Base Styles for Metrics Section */
.metrics {
    background-color:white;
    padding: 20px;
    display: flex;
    justify-content: space-around;
    text-align: center;
    flex-wrap: wrap;
  
}

/* Metric Box Style (Circle Shape, #d2d2d2 Color) */
.metric {
    background-color: #74816B;
   
    border-radius: 50%; /* Make the metric circular */
    padding: 30px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 80px; /* Default width */
    height: 80px; /* Default height */
    transition: transform 0.2s ease;
    position: relative;
    margin-bottom: 20px; /* Adds space between the metrics */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    overflow: hidden;
}

/* Hover Effect to Show Description */
.metric:hover .metric-description {
    display: block; /* Display description on hover */
}

/* Metric Icon Style */
.metric-icon {
    background-color: #ffffff;
   
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.metric-icon svg {
    width: 20px;
    height: 20px;
    fill: #74816B;
}

/* Metric Percentage Style */
.metric span {
    font-size: 1em; /* Increase font size for percentages */
    font-weight: bold;
    color: white; /* Set percentage font color to white */
    text-shadow: 1px 1px 3px rgba(100, 100, 100, 0.5); /* Subtle gray */

}

/* Metric Description Style (Hidden by Default) */
.metric-description {
    
    font-size: 0.8em; /* Set font size smaller for better presentation */
    margin-top: 2px;
    color: white; /* Set description text color to white */
    font-weight: bold; /* Set description text to bold */
}

/* Testimonials Section */
.testimonials {
    background-color: #74816b;
    padding: 30px 0;
    text-align: center;
    position: relative;
}

/* Swiper Container */
.swiper-container {
    width: 80%;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

/* Change inactive pagination dot color */
.swiper-pagination-bullet {
    background-color:  grey !important; /* Or any color you prefer */
    opacity: 0.5; /* Adjust opacity if needed */
}
/* Wrapper for the slides */
.swiper-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

/* Individual Testimonial Box */
.swiper-slide {
    background: linear-gradient(to right, rgba(235, 231, 231, 0.944), rgba(137, 113, 113, 0.944)); /* Greyish-blue gradient */
    padding: 20px;
    border-radius: 10px;
    width: 100%;
    min-width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: auto;
}

/* Ensure text wraps properly inside */
.swiper-slide .quote {
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 15px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    flex-grow: 1;
}

/* Client's name */
.swiper-slide .client {
    font-style: italic;
    color: #99693d;
    font-size: small;
    margin-top: auto;
}

/* Hide navigation buttons */
.swiper-button-next,
.swiper-button-prev {
    display: none;
}

/* Title Styling (White Color) */
.testimonials h2 { /* Assuming your title is an <h2> tag */
    color: white; /* Set title color to white */
    font-size: 22px; /* Adjust font size as needed */
    margin-bottom: 20px; /* Add some space below the title */
}
/* Coaching Journey Section */

.coaching-journey {
    max-width: 900px;
    margin: 50px auto;
    text-align: center;
    font-family: 'Poppins', sans-serif;
}

.coaching-journey h2 {
    font-size: 1.8rem !important;
    color: #333;
    margin-bottom: 20px;
}

/* Adjust font size for smaller screens (tablets) */
@media (max-width: 768px) {
    .coaching-journey h2 {
        font-size: 1.6rem !important; /* Smaller font size on tablets */
    }
}

/* Adjust font size for even smaller screens (phones) */
@media (max-width: 480px) {
    .coaching-journey h2 {
        font-size: 1.2rem !important; /* Even smaller font size on phones */
    }
}
.coaching-journey p {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 30px;
}

.stages-container {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.stage-item {
    flex: 1 1 30%;
    text-align: left;
}

.stage-button {
    background-color: #99693d;
    color: white;
    font-size: 0.9rem;
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    transition: background-color 0.3s ease;
    font-family: 'Poppins', sans-serif;
    
}

.stage-button:hover {
    background-color: #d7d7d7;
}

.plus {
    font-size: 1.4rem;
    transition: transform 0.3s ease;
}

.stage-content {
    display: none;
    padding: 10px;
    margin-top: 10px;
    background-color: #f4f4f4;
    border-left: 5px solid #99693d;
    font-size: 0.7rem;
    color: #333;
    border-radius: 5px;
    transition: opacity 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/* Fancy Line Under Heading */
.coaching-journey h2 {
    font-size: 1.8rem;
    color: #333;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 15px;
}

/* Gradient Line Divider */
.coaching-journey h2::after {
    content: "";
    width: 100px;
    height: 4px;
    background: linear-gradient(to right, #99693d, #d7d7d7);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2px;
}

/* Form and Contact Section */
.contact-form {
    text-align: center;
    display: flex;
    min-height: 200px;
    position: relative; /* Needed for absolute positioning of the form */
}
.contact-background {
    background-color: #759ca3;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 85%;
    padding: 50px;
    clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
    transition: all 0.3s ease-in-out;
}
.contact-content {
    background-color: #fff;
    width: 50%;
    padding: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    display: none;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(to bottom right, #f5f5f5, #e0e0e0);
}
.contact-link {
    color:white;
}
.contact-form form {
    max-width: 400px;
    padding: 30px;
}

.form-group {
    margin-bottom: 20px;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
    font-family: 'Poppins', sans-serif;  
    color: #999;  /* You can change the color as needed */
    box-sizing: border-box;
    background-color: #f9f9f9;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-form input:hover,
.contact-form textarea:hover {
    border-color: #99693d;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    box-shadow: 0 0 5px rgba(160, 82, 45, 0.3);
}

.contact-button {
    background-color: #99693d;
    color: #fff;
    padding: 12px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    transition: background-color 0.3s ease;
}

.contact-button:hover {
    background-color: #8b4536;
}

.contact-button i {
    margin-left: 10px;
}

.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: transparent;
    border: none;
    font-size: 20px;
    cursor: pointer;
}
.social-media {
    display: flex;
    justify-content: center;
    gap: 15px;
    padding: 20px 0;
}

.social-media a {
    font-size: 1.5rem;
    color: #555;
    transition: color 0.3s ease-in-out;
}

.social-media a:hover {
    color: #74816B;
}


/* Footer Section */
footer {
    text-align: center;
    padding: 20px;
    background-color: #D3D3D3;
}

footer nav {
    margin-bottom: 10px;
    align-items: center;
    justify-content: center;
}

footer nav a {
    margin: 0 10px;
    text-decoration: none;
    color: #99693d;
    font-weight: bold;
    transition: color 0.3s ease;
}

footer nav a:hover {
    color: #ed9c33;
}
.scroll-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
   
    color: white;
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 999; /* Ensure it's on top */
}

.scroll-to-top.show {
    opacity: 1;
}

.scroll-to-top svg {
    fill: #99693d;
}
footer p {
    font-size: 0.9rem;
    color: #666;
}

/* ==========================================================================
   Responsive Adjustments (General)
   ========================================================================== */

@media (max-width: 768px) {
    /* Base Body Styling for Smaller Screens */
    body {
        font-size: 12px;
    }

    /* Header Adjustments */
    header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 40px;
    }

    .logo img {
        max-width: 80px; /* Adjust this value as needed */
        margin-left: -20px; /* Adjust the value as needed */
    
    }


    /* Hamburger Menu */
.hamburger {
    display: block;
    background: none;
    border: none;
    padding: 0;
    font-size: 1.4rem;
    cursor: pointer;
    position: relative;
    z-index: 1000;
    -webkit-tap-highlight-color: transparent; /* Disable tap highlight on iOS */
}

.hamburger .fa-bars {
    display: block;
}

.hamburger .close-icon {
    display: none;
}

.hamburger.close .fa-bars {
    display: none;
}

.hamburger.close .close-icon {
    display: block;
}

   /* Navigation Menu */
nav {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 40px; /* Adjusted top margin */
    right: 10px; /* Adjusted right margin */
    width: 40%; /* Reduced width */
    background-color: #d3d3d3;
    text-align: center;
    transition: max-height 0.3s ease-in-out, padding 0.3s ease;
    max-height: 0;
    overflow: hidden;
    z-index: 1001;
}

/* Show navigation menu when activated */
nav.show {
    max-height: 250px; /* Reduced max-height for better fit */
    padding: 2px 0; /* Reduced padding to save space */
}

/* Navigation links */
nav a {
    margin: 2px 0; /* Reduced margin between links */
    padding: 5px 10px; /* Reduced padding for smaller clickable area */
    font-size: 0.8rem; /* Slightly smaller font size */
    transition: color 0.3s ease, transform 0.3s ease;
}

/* Hover effect for links */
nav a:hover {
    color: #ed9c33;
    transform: translateX(5px); /* Subtle movement */

}
/* Hide Contact Info on Mobile */
@media (max-width: 768px) {
    .headcontact-info {
        display: none;
    }
}


    /* Hero Section */
    .hero {
        height: 150px;
        padding: 50px 20px;
       
    }

    .hero-content h1 {
        font-size: 1.5rem;
        margin-bottom: 20px;
    }

    .hero-content .btn {
        font-size: 12px;
        padding: 6px 12px;
    }
    /* Hero Section for Smaller Screens (max-width: 480px for Mobile Devices) */
@media (max-width: 480px) {
    .hero {
        height: 120px; /* Adjust the height for mobile devices */
        padding: 30px 15px; /* Adjust the padding for smaller screens */
        text-align: center; /* Center the content for smaller screens */
    }

    /* Adjust the text styling for smaller devices */
    .hero h1 {
        font-size: 1.3rem; /* Reduce the font size for the title */
    }
    .hero-content .btn {
        font-size: 12px !important;
    }
    .hero p {
        font-size: 0.9rem; /* Reduce the font size for the paragraph */
    }
}



/* Responsive Styling for Smaller Screens */
@media (max-width: 768px) {
    .intro {
        display: block; /* Make the section block-level so the text can flow */
    }

    .intro-image {
        float: left; /* This will make the image float to the left */
        margin-right: 20px; /* Space between image and text */
        margin-bottom: 15px; /* Space below the image */
    }

    .intro-image img {
        width: 100px; /* Set width to 100px for small screens */
        height: 100px; /* Set height to 100px for small screens */
        border-radius: 15px; /* Add curved corners (adjust this value for desired curve) */
        object-fit: cover; /* Ensures the image covers the area inside the box */
    }

    .intro-text p {
        font-size: 0.9rem; /* Reduced font size */
        line-height: 1.5; /* Ensure readable spacing */
    }

    .intro-text h2 {
        font-size: 1.1rem; /* Reduced the heading font size */
        margin-bottom: 5px;
    }
}

/* Responsive Styling for Medium Devices (Tablets/iPads) */
@media (min-width: 768px) {
    .intro-image img {
        width: 200px; /* Increase image size for medium devices */
        height: 200px; /* Increase height for medium devices */
    }

    .intro-text h2 {
        font-size: 1.6rem; /* Slightly increase the font size for headings on medium screens */
    }

    .intro-text p {
        font-size: 1rem; /* Adjust paragraph text size */
    }
}

    /* Values and Mission Sections */
    .values-content, .mission-content {
        flex-direction: column;
        align-items: center;
    }

    .value, .mission-item {
        margin: 20px 0;
        width: 90%;
    }

    /* Why Choose Section */
    .why-choose {
        flex-direction: column;
        align-items: center;
        padding: 20px;
    }

    .why-choose div {
        max-width: 90%;
        margin-bottom: 20px;
    }

    .why-choose img {
        max-width: 70%;
        border-radius: 6px;
        height: 300px;
        display: block;
        margin: 0 auto 15px;
    }

    /* Testimonials Section */
   /* .testimonial-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .testimonial {
        max-width: 45%;
        margin: 8px 0;
        padding: 15px;
        box-sizing: border-box;
        text-align: left;
    }

    .testimonial-title {
        font-size: 1.2em;
        margin-bottom: 5px;
    }

    .testimonial p {
        font-size: 0.8em;
        line-height: 1.4;
    }

    .testimonial:nth-child(n+3) {
        display: none;
    }
*/
    /* Coaching Journey Section */
    .coaching-journey {
        max-width: 95%;
        padding: 20px;
    }

    .stages-container {
        flex-direction: column;
    }

    .stage-item {
        width: 100%;
        margin-bottom: 10px;
    }
/* Contact Section (Mobile) */
@media (max-width: 768px) {
    .contact-form {
        flex-direction: column;
    }

    .contact-background {
        width: 100%;
        clip-path: none;
        padding: 10px 0; /* Adjusted padding, removed horizontal padding */
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: auto;
        box-sizing: border-box; /* Important */
    }

    .contact-background h1,
    .contact-background p {
        max-width: 95%; /* Increased to 95% */
        margin: 3px auto; /* Centered with auto margins */
        font-size: 0.9rem;
        word-wrap: break-word; /* Ensure wrapping */
        overflow-wrap: break-word; /* Ensure wrapping */
        padding: 0 5px; /* add horizontal padding to the text elements */
    }

    .contact-content {
        width: 100%; /* Changed to 100% */
        position: static;
        transform: none;
        margin-top: 20px;
        box-sizing: border-box; /* Important */
        padding: 0 5px; /* add horizontal padding to the content. */
    }

    .contact-form form {
        max-width: 100%;
        box-sizing: border-box; /* Important */
    }
}
}

/* ==========================================================================
   Mobile Styles (480px and below)
   ========================================================================== */
@media (max-width: 480px) {
    /* Service Card Adjustments */
    .service-card {
        height: 120px;
        padding: 0;
    }

    .service-front, .service-back {
        padding-top: 15px;      /* Adjust top padding */
        padding-bottom: 15px;   /* Adjust bottom padding */
        padding-left: 0;       /* Remove left padding */
        padding-right: 0;      /* Remove right padding */
        display: flex;
        flex-direction: column; /* Stack items vertically */
        justify-content: center; /* Center content vertically */
        align-items: center; /* Center content horizontally */
        text-align: center; /* Ensure text is centered */
    }

    .service-icon {
        font-size: 1.2em;
        margin-bottom: 6px; /* Adjust spacing between icon and title */
    }

    /* Services Showcase Adjustments */
    .services-showcase h2 {
        font-size: 16px;
        text-align: center;
    }

    /* Heading Adjustments */
    h3 {
        font-size: 1.2em;
        margin-bottom: 6px;
    }


    /* Hero Content Adjustments */
    .hero {
        height: 100px;
        backdrop-filter: blur(6px);
    }

    .hero-content h1 {
        font-size: 1.5rem;
    }
    .hero-content p {
        font-size: 11px; /* Adjust font size for p as needed */
        margin-top: -20px;
      }

    .hero-content .btn {
        font-size: 10px;
        margin-top: -10px;
    }

  /* Testimonials Section */
  /*.testimonial-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.testimonial {
    max-width: 50%;
    margin: 8px 0;
    padding: 15px;
    box-sizing: border-box;
    text-align: left;
}

.testimonial-title {
    font-size: 1.4em;
    margin-bottom: 5px;
}

.testimonial p {
    font-size: 0.8em;
    line-height: 1.2;
}

.testimonial:nth-child(n+3) {
    display: none;
}
*/

  /* Why Choose Image Adjustments */
  .why-choose img {
    max-width: 90%; /* Adjust as needed */
    max-height: 250px; /* Adjust as needed */
    margin: 10px auto;
    display: block;
    height: auto;
}

/* Intro Image Adjustments */
.intro-image img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 10px auto;
}
}
/* Blog section */
@media (max-width: 768px) {
    #blog-container {
        width: 95%;
        margin: 0 auto;
        
    }
}

@media (max-width: 768px) {
    .blog-title {
        font-size: 20px;
        padding: 12px 20px;
    }
    
    .medium-post {
        max-width: 90%;
        padding: 15px;
    }
    
    .medium-post h2 {
        font-size: 1.5em;
    }
    
    .post-content {
        font-size: 1em;
        max-height: 180px;
    }
    
    .toggle-content {
        font-size: 0.9em;
        padding: 8px 12px;
    }
}

@media (max-width: 480px) {
    .blog-title {
        font-size: 16px;
        padding: 10px 15px;
    }
    
    .medium-post {
        max-width: 95%;
        padding: 12px;
    }
    
    .medium-post h2 {
        font-size: 1.3em;
    }
    
    .post-content {
        font-size: 0.9em;
        max-height: 150px;
    }
    
    .toggle-content {
        font-size: 0.85em;
        padding: 7px 10px;
    }
}
/* Hide the entire metrics section on small screens */
@media (max-width: 480px) {  /* Adjusted to hide on small phones */
    .metrics{ 
        display: none !important;  
        visibility: hidden; /* Extra precaution */
    }
}

    /* Tablet Styles */
    @media (min-width: 481px) and (max-width: 768px) {
        .metric {
            width: 50px; /* Reduced width */
            height: 50px; /* Reduced height */
        }

        .metric-icon svg {
            width: 22px; /* Reduced icon size */
            height: 22px; /* Reduced icon size */
        }

        .metric span {
            font-size: 0.8em; /* Adjusted font size */
        }

        .metric-description {
            font-size: 0.8em; /* Adjusted font size */
        }
    }