@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,700&family=Open+Sans:ital,wght@0,400;0,600;0,700;0,800;1,600&family=Poppins:wght@200;300;400;500;700&family=Roboto:wght@300;400;500;700;900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@900&display=swap');

:root{
    --primaryColor:rgb(43, 124, 201);
    --tertiaryColor:#0ab;
    --secondaryColor:rgb(241, 42, 42);
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
body{
    position:relative;
    font-size:14px;
    line-height:1.5;
    font-family:'Poppins', sans-serif;
    color:rgb(48, 46, 46);
    background-color:rgba(233, 241, 252, 0.7);
    
}
.loading{
    background:rgb(34, 34, 124);
    display:flex;
    align-items:center;
    justify-content: center;
    flex-direction: column;
    min-height: 100vh;
}
/* loader */
/* .main_loader{
    font-size:18px;
    line-height:1.6;
    background:rgb(9, 9, 37);
    
} */
.loader{
    height:50px;
    transform-origin:bottom center;
    animation: rotate 3s linear infinite;
}
.circle{
    display:inline-block;
    background-color: red;
    height:40px;
    width:40px;
    border-radius:50%;
    transform:scale(0);
    animation: grow 1.5s linear infinite;
    margin:-10px;
}
.circle:nth-child(2){
    background-color:yellow;
    animation-delay:0.75s;
}

@keyframes rotate{
    to{
        transform:rotate(360deg);
    }
}

@keyframes grow{
    50%{
        transform:scale(1);
    }
}
.main{
    opacity: 0;
    display:none;
    transition:opacity 1s ease-in;
}
a{
    text-decoration:none;
    color:var(--primaryColor);
}
a:hover{
    color:var(--secondaryColor);
}
.active a{
    background:var(--secondaryColor);
    color:#fff;
    border-bottom:2px solid var(--primaryColor);
}
.fas, .fab{
    font-size:1.2rem;
}
button{
    padding:10px;
    background:var(--secondaryColor);
    text-transform: capitalize;
    cursor: pointer;
}
button:hover{
    background: var(--tertiaryColor);
}
button a{
    color:#fff;
}
button a:hover{
    color:#fff;
}
#topHeader{
    background:var(--primaryColor);
    display:flex;
    justify-content: space-between;
    align-items:center;
    padding:5px 50px;
    color:#fff;
}
.social_media a{
    margin:0 1px;
    color:#fff;
}
.callLinks{
    display:flex;
    justify-content: space-between;
    align-items:center;
}
#banner{
    position:relative;
    height:100vh;
    width:100%;
}

