@font-face{
    font-family: 'oleoscript-regular';
    src:url("Fonts/OleoScript-Regular.woff"),
        url("Fonts/OleoScript-Regular.woff2");
}

@font-face{
    font-family: 'raleway';
    src:url("Fonts/Raleway.woff"),
        url("Fonts/Raleway.woff2");
}

@font-face{
    font-family: 'raleway-medium';
    src:url("Fonts/Raleway-Medium.woff"),
        url("Fonts/Raleway-Medium.woff2");
}

@font-face{
    font-family: 'relway-light';
    src:url("../Fonts/Raleway-Light.woff"),
        url("../Fonts/Raleway-Light.woff2");
}

@font-face{
    font-family: 'raleway-semibold';
    src:url("Fonts/Raleway-SemiBold.woff"),
        url("Fonts/Raleway-SemiBold.woff2");
}

@font-face{
    font-family: 'open-sans';
    src:url("../Fonts/OpenSans.woff"),
        url("../Fonts/OpenSans.woff2");
}

body{
    padding:0;
    margin:0;
}

/* Top nav bar */
.main-nav{
    width:100%;
    height: 60px;
    background-color:#303030;
}

.nav-content{
    width: 770px;
    height:60px;
    margin: auto;
}

.nav-content #brand{
    margin:0;
    padding:0;
    color:#ffffff;
    font-size:29.77pt;
    font-weight:bold;
    font-family: 'oleoscript-regular';
    float:left;
    

}

.nav-content ul{
    list-style: none;
    float:right;
    margin-top:15px;
    
}

.nav-content ul li{
    display:inline-block;
    color:#f6f6f6;
    margin-right:20px;
}

.nav-content ul li a{
    text-decoration: none;
    color:#f6f6f6;
    font-size:7.52pt;
    text-transform: uppercase;
    font-family: 'raleway';
    font-weight: normal;
    font-style: normal;
    padding-bottom:14px;
}

.nav-content ul li a:hover{
    border-bottom: solid 5px #7b6c63;
}

/* First section */

.showcase{
    width:100%;
    height:420px;
    background-color:#050301;
}

.showcase .showcase-content{
    width:770px;
    height:420px;
    margin:auto;
}

.showcase-content p{
    margin:0;
    padding:0;
    color:#ffffff;
    font-size: 15pt;
    text-transform: uppercase;
    font-family: 'raleway-medium';
    font-weight:normal;
    padding-top:115px;
}

.showcase-content h1{
    font-family: 'raleway';
    text-transform: uppercase;
    font-size: 41.25pt;
    color:#ffffff;
    font-weight: normal;
    margin-top:0;
}

.showcase-content h1 span{
    color:#7b6c63;
}

.showcase-content button{
    width:170px;
    height:40px;
    background-color:#26231f;
    color:#ffffff;
    font-size:10pt;
    font-family: 'raleway';
    font-weight:normal;
    text-align: center;
    border:none;
    margin-bottom:115px;
    cursor:pointer;
}

/* Know about us section */

.about-us{
    width:100%;
    height:230px;
    background-color:#ffffff;
}

.about-us .container{
    width: 770px;
    height:230px;
    margin:auto;
}

.about-us h1{
    font-family: 'raleway-semibold';
    font-weight: normal;
    font-size: 25pt;
    text-align: center;
    color:#7b6c63;
    margin-top:55px;
    text-transform: uppercase;
}

.about-us h1:after{
    content:"";
    display:block;
    margin: 0 auto;
    width: 48px;
    padding-top: 30px;
    border-bottom: solid 5px #7b6c63;
}

.about-us p{
    font-family: 'raleway';
    font-weight: lighter;
    font-size: 11.25pt;
    text-align: center;
    color: #212121;
    line-height: 2em;
    margin-bottom:60px;
}

/* we are the best section */

.uniqueness{
    width:100%;
    height:360px;
    background-color:#f5f5f5;
}

.uniqueness .container{
    width:1100px;
    height: 360px;
    margin-left:auto;
}

