/* General Body & Typography */
:root {
    --bg-dark: #07071A; /* Very dark background */
    --bg-medium: #0D0D2B; /* Slightly lighter for header/cards */
    --bg-light-accent: #1A1A3E; /* Lightest dark for elements like taglines */
    --text-light: #E0E0E0;
    --text-medium: #B0B0B0;
    --heading-color: #FFFFFF;
    --legal-color: #8A2BE2; /* Blue Violet */
    --it-color: #9370DB; /* Medium Purple */
    --creative-color: #FF69B4; /* Hot Pink */
    --bullet-color: #8A2BE2;

    --button-primary-start: #6A1B9A; /* Dark Purple */
    --button-primary-end: #8A2BE2;   /* Blue Violet */
    --button-secondary-border: #8A2BE2;
    --button-text-hover: #FFFFFF;

    --badge-bg: rgba(255, 255, 255, 0.05);
    --border-color: rgba(255, 255, 255, 0.1);
    --font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

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

body {
    font-family: var(--font-family);
    line-height: 1.6;
    color: var(--text-light);
    background-color: var(--bg-dark);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden; /* Prevent horizontal scroll from gradients */
}

a {
    color: var(--legal-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--creative-color);
}

main {
    flex: 1; /* Allow main content to grow */
}

/* Header */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 5%;
    background-color: var(--bg-medium);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.logo-container {
    display: flex;
    align-items: center;
}

.logo-link {
    display: flex;
    align-items: center;
    color: var(--text-light);
    font-size: 1.4rem;
    font-weight: 700;
}

.logo-img {
    height: 36px;
    width: 36px;
    margin-right: 10px;
    border-radius: 5px; /* if the logo has sharp corners and you want a slight round */
}

.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.logo-text .firm-name {
    font-size: 1.1rem; /* Slightly smaller for balance */
    font-weight: 700;
    color: var(--text-light);
}

.logo-text .proprietor-name {
    font-size: 0.75rem; /* Matches image */
    font-weight: 400;
    color: var(--text-medium);
}

header nav {
    display: flex;
    gap: 2rem;
}

header nav a {
    color: var(--text-light);
    font-weight: 500;
    padding: 0.5rem 0;
    position: relative;
    transition: color 0.3s ease;
}

header nav a:hover,
header nav a.active {
    color: var(--legal-color); /* Active/hover color from primary */
}

header nav a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0%;
    height: 2px;
    background-color: var(--legal-color);
    transition: width 0.3s ease-in-out;
}

header nav a:hover::after,
header nav a.active::after {
    width: 100%;
}

.contact-button {
    background: linear-gradient(90deg, var(--button-primary-start), var(--button-primary-end));
    color: white;
    border: none;
    padding: 0.7rem 1.6rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.contact-button:hover {
    background: linear-gradient(90deg, var(--button-primary-end), var(--button-primary-start)); /* Invert gradient on hover */
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

/* Hero Section */
.hero {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6rem 5%; /* Increased padding for more space */
    min-height: calc(100vh - 70px); /* Adjust based on header height */
    gap: 5%; /* Flexible gap */
    position: relative;
    overflow: hidden;
}

/* Background Gradients */
.hero::before,
.hero::after {
    content: '';
    position: absolute;
    border-radius: 50%; /* Makes them circular */
    filter: blur(120px); /* More blur */
    opacity: 0.4; /* Slightly less opaque */
    z-index: 0;
}

.hero::before { /* Top-left purple glow */
    width: 450px;
    height: 450px;
    top: -100px;
    left: -100px;
    background: radial-gradient(circle, rgba(138, 43, 226, 0.3) 0%, transparent 70%);
}

.hero::after { /* Bottom-right pinkish glow */
    width: 500px;
    height: 500px;
    bottom: -150px;
    right: -150px;
    background: radial-gradient(circle, rgba(255, 105, 180, 0.25) 0%, transparent 70%);
}

.hero-content {
    flex: 1;
    max-width: 650px; /* Max width for content to align to image */
    z-index: 1;
    text-align: left; /* Ensure left alignment */
}

.hero-image-display {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 500px; /* Fixed width for the image area */
    height: 500px; /* Fixed height for the image area */
    background: rgba(255, 255, 255, 0.03); /* Subtle dark background */
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(15px); /* More blur for the glass effect */
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    z-index: 1;
}

.hero-image-display::before { /* Inner dashed border effect */
    content: '';
    position: absolute;
    top: 10%;
    left: 10%;
    right: 10%;
    bottom: 10%;
    border: 2px dashed rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    z-index: 0;
}

.large-logo {
    width: 80%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 20px rgba(138, 43, 226, 0.6)); /* Enhanced glow */
    z-index: 1;
}

/* Stat Bubbles around the logo */
.stat-bubble {
    position: absolute;
    background: rgba(255, 255, 255, 0.08); /* Semi-transparent background */
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 15px;
    padding: 0.8rem 1.2rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-light);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    text-align: center;
    line-height: 1.3;
}

/* Positioning specific bubbles as per image */
.stat-bubble.s1 { top: 15%; left: -25%; } /* "27+ Years" */
.stat-bubble.s2 { top: -5%; right: 10%; } /* "Multi-Disciplinary" */
.stat-bubble.s3 { bottom: -5%; left: 20%; } /* "Legal & IT" */
.stat-bubble.s4 { bottom: 20%; right: -20%; } /* "24/7 Support" */


.tagline {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-medium);
    margin-bottom: 1.5rem;
    padding: 0.5rem 1rem;
    background-color: var(--bg-light-accent);
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--border-color);
}

.tagline i {
    color: var(--creative-color); /* Using creative color for the star icon */
}

.hero h1 {
    font-size: 4.2rem; /* Even larger for impact */
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1rem;
    color: var(--heading-color);
}

.hero h1 .bullet {
    color: var(--bullet-color); /* Consistent bullet color */
    font-size: 0.8em;
    vertical-align: middle;
}

