* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
:root {
    --primary-color: #dec9ad;
    --secondary-color: #333;
    --background-color: #f4f4f4;
}
body {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #333;
}

a {
    text-decoration: none;
    color: #333;
}

ul {
    list-style: none;
}
img {
    max-width: 100%;
    height: auto;
}
.logo {
    margin-right: auto;
    /* Pushes menu to the right */
    display: flex;
    align-items: center;
}
/* navbar */
.navbar {
    background-color: #ffffff;
    padding: 20px;
}
.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.navbar .main-menu ul {
    display: flex;
           }


.navbar ul li a {
    padding: 10px 20px;
    display: block;
    font-weight: 600;
    transition: 0.5s;
}
.navbar ul li a:hover {
    color: var(--primary-color);
}

/* Makes last part distant
.navbar ul li:last-child a {
    margin-left: 10px;
} */

/* Hero */
.hero {
    margin-bottom: 50px;
}

.hero .container {
 /*   background: url('tempbg.png') no-repeat;
    background-size: contain;
    background-position: right bottom;*/
    height: 250px;
    padding: 0 0;
}

 .hero .hero-content {
    width: 70%;
 }

 .hero .hero-text-md {
     width: 70%;
     margin-bottom: 20px;
 }
/* Mission statement */
 .heross-content {
     text-align: center;
   /*  padding: 20px 20px;*/
     max-width: 1200px;
     margin: 0 auto;
 }

 /* Video */ 
 .video {
    padding: 10px 0 40px;
 }
 .video-content {
    display: flex;
    flex-direction: column;
    align-items: center;
 }

 .video-preview {
    margin-bottom: 20px;
 }
 
/* utility classes */
.container { 
    max-width: 1450px;
    margin: 0 auto;
    padding: 0 15px;
}
.container-sm {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 15px;
}

/* buttons */
.btn {
    display: inline-block;
    padding: 13px 20px;
    background-color: var(--primary-color);
    color: #333;
    font-weight: 600;
    text-decoration: none;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.5s;
}
.btn:hover {
    opacity: 0.8;
}
.btn-secondary {
    background-color: var(--secondary-color);
    color: #fff;
}
.center-btn-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 0;
    /* Optional: adds vertical space */
}

.btn-background {
    background-color: var(--background-color);
    color: #333;
}

.btn-block {
    display: block;
    width: 100%;
}

/* Text Classes */
.text-xxl 
{
    font-size: 3.2rem;
    line-height: 1.4;
    font-weight: 600;
    margin: 40px 0 20px;
    color: #333;
}

.text-xxll {
    font-size: 2.4rem;
    line-height: 1.4;
    font-weight: 700;
    margin: 40px 0 20px;
    padding: 0;
    color: #333;
    text-align: center;
    text-decoration: underline;
}
.text-xl {
    font-size: 2.2rem;
    line-height: 1.4;
    font-weight: normal;
    margin: 40px 0 20px;
}

.text-lg {
    font-size: 1.8rem;
    line-height: 1.4;
    font-weight: normal;
    padding: 10px 0;
    margin: 30px 0 20px;
}

.text-lgg {
    font-size: 1.5rem;
    line-height: 1.4;
    font-weight: normal;
    margin: 30px 0 20px;
    text-align: center;

}

.text-llgg {
    font-size: 1.4rem;
    line-height: 1.4;
    font-weight: normal;
    margin: 30px 0 20px;
    text-align: center;

}

.text-md {
    font-size: 1.2em;
    line-height: 1.4;
    font-weight: normal;
    margin: 30px 0 20px;
}

.text-sm {
    font-size: 0.9em;
    line-height: 1.4;
    font-weight: normal;
    margin: 10px 0 5px;
}

.text-center {
    text-align: center;
}

.lg {
    font-size: 1.2em;
    line-height: 1.4;
    font-weight: normal;
    margin: 20px 0 10px;
}
/* background */
.bg-primary {
    background: var(--primary-color);
    color: #333;
}
.bg-secondary {
    background: var(--secondary-color);
    color: #f4f4f4
}
.bg-background {
    background: var(--background-color);
    color: #333;
}   

.bg-brown {
    background: #422b0d;
    color: #fff;
    /* Makes text readable */
}
.underline {
    text-decoration: underline;
}

