body {
    font-family: 'Georgia', fantasy;
    background-color: rgb(243, 233, 227);
    margin: 0;
    padding: 0;
}

#linky .phone-link {
    /* 1. The Button Shape & Background */
    background-color: #efefef; 
    padding: 10px 20px;        
    border-radius: 15px;        
    display: inline-block;     

    /* 2. The Text */
    color: rgb(0, 0, 0);              
    text-decoration: none;     
    font-weight: bold;
    font-family: sans-serif;   

    /* 3. The Animation */
    transition: background-color 0.3s ease; 
}

/* 4. The Hover Effect */
#linky .phone-link:hover {
    background-color: #949494; 
    color: rgb(0, 0, 0);              
}

#logo {
    height: 65px; /* Restricts the logo height so the black bar stays sleek */
    width: auto;
    margin-left: 20px;
}

#linky {
    background-color: rgb(0, 0, 0);
    width: 100%;
    
    position: fixed;   
    top: 0;            
    z-index: 1000;     
    transition: top 0.3s ease-in-out; 
    
    /* THE FIX: This forces the logo and the links to sit perfectly side-by-side and centered */
    display: flex;
    justify-content: space-between; 
    align-items: center; 
    height: 90px; /* Locks the height of the navigation bar */
    box-sizing: border-box;
}

/* The exact rule that forces the horizontal row for the links */
/* 1. THE MAIN MENU: This keeps your main links spaced out beautifully */
#linky ul {
    display: flex;
    flex-direction: row;             
    align-items: center;
    list-style-type: none;           
    margin: 0;                       
    padding: 0;
    gap: 60px; /* THIS IS THE MAGIC SPACING FOR THE MAIN LINKS */
    margin-right: 40px; 

}

/* 2. THE DROPDOWN MENU: This prevents the massive gaps in the popup */

/* The text styling */
#linky a {
    color: #949494; 
    text-decoration: none;
    font-size: 20px;
    font-weight: bold;
}

/* =========================================
   DROPDOWN MENU STYLES
   ========================================= */

/* Make the parent item the anchor point for the floating menu */
#linky ul li.dropdown {
    position: relative; 
}

/* The Hidden Menu Box */
#linky ul .dropdown-menu {
    display: none;              
    position: absolute;         
    top: 100%;                  
    left: 0;
    background-color: #111;     
    min-width: 220px;           
    box-shadow: 0px 8px 16px rgba(0,0,0,0.5); 
    padding: 10px 0;
    margin: 0;
    flex-direction: column;     
    gap: 0; /* NO GAP HERE so they stack normally */
}

/* Force the dropdown items to take up the full width of the box */
#linky ul .dropdown-menu li {
    width: 100%;
    display: block;
}

/* Style the links INSIDE the dropdown */
#linky ul .dropdown-menu li a {
    padding: 12px 20px;
    display: block;
    text-align: left;
    font-size: 16px;           /* Slightly smaller than main nav links */
    color: #ffffff;            /* White text */
}

/* Hover effect for the dropdown links */
#linky ul .dropdown-menu li a:hover {
    background-color: #222;    /* Slightly lighter dark background */
    color: #a81c1c;            /* Changes text to dark red */
}

/* THE TRIGGER: Show the menu when hovering */
#linky ul li.dropdown:hover .dropdown-menu {
    display: flex;             /* Uses flex so it obeys the 'column' direction we set */
}
/* Hides mobile icons on large desktop screens */
.mobile-phone-btn, 
.hamburger {
    display: none; 
}
/* The little down arrow next to "Our dogs" */
.arrow {
    font-size: 0.6em;
    vertical-align: middle;
    margin-left: 5px;
}

/* =========================================
   CONTACT PAGE STYLES
   ========================================= */

/* 1. Global Page Setup */
.contact-page {
    padding-top: 150px; 
    max-width: 1000px;  
    margin: 0 auto;     
    font-family: sans-serif; 
}

