/*
===============================================================================
PREMIUM HOMEPAGE UPGRADE
Luxury Safari Design
===============================================================================
*/

/* ==========================================================================
   WHOLE PAGE BACKGROUND
   ========================================================================== */

body:has(.hero--video){
    background:
        url("../images/homepage-bg.jpg")
        center center / cover fixed no-repeat;
}

/* ==========================================================================
   KEEP HERO UNCHANGED
   ========================================================================== */

.hero.hero--video{
    position:relative;
    z-index:5;
}

/* ==========================================================================
   ALL HOMEPAGE SECTIONS TRANSPARENT
   ========================================================================== */

.intro,
.tours,
.trail,
.destinations,
.blog-section,
.home-social,
.why-us,
.testimonials,
.gallery,
.newsletter,
.faq,
.partners{

    background:transparent !important;

    position:relative;

    padding:80px 0;
}

/* ==========================================================================
   GLASS CONTAINERS
   ========================================================================== */

.intro .container,
.tours .container,
.trail .container,
.destinations .container,
.blog-section .container,
.home-social .container,
.why-us .container,
.testimonials .container,
.gallery .container,
.newsletter .container,
.faq .container,
.partners .container{

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

    backdrop-filter:blur(8px);

    -webkit-backdrop-filter:blur(8px);

    border-radius:24px;

    padding:60px;

    box-shadow:
        0 20px 60px rgba(0,0,0,.15);

    border:1px solid rgba(255,255,255,.55);

    margin:40px auto;
}

/* ==========================================================================
   HEADINGS
   ========================================================================== */

h1,h2,h3,h4{

    color:#1d2c1f;

    font-weight:700;

    letter-spacing:.02em;
}

p{

    color:#444;

    line-height:1.8;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn,
.button{

    border-radius:999px;

    transition:.35s;

    font-weight:700;
}

.btn:hover,
.button:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 30px rgba(0,0,0,.18);
}

/* ==========================================================================
   TOUR CARDS
   ========================================================================== */

.tour-card{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    transition:.35s;

    box-shadow:0 10px 30px rgba(0,0,0,.10);
}

.tour-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 55px rgba(0,0,0,.20);
}

/* ==========================================================================
   IMAGES
   ========================================================================== */

img{

    border-radius:12px;
}

/* ==========================================================================
   SECTION TITLES
   ========================================================================== */

.section-title{

    margin-bottom:20px;

    position:relative;
}

.section-title:after{

    content:"";

    display:block;

    width:80px;

    height:4px;

    background:#d4af37;

    margin-top:15px;

    border-radius:10px;
}

/* ==========================================================================
   GLASS EFFECT FOR SMALL BOXES
   ========================================================================== */

.feature-box,
.stat-box,
.destination-card,
.blog-card{

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

    backdrop-filter:blur(6px);

    border-radius:18px;

    padding:30px;

    transition:.3s;
}

.feature-box:hover,
.stat-box:hover,
.destination-card:hover,
.blog-card:hover{

    transform:translateY(-6px);

    box-shadow:0 15px 35px rgba(0,0,0,.15);
}

/* ==========================================================================
   SPACING
   ========================================================================== */

section{

    margin:50px 0;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

footer{

    background:#17351f;

    color:#fff;

    position:relative;

    z-index:10;
}

footer a{

    color:#f2d16b;
}

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

@media(max-width:992px){

.intro .container,
.tours .container,
.trail .container,
.destinations .container,
.blog-section .container,
.home-social .container,
.why-us .container,
.testimonials .container,
.gallery .container,
.newsletter .container,
.faq .container,
.partners .container{

padding:40px;

border-radius:18px;

margin:20px;
}

}

@media(max-width:768px){

body:has(.hero--video){

background-attachment:scroll;
}

.intro,
.tours,
.trail,
.destinations,
.blog-section,
.home-social{

padding:40px 0;
}

.intro .container,
.tours .container,
.trail .container,
.destinations .container,
.blog-section .container,
.home-social .container{

padding:25px;
}

}

@media(max-width:480px){

.intro .container,
.tours .container,
.trail .container,
.destinations .container,
.blog-section .container,
.home-social .container{

border-radius:15px;

padding:20px;
}

h1{

font-size:2rem;
}

h2{

font-size:1.6rem;
}

}