html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* HERO SECTION */
.hero-sec {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
    text-align: center;
    background-color: var(--primary);
  }

.hero-bg {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    opacity: 0;
    transition: opacity 1s ease-in-out;
  }
  
  .hero-bg.active {
    opacity: 1;
  }
  

.hero-texts {
    position: relative;
    z-index: 1;
    margin-top: 80px;
    padding: 0 1rem 1rem;
    h1 {
        font-weight: bolder;
        color: var(--secondary);
        margin-bottom: 4rem;
    }
    p {
        font-weight: lighter;
        margin-bottom: 2rem;
    }
}

.discover {
    background-color: var(--secondary);
    border-radius: 100px;
    border: none;
    padding: 0.5rem 4rem;
    pointer-events: all;
    color: var(--primary);
    font-size: 25px;
    font-weight: bolder;
    transition: background-color 0.1s ease-in-out;
    text-decoration: none;
}

.discover:hover {background-color: white;}

.underline, .underline2, .underline3, .underline4 {
    position: relative;
}
.underline::after,
.underline2::after, 
.underline3::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    width: auto;
    background: url('../assets/images/underline.png') no-repeat center;
    background-size: contain;
    pointer-events: none;
}
.underline::after {bottom: -25px; height: 30px;}
.underline2::after {bottom: -18px; height: 18px;}
.underline3::after {bottom: -40px; height: 50px;}
.underline4::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -8px; 
    height: 18px;
    width: auto;
    background: url('../assets/images/underline2.png') no-repeat center;
    background-size: contain;
    pointer-events: none;
}

/* ABOUT SECTION */
.about-wrapper {
    margin: 6rem 1rem;
}

.about-layon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.about-text {
    text-align: center;
    h2 {
        font-weight: lighter;
        color: var(--secondary);
        margin: 0;
    }
    h1 {
        font-weight: bolder;
        color: var(--secondary);
        margin: 0 0 6rem;
    }
    p { 
        font-weight: lighter; 
        margin: 5rem 0;
    }
}

.ethic-edge {
    display: inherit;
    flex-direction: row;
    border: 4px solid var(--primary);
    border-radius: 30px;
    padding: 2rem;
    max-width: 1110px;
    gap: 2rem;

    img {
        height: 250px;
        width: 500px;
        object-fit: cover;
        border-radius: 20px;
    }
}
.ethic-text {
    display: inherit;
    justify-content: center;
    flex-direction: column;
    text-align: left;
    h2 {
        font-weight: bolder;
        color: var(--secondary);
    }
    p {
        font-weight: lighter;
    }
}

.our-values {
    display: inherit;
    flex-direction: column;
    border: 4px solid var(--primary);
    border-radius: 30px;
    padding: 2rem;
    max-width: 1110px;
    gap: 2rem;
    text-align: center;

    h2 {
        font-weight: bolder;
        color: var(--secondary);
        margin-bottom: 2rem;
    }
}
.value-wrapper {
    display: inherit;
    flex-direction: row;
    justify-content: space-between;
    gap: 2rem;
}
.value {
    display: inherit;
    flex-direction: column;
    align-items: center;
    max-width: 360px;
    img {
        width: 67px;
        height: auto;
        padding: 1rem;
        border-radius: 10px;
        background-color: var(--primary);
    }
    strong { font-weight: bold; }
    p { font-weight: lighter; }
    br { display: block !important;}
}

.strat-source {
    display: inherit;
    flex-direction: row;
    justify-content: space-between;
    max-width: 1180px;
    gap: 2rem;
    text-align: center;
}

.strategy, .source {
    display: inherit;
    flex-direction: column;
    width: auto;
    padding: 2rem;
    border: 4px solid var(--primary);
    border-radius: 30px;

    h2 {
        color: var(--secondary);
    }
    p {
        font-weight: lighter;
        span {
            font-weight: bold;
        }
    }
}

/* Layon in business */
.find-layon {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--primary);
    text-align: center;
    padding: 3rem 1rem;
    
    h2 {
        font-weight: lighter;
        color: var(--secondary);
    }
    h1 {
        font-weight: bolder;
        color: var(--secondary);
        margin-bottom: 2rem;
    }
    p {font-weight: lighter;}
}