/* Variables */
:root {
    --primary-green: #FF9800;      /* Main Green */
    --light-green-bg: #0a937a;    /* Very light green for background */
    --accent-orange: #FF9800;     /* Orange for buttons/accents */
    --text-dark: #333333;
    --text-muted: #5a5a5a;
    --white: #ffffff;
    --border-color: #FF9800;      /* Tinted green border */
}

/* Reset */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
   
}



.bhYgyu ul, .bhYgyu li {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0 !important;
    font-size: medium;
}

body {
    /* 1. Use the wave image as the repeating background */
    background-image: url('../../evidya/war/resources/product/images/wemoch/light-blue-green-background-with-clouds-vector.jpg'); 
    
    /* 2. The repeat tag your boss requested */
    background-repeat: repeat; 
    
    /* 3. Scale the image so the waves aren't too tiny or too huge */
    background-size: 600px; 
    
    /* 4. Keep the background fixed so only the content scrolls over it */
    background-attachment: fixed;
    
    /* 5. A fallback color in case the image doesn't load */
    background-color: var(--light-green-bg);
    line-height: 1.7;
    color: #000000;
    font-size: 16px !important;
    
}

/* Header */
header {
    padding: 25px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--light-green-bg) !important; /* Matches the background color */
}

.logo {
  display: flex;
  align-items: center;
    margin: 0 !important;
  
}
.main-menu{
  margin-left: auto;   /* ⭐ KEY LINE */
  display: flex;
  align-items: center;
  gap: 30px;
}

.btn-contact {
    background: #FF9800 !important; /* Change this to Orange */
    color: var(--white) !important;
    padding: 10px 20px;
    border-radius: 5px;
    transition: opacity 0.3s;
}

.btn-contact:hover {
    opacity: 0.9;
}

/* Hero Section */
.hero {
    padding: 70px 0 40px;
}

h1 {
    font-family: 'Playfair Display', serif;
    font-size: 48px !important;    /* Much larger than the 18px body */
    color: #000000 !important; /* Pure Black */
    line-height: 1.2;
    margin-bottom: 20px;
}

.hero h2 {
    font-size: 17px !important;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 25px;
    max-width: 800px;
}
/* Heading 3 - Section titles like "What is AYUDH" or "Why This Matters" */
h3 {
    font-family: 'Playfair Display', serif;
    font-size: 32px !important;    /* Big enough to act as a section break */
    color: #000000 !important; /* Pure Black */ 
    margin-bottom: 20px;
    letter-spacing: 0.5px;
}

.blue-line {
    width: 60px;
    height: 4px;
    background: var(--primary-blue);
    margin-bottom: 25px;
}

.hero p {
    max-width: 850px;
    font-size: large !important;
    color: #000000;
}

/* Cards */
/* This creates the side-by-side layout for desktop */
.cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    gap: 25px;                      /* Space between the two cards */
    margin: 40px 0;
}

/* This creates the specific design seen in your images */
.accent-card {
    background: #ffffff !important;   /* Solid white background */
    border-radius: 20px !important;   /* Rounded corners */
    border-left: 10px solid #2c537a !important; /* Change this to Green */
    padding: 40px !important;         /* Generous internal spacing */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important; /* Soft shadow for "lifted" look */
    display: flex;
    flex-direction: column;
}

/* Ensures the text inside matches the professional look */
.accent-card h3 {
    margin-top: 0;
    font-size: 24px !important;
    color: #000000 !important; /* Pure Black */
    margin-bottom: 15px;
}

.accent-card p {
    font-size: 18px !important;       /* Larger text for readability */
    line-height: 1.7;
    color: #555555;
}

/* Mobile Fix: Make cards stack on top of each other on small screens */
@media (max-width: 767px) {
    .cards-grid {
        grid-template-columns: 1fr;
    }
}

/* Specific styling for the bold letters in the acronym */
.accent-card strong {
    color: #333333;
    font-weight: 700;
}

/* Why This Matters */
.split-section {
    display: flex;
    gap: 60px;
    align-items: center;
    margin: 80px 0;
    flex-wrap: wrap;
}

.split-text { flex: 1.2; min-width: 320px; }
.split-image { flex: 1; min-width: 320px; }

.split-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

/* Table */
/* --- Modern Grid/Table Styles --- */
.table-container {
    width: 100%;
    overflow-x: auto; /* Enable horizontal scroll if content is too wide */
    -webkit-overflow-scrolling: touch;
    margin: 20px 0;
    padding: 5px;
}

table {
    width: 100%;
    border-collapse: separate; 
    border-spacing: 10px; /* Space between cells */
    table-layout: fixed;   /* Forces columns to stay equal width */
}

td {
    background: #ffffff;
    padding: 20px;
    vertical-align: top;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    word-wrap: break-word; /* Prevents text from breaking the cell */
}

