*{
    padding:0px;
    margin:0px;
}

.header{
    z-index: 99;
    position:sticky;
    top:0;
    left:0;
    box-shadow: 0 15px 15px rgba(0, 0, 0, 0.349);
}

.nav-background{
    background-color: #d9b68d;
    background-size: cover;
}

.navbar{
    width:100%;
    display:flex;

}

.leftnav {
    width:60%;
    display: flex;
    align-items: center;
}

.logo{
    width:35%;
    margin:auto;
}
.logo img {
    width: 85%;
    border: 10px solid rgb(228 196 157 / 71%);
    border-radius: 20px;
    margin: 0px 20px;
}

.name{
    width:45%;
}

.name p{
    width:83%;
    color:rgb(0 137 255);
    font-size: 30px;
    list-style: none;
    margin: auto;
}

.name p:hover{
    color:rgb(90 90 90 / 91%);
    cursor:pointer;
}

.search{
    align-items: center;
    display: flex;
    margin:auto;
    width:45%;
}

.searchbox{
    height:30px;
    width:250px;
    border:0px;
    border-top-left-radius:5px;
    border-bottom-left-radius:5px;
    padding:2px 5px;
}

.search button{
    height:34px;
    width:60px;
    color:white;
    font-size: 14px;
    background-color: rgb(0 , 137 , 255);
    border:none;
    border-radius: 0px;
    border-top-right-radius:5px;
    border-bottom-right-radius:5px;
    padding:10px 10px;
}

.search button:hover{
    cursor: pointer;
    color:white;
    background-color: rgb(87, 164, 252);
}

.rightnav{
    width:40%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 20px 20px;
    font-size: 20px;
    
}

.rightnav li a{
    color:white;
    text-decoration: none;
    padding: 5px 8px;
    transition: 0.3s ease;
    border:2px solid rgb(0 137 255);
    border-radius: 10px;
}

.rightnav li {
    list-style: none;
}

#rightnav li a:hover{
    color:rgb(0 137 255);
    border:2px solid white;
    border-radius: 10px;
}
.burger{
    display:none;
}
.cross{
    display:none;
}


.line{
   width: 33px;
   background-color: rgb(0 137 255);
   height: 4px;
   margin: 5px 5px; 
}

/* ending nav bar section */

/* hero section starting */

html{
    scroll-behavior: smooth;
}


.hero img{
    width: 100%;
}



/** Category Section Starting **/

.main{
    padding-bottom:30px;
    
}

.category{
    text-align: center;
}

.category h3{
    width: 70%;
    margin: 70px auto;
    color:#157cd5;
    text-align: center;
    font-size: 40px;
    background-color: #d9b68d;
    height: 50px;
    border-radius: 30px;
    padding: 2px 0px;
}

.cat-section{
    width: 65%;
    margin: 70px auto;
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
    grid-gap:60px;
}

.box{
    width:100%;
    height:auto;
    border:5px solid black;
    cursor: pointer;
    overflow: hidden;
    padding: 10px 10px;
    border-radius: 15px;
    background-color: #d9b68d;
    border: 1px solid rgb(245, 172, 98);
    box-shadow: 15px 15px 8px rgba(0, 0, 0, 0.3);
}

.box img{
    border-radius:12px;
    width:100%;
    height: 230px;
    object-fit: cover;
    object-position: center center;
}


.box h2{
    padding:5px 0px;
    color: #683920;
    text-align:center;
    font-size: 25px;
}

.box:hover{
    transform: scale(1.1,1.1);
    transition:0.1s;
    box-shadow: 15px 15px 8px rgba(0, 0, 0, 0.1);
    
}

