/* General Style */
/*@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');*/
@font-face {
    font-family: 'Catfiles';
    src: url('cat/CatfilesRegular.woff2') format('woff2'),
         url('cat/CatfilesRegular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


*{
    margin: 0px;
    padding: 0;
    box-sizing: border-box;
}

  html, body {
    min-height: 100vh; /* Prevents collapsing */
    overflow-x: hidden; /* Avoids horizontal scrolling */
}

  body {
      font-weight: 400;
       box-sizing: border-box;
    font-family:"inter";
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: #021b4a;
   background-color: white;
}
a{
    text-decoration: none;
}
.font-small{
    font-size: 10px;
}
/*Announcement-bar*/
.announcement-bar {
    width: 100%;
   background: #021b4a;
    color: white;
    text-align: center;
    padding: 10px 15px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 18px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 1000;
 overflow: hidden;
 transition: transform 0.6s ease-in-out;

}
 /*Text Scrolling Effect */
.announcement-wrapper {
    display: flex;
    overflow: hidden;
    white-space: nowrap;
}

.announcement-content {
    display: inline-block;
    /*padding-left: 100%;*/
    padding-right: 20px;
    animation: moveText 6s linear infinite;
}

@keyframes moveText {
    from {
        transform: translateX(80%);
    }
    to {
        transform: translateX(-100%);
    }
}
p{ color: #021b4a;
    font-size: 18px;
    font-family: 'inter',sans-serif;
}
.mb{
    margin-bottom:10px;
}
.mt{
    margin-top:13px;
}
/* primary button design */
.btn {
    background-color: rgb(2, 27, 74);  
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    border-radius: 15px;
    display: inline-block;
    color: white;
    transition: all 0.3s ease;
    cursor: pointer;
}
.btn img{
    width: 25%;
    transition: transform 0.3s ease;
}
.btn{
    width: 25%;
}

#top_button {
    margin-top: 15px;
    margin-left: 15px;
    border: none;
    display: flex;
    /* align-content: center; */
    align-items: center;
    justify-content: center;
    width: 161px;
    padding: 10px 31px 10px 13px;
    column-gap: 0.5rem;
}
button:hover{
    background-color: rgb(14, 48, 112);
}
.btn div{
    font-size: 18px;
}
#top_button:hover img {
    transform: scale(1.2) rotate(20deg); /* Increase size and rotate image */
  }
header {
    /* background: url('pawsimg/11.jpg') no-repeat; */
    padding: 1rem 0;
    top: 0;
    /* z-index: 1000; */
    background-size: cover;
    font-family: 'inter',sans-serif;
     background-image: url('pawsimg/background.jpg');
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}
.logo {
    margin-bottom: -10px;
}

.logo img {
    width: 250px;
     height: auto;
}
#icon{
    display: none;
}
nav ul {
    list-style: none;
    display: flex;
    gap: 1rem;
    padding: 0;
}

nav ul li a {
     margin: 5px;
    text-decoration: none;
    font-weight: 600;
    color: #222;
}
nav a:hover{
    color: #0e3070;
}
/* nav a:visited{
    color: #0e3070;
} */
/* dropdown navigation */
/* Style The Dropdown Button */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
  }
 .fa-solid.fa-chevron-down {
    font-size: 11px;
    margin-left: 6px;
    padding-top: 8px;
    float: right;
}  
  /* The container <div> - needed to position the dropdown content */
  .dropdown {
    position: relative;
    display: inline-block;
  }
  
  /* Dropdown Content (Hidden by Default) */
  .dropdown-content {
    
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0 rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  /* Links inside the dropdown */
  #colour{
    font-weight: 600;
    cursor: pointer;
   /* color: rgb(85, 26, 139); */
 }
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  
  /* Change color of dropdown links on hover */
  .dropdown-content a:hover {background-color: #f1f1f1}
  
  /* Show the dropdown menu on hover */

/* Hero Section */
#hero {
    background-color: #f5ede3;
    text-align: left;
    padding: 0;
    display: flex;
    background-image: url('pawsimg/background.jpg');
     background-size: cover;
     background-repeat: no-repeat;
     
}
#hero-1 {
    width: 70%;
    padding: 40px;
    padding-top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
 position: relative;
    left: -100%;
    opacity: 0;
    transition: all 1s ease ;
}
#hero-2{
    width: 50%;
    /*height: 500px;*/
    aspect-ratio: 16 / 9;
    background-image: url('pawsimg/heroDog-removebg-preview.png');
    background-repeat: no-repeat;
    background-position: right;
    background-size: contain;
    display: flex;
}

