@font-face {
    font-family: 'Myriad Pro Light';
    font-style: normal;
    font-weight: normal;
    src: local('Myriad Pro Light'), url('/public/frontend_assets/font/MyriadPro-Light.woff') format('woff');
}

@font-face {
    font-family: 'Adelia normal';
    font-style: normal;
    font-weight: normal;
    src: local('Adelia normal'), url('/public/frontend_assets/font/adelia.ttf') format('truetype');
}

@media(min-width:768px){
    /*.first-fold {*/
    /*    min-height: 607px !important;*/
    /*}*/
    /*.first-fold .p_55.h-100.w-100{*/
    /*    min-height: 607px !important;*/
    /*}*/
}

.social_icons li img{
            transform:scale(1);
            transition:all 0.2s ease;
        }
        .social_icons li:hover img{
            transform:scale(1.3);
        }

@media(max-width:767px){
    .first-fold {
        height:100%;
        min-height: 607px !important;
    }
    .first-fold .p_55.h-100.w-100{
        height:100%;
        min-height: 607px !important;
    }
    body,html{
        overflow-x:hidden !important;
        overflow-y:auto !important;
    }
    .gallery-banner{
        min-height:750px !important;
    }
    .gallery-banner .p_55.w-100.h-100{
        min-height:750px !important;bo
    }
    .gallery-banner .p_55.w-100.h-100 .card{
        min-height:750px !important;
    }
     .gallery-banner .p_55.w-100.h-100 .card #groom-section{
        min-height:540px !important;
    }
      .gallery-banner .p_55.w-100.h-100 .card #groom-section .h-100.text-center{
        min-height:540px !important;
    }
}

*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Myriad Pro Light", sans-serif;
}

.ff_myriad {
    font-family: "Myriad Pro Light", sans-serif !important;
}

.ff_adelia {
    font-family: "Adelia normal", sans-serif !important;
}

html,
body {
    font-size: 15px;
    scroll-behavior: smooth;
    overflow-x: hidden !important;
    max-width: 100% !important;
}



footer.d-block~html,
body {
    overflow-y: auto;
}

a {
    text-decoration: none;
    color: inherit;
}

.fs_8 {
    font-size: 8px;
}

.fs_9 {
    font-size: 9px;
}

.fs_10 {
    font-size: 10px;
}

.fs_11 {
    font-size: 11px;
}

.fs_12 {
    font-size: 12px;
}

.fs_13 {
    font-size: 13px;
}

.fs_14 {
    font-size: 14px;
}

.fs_15 {
    font-size: 15px;
}

.fs_16 {
    font-size: 16px;
}

.fs_17 {
    font-size: 17px;
}

.fs_18 {
    font-size: 18px;
}

.fs_19 {
    font-size: 19px;
}

.fs_20 {
    font-size: 20px;
}

.fs_21 {
    font-size: 21px;
}

.fs_22 {
    font-size: 22px;
}

.fs_23 {
    font-size: 23px;
}

.fs_24 {
    font-size: 24px;
}

.fs_25 {
    font-size: 25px;
}

.fs_26 {
    font-size: 26px;
}

.fs_27 {
    font-size: 27px;
}

.fs_28 {
    font-size: 28px;
}

.fs_29 {
    font-size: 29px;
}

.fs_30 {
    font-size: 30px;
}

.fs_31 {
    font-size: 31px;
}

.fs_32 {
    font-size: 32px;
}

.fs_33 {
    font-size: 33px;
}

.fs_34 {
    font-size: 34px;
}

.fs_35 {
    font-size: 35px;
}

.fs_36 {
    font-size: 36px;
}

.fs_37 {
    font-size: 37px;
}

.fs_38 {
    font-size: 38px;
}

.fs_39 {
    font-size: 39px;
}

.fs_40 {
    font-size: 40px;
}

.fs_41 {
    font-size: 41px;
}

.fs_42 {
    font-size: 42px;
}

.fs_43 {
    font-size: 43px;
}

.fs_44 {
    font-size: 44px;
}

.fs_45 {
    font-size: 45px;
}

.fs_46 {
    font-size: 46px;
}

.fs_47 {
    font-size: 47px;
}

.fs_48 {
    font-size: 48px;
}

.fs_49 {
    font-size: 49px;
}

.fs_50 {
    font-size: 50px;
}