/* --- MOBILE "STAY A TABLE" MEDIA QUERY --- */
/* --- NEW STATIC MOBILE VIEW (VERTICAL CARDS) --- */
@media (max-width: 767px) {
    /* 1. Reset the container to remove the scrollbar and outer border */
    .table-container {
        overflow-x: visible; 
        background: transparent; 
        box-shadow: none;
        border: none;
        padding: 0;
    }

    /* 2. Force the table to stop acting like a table and stack elements */
    table, tbody, tr, td {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important; /* Unsets the 800px width */
    }

    /* 3. Style each individual cell (td) as an independent white card */
    td {
        margin-bottom: 20px !important; /* Space between cards */
        padding: 25px !important;
        background: #ffffff !important;
        border: 1px solid #FF9800 !important; /* The Orange border from your screenshot */
        border-radius: 15px !important; /* Rounded corners */
        box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
    }

    /* 4. Ensure the titles inside the cards are clearly visible */
    .table-title {
        font-size: 20px !important;
        margin-bottom: 15px !important;
        color: #000000 !important;
    }

    /* 5. Hide the horizontal scroll indicator */
    .table-container::after {
        display: none !important;
    }
}

@media (max-width: 767px) { 
    .table-container {
        overflow-x: visible; 
        /* ... existing code ... */
    }
    table, tbody, tr, td {
        display: block !important;
        border: 0;
        /* ... existing code ... */
    }
    /* Reduce vertical gap between sentences in mobile view */
    td ul {
        margin-top: 5px !important;
    }

    td li {
        line-height: 1.3 !important;   /* Makes lines closer together */
        margin-bottom: 5px !important; /* Reduces gap between bullet points */
        font-size: 15px !important;    /* Slightly smaller for better fit */
    }
    /* 1. Reduce Table Card Heading Size  */
    .table-title {
        font-size: 10px !important; /* Smaller size to try and keep it on one line */
        letter-spacing: -0.2px;    /* Tightens characters slightly */
        margin-bottom: 10px !important;
        display: flex !important;
        align-items: center;
    }

    /* 2. Reduce the gap between sentences inside the boxes */
    td li {
        line-height: 1.2 !important;   /* Brings lines closer together */
        margin-bottom: 3px !important;  /* Reduces gap between bullet points */
        font-size: 14px !important;    /* Slightly smaller text for better fit */
    }

    /* 3. Remove the <br> spacing inside the boxes to save vertical space */
    td br {
        display: none !important;
    }
}

