@media (max-width:1199px){

/* home page start */





/* header start */



/* #home{

    min-height: 100vh;

    background: url(../images/%208995.png) no-repeat;

    background-size: cover;

    background-position: center;

    align-items: center;

    display: flex;

} */





.section1 .menu-heads{

    display: block;

    margin: 0 auto;

    text-align: center;

}



.section1 .menu-heads h1{

    font-size: 60px;

    font-family: sayaBd;

    text-transform: uppercase;

    color: #fff;

    text-align: center;

}

.section1 .menu-heads .subtitle{

    text-transform: uppercase;

    font-family: sayaBd;

    color: #fff;

}

.section1 .menu-heads .subtitle i{

    padding: .5rem;

}

.section1 .menu-heads .subtitle a{

    color: #fff;

    font-family: sayaBd;

}



/* header end */



/* section 2 start */



.section2{

    margin: 30px 0;

}

.section2 .mainhead{

    text-align: center;

    font-family: saya;

    font-size: 40px;

    color: var(--black);

}

.section2 .subtitle{

    color: #676767;

    text-align: center;

    padding: 20px 0;

    border-bottom: .1rem solid #cbcbcb;

    font-size: 20px;

}

.section2 .designs{

    padding: 20px;

}



.section2 .designs .number{

    text-align: right;

}

.section2 .designs  h3{

    color: #fff;

    margin-top: 10px;

    font-family: saya;

    font-size: 36px;

}

.section2 .designs .number h3{

    color: #fff;

    margin-top: 10px;

    font-family: saya;

    font-size: 41 px;

}

.section2 .designs p{

    color: #fff;

    margin-top: 10px;

    font-size: 24px;

}

.section2 .designs a{

    color: #fff;

    text-transform: uppercase;

    font-size: 16px;

}

.section2 .designs a i{

    padding: 3px 5px;

    border: 1px solid ;   

    border-radius: 50%;

    font-size: 9px;

    margin-left: 10px;

}

.section2 .designs .design1{

    background-image: url(../images/Group-9004.jpg);

    background-size: cover;

    padding: 3rem 3rem 3rem 4rem;

    margin-bottom: 30px;

 }

.section2 .designs .design2{

    background-image: url(../images/Group-8997.jpg);

    background-size: cover;

    padding: 3rem 3rem 3rem 4rem;

    margin-bottom: 30px;

 }

 .section2 .designs .design3{

    background-image: url(../images/Group-8998.jpg);

    background-size: cover;

    padding: 3rem 3rem 3rem 4rem;

    margin-bottom: 30px;

 }

 .section2 .designs .design4{

    background-image: url(../images/Group-8999.jpg);

    background-size: cover;

    padding: 3rem 3rem 3rem 4rem;

    margin-bottom: 30px;

 }

 .section2 .designs .design5{

    background-image: url(../images/Group-9000.jpg);

    background-size: cover;

    padding: 3rem 3rem 3rem 4rem;

    margin-bottom: 30px;

 }

 .section2 .designs .design6{

    background: #252222;

    padding-top: 3.5rem;

    padding-bottom: 3.5rem;

    padding-left: 4rem;

    margin-bottom: 30px;

 }

 .section2 .designs .design6 h3{

    margin-top: 0;

    margin-bottom: 20px;

    font-size: 36px;

 }

 .section2 .designs .design6 .booking-btn{

    border: 2px solid;

    padding: .6rem 2rem;

    margin-top: 10px;

    background-color: #191818;

    transition: .8s ease;

    font-size: 15px;

 }

 .section2 .designs .design6 .booking-btn:hover{

    letter-spacing: .2rem;

 }



.section2 .comment{

    padding: 0 3rem;

    

}

.section2 .comment .comment-posi{

    box-shadow: 0px 5px 8px #e5e5e5 , -0px -5px 8px #e5e5e5;

    margin: 5px;

}

.section2 .comment .comment-posi .comment-bg{

    position: relative;

    padding: 30px 0;

    text-align: end;

    height: auto;

}

.section2 .comment .comment-posi .comment-bg .comment-bg-hover{

    position: absolute;

    top: 1px;

    transform: translate();

}



.section2 .comment .comment-posi .comment-bg-hover p{

    padding: 1.5rem .6rem;

    margin: 0;

    font-size: 14px;

    font-family: OpensansItalic;

    color: #9b9b9b;

    text-align: left;

}

.section2 .comment .comment-posi .comment-bg-hover h4{

    padding: 0 1rem 1rem;

    font-size: 22px;

    text-align: left;

}

/* section 2 end */



/* section 3 start */

.section3{

    margin-top: 30px;

}

.section3  .designs{

    padding: 30px;

    padding-bottom: 0;

}

.section3  .designs .work1{

    background-color: #f5f5f5;

}

.section3  .designs .work1 div{

    padding: 1rem 30px;

    text-align: center;

}

.section3  .designs .work1 h3{

    padding: 0;

    text-transform: capitalize;

    font-family: saya;

    font-size: 38px;

    color: var(--black);

}

.section3  .designs .work1 p{

    padding: 0 10px;

    font-size: 15px;

    padding-bottom: 10px;

    color: #8a8a8a;

}

.section3  .designs .work1 div a{

    border: 2px solid #5a5a66;

    color: #464545;

    padding: .6rem 2rem;

    text-transform: capitalize;

    font-size: 14px;

    font-family: OpensansBold;

    transition: 1s ease;

}

.section3  .designs .work1 div a:hover{

    color: #fff;

    background-color: #191818;

    letter-spacing: .2rem;

}

.section3  .designs .work2 div{

    padding: 3rem 30px;

    text-align: center;

}

.section3  .designs .work2 h3{

    padding: 0;

    text-transform: capitalize;

    font-family: saya;

    font-size: 38px;

}



.section3  .designs .work2 p{

    padding: 0 20px;

    font-size: 15px;

    padding-bottom: 20px;

    color: #8a8a8a;

}

.section3  .designs .work2 a{

    border: 2px solid #5a5a66;

    color: #464545;

    padding: .6rem 2rem;

    text-transform: capitalize;

    font-size: 14px;

    transition: 1s ease;

    font-family: OpensansBold;

}

.section3  .designs .work2 a:hover{

    color: #fff;

    background-color: #191818;

    letter-spacing: .2rem;

}

.section3  .designs .work3 .table-design{

    padding: 1rem 30px;

    text-align: center;

}

.section3  .designs .work3 h3{

    padding: 1rem 0rem;

    text-transform: capitalize;

    font-family: saya;

    font-size: 38px;

    color: #2f2f2f;

}

.section3  .designs .work3 .table-posi{

   padding:  0 ;

}

.section3  .designs .work3 .table-posi  p{

    border: 2px solid var(--border);

    padding: .5rem;

    font-size: 14px;

    text-transform: capitalize;

    font-family: OpensansBold;

    color: #464545;

    margin-bottom: 1.2rem;

}

.section3  .designs .work3 .table-posi a{

    background: #5a5a66;

    padding: .5rem 1rem;

    color: #fff;

    transition: 1s ease;

    margin-top: 10px;

    font-size: 14px;

    font-family: OpensansBold;

}

.section3  .designs .work3 .table-posi a:hover{

    letter-spacing: .2rem;

}



/* section 3 end */



/* section 4 start */



.section4{

    background: url(../images/%2012.png) no-repeat;

    background-size: cover;

    background-position: center;

    align-items: center;

    padding-bottom: 5rem;

    

}



.section4 .box-container .box-clients{

    border: 1px solid #a9a7a7;

    text-align: center;

    padding: .5rem;

    align-items: center;

    background-color: #fff;

}

.section4 .mainhead{

    text-align: center;

    padding-top: 3rem;

    font-family: saya;

    font-size: 40px;

    color: var(--black);

}

.section4 .subtitle{

    text-align: center;

    text-transform: capitalize;

    padding: 20px 0;

    font-size: 20px;

    color: #676767;

}



/* section 4 end */



/* section 5 start */



.section5 .mainhead{

    text-align: center;

    padding-top: 3rem;

    text-transform: capitalize;

    font-family: saya;

    color: var(--black);

    font-size: 40px;

}

.section5 .subtitle{

    text-align: center;

    text-transform: capitalize;

    padding: 20px 0;

    color: #676767;

    font-size: 20px;

}



/* section 5 end */



/* section 6 start */



.section6{

    /* background: #0e64aa; */

    padding: 3rem 0 3.8rem;

}

.section6 .designs{

    padding: 0 20px;

}

.section6 .designs h3{

    color: #fff;

    margin-bottom: 1.5rem;

    font-family: saya;

    font-size: 31px;

}

.section6 .designs a{

    font-size: 15px;

    text-transform: uppercase;

    padding: .5rem 2rem;

    color: #fff;

    transition: 1s ease;

    /* background: #143b5c; */

    border: 2px solid ;

    margin: 1rem 0;

}

.section6 .designs a:hover{

    letter-spacing: .2rem;

    color: #fff;

}



/* section 6 end */



/* footer start */



footer{

    background: #313233;

}

footer .designs{

    padding-top: 20px;

}

footer .designs h4{

    color: #fff;

    text-transform: uppercase;

    padding: 30px 0 20px;

    font-family: sayaFy;

    font-size: 18px;

}

footer .designs p{

    color: #cccccc;

    font-size: 14px;



}

footer .designs .head-h4-2{

   padding-left: 0 !important;

}

footer .designs .box h4{

    padding-left: 3rem;

}

footer .designs .footer-posi2{

    padding:0 3rem;

}

footer .designs .footer-posi2 a{

    border-bottom: 1px solid;

    color: #cccccc;

}

footer .designs .footer-posi3{

    padding-right: 6rem;

}

footer .designs .footer-posi3 img{

    margin-right: 10px;

    margin-bottom: 15px;

}

footer .designs .search-form{

    border-bottom: 1px solid #898989;

    margin-right: 3rem;

}

footer .designs .search-form input{

    background: transparent;

    color: #898989;

    width: 80%;

}

footer .designs .search-form button{

    background: transparent;

    color: #898989;

}

footer .designs .footer-posi4{

    padding-top: 10px;

    border-top: 1px solid #898989;

    margin-top: 1.5rem;

}

footer .designs .footer-posi4 p{

    text-align: center;

}



/* footer end */

/* home page end */



.header .menu-heads{

    text-align: center;

    color: #fff;

    margin-top: 4rem;

}

.header .menu-heads h1{

    font-size: 45px;

    text-transform: uppercase;

    font-family: sayaBd;

}

.header .menu-heads .subtitle{

    font: 14px;

    text-transform: uppercase;

    font-family: sayaBd;

}

.header .menu-heads  a{

    color: #fff;

    font-family: sayaBd;

    text-transform: uppercase;

    font-family: sayaBd;

}

.header .menu-heads .subtitle i{

    padding:0  .5rem;

}





/* about page start */



#about{

    min-height: 100vh;

    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)) , url(../images/about-main.jpg) , no-repeat;

    background-size: cover;

    background-position: center;

    align-items: center;

    display: flex;

}

/* ab1 strat */





.ab-1 .ab-head{

    padding: 20px;

}

.ab-1 .ab-head span{

    color: #1181b0;

    font-size: 18px;

    font-family: OpensansMedium;

}

.ab-1 .ab-head h3{

    font-family: sayaBd;

    font-size: 32px;

    color: var(--black);

    text-transform: uppercase;

}

.ab-1 .ab-head p{

    color: #8a8a8a;

    font-size: 15px;

}



/* ab1 end */





/* ab2 strat */



.ab-2 .work1{

    background: #f8f8f8;

    padding: 0 ;

    text-align: center;

    padding: 3rem 3rem 0rem 3rem;

}

.ab-2 .work1 span{

    font-family: OpensansMedium;

    font-size: 18px;

    color: #1181b0;

}

.ab-2 .work1 h3{

    font-family: sayaBd;

    font-size: 38px;

    margin-top: 10px;

    margin-bottom: 20px;

    text-transform: uppercase;

}

.ab-2 .work1 p{

    font-size: 15px;

    color: #8a8a8a;

    margin-bottom: 2rem;

}

.ab-2 .work1 a{

    font-size: 14px;

    padding: .6rem 2rem;

    border: 2px solid #1181b0;

    text-transform: uppercase;

    color: #222121;

    transition: 1s ease;

    font-family: OpensansBold;

}

.ab-2 .work1 a:hover{

    letter-spacing: .2rem;

}

.ab-2 .work2{

    margin:5rem 0;

}

.ab-2 .work2 h3{

    font-family: sayaBd;

    font-size: 32px;

    color: var(--black);

    padding-left: .5rem;

    text-transform: uppercase;

}

.ab-2 .work2 p{

    font-size: 15px;

    color: #8a8a8a;

    padding: 0 1rem 0 .5rem;

    margin: 0;

}

.ab-2 .work2 .position1{

    padding: 0 2rem 0 30px;

}

.ab-2 .work2 .position1 img{

    margin-bottom: 2rem;

}

.ab-2 .work2 .position2{

    padding: 0 30px 0 2rem;

}

.ab-2 .work2 .position2 img{

    margin-top: 2rem;

}



/* ab2 end */





/* ab3 start */



.ab3{

    background-color: #ededed;

    margin: 30px 0;

}

.ab3 .ab3-position{

    padding: 5rem 30px;

}

.ab3 .ab3-position .work{

    text-align: center;

    margin-top: 2rem;

}

.ab3 .ab3-position .work span{

    font-family: OpensansMedium;

    font-size: 18px;

    color: #1181b0;

}

.ab3 .ab3-position .work h3{

    font-family: sayaBd;

    color: var(--black);

    font-size: 32px;

    margin-top: .5rem;

    text-transform: uppercase;

}

.ab3 .ab3-position .work p{

    color: #8a8a8a;

    font-size: 15px;

    margin-top: 1rem;

    margin-bottom:3rem;

}

.ab3 .ab3-position .work a{

    font-size: 14px;

    padding: .6rem 2rem;

    border: 2px solid #1181b0;

    text-transform: uppercase;

    color: #222121;

    transition: 1s ease;

    font-family: OpensansBold;

}

.ab3 .ab3-position .work a:hover{

    letter-spacing: .2rem;

}



/* ab3 end */



/* ab4-start */



.ab4 .ab4-position{

    padding: 30px;

}

.ab4 .ab4-position .ceo{

    -webkit-filter: grayscale(100%);

	filter: grayscale(100%);

	-webkit-transition: .3s ease-in-out;

	transition: .3s ease-in-out;

}

.ab4 .ab4-position .ceo:hover{

    -webkit-filter: grayscale(0);

	filter: grayscale(0);

}

.ab4 .ab4-position .content{

    background: #f8f8f8 ;

    padding-left: 3rem;

    padding-right: .7rem;

    padding-bottom: 2rem;

}

.ab4 .ab4-position img{

    margin-top: 6rem;

}

.ab4 .ab4-position .content h3{

    font-size: 32px;

    color: var(--black);

    font-family: sayaBd;

    text-transform: uppercase;

    margin-top: 4rem;

}

.ab4 .ab4-position .content p{

    font-size: 15px;

    color: #595858;

    margin-top: 2rem;

}

.ab4 .ab4-position .content img{

    margin: 1rem 0;

}

.ab4 .ab4-position .content h5{

    color: #38393a;

    font-size: 20px;

}

.ab4 .ab4-position .content span{

    font-size: 14px;

    color: #1181b0;

    margin-bottom: 1rem;

}



/* ab4-start */



/* ab5 start */

.ab5{

    margin-bottom: 3rem;

}

.ab5 h3{

    text-align: center;

    font-family: sayaBd;

    font-size: 32px;

    color: var(--black);

    text-transform: uppercase;

    margin-top: 3rem;

}

.ab5 p{

    font-size: 16px;

    color: #676767;

    text-align: center;

}

.ab5 .handerline{

    background-color: #707070;

    height: 2px;

    display: block;

    margin: 0 auto;

    width: 85%;

    margin-bottom: 3rem;

    margin-top: 3rem;

}

.ab5 .team{

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));

    gap: 1.5rem;

    text-align: center;

    margin-bottom: 4rem;

}

.ab5 .team .members{

    position: relative;

}

.ab5 .team .members .member-name{

    position: absolute;

    top: 68%;

    right: 25px;

    text-align: left;

    background-color: rgba(248, 248, 248,.8);

    border-radius: 5px;

    width: 80%;

    padding: 1rem 1rem;

}

.ab5 .team .members .member-name h4{

    font-size: 15px;

    color: #333333;

    margin: 0;

    

}

.ab5 .team .members .member-name span{

    font-size: 11px;

    color: #0d0d0d;

}



/* ab5 end */



/* ab6 start */



.ab6{

    background-color: #f8f8f8;

    padding: 5rem 0;

    margin-top: 3rem ;

}

.ab6 .head h3{

    color: var(--black);

    text-align: center;

    font-family: sayaBd;

    font-size: 32px;

    text-transform: uppercase;

}

.ab6 .head p{

    color: #828282;

     font-size: 16px;

    text-align: center;

    padding: 0 20rem;

    margin-bottom: 3rem;

}

.ab6 .box{

    padding: 30px;

}

.ab6 .box .counting{

    margin-top: 2rem;

    margin-left: 3rem;

}

.ab6 .box .counting div{

    padding: 1rem 0;

    border-left: 4px solid #1181b0;

}

.ab6 .box .counting div h4{

    font-size: 45px;

    color: #313131;

    padding-left: 1.5rem;

    font-family: OpensansBold;

}

.ab6 .box .counting div p{

    font-size: 20px;

    color: #828282;

    padding-left: 1.5rem;

    margin-bottom: 0;

}



/* ab6 end */



/* ab7 start */



.ab7 .box{

    padding: 0 30px 5rem;

}

.ab7 .work h3{

    text-transform: uppercase;

    font-size: 32px;

    font-family: sayaBd;

    color: var(--black);

    margin-top: 10rem;

}

.ab7 .work p{

    color: #8a8a8a;

    font-size: 15px;

    padding: 0;

}

.ab7 .work1{

    padding-left: 1.4rem;

}

.ab7 .work3{

    padding-right: 1.5rem;

    padding-left: 0;

}







/* ab7 end */











/* about page end */











/* join start */







#join{

    min-height: 100vh;

    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)) , url(../images/join-main.png) , no-repeat;

    background-size: cover;

    background-position: center;

    align-items: center;

    display: flex;

}

.section1 .menu-heads h6{

    font-size: 30px;

    font-family: sayaBd;

    color: #fff;

}



/* js1 start */

.js1 .work{

    padding: 0 5.6rem;

    text-align: center;

    align-self: center;

}

.js1 .work a{

    color: #fff;

    background-color: #2c2727;

    font-size: 16px;

    transition: 1s ease;

    padding: .5rem 1rem;

}

.js1 .work a:hover{

    letter-spacing: .2rem;

}

.js1 .work h3{

    font-size: 40px;

    font-family: sayaBd;

    color: var(--black);

    margin-top: 2rem;

    text-transform: uppercase;

}

.js1 .work p{

    color: #8a8a8a;

    font-size: 15px;

}

.js1 .work1{

    padding: 2rem  5.6rem ;

    align-self: center;

}

.js1 .work1 .abtn1{

    background-color: #2c2727;

    font-family: OpensansMedium;

    font-size: 16px;

    color: #fff;

    padding: .6rem 1.6rem;

    transition: 1s ease;

}

.js1 .work1 .abtn1:hover{

    letter-spacing: .2rem;

}

.js1 .work1 h3{

    font-family: sayaBd;

    font-size: 40px;

    text-transform: uppercase;

    padding-right: 5rem;

    margin: 2rem 0;

}

.js1 .work1 span{

    font-family: archivo;

    font-size: 20px;

    color: #1181b0;

}

.js1 .work1 p{

    font-size: 14px;

    font-family: Assistant;

    color: #776e6e;

    padding-right: 10rem;

}

.js1 .work1 p a{

    font-size: 14px;

    font-family: Assistant;

    color: #776e6e;

}

.js1 .work1 .abtn2{

    font-family: OpensansBold;

    font-size: 14px;

    color: #222121;

    padding: .6rem 1.6rem;

    transition: 1s ease;

    border: 2px solid #1181b0;

}

.js1 .work1 .abtn2:hover{

    letter-spacing: .2rem;

}

.js1 iframe{

    width: 100%;

    height: 450px;

}

.js2 {

    padding: 5rem 12rem;

}

.js2 .head h3{

    font-size: 36px;

    font-family: saya;

    color: var(--black);

    text-align: center;

    margin: 1rem;

}

.js2 .head p{

    text-align: center;

    font-size: 20px;

    color: #676767;

    margin-bottom: 2rem;

}



.js2 form  label{

    margin-top: 2rem;

    margin-bottom: .5rem;

    font-size: 15px;

    color: #333333;

    font-family: roboto;

}

.js2 form  input,select{

    border: 1px solid #c3c3c3;

    border-radius: 5px;

    width: 100%;

    padding: .6rem;

}

