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


html {
    scroll-behavior: smooth;
}


body {
    font-family: Arial, Helvetica, sans-serif;
    color: #1f2937;
    background: #f7f9fc;
    line-height: 1.6;
}



.hero{

    min-height:100vh;

    background:
    linear-gradient(rgba(15,23,42,.72),rgba(15,23,42,.72)),
    url("images/HeroBackground.jpg");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    color:#fff;

    display:flex;
    flex-direction:column;

}



.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 5%;
    background: #000000 !important;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-sizing: border-box;
    width: 100%;
    height: 150px !important; /* Blows up total header bar space */
    overflow: hidden;
}

.logo {
    display: flex;
    align-items: center;
    height: 100%;
    width: auto;
}

.hero-logo-img {
    height: 140px !important; /* Forces the image lettering out of its dead-space container */
    width: auto;
    object-fit: contain;
    display: block;
    filter: invert(1) hue-rotate(180deg) brightness(1.2) contrast(1.2);
}






.logo-main{

font-family:'Outfit',sans-serif;

font-size:3.5rem;

font-weight:700;

color:#ffffff;

letter-spacing:.5px;

line-height:1;

text-shadow:
0 3px 12px rgba(0,0,0,.45);

transition:.3s;

}

.logo-main:hover{

transform:scale(1.03);

color:#FFD54A;

}



.logo-sub{

font-family:'Outfit',sans-serif;

font-size:1.05rem;

font-weight:600;

color:#FFD54A;

letter-spacing:7px;

text-transform:uppercase;

margin-top:8px;

text-align:center;

}




.nav-links {
    display: flex;
    gap: 40px; /* Added extra space between the larger buttons */
    align-items: center;
}

.nav-links a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.4rem !important; /* Blows up the text size proportionally */
}




.hero-content{

    flex:1;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:40px 20px;

    max-width:900px;

    margin:auto;

}



.hero-content h1{

    font-size:clamp(3.5rem,7vw,5.8rem);

    line-height:1;

    font-weight:700;

    text-shadow:0 6px 20px rgba(0,0,0,.45);

    margin-bottom:20px;

}



.hero-content p {

    font-size:1.3rem;

    margin:25px 0;

}




.btn {

    display:inline-block;

    padding:15px 30px;

    border-radius:50px;

    text-decoration:none;

    font-weight:bold;

    margin:10px;

}



.primary{

background:#FFB703;

color:#111;

font-weight:700;

letter-spacing:.3px;

}



.secondary {

    border:2px solid white;

    color:white;

}



.section {

    max-width:1200px;

    margin:auto;

    padding:70px 20px;

}



.section h2 {

    text-align:center;

    font-size:2.5rem;

    margin-bottom:20px;

    color:#004aad;

}



.subtitle {

    text-align:center;

    margin-bottom:40px;

}



.feature-grid {

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:25px;

    margin-top:40px;

}



.feature {

    background:white;

    padding:30px;

    border-radius:20px;

    text-align:center;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

}



.rental-grid {

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:30px;

}



.rental-card {

    background:white;

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 10px 25px rgba(0,0,0,.12);

    transition:.3s;

    display:flex;

    flex-direction:column;

    height:100%;

}



.rental-card:hover {

    transform:translateY(-8px);

}



.rental-card img {

    width:100%;

    height:260px;

    object-fit:cover;
    
    background:#fff;

}



.rental-card h3 {

    padding:15px 20px 5px;

    color:#004aad;

}



.rental-card p {

    padding:0 20px;

    flex-grow:1;

}



.rental-card strong {

    display:block;

    padding:15px 20px 25px;

    color:#e63946;

}
.movie-content {

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

    gap:40px;

    align-items:center;

}



.movie-content img {

    width:100%;

    max-height:450px;

    object-fit:contain;

    background:white;

    border-radius:20px;

    box-shadow:0 10px 25px rgba(0,0,0,.12);

}



.movie-info {

    background:white;

    padding:30px;

    border-radius:20px;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

}



.movie-info ul {

    margin:20px;

}



.snack-box {

    background:#eef6ff;

    padding:20px;

    border-radius:15px;

    margin-top:20px;

}





.gallery-grid {

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:20px;

}



.gallery-grid img {

    width:100%;

    height:220px;

    object-fit:cover;

    background:white;

    border-radius:15px;

    box-shadow:0 8px 20px rgba(0,0,0,.1);

}





.policy-box {

    background:white;

    padding:35px;

    border-radius:20px;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

}



.policy-box li {

    margin:12px 0;

}




.quote-form {

    max-width:600px;

    margin:auto;

    display:flex;

    flex-direction:column;

    gap:15px;

}



.quote-form input,

.quote-form select,

.quote-form textarea {

    padding:15px;

    border-radius:12px;

    border:1px solid #ccc;

    font-size:1rem;

}



.quote-form textarea {

    min-height:150px;

}




