.learnmoretext {
    position: absolute;
    color: var(--tntwhite);
    font-size: 1rem;
    font-family: Cairo-Regular, Thai-Regular, Chinese-Regular;
    left: 50%;
    transform: translateX(-50%);
    letter-spacing: 1px;
    transition: all 1s ease;
    line-height: 1.2;
    bottom: 10px;
    
}

.mobileproductstopblock {
    display: none;
}

.burgermenuiconcontainer {
    display: none;
}


#mobileonlyburgermenu {
    display: none;
}

.burgermenu {
    display: none;
}

.burgermenu.is-open {
    transform: translateX(0);
}

.learnmoretext:hover {
    transform: translate(-50%, -2px);
    font-family: Cairo-Bold, Thai-Bold, Chinese-Bold, sans-serif;
}

/* section { */
    /* border: 1px solid var(--tntblue); */
/* } */

.ataglance {
    position: relative;
    width:100%;
    height:auto;
    /* border: 1px solid #ccc; */
    z-index: 100;
    padding: 4rem;
}

.ataglancebg {
    position: absolute;
    top: 0;
    right: 0;
    width: 40%;
    z-index: -1;
}

.titletext {
    width: 100%;
    height: auto;
    font-family: Cairo-Bold, Thai-Bold, Chinese-Bold, sans-serif;
    font-size: 5rem;
    margin:0;
    color: var(--tntblack);
    line-height: 5rem;
    /* border: 1px solid var(--tntblue); */

}

.alignright {
    text-align: right;
}

.removetextdec {
    text-decoration: none;
    color: var(--tntblue);

}

.bluedot {
    color: var(--tntblue);
    font-size: 1.5em;
    margin:0;
}

#ataglanceparagraph {
    margin-left: 2rem;
    padding-left: 2rem;
    margin-top: 3rem;
    border-left: 1.5px solid var(--tntblack);
    width: 60vw;
}

.networkfigure {
    display: flex;
    flex-direction: row;
    height: auto;
    align-items: stretch;
}

.map {
    width: clamp(40rem, 100%, 50rem);
    max-width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    object-fit: contain;
    z-index: 100;
    padding-top: 3rem;
    /* border: var(--tntblack) 1px solid; */
}

.figures {
    height: 31rem;
    width: 14rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* border: var(--tntblack) 1px solid; */
}

