*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    scroll-behavior: smooth;
    
}

/* -----------------------------------------------------------HEADER---------------------------------------------------------- */

/* -----------------------------------------------------responsive for 912PX--------------------------------------------------------------------------------------------------------------------------- */
body{
    font-family: verdana,sans-serif;
    /* background: linear-gradient(to bottom, rgba(234, 234, 230, 0.5)); */
}


.extra-colorzz{
    background-color: white;
    height: 7vh;
}


/* ----------Hero---------- */
#hero{
    /* background-image: url(images/lionel-messi-sport-footballers-wallpaper-5450a0bae1d6b8ca376c0ee9bfeaed9b.jpg); */
    /* background-image: url(images/soccer-lionel-messi-argentinian-wallpaper-3060d5b96f06ee23f8df87c65be66498.jpg); */
    /* background-image: url(images/lionel-messi-fcb-barcelona-fc-barcelona-wallpaper-preview.jpg); */
    /* background-image: url(images/lionel-messi-soccer-football-wallpaper-preview.jpg); */
    /* background-image: url(images/football-club-form-player-wallpaper-preview.jpg); */
    /* background-image: url(images/soccer-paulo-dybala-argentinian-juventus-f-c-wallpaper-preview.jpg); */
    /* background-image: url(images/football-the-best-players-2016-soccer-lionel-messi-wallpaper-8816bdf880a04c08007c212ea8f2e49a.jpg); */
    /* background-image: url(websiteimages/gal1/SPORT\ COMPLEX.jpg); */
    /* background-image: url(images/action-art-artistic-athletic-d9ac803715075f22cde03edf1bff49bb.jpg); */
    /* background-image: url(images/soccer-kylian-mbappe-french-world-cup-2018-wallpaper-f8268caa6facb7992eb0c982f2590be0.jpg); */
    /* background-image: url(images/64a5c3ac757e775eef042fc7_withmeta.jpg); */
    /* background-image: url(images/depositphotos_165317552-stock-photo-cheerful-delivery-man-happy-young.jpg); */
    /* background-image: url(images/landingimage.jpeg); */
    /* background-image: url(images/m.jpeg), linear-gradient(rgba(4,9,30,0.75),rgba(26, 29, 42, 0.55)); */
    background-image: linear-gradient(rgba(4,9,30,0.85),rgba(26, 29, 42, 0.75)),url(websiteimages/gal1/SPORT\ COMPLEX.jpg);

 
  

    height: 110vh;
    width: 100%;
    background-size: cover;
    background-position: top 25% left 1px;
    /* padding: 0 80px; */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    /* background-color: linear-gradient(to bottom, rgba(167, 31, 31, 0.5),rgb(56, 3, 3)); */
}

#hero h4{
    padding-bottom: 15px;
    margin-left: 300px;
    color: white;
    font-size: 60px;
    margin-top: -100px;
    text-align: center;
}



#hero h4 span{
    /* padding-bottom: 15px;
    margin-left: 100px; */
    color: rgb(56, 56, 230);
    font-size: 60px;
    /* margin-top: -100px;
    text-align: center; */
}
#hero h1{
    color: purple;
    margin-left: 200px;
}

#hero h2{
    color: white;
    margin-left: 280px;
    text-align: center;
    font-size: 16px;
}

#hero p{
    /* color: black; */
    margin-left: 600px;
}
#hero button{
    background-image: url(images/skull-graffiti-background-skull-graffiti-wallpaper-skull-graffiti-pattern-graffiti-background-graffiti-art-graffiti-wallpaper-ai-generative-photo.jpg);
    /* background-image: url(images/images.jpeg); */
    background-color: transparent;
    color: white;
    font-size: 30px;
    font-weight: 700;
    border-radius: 10px;
    border: 0;
    padding: 14px 80px 14px 65px;
    background-repeat: no-repeat;
    cursor: pointer;

}



#hero a{
    text-decoration: none;
    display: inline-block;
    color: white;
   
    background-color: rgb(56, 56, 230);
   
    font-size: 24px;
    border: 3px solid rgb(56, 56, 230);

    padding: 12px 20px;
    border-radius: 15px;
    margin-left: 500px;

    margin-top: 20px;
}

#hero a:hover{
    border: 1px solid rgb(56, 56, 230);
    background: rgb(64, 62, 62);
    transition: 1s;
    color: white;
}




/* ----------------------------Trust Bar------------------------- */



.trustafter-about-us .office-image{
    height: 25vh;
    /* background-image: url(websiteimages/gal1/grey1.jpg); */
    background-size: cover;
    margin-top: -50px;
    width: 100%;
    /* margin-left: 600px; */
}


.trustafter-about-us .office-image h1{
    /* color: rgb(86, 86, 86); */
    color: rgb(73, 70, 70);
    /* text-align: left; */
    font-size: 20px;
    font-weight: 600;
    margin-left: 50px;
    font-style: italic;
}

.trustafter-about-us .office-image h2{
    /* color: rgb(86, 86, 86); */
    color: rgb(73, 70, 70);
    /* text-align: left; */
    font-size: 20px;
    font-weight: 600;
    margin-left: 600px;
    font-style: italic;
    margin-top: -50px;
}

.trustafter-about-us .office-image h3{
    /* color: rgb(86, 86, 86); */
    color: rgb(73, 70, 70);
    /* text-align: left; */
    font-size: 20px;
    font-weight: 600;
    margin-left: 50px;
    font-style: italic;
}

.trustafter-about-us .office-image h4{
    /* color: rgb(86, 86, 86); */
    color: rgb(73, 70, 70);
    /* text-align: left; */
    font-size: 20px;
    font-weight: 600;
    margin-left: 600px;
    font-style: italic;
    margin-top: -30px;
}
.trustafter-about-us .office-image h5{
    /* color: rgb(86, 86, 86); */
    color: rgb(73, 70, 70);
    /* text-align: left; */
    font-size: 20px;
    font-weight: 600;
    margin-left: 50px;
    font-style: italic;
}

/* ----------------------------video header------------------------- */

#videoheader{
    width: 100%;
    height: 100vh;

    position: relative;
    padding: 0 5%;
    display: flex;
    align-items: center;
    justify-content: center;

 

}

.videocontent{

    text-align: center;
    margin-top: -100px;


}

.videocontent h1{
    font-size: 40px;
    color: white;
    font-weight: 600;
}



.videocontent p{
    font-size: 20px;


    color: white;
  
    margin-top: 100px;
}



.videocontent a{
    text-decoration: none;
    display: inline-block;
    color: rgb(20, 20, 20);
   
    background-color: rgb(83, 83, 187);
   
    font-size: 24px;
    border: 3px solid rgb(83, 83, 187);

    padding: 14px 30px;

    margin-top: 20px;
}

.videocontent a:hover{
    border: 1px solid rgb(56, 56, 230);
    background: rgb(64, 62, 62);
    transition: 1s;
    color: white;
    }

.back-video{
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
    background-size: cover;
}

video{
    height: 140vh;
    width: 1600px;

}




/* ------------------------------------------------------ORIENTATION------------------------------------- */


.orientation {
    background-image: url(websiteimages/oientation.JPG);
    background-size: cover;
    height: 60vh;
}
.orientation h3{
    font-size: 36px;
    font-weight: 200;
    color: rgb(77, 73, 134);
    margin-top: 10px;
    text-align: center;

}



.orientation h2{
    font-size: 26px;
    font-weight: 100;
    color: black;
    margin-top: 40px;
    text-align: center;

}


.orientation h2 span{
    font-size: 30px;
    font-weight: 100;
    color: rgb(56, 56, 230);
    margin-top: 40px;
    text-align: center;

}

.orientation p{
    font-size: 16px;
    font-weight: 20;
    color: black;
    margin-top: 30px;
    text-align: center;

}


/* ----------- ABOUT US------------------------------------------------------------------------------------------------ */

/* #about-us{
    background-color: white;
} */
.about-us h3{
    width: 30%;
    font-size: 25px;
    font-weight: 600 ;
    color: rgb(4, 3, 3);
    padding: 10px;
    margin-top: 200px;
    /* margin-bottom: 30px; */
    text-align: center;
    /* border-bottom: 3px solid rgb(4, 3, 3); */
    /* border-bottom: 3px solid rgb(54, 54, 208); */
    margin-left: 20px;

}



.about-us h3 span{
    width: 300%;
    font-size: 25px;
    font-weight: 600 ;
    color: rgb(54, 54, 208);
    padding: 10px;
    margin-top: 100px;
    /* margin-bottom: 30px; */
    /* border-bottom: 3px solid rgb(54, 54, 208); */
    text-align: center;


}



.about-us{
    /* background-image: url(websiteimages/gal1/eg.png); */
    background-size: cover;
    /* background-image: linear-gradient(rgba(4,9,30,0.25),rgba(4,9,30,0.25 )),url(websiteimages/gal1/eliteg.png); */

    height: 100vh;
    /* background-color: red; */
    /* background-color: rgba(234, 234, 230, 0.5); */
    margin-top: -200px;

}

.yr12-pic {
    min-height: 15vh;
  
    width: 10%;
    background-image: url(websiteimages/12yrs.png);
  
    background-position: center;
    background-size: cover;
    position: relative;

    margin-left: 44%;
    
    

}


.about-us h4{
    width: 80%;
    margin: auto;
    text-align: center;
    font-size: 26px;
    font-weight: 500 ;
    color: whitesmoke;
   
    padding: 10px;
    padding-top: 25px;
    margin-left: 100px;
}

.yrs h4{
    width: 80%;
    margin: auto;
    text-align: center;
    font-size: 26px;
    font-weight: 500 ;
    color: whitesmoke;
   
    padding: 10px;
    margin-top: -50px;
    margin-left: 220px;
}



.of-services h4{
    width: 80%;
    margin: auto;
   
    font-size: 26px;
    font-weight: 500 ;
    color: whitesmoke;
   
    padding: 10px;
 
    margin-left: 220px;

}

.about-us p{
    width: 45%;
    margin: auto;
   
    padding-top: 50px;
    font-size: 16px;
    font-weight: 300 ;
    color: rgb(63, 61, 61);
  
    padding: 10px;
    margin-left: 16px;
    margin-top: 20px;
}




.about-us p span{
    width: 45%;
    margin: auto;
   
    padding-top: 50px;
    font-size: 24px;
    font-weight: 300 ;
    color: rgb(63, 61, 61);
  
    padding: 10px;

}

.about-us .office-image{
    height: 90vh;
    background-image: url(websiteimages/gal1/c.jpg);
    background-size: cover;
    margin-top: -430px;
    width: 50%;
    margin-left: 600px;

}

/* ------------------------------------------------------rgb(56, 56, 230) SPLASH IMAGE------------------------------------- */
.headerz{
    min-height: 70vh;
    width: 100%;
    background-image: url(websiteimages/IMG_8513.JPG);
    background-position: center;
    background-size: cover;
    position: relative;
  
}


.extra-color{
    background-color: white;
    min-height: 15vh;
    margin-top: 100px;
}


.extra-color2{
    background-color: white;
    min-height: 10vh;
    margin-top: 60px;
}

/* ---------------------------VISION N BRIEF------------------------------ */
.visionnbrief .see-all-articles-btn{
    display: inline-block;
    text-decoration: none;
    color: white;


    border: 1px solid blue;
    padding: 12px 20px;
    font-size: 13px;
    
    background: rgb(51, 95, 184);
    position: relative;
    cursor: pointer;
    border-radius: 15px;
    margin-top: 340px;
    margin-left: -1050px;


}


.see-all-articles-btn:hover{
    border: 1px solid rgb(51, 95, 184);
    background: transparent;
    font-size: 15px;
    transition: 1s;
    color: black;
}


#vnb {
    background-color: white;
    /* background-image: url(websiteimages/gal1/142195-blue-and-white-simple-background.jpg); */
    background-size: cover;
    margin-top: 320px;
    height: 100vh;



}

.visionnbrief{
    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 50px;
    font-size: 15px;
    color: black;
    padding: 10px;
    padding-bottom: 150px;
    margin-top: -320px;
    /* background-color: red; */
}


.vision-brief .vision{
    /* margin-top: 1%; */
    /* display: flex; */
    /* width: 100%; */
    /* background: red; */
    /* background-image: url(websiteimages/gal1/d.jpg); */
    /* background-size: cover; */
    height: 67vh;
    width: 100px;
    /* background-image: linear-gradient(rgba(46, 49, 59, 0.7),rgba(54, 57, 71, 0.7)),url(websiteimages/74717cc8-306b-44a1-8bbc-13daab4b73cd.JPG); */
    /* background-image: linear-gradient(rgba(220, 235, 11, 0.25),rgb(218, 216, 1110)),url(websiteimages/74717cc8-306b-44a1-8bbc-13daab4b73cd.JPG); */
    margin-top: -350px;
    margin-left: 550px;
    display: flex;
    width: 50%;
    background-size: cover;
  
    display: inline-block;
    flex-basis: 31%;
    border-radius: 10px;
    margin-bottom: 5px;
    padding: 20px 12px;
    box-sizing: border-box;
    transition: 0.5s;

}



.vision h3{
    text-align: center;

    font-size: 60px;
    font-weight: 600;
    margin: 10px 0;
    color: grey;
    margin-top: 100px;
}



.vision-brief P{
    text-align: left;
    font-size: 18px;
    margin: 10px 0;
    color: rgb(119, 117, 117);
    margin-left: -100px;
    margin-top:  -300px;
    /* margin-bottom: -300px; */

    width: 60%;
}


.vision-brief P span{
    font-size: 46px;
    color: rgb(54, 54, 208);
    /* margin-top:  -400px; */
}

/* .vision:hover{
    box-shadow: 0 0 20px 0px black;
} */





/* ------------------------------HEALTH AND SAFETY ENVIRONS---------------------- */

.safety{
    background-image: url(websiteimages/gal1/azazz.png);
    height: 70vh;
    background-size: cover;
    /* background-image: linear-gradient(rgba(238, 240, 245, 0.3),rgba(238, 240, 245, 0.3)),url(websiteimages/gal1/az.png); */
    margin-top: -100PX;
}

.healthandsafety h4{
    width: 30%;
    margin: auto;
    padding-top: 50px;
    font-size: 25px;
    font-weight: 600 ;
    color: rgb(4, 3, 3);
    margin-left: 100px;
    padding: 10px;
}

.healthandsafety h4 span{
    width: 30%;
    margin: auto;
    padding-top: 50px;
    font-size: 33px;
    font-weight: 600 ;
    color: rgb(4, 3, 3);   
    padding: 10px;
}

.safety h4{
    color: white;
}

.health-safety-pic p{
    width: 100%;
    font-size: 16px;
    font-weight: 600 ;
    color: white;

    
}

.health-safety-pic{
    min-height: 50vh;
    width: 35%;
   
    /* background-image: url(websiteimages/rgb(56, 56, 230).WEBP); */
    background-position: center;
    background-size: cover;
    position: relative;
    margin-left: 100px;
    margin-top: 80px;
    border-radius: 10px;
    /* background-image: linear-gradient(rgba(4, 4, 4, 0.855),rgba(7, 81, 7, 0.3)),url(websiteimages/rgb(56, 56, 230).WEBP); */

}

.health-safety-pic:hover{
    box-shadow: 0 0 20px 0px black;
}



/* --------------------------RECENT JOBS------------------------------------ */
/* ------------------------------------------------our services----------------------------------------- */
#jobour-services .videocontentbutton a{
    text-decoration: none;
    display: inline-block;
    color: rgb(4, 4, 4);


    background-color: white;

    font-size: 15px;
    border: 1px solid rgb(56, 56, 230);
    padding: 7px 40px;
    /* border-radius: 50px; */
    margin-top: 50px;
    margin-left: 510px;
    /* margin-bottom: 100px; */
}


#jobour-services .videocontentbutton a:hover{
    border: 1px solid rgb(56, 56, 230);
    background: rgb(56, 56, 230);
    transition: 1s;
    color: white;
    }


/* .videocontent{

    text-align: center;
    margin-top: -50px;


} */
#jobour-services{
    /* max-width: 1240px; */
    max-width: 100%;
    margin: 0 auto;
    padding: 5%;
    display: flex;
    justify-content: center;
    align-items: center;

    /* margin-top: -120px; */
    /* background-image: url(websiteimages/gal1/grey4.jpg); */
    /* background-color: red; */

    



}


.jobourservicesword{
    
    width: 60%;
    justify-content: space-around;
    margin-left: -150px;
    margin-top: 400px;

   

}

.ourservicesword h1{
    font-size: 25px;
    color: rgb(84, 80, 80);
    margin-top: -500px;
    font-weight: 200;
}




.ourservicesword h1 span{
    font-size: 25px;
    color: rgb(56, 56, 230);
    margin-top: 150px;
    font-weight: 600;
}


.ourservicesword p{
    font-size: 16px;
    color: rgb(49, 45, 45);

}





.ourservicesword p span{
    font-size: 20px;
    color: rgb(56, 56, 230);
    font-weight: 400;
}





.jobourservicewrapper{
        
    width: 100%;
    justify-content: space-around;
    margin-top: 90px;
    margin-left: -600px;
    
}

.serviceaaaa{
    margin-left: 210px;
    margin-top: -190px;
}
.serviceaaaa P{
    color: rgb(93, 90, 90);
    font-size: 14px;
}
.serviceaaaa h1{
    color: rgb(56, 56, 230);
}
.jobtry{
    width: 30%;
    margin-top: -350px;
    font-size: 20px;
    margin-left: 250px;
}

.jobtry h1{
    color: rgb(56, 56, 230);

}
.jobtry h1 span{
    color: rgb(4, 3, 3);
    /* border-bottom: 3px solid rgb(4, 3, 3); */
}

.jobourservicecard{
    width: 340px;
    height: 270px;
    padding: 2rem 1rem;
    background: #fff;
    position: relative;
    display: inline-block;
    align-items: flex-end;
    box-shadow: 0px 7px 10px rgba(0,0,0,0.5);
    transition: 0.5s ease-in-out;
 
    margin-top: 40px;
    margin-left: 30px;

  
}


/* .jobourservicecard:hover{
    transform: translateY(20px);
} */

.jobourservicecard:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5),rgb(193, 193, 193));
    z-index: 2;
    transition: 0.5s all;
    opacity: 0;
}


.jobourservicecard:hover:before{
    opacity: 1;
}




.jobourservicecard img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;

}



.jobourservicecard .ourserviceinfo{
    position: relative;
    z-index: 3;
    color: black;
    opacity: 0;
    transform: translateY(30px);
    transform: 0.5s all;
  
}


.jobourservicecard:hover .ourserviceinfo{
    opacity: 1;
    transform: translateY(0px);
}


.jobourservicecard .ourserviceinfo h1{
    margin: 0;
    color: rgb(4, 4, 4);
    /* color: rgb(34, 34, 189); */
    font-size: 14px;
    text-align: left;
}



.jobourservicecard .ourserviceinfo h1 span{
    margin: 0;
    /* color: rgb(4, 4, 4); */
    color: rgb(34, 34, 189);
    font-size: 20px;
    text-align: left;
}





.jobourservicecard .ourserviceinfo p{
    
    font-size: 12px;
    margin-top: 25px;
    margin-bottom: 20px;
    width: 90%;
}




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


    /* background-color: red; */

    font-size: 12px;
    border: 1px solid rgb(56, 56, 230);
    padding: 4px 20px;
    border-radius: 15px;
    margin-top: -20px;
    /* margin-left: 510px; */
    /* margin-bottom: 100px; */
}


.jobourservicecard .minivideocontentbutton a:hover{
    border: 1px solid rgb(56, 56, 230);
    background: rgb(56, 56, 230);
    transition: 1s;
    color: white;
}









.jobourservicewrapper .seevideocontentbutton a{
    text-decoration: none;
    display: inline-block;
    color: white;


    background-color: rgb(56, 56, 230);

    font-size: 15px;
    border: 1px solid rgb(56, 56, 230);
    padding: 16px 30px;
    border-radius: 15px;
    margin-top: 50px;
    margin-left: 500px;

}


.jobourservicewrapper .seevideocontentbutton a:hover{
    border: 1px solid rgb(56, 56, 230);
    background: transparent;
    transition: 1s;
    color: black;
}




/* ---------------------------------TOP CLIENTS------------------------------------ */
#top-clients{
    background-color: white;
    /* margin-bottom: 100px; */
}


.clients h3{

    width: 80%;
    margin: auto;
 
    padding-top: 50px;
    font-size: 35px;
    font-weight: 600 ;
    color: rgb(54, 54, 208);
    margin-left: 20px;
    
    padding: 10px;
}

.clients h3 span{

    width: 80%;
    margin: auto;
 
    padding-top: 50px;
    font-size: 35px;
    font-weight: 600 ;
 
    color: rgb(54, 54, 208);
    
    padding: 10px;
    margin-top: 350px;

}
.clients p{

    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 50px;
    font-size: 24px;
    font-weight: 60 ;
    color: grey;
    
    padding: 10px;
}


.delta-govt h2{
    color: darkgrey;
    /* text-align: center; */
    margin-left: 1%;

}


.dtsg-pic{
    min-height: 15vh;
   
    width: 10%;
    background-image: url(websiteimages/deltalogo.png);
    background-position: center;
    background-size: cover;
    position: relative;
    margin-top: -2%;
    margin-left: 5%;
 
    
    

}
.total-pic{
    min-height: 15vh;
 
    width: 10%;
    background-image: url(websiteimages/total.PNG);
    background-position: center;
    background-size: cover;
    position: relative;
    margin-top: 5%;
    margin-left: 45%;    

}

.total p{

    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 50px;
    font-size: 24px;
    font-weight: 60 ;
    color: grey;
    
    padding: 10px;
}

.initiatesplc-pic{
    min-height: 11vh;
   
    width: 40%;
    background-image: url(websiteimages/the-initiates.PNG);
    background-position: center;
    background-size: cover;
    position: relative;
    margin-top: 5%;
    margin-left: 35%;    

}

.initiatesplc p{

    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 50px;
    font-size: 24px;
    font-weight: 60 ;
    color: grey;
    
    padding: 10px;
}



/* ------------------------------------------------------office image---------------------------- */


/* .office-image{
    height: 110vh;
    background-image: url(websiteimages/16e761bc-2964-4244-882c-0a801bd31c5b.JPG);
    background-size: cover;
    margin-top: 40px;
} */

/* ------------------------------------------BLOG AND LATEST NEWS----------------------------- */



.recent-blog-header h3{
    width: 32%;
    font-size: 35px;
    font-weight: 600 ;
    color: rgb(128, 226, 128);
    
    padding: 10px;
    margin-top: 20px;
    border-bottom: 3px solid rgb(135, 227, 135);
    margin-bottom: 20PX;
    
   

}

.recent-blog-header h3 span{
    width: 32%;

  
    font-size: 35px;
    font-weight: 600 ;
    color: black;
    
    padding: 10px;
    margin-top: 20px;
    border-bottom: 3px solid rgb(135, 227, 135);
    margin-bottom: 20PX;
  


}


.recent-blog-header p{

  
    font-size: 15px;
  
    color: black;
    
    padding: 10px;
    margin-top: 20px;
  

}



.a {
    max-width: 1200px;
    width: 80%;
    max-height: 20px;
    padding-bottom: 350px;
    margin-left: 100px;

}


.b{
    position: relative;

}
.b .slide-button{
    position: absolute;
    top: 50%;
    height: 50px;
    width: 50px;
    color: wheat;
    border: none;
    outline: none;
    background: rgb(56, 56, 230);
    font-size: 2.2rem;
    cursor: pointer;
    border-radius: 50%;
    transform: translateY(-50%);
}


.b .slide-button:hover{
    background: black;
    color: rgb(56, 56, 230);
}
.b .slide-button#prev-slide{
    left: -20px;
    display: none;

}    
.b .slide-button#next-slide{
    right: -20px;

}



.d{
    width: 250px;
    background-color: white;
    border: 1px solid rgb(56, 56, 230);


}


.f{
    background-color: white;
    
    font-size: 12px;
 
    height: 20vh;
    padding-top: 20px;

}

.f span{
    background-color: rgb(78, 175, 78);
    font-size: 20px;
    color: whitesmoke;
    border-radius: 5px;
}
.f p{
   
    color: grey;
 

}
.f .g{
    color: black;
    font-size: 16px;

}

.e{
    width: 100%;
    height: auto;
   
}

.e img{
   
    max-height: 20vh;
    width: 245px;
}


.b .c{
    display: grid;
    gap: 18px;
 
    overflow-x: auto;
 
    grid-template-columns: repeat(10,1fr);

}

.b .c::-webkit-scrollbar  {
    display: none;
}



.a .slider-scrollbar{
    height: 24px;
    width: 100%;

    display: flex;
    align-items: center;
}

.slider-scrollbar .scrollbar-track{
    height: 2px;
    width: 100%;
    background: black;
    position: relative;
    border-radius: 4px;
}

.slider-scrollbar:hover .scrollbar-track{
    height: 4px;
}

.slider-scrollbar .scrollbar-thumb{
    position: absolute;
    height: 100%;
    width: 50%;
    background: rgb(56, 56, 230)yellow;
    border-radius: inherit;
    cursor: grab;
}
.slider-scrollbar .scrollbar-thumb:active{
    cursor: grabbing;
    height: 8px;
    top: -2px;
}
.slider-scrollbar .scrollbar-thumb::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    bottom: -10px;
}




/* ------------------------------------------FOOOTER----------------------------------------- */


.container{
    max-width: 1170px;
    height: 150px;
    /* background-color :linear-gradient(rgba(235, 11, 11, 0.5),rgb(218, 110, 148)); */
    background-color :rrgb(54, 54, 208);
    margin: auto;
}

.footerrow{
    display: flex;
    flex-wrap: wrap;
}

ul{
    list-style: none;
  

}

.footer{
    background-color: rgb(54, 54, 208);
    /* background-color :linear-gradient(rgba(235, 11, 11, 0.5),rgb(218, 110, 148)); */
    color: white;
    padding: 70px 0;

}

.footer-col{
    width: 25%;
    padding: 0 25px;
}

.footer-col h4{
    font-size: 28px;
    color: white;
    text-transform: capitalize;
    margin-bottom: 15px;
    position: relative;
  
}


.footer-col ul li:not(:last-child){
    margin-bottom: 15px;


}

.footer-col ul li:last-child{
    margin-bottom: -40px;


}

.footer-col ul li a{
    font-size: 14px;
    text-transform: capitalize;
    text-decoration: none;
    color: white;
    font-weight: 300;
    display: block;
    transition: all 0.3s ease;
 
}

.footer-col ul li a:hover{
    color: white;
    padding-left: 10px;
    font-size: 15px;
}


.social-links a{
    color: white;
    font-size: 40px;
}


.copyright {
    margin-bottom: 100px;

}
.copyright p{
    color: white;
  



}



/* ------------------------------------------------------------------------POLICIES--------------------------------------------------------------------------------- */



.policies h3{

    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 50px;
    font-size: 35px;
    font-weight: 600 ;
    color: rgb(21, 74, 21);
    
    padding: 10px;
}

.policies h2{

    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 50px;
    font-size: 25px;
    font-weight: 600 ;
    color: grey;
    
    padding: 10px;
}
.policies p{
    width: 80%;
    margin: auto;
   
    padding-top: 50px;
    font-size: 15px;
    font-weight: 100 ;
    color: black;
   
    padding: 10px;
}
.policies-text-boxx{
    width: 90%;
    margin-top: 5%;
    text-align: center;
    padding-bottom: 100px;
}
.policies-btn{
    display: inline-block;
    text-decoration: none;
    color: black;


    border: 1px solid blue;
    padding: 12px 34px;
    font-size: 13px;
    
    background: transparent;
    position: relative;
    cursor: pointer;
    border-radius: 15px;


}

.policies-btn:hover{
    border: 1px solid rgb(4, 3, 3);
    background: rgb(57, 57, 239);
    transition: 1s;
    color: white;
}



/* -----------------------------------------------PRIVACY POLICY------------------------------------------------------ */





.privacy h2{
    width: 80%;
    margin: auto;
 
    padding-top: 50px;
    font-size: 36px;
    font-weight: 600 ;
    color: grey;
 
    padding: 10px;
}
.privacy p{
    width: 80%;
    margin: auto;

    padding-top: 50px;
    font-size: 15px;
    font-weight: 100 ;
    color: black;

    padding: 10px;
}

.privacy h1{
    width: 80%;
    margin: auto;

    padding-top: 50px;
    font-size: 16px;
    font-weight: 100 ;
    color: red;

    padding: 10px;
}

.privacy h3{
    width: 80%;
    margin: auto;
  
    padding-top: 50px;
    font-size: 36px;
    font-weight: 600 ;
    color: rgb(56, 56, 230);

    padding: 10px;
}
.privacy h3 span{
    font-weight: 800;
    color: black;
}

.privacy p span{
    color: red;
}
.privacy p:last-child{
    padding-bottom: 100px;

}

.the-privacy-header{
    width: 100%;
    height: 80px;
    display: block;
    background-color: wheat;
}



/* ------------------------------------------ team------------------------------------ */



.dedicated-team-header h3{
    width: 27%;

 
    font-size: 25px;
    font-weight: 600 ;
    color: rgb(54, 54, 208);
    padding: 10px;
    margin-top: 100px;
    margin-bottom: 30px;
    /* border-bottom: 3px solid rgb(4, 3, 3); */
   

}




.jefcon-team{
    /* background-image: url(websiteimages/team3.jpeg); */
    background-size: cover;
    margin-top: -150px;
}


.dedicated-team-header h3 span{
    width: 27%;
    font-size: 25px;
    font-weight: 600 ;
    color: rgb(54, 54, 208);
    padding: 10px;
    margin-top: 100px;
    margin-bottom: 30px;
    /* border-bottom: 3px solid rgb(4, 3, 3); */
  


}

.slide-content{
    margin: 0 40px;
    margin-bottom: 30px;
   
  

}


.slide-container{
    max-width: 1120px;
    width: 40%;
    padding: 40px 0;
    margin-bottom: 100px;



}

.card{
    width: 320px;
    border-radius: 25px;
    background-color: white;
    border: 1px dashed rgb(112, 126, 112);


}
.image-content, .card-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 14px;

}

.image-content{
    row-gap: 5px;
    position: relative;
    padding: 25px 0;

}


.overlay{
    position: absolute;
    left: 0;
    top: 0;
    height: 90%;
    width: 100%;
    background-color: rgb(54, 54, 208);

    border-radius: 25px 25px 0 25px;
}

.overlay::before, .overlay::after{
    content: '';
    position: absolute;
    right: 0;
    bottom: -40px;
    height: 40px;
    width: 40px;
    background-color: rgb(54, 54, 208);
}

.overlay::after{
    border-radius: 0 25px 0 0;
    background-color: white;
}
.card-image{
    position: relative;
    height: 250px;
    width: 250px;
    
    border-radius: 50%;
    background: white;
    padding: 3px;
}
.card-image .card-img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid white;
}

.name{
    font-size: 21px;
    font-weight: 500;
    color: black;

  
}


.description{
    font-size: 28px;
    font-weight: 600;

    color: rgb(54, 54, 208);
    text-align: center;
}


.button{
    border: none;
    font-size: 16px;
    color: black;
    padding: 8px 16px;
    background-color: rgb(54, 54, 208);
    border-radius: 6px;
    margin: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.button:hover{
    background: wheat;
}

.jefcon-team .videocontentbutton a{
    text-decoration: none;
    display: inline-block;
    color: white;


    background-color: rgb(56, 56, 230);

    font-size: 15px;
    border: 1px solid rgb(56, 56, 230);
    padding: 14px 30px;
    border-radius: 15px;
    margin-top: -1000px;
    margin-left: 550px;
    margin-bottom: 100px;
}


.jefcon-team .videocontentbutton a:hover{
    border: 1px solid rgb(56, 56, 230);
    background: transparent;
    transition: 1s;
    color: black;
}

/* ------------------------------------------------our services----------------------------------------- */
#our-services .videocontentbutton a{
    text-decoration: none;
    display: inline-block;
    color: white;


    background-color: rgb(56, 56, 230);

    font-size: 15px;
    border: 1px solid rgb(56, 56, 230);
    padding: 7px 40px;
    border-radius: 15px;
    margin-top: 50px;
    margin-left: 510px;
    /* margin-bottom: 100px; */
}


#our-services .videocontentbutton a:hover{
    border: 1px solid rgb(56, 56, 230);
    background: transparent;
    transition: 1s;
    color: black;
}


/* .videocontent{

    text-align: center;
    margin-top: -50px;


} */
#our-services{
    /* max-width: 1240px; */
    max-width: 100%;
    margin: 0 auto;
    padding: 5%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background: linear-gradient(to bottom, rgba(236, 210, 80, 0.5),rgb(186, 142, 22)); */
    margin-top: 10px;
    /* background-image: url(websiteimages/gal1/grey4.jpg); */
    background-color: rgba(234, 234, 230, 0.5);

    



}


.ourservicesword{
    
    width: 60%;
    justify-content: space-around;
    margin-left: -150px;
    margin-top: 400px;

   

}

.ourservicesword h1{
    font-size: 25px;
    color: rgb(84, 80, 80);
    margin-top: -500px;
    font-weight: 200;
}




.ourservicesword h1 span{
    font-size: 25px;
    color: rgb(56, 56, 230);
    margin-top: 150px;
    font-weight: 600;
}


.ourservicesword p{
    font-size: 16px;
    color: rgb(49, 45, 45);

}





.ourservicesword p span{
    font-size: 20px;
    color: rgb(56, 56, 230);
    font-weight: 400;
}





.ourservicewrapper{
        
    width: 100%;
    justify-content: space-around;
    margin-top: 20px;
    margin-left: -850px;
    
}

.serviceaaaa{
    margin-left: 210px;
    margin-top: -190px;
}
.serviceaaaa P{
    color: rgb(93, 90, 90);
    font-size: 14px;
}
.serviceaaaa h1{
    color: rgb(56, 56, 230);
}
.try{
    width: 30%;
    margin-top: -850px;
    font-size: 20px;
    margin-left: 450px;
}

.try h1{
    color: rgb(56, 56, 230);

}
.try h1 span{
    color: rgb(4, 3, 3);
    border-bottom: 3px solid rgb(4, 3, 3);
}

.ourservicecard{
    width: 530px;
    height: 300px;
    padding: 2rem 1rem;
    background: #fff;
    position: relative;
    display: inline-block;
    align-items: flex-end;
    box-shadow: 0px 7px 10px rgba(0,0,0,0.5);
    transition: 0.5s ease-in-out;
 
    margin-top: 40px;
    margin-left: 30px;

  
}


/* .ourservicecard:hover{
    transform: translateY(20px);
} */

.ourservicecard:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5),rgb(193, 193, 193));
    z-index: 2;
    transition: 0.5s all;
    opacity: 0;
}


.ourservicecard:hover:before{
    opacity: 1;
}




.ourservicecard img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;

}



/* .ourservicecard .ourserviceinfo{
    position: relative;
    z-index: 3;
    color: black;
    opacity: 0;
    transform: translateY(30px);
    transform: 0.5s all;
  
}


.ourservicecard:hover .ourserviceinfo{
    opacity: 1;
    transform: translateY(0px);
} */