.full-img{
    width:100%;
    height: 100vh;
    background: rgba(0,0,0,0.9);
    position: fixed;
    top:0;
    left:0;
    display:none;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

.full-img img{
    width:90%;
    max-width:500px;
}
.full-img span i{
    position: absolute;
    top: 10%;
    right:5%;
    font-size: 30px;
    color: #fff;
    cursor:pointer; 
}
.full-img h4{
    position: absolute;
    top: 34%;
    right:34%;
    font-size: 40px;
    color: rgba(209, 209, 209, 0.696);
    cursor:pointer; 
}
.full-img h5{
    position: absolute;
    top: 53%;
    right:34%;
    font-size: 40px;
    color: rgba(209, 209, 209, 0.696);
    cursor:pointer; 
}

/* contact us section */

.contact-us{
    width: 70%;
    margin: auto;
    margin-bottom: 27px;

}

.contact{
    width:100%;
}

.contact-details{
    display: flex;
    align-items: center;
}

.contact-heading{
    margin: auto;
    margin-top: 70px;
    margin-bottom: 35px;
}

.contact-heading h2{
    font-size: 40px;
    color:#157cd5;
    background-color: #d9b68d;
    width: 100%;
    text-align: center;
    padding: 2px 0px;
    border-radius: 30px;
}

.details h4{
    font-size: 24px;
    color:#0089ffc7;
    border-radius: 5px;
    padding: 5px 10px;
    background-color: white;
}
.details h4 a{
    text-decoration: none;
    color:rgba(121, 121, 121, 0.92);
}

.contact-design{
    padding:5px 5px;
    border-radius: 10px;
    background-color: #d9b68d;
    margin:10px 10px;
}

.contact-design:hover{
    transform: scale(1.1,1.1);
    transition:0.3s;
    
}

.contact-design h4:hover{
    color:#157cd5;
}
.details{
    padding:10px 10px;
    width:50%;
}
.map{
    padding: 10px 10px;
    width:45%;
    justify-content: center;
    border-radius: 20px;
}


/* Sign in section */

.signin{
    width: 70%;
    margin:10px auto;
    padding: 18px 0px;
    background-color: rgb(216 216 216 / 29%);
    
}

.signin-heading h2{
    color:#157cd5;
    text-align: center;
    font-size: 40px;
    background-color: #d9b68d;
    height: 50px;
    border-radius: 30px;
    padding: 2px 0px;
    margin:30px 0px;
}

.form-table{
    width:70%;
    margin: 50px auto;
    background-color: rgb(216 216 216 / 29%);
    padding: 35px 30px;
    border-radius: 20px;

    
}

.row{
    margin:20px 0px;    
    display: flex;
    background-color: white;
    border-radius: 5px;
    align-items: center;
}

.row h4{
    font-size: 24px;
    color:#0089ffc7;
    padding: 5px 10px;
    margin:10px 0px;
    width:20%;
}

.row input{
    height: 30px;
    margin: 2px 0px;
    border: 1px solid rgb(211 211 211);
    border-radius: 10px;
    width:70%;
    padding :2px 10px;
    font-size: 0.8rem;
}

.row input:hover{
    border: 2px solid #0089ffc7;
}

.gender label{
    display:flex;
    justify-content: center;
    align-items: center;
    margin: 0px 5px;
}

.gender-option{
    display:flex;
    justify-content: center;
    align-items: center;
}

.gender label b{
    color:#43a7ffcc;
    font-size: 20px;
    margin:0px 5px;
}

.message{
    width:73%;
    height:70px;
    font-size: 16px;
    border:1px solid rgb(211 211 211);
    
}

.row textarea:hover{
    border: 2px solid #0089ffc7;
}

.submit {
    justify-content: center;
    display: flex;
    background-color: white;
    border-radius: 10px;
}

.submit button{
    font-size: 30px;
    margin:auto;
    color:rgb(85 205 85 / 86%);
    border:none;
    margin:10px 0px;
    border-radius: 5px;
    background-color: white;
}

.submit button:hover{
    color: rgb(19 183 19);
}



/*_________________________________
------------Cetagory CSS--------------
_________________________________*/


.catheading{
    width: 70%;
    margin: auto;
}
.catheading h3{
    font-size: 40px;
    color:#157cd5;
    background-color: #d9b68d;
    width: 100%;
    text-align: center;
    padding: 2px 0px;
    border-radius: 30px;
}
.container{
    position:relative;
    max-width:1350px;
    width:100%;
    margin: 50px auto;
}
.filter_buttons{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap:10px;
}
.filter_buttons button{
    padding:10px 20px;
    font-size: 18px;
    color:#0089ff;
    background-color: #e6e6e6;
    border:none;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
}
.filter_buttons button.active{
    background-color: #4070f4;
    color:#fff;
}
.card.hide{
    display: none;
}



/*_________________________________
------------Workers CSS--------------
_________________________________*/


.workers h3{
    width: 70%;
    margin: 70px auto;
    color:#157cd5;
    text-align: center;
    font-size: 40px;
    background-color: #d9b68d;
    height: 50px;
    border-radius: 30px;
    padding: 2px 0px;
}

.worker-list{
    background-image: url(../bg2.webp);
    background-size: cover;
    width:55%;
    align-items:center;
    padding:40px;
    border-radius: 20px;
}
.worker-box{
    margin:100px auto;
    width: 50%;
    background-image: url(../image/bg13.jpeg);
    background-size: cover;
    border-radius: 20px;
    padding: 40px;
}
.worker-box img{
    width:80%;
    border-radius: 20px;
}
.worker-detail{
    width: 80%;
    align-items: center;
}
.worker-detail table{
    width:80%;
}
.worker-detail table tr td h2{
    font-size: 40px;
}


/*==== Page Next or Previous*/

.page-changer{
    width: 40%;
    margin:auto;

}
.previous ,.next{
    color:white;
    text-decoration: none;
    margin: 20px;
    padding: 10px;
    border-radius: 5px;
    font-size: 40px;
    background-color: #4287ff;

}
.previous:hover{
    color: #4287ff;
    background-color: #cacacab5;
}
.next:hover{
    color: #4287ff;
    background-color: #cacacab5;
}







.counter{
    margin: auto;
    border-radius: 20px;
    border: 10px solid white;
}
.count_text{
    font-size: 35px;
    color:#0089ff;
    margin:auto;
}

footer {
    position:relative;
    width: 100%;
    background-color: #cdaa80;
    min-width: 100px;
    flex-wrap: wrap;
    margin-top:150px;
    display: flex;
    justify-content: center;
    align-items:center;
    flex-direction: column;
    z-index: 0;
}
.social_icon ,
.menu{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70%;
    flex-wrap: wrap;
}
.social_icon li,
.menu li{
    list-style:none;
    padding: 25px;
    color: rgb(233, 39, 39);
    font-size: 35px;
}
.social_icon li a{
    color: rgb(0 137 255);
    display: inline-block;
    font-size: 35px;
}
.menu li a{
    color:white;
    display: inline-block;
    text-decoration: none;
    font-size: 25px;
}
footer .social_icon li:hover{
    transform: translateY(-10px);
    color:#ffffffc7;
}
.menu li:hover{
    opacity: 1;
}
footer .wave{
    position: absolute;
    top:-100px;
    left: 0;
    width:100%;
    height: 100px;
    background: url(../image/wave.png);
    background-size: 1000px 100px;
}
footer .wave#wave1{
    z-index: 1000;
    opacity: 1;
    bottom: 0;
    animation: animateWave 4s linear infinite;
}
footer .wave#wave2{
    z-index: 1000;
    opacity: 0.5;
    bottom: 10px;
    animation: animateWave_02 4s linear infinite;
}
footer .wave#wave3{
    z-index: 1000;
    opacity: 0.3;
    bottom: 15px;
    animation: animateWave 3s linear infinite;
}
footer .wave#wave4{
    z-index: 1000;
    opacity: 0.7;
    bottom: 20px;
    animation: animateWave_02 3s linear infinite;
}
@keyframes animateWave
{
    0%
    {
        background-position-x: 1000px;
    }
    100%{
        background-position-x: 0px;
    }
}
@keyframes animateWave_02
{
    0%
    {
        background-position-x:0px;
    }
    100%{
        background-position-x: 1000px;
    }
}
.copyright{
    color:white;
    padding:30px 0;
    justify-content: center;
    display: flex;
    align-content: center;
    font-size: 15px;
}

 #preloader{
    background: #000 url(../image/preloader.gif)no-repeat center center;
    background-size: 60%;
    height: 100vh;
    width: 100%;
    position: fixed;
    z-index: 105;
}

#popup-img{
    background: rgb(255 255 255 / 54%) url(../image/popup.jpg)no-repeat center center;
    background-size: 35%;
    height: 100vh;
    width: 100%;
    position: fixed;
    z-index: 99;
}
.popup i {
    position: fixed;
    cursor: pointer;
    right: 10%;
    background: white;
    border-radius: 20px;
    padding: 1px 8px;
    top: 70px;
    font-size: 65px;
    z-index: 100;
}