.body{
    overflow-x: hidden !important;
}
                                                  /* navbar  */
@font-face {
    font-family: 'Proxima-Nova-Bold';
    src: url('../fonts/Proxima-Nova-Bold.otf') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'WorkSans-Regular';
    src: url('../fonts/WorkSans-Regular.otf') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Proxima-Nova-regular';
    src: url('../fonts/ProximaNova-Regular.otf') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'WorkSans-Bold';
    src: url('../fonts/WorkSans-Bold.otf') format('woff2');
    font-weight: normal;
    font-style: normal;
}
.navbar-main-diva{
    background-color: rgba(78, 68, 60, 1) !important;
}
.nav-link{
    font-family: 'Proxima-Nova-regular' !important;
    font-size: 18px !important;
    /* font-weight: 600; */
    color: rgba(255, 255, 255, 1) !important; 
}
.nav-link.active{
    color: rgba(255, 211, 175, 1) !important;
}
.navbar-nav{
    gap: 19px;
    margin-bottom: 0px !important;
    
}
@media(max-width:1100px) and (min-width:990px){
    .navbar-nav{
        gap: 4px;
    }

}

.navbar-padding{
    margin: 13px 7%;
}

.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='white' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");

}
.navbar-light .navbar-toggler {
    color: rgba(0, 0, 0, .55);
    border-color: rgba(255, 255, 255, .1);
}
.navbar-toggler:focus {
    text-decoration: none;
    outline: 0;

        box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .4); /* Full opacity white */
    
    }
    #search
{
    align-items: center;
    background: rgba(78, 68, 60, 1) !important;
    height: 0;
    display: flex;
    justify-content: center;
    opacity: 0;
    position: fixed;
    transition: all .5s;
    width: 100vw;
    will-change: transform, opacity;
    z-index: -1;

    &:target
    {
        height: 100vh !important;
        opacity: 1;
        width: 100vw !important;
        z-index: 9999;
                .close-btn
        {
            display: block;
        }
    }
}

#searchbox
{
    background: transparent;
    border: solid #fff;
    border-width: 0 0 1px 0;
    color: #fff;
    flex: 1 0 auto;
    font-size: 2rem;
    height: 2rem;
    max-width: 50%;
    outline: 0;
    padding: 2rem 1rem;
}
#searchbox::placeholder
{
  
    color: #fff;
text-transform: capitalize;
 
}

.close-btn
{
    display: none;
    color: #fff;
    font-size: 2rem;
    position: absolute;
    top: .5rem;
    right: 2rem;
}
.close-btn:hover
{
    color: #fff !important;
 
}
.margin-for-fixed-navbar{
    margin-top: 95px;
}
                                                    /* index  */

/* project start section  */
.project-main-div{
    background-color: rgba(58, 51, 45, 1);
}
.project-heading{
    font-family: 'WorkSans-Bold';
    font-weight: 700;
    font-size: 58px;
    line-height: 65px;
    color: rgba(255, 255, 255, 1);
}
.svg-project{
    display: block;
    margin: 35px;
}
.btn-project{
    font-family: 'WorkSans-Regular';
    background-color: rgba(255, 211, 175, 1);
    width: 243px;
   height: 65px;
   padding: 18px 0px;
   font-size: 22px;
   font-weight: 600;
}
.padding-for-b-projeject{
    padding: 100px 0px;
}
.slider{
    display: flex;
    width: calc(100% + 0px);
    padding: 20px 0px;
    padding: 20px 0px;
    position: relative;
    left: 8%;
    gap: 19px;
    align-items: center;

}
.slider-container{
    overflow: hidden;

}
.img-slider1{
    width: 27%;
    height: 440px;
    z-index: 2;
}
.img-slider3{
    width: 27%;
    height: 440px;
    z-index: 2;

}
.img-slider2{
    width: 40%;
    height: 510px;
    border: 2px solid white;
    z-index: 2;

}
.photo-unique-index1{
    width: 100%;
    height: 600px;
}
.photo-unique-index1{
    width: 100%;
    height: 600px;
}
.photo-unique-index2{
    width: 100%;
    height: 595px;
}

.photo-unique-index3{
    width: 100%;
    height: 595px;
}
.photo-unique-row2{
    margin-top: -317px;
}
@media(max-width:990px){
    .photo-unique-index3{
        width: 100%;
        height: 495px;
    }
    .photo-unique-index1{
        width: 100%;
        height: 500px;
    }
    .photo-unique-index2{
        width: 100%;
        height: 495px;
    }
    .photo-unique-row2{
        margin-top: -250px;
    }

}
@media(max-width:768px){
    .photo-unique-index3{
        width: 100%;
        height: 395px;
    }
    .photo-unique-index1{
        width: 100%;
        height: 400px;
    }
    .photo-unique-index2{
        width: 100%;
        height: 395px;
    }
    .photo-unique-row2{
        margin-top: -200px;
    }

}
@media(max-width:568px){
    .photo-unique-index3{
        width: 100%;
        height: 345px;
    }
    .photo-unique-index1{
        width: 100%;
        height: 350px;
    }
    .photo-unique-index2{
        width: 100%;
        height: 345px;
    }
    .photo-unique-row2{
        margin-top: -164px;
    }

}
@media(max-width:450px){
    .photo-unique-index3{
        width: 100%;
        height: 295px;
    }
    .photo-unique-index1{
        width: 100%;
        height: 300px;
    }
    .photo-unique-index2{
        width: 100%;
        height: 295px;
    }
    .photo-unique-row2{
        margin-top: -106px;
    }

}

