/* ------------------------------
    RESET & BASE STYLES
------------------------------ */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
    height: 100%;
    font-family: 'Neue Montreal', sans-serif;
    font-weight: normal;
    font-size: 16px;
    line-height: 1.4;
    color: var(--body-clr);
    background-color: var(--light-clr);
    scroll-behavior: smooth;
}

@font-face {
    font-family: 'Neue Montreal';
    src: url(../fonts/NeueMontreal-Regular.woff2) format('woff2'),
        url(../fonts/NeueMontreal-Regular.woff) format('woff'),
         url(../fonts/NeueMontreal-Regular.ttf) format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Neue Montreal';
    src: url(../fonts/NeueMontreal-Medium.woff2) format('woff2'),
        url(../fonts/NeueMontreal-Medium.woff) format('woff'),
         url(../fonts/NeueMontreal-Medium.ttf) format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
*{
    --pry-txt-clr:#000;
    --pry-bdy-clr:#FFFFF2;
    --accent-clr:#EE701E;
    --body-clr:#0E1319;
    --hl-l-org:#FF8231;
    --hl-d-org:#EE701E;
    --hl-blu:#1D91E4;
    --hl-red:#E33529;
    --hl-ylw:#FFB703;
    --dark-clr:#000;
    --light-clr:#fff;
    --border-clr:#E0E0E0;
    --light-org:#FFAA00;
    --success-green: #0fa530;
    --text-muted: #666;
}
/* ------------------------------
   TYPOGRAPHY
------------------------------ */
h1{
    font-size: 3.5vw;
   line-height: 1;
    font-weight: 500;
    font-family: "Fredoka", sans-serif;
}
.medium-h1{
 font-size: 50px;
   line-height: 1;
    font-weight: 500;
    font-family: "Fredoka", sans-serif;
}
h2{
    /* font-size: 3.75rem; */
    font-size: 2.5rem;
    font-family: "Fredoka", sans-serif;
    font-weight: 400;
    line-height: 1;
    margin: 10px 0;
}

.large-h2{
    font-size: 3rem;
    font-family: "Fredoka", sans-serif;
    line-height: 1.2;
}

h3{
    font-size: 1.5rem;
    font-weight: 500;
    font-family: 'Neue Montreal';
}
h4 {
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1;
}

h5{
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
    font-family: 'Neue Montreal';
}
.medium-h2{
    font-size: 2.5rem;
    font-weight: 400;
    
}
.nm-h5{
    font-size: 1.25rem;
    font-weight: 500;
    font-family: 'Neue Montreal';
}


p{
    font-size: 1rem;
    letter-spacing: 0;
}


.e-small-p{
    font-size: 0.75rem; /*12px */
    
     font-family: 'Neue Montreal';
}
.m-small-p{
    font-size: 0.87rem; /*14px */
    
     font-family: 'Neue Montreal';
}
.l-small-p{
    font-size: 1rem; /*16px */
   font-weight: 400;
    font-family: 'Neue Montreal';
}
.ex-small-p{
    font-size: 1.125rem; /*18px */
    
    font-family: 'Neue Montreal';
}

a,p{
    font-family: 'Neue Montreal';
    font-weight: 400;
}

label {
    font-size: 1.125rem;
    margin-bottom: 5px;
}
@media (min-width: 768px) {
    .contact-section .row {
        display: flex;
        justify-content: space-between;
        gap: 30px;
    }

    .contact-form {
        flex: 0 0 60%;
    }

    .contact-section .card {
        flex: 0 0 35%;
        margin-top: 0;
    }
}

@media(max-width:767px){
 h1{
    font-size: 9vw !important;
}

.medium-h1{
 font-size: 50px !important;
}

p{
    font-size: 1.125rem;
    

}
h2{
    font-size: 2.5rem;
    
   
}
h3{
    font-size: 1.25rem !important;
   
}
h1{
    text-align: center;
}
 .groomer-registration .groomer-card {
        padding: 20px;
    }
.contact-form, .contact-section .card{
 width: 100%;
}

.breadcrumb {
    justify-content: center;
}

.hero-banner img {
    width: 60%;
}
.hero-banner{
    text-align: center;
    margin-top: 40px;
}


.product-services-row {
    grid-template-columns: 1fr !important;
}

.connectwithus {
    grid-template-columns: repeat(2, 1fr) !important;
}

}

@media(max-width:500px){
.connectwithus-wapper {
    flex-direction: column !important;
}
}


strong, b {
    font-weight: 500;
    font-size: 1.15rem;
}
/* ------------------------------
    LAYOUT UTILITY CLASSES
------------------------------ */
.container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 1rem;
}
.row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
.dp-grid{
    display: grid;
}