.bg-tan {
    background: #dec9ad;
    color: #333;
    /* Optional: makes text readable */
    padding: 15px 0;
    text-align: center; /* Optional: centers text */
    /* Optional: adds spacing */
    list-style: circle;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.bg-beige {
    background: #2d1f0c;
    color: #ffffff;
    /* Optional: makes text readable */
    padding: 15px 0;
    text-align: center;
    /* Optional: centers text */
    /* Optional: adds spacing */
    list-style: circle;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.img-gallery {
    width: 80%;
    margin: 100px auto 50px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));   
    grid-gap: 30px;
}

.img-gallery img{
    width: 100%;
    cursor: pointer;
}
.same-size-img {
    width: 190px;
    height: 220px;
    object-fit: cover;
    display: block;
}

.img-gallery img:hover {
   transform: scale(0.8) rotate(-15deg);
   border-radius: 20px;
   box-shadow: 0 32px 75px rgba(68, 77, 136, 0.032);

}

.full-img {
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,0.9);
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.full-img img {
    width: 90%;
    max-width: 500px;

}
.full-img span {
    position: absolute;
    top: 5%;
    right: 5%;
    color: #fff;
    font-size: 30px;
    cursor: pointer;
}

/* Footer */
.footer {
    padding: 40px 0;
}
.footer h4 { 
    margin-bottom: 10px;
}
.footer ul li {
    line-height: 2.5;
}

.footer a {
    color: #ccc;
}

.footer i {
    font-size: 1.5rem;
    margin-right: 10px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 30px;
    justify-content: center;
    align-items: center;
}

.club-step {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background-color: #f4ebe0;
    /* light neutral background */
    border-left: 4px solid #3e2c07;
    /* highlight color */
    border-radius: 8px;
}

.club-step h3 {
    margin-top: 0;
    color: #4b340c;
    font-size: 1.25rem;
}

.club-step p,
.club-step ul {
    margin-top: 0.5rem;
    font-size: 1rem;
    line-height: 1.6;
}

.club-step ul {
    padding-left: 1.2rem;
}

.club-step ul li {
    margin-bottom: 0.5rem;
}

.club-step:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.3s ease;
}

/* Donation Section */
.donation {
    padding: 40px;
    background: #f4ebe0;
    width: 100vw;
    margin-left: -50vw;
    left: 50%;
    position: relative;
    padding: 30px 0;
    box-sizing: border-box;
}

.donation h1 {
    margin-bottom: 20px;
    color: #4b340c;
    text-align: center;
}

.donation p {
    margin-bottom: 10px;
    color: #333;
    text-align: center;
}

.donation ul {
    list-style: inside;
    padding: 0;
    text-align: center;
}

.donation ul li {
    margin-bottom: 5px;
    color: #333;
    text-align: center;
}

/* Hamburger Button */
.hamburger-button {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1000;
}

.hamburger-button .hamburger-line {
    width: 30px;
    height: 3px;
    background-color: #333;
    margin: 6px 0;
}
/* Mobile Menu */
.mobile-menu {
    position: fixed;
    top: 0;
    right: -300px;
    width: 250px;
    height: 100%;
    z-index: 100;
    background-color: #fff;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    transition: right 0.3s ease-in-out;
}

.mobile-menu active 
{
    right: 0;
}
.mobile-menu ul {
    margin-top: 100px;
    padding-right: 10px;
}

.mobile-menu ul li {
    margin: 10px 0;
}
.mobile-menu ul li a {
    font-size: 20px;
    transition: 0.3s;
}

/*(media queries) */
@media (max-width: 960px) {
.text-xxl {
    font-size: 2.5rem;
}
}
@media (max-width: 670px)
{
 .navbar .main-menu {
    display: none;
 }

 .navbar .hamburger-button {
    display: block;
 }

 .hero .container {
    /*background: url('tempbg.png') no-repeat; 
    background-size: 350px 400px;*/
    background-position: bottom;
    height: 770px;
}
}
.hero .hero-content, .hero .hero-text {
    width: 100%;
    text-align: center;
}

@media (max-width: 500px) {

}


/* counter animation */
.counter-wrapper {
    text-align: center;
    margin: 2rem 0;
    color:#ffffff;
}