.project-line{
   
    margin: 1rem 0;
    color: inherit;
    background-color: currentColor;
    border: 0;
   opacity: 1; 
   height: 2px !important;
   width: 50px;
   margin: 12px;
}
.count-number-slider{
    color:#fc740c;
}
.counter-project{
    margin-left: 17%;
}


.cousor-pointer{
    cursor: pointer;
}
@media (max-width:990px) {
    .counter-project{
        margin-left:0%;
    }
    .slider{
        display: flex;
        /* overflow: hidden; */
        width: calc(100% + 20px);
        padding: 20px 0px;
        position: relative;
        left: 0%;
        gap: 19px;
        align-items: center;
    
    }
}


/* sevrice of cointainer */
.service-project-img{
    width: 100%;
    height: 360px;
}
.project-service-heading{
    font-family: 'WorkSans-Bold';
    font-weight: 700;
    font-size: 36px;
    line-height: 36px;
    color: rgba(32, 31, 29, 1);
}
@media(max-width:500px){
    .project-service-heading{
        font-family: 'WorkSans-Bold';
        font-weight: 700;
        font-size: 26px;
        line-height: 36px;
        color: rgba(32, 31, 29, 1);
    }
}
@media(max-width:406px){
    .project-service-heading{
        font-family: 'WorkSans-Bold';
        font-weight: 700;
        font-size: 23px;
        line-height: 36px;
        color: rgba(32, 31, 29, 1);
    }
}
.index-unique-make-heading{
    font-family: 'WorkSans-Bold';
    font-weight: 700;
    font-size: 30px;
    line-height: 34px;
    width: 310px;
    color: rgba(32, 31, 29, 1);
}
.index-unique-make-paragraph{
    font-family: 'WorkSans-Regular';
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    width: 310px;
    color: rgba(79, 79, 79, 1);
}
@media(max-width:590px){
    .index-unique-make-heading{
        font-size: 27px;

        width: auto;
        color: rgba(32, 31, 29, 1);
    }
    .index-unique-make-paragraph{
        font-size: 13px;

        width: auto;
   
    }

}
@media(max-width:400px){
    .index-unique-make-heading{
        font-size: 22px;


    }
    .index-unique-make-paragraph{
        font-size: 12px;

   
    }

}
.project-service-paragraph{
    font-family: 'WorkSans-Regular';
    font-weight: 400;
    font-size: 15px;
    line-height: 30px;
    color: rgba(79, 79, 79, 1);
}
.btn-project-service{
    font-family: 'WorkSans-Regular';
    background-color: rgba(255, 211, 175, 1);
    width: 200px;
   height: 62px;
   padding: 18px 0px;
   font-size: 20px;
   font-weight: 600;
}
.project-making-quality-img{
    width: 65px;
    height: 65px;

}
.project-making-quality-heading{
    font-family: 'WorkSans-Regular';
    font-size: 28px;
    font-weight: 600;
    text-align: center;

}
.project-making-quality-paragraph{
    font-family: 'WorkSans-Regular';
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    color: rgba(79, 79, 79, 1);

}
@media(min-width:990px){
    .project-service-colm{
        width: 45% !important;
    }
}
.how-work-container{
    background-image: url('../img/Frame\ 13.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* min-height: 100vh; */
}

.heading-how-to-work{
    font-family: 'WorkSans-Bold';
    font-weight: 700;
    font-size: 39px;
    line-height: 29px;
    color:rgba(32, 31, 29, 1);
}
.how-work-row2-numbering{
    font-family: 'WorkSans-Bold';
    font-weight: 700;
    font-size: 60px;
    line-height: 60px;
    color:rgba(95, 56, 25, 1);
}
.how-work-row2-heading{
    font-family: 'WorkSans-Regular';
    font-weight: 600;
    font-size: 27px;
    line-height: 30px;
    color:rgba(32, 31, 29, 1);
}
.how-work-colm{
    width: 327px;
    margin-left: 100px;
}
.how-work-row2{
    padding-left: 111px;
    gap: 15px;

}
.how-work-row2 .card{
    width: 30%;
    padding: 34px 34px 4px 34px;
}
@media(max-width:1100px){
    .how-work-row2 .card{
        width: 30%;
        padding: 34px 18px 4px 18px;    }
    .how-work-row2-heading{
        font-family: 'WorkSans-Regular';
        font-weight: 600;
        font-size: 25px;
        line-height: 30px;
        color:rgba(32, 31, 29, 1);
    }
    
}
@media(max-width:990px){
    .how-work-colm{
        width: 327px;
        margin-left: 0px;
    }
    .how-work-row2{
        padding-left: 0px;
        gap: 15px;
    
    }
    .how-work-row2 .card{
        width: 48%;
        padding: 34px 34px 4px 34px;
    }
}
@media(max-width:600px){

    .how-work-row2 .card{
        width: 100%;
        padding: 34px 34px 4px 34px;
    }
}

.lastest-project-photo{
    width: 100%;
    height: 250px;
}
.lastest-project-heading{
    font-size: 40px;
    font-family: 'WorkSans-Bold';

    font-weight: 700;
    color: rgba(32, 31, 29, 1);
    line-height: 47px;
}
@media(max-width:400px){
    .lastest-project-heading{
        font-size: 34px;
        font-family: 'WorkSans-Bold';
    
        font-weight: 700;
        color: rgba(32, 31, 29, 1);
        line-height: 47px;  
    }
}
.footer-container{
    background-color: rgba(32, 31, 29, 1);
}
.footer-colm-first-paragraph{
    font-family: 'WorkSans-Regular';
    font-weight: 400;
    font-size: 19px;
    line-height: 30px;
    color:rgba(255, 255, 255, 1);
}
.footer-colm-second-heading{
    font-family: 'WorkSans-Regular';
    font-weight: 600;
    font-size: 19px;
    padding: 0px;
    line-height: 30px;
    color:rgba(255, 255, 255, 1);
}
.footer-colm-second-paragraph{
    font-family: 'WorkSans-Regular';
    font-weight: 400;
    font-size: 17px;
    line-height: 30px;
    color:rgba(255, 255, 255, 1);
}
.footer-service-pcotainer{
    gap: 12px;
}
.footer-colm-fourth-img{
    width: 100%;
    height: 90px;
    padding: 0px;
}
.footer-colm-fourth{
    width: 30%;
    padding: 0px;
}
@media(max-width:1110px){
    .footer-colm-fourth{
        width: 29%;
        padding: 0px;
    }
    
}
.fourth-colm-main-footer{
    gap: 12px;
}

.footer-hr{
    background-color: rgba(78, 76, 81, 1);
    height: 2px !important ;
    opacity: 1;
    margin-top: 60px;
    width: 100%;
}
.footer-hr-icon-container{
    width: 100%;

}
.footer-hr-icon-container .svg-project{
margin-top: 0px;
width: 16px;
margin-right: 0px;
}
@media (max-width: 425px) {
    .footer-colm-fourth {
        width: 28%;
        padding: 0px;
    }
}
.animate-heading1-first-section-index{
    opacity: 0;
}
.animate-icon-coial-index{
    opacity: 0;
}
.slider-img-index{
    opacity: 0;
}
.width-fixed{
    width: 541px;
}
.box {
    position: relative;
}

.input {
    padding: 10px 19px 10px 2px;
    width: 64px;
    height: 100%;
    background: none;
    border: none;
    font-family: 'Proxima-Nova-regular' !important;
    font-size: 18px !important;
    position: relative;
    z-index: 2;
    /* font-weight: 600; */
    color: rgba(255, 255, 255, 1) !important;
    outline: none;
    transition: .5s;
    cursor: pointer;
 opacity: 0;
}

.box input.active{
    width: 163px;
    border: none;
    cursor: auto;
    border-bottom: 2px solid white;
    background: transparent;
    border-radius: 0px;
  opacity: 1;
    
}

.box .svg-search {
    position: absolute;
    top: 50%;
    cursor: pointer;
    right: 15px;
    transform: translate(-50%, -50%);
    font-size: 26px;
    z-index: 10 !important;

    color: white;
    transition: .2s;
}

 .svg-search.active{
    /* opacity: 0; */
    right: 17px;
    cursor: pointer ;
    z-index: 10 !important;
    width: 15px;
    
    z-index: -1;
}
@media(max-width:990px){
    .box .svg-search {
        position: absolute;
        top: 50%;
        left: 15px;
        transform: translate(-50%, -50%);
        font-size: 26px;
        color: white;
        transition: .2s;
    }
    .box .svg-search.active {
        position: absolute;
        top: 50%;
        left: 155px;
        transform: translate(-50%, -50%);
        font-size: 26px;
        color: white;
        transition: .2s;
    }

}
.navbar-sarch-cross{

}
.footer-logo{
    width:169px; height:42px;
}
@media(max-width:420px){
    .footer-logo {
        width: 137px;
        height: 42px;
    }
}
@media(min-width:1220px){

    .latest-blog-all-col{
        width: 560px;
    }
}
@media(min-width:990px){

    .service-fourth-row-colm {
    padding: 0px 20px;
    }

}