/*-------------------------- Section: Introduction ---------------------*/

.section-1{
    background-color: #6cd04c;

    width: 100%;
    position: relative;
    
}
.section-1 img{
    aspect-ratio: 4/1.8;
    width: 100%;
}

.text-box{
    width: 60%;
    color: #fff;
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}


.circle-logo{
    position: absolute;
    top: -50%;
    /* background-color: #535342; */
    width: 20vw;
    height: 15vw;
    left: 50%;
    transform: translate(-50%, -50%);
 }

.img-circle-logo{
    width: 15vw;
    height: 15vw;
    animation: logo-rotation 2s ease-in ease-in-out alternate 0.6s;
    opacity: 0%;
    transform: scale(0.26);
}

@keyframes logo-rotation{
    0%{
        opacity: 0%;
    }
    50%{
        opacity: 30%;
    }
    100%{
        opacity: 100%;
        transform: rotate(180deg) scale(1.0);
    }
}





@media(max-width: 700px){
    .text-box{
        width: 50%;
        /* background-color: #38f761; */
    }

    .circle-logo{
        display: none;
    }
}

@media(max-width: 1100px){
    .text-box{
        /* background-color: #7f4cd0; */
        width: 60%;
    }
}

@media(min-width: 701px){
    .circle-logo{
        top: -65%;
     }
    .img-circle-logo{
        width: 15vw;
        height: 15vw;
        opacity: 0%;
        animation: logo-rotation-1350 2s ease-in-out forwards alternate 0.6s;
  
        transform: scale(0.26);
    }
    
    
    @keyframes logo-rotation-1350{
        0%{
            opacity: 0%;
        }
        50%{
            opacity: 30%;
        }
        100%{
            opacity: 100%;
            transform: rotate(180deg) scale(0.8);
        }
    }
}


@media(min-width: 1100px){
    .text-box{
        /* background-color: #849b00; */
        width: 60%;
    }
}

@media(min-width: 1200px){
    .text-box{
        /* background-color: #849b00; */
        width: 63%;
    }
    .circle-logo{
        top: -70%;
        width: 20vw;
        height: 15vw;
     }
    
    .img-circle-logo{
        width: 15vw;
        height: 15vw;
    }
}

@media(min-width: 1500px){
    .text-box{
        /* background-color: #849b00; */
        width: 50%;
    }
}
img {
    image-rendering: crisp-edges;
}
@media(min-width: 1350px){
    .circle-logo{
        top: -80%;
        width: 20vw;
        height: 15vw;
     }
    
    .img-circle-logo{
        width: 15vw;
        height: 15vw;
        opacity: 0%;
        animation: logo-rotation-1350 2s ease-in-out forwards alternate 0.6s;
  
        transform: scale(0.26);
    }
    
    
    @keyframes logo-rotation-1350{
        0%{
            opacity: 0%;
        }
        50%{
            opacity: 30%;
        }
        100%{
            opacity: 100%;
            transform: rotate(180deg) scale(0.8);
        }
    }
}

@media(min-width: 1500px){
    .text-box{
        /* background-color: #849b00; */
        width: 50%;
    }
}

@media(min-width: 1600px){
    .text-box{
        /* background-color: #849b00; */
        width: 47%;
    }
    .circle-logo{
        top: -90%;
        width: 20vw;
        height: 15vw;
     }
    
    .img-circle-logo{
        width: 15vw;
        height: 15vw;
    }
}

@media(min-width: 1800px){
    .text-box{
        /* background-color: #849b00; */
        width: 42%;
    }
    .circle-logo{
        top: -110%;
        width: 20vw;
        height: 15vw;
     }
    
    .img-circle-logo{
        width: 12vw;
        height: 15vw;
        animation: logo-rotation-1800 2s ease-in-out forwards alternate 0.6s;
  
        transform: scale(0.26);
    }
    
    
    @keyframes logo-rotation-1800{
        0%{
            opacity: 0%;
        }
        50%{
            opacity: 30%;
        }
        100%{
            opacity: 100%;
            transform: rotate(180deg) scale(0.7);
        }
    }
}