.js2 form #myfile{

    border: 1px solid #c3c3c3;

    border-radius: 5px;

    width: 100%;

    padding: 0;

    outline: none;

}

::-webkit-file-upload-button{

    color: #fff;

    background: #2c2727;

    border: none;

    border-radius: 5px;

    padding: .6rem;

}

.js2 form button{

    margin-top: 3rem;

    background-color: #2c2727;

    color: #ffff;

    font-family: Robotomd;

    font-size: 17px;

    width: 100%;

    padding: .6rem;

    border-radius: 5px;

}







/* js1 end */





/* join end */







/* project start */





#project{

    min-height: 100vh;

    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)) , url(../images/project-amin.jpg) , no-repeat;

    background-size: cover;

    background-position: center;

    align-items: center;

    display: flex;

}



/* pr1 strat */





.pr1 .head{

    border-bottom: 2px solid;

    text-align: center;

    padding: 2.5rem 0 2rem;

    margin: 0 8.3rem 3rem;

}



.pr1 .box{

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));

    gap: 1.5rem;

    padding: 2rem;

}

.pr1 .box .work{

    box-shadow: 0px 5px 8px #e5e5e5, 0px -5px 8px #e5e5e5;

    margin: 5px;

}

.pr1 .box .work h5{

    font-family: sayaBd;

    font-size: 20px;

    color: var(--black);

    padding: .5rem 2.5rem;

    margin-top: 1rem;

}

.pr1 .box .work p{

    margin: 0;

    font-size: 14px;

    font-family: OpensansItalic;

    color: #9b9b9b;

    text-align: left;

    padding: .5rem 2.5rem;

    margin-bottom: 2rem;

    min-height: 9rem;

}

.pr1 .box .work span{

    background-color: #0e64aa;

    display: block;

    height: 2px;

    width: 7rem;

    margin: 0 auto;

}













/* .pr1 .head .tablink {

    background-color: #222;

    color: #999;

    border: none;

    outline: none;

    cursor: pointer;

    padding: 14px 16px;

    font-size: 17px;

  }

  

  .pr1 .head .tablink:hover {

    color: #5a5a66;

  } */

  

  /* Style the tab content (and add height:100% for full page content) */

  /* .pr1.tabcontent {

    color: ;

    display: none;

    height: 100%;

  } */







.pr1  .box .pj-animation {

    position: relative;

    

  }

  

  

  .pr1  .box .pj-animation .overlay {

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    height: 100%;

    width: 100%;

    opacity: 0;

    transition: .5s ease;

    background-color: rgba(0,0,0,.8);

  }

  

  .pr1  .box .pj-animation:hover .overlay {

    opacity: 1;

  }

  

  .pr1  .box .pj-animation .text {

    position: absolute;

    top: 50%;

    left: 50%;

    -webkit-transform: translate(-50%, -50%);

    -ms-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%);

    text-align: center;

  }

  .pr1  .box .pj-animation .text h5{

    color: white;

    font-size: 20px;

  }



/* pr1 end */



.pr2 .head {

    padding: 3rem 30px 3.8rem;

}

.pr2 .head h3{

    color: #fff;

    margin-bottom: 1.5rem;

    font-family: saya;

    font-size: 31px;

}

.pr2 .head a{

    font-size: 15px;

    text-transform: uppercase;

    padding: 0.5rem 2rem;

    color: #fff;

    transition: 1s ease;

    border: 2px solid;

    margin: 1rem 0;

}

.pr2 .head a:hover{

    letter-spacing: .2rem;

}





/* project end */



/* contact start */

.ct1{

    margin: 5rem 0;

}

.ct1 .box{

    background-color: rgba(0, 0, 0, 0.8);

    padding: 5rem;

    border-radius: .5rem;

}

.ct1 .box h3{

    text-align: center;

    font-family: saya;

    font-size: 40px;

    color: #fff;

    border-bottom: 1px solid rgba(255, 255, 255, 0.5);

    padding-bottom: 1rem;

    margin-bottom: 2rem;

} 

.ct1 .box .design{

    text-align: center;

    padding: 1rem 0;

    border: 1px solid rgba(255, 255, 255, 0.5);

    border-radius: .5rem;

    min-height: 10rem;

    margin: .7rem 0;

}

.ct1 .box .design p{

    color: #fff;

    font-size: 14px;

    margin: 1rem 0;

}

.ct1 .box .design a{

    color: #fff;

    font-size: 14px;

}

.ct1 .box .design a:hover{

    color: rgba(255, 255, 255, 0.3);



}

.ct1 .box iframe{

    border-radius: .5rem;

}

/* contact end */



.pr1 .head .service-text{

    padding: 0 4rem;

}



}































@media (max-width:991px){

    /* nav bar start */

.hbg-img{

    min-height: 100vh;

    background: url(../images/%208995.png);

    background-size: cover;

    background-position: center;

    align-items: center;

}



.header{

    background: rgba(0,0,0,.6);

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:0.3rem 4%;

    border-bottom: #fff;

    position: fixed;

    top:3%; left: 0; right: 0;

    z-index: 1000;

}



.header .navbar2 a{

    margin:0 .3rem;

    font-size: 12px ;

    color:#fff;

    text-transform: uppercase;

}



.header .navbar2 a:hover{

    color: var(--border);

    border-bottom: .1rem solid #fff;

    padding-bottom: .5rem;

}



.header .navbar2 i{

    color: #fff;

    font-size: 15px;

    padding: 0.1rem .3rem;

}

.header .navbar2 .icon1{

    border-left: 1px solid #fff;

    padding-left: 1rem;

}



#menu-btn{

    display: inline-block;

}



.header .navbar-main{

    position: absolute;

    top:102%; right: -100%;

    background: rgba(0,0,0,.6);

    width: 20rem;

    height: calc(100vh - 5.5rem);

    

}



.header .navbar-main.active{

    right:0;

}



.header .navbar-main a{

    color:#fff;

    display: block;

    margin:1.5rem;

    padding:.5rem;

    font-size: 14px;

    text-transform: uppercase;

    text-align: center;

}

.header .navbar-main a:hover{

    color: var(--border);

    border-bottom: .1rem solid #fff;

    padding-bottom: .4rem

}



.header .search-form{

    width: 90%;

    right: 2rem;

}





.header .search-form{

    position: absolute;

    top:102%; right: 0;

    background: rgba(0,0,0,.6);

    width: 25rem;

    height: 3rem;

    display: flex;

    align-items: center;

    transform: scaleY(0);

    transform-origin: top;

    

}



.header .search-form input{

    height: 100%;

    width: 100%;

    font-size: 14px;

    color:#fff;

    padding:1rem;

    text-transform: none;

    background-color: rgba(0,0,0,.1);

}



.header .search-form label{

    cursor: pointer;

    font-size: 20px;

    margin-right: 1.5rem;

    color:#fff;

}



.header .search-form label:hover{

    color:#fff;

}



/* nav bar end */



/* home page start */





/* header start */



/* #home{

    min-height: 100vh;

    background: url(../images/%208995.png) no-repeat;

    background-size: cover;

    background-position: center;

    align-items: center;

    display: flex;

} */





.section1 .menu-heads{

    display: block;

    margin: 0 auto;

    text-align: center;

}



.section1 .menu-heads h1{

    font-size: 60px;

    font-family: sayaBd;

    text-transform: uppercase;

    color: #fff;

    text-align: center;

}

.section1 .menu-heads .subtitle{

    text-transform: uppercase;

    font-family: sayaBd;

    color: #fff;

}

.section1 .menu-heads .subtitle i{

    padding: .5rem;

}

.section1 .menu-heads .subtitle a{

    color: #fff;

    font-family: sayaBd;

}



/* header end */



/* section 2 start */



.section2{

    margin: 30px 0;

}

.section2 .mainhead{

    text-align: center;

    font-family: saya;

    font-size: 40px;

    color: var(--black);

}

.section2 .subtitle{

    color: #676767;

    text-align: center;

    padding: 20px 0;

    border-bottom: .1rem solid #cbcbcb;

    font-size: 20px;

}

.section2 .designs{

    padding: 20px;

}



.section2 .designs .number{

    text-align: right;

}

.section2 .designs  h3{

    color: #fff;

    margin-top: 10px;

    font-family: saya;

    font-size: 36px;

}

.section2 .designs .number h3{

    color: #fff;

    margin-top: 10px;

    font-family: saya;

    font-size: 41 px;

}

.section2 .designs p{

    color: #fff;

    margin-top: 10px;

    font-size: 24px;

}

.section2 .designs a{

    color: #fff;

    text-transform: uppercase;

    font-size: 16px;

}

.section2 .designs a i{

    padding: 3px 5px;

    border: 1px solid ;   

    border-radius: 50%;

    font-size: 9px;

    margin-left: 10px;

}

.section2 .designs .design1{

    background-image: url(../images/Group-9004.jpg);

    background-size: cover;

    padding: 3rem 3rem 3rem 4rem;

    margin-bottom: 30px;

 }

.section2 .designs .design2{

    background-image: url(../images/Group-8997.jpg);

    background-size: cover;

    padding: 3rem 3rem 3rem 4rem;

    margin-bottom: 30px;

 }

 .section2 .designs .design3{

    background-image: url(../images/Group-8998.jpg);

    background-size: cover;

    padding: 3rem 3rem 3rem 4rem;

    margin-bottom: 30px;

 }

 .section2 .designs .design4{

    background-image: url(../images/Group-8999.jpg);

    background-size: cover;

    padding: 3rem 3rem 3rem 4rem;

    margin-bottom: 30px;

 }

 .section2 .designs .design5{

    background-image: url(../images/Group-9000.jpg);

    background-size: cover;

    padding: 3rem 3rem 3rem 4rem;

    margin-bottom: 30px;

 }

 .section2 .designs .design6{

    background: #252222;

    padding-top: 3.5rem;

    padding-bottom: 3.5rem;

    padding-left: 4rem;

    margin-bottom: 30px;

 }

 .section2 .designs .design6 h3{

    margin-top: 0;

    margin-bottom: 20px;

    font-size: 36px;

 }

 .section2 .designs .design6 .booking-btn{

    border: 2px solid;

    padding: .6rem 2rem;

    margin-top: 10px;

    background-color: #191818;

    transition: .8s ease;

    font-size: 15px;

 }

 .section2 .designs .design6 .booking-btn:hover{

    letter-spacing: .2rem;

 }



.section2 .comment{

    padding: 0 ;

    

}

.section2 .comment .comment-posi{

    box-shadow: 0px 5px 8px #e5e5e5 , -0px -5px 8px #e5e5e5;

    margin: 5px;

}

.section2 .comment .comment-posi .comment-bg{

    position: relative;

    padding: 30px 0;

    text-align: end;

    height: auto;

}

.section2 .comment .comment-posi .comment-bg .comment-bg-hover{

    position: absolute;

    top: 1px;

    transform: translate();

}



.section2 .comment .comment-posi .comment-bg-hover p{

    padding: 1.5rem .6rem;

    margin: 0;

    font-size: 14px;

    font-family: OpensansItalic;

    color: #9b9b9b;

    text-align: left;

}

.section2 .comment .comment-posi .comment-bg-hover h4{

    padding: 0 1rem 1rem;

    font-size: 16px;

    text-align: left;

}

/* section 2 end */



/* section 3 start */

.section3{

    margin-top: 30px;

}

.section3  .designs{

    padding: 0px;

    padding-bottom: 0;

}

.section3  .designs .work1{

    background-color: #f5f5f5;

}

.section3  .designs .work1 div{

    padding: 1rem 10px;

    text-align: center;

}

.section3  .designs .work1 h3{

    padding: 0;

    text-transform: capitalize;

    font-family: saya;

    font-size: 30px;

    color: var(--black);

}

.section3  .designs .work1 p{

    padding: 0 ;

    font-size: 13px;

    padding-bottom: 0px;

    color: #8a8a8a;

}

.section3  .designs .work1 div a{

    border: 2px solid #5a5a66;

    color: #464545;

    padding: .6rem 2rem;

    text-transform: capitalize;

    font-size: 14px;

    font-family: OpensansBold;

    transition: 1s ease;

}

.section3  .designs .work1 div a:hover{

    color: #fff;

    background-color: #191818;

    letter-spacing: .2rem;

}

.section3  .designs .work2 div{

    padding: 1rem 0;

    text-align: center;

}

.section3  .designs .work2 h3{

    padding: 0;

    text-transform: capitalize;

    font-family: saya;

    font-size: 30px;

}



.section3  .designs .work2 p{

    padding: 0 20px;

    font-size: 15px;

    padding-bottom: 5px;

    color: #8a8a8a;

}

.section3  .designs .work2 a{

    border: 2px solid #5a5a66;

    color: #464545;

    padding: .6rem 2rem;

    text-transform: capitalize;

    font-size: 14px;

    transition: 1s ease;

    font-family: OpensansBold;

}

.section3  .designs .work2 a:hover{

    color: #fff;

    background-color: #191818;

    letter-spacing: .2rem;

}

.section3  .designs .work3 .table-design{

    padding: 1rem 20px;

    text-align: center;

}

.section3  .designs .work3 h3{

    padding: 5px 0rem;

    text-transform: capitalize;

    font-family: saya;

    font-size: 30px;

    color: #2f2f2f;

}

.section3  .designs .work3 .table-posi{

   padding:  0 ;

}

.section3  .designs .work3 .table-posi  p{

    border: 2px solid var(--border);

    padding: .5rem;

    font-size: 12px;

    text-transform: capitalize;

    font-family: OpensansBold;

    color: #464545;

    margin-bottom: 1.2rem;

}

.section3  .designs .work3 .table-posi a{

    background: #5a5a66;

    padding: .5rem 1rem;

    color: #fff;

    transition: 1s ease;

    margin-top: 10px;

    font-size: 14px;

    font-family: OpensansBold;

}

.section3  .designs .work3 .table-posi a:hover{

    letter-spacing: .2rem;

}



/* section 3 end */



/* section 4 start */



.section4{

    background: url(../images/%2012.png) no-repeat;

    background-size: cover;

    background-position: center;

    align-items: center;

    padding-bottom: 5rem;

    

}





.section4 .box-container .box-clients{

    border: 1px solid #a9a7a7;

    text-align: center;

    padding: .5rem;

    align-items: center;

    background-color: #fff;

}

.section4 .mainhead{

    text-align: center;

    padding-top: 3rem;

    font-family: saya;

    font-size: 40px;

    color: var(--black);

}

.section4 .subtitle{

    text-align: center;

    text-transform: capitalize;

    padding: 20px 0;

    font-size: 20px;

    color: #676767;

}



/* section 4 end */



/* section 5 start */



.section5 .mainhead{

    text-align: center;

    padding-top: 3rem;

    text-transform: capitalize;

    font-family: saya;

    color: var(--black);

    font-size: 40px;

}

.section5 .subtitle{

    text-align: center;

    text-transform: capitalize;

    padding: 20px 0;

    color: #676767;

    font-size: 20px;

}



/* section 5 end */



/* section 6 start */



.section6{

    /* background: #0e64aa; */

    padding: 3rem 0 3.8rem;

}

.section6 .designs{

    padding: 0 20px;

}

.section6 .designs h3{

    color: #fff;

    margin-bottom: 1.5rem;

    font-family: saya;

    font-size: 31px;

}

.section6 .designs a{

    font-size: 15px;

    text-transform: uppercase;

    padding: .5rem 2rem;

    color: #fff;

    transition: 1s ease;

    /* background: #143b5c; */

    border: 2px solid ;

    margin: 1rem 0;

}

.section6 .designs a:hover{

    letter-spacing: .2rem;

    color: #fff;

}



/* section 6 end */



/* footer start */



footer{

    background: #313233;

}

footer .designs{

    padding-top: 20px;

}

footer .designs h4{

    color: #fff;

    text-transform: uppercase;

    padding: 30px 0 20px;

    font-family: sayaFy;

    font-size: 18px;

}

footer .designs p{

    color: #cccccc;

    font-size: 14px;



}

footer .designs .head-h4-2{

   padding-left: 0 !important;

}

footer .designs .box h4{

    padding-left: 0rem;

}

footer .designs .footer-posi2{

    padding:0 0rem;

}

footer .designs .footer-posi2 a{

    border-bottom: 1px solid;

    color: #cccccc;

}

footer .designs .footer-posi3{

    padding-right: 0rem;

}

footer .designs .footer-posi3 img{

    margin-right: 10px;

    margin-bottom: 15px;

}

footer .designs .search-form{

    border-bottom: 1px solid #898989;

    margin-right: 3rem;

}

footer .designs .search-form input{

    background: transparent;

    color: #898989;

    width: 80%;

}

footer .designs .search-form button{

    background: transparent;

    color: #898989;

}

footer .designs .footer-posi4{

    padding-top: 10px;

    border-top: 1px solid #898989;

    margin-top: 1.5rem;

}

footer .designs .footer-posi4 p{

    text-align: center;

}



/* footer end */

/* home page end */



.header .menu-heads{

    text-align: center;

    color: #fff;

    margin-top: 4rem;

}

.header .menu-heads h1{

    font-size: 45px;

    text-transform: uppercase;

    font-family: sayaBd;

}

.header .menu-heads .subtitle{

    font: 14px;

    text-transform: uppercase;

    font-family: sayaBd;

}

.header .menu-heads  a{

    color: #fff;

    font-family: sayaBd;

    text-transform: uppercase;

    font-family: sayaBd;

}

.header .menu-heads .subtitle i{

    padding:0  .5rem;

}





/* about page start */



#about{

    min-height: 100vh;

    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)) , url(../images/about-main.jpg) , no-repeat;

    background-size: cover;

    background-position: center;

    align-items: center;

    display: flex;

}

/* ab1 strat */





.ab-1 .ab-head{

    padding: 20px;

}

.ab-1 .ab-head span{

    color: #1181b0;

    font-size: 18px;

    font-family: OpensansMedium;

}

.ab-1 .ab-head h3{

    font-family: sayaBd;

    font-size: 32px;

    color: var(--black);

    text-transform: uppercase;

}

.ab-1 .ab-head p{

    color: #8a8a8a;

    font-size: 15px;

}



/* ab1 end */





/* ab2 strat */



.ab-2 .work1{

    background: #f8f8f8;

    padding: 0 ;

    text-align: center;

    padding: .5rem .4rem;

}

.ab-2 .work1 span{

    font-family: OpensansMedium;

    font-size: 18px;

    color: #1181b0;

}

.ab-2 .work1 h3{

    font-family: sayaBd;

    font-size: 38px;

    margin-top: 10px;

    margin-bottom: 20px;

    text-transform: uppercase;

}

.ab-2 .work1 p{

    font-size: 15px;

    color: #8a8a8a;

    margin-bottom: 2rem;

}

.ab-2 .work1 a{

    font-size: 14px;

    padding: .6rem 2rem;

    border: 2px solid #1181b0;

    text-transform: uppercase;

    color: #222121;

    transition: 1s ease;

    font-family: OpensansBold;

}

.ab-2 .work1 a:hover{

    letter-spacing: .2rem;

}

.ab-2 .work2{

    margin-bottom: 3rem;

    margin-top: 1rem;

}

.ab-2 .work2 h3{

    font-family: sayaBd;

    font-size: 32px;

    color: var(--black);

    padding-left: .5rem;

    text-transform: uppercase;

}

.ab-2 .work2 p{

    font-size: 15px;

    color: #8a8a8a;

    padding: 0 1rem 0 .5rem;

    margin: 0;

}

.ab-2 .work2 .position1{

    padding: 0 1rem 0 0px;

}

.ab-2 .work2 .position1 img{

    margin-bottom: 2rem;

}

.ab-2 .work2 .position2{

    padding: 0 0px 0 1rem;

}

.ab-2 .work2 .position2 img{

    margin-top: 2rem;

}



/* ab2 end */





/* ab3 start */



.ab3{

    background-color: #ededed;

    margin: 30px 0;

}

.ab3 .ab3-position{

    padding: 5rem 0px;

}

.ab3 .ab3-position .work{

    text-align: center;

    margin-top: .5rem;

}

.ab3 .ab3-position .work span{

    font-family: OpensansMedium;

    font-size: 18px;

    color: #1181b0;

}

.ab3 .ab3-position .work h3{

    font-family: sayaBd;

    color: var(--black);

    font-size: 32px;

    margin-top: .5rem;

    text-transform: uppercase;

}

.ab3 .ab3-position .work p{

    color: #8a8a8a;

    font-size: 15px;

    margin-top: 1rem;

    margin-bottom:3rem;

}

.ab3 .ab3-position .work a{

    font-size: 14px;

    padding: .6rem 2rem;

    border: 2px solid #1181b0;

    text-transform: uppercase;

    color: #222121;

    transition: 1s ease;

    font-family: OpensansBold;

}

.ab3 .ab3-position .work a:hover{

    letter-spacing: .2rem;

}



/* ab3 end */