.count {
    font-size: 3rem;
    font-weight: bold;
    color: #ffffff;
}

.contactus {
background: #dfceb4;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 10px 0;
    box-sizing: border-box;
} 

/*
.contact-container {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
} */


.contact-container {
    height: 80vh;
    /* fill full screen height */
    width: 100vw;
    /* fill full screen width */
    display: flex;
    align-items: stretch;
    /* make both sides equal height */
    justify-content: space-between;
}

.contact-left,
.contact-right {
    flex: 1;
    /* each takes 50% width */
    padding: 50px;
    /* optional padding inside each */
    box-sizing: border-box;
}
/*
.contact-left {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 20px;

}


.contact-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
     left-align items 
    gap: 20px;
} 
*/

.contact-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    /* vertically center the form */
    gap: 20px;
}
.contact-left-title h2 {
    font-weight: 600;
    color: #382514;
    font-size: 40px;
    margin-bottom: 5px;
    width: 100%;
}

.contact-left-title hr {
    border: none;
    width: 120px;
    height: 5px;
    background-color: #7d5a3c;
}

.contact-inputs {
    width: 400px;
    height: 50px;
    border: none;
    outline: none;
    padding-left: 25px;
    font-weight: 500;
    color: #7d5a3c;
    border-radius: 50px;
}

