*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
    font-family: 'monteserrat';
    /* background-color: rgb(216, 216, 216); */
    background-color: white;
}
.headline{
    text-align: center;
    margin-top: 10%;
    margin-bottom: 5%;
}

.headline span{
    color: rgb(34, 34, 124);
}
.headline p{
    color: rgb(119, 117, 117);
    font-size: 20px;
    font-weight: 500;
}
img{
    height: 180px;
    width: 180px;
    filter: grayscale(0);
    border-radius: 50%;
}


.info p{
    color: rgb(119, 117, 117);
    font-size: 20px;
    font-weight: 500;
}

img:hover{
    filter: grayscale(1);
    transition: 0.5s;
    transform: scale(1.1);
}

.grid-container{
    display: grid;
    grid-template-areas: 
    'card-1 card-2 card-3 card-4';
    width: 80%;
    margin: auto;
    grid-gap: 60px;
    margin-top: 10px;
}
/* 
.grid-container{
    display: grid;
    grid-template-areas: 
    'card-5 card-6 card-7 card-8';
    width: 80%;
    margin: auto;
    grid-gap: 60px;
} */





.card-1{
    grid-area: card-1;
    margin-left: 10px;
    /* background-color: green; */
}


.card-2{
    grid-area: card-2;
    /* background-color: yellow; */

}


.card-2 h3{
    width: 120%;

}


.card-3{
    grid-area: card-3;
    /* background-color: blueviolet; */
}


.card-4{
    grid-area: card-4;
    /* margin-top: 310px; */
    /* margin-left: -1200px; */
    /* background-color: red; */
    width: 100%;
}


/* .card-4 p{
    width: 120%;
} */

.card-5{
    grid-area: card-5;
    /* margin-top: 310px; */
    /* margin-left: -800px; */
    background-color: orange;


}


.card-5 h3{
    width: 100%;
}

.card-6{
    grid-area: card-6;
    /* margin-top: 310px;
    margin-left: -400px; */
    background-color: rgb(0, 8, 255);
    

}


.card-7{
    grid-area: card-7;
    margin-top: 310px;
    margin-left: -900px;
}


.card-8{
    grid-area: card-8;
    margin-top: 310px;
    margin-left: -500px;
}


.card-9{
    grid-area: card-9;
    margin-top: 600px;
    margin-left: -1800px;
}


.card-10{
    grid-area: card-10;
    margin-top: 600px;
    margin-left: -1400px;
}

/* span{
    color: green;
} */


.card{
    text-align: center;
}

.info{
    margin-top: 15px;
}

h3{
    /* color: rgb(82, 82, 219); */
    color: rgb(0, 0, 96);
    font-size: 20px;

    
}
.info p{
    font-size: 14px;
    font-weight: 500;
}

.social-media span{
    margin-right: 5px;
    margin-top: 15px;
}

.social-media span:hover{
    transform: scale(1.5);
    transition: 0.5s;
}







/* ----------VIDEO CONTNT BUTTN FOR RECENT JOBS---------- */


.teamvideocontentbutton a{
    text-decoration: none;
    display: inline-block;
    color: rgb(4, 4, 4);


    background-color: rgb(255, 160, 71);

    font-size: 14px;
    border: 3px solid rgb(255, 160, 71);
    padding: 7px 15px;
    border-radius: 50px;
    /* margin-top: 10px; */
    /* margin-left: 250px; */
}


.teamvideocontentbutton a:hover{
    border: 1px solid rgb(234, 130, 33);
    background: rgb(234, 130, 33);
    transition: 1s;
    color: black;
}