/* ab4-start */



.ab4 .ab4-position{

    padding: 0px;

}

.ab4 .ab4-position .ceo{

    -webkit-filter: grayscale(100%);

	filter: grayscale(100%);

	-webkit-transition: .3s ease-in-out;

	transition: .3s ease-in-out;

}

.ab4 .ab4-position .ceo:hover{

    -webkit-filter: grayscale(0);

	filter: grayscale(0);

}

.ab4 .ab4-position .content{

    background: #f8f8f8 ;

    padding-left: 2rem;

    padding-right: .7rem;

    padding-bottom: 1rem;

}

.ab4 .ab4-position img{

    margin-top: 6rem;

}

.ab4 .ab4-position .content h3{

    font-size: 32px;

    color: var(--black);

    font-family: sayaBd;

    text-transform: uppercase;

    margin-top: 3rem;

}

.ab4 .ab4-position .content p{

    font-size: 15px;

    color: #595858;

    margin-top: 1rem;

}

.ab4 .ab4-position .content img{

    margin: 1rem 0;

}

.ab4 .ab4-position .content h5{

    color: #38393a;

    font-size: 20px;

}

.ab4 .ab4-position .content span{

    font-size: 14px;

    color: #1181b0;

    margin-bottom: 1rem;

}



/* ab4-start */



/* ab5 start */

.ab5{

    margin-bottom: 3rem;

}

.ab5 h3{

    text-align: center;

    font-family: sayaBd;

    font-size: 32px;

    color: var(--black);

    text-transform: uppercase;

    margin-top: 3rem;

}

.ab5 p{

    font-size: 16px;

    color: #676767;

    text-align: center;

}

.ab5 .handerline{

    background-color: #707070;

    height: 2px;

    display: block;

    margin: 0 auto;

    width: 85%;

    margin-bottom: 3rem;

    margin-top: 3rem;

}

.ab5 .team{

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));

    gap: 1.5rem;

    text-align: center;

    margin-bottom: 4rem;

}

.ab5 .team .members{

    position: relative;

}

.ab5 .team .members .member-name{

    position: absolute;

    top: 68%;

    right: 25px;

    text-align: left;

    background-color: rgba(248, 248, 248,.8);

    border-radius: 5px;

    width: 80%;

    padding: 1rem 1rem;

}

.ab5 .team .members .member-name h4{

    font-size: 15px;

    color: #333333;

    margin: 0;

    

}

.ab5 .team .members .member-name span{

    font-size: 11px;

    color: #0d0d0d;

}



/* ab5 end */



/* ab6 start */



.ab6{

    background-color: #f8f8f8;

    padding: 5rem 0;

    margin-top: 3rem ;

}

.ab6 .head h3{

    color: var(--black);

    text-align: center;

    font-family: sayaBd;

    font-size: 32px;

    text-transform: uppercase;

}

.ab6 .head p{

    color: #828282;

     font-size: 14px;

    text-align: center;

    padding: 0 3rem;

    margin-bottom: 3rem;

}

.ab6 .box{

    padding: 0px;

}

.ab6 .box .counting{

    margin-top: 1rem;

    margin-left: 2rem;

}

.ab6 .box .counting div{

    padding: 1rem 0;

    border-left: 4px solid #1181b0;

}

.ab6 .box .counting div h4{

    font-size: 36px;

    color: #313131;

    padding-left: 1.5rem;

    font-family: OpensansBold;

}

.ab6 .box .counting div p{

    font-size: 16px;

    color: #828282;

    padding-left: 1.5rem;

    margin-bottom: 0;

}



/* ab6 end */



/* ab7 start */



.ab7 .box{

    padding: 0 30px 5rem;

}

.ab7 .work h3{

    text-transform: uppercase;

    font-size: 32px;

    font-family: sayaBd;

    color: var(--black);

    margin-top: 3rem;

}

.ab7 .work p{

    color: #8a8a8a;

    font-size: 15px;

    padding-right: .3rem;

}

.ab7 .work1{

    padding-left: 1.4rem;

}

.ab7 .work3{

    padding-right: 1.5rem;

    padding-left: 0;

}







/* ab7 end */











/* about page end */











/* join start */







#join{

    min-height: 100vh;

    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)) , url(../images/join-main.png) , no-repeat;

    background-size: cover;

    background-position: center;

    align-items: center;

    display: flex;

}

.section1 .menu-heads h6{

    font-size: 30px;

    font-family: sayaBd;

    color: #fff;

    padding: 0 2rem;

}



/* js1 start */

.js1 .work{

    padding: 1rem 1rem;

    text-align: center;

    align-self: center;

}

.js1 .work a{

    color: #fff;

    background-color: #2c2727;

    font-size: 16px;

    transition: 1s ease;

    padding: .5rem 1rem;

}

.js1 .work a:hover{

    letter-spacing: .2rem;

}

.js1 .work h3{

    font-size: 36px;

    font-family: sayaBd;

    color: var(--black);

    margin-top: 1rem;

    text-transform: uppercase;

}

.js1 .work p{

    color: #8a8a8a;

    font-size: 15px;

}

.js1 .work1{

    padding: 2rem  1rem ;

    align-self: center;

}

.js1 .work1 .abtn1{

    background-color: #2c2727;

    font-family: OpensansMedium;

    font-size: 16px;

    color: #fff;

    padding: .6rem 1.6rem;

    transition: 1s ease;

}

.js1 .work1 .abtn1:hover{

    letter-spacing: .2rem;

}

.js1 .work1 h3{

    font-family: sayaBd;

    font-size: 36px;

    text-transform: uppercase;

    padding-right: 5rem;

    margin: 2rem 0;

}

.js1 .work1 span{

    font-family: archivo;

    font-size: 20px;

    color: #1181b0;

}

.js1 .work1 p{

    font-size: 14px;

    font-family: Assistant;

    color: #776e6e;

    padding-right: 13rem;

}

.js1 .work1 p a{

    font-size: 14px;

    font-family: Assistant;

    color: #776e6e;

}

.js1 .work1 .abtn2{

    font-family: OpensansBold;

    font-size: 14px;

    color: #222121;

    padding: .6rem 1.6rem;

    transition: 1s ease;

    border: 2px solid #1181b0;

}

.js1 .work1 .abtn2:hover{

    letter-spacing: .2rem;

}

.js1 iframe{

    width: 100%;

    height: 450px;

}

.js2 {

    padding: 4rem 5rem;

}

.js2 .head h3{

    font-size: 36px;

    font-family: saya;

    color: var(--black);

    text-align: center;

    margin: 1rem;

}

.js2 .head p{

    text-align: center;

    font-size: 20px;

    color: #676767;

    margin-bottom: 2rem;

}



.js2 form  label{

    margin-top: 2rem;

    margin-bottom: .5rem;

    font-size: 15px;

    color: #333333;

    font-family: roboto;

}

.js2 form  input,select{

    border: 1px solid #c3c3c3;

    border-radius: 5px;

    width: 100%;

    padding: .6rem;

}

.js2 form #myfile{

    border: 1px solid #c3c3c3;

    border-radius: 5px;

    width: 100%;

    padding: 0;

    outline: none;

}

::-webkit-file-upload-button{

    color: #fff;

    background: #2c2727;

    border: none;

    border-radius: 5px;

    padding: .6rem;

}

.js2 form button{

    margin-top: 3rem;

    background-color: #2c2727;

    color: #ffff;

    font-family: Robotomd;

    font-size: 17px;

    width: 100%;

    padding: .6rem;

    border-radius: 5px;

}







/* js1 end */





/* join end */







/* project start */





#project{

    min-height: 100vh;

    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)) , url(../images/project-amin.jpg) , no-repeat;

    background-size: cover;

    background-position: center;

    align-items: center;

    display: flex;

}



/* pr1 strat */





.pr1 .head{

    border-bottom: 2px solid;

    text-align: center;

    padding: 2.5rem 0 2rem;

    margin: 0 8.3rem 3rem;

}



.pr1 .box{

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));

    gap: 1.5rem;

    padding: 2rem;

}

.pr1 .box .work{

    box-shadow: 0px 5px 8px #e5e5e5, 0px -5px 8px #e5e5e5;

    margin: 5px;

}

.pr1 .box .work h5{

    font-family: sayaBd;

    font-size: 20px;

    color: var(--black);

    padding: .5rem 2.5rem;

    margin-top: 1rem;

}

.pr1 .box .work p{

    margin: 0;

    font-size: 14px;

    font-family: OpensansItalic;

    color: #9b9b9b;

    text-align: left;

    padding: .5rem 2.5rem;

    margin-bottom: 2rem;

    min-height: 14rem;

}

.pr1 .box .work span{

    background-color: #0e64aa;

    display: block;

    height: 2px;

    width: 7rem;

    margin: 0 auto;

}













/* .pr1 .head .tablink {

    background-color: #222;

    color: #999;

    border: none;

    outline: none;

    cursor: pointer;

    padding: 14px 16px;

    font-size: 17px;

  }

  

  .pr1 .head .tablink:hover {

    color: #5a5a66;

  } */

  

  /* Style the tab content (and add height:100% for full page content) */

  /* .pr1.tabcontent {

    color: ;

    display: none;

    height: 100%;

  } */







.pr1  .box .pj-animation {

    position: relative;

    

  }

  

  

  .pr1  .box .pj-animation .overlay {

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    height: 100%;

    width: 100%;

    opacity: 0;

    transition: .5s ease;

    background-color: rgba(0,0,0,.8);

  }

  

  .pr1  .box .pj-animation:hover .overlay {

    opacity: 1;

  }

  

  .pr1  .box .pj-animation .text {

    position: absolute;

    top: 50%;

    left: 50%;

    -webkit-transform: translate(-50%, -50%);

    -ms-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%);

    text-align: center;

  }

  .pr1  .box .pj-animation .text h5{

    color: white;

    font-size: 20px;

  }



/* pr1 end */





.pr2 .head {

    padding: 3rem 30px 3.8rem;

}

.pr2 .head h3{

    color: #fff;

    margin-bottom: 1.5rem;

    font-family: saya;

    font-size: 31px;

}

.pr2 .head a{

    font-size: 15px;

    text-transform: uppercase;

    padding: 0.5rem 2rem;

    color: #fff;

    transition: 1s ease;

    /* background: #143b5c; */

    border: 2px solid;

    margin: 1rem 0;

}

.pr2 .head a:hover{

    letter-spacing: .2rem;

}





/* project end */



/* contact start */

.ct1{

    margin: 5rem 0;

}

.ct1 .box{

    background-color: rgba(0, 0, 0, 0.8);

    padding: 5rem;

    border-radius: .5rem;

}

.ct1 .box h3{

    text-align: center;

    font-family: saya;

    font-size: 40px;

    color: #fff;

    border-bottom: 1px solid rgba(255, 255, 255, 0.5);

    padding-bottom: 1rem;

    margin-bottom: 2rem;

} 

.ct1 .box .design{

    text-align: center;

    padding: 1rem 0;

    border: 1px solid rgba(255, 255, 255, 0.5);

    border-radius: .5rem;

    min-height: 10rem;

    margin: .7rem 0;

}

.ct1 .box .design p{

    color: #fff;

    font-size: 14px;

    margin: 1rem 0;

}

.ct1 .box .design a{

    color: #fff;

    font-size: 14px;

}

.ct1 .box .design a:hover{

    color: rgba(255, 255, 255, 0.3);



}

.ct1 .box iframe{

    border-radius: .5rem;

    width: 100%;

    height: 350px;

    margin-top: 2.5rem;

}

/* contact end */

.pr1 .head .service-text{

    padding: 0 1rem;

}





}





































@media (max-width:767px){

    /* nav bar start */



.hbg-img{

    min-height: 100vh;

    background: url(../images/%208995.png);

    background-size: cover;

    background-position: center;

    align-items: center;

}





.slider-1,.slider-2,.slider-3,.slider-4,.slider-5,.slider-6,.slider-7,.slider-8,.slider-9 {

    min-height: 80vh;

}



.header{

    background: rgba(0,0,0,.6);

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:0.3rem 4%;

    border-bottom: #fff;

    position: fixed;

    top:3%; left: 0; right: 0;

    z-index: 1000;

}

.header .navbar2 a{

    display: none;

}



/* .header .navbar2 a:hover{

    color: var(--border);

    border-bottom: .1rem solid #fff;

    padding-bottom: .5rem;

} */



.header .navbar2 i{

    color: #fff;

    font-size: 15px;

    padding: 0.1rem .3rem;

}

.header .navbar2 .icon1{

    border-left: none;

    padding-left: 0rem;

}



#menu-btn{

    display: inline-block;

}



.header .navbar-main{

    position: absolute;

    top:102%; right: -100%;

    background: rgba(0,0,0,.6);

    width: 20rem;

    height: calc(100vh - 5.5rem);

    

}



.header .navbar-main.active{

    right:0;

}



.header .navbar-main a{

    color:#fff;

    display: block;

    margin:1.5rem;

    padding:.5rem;

    font-size: 14px;

    text-transform: uppercase;

    text-align: center;

}





.header .search-form{

    width: 90%;

    right: 2rem;

}





.header .search-form{

    position: absolute;

    top:102%; right: 0;

    background: rgba(0,0,0,.6);

    width: 25rem;

    height: 3rem;

    display: flex;

    align-items: center;

    transform: scaleY(0);

    transform-origin: top;

    

}



.header .search-form input{

    height: 100%;

    width: 100%;

    font-size: 14px;

    color:#fff;

    padding:1rem;

    text-transform: none;

    background-color: rgba(0,0,0,.1);

}



.header .search-form label{

    cursor: pointer;

    font-size: 20px;

    margin-right: 1.5rem;

    color:#fff;

}



.header .search-form label:hover{

    color:#fff;

}



/* nav bar end */



/* home page start */





/* header start */



/* #home{

    min-height: 100vh;

    background: url(../images/%208995.png) no-repeat;

    background-size: cover;

    background-position: center;

    align-items: center;

    display: flex;

} */





.section1 .carousel-caption h2{

    font-size: 50px;

  }



.section1 .carousel-caption h2{

  font-size: 50px;

}

.section1 .carousel-caption .home-subtitles{

  font-size: 20px;

}





.section1 .menu-heads{

    display: block;

    margin: 0 auto;

    text-align: center;

}



.section1 .menu-heads h1{

    font-size: 50px;

    font-family: sayaBd;

    text-transform: uppercase;

    color: #fff;

    text-align: center;

}

.section1 .menu-heads .subtitle{

    text-transform: uppercase;

    font-family: sayaBd;

    color: #fff;

}

.section1 .menu-heads .subtitle i{

    padding: .5rem;

}

.section1 .menu-heads .subtitle a{

    color: #fff;

    font-family: sayaBd;

}



/* header end */



/* section 2 start */



.section2{

    margin: 30px 0;

}

.section2 .mainhead{

    text-align: center;

    font-family: saya;

    font-size: 36px;

    color: var(--black);

}

.section2 .subtitle{

    color: #676767;

    text-align: center;

    padding: 10px 0;

    border-bottom: .1rem solid #cbcbcb;

    font-size: 18px;

}

.section2 .designs{

    padding: 20px 0;

}



.section2 .designs .number{

    text-align: right;

}

.section2 .designs  h3{

    color: #fff;

    margin-top: 10px;

    font-family: saya;

    font-size: 36px;

}

.section2 .designs .number h3{

    color: #fff;

    margin-top: 10px;

    font-family: saya;

    font-size: 41 px;

}

.section2 .designs p{

    color: #fff;

    margin-top: 10px;

    font-size: 24px;

}

.section2 .designs a{

    color: #fff;

    text-transform: uppercase;

    font-size: 16px;

}

.section2 .designs a i{

    padding: 3px 5px;

    border: 1px solid ;   

    border-radius: 50%;

    font-size: 9px;

    margin-left: 10px;

}

.section2 .designs .design1{

    background-image: url(../images/Group-9004.jpg);

    background-size: cover;

    padding: 3rem 3rem 3rem 3rem;

    margin-bottom: 30px;

 }

.section2 .designs .design2{

    background-image: url(../images/Group-8997.jpg);

    background-size: cover;

    padding: 3rem 3rem 3rem 3rem;

    margin-bottom: 30px;

 }

 .section2 .designs .design3{

    background-image: url(../images/Group-8998.jpg);

    background-size: cover;

    padding: 3rem 3rem 3rem 3rem;

    margin-bottom: 30px;

 }

 .section2 .designs .design4{

    background-image: url(../images/Group-8999.jpg);

    background-size: cover;

    padding: 3rem 3rem 3rem 3rem;

    margin-bottom: 30px;

 }

 .section2 .designs .design5{

    background-image: url(../images/Group-9000.jpg);

    background-size: cover;

    padding: 3rem 3rem 3rem 3rem;

    margin-bottom: 30px;

 }

 .section2 .designs .design6{

    background: #252222;

    padding-top: 3.5rem;

    padding-bottom: 3.5rem;

    padding-left: 3rem;

    margin-bottom: 30px;

 }

 .section2 .designs .design6 h3{

    margin-top: 0;

    margin-bottom: 20px;

    font-size: 36px;

 }

 .section2 .designs .design6 .booking-btn{

    border: 2px solid;

    padding: .6rem 2rem;

    margin-top: 10px;

    background-color: #191818;

    transition: .8s ease;

    font-size: 15px;

 }

 .section2 .designs .design6 .booking-btn:hover{

    letter-spacing: .2rem;

 }



.section2 .comment{

    padding: 0 ;

    

}

.section2 .comment .comment-posi{

    box-shadow: 0px 5px 8px #e5e5e5 , -0px -5px 8px #e5e5e5;

    margin: 5px;

}

.section2 .comment .comment-posi .comment-bg{

    position: relative;

    padding: 30px 0;

    text-align: end;

    height: auto;

    margin-bottom: 1.8rem;

}

.section2 .comment .comment-posi .comment-bg .comment-bg-hover{

    position: absolute;

    top: 1px;

    transform: translate();

}



.section2 .comment .comment-posi .comment-bg-hover p{

    padding: 1.5rem .6rem;

    margin: 0;

    font-size: 14px;

    font-family: OpensansItalic;

    color: #9b9b9b;

    text-align: left;

}

.section2 .comment .comment-posi .comment-bg-hover h4{

    padding: 0 1rem 1rem;

    font-size: 16px;

    text-align: left;

}

/* section 2 end */



/* section 3 start */

.section3{

    margin-top: 30px;

}

.section3  .designs{

    padding: 1rem;

    padding-bottom: 1rem;

}

.section3  .designs .work1{

    background-color: #f5f5f5;

}

.section3  .designs .work1 div{

    padding: 1rem 10px 2.8rem;

    text-align: center;

}

.section3  .designs .work1 h3{

    padding: 0.5rem 4rem;

    text-transform: capitalize;

    font-family: saya;

    font-size: 30px;

    color: var(--black);

}

.section3  .designs .work1 p{

    padding: 0 1rem .8rem;

    font-size: 13px;

    color: #8a8a8a;

}

.section3  .designs .work1 div a{

    border: 2px solid #5a5a66;

    color: #464545;

    padding: .6rem 2rem;

    text-transform: capitalize;

    font-size: 14px;

    font-family: OpensansBold;

    transition: 1s ease;

}

.section3  .designs .work1 div a:hover{

    color: #fff;

    background-color: #191818;

    letter-spacing: .2rem;

}

.section3  .designs .work2 div{

    padding: 2rem 0 3rem;

    text-align: center;

}

.section3  .designs .work-img{

    margin-top: 3rem;

}

.section3  .designs .work2 h3{

    padding: 0.5rem 3rem;

    text-transform: capitalize;

    font-family: saya;

    font-size: 30px;

}



.section3  .designs  .work2 p{

    padding: 0 20px;

    font-size: 14px;

    padding-bottom: .8rem;

    color: #8a8a8a;

}

.section3  .designs .work2 a{

    border: 2px solid #5a5a66;

    color: #464545;

    padding: .6rem 2rem;

    text-transform: capitalize;

    font-size: 14px;

    transition: 1s ease;

    font-family: OpensansBold;

}

.section3  .designs .work2 a:hover{

    color: #fff;

    background-color: #191818;

    letter-spacing: .2rem;

}

.section3  .designs .work3 .table-design{

    padding: 1rem 20px;

    text-align: center;

}

.section3  .designs .work3 h3{

    padding: 5px 0rem;

    text-transform: capitalize;

    font-family: saya;

    font-size: 30px;

    color: #2f2f2f;

}

.section3  .designs .work3 .table-posi{

    padding: 0.5rem 0 1.7rem;

}

.section3  .designs .work3 .table-posi  p{

    border: 2px solid var(--border);

    padding: .5rem;

    font-size: 14px;

    text-transform: capitalize;

    font-family: OpensansBold;

    color: #464545;

    margin-bottom: 1.2rem;

}