.ourservicecard .ourserviceinfo h1{
    margin: 0;
    color: rgb(4, 4, 4);
    font-size: 21px;
    text-align: center;
}

.ourservicecard .ourserviceinfo p{
    
    font-size: 17px;
    margin-top: 25px;
    margin-bottom: 20px;
    color: rgb(82, 81, 81);
    width: 90%;
}




/* -------------------CONTACT US PAGE------------------------------------------------------------ */



#contact-details{
    display: flex;
    align-items: center;
    justify-content: space-between;
}


#contact-details .details{
    width: 40%;
}
#contact-details .details span,
#form-details form span{
    font-size: 12px;
}

#contact-details .details h2,
#form-details form h2{
    font-size: 26px;
    line-height: 35px;
    padding: 20px 0;
}

#contact-details .details h3{
    font-size: 16px;
    padding-bottom: 15px;

}

#contact-details .details li{
    list-style: none;
    display: flex;
    padding: 10px 0;
}


#contact-details .details li i{
    font-size: 24px;
    padding-right: 22px;
}

#contact-details .details li p{
    margin: 0;
    font-size: 14px;
}

#contact-details .map{
    /* width: 100%;
    height: 800px; */
    width: 100%;
    height: 600px;
}

#contact-details .map iframe{
    width: 100%;
    height: 100%;
}



#form-details{
    display: flex;
    justify-content: space-between;
    padding: 80px;
    margin: 30px;
    border: 1px solid wheat;

}


#form-details form{
    width: 65%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}


#form-details form input,
#form-details form textarea{
    width: 100%;
    padding: 12px 15px;
    outline: none;
    margin-bottom: 20px;
    border: 1px solid pink;
}


#form-details form button{
    background-color: pink;
    color: black;
    height: 7vh;
}


#form-details .people div{
    display: flex;
    align-items: flex-start;
    padding-bottom: 25px;
    padding-top: 25px;
}


#form-details .people div img{
    width: 65px;
    height: 65px;
    object-fit: cover;
    margin-right: 15px;
}

#form-details .people div p{
    margin: 0;
    font-size: 13px;
    line-height: 25px;
}
#form-details .people div p span{
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: black;
}



/* --------------------------contct us------------------------------------------------------- */


.contactus_headerz{
    min-height: 62vh;
    width: 100%;
    background-image: url(websiteimages/gal1/SPORT\ COMPLEX.jpg);
    background-position: center;
    background-size: cover;
    position: relative;
    background-image: linear-gradient(rgba(156, 170, 143, 0.7),rgba(29, 30, 29, 0.7)),url(websiteimages/gal1/SPORT\ COMPLEX.jpg);
  
}

.contactus-orientation {
    background-image: url(websiteimages/gal1/whitebck.jpg);
    background-size: cover;
    height: 88vh;
 
}
.contactus-orientation h3{
    font-size: 36px;
    font-weight: 200;
    color: rgb(77, 73, 134);
  
    text-align: center;

  


}



.contactus-orientation h2{
    font-size: 22px;
    font-weight: 100;
    color: black;
    margin-top: 40px;
    text-align: center;

}


.contactus-orientation p{
    font-size: 16px;
    font-weight: 20;
    color: black;
    margin-top: 30px;
    text-align: center;

}


.contactus-orientation p span{
    font-size: 36px;
    font-weight: 20;
    color: blue;
    margin-top: 30px;
    text-align: center;

}



/* -----------------------------------------------------CONTACT US------------------------------------------------------ */

.contact{
    padding: 40px 15%;
    background: whitesmoke;
    height: 100%;
    width: 100%;
    min-height: 100vh;
    display: grid;
    grid-template-columns: repeat(2,2fr);
    align-items: center;
    grid-gap: 6rem;
    margin-top: 100px;
 
}

.contact-form h1{
    font-size: 42px;
    color: rgb(54, 54, 208);
    margin-bottom: 30px;



    
}
span{
    color: rgb(54, 54, 208);
}

.contact-pic{
    min-height: 40vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7 )),url(websiteimages/contact.png);
    background-position: center;
    background-size: cover;
    position: relative;

    margin-bottom: 50px;

}
.contact-form p{
    color: grey;
    letter-spacing: 1px;
    line-height: 26px;
    font-size: 1.1rem;
    margin-bottom: 3.8rem;

    font-size: 18px;

}

.contact-form form{
    position: relative;
}


.contact-form form input, form textarea{
    width: 100%;
    padding: 17px;
    border: none;
    outline: none;
    background: white;
    color: black;
    font-size: 1.1rem;
    margin-bottom: 0.7rem;
    border-radius: 10p;

}


.contact-form textarea{
    resize: none;
    height: 200px;
}

.contact-form form .btn{
    display: inline-block;
    background: rgb(56, 56, 230);
    font-size: 1.1rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 600;
    border: 2px solid transparent;
    border-radius: 10px;
    width: 150px;
    transition: ease .20s;
    cursor: pointer;
    margin-left: 110px;

    
}

.contact-form form .btn:hover{
    border: 2px solid yellowrgb(56, 56, 230);
    background: transparent;
    background: white;
    transform: scale(1.1);
} 





.after-about-us .office-image{
    height: 25vh;
    background-image: url(websiteimages/gal1/blue3.jpg);
    background-size: cover;
    margin-top: 10px;
    width: 100%;
    /* margin-left: 600px; */
}


.after-about-us .office-image h1{
    color: white;
    /* text-align: left; */
    font-size: 20px;
    font-weight: 200;
    margin-left: 50px;
}

.after-about-us .office-image h2{
    color: white;
    /* text-align: left; */
    font-size: 19px;
    font-weight: 200;
    margin-left: 50px;
    margin-top: -10px;
}


.after-about-us .videocontentbutton a{
    text-decoration: none;
    display: inline-block;
    color: white;


    background-color: transparent;

    font-size: 15px;
    border: 3px solid white;
    padding: 17px 50px;
    /* border-radius: 50px; */
    margin-top: -200px;
    margin-left: 900px;
    /* margin-bottom: 100px; */
}


.after-about-us .videocontentbutton a:hover{
    border: 1px solid rgb(56, 56, 230);
    background: rgb(56, 56, 230);
    transition: 1s;
    color: white;
}








































































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



/* -------- */

    /* ----------Hero---------- */
    #hero{
        /* background-image: url(images/lionel-messi-sport-footballers-wallpaper-5450a0bae1d6b8ca376c0ee9bfeaed9b.jpg); */
        /* background-image: url(images/soccer-lionel-messi-argentinian-wallpaper-3060d5b96f06ee23f8df87c65be66498.jpg); */
        /* background-image: url(images/lionel-messi-fcb-barcelona-fc-barcelona-wallpaper-preview.jpg); */
        /* background-image: url(images/lionel-messi-soccer-football-wallpaper-preview.jpg); */
        /* background-image: url(images/football-club-form-player-wallpaper-preview.jpg); */
        /* background-image: url(images/soccer-paulo-dybala-argentinian-juventus-f-c-wallpaper-preview.jpg); */
        /* background-image: url(images/football-the-best-players-2016-soccer-lionel-messi-wallpaper-8816bdf880a04c08007c212ea8f2e49a.jpg); */
        /* background-image: url(websiteimages/gal1/SPORT\ COMPLEX.jpg); */
        /* background-image: url(images/action-art-artistic-athletic-d9ac803715075f22cde03edf1bff49bb.jpg); */
        /* background-image: url(images/soccer-kylian-mbappe-french-world-cup-2018-wallpaper-f8268caa6facb7992eb0c982f2590be0.jpg); */
        /* background-image: url(images/64a5c3ac757e775eef042fc7_withmeta.jpg); */
        /* background-image: url(images/depositphotos_165317552-stock-photo-cheerful-delivery-man-happy-young.jpg); */
        /* background-image: url(images/landingimage.jpeg); */
        /* background-image: url(images/m.jpeg), linear-gradient(rgba(4,9,30,0.75),rgba(26, 29, 42, 0.55)); */
        background-image: linear-gradient(rgba(4,9,30,0.85),rgba(26, 29, 42, 0.75)),url(websiteimages/gal1/SPORT\ COMPLEX.jpg);

    
    

        height: 90vh;
        width: 100%;
        background-size: cover;
        background-position: top 25% left 1px;
        /* padding: 0 80px; */
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;
        /* background-color: linear-gradient(to bottom, rgba(167, 31, 31, 0.5),rgb(56, 3, 3)); */
    }

    #hero h4{
        padding-bottom: 15px;
        margin-left: 25px;
        color: white;
        font-size: 30px;
        margin-top: -50px;
        text-align: center;
        font-weight: 600;
    }



    #hero h4 span{
        /* padding-bottom: 15px;
        margin-left: 100px; */
        color: rgb(56, 56, 230);
        font-size: 30px;
        /* margin-top: -100px;
        text-align: center; */
    }
    #hero h1{
        color: purple;
        margin-left: 200px;
    }

    #hero h2{
        color: white;
        margin-left: 25px;
        text-align: center;
        font-size: 16px;
        font-weight: 100;
        width: 80%;
        margin-top: 50px;
    }

    #hero p{
        /* color: black; */
        margin-left: 600px;
    }
    #hero button{
        background-image: url(images/skull-graffiti-background-skull-graffiti-wallpaper-skull-graffiti-pattern-graffiti-background-graffiti-art-graffiti-wallpaper-ai-generative-photo.jpg);
        /* background-image: url(images/images.jpeg); */
        background-color: transparent;
        color: white;
        font-size: 30px;
        font-weight: 700;
        border-radius: 10px;
        border: 0;
        padding: 14px 80px 14px 65px;
        background-repeat: no-repeat;
        cursor: pointer;

    }



    #hero a{
        text-decoration: none;
        display: inline-block;
        color: white;
    
        background-color: rgb(56, 56, 230);
    
        font-size: 24px;
        border: 3px solid rgb(56, 56, 230);

        padding: 12px 20px;
        border-radius: 15px;
        margin-left: 75px;

        margin-top: 20px;
    }

    #hero a:hover{
        border: 1px solid rgb(56, 56, 230);
        background: rgb(64, 62, 62);
        transition: 1s;
        color: white;
    }




    /* ----------------------------Trust Bar------------------------- */



    .trustafter-about-us .office-image{
        height: 25vh;
        /* background-image: url(websiteimages/gal1/grey1.jpg); */
        background-size: cover;
        margin-top: 50px;
        width: 80%;
        /* margin-left: 600px; */
    }


    .trustafter-about-us .office-image h1{
        /* color: rgb(86, 86, 86); */
        color: rgb(73, 70, 70);
        /* text-align: left; */
        font-size: 20px;
        font-weight: 600;
        margin-left: 50px;
        font-style: italic;

    }

    .trustafter-about-us .office-image h2{
        /* color: rgb(86, 86, 86); */
        color: rgb(73, 70, 70);
        /* text-align: left; */
        font-size: 20px;
        font-weight: 600;
        margin-left: 50px;
        font-style: italic;
        margin-top: 10px;
    }

    .trustafter-about-us .office-image h3{
        /* color: rgb(86, 86, 86); */
        color: rgb(73, 70, 70);
        /* text-align: left; */
        font-size: 20px;
        font-weight: 600;
        margin-left: 50px;
        font-style: italic;
        margin-top: 10px;
    }

    .trustafter-about-us .office-image h4{
        /* color: rgb(86, 86, 86); */
        color: rgb(73, 70, 70);
        /* text-align: left; */
        font-size: 20px;
        font-weight: 600;
        margin-left: 50px;
        font-style: italic;
        margin-top: 10px;
    }

    .trustafter-about-us .office-image h5{
        /* color: rgb(86, 86, 86); */
        color: rgb(73, 70, 70);
        /* text-align: left; */
        font-size: 20px;
        font-weight: 600;
        margin-left: 50px;
        font-style: italic;
        margin-top: 10px;
    }

/* ----------------------------video header------------------------- */

    #videoheader{
        width: 100%;
        height: 100vh;

        position: relative;
        padding: 0 5%;
        display: flex;
        align-items: center;
        justify-content: center;

    

    }

    .videocontent{

        text-align: center;
        margin-top: -100px;


    }

    .videocontent h1{
        font-size: 40px;

        /* color: rgb(24, 41, 24); */
        color: white;
        font-weight: 600;
        margin-top: -250px;
    }



    .videocontent p{
        font-size: 20px;

        /* color: rgb(24, 41, 24); */
        color: white;
    
    
        /* font-weight: 600; */
        margin-top: 100px;
    }



    .videocontent a{
        text-decoration: none;
        display: inline-block;
        color: rgb(20, 20, 20);
    
        background-color: rgb(83, 83, 187);
    
        font-size: 24px;
        border: 3px solid rgb(83, 83, 187);

        padding: 14px 30px;
        /* border-radius: 50px; */
        margin-top: 20px;
    }

    .videocontent a:hover{
        border: 1px solid rgb(56, 56, 230);
        background: rgb(64, 62, 62);
        transition: 1s;
        color: white;
        }

    .back-video{
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: -1;
        background-size: cover;
    }

    video{
        height: 160vh;
        width: 1600px;

    }

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


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


    background-color: white;

    font-size: 15px;
    border: 1px solid rgb(56, 56, 230);
    padding: 7px 40px;
    /* border-radius: 50px; */
    margin-top: -1200px;
    margin-left: 110px;
    margin-bottom: 100px;
}


.recent-jobs .videocontentbutton a:hover{
    border: 1px solid rgb(56, 56, 230);
    background: rgb(56, 56, 230);
    transition: 1s;
    color: white;
    }
    /* ------------------------------------------------------ORIENTATION------------------------------------- */


    .orientation {
        background-image: url(websiteimages/oientation.JPG);
        background-size: cover;
        height: 10%;
  
    }
    .orientation h3{
        font-size: 22px;
        font-weight: 200;
        color: rgb(77, 73, 134);
        margin-top: 5px;
        text-align: center;

    }



    .orientation h2{
        font-size: 16px;
        font-weight: 100;
        color: black;
        margin-top: 5px;
        text-align: center;

    }


    .orientation h2 span{
        font-size: 16px;
        font-weight: 100;
        color: rgb(56, 56, 230);
        margin-top: 10px;
        text-align: center;

    }

    .orientation p{
        font-size: 16px;
        font-weight: 20;
        color: black;
        margin-top: 5px;
        text-align: center;

    }
    
    /* ----------- ABOUT US------------------------------------------------------------------------------------------------ */

    /* #about-us{
        background-color: white;
    } */
    .about-us h3{
        width: 90%;
        font-size: 20px;
        font-weight: 600 ;
        color: rgb(4, 3, 3);
        padding: 10px;
        margin-top: 520px;
        /* margin-bottom: 30px; */
        text-align: left;
        /* border-bottom: 3px solid rgb(4, 3, 3); */
        /* border-bottom: 3px solid rgb(54, 54, 208); */
        /* margin-left: 20px; */

    }



    .about-us h3 span{
        width: 100%;
        font-size: 20px;
        font-weight: 600 ;
        color: rgb(54, 54, 208);
        padding: 10px;
        /* margin-top: 100px; */
        /* margin-bottom: 30px; */
        /* border-bottom: 3px solid rgb(54, 54, 208); */
        text-align: center;


    }



    .about-us{
        /* background-image: url(websiteimages/gal1/eg.png); */
        background-size: cover;
        /* background-image: linear-gradient(rgba(4,9,30,0.25),rgba(4,9,30,0.25 )),url(websiteimages/gal1/eliteg.png); */

        height: 100vh;

    }

    .yr12-pic {
        min-height: 15vh;
    
        width: 10%;
        background-image: url(websiteimages/12yrs.png);
    
        background-position: center;
        background-size: cover;
        position: relative;

        margin-left: 44%;
        
        

    }


    .about-us h4{
        width: 80%;
        margin: auto;
        text-align: center;
        font-size: 26px;
        font-weight: 500 ;
        color: whitesmoke;
    
        padding: 10px;
        padding-top: 25px;
        margin-left: 100px;
    }

    .yrs h4{
        width: 80%;
        margin: auto;
        text-align: center;
        font-size: 26px;
        font-weight: 500 ;
        color: whitesmoke;
    
        padding: 10px;
        margin-top: -50px;
        margin-left: 220px;
    }



    .of-services h4{
        width: 80%;
        margin: auto;
    
        font-size: 26px;
        font-weight: 500 ;
        color: whitesmoke;
    
        padding: 10px;
    
        margin-left: 220px;

    }

    .about-us p{
        width: 90%;
        margin: auto;
    
        padding-top: 50px;
        font-size: 16px;
        font-weight: 300 ;
        color: rgb(63, 61, 61);
    
        padding: 10px;
        margin-left: 16px;
        margin-top: 20px;
    }




    .about-us p span{
        width: 100%;
        margin: auto;
    
        padding-top: 50px;
        font-size: 24px;
        font-weight: 300 ;
        color: rgb(63, 61, 61);
    
        padding: 10px;

    }

    .about-us .office-image{
        height: 30vh;
        background-image: url(websiteimages/gal1/pngtree.jpg);
        background-size: cover;
        margin-top: -900px;
        width: 100%;
        margin-left: 1px;

    }


    .after-about-us .office-image{
        height: 25vh;
        background-image: url(websiteimages/gal1/blue3.jpg);
        background-size: cover;
        margin-top: -150px;
        width: 100%;
    
    }


    .after-about-us .office-image h1{
        color: white;
        /* text-align: left; */
        font-size: 16px;
        font-weight: 200;
        margin-left: 50px;
        margin-top: -40px;
    }



    .after-about-us .office-image h2{
        color: white;
        /* text-align: left; */
        font-size: 16px;
        font-weight: 200;
        margin-left: 50px;
        margin-top: 10px;
    }




    .after-about-us .videocontentbutton a{
        text-decoration: none;
        display: inline-block;
        color: white;


        background-color: transparent;

        font-size: 15px;
        border: 3px solid white;
        padding: 17px 50px;
        /* border-radius: 50px; */
        margin-top: 20px;
        margin-left: 50px;
        /* margin-bottom: 100px; */
    }


    .after-about-us .videocontentbutton a:hover{
        border: 1px solid rgb(56, 56, 230);
        background: rgb(56, 56, 230);
        transition: 1s;
        color: white;
        }

    
/* ------------------------------------------------our services----------------------------------------- */
    #our-services .videocontentbutton a{
        text-decoration: none;
        display: inline-block;
        color: white;


        background-color: rgb(56, 56, 230);

        font-size: 15px;
        border: 1px solid rgb(56, 56, 230);
        padding: 7px 40px;
        border-radius: 15px;
        margin-top: 50px;
        margin-left: -10px;
        /* margin-bottom: 100px; */
    }


    #our-services .videocontentbutton a:hover{
        border: 1px solid rgb(56, 56, 230);
        background: transparent;
        transition: 1s;
        color: black;
        }


    #our-services{
        /* max-width: 1240px; */
        max-width: 100%;
        margin: 0 auto;
        padding: 5%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: white;
        /* background: linear-gradient(to bottom, rgba(236, 210, 80, 0.5),rgb(186, 142, 22)); */
        margin-top: 1050px;
        /* background-image: url(websiteimages/gal1/grey4.jpg); */

        



    }


    .ourservicesword{
        
        width: 60%;
        justify-content: space-around;
        margin-left: -150px;
        margin-top: 400px;

    

    }

    .ourservicesword h1{
        font-size: 25px;
        color: rgb(84, 80, 80);
        margin-top: -500px;
        font-weight: 200;
    }




    .ourservicesword h1 span{
        font-size: 25px;
        color: rgb(56, 56, 230);
        margin-top: 150px;
        font-weight: 600;
    }


    .ourservicesword p{
        font-size: 16px;
        color: rgb(49, 45, 45);

    }





    .ourservicesword p span{
        font-size: 20px;
        color: rgb(56, 56, 230);
        font-weight: 400;
    }





    .ourservicewrapper{
            
        width: 100%;
        justify-content: space-around;
        margin-top: -700px;
        margin-left: -30px;
        
    }

    .serviceaaaa{
        margin-left: 210px;
        margin-top: -190px;
    }
    .serviceaaaa P{
        color: rgb(93, 90, 90);
        font-size: 14px;
    }
    .serviceaaaa h1{
        color: rgb(56, 56, 230);
    }
    .try{
        width: 10%;
        margin-top: -2050px;
        font-size: 20px;
        margin-left: 70px;
    }

    .try h1{
        color: rgb(56, 56, 230);

    }
    .try h1 span{
        color: rgb(4, 3, 3);
        border-bottom: 3px solid rgb(4, 3, 3);
    }

    .ourservicecard{
        width: 330px;
        height: 240px;
        padding: 2rem 1rem;
        background: #fff;
        position: relative;
        display: inline-block;
        align-items: flex-end;
        box-shadow: 0px 7px 10px rgba(0,0,0,0.5);
        transition: 0.5s ease-in-out;
    
        margin-top: 40px;
        margin-left: -75px;

    
    }


    /* .ourservicecard:hover{
        transform: translateY(20px);
    } */

    .ourservicecard:before{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5),rgb(193, 193, 193));
        z-index: 2;
        transition: 0.5s all;
        opacity: 0;
    }


    .ourservicecard:hover:before{
        opacity: 1;
    }




    .ourservicecard img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;

    }



    /* .ourservicecard .ourserviceinfo{
        position: relative;
        z-index: 3;
        color: black;
        opacity: 0;
        transform: translateY(30px);
        transform: 0.5s all;
    
    }


    .ourservicecard:hover .ourserviceinfo{
        opacity: 1;
        transform: translateY(0px);
    } */


    .ourservicecard .ourserviceinfo h1{
        margin: 0;
        color: rgb(4, 4, 4);
        font-size: 14px;
        text-align: center;
    }

    .ourservicecard .ourserviceinfo p{
        
        font-size: 12px;
        margin-top: 25px;
        margin-bottom: 20px;
        width: 90%;
    }

/* ------------------------------------------------------------------------- */
   
    .headerz{
        min-height: 23vh;
        width: 100%;
        background-image: url(websiteimages/IMG_8513.JPG);
        background-position: center;
        background-size: cover;
        position: relative;
    
    }
    
 
/* ---------------------------VISION N BRIEF------------------------------ */



/* ---------------------------VISION N BRIEF------------------------------ */
    .visionnbrief .see-all-articles-btn{
        display: inline-block;
        text-decoration: none;
        color: black;
    
    
        border: 1px solid blue;
        padding: 12px 34px;
        font-size: 13px;
        
        background: transparent;
        position: relative;
        cursor: pointer;
        /* border-radius: 15px; */
        margin-top: 440px;
        margin-left: -100px;
    
    
    }
    
    
    .see-all-articles-btn:hover{
        border: 1px solid wheat;
        background: rgb(51, 95, 184);
        font-size: 20px;
        transition: 1s;
    }


    #vnb {
        background-color: white;
        /* background-image: url(websiteimages/gal1/142195-blue-and-white-simple-background.jpg); */
        background-size: cover;
        margin-top: 500px;



    }

    .visionnbrief{
        width: 80%;
        margin: auto;
        text-align: center;
        padding-top: 50px;
        font-size: 15px;
        color: black;
        padding: 10px;
        padding-bottom: 150px;
        margin-top: -450px;
        background-color: white;
    }


    .vision-brief .vision{
        /* margin-top: 1%; */
        /* display: flex; */
        /* width: 100%; */
        background: white;
        /* background-image: url(websiteimages/gal1/d.jpg); */
        /* background-size: cover; */
        height: 67vh;
        width: 100px;
        /* background-image: linear-gradient(rgba(46, 49, 59, 0.7),rgba(54, 57, 71, 0.7)),url(websiteimages/74717cc8-306b-44a1-8bbc-13daab4b73cd.JPG); */
        /* background-image: linear-gradient(rgba(220, 235, 11, 0.25),rgb(218, 216, 1110)),url(websiteimages/74717cc8-306b-44a1-8bbc-13daab4b73cd.JPG); */
        margin-top: 100px;
        margin-left: 20px;
        display: flex;
        width: 100%;
        background-size: cover;
    
        display: inline-block;
        flex-basis: 31%;
        border-radius: 10px;
        margin-bottom: 5px;
        padding: 20px 12px;
        box-sizing: border-box;
        transition: 0.5s;

    }



    .vision h3{
        text-align: center;

        font-size: 60px;
        font-weight: 600;
        margin: 10px 0;
        color: grey;
        margin-top: 100px;
    }



    .vision-brief P{
        text-align: left;
        font-size: 18px;
        margin: 10px 0;
        color: rgb(119, 117, 117);
        margin-left: 10px;
        margin-top:  -500px;
        /* margin-bottom: -300px; */

        width: 100%;
    }


    .vision-brief P span{
        font-size: 46px;
        color: rgb(54, 54, 208);
        /* margin-top:  -400px; */
    }

/* .vision:hover{
    box-shadow: 0 0 20px 0px black;
} */





/* ------------------------------HEALTH AND SAFETY ENVIRONS---------------------- */

    #healthnsafety{
        margin-top: 100px;
        background: rgba(234, 234, 230, 0.5),rgb(210, 210, 208);
    }


    .safety{
        /* background-image: url(websiteimages/30883695-715b-4ff8-887e-fb056677490b.JPG); */
        height: 45vh;
        background-size: cover;
        /* background-image: linear-gradient(rgba(238, 240, 245, 0.3),rgba(238, 240, 245, 0.3)),url(websiteimages/30883695-715b-4ff8-887e-fb056677490b.JPG); */
        margin-top: -100PX;
    }

    .healthandsafety{
        margin-top: -50px;
    }

    .healthandsafety h4{
        width: 30%;
        margin: auto;
        padding-top: 50px;
        font-size: 25px;
        font-weight: 600 ;
        color: rgb(220, 220, 20);
        margin-left: 90px;
        padding: 10px;
    }

    .healthandsafety h4 span{
        width: 30%;
        margin: auto;
        padding-top: 50px;
        font-size: 23px;
        font-weight: 600 ;
        color:rgb(220, 220, 20);   
        padding: 10px;
        /* margin-left: 50px; */
    }

    .safety h4{
        color: white;
    }

    .health-safety-pic p{
        width: 100%;
        font-size: 11px;
        font-weight: 500 ;
        color: whitesmoke;

        
    }

    .health-safety-pic{
        min-height: 10vh;
        width: 70%;
    
        /* background-image: url(websiteimages/rgb(56, 56, 230).WEBP); */
        background-position: center;
        background-size: cover;
        position: relative;
        margin-left: 60px;
        margin-top: 80px;
        border-radius: 10px;
        /* background-image: linear-gradient(rgba(4, 4, 4, 0.855),rgba(7, 81, 7, 0.3)),url(websiteimages/rgb(56, 56, 230).WEBP); */

    }

    .health-safety-pic:hover{
        box-shadow: 0 0 20px 0px rgb(119, 116, 116);
       
    }
    /* --------------------------RECENT JOBS------------------------------------ */
    /* ------------------------------------------------our services----------------------------------------- */
    #jobour-services .videocontentbutton a{
        text-decoration: none;
        display: inline-block;
        color: rgb(4, 4, 4);


        background-color: white;

        font-size: 15px;
        border: 1px solid rgb(56, 56, 230);
        padding: 7px 40px;
        /* border-radius: 50px; */
        margin-top: 50px;
        margin-left: 510px;
        /* margin-bottom: 100px; */
    }


    #jobour-services .videocontentbutton a:hover{
        border: 1px solid rgb(56, 56, 230);
        background: rgb(56, 56, 230);
        transition: 1s;
        color: white;
        }


    /* .videocontent{

        text-align: center;
        margin-top: -50px;


    } */
    #jobour-services{
        /* max-width: 1240px; */
        max-width: 100%;
        margin: 0 auto;
        padding: 5%;
        display: flex;
        justify-content: center;
        align-items: center;

        margin-top: 100px;
        /* background-image: url(websiteimages/gal1/grey4.jpg); */
        /* background-color: red; */

        



    }


    .jobourservicesword{
        
        width: 60%;
        justify-content: space-around;
        margin-left: -150px;
        margin-top: 400px;

    

    }

    .ourservicesword h1{
        font-size: 25px;
        color: rgb(84, 80, 80);
        margin-top: -500px;
        font-weight: 200;
    }




    .ourservicesword h1 span{
        font-size: 25px;
        color: rgb(56, 56, 230);
        margin-top: 150px;
        font-weight: 600;
    }


    .ourservicesword p{
        font-size: 16px;
        color: rgb(49, 45, 45);

    }





    .ourservicesword p span{
        font-size: 20px;
        color: rgb(56, 56, 230);
        font-weight: 400;
    }





    .jobourservicewrapper{
            
        width: 100%;
        justify-content: space-around;
        margin-top: -10px;
        margin-left: -345px;
        
    }

    .serviceaaaa{
        margin-left: 210px;
        margin-top: -190px;
    }
    .serviceaaaa P{
        color: rgb(93, 90, 90);
        font-size: 14px;
    }
    .serviceaaaa h1{
        color: rgb(56, 56, 230);
    }
    .jobtry{
        width: 80%;
        margin-top: -1050px;
        font-size: 17px;
        margin-left: 10px;
    }

    .jobtry h1{
        color: rgb(56, 56, 230);

    }
    .jobtry h1 span{
        color: rgb(4, 3, 3);
        /* border-bottom: 3px solid rgb(4, 3, 3); */
    }

    .jobourservicecard{
        width: 340px;
        height: 270px;
        padding: 2rem 1rem;
        background: #fff;
        position: relative;
        display: inline-block;
        align-items: flex-end;
        box-shadow: 0px 7px 10px rgba(0,0,0,0.5);
        transition: 0.5s ease-in-out;
    
        margin-top: 40px;
        margin-left: 30px;

    
    }


    /* .jobourservicecard:hover{
        transform: translateY(20px);
    } */

    .jobourservicecard:before{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5),rgb(193, 193, 193));
        z-index: 2;
        transition: 0.5s all;
        opacity: 0;
    }


    .jobourservicecard:hover:before{
        opacity: 1;
    }




    .jobourservicecard img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;

    }



    .jobourservicecard .ourserviceinfo{
        position: relative;
        z-index: 3;
        color: black;
        opacity: 0;
        transform: translateY(30px);
        transform: 0.5s all;
    
    }


    .jobourservicecard:hover .ourserviceinfo{
        opacity: 1;
        transform: translateY(0px);
    }


    .jobourservicecard .ourserviceinfo h1{
        margin: 0;
        color: rgb(4, 4, 4);
        /* color: rgb(34, 34, 189); */
        font-size: 14px;
        text-align: left;
    }



    .jobourservicecard .ourserviceinfo h1 span{
        margin: 0;
        /* color: rgb(4, 4, 4); */
        color: rgb(34, 34, 189);
        font-size: 20px;
        text-align: left;
    }





    .jobourservicecard .ourserviceinfo p{
        
        font-size: 12px;
        margin-top: 25px;
        margin-bottom: 20px;
        width: 90%;
    }




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


        /* background-color: red; */

        font-size: 12px;
        border: 1px solid rgb(56, 56, 230);
        padding: 4px 20px;
        border-radius: 15px;
        margin-top: -20px;
        /* margin-left: 510px; */
        /* margin-bottom: 100px; */
    }


    .jobourservicecard .minivideocontentbutton a:hover{
        border: 1px solid rgb(56, 56, 230);
        background: rgb(56, 56, 230);
        transition: 1s;
        color: white;
    }









    .jobourservicewrapper .seevideocontentbutton a{
        text-decoration: none;
        display: inline-block;
        color: white;


        background-color: rgb(56, 56, 230);

        font-size: 15px;
        border: 1px solid rgb(56, 56, 230);
        padding: 16px 30px;
        border-radius: 15px;
        margin-top: 50px;
        margin-left: 100px;

    }


    .jobourservicewrapper .seevideocontentbutton a:hover{
        border: 1px solid rgb(56, 56, 230);
        background: transparent;
        transition: 1s;
        color: black;
    }
        
    /* --------------------------RECENT JOBS------------------------------------ */

    .recent-jobs h3{

        width: 80%;
        margin: auto;
        text-align: center;
        padding-top: 50px;
        font-size: 35px;
        font-weight: 600 ;
        /* color: rgb(54, 54, 208); */
        
        padding: 10px;
        margin-top: 50px;
        /* border-bottom: 3px solid rgb(220, 220, 20); */
    }

    .recent-jobs h3 span{

        width: 80%;
        margin: auto;
        text-align: center;
        padding-top: 50px;
        font-size: 35px;
        font-weight: 600 ;
        /* color: rgb(220, 220, 20); */
        
        padding: 10px;
        margin-top: 350px;
        /* border-bottom: 3px solid rgb(54, 54, 208); */

    }

    .recent-jobs p{
        width: 90%;
        margin: auto;
    
        padding-top: 50px;
        font-size: 14px;
        font-weight: 100 ;
        color: #696969;
    
        padding: 10px;
        padding-bottom: 50px;
    }

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



    /* ---------------------------------TOP CLIENTS------------------------------------ */
    
    #top-clients{
        margin-top: -100px;
        background: rgba(234, 234, 230, 0.5),rgb(210, 210, 208);
    }
    
    .thisimages{
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 400px;
        background-color: white;
    }
    
    
    
    .thisimages div{
        height: 350px;
        width: 200px;
        margin: 60px;
    }
    
    
    
    .clients h3{
    
        width: 32%;
        margin: auto;
        padding-top: 50px;
        font-size: 25px;
        font-weight: 600 ;
        color: rgb(54, 54, 208);
        margin-left: 20px;
        
        padding: 10px;
        border-bottom:3px solid black;
    }
    
    .clients h3 span{
    
        width: 32%;
        margin: auto;
        padding-top: 50px;
        font-size: 25px;
        font-weight: 600 ;
        color: rgb(54, 54, 208);
        
        padding: 10px;
        margin-top: 350px;
        border-bottom: 3px solid black;
    
    }
    
    
    
    .clients p{
    
        width: 80%;
        margin: auto;
        text-align: center;
        padding-top: 50px;
        font-size: 24px;
        font-weight: 60 ;
        color: grey;
        
        padding: 10px;
    }
    
    
    .delta-govt h2{
        color: darkgrey;
        /* text-align: center; */
        margin-left: 5%;
    
    }
    
    
    .dtsg-pic{
        min-height: 15vh;
        width: 35%;
        background-image: url(websiteimages/deltalogo.png);
        background-position: center;
        background-size: cover;
        position: relative;
        margin-top: 5%;
        margin-left: 25%;
    
        
        
    
    }
    .total-pic{
        min-height: 15vh;
        width: 50%;
        background-image: url(websiteimages/total.PNG);
        background-position: center;
        background-size: cover;
        position: relative;
        margin-top: 5%;
        margin-left: 25%;    
    
    }
    
    .total p{
    
        width: 80%;
        margin: auto;
        text-align: center;
        padding-top: 50px;
        font-size: 24px;
        font-weight: 60 ;
        color: grey;
        padding: 10px;
    }
    
    .initiatesplc-pic{
        min-height: 9vh;
        width: 90%;
        background-image: url(websiteimages/the-initiates.PNG);
        background-position: center;
        background-size: cover;
        position: relative;
        margin-top: 5%;
        margin-left:5%;    
    
    }
    
    .initiatesplc p{
    
        width: 80%;
        margin: auto;
        text-align: center;
        padding-top: 50px;
        font-size: 24px;
        font-weight: 60 ;
        color: grey;
        padding: 10px;
    }
    




    /* -----------------------------------------------------------------------OFFICE IMAGE-------------------------------------------------- */
    .office-image{
        height: 40vh;
        background-image: url(websiteimages/16e761bc-2964-4244-882c-0a801bd31c5b.JPG);
        background-size: cover;
        margin-top: 40px;
    }
    /* ------------------------------------------BLOG AND LATEST NEWS----------------------------- */



    .recent-blog-header h3{
       
        
        font-size: 35px;
        font-weight: 600 ;
        color: rgb(56, 56, 230);
        
        padding: 10px;
        margin-top: 10px;


    }

    .recent-blog-header h3 span{


        font-size: 35px;
        font-weight: 600 ;
        color: black;
        
        padding: 10px;
        margin-top: 10px;



    }


    .recent-blog-header p{


        font-size: 15px;

        color: black;
        
        padding: 10px;
        margin-top: 10px;


    }



    .a {
        max-width: 1200px;
        width: 70%;
        max-height: 20px;
        padding-bottom: 350px;
       
        
       

    }


    .b{
        position: relative;

    }
    .b .slide-button{
        position: absolute;
        top: 50%;
        height: 50px;
        width: 50px;
        color: wheat;
        border: none;
        outline: none;
        background: rgb(56, 56, 230);
        font-size: 2.2rem;
        cursor: pointer;
        border-radius: 50%;
        transform: translateY(-50%);
    }


    .b .slide-button:hover{
        background: black;
        color: rgb(56, 56, 230);
    }
    .b .slide-button#prev-slide{
        left: -20px;
        display: none;

    }    
    .b .slide-button#next-slide{
        right: -20px;

    }



    .d{
        width: 250px;
        background-color: white;
        border: 1px solid rgb(56, 56, 230);





    }


    .f{
        background-color: white;
        
        font-size: 12px;

        height: 20vh;
        padding-top: 20px;

    }

    .f span{
        background-color: rgb(78, 175, 78);
        font-size: 20px;
        color: whitesmoke;
        border-radius: 5px;
    }
    .f p{

        color: grey;


    }
    .f .g{
        color: black;
        font-size: 14px;

    }

    .e{
        width: 100%;
        height: auto;

    }

    .e img{

        max-height: 20vh;
        width: 245px;
    }


    .b .c{
        display: grid;
        gap: 18px;

        overflow-x: auto;

        grid-template-columns: repeat(10,1fr);

    }

    .b .c::-webkit-scrollbar  {
        display: none;
    }



    .a .slider-scrollbar{
        height: 24px;
        width: 100%;

        display: flex;
        align-items: center;
    }

    .slider-scrollbar .scrollbar-track{
        height: 2px;
        width: 100%;
        background: black;
        position: relative;
        border-radius: 4px;
    }

    .slider-scrollbar:hover .scrollbar-track{
        height: 4px;
    }

    .slider-scrollbar .scrollbar-thumb{
        position: absolute;
        height: 100%;
        width: 50%;
        background: rgb(56, 56, 230)yellow;
        border-radius: inherit;
        cursor: grab;
    }
    .slider-scrollbar .scrollbar-thumb:active{
        cursor: grabbing;
        height: 8px;
        top: -2px;
    }
    .slider-scrollbar .scrollbar-thumb::after{
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -10px;
        bottom: -10px;
    }

    
    /* -------------------CONTACT US PAGE------------------------------------------------------------ */




    #contact-details{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }


    #contact-details .details{
        width: 40%;
    }
    #contact-details .details span,
    #form-details form span{
        font-size: 12px;
    }

    #contact-details .details h2,
    #form-details form h2{
        font-size: 26px;
        line-height: 35px;
        padding: 20px 0;
    }

    #contact-details .details h3{
        font-size: 16px;
        padding-bottom: 15px;

    }

    #contact-details .details li{
        list-style: none;
        display: flex;
        padding: 10px 0;
    }


    #contact-details .details li i{
        font-size: 24px;
        padding-right: 22px;
    }

    #contact-details .details li p{
        margin: 0;
        font-size: 14px;
    }

    #contact-details .map{
        width: 100%;
        height: 300px;
    }

    #contact-details .map iframe{
        width: 100%;
        height: 100%;
    }



    #form-details{
        display: flex;
        justify-content: space-between;
        padding: 80px;
        margin: 30px;
        border: 1px solid wheat;

    }


    #form-details form{
        width: 65%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }


    #form-details form input,
    #form-details form textarea{
        width: 100%;
        padding: 12px 15px;
        outline: none;
        margin-bottom: 20px;
        border: 1px solid pink;
    }


    #form-details form button{
        background-color: pink;
        color: black;
        height: 7vh;
    }


    #form-details .people div{
        display: flex;
        align-items: flex-start;
        padding-bottom: 25px;
        padding-top: 25px;
    }


    #form-details .people div img{
        width: 65px;
        height: 65px;
        object-fit: cover;
        margin-right: 15px;
    }

    #form-details .people div p{
        margin: 0;
        font-size: 13px;
        line-height: 25px;
    }
    #form-details .people div p span{
        display: block;
        font-size: 16px;
        font-weight: 600;
        color: black;
    }



    /* --------------------------contct us------------------------------------------------------- */


    .contactus_headerz{
        min-height: 22vh;
        width: 100%;
        background-image: url(websiteimages/gal1/SPORT\ COMPLEX.jpg);
        background-position: center;
        background-size: cover;
        position: relative;
        background-image: linear-gradient(rgba(156, 170, 143, 0.7),rgba(29, 30, 29, 0.7)),url(websiteimages/gal1/SPORT\ COMPLEX.jpg);
    
    }

    .contactus-orientation {
        background-image: url(websiteimages/gal1/whitebck.jpg);
        background-size: cover;
        height: 45vh;
        /* margin-bottom: 100px; */
    
    }
    .contactus-orientation h3{
        font-size: 15px;
        font-weight: 200;
        color: rgb(77, 73, 134);
    
        text-align: center;

    


    }



    .contactus-orientation h2{
        font-size: 12px;
        font-weight: 100;
        color: black;
        margin-top: 20px;
        text-align: center;

    }


    .contactus-orientation p{
        font-size: 16px;
        font-weight: 20;
        color: black;
        margin-top: 10px;
        text-align: center;

    }


    .contactus-orientation p span{
        font-size: 36px;
        font-weight: 20;
        color: rgb(56, 56, 230);
        margin-top: 10px;
        text-align: center;

    }



    /* -----------------------------------------------------CONTACT US------------------------------------------------------ */





    .contact{
        padding: 40px 15%;
        background: whitesmoke;
        height: 100%;
        width: 100%;
        min-height: 100vh;
        display: grid;
        grid-template-columns: repeat(2,2fr);
        align-items: center;
        grid-gap: 6rem;
        margin-top: 10px;
        margin-bottom: -20px;
    
    }

    .contact-form h1{
        font-size: 42px;
        color: rgb(56, 56, 230);
        margin-bottom: 30px;
        margin-top: -40px;



        
    }
    span{
        color: #4F7942;
    }

    .contact-pic{
        min-height: 20vh;
        width: 100%;
        background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7 )),url(websiteimages/contact.png);
        background-position: center;
        background-size: cover;
        position: relative;

        margin-bottom: 50px;

    }
    .contact-form p{
        color: rgb(14, 15, 14);
        letter-spacing: 1px;
        line-height: 26px;
        font-size: 1.1rem;
        margin-bottom: 3.8rem;

        font-size: 18px;

    }

    .contact-form form{
        position: relative;
    }


    .contact-form form input, form textarea{
        width: 100%;
        padding: 17px;
        border: none;
        outline: none;
        background: white;
        color: black;
        font-size: 1.1rem;
        margin-bottom: 0.7rem;
        border-radius: 10p;
     

    }


    .contact-form textarea{
        resize: none;
        height: 150px;
    }

    .contact-form form .btn{
        display: inline-block;
        background: rgb(56, 56, 230);
        font-size: 1.1rem;
        letter-spacing: 1px;
        text-transform: uppercase;
        font-weight: 600;
        border: 2px solid transparent;
        border-radius: 10px;
        width: 150px;
        transition: ease .20s;
        cursor: pointer;
        margin-left: 110px;

        
    }

    .contact-form form .btn:hover{
        border: 2px solid yellowrgb(56, 56, 230);
        background: transparent;
        background: white;
        transform: scale(1.1);
    } 
    
    

    
    /* ------------------------------------------FOOOTER----------------------------------------- */


    .container{
        max-width: 1170px;
        height: 900px;
        /* background-color: rgb(54, 54, 208); */
        margin: auto;

    }

    .footerrow{
        display: flex;
        flex-wrap: wrap;
    }

    ul{
        list-style: none;
    

    }

    .footer{
        /* background-color: rgb(54, 54, 208); */
        color: white;
        padding: 70px 0;

    }

    .footer-col{
        width: 100%;
        padding: 0 25px;
        margin-top: 60px;
    }

    .footer-col h4{
        font-size: 28px;
        /* color: rgb(220, 220, 20); */
        text-transform: capitalize;
        margin-bottom: 30px;
        position: relative;
    
    }



    .footer-col ul li:not(:last-child){
        margin-bottom: 40px;


    }

    .footer-col ul li:last-child{
        margin-bottom: -40px;


    }

    .footer-col ul li a{
        font-size: 14px;
        text-transform: capitalize;
        text-decoration: none;
        /* color: rgb(220, 220, 20); */
        font-weight: 300;
        display: block;
        transition: all 0.3s ease;
    
    }

    .footer-col ul li a:hover{
        color: black;
        padding-left: 15px;
    }


    .social-links a{
        color: white;
    }


    .copyright {
        margin-bottom: 100px;

    }
    .copyright p{
        color: white;
    



    }
    