@media(min-width: 2000px){
    .text-box{
        /* background-color: #849b00; */
        width: 38%;
    }
    .circle-logo{
        top: -120%;
        width: 20vw;
        height: 15vw;
     }
    
    .img-circle-logo{
        width: 15vw;
        height: 15vw;
    }
}


@media(min-width: 2400px){
    .text-box{
        /* background-color: #849b00; */
        width: 35%;
    }
    .circle-logo{
        top: -150%;
        width: 20vw;
        height: 15vw;
     }
    
    .img-circle-logo{
        width: 15vw;
        height: 15vw;
    }
}


/*-------------------------- Section: Excellent  ---------------------*/

.excellence-div{
    background-color: #6cd04c;
    color: #fff;
    /* padding: 5vw 20vw; */
}



@media(min-width: 600px){
    .excellence-div{
        padding: 5vw 15vw;
    }  
    
}

@media(max-width: 600px){
    .excellence-div{
        padding: 4vw 15vw;
    }    
}



/*-------------------------- Section: Pick a category to get started  ---------------------*/

.pick-category-div{
    background-color: #fdca1f;
}

/* -------------  first div  -------------- */


.pick-category-1st-text-padding{
    color: #fff;
    text-shadow: 0.5px 0.5px 4px #535342;

    /* background-color: #7f4cd0; */
    padding: 0vw 15vw;
    padding-top: 1.5vw;
    text-align: center;
}

/* .bg-pick-category-1st-text-padding{
    background-color: #7f4cd0;
} */


.heading-two-regular{
    /* font-size: 5vw; */
    font-family: overPass-Regular;
}




@media(max-width: 900px){ 
    .heading-two-regular{
        font-size: 4.5vw;
    }
}

@media(max-width: 700px){ 
    .heading-two-regular{
        font-size: 4.5vw;
    }
}

@media(max-width: 600px){ 
    .heading-two-regular{
        font-size: 5vw;
    }
}


@media(min-width: 900px){
    .heading-two-regular{
        font-size: 3.5vw;
    }
}

@media(min-width: 1000px){
    .heading-two-regular{
        font-size: 3.2vw;
    }
}

@media(min-width: 1200px){
    .heading-two-regular{
        font-size: 3vw;
    }
}

@media(min-width: 1600px){
    .heading-two-regular{
        font-size: 2.5vw;
    }
}



/* -------------  second (images) div  -------------- */


.pick-category-images-padding{
    color: #fff;
    background-color: #fdca1f;
    padding: 2vw 11vw;
}

.pick-category-images-container{
    color: #fff;
    /* background-color: #484e6b; */
    /* padding: 2vw 3vw; */
    text-align: center;
    display: flex;

}

.pick_category_img1_container{
    /* background-color: lightcoral; */
    position: relative;
}

.pick_category_img2_container{
    /* background-color: aqua; */
    position: relative;
}

.img1_pick_category{
    position: relative;
    left: 10%;
    z-index: 2;
    width: 100%;
    /* height: 100%; */
}

.img2_pick_category{
    position: relative;
    right: 10%;
    z-index: 2;
    width: 100%;
    /* height: 100%; */
}

@media(max-width: 900px){
    .pick-category-images-padding{
        color: #fff;
        /* background-color: #1f35fd; */
        padding: 2vw 0vw;
    }
    /* .img1_pick_category{
        left: 5%;
        width: 105%;
    }
    .img2_pick_category{
        right: 10%;
        width: 105%;
    } */
}

/* -------------  final phase of pick category, Texts -------------- */


/* Industrial - Text */

.industrial-text-body{
    position: absolute;
    right: 0;
    /* background-color: #c54cd0; */
    top: 2vw;
    padding: 0vw 6.5vw;
    padding-left: 10vw;
    padding-right: 7vw;
    text-align: left;
    left: 0;
    z-index: 3;
    margin-right: 0vw;
    /* transition: 2s; */
}

.pick-category-industrial-text{
    display: inline-block;
    font-size: 2em;
    /* background-color: rebeccapurple; */
    font-family: overPass-Regular;
    text-shadow: 1px 1px 4px #000000;
}