.section3  .designs .work3 .table-posi a{

    background: #5a5a66;

    padding: .5rem 1rem;

    color: #fff;

    transition: 1s ease;

    margin-top: 10px;

    font-size: 14px;

    font-family: OpensansBold;

}

.section3  .designs .work3 .table-posi a:hover{

    letter-spacing: .2rem;

}



/* section 3 end */



/* section 4 start */



.section4{

    background: url(../images/%2012.png) no-repeat;

    background-size: cover;

    background-position: center;

    align-items: center;

    padding-bottom: 5rem;

    

}





.section4 .box-container .box-clients{

    border: 1px solid #a9a7a7;

    text-align: center;

    padding: .5rem;

    align-items: center;

    background-color: #fff;

}

.section4 .mainhead{

    text-align: center;

    padding-top: 3rem;

    font-family: saya;

    font-size: 36px;

    color: var(--black);

}

.section4 .subtitle{

    text-align: center;

    text-transform: capitalize;

    padding: 20px 0;

    font-size: 18px;

    color: #676767;

}



/* section 4 end */



/* section 5 start */



.section5 .mainhead{

    text-align: center;

    padding-top: 3rem;

    text-transform: capitalize;

    font-family: saya;

    color: var(--black);

    font-size: 40px;

}

.section5 .subtitle{

    text-align: center;

    text-transform: capitalize;

    padding: 20px 0;

    color: #676767;

    font-size: 20px;

}



/* section 5 end */



/* section 6 start */



.section6{

    /* background: #0e64aa; */

    padding: 3rem 0 3.8rem;

}

.section6 .designs{

    padding: 0 20px;

}

.section6 .designs h3{

    color: #fff;

    margin-bottom: 1.5rem;

    font-family: saya;

    font-size: 31px;

}

.section6 .designs a{

    font-size: 15px;

    text-transform: uppercase;

    padding: .5rem 2rem;

    color: #fff;

    transition: 1s ease;

    /* background: #143b5c; */

    border: 2px solid ;

    margin: 1rem 0;

}

.section6 .designs a:hover{

    letter-spacing: .2rem;

    color: #fff;

}



/* section 6 end */



/* footer start */



footer{

    background: #313233;

}

footer .designs{

    padding-top: 20px;

}

footer .designs h4{

    color: #fff;

    text-transform: uppercase;

    padding: 30px 0 20px;

    font-family: sayaFy;

    font-size: 18px;

}

footer .designs p{

    color: #cccccc;

    font-size: 14px;



}

footer .designs .head-h4-2{

   padding-left: 0 !important;

}

footer .designs .col-md-4 h4{

    padding-left: 0rem;

}

footer .designs .footer-posi2{

    padding:0;

}

footer .designs .footer-posi2 a{

    border-bottom: 1px solid;

    color: #cccccc;

}

footer .designs .footer-posi3{

    padding-right: 0rem;

}

footer .designs .footer-posi3 img{

    margin-right: 10px;

    margin-bottom: 15px;

}

footer .designs .search-form{

    border-bottom: 1px solid #898989;

    margin-right: 3rem;

}

footer .designs .search-form input{

    background: transparent;

    color: #898989;

    width: 80%;

}

footer .designs .search-form button{

    background: transparent;

    color: #898989;

}

footer .designs .footer-posi4{

    padding-top: 10px;

    border-top: 1px solid #898989;

    margin-top: 1.5rem;

}

footer .designs .footer-posi4 p{

    text-align: center;

}



/* footer end */

/* home page end */



.header .menu-heads{

    text-align: center;

    color: #fff;

    margin-top: 4rem;

}

.header .menu-heads h1{

    font-size: 45px;

    text-transform: uppercase;

    font-family: sayaBd;

}

.header .menu-heads .subtitle{

    font: 14px;

    text-transform: uppercase;

    font-family: sayaBd;

}

.header .menu-heads  a{

    color: #fff;

    font-family: sayaBd;

    text-transform: uppercase;

    font-family: sayaBd;

}

.header .menu-heads .subtitle i{

    padding:0  .5rem;

}





/* about page start */



#about{

    min-height: 100vh;

    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)) , url(../images/about-main.jpg) , no-repeat;

    background-size: cover;

    background-position: center;

    align-items: center;

    display: flex;

}

/* ab1 strat */





.ab-1 .ab-head{

    padding: 20px 0;

}

.ab-1 .ab-head span{

    color: #1181b0;

    font-size: 18px;

    font-family: OpensansMedium;

}

.ab-1 .ab-head h3{

    font-family: sayaBd;

    font-size: 32px;

    color: var(--black);

    text-transform: uppercase;

}

.ab-1 .ab-head p{

    color: #8a8a8a;

    font-size: 15px;

}



/* ab1 end */





/* ab2 strat */



.ab-2 .work1{

    background: #f8f8f8;

    

    text-align: center;

    padding: 3rem;

}

.ab-2 .work1 span{

    font-family: OpensansMedium;

    font-size: 18px;

    color: #1181b0;

}

.ab-2 .work1 h3{

    font-family: sayaBd;

    font-size: 38px;

    margin-top: 10px;

    margin-bottom: 20px;

    text-transform: uppercase;

}

.ab-2 .work1 p{

    font-size: 15px;

    color: #8a8a8a;

    margin-bottom: 2rem;

}

.ab-2 .work1 a{

    font-size: 14px;

    padding: .6rem 2rem;

    border: 2px solid #1181b0;

    text-transform: uppercase;

    color: #222121;

    transition: 1s ease;

    font-family: OpensansBold;

}

.ab-2 .work1 a:hover{

    letter-spacing: .2rem;

}

.ab-2 .work2{

    margin-bottom: 3rem;

    margin-top: 1rem;

}

.ab-2 .work2 h3{

    font-family: sayaBd;

    font-size: 30px;

    color: var(--black);

    padding-left: .5rem;

    text-transform: uppercase;

    margin-top: 3rem;

}

.ab-2 .work2 p{

    font-size: 15px;

    color: #8a8a8a;

    padding: 0 1rem 0 .5rem;

    margin: 0;

}

.ab-2 .work2 .position1{

    padding: 0 1rem 0 0px;

}

.ab-2 .work2 .position1 img{

    margin-bottom:0;

}

.ab-2 .work2 .position2{

    padding: 0;

}

.ab-2 .work2 .position2 img{

    margin-top: 2rem;

}



/* ab2 end */





/* ab3 start */



.ab3{

    background-color: #ededed;

    margin: 30px 0;

}

.ab3 .ab3-position{

    padding: 4rem 0px;

}

.ab3 .ab3-position .work{

    text-align: center;

    margin-top: 2rem;

}

.ab3 .ab3-position .work span{

    font-family: OpensansMedium;

    font-size: 18px;

    color: #1181b0;

}

.ab3 .ab3-position .work h3{

    font-family: sayaBd;

    color: var(--black);

    font-size: 30px;

    margin-top: .5rem;

    text-transform: uppercase;

}

.ab3 .ab3-position .work p{

    color: #8a8a8a;

    font-size: 15px;

    margin-top: 1rem;

    margin-bottom:3rem;

}

.ab3 .ab3-position .work a{

    font-size: 14px;

    padding: .6rem 2rem;

    border: 2px solid #1181b0;

    text-transform: uppercase;

    color: #222121;

    transition: 1s ease;

    font-family: OpensansBold;

}

.ab3 .ab3-position .work a:hover{

    letter-spacing: .2rem;

}



/* ab3 end */



/* ab4-start */



.ab4 .ab4-position{

    padding: 0px;

}

.ab4 .ab4-position .ceo{

    -webkit-filter: grayscale(100%);

	filter: grayscale(100%);

	-webkit-transition: .3s ease-in-out;

	transition: .3s ease-in-out;

}

.ab4 .ab4-position .ceo:hover{

    -webkit-filter: grayscale(0);

	filter: grayscale(0);

}

.ab4 .ab4-position .content{

    background: #f8f8f8 ;

    padding-left: 2rem;

    padding-right: 2rem;

    padding-bottom: 1rem;

}

.ab4 .ab4-position img{

    margin-top: 6rem;

}

.ab4 .ab4-position .content h3{

    font-size: 32px;

    color: var(--black);

    font-family: sayaBd;

    text-transform: uppercase;

    margin-top: 3rem;

}

.ab4 .ab4-position .content p{

    font-size: 15px;

    color: #595858;

    margin-top: 1rem;

}

.ab4 .ab4-position .content img{

    margin: 1rem 0;

}

.ab4 .ab4-position .content h5{

    color: #38393a;

    font-size: 20px;

}

.ab4 .ab4-position .content span{

    font-size: 14px;

    color: #1181b0;

    margin-bottom: 1rem;

}



/* ab4-start */



/* ab5 start */

.ab5{

    margin-bottom: 3rem;

}

.ab5 h3{

    text-align: center;

    font-family: sayaBd;

    font-size: 32px;

    color: var(--black);

    text-transform: uppercase;

    margin-top: 3rem;

}

.ab5 p{

    font-size: 16px;

    color: #676767;

    text-align: center;

}

.ab5 .handerline{

    background-color: #707070;

    height: 2px;

    display: block;

    margin: 0 auto;

    width: 85%;

    margin-bottom: 3rem;

    margin-top: 3rem;

}

.ab5 .team{

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));

    gap: 1.5rem;

    text-align: center;

    margin-bottom: 4rem;

}

.ab5 .team .members{

    position: relative;

}

.ab5 .team .members .member-name{

    position: absolute;

    top: 68%;

    right: 25px;

    text-align: left;

    background-color: rgba(248, 248, 248,.8);

    border-radius: 5px;

    width: 80%;

    padding: 1rem 1rem;

}

.ab5 .team .members .member-name h4{

    font-size: 15px;

    color: #333333;

    margin: 0;

    

}

.ab5 .team .members .member-name span{

    font-size: 11px;

    color: #0d0d0d;

}



/* ab5 end */



/* ab6 start */



.ab6{

    background-color: #f8f8f8;

    padding: 4rem 0;

    margin-top: 3rem ;

}

.ab6 .head h3{

    color: var(--black);

    text-align: center;

    font-family: sayaBd;

    font-size: 32px;

    text-transform: uppercase;

}

.ab6 .head p{

    color: #828282;

     font-size: 14px;

    text-align: center;

    padding: 0 3rem;

    margin-bottom: 3rem;

}

.ab6 .box{

    padding: 0px;

}

.ab6 .box .counting{

    margin-top: 3rem;

    margin-left: 3rem;

}

.ab6 .box .counting div{

    padding: 1rem 0;

    border-left: 4px solid #1181b0;

}

.ab6 .box .counting div h4{

    font-size: 36px;

    color: #313131;

    padding-left: 1.5rem;

    font-family: OpensansBold;

}

.ab6 .box .counting div p{

    font-size: 16px;

    color: #828282;

    padding-left: 1.5rem;

    margin-bottom: 0;

}



/* ab6 end */



/* ab7 start */



.ab7 .box{

    padding: 0 0 3rem;

}

.ab7 .box .ab-work-img{

    margin-top: 2rem;

}

.ab7 .work h3{

    text-transform: uppercase;

    font-size: 30px;

    font-family: sayaBd;

    color: var(--black);

    margin-top: 1rem;

}

.ab7 .work p{

    color: #8a8a8a;

    font-size: 14px;

    padding-right: 0;

}

.ab7 .work1{

    padding-left: 0;

}

.ab7 .work3{

    padding-right: 0;

    padding-left: 0;

}







/* ab7 end */











/* about page end */











/* join start */







#join{

    min-height: 100vh;

    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)) , url(../images/join-main.png) , no-repeat;

    background-size: cover;

    background-position: center;

    align-items: center;

    display: flex;

}

.section1 .menu-heads h6{

    font-size: 24px;

    font-family: sayaBd;

    color: #fff;

}



/* js1 start */

.js1{

    padding: 3rem 3rem 2rem;

}

.js1 .js1-work-img{

    margin: 1rem 0 3rem;

}

.js1 .work{

    padding: 4rem 0 0;

    text-align: center;

    align-self: center;

}

.js1 .work a{

    color: #fff;

    background-color: #2c2727;

    font-size: 16px;

    transition: 1s ease;

    padding: .5rem 1rem;

}

.js1 .work a:hover{

    letter-spacing: .2rem;

}

.js1 .work h3{

    font-size: 36px;

    font-family: sayaBd;

    color: var(--black);

    margin-top: 1rem;

    text-transform: uppercase;

}

.js1 .work p{

    color: #8a8a8a;

    font-size: 15px;

    margin:0;

}

.js1 .work1{

    padding: 2rem  0rem ;

    align-self: center;

}

.js1 .work1 .abtn1{

    background-color: #2c2727;

    font-family: OpensansMedium;

    font-size: 16px;

    color: #fff;

    padding: .6rem 1.6rem;

    transition: 1s ease;

}

.js1 .work1 .abtn1:hover{

    letter-spacing: .2rem;

}

.js1 .work1 h3{

    font-family: sayaBd;

    font-size: 36px;

    text-transform: uppercase;

    padding-right: 5rem;

    margin: 2rem 0;

}

.js1 .work1 span{

    font-family: archivo;

    font-size: 20px;

    color: #1181b0;

}

.js1 .work1 p{

    font-size: 14px;

    font-family: Assistant;

    color: #776e6e;

    padding-right: 13rem;

}

.js1 .work1 p a{

    font-size: 14px;

    font-family: Assistant;

    color: #776e6e;

}

.js1 .work1 .abtn2{

    font-family: OpensansBold;

    font-size: 14px;

    color: #222121;

    padding: .6rem 1.6rem;

    transition: 1s ease;

    border: 2px solid #1181b0;

}

.js1 .work1 .abtn2:hover{

    letter-spacing: .2rem;

}

.js1 iframe{

    width: 100%;

    height: 450px;

}

.js2 {

    padding: 0rem 2rem 3rem;

}

.js2 .head h3{

    font-size: 30px;

    font-family: saya;

    color: var(--black);

    text-align: center;

    margin: 1rem;

}

.js2 .head p{

    text-align: center;

    font-size: 18px;

    color: #676767;

    margin-bottom: 2rem;

}



.js2 form  label{

    margin-top: 1rem;

    margin-bottom: .5rem;

    font-size: 15px;

    color: #333333;

    font-family: roboto;

}

.js2 form  input,select{

    border: 1px solid #c3c3c3;

    border-radius: 5px;

    width: 100%;

    padding: .6rem;

}

.js2 form #myfile{

    border: 1px solid #c3c3c3;

    border-radius: 5px;

    width: 100%;

    padding: 0;

    outline: none;

}

::-webkit-file-upload-button{

    color: #fff;

    background: #2c2727;

    border: none;

    border-radius: 5px;

    padding: .6rem;

}

.js2 form button{

    margin-top: 3rem;

    background-color: #2c2727;

    color: #ffff;

    font-family: Robotomd;

    font-size: 17px;

    width: 100%;

    padding: .6rem;

    border-radius: 5px;

}







/* js1 end */





/* join end */







/* project start */





#project{

    min-height: 100vh;

    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)) , url(../images/project-amin.jpg) , no-repeat;

    background-size: cover;

    background-position: center;

    align-items: center;

    display: flex;

}



/* pr1 strat */





.pr1 .head{

    border-bottom: 2px solid;

    text-align: center;

    padding: 2.5rem 0 2rem;

    margin: 0 1rem 3rem;

}



.pr1 .box{

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));

    gap: 1.5rem;

    padding: 0;

    margin-bottom: 2rem;

}

.pr1 .box .work{

    box-shadow: 0px 5px 8px #e5e5e5, 0px -5px 8px #e5e5e5;

    margin: 5px;

}

.pr1 .box .work h5{

    font-family: sayaBd;

    font-size: 20px;

    color: var(--black);

    padding: .5rem 1.5rem;

    margin-top: 1rem;

}

.pr1 .box .work p{

    margin: 0;

    font-size: 14px;

    font-family: OpensansItalic;

    color: #9b9b9b;

    text-align: left;

    padding: .5rem 1.5rem;

    margin-bottom: 2rem;

    min-height: 17rem;

}

.pr1 .box .work span{

    background-color: #0e64aa;

    display: block;

    height: 2px;

    width: 7rem;

    margin: 0 auto;

}













/* .pr1 .head .tablink {

    background-color: #222;

    color: #999;

    border: none;

    outline: none;

    cursor: pointer;

    padding: 14px 16px;

    font-size: 17px;

  }

  

  .pr1 .head .tablink:hover {

    color: #5a5a66;

  } */

  

  /* Style the tab content (and add height:100% for full page content) */

  /* .pr1.tabcontent {

    color: ;

    display: none;

    height: 100%;

  } */







.pr1  .box .pj-animation {

    position: relative;

    

  }

  

  

  .pr1  .box .pj-animation .overlay {

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    height: 100%;

    width: 100%;

    opacity: 0;

    transition: .5s ease;

    background-color: rgba(0,0,0,.8);

  }

  

  .pr1  .box .pj-animation:hover .overlay {

    opacity: 1;

  }

  

  .pr1  .box .pj-animation .text {

    position: absolute;

    top: 50%;

    left: 50%;

    -webkit-transform: translate(-50%, -50%);

    -ms-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%);

    text-align: center;

  }

  .pr1  .box .pj-animation .text h5{

    color: white;

    font-size: 20px;

  }



/* pr1 end */



.pr2 .head {

    padding: 3rem 0 3.8rem;

}

.pr2 .head h3{

    color: #fff;

    margin-bottom: 1.5rem;

    font-family: saya;

    font-size: 31px;

}

.pr2 .head a{

    font-size: 15px;

    text-transform: uppercase;

    padding: 0.5rem 2rem;

    color: #fff;

    transition: 1s ease;

    /* background: #143b5c; */

    border: 2px solid;

    margin: 1rem 0;

}

.pr2 .head a:hover{

    letter-spacing: .2rem;

}





/* project end */



/* contact start */

.ct1{

    margin: 3rem 0;

}

.ct1 .box{

    background-color: rgba(0, 0, 0, 0.8);

    padding: 3rem;

    border-radius: .5rem;

}

.ct1 .box h3{

    text-align: center;

    font-family: saya;

    font-size: 40px;

    color: #fff;

    border-bottom: 1px solid rgba(255, 255, 255, 0.5);

    padding-bottom: 1rem;

    margin-bottom: 2rem;

} 

.ct1 .box .design{

    text-align: center;

    padding: 1rem 0;

    border: 1px solid rgba(255, 255, 255, 0.5);

    border-radius: .5rem;

    min-height: 10rem;

    margin: .7rem 0;

}

.ct1 .box .design p{

    color: #fff;

    font-size: 14px;

    margin: 1rem 0;

}

.ct1 .box .design a{

    color: #fff;

    font-size: 14px;

}

.ct1 .box .design a:hover{

    color: rgba(255, 255, 255, 0.3);



}

.ct1 .box iframe{

    border-radius: .5rem;

    width: 100%;

    height: 350px;

    margin-top: 2.5rem;

}

/* contact end */



.grid-item {

    display: inline-block;

        height: auto;

    

        overflow: hidden;

        text-align: center;

        width: 50%;

        

    }





}



































@media (max-width:575px){

    /* nav bar start */


    .slider-1, .slider-2, .slider-3, .slider-4, .slider-5, .slider-6, .slider-7, .slider-8, .slider-9 {
        min-height: 57vh;
    }
    .carousel-caption{
        padding-top: 0 !important;
    }

.hbg-img{

    min-height: 100vh;

    background: url(../images/%208995.png);

    background-size: cover;

    background-position: center;

    align-items: center;

}



.header{

    background: rgba(0,0,0,.6);

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:0.3rem 4%;

    border-bottom: #fff;

    position: fixed;

    top:0%; left: 0; right: 0;

    z-index: 1000;

}

.header .navbar2 a{

    /* display: none; */

}



/* .header .navbar2 a:hover{

    color: var(--border);

    border-bottom: .1rem solid #fff;

    padding-bottom: .5rem;

} */



.header .navbar2 i{

    color: #fff;

    font-size: 15px;

    padding: 0.1rem .3rem;

}

.header .navbar2 .icon1{

    border-left: none;

    padding-left: 0rem;

}



#menu-btn{

    display: inline-block;

}

.socialmedia{

    display: none;

}



 .res-media{

    display: inline-flex !important;

    text-align: center;

}

.res-media .second-media{

    margin: .5rem !important;

}

.res-media .second-media img{

    height: 2rem;

}



.header .navbar-main{

    position: absolute;

    top:102%; right: -100%;

    background: rgba(0,0,0,.6);

    width: 20rem;

    height: calc(100vh - 5.5rem);

    

}



.header .navbar-main.active{

    right:0;

}



.header .navbar-main a{

    color:#fff;

    display: block;

    margin:1.5rem ;

    padding:.5rem;

    font-size: 14px;

    text-transform: uppercase;

    text-align: center;

}

.header .navbar-main a:hover{

    /* color: var(--border);

    border-bottom: .1rem solid #fff;

    padding-bottom: .4rem */

}