@media only screen and (min-width: 321px) and (max-width: 380px) {
    body{
        font-family: verdana,sans-serif;
    }



    .headline{
        text-align: center;
        margin-top: 10%;
        margin-bottom: 5%;
    }

    .headline span{
        color: rgb(34, 34, 124);
    }
    .headline p{
        color: rgb(119, 117, 117);
        font-size: 14px;
        font-weight: 500;
    }
    img{
        height: 180px;
        width: 180px;
        filter: grayscale(0);
        border-radius: 50%;
    }


    .info p{
        color: rgb(119, 117, 117);
        font-size: 20px;
        font-weight: 500;
    }

    img:hover{
        filter: grayscale(1);
        transition: 0.5s;
        transform: scale(1.1);
    }

    .grid-container{
        display: inline;
        grid-template-areas: 
        'card-1 card-2 card-3 card-4';
        width: 80%;
        margin: auto;
        grid-gap: 60px;
        margin-top: 10px;
    }
    /* 
    .grid-container{
        display: grid;
        grid-template-areas: 
        'card-5 card-6 card-7 card-8';
        width: 80%;
        margin: auto;
        grid-gap: 60px;
    } */





    .card-1{
        grid-area: card-1;
        margin-left: 10px;
        /* background-color: green; */
        margin-top: 50px;
    }


    .card-2{
        grid-area: card-2;
        /* background-color: yellow; */
        margin-top: 50px;

    }


    .card-2 h3{
        width: 100%;

    }


    .card-3{
        grid-area: card-3;
        /* background-color: blueviolet; */
        margin-top: 50px;
    }


    .card-4{
        grid-area: card-4;
        /* margin-top: 310px; */
        /* margin-left: -1200px; */
        /* background-color: red; */
        width: 100%;
        margin-top: 50px;
    }


    /* .card-4 p{
        width: 120%;
    } */

    .card-5{
        grid-area: card-5;
        /* margin-top: 310px; */
        /* margin-left: -800px; */
        background-color: orange;


    }


    .card-5 h3{
        width: 100%;
    }

    .card-6{
        grid-area: card-6;
        /* margin-top: 310px;
        margin-left: -400px; */
        background-color: rgb(0, 8, 255);
        

    }


    .card-7{
        grid-area: card-7;
        margin-top: 310px;
        margin-left: -900px;
    }


    .card-8{
        grid-area: card-8;
        margin-top: 310px;
        margin-left: -500px;
    }


    .card-9{
        grid-area: card-9;
        margin-top: 600px;
        margin-left: -1800px;
    }


    .card-10{
        grid-area: card-10;
        margin-top: 600px;
        margin-left: -1400px;
    }

    /* span{
        color: green;
    } */


    .card{
        text-align: center;
    }

    .info{
        margin-top: 15px;
    }

    h3{
        /* color: rgb(82, 82, 219); */
        color: rgb(0, 0, 96);
        font-size: 20px;

        
    }
    .info p{
        font-size: 14px;
        font-weight: 500;
    }

    .social-media span{
        margin-right: 5px;
        margin-top: 15px;
    }

    .social-media span:hover{
        transform: scale(1.5);
        transition: 0.5s;
    }







    /* ----------VIDEO CONTNT BUTTN FOR RECENT JOBS---------- */


    .teamvideocontentbutton a{
        text-decoration: none;
        display: inline-block;
        color: rgb(4, 4, 4);


        background-color: rgb(255, 160, 71);

        font-size: 14px;
        border: 3px solid rgb(255, 160, 71);
        padding: 7px 15px;
        border-radius: 50px;
        /* margin-top: 10px; */
        /* margin-left: 250px; */
    }


    .teamvideocontentbutton a:hover{
        border: 1px solid rgb(234, 130, 33);
        background: rgb(234, 130, 33);
        transition: 1s;
        color: black;
    }

}





