@import url('https://fonts.cdnfonts.com/css/graphik');

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: Graphik;
}
nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    width: 100%;
    z-index: 1000;
    padding: 20px 0 30px 6rem;
    font-size: 16px;
    background-color: #fff;
   
}
#nav-links{
    display: flex;
    align-items: center;
    /* margin-right:100px ; */
    

}
ul{
    display: flex;
    justify-content: space-around;
    padding-right: 60px;
}
ul li {
    list-style-type: none;
    padding-right: 60px;
}
a{
    text-decoration: none;
}
#home-link, #impact-link, #why-link{
    color: #161617;
}
#hire-link{
    background-color: #e7332b;
    border-radius: 0 0 8px 0;
    color: #fff;
    font-style: normal;
    font-weight: 400;
    line-height: 19px;
    padding:13px 37px;
}
main{
    overflow-x:hidden;
}
#home{
    display: flex;
    justify-content:space-between;
    /* align-items: center; */
    padding: 225px 100px 0 100px;
   
}
#hero-content p:first-child{
    font-size:40px;
    color: #161617;
    font-weight: 600;
    line-height: 49px;
}
.line1{
    margin-left: 428px;
    margin-top: -23px;
}
#hero-content p:nth-child(3){
    color: #787878;
    font-size: 18px;
    font-weight: 400;
    max-width: 440px;
    margin-top: 20px;
    text-align: justify;
    line-height: 1.2;
    letter-spacing: 1px;
}
.btn{
    margin-top: 40px;
}
.btn .hire-link{
    background-color: #e7332b;
    border-radius: 0 0 8px 0;
    color: #fff;
    font-style: normal;
    font-weight: 400;
    line-height: 19px;
    padding:13px 52px;
    margin-right: 10px;
}
.btn .talent-link{
    background-color: #585858;
    border-radius: 0 0 8px 0;
    color: #fff;
    font-style: normal;
    font-weight: 400;
    line-height: 19px;
    padding:13px 51px;
}
#hero-content{
    margin-top: 110px;
}

.line2{
     position: absolute; 
    margin-left: 350px;
    margin-top: -200px;
    mix-blend-mode: soft-light;
}
#hero-image{
    position: relative;
}


#Impact{
   
     margin-top: 220px;
}
.section1{
    display: flex;
    justify-content: space-between;
    background-image: url(./images/bgsection2.063bd869082548bafa74.png);
    background-repeat: no-repeat;
    background-size: cover;
}
#section1-content{
    padding: 150px 105px;
    line-height:2;
    
}
#section1-content p:first-child{
    font-size:40px;
    color: #161617;
    font-style: normal;
    font-weight: 600;
    line-height: 49px;
}
#section1-content p:nth-child(2){
    font-size:18px;
    color: #161617;
    font-weight: 600;

}
#section1-content p:nth-child(3){
    color: #787878;
    font-size: 18px;
    font-weight: 400;
}

p span{
    color:#e7332b;
}
#section1-image{
    padding: 90px;
}
#country-details{
    display:flex;
    align-items: center;
   
}
.country-image{
    background-color: #fff;
    margin: 10px;
    border-radius: 5px;
}
#ger-image{
    padding: 15px 13px 0 13px;
}
#eng-image{
    padding: 15px 13px 0 13px;
}
#ind-image{
    padding: 10px 14px 0 14px;
}
#nig-image{
    padding: 10px 13px 0 13px;
}
#usa-image{
    padding: 9px 15px 0 15px;
}
.section2{
   width: 90%;
   padding: 100px 0 100px 0;
   margin: auto;
}
.skills-header p{
    color: #161617;
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
    line-height:1.2 ;
    width: 40%;
}
#skills-container{
    position: relative;
}

.skill-line{
    position: absolute;
    margin-top: -167px;
    margin-left: 900px;
    z-index: -1;
}