.uniqueness h2{
    font-family: 'raleway-medium';
    font-size: 15pt;
    font-weight: normal;
    color:#7b6c63;
    text-transform: uppercase;
    float:left;
    clear:left;
    margin-top:55px;
    
}

.uniqueness p{
    font-family: 'raleway';
    font-size: 10pt;
    font-weight: lighter;
    color: #212121;
    float:left;
    clear:left;
    line-height:15px;
    word-spacing:5px;
}

.uniqueness button{
    font-family: 'raleway';
    font-size:10pt;
    font-weight:normal;
    text-transform: uppercase;
    background-color:#f5f5f5;
    width:115px;
    height:30px;
    border:solid 1px black;
    float:left;
    clear:left;
    margin-bottom:55px;
    margin-top:25px;
    cursor:pointer;

}

.uniqueness img{
    height: 360px;
    width:590px;
    float:right;
}

/* services we provide - section */

.services{
    width:100%;
    height:345px;
    background-color: #ffffff;
}

.services .container{
    width:770px;
    height:345px;
    margin:auto;
}

.services h1{
    font-family: 'raleway-semibold';
    font-size: 15pt;
    font-weight:normal;
    text-transform: uppercase;
    text-align: center;
    color:#7b6c63;
    margin-top:55px;
}

.services p{
    text-align: center;
    font-family: 'raleway';
    font-size: 10pt;
    font-weight:lighter;
    color:#000000;
    margin-top:25px;
    line-height: 1.5em;
}

 .services .services-provided{
    display:flex;
    justify-content: space-between;
    margin-bottom:50px;
}

.services .services-provided .service h1{
    font-family: 'raleway';
    font-size: 11.25pt;
    font-weight: normal;
    text-transform: uppercase;
    text-align: center;
    margin:0;
    margin-top:20px;
}

.services .services-provided .service p{
    font-family: 'raleway';
    font-size: 9.98pt;
    font-weight:lighter;
    text-align:center;
    color:#b3b3b3;
}

.services .services-provided .service img{
    display:block;
    margin:auto;
    width:25px;
    height:25px;
    margin-top:40px;
}

/* Our Skills Section */

.our-skills{
    width:100%;
    height:290px;
    background-image: url("../images/skills-bg_03.gif");
    background-size: cover;
}

.our-skills .container{
    width:770px;
    height:290px;
    margin:auto;
}

.our-skills h1{
    font-family: 'raleway-semibold';
    font-size:15pt;
    font-weight:bold;
    color:#ffffff;
    text-transform: uppercase;
    text-align: center;
    padding-top:65px;
}

.our-skills .skills{
    display: flex;
    justify-content: space-between;
}

.our-skills .skills .single-skill{
    width:105px;
    height:105px;
    border-radius:50%;
    border: solid 3px #7b6c63;
}

.our-skills .skills .single-skill .circle{
    width: 95px;
    height: 95px;
    border-right: 3px solid white;
    border-top: 3px solid white;
    border-left: 3px solid transparent;
    border-bottom: 3px solid white;
    border-top-left-radius: 60px;
    border-top-right-radius: 60px;
    border-bottom-left-radius: 60px;
    border-bottom-right-radius: 60px;
    margin-left:2px;
    margin-top:1px;
}


.our-skills .skills .single-skill .percentage{
    font-family: 'open-sans';
    font-size: 10pt;
    font-weight:bold;
    color:#fff;
    text-align: center;
    padding-top:30px;
}

.our-skills .skills .single-skill .skill-name{
    font-family: 'raleway';
    font-size: 10pt;
    font-weight:normal;
    text-align:center;
    color:#fff;
    margin-top:70px;
}

/* Recent Projects Section */

.recent-projects{
    width:100%;
    height:225px;
    background-color:#ffffff;
    
}

.recent-projects .container{
    width:770px;
    height:225px;
    margin:auto;
}

.recent-projects h1{
    font-family: 'raleway-semibold';
    font-weight: normal;
    font-size: 24.97pt;
    text-align: center;
    color:#7b6c63;
    margin-top:55px;
    text-transform: uppercase;
}