.header .search-form{

    width: 90%;

    right: 2rem;

}





.header .search-form{

    position: absolute;

    top:102%; right: 0;

    background: rgba(0,0,0,.6);

    width: 25rem;

    height: 3rem;

    display: flex;

    align-items: center;

    transform: scaleY(0);

    transform-origin: top;

    

}



.header .search-form input{

    height: 100%;

    width: 100%;

    font-size: 14px;

    color:#fff;

    padding:1rem;

    text-transform: none;

    background-color: rgba(0,0,0,.1);

}



.header .search-form label{

    cursor: pointer;

    font-size: 20px;

    margin-right: 1.5rem;

    color:#fff;

}



.header .search-form label:hover{

    color:#fff;

}



/* nav bar end */



/* home page start */





/* header start */



/* #home{

    min-height: 70vh;

    background: url(../images/%208995.png) no-repeat;

    background-size: cover;

    background-position: center;

    align-items: center;

    display: flex;

} */



.carousel-indicators {

    transform: translate(25px,-6px);

}



.section1 .menu-heads{

    display: block;

    margin: 0 auto;

    text-align: center;

}



.section1 .menu-heads h1{

    font-size: 50px;

    font-family: sayaBd;

    text-transform: uppercase;

    color: #fff;

    text-align: center;

}

.section1 .menu-heads .subtitle{

    text-transform: uppercase;

    font-family: sayaBd;

    color: #fff;

}

.section1 .menu-heads .subtitle i{

    padding: .5rem;

}

.section1 .menu-heads .subtitle a{

    color: #fff;

    font-family: sayaBd;

}



/* header end */



/* section 2 start */



.section2{

    margin: 30px 0;

}

.section2 .mainhead{

    text-align: center;

    font-family: saya;

    font-size: 36px;

    color: var(--black);

}

.section2 .subtitle{

    color: #676767;

    text-align: center;

    padding: 10px 0;

    border-bottom: .1rem solid #cbcbcb;

    font-size: 18px;

}

.section2 .designs{

    padding: 20px 0;

}



.section2 .designs .number{

    text-align: right;

}

.section2 .designs  h3{

    color: #fff;

    margin-top: 10px;

    font-family: saya;

    font-size: 36px;

}

.section2 .designs .number h3{

    color: #fff;

    margin-top: 10px;

    font-family: saya;

    font-size: 41 px;

}

.section2 .designs p{

    color: #fff;

    margin-top: 10px;

    font-size: 24px;

}

.section2 .designs a{

    color: #fff;

    text-transform: uppercase;

    font-size: 16px;

}

.section2 .designs a i{

    padding: 3px 5px;

    border: 1px solid ;   

    border-radius: 50%;

    font-size: 9px;

    margin-left: 10px;

}

.section2 .designs .design1{

    background-image: url(../images/Group-9004.jpg);

    background-size: cover;

    padding: 3rem 3rem 3rem 3rem;

    margin-bottom: 30px;

 }

.section2 .designs .design2{

    background-image: url(../images/Group-8997.jpg);

    background-size: cover;

    padding: 3rem 3rem 3rem 3rem;

    margin-bottom: 30px;

 }

 .section2 .designs .design3{

    background-image: url(../images/Group-8998.jpg);

    background-size: cover;

    padding: 3rem 3rem 3rem 3rem;

    margin-bottom: 30px;

 }

 .section2 .designs .design4{

    background-image: url(../images/Group-8999.jpg);

    background-size: cover;

    padding: 3rem 3rem 3rem 3rem;

    margin-bottom: 30px;

 }

 .section2 .designs .design5{

    background-image: url(../images/Group-9000.jpg);

    background-size: cover;

    padding: 3rem 3rem 3rem 3rem;

    margin-bottom: 30px;

 }

 .section2 .designs .design6{

    background: #252222;

    padding-top: 3.5rem;

    padding-bottom: 3.5rem;

    padding-left: 3rem;

    margin-bottom: 30px;

 }

 .section2 .designs .design6 h3{

    margin-top: 0;

    margin-bottom: 20px;

    font-size: 36px;

 }

 .section2 .designs .design6 .booking-btn{

    border: 2px solid;

    padding: .6rem 2rem;

    margin-top: 10px;

    background-color: #191818;

    transition: .8s ease;

    font-size: 15px;

 }

 .section2 .designs .design6 .booking-btn:hover{

    letter-spacing: .2rem;

 }



.section2 .comment{

    padding: 0 ;

    

}

.section2 .comment .comment-posi{

    box-shadow: 0px 5px 8px #e5e5e5 , -0px -5px 8px #e5e5e5;

    margin: 5px;

}

.section2 .comment .comment-posi .comment-bg{

    position: relative;

    padding: 30px 0;

    text-align: end;

    height: auto;

    margin-bottom: 1.8rem;

}

.section2 .comment .comment-posi .comment-bg .comment-bg-hover{

    position: absolute;

    top: 1px;

    transform: translate();

}



.section2 .comment .comment-posi .comment-bg-hover p{

    padding: 1.5rem .6rem;

    margin: 0;

    font-size: 14px;

    font-family: OpensansItalic;

    color: #9b9b9b;

    text-align: left;

}

.section2 .comment .comment-posi .comment-bg-hover h4{

    padding: 0 1rem 1rem;

    text-align: left;

    font-size: 22px;

}

/* section 2 end */



/* section 3 start */

.section3{

    margin-top: 30px;

}

.section3  .designs{

    padding:0 1rem;

    padding-bottom: 1rem;

}

.section3  .designs .work1{

    background-color: #f5f5f5;

}

.section3  .designs .work1 div{

    padding: 1rem 10px 2.8rem;

    text-align: center;

}

.section3  .designs .work1 h3{

    padding: 0.5rem 4rem;

    text-transform: capitalize;

    font-family: saya;

    font-size: 30px;

    color: var(--black);

}

.section3  .designs .work1 p{

    padding: 0 1rem .8rem;

    font-size: 13px;

    color: #8a8a8a;

}

.section3  .designs .work1 div a{

    border: 2px solid #5a5a66;

    color: #464545;

    padding: .6rem 2rem;

    text-transform: capitalize;

    font-size: 14px;

    font-family: OpensansBold;

    transition: 1s ease;

}

.section3  .designs .work1 div a:hover{

    color: #fff;

    background-color: #191818;

    letter-spacing: .2rem;

}

.section3  .designs .work2 div{

    padding: 2rem 0 3rem;

    text-align: center;

}

.section3  .designs .work-img{

    margin-top: 3rem;

}

.section3  .designs .work2 h3{

    padding: 0.5rem 3rem;

    text-transform: capitalize;

    font-family: saya;

    font-size: 30px;

}



.section3  .designs  .work2 p{

    padding: 0 20px;

    font-size: 14px;

    padding-bottom: .8rem;

    color: #8a8a8a;

}

.section3  .designs .work2 a{

    border: 2px solid #5a5a66;

    color: #464545;

    padding: .6rem 2rem;

    text-transform: capitalize;

    font-size: 14px;

    transition: 1s ease;

    font-family: OpensansBold;

}

.section3  .designs .work2 a:hover{

    color: #fff;

    background-color: #191818;

    letter-spacing: .2rem;

}

.section3  .designs .work3 .table-design{

    padding: 1rem 20px;

    text-align: center;

}

.section3  .designs .work3 h3{

    padding: 5px 0rem;

    text-transform: capitalize;

    font-family: saya;

    font-size: 30px;

    color: #2f2f2f;

}

.section3  .designs .work3 .table-posi{

    padding: 0.5rem 0 1.7rem;

}

.section3  .designs .work3 .table-posi  p{

    border: 2px solid var(--border);

    padding: .5rem;

    font-size: 14px;

    text-transform: capitalize;

    font-family: OpensansBold;

    color: #464545;

    margin-bottom: 1.2rem;

}

.section3  .designs .work3 .table-posi a{

    background: #5a5a66;

    padding: .5rem 1rem;

    color: #fff;

    transition: 1s ease;

    margin-top: 10px;

    font-size: 14px;

    font-family: OpensansBold;

}

.section3  .designs .work3 .table-posi a:hover{

    letter-spacing: .2rem;

}



/* section 3 end */



/* section 4 start */



.section4{

    background: url(../images/%2012.png) no-repeat;

    background-size: cover;

    background-position: center;

    align-items: center;

    padding-bottom: 5rem;

    

}



.section4 .box-container .box-clients{

    border: 1px solid #a9a7a7;

    text-align: center;

    padding: .5rem;

    align-items: center;

    background-color: #fff;

}

.section4 .mainhead{

    text-align: center;

    padding-top: 3rem;

    font-family: saya;

    font-size: 36px;

    color: var(--black);

}

.section4 .subtitle{

    text-align: center;

    text-transform: capitalize;

    padding: 20px 0;

    font-size: 18px;

    color: #676767;

}



/* section 4 end */



/* section 5 start */



.section5 .mainhead{

    text-align: center;

    padding-top: 3rem;

    text-transform: capitalize;

    font-family: saya;

    color: var(--black);

    font-size: 40px;

}

.section5 .subtitle{

    text-align: center;

    text-transform: capitalize;

    padding: 20px 0;

    color: #676767;

    font-size: 20px;

}



/* section 5 end */



/* section 6 start */



.section6{

    /* background: #0e64aa; */

    padding: 3rem 0 3.8rem;

}

.section6 .designs{

    padding: 0 20px;

    text-align: center;

}

.section6 .designs h3{

    color: #fff;

    margin-bottom: 1.5rem;

    font-family: saya;

    font-size: 31px;

}

.section6 .designs a{

    font-size: 15px;

    text-transform: uppercase;

    padding: .5rem 2rem;

    color: #fff;

    transition: 1s ease;

    /* background: #143b5c; */

    border: 2px solid ;

    margin: 1rem 0;

}

.section6 .designs a:hover{

    letter-spacing: .2rem;

    color: #fff;

}



/* section 6 end */



/* footer start */



footer{

    background: #313233;

}

footer .designs{

    padding-top: 20px;

}

footer .designs h4{

    color: #fff;

    text-transform: uppercase;

    padding: 30px 0 20px;

    font-family: sayaFy;

    font-size: 18px;

}

footer .designs p{

    color: #cccccc;

    font-size: 14px;



}

footer .designs .head-h4-2{

   padding-left: 0 !important;

}

footer .designs .col-md-4 h4{

    padding-left: 2rem;

}

footer .designs .footer-posi2{

    padding:0;

}

footer .designs .footer-posi2 a{

    border-bottom: 1px solid;

    color: #cccccc;

}

footer .designs .footer-posi3{

    padding-right: 0rem;

}

footer .designs .footer-posi3 img{

    margin-right: 10px;

    margin-bottom: 15px;

}

footer .designs .search-form{

    border-bottom: 1px solid #898989;

    margin-right: 3rem;

}

footer .designs .search-form input{

    background: transparent;

    color: #898989;

    width: 80%;

}

footer .designs .search-form button{

    background: transparent;

    color: #898989;

}

footer .designs .footer-posi4{

    padding-top: 10px;

    border-top: 1px solid #898989;

    margin-top: 1.5rem;

}

footer .designs .footer-posi4 p{

    text-align: center;

}



/* footer end */

/* home page end */



.header .menu-heads{

    text-align: center;

    color: #fff;

    margin-top: 4rem;

}

.header .menu-heads h1{

    font-size: 45px;

    text-transform: uppercase;

    font-family: sayaBd;

}

.header .menu-heads .subtitle{

    font: 14px;

    text-transform: uppercase;

    font-family: sayaBd;

}

.header .menu-heads  a{

    color: #fff;

    font-family: sayaBd;

    text-transform: uppercase;

    font-family: sayaBd;

}

.header .menu-heads .subtitle i{

    padding:0  .5rem;

}





/* about page start */



#about{

    min-height: 70vh;

    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)) , url(../images/about-main.jpg) , no-repeat;

    background-size: cover;

    background-position: center;

    align-items: center;

    display: flex;

}

/* ab1 strat */





.ab-1 .ab-head{

    padding: 20px 0;

}

.ab-1 .ab-head span{

    color: #1181b0;

    font-size: 18px;

    font-family: OpensansMedium;

}

.ab-1 .ab-head h3{

    font-family: sayaBd;

    font-size: 32px;

    color: var(--black);

    text-transform: uppercase;

}

.ab-1 .ab-head p{

    color: #8a8a8a;

    font-size: 15px;

}



/* ab1 end */





/* ab2 strat */



.ab-2 .work1{

    background: #f8f8f8;

    text-align: center;

    padding: 1rem;

}

.ab-2 .work1 span{

    font-family: OpensansMedium;

    font-size: 18px;

    color: #1181b0;

}

.ab-2 .work1 h3{

    font-family: sayaBd;

    font-size: 38px;

    margin-top: 10px;

    margin-bottom: 20px;

    text-transform: uppercase;

}

.ab-2 .work1 p{

    font-size: 15px;

    color: #8a8a8a;

    margin-bottom: 2rem;

}

.ab-2 .work1 a{

    font-size: 14px;

    padding: .6rem 2rem;

    border: 2px solid #1181b0;

    text-transform: uppercase;

    color: #222121;

    transition: 1s ease;

    font-family: OpensansBold;

}

.ab-2 .work1 a:hover{

    letter-spacing: .2rem;

}

.ab-2 .work2{

    margin-bottom: 3rem;

    margin-top: 1rem;

}

.ab-2 .work2 h3{

    font-family: sayaBd;

    font-size: 30px;

    color: var(--black);

    padding-left: .5rem;

    text-transform: uppercase;

    margin-top: 3rem;

}

.ab-2 .work2 p{

    font-size: 15px;

    color: #8a8a8a;

    padding: 0 1rem 0 .5rem;

    margin: 0;

}

.ab-2 .work2 .position1{

    padding: 0;

    text-align: center;

}

.ab-2 .work2 .position1 img{

    margin-bottom:0;

}

.ab-2 .work2 .position2{

    padding: 0;

    text-align: center;

}

.ab-2 .work2 .position2 img{

    margin-top: 2rem;

}



/* ab2 end */





/* ab3 start */



.ab3{

    background-color: #ededed;

    margin: 30px 0;

}

.ab3 .ab3-position{

    padding: 4rem 0px;

}

.ab3 .ab3-position .work{

    text-align: center;

    margin-top: 2rem;

}

.ab3 .ab3-position .work span{

    font-family: OpensansMedium;

    font-size: 18px;

    color: #1181b0;

}

.ab3 .ab3-position .work h3{

    font-family: sayaBd;

    color: var(--black);

    font-size: 30px;

    margin-top: .5rem;

    text-transform: uppercase;

}

.ab3 .ab3-position .work p{

    color: #8a8a8a;

    font-size: 15px;

    margin-top: 1rem;

    margin-bottom:3rem;

}

.ab3 .ab3-position .work a{

    font-size: 14px;

    padding: .6rem 2rem;

    border: 2px solid #1181b0;

    text-transform: uppercase;

    color: #222121;

    transition: 1s ease;

    font-family: OpensansBold;

}

.ab3 .ab3-position .work a:hover{

    letter-spacing: .2rem;

}



/* ab3 end */



/* ab4-start */



.ab4 .ab4-position{

    padding: 0px;

}

.ab4 .ab4-position .ceo{

    -webkit-filter: grayscale(100%);

	filter: grayscale(100%);

	-webkit-transition: .3s ease-in-out;

	transition: .3s ease-in-out;

}

.ab4 .ab4-position .ceo:hover{

    -webkit-filter: grayscale(0);

	filter: grayscale(0);

}

.ab4 .ab4-position .content{

    background: #f8f8f8 ;

    padding-left: 2rem;

    padding-right: 2rem;

    padding-bottom: 1rem;

}

.ab4 .ab4-position img{

    margin-top: 6rem;

}

.ab4 .ab4-position .content h3{

    font-size: 32px;

    color: var(--black);

    font-family: sayaBd;

    text-transform: uppercase;

    margin-top: 3rem;

}

.ab4 .ab4-position .content p{

    font-size: 15px;

    color: #595858;

    margin-top: 1rem;

}

.ab4 .ab4-position .content img{

    margin: 1rem 0;

}

.ab4 .ab4-position .content h5{

    color: #38393a;

    font-size: 20px;

}

.ab4 .ab4-position .content span{

    font-size: 14px;

    color: #1181b0;

    margin-bottom: 1rem;

}



/* ab4-start */



/* ab5 start */

.ab5{

    margin-bottom: 3rem;

}

.ab5 h3{

    text-align: center;

    font-family: sayaBd;

    font-size: 32px;

    color: var(--black);

    text-transform: uppercase;

    margin-top: 3rem;

}

.ab5 p{

    font-size: 16px;

    color: #676767;

    text-align: center;

}

.ab5 .handerline{

    background-color: #707070;

    height: 2px;

    display: block;

    margin: 0 auto;

    width: 85%;

    margin-bottom: 3rem;

    margin-top: 3rem;

}

.ab5 .team{

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));

    gap: 1.5rem;

    text-align: center;

    margin-bottom: 4rem;

}

.ab5 .team .members{

    position: relative;

}

.ab5 .team .members .member-name{

    position: absolute;

    top: 68%;

    right: 25px;

    text-align: left;

    background-color: rgba(248, 248, 248,.8);

    border-radius: 5px;

    width: 80%;

    padding: 1rem 1rem;

}

.ab5 .team .members .member-name h4{

    font-size: 15px;

    color: #333333;

    margin: 0;

    

}

.ab5 .team .members .member-name span{

    font-size: 11px;

    color: #0d0d0d;

}



/* ab5 end */



/* ab6 start */



.ab6{

    background-color: #f8f8f8;

    padding: 4rem 0;

    margin-top: 3rem ;

}

.ab6 .head h3{

    color: var(--black);

    text-align: center;

    font-family: sayaBd;

    font-size: 32px;

    text-transform: uppercase;

}

.ab6 .head p{

    color: #828282;

     font-size: 14px;

    text-align: center;

    padding: 0 3rem;

    margin-bottom: 3rem;

}

.ab6 .box{

    padding: 0px;

}

.ab6 .box .counting{

    margin-top: 3rem;

    margin-left: 3rem;

}

.ab6 .box .counting div{

    padding: 1rem 0;

    border-left: 4px solid #1181b0;

}

.ab6 .box .counting div h4{

    font-size: 36px;

    color: #313131;

    padding-left: 1.5rem;

    font-family: OpensansBold;

}

.ab6 .box .counting div p{

    font-size: 16px;

    color: #828282;

    padding-left: 1.5rem;

    margin-bottom: 0;

}



/* ab6 end */



/* ab7 start */



.ab7 .box{

    padding: 0 0 3rem;

}

.ab7 .box .ab-work-img{

    margin-top: 2rem;

}

.ab7 .work h3{

    text-transform: uppercase;

    font-size: 30px;

    font-family: sayaBd;

    color: var(--black);

    margin-top: 1rem;

}

.ab7 .work p{

    color: #8a8a8a;

    font-size: 14px;

    padding-right: 0;

}

.ab7 .work1{

    text-align: center;

    padding: 0 1rem;

}

.ab7 .work3{

    padding: 0 1rem !important;

    text-align: center;

}







/* ab7 end */











/* about page end */











/* join start */







#join{

    min-height: 70vh;

    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)) , url(../images/join-main.png) , no-repeat;

    background-size: cover;

    background-position: center;

    align-items: center;

    display: flex;

}

.section1 .menu-heads h6{

    font-size: 24px;

    font-family: sayaBd;

    color: #fff;

    padding: 0;

}



/* js1 start */

.js1{

    padding: 1rem 1rem 2rem;

}

.js1 .js1-work-img{

    margin: 1rem 0 3rem;

}

.js1 .work{

    padding: 4rem 0 0;

    text-align: center;

    align-self: center;

}

.js1 .work a{

    color: #fff;

    background-color: #2c2727;

    font-size: 16px;

    transition: 1s ease;

    padding: .5rem 1rem;

}

.js1 .work a:hover{

    letter-spacing: .2rem;

}

.js1 .work h3{

    font-size: 36px;

    font-family: sayaBd;

    color: var(--black);

    margin-top: 1rem;

    text-transform: uppercase;

}

.js1 .work p{

    color: #8a8a8a;

    font-size: 15px;

    margin:0;

}

.js1 .work1{

    padding: 2rem  0rem ;

    align-self: center;

}

.js1 .work1 .abtn1{

    background-color: #2c2727;

    font-family: OpensansMedium;

    font-size: 16px;

    color: #fff;

    padding: .6rem 1.6rem;

    transition: 1s ease;

}

.js1 .work1 .abtn1:hover{

    letter-spacing: .2rem;

}

.js1 .work1 h3{

    font-family: sayaBd;

    font-size: 36px;

    text-transform: uppercase;

    padding-right: 5rem;

    margin: 2rem 0;

}

