
/*****  Global Settings  *****/
:root {
    --warning-color: #ffc513;
    --primary-color: #2d2d2d;
    --black: #101010;
    --grey: #5f5f5f;
    --dark-grey:#3a3a3a;
    --light-grey:#f9f9f9;
    --white-color:#ffffff;
    --footer-bg: #090a19;
}
body{
    color: var(--black);
    font-family: "Roboto", sans-serif;
}
.bg-light{
    background-color: var(--light-grey) !important;
}
.bg-primary{
    background-color: var(--primary-color) !important;
}
.spacing-padding {
  padding: 50px 0;
}
.spacing-margin {
  margin: 0 0 50px;
}
.text-warning{
    color: var(--warning-color) !important;
}
.bg-overlay:after{
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: var(--primary-color);
    opacity: .7;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}
.bg-overlay{
    z-index: 1;
}
.asr-text-background{
    width: 100%;
    position: absolute;
    z-index: 0;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 180px;
    color: rgba(255, 255, 255, .02);
    white-space: nowrap;
    pointer-events: none;
    top: 0;
    line-height: 210px;
    left: 0;
    right: 0;
}
a{
    text-decoration: none;
}
h1,h2,h3,h4{
    color: var(--dark-grey);
    font-weight: 700;
}
.h1,
h1{
    font-size: 44px;
}
h2{
    font-size: 34px;
}
h2 span{
    color: var(--warning-color);
}
h3{
    font-size: 22px;
}
.scroll-track::-webkit-scrollbar-track {
  background-color: #dad9d9;
}
.scroll-track::-webkit-scrollbar {
  width: 5px;
  background-color: #dad9d9;
  border-radius: 6px;
}
.scroll-track::-webkit-scrollbar-thumb {
  background-color: var(--grey);
  border-radius: 6px;
}
.text-caption {
    font-size: 36px;
    line-height: 42px;
}
.asr-section-caption{
    margin-bottom: 30px;
    line-height: 25px;
    color: var(--grey);
}
.form-control{
    height:48px;
    border-color: rgba(0, 0, 0, .1);
    border-radius: 6px;
    padding: 10px;
    font-size: 16px;
    background-color: var(--light-grey);
    transition: all .25s ease-in-out;
}
.form-control:hover{
    border-color: var(--primary-color);
}
.form-control:focus{
    border-color: var(--primary-color);
    box-shadow: none;
}
textarea.form-control{
    height: 110px;
    resize: none;
}
.asr-tilte-caption{
    font-size: 21px;
}
.title-separator {
    width: 46px;
    height: 3px;
    background-color: var(--warning-color);
    margin: 0 auto;
    top: 0;
}
.title-separator:before, 
.title-separator:after {
    content: '';
    width: 3px;
    height: 3px;
    background-color:var(--warning-color);
    display: inline-block;
    position: absolute;
}
.title-separator:before {
    right: -5px;
}
.title-separator:after {
    right: -10px;
}
/***** ASR Page Btn *****/
.btn-border {
    padding: 12px 20px;
    border: 1px solid var(--warning-color);
    background: transparent;
    color: var(--warning-color);
    letter-spacing: 1px;
    overflow: hidden;
    transition: all 1.2s 0.6s ease, background-color 0.4s ease-in-out, color 0.4s ease;
    z-index: 1;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: .5px;
}
.btn-border:hover{
    color: var(--black);
}
.btn-border span {
    z-index: 2;
    position: relative;
}
.btn-border::before,
.btn-border::after {
    content: '';
    position: absolute;
    top: 0;
    width: 150%;
    height: 100%;
    background-color: var(--warning-color);
    opacity: 0;
    transition: all 0.4s ease;
    z-index: 1;
}
.btn-border::before {
    right: 100%;
    transform: skew(-30deg) translate3d(0, 0, 0);
}
.btn-border::after {
    left: 100%;
    transform: skew(30deg) translate3d(0, 0, 0);
}
.btn-border:hover::before {
    transform: skew(-30deg) translate3d(70%, 0, 0);
    opacity: 1;
}
.btn-border:hover::after {
    transform: skew(30deg) translate3d(-70%, 0, 0);
    opacity: 1;
}
.btn-border-dark.btn-border{
    border-color: var(--primary-color);
    color: var(--primary-color);
} 
.btn-border-dark.btn-border:hover{
    color: var(--white-color);
}
.btn-border-dark.btn-border::before,
.btn-border-dark.btn-border::after {
    background-color: var(--primary-color);
}
.btn{
    color: #fff;
    font-size: 18px;
    border-radius: 4px;
    padding: 12px 25px;
    letter-spacing: 1px;
    position: relative;
    transition: all 0.3s ease-in-out 0s;
}
.btn-primary{
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
.btn-warning{
    color: var(--black);
    background-color: var(--warning-color);
    border-color: var(--warning-color);
}
.btn-full-bg {
    padding: 13px 25px;
    border: 1px solid var(--warning-color);
    background: transparent;
    color: var(--black);
    font-size: 16px;
    letter-spacing: 1px;
    overflow: hidden;
    z-index: 1;
    transition: color 0.4s ease;
    border-radius: 12px;
}
.btn-full-bg span {
    position: relative;
    z-index: 2;
}
.btn-full-bg::before,
.btn-full-bg::after {
    content: '';
    position: absolute;
    top: 0;
    height: 100%;
    width: 50%;
    background-color: var(--warning-color);
    z-index: 1;
    transition: all 0.5s ease;
}
.btn-full-bg::before {
    left: 0;
}
.btn-full-bg::after {
    right: 0;
}
.btn-full-bg {
}
.btn-full-bg:hover {
    color: var(--warning-color);
}
.btn-full-bg:hover::before {
    transform: translateX(-100%);
}
.btn-full-bg:hover::after {
    transform: translateX(100%);
}
.asr-swiper-pagination .swiper-pagination-bullet{
    background-color: var(--white-color);
    width: 10px;
    height: 10px;
    border-radius: 25px;
    transition: all .25s ease-in-out;
    margin: 0px 6px !important;
}
.asr-swiper-pagination .swiper-pagination-bullet-active{
    width:25px;
    background-color: var(--warning-color);
}
/***** ASR Page Header *****/
.asr-page-header{
    top: 0;
    left: 0;
    right: 0;
    z-index: 9;
}
.header-row{
    z-index: 1;
}
.header-row:after {
    position: absolute;
    content: '';
    clip-path: polygon(25% 0, 27% 46%, 100% 46%, 100% 100%, 0 100%, 0 0);
    background-color: var(--primary-color);
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
}
.header-row .logo {
    padding-left: 25px;
}
.header-row .logo img{
    max-width: 250px;
}
.header-right-top {
    gap: 30px;
}
.header-right .address {
    padding: 10px 60px 10px 86px;
}
.appointment {
    background-color: var(--warning-color);
    font-size: 19px;
    line-height: 25px;
    width: 240px;
    color: var(--black);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 14% 100%);
}
.header-right-bottom {
    padding: 8px 0px;
    margin-right: 37px;
}
.phone-number {
    font-size: 20px;
    line-height: 35px;
    color: var(--warning-color);
}
.asr-page-nav .asr-navbar{
    gap: 35px;
}
.asr-page-nav{
    box-shadow:0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
.asr-page-nav li{
    position: relative;
}
.asr-page-nav li .nav-link{
    line-height: 50px;
    transition: color 0.2s linear;
}
.asr-page-nav li .nav-link svg{
    top: -2px;
}
.asr-page-nav li .nav-link:hover{
    color: var(--primary-color);
}
.asr-page-nav li .nav-link:after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0px;
    width: 0%;
    height: 4px;
    margin: auto;
    left: 0;
    right: 0;
    background-color: var(--warning-color);
    transition: width 0.2s linear;
}
.asr-page-nav li .nav-link:hover:after {
    width: 100%;
    bottom: 0px;
}
.asr-dropdown-menu {
    position: absolute;
    z-index: 1000;
    min-width: 160px;
    margin: 2px 0 0;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    margin-left: -110px;
    transform: translateX(20px);
    bottom: auto !important;
    left: 50%;
    width: 250px;
    opacity: 0;
    visibility: hidden;
    font-weight: 400;
    top: 100%;
    -webkit-box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.2);
    max-height: 230px;
    overflow: auto;
}
.asr-dropdown-menu:after {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #fff;
    border-width: 7px;
    margin-left: -7px;
}
.asr-page-nav li:hover .asr-dropdown-menu {
    transform: translateX(0);
    -webkit-transition: opacity 0.4s ease 0s, transform 0.4s ease 0s, -webkit-transform 0.4s ease 0s;
    opacity: 1;
    visibility: visible;
    margin-top: 0;
}
.asr-dropdown-menu li>a {
    font-size: 14px;
    line-height: 20px;
    padding: 7px  15px;
    border-bottom: 1px solid #f0f0f0;
    text-decoration: none;
    -webkit-transition: all 200ms ease;
    display: block;
    color: #000;
}
.asr-dropdown-menu li>a:hover{
    background-color: #f2f2f2 !important;
}

