@font-face {
    font-family: InterRegular;
    font-style: normal;
    font-weight: normal;
    src: url('/fonts/InterRegular.otf');
}
@font-face {
    font-family: Dubai-regular;
    font-style: normal;
    font-weight: normal;
    src: url('/fonts/Dubai.otf');
}
@font-face {
    font-family: Golden;
    font-style: normal;
    font-weight: normal;
    src: url('/fonts/Golden.otf');
}

body {
    background: black;
}

#flag-image {
    width: 80%;
    height: auto;
    display: block; /* Ensures the image is a block-level element */
    z-index: 1;
    position: relative;
}

.gradient-line-about {
    width: 100%; /* Match the width of the image */
    height: 1px; /* Adjust the height of the line as needed */
    background: linear-gradient(to right,rgba(0,0,0,1) 30%, rgba(130,207,156,1) 46%, rgba(149,236,178,1) 61%);
    opacity: 1;
    border: none;
    margin: -4vw auto 0 auto; /* Adds top margin for spacing and centers the line */
    z-index: 0;
    position: relative;
}

.gradient-line_contact {
    width: 100%; /* Match the width of the image */
    height: 1px; /* Adjust the height of the line as needed */
    background: linear-gradient(to left,rgba(0,0,0,1) 0%, rgba(130,207,156,1) 46%, rgba(149,236,178,1) 61%);
    opacity: 1;
    border: none;
    z-index: 0;
    position: relative;
    margin: 1.5vw 0;
}

.what_container {
    margin: 5vw auto 10vw auto;
    width: 85%;
}

.heritage_container {
    display: flex;
    align-items: center; /* Make the container's children stretch to match height */
    justify-content: space-between;
    margin: 5vw auto 0;
    width: 80%;
}
.luis_container{
    margin: 12vw auto 5vw;
    position: relative;
}


.heritage-text-container {
    width: 50%; /* Adjust as needed */
    max-width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position:relative;

}
.who-text-container, .contact_us_texts {
    width: 40%; /* Adjust as needed */
    max-width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#dubai_green{
    font-family: Dubai-regular;
    font-weight: 600;
    color: #95ECB2;
}

img {
 height: 25vw;
}

/*.vertical {
    width: 2px;
    height: auto; !* Adjust the height to be automatic *!
    border: none;
    align-self: stretch; !* Ensure the vertical line stretches to match container height *!
    background: linear-gradient(to top,rgba(0,0,0,1) 30%, rgba(130,207,156,1) 46%, rgba(149,236,178,1) 61%);
    margin: 0 20px; !* Space between text and image *!
}*/

span {
    color: white;
}

#get_in_touch{
    font-size: 7vw;
    font-family: InterRegular, sans-serif;
    display: block;
    line-height: 0.9;
}
#contact_us{
    margin: 12vw auto;
}
.contact_us_texts{
    color: white;
    font-family: Dubai-regular,sans-serif;
    text-align: left;
    width: 43%;
}

#what_we_do {
    font-size: 5vw;
    font-family: InterRegular, sans-serif;
    display: block;
}

#what_we_do_desc {
    font-size: 1.2vw;
    display: block;
    width: 50%;
}

#heritage_desc {
    font-size: 1.6vw;
    display: block;
    width: 100%;
}


#golden_green {
    color: #95ECB2;
    font-family: Golden, sans-serif;
}

.attributes-container {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
    position: relative;
    align-items: center;
}

.attribute-outerline {
    font-size: 3vw;
    width: 20vw; /* Ensures the circle maintains a proportional size */
    height: 20vw; /* Ensures the circle maintains a proportional size */
    max-width: 30%; /* Ensures it doesn't exceed a third of the container */
    max-height: 30%; /* Ensures it doesn't exceed a third of the container */
    text-align: center;
    border: 1px solid #95ECB2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background: black;
}

.green-line {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px; /* Adjust the thickness of the line */
    display: flex;
    justify-content: space-between;
    align-items: center;
    transform: translateY(-50%); /* Center the line vertically within the container */
    z-index: 0; /* Ensure the line is behind the attributes */
    background: #95ECB2;
    opacity: 1;
}

.lui_green-line {
    position: absolute;
    left: -30%;
    width: 140%;
    height: 1px; /* Adjust the thickness of the line */
    display: flex;
    justify-content: space-between;
    align-items: center;
    transform: translateY(-50%); /* Center the line vertically within the container */
    z-index: 0; /* Ensure the line is behind the attributes */
    background: linear-gradient(to right, rgb(26, 46, 36) 4%,rgb(43, 69, 53) 2%, rgb(94, 153, 115) 38%, rgba(149,236,178,1) 61%);
    opacity: 1;
}
.lui_green-line_r {
    position: absolute;
    right: 0;
    width: 10%;
    height: 1px; /* Adjust the thickness of the line */
    display: flex;
    justify-content: space-between;
    align-items: center;
    transform: translateY(-50%); /* Center the line vertically within the container */
    z-index: 0; /* Ensure the line is behind the attributes */
    background: #95ECB2;
    opacity: 1;
}
.line1{
    top: 1.4%;
}
.line2{
    top: 83.5%;
}
.line3{
    top: 98.4%;
}
.attribute {
    font-size: 3vw;
    width: 80%; /* Ensures the circle maintains a proportional size */
    height: 80%; /* Ensures the circle maintains a proportional size */
    text-align: center;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background-color: #050505;
    z-index: 2;
}
#lui{
    width: 100%;
}
#lui_lines{
    stroke: white !important;
    stroke-opacity: 1;
    stroke-width: 1;
}