.col {
    flex: 1;
    padding: 0.5rem;
}
.col-40{
    width: 40%;
}
.col-50{
    width: 50%;
}
.col-60{
    width: 60%;
}
.col-100{
    width: 100%;
}
.flex-column {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.flex{
    display: flex;
    align-items: center;
}
.position-r{
position: relative;
}
.position-a{
position: absolute;
}
section{
    padding-top: 120px;
    padding-bottom: 120px;
}
img{
    width: 100%;
    height: auto;
}
.mb-20{
    margin-bottom: 1.25rem;
}
.mt-20{
    margin-top: 1.25rem;
}
.mb-50{
    margin-bottom: 3.125rem;
}
.mt-50{
    margin-top: 3.125rem;
}
.mt-40{
    margin-top: 2.5rem;
}
.mb-40{
    margin-bottom: 2.5rem;
}
.mb-75{
    margin-bottom: 4.5rem;
}
.mt-75{
    margin-top: 4.5rem;
}
.pb-10{
    padding-bottom: 0.625rem;
}
.pt-10{
    padding-top: 0.625rem;
}
.pt-20{
    padding-top: 1.25rem;
}
.pb-20{
    padding-bottom: 1.25rem;
}

.pt-40{
    padding-top: 2.5rem;
}
.pb-40{
    padding-bottom: 2.5rem;
}

a {
    text-decoration: none;
}
.bd-t{
    border-color: var(--border-clr) !important;
    border: solid;
    border-width: 0;
    border-top-width: 1px;
}

.bd-b{
border-color: var(--border-clr) !important;
    border: solid;
    border-width: 0;
    border-bottom-width: 1px;
}

.bd{
    border: 1px solid var(--border-clr);
}

.tx-c{
text-align: center;
}
ul{
    list-style: none;
}
.brd-d-clr{
    border-color:var(--dark-clr);
}
.bdr-o-clr{
    border-color: var(--hl-l-org);
}
.txt-color{
    color: var(--hl-l-org);
}
hr{
    border: solid var(--border-clr);
    border-width: 0 0 1px 0;
}
/* ------------------------------
    BUTTONS
------------------------------ */

.btn-primary, .btn-secondary, .btn-white{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 30px;
  font-family: "Neue Montreal", sans-serif;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  border-radius: 50rem;
  height: 52px;
  border: 1px solid;
}
.btn-primary {
  background: var(--hl-l-org);
  color: var(--light-clr);
  border-color: var(--hl-l-org);
}
.btn-secondary {
  background: var(--dark-clr);
  color: var(--light-clr);
  border-color: var(--dark-clr);
}
.btn-white {
    background: var(--pry-bdy-clr) !important;
  border: 1px solid var(--dark-clr) !important;
  color: var(--dark-clr);
}

.btn-primary-arrow, .btn-secondary-arrow, .btn-white-arrow {
    padding: 11.5px 13px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    border-radius: 50rem;
    transform: translate(-4px, 0);
    height: 43px;
    display: inline-flex;
    align-items: center;
    position: relative;
    top: 1px;
    
}
button{
cursor: pointer;
}

.button-custom {
    background: none;
    border: none;
}

.btn-primary-arrow {
    background: var(--hl-l-org);
}
.btn-primary-arrow svg {
    fill: var(--light-clr);
}


.btn-secondary-arrow{
   background: var(--dark-clr);
}
.btn-white-arrow{
    background: var(--pry-bdy-clr);
   border: 1px solid var(--dark-clr);
}
.btn-secondary-arrow svg{
   fill: var(--light-clr);
}

.btn-primary-effect:hover .btn-primary-arrow, .btn-secondary-effect:hover .btn-secondary-arrow, .btn-white-effect:hover .btn-white-arrow {
   transform: translate(6px, 0);
}


.package-item .btn-primary-arrow, .package-item .btn-secondary-arrow, .package-item .btn-white-arrow , .pet-transf .btn-primary-arrow{
    transform: translate(0px, 0);
    top: 0;
}



.btn-custom {
    padding: 10px 13px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    border-radius: 50rem;
    height: 43px;
    display: inline-flex;
    align-items: center;
    position: relative;
    top: 1px;
}

.btn-custom {
     background: var(--light-clr);
    border: 1px solid var(--border-clr);
    color: var(--dark-clr);
}


.btn-custom.active, .btn-custom:hover.active{
    background: var(--hl-l-org);
    border-color:var(--hl-l-org);
    color: var(--light-clr);
}
.btn-custom:hover{
    background: var(--dark-clr);
    border-color: var(--dark-clr);
    color: var(--light-clr);
}




/* ------------------------------
    HEADER / NAV
------------------------------ */


.sticky {
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.1s ease;
}

.fadeInDown {
    animation: fadeInDown 0.7s ease forwards;
}

@keyframes fadeInDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}



.header-section {
  /* max-width: 1920px; */
  width: 100%;
  margin: 0 auto;
  z-index: 1000;
  background: var(--pry-bdy-clr);
  position: fixed;
  top: 0;
 
}

.header-section .logo {
  max-width: 180px;
}

.ss_header {
    display: grid;
    grid-template-columns: 32.5% 35% 32.5%;
    align-items: center;
    padding: 0.75rem 0;
}

.header-section .logo img {
    width: 100%;
}

.nav-menu-items {
    list-style: none;
    display: flex;
    gap: 2rem;
}
.ss_header .navbar-area {
    justify-self: center;
    font-family: 'Neue Montreal';
    font-weight: 500;
}

.navbar-area ul li a{
    text-decoration: none;
    color: var(--body-clr);
}

.navbar-area ul li a:hover, .navbar-area ul li a:active,.navbar-area ul li a:focus{
    color: var(--hl-d-org);
}
.nav-btns {
    justify-self: right;
}
.ss-booking-item {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    justify-content: flex-end;
}


.ss-float-cart {
    display: flex;
    justify-content: center;
    gap: 10px;
}
/* ------------------------------
    sidebar
------------------------------ */

#openSidebarBtn{
    position: relative;
    /* top: 20px;
    left: 20px; */
    background: black;
    color: white;
    padding: 15px 14px;
    font-size: 20px;
    border: none;
    cursor: pointer;
    z-index: 1001;
    border-radius: 50px;
    display: none;
}

#sidebar{
 position: fixed;
    top: 0;
    left: -80%;
    width: 80%;
    height: 100vh;
    background-color: var(--pry-bdy-clr);
    padding: 20px;
    box-shadow: 3px 0 10px rgba(0, 0, 0, 0.2);
    transition: left 0.55s cubic-bezier(0.82, 0.24, 0.23, 0.29);
    z-index: 1002;
}

.menu-button {
      -webkit-transition: 0.3s;
      transition: 0.3s;
    }

    .menu-button .bar:nth-of-type(1) {
      margin-top: 0px;
    }

    .menu-button .bar:nth-of-type(3) {
      margin-bottom: 0px;
    }

    .bar {
      position: relative;
      display: block;
      width: 24px;
      height: 3px;
      margin: 6px auto;
      background-color: #fff;
      border-radius: 10px;
      -webkit-transition: 0.3s;
      transition: 0.3s;
    }

    .menu-button:hover .bar:nth-of-type(1) {
      -webkit-transform: translateY(1.5px) rotate(-6deg);
      -ms-transform: translateY(1.5px) rotate(-6deg);
      transform: translateY(1.5px) rotate(-6deg);
    }

    .menu-button:hover .bar:nth-of-type(2) {
      opacity: 0.9;
    }

    .menu-button:hover .bar:nth-of-type(3) {
      -webkit-transform: translateY(-1.5px) rotate(6deg);
      -ms-transform: translateY(-1.5px) rotate(6deg);
      transform: translateY(-1.5px) rotate(6deg);
    }

.side-book-now-btn{
    margin-top: 40px;
}

.cross .bar:nth-child(2) {
    -webkit-transform: translateY(-5px) rotate(45deg);
    -ms-transform: translateY(-5px) rotate(45deg);
    transform: translateY(-5px) rotate(45deg);
}
.cross .bar:nth-child(1) {
    -webkit-transform: translateY(4px) rotate(-45deg);
    -ms-transform: translateY(4px) rotate(-45deg);
    transform: translateY(4px) rotate(-45deg);
}

.cross .bar
 {
    background-color: #000;
}

.sidebar-nav-item a{
padding: 6px 0;
}

/* ------------------------------
    POPUP
------------------------------ */
.model-popup-main{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    display: none;
    width: 100%;
    height: 100%;
    background: #00000045;
}