#hero h1 {
    margin-top: 10px;
    font-weight: 400;
    line-height: 1.2em;
    font-size: 48px;
    margin-bottom: 1rem;
     font-family: 'Catfiles',Sans-Serif,Arial;
    color: #021b4a;
    word-spacing: 0.2em;
}

#hero p {
    font-size: 25px;
    margin: 0;
    line-height: 1.8;
}
/*call button*/
.cta-button {
 width: 137px;
    display: inline-block;
    background-color: #c0975d;
    color: #ffffff;
    text-decoration: none;
    border: none;
    padding: 10px 15px;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 10px;
    cursor: pointer;
    margin: 15px 0 0 15px;
    transition: all 0.3s ease;
}

.cta-button:hover {
  background-color: #c0975d;
  transform: scale(1.05);
}
.cta-button i{
    margin-right: 10px;
}
#bottom{
    padding: 40px;
    background-image: url('pawsimg/background.jpg');
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
    border-bottom-right-radius:50% ;
    border-bottom-left-radius:50% ;
}
h3{
        font-size: 29px;
    font-weight: 400;
    font-family: 'Catfiles';
    word-spacing: 0.2em;
}
/* customer completed */
.customer-completed {
    text-align: center;
    display: flex;
    gap: 80px; 
    padding: 50px 20px;
}
.customer-completed h2, .customer-completed p {
    margin: 0;
}

.customer-graph{
  width: 80%;  
}
#customer-one {
    background-color: #e4ffe9;
    border-radius: 50%;
    width: 288px;
    height: 288px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 6px solid white;
    margin-left: auto;
    z-index: 1;
}
#customer-second {
    background-color: #fffae3;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 220px;
    height: 220px;
    border-radius: 50%;
z-index: 3;
    border: 6px solid white;
    position: relative;
    top: -54px;
    left: 45px;
}
#customer-third {
    background-color: #ecf2ff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    border: 6px solid white;
    z-index: 2;
}
#customer-bottom{
    display: flex;
    justify-content: flex-end;
    margin-top: -60px;
}
.customer-about h2, .customer-about p{
    text-align: left;
}
.customer-about p{
    text-align: left;
    margin: 20px 0 30px;
}
.customer-about button{
    background-color: rgb(255, 209, 0);
    margin-top: 15px;
    margin-left: 15px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 178px;
    padding: 10px 31px 10px 13px;
    column-gap: 0.5rem;
}
.customer-about button:hover{
    background-color: rgb(228,255,233);
}
/* our services */
.our_services{
    display: flex;
    flex-wrap: wrap;
    gap: 0px;
    justify-content: space-evenly;
}
.our_services_item{
    border-radius: 20px;
    padding: 50px 70px 30px;
    font-size: 30px;
   font-family: 'Catfiles';
    
}
.our_services_item img{
    
    position: relative;
    transition: transform 0.3s ease
}
.our_services_item:hover img{
    transform: translateY(-20px);
}
#petGrooming{
    background-color: #e4ffe9;
}
#Dogwalking{
    background-color: #fffae3;
}
#traning{
    background-color: #ecf2ff;
}
.our_services a{
    text-decoration: none;
}
 /* area content */
 .AreaWeServe {
    padding: 25px;
}
 .AreaWeServe h2{
     margin-bottom: 35px;
 }
  .areacontent{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    column-gap: 10px;
    row-gap: 25px;
  }
  .container img {
    width: 100px;
    height: auto;
}
.container p{
    padding: 5px;
}

.form-container {
    max-width: 600px;
    margin: auto;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    height: 550px;
    overflow-y: scroll;
    padding: 10px;
    border: 1px solid #cdcdcd;
  }
  .form-container h2{
    width: 100%;
  }

  h2 {
    text-align: center;
    /* padding: 10px 0; */
     font-family: 'Catfiles', sans-serif;
    color: #021b4a;
    border-radius: 15px;
    font-size: 50px;
    margin: auto;
    margin-bottom: 2rem;
    word-spacing: 0.2em;
  }

  fieldset {
    display: none;
    border: none;
    padding: 20px;
  }

  .active {
    display: block;
  }

  label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
  }

  input, select, textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #94949d;
    border-radius: 5px;
    color: #021b4a;
        font-weight: 600;
  }