.js1 .work1 span{

    font-family: archivo;

    font-size: 20px;

    color: #1181b0;

}

.js1 .work1 p{

    font-size: 14px;

    font-family: Assistant;

    color: #776e6e;

    padding-right: 13rem;

}

.js1 .work1 p a{

    font-size: 14px;

    font-family: Assistant;

    color: #776e6e;

}

.js1 .work1 .abtn2{

    font-family: OpensansBold;

    font-size: 14px;

    color: #222121;

    padding: .6rem 1.6rem;

    transition: 1s ease;

    border: 2px solid #1181b0;

}

.js1 .work1 .abtn2:hover{

    letter-spacing: .2rem;

}

.js1 iframe{

    width: 100%;

    height: 450px;

}

.js2 {

    padding: 0rem 2rem 3rem;

}

.js2 .head h3{

    font-size: 30px;

    font-family: saya;

    color: var(--black);

    text-align: center;

    margin: 1rem;

}

.js2 .head p{

    text-align: center;

    font-size: 18px;

    color: #676767;

    margin-bottom: 2rem;

}



.js2 form  label{

    margin-top: 1rem;

    margin-bottom: .5rem;

    font-size: 15px;

    color: #333333;

    font-family: roboto;

}

.js2 form  input,select{

    border: 1px solid #c3c3c3;

    border-radius: 5px;

    width: 100%;

    padding: .6rem;

}

.js2 form #myfile{

    border: 1px solid #c3c3c3;

    border-radius: 5px;

    width: 100%;

    padding: 0;

    outline: none;

}

::-webkit-file-upload-button{

    color: #fff;

    background: #2c2727;

    border: none;

    border-radius: 5px;

    padding: .6rem;

}

.js2 form button{

    margin-top: 3rem;

    background-color: #2c2727;

    color: #ffff;

    font-family: Robotomd;

    font-size: 17px;

    width: 100%;

    padding: .6rem;

    border-radius: 5px;

}







/* js1 end */





/* join end */







/* project start */





#project{

    min-height: 70vh;

    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)) , url(../images/project-amin.jpg) , no-repeat;

    background-size: cover;

    background-position: center;

    align-items: center;

    display: flex;

}



/* pr1 strat */





.pr1 .head{

    border-bottom: 2px solid;

    text-align: center;

    padding: 2.5rem 0 2rem;

    margin: 0 .5rem 2rem;

}



.pr1 .box{

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));

    gap: 1rem;

    padding: 0;

    margin-bottom: 2rem;

}

.pr1 .box .work{

    box-shadow: 0px 5px 8px #e5e5e5, 0px -5px 8px #e5e5e5;

    margin: 5px;

}

.pr1 .box .work h5{

    font-family: sayaBd;

    font-size: 20px;

    color: var(--black);

    padding: .5rem 1.5rem;

    margin-top: 1rem;

}

.pr1 .box .work p{

    margin: 0;

    font-size: 14px;

    font-family: OpensansItalic;

    color: #9b9b9b;

    text-align: left;

    padding: .5rem 1.5rem;

    margin-bottom: 2rem;

    min-height: auto;

}

.pr1 .box .work span{

    background-color: #0e64aa;

    display: block;

    height: 2px;

    width: 7rem;

    margin: 0 auto;

}













/* .pr1 .head .tablink {

    background-color: #222;

    color: #999;

    border: none;

    outline: none;

    cursor: pointer;

    padding: 14px 16px;

    font-size: 17px;

  }

  

  .pr1 .head .tablink:hover {

    color: #5a5a66;

  } */

  

  /* Style the tab content (and add height:100% for full page content) */

  /* .pr1.tabcontent {

    color: ;

    display: none;

    height: 100%;

  } */







.pr1  .box .pj-animation {

    position: relative;

    

  }

  

  

  .pr1  .box .pj-animation .overlay {

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    height: 100%;

    width: 100%;

    opacity: 0;

    transition: .5s ease;

    background-color: rgba(0,0,0,.8);

  }

  

  .pr1  .box .pj-animation:hover .overlay {

    opacity: 1;

  }

  

  .pr1  .box .pj-animation .text {

    position: absolute;

    top: 50%;

    left: 50%;

    -webkit-transform: translate(-50%, -50%);

    -ms-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%);

    text-align: center;

  }

  .pr1  .box .pj-animation .text h5{

    color: white;

    font-size: 20px;

  }



/* pr1 end */



.pr2 .head {

    padding: 3rem 0 ;

    text-align: center;

}

.pr2 .head h3{

    color: #fff;

    margin-bottom: 1.5rem;

    font-family: saya;

    font-size: 31px;

}

.pr2 .head a{

    font-size: 15px;

    text-transform: uppercase;

    padding: 0.5rem 2rem;

    color: #fff;

    transition: 1s ease;

    /* background: #143b5c; */

    border: 2px solid;

    margin: 1rem 0;

}

.pr2 .head a:hover{

    letter-spacing: .2rem;

}





/* project end */



/* contact start */

.ct1{

    margin: 3rem 0;

}

.ct1 .box{

    background-color: rgba(0, 0, 0, 0.8);

    padding: 3rem;

    border-radius: .5rem;

}

.ct1 .box h3{

    text-align: center;

    font-family: saya;

    font-size: 40px;

    color: #fff;

    border-bottom: 1px solid rgba(255, 255, 255, 0.5);

    padding-bottom: 1rem;

    margin-bottom: 2rem;

} 

.ct1 .box .design{

    text-align: center;

    padding: 1rem 0;

    border: 1px solid rgba(255, 255, 255, 0.5);

    border-radius: .5rem;

    min-height: 10rem;

    margin: .7rem 0;

}

.ct1 .box .design p{

    color: #fff;

    font-size: 14px;

    margin: 1rem 0;

    padding: 0 .5rem;

}

.ct1 .box .design a{

    color: #fff;

    font-size: 14px;

}

.ct1 .box .design a:hover{

    color: rgba(255, 255, 255, 0.3);



}

.ct1 .box iframe{

    border-radius: .5rem;

    width: 100%;

    height: 350px;

    margin-top: 2.5rem;

}

/* contact end */







.grid-item {

    display: inline-block;

        height: auto;

    

        overflow: hidden;

        text-align: center;

        width: 100%;

        

    }



    .filters li {

        display: flex;

        padding: 10px 2px;

        font-size: 15px;

        font-weight: 600;

        cursor: pointer;

        justify-content: center;

    }

    .pr1 .box{

        display: grid;

        grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));

        gap: 1.5rem;

        padding: 2rem;
    }





}











































@media (max-width:471px){

    /* nav bar start */

.hbg-img{

    min-height: 100vh;

    background: url(../images/%208995.png);

    background-size: cover;

    background-position: center;

    align-items: center;

}



.header{

    background: rgba(0,0,0,.6);

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:0.3rem 4%;

    border-bottom: #fff;

    position: fixed;

    top:0%; left: 0; right: 0;

    z-index: 1000;

}

.header .navbar2 a{

    /* display: none; */

}



/* .header .navbar2 a:hover{

    color: var(--border);

    border-bottom: .1rem solid #fff;

    padding-bottom: .5rem;

} */



.header .navbar2 i{

    color: #fff;

    font-size: 15px;

    padding: 0.1rem .3rem;

}

.header .navbar2 .icon1{

    border-left: none;

    padding-left: 0rem;

}



#menu-btn{

    display: inline-block;

}



.header .navbar-main{

    position: absolute;

    top:102%; right: -100%;

    background: rgba(0,0,0,.6);

    width: 20rem;

    height: calc(100vh - 5.5rem);

    

}



.header .navbar-main.active{

    right:0;

}



.header .navbar-main a{

    color:#fff;

    display: block;

    margin:1.5rem;

    padding:.5rem;

    font-size: 14px;

    text-transform: uppercase;

    text-align: center;

}

.header .navbar-main a:hover{

    /* color: var(--border);

    border-bottom: .1rem solid #fff;

    padding-bottom: .4rem */

}



.header .search-form{

    width: 90%;

    right: 2rem;

}





.header .search-form{

    position: absolute;

    top:102%; right: 0;

    background: rgba(0,0,0,.6);

    width: 25rem;

    height: 3rem;

    display: flex;

    align-items: center;

    transform: scaleY(0);

    transform-origin: top;

    

}



.header .search-form input{

    height: 100%;

    width: 100%;

    font-size: 14px;

    color:#fff;

    padding:1rem;

    text-transform: none;

    background-color: rgba(0,0,0,.1);

}



.header .search-form label{

    cursor: pointer;

    font-size: 20px;

    margin-right: 1.5rem;

    color:#fff;

}



.header .search-form label:hover{

    color:#fff;

}



/* nav bar end */



/* home page start */





/* header start */

/* 

#home{

    min-height: 70vh;

    background: url(../images/%208995.png) no-repeat;

    background-size: cover;

    background-position: center;

    align-items: center;

    display: flex;

} */



.section1 .carousel-caption h2{

    font-size: 35px;

  }

.section1 .menu-heads{

    display: block;

    margin: 0 auto;

    text-align: center;

}



.section1 .menu-heads h1{

    font-size: 50px;

    font-family: sayaBd;

    text-transform: uppercase;

    color: #fff;

    text-align: center;

}

.section1 .menu-heads .subtitle{

    text-transform: uppercase;

    font-family: sayaBd;

    color: #fff;

}

.section1 .menu-heads .subtitle i{

    padding: .5rem;

}

.section1 .menu-heads .subtitle a{

    color: #fff;

    font-family: sayaBd;

}



/* header end */



/* section 2 start */



.section2{

    margin: 30px 0;

}

.section2 .mainhead{

    text-align: center;

    font-family: saya;

    font-size: 36px;

    color: var(--black);

}

.section2 .subtitle{

    color: #676767;

    text-align: center;

    padding: 10px 0;

    border-bottom: .1rem solid #cbcbcb;

    font-size: 18px;

}

.section2 .designs{

    padding: 20px 0;

}



.section2 .designs .number{

    text-align: right;

}

.section2 .designs  h3{

    color: #fff;

    margin-top: 10px;

    font-family: saya;

    font-size: 30px;

}

.section2 .designs .number h3{

    color: #fff;

    margin-top: 10px;

    font-family: saya;

    font-size: 30px;

}

.section2 .designs p{

    color: #fff;

    margin-top: 10px;

    font-size: 24px;

}

.section2 .designs a{

    color: #fff;

    text-transform: uppercase;

    font-size: 16px;

}

.section2 .designs a i{

    padding: 3px 5px;

    border: 1px solid ;   

    border-radius: 50%;

    font-size: 9px;

    margin-left: 10px;

}

.section2 .designs .design1{

    background-image: url(../images/Group-9004.jpg);

    background-size: cover;

    padding: 3rem 1rem ;

    margin-bottom: 30px;

 }

.section2 .designs .design2{

    background-image: url(../images/Group-8997.jpg);

    background-size: cover;

    padding: 3rem 1rem ;

    margin-bottom: 30px;

 }

 .section2 .designs .design3{

    background-image: url(../images/Group-8998.jpg);

    background-size: cover;

    padding: 3rem 1rem ;

    margin-bottom: 30px;

 }

 .section2 .designs .design4{

    background-image: url(../images/Group-8999.jpg);

    background-size: cover;

    padding: 3rem 1rem ;

    margin-bottom: 30px;

 }

 .section2 .designs .design5{

    background-image: url(../images/Group-9000.jpg);

    background-size: cover;

    padding: 3rem 1rem ;

    margin-bottom: 30px;

 }

 .section2 .designs .design6{

    background: #252222;

    padding-top: 3.5rem;

    padding-bottom: 3.5rem;

    padding-left: 2rem;

    margin-bottom: 30px;

 }

 .section2 .designs .design6 h3{

    margin-top: 0;

    margin-bottom: 20px;

    font-size: 36px;

 }

 .section2 .designs .design6 .booking-btn{

    border: 2px solid;

    padding: .6rem 2rem;

    margin-top: 10px;

    background-color: #191818;

    transition: .8s ease;

    font-size: 15px;

    display: block;

 }

 .section2 .designs .design6 .booking-btn:hover{

    letter-spacing: .2rem;

 }



.section2 .comment{

    padding: 0 ;

    

}

.section2 .comment .comment-posi{

    box-shadow: 0px 5px 8px #e5e5e5 , -0px -5px 8px #e5e5e5;

    margin: 5px;

}

.section2 .comment .comment-posi .comment-bg{

    position: relative;

    padding: 30px 0;

    text-align: end;

    height: auto;

    margin-bottom: 1.8rem;

}

.section2 .comment .comment-posi .comment-bg .comment-bg-hover{

    position: absolute;

    top: 1px;

    transform: translate();

}



.section2 .comment .comment-posi .comment-bg-hover p{

    padding: 1.5rem .6rem;

    margin: 0;

    font-size: 14px;

    font-family: OpensansItalic;

    color: #9b9b9b;

    text-align: left;

}

.section2 .comment .comment-posi .comment-bg-hover h4{

    padding: 0 1rem 1rem;

    text-align: left;

}

/* section 2 end */



/* section 3 start */

.section3{

    margin-top: 30px;

}

.section3  .designs{

    padding:0 1rem;

    padding-bottom: 1rem;

}

.section3  .designs .work1{

    background-color: #f5f5f5;

}

.section3  .designs .work1 div{

    padding: 1rem 10px 2.8rem;

    text-align: center;

}

.section3  .designs .work1 h3{

    padding: 0.5rem 4rem;

    text-transform: capitalize;

    font-family: saya;

    font-size: 30px;

    color: var(--black);

}

.section3  .designs .work1 p{

    padding: 0 1rem .8rem;

    font-size: 13px;

    color: #8a8a8a;

}

.section3  .designs .work1 div a{

    border: 2px solid #5a5a66;

    color: #464545;

    padding: .6rem 2rem;

    text-transform: capitalize;

    font-size: 14px;

    font-family: OpensansBold;

    transition: 1s ease;

}

.section3  .designs .work1 div a:hover{

    color: #fff;

    background-color: #191818;

    letter-spacing: .2rem;

}

.section3  .designs .work2 div{

    padding: 2rem 0 3rem;

    text-align: center;

}

.section3  .designs .work-img{

    margin-top: 3rem;

}

.section3  .designs .work2 h3{

    padding: 0.5rem 3rem;

    text-transform: capitalize;

    font-family: saya;

    font-size: 30px;

}



.section3  .designs  .work2 p{

    padding: 0 20px;

    font-size: 14px;

    padding-bottom: .8rem;

    color: #8a8a8a;

}

.section3  .designs .work2 a{

    border: 2px solid #5a5a66;

    color: #464545;

    padding: .6rem 2rem;

    text-transform: capitalize;

    font-size: 14px;

    transition: 1s ease;

    font-family: OpensansBold;

}

.section3  .designs .work2 a:hover{

    color: #fff;

    background-color: #191818;

    letter-spacing: .2rem;

}

.section3  .designs .work3 .table-design{

    padding: 0;

    text-align: center;

}

.section3  .designs .work3 h3{

    padding: 5px 0rem;

    text-transform: capitalize;

    font-family: saya;

    font-size: 30px;

    color: #2f2f2f;

}

.section3  .designs .work3 .table-posi{

    padding: 0.5rem 0 1.7rem;

}

.section3  .designs .work3 .table-posi  p{

    border: 2px solid var(--border);

    padding: .5rem 0;

    font-size: 14px;

    text-transform: capitalize;

    font-family: OpensansBold;

    color: #464545;

    margin-bottom: 1.2rem;

}

.section3  .designs .work3 .table-posi a{

    background: #5a5a66;

    padding: .5rem 1rem;

    color: #fff;

    transition: 1s ease;

    margin-top: 10px;

    font-size: 14px;

    font-family: OpensansBold;

}

.section3  .designs .work3 .table-posi a:hover{

    letter-spacing: .2rem;

}



/* section 3 end */



/* section 4 start */



.section4{

    background: url(../images/%2012.png) no-repeat;

    background-size: cover;

    background-position: center;

    align-items: center;

    padding-bottom: 5rem;

    

}





.section4 .box-container .box-clients{

    border: 1px solid #a9a7a7;

    text-align: center;

    padding: .5rem;

    align-items: center;

    background-color: #fff;

}

.section4 .mainhead{

    text-align: center;

    padding-top: 3rem;

    font-family: saya;

    font-size: 36px;

    color: var(--black);

}

.section4 .subtitle{

    text-align: center;

    text-transform: capitalize;

    padding: 20px 0;

    font-size: 18px;

    color: #676767;

}



/* section 4 end */



/* section 5 start */



.section5 .mainhead{

    text-align: center;

    padding-top: 3rem;

    text-transform: capitalize;

    font-family: saya;

    color: var(--black);

    font-size: 40px;

}

.section5 .subtitle{

    text-align: center;

    text-transform: capitalize;

    padding: 20px 0;

    color: #676767;

    font-size: 20px;

}



/* section 5 end */



/* section 6 start */



.section6{

    /* background: #0e64aa; */

    padding: 3rem 0 3.8rem;

}

.section6 .designs{

    padding: 0 20px;

    text-align: center;

}

.section6 .designs h3{

    color: #fff;

    margin-bottom: 1.5rem;

    font-family: saya;

    font-size: 31px;

}

.section6 .designs a{

    font-size: 15px;

    text-transform: uppercase;

    padding: .5rem 2rem;

    color: #fff;

    transition: 1s ease;

    /* background: #143b5c; */

    border: 2px solid ;

    margin: 1rem 0;

}

.section6 .designs a:hover{

    letter-spacing: .2rem;

    color: #fff;

}



/* section 6 end */



/* footer start */



footer{

    background: #313233;

}

footer .designs{

    padding-top: 20px;

}

footer .designs h4{

    color: #fff;

    text-transform: uppercase;

    padding: 30px 0 20px;

    font-family: sayaFy;

    font-size: 18px;

}

footer .designs p{

    color: #cccccc;

    font-size: 14px;



}

footer .designs .head-h4-2{

   padding-left: 0 !important;

}

footer .designs .col-md-4 h4{

    padding-left: 2rem;

}

footer .designs .footer-posi2{

    padding:0;

}

footer .designs .footer-posi2 a{

    border-bottom: 1px solid;

    color: #cccccc;

}

footer .designs .footer-posi3{

    padding-right: 0rem;

}

footer .designs .footer-posi3 img{

    margin-right: 10px;

    margin-bottom: 15px;

}

footer .designs .search-form{

    border-bottom: 1px solid #898989;

    margin-right: 3rem;

}

footer .designs .search-form input{

    background: transparent;

    color: #898989;

    width: 80%;

}

footer .designs .search-form button{

    background: transparent;

    color: #898989;

}

footer .designs .footer-posi4{

    padding-top: 10px;

    border-top: 1px solid #898989;

    margin-top: 1.5rem;

}

footer .designs .footer-posi4 p{

    text-align: center;

}



/* footer end */

/* home page end */



.header .menu-heads{

    text-align: center;

    color: #fff;

    margin-top: 4rem;

}

.header .menu-heads h1{

    font-size: 45px;

    text-transform: uppercase;

    font-family: sayaBd;

}

.header .menu-heads .subtitle{

    font: 14px;

    text-transform: uppercase;

    font-family: sayaBd;

}

.header .menu-heads  a{

    color: #fff;

    font-family: sayaBd;

    text-transform: uppercase;

    font-family: sayaBd;

}

.header .menu-heads .subtitle i{

    padding:0  .5rem;

}





/* about page start */



#about{

    min-height: 70vh;

    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)) , url(../images/about-main.jpg) , no-repeat;

    background-size: cover;

    background-position: center;

    align-items: center;

    display: flex;

}

/* ab1 strat */





.ab-1 .ab-head{

    padding: 20px 0;

}

.ab-1 .ab-head span{

    color: #1181b0;

    font-size: 18px;

    font-family: OpensansMedium;

}

.ab-1 .ab-head h3{

    font-family: sayaBd;

    font-size: 32px;

    color: var(--black);

    text-transform: uppercase;

}

.ab-1 .ab-head p{

    color: #8a8a8a;

    font-size: 15px;

}



/* ab1 end */





/* ab2 strat */



.ab-2 .work1{

    background: #f8f8f8;

    text-align: center;

    padding: 1rem;

}

.ab-2 .work1 span{

    font-family: OpensansMedium;

    font-size: 18px;

    color: #1181b0;

}

.ab-2 .work1 h3{

    font-family: sayaBd;

    font-size: 38px;

    margin-top: 10px;

    margin-bottom: 20px;

    text-transform: uppercase;

}

.ab-2 .work1 p{

    font-size: 15px;

    color: #8a8a8a;

    margin-bottom: 2rem;

}

.ab-2 .work1 a{

    font-size: 14px;

    padding: .6rem 2rem;

    border: 2px solid #1181b0;

    text-transform: uppercase;

    color: #222121;

    transition: 1s ease;

    font-family: OpensansBold;

}

.ab-2 .work1 a:hover{

    letter-spacing: .2rem;

}

