@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Arvo:ital,wght@0,400;0,700;1,400;1,700&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Figtree:wght@300..900&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
/* Global box-sizing */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Add 10px margin to the top of all sections */
section {
    margin-top: 10px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

:root {
    --primary: #20385F; /* Deep Blue */
    --secondary: #70A0C9; /* Light Blue */
    --accent: #6CB9B0; /* Soft Teal */
    --text-color: #264058; /* Charcoal Grey */
    --text-color2: #0b2741; /* Charcoal Grey */
    --text-color3: #9ab7f5; /* Charcoal Grey */
    --background-color: #d7e4ed; /* Off-White */
    --background-color2: #b9e0fb; /* Off-White */
    --surface-rgb: 211, 219, 226; /* For rgba() */
    --neon-glow-color: #6CB9B0; /* Soft Teal - matches accent */
    --neon-glow-strength-1: 0 0 5px;
    --neon-glow-strength-2: 0 0 10px;
    --neon-glow-strength-3: 0 0 20px;
    --neon-glow-strength-4: 0 0 40px;
    --white: #FFFFFF;
    --font-family-sans-serif: 'Open Sans','Merriweather','Arvo', 'DM Sans', 'Arial', sans-serif; /* Prioritize Arial from header-styles */
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --page-background: #F5F8FA; /* Riverside Professional Light Mode Background */
    --card-surface: #D3DBE2;    /* Riverside Professional Light Mode Surface */

    /* New colors */
    --gray-light: #bbb;
    --black: black;
    --blue-primary: #007bff;
    --gray-dark: #212529;
    --red-danger: #dc3545;
    --gray-medium: #6c757d;
    --green-success: #28a745;
    --yellow-warning: #ffc107;
    --cyan-info: #17a2b8;
    --dark-gray-alt: #343a40;
    --gray-dark-alt: #444;
    --blue-dark: #0056b3;
    --gray-text: #555;
    --gray-light-border: #eee;
    --gray-light-bg: #f8f9fa;
    --gray-lighter-border: #e9ecef;
    --carousel-slide-cyan: #ddfafd;
    --carousel-slide-green: #e0f5e2;
    --carousel-slide-purple: #f2def5;
    --carousel-slide-yellow: #f9f6d5;
    --carousel-slide-gray: #e0e0e0;
    --carousel-slide-red: #ffe0e0;
    --carousel-slide-blue: #e0f0ff;
    --gray-extra-light-bg: #f0f0f0;

    /* RGB values for rgba() functions */
    --primary-rgb: 32, 56, 95;
    --white-rgb: 255, 255, 255;
    --black-rgb: 0, 0, 0;
    --accent-rgb: 108, 185, 176;
    --secondary-rgb: 112, 160, 201;
    --yellow-warning-rgb: 255, 193, 7;
    --red-danger-rgb: 220, 53, 69;

    /* New box shadows */
    --shadow-small: 0 4px 8px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 6px 12px rgba(0,0,0,0.1);
    --shadow-large: 0 8px 16px rgba(0,0,0,0.15);
    --shadow-medium-alt: 0 8px 16px rgba(0,0,0,0.1);
    --shadow-extra-small: 0 2px 10px rgba(0,0,0,0.1);
    --shadow-hover: 0 4px 8px rgba(0,0,0,0.2);
}

body {
    margin: 0;
    width: 100vw; /* Ensure full device width */
    overflow-x: hidden; /* Prevent horizontal scroll */
    font-family: var(--font-family-sans-serif);
    position: relative; /* For particles */
    background-color: var(--background-color);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    color: var(--text-color); /* Use text-color from new variables */
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    box-sizing: border-box;
}
.open-sans h2, .open-sans p {
    font-family: 'Open Sans', sans-serif;
}




nav ul {
    list-style: none;
    padding: 0;
    text-align: center;
    background-color: #444;
}

nav ul li {
    display: inline;
    margin: 0 15px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
    padding: 10px 0;
    display: inline-block;
}

main {
    padding: 20px;
    /*margin-top: 80px; /* Added to push content below fixed header/nav */
    position: relative; /* Ensure z-index works for children */
    z-index: 1; /* Default z-index for main content */
    min-height: calc(100vh - 120px); /* Adjust based on header/footer height */
    display: flex;
    flex-direction: column;
    /*background-color: #dc3545;*/
}


.maincontent{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
    /*background-color: chartreuse;*/
}
.maincontent section{
 margin-bottom: 10px;

}

/* Responsive styles for maincontent */
@media screen and (max-width: 1200px) {
    .maincontent {
        max-width: 100%;
        padding: 0 15px;
    }
}

@media screen and (max-width: 768px) {
    .maincontent {
        max-width: 100%;
        padding: 0 15px;
    }
}

@media screen and (max-width: 480px) {
    .maincontent {
        max-width: 100%;
        padding: 0 10px;
    }
}


#header-container {
    position: relative; /* Needed for z-index to apply */
    z-index: 2; /* Ensure header is above other content */
}