/* ------------------------------------------ team------------------------------------ */



    .dedicated-team-header h3{
    
    
        font-size: 22px;
        font-weight: 600 ;
        /* color: rgb(54, 54, 208); */
        padding: 10px;
        margin-top: 100px;
        margin-bottom: 30px;
        border-bottom: none;
    

    }

    .dedicated-team-header h3 span{
     
        font-size: 22px;
        font-weight: 600 ;
        /* color: rgb(54, 54, 208); */
        padding: 10px;
        margin-top: 100px;
        margin-bottom: 30px;
        border-bottom: none;
    


    }

    .jefcon-team{
        /* background-image: url(websiteimages/team3.jpeg); */
        background-size: cover;
       
    }


    .slide-content{
        margin: 0 40px;
    
    }
    
    
    .slide-container{
        max-width: 1120px;
        width: 100%;
        /* background-color: white; */
        padding: 40px 0;
    
    }



    
    .card{
        width: 320px;
        border-radius: 25px;
        /* background-color: rgb(220, 220, 20);
        border: 1px dashed rgb(112, 126, 112); */

    }


    .image-content, .card-content{
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10px 14px;
    
    }
    
    .image-content{
        row-gap: 5px;
        position: relative;
        padding: 25px 0;
    
    }
    
    
    .overlay{
        position: absolute;
        left: 0;
        top: 0;
        height: 90%;
        width: 100%;
        /* background-color: rgb(54, 54, 208); */
        border-radius: 25px 25px 0 25px;
    }
    
    .overlay::before, .overlay::after{
        content: '';
        position: absolute;
        right: 0;
        bottom: -40px;
        height: 40px;
        width: 40px;
        /* background-color: rgb(54, 54, 208); */
    }
    
    .overlay::after{
        border-radius: 0 25px 0 0;
        /* background-color: rgb(220, 220, 20); */
    }



    .card-image{
        position: relative;
        height: 200px;
        width: 200px;
        
        border-radius: 50%;
        /* background: white; */
        padding: 3px;
    }
    .card-image .card-img{
        height: 100%;
        width: 100%;
        object-fit: cover;
        border-radius: 50%;
        /* border: 4px solid white; */
    }
    
    .name{
        font-size: 18px;
        font-weight: 500;
        /* color: black; */
  
    }
    
    
    .description{
        font-size: 28px;
        /* color: rgb(54, 54, 208); */
        text-align: center;
    }
    
    
    .button{
        border: none;
        font-size: 16px;
        /* color: black; */
        padding: 8px 16px;
        /* background-color: rgb(54, 54, 208); */
        border-radius: 6px;
        margin: 14px;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    /* .button:hover{
        background: wheat;
    } */
    
    
    
    
    /* --------------------header----------------- */
    
    
    
    
    
    .headerimagee img{
        height: 10vh;
       
    
    }
    
    
    ul{
        list-style: none;
    
    
    }
    
    
    header{
        background-color: rgb(56, 56, 230);
        padding: 2rem 0;
      
    
    
    
    }
    
    nav{
        max-width: 1100px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        
    }
    
    
    .menu > li, .menu > a{
        display: inline-block;
    
        
        
    
    }
    .menu li{
        position: relative;
        
    
     
        
        
    }
    
    .menu a{
        text-decoration: none;
        color: white;
        display: block;
        padding: 10px;
     
        transition: background-color .22s ease, color .22s ease;
        
    
    
    }
    
    .menu a:hover{
        background-color: rgb(34, 174, 34);
        color: white;
    }
    
    .logo{
        font-size: 21px;
        color: white;
        font-weight: 500;
    }
    
    .submenu{
        position: absolute;
        background-color: rgb(56, 56, 230);
        width: 140px;
    
        display: none;
    }
    
    
    .menu li:hover > .submenu{
        display: block;
    }
}

























































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



/* -------- */

    /* ----------Hero---------- */
    #hero{
        /* background-image: url(images/lionel-messi-sport-footballers-wallpaper-5450a0bae1d6b8ca376c0ee9bfeaed9b.jpg); */
        /* background-image: url(images/soccer-lionel-messi-argentinian-wallpaper-3060d5b96f06ee23f8df87c65be66498.jpg); */
        /* background-image: url(images/lionel-messi-fcb-barcelona-fc-barcelona-wallpaper-preview.jpg); */
        /* background-image: url(images/lionel-messi-soccer-football-wallpaper-preview.jpg); */
        /* background-image: url(images/football-club-form-player-wallpaper-preview.jpg); */
        /* background-image: url(images/soccer-paulo-dybala-argentinian-juventus-f-c-wallpaper-preview.jpg); */
        /* background-image: url(images/football-the-best-players-2016-soccer-lionel-messi-wallpaper-8816bdf880a04c08007c212ea8f2e49a.jpg); */
        /* background-image: url(websiteimages/gal1/SPORT\ COMPLEX.jpg); */
        /* background-image: url(images/action-art-artistic-athletic-d9ac803715075f22cde03edf1bff49bb.jpg); */
        /* background-image: url(images/soccer-kylian-mbappe-french-world-cup-2018-wallpaper-f8268caa6facb7992eb0c982f2590be0.jpg); */
        /* background-image: url(images/64a5c3ac757e775eef042fc7_withmeta.jpg); */
        /* background-image: url(images/depositphotos_165317552-stock-photo-cheerful-delivery-man-happy-young.jpg); */
        /* background-image: url(images/landingimage.jpeg); */
        /* background-image: url(images/m.jpeg), linear-gradient(rgba(4,9,30,0.75),rgba(26, 29, 42, 0.55)); */
        background-image: linear-gradient(rgba(4,9,30,0.85),rgba(26, 29, 42, 0.75)),url(websiteimages/gal1/SPORT\ COMPLEX.jpg);

    
    

        height: 90vh;
        width: 100%;
        background-size: cover;
        background-position: top 25% left 1px;
        /* padding: 0 80px; */
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;
        /* background-color: linear-gradient(to bottom, rgba(167, 31, 31, 0.5),rgb(56, 3, 3)); */
    }

    #hero h4{
        padding-bottom: 15px;
        margin-left: 25px;
        color: white;
        font-size: 30px;
        margin-top: -50px;
        text-align: center;
        font-weight: 600;
    }



    #hero h4 span{
        /* padding-bottom: 15px;
        margin-left: 100px; */
        color: rgb(56, 56, 230);
        font-size: 30px;
        /* margin-top: -100px;
        text-align: center; */
    }
    #hero h1{
        color: purple;
        margin-left: 200px;
    }

    #hero h2{
        color: white;
        margin-left: 25px;
        text-align: center;
        font-size: 16px;
        font-weight: 100;
        width: 80%;
        margin-top: 50px;
    }

    #hero p{
        /* color: black; */
        margin-left: 600px;
    }
    #hero button{
        background-image: url(images/skull-graffiti-background-skull-graffiti-wallpaper-skull-graffiti-pattern-graffiti-background-graffiti-art-graffiti-wallpaper-ai-generative-photo.jpg);
        /* background-image: url(images/images.jpeg); */
        background-color: transparent;
        color: white;
        font-size: 30px;
        font-weight: 700;
        border-radius: 10px;
        border: 0;
        padding: 14px 80px 14px 65px;
        background-repeat: no-repeat;
        cursor: pointer;

    }



    #hero a{
        text-decoration: none;
        display: inline-block;
        color: white;
    
        background-color: rgb(56, 56, 230);
    
        font-size: 24px;
        border: 3px solid rgb(56, 56, 230);

        padding: 12px 20px;
        border-radius: 15px;
        margin-left: 75px;

        margin-top: 20px;
    }

    #hero a:hover{
        border: 1px solid rgb(56, 56, 230);
        background: rgb(64, 62, 62);
        transition: 1s;
        color: white;
    }




    /* ----------------------------Trust Bar------------------------- */



    .trustafter-about-us .office-image{
        height: 25vh;
        /* background-image: url(websiteimages/gal1/grey1.jpg); */
        background-size: cover;
        margin-top: 210px;
        width: 80%;
        /* margin-left: 600px; */
    }


    .trustafter-about-us .office-image h1{
        /* color: rgb(86, 86, 86); */
        color: rgb(73, 70, 70);
        /* text-align: center; */
        font-size: 20px;
        font-weight: 600;
        margin-left: 50px;
        font-style: italic;

    }

    .trustafter-about-us .office-image h2{
        /* color: rgb(86, 86, 86); */
        color: rgb(73, 70, 70);
        /* text-align: center; */
        font-size: 20px;
        font-weight: 600;
        margin-left: 50px;
        font-style: italic;
        margin-top: 10px;
    }

    .trustafter-about-us .office-image h3{
        /* color: rgb(86, 86, 86); */
        color: rgb(73, 70, 70);
        /* text-align: center; */
        font-size: 20px;
        font-weight: 600;
        margin-left: 50px;
        font-style: italic;
        margin-top: 10px;
    }

    .trustafter-about-us .office-image h4{
        /* color: rgb(86, 86, 86); */
        color: rgb(73, 70, 70);
        /* text-align: center; */
        font-size: 20px;
        font-weight: 600;
        margin-left: 50px;
        font-style: italic;
        margin-top: 10px;
    }

    .trustafter-about-us .office-image h5{
        /* color: rgb(86, 86, 86); */
        color: rgb(73, 70, 70);
        /* text-align: center; */
        font-size: 20px;
        font-weight: 600;
        margin-left: 50px;
        font-style: italic;
        margin-top: 10px;
    }
/* ----------------------------video header------------------------- */

    #videoheader{
        width: 100%;
        height: 100vh;

        position: relative;
        padding: 0 5%;
        display: flex;
        align-items: center;
        justify-content: center;

    

    }

    .videocontent{

        text-align: center;
        margin-top: -100px;


    }

    .videocontent h1{
        font-size: 40px;

        /* color: rgb(24, 41, 24); */
        color: white;
        font-weight: 600;
        margin-top: -250px;
    }



    .videocontent p{
        font-size: 20px;

        /* color: rgb(24, 41, 24); */
        color: white;
    
    
        /* font-weight: 600; */
        margin-top: 100px;
    }



    .videocontent a{
        text-decoration: none;
        display: inline-block;
        color: rgb(20, 20, 20);
    
        background-color: rgb(83, 83, 187);
    
        font-size: 24px;
        border: 3px solid rgb(83, 83, 187);

        padding: 14px 30px;
        /* border-radius: 50px; */
        margin-top: 20px;
    }

    .videocontent a:hover{
        border: 1px solid rgb(56, 56, 230);
        background: rgb(64, 62, 62);
        transition: 1s;
        color: white;
        }

    .back-video{
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: -1;
        background-size: cover;
    }

    video{
        height: 140vh;
        width: 1600px;

    }


    /* ------------------------------------------------------ORIENTATION------------------------------------- */


    .orientation {
        background-image: url(websiteimages/oientation.JPG);
        background-size: cover;
        height: 10%;
  
    }
    .orientation h3{
        font-size: 22px;
        font-weight: 200;
        color: rgb(77, 73, 134);
        margin-top: 5px;
        text-align: center;

    }



    .orientation h2{
        font-size: 16px;
        font-weight: 100;
        color: black;
        margin-top: 5px;
        text-align: center;

    }


    .orientation h2 span{
        font-size: 16px;
        font-weight: 100;
        color: rgb(56, 56, 230);
        margin-top: 10px;
        text-align: center;

    }

    .orientation p{
        font-size: 16px;
        font-weight: 20;
        color: black;
        margin-top: 5px;
        text-align: center;

    }
    
    /* ----------- ABOUT US------------------------------------------------------------------- */

    /* ----------- ABOUT US------------------------------------------------------------------------------------------------ */

    /* #about-us{
        background-color: white;
    } */
    .about-us h3{
        width: 90%;
        font-size: 25px;
        font-weight: 600 ;
        color: rgb(4, 3, 3);
        padding: 10px;
        margin-top: 520px;
        /* margin-bottom: 30px; */
        text-align: left;
        /* border-bottom: 3px solid rgb(4, 3, 3); */
        /* border-bottom: 3px solid rgb(54, 54, 208); */
        /* margin-left: 20px; */

    }



    .about-us h3 span{
        width: 90%;
        font-size: 25px;
        font-weight: 600 ;
        color: rgb(54, 54, 208);
        padding: 10px;
        /* margin-top: 100px; */
        /* margin-bottom: 30px; */
        /* border-bottom: 3px solid rgb(54, 54, 208); */
        text-align: center;


    }



    .about-us{
        /* background-image: url(websiteimages/gal1/eg.png); */
        background-size: cover;
        /* background-image: linear-gradient(rgba(4,9,30,0.25),rgba(4,9,30,0.25 )),url(websiteimages/gal1/eliteg.png); */

        height: 100vh;

    }

    .yr12-pic {
        min-height: 15vh;
    
        width: 10%;
        background-image: url(websiteimages/12yrs.png);
    
        background-position: center;
        background-size: cover;
        position: relative;

        margin-left: 44%;
        
        

    }


    .about-us h4{
        width: 80%;
        margin: auto;
        text-align: center;
        font-size: 26px;
        font-weight: 500 ;
        color: whitesmoke;
    
        padding: 10px;
        padding-top: 25px;
        margin-left: 100px;
    }

    .yrs h4{
        width: 80%;
        margin: auto;
        text-align: center;
        font-size: 26px;
        font-weight: 500 ;
        color: whitesmoke;
    
        padding: 10px;
        margin-top: -50px;
        margin-left: 220px;
    }



    .of-services h4{
        width: 80%;
        margin: auto;
    
        font-size: 26px;
        font-weight: 500 ;
        color: whitesmoke;
    
        padding: 10px;
    
        margin-left: 220px;

    }

    .about-us p{
        width: 90%;
        margin: auto;
    
        padding-top: 50px;
        font-size: 16px;
        font-weight: 300 ;
        color: rgb(63, 61, 61);
    
        padding: 10px;
        margin-left: 16px;
        margin-top: 20px;
    }




    .about-us p span{
        width: 90%;
        margin: auto;
    
        padding-top: 50px;
        font-size: 24px;
        font-weight: 300 ;
        color: rgb(63, 61, 61);
    
        padding: 10px;

    }

    .about-us .office-image{
        height: 30vh;
        background-image: url(websiteimages/gal1/pngtree.jpg);
        background-size: cover;
        margin-top: -830px;
        width: 100%;
        margin-left: 1px;

    }


    .after-about-us .office-image{
        height: 35vh;
        background-image: url(websiteimages/gal1/blue3.jpg);
        background-size: cover;
        margin-top: -100px;
        width: 100%;
    
    }


    .after-about-us .office-image h1{
        color: white;
        /* text-align: left; */
        font-size: 16px;
        font-weight: 200;
        margin-left: 50px;
        margin-top: -40px;
    }



    .after-about-us .office-image h2{
        color: white;
        /* text-align: left; */
        font-size: 16px;
        font-weight: 200;
        margin-left: 50px;
        margin-top: 10px;
    }




    .after-about-us .videocontentbutton a{
        text-decoration: none;
        display: inline-block;
        color: white;


        background-color: transparent;

        font-size: 15px;
        border: 3px solid white;
        padding: 17px 50px;
        /* border-radius: 50px; */
        margin-top: 20px;
        margin-left: 50px;
        /* margin-bottom: 100px; */
    }


    .after-about-us .videocontentbutton a:hover{
        border: 1px solid rgb(56, 56, 230);
        background: rgb(56, 56, 230);
        transition: 1s;
        color: white;
    }



    
/* ------------------------------------------------our services----------------------------------------- */
    #our-services .videocontentbutton a{
        text-decoration: none;
        display: inline-block;
        color: white;


        background-color: rgb(56, 56, 230);

        font-size: 15px;
        border: 1px solid rgb(56, 56, 230);
        padding: 7px 40px;
        border-radius: 15px;
        margin-top: 50px;
        margin-left: -10px;
        /* margin-bottom: 100px; */
    }


    #our-services .videocontentbutton a:hover{
        border: 1px solid rgb(56, 56, 230);
        background: transparent;
        transition: 1s;
        color: black;
        }


    #our-services{
        /* max-width: 1240px; */
        max-width: 100%;
        margin: 0 auto;
        padding: 5%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: white;
        /* background: linear-gradient(to bottom, rgba(236, 210, 80, 0.5),rgb(186, 142, 22)); */
        margin-top: 1050px;
        /* background-image: url(websiteimages/gal1/grey4.jpg); */

        



    }


    .ourservicesword{
        
        width: 60%;
        justify-content: space-around;
        margin-left: -150px;
        margin-top: 400px;

    

    }

    .ourservicesword h1{
        font-size: 25px;
        color: rgb(84, 80, 80);
        margin-top: -500px;
        font-weight: 200;
    }




    .ourservicesword h1 span{
        font-size: 25px;
        color: rgb(56, 56, 230);
        margin-top: 150px;
        font-weight: 600;
    }


    .ourservicesword p{
        font-size: 16px;
        color: rgb(49, 45, 45);

    }





    .ourservicesword p span{
        font-size: 20px;
        color: rgb(56, 56, 230);
        font-weight: 400;
    }





    .ourservicewrapper{
            
        width: 100%;
        justify-content: space-around;
        margin-top: -800px;
        margin-left: -20px;
        
    }

    .serviceaaaa{
        margin-left: 210px;
        margin-top: -190px;
    }
    .serviceaaaa P{
        color: rgb(93, 90, 90);
        font-size: 14px;
    }
    .serviceaaaa h1{
        color: rgb(56, 56, 230);
    }
    .try{
        width: 10%;
        margin-top: -2100px;
        font-size: 20px;
        margin-left: 70px;
    }

    .try h1{
        color: rgb(56, 56, 230);

    }
    .try h1 span{
        color: rgb(4, 3, 3);
        border-bottom: 3px solid rgb(4, 3, 3);
    }

    .ourservicecard{
        width: 330px;
        height: 240px;
        padding: 2rem 1rem;
        background: #fff;
        position: relative;
        display: inline-block;
        align-items: flex-end;
        box-shadow: 0px 7px 10px rgba(0,0,0,0.5);
        transition: 0.5s ease-in-out;
    
        margin-top: 40px;
        margin-left: -75px;

    
    }


    /* .ourservicecard:hover{
        transform: translateY(20px);
    } */

    .ourservicecard:before{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5),rgb(193, 193, 193));
        z-index: 2;
        transition: 0.5s all;
        opacity: 0;
    }


    .ourservicecard:hover:before{
        opacity: 1;
    }




    .ourservicecard img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;

    }



    /* .ourservicecard .ourserviceinfo{
        position: relative;
        z-index: 3;
        color: black;
        opacity: 0;
        transform: translateY(30px);
        transform: 0.5s all;
    
    }


    .ourservicecard:hover .ourserviceinfo{
        opacity: 1;
        transform: translateY(0px);
    } */


    .ourservicecard .ourserviceinfo h1{
        margin: 0;
        color: rgb(4, 4, 4);
        font-size: 14px;
        text-align: center;
    }

    .ourservicecard .ourserviceinfo p{
        
        font-size: 12px;
        margin-top: 25px;
        margin-bottom: 20px;
        width: 90%;
    }
/* ------------------------------------------------------------------------- */
   
    .headerz{
        min-height: 23vh;
        width: 100%;
        background-image: url(websiteimages/IMG_8513.JPG);
        background-position: center;
        background-size: cover;
        position: relative;
    
    }
    
 
/* ---------------------------VISION N BRIEF------------------------------ */
/* ---------------------------VISION N BRIEF------------------------------ */
    .visionnbrief .see-all-articles-btn{
        display: inline-block;
        text-decoration: none;
        color: black;
    
    
        border: 1px solid blue;
        padding: 12px 34px;
        font-size: 13px;
        
        background: transparent;
        position: relative;
        cursor: pointer;
        /* border-radius: 15px; */
        margin-top: 440px;
        margin-left: -100px;
    
    
    }
    
    
    .see-all-articles-btn:hover{
        border: 1px solid wheat;
        background: rgb(51, 95, 184);
        font-size: 20px;
        transition: 1s;
    }


    #vnb {
        background-color: white;
        /* background-image: url(websiteimages/gal1/142195-blue-and-white-simple-background.jpg); */
        background-size: cover;
        margin-top: 500px;



    }

    .visionnbrief{
        width: 80%;
        margin: auto;
        text-align: center;
        padding-top: 50px;
        font-size: 15px;
        color: black;
        padding: 10px;
        padding-bottom: 150px;
        margin-top: -450px;
        background-color: white;
    }


    .vision-brief .vision{
        /* margin-top: 1%; */
        /* display: flex; */
        /* width: 100%; */
        background: white;
        /* background-image: url(websiteimages/gal1/d.jpg); */
        /* background-size: cover; */
        height: 67vh;
        width: 100px;
        /* background-image: linear-gradient(rgba(46, 49, 59, 0.7),rgba(54, 57, 71, 0.7)),url(websiteimages/74717cc8-306b-44a1-8bbc-13daab4b73cd.JPG); */
        /* background-image: linear-gradient(rgba(220, 235, 11, 0.25),rgb(218, 216, 1110)),url(websiteimages/74717cc8-306b-44a1-8bbc-13daab4b73cd.JPG); */
        margin-top: 100px;
        margin-left: 20px;
        display: flex;
        width: 100%;
        background-size: cover;
    
        display: inline-block;
        flex-basis: 31%;
        border-radius: 10px;
        margin-bottom: 5px;
        padding: 20px 12px;
        box-sizing: border-box;
        transition: 0.5s;

    }



    .vision h3{
        text-align: center;

        font-size: 60px;
        font-weight: 600;
        margin: 10px 0;
        color: grey;
        margin-top: 100px;
    }



    .vision-brief P{
        text-align: left;
        font-size: 18px;
        margin: 10px 0;
        color: rgb(119, 117, 117);
        margin-left: 10px;
        margin-top:  -450px;
        /* margin-bottom: -300px; */

        width: 100%;
    }


    .vision-brief P span{
        font-size: 46px;
        color: rgb(54, 54, 208);
        /* margin-top:  -400px; */
    }

/* .vision:hover{
    box-shadow: 0 0 20px 0px black;
} */
    