.asr-page-header.fixed-header{
    position: fixed !important;
    left: 0px;
    top: 0px;
    right: 0px;
    z-index: 9999999;
    opacity: 1;
    animation: fadeInDown 0.5s linear 1;
    transition: all 0.9s ease;
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.asr-page-header.fixed-header .header-row{
    display: none !important;
}
/***** ASR Hero Slider *****/
.asr-hero-slider {
    font-size: 18px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 250px 0 100px;
    min-height: 700px;
}

/* Initial state - sab elements hidden */
.asr-heroSwiper .asr-rating-container,
.asr-heroSwiper .asr-hero-btn,
.asr-heroSwiper .asr-slider-text,
.asr-heroSwiper .asr-hero-slider .h1,
.asr-heroSwiper .asr-tilte-caption {
    transform: translateY(100px);
    -webkit-transform: translateY(100px);
    opacity: 0;
    transition: transform 0.6s ease-out, opacity 0.6s ease-out;
    -webkit-transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}

/* Animated class - ye properly trigger hogi */
.slide-animated .asr-tilte-caption {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    opacity: 1;
    transition-delay: 0.2s;
    -webkit-transition-delay: 0.2s;
}

.slide-animated .h1 {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    opacity: 1;
    transition-delay: 0.4s;
    -webkit-transition-delay: 0.4s;
}

.slide-animated .asr-slider-text {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    opacity: 1;
    transition-delay: 0.6s;
    -webkit-transition-delay: 0.6s;
}

.slide-animated .asr-hero-btn {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    opacity: 1;
    transition-delay: 0.8s;
    -webkit-transition-delay: 0.8s;
}

.slide-animated .asr-rating-container {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    opacity: 1;
    transition-delay: 1s;
    -webkit-transition-delay: 1s;
}

/* Alternative: Agar upar wala kaam na kare to ye try karo */
.asr-heroSwiper .swiper-slide-active.slide-animated .asr-tilte-caption,
.asr-heroSwiper .swiper-slide-active.slide-animated .h1,
.asr-heroSwiper .swiper-slide-active.slide-animated .asr-slider-text,
.asr-heroSwiper .swiper-slide-active.slide-animated .asr-hero-btn,
.asr-heroSwiper .swiper-slide-active.slide-animated .asr-rating-container {
    transform: translateY(0) !important;
    -webkit-transform: translateY(0) !important;
    opacity: 1 !important;
}



.asr-star-list{
    color: var(--warning-color);
    gap: 5px;
}
.asr-star-list li{
    display: flex;
}
.asr-hero-slider-caption{
    gap: 10px;
}
.asr-hero-slider-caption .h1{
    font-weight: 700;
}
.asr-heroSwiper .swiper-button-next, 
.asr-heroSwiper .swiper-button-prev{
    height:32px;
    color: var(--white-color);
}
.asr-heroSwiper .swiper-button-next:after, 
.asr-heroSwiper .swiper-button-prev:after{
    font-size: 32px;
}
.asr-heroSwiper .swiper-button-next{
    right:30px;
}
.asr-heroSwiper .swiper-button-prev{
    left: 30px;
}
/***** ASR Hero Widget *****/
.asr-hero-widget-wrapper {
    padding: 36px 0;
    gap: 10px;
}
.asr-hero-widget-wrapper .asr-hero-widget-left {
    margin-right: 40px;
    min-width: 190px;
}
.asr-hero-widget-wrapper h3{
    font-size: 27px;
}
.asr-hero-widget-wrapper h3 span {
    display: block;
    margin-left: 40px;
    color: var(--warning-color);
}
.asr-hero-widget-wrapper .asr-hero-widget-center {
    flex: 2 1 auto;
}
.asr-hero-widget-wrapper .asr-hero-widget-description {
    width: 57%;
    max-width: 355px;
}
.asr-hero-widget-wrapper .asr-hero-widget-img {
    right: 30px;
    top: -69px;
    z-index: 9;
}
.asr-partnerSwiper-service .swiper-slide,
.asr-partnerSwiper .swiper-slide{
    text-align: center;
}
/***** ASR Service Sec *****/
.asr-service-col{
    height: calc(100% - 25px);
    margin-bottom: 25px;
    padding: 0 10px 25px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    color:var(--primary-color);
}
.asr-service-col .img-holder{
    margin: 0 -10px;   
}
.asr-service-col .img-holder:after, 
.asr-service-col .img-holder:before {
    content: "";
    background: #fff;
    height: 0;
    width: 0;
    z-index: 1;
    position: absolute;
    transition-duration: 1.3s !important;
    z-index: 3;
}
.asr-service-col .img-holder:before {
    right: 0;
    opacity: 1;
    top: 0;
}
.asr-service-col:hover .img-holder:before {
    height: 100%;
    width: 100%;
    opacity: 0;
}
.asr-service-col .img-holder:after {
    bottom: 0;
    opacity: .7;
    left: 0;
}
.asr-service-col:hover .img-holder:after {
    height: 100%;
    width: 100%;
    opacity: 0;
}
.asr-service-col h3{
    margin: -27px 0 20px;
    font-size: 17px;
    background: var(--warning-color);
    box-shadow: 0px 10px 30px rgb(0 0 0 / 7%);
    padding: 10px 6px 8px;
    color: var(--black);
    transition: all .25s ease;
    z-index: 99;
}
.asr-service-col h3:hover{
    color:var(--white-color);
    background: var(--primary-color);
}
.asr-service-arrow{
    background: var(--primary-color);
    color: var(--white-color);
    width: 50px;
    height: 50px;
    margin: auto;
    left: 50%;
    transform: translateX(-50%);
    bottom: -25px;
    transition: all .25s ease;
}
.asr-service-arrow:hover{
    background:var(--warning-color);
    color:var(--black);
}
/***** ASR Features Sec *****/
.asr-features-col{
    gap: 25px;
}
.asr-features-col.asr-about-col{
    line-height: inherit;
}
.asr-features-col.asr-about-col ul{
    font-weight: 400;
}
.asr-features-col .icon{
    width: 75px;
    min-width: 75px;
}
.asr-features-col .icon:before {
    content: '';
    width: 3px;
    height: 46px;
    background-color: var(--warning-color);
    display: block;
    position: absolute;
    top: 1px;
    right: -2px;
}
/***** ASR Work Sec *****/
.asr-work-sec{
    background-repeat: no-repeat;
    background-position: right;
    background-size: cover;
}
.asr-work-sec.bg-overlay:after{
    opacity: .9;
}
.asr-work-wrapper{
    padding: 0 55px;
}
.asr-work-counter {
    font-size: 200px;
    font-weight: 400;
    line-height: 1;
    color: var(--warning-color);
    width: 18%;
    font-family: 'Poppins', sans-serif;
    position: absolute;
    top: 50%;
    left: 15px;
    z-index: 1;
    transform: translateY(-50%);
}
.asr-work-col{
    z-index: 1;
    width: 82%;
}
.asr-work-col img{
    width: 100%;
}
.asr-work-col:after{
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    top: 0;
    background: linear-gradient(90deg, #000 0%, #000 100%);
    opacity: .7;
    width: 100%;
    height: 100%;
    transition: transform 200ms ease-out;
    pointer-events: none;
    transform: translateY(83%);
}
.asr-work-col:hover:after{
    transform:translateY(0);
}
.asr-work-col:hover h3 {
    padding: 6px 20px;
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
}
.asr-work-details h3 {
    padding: 13px 20px;
    transform: translate(0, -100%);
    -webkit-transform: translate(0, -100%);
    transition: transform 200ms ease-out, padding 200ms ease-out;
    -webkit-transition: transform 200ms ease-out, padding 200ms ease-out;
}
.asr-work-details {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transition: transform 200ms ease-out, top 200ms ease-out;
    -webkit-transition: transform 200ms ease-out, top 200ms ease-out;
    /* z-index: 1; */
    font-size: 15px;
    padding: 0 8px;
    z-index: 1;
}
.asr-work-col:hover .asr-work-details {
    top: 50%;
    bottom: auto;
    transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
}
/***** ASR Choose Sec *****/
.asr-choose-col{
    background-color: var(--light-grey);
    transition: background-color 0.2s linear, box-shadow 0.2s linear;
    padding: 40px 25px ;
    gap: 20px;
}
.asr-choose-col p{
    margin-bottom: 0;
}
.asr-choose-col:hover{
    background-color: #ffffff;
    box-shadow: 0 6px 35px rgba(0, 0, 0, 0.07);
}
.asr-choose-col .icon{
    width: 90px;
    height: 90px;
    background-color: var(--warning-color);
}
.asr-teams-col .asr-team-content:before,
.asr-choose-col:before {
    content: '';
    display: block;
    position: absolute;
    bottom: 0px;
    width: 0%;
    height: 4px;
    margin: auto;
    left: 0;
    right: 0;
    background-color: var(--warning-color);
    transition: width 0.2s linear;
}
.asr-teams-col:hover .asr-team-content:before,
.asr-choose-col:hover:before {
    width: 100%;
}
/***** ASR Testimonial Sec *****/

.asr-testimonial-slider-caption p{
    font-size: 18px;
    margin-bottom: 20px;
}
/***** ASR CTA Sec *****/
.asr-cta-sec .asr-text-background{
    color: rgba(0, 0, 0, .05);
    top: 65px;
    z-index: -1;
}
.asr-cta-col .number{
    font-size: 26px;
    font-weight: 700;
    color: var(--primary-color);
}
.asr-cta-col .btn-border{
    padding: 13px 40px;
}
/***** ASR About Sec *****/
.asr-about-col p{
    margin-bottom: 10px;
}
.asr-about-col ul {
    padding-left: 0;
    list-style: none;
    margin-bottom: 0;
    font-weight: 500;
    padding-top: 15px;
}
.asr-about-col ul li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 7px;
    background-image: url("/assets/images/check.png");
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: 0 2px;
}
.asp-about-page-wrapper{
    margin-bottom: 40px;
}
/***** ASR About Form Sec *****/
.asr-about-form-sec .asr-about-col{
    line-height: 28px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    padding: 20px 30px;
    border-radius: 20px;
    height: 100%;
}
.asr-about-form-sec.bg-overlay:after{
    background: linear-gradient(90deg, #f9f9f9 30%, #ffffff82 100%);
    opacity: 1;
}
.asr-about-form-sec .asr-tilte-caption{
    color: var(--warning-color);
}
.asr-form-block{
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    padding: 20px 30px;
    border-radius: 20px;
}
.asr-form-block .form-control{
    height: 52px;
    border-radius: 12px;
    border-color: rgba(0, 0, 0, .1);
    padding: 10px;
    background: var(--white-color);
}
.asr-form-block textarea.form-control{
    height: 110px;
    border-radius: 12px;
}
.asr-form-block h2{
    font-size: 30px;
}
.asr-form-block .btn-border{
    border-width: 2px;
}
/***** ASR Teams Sec *****/
.asr-teams-col .asr-teams-img{
    margin: 0 0 -80px;
    position: relative;
    z-index: 9;
}
.asr-teams-col .asr-team-content{
    padding: 110px 20px 30px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    background:var(--light-grey);
    transition: width 0.2s linear;
}
.asr-teams-col:hover .asr-team-content{
    background:var(--white-color);
}
/***** ASR Img Comparison Sec *****/
.asr-img-comparison {
    height: 400px;
}
.asr-img-comparison .img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}
.asr-img-comparison .slider::-webkit-slider-thumb { 
    -webkit-appearance: none;
    appearance: none;
    width: 6px;
    height: 400px;
    background: var(--white-color);
    cursor: pointer;
}
.asr-img-comparison .foreground-img {
    width: 50%;
    z-index: 2;
}
.asr-img-comparison .slider {
    position: absolute;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 100%;
    background: transparent;
    outline: none;
    margin: 0;
    z-index: 30; 
    pointer-events: none;
}
.asr-img-comparison .slider::-webkit-slider-thumb { 
    -webkit-appearance: none;
    appearance: none;
    width: 0;
    height: 0;
    background: transparent;
    cursor: grab;
    pointer-events: auto;
}
.asr-img-comparison .slider::-moz-range-thumb {
    width: 0;
    height: 0;
    background: transparent;
    border: none;
    cursor: grab;
    pointer-events: auto;
}
.twentytwenty-overlay {
    background: rgba(0, 0, 0, 0);
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    transition: background 0.5s;
    z-index: 20;
}
.twentytwenty-before-label,
.twentytwenty-after-label {
    opacity: 0;
    transition: opacity 0.5s;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}

.twentytwenty-before-label:before,
.twentytwenty-after-label:before {
    color: var(--white-color);
    font-size: 13px;
    letter-spacing: 0.1em;
    background: rgba(255, 255, 255, 0.2);
    position: absolute;
    top: 50%;
    margin-top: -19px;
    line-height: 38px;
    padding: 0 20px;
    border-radius: 2px;
}

.twentytwenty-before-label:before { content: "Before"; left: 10px; }
.twentytwenty-after-label:before { content: "After"; right: 10px; }
.twentytwenty-overlay:hover { background: rgba(0, 0, 0, 0.5); }
.twentytwenty-overlay:hover .twentytwenty-before-label { opacity: 1; }
.twentytwenty-overlay:hover .twentytwenty-after-label { opacity: 1; }

.asr-img-comparison .slider-button {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color:  var(--warning-color);
    left: calc(50% - 25px);
    top: calc(50% - 25px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 31;
    cursor: grab;
}
.asr-img-comparison .slider-button:after {
    content: "";
    padding: 5px;
    display: inline-block;
    border: solid var(--black);
    border-width: 0 2px 2px 0;
    transform: rotate(-45deg);
}
.asr-img-comparison .slider-button:before {
    content: "";
    padding: 5px;
    display: inline-block;
    border: solid var(--black);
    border-width: 0 2px 2px 0;
    transform: rotate(135deg);
}
/***** ASR Question Sec *****/
.asr-question-sec .accordion-button {
    padding: 16px 32px 16px 16px;
    color: var(--dark-grey);
    background: 0 0;
    font-size: 17px;
    font-weight: 600;
    position: relative
}
.asr-question-sec .accordion-button::after {
    background-image: none;
    content: none;
}
.asr-question-sec .accordion-button:focus,.asr-question-sec .accordion-button:not(.collapsed) {
    box-shadow: none;
    border: none
}
.asr-about-us-page-sec b,.asr-about-us-page-sec strong,.asr-question-sec .accordion-button b,.asr-question-sec .accordion-button strong {
    font-weight: 600!important
}
.asr-question-sec .accordion-header {
    margin-bottom: 0;
    padding: 0;
    border: none;
    background-color: transparent
}
.asr-question-sec .accordion-item {
    border: none;
    background: var(--white-color);
    margin-bottom: 18px;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}
.asr-question-sec .accordion-body {
    padding: 0 22px 20px;
    color: var(--dark-grey);
    text-align: justify;
    font-weight: 400;
}
.asr-question-sec .fa-chevron-down {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform .3s ease-in-out;
}
.asr-question-sec .accordion-button[aria-expanded=true] .fa-chevron-down {
    transform: translateY(-50%) rotate(-180deg);
    color: var(--dark-grey);
}
/***** ASR Advantages Sec *****/
.asr-advantages-sec {
    background-color: #272727;
}
.asr-advantages-sec .asr-text-background{
    line-height: 150px;
    bottom: 0;
    top: auto;
}
.asr-advantages-sec .asr-section-caption,
.asr-advantages-wrapper .asr-advantages-col{
    padding: 50px 70px 52px 50px;
    line-height: 28px;
    color: #cacaca;
}
.asr-advantages-sec h3{
    color: #cacaca;
}
.asr-advantages-wrapper > div:nth-child(1) .asr-advantages-col {
    background-color: #343434;
}
.asr-advantages-wrapper > div:nth-child(2) .asr-advantages-col{
    background-color: #404040;
}
.asr-advantages-wrapper > div:nth-child(3) .asr-advantages-col{
    background-color: #4b4b4b;
}
/***** ASR Inner Hero Sec *****/
.asr-inner-hero-sec{
    background-repeat: no-repeat;
    background-position: right;
    background-size: cover;
    padding: 230px 0 85px;
}
.asr-inner-hero-sec .breadcrumb-item.active {
    color: var(--warning-color);
}
.asr-inner-hero-sec .breadcrumb{
    font-size: 18px;
}
.asr-inner-hero-sec .breadcrumb a{
    color: var(--white-color);
}
.asr-inner-hero-sec .breadcrumb-item+.breadcrumb-item::before{
    color: var(--white-color);
}
/***** ASR Footer Page Sec *****/
.asr-footer-page{
    background-color: #1e1e1e;
}
.asr-footer-page a{
    transition: all .25s ease-in-out;
    color: var(--white-color);
}
.asr-footer-page a:hover{
    color: var(--warning-color);
}
.asr-ft-contact-list{
    gap: 15px;
}
.asr-ft-contact-list svg{
    width: 20px;
    height:20px;
    color: var(--warning-color);
}
.asr-ft-contact-list a{
    gap: 5px;
}
.asr-ft-contact-list .icon{
    width: 20px;
    height: 20px;
    display: flex;
}
.asr-footer-widget-wrapper {
    gap: 20px;
    grid-template-columns: 3fr 2fr;
        font-size: 15px;
}
.asr-footer-widget-wrapper .asr-ft-list li a {
    display: inline-flex;
    align-items: flex-start;
    gap: 5px;
}
.asr-footer-widget-wrapper .asr-ft-list li{
    margin-bottom: 7px;
}
.asr-footer-widget-wrapper .ft-angles-ico {
    color: var(--warning-color);
    margin-top: 5px;
}
.asr-footer-widget-wrapper .ft-heading {
    font-size: 18px;
    line-height: 25px;
    letter-spacing: 1px;
    padding-bottom: 7px;
    margin-bottom: 20px;
}
.asr-footer-widget-wrapper .ft-heading:before {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    background: var(--warning-color);
    width: 35%;
    height: 3px;
}
.asr-map{
    filter: grayscale(100%) invert(92%) contrast(83%);
}
.asr-ft-social-icon a {
    background: var(--warning-color);
    color: var(--primary-color);
    border-radius: 10px 10px 0px 10px;
    width: 40px;
    height: 40px;
    border: 2px solid var(--warning-color);
    transition: all .3s ease-in-out;
}
.asr-ft-social-icon a:hover {
    background: transparent;
    color: var(--warning-color);
}
.copyright{
    margin-top: 45px;
    border-top: 1px solid rgba(255, 255, 255, .1)
}
.copyright a{
    color: var(--warning-color);
}
/***** ASR Location Page Sec *****/
.asr-location-list-wrapper{
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}
.asr-location-list-wrapper .link{
    background: var(--primary-color);
    color: var(--white-color);
    letter-spacing: 1px;
    transition: all .35s;
    padding: 10px 25px;
    margin: 0 25px 0 0px;
}
.asr-location-list-wrapper .icon{
    width: 38px;
    height: 40px;
    position: absolute;
    transform: rotate(45deg);
    right: 0;
    top: 0;
    transition: all .35s;
    background: var(--white-color);
}
.asr-location-list-wrapper .icon svg{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%) rotate(-45deg);
    fill: var(--primary-color);
    transition: all .35s;
}
.asr-location-list-wrapper .link:hover{
    background:var(--warning-color);
    color:var(--black);
}
/***** ASR Contact Page Sec *****/
.asr-contact-sec{
    background-position: top right;
    background-repeat: no-repeat;
}
.asr-contact-form{
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    padding: 30px;
    border-radius: 20px;
}
.asr-contact-list {
    font-size: 18px;
    display: flex;
    flex-direction: column;
    gap: 20px
}
.asr-contact-list .asr-contact-col svg {
    color: var(--warning-color)
}
.asr-contact-list .asr-contact-text-caption {
    font-size: 22px;
    line-height: 28px
}
.asr-contact-list a{
    color: var(--dark-grey);
}
.asr-contact-list .asr-contact-col {
    gap: 12px;
    color: var(--dark-grey);
}
.asr-contact-form .form-check .form-check-input{
    width: 20px;
    height: 20px;
    border-color: #969696;
    margin-top: 2px;
    margin-left: -30px;  
}
.asr-contact-form .form-check{
    padding-left: 30px;
    margin-bottom: 8px;
}
.form-check-input:checked{
    background-color: var(--primary-color);
    border-color: var(--primary-color) !important;
}
.form-check-input:focus{
    box-shadow: none;
}
.asr-contact-form .dropdown-menu{
    border: none;
    padding: 0;
}
.asr-contact-form .dropdown .btn{
    height: 48px;
    border-color: rgba(0, 0, 0, .1);
    border-radius: 6px;
    padding: 10px;
    font-size: 16px;
    background-color: var(--light-grey);
    width: 100%;
    color: var(--bs-body-color);
    text-align: left;
}
.asr-contact-form .dropdown .btn svg{
    position: absolute;
    top: 15px;
    right: 12px;

}
/***** ASR Cta 2 Sec *****/
.asr-cta-sec-2{
    padding:35px 0;
}
.asr-cta-sec-2 .asr-text-background{
    font-size: 160px;
    line-height: 130px;
}
.asr-cta-sec-2 p{
    margin-bottom: 10px;
}
/***** ASR Mobile Responsive *****/
.asr-mobile-header{
    top: 0;
    z-index: 9;
    left: 0;
    right: 0;
}
.asr-mobile-header-top{
    background: var(--black);
}
.asr-mobile-header-contact a{
    color: var(--white-color);
}
.asr-mobile-header-top .asr-mobile-btn{
    clip-path: polygon(0 0, 100% 0, 100% 100%, 14% 100%);
    padding: 7px 20px 7px 30px;
    background: var(--warning-color);
    color: var(--black);
}
.asr-mobile-menu{
    padding: 10px 0;
}
.asr-offcanvas-close,
.asr-offcanvas-opener{
    border: none;
    background: transparent;
    color: var(--white-color);
}
.asr-mobile-menu .offcanvas {
    background: #262626;
    max-width: 330px;
}
.asr-mobile-page-nav li a {
  padding: 10px 22px;
  color: var(--white-color);
  display: block;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,.05);
  position: relative;
  font-size: 16px;
}
.asr-mobile-page-nav li a.asr-accordion-button{
    position: absolute;
    top: 0px;
    right: 0;
    padding: 13px 12px;
    display: flex;
    align-items: center;
    border: none;
    background: var(--warning-color);
    color: var(--black) !important;
}
.asr-mobile-page-nav li a:hover {
    color:var(--warning-color);
}
.asr-mobile-page-nav .asr-mobile-submenu-list{
  margin: 13px auto;
  width: 90%;
  line-height: 20px;
  background: rgba(255,255,255,.035);
}
.asr-mobile-page-nav .asr-mobile-submenu-list a{
    font-size:14px;
    padding: 8px 15px;
}
.asr-mobile-page-nav li:last-child a{
    border:none;
}