@media only screen and (min-width: 381px) and (max-width: 539px) {
    body{
        font-family: verdana,sans-serif;
    }



    .headline{
        text-align: center;
        margin-top: 10%;
        margin-bottom: 5%;
    }

    .headline span{
        color: rgb(34, 34, 124);
    }
    .headline p{
        color: rgb(119, 117, 117);
        font-size: 14px;
        font-weight: 500;
    }
    img{
        height: 180px;
        width: 180px;
        filter: grayscale(0);
        border-radius: 50%;
    }


    .info p{
        color: rgb(119, 117, 117);
        font-size: 20px;
        font-weight: 500;
    }

    img:hover{
        filter: grayscale(1);
        transition: 0.5s;
        transform: scale(1.1);
    }

    .grid-container{
        display: inline;
        grid-template-areas: 
        'card-1 card-2 card-3 card-4';
        width: 80%;
        margin: auto;
        grid-gap: 60px;
        margin-top: 10px;
    }
    /* 
    .grid-container{
        display: grid;
        grid-template-areas: 
        'card-5 card-6 card-7 card-8';
        width: 80%;
        margin: auto;
        grid-gap: 60px;
    } */





    .card-1{
        grid-area: card-1;
        margin-left: 10px;
        /* background-color: green; */
        margin-top: 50px;
    }


    .card-2{
        grid-area: card-2;
        /* background-color: yellow; */
        margin-top: 50px;

    }


    .card-2 h3{
        width: 100%;

    }


    .card-3{
        grid-area: card-3;
        /* background-color: blueviolet; */
        margin-top: 50px;
    }


    .card-4{
        grid-area: card-4;
        /* margin-top: 310px; */
        /* margin-left: -1200px; */
        /* background-color: red; */
        width: 100%;
        margin-top: 50px;
    }


    /* .card-4 p{
        width: 120%;
    } */

    .card-5{
        grid-area: card-5;
        /* margin-top: 310px; */
        /* margin-left: -800px; */
        background-color: orange;


    }


    .card-5 h3{
        width: 100%;
    }

    .card-6{
        grid-area: card-6;
        /* margin-top: 310px;
        margin-left: -400px; */
        background-color: rgb(0, 8, 255);
        

    }


    .card-7{
        grid-area: card-7;
        margin-top: 310px;
        margin-left: -900px;
    }


    .card-8{
        grid-area: card-8;
        margin-top: 310px;
        margin-left: -500px;
    }


    .card-9{
        grid-area: card-9;
        margin-top: 600px;
        margin-left: -1800px;
    }


    .card-10{
        grid-area: card-10;
        margin-top: 600px;
        margin-left: -1400px;
    }

    /* span{
        color: green;
    } */


    .card{
        text-align: center;
    }

    .info{
        margin-top: 15px;
    }

    h3{
        /* color: rgb(82, 82, 219); */
        color: rgb(0, 0, 96);
        font-size: 20px;

        
    }
    .info p{
        font-size: 14px;
        font-weight: 500;
    }

    .social-media span{
        margin-right: 5px;
        margin-top: 15px;
    }

    .social-media span:hover{
        transform: scale(1.5);
        transition: 0.5s;
    }







    /* ----------VIDEO CONTNT BUTTN FOR RECENT JOBS---------- */


    .teamvideocontentbutton a{
        text-decoration: none;
        display: inline-block;
        color: rgb(4, 4, 4);


        background-color: rgb(255, 160, 71);

        font-size: 14px;
        border: 3px solid rgb(255, 160, 71);
        padding: 7px 15px;
        border-radius: 50px;
        /* margin-top: 10px; */
        /* margin-left: 250px; */
    }


    .teamvideocontentbutton a:hover{
        border: 1px solid rgb(234, 130, 33);
        background: rgb(234, 130, 33);
        transition: 1s;
        color: black;
    }

}










@media only screen and (min-width: 540px) and (max-width: 620px) {
    body{
        font-family: verdana,sans-serif;
    }



    .headline{
        text-align: center;
        margin-top: 10%;
        margin-bottom: 5%;
    }

    .headline span{
        color: rgb(34, 34, 124);
    }
    .headline p{
        color: rgb(119, 117, 117);
        font-size: 15px;
        font-weight: 500;
    }
    img{
        height: 180px;
        width: 180px;
        filter: grayscale(0);
        border-radius: 50%;
    }


    .info p{
        color: rgb(119, 117, 117);
        font-size: 20px;
        font-weight: 500;
    }

    img:hover{
        filter: grayscale(1);
        transition: 0.5s;
        transform: scale(1.1);
    }

    .grid-container{
        display: list-item;
        grid-template-areas: 
        'card-1 card-2 card-3 card-4';
        width: 50%;
        margin: auto;
        grid-gap: 60px;
        margin-top: 10px;
    }
    /* 
    .grid-container{
        display: grid;
        grid-template-areas: 
        'card-5 card-6 card-7 card-8';
        width: 80%;
        margin: auto;
        grid-gap: 60px;
    } */





    .card-1{
        grid-area: card-1;
        margin-left: 10px;
        /* background-color: green; */
        margin-top: 50px;
    }


    .card-2{
        grid-area: card-2;
        /* background-color: yellow; */
        margin-top: 50px;

    }


    .card-2 h3{
        width: 120%;

    }


    .card-3{
        grid-area: card-3;
        /* background-color: blueviolet; */
        margin-top: 50px;

    }


    .card-4{
        grid-area: card-4;
        margin-top: 50px;
    }


    /* .card-4 p{
        width: 120%;
    } */

    .card-5{
        grid-area: card-5;
        /* margin-top: 310px; */
        /* margin-left: -800px; */
        background-color: orange;


    }


    .card-5 h3{
        width: 100%;
    }

    .card-6{
        grid-area: card-6;
        /* margin-top: 310px;
        margin-left: -400px; */
        background-color: rgb(0, 8, 255);
        

    }


    .card-7{
        grid-area: card-7;
        margin-top: 310px;
        margin-left: -900px;
    }


    .card-8{
        grid-area: card-8;
        margin-top: 310px;
        margin-left: -500px;
    }


    .card-9{
        grid-area: card-9;
        margin-top: 600px;
        margin-left: -1800px;
    }


    .card-10{
        grid-area: card-10;
        margin-top: 600px;
        margin-left: -1400px;
    }

    /* span{
        color: green;
    } */


    .card{
        text-align: center;
    }

    .info{
        margin-top: 15px;
    }

    h3{
        /* color: rgb(82, 82, 219); */
        color: rgb(0, 0, 96);
        font-size: 20px;

        
    }
    .info p{
        font-size: 14px;
        font-weight: 500;
    }

    .social-media span{
        margin-right: 5px;
        margin-top: 15px;
    }

    .social-media span:hover{
        transform: scale(1.5);
        transition: 0.5s;
    }







    /* ----------VIDEO CONTNT BUTTN FOR RECENT JOBS---------- */


    .teamvideocontentbutton a{
        text-decoration: none;
        display: inline-block;
        color: rgb(4, 4, 4);


        background-color: rgb(255, 160, 71);

        font-size: 14px;
        border: 3px solid rgb(255, 160, 71);
        padding: 7px 15px;
        border-radius: 50px;
        /* margin-top: 10px; */
        /* margin-left: 250px; */
    }


    .teamvideocontentbutton a:hover{
        border: 1px solid rgb(234, 130, 33);
        background: rgb(234, 130, 33);
        transition: 1s;
        color: black;
    }


}











