/* Global Styles */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
    /* Offset for sticky nav */
}

body {
    font-family: 'Roboto', 'Open Sans', Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #fff;
    color: #333;
    line-height: 1.6;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Header Section (Hero) */
header {
    position: relative;
    height: 60vh;
    /* Taller hero section */
    min-height: 500px;
    overflow: hidden;
    color: #fff;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.video-background video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}



.active-video {
    opacity: 1 !important;
}

.header-content {
    max-width: 1000px;
    /* Increased from 900px */
    margin: 0 auto;
    position: relative;
    z-index: 1;
    padding: 0 20px;
}

.header-content h1 {
    font-size: 2.5em;
    /* Reduced from 3em to fit text */
    margin-bottom: 20px;
    font-weight: 700;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
    line-height: 1.2;
}

.header-content p {
    font-size: 1.4em;
    margin-bottom: 30px;
    font-weight: 300;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}

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

.btn {
    display: inline-block;
    padding: 15px 30px;
    border-radius: 30px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 14px;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.btn-primary {
    background-color: #2471a3;
    /* Darker blue for contrast */
    color: #fff;
}

.btn-primary:hover {
    background-color: #1a5276;
    transform: translateY(-2px);
}

.btn-secondary {
    background-color: #fff;
    /* White background */
    border: 2px solid #fff;
    color: #203a58;
    /* Dark blue text */
}

.btn-secondary:hover {
    background-color: #eee;
    color: #203a58;
    transform: translateY(-2px);
}

.title-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.logo p {
    font-size: 1.2em;
    margin-top: 10px;
    font-weight: 300;
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Navigation */
nav {
    background-color: #203a58;
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: box-shadow 0.3s ease;
    /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); REMOVED */
}

.nav-scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.nav-logo {
    display: block;
    width: auto;
    height: 40px;
    position: relative;
    /* Ensure container has width/height to hold absolute children */
}

/* Remove pseudo-element approach */
.nav-logo::after {
    display: none;
}

.nav-logo img {
    height: 40px;
    width: auto;
    display: block;
    transition: opacity 0.3s ease;
}

.logo-normal {
    position: relative;
    z-index: 1;
    opacity: 1;
}

.logo-hover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    opacity: 0;
    /* Hidden by default */
}



.nav-logo:hover .logo-hover {
    opacity: 1;
}

.nav-logo {
    text-decoration: none;
    border: none;
    outline: none;
}

nav ul {
    display: flex;
    margin: 0;
}

nav ul li {
    margin: 0;
}

nav ul li a {
    display: block;
    padding: 20px 20px;
    color: #fff;
    /* White text */
    font-weight: 500;
    text-transform: uppercase;
    font-size: 14px;
    transition: all 0.3s;
    opacity: 0.9;
}

nav ul li a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    opacity: 1;
}

/* Main Content */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    /* Background and shadow removed as it's now just a wrapper */
}

.section {
    padding: 60px 0;
    /* Increase padding for better visual */
    width: 100%;
    /* border-bottom: 1px solid #eee; REMOVED border to avoid lines on dark sections */
}

.section:last-child {
    border-bottom: none;
}

.section h2 {
    color: #2c3e50;
    /* border-left: 5px solid #3498db; REMOVED */
    padding-left: 0;
    margin-bottom: 20px;
    font-size: 1.8em;
    text-align: center;
    text-transform: uppercase;
}

.section-dark {
    background-color: #203a58;
    color: #fff;
}

.section-dark h2 {
    color: #3498db;
    /* Keep the blue accent or make it white? Let's use blue for visibility or light blue */
    color: #fff;
}

.section-dark p {
    color: #eee;
}



.about-text p {
    margin-bottom: 15px;
    text-align: justify;
}

.owner-profiles {
    display: flex;
    justify-content: center;
    gap: 50px;
    margin-top: 40px;
    flex-wrap: wrap;
}

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

.owner-profile img {
    width: 250px;
    height: 250px;
    object-fit: cover;
    /* border-radius: 50%; REMOVED */
    /* border: 4px solid #3498db; REMOVED */
    margin-bottom: 10px;
}

.owner-name {
    font-weight: bold;
    font-size: 1.2em;
    color: #fff;
    margin-top: 10px;
}

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