.fs_51 {
    font-size: 51px;
}

.fs_52 {
    font-size: 52px;
}

.fs_53 {
    font-size: 53px;
}

.fs_54 {
    font-size: 54px;
}

.fs_55 {
    font-size: 55px;
}

.fs_56 {
    font-size: 56px;
}

.fs_57 {
    font-size: 57px;
}

.fs_58 {
    font-size: 58px;
}

.fs_59 {
    font-size: 59px;
}

.fs_60 {
    font-size: 60px;
}

.fs_61 {
    font-size: 61px;
}

.fs_62 {
    font-size: 62px;
}

.fs_63 {
    font-size: 63px;
}

.fs_64 {
    font-size: 64px;
}

.fs_65 {
    font-size: 65px;
}

.fs_66 {
    font-size: 66px;
}

.fs_67 {
    font-size: 67px;
}

.fs_68 {
    font-size: 68px;
}

.fs_69 {
    font-size: 69px;
}

.fs_70 {
    font-size: 70px;
}

.fs_71 {
    font-size: 71px;
}

.fs_72 {
    font-size: 72px;
}

.fs_73 {
    font-size: 73px;
}

.fs_74 {
    font-size: 74px;
}

.fs_75 {
    font-size: 75px;
}

.fs_76 {
    font-size: 76px;
}

.fs_77 {
    font-size: 77px;
}

.fs_78 {
    font-size: 78px;
}

.fs_79 {
    font-size: 79px;
}

.fs_80 {
    font-size: 80px;
}

.fs_81 {
    font-size: 81px;
}

.fs_82 {
    font-size: 82px;
}

.fs_83 {
    font-size: 83px;
}

.fs_84 {
    font-size: 84px;
}

.fs_85 {
    font-size: 85px;
}

.fs_86 {
    font-size: 86px;
}

.fs_87 {
    font-size: 87px;
}

.fs_88 {
    font-size: 88px;
}

.fs_89 {
    font-size: 89px;
}

.fs_90 {
    font-size: 90px;
}

.fw_100 {
    font-weight: 100;
}

.fw_200 {
    font-weight: 200;
}

.fw_300 {
    font-weight: 300;
}

.fw_400 {
    font-weight: 400;
}

.fw_500 {
    font-weight: 500;
}

.fw_600 {
    font-weight: 600;
}

.fw_700 {
    font-weight: 700;
}

.fw_800 {
    font-weight: 800;
}

.fw_900 {
    font-weight: 900;
}

.bg_light {
    background: #f1f1f1;
}

.bg_theme {
    background: #970411;
}

.text_theme {
    color: #970411;
}

.text_light {
    color: #909091;
}

.text_secondary {
    color: #ccc;
}

.p_55 {
    padding: 30px 55px 30px 55px;
    /*by default only 55px tha  */
}

.team-banner .p_55 {
    padding: 15px 55px 15px 55px !important;
    /*by default only 55px tha  */
}

.pt_150 {
    padding-top: 150px;
}

.ff_lato {
    font-family: "Lato", sans-serif !important;
}


@media(min-width:768px){
    .team{
   padding-right: 6rem !important;
    padding-left: 6rem !important 
}
    .about{
padding-right: 8rem !important;
    padding-left: 3rem !important;
    
}
}


.about p{
color: #58595b;
font-family: "Lato", sans-serif !important;
text-align: justify;
}


.text_light_blue {
    color: #58595b;
}

.text_grey {
    color: #909091;
}

.ps_100 {
    padding-left: 100px !important;
}

.ps_150 {
    padding-left: 150px !important;
}

.text_light_grey {
    color: #bcbcbd;
}

@media(min-width:768px) {

    html,
    body {
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: hidden;

    }

    #services .container-fluid {
        --bs-gutter-x: 8rem;
    }
}

#book-an-appointment {
    background: #970411 !important;
}

/* banner start  */
.first-fold {
    background: url(../images/khawar-test.png) no-repeat;
    background-size: cover;
    background-position: top;
    position: relative;
    height:100%;
    min-height: 607px !important;
    z-index: 1;
}

.first-fold .p_55.h-100.w-100{
    height:100%;
    min-height: 607px !important;
}

.team-banner {
    /* background-color: #000; */
    background: url(../images/team-banner.png) no-repeat !important;
    background-size: cover !important;
    background-position: center !important;
    position: relative !important;
}