.custom-modal-popup {
    width: 750px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
    gap: 20px;
    background: #fff;
    padding: 20px;
    border-radius: 12px;
}
button.btn-close.cross {
    /* background: #FFF; */
    border: unset;
    right: 0;
}

.popup-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.popup-row .col-50 {
    display: flex;
    flex-direction: column;
}

.popup-row.flex {
    gap: 15px;
}

.popup-form input, .popup-form select {
    padding: 12px;
    border-radius: 6px;
    border: 1px solid;
    border-color: #d1d1d1;
    font-size: 0.87rem;
}
select,
input {
  -webkit-appearance: none; /* Removes default Safari styling */
  appearance: none; /* Resets default browser styling */
  background-color: #fff; /* Set a background to avoid transparency issues */
  color: var(--text-dark);
  padding: 12px;
    border-radius: 6px;
    border: 1px solid;
    border-color: #d1d1d1;
    font-size: 0.87rem;
}


.popup-form input:focus, .popup-form select:focus,.popup-form input:focus-visible, .popup-form select:focus-visible,.popup-form input:active, .popup-form select:active {
    border-color: #FF8231;
    outline: 0;
 
}
.form-check-input[type="radio"]:checked {
    background: #FF8231;
}

    
.popup-form input::placeholder{
    font-size: 0.87rem;
    
}

 input::placeholder,
 select::placeholder {
  color: #999999; /* Your desired placeholder color */
  opacity: 1; /* Fix Safari's default opacity */
   text-align: left;
}

/* Safari fix for placeholder */
 input::-webkit-input-placeholder,
 select::-webkit-input-placeholder {
  color: #999999;
  opacity: 1;
   text-align: left;
}

/* Firefox fix */
input::-moz-placeholder,
select::-moz-placeholder {
  color: #999999;
  opacity: 1;
   text-align: left;
}

/* Edge and IE fix */
 input:-ms-input-placeholder,
 select:-ms-input-placeholder {
  color: #999999;
   text-align: left;
}

/* Old Safari (optional fallback) */
 input:-webkit-autofill::placeholder {
  color: #999999;
   text-align: left;
}


.radio-btn .form-check {
    display: inline-flex;
    gap: 10px;
}

.radio-btn {
    display: flex;
    gap: 20px;
}

/* ------------------------------
    FOOTER
------------------------------ */


.main-footer {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-items: center;
    gap: 20px;
}
.footer-menu ul li, .footer-contact li {
    padding: 4px 0;
}
.footer-menu ul li a , .footer-contact a{
    color: var(--dark-clr);
}


.footer-menu ul li a:hover, .footer-contact a:hover {
    color: var(--light-clr);
}

.footer-contact img{
    width: 25px;
}

.footer-contact a {
    align-items: flex-start;
    gap: 10px;
}

.splitmoon{
    color:#000;
    text-decoration:underline;
    transition:all 0.3s ease-in-out;
}
.splitmoon:hover{
    color:#fff;

}

.footer-copyright{
    justify-content: space-between;
}

/* ------------------------------
    RESPONSIVE HELPERS
------------------------------ */
/* @media(max-width:1300px){
.services-hero-section h1 {
font-size: 6vw;
}
} */
@media(max-width:1230px){
h3{
    font-size: 1.7rem;
    line-height: 1.2;
}
}

@media(max-width:1130px){
.trust-list h2 {
    font-size: 4rem;
}
}

@media(max-width:1024px){
h1{
    font-size: 4.5vw;
}


.ss-image-box{
     grid-template-columns: repeat(2, 1fr) !important;
     height: 100% !important;
}
.ss-imgb-item {
    height: 100% !important;
    }
.trust-item {
    grid-template-columns: repeat(2, 1fr) !important;
}

.nav-menu-items {
    gap: 1.25rem;
}


.main-footer {
    grid-template-columns: repeat(3, 1fr);
}
.footer-logo {
    grid-column: 1 / 5;
    justify-self: center;
    text-align: center;
    margin-bottom: 3rem;
}
.footer-logo img {
    width: 300px;
}
.footer-logo p {
    width: 500px;
}
.cs-icon-box {
    grid-template-columns: repeat(2, 1fr) !important;
}



}

@media(max-width:921px){
 .navbar-area {
    display: none;
}

#openSidebarBtn{
    display: block;
}
.custom-nav {
    display: flex;
}
.ss_header {
    grid-template-columns: 80% 20%;
}

.ss_header a.btn-secondary-effect {
    display: none;
}

}

@media(max-width:860px){
.gs-icon-box {
    width: 100% !important;
}
}

@media(max-width:767px){
.row {
    flex-direction: column;
}
.col-50, .col-40 {
    width: 100%;
}

.hero-section {
    text-align: center;
}
.hero-section .col-40 {
    margin-top: 3rem;
}

.footprint-1 {
    right: 30% !important;
    top: -15px;
}
.footprint-2 {
    right: 30px !important;
    top: -20px;
}
.footprint-3 {
    right: 30px !important;
    bottom: 40%;
}
br{
    display: none !important;
}
.hw-bottom-desc {
    width: 100% !important;
}

.btn-primary, .btn-secondary, .btn-white {
  padding: 10px 20px;
}

/* .btn-primary-arrow, .btn-secondary-arrow, .btn-white-arrow {
    padding: 10px 8px;
} */
.care-section .col-50 {
    margin-top: 50px;
}
.care-section h3, .care-section h2{
    text-align: center;
}
.our-impact h2, .our-impact p {
    text-align: center;
}


/* .services-hero-section img {
    width: 160px !important;
} */

.products-services-item {
    width: 100% !important;
}


.custom-modal-popup {
    width: calc(100% - 40px);
}
.custom-modal-popup .col-40 {
    display: none;
}

.custom-modal-popup .col-60 {
    width: 100%;
}


}

@media(max-width:600px){
    .footer-logo p {
    width: 100%;
}
.footer-contact {
    grid-column: 1 / 5;
}
.main-footer .footer-menu:nth-child(3) {
    grid-column: 3;
}
.our-solution {
    padding: 70px 0;
}

.pet-transf {
    padding-top: 0;
}

.hero-section p {
    padding-bottom: 1.25rem;
}

.hero-section h3 {
    padding-top: 1.25rem;
}
.medium-h1 {
font-size: 9vw !important;
}


/* .services-hero-section img {
    width: 29vw !important;
} */

.booking-form {
    width: 85vw;
}

.success-card {
    width: 100% !important;
}

.popup-row{
    flex-direction: column;
}

    .success-card {
        padding: 1.2rem;
    }
    .success-card h3 {
        font-size: 1.5rem;
    }
    .appointment-details table td {
        font-size: 0.95rem;
    }
.appointment-details {
    width: 100% !important;
}




div#petServiceModal label {
    font-size: 0.9rem ;
}

