* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    letter-spacing: 1px;
}

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

  @font-face {
        font-family: hel;
        src: url('../helvetica-255-webfont/Helvetica-Bold.woff') format('truetype'),

    }
  @font-face {
        font-family: helc;
        src: url('../helvetica-255-webfont/helvetica-compressed-5871d14b6903a.woff') format('truetype'),

    }
  @font-face {
        font-family: edito;
        src: url('../fonts/editor-gifted-font/EditorgifteddemoRegular-yY01Y.otf') format('truetype'),

    }
  @font-face {
        font-family: glamour;
        src: url('../fonts/rio-glamour-font/Rioglamour-XPGo.otf') format('truetype'),

    }

html {
    overflow-x: clip;

}

body,
html {
    width: 100%;
    font-size: 24px;
    overflow-x: clip;
    transition: all .4s ease;
    scroll-behavior: smooth;
    font-family: var(--font-4);
}

:root {
    --primary-color: rgb(239, 239, 239);
    --secondary-color: rgb(19, 19, 19);
    --tertiary-color: #002620;
    --accent-color: rgb(171, 128, 80);
    --font-1: hel;
    --font-2: helc;
    --font-3: edito;
    --font-4: glamour;
    --heading-size: clamp(45px, 8vw, 65px);
    --para-size: clamp(16px, 3vw, 20px);

    --padding: 100px 78px
}

@media (max-width:1200px) {
    :root {
        --padding: 90px 50px
    }
}

@media (max-width:1050px) {
    :root {
        /* --heading-size: ; */
    }
}

@media (max-width:900px) {
    :root {
        --padding: 80px 45px
    }
}

@media (max-width:760px) {
    :root {
        --padding: 60px 36px
    }
}

@media (max-width:500px) {
    :root {
        --padding: 40px 20px
    }
}



@media (max-width:380px) {
    :root {
        --heading-size: 11vw;
    }
}


@media (max-width:360px) {
    :root {
        --padding: 40px 15px
    }
}



a {
    text-decoration: none;
    color: unset;
}
li{
    list-style-type: none;
}
/* nav */

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

}

header ul{
    display: flex;
    gap: 15px;

  
}

header ul li{
    padding: 3px 9px;
    transition: all .3s ease;

      &:hover{
        background-color: var(--primary-color);
        color: var(--secondary-color);
        border-radius: 10px;
        cursor: pointer;
    }
}





/*  */

.overlay {
    /* display: none; */
    width: 100vw;
    height: 100vh;
    background-color: rgba(18, 18, 18, 0.473);
    position: fixed;
    z-index: 99;
    top: 0px;
    transition: all .15s ease;
    opacity: 1;
    display: block;
}

.overlay-close {
    opacity: 0;
    display: none;
}


/*  */

.hide {
    display: none !important;
}