/* .bg_theme.position-relative.rounded-circle::before,
.bg_theme.position-relative.rounded-circle::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 50%;
    visibility: hidden;
    z-index: 5;
} */

/* .bg_theme.position-relative.rounded-circle .box-content {
    z-index: 10;
} */
/* 
.bg_theme.position-relative.rounded-circle .position-relative:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    z-index: 2;
    background-color: #fff;
    transform: translateX(-50%);
}

.bg_theme.position-relative.rounded-circle.show-groom::after {
    visibility: visible;
    background: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.6)), url('../images/banner-side-img.png');
  
}

.bg_theme.position-relative.rounded-circle.show-bride::before {
    visibility: visible;
    background: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.6)), url('../images/banner.png');
  
}

.bg_theme.position-relative.rounded-circle .row .col-6 {
    padding: 0;
    height: 445px;
    position: relative;
}

.bg_theme.position-relative.rounded-circle .row .col-6:first-child:before,
.bg_theme.position-relative.rounded-circle .row .col-6:last-child:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bg_theme.position-relative.rounded-circle .row .col-6:first-child:before {
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
    background: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.6)), url(../images/banner-side-img.png);
}

.bg_theme.position-relative.rounded-circle .row .col-6:last-child:before {
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    background: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.6)), url(../images/banner.png);
} */

/* .first-fold .bg_theme.border_radius_left_27 {
    background: #43464b7b;
} */


/* .first-fold::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0; 
    left: 0; 
    background-image: url(../images/shape.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.first-fold::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0; 
    background-image: url(../images/shape-overlay.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
} */

.circle-container {
    position: relative;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    overflow: hidden;
}

.half-circle {
    width: 50%;
    height: 100%;
    position: absolute;
    transition: all 0.5s ease;
}

.men {
    left: 0;
    background: url('https://img.freepik.com/free-photo/handsome-bearded-guy-posing-against-white-wall_273609-20597.jpg?size=626&ext=jpg&ga=GA1.1.1141335507.1717977600&semt=sph') no-repeat center/cover;
}

.women {
    right: 0;
    background: url('https://img.freepik.com/free-photo/handsome-bearded-guy-posing-against-white-wall_273609-20597.jpg?size=626&ext=jpg&ga=GA1.1.1141335507.1717977600&semt=sph') no-repeat center/cover;
}

.half-circle::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.half-circle:hover::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: transparent;
}

.men .overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    /* top: 32%; */
    justify-content: end;
    align-items: center;
    color: white;
    font-size: 25px;
    z-index: 1;
    right: 5%;
    transition: all 0.5s ease;
}

@media (min-width: 768px) {
    .col-md-3-5 {
        flex: 0 0 auto;
        width: 29%;
    }
    .col-md-5-5 {
        flex: 0 0 auto;
        width: 46%;
    }
    .col-md-4-5 {
        flex: 0 0 auto;
        width: 37.46500%;
    }
    .col-md-8-5 {
        flex: 0 0 auto;
        width: 72%;
    }
    .col-md-6-5 {
        flex: 0 0 auto;
        width: 54.15%;
    }
    .col-md-2-5 {
        flex: 0 0 auto;
        width: 20%;
    }
}

.women .overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    /* top: 32%; */
    left: 5%;
    justify-content: start;
    align-items: center;
    color: white;
    font-size: 25px;
    z-index: 1;
    transition: all 0.5s ease;
}

/* .overlay:hover {
    top: 0%;
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 30px;
    z-index: 1;
    transition: all 0.5s ease;
} */

.overlay:hover{
    top: 0;
    left: 0;
    right: 0;
    transition: all 0.5s ease;
}

.overlay:hover a span{
    display:none;
}

.men .overlay:hover a {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    top: 0%;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 25px;
    z-index: 1;
    right: 0%;
    transition: all 0.5s ease;
}

.women .overlay:hover a {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    top: 0%;
    left: 0%;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 25px;
    z-index: 1;
    transition: all 0.5s ease;
}

.center-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background-color: white;
    z-index: 2;
}

.circle-container:hover .center-line {
    display: none;
}

.circle-container .half-circle:hover {
    width: 100%;
    border-radius: 50%;
}

.circle-container .half-circle:hover~.half-circle {
    display: none;
}