#home-content-container {
    position: relative; /* Needed for z-index to apply */
    z-index: 1; /* Ensure home content is below header */
    font-family:  'Arial Narrow ', sans-serif; /* Fixed missing semicolon */
    margin-top: 50px;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 1200px;
    padding-bottom: 40px; /* Extra padding to avoid overlap with footer */
}



.footer-bottom{
justify-content: center;
align-items: center;
display: flex;

}



.button {
    display: inline-block;
    background-color: #007bff;
    color: #fff;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1.1em;
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: #0056b3;
}

/* Carousel Styles */
.carousel-container {
    position: relative;
    display: block;
    top: 40px; /* Slightly adjusted from 20px to 5px */
    width: 90%; /* Adjusted for responsiveness */
    max-width: 900px; /* Adjusted for responsiveness */
    height: auto; /* Adjusted for responsiveness */
    min-height: 300px; /* Ensure a minimum height */
    margin: 0 auto; /* Center the carousel horizontally */
    overflow: hidden;
    border-radius: 10px;
    box-sizing: border-box;
    
}

.carousel-slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.carousel-slide {
    min-width: 100%;
    box-sizing: border-box;
    padding: 20px; /* Reduced padding */
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.carousel-slide .card-image {
    max-width: 100%;
    max-height: 200px; /* Adjust as needed to fit card view */
    height: auto;
    object-fit: cover; /* Ensures the image covers the area, cropping if necessary */
    border-radius: 8px;
    margin-bottom: 15px;
}

.carousel-slide h3 {
    font-size: 1.8em; /* Reduced font size */
    color: #007bff;
    margin-bottom: 10px; /* Reduced margin */
}

.carousel-slide.slide-1 {
    background-color: #ddfafd; /* Light Cyan */
}

.carousel-slide.slide-2 {
    background-color: #e0f5e2; /* Light Green */
}

.carousel-slide.slide-3 {
    background-color: #f2def5; /* Light Purple */
}

.carousel-slide.slide-4 {
    background-color: #f9f6d5; /* Light Yellow */
}

.carousel-slide.slide-5 {
    background-color: #e0e0e0; /* Light Gray */
}

.carousel-slide.slide-6 {
    background-color: #ffe0e0; /* Light Red */
}

.carousel-slide.slide-7 {
    background-color: #e0f0ff; /* Light Blue */
}

.carousel-slide p {
    font-size: 1em; /* Reduced font size */
    color: #555;
    margin-bottom: 15px; /* Reduced margin */
}

@media (max-width: 768px) {
    .carousel-slide {
        padding: 15px; /* Further reduce padding on smaller screens */
    }

    .carousel-slide h3 {
        font-size: 1.5em; /* Adjust font size for smaller screens */
    }

    .carousel-slide p {
        font-size: 0.9em; /* Adjust font size for smaller screens */
    }
}


.carousel-dots {
    display: flex;
    justify-content: center;
    padding: 20px 0;

/* New styles for image grid images */
.grid-image {
    width: 100%;
    height: 250px; /* Maintain consistency with existing image-grid img height */
    object-fit: cover;
    border-radius: 15px;
    box-shadow: 0 5px 20px var(--shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.grid-image:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
    background-color: #f8f9fa;
    border-top: 1px solid #eee;
}

.dot {
    height: 12px;
    width: 12px;
    margin: 0 5px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.dot.active {
    background-color: #007bff;
}

/* Floating Navigation Button and Hamburger Menu */
.main-nav {
    position: fixed;
    top: 50px; /* Adjusted from 20px to 50px */
    right: 20px;
    z-index: 1001; /* Increased z-index to ensure visibility */
}

.hamburger-button {
    background-color: transparent; /* Remove background color */
    color: #fff;
    border: none;
    border-radius: 0; /* Remove circle effect */
    width: 60px;
    height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: none; /* Remove shadow */
    transition: background-color 0.3s ease;
}

.hamburger-button:hover {
    background-color: #0056b3;
}

.hamburger-icon {
    display: block;
    width: 30px;
    height: 3px;
    background-color: #fff;
    margin: 4px 0;
    transition: all 0.3s ease-in-out;
}

.nav-links {
    list-style: none;
    padding: 0;
    margin: 0;
    background: linear-gradient(to bottom, #2c3e50, #1a252f); /* Dark gradient for menu */
    position: fixed;
    top: 0;
    right: -100%; /* Start off-screen */
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: right 0.3s ease-in-out;
    z-index: 999; /* Below the button */
}

.nav-links.active {
    right: 0; /* Slide in */
}

.nav-links li {
    margin: 15px 0;
}

.nav-links li a {
    color: #fff;
    text-decoration: none;
    font-size: 1.5em;
    padding: 10px 20px;
    display: block;
    transition: color 0.3s ease;
}

.nav-links li a:hover {
    color: #007bff;
}

/* Hide default nav styles for mobile */
nav ul {
    display: none; /* Hide the original ul */
}

/* Media query for larger screens */
@media (min-width: 768px) {
    .hamburger-button {
        display: none; /* Hide hamburger on larger screens */
    }

    .main-nav {
        position: static; /* Reset position for desktop */
        top: auto;
        right: auto;
        display: flex;
        justify-content: flex-end; /* Align nav to the right */
        width: 100%;
        background: linear-gradient(to right, #2c3e50, #1a252f); /* Dark gradient for desktop nav */
        padding: 10px 0;
    }

    .nav-links {
        position: static; /* Reset position for desktop */
        width: auto;
        height: auto;
        background-color: transparent;
        flex-direction: row;
        justify-content: flex-end;
        right: auto; /* Ensure it's visible */
        display: flex; /* Make sure it's displayed */
    }

    .nav-links li {
        margin: 0 15px;
    }

    .nav-links li a {
        font-size: 1em;
        padding: 10px 0;
    }
}

/* Card View 2: Text Overlay */
.carousel-slide.view-2 {
    position: relative;
    color: #fff;
}

.carousel-slide.view-2 .card-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: brightness(0.5);
}

.carousel-slide.view-2 .card-content-overlay {
    position: relative;
    z-index: 1;
    padding: 20px;
}

/* Card View 3: Text Only */
.carousel-slide.view-3 {
    background-color: #f0f0f0;
}

.carousel-slide.view-3 h3 {
    color: #333;
}

.carousel-slide.view-3 .text-content {
    color: #555;
}

/* css/card-templates-common.css */
/* Card Template Base Styles */
.card-template {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    overflow: hidden;
}


@media (min-width: 768px) { /* md: */

}

/* css/header-styles.css */
.hero-gradient {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 50%, var(--accent) 100%);
    background-size: 200% 200%; /* Required for smooth animation */
    animation: gradientShift 8s ease-in-out infinite;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes fall {
  0% { transform: translateY(-109vh); opacity: 1; }
  100% { transform: translateY(100vh); opacity: 0; }
}

.floating {
    animation: floating 3s ease-in-out infinite;
}
@keyframes floating {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

.typewriter-container {
    display: block;
    color: var(--white);
    text-align: center;
    font-size: 1.5rem;
    width: 100%;
}
.typewriter-text {
    font-weight: 900;
    overflow: hidden;
    border-right: 3px solid;
    /*white-space: nowrap;*/ 
    width: 1ch;
    animation: typing 3s steps(40, end), blink-caret .75s step-end infinite;
}
@keyframes typing {
    from { width: 0; }
    to { width: 20ch; }
}
@keyframes blink-caret {
    from, to { border-color: transparent; }
    50% { border-color: #ffffff; }
}

.neon-glow {
    text-shadow: var(--neon-glow-strength-1) var(--neon-glow-color),
                 var(--neon-glow-strength-2) var(--neon-glow-color),
                 var(--neon-glow-strength-3) var(--neon-glow-color),
                 var(--neon-glow-strength-4) var(--neon-glow-color);
}

.glass-effect {
    background: rgba(var(--surface-rgb), 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(var(--surface-rgb), 0.2);
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    margin-top: 1.25rem;
    color: var(--text-color);
    font-weight: 600;
}

#particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}
.particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    animation: float linear infinite;
}
@keyframes float {
    0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 0; }
    100% { transform: translateY(-100vh) rotate(360deg); opacity: 0; }
}

/* Compact Header Styles */
.headersection {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: all 0.5s ease-in-out;
    width: 100%;
}
#compactHeader {
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 10;
    padding: 5px;
    border-radius: 15px;
    background: transparent;
    backdrop-filter: none;
    transition: all 0.5s ease-in-out;
    width: 100%;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
}
.logo-compact {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    transition: all 0.5s ease-in-out;
    flex-shrink: 0;
}
.title-compact {
    font-size: 3rem;
    font-weight: bold;
    color: white;
    transition: all 0.5s ease-in-out;
    text-align: center;
    flex-grow: 1;
    margin: 0 20px;
}

/* Navigation Styles */
.nav-container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: flex-end;
}
.hamburger-button {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 30px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 20;
}
.hamburger-icon {
    width: 100%;
    height: 3px;
    background: white;
    border-radius: 10px;
    transition: all 0.3s linear;
    transform-origin: 1px;
}
.nav-links {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 5px; /* Reduced gap between menu items */
    flex-wrap: nowrap; /* Prevent wrapping of menu items */
    background: transparent; /* Ensure transparent background for the nav links container */
}
.nav-links li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.8em; /* Further reduced font size for readability */
    padding: 4px 6px; /* Adjusted padding */
    border-radius: 5px;
    transition: background 0.3s ease;
    background: transparent; /* Ensure transparent background */
    white-space: nowrap; /* Prevent text truncation */
}
.nav-links li a:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Shrunk state styles */

.typewriter-container.shrunk {
    display: flex;
    color: var(--white);
    text-align: left;
    font-size: 1.5rem;
    left: 0;
}

.typewriter-text.shrunk {
    animation: none; /* Remove typing animation */
    border-right: none; /* Remove blinking caret */
    width: auto; /* Allow full width */
}


.headersection.shrunk {
    height: 60px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    justify-content: flex-start;

}
.headersection.shrunk #compactHeader {
    border-radius: 0;
    justify-content: space-between;
    width: 100%;
    margin: 0;
}
.headersection.shrunk .logo-compact {
    width: 50px;
    height: 50px;
    }
.headersection.shrunk .title-compact {
    font-size: 1.5rem;
    margin: 0 0px;
}

/* Mobile Styles */
@media (max-width: 768px) {
    .nav-container {
        justify-content: center; /* Center the nav container content (hamburger) */
    }
    .hamburger-button {
        display: flex;
    }
    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        flex-direction: column;
        background: rgba(32, 56, 95, 0.7); /* Slightly more transparent */
        width: 250px;
        height: 100vh;
        padding: 80px 20px 20px;
        transition: right 0.3s ease-in-out;
        z-index: 10;
        backdrop-filter: blur(10px);
        gap: 0;
        overflow-y: auto;
    }
    .nav-links.active {
        right: 0;
    }
    .nav-links li {
        margin: 5px 0;
        width: 100%;
    }
    .nav-links li a {
        display: block;
        padding: 15px;
        width: 100%;
        font-size: 1.5em; /* Reduced font size for mobile */
    }
    .title-compact {
        font-size: 1.5rem;
        margin: 0 10px;
    }

    
.typewriter-container.shrunk {
    font-size: 1.0rem;
} 


    .headersection.shrunk .title-compact {
        font-size: 1.2rem;
    }
    #compactHeader {
        padding: 1px;
        justify-content: center; /* Center header content on smaller screens */
    }
    .headersection.shrunk #compactHeader {
            justify-content: center; /* Center shrunk header content on smaller screens */
    }
}
@media (max-width: 480px) {
    .logo-compact {
        width: 60px;
        height: 60px;
    }
    .title-compact {
        font-size: 1.2rem;
    }

    .typewriter-container.shrunk {
    font-size: 0.8rem;
} 

    .headersection.shrunk .logo-compact {
        width: 40px;
        height: 40px;
    }
    .nav-links {
        width: 200px;
    }
}
@media (max-width: 350px) {
    .logo-compact {
        width: 50px;
        height: 50px;
    }
    .title-compact {
        font-size: 1rem;
    }

    .typewriter-container.shrunk {
    font-size: 0.8rem;
} 



    #compactHeader {
        padding: 1px;
    }
}