.contact-left textarea {

    height: 140px;
    padding-top: 15px;
    border-radius: 20px;
}
.contact-left button {
    display: flex;
    align-items: center;
    padding: 15px 30px;
    font-size: 16px;
    color: #ffffff;
    gap: 10px;
    border: none;
    border-radius: 50px;
    background: linear-gradient(90deg, #cfa571, #4b340c);
}

/* contact right 
.contact-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 30px;
    text-align: center;
        background: #f4ebe0;
            height: 100%;
}
*/
/*
.contact-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 30px;
    background: #f4ebe0; 
}*/
.contact-right {
        flex: 1;
        background: #f4ebe0;
        /* right side background */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 30px;
    
        /* THIS is what makes it taller */
        margin-top: -10px;
        margin-bottom: -10px;
}
.contact-info h3 {
    font-size: 1.8rem;
    margin-bottom: 10px;
    color: #4b340c;
}

.right-img {
    width: 90%;
    max-width: 350px;
    border-radius: 15px;
    object-fit: cover;
}

.contact-right h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.contact-right a {
    color: #4b340c;
    font-weight: 600;
}

@media (max-width: 800px) {
    .contact-inputs {
        width: 80vw;
    }
    contact-right {
        display: none;
    }
}

/* dropdown in navbar*/
/* Dropdown menu styling */
.navbar ul li {
    position: relative;
    /* Needed so dropdown is positioned relative to parent */
}

.navbar ul li ul.dropdown {
    position: absolute;
    top: 100%;
    /* Position just below the parent li */
    left: 0;
    background: #fff;
    /* Background for dropdown */
    min-width: 180px;
    /* Set a width */
    display: none;
    /* Hide by default */
    list-style: none;
    padding: 0;
    margin: 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    z-index: 999;
}

.navbar ul li:hover ul.dropdown {
    display: block;
    /* Show on hover */
}

.navbar ul li ul.dropdown li {
    display: block;
    border-bottom: 1px solid #ddd;
}

.navbar ul li ul.dropdown li a {
    display: block;
    padding: 10px 15px;
    color: #333;
    text-decoration: none;
    font-weight: normal;
}

.navbar ul li ul.dropdown li a:hover {
    background: var(--primary-color);
    color: #fff;
}

/* Meet the team members */

.meet-the-team {
    background: #f4ebe0;
    padding: 30px 10px;
    text-align: center;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.team-member img {
    width: 180px;
    height: 180px;
    object-fit: cover;
  /*  border-radius: 50%;*/
    margin-bottom: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.team-member h3 {
    font-size: 1.3rem;
    margin-bottom: 5px;
    color: #4b340c;
}

.team-member p {
    font-size: 1rem;
    color: #555;
}

/* Meal Kits */
.meal-kits {
    padding: 60px 20px;
    background-color: #f4ebe0;
    text-align: center;
        height: 80vh;
            /* fill full screen height */
            width: 100vw;
            /* fill full screen width */
                /* Ensure it stretches edge-to-edge */
                    position: relative;
                    left: 50%;
                    right: 50%;
                    margin-left: -50vw;
                    margin-right: -50vw;
}

.meal-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
}

.meal-preview img {
    max-width: 350px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.coming-text h3 {
    font-size: 1.8rem;
    color: #4b340c;
}

.coming-text p {
    max-width: 800px;
    margin: 0 auto;
    color: #333;
}


/* Mobile-first responsive fixes */
@media (max-width: 768px) {
    .hero {
        padding-bottom: 10px;       /* remove extra bottom padding */
    }

    .hero-buttons {
        margin-bottom: 5px;         /* shrink space below button */
    }

    .counter-wrapper {
        margin-top: 0;              /* remove top margin */
        padding-top: 0;             /* remove extra padding */
    }
}


/* iPhone & small screens: width 480px or below */
@media (max-width: 480px) {
    /* Example: Stack navbar links vertically */
    .navbar .main-menu ul {
        flex-direction: column;
        align-items: center;
    }

    /* Shrink large headings for small screens */
    .text-xxl, .text-xxll, .text-xl, .text-lg {
        font-size: 1.5rem;
        text-align: center;
    }

    /* Full width hero text for better readability */
    .hero .hero-content, .hero .hero-text-md {
        width: 100%;
        text-align: center;
    }

    /* Buttons full-width on small screens */
    .btn {
        display: block;
        width: 90%;
        margin: 10px auto;
        text-align: center;
    }

    /* Images scale nicely */
    .img-gallery {
        grid-template-columns: 1fr; /* 1 column layout on small screens */
        gap: 15px;
        margin: 30px auto;
    }

    /* Contact section stacked vertically */
    .contact-container {
        flex-direction: column;
        height: auto;
    }

    .contact-left, .contact-right {
        width: 100%;
        padding: 20px;
    }
}

/* ===== Footer Fix ===== */
.footer {
    width: 100%;
    background-color: #5c4033; /* adjust as needed */
    color: white;
    padding: 20px 0;
    position: relative; /* ensures it's part of normal page flow */
    bottom: 0;
}

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

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    text-align: center;
}

/* Keep links looking neat */
.footer-grid a {
    color: white;
    text-decoration: none;
}

.footer-grid a:hover {
    text-decoration: underline;
}

/* Mobile-specific adjustments */
@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .hero {
        padding-bottom: 20px; /* reduce bottom padding */
        margin-bottom: 0;      /* remove extra margin if any */
    }

    .hero-buttons {
        margin-bottom: 10px;   /* tighten space below button */
    }

    .bg-beige {
        margin-top: 0;         /* ensure counter section moves up */
    }
}

@media (max-width: 768px) {
    .mobile-hide {
        display: none;
    }
}

@media (max-width: 768px) {
    .hero {
        padding-bottom: 10px;       /* remove extra bottom padding */
    }

    .hero-buttons {
        margin-bottom: 5px;         /* shrink space below button */
    }

    .counter-wrapper {
        margin-top: 0;              /* remove top margin */
        padding-top: 0;             /* remove extra padding */
    }
}


/* MOBILE NAVBAR ONLY */
@media (max-width: 768px) {
    /* Hide desktop menu */
    .navbar .main-menu {
        display: none;
    }

    /* Show hamburger */
    .navbar .hamburger-button {
        display: block;
    }

    /* Mobile menu initial state (hidden offscreen) */
    .mobile-menu {
        position: fixed;
        top: 0;
        right: -300px; /* hidden to the right */
        width: 250px;
        height: 100%;
        background-color: #fff;
        box-shadow: -2px 0 8px rgba(0,0,0,0.2);
        transition: right 0.3s ease-in-out;
        z-index: 1000;
        padding-top: 80px; /* space for logo/header */
    }

    /* Show mobile menu when active (your JS should toggle 'active' class) */
    .mobile-menu.active {
        right: 0;
    }

    .mobile-menu ul {
        display: flex;
        flex-direction: column;
        padding-left: 20px;
    }

    .mobile-menu ul li {
        margin: 15px 0;
    }

    .mobile-menu ul li a {
        font-size: 18px;
        font-weight: 600;
        color: #333;
    }
}

/* MOBILE HAMBURGER STYLING */
@media (max-width: 768px) {
    /* Ensure desktop menu is hidden */
    .navbar .main-menu {
        display: none;
    }

    /* Show hamburger button on mobile */
    .navbar .hamburger-button {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        background: transparent;
        border: none;
        z-index: 1001; /* above mobile menu */
    }

    /* Hamburger lines */
    .hamburger-button .hamburger-line {
        width: 30px;
        height: 4px; /* slightly thicker for visibility */
        background-color: #422b0d; /* brown color */
        margin: 5px 0;
        border-radius: 2px;
        transition: all 0.3s ease;
    }

    /* Optional: animate hamburger to X when active */
    .hamburger-button.active .hamburger-line:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    .hamburger-button.active .hamburger-line:nth-child(2) {
        opacity: 0;
    }
    .hamburger-button.active .hamburger-line:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px);
    }
}