input::placeholder{
        color: #021b4a;
        font-weight: 600;
        
}

  .oneLine {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    width: auto;
  }
.oneLine input{
    width: 15%;
    margin-bottom: 0;
}
  .form-buttons {
    display: flex;
    justify-content: space-between;
  }

  .form-buttons button {
    background-color: rgb(2, 27, 74);
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    border-radius: 15px;
    display: inline-block;
    color: white;
    transition: all 0.3s ease;
    cursor: pointer;
  }
.form-buttons button:hover{
    background-color: #ffd100;
    color: #021b4a;
}

  .form-buttons button:disabled {
    background: #ddd;
    cursor: not-allowed;
  }

  .form-buttons .next-btn {
    margin-left: auto;
  }
 .offer{
     margin-bottom: 15px;
 }
.offer select{
    width: 80%;
    margin-bottom:0px;
}
#Apply{
    padding: 5px 10px;
}
  #group li {
    display: flex;
    justify-content: space-between;
}
/* #next{
    
    margin: 15px auto;
    width: 80%;
    padding: 10px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 1em;
    cursor: pointer;
} */
/* Section Styles */
section {
    padding: 2rem 3rem;
    text-align: center;
    max-width:100%;
    margin: 0;
}
/* grooming */
#grooming {
    background-size: contain;
    background-image: url('pawsimg/Screenshot 2025-01-16 121332.png');
    display: flex;
    background-repeat: no-repeat;
    background-color: rgb(236, 242, 255);
}
#grooming img {
    width: auto;
    height: 262px;
}
/* services */

.services{
    background-color: rgb(236,242,255);
}
.service-list {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    
}
.service-list ul li{
    /* list-style-type: none; */
    text-align: left;
    margin: 5px 20px;
    font-weight: 500;
}
.service-list ul li input{
    float: right;
    width: auto;
}
.service-item {
    width: 30%;
    background: #fff;
    padding: 1rem;
    border-radius: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    background-size: 30%;
    
}
.service-item .btn {
    font-size: 18px;
    border: none;
    margin-top: 15px;
    width: 49%;
}
.service-item .btn:hover {
    background-color: #ffd100;
    color: #021b4a;
}
.money{
    font-size: x-large;
}
/* bath */
.spa-bath{
    display: none;
}
.Medicated-bath{
    display: none;
}
.service-item ul {
    list-style: none; /* Remove default bullet points */
    padding: 0;
  }

  .service-item  ul li {
    position: relative;
    padding-left: 25px; /* Space for the icon */
  }

  .service-item  ul li::before {
    content: "\f1b0"; /* Unicode for Font Awesome check-circle */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    color: #ffd100; /* Icon color */
  }
 #sub{
      font-family: 'inter',Sans-Serif;
      color: red;
      font-weight:700 ;
  }
/* dog image */
#item-1{
    background-image: url('pawsimg/4-removebg-preview.png');
    background-repeat: no-repeat;
    background-position: right bottom;
    /* background-size: 115px; */
    
}
#item-2{
    background-image: url('pawsimg/5-removebg-preview (1).png');
    background-repeat: no-repeat;
    background-position: right bottom;
    /* background-size: 115px; */
    
}
#item-3{
    background-image: url('pawsimg/1-removebg-preview.png');
    background-repeat: no-repeat;
    background-position: right bottom;
    /* background-size: 115px; */
    
}
#item-4{
    background-image: url('pawsimg/3-removebg-preview.png');
    background-repeat: no-repeat;
    background-position: right bottom;
    /* background-size: 115px; */
    
}
#item-5{
    background-image: url('pawsimg/4-removebg-preview.png');
    background-repeat: no-repeat;
    background-position: right bottom;
    /* background-size: 115px; */
    
}
#item-6{
    background-image: url('pawsimg/5.jpg');
    background-repeat: no-repeat;
    background-position: right bottom;
    /* background-size: 115px; */
}
/* cat images */