.main_header{
    position:sticky;
    top:0;
    left:0;
    display:flex;
    justify-content: space-between;
    align-items:center;
    background:transparent;
    z-index:3;
    padding:10px 2px;
    min-height:10vh;
    transition:.4s all;
}
.new_header{
    position:fixed;
    width:100%;
    top:0;
    left:0;
    display:flex;
    justify-content: space-between;
    align-items:center;
    background:#fff;
    z-index:3;
    padding:2px;
    min-height:8vh;
    box-shadow:2px 2px 2px 2px #c4c4c4;
    transition:.4s all;
}
.main_header h1{
    width:20vw;
    margin-left:50px;
    height:auto;
}
.new_header h1{
    width:15vw;
    margin-left:50px;
    height:auto; 
}
.main_header h1 img{
    height:15vh;
    width:100%;
}
.new_header h1 img{
    width:100%;
    height:10vh;
}
nav{
    margin-right:50px;
}
nav ul li{
    list-style:none;
    position:relative;
    display:inline-block;
}
.main_header nav ul li a{
    color:#fff;
    font-size:.9rem;
    text-transform:uppercase;
    padding:10px 20px;
    transition:0.5s all;
}
.new_header nav ul li a{
    color:#222;
    font-size:.9rem;
    text-transform:uppercase;
    padding:10px 20px;
    transition:0.5s all;
}
nav ul li a i{
    color:var(--primaryColor);
}
nav ul li a:hover, .active{
    background:var(--secondaryColor);
    color:#fff;
    border-bottom:2px solid var(--primaryColor);
}
.active a{
    color:#fff!important;
}
nav ul li ul{
    display:none;
    position:absolute;
    background:#fff;
    border-top:1px solid var(--primaryColor);
}
nav ul li:hover ul{
    display:block;
    z-index:1;
}
nav ul li ul li{
    display:block;
    width:250px;
    padding:0;
    border-top:1px solid rgba(163, 158, 158, 0.3);
}
.main_header nav ul li ul li a{
    color:#000;
    padding:10px;
    display: block;
}
.new_header nav ul li ul li a{
    color:#000;
    padding:10px;
    display: block;
}
nav ul li ul li a:hover{
    background:var(--secondaryColor);
    color:#fff;
}
nav i{
    padding:0 5px;
}
nav li:hover i{
    display:none;
}
.menu-icon{
    display:none;
}
/* slider */
#slider{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    overflow:hidden;
}
#slider .slides{
    position:relative;
    width:400%;
    height:100%;
    left:0;
    animation:30s slide infinite;
    animation-timing-function: linear;
}
@keyframes slide{
    0%{
        left:0;
    }
    24.5%{
        left:0;
    }
    25%{
        left:-100%;
    }
    50%{
        left:-100%;
    }
    50.5%{
        left:-200%;
    }
    75%{
        left:-200%;
    }
    75.5%{
        left:-300%;
    }
    100%{
        left:-300%;
    }
}
.slides .slide{
    position:relative;
    float:left;
    width:25%;
    height:100%;
}
.slide .banner_img{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
.slide .banner_img img{
    object-fit:cover;
    width:100%;
    height:100%;
}
.slide .banner_img:after{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: rgba(0, 0, 0, .4);
}
.slide .taglines{
    position:absolute;
    top:40vh;
    right:0;
    width:50%;
    height:100%;
    margin-right:30px;
    opacity:0;
    animation:7.5s flow infinite;
    animation-fill-mode:forwards;
    
}
.slide .taglines2{
    left:0;
    margin-left:30px;
}
@keyframes flow{
    0%{
        opacity:0;
        transform:scale(0);
    }
    20%{
        opacity:1;
        transform:scale(1);
    }
    100%{
        opacity:1;
        transform:scale(1);
    }

}
.taglines h2{
    padding:10px 5px;
    background:var(--tertiaryColor);
    color:#fff;
    font-size:1.5rem;
    border-radius:5px;
    text-transform:uppercase;
}
.taglines p{
    color:#fff;
    font-size:1.3rem;
    margin:20px 0;
    width:80%;
}
.taglines a{
    padding:15px;
    background:var(--secondaryColor);
    color:#fff;
    display:inline-block;
    margin-top:20px;
    font-size:.9rem;
    transition: .3s all ease-in;
    border-radius:5px;
    text-transform: uppercase;
    letter-spacing: 3px;
}
.taglines a:hover{
    background: var(--tertiaryColor);
}
.taglines a:last-child{
    background:var(--primaryColor);
    transition: .3s all ease-in;
}
.taglines a:last-child:hover{
    background: var(--secondaryColor);
}

main{
    width:100%;
}
main h2, #ourExistence h2{
    text-align:center;
    text-transform:uppercase;
    font-size:1.4rem;
    margin:5px auto;
    font-family:'lato', 'sans-serif';
    animation:2s spin 1;
 
}
main hr, #ourExistence hr{
    width:30px;
    border-radius:2px;
    height:30px;
    margin:10px auto 20px;
    background-color:var(--secondaryColor);
    /* box-shadow:1px 2px 2px 1px var(--secondaryColor); */
    animation:1s rotate infinite;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
}
@keyframes spin{
    0%{
        opacity:1;
        transform:translateY(-100%);
    }
    100%{
        opacity:1;
        transform:translateY(100%)
    }
}
@keyframes rotate{
    100%{
        transform:rotateZ(360deg);
    }
    
}
#aboutUs{
    width:90%;
    margin:80px auto;
}
.about_us{
    display:flex;
    flex-wrap:wrap;
    margin-top:20px;
    /* transform: scale(0); */
    animation:1s flowin 1;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
}
@keyframes flowin{
   0%{
        transform:translateY(100%);
    }
   100%{
        transform:translateY(0%);
    }
}
.about_us p{
    text-align:justify;
    width:47%;
    margin:0 auto;
}
.about_us p a{
    display:inline-block;
    margin-top:20px;
    padding:10px 15px;
    background:var(--tertiaryColor);
    color:#fff;
}
.about_us img{
    width:47%;
    margin:0 auto;
    height:300px;
    border-radius:5px;
    /* border:5px solid var(--tertiaryColor);
    box-shadow:2px 2px 4px 3px #c4c4c4; */
}

#services{
    width:90%;
    margin:70px auto;
}
.services{
    display: flex;
    justify-content: space-around;
    flex-wrap:wrap;
    transform:scale(0.7);
    animation:1s zoomin 1;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
}
@keyframes zoomin{
    100%{
         transform:scale(1);
     }
 }
.services figure{
    width:28%;
    margin:5px;
}
.services figure img{
    width:100%;
    height:200px;
    box-shadow:2px 2px 2px 2px #979595;
    transition:.2s all ease-in-out;
}
.services figure img:hover{
    opacity:.9;
    transform:scale(1.1);
}
.services figure figcaption{
    text-align: center;
    padding:5px;
}
.services figure figcaption h3{
    text-transform: uppercase;
    font-size:1rem;
    font-family:'lora';
}
.services figure figcaption p{
    margin:5px 0;
}
.services figure figcaption a{
    display:inline-block;
    margin-top:5px;
    padding:10px 15px;
    background:var(--tertiaryColor);
    color:#fff;
}
#whyChoose{
    margin:50px 0;
    display:flex;
    overflow:hidden;
    height:500px;
}
#whyChoose img{
    width:50%;
    object-fit:cover;
    height:100%;
}
#whyChoose .choose_text{
    position:relative;
    width:50%;
    height:100%;
}
#whyChoose .choose_text .chooseImg{
    position:relative;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