@media only screen and (min-width: 768px) and (max-width: 1022px) {
    body{
        font-family: verdana,sans-serif;
    }



    .headline{
        text-align: center;
        margin-top: 10%;
        margin-bottom: 5%;
    }

    .headline span{
        color: rgb(34, 34, 124);
    }
    .headline p{
        color: rgb(119, 117, 117);
        font-size: 15px;
        font-weight: 500;
    }
    img{
        height: 180px;
        width: 180px;
        filter: grayscale(0);
        border-radius: 50%;
    }


    .info p{
        color: rgb(119, 117, 117);
        font-size: 20px;
        font-weight: 500;
    }

    img:hover{
        filter: grayscale(1);
        transition: 0.5s;
        transform: scale(1.1);
    }

    .grid-container{
        display: list-item;
        grid-template-areas: 
        'card-1 card-2 card-3 card-4';
        width: 50%;
        margin: auto;
        grid-gap: 60px;
        margin-top: 10px;
    }
    /* 
    .grid-container{
        display: grid;
        grid-template-areas: 
        'card-5 card-6 card-7 card-8';
        width: 80%;
        margin: auto;
        grid-gap: 60px;
    } */





    .card-1{
        grid-area: card-1;
        margin-left: 10px;
        /* background-color: green; */
        margin-top: 50px;
    }


    .card-2{
        grid-area: card-2;
        /* background-color: yellow; */
        margin-top: 50px;

    }


    .card-2 h3{
        width: 120%;

    }


    .card-3{
        grid-area: card-3;
        /* background-color: blueviolet; */
        margin-top: 50px;

    }


    .card-4{
        grid-area: card-4;
        margin-top: 50px;
    }


    /* .card-4 p{
        width: 120%;
    } */

    .card-5{
        grid-area: card-5;
        /* margin-top: 310px; */
        /* margin-left: -800px; */
        background-color: orange;


    }


    .card-5 h3{
        width: 100%;
    }

    .card-6{
        grid-area: card-6;
        /* margin-top: 310px;
        margin-left: -400px; */
        background-color: rgb(0, 8, 255);
        

    }


    .card-7{
        grid-area: card-7;
        margin-top: 310px;
        margin-left: -900px;
    }


    .card-8{
        grid-area: card-8;
        margin-top: 310px;
        margin-left: -500px;
    }


    .card-9{
        grid-area: card-9;
        margin-top: 600px;
        margin-left: -1800px;
    }


    .card-10{
        grid-area: card-10;
        margin-top: 600px;
        margin-left: -1400px;
    }

    /* span{
        color: green;
    } */


    .card{
        text-align: center;
    }

    .info{
        margin-top: 15px;
    }

    h3{
        /* color: rgb(82, 82, 219); */
        color: rgb(0, 0, 96);
        font-size: 20px;

        
    }
    .info p{
        font-size: 14px;
        font-weight: 500;
    }

    .social-media span{
        margin-right: 5px;
        margin-top: 15px;
    }

    .social-media span:hover{
        transform: scale(1.5);
        transition: 0.5s;
    }







    /* ----------VIDEO CONTNT BUTTN FOR RECENT JOBS---------- */


    .teamvideocontentbutton a{
        text-decoration: none;
        display: inline-block;
        color: rgb(4, 4, 4);


        background-color: rgb(255, 160, 71);

        font-size: 14px;
        border: 3px solid rgb(255, 160, 71);
        padding: 7px 15px;
        border-radius: 50px;
        /* margin-top: 10px; */
        /* margin-left: 250px; */
    }


    .teamvideocontentbutton a:hover{
        border: 1px solid rgb(234, 130, 33);
        background: rgb(234, 130, 33);
        transition: 1s;
        color: black;
    }


}















