/*
|--------------------------------------------------------------------------
| ERB Framework
|--------------------------------------------------------------------------
| File: assets/css/style.css
| Version: 1.0.0
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| Global Reset
|--------------------------------------------------------------------------
*/


* {

    margin:0;

    padding:0;

    box-sizing:border-box;

}



html {

    scroll-behavior:smooth;

}



body {

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    line-height:1.6;

    color:#333;

    background:#ffffff;

}



img {

    max-width:100%;

    height:auto;

}



a {

    text-decoration:none;

    color:inherit;

}



ul {

    list-style:none;

}



/*
|--------------------------------------------------------------------------
| Containers
|--------------------------------------------------------------------------
*/


.section-container,
.header-container,
.footer-container {


    width:90%;

    max-width:1200px;

    margin:auto;


}



/*
|--------------------------------------------------------------------------
| Buttons
|--------------------------------------------------------------------------
*/


.button {


    display:inline-block;

    padding:12px 25px;

    border-radius:5px;

    transition:all .3s ease;

    cursor:pointer;


}



.button.primary {


    background:#0066cc;

    color:#ffffff;


}



.button.secondary {


    background:#333;

    color:#ffffff;


}



.button:hover {


    opacity:.85;


}


/*
|--------------------------------------------------------------------------
| Header Styling
|--------------------------------------------------------------------------
*/


.site-header {

    background:#111;

    color:#ffffff;

    padding:20px 0;

}



.header-container {

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

}



/*
|--------------------------------------------------------------------------
| Logo
|--------------------------------------------------------------------------
*/


.site-logo img {

    max-height:90px;

    width:auto;

}



.site-branding h1 {

    font-size:32px;

    margin-bottom:5px;

}



.site-branding p {

    font-size:16px;

    color:#cccccc;

}



/*
|--------------------------------------------------------------------------
| Desktop Navigation
|--------------------------------------------------------------------------
*/


.main-navigation {

    flex:1;

}



.navigation-list {

    display:flex;

    justify-content:flex-end;

    gap:25px;

}



.navigation-list li a {

    color:#ffffff;

    font-weight:bold;

    transition:.3s;

}



.navigation-list li a:hover,

.navigation-list li.active a {

    color:#00aaff;

}



/*
|--------------------------------------------------------------------------
| Dropdown Menus
|--------------------------------------------------------------------------
*/


.has-dropdown {

    position:relative;

}



.has-dropdown .submenu {

    display:none;

    position:absolute;

    top:100%;

    left:0;

    background:#111;

    padding:15px;

    min-width:180px;

}



.has-dropdown.open .submenu {

    display:block;

}



/*
|--------------------------------------------------------------------------
| Mobile Menu Button
|--------------------------------------------------------------------------
*/


.mobile-menu-toggle {

    display:none;

    background:none;

    border:none;

    color:#ffffff;

    font-size:30px;

    cursor:pointer;

}



/*
|--------------------------------------------------------------------------
| Mobile Navigation
|--------------------------------------------------------------------------
*/


.mobile-navigation {

    display:none;

    background:#111;

}



.mobile-navigation.show {

    display:block;

}



.mobile-menu-list li {

    padding:15px;

    border-bottom:1px solid #333;

}



.mobile-menu-list a {

    color:#ffffff;

}


/*
|--------------------------------------------------------------------------
| Hero Section
|--------------------------------------------------------------------------
*/
.hero-section {
    min-height:500px;
    display:flex;
    align-items:center;
    background:
    linear-gradient(
        rgba(0,0,0,.55),
        rgba(0,0,0,.55)
    ),
    url('../images/hero.jpg');

    background-size:cover;
    background-position:center;
}


.hero-container {
    max-width:1200px;
    width:100%;
    margin:auto;
    padding:60px 30px;
}


.hero-content {
    max-width:650px;
}





.hero-content h1 {

    font-size:52px;

    margin-bottom:15px;

}



.hero-content h2 {

    font-size:30px;

    color:#00aaff;

    margin-bottom:20px;

}



.hero-content p {

    font-size:20px;

    margin-bottom:30px;

}



.hero-buttons {

    display:flex;

    gap:15px;

}



/*
|--------------------------------------------------------------------------
| Section Headings
|--------------------------------------------------------------------------
*/


.section-heading {

    text-align:center;

    margin-bottom:50px;

}



.section-heading h2 {

    font-size:36px;

    margin-bottom:15px;

}



.section-heading p {

    color:#666;

    font-size:18px;

}



