:root{
    --contact-title: 17%;
    --index-contact-details: 30px;
    --default-ms: 250ms;
}

/***********************************************************************************/
/************************** INDEX-LEADING-CONTAINER START **************************/

    #index-leading-container{
        min-height: 100vh;
        border-bottom: 4px solid var(--site-secondary);
    }

    #index-leading-front-images{
        top: 160px;
        left: 4%;
        width: 92%;
        height: calc(100vh - 200px);
        z-index: 0;
    }

    .leading-images-container{
        width: 96%;
        height: 90%;
        border-radius: var(--rounded-defualt);
        transition: var(--default-ms) all;
    }

    #first-image-container{

        top: 10%;
        left: 4%;
        z-index: 3;

    }

    #second-image-container {
        top: 5%;
        left: 2%;
        z-index: 2;
        opacity: .5;
    }

    #third-image-container {
        top: 0;
        left: 0;
        z-index: 1;
        opacity: .5;
    }

    #index-front-image-cover{
        top: 10%;
        left: 4%;
        z-index: 4;
    }

    #front-image-writing-container{
        --parent-height: 200px;
        --height-min: 50px;
        min-height: var(--parent-height);
        padding-left: 25px;
        padding-top: 0px;
    }

    #front-image-writing-block{
        border-radius: 5px;
        min-height: calc(var(--parent-height) - var(--height-min));
    }

    #front-image-writing{
        height: calc(var(--parent-height) - var(--height-min));
        width: 55%;
        font-size: 55px;
        font-weight: 550;
    }

    #front-image-button-container{

        padding-left: 25px;
        padding-top: 0px;
    }

    #index-side-containers{
        --side-top:160px;
        top: var(--side-top);
        right: 0;
        width: 50px;
        height: calc(95vh - var(--side-top));
        z-index: 15;
    }


    .side-container-container{
        --side-container-height: 150px;
        /*width: 350px;*/
        height: var(--side-container-height);
    }
    .side-container{
        /*--side-container-height: 150px;*/
        width: 350px;
        height: 100%;
        top: 0;
    }

    #first-side-container{
        right: 0px;
    }

    #second-side-container{
        right: -300px;
    }

    #third-side-container{
        right: -300px;
    }

    #index-dots-container{
        bottom: 20px;
        left: 0;
        height: 50px;
        width: 200px;
        z-index: 5;
    }

    @media screen and (min-width: 800px) and (max-width: 1200px){
        #front-image-writing{
            width: 65%;
            font-size: 45px;
        }
    }

    @media screen and (min-width: 500px) and (max-width: 800px){
        #front-image-writing{
            width: 80%;
            font-size: 35px;
        }

        #index-side-containers{
            display: none;
        }

    }


    @media screen and (min-width: 0px) and (max-width: 500px){
        #front-image-writing{
            /*height: ;*/
            width: calc(100% - 25px);
            font-size: 30px;
        }


        #index-side-containers{
            display: none;
        }



    }

@media screen and (min-width: 800px) and (max-width: 1200px){

    #index-contact-container{
        height: 1300px;
    }

    #contact-textarea{

    }

    #contact-textarea{
        height: 25%;
    }

    #contact-and-inputs{
        flex-direction: column-reverse;
        justify-content: space-around;
        height: 75%;
    }
    #contact-details{
        width: 100% ;
        height: 310px;
    }
    #contact-inputs{
        width: 100%;
        height: 280px;
    }


}


@media screen and (min-width: 500px) and (max-width: 800px){

    #index-contact-container{
        padding: 35px 30px;
        height: 1300px;
    }

    #contact-us-title{
        height: var(--contact-title);
        font-size: 45px;
    }

    #contact-textarea{

    }

    #contact-container{
        padding: 0 30px;
    }

    #contact-form-container{
        padding: 0!important;
    }

    #contact-textarea{
        height: 25%;
    }
    .index-contact-details{
        font-size: 20px !important;
    }

    #contact-and-inputs{
        flex-direction: column-reverse;
        justify-content: space-around !important;
        height: 75%;
    }
    #contact-details{
        width: 100%;
        height: 320px !important;
    }
    #contact-inputs{
        width: 100%;
        height: 280px;
    }


}