.recent-projects h1:after{
    content:"";
    display:block;
    margin: 0 auto;
    width: 48px;
    padding-top: 30px;
    border-bottom: solid 5px #7b6c63;
}

.recent-projects p{
    font-family: 'raleway';
    font-weight: lighter;
    font-size: 11.24pt;
    text-align: center;
    font-style: normal;
    color: #212121;
    line-height: 2em;
}

/* Project Images Section */

.images{
    width:100%;
    height: 220px;
}

.images .project .proj-overlay{
    width:300px;
    height:195px;
    background-color:rgba(0,0,0,0.7);
    position:absolute;
    top:15px;
    left:30px;
    visibility:hidden;
}

.images .project:hover .proj-overlay{
    visibility:visible;
    cursor:pointer;
}

.images .project .proj-overlay h1{
    color:#fff;
    font-family:'raleway-medium';
    font-size: 11.25pt;
    font-weight: normal;
    text-transform: uppercase;
    text-align:center;
    margin-top:60px;
}

.images .project .proj-overlay h1:after{
    content:'';
    display:block;
    margin: 0 auto;
    width: 20px;
    padding-top: 10px;
    border-bottom: solid 3px #fff;
}

.images .project .proj-overlay p{
    color:#fff;
    font-family: 'raleway-light';
    font-size: 8.75;
    font-weight: normal;
    text-transform: uppercase;
    text-align: center;
}

.images .proj1{
   width:25%;
   height:220px;
   float:left;
   background-image: url("../images/sample-projects_02.gif");
   background-size:cover;
   position:relative;
}

.images .proj2{
    width:25%;
    height:220px;
    float:left;
    background-image: url("../images/sample-projects_04.gif");
    background-size:cover;
    position:relative;
 }

 .images .proj3{
    width:25%;
    height:220px;
    float:left;
    background-image: url("../images/sample-projects_05.gif");
    background-size:cover;
    position:relative;
 }

 .images .proj4{
    width:25%;
    height:220px;
    float:left;
    background-image: url("../images/sample-projects_06.gif");
    background-size:cover;
    position:relative;
 }

/* Latest Update from Twitter Section */

.latest-update{
    width: 100%;
    height: 247px;
    background-color: #1a1a1a;
}

.latest-update .container{
    width:770px;
    height:247px;
    margin:auto;
    text-align:center;
}

.latest-update h1{
    color:#fff;
    font-family: 'raleway-semibold';
    font-size:15pt;
    font-weight:bold;
    text-transform: uppercase;
    padding-top: 85px;
    margin:0;
}

.latest-update p{
    color:#fff;
    font-family: 'raleway';
    font-size: 11.25pt;
    font-weight:bold;
}

.latest-update a{
    color:#29c5f2;
    font-family: 'raleway';
    font-size: 11.25pt;
    font-weight: bold;
    text-decoration: none;
    margin-bottom: 85px;
}

.latest-update a:hover{
    color:#fff;
    text-decoration: underline;
}

/* Second Project Images Section */

.images2{
    width:100%;
    height:220px;
}

.images2 .project .proj-overlay{
    width:300px;
    height:195px;
    background-color:rgba(0,0,0,0.7);
    position:absolute;
    top:15px;
    left:30px;
    visibility:hidden;
}

.images2 .project:hover .proj-overlay{
    visibility:visible;
    cursor:pointer;
}

.images2 .project .proj-overlay h1{
    color:#fff;
    font-family:'raleway-medium';
    font-size: 11.25pt;
    font-weight: normal;
    text-transform: uppercase;
    text-align:center;
    margin-top:60px;
}

.images2 .project .proj-overlay h1:after{
    content:'';
    display:block;
    margin: 0 auto;
    width: 20px;
    padding-top: 10px;
    border-bottom: solid 3px #fff;
}