.popup-row.flex.date-time {
    flex-direction: row !important;
}

.popup-form, .popup-row.flex  {
    gap: 5px ;
}


div#petServiceModal h3 {
    font-size: 1rem !important;
}

div#petServiceModal p {
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.popup-form select, .popup-form input {
    padding: 10px;
}

div#petServiceModal .btn-primary {
    height: 45px;
}



.modal-dialog {
    width: calc(100% - 40px) !important;
}
.modal-content.otp-modal {
    width: 100%;
}

.otp-container input {
    width: 40px !important;
    height: 50px !important;
}

.footer-copyright{
    flex-direction: column;
}


}   

/* ------------------------------
   HOME PAGE CSS
------------------------------ */
.hero-section{
    padding-bottom: 0;
}




/* groming-struggle */
.footprint-1 {
    right: 40px;
    top: -15px;
}
.footprint-2 {
    right: -50px;
    top: -20px;
}
.footprint-3 {
    right: -10px;
    bottom: 40%;
}

.gs-icon-box-con {
    width: fit-content;
}

.gs-icon-box {
    display: grid;
    grid-template-columns: 80px calc(100% - 80px);
    padding: 10px;
    background: var(--pry-bdy-clr);
    gap: 0;
    border-radius: 10px;
    border: 1px solid var(--border-clr);
    align-items: center;
    width: 45rem;
    cursor: pointer;
}
.ib-img {
    width: 65px;
    padding: 12px;
    height: 65px;
    border-radius: 8px;
}

.gs-icon-box {
  filter: grayscale(0);
  transition: filter 0.3s ease;
}

/* Jab kisi box pe hover ho */
.gs-icon-box:hover {
  filter: grayscale(0);
}


/* Jab parent pe hover ho aur koi ek child hover me ho */
.gs-icon-box-con:hover .gs-icon-box {
  filter: grayscale(1); /* sab pe grey lagao */
}

.gs-icon-box-con:hover .gs-icon-box:hover {
  filter: grayscale(0); /* sirf jispe hover hai woh colored ho */
}




.our-solution{
    overflow: hidden;
}



/* Our Solution Section */
   .our-solution-accordion {
            display: flex;
            width: 100%;
            max-width: 1000px;
            height: 400px;
            gap: 10px;
        }
        
        .our-solution-panel {
            flex: 1;
            border-radius: 20px;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.8s cubic-bezier(0.65, 0, 0.35, 1);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }
        
        .our-solution-panel.active {
            flex: 5;
        }
        
        .our-solution-panel img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: all 0.4s cubic-bezier(0.65, 0, 0.35, 1);
        }
        
        .our-solution-content {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 20px;
            background: linear-gradient(to top, rgba(0, 0, 0), transparent);
            color: white;
            transform: translateY(100%);
            opacity: 0;
            transition: all 0.8s ease;
        }
        
        .our-solution-panel.active .our-solution-content {
            transform: translateY(0);
            opacity: 1;
            transition-delay: 0.6s;
        }
        
        .our-solution-panel h3 {
            margin-bottom: 10px;
        }
        
        .our-solution-panel p {
            margin-bottom: 15px;
        }

.ss-icon-bg {
    width: 75px;
}
.ss-icon-bg.bone {
    top: 10%;
    right: 0;
    transform: translate(40px, 0);
}
.ss-icon-bg.paw {
    bottom: 0;
}
.ss-icon-bg.ball {
    bottom: 0;
    right: 0;
    transform: translate(40px, 0);
}




/* How its work */
.hw-image-box {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    overflow-x: auto;
    padding: 20px;
    overflow-y: hidden;
}

.hw-imgb-item-img {
    width: 70%;
}
.hw-imgb-item {
    width: 350px;
    justify-content: flex-end;
    gap: 20px;
}
.h-works-line {
    top: 45%;
    height: fit-content;
    z-index: -1;
}

.hw-image-box::-webkit-scrollbar {
  height: 10px;
}
/* Track */
.hw-image-box::-webkit-scrollbar-track {
border: 1px solid rgba(29, 145, 228, 0.5);
  background: var(--pry-bdy-clr);
  border-radius: 10px;
}
 
/* Handle */
.hw-image-box::-webkit-scrollbar-thumb {
  background: var(--hl-l-org);
  border-radius: 10px;
}

.care-section{
    padding: 0;
}
.cs-ib-item img {
    width: 50px;
}