@media screen and (min-width: 0px) and (max-width: 500px){

    #index-contact-container{
        padding: 35px 10px !important;
        height: 1300px;
    }

    #contact-us-title{
        height: var(--contact-title);
        font-size: 45px;
    }

    #contact-textarea{

    }

    #contact-container{
        padding: 0 5px !important;
    }

    #contact-form-container{
        padding: 0!important;
    }

    #contact-textarea{
        height: 25%;
    }

    .contact-part{
        padding:0 10px !important;
    }

    .index-contact-icons{
        width: 10%;
        font-size: 25px !important;
    }
    .index-contact-details{
        width: 90%;
        font-size: 15px !important;
    }

    #contact-and-inputs{
        flex-direction: column-reverse;
        justify-content: space-around !important;
        height: 75%;
    }

    #contact-details{
        width: 100%;
        height: 320px;
    }

    #contact-inputs{
        width: 100%;
        height: 280px;
    }


}




@media screen and (min-width: 0px) and (max-width: 750px){
    #front-image-writing-block{
        opacity: 1;
    }
    #front-image-writing{
        opacity: 1;
    }
}




 /*this part is regarding the height of the screen, and should not leave a certain height */
    @media screen and (min-height: 0) and (max-height: 670px){
        #index-leading-container{
            height: 750px;
        }
        #index-leading-front-images{
            height: calc(750px - 200px);
        }
    }



/************************** INDEX-LEADING-CONTAINER END ****************************/
/***********************************************************************************/



/***********************************************************************************/
/************************** INDEX-ABOUT-CONTAINER START **************************/


    #index-about-container{
        height: 115vh;
        border-bottom: 4px solid var(--site-secondary);
    }

    #about-germany-container{
        min-height: 80%;
        width: 90%;
        border-radius: var(--rounded-defualt);
        margin-bottom: 100px;
    }

    /*this for the container*/
    #about-image{
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: var(--rounded-defualt);
        box-shadow: none;
    }

    #about-cover{
        padding: 65px;
        border-radius: var(--rounded-defualt);
        backdrop-filter: blur(5px);
        /*box-shadow: inset 0 0 0 0, 0 0 0 0;*/
        --gap: 15px;
        width: 100%;
        height: 100%;
        border: 5px solid var(--site-secondary);
    }

    #about-title{
        font-size: 60px;
    }
    #about-description{
        font-size: 25px;
    }

    #about-images-container{
        bottom: -100px;
        left: 0;
    }
    .about-image{
        height:215px;
        width: 340px;
        border-radius: var(--rounded-defualt);
    }


    #about-circles-container{
        height: 500px;
        width: 500px;
        bottom: 50px;
        right: -250px;
        z-index: 0;
    }

    #about-small-circle{
        width: 50%;
        height: 50%;
        border-radius: 300px;
        border: 1px solid var(--site-secondary);
        box-shadow: inset 0px 0px 5px var(--site-secondary),  0px 0px 5px var(--site-secondary);
    }

    #about-big-circle{
        height: 100%;
        width: 100%;
        border-radius: 300px;
        border: 1px solid var(--site-secondary);
        box-shadow: inset 0px 0px 5px var(--site-secondary),  0px 0px 5px var(--site-secondary);
    }



    @media screen and (min-width: 1500px) and (max-width: 1650px){

        .about-image{
            height:210px;
            width: 330px;
        }

    }

    @media screen and (min-width: 1200px) and (max-width: 1500px)  {
        #index-about-container{
            height: 750px !important;
        }
        .about-image{
            height:190px;
            width: 310px;
        }

    }

    @media screen and (min-width: 1000px) and (max-width: 1200px)  {

        #index-about-container{
            height: 650px !important;
        }

        #about-title{
            font-size: 50px;
        }

        #about-description{
            font-size: 20px;
        }

        #about-images-container{
            bottom: -70px;
            left: 0;
        }

        .about-image{
            height:150px;
            width: 250px;
            border-radius: 12px;
        }


    }


    @media screen and (min-width: 700px) and (max-width: 1000px)  {

        #index-about-container{
            height: 650px !important;
        }

        #about-title{
            font-size: 45px;
        }

        #about-description{
            font-size: 17px;
        }

        #about-images-container{
            bottom: -70px;
            left: 0;
        }

        #about-images-container .about-image:nth-child(3){
            display: none;
        }

        .about-image{
            height:150px;
            width: 250px;
            border-radius: 12px;
        }

        #about-germany-container{
            min-height: 80%;
            width: 97%;
        }

    }



    @media screen and (min-width: 550px) and (max-width: 700px)  {

        #index-about-container{
            height: 650px !important;
        }

        #about-title{
            font-size: 45px;
        }

        #about-description{
            font-size: 17px;
        }

        #about-images-container{
            bottom: -70px;
            left: 0;
        }

        #about-images-container .about-image:nth-child(3){
            display: none;
        }

        .about-image{
            height:150px;
            width: 250px;
            border-radius: 12px;
        }

        #about-germany-container{
            min-height: 80%;
            width: 98%;
        }

    }

    @media screen and (min-width: 0px) and (max-width: 550px)  {

        #index-about-container{
            height: 700px !important;
            padding: 10px !important;
        }

        #about-cover{
            padding: 15px 20px;
        }
        #about-title{
            font-size: 35px;
        }

        #about-description{
            font-size: 16px;
        }

        #about-images-container{
            bottom: -80px;
            left: 0;
        }

        #about-images-container .about-image:nth-child(3), #about-images-container .about-image:nth-child(2){
            display: none;
        }

        .about-image{
            height:150px;
            width: 250px;
            border-radius: 12px;
        }

        #about-germany-container{
            min-height: 80%;
            width: 98%;
        }

    }



    /* this part is regarding the width of the screen*/
    @media screen and (min-height: 0) and (max-height: 700px){
        #index-about-container{
            min-height: 750px;
        }
    }