.images2 .project .proj-overlay p{
    color:#fff;
    font-family: 'raleway-light';
    font-size: 8.75;
    font-weight: normal;
    text-transform: uppercase;
    text-align: center;
}

.images2 .projx1{
    width:25%;
    height:220px;
    float:left;
    background-image: url("../images/sample-projects_02.gif");
    background-size:cover;
    position:relative;
}

.images2 .projx2{
    width:25%;
    height:220px;
    float:left;
    background-image: url("../images/sample-projects_04.gif");
    background-size:cover;
    position:relative;
 }

 .images2 .projx3{
    width:25%;
    height:220px;
    float:left;
    background-image: url("../images/sample-projects_05.gif");
    background-size:cover;
    position:relative;
 }

 .images2 .projx4{
    width:25%;
    height:220px;
    float:left;
    background-image: url("../images/sample-projects_06.gif");
    background-size:cover;
    position:relative;
 }

 /* See All Section */

 .see-all{
     width:100%;
     height: 145px;
     background-color:#fff;
 }

 .see-all .container{
     width: 770px;
     height: 145px;
     margin:auto;
     text-align:center;
 }

 .see-all button{
     width:105px;
     height:35px;
     border: solid 1px black;
     border-radius: 2px;
     margin-top:55px;
     font-family: 'raleway';
     font-size: 10pt;
     font-weight: normal;
     text-transform: uppercase;
 }

 /* Our Team Members Section */

 .our-team{
     width:100%;
     height:585px;
     background-color:#f5f5f5;
 }

 .our-team .container{
     width:770px;
     height:585px;
     margin:auto;
 }

 .our-team h1{
     color:#7b6c63;
     font-family: 'raleway-semibold';
     font-size:24.97pt;
     font-weight:normal;
     text-transform: uppercase;
     padding-top:55px;
     text-align:center;
 }

 .our-team h1:after{
     content:'';
     display:block;
     margin:0 auto;
     width:48px;
     border-bottom: solid 5px #7b6c63;
     margin-top:30px;

 }

 .our-team p{
     font-family: 'raleway';
     font-size: 11.24pt;
     font-weight: lighter;
     text-align:center;
     margin-top:30px;
 }

.our-team .members{
    display:flex;
    justify-content: space-between;
    margin-top:55px;
}

.our-team .members .member-overlay{
    width:230px;
    height:230px;
    background-color:rgba(0,0,0,0.8);
    position:absolute;
    top:0;
    left:0;
    text-align: center;
    visibility:hidden;
}

.our-team .members .member1:hover .member-overlay{
    visibility: visible;
}

.our-team .members .member2:hover .member-overlay{
    visibility: visible;
}

.our-team .members .member3:hover .member-overlay{
    visibility: visible;
}

.our-team .members .member-overlay a{
    display:inline-block;
    margin-top: 100px;
}

.our-team .members .position{
    width:230px;
    height:65px;
    border: solid 2px lightgray;
    margin-top: 245px;
}

.our-team .members .member1:hover .position{
    border: solid 2px black;
    cursor:pointer;
}

.our-team .members .member2:hover .position{
    border: solid 2px black;
    cursor:pointer;
}

.our-team .members .member3:hover .position{
    border: solid 2px black;
    cursor:pointer;
}

.our-team .members .position h2{
    color:#525252;
    font-family:'raleway';
    font-size: 14.99pt;
    font-weight: normal;
    text-align: center;
    text-transform: uppercase;
    margin:0;
    margin-top:15px;
}

.our-team .members .position h4{
    color:#525252;
    font-size: 8.74pt;
    font-weight:normal;
    text-align: center;
    text-transform: uppercase;
    margin:0;

}

 .our-team .member{
     width:230px;
     height:310px;
     background-color: gray;
 }

 .our-team .member1{
     width:230px;
     height:230px;
     background-image: url("../images/team-member_03.gif");
     position:relative;
 }

 .our-team .member2{
    width:230px;
    height:230px;
    background-image: url("../images/team-member_03.gif");
    position:relative;
}

.our-team .member3{
    width:230px;
    height:230px;
    background-image: url("../images/team-member_03.gif");
    position:relative;
}

