:root{

--blue:#0c4da2;

--red: #f72222;

--text:#1d2734;

--radius:24px;

--container:1700px;

--search-width: min(calc(100% - 80px),800px);

--penguin-w: 50px;
}

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Heebo',sans-serif;
    color:var(--text);
    background:#fff;

}

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

a{
    text-decoration:none;
    color:inherit;
}

.container{

    width:min(calc(100% - 80px),var(--container));
    margin:auto;

}


/*==========================
HEADER
===========================*/

.site-header{position: fixed;inset:0 0 auto 0;z-index:100;padding:26px 0;transition: 0.2s all;color: white;}

body.scrolled .site-header{background:white;color:black}

.site-header .container{

    display:flex;
    align-items:center;
    justify-content:space-between;

}

.logo img{

/* height:58px; */

max-width: 14vw;

width: 200px;
}

.main-nav{

    display:flex;
    gap:42px;

}

.main-nav a{color: inherit;font-size: clamp(12px,1vw,16px);font-weight:500;transition:.25s;}

.main-nav a:hover{

    opacity:.75;

}

.header-right{

    display:flex;

    align-items:center;

    gap:24px;

}

.header-tools{

display:flex;

gap:18px;

width: 200px;

max-width: 14vw;

justify-content: end;
}

.header-tools a{display:flex;align-items:center;gap:10px;color: inherit;font-size: 22px;white-space:nowrap;direction: ltr;}

.header-tools .phone-number{

font-size: 20px;

font-weight:500;
}

.site-header.nav-open{

    z-index:300;

}

.nav-toggle{

    display:none;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:5px;

    width:30px;

    height:30px;

    padding:0;

    border:0;

    background:none;

    cursor:pointer;

    z-index:20;

}

.nav-toggle span{

    display:block;

    width:100%;

    height:2px;

    background:#fff;

    border-radius:2px;

    transition:.25s;

}

.site-header.nav-open .nav-toggle span:nth-child(1){

transform:translateY(7px) rotate(45deg);

background: white;
}

.site-header.nav-open .nav-toggle span:nth-child(2){

    opacity:0;

}

.site-header.nav-open .nav-toggle span:nth-child(3){

transform:translateY(-7px) rotate(-45deg);

background: white;
}


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

.hero{

position:relative;

height: 58vh;

margin-bottom:-58px;

background:url(images/hero.jpg) center center;

background-size:cover;
}

body::before{

content:"";

position: fixed;

inset:0;

background:linear-gradient(
            rgba(15,32,60,.45),
            rgba(15,32,60,.25)
    );

background-image: url(bg-hero.jpg);

background-image: image-set(
        url(bg-hero.webp) type("image/webp"),
        url(bg-hero.jpg) type("image/jpeg")
    );

background-size: cover;

/* background-position: top 30% center; */

transform: scaleX(-1);
}

.hero-content{

position:relative;

z-index:5;

height:100%;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

color: #001e2b;
}

.hero h1{

font-size:74px;

font-weight:800;

/* margin-bottom:18px; */

line-height:1.1;

padding: 0.5em 2em;

color: #fefefe;

background: radial-gradient(rgb(18 99 129 / 50%), transparent 66%);
}

.hero p{

    font-size:24px;

    font-weight:300;

}


/*==========================
SEARCH
===========================*/

.search-bar{position:sticky;top: 20px;z-index:200;/* margin-bottom: -40px; */}

.penguin-walker{

position:absolute;

top: -39px;

left:50%;

transform:translateX(-50%);

width:var(--search-width);

height:50px;

pointer-events:none;

z-index:210;
}

.penguin-body{

    position:absolute;

    top:0;

    width:var(--penguin-w);

    left:0;

    animation:

        penguin-walk 20s ease-in-out infinite,

        penguin-bob .5s ease-in-out infinite;

}

@keyframes penguin-walk{

    0%{ left:0; }

    48%{ left:calc(100% - var(--penguin-w)); }

    50%{ left:calc(100% - var(--penguin-w)); }

    98%{ left:0; }

    100%{ left:0; }

}

@keyframes penguin-bob{

    0%{ transform:translateY(0) rotate(-2deg); }

    50%{ transform:translateY(-3px) rotate(2deg); }

    100%{ transform:translateY(0) rotate(-2deg); }

}

.penguin-flip{

    display:block;

    width:100%;

    animation:penguin-flip 20s ease-in-out infinite;

}