/************************** INDEX-ABOUT-CONTAINER END *****************************/
/***********************************************************************************/



/***********************************************************************************/
/************************** INDEX-VALUES-CONTAINER START **************************/

    #index-values-container{
        height: 70vh;
        border-bottom: 4px solid var(--site-secondary);
    }

    #our-values{
        /*--our-val-height: 25%;*/
        font-size: 68px;
        height: 25%;
    }

    #values-container{
        height: 75%;
    }

    .value-circles-container{
        top: 62.5%;
        width: 350px;
        height: 350px;
    }

    .left-circles{
        left: 0%;
    }

    .right-circles{
        left: 100%;
    }
    .small-circle{
        width: 50%;
        height: 50%;
    }
    .large-circle{
        width: 100%;
        height: 100%;
    }

    .large-circle, .small-circle{
        border-radius: 300px;
        border: 1px solid var(--site-secondary);
        box-shadow: inset 0px 0px 4px var(--site-secondary),  0px 0px 4px var(--site-secondary);
    }

    .value-details-container{
        padding: 30px 40px;
        height: 350px;
        width: 610px;
        backdrop-filter: blur(4px);
        border-radius: var(--rounded-defualt);
    }

    .value-title{
        font-size: 45px;
    }
    .value-description{
        font-size: 28px;
    }

    @media screen and (min-width: 800px) and (max-width: 1250px){
        #index-values-container {
            height: 900px !important;
        }


        #our-values{
            /*--our-val-height: 25%;*/
            height: 20%;
        }

        #values-container{
            height: 80%;
        }

        .value-details-container{
            width: 700px;
        }


    }

    @media screen and (min-width: 500px) and (max-width: 800px){
        #index-values-container {
            height: 1000px !important;
        }

        #our-values{
            /*--our-val-height: 25%;*/
            font-size: 50px;
            height: 20%;
        }

        #values-container{
            height: 80%;
        }

        .value-details-container{
            padding: 30px 40px;
            height: 350px;
            width: 450px;
        }

    }


    @media screen and (min-width: 0px) and (max-width: 500px){

        #index-values-container {
            height: 1000px !important;
        }

        #our-values{
            /*--our-val-height: 25%;*/
            font-size: 50px;
            height: 20%;
        }

        #values-container{
            height: 80%;
        }

        .value-details-container{
            padding: 30px 40px;
            height: 350px;
            width: 380px;
        }
        .value-description{
            font-size: 26px;
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: normal;
            /*line-height: 1.5;*/
            -webkit-line-clamp: 6;
            -webkit-box-orient: vertical;
        }

    }


/* this part is regarding the height of the screen, and should not leave a certain height */
    @media screen and (min-height: 0) and (max-height: 670px){
        #index-values-container{
            min-height: 750px;
        }
    }


