/* sameh code  */
@import "navbar.css";
@import "controls.css";



/* cookies */
#cookie_container {
    width: 100vw;
    position: fixed;
    bottom: 0px;
    left: 0px;
    min-height: 50px;
    padding: 10px 0;
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-end;
    justify-content: center;
    font-family: "montserrat";
    box-sizing: border-box;
    z-index: 1;

}

#cookie_text {
    margin-right: 30px;
    max-width: calc(80% - 100px);
    margin-bottom: 5px;
}
#cookie_text a {
    text-decoration: underline;
}
#cookie_close {
    cursor: pointer;
    padding: 5px 10px;
    border: 1px solid;
    min-width: 90px;
    width: 30%;
    text-align: center;
    max-width: 200px;
    box-sizing: border-box;
    text-align: center;
}

@media screen and (max-width: 770px){
    #cookie_container {
        flex-flow: column nowrap;
        align-items: center;
        justify-content: center;
    }
    #cookie_text {
        margin-right: 30px;
        max-width: 80% ;
    }
    #cookie_close {
        align-self: flex-end;
        margin-right: 10%;
    }
}


@media screen and (max-width: 500px){
    #cookie_text {
        margin: auto;
        max-width: 80% ;
        margin-bottom: 10px;
    }
    #cookie_close {
        align-self: center;
        margin: auto;
        max-width: 100%;
        width: 80%;
    }
}





body {
    margin: 0;
    /* scroll-snap-type: mandatory; */
    /* -webkit-scroll-snap-type: mandatory; */
    /* scroll-snap-points-y: repeat(100vh); */
    /* scroll-snap-type: y mandatory; */
    /* -webkit-scroll-snap-type: y mandatory; */
    -webkit-overflow-scrolling: touch;
    /* scroll-behavior: [ auto | smooth ]; */
}




.section {
    width: 100vw;
    min-height: 100vh;
    /* min-height: 500px; */
    /* scroll-snap-align: start; */
    /* -webkit-scroll-snap-align: start; */
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

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

.section_title {
    position: relative;
    top: 130px;
    width: 71%;
    margin: 0 auto;
    font-size: 14px;
    font-weight: 300;
    font-family: sans-serif;
    padding: 0 41px;
    /* for now */
}

@media screen and (max-width: 1100px) {
    .section_title {
        width: 87%;
    }
}

/* special sections style*/

#item_container {
    /* height: 70vh; */
    height: unset;
    margin-top: 30vh !important;
}

#col_container {
    align-items: flex-end;
    height: 100%;
}

#sec1 .col , #sec16 .col,#sec23 .col {
    width: 100%;
}

#col_container {
    overflow: visible !important;
}

#intro_animation {
    width: 100%;
    width: 100%;
    font-size: 80px;
    min-height: 52px;
    height: 50vh;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    font-family: 'Amiri', sans-serif;

}

#intro_animation svg {
    position: relative;
    bottom: 0px;
    left: 0;
    width: 100px;
    fill: white;
    animation: wiggle 5s 1s infinite;
    animation-iteration-count: 3;
    cursor: pointer;
}

@keyframes wiggle {
    0% {
        transform: translate(0px, 0px);
    }

    5% {
        transform: translate(7px, -5px);
    }

    10% {
        transform: translate(0px, 0px);
    }

    11% {
        transform: translate(0px, 0px);
    }

    16% {
        transform: translate(7px, -5px);
    }

    21% {
        transform: translate(0px, 0px);
    }

    100% {
        transform: translate(0px, 0px);
    }
}


.logo_go {
    z-index: 5;
    animation: go 5s forwards !important;
}

@keyframes go {
    0% {
        transform: translate(0px, 0px);
    }

    4% {
        transform: translate(7px, -5px);
    }

    8% {
        transform: translate(0px, 0px);
    }

    10% {
        transform: translate(7px, -5px);
    }

    14% {
        transform: translate(0px, 0px);
    }

    30% {
        transform: translate(100vw, -100vh);
        background-color: transparent;
        visibility: hidden;
    }

    33% {
        transform: translate(0px, 0px);
        background-color: transparent;
        visibility: hidden;
    }

    100% {
        transform: translate(0px, 0px);
        visibility: hidden;
    }
}



