/*====================================================
    ROOT VARIABLES
====================================================*/

:root {

    --primary: #f97316;
    --primary-dark: #f97316;
    --primary-light: #f97316;
    --primary-hover: #f97316;

    --secondary: #00d4ff;
    --secondary-dark: #1A5ED0;
    --secondary-light: #EFF6FF;


    --body-bg: #F4FDFF;
    --section-bg: #FFFFFF;
    --card-bg: #FFFFFF;


    --heading: #111827;
    --text: #212529;
    --text-light: #6C757D;
    --text-muted: #909090;


    --success: #00C853;
    --warning: #FFB300;
    --danger: #FF5252;


    --border: #E8E8E8;
    --border-light: #F3F3F3;


    --dark: #0F172A;
    --dark-2: #111827;
    --dark-3: #1E293B;
    --dark-4: #334155;


    /* Glass */

    --glass-bg: rgba(255, 255, 255, .12);

    --glass-border: rgba(255, 255, 255, .35);

    --glass-shadow:
        0 8px 32px rgba(0, 0, 0, .12);



    /* Shadow */

    --shadow-sm:
        0 2px 10px rgba(0, 0, 0, .05);

    --shadow-md:
        0 8px 25px rgba(0, 0, 0, .08);

    --shadow-lg:
        0 15px 45px rgba(0, 0, 0, .12);


    /* Radius */

    --radius-sm: 8px;

    --radius-md: 12px;

    --radius-lg: 18px;

    --radius-xl: 25px;

    --radius-round: 50%;



    /* Transition */

    --transition: .35s ease;



    --font:
        "Segoe UI",
        Tahoma,
        Geneva,
        Verdana,
        sans-serif;

}


/*====================================================
    RESET
====================================================*/


* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    font-family: var(--font);

    background:

        linear-gradient(135deg,
            #f4fdff,
            #eafcff,
            #ffffff);


    color: var(--text);

    min-height: 100vh;

    overflow-x: hidden;

}



/*====================================================
    MAIN CONTAINER
====================================================*/


.container {


    max-width:

        1280px !important;


}



/*====================================================
    FILTER SECTION GLASS CARD
====================================================*/


.filter-card {


    background:

        rgba(255, 255, 255, .55);


    backdrop-filter:

        blur(18px);


    -webkit-backdrop-filter:

        blur(18px);



    border:

        1px solid rgba(255, 255, 255, .5);



    border-radius:

        var(--radius-xl);



    box-shadow:

        var(--glass-shadow);


    padding: 10px;


    animation:

        fadeSlide .6s ease;


}





@keyframes fadeSlide {


    from {

        opacity: 0;

        transform:
            translateY(30px);

    }


    to {

        opacity: 1;

        transform:
            translateY(0);

    }


}




/*====================================================
    SELECT DROPDOWNS
====================================================*/


.form-select {


    height: 52px;


    border-radius:

        var(--radius-lg);



    border:

        1px solid rgba(0, 184, 201, .25);



    background:

        rgba(255, 255, 255, .8);



    color:

        var(--text);



    font-size:

        15px;



    font-weight:

        500;



    cursor: pointer;



    transition:

        var(--transition);



    box-shadow:

        inset 0 0 0 1px rgba(255, 255, 255, .3);



}





.form-select:hover {


    border-color:

        var(--primary);



    transform:

        translateY(-2px);


}





.form-select:focus {


    border-color:

        var(--primary);



    box-shadow:


        0 0 0 4px rgba(0, 184, 201, .15);



}




.form-select:disabled {


    background:

        rgba(240, 240, 240, .7);


    cursor: not-allowed;


    opacity: .6;


}




/* Dropdown animation helper */


select option {


    padding: 10px;

}



/*====================================================
    COMMON CARD STYLE
====================================================*/


.card {


    border: none;


    border-radius:

        var(--radius-xl);


    overflow: hidden;



}



/*====================================================
    RESPONSIVE FILTER
====================================================*/


@media(max-width:768px) {


    .navbar {


        height: 70px;

    }


    .navbar-brand {


        font-size: 22px;

    }


    .form-select {


        height: 48px;

    }


}

/*====================================================
    GALLERY SECTION
====================================================*/


#gallery {

    animation:

        galleryFade .6s ease;

}



@keyframes galleryFade {


    from {

        opacity: 0;

    }


    to {

        opacity: 1;

    }


}



/*====================================================
    GALLERY CARD - GLASS UI
====================================================*/


.gallery-card {


    background:

        rgba(255, 255, 255, .55);



    backdrop-filter:

        blur(15px);



    -webkit-backdrop-filter:

        blur(15px);



    border:

        1px solid rgba(255, 255, 255, .45);



    border-radius:

        var(--radius-xl);



    overflow: hidden;



    box-shadow:

        var(--shadow-md);



    position: relative;



    transition:

        var(--transition);



    cursor: pointer;



}




.gallery-card::before {


    content: "";


    position: absolute;


    inset: 0;



    background:


        linear-gradient(135deg,

            rgba(255, 255, 255, .35),

            transparent);



    opacity: 0;



    transition:

        var(--transition);



}




.gallery-card:hover::before {


    opacity: 1;


}





.gallery-card:hover {


    transform:


        translateY(-10px);



    box-shadow:


        0 20px 45px rgba(0, 184, 201, .20);



}



/*====================================================
    IMAGE DESIGN
====================================================*/


.gallery-image {


    width: 100%;


    height: 240px;


    object-fit: cover;



    transition:

        transform .6s ease;



}





