@font-face {
    font-family: 'Poppins';
    src: url('https://fonts.googleapis.com/css2?family=Poppins&display=swapfonts/OpenSans-Regular.ttf') format('truetype');
}

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

}

:root {
    --theme-1: rgb(226, 144, 43) ;
    --logo-colors :#3d535f ;
    --main-background-color: #f3f5f8;
    --font-color-1: white ;
    --wrapper-width: 85vw ;
    --font-3xl : 75px ;
    --font-2xl : 40px ;
    --font-1xl : 25px ;
    --font-1xs : 17.5px ;
}
body {
    overflow: hidden;
    font-family: 'Poppins', sans-serif;
}
.width-container {
    width: var(--wrapper-width) ;
}
.container {
    width: 100%;
    min-height: 100vh;
    background-color: var(--main-background-color);
    display: flex ;
    justify-content: center;
}
.container {
    overflow-x: hidden;
    overflow-y: hidden;
}
/* nav CSS */
nav {
    display: flex;
    width: 100%;
    height: 80px;
    line-height: 80px;
    z-index: 101;
    position: sticky;
    top: 0px ;
    overflow: hidden;
}

/* logo CSS */
.logo {
    display: flex;
    font-size: var(--font-2xl );
    font-weight: bolder;

    color: var(--logo-colors);
    letter-spacing: 3px;
    cursor: pointer;
    text-transform: uppercase;
}

b {
    font-size: 70px;
    color: var( --theme-1  );
}

/* nav item */
.navItems {
    display: flex;
    gap: 20px;

    width: 100% ;
    justify-content: center ;
}
.navItems li {
    list-style: none;
    margin: 0vw ;
}
.navItems li a {
    font-size: var(--font-1xl);
    color: var(--logo-colors) ;
    letter-spacing: 3px;

    text-decoration: none;
    text-transform: capitalize;
}

.navItems li:hover a,
.links a:hover {
    color: var(--theme-1 );
    text-decoration: underline;
}

/* Social media links */
 .social>img {
    width: 0.8em;
    height: 0.8em;
}
.links {
    display: flex ;
    gap: 20px ;
    align-items: center;
}

.links a {
    font-size: var(--font-1xl);
    color: var( --logo-colors);
    
}