.pick-category-industrial-text::after{
    content: '';
    z-index: 3;
    width: 100%;
    height: 2.5px;
    background: #fdca1f;
    display: block;
    position: relative;
    top: -7px;
    margin: auto;
    transition: 0.5s;

}

/* Residential - Text */

.residential-text-body{
    /* color: red; */
    position: absolute;
    right: 0;
    /* background-color: #6cd04c; */
    top: 2vw;
    padding: 0vw 6.5vw;
    padding-left: 10vw;
    text-align: left;
    left: 0;
    z-index: 3;
    /* animation:  */
}

.pick-category-residential-text{
    font-size: 2em;
    /* color: red; */
    display: inline-block;
    /* background-color: rebeccapurple; */
    font-family: overPass-Regular;
    text-shadow: 1px 1px 4px #000000;
}

.pick-category-residential-text::after{
    content: '';
    z-index: 3;
    width: 100%;;
    height: 2.5px;
    background: #fdca1f;
    display: block;
    position: relative;
    top: -7px;
    margin: auto;
    transition: 0.5s;

}

.pick-category-residential-paragraph{
    font-size: 1.5vw;
    text-shadow: 1px 1px 4px #000000;
}

.pick-category-industrial-paragraph{
    font-size: 1.5vw;
    text-shadow: 1px 1px 4px #000000;
}


@media (max-width: 330px){
    .pick-category-residential-text{
        display: none;
    }
    .pick-category-industrial-text{
        display: none;
    }
}

@media (max-width: 430px){
    .pick-category-residential-text{
        font-size: 1.5em;
    }
    .pick-category-industrial-text{
        font-size: 1.5em;
    }
}

@media (max-width: 600px){
    .pick-category-residential-paragraph, .pick-category-industrial-paragraph{
        display: none;
        
    }
}

@media (min-width: 600px){
    .pick-category-residential-text{
        font-size: 4vw;
    }
    .pick-category-industrial-text{
        display: inline-block;
        font-size: 4vw;
        /* background-color: rebeccapurple; */
        font-family: overPass-Regular;
        text-shadow: 1px 1px 4px #000000;
    }
}

@media (max-width: 900px){
    .residential-text-body{
        padding-right: 11vw;
        padding-left: 14vw;
    }
    .industrial-text-body{
        /* background-color: #535342; */
        padding-left: 12vw;
        margin-right: 5vw;
        /* padding-right: 9vw; */
    }
}

@media (min-width: 1000px){ 
    .pick-category-residential-text, .pick-category-industrial-text{
        font-size: 3vw;
    }
}

@media (max-width: 1600px){
    .pick-category-residential-paragraph, .pick-category-industrial-paragraph{
        font-size: 1.8vw;
    }
}

@media (max-width: 1300px){
    .pick-category-residential-paragraph, .pick-category-industrial-paragraph{
        font-size: 1.3rem;
    }
}

@media (max-width: 900px){
    .pick-category-residential-paragraph, .pick-category-industrial-paragraph{
        font-size: 1.3rem;
    }
    .industrial-text-body{
        padding-right: 4.5vw;
    }
    
}

@media (max-width: 750px){
    .pick-category-residential-paragraph, .pick-category-industrial-paragraph{
        font-size: 1.1rem;
    }
}


/* -------------  We're dedicated to what we do -------------- */

.row-we-are-dedicated-to{
    display: flex;
    /* background-color: #ff9d8c; */
    /* flex-direction: column; */
    padding: 5vw 13vw;
    /* justify-content: space-around; */

}

.col-half-left-we-are-dedicated-to{
    /* background-color: #a58cff; */
    flex-basis: 50%;
    text-align: center;
    align-self: center;
    padding: 0vw 1vw;
}
.col-half-right-we-are-dedicated-to{
    /* background-color: #8cffc5; */
    flex-basis: 50%;
    text-align: center;
    align-self: center;
    padding: 0vw 3vw;
}

.we-are-dedicated-to-color{
    color: #40bad8;
}

@media (max-width: 2075px){
    .row-we-are-dedicated-to{
        padding: 5vw 9.7vw;
        /* flex-direction: column; */
    }
}

@media (max-width: 1900px){
    .row-we-are-dedicated-to{
        padding: 5vw 9vw;
        /* flex-direction: column; */
    }
}

