*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style-type: none;
    font-family:  "Poppins",sans-serif;
}
html{
    scroll-behavior: smooth;
}




/*----popup-----*/

.popup-full{
    width: 100vh;
    height: 100vh;
    display: none;
    z-index: 4;
}
.body-data{
    opacity: 0.2;
    background-color: rgb(0, 0, 0);
    position: relative;
    z-index: 0;
}
.popup-box{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.popup-box form{
    position: absolute;
    z-index: 4;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    width: 35%;
    margin: 2%;
    padding: 0.5%;
    background-color: rgb(255, 255, 255);
    border-radius: 5px;
    box-shadow: -3px -3px 10px 0px rgba(0, 0, 0, 0.2),5px 5px 10px 0px rgba(0, 0, 0, 0.2);
}
.popup-box form h2{
    color: red;
    font-weight: bold;
}
.login-popup{
    margin-bottom: 4%;
    width: 90%;
    justify-content: center;
    font-weight: bold;
    color: black;
}
.login-popup label,input{
    display: block;
    width: 100%;
}
.login-popup input{
    padding: 1.5%;
    margin-top: 1%;
    border-radius: 3px;
    border: 1px solid rgb(0, 0, 0);
}
.popup-box button{
    width: 90%;
    padding: 1.1%;
    background-color: red;
    border-radius: 2px;
    color: white;
    font-weight: bold;
    border: 1px solid ;
    cursor: pointer;
    margin-bottom: 1%;
    border-radius: 3px;
}

.popup-box i{
    color: black;
    margin: 3%;
    font-size: 30px;
    cursor: pointer;
}
.login-popup.popup-success input{
    border-color: green;
}
.login-popup.popup-error input{
    border-color: red;
}
.login-popup .popup-error{
    color: red;
    margin-top: 1%;
    font-size: small;
}
@media screen and (max-width:700px) {
    .popup-box form{
        width: 70%;
    }
    
}



/*----navbar-----*/
.navbar{
    display: flex;
    flex-wrap: wrap;
    position: fixed;
    background-color: red;
    width: 15%;
    height: 100%;
    font-weight: bold;
    flex-direction: column;
    z-index: 1;
    
}
.navbar-side{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    height: 95%;
    margin: auto;
    width: 95%;

}
.navbar-name{
    font-size: 140%;
    color: white;
}
.navbar-link{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-between;
    font-size: 120%;
    margin-top: 60%;
    height: 45%;
    width: 96%;
}
.navbar-link a{
    display: flex;
    color: white;
    flex-wrap: wrap;
    border-radius: 5px;
    transition: .4s;
    padding:3% 0% 3% 3%;
}
.navbar-link li i{
    display: inline;
    padding-right: 10px;
}

.navbar-link a:hover{
    background-color: white;
    color: black;
    padding-left: 10%;
}
.navbar-link .menu-btn{
    display: none;
    cursor: pointer;
}
/*-------tab-------*/
@media screen and (max-width:900px){
    /*-----navbar------*/
    .navbar{
        width: 100%;
        height: 10%;
    }
    .navbar-side{
        flex-direction: row;
        justify-content: space-between;
        color: white;
        height: auto;

    }
    .navbar-link{
        flex-direction: row;
        margin-top: auto;
        height: auto; 
        align-items: center;
        justify-content: space-between;
        width: 80%;
        margin-right: 1%;
       
    }
    .navbar-link li i{
        padding-left: 3%;
    }
    .navbar-link a{
        width: fit-content;
        padding-right: 5%;
        margin-right: 1%;
        display: inline;

    }
    .navbar-link a:hover{
        padding-left: 0;
        padding-top: 20px;
    }  
    .navbar-sidebar{
        display: none;
    }
    
    
}
/*-----mobile-----*/
@media screen and (max-width:700px){
    .navbar{
        height: 7%;
        
    }
    .navbar-link a{
        display: none;
    }
    .navbar-link .menu-btn{
        display: contents; 
    }
    .navbar-link{
        width: auto;
    }
    
}



/*----mobile menubar----*/
.navbar-sidebar{
   display: none;
   flex-wrap: wrap;
   position: fixed;
   background-color:red;
   opacity: 0.9;
   height: 100%;
   width: 35%;
   top: 0;
   right: 0;
   flex-direction: column;
   align-items: center;
   z-index: 1;
   box-shadow: -10px 0 10px rgba(0, 0, 0, 0.3);
}
.navbar-sidebar ul{
    width: 70%;
    height: 50%;
    align-items: center;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 5%;

}
.navbar-sidebar li{
    width: 100%;
    font-weight: bold;
    font-size: 110%;
}
.navbar-sidebar li i{
    display: inline;
    padding-right: 10px;
}
.navbar-sidebar a{
    color: white;
    display: flex;
    flex-wrap: wrap;
    padding: 3% 0% 3% 3%;
    transition: .6s;
    font-weight: bold;
    border-radius: 5px;
}
.navbar-sidebar a:hover{
    background-color: white;
    color: black;
    padding-left: 10%;
}

#closem{
    color: white;
    font-size: 25px;
}