.show_nav_logo {
    animation: show 2s forwards;
}

@keyframes show {
    0% {
        transform: translate(-300px, 300px);
    }

    10% {
        transform: translate(-300px, 300px);
        visibility: visible;
    }

    100% {
        transform: translate(0px, 0px);
        visibility: visible;
    }
}

#animation_text {
    display: flex;
    flex-flow: row wrap;
    cursor: pointer;
    min-width: 300px;
}

.type {
    width: 0px;
    overflow: hidden;
    white-space: nowrap;
    margin-right: 10px;
    height: 122px;
    border-right: 4px solid transparent;
}

.type_animation {
    animation: typewriter 2.2s steps(15) 1s 1 normal both, blinkTextCursor 700ms steps(44) 7 normal;
}

@keyframes typewriter {
    0% {
        width: 0px;
    }

    68% {
        height: 122px;
    }

    68.1% {
        height: 104px;
    }

    100% {
        width: 413px;
        height: 104px;
        cursor: text;
    }
}



@keyframes blinkTextCursor {
    0% {
        border-right: 4px solid rgba(255, 255, 255, .75);
    }

    100% {
        border-right: 4px solid transparent;
    }
}



/* I strive section */

#sec6 #col_left,#sec17 #col_left,#sec24 #col_left {
    width: 37%;
    max-width: 300px !important;
}

#sec6 #col_left img ,#sec17 #col_left img ,#sec24 #col_left img {
    width: 100%;
    height: 360px;
    object-fit: cover;
}

#sec6 .module_headline,#sec17 .module_headline,#sec24 .module_headline {
    font-size: 28px;
    margin-top: -9px;
}

#sec6 #col_right ,#sec17 #col_right ,#sec24 #col_right {
    width: 60%;
    max-width: 600px !important;

}
#sec6 .module.module_headline:first-child,#sec17 .module.module_headline:first-child,#sec24 .module.module_headline:first-child{
    font-size: 35px;
    font-family: 'Montserrat','Helvetica Neue' !important;
}
#sec6 #col_right .module_text p,#sec17 #col_right .module_text p,#sec24 #col_right .module_text p {
    margin: 0;
}
@media screen and (max-width: 900px) {

    #sec6 #col_left,
    #sec6 #col_right, 
    
    #sec17 #col_left,
    #sec17 #col_right, 
    
    #sec24 #col_left,
    #sec24 #col_right {
        width: 100%;
    }
    #sec6 #col_left ,#sec17 #col_left,#sec24 #col_left {
        margin: 25px auto 0 0 !important;
    }

    #sec6 #col_right ,#sec17 #col_right ,#sec24 #col_right {
        width: 100%;
        margin: 25px auto 0 0 !important;
    }
    #sec6 #col_left img,#sec17 #col_left img ,#sec24 #col_left img  {
        width: 80%;
        height: unset;
        max-height: 500px;
        object-fit: cover;
    }
}

/* new and creative section */

#sec7 #col_container,#sec18 #col_container,#sec25 #col_container {
    align-items: flex-start;
}

#sec7 #col_left,#sec18 #col_left,#sec25 #col_left {
    margin: 0px auto !important;
}

#sec7 #col_right, #sec18 #col_right,#sec25 #col_right  {
    margin: 105px auto !important;
}
#sec7 .module_start .start_title ,#sec18 .module_start .start_title ,#sec25 .module_start .start_title {
    font-size: 38px;
}
#sec7 .module_headline,#sec18 .module_headline,#sec25 .module_headline {
    margin-bottom: 0;
    font-size: 19px;
}