.figureitems {
    height: 10rem;
    width: 100%;
    /* border: var(--tntblack) 1px solid; */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.figurenumber {
    width: 100%;
    height: 48%;
    color: var(--tntblue);
    font-family: Cairo-Regular, Thai-Regular, Chinese-Regular;
    font-size:7rem;
    /* border: var(--tntblack) 1px solid; */
    line-height: 3rem;
    text-align: end;
    text-shadow: 
        -1.5px -1.5px 0 var(--tntwhite),  
        1.5px -1.5px 0 var(--tntwhite),
        -1.5px  1.5px 0 var(--tntwhite),
        1.5px  1.5px 0 var(--tntwhite);
}

.figurename {
    width: 100%;
    height: 20%;
    color: var(--tntblack);
    font-family: Cairo-Regular, Thai-Regular, Chinese-Regular;
    font-size:1.5rem;
    /* border: var(--tntblack) 1px solid; */
    line-height: 2rem;
    text-align: end;
    text-wrap: nowrap;
}

.accreditation {
    position: relative;
    width:100%;
    height:560px;
    /* border: 1px solid #ccc; */
    z-index: 100;
    padding: 4rem;
    padding-left: 40rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-height: 700px;
}

.accreditationbg {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 40rem;
    z-index: -1;
}

.accreditationflex {
    height: 12rem;
    /* border: 1px solid #ccc; */
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.accreditationitem {
    width: 12rem;
    /* padding-top: 3rem; */
    height: 100%;
    /* border: 1px solid #ccc; */
    display: flex;
    align-items: center;
    justify-content: center;
}

.accreditationimg {
    max-height: 80%;
    max-width: 70%;
}

.abstract {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 60vw;
    z-index: -2;
}

.products {
    position: relative;
    width:100%;
    height:auto;
    /* border: 1px solid #ccc; */
    z-index: 100;
    padding: 4rem;
}

.carousel {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    /* border: 1px #ff0000 solid; */
    margin-bottom: 3rem;
    padding-bottom: 2rem;
}

.carouseltitle {
    font-family: Cairo-Regular, Thai-Regular, Chinese-Regular;
    font-size: 1.5rem;
    color: var(--tntgray);
    line-height: 1;
    letter-spacing: 2px;
}

.carouselcontainer {
    position: relative;
    width: 100%;
    height: 10rem;
    /* border: 1px solid #ccc; */
    display: flex;
    flex-direction: row;
    gap: 10px;
    overflow-x: auto;
    scroll-behavior: smooth;
    anchor-name: --carousel;
    margin-top: 1rem;
    scroll-snap-type: x mandatory;
    scroll-marker-group: after;
    
}

.carouselcontainer::-webkit-scrollbar {
    display: none;
}

.carouselcontainer::scroll-button(right), .carouselcontainer::scroll-button(left) {
    content: "";
    display: block;
    width: 2.2rem;
    height: 2.2rem;
    background-color: rgba(255, 255, 255, 1);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60% 60%;
    border: none;
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    opacity: 0.85;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    pointer-events: auto;
}

.carouselcontainer::scroll-button(right):hover, .carouselcontainer::scroll-button(left):hover {
    opacity:50%;
}

.carouselcontainer::scroll-marker-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.3em;
    position: absolute;
    left: 50%;
    bottom: 0.25rem;
    transform: translateX(-50%);
    z-index: 2;
}



.carouselcontainer::scroll-button(left) {
    left: 0.5rem;
    background-image: url(../assets/icons/arrowleft.png);
}

.carouselcontainer::scroll-button(right) {
    right: 0.5rem;
    background-image: url(../assets/icons/arrowright.png);
}

.carouselcontainer::scroll-button(right):disabled, .carouselcontainer::scroll-button(left):disabled {
    opacity: 0.25;
    cursor: auto;
}

.item{
    height: 100%;
    width: 12%;
    /* border: #000000 1px solid; */
    display: flex;
    flex-direction: column;
    flex: 0 0 12%;
    scroll-snap-align: start;
}

.item::scroll-marker {
    content:'';
    height: 0.3em;
    width: 3em;
    background-color: var(--tntgray);
    transition: all ease-in-out 0.3s;    
}

.item::scroll-marker:hover{
    height: .4em;
    transition: all ease-in-out 0.3s;
}

.item::scroll-marker:target-current{
    background-color: var(--tntblue);
    height: .4em;
}


.productphoto {
    width: 100%;
    height: 40%;
    /* border: var(--tntblue) 1px solid; */
    object-fit: cover;
    margin-bottom: 5px;
}

.productname {
    width: 100%;
    color: var(--tntblack);
    font-size: 1.5rem;
    text-align: left;
    /* border: 1px solid var(--tntblue); */
    font-family: Cairo-Bold, Thai-Bold, Chinese-Bold, sans-serif;
    line-height: 1;
    margin-top: 5px;
}

.productsubname {
    color: #ccc;
    font-size: 1rem;
    font-family: Cairo-Bold, Thai-Bold, Chinese-Bold, sans-serif;
}

.parallaxcontainer {
    width: 100vw;
    height: auto;
    overflow: hidden;
    /* border: 1px solid var(--tntblue); */
    align-self: center;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding-top: 2rem;
}

.parallaxtext {
    font-family: Cairo-Light, Thai-Light, Chinese-Light, sans-serif;
    letter-spacing: 1px;
    line-height: 1;
    font-size: 3rem;
    text-wrap: nowrap;
    color: var(--tntgray);
    opacity: 0.5;

}


.parallaxtext span {
    flex-shrink: 0;
    padding-right: 2rem;
}

.expanding {
    align-self: center;
    position: relative;
    font-family: Cairo-Light, Thai-Light, Chinese-Light, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}


@media (max-width: 768px) {


    .topnav {
        align-items: center;
        height: 3rem;

    }

    .brandingcontainer {
        padding-left: 1rem;
        align-items: center;
    }

    .brandingcontainer .companyname {
        display: none;
    }

    .navitemscontainer {
        display: none;
    }

    .languageselector {
        display: none;
    }

    .textlogo {
        font-size: 1.5rem;
    }


    #mobileonlyburgermenu {
        display: block;
    }

    .burgermenuiconcontainer {
        position: absolute;
        right: 0;
        height: clamp(0, 1.5rem,100%);
        aspect-ratio: 1 / 1;
        object-fit: contain;
        display: block flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;

    }

    .burgermenutitle .burgermenuiconcontainer {
        margin-right: 1rem;
    }

    .burgermenuicon {
        height: 1.5rem;
        width: 1.5rem;
    }

    .burgermenu {
        display: flex;
        position: fixed;
        height: 100%;
        width: 80vw;
        right: 0;
        top: 0;
        background: var(--tntblack);
        z-index: 2001;
        box-shadow: 0px 0px 39px -18px var(--tntblack);
        flex-direction: column;
        padding-top: 2rem;
        pointer-events: auto;
        transform: translateX(100%);
        transition: transform 0.3s ease-in-out;
    }

    .burgermenu > * {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .burgermenutitle {
        width: 100%;
        height: auto;
        /* border: 1px #ccc solid; */
        display: flex;
        flex-direction: row;
        align-items: center;
        padding-bottom: 2rem;
    }


    .burgermenubrandinglogo {
        font-family: Cairo-Bold, Thai-Bold, Chinese-Bold, sans-serif;
        line-height: 1;
        font-size: 1.5rem;
        width: fit-content;
        color: var(--tntwhite);
    }

    .burgermenubranding {
        font-family: Cairo-Regular, Thai-Regular, Chinese-Regular;
        line-height: 1;
        font-size: 1rem;
        width: fit-content;
        color: var(--tntwhite);
        margin-left: 5px;
    }

    .mask {
        width: 100%;
        height: 100%;
        background-color: #161618be;
        position: fixed;
        inset: 0;
        z-index: 1101;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease-in-out;
    }

    .mask.is-open {
        opacity: 1;
        pointer-events: auto;
    }

    .burgermenuanchorcontainer {
        height: auto;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .burgermenuanchor {
        height: 2rem;
        color: var(--tntwhite);
        font-size: 1rem;
        font-family: Cairo-Regular, Thai-Regular, Chinese-Regular;
        /* border: 1px #ccc solid; */
        text-decoration: none;
    }

    .burgermenuanchor:hover {
        background-color: #111113;
    }

    .burgermenulanguageselectorcontainer {
        width: 100%;
        height: auto;
        color: var(--tntwhite);
        /* border: #ccc solid 1px; */
        display: flex;
        flex-direction: column;
        padding-top: 3rem;
        
    }

    .burgermenulanguageselectortitle {
        color: var(--tntwhite);
        font-family: Cairo-Bold, Thai-Bold, Chinese-Bold, sans-serif;
        font-size: 1rem;
        margin: 0;
        line-height: 2;
    }

    .burgermenulanguageselectorcontainer .langoption .langtext {
        color: var(--tntwhite);
    }

    .titletext {
        font-size: 2.5rem !important;
        line-height: 3.2rem !important;
    }

    .paragraph {
        font-size: 1rem !important;
        line-height: 1.6rem !important;
    }

    #ataglanceparagraph {
        margin-left: 0 !important;
        padding-left: 0 !important;
        border-left: none !important; /* Removes structural bar that gets squeezed */
        border-top: 1.5px solid var(--tntblack);
        padding-top: 1.5rem;
        margin-top: 1.5rem;
    }

    .splashtext {
        font-size: 2.2rem !important;
    }
    
    .splashbox {
        width: 84% !important;
        margin-left: 8vw !important;
    }

    /* 6. Product Carousel Flexbox Fixes */
    .carouselcontainer {
        display: flex !important;
        overflow-x: auto !important; /* Enables smooth native finger scrolling on touch screens */
        scroll-snap-type: x mandatory;
        gap: 1rem;
        padding-bottom: 1rem;
    }

    .item {
        scroll-snap-align: start;
        min-width: 100%;
    }

    .carousel {
        flex:0 0 100%;
    }

    .item::scroll-marker {
        width: .7em;
    }

        /* 1. Reset Hardcoded Heights to Fluid Containers */
    .ataglance, .accreditation, .products {
        height: auto !important; /* Allow layout to grow as long as content needs */
        padding: 4rem 2rem !important;
    }

    /* 2. Fix Section Backdrops and Heavy Offsets */
    .accreditation {
        padding-left: 2rem !important; /* Strips out the destructive 40rem push */
        align-items: left !important;
        /* border:rgba(0, 0, 0, 0.18) 1px solid !important;  */
    }
    
    .accreditationbg {
        position: absolute !important;
        height: auto !important;
        width: 100%;
        bottom:0
        
    }

    .learnmoretext {
        display: none;
    }

    /* 3. Stack At A Glance elements cleanly */
    .networkfigure {
        flex-direction: column !important;
        align-items: center !important;
        gap: 2rem;
    }

    .map {
        width: 100% !important;
    }

    .figures {
        height: auto !important;
        width: 100% !important;
        flex-direction: row !important; /* Rows look better than towers on tablets */
        justify-content: space-around !important;
        flex-wrap: wrap;
        gap: 1.5rem;

    }

    .figureitems {
        width: auto !important;
    }
    
    .figurenumber {
        text-align: center !important;
        font-size: 4.5rem !important;
    }
    
    .figurename {
        text-align: center !important;
        text-wrap: balance !important;
    }
}