/* ------------------------------HEALTH AND SAFETY ENVIRONS---------------------- */

    #healthnsafety{
        margin-top: 100px;
        background: rgba(234, 234, 230, 0.5),rgb(210, 210, 208);
    }


    .safety{
        /* background-image: url(websiteimages/30883695-715b-4ff8-887e-fb056677490b.JPG); */
        height: 45vh;
        background-size: cover;
        /* background-image: linear-gradient(rgba(238, 240, 245, 0.3),rgba(238, 240, 245, 0.3)),url(websiteimages/30883695-715b-4ff8-887e-fb056677490b.JPG); */
        margin-top: -100PX;
    }

    .healthandsafety{
        margin-top: -50px;
    }

    .healthandsafety h4{
        width: 30%;
        margin: auto;
        padding-top: 50px;
        font-size: 25px;
        font-weight: 600 ;
        color: rgb(220, 220, 20);
        margin-left: 90px;
        padding: 10px;
    }

    .healthandsafety h4 span{
        width: 30%;
        margin: auto;
        padding-top: 50px;
        font-size: 23px;
        font-weight: 600 ;
        color:rgb(220, 220, 20);   
        padding: 10px;
        /* margin-left: 50px; */
    }

    .safety h4{
        color: white;
    }

    .health-safety-pic p{
        width: 100%;
        font-size: 11px;
        font-weight: 500 ;
        color: whitesmoke;

        
    }

    .health-safety-pic{
        min-height: 10vh;
        width: 70%;
    
        /* background-image: url(websiteimages/rgb(56, 56, 230).WEBP); */
        background-position: center;
        background-size: cover;
        position: relative;
        margin-left: 60px;
        margin-top: 80px;
        border-radius: 10px;
        /* background-image: linear-gradient(rgba(4, 4, 4, 0.855),rgba(7, 81, 7, 0.3)),url(websiteimages/rgb(56, 56, 230).WEBP); */

    }

    .health-safety-pic:hover{
        box-shadow: 0 0 20px 0px rgb(119, 116, 116);
       
    }

    
    /* --------------------------RECENT JOBS------------------------------------ */

    .recent-jobs h3{

        width: 80%;
        margin: auto;
        text-align: center;
        padding-top: 50px;
        font-size: 35px;
        font-weight: 600 ;
        /* color: rgb(54, 54, 208); */
        
        padding: 10px;
        margin-top: 50px;
        /* border-bottom: 3px solid rgb(220, 220, 20); */
    }

    .recent-jobs h3 span{

        width: 80%;
        margin: auto;
        text-align: center;
        padding-top: 50px;
        font-size: 35px;
        font-weight: 600 ;
        /* color: rgb(220, 220, 20); */
        
        padding: 10px;
        margin-top: 350px;
        /* border-bottom: 3px solid rgb(54, 54, 208); */

    }

    .recent-jobs p{
        width: 90%;
        margin: auto;
    
        padding-top: 50px;
        font-size: 14px;
        font-weight: 100 ;
        color: #696969;
    
        padding: 10px;
        padding-bottom: 50px;
    }

    /* ------------------------------------------------our services----------------------------------------- */
    #jobour-services .videocontentbutton a{
        text-decoration: none;
        display: inline-block;
        color: rgb(4, 4, 4);


        background-color: white;

        font-size: 15px;
        border: 1px solid rgb(56, 56, 230);
        padding: 7px 40px;
        /* border-radius: 50px; */
        margin-top: 50px;
        margin-left: 510px;
        /* margin-bottom: 100px; */
    }


    #jobour-services .videocontentbutton a:hover{
        border: 1px solid rgb(56, 56, 230);
        background: rgb(56, 56, 230);
        transition: 1s;
        color: white;
        }


    /* .videocontent{

        text-align: center;
        margin-top: -50px;


    } */
    #jobour-services{
        /* max-width: 1240px; */
        max-width: 100%;
        margin: 0 auto;
        padding: 5%;
        display: flex;
        justify-content: center;
        align-items: center;

        margin-top: 50px;
        /* background-image: url(websiteimages/gal1/grey4.jpg); */
         /*background-color: red; */

        



    }


    .jobourservicesword{
        
        width: 60%;
        justify-content: space-around;
        margin-left: -150px;
        margin-top: 400px;

    

    }

    .ourservicesword h1{
        font-size: 25px;
        color: rgb(84, 80, 80);
        margin-top: -500px;
        font-weight: 200;
    }




    .ourservicesword h1 span{
        font-size: 25px;
        color: rgb(56, 56, 230);
        margin-top: 150px;
        font-weight: 600;
    }


    .ourservicesword p{
        font-size: 16px;
        color: rgb(49, 45, 45);

    }





    .ourservicesword p span{
        font-size: 20px;
        color: rgb(56, 56, 230);
        font-weight: 400;
    }





    .jobourservicewrapper{
            
        width: 100%;
        justify-content: space-around;
        margin-top: -10px;
        margin-left: -345px;
        
    }

    .serviceaaaa{
        margin-left: 210px;
        margin-top: -190px;
    }
    .serviceaaaa P{
        color: rgb(93, 90, 90);
        font-size: 14px;
    }
    .serviceaaaa h1{
        color: rgb(56, 56, 230);
    }
    .jobtry{
        width: 80%;
        margin-top: -1050px;
        font-size: 17px;
        margin-left: 10px;
    }

    .jobtry h1{
        color: rgb(56, 56, 230);

    }
    .jobtry h1 span{
        color: rgb(4, 3, 3);
        /* border-bottom: 3px solid rgb(4, 3, 3); */
    }

    .jobourservicecard{
        width: 340px;
        height: 270px;
        padding: 2rem 1rem;
        background: #fff;
        position: relative;
        display: inline-block;
        align-items: flex-end;
        box-shadow: 0px 7px 10px rgba(0,0,0,0.5);
        transition: 0.5s ease-in-out;
    
        margin-top: 40px;
        margin-left: 30px;

    
    }


    /* .jobourservicecard:hover{
        transform: translateY(20px);
    } */

    .jobourservicecard:before{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5),rgb(193, 193, 193));
        z-index: 2;
        transition: 0.5s all;
        opacity: 0;
    }


    .jobourservicecard:hover:before{
        opacity: 1;
    }




    .jobourservicecard img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;

    }



    .jobourservicecard .ourserviceinfo{
        position: relative;
        z-index: 3;
        color: black;
        opacity: 0;
        transform: translateY(30px);
        transform: 0.5s all;
    
    }


    .jobourservicecard:hover .ourserviceinfo{
        opacity: 1;
        transform: translateY(0px);
    }


    .jobourservicecard .ourserviceinfo h1{
        margin: 0;
        color: rgb(4, 4, 4);
        /* color: rgb(34, 34, 189); */
        font-size: 14px;
        text-align: left;
    }



    .jobourservicecard .ourserviceinfo h1 span{
        margin: 0;
        /* color: rgb(4, 4, 4); */
        color: rgb(34, 34, 189);
        font-size: 20px;
        text-align: left;
    }





    .jobourservicecard .ourserviceinfo p{
        
        font-size: 12px;
        margin-top: 25px;
        margin-bottom: 20px;
        width: 90%;
    }




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


        /* background-color: red; */

        font-size: 12px;
        border: 1px solid rgb(56, 56, 230);
        padding: 4px 20px;
        border-radius: 15px;
        margin-top: -20px;
        /* margin-left: 510px; */
        /* margin-bottom: 100px; */
    }


    .jobourservicecard .minivideocontentbutton a:hover{
        border: 1px solid rgb(56, 56, 230);
        background: rgb(56, 56, 230);
        transition: 1s;
        color: white;
    }









    .jobourservicewrapper .seevideocontentbutton a{
        text-decoration: none;
        display: inline-block;
        color: white;


        background-color: rgb(56, 56, 230);

        font-size: 15px;
        border: 1px solid rgb(56, 56, 230);
        padding: 16px 30px;
        border-radius: 15px;
        margin-top: 50px;
        margin-left: 100px;

    }


    .jobourservicewrapper .seevideocontentbutton a:hover{
        border: 1px solid rgb(56, 56, 230);
        background: transparent;
        transition: 1s;
        color: black;
    }


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


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


        background-color: white;

        font-size: 15px;
        border: 1px solid rgb(56, 56, 230);
        padding: 7px 40px;
        /* border-radius: 50px; */
        margin-top: -1200px;
        margin-left: 110px;
        margin-bottom: 100px;
    }


    .recent-jobs .videocontentbutton a:hover{
        border: 1px solid rgb(56, 56, 230);
        background: rgb(56, 56, 230);
        transition: 1s;
        color: white;
        }
    /* ---------------------------------TOP CLIENTS------------------------------------ */
    
    #top-clients{
        margin-top: -100px;
        background: rgba(234, 234, 230, 0.5),rgb(210, 210, 208);
    }
    
    .thisimages{
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 400px;
        background-color: white;
    }
    
    
    
    .thisimages div{
        height: 350px;
        width: 200px;
        margin: 60px;
    }
    
    
    
    .clients h3{
    
        width: 32%;
        margin: auto;
        padding-top: 50px;
        font-size: 25px;
        font-weight: 600 ;
        color: rgb(54, 54, 208);
        margin-left: 20px;
        
        padding: 10px;
        border-bottom:3px solid black;
    }
    
    .clients h3 span{
    
        width: 32%;
        margin: auto;
        padding-top: 50px;
        font-size: 25px;
        font-weight: 600 ;
        color: rgb(54, 54, 208);
        
        padding: 10px;
        margin-top: 350px;
        border-bottom: 3px solid black;
    
    }
    
    
    
    .clients p{
    
        width: 80%;
        margin: auto;
        text-align: center;
        padding-top: 50px;
        font-size: 24px;
        font-weight: 60 ;
        color: grey;
        
        padding: 10px;
    }
    
    
    .delta-govt h2{
        color: darkgrey;
        /* text-align: center; */
        margin-left: 5%;
    
    }
    
    
    .dtsg-pic{
        min-height: 15vh;
        width: 35%;
        background-image: url(websiteimages/deltalogo.png);
        background-position: center;
        background-size: cover;
        position: relative;
        margin-top: 5%;
        margin-left: 25%;
    
        
        
    
    }
    .total-pic{
        min-height: 15vh;
        width: 50%;
        background-image: url(websiteimages/total.PNG);
        background-position: center;
        background-size: cover;
        position: relative;
        margin-top: 5%;
        margin-left: 25%;    
    
    }
    
    .total p{
    
        width: 80%;
        margin: auto;
        text-align: center;
        padding-top: 50px;
        font-size: 24px;
        font-weight: 60 ;
        color: grey;
        padding: 10px;
    }
    
    .initiatesplc-pic{
        min-height: 9vh;
        width: 90%;
        background-image: url(websiteimages/the-initiates.PNG);
        background-position: center;
        background-size: cover;
        position: relative;
        margin-top: 5%;
        margin-left:5%;    
    
    }
    
    .initiatesplc p{
    
        width: 80%;
        margin: auto;
        text-align: center;
        padding-top: 50px;
        font-size: 24px;
        font-weight: 60 ;
        color: grey;
        padding: 10px;
    }
    




    /* -----------------------------------------------------------------------OFFICE IMAGE-------------------------------------------------- */
    .office-image{
        height: 40vh;
        background-image: url(websiteimages/16e761bc-2964-4244-882c-0a801bd31c5b.JPG);
        background-size: cover;
        margin-top: 40px;
    }
    /* ------------------------------------------BLOG AND LATEST NEWS----------------------------- */



    .recent-blog-header h3{
       
        
        font-size: 35px;
        font-weight: 600 ;
        color: rgb(56, 56, 230);
        
        padding: 10px;
        margin-top: 10px;


    }

    .recent-blog-header h3 span{


        font-size: 35px;
        font-weight: 600 ;
        color: black;
        
        padding: 10px;
        margin-top: 10px;



    }


    .recent-blog-header p{


        font-size: 15px;

        color: black;
        
        padding: 10px;
        margin-top: 10px;


    }



    .a {
        max-width: 1200px;
        width: 70%;
        max-height: 20px;
        padding-bottom: 350px;
       
        
       

    }


    .b{
        position: relative;

    }
    .b .slide-button{
        position: absolute;
        top: 50%;
        height: 50px;
        width: 50px;
        color: wheat;
        border: none;
        outline: none;
        background: rgb(56, 56, 230);
        font-size: 2.2rem;
        cursor: pointer;
        border-radius: 50%;
        transform: translateY(-50%);
    }


    .b .slide-button:hover{
        background: black;
        color: rgb(56, 56, 230);
    }
    .b .slide-button#prev-slide{
        left: -20px;
        display: none;

    }    
    .b .slide-button#next-slide{
        right: -20px;

    }



    .d{
        width: 250px;
        background-color: white;
        border: 1px solid rgb(56, 56, 230);





    }


    .f{
        background-color: white;
        
        font-size: 12px;

        height: 20vh;
        padding-top: 20px;

    }

    .f span{
        background-color: rgb(78, 175, 78);
        font-size: 20px;
        color: whitesmoke;
        border-radius: 5px;
    }
    .f p{

        color: grey;


    }
    .f .g{
        color: black;
        font-size: 14px;

    }

    .e{
        width: 100%;
        height: auto;

    }

    .e img{

        max-height: 20vh;
        width: 245px;
    }


    .b .c{
        display: grid;
        gap: 18px;

        overflow-x: auto;

        grid-template-columns: repeat(10,1fr);

    }

    .b .c::-webkit-scrollbar  {
        display: none;
    }



    .a .slider-scrollbar{
        height: 24px;
        width: 100%;

        display: flex;
        align-items: center;
    }

    .slider-scrollbar .scrollbar-track{
        height: 2px;
        width: 100%;
        background: black;
        position: relative;
        border-radius: 4px;
    }

    .slider-scrollbar:hover .scrollbar-track{
        height: 4px;
    }

    .slider-scrollbar .scrollbar-thumb{
        position: absolute;
        height: 100%;
        width: 50%;
        background: rgb(56, 56, 230)yellow;
        border-radius: inherit;
        cursor: grab;
    }
    .slider-scrollbar .scrollbar-thumb:active{
        cursor: grabbing;
        height: 8px;
        top: -2px;
    }
    .slider-scrollbar .scrollbar-thumb::after{
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -10px;
        bottom: -10px;
    }

    
    /* -------------------CONTACT US PAGE------------------------------------------------------------ */




    #contact-details{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }


    #contact-details .details{
        width: 40%;
    }
    #contact-details .details span,
    #form-details form span{
        font-size: 12px;
    }

    #contact-details .details h2,
    #form-details form h2{
        font-size: 26px;
        line-height: 35px;
        padding: 20px 0;
    }

    #contact-details .details h3{
        font-size: 16px;
        padding-bottom: 15px;

    }

    #contact-details .details li{
        list-style: none;
        display: flex;
        padding: 10px 0;
    }


    #contact-details .details li i{
        font-size: 24px;
        padding-right: 22px;
    }

    #contact-details .details li p{
        margin: 0;
        font-size: 14px;
    }

    #contact-details .map{
        width: 100%;
        height: 300px;
    }

    #contact-details .map iframe{
        width: 100%;
        height: 100%;
    }



    #form-details{
        display: flex;
        justify-content: space-between;
        padding: 80px;
        margin: 30px;
        border: 1px solid wheat;

    }


    #form-details form{
        width: 65%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }


    #form-details form input,
    #form-details form textarea{
        width: 100%;
        padding: 12px 15px;
        outline: none;
        margin-bottom: 20px;
        border: 1px solid pink;
    }


    #form-details form button{
        background-color: pink;
        color: black;
        height: 7vh;
    }


    #form-details .people div{
        display: flex;
        align-items: flex-start;
        padding-bottom: 25px;
        padding-top: 25px;
    }


    #form-details .people div img{
        width: 65px;
        height: 65px;
        object-fit: cover;
        margin-right: 15px;
    }

    #form-details .people div p{
        margin: 0;
        font-size: 13px;
        line-height: 25px;
    }
    #form-details .people div p span{
        display: block;
        font-size: 16px;
        font-weight: 600;
        color: black;
    }



    /* --------------------------contct us------------------------------------------------------- */


    .contactus_headerz{
        min-height: 22vh;
        width: 100%;
        background-image: url(websiteimages/gal1/SPORT\ COMPLEX.jpg);
        background-position: center;
        background-size: cover;
        position: relative;
        background-image: linear-gradient(rgba(156, 170, 143, 0.7),rgba(29, 30, 29, 0.7)),url(websiteimages/gal1/SPORT\ COMPLEX.jpg);
    
    }

    .contactus-orientation {
        background-image: url(websiteimages/gal1/whitebck.jpg);
        background-size: cover;
        height: 40vh;
        /* margin-bottom: 140px; */
    
    }
    .contactus-orientation h3{
        font-size: 16px;
        font-weight: 200;
        color: rgb(77, 73, 134);
    
        text-align: center;

    


    }



    .contactus-orientation h2{
        font-size: 12px;
        font-weight: 100;
        color: black;
        margin-top: 20px;
        text-align: center;

    }


    .contactus-orientation p{
        font-size: 16px;
        font-weight: 20;
        color: black;
        margin-top: 10px;
        text-align: center;

    }


    .contactus-orientation p span{
        font-size: 36px;
        font-weight: 20;
        color: rgb(56, 56, 230);
        margin-top: 10px;
        text-align: center;

    }



    /* -----------------------------------------------------CONTACT US------------------------------------------------------ */





    .contact{
        padding: 40px 15%;
        background: whitesmoke;
        height: 100%;
        width: 100%;
        min-height: 100vh;
        display: grid;
        grid-template-columns: repeat(2,2fr);
        align-items: center;
        grid-gap: 6rem;
        margin-top: 10px;
        margin-bottom: -20px;
    
    }

    .contact-form h1{
        font-size: 42px;
        color: rgb(56, 56, 230);
        margin-bottom: 30px;
        margin-top: -40px;



        
    }
    span{
        color: #4F7942;
    }

    .contact-pic{
        min-height: 20vh;
        width: 100%;
        background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7 )),url(websiteimages/contact.png);
        background-position: center;
        background-size: cover;
        position: relative;

        margin-bottom: 50px;

    }
    .contact-form p{
        color: rgb(14, 15, 14);
        letter-spacing: 1px;
        line-height: 26px;
        font-size: 1.1rem;
        margin-bottom: 3.8rem;

        font-size: 18px;

    }

    .contact-form form{
        position: relative;
    }


    .contact-form form input, form textarea{
        width: 100%;
        padding: 17px;
        border: none;
        outline: none;
        background: white;
        color: black;
        font-size: 1.1rem;
        margin-bottom: 0.7rem;
        border-radius: 10p;
     

    }


    .contact-form textarea{
        resize: none;
        height: 150px;
    }

    .contact-form form .btn{
        display: inline-block;
        background: rgb(56, 56, 230);
        font-size: 1.1rem;
        letter-spacing: 1px;
        text-transform: uppercase;
        font-weight: 600;
        border: 2px solid transparent;
        border-radius: 10px;
        width: 150px;
        transition: ease .20s;
        cursor: pointer;
        margin-left: 110px;

        
    }

    .contact-form form .btn:hover{
        border: 2px solid yellowrgb(56, 56, 230);
        background: transparent;
        background: white;
        transform: scale(1.1);
    } 
    
    

    
    /* ------------------------------------------FOOOTER----------------------------------------- */


    .container{
        max-width: 1170px;
        height: 1050px;
        /* background-color: rgb(54, 54, 208); */
        margin: auto;

    }

    .footerrow{
        display: flex;
        flex-wrap: wrap;
    }

    ul{
        list-style: none;
    

    }

    .footer{
        /* background-color: rgb(54, 54, 208); */
        color: white;
        padding: 70px 0;

    }

    .footer-col{
        width: 100%;
        padding: 0 25px;
        margin-top: 60px;
    }

    .footer-col h4{
        font-size: 28px;
        /* color: rgb(220, 220, 20); */
        text-transform: capitalize;
        margin-bottom: 30px;
        position: relative;
    
    }



    .footer-col ul li:not(:last-child){
        margin-bottom: 40px;


    }

    .footer-col ul li:last-child{
        margin-bottom: -40px;


    }

    .footer-col ul li a{
        font-size: 14px;
        text-transform: capitalize;
        text-decoration: none;
        /* color: rgb(220, 220, 20); */
        font-weight: 300;
        display: block;
        transition: all 0.3s ease;
    
    }

    .footer-col ul li a:hover{
        color: black;
        padding-left: 15px;
    }


    .social-links a{
        color: white;
    }


    .copyright {
        margin-bottom: 100px;

    }
    .copyright p{
        color: white;
    



    }
    

/* ------------------------------------------ team------------------------------------ */



    .dedicated-team-header h3{
    
    
        font-size: 22px;
        font-weight: 600 ;
        /* color: rgb(54, 54, 208); */
        padding: 10px;
        margin-top: 100px;
        margin-bottom: 30px;
        border-bottom: none;
    

    }

    .dedicated-team-header h3 span{
     
        font-size: 22px;
        font-weight: 600 ;
        /* color: rgb(54, 54, 208); */
        padding: 10px;
        margin-top: 100px;
        margin-bottom: 30px;
        border-bottom: none;
    


    }

    .jefcon-team{
        /* background-image: url(websiteimages/team3.jpeg); */
        background-size: cover;
       
    }


    .slide-content{
        margin: 0 40px;
    
    }
    
    
    .slide-container{
        max-width: 1120px;
        width: 100%;
        /* background-color: white; */
        padding: 40px 0;
    
    }



    
    .card{
        width: 320px;
        border-radius: 25px;
        /* background-color: rgb(220, 220, 20);
        border: 1px dashed rgb(112, 126, 112); */

    }


    .image-content, .card-content{
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10px 14px;
    
    }
    
    .image-content{
        row-gap: 5px;
        position: relative;
        padding: 25px 0;
    
    }
    
    
    .overlay{
        position: absolute;
        left: 0;
        top: 0;
        height: 90%;
        width: 100%;
        /* background-color: rgb(54, 54, 208); */
        border-radius: 25px 25px 0 25px;
    }
    
    .overlay::before, .overlay::after{
        content: '';
        position: absolute;
        right: 0;
        bottom: -40px;
        height: 40px;
        width: 40px;
        /* background-color: rgb(54, 54, 208); */
    }
    
    .overlay::after{
        border-radius: 0 25px 0 0;
        /* background-color: rgb(220, 220, 20); */
    }



    .card-image{
        position: relative;
        height: 200px;
        width: 200px;
        
        border-radius: 50%;
        /* background: white; */
        padding: 3px;
    }
    .card-image .card-img{
        height: 100%;
        width: 100%;
        object-fit: cover;
        border-radius: 50%;
        /* border: 4px solid white; */
    }
    
    .name{
        font-size: 18px;
        font-weight: 500;
        /* color: black; */
  
    }
    
    
    .description{
        font-size: 28px;
        /* color: rgb(54, 54, 208); */
        text-align: center;
    }
    
    
    .button{
        border: none;
        font-size: 16px;
        /* color: black; */
        padding: 8px 16px;
        /* background-color: rgb(54, 54, 208); */
        border-radius: 6px;
        margin: 14px;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    /* .button:hover{
        background: wheat;
    } */

    .jefcon-team .videocontentbutton a{
        text-decoration: none;
        display: inline-block;
        color: white;


        background-color: rgb(56, 56, 230);

        font-size: 15px;
        border: 1px solid rgb(56, 56, 230);
        padding: 14px 30px;
        border-radius: 15px;
        margin-top: -1000px;
        margin-left: 100px;
        margin-bottom: 100px;
    }


    .jefcon-team .videocontentbutton a:hover{
        border: 1px solid rgb(56, 56, 230);
        background: transparent;
        transition: 1s;
        color: black;
        }  
    
    
    
    
    /* --------------------header----------------- */
    
    
    
    
    
    .headerimagee img{
        height: 10vh;
       
    
    }
    
    
    ul{
        list-style: none;
    
    
    }
    
    
    header{
        background-color: rgb(56, 56, 230);
        padding: 2rem 0;
      
    
    
    
    }
    
    nav{
        max-width: 1100px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        
    }
    
    
    .menu > li, .menu > a{
        display: inline-block;
    
        
        
    
    }
    .menu li{
        position: relative;
        
    
     
        
        
    }
    
    .menu a{
        text-decoration: none;
        color: white;
        display: block;
        padding: 10px;
     
        transition: background-color .22s ease, color .22s ease;
        
    
    
    }
    
    .menu a:hover{
        background-color: rgb(34, 174, 34);
        color: white;
    }
    
    .logo{
        font-size: 21px;
        color: white;
        font-weight: 500;
    }
    
    .submenu{
        position: absolute;
        background-color: rgb(56, 56, 230);
        width: 140px;
    
        display: none;
    }
    
    
    .menu li:hover > .submenu{
        display: block;
    }
}
































































































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


    .extra-colorzz{
        background-color: white;
        height: 4vh;

    }


    /* ----------Hero---------- */
    #hero{
        /* background-image: url(images/lionel-messi-sport-footballers-wallpaper-5450a0bae1d6b8ca376c0ee9bfeaed9b.jpg); */
        /* background-image: url(images/soccer-lionel-messi-argentinian-wallpaper-3060d5b96f06ee23f8df87c65be66498.jpg); */
        /* background-image: url(images/lionel-messi-fcb-barcelona-fc-barcelona-wallpaper-preview.jpg); */
        /* background-image: url(images/lionel-messi-soccer-football-wallpaper-preview.jpg); */
        /* background-image: url(images/football-club-form-player-wallpaper-preview.jpg); */
        /* background-image: url(images/soccer-paulo-dybala-argentinian-juventus-f-c-wallpaper-preview.jpg); */
        /* background-image: url(images/football-the-best-players-2016-soccer-lionel-messi-wallpaper-8816bdf880a04c08007c212ea8f2e49a.jpg); */
        /* background-image: url(websiteimages/gal1/SPORT\ COMPLEX.jpg); */
        /* background-image: url(images/action-art-artistic-athletic-d9ac803715075f22cde03edf1bff49bb.jpg); */
        /* background-image: url(images/soccer-kylian-mbappe-french-world-cup-2018-wallpaper-f8268caa6facb7992eb0c982f2590be0.jpg); */
        /* background-image: url(images/64a5c3ac757e775eef042fc7_withmeta.jpg); */
        /* background-image: url(images/depositphotos_165317552-stock-photo-cheerful-delivery-man-happy-young.jpg); */
        /* background-image: url(images/landingimage.jpeg); */
        /* background-image: url(images/m.jpeg), linear-gradient(rgba(4,9,30,0.75),rgba(26, 29, 42, 0.55)); */
        background-image: linear-gradient(rgba(4,9,30,0.85),rgba(26, 29, 42, 0.75)),url(websiteimages/gal1/SPORT\ COMPLEX.jpg);

    
    

        height: 90vh;
        width: 100%;
        background-size: cover;
        background-position: top 25% left 1px;
        /* padding: 0 80px; */
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;
        /* background-color: linear-gradient(to bottom, rgba(167, 31, 31, 0.5),rgb(56, 3, 3)); */
    }

    #hero h4{
        padding-bottom: 15px;
        margin-left: 125px;
        color: white;
        font-size: 50px;
        margin-top: -50px;
        text-align: center;
        font-weight: 600;
    }



    #hero h4 span{
        /* padding-bottom: 15px;
        margin-left: 100px; */
        color: rgb(56, 56, 230);
        font-size: 50px;
        /* margin-top: -100px;
        text-align: center; */
    }
    #hero h1{
        color: purple;
        margin-left: 200px;
    }

    #hero h2{
        color: white;
        margin-left: 75px;
        text-align: center;
        font-size: 22px;
        font-weight: 100;
        width: 80%;
        margin-top: 50px;
    }

    #hero p{
        /* color: black; */
        margin-left: 600px;
    }
    #hero button{
        background-image: url(images/skull-graffiti-background-skull-graffiti-wallpaper-skull-graffiti-pattern-graffiti-background-graffiti-art-graffiti-wallpaper-ai-generative-photo.jpg);
        /* background-image: url(images/images.jpeg); */
        background-color: transparent;
        color: white;
        font-size: 30px;
        font-weight: 700;
        border-radius: 10px;
        border: 0;
        padding: 14px 80px 14px 65px;
        background-repeat: no-repeat;
        cursor: pointer;

    }



    #hero a{
        text-decoration: none;
        display: inline-block;
        color: white;
    
        background-color: rgb(56, 56, 230);
    
        font-size: 24px;
        border: 3px solid rgb(56, 56, 230);

        padding: 24px 30px;
        border-radius: 15px;
        margin-left: 265px;

        margin-top: 20px;
    }

    #hero a:hover{
        border: 1px solid rgb(56, 56, 230);
        background: rgb(64, 62, 62);
        transition: 1s;
        color: white;
    }



/* ----------------------------Trust Bar------------------------- */
.trustafter-about-us{
    width: 100%;
    /* margin-left: 600px; */
    margin-top: 250px;
}



.trustafter-about-us .office-image{
    height: 25vh;
    /* background-image: url(websiteimages/gal1/grey1.jpg); */
    background-size: cover;
    margin-top: -150px;
    width: 100%;
    /* margin-left: 600px; */
}


.trustafter-about-us .office-image h1{
    /* color: rgb(86, 86, 86); */
    color: rgb(73, 70, 70);
    /* text-align: left; */
    font-size: 20px;
    font-weight: 600;
    margin-left: 50px;
    font-style: italic;
}

.trustafter-about-us .office-image h2{
    /* color: rgb(86, 86, 86); */
    color: rgb(73, 70, 70);
    /* text-align: left; */
    font-size: 20px;
    font-weight: 600;
    margin-left: 500px;
    font-style: italic;
    margin-top: -50px;
}

.trustafter-about-us .office-image h3{
    /* color: rgb(86, 86, 86); */
    color: rgb(73, 70, 70);
    /* text-align: left; */
    font-size: 20px;
    font-weight: 600;
    margin-left: 50px;
    font-style: italic;
}

.trustafter-about-us .office-image h4{
    /* color: rgb(86, 86, 86); */
    color: rgb(73, 70, 70);
    /* text-align: left; */
    font-size: 20px;
    font-weight: 600;
    margin-left: 500px;
    font-style: italic;
    margin-top: -30px;
}
.trustafter-about-us .office-image h5{
    /* color: rgb(86, 86, 86); */
    color: rgb(73, 70, 70);
    /* text-align: left; */
    font-size: 20px;
    font-weight: 600;
    margin-left: 50px;
    font-style: italic;
}

    /* ------------------------------------------------------ORIENTATION------------------------------------- */


    .orientation {
        background-image: url(websiteimages/oientation.JPG);
        background-size: cover;
       
        height: 10%;
       
    }
    .orientation h3{
        font-size: 26px;
        font-weight: 200;
        color: rgb(77, 73, 134);
        margin-top: 5px;
        text-align: center;

    }



    .orientation h2{
        font-size: 16px;
        font-weight: 100;
        color: black;
        margin-top: 10px;
        text-align: center;

    }


    .orientation h2 span{
        font-size: 16px;
        font-weight: 100;
        color: rgb(56, 56, 230);
        margin-top: 10px;
        text-align: center;

    }

    .orientation p{
        font-size: 16px;
        font-weight: 20;
        color: black;
        margin-top: 10px;
        text-align: center;

    }
    
    /* ----------- ABOUT US------------------------------------------------------------------------------------------------ */

    /* #about-us{
        background-color: white;
    } */
    .about-us h3{
        width: 90%;
        font-size: 25px;
        font-weight: 600 ;
        color: rgb(4, 3, 3);
        padding: 10px;
        margin-top: 920px;
        /* margin-bottom: 30px; */
        text-align: left;
        /* border-bottom: 3px solid rgb(4, 3, 3); */
        /* border-bottom: 3px solid rgb(54, 54, 208); */
        /* margin-left: 20px; */

    }



    .about-us h3 span{
        width: 90%;
        font-size: 25px;
        font-weight: 600 ;
        color: rgb(54, 54, 208);
        padding: 10px;
        /* margin-top: 100px; */
        /* margin-bottom: 30px; */
        /* border-bottom: 3px solid rgb(54, 54, 208); */
        text-align: center;


    }



    .about-us{
        /* background-image: url(websiteimages/gal1/eg.png); */
        background-size: cover;
        /* background-image: linear-gradient(rgba(4,9,30,0.25),rgba(4,9,30,0.25 )),url(websiteimages/gal1/eliteg.png); */

        height: 100vh;

    }

    .yr12-pic {
        min-height: 15vh;
    
        width: 10%;
        background-image: url(websiteimages/12yrs.png);
    
        background-position: center;
        background-size: cover;
        position: relative;

        margin-left: 44%;
        
        

    }


    .about-us h4{
        width: 80%;
        margin: auto;
        text-align: center;
        font-size: 26px;
        font-weight: 500 ;
        color: whitesmoke;
    
        padding: 10px;
        padding-top: 25px;
        margin-left: 100px;
    }

    .yrs h4{
        width: 80%;
        margin: auto;
        text-align: center;
        font-size: 26px;
        font-weight: 500 ;
        color: whitesmoke;
    
        padding: 10px;
        margin-top: -50px;
        margin-left: 220px;
    }



    .of-services h4{
        width: 80%;
        margin: auto;
    
        font-size: 26px;
        font-weight: 500 ;
        color: whitesmoke;
    
        padding: 10px;
    
        margin-left: 220px;

    }

    .about-us p{
        width: 90%;
        margin: auto;
    
        padding-top: 50px;
        font-size: 16px;
        font-weight: 300 ;
        color: rgb(63, 61, 61);
    
        padding: 10px;
        margin-left: 16px;
        margin-top: 20px;
    }




    .about-us p span{
        width: 90%;
        margin: auto;
    
        padding-top: 50px;
        font-size: 24px;
        font-weight: 300 ;
        color: rgb(63, 61, 61);
    
        padding: 10px;

    }

    .about-us .office-image{
        height: 50vh;
        background-image: url(websiteimages/gal1/pngtree.jpg);
        background-size: cover;
        margin-top: -1060px;
        width: 100%;
        margin-left: 1px;

    }

    .after-about-us .office-image{
        height: 25vh;
        background-image: url(websiteimages/gal1/blue3.jpg);
        background-size: cover;
        margin-top: -550px;
        width: 100%;
        /* margin-left: 600px; */
    }


    .after-about-us .office-image h1{
        color: white;
        /* text-align: left; */
        font-size: 19px;
        font-weight: 200;
        margin-left: 50px;
        margin-top: 50px;
    }

    .after-about-us .office-image h2{
        color: white;
        /* text-align: left; */
        font-size: 19px;
        font-weight: 200;
        margin-left: 50px;
        margin-top: 10px;
    }



    .after-about-us .videocontentbutton a{
        text-decoration: none;
        display: inline-block;
        color: white;


        background-color: transparent;

        font-size: 15px;
        border: 3px solid white;
        padding: 17px 50px;
        /* border-radius: 50px; */
        margin-top: -70px;
        margin-left: 500px;
        /* margin-bottom: 100px; */
    }


    .after-about-us .videocontentbutton a:hover{
        border: 1px solid rgb(56, 56, 230);
        background: rgb(56, 56, 230);
        transition: 1s;
        color: white;
    }

    
/* ------------------------------------------------our services----------------------------------------- */

    #our-services{
        /* max-width: 1240px; */
        max-width: 100%;
        margin: 0 auto;
        padding: 5%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: white;
        /* background: linear-gradient(to bottom, rgba(236, 210, 80, 0.5),rgb(186, 142, 22)); */
        margin-top: 200px;
        /* background-image: url(websiteimages/gal1/grey4.jpg); */

        



    }


    .ourservicesword{
        
        width: 60%;
        justify-content: space-around;
        margin-left: -150px;
        margin-top: 400px;

    

    }

    .ourservicesword h1{
        font-size: 25px;
        color: rgb(84, 80, 80);
        margin-top: -500px;
        font-weight: 200;
    }




    .ourservicesword h1 span{
        font-size: 25px;
        color: rgb(56, 56, 230);
        margin-top: 150px;
        font-weight: 600;
    }


    .ourservicesword p{
        font-size: 16px;
        color: rgb(49, 45, 45);

    }





    .ourservicesword p span{
        font-size: 20px;
        color: rgb(56, 56, 230);
        font-weight: 400;
    }





    .ourservicewrapper{
            
        width: 100%;
        justify-content: space-around;
        margin-top: -100px;
        margin-left: -160px;
        
    }

    .serviceaaaa{
        margin-left: 210px;
        margin-top: -190px;
    }
    .serviceaaaa P{
        color: rgb(93, 90, 90);
        font-size: 14px;
    }
    .serviceaaaa h1{
        color: rgb(56, 56, 230);
    }
    .try{
        width: 10%;
        margin-top: -850px;
        font-size: 20px;
        margin-left: 100px;
    }

    .try h1{
        color: rgb(56, 56, 230);

    }
    .try h1 span{
        color: rgb(4, 3, 3);
        border-bottom: 3px solid rgb(4, 3, 3);
    }

    .ourservicecard{
        width: 320px;
        height: 240px;
        padding: 2rem 1rem;
        background: #fff;
        position: relative;
        display: inline-block;
        align-items: flex-end;
        box-shadow: 0px 7px 10px rgba(0,0,0,0.5);
        transition: 0.5s ease-in-out;
    
        margin-top: 40px;
        margin-left: 10px;

    
    }


    /* .ourservicecard:hover{
        transform: translateY(20px);
    } */

    .ourservicecard:before{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5),rgb(193, 193, 193));
        z-index: 2;
        transition: 0.5s all;
        opacity: 0;
    }


    .ourservicecard:hover:before{
        opacity: 1;
    }




    .ourservicecard img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;

    }



    /* .ourservicecard .ourserviceinfo{
        position: relative;
        z-index: 3;
        color: black;
        opacity: 0;
        transform: translateY(30px);
        transform: 0.5s all;
    
    }


    .ourservicecard:hover .ourserviceinfo{
        opacity: 1;
        transform: translateY(0px);
    } */


    .ourservicecard .ourserviceinfo h1{
        margin: 0;
        color: rgb(4, 4, 4);
        font-size: 14px;
        text-align: center;
    }

    .ourservicecard .ourserviceinfo p{
        
        font-size: 12px;
        margin-top: 25px;
        margin-bottom: 20px;
        width: 90%;
    }


    #our-services .videocontentbutton a{
        text-decoration: none;
        display: inline-block;
        color: white;


        background-color: rgb(56, 56, 230);

        font-size: 15px;
        border: 1px solid rgb(56, 56, 230);
        padding: 7px 40px;
        border-radius: 15px;
        margin-top: 50px;
        margin-left: 250px;
        /* margin-bottom: 100px; */
    }


    #our-services .videocontentbutton a:hover{
        border: 1px solid rgb(56, 56, 230);
        background: transparent;
        transition: 1s;
        color: black;
    }