.skill-tags{
    display: flex;
    margin-top: 30px;
    margin-bottom: 40px;
    min-width: 200px;
    height:100%;

}
.skill-tag{
    font-size: 18px;
    font-weight: 400;
    margin-right: 25px;
    width: 100%;
    max-width: 22%;
}
.skill-tag:hover{
    transform: translateY(-15px);
    transition:0.5s;
}
.skill-tag p{
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 30px hsla(0,0%,48%,.16);
    color: #787878;
    line-height: 40px;
    padding: 5px;
    height: 100%;

}
#talent0{
    width: 100%;
    max-width:12%;
}
#talent1{
    width: 100%;
    max-width: 13%;
}
#talent2{
    width: 100%;
    max-width: 21%;
}
#talent3{
    width: 100%;
    max-width: 17%;
}
#talent4{
    width: 25%;
    max-width:12%;
}
#talent5{
    width: 100%;
    max-width: 22%;
}
.talent p{
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 30px hsla(0,0%,48%,.16);
    color: #787878;
    line-height: 40px;
    margin-right: 15px;
    padding: 5px;
    font-size: 18px;
    font-weight: 400;
    height: 100%;
}
.talent:hover{
    transform: translateY(-15px);
    transition:0.5s; 
}
#whyUs{
    background-color: rgb(255, 248, 229);
    padding-bottom: 80px;
    width: 100% ;
}
.section3{
    display: flex;
    flex-direction: column;
    justify-content:center;
    align-items: center;
    margin: auto;
    width: 100%;
    
}
#section3-header{
    color: #161617;
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
    line-height:1.2 ;
    width: 40%;
    margin: auto;
    padding:100px 0 70px 0 ;
    text-align: center;
}
.section3-card{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    width: 90%;
    
    
}
.card-content{
    align-items: center;
    background-color: #fff;
    border-radius: 0 0 16px 0;
    color: #787878;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 50px;
    text-align: center;
    width: 100%;

}
.card-content:hover{
    background-color:#161617;
    color: #fff;
}
.card{
    max-width: 33%;
    margin: 10px 15px 30px 0;

}
#first-card{
    padding: 62px 50px;

}
#third-card, #fourth-card, #fifth-card{
    padding: 73px 50px;
    z-index: 100;
    position: relative;
}
#fifth-card{
    padding: 73px 50px;
}
.card-content p{
    max-width: 280px;
    padding-top: 15px;
    font-size:17px;
    font-weight:400;
    font-style: normal;
    line-height:1.5;
    letter-spacing: 0.009em
}
#first{
    position: relative;

    
}
.card-rope{
    position: absolute;
    left: -100px;
  
}


footer{
    background-color: rgb(22, 22, 23);
    padding-top: 78px
    
}
.footer-links{
   padding: 0 4em 0 4em ;
}
.logo-links{
    display: flex;
    justify-content: space-between;
    padding-bottom: 40px;
    
}
#social-links a{
   padding-right: 10px;
}
#social-links #youtube-link{
    padding: 0 !important;
}
.copyright{
    display: flex;
    justify-content: space-between;
    color: #fff!important;
    font-size: 16px;
    padding-bottom: 20px;
}
.copyright a{
    text-decoration: none;
    color: #fff!important;
}