.cs-icon-box {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.cs-ib-item {
    width: 100%;
    background: rgba(248, 149, 8, 0.17);
    padding: 20px;
    border-radius: 10px;
    height: 100%;
    border: 1px solid rgba(248, 149, 8, 0.2);
}

/* our-package */

.our-package {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding-top: 2.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 20px;
}

.package-item {
    background: var(--pry-bdy-clr);
    padding: 17px 17px 20px;
    border-radius: 15px;
    box-shadow: 0px 0px 2px 0px rgba(123, 123, 123, 0.25);  
    width: 307px;
    height: 650px;
}

.price-detail {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-content: space-between;
    align-items: center;
    height: 120px;
}

.price-detail h3 {
    grid-column:1;
    grid-row: 2;

}
.price-detail h5, .price-detail h3{
    text-align: left;
}
.pack-label {
    grid-column: 2;
    justify-self: center;
    border: 1px solid;
    padding: 6px 16px;
    border-radius: 50px;
}
.pack-desc {
    grid-column: 2;
    text-align: right;
}

.package-mark img{
    width: 25px;
}

.package-item ul li {
    gap: 10px;
}

.premium-package-1::after {
    content: "Recommended by Pet Owners";
    position: absolute;
    top: -40px;
    left: 50%;
    color: var(--light-clr);
    background: linear-gradient(90deg, #F2800E 0%, #FA0 100%);
    width: 100%;
    height: 70px;
    transform: translate(-50%);
    z-index: -2;
    border-radius: 15px;
    padding-top: 10px;
    font-size: 1rem; /*16px */
    line-height: 1.3;
    font-family: 'Neue Montreal';
}
.premium-package-2::after {
    content: "Most Booked for a Reason";
    position: absolute;
    top: -40px;
    left: 50%;
    color: var(--light-clr);
    background: linear-gradient(90deg, #F2800E 0%, #FA0 100%);
    width: 100%;
    height: 70px;
    transform: translate(-50%);
    z-index: -2;
    border-radius: 15px;
    padding-top: 10px;
    font-size: 1rem; /*16px */
    line-height: 1.3;
    font-family: 'Neue Montreal';
}

.our-package::-webkit-scrollbar {
  height: 10px;
}
/* Track */
.our-package::-webkit-scrollbar-track {
border: 1px solid rgba(29, 145, 228, 0.5);
  background: var(--pry-bdy-clr);
  border-radius: 10px;
}
 
/* Handle */
.our-package::-webkit-scrollbar-thumb {
  background: var(--hl-l-org);
  border-radius: 10px;
}

.package-item > a {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    width: calc(100% - 40px);
}

.package-item {
    position: relative;
}


/* our impact */

.trust-item {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.trust-list h2 {
    font-size: 3.2rem;
}

/* review */

.swiper-slide.review-slide{
    width: 427px;
    background: var(--light-clr) !important;
}
.review-item {
    width: 100%;
    flex-shrink: 0;
    padding: 16px;
    border: 1px solid rgba(29, 145, 228, 0.5);
    border-radius: 15px;
    height: 500px;
}
.review-item img{
    border-radius: 8px;
    aspect-ratio: 2 / 1.3;
    object-fit: cover;
}

.review-item video {
    width: 100%;
    object-fit: cover;
    border-radius: 10px;
    aspect-ratio: 2 / 1.3;
}

.review-detail {
    display: grid;
    grid-template-columns: 50% 50%;
}

.client-desc {
    grid-column: 1 / 3;
    padding-top: .75rem;
    padding-bottom: 2rem;
}
.review-star {
    display: flex;
    justify-self: right;
    align-self: end;
}


.swiper.review-slider{
    height: 550px;
}
 
/* @media (max-width:639px){
    .swiper.review-slider{
    height: 650px;
}
} */


/* pet-slider */

.pet-item{
    flex-shrink: 0;
    clip-path: path("M60 0.5H100.254C117.062 2.77506 136.035 4.05762 156.112 4.05762C176.19 4.0576 195.161 2.77504 211.97 0.5H252C284.861 0.5 311.5 27.1391 311.5 60V247.392C311.5 260.052 307.089 269.127 299.712 275.594C292.315 282.078 281.893 285.978 269.817 288.174C245.658 292.567 215.116 290.109 189.581 288.194C178.929 287.396 167.705 286.969 156.112 286.969C144.545 286.969 133.344 287.393 122.713 288.188C97.1241 290.103 66.5085 292.589 42.2891 288.21C30.1834 286.021 19.7346 282.127 12.3184 275.638C4.92225 269.166 0.5 260.078 0.5 247.392V60L0.504883 59.2314C0.913144 26.9806 26.9806 0.913251 59.2314 0.504883L60 0.5Z");
  -webkit-clip-path: path("M60 0.5H100.254C117.062 2.77506 136.035 4.05762 156.112 4.05762C176.19 4.0576 195.161 2.77504 211.97 0.5H252C284.861 0.5 311.5 27.1391 311.5 60V247.392C311.5 260.052 307.089 269.127 299.712 275.594C292.315 282.078 281.893 285.978 269.817 288.174C245.658 292.567 215.116 290.109 189.581 288.194C178.929 287.396 167.705 286.969 156.112 286.969C144.545 286.969 133.344 287.393 122.713 288.188C97.1241 290.103 66.5085 292.589 42.2891 288.21C30.1834 286.021 19.7346 282.127 12.3184 275.638C4.92225 269.166 0.5 260.078 0.5 247.392V60L0.504883 59.2314C0.913144 26.9806 26.9806 0.913251 59.2314 0.504883L60 0.5Z");
  clip-rule: evenodd;
      width: 312px;
    height: 292px;
}
.pet-item img {
    object-fit: cover;
    width: 312px;
    height: 292px;
}
.pet-slider {   
    height:350px;
    width: 100%;
}

.swiper-slide.pet-item {
    width: 312px;
}

.pet-slider .swiper-button-next, .review-slider .swiper-button-next {
    top: unset !important;
    left: calc(100% - 49%) !important;
    right: unset !important;
    padding: 20px 20px 20px 23px;
    
}
.pet-slider .swiper-button-prev, .review-slider .swiper-button-prev {
    top: unset !important;
    right: calc(100% - 49%) !important;
    left: unset !important;
    padding: 20px 23px 20px 20px;
}

.pet-slider .swiper-button-next, .pet-slider .swiper-button-prev,.review-slider .swiper-button-next, .review-slider .swiper-button-prev  {
    bottom: 0;
    top: unset;
    border-radius: 30px;
    background: #000;
    transition: all 0.3s ease-in-out;
}

.pet-slider .swiper-button-next:hover,.pet-slider .swiper-button-prev:hover, .review-slider .swiper-button-next:hover,.review-slider .swiper-button-prev:hover{
    background: var(--hl-l-org);
}

.pet-slider .swiper-button-next:after, .pet-slider .swiper-button-prev:after, .review-slider .swiper-button-next:after, .review-slider .swiper-button-prev:after  {
    font-size: 1.5rem;
    color: #ffffff;
}





/* accordion  */
.accordion {
  max-width: 750px;
  margin: 2rem auto;
  font-family: sans-serif;
  background: #fdfcef;
  border-radius: 8px;
}

.accordion-item {

  margin-bottom: 0.5rem;
  overflow: hidden;
  transition: box-shadow 0.3s ease;
  padding: 1rem;
  border-radius: 15px;
  border: 1px solid #CFCFCF;
  background: #FFF;
}

.accordion-header {
  width: 100%;
  background: none;
  border: none;
  outline: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.accordion-item.active .accordion-header {
  color: #ff8231;
}

.accordion-item.active .accordion-body {
  max-height: 300px;
  padding-top: 1rem;
  opacity: 1;
}

.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #333;
  opacity: 0;
}

.accordion .icon {
  font-weight: bold;
  color: var(--hl-l-org);
}
.accordion .icon svg{
  fill:#3D3D3D;
}

.accordion-item.active .icon svg{
  fill:var(--hl-l-org);
}


/* services page css */

/* .services-hero-section img {
    width: 200px;
    border-radius: 10px;
}

.services-hero-section img {
    width: 200px;
    border-radius: 10px;
    border: 1px solid #000;
} */

/* .services-hero-img1 {
    transform: translate(30px) rotate(-10deg);
}

.services-hero-img2 {
    transform: translate(0px) rotate(-5deg);
}

.services-hero-img3 {
    transform: translate(-30px) rotate(10deg);
} */

.google-star {
    display: inline-flex;
    align-items: center;
}


.google-review {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    color: #000;
 
}

.google-review p {
    text-decoration: underline;
}

.bg-line-img {
    top: -33%;
    left: 15%;
    z-index: 0;
}
.services-hero-section .col-100 {
    z-index: 1;
}




.packages-item img {
    width: 100px;
    border-radius: 10px;
}

.services-page-category {
    gap: 15px;
}

.services-page-category a {
    color: #000;
    padding: 5px;
    border: 1px solid var(--border-clr);
    border-radius: 10px;
   
}

.addons-accordion {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.addons-accordion-button {
    width: 100%;
    background-color: var(--hl-l-org);
    padding: 1rem 1.5rem;
    font-size: 16px;
    font-weight: 600;
    text-align: left;
     border: 1px solid var(--hl-l-org);
    color: var(--light-clr);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.addons-accordion-button.collapsed {
    background-color: var(--light-clr);
    border: 1px solid var(--border-clr);
    color: var(--dark-clr);
}
.addons-accordion-button.collapsed:hover {
    background-color: var(--hl-l-org);
    color: var(--light-clr);
    border: 1px solid var(--hl-l-org);
}

.addons-accordion-button .icon {
    transition: transform 0.3s ease;
    height: 16px;
}
.addons-accordion-button.collapsed .icon {
    transform: rotate(0deg);
}
.addons-accordion-button:not(.collapsed) .icon {
    transform: rotate(180deg);
}

.addons-accordion-collapse {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s ease;
    background-color: #fff;
    border-radius: 0 0 4px 4px;
}

.addons-accordion-collapse.show {
    max-height: fit-content;
}
.addons-accordion-body {
    padding: 1rem;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #333;
}

.hide {
    display: none;
}
.services-page-category a:hover {
    border-color: var(--hl-l-org);
}
.addons-accordion-header {
    margin: 0;
}


.addons-package-card {
    display: grid;
    /* grid-template-columns: calc(70% - 20px) 30%; */
    gap: 20px;
    padding: 1rem 0 1.5rem;
    margin-bottom: 10px;
    border: dashed var(--border-clr);
    border-width:0 0 1px 0;
    border-radius: 10px;
    /* background: var(--pry-bdy-clr); */
}
.addons-package-card-item.card-item-2 {
    display: flex;
    flex-direction: row;
}
.addons-package-card-item.card-item-2 .row {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}
.service-desc {
    font-size: 0.9rem;
    color: #616161;
}
.custom-text-discount{
    font-size: 14px;
    color: green;
    margin-top: 2px;
    margin-left:20px;
}
@media (max-width:407px) {
    .custom-text-discount{
    margin-left:0px;
}
}
.addons-package-card-item .addToCart > .btn {
padding: 10px 13px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    border-radius: 50rem;
    height: 43px;
    display: inline-flex;
    align-items: center;
    background: var(--hl-d-org);
    color: var(--light-clr);
    border: 1px solid var(--hl-d-org);
    width: 100px;
    justify-content: center;
}
.addons-package-card-item:nth-child(2) {
    align-items: flex-end;
}
.addons-package-card-item h4 {
    margin-bottom: 0.5rem;
}
.addons-package-card-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 15px;
}

.addons-accordion-item:has(.addons-accordion-button) .addons-accordion-collapse{
    border: solid var(--border-clr);
    border-width: 0 1px 1px 1px;
    border-radius: 0px 0px 12px 12px;
}
.addons-accordion-item:has(.addons-accordion-button.collapsed) .addons-accordion-collapse{
    border-width: 0;
    transition: all 0.3s ease-in;
}

.d-none{
    display: none;
}

.product-services-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
}
.cart-empty-sec img {
    width: 50px;
}

div#cartCol .custom-cart-item {
    position: sticky;
    top: 100px;
}

.cart-empty-sec {
    width: 100%;
    background: var(--light-clr);
    padding: 100px;
    text-align: center;
    border-radius: 10px;
    border: 1px solid var(--border-clr);
    position: sticky;
    top: 100px;
}

.cart1 {
    padding: 20px;
     border: 1px solid var(--border-clr);
    border-radius: 12px;
}

.cart-item {
    gap: 20px;
    padding-bottom: 10px;
    margin-bottom: 12px;
    border: 1px solid var(--border-clr);
    border-width: 0 0 1px 0;
    align-items: stretch;
}
.cart-item .category {
    width: 20%;
    height: 90px;
}
.cart-item .category img {
    border-radius: 10px;
    height: 85px;
}
.cart-item .pro {
    width: 60%;
}
.cart-item .price {
    width: 20%;
    height: 85px;
}

.removeItem.cartItems {
    padding: 0;
    background: #fff;
    color: black;
    border: none;
    font-size: 14px;
    text-decoration: underline;
    height: auto;
}

.form-check-label{
  
    margin-bottom: 0px;
}

.badge{
    background: #198754;
    padding: 4px 10px;
    border-radius: 30px;
    margin-right: 10px;
    color: var(--light-clr);
}
.order-summary-amt{
    justify-content: space-between;
}

.flex.coupon-item {
    justify-content: space-between;
    gap: 10px;
}

input#discount_code {
    width: 70%;
    height: 43px;
    max-width: 100% !important;
    border-radius: 8px;
    border: 1px solid var(--border-clr);
    padding: 10px;
}

.btn.useDiscount {
    width: 30%;
    border-radius: 8px !important;
    justify-content: center;
}
button#bookNow {
    width: 100%;
    justify-content: center;
}
button#bookNow:hover {
    background: var(--dark-clr);
    border: 1px solid var(--dark-clr);
}


