#header{
    padding: 40px 24px;
    margin-top: 100px;
}

@media (min-width: 992px) {
    #header{
        padding: 64px 100px 34px 100px;
    }
}

#header .title{
    white-space: nowrap;
    color: var(--Neutral500);
}

#header .desc{
    color: var(--Neutral400);
    font-weight: 500;
    margin-bottom: 36px;
    text-align: justify;
}

/*1024px laptop */
@media (min-width: 992px) and (max-width: 1024px){
    #header .desc-wrap{
        margin-left: 60px;
    }

    #header .title{
        font-size: 64px;
        line-height: 72px;
    }
}

#carousel{
    margin-top: 130px;
}

@media (min-width: 992px) {
    #carousel{
        margin-top: 100px;
    }
}


#carousel-controller{
    padding:24px;
    padding-bottom: 0;
}

@media (min-width: 992px) {
    #carousel-controller{
        padding: 40px;
    }
}

#carousel .photo-holder{
    width: 100%;
    height: 344px;
    background-size: cover !important;
}


@media (min-width: 992px) {
    #carousel .photo-holder{
        height: 100vh;
    }
}

#carousel .photo-holder .title{
    font-size: 24px;
    line-height: 32px;
    color: white;
}

@media (min-width: 992px) {
    #carousel .photo-holder .title{
        font-size: 56px;
        line-height: 48px;
    }
}

#carousel .pattern{
    width: 100%;
    height: 140px;
    background-size: cover !important;
}

@media (min-width: 992px) {
    #carousel .pattern{
        height: 548px;
    }
}



/* owl dot control */
.owl-dots button.owl-dot{
    border: none;
    outline: none;
    background-color: var(--Primary200);
    border-radius: 100%;
    height: 8px;
    width: 8px;
    position: relative;
    margin-left: 15px;
}

.owl-dots button.owl-dot.active{
    background-color: var(--Primary500);
}

/* owl dot control end */

#about {
    padding: 48px 24px;
    position: relative;
}

@media (min-width: 992px) {
    #about {
        padding: 100px;
    }
}


#about .about-left{
    height: fit-content;
    position: sticky !important;
    top:100px
}

#about .box-2020{
    height: fit-content;
    position: relative;
}
#about .box-2021{
    height: fit-content;
    margin-top: 0;
    position: relative;
}

@media (min-width: 992px) {
    #about .box-2021{
        margin-top: 200px;
    }
}

#about .year{
    color: var(--Neutral200);
    transition: all 0.5s ease-in-out;
}

#about .year.active{
    color: var(--SecondaryO500);
}

#about .about-desc{
    font-size: 17px;
    font-weight: 500;
    color: var(--Neutral500);
    z-index: 2;
    text-align: justify;
}

#about a,#about a:hover{
    color: var(--Primary500);
}

#about .number{
    margin-right: 0;
    position: absolute;
    right: 0;
    top: 0;
    margin-top: -150px;
}

#about .number img{
    width: 100%;
    height: 150px;
}

@media (min-width: 992px) {
    #about .number{
        margin-right: -20px;
        position: relative;
        right: inherit;
        top: inherit;
        margin-top: 0;
    }

    #about .number img{
        width: inherit;
        height: inherit;
    }
}


#carousel-custom-about .owl-dot.active p{
    color: var(--SecondaryO500) !important;
}

/* graphic section */
#graphic{
    padding:0 24px;
}

#graphic .graphic-wrapper{
    padding: 48px 0;
}

@media (min-width: 992px) {
    #graphic{
        padding:0 100px;
    }
    
    #graphic .graphic-wrapper{
        padding: 100px 0;
    }
}

#graphic .title{
    font-size: 28px;
    line-height: 36px;
}

@media (min-width: 992px) {
    #graphic .title{
        font-size: 48px;
        line-height: 56px;
    }
}

#graphic .graphic-wrap{
    padding: 24px 16px;
    background-color: #F7F7F7;
    margin-top: 24px;
}

@media (min-width: 992px) {
    #graphic .graphic-wrap{
        padding: 48px 24px;
        background-color: #F7F7F7;
        margin-top: 36px;
    }
}

#graphic .graphic-bar{
    height: 36px;
    background-color: var(--Primary400);
    transition: all 1s ease-in-out;
}

@media (min-width: 992px) {
    #graphic .graphic-bar{
        height: 64px;
    }
}

/* cta section */
#cta{
    background-color: var(--Neutral100);
}

#cta .left-side{
    padding: 48px 24px;
}

@media (min-width: 992px) {
    #cta .left-side{
        padding: 80px 100px;
    }
    
}

#cta .right-side{
    padding: 0 24px 48px 24px;
}

@media (min-width: 992px) {
    #cta .right-side{
        padding: 0;
    }
    
}

#cta .title{
    font-size: 28px;
    line-height: 36px;
    width: 80%;
}

@media (min-width: 992px) {
    #cta .title{
        font-size: 48px;
        line-height: 56px;
    }
}

#cta .desc{
    color: var(--Neutral400);
}

#cta .cta-image{
    width: 100%;
    height: 200px;
}

@media (min-width: 992px) {
    #cta .cta-image{
        height: 516px;
    }
}

#cta .cta-image img{
    width: 100%;
    height: 100%;
    object-fit: cover !important;
}