@media (max-width: 768px) {
    .hero {
        margin-bottom: 0; /* removes extra space completely */
    }
}


/* Mobile-only navbar */
@media (max-width: 768px) {
    /* Hide the desktop menu */
    .navbar .main-menu {
        display: none;
    }

    /* Show the hamburger button */
    .navbar .hamburger-button {
        display: block;
        background-color: #422b0d; /* brown background */
        padding: 10px;
        border-radius: 5px;
    }

    .hamburger-button .hamburger-line {
        background-color: #fff; /* make lines visible */
    }

    /* Mobile menu sliding from right */
    .mobile-menu {
        position: fixed;
        top: 0;
        right: -300px; /* hidden by default */
        width: 250px;
        height: 100%;
        background-color: #422b0d; /* brown background */
        z-index: 999;
        transition: right 0.3s ease-in-out;
        padding-top: 60px; /* space for hamburger */
    }

    /* Show menu when active class is added via JS */
    .mobile-menu.active {
        right: 0;
    }

    .mobile-menu ul {
        display: flex;
        flex-direction: column;
        padding-left: 20px;
    }

    .mobile-menu ul li {
        margin: 15px 0;
    }

    .mobile-menu ul li a {
        color: #fff;
        font-size: 18px;
        text-decoration: none;
    }

    .mobile-menu ul li a:hover {
        color: var(--primary-color);
    }
}


@media (max-width: 768px) {
    /* Shrink space under hero section and button */
    .hero {
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .hero-buttons {
        margin-bottom: 0;
    }




/* Hide mobile nav by default */
.topnav {
  display: none; /* Hidden on desktop */
  background-color: #333;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover 
.topnav a:hover {
  background-color: #000000;
  color: white;
}*/

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #FFFFFF;
  color: black;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
        display: none;

  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;

 .topnav {
  display: block; /* show topnav only on mobile */
}
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}


/* Mobile fixes for Hero section */
@media (max-width: 768px) {
    .hero, 
    .hero .container {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;   /* Keep content toward the top */
        align-items: center;
        height: auto !important;
        min-height: 0 !important;
        padding: 0.3rem 1rem 2rem;     /* Slightly less top padding */
        margin-bottom: 0 !important;
        text-align: center;
    }

    .hero-content {
        margin-top: 0;
    }

    .hero-heading.text-xxl {
        font-size: 2.2rem;             /* Slightly bigger for mobile */
        line-height: 1.3;
    }
}

/* Mobile fixes for Our History section */
@media (max-width: 768px) {
    #history .heross-content {
        padding: 0 1rem;        /* Keep padding on sides */
        text-align: center;     /* Center all text horizontally */
        box-sizing: border-box; /* Include padding in width */
    }

    #history .hero-heading,
    #history .heros-heading {
        margin-left: auto;      /* Ensure heading centers */
        margin-right: auto;
    }
}



    /* it is tweaking but its supposed to hide gallery on desktop  */
.mobile-only {
  display: none;
}

/* This basically just shows gallery only on mobile but I dont think it works */
@media screen and (max-width: 600px) {
  .mobile-only {
    display: block;
  }
}
/* Default for desktop: fixed dimensions */
.video-wrapper {
  width: 660px;
  margin: 0 auto;
}

.video-wrapper iframe {
  width: 660px;
  height: 415px;
  display: block;
}

/* On mobile: full width, keep 16:9 ratio */
@media screen and (max-width: 768px) {
  .video-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
  }

  .video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
}