.form-check-btn input[type="radio"] {
            appearance: none;
            width: 20px;
            height: 20px;
            border: 1px solid var(--border-clr);
            border-radius: 50%;
            outline: none;
            cursor: pointer;
        }
       .form-check-btn input[type="radio"]:checked {
            background-color: var(--hl-l-org);
            border: 1px solid var(--hl-l-org);
        }

.form-check-btn {
    gap: 6px;
}




.modal{
     position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    display: none;
    width: 100%;
    height: 100%;
    background: #00000045;
}
.modal.show {
    display: block;
    animation: fadeIn 0.3s ease-in-out;
}

.modal-dialog {
 width: fit-content;
    margin: 0 auto;
    display: flex;
    align-items: center;
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
    gap: 20px;
    background: #fff;
    padding: 20px;
    border-radius: 12px;
}
.verification-icon i {
    font-size: 3rem;
    background: #0fa53033;
    padding: 20px 23.5px;
    border-radius: 50px;
    color: #0fa530;
}
.otp-modal input#mobile {
    width: 100%;
    height: 40px;
    max-width: 100% !important;
    border-radius: 8px;
    border: 1px solid var(--border-clr);
    padding: 10px;
    text-align: center;
    font-size: 1.2rem;
}

.otp-container input {
    width: 50px;
    height: 60px;
    margin: 0 4px;
    border-radius: 10px;
    border: 1px solid #acacac;
    font-size: 1.5rem;
    text-align: center;
}

