/*
===========================================
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 SLIDER
================================= */

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

.heroBackground img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: heroZoom 8s linear infinite alternate;
    opacity: .25;
}

@keyframes heroZoom {

    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.08);
    }

}