/* css/card-templates.css */

.template-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.template-container > * {
    flex: 1 1 250px;
    max-width: 300px;
}

.card-template.force-white-card-bg {
    background-color: #FFFFFF !important;
}

@media (max-width: 480px) {
    .template-container {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
}

@media (max-width: 320px) {

}

/* css/view-1.css */
.view-1 .card-image {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.view-1 .card-content {
    padding: 20px;
}

.view-1 .card-title {
    font-size: 1.5em;
    margin-bottom: 10px;
}

.view-1 .card-text {
    margin-bottom: 20px;
}

.view-1 .card-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
}

@media (max-width: 768px) {
    .view-1 .card-title {
        font-size: 1.2em;
    }

    .view-1 .card-text {
        font-size: 0.9em;
    }

    .view-1 .card-button {
        padding: 8px 16px;
        font-size: 0.9em;
    }
}

@media (max-width: 480px) {
    .view-1 .card-title {
        font-size: 1.1em;
    }

    .view-1 .card-text {
        font-size: 0.8em;
    }

    .view-1 .card-button {
        padding: 6px 12px;
        font-size: 0.8em;
    }
}

@media (max-width: 320px) {
    .view-1 .card-content {
        padding: 15px;
    }
}

/* css/view-2.css */
.view-2 .card-header {
    padding: 10px 20px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    font-weight: bold;
}

.view-2 .card-image {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.view-2 .card-content {
    padding: 20px;
}

.view-2 .card-title {
    font-size: 1.5em;
    margin-bottom: 10px;
}

.view-2 .card-text {
    margin-bottom: 20px;
}

.view-2 .card-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #28a745;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
}

@media (max-width: 768px) {
    .view-2 .card-title {
        font-size: 1.2em;
    }

    .view-2 .card-text {
        font-size: 0.9em;
    }

    .view-2 .card-button {
        padding: 8px 16px;
        font-size: 0.9em;
    }
}

@media (max-width: 480px) {
    .view-2 .card-title {
        font-size: 1.1em;
    }

    .view-2 .card-text {
        font-size: 0.8em;
    }

    .view-2 .card-button {
        padding: 6px 12px;
        font-size: 0.8em;
    }
}

@media (max-width: 320px) {
    .view-2 .card-content {
        padding: 15px;
    }
}

/* css/view-3.css */
.view-3 .card-image {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.view-3 .card-content {
    padding: 20px;
}

.view-3 .card-title {
    font-size: 1.5em;
    margin-bottom: 10px;
}

.view-3 .card-text {
    margin-bottom: 20px;
}

.view-3 .card-footer {
    padding: 10px 20px;
    background-color: #f8f9fa;
    border-top: 1px solid #e9ecef;
    text-align: right;
}

.view-3 .card-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #ffc107;
    color: #212529;
    text-decoration: none;
    border-radius: 5px;
}

@media (max-width: 768px) {
    .view-3 .card-title {
        font-size: 1.2em;
    }

    .view-3 .card-text {
        font-size: 0.9em;
    }

    .view-3 .card-button {
        padding: 8px 16px;
        font-size: 0.9em;
    }
}

@media (max-width: 480px) {
    .view-3 .card-title {
        font-size: 1.1em;
    }

    .view-3 .card-text {
        font-size: 0.8em;
    }

    .view-3 .card-button {
        padding: 6px 12px;
        font-size: 0.8em;
    }
}

@media (max-width: 320px) {
    .view-3 .card-content {
        padding: 15px;
    }
}

/* css/view-4.css */
.view-4 {
    position: relative;
    color: #fff;
}

.view-4 .card-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
}