#cat1{
    background-image: url('pawsimg/cat1-removebg-preview.png');
    background-repeat: no-repeat;
    background-position: right bottom;
    /* background-size: 110px; */
   
}
#cat2{
    background-image: url('pawsimg/cat3-removebg-preview.png');
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 115px;
    
}
#cat3{
    background-image: url('pawsimg/cat2-removebg-preview.png');
    background-repeat: no-repeat;
    background-position: right bottom;
    /* background-size: 115px; */
   
}
#cat4{
    background-image: url('pawsimg/cat4-removebg-preview.png');
    background-repeat: no-repeat;
    background-position: right bottom;
    /* background-size: 115px; */
    
}
#cat5{
    background-image: url('pawsimg/cat5-removebg-preview.png');
    background-repeat: no-repeat;
    background-position: right bottom;
    /* background-size: 115px; */
   
}
#cat6{
    background-image: url('pawsimg/cat6.jpg');
    background-repeat: no-repeat;
    background-position: right bottom;
    /* background-size: 115px; */
}

/* about */
/*#about{*/
   
/*    background-color: #f9f2dc;*/
/*}*/
/* .details{
    display: flex;
} */
/*#Gallery {*/
/*    display: flex;*/
/*    flex-wrap: wrap;*/
/*    align-content: center;*/
/*    gap: 80px;*/
/*  align-items: center;*/
/*  padding: 20px;*/
  /* justify-items: center; */
/*  justify-content: center;*/
/*}*/
/*#Gallery img {*/
/*    width: 250px;   */
/*    height: 220px;*/
/*    border-radius: 20px;*/
    /* object-fit: cover; */
/*    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);*/
/*    transition: transform 0.3s ease;*/
/*}*/
/*.gallery img:hover {*/
/*    transform: scale(1.1);*/
/*  }*/

  
/*.details p{*/
/*    text-align: center;*/
/*    margin: 10px auto;*/
/*    width: 80%;*/
/*}*/
/* .details img{    width: 270px;} */
#instavideo{
    display: flex;
    column-gap: 40px;
   overflow: scroll;
   justify-content: center;
}
#video{
    padding-top: 20px;
}
#work{
    height: 500px;
    background-image: url('pawsimg/workbackground.png');
    background-size: cover;
    background-repeat: no-repeat;
}
#work h2{
    margin-top: 80px;
}
.grid-step{
    margin-top: 30px;
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
}
.step-item {
    text-align: center;
    display: flex;
    height: 250px;
    position: relative;
    border-radius: 50%;
    background-color: white;
    flex-direction: column;
    justify-content: center;
}
.one{
    top: -91px;
}
.three {
    top: -163px;
}
img.step-arrow-one {
    position: relative;
    width: 100%;
    transform: rotate(10deg);
}
img.step-arrow-two {
    position: relative;
    top: 20px;
    width: 100%;
}
/* Testimonials Section */
#testimonials {
    padding-top: 175px;
    padding-bottom: 55px;
    margin-top: -196px;
    background-color: #e4ffe9;
}
.testimonial-slider{
    display: flex;
    position: relative;
    overflow: hidden; /* Hide overflowing slides */
    width: 100%;
    height: auto;
}
  
  .slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #e4ffe9;
    text-align: center;
    color: #383fa9;
    min-width: 100%; /* Each slide takes up full width */
    float: left;
    transition: transform 0.5s ease-in-out; /* Smooth slide effect */
  }
  .testimonial-slider .slides-container {
    display: flex;
    width: 400%; /* 4 slides x 100% width */
}
 .testimonial-slider img{
 border-radius: 15px;
     width: 60%;
 }

/* FAQ Section */
#faq{
    background-color: #fcf9f9;
}
.queries {
    padding: 30px;
    background-color: #f0f0f0;
    transition: 0.5s ease ;
}
#sub{
    color: #052a50;
    text-align: center;
    padding-bottom:10px ;
}
.que{
    background-color: rgb(255, 250, 227);
    max-width:600px; 
    font-size: 14px;
    margin: auto;
    margin-bottom: 10px;
    border-radius: 18px;
    cursor: pointer;
    color: white;
    transition: 0.5s ease ;
}
.que .ans{
    font-weight: 500;
    padding: 0px;
   height: 0;
    overflow: hidden;
    transition: height 0.5s ease ;
}
.q span {
    float: right;
}
p.q {
    text-align: left;
    border-radius: 15px;
   font-family: 'Catfiles';
    padding: 20px;
    background-color: rgb(255, 250, 227);
}
.fa-solid.fa-paw {
    margin-right: 10px;
}
/* form */
.form-container label{
font-size: 18px;
}
#data {
    z-index: 100;
    /*padding: 10px 20px;*/
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    display: flex;
    align-content: center;
    background-color: #ecf2ff;
     opacity: 0;
    animation-fill-mode: forwards;
}
@keyframes show {
    from {opacity: 0;}
    to {opacity: 1;}
  }