@media (max-width: 1850px){
    .row-we-are-dedicated-to{
        padding: 5vw 8vw;
        /* flex-direction: column; */
    }
}

@media (max-width: 1780px){
    .row-we-are-dedicated-to{
        padding: 5vw 6vw;
        /* flex-direction: column; */
    }
}

@media (max-width: 1750px){
    .row-we-are-dedicated-to{
        padding: 6vw 4vw;
        /* flex-direction: column; */
    }
}

@media (max-width: 1570px){
    .row-we-are-dedicated-to{
        padding: 7vw 2vw;
        /* flex-direction: column; */
    }
}

@media (max-width: 1500px){
    .row-we-are-dedicated-to{
        padding: 7vw 0vw;
        /* flex-direction: column; */
    }
}

@media (max-width: 1425px){
    .row-we-are-dedicated-to{
        padding: 5vw 12vw;
        flex-direction: column;
    }
}

@media (max-width: 900px){
    .row-we-are-dedicated-to{
        padding: 5vw 3vw;
        flex-direction: column;
    }
}


@media (max-width: 260px){
    .we-are-dedicated-to-color{
        color: #ffffff;
    }
    .row-we-are-dedicated-to{
        background-color: hwb(204 43% 3%);
    }
}


/* -------------  Keep up with our future -------------- */

.row-keep-up-with-our-future{
    display: flex;
    /* background-color: #ff9d8c; */
    /* flex-direction: column; */
    padding: 8vw 04vw;
    /* justify-content: space-around; */
    background-color: #3ebcd3;
}

.col-half-left-keep-up-with-our-future-wrapper{
    /* background-color: #a58cff; */
    flex-basis: 50%;
    display:flex;
    align-items: center;
    justify-content: center;
    /* padding: 0vw 1vw; */
}

.col-half-left-keep-up-with-our-future-wrapper-small-screen{
    display:none;
}

.col-half-left-keep-up-with-our-future{
    /* background-color: #6cd04c; */
    text-align: left;
}

.col-half-right-keep-up-with-our-future{
    /* background-color: #8cffc5; */
    flex-basis: 50%;
    text-align: center;
    align-self: center;
    justify-self: center;
    /* padding: 0vw 3vw; */
}

.keep-up-with-our-future-color{
    color: #ffffff;
}


#input-keep-up-with-future {
    font-size: larger;
    background-color: transparent;
    outline: 3px solid transparent;
    padding: 0.5em 0.5em;
    color: #fff;
    border: 0.2em solid #ffde71;
    &::placeholder{
        color: white;
        font-family: Roboto;
        font-family: overPass-Light;
        padding-left: 20%;
    }
}

#input-keep-up-with-future:focus {
    outline: 3px solid transparent;
    border: 0.2em solid #ffde71;
    background-color: #fff;
    color: #40bad8;
    &::placeholder{
        color: #40bad8;
        font-family: Roboto;
        font-family: overPass-Light;
        padding-left: 20%;
    }
}
input{
    color: greenyellow;
}

#submit-keep-up-with-future{
    font-size: larger;
    background-color: #fff; 
    padding: 0.8em 2em;
    color: #40bad8;
    border: #fff;
}

@media (max-width: 900px){
    .col-half-left-keep-up-with-our-future-wrapper{
        display:none;
    }
    .col-half-left-keep-up-with-our-future-wrapper-small-screen{
        flex-basis: 50%;
        display:flex;
        align-items: center;
        justify-content: center;
        padding-bottom: 2vh;
    }
    .row-keep-up-with-our-future{
        flex-direction: column;
        padding: 12vw
        
        0vw;
    } 

}

@media (max-width: 900px){
    #input-keep-up-with-future {
        font-size: larger;
        background-color: transparent;
        outline: 3px solid transparent;
        padding: 0.6em 0.5em;
        color: #fff;
        border: 0.2em solid #ffde71;
        &::placeholder{
            color: white;
            font-family: Roboto;
            font-family: overPass-Light;
            padding-left: 20%;
        }
    }
    
    #input-keep-up-with-future:focus {
        outline: 3px solid transparent;
        border: 0.2em solid #ffde71;
        background-color: #fff;
        color: #40bad8;
        &::placeholder{
            color: #40bad8;
            font-family: Roboto;
            font-family: overPass-Light;
            padding-left: 20%;
        }
    }
    input{
        color: greenyellow;
    }
    
    #submit-keep-up-with-future{
        font-size: larger;
        background-color: #fff; 
        padding: 0.73em em;
        color: #40bad8;
        border: #fff;
    }
}