.gallery-card:hover .gallery-image {


    transform:

        scale(1.08);



}




.gallery-card img {


    position: relative;


}





/* Image overlay */


.gallery-card::after {


    content: "View Details";


    position: absolute;



    top: 100px;


    left: 50%;



    transform:


        translate(-50%, 20px);



    background:


        var(--primary-hover);



    color: white;



    padding:

        10px 22px;



    border-radius:

        30px;



    font-size:

        14px;



    opacity: 0;



    transition:

        .4s ease;



}




.gallery-card:hover::after {


    opacity: 1;



    transform:


        translate(-50%, 0);



}




/*====================================================
    CARD BODY
====================================================*/


.gallery-card .card-body {


    padding:

        22px;



}




.gallery-card h5 {


    font-size:

        19px;



    font-weight:

        700;



    color:

        var(--heading);



    margin-bottom:

        10px;



}



.gallery-card p {


    font-size:

        14px;



    color:

        var(--text-light);



    line-height:

        1.6;



    min-height:

        45px;



}




/*====================================================
    LOCATION STYLE
====================================================*/


.gallery-location {


    display:

        inline-block;



    background:


        rgba(0, 184, 201, .08);



    color:

        var(--primary-dark);



    padding:

        8px 14px;



    border-radius:

        30px;



    font-size:

        12px;



    font-weight:

        600;



    border:

        1px solid rgba(0, 184, 201, .15);



    line-height:

        1.6;



}






/*====================================================
    LOAD MORE BUTTON
====================================================*/


#loadMore {


    display: none;


    margin-top:

        25px;



    background:


        linear-gradient(135deg,

            var(--primary),

            var(--secondary));



    color: white;



    border: none;



    border-radius:

        50px;



    padding:

        14px 45px;



    font-size:

        16px;



    font-weight:

        600;



    box-shadow:


        0 10px 25px rgba(0, 184, 201, .25);



    transition:

        var(--transition);



    position: relative;



    overflow: hidden;



}




#loadMore::before {


    content: "";


    position: absolute;



    top: 0;


    left: -100%;



    width: 100%;


    height: 100%;



    background:

        linear-gradient(120deg,

            transparent,

            rgba(255, 255, 255, .5),

            transparent);



    transition:

        .5s;



}




#loadMore:hover::before {


    left: 100%;



}




#loadMore:hover {


    transform:


        translateY(-4px);



    box-shadow:


        0 15px 35px rgba(0, 184, 201, .35);



}




/*====================================================
    NO DATA FOUND
====================================================*/


.no-data {


    min-height:

        300px;



    display:

        flex;



    align-items:

        center;



    justify-content:

        center;



    font-size:

        22px;



    font-weight:

        600;



    color:

        var(--text-muted);



    background:


        rgba(255, 255, 255, .45);



    backdrop-filter:

        blur(15px);



    border-radius:

        var(--radius-xl);



    border:

        1px solid rgba(255, 255, 255, .5);



    animation:

        fadeSlide .5s ease;



}





/*====================================================
    SCROLLBAR
====================================================*/


::-webkit-scrollbar {


    width:

        10px;



}



::-webkit-scrollbar-track {


    background:

        #eafcff;



}



::-webkit-scrollbar-thumb {


    background:


        linear-gradient(var(--primary),

            var(--secondary));



    border-radius:

        20px;



}






/*====================================================
    LOADING EFFECT (OPTIONAL)
====================================================*/


.loading-card {


    height:

        250px;



    border-radius:

        var(--radius-xl);



    background:


        linear-gradient(90deg,

            #eeeeee,

            #ffffff,

            #eeeeee);



    background-size:

        200% 100%;



    animation:

        shimmer 1.5s infinite;



}




@keyframes shimmer {


    from {

        background-position:

            -200% 0;

    }


    to {

        background-position:

            200% 0;

    }


}





/*====================================================
    TABLET
====================================================*/


@media(max-width:992px) {


    .gallery-image {


        height:

            220px;


    }



    .gallery-card h5 {


        font-size:

            17px;


    }


}





/*====================================================
    MOBILE
====================================================*/


@media(max-width:576px) {


    body {


        background:

            linear-gradient(180deg,

                #f4fdff,

                #ffffff);


    }



    .gallery-image {


        height:

            200px;


    }



    .gallery-card {


        margin-bottom:

            20px;


    }



    .gallery-card .card-body {


        padding:

            18px;


    }



    .gallery-location {


        font-size:

            11px;


    }



    #loadMore {


        width:

            90%;


    }



}

/*====================================================
    GALLERY MODAL
====================================================*/


.glass-modal {


    background:

        rgba(255, 255, 255, .75);



    backdrop-filter:

        blur(20px);



    border-radius:

        var(--radius-xl);



    border:

        1px solid rgba(255, 255, 255, .5);



    box-shadow:

        var(--shadow-xl);



}



.modal-image {


    width: 100%;


    height: 350px;


    object-fit: cover;


    border-radius:

        var(--radius-lg);


}



.location-box {


    background:

        rgba(0, 184, 201, .08);



    padding:

        15px;



    border-radius:

        var(--radius-lg);


}



.location-box p {


    margin-bottom:

        8px;


    font-size:

        14px;


}



.modal-header {


    border-bottom:

        1px solid var(--border-light);


}



.modal-footer {


    border-top:

        1px solid var(--border-light);


}



@media(max-width:768px) {


    .modal-image {

        height: 220px;

        margin-bottom: 20px;

    }


}