#goback{
    background-color: rgb(2, 27, 74);
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    border-radius: 15px;
    display: inline-block;
    color: white;
    transition: all 0.3s ease;
    cursor: pointer;
    margin: 20px;
}
#goback:hover{
    background-color: #ffd100;
    color: #021b4a;
}

/* Footer Styles */
footer {
    background: #ecf2ff;
    text-align: left;
    padding: 3rem 3rem;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.privacy{
    align-self: flex-start;
}
.socialmedia {
    text-align: center;
}
footer i{
    margin: 0 10px;
    font-size: 20px;
    cursor: pointer;
}

.ul-footer{
    list-style-type: none;
    text-align: left;
    padding: 0;
}
.ul-footer a {
    text-decoration: none;
    color: #021b4a;
}
.ul-footer a:hover {
font-weight: 700;
color: rgb(255, 204, 36);
text-decoration-line: underline;
}
.linkHeading{
    font-weight: 800;
}
.ul-footer li {
    margin: 5px 0;
}
/* utility class */
.bold{
    font-weight: bold !important;
    list-style-type: none;
}
.semi-bold{
    font-weight: 500;
}
#backToTop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    background-color: #0e3070;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  
  #backToTop:hover {
    background-color: #0056b3;
  }
  
  #backToTop:active {
    transform: scale(0.9);
  }
  .whatsapp-float {
    position: fixed;
    width: 160px;
    height: 45px;
    bottom: 50%;
    right: 20px;
    background-color: #25d366;
    color: #fff;
    border-radius: 20px;
    text-align: center;
    font-size: 20px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    padding: 5px;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .whatsapp-float i {
    margin-right: 8px;
    font-size: 25px;
  }
.whatsapp-float span{
    font-size: 17px;
}
  .whatsapp-float:hover {
    background-color: #1ebe5d;
    cursor: pointer;
  }
/* Responsive Styles */
@media (max-width: 768px) {
    nav {
        flex-direction: row;
    }

    nav ul {
        /* display: none; */
        flex-direction: column;
        gap: 1.5rem;
        position: absolute;
        left: 0;
        /* padding: 26px; */
        z-index: 4;
        width: 100%;
        background: #0e3070;
        border-radius: 20px;
        height: 0;
        overflow: hidden;
    }
    .dropdown-content{
        z-index: 100;
    }
    nav ul li a {
        margin: 10px;
        color: white;
    }
     nav a:active{
        color: #ffd100;
     }
    #icon {
        padding: 15px 20px;
        margin: 12px 20px 10px 15px;
        display: block;
        border-radius: 15px;
        background-color: #0e3070;
        color: white;
    }
    
#colour{
    color: white;
}
.announcement-bar {
        width: 1277px;
}
    #hero {
        padding: 2rem 0 1rem;
    }

    #hero h1 {
        font-size: 2rem;
    }

    #hero p {
        font-size: 1rem;
    }
    .our_services_item {
     padding: 50px 32px 30px; 
}
.step-item{
    height: 176px;
    width: 167px;
}
    .service-list {
        flex-direction: row;
        align-items: stretch;
    }
    .service-list ul li input {
        float: right;
        width: auto;
    }

.oneLine {
    align-items: flex-start;
  }

  .oneLine input {
    margin-top: 5px;
  }
.service-item {
    width: 300px;
    
}

h2{
    width: 90%;
} 
 