.view-4 .card-content-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0));
    border-radius: 0 0 8px 8px;
}

.view-4 .card-title {
    font-size: 1.8em;
    margin-bottom: 10px;
}

.view-4 .card-text {
    margin-bottom: 20px;
}

.view-4 .card-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #17a2b8;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
}

@media (max-width: 768px) {
    .view-4 .card-title {
        font-size: 1.5em;
    }

    .view-4 .card-text {
        font-size: 0.9em;
    }

    .view-4 .card-button {
        padding: 8px 16px;
        font-size: 0.9em;
    }
}

@media (max-width: 480px) {
    .view-4 .card-title {
        font-size: 1.3em;
    }

    .view-4 .card-text {
        font-size: 0.8em;
    }

    .view-4 .card-button {
        padding: 6px 12px;
        font-size: 0.8em;
    }
}

@media (max-width: 320px) {
    .view-4 .card-content-overlay {
        padding: 15px;
    }
}

/* css/view-5.css */
.view-5 .card-image {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.view-5 .card-content {
    padding: 20px;
    text-align: center;
    margin: 0 auto;
}

.view-5 .card-title {
    font-size: 1.5em;
    margin-bottom: 10px;
}

.view-5 .card-price {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 20px;
    color: #28a745;
}

.view-5 .card-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
}