.ab-2 .work2{

    margin-bottom: 3rem;

    margin-top: 1rem;

}

.ab-2 .work2 h3{

    font-family: sayaBd;

    font-size: 30px;

    color: var(--black);

    padding-left: .5rem;

    text-transform: uppercase;

    margin-top: 3rem;

}

.ab-2 .work2 p{

    font-size: 15px;

    color: #8a8a8a;

    padding: 0 1rem 0 .5rem;

    margin: 0;

}

.ab-2 .work2 .position1{

    padding: 0;

    text-align: center;

}

.ab-2 .work2 .position1 img{

    margin-bottom:0;

}

.ab-2 .work2 .position2{

    padding: 0;

    text-align: center;

}

.ab-2 .work2 .position2 img{

    margin-top: 2rem;

}



/* ab2 end */





/* ab3 start */



.ab3{

    background-color: #ededed;

    margin: 30px 0;

}

.ab3 .ab3-position{

    padding: 4rem 0px;

}

.ab3 .ab3-position .work{

    text-align: center;

    margin-top: 2rem;

}

.ab3 .ab3-position .work span{

    font-family: OpensansMedium;

    font-size: 18px;

    color: #1181b0;

}

.ab3 .ab3-position .work h3{

    font-family: sayaBd;

    color: var(--black);

    font-size: 30px;

    margin-top: .5rem;

    text-transform: uppercase;

}

.ab3 .ab3-position .work p{

    color: #8a8a8a;

    font-size: 15px;

    margin-top: 1rem;

    margin-bottom:3rem;

}

.ab3 .ab3-position .work a{

    font-size: 14px;

    padding: .6rem 2rem;

    border: 2px solid #1181b0;

    text-transform: uppercase;

    color: #222121;

    transition: 1s ease;

    font-family: OpensansBold;

}

.ab3 .ab3-position .work a:hover{

    letter-spacing: .2rem;

}



/* ab3 end */



/* ab4-start */



.ab4 .ab4-position{

    padding: 0px;

}

.ab4 .ab4-position .ceo{

    -webkit-filter: grayscale(100%);

	filter: grayscale(100%);

	-webkit-transition: .3s ease-in-out;

	transition: .3s ease-in-out;

}

.ab4 .ab4-position .ceo:hover{

    -webkit-filter: grayscale(0);

	filter: grayscale(0);

}

.ab4 .ab4-position .content{

    background: #f8f8f8 ;

    padding-left: 2rem;

    padding-right: 2rem;

    padding-bottom: 1rem;

}

.ab4 .ab4-position img{

    margin-top: 6rem;

}

.ab4 .ab4-position .content h3{

    font-size: 32px;

    color: var(--black);

    font-family: sayaBd;

    text-transform: uppercase;

    margin-top: 3rem;

}

.ab4 .ab4-position .content p{

    font-size: 15px;

    color: #595858;

    margin-top: 1rem;

}

.ab4 .ab4-position .content img{

    margin: 1rem 0;

}

.ab4 .ab4-position .content h5{

    color: #38393a;

    font-size: 20px;

}

.ab4 .ab4-position .content span{

    font-size: 14px;

    color: #1181b0;

    margin-bottom: 1rem;

}



/* ab4-start */



/* ab5 start */

.ab5{

    margin-bottom: 3rem;

}

.ab5 h3{

    text-align: center;

    font-family: sayaBd;

    font-size: 32px;

    color: var(--black);

    text-transform: uppercase;

    margin-top: 3rem;

}

.ab5 p{

    font-size: 16px;

    color: #676767;

    text-align: center;

}

.ab5 .handerline{

    background-color: #707070;

    height: 2px;

    display: block;

    margin: 0 auto;

    width: 85%;

    margin-bottom: 3rem;

    margin-top: 3rem;

}

.ab5 .team{

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));

    gap: 1.5rem;

    text-align: center;

    margin-bottom: 4rem;

}

.ab5 .team .members{

    position: relative;

}

.ab5 .team .members .member-name{

    position: absolute;

    top: 68%;

    right: 0px;

    text-align: center;

    background-color: rgba(248, 248, 248,.8);

    border-radius: 5px;

    width: 100%;

    padding: 1rem 0rem;

}

.ab5 .team .members .member-name h4{

    font-size: 15px;

    color: #333333;

    margin: 0;

    

}

.ab5 .team .members .member-name span{

    font-size: 11px;

    color: #0d0d0d;

}



/* ab5 end */



/* ab6 start */



.ab6{

    background-color: #f8f8f8;

    padding: 4rem 0;

    margin-top: 3rem ;

}

.ab6 .head h3{

    color: var(--black);

    text-align: center;

    font-family: sayaBd;

    font-size: 32px;

    text-transform: uppercase;

}

.ab6 .head p{

    color: #828282;

     font-size: 14px;

    text-align: center;

    padding: 0 3rem;

    margin-bottom: 3rem;

}

.ab6 .box{

    padding: 0px;

}

.ab6 .box .counting{

    margin-top: 3rem;

    margin-left: 2rem;

}

.ab6 .box .counting div{

    padding: 1rem 0;

    border-left: 4px solid #1181b0;

}

.ab6 .box .counting div h4{

    font-size: 36px;

    color: #313131;

    padding-left: 1.5rem;

    font-family: OpensansBold;

}

.ab6 .box .counting div p{

    font-size: 16px;

    color: #828282;

    padding-left: 1.5rem;

    margin-bottom: 0;

}



/* ab6 end */



/* ab7 start */



.ab7 .box{

    padding: 0 0 3rem;

}

.ab7 .box .ab-work-img{

    margin-top: 2rem;

}

.ab7 .work h3{

    text-transform: uppercase;

    font-size: 30px;

    font-family: sayaBd;

    color: var(--black);

    margin-top: 1rem;

}

.ab7 .work p{

    color: #8a8a8a;

    font-size: 14px;

    padding-right: 0;

}

.ab7 .work1{

    text-align: center;

    padding: 0 1rem;

}

.ab7 .work3{

    padding: 0 1rem !important;

    text-align: center;

}







/* ab7 end */











/* about page end */











/* join start */







#join{

    min-height: 70vh;

    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)) , url(../images/join-main.png) , no-repeat;

    background-size: cover;

    background-position: center;

    align-items: center;

    display: flex;

}

.section1 .menu-heads h6{

    font-size: 24px;

    font-family: sayaBd;

    color: #fff;

    padding: 0 .5rem;

}



/* js1 start */

.js1{

    padding: 1rem 1rem 0rem;

}

.js1 .js1-work-img{

    margin: 1rem 0 3rem;

}

.js1 .work{

    padding: 2rem 0 0;

    text-align: center;

    align-self: center;

}

.js1 .work a{

    color: #fff;

    background-color: #2c2727;

    font-size: 16px;

    transition: 1s ease;

    padding: .5rem 1rem;

}

.js1 .work a:hover{

    letter-spacing: .2rem;

}

.js1 .work h3{

    font-size: 36px;

    font-family: sayaBd;

    color: var(--black);

    margin-top: 1rem;

    text-transform: uppercase;

}

.js1 .work p{

    color: #8a8a8a;

    font-size: 15px;

    margin:0;

}

.js1 .work1{

    padding: 2rem  0rem ;

    align-self: center;

    text-align: center;

}

.js1 .work1 .abtn1{

    background-color: #2c2727;

    font-family: OpensansMedium;

    font-size: 16px;

    color: #fff;

    padding: .6rem 1.6rem;

    transition: 1s ease;

}

.js1 .work1 .abtn1:hover{

    letter-spacing: .2rem;

}

.js1 .work1 h3{

    font-family: sayaBd;

    font-size: 36px;

    text-transform: uppercase;

    padding-right: 0;

    margin: 2rem 0 1rem;

}

.js1 .work1 span{

    font-family: archivo;

    font-size: 20px;

    color: #1181b0;

}

.js1 .work1 p{

    font-size: 14px;

    font-family: Assistant;

    color: #776e6e;

    padding: 1rem .5rem;

}

.js1 .work1 p a{

    font-size: 14px;

    font-family: Assistant;

    color: #776e6e;

}

.js1 .work1 .abtn2{

    font-family: OpensansBold;

    font-size: 14px;

    color: #222121;

    padding: .6rem 1.6rem;

    transition: 1s ease;

    border: 2px solid #1181b0;

}

.js1 .work1 .abtn2:hover{

    letter-spacing: .2rem;

}

.js1 iframe{

    width: 100%;

    height: 450px;

}

.js2 {

    padding: 0rem 2rem 3rem;

}

.js2 .head h3{

    font-size: 30px;

    font-family: saya;

    color: var(--black);

    text-align: center;

    margin: 1rem;

}

.js2 .head p{

    text-align: center;

    font-size: 18px;

    color: #676767;

    margin-bottom: 2rem;

}



.js2 form  label{

    margin-top: 1rem;

    margin-bottom: .5rem;

    font-size: 15px;

    color: #333333;

    font-family: roboto;

}

.js2 form  input,select{

    border: 1px solid #c3c3c3;

    border-radius: 5px;

    width: 100%;

    padding: .6rem;

}

.js2 form #myfile{

    border: 1px solid #c3c3c3;

    border-radius: 5px;

    width: 100%;

    padding: 0;

    outline: none;

}

::-webkit-file-upload-button{

    color: #fff;

    background: #2c2727;

    border: none;

    border-radius: 5px;

    padding: .6rem;

}

.js2 form button{

    margin-top: 3rem;

    background-color: #2c2727;

    color: #ffff;

    font-family: Robotomd;

    font-size: 17px;

    width: 100%;

    padding: .6rem;

    border-radius: 5px;

}







/* js1 end */





/* join end */







/* project start */





#project{

    min-height: 70vh;

    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)) , url(../images/project-amin.jpg) , no-repeat;

    background-size: cover;

    background-position: center;

    align-items: center;

    display: flex;

}



/* pr1 strat */





.pr1 .head{

    border-bottom: 2px solid;

    text-align: center;

    padding: 2.5rem 0 2rem;

    margin: 0 .5rem 2rem;

}



.pr1 .box{

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));

    gap: 1rem;

    padding: 0;

    margin-bottom: 2rem;

}

.pr1 .box .work{

    box-shadow: 0px 5px 8px #e5e5e5, 0px -5px 8px #e5e5e5;

    margin: 5px;

}

.pr1 .box .work h5{

    font-family: sayaBd;

    font-size: 20px;

    color: var(--black);

    padding: .5rem 1.5rem;

    margin-top: 1rem;

}

.pr1 .box .work p{

    margin: 0;

    font-size: 14px;

    font-family: OpensansItalic;

    color: #9b9b9b;

    text-align: left;

    padding: .5rem 1.5rem;

    margin-bottom: 2rem;

}

.pr1 .box .work span{

    background-color: #0e64aa;

    display: block;

    height: 2px;

    width: 7rem;

    margin: 0 auto;

}













/* .pr1 .head .tablink {

    background-color: #222;

    color: #999;

    border: none;

    outline: none;

    cursor: pointer;

    padding: 14px 16px;

    font-size: 17px;

  }

  

  .pr1 .head .tablink:hover {

    color: #5a5a66;

  } */

  

  /* Style the tab content (and add height:100% for full page content) */

  /* .pr1.tabcontent {

    color: ;

    display: none;

    height: 100%;

  } */







.pr1  .box .pj-animation {

    position: relative;

    

  }

  

  

  .pr1  .box .pj-animation .overlay {

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    height: 100%;

    width: 100%;

    opacity: 0;

    transition: .5s ease;

    background-color: rgba(0,0,0,.8);

  }

  

  .pr1  .box .pj-animation:hover .overlay {

    opacity: 1;

  }

  

  .pr1  .box .pj-animation .text {

    position: absolute;

    top: 50%;

    left: 50%;

    -webkit-transform: translate(-50%, -50%);

    -ms-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%);

    text-align: center;

  }

  .pr1  .box .pj-animation .text h5{

    color: white;

    font-size: 20px;

  }



/* pr1 end */





.pr2 .head {

    padding: 3rem 0 ;

    text-align: center;

}

.pr2 .head h3{

    color: #fff;

    margin-bottom: 1.5rem;

    font-family: saya;

    font-size: 28px;

}

.pr2 .head a{

    font-size: 15px;

    text-transform: uppercase;

    padding: 0.5rem 2rem;

    color: #fff;

    transition: 1s ease;

    /* background: #143b5c; */

    border: 2px solid;

    margin: 1rem 0;

}

.pr2 .head a:hover{

    letter-spacing: .2rem;

}





/* project end */



/* contact start */

.ct1{

    margin: 3rem 0;

}

.ct1 .box{

    background-color: rgba(0, 0, 0, 0.8);

    padding: 3rem;

    border-radius: .5rem;

}

.ct1 .box h3{

    text-align: center;

    font-family: saya;

    font-size: 40px;

    color: #fff;

    border-bottom: 1px solid rgba(255, 255, 255, 0.5);

    padding-bottom: 1rem;

    margin-bottom: 2rem;

} 

.ct1 .box .design{

    text-align: center;

    padding: 1rem 0;

    border: 1px solid rgba(255, 255, 255, 0.5);

    border-radius: .5rem;

    min-height: 10rem;

    margin: .7rem 0;

}

.ct1 .box .design p{

    color: #fff;

    font-size: 14px;

    margin: 1rem 0;

    padding: 0 .5rem;

}

.ct1 .box .design a{

    color: #fff;

    font-size: 14px;

}

.ct1 .box .design a:hover{

    color: rgba(255, 255, 255, 0.3);



}

.ct1 .box iframe{

    border-radius: .5rem;

    width: 100%;

    height: 350px;

    margin-top: 2.5rem;

}

/* contact end */





}







































@media (max-width:360px){

    /* nav bar start */

.hbg-img{

    min-height: 100vh;

    background: url(../images/%208995.png);

    background-size: cover;

    background-position: center;

    align-items: center;

}



.header{

    background: rgba(0,0,0,.6);

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:0.3rem 4%;

    border-bottom: #fff;

    position: fixed;

    top:0%; left: 0; right: 0;

    z-index: 1000;

}

.header .navbar2 a{

    /* display: none; */

}



/* .header .navbar2 a:hover{

    color: var(--border);

    border-bottom: .1rem solid #fff;

    padding-bottom: .5rem;

} */



.header .navbar2 i{

    color: #fff;

    font-size: 15px;

    padding: 0.1rem .3rem;

}

.header .navbar2 .icon1{

    border-left: none;

    padding-left: 0rem;

}



#menu-btn{

    display: inline-block;

}



.header .navbar-main{

    position: absolute;

    top:102%; right: -100%;

    background: rgba(0,0,0,.6);

    width: 20rem;

    height: calc(100vh - 5.5rem);

    

}



.header .navbar-main.active{

    right:0;

}



.header .navbar-main a{

    color:#fff;

    display: block;

    margin:1.5rem;

    padding:.5rem;

    font-size: 14px;

    text-transform: uppercase;

    text-align: center;

}

.header .navbar-main a:hover{

    /* color: var(--border);

    border-bottom: .1rem solid #fff;

    padding-bottom: .4rem */

}



.header .search-form{

    width: 90%;

    right: 2rem;

}





.header .search-form{

    position: absolute;

    top:102%; right: 0;

    background: rgba(0,0,0,.6);

    width: 25rem;

    height: 3rem;

    display: flex;

    align-items: center;

    transform: scaleY(0);

    transform-origin: top;

    

}



.header .search-form input{

    height: 100%;

    width: 100%;

    font-size: 14px;

    color:#fff;

    padding:1rem;

    text-transform: none;

    background-color: rgba(0,0,0,.1);

}



.header .search-form label{

    cursor: pointer;

    font-size: 20px;

    margin-right: 1.5rem;

    color:#fff;

}



.header .search-form label:hover{

    color:#fff;

}



/* nav bar end */



/* home page start */





/* header start */



/* #home{

    min-height: 70vh;

    background: url(../images/%208995.png) no-repeat;

    background-size: cover;

    background-position: center;

    align-items: center;

    display: flex;

} */





.section1 .menu-heads{

    display: block;

    margin: 0 auto;

    text-align: center;

}



.section1 .menu-heads h1{

    font-size: 50px;

    font-family: sayaBd;

    text-transform: uppercase;

    color: #fff;

    text-align: center;

}

.section1 .menu-heads .subtitle{

    text-transform: uppercase;

    font-family: sayaBd;

    color: #fff;

}

.section1 .menu-heads .subtitle i{

    padding: .5rem;

}

.section1 .menu-heads .subtitle a{

    color: #fff;

    font-family: sayaBd;

}



/* header end */



/* section 2 start */



.section2{

    margin: 30px 0;

}

.section2 .mainhead{

    text-align: center;

    font-family: saya;

    font-size: 36px;

    color: var(--black);

}

.section2 .subtitle{

    color: #676767;

    text-align: center;

    padding: 10px 0;

    border-bottom: .1rem solid #cbcbcb;

    font-size: 18px;

}

.section2 .designs{

    padding: 20px 0;

}



.section2 .designs .number{

    text-align: right;

}

.section2 .designs  h3{

    color: #fff;

    margin-top: 10px;

    font-family: saya;

    font-size: 30px;

}

.section2 .designs .number h3{

    color: #fff;

    margin-top: 10px;

    font-family: saya;

    font-size: 30px;

}

.section2 .designs p{

    color: #fff;

    margin-top: 10px;

    font-size: 24px;

}

.section2 .designs a{

    color: #fff;

    text-transform: uppercase;

    font-size: 16px;

}

.section2 .designs a i{

    padding: 3px 5px;

    border: 1px solid ;   

    border-radius: 50%;

    font-size: 9px;

    margin-left: 10px;

}

.section2 .designs .design1{

    background-image: url(../images/Group-9004.jpg);

    background-size: cover;

    padding: 3rem 1rem ;

    margin-bottom: 30px;

 }

.section2 .designs .design2{

    background-image: url(../images/Group-8998.jpg);

    background-size: cover;

    padding: 3rem 1rem ;

    margin-bottom: 30px;

 }

 .section2 .designs .design3{

    background-image: url(../images/Group-8999.jpg);

    background-size: cover;

    padding: 3rem 1rem ;

    margin-bottom: 30px;

 }

 .section2 .designs .design4{

    background-image: url(../images/Group-9000.jpg);

    background-size: cover;

    padding: 3rem 1rem ;

    margin-bottom: 30px;

 }

 .section2 .designs .design5{

    background-image: url(../images/Group-9001.jpg);

    background-size: cover;

    padding: 3rem 1rem ;

    margin-bottom: 30px;

 }

 .section2 .designs .design6{

    background: #252222;

    padding-top: 3.5rem;

    padding-bottom: 3.5rem;

    padding-left: 2rem;

    margin-bottom: 30px;

 }

 .section2 .designs .design6 h3{

    margin-top: 0;

    margin-bottom: 20px;

    font-size: 36px;

 }

 .section2 .designs .design6 .booking-btn{

    border: 2px solid;

    padding: .6rem 2rem;

    margin-top: 10px;

    background-color: #191818;

    transition: .8s ease;

    font-size: 15px;

    display: block;

 }

 .section2 .designs .design6 .booking-btn:hover{

    letter-spacing: .2rem;

 }



.section2 .comment{

    padding: 0 ;

    

}

.section2 .comment .comment-posi{

    box-shadow: 0px 5px 8px #e5e5e5 , -0px -5px 8px #e5e5e5;

    margin: 5px;

}

.section2 .comment .comment-posi .comment-bg{

    position: relative;

    padding: 30px 0;

    text-align: end;

    height: auto;

    margin-bottom: 1.8rem;

}

.section2 .comment .comment-posi .comment-bg .comment-bg-hover{

    position: absolute;

    top: 1px;

    transform: translate();

}



.section2 .comment .comment-posi .comment-bg-hover p{

    padding: 1.5rem .6rem;

    margin: 0;

    font-size: 14px;

    font-family: OpensansItalic;

    color: #9b9b9b;

    text-align: left;

}

.section2 .comment .comment-posi .comment-bg-hover h4{

    padding: 0 1rem 1rem;

    text-align: left;

}

/* section 2 end */



/* section 3 start */

.section3{

    margin-top: 30px;

}

.section3  .designs{

    padding:0 1rem;

    padding-bottom: 1rem;

}

.section3  .designs .work1{

    background-color: #f5f5f5;

}

.section3  .designs .work1 div{

    padding: 1rem 10px 2.8rem;

    text-align: center;

}

.section3  .designs .work1 h3{

    padding: 0.5rem 4rem;

    text-transform: capitalize;

    font-family: saya;

    font-size: 30px;

    color: var(--black);

}

.section3  .designs .work1 p{

    padding: 0 1rem .8rem;

    font-size: 13px;

    color: #8a8a8a;

}

.section3  .designs .work1 div a{

    border: 2px solid #5a5a66;

    color: #464545;

    padding: .6rem 2rem;

    text-transform: capitalize;

    font-size: 14px;

    font-family: OpensansBold;

    transition: 1s ease;

}