#testimonials{
    margin-top: -176px;
}
}
@media (max-width: 480px) {
   html, body {
    min-height: 100vh; /* Prevents collapsing */
    overflow-x: hidden; /* Avoids horizontal scrolling */
}
.announcement-bar{
    font-size: 14px;
}


    nav .logo {
        font-size: 1.2rem;
    }
    
    nav ul {
        /* display: none; */
        flex-direction: column;
        gap: 1.5rem;
        position: absolute;
        left: 0;
        /* padding: 26px; */
        z-index: 4;
        width: 100%;
        background: #0e3070;
        border-radius: 20px;
        height: 0;
        overflow: hidden;
    }
    .dropdown-content{
        z-index: 100;
    }
    nav ul li a {
        margin: 10px;
        color: white;
    }
     nav a:active{
        color: #ffd100;
     }
    #icon {
        padding: 10px 15px;
        margin: 12px 20px 10px 15px;
        display: block;
        border-radius: 15px;
        background-color: #0e3070;
        color: white;
    }
    #top_button{
         margin: auto;
        margin-top: 15px;
        width: 122px;
        height: 42px;
        padding: 10px;
    }
    .btn div {
    font-size: 12px;
    font-weight: 700;
}
.cta-button {
    width: 110px;
    font-size: 13px;}
 #hero-1 h2{
     text-align: center !important;
 }   
    h2 {
        font-size: 1.2rem;
    }

    .btn {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
    #hero {
        flex-direction: column;
        text-align: left;
        padding: 20px 15px;
        background-position: right center;
    }
    #hero-1{
        padding: 0;
        width: 100%;
        z-index: 2;
    }
    #hero h1 {
        text-align: center;
        font-size: 32px;
        width: 100%;
        line-height: 1.3;
    }
      #hero p {
        text-align: center;
        font-size: 1rem;
        width: 100%;
    }
    .cta-button{
        margin: 15px auto 0;
    }
    #hero-2 {
            width: 100%;
            aspect-ratio: 16 / 9;
            height: 300px;
            background-size: contain;
            background-position: center;
        }
        #bottom {
    margin-top: -43px;}
    section{
        padding: 2rem 1.5rem;
    }
    .our_services{
    gap: 20px;
}
.customer-graph {
    width: 100%;
   
}
.customer-completed {
    flex-wrap: wrap;
     row-gap: 50px;
}
#customer-one {
     width: 220px;
    height: 220px; 
}
#customer-second {
      width: 150px;
    height: 150px;
    top: -35px;
}
#customer-third {
      width: 180px;
    height: 180px; 
}
#customer-bottom {
    margin-top: -45px;
}
.customer-about button {
        margin: auto;
        margin-top: 15px;
        width: 122px;
        height: 42px;
        padding: 10px;
    }

    .our_services_item {
        width: 300px;
        padding: 50px 25px 30px;
    }
    #grooming img {
         width: auto;
        height: 150px;
    }
    .form-container {
        max-width: 90%;
        
    }
    #data{
        align-content: flex-start;
    }
.form-container h2 {
    margin-bottom: 10px;
}
    .our_services_item img {
    height: auto;
    width: 200px;
   
}
    /* #Gallery img {
        width: 139px;
        height: 162px;
        border-radius: 50%;
        box-shadow: 3px 3px 5px 4px black;
        margin-bottom: 20px;
    } */
    /* #Gallery {
        flex-wrap: wrap;
        
    } */
    .container img {
    width: 55px;
    height: auto;
}
 .areacontent{
     column-gap: 15px;
 }
 .whatsapp-float{
 width: 120px;
    height: 32px;}
    
 .whatsapp-float span{
    font-size: 14px;
}
 .whatsapp-float i{
    font-size: 16px;
}
    footer{
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    footer p{
        margin: 15px 0;
    }
    .ul-footer a{
    font-size: 14px;
}
      .siteLink{
        width: 40%;
    }
    .privacy{
        width: 40%;
    }
    footer p{
        margin: 15px 0;
    }

 .socialmedia{
     padding-top: 20px;
    text-align: center;
 }
    .service-list {
        flex-direction: column;
        align-items: center;
        
    }
    .service-list ul li input {
        float: right;
        width: auto;
    }
/* testimonial */
    .step-item{
        position: static;
        width: 182px;
        height: 200px;
        margin: 23px auto;
    }
    .grid-step{
    grid-template-columns: 100%;
}
#work{
    display: none;
}
#testimonials {
    padding-top: 20px;
    margin-top: 0;
    border-radius: 20px;
}
    .step-arrow-one, .step-arrow-two{
        display: none;
    }
.testimonial-slider img{

     width: 100%;
 }
#colour{
    color: white;
}
#instavideo{
    display: flex;
    column-gap: 40px;
   overflow: auto;
   justify-content:flex-start;
}

}