.contact-details {
    margin-top: 30px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

@media (max-width: 768px) {
    .contact-details {
        grid-template-columns: 1fr;
    }
}


.contact-item h3 {
    margin-top: 0;
    color: #85c1e9;
    /* Lighter blue for contrast on dark bg */
    font-size: 1.2em;
    margin-bottom: 10px;
}

.contact-info {
    font-size: 1.1em;
}

.email-link {
    color: #3498db;
    font-weight: bold;
}

/* Offer Section */
.offer-content {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: center;
}

.offer-text {
    flex: 1;
    min-width: 300px;
}

.offer-text ul {
    list-style: disc;
    padding-left: 20px;
    margin-top: 15px;
}

.offer-text p {
    font-size: 1.2em;
    font-weight: 500;
    margin-bottom: 20px;
}

.offer-image {
    flex: 1;
    min-width: 300px;
}

.responsive-img {
    max-width: 100%;
    height: auto;
    border-radius: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Footer */
footer {
    background-color: #203a58;
    color: #fff;
    padding: 60px 0 40px;
    margin-top: 40px;
    font-size: 0.9em;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 20px;
    gap: 40px;
}

.footer-column {
    flex: 1;
    min-width: 250px;
}

.footer-column h3 {
    color: #85c1e9;
    /* Lighter blue for contrast on dark bg */
    font-size: 1.2em;
    margin-bottom: 20px;
    margin-top: 0;
}

.footer-logo img {
    height: 40px;
    width: auto;
    display: block;
    margin-bottom: 15px;
}

.footer-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.footer-nav li {
    margin-bottom: 5px;
}

.footer-nav a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-nav a:hover {
    color: #3498db;
}

.footer-column p {
    margin-bottom: 10px;
    line-height: 1.6;
}

.footer-column a {
    color: #fff;
    text-decoration: none;
}

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

/* Subpage Header */
.subpage-header {
    height: 40vh;
    min-height: 300px;
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('bg_video.mp4');
    /* Fallback to video as image or a color if no image provided for subpage. 
       Ideally should be an image. using dark blue fallback for now if no image */
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}

.signature {
    margin-top: 30px;
    font-weight: bold;
    font-style: italic;
    text-align: right;
}

.about-full {
    padding: 60px 20px;
    max-width: 900px;
    margin: 0 auto;
    font-size: 1.1em;
    line-height: 1.8;
}

.footer-bottom {
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.9em;
    color: #bbb;
    position: relative;
}

.scroll-top-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    background-color: #2471a3;
    color: white;
    border-radius: 50%;
    text-decoration: none;
    margin-top: 15px;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.scroll-top-btn:hover {
    background-color: #1a5276;
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.scroll-top-btn .arrow-up {
    font-size: 24px;
    font-weight: bold;
    line-height: 1;
}

/* Responsive Footer */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        gap: 30px;
    }

    .footer-column {
        min-width: 100%;
        text-align: center;
    }

    .footer-nav {
        /* Keep grid on mobile or switch to single column? 
           User asked for split, usually looks okay on mobile too if not too squeezed,
           but centering text might look better with inline-block or just grid centered.
           Let's keep grid but centering might be tricky with text-align:center on parent.
           Actually, grid items are block by default.
        */
        text-align: left;
        /* Reset text align for grid items to look neat */
        max-width: 300px;
        /* Limit width to keep it looking like a menu */
        margin: 0 auto;
        /* Center the grid itself */
    }

    .footer-logo img {
        margin: 0 auto 15px;
    }
}

@media (max-width: 768px) {
    .nav-container {
        flex-direction: column;
        padding: 10px;
    }

    nav ul {
        margin-top: 10px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .header-content h1 {
        font-size: 2em;
    }
}

/* Video Header Transition */
#bg-video,
#bg-video-2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 2s ease-in-out;
    opacity: 0;
}

.active-video {
    opacity: 1 !important;
}

/* Carousel Styles (Strip Mode) */
.carousel-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    margin: 40px auto 0;
    padding: 20px 0;
}

.carousel-track {
    display: flex;
    transition: transform 0.5s ease-out;
    cursor: grab;
    /* Will be set by JS usually, but flex allows items to sit side by side */
}

.carousel-slide {
    display: block;
    min-width: 250px;
    max-width: 300px;
    /* Reduced size */
    margin: 0 10px;
    flex-shrink: 0;
    opacity: 0.5;
    transform: scale(0.9);
    transition: all 0.5s ease;
}

.carousel-slide.active {
    opacity: 1;
    transform: scale(1);
    z-index: 2;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.carousel-slide img {
    width: 100%;
    height: auto;
    display: block;
    /* border-radius: 8px; REMOVED */
    cursor: pointer;
}

/* Nav Buttons */
.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(32, 58, 88, 0.7);
    /* Primary color match */
    color: white;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 20px;
    z-index: 10;
    border-radius: 50%;
    transition: background 0.3s;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-btn:hover {
    background: rgba(32, 58, 88, 1);
}

.prev-btn {
    left: 20px;
}

.next-btn {
    right: 20px;
}

@media (max-width: 768px) {
    .carousel-slide {
        min-width: 250px;
    }
}

/* Lightbox Styles */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.lightbox.active {
    display: flex;
}

.lightbox img {
    max-width: 90%;
    max-height: 90%;
    border: 2px solid white;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 40px;
    color: white;
    cursor: pointer;
    z-index: 10002;
    transition: color 0.3s;
}

.lightbox-close:hover {
    color: #3498db;
}

.lightbox-prev,
.lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 50px;
    color: white;
    cursor: pointer;
    z-index: 10002;
    padding: 20px;
    user-select: none;
    transition: color 0.3s;
}

.lightbox-prev {
    left: 20px;
}

.lightbox-next {
    right: 20px;
}

.lightbox-prev:hover,
.lightbox-next:hover {
    color: #3498db;
}

/* Scroll Animations */
.anim-hidden {
    opacity: 0;
    transition: all 1s ease-out;
}

.from-left {
    transform: translateX(-100px);
}

.from-right {
    transform: translateX(100px);
}

.fade-only {
    transform: scale(0.9);
}


.anim-visible {
    opacity: 1 !important;
    transform: translateX(0) scale(1) !important;
}