.circle-container .half-circle:hover .overlay {
    opacity: 1;
}

.half-circle.men:hover+.half-circle.women {
    opacity: 0;
}

/* Hover effect for the second half-circle */
.half-circle.women:hover+.half-circle.men {
    opacity: 0;
}

.border_radius_15 {
    border-radius: 15px;
}

.border_radius_left_27 {
    border-top-left-radius: 27px;
    border-bottom-left-radius: 27px;
}

nav .nav-item {
    padding-left: 10px;
}

.bg_nav_style {
    background: #970411;
    border-top-left-radius: 15px;
    border-bottom-right-radius: 15px;
    padding: 10px 45px 10px 20px;
}

/* banner end  */

/* finest haircuts section start  */
.finest-haircuts-section {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.finest-haircuts-section ul li span {
    position: relative;
    z-index: 1;
}

.finest-haircuts-section ul li span:before {
    content: '';
    position: absolute;
    background: #970411;
    /* width: 100%; */
    width: 255px;
    left: 0;
    right: 0;
    z-index: -1;
    height: 100%;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    color: #fff;
    padding: 15px 0;
}

.finest-haircuts-section::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 75%;
    left: 30%;
    background: url(../images/bg-shape.png) no-repeat;
    background-size: contain;
    background-position: left;
    z-index: -1;
}

/* finest haircuts section end  */

/* services section start  */
.services-section {
    position: relative;
    z-index: 1;
}

.services-section::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../images/bg-shape.png) no-repeat;
    background-size: cover;
    background-position: center;
    z-index: -1;
}

.lady-img {
    background: url(../images/lady.png) no-repeat;
    background-position: center;
    background-size: cover;
    height: 100px;
    position: relative;
}

.lady-img .box-content {
    position: absolute;
    /* left: 40px;
    right: 40px; */
    bottom: 10px;
    width: 100%;
    background: #b2b2b2;
    color: #fff;
    z-index: 9;
    transition: all .2s ease;
    -webkit-transition: all .2s ease;
}

/* services section end  */

/* service menu section start  */
.service-menu-section {
    position: relative;
    background:url('/public/frontend_assets/images/our-services.png') no-repeat;
    background-size:cover;
}

/*.service-menu-section::after {*/
/*    content: '';*/
/*    position: absolute;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    top: 0;*/
/*    left: -12%;*/
/*    background: url(../images/service-menu-bg.png) no-repeat;*/
/*    background-size: contain;*/
/*    background-position: center;*/
    /* z-index: 1 ; */
/*}*/

.service-menu-section .row .col-md-6:nth-child(2) .bg-black {
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

.service-menu-section div span {
    position: relative;
    z-index: 1;
    color: #fff;
    padding: 10px 10px 0px 10px;
}

.service-menu-section div span:before {
    content: '';
    position: absolute;
    background: #970411;
    /* width: 100%; */
    width: 100%;
    left: 0;
    border-radius: 5px;
    right: 0;
    z-index: -1;
    height: 100%;
    color: #fff;
    padding: 15px;
}

/* service menu section end  */

/* professional team section start  */
.get-more-services {
    background: #970411;
    padding: 10px;
    border-top-left-radius: 130px;
    border-top-right-radius: 130px;
    color: #fff;
    width: 143px;
    display: block;
    text-align: center;
    max-width: 100%;
    justify-content: center;
}

/* professional team section end  */

/* groom section start  */
.groom-section {
    background: url(../images/couple-shape.png) no-repeat;
    background-size: cover;
    background-position: center;
}

.groom-section .nav-pills .nav-item .nav-link.active {
    background: #970411;
    border: 2px solid #000;
    color: #fff;
}

.groom-section .nav-pills .nav-item .nav-link {
    background: transparent;
    color: #000;
    border: 2px solid #000;
}

/* groom section end  */

/* reservation form section start  */
.reservation__form form input::placeholder {
    color: #848484;
}

.reservation__form .form-control:focus {
    color:white;
}

.reservation__form form textarea::placeholder {
    color: #848484;
}

.reservation__form form input {
    border-color: #2d2d2d;
    color: #848484;
    padding: 15px 20px;
}


.reservation__form form textarea {
    border-color: #2d2d2d;
    color: #848484;
    padding: 15px 20px;
    height:54.5px;
    resize:none;
}

.reservation__form form button {
    background: #970411 !important;
    padding: 15px 20px;
    border: none;
    color: #fff !important;
}

/* reservation form section end  */

/* latest blog section start  */
.latest-blogs-section img {
    border-radius: 50%;
}

/* latest blog section end  */

.tabcontent {
    display: none;
    transition: transform 50s linear;
}

/* responsive layout start  */
@media(min-width:768px) {
    .lady-img {
        height: 100px;
    }

    /* .service-menu-section div span {
        padding-left: 115px;
    } */

    .services-section .row.align-items-center {
        height: 400px;
    }

    .services-section::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        /* margin-top: -100px; */
        top: 0;
        left: 10%;
        background: url(../images/services.png) no-repeat;
        background-size: contain;
        background-position: left;
    }
}