/* ------------------------------------------------------------------------- */
   
    .headerz{
        min-height: 23vh;
        width: 100%;
        background-image: url(websiteimages/IMG_8513.JPG);
        background-position: center;
        background-size: cover;
        position: relative;
    
    }
    
 
/* ---------------------------VISION N BRIEF------------------------------ */
    .visionnbrief .see-all-articles-btn{
        display: inline-block;
        text-decoration: none;
        color: black;
    
    
        border: 1px solid blue;
        padding: 12px 34px;
        font-size: 13px;
        
        background: transparent;
        position: relative;
        cursor: pointer;
        /* border-radius: 15px; */
        margin-top: 340px;
        margin-left: -100px;
    
    
    }
    
    
    .see-all-articles-btn:hover{
        border: 1px solid wheat;
        background: rgb(51, 95, 184);
        font-size: 20px;
        transition: 1s;
    }


    #vnb {
        background-color: white;
        /* background-image: url(websiteimages/gal1/142195-blue-and-white-simple-background.jpg); */
        background-size: cover;
        margin-top: 420px;



    }

    .visionnbrief{
        width: 80%;
        margin: auto;
        text-align: center;
        padding-top: 50px;
        font-size: 15px;
        color: black;
        padding: 10px;
        padding-bottom: 150px;
        margin-top: -450px;
        background-color: white;
    }


    .vision-brief .vision{
        /* margin-top: 1%; */
        /* display: flex; */
        /* width: 100%; */
        background: white;
        /* background-image: url(websiteimages/gal1/d.jpg); */
        /* background-size: cover; */
        height: 67vh;
        width: 100px;
        /* background-image: linear-gradient(rgba(46, 49, 59, 0.7),rgba(54, 57, 71, 0.7)),url(websiteimages/74717cc8-306b-44a1-8bbc-13daab4b73cd.JPG); */
        /* background-image: linear-gradient(rgba(220, 235, 11, 0.25),rgb(218, 216, 1110)),url(websiteimages/74717cc8-306b-44a1-8bbc-13daab4b73cd.JPG); */
        margin-top: 100px;
        margin-left: 20px;
        display: flex;
        width: 100%;
        background-size: cover;
    
        display: inline-block;
        flex-basis: 31%;
        border-radius: 10px;
        margin-bottom: 305px;
        padding: 20px 12px;
        box-sizing: border-box;
        transition: 0.5s;

    }



    .vision h3{
        text-align: center;

        font-size: 60px;
        font-weight: 600;
        margin: 10px 0;
        color: grey;
        margin-top: 100px;
    }



    .vision-brief P{
        text-align: left;
        font-size: 18px;
        margin: 10px 0;
        color: rgb(119, 117, 117);
        margin-left: 10px;
        margin-top:  -300px;
        /* margin-bottom: -300px; */

        width: 100%;
    }


    .vision-brief P span{
        font-size: 46px;
        color: rgb(54, 54, 208);
        /* margin-top:  -400px; */
    }

/* .vision:hover{
    box-shadow: 0 0 20px 0px black;
} */



/* ------------------------------HEALTH AND SAFETY ENVIRONS---------------------- */

    .safety{
        /* background-image: url(websiteimages/30883695-715b-4ff8-887e-fb056677490b.JPG); */
     
        height: 15%;
        background-size: cover;
        /* background-image: linear-gradient(rgba(238, 240, 245, 0.3),rgba(238, 240, 245, 0.3)),url(websiteimages/30883695-715b-4ff8-887e-fb056677490b.JPG); */
        margin-top: -100PX;
    }

    .healthandsafety h4{
        width: 30%;
        margin: auto;
        padding-top: 50px;
        font-size: 27px;
        font-weight: 600 ;
        color: rgb(220, 220, 20);
        margin-left: 230px;
        padding: 10px;
    }

    .healthandsafety h4 span{
        width: 30%;
        margin: auto;
        padding-top: 50px;
        font-size: 27px;
        font-weight: 600 ;
        color:rgb(220, 220, 20);   
        padding: 10px;
    }

    .safety h4{
        color: white;
    }

    .health-safety-pic p{
        width: 100%;
        font-size: 28px;
        font-weight: 600 ;
        color: whitesmoke;

        
    }

    .health-safety-pic{
    
        width: 70%;
    
        /* background-image: url(websiteimages/rgb(56, 56, 230).WEBP); */
        background-position: center;
        background-size: cover;
        position: relative;
        margin-left: 90px;
        margin-top: 80px;
        border-radius: 10px;
        /* background-image: linear-gradient(rgba(4, 4, 4, 0.855),rgba(7, 81, 7, 0.3)),url(websiteimages/rgb(56, 56, 230).WEBP); */

    }

    .health-safety-pic:hover{
        box-shadow: 0 0 20px 0px rgb(119, 116, 116);
       
    }

    
    /* --------------------------RECENT JOBS------------------------------------ */
    /* ------------------------------------------------our services----------------------------------------- */
    #jobour-services .videocontentbutton a{
        text-decoration: none;
        display: inline-block;
        color: rgb(4, 4, 4);


        background-color: white;

        font-size: 15px;
        border: 1px solid rgb(56, 56, 230);
        padding: 7px 40px;
        /* border-radius: 50px; */
        margin-top: 50px;
        margin-left: 510px;
        /* margin-bottom: 100px; */
    }


    #jobour-services .videocontentbutton a:hover{
        border: 1px solid rgb(56, 56, 230);
        background: rgb(56, 56, 230);
        transition: 1s;
        color: white;
        }


    /* .videocontent{

        text-align: center;
        margin-top: -50px;


    } */
    #jobour-services{
        /* max-width: 1240px; */
        max-width: 100%;
        margin: 0 auto;
        padding: 5%;
        display: flex;
        justify-content: center;
        align-items: center;

        /* margin-top: -120px; */
        /* background-image: url(websiteimages/gal1/grey4.jpg); */
        /* background-color: red; */

        



    }


    .jobourservicesword{
        
        width: 60%;
        justify-content: space-around;
        margin-left: -150px;
        margin-top: 400px;

    

    }

    .ourservicesword h1{
        font-size: 25px;
        color: rgb(84, 80, 80);
        margin-top: -500px;
        font-weight: 200;
    }




    .ourservicesword h1 span{
        font-size: 25px;
        color: rgb(56, 56, 230);
        margin-top: 150px;
        font-weight: 600;
    }


    .ourservicesword p{
        font-size: 16px;
        color: rgb(49, 45, 45);

    }





    .ourservicesword p span{
        font-size: 20px;
        color: rgb(56, 56, 230);
        font-weight: 400;
    }





    .jobourservicewrapper{
            
        width: 100%;
        justify-content: space-around;
        margin-top: 90px;
        margin-left: -630px;
        
    }

    .serviceaaaa{
        margin-left: 210px;
        margin-top: -190px;
    }
    .serviceaaaa P{
        color: rgb(93, 90, 90);
        font-size: 14px;
    }
    .serviceaaaa h1{
        color: rgb(56, 56, 230);
    }
    .jobtry{
        width: 90%;
        margin-top: -1350px;
        font-size: 20px;
        margin-left: 150px;
    }

    .jobtry h1{
        color: rgb(56, 56, 230);

    }
    .jobtry h1 span{
        color: rgb(4, 3, 3);
        /* border-bottom: 3px solid rgb(4, 3, 3); */
    }

    .jobourservicecard{
        width: 640px;
        height: 370px;
        padding: 2rem 1rem;
        background: #fff;
        position: relative;
        display: inline-block;
        align-items: flex-end;
        box-shadow: 0px 7px 10px rgba(0,0,0,0.5);
        transition: 0.5s ease-in-out;
    
        margin-top: 40px;
        margin-left: -50px;

    
    }


    /* .jobourservicecard:hover{
        transform: translateY(20px);
    } */

    .jobourservicecard:before{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5),rgb(193, 193, 193));
        z-index: 2;
        transition: 0.5s all;
        opacity: 0;
    }


    .jobourservicecard:hover:before{
        opacity: 1;
    }




    .jobourservicecard img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;

    }



    .jobourservicecard .ourserviceinfo{
        position: relative;
        z-index: 3;
        color: black;
        opacity: 0;
        transform: translateY(30px);
        transform: 0.5s all;
    
    }


    .jobourservicecard:hover .ourserviceinfo{
        opacity: 1;
        transform: translateY(0px);
    }


    .jobourservicecard .ourserviceinfo h1{
        margin: 0;
        color: rgb(4, 4, 4);
        /* color: rgb(34, 34, 189); */
        font-size: 19px;
        text-align: left;
    }



    .jobourservicecard .ourserviceinfo h1 span{
        margin: 0;
        /* color: rgb(4, 4, 4); */
        color: rgb(34, 34, 189);
        font-size: 25px;
        text-align: left;
    }





    .jobourservicecard .ourserviceinfo p{
        
        font-size: 12px;
        margin-top: 25px;
        margin-bottom: 20px;
        width: 90%;
    }




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


        /* background-color: red; */

        font-size: 16px;
        border: 1px solid rgb(56, 56, 230);
        padding: 12px 46px;
        border-radius: 15px;
        margin-top: 20px;
        /* margin-left: 510px; */
        /* margin-bottom: 100px; */
    }


    .jobourservicecard .minivideocontentbutton a:hover{
        border: 1px solid rgb(56, 56, 230);
        background: rgb(56, 56, 230);
        transition: 1s;
        color: white;
    }









    .jobourservicewrapper .seevideocontentbutton a{
        text-decoration: none;
        display: inline-block;
        color: white;


        background-color: rgb(56, 56, 230);

        font-size: 15px;
        border: 1px solid rgb(56, 56, 230);
        padding: 16px 30px;
        border-radius: 15px;
        margin-top: 50px;
        margin-left: 150px;

    }


    .jobourservicewrapper .seevideocontentbutton a:hover{
        border: 1px solid rgb(56, 56, 230);
        background: transparent;
        transition: 1s;
        color: black;
    }

    /* ---------------------------------TOP CLIENTS------------------------------------ */
    .thisimages{
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 400px;
        background-color: white;
    }
    
    
    
    .thisimages div{
        height: 350px;
        width: 200px;
        margin: 60px;
    }
    
    
    
    .clients h3{
    
        width: 22%;
        margin: auto;
        padding-top: 50px;
        font-size: 25px;
        font-weight: 600 ;
        color: rgb(54, 54, 208);
        margin-left: 20px;
        
        padding: 10px;
        /* border-bottom:3px solid rgb(220, 220, 20); */
    }
    
    .clients h3 span{
    
        width: 32%;
        margin: auto;
        padding-top: 50px;
        font-size: 25px;
        font-weight: 600 ;
        color: rgb(54, 54, 208);
        
        padding: 10px;
        margin-top: 350px;
        border-bottom: 3px rgb(220, 220, 20);
    
    }
    
    
    
    .clients p{
    
        width: 80%;
        margin: auto;
        text-align: center;
        padding-top: 50px;
        font-size: 24px;
        font-weight: 60 ;
        color: grey;
        
        padding: 10px;
    }
    
    
    .delta-govt h2{
        color: darkgrey;
        text-align: center;
        margin-left: -60%;
    
    }
    
    
    .dtsg-pic{
        height: 10%;
      
        width: 25%;
        background-image: url(websiteimages/deltalogo.png);
        background-position: center;
        background-size: cover;
        position: relative;
        margin-top: 5%;
        margin-left: 5%;
    
        
        
    
    }
    .total-pic{
      
        height: 10%;
        width: 45%;
        background-image: url(websiteimages/total.PNG);
        background-position: center;
        background-size: cover;
        position: relative;
        margin-top: 5%;
        margin-left: 45%;    
    
    }
    
    .total p{
    
        width: 80%;
        margin: auto;
        text-align: center;
        padding-top: 50px;
        font-size: 24px;
        font-weight: 60 ;
        color: grey;
        padding: 10px;
    }
    
    .initiatesplc-pic{
       
        height: 10%;
        width: 90%;
        background-image: url(websiteimages/the-initiates.PNG);
        background-position: center;
        background-size: cover;
        position: relative;
        margin-top: 5%;
        margin-left:5%;    
    
    }
    
    .initiatesplc p{
    
        width: 80%;
        margin: auto;
        text-align: center;
        padding-top: 50px;
        font-size: 24px;
        font-weight: 60 ;
        color: grey;
        padding: 10px;
    }
    




    /* -----------------------------------------------------------------------OFFICE IMAGE-------------------------------------------------- */
    .office-image{
        height: 90vh;
        background-image: url(websiteimages/16e761bc-2964-4244-882c-0a801bd31c5b.JPG);
        background-size: cover;
        margin-top: 40px;
    }
    /* ------------------------------------------BLOG AND LATEST NEWS----------------------------- */



    .recent-blog-header h3{
      

        
        font-size: 35px;
        font-weight: 600 ;
        color: rgb(56, 56, 230);
        
        padding: 10px;
        margin-top: 10px;


    }

    .recent-blog-header h3 span{


        font-size: 35px;
        font-weight: 600 ;
        color: black;
        
        padding: 10px;
        margin-top: 10px;



    }


    .recent-blog-header p{


        font-size: 15px;

        color: black;
        
        padding: 10px;
        margin-top: 10px;


    }



    .a {
        max-width: 1200px;
        width: 70%;
        max-height: 20px;
        padding-bottom: 350px;
       
        
       

    }


    .b{
        position: relative;

    }
    .b .slide-button{
        position: absolute;
        top: 50%;
        height: 50px;
        width: 50px;
        color: wheat;
        border: none;
        outline: none;
        background: rgb(56, 56, 230);
        font-size: 2.2rem;
        cursor: pointer;
        border-radius: 50%;
        transform: translateY(-50%);
    }


    .b .slide-button:hover{
        background: black;
        color: rgb(56, 56, 230);
    }
    .b .slide-button#prev-slide{
        left: -20px;
        display: none;

    }    
    .b .slide-button#next-slide{
        right: -20px;

    }










    .d{
        width: 250px;
        background-color: white;
        border: 1px solid rgb(56, 56, 230);





    }


    .f{
        background-color: white;
        
        font-size: 12px;

        height: 20vh;
        padding-top: 20px;

    }

    .f span{
        background-color: rgb(78, 175, 78);
        font-size: 20px;
        color: whitesmoke;
        border-radius: 5px;
    }
    .f p{

        color: grey;


    }
    .f .g{
        color: black;
        font-size: 14px;

    }

    .e{
        width: 100%;
        height: auto;

    }

    .e img{

        max-height: 20vh;
        width: 245px;
    }


    .b .c{
        display: grid;
        gap: 18px;

        overflow-x: auto;

        grid-template-columns: repeat(10,1fr);

    }

    .b .c::-webkit-scrollbar  {
        display: none;
    }



    .a .slider-scrollbar{
        height: 24px;
        width: 100%;

        display: flex;
        align-items: center;
    }

    .slider-scrollbar .scrollbar-track{
        height: 2px;
        width: 100%;
        background: black;
        position: relative;
        border-radius: 4px;
    }

    .slider-scrollbar:hover .scrollbar-track{
        height: 4px;
    }

    .slider-scrollbar .scrollbar-thumb{
        position: absolute;
        height: 100%;
        width: 50%;
        background: rgb(56, 56, 230)yellow;
        border-radius: inherit;
        cursor: grab;
    }
    .slider-scrollbar .scrollbar-thumb:active{
        cursor: grabbing;
        height: 8px;
        top: -2px;
    }
    .slider-scrollbar .scrollbar-thumb::after{
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -10px;
        bottom: -10px;
    }

    
    /* -------------------CONTACT US PAGE------------------------------------------------------------ */




    #contact-details{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }


    #contact-details .details{
        width: 40%;
    }
    #contact-details .details span,
    #form-details form span{
        font-size: 12px;
    }

    #contact-details .details h2,
    #form-details form h2{
        font-size: 26px;
        line-height: 35px;
        padding: 20px 0;
    }

    #contact-details .details h3{
        font-size: 16px;
        padding-bottom: 15px;

    }

    #contact-details .details li{
        list-style: none;
        display: flex;
        padding: 10px 0;
    }


    #contact-details .details li i{
        font-size: 24px;
        padding-right: 22px;
    }

    #contact-details .details li p{
        margin: 0;
        font-size: 14px;
    }

    #contact-details .map{
        width: 100%;
        height: 45vh;
    }

    #contact-details .map iframe{
        width: 100%;
        height: 100%;
    }



    #form-details{
        display: flex;
        justify-content: space-between;
        padding: 80px;
        margin: 30px;
        border: 1px solid wheat;

    }


    #form-details form{
        width: 65%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }


    #form-details form input,
    #form-details form textarea{
        width: 100%;
        padding: 12px 15px;
        outline: none;
        margin-bottom: 20px;
        border: 1px solid pink;
    }


    #form-details form button{
        background-color: pink;
        color: black;
        height: 7vh;
    }


    #form-details .people div{
        display: flex;
        align-items: flex-start;
        padding-bottom: 25px;
        padding-top: 25px;
    }


    #form-details .people div img{
        width: 65px;
        height: 65px;
        object-fit: cover;
        margin-right: 15px;
    }

    #form-details .people div p{
        margin: 0;
        font-size: 13px;
        line-height: 25px;
    }
    #form-details .people div p span{
        display: block;
        font-size: 16px;
        font-weight: 600;
        color: black;
    }



    /* --------------------------contct us------------------------------------------------------- */


    .contactus_headerz{
        min-height: 32vh;
        width: 100%;
        background-image: url(websiteimages/gal1/SPORT\ COMPLEX.jpg);
        background-position: center;
        background-size: cover;
        position: relative;
        background-image: linear-gradient(rgba(156, 170, 143, 0.7),rgba(29, 30, 29, 0.7)),url(websiteimages/gal1/SPORT\ COMPLEX.jpg);
    
    }

    .contactus-orientation {
        background-image: url(websiteimages/gal1/whitebck.jpg);
        background-size: cover;
     
        height: 10%;
    
    }
    .contactus-orientation h3{
        font-size: 21px;
        font-weight: 200;
        color: rgb(77, 73, 134);
    
        text-align: center;

    


    }



    .contactus-orientation h2{
        font-size: 16px;
        font-weight: 100;
        color: black;
        margin-top: 20px;
        text-align: center;

    }


    .contactus-orientation p{
        font-size: 16px;
        font-weight: 20;
        color: black;
        margin-top: 10px;
        text-align: center;

    }


    .contactus-orientation p span{
        font-size: 36px;
        font-weight: 20;
        color: rgb(56, 56, 230);
        margin-top: 10px;
        text-align: center;

    }



    /* -----------------------------------------------------CONTACT US------------------------------------------------------ */








    .contact{
        padding: 40px 15%;
        background: whitesmoke;
        height: 200vh;
        height: 10%;
        width: 100%;
       
        display: grid;
        grid-template-columns: repeat(2,2fr);
        align-items: center;
        grid-gap: 6rem;
        margin-top: -150px;
        margin-bottom: -300px;
    
    }

    .contact-form h1{
        font-size: 42px;
        color: rgb(56, 56, 230);
        margin-bottom: 30px;
        margin-top: -250px;



        
    }
    span{
        color: #4F7942;
    }

    .contact-pic{
        min-height: 20vh;
        width: 100%;
        background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7 )),url(websiteimages/contact.png);
        background-position: center;
        background-size: cover;
        position: relative;

        margin-bottom: 50px;

    }
    .contact-form p{
        color: rgb(14, 15, 14);
        letter-spacing: 1px;
        line-height: 26px;
        font-size: 1.1rem;
        margin-bottom: 3.8rem;

        font-size: 18px;

    }

    .contact-form form{
        position: relative;
    }


    .contact-form form input, form textarea{
        width: 600px;
        padding: 17px;
        border: none;
        outline: none;
        background: white;
        color: black;
        font-size: 1.1rem;
        margin-bottom: 0.7rem;
        border-radius: 10p;
     

    }


    .contact-form textarea{
        resize: none;
        height: 150px;
    }

    .contact-form form .btn{
        display: inline-block;
        background: rgb(56, 56, 230);
        font-size: 1.1rem;
        letter-spacing: 1px;
        text-transform: uppercase;
        font-weight: 600;
        border: 2px solid transparent;
        border-radius: 10px;
        width: 150px;
        transition: ease .20s;
        cursor: pointer;
        margin-left: 110px;

        
    }

    .contact-form form .btn:hover{
        border: 2px solid yellowrgb(56, 56, 230);
        background: transparent;
        background: white;
        transform: scale(1.1);
    } 

/* ------------------------------------------FOOOTER----------------------------------------- */


    .container{
    max-width: 1170px;
    height: 300px;
    /* background-color :rgb(54, 54, 208); */
    margin: auto;

    }

    .footerrow{
    display: flex;
    flex-wrap: wrap;
    }

    ul{
    list-style: none;


    }

    .footer{
    /* background-color: rgb(54, 54, 208); */
    /* color: rgb(220, 220, 20); */
    padding: 70px 0;

    }

    .footer-col{
    width: 25%;
    padding: 0 25px;
    }

    .footer-col h4{
    font-size: 28px;
    /* color: rgb(220, 220, 20); */
    text-transform: capitalize;
    margin-bottom: 30px;
    position: relative;

    }



    .footer-col ul li:not(:last-child){
    margin-bottom: 40px;


    }

    .footer-col ul li:last-child{
    margin-bottom: -40px;


    }

    .footer-col ul li a{
    font-size: 14px;
    text-transform: capitalize;
    text-decoration: none;
    /* color: rgb(220, 220, 20); */
    font-weight: 300;
    display: block;
    transition: all 0.3s ease;

    }

    .footer-col ul li a:hover{
    /* color: black; */
    padding-left: 10px;
    font-size: 15px;
    }


    /* .social-links a{
    color: rgb(220, 220, 20);
    } */


    .copyright {
    margin-bottom: 100px;

    }
    /* .copyright p{
    color: rgb(220, 220, 20);




    } */

    

/* ------------------------------------------ team------------------------------------ */


    .dedicated-team-header h3{
    

    
        font-size: 22px;
        font-weight: 600 ;
        /* color: rgb(54, 54, 208); */
        padding: 10px;
        margin-top: 100px;
        margin-bottom: 30px;
        border-bottom: none;
    

    }

    .dedicated-team-header h3 span{
      
        font-size: 22px;
        font-weight: 600 ;
        /* color: rgb(54, 54, 208); */
        padding: 10px;
        margin-top: 100px;
        margin-bottom: 30px;
        border-bottom: none;
    


    }

    .jefcon-team{
        /* background-image: url(websiteimages/team3.jpeg); */
        background-size: cover;
        margin-top: -150px;
       
    }


    .slide-content{
        margin: 0 40px;
    
    }
    
    
    .slide-container{
        max-width: 500px;
        width: 100%;
        background-color: white;
        padding: 40px 0;
    
    }



    
    .card{
        width: 320px;
        border-radius: 25px;
        /* background-color: rgb(220, 220, 20); */
        /* border: 1px dashed rgb(8, 58, 8); */

    }


    .image-content, .card-content{
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10px 14px;
    
    }
    
    .image-content{
        row-gap: 5px;
        position: relative;
        padding: 25px 0;
    
    }
    
    
    .overlay{
        position: absolute;
        left: 0;
        top: 0;
        height: 90%;
        width: 100%;
        /* background-color: rgb(54, 54, 208); */
        border-radius: 25px 25px 0 25px;
    }
    
    .overlay::before, .overlay::after{
        content: '';
        position: absolute;
        right: 0;
        bottom: -40px;
        height: 40px;
        width: 40px;
        /* background-color: rgb(54, 54, 208); */
    }
    
    .overlay::after{
        border-radius: 0 25px 0 0;
        /* background-color: rgb(220, 220, 20); */
    }



    .card-image{
        position: relative;
        height: 200px;
        width: 200px;
        
        border-radius: 50%;
        /* background: white; */
        padding: 3px;
    }
    .card-image .card-img{
        height: 100%;
        width: 100%;
        object-fit: cover;
        border-radius: 50%;
        /* border: 4px solid white; */
    }
    
    .name{
        font-size: 18px;
        font-weight: 500;
        /* color: black; */
  
    }
    
    
    .description{
        font-size: 28px;
        /* color: rgb(54, 54, 208); */
        text-align: center;
    }
    
    
    .button{
        border: none;
        font-size: 16px;
        color: black;
        padding: 8px 16px;
        /* background-color: rgb(54, 54, 208); */
        border-radius: 6px;
        margin: 14px;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    /* .button:hover{
        background: wheat;
    } */

    .jefcon-team .videocontentbutton a{
        text-decoration: none;
        display: inline-block;
        color: white;


        background-color: rgb(56, 56, 230);

        font-size: 15px;
        border: 1px solid rgb(56, 56, 230);
        padding: 14px 30px;
        border-radius: 15px;
        margin-top: -1000px;
        margin-left: 300px;
        margin-bottom: 100px;
    }


    .jefcon-team .videocontentbutton a:hover{
        border: 1px solid rgb(56, 56, 230);
        background: transparent;
        transition: 1s;
        color: black;
        }  
    
    
    
    
    /* --------------------header----------------- */
    
    
    
    
    
    .headerimagee img{
        height: 10vh;
       
    
    }
    
    
    ul{
        list-style: none;
    
    
    }
    
    
    header{
        background-color: rgb(56, 56, 230);
        padding: 2rem 0;
      
    
    
    
    }
    
    nav{
        max-width: 1100px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        
    }
    
    
    .menu > li, .menu > a{
        display: inline-block;
    
        
        
    
    }
    .menu li{
        position: relative;
        
    
     
        
        
    }
    
    .menu a{
        text-decoration: none;
        color: white;
        display: block;
        padding: 10px;
     
        transition: background-color .22s ease, color .22s ease;
        
    
    
    }
    
    .menu a:hover{
        background-color: rgb(34, 174, 34);
        color: white;
    }
    
    .logo{
        font-size: 21px;
        color: white;
        font-weight: 500;
    }
    
    .submenu{
        position: absolute;
        background-color: rgb(56, 56, 230);
        width: 140px;
    
        display: none;
    }
    
    
    .menu li:hover > .submenu{
        display: block;
    }
}





















































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


    .extra-colorzz{
        background-color: white;
        height: 4vh;

    }