#whyChoose .choose_text .chooseImg img{
    width:100%;
    height:100%;
    object-fit:cover;
}
#whyChoose .choose_text .chooseImg:after{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(43, 124, 201, .9);
}
#whyChoose .choose_text .texts{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
#whyChoose .choose_text .texts h2{
    text-align:center;
    letter-spacing:4px;
    font-family: 'lora';
    color:var(--secondaryColor);
    font-weight: bolder;
    margin-top:10px;
}
#whyChoose .choose_text .texts ul{
    padding:5px;
}
#whyChoose .choose_text .texts li{
    margin:20px 50px;
    list-style:none;
    color:#fff;
    font-size:1rem;
}
#whyChoose .choose_text .texts li i{
    margin-right:5px;
}
#recentWork{
    display:none;
    width:80%;
    margin:50px auto;
    text-align:center;
}
#recentWork p{
    font-size:1.1rem;
    padding-bottom:5px;
}
#recentWork .categories{
    margin-bottom:10px;
}
#recentWork .categories button{
    border:1px solid rgba(71, 70, 70, .5);
    outline:0;
    padding:10px;
    margin:0;
    background:#fff;
    font-size:1rem;
    transition:.2s all;
    border-radius:5px;
}
#recentWork .categories button:hover{
    outline:0;
    background:rgba(196, 196, 196, .3);
}
.recentjobs{
    display:flex;
    flex-wrap:wrap;
    align-items: flex-start;
    justify-content: center;
}
.recentjobs figure{
    width:30%;
    min-height:300px;
    margin:.6rem;
    background:var(--primaryColor);
    box-shadow: 2px 2px 2px 2px #c4c4c4;
    border:1px solid #fff;
    transition:.5s all;
}
.recentjobs figure img{
    width:100%;
    height:200px;
    display:block;
}
.recentjobs figure figcaption{
    padding:5px;
    color:#fff;
}
.recentjobs figure figcaption h3{
    text-transform: uppercase;
    color:#fff;
    font-size:1rem;
    text-align:left;
}
#recentWork .recentjobs figure figcaption p{
    text-align:justify;
    font-size:0.8rem;
    margin:5px 0;
    color:rgb(233, 230, 230);
}
#recentWork .recentjobs figure figcaption .date{
    float:right;
    color:var(--secondaryColor);
}
.recentjobs figure:hover{
    animation:.4s grow 1;
    animation-fill-mode: forwards;
    
}
@keyframes grow{
    100%{
        transform: scale(1.1);
        opacity:.9;
    }
}
#recentWork #work1{
    animation:1.5s fromLeft 1;
    animation-timing-function: linear;
}
@keyframes fromLeft{
    0%{
        transform:translateX(-100%);
    }
    100%{
        transform:translateX(0%);
    }
}
#recentWork #work2{
    animation:1.8s fromUp 1;
    animation-timing-function: linear;
}
@keyframes fromUp{
    0%{
        transform:translateY(-100%);
    }
    100%{
        transform:translateY(0%);
    }
}
#recentWork #work3{
    animation:2s fromRight 1;
    animation-timing-function: linear;
}
@keyframes fromRight{
    0%{
        transform:translateX(100%);
    }
    100%{
        transform:translateX(0%);
    }
}
#recentWork #work4{
    animation:2.2s fromLeft 1;
    animation-timing-function: linear;
}
@keyframes fromLeft{
    0%{
        transform:translateX(-100%);
    }
    100%{
        transform:translateX(0%);
    }
}
#recentWork #work5{
    animation:2.5s fromDown 1;
    animation-timing-function: linear;
}
@keyframes fromDown{
    0%{
        transform:translateY(100%);
    }
    100%{
        transform:translateY(0%);
    }
}
#recentWork #work6{
    animation:2.8s fromRight 1;
    animation-timing-function: linear;
}
@keyframes fromRight{
    0%{
        transform:translateX(100%);
    }
    100%{
        transform:translateX(0%);
    }
}
#recentWork button{
    margin:10px;
    padding:10px 20px;
    transition:all 0.3s ease-in-out;
    background-color:transparent;

}
#recentWork button a{
    padding:10px;
    color:#222;
    text-transform: uppercase;
}
#recentWork button:hover{
    outline:2px solid var(--tertiaryColor);
    outline-offset: 2px;
    background:var(--tertiaryColor);
}
#clients{
    width:90%;
    margin:70px auto;
    
}
#clients .clientele{
    display:flex;
    align-items:center;
    justify-content: space-around;
}
#clients .clientele figure{
    height:50px;
    margin:1rem;
    
}
#clients .clientele figure img{
    height:100%;
  
}
#trends{
    width:80%;
    margin:70px auto;
}