.quote-form button {

    border:none;

    cursor:pointer;

    font-size:1rem;

}




.contact {

    text-align:center;

}



.contact p {

    font-size:1.2rem;

    margin:10px;

}



footer {

    background:#002855;

    color:white;

    text-align:center;

    padding:30px;

}




.fade-section {

    opacity:0;

    transform:translateY(30px);

    transition:.8s;

}



.fade-section.visible {

    opacity:1;

    transform:translateY(0);

}




@media(max-width:768px) {

    .navbar {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 12px 10px !important;
        height: auto !important;
        min-height: 0;
        overflow: visible;
    }

    .logo {
        width: 100%;
        height: auto;
        justify-content: center;
    }

    .hero-logo-img {
        width: auto;
        max-width: 85%;
        height: 150px !important;
        object-fit: contain;
        margin: 0 !important;
    }

    .nav-links {
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px 14px;
        padding: 10px 5px 5px;
    }

    .nav-links a {
        font-size: 0.95rem !important;
    }

    .hero {
        min-height: 100vh;
        padding-top: 0 !important;
    }

    .hero-content {
        width: 100%;
        padding: 45px 15px 30px;
        box-sizing: border-box;
    }

    .hero-content h1 {
        font-size: 2.5rem;
        line-height: 1.15;
    }

    .hero-content p {
        font-size: 1rem;
    }

    .trust-bar {
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    .trust-bar div {
        width: 100%;
        box-sizing: border-box;
    }

    .service-area {
        font-size: 0.95rem;
        margin-top: 25px;
    }

    .rental-grid {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        gap: 25px;
    }

    .rental-card {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    .rental-card img {
        display: block;
        width: 100%;
        height: 220px;
        object-fit: cover;
    }

}

.service-area{

    margin-top:40px;

    max-width:850px;

    font-size:1.15rem;

    line-height:1.7;

    color:#f8fafc;

    text-shadow:0 2px 8px rgba(0,0,0,.5);

}

.rental-btn{

    display:block;

    margin:15px 20px 25px;

    text-align:center;

}
.quote-message{

text-align:center;

font-size:1.1rem;

margin-bottom:30px;

color:#004aad;

font-weight:600;

}
.quote-message{

    text-align:center;

    font-size:1.1rem;

    margin-bottom:30px;

    color:#004aad;

    font-weight:600;

}

.gallery-image{

    cursor:pointer;

    transition:.3s;

}


.gallery-image:hover{

    transform:scale(1.03);

}




.lightbox{

    display:none;

    position:fixed;

    z-index:9999;

    top:0;

    left:0;

    width:100%;

    height:100%;

    background:rgba(0,0,0,.9);

    align-items:center;

    justify-content:center;

}



.lightbox img{

    max-width:90%;

    max-height:85%;

    border-radius:15px;

}



.close-lightbox{

    position:absolute;

    top:25px;

    right:40px;

    color:white;

    font-size:50px;

    cursor:pointer;

}



.prev,
.next{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    color:white;

    font-size:50px;

    cursor:pointer;

    padding:20px;

}



.prev{

    left:30px;

}



.next{

    right:30px;

}



.prev:hover,
.next:hover,
.close-lightbox:hover{

    color:#ffd700;

}



@media(max-width:768px){

    .prev{

        left:5px;

    }


    .next{

        right:5px;

    }


    .close-lightbox{

        right:15px;

    }

}

.featured{

border:3px solid #FFD54A;

background:linear-gradient(180deg,#fffdf3,#ffffff);

transform:none;
    
box-shadow:0 18px 45px rgba(255,193,7,.25);

}

.featured h3{

    color:#c98a00;

}

.featured strong{

    font-size:1.4rem;

}

.nav-links a{

    transition:.25s;

}

.nav-links a:hover{

    color:#ffd700;

}

.btn{

    transition:.25s;

}

.btn:hover{

transform:translateY(-4px);

box-shadow:0 18px 40px rgba(0,0,0,.22);

}


.rental-card{

    transition:.3s;
}

.rental-card:hover{

    transform:translateY(-10px);
    box-shadow:0 20px 40px rgba(0,0,0,.18);

}

.trust-bar{

display:flex;
justify-content:center;
gap:35px;
flex-wrap:wrap;
margin:35px 0 15px;

font-weight:700;
font-size:1rem;

color:white;

}

.trust-bar div{

background:rgba(255,255,255,.12);

padding:12px 22px;

border-radius:999px;

backdrop-filter:blur(8px);

}


@media (max-width: 768px) {

    #rentals {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        min-height: 100px !important;
        overflow: visible !important;
    }

    #rentals .rental-grid {
        display: grid !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        min-height: 100px !important;
        overflow: visible !important;
        grid-template-columns: 1fr !important;
    }

    #rentals .rental-card {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        min-height: 300px !important;
    }

    #rentals .rental-card img {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

}

#rentals {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}