@import url('global.css');


 ::-webkit-scrollbar {
    width: 5px;
    background: #fff;
  }
  ::-webkit-scrollbar-track {
    box-shadow: none;
  }
  ::-webkit-scrollbar-thumb {
    background: #21342F;
    border-radius: 0;
  }



.hero-ball {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0%;
    transform: translate(0, -60%);
}



.hero {
    height: 100svh;
    display: flex;
    align-items: end;
    justify-content: space-between;
    padding: 0 var(--sm) var(--sm) var(--sm);
}

.right-img {
    width: 100%;
    display: flex;
    align-items: end;
    justify-content: end;
}

.right-img img {
    width: 65%;
}

.list {
    padding-top: var(--sm);
}

.list li {
    border-bottom: 1px solid hsla(0, 0%, 100%, 0.5);
    transition: background-color 0.2s ease-in-out;
    position: relative;
}

.logo-home{
    max-width: 800px;
}

.list li:first-child {
    border-top: 1px solid hsla(0, 0%, 100%, 0.5);
}

.list li::after {
    content: "";
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.10) 4%, rgba(0, 0, 0, 0.30) 22%, rgba(0, 0, 0, 0) 70%);
    display: hidden;
    opacity: 0;
    transition: opacity .2s ease-in-out;
    pointer-events: none;
}

.list li:hover::after {
    content: "";
    display: block;
    opacity: 1;
}

.list li a {
    padding-block: var(--xs);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.list li a::after {
    content: url("/images/Icon feather-arrow-up-right.svg");
}

.list h2 {
    font-size: 4.6rem;
    font-weight: 200;
    font-style: italic;
    vertical-align: center;
    transition: transform .3s ease-in-out;
}

.list li:hover h2 {
    transform: translate(var(--sm), 0);
}


/*footer*/

footer {
    padding-bottom: var(--lg);
    padding-top: 60vh;
    position: relative;
    overflow: hidden;
}

footer .logos img{
    max-width: 150px;
}


    footer .logos {
        display:inline-flex;
        align-items: center;
        gap: var(--xs)
    }


.main-footer, .main-footer ul{
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: var(--sm);
}

footer>* {
    z-index: 2;
    position: relative;
}

footer .logo-footer{
    max-width:400px;
}

.rotate-circle {
    width: 100%;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, 60%);
    left: 50svw;
    bottom: 0;
    z-index: 1;
}

.rotate-circle>div {
    width: 80%;
    background: rgb(182, 169, 88);
    background: linear-gradient(152deg, rgba(182, 169, 88, 1) 10%, rgba(126, 129, 78, 1) 40%, rgba(44, 70, 63, 1) 100%);
    border-radius: 50%;
    aspect-ratio: 1/1;
    animation: rotate 8s infinite ease-in-out;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}

/*inner-page*/

.inner-banner {
    background-color: hsl(var(--green));
    padding-top: calc(var(--xs));
}

.inner-banner {
    background-color: hsl(var(--green));
    padding-top: var(--xs);
}

.inner-banner2 {
    padding-top: calc(var(--xs));
    position: relative;
}

.background-image{
    top: 0;
    z-index: -1;
    position: absolute;
    object-fit: cover;
    height: 100%;
    width: 100%;
    z-index: 1;
    overflow: hidden;
}

    .background-image::after {
        content: '';
        top: 0;
        left: 0;
        z-index: 0; 
        position: absolute;
        height: 100%;
        width: 100%;
        background: rgba(0, 0, 0, 0.3); 
    }

.background-image video {
    min-width: 100%;
}

.inner-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--btn-height);
    padding-inline: var(--lg);
    position: relative;
    z-index: 2;
}

.inner-logo img {
    max-width:200px;
}

.inner-banner2 .inner-title {
    height: 50vh;
    display: flex;
    align-items: center;
    justify-content: start;
    position: relative;
    z-index: 2;
}

.inner-banner .inner-title {
    padding-block: var(--lg) var(--sm);
    display: flex;
    align-items: center;
    justify-content: start;
    position: relative;
    z-index: 2;
}


.index {
    border-bottom: 1px solid hsl(var(--black));
    position: sticky;
    height: calc(var(--btn-height) + 32px);
    top: calc(var(--btn-height) + var(--xs)*2);;
    overflow: hidden;
    width: 100%;
    z-index: 3;
}

.menu-background{
    height: calc(var(--btn-height) + var(--xs)*2);
    position: sticky;
    top: 0;
    z-index: 3;
}
.nav-inside {
    display: block;
    overflow-x: scroll;
    height: 10rem;
    background-color: hsl(var(--white));
}

.mobile-scroll {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    gap: var(--xs);
}

.mobile-scroll div {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--xs);
    justify-content: flex-start;
    padding-block: 15px ;
}

.line-section {
    border-bottom: 1px Dashed;
    padding-bottom: var(--xs);
    margin-bottom: var(--xs);
}

article {
    padding-top: var(--xl);
    width: 100%;
}

article>div>div{
    max-width: 1200px;
    margin: auto
}

.article-section{
    margin-bottom: var(--xl)
}
.article-section .col{
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: var(--xs);
}
.article-section .row{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--xs);
}
    .article-section .img-control {
        height: max-content;
        width: 100%;
    }
.article-section img{
    object-fit: cover;
    object-position: center;
    min-width: 100%;
    height: 100%;
}

/*responsive*/

@media(max-width:1399px) {
    .hero {
        height: 100svh;
        display: flex;
        align-items: start;
        justify-content: end;
        flex-direction: column;
    }

    .title {
        width: 80%;
    }

    .text-row {
        width: 100%;
    }

    .right-img img {
        width: 100%;
    }
}


@media(max-width:1199px) {

    .main-footer, .main-footer ul {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: start;
        gap: var(--sm);
    }

    .main-footer {
        gap: var(--xl)
    }

    footer .logos {
        display: inline-flex;
        align-items: center;
        flex-direction:column;
        gap: var(--lg)
    }

        footer .logos img {
            max-width: 170px;
        }
}

@media(max-width:991px) {
    .logo-home{
        max-width: 100%;
    }
}

@media(max-width:767px) {
    /* .hero-ball {
            overflow: hidden;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 0%;
            transform: translate(0, -60%) scale(2);
        } */

        .list h2 {
            font-size: 3rem;
        }
    
        .title {
            width: 100%;
        }
    
        footer img {
            width: 60%;
        }
    
        .rotate-circle {
            transform: translate(-50%, 50%) scale(2);
            left: 50svw;
            bottom: 10vh;
            z-index: 1;
        }

        .hero-ball{
            transform: translate(0, -60%) scale(2);
        }

        
       
        
        .inner-banner {
            background-color: hsl(var(--green));
            padding-top: calc(var(--xs));
        }

       

        .inner-logo{
            justify-content: end;
            padding-inline: var(--sm);
            width: 100%;
        }

        .inner-logo a{
            width: 50%;
        }

        .article-section .row{
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            gap: var(--xs);
        }


}

@media(max-width:575px) {}