/*
|--------------------------------------------------------------------------
| About Section
|--------------------------------------------------------------------------
*/


.about-section {

    padding:80px 0;

}



.about-content {

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:40px;

}



.about-text p {

    margin-bottom:20px;

}



/*
|--------------------------------------------------------------------------
| Highlight Cards
|--------------------------------------------------------------------------
*/


.about-highlights {

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

}



.highlight-card {

    background:#f5f5f5;

    padding:25px;

    border-radius:10px;

    text-align:center;

}



.highlight-card h3 {

    color:#0066cc;

    margin-bottom:10px;

}



/*
|--------------------------------------------------------------------------
| Services Section
|--------------------------------------------------------------------------
*/


.services-section {

    padding:80px 0;

    background:#f8f8f8;

}



.services-grid {

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

}



.service-card {

    background:#ffffff;

    padding:30px;

    border-radius:10px;

    box-shadow:0 5px 15px rgba(0,0,0,.08);

}



.service-card h3 {

    margin-bottom:15px;

    color:#0066cc;

}



/*
|--------------------------------------------------------------------------
| Activities Section
|--------------------------------------------------------------------------
*/


.activities-section {

    padding:80px 0;

}



.activities-list li {

    padding:10px 0;

    border-bottom:1px solid #ddd;

}


/*
|--------------------------------------------------------------------------
| Gallery Preview
|--------------------------------------------------------------------------
*/


.gallery-preview-section {

    padding:80px 0;

    background:#ffffff;

}



.gallery-preview-grid {

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

}



.gallery-preview-card {

    overflow:hidden;

    border-radius:10px;

    background:#f5f5f5;

}



.gallery-preview-card img {

    width:100%;

    height:250px;

    object-fit:cover;

    transition:.3s;

}



.gallery-preview-card img:hover {

    transform:scale(1.05);

}



.gallery-placeholder {

    padding:50px 20px;

    text-align:center;

}



/*
|--------------------------------------------------------------------------
| News Section
|--------------------------------------------------------------------------
*/


.news-preview-section {

    padding:80px 0;

    background:#f8f8f8;

}



.news-grid {

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;

}



.news-card {

    background:#ffffff;

    padding:30px;

    border-radius:10px;

    box-shadow:0 5px 15px rgba(0,0,0,.08);

}



.news-card h3 {

    color:#0066cc;

    margin-bottom:15px;

}



.news-card a {

    color:#0066cc;

    font-weight:bold;

}



/*
|--------------------------------------------------------------------------
| Membership Section
|--------------------------------------------------------------------------
*/


.membership-section {

    padding:90px 0;

    background:#111;

    color:#ffffff;

}



.membership-content {

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:50px;

}



.membership-text h2 {

    font-size:40px;

    margin-bottom:20px;

}



.membership-features {

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

}



.feature-item {

    background:#222;

    padding:25px;

    border-radius:10px;

}



.feature-item h3 {

    color:#00aaff;

    margin-bottom:10px;

}



/*
|--------------------------------------------------------------------------
| Contact Preview
|--------------------------------------------------------------------------
*/


.contact-preview-section {

    padding:80px 0;

}



.contact-box {

    text-align:center;

    padding:50px;

    background:#0066cc;

    color:#ffffff;

    border-radius:10px;

}



.contact-box h2 {

    margin-bottom:20px;

}


/*
|--------------------------------------------------------------------------
| Contact Page Styling
|--------------------------------------------------------------------------
*/


.contact-header {

    padding:80px 0;

    background:#111;

    color:#ffffff;

    text-align:center;

}



.contact-section {

    padding:80px 0;

}



.contact-grid {

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:50px;

}



.contact-information {

    background:#f8f8f8;

    padding:30px;

    border-radius:10px;

}



.contact-information h2 {

    margin-bottom:20px;

    color:#0066cc;

}



.contact-form {

    background:#ffffff;

}



.form-group {

    margin-bottom:20px;

}



.form-group label {

    display:block;

    margin-bottom:8px;

    font-weight:bold;

}



.form-group input,

.form-group textarea {

    width:100%;

    padding:12px;

    border:1px solid #ccc;

    border-radius:5px;

    font-size:16px;

}



.form-group textarea {

    resize:vertical;

}



.alert {

    padding:15px;

    border-radius:5px;

    margin-bottom:20px;

}



.alert.success {

    background:#d4edda;

    color:#155724;

}



.alert.error {

    background:#f8d7da;

    color:#721c24;

}