.section3  .designs .work1 div a:hover{

    color: #fff;

    background-color: #191818;

    letter-spacing: .2rem;

}

.section3  .designs .work2 div{

    padding: 2rem 0 3rem;

    text-align: center;

}

.section3  .designs .work-img{

    margin-top: 3rem;

}

.section3  .designs .work2 h3{

    padding: 0.5rem 3rem;

    text-transform: capitalize;

    font-family: saya;

    font-size: 30px;

}



.section3  .designs  .work2 p{

    padding: 0 20px;

    font-size: 14px;

    padding-bottom: .8rem;

    color: #8a8a8a;

}

.section3  .designs .work2 a{

    border: 2px solid #5a5a66;

    color: #464545;

    padding: .6rem 2rem;

    text-transform: capitalize;

    font-size: 14px;

    transition: 1s ease;

    font-family: OpensansBold;

}

.section3  .designs .work2 a:hover{

    color: #fff;

    background-color: #191818;

    letter-spacing: .2rem;

}

.section3  .designs .work3 .table-design{

    padding: 0;

    text-align: center;

}

.section3  .designs .work3 h3{

    padding: 5px 0rem;

    text-transform: capitalize;

    font-family: saya;

    font-size: 30px;

    color: #2f2f2f;

}

.section3 .designs .work3 .table-posi{

    padding: 0.5rem 1.7rem 3rem;

}

.respo-demo .col-6{

    width: 100% !important;

    padding: 2rem;

}

.section3  .designs .work3 .table-posi  p{

    border: 2px solid var(--border);

    padding: .5rem 0;

    font-size: 14px;

    text-transform: capitalize;

    font-family: OpensansBold;

    color: #464545;

    margin-bottom: 1.2rem;

}

.section3  .designs .work3 .table-posi a{

    background: #5a5a66;

    padding: .5rem 1rem;

    color: #fff;

    transition: 1s ease;

    margin-top: 10px;

    font-size: 14px;

    font-family: OpensansBold;

}

.section3  .designs .work3 .table-posi a:hover{

    letter-spacing: .2rem;

}



/* section 3 end */



/* section 4 start */



.section4{

    background: url(../images/%2012.png) no-repeat;

    background-size: cover;

    background-position: center;

    align-items: center;

    padding-bottom: 5rem;

    

}





.section4 .box-container .box-clients{

    border: 1px solid #a9a7a7;

    text-align: center;

    padding: .5rem;

    align-items: center;

    background-color: #fff;

}

.section4 .mainhead{

    text-align: center;

    padding-top: 3rem;

    font-family: saya;

    font-size: 36px;

    color: var(--black);

}

.section4 .subtitle{

    text-align: center;

    text-transform: capitalize;

    padding: 20px 0;

    font-size: 18px;

    color: #676767;

}



/* section 4 end */



/* section 5 start */



.section5 .mainhead{

    text-align: center;

    padding-top: 3rem;

    text-transform: capitalize;

    font-family: saya;

    color: var(--black);

    font-size: 40px;

}

.section5 .subtitle{

    text-align: center;

    text-transform: capitalize;

    padding: 20px 0;

    color: #676767;

    font-size: 20px;

}



/* section 5 end */



/* section 6 start */



.section6{

    /* background: #0e64aa; */

    padding: 3rem 0 3.8rem;

}

.section6 .designs{

    padding: 0 20px;

    text-align: center;

}

.section6 .designs h3{

    color: #fff;

    margin-bottom: 1.5rem;

    font-family: saya;

    font-size: 31px;

}

.section6 .designs a{

    font-size: 15px;

    text-transform: uppercase;

    padding: .5rem 2rem;

    color: #fff;

    transition: 1s ease;

    /* background: #143b5c; */

    border: 2px solid ;

    margin: 1rem 0;

}

.section6 .designs a:hover{

    letter-spacing: .2rem;

    color: #fff;

}



/* section 6 end */



/* footer start */



footer{

    background: #313233;

}

footer .designs{

    padding-top: 20px;

}

footer .designs h4{

    color: #fff;

    text-transform: uppercase;

    padding: 30px 0 20px;

    font-family: sayaFy;

    font-size: 18px;

}

footer .designs p{

    color: #cccccc;

    font-size: 14px;



}

footer .designs .head-h4-2{

   padding-left: 0 !important;

}

footer .designs .box h4{

    padding-left: 0rem;

}

footer .designs .footer-posi2{

    padding:0;

}

footer .designs .footer-posi2 a{

    border-bottom: 1px solid;

    color: #cccccc;

}

footer .designs .footer-posi3{

    padding-right: 0rem;

}

footer .designs .footer-posi3 img{

    margin-right: 10px;

    margin-bottom: 15px;

}

footer .designs .search-form{

    border-bottom: 1px solid #898989;

    margin-right: 3rem;

}

footer .designs .search-form input{

    background: transparent;

    color: #898989;

    width: 80%;

}

footer .designs .search-form button{

    background: transparent;

    color: #898989;

}

footer .designs .footer-posi4{

    padding-top: 10px;

    border-top: 1px solid #898989;

    margin-top: 1.5rem;

}

footer .designs .footer-posi4 p{

    text-align: center;

}



/* footer end */

/* home page end */



.header .menu-heads{

    text-align: center;

    color: #fff;

    margin-top: 4rem;

}

.header .menu-heads h1{

    font-size: 45px;

    text-transform: uppercase;

    font-family: sayaBd;

}

.header .menu-heads .subtitle{

    font: 14px;

    text-transform: uppercase;

    font-family: sayaBd;

}

.header .menu-heads  a{

    color: #fff;

    font-family: sayaBd;

    text-transform: uppercase;

    font-family: sayaBd;

}

.header .menu-heads .subtitle i{

    padding:0  .5rem;

}





/* about page start */



#about{

    min-height: 70vh;

    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)) , url(../images/about-main.jpg) , no-repeat;

    background-size: cover;

    background-position: center;

    align-items: center;

    display: flex;

}

/* ab1 strat */





.ab-1 .ab-head{

    padding: 20px 0;

}

.ab-1 .ab-head span{

    color: #1181b0;

    font-size: 18px;

    font-family: OpensansMedium;

}

.ab-1 .ab-head h3{

    font-family: sayaBd;

    font-size: 32px;

    color: var(--black);

    text-transform: uppercase;

}

.ab-1 .ab-head p{

    color: #8a8a8a;

    font-size: 15px;

}



/* ab1 end */





/* ab2 strat */



.ab-2 .work1{

    background: #f8f8f8;

    text-align: center;

    padding: 1rem;

}

.ab-2 .work1 span{

    font-family: OpensansMedium;

    font-size: 18px;

    color: #1181b0;

}

.ab-2 .work1 h3{

    font-family: sayaBd;

    font-size: 38px;

    margin-top: 10px;

    margin-bottom: 20px;

    text-transform: uppercase;

}

.ab-2 .work1 p{

    font-size: 15px;

    color: #8a8a8a;

    margin-bottom: 2rem;

}

.ab-2 .work1 a{

    font-size: 14px;

    padding: .6rem 2rem;

    border: 2px solid #1181b0;

    text-transform: uppercase;

    color: #222121;

    transition: 1s ease;

    font-family: OpensansBold;

}

.ab-2 .work1 a:hover{

    letter-spacing: .2rem;

}

.ab-2 .work2{

    margin-bottom: 3rem;

    margin-top: 1rem;

}

.ab-2 .work2 h3{

    font-family: sayaBd;

    font-size: 30px;

    color: var(--black);

    padding-left: .5rem;

    text-transform: uppercase;

    margin-top: 3rem;

}

.ab-2 .work2 p{

    font-size: 15px;

    color: #8a8a8a;

    padding: 0 1rem 0 .5rem;

    margin: 0;

}

.ab-2 .work2 .position1{

    padding: 0;

    text-align: center;

}

.ab-2 .work2 .position1 img{

    margin-bottom:0;

}

.ab-2 .work2 .position2{

    padding: 0;

    text-align: center;

}

.ab-2 .work2 .position2 img{

    margin-top: 2rem;

}



/* ab2 end */





/* ab3 start */



.ab3{

    background-color: #ededed;

    margin: 30px 0;

}

.ab3 .ab3-position{

    padding: 4rem 0px;

}

.ab3 .ab3-position .work{

    text-align: center;

    margin-top: 2rem;

}

.ab3 .ab3-position .work span{

    font-family: OpensansMedium;

    font-size: 18px;

    color: #1181b0;

}

.ab3 .ab3-position .work h3{

    font-family: sayaBd;

    color: var(--black);

    font-size: 30px;

    margin-top: .5rem;

    text-transform: uppercase;

}

.ab3 .ab3-position .work p{

    color: #8a8a8a;

    font-size: 15px;

    margin-top: 1rem;

    margin-bottom:3rem;

}

.ab3 .ab3-position .work a{

    font-size: 14px;

    padding: .6rem 2rem;

    border: 2px solid #1181b0;

    text-transform: uppercase;

    color: #222121;

    transition: 1s ease;

    font-family: OpensansBold;

}

.ab3 .ab3-position .work a:hover{

    letter-spacing: .2rem;

}



/* ab3 end */



/* ab4-start */



.ab4 .ab4-position{

    padding: 0px;

}

.ab4 .ab4-position .ceo{

    -webkit-filter: grayscale(100%);

	filter: grayscale(100%);

	-webkit-transition: .3s ease-in-out;

	transition: .3s ease-in-out;

}

.ab4 .ab4-position .ceo:hover{

    -webkit-filter: grayscale(0);

	filter: grayscale(0);

}

.ab4 .ab4-position .content{

    background: #f8f8f8 ;

    padding-left: 2rem;

    padding-right: 2rem;

    padding-bottom: 1rem;

}

.ab4 .ab4-position img{

    margin-top: 6rem;

}

.ab4 .ab4-position .content h3{

    font-size: 32px;

    color: var(--black);

    font-family: sayaBd;

    text-transform: uppercase;

    margin-top: 3rem;

}

.ab4 .ab4-position .content p{

    font-size: 15px;

    color: #595858;

    margin-top: 1rem;

}

.ab4 .ab4-position .content img{

    margin: 1rem 0;

}

.ab4 .ab4-position .content h5{

    color: #38393a;

    font-size: 20px;

}

.ab4 .ab4-position .content span{

    font-size: 14px;

    color: #1181b0;

    margin-bottom: 1rem;

}



/* ab4-start */



/* ab5 start */

.ab5{

    margin-bottom: 3rem;

}

.ab5 h3{

    text-align: center;

    font-family: sayaBd;

    font-size: 32px;

    color: var(--black);

    text-transform: uppercase;

    margin-top: 3rem;

}

.ab5 p{

    font-size: 16px;

    color: #676767;

    text-align: center;

}

.ab5 .handerline{

    background-color: #707070;

    height: 2px;

    display: block;

    margin: 0 auto;

    width: 85%;

    margin-bottom: 3rem;

    margin-top: 3rem;

}

.ab5 .team{

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));

    gap: 1.5rem;

    text-align: center;

    margin-bottom: 4rem;

}

.ab5 .team .members{

    position: relative;

}

.ab5 .team .members .member-name{

    position: absolute;

    top: 68%;

    right: 0;

    text-align: center;

    background-color: rgba(248, 248, 248,.8);

    border-radius: 5px;

    width: 100%;

    padding: 1rem 1rem;

}

.ab5 .team .members .member-name h4{

    font-size: 15px;

    color: #333333;

    margin: 0;

    

}

.ab5 .team .members .member-name span{

    font-size: 11px;

    color: #0d0d0d;

}



/* ab5 end */



/* ab6 start */



.ab6{

    background-color: #f8f8f8;

    padding: 4rem 0;

    margin-top: 3rem ;

}

.ab6 .head h3{

    color: var(--black);

    text-align: center;

    font-family: sayaBd;

    font-size: 32px;

    text-transform: uppercase;

}

.ab6 .head p{

    color: #828282;

     font-size: 14px;

    text-align: center;

    padding: 0 3rem;

    margin-bottom: 3rem;

}

.ab6 .box{

    padding: 0px;

}

.ab6 .box .counting{

    margin-top: 3rem;

    margin-left: 2rem;

}

.ab6 .box .counting div{

    padding: 1rem 0;

    border-left: 4px solid #1181b0;

}

.ab6 .box .counting div h4{

    font-size: 36px;

    color: #313131;

    padding-left: 1.5rem;

    font-family: OpensansBold;

}

.ab6 .box .counting div p{

    font-size: 16px;

    color: #828282;

    padding-left: 1.5rem;

    margin-bottom: 0;

}



/* ab6 end */



/* ab7 start */



.ab7 .box{

    padding: 0 0 3rem;

}

.ab7 .box .ab-work-img{

    margin-top: 2rem;

}

.ab7 .work h3{

    text-transform: uppercase;

    font-size: 30px;

    font-family: sayaBd;

    color: var(--black);

    margin-top: 1rem;

}

.ab7 .work p{

    color: #8a8a8a;

    font-size: 14px;

    padding-right: 0;

}

.ab7 .work1{

    text-align: center;

    padding: 0 1rem;

}

.ab7 .work3{

    padding: 0 1rem !important;

    text-align: center;

}







/* ab7 end */











/* about page end */











/* join start */







#join{

    min-height: 70vh;

    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)) , url(../images/join-main.png) , no-repeat;

    background-size: cover;

    background-position: center;

    align-items: center;

    display: flex;

}

.section1 .menu-heads h6{

    font-size: 24px;

    font-family: sayaBd;

    color: #fff;

    padding: 0 .5rem;

}



/* js1 start */

.js1{

    padding: 1rem 1rem 0rem;

}

.js1 .js1-work-img{

    margin: 1rem 0 3rem;

}

.js1 .work{

    padding: 2rem 0 0;

    text-align: center;

    align-self: center;

}

.js1 .work a{

    color: #fff;

    background-color: #2c2727;

    font-size: 16px;

    transition: 1s ease;

    padding: .5rem 1rem;

}

.js1 .work a:hover{

    letter-spacing: .2rem;

}

.js1 .work h3{

    font-size: 36px;

    font-family: sayaBd;

    color: var(--black);

    margin-top: 1rem;

    text-transform: uppercase;

}

.js1 .work p{

    color: #8a8a8a;

    font-size: 15px;

    margin:0;

}

.js1 .work1{

    padding: 2rem  0rem ;

    align-self: center;

    text-align: center;

}

.js1 .work1 .abtn1{

    background-color: #2c2727;

    font-family: OpensansMedium;

    font-size: 16px;

    color: #fff;

    padding: .6rem 1.6rem;

    transition: 1s ease;

}

.js1 .work1 .abtn1:hover{

    letter-spacing: .2rem;

}

.js1 .work1 h3{

    font-family: sayaBd;

    font-size: 36px;

    text-transform: uppercase;

    padding-right: 0;

    margin: 2rem 0 1rem;

}

.js1 .work1 span{

    font-family: archivo;

    font-size: 20px;

    color: #1181b0;

}

.js1 .work1 p{

    font-size: 14px;

    font-family: Assistant;

    color: #776e6e;

    padding: 1rem .5rem;

}

.js1 .work1 p a{

    font-size: 14px;

    font-family: Assistant;

    color: #776e6e;

}

.js1 .work1 .abtn2{

    font-family: OpensansBold;

    font-size: 14px;

    color: #222121;

    padding: .6rem 1.6rem;

    transition: 1s ease;

    border: 2px solid #1181b0;

}

.js1 .work1 .abtn2:hover{

    letter-spacing: .2rem;

}

.js1 iframe{

    width: 100%;

    height: 450px;

}

.js2 {

    padding: 0rem 2rem 3rem;

}

.js2 .head h3{

    font-size: 30px;

    font-family: saya;

    color: var(--black);

    text-align: center;

    margin: 1rem;

}

.js2 .head p{

    text-align: center;

    font-size: 18px;

    color: #676767;

    margin-bottom: 2rem;

}



.js2 form  label{

    margin-top: 1rem;

    margin-bottom: .5rem;

    font-size: 15px;

    color: #333333;

    font-family: roboto;

}

.js2 form  input,select{

    border: 1px solid #c3c3c3;

    border-radius: 5px;

    width: 100%;

    padding: .6rem;

}

.js2 form #myfile{

    border: 1px solid #c3c3c3;

    border-radius: 5px;

    width: 100%;

    padding: 0;

    outline: none;

}

::-webkit-file-upload-button{

    color: #fff;

    background: #2c2727;

    border: none;

    border-radius: 5px;

    padding: .6rem;

}

.js2 form button{

    margin-top: 3rem;

    background-color: #2c2727;

    color: #ffff;

    font-family: Robotomd;

    font-size: 17px;

    width: 100%;

    padding: .6rem;

    border-radius: 5px;

}







/* js1 end */





/* join end */







/* project start */





#project{

    min-height: 70vh;

    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)) , url(../images/project-amin.jpg) , no-repeat;

    background-size: cover;

    background-position: center;

    align-items: center;

    display: flex;

}



/* pr1 strat */





.pr1 .head{

    border-bottom: 2px solid;

    text-align: center;

    padding: 2.5rem 0 2rem;

    margin: 0 .5rem 2rem;

}



.pr1 .box{

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));

    gap: 1rem;

    padding: 0;

    margin-bottom: 2rem;

}

.pr1 .box .work{

    box-shadow: 0px 5px 8px #e5e5e5, 0px -5px 8px #e5e5e5;

    margin: 5px;

}

.pr1 .box .work h5{

    font-family: sayaBd;

    font-size: 20px;

    color: var(--black);

    padding: .5rem 1.5rem;

    margin-top: 1rem;

}

.pr1 .box .work p{

    margin: 0;

    font-size: 14px;

    font-family: OpensansItalic;

    color: #9b9b9b;

    text-align: left;

    padding: .5rem 1.5rem;

    margin-bottom: 2rem;

}

.pr1 .box .work span{

    background-color: #0e64aa;

    display: block;

    height: 2px;

    width: 7rem;

    margin: 0 auto;

}













/* .pr1 .head .tablink {

    background-color: #222;

    color: #999;

    border: none;

    outline: none;

    cursor: pointer;

    padding: 14px 16px;

    font-size: 17px;

  }

  

  .pr1 .head .tablink:hover {

    color: #5a5a66;

  } */

  

  /* Style the tab content (and add height:100% for full page content) */

  /* .pr1.tabcontent {

    color: ;

    display: none;

    height: 100%;

  } */







.pr1  .box .pj-animation {

    position: relative;

    

  }

  

  

  .pr1  .box .pj-animation .overlay {

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    height: 100%;

    width: 100%;

    opacity: 0;

    transition: .5s ease;

    background-color: rgba(0,0,0,.8);

  }

  

  .pr1  .box .pj-animation:hover .overlay {

    opacity: 1;

  }

  

  .pr1  .box .pj-animation .text {

    position: absolute;

    top: 50%;

    left: 50%;

    -webkit-transform: translate(-50%, -50%);

    -ms-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%);

    text-align: center;

  }

  .pr1  .box .pj-animation .text h5{

    color: white;

    font-size: 20px;

  }



/* pr1 end */



.pr2 .head {

    padding: 3rem 0 ;

    text-align: center;

}

.pr2 .head h3{

    color: #fff;

    margin-bottom: 1.5rem;

    font-family: saya;

    font-size: 28px;

}

.pr2 .head a{

    font-size: 15px;

    text-transform: uppercase;

    padding: 0.5rem 2rem;

    color: #fff;

    transition: 1s ease;

    /* background: #143b5c; */

    border: 2px solid;

    margin: 1rem 0;

}

.pr2 .head a:hover{

    letter-spacing: .2rem;

}





/* project end */



/* contact start */

.ct1{

    margin: 3rem 0;

}

.ct1 .box{

    background-color: rgba(0, 0, 0, 0.8);

    padding: 3rem;

    border-radius: .5rem;

}

.ct1 .box h3{

    text-align: center;

    font-family: saya;

    font-size: 40px;

    color: #fff;

    border-bottom: 1px solid rgba(255, 255, 255, 0.5);

    padding-bottom: 1rem;

    margin-bottom: 2rem;

} 

.ct1 .box .design{

    text-align: center;

    padding: 1rem 0;

    border: 1px solid rgba(255, 255, 255, 0.5);

    border-radius: .5rem;

    min-height: 10rem;

    margin: .7rem 0;

}

.ct1 .box .design p{

    color: #fff;

    font-size: 14px;

    margin: 1rem 0;

    padding: 0 .5rem;

}

.ct1 .box .design a{

    color: #fff;

    font-size: 14px;

}

.ct1 .box .design a:hover{

    color: rgba(255, 255, 255, 0.3);



}

.ct1 .box iframe{

    border-radius: .5rem;

    width: 100%;

    height: 350px;

    margin-top: 2.5rem;

}

/* contact end */







}