.trendPosts{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    flex-wrap:wrap;
    padding-top:10px;
}
.trendPosts article{
    width:30%;
    margin:5px;
    min-height:300px;
    font-size:1rem;
    border:1px solid #c4c4c4;
    box-shadow:2px 2px 2px 2px #a3a2a2;
    border-radius:5px;
    transition:.3s all;
}
.trendPosts article:hover{
    background:var(--primaryColor);
    opacity:0.9;
}
.trendPosts article h3{
    color:var(--tertiaryColor);
    padding:5px 0;
}
.trendPosts article:hover h3{
    color:var(--secondaryColor);
}
.trendPosts article p{
    color:#222;
}
.trendPosts article:hover p{
    color:#fff;
}
.trendPosts article a img{
    width:100%;
    height:200px;
}
.trendPosts article figcaption{
    width:100%;
    padding:5px;
}
.trendPosts span{
    padding:4px 5px;
    display:inline-block;
    color:#fff;
    border-radius:10px;
    font-size:.8rem;
}
.trendPosts h3{
    color:#222;
}
.trendPosts p{
    text-align:justify;
    font-size:.9rem;
}
#callToAction{
    position:relative;
    height:60vh;
    width:100%;
    display:none;
}
.callToActionImg{
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
}
.callToActionImg:after{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:rgba(27, 26, 27, 0.6);
}
#callToAction img{
    height:100%;
    width:100%;
    object-fit: cover;
}
#callToAction .takeAction{
    position:absolute;
    top:0;
    right:0;
    width:40%;
    height:100%;
    margin:10px;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align:center;
    color:#fff;
    animation:1s zoomInHero 1;
    animation-delay: .5s;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    opacity:0;
    transform:scale(.6);
    }
@keyframes zoomInHero{
    100%{
    opacity:1;
    transform:scale(1);
    }
}
#callToAction .takeAction h3{
    text-transform: uppercase;
    font-size:2.3rem;
    line-height: 1;
    margin-bottom:20px;
    letter-spacing: 4px;
}
#callToAction .takeAction p{
    font-size:1.1rem;
    margin-bottom: 10px;
}
#callToAction .takeAction button{
    color:#fff;
    background-color: transparent;
    padding:10px 20px;
    border-color:#fff;
    transition:.3s all;
}
#callToAction .takeAction button:hover{
    padding:10px 25px;
    transform:scale(1.2);
    background-color: var(--tertiaryColor);

}
#map{
    width:100%;
    margin:50px 0 0 0;
}
#map iframe{
    width:100%;
}
footer{
    background:rgb(32, 32, 32);
    color:rgb(247, 234, 234);
}
footer p{
    color:#e4dcdc;
}
footer h3{
    padding:10px 0;
    text-transform:uppercase;
    font-size:1rem;
}
.mainFooter{
    width:90%;
    margin:40px auto;
}
.mainFooter1{
    display:flex;
    justify-content: space-around;
    padding:40px 0;
}
.mainFooter1 .fas{
    color:var(--tertiaryColor);
    font-size: 2.5rem;
}
.contactAddress{
    width:40%;
}
.address{
    display:flex;
    margin:20px 0;
}
.address i{
    margin-right:10px;
}
.address p{
color: rgb(231, 226, 226);
}
.phone i{
    margin-right:20px;
}
.subscribe, .socialMedia{
    border-bottom:1px solid #fff;
    padding-bottom:40px;
}
.subscribe input[type='email']{
    padding:10px 20px;
    border-radius:10px 0 0 10px;
}
.subscribe input[type='submit']{
    padding:10px;
    border-radius:0 10px 10px 0;
    background-color: var(--tertiaryColor);
    color:#fff;
    cursor:pointer;
}