/************************** INDEX-VALUES-CONTAINER END *****************************/
/***********************************************************************************/


/***********************************************************************************/
/************************** INDEX-SERVICES-CONTAINER START **************************/

    #index-services-container{
        min-height: 105vh;
        border-bottom: 4px solid var(--site-secondary);
    }

    #side-services-container{
        left: 40%;
    }

    #side-services-container::-webkit-scrollbar {
        display: none;
    }

    /* Hide scrollbar for IE, Edge, and Firefox */
    #side-services-container {
        -ms-overflow-style: none;  /* IE and Edge */
        /*scrollbar-width: none;     !* Firefox *!*/
    }



    .service-slides{
        border-radius: var(--rounded-defualt);
        height: 53%;
        left: 0%;
        transition: 250ms all;
        /*top: none;*/
    }

    #side-line{
        right: 50px;
        width: 50px;
    }

    #side-dots-line{
        width: 8px;
    }

    #side-dots-container{
        height: 250px;
    }

    #side-dots-container .dots{

    }

    .service-icon{
        font-size: 45px;
    }
    .service-title{
        font-size: 45px;
    }
    .service-paragraph{
        font-size: 25px;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        /*line-height: 1.5;*/
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;

    }

    .service-button{
        font-size: 30px;
        border-radius: 100px;
    }


    .service-containers{
        padding: 15px 30px 15px 100px;
    }
    .service-media{
        border-radius: var(--rounded-defualt);
    }

    .service-image{
        border-radius: var(--rounded-defualt);
    }

    @media screen and (min-width: 0px) and (max-width: 1000px){
        #side-line{
            right: 0px;
        }
        .service-image{
            display: none;
        }
        .service-writings{
            width: 100%;
        }
        .service-containers{
            padding: 15px 15px 15px 50px;
        }

        .service-title{
            font-size: 29px;
        }

        .service-icon{
            font-size: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
        }
        .service-paragraph{
            font-size: 22px;
        }

        .service-button{
            font-size: 25px;
        }
    }

/* this part is regarding the height of the screen, and should not leave a certain height */
/*    @media screen and (min-height: 0) and (max-height: 670px){*/
/*        #index-services-container{*/
/*            height: 750px;*/
/*        }*/
/*    }*/

/************************** INDEX-SERVICES-CONTAINER END *****************************/
/***********************************************************************************/




/***********************************************************************************/
/************************** INDEX-DISCLAIMER-CONTAINER START **************************/

    #index-disclaimer-container {
        height: 70vh;
        border-bottom: 4px solid var(--site-secondary);
    }

    #disclaimer-container{
        padding: 40px 50px;
        width: 90%;
        height: 70%;
        border-radius: var(--rounded-defualt);
        backdrop-filter: blur(8px);
    }

    #disclaimer-title{
        font-size: 50px;
    }

    #disclaimer-description{
        font-size: 25px;
    }

    #disclaimer-icon-container{
        left: 82%;
        font-size: 350px;
    }
    #disclaimer-circles-container{
        width: 350px;
        height: 350px;
        left: 0;
    }

    @media screen and (min-width: 800px) and (max-width: 1200px){

        #index-disclaimer-container{
            height: 750px;
        }

    }


@media screen and (min-width: 600px) and (max-width: 800px){
    #index-disclaimer-container{
        height: 950px;
    }
    #disclaimer-container {
        height: 80%;
    }

}

@media screen and (min-width: 500px) and (max-width: 600px){
    #index-disclaimer-container{
        height: 1000px;
    }

    #disclaimer-container {
        height: 90%;
    }
}

@media screen and (min-width: 0px) and (max-width: 500px){

    #disclaimer-container{
        padding: 15px 25px;
    }

    #disclaimer-title{
        font-size: 35px;
    }

    #disclaimer-description{
        font-size: 20px;
    }

    #index-disclaimer-container{
        height: 850px;
    }

    #disclaimer-container {
        height: 90%;
    }

    #side-line{
        display: none;
    }

}

/* this part is regarding the height of the screen, and should not leave a certain height */
/*    @media screen and (min-height: 0) and (max-height: 670px){*/
/*        #index-disclaimer-container{*/
/*            height: 750px;*/
/*        }*/
/*    }*/