/***** ASR Content Details Page Sec *****/
.asr-content-details-page-sec h2{
    font-size: 28px;
    font-weight: 600;
}
.asr-content-details-page-sec h3{
    font-size: 21px;
    font-weight: 600;
}
/***** ASR Blog Page Sec *****/
.asr-blog-col{
    box-shadow: 0 6px 35px rgba(0, 0, 0, 0.07);
    padding: 25px;
    font-size: 14px;
}
.asr-blog-col h2{
    font-size: 23px;
}
.asr-blog-col h2 a{
    color: var(--dark-grey);
}
.asr-blog-details{
    font-size: 15px;
}
.asr-blog-details h2{
    font-size: 28px;
    font-weight: 600;
}
.asr-blog-details h3{
    font-size: 24px;
    font-weight: 600;
}
.asr-blog-details-list  {
    padding-left: 0;
    list-style: none;
    margin-bottom: 0;
}
.asr-blog-details-list li{
    padding-left: 27px;
    margin-bottom: 7px;
    background-image: url("/assets/images/check-mark.png");
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: 0 4px;
}

.asr-blog-details .asr-quotes-text{
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    font-size: 18px;
    padding: 15px 30px;
    letter-spacing: .5px;
}
.asr-blog-details .asr-quotes-text:before{
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    bottom: 0;
    background: var(--primary-color);
    width: 5px;
    height: 100%;
}
.asr-blog-widget-categories{
    box-shadow: 0 6px 35px rgba(0, 0, 0, 0.07);
    padding: 25px;
}
.asr-category-list{
    font-size: 14px
}
.asr-category-list li{
    margin-bottom: 4px;
}
.asr-category-list a{
    gap: 6px;
    color: #333;
    transition: all .25s ease-in-out;
}
.asr-category-list a:hover{
    transform: translateX(7px);
}
.asr-category-list a svg{
    color: #ffc513;
}
.asr-side-post-wrapper{
    gap: 30px;
}
.asr-side-post-wrapper .asr-side-post{
    gap: 18px;
    font-size: 15px;
    color: #5f5f5f;
}
.asr-side-post-wrapper h6{
    font-size: 15px;
    color: #101010;
    transition: all .25s ease-in-out;
}
.asr-side-post-wrapper .asr-side-post:hover h6{
     color: #ffc513;
}
.asr-blog-widget-post {
    box-shadow: 0 6px 35px rgba(0, 0, 0, 0.07);
    padding: 25px;
}
.asr-thank-you-page-sec {
    margin: 195px 0 50px;
}
.asr-thank-you-wrapper p {
    margin-bottom: 25px;
}
.asr-thank-you-wrapper {
    box-shadow: rgba(0, 0, 0, 0.35) 0 5px 15px;
    padding: 40px 70px;
    gap: 30px;
}
.asr-thank-you-wrapper .btn-grad {
    font-size: 15px;
    padding: 8px 16px;
    line-height: 20px;
}
.asr-page-wrapper:has(.asr-thank-you-page-sec) .header-right .address {
  color: var(--primary-color) !important;
}