/* 2. Top Header Styling */
.contact-header {
    text-align: center;
    margin-bottom: 60px;
}

.contact-header h1 {
    font-size: 40px;
    margin-bottom: 15px;
}

/* 3. THE SECRET: Flexbox Two-Column Layout */
.contact-content {
    display: flex;
    justify-content: space-between;
    gap: 60px; 
}

/* 4. Column Setup & Top Borders */
.contact-info-column, 
.contact-form-column {
    flex: 1; 
    border-top: 1px solid #000; 
    padding-top: 30px;
}

/* 5. Left Column Specifics */
.info-block {
    margin-bottom: 40px;
}

.info-block h2 {
    font-size: 22px;
    font-weight: normal;
    margin-bottom: 15px;
}

/* 6. Right Column (Form) Specifics */
.contact-form-column h3 {
    font-size: 14px;
    margin-bottom: 20px;
    line-height: 1.5;
}

.contact-form-column form {
    display: flex;
    flex-direction: column;
    gap: 15px; 
}

.contact-form-column input, 
.contact-form-column textarea {
    padding: 15px;
    border: 1px solid #ccc;
    font-size: 16px;
    font-family: sans-serif;
}

.submit-btn {
    background-color: #a81c1c; 
    color: white;
    padding: 15px 30px;
    border: none;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    width: 150px; 
    transition: background-color 0.3s;
}

.submit-btn:hover {
    background-color: #000000; 
}

#pic1 {
    width: 100%;
    height: auto;
    margin-top: 70px;
}




/* =========================================
   "OUR DOGS" HUB PAGE STYLES
   ========================================= */

.dogs-hub-page {
    padding-top: 150px; 
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 100px;
    font-family: sans-serif;
    text-align: center;
}

.hub-header {
    margin-bottom: 60px;
}

.hub-header h1 {
    font-size: 45px;
    margin-bottom: 10px;
    color: #000;
}

.hub-header p {
    font-size: 18px;
    color: #444;
}

/* THE GRID SYSTEM */
/* THE GRID SYSTEM */
.dog-grid {
    display: grid;
    /* This creates exactly 2 equal columns so the photos are much larger */
    grid-template-columns: repeat(2, 1fr); 
    gap: 40px; 
    padding: 0 20px;
}

/* INDIVIDUAL CARDS */
.dog-card {
    background-color: rgb(0, 0, 0); /* Dark premium background */
    border-radius: 4px;
    border: 1px solid #2222226f; /* Subtle border for depth */
    overflow: hidden;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.dog-card:hover {
    transform: translateY(-8px); /* Card lifts up when hovered */
}

/* Image wrapper locks the image into a horizontal landscape ratio */
.card-image-wrapper {
    width: 100%;
    aspect-ratio: 3 / 2; /* This creates a perfect professional horizontal frame */
    overflow: hidden;
}

/* Ensures the image fills the horizontal box without squishing */
.card-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
}

/* Ensures the clickable image link fills the whole wrapper space */
.card-image-wrapper a {
    display: block;
    height: 100%;
    width: 100%;
}
/* Card Text Info */
.card-info {
    padding: 12px;
    text-align: left;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Pushes the button to the bottom */
}

.card-info h2 {
    color: #fff;
    margin: 0 0 5px 0;
    font-size: 26px;
}

.dog-breed {
    color: #aaa;
    margin: 0 0 15px 0;
    font-size: 15px;
}

/* Status Indicators (Available, Reserved, Sold) */
.status-indicator {
    display: inline-block;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 3px;
    margin-bottom: 10px;
    width: max-content;
    text-transform: uppercase;
}

.available {
    background-color: #2e7d32; /* Green */
    color: white;
}

.reserved {
    background-color: #f57c00; /* Orange */
    color: white;
}

.sold {
    background-color: #a81c1c; /* Red */
    color: white;
}
.in-training {
    background-color: #2e719e; /* Red */
    color: white;
}