#sec7 #col_right .module.module_headline[module_id="2"],#sec18 #col_right .module.module_headline[module_id="2"],#sec25 #col_right .module.module_headline[module_id="2"] {
    margin-top: 18px;
}

#sec7 .module_text p ,#sec18 .module_text p ,#sec25 .module_text p {
    margin: 5px;
}

#sec7 .module_text p:first-of-type , #sec18 .module_text p:first-of-type,#sec25 .module_text p:first-of-type {
    margin: 10px 0 20px;
}

@media screen and (min-width: 1831px) {
    #sec7 #col_right ,#sec18 #col_right,#sec25 #col_right{
        margin: 95px auto !important;
    }
}

@media screen and (max-width: 900px) {
    #sec7 #col_right,#sec18 #col_right,#sec25 #col_right {
        margin: auto !important;
    }
}



/* powerd by */
#sec9 #col_left ,#sec20 #col_left ,#sec27 #col_left {
    width: 100%;
}

#sec9 .start_title,#sec20 .start_title,#sec27 .start_title {
    font-size: 80px;
    text-align: center;
    margin-top: 15%;
    font-family: 'Amiri', sans-serif;
}

/* Qualifications */
#sec10 #col_container,#sec21 #col_container,#sec28 #col_container {
    align-items: flex-start;
}

#sec10 #col_left,#sec21 #col_left,#sec28 #col_left {
    margin: 0px auto !important;
}

#sec10 #col_right,#sec21 #col_right,#sec28 #col_right {
    margin: 98px auto !important;
}

@media screen and (max-width: 900px) {
    #sec10 #col_right,#sec21 #col_right,#sec28 #col_right {
        margin: auto !important;
    }
}

#sec10 .start_title ,#sec21 .start_title ,#sec28 .start_title {
    font-size: 38px;
}
#sec10 .module_headline,#sec21 .module_headline,#sec28 .module_headline {
    margin: 0;
    font-size: 19px;
}

/* sasso */

#sec11 #item_container ,#sec22 #item_container ,#sec29 #item_container {
    margin-top: 70px !important;
}

#sec11 .module_pdf a,#sec22 .module_pdf a,#sec29 .module_pdf a {
    border: 1px solid;
    padding: 10px 20px;
}

#sec11 .module_image img,#sec22 .module_image img,#sec29 .module_image img {
    width: 100%;
    max-height: 500px;
    object-fit: cover;
}

#sec11 #social_icons,#sec22 #social_icons,#sec29 #social_icons {
    margin-top: 85px;

}

#sec11 .social_icon img,#sec22 .social_icon img,#sec29 .social_icon img {
    width: 35px;
    margin-right: 20px;
    text-decoration: none;
}

#sec11 .social_icon,
#sec11 .social_icon:hover,

#sec22 .social_icon,
#sec22 .social_icon:hover,

#sec29 .social_icon,
#sec29 .social_icon:hover {

    text-decoration: none;
}

/* footer */

#footer_section {
    /* min-height: 50vh; */
    scroll-snap-align: start;
    -webkit-scroll-snap-align: start;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background-color: #951428;
    color: white;
    /* padding-top: 100px; */
    
}

#footer_section #col_container {
    font-size: 16px;
    font-family: 'Montserrat', "Helvetica Neue";
    font-weight: 400;
    padding-bottom: 50px; 
}

#footer_logo {
    width: 100%;
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}

#footer_logo svg {
    width: 75px;
    margin-top: 40px;
}

#footer_contact_info {
    width: 60%;
    min-width: 150px;
    letter-spacing: 0.3px;
    margin-left: 20%;
}

#footer_nav {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
    margin-bottom: 16px;
    border-bottom: 1px solid;
}

#footer_nav ul {
    display: flex;
    flex-flow: row wrap;
    list-style: none;
    padding: 0;
    width: 100%;
}

#footer_nav ul li {
    margin-right: 35px;
}

#footer_nav svg {
    width: 25px;
    height: 25px;
}
#footer_nav .copy_right {
    font-weight: 600;
}
.phone_nr_footer{
    margin-left: auto;
}