@media (max-width: 768px) {
    .view-5 .card-title {
        font-size: 1.2em;
    }

    .view-5 .card-price {
        font-size: 1em;
    }

    .view-5 .card-button {
        padding: 8px 16px;
        font-size: 0.9em;
    }
}

@media (max-width: 480px) {
    .view-5 .card-title {
        font-size: 1.1em;
    }

    .view-5 .card-price {
        font-size: 0.9em;
    }

    .view-5 .card-button {
        padding: 6px 12px;
        font-size: 0.8em;
    }
}

@media (max-width: 320px) {
    .view-5 .card-content {
        padding: 15px;
    }
}

/* css/view-6.css */
.view-6 {
    position: relative;
    text-align: center;
    padding-top: 80px;
}

.view-6 .card-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background-color: #007bff;
    border-radius: 8px 8px 0 0;
}

.view-6 .card-profile-image {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto;
    border-radius: 50%;
    border: 5px solid #fff;
    overflow: hidden;
    z-index: 1;
}

.view-6 .card-profile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.view-6 .card-content {
    padding: 20px;
}

.view-6 .card-title {
    font-size: 1.8em;
    margin-bottom: 5px;
}

.view-6 .card-subtitle {
    font-size: 1.1em;
    color: #6c757d;
    margin-bottom: 20px;
}