@media(max-width:1094px) {

    .finest-haircuts-section h2,
    .finest-haircuts-section h2 span {
        font-size: 40px;
    }

    .circle-container {
        height: 340px;
        width: 340px;
    }


    .gallery-banner h2 {
        font-size: 30px !important;
    }

    .team-banner h1 span:last-child {
        font-size: 60px !important;
    }

    .team-banner .team-page p {
        font-size: 11px !important;
    }

    .team-banner .team-page h4 {
        font-size: 14px !important;
    }

    .about-banner h2 {
        font-size: 40px !important;
    }
}

@media(max-width:768px) {

    .team-banner h1 span:last-child {
        font-size: 40px !important;
    }

    .first-fold {
        background: url(../images/first-fold.PNG) no-repeat;
        background: url(../images/khawar-test.png) no-repeat;
        background-size: cover;
        background-position: top;
        position: relative;
    }

    .team-page h1 {
        font-size: 25px !important;
    }

    .team-page h1 span:first-child {
        margin-right: 3px !important;
    }

    .bg_theme.position-relative.rounded-circle {
        height: 300px;
    }

    .bg_theme.position-relative.rounded-circle .row .col-6 {
        height: 300px;
    }

    .first-fold .p_55 {
        padding: 10px !important;
    }

    .services-section .row.align-items-center {
        height: 650px;
    }

    .finest-haircuts-section .ps_100 {
        padding-left: 10px !important;
    }

    .finest-haircuts-section .fs_80 {
        font-size: 55px;
    }

    .finest-haircuts-section h2 {
        font-size: 30px;
    }

    .finest-haircuts-section ul li span:before {
        width: 168px;
    }

    .groom-section .fs_70 {
        font-size: 30px;
    }

    .professional-team-section .fs_70 {
        font-size: 30px;
    }

    .latest-blogs-section .fs_60 {
        font-size: 32px;
    }

    .reservation-section .fs_40 {
        font-size: 30px;
    }

    footer .col-md-4 {
        border: none !important;
    }
}

@keyframes slideInFromBottom {
    /* 0% {
        transform: translateY(100%);
        opacity: 0;
    }

    50% {
        transform: translateY(50%);
        opacity: 0.5;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    } */

    from {
        opacity: 0;
        transform: translateY(40px);
      }
      to {
        opacity: 1;
      }
}

.slide-in {
    animation: slideInFromBottom .5s ease-in-out;
    transform-origin: bottom;
}

@media (min-width: 768px) {
    .bottom_arrow {
        position: absolute; /* Changed to fixed to keep it in view */
        bottom: 5%; /* Adjust as needed */
        right: 0; /* Align to the right edge */
        z-index: 10; /* Ensure it is above other content */
    }
}


footer{
    animation: none !important;
    transition: none !important;
    z-index: 10000;
    position: relative;
}

.tabcontent {
    display: none;
}

ul.navbar-nav.bg_nav_style.me-auto.mb-2.mb-lg-0 li {
    padding-left: 10px;
}

ul.navbar-nav.bg_nav_style.me-auto.mb-2.mb-lg-0  {
   left: 0;
}

.men .overlay a {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    top: 32%;
    justify-content: end;
    align-items: center;
    color: white;
    font-size: 25px;
    z-index: 1;
    transition: all 0.5s ease;
}
.women .overlay a {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    top: 32%;
    justify-content: start;
    align-items: center;
    color: white;
    font-size: 25px;
    z-index: 1;
    transition: all 0.5s ease;
}