/* Hover effect to make it interactive */
td:hover {
    border-color: #008080;
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* --- The Icon & Title Formatting --- */
.table-title {
    color: #000000 !important; /* Pure Black as requested */
    font-size: 19px !important;
    font-weight: 600 !important;
    margin-bottom: 15px;
    display: flex;             /* Required for icon alignment */
    align-items: center;
    gap: 12px;                 /* Space between icon and text */
}

/* Styling the Font Awesome icons inside the title */
.table-title i {
    color: var(--primary-green); 
    font-size: 22px;
    width: 30px;               /* Keeps icons aligned even if widths vary */
    text-align: center;
}



/* Specific colors based on your image */
.fa-video, .fa-users { color: #6f42c1; }      /* Purple */
.fa-palette { color: #e83e8c; }              /* Colorful/Pinkish */
.fa-brain { color: #ff69b4; }                 /* Bright Pink */
.fa-school { color: #856404; }                /* Brown/Gold */
.fa-laptop { color: #007bff; }                /* Blue */
.fa-clipboard-check { color: #28a745; }      /* Green */
.fa-comments { color: #17a2b8; }              /* Teal */
.fa-certificate { color: #fd7e14; }           /* Orange */


/* Form Section */
.cta-section {
    text-align: center;
    margin-bottom: 100px;
}

.contact-form {
    background: var(--white);
    max-width: 600px;
    margin: 40px auto;
    padding: 40px;
    border-radius: 15px;
    text-align: left;
    box-shadow: 0 15px 40px rgba(0,0,0,0.06);
}

.form-title {
    font-size: 1.1rem;
    margin-bottom: 25px;
    text-align: center;
    color: var(--primary-blue);
}

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

label {
    display: block;
    font-size: 0.85rem;
    margin-bottom: 8px;
    font-weight: 700;
}

input, textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-family: inherit;
}

.submit-btn {
    background: var(--primary-blue);
    color: var(--white);
    border: none;
    width: 100%;
    padding: 15px;
    font-weight: 700;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s;
}

/* Footer */
footer {
    text-align: center;
    padding-bottom: 60px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.footer-logo {
    color: var(--primary-blue);
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 10px;
}

/* Responsive Tablet/Mobile */
@media (max-width: 767px) {
    .curriculum-grid { grid-template-columns: 1fr; }
    h1 { font-size: 2.2rem; }
    .info-card { padding: 30px; }
}

@media (max-width: 600px) {
    header { flex-direction: column; gap: 15px; }
    nav a { margin: 0 10px; font-size: 13px; }
    .split-section { margin: 40px 0; }
    .highlights-grid { grid-template-columns: 1fr 1fr; }
}


/* --- Added Styles for Logo and Banner --- */

.nav-logo {
    height: 50px; /* Adjust size to fit your header height */
    width: auto;
    display: block;
    margin : 5px;
    flex: 0 0 auto;
}

.wemoch-banner {
    width: 100%;
    height: 600px; 
    
    /* 2. Professional image handling */
    background-size: cover;      /* Scales image to fill the area */
    background-position: center; /* Keeps faces in the middle */
    background-repeat: no-repeat;
    
  
}

/* Optional: Adds a subtle dark tint so it looks like a premium hero banner */
.banner-overlay {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.15); 
}

/* FIXED: Reduced Hero Gaps */
.hero { padding: 30px 0; }

.blue-line { width: 60px; height: 5px; background: var(--primary-blue); /* Change this to Green */ margin-bottom: 15px; }

/* FIXED: Side-by-Side Cards (Fixes vertical spacing) */
.cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin: 20px 0;
}
.accent-card {
    background: var(--white);
    border-radius: 15px; 
    border-left: 8px solid var(--primary-blue); 
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

/* Split Section */
.split-section { display: flex; gap: 40px; align-items: center; margin: 40px 0; }
.split-text { flex: 1.2; }
.split-image img { width: 100%; border-radius: 12px; }

/* Table Styling */
.table-container { background: var(--white); border-radius: 12px; padding: 10px; margin: 20px 0; overflow-x: auto; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
table { width: 100%; border-collapse: collapse; }
td { padding: 20px; vertical-align: top; border: 1px solid var(--border-color); font-size: 0.95rem; }
.table-title { font-weight: 700; color: var(--primary-blue); display: block; margin-bottom: 5px; }

/* CTA & Footer */
.cta-section { text-align: center; margin: 50px 0; padding: 40px; background: var(--white); border-radius: 15px; }
footer { text-align: center; padding: 40px 0; border-top: 1px solid var(--border-color); }
.footer-logo { font-weight: 700; color: var(--primary-blue); font-size: 1.2rem; }

/* Responsive Mobile */
@media (max-width: 767px) {
    .cards-grid, .split-section { grid-template-columns: 1fr; flex-direction: column; }
    h1 { font-size: 2.2rem; }
    .container { padding: 0 20px; }
}
.hero-margin{
margin:0 8%;    
}
/* This is the code your senior requested for mobile */
@media (max-width: 767px) {
    .hero-margin {
        margin: 0; /* This 'unsets' the 8% side margins */
        padding: 0 20px; /* Optional: adds a small safe gap so text doesn't touch the screen edge */
    }
}


@media (max-width: 767px) {
    .wemoch-banner {
        width: 100%;
        height: 250px; /* Reduced height for mobile screens */
        background-image: url('../../resources/product/images/wemoch/wemoch-Banner.jpg');
        background-size: cover;
        background-position: center center;
    }
}
/* --- FINAL STYLE OVERRIDES --- */

/* 1. All Headings to Black */
h1, h2, h3, .table-title, .accent-card h3 {
    color: #000000 !important; 
}

/* 2. Keep Brand Accents Green */
.blue-line {
    background: #FF9800 !important;
}

.accent-card {
    border-left: 10px solid #FF9800 !important;
}


    
    /* General Header Styling */
.main-header-menu .page-header-wrapper {
    padding: 10px;
    background: #0a937a; /* The teal color from your images */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.applicationlogo {
    max-height: 45px;
}

/* Visibility Fixes - Forced Tablet/Foldable Support */

/* 1. Desktop View: Only show menu if screen is wider than 1024px */
@media (min-width: 1025px) {
    .visible-xs {
        display: none !important; 
    }
}

/* 2. Tablet & Mobile View: Trigger mobile menu for everything 1024px and below */
@media (max-width: 1024px) {
    .hidden-xs {
        display: none !important; /* Hides the overlapping desktop menu on iPads/Zenbooks */
    }
    .visible-xs {
        display: block !important; /* Shows the mobile hamburger bar */
    }

    /* Mobile Header Styling */
    .mobile-header-content {
        display: flex !important;
        align-items: center !important;
        height: 60px;
        padding: 0 15px;
        background: #0a937a;
        border-bottom: 2px solid #4CAF50 !important;
    }

    .custom-hamburger {
        font-size: 24px;
        color: #333;
        margin-right: 20px;
    }

    /* Mobile Dropdown Styling */
    .mobile-dropdown-panel {
        position: absolute;
        width: 100%;
        background: #ffffff;
        z-index: 9999;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }

    .mobile-nav-list { list-style: none; padding: 0; margin: 0; }
    
    .mobile-nav-list li a {
        display: block;
        padding: 15px 20px;
        color: #333;
        font-weight: 600;
        border-bottom: 1px solid #f5f5f5;
        text-decoration: none;
    }

    /* FIXED LOGIN: White background/Orange text for all mobile/tablet views */
    .mobile-nav-list li a.btn-contact {
        background: #ffffff !important;   
        color: #FF9800 !important;        
        padding: 15px 20px !important;    
        border-radius: 0px !important;    
        text-align: left !important;      
        border-bottom: 1px solid #f5f5f5; 
    }
}