@media screen and (max-width: 1050px) and (min-width: 768px) {
    .contact_us_texts a{
        font-size: 14px;
    }
    .gradient-line_contact{
        margin: 1.2vw 0;
    }
}
@media screen and (max-width: 768px) {
    .attribute-outerline {
        width: 25vw;
        height: 25vw;
    }
    .attribute{
        font-size: 3.5vw;
    }
    #what_we_do{
        font-size: 7.5vw;
    }
    #what_we_do_desc {
        font-size: 2.5vw;
        display: block;
        width: 80%;
    }
    #heritage_desc {
        font-size: 2.5vw;
    }
    img {
        height: 50vw;
    }
    .luis_container {
        display: flex;
        flex-direction: column-reverse; /* This reverses the order of child elements */
        align-items: center; /* Optional: centers the items */
    }
    .heritage-text-container {
        width: 80%;
        max-width: 80%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
    }
    .who-text-container {
        width: 100%;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-bottom: 50px;
    }
    .contact_us_texts{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-bottom: 50px;
    }
    .contact_us{
        flex-direction: column;
    }
    #get_in_touch {
        font-size: 15vw;
        margin-bottom: 60px;
    }
    #contact_us {
        margin: 100px auto;

    }
    .contact_us_texts a {
        font-size: 20px;
    }
    .gradient-line2 {
        width: 100%; /* Match the width of the image */
        height: 2px; /* Adjust the height of the line as needed */
        background: linear-gradient(to left,rgba(0,0,0,1) 30%, rgba(130,207,156,1) 46%, rgba(149,236,178,1) 61%);
        opacity: 1;
        border: none;
        margin: 100px auto 0 auto; /* Adds top margin for spacing and centers the line */
        z-index: 0;
        position: relative;
    }
    .gradient-line3 {
        width: 100%; /* Match the width of the image */
        height: 2px; /* Adjust the height of the line as needed */
        background: linear-gradient(to right,rgba(0,0,0,1) 30%, rgba(130,207,156,1) 46%, rgba(149,236,178,1) 61%);
        opacity: 1;
        border: none;
        margin: 100px auto 0 auto; /* Adds top margin for spacing and centers the line */
        z-index: 0;
        position: relative;
    }
    #flag-image {
        width: 90%;

    }
    .vertical{
        display: none;
    }
    .lui_green-line{
        width: 160%;
    }
    #heritage_desc {
        width: 80%;
    }
}

@media screen and (max-width: 768px) and (min-width: 550px){
    #lui{
        width: 100%;
    }
    .gradient-line_contact{
        margin: 1vw 0;
    }
}
@media screen and (max-width: 550px) and (min-width: 450px){
    #what_we_do{
        font-size: 7.5vw;
    }
    #what_we_do_desc {
        font-size: 2.5vw;
        display: block;
        width: 80%;
    }
    .gradient-line_contact{
        margin: 0.8vw 0;
    }
}
@media screen and (max-width: 450px) and (min-width: 300px){
    #what_we_do{
        font-size: 6.5vw;
    }
    #what_we_do_desc {
        font-size: 2.5vw;
        display: block;
        width: 80%;
    }

    .gradient-line_contact{
        margin: 0.7vw 0;
    }
}
@media screen and (max-width: 300px){
    .contact_us_texts a{
        font-size: 2vw;
    }
    .gradient-line_contact{
        margin: 0.6vw 0;
    }
}



/* Global scrollbar styles for WebKit-based browsers */
::-webkit-scrollbar {
    width: 12px; /* Adjust the width as needed */
}

/* Track */
::-webkit-scrollbar-track {
    background: transparent; /* Background of the scrollbar track */
}

/* Handle */
::-webkit-scrollbar-thumb {
    background-color:  white; /* Color of the scrollbar handle */
    border-radius: 6px; /* Roundness of the scrollbar handle */
    border: 3px solid transparent; /* Optional: to create space around the handle */
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background-color:  white; /* Darker color on hover */
}

/* For Firefox */
html {
    scrollbar-width: thin; /* Width of the scrollbar */
    scrollbar-color:  white transparent; /* Color of the handle and track */
}

/* Optional: For a circular shape, add an inner shadow */
::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 10px 10px  white;
}