/*-------------------------- 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: 62%;
    left: 40%;
    transform: translate(-50%, -50%);
    text-align: left;
    background-color : rgba(51, 170, 51, .1)
}

.text-box-para-wrapper{
    position: absolute;
    width: 37%;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 77%;
    font-size: large;
}

.text-box-para{
    width: 100%;
    color: #fff;
    position: relative;
    
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: justify;
}


.heading-size{
    font-size: 40px;
}




@media(max-width: 1100px){
    .text-box{
        /* background-color: #849b00; */
        top: 50%;
        width: 50%;
        left: 50%;
    }
    .text-box-para-wrapper{
        width: 37%;
        top: 77%;
        font-size: large;
    }
    
    .heading-size{
        font-size: 4.5vw;
        line-height: 42px;
    }
}

@media(max-width: 950px){
    .text-box-para-wrapper{
        width: 37%;
        top: 82%;
        font-size: large;
    }

    .heading-size{
        font-size: 5vw;
        line-height: 33px;
    }

}


@media(max-width: 900px){
    .text-box{
        /* background-color: #849b00; */
        top: 78%;
        width: 65%;
    }

    .text-box-para-wrapper{
        display: none;
    }

    
    .heading-size{
        font-size: 6vw;
        line-height: 33px;
    }
}

@media(max-width: 610px){
    .text-box{
        /* background-color: #849b00; */
        top: 78%;
        width: 79%;
    }
    .heading-size{
        font-size: 7.2vw;
        line-height: 42px;
    }
    .img-sec{
        height: 225px;
        object-fit: cover;
    }
}

@media(max-width: 510px){

    .text-box{
        /* background-color: #849b00; */
        top: 78%;
        width: 70%;
    }
    .heading-size{
        font-size: 7vw;
        line-height: 27px;
    }
}

@media(max-width: 410px){

    .text-box{
        /* background-color: #849b00; */
        top: 78%;
        width: 80%;
    }
    .heading-size{
        font-size: 8vw;
        line-height: 29px;
    }
}

@media(max-width: 350px){

    .text-box{
        width: 90%;
    }
}


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

    .heading-size{
        font-size: 4vw;
        line-height: 42px;
    }

    .img-sec{
        height: 80vh;
        object-fit: cover;
    }
}

@media(min-width: 1200px){
    .text-box{
        /* background-color: #849b00; */
        top: 50%;
        width: 50%;
    }
    .heading-size{
        font-size: 4vw;
        line-height: 42px;
    }
}

@media(min-width: 1350px){
    .text-box{
        /* background-color: #849b00; */
        top: 50%;
        width: 50%;
    }
    .heading-size{
        line-height: 4vw;
    }
}


img {
    image-rendering: crisp-edges;
}


@media(min-width: 1500px){
    .text-box{
        /* background-color: #849b00; */
        top: 50%;
        width: 45%;
    }
    .heading-size{
        font-size: 3.7vw;
    }
}

@media(min-width: 1600px){
    .text-box{
        /* background-color: #849b00; */
        top: 50%;
        width: 40%;
    }
    .heading-size{
        font-size: 3.3vw;
        line-height: 3.5vw;
    }
}

@media(min-width: 1800px){
    .text-box{
        /* background-color: #849b00; */
        top: 50%;
        width: 40%;
    }
    .heading-size{
        font-size: 3vw;
    }
}


/*-------------------------- 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;
    }
}