/*
|--------------------------------------------------------------------------
| Location Section
|--------------------------------------------------------------------------
*/


.location-section {

    padding:80px 0;

    background:#f8f8f8;

}



.location-grid {

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:40px;

}



.map-container iframe {

    width:100%;

    min-height:350px;

    border:0;

}



.map-placeholder {

    background:#ddd;

    padding:100px 20px;

    text-align:center;

    border-radius:10px;

}



/*
|--------------------------------------------------------------------------
| Gallery Page Styling
|--------------------------------------------------------------------------
*/


.gallery-header {

    padding:80px 0;

    background:#111;

    color:#ffffff;

    text-align:center;

}



.gallery-section {

    padding:80px 0;

}



.gallery-grid,

.album-grid {

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;

}



.gallery-card {

    overflow:hidden;

    border-radius:10px;

    background:#ffffff;

}



.gallery-card img {

    width:100%;

    height:280px;

    object-fit:cover;

}



.image-caption {

    padding:15px;

}



/*
|--------------------------------------------------------------------------
| Lightbox
|--------------------------------------------------------------------------
*/


.lightbox {

    display:none;

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:100%;

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

    z-index:9999;

    align-items:center;

    justify-content:center;

}



.lightbox.open {

    display:flex;

}



.lightbox-content img {

    max-width:90vw;

    max-height:80vh;

}



.lightbox-close,

.lightbox-prev,

.lightbox-next {

    position:absolute;

    background:none;

    border:none;

    color:#ffffff;

    font-size:40px;

    cursor:pointer;

}



.lightbox-close {

    top:30px;

    right:40px;

}



.lightbox-prev {

    left:40px;

}



.lightbox-next {

    right:40px;

}


/*
|--------------------------------------------------------------------------
| Footer Styling
|--------------------------------------------------------------------------
*/


.site-footer {

    background:#111;

    color:#ffffff;

    padding-top:60px;

}



.footer-container {

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}



.footer-column h3 {

    margin-bottom:20px;

    color:#00aaff;

}



.footer-column p {

    color:#cccccc;

}



.footer-links li {

    margin-bottom:10px;

}



.footer-links a {

    color:#ffffff;

}



.footer-links a:hover {

    color:#00aaff;

}



.footer-social a {

    display:inline-block;

    margin-right:15px;

    color:#ffffff;

}



.footer-bottom {

    margin-top:50px;

    padding:20px 0;

    background:#000;

}



.footer-bottom .footer-container {

    display:flex;

    justify-content:space-between;

    align-items:center;

}



/*
|--------------------------------------------------------------------------
| FAQ Section
|--------------------------------------------------------------------------
*/


.faq-section {

    padding:80px 0;

    background:#f8f8f8;

}



.faq-item {

    background:#ffffff;

    padding:25px;

    margin-bottom:20px;

    border-radius:10px;

}



.faq-item h3 {

    color:#0066cc;

    margin-bottom:10px;

}



/*
|--------------------------------------------------------------------------
| Responsive Design
|--------------------------------------------------------------------------
*/


@media(max-width:992px) {


    .header-container {

        flex-wrap:wrap;

    }



    .main-navigation {

        display:none;

    }



    .mobile-menu-toggle {

        display:block;

    }



    .about-content,

    .membership-content,

    .contact-grid,

    .location-grid {

        grid-template-columns:1fr;

    }



    .services-grid {

        grid-template-columns:repeat(2,1fr);

    }



    .gallery-preview-grid,

    .gallery-grid,

    .album-grid {

        grid-template-columns:repeat(2,1fr);

    }



    .footer-container {

        grid-template-columns:repeat(2,1fr);

    }


}



@media(max-width:600px) {


    .hero-content h1 {

        font-size:36px;

    }



    .hero-content h2 {

        font-size:24px;

    }



    .hero-buttons {

        flex-direction:column;

    }



    .services-grid,

    .about-highlights,

    .membership-features,

    .news-grid,

    .gallery-preview-grid,

    .gallery-grid,

    .album-grid,

    .footer-container {

        grid-template-columns:1fr;

    }



    .footer-bottom .footer-container {

        flex-direction:column;

        text-align:center;

        gap:10px;

    }



}



/*
|--------------------------------------------------------------------------
| Print Support
|--------------------------------------------------------------------------
*/


@media print {


    .site-header,

    .site-footer,

    .button,

    .mobile-menu-toggle {

        display:none;

    }



    body {

        color:#000;

        background:#fff;

    }


}