:root{
    --primary:#2E7CC0;
    --secondary:#61C0BD;
    --text:#8f9596;
}
body{
    font-family:'DM Sans', sans-serif;
    color:var(--text);
}
/* ---------------- HEADER ---------------- */
.hero-title{
    font-size:60px;
    line-height:1;
    color:#353535;
}
/* ---------------- GALLERY ---------------- */
.gallery img{
    width:100%;
    cursor:pointer;
    transition:opacity .2s;
}
.gallery img:hover{
    opacity:.75;
}
/* ---------------- HAMBURGER ---------------- */
.hamburger{
    width:32px;
    height:24px;
    position:relative;
    background:none;
    border:0;
}
.hamburger span{
    position:absolute;
    width:100%;
    right: 10px;
    height:3px;
    background:var(--primary);
    transition:.3s;
}
.hamburger span:nth-child(1){top:0}
.hamburger span:nth-child(2){top:10px}
.hamburger span:nth-child(3){top:20px}

.hamburger.active span:nth-child(1){
    transform:rotate(45deg);
    top:10px;
    background: white;
    z-index: 10000;
}
.hamburger.active span:nth-child(2){
    opacity:0;
}
.hamburger.active span:nth-child(3){
    transform:rotate(-45deg);
    top:10px;
    background: white;
    z-index: 10000;
}
/* ---------------- OFFCANVAS ---------------- */
.offcanvas-fullscreen{
    height:100vh !important;
    background:linear-gradient(180deg,var(--primary),var(--secondary));
}
/* ---------------- MODAL ---------------- */
#imageModal img{
    max-width:100%;
    max-height:90vh;
    display:block;
}
#gradient-bg {
    background: #000000;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.64) 0%, rgba(0, 0, 0, 0.21) 50%, rgba(0, 0, 0, 0) 100%);
}
/* ---------------- COOKIE BANNER ---------------- */
.cookie-banner{
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    background:#fff;
    border-top:1px solid #e5e5e5;
    z-index:1055;
    padding:1rem 0;
    display:none;
}

.cookie-banner p{
    color:#353535;
}