.btn-close-header {
    text-align: right;
}
.btn-close {
    background: none;
    border: none;
    /* font-size: 1.5rem; */
    cursor: pointer;
}
#bookingModal .btn-close{
    top: 0;
}
#resendText{
    cursor: pointer;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* For Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* For Firefox */
input[type=number] {
  -moz-appearance: textfield;
}


.otpverify-sec:has(.otpError) input {
    border: 1px solid #ec0000;
    transition: all 0.3s ease-in;
  -webkit-animation: blink 1s linear 5;
  -moz-animation: blink 1s linear 5;
  animation: blink 1s linear 5;
}
@keyframes blink {  
 0%, 100% { border-color: red; }
  50% { border-color: black; }
}
@-webkit-keyframes blink {
 0%, 100% { border-color: red; }
  50% { border-color: black; }
}


/* Modal Body */
#bookingForm .modal-body {
    padding: 20px 0;
}

/* Form Inputs */
#bookingForm .form-control, #bookingForm .form-select {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.95rem;
    transition: all 0.3s ease-in-out;
}

#bookingForm .form-control:focus,#bookingForm .form-select:focus {
    border-color: var(--hl-l-org);
    box-shadow: 0 0 0 2px rgba(242, 128, 14, 0.2);
    outline: none;
}

/* Labels */
#bookingForm .form-label {
    font-size: 0.92rem;
    margin-bottom: 5px;
    color: #333;
   
}

/* Adjust Date Picker Arrows */
#bookingForm input[type="date"]::-webkit-calendar-picker-indicator {
    filter: brightness(0) saturate(100%) invert(65%) sepia(33%) saturate(4224%) hue-rotate(337deg) brightness(102%) contrast(101%);
}



.booking-form {
    display: grid;
    grid-template-columns: 50% 25% 25%;
}

.booking {
    display: flex;
    flex-direction: column;
    margin: 10px 8px;
}

.booking.col-2, .booking.col-8, .booking.col-10 {
    grid-column: 2 / 4;
}

.booking.col-3 {
    grid-column: 1 / 4;
}

#bookingForm .modal-footer {
    display: flex;
    justify-content: space-between;
    border:1px solid var(--border-clr);
    border-width:1px 0 0 0;
    padding-top: 10px;
}




.success-card {
    background: var(--light-clr);
    max-width: 600px;
    width: 100%;
    text-align: center;
    padding: 2rem;
    animation: fadeInUp 0.6s ease;
    margin: auto;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}
.success-icon {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 1rem;
    background:var(--light-clr); /* Green circle */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: 0 0 15px rgba(40, 167, 69, 0.3);
}

.success-icon::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(40, 167, 69, 0.2);
    border-radius: 50%;
    animation: ripple 1.5s infinite ease-out;
    z-index: -1;
}

@keyframes ripple {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

.success-icon svg {
    width: 2.5rem;
    height: 2.5rem;
}



.success-card h3 {
    color: var(--success-green);
    font-weight: 600;

}

.success-card p.lead {
    color: var(--text-muted);
 
}

.appointment-details {
    background: #f3f3f3;
    border-radius: 0.8rem;
    padding: 1rem;
    text-align: left;
    width: 70%;
}



.appointment-details table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
    color: var(--text-dark);
}

.appointment-details table td {
    padding: 0.5rem 0;
    font-size: 1rem;
    border-bottom: 1px solid #eee;
}

.appointment-details table td:first-child {
    color: var(--text-muted);
}

.success-back-btn {
    background: var(--success-green);
    color: var(--light-clr);
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: background 0.3s ease;
}

.success-back-btn:hover {
    background: #0c8e28;
}

.support-footer {
    border-top: 1px solid #eee;
    margin-top: 1.5rem;
    padding-top: 1rem;
}

.support-footer h5 {
    color: var(--primary-color);
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.support-footer p {
    color: var(--text-muted);
    font-size: 0.95rem;
}

.support-footer a {
    color: var(--primary-color);
    text-decoration: underline;
}




        /* groomer registration form css  */

        /* General Page Styles */
.groomer-registration .groomer-card {
    /* background: var(--pry-bdy-clr); */
    border-radius: 15px;
    /* box-shadow: rgba(219, 126, 4, 0.1) 0px 0px 5px 0px, rgba(255, 166, 0, 0.1) 0px 0px 1px 0px; */
    border: 2px solid var(--border-clr);
    max-width: 600px;
    margin: auto;
    padding: 30px 25px;
    
}


.groomer-registration p {
    color: #555;
    text-align: center;
}


.groomer-registration .form-label {
    font-weight: 500;
    margin-bottom: 5px;
    display: block;
    color: #333;
}

.groomer-registration input,
.groomer-registration select,
.groomer-registration textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 15px;
    transition: all 0.3s ease-in-out;
    background: var(--pry-bdy-clr);
}

.groomer-registration input:focus,
.groomer-registration select:focus,
.groomer-registration textarea:focus {
    border-color: #FF8C42;
    box-shadow: 0 0 8px rgba(255, 140, 66, 0.3);
    outline: none;
}

.groomer-registration textarea {
    resize: none;
}



/* =================== CONTACT SECTION =================== */
.contact-section {
    background: linear-gradient(360deg, #fffff2, transparent);
    padding: 60px 20px;
  
}

.contact-section h2::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: #FF8C42;
    margin: 10px auto 0;
    border-radius: 2px;
}
.contact-section .row{
    align-items: flex-start;
}
.contact-form {
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    border-radius: 10px;
    padding: 30px;
    margin-bottom: 40px;
}


.contact-form .form-control,
.contact-form .form-select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.contact-form .form-control:focus,
.contact-form .form-select:focus {
    border-color: #FF8C42;
    box-shadow: 0 0 8px rgba(255, 140, 66, 0.2);
    outline: none;
}

.contact-form textarea.form-control {
    resize: none;
}

.contact-form .btn {
    width: 100%;
    padding: 12px;
    border-radius: 50px;
    background: #FF8C42;
    border: none;
    color: #fff;
    transition: all 0.3s ease;
}

.contact-form .btn:hover {
    background: #ff7043;
    box-shadow: 0 5px 15px rgba(255, 112, 67, 0.3);
}

.contact-form .btn + .btn {
    margin-top: 10px;
}

/* Whatsapp Button */
.contact-form .btn[style*="background: #4CAF50;"] {
    background: #4CAF50 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =================== CONTACT CARD =================== */
.contact-section .card {
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    border-radius: 10px;
    padding: 20px;
    margin-top: 20px;
}

.contact-section .card-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
}

