/*
===========================================
COMBINO TOURS
Global Stylesheet
Author: SuperAnnex Technologies
Version: 1.0
===========================================
*/

/* ===========================================
   CSS VARIABLES
=========================================== */

:root {
    --primary: #1E5A46;
    --gold: #C39A3D;
    --light: #F8FAF8;
    --dark: #1A1A1A;
    --text: #5F6368;
    --white: #FFFFFF;

    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-lg: 30px;
    --radius-full: 9999px;

    --transition: 300ms ease;
}

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

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Manrope", sans-serif;
    background: #fff;
    color: var(--text);
    overflow-x: hidden;
    line-height: 1.7;
}

/* ===========================================
   TYPOGRAPHY
=========================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "DM Serif Display", serif;
    color: var(--dark);
    font-weight: 400;
    line-height: 1.2;
}

a {
    text-decoration: none;
    transition: var(--transition);
}

img {
    display: block;
    max-width: 100%;
}

/* ===========================================
   SELECTION
=========================================== */

::selection {
    background: var(--primary);
    color: white;
}

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

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f4f4f4;
}

::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 100px;
}

::-webkit-scrollbar-thumb:hover {
    background: #164333;
}

/* ===========================================
   BUTTON UTILITIES
=========================================== */

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 14px 28px;

    border-radius: var(--radius-full);

    background: var(--primary);

    color: white;

    font-weight: 600;

    transition: var(--transition);
}

.btn-primary:hover {

    transform: translateY(-3px);

    box-shadow: 0 15px 30px rgba(30,90,70,.15);

}

.btn-secondary {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 28px;

    border-radius:var(--radius-full);

    border:2px solid var(--primary);

    color:var(--primary);

    background:white;

    font-weight:600;

    transition:var(--transition);

}

.btn-secondary:hover{

    background:var(--primary);

    color:white;

}

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

.section-padding{

    padding:100px 0;

}

/* ===========================================
   IMAGE EFFECT
=========================================== */

.image-hover{

    overflow:hidden;

    border-radius:30px;

}

.image-hover img{

    transition:600ms ease;

}

.image-hover:hover img{

    transform:scale(1.08);

}

/* ===========================================
   GLASS EFFECT
=========================================== */

.glass{

    backdrop-filter:blur(18px);

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

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

}

/* ===========================================
   ANIMATIONS
=========================================== */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.fade-up{

    animation:fadeUp .8s ease both;

}

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

@media (max-width:768px){

    .section-padding{

        padding:70px 0;

    }

}


/*==========================================
HERO BACKGROUND
==========================================*/

.heroBackground{
    width:100%;
    height:100%;
}

.heroBackground .swiper-slide{
    overflow:hidden;
}

.heroBackground .swiper-slide img{

    width:100%;
    height:100%;
    object-fit:cover;

    transform:scale(1);

    animation:heroZoom 12s ease-in-out infinite alternate;

    transition:transform 8s ease;

}

@keyframes heroZoom{

    from{
        transform:scale(1);
    }

    to{
        transform:scale(1.12);
    }

}


/*==========================================
Luxury Glass Cards
==========================================*/

.hero-glass{

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

    backdrop-filter:blur(18px);

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

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

    box-shadow:

    0 10px 35px rgba(0,0,0,.18),

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

}


/*==========================================
Buttons
==========================================*/

.hero-btn{

    transition:.35s ease;

}

.hero-btn:hover{

    transform:translateY(-4px);

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

}


/*==========================================
Stats Cards
==========================================*/

.hero-stat{

    transition:.35s ease;

}

.hero-stat:hover{

    transform:translateY(-8px);

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

}


/*==========================================
Typography
==========================================*/

.hero-title{

    text-shadow:

    0 8px 35px rgba(0,0,0,.35);

}

.hero-text{

    text-shadow:

    0 2px 15px rgba(0,0,0,.25);

}


/*==========================================
Mobile
==========================================*/

@media(max-width:768px){

.heroBackground .swiper-slide img{

    animation:none;

}

.hero-title{

    font-size:3rem;

    line-height:1.15;

}

.hero-text{

    font-size:1rem;

    line-height:1.9;

}

}

.heroBackground,
.heroBackground .swiper-wrapper,
.heroBackground .swiper-slide{
    width:100%;
    height:100%;
}

.heroBackground .swiper-slide img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
}