/* contact */
#sec13,#sec30,#sec31{
    padding-bottom: 20vh;
}
#sec13 #contact_form,#sec30 #contact_form,#sec31 #contact_form {
    max-width: 450px;
    /* margin: 0; */
}
#sec13 form,#sec30 form,#sec31 form {
    width: 100%;
    max-width: 450px;
    margin: 0;
}
#sec13 .module_contact_send,#sec30 .module_contact_send,#sec31 .module_contact_send {
    width: unset;
    background-color: transparent;
    border: 1px solid;
    padding: 4px;
}
#sec13 .module_form .module_contact_input,#sec30 .module_form .module_contact_input,#sec31 .module_form .module_contact_input {
    border: none;
    font-size: 14px;
    font-family: "montserrat";
    border: none;
} 
#sec13 textarea.module_contact_text,#sec30 textarea.module_contact_text,#sec31 textarea.module_contact_text {
    font-size: 14px;
    font-family: "montserrat";
    border: none;
} 
/* cookies page  */
#sec15 , #sec32 ,#sec33 {
    margin-bottom: 15vh;
}
#sec15 #col_left , #sec32 #col_left , #sec33 #col_left{
    width: 100%;
}
#sec15 #col_right , #sec32 #col_right , #sec33 #col_right{
    display: none;
}

@media screen and (max-width: 1100px) {
   #footer_section #col_container {
        width: 90%;
        /* padding-bottom: 100px; */
    }
}
@media screen and (max-width: 900px) {
    #footer_nav ul {
        flex-flow: column wrap;
    }
    #footer_nav ul li {
        margin-top: 15px;
    }
    .phone_nr_footer{
        margin-left: 0;
    }
}

@media screen and (max-width: 600px) {
    #intro_animation {
        font-size: 50px;
    }

    .type {
        height: 65px;
    }

    @keyframes typewriter {
        0% {
            width: 0px;
        }

        68% {
            height: 65px;
        }

        68.5% {
            height: 65px;
        }

        100% {
            width: 260px;
            height: 65px;
            cursor: text;
        }
    }

    #item_container {
        height: 80%;
        margin-top: 20vh !important;
    }

    .section_title {
        top: 110px;
        width: 85%;
    }

    #col_left {
        margin: 30px auto;
    }

    #col_right,
    #col_left {
        width: 100%;
    }


    #sec6 #col_left,#sec17 #col_left,#sec24 #col_left {
        margin: 25px auto 0 0 !important;
    }

    #sec6 #col_right , #sec17 #col_right, #sec24 #col_right {
        width: 100%;
        margin-top: 25px;
    }


    #footer_contact_info {
        margin-left: auto;
    }


    #sec6 .module_headline,#sec17 .module_headline,#sec24 .module_headline {
        font-size: 22px;
    }

    .module_start .start_title {
        font-size: 22px;
    }
    .module_headline {
        font-size: 20px;
    }


}

@media screen and (max-width: 450px) {
    #intro_animation {
        font-size: 40px;
    }
    #animation_text {
        width: 300px;
    }

    .type {
        height: 52px;
    }

    @keyframes typewriter {
        0% {
            width: 0px;
        }

        68% {
            height: 52px;
        }

        68.5% {
            height: 52px;
        }

        100% {
            width: 230px;
            height: 52px;
            cursor: text;
        }
    }


    #sec9 .start_title,#sec20 .start_title,#sec27 .start_title {
        font-size: 70px;
    }


    #footer_contact_info {
        margin-top: 30px;
        width: 100%;
        margin-left: 0;
    }
    #footer_nav{
        align-items: flex-end;
    }
    #footer_nav svg{
        margin-bottom: 10px;
    }
    #footer_nav ul {
        flex-flow: column wrap;
    }
    #footer_nav ul li{
        margin-top: 15px;;
    }
}


/* end sameh code  */