/* START BASIC ELEMENTS  */
*
{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}

:root
{
    --black-color:#000000;
    --white-color:#FFFFFF;

}


html,body
{
    scroll-behavior: smooth;
    font-style: italic;
    overflow-x: hidden;
}



/* cursor  */


/* end Cursor  */

/* Start https://www.cursors-4u.com */ * {cursor: url(https://ani.cursors-4u.net/cursors/cur-13/cur1153.ani), url(https://ani.cursors-4u.net/cursors/cur-13/cur1153.png), auto !important;} /* End https://www.cursors-4u.com */




/*  START  SCROLLBAR BTN  */

::-webkit-scrollbar 
{
    width: 20px;
    background-color: var(--white-color);
}


::-webkit-scrollbar-thumb {
    background: var(--black-color);
    border-radius: 10px;
}



/* END SCROLLBAR BTN  */



/* END BASIC ELEMENTS  */




.container
{
    width: 80%;
    height: 100%;
    margin: auto;
}

/* START NAVBAR HERE  */

nav
{
    padding: 20px 0px;
    background-color: var(--black-color);
    color: var(--white-color);
}

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

nav .nav__logo i
{
    text-decoration: none;
    font-size: 30px;
    color: var(--white-color);
    transform: scale(1);
    transition: all 0.3s ease-in-out;
}

nav .nav__logo i:hover 
{
    transform: scale(1.1);
}


nav .nav__icon i
{
      text-decoration: none;
    font-size: 23px;
    color: var(--white-color);
    transform: scale(1);
    transition: all 0.3s ease-in-out;
}

nav .nav__icon i:hover 
{
      transform: scale(1.1);
}

/* END NAVBAR HERE  */

/* START HEADER HERE  */
header
{
    width: 100%;
    height: 100vh;
     background-image: linear-gradient(to right bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%), url('./../images/header.jpg');
    background-size: cover;
    background-attachment: fixed;
    
}
header .container 
{
    display: flex;
    align-items: center;
    justify-content: center;
}

header .header__content
{
    text-align: center;
    color: var(--white-color);
    font-style: italic;
}

header .header__content  .header__content__text
{
    margin: 20px 0px;
}
header .header__content  .header__content__text  h2
{
    font-size: 60px;
}



.header__content__content
{
    margin: 20px 0px;

}



.header__content__btn 
{
    margin: 30px 0px;
}

.header__content__btn a
{
  text-decoration: none;

}



.header__content__btn button
{
      padding: 15px 25px;
    color: var(--black-color);
    background-color: var(--white-color);
    border: none;
    outline: none;
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.6s ease-in-out;
}

.header__content__btn button:hover 
{
     color: var(--white-color);
    background-color: var(--black-color);  
}



/* SMALL SCREEN  */
@media(max-width:540px)
{
   header 
   {
        max-width: 100% !important; 
         /* background-image: url('/dist/images/mens-barber-services-in-dallas-scaled.jpeg') !important; */
        background-image: url('../images/sm.jpg') !important;
        background-size: cover;
   }
}



/* END SMALL SCREENS  */



/* END HEADER HERE  */


/* START ABOUT US  */

.about-us 
{
    padding: 20px 0px ;
    background-color: var(--black-color);
    color: var(--white-color);
    text-align: center;
}

.about-us h3 
{
      padding: 40px 0px;
    /* background-color: var(--white-color); */
    color: var(--white-color);
    font-style: italic;
    text-align: center;
    position: relative;
    font-size: 23px;
    letter-spacing: 2px;
}


.about-us h3::after {
    content: "";
    width: 80px;
    height: 2px;
    background-color: var(--white-color);
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
}

.about-us .container
{
    display: flex;
    align-items: center;
    justify-content: center;
}



.about-us p 
{
    margin: 20px 0px;
    font-size: 18px;

}

/* END ABOUT US  */

/* START SERVICES HERE   */
.services
{
     padding: 60px 0px ;
    background-color: var(--black-color);
    color: var(--white-color);
    text-align: center;
}
.services h3 
{
    padding: 40px 0px;
    /* background-color: var(--white-color); */
    color: var(--white-color);
    font-style: italic;
    text-align: center;
    position: relative;
    font-size: 23px;
    letter-spacing: 2px;

}


.services h3::after 
{
    content: "";
    width: 80px;
    height: 2px;
    background-color: var(--white-color);
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
}



.services  .container
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


.services .services__content 
{
    margin: 25px 0px;
    padding: 40px 60px;
    background-color: var(--white-color);
    color: var(--black-color);
    border: 2px solid var(--black-color);
    border-radius: 15px;
    box-shadow: 0px 0px 10px var(--black-color);
    text-align: center;

}


.services .services__content  .services__content__icon
{
    margin: 10px 0px ;
    font-size: 23px;
}




.services .services__content  .services__content__text 
{
    margin: 10px 0px;

}


.services  .services__content  .services__content__price
{
    margin: 10px 0px;
}

/* 2 */


.services .services__content:nth-child(2) 
{
    color: var(--black-color);
}





/* 3 */
.services .services__content:nth-child(3) 
{
    color:  var(--black-color) ;
}


/* 4 */
.services .services__content:nth-child(4)  
{

    color: var(--black-color);

}















.services a button
{
    margin: 20px 0px;
     padding: 15px 25px;
    color: var(--black-color);
    background-color: var(--white-color);
    border: none;
    outline: none;
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.6s ease-in-out;
}

.services a button:hover 
{
       color: var(--white-color);
    background-color: var(--black-color);
}
/* END SERVICES HERE  */




/* START MEMBERSHIP SECTION HERE  */

.membership
{
     padding: 120px 0px ;
    background-color: var(--black-color);
    color: var(--white-color);
    text-align: center;
}
.membership h3 
{
    padding: 40px 0px;
    /* background-color: var(--white-color); */
    color: var(--white-color);
    font-style: italic;
    text-align: center;
    position: relative;
    font-size: 23px;
    letter-spacing: 2px;

}

.membership h3 span 
{
    margin: 0px 15px;
}

.membership h3 span img
{
    border-radius: 50%;
    width: 60px;
}




.membership h3::after 
{
    content: "";
    width: 80px;
    height: 2px;
    background-color: var(--white-color);
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
}



.membership  .container
{
    display: flex;
    /* flex-direction: column; */
    align-items: center;
    justify-content: space-around;
}


.membership .services__content 
{
    margin: 25px 0px;
    padding: 40px 60px;
    background-color: #FF0000;
    color: var(--white-color);
    border: 2px solid var(--white-color-color);
    border-radius: 15px;
    box-shadow: 0px 0px 10px var(--white-color);
    text-align: center;

}


.membership .services__content  img
{
    margin: 10px 0px ;
    /* font-size: 23px; */
    width: 60px;
    border-radius: 50%;
}




.membership .services__content  .services__content__text 
{
    margin: 10px 0px;

}


.membership  .services__content  .services__content__price
{
    margin: 10px 0px;
}

/* 2 */


.membership .services__content:nth-child(2) 
{
    color: var(--white-color);
}





/* 3 */
.membership .services__content:nth-child(3) 
{
    color:  var(--white-color) ;
}


/* 4 */
.membership .services__content:nth-child(4)  
{

    color: var(--black-color);

}















/* SMALL SCREEN HERE  */
@media(max-width:540px)
{
    .membership  .container
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
}


/* END SMALL SCREEN HERE  */









/* END MEMBERSHIP SECTION HERE  */




















/* START OFFIERING SECTION HERE  */
.offiering 
{
    padding: 60px 0px;
    background-color: var(--white-color);
    color: var(--black-color);
    text-align: center;
}

.offiering h3 
{
    text-transform: uppercase;
    font-size: 40px;
    margin: 10px 0px;
}
.offiering h3 span 
{
    color: #FF0000;
    font-size: 23px;
}
.offiering p 
{
    margin: 25px 0px;
}


.offiering .container
{
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;

}

.offiering .offiering__content 
{
    display: flex;
    margin: 40px 0px;
}
.offiering .offiering__content__img
{
    margin: 10px;
}

.offiering .offiering__content__img img
{
    max-width: 550px;
    border-radius: 15px;
    border: 2px solid  var(--black-color);
}

.offiering__content__text
{
    margin: 30px;
}

.offiering__content__text h4 
{
    font-size: 30px;
}

.offiering__content__text p 
{
    margin: 15px 0px;
}


.offiering .book__btn 
{

    text-decoration: none;
    margin: 40px 0px !important;
     padding: 15px 25px;
    color: var(--white-color);
    background-color: var(--black-color);
    border: none;
    outline: none;
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.6s ease-in-out;
}

.offiering .book__btn:hover
{
    color: var(--black-color);
    background-color: var(--white-color);
}


/* SMALL SCREEN HERE  */
@media(max-width:540px)
{
    .offiering h3 
    {   
        font-size: 30px;

    }

    .offiering h3 span 
    {
        font-size: 18px;
    }

    .offiering p 
    {
        margin: 15px;
    }

    .offiering .container 
    {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .offiering .offiering__content 
    {
        flex-direction: column;
        display: flex;
    }

     .offiering .offiering__content  img 
     {
        max-width: 350px;
     }


}




/* END SMALL SCREEN HERE  */

/* END OFFIERING SECTION HERE  */

/* START CHOOSE SECTION HERE  */
.choose 
{
    width: 100%;
    height: 450px;
    background-image:linear-gradient(to right bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%), url('https://images.pexels.com/photos/4422102/pexels-photo-4422102.jpeg');
    background-size: cover;
}

.choose .container 
{
    display: flex;
    align-items: center;
    justify-content: center;
}


.choose .choose__btn
{
     text-decoration: none;
    margin: 40px 0px !important;
     padding: 15px 25px;
    color: var(--white-color);
    background-color: var(--black-color);
    border: none;
    outline: none;
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.6s ease-in-out;   
}

.choose .choose__btn i 
{
    color: #FF0000;
}

.choose .choose__btn:hover 
{
    color: var(--black-color);
    background-color: var(--white-color);
}


/* END CHOOSE SECTION HERE  */

/* START CHOOSE__BEARD SECTION HERE  */
.choose__beard
{
     width: 100%;
    height: 450px;
    background-image:linear-gradient(to right bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%), url('https://images.pexels.com/photos/3775534/pexels-photo-3775534.jpeg');
    background-size: cover;
}


.choose__beard .container 
{
    display: flex;
    align-items: center;
    justify-content: center;
}


.choose__beard .choose__btn
{
     text-decoration: none;
    margin: 40px 0px !important;
     padding: 15px 25px;
    color: var(--white-color);
    background-color: var(--black-color);
    border: none;
    outline: none;
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.6s ease-in-out;   
}

.choose__beard .choose__btn i 
{
    color: #FF0000;
}

.choose__beard .choose__btn:hover 
{
    color: var(--black-color);
    background-color: var(--white-color);
}



/* END CHOOSE__BEARD SECTION HERE  */
















/* START WALKS SECTION HERE  */

.walks 
{
      padding-top: 10px;
    background-color: var(--black-color);
    color: var(--white-color);
    text-align: center;
}

.walks__title
{
    width: 100%;
    background-color: var(--white-color);
    text-align: center;
    border-radius: 15px;
    color: var(--black-color);
    padding: 25px 0px ;
    font-weight: 900;
    font-size: 23px;
}


.walks .container 
{
    display: flex;
    /* flex-direction: column; */
    align-items: center;
    justify-content: center;
}

.walks .walks__pics
{   
    /* max-width: 33.1%;
    max-width: 80px; */

    padding: 10px 0px;
    
}

.walks .walks__pics img
{
   max-width: 350px;
    
}


/* SMALL SCREEN START */

@media(max-width:540px)
{

    .walks__title
    {
        width: 80%;
      margin: 0px auto;
    }

    .walks .container 
    {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }




    .walks .walks__pics
    {
        padding: 20px 0px;
    }
}

/* SMALL SCREEN END  */



/* END WALKS SECTION HERE  */


/* START TOUR SECTION HERE  */
.tour  
{
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(to right bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%),url('./../images/cuts.jpg');
    background-size: cover;
    background-attachment: fixed;
}

.tour .container
{
    display: flex;
    align-items: center;
    justify-content: center;

}



.tour a 
{
    padding: 10px 25px;
    background-color: var(--black-color);
    color: var(--white-color);
    border-radius: 15px;
    text-decoration: none;
    font-size: 20px;
    font-style: italic;
    transition: all 0.3s ease-in-out;
}

.tour a:hover 
{
    opacity: 0.5;
}


/* SMALL SCREEN START  */
@media(max-width:540px)
{
    .tour 
    {
        background-attachment:local;
    }
}

/* END SMALL SCREEN  */





/* END TOUR SECTION HERE  */

/* START CUT SECTION HERE  */
.cut 
{
    width: 100% ;
    height: 650px;
    background-image: url('../images/hair1.jpg');
    background-size: cover;

}

.cut .container
{
    display: flex;
    align-items: center;
    justify-content: center;
}

.cut__content
{
    color: var(--white-color);
    font-size: 30px;
    transition: all 0.3s ease-in-out;
    animation-name: cuts;
    animation-duration: 2s;
    animation-iteration-count: infinite;

}


@keyframes cuts {
    0% 
    {
        transform: scale(1.1);
    }

  
    25%
    {
        transform: scale(1.3);
    }

    50%
    {
         transform: scale(1.4);  
    }

    100%
    {
        transform: scale(1.6);
    }

}




/* END CUT SECTION HERE  */


/* START TOWELS SECTION HERE  */
.towels 
{
    width: 100%;
    height: 650px ;
    background-image: url('https://images.pexels.com/photos/20405689/pexels-photo-20405689.jpeg');
    background-size: cover;
}

.towels .container
{
    display: flex;
    align-items: center;
    justify-content: center;
}

.towels .cut__content
{
    color: #FF0000;
}



/* END TOWELS SECTION HERE  */












/* START CONTENT SECTION HERE  */
.content 
{
    width: 100%;
    height: 450px;
    text-align: center;
    background-color: var(--white-color);
    position: sticky;
    color: var(--black-color);
}
.content .container
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


.content h3
{   
    font-size: 30px;
    margin: 30px 0px;
    font-weight: 900;
}
.content p
{
    margin: 30px 0px;
    font-size: 18px;
    letter-spacing: 3px;
}


/* START SMALL SCREEN HERE */
@media(max-width:540px)
{
    .content
    {
        min-height: 950px;
    }
}

/* END SMALL SCREEN HERE  */

/* END CONTENT SECTION HERE  */

/* START THREADING SECTION HERE  */
.threading
{
    width: 100%;
    height: 650px;
    background-image: linear-gradient(to right bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%)  ,url('https://images.pexels.com/photos/5177995/pexels-photo-5177995.jpeg');
    background-size: cover;


}

.threading .container
{
    display: flex;
    align-items: center;
    justify-content: center;
}

.threading h2
{
    font-size: 65px;
    color: var(--white-color);

}

/* END THREADING SECTION HERE  */





/* START WAX SECTION HERE  */

.wax
{  width: 100%;
    height: 650px;
    background-image: linear-gradient(to right bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%)  ,url('https://images.pexels.com/photos/5563665/pexels-photo-5563665.jpeg');
    background-size: cover;
    
}


.wax .container
{
    display: flex;
    align-items: center;
    justify-content: center;   
}


.wax h2 
{
     font-size: 65px;
    color: var(--white-color);    
}

/* END WAX SECTION HERE  */



/* START SkinCare SECTION HERE  */

.skincare
{  width: 100%;
    height: 650px;
    background-image: linear-gradient(to right bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%)  ,url('https://images.pexels.com/photos/16131208/pexels-photo-16131208.jpeg');
    background-size: cover;
    
}


.skincare .container
{
    display: flex;
    align-items: center;
    justify-content: center;   
}


.skincare h2 
{
     font-size: 65px;
    color: #FF0000;    
}


/* SMALL SCREEN HERE  */

@media(max-width:540px)
{
    .skincare
{  width: 100%;
    height: 650px;
    background-image: linear-gradient(to right bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%)  ,url('https://images.pexels.com/photos/31403898/pexels-photo-31403898.jpeg');
    background-size: cover;
    
}   
}
/* END SMALL SCREEN HERE  */
/* END SkinCare SECTION HERE  */













/* START HAIR CONSULTATION SECTION HERE */
.hair__con
{
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(to right bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%),url('https://images.pexels.com/photos/3993444/pexels-photo-3993444.jpeg');
    background-size: cover;

}
.hair__con .container
{
    display: flex;
    align-items: center;
    justify-content: center;
}


.hair__con a 
{
      margin: 20px 0px;
     padding: 15px 25px;
    color: var(--white-color);
    background-color: var(--black-color);
    border: none;
    outline: none;
    border-radius: 15px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.6s ease-in-out;
}
.hair__con a:hover 
{
    color: var(--black-color);
    background-color: var(--white-color);
}



/* END HAIR CONSULTATION SECTION  HERE  */








/* START HOURS SECTION HERE  */
.hours
{
    padding: 40px 0px ;
    background-color: var(--black-color);
    color: var(--white-color);
    text-align: center;

}
.hours .hours__title
{
     padding: 40px 0px;
    /* background-color: var(--white-color); */
    color: var(--white-color);
    font-style: italic;
    text-align: center;
    position: relative;
    font-size: 23px;
    letter-spacing: 2px;
}

.hours .hours__title::after
{
      content: "";
    width: 80px;
    height: 2px;
    background-color: var(--white-color);
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
}


.hours .hours__title i 
{
    color: var(--white-color);
}


.hours .container
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


.hours__content 
{
    padding-top: 15px;
    margin-bottom: 40px;
    
}

.hours__content .hours__content__days 
{
    display: inline-block;
    padding: 0px 30px;
}


.hours__content__days__time  
{
    color: #FF0000;
      display: inline-block;
    padding: 0px 30px;
}


/* SMALL SCREENS START   */

@media(max-width:540px)
{
  .hours__content__days 
  {
    margin: 15px 0px;
  }


  .hours__content .hours__content__days 
{
    display: inline-block;
    padding: 0px 10px;
}


}

/* SMALL SCREENS END  */




/* END HOURS SECTION HERE  */


/* START LOCATION HERE  */
.location
{
     padding: 60px 0px ;
    background-color: var(--black-color);
    color: var(--white-color);
    text-align: center;
}

.location h3 
{
       padding: 40px 0px;
    /* background-color: var(--white-color); */
    color: var(--white-color);
    font-style: italic;
    text-align: center;
    position: relative;
    font-size: 23px;
    letter-spacing: 2px;
}

.location h3::after
{
    content: "";
    width: 80px;
    height: 2px;
    background-color: var(--white-color);
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
}


.location .container
{
    display: flex;
    align-items: center;
    justify-content: center;

}

.location iframe 
{
    margin: 20px 0px;

}
/* END LOCATION HERE  */


/* START CONTACT US  HERE  */
.contact-us
{
    padding: 40px 0px ;
    background-color: var(--black-color);
    color: var(--white-color);
    text-align: center;
}

.contact-us h3 
{
      padding: 60px 0px;
    /* background-color: var(--white-color); */
    color: var(--white-color);
    font-style: italic;
    text-align: center;
    position: relative;
    font-size: 23px;
    letter-spacing: 2px;
}


.contact-us h3::after
{
     content: "";
    width: 80px;
    height: 2px;
    background-color: var(--white-color);
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%); 
}

.contact-us .container
{
    display: flex;
    align-items: center;
    justify-content: center;
}



.contact-us ul 
{
    list-style: none;
    margin: 20px 0px;
    transition: all 0.5s ease-in-out;
}


.contact-us ul li 
{
    display: inline-block;
    padding: 15px 40px;
    transform: scale(1);

}
.contact-us ul li:hover 
{

    transform: scale(1.1);

}


.contact-us ul li a 
{
    text-decoration: none;
    font-size: 23px;

}

.contact-us ul li:nth-child(3) a
{
    color: #feda75;
   
}

.contact-us ul li:nth-child(2) a
{
    color: #075e54;
   
}

.contact-us ul li:nth-child(1) a
{
    color: #FFFFFF;
   
}


@media(max-width:540px)
{
    .contact-us ul li 
    {
        display: block;
    }
}



/* END CONTACT US   HERE */

/* START PAYMENT SECTION HERE  */
.payment
{
    padding: 40px 0px;
    background-color: var(--black-color);
    color: var(--white-color);
}


.payment .container 
{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}




.payment__content__1
{
    color: rgb(255, 255, 255);
    font-size: 40px;
}


.payment__content__2
{
    /* color: #4285F4; */
    color: #FF0000;
    font-size: 40px;
}


.payment__content__3
{
    color: #00457C;
    /* color: #FF0000; */
    font-size: 40px;
}



.payment__content__4
{
    color: #00D54B ;
    font-size: 40px;
}

.payment__content__5
{
    color: #1A1F71 ;
    font-size: 40px;
}


/* #1A1F71 */

.payment__content__6
{
    color: #F79E1B;
    font-size: 40px;
}


/* START SMALL SCREEN HERE  */
@media(max-width:540px)
{
    .payment .container
    {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .payment__content__1 , .payment__content__2 , .payment__content__3 , .payment__content__4 , .payment__content__5 , .payment__content__6
    {
        margin: 10px 0px;
    }
}


/* END SMALL SCREEN HERE  */


/* START PAYMENT SECTION 2 */

.payment__2
{
    padding: 30px 0px;
    background-color: var(--black-color);
}
.carousel
{
    margin: 100px auto;
    width: 90%;
    border: 5px solid  transparent;
  
    display: flex;
    overflow-x: auto;
    /* gap: 1em; */
    transition: all 0s ease-out;
}
.carousel::-webkit-scrollbar
{
    display: none;

}

.group
{
    display: flex;
    /* flex-direction: column; */
    align-items: center;
    justify-content: center;
    gap: 1em;
    animation: spin 10s infinite linear;
    padding-right: 1em;

}

.card 
{
    flex: 0 0 5em;
    height: 5em;
    padding: 1em;
    background: transparent;
    font-size: 3rem;
    border-radius: .2em;
    text-align: center;
    align-content: center;

    
}


@keyframes spin{

    from{
        translate: 0%;

    }

    to 
    {
        translate: -100%;
    }

}





/* END PAYMENT SECTION 2  */




/* END PAYMENT SECTION HERE  */






/* START FOOTER  HERE  */
footer
{
    padding: 15px 0px;
    background-color: var(--black-color);
    color: var(--white-color);
}

footer .container
{
    display: flex;
    align-items: center;
    justify-content: center;

}



/* END FOOTER HERE  */



/*  START LOADING HERE  */
.loading
{
    position: fixed;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    /* background-color: var(--black-color); */
        background-image: linear-gradient(to right bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%),url('https://images.pexels.com/photos/3998414/pexels-photo-3998414.jpeg');
        background-size: cover;
        color: var(--white-color);
    transition: all 0.3s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99;
}


.loading.active 
{
    transform: translateY(100%) !important;
}






/* SMALL SCREEN START  */
@media(max-width:540px)
{
        .loading
{
    position: fixed;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    /* background-color: var(--black-color); */
        background-image: linear-gradient(to right bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%),url('https://images.pexels.com/photos/1813346/pexels-photo-1813346.jpeg');
        background-size: cover;
        color: var(--white-color);
    transition: all 0.3s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99;
}
}

/* END SMALL SCREEN  */

/* START NEW LOADER HERE  */

@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}
 
.spinner::before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  right: 50%;
  width: 60px;
  height: 60px;
  margin-top: -12px;
  margin-left: -12px;
  border-radius: 50%;
  border-top: 4px solid var(--white-color);
  border-right: 4px solid transparent;
  animation: spinner 600ms linear infinite;
}


/* END NEW LOADER HERE  */








/* 
.loader{
    display: block;
    position: relative;
    height: 32px;
    width: 200px;
    background: #fff;
    border:2px solid #fff;
    color: var(--black-color);
    overflow: hidden;
  }
  .loader::before{
    content: '';
    background: var(--black-color);
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    animation: loading 10s linear infinite;
  }
  .loader:after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 24px;
    line-height: 32px;
    /* color: rgb(0,255,255); */
    /* color: var(--white-color);
    mix-blend-mode: difference;
    animation: percentage 10s linear infinite;
  }
   */
  /* @keyframes loading {
    0% { width: 0 }
    100% { width: 100% }
  }
  @keyframes percentage {
    0% { content: "0%"}
    5% { content: "5%"}
    10% { content: "10%"}
    20% { content: "20%"}
    30% { content: "30%"}
    40% { content: "40%"}
    50% { content: "50%"}
    60% { content: "60%"}
    70% { content: "70%"}
    80% { content: "80%"}
    90% { content: "90%"}
    95% { content: "95%"}
    96% { content: "96%"}
    97% { content: "97%"}
    98% { content: "98%"}
    99% { content: "99%"}
    100% { content: "100%"}
  } */ 
  
  

/* END LOADING PAGE HERE  */

/* START SCROLLBAR BTN HERE  */
.scroll-btn
{
    width: 42px ;
    height: 45px ;
    position: fixed;
    right: 30px;
    bottom: 10px ;
    z-index: 999 ;
    background-color: var(--white-color);
    text-align: center;
    line-height: 45px;
    border-radius: 6px;
    opacity:0;
    transition: all 0.3s ease-in-out;
}

.scroll-btn.red 
{
    color: var(--white-color) ;
    background-color: #FF0000;
      transition: all 0.3s ease-in-out;
}
.scroll-btn.red a 
{
    color: var(--white-color) !important;
}

.scroll-btn.black 
{
    color: var(--white-color);
    background-color: var(--black-color);
      transition: all 0.3s ease-in-out;
}
.scroll-btn.black a 
{
        color: var(--white-color) !important;
}   


.scroll-btn.white 
{
     color: var(--black-color);
    background-color: var(--white-color);
      transition: all 0.3s ease-in-out;

}

.scroll-btn.white a 
{
    color: var(--black-color);
}



.scroll-btn a
{
    text-decoration: none;
    color: var(--black-color) !important;
    font-size: 20px;

}



.scroll-btn span 
{
    transition: all 0.5s ease-in-out;
}




/* .scroll-btn:hover
{
    background-color: var(--black-color);

}

.scroll-btn a:hover  
{
    color: var(--white-color) !important;
} */
.show-bb
{
    bottom: 70px !important;
    opacity: 1 !important;
}




/* END SCROLLBAR BTN  HERE  */


/* START HOUSE__call-btn Section here  */

.house__call-btn
{
    width: 42px ;
    height: 45px ;
    position: fixed;
    left: 30px;
    bottom: 10px ;
    z-index: 999 ;
    background-color: var(--white-color);
    text-align: center;
    line-height: 45px;
    border-radius: 6px;
    opacity:0;
    transition: all 0.3s ease-in-out;
}

.house__call-btn.red 
{
    color: var(--white-color) ;
    background-color: #FF0000;
      transition: all 0.3s ease-in-out;
}
.house__call-btn.red a 
{
    color: var(--white-color) !important;
}

.house__call-btn.black 
{
    color: var(--white-color);
    background-color: var(--black-color);
      transition: all 0.3s ease-in-out;
}
.house__call-btn.black a 
{
        color: var(--white-color) !important;
}   


.house__call-btn.white 
{
     color: var(--black-color);
    background-color: var(--white-color);
      transition: all 0.3s ease-in-out;

}

.house__call-btn.white a 
{
    color: var(--black-color);
}



.house__call-btn a
{
    text-decoration: none;
    color: var(--black-color) !important;
    font-size: 20px;

}



.house__call-btn span 
{
    transition: all 0.5s ease-in-out;
}




/* .scroll-btn:hover
{
    background-color: var(--black-color);

}

.scroll-btn a:hover  
{
    color: var(--white-color) !important;
} */
.show-bb
{
    bottom: 70px !important;
    opacity: 1 !important;
}




/* End HOUSE__call-btn Section here  */


/* START GALLERY  POPUPS  SECTION HERE  */
.gallery 
{
   
    position: fixed;
    right: 0px;
    left: 0px;
    top: 200%;
    bottom: 0px;
    background-color: var(--white-color);
    color: var(--black-color);
    z-index: 2px !important;
    /* transform: translateY(-180%); */
    transition: all 2s ease-in-out;
    z-index: 1000;
}


.gallery.active 
{
       /* transform: translateY(0%) !important; */
       top: 0% !important;
}
.gallery .gallery__close 
{
    font-size: 23px;
    text-align: end;
    margin: 25px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.gallery .gallery__close:hover 
{
    opacity: 0.5;
}

.gallery .container
{
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; */
}


.gallery__image img
{
    max-width: 270px;
}




.gallery .gallery__content 
{
    margin: 10px 0px;
    text-align: center;
}


.gallery .gallery__content .gallery__content__icon
{
    font-size: 40px;
}


.gallery .gallery__content .gallery__content__text
{
    font-weight: 900;
    margin: 15px 0px;
}


.gallery .gallery__content a 
{
    text-decoration: none;
    margin: 10px 0px;
    padding: 10px 25px;
    background-color: var(--black-color);
    color: var(--white-color);
    
    transition: all 0.3s ease-in-out;

}

.gallery .gallery__content a:hover 
{
    opacity: 0.6;
}



/* START SMALL SCREEN HERE  */
@media(max-width:540px)
{

    .gallery .container
    {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* justify-content: center; */
    }

}



/* END SMALL SCREEN HERE  */


/* END GALLERY POPUPS SECTION HERE  */




/* START NEWS POPUPS HERE  */
.news 
{
    width: 100%;
    height: 60px ;
    background-color: var(--white-color);
    color: var(--black-color);
    position: fixed;
    bottom: 0px;
    right: 0px;
    left: 0px;
    font-style: italic;
    transition: all 1s ease-in-out;
}


.news.active 
{
    opacity: 0;
    
}

.news.red 
{
    background-color: #FF0000;
    color: var(--white-color);
}

.news span.red
{
    background-color: var(--white-color) !important;
    color: #FF0000 !important;
}


.news .news__content 
{
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 100%;
}

.news .news__content span
{
    font-weight: 900;
    background-color: var(--black-color);
    color: var(--white-color);
    padding: 10px 25px;
    border-radius: 20px;
    font-size: 18px;

}


/* END NEWS POPUPS HERE */



/* START HOUSE CALL POPUP SECTION HERE  */

.house__call
{
     position: fixed;
    right: 0px;
    left: 0px;
    top: 200%;
    bottom: 0px;
    background-color: var(--white-color);
    color: var(--black-color);
    z-index: 2px !important;
    overflow-y: auto;
    transition: all 1s ease-in-out;
    /* padding: 20px 0px; */
    z-index: 1000;    
    text-align: center;
}

.house__call.active 
{
    top: 0px;
}

.house__call .container
{
    display: flex;
    /* align-items: center; */
    justify-content: center;
}

.house__call .house__call__close
{
    text-align: right;
    margin: 20px;
    color: #FF0000;
    font-size: 23px;
    transition: all 0.3s ease-in-out;

}
.house__call .house__call__close:hover 
{
    opacity: 0.6;
}

.house__call .house__call__content__text
{
    text-align: center;
    margin: 15px 0px;
}
.house__call .house__call__content__images
{
    margin: 15px 0px;
    border: 5px solid #FF0000;
}

.house__call img 
{
    max-width: 350px;
    padding: 2px;
}

.house__call p 
{
    margin: 40px 0px;
    font-size: 25px;
}


.house__call a 
{
     text-decoration: none;
    margin: 20px 0px;
    padding: 10px 25px;
    background-color: #FF0000;
    color: var(--white-color);
    
    transition: all 0.3s ease-in-out;   
}

.house__call a:hover 
{
    color: var(--white-color);
    background-color: var(--black-color);
}



/* END HOUSE CALL POPUP SECTION HERE  */


/* START CUT__TYPE SECTION HERE  */
.cut__type 
{
     position: fixed;
    right: 0px;
    left: 0px;
    top: 0px;
    bottom: 100%;
    background-color: var(--white-color);
    color: var(--black-color);
    z-index: 2px !important;
    overflow-y: auto;
    transition: all 1s ease-in-out;
    /* padding: 20px 0px; */
    z-index: 1000;    
}


.cut__type.active 
{
    bottom: 0%;
}

.cut__type .cut__type__close
{
    text-align: right;
    margin: 5px;
    font-size: 23px;
    color: #FF0000;
    transition: all 0.5s ease-in-out;
}

.cut__type .container
{
    /* display: flex;
    align-items: center;
    justify-content: space-evenly; */

     display: grid;
  grid-template-columns: auto auto auto;
}

.cut__type__content
{
    text-align: center;
    margin: 20px 0px;
}
.cut__type__content .cut__type__images
{
    margin: 10px;
}
.cut__type__content .cut__type__images img
{
    max-width: 250px;
    border: 3px solid var(--black-color);
}
.cut__type__rates
{
    text-align: center;
    margin: 2px 0px;
}



.cut__type__rates ul 
{
    list-style: none;
    margin: 5px 0px;
  
}

.cut__type__rates ul li 
{
    display: inline-block;
    padding: 0px 10px;
    color: #FFFF00;
}





/* SMALL SCREEN HERE   */
@media(max-width:540px)
{
    .cut__type .container
    {

        display: flex;
        flex-direction: column;
        align-items: center;
        /* justify-content: center; */
    }
}

/* END SMALL SCREEN HERE  */


/* END CUT__TYPE SECTION HERE  */
























/* START BREAD__TYPE SECTION HERE  */

/* START CUT__TYPE SECTION HERE  */
.beard__type 
{
     position: fixed;
    right: 0px;
    left: 0px;
    top: 100%;
    bottom: 0px;
    background-color: var(--white-color);
    color: var(--black-color);
    z-index: 2px !important;
    overflow-y: auto;
    transition: all 1s ease-in-out;
    /* padding: 20px 0px; */
    z-index: 1000;    
}


.beard__type.active 
{
    top: 0%;
}

.beard__type .beard__type__close
{
    text-align: right;
    margin: 5px;
    font-size: 23px;
    color: #FF0000;
    transition: all 0.5s ease-in-out;
}



.beard__type__content
{
    text-align: center;
    margin: 20px 0px;
}

.beard__type__content img 
{
    max-width: 450px;
}




/* SMALL SCREEN HERE   */
@media(max-width:540px)
{
    .beard__type .container
    {

        display: flex;
        flex-direction: column;
        align-items: center;
        /* justify-content: center; */
    }

    .beard__type__content img 
    {
        max-width: 250px;
    }
}

/* END SMALL SCREEN HERE  */


/* END CUT__TYPE SECTION HERE  */





/* END BEARD__TYPE SECTION HERE  */































/* START GALLERY__towel  POPUPS  SECTION HERE  */
.gallery__towel
{
   
    position: fixed;
    right: 0px;
    left: 0px;
    top: 200%;
    bottom: 0px;
    background-color: var(--white-color);
    color: var(--black-color);
    z-index: 2px !important;
    /* transform: translateY(-180%); */
    transition: all 2s ease-in-out;
    z-index: 1000;
}


.gallery__towel.active 
{
       /* transform: translateY(0%) !important; */
       top: 0% !important;
}
.gallery__towel .gallery__close 
{
    font-size: 23px;
    text-align: end;
    margin: 25px;
    cursor: pointer;
    color: #FF0000;
    transition: all 0.3s ease-in-out;
}

.gallery__towel .gallery__close:hover 
{
    opacity: 0.5;
}

.gallery__towel .container
{
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; */
}


.gallery__image img
{
    max-width: 270px;
}




.gallery__towel .gallery__content 
{
    margin: 10px 0px;
    text-align: center;
}


.gallery__towel .gallery__content .gallery__content__icon
{
    font-size: 40px;
    color: #FF0000;
}


.gallery__towel .gallery__content .gallery__content__text
{
    font-weight: 900;
    margin: 15px 0px;
}


.gallery__towel .gallery__content a 
{
    text-decoration: none;
    margin: 10px 0px;
    padding: 10px 25px;
    background-color: #FF0000;
    color: var(--white-color);
    
    transition: all 0.3s ease-in-out;

}

.gallery__towel .gallery__content a:hover 
{
    opacity: 0.6;
}



/* START SMALL SCREEN HERE  */
@media(max-width:540px)
{

    .gallery__towel .container
    {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* justify-content: center; */
    }

}



/* END SMALL SCREEN HERE  */


/* END GALLERY__towel POPUPS SECTION HERE  */








/* START REVIEW__POPUPS SECTION HERE  */
.review__popups 
{
    width:360px;
    max-height: 350px;
    margin: 120px auto;
    position: fixed;
    left: 100%;
    top: 0px;
    right: 0px;
    bottom: 0px;
    background-color: var(--black-color);
    color: var(--white-color);
    padding: 10px 0px;
    border: none;
    border-radius: 15px;

    transition: all 0.5s ease-in-out;

}

.review__popups.active 
{
    left: 0%;
    
}
.review__popups .review__popups__close
{
    text-align: right;
    margin: 10px;
    font-size: 23px;
    cursor: pointer;
}


.review__popups .container 
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}





.review__popups  .review__popups__content 
{
    margin: 15px 0px;
}


.review__popups .review__popups__icons ul
{
    list-style: none;
    text-align: center;
}


.review__popups .review__popups__icons ul li 
{
    display: inline-block;
    margin: 10px 0px;
    
}
.review__popups .review__popups__icons ul li a
{
    text-decoration: none;
    cursor: pointer;
}

.review__popups .review__popups__icons ul li a img 
{
    max-width: 50%;
    border-radius:50%;
}



/* SMALL SCREEN HERE  */
@media(max-width:540px)
{

    .review__popups 
    {
        max-height: 350px;
    }
    .review__popups .container
    {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
}


/* END SMALL SCREEN HERE  */

/* END REVIEW__POPUPS SECTION HERE  */


/* START POPUPS SECTION HERE  */

/*  START ENTERTAINMENT SECTION  HERE */

.entertainment
{
     position: fixed;
    right: 0px;
    left: 0px;
    top: 100%;
    bottom: 0px;
    background-image: linear-gradient(to right bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%)  ,url('https://images.pexels.com/photos/1190297/pexels-photo-1190297.jpeg');
    background-size: cover;
    color: var(--white-color);
    z-index: 2px !important;
    overflow-y: hidden;
    transition: all 1s ease-in-out;
    /* padding: 20px 0px; */
    z-index: 1000; 

}


.entertainment.active 
{
    top: 0%;
}
.entertainment .entertainment__close
{
    text-align: right;
    margin: 20px;
    font-size: 23px;
    color: #FF0000;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}




.entertainment .entertainment__title
{
      padding: 60px 0px;
    /* background-color: var(--white-color); */
    color: var(--white-color);
    font-style: italic;
    text-align: center;
    position: relative;
    font-size: 23px;
    letter-spacing: 2px;
}

.entertainment .entertainment__title::after
{
      content: "";
    width: 80px;
    height: 2px;
    background-color: #FF0000;
    position: absolute;
    left: 50%;
    bottom: 40px;
    transform: translateX(-50%); 
}


.entertainment .container
{
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; */
}

.entertainment .entertainment__text
{
    margin: 20px 0px;
}


.entertainment .entertainment__text span 
{
    color: #FF0000;
    margin: 0px 10px;
}
/* END   ENTERTAINMENT SECTION  HERE */












/* START CONNECTIONS POPUPS HERE  */

/* START OFFLINE SECTION HERE  */
.offline
{
    position: fixed;
    top: -100% ;
    left: 0px ;
    right: 0px;
    background-color: var(--black-color);
    color: var(--white-color);
    font-family: var(--font-site);
    width: 100%;
    border-radius: 15px;
    text-align: center;
    transition: all 0.5s  ease-in-out;
    z-index: 99999999;
}

.offline.active
{
    top: 0% !important;
}



.offline .offline__close
{
    text-align: right;
    margin: 10px;
    font-size: 23px;
    color: var(--color);
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.offline .offline__close:hover 
{
    opacity: 0.4;
}





.offline p 
{
    margin: 10px 0px;
    
    
}




/* start small screen here  */
@media(max-width:540px)
{
    .offline p 
    {
        color: var(--color);
    }
}



/* end small screen here */

/* END OFFLINE SECTION HERE  */




/* START ONLINE SECTION HERE  */

.online
{
    position: fixed;
    top: -100% ;
    left: 0px ;
    right: 0px;
    background-color: var(--black-color);
    color: var(--white-color);
    font-family: var(--font-site);
    width: 100%;
    border-radius: 15px;
    text-align: center;
    transition: all 0.5s  ease-in-out;
    z-index: 9999999999999999;
}

.online.active
{
    top: 0% !important;
}



.online .online__close
{
    text-align: right;
    margin: 10px;
    font-size: 23px;
    color: var(--color);
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.online .online__close:hover 
{
    opacity: 0.4;
}





.online p 
{
    margin: 10px 0px;
    
    
}




/* start small screen here  */
@media(max-width:540px)
{
    .online p 
    {
        color: var(--color);
    }
}



/* end small screen here */




/* END ONLINE SECTION HERE  */























/* END CONNECTIONS POPUPS HERE  */









.discount__btn
{

     position: fixed;
    top: 200px;
    left: -100%;
    border-radius: 15px;
    padding: 10px 25px;
    background-color: #FF0000;
    color: var(--white-color);
    /* font-family: var(--font-site); */
    /* font-size: 18px; */
    border: none;
    outline: none;
    transform: rotate(90deg);
    transition: all 1s ease-in-out;
    cursor: pointer;
}


.discount__btn.active 
{
    left: 0px;
}



/* END DISCOUNT BTN HERE  */




/* START DISCOUNT CONTENT  SECTION HERE  */
.discount__content
{
     width: 350px;
    height:300px !important;
    background-color: var(--white-color);
    color: #FF0000;
    font-family: var(--font-site);
    margin: 120px auto;
    position: fixed;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    padding: 10px 25px;
    border-radius: 15px;
    font-style: italic;
    z-index: 99999;
    transform: translateY(330%);
    text-align: center;
    transition: all 1s ease-in-out;
}
.discount__content.active 
{
       transform: translateY(0%);
}
.discount__content .container
{
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; */
}


.discount__content .discount__content__close
{
    margin: 20px;
    text-align: right;

}
.discount__content__image img 
{
    max-width: 150px;
}

.discount__content__text p span
{
    color: var(--black-color);
    margin: 10px 0px !important;
}


/* END DISCOUNT CONTENT SECTION HERE  */




/* END POPUPS SECTION HERE  */

/* START PAGE 2 */
.header2
{
      width: 100%;
    height: 100vh;
     background-image: linear-gradient(to right bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%), url('https://images.pexels.com/photos/5650048/pexels-photo-5650048.jpeg');
    background-size: cover;
    background-attachment: fixed;
    font-family: var(--font-site);
}

.header2 span 
{
        color: #FF0000;
}

/* small screen here  */
@media(max-width:540px)
{
    .header2
    {
      width: 100%;
    height: 100vh;
     background-image: linear-gradient(to right bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%), url('https://images.pexels.com/photos/5650048/pexels-photo-5650048.jpeg') !important;
    background-size: cover;
    background-attachment: fixed;
    }

    .header2 span 
    {
        color: #FF0000;
    }
}


/* end small screen here  */

/* END PAGE 2 */