.hero h1 .creative-text {
    color: var(--creative-color); /* Specific color for "Creative" */
}

/* Individual word colors (as seen in image for 'Legal' and 'IT') */
/* You would need to wrap these words in spans if you want different colors.
   For now, the overall H1 is white, and 'Creative' is pink. */
/* Example if you wanted:
.hero h1 .legal-word { color: var(--legal-color); }
.hero h1 .it-word { color: var(--it-color); }
You would change HTML to: <h1><span class="legal-word">Legal</span> <span class="bullet">•</span> <span class="it-word">IT</span> ... </h1>
*/


.subtitle {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--legal-color); /* Using legal color for subtitle */
    margin-bottom: 1.5rem;
}

.description {
    font-size: 1.05rem;
    color: var(--text-medium);
    margin-bottom: 2.5rem;
    max-width: 550px;
}

.hero-buttons {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.button {
    display: inline-flex;
    align-items: center;
    padding: 1rem 2.2rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1.05rem;
    transition: all 0.3s ease;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.button.primary {
    background: linear-gradient(90deg, var(--button-primary-start), var(--button-primary-end));
    color: white;
    border: none;
}

.button.primary i {
    margin-left: 0.8rem;
    transition: transform 0.3s ease;
}

.button.primary:hover {
    background: linear-gradient(90deg, var(--button-primary-end), var(--button-primary-start));
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.button.primary:hover i {
    transform: translateX(5px);
}

.button.secondary {
    background: transparent;
    color: var(--button-secondary-border);
    border: 2px solid var(--button-secondary-border);
}

.button.secondary:hover {
    background-color: var(--button-secondary-border);
    color: var(--button-text-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(138, 43, 226, 0.4);
}

.hero-footer-badges {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    font-size: 0.95rem;
}

.badge {
    background-color: var(--badge-bg);
    color: var(--text-light);
    padding: 0.7rem 1.2rem;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.badge i {
    color: var(--creative-color); /* Icon color in badges */
}

/* Responsive Adjustments */
@media (max-width: 1200px) {
    .hero {
        flex-direction: column;
        text-align: center;
        padding: 4rem 5%;
        gap: 3rem;
    }
    .hero-content {
        max-width: 100%;
    }
    .hero-image-display {
        width: 400px;
        height: 400px;
    }
    .stat-bubble {
        padding: 0.6rem 1rem;
        font-size: 0.8rem;
    }
    .stat-bubble.s1 { top: 10%; left: -15%; }
    .stat-bubble.s2 { top: -5%; right: -5%; }
    .stat-bubble.s3 { bottom: -5%; left: 10%; }
    .stat-bubble.s4 { bottom: 10%; right: -15%; }
}

@media (max-width: 992px) {
    header {
        flex-direction: column;
        padding: 1rem 5%;
        gap: 1rem;
    }
    header nav {
        gap: 1rem;
        justify-content: center;
        flex-wrap: wrap;
    }
    .contact-button {
        width: 100%;
        max-width: 250px;
    }
    .hero h1 {
        font-size: 3.5rem;
    }
    .subtitle {
        font-size: 1.2rem;
    }
    .hero-buttons, .hero-footer-badges {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    header {
        padding: 0.8rem 4%;
    }
    .logo-img { height: 30px; width: 30px; }
    .logo-text .firm-name { font-size: 1rem; }
    .logo-text .proprietor-name { font-size: 0.7rem; }

    header nav {
        display: none; /* Hide navigation on small screens, consider a hamburger menu if needed */
    }

    .contact-button {
        display: none; /* Hide top contact button if nav is hidden */
    }

    .hero {
        padding: 3rem 4%;
        min-height: auto; /* Adjust for shorter content */
    }
    .hero-content {
        text-align: center;
    }
    .hero h1 {
        font-size: 2.8rem;
    }
    .subtitle {
        font-size: 1.1rem;
    }
    .description {
        font-size: 1rem;
    }
    .hero-image-display {
        width: 300px;
        height: 300px;
        margin-top: 3rem; /* Space between text and image */
    }
    .large-logo {
        width: 70%;
    }
    .stat-bubble {
        display: none; /* Hide bubbles on very small screens for cleaner look */
    }
    .hero-buttons {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
    .button {
        width: 100%;
        max-width: 300px;
    }
    .hero-footer-badges {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
    .badge {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .hero h1 {
        font-size: 2.2rem;
    }
    .subtitle {
        font-size: 1rem;
    }
    .description {
        font-size: 0.9rem;
    }
    .hero-image-display {
        width: 250px;
        height: 250px;
    }
    .large-logo {
        width: 60%;
    }
}

.profile-photo {
    text-align: center;
    margin-bottom: 20px;
}
.profile-photo img {
    max-width: 200px;
    border-radius: 50%;
    box-shadow: 0px 4px 12px rgba(0,0,0,0.2);
}


/* --- Home/Hero Section Styles --- */
.hero {
    /* Sets up the background gradient matching the image */
    background: linear-gradient(180deg, #ffffff 0%, #f0f7ff 100%);
    padding: 100px 20px 50px; /* Top padding is large to push content down */
    text-align: center;
    min-height: 80vh; /* Ensures the section takes up most of the viewport height */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Ensure the logo is placed relative to the text, if you include it in the HTML */
.hero img {
    max-width: 120px;
    height: auto;
    margin-bottom: 20px;
}

/* Main Heading (Drushyasinchana) */
.hero h1 {
    font-size: 3em;
    color: #2c62ff; /* Primary blue color */
    margin: 10px 0;
    font-weight: bold;
}

/* Lead/Subtitle Text (Your trusted partner...) */
.hero .lead {
    font-size: 1.5em;
    color: #333;
    margin-bottom: 25px;
    max-width: 800px;
    font-weight: 300; /* Lighter weight for the main phrase */
}

/* Color spans for specific words in the lead text */
.hero .lead strong {
    font-weight: 600; /* Makes Legal/IT bold */
}

.hero .lead .tech {
    color: #2c62ff; /* Blue for Tech */
    font-weight: 600;
}

.hero .lead .creative {
    color: #d1445f; /* Red/Pink for Creative */
    font-weight: 600;
}

/* Main Descriptive Paragraph */
.hero p:not(.lead) {
    font-size: 1.1em;
    color: #666;
    margin-bottom: 40px;
    max-width: 700px;
    line-height: 1.6;
}

/* --- Buttons Container --- */
.hero .buttons {
    display: flex;
    gap: 15px;
    margin-bottom: 50px;
}

/* Primary Button (Explore Services) */
.btn-primary {
    display: inline-flex;
    align-items: center;
    padding: 12px 30px;
    background-color: #2c62ff; /* Blue background */
    color: #ffffff;
    text-decoration: none;
    border-radius: 6px;
    font-weight: bold;
    border: 2px solid #2c62ff;
    transition: background-color 0.3s, box-shadow 0.3s;
    box-shadow: 0 4px 10px rgba(44, 98, 255, 0.3);
}

.btn-primary:hover {
    background-color: #1e45b3;
    box-shadow: 0 6px 15px rgba(44, 98, 255, 0.4);
}

/* Secondary Button (Get In Touch) */
.btn-secondary {
    display: inline-block;
    padding: 12px 30px;
    background-color: transparent;
    color: #2c62ff;
    text-decoration: none;
    border-radius: 6px;
    font-weight: bold;
    border: 2px solid #2c62ff;
    transition: background-color 0.3s, color 0.3s;
}

.btn-secondary:hover {
    background-color: #e6eefd; /* Light blue hover background */
    color: #1e45b3;
}

/* Arrow icon on Explore Services button (requires Font Awesome) */
.btn-primary::after {
    content: "\f061"; /* fas fa-arrow-right */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-left: 10px;
}

/* --- Footer/Contact Info at the Bottom --- */
.hero footer {
    width: 100%;
    margin-top: auto; /* Pushes the footer to the very bottom */
    padding: 20px 0;
    font-size: 0.9em;
    color: #666;
}

.hero footer p {
    margin: 0;
    font-size: 0.9em;
}

.hero footer a {
    color: #666;
    text-decoration: none;
    margin: 0 10px;
    transition: color 0.3s;
}

.hero footer a:hover {
    color: #2c62ff;
}

/* Using Font Awesome for the footer contact icons */
.hero footer p a[href^="tel"]::before {
    content: "\f095"; /* fa-phone */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 5px;
}
.hero footer p a[href^="mailto"]::before {
    content: "\f0e0"; /* fa-envelope */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 5px;
}
.hero footer p::before {
    content: "\f3c5"; /* fa-map-marker-alt for location */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 5px;
    color: #2c62ff; /* Blue color for location icon */
}

/* Remove default bullet/symbol from inline contact info */
.hero footer p a[href^="tel"]::before,
.hero footer p a[href^="mailto"]::before {
    color: #2c62ff; /* Blue color for phone and email icons */
}


/* --- Media Queries for Responsiveness --- */
@media (max-width: 600px) {
    .hero {
        padding-top: 50px;
        min-height: auto;
    }
    .hero h1 {
        font-size: 2.2em;
    }
    .hero .lead {
        font-size: 1.2em;
    }
    .hero .buttons {
        flex-direction: column;
        gap: 10px;
    }
    .btn-primary, .btn-secondary {
        width: 100%;
        box-sizing: border-box;
    }
}
/* styles.css */
/* Reset styles */
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

body {
  background: #f6faff;
  color: #222;
  line-height: 1.5;
  scroll-behavior: smooth;
}
a {
  text-decoration: none;
  color: inherit;
}
header {
  background: white;
  padding: 15px 40px;
  position: sticky;
  top: 0;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header .logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1.5rem;
  color: #2c62ff;
  user-select: none;
}
header nav a {
  margin-left: 24px;
  font-weight: 600;
  color: #555;
  transition: color 0.3s;
}
header nav a:hover, header nav a.active {
  color: #2c62ff;
}
header .contact-button {
  background: #2c62ff;
  padding: 10px 18px;
  border-radius: 6px;
  color: white;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: background 0.3s;
}
header .contact-button:hover {
  background: #1446c7;
}

/* Hero Section */
.hero {
  padding: 120px 20px 80px;
  text-align: center;
  max-width: 750px;
  margin: 0 auto;
}
.hero h1 {
  font-size: 3rem;
  color: #2c62ff;
  margin-bottom: 0.15em;
  font-weight: 700;
}
.hero p.lead {
  font-size: 1.25rem;
  margin-bottom: 40px;
  color: #444;
}
.hero p.lead strong {
  font-weight: 700;
}
.hero p.lead .tech {
  color: #9c4cff;
}
.hero p.lead .creative {
  color: #35bbc3;
}
.hero .buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
.hero .buttons a {
  padding: 14px 26px;
  font-weight: 600;
  border-radius: 6px;
  color: white;
  background: #2c62ff;
  border: none;
  cursor: pointer;
  transition: background 0.3s;
  text-decoration: none;
  display: inline-block;
}
.hero .buttons a.secondary {
  background: transparent;
  border: 2px solid #2c62ff;
  color: #2c62ff;
}
.hero .buttons a:hover {
  background: #1446c7;
  color: white;
}
.hero .buttons a.secondary:hover {
  background: #2c62ff;
  color: white;
}
.hero footer {
  margin-top: 60px;
  font-size: 0.9rem;
  color: #666;
}
.hero footer a {
  color: #2c62ff;
}

/* The rest of the CSS remains the same as previously given */
...


/* --- General Body & Container Styles (Adjust these to fit your site's overall look) --- */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f7fa; /* Light background for the section */
}

/* Services Section Specific Styles */
.services {
    padding: 60px 20px;
    text-align: center;
}

.services h2 {
    font-size: 2.5em;
    margin-bottom: 10px;
    color: #333;
}

.services .subtitle {
    font-size: 1.1em;
    color: #666;
    margin-bottom: 40px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* --- Cards Container (The heart of the 3-column layout) --- */
.cards {
    display: grid;
    /* Create a 3-column layout for desktop, adjusts for smaller screens */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px; /* Space between the cards */
    max-width: 1200px;
    margin: 0 auto 50px auto;
}

/* --- Individual Service Card Style --- */
.service-card {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 10px; /* Rounded corners */
    text-align: left;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Subtle shadow for 3D effect */
    transition: transform 0.3s, box-shadow 0.3s;
    border-top: 5px solid transparent; /* Placeholder for potential card color bar */
    height: 100%; /* Ensure all cards have the same height */
    display: flex;
    flex-direction: column;
}

.service-card:hover {
    transform: translateY(-5px); /* Lift card on hover */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* Header (Icon and Title) */
.service-card .card-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

/* Icon Styles */
.service-card .card-header i {
    font-size: 1.8em;
    color: #2c62ff; /* Icon color (matches the blue text) */
    margin-right: 15px;
    padding: 10px;
    border-radius: 5px;
    background-color: #e6eefd; /* Very light blue background for the icon circle/box */
}

.service-card h3 {
    font-size: 1.3em;
    color: #333;
    margin: 0;
}

/* Introductory Paragraph Style */
.service-card > p {
    color: #555;
    font-size: 0.95em;
    margin-bottom: 20px;
    flex-grow: 1; /* Pushes the list down so lists align at the bottom */
}

/* List Styles */
.service-card ul {
    list-style: none; /* Remove default bullets */
    padding: 0;
    margin: 0;
}

.service-card ul li {
    font-size: 0.9em;
    color: #666;
    margin-bottom: 8px;
    padding-left: 15px;
    /* Custom bullet point (blue circle) */
    position: relative;
}

.service-card ul li::before {
    content: "•"; /* Dot character for bullet */
    color: #2c62ff; /* Blue color for the dot */
    font-size: 1.2em;
    position: absolute;
    left: 0;
    line-height: 1;
}

/* --- Custom Solution Prompt & Button --- */
.custom-solution-prompt {
    text-align: center;
    margin-top: 30px;
}

.custom-solution-prompt p {
    font-size: 1.1em;
    color: #333;
    margin-bottom: 20px;
}

.discuss-button {
    display: inline-flex;
    align-items: center;
    padding: 10px 30px;
    background-color: #2c62ff; /* Blue button background */
    color: #ffffff;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s;
    border: 2px solid #2c62ff;
}

.discuss-button:hover {
    background-color: #1e45b3; /* Darker blue on hover */
}

.discuss-button i {
    margin-right: 10px;
}


/* --- General Styles (Apply these globally or adjust existing ones) --- */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f7fa; /* Light background for the section */
}

/* --- Latest Video Section Styles --- */
.videos {
    padding: 60px 20px;
    text-align: center;
    background-color: #f4f7fa; /* Ensure consistent background */
}

.videos h2 {
    font-size: 2.5em;
    margin-bottom: 10px;
    color: #333;
}

.videos .subtitle {
    font-size: 1.1em;
    color: #666;
    margin-bottom: 40px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* --- YouTube/Instagram Channel Buttons --- */
.video-buttons {
    margin-bottom: 50px;
    display: flex;
    justify-content: center;
    gap: 20px; /* Space between buttons */
}

.video-buttons a {
    display: inline-flex;
    align-items: center;
    padding: 12px 25px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1em;
    transition: background-color 0.3s, color 0.3s;
}

/* YouTube Button */
.youtube-btn {
    background-color: #d1445f; /* Red from the image */
    color: #ffffff;
    border: 2px solid #d1445f;
}

.youtube-btn:hover {
    background-color: #a82d44; /* Darker red on hover */
    color: #ffffff;
}

.youtube-btn::before {
    content: "\f16a"; /* Font Awesome YouTube icon */
    font-family: "Font Awesome 5 Brands"; /* Ensure Font Awesome Brands is loaded */
    margin-right: 10px;
}

/* Instagram Button */
.instagram-btn {
    background-color: #9258d4; /* Purple from the image */
    color: #ffffff;
    border: 2px solid #9258d4;
}

.instagram-btn:hover {
    background-color: #6a3e9c; /* Darker purple on hover */
    color: #ffffff;
}

.instagram-btn::before {
    content: "\f16d"; /* Font Awesome Instagram icon */
    font-family: "Font Awesome 5 Brands"; /* Ensure Font Awesome Brands is loaded */
    margin-right: 10px;
}

/* --- Video Grid Layout --- */
.video-grid {
    display: grid;
    /* 3 columns on larger screens, adjusts for smaller */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px; /* Space between video cards */
    max-width: 1200px;
    margin: 0 auto;
}

/* --- Individual Video Card Style --- */
.video-card {
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    overflow: hidden; /* Ensures image corners are rounded */
    text-align: left;
    transition: transform 0.3s, box-shadow 0.3s;
    position: relative; /* For badge positioning */
    display: flex; /* For consistent height */
    flex-direction: column;
}

.video-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.video-card img {
    width: 100%;
    height: 180px; /* Fixed height for video thumbnails */
    object-fit: cover; /* Ensures images cover the area without distortion */
    display: block;
}

/* Badge (YouTube/Instagram label on top left of image) */
.video-card .badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: rgba(0, 0, 0, 0.7); /* Dark background for readability */
    color: #ffffff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.8em;
    font-weight: bold;
    z-index: 10; /* Ensure it's above the image */
}

/* Instagram specific badge color */
.video-card .badge.instagram {
    background-color: #9258d4; /* Purple for Instagram badge */
}

/* Duration Overlay (if you add this to HTML) */
.video-card .duration {
    position: absolute;
    bottom: 8px; /* Position from bottom of image */
    right: 8px; /* Position from right of image */
    background-color: rgba(0, 0, 0, 0.7);
    color: #ffffff;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 0.75em;
}


/* Video Info (Text content below image) */
.video-card .video-info {
    padding: 20px;
    flex-grow: 1; /* Allows text content to fill space */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pushes watch link to bottom */
}

.video-card .video-info h4 {
    font-size: 1.2em;
    color: #333;
    margin: 0 0 10px 0;
}

.video-card .video-info p {
    font-size: 0.9em;
    color: #666;
    margin-bottom: 15px;
    line-height: 1.4;
}

/* Views Count (if added to HTML) */
.video-card .video-info .views {
    font-size: 0.85em;
    color: #888;
    margin-bottom: 10px;
}

/* Watch Now Link */
.video-card .watch-link {
    display: inline-block;
    color: #2c62ff; /* Blue color for the link */
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9em;
    transition: color 0.3s;
    margin-top: auto; /* Pushes link to the bottom */
}

.video-card .watch-link:hover {
    color: #1e45b3; /* Darker blue on hover */
}


/* --- Load More Videos Button --- */
.load-more-btn {
    display: inline-block;
    margin-top: 50px;
    padding: 12px 30px;
    background-color: #ffffff; /* White background */
    color: #333;
    text-decoration: none;
    border: 1px solid #ddd; /* Light grey border */
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s, border-color 0.3s;
}

.load-more-btn:hover {
    background-color: #e0e0e0;
    border-color: #ccc;
}

/* --- About Section Styles --- */
.about {
    padding: 60px 20px;
    text-align: center;
    background-color: #ffffff; /* White background for the section */
}

.about h2 {
    font-size: 2.5em;
    margin-bottom: 10px;
    color: #333;
}

.about > p:first-of-type { /* Targeting the main tagline/subtitle */
    font-size: 1.2em;
    color: #555;
    margin-bottom: 50px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* --- Main Layout Grid (Meet Murthy SNV and Credentials/Mission) --- */
.about-content-grid {
    display: grid;
    /* Two columns: one for text, one for cards/mission */
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto 50px auto;
    text-align: left;
}

/* Container for the text content (left column) */
.about-text-content {
    padding-right: 20px;
}

/* Container for cards and mission (right column) */
.about-right-column {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* --- Text Content (Left Side) --- */
.about-text-content h3 {
    font-size: 1.8em;
    color: #333;
    margin-top: 0;
    margin-bottom: 15px;
}

.about-text-content p {
    font-size: 1em;
    color: #444;
    line-height: 1.6;
    margin-bottom: 20px;
}

.about-text-content h4 {
    font-size: 1.3em;
    color: #2c62ff; /* Blue color for list headings */
    margin-top: 30px;
    margin-bottom: 15px;
}

/* List Formatting */
.about-text-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two-column list layout */
    gap: 10px;
}

.about-text-content ul li {
    font-size: 1em;
    color: #444;
    padding-left: 25px;
    position: relative;
}

/* Custom list icons (checkmark for Education, badge for Professional) */
.about-text-content ul li::before {
    font-family: 'Font Awesome 5 Free'; /* Using solid icons */
    font-weight: 900;
    position: absolute;
    left: 0;
    color: #4CAF50; /* Green for checkmark */
}

/* Specific icon for Education/Certifications (Checkmark) */
.about-text-content h4:nth-of-type(1) + ul li::before {
    content: "\f058"; /* fa-check-circle */
    color: #4CAF50;
}

/* Specific icon for Professional Certifications (Gavel and Diploma) */
.about-text-content h4:nth-of-type(2) + ul li:nth-child(1)::before {
    content: "\f121"; /* fa-code-branch (or a diploma/code icon) */
    color: #2c62ff;
}
.about-text-content h4:nth-of-type(2) + ul li:nth-child(2)::before {
    content: "\f0e3"; /* fa-gavel (or a legal icon) */
    color: #2c62ff;
}

/* --- Credential Cards (Top Right) --- */
.credential-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2x2 grid for cards */
    gap: 20px;
    margin-bottom: 20px;
}

.credential-card {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.credential-card i {
    font-size: 1.5em;
    color: #2c62ff;
    margin-bottom: 10px;
    padding: 10px;
    background-color: #e6eefd;
    border-radius: 50%;
}

.credential-card p:first-of-type {
    font-size: 1.1em;
    font-weight: bold;
    color: #333;
    margin: 0;
}

.credential-card p:last-of-type {
    font-size: 0.9em;
    color: #777;
    margin: 5px 0 0 0;
}

/* --- Mission Box (Bottom Right) --- */
.mission-box {
    background-color: #f0f7ff; /* Light blue background */
    border-radius: 8px;
    padding: 30px;
    text-align: center;
}

.mission-box h4 {
    color: #2c62ff;
    font-size: 1.4em;
    margin-top: 0;
    margin-bottom: 15px;
}

.mission-box p {
    font-size: 1em;
    color: #444;
    line-height: 1.6;
    margin: 0;
}

/* --- Collaborate Button (Bottom Center) --- */
.ready-prompt {
    text-align: center;
    font-size: 1.1em;
    color: #333;
    margin-bottom: 20px;
}

.collab-btn {
    display: inline-block;
    padding: 12px 35px;
    background-color: #5d50e6; /* Purple button color */
    color: #ffffff;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s;
}

.collab-btn:hover {
    background-color: #4338a8;
}

/* --- Media Queries for Responsiveness (Crucial for smaller screens) --- */
@media (max-width: 900px) {
    .about-content-grid {
        grid-template-columns: 1fr; /* Stack columns on smaller screens */
    }
    .about-text-content {
        padding-right: 0;
    }
}

@media (max-width: 500px) {
    .about-text-content ul {
        grid-template-columns: 1fr; /* Single column list on very small screens */
    }
    .credential-cards-grid {
        grid-template-columns: 1fr; /* Stack credential cards */
    }
}


/* --- Footer Section Styles --- */
.site-footer {
    background-color: #1a1e26; /* Dark blue background color */
    color: #f4f7fa; /* Light text color */
    padding: 40px 20px 0;
    font-size: 0.95em;
    line-height: 1.6;
}

/* --- Main Footer Columns Layout --- */
.site-footer > div:not(.bottom-row) {
    display: flex;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 40px;
}

/* Individual Column Styles */
.site-footer .col {
    padding: 0 15px;
    /* Define initial size for columns, especially the first one */
    flex: 1 1 20%; 
}

/* Adjusting the first column (Contact/About Info) to be slightly wider */
.site-footer .col:first-child {
    flex: 2 1 30%; 
}

/* Column Headings */
.site-footer h3 {
    font-size: 1.2em;
    color: #f4f7fa;
    margin-top: 0;
    margin-bottom: 20px;
    font-weight: bold;
    letter-spacing: 0.5px;
}

/* Text/Paragraphs in Columns */
.site-footer p {
    margin-bottom: 15px;
    color: #bbb;
}

/* Footer Links (Quick Links & Our Services) */
.site-footer .col:nth-child(2) a,
.site-footer .col:nth-child(3) a {
    display: block; /* Makes each link a separate block line */
    color: #bbb;
    text-decoration: none;
    margin-bottom: 10px;
    transition: color 0.3s;
}

.site-footer .col a:hover {
    color: #2c62ff; /* Blue hover effect */
}

/* --- Company Info Column (First Column) --- */
.site-footer .col:first-child .logo-text {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.site-footer .col:first-child .logo-text img {
    height: 30px; /* Adjust logo size */
    margin-right: 10px;
}

/* Phone and Location Icons/Text */
.site-footer .col:first-child p {
    display: flex;
    align-items: flex-start;
    margin-bottom: 8px;
    color: #f4f7fa; /* White text for contact details */
}

.site-footer .col:first-child p a {
    color: #f4f7fa;
    text-decoration: none;
}

/* Styling the icons/symbols in the first column (using a placeholder for Font Awesome or similar) */
.site-footer .col:first-child p::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 10px;
    color: #2c62ff; /* Blue icon color */
    font-size: 1em;
}

/* Applying specific icons based on the image: */
.site-footer .col:first-child p:nth-child(3)::before {
    content: "\f0e0"; /* fa-envelope for email */
}
.site-footer .col:first-child p:nth-child(4)::before {
    content: "\f2a0"; /* fa-phone (using a similar icon) */
}
.site-footer .col:first-child p:nth-child(5)::before {
    content: "\f3c5"; /* fa-map-marker-alt for location */
}

/* --- Connect With Us Column (Last Column) --- */
.site-footer .col:last-child p:first-of-type {
    color: #bbb;
}

/* Social Icons */
.social-icons {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.social-icons a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 8px; /* Slightly rounded corners */
    color: #ffffff;
    font-size: 1.2em;
    text-decoration: none;
    transition: background-color 0.3s;
}

/* YouTube Icon Style (Red) */
.social-icons a[title="YouTube"] {
    background-color: #d1445f; /* Red */
}
.social-icons a[title="YouTube"]:hover {
    background-color: #a82d44;
}

/* Instagram Icon Style (Purple/Pink) */
.social-icons a[title="Instagram"] {
    background-color: #c732a3; /* Purple/Pink */
}
.social-icons a[title="Instagram"]:hover {
    background-color: #9258d4;
}

/* Website Link */
.site-footer .col:last-child a {
    color: #2c62ff; /* Blue link color */
    text-decoration: none;
    display: inline-block;
}
.site-footer .col:last-child a:hover {
    text-decoration: underline;
}

/* --- Bottom Row (Copyright/Made With) --- */
.bottom-row {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
    border-top: 1px solid #333; /* Separator line */
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #888;
    font-size: 0.85em;
}

.bottom-row .heart {
    color: #d1445f; /* Red heart */
    margin: 0 5px;
}

/* --- Media Queries for Responsiveness --- */
@media (max-width: 768px) {
    .site-footer > div:not(.bottom-row) {
        flex-wrap: wrap; /* Wrap columns on smaller screens */
        justify-content: flex-start;
    }

    .site-footer .col {
        flex: 1 1 50%; /* 2 columns per row */
        margin-bottom: 30px;
    }

    .site-footer .col:first-child {
        flex: 1 1 100%; /* First column takes full width */
        order: -1; /* Move it to the top */
    }

    .bottom-row {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
    
    .bottom-row > div {
        margin: 5px 0;
    }
}

/* --- Contact Section Styles --- */
.contact-section {
    padding: 60px 20px;
    text-align: center;
    background-color: #ffffff; /* White background */
}

.contact-section h2 {
    font-size: 2.5em;
    margin-bottom: 10px;
    color: #333;
}

.contact-section .subtitle {
    font-size: 1.1em;
    color: #666;
    margin-bottom: 50px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* --- Two-Column Layout --- */
.contact-grid {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    gap: 40px;
    text-align: left;
}

/* Left Column (Contact Info) */
.contact-info-col {
    flex: 1;
    min-width: 300px; /* Ensure it doesn't get too small */
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Right Column (Form) */
.contact-form-col {
    flex: 2;
    min-width: 600px;
}

/* --- Contact Info Card (Left Column) --- */
.contact-card, .form-card {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.contact-card h4 {
    font-size: 1.3em;
    color: #333;
    margin-top: 0;
    margin-bottom: 10px;
}

.contact-card > p {
    font-size: 0.9em;
    color: #666;
    margin-bottom: 30px;
}

.contact-item {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
}

.contact-item i {
    font-size: 1.5em;
    color: #2c62ff; /* Blue icon color */
    margin-right: 20px;
}

.contact-item .label {
    font-size: 0.85em;
    color: #888;
    margin: 0;
}

.contact-item .detail, .contact-item a {
    font-size: 1em;
    color: #333;
    font-weight: 500;
    text-decoration: none;
    margin: 0;
}

/* --- Quick Response Guarantee Card (Blue Box) --- */
.response-guarantee-card {
    background-color: #2c62ff; /* Primary blue color */
    color: #ffffff;
    border-radius: 8px;
    padding: 30px;
    text-align: center;
}

.response-guarantee-card i {
    font-size: 2em;
    color: #ffffff;
    margin-bottom: 10px;
}

.response-guarantee-card .title {
    font-size: 1.2em;
    font-weight: bold;
    margin-top: 5px;
    margin-bottom: 10px;
}

.response-guarantee-card p {
    font-size: 0.9em;
    line-height: 1.5;
    color: #e0f0ff;
}

/* --- Form Card (Right Column) --- */
.form-card {
    border: none; /* Remove border from the form card */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Stronger shadow */
    height: 100%;
}

.form-card h4 {
    font-size: 1.3em;
    color: #333;
    margin-top: 0;
    margin-bottom: 10px;
}

.form-card > p {
    font-size: 0.9em;
    color: #666;
    margin-bottom: 20px;
}

.form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
}

.form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.form-group.full-width {
    flex: none; /* Prevents stretching in a flex container */
    width: 100%;
}

.form-group label {
    font-size: 0.9em;
    color: #333;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group select,
.form-group textarea {
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    width: 100%;
    box-sizing: border-box; /* Include padding/border in element's total width/height */
}

.form-group textarea {
    resize: vertical;
}

/* Submit Button */
.send-message-btn {
    float: right; /* Align button to the bottom right */
    padding: 10px 20px;
    background-color: #5d50e6; /* Purple button color */
    color: #ffffff;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-top: 20px;
}

.send-message-btn i {
    margin-right: 8px;
}

.send-message-btn:hover {
    background-color: #4338a8;
}

/* --- Media Queries for Responsiveness --- */
@media (max-width: 1000px) {
    .contact-grid {
        flex-direction: column; /* Stack columns */
    }

    .contact-info-col, .contact-form-col {
        min-width: 100%;
    }
}

@media (max-width: 600px) {
    .form-row {
        flex-direction: column; /* Stack form groups in rows */
    }
    
    .send-message-btn {
        float: none; /* Center button on small screens */
        width: 100%;
    }
}

/* --- Styling the Footer Logo and Text --- */

/* 1. Ensure the container uses flexbox for alignment */
.site-footer .col:first-child .logo-text {
    display: flex;
    align-items: center; /* This is the key property for vertical centering */
    margin-bottom: 15px;
}

/* 2. Style the Logo Image */
.site-footer .col:first-child .logo-text img {
    height: 30px; /* Adjust logo size as needed */
    margin-right: 10px;
    /* Optional: Ensure image alignment baseline is correct */
    vertical-align: middle; 
}

/* 3. Style the Heading Text */
.site-footer .col:first-child .logo-text h3 {
    /* Reset margin on the heading so it doesn't push the image */
    margin: 0; 
    font-size: 1.2em;
    color: #f4f7fa;
    font-weight: bold;
}


/* Header Styling */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 40px;
  background: #000;  /* dark header like in your screenshot */
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* Logo + Text */
.logo-container {
  display: flex;
  align-items: center;
  gap: 10px; /* small gap between logo and text */
}

.site-logo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.brand-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
}

.sub-name {
  font-size: 0.85rem;
  font-weight: 400;
  color: #bbb; /* subtle grey like in uploaded image */
}

/* Navigation */
nav {
  display: flex;
  gap: 20px;
}

nav a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

nav a:hover,
nav a.active {
  color: #2c62ff; /* highlight color */
}

/* Contact Button */
.contact-button {
  padding: 8px 16px;
  border: none;
  background: #2c62ff;
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.3s ease;
}

.contact-button:hover {
  background: #1a45c2;
}

.services {
  text-align: center;
  padding: 60px 40px;
  background: #fff;
}

.services h2 {
  font-size: 2rem;
  margin-bottom: 10px;
}

.services .subtitle {
  font-size: 1rem;
  color: #555;
  margin-bottom: 40px;
}

.service-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 25px;
  margin-bottom: 50px;
}

.service-card {
  background: #fff;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: left;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

.service-card .icon {
  font-size: 2rem;
  color: #2c62ff;
  margin-bottom: 15px;
}

.service-card h3 {
  font-size: 1.3rem;
  margin-bottom: 10px;
  color: #111;
}

.service-card p {
  font-size: 0.95rem;
  color: #555;
  margin-bottom: 15px;
}

.service-card ul {
  margin: 0;
  padding-left: 20px;
  color: #333;
}

.service-card ul li {
  margin-bottom: 6px;
  font-size: 0.9rem;
}

.view-more {
  display: inline-block;
  margin-top: 15px;
  font-weight: 600;
  color: #2c62ff;
  text-decoration: none;
}

.view-more:hover {
  text-decoration: underline;
}

/* CTA Box */
.cta-box {
  background: linear-gradient(90deg, #2c62ff, #9b4dff);
  color: #fff;
  padding: 40px 20px;
  border-radius: 12px;
  text-align: center;
}

.cta-box h3 {
  font-size: 1.6rem;
  margin-bottom: 10px;
}

.cta-box p {
  font-size: 1rem;
  margin-bottom: 20px;
}

.cta-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.cta-buttons .btn-primary,
.cta-buttons .btn-secondary {
  padding: 10px 20px;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.3s ease;
}

.cta-buttons .btn-primary {
  background: #fff;
  color: #2c62ff;
}

.cta-buttons .btn-primary:hover {
  background: #f0f0f0;
}

.cta-buttons .btn-secondary {
  border: 2px solid #fff;
  color: #fff;
}

.cta-buttons .btn-secondary:hover {
  background: rgba(255,255,255,0.1);
}
.services {
  text-align: center;
  padding: 60px 40px;
  background: #fff;
}

.services h2 {
  font-size: 2.2rem;
  margin-bottom: 10px;
}

.services .highlight {
  background: linear-gradient(90deg, #2c62ff, #9b4dff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.services .subtitle {
  font-size: 1rem;
  color: #555;
  margin-bottom: 40px;
}

.service-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 25px;
  margin-bottom: 50px;
}

.service-card {
  background: #fff;
  border-radius: 14px;
  padding: 25px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: left;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

.service-card .icon {
  font-size: 2rem;
  margin-bottom: 15px;
  display: inline-block;
  padding: 12px;
  border-radius: 12px;
  color: #fff;
}

.icon.blue { background: #2c62ff; }
.icon.green { background: #28a745; }
.icon.purple { background: #6f42c1; }
.icon.orange { background: #fd7e14; }

.service-card h3 {
  font-size: 1.3rem;
  margin-bottom: 10px;
  color: #111;
}

.service-card p {
  font-size: 0.95rem;
  color: #555;
  margin-bottom: 15px;
}

.service-card ul {
  margin: 0;
  padding-left: 20px;
  color: #333;
}

.service-card ul li {
  margin-bottom: 6px;
  font-size: 0.9rem;
}

/* Hidden services */
.hidden {
  display: none;
}
.hidden.show {
  display: list-item;
}

.view-more {
  display: inline-block;
  margin-top: 15px;
  font-weight: 600;
  color: #2c62ff;
  text-decoration: none;
  cursor: pointer;
}

.view-more:hover {
  text-decoration: underline;
}

/* CTA Box */
.cta-box {
  background: linear-gradient(90deg, #2c62ff, #9b4dff);
  color: #fff;
  padding: 40px 20px;
  border-radius: 12px;
  text-align: center;
}

.cta-box h3 {
  font-size: 1.6rem;
  margin-bottom: 10px;
}

.cta-box p {
  font-size: 1rem;
  margin-bottom: 20px;
}

.cta-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.cta-buttons .btn-primary,
.cta-buttons .btn-secondary {
  padding: 10px 20px;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.3s ease;
}

.cta-buttons .btn-primary {
  background: #fff;
  color: #2c62ff;
}

.cta-buttons .btn-primary:hover {
  background: #f0f0f0;
}

.cta-buttons .btn-secondary {
  border: 2px solid #fff;
  color: #fff;
}

.cta-buttons .btn-secondary:hover {
  background: rgba(255,255,255,0.1);
}
.media {
  padding: 70px 40px;
  text-align: center;
  background: linear-gradient(180deg, #0b0f1c, #111a2d);
  color: #fff;
}

.media h2 {
  font-size: 2.3rem;
  margin-bottom: 10px;
}

.media .highlight {
  color: #d1445f;
}

.media .subtitle {
  font-size: 1rem;
  color: #ccc;
  margin-bottom: 30px;
}

.channel-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 25px;
}

.channel-buttons a {
  padding: 10px 18px;
  border-radius: 30px;
  font-weight: 600;
  text-decoration: none;
  color: #fff;
  transition: 0.3s;
}

.yt-btn {
  background: #d1445f;
}
.yt-btn:hover {
  background: #b5374d;
}
.ig-btn {
  background: #444;
}
.ig-btn:hover {
  background: #555;
}

.channel-box {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 25px;
  margin: 0 auto 50px;
  max-width: 600px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.channel-box i {
  font-size: 2.5rem;
  color: #ff0000;
}

.subscribe-btn {
  background: #ff0000;
  color: #fff;
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.3s;
}
.subscribe-btn:hover {
  background: #cc0000;
}

.sub-heading {
  font-size: 1.5rem;
  margin-bottom: 20px;
  margin-top: 30px;
  color: #fff;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 25px;
  margin-bottom: 40px;
}

.video-card {
  background: #1a1f33;
  border-radius: 12px;
  overflow: hidden;
  text-align: left;
  transition: 0.3s ease;
  position: relative;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}

.video-card:hover {
  transform: translateY(-5px);
}

.video-card img {
  width: 100%;
  display: block;
}

.badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #ff0000;
  color: #fff;
  font-size: 0.8rem;
  padding: 4px 10px;
  border-radius: 6px;
  font-weight: bold;
}

.badge.instagram {
  background: #d1445f;
}

.video-info {
  padding: 15px;
}

.video-info h4 {
  font-size: 1.1rem;
  margin-bottom: 6px;
  color: #fff;
}

.video-info p {
  font-size: 0.9rem;
  color: #bbb;
  margin-bottom: 12px;
}

.watch-link {
  color: #d1445f;
  font-weight: 600;
  text-decoration: none;
}
.watch-link:hover {
  text-decoration: underline;
}


/* Hero Section */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px; /* Reduced top/bottom padding */
  text-align: center;
  gap: 15px; /* Reduce spacing between elements */
}

.hero .main-logo {
  width: 150px; /* Increase logo size */
  height: auto;
  margin-bottom: 10px; /* Reduce space between logo and name */
}

.hero h1 {
  font-size: 2.5rem;
  margin: 0;
  line-height: 1.2;
}

.hero .lead {
  font-size: 1.2rem;
  margin: 10px 0;
}

.hero .buttons {
  margin-top: 15px; /* Reduce button spacing from text */
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.hero footer {
  margin-top: 20px; /* Reduce space from buttons */
  font-size: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.hero footer a {
  margin: 0 5px;
  text-decoration: none;
  color: inherit;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 2rem;
  }

  .hero .lead {
    font-size: 1rem;
  }

  .hero .main-logo {




.services .icon-box {
  display: flex;
  align-items: center;       /* vertically center icon + text */
  gap: 10px;
  height: 60px;              /* fixed height for all boxes */
  padding: 0 16px;
  border-radius: 12px;
  color: #fff;
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 15px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.services .icon-box i {
  font-size: 1.5rem;
  flex-shrink: 0;           /* icon does not shrink */
}

.services .icon-box span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;      /* force single line */
  width: calc(100% - 35px); /* leave space for icon + gap */
}