.socialLinks a img{
    width:50px;
}
.categories li{
    list-style: none;
    padding:3px 0;
}
.categories li a{
    color:rgb(179, 172, 172);
    text-transform: uppercase;
}
.categories li a:hover{
    text-decoration:underline;
    color:var(--secondaryColor);
}
.secondaryFooter{
    background:rgb(19, 18, 18);
    color:rgb(238, 229, 229);
    text-align:center;
    padding:15px;
}
.secondaryFooter a{
    color:var(--secondaryColor);
    text-decoration:underline;
}
.toTop{
    display:none;
    padding:10px;
    background-color: var(--tertiaryColor);
    position:fixed;
    bottom:7%;
    right:2%;
    transition:.3s all;
}
.toTop:hover, .toTop:focus{
    background:var(--secondaryColor);
}
.toTop a{
    padding:5px;
}
.toTop a:hover{
    color:var(--secondaryColor);
}
#help{
    display:none;
}
.help{
    padding:5px;
    background-color: green;
    position:fixed;
    bottom:0%;
    right:0%;
    border-radius:10px 0 0 10px;
    margin:0;
    letter-spacing: 1px;
    animation:2s beat infinite;
}
@keyframes beat{
    100%{
        transform:scale(1.07);
    }
}
.help a{
    color:#fff;
    font-size:.9rem;
}
/* about page */
#aboutBanner{
    position:relative;
    height:50vh;
    width:100%;
}
#slider .about_banner{
    position:relative;
    width:100%;
    height:100%;
}
.about_banner .slide .taglines{
    position:absolute;
    top:40vh;
    right:0;
    width:50%;
    height:100%;
    margin-right:30px;
    opacity:0;
    animation:5s flow 1;
    animation-fill-mode:forwards;
    
}
.about_banner .slide .taglines p{
    display:none;
}
#existence{
    width:90%;
    margin:50px auto;
}
#existence h2{
    text-align:left;
    
}
.story{
    display:flex;
    justify-content: space-between;
    align-items: center;
}
.story p{
    width:48%;
    text-align: justify;
}
.story img{
    width:45%;
}
/* about hero */
#hero{
    position:relative;
    height:300px;
}
#hero .hero_image{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
#hero .hero_image img{
    width:100%;
    height:100%;
    object-fit: cover;
}
#hero .hero_notes{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:flex;
    justify-content: space-around;
    text-align: center;
    align-items: center;
}
#hero .hero_notes .note{
    background:#fff;
    border-radius:5px;
    width:250px;
    height:200px;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#hero .hero_notes .note h3{
    font-size:2rem;
}  
#hero .hero_notes .note p{
    font-size:1.1rem;
}
/* about purpose */
#purpose{
    width:60%;
    margin:50px auto;
    text-align: center;
}
#purpose p{
    font-size:1rem;
}
/* core values */
#values{
    margin:50px 0;
    display:flex;
}
#values img{
    width:50%;
    height:400px;
}
#values .values{
    width:50%;
    padding:0 10px;
    background: rgb(95, 141, 224);
}
#values .values h2{
    text-align: left;
    padding:0;
    margin:20px 40px;
    color:var(--secondaryColor);
    font-size:1.5rem;
}
#values .values ul{
    margin-left:50px;
    text-align: justify;
}
#values .values ul li{
    list-style: none;
    color:#fff;
    margin:10px 0;
    font-size:1.2rem;
}
#values .values ul li i{
    /* font-weight: bold;
    font-size:1.1rem; */
    margin-right:10px;
    /* color:var(--secondaryColor); */
}
#team{
    width:80%;
    margin:50px auto;
}
#team p{
    text-align:center;
    width:70%;
    margin:auto;
}
#team .team{
    display:flex;
    align-items:center;
    justify-content:space-around;
    flex-wrap:wrap;
}
#team .team figure{
    min-height:300px;
    width:30%;
    margin:10px;
    border-radius:10px;
}
.team figure img{
    width:100%;
    height:250px;
}
/* .team figure figcaption{
    
} */
.team figure figcaption h3{
    font-weight:normal;
    font-size:1rem;
    color:var(--secondaryColor);
    text-align:center;
}
.team figure figcaption h3 span{
    display:block;
    font-size:.9rem;
    color:var(--tertiaryColor);
    text-decoration: underline;
}
/* contact page */
#ourExistence{
    width:90%;
    margin:50px auto;
}
.cont{
    display:flex;
    justify-content:space-around;
}
.contactInfo{
    width:50%;
}
.contactInfo img{
    display:none;
}
.cont img{
    width:50%;
    /* border:10px solid var(--tertiaryColor); */
    border-radius:10px;
    height:60%;
    box-shadow:3px 3px 3px var(--tertiaryColor);
}
.cont p{
    width:100%;
}
#contactForm{
    margin-top:40px;
    width:80%;
}
#contactForm fieldset{
    padding:15px;
    box-shadow:3px 3px 3px var(--tertiaryColor);
    border-radius:10px;
    
}
#contactForm legend{
    font-family:monotype corsiva, 'Lora';
    font-style: italic;
    font-size:1.5rem;
    color:var(--tertiaryColor);
}
#contactForm label{
    text-transform: uppercase;
}
#contactForm input{
    padding:10px;
    width:95%;
}
#contactForm textarea{
    width:100%;
}
#contactForm select{
    padding:10px;
    width:100%;
    border-radius:5px;
}
#contactForm select option{
    font-size:0.9rem;
    color:rgb(43, 41, 41);
    text-transform: capitalize;
}
#contactForm input[type="submit"]{
    width:100%;
    background-color:var(--tertiaryColor);
    color:#fff;
    border-radius: 5px;
    cursor:pointer;
    text-transform:uppercase;
}
/* the blog */

#blogposts{
    width:80%;
    margin:50px auto;
    display:flex;
    padding-top:10px;
    flex-wrap:wrap;
    justify-content: space-around;
}
.posts{
    width:31%;
    margin:0 3px;
    box-shadow: 2px 2px 2px 3px #c4c4c4;
    background:#fff;
}
.posts:hover{
    background:#000;
}
.posts figure:hover .figcaption{
  
    color:#fff;
}
.posts figure{
    width:100%;
    
}
.posts img{
    width:100%;
    padding:0;
    height:200px;
    display:block;
}
.posts figure a{
    color:#000;
    text-transform: uppercase;
    font-size:1.3rem; 
}
.posts figcaption{
    margin:0;
    padding:10px;
}
.posts span{
    float:right;
    opacity:0.6;
    font-size:0.6em;
    margin-top:5px;
    color:var(--tertiaryColor);
}
.clear{
    clear: both;
}