/* The Button */
.view-btn {
    display: block;
    text-align: center;
    background-color: #111;
    color: white;
    padding: 10px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 4px;
    transition: background-color 0.3s;
    margin-top: auto; /* Forces button to the very bottom of the card */
}

.view-btn:hover {
    background-color: rgba(252, 49, 49, 0.845);
}




/* =========================================
   INDIVIDUAL DOG PROFILE STYLES
   ========================================= */

/* Main Page Container */
.dog-profile-page {
    padding-top: 150px; 
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 80px;
    font-family: sans-serif;
    color: 62, 48, 28) /* Dark text for readability */
}

/* TOP LAYOUT: 2 Columns */
.profile-top-layout {
    display: flex;
    gap: 60px; /* Space between pictures and text */
    margin-bottom: 80px;
}

/* Left Column (Gallery) */
.profile-gallery {
    flex: 1; /* Takes up 50% of the screen */
}

.main-profile-img {
    width: 100%;
    height: auto;
    border-radius: 5px;
    margin-bottom: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.thumbnail-row {
    display: flex;
    gap: 15px;
}

.thumbnail-row .thumb {
    width: calc(25% - 11px); /* Perfectly spaces 4 thumbnails */
    height: 80px;
    object-fit: cover;
    border-radius: 5px;
    cursor: pointer;
    opacity: 0.6; /* Dims the thumbnails slightly */
    transition: opacity 0.3s;
}

.thumbnail-row .thumb:hover, 
.thumbnail-row .thumb.active {
    opacity: 1; /* Brightens when hovered or active */
    border: 2px solid #a81c1c; /* Adds a red border to the active one */
}

/* Right Column (Info) */
.profile-info {
    flex: 1; /* Takes up the other 50% of the screen */
}

.profile-info h1 {
    font-size: 38px;
    margin-top: 0;
    margin-bottom: 20px;
    color: #000;
}

.stats-list {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
    font-size: 18px;
    line-height: 1.6;
}

/* The Status Tag (Not For Sale / Sold) */
.status-tag {
    display: inline-block;
    padding: 10px 20px;
    font-size: 20px;
    font-weight: bold;
    border-radius: 3px;
    margin-bottom: 25px;
    letter-spacing: 1px;
}

.not-for-sale {
    color: #a81c1c;
    border: 2px solid #a81c1c;
}

.available {
    background-color: #2e7d32; /* Green if available */
    color: white;
}

.profile-info p {
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 20px;
}

.profile-info h3 {
    margin-top: 30px;
    font-size: 22px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
}

.bullet-list {
    font-size: 16px;
    line-height: 1.8;
}

/* BOTTOM SECTION: Videos */
.profile-videos-section h2 {
    text-align: center;
    font-size: 32px;
    margin-bottom: 40px;
}

.video-grid {
    display: flex;
    gap: 40px;
    justify-content: center;
}

.video-card {
    flex: 1;
    max-width: 500px;
    background-color: #111;
    border-radius: 8px;
    overflow: hidden;
    color: white;
    text-align: center;
}

.video-card iframe {
    width: 100%;
    height: 280px;
}

.video-card p {
    padding: 15px;
    margin: 0;
    font-weight: bold;
}
/* Ensures the clickable image link fills the whole wrapper space */
.card-image-wrapper a {
    display: block;
    height: 100%;
    width: 100%;
}




/* =========================================
   "ABOUT US" PAGE STYLES
   ========================================= */

.about-page {
    padding-top: 150px; 
    max-width: 1100px;
    margin: 0 auto;
    padding-bottom: 100px;
    font-family: sans-serif;
    color: #434343; /* Light grey text for readability on dark backgrounds */
}

.about-header {
    text-align: center;
    margin-bottom: 80px;
}

.about-header h1 {
    font-size: 42px;
    color: #3b3a3a;
    margin-bottom: 20px;
}

.about-header p {
    font-size: 20px;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
    color: #3e3e3e;
}

/* THE STAGGERED ROWS */
.about-row {
    display: flex;
    align-items: center; /* Centers the text vertically with the image */
    gap: 60px; /* Space between text and image */
    margin-bottom: 80px;
}

/* Flips the image to the left on every other row */
.reverse-row {
    flex-direction: row-reverse;
}

/* Text Container */
.about-text {
    flex: 1; /* Takes up 50% of the row */
}

.about-text h2 {
    color: #0e0e0e;
    font-size: 32px;
    margin-top: 0;
    margin-bottom: 20px;
    border-bottom: 2px solid #a81c1c; /* Adds a sleek red accent line under headings */
    padding-bottom: 10px;
    display: inline-block;
}

.about-text p {
    font-size: 17px;
    line-height: 1.8;
    margin-bottom: 20px;
}

/* Image Container */
.about-image {
    flex: 1; /* Takes up 50% of the row */
}

.about-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(6, 6, 6, 0.62); /* Adds depth so photos pop off the screen */
}

