*, ::after, ::before {
    box-sizing: border-box;
}

@font-face {
    font-family: "heading font";
    src: url(../fonts/LithosPro-Black.woff2);
}

@font-face {
    font-family: "content title";
    src: url(../fonts/Calibri-BoldItalic.woff2);
}

@font-face {
    font-family: "content font";
    src: url(../fonts/Calibri-Light.woff2);
}

@font-face {
    font-family: "content font2";
    src: url(../fonts/Calibri-LightItalic.woff2);
}

/* General Setting  */
html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 130px repeat(7, minmax(10rem, 1fr)) 100px;
    grid-template-rows: repeat(4, minmax(600px, auto));
}

header {
    grid-column: 9/10;
}

main {
    height: auto;
    grid-column: 2/9;
    grid-row: 1/-1;
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(313px, 1fr));
    grid-template-rows: 1000px repeat(3, minmax(800px, auto));
    /* row-gap: 20px; */
}

footer {
    grid-column: 1/2;
    grid-row: 1/2;
    position: relative;
    padding: 15px;
    font-family: "content font2";
    font-size: 1.3rem;
}

section {
    width: 100%;
    height: 800px;
    background-image: url(../img/bg.jpg);
    position: absolute;
    overflow: hidden;
}

h2 {
    font-family: "heading font";
    font-size: 2.2rem;
}

.product-name {
    font-family: "content title";
    font-size: 1.3rem;
    margin: 0;
}

.product-price {
    font-family: "content font2";
    font-size: 1rem;
    margin: 0;
}


/* Background Parallax Elements Setting  */
.bg-layers {
    width: 100%;
    height: 800px;
    /* top: 0px; */
    position: absolute;
}

.parallax {
    width: 100%;
    position: relative;
    background-repeat: no-repeat;
    background-position: top center ;
    background-size: cover;
    bottom: 0;
}

.bg-layer1 {
    z-index: 2;
}

.bg-layer2 {
    z-index: 3;
}

.bg-layer3 {
    z-index: 4;
}

/* Hamburger Menu  */
#menu {
    list-style: none;
    padding: 0;
    top: 80px;
    right: 0px;
    width: 330px;
    height: 400px;
    text-align: center;
    position: fixed;
    display: none;
    z-index: 12;
    background-color: #fff;
    box-shadow:  10px 5px lightgray;
    transition: all 0.2s ease-out;
}

li {
    font-family: "heading font";
    font-size: 1.5rem;
    margin: 1.2rem;
    
}

a:link {
    color: #000;
    text-decoration: none;
}

a:visited {
    color: lightpink;
}


#toggle{
    display:none; 
}

#hamburger-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hamburger-icon{
    position: fixed;
    padding: 15px;
    font-size: 3.2rem;
}

.hamburger-icon span{
    cursor: pointer;
}

#toggle:checked + #menu {
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    transition: all 0.2s ease-in;
}

#btt-btn {
    width: 24px;
    margin-top: 350px;
    right: 75;
    bottom: 10;
    position: fixed;
}


/* Section 1 Setting */
#section1 {
    height: 1000px;
    grid-column: 1/-1;
    grid-row: 1/2;
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(314px, 1fr));
    
}

.hero-img {
    width: 100%;
    height: 1000px;
    z-index: 11;
}

#hero-1 {
    grid-column: 1/2;
    background-image: url(../img/section1/hero-1.png);
    background-size: cover;
    background-repeat: no-repeat;
}

#hero-2 {
    grid-column: 2/3;
    background-image: url(../img/section1/hero-2.png);
    background-size: cover;
    background-repeat: no-repeat;
}

#hero-3 {
    grid-column: 3/4;
    background-image: url(../img/section1/hero-3.png);
    background-size: cover;
    background-repeat: no-repeat;
}

/* Share Setting for Section 2 & 3 */
.main-container {
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns: repeat(3, minmax(314px, 1fr));
    grid-auto-rows: min-content minmax(486px, 1fr);
}

.section-title {
    padding: 15px;
    grid-column: 1/-1;
    text-align: center;
}

.section-container {
    grid-column: 1/-1;
    grid-row: 2/3;
    display: grid;
    grid-template-columns: repeat(3, minmax(314px, 1fr));
    place-items: center;
    
}

.products {
    width: 330px;
    height: 400px;
    background: #ebebeb;
    place-self: center;
}


.product-description {
    padding: 15px;
}

/* Section 2 */
#section2 {
    grid-row: 2/3;
    grid-column: 1/-1;
}

#product-1 {
    background-image: url(../img/section2/SKATEBOARD-1.png);
    background-size: 83%;
    background-position: center;
    background-repeat: no-repeat;
}

#product-2 {
    background-image: url(../img/section2/SKATEBOARD-2.png);
    background-size: 83%;
    background-position: center;
    background-repeat: no-repeat;
}
#product-3 {
    background-image: url(../img/section2/wheels.png);
    background-size: 83%;
    background-position: center;
    background-repeat: no-repeat;
}


/* Section 3 */
#section3 {
    grid-row: 3/4;
    grid-column: 1/-1;
}

#clothing {
    position: relative;
}

#model {
    position: absolute;
    grid-column: 1 / 2;
    place-self: center;
}

#product-4, #black {
    grid-column: 2 / 3;
}

#product-4, #product-5 {
    align-self: start;
}

#product-4 {
    background-image: url(../img/section3/black.png);
    background-repeat: no-repeat;
    background-clip: content-box;

}
#product-5 {
    background-image: url(../img/section3/grey.png);
    background-repeat: no-repeat;
    
}


/* Section 4 */
#section4 {
    grid-row: 4/5;
    grid-column: 1/-1;
}

#s4-main-container {
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns: repeat(3, minmax(314px, 1fr));
    grid-auto-rows: min-content minmax(243px, 1fr) minmax(243px, 1fr);
    gap: 15px;
    
}

#about-image {
    grid-column: 1 / 2;
    grid-row: 2 / span 2;
    height: auto;
    background-image: url(../img/section4/about.jpg);
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat;
    /* background-attachment: sticky; */
    
}

#abou-us {
    grid-column: 2/4;
    line-height: 2.5rem;
    font-family: "content font";
    font-size: 1.3  rem;
    padding: 15px 30px;
    margin: 0px 15px;
    background: #ebebeb;;
}

#about-us-content {
    margin: 0;
}

#about-us-content span {
    font-family: "heading font";
    font-size: 2.2rem;
    margin-right: 5px;
}

#about-logo {
    width: 200px;
    grid-column: 2/4;
    place-self: center;
}

/* Footer */
#logo {
    position: fixed;
    width: 70px;
    top: 15px;
}

#copyright {
    position: fixed;
    width: 350px;
    height: 100px;
    top: 271px;
    left: -97px;
    transform: rotate(-90deg);
}

#socialMedia {
    position: fixed;
    width: 43px;
    bottom: 0;
}

.socialIcons {
    margin: 10px;
}