@keyframes penguin-flip{

    0%{ transform:scaleX(1); }

    49%{ transform:scaleX(1); }

    50%{ transform:scaleX(-1); }

    99%{ transform:scaleX(-1); }

    100%{ transform:scaleX(1); }

}

.penguin-body svg{

    width:100%;

    display:block;

}

.penguin-body .leg{

    transform-box: fill-box;

    transform-origin: top center;

    animation: leg-swing .5s ease-in-out infinite;

}

.penguin-body .leg-front{

    animation-delay: -.25s;

}

@keyframes leg-swing{

    0%{ transform:rotate(-38deg); }

    50%{ transform:rotate(38deg); }

    100%{ transform:rotate(-38deg); }

}

.searchEngineWrap{

width: var(--search-width);

margin:auto;

background:#fff;

border-radius:999px;

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

overflow:hidden;
}

.mobButtons {
    display: none;
}


.pepoleInputs {
    display: none;
}

.inputsWrapper{

    display:flex;

    align-items:center;

}

.inputWrap{

position:relative;

flex:1;

padding: 8px 30px;

min-height: 68px;

border-left:1px solid #ececec;
}

.inputWrap:last-child{

    border-left:none;

}

.inputWrap label, .inputWrap .label{

    display:block;

    font-size:13px;

    color:#7b8592;

    margin-bottom:6px;

    font-weight:500;

}

.inputWrap input{

    border:0;

    outline:none;

    width:100%;

    font-size:18px;

    font-family:inherit;

}

.inputWrap svg{

    display:none;

}

.submity{

width: 58px;

min-width: 58px;

height: 58px;

border-radius:50%;

border:0;

background:var(--red);

background: #04405a;

color:#fff;

font-size:0;

cursor:pointer;

margin: 0 6px;

transition:.25s;

position:relative;
}

.submity:hover{

    transform:scale(1.06);

}

.submity::before{

    content:"\f002";

    font-family:"Font Awesome 6 Free";

    font-weight:900;

    font-size:24px;

}

.vacationPeople{

    max-width:220px;

}

.vacationFrom{

    max-width:240px;

}

.vacationLocation{

    flex:2;

}


/*==========================
TEMP
===========================*/

main{

height:2000px;

background: linear-gradient(180deg, transparent, rgb(255 255 255 / 100%) 250px);

position: relative;
}


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

@media (max-width:880px){

    .container{

        width:calc(100% - 40px);

    }

    .site-header .container{

        position:relative;

    }

    .logo{

        position:absolute;

        top:50%;

        left:50%;

        transform:translate(-50%,-50%);

    }

    .logo img{

        max-width:40vw;

        width:150px;

    }

    .header-tools{

        display:none;

    }

    .nav-toggle{

        display:flex;

    }

    .nav-toggle span{

        background:var(--text);

    }

    .main-nav{

        position:fixed;

        inset:0;

        z-index:10;

        flex-direction:column;

        justify-content:center;

        align-items:center;

        gap:30px;

        background:rgba(9,17,20,.97);

        transform:translateY(-8px);

        opacity:0;

        visibility:hidden;

        pointer-events:none;

        transition:.25s;

    }

    .site-header.nav-open .main-nav{

        transform:translateY(0);

        opacity:1;

        visibility:visible;

        pointer-events:auto;

    }

    .main-nav a{

        font-size:20px;

    }

    .hero h1{

        font-size:clamp(28px,8vw,42px);

        padding:0.6em 1em;

    }

    .hero p{

        font-size:16px;

    }

    .hero{

        height:52vh;

    }

    .searchEngineWrap{

        border-radius:24px;

        width:calc(100% - 40px);

    }

    .inputsWrapper{

        flex-wrap:wrap;

    }

    .inputWrap{

        flex:1 1 50%;

        border-left:none;

        border-bottom:1px solid #ececec;

    }

    .vacationLocation{

        flex:1 1 100%;

    }

    .submity{

        margin:12px auto;

    }

}


/*==========================
MOBILE - PENGUIN
===========================*/

@media (max-width:800px){

    .penguin-body{

        animation:

            penguin-walk 10s ease-in-out infinite,

            penguin-bob .5s ease-in-out infinite;

    }

    .penguin-flip{

        animation:penguin-flip 10s ease-in-out infinite;

    }

}