/* ----------------------------video header------------------------- */

    #videoheader{
        width: 100%;
        height: 100vh;

        position: relative;
        padding: 0 5%;
        display: flex;
        align-items: center;
        justify-content: center;

    

    }

    .videocontent{

        text-align: center;
        margin-top: -100px;


    }

    .videocontent h1{
        font-size: 40px;

        /* color: rgb(24, 41, 24); */
        color: white;
    
    
        font-weight: 600;
    }



    .videocontent p{
        font-size: 20px;

        /* color: rgb(24, 41, 24); */
        color: white;
    
    
        /* font-weight: 600; */
        margin-top: 100px;
    }



    .videocontent a{
        text-decoration: none;
        display: inline-block;
        color: rgb(20, 20, 20);
    
        background-color: rgb(83, 83, 187);
    
        font-size: 24px;
        border: 3px solid rgb(83, 83, 187);

        padding: 14px 30px;
        /* border-radius: 50px; */
        margin-top: 20px;
    }

    .videocontent a:hover{
        border: 1px solid rgb(56, 56, 230);
        background: rgb(64, 62, 62);
        transition: 1s;
        color: white;
        }

    .back-video{
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: -1;
        background-size: cover;
    }

    video{
        height: 120vh;
        width: 1600px;

    }

    /* ----------- ABOUT US------------------------------------------------------------------------------------------------ */

    /* #about-us{
        background-color: white;
    } */
    .about-us h3{
        width: 30%;
        font-size: 25px;
        font-weight: 600 ;
        color: rgb(4, 3, 3);
        padding: 10px;
        margin-top: 400px;
        /* margin-bottom: 30px; */
        text-align: center;
        /* border-bottom: 3px solid rgb(4, 3, 3); */
        /* border-bottom: 3px solid rgb(54, 54, 208); */
        margin-left: 20px;

    }



    .about-us h3 span{
        width: 300%;
        font-size: 25px;
        font-weight: 600 ;
        color: rgb(54, 54, 208);
        padding: 10px;
        margin-top: 400px;
        /* margin-bottom: 30px; */
        /* border-bottom: 3px solid rgb(54, 54, 208); */
        text-align: center;


    }



    .about-us{
        /* background-image: url(websiteimages/gal1/eg.png); */
        background-size: cover;
        /* background-image: linear-gradient(rgba(4,9,30,0.25),rgba(4,9,30,0.25 )),url(websiteimages/gal1/eliteg.png); */

        height: 100vh;

    }

    .yr12-pic {
        min-height: 15vh;
    
        width: 10%;
        background-image: url(websiteimages/12yrs.png);
    
        background-position: center;
        background-size: cover;
        position: relative;

        margin-left: 44%;
        
        

    }


    .about-us h4{
        width: 80%;
        margin: auto;
        text-align: center;
        font-size: 26px;
        font-weight: 500 ;
        color: whitesmoke;
    
        padding: 10px;
        padding-top: 25px;
        margin-left: 100px;
    }

    .yrs h4{
        width: 80%;
        margin: auto;
        text-align: center;
        font-size: 26px;
        font-weight: 500 ;
        color: whitesmoke;
    
        padding: 10px;
        margin-top: -50px;
        margin-left: 220px;
    }



    .of-services h4{
        width: 80%;
        margin: auto;
    
        font-size: 26px;
        font-weight: 500 ;
        color: whitesmoke;
    
        padding: 10px;
    
        margin-left: 220px;

    }

    .about-us p{
        width: 45%;
        margin: auto;
    
        padding-top: 50px;
        font-size: 20px;
        font-weight: 300 ;
        color: rgb(63, 61, 61);
    
        padding: 10px;
        margin-left: 16px;
        margin-top: 20px;
    }




    .about-us p span{
        width: 45%;
        margin: auto;
    
        padding-top: 50px;
        font-size: 28px;
        font-weight: 300 ;
        color: rgb(63, 61, 61);
    
        padding: 10px;

    }

    .about-us .office-image{
        height: 110vh;
        background-image: url(websiteimages/gal1/pngtree.jpg);
        background-size: cover;
        margin-top: -630px;
        width: 50%;
        margin-left: 650px;

    }




    .after-about-us .office-image{
        height: 25vh;
        background-image: url(websiteimages/gal1/blue3.jpg);
        background-size: cover;
        margin-top: 10px;
        width: 100%;
        /* margin-left: 600px; */
    }


    .after-about-us .office-image h1{
        color: white;
        /* text-align: left; */
        font-size: 20px;
        font-weight: 200;
        margin-left: 50px;
    }

    .after-about-us .office-image h2{
        color: white;
        /* text-align: left; */
        font-size: 19px;
        font-weight: 200;
        margin-left: 50px;
        margin-top: 10px;
    }


    .after-about-us .videocontentbutton a{
        text-decoration: none;
        display: inline-block;
        color: white;


        background-color: transparent;

        font-size: 15px;
        border: 3px solid white;
        padding: 17px 50px;
        /* border-radius: 50px; */
        margin-top: -200px;
        margin-left: 900px;
        /* margin-bottom: 100px; */
    }


    .after-about-us .videocontentbutton a:hover{
        border: 1px solid rgb(56, 56, 230);
        background: rgb(56, 56, 230);
        transition: 1s;
        color: white;
    }




    /* --------------------------contct us------------------------------------------------------- */


    .contactus_headerz{
        min-height: 55vh;
        width: 100%;
        background-image: url(websiteimages/gal1/SPORT\ COMPLEX.jpg);
        background-position: center;
        background-size: cover;
        position: relative;
        background-image: linear-gradient(rgba(156, 170, 143, 0.7),rgba(29, 30, 29, 0.7)),url(websiteimages/gal1/SPORT\ COMPLEX.jpg);
    
    }

    .contactus-orientation {
        background-image: url(websiteimages/gal1/whitebck.jpg);
        background-size: cover;
        height: 10%;
      
    
    }
    .contactus-orientation h3{
        font-size: 34px;
        font-weight: 200;
        color: rgb(77, 73, 134);
    
        text-align: center;

    


    }



    .contactus-orientation h2{
        font-size: 29px;
        font-weight: 100;
        color: black;
        margin-top: 20px;
        text-align: center;

    }


    .contactus-orientation p{
        font-size: 29px;
        font-weight: 20;
        color: black;
        margin-top: 10px;
        text-align: center;

    }


    .contactus-orientation p span{
        font-size:50px;
        font-weight: 20;
        color: rgb(56, 56, 230);
        margin-top: 10px;
        text-align: center;

    }


        /* --------------------------RECENT JOBS------------------------------------ */

    .recent-jobs h3{

        width: 35%;
        margin: auto;
        text-align: center;
        padding-top: 50px;
        font-size: 25px;
        font-weight: 600 ;
        color: rgb(54, 54, 208);
        
        padding: 10px;
        margin-top: 50px;
        /* border-bottom: 3px solid rgb(4, 3, 3); */
    }

    .recent-jobs h3 span{

        width: 35%;
        margin: auto;
        text-align: center;
        padding-top: 50px;
        font-size: 25px;
        font-weight: 600 ;
    
        color: rgb(4, 3, 3);
        
        padding: 10px;
        /* margin-top: 350px; */
        border-bottom: 3px solid rgb(54, 54, 208);

    }

    .recent-jobs p{
        width: 90%;
        margin: auto;
    
        padding-top: 50px;
        font-size: 14px;
        font-weight: 100 ;
        color: #696969;
    
        padding: 10px;
        padding-bottom: 50px;
    }


    .recent-jobs p span{
        width: 90%;
        margin: auto;
    
        padding-top: 50px;
        font-size: 24px;
        font-weight: 100 ;
        color: rgb(54, 54, 208);
    
        padding: 10px;
        padding-bottom: 50px;
    }

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


        background-color: white;

        font-size: 15px;
        border: 1px solid rgb(56, 56, 230);
        padding: 7px 40px;
        /* border-radius: 50px; */
        margin-top: -1200px;
        margin-left: 500px;
        margin-bottom: 100px;
    }


    .recent-jobs .videocontentbutton a:hover{
        border: 1px solid rgb(56, 56, 230);
        background: rgb(56, 56, 230);
        transition: 1s;
        color: white;
    }



    /* ------------------------------------------------our services----------------------------------------- */
    #jobour-services .videocontentbutton a{
        text-decoration: none;
        display: inline-block;
        color: rgb(4, 4, 4);


        background-color: white;

        font-size: 15px;
        border: 1px solid rgb(56, 56, 230);
        padding: 7px 40px;
        /* border-radius: 50px; */
        margin-top: 50px;
        margin-left: 510px;
        /* margin-bottom: 100px; */
    }


    #jobour-services .videocontentbutton a:hover{
        border: 1px solid rgb(56, 56, 230);
        background: rgb(56, 56, 230);
        transition: 1s;
        color: white;
        }


    /* .videocontent{

        text-align: center;
        margin-top: -50px;


    } */
    #jobour-services{
        /* max-width: 1240px; */
        max-width: 100%;
        margin: 0 auto;
        padding: 5%;
        display: flex;
        justify-content: center;
        align-items: center;

        /* margin-top: -120px; */
        /* background-image: url(websiteimages/gal1/grey4.jpg); */
        /* background-color: red; */

        



    }


    .jobourservicesword{
        
        width: 60%;
        justify-content: space-around;
        margin-left: -150px;
        margin-top: 400px;

    

    }

    .ourservicesword h1{
        font-size: 25px;
        color: rgb(84, 80, 80);
        margin-top: -500px;
        font-weight: 200;
    }




    .ourservicesword h1 span{
        font-size: 25px;
        color: rgb(56, 56, 230);
        margin-top: 150px;
        font-weight: 600;
    }


    .ourservicesword p{
        font-size: 16px;
        color: rgb(49, 45, 45);

    }





    .ourservicesword p span{
        font-size: 20px;
        color: rgb(56, 56, 230);
        font-weight: 400;
    }





    .jobourservicewrapper{
            
        width: 100%;
        justify-content: space-around;
        margin-top: 90px;
        margin-left: -600px;
        
    }

    .serviceaaaa{
        margin-left: 210px;
        margin-top: -190px;
    }
    .serviceaaaa P{
        color: rgb(93, 90, 90);
        font-size: 14px;
    }
    .serviceaaaa h1{
        color: rgb(56, 56, 230);
    }
    .jobtry{
        width: 30%;
        margin-top: -350px;
        font-size: 20px;
        margin-left: 250px;
    }

    .jobtry h1{
        color: rgb(56, 56, 230);

    }
    .jobtry h1 span{
        color: rgb(4, 3, 3);
        /* border-bottom: 3px solid rgb(4, 3, 3); */
    }

    .jobourservicecard{
        width: 370px;
        height: 270px;
        padding: 2rem 1rem;
        background: #fff;
        position: relative;
        display: inline-block;
        align-items: flex-end;
        box-shadow: 0px 7px 10px rgba(0,0,0,0.5);
        transition: 0.5s ease-in-out;
    
        margin-top: 40px;
        margin-left: 30px;

    
    }


    /* .jobourservicecard:hover{
        transform: translateY(20px);
    } */

    .jobourservicecard:before{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5),rgb(193, 193, 193));
        z-index: 2;
        transition: 0.5s all;
        opacity: 0;
    }


    .jobourservicecard:hover:before{
        opacity: 1;
    }




    .jobourservicecard img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;

    }



    .jobourservicecard .ourserviceinfo{
        position: relative;
        z-index: 3;
        color: black;
        opacity: 0;
        transform: translateY(30px);
        transform: 0.5s all;
    
    }


    .jobourservicecard:hover .ourserviceinfo{
        opacity: 1;
        transform: translateY(0px);
    }


    .jobourservicecard .ourserviceinfo h1{
        margin: 0;
        color: rgb(4, 4, 4);
        /* color: rgb(34, 34, 189); */
        font-size: 14px;
        text-align: left;
    }



    .jobourservicecard .ourserviceinfo h1 span{
        margin: 0;
        /* color: rgb(4, 4, 4); */
        color: rgb(34, 34, 189);
        font-size: 20px;
        text-align: left;
    }





    .jobourservicecard .ourserviceinfo p{
        
        font-size: 12px;
        margin-top: 25px;
        margin-bottom: 20px;
        width: 90%;
    }




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


        /* background-color: red; */

        font-size: 12px;
        border: 1px solid rgb(56, 56, 230);
        padding: 4px 20px;
        border-radius: 15px;
        margin-top: -20px;
        /* margin-left: 510px; */
        /* margin-bottom: 100px; */
    }


    .jobourservicecard .minivideocontentbutton a:hover{
        border: 1px solid rgb(56, 56, 230);
        background: rgb(56, 56, 230);
        transition: 1s;
        color: white;
    }









    .jobourservicewrapper .seevideocontentbutton a{
        text-decoration: none;
        display: inline-block;
        color: white;


        background-color: rgb(56, 56, 230);

        font-size: 15px;
        border: 1px solid rgb(56, 56, 230);
        padding: 16px 30px;
        border-radius: 15px;
        margin-top: 50px;
        margin-left: 500px;

    }


    .jobourservicewrapper .seevideocontentbutton a:hover{
        border: 1px solid rgb(56, 56, 230);
        background: transparent;
        transition: 1s;
        color: black;
    }



    /* ------------------------------------------------our services----------------------------------------- */
    #our-services .videocontentbutton a{
        text-decoration: none;
        display: inline-block;
        color: white;


        background-color: rgb(56, 56, 230);

        font-size: 15px;
        border: 1px solid rgb(56, 56, 230);
        padding: 7px 40px;
        border-radius: 15px;
        margin-top: 50px;
        margin-left: 510px;
        /* margin-bottom: 100px; */
    }


    #our-services .videocontentbutton a:hover{
        border: 1px solid rgb(56, 56, 230);
        background: transparent;
        transition: 1s;
        color: black;
    }


    /* .videocontent{

        text-align: center;
        margin-top: -50px;


    } */
    #our-services{
        /* max-width: 1240px; */
        max-width: 100%;
        margin: 0 auto;
        padding: 5%;
        display: flex;
        justify-content: center;
        align-items: center;
        /* background: linear-gradient(to bottom, rgba(236, 210, 80, 0.5),rgb(186, 142, 22)); */
        margin-top: 10px;
        /* background-image: url(websiteimages/gal1/grey4.jpg); */
        background-color: rgba(234, 234, 230, 0.5);

        



    }


    .ourservicesword{
        
        width: 60%;
        justify-content: space-around;
        margin-left: -150px;
        margin-top: 400px;

    

    }

    .ourservicesword h1{
        font-size: 25px;
        color: rgb(84, 80, 80);
        margin-top: -500px;
        font-weight: 200;
    }




    .ourservicesword h1 span{
        font-size: 25px;
        color: rgb(56, 56, 230);
        margin-top: 150px;
        font-weight: 600;
    }


    .ourservicesword p{
        font-size: 16px;
        color: rgb(49, 45, 45);

    }





    .ourservicesword p span{
        font-size: 20px;
        color: rgb(56, 56, 230);
        font-weight: 400;
    }





    .ourservicewrapper{
            
        width: 100%;
        justify-content: space-around;
        margin-top: 20px;
        margin-left: -800px;
        
    }

    .serviceaaaa{
        margin-left: 210px;
        margin-top: -190px;
    }
    .serviceaaaa P{
        color: rgb(93, 90, 90);
        font-size: 14px;
    }
    .serviceaaaa h1{
        color: rgb(56, 56, 230);
    }
    .try{
        width: 30%;
        margin-top: -850px;
        font-size: 20px;
        margin-left: 450px;
    }

    .try h1{
        color: rgb(56, 56, 230);

    }
    .try h1 span{
        color: rgb(4, 3, 3);
        border-bottom: 3px solid rgb(4, 3, 3);
    }

    .ourservicecard{
        width: 530px;
        height: 300px;
        padding: 2rem 1rem;
        background: #fff;
        position: relative;
        display: inline-block;
        align-items: flex-end;
        box-shadow: 0px 7px 10px rgba(0,0,0,0.5);
        transition: 0.5s ease-in-out;
    
        margin-top: 40px;
        margin-left: 30px;

    
    }


    /* .ourservicecard:hover{
        transform: translateY(20px);
    } */

    .ourservicecard:before{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5),rgb(193, 193, 193));
        z-index: 2;
        transition: 0.5s all;
        opacity: 0;
    }


    .ourservicecard:hover:before{
        opacity: 1;
    }




    .ourservicecard img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;

    }



    /* .ourservicecard .ourserviceinfo{
        position: relative;
        z-index: 3;
        color: black;
        opacity: 0;
        transform: translateY(30px);
        transform: 0.5s all;
    
    }


    .ourservicecard:hover .ourserviceinfo{
        opacity: 1;
        transform: translateY(0px);
    } */


    .ourservicecard .ourserviceinfo h1{
        margin: 0;
        color: rgb(4, 4, 4);
        font-size: 21px;
        text-align: center;
    }

    .ourservicecard .ourserviceinfo p{
        
        font-size: 17px;
        margin-top: 25px;
        margin-bottom: 20px;
        color: rgb(82, 81, 81);
        width: 90%;
    }


        /* ---------------------------VISION N BRIEF------------------------------ */
    .visionnbrief .see-all-articles-btn{
        display: inline-block;
        text-decoration: none;
        color: black;


        border: 1px solid blue;
        padding: 12px 34px;
        font-size: 13px;
        
        background: transparent;
        position: relative;
        cursor: pointer;
        /* border-radius: 15px; */
        margin-top: 340px;
        margin-left: -1050px;


    }


    .see-all-articles-btn:hover{
        border: 1px solid wheat;
        background: rgb(51, 95, 184);
        font-size: 20px;
        transition: 1s;
    }


    #vnb {
        background-color: white;
        /* background-image: url(websiteimages/gal1/142195-blue-and-white-simple-background.jpg); */
        background-size: cover;
        margin-top: 320px;



    }

    .visionnbrief{
        width: 80%;
        margin: auto;
        text-align: center;
        padding-top: 50px;
        font-size: 15px;
        color: black;
        padding: 10px;
        padding-bottom: 150px;
        margin-top: -450px;
        background-color: white;
    }


    .vision-brief .vision{
        /* margin-top: 1%; */
        /* display: flex; */
        /* width: 100%; */
        background: white;
        /* background-image: url(websiteimages/gal1/d.jpg); */
        /* background-size: cover; */
        height: 67vh;
        width: 100px;
        /* background-image: linear-gradient(rgba(46, 49, 59, 0.7),rgba(54, 57, 71, 0.7)),url(websiteimages/74717cc8-306b-44a1-8bbc-13daab4b73cd.JPG); */
        /* background-image: linear-gradient(rgba(220, 235, 11, 0.25),rgb(218, 216, 1110)),url(websiteimages/74717cc8-306b-44a1-8bbc-13daab4b73cd.JPG); */
        margin-top: -300px;
        margin-left: 550px;
        display: flex;
        width: 50%;
        background-size: cover;
    
        display: inline-block;
        flex-basis: 31%;
        border-radius: 10px;
        margin-bottom: 5px;
        padding: 20px 12px;
        box-sizing: border-box;
        transition: 0.5s;

    }



    .vision h3{
        text-align: center;

        font-size: 60px;
        font-weight: 600;
        margin: 10px 0;
        color: grey;
        margin-top: 100px;
    }



    .vision-brief P{
        text-align: left;
        font-size: 18px;
        margin: 10px 0;
        color: rgb(119, 117, 117);
        margin-left: -100px;
        margin-top:  -300px;
        /* margin-bottom: -300px; */

        width: 60%;
    }


    .vision-brief P span{
        font-size: 46px;
        color: rgb(54, 54, 208);
        /* margin-top:  -400px; */
    }

    /* .vision:hover{
        box-shadow: 0 0 20px 0px black;
    } */ 





    
}
















































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


    .extra-colorzz{
        background-color: white;
        height: 4vh;

    }

    /* ----------Hero---------- */
    #hero{
        /* background-image: url(images/lionel-messi-sport-footballers-wallpaper-5450a0bae1d6b8ca376c0ee9bfeaed9b.jpg); */
        /* background-image: url(images/soccer-lionel-messi-argentinian-wallpaper-3060d5b96f06ee23f8df87c65be66498.jpg); */
        /* background-image: url(images/lionel-messi-fcb-barcelona-fc-barcelona-wallpaper-preview.jpg); */
        /* background-image: url(images/lionel-messi-soccer-football-wallpaper-preview.jpg); */
        /* background-image: url(images/football-club-form-player-wallpaper-preview.jpg); */
        /* background-image: url(images/soccer-paulo-dybala-argentinian-juventus-f-c-wallpaper-preview.jpg); */
        /* background-image: url(images/football-the-best-players-2016-soccer-lionel-messi-wallpaper-8816bdf880a04c08007c212ea8f2e49a.jpg); */
        /* background-image: url(websiteimages/gal1/SPORT\ COMPLEX.jpg); */
        /* background-image: url(images/action-art-artistic-athletic-d9ac803715075f22cde03edf1bff49bb.jpg); */
        /* background-image: url(images/soccer-kylian-mbappe-french-world-cup-2018-wallpaper-f8268caa6facb7992eb0c982f2590be0.jpg); */
        /* background-image: url(images/64a5c3ac757e775eef042fc7_withmeta.jpg); */
        /* background-image: url(images/depositphotos_165317552-stock-photo-cheerful-delivery-man-happy-young.jpg); */
        /* background-image: url(images/landingimage.jpeg); */
        /* background-image: url(images/m.jpeg), linear-gradient(rgba(4,9,30,0.75),rgba(26, 29, 42, 0.55)); */
        background-image: linear-gradient(rgba(4,9,30,0.85),rgba(26, 29, 42, 0.75)),url(websiteimages/gal1/SPORT\ COMPLEX.jpg);

    
    

        height: 110vh;
        width: 100%;
        background-size: cover;
        background-position: top 25% left 1px;
        /* padding: 0 80px; */
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;
        /* background-color: linear-gradient(to bottom, rgba(167, 31, 31, 0.5),rgb(56, 3, 3)); */
    }

    #hero h4{
        padding-bottom: 15px;
        margin-left: 350px;
        color: white;
        font-size: 65px;
        margin-top: -100px;
        text-align: center;
    }



    #hero h4 span{
        /* padding-bottom: 15px;
        margin-left: 100px; */
        color: rgb(56, 56, 230);
        font-size: 65px;
        /* margin-top: -100px;
        text-align: center; */
    }
    #hero h1{
        color: purple;
        margin-left: 200px;
    }

    #hero h2{
        color: white;
        margin-left: 280px;
        text-align: center;
        font-size: 18px;
    }

    #hero p{
        /* color: black; */
        margin-left: 600px;
    }
    #hero button{
        background-image: url(images/skull-graffiti-background-skull-graffiti-wallpaper-skull-graffiti-pattern-graffiti-background-graffiti-art-graffiti-wallpaper-ai-generative-photo.jpg);
        /* background-image: url(images/images.jpeg); */
        background-color: transparent;
        color: white;
        font-size: 30px;
        font-weight: 700;
        border-radius: 10px;
        border: 0;
        padding: 14px 80px 14px 65px;
        background-repeat: no-repeat;
        cursor: pointer;

    }



    #hero a{
        text-decoration: none;
        display: inline-block;
        color: white;
    
        background-color: rgb(56, 56, 230);
    
        font-size: 24px;
        border: 3px solid rgb(56, 56, 230);

        padding: 12px 20px;
        border-radius: 15px;
        margin-left: 600px;

        margin-top: 20px;
    }

    #hero a:hover{
        border: 1px solid rgb(56, 56, 230);
        background: rgb(64, 62, 62);
        transition: 1s;
        color: white;
    }



    /* ----------- ABOUT US------------------------------------------------------------------------------------------------ */

    /* #about-us{
        background-color: white;
    } */
    .about-us h3{
        width: 30%;
        font-size: 25px;
        font-weight: 600 ;
        color: rgb(4, 3, 3);
        padding: 10px;
        margin-top: 400px;
        /* margin-bottom: 30px; */
        text-align: center;
        /* border-bottom: 3px solid rgb(4, 3, 3); */
        /* border-bottom: 3px solid rgb(54, 54, 208); */
        margin-left: 20px;

    }



    .about-us h3 span{
        width: 300%;
        font-size: 25px;
        font-weight: 600 ;
        color: rgb(54, 54, 208);
        padding: 10px;
        margin-top: 400px;
        /* margin-bottom: 30px; */
        /* border-bottom: 3px solid rgb(54, 54, 208); */
        text-align: center;


    }



    .about-us{
        /* background-image: url(websiteimages/gal1/eg.png); */
        background-size: cover;
        /* background-image: linear-gradient(rgba(4,9,30,0.25),rgba(4,9,30,0.25 )),url(websiteimages/gal1/eliteg.png); */

        height: 100vh;

    }

    .yr12-pic {
        min-height: 15vh;
    
        width: 10%;
        background-image: url(websiteimages/12yrs.png);
    
        background-position: center;
        background-size: cover;
        position: relative;

        margin-left: 44%;
        
        

    }


    .about-us h4{
        width: 80%;
        margin: auto;
        text-align: center;
        font-size: 26px;
        font-weight: 500 ;
        color: whitesmoke;
    
        padding: 10px;
        padding-top: 25px;
        margin-left: 100px;
    }

    .yrs h4{
        width: 80%;
        margin: auto;
        text-align: center;
        font-size: 26px;
        font-weight: 500 ;
        color: whitesmoke;
    
        padding: 10px;
        margin-top: -50px;
        margin-left: 220px;
    }



    .of-services h4{
        width: 80%;
        margin: auto;
    
        font-size: 26px;
        font-weight: 500 ;
        color: whitesmoke;
    
        padding: 10px;
    
        margin-left: 220px;

    }

    .about-us p{
        width: 45%;
        margin: auto;
    
        padding-top: 50px;
        font-size: 20px;
        font-weight: 300 ;
        color: rgb(63, 61, 61);
    
        padding: 10px;
        margin-left: 16px;
        margin-top: 20px;
    }




    .about-us p span{
        width: 45%;
        margin: auto;
    
        padding-top: 50px;
        font-size: 28px;
        font-weight: 300 ;
        color: rgb(63, 61, 61);
    
        padding: 10px;

    }

    .about-us .office-image{
        height: 110vh;
        background-image: url(websiteimages/gal1/pngtree.jpg);
        background-size: cover;
        margin-top: -630px;
        width: 50%;
        margin-left: 700px;

    }




    .after-about-us .office-image{
        height: 25vh;
        background-image: url(websiteimages/gal1/blue3.jpg);
        background-size: cover;
        margin-top: 10px;
        width: 100%;
        /* margin-left: 600px; */
    }


    .after-about-us .office-image h1{
        color: white;
        /* text-align: left; */
        font-size: 20px;
        font-weight: 200;
        margin-left: 50px;
    }

    .after-about-us .office-image h2{
        color: white;
        /* text-align: left; */
        font-size: 19px;
        font-weight: 200;
        margin-left: 50px;
        margin-top: 10px;
    }


    .after-about-us .videocontentbutton a{
        text-decoration: none;
        display: inline-block;
        color: white;


        background-color: transparent;

        font-size: 15px;
        border: 3px solid white;
        padding: 17px 50px;
        /* border-radius: 50px; */
        margin-top: -200px;
        margin-left: 900px;
        /* margin-bottom: 100px; */
    }


    .after-about-us .videocontentbutton a:hover{
        border: 1px solid rgb(56, 56, 230);
        background: rgb(56, 56, 230);
        transition: 1s;
        color: white;
    }

    /* ------------------------------HEALTH AND SAFETY ENVIRONS---------------------- */

    .health-safety-pic p{
        width: 100%;
        font-size: 19px;
        font-weight: 600 ;
        color: whitesmoke;
        
    }



    /* --------------------------contct us------------------------------------------------------- */


    .contactus_headerz{
        min-height: 55vh;
        width: 100%;
        background-image: url(websiteimages/gal1/SPORT\ COMPLEX.jpg);
        background-position: center;
        background-size: cover;
        position: relative;
        background-image: linear-gradient(rgba(156, 170, 143, 0.7),rgba(29, 30, 29, 0.7)),url(websiteimages/gal1/SPORT\ COMPLEX.jpg);
    
    }

    .contactus-orientation {
        background-image: url(websiteimages/gal1/whitebck.jpg);
        background-size: cover;
        height: 10%;
        
    
    }
    .contactus-orientation h3{
        font-size: 34px;
        font-weight: 200;
        color: rgb(77, 73, 134);
    
        text-align: center;

    


    }



    .contactus-orientation h2{
        font-size: 29px;
        font-weight: 100;
        color: black;
        margin-top: 20px;
        text-align: center;

    }


    .contactus-orientation p{
        font-size: 29px;
        font-weight: 20;
        color: black;
        margin-top: 10px;
        text-align: center;

    }


    .contactus-orientation p span{
        font-size:50px;
        font-weight: 20;
        color: rgb(56, 56, 230);
        margin-top: 10px;
        text-align: center;

    }


