/* top name bar Design Start Here==== */

.topNameBar {
    text-align: center;
    text-transform: capitalize;
    font-size: 1.5rem;
    margin: 25px 0;
    font-family: 'Lobster Two', sans-serif;
    color: var(---special--color);
}


/* top name bar Design End Here==== */


/* Top Menu Design Start Here==== */

.topMenus {
    background-color: var(---primery--color);
    /* padding: 10px 0; */
}

.menuWraper {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.menuLogo {
    width: auto;
    height: 60px;
    background-color:var(---secendary--color);
    padding: 0 20px;
    box-shadow: var(---boxShadow--color);
}

.menuLogo img {
    width: 100%;
    height: 100%;
    transition: 0.5s;
}
.menuLogo img:hover {
   transform: scale(1.1);
}

.menuIteams a {
    color: var(---secendary--color);
    font-size: 1.1rem;
    margin: 2px;
    padding: 3px 15px;
    border-radius: 5px;
    text-transform: uppercase;
    transition: 0.5s ease-in-out;
}

.menuIteams a:hover {
    background-color: var(---hover--color);
}

.sociaLink a i {
    color: var(---secendary--color);
    font-size: 1.3rem;
    margin: 2px;
    padding: 3px 2px;
    border-radius: 5px;
    transition: 0.5s ease-in-out;
}

.sociaLink a i:hover {
    color: var(---hover--color);
    transform: scale(1.5);
}


/* Top Menu Design End Here==== */


/* Hero Section Design Start Here==== */

#hero {
    background-image: url(../images/hero.jpg);
    background-position: center top;
    background-repeat: no-repeat;
    /* background-attachment: fixed; */
    background-size: cover;
    max-width: 100%;
    height: 100%;
    margin: auto;
    text-align: center;
    overflow: hidden;
    border-radius: 0 0 5px 5px;
    box-shadow: var(---boxShadow--color);
    margin-bottom: 25px;
    
}

.heroWraper {
    max-width: 100%;
    height: auto;
}

.heroWraper img {
    width: 100%;
    height: auto;
    transition: 1.7s;
    /* opacity: 30%  ; */
    object-fit: cover;
}

/* .heroWraper img:hover {
    /* -webkit-transform: scaleX(-1); */
    /* transform: scalex(-1); */



/* Hero Section Design End Here==== */


/* Services Section Design Start Here==== */

#services {
    box-shadow: var(---boxShadow--color);
    padding: 50px 0;
    border-radius: 0 0 50px 50px;
}

.services {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    text-align: center;
    margin-top: 50px;
    flex-wrap: wrap;
    gap: 25px ;
}

.services .singleServices {
    padding: 10px;
    border-radius: 7px;
    width: 400px;
    height: 200px;
    box-shadow: var(---boxShadow--color);
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: 0.5s ease-in-out;
}

.services .singleServices:hover {
    transform: rotate(-3deg);
}

.services .singleServices:nth-child(2):hover {
    transform: rotate(3deg);
}

.singleServices i {
    font-size: 2.5rem;
    color: var(---primery--color);
    transition: 0.5s;
}

.singleServices i:hover {
    color: var(---hover--color);
}

.singleServices h6 {
    margin: 12px 0;
    font-size: 1.5rem;
    text-transform: uppercase;
    color: var(---special--color);
}

.singleServices p {
    font-size: 0.9rem;
    line-height: 1.5rem;
    /* letter-spacing: .1rem; */
    font-weight: 300;
}


/* Services Section Design End Here==== */


/* Promotion Section Design Start Here==== */

#promotion {
    margin-top: 10px;
    /* background-color: var(---bg1--color); */
    padding: 50px 0;
    border-radius: 50px 50px 0 0;
    box-shadow: var(---boxShadow--color);
}

.promotionWrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 50px;
}