.view-6 .card-social-links a {
    margin: 0 10px;
}

.view-6 .card-social-links img {
    width: 24px;
    height: 24px;
}

@media (max-width: 768px) {
    .view-6 .card-title {
        font-size: 1.5em;
    }

    .view-6 .card-subtitle {
        font-size: 1em;
    }
}

@media (max-width: 480px) {
    .view-6 .card-title {
        font-size: 1.3em;
    }

    .view-6 .card-subtitle {
        font-size: 0.9em;
    }

    .view-6 .card-social-links img {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 320px) {
    .view-6 .card-content {
        padding: 15px;
    }
}

/* css/view-7.css */
.view-7 {
    display: flex;
    flex-direction: column;
}

.view-7 .card-image-container {
    position: relative;
}

.view-7 .card-image {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.view-7 .card-category {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 5px 10px;
    background-color: #dc3545;
    color: #fff;
    font-size: 0.9em;
    border-radius: 5px;
}

.view-7 .card-content {
    padding: 20px;
}

.view-7 .card-title {
    font-size: 1.5em;
    margin-bottom: 10px;
}

.view-7 .card-excerpt {
    margin-bottom: 20px;
}

.view-7 .card-link {
    text-decoration: none;
    color: #007bff;
    font-weight: bold;
}

@media (max-width: 768px) {
    .view-7 .card-title {
        font-size: 1.2em;
    }

    .view-7 .card-excerpt {
        font-size: 0.9em;
    }
}

@media (max-width: 480px) {
    .view-7 .card-title {
        font-size: 1.1em;
    }

    .view-7 .card-excerpt {
        font-size: 0.8em;
    }

    .view-7 .card-category {
        font-size: 0.8em;
        padding: 3px 8px;
    }
}

@media (max-width: 320px) {
    .view-7 .card-content {
        padding: 15px;
    }
}

/* css/view-8.css */
.view-8 {
    position: relative;
}

.view-8 .card-image-container {
    position: relative;
}

.view-8 .card-image {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.view-8 .card-badge {
    position: absolute;
    top: -10px;
    right: 20px;
    background-color: #ffc107;
    color: #212529;
    padding: 10px;
    border-radius: 50%;
    font-weight: bold;
    transform: rotate(15deg);
}

.view-8 .card-content {
    padding: 20px;
}

.view-8 .card-title {
    font-size: 1.5em;
    margin-bottom: 10px;
}

.view-8 .card-text {
    margin-bottom: 20px;
}

.view-8 .card-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #6c757d;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
}

@media (max-width: 768px) {
    .view-8 .card-title {
        font-size: 1.2em;
    }

    .view-8 .card-text {
        font-size: 0.9em;
    }

    .view-8 .card-button {
        padding: 8px 16px;
        font-size: 0.9em;
    }
}

@media (max-width: 480px) {
    .view-8 .card-title {
        font-size: 1.1em;
    }

    .view-8 .card-text {
        font-size: 0.8em;
    }

    .view-8 .card-button {
        padding: 6px 12px;
        font-size: 0.8em;
    }

    .view-8 .card-badge {
        top: -5px;
        right: 10px;
        padding: 8px;
        font-size: 0.8em;
    }
}

@media (max-width: 320px) {
    .view-8 .card-content {
        padding: 15px;
    }
}

/* css/view-9.css */
.view-9 {
    perspective: 1000px;
}

.view-9 .card-inner {
    position: relative;
    width: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.view-9:hover .card-inner {
    transform: rotateY(180deg);
}

.view-9 .card-front, .view-9 .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 8px;
    overflow: hidden;
}

.view-9 .card-front {
    background-color: #bbb;
    color: black;
}

.view-9 .card-back {
    background-color: #007bff;
    color: white;
    transform: rotateY(180deg);
    padding: 20px;
}

.view-9 .card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.view-9 .card-content {
    padding: 20px;
}

.view-9 .card-title {
    font-size: 1.5em;
    margin-bottom: 10px;
}

.view-9 .card-text {
    margin-bottom: 20px;
}

.view-9 .card-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #fff;
    color: #007bff;
    text-decoration: none;
    border-radius: 5px;
}


@media (max-width: 768px) {
    .view-9 .card-title {
        font-size: 1.2em;
    }

    .view-9 .card-text {
        font-size: 0.9em;
    }

    .view-9 .card-button {
        padding: 8px 16px;
        font-size: 0.9em;
    }
}

@media (max-width: 480px) {
    .view-9 .card-title {
        font-size: 1.1em;
    }

    .view-9 .card-text {
        font-size: 0.8em;
    }

    .view-9 .card-button {
        padding: 6px 12px;
        font-size: 0.8em;
    }
}

@media (max-width: 320px) {
    .view-9 .card-content {
        padding: 15px;
    }
}

/* css/view-10.css */
.view-10 .card-video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

.view-10 .card-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.view-10 .card-content {
    padding: 20px;
}

.view-10 .card-title {
    font-size: 1.5em;
    margin-bottom: 10px;
}

.view-10 .card-text {
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .view-10 .card-title {
        font-size: 1.2em;
    }

    .view-10 .card-text {
        font-size: 0.9em;
    }
}

@media (max-width: 480px) {
    .view-10 .card-title {
        font-size: 1.1em;
    }

    .view-10 .card-text {
        font-size: 0.8em;
    }
}

@media (max-width: 320px) {
    .view-10 .card-content {
        padding: 15px;
    }
}

/* css/view-11.css */
.view-11 .card-map-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

.view-11 .card-map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.view-11 .card-content {
    padding: 20px;
}

.view-11 .card-title {
    font-size: 1.5em;
    margin-bottom: 10px;
}

.view-11 .card-text {
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .view-11 .card-title {
        font-size: 1.2em;
    }

    .view-11 .card-text {
        font-size: 0.9em;
    }
}

@media (max-width: 480px) {
    .view-11 .card-title {
        font-size: 1.1em;
    }

    .view-11 .card-text {
        font-size: 0.8em;
    }
}

@media (max-width: 320px) {
    .view-11 .card-content {
        padding: 15px;
    }
}

/* css/view-12.css */
.view-12 {
    display: flex;
}

.view-12 .card-image-container {
    width: 40%;
}

.view-12 .card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.view-12 .card-content {
    width: 60%;
    padding: 20px;
}

.view-12 .card-title {
    font-size: 1.5em;
    margin-bottom: 10px;
}

.view-12 .card-text {
    margin-bottom: 20px;
}

.view-12 .card-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #343a40;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
}