/* --------------------------RECENT JOBS------------------------------------ */

    .recent-jobs h3{

        width: 35%;
        margin: auto;
        text-align: center;
        padding-top: 50px;
        font-size: 25px;
        font-weight: 600 ;
        color: rgb(54, 54, 208);
        
        padding: 10px;
        margin-top: 50px;
        /* border-bottom: 3px solid rgb(4, 3, 3); */
    }

    .recent-jobs h3 span{

        width: 35%;
        margin: auto;
        text-align: center;
        padding-top: 50px;
        font-size: 25px;
        font-weight: 600 ;
    
        color: rgb(4, 3, 3);
        
        padding: 10px;
        /* margin-top: 350px; */
        border-bottom: 3px solid rgb(54, 54, 208);

    }

    .recent-jobs p{
        width: 90%;
        margin: auto;
    
        padding-top: 50px;
        font-size: 14px;
        font-weight: 100 ;
        color: #696969;
    
        padding: 10px;
        padding-bottom: 50px;
    }


    .recent-jobs p span{
        width: 90%;
        margin: auto;
    
        padding-top: 50px;
        font-size: 24px;
        font-weight: 100 ;
        color: rgb(54, 54, 208);
    
        padding: 10px;
        padding-bottom: 50px;
    }

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


        background-color: white;

        font-size: 15px;
        border: 1px solid rgb(56, 56, 230);
        padding: 7px 40px;
        /* border-radius: 50px; */
        margin-top: -1200px;
        margin-left: 600px;
        margin-bottom: 100px;
    }


    .recent-jobs .videocontentbutton a:hover{
        border: 1px solid rgb(56, 56, 230);
        background: rgb(56, 56, 230);
        transition: 1s;
        color: white;
    }





    /* ------------------------------------------------our services----------------------------------------- */
    #jobour-services .videocontentbutton a{
        text-decoration: none;
        display: inline-block;
        color: rgb(4, 4, 4);


        background-color: white;

        font-size: 15px;
        border: 1px solid rgb(56, 56, 230);
        padding: 7px 40px;
        /* border-radius: 50px; */
        margin-top: 50px;
        margin-left: 510px;
        /* margin-bottom: 100px; */
    }


    #jobour-services .videocontentbutton a:hover{
        border: 1px solid rgb(56, 56, 230);
        background: rgb(56, 56, 230);
        transition: 1s;
        color: white;
        }


    /* .videocontent{

        text-align: center;
        margin-top: -50px;


    } */
    #jobour-services{
        /* max-width: 1240px; */
        max-width: 100%;
        margin: 0 auto;
        padding: 5%;
        display: flex;
        justify-content: center;
        align-items: center;

        /* margin-top: -120px; */
        /* background-image: url(websiteimages/gal1/grey4.jpg); */
        /* background-color: red; */

        



    }


    .jobourservicesword{
        
        width: 60%;
        justify-content: space-around;
        margin-left: -150px;
        margin-top: 400px;

    

    }

    .ourservicesword h1{
        font-size: 25px;
        color: rgb(84, 80, 80);
        margin-top: -500px;
        font-weight: 200;
    }




    .ourservicesword h1 span{
        font-size: 25px;
        color: rgb(56, 56, 230);
        margin-top: 150px;
        font-weight: 600;
    }


    .ourservicesword p{
        font-size: 16px;
        color: rgb(49, 45, 45);

    }





    .ourservicesword p span{
        font-size: 20px;
        color: rgb(56, 56, 230);
        font-weight: 400;
    }





    .jobourservicewrapper{
            
        width: 100%;
        justify-content: space-around;
        margin-top: 90px;
        margin-left: -700px;
        
    }

    .serviceaaaa{
        margin-left: 210px;
        margin-top: -190px;
    }
    .serviceaaaa P{
        color: rgb(93, 90, 90);
        font-size: 14px;
    }
    .serviceaaaa h1{
        color: rgb(56, 56, 230);
    }
    .jobtry{
        width: 30%;
        margin-top: -350px;
        font-size: 20px;
        margin-left: 340px;
    }

    .jobtry h1{
        color: rgb(56, 56, 230);

    }
    .jobtry h1 span{
        color: rgb(4, 3, 3);
        /* border-bottom: 3px solid rgb(4, 3, 3); */
    }

    .jobourservicecard{
        width: 390px;
        height: 270px;
        padding: 2rem 1rem;
        background: #fff;
        position: relative;
        display: inline-block;
        align-items: flex-end;
        box-shadow: 0px 7px 10px rgba(0,0,0,0.5);
        transition: 0.5s ease-in-out;
    
        margin-top: 40px;
        margin-left: 30px;

    
    }


    /* .jobourservicecard:hover{
        transform: translateY(20px);
    } */

    .jobourservicecard:before{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5),rgb(193, 193, 193));
        z-index: 2;
        transition: 0.5s all;
        opacity: 0;
    }


    .jobourservicecard:hover:before{
        opacity: 1;
    }




    .jobourservicecard img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;

    }



    .jobourservicecard .ourserviceinfo{
        position: relative;
        z-index: 3;
        color: black;
        opacity: 0;
        transform: translateY(30px);
        transform: 0.5s all;
    
    }


    .jobourservicecard:hover .ourserviceinfo{
        opacity: 1;
        transform: translateY(0px);
    }


    .jobourservicecard .ourserviceinfo h1{
        margin: 0;
        color: rgb(4, 4, 4);
        /* color: rgb(34, 34, 189); */
        font-size: 14px;
        text-align: left;
    }



    .jobourservicecard .ourserviceinfo h1 span{
        margin: 0;
        /* color: rgb(4, 4, 4); */
        color: rgb(34, 34, 189);
        font-size: 20px;
        text-align: left;
    }





    .jobourservicecard .ourserviceinfo p{
        
        font-size: 12px;
        margin-top: 25px;
        margin-bottom: 20px;
        width: 90%;
    }




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


        /* background-color: red; */

        font-size: 12px;
        border: 1px solid rgb(56, 56, 230);
        padding: 4px 20px;
        border-radius: 15px;
        margin-top: -20px;
        /* margin-left: 510px; */
        /* margin-bottom: 100px; */
    }


    .jobourservicecard .minivideocontentbutton a:hover{
        border: 1px solid rgb(56, 56, 230);
        background: rgb(56, 56, 230);
        transition: 1s;
        color: white;
    }









    .jobourservicewrapper .seevideocontentbutton a{
        text-decoration: none;
        display: inline-block;
        color: white;


        background-color: rgb(56, 56, 230);

        font-size: 15px;
        border: 1px solid rgb(56, 56, 230);
        padding: 16px 30px;
        border-radius: 15px;
        margin-top: 50px;
        margin-left: 500px;

    }


    .jobourservicewrapper .seevideocontentbutton a:hover{
        border: 1px solid rgb(56, 56, 230);
        background: transparent;
        transition: 1s;
        color: black;
    }













    /* ------------------------------------------------our services----------------------------------------- */
    #our-services .videocontentbutton a{
        text-decoration: none;
        display: inline-block;
        color: white;


        background-color: rgb(56, 56, 230);

        font-size: 15px;
        border: 1px solid rgb(56, 56, 230);
        padding: 7px 40px;
        border-radius: 15px;
        margin-top: 50px;
        margin-left: 510px;
        /* margin-bottom: 100px; */
    }


    #our-services .videocontentbutton a:hover{
        border: 1px solid rgb(56, 56, 230);
        background: transparent;
        transition: 1s;
        color: black;
    }


    /* .videocontent{

        text-align: center;
        margin-top: -50px;


    } */
    #our-services{
        /* max-width: 1240px; */
        max-width: 100%;
        margin: 0 auto;
        padding: 5%;
        display: flex;
        justify-content: center;
        align-items: center;
        /* background: linear-gradient(to bottom, rgba(236, 210, 80, 0.5),rgb(186, 142, 22)); */
        margin-top: 10px;
        /* background-image: url(websiteimages/gal1/grey4.jpg); */
        background-color: rgba(234, 234, 230, 0.5);

        



    }


    .ourservicesword{
        
        width: 60%;
        justify-content: space-around;
        margin-left: -150px;
        margin-top: 400px;

    

    }

    .ourservicesword h1{
        font-size: 25px;
        color: rgb(84, 80, 80);
        margin-top: -500px;
        font-weight: 200;
    }




    .ourservicesword h1 span{
        font-size: 25px;
        color: rgb(56, 56, 230);
        margin-top: 150px;
        font-weight: 600;
    }


    .ourservicesword p{
        font-size: 16px;
        color: rgb(49, 45, 45);

    }





    .ourservicesword p span{
        font-size: 20px;
        color: rgb(56, 56, 230);
        font-weight: 400;
    }





    .ourservicewrapper{
            
        width: 100%;
        justify-content: space-around;
        margin-top: 20px;
        margin-left: -750px;
        
    }

    .serviceaaaa{
        margin-left: 210px;
        margin-top: -190px;
    }
    .serviceaaaa P{
        color: rgb(93, 90, 90);
        font-size: 14px;
    }
    .serviceaaaa h1{
        color: rgb(56, 56, 230);
    }
    .try{
        width: 30%;
        margin-top: -850px;
        font-size: 20px;
        margin-left: 450px;
    }

    .try h1{
        color: rgb(56, 56, 230);

    }
    .try h1 span{
        color: rgb(4, 3, 3);
        border-bottom: 3px solid rgb(4, 3, 3);
    }

    .ourservicecard{
        width: 530px;
        height: 300px;
        padding: 2rem 1rem;
        background: #fff;
        position: relative;
        display: inline-block;
        align-items: flex-end;
        box-shadow: 0px 7px 10px rgba(0,0,0,0.5);
        transition: 0.5s ease-in-out;
    
        margin-top: 40px;
        margin-left: 30px;

    
    }


    /* .ourservicecard:hover{
        transform: translateY(20px);
    } */

    .ourservicecard:before{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5),rgb(193, 193, 193));
        z-index: 2;
        transition: 0.5s all;
        opacity: 0;
    }


    .ourservicecard:hover:before{
        opacity: 1;
    }




    .ourservicecard img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;

    }



    /* .ourservicecard .ourserviceinfo{
        position: relative;
        z-index: 3;
        color: black;
        opacity: 0;
        transform: translateY(30px);
        transform: 0.5s all;
    
    }


    .ourservicecard:hover .ourserviceinfo{
        opacity: 1;
        transform: translateY(0px);
    } */


    .ourservicecard .ourserviceinfo h1{
        margin: 0;
        color: rgb(4, 4, 4);
        font-size: 21px;
        text-align: center;
    }

    .ourservicecard .ourserviceinfo p{
        
        font-size: 17px;
        margin-top: 25px;
        margin-bottom: 20px;
        color: rgb(82, 81, 81);
        width: 90%;
    }





    /* ---------------------------VISION N BRIEF------------------------------ */
    .visionnbrief .see-all-articles-btn{
        display: inline-block;
        text-decoration: none;
        color: white;


        border: 1px solid blue;
        padding: 12px 20px;
        font-size: 13px;
        
        background: rgb(51, 95, 184);
        position: relative;
        cursor: pointer;
        border-radius: 15px;
        margin-top: 340px;
        margin-left: -1050px;


    }


    .see-all-articles-btn:hover{
        border: 1px solid rgb(51, 95, 184);
        background: transparent;
        font-size: 15px;
        transition: 1s;
        color: black;
    }


    #vnb {
        background-color: white;
        /* background-image: url(websiteimages/gal1/142195-blue-and-white-simple-background.jpg); */
        background-size: cover;
        margin-top: 320px;
        height: 100vh;



    }

    .visionnbrief{
        width: 80%;
        margin: auto;
        text-align: center;
        padding-top: 50px;
        font-size: 15px;
        color: black;
        padding: 10px;
        padding-bottom: 150px;
        margin-top: -320px;
        /* background-color: red; */
    }


    .vision-brief .vision{
        /* margin-top: 1%; */
        /* display: flex; */
        /* width: 100%; */
        /* background: red; */
        /* background-image: url(websiteimages/gal1/d.jpg); */
        /* background-size: cover; */
        height: 67vh;
        width: 100px;
        /* background-image: linear-gradient(rgba(46, 49, 59, 0.7),rgba(54, 57, 71, 0.7)),url(websiteimages/74717cc8-306b-44a1-8bbc-13daab4b73cd.JPG); */
        /* background-image: linear-gradient(rgba(220, 235, 11, 0.25),rgb(218, 216, 1110)),url(websiteimages/74717cc8-306b-44a1-8bbc-13daab4b73cd.JPG); */
        margin-top: -300px;
        margin-left: 550px;
        display: flex;
        width: 50%;
        background-size: cover;
    
        display: inline-block;
        flex-basis: 31%;
        border-radius: 10px;
        margin-bottom: 5px;
        padding: 20px 12px;
        box-sizing: border-box;
        transition: 0.5s;

    }



    .vision h3{
        text-align: center;

        font-size: 60px;
        font-weight: 600;
        margin: 10px 0;
        color: grey;
        margin-top: 100px;
    }



    .vision-brief P{
        text-align: left;
        font-size: 18px;
        margin: 10px 0;
        color: rgb(119, 117, 117);
        margin-left: -100px;
        margin-top:  -300px;
        /* margin-bottom: -300px; */

        width: 60%;
    }


    .vision-brief P span{
        font-size: 46px;
        color: rgb(54, 54, 208);
        /* margin-top:  -400px; */
    }






    /* ------------------------------------------ team------------------------------------ */



    .dedicated-team-header h3{
        width: 27%;

    
        font-size: 25px;
        font-weight: 600 ;
        color: rgb(54, 54, 208);
        padding: 10px;
        margin-top: 100px;
        margin-bottom: 30px;
        /* border-bottom: 3px solid rgb(4, 3, 3); */
    

    }




    .jefcon-team{
        /* background-image: url(websiteimages/team3.jpeg); */
        background-size: cover;
        margin-top: -150px;
    }


    .dedicated-team-header h3 span{
        width: 27%;
        font-size: 25px;
        font-weight: 600 ;
        color: rgb(54, 54, 208);
        padding: 10px;
        margin-top: 100px;
        margin-bottom: 30px;
        /* border-bottom: 3px solid rgb(4, 3, 3); */
    


    }

    .slide-content{
        margin: 0 40px;
        margin-bottom: 30px;
    
    

    }


    .slide-container{
        max-width: 1120px;
        width: 40%;
        padding: 40px 0;
        margin-bottom: 100px;



    }

    .card{
        width: 320px;
        border-radius: 25px;
        background-color: white;
        border: 1px dashed rgb(112, 126, 112);


    }
    .image-content, .card-content{
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10px 14px;

    }

    .image-content{
        row-gap: 5px;
        position: relative;
        padding: 25px 0;

    }


    .overlay{
        position: absolute;
        left: 0;
        top: 0;
        height: 90%;
        width: 100%;
        background-color: rgb(54, 54, 208);

        border-radius: 25px 25px 0 25px;
    }

    .overlay::before, .overlay::after{
        content: '';
        position: absolute;
        right: 0;
        bottom: -40px;
        height: 40px;
        width: 40px;
        background-color: rgb(54, 54, 208);
    }

    .overlay::after{
        border-radius: 0 25px 0 0;
        background-color: white;
    }
    .card-image{
        position: relative;
        height: 250px;
        width: 250px;
        
        border-radius: 50%;
        background: white;
        padding: 3px;
    }
    .card-image .card-img{
        height: 100%;
        width: 100%;
        object-fit: cover;
        border-radius: 50%;
        border: 4px solid white;
    }

    .name{
        font-size: 21px;
        font-weight: 500;
        color: black;

    
    }


    .description{
        font-size: 28px;
        font-weight: 600;

        color: rgb(54, 54, 208);
        text-align: center;
    }


    .button{
        border: none;
        font-size: 16px;
        color: black;
        padding: 8px 16px;
        background-color: rgb(54, 54, 208);
        border-radius: 6px;
        margin: 14px;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .button:hover{
        background: wheat;
    }

    .jefcon-team .videocontentbutton a{
        text-decoration: none;
        display: inline-block;
        color: white;


        background-color: rgb(56, 56, 230);

        font-size: 15px;
        border: 1px solid rgb(56, 56, 230);
        padding: 14px 30px;
        border-radius: 15px;
        margin-top: -1000px;
        margin-left: 600px;
        margin-bottom: 100px;
    }


    .jefcon-team .videocontentbutton a:hover{
        border: 1px solid rgb(56, 56, 230);
        background: transparent;
        transition: 1s;
        color: black;
    }





}
/* .vision:hover{
    box-shadow: 0 0 20px 0px black;
} */











































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


    .extra-colorzz{
        background-color: white;
        height: 4vh;

    }




    /* ----------Hero---------- */
    #hero{
        /* background-image: url(images/lionel-messi-sport-footballers-wallpaper-5450a0bae1d6b8ca376c0ee9bfeaed9b.jpg); */
        /* background-image: url(images/soccer-lionel-messi-argentinian-wallpaper-3060d5b96f06ee23f8df87c65be66498.jpg); */
        /* background-image: url(images/lionel-messi-fcb-barcelona-fc-barcelona-wallpaper-preview.jpg); */
        /* background-image: url(images/lionel-messi-soccer-football-wallpaper-preview.jpg); */
        /* background-image: url(images/football-club-form-player-wallpaper-preview.jpg); */
        /* background-image: url(images/soccer-paulo-dybala-argentinian-juventus-f-c-wallpaper-preview.jpg); */
        /* background-image: url(images/football-the-best-players-2016-soccer-lionel-messi-wallpaper-8816bdf880a04c08007c212ea8f2e49a.jpg); */
        /* background-image: url(websiteimages/gal1/SPORT\ COMPLEX.jpg); */
        /* background-image: url(images/action-art-artistic-athletic-d9ac803715075f22cde03edf1bff49bb.jpg); */
        /* background-image: url(images/soccer-kylian-mbappe-french-world-cup-2018-wallpaper-f8268caa6facb7992eb0c982f2590be0.jpg); */
        /* background-image: url(images/64a5c3ac757e775eef042fc7_withmeta.jpg); */
        /* background-image: url(images/depositphotos_165317552-stock-photo-cheerful-delivery-man-happy-young.jpg); */
        /* background-image: url(images/landingimage.jpeg); */
        /* background-image: url(images/m.jpeg), linear-gradient(rgba(4,9,30,0.75),rgba(26, 29, 42, 0.55)); */
        background-image: linear-gradient(rgba(4,9,30,0.85),rgba(26, 29, 42, 0.75)),url(websiteimages/gal1/SPORT\ COMPLEX.jpg);

    
    

        height: 110vh;
        width: 100%;
        background-size: cover;
        background-position: top 25% left 1px;
        /* padding: 0 80px; */
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;
        /* background-color: linear-gradient(to bottom, rgba(167, 31, 31, 0.5),rgb(56, 3, 3)); */
    }

    #hero h4{
        padding-bottom: 15px;
        margin-left: 450px;
        color: white;
        font-size: 65px;
        margin-top: -100px;
        text-align: center;
    }



    #hero h4 span{
        /* padding-bottom: 15px;
        margin-left: 100px; */
        color: rgb(56, 56, 230);
        font-size: 65px;
        /* margin-top: -100px;
        text-align: center; */
    }
    #hero h1{
        color: purple;
        margin-left: 200px;
    }

    #hero h2{
        color: white;
        margin-left: 380px;
        text-align: center;
        font-size: 18px;
    }

    #hero p{
        /* color: black; */
        margin-left: 600px;
    }
    #hero button{
        background-image: url(images/skull-graffiti-background-skull-graffiti-wallpaper-skull-graffiti-pattern-graffiti-background-graffiti-art-graffiti-wallpaper-ai-generative-photo.jpg);
        /* background-image: url(images/images.jpeg); */
        background-color: transparent;
        color: white;
        font-size: 30px;
        font-weight: 700;
        border-radius: 10px;
        border: 0;
        padding: 14px 80px 14px 65px;
        background-repeat: no-repeat;
        cursor: pointer;

    }



    #hero a{
        text-decoration: none;
        display: inline-block;
        color: white;
    
        background-color: rgb(56, 56, 230);
    
        font-size: 24px;
        border: 3px solid rgb(56, 56, 230);

        padding: 12px 20px;
        border-radius: 15px;
        margin-left: 670px;

        margin-top: 20px;
    }

    #hero a:hover{
        border: 1px solid rgb(56, 56, 230);
        background: rgb(64, 62, 62);
        transition: 1s;
        color: white;
    }


    /* ----------- ABOUT US------------------------------------------------------------------------------------------------ */

    /* #about-us{
        background-color: white;
    } */
    .about-us h3{
        width: 30%;
        font-size: 25px;
        font-weight: 600 ;
        color: rgb(4, 3, 3);
        padding: 10px;
        margin-top: 400px;
        /* margin-bottom: 30px; */
        text-align: center;
        /* border-bottom: 3px solid rgb(4, 3, 3); */
        /* border-bottom: 3px solid rgb(54, 54, 208); */
        margin-left: 20px;

    }



    .about-us h3 span{
        width: 300%;
        font-size: 25px;
        font-weight: 600 ;
        color: rgb(54, 54, 208);
        padding: 10px;
        margin-top: 400px;
        /* margin-bottom: 30px; */
        /* border-bottom: 3px solid rgb(54, 54, 208); */
        text-align: center;


    }



    .about-us{
        /* background-image: url(websiteimages/gal1/eg.png); */
        background-size: cover;
        /* background-image: linear-gradient(rgba(4,9,30,0.25),rgba(4,9,30,0.25 )),url(websiteimages/gal1/eliteg.png); */

        height: 100vh;

    }

    .yr12-pic {
        min-height: 15vh;
    
        width: 10%;
        background-image: url(websiteimages/12yrs.png);
    
        background-position: center;
        background-size: cover;
        position: relative;

        margin-left: 44%;
        
        

    }


    .about-us h4{
        width: 80%;
        margin: auto;
        text-align: center;
        font-size: 26px;
        font-weight: 500 ;
        color: whitesmoke;
    
        padding: 10px;
        padding-top: 25px;
        margin-left: 100px;
    }

    .yrs h4{
        width: 80%;
        margin: auto;
        text-align: center;
        font-size: 26px;
        font-weight: 500 ;
        color: whitesmoke;
    
        padding: 10px;
        margin-top: -50px;
        margin-left: 220px;
    }



    .of-services h4{
        width: 80%;
        margin: auto;
    
        font-size: 26px;
        font-weight: 500 ;
        color: whitesmoke;
    
        padding: 10px;
    
        margin-left: 220px;

    }

    .about-us p{
        width: 45%;
        margin: auto;
    
        padding-top: 50px;
        font-size: 20px;
        font-weight: 300 ;
        color: rgb(63, 61, 61);
    
        padding: 10px;
        margin-left: 16px;
        margin-top: 20px;
    }




    .about-us p span{
        width: 45%;
        margin: auto;
    
        padding-top: 50px;
        font-size: 28px;
        font-weight: 300 ;
        color: rgb(63, 61, 61);
    
        padding: 10px;

    }

    .about-us .office-image{
        height: 110vh;
        background-image: url(websiteimages/gal1/pngtree.jpg);
        background-size: cover;
        margin-top: -630px;
        width: 50%;
        margin-left: 700px;

    }




    .after-about-us .office-image{
        height: 25vh;
        background-image: url(websiteimages/gal1/blue3.jpg);
        background-size: cover;
        margin-top: 10px;
        width: 100%;
        /* margin-left: 600px; */
    }


    .after-about-us .office-image h1{
        color: white;
        /* text-align: left; */
        font-size: 20px;
        font-weight: 200;
        margin-left: 50px;
    }

    .after-about-us .office-image h2{
        color: white;
        /* text-align: left; */
        font-size: 19px;
        font-weight: 200;
        margin-left: 50px;
        margin-top: 10px;
    }


    .after-about-us .videocontentbutton a{
        text-decoration: none;
        display: inline-block;
        color: white;


        background-color: transparent;

        font-size: 15px;
        border: 3px solid white;
        padding: 17px 50px;
        /* border-radius: 50px; */
        margin-top: -200px;
        margin-left: 900px;
        /* margin-bottom: 100px; */
    }


    .after-about-us .videocontentbutton a:hover{
        border: 1px solid rgb(56, 56, 230);
        background: rgb(56, 56, 230);
        transition: 1s;
        color: white;
    }






    /* ------------------------------HEALTH AND SAFETY ENVIRONS---------------------- */

    .safety{
        /* background-image: url(websiteimages/30883695-715b-4ff8-887e-fb056677490b.JPG); */
     
        height: 15%;
        background-size: cover;
        /* background-image: linear-gradient(rgba(238, 240, 245, 0.3),rgba(238, 240, 245, 0.3)),url(websiteimages/30883695-715b-4ff8-887e-fb056677490b.JPG); */
        margin-top: -45px;
    }

    .healthandsafety h4{
        width: 30%;
        margin: auto;
        padding-top: 50px;
        font-size: 27px;
        font-weight: 600 ;
        color: rgb(220, 220, 20);
        margin-left: 230px;
        padding: 10px;
    }

    .healthandsafety h4 span{
        width: 30%;
        margin: auto;
        padding-top: 50px;
        font-size: 27px;
        font-weight: 600 ;
        color:rgb(220, 220, 20);   
        padding: 10px;
    }

    .safety h4{
        color: white;
    }

    .health-safety-pic p{
        width: 100%;
        font-size: 25px;
        font-weight: 600 ;
        color: whitesmoke;

        
    }

    .health-safety-pic{
    
        width: 40%;
    
        /* background-image: url(websiteimages/rgb(56, 56, 230).WEBP); */
        background-position: center;
        background-size: cover;
        position: relative;
        margin-left: 90px;
        margin-top: 80px;
        border-radius: 10px;
        /* background-image: linear-gradient(rgba(4, 4, 4, 0.855),rgba(7, 81, 7, 0.3)),url(websiteimages/rgb(56, 56, 230).WEBP); */

    }

    .health-safety-pic:hover{
        box-shadow: 0 0 20px 0px rgb(119, 116, 116);
       
    }


    /* --------------------------contct us------------------------------------------------------- */


    .contactus_headerz{
        min-height: 55vh;
        width: 100%;
        background-image: url(websiteimages/gal1/SPORT\ COMPLEX.jpg);
        background-position: center;
        background-size: cover;
        position: relative;
        background-image: linear-gradient(rgba(156, 170, 143, 0.7),rgba(29, 30, 29, 0.7)),url(websiteimages/gal1/SPORT\ COMPLEX.jpg);
    
    }

    .contactus-orientation {
        background-image: url(websiteimages/gal1/whitebck.jpg);
        background-size: cover;
        height: 10%;
        
    
    }
    .contactus-orientation h3{
        font-size: 34px;
        font-weight: 200;
        color: rgb(77, 73, 134);
    
        text-align: center;

    


    }



    .contactus-orientation h2{
        font-size: 29px;
        font-weight: 100;
        color: black;
        margin-top: 20px;
        text-align: center;

    }


    .contactus-orientation p{
        font-size: 29px;
        font-weight: 20;
        color: black;
        margin-top: 10px;
        text-align: center;

    }


    .contactus-orientation p span{
        font-size:50px;
        font-weight: 20;
        color: rgb(56, 56, 230);
        margin-top: 10px;
        text-align: center;

    }






    /* ------------------------------------------------our services----------------------------------------- */
    #jobour-services .videocontentbutton a{
        text-decoration: none;
        display: inline-block;
        color: rgb(4, 4, 4);


        background-color: white;

        font-size: 15px;
        border: 1px solid rgb(56, 56, 230);
        padding: 7px 40px;
        /* border-radius: 50px; */
        margin-top: 50px;
        margin-left: 510px;
        /* margin-bottom: 100px; */
    }


    #jobour-services .videocontentbutton a:hover{
        border: 1px solid rgb(56, 56, 230);
        background: rgb(56, 56, 230);
        transition: 1s;
        color: white;
        }


    /* .videocontent{

        text-align: center;
        margin-top: -50px;


    } */
    #jobour-services{
        /* max-width: 1240px; */
        max-width: 100%;
        margin: 0 auto;
        padding: 5%;
        display: flex;
        justify-content: center;
        align-items: center;

        /* margin-top: -120px; */
        /* background-image: url(websiteimages/gal1/grey4.jpg); */
        /* background-color: red; */

        



    }


    .jobourservicesword{
        
        width: 60%;
        justify-content: space-around;
        margin-left: -150px;
        margin-top: 400px;

    

    }

    .ourservicesword h1{
        font-size: 25px;
        color: rgb(84, 80, 80);
        margin-top: -500px;
        font-weight: 200;
    }




    .ourservicesword h1 span{
        font-size: 25px;
        color: rgb(56, 56, 230);
        margin-top: 150px;
        font-weight: 600;
    }


    .ourservicesword p{
        font-size: 16px;
        color: rgb(49, 45, 45);

    }





    .ourservicesword p span{
        font-size: 20px;
        color: rgb(56, 56, 230);
        font-weight: 400;
    }





    .jobourservicewrapper{
            
        width: 100%;
        justify-content: space-around;
        margin-top: 90px;
        margin-left: -700px;
        
    }

    .serviceaaaa{
        margin-left: 210px;
        margin-top: -190px;
    }
    .serviceaaaa P{
        color: rgb(93, 90, 90);
        font-size: 14px;
    }
    .serviceaaaa h1{
        color: rgb(56, 56, 230);
    }
    .jobtry{
        width: 30%;
        margin-top: -350px;
        font-size: 20px;
        margin-left: 340px;
    }

    .jobtry h1{
        color: rgb(56, 56, 230);

    }
    .jobtry h1 span{
        color: rgb(4, 3, 3);
        /* border-bottom: 3px solid rgb(4, 3, 3); */
    }

    .jobourservicecard{
        width: 390px;
        height: 270px;
        padding: 2rem 1rem;
        background: #fff;
        position: relative;
        display: inline-block;
        align-items: flex-end;
        box-shadow: 0px 7px 10px rgba(0,0,0,0.5);
        transition: 0.5s ease-in-out;
    
        margin-top: 40px;
        margin-left: 30px;

    
    }


    /* .jobourservicecard:hover{
        transform: translateY(20px);
    } */

    .jobourservicecard:before{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5),rgb(193, 193, 193));
        z-index: 2;
        transition: 0.5s all;
        opacity: 0;
    }


    .jobourservicecard:hover:before{
        opacity: 1;
    }




    .jobourservicecard img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;

    }



    .jobourservicecard .ourserviceinfo{
        position: relative;
        z-index: 3;
        color: black;
        opacity: 0;
        transform: translateY(30px);
        transform: 0.5s all;
    
    }


    .jobourservicecard:hover .ourserviceinfo{
        opacity: 1;
        transform: translateY(0px);
    }


    .jobourservicecard .ourserviceinfo h1{
        margin: 0;
        color: rgb(4, 4, 4);
        /* color: rgb(34, 34, 189); */
        font-size: 14px;
        text-align: left;
    }



    .jobourservicecard .ourserviceinfo h1 span{
        margin: 0;
        /* color: rgb(4, 4, 4); */
        color: rgb(34, 34, 189);
        font-size: 20px;
        text-align: left;
    }





    .jobourservicecard .ourserviceinfo p{
        
        font-size: 12px;
        margin-top: 25px;
        margin-bottom: 20px;
        width: 90%;
    }




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


        /* background-color: red; */

        font-size: 12px;
        border: 1px solid rgb(56, 56, 230);
        padding: 4px 20px;
        border-radius: 15px;
        margin-top: -20px;
        /* margin-left: 510px; */
        /* margin-bottom: 100px; */
    }


    .jobourservicecard .minivideocontentbutton a:hover{
        border: 1px solid rgb(56, 56, 230);
        background: rgb(56, 56, 230);
        transition: 1s;
        color: white;
    }









    .jobourservicewrapper .seevideocontentbutton a{
        text-decoration: none;
        display: inline-block;
        color: white;


        background-color: rgb(56, 56, 230);

        font-size: 15px;
        border: 1px solid rgb(56, 56, 230);
        padding: 16px 30px;
        border-radius: 15px;
        margin-top: 50px;
        margin-left: 500px;

    }


    .jobourservicewrapper .seevideocontentbutton a:hover{
        border: 1px solid rgb(56, 56, 230);
        background: transparent;
        transition: 1s;
        color: black;
    }





    /* --------------------------RECENT JOBS------------------------------------ */

    .recent-jobs h3{

        width: 35%;
        margin: auto;
        text-align: center;
        padding-top: 50px;
        font-size: 25px;
        font-weight: 600 ;
        color: rgb(54, 54, 208);
        
        padding: 10px;
        margin-top: 50px;
        /* border-bottom: 3px solid rgb(4, 3, 3); */
    }

    .recent-jobs h3 span{

        width: 35%;
        margin: auto;
        text-align: center;
        padding-top: 50px;
        font-size: 25px;
        font-weight: 600 ;
    
        color: rgb(4, 3, 3);
        
        padding: 10px;
        /* margin-top: 350px; */
        border-bottom: 3px solid rgb(54, 54, 208);

    }

    .recent-jobs p{
        width: 90%;
        margin: auto;
    
        padding-top: 50px;
        font-size: 14px;
        font-weight: 100 ;
        color: #696969;
    
        padding: 10px;
        padding-bottom: 50px;
    }


    .recent-jobs p span{
        width: 90%;
        margin: auto;
    
        padding-top: 50px;
        font-size: 24px;
        font-weight: 100 ;
        color: rgb(54, 54, 208);
    
        padding: 10px;
        padding-bottom: 50px;
    }

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


        background-color: white;

        font-size: 15px;
        border: 1px solid rgb(56, 56, 230);
        padding: 7px 40px;
        /* border-radius: 50px; */
        margin-top: -1200px;
        margin-left: 600px;
        margin-bottom: 100px;
    }


    .recent-jobs .videocontentbutton a:hover{
        border: 1px solid rgb(56, 56, 230);
        background: rgb(56, 56, 230);
        transition: 1s;
        color: white;
    }


    /* ------------------------------------------------our services----------------------------------------- */
    #our-services .videocontentbutton a{
        text-decoration: none;
        display: inline-block;
        color: white;


        background-color: rgb(56, 56, 230);

        font-size: 15px;
        border: 1px solid rgb(56, 56, 230);
        padding: 7px 40px;
        border-radius: 15px;
        margin-top: 50px;
        margin-left: 510px;
        /* margin-bottom: 100px; */
    }


    #our-services .videocontentbutton a:hover{
        border: 1px solid rgb(56, 56, 230);
        background: transparent;
        transition: 1s;
        color: black;
    }


    /* .videocontent{

        text-align: center;
        margin-top: -50px;


    } */
    #our-services{
        /* max-width: 1240px; */
        max-width: 100%;
        margin: 0 auto;
        padding: 5%;
        display: flex;
        justify-content: center;
        align-items: center;
        /* background: linear-gradient(to bottom, rgba(236, 210, 80, 0.5),rgb(186, 142, 22)); */
        margin-top: 10px;
        /* background-image: url(websiteimages/gal1/grey4.jpg); */
        background-color: rgba(234, 234, 230, 0.5);

        



    }


    .ourservicesword{
        
        width: 60%;
        justify-content: space-around;
        margin-left: -150px;
        margin-top: 400px;

    

    }

    .ourservicesword h1{
        font-size: 25px;
        color: rgb(84, 80, 80);
        margin-top: -500px;
        font-weight: 200;
    }




    .ourservicesword h1 span{
        font-size: 25px;
        color: rgb(56, 56, 230);
        margin-top: 150px;
        font-weight: 600;
    }


    .ourservicesword p{
        font-size: 16px;
        color: rgb(49, 45, 45);

    }





    .ourservicesword p span{
        font-size: 20px;
        color: rgb(56, 56, 230);
        font-weight: 400;
    }





    .ourservicewrapper{
            
        width: 100%;
        justify-content: space-around;
        margin-top: 20px;
        margin-left: -750px;
        
    }

    .serviceaaaa{
        margin-left: 210px;
        margin-top: -190px;
    }
    .serviceaaaa P{
        color: rgb(93, 90, 90);
        font-size: 14px;
    }
    .serviceaaaa h1{
        color: rgb(56, 56, 230);
    }
    .try{
        width: 30%;
        margin-top: -850px;
        font-size: 20px;
        margin-left: 450px;
    }

    .try h1{
        color: rgb(56, 56, 230);

    }
    .try h1 span{
        color: rgb(4, 3, 3);
        border-bottom: 3px solid rgb(4, 3, 3);
    }

    .ourservicecard{
        width: 530px;
        height: 300px;
        padding: 2rem 1rem;
        background: #fff;
        position: relative;
        display: inline-block;
        align-items: flex-end;
        box-shadow: 0px 7px 10px rgba(0,0,0,0.5);
        transition: 0.5s ease-in-out;
    
        margin-top: 40px;
        margin-left: 30px;

    
    }


    /* .ourservicecard:hover{
        transform: translateY(20px);
    } */

    .ourservicecard:before{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5),rgb(193, 193, 193));
        z-index: 2;
        transition: 0.5s all;
        opacity: 0;
    }


    .ourservicecard:hover:before{
        opacity: 1;
    }




    .ourservicecard img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;

    }



    /* .ourservicecard .ourserviceinfo{
        position: relative;
        z-index: 3;
        color: black;
        opacity: 0;
        transform: translateY(30px);
        transform: 0.5s all;
    
    }


    .ourservicecard:hover .ourserviceinfo{
        opacity: 1;
        transform: translateY(0px);
    } */


    .ourservicecard .ourserviceinfo h1{
        margin: 0;
        color: rgb(4, 4, 4);
        font-size: 21px;
        text-align: center;
    }

    .ourservicecard .ourserviceinfo p{
        
        font-size: 17px;
        margin-top: 25px;
        margin-bottom: 20px;
        color: rgb(82, 81, 81);
        width: 90%;
    }


    /* ---------------------------VISION N BRIEF------------------------------ */
    .visionnbrief .see-all-articles-btn{
        display: inline-block;
        text-decoration: none;
        color: white;


        border: 1px solid blue;
        padding: 16px 30px;
        font-size: 17px;
        
        background: rgb(51, 95, 184);
        position: relative;
        cursor: pointer;
        border-radius: 15px;
        margin-top: 340px;
        margin-left: -1050px;


    }


    .see-all-articles-btn:hover{
        border: 1px solid rgb(51, 95, 184);
        background: transparent;
        font-size: 15px;
        transition: 1s;
        color: black;
    }


    #vnb {
        background-color: white;
        /* background-image: url(websiteimages/gal1/142195-blue-and-white-simple-background.jpg); */
        background-size: cover;
        margin-top: 320px;
        height: 100vh;



    }

    .visionnbrief{
        width: 80%;
        margin: auto;
        text-align: center;
        padding-top: 50px;
        font-size: 15px;
        color: black;
        padding: 10px;
        padding-bottom: 150px;
        margin-top: -320px;
        /* background-color: red; */
    }


    .vision-brief .vision{
        /* margin-top: 1%; */
        /* display: flex; */
        /* width: 100%; */
        /* background: red; */
        /* background-image: url(websiteimages/gal1/d.jpg); */
        /* background-size: cover; */
        height: 67vh;
        width: 100px;
        /* background-image: linear-gradient(rgba(46, 49, 59, 0.7),rgba(54, 57, 71, 0.7)),url(websiteimages/74717cc8-306b-44a1-8bbc-13daab4b73cd.JPG); */
        /* background-image: linear-gradient(rgba(220, 235, 11, 0.25),rgb(218, 216, 1110)),url(websiteimages/74717cc8-306b-44a1-8bbc-13daab4b73cd.JPG); */
        margin-top: -300px;
        margin-left: 550px;
        display: flex;
        width: 50%;
        background-size: cover;
    
        display: inline-block;
        flex-basis: 31%;
        border-radius: 10px;
        margin-bottom: 5px;
        padding: 20px 12px;
        box-sizing: border-box;
        transition: 0.5s;

    }



    .vision h3{
        text-align: center;

        font-size: 60px;
        font-weight: 600;
        margin: 10px 0;
        color: grey;
        margin-top: 100px;
    }



    .vision-brief P{
        text-align: left;
        font-size: 20px;
        margin: 10px 0;
        color: rgb(119, 117, 117);
        margin-left: -100px;
        margin-top:  -300px;
        /* margin-bottom: -300px; */

        width: 60%;
    }


    .vision-brief P span{
        font-size: 46px;
        color: rgb(54, 54, 208);
        /* margin-top:  -400px; */
    }






    /* ------------------------------------------ team------------------------------------ */



    .dedicated-team-header h3{
        width: 27%;

    
        font-size: 25px;
        font-weight: 600 ;
        color: rgb(54, 54, 208);
        padding: 10px;
        margin-top: 100px;
        margin-bottom: 30px;
        /* border-bottom: 3px solid rgb(4, 3, 3); */
    

    }




    .jefcon-team{
        /* background-image: url(websiteimages/team3.jpeg); */
        background-size: cover;
        margin-top: -150px;
    }


    .dedicated-team-header h3 span{
        width: 27%;
        font-size: 25px;
        font-weight: 600 ;
        color: rgb(54, 54, 208);
        padding: 10px;
        margin-top: 100px;
        margin-bottom: 30px;
        /* border-bottom: 3px solid rgb(4, 3, 3); */
    


    }

    .slide-content{
        margin: 0 40px;
        margin-bottom: 30px;
    
    

    }


    .slide-container{
        max-width: 1120px;
        width: 40%;
        padding: 40px 0;
        margin-bottom: 100px;



    }

    .card{
        width: 320px;
        border-radius: 25px;
        background-color: white;
        border: 1px dashed rgb(112, 126, 112);


    }
    .image-content, .card-content{
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10px 14px;

    }

    .image-content{
        row-gap: 5px;
        position: relative;
        padding: 25px 0;

    }


    .overlay{
        position: absolute;
        left: 0;
        top: 0;
        height: 90%;
        width: 100%;
        background-color: rgb(54, 54, 208);

        border-radius: 25px 25px 0 25px;
    }

    .overlay::before, .overlay::after{
        content: '';
        position: absolute;
        right: 0;
        bottom: -40px;
        height: 40px;
        width: 40px;
        background-color: rgb(54, 54, 208);
    }

    .overlay::after{
        border-radius: 0 25px 0 0;
        background-color: white;
    }
    .card-image{
        position: relative;
        height: 250px;
        width: 250px;
        
        border-radius: 50%;
        background: white;
        padding: 3px;
    }
    .card-image .card-img{
        height: 100%;
        width: 100%;
        object-fit: cover;
        border-radius: 50%;
        border: 4px solid white;
    }

    .name{
        font-size: 21px;
        font-weight: 500;
        color: black;

    
    }


    .description{
        font-size: 28px;
        font-weight: 600;

        color: rgb(54, 54, 208);
        text-align: center;
    }


    .button{
        border: none;
        font-size: 16px;
        color: black;
        padding: 8px 16px;
        background-color: rgb(54, 54, 208);
        border-radius: 6px;
        margin: 14px;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .button:hover{
        background: wheat;
    }

    .jefcon-team .videocontentbutton a{
        text-decoration: none;
        display: inline-block;
        color: white;


        background-color: rgb(56, 56, 230);

        font-size: 15px;
        border: 1px solid rgb(56, 56, 230);
        padding: 14px 30px;
        border-radius: 15px;
        margin-top: -1000px;
        margin-left: 650px;
        margin-bottom: 100px;
    }


    .jefcon-team .videocontentbutton a:hover{
        border: 1px solid rgb(56, 56, 230);
        background: transparent;
        transition: 1s;
        color: black;
    }







}
/* .vision:hover{
    box-shadow: 0 0 20px 0px black;
} */


























































































































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

    }


    .extra-colorzz{
        background-color: white;
        height: 4vh;
    
    }


    /* ----------Hero---------- */
    #hero{
        /* background-image: url(images/lionel-messi-sport-footballers-wallpaper-5450a0bae1d6b8ca376c0ee9bfeaed9b.jpg); */
        /* background-image: url(images/soccer-lionel-messi-argentinian-wallpaper-3060d5b96f06ee23f8df87c65be66498.jpg); */
        /* background-image: url(images/lionel-messi-fcb-barcelona-fc-barcelona-wallpaper-preview.jpg); */
        /* background-image: url(images/lionel-messi-soccer-football-wallpaper-preview.jpg); */
        /* background-image: url(images/football-club-form-player-wallpaper-preview.jpg); */
        /* background-image: url(images/soccer-paulo-dybala-argentinian-juventus-f-c-wallpaper-preview.jpg); */
        /* background-image: url(images/football-the-best-players-2016-soccer-lionel-messi-wallpaper-8816bdf880a04c08007c212ea8f2e49a.jpg); */
        /* background-image: url(websiteimages/gal1/SPORT\ COMPLEX.jpg); */
        /* background-image: url(images/action-art-artistic-athletic-d9ac803715075f22cde03edf1bff49bb.jpg); */
        /* background-image: url(images/soccer-kylian-mbappe-french-world-cup-2018-wallpaper-f8268caa6facb7992eb0c982f2590be0.jpg); */
        /* background-image: url(images/64a5c3ac757e775eef042fc7_withmeta.jpg); */
        /* background-image: url(images/depositphotos_165317552-stock-photo-cheerful-delivery-man-happy-young.jpg); */
        /* background-image: url(images/landingimage.jpeg); */
        /* background-image: url(images/m.jpeg), linear-gradient(rgba(4,9,30,0.75),rgba(26, 29, 42, 0.55)); */
        background-image: linear-gradient(rgba(4,9,30,0.85),rgba(26, 29, 42, 0.75)),url(websiteimages/gal1/SPORT\ COMPLEX.jpg);

    
    

        height: 110vh;
        width: 100%;
        background-size: cover;
        background-position: top 25% left 1px;
        /* padding: 0 80px; */
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;
        /* background-color: linear-gradient(to bottom, rgba(167, 31, 31, 0.5),rgb(56, 3, 3)); */
    }

    #hero h4{
        padding-bottom: 15px;
        margin-left: 500px;
        color: white;
        font-size: 90px;
        margin-top: -100px;
        text-align: center;
    }



    #hero h4 span{
        /* padding-bottom: 15px;
        margin-left: 100px; */
        color: rgb(56, 56, 230);
        font-size: 90px;
        /* margin-top: -100px;
        text-align: center; */
    }
    #hero h1{
        color: purple;
        margin-left: 200px;
    }

    #hero h2{
        color: white;
        margin-left: 280px;
        text-align: center;
        font-size: 30px;
    }

    #hero p{
        /* color: black; */
        margin-left: 600px;
    }
    #hero button{
        background-image: url(images/skull-graffiti-background-skull-graffiti-wallpaper-skull-graffiti-pattern-graffiti-background-graffiti-art-graffiti-wallpaper-ai-generative-photo.jpg);
        /* background-image: url(images/images.jpeg); */
        background-color: transparent;
        color: white;
        font-size: 30px;
        font-weight: 700;
        border-radius: 10px;
        border: 0;
        padding: 14px 80px 14px 65px;
        background-repeat: no-repeat;
        cursor: pointer;

    }



    #hero a{
        text-decoration: none;
        display: inline-block;
        color: white;
    
        background-color: rgb(56, 56, 230);
    
        font-size: 36px;
        border: 3px solid rgb(56, 56, 230);

        padding: 24px 60px;
        border-radius: 15px;
        margin-left: 750px;

        margin-top: 20px;
    }

    #hero a:hover{
        border: 1px solid rgb(56, 56, 230);
        background: rgb(64, 62, 62);
        transition: 1s;
        color: white;
    }

    /* ----------------------------video header------------------------- */

    #videoheader{
        width: 100%;
        height: 100vh;

        position: relative;
        padding: 0 5%;
        display: flex;
        align-items: center;
        justify-content: center;
    

    }

    .videocontent{

        text-align: center;
        margin-top: -100px;


    }

    .videocontent h1{
        font-size: 100px;

        /* color: rgb(24, 41, 24); */
        /* color: wheat; */
    
    
        font-weight: 600;
    }

    .videocontent a{
        text-decoration: none;
        display: inline-block;
        /* color: rgb(29, 29, 198); */
    
        /* background-color: rgb(56, 56, 230); */
        /* background-color: rgb(241, 241, 35); */
    
        font-size: 34px;
        /* border: 3px solid rgb(241, 241, 35); */
        padding: 14px 70px;
        border-radius: 50px;
        margin-top: 20px;
    }

    .back-video{
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: -1;
        background-size: cover;
    }

    video{
        height: 140vh;
        width: 2600px;
    }

    /* ------------------------------------------------------ORIENTATION------------------------------------- */


    .orientation {
        background-image: url(websiteimages/oientation.JPG);
        background-size: cover;
        height: 10%;
       
    }
    .orientation h3{
        font-size: 46px;
        font-weight: 200;
        color: rgb(77, 73, 134);
        margin-top: 5px;
        text-align: center;

    }



    .orientation h2{
        font-size: 36px;
        font-weight: 100;
        color: black;
        margin-top: 10px;
        text-align: center;

    }


    .orientation h2 span{
        font-size: 36px;
        font-weight: 100;
        color: rgb(56, 56, 230);
        margin-top: 10px;
        text-align: center;

    }

    .orientation p{
        font-size: 36px;
        font-weight: 20;
        color: black;
        margin-top: 10px;
        text-align: center;

    }
    
    /* ----------- ABOUT US------------------------------------------------------------------------------------------------ */

    /* #about-us{
        background-color: white;
    } */
    .about-us h3{
        width: 100%;
        font-size: 45px;
        font-weight: 600 ;
        color: rgb(4, 3, 3);
        padding: 10px;
        margin-top: 300px;
        /* margin-bottom: 30px; */
        text-align: center;
        /* border-bottom: 3px solid rgb(4, 3, 3); */
        /* border-bottom: 3px solid rgb(54, 54, 208); */
        margin-left: -650px;

    }



    .about-us h3 span{
        width: 100%;
        font-size: 45px;
        font-weight: 600 ;
        color: rgb(54, 54, 208);
        padding: 10px;
        /* margin-top: 100px; */
        /* margin-bottom: 30px; */
        /* border-bottom: 3px solid rgb(54, 54, 208); */
        text-align: center;


    }



    .about-us{
        /* background-image: url(websiteimages/gal1/eg.png); */
        background-size: cover;
        /* background-image: linear-gradient(rgba(4,9,30,0.25),rgba(4,9,30,0.25 )),url(websiteimages/gal1/eliteg.png); */

        height: 100vh;

    }

    .yr12-pic {
        min-height: 15vh;
    
        width: 10%;
        background-image: url(websiteimages/12yrs.png);
    
        background-position: center;
        background-size: cover;
        position: relative;

        margin-left: 44%;
        
        

    }


    .about-us h4{
        width: 80%;
        margin: auto;
        text-align: center;
        font-size: 26px;
        font-weight: 500 ;
        color: whitesmoke;
    
        padding: 10px;
        padding-top: 25px;
        margin-left: 100px;
    }

    .yrs h4{
        width: 80%;
        margin: auto;
        text-align: center;
        font-size: 26px;
        font-weight: 500 ;
        color: whitesmoke;
    
        padding: 10px;
        margin-top: -50px;
        margin-left: 220px;
    }



    .of-services h4{
        width: 80%;
        margin: auto;
    
        font-size: 26px;
        font-weight: 500 ;
        color: whitesmoke;
    
        padding: 10px;
    
        margin-left: 220px;

    }

    .about-us p{
        width: 45%;
        margin: auto;
    
        padding-top: 50px;
        font-size: 26px;
        font-weight: 300 ;
        color: rgb(63, 61, 61);
    
        padding: 10px;
        margin-left: 16px;
        margin-top: 40px;
    }




    .about-us p span{
        width: 45%;
        margin: auto;
    
        padding-top: 50px;
        font-size: 32px;
        font-weight: 300 ;
        color: rgb(63, 61, 61);
    
        padding: 10px;

    }

    .about-us .office-image{
        height: 100vh;
        background-image: url(websiteimages/gal1/pngtree.jpg);
        background-size: cover;
        margin-top: -600px;
        width: 50%;
        margin-left: 900px;

    }


    .after-about-us .office-image{
        height: 25vh;
        background-image: url(websiteimages/gal1/blue3.jpg);
        background-size: cover;
        margin-top: 10px;
        width: 100%;
        /* margin-left: 600px; */
    }


    .after-about-us .office-image h1{
        color: white;
        /* text-align: left; */
        font-size: 30px;
        font-weight: 200;
        margin-left: 50px;
    }

    .after-about-us .office-image h2{
        color: white;
        /* text-align: left; */
        font-size: 30px;
        font-weight: 200;
        margin-left: 50px;
        margin-top: 10px;
    }


    .after-about-us .videocontentbutton a{
        text-decoration: none;
        display: inline-block;
        color: white;


        background-color: transparent;

        font-size: 30px;
        border: 3px solid white;
        padding: 34px 50px;
        /* border-radius: 50px; */
        margin-top: -200px;
        margin-left: 1300px;
        /* margin-bottom: 100px; */
    }


    .after-about-us .videocontentbutton a:hover{
        border: 1px solid rgb(56, 56, 230);
        background: rgb(56, 56, 230);
        transition: 1s;
        color: white;
    }
    
    /* ------------------------------------------------our services----------------------------------------- */
    #our-services .videocontentbutton a{
        text-decoration: none;
        display: inline-block;
        color: white;


        background-color: rgb(56, 56, 230);

        font-size: 22px;
        border: 1px solid rgb(56, 56, 230);
        padding: 25px 70px;
        border-radius: 15px;
        margin-top: 50px;
        margin-left: 710px;
        /* margin-bottom: 100px; */
    }


    #our-services .videocontentbutton a:hover{
        border: 1px solid rgb(56, 56, 230);
        background: transparent;
        transition: 1s;
        color: black;
    }


    /* .videocontent{

        text-align: center;
        margin-top: -50px;


    } */
    #our-services{
        /* max-width: 1240px; */
        max-width: 100%;
        margin: 0 auto;
        padding: 5%;
        display: flex;
        justify-content: center;
        align-items: center;
        /* background: linear-gradient(to bottom, rgba(236, 210, 80, 0.5),rgb(186, 142, 22)); */
        margin-top: 10px;
        /* background-image: url(websiteimages/gal1/grey4.jpg); */
        background-color: rgba(234, 234, 230, 0.5);

        



    }


    .ourservicesword{
        
        width: 60%;
        justify-content: space-around;
        margin-left: -150px;
        margin-top: 400px;

    

    }

    .ourservicesword h1{
        font-size: 25px;
        color: rgb(84, 80, 80);
        margin-top: -500px;
        font-weight: 200;
    }




    .ourservicesword h1 span{
        font-size: 25px;
        color: rgb(56, 56, 230);
        margin-top: 150px;
        font-weight: 600;
    }


    .ourservicesword p{
        font-size: 16px;
        color: rgb(49, 45, 45);

    }





    .ourservicesword p span{
        font-size: 20px;
        color: rgb(56, 56, 230);
        font-weight: 400;
    }





    .ourservicewrapper{
            
        width: 100%;
        justify-content: space-around;
        margin-top: 20px;
        margin-left: -1350px;
        
    }

    .serviceaaaa{
        margin-left: 210px;
        margin-top: -190px;
    }
    .serviceaaaa P{
        color: rgb(93, 90, 90);
        font-size: 14px;
    }
    .serviceaaaa h1{
        color: rgb(56, 56, 230);
    }
    .try{
        width: 40%;
        margin-top: -1050px;
        font-size: 30px;
        margin-left: 750px;
    }

    .try h1{
        color: rgb(56, 56, 230);

    }
    .try h1 span{
        color: rgb(4, 3, 3);
        border-bottom: 3px solid rgb(4, 3, 3);
    }

    .ourservicecard{
        width: 730px;
        height: 400px;
        padding: 2rem 1rem;
        background: #fff;
        position: relative;
        display: inline-block;
        align-items: flex-end;
        box-shadow: 0px 7px 10px rgba(0,0,0,0.5);
        transition: 0.5s ease-in-out;
    
        margin-top: 40px;
        margin-left: 30px;

    
    }


    /* .ourservicecard:hover{
        transform: translateY(20px);
    } */

    .ourservicecard:before{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5),rgb(193, 193, 193));
        z-index: 2;
        transition: 0.5s all;
        opacity: 0;
    }


    .ourservicecard:hover:before{
        opacity: 1;
    }




    .ourservicecard img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;

    }



    /* .ourservicecard .ourserviceinfo{
        position: relative;
        z-index: 3;
        color: black;
        opacity: 0;
        transform: translateY(30px);
        transform: 0.5s all;
    
    }


    .ourservicecard:hover .ourserviceinfo{
        opacity: 1;
        transform: translateY(0px);
    } */


    .ourservicecard .ourserviceinfo h1{
        margin: 0;
        color: rgb(4, 4, 4);
        font-size: 26px;
        text-align: center;
    }

    .ourservicecard .ourserviceinfo p{
        
        font-size: 19px;
        margin-top: 25px;
        margin-bottom: 20px;
        color: rgb(82, 81, 81);
        width: 90%;
    }