/***** SMS Form Wrapper  *****/
.sms-form-wrapper form {
    box-shadow: rgba(99, 99, 99, 0.2) 0 2px 8px 0;
}
.sms-popup-wrapper .close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 50px;
    background: #006095;
    color: var(--white-color);
    padding: 13px;
    cursor: pointer;
}
.sms-popup-wrapper .text-display-button {
    background: linear-gradient(90deg, #ffed86 0, rgb(255 172 66) 100%);
    padding: 8px 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 50px;
    color: #000;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 0.5px;
    cursor: pointer;
}
.sms-popup-wrapper {
    position: fixed;
    display: inline-block;
    bottom: 13px;
    right: 13px;
    z-index: 999;
}
.sms-popup-wrapper .text-display-button img {
    margin-top: 2px;
}
.sms-form-wrapper .txt {
    background: #d4ebff;
    padding: 17px 20px;
    margin: 20px 30px 0;
    border-radius: 20px 20px 20px 0;
}
.sms-popup-wrapper .head {
    padding: 6px;
    background: #006095;
}
.sms-popup-wrapper h3 {
    margin: 0;
    color: var(--white-color);
    font-size: 16px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    line-height: 22px;
}
.sms-form-wrapper {
    background: #eef7ff;
    padding: 0 0 30px;
    max-width: 340px;
    font-size: 13px;
    position: absolute;
    bottom: 55px;
    right: 0;
    width: 340px;
}
.sms-form-wrapper label {
    color: #595959;
    font-size: 13px;
    font-weight: 400;
    left: 0;
    line-height: 16px;
    pointer-events: none;
    position: absolute;
    top: 0.5em;
    -webkit-transition: 0.2s;
    transition: 0.2s;
    white-space: nowrap;
    z-index: 2;
}
.sms-form-group input {
    position: relative;
    z-index: 1;
}
.sms-form-group input {
    border: 0;
    color: #333;
    font-size: 14px;
    height: 30px;
    outline: 0;
    width: 100%;
    line-height: 1.5;
    padding: 8px 0;
    border-bottom: 1px solid #ccc;
}
.sms-form-group textarea {
    border: none;
    resize: none;
    border-bottom: 1px solid #ccc;
    width: 100%;
    height: 40px;
}
.sms-form-group {
    margin: 20px 0;
}
.sms-form-group input:focus ~ label,
.sms-form-group input:valid ~ label,
.sms-form-group textarea:focus ~ label,
.sms-form-group textarea:valid ~ label {
    -webkit-transform: translate(-10%, -100%) scale(0.8);
    transform: translate(-10%, -100%) scale(0.8);
    font-weight: 500;
}
.sms-form-wrapper form {
    background: var(--white-color);
    padding: 20px;
    margin: 20px 30px 0;
    border-radius: 25px;
}
.sms-form-group input:focus,
.sms-form-group textarea:focus {
    border-color: red;
}
.sms-form-group textarea:focus-visible {
    outline: 0;
}
.sms-form-wrapper form p {
    font-size: 12px;
    line-height: 22px;
    color: #7a7a7a;
}
.sms-form-wrapper .btn-border{
    padding: 7px 12px;
    font-size: 14px;
}
/***** ASR Gallery Sec *****/
.asr-gallery-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(12, 1fr);
    gap: 15px;
}
.asr-gallery-img {
    height: 300px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.asr-gallery-img-1 {
    grid-column: span 5 / span 5;
    grid-row: span 3 / span 3;
}

.asr-gallery-img-2 {
    grid-column: span 7 / span 7;
    grid-row: span 3 / span 3;
    grid-column-start: 6;
}

.asr-gallery-img-3 {
    grid-column: span 4 / span 4;
    grid-row: span 3 / span 3;
    grid-row-start: 4;
}

.asr-gallery-img-4 {
    grid-column: span 4 / span 4;
    grid-row: span 3 / span 3;
    grid-column-start: 5;
    grid-row-start: 4;
}

.asr-gallery-img-5 {
    grid-column: span 4 / span 4;
    grid-row: span 3 / span 3;
    grid-column-start: 9;
    grid-row-start: 4;
}

.asr-gallery-img-6 {
    grid-column: span 5 / span 5;
    grid-row: span 3 / span 3;
    grid-row-start: 7;
}

.asr-gallery-img-7 {
    grid-column: span 4 / span 4;
    grid-row: span 3 / span 3;
    grid-column-start: 6;
    grid-row-start: 7;
}

.asr-gallery-img-8 {
    grid-column: span 3 / span 3;
    grid-row: span 3 / span 3;
    grid-column-start: 10;
    grid-row-start: 7;
}

.asr-gallery-img-9 {
    grid-column: span 6 / span 6;
    grid-row: span 3 / span 3;
    grid-row-start: 10;
}

.asr-gallery-img-10 {
    grid-column: span 6 / span 6;
    grid-row: span 3 / span 3;
    grid-column-start: 7;
    grid-row-start: 10;
}



.gj-picker-bootstrap table tr td.selected.gj-cursor-pointer div{
        background-color: var(--primary-color);
    border-color: var(--primary-color);
        border-radius: 50px;
}
.gj-picker-bootstrap table tr td.focused div, .gj-picker-bootstrap table tr td.gj-cursor-pointer div:hover{
    border-radius: 50px !important;
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color);
    color: var(--white-color) !important;
}
.gj-picker-bootstrap table tr td div{
    background: #eee;
    border-radius: 50px;
    color: var(--grey-color);
    font-size: 14px;
}
.datepicker td,
.datepicker th{
    padding: 4px;
}
.gj-picker-bootstrap{
    padding: 12px;
}
.gj-icon.chevron-left,
.gj-icon.chevron-right{
    background-color: var(--primary-color);
    color: var(--white-color);
    border-radius: 50px;
    width: 25px;
    display: inline-block;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.datepicker td, .datepicker th{
    font-weight: 500;
}
.gj-picker div[role=navigator] div[role=period]{
    font-weight: 600;
}
.btn-outline-secondary .gj-icon{
    color: var(--primary-color);
    top: 50% !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(-50%);
}
.gj-unselectable .btn-outline-secondary{
    border: 1px solid #e5e5e5;
    background: var(--light-grey);
}
.gj-picker-bootstrap table tr td.today div{
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white-color) !important;
}
.pagination{
    justify-content: center;
    gap: 15px;
    margin: 35px 0 0;
}
.pagination .page-item .page-link{
   line-height: initial;
   min-width: 40px;
   padding: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 40px;
   width: 40px;
    color:var(--primary-color);
}
.pagination .page-item.active .page-link{
    background-color:var(--primary-color);
    border-color:var(--primary-color);
      color:var(--white-color);
}
.pagination .page-item:first-child .page-link{
    font-size:30px;
    border-radius:0;
}
.pagination .page-item:last-child .page-link{
    font-size:30px;
    border-radius:0;
}