@media (max-width:1115px) {
    #home{
        flex-direction: column;
        justify-content: center;  
        align-items: center;
        padding: 110px 100px 0 100px;
        text-align: center;
       
    } 
    #hero-content p:nth-child(3){
        color: #787878;
        font-size: 18px;
        font-weight: 400;
        max-width: 645px;
        margin-top: 17px;
        text-align: center;
        line-height: 1.2;
        letter-spacing: 0.7px;
       
    }
    .hero-img{
        width: 74%;
        margin-top: 60px;
    } 
    .line-img{
        width: 287px;
    }
   
    .line2{ 
       margin-left:710px;
       margin-top: -270px;
   }
   #Impact{
   
    margin-top: 100px;
    }
   .section1{
    display: flex;
    justify-content: space-between;
   }
   
   #section1-content{
    max-width: 50%;
    padding: 150px 0 150px 85px ;
    line-height:2;
    }
    .country-image{
        margin: 8px;
    }
    #ger-image img{
        width:36px;
    }
    
    #eng-image img{
        width:33px;
    }

    #ind-image img{
        width:31px;
    }
    
    #nig-image img{
        width:33px;
    }
    
    #usa-image img{
        width:28px;
    }
   
   #section1-image{
    padding: 130px 0 123px 30px;
    
    }
    #section1-image{
        width:50%;
    }
    #section1-image img{
        width:80%;
    }
   .skill-line{
    display: none;
   }
   #section1-content p:first-child{
    margin-top:70px;
    font-size:30px;
    line-height: 1.2;
    }
    .skills-header p{
        font-size:30px;
    }
    #skills-container{
        height: 100%;
    }
    .card{
        margin: 10px 15px 30px 0;
        width:47%;
        max-width: 50%;
    
    }
    #fifth{
        width: 95%;
        max-width: 100%!important;
    }
    .card-content{
        background-color: #fff;
        height: 300px;
        padding: 10px !important;
        width: 100%;
    }
    .card-content p{
       margin-left: 60px;
        margin-right: 60px;
        max-width: 305px;
        font-size:17px;
        line-height:1.5;
        letter-spacing: 0.009em;

    }
    #fifth-card{
        max-width:100%;
    }
    #fifth-card p{
        max-width: 100% !important;
    }
}
@media (max-width:900px) {
    nav{
        padding: 23px 0 30px 2rem;
       
    }
    ul{
        padding-right:20px;
      
    }
    ul li {
        list-style-type: none;
        padding-right:0;

    }
    #home-link, #impact-link, #why-link{
        display: none;
    }

    #hire-link{
        padding:13px 50px;
        letter-spacing:0.03em;
        height: auto;
    }   
    #hero-content p:nth-child(3){
        max-width: 500px;
        text-align: center
    }
    .line2 {
    display: none;
    }

    .section1{
        width: 100%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;

    }
    #section1-image img{
    width: 120%;
    text-align: center;
    justify-content:center;
    align-items: center;
    }
    #section1-image{
        margin-bottom:120px;
        padding: 0;

        
    }
    #section1-content{
        width: 100%;
        line-height:1.7;
        padding: 100px 0 50px 0;
            
    }
    #section1-content p:first-child{
        /* max-width: 700px; */
        line-height:1.7;
    }
    #section1-content p:nth-child(2){
        font-size:19px;
    
    }
    #country-details{
        display:flex;
        align-items: center;
        text-align: center;
        justify-content: center;
    }
    
    #ger-image img{
        width:48px;
    }
    
    #eng-image img{
        width:44px;
    }

    #ind-image img{
        width:41px;
    }
    
    #nig-image img{
        width:44px;
    }
    
    #usa-image img{
        width:39px;
    }
   
    
    .skills-header p{
        text-align: center;
        line-height:1.7 ;
        width: 60%;
        margin: auto;
    }
    .talent p{
        margin-right: 17px;
    }
    .skill-tags{
        flex-flow: row wrap;
    }
    .skill-tag{
        margin-top: 15px;
        max-width: 28%;

    }
    .talent{
        margin-top: 10px;
    }
    #talent0{
        width: 100%;
        max-width:31%;
    }
    #talent1{
        width: 100%;
        max-width: 31%;
    }
    #talent2{
        width: 100%;
        max-width: 31%;
    }
    #talent3{
        width: 100%;
        max-width: 31%;
    }
    #talent4{
        width: 50%;
        max-width:31%;
    }
    #talent5{
        width: 100%;
        max-width: 31%;
    }
    
    .footer-links{
        padding: 0 2em 0 2em ;
     }
}   
@media (max-width:600px) {
    #hire-link{
        padding:13px 30px;
    }   
    
    #home{
        padding: 40px 25px 0 25px;
        text-align: center;
       
    }

    #hero-content p:first-child{
        max-width: 90%;
    } 

    .line1{
        margin-left: 70px;
        margin-top: -23px;
    }

    #hero-content p:nth-child(3){
        font-size: 16px;
        margin: auto;
       
    }
    .hero-img{
        width: 100%;
    } 
    .btn .hire-link{
        padding:13px 30px;
    }
    .btn .talent-link{
        padding:13px 31px;
    }

    .section1{
        width: 100%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: left;

    }
    
    #section1-content{
        max-width: 90%;
    }

    #section1-image img{
        width: 150%;
        margin-right: 50px;
    }
    
    #ger-image img{
        width:40px;
    }
    
    #eng-image img{
        width:36px;
    }

    #ind-image img{
        width:33px;
    }
    
    #nig-image img{
        width:36px;
    }
    
    #usa-image img{
        width:31px;
    }
    .skill-tag{
        margin-top: 15px;
        font-size: 16px;
        max-width: 43%;

    }
    .skill-tag:nth-child(2), .skill-tag:nth-child(4){
        margin-right: 0;
    }
   
    .talent p{
       font-size: 16px;
    }
    #talent0{
        width: 100%;
        max-width:48%;
    }
    #talent1{
        width: 100%;
        max-width: 48%;
    }
    #talent2{
        width: 100%;
        max-width: 48%;
    }
    #talent3{
        width: 100%;
        max-width: 48%;
    }
    #talent4{
        width: 50%;
        max-width:48%;
    }
    #talent5{
        width: 100%;
        max-width: 48%;
    }

    .card{
        margin: 10px 15px 30px 0;
        width:100%;
        max-width: 100%;
    
    }
    #second-card{
        z-index: 1000px;
        position: relative;
    }

    .logo-links{
      flex-direction: column;
      text-align: center;
    }
    .logo-links #logo img{
        width: 150px;
        margin-bottom: 20px;
    }
    .copyright{
      flex-direction: column-reverse;
      text-align: center;
    }
    .copyright a{
        margin-bottom: 40px;
    }
}
@media (max-width:400px) {
    #hire-link{
        padding:13px 10px;
    }   
    
    .btn .hire-link{
        padding:13px 10px;
    }
    .btn .talent-link{
        padding:13px 11px;
    }

    #country-details{
        flex-flow: row wrap;
        align-items: flex-start;
        text-align:left;
        justify-content: left;
       
    }
}