/* ------------------------------------------------------------------------- */
   
    .headerz{
        min-height: 23vh;
        width: 100%;
        background-image: url(websiteimages/IMG_8513.JPG);
        background-position: center;
        background-size: cover;
        position: relative;
    
    }
    
 
    /* ---------------------------VISION N BRIEF------------------------------ */
    /* ---------------------------VISION N BRIEF------------------------------ */
    .visionnbrief .see-all-articles-btn{
        display: inline-block;
        text-decoration: none;
        color: black;


        border: 1px solid blue;
        padding: 16px 40px;
        font-size: 18px;
        
        background: transparent;
        position: relative;
        cursor: pointer;
        /* border-radius: 15px; */
        margin-top: 640px;
        margin-left: -1050px;

    }


    .see-all-articles-btn:hover{
        border: 1px solid wheat;
        background: rgb(51, 95, 184);
        font-size: 20px;
        transition: 1s;
    }


    #vnb {
        background-color: white;
        /* background-image: url(websiteimages/gal1/142195-blue-and-white-simple-background.jpg); */
        background-size: cover;
        margin-top: 320px;



    }

    .visionnbrief{
        width: 80%;
        margin: auto;
        text-align: center;
        padding-top: 50px;
        font-size: 15px;
        color: black;
        padding: 10px;
        padding-bottom: 150px;
        margin-top: -450px;
        background-color: white;
    }


    .vision-brief .vision{
        /* margin-top: 1%; */
        /* display: flex; */
        /* width: 100%; */
        background: white;
        /* background-image: url(websiteimages/gal1/d.jpg); */
        /* background-size: cover; */
        height: 67vh;
        width: 100px;
        /* background-image: linear-gradient(rgba(46, 49, 59, 0.7),rgba(54, 57, 71, 0.7)),url(websiteimages/74717cc8-306b-44a1-8bbc-13daab4b73cd.JPG); */
        /* background-image: linear-gradient(rgba(220, 235, 11, 0.25),rgb(218, 216, 1110)),url(websiteimages/74717cc8-306b-44a1-8bbc-13daab4b73cd.JPG); */
        margin-top: -450px;
        margin-left: 550px;
        display: flex;
        width: 50%;
        background-size: cover;
    
        display: inline-block;
        flex-basis: 31%;
        border-radius: 10px;
        margin-bottom: 5px;
        padding: 20px 12px;
        box-sizing: border-box;
        transition: 0.5s;

    }



    .vision h3{
        text-align: center;

        font-size: 60px;
        font-weight: 600;
        margin: 10px 0;
        color: grey;
        margin-top: 100px;
    }



    .vision-brief P{
        text-align: left;
        font-size: 23px;
        margin: 10px 0;
        color: rgb(119, 117, 117);
        margin-left: -100px;
        margin-top:  -500px;
        /* margin-bottom: -300px; */

        width: 40%;
    }


    .vision-brief P span{
        font-size: 46px;
        color: rgb(54, 54, 208);
        /* margin-top:  -400px; */
    }

    /* .vision:hover{
        box-shadow: 0 0 20px 0px black;
    } */

/* ------------------------------HEALTH AND SAFETY ENVIRONS---------------------- */

    .safety{
        /* background-image: url(websiteimages/30883695-715b-4ff8-887e-fb056677490b.JPG); */
      
        height: 10%;
        background-size: cover;
        /* background-image: linear-gradient(rgba(238, 240, 245, 0.3),rgba(238, 240, 245, 0.3)),url(websiteimages/30883695-715b-4ff8-887e-fb056677490b.JPG); */
        margin-top: -100PX;
    }

    .healthandsafety h4{
        width: 30%;
        margin: auto;
        padding-top: 50px;
        font-size: 37px;
        font-weight: 600 ;
        color: rgb(220, 220, 20);
        margin-left: 300px;
        padding: 10px;
    }

    .healthandsafety h4 span{
        width: 30%;
        margin: auto;
        padding-top: 50px;
        font-size: 37px;
        font-weight: 600 ;
        color:rgb(220, 220, 20);   
        padding: 10px;
    }

    .safety h4{
        color: white;
    }

    .health-safety-pic p{
        width: 100%;
        font-size: 31px;
        font-weight: 600 ;
        color: whitesmoke;

        
    }

    .health-safety-pic{
        min-height: 49vh;
        width: 45%;
    
        /* background-image: url(websiteimages/rgb(56, 56, 230).WEBP); */
        background-position: center;
        background-size: cover;
        position: relative;
        margin-left: 100px;
        margin-top: 80px;
        border-radius: 10px;
        /* background-image: linear-gradient(rgba(4, 4, 4, 0.855),rgba(7, 81, 7, 0.3)),url(websiteimages/rgb(56, 56, 230).WEBP); */

    }

    .health-safety-pic:hover{
        box-shadow: 0 0 20px 0px rgb(119, 116, 116);
       
    }


    

    /* ------------------------------------------------our services----------------------------------------- */
    #jobour-services .videocontentbutton a{
        text-decoration: none;
        display: inline-block;
        color: rgb(4, 4, 4);


        background-color: white;

        font-size: 15px;
        border: 1px solid rgb(56, 56, 230);
        padding: 7px 40px;
        /* border-radius: 50px; */
        margin-top: 50px;
        margin-left: 510px;
        /* margin-bottom: 100px; */
    }


    #jobour-services .videocontentbutton a:hover{
        border: 1px solid rgb(56, 56, 230);
        background: rgb(56, 56, 230);
        transition: 1s;
        color: white;
        }


    /* .videocontent{

        text-align: center;
        margin-top: -50px;


    } */
    #jobour-services{
        /* max-width: 1240px; */
        max-width: 100%;
        margin: 0 auto;
        padding: 5%;
        display: flex;
        justify-content: center;
        align-items: center;

        /* margin-top: -120px; */
        /* background-image: url(websiteimages/gal1/grey4.jpg); */
        /* background-color: red; */

        



    }


    .jobourservicesword{
        
        width: 60%;
        justify-content: space-around;
        margin-left: -150px;
        margin-top: 400px;

    

    }

    .ourservicesword h1{
        font-size: 25px;
        color: rgb(84, 80, 80);
        margin-top: -500px;
        font-weight: 200;
    }




    .ourservicesword h1 span{
        font-size: 25px;
        color: rgb(56, 56, 230);
        margin-top: 150px;
        font-weight: 600;
    }


    .ourservicesword p{
        font-size: 16px;
        color: rgb(49, 45, 45);

    }





    .ourservicesword p span{
        font-size: 20px;
        color: rgb(56, 56, 230);
        font-weight: 400;
    }





    .jobourservicewrapper{
            
        width: 100%;
        justify-content: space-around;
        margin-top: 90px;
        margin-left: -1200px;
        
    }

    .serviceaaaa{
        margin-left: 210px;
        margin-top: -190px;
    }
    .serviceaaaa P{
        color: rgb(93, 90, 90);
        font-size: 14px;
    }
    .serviceaaaa h1{
        color: rgb(56, 56, 230);
    }
    .jobtry{
        width: 30%;
        margin-top: -550px;
        font-size: 30px;
        margin-left: 650px;
    }

    .jobtry h1{
        color: rgb(56, 56, 230);

    }
    .jobtry h1 span{
        color: rgb(4, 3, 3);
        /* border-bottom: 3px solid rgb(4, 3, 3); */
    }

    .jobourservicecard{
        width: 540px;
        height: 370px;
        padding: 2rem 1rem;
        background: #fff;
        position: relative;
        display: inline-block;
        align-items: flex-end;
        box-shadow: 0px 7px 10px rgba(0,0,0,0.5);
        transition: 0.5s ease-in-out;
    
        margin-top: 40px;
        margin-left: 30px;

    
    }


    /* .jobourservicecard:hover{
        transform: translateY(20px);
    } */

    .jobourservicecard:before{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5),rgb(193, 193, 193));
        z-index: 2;
        transition: 0.5s all;
        opacity: 0;
    }


    .jobourservicecard:hover:before{
        opacity: 1;
    }




    .jobourservicecard img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;

    }



    .jobourservicecard .ourserviceinfo{
        position: relative;
        z-index: 3;
        color: black;
        opacity: 0;
        transform: translateY(30px);
        transform: 0.5s all;
    
    }


    .jobourservicecard:hover .ourserviceinfo{
        opacity: 1;
        transform: translateY(0px);
    }


    .jobourservicecard .ourserviceinfo h1{
        margin: 0;
        color: rgb(4, 4, 4);
        /* color: rgb(34, 34, 189); */
        font-size: 24px;
        text-align: left;
    }



    .jobourservicecard .ourserviceinfo h1 span{
        margin: 0;
        /* color: rgb(4, 4, 4); */
        color: rgb(34, 34, 189);
        font-size: 30px;
        text-align: left;
    }





    .jobourservicecard .ourserviceinfo p{
        
        font-size: 12px;
        margin-top: 25px;
        margin-bottom: 20px;
        width: 90%;
    }




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


        /* background-color: red; */

        font-size: 20px;
        border: 1px solid rgb(56, 56, 230);
        padding: 12px 30px;
        border-radius: 15px;
        margin-top: -20px;
        /* margin-left: 510px; */
        /* margin-bottom: 100px; */
    }


    .jobourservicecard .minivideocontentbutton a:hover{
        border: 1px solid rgb(56, 56, 230);
        background: rgb(56, 56, 230);
        transition: 1s;
        color: white;
    }









    .jobourservicewrapper .seevideocontentbutton a{
        text-decoration: none;
        display: inline-block;
        color: white;


        background-color: rgb(56, 56, 230);

        font-size: 26px;
        border: 1px solid rgb(56, 56, 230);
        padding: 22px 30px;
        border-radius: 15px;
        margin-top: 50px;
        margin-left: 750px;

    }


    .jobourservicewrapper .seevideocontentbutton a:hover{
        border: 1px solid rgb(56, 56, 230);
        background: transparent;
        transition: 1s;
        color: black;
    }





    /* --------------------------RECENT JOBS------------------------------------ */

    .recent-jobs h3{

        width: 30%;
        margin: auto;
        text-align: center;
        padding-top: 50px;
        font-size: 45px;
        font-weight: 600 ;
        /* color: rgb(54, 54, 208); */
        
        padding: 10px;
        margin-top: 50px;
    }

    .recent-jobs h3 span{

        width: 80%;
        margin: auto;
        text-align: center;
        padding-top: 50px;
        font-size: 45px;
        font-weight: 600 ;
        /* color: rgb(220, 220, 20); */
        
        padding: 10px;
        margin-top: 350px;

    }

    .recent-jobs p{
        width: 90%;
        margin: auto;
    
        padding-top: 50px;
        font-size: 30px;
        font-weight: 100 ;
        /* color: #696969; */
    
        padding: 10px;
        padding-bottom: 50px;
    }

    .recent-jobs p span{ 
        font-size: 40px;
        /* color: rgb(54, 54, 208); */
    }

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


        background-color: white;

        font-size: 19px;
        border: 1px solid rgb(56, 56, 230);
        padding: 14px 60px;
        /* border-radius: 50px; */
        margin-top: -1200px;
        margin-left: 800px;
        margin-bottom: 100px;
    }


    .recent-jobs .videocontentbutton a:hover{
        border: 1px solid rgb(56, 56, 230);
        background: rgb(56, 56, 230);
        transition: 1s;
        color: white;
        }

    

    /* ---------------------------------TOP CLIENTS------------------------------------ */
    .thisimages{
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 400px;
        background-color: white;
    }
    
    
    
    .thisimages div{
        height: 350px;
        width: 200px;
        margin: 60px;
    }
    
    
    
    .clients h3{
    
        width: 20%;
        margin: auto;
        padding-top: 50px;
        font-size: 65px;
        font-weight: 600 ;
        /* color: rgb(54, 54, 208); */
        margin-left: 20px;
        
        padding: 10px;
        /* border-bottom:3px solid rgb(220, 220, 20); */
    }
    
    .clients h3 span{
    
        width: 20%;
        margin: auto;
        padding-top: 50px;
        font-size: 65px;
        font-weight: 600 ;
        /* color: rgb(54, 54, 208); */
        
        padding: 10px;
        margin-top: 350px;
        /* border-bottom: 3px solid rgb(220, 220, 20); */
    
    }
    
    
    
    .clients p{
    
        width: 80%;
        margin: auto;
        text-align: center;
        padding-top: 50px;
        font-size: 24px;
        font-weight: 60 ;
        /* color: grey; */
        
        padding: 10px;
    }
    
    
    .delta-govt h2{
        color: darkgrey;
        text-align: center;
        font-size: 40px;
        margin-left: -72%;
        margin-bottom: 100px;
    
    }
    
    
    .dtsg-pic{
      
        height: 10%;
        width: 10%;
        background-image: url(websiteimages/deltalogo.png);
        background-position: center;
        background-size: cover;
        position: relative;
        margin-top: 1%;
        margin-left: 5%;
    
        
        
    
    }
    .total-pic{
       
        height: 10%;
        width: 15%;
        background-image: url(websiteimages/total.PNG);
        background-position: center;
        background-size: cover;
        position: relative;
        margin-top: 5%;
        margin-left: 45%;    
    
    }
    
    .total p{
    
        width: 80%;
        margin: auto;
        text-align: center;
        padding-top: 50px;
        font-size: 24px;
        font-weight: 60 ;
        color: grey;
        padding: 10px;
    }
    
    .initiatesplc-pic{
       
        height: 10%;
        width: 60%;
        background-image: url(websiteimages/the-initiates.PNG);
        background-position: center;
        background-size: cover;
        position: relative;
        margin-top: 5%;
        margin-left:20%;    
    
    }
    
    .initiatesplc p{
    
        width: 80%;
        margin: auto;
        text-align: center;
        padding-top: 50px;
        font-size: 24px;
        font-weight: 60 ;
        color: grey;
        padding: 10px;
    }
    




    /* -----------------------------------------------------------------------OFFICE IMAGE-------------------------------------------------- */
    .office-image{
        height: 110vh;
        background-image: url(websiteimages/16e761bc-2964-4244-882c-0a801bd31c5b.JPG);
        background-size: cover;
        margin-top: 40px;
    }
    /* ------------------------------------------BLOG AND LATEST NEWS----------------------------- */



    .recent-blog-header h3{
      

        
        font-size: 35px;
        font-weight: 600 ;
        color: rgb(56, 56, 230);
        
        padding: 10px;
        margin-top: 10px;


    }

    .recent-blog-header h3 span{


        font-size: 35px;
        font-weight: 600 ;
        color: black;
        
        padding: 10px;
        margin-top: 10px;



    }


    .recent-blog-header p{


        font-size: 25px;

        color: black;
        
        padding: 10px;
        margin-top: 10px;


    }



    .a {
        max-width: 12000px;
        width: 70%;
        max-height: 20px;
        padding-bottom: 350px;
       
        
       

    }


    .b{
        position: relative;

    }
    .b .slide-button{
        position: absolute;
        top: 50%;
        height: 50px;
        width: 50px;
        color: wheat;
        border: none;
        outline: none;
        background: rgb(56, 56, 230);
        font-size: 2.2rem;
        cursor: pointer;
        border-radius: 50%;
        transform: translateY(-50%);
    }


    .b .slide-button:hover{
        background: black;
        color: rgb(56, 56, 230);
    }
    .b .slide-button#prev-slide{
        left: -20px;
        display: none;

    }    
    .b .slide-button#next-slide{
        right: -20px;

    }










    .d{
        width: 250px;
        background-color: white;
        border: 1px solid rgb(56, 56, 230);





    }


    .f{
        background-color: white;
        
        font-size: 16px;

        height: 15vh;
        padding-top: 20px;

    }

    .f span{
        background-color: rgb(78, 175, 78);
        font-size: 20px;
        color: whitesmoke;
        border-radius: 5px;
    }
    .f p{

        color: grey;


    }
    .f .g{
        color: black;
        font-size: 21px;

    }

    .e{
        width: 100%;
        height: auto;

    }

    .e img{

        max-height: 20vh;
        width: 245px;
    }


    .b .c{
        display: grid;
        gap: 18px;

        overflow-x: auto;

        grid-template-columns: repeat(10,1fr);

    }

    .b .c::-webkit-scrollbar  {
        display: none;
    }



    .a .slider-scrollbar{
        height: 24px;
        width: 100%;

        display: flex;
        align-items: center;
    }

    .slider-scrollbar .scrollbar-track{
        height: 2px;
        width: 100%;
        background: black;
        position: relative;
        border-radius: 4px;
    }

    .slider-scrollbar:hover .scrollbar-track{
        height: 4px;
    }

    .slider-scrollbar .scrollbar-thumb{
        position: absolute;
        height: 100%;
        width: 50%;
        background: rgb(56, 56, 230)yellow;
        border-radius: inherit;
        cursor: grab;
    }
    .slider-scrollbar .scrollbar-thumb:active{
        cursor: grabbing;
        height: 8px;
        top: -2px;
    }
    .slider-scrollbar .scrollbar-thumb::after{
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -10px;
        bottom: -10px;
    }

    
    /* -------------------CONTACT US PAGE------------------------------------------------------------ */




    #contact-details{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }


    #contact-details .details{
        width: 40%;
    }
    #contact-details .details span,
    #form-details form span{
        font-size: 12px;
    }

    #contact-details .details h2,
    #form-details form h2{
        font-size: 26px;
        line-height: 35px;
        padding: 20px 0;
    }

    #contact-details .details h3{
        font-size: 16px;
        padding-bottom: 15px;

    }

    #contact-details .details li{
        list-style: none;
        display: flex;
        padding: 10px 0;
    }


    #contact-details .details li i{
        font-size: 24px;
        padding-right: 22px;
    }

    #contact-details .details li p{
        margin: 0;
        font-size: 14px;
    }

    #contact-details .map{
        width: 100%;
        height: 100vh;
    }

    #contact-details .map iframe{
        width: 100%;
        height: 100%;
    }



    #form-details{
        display: flex;
        justify-content: space-between;
        padding: 80px;
        margin: 30px;
        border: 1px solid wheat;

    }


    #form-details form{
        width: 65%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }


    #form-details form input,
    #form-details form textarea{
        width: 100%;
        padding: 12px 15px;
        outline: none;
        margin-bottom: 20px;
        border: 1px solid pink;
    }


    #form-details form button{
        background-color: pink;
        color: black;
        height: 7vh;
    }


    #form-details .people div{
        display: flex;
        align-items: flex-start;
        padding-bottom: 25px;
        padding-top: 25px;
    }


    #form-details .people div img{
        width: 65px;
        height: 65px;
        object-fit: cover;
        margin-right: 15px;
    }

    #form-details .people div p{
        margin: 0;
        font-size: 13px;
        line-height: 25px;
    }
    #form-details .people div p span{
        display: block;
        font-size: 16px;
        font-weight: 600;
        color: black;
    }



    /* --------------------------contct us------------------------------------------------------- */


    .contactus_headerz{
        min-height: 55vh;
        width: 100%;
        background-image: url(websiteimages/gal1/SPORT\ COMPLEX.jpg);
        background-position: center;
        background-size: cover;
        position: relative;
        background-image: linear-gradient(rgba(156, 170, 143, 0.7),rgba(29, 30, 29, 0.7)),url(websiteimages/gal1/SPORT\ COMPLEX.jpg);
    
    }

    .contactus-orientation {
        background-image: url(websiteimages/gal1/whitebck.jpg);
        background-size: cover;
        height: 10%;
      
    
    }
    .contactus-orientation h3{
        font-size: 34px;
        font-weight: 200;
        color: rgb(77, 73, 134);
    
        text-align: center;

    


    }



    .contactus-orientation h2{
        font-size: 29px;
        font-weight: 100;
        color: black;
        margin-top: 20px;
        text-align: center;

    }


    .contactus-orientation p{
        font-size: 29px;
        font-weight: 20;
        color: black;
        margin-top: 10px;
        text-align: center;

    }


    .contactus-orientation p span{
        font-size:50px;
        font-weight: 20;
        color: rgb(56, 56, 230);
        margin-top: 10px;
        text-align: center;

    }



    /* -----------------------------------------------------CONTACT US------------------------------------------------------ */








    .contact{
        padding: 40px 15%;
        background: whitesmoke;
        height: 10%;
        width: 100%;
        min-height: 100vh;
        display: grid;
        grid-template-columns: repeat(2,2fr);
        align-items: center;
        grid-gap: 6rem;
        margin-top: 10px;
        margin-bottom: -300px;
    
    }

    .contact-form h1{
        font-size: 42px;
        color: rgb(56, 56, 230);
        margin-bottom: 30px;
        margin-top: -300px;



        
    }
    span{
        color: #4F7942;
    }

    .contact-pic{
        min-height: 20vh;
        width: 100%;
        background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7 )),url(websiteimages/contact.png);
        background-position: center;
        background-size: cover;
        position: relative;

        margin-bottom: 50px;

    }
    .contact-form p{
        color: rgb(14, 15, 14);
        letter-spacing: 1px;
        line-height: 26px;
        font-size: 1.1rem;
        margin-bottom: 3.8rem;

        font-size: 18px;

    }

    .contact-form form{
        position: relative;
    }


    .contact-form form input, form textarea{
        width: 1200px;
        padding: 17px;
        border: none;
        outline: none;
        background: white;
        color: black;
        font-size: 1.1rem;
        margin-bottom: 0.7rem;
        border-radius: 10p;
     

    }


    .contact-form textarea{
        resize: none;
        height: 350px;
    }

    .contact-form form .btn{
        display: inline-block;
        background: rgb(56, 56, 230);
        font-size: 1.1rem;
        letter-spacing: 1px;
        text-transform: uppercase;
        font-weight: 600;
        border: 2px solid transparent;
        border-radius: 10px;
        width: 150px;
        transition: ease .20s;
        cursor: pointer;
        margin-left: 110px;

        
    }

    .contact-form form .btn:hover{
        border: 2px solid yellowrgb(56, 56, 230);
        background: transparent;
        background: white;
        transform: scale(1.1);
    } 

/* ------------------------------------------FOOOTER----------------------------------------- */

    .container{
        max-width: 1170px;
        
        height: 10%;
        /* background-color :rgb(54, 54, 208); */
        margin: auto;

    }

    .footerrow{
        display: flex;
        flex-wrap: wrap;
    }

    ul{
        list-style: none;


    }

    .footer{
        /* background-color: rgb(54, 54, 208);
        color: rgb(220, 220, 20); */
        padding: 70px 0;

    }

    .footer-col{
        width: 25%;
        padding: 0 25px;
    }

    .footer-col h4{
        font-size: 38px;
        /* color: rgb(220, 220, 20); */
        text-transform: capitalize;
        margin-bottom: 30px;
        position: relative;

    }



    .footer-col ul li:not(:last-child){
        margin-bottom: 10px;


    }

    .footer-col ul li:last-child{
        margin-bottom: -40px;


    }

    .footer-col ul li a{
        font-size: 24px;
        text-transform: capitalize;
        text-decoration: none;
        /* color: rgb(220, 220, 20); */
        font-weight: 300;
        display: block;
        transition: all 0.3s ease;

    }

    .footer-col ul li a:hover{
        /* color: black; */
        padding-left: 10px;
        font-size: 25px;
    }


    .social-links a{
        /* color: rgb(220, 220, 20); */
        font-size: 100px;
        padding: 20px;
    }


    .copyright {
        margin-bottom: 100px;

    }
    /* .copyright p{
        color: rgb(220, 220, 20);




    } */


    

/* ------------------------------------------ team------------------------------------ */



    .dedicated-team-header h3{
     

    
        font-size: 42px;
        font-weight: 600 ;
        /* color: rgb(54, 54, 208); */
        padding: 10px;
        margin-top: 100px;
        margin-bottom: 30px;
        border-bottom: none;
    

    }

    .dedicated-team-header h3 span{
     
        font-size: 42px;
        font-weight: 600 ;
        /* color: rgb(54, 54, 208); */
        padding: 10px;
        margin-top: 100px;
        margin-bottom: 30px;
        border-bottom: none;
    


    }

    .jefcon-team{
        /* background-image: url(websiteimages/team3.jpeg); */
        background-size: cover;
        margin-top: -100px;
      
    }


    .slide-content{
        margin: 0 40px;
    
    }
    
    
    .slide-container{
        max-width: 700px;
        width: 100%;
        /* background-color: white; */
        padding: 40px 0;

    
    }



    
    .card{
        width: 320px;
        border-radius: 25px;
        /* background-color: rgb(220, 220, 20); */
        border: 1px dashed rgb(8, 58, 8);


    }


    .image-content, .card-content{
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10px 14px;
    
    }
    
    .image-content{
        row-gap: 5px;
        position: relative;
        padding: 25px 0;
    
    }
    
    
    .overlay{
        position: absolute;
        left: 0;
        top: 0;
        height: 90%;
        width: 100%;
        /* background-color: rgb(54, 54, 208); */
        border-radius: 25px 25px 0 25px;
    }
    
    .overlay::before, .overlay::after{
        content: '';
        position: absolute;
        right: 0;
        bottom: -40px;
        height: 40px;
        width: 40px;
        /* background-color: rgb(54, 54, 208); */
    }
    
    .overlay::after{
        border-radius: 0 25px 0 0;
        /* background-color: rgb(220, 220, 20); */
    }



    .card-image{
        position: relative;
        height: 200px;
        width: 200px;
        
        border-radius: 50%;
        background: white;
        padding: 3px;
    }
    .card-image .card-img{
        height: 100%;
        width: 100%;
        object-fit: cover;
        border-radius: 50%;
        border: 4px solid white;
    }
    
    .name{
        font-size: 18px;
        font-weight: 500;
        /* color: black; */
  
    }
    
    
    .description{
        font-size: 28px;
        /* color: rgb(54, 54, 208); */
        text-align: center;
    }
    
    
    .button{
        border: none;
        font-size: 16px;
        /* color: black; */
        padding: 8px 16px;
        background-color: rgb(56, 56, 230);
        border-radius: 6px;
        margin: 14px;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    /* .button:hover{
        background: wheat;
    } */

  
    .jefcon-team .videocontentbutton a{
    text-decoration: none;
    display: inline-block;
    color: white;


    background-color: rgb(56, 56, 230);

    font-size: 26px;
    border: 1px solid rgb(56, 56, 230);
    padding: 28px 30px;
    border-radius: 15px;
    margin-top: -1000px;
    margin-left: 800px;
    margin-bottom: 100px;
    }


    .jefcon-team .videocontentbutton a:hover{
        border: 1px solid rgb(56, 56, 230);
        background: transparent;
        transition: 1s;
        color: black;
    }
    
    
    
    /* --------------------header----------------- */
    
    
    
    
    
    .headerimagee img{
        height: 10vh;
       
    
    }
    
    
    ul{
        list-style: none;
    
    
    }
    
    
    header{
        background-color: rgb(56, 56, 230);
        padding: 2rem 0;
      
    
    
    
    }
    
    nav{
        max-width: 1100px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        
    }
    
    
    .menu > li, .menu > a{
        display: inline-block;
    
        
        
    
    }
    .menu li{
        position: relative;
        
    
     
        
        
    }
    
    .menu a{
        text-decoration: none;
        color: white;
        display: block;
        padding: 10px;
     
        transition: background-color .22s ease, color .22s ease;
        
    
    
    }
    
    .menu a:hover{
        background-color: rgb(34, 174, 34);
        color: white;
    }
    
    .logo{
        font-size: 21px;
        color: white;
        font-weight: 500;
    }
    
    .submenu{
        position: absolute;
        background-color: rgb(56, 56, 230);
        width: 140px;
    
        display: none;
    }
    
    
    .menu li:hover > .submenu{
        display: block;
    }
}