/* portfolio page */
.portf{
    width:80%;
    margin:50px auto 10px auto;
    text-align:center;
}
.portf p{
    font-size:1.2rem;
    margin-bottom:5px;
}
.portf button{
    background:#c4c4c4;
    transition:all .3s ease-in-out;
}
.portf button:hover{
    background:var(--tertiaryColor);
    color:#fff;
}
#ourPortfolio{
    margin:10px auto;
    width:80%;
    display:flex;
    justify-content: center;
    flex-wrap:wrap;
}
.work{
    width:24%;
    margin:10px 2px;
}
.work .work_info{
    width:100%;
    position: relative;
    height:250px;
}
.work .work_info .work_foto{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    
}
.work .work_info .work_foto:after{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0, 0, 0, .2);
    transition:.3s background;
}
.work .work_info .work_foto img{
    width:100%;
    height:100%;
    object-fit: cover;
}
.work .work_info .descriptions{
    display:none;
    position:absolute;
    top:50%;
    left:0;
    width:100%;
    height:100%;
    animation:.4s appear 1;
    padding:3px;
    transform: scale(0.8);
    animation-fill-mode: forwards;
    animation-direction: left;
}
@keyframes appear{
    100%{
        transform:scale(1);
        
    }
}
.work .work_info .descriptions p{
    text-transform: capitalize;
    color:#fff;
    font-size:1.1rem;
}
.work .summary h3{
    text-transform: uppercase;
    font-size:.9rem;
    text-align:center;
    color:rgb(78, 78, 78);
}
.work .work_info:hover .descriptions, .work .work_info:focus .descriptions{
    display:block;
}
.work .work_info:hover .work_foto:after, .work .work_info:focus .work_foto:after{
    background:rgba(0, 0, 0, .6);
}
/* services page */
#ourServices{
    width:80%;
    margin:50px auto;
}
#ourServices .service{
    width:100%;
    display:flex;
    justify-content: space-between;
    margin:50px 0;
}
#ourServices .service .service_description{
    width:48%;

}
#ourServices .service .service_description h2{
    text-transform:uppercase;
    background:var(--tertiaryColor);
    color:#fff;
    display:block;
    animation: none;
    text-align:left;
    padding:10px;
}
#ourServices .service .service_description p{
    text-align: justify;
    font-size:1rem;
}
#ourServices .service .service_description a{
    background:var(--secondaryColor);
    color:#fff;
    padding:15px;
    margin-top:10px;
    display: block;
    width:150px;
    text-align:center;
    text-transform: capitalize;
    transition:.3s all ease-in;
}
#ourServices .service .service_description #prod{
    background:transparent;
    color:var(--tertiaryColor);
    padding:0;
    margin-top:0;
    display: inline;
    text-align: unset;
    text-decoration: underline;
    text-transform:capitalize;
    transition:.3s all ease-in;
}
#ourServices .service .service_description a:hover, #ourServices .service .service_description a:focus{
    background:var(--tertiaryColor);
}
#ourServices .service .service_image{
    width:49%;
}
#ourServices .service .service_image img{
    width:100%;
}
#ourServices hr{
    width:30px;
    height:30px;
    border-radius:2px;
    background:var(--primaryColor);
    /* box-shadow: 2px 2px 4px var(--secondaryColor); */
    animation: 1s roll infinite;
    animation-timing-function: linear;
}
@keyframes roll{
    
    100%{
        transform:rotateZ(360deg);
    }
}
/* blog posts */
#mainArticle{
    width:80%;
    margin:0 auto;
}
.mainPost article figure{
    width:80%;
    margin:0 auto;
}
.mainPost article figure img{
    width:100%;
}
.mainPost{
    width:80%;
    margin:10px auto;
    box-shadow:3px 3px 3px 3px rgba(170, 160, 160, 0.8),3px 3px 3px rgba(211, 206, 206, 0.7);
    padding:10px 30px;
    background:#fff;
}
#mainArticle h2{
    color:#5c5959;
    font-size:1.3rem;
    padding:10px 0;
    text-transform: uppercase;
}
.mainPost hr{
    animation:none;
    width:100%;
    height:2px;
    background:rgba(223, 219, 219, .4);
    
}
.mainPost article{
    font-size:.9rem;
    color:rgb(48, 46, 46);
    margin-top:10px;
    text-align:justify;
}
.published{
    display:flex;
    justify-content:space-between;
    align-items: center;
}
.published h4{
    color:#3a3838;
    padding:10px 0 30px 0;
}
#mainArticle aside{
    margin-top:40px;
}
#mainArticle aside h3{
    color:rgb(85, 83, 83);
    font-size:1.3rem;
    padding:10px;
    text-transform: uppercase;
}
#mainArticle aside .relatedArticles{
    display:flex;
    justify-content: space-around;
    flex-wrap:wrap;
}
#mainArticle aside figure{
    width:24%;
    box-shadow:3px 3px 3px 2px #c4c4c4;
    background:#fff;
}
#mainArticle aside figure a{
    color:#3a3838
}
#mainArticle aside figure a:hover{
    opacity:0.8;
}
#mainArticle aside figure img{
    width:100%;
}
#mainArticle aside figure figcaption{
    padding:10px;
    font-size:1.1em;
    color:#634d4d;
    text-transform: uppercase;
}
/* academy */
#existence .training{
    display:flex;
    flex-wrap:wrap;
    justify-content: space-between;
}
#existence .training .text{
    width:45%;
}
#existence .training img{
    width:48%;
}
/* mobile version */
@media screen and (max-width:800px){
    #topHeader{
        padding:5px;
        justify-content: space-around;
        align-items: center;
    }
    .main_header h1{
        width:50vw;
        margin-left:30px;
    }
    .new_header h1{
        width:50vw;

        margin-left:30px;
        
    }
    .main_header h1 img{
        height:13vh;
        width:100%;
    }
    .new_header h1 img{
        width:100%;
        height:10vh;
    }
    .menu-icon{
        display:block;
        margin-right:20px;
    }
    .menu-icon i{
        font-size:2.5rem;
    }
    .main_header .menu-icon a{
        color:#fff;
    }
    .new_header .menu-icon a{
        color:var(--tertiaryColor);
    }
    #navigation{
        display:none;
        position:absolute;
        margin:0;
        top:100%;
        left:0;
        opacity:0;
        width:0%;
        box-shadow:2px 2px 2px #c4c4c4;
        background:#fff;
        animation:0.4s dropDown 1;
        animation-fill-mode:forwards;
        animation-timing-function: linear;
    }
    @keyframes dropDown{
        100%{
            opacity:1;
            width:100%;

        }
    }
    nav ul li{
        display:block;
        margin:0;
        padding:0;
        border-top:1px solid rgba(163, 158, 158, 0.3);
    }
    nav ul li a{
        color:#222!important;
        padding:10px;
        display:block;
        margin:0;
        font-size:.8rem;
    }
    nav ul li a:hover{
        background:var(--secondaryColor);
        border-bottom:none;
        color:#fff!important;
    }
    nav ul li a i{
        float:right;
    }
    nav ul li ul{
        left:50%;
        top:0;
        border:1px solid var(--secondaryColor);
    }
    .slide .taglines{
        top:40vh;
        width:80%;
        height:100%;
        margin:0 auto;
        left:0;
    }
    .slide .taglines2{
        margin:0 auto;
        left:0;
    }
    .taglines h2{
        padding:10px 5px;
        font-size:1.1rem;
        
    }
    .taglines p{
        font-size:1rem;
        margin:10px 0;
        width:80%;
    }
    .taglines a{
        padding:10px;
        letter-spacing: 2px;
        
    }
    #aboutUs{
        margin:60px auto;
    }
    #services{
        width:90%;
        margin:70px auto;
    }
    .services figure{
        width:45%;
        margin:5px;
    }
    #whyChoose{
        flex-direction:column;
        height:auto;
    }
    #whyChoose img{
        width:100%;
        height:70%;
    }
    #whyChoose .choose_text{
        height:100%;
        width:100%;
    }
    #whyChoose .choose_text .texts{
        height:100%;
        overflow:scroll;
    }
    #whyChoose .choose_text .texts li{
        margin:20px 30px;
        
    }
    #recentWork{
        width:90%;
    }
    #recentWork p{
        font-size:1rem;
    }
    #recentWork .categories button{
        padding:5px 10px;
        font-size:.9rem;
    }
    #recentWork .categories button:hover{
        background:var(--secondaryColor);
        color:#fff;
    }
    .recentjobs figure{
        width:32%;
        margin:.1rem;
    }
    .recentjobs figure figcaption h3{
        text-transform: uppercase;
        color:#fff;
        font-size:.9rem;
    }
    #callToAction .takeAction{
        width:60%;
    }
    #callToAction .takeAction h3{
        font-size:1.8rem;
        margin-bottom:10px;
        letter-spacing: 3px;
    }
    #callToAction .takeAction p{
        font-size:1rem;
    }
    #callToAction .takeAction button{
        padding:10px 15px;
    }
    #callToAction .takeAction button:hover{
        padding:10px 15px;
        transform:scale(1.2);
    }
    #clients .clientele{
        flex-wrap:wrap;
    }
    /* about hero */
    #hero{
        min-height:300px;
    }
    #hero .hero_notes{
        flex-wrap:wrap;
        margin:10px 0;
    }
    #hero .hero_notes .note{
        width:150px;
        height:150px;
        margin:10px 0;
    }
    #hero .hero_notes .note h3{
        font-size:1.9rem;
    }  
    #hero .hero_notes .note p{
        font-size:1rem;
    }
    #trends{
        width:90%;
    }
    
    .trendPosts{
        flex-wrap: wrap;
        justify-content:center;
        margin-top:10px;
    }
    .trendPosts article{
        width:45%;
        margin:10px;
    }
    .trendPosts article:hover h3{
        font-size:1rem;
    }
    .mainFooter1{
        flex-direction: column;
        justify-content: space-around;
        padding:40px 0;
    }
    .contactAddress{
        width:100%;
    }
    .address p{
    color: rgb(231, 226, 226);
    }
    .subscribe_category{
        width:90%;
        margin:0 auto 10px auto;
        text-align:center;
    }
    .subscribe, .socialMedia{
        padding-bottom:20px;
    }
    .subscribe input[type='email']{
        padding:10px 15px;
    }
    .socialMedia_workHours{
        width:90%;
        margin:0 auto;
        text-align:center;
    }
    .categories li a{
        text-transform: uppercase;
    }
    .secondaryFooter{
        padding:10px;
    }
    .toTop{
        padding:5px;
    }
    /* about page */
    #aboutBanner{
        height:40vh;
    }
    .about_banner .slide .taglines{
        top:80%;
        margin-right:0;
    }
    .story{
        flex-wrap:wrap;
        align-items: flex-start;
    }
    .story img{
        width:47%;
    }
    /* about purpose */
    #purpose{
        width:70%;
    }
    /* core values */
    #values{
        flex-wrap:wrap;
    }
    #values img{
        min-height:400px;
    }
    #values .values{
        width:50%;
    }
    #values .values h2{
        margin:10px 0;
    }
    /* services page */
    #ourServices{
        width:90%;
        margin:70px auto;
    }
    #ourServices .service{
        flex-wrap:wrap;
    }
    #ourServices .service .service_description{
        padding:0;
        margin:0;
    }
    #ourServices .service .service_description h2{
        padding:5px;
        font-size:1.2rem;
    }
    #ourServices .service .service_description a{
        padding:10px;
       
    }
    /* portfolio page */
    
    #ourPortfolio{
        margin:70px auto;
        width:90%;
        flex-wrap:wrap;
    }
    .work{
        width:31%;
        margin:10px 5px;
    }
    
    .work .work_info .descriptions p{
        font-size:1rem;
    }
    /* the blog */

    #blogposts{
        width:90%;
        margin:70px auto;
    }
    .posts{
        width:32%;
        margin:10px 3px;
    }
    .posts img{
        height:150px;
    }
    .posts figure a{
        font-size:1.1rem; 
    }
    /* contact page */
    .cont{
        flex-wrap:wrap;
    }
    .cont img{
        width:49%;
        margin:2px;
    }
    
    #contactForm{
        width:100%;
    }
    .blogArticles{
        height:200px;
    }
    .mainPost article{
        text-align:justify;
    
    }
    .mainPost article img{
        width:100%;
    }
    #mainArticle aside .relatedArticles{
        flex-wrap: wrap;
    }
    #mainArticle aside figure{
        width:45%;
        margin:10px;
    }
    #mainArticle aside h3{
        text-align: center;
    }
}
@media screen and (max-width:600px){
    .about_us{
        flex-direction:column;   
    }
    .about_us p{
        width:100%;
        margin-bottom:10px;
    }
    .about_us img{
        width:100%;
        height:250px;
    }
    .services figure{
        width:48%;
        margin:10px 3px;
    }
    .services figure img{
        height:150px;
        border:3px solid #fff;
    }
    .services figure figcaption{
        padding:2px;
    }
    /* #whyChoose{
        height:auto;
        flex-direction:column;
    }
    #whyChoose img{
        width:100%;
        height:auto
    }
    #whyChoose .choose_text{
        width:100%;
        height:auto;
    }
    #whyChoose .choose_text .chooseImg{
        width:100%;
        height:100%;
    }
    #whyChoose .choose_text .chooseImg img{
        width:100%;
        height:100%;
    }
    #whyChoose .choose_text .texts{
        width:100%;
    } */
    #whyChoose .choose_text .texts h2{
        margin-top:20px;
    }
    #whyChoose .choose_text .texts ul{
        margin-top:2px;
        padding:2px;
    }
    #whyChoose .choose_text .texts li{
        margin:20px 20px;
    }
    .recentjobs figure{
        width:48%;
    }
    #callToAction .takeAction{
        width:80%;
        margin:0 auto;
        left:0;
    }
    #callToAction .takeAction h3{
        font-size:1.7rem;
    }
    /* about hero */
    #hero{
        min-height:400px;
    }
    #hero .hero_notes .note{
        width:160px;
        height:160px;
        margin:10px 0;
    }
    .trendPosts article{
        width:80%;
        margin:10px;
    }
    /* about page */
    #aboutBanner{
        height:35vh;
    }
    .about_banner .slide .taglines{
        top:70%;
        margin-right:0;
        
    }
    #existence h2{
        text-align:center;
    }
    .story p{
        width:100%;
        margin:auto;
        text-align: justify;
    }
    .story img{
        width:100%;
        margin:10px auto;
    }
    /* about purpose */
    #purpose{
        width:80%;
        margin:70px auto;
    }
    #values img{
        width:100%;
        height:auto;
    }
    #values .values{
        width:100%;
    }
    #values .values ul li{
        font-size:1rem;
    }
    #ourServices{
        width:80%;
    }
    #ourServices .service .service_description{
        width:100%;
        margin-bottom:10px;
    }
    #ourServices .service .service_image{
        width:100%;
    }
    /* portfolio page */
    
    .work{
        width:47%;
    }
    /* blog */
    .posts{
        width:48%;
    }
    .posts figure a{
        font-size:1rem; 
    }
    /* contact page */
    .contactInfo{
        width:100%;
    }
    .cont img{
        width:100%;
       margin-top:20px;
    }
    .cont p{
        width:100%;
    }
    #contactForm{
        width:100%;
    }
    #contactForm legend{
        font-size:1.3rem;
    }
    #contactForm input{
        width:100%;
    }
    #contactForm textarea{
        width:100%;
    }
    .mainPost{
        width:100%;
    }
    #mainArticle{
        width:95%;
    }
    .mainPost h2{
        animation: none;
    }
    .mainPost article{
        font-size:1rem;
    }
    /* #mainArticle aside .relatedArticles{
        flex-direction:column;
    } */
    #mainArticle aside figure{
       /*  width:80%; */
        margin:20px auto;
    }
    #mainArticle aside h3{
        text-align: center;
    }
    #mainArticle aside .relatedArticles figcaption{
        font-size:.9rem;
        text-align:justify;
    }
    .published{
        flex-direction:column;
        margin-bottom:5px;

    }
    #existence .training .text{
        width:100%;
    }
    #existence .training img{
        width:100%;
    }
}