/* What Our Clients Say Section */

.testimonials{
    width:100%;
    height:285px;
    background-color:#1a1a1a;
}

.testimonials .container{
    width:770px;
    height:285px;
    margin:auto;
    text-align:center;
}

.testimonials h1{
    color:#fff;
    font-family:'raleway-semibold';
    font-size: 15pt;
    font-weight:normal;
    text-transform: uppercase;
   
    margin:0;
    padding-top:55px;
}

.testimonials p{
    color:#929292;
    font-family: 'raleway-light';
    font-size: 11.25pt;
    font-weight:normal;
    
    margin-top:30px;
}

.testimonials h3{
    color:#7b6c63;
    font-family: 'raleway';
    font-size: 11.25pt;
    font-weight:normal;
    margin-top:35px;
}

.testimonials a{
    text-decoration: none;
    color:#29c5f2;
    font-family: 'raleway-light';
    font-size: 10pt;
    font-weight:normal;
}

.testimonials a:hover{
    color:#fff;
    text-decoration: underline;
}

.testimonials .ellipse{
    display:inline-block;
    background-color:none;
    width:10px;
    height:10px;
    border-radius: 50%;
    border:solid 1px #fff;
    margin-top:20px;
}

.testimonials .ellipse:hover{
    background-color: #fff;
    cursor:pointer;
}


/* ---------Our Blog Section ---------- */

.our-blog{
    width:100%;
    height:975px;
    background-color: #fff;
}

.our-blog .container{
    width:820px;
    height:975px;
    margin:auto;
}

.our-blog h1{
    font-family: 'raleway-semibold';
    font-weight: normal;
    font-size: 24.97pt;
    text-align: center;
    color:#7b6c63;
    padding-top:55px;
    text-transform: uppercase;
}

.our-blog h1:after{
    content:"";
    display:block;
    margin: 0 auto;
    width: 48px;
    padding-top: 30px;
    border-bottom: solid 5px #7b6c63;
}

.our-blog p{
    font-family: 'raleway';
    font-weight: lighter;
    font-size: 11.24pt;
    text-align: center;
    font-style: normal;
    color: #212121;
    line-height: 2em;
    margin-bottom:55px;
}

.our-blog .blog-posts{
    width:820px;
    height:690px;
}

.our-blog .blog-posts .blog{
    height:170px;
    width:740px;
    margin-bottom:40px;
    margin-left:80px;
}

.our-blog .blog-posts .blog2{
    height:170px;
    width:740px;
    margin-bottom:40px;
    margin-right:80px;
}

.our-blog .blog-posts .blog img{
    float:left;
}

.our-blog .blog-posts .blog2 img{
    float:right;
}

.our-blog .blog-posts .blog .content{
    float:right;
    height:170px;
    margin:0;
    padding:0;
    text-align: left;
}

.our-blog .blog-posts .blog2 .content{
    float:left;
    height:170px;
    margin:0;
    padding:0;
    text-align: right;
}

.our-blog .blog-posts .blog .content h4, .our-blog .blog-posts .blog2 .content h4{
    font-family: 'raleway-medium';
    font-size:10pt;
    font-weight:lighter;
    color:#7b6c63;
    margin:0;
}

.our-blog .blog-posts .blog .content h2, .our-blog .blog-posts .blog2 .content h2{
    font-family: 'raleway';
    font-size: 15pt;
    font-weight: lighter;
    color:#212121;
}

.our-blog .blog-posts .blog .content p{
    font-family: 'raleway';
    font-size: 10pt;
    font-weight: lighter;
    color:#949494;
    line-height: 20px;
    text-align: left;
}

.our-blog .blog-posts .blog2 .content p{
    font-family: 'raleway';
    font-size: 10pt;
    font-weight: lighter;
    color:#949494;
    line-height: 20px;
    text-align: right;   
}

.our-blog .blog-posts .blog .content p span, .our-blog .blog-posts .blog2 .content p span{
    color:#7b6c63;
    font-weight:bold;
}