/************************** INDEX-DISCLAIMER-CONTAINER END *****************************/
/***********************************************************************************/




/***********************************************************************************/
/************************** INDEX-CONTACT-CONTAINER START **************************/

    #index-contact-container{
        height: 110vh;
        padding: 60px;
        border-bottom: 4px solid var(--site-secondary);
    }
    #contact-container{
        width: 100%;
        height: 100%;
        border-radius: var(--rounded-defualt);
        padding: 0 60px;
    }

    #contact-us-title{
        height: var(--contact-title);
        font-size: 65px;
    }

    #contact-form-container{
        height: calc(100% - var(--contact-title));
    }

    #contact-form-container textarea{
        resize: none;
        border-radius: var(--rounded-defualt);
        padding: 30px;
        font-size: var(--index-contact-details);
        outline: none;
        border: none;
    }
    #contact-form-container textarea::placeholder {
        color: var(--site-secondary) !important;
    }

    #contact-form-container * input::placeholder{
        color: var(--site-secondary) !important;
    }

    #contact-and-inputs{

    }

    #contact-details{
        padding: 40px;
        width: 53%;
        border-radius: var(--rounded-defualt);
    }
    #contact-details * i{
        font-size: 45px;

    }

    #contact-inputs{
        padding: 40px;
        width: 45%;
        border-radius: var(--rounded-defualt);
        font-size: var(--index-contact-details);
    }

    .index-contact-details{
        font-size: calc(var(--index-contact-details) - 5px) !important;
    }



    @media screen and (min-width: 800px) and (max-width: 1200px){

        #index-contact-container{
            height: 1300px;
        }

        #contact-textarea{

        }

        #contact-textarea{
            height: 25%;
        }

        #contact-and-inputs{
            flex-direction: column-reverse;
            justify-content: space-around;
            height: 75%;
        }
        #contact-details{
            width: 100% ;
            height: 310px;
        }
        #contact-inputs{
            width: 100%;
            height: 280px;
        }


    }


@media screen and (min-width: 500px) and (max-width: 800px){

    #index-contact-container{
        padding: 35px 30px;
        height: 1300px;
    }

    #contact-us-title{
        height: var(--contact-title);
        font-size: 45px;
    }

    #contact-textarea{

    }

    #contact-container{
        padding: 0 30px;
    }

    #contact-form-container{
        padding: 0!important;
    }

    #contact-textarea{
        height: 25%;
    }
    .index-contact-details{
        font-size: 20px !important;
    }

    #contact-and-inputs{
        flex-direction: column-reverse;
        justify-content: space-around !important;
        height: 75%;
    }
    #contact-details{
        width: 100%;
        height: 320px !important;
    }
    #contact-inputs{
        width: 100%;
        height: 280px;
    }


}


@media screen and (min-width: 0px) and (max-width: 500px){

    #index-contact-container{
        padding: 35px 10px !important;
        height: 1300px;
    }

    #contact-us-title{
        height: var(--contact-title);
        font-size: 45px;
    }

    #contact-textarea{

    }

    #contact-container{
        padding: 0 30px;
    }

    #contact-form-container{
        padding: 0!important;
    }

    #contact-textarea{
        height: 25%;
    }

    .contact-part{
        padding:0 8px !important;
        margin: 0 !important;
    }
    .contact-details i, .contact-details div{
        padding: 0 !important;
    }

    .index-contact-icons{
        width: 10%;
        font-size: 25px !important;
    }
    .index-contact-details{
        width: 90%;
        font-size: 15px !important;
    }

    #contact-and-inputs{
        flex-direction: column-reverse;
        justify-content: space-around !important;
        height: 75%;
    }

    #contact-details{
        width: 100%;
        height: 320px;
    }

    #contact-inputs{
        width: 100%;
        height: 280px;
        padding: 25px;
    }


    /*#contact-inputs input{*/
    /*    padding-left: 5px !important;*/
    /*    padding-right: 5px !important;*/
    /*}*/


}




/* this part is regarding the height of the screen, and should not leave a certain height */
    /*@media screen and (min-height: 0) and (max-height: 670px){*/
    /*    #index-contact-container{*/
    /*        height: 750px;*/
    /*    }*/
    /*}*/


/************************** INDEX-CONTACT-CONTAINER END *****************************/
/***********************************************************************************/