* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: ibm_sans;
    font-size: var(--small-font-size);
}

@font-face {
    font-family: ibm_sans;
    src: url(./fonts/IBM_Plex_Sans/IBMPlexSans-Regular.ttf);
}

@font-face {
    font-family: han_sans;
    src: url(./fonts/Black_Han_Sans/BlackHanSans-Regular.ttf);
}

@font-face {
    font-family: agelast;
    src: url(./fonts/agelast/Agelast_PersonalUse.otf);
}

html {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

.particles-js {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0%;
    left: 0%;
    z-index: 10;
}

.break {
    width: 0px;
    height: 0px;
    flex-basis: 100%;
}

body section {
    position: relative;
    z-index: 10;
}

.hidden-label {
    opacity: 0;
    pointer-events: none;
    scale: 0;
    position: absolute;
}


/* Font Sizes */

:root {

    --enormous-font-size: 10vw;

    --huge-font-size: 5vw;

    --big-font-size: 3vw;

    --medium-font-size: 2.5vw;

    --regular-font-size: 2vw;

    --intermediate-font-size: 1.3vw;

    --small-font-size: 0.8vw;

    --tiny-font-size: 0.6vw;

    --general-horizental-padding: 5%;

    --general-vertical-padding: 15%;

}

@media (min-width:1025px) and (max-width:1434px) {
    
    :root {

        --enormous-font-size: 11vw;

        --huge-font-size: 6vw;

        --big-font-size: 4vw;

        --medium-font-size: 3.5vw;

        --regular-font-size: 2.8vw;

        --intermediate-font-size: 2.3vw;

        --small-font-size: 1.3vw;

        --tiny-font-size: 1vw;

        --general-horizental-padding: 5%;

        --general-vertical-padding: 20%;

    }
    
}

@media (min-width:768px) and (max-width:1025px) {
    
    :root {

        --enormous-font-size: 12vw;

        --huge-font-size: 7vw;

        --big-font-size: 5vw;

        --medium-font-size: 4.5vw;

        --regular-font-size: 3.7vw;

        --intermediate-font-size: 2.5vw;

        --small-font-size: 1.8vw;

        --tiny-font-size: 1.4vw;

        --general-horizental-padding: 5%;

        --general-vertical-padding: 25%;

    }
    
}

@media (min-width:500px) and (max-width:768px) {
        
    :root {

        --enormous-font-size: 15vw;

        --huge-font-size: 8vw;

        --big-font-size: 6vw;

        --medium-font-size: 5.5vw;

        --regular-font-size: 4.7vw;

        --intermediate-font-size: 3.5vw;

        --small-font-size: 2.6vw;

        --tiny-font-size: 2.2vw;

        --general-horizental-padding: 5%;

        --general-vertical-padding: 35%;

    }
    
}

@media (max-width:500px) {
    
    :root {

        --enormous-font-size: 17vw;

        --huge-font-size: 9vw;

        --big-font-size: 7vw;

        --medium-font-size: 6.5vw;

        --regular-font-size: 5.7vw;

        --intermediate-font-size: 4.5vw;

        --small-font-size: 3.6vw;

        --tiny-font-size: 2.5vw;

        --general-horizental-padding: 5%;

        --general-vertical-padding: 45%;

    }
    
}

@media (min-width:768px) and (max-width:1025px) {
    p {
        line-height: 5vw;
    }
}

@media (min-width:500px) and (max-width:768px) {
    p {
        line-height: 6vw;
    }
}

@media (max-width:500px) {
    p {
        line-height: 7vw;
    }
}

html {
    overflow-x: hidden;
}




/* ================================================ NAV =================================================== */




nav {
    width: 100%;
    height: 150px;
    background-image: linear-gradient(180deg,black,transparent);
    position: fixed;
    top: 0%;
    z-index: 100;
    padding: 0% 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav .logo {
    width: auto;
    height: 50%;
}

nav .logo a {
    width: auto;
    height: 100%;
    display: block;
}

nav .logo a img {
    height: 100%;
    object-fit: cover;
}

nav .login {
    width: auto;
    height: 30%;
}

nav .login svg {
    width: auto;
    height: 100%;
    color: white;
}




/* ============================================== INDEX PAGE ============================================== */



.index-body {
    width: 100%;
    height: fit-content;
    background-color: #000210;
    position: relative;
}



/* ====================== INDEX PAGE - SECTION ====================== */



.index-body section {
    width: 100%;
    height: fit-content;
    position: relative;
    z-index: 50;
}




/* ========== INDEX PAGE - SECTION - home-intro ========== */




.index-body section .home-intro {
    width: 100%;
    height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 13 !important;
}

.index-body section .home-intro::after {
    content: '';
    width: 100%;
    height: 150px;
    position: absolute;
    top: calc(100% - 75px);
    left: 0%;
    background-image: linear-gradient(0deg, transparent, #000210,transparent);
    z-index: 50;
}

.index-body section .home-intro video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0%;
    left: 0%;
    object-fit: cover;
    pointer-events: none;
}

.index-body section .home-intro .home-intro-dets {
    width: 60%;
    height: fit-content;
    position: relative;
    text-align: center;
}

@media (min-width:500px) and (max-width:768px) {
    .index-body section .home-intro .home-intro-dets {
        width: 70%;
    }
}

@media (max-width:500px) {
    .index-body section .home-intro .home-intro-dets {
        width: 90%;
    }
}

.index-body section .home-intro .home-intro-dets h2 {
    font-size: var(--regular-font-size);
    color: white;
    font-weight: normal;
}

.index-body section .home-intro .home-intro-dets h1 {
    font-size: var(--big-font-size);
    color: white;
    margin-top: 20px;
    font-family: 'ibm_sans', 'Segoe UI', Roboto, sans-serif;
}




/* ========== INDEX PAGE - SECTION - CONTENTS ========== */



/* CON GENERAL HANDLE */

.index-body .gen-con {
    padding: 5%;
}

.index-body .con-1,
.index-body .con-5 {
    padding-left: 0% !important;
    padding-right: 0% !important;
}

    
@media (max-width:768px) {

    .index-body .gen-con {
        padding: 15% 5% 0% 5%;
    }

    .index-body .con-1,
    .index-body .con-5 {
        padding-left: 0% !important;
        padding-right: 0% !important;
    }
}


/* END */


.index-body section .con-1 {
    width: 100%;
    height: fit-content;
    position: relative;
    z-index: 13;
}

.index-body section .con-1 .con-1-dets {
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.index-body section .con-1 .con-1-dets h3 {
    width: 70%;
    height: fit-content;
    display: block;
    font-size: var(--medium-font-size);
    color: white;
    position: relative;
    text-align: center;
}

@media (min-width:768px) and (max-width:1025px) {
    .index-body section .con-1 .con-1-dets h3 {
        width: 80%;
    }
}

@media (max-width:768px) {
    .index-body section .con-1 .con-1-dets h3 {
        width: 90%;
    }
}

.index-body section .con-1 .con-1-dets p {
    width: 50%;
    height: fit-content;
    color: white;
    position: relative;
    margin-top: 20px;
    text-align: center;
    font-size: var(--intermediate-font-size);
}

@media (min-width:768px) and (max-width:1025px) {
    .index-body section .con-1 .con-1-dets p {
        width: 65%;
    }
}

@media (min-width:500px) and (max-width:768px) {
    .index-body section .con-1 .con-1-dets p {
        width: 80%;
        margin: 0px;
        margin-top: 20px;
    }
}

@media (max-width:500px) {
    .index-body section .con-1 .con-1-dets p {
        width: 90%;
        margin: 0px;
        margin-top: 20px;
    }
}

/* Parallax */

.con-1-pseudo-background-wrapper {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: -1;
}

.con-1-pseudo-background {
    width: 100%;
    height: 100%;
    background-image: url(pics/parallax.png);
    background-size: cover;
    background-position-y: -300px;
}

@media (min-width:1025px) and (max-width:1443px) {
    .con-1-pseudo-background {
        background-position-y: -100px;
    }
}

@media (min-width:768px) and (max-width:1025px) {
    .con-1-pseudo-background {
        background-position-y: 10px;
    }
}

@media (min-width:500px) and (max-width:768px) {
    .con-1-pseudo-background {
        background-position-y: 100px;
    }
}

@media (max-width:500px) {
    .con-1-pseudo-background {
        background-position-y: 250px;
    }
}

/* End */

.index-body section .con-1 .our-projects {
    width: 100%;
    height: fit-content;
    margin-top: 100px;
    position: relative;
    z-index: 11;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.index-body section .con-1 .our-projects h2 {
    width: 100%;
    height: fit-content;
    font-size: var(--big-font-size);
    color: white;
    position: relative;
    margin-bottom: 50px;
    text-align: center;
}

.index-body section .con-1 .our-projects .projects-slider-wrapper  {
    width: 100%;
    display: flex;
    justify-content: center;
}

.index-body section .con-1 .our-projects .projects-slider-wrapper .our-projects-container {
    width: 100%;
    height: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.index-body section .con-1 .our-projects  .projects-slider-wrapper .our-projects-container .project-item {
    width: 20vw;
    height: 35vw;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

@media (min-width:1025px) and (max-width:1434px) {
    .index-body section .con-1 .our-projects .projects-slider-wrapper .our-projects-container .project-item {
        width: 23vw;
        height: 42vw;
    }
}

@media (min-width:768px) and (max-width:1025px) {
    .index-body section .con-1 .our-projects .projects-slider-wrapper .our-projects-container .project-item {
        width: 45vw;
        height: 80vw;
    }
}

@media (min-width:500px) and (max-width:768px) {
    .index-body section .con-1 .our-projects .projects-slider-wrapper .our-projects-container .project-item {
        width: 45vw;
        height: 80vw;
    }
}

@media (max-width:500px) {
    .index-body section .con-1 .our-projects .projects-slider-wrapper .our-projects-container .project-item {
        width: 45vw;
        height: 80vw;
    }
}


/* mobile Projects Slider Start */


@media (max-width: 1025px) {
    .projects-slider-wrapper {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: none !important; /* <-- no snapping */
    -webkit-overflow-scrolling: touch !important;
    padding: 0 !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    cursor: grab !important;
}


    .our-projects-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 16px !important;
        width: max-content !important;
        padding: 0 16px !important;
        box-sizing: border-box !important;
        background: rgba(255, 0, 0, 0.05) !important; /* Debug background */
    }


    
    .projects-slider-wrapper::-webkit-scrollbar {
        display: none !important;
    }
    
    .projects-slider-wrapper {
        scrollbar-width: none !important; /* Firefox */
        -ms-overflow-style: none !important; /* IE 10+ */
    }

}

@media (min-width:768px) and (max-width:1025px) {
    .project-item {
        flex: 0 0 auto !important;
        scroll-snap-align: start !important;
        width: 40vw !important; /* Critical: must define width on mobile */
        height: 70vw !important;
    }
}

@media (min-width:500px) and (max-width:768px) {
    .project-item {
        flex: 0 0 auto !important;
        scroll-snap-align: start !important;
        width: 65vw !important; /* Critical: must define width on mobile */
        height: 100vw !important;
    }
}

@media (max-width:500px) {
    .project-item {
        flex: 0 0 auto !important;
        scroll-snap-align: start !important;
        width: 75vw !important; /* Critical: must define width on mobile */
        height: 130vw !important;
    }
    
    .projects-slider-wrapper {
        touch-action: pan-x; /* Enables natural horizontal drag on touch */
    }
    
    @media (max-width: 1025px) {
        .project-item {
            scroll-snap-align: unset !important;
        }
    }

}





/* mobile Projects Slider End */


.index-body section .con-1 .our-projects .our-projects-container .project-item video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0%;
    left: 0%;
    object-fit: cover;
    filter: brightness(90%);
    transition: all ease 0.5s;
}

.index-body section .con-1 .our-projects .projects-slider-wrapper .our-projects-container .project-item .project-item-upper-dets {
    width: 100%;
    height: fit-content;
    position: absolute;
    top: -50%;
    left: 0%;
    padding: 5% 10%;
    transition: all ease 0.5s;
}

.index-body section .con-1 .our-projects .projects-slider-wrapper .our-projects-container .project-item .project-item-upper-dets h3 {
    font-size: var(--medium-font-size);
    color: white;
}

.index-body section .con-1 .our-projects .projects-slider-wrapper .our-projects-container .project-item .project-item-lower-dets {
    width: 100%;
    height: fit-content;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-items: center;
    gap: 10px;
    position: absolute;
    bottom: -60%;
    left: 0%;
    padding: 5% 10%;
    transition: all ease 0.5s;
}

.index-body section .con-1 .our-projects .projects-slider-wrapper .our-projects-container .project-item .project-item-lower-dets span {
    color: #000210;
    background-color: white;
    padding: 10px 20px;
    font-size: var(--tiny-font-size);
    border-radius: 10px;
}

.index-body section .con-1 .our-projects .projects-slider-wrapper .our-projects-container .project-item a {
    width: fit-content;
    height: fit-content;
    position: absolute;
    bottom: 2%;
    right: 5%;
    background-color: #000210;
    text-decoration: none;
    color: white;
    border-radius: 50%;
    transition: all ease 0.5s;
    padding: 5%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.432);
    transition: all ease 1s;
    opacity: 0;
}

.index-body section .con-1 .our-projects .projects-slider-wrapper .our-projects-container .project-item a svg {
    width: 20px;
    height: 20px;
}

.index-body section .con-1 .our-projects .projects-slider-wrapper .our-projects-container .project-item a:hover {
    background-color: white;
    color: #000210;
    border: 1px solid #000210;
}

@media (min-width:1025px) {

    .project-item:hover .project-item-trailer {
        filter: brightness(50%) !important;
        scale: 1.35 !important;
        transform: rotateZ(-10deg) !important;
    }

    .project-item:hover .project-item-upper-dets {
        top: 5% !important;
    }

    .project-item:hover .project-item-lower-dets {
        bottom: 5% !important;
    }

    .project-item:hover .project-item-a {
        opacity: 1 !important;
    }

}

@media (max-width:1025px) {

    .project-item-trailer {
        filter: brightness(50%) !important;
        scale: 1.35 !important;
        transform: rotateZ(-10deg) !important;
    }

     .project-item-upper-dets {
        top: 5% !important;
    }

    .project-item-lower-dets {
        bottom: 10% !important;
    }

     .project-item-a {
        opacity: 1 !important;
    }
}

.index-body section .con-1 .our-projects .more-projects {
    width: 100%;
    height: fit-content;
    text-align: center;
    margin-top: 50px;
    margin-bottom: 50px;
}

.index-body section .con-1 .our-projects .more-projects a {
    width: fit-content;
    height: fit-content;
    font-size: var(--intermediate-font-size);
    padding: 20px 30px;
    background-color: white;
    color: #000210;
    border-radius: 50px;
    text-decoration: none;
    transition: all ease 0.5s;
    border: 1px solid transparent;
}

.index-body section .con-1 .our-projects .more-projects a:hover {
    background-color: #000210;
    color: white;
    border: 1px solid white;
}

@media (max-width: 1025px) {
    .index-body section .con-1 .our-projects .our-projects-container {
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        transition: scroll-left 0.3s ease;
    }

    .project-item {
        transition: transform 0.3s ease, filter 0.3s ease;
    }
}


.index-body section .con-1 .con-1-co-introduction-vid {
    width: 100%;
    height: 45vw;
    margin-top: 100px;
    position: relative;
    z-index: 13;
}

@media (min-width:1025px) and (max-width:1434px) {
    .index-body section .con-1 .con-1-co-introduction-vid {
        height: 51vw;
    }
}

@media (min-width:768px) and (max-width:1025px) {
    .index-body section .con-1 .con-1-co-introduction-vid {
        height: 65vw;
    }
}

@media (min-width:500px) and (max-width:768px) {
    .index-body section .con-1 .con-1-co-introduction-vid {
        height: 70vw;
    }
}

@media (max-width:500px) {
    .index-body section .con-1 .con-1-co-introduction-vid {
        height: 110vw;
    }
}

.index-body section .con-1 .con-1-co-introduction-vid::before {
    content: '';
    width: 100%;
    height: 150px;
    position: absolute;
    bottom: 98%;
    left: 0%;
    background-image: linear-gradient(0deg, #000210, transparent);
    z-index: 50;
}

.index-body section .con-1 .con-1-co-introduction-vid::after {
    content: '';
    width: 100%;
    height: 150px;
    position: absolute;
    top: 95%;
    left: 0%;
    background-image: linear-gradient(180deg, #000210, transparent);
    z-index: 50;
}

.index-body section .con-1 .con-1-co-introduction-vid * {
    border: none !important;
}


/* Youtube Override */

.html5-video-player a,
.ytmVideoInfoVideoTitleContainer,
.ytp-title,
.yt-core-attributed-string--ellipsis-truncate,
.yt-core-attributed-string--white-space-no-wrap {
    display: none !important;
}

/* End */

.index-body section .con-1 .con-1-co-introduction-vid .con-1-co-introduction-vid-wrapper {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    border: 1px solid white;
}

@media (max-width:1025px) {
    .index-body section .con-1 .con-1-co-introduction-vid .con-1-co-introduction-vid-wrapper {
        border: none;
        border-radius: 0%;
    }
}

.index-body section .con-1 .con-1-co-introduction-vid .con-1-co-introduction-vid-wrapper iframe {
    width: 100%;
    height: 95% !important;
    object-fit: cover;
    cursor: pointer;
    padding-top: 10px;
}

/* SEO FIX */


.youtube-facade {
    height: 100%;
}

.youtube-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}




/* Con 2 */



.index-body section .con-2 {
    width: 100%;
    height: fit-content;
    position: relative;
    z-index: 13;
    margin-top: 50px;
}

.index-body section .con-2 h2 {
    width: 100%;
    font-size: var(--big-font-size);
    color: white;
    position: relative;
    margin-bottom: 50px;
}

.index-body section .con-2 .our-services-container {
    width: 70%;
    height: 30vw;
    margin-left: 15%;
    display: flex;
    /* gap: 0.2vw; */
}

@media (min-width:1025px) and (max-width:1434px) {
    .index-body section .con-2 .our-services-container {
        width: 90%;
        margin-left: 5%;
        height: 41vw !important;
    }
}

@media (max-width:1025px) {
    .index-body section .con-2 .our-services-container {
        width: 100%;
        margin-left: 0%;
        flex-direction: column;
        height: fit-content;
    }
}

.index-body section .con-2 .our-services-container .service-item {
    width: 8vw;
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: all ease 0.5s;
}

@media (min-width:768px) and (max-width:1025px) {
    .index-body section .con-2 .our-services-container .service-item {
        width: 100%;
        height: 13vw;
    }
}

@media (min-width:500px) and (max-width:768px) {
    .index-body section .con-2 .our-services-container .service-item {
        width: 100%;
        height: 20vw;
    }
}

@media (max-width:500px) {
    .index-body section .con-2 .our-services-container .service-item {
        width: 100%;
        height: 30vw;
    }
}

.index-body section .con-2 .our-services-container .service-item::before {
    content: '';
    width: 1px;
    height: 100%;
    background-color: #dfdfdf67;
    position: absolute;
    top: 0%;
    left: 0%;
    z-index: 1;
}

@media (max-width:1025px) {
    .index-body section .con-2 .our-services-container .service-item::before {
        width: 100%; 
        height: 1px;
        left: 0%;
    }
}

.index-body section .con-2 .our-services-container .service-item::after {
    content: '';
    width: 1px;
    height: 100%;
    background-color: #dfdfdf67;
    position: absolute;
    top: 0%;
    right: 0%;
    z-index: 1;
}

@media (max-width:1025px) {
    .index-body section .con-2 .our-services-container .service-item::after {
        width: 100%; 
        height: 1px;
        top: 100%!important;
        left: 0% !important;
        z-index: 10;
    }
}

@media (max-width:1025px) {
    .index-body section .con-2 .our-services-container .service-item:last-child:after {
        width: 100%; 
        height: 1px;
        top: 99%!important;
        left: 0% !important;
        z-index: 10;
    }
}

.expand-service-item {
    width: 40vw !important; 
}

@media (min-width:1025px) and (max-width:1434px) {
    .expand-service-item {
        width: 57vw !important;
    }
}

@media (min-width:768px) and (max-width:1025px) {
    .expand-service-item {
        width: 100% !important; 
        height: 75vw !important;
    }
}

@media (min-width:500px) and (max-width:768px) {
    .expand-service-item {
        width: 100% !important; 
        height: 110vw !important;
    }
}

@media (min-width:400px) and (max-width:500px) {
    .expand-service-item {
        width: 100% !important; 
        height: 175vw !important;
    }
}

@media (max-width:400px) {
    .expand-service-item {
        width: 100% !important; 
        height: 190vw !important;
    }
}

.collapse-service-item-header {
    opacity: 0 !important;
    pointer-events: none !important;
}

.index-body section .con-2 .our-services-container .service-item .service-item-header {
    width: 30vw;
    height: 8vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transform: rotateZ(90deg);
    transform-origin: left;
    position: absolute;
    top: -13.5%;
    left: 50%;
    border: none;
    cursor: pointer;
    transition: all ease 0.5s;
    background-color: transparent;
}

@media (min-width:1025px) and (max-width:1434px) {
    .index-body section .con-2 .our-services-container .service-item .service-item-header {
        width: 40vw;
        height: 11vw;
        top: -13.5%;
        left: 50%;
        padding: 0%;
    }
}

@media (min-width:768px) and (max-width:1025px) {
    .index-body section .con-2 .our-services-container .service-item .service-item-header {
        width: 100%;
        height: 13vw;
        transform: unset;
        top: 0%;
        left: 0%;
        padding: 0%;
    }
}

@media (min-width:500px) and (max-width:768px) {
    .index-body section .con-2 .our-services-container .service-item .service-item-header {
        width: 100%;
        height: 20vw;
        transform: unset;
        top: 0%;
        left: 0%;
        padding: 0%;
    }
}

@media (max-width:500px) {
    .index-body section .con-2 .our-services-container .service-item .service-item-header {
        width: 100%;
        height: 30vw;
        transform: unset;
        top: 0%;
        left: 0%;
        padding: 0%;
    }
}

.index-body section .con-2 .our-services-container .service-item .service-item-header h3 {
    width: fit-content;
    text-align: start;
    font-size: var(--regular-font-size);
    color: white;
}

.index-body section .con-2 .our-services-container .service-item .service-item-header span {
    font-size: var(--regular-font-size);
    font-weight: bolder;
    color: white;
}

.index-body section .con-2 .our-services-container .service-item .service-item-dets {
    width: 100%;
    height: 100%;
    padding: 5%;
    opacity: 0;
    transition: all ease 0.5s;
}

@media (min-width:768px) and (max-width:1025px) {
    .index-body section .con-2 .our-services-container .service-item .service-item-dets {
        width: 100%;
        height: 13vw;
        padding: 5% 0%;
    }
}

@media (min-width:500px) and (max-width:768px) {
    .index-body section .con-2 .our-services-container .service-item .service-item-dets {
        width: 100%;
        height: 90vw;
        padding: 5% 0%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
}

@media (max-width:500px) {
    .index-body section .con-2 .our-services-container .service-item .service-item-dets {
        width: 100%;
        height: 140vw;
        padding: 5% 0%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
}

.index-body section .con-2 .our-services-container .service-item .service-item-dets p {
    white-space: pre-line;     /* More forgiving than pre-wrap */
    word-wrap: break-word;
    overflow-wrap: break-word;
    margin: 0 0 1em 0;        /* Controlled spacing */
}

.show-service-item-dets {
    opacity: 1 !important;
}

.index-body section .con-2 .our-services-container .service-item .service-item-dets h3 {
    font-size: var(--regular-font-size);
    color: white;
}

.index-body section .con-2 .our-services-container .service-item .service-item-dets p {
    margin-top: 20px;
    color: white;
    font-size: var(--small-font-size);
}

.index-body section .con-2 .our-services-container .service-item .service-item-tags {
    width: fit-content;
    height: fit-content;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
}

@media (max-width:500px) {
    .index-body section .con-2 .our-services-container .service-item .service-item-tags {
        gap: 10px;
        margin-top: 10px;
    }
}

.index-body section .con-2 .our-services-container .service-item .service-item-tags span {
    background-color: #000210;
    color: white;
    padding: 20px 30px;
    border-radius: 50px;
    border: 1px solid white;
    font-size: var(--small-font-size);
}

.index-body section .con-2 .our-services-container .service-item .service-item-btn {
    width: fit-content;
    height: fit-content;
    margin-top: 20px;
    text-decoration: none;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 10px;
    background-color: white;
    color: #000210;
    border: 1px solid #00021060;
    padding: 20px 30px;
    border-radius: 50px;
    transition: all ease 0.5s;
    font-size: var(--small-font-size);
}

.index-body section .con-2 .our-services-container .service-item .service-item-btn:hover {
    scale: 1.1;
    margin-left: 10px;
}

.index-body section .con-2 .our-services-container .service-item .service-item-btn span {
    margin: 0px;
    color: #000210;
}

.index-body section .con-2 .our-services-container .service-item .service-item-btn svg {
    width: 20px;
    height: 20px;
    transition: all ease 0.5s;
}

.index-body section .con-2 .our-services-container .service-item .service-item-btn:hover .service-item-btn-svg {
    margin-left: 10px;
}

.index-body section .con-2 .more-services {
    width: 100%;
    height: fit-content;
    text-align: center;
    margin-top: 100px;
}

.index-body section .con-2 .more-services a {
    width: fit-content;
    height: fit-content;
    font-size: var(--intermediate-font-size);
    padding: 20px 30px;
    background-color: white;
    color: #000210;
    border-radius: 50px;
    text-decoration: none;
    transition: all ease 0.5s;
    border: 1px solid transparent;
}

.index-body section .con-2 .more-services a:hover {
    background-color: #000210;
    color: white;
    border: 1px solid white;
}




/* Con 3 */




.index-body section .con-3 {
    width: 100%;
    height: fit-content;
    position: relative;
    z-index: 13;
}

@media (max-width:1025px) {
    .index-body section .con-3 {
        padding: 0%;
        margin-top: 100px;
    }
}

.index-body section .con-3 .mail-sub-container {
    width: 100%;
    height: 40vw;
    border: 1px solid white;
    border-radius: 10px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

@media (min-width:1025px) {
    .index-body section .con-3 .mail-sub-container {
        overflow: hidden;
    }
}

@media (min-width:1025px) and (max-width:1434px) {
    .index-body section .con-3 .mail-sub-container {
        height: 45vw;
    }
}

@media (min-width:768px) and (max-width:1025px) {
    .index-body section .con-3 .mail-sub-container {
        height: 70vw;
        border: none;
        border-radius: 0%;
    }
}

@media (min-width:500px) and (max-width:768px) {
    .index-body section .con-3 .mail-sub-container {
        height: fit-content;
        border: none;
        padding: 15% 0%;
        border-radius: 0%;
    }
}

@media (max-width:500px) {
    .index-body section .con-3 .mail-sub-container {
        height: fit-content;
        border: none;
        padding: 15% 0%;
        border-radius: 0%;
    }
}

.index-body section .con-3 .mail-sub-container::before {
    content: '';
    width: 100%;
    height: 150px;
    position: absolute;
    bottom: calc(100% - 75px);
    left: 0%;
    background-image: linear-gradient(180deg, transparent, #000210,transparent);
    z-index: 50;
}

@media (min-width:1025px) {
    .index-body section .con-3 .mail-sub-container::before {
        display: none;
    }
}

.index-body section .con-3 .mail-sub-container::after {
    content: '';
    width: 100%;
    height: 150px;
    position: absolute;
    top: calc(100% - 75px);
    left: 0%;
    background-image: linear-gradient(180deg, transparent, #000210,transparent);
    z-index: 50;
}

@media (min-width:1025px) {
    .index-body section .con-3 .mail-sub-container::after {
        display: none;
    }
}

.index-body section .con-3 .mail-sub-container video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0%;
    left: 0%;
    object-fit: cover;
    filter: brightness(50%);
    pointer-events: none;
}

.index-body section .con-3 .mail-sub-container h2 {
    width: 60%;
    font-size: var(--big-font-size);
    color: white;
    position: relative;
    text-align: center;
}

@media (min-width:1025px) and (max-width:1434px) {
    .index-body section .con-3 .mail-sub-container h2 {
        width: 70%;
    }
}

@media (max-width:1025px) {
    .index-body section .con-3 .mail-sub-container h2 {
        width: 90%;
    }
}

.index-body section .con-3 .mail-sub-container p {
    width: 40%;
    color: white;
    position: relative;
    text-align: center;
    margin-top: 30px;
    font-size: var(--small-font-size);
}

@media (min-width:1025px) and (max-width:1434px) {
    .index-body section .con-3 .mail-sub-container p {
        width: 60%;
    }
}

@media (min-width:768px) and (max-width:1025px) {
    .index-body section .con-3 .mail-sub-container p {
        width: 80%;
    }
}

@media (max-width:768px) {
    .index-body section .con-3 .mail-sub-container p {
        width: 90%;
    }
}

.index-body section .con-3 .mail-sub-container form {
    width: 50%;
    height: fit-content;
    position: relative;
    margin-top: 50px;
    display: flex;
    justify-content: center;
    align-items: stretch;
    border-radius: 10px;
    overflow: hidden;
}

@media (min-width:768px) and (max-width:1443px) {
    .index-body section .con-3 .mail-sub-container form {
        width: 60%;
    }
}

@media (max-width:768px) {
    .index-body section .con-3 .mail-sub-container form {
        width: 80%;
    }
}

.index-body section .con-3 .mail-sub-container form input[type="email"] {
    width: 80%;
    padding: 20px;
    border: none;
    outline: none;
    font-size: var(--small-font-size);
}

@media (max-width:500px) {
    .index-body section .con-3 .mail-sub-container form input[type="email"] {
        width: 70%;
    }
}

.index-body section .con-3 .mail-sub-container form input[type="submit"] {
    width: 20%;
    background-color: #55576bde;
    color: white;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: var(--small-font-size);
}

@media (max-width:500px) {
    .index-body section .con-3 .mail-sub-container form input[type="submit"] {
        width: 30%;
    }
}




/* Con 4 */




.index-body section .con-4 {
    width: 100%;
    height: fit-content;
    z-index: 13;
    position: relative;
}

.index-body section .con-4 h2 {
    width: 100%;
    font-size: var(--big-font-size);
    color: white;
    position: relative;
    text-align: center;
}

.index-body section .con-4 .con-4-slogan {
    width: 100%;
    height: fit-content;
    text-align: center;
    font-size: var(--regular-font-size);
    margin-top: 50px;
    color: white;
    padding: 0px 5%;
}

.index-body section .con-4 .achivmemnts-container {
    width: 100%;
    height: fit-content;
    padding: 5%;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 50px;
}

.achivment-item {
  opacity: 0;
  transform: translateY(30px);
  transition: all 1s ease-out, all 1s ease-out;
}

.achivment-item.visible {
  opacity: 1;
  transform: translateY(0);
}


@media (max-width:1025px) {
    
    .index-body section .con-4 .achivmemnts-container {
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        align-content: center;
    }

    .index-body section .con-4 .achivmemnts-container .achivment-item {
        width: 100%;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        align-content: center;
        transition: transform 0.6s ease-out, opacity 0.4s ease-out;
    }

}

.index-body section .con-4 .achivmemnts-container .achivment-item h3 {
    font-size: var(--intermediate-font-size);
    position: relative;
    color: white;
    margin-bottom: 20px;
}

@media (max-width:1025px) {
    .index-body section .con-4 .achivmemnts-container .achivment-item h3 {
        width: 100%;
        margin-left: 0%;
        margin-top: 30px;
    }
}

.index-body section .con-4 .achivmemnts-container .achivment-item h3::before {
    content: '';
    width: 30%;
    height: 5px;
    background-color: orangered;
    position: absolute;
    top: 45%;
    left: -35%;
    z-index: 1;
}

@media (max-width:1025px) {
    .index-body section .con-4 .achivmemnts-container .achivment-item h3::before {
        display: none;
    }
}

.index-body section .con-4 .achivmemnts-container .achivment-item .achivment-stat {
    width: fit-content;
    height: fit-content;
    display: flex;
    justify-content: start;
    align-items: center;
}

@media (max-width:1025px) {
    .index-body section .con-4 .achivmemnts-container .achivment-item .achivment-stat {
       flex-wrap: wrap;
       flex-direction: column-reverse;
       justify-content: start;
       align-items: start;
       align-content: start;
    }
}

.index-body section .con-4 .achivmemnts-container .achivment-item .achivment-stat div {
    display: flex;
    align-content: center;
    align-items: center;
}

.index-body section .con-4 .achivmemnts-container .achivment-item .achivment-stat div p,
.index-body section .con-4 .achivmemnts-container .achivment-item .achivment-stat div h4 {
    width: fit-content;
    font-size: var(--enormous-font-size);
    text-align: start;
    color: white;
    font-family: han_sans;
    letter-spacing: 10px;
}

@media (max-width:1025px) {
    .index-body section .con-4 .achivmemnts-container .achivment-item .achivment-stat div p,
    .index-body section .con-4 .achivmemnts-container .achivment-item .achivment-stat div h4 {
        margin-top: 50px; 
    }
}

.index-body section .con-4 .achivmemnts-container .achivment-item .achivment-stat span {
    width: 100%;
    height: fit-content;
    display: block;
    background-color: transparent;
    color: orangered;
    font-size: var(--small-font-size);
}

.index-body section .con-4 .achivmemnts-container .achivment-item .achivment-item-desc {
    color: white;
    font-size: var(--intermediate-font-size);
    margin-top: 20px;
}

.index-body section .con-4 .achivmemnts-container .achivment-item h4 {
    font-size: var(--enormous-font-size);
    color: white;
}

.index-body section .con-4 .achivmemnts-container .achivment-item .achivment-item-anchor {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 100%;
    left: 50%;
}



/* Con 5 */



.index-body section .con-5 {
    width: 100%;
    height: fit-content;
    z-index: 13;
    position: relative;
    margin-top: 5%;
    overflow: hidden;
}

.index-body section .con-5 h2 {
    width: 100%;
    font-size: var(--big-font-size);
    color: white;
    position: relative;
    margin-bottom: 50px;
    text-align: center;
} 

.index-body section .con-5 .blogs-container {
    width: 100%;
    height: fit-content;
    display: flex;
}

.index-body section .con-5 .blogs-container .blog-article-item-wrapper {
    min-width: 100%;
    height: fit-content;
    padding: 0% 10%;
}

.index-body section .con-5 .blogs-container .blog-article-item-wrapper .blog-article-item {
    width: 100%;
    height: 30vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    gap: 50px;
    position: relative;
    border-radius: 36px;
    overflow: hidden;
}

@media (min-width:1025px) and (max-width:1443px) {
    .index-body section .con-5 .blogs-container .blog-article-item-wrapper .blog-article-item {
        height: 40vw;
    }
}

@media (min-width:768px) and (max-width:1025px) {
    .index-body section .con-5 .blogs-container .blog-article-item-wrapper .blog-article-item {
        height: 80vw;
    }
}

@media (min-width:500px) and (max-width:768px) {
    .index-body section .con-5 .blogs-container .blog-article-item-wrapper .blog-article-item {
        height: 110vw;
    }
}

@media (max-width:500px) {
    .index-body section .con-5 .blogs-container .blog-article-item-wrapper .blog-article-item {
        height: 140vw;
    }
}


/* BLOGS SLIDER */ 


.blogs-slider-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.blogs-container {
    display: flex;
    gap: 30px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 10px;
    scrollbar-width: none;
}

.blogs-container::-webkit-scrollbar {
    display: none;
}

.blog-article-item {
    min-width: 300px;
    flex: 0 0 auto;
    background: #111;
    padding: 20px;
    border-radius: 10px;
}

.blog-slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    border: none;
    font-size: 2rem;
    padding: 10px;
    cursor: pointer;
}

.blog-slider-btn.left {
    left: 0;
}

.blog-slider-btn.right {
    right: 0;
}


/* END */


.index-body section .con-5 .blogs-container .blog-article-item-wrapper .blog-article-item img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0%;
    left: 0%;
    object-fit: cover;
    filter: brightness(70%);
    cursor: pointer;
}

.index-body section .con-5 .blogs-container .blog-article-item-wrapper .blog-article-item h3 {
    max-width: 80%;
    height: fit-content;
    text-align: center;
    font-size: var(--intermediate-font-size);
    color: white;
    background-color: #000210;
    padding: 20px;
    position: relative;
    font-weight: normal;
    border-radius: 16px;
}

.index-body section .con-5 .blogs-container .blog-article-item-wrapper .blog-article-item h4 {
    max-width: 60%;
    height: fit-content;
    text-align: center;
    font-size: var(--small-font-size);
    color: white;
    background-color: #000210;
    padding: 20px;
    position: relative;
    font-weight: normal;
        border-radius: 16px;
}

.index-body section .con-5 .blogs-container .blog-article-item-wrapper .blog-article-item a {
    background-color: white;
    color: #000210;
    padding: 10px 15px;
    border: 1px solid white;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    text-decoration: none;
    transition: all ease 0.5s;
    font-size: var(--small-font-size);
}

.index-body section .con-5 .blogs-container .blog-article-item-wrapper .blog-article-item a svg {
    width: 20px;
    height: 20px;
    background-color: black;
    border-radius: 50%;
    color: white;
    padding: 5px;
    transition: all ease 0.5s;
}

.index-body section .con-5 .blogs-container .blog-article-item-wrapper .blog-article-item a:hover {
    scale: 1.2;
}

.index-body section .con-5 .blogs-container .blog-article-item-wrapper a:hover .blog-article-item-a-svg {
    transform: rotateZ(45deg);
    margin-left: 10px;
}

.index-body section .con-5 .slider-buttons {
    width: 100%;
    height: fit-content;
    margin-top: 50px;
    display: flex;
    justify-content: center;
    gap: 50px;
}

.index-body section .con-5 .slider-buttons button {
    background-color: white;
    color: #000210;
    border: 1px solid white;
    border-radius: 50px;
    padding: 20px 30px;
    cursor: pointer;
    font-size: var(--small-font-size);
}

.index-body section .con-5 .more-blogs {
    width: 100%;
    height: fit-content;
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

.index-body section .con-5 .more-blogs a {
    width: fit-content;
    height: fit-content;
    display: block;
    font-size: var(--intermediate-font-size);
    padding: 20px 30px;
    background-color: white;
    color: #000210;
    border-radius: 50px;
    text-decoration: none;
    transition: all ease 0.5s;
    border: 1px solid transparent;
}

.index-body section .con-5 .more-blogs a:hover {
    background-color: #000210;
    color: white;
    border: 1px solid white;
}





/* Con 6 */



.index-body section .con-6 {
    width: 100%;
    height: fit-content;
    position: relative;
    z-index: 13;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
}

.index-body section .con-6 h2 {
    width: 100%;
    font-size: var(--big-font-size);
    color: white;
    position: relative;
    margin-bottom: 50px;
    text-align: center;
}

.index-body section .con-6 .careers-dets {
    width: 50%;
    padding-right: 5%;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-items: center;
    position: relative;
}

@media (max-width:1025px) {
    .index-body section .con-6 .careers-dets {
        width: 100%;
        justify-content: center;
        padding-right: 0%;
    }
}

.index-body section .con-6 .careers-dets span {
    font-size: var(--intermediate-font-size);
    color: white;
}

.index-body section .con-6 .careers-dets h3 {
    width: 100%;
    font-size: var(--regular-font-size);
    color: white;
    position: relative;
}

@media (max-width:1025px) {
    .index-body section .con-6 .careers-dets h3 {
        text-align: center !important;
        margin-top: 20px;
    }
}

.index-body section .con-6 .careers-dets p {
    font-size: var(--small-font-size);
    color: white;
}

@media (max-width:1025px) {
    .index-body section .con-6 .careers-dets p {
        text-align: center !important;
        margin-top: 20px;
    }
}

.index-body section .con-6 .careers-dets a {
    width: fit-content;
    height: fit-content;
    display: block;
    padding: 20px 30px;
    text-decoration: none;
    background-color: white;
    color: #000210;
    border: 1px solid white;
    transition: all ease 0.5s;
    border-radius: 50px;
    font-size: var(--small-font-size);
    margin-top: 20px;
}

.index-body section .con-6 .careers-dets a:hover {
    background-color: #000210;
    color: white;
}

.index-body section .con-6 .careers-pics {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    position: relative;
}

@media (max-width:1025px) {
    .index-body section .con-6 .careers-pics {
        display: none;
    }
}

.index-body section .con-6 .careers-pics div {
    width: 50%;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
}

.index-body section .con-6 .careers-pics div img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(50%);
}

.index-body section .con-6 .careers-pics div span {
    font-size: var(--small-font-size);
    position: absolute;
    color: white;
}



/* Con 7 */



.index-body section .con-7 {
    width: 100%;
    height: fit-content;
    padding-bottom: 150px;
    position: relative;
    z-index: 13;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    align-content: center;
    margin-top: 50px;
}

.index-body section .con-7 h2 {
    width: 100%;
    font-size: var(--big-font-size);
    color: white;
    position: relative;
    margin-bottom: 50px;
    text-align: center;
}

.index-body section .con-7 h3 {
    width: 100%;
    font-size: var(--medium-font-size);
    color: white;
    position: relative;
    margin-bottom: 50px;
    text-align: center;
}

.index-body section .con-7 p {
    width: 100%;
    height: fit-content;
    font-size: var(--intermediate-font-size);
    color: white;
    text-align: center;
}

.index-body section .con-7 button {
    width: fit-content;
    height: fit-content;
    background-color: #000210;
    color: white;
    border: 1px solid white;
    font-size: var(--intermediate-font-size);
    padding: 20px 30px;
    border-radius: 50px;
    transition: all ease 0.5s;
    margin-left: 10px;
    margin-top: 50px;
}

.index-body section .con-7 button:hover {
    background-color: white;
    color: #000210;
    cursor: pointer;
}

/* Packages Popup */

.packages-calculator-popup {
    width: 100%;
    height: 100vh;
    background-color: #000210da;
    position: fixed;
    top: 0%;
    left: 0%;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: all ease 0.5s;
}

.packages-popup-calculator-active {
    opacity: 1;
    pointer-events: initial;
}

.scroll-inactive {
    overflow: hidden;
}

.packages-calculator-popup .package-calculator-popup-form-wrapper-svg-close {
    width: 20px;
    height: 20px;
    background-color: white;
    color: #000210;
    border-radius: 5px;
    position: absolute;
    top: 5%;
    right: 5%;
    cursor: pointer;
    z-index: 1;
    border: 1px solid #00000017;
}

@media (max-width: 500px) {
    .packages-calculator-popup .package-calculator-popup-form-wrapper-svg-close {
        width: 30px;
        height: 30px;
        top: 7%;
        right: 7%;
    }
}

.package-calculator-popup-form-wrapper {
    width: 100%;
    height: 100%;
    padding: 10% 0%;
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: start;
}

.packages-calculator-popup form {
    width: 50%;
    height: fit-content;
    background-color: white;
    border-radius: 10px;
    padding: 5%;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-items: start;
    gap: 20px;
}

@media (min-width:1025px) and (max-width:1434px) {
    .packages-calculator-popup form {
        width: 60%;
    }
}

@media (min-width:768px) and (max-width:1025px) {
    .packages-calculator-popup form {
        width: 70%;
    }
}

@media (min-width:500px) and (max-width:768px) {
    .packages-calculator-popup form {
        width: 80%;
    }
}

@media (max-width:500px) {
    .packages-calculator-popup form {
        width: 90%;
    }
}

.packages-calculator-popup form h3 {
    width: 100%;
    font-size: var(--big-font-size);
    font-family: agelast;
    margin-bottom: 20px;
}

.packages-calculator-popup form p {
    font-size: var(--small-font-size);
    margin-bottom: 30px;
}

.packages-calculator-popup form .package-calculator-form-personal-details {
    width: 100%;
    height: fit-content;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 30px;
}

@media (max-width:768px) {
    .packages-calculator-popup form .package-calculator-form-personal-details {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 50px;
        gap: 10px;
    }
}

.packages-calculator-popup form .package-calculator-form-personal-details input {
    width: 32%;
    height: fit-content;
    padding: 20px;
    border: 1px solid #00000017;
    outline: none;
    border-radius: 10px;
    font-size: var(--small-font-size);
}

@media (max-width:768px) {
    .packages-calculator-popup form .package-calculator-form-personal-details input {
        width: 100%;
    }
}

.packages-calculator-popup form .package-calculator-form-personal-details input[name="client_company_name"],
.packages-calculator-popup form .package-calculator-form-personal-details input[name="contract_start_date"] {
    width: 100%;
    margin-top: 20px;
}

@media (max-width:768px) {
    .packages-calculator-popup form .package-calculator-form-personal-details input[name="client_company_name"],
    .packages-calculator-popup form .package-calculator-form-personal-details input[name="contract_start_date"] {
        width: 100%;
        margin-top: 0px;
    }
}

.flatpickr-input {
    width: 100% !important;
    margin-top: 20px;
}

@media (max-width:768px) {
    .flatpickr-input {
        margin-top: 0px;
    }
}

.package-calculator-form-personal-details .opt-group {
    width: 48%;
    height: fit-content;
    margin-top: 20px;
    border-radius: 10px;
    position: relative;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 10px;
    background-color: #000210;
}

@media (max-width:768px) {
    .package-calculator-form-personal-details .opt-group {
        width: 100%;
        margin-top: 0px;
    }
}

.package-calculator-form-personal-details .opt-group div {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    position: absolute;
    top: 0%;
    left: 0%;
    padding: 20px;
    cursor: pointer;
}

.package-calculator-form-personal-details .opt-group div svg {
    width: auto;
    height: 100%;
    color: white;
    cursor: pointer;
}

.package-calculator-form-personal-details .opt-group div button {
    width: 50%;
    height: fit-content;
    background-color: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    color: white;
}

.package-calculator-form-personal-details .opt-group input {
    width: 100% !important;
    opacity: 0;
    cursor: pointer;
}

.packages-calculator-popup form .package-calculator-social-media-numbers-tabs-container {
    width: 100%;
    height: fit-content;
}

.packages-calculator-popup form .package-calculator-social-media-numbers-tabs-container .package-calculator-social-media-numbers-tabs-container-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.packages-calculator-popup form .package-calculator-social-media-numbers-tabs-container .package-calculator-social-media-numbers-tabs-container-header svg {
    width: 50px;
    height: 50px;
    padding: 10px;
    fill: #000210;
    border: none;
    outline: none;
    cursor: pointer;
}

.packages-calculate-social-btn-clicked {
    background-color: #000210dc;
    color: white;
    fill: white !important;
}

.packages-calculator-popup form .package-calculator-social-media-numbers-tabs-container .package-calculator-social-media-numbers-tabs-container-body {
    width: 100%;
    height: fit-content;
    margin-top: 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    display: none;
}

.website-platform-question-container {
    width: 100%;
    height: fit-content;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.website-platform-question-container h4 {
    width: 100%;
    font-size: var(--regular-font-size);
    font-family: agelast;
    padding: 20px 0px;
    border-bottom: 1px solid #00000017;
    margin-top: 50px;
    margin-bottom: 50px;
}

.website-platform-question-container .website-platform-question-container-checkboxes-container {
    width: 100%;
    height: fit-content;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 20px;
} 

.website-platform-question-container .website-platform-question-container-checkboxes-container .opt-group {
    width: fit-content;
    height: fit-content;
    display: flex;
    justify-content: center;
    align-content: center;
    gap: 10px;
    position: relative;
}

.website-platform-question-container .website-platform-question-container-checkboxes-container .opt-group input {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0%;
    left: 0%;
    opacity: 0;
    cursor: pointer;
}

.website-platform-question-container .website-platform-question-container-checkboxes-container .opt-group label {
    width: 100%;
    height: 100%;
    padding: 20px;
    border: 1px solid #00000017;
    border-radius: 10px;
    cursor: pointer;
    transition: all ease 0.5s;
}

.website-platform-question-container .website-platform-question-container-checkboxes-container .opt-group input:checked + .web-choice-label {
    background-color: #000210 !important;
    color: white;
}

.packages-calculator-platform-header-container,
.packages-calculator-essintials-header-container {
    justify-content: center !important;
    margin-bottom: 50px;
    position: relative;
}

.packages-calculator-popup form .packages-calculator-essintials-header-container svg {
    position: absolute;
    right: 0%;
}

.packages-calculator-popup form .package-calculator-social-media-numbers-tabs-container .package-calculator-social-media-numbers-tabs-container-body .number-opt-group {
    width: 100%;
    height: fit-content;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    border: 1px solid #00000017;
    outline: none;
    background-color: white;
    padding: 20px;
    border-radius: 10px;
}

.packages-calculator-popup form .package-calculator-social-media-numbers-tabs-container .package-calculator-social-media-numbers-tabs-container-body .number-opt-group label {
    color: #000210;
    font-size: var(--small-font-size);
}

.packages-calculator-popup form .package-calculator-social-media-numbers-tabs-container .package-calculator-social-media-numbers-tabs-container-body .number-opt-group input[type="number"] {
    width: 70px;
    height: fit-content;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #00000049;
    outline: none;
}

.packages-calculator-popup form .package-calculator-social-media-numbers-tabs-container .package-calculator-social-media-numbers-tabs-container-body .package-calculater-social-media-link {
    width: 100%;
    height: fit-content;
    padding: 20px;
    border: 1px solid #00000017;
    outline: none;
    border-radius: 10px;
    font-size: var(--small-font-size);
}

.packages-calculator-popup form .packages-calculator-section-header-container {
    width: 100%;
    height: fit-content;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 50px;
}

.packages-calculator-popup form .packages-calculator-section-header-container h4 {
    font-size: var(--regular-font-size);
    font-family: agelast;
    padding: 20px 0px;
    border-bottom: 1px solid #00000017;
}

.packages-calculator-popup form .packages-calculator-section-header-container svg {
    width: 20px;
    height: 20px;
    color: #000210;
    background-color: #dfdfdf;
    padding: 5px;
    border-radius: 5px;
    cursor: pointer;
    transition: all ease 0.5s;
}

.packages-calculator-expand-svg-rotate {
    transform: rotateZ(180deg) !important;
}

.packages-calculator-popup form .packages-calculator-section-body-container {
    width: 100%;
    height: 0px;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: start;
    gap: 20px;
    transition: all ease 0.5s;
}

.packages-calculator-popup form .packages-calculator-platform-section-body {
    width: 100%;
    height: fit-content !important;
    display: flex;
    justify-content: center !important; 
    align-items: stretch;
}

.packages-calculator-popup form .packages-calculator-platform-section-body .opt-group {
    width: 22%;
    position: relative;
    display: flex;
    align-items: center;
    align-content: center;
}

@media (min-width:1025px) and (max-width:1434px) {
    .packages-calculator-popup form .packages-calculator-platform-section-body .opt-group {
        width: 20%;
    }
}

@media (min-width:768px) and (max-width:1025px) {
    .packages-calculator-popup form .packages-calculator-platform-section-body .opt-group {
        width: 29%;
    }
}

@media (min-width:500px) and (max-width:768px) {
    .packages-calculator-popup form .packages-calculator-platform-section-body .opt-group {
        width: 33%;
    }
}

@media (max-width:500px) {
    .packages-calculator-popup form .packages-calculator-platform-section-body .opt-group {
        width: 45%;
    }
}

.packages-calculator-popup form .packages-calculator-platform-section-body .opt-group img {
    width: 100%;
    height: 100%;
    filter: grayscale(1);
    transition: all ease 0.5s;
    cursor: pointer;
    object-fit: cover;
    background-color: rgba(179, 179, 179, 0.199);
}

.packages-calculator-popup form .packages-calculator-platform-section-body .opt-group:hover .packages-calculator-platform-img {
    filter: grayscale(0) !important;
    background-color: white !important;
}

.packages-calculator-popup form .packages-calculator-platform-section-body .opt-group input {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0%;
    left: 0%;
    opacity: 0; /* Changed from 1 to 0 to hide the radio button */
    cursor: pointer;
    z-index: 2; /* Ensure input is above the image */
}

/* Corrected selector for checked state */

.packages-calculator-popup form .packages-calculator-platform-section-body .opt-group input:checked + .packages-calculator-platform-img {
    filter: grayscale(0) !important;
    background-color: white !important;
}

.packages-calculator-popup form .packages-calculator-platform-section-body h4 {
    width: 100%;
    font-size: var(--regular-font-size);
    font-family: agelast;
    text-align: center;
    margin-top: 50px;
    margin-bottom: 50px;
}

.packages-calculator-section-body-container-expand {
    height: fit-content !important;
}

.packages-calculator-popup form .packages-calculator-services-section-body .opt-group,
.packages-calculator-popup form .packages-calculator-essintials-section-body .opt-group,
.packages-calculator-popup form .packages-calculator-campaign-section-body .opt-group {
    width: 30%;
    height: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    border: 1px solid #00000017;
    outline: none;
    color: #000210;
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    margin-top: 20px;
}

@media (min-width:500px) and (max-width:768px) {
    .packages-calculator-popup form .packages-calculator-services-section-body .opt-group,
    .packages-calculator-popup form .packages-calculator-essintials-section-body .opt-group,
    .packages-calculator-popup form .packages-calculator-campaign-section-body .opt-group {
        width: 45%;
    }
}

@media (max-width:500px) {
    .packages-calculator-popup form .packages-calculator-services-section-body .opt-group,
    .packages-calculator-popup form .packages-calculator-essintials-section-body .opt-group,
    .packages-calculator-popup form .packages-calculator-campaign-section-body .opt-group {
        width: 45%;
    }
}

.packages-calculator-popup form .packages-calculator-services-section-body .opt-group label,
.packages-calculator-popup form .packages-calculator-essintials-section-body .opt-group label,
.packages-calculator-popup form .packages-calculator-campaign-section-body .opt-group label {
    font-size: var(--small-font-size);
}

.packages-calculator-popup form textarea {
    width: 100%;
    height: 10vw;
    padding: 20px;
    border: 1px solid #00000017;
    outline: none;
    border-radius: 10px;
    margin-top: 20px;
    font-size: var(--small-font-size);
}

@media (min-width:768px) and (max-width:1025px) {
    .packages-calculator-popup form textarea {
        height: 15vw;
    }
}

@media (min-width:500px) and (max-width:768px) {
    .packages-calculator-popup form textarea {
        height: 20vw;
    }
}

@media (max-width:500px) {
    .packages-calculator-popup form textarea {
        height: 30vw;
    }
}

.packages-calculator-popup form input[type="submit"] {
    width: fit-content;
    height: fit-content;
    padding: 20px;
    background-color: #000210;
    color: white;
    border-radius: 50px;
    transition: all ease 0.5s;
    margin-top: 30px;
    border: none;
    font-size: var(--small-font-size);
    border: 1px solid transparent;
}

.packages-calculator-popup form input[type="submit"]:hover {
    background-color: white;
    color: #000210;
    cursor: pointer;
    border: 1px solid #000210;
}

.package-calculator-visible {
    display: flex !important;
}




/* ================================================ FOOTER =================================================== */




footer {
    width: 100%;
    height: fit-content;
    position: relative;
    padding-top: 100px;
}

footer::before {
    content: '';
    width: 100%;
    height: 150px;
    position: absolute;
    bottom: calc(100% - 75px);
    left: 0%;
    background-image: linear-gradient(0deg, transparent, #000210,transparent);
    z-index: 50;
}

footer video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0%;
    left: 0%;
    object-fit: cover;
    filter: brightness(50%);
    pointer-events: none;
}

footer .footer-upper {
    width: 100%;
    height: fit-content;
    position: relative;
}

@media  (max-width:768px) {
    footer .footer-upper {
        padding-left: 5%;
    }
}

footer .footer-upper h2 {
    width: 100%;
    font-size: var(--big-font-size);
    color: white;
    position: relative;
    text-align: center;
} 

@media (max-width:768px) {
    footer .footer-upper h2 {
        text-align: start;
    }
}

footer .footer-upper p {
    width: 100%;
    font-size: var(--intermediate-font-size);
    color: white;
    position: relative;
    text-align: center;
    margin-top: 10px;
} 

@media (min-width:768px) and (max-width:1025px) {
    footer .footer-upper p {
        padding: 0% 10%;
        text-align: center;
    }
}

@media  (max-width:768px) {
    footer .footer-upper p {
        text-align: start;
    }
}

footer .footer-upper .footer-action-btns-container {
    width: 100%;
    height: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    margin-top: 30px;
}


@media (max-width:768px) {
    footer .footer-upper .footer-action-btns-container {
        flex-direction: column;
        align-items: start;
    }
}

footer .footer-upper .footer-action-btns-container a {
    width: fit-content;
    height: fit-content;
    padding: 20px 30px;
    background-color: #000210;
    color: white;
    border: 1px solid white;
    border-radius: 50px;
    transition: all ease 0.5s;
    font-size: var(--small-font-size);
}

footer .footer-upper .footer-action-btns-container a:hover {
    background-color: white;
    color: #000210;
}

footer .footer-downer {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    margin-top: 50px;
    padding: 5%;
    position: relative;
}

@media (min-width:768px) and (max-width:1025px) {
    footer .footer-downer {
        flex-wrap: wrap;
    }
}

@media  (max-width:768px) {
    footer .footer-downer {
        flex-direction: column;
        padding-left: 5%;
        padding-bottom: 10%;
    }
}

footer .footer-downer::before {
    content: '';
    width: 70%;
    height: 1px;
    background-color: #dfdfdf67;
    position: absolute;
    top: 0%;
    right: 15%;
    z-index: 1;
}

@media  (max-width:768px) {
    footer .footer-downer::before {
        left: 5%;
    }
}

footer .footer-downer .f-d-col-1 {
    width: 30%;
}

@media (min-width:768px) and (max-width:1025px) {
    footer .footer-downer .f-d-col-1 {
        width: 100%;
        margin-bottom: 5vw;
    }
}

@media  (max-width:768px) {
    footer .footer-downer .f-d-col-1 {
        width: 100%;
    }
}

footer .footer-downer .f-d-col-1 h3 {
    font-size: var(--medium-font-size);
    color: white;
}

footer .footer-downer .f-d-col-2 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    list-style: none;
    padding: 10px 0%;
}

@media (min-width:768px) and (max-width:1025px) {
    footer .footer-downer .f-d-col-2 {
        width: 49%;
        margin-bottom: 50px;
    }
}

@media  (max-width:768px) {
    footer .footer-downer .f-d-col-2 {
        width: 100%;
        margin-top: 50px;
    }
}

footer .footer-downer .f-d-col-2 li {
    color: white;
    font-size: var(--small-font-size);
}

footer .footer-downer .f-d-col-2 li a {
    color: white;
    text-underline-offset: 7px;
}

footer .footer-downer .f-d-col-3 {
    display: flex;
    flex-direction: column;
    gap: 20px;
    list-style: none;
    padding: 10px 0%;
}

@media (min-width:768px) and (max-width:1025px) {
    footer .footer-downer .f-d-col-3 {
        width: 20%;
        margin-bottom: 50px;
    }
}

@media  (max-width:768px) {
    footer .footer-downer .f-d-col-3 {
        width: 100%;
        margin-top: 50px;
    }
}

footer .footer-downer .f-d-col-3 a {
    color: white;
    font-size: var(--small-font-size);
    text-underline-offset: 7px;
}

footer .footer-downer .f-d-col-4 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    list-style: none;
    padding: 10px 0%;
}

@media  (max-width:768px) {
    footer .footer-downer .f-d-col-4 {
        width: 100%;
        margin-top: 50px;
    }
}

footer .footer-downer .f-d-col-4 p {
    color: white;
    font-size: var(--small-font-size);
}

footer .footer-downer .f-d-col-4 span {
    color: white;
    font-size: var(--intermediate-font-size);
}

footer .footer-downer .f-d-col-4 .footer-socials {
    width: 100%;
    height: fit-content;
    display: flex;
    justify-content: start;
    align-self: center;
    gap: 20px;
}

footer .footer-downer .f-d-col-4 .footer-socials a svg {
    width: 40px;
    height: 40px;
    color: white;
    fill: white;
}



/* ============================================== PROJECTS PAGE ============================================== */



.projects-body {
    width: 100%;
    height: fit-content;
    background-color: #000210;
}

.projects-body section {
    width: 100%;
    height: fit-content;
    padding: var(--general-vertical-padding) var(--general-horizental-padding);
}

.projects-intro-pseudo-background {
    width: 100%;
    height: 50vh;
    position: absolute;
    top: 0%;
    left: 0%;
    background-image: url(./pics/projects_intro.jpg);
    background-size: cover;
    background-color: rgba(0, 0, 0, 0.568);
    background-blend-mode: color-burn;
}

.projects-intro-pseudo-background::after {
    content: '';
    width: 100%;
    height: 100px;
    position: absolute;
    bottom: 0%;
    left: 0%;
    background-image: linear-gradient(0deg,#000210,transparent);
}

.projects-body section .projects-intro {
    width: 100%;
    height: fit-content;
    display: flex;
    justify-content: start;
    align-items: center;
    background-attachment: fixed;
    position: relative;
}

.projects-body section .projects-intro .projects-intro-dets {
    width: 60%;
    height: fit-content;
}

@media (max-width:1025px) {
    .projects-body section .projects-intro .projects-intro-dets {
        width: 90%;
    }
}

.projects-body section .projects-intro  .projects-intro-dets h1 {
    color: white;
    font-size: var(--huge-font-size);
}

.projects-body section .projects-intro  .projects-intro-dets h2 {
    color: white;
    font-size: var(--intermediate-font-size);
    margin-top: 20px;
}

.projects-body section .projects-intro  .projects-intro-dets p {
    color: white;
    margin-top: 30px;
    font-size: var(--small-font-size);
}

.projects-body section .projects-gallery-container {
    width: 100%;
    height: fit-content;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-items: start;
    column-gap: 10px;
    row-gap: 10px;
    position: relative;
    margin-top: 10vw;
}

.projects-body section .projects-gallery-container .project-gallery-item {
    width: calc(25% - 10px);
    height: 40vw;
    position: relative;
    cursor: pointer;
    border-radius: 10px;
    overflow: hidden;
    z-index: 13;
}

@media (min-width:768px) and (max-width:1025px) {
    .projects-body section .projects-gallery-container .project-gallery-item {
        width: 32%;
        height: 50vw;
    }
}

@media (min-width:500px) and (max-width:768px) {
    .projects-body section .projects-gallery-container .project-gallery-item {
        width: 45%;
        height: 80vw;
    }
}

@media (max-width:500px) {
    .projects-body section .projects-gallery-container .project-gallery-item {
        width: 48%;
        height: 90vw;
    }
}

.projects-body section .projects-gallery-container .project-gallery-item img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0%;
    left: 0%;
    object-fit: cover;
    filter: grayscale(1);
    transition: all linear 0.5s;
}

.project-gallery-item:hover .project-gallery-item-img {
    filter: grayscale(0) !important;
}

.projects-body section .projects-gallery-container .project-gallery-item .project-gallery-item-dets {
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0);
    position: absolute;
    bottom: -100%;
    left: 0%;
    padding: 10%;
    backdrop-filter: blur(50px);
    transition: all ease 0.5s;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.project-gallery-item:hover .project-gallery-item-dets {
    bottom: 0% !important;
}

.projects-body section .projects-gallery-container .project-gallery-item .project-gallery-item-dets h3 {
    color: white;
    font-size: var(--regular-font-size);
}

.project-gallery-item:hover .project-gallery-item-dets p {
    font-size: var(--small-font-size);
    color: white;
    margin-top: 20px;
}

.projects-body section .projects-gallery-container .project-gallery-item .project-gallery-item-dets a {
    width: 50%;
    height: fit-content;
    display: block;
    text-align: center;
    color: #000210;
    background-color: white;
    padding: 20px;
    text-decoration: none;
    margin-top: 10px;
    transition: all ease 0.5s;
    position: relative;
    margin-left: 7%;
    font-size: var(--small-font-size);
}

.projects-body section .projects-gallery-container .project-gallery-item .project-gallery-item-dets a:hover {
    margin-left: 0%;
}

.projects-body section .projects-gallery-container .project-gallery-item .project-gallery-item-dets a::before {
    content: '';
    width: 2px;
    height: 105%; 
    position: absolute;
    top: -2.5%;
    left: -10%;
    background-color: #000210;
    transition: all ease 0.5s;
}

.projects-body section .projects-gallery-container .project-gallery-item .project-gallery-item-dets a:hover::before {
    width: 100%;
    left: 0%;
}

.projects-body footer {
    background-color: #000210;
}

.projects-body section .projects-gallery-container .project-gallery-item .project-gallery-item-dets a span {
    position: relative;
    z-index: 10;
    transition: all ease 0.5s;
    font-size: var(--small-font-size);
}

.projects-body section .projects-gallery-container .project-gallery-item .project-gallery-item-dets a:hover .project-gallery-item-dets-a-span {
    color: white !important;
}




/* ============================================== SERVICES PAGE ============================================== */




.services-body {
    width: 100%;
    height: fit-content;
    background-color: #000210;
}

.services-body section {
    width: 100%;
    height: fit-content;
    padding: var(--general-vertical-padding) var(--general-horizental-padding);
}

.services-intro-pseudo-background {
    width: 100%;
    height: 50vh;
    position: absolute;
    top: 0%;
    left: 0%;
    background-image: url(./pics/services_intro.jpg);
    background-size: cover;
    background-color: rgba(0, 0, 0, 0.377);
    background-blend-mode: color-burn;
}

.services-intro-pseudo-background::after {
    content: '';
    width: 100%;
    height: 100px;
    position: absolute;
    bottom: 0%;
    left: 0%;
    background-image: linear-gradient(0deg,#000210,transparent);
}

.services-body section .services-intro {
    width: 100%;
    height: fit-content;
    background-attachment: fixed;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.services-body section .services-intro .services-intro-dets {
    width: 60%;
    height: fit-content;
    text-align: center;
}

@media (min-width:768px) and (max-width:1025px) {
    .services-body section .services-intro .services-intro-dets {
        width: 90%;
    }
}

@media (min-width:500px) and (max-width:768px) {
    .services-body section .services-intro .services-intro-dets {
        width: 90%;
    }
}

@media (max-width:500px) {
    .services-body section .services-intro .services-intro-dets {
        width: 100%;
    }
}

.services-body section .services-intro  .services-intro-dets h1 {
    color: white;
    font-size: var(--big-font-size);
}

.services-body section .services-intro  .services-intro-dets h2 {
    color: white;
    font-size: var(--intermediate-font-size);
    margin-top: 20px;
}

.services-body section .services-intro  .services-intro-dets p {
    color: white;
    margin-top: 30px;
    font-size: var(--small-font-size);
}

.services-body section .services-gallery-container {
    width: 100%;
    height: fit-content;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: start;
    align-items: start;
    gap: 10px;
    margin-top: 10vw;
    position: relative;
}

.services-body section .services-gallery-container .service-gallery-item {
    width: 48%;
    height: fit-content;
    background-color: rgba(49, 44, 44, 0.13);
    backdrop-filter: blur(50px);
    transition: all ease 0.3s;
    overflow: hidden;
    cursor: pointer;
    border-radius: 10px;
    position: relative;
    z-index: 10;
    border: 1px solid rgba(255, 255, 255, 0.233);
}


@media (max-width:1025px) {
    .services-body section .services-gallery-container .service-gallery-item {
        width: 100%;
    }
}

.services-body section .services-gallery-container .service-gallery-item-header {
    width: 100%;
    height: fit-content;
    padding: 20px;
}

.services-body section .services-gallery-container .service-gallery-item .service-gallery-item-header span {
    font-size: var(--regular-font-size);
    color: white;
}

.services-body section .services-gallery-container .service-gallery-item .service-gallery-item-header h3 {
    font-size: var(--intermediate-font-size);
    color: white;
}

.services-body section .services-gallery-container .service-gallery-item .service-gallery-item-body {
    width: 100%;
    height: 0px;
    padding: 0px 20px;
    /* transition: all linear 0.5s; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.service-self-expand-active {
    height: fit-content !important;
    padding-bottom: 50px !important;
}

.services-body section .services-gallery-container .service-gallery-item .service-gallery-item-body p {
    color: white;
    font-size: var(--small-font-size);
}

.services-body section .services-gallery-container .service-gallery-item .service-gallery-item-body .service-gallery-item-body-tags-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}

.services-body section .services-gallery-container .service-gallery-item .service-gallery-item-body .service-gallery-item-body-tags-container span {
    background-color: white;
    color: #000210;
    border: 1px solid #000210;
    border-radius: 50px;
    padding: 20px;
    font-size: var(--small-font-size);
}

.services-body section .services-gallery-container .service-gallery-item .service-gallery-item-body a {
    width: fit-content;
    height: fit-content;
    display: block;
    background-color: #000210;
    color: white;
    border: 1px solid white;
    border-radius: 50px;
    padding: 20px;
    margin-top: 20px;
    text-decoration: none;
    transition: all ease 0.5s;
    font-size: var(--small-font-size);
}

.services-body section .services-gallery-container .service-gallery-item .service-gallery-item-body a:hover {
    background-color: white;
    color: #000210;
}




/* ============================================== CAREERS PAGE ============================================== */




.careers-body {
    width: 100%;
    height: fit-content;
    background-color: #000210;
}

.careers-body section {
    width: 100%;
    height: fit-content;
    position: relative;
    padding: var(--general-vertical-padding) var(--general-horizental-padding);
}

.careers-body section .careers-intro-pseudo-background {
    width: 100%;
    height: 50vh;
    position: absolute;
    top: 0%;
    left: 0%;
    background-image: url(./pics/careers_intro.jpg);
    background-size: cover;
    background-color: rgba(0, 0, 0, 0.377);
    background-blend-mode: color-burn;
}

.careers-body section .careers-intro-pseudo-background::after {
    content: '';
    width: 100%;
    height: 100px;
    position: absolute;
    bottom: 0%;
    left: 0%;
    background-image: linear-gradient(0deg,#000210,transparent);
}

.careers-body section .careers-intro {
    width: 100%;
    height: fit-content;
    background-attachment: fixed;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.careers-body section .careers-intro .careers-intro-dets {
    width: 60%;
    height: fit-content;
    text-align: center;
    position: relative;
}

@media (max-width:1025px) {
    .careers-body section .careers-intro .careers-intro-dets {
        width: 90%;
    }
}

.careers-body section .careers-intro  .careers-intro-dets h1 {
    color: white;
    font-size: var(--huge-font-size);
}

.careers-body section .careers-intro  .careers-intro-dets h2 {
    color: white;
    font-size: var(--regular-font-size);
    margin-top: 20px;
}

.careers-body section .careers-intro  .careers-intro-dets p {
    color: white;
    margin-top: 30px;
    font-size: var(--small-font-size);
}

.careers-body section .careers-gallery-container {
    width: 100%;
    height: fit-content;
    margin-top: 10vw;
}

.careers-body section .careers-gallery-container .career-gallery-item {
    width: 100%;
    height: 45vw;
    display: flex;
    justify-content: start;
    align-items: stretch;
    position: relative;
    z-index: 10;
    margin-bottom: 50px;
}

@media (min-width:1025px) and (max-width:1434px) {
    .careers-body section .careers-gallery-container .career-gallery-item {
        height: 45vw;
        margin-bottom: 50px;
    }
}

@media (min-width:768px) and (max-width:1025px) {
    .careers-body section .careers-gallery-container .career-gallery-item {
        height: 53vw;
        margin-bottom: 50px;
    }
}

@media (min-width:500px) and (max-width:768px) {
    .careers-body section .careers-gallery-container .career-gallery-item {
        height: 95vw;
        margin-bottom: 50px;
        border-radius: 36px;
        overflow: hidden;
    }
}

@media (max-width:500px) {
    .careers-body section .careers-gallery-container .career-gallery-item {
        height: 125vw;
        margin-bottom: 50px;
        border-radius: 36px;
        overflow: hidden;
    }
}

.careers-body section .careers-gallery-container .career-gallery-item:nth-child(even) {
    flex-direction: row-reverse;
}

@media (min-width:500px) and (max-width:768px) {
    .careers-body section .careers-gallery-container .career-gallery-item:nth-child(even) {
        justify-content: end;
    }
}

.careers-body section .careers-gallery-container .career-gallery-item img {
    width: 40%;
    border-radius: 36px;
}

@media (min-width:500px) and (max-width:768px) {
    .careers-body section .careers-gallery-container .career-gallery-item img {
        width: 100%;
    }
}

@media (max-width:500px) {
    .careers-body section .careers-gallery-container .career-gallery-item img {
        width: 100%;
    }
}

.careers-body section .careers-gallery-container .career-gallery-item .career-gallery-item-txt {
    width: 60%;
    padding: 0% 5%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
}

@media (min-width:500px) and (max-width:768px) {
    .careers-body section .careers-gallery-container .career-gallery-item:nth-child(odd) .career-gallery-item-txt {
        width: 70%;
        height: 100%;
        position: absolute;
        top: 0%;
        right: 0%;
        backdrop-filter: blur(10px);
        padding: 5%;
    }
}

@media (min-width:500px) and (max-width:768px) {
    .careers-body section .careers-gallery-container .career-gallery-item:nth-child(even) .career-gallery-item-txt {
        width: 70%;
        height: 100%;
        position: absolute;
        top: 0%;
        left: 0%;
        backdrop-filter: blur(10px);
        padding: 5%;
    }
}

@media (max-width:500px) {
    .careers-body section .careers-gallery-container .career-gallery-item .career-gallery-item-txt {
        width: 100%;
        height: fit-content;
        position: absolute;
        bottom: 0%;
        left: 0%;
        backdrop-filter: blur(10px);
        padding: 5%;
    }
}

.careers-body section .careers-gallery-container .career-gallery-item .career-gallery-item-txt h3 {
    font-size: var(--big-font-size);
    color: white;
}

.careers-body section .careers-gallery-container .career-gallery-item .career-gallery-item-txt p {
    font-size: var(--small-font-size);
    color: white;
}

@media (max-width:500px) {
    .careers-body section .careers-gallery-container .career-gallery-item .career-gallery-item-txt p {
        margin-top: 20px;
    }
}

.careers-body section .careers-gallery-container .career-gallery-item .career-gallery-item-txt span {
    font-size: var(--small-font-size);
    color: red;
}

@media (max-width:500px) {
    .careers-body section .careers-gallery-container .career-gallery-item .career-gallery-item-txt span {
        margin-top: 20px;
    }
}

.careers-body section .careers-gallery-container .career-gallery-item .career-gallery-item-txt button,
.careers-body section .careers-gallery-container .career-gallery-item .career-gallery-item-txt a {
    width: fit-content;
    height: fit-content;
    display: block;
    background-color: #000210;
    color: white;
    border: 1px solid white;
    border-radius: 50px;
    padding: 20px;
    text-decoration: none;
    transition: all ease 0.5s;
    cursor: pointer;
    font-size: var(--small-font-size);
}

@media (max-width:500px) {
    .careers-body section .careers-gallery-container .career-gallery-item .career-gallery-item-txt button,
    .careers-body section .careers-gallery-container .career-gallery-item .career-gallery-item-txt a {
        margin-top: 20px;
    }
}

.careers-body section .careers-gallery-container .career-gallery-item .career-gallery-item-txt button:hover,
.careers-body section .careers-gallery-container .career-gallery-item .career-gallery-item-txt a:hover {
    background-color: white;
    color: #000210;
}

.vacancies-table-anchor {
    width: 50px;
    height: 50px;
    background-color: red;
    position: absolute;
    bottom: calc(100% + 150px);
    left: 0%;
    opacity: 0;
    pointer-events: none;
}

.careers-body section .careers-gallery-job-vacancies {
    width: 100%;
    height: fit-content;
    position: relative;
    z-index: 10;
    margin-top: 100px;
}

.careers-body section .careers-gallery-job-vacancies .careers-gallery-job-vacancies-header {
    width: 100%;
    height: fit-content;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.careers-body section .careers-gallery-job-vacancies .careers-gallery-job-vacancies-header h3 {
    color: white;
    font-size: var(--regular-font-size);
}

.careers-body section .careers-gallery-job-vacancies .careers-gallery-job-vacancies-header svg {
    width: 20px;
    height: 20px;
    color: white;
    transition: all ease 0.5s;
}

.job-vacancies-header-rotate {
    transform: rotateZ(-180deg);
}

.careers-body section .careers-gallery-job-vacancies .careers-gallery-job-vacancies-body {
    width: 100%;
    height: 0px;
    overflow: hidden;
    transition: all ease 0.5s;
    border-bottom: 1px solid white;
}

.job-vacancies-expand {
    height: fit-content !important;
    padding-top: 50px !important;
    padding-bottom: 50px !important;
}

.careers-body section .careers-gallery-job-vacancies .careers-gallery-job-vacancies-body ul li {
    width: 100%;
    height: fit-content;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0px;
    background-color: rgba(255, 255, 255, 0.116);
}

.careers-body section .careers-gallery-job-vacancies .careers-gallery-job-vacancies-body ul li:nth-child(even) {
    background-color: transparent;
}

.careers-body section .careers-gallery-job-vacancies .careers-gallery-job-vacancies-body ul li span {
    font-size: var(--small-font-size);
    color: white;
}

.careers-body section .careers-gallery-job-vacancies .careers-gallery-job-vacancies-body ul li button {
    font-size: var(--small-font-size);
    transition: all ease 0.5s;
    color: white;
    background-color: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    text-decoration: underline;
}

.careers-body section .careers-gallery-job-vacancies .careers-gallery-job-vacancies-body ul li button:hover {
    color: rebeccapurple;
}

.careers-no-job-vacancies-to-apply-to {
    width: 100%;
    height: fit-content;
    text-align: center;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.151);
    color: white;
    font-size: var(--small-font-size);
}



/* ============================================== JOB APPLY PAGE ============================================== */




.job-apply-contact-body {
    width: 100%;
    height: fit-content;
    background-color: #000210;
}

.job-apply-contact-body section {
    width: 100%;
    height: fit-content;
    padding: 10% 0%;
    padding-top: 3%;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (min-width:768px) and (max-width:1025px) {
    .job-apply-contact-body section {
        padding: 20% 0%;
    }
}

@media (min-width:500px) and (max-width:768px) {
    .job-apply-contact-body section {
        padding: 25% 0%;
    }
}

@media (max-width:500px) {
    .job-apply-contact-body section {
        padding: 40% 0%;
    }
}

.job-apply-contact-body section form {
    width: 50%;
    height: fit-content;
    padding: 5%;
}

@media (min-width:1025px) and (max-width:1434px) {
    .job-apply-contact-body section form {
        width: 60% !important;
    }
}

@media (min-width:768px) and (max-width:1025px) {
    .job-apply-contact-body section form {
        width: 70% !important;
    }
}

@media (min-width:500px) and (max-width:768px) {
    .job-apply-contact-body section form {
        width: 80% !important;
    }
}

@media (max-width:500px) {
    .job-apply-contact-body section form {
        width: 90% !important;
    }
}

.job-apply-contact-body section .job-apply-contact-back-btn {
    width: fit-content;
    height: fit-content;
    position: absolute;
    top: 5%;
    left: 5%;
    background-color: #000210;
    padding: 10px 0px;
    border: 1px solid white;
    border-radius: 10px;
    overflow: hidden;
}

.job-apply-contact-body section .job-apply-contact-back-btn svg {
    width: 20px;
    height: 20px;
    color: white;
}

.job-apply-contact-body section form {
    width: 40%;
    height: fit-content;
    padding: 5%;
    border-radius: 10px;
    overflow: hidden;
    background-image: linear-gradient(30deg,#1f354165,#56113956);
    backdrop-filter: blur(50px);
    text-align: center;
}

.job-apply-contact-body section form .job-apply-contact-form-sec-1 {
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
}

.job-apply-contact-body section form .job-apply-contact-form-sec-1 h4 {
    font-size: var(--big-font-size);
    color: white;
}

.job-apply-contact-body section form .job-apply-contact-form-sec-1 p {
    font-size: var(--small-font-size);
    margin-top: 20px;
    color: white;
}

.job-apply-contact-body section form .job-apply-contact-form-sec-1 ul {
    list-style: inside;
    margin-top: 30px;
    color: white;
}

.job-apply-contact-body section form .job-apply-contact-form-sec-1 ul span {
    font-size: var(--intermediate-font-size);
}

.job-apply-contact-body section form .job-apply-contact-form-sec-1 ul li {
    margin-top: 10px;
    color: white;
    font-size: var(--small-font-size);
}

.job-apply-contact-body section form .job-apply-contact-form-sec-1 ul {
    margin-bottom: 30px;
}

.job-apply-contact-body section form .job-apply-contact-form-sec-1 .job-apply-contact-form-dets-sec {
    width: 100%;
    height: fit-content;
    margin-bottom: 30px;
}

.job-apply-contact-body section form .job-apply-contact-form-sec-1 .job-apply-contact-form-dets-sec .job-apply-contact-form-dets-sec-header {
    width: 100%;
    height: fit-content;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.192);
}

.job-apply-contact-body section form .job-apply-contact-form-sec-1 .job-apply-contact-form-dets-sec .job-apply-contact-form-dets-sec-header p {
    font-size: var(--intermediate-font-size);
    margin-top: 0px;
}

.job-apply-contact-body section form .job-apply-contact-form-sec-1 .job-apply-contact-form-dets-sec .job-apply-contact-form-dets-sec-header svg {
    width: 20px;
    height: 20px;
    color: white;
}

.job-apply-contact-body section form .job-apply-contact-form-sec-1 .job-apply-contact-form-dets-sec .job-apply-contact-form-dets-sec-body {
    width: 100%;
    height: 0px;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-items: start;
    align-content: start;
    gap: 10px;
    transition: all ease 0.5s;
    text-align: center;
}

.job-apply-contact-body section form .job-apply-contact-form-sec-1 .job-apply-contact-form-dets-sec .job-apply-contact-form-dets-sec-body input {
    width: 45%;
    height: fit-content;
    border-radius: 10px;
    padding: 20px;
    border: 1px solid rgba(0, 0, 0, 0.13);
    outline: none;
    background-color: rgba(255, 255, 255, 0.192);
    color: white;
    font-size: var(--small-font-size);
}

@media (max-width:768px) {
    .job-apply-contact-body section form .job-apply-contact-form-sec-1 .job-apply-contact-form-dets-sec .job-apply-contact-form-dets-sec-body input {
        width: 100%;
    }
}

.job-apply-contact-body section form .job-apply-contact-form-sec-1 .job-apply-contact-form-dets-sec .job-apply-contact-form-dets-sec-body input::placeholder {
    color: white;
}

.job-apply-contact-body section form .job-apply-contact-form-sec-1 select {
    width: 45%;
    height: fit-content;
    border-radius: 5px;
    padding: 20px;
    border: 1px solid rgba(0, 0, 0, 0.13);
    outline: none;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.192);
    color: white;
    font-size: var(--small-font-size);
}

@media (max-width:768px) {
    .job-apply-contact-body section form .job-apply-contact-form-sec-1 select {
        width: 100%;
    }
}

.job-apply-contact-body section form .job-apply-contact-form-sec-1 select option {
    color: black;
    font-size: var(--small-font-size);
}

.job-apply-contact-body section form .job-apply-contact-form-sec-1 .opt-group {
    width: fit-content;
    height: fit-content;
    position: relative;
    cursor: pointer;
    display: block;
}

.job-apply-contact-body section form .job-apply-contact-form-sec-1 .opt-group button {
    width: 100%;
    height: fit-content;
    padding: 20px;
    border-radius: 10px;
    outline: none;
    border: 1px solid rgba(0, 0, 0, 0.13);
    font-size: var(--small-font-size);
}

.job-apply-contact-body section form .job-apply-contact-form-sec-1 input[type="file"] {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0%;
    left: 0%;
    opacity: 0;
    background-color: transparent;
    cursor: pointer;
}

.job-apply-contact-body section form .job-apply-contact-form-sec-1 input[type="submit"] {
    width: fit-content;
    height: fit-content;
    background-color: transparent;
    color: white;
    border: 1px solid white;
    padding: 20px;
    outline: none;
    margin-top: 30px;
    border-radius: 10px;
    cursor: pointer;
    transition: all ease 0.5s;
    font-size: var(--small-font-size);
}

.job-apply-contact-body section form .job-apply-contact-form-sec-1 input[type="submit"]:hover {
    background-color: white;
    color: #000210;
}

.job-apply-contact-form-dets-expand {
    height: 10vw !important;
    margin-top: 10px !important;
}

@media (min-width:768px) and (max-width:1025px) {
    .job-apply-contact-form-dets-expand {
        height: 20vw !important;
    }
}

@media (min-width:500px) and (max-width:768px) {
    .job-apply-contact-form-dets-expand {
        height: 50vw !important;
    }
}

@media (max-width:500px) {
    .job-apply-contact-form-dets-expand {
        height: 65vw !important;
    }
}





/* ============================================== SERVICE CHOOSE CONTACT PAGE ============================================== */





.service-choose-contact-body {
    width: 100%;
    min-height: 100vh;
    background-color: #000210;
    position: relative;
}

.service-choose-contact-body section {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    padding: 10% 0%;
}

@media (min-width:768px) and (max-width:1025px) {
    .service-choose-contact-body section {
        padding: 15% 0%;
    }
}

@media (min-width:500px) and (max-width:768px) {
    .service-choose-contact-body section {
        padding: 25% 7%;
    }
}

@media (max-width:500px) {
    .service-choose-contact-body section {
        padding: 35% 7%;
    }
}

.service-choose-contact-body section .service-choose-contact-back-btn {
    width: fit-content;
    height: fit-content;
    position: absolute;
    top: 5%;
    left: 5%;
    background-color: #000210;
    padding: 10px 0px;
    padding-top: 14px;
    border: 1px solid white;
    border-radius: 10px;
    overflow: hidden;
}

.service-choose-contact-body section .service-choose-contact-back-btn svg {
    width: 20px;
    height: 20px;
    color: white;
}

.service-choose-contact-body section form {
    width: 90%;
    height: fit-content;
    background-color: white;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: stretch;
    border: 1px solid white;
    border-radius: 10px;
    overflow: hidden;
}

@media (min-width:768px) and (max-width:1025px) {
    .service-choose-contact-body section form {
        width: 90%;
    }
}

@media (min-width:500px) and (max-width:768px) {
    .service-choose-contact-body section form {
        width: 100%;
        flex-direction: column;
    }
}

@media (max-width:500px) {
    .service-choose-contact-body section form {
        width: 100%;
        flex-direction: column;
    }
}

.service-choose-contact-body section form .service-choose-contact-form-sec-1 {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
    gap: 20px;
    position: relative;
    padding: 5%;
    padding-left: 7%;
}

@media (min-width:768px) and (max-width:1025px) {
    .service-choose-contact-body section form .service-choose-contact-form-sec-1 {
        justify-content: start;
        gap: 50px;
    }
}

@media (min-width:500px) and (max-width:768px) {
    .service-choose-contact-body section form .service-choose-contact-form-sec-1 {
        width: 100%;
        padding: 15% 10%;
    }
}

@media (max-width:500px) {
    .service-choose-contact-body section form .service-choose-contact-form-sec-1 {
        width: 100%;
        padding: 15% 10%;
    }
}

.service-choose-contact-form-sec-1::before {
    content: '';
    width: 100%;
    height: 100%;
    background-color: #000210;
    position: absolute;
    top: 0%;
    left: 0%;
    transition: all ease 0.5s;
}

.service-choose-contact-body section form .service-choose-contact-form-sec-1 h1 {
    font-size: var(--big-font-size);
    font-family: agelast;
    color: white;
    transition: all ease 0.5s;
    z-index: 50;
    font-weight: bolder;
}

@media (min-width:500px) and (max-width:768px) {
    .service-choose-contact-body section form .service-choose-contact-form-sec-1 h1 {
        margin-bottom: 50px;
    }
}

@media (max-width:500px) {
    .service-choose-contact-body section form .service-choose-contact-form-sec-1 h1 {
        margin-bottom: 50px;
    }
}

@media (min-width:768px) {
    .service-choose-contact-form-sec-1-mobile-header {
        display: none;
    }
}

@media (max-width:768px) {
    .service-choose-contact-body section form .service-choose-contact-form-sec-1 .service-choose-contact-form-sec-1-header {
        display: none;
    }
}

.service-choose-contact-body section .service-choose-contact-form-header span:not(:first-child) {
    margin-left: 2%;
    color: #000210;
}

.service-choose-contact-form-sec-1:hover .service-choose-contact-form-sec-1-header {
    color: #000210;
}

.service-choose-contact-form-sec-1:hover .service-choose-contact-form-sec-1-mobile-header {
    color: #000210;
}

.service-choose-contact-body section form .service-choose-contact-form-sec-1 input {
    width: 140%;
    height: fit-content;
    padding: 20px;
    border: 1px solid rgba(0, 0, 0, 0.137);
    border-radius: 10px;
    z-index: 50;
    outline: none;
    font-size: var(--small-font-size);
}

@media (max-width:768px) {
    .service-choose-contact-body section form .service-choose-contact-form-sec-1 input {
        width: 100%;
    }
}

.service-choose-contact-body section form .service-choose-contact-form-sec-1 textarea {
    width: 140%;
    height: 10vw;
    padding: 20px;
    border: 1px solid rgba(0, 0, 0, 0.137);
    border-radius: 10px;
    z-index: 50;
    outline: none;
    font-size: var(--small-font-size);
}

@media (min-width:500px) and (max-width:768px) {
    .service-choose-contact-body section form .service-choose-contact-form-sec-1 textarea {
        width: 100%;
        height: 15vw;
    }
}

@media (max-width:500px) {
    .service-choose-contact-body section form .service-choose-contact-form-sec-1 textarea {
        width: 100%;
        height: 15vw;
    }
}

.service-choose-contact-form-sec-1:hover::before {
    width: 200% !important;
    left: 100% !important;
}

@media (min-width:500px) and (max-width:768px) {
    .service-choose-contact-form-sec-1:hover::before {
        height: 150% !important;
        left: 0% !important;
        top: 100% !important;
    }
}

@media (max-width:500px) {
    .service-choose-contact-form-sec-1:hover::before {
        height: 150% !important;
        left: 0% !important;
        top: 100% !important;
    }
}

.service-choose-contact-body section form .service-choose-contact-form-sec-2 {
    width: 60%;
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    padding: 5%;
    padding-left: 10%;
}

@media (min-width:500px) and (max-width:768px) {
    .service-choose-contact-body section form .service-choose-contact-form-sec-2 {
        width: 100%;
        padding: 10%;
    }
}

@media (max-width:500px) {
    .service-choose-contact-body section form .service-choose-contact-form-sec-2 {
        width: 100%;
        padding: 10%;
    }
}

.service-choose-contact-body section form .service-choose-contact-form-sec-2 h1 {
    font-size: var(--big-font-size);
    font-family: agelast;
    color: #000210;
    transition: all ease 0.5s;
    z-index: 50;
    font-weight: bolder;
}

@media (max-width:768px) {
    .service-choose-contact-body section form .service-choose-contact-form-sec-2 .service-choose-contact-form-sec-2-header {
        display: none;
    }
}

.service-choose-contact-body section form .service-choose-contact-form-sec-2 p {
    font-size: var(--small-font-size);
    text-align: center;
    z-index: 50;
    transition: all ease 0.5s;
    margin-top: 10%;
}

.service-choose-contact-body section form .service-choose-contact-form-sec-2 .service-choose-contact-socials {
    width: 100%;
    height: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin-top: 10%;
    z-index: 50;
}

.service-choose-contact-body section form .service-choose-contact-form-sec-2 .service-choose-contact-socials a {
    width: 50px;
    height: 50px;
}

@media (max-width:1025px) {
    .service-choose-contact-body section form .service-choose-contact-form-sec-2 .service-choose-contact-socials a {
        width: 50px;
        height: 50px;
    }
}

.service-choose-contact-body section form .service-choose-contact-form-sec-2 .service-choose-contact-socials a svg {
    width: 100%;
    height: 100%;
    color: #000210;
    transition: all ease 0.5s;
}

.service-choose-contact-body section form .service-choose-contact-form-sec-2 input {
    width: fit-content;
    height: fit-content;
    padding: 20px;
    border-radius: 10px;
    margin-top: 10%;
    z-index: 50;
    transition: all ease 0.5s;
    cursor: pointer;
    background-color: white;
    color: #000210;
    border: 1px solid #000210;
    font-size: var(--small-font-size);
}

.service-choose-contact-form-header:hover ~ .service-choose-contact-form-sec-2 .service-choose-contact-form-sec-2-header,
.service-choose-contact-form-sec-1:hover ~ .service-choose-contact-form-sec-2 .service-choose-contact-form-sec-2-header,
.service-choose-contact-form-header:hover ~ .service-choose-contact-form-sec-2 .service-choose-contact-form-sec-2-p,
.service-choose-contact-form-sec-1:hover ~ .service-choose-contact-form-sec-2 .service-choose-contact-form-sec-2-p,
.service-choose-contact-form-header:hover ~ .service-choose-contact-form-sec-2 .service-choose-contact-social-svg,
.service-choose-contact-form-sec-1:hover ~ .service-choose-contact-form-sec-2 .service-choose-contact-social-svg {
    color: white !important;
    fill: white !important;
}

.service-choose-contact-form-header:hover ~ .service-choose-contact-form-sec-2 .service-choose-contact-form-submit-btn,
.service-choose-contact-form-sec-1:hover ~ .service-choose-contact-form-sec-2 .service-choose-contact-form-submit-btn {
    background-color: #000210;
    color: white;
    border: 1px solid white;
}




/* ============================================== EMAIL PAGE ============================================== */




.service-mail-send-body {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    position: relative;
    background-color: #000210;
}

.service-mail-send-body .service-email-sent {
    width: 100%;
    height: fit-content;
    padding: 5% 10%;
    background-color: rgba(0, 128, 0, 0.253);
    position: relative;
    z-index: 13;
}

.service-mail-send-body .service-email-sent h2 {
    font-size: var(--big-font-size);
    font-family: agelast;
    margin-bottom: 30px;
    color: white;
}

@media (min-width:768px) and (max-width:1025px) {
    .service-mail-send-body .service-email-sent h2 {
        line-height: 5vw;
    }
}

@media (min-width:500px) and (max-width:768px) {
    .service-mail-send-body .service-email-sent h2 {
        line-height: 6vw;
    }
}

@media (max-width:500px) {
    .service-mail-send-body .service-email-sent h2 {
        line-height: 7vw;
    }
}

.service-mail-send-body .service-email-sent p {
    font-size: var(--small-font-size);
    color: white;
}

.service-mail-send-body .service-email-sent a {
    width: fit-content;
    height: fit-content;
    text-decoration: none;
    font-size: var(--small-font-size);
    padding: 20px;
    background-color: white;
    color: green;
    display: block;
    border-radius: 10px;
    margin-top: 30px;
}

.service-mail-send-body .service-email-send-error {
    width: 100%;
    height: fit-content;
    padding: 3% 10%;
    background-color: rgba(255, 0, 0, 0.322);
    position: relative;
    z-index: 13;
}

.service-mail-send-body .service-email-send-error a {
    color: red;
}




/* ============================================== BLOGS PAGE ============================================== */



.blogs-body {
    width: 100%;
    height: fit-content;
    background-color: #000210;
}

.blogs-body section {
    width: 100%;
    height: fit-content;
    padding: var(--general-vertical-padding) var(--general-horizental-padding);
}

.blogs-body section .blog-intro {
    width: 100%;
    height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    padding: 5% 5% 5% 15%;
    position: relative;
}

.blogs-intro-pseudo-background {
    width: 100%;
    height: 50vh;
    position: absolute;
    top: 0%;
    left: 0%;
    background-image: url(./pics/blogs/blogs_intro.jpg);
    background-size: cover;
    background-color: rgba(0, 0, 0, 0.568);
    background-blend-mode: color-burn;
}

.blogs-intro-pseudo-background::after {
    content: '';
    width: 100%;
    height: 100px;
    position: absolute;
    bottom: 0%;
    left: 0%;
    background-image: linear-gradient(0deg,#000210,transparent);
}

.blogs-body section .intro h1 {
    font-size: var(--big-font-size);
    font-family: agelast;
    color: white;
    position: relative;
}

.blogs-body section .blogs-gallery-container {
    width: 100%;
    height: 100%;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: center;
    position: relative;
    margin-top: 300px;
}

.blogs-body section .blogs-gallery-container .blogs-gallery-item {
    width: 48%;
    height: fit-content;
    overflow: hidden;
    margin-bottom: 50px;
    position: relative;
    z-index: 13;
}

@media (max-width: 1025px) {

    .blogs-body section .blogs-gallery-container .blogs-gallery-item {
        width: 100%;
        margin-bottom: 100px;
    }

    .blogs-body section .blogs-gallery-container .blogs-gallery-item:nth-child(even) {
        direction: rtl;
    }

}

.blogs-body section .blogs-gallery-container .blogs-gallery-item img {
    width: 100%;
    height: 250px;
    border-radius: 36px;
    object-fit: cover;
}

.blogs-body section .blogs-gallery-container .blogs-gallery-item h2 {
    font-size: var(--regular-font-size);
    color: white;
    margin-top: 20px;
    margin-bottom: 20px;
}

.blogs-body section .blogs-gallery-container a {
    width: fit-content;
    height: auto;
    display: block;
    background-color: white;
    color: #000210;
    border: 1px solid white;
    border-radius: 16px;
    padding: 10px;
    text-decoration: none;
}




/* ============================================== BLOG ARTICLE PAGE ============================================== */




.blog-article-body {
    width: 100%;
    height: fit-content;
    background-color: #000210;
}

.blog-article-body section {
    width: 100%;
    height: fit-content;
    padding: var(--general-vertical-padding) var(--general-horizental-padding);
}

.blog-article-body section .blog-article-intro {
    width: 100%;
    height: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    position: relative;
}

.blog-1-intro-pseudo-background {
    width: 100%;
    height: 50vh;
    position: absolute;
    top: 0%;
    left: 0%;
    background-image: url(./pics/blogs/blog_1.jpg);
    background-size: cover;
    background-color: rgba(0, 0, 0, 0.568);
    background-blend-mode: color-burn;
}

.blog-1-intro-pseudo-background::after {
    content: '';
    width: 100%;
    height: 100px;
    position: absolute;
    bottom: 0%;
    left: 0%;
    background-image: linear-gradient(0deg,#000210,transparent);
}

.blog-2-intro-pseudo-background {
    width: 100%;
    height: 50vh;
    position: absolute;
    top: 0%;
    left: 0%;
    background-image: url(./pics/blogs/blog_2.jpg);
    background-size: cover;
    background-color: rgba(0, 0, 0, 0.568);
    background-blend-mode: color-burn;
}

.blog-2-intro-pseudo-background::after {
    content: '';
    width: 100%;
    height: 100px;
    position: absolute;
    bottom: 0%;
    left: 0%;
    background-image: linear-gradient(0deg,#000210,transparent);
}

.blog-3-intro-pseudo-background {
    width: 100%;
    height: 50vh;
    position: absolute;
    top: 0%;
    left: 0%;
    background-image: url(./pics/blogs/blog_3.jpg);
    background-size: cover;
    background-color: rgba(0, 0, 0, 0.568);
    background-blend-mode: color-burn;
}

.blog-3-intro-pseudo-background::after {
    content: '';
    width: 100%;
    height: 100px;
    position: absolute;
    bottom: 0%;
    left: 0%;
    background-image: linear-gradient(0deg,#000210,transparent);
}

.blog-article-body section .blog-article-intro h1 {
    font-size: var(--big-font-size);
    font-family: agelast;
    color: white;
    position: relative;
}

.blog-article-body section .blog-article-item {
    width: 100%;
    height: fit-content;
    position: relative;
    padding-left: 7%;
    margin-top: 200px;
}

.blog-article-body section .blog-article-item .blog-article-desc {
    width: 100%;
    height: fit-content;
    margin-bottom: 30px;
    color: white;
}

.blog-article-body section .blog-article-item .blog-article-desc h2 {
    font-size: var(--big-font-size);
    padding: 10px 0px;
    margin-bottom: 30px;
    color: white;
}

.blog-article-body section .blog-article-item .blog-article-desc p {
    font-size: var(--small-font-size);
}

.blog-article-body section .blog-article-item .blog-article-index {
    width: 100%;
    height: fit-content;
}

.blog-article-body section .blog-article-item .blog-article-index h2 {
    font-size: var(--big-font-size);
    padding: 10px 0px;
    margin-bottom: 30px;
    color: white;
}

.blog-article-body section .blog-article-item .blog-article-index a {
    width: 100%;
    height: fit-content;
    display: block;
    font-size: var(--intermediate-font-size);
    margin-bottom: 20px;
    color: white;
}

.blog-article-body section .blog-article-item .blog-article-section {
    width: 100%;
    height: fit-content;
    position: relative;
    margin-top: 30px;
}

.blog-article-body section .blog-article-item .blog-article-section .blog-article-section-anchor {
    width: 50px;
    height: 50px;
    position: absolute;
    bottom: 130%;
    left: 0%;
    opacity: 0;
    pointer-events: none;
}

.blog-article-body section .blog-article-item .blog-article-section .blog-article-section-header {
    width: 100%;
    height: fit-content;
    padding: 30px 0px;
    display: flex;
    justify-content: start;
    align-items: center;
    border-bottom: 1px solid #ffffffda;
}

.blog-article-body section .blog-article-item .blog-article-section .blog-article-section-header svg {
    width: 20px;
    height: 20px;
    background-color: white;
    color: #000210;
    padding: 2px;
    border-radius: 5px;
    cursor: pointer;
    position: absolute;
    left: -5%;
}

@media (min-width:500px) and (max-width:768px) {
    .blog-article-body section .blog-article-item .blog-article-section .blog-article-section-header svg {
        left: -7%;
    }
}

@media (max-width:500px) {
    .blog-article-body section .blog-article-item .blog-article-section .blog-article-section-header svg {
        left: -9%;
    }
}

.blog-article-body section .blog-article-item .blog-article-section .blog-article-section-header h3 {
    font-size: var(--big-font-size);
    color: white;
}

.blog-article-body section .blog-article-item .blog-article-section .blog-article-section-body {
    width: 100%;
    height: fit-content;
    overflow: hidden;
    margin-top: 30px;
    transition: all ease 0.5s;
}

.blog-article-section-body-expand {
    height: 0px !important;
}

.blog-article-body section .blog-article-item .blog-article-section .blog-article-section-body p {
    font-size: var(--small-font-size);
    color: white;
}

.blog-article-body section .blog-article-item .blog-article-section .blog-article-section-body h4 {
    font-size: var(--intermediate-font-size);
    padding: 20px 0px;
    color: white;
}

.blog-article-body section .blog-article-item .blog-article-section .blog-article-section-body ul {
    margin-top: 30px;
    margin-left: 30px;
    color: white;
}

.blog-article-body section .blog-article-item .blog-article-section .blog-article-section-body ul li {
    margin-top: 20px;
    color: white;
    font-size: var(--small-font-size);
}

.blog-article-body section .blog-article-item .blog-article-section .blog-article-section-body ul li div {
    width: 80%;
    display: flex;
    flex-direction: column;
}

.blog-article-body section .blog-article-item .blog-article-section .blog-article-section-body ul li div h5 {
    margin-bottom: 20px;
}

.blog-article-body section .blog-article-item .blog-article-conclusion {
    width: 100%;
    height: fit-content;
    margin-top: 50px;
    position: relative;
}

.blog-article-body section .blog-article-item .blog-article-conclusion .blog-article-conclusion-anchor {
    width: 50px;
    height: 50px;
    position: absolute;
    bottom: 160%;
    left: 0%;
    opacity: 0;
    pointer-events: none;
}

.blog-article-body section .blog-article-item .blog-article-conclusion h3 {
    font-size: var(--big-font-size);
    padding: 10px 0px;
    color: white;
}

.blog-article-body section .blog-article-item .blog-article-conclusion p {
    color: white;
    font-size: var(--small-font-size);
}

.blog-article-body section .blog-article-item .blog-article-conclusion ul {
    margin-top: 30px;
    margin-left: 30px;
    color: white;
    margin-bottom: 30px;
}

.blog-article-body section .blog-article-item .blog-article-conclusion ul li {
    margin-top: 20px;
    color: white;
    font-size: var(--small-font-size);
}

.blog-article-body section .blog-article-item .blog-article-conclusion ul li div {
    width: 80%;
    display: flex;
    flex-direction: column;
}

.blog-article-body section .blog-article-item .blog-article-conclusion ul li div h5 {
    margin-bottom: 20px;
}

.blog-article-body section .blog-article-item .blog-article-top-arrow {
    width: fit-content;
    height: fit-content;
    padding: 7px;
    background-color: #000210;
    color: white;
    border: 1px solid white;
    position: fixed;
    bottom: 10%;
    right: 3%;
    border-radius: 50%;
    z-index: 99;
}

.blog-article-body section .blog-article-item .blog-article-top-arrow svg {
    width: 20px;
    height: 20px;
}




/* ============================================== APPLICATION PAGE ============================================== */




.application-send-body {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    background-color: #000210;
    position: relative;
}

.application-send-body .application-sent {
    width: 100%;
    height: fit-content;
    padding: 5% 10%;
    background-color: rgba(0, 128, 0, 0.253);
    position: relative;
    z-index: 13;
}

.application-send-body .application-sent h2 {
    font-size: var(--big-font-size);
    font-family: agelast;
    margin-bottom: 30px;
    color: white;
}

@media (min-width:768px) and (max-width:1025px) {
    .application-send-body .application-sent h2 {
        line-height: 5vw;
    }
}

@media (min-width:500px) and (max-width:768px) {
    .application-send-body .application-sent h2 {
        line-height: 6vw;
    }
}

@media (max-width:500px) {
    .application-send-body .application-sent h2 {
        line-height: 7vw;
    }
}

.application-send-body .application-sent p {
    font-size: var(--small-font-size);
    color: white;
}

.application-send-body .application-sent a {
    width: fit-content;
    height: fit-content;
    text-decoration: none;
    font-size: var(--small-font-size);
    padding: 20px;
    background-color: white;
    color: green;
    display: block;
    border-radius: 10px;
    margin-top: 30px;
}

.application-send-body .application-send-error {
    width: 100%;
    height: fit-content;
    padding: 3% 10%;
    background-color: rgba(255, 0, 0, 0.322);
    position: relative;
    z-index: 13;
}

.application-send-body .application-send-error a {
    color: red;
}






/* ============================================== PROJECT DISPLAY PAGE ============================================== */




.project-display-body {
    width: 100%;
    height: fit-content;
    background-color: #000210;
}

.project-display-body section {
    width: 100%;
    height: fit-content;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: start;
    flex-wrap: wrap;
    padding: var(--general-vertical-padding) var(--general-horizental-padding);
}

@media (max-width:1025px) {
    .project-display-body section {
        flex-direction: column;
    }
}

.project-display-body section h1 {
    font-size: var(--huge-font-size);
    font-family: agelast;
    color: white;
    z-index: 13;
    position: relative;
}

.project-display-body section .project-display-tags-dets {
    width: 100%;
    height: fit-content;
    margin-top: 40px;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 30px;
    z-index: 13;
    position: relative;
    margin-bottom: 150px;
}

@media (max-width:768px) {
    .project-display-body section .project-display-tags-dets {
        flex-wrap: wrap;
    }
}

.project-display-body section .project-display-tags-dets span {
    color: #000210;
    background-color: white;
    border: 1px solid white;
    padding: 20px;
    border-radius: 50px;
    font-size: var(--small-font-size);
}

.project-display-body section .project-display-visuals-container {
    width: 38%;
    z-index: 13;
    position: relative;
}

@media (min-width:1200px) and (max-width:1434px) {
    .project-display-body section .project-display-visuals-container {
        width: 40%;
    }
}

@media (min-width:1025px) and (max-width:1200px) {
    .project-display-body section .project-display-visuals-container {
        width: 50%;
    }
}

@media (min-width:768px) and (max-width:1025px) {
    .project-display-body section .project-display-visuals-container {
        width: 80%;
    }
}

@media (max-width:768px) {
    .project-display-body section .project-display-visuals-container {
        width: 100%;
    }
}

.project-display-body section .project-display-visuals-container .slider-wrapper {
    width: 100%;
    display: flex;
    margin: 0 auto;
    gap: 10px;
    height: 50vw;
}

@media (min-width:1025px) and (max-width:1434px) {
    .project-display-body section .project-display-visuals-container .slider-wrapper {
        height: 65vw;
    }
}

@media (min-width:768px) and (max-width:1025px) {
    .project-display-body section .project-display-visuals-container .slider-wrapper {
        height: 98vw;
    }
}

@media (min-width:500px) and (max-width:768px) {
    .project-display-body section .project-display-visuals-container .slider-wrapper {
        height: 130vw;
    }
}

@media (max-width:500px) {
    .project-display-body section .project-display-visuals-container .slider-wrapper {
        height: 140vw;
    }
}

.project-display-body section .project-display-visuals-container .slider-container {
    width: 75%;
    height: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    border: 10px solid #000;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.project-display-body section .project-display-visuals-container .main-slider {
    display: flex;
    flex-direction: column;
    transition: transform 0.5s ease;
    height: 100%;
}

.project-display-body section .project-display-visuals-container .slide {
    min-height: 100%;
    position: relative;
    flex-shrink: 0;
}

.project-display-body section .project-display-visuals-container .video-container {
    width: 100%;
    height: 100%;
    background: black;
}

.project-display-body section .project-display-visuals-container .video-container video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.project-display-body section .project-display-visuals-container .image-container {
    width: 100%;
    height: 100%;
}

.project-display-body section .project-display-visuals-container .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Thumbnail Slider Styles */
.project-display-body section .project-display-visuals-container .thumbnail-slider {
    width: 100px;
    height: 100%;
    position: relative;
    overflow-y: auto;
    scrollbar-width: none;
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@media (min-width:1025px) and (max-width:1434px) {
    .project-display-body section .project-display-visuals-container .thumbnail-slider {
        width: 120px;
    }
}

.project-display-body section .project-display-visuals-container .thumbnail-slider::-webkit-scrollbar {
    display: none;
}

.project-display-body section .project-display-visuals-container .thumbnail {
    width: 100px;
    height: 150px;
    min-height: 150px;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.3s ease;
    position: relative;
    flex-shrink: 0;
}

.project-display-body section .project-display-visuals-container .thumbnail.active {
    opacity: 1;
    border: 2px solid #fe2c55;
    transform: scale(1.02);
}

.project-display-body section .project-display-visuals-container .thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project-display-body section .project-display-visuals-container .thumbnail-video {
    position: relative;
}

.project-display-body section .project-display-visuals-container .play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-display-body section .project-display-visuals-container .play-icon::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-left: 8px solid white;
    border-bottom: 5px solid transparent;
    margin-left: 2px;
}

.project-display-body section .project-display-visuals-container .controls {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    pointer-events: none;
    z-index: 2;
}

.project-display-body section .project-display-visuals-container .controls button {
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--small-font-size);
    margin: 10px 0;
}

.project-display-body section .project-display-dets-container {
    width: 60%;
    height: fit-content;
    padding: 20px;
}

@media (min-width:1200px) and (max-width:1434px) {
    .project-display-body section .project-display-dets-container {
        width: 60%;
    }
}

@media (min-width:1025px) and (max-width:1200px) {
    .project-display-body section .project-display-dets-container {
        width: 50%;
    }
}

@media (min-width:768px) and (max-width:1025px) {
    .project-display-body section .project-display-dets-container {
        width: 100%;
        margin-top: 40px;
    }
}

@media (max-width:768px) {
    .project-display-body section .project-display-dets-container {
        width: 100%;
        margin-top: 40px;
        padding: 0px;
    }
}

.project-display-body section .project-display-dets-container h2 {
    font-size: var(--regular-font-size);
    color: white;
    font-family: agelast;
    z-index: 13;
    position: relative;
}

.project-display-body section .project-display-dets-container .project-more-visuals-btn {
    width: 35%;
    height: fit-content;
    padding: 20px;
    background-color: red;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    z-index: 13;
    position: relative;
    transition: all ease 0.5s;
    border-radius: 10px;
    margin-top: 50px;
    text-decoration: none;
}

@media (min-width:1025px) and (max-width:1200px) {
    .project-display-body section .project-display-dets-container .project-more-visuals-btn {
        width: 50%;
    }
}

@media (min-width:500px) and (max-width:768px) {
    .project-display-body section .project-display-dets-container .project-more-visuals-btn {
        width: 45%;
    }
}

@media (max-width:500px) {
    .project-display-body section .project-display-dets-container .project-more-visuals-btn {
        width: 60%;
    }
}

.project-display-body section .project-display-dets-container .project-more-visuals-btn span {
    font-size: var(--small-font-size);
}

.project-display-body section .project-display-dets-container .project-more-visuals-btn svg {
    width: 20px;
    height: 20px;
}

.project-display-body section .project-display-dets-container .project-more-visuals-btn:hover {
    background-color: white !important;
    color: red !important;
}

.project-display-body section .project-display-dets-container .project-display-dets-container-desc {
    color: white;
    font-size: var(--small-font-size);
    margin-top: 30px;
    position: relative;
    z-index: 13;
}

.project-display-body section .project-display-dets-container .project-comments-container-wrapper {
    width: 100%;
    height: 20vw;
    overflow: auto;
    margin-top: 50px;
    padding: 2% 0%;
    padding-bottom: 0%;
    position: relative;
    z-index: 13;
    
    -webkit-overflow-scrolling: touch; /* For iOS Safari smooth scroll */
}

@media (min-width:768px) and (max-width:1025px) {
    .project-display-body section .project-display-dets-container .project-comments-container-wrapper {
        height: 40vw;
    }
}

@media (min-width:500px) and (max-width:768px) {
    .project-display-body section .project-display-dets-container .project-comments-container-wrapper {
        height: 50vw;
    }
}

@media (max-width:500px) {
    .project-display-body section .project-display-dets-container .project-comments-container-wrapper {
        height: 60vw;
    }
}

/* Scrollbar */

.project-display-body section .project-display-dets-container .project-comments-container-wrapper::-webkit-scrollbar {
    width: 8px;
}

.project-display-body section .project-display-dets-container .project-comments-container-wrapper::-webkit-scrollbar-track {
    background: #222;
}

.project-display-body section .project-display-dets-container .project-comments-container-wrapper::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 0px;
}

.project-display-body section .project-display-dets-container .project-comments-container-wrapper::-webkit-scrollbar-thumb:hover {
    background: #777;
}

.project-display-body section .project-display-dets-container .project-comments-container-wrapper h3 {
    width: fit-content;
    font-size: var(--regular-font-size);
    font-family: agelast;
    padding: 10px 0px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.459);
    color: white;
}

.project-display-body section .project-display-dets-container .project-comments-container-wrapper .project-comment-item {
    width: 80%;
    height: fit-content;
    margin-top: 50px;
}

.project-display-body section .project-display-dets-container .project-comments-container-wrapper .project-comment-item div {
    width: 100%;
    height: fit-content;
    padding: 10px 0px;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 10px;
}

.project-display-body section .project-display-dets-container .project-comments-container-wrapper .project-comment-item div span {
    display: block;
    font-size: var(--intermediate-font-size);
    font-family: agelast;
    color: white;
}

.project-display-body section .project-display-dets-container .project-comments-container-wrapper .project-comment-item div svg {
    width: 20px;
    height: 20px;
    color: white;
}

.project-display-body section .project-display-dets-container .project-comments-container-wrapper .project-comment-item p {
    font-size: var(--small-font-size);
    color: #000210;
    margin: 0%;
    color: white;
}

.project-display-body section form {
    width: 100%;
    height: fit-content;
    margin-top: 30px;
    z-index: 13;
    position: relative;
}

.project-display-body section form input[type="text"] {
    width: 50%;
    height: fit-content;
    padding: 20px;
    border-radius: 50px;
    border: none;
    outline: none;
    font-size: var(--small-font-size);
}

.project-display-body section .project-display-dets-container .project-comment-item-post-container {
    width: 50%;
    height: fit-content;
    overflow: hidden;
    background-color: white;
    transition: all ease 0.5s;
    border-radius: 50px;
    margin-top: 30px;
    position: relative;
}

.project-display-body section .project-display-dets-container .project-comment-item-post-container:hover {
    width: 100% !important;
}

.project-comment-item-post-container:has(.project-comment-item-post-container-comment-input:focus),
.project-comment-item-post-container:has(.project-comment-item-post-container-comment-input:valid) {
    width: 100% !important;
}

.project-display-body section .project-display-dets-container .project-comment-item-post-container input[type="submit"] {
    width: 100%;
    height: 100%;
    font-size: var(--small-font-size);
    padding: 20px;
    background-color: #000210;
    color: white;
    border-radius: 50px;
    border: 1px solid white;
    outline: none;
    position: absolute;
    top: 0%;
    left: 0%;
    cursor: pointer;
    transition: all ease 0.5s;
    text-align: center;
}

.project-comment-item-post-container:hover .project-comment-item-post-container-comment-post-btn {
    width: 40% !important;
    left: 60% !important;
}

.project-comment-item-post-container-comment-input:focus ~ .project-comment-item-post-container-comment-post-btn,
.project-comment-item-post-container-comment-input:valid ~ .project-comment-item-post-container-comment-post-btn {
    width: 40% !important;
    left: 60% !important;
}

.project-display-body section .project-display-dets-container .project-comment-item-post-container input[type="text"] {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    border-radius: 50px;
    transition: all ease 0.5s;
    padding: 20px;
    padding-left: 20px;
    padding-right: 20px;
    font-size: var(--small-font-size);
}

.project-comment-item-post-container:hover .project-comment-item-post-container-comment-input {
    width: 60% !important;
    left: 50% !important;
}

.project-comment-item-post-container-comment-input:focus ~ .project-comment-item-post-container-comment-input,
.project-comment-item-post-container-comment-input:valid ~ .project-comment-item-post-container-comment-input {
    width: 40% !important;
    left: 60% !important;
}

.project-display-no-comments {
    width: 100%;
    height: fit-content;
}

.project-display-no-comments p {
    width: 100%;
    height: fit-content;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.151);
    font-size: var(--small-font-size);
    margin-top: 50px;
    color: white;
}



/* ================================================ CALCULATOR SEND PAGE =================================================== */




.calculator-package-send-body {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-content: center;
    align-items: center;
    background-color: #000210;
    position: relative;
}

.calculator-package-send-body .calculator-package-send-container {
    width: 100%;
    height: fit-content;
    background-color: rgba(0, 128, 0, 0.253);
    padding: 5% 10%;
    position: relative;
    z-index: 13;
}

.calculator-package-send-body .calculator-package-send-container h2 {
    font-size: var(--big-font-size);
    line-height: 3vw;
    font-family: agelast;
    color: white;
    margin-bottom: 30px;
}

@media (min-width:768px) and (max-width:1025px) {
    .calculator-package-send-body .calculator-package-send-container h2 {
        line-height: 5vw;
    }
}

@media (min-width:500px) and (max-width:768px) {
    .calculator-package-send-body .calculator-package-send-container h2 {
        line-height: 6vw;
    }
}

@media (max-width:500px) {
    .calculator-package-send-body .calculator-package-send-container h2 {
        line-height: 7vw;
    }
}

.calculator-package-send-body .calculator-package-send-container p {
    font-size: var(--small-font-size);
    color: white;
}

.calculator-package-send-body .calculator-package-send-container a {
    width: fit-content;
    height: fit-content;
    text-decoration: none;
    font-size: var(--small-font-size);
    padding: 20px;
    background-color: white;
    color: green;
    display: block;
    border-radius: 10px;
    margin-top: 30px;
}

.calculator-package-send-body .calculator-package-send-error-container {
    width: 100%;
    height: fit-content;
    background-color: rgba(255, 0, 0, 0.322);
    padding: 5% 10%;
    position: relative;
    z-index: 13;
}

.calculator-package-send-body .calculator-package-send-error-container a {
    background-color: white;
    color: red;
}

.error-details {
    margin-top: 50px;
    color: white;
}



/* ================================================ GENERAL ELEMENTS =================================================== */


.social-pop-wrapper {
    width: fit-content;
    height: 100%;
    padding: 30vh 0px;
    position: absolute;
    top: 0%;
    right: 5%;
}

.socials-pop-container {
    width: fit-content;
    height: fit-content;
    border-radius: 50px;
    background-color: #00021025;
    backdrop-filter: blur(50px);
    position: sticky;
    top: 60%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    border: 1px solid rgba(255, 255, 255, 0.342);
    z-index: 99;
    display: flex;
    flex-direction: column;
    padding: 20px 10px;
    gap: 10px;
}

.socials-pop-container .social-pop {
    width: fit-content;
    height: fit-content;
    border-radius: 50%;
    z-index: 99;
    cursor: pointer;
}

.socials-pop-container .social-pop svg {
    width: 20px;
    height: 20px;
    color: white;
}




/* ================================================ PROJECT DISPLAY REVIEW SEND PAGE =================================================== */




.project-display-review-send-body {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    position: relative;
    background-color: #000210;
}

.project-display-review-send-body .project-display-review-send-container {
    width: 100%;
    height: fit-content;
    background-color: rgba(0, 128, 0, 0.253);
    padding: 5% 10%;
    position: relative;
    z-index: 13;
}

.project-display-review-send-body .project-display-review-send-container h2 {
    font-size: var(--big-font-size);
    line-height: 3vw;
    font-family: agelast;
    color: white;
    margin-bottom: 30px;
}

@media (min-width:768px) and (max-width:1025px) {
    .project-display-review-send-body .project-display-review-send-container h2 {
        line-height: 5vw;
    }
}

@media (min-width:500px) and (max-width:768px) {
    .project-display-review-send-body .project-display-review-send-container h2 {
        line-height: 6vw;
    }
}

@media (max-width:500px) {
    .project-display-review-send-body .project-display-review-send-container h2 {
        line-height: 7vw;
    }
}

.project-display-review-send-body .project-display-review-send-container p {
    font-size: var(--small-font-size);
    color: white;
}

.project-display-review-send-body .project-display-review-send-container a {
    width: fit-content;
    height: fit-content;
    text-decoration: none;
    font-size: var(--small-font-size);
    padding: 20px;
    background-color: white;
    color: green;
    display: block;
    border-radius: 10px;
    margin-top: 30px;
}

.project-display-review-send-body .project-display-review-send-error-container {
    width: 100%;
    height: fit-content;
    background-color: rgba(255, 0, 0, 0.322);
    padding: 5% 10%;
    position: relative;
    z-index: 13;
}

.project-display-review-send-body .project-display-review-send-error-container a {
    background-color: white;
    color: red;
}