/* =========================================
   HOMEPAGE STYLES
   ========================================= */

/* 1. HERO SECTION */
.hero-section {
    height: 85vh;
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), 
                url('7512.jpg') center/cover no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
   
    margin-top: 0; /* Removes the empty gap at the top */
    padding-top: 120px; /* Pushes the content down on the inside, letting the photo fill the top */
    /* Keep all your other existing rules like background-image, height, etc. exactly the same! */

}

.hero-content h1 {
    font-size: 50px;
    color: #fff;
    margin-bottom: 20px;
    letter-spacing: 2px;
}

.hero-content p {
    font-size: 22px;
    color: #ddd;
    margin-bottom: 35px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.hero-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.hero-btn {
    padding: 15px 30px;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.primary-btn {
    background-color: #a81c1c;
    color: #fff;
}

.primary-btn:hover {
    background-color: #ff3333;
}

.secondary-btn {
    background-color: transparent;
    color: #fff;
    border: 2px solid #fff;
}

.secondary-btn:hover {
    background-color: #fff;
    color: #000;
}

/* 2. STATS BAR */
.stats-bar {
    background-color: #111;
    display: flex;
    justify-content: space-around;
    padding: 40px 20px;
    border-bottom: 2px solid #222;
}

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

.stat-item h3 {
    font-size: 36px;
    color: #a81c1c;
    margin: 0 0 5px 0;
}

.stat-item p {
    color: #aaa;
    margin: 0;
    font-size: 16px;
}

/* 3. CORE SERVICES */
.home-services {
    max-width: 1200px;
    margin: 80px auto;
    text-align: center;
    padding: 0 20px;
}

.home-services h2 {
    font-size: 38px;
    color: #111;
    margin-bottom: 50px;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.service-card {
    background-color: #111;
    padding: 35px;
    border-radius: 8px;
    text-align: left;
    border-left: 4px solid #a81c1c;
    box-shadow: 0 5px 15px rgba (0,0,0,0.3);
}

.service-card h3 {
    color: #fff;
    margin-top: 0;
    font-size: 22px;
}

.service-card p {

    color:  #e7e7e7;
    line-height: 1.6;
    margin-bottom: 0;
}

/* 4. FOUNDER PREVIEW */
.founder-preview {
    max-width: 1100px;
    margin: 100px auto;
    display: flex;
    align-items: center;
    gap: 60px;
    padding: 0 20px;
}

.founder-image {
    flex: 1;
}

.founder-image img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}

.founder-text {
    flex: 1;
    color:  #111;
}

.founder-text h2 {
    color:  #111;
    font-size: 34px;
    margin-top: 0;
}

.founder-text p {
    font-size: 17px;
    line-height: 1.8;
    margin-bottom: 30px;
}

/* 5. CTA BANNER */
.cta-banner {
    background-color: #a81c1c;
    color: #fff;
    text-align: center;
    padding: 60px 20px;
}

.cta-banner h2 {
    font-size: 36px;
    margin: 0 0 15px 0;
}

.cta-banner p {
    font-size: 20px;
    margin-bottom: 30px;
}

.cta-btn {
    display: inline-block;
    background-color: #000;
    color: #fff;
    padding: 15px 35px;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.cta-btn:hover {
    background-color: #222;
}
/* =========================================
   ABOUT US GALLERY STYLES
   ========================================= */

.about-gallery-section {
    padding: 60px 20px;
    text-align: center;
    max-width: 1400px;
    margin: 0 auto;
}

.about-gallery-section h2 {
    font-size: 38px;
    margin-bottom: 40px;
    text-transform: uppercase;
}

/* /* Creates a massive 2-column grid layout */
.about-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 40px; /* Bumped the gap up slightly so the larger photos have room to breathe */
}
/* The card that holds the media and the text */
.gallery-item {
    background-color: #050505;
    border: 1px solid #1a1a1a;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Locks photos and videos into a perfect 16:9 cinematic ratio */
.gallery-item img, 
.gallery-item iframe {
    width: 100%;
    aspect-ratio: 16 / 11;
    object-fit: cover;
    border: none;
}

/* The sleek 2-word description bar at the bottom */
.gallery-caption {
    background-color: #050505;
    color: #ffffff;
    padding: 15px 10px;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-top: 2px solid #b38b36; /* The elite gold accent line */
}
/* Makes any gallery item with the "vertical-media" class tall */
.gallery-item.vertical-media img,
.gallery-item.vertical-media iframe {
    aspect-ratio: 12 / 10; /* Standard vertical phone/shorts ratio */
}

/* =========================================
   MOBILE RESPONSIVENESS (PHONES & TABLETS)
   ========================================= */


@media (max-width: 768px) {
    
/* 11. ABOUT US GALLERY MOBILE FIX */
    .about-gallery {
        grid-template-columns: 1fr; /* Stacks all 8 items into a single vertical scrolling list */
        gap: 30px;
    }
    
    .about-gallery-section h2 {
        font-size: 28px;
    }
    }

@media (max-width: 768px) {
    
    /* THE MOBILE APP-STYLE NAV BAR */
    #linky {
        flex-direction: row; 
        justify-content: space-between; /* Pushes phone left, hamburger right */
        height: 70px;           
        padding: 0 20px;
    }

    /* Centers the logo absolutely */
    #logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        height: 40px;           
        margin: 0;
    }

    /* Shows and styles the mobile phone icon */
    .mobile-phone-btn {
        display: block;
        color: #b38b36; /* Gold icon */
        font-size: 28px;
        text-decoration: none;
        z-index: 1001;
    }

    /* Shows and styles the Hamburger Menu */
    .hamburger {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 20px;
        cursor: pointer;
        z-index: 1001;
    }

    .hamburger span {
        width: 100%;
        height: 2px;
        background-color: #b38b36; /* Gold lines */
        border-radius: 2px;
    }

    /* HIDES THE MAIN LINKS UNTIL CLICKED */
    #linky ul {
        display: none; /* Hidden by default */
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        background-color: #050505;
        flex-direction: column;        
        gap: 25px;              
        padding: 30px 0;
        border-bottom: 2px solid #b38b36;
    }

    /* This class is added by JavaScript to show the menu */
    #linky ul.show-menu {
        display: flex; 
    }

    #linky a {
        font-size: 18px;        
    }

    /* Hides the big desktop phone button inside the mobile dropdown to keep it clean */
    #linky .phone-link {
        display: none;
    }
    
   
    .hero-section {
        margin-top: 0; /* Removes the gap on phones */
        padding-top: 150px; /* Gives the text room to breathe underneath the mobile menu */
        height: auto;
        padding-bottom: 80px; 
        padding-left: 20px;
        padding-right: 20px;
    }
    .hero-content h1 {
        font-size: 32px; /* Shrinks massive desktop text to fit phone screens */
    }

    .hero-content p {
        font-size: 18px;
    }

    .hero-buttons {
        flex-direction: column; /* Stacks the two buttons on top of each other */
        gap: 15px;
    }

    /* 3. THE STATS BAR */
    .stats-bar {
        flex-direction: column; /* Stacks the 3 stats vertically instead of squishing them */
        gap: 30px;
        padding: 30px 20px;
    }

    /* 4. CORE SERVICES GRID */
    .services-grid {
        grid-template-columns: 1fr; /* Forces the 2-column grid to become exactly 1 column */
    }

    .home-services h2 {
        font-size: 30px;
    }

    /* 5. FOUNDER PREVIEW */
    .founder-preview {
        flex-direction: column; /* Stacks the text under the image */
        gap: 30px;
        text-align: center; /* Centers text for a cleaner mobile look */
        margin: 60px auto;
    }

    .founder-text h2 {
        font-size: 28px;
    }

    /* 6. CTA BANNER */
    .cta-banner {
        padding: 40px 20px;
    }

    .cta-banner h2 {
        font-size: 28px;
    }
}
@media (max-width: 768px) {
    .about-header h1 {
        font-size: 32px;
        padding: 0 15px; 
    }

    .about-header p {
        font-size: 18px;
        padding: 0 15px;
    }

    /* This forces the side-by-side layouts to stack vertically */
    .about-row, 
    .reverse-row {
        flex-direction: column; 
        gap: 30px;
        text-align: center; 
        padding: 0 20px;
        margin-bottom: 60px;
    }

    .about-text h2 {
        font-size: 28px;
    }
/* 8. CONTACT PAGE MOBILE FIXES */
    .contact-content {
        flex-direction: column; /* Stacks the info and the form */
        gap: 40px; 
        padding: 0 20px;
    }

    .contact-header h1 {
        font-size: 32px;
        padding: 0 15px;
    }

    .contact-header p {
        font-size: 18px;
        padding: 0 15px;
    }
    /* 9. OUR DOGS PAGE MOBILE FIXES */
    .hub-header {
        padding: 0 20px;
    }

    .hub-header h1 {
        font-size: 32px;
    }

    .hub-header p {
        font-size: 18px;
    }

    /* Forces the 3-column dog grid to stack into 1 single column */
    .dog-grid {
        grid-template-columns: 1fr; 
        gap: 30px;
    }
    /* 10. DOG PROFILE PAGE MOBILE FIXES */
    .dog-profile-page {
        padding: 120px 20px 50px 20px; /* Adds padding on the sides for phone screens */
    }

    .profile-top-layout {
        flex-direction: column; /* Stacks the image gallery on top of the dog's info */
        gap: 30px;
    }

    .profile-info h1 {
        font-size: 32px;
    }

    .thumbnail-row .thumb {
        height: 60px; /* Shrinks the thumbnails slightly so they fit on narrow screens */
    }

    .video-grid {
        flex-direction: column; /* Stacks the two YouTube videos on top of each other */
        gap: 30px;
    }
    /* HOME PAGE MOBILE FIXES */
    
    /* 1. Stack the 2x2 grid into a single column */
    .capabilities-grid { /* Change this name if you used a different class for your 2x2 grid! */
        grid-template-columns: 1fr; 
        gap: 20px;
    }

    /* 2. Stop horizontal scrolling from large images */
    img {
        max-width: 100%;
        height: auto;
    }

    /* 3. Scale down the massive Hero Text for phones */
    .hero-section h1 {
        font-size: 32px; /* Makes the main title fit the screen */
    }
} /* <--- THIS IS THE CRITICAL BRACKET. DO NOT DELETE IT! */