/*---img-content----*/
.img-content{
    float: right;
    width: 85%;
    min-height: 100vh;
    background:linear-gradient(rgba(0, 0, 0, 0.4),black) ,url('https://images.pexels.com/photos/233698/pexels-photo-233698.jpeg?cs=srgb&dl=pexels-paul-loh-65233-233698.jpg&fm=jpg');
    background-size: cover;
    color: aliceblue;
    
}
.img-content-head{
    margin: 20% 10% 10% 10%;
    width: 80%;

}
.img-content1{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.img-content1 h2{
    font-size: 200%;
    font-weight: bold;
}
.img-content2{
    margin-top: 3%;
    font-size: 80%;

}
.img-content2 button{
    margin-top: 2%;
    padding: 0.2%;
    font-weight: 600;
    background-color: red;
    color: white;
    border: 1px solid rgb(0, 0, 0);
    border-radius: 3px;
    cursor: pointer;
    transition: 0.7s;
}
.img-content2 button:hover{
    padding: 0.5%;
    


}
.img-content1 h4{
    color: red;
    font-size: 120%;
}
.img-content1 hr{
    width:100px;
    border:3px solid red ;
    border-radius: 3px;
    margin-top: 1%;
    margin-bottom: 2%;
}
.img-content1 h3 a{
    color: white;
}
.img-content1 h3{
    margin-bottom: 2%;
    font-weight: bold;
    font-size: 150%;
}
.img-content1 h3 a:hover{
    color: rgb(255, 0, 0);
}
@media screen and (max-width:900px){
    .img-content{
        width: 100%;
        margin-top: 8%;
    }
    
}

/*------body-content----*/
.body-content{
    display: flex;
    flex-wrap: wrap;
    margin-left: 15%;
    padding: 1%;  
    

}


/*----home-content-----*/
.home-content{
    display: flex;
    flex-wrap: wrap;
    transition: 0.7s;
    
}




/*-----home-content-head------*/
.home-content-head{
    width: 50%;
    margin: 1%;
}
.home-content-head h1{
    margin-bottom: 3%;
    font-size: 170%;
    
    
}
.home-content-head h2{
    color: red;
    font-size: 130%;
}
.home-content-head hr{
    width:70px;
    border:5px solid red ;
    border-radius: 4px;
    margin-top: 1%;
    margin-bottom: 4%;
    
}
.home-content-head p{
    padding-left:2%;
}
.home-content-head button{
    margin: 3%;
    border-radius: 5px;
    border: 1px solid red;
    background-color:red;
    color: white;
    cursor: pointer;
    padding: 1% 3% 1% 3%;
    font-weight: bold;
    cursor: pointer;
    transition: 0.7s;

}

.home-content-head button:hover{
    margin-left: 1%;
}

/*----home-content-login-----*/
.home-content-login{
    width: 30%;
    margin: 1% 1% 1% 10%;
    padding: 1%;
    display: flex;
    flex-wrap: wrap;
    border-radius: 5px;
    box-shadow: -3px -3px 10px 0px rgba(0, 0, 0, 0.2),5px 5px 10px 0px rgba(0, 0, 0, 0.2);
}
.home-content-login form{
    width: 100%;
    
}

.login-form{
    display: flex;
    flex-direction: column;
    margin-bottom: 7%;
}

.home-content-login p{
    text-align: center;
    font-weight: bold;
    font-size: 140%;
    margin-bottom: 5%;
} 

.login-form input{
    border: 1px solid rgb(0, 0, 0);
    padding: 1.5%;
    border-radius: 4px;
    margin-top: 0.5%;
}
.login-form input:focus{
    outline: 0;
}

.login-form .error{
    color: red;
    margin-top: 1%;
    font-size: small;
}

.home-content-login button{
  border-radius: 4px;
  border: 1px solid ;
  background-color:red;
  color: white;
  width: 100%;
  cursor: pointer;
  padding: 1.5%;
  font-weight: bold;
  margin-bottom: 4%;
  transition: 0.7s;
}
.home-content-login button:hover{
    background-color: black;

}
.home-content-login label{
    font-weight: 700;
}
.home-content-login form a{
    color: rgb(0, 0, 0);
    font-size: small;
}

.login-form.success input{
    border-color: green;
}
.login-form.error input{
    border-color: red;
}

@media screen and (max-width:900px){
    .body-content{
        margin-left: 0%;
    }  
    .home-content{
        width: 100%;
        margin-top: 5%;
    } 
}
@media screen and (max-width:700px){
    .home-content-head{
        display: block;
        width: 100%;
        margin-bottom: 5%;

    }
    .home-content-login{
        display: block;
        width: 60%;
        margin: 1% 1% 1% 20%;
        padding: 2%;
        
    }
    
}


/*---about-content-----*/

.about-content{
    
    padding: 1%;
    margin-top: 1%;
}
.about-state h2{
    color: red;
}
.about-state hr{
    width:70px;
    border:5px solid red ;
    border-radius: 4px;
    margin-top: 0.5%;
    margin-bottom: 2%;
}
.about-content .about-state p{
    padding-left: 1%;
}

.about-content .about-package{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    text-align: center;
    align-items: center;
    background-color: red;
    margin: 3% 8% 3% 8%;
    border-radius: 5px;
    color: white;
}

@media screen and (max-width:700px){
    .about-content .about-package{
        flex-direction: column;
        background-color: white;
        
    }
    .about-package h2{
        width: 60%;
        border-radius: 2%;
        flex-direction: row;
        background-color: red;
        color: white;
        margin-top: 2%;
        border-radius: 5px;
    }
    
}

/*-----about-img-----*/

.about-img{
    padding: 5%;

    
    
}
.about-img-content{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    border-radius: 5px;
    background-color: rgb(255, 255, 255);
    box-shadow: -3px -3px 10px 0px rgba(0, 0, 0, 0.2),5px 5px 10px 0px rgba(0, 0, 0, 0.2);
    transition: 0.8s;
    
    
    
}
.about-img-content:hover{
    margin: -3%;
   
}
.about-img img{
    width: 40%;
    border-radius: 5px;

}
.about-img-text{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    margin-left: 1%;
    padding: 2%;
    width: 55%;
}
.about-img-text h2{
    color: red;
    font-weight: bold;
    text-align: center;
    
}
.about-img-text hr{
    width:100%;
    border:5px solid red ;
    border-radius: 4px;
    margin-top: 1%;
    text-align: center;
    margin-bottom: 4%;

}
.about-img-text h4,.about-img-text h3{
    margin-top: 4%;
    margin-bottom: 2%;
}
.about-img-text button{
    margin-top: 4%;
    padding: 0.2%;
    font-weight: 600;
    background-color: red;
    color: white;
    border: 1px solid rgb(0, 0, 0);
    border-radius: 3px;
    cursor: pointer;
    width: fit-content;
    transition: 0.7s;
}
.about-img-text button:hover{
    padding: 0.5%;
}


.about-footer h2{
    margin-top: 2%;
}
.about-footer p{
    margin-top: 1.5%;
    margin-left: 1%;
}
@media screen and (max-width:900px){
    .about-img-content{
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin: 10%;
    }
    .about-img img{
        width: 100%;
        height: 100%;
    }
    .about-img-text{   
        margin-left: 0;
        padding: 4%;
        width: 100%;
    }
    .about-img-text h3,.p2{
        display: none;
    }

    .about-img-content:hover{
        margin: -0.5%;
       
    }

    
}



/*----body-people----*/

.body-people{
    margin-top: 1%;
    padding: 1%;
}
.body-people h2{
    color: red;
}
.body-people p{
    margin-left: 1%;
}
.body-people hr{
    width:70px;
    border:5px solid red ;
    border-radius: 4px;
    margin-top: 0.5%;
    text-align: center;
    margin-bottom: 2%;

}

.people-img{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    text-align: center;
    align-items: center;
    margin-top: 3%;

}
.people-img1 h4{
    font-size: 110%;
}
.people-img1 p{
    font-size: 80%;
    margin-bottom: 1%;
    margin-top: 1%;
}
.people-img img{
    width: 300px;
}
.people-img1{
    text-align: center;
    flex-wrap: wrap;
    color: white;
    opacity: 0.6;
    z-index: 0;
    border-radius: 5px;
    background:linear-gradient(rgba(0, 0, 0, 0.8),black);
    overflow: hidden;
    transition: 0.7s;


}
.people-img1 img{
    transition: 0.7s;
    object-fit: cover;
}
.people-img1-img{
    height: 360px;
}

.people-img1 img:hover{
    transform: scale(0.95);
    
}

.people-img1:hover{
    opacity: 1;
}

/*-------tab-------*/
@media screen and (max-width:1150px) {

    .people-img{
        justify-content: center;   
    }
    .people-img1{
        margin: 4%;
    }
    .people-img1-img{
        height: 270px;
    }
    
}



/*----service---*/
.body-service{
    margin-top: 1%;
    padding: 1%;

}
.body-service h2{
    color: red;
}
.body-service hr{
    width:70px;
    border:5px solid red ;
    border-radius: 4px;
    margin-top: 0.5%;
    text-align: center;
    margin-bottom: 2%;
}
.body-service p{
    margin-left: 1%;
    margin-bottom: 2%;
}
.service-imgs img{
    padding: 0.2%;
    height: 400px;
    width: 400px;
}
@media screen and (max-width:990px){
    .service-imgs img{
        width: 300px;
        height: 300px;
    }
    
}
@media screen and (max-width:650px) {

    .service-imgs img{
        width: 220px;
        height: 220px;
    }
    
}
@media screen and (max-width:500px) {
    .service-imgs{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    
}


/*----body-contact------*/
.body-contact{
    padding: 1%;
    margin-top: 1%;
    width: 100%;
}
.body-contact h2{
    color: red;
}
.body-contact hr{
    width:70px;
    border:5px solid red ;
    border-radius: 4px;
    margin-top: 0.5%;
    text-align: center;
    margin-bottom: 2%;

}
.body-contact p{
    margin-left: 1%;
}
.contact-full{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
    margin-top: 4%;

}
.contact-data{
    width: 30%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-around;
}
.contact-data p a{
    color: black;
}
.contact-data i{
    margin-right: 5%;
    color: red;

}
.contact-img img{
    border-radius: 5px;
}

.contact-message{
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    width: 100%;
    margin-top: 4%;
    
}
.contact-message form{
    width: 50%;
    margin: 2%;
    padding: 2%;
    background-color: rgb(255, 255, 255);
    border-radius: 5px;
    box-shadow: -3px -3px 10px 0px rgba(0, 0, 0, 0.2),5px 5px 10px 0px rgba(0, 0, 0, 0.2);
}
.contact-message form input,textarea{
    display: block;
    width: 100%;
    margin-top: 3%;
    padding: 1%;
    border: 1.5px solid rgb(0, 0, 0);
    border-radius: 2px;

}
.contact-message form input,textarea:focus{
    outline: 0;
    
}


.contact-message form button{
    background-color: red;
    color: white;
    font-weight: bold;
    border: none;
    float: left;
    width: 30%;
    margin-top: 3%;
    padding: 1%;
    transition: 0.7s;
    border-radius: 2px;
}
.contact-message button i{
    margin-right: 5%;
}
.contact-message form button:hover{
    background-color: black;
}

@media screen and (max-width:1110px){
    .contact-full{
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        width: 100%;
        
    }
    .contact-data{
        width: 100%;
        justify-content: center;
    
        
    }
    .contact-message{
        justify-content: center;
    }
    .contact-message form button{
        width: 40%;
    }
    
}



/*----footer------*/
.footer{
    display: flex;
    flex-wrap: wrap;
    float: right;
    width: 85%;
    background-color: rgb(0, 0, 0);
    padding-bottom: 1%;

}
.footer-link{
    display: flex;
    margin: 1%;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;

}
.footer-link a{
    padding-right: 2%;
    color: red;
    transition: 0.5s;
}
.footer-link a:hover{
    color: rgba(255, 0, 0, 0.49);

}
.footer p{
    color: white;
    width: 100%;
    justify-content: center;
    display: flex;
    font-size: 70%;
    margin: 0.5%;
    
}
.footer span{
    color: red;
    padding-left: 0.5%;
    padding-right: 0.5%;
}
@media screen and (max-width:900px){
    .footer{
        width: 100%;
    }

    
}