@media (max-width: 768px) {
    .view-12 {
        flex-direction: column;
    }

    .view-12 .card-image-container {
        width: 100%;
        height: auto; /* Adjust height for smaller screens */
        padding-bottom: 56.25%; /* 16:9 aspect ratio */
    }

    .view-12 .card-content {
        width: 100%;
    }

    .view-12 .card-title {
        font-size: 1.2em;
    }

    .view-12 .card-text {
        font-size: 0.9em;
    }

    .view-12 .card-button {
        padding: 8px 16px;
        font-size: 0.9em;
    }
}

@media (max-width: 480px) {
    .view-12 .card-title {
        font-size: 1.1em;
    }

    .view-12 .card-text {
        font-size: 0.8em;
    }

    .view-12 .card-button {
        padding: 6px 12px;
        font-size: 0.8em;
    }
}

@media (max-width: 320px) {
    .view-12 .card-content {
        padding: 15px;
    }
}

/* Main Banner Styles */
.main-banner {
    position: relative;
    width: 100%;
    height: 400px; /* Example height, can be adjusted */
    overflow: hidden;
}

.main-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.main-banner .banner-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    width: 80%; /* Adjust as needed */
}

.main-banner .banner-content h1 {
    font-size: 1.5em;
    margin-bottom: 10px;
}

.main-banner .banner-content p {
    font-size: 0.8em;
}

/* New styles for sections */
.category-navigation {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 20px; /* Add some space below the buttons */
}

.category-buttons {
    display: flex;
    flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
    justify-content: center;
    gap: 10px; /* Space between buttons */
    padding: 10px;
    max-width: 100%; /* Ensure it doesn't overflow */
}

.gallery-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px; /* Space between gallery items */
    width: 100%;
    max-width: 1200px; /* Adjust as needed */
    margin: 0 auto; /* Center the grid itself */
    padding: 20px 0;
}