/* -------Contact Form Section ------ */

.contact{
    width:100%;
    height:380px;
    background-color:#f5f5f5;
}

.contact .container{
    width:770px;
    height:380px;
    margin:auto;
}

.contact h1{
    font-family: 'raleway-semibold';
    font-weight: normal;
    font-size: 24.97pt;
    text-align: center;
    color:#7b6c63;
    padding-top:55px;
    margin-bottom:0;
    text-transform: uppercase;
}

.contact form{
    display: block;
    text-align: center;
}

.contact form input[type="text"]{
    width:230px;
    height:20px;
    background-color:#f5f5f5;
    border:none;
    border-top:solid 3px #242424;
    margin:55px 20px 30px 0;
    direction: ltr;
    text-indent: 10px;
}

.contact form input[type="text"]:focus{
    outline:none;
}

.contact form input[type="email"]{
    width:230px;
    height:20px;
    background-color:#f5f5f5;
    border:none;
    border-top:solid 3px #242424;
    margin:5px;
    direction: ltr;
    text-indent: 10px;
}

.contact form input[type="email"]:focus{
    outline:none;
}

.contact form textarea{
    width:485px;
    height:90px;
    background-color:#f5f5f5;
    border:none;
    border-top: solid 3px #242424;
    border-bottom: solid 1px #242424;
    direction: ltr;
    text-indent: 10px;
    margin-bottom:20px;
    resize:none;
}

.contact form textarea:focus{
    outline:none;
}

.contact form input[type="submit"]{
    width:105px;
    height:30px;
    border: solid 1px black;
    background-color: #f5f5f5;
}

.contact form input[type="submit"]:focus{
    outline:none;
}

/* Footer Section */

footer{
    width:100%;
    height:255px;
    background-color:#222222;
}

footer .container{
    width: 900px;
    height: 255px;
    margin:auto;
    padding-top: 20px;
}

footer .mairala{
    float: left;
    width:220px;
}

footer .mairala h1{
    margin:0;
    color: #7b6c63;
    font-family: 'oleoscript-regular';
    font-size: 29.75pt;
    font-weight:normal;
}

footer .mairala p{
    color:#929292;
    font-family: 'raleway';
    font-size: 8.74pt;
    font-weight: lighter;
    line-height:15px;
}

footer .recent-posts{
    float:left;
    width: 200px;
    margin-right: 30px;
}

footer .recent-posts h1{
    color: #c2c2c2;
    font-family: 'raleway';
    font-size: 11.24pt;
    font-weight: normal;
    text-transform: uppercase;
}

footer .recent-posts .post h5{
    color:#5f5f5f;
    font-family: 'raleway';
    font-size: 6.24pt;
    font-weight: lighter;
    margin:0;
}

footer .recent-posts .post h5[class="date"]{
    line-height:9px;
}

footer .recent-posts .post span{
    color: #7b6c63;
    font-family: 'raleway';
    font-size: 8.74pt;
    font-weight: normal;
}

footer .recent-posts .post h3{
    color: #929292;
    font-family: 'raleway';
    font-size: 8.74pt;
    font-weight: normal;
    margin:0;
    margin-bottom:20px;
}

footer .recent-posts .post hr{
    margin-bottom: 20px;
}

footer .our-address{
    float:left;
    width:200px;
}

footer .our-address h1{
    color: #c2c2c2;
    font-family: 'raleway';
    font-size: 11.24pt;
    font-weight: normal;
    text-transform: uppercase;
}

footer .our-address p{
    color:#929292;
    font-family: 'raleway';
    font-size: 8.74pt;
    font-weight: lighter;
    line-height:15px;
}

/* Copyright Section */

.copyright{
    width:100%;
    height:40px;
    background-color:#1c1c1c;
    border-top: dotted 2px white;
}

.copyright p{
    display:block;
    text-align: center;
    color:#595959;
    font-family: 'raleway-light';
    font-size: 10.12pt;
    font-weight: normal;
}