.singlePromotion {
    width: 300px;
    height: 425px;
    box-shadow: var(---boxShadow--color);
    background-image: url(../images/promtionbg.jpg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    border-radius: 7px;
    display: flex;
    justify-content: end;
    flex-direction: column;
    transition: 0.5s;
    margin-bottom: 50px;
    position: relative;
    border: 5px solid var(---primery--color);
}

.singlePromotion img {
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 5555;
    object-fit: cover;
}

.singlePromotion:hover {
    /* transform: rotate(-3deg); */
    transform: scale(1.1);
}

.promotioninfo {
    background-color: var(---primery--color);
    text-align: center;
    padding: 7px 0;
    color: var(---secendary--color);
    transition: 0.7s ease-in-out;
    z-index: 6666;
}

.promotioninfo:hover {
    background-color: var(---hover--color);
}

.promotioninfo h5 {
    font-size: 1.1rem;
    text-transform: capitalize;
}

.promotioninfo h6 {
    font-size: 1.2rem;
    margin: 5px 0;
}

.promotioninfo p {
    margin-top: 7px;
    padding: 3PX 0;  
    color: var(---secendary--color);    
    text-transform: capitalize;
}

.promotioninfo span {
    color: var(---special--color);
    background-color: var(---hover--color);
    margin: 0 5px;
    padding: 2px 5px;
    border-radius: 5px;
}

.inactive{background-color: red;
color: black;
border-radius: 15px;
box-shadow: var(---boxShadow--color);
margin:  2px 5px;
}

.inactive span{background-color: white;}
/* Promotion Section Design End Here==== */



/* Employee Section Design Start Here==== */
#employee{
    margin: 50px 0;
}
.employeeWraper{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 35px;
    flex-wrap: wrap;
}
.singleEmployee{
    width: 200px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;

}
.singleEmployee img{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    box-shadow: var(---boxShadow--color);
    transition: 0.5s ease-in;   
    object-fit: cover;
}

.singleEmployee img:hover{
    transform: scale(1.1);
}
.singleEmployee h6{
    font-size: 1rem;
    margin: 2px 0;
    margin-top: 15px;
    font-weight: 500;
    color: var(---primery--color);
}

.singleEmployee h6 span{color: var(---hover--color); padding-left: 3px;}
.singleEmployee p{
    padding: 2px 0;
    font-size: .8rem;
    color: var(---special--color);
    font-weight: 400;
    letter-spacing: 0.15rem;
}


/* Employee Section Design End Here==== */


/* Coustomer Section Design Start Here==== */

#coustomer{
    margin: 50px 0;
    margin: auto;
    text-align: center;
    padding: 25px 0px;
}

#coustomer .titel h4{
    text-align: center;
    margin-bottom: 5px;
    font-size: 1.7rem;
}
#coustomer .titel p{
    margin: auto;
    text-align: center;
}
.CoustomerWrapper{
    display: flex;
    align-items: center;
    text-align: center;
    
}

.singleCoustomer{
    width: 200px;
    height: 250px;  
    gap: 50px;    
    box-shadow: var(---boxShadow--color);
    border: 1px solid gray;
    overflow: hidden;
    margin:0 30px;
    
  
    
}


.cImage{
    width: 200px;
    height: 210px;
    
    
   
}
.cImage img{
    width: 100%;
    height: 100%;
    
   
    
}
.cName p{   
  width: 200px;
  overflow: hidden; 
  height: 50px ; 
  /* text-align: center; */
  padding: 4px 1px;
  /* box-shadow: var(---boxShadow--color); */
    
    
}

/* Coustomer Section Design End Here==== */





/* Partners Section Design Start Here==== */

#pertners{
    margin: 50px 0;
    margin: auto;
    text-align: center;
    padding: 25px 0px;
}
#pertners .titel h4{
    text-align: center;
    margin-bottom: 5px;
    font-size: 1.7rem;
}
#pertners .titel p{
    margin: auto;
    text-align: center;
}
.pertnerWrapper{
    display: flex;
    align-items: center;
    text-align: center;
    
}
.singlePernter{
    padding: 15px 0;
    
}
.plogo{
    width: 150px;
    height: 150px;
    text-align: center;
   
}
.plogo img{
    width: 100%;
    height: auto;
    padding-left: 50px;
    
}


/* Partners Section Design End Here==== */


/* Footer Section Design Start Here==== */

#footer {
    background-color: var(---primery--color);
}

.footerWraper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    color: var(---secendary--color);
    flex-wrap: wrap;
    gap: 10px   ;
}

.copyright p {
    background-color: red;
    text-align: center;
    padding: 2px 0;
    color: white;
    font-weight: 900;
}

.copyright p span {
    color: yellow;
}

.logo{width: 70px; height: auto;}
.logo img{width: 100%; height: 100%;}

/* Footer Section Design End Here==== */


/* Design Start Here==== */


/* Design End Here==== */


/* Design Start Here==== */


/* Design End Here==== */