@media (max-width: 520px){
    .row-keep-up-with-our-future{
        padding: 8vw 06vw;
    }

    #input-keep-up-with-future {
        font-size: larger;
        background-color: transparent;
        outline: 3px solid transparent;
        padding: 0.45em 0.5em;
        color: #fff;
        border: 0.2em solid #ffde71;
        &::placeholder{
            color: white;
            font-family: Roboto;
            font-family: overPass-Light;
            padding-left: 20%;
        }
    }
    
    #input-keep-up-with-future:focus {
        outline: 3px solid transparent;
        border: 0.2em solid #ffde71;
        background-color: #fff;
        color: #40bad8;
        &::placeholder{
            color: #40bad8;
            font-family: Roboto;
            font-family: overPass-Light;
            padding-left: 20%;
        }
    }
    input{
        color: greenyellow;
    }

    #submit-keep-up-with-future{
        font-size: larger;
        background-color: #fff; 
        padding: 0.6em 1.3em;
        color: #40bad8;
        border: #fff;
    }
}

@media (max-width: 465px){

    #input-keep-up-with-future {
        padding: 0.3em 0.1em;
    }

    #submit-keep-up-with-future{
        padding: 0.45em 0.45em;
    }
}

@media (max-width: 380px){

    #input-keep-up-with-future {
        padding: 0.3em 0.1em;
    }

    #submit-keep-up-with-future{
        padding: 0.45em 4.75em;
    }
}

@media (max-width: 260px){

    .row-keep-up-with-our-future{
        display: none;
    }
}

@media (min-width: 520px){
    #submit-keep-up-with-future{
        padding: 0.76em 1.90em;
    }
}


@media (min-width: 900px){
    #input-keep-up-with-future {
        padding: 0.45em 0.2em;
    }
    #submit-keep-up-with-future{
        padding: 0.6em 1.60em;
    }
}

@media (min-width: 950px){
    .row-keep-up-with-our-future{
        padding: 8vw 06vw;
    }
}

@media (min-width: 1200px){
    .row-keep-up-with-our-future{
        padding: 8vw 08vw;
    }
}

@media (min-width: 1300px){
    .row-keep-up-with-our-future{
        padding: 8vw 8vw;
    }
}

@media (min-width: 1400px){
    .row-keep-up-with-our-future{
        padding: 8vw 6vw;
    }
}


@media (min-width: 1430px){
    .row-keep-up-with-our-future{
        padding: 8vw 4vw;
    }
}


@media (min-width: 1500px){
    .row-keep-up-with-our-future{
        padding: 8vw 0vw;
    }
}

@media (min-width: 1600px){
    .row-keep-up-with-our-future{
        padding: 8vw 0vw;
    }
    .col-half-left-keep-up-with-our-future-wrapper{
        justify-content: flex-start;
    }
    .col-half-left-keep-up-with-our-future{
        /* background-color: #6cd04c; */
        text-align: left;
        position: relative;
        left: 13vw;
    }
}

@media (min-width: 1800px){
    .row-keep-up-with-our-future{
        padding: 8vw 9vw;
    }
    .col-half-left-keep-up-with-our-future{
        left: 6vw;
    }
}

@media (min-width: 1900px){
    .row-keep-up-with-our-future{
        padding: 8vw 11vw;
    }
    .col-half-left-keep-up-with-our-future{
        left: 6vw;
    }
}

@media (min-width: 2200px){
    .row-keep-up-with-our-future{
        padding: 8vw 9vw;
    }
    .col-half-left-keep-up-with-our-future{
        left: 9vw;
    }
}

@media (min-width: 2200px){
    .row-keep-up-with-our-future{
        padding: 8vw 11vw;
    }
    .col-half-left-keep-up-with-our-future{
        left: 9vw;
    }
}