@media only screen and (min-width: 1023px) and (max-width: 1073px) {
    body{
        font-family: verdana,sans-serif;
    }



    .headline{
        text-align: center;
        margin-top: 10%;
        margin-bottom: 5%;
    }

    .headline span{
        color: rgb(34, 34, 124);
    }
    .headline p{
        color: rgb(119, 117, 117);
        font-size: 20px;
        font-weight: 500;
    }
    img{
        height: 180px;
        width: 180px;
        filter: grayscale(0);
        border-radius: 50%;
    }


    .info p{
        color: rgb(119, 117, 117);
        font-size: 20px;
        font-weight: 500;
    }

    img:hover{
        filter: grayscale(1);
        transition: 0.5s;
        transform: scale(1.1);
    }

    .grid-container{
        display: grid;
        grid-template-areas: 
        'card-1 card-2 card-3 card-4';
        width: 80%;
        margin: auto;
        grid-gap: 60px;
        margin-top: 10px;
        margin-left: 40px;
    }
    /* 
    .grid-container{
        display: grid;
        grid-template-areas: 
        'card-5 card-6 card-7 card-8';
        width: 80%;
        margin: auto;
        grid-gap: 60px;
    } */





    .card-1{
        grid-area: card-1;
        margin-left: 10px;
        /* background-color: green; */
    }


    .card-2{
        grid-area: card-2;
        /* background-color: yellow; */

    }


    .card-2 h3{
        width: 120%;

    }


    .card-3{
        grid-area: card-3;
        /* background-color: blueviolet; */
    }


    .card-4{
        grid-area: card-4;
        /* margin-top: 310px; */
        /* margin-left: -1200px; */
        /* background-color: red; */
        width: 100%;
    }


    /* .card-4 p{
        width: 120%;
    } */

    .card-5{
        grid-area: card-5;
        /* margin-top: 310px; */
        /* margin-left: -800px; */
        background-color: orange;


    }


    .card-5 h3{
        width: 100%;
    }

    .card-6{
        grid-area: card-6;
        /* margin-top: 310px;
        margin-left: -400px; */
        background-color: rgb(0, 8, 255);
        

    }


    .card-7{
        grid-area: card-7;
        margin-top: 310px;
        margin-left: -900px;
    }


    .card-8{
        grid-area: card-8;
        margin-top: 310px;
        margin-left: -500px;
    }


    .card-9{
        grid-area: card-9;
        margin-top: 600px;
        margin-left: -1800px;
    }


    .card-10{
        grid-area: card-10;
        margin-top: 600px;
        margin-left: -1400px;
    }

    /* span{
        color: green;
    } */


    .card{
        text-align: center;
    }

    .info{
        margin-top: 15px;
    }

    h3{
        /* color: rgb(82, 82, 219); */
        color: rgb(0, 0, 96);
        font-size: 20px;

        
    }
    .info p{
        font-size: 14px;
        font-weight: 500;
    }

    .social-media span{
        margin-right: 5px;
        margin-top: 15px;
    }

    .social-media span:hover{
        transform: scale(1.5);
        transition: 0.5s;
    }







    /* ----------VIDEO CONTNT BUTTN FOR RECENT JOBS---------- */


    .teamvideocontentbutton a{
        text-decoration: none;
        display: inline-block;
        color: rgb(4, 4, 4);


        background-color: rgb(255, 160, 71);

        font-size: 14px;
        border: 3px solid rgb(255, 160, 71);
        padding: 7px 15px;
        border-radius: 50px;
        /* margin-top: 10px; */
        /* margin-left: 250px; */
    }


    .teamvideocontentbutton a:hover{
        border: 1px solid rgb(234, 130, 33);
        background: rgb(234, 130, 33);
        transition: 1s;
        color: black;
    }

}