.contact-section .card-body p {
    margin: 10px 0;
    font-size: 1rem;
    color: #555;
}

.contact-section .card-body p strong {
    color: #000;
}

.contact-section .card-body a {
    color: #FF8C42;
    text-decoration: none;
}

.contact-section .card-body a:hover {
    text-decoration: underline;
}


/* ===== Blog Section Styles ===== */

.breadcrumb {
    gap: 20px;
}
.breadcrumb-item a {
    color: var(--body-clr);
}

.breadcrumb-item.active a {
    color: var(--hl-l-org);
}

.blog-section {
    padding: 80px 0;
 background: linear-gradient(360deg, #fffff2, transparent);
    color: #333;
}


.blog-section h2::after {
    content: "";
    display: block;
    width: 60px;
    height: 4px;
    background: #FFAA00;
    margin: 16px auto 0;
    border-radius: 50px;
}


/* ===== Blog Grid ===== */
.blog-section .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}



.blog-card .blog-img img {
    aspect-ratio: 4 / 2.4;
    object-fit: cover;
    transition: transform 0.4s ease;
    border-radius: 10px;
}

.blog-card:hover .blog-img img {
    transform: scale(1.03);
}

/* ===== Blog Content ===== */

.blog-card h4 {
    color: var(--dark-clr);
    transition: color 0.3s ease;
}

.blog-card:hover h4 {
    color: #FF7A00;
}

.blog-section span {
    font-weight: 500;
    color: #0E1319;
    text-transform: uppercase;
    font-size: 0.8rem;
}


.blog-content {
    display: grid;
    grid-template-columns: 50% 50%;
    padding: 20px 10px 10px 10px;
}

.blog-content h4 {
    grid-column: 1 / 3;
}

.blog-content h4 {
    margin-top: 1rem;
}

.blog-content .flex {
    gap: 10px;
}


/* === SINGLE BLOG PAGE STYLES === */

.single-blog-section {
    background: linear-gradient(360deg, #fffff2, #fff);

}

.single-blog-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
}

@media (max-width: 992px) {
    .single-blog-grid {
        grid-template-columns: 1fr;
    }
}

/* === Blog Banner === */
.blog-banner img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
   
}


/* === Blog Meta === */
.blog-meta {
    gap: 20px;
}
.blog-meta .flex {
    gap: 15px;
}



/* === Blog Description === */
.blog-description {
    font-size: 16px;
    line-height: 1.8;
    color: #444;
}

.blog-description p {
    margin-bottom: 15px;
}

.blog-description img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 15px 0;
}

/* === Recent Posts Sidebar === */
.recent-posts{
    position: relative;
}
.recent-post-item {
    background-color: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 80px;
}

.recent-posts-title {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
    position: relative;
}

.recent-posts-title::after {
    content: "";
    width: 40px;
    height: 3px;
    background: #ff914d;
    display: block;
    margin-top: 5px;
    border-radius: 2px;
}

.recent-posts-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.recent-posts-list li {
    margin-bottom: 15px;
}

.recent-post-link {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    color: #444;
    transition: color 0.3s ease;
}

.recent-post-link:hover {
    color: #ff914d;
}

.recent-post-thumb img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.recent-post-title {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    color: #333;
    transition: color 0.3s ease;
}

.recent-post-link:hover .recent-post-title {
    color: #ff914d;
}



/* loader css */
.form-loader {
  color: #fff;
  font-size: 10px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  /* text-indent: -9999em; */
  animation: mulShdSpin 1.3s infinite linear;
  transform: translateZ(0);
     z-index: 99999;
}

@keyframes mulShdSpin {
  0%,
  100% {
    box-shadow: 0 -3em 0 0.2em, 
    2em -2em 0 0em, 3em 0 0 -1em, 
    2em 2em 0 -1em, 0 3em 0 -1em, 
    -2em 2em 0 -1em, -3em 0 0 -1em, 
    -2em -2em 0 0;
  }
  12.5% {
    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 
    3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, 
    -2em 2em 0 -1em, -3em 0 0 -1em, 
    -2em -2em 0 -1em;
  }
  25% {
    box-shadow: 0 -3em 0 -0.5em, 
    2em -2em 0 0, 3em 0 0 0.2em, 
    2em 2em 0 0, 0 3em 0 -1em, 
    -2em 2em 0 -1em, -3em 0 0 -1em, 
    -2em -2em 0 -1em;
  }
  37.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
     3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, 
     -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  50% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
     3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, 
     -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  62.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
     3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, 
     -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
  }
  75% {
    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 
    3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, 
    -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
  }
  87.5% {
    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 
    3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, 
    -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
  }
}


  


.connectwithus {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.connectwithus-wapper.flex {
    gap: 20px;
    justify-content: center;
}

a.cws-social-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 10px 20px;
    border-radius: 9px;
    color: #fff;
    transition: 0.3s;
    justify-content: center;

}


a.cws-social-btn.instagram {
    background: linear-gradient(30deg, #fbe18a, 21%, #FCBB45, 38%, #f75274, 52%, #d53692, 74%, #8f39ce, 100%, #5b4fe9);
}

a.cws-social-btn.facebook{
     background: linear-gradient(30deg,#2b1e99 , 15%, #436de4, 49%, #3b54cd, 87%, #2f2da8, 100%,  #4676ed);
}

a.cws-social-btn.whatsapp{
     background: linear-gradient(30deg,#60fc7c , 15%, #55f071, 50%,  #4ab161, 100%,  #55f071);
}
a.cws-social-btn.google{
     background: linear-gradient(30deg,#4285f4 , 15%, #34a853, 30%,  #fbbc05, 70%,  #ea4335);
}



@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* a.cws-social-btn svg path:nth-child(2) {fill: transparent;} */

a.cws-social-btn:hover{
background-size: 150% 150%;
animation: gradientMove 2s linear infinite;
  filter: brightness(1.1);
  animation-duration: 2s;
  transform: scale(1.03);
}




/* .swiper {
  padding: 20px 10px;
} */
.video-card {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.video-card video {
  width: 100%;
  display: block;
  border-radius: 10px;
}

video#modalVideo {
    margin: 0px auto;
    /* max-width: 40%; */
    width: fit-content;
    position: absolute;
    top: 50%;
    padding: 30px;
    left: 50%;
    height: 100%;
    transform: translate(-50%, -50%);
}
@media (max-width:467px) {
    video#modalVideo {
    padding: 70px;
  
}
}
@media (max-width:400px) {
    video#modalVideo {
    padding: 100px !important;
  
}
}