/*BASIC SETS =======================================================*/
    * {
      margin: 0;
      box-sizing: border-box;
    }
    .open-sans {
      font-family: "Open Sans", sans-serif;
      font-optical-sizing: auto;
      font-weight: 400;
      font-style: normal;
      font-variation-settings:
        "wdth" 100;
    }
    .bebas-neue-regular {
      font-family: "Bebas Neue", sans-serif;
      font-weight: 400;
      font-style: normal;
    }
    .fredoka {
      font-family: "Fredoka", sans-serif;
      font-optical-sizing: auto;
      font-weight: 400;
      font-style: normal;
      font-variation-settings:
        "wdth" 100;
    }
    body {
        background-image: url('https://media.istockphoto.com/id/1422868668/vector/pet-paw-seamless-pattern-vector-illustration-with-paw-and-bone-on-white-background.jpg?s=612x612&w=0&k=20&c=AfRTaOhXU0oW0X7NFt1L7em2NhwbcpMs0ARBvqNQD7s=');
        width: 100%;
        font-family: "Open Sans", sans-serif;
        background-blend-mode: multiply;
        background-color: #ffffff;
    }
    .application {
        
        position: relative;
        display: block;
        margin: 0 auto;
        width: 1440px;
        max-width: 100%;
        background: #fff;
        box-shadow: 0 0 8px 4px rgba(0,0,0,0.1);
    }
    .sc-bg-1 {
        background-color: #c5dbed;
    }
    .sc-bg-2 {
        background-color: #eaf6ff;
    }
    .sc-bg-3 {
        background-color: #adcbe5;
    }
    .sc-bg-4 {
        background-color: #b2d4f0;
    }
    ::-webkit-scrollbar {
    width: 10px; 
    }
    ::-webkit-scrollbar-thumb {
    background-color: #f9955e; 
    }
    ::-webkit-scrollbar-track {
    background-color: #3d9cea; 
    }
    ::selection {
        background-color: #3d9cea;
        color:#9a3700;
    }
    .sp {
        padding: 30px 10px;
    }
    .menu-btn {
        display: none;
    }
    .top-btn {
        display: none;
        opacity: 0.7;
        position: fixed;
        bottom: 15px;
        right: 15px;
        z-index: 99;
        background-color: transparent;
        color: #0d6ab6;
        font-size: 60px;
        border-radius: 5px;
        padding: 0px 0px;
        cursor: pointer;
    }
/*BASIC SETS =======================================================*/

/*ASSETS =======================================================*/
  .text-color1 {
    color: #0b385c;
  }
  .text-color2 {
    color: #f9955e;
  }
  .text-color3 {
    color: #3d9cea;
  }
  .text-color4 {
    color: #0d6ab6;
  }
  .txt-black {
    color: black;
  }
  .alternate-txt {
    color: #eaf6ff;
    transition: 1s;
  }
  .alternate-bg {
    background-color: #0b385c;
    transition: 1s;
  }
  .alternate-bg-circle {
    background-color: #885538e6;
    transition: 1s;
  }
  .alternate-bg-s {
    background-color: #0b385c !important;
    transition: 1s;
  }
  .italic {
    font-style: italic;
  }
  .up-case {
    text-transform: uppercase;
  }
  .centro {
    text-align: center;
  }
  .lefto {
    text-align: left;
  }
  .bold {
    font-weight: 700;
  }
  .container {
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;
  }
  .reveal{
    position: relative;
    transform: translateY(150px);
    opacity: 0;
    transition: 1s all ease;
  }

  .reveal.active{
    transform: translateY(0);
    opacity: 1;
  }
  @media screen and (min-width:768px) {
    .sticky {
      position: fixed !important;
      top: 0;
      background-color: white !important;
      box-shadow: black 5px 5px 23px -13px;
      width: 100%;
      z-index: 998;
    }
    .sticky a {
        color:#0b385c;
    }
    .sticky .moon-btn {
        color:#0b385c;
        text-shadow: none;
    }
  }
  @keyframes slideDown {
    from {
        top: -50px;
    }
    to {
        top: 0;
    }
  }
    .mouse-follower {
        width: 25px;
        height: 25px;
        filter: blur(0px);
        background-color: #3d9cea45;
        border-radius: 50%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1000;
        pointer-events: stroke;
    }
/*ASSETS =======================================================*/

/*  HEADER ================================*/
    .header {
        width: 100%;
        margin: 0 auto;
        height: 100px;
        background:transparent;
        position: absolute;
        top: 0;
        left: 0;
        max-width: 100%;
        z-index: 10;
    }
    .header-wrap {
        display: grid;
        grid-template-columns: 1fr 4fr 1fr;
    }
    .logo {
        display: flex;
        flex-direction: column;
        width: 85px;
        height: 95px;
        align-items: center;
        justify-content: center;
        justify-self: flex-start;
    }
    .logo i {
        font-size: 50px;
    }
    .logo p {
        font-size: 15px;
        font-weight: 700;
    }
    .logo span {
        font-size: 15px;
        font-weight: 700;
    }
    .navigation {
        display: flex;
        align-items: flex-end;
        justify-self: flex-start;
        /* height: 100%; */
        align-self: flex-end;
    }
    .navigation ul {
        display: flex;
        list-style: none;
        font-size: 21px;
        font-weight: 600;
    }
    .navigation ul li {
        padding: 62px 25px 10px 25px;
    }
    .navigation ul li:hover {
        background-color:#3d9cea;
        color: #fff;
        cursor: url('https://i.imgur.com/9LW9385.png');
    }
    .navigation a {
        text-decoration: none;
    }
    .navigation a ::after {
        color: #fff;
        text-decoration: none;
    }
    .it {
        background-color:#3d9cea;
    }
    .active {
        color: #fff;
    }
    .dark-mode {
        align-self: center;
    }
    .dark-mode i {
        font-size: 40px;
    }
    .moon-btn {
        text-shadow: 0px 0px 10px black;
        color: #eaf6ff;
        transition: 1s;
    }
/*  HEADER ================================*/

/*FIRST SECTION ================================*/
    .section-first {
        position: relative;
        overflow: hidden;
    }
    .section-wrap {
        justify-content: space-between;
        display: flex;
        padding-top: 100px;
    }
    .s-1 {
        position: relative;
    }
    .oc-large {
        width: 827px;
        height: 827px;
        border-radius: 50%;
        box-shadow: inset -0.14px 3.998px 23px rgba(3,3,3,0.26);
        background-color: #f9955e;
    }
    .oc-medium {
        width: 65px;
        height: 65px;
        border-radius: 50%;
        background-color: #f9955e;
    }
    .oc-small {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background-color: #f9955e;
    }
    .ocl {
        position: absolute;
        right: -385px;
        bottom: 20px;
    }
    .ocm-1 {
        position: absolute;
        right: 630px;
        top: 180px;
    }
    .ocm-2 {
        position: absolute;
        left: 460px;
        top: 375px;
    }
    .ocs-1 {
        position: absolute;
        right: 690px;
        top: 265px;
    }
    .ocs-2 {
        position: absolute;
        left: 540px;
        top: 435px;
    }
    .white-swifts {
        position: absolute;
        width: 120px;
        right: 500px;
        bottom: 100px;
    }
    .dog-1 {
        width: 500px;
        position: absolute;
        right: -120px;
        bottom: -35px;
    }
    .dog-1 img {
        width: 100%;
    }
    .right-side {
        height: 740px;
    }
    .left-side {
        width: 500px;
        display: flex;
        flex-direction: column;
        gap: 20px;
        justify-content: center;
    }
    .left-side h1 {
        font-size: 80px;
        line-height:0.9em;
    }
    .left-side .bigger {
        font-size: 100px;
    }
    .left-side .smaller {
        font-size: 50px;
    }
    .left-side .subtitle {
        font-size: 29px;
        line-height: 0.95em;
    }
    .description {
        font-size: 18px;
    }
    .btn-1 {
        cursor: url('https://i.imgur.com/9LW9385.png'), auto;
        border: none;
        font-size: 23px;
        color: #ffffff;
        width: 153px;
        height: 42px;
        border-radius: 21px;
        filter: drop-shadow(-0.14px 3.998px 21px rgba(3,3,3,0.2));
        background-color: #186cb1;
    }
/*FIRST SECTION ================================*/

/*SECOND SECTION ==================================*/
    .section-wrap-2 {
        justify-content: space-between;
        display: flex;
    }
    .rs-2 h2 {
        font-size: 33px;
        font-family: "Fredoka", sans-serif;
    }
    .rs-2 {
        display: flex;
        gap: 50px;
        flex-direction: column;
        height: 740px;
    }
    .dog-2 {
        position: relative;
    }
    .dog-2 img:nth-child(1) {
        position: absolute;
        right: 0;
        z-index: 1;
    }
    .dog-2 .blue-circles {
        position: absolute;
        top: 55px;
        right: 85px;
    }
    .ls-2 {
        width: 500px;
        display: flex;
        flex-direction: column;
        gap: 20px;
        justify-content: flex-start;
    }
    .ls-2 h1 {
        font-size: 80px;
        line-height:0.9em;
    }
    .ls-2 .bigger {
        font-size: 100px;
    }
    .ls-2 .smaller {
        font-size: 50px;
    }
    .ls-2 .subtitle {
        font-size: 29px;
        line-height: 0.95em;
    }
    .orange-line {
        background-color: #f9955e;
        height: 2px;
    }
    .description-2 {
        font-size: 23px;
        letter-spacing: 2px;
        line-height: 30px;
    }
/*SECOND SECTION ==================================*/

/*THIRD SECTION ===================================*/
    .section-third {
        background-image: url(https://i.imgur.com/zJTcp98.png);
        min-height: 577px;
    }
    .section-wrap-3 {
        justify-content: space-between;
        display: flex;
    }
    h1 {
            font-size: 80px;
            line-height:0.9em;
        }
    .sw-3 {
        display: flex;
        flex-direction: column;
        gap: 25px;
    }
    .sw-3 p {
        font-size: 25px;
    }
/*THIRD SECTION ===================================*/

/*FOURTH SECTION ======================================*/
    .section-fourth {
        background-image: url(https://i.imgur.com/UKgp9L5.png);
        background-position: 0px -475px;
        background-repeat: no-repeat;
    }
    .section-wrap-4 {
        display: flex;
        flex-direction: column;
        gap: 100px;
    }
    .description {
        font-size: 14px;
    }
    .cards-1 {
        display: flex;
    }
    .owl-carousel .owl-stage-outer {
        padding-left: 65px;
        position: relative;
        overflow: hidden;
        -webkit-transform: translate3d(0, 0, 0);
    }
    .owl-carousel.owl-loaded {
        display: block;
        position: relative;
    }
    .owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev {
        background: 0 0;
        color: inherit;
        border: none;
        padding: 0 !important;
        font: inherit;
        font-size: 6em;
        color: #0d6ab6;
    }
    .owl-prev {
        position: absolute;
        top: 15%;
        left: 0;
    }
    .owl-next {
        position: absolute;
        right: 0;
        top: 15%;
    }
    .owl-carousel .owl-item img {
        display: block;
        width: 200px;
    }
    .card-1 {
        gap: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 250px;
    }
    .card-1 p {
        text-align: center;
    }
/*FOURTH SECTION ======================================*/

/*FIFTH SECTION =====================================*/
    .section-wrap-5 {
        justify-content: space-between;
        display: flex;
    }
    .dog-4 {
        width: 590px;
    }
    .dog-4 img {
        width: 100%;
    }
    .right-side-5 p {
        font-size: 28px;
        margin-top: 20px;
        width: 500px;
    }
    .left-side-5 h1 {
        font-size: 6rem;
        letter-spacing: 1px;
    }
    .card-2 {
        display: flex;
        align-items: center;
        margin-top: 25px;
        margin-bottom: 35px;
    }
    .card-2 ul {
        list-style: none;
    }
    .card-2 ul li {
        font-family: "Fredoka", sans-serif;
        line-height: 1.9rem;
        font-weight: 600;
        letter-spacing: 1.5px;

        font-size: 17px;
    }
    .card-2 img {
        width: 180px;
    }
    .card-2 img:hover {
        filter: invert(1);
    }
/*FIFTH SECTION =====================================*/

/*SIXTH SECTION =========================================*/
    .section-sixth {
        background-image: url(https://i.imgur.com/bAtzb7w.png);
        background-repeat: no-repeat;
        background-size: 764px;
        background-position: -175px 20px;
        position: relative;
        overflow: hidden;
    }
    .section-sixth .swish-06 {
        position: absolute;
        width: 250px;
        left: 10%;
        top: 20%;
    }
    .section-wrap-6 {
        justify-content: space-between;
        display: flex;
        flex-direction: row-reverse;
    }
    .rs-6 {
        height: 740px;
    }
    .dog-6 {
        width: 500px;
        position: absolute;
        left: -120px;
        bottom: -35px;
    }
    .dog-6 img {
        width: 100%;
    }
    .blue-circle {
        background-color: #0d6ab6;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        box-shadow: inset -0.14px 3.998px 31px rgba(3,3,3,0.21);
        position: absolute;
        left: 90%;
        bottom: 85%;
        
    }
    .promo {
        margin-top: 20px;
        font-size: 80px;
        line-height: 0.5em;
        text-align: center;
        color: #fff;
    }
    .promo .off {
        font-size: 30px;
        font-weight: 500;
    }
/*SIXTH SECTION =========================================*/

/*SEVENTH SECTION =========================================*/
    .section-wrap-7 {
        display: flex;
        flex-direction: column;
        gap: 100px;
        margin-top: 60px;
    }
    .section-seventh .owl-carousel .owl-stage-outer {
        padding-left: 95px;
        position: relative;
        overflow: hidden;
        -webkit-transform: translate3d(0, 0, 0);
    }
    .blue-line {
        width: 100%;
        height: 2px;
        background-color: #ffffff;
        border: 0.15px solid #745a82;
    }
    .cards-3 {
        display: flex;
    }
    .card-3 {
        gap: 20px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 250px;
    }
/*SEVENTH SECTION =========================================*/

/*EIGHTH SECTION =====================================*/

    /*---------------*/
        .ls-8, .rs-8 {
            opacity: 0; 
        }
        .fade-in-left {
          animation: fadeInLeft 2s ease-in-out forwards;
        /*  transition: opacity 2s;*/
        }

        .fade-in-right {
          animation: fadeInRight 2s ease-in-out forwards;
        /*  transition: opacity 2s;*/
        }
        @keyframes fadeInLeft {
          from {
            opacity: 0;
            transform: translateX(150px);
          }
          to {
            opacity: 1;
            transform: translateX(0);
          }
        }

        @keyframes fadeInRight {
          from {
            opacity: 0;
            transform: translateX(-150px);
          }
          to {
            opacity: 1;
            transform: translateX(0);
          }
        }
    /*--------------*/
    .section-wrap-8 {
        justify-content: space-between;
        display: flex;
        height: auto;
        flex-direction: row-reverse;
        background-image: url(https://i.imgur.com/UMuTzUj.png);
        background-repeat: no-repeat;
        background-size: 100%;
    }
    .dog-88 {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 50px;
    }
    .dog-88 img {
        width: 270px;
    }
    .dog-8 {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 50px;
    }
    .dog-8 img {
        width: 400px;
    }
    .dog-8 h2 {
        font-size: 30px;
    }

    
    .rs-8 {
        display: flex;
        gap: 50px;
        flex-direction: column;
        height: 740px;
    }
    .ls-8 {
        width: 550px;
        display: flex;
        flex-direction: column;
        gap: 20px;
        justify-content: flex-start;
    }
    .description-8 {
        font-size: 23px;
        letter-spacing: 3px;
        line-height: 35px;
    }
/*EIGHTH SECTION =====================================*/

/*NINETH SECTION ====================================*/
    .section-nineth {
        background-image: url(https://i.imgur.com/01EUr6u.png);
    }
    .section-wrap-9 {
        display: flex;
        flex-flow: column;
        gap: 50px;
    }
    .p-9 {
        width: 780px;
        font-size: 35px;
        letter-spacing: 3px;
        line-height: 2.8rem;
    }
    .logo-9 {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    .logo-9 i {
        font-size: 160px;
    }
    .lp-9 {
        font-size: 38px;
        font-weight: 500;
    }
/*NINETH SECTION ====================================*/

/*  FOOTER ================================*/
.tdn {
    text-decoration: none;
}
    .footer {

    }
    .footer-wrap {
        padding: 5% 0;
        display: grid;
        width: 100%;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        grid-auto-rows: auto; 
        justify-items: start; 
    }
    .footer-wrap .a-1 {
        font-size: 25px;
    }
    .footer-wrap .ag {
        font-size: 20px;
    }
    
    .widget {
        padding-top: 0px;
    }
    .widget ul {
        padding-top: 20px;
        padding-left: 0;
    }
    .widget ul li {
        list-style: none;
    }
    .widget-1 p {
        padding-top: 15px;
    }
    .widget-2 {
        justify-self: end;
    }
    .widget-3 {
        justify-self: center;
    }
    .widget-4 {
        justify-self: start;
    }
    .logo-footer {
        display: flex;
        margin-top: 30px;
        flex-direction: column;
        width: 85px;
        height: 95px;
        align-items: center;
        justify-content: flex-end;
        justify-self: flex-start;
    }
    .logo-footer i {
        font-size: 50px;
    }
    .logo-footer p {
        font-size: 15px;
        font-weight: 700;
    }
    .logo-footer span {
        font-size: 15px;
        font-weight: 700;
    }
/*  FOOTER ================================*/

/*ABOUT SECTION ===========================*/

    .section-about-first {
        height: auto;
    }
    .section-about-first .section-wrap {
        justify-content: center;
        display: flex;
        align-items: center;
        padding-top: 15px;
    }
    .section-about-first h2 {
        font-size: 60px;
    }
    .section-about-first .left-side {
        width: 710px;
        display: flex;
        flex-direction: column;
        gap: 52px;
        align-items: flex-start;
        position: absolute;
        left: 0;
    }
    .ls-about-2 {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 52px;
        align-items: center;
        justify-content: center;
        position: absolute;

    }
    .section-about-first .dog-1 {
        width: 550px;
        position: absolute;
        right: -90px;
        bottom: -50px;
        z-index: 1;
    }
    .puppy-sit {
        position: absolute;
        width: 510px;
        right: 0;
        bottom: 60px;
    }
    .puppy-sit img {
        width: 100%;
    }
    .abt {
        font-size: 16px;
        letter-spacing: 2px;
        line-height: 1.5em;
        text-align: left;
    }
    .tb-h {
        background-image: url(https://i.imgur.com/8cm21fv.png);
        background-attachment: fixed;
        background-size: contain;
        background-blend-mode: hard-light;
    }
    .ls-3 {
        width: 710px;
        display: flex;
        flex-direction: column;
        gap: 52px;
        align-items: flex-end;
        position: absolute;
        right: 0;
    }
    .ls-3 p {
        text-align: right;
    }
    .dog-3 {
        left: 0;
    }
    .puppysit-3 {
        position: absolute;
        bottom: 200px;
        left: -70px;
    }
/*ABOUT SECTION ===========================*/

/*SERVICES SECTION ========================*/
    .margin-top {
        margin-top: 130px;
    }
    .row {
        flex-direction: row;
    }
    .rss-8 {
        display: flex;
        gap: 50px;
        flex-direction: column;
         
    }
    .lss-8 {
        width: 550px;
        display: flex;
        flex-direction: column;
        gap: 20px;
        justify-content: flex-start;
    }
    .img-sz-srv {
        width: 500px;
    }
    .happy-dog {
        width: 240px;
        position: absolute;
        right: 10px;
        bottom: 258px;
    }
    .space-evenly {
        justify-content: space-evenly;
    }
    .title-bar {
        justify-content: center;
        height: auto;
        flex-direction: row-reverse;
        background-image: none;
        display: flex;
        background-size: 100%;
    }
    .fz-h2 {
        font-size: 40px;
    }
    .t-b {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 20px;
        align-items: center;
        justify-content: center;
    }
    .lss-8 .description-8 {
        font-size: 20px;
        letter-spacing: 2px;
        line-height: 30px;
    }
/*SERVICES SECTION ========================*/

/*GALLERY SECTION =========================*/


    .gallery-container {
        margin-top: 50px;
        background-color: #c5dbed;
        max-width: 100rem;
        margin: 100px auto 0;
        padding: 0 2rem 2rem;
    }
    .gallery {
        display: flex;
        flex-wrap: wrap;
        margin: -1rem -1rem;
    }

    .gallery-item {
        flex: 1 0 24rem;
        border-radius: 30px;
        margin: 1rem;
        box-shadow: 0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4);
        overflow: hidden;
    }

    .gallery-image {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 400ms ease-out;
    }

    .gallery-image:hover {
        transform: scale(1.15);
    }

    @supports (display: grid) {
        .gallery {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
            grid-gap: 2rem;
        }

        .gallery,
        .gallery-item {
            margin: 0;
        }
    } */
/*GALLERY SECTION ==========================*/    
/* GALLERY ========================*/
    .container-gallery {
        padding: 75px 50px;
        margin: 0 auto;
        width: 100%;
    }
    .gallery-wrap {
      display: flex;
      flex-direction: row;
      width: 100%;
      height: 70vh;
    }

    .itemg {
      flex: 1;
      height: 100%;
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      transition: flex 0.8s ease;
      
      &:hover{
        flex: 7;
      }
    }

    .itemg-1 { 
      background-image: url('https://i.imgur.com/eKpunLI.jpeg?auto=format&fit=crop&w=1233&q=80');
    }

    .itemg-2 { 
      background-image: url('https://i.imgur.com/l8yHQEg.jpeg?auto=format&fit=crop&w=1336&q=80');
    }

    .itemg-3 { 
      background-image: url('https://i.imgur.com/6GoUrYK.jpeg?auto=format&fit=crop&w=1234&q=80');
    }

    .itemg-4 { 
      background-image: url('https://i.imgur.com/LKFRuUS.jpeg?auto=format&fit=crop&w=1352&q=80');
    }

    .itemg-5 { 
      background-image: url('https://i.imgur.com/l8yHQEg.jpeg?auto=format&fit=crop&w=1234&q=80');
    }

/*MODAL GALLERY =====================*/
    .g-modal {
      display: none;
      position: absolute;
      z-index: 9999;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.7);
    }
    .g-modal-content {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        position: relative;
        margin: 2% auto;
        padding: 20px;
        background-color: #0d6ab6cf;
        border-radius: 20px;
        width: 1000px;
        height: 650px;
    }
    .g-modal-images img {
        width: 100%;
        border-radius: 20px;
    }
    .g-modal-images {
        text-align: center;
        position: absolute;
        top: 30px;
        left: 36px;
        width: 800px;
    }
    .close {
        position: absolute;
        top: 0;
        right: 30px;
        cursor: pointer;
        font-size: 65px;
        color: #c5dbed;
    }
    .page-btn {
        margin-top: 100px;
        border: none;
        background: transparent;
        font-size: 50px;
        letter-spacing: 25px;
        color: #c5dbed;
        font-family: 'Bebas Neue';
    }
    .g-modal-pagination {
        position: absolute;
        bottom: 0;
        left: auto;
        right: auto;
    }
    .g-modal-pagination .active {
        color:#f9955e;
    } 
/* MODAL GALLERY ===================== */

/*CONTACT SECTION =========================*/
    .contact-bg {
        filter: grayscale(1) invert(1);
    }
    .contact-section {
        position: relative;
        display: flex;
        justify-content: center;
        padding-bottom: 35px;
        background-image: url(https://i.imgur.com/Dm9FFmd.png);
        background-repeat: no-repeat;
        background-position-x: 115%;
        background-size: contain;
    }
    .form {
        margin-top: 50px;
        display: flex;
        gap: 50px;
        flex-direction: column;
        align-items: center;
    }
    .title-size-contact {
        font-size: 53px;
    }
    .form input ,select{
        width: 550px;
        height: 52px;
        padding: 0 0 0 15px;
        border-radius: 10px;
        background-color: #f8f8f8;
        border: 1.5px solid #b0b0b0;
    }
    .form textarea {
        width: 550px;
        border-radius: 17px;
        background-color: #f8f8f8;
        padding: 15px 0 0 15px;
        border: 1.5px solid #b0b0b0;
    }
    .fs {
        font-size: 18px;
    }
/*CONTACT SECTION =========================*/


/*=======================================RESPONSIVE LAYOUT FOR LAPTOP 1024-1359 ===================================*/
/*=======================================RESPONSIVE LAYOUT FOR LAPTOP 1024-1359 ===================================*/
/*=======================================RESPONSIVE LAYOUT FOR LAPTOP 1024-1359 ===================================*/

    @media screen and (min-width: 1024px) and (max-width: 1359px) {
        .application {
            position: relative;
            display: block;
            margin: 0 auto;
            width: 1024px;
            max-width: 100%;
            background: #fff;
            box-shadow: 0 0 8px 4px rgba(0,0,0,0.1);
        }
        .container {
            padding: 0 20px;
        }
        .top-btn {
            display: none;
            opacity: 0.7;
            position: fixed;
            bottom: 45px;
            right: 4%;
            z-index: 99;
            background-color: transparent;
            color: #0d6ab6;
            font-size: 60px;
            border-radius: 5px;
            padding: 0px 0px;
            cursor: pointer;
        }
    /*HEADER ==================*/
        .header {
            width: 100%;
            margin: 0 auto;
            height: 95px;
            padding-left: 50px;
            background: transparent;
            position: absolute;
            top: 0;
            left: 0;
            max-width: 100%;
            z-index: 10;
        }
        .navigation ul li {
            padding: 57px 25px 10px 25px;
        }
        .dark-mode {
            justify-self: center;
        }
    /*HEADER ==================*/

    /*FIRST SECTION ==================*/
        .ocl {
            position: absolute;
            right: -491px;
            bottom: 5px;
        }
        .ocm-1 {
            position: absolute;
            right: 345px;
            top: 180px;
        }
        .ocs-1 {
            position: absolute;
            right: 425px;
            top: 265px;
        }
        .ocm-2 {
            position: absolute;
            left: 360px;
            top: 410px;
        }
        .ocs-2 {
            position: absolute;
            left: 440px;
            top: 465px;
        }
        .dog-1 {
            width: 435px;
            position: absolute;
            right: -20px;
            bottom: -35px;
        }
        .left-side {
            width: 400px;
            display: flex;
            flex-direction: column;
            gap: 20px;
            justify-content: center;
        }
        .white-swifts {
            position: absolute;
            width: 95px;
            right: 420px;
            bottom: 120px;
        }
    /*FIRST SECTION ==================*/

    /*SECOND SECTION =================*/
        .dog-2 .blue-circles {
            position: absolute;
            top: 55px;
            width: 95%;
            right: 90px;
        }
    /*SECOND SECTION =================*/

    /*THIRD SECTION ==================*/
        .section-third {
            background-image: url(https://i.imgur.com/zJTcp98.png);
            min-height: 577px;
            background-position-x: -250px;
        }
    /*THIRD SECTION ==================*/

    /*FOURTH SECTION =================*/
        .section-fourth {
            background-image: url(https://i.imgur.com/sF2oaeY.png);
            background-position: 0px -480px;
            background-repeat: no-repeat;
        }
        .owl-carousel .owl-stage-outer {
            padding-left: 20px;
            position: relative;
            overflow: hidden;
            -webkit-transform: translate3d(0, 0, 0);
        }
    /*FOURTH SECTION =================*/

    /*FIFTH SECTION ====================*/
        .dog-4 {
            width: 450px;
        }
        .right-side-5 p {
            font-size: 25px;
            margin-top: 20px;
            width: 450px;
        }
        .left-side-5 h1 {
            font-size: 5rem;
            letter-spacing: 2px;
        }
        .card-2 img {
            width: 170px;
        }
        .card-2 ul li {
            font-size: 16px;
        }
    /*FIFTH SECTION ====================*/

    /*SIXTH SECTION ====================*/
        .dog-6 {
            width: 460px;
            position: absolute;
            left: -30px;
            bottom: -35px;
        }
        .promo {
            font-size: 60px;
            left: 87%;
            bottom: 85%;
            padding: 36px 17px;
        }
        .section-sixth {
            background-size: 710px;
        }
    /*SIXTH SECTION ====================*/

    /*SEVENTH SECTION ==================*/
        .section-seventh .owl-carousel .owl-stage-outer {
            padding-left: 55px;
        }
    /*SEVENTH SECTION ==================*/

    /*EIGHTH SECTION ===================*/
        .section-wrap-8 {
            background-position-y: 100px;
        }
        .dog-8 img {
            width: 380px;
        }
        .dog-8 h2 {
            font-size: 28px;
        }
        .ls-8 h1 {
            font-size: 70px;
        }
    /*EIGHTH SECTION ===================*/

    /*NINETH SECTION ===================*/
        .section-nineth {
            background-image: url(https://i.imgur.com/01EUr6u.png);
            background-repeat: no-repeat;
            background-size: 1030px;
        }
        .section-wrap-9 {
            gap: 35px;
        }
        .logo-9 i {
            font-size: 100px;
            padding-left: 14px;
        }
        .lp-9 {
            font-size: 30px;
            font-weight: 500;
        }
        .p-9 {
            width: 650px;
            font-size: 25px;
            letter-spacing: 3px;
            line-height: 2rem;
        }
    /*NINETH SECTION ===================*/

    /*ABOUT SECTION ====================*/
        .t-b h1 {
            font-size: 50px;
            line-height: 0.9em;
        }
        .t-b p {
            font-size: 15px;
        }
        .section-about-first .left-side {
            width: 600px;
            gap: 35px;
        }
        .abt {
            font-size: 13px;
            letter-spacing: 1px;
        }
        .section-about-first .ocl {
            right: 270px;
            top: 316px;
        }
        .section-about-first .oc-large {
            width: 700px;
            height: 700px;
        }
        .section-about-first .ocm-1 {
            display: none;
        }
        .section-about-first .ocm-2 {
            display: none;
        }
        .section-about-first .dog-1 {
            width: 460px;
            position: absolute;
            right: 0px;
            bottom: -30px;
        }
        .section-about-first .right-side {
            height: 560px;
        }
    /*ABOUT SECTION ====================*/

    /*SERVICE SECTION ==================*/
        .happy-dog {
            bottom: 193px;
        }
        .srv-m {
            height: 500px;
        }
        .img-sz-srv-3 {
            width: 250px !important;
        }
        .happy-dog {
            bottom: 193px;
            width: 230px;
            bottom: 240px;
        }
    /*SERVICE SECTION ==================*/
}
/*=======================================RESPONSIVE LAYOUT FOR LAPTOP 1024-1359 ===================================*/
/*=======================================RESPONSIVE LAYOUT FOR LAPTOP 1024-1359 ===================================*/
/*=======================================RESPONSIVE LAYOUT FOR LAPTOP 1024-1359 ===================================*/



/*=======================================RESPONSIVE LAYOUT FOR TABLET 768-1023 ====================================*/
/*=======================================RESPONSIVE LAYOUT FOR TABLET 768-1023 ====================================*/
/*=======================================RESPONSIVE LAYOUT FOR TABLET 768-1023 ====================================*/
    @media screen and (min-width: 768px) and (max-width: 1023px) {
        .application {
            position: relative;
            display: block;
            margin: 0 auto;
            width: 768px;
            max-width: 100%;
            background: #fff;
            box-shadow: 0 0 8px 4px rgba(0,0,0,0.1);
        }
        .container {
            padding: 0 10px;
        }
        .btn-1 {
            border: none;
            font-size: 13px;
            color: #ffffff;
            width: 80px;
            height: 25px;
            border-radius: 21px;
            filter: drop-shadow(-0.14px 3.998px 21px rgba(3, 3, 3, 0.2));
            background-color: #186cb1;
        }
        h1 {
            font-size: 40px;
            line-height: 0.9em;
        }
        .top-btn {
            display: none;
            opacity: 0.7;
            position: fixed;
            bottom: 20px;
            right: 2%;
            z-index: 99;
            background-color: transparent;
            color: #0d6ab6;
            font-size: 40px;
            border-radius: 5px;
            padding: 0px 0px;
            cursor: pointer;
        }
    /*HEADER =================*/
        .logo {
            display: flex;
            flex-direction: column;
            width: 85px;
            height: 95px;
            align-items: center;
            justify-content: center;
            justify-self: flex-start;
        }
        .navigation {
            display: flex;
            align-items: center;
            justify-self: flex-start;
        }
        .navigation ul {
            font-size: 18px;
        }
        .navigation ul li {
            padding: 66px 25px 5px 25px;
        }
        .header {
            height: 95px;
        }
        .dark-mode {
            justify-self: end;
        }
    /*HEADER =================*/

    /*FIRST SECTION ===================*/
        .ocl {
            position: absolute;
            right: -235px;
            top: 0px;
        }
        .oc-large {
            width: 450px;
            height: 450px;
            border-radius: 50%;
            box-shadow: inset -0.14px 3.998px 23px rgba(3,3,3,0.26);
            background-color: #f9955e;
        }
        .oc-medium {
            width: 40px;
            height: 40px;
        }
        .ocm-1 {
            position: absolute;
            right: 470px;
            top: 165px;
        }
        .ocm-2 {
            position: absolute;
            left: 460px;
            top: 80px;
        }
        .oc-small {
            width: 20px;
            height: 20px;
        }
        .ocs-1 {
            position: absolute;
            right: 440px;
            top: 200px;
        }
        .ocs-2 {
            position: absolute;
            left: 430px;
            top: 120px;
        }
        .white-swifts {
            position: absolute;
            width: 50px;
            right: 260px;
            top: 290px;
        }
        .dog-1 {
            width: 265px;
            position: absolute;
            right: 0;
            top: 65px;
        }
        .left-side {
            width: 400px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            justify-content: flex-start;
        }
        .right-side {
            height: 354px;
        }
        .left-side h1 {
            font-size: 50px;
            line-height: 0.9em;
        }
        .left-side .smaller {
            font-size: 35px;
        }
        .left-side .bigger {
            font-size: 60px;
        }
        .left-side .subtitle {
            font-size: 20px;
            line-height: 0.95em;
        }
        .description {
            font-size: 11px;
        }
    /*FIRST SECTION ===================*/

    /*SECOND SECTION ==================*/
        .section-wrap-2 {
            justify-content: space-between;
            display: flex;
        }
        .rs-2 {
            display: flex;
            gap: 50px;
            flex-direction: column;
            height: 465px;
        }
        .ls-2 {
            width: 300px;
            display: flex;
            flex-direction: column;
            gap: 35px;
            justify-content: flex-start;
        }
        .ls-2 h1 {
            font-size: 45px;
            line-height: 0.85em;
        }
        .ls-2 .subtitle {
            font-size: 18px;
            line-height: 0.95em;
        }
        .description-2 {
            font-size: 15px;
            letter-spacing: 0px;
            line-height: 24px;
        }
        .rs-2 h2 {
            font-size: 20px;
            font-family: "Fredoka", sans-serif;
        }
        .dog-2 img:nth-child(1) {
            width: 160px;
            position: absolute;
            right: 0;
            z-index: 1;
        }
        .dog-2 .blue-circles {
            width: 260px;
            position: absolute;
            top: 40px;
            right: 55px;
        }
    /*SECOND SECTION ==================*/

    /*THIRD SECTION ===================*/
        .section-third {
            background-image: url(https://i.imgur.com/zJTcp98.png);
            min-height: 303px;
            background-size: contain;
            background-repeat: no-repeat;
        }
        .section-wrap-3 {
            justify-content: space-between;
            display: flex;
        }
        .sw-3 {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .sw-3 p {
            font-size: 16px;
        }
    /*THIRD SECTION ===================*/

    /*FOURTH SECTION ==================*/
        .section-fourth {
            background-image: url(https://i.imgur.com/UKgp9L5.png);
            background-position: 0px -250px;
            background-repeat: no-repeat;
            background-size: 768px;
        }
        .card-1 {
            gap: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 200px;
        }
        .owl-carousel .owl-item img {
            display: block;
            width: 130px;
        }
        .card-1 p {
            text-align: center;
            font-size: 15px;
        }
        .owl-carousel .owl-stage-outer {
            padding-left: 17px;
            position: relative;
            overflow: hidden;
            -webkit-transform: translate3d(0, 0, 0);
        }
    /*FOURTH SECTION ==================*/

    /*FIFTH SECTION ===================*/
        .left-side-5 h1 {
            font-size: 3rem;
            letter-spacing: 1px;
        }
        .dog-4 {
            width: 350px;
        }
        .right-side-5 p {
            font-size: 18px;
            margin-top: 20px;
            width: 350px;
        }
        .card-2 {
            display: flex;
            align-items: center;
            margin-top: 10px;
            margin-bottom: 10px;
        }
        .card-2 img {
            width: 130px;
        }
        .card-2 ul li {
            font-family: "Fredoka", sans-serif;
            line-height: 1.2rem;
            font-weight: 600;
            letter-spacing: 1.3px;
            font-size: 11px;
        }
    /*FIFTH SECTION ===================*/

    /*SIXTH SECTION ===================*/
        .section-sixth {
            background-image: url(https://i.imgur.com/bAtzb7w.png);
            background-repeat: no-repeat;
            background-size: 350px;
            background-position: -70px 20px;
            position: relative;
            overflow: hidden;
        }
        .section-sixth .swish-06 {
            position: absolute;
            width: 120px;
            left: 5%;
            top: 18%;
        }
        .rs-6 {
            height: 334px;
        }
        .dog-6 {
            width: 240px;
            position: absolute;
            left: -20px;
            bottom: -35px;
        }
        .promo {
            position: absolute;
            font-size: 30px;
            line-height: 0.5em;
            left: 85%;
            bottom: 95%;
            padding: 22px 12px;
            text-align: center;
            color: #fff;
            height: 76px;
            border-radius: 50%;
            box-shadow: inset -0.14px 3.998px 31px rgba(3,3,3,0.21);
            background-color: #0d6ab6;
        }
        .promo .off {
            font-size: 17px;
            font-weight: 500;
        }
    /*SIXTH SECTION ===================*/

    /*SEVENTH SECTION =================*/
        .card-3 {
            gap: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 200px;
        }
        .card-3 p {
            font-size: 14px;
        }
        .section-seventh .owl-carousel .owl-stage-outer {
            padding-left: 20px;
            position: relative;
            overflow: hidden;
            -webkit-transform: translate3d(0, 0, 0);
        }
    /*SEVENTH SECTION =================*/

    /*EIGHTH SECTION ==================*/
        .section-wrap-8 {
            justify-content: space-between;
            display: flex;
            height: 530px;
            flex-direction: row-reverse;
            background-image: url(https://i.imgur.com/UMuTzUj.png);
            background-repeat: no-repeat;
            background-position-y: 65px;
            background-size: 100%;
        }
        .ls-8 {
            width: 350px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            justify-content: flex-start;
        }
        .dog-8 {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
        }
        .dog-8 img {
            width: 290px;
        }
        .dog-8 h2 {
            font-size: 20px;
        }
        .description-8 {
            font-size: 14px;
            letter-spacing: 2px;
            line-height: 22px;
        }
    /*EIGHTH SECTION ==================*/

    /*NINETH SECTION ==================*/
         .section-nineth {
            background-image: url(https://i.imgur.com/01EUr6u.png);
            background-repeat: no-repeat;
            background-size: 768px;
        }
        .section-wrap-9 {
            gap: 20px;
        }
        .logo-9 i {
            font-size: 65px;
            padding-left: 14px;
        }
        .lp-9 {
            font-size: 21px;
            font-weight: 500;
        }
        .p-9 {
            width: 450px;
            font-size: 15px;
            letter-spacing: 2px;
            line-height: 1.3rem;
        }
    /*NINETH SECTION ==================*/

    /*FOOTER ==========================*/
        .footer-wrap {
            padding: 5% 0;
            display: grid;
            width: 100%;
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            grid-auto-rows: auto;
            justify-items: start;
        }
    /*FOOTER ==========================*/

    /*ABOUT SECTION ===================*/
        .section-about-first .left-side {
            width: 366px;
            gap: 20px;
            left: 93px;
        }
        .section-about-first h2 {
            font-size: 40px;
        }
        .abt {
            font-size: 10px;
            letter-spacing: 1px;
            line-height: 1.3em;
        }
        .section-about-first .ocm-1 {
            display: none;
        }
        .section-about-first .ocm-2 {
            display: none;
        }
        .section-about-first .ocl {
            right: 220px;
            top: 330px;
        }
        .section-about-first .oc-large {
            width: 500px;
            height: 500px;
        }
        .section-about-first .dog-1 {
            width: 320px;
            position: absolute;
            right: 0px;
            top: 300px;
        }
    /*ABOUT SECTION ===================*/

    /*SERVICE SECTION =================*/
        .happy-dog {
            width: 200px;
            bottom: 275px;
        }
    /*SERVICE SECTION =================*/

    /*GALLERY SECTION =================*/
        .g-modal-content {
            width: 740px;
        }
        .g-modal-images {
            top: 85px;
            width: 665px;
        }
    /*GALLERY SECTION =================*/

    /*CONTACT SECTION =================*/
        .sm {
            font-size: 14px;
            width: 90px;
            height: 41px;
            border-radius: 17px;
        }
    /*CONTACT SECTION =================*/
}
/*=======================================RESPONSIVE LAYOUT FOR TABLET 768-1023 ====================================*/
/*=======================================RESPONSIVE LAYOUT FOR TABLET 768-1023 ====================================*/
/*=======================================RESPONSIVE LAYOUT FOR TABLET 768-1023 ====================================*/



/*=======================================RESPONSIVE LAYOUT FOR MOBILE UNDER 600 ===================================*/
/*=======================================RESPONSIVE LAYOUT FOR MOBILE UNDER 600 ===================================*/
/*=======================================RESPONSIVE LAYOUT FOR MOBILE UNDER 600 ===================================*/
    @media screen and (max-width: 600px) {
            .application {
                position: relative;
                display: block;
                margin: 0 auto;
                width: 300px;
                max-width: 100%;
                background: #fff;
                box-shadow: 0 0 8px 4px rgba(0,0,0,0.1);
            }
            .visible {
                display: block !important;
                opacity: 1 !important;
                transition: opacity 0.7s ease-in-out;
            }
            .top-btn {
                display: none;
                opacity: 0.7;
                position: fixed;
                bottom: 20px;
                right: 2%;
                z-index: 99;
                background-color: transparent;
                color: #0d6ab6;
                font-size: 40px;
                border-radius: 5px;
                padding: 0px 0px;
                cursor: pointer;
            }
        /*HEADER =========================*/
            .logo {
                position: absolute;
                z-index: 11;
                display: flex;
                flex-direction: column;
                width: 85px;
                height: 65px;
                align-items: center;
                justify-content: flex-end;
                justify-self: flex-start;
            }
            .logo i {
                font-size: 35px;
            }
            .logo p {
                font-size: 12px;
                font-weight: 700;
            }
            .logo span {
                font-size: 12px;
                font-weight: 700;
            }
            .header {
                padding: 0px 0;
                text-align: center;
                width: 100%;
                position: absolute;
                z-index: 1000;
            }
            .header-wrap {
                display: block;
            }
            .navigation {
                display: none;
                opacity: 0;
                transition: opacity 0.7s ease-in-out;
            }
            .navigation ul {
                font-weight: 700;
                color: #fff;
                padding-left: 0px;
                width: 100%;
                height: 100vh;
                display: flex;
                flex-direction: column;
                max-width: 100%;
                transition: opacity 0.5s ease-in-out;
                gap: 0px;
                justify-content: center;
                margin: 0 auto;
                align-items: center;
                z-index: 10;
                background-color: rgba(200, 100, 10, 0.99);
            }
            .it {
                background-color: #186cb12e;
                width: 300px;
            }
            .navigation ul li {
                padding: 5px 0px 5px 0px;
            }
            .navigation ul li:hover {
                background-color: transparent;
                padding-right: 0px;
                color: #fff;
            }
                    .slide-in-left {
          animation: slideInLeft 0.5s ease-in-out forwards;
        }

        .slide-in-right {
          animation: slideInRight 2s ease-in-out forwards;
        }
        @keyframes slideInLeft {
          from {
            opacity: 0;
            transform: translateX(150px);
          }
          to {
            opacity: 1;
            transform: translateX(0);
          }
        }

            .menu-btn {
                display: block;
                position: absolute;
                color: #0b385c;
                font-size: 30px;
                top: 20px;
                right: 20px;
            }
            .dark-mode {
                position: absolute;
                top: 29%;
                left: 65%;
                align-self: center;
            }
            .dark-mode i {
                font-size: 25px;
            }
        /*HEADER =========================*/

        /*FIRST SECTION =============================*/
            .dog-1 {
                width: 270px;
                position: absolute;
                right: 0px;
                z-index: -1;
                opacity: 0.25;
                bottom: -5px;
            }
            .white-swifts {
                display: none;
            }
            .oc-small {
                display: none;
            }
            .ocl {
                position: absolute;
                left: 80px;
                bottom: 20px;
            }
            .oc-large {
                width: 325px;
                height: 325px;
                opacity: 0.8;
                border-radius: 50%;
                box-shadow: inset -0.14px 3.998px 23px rgba(3,3,3,0.26);
                background-color: #f9955e;
            }
            .ocm-1 {
                position: absolute;
                left: 24px;
                opacity: 0.8;
                top: 180px;
            }
            .ocm-2 {
                position: absolute;
                left: 50px;
                bottom: 4px;
            }
            .oc-medium {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                background-color: #f9955e;
            }
            .section-wrap {
                display: flex;
                flex-direction: column-reverse;
            }
            .right-side {
                height: 0px;
            }
            .left-side {
                width: 280px;
                display: flex;
                flex-direction: column;
                gap: 10px;
                justify-content: center;
                align-items: center;
            }
            .left-side h1 {
                text-align: center;
                font-size: 50px;
                line-height: 0.9em;
            }
            .left-side .smaller {
                text-align: center;
                font-size: 35px;
            }
            .left-side .bigger {
                text-align: center;
                font-size: 65px;
            }
            .left-side .subtitle {
                text-align: center;
                font-size: 25px;
                line-height: 0.95em;
            }
            .description {
                text-align: center;
                font-size: 11px;
            }
            .btn-1 {
                cursor: url(https://i.imgur.com/2SkzczI.png), auto;
                border: none;
                font-size: 13px;
                color: #ffffff;
                width: 90px;
                height: 25px;
                border-radius: 21px;
                filter: drop-shadow(-0.14px 3.998px 21px rgba(3, 3, 3, 0.2));
                background-color: #186cb1;
            }
        /*FIRST SECTION =============================*/

        /*SECOND SECTION ============================*/
            .section-wrap-2 {
                justify-content: center;
                display: flex;
                flex-direction: column;
            }
            .ls-2 {
                width: 290px;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 10px;
                justify-content: flex-start;
            }
            .ls-2 h1 {
                font-size: 50px;
                line-height: 0.9em;
                text-align: center;
            }
            .ls-2 .subtitle {
                font-size: 20px;
                text-align: center;
                line-height: 0.95em;
            }
            .orange-line {
                background-color: #f9955e;
                height: 2px;
                width: 200px;
            }
            .description-2 {
                font-size: 14px;
                letter-spacing: 1px;
                line-height: 20px;
                text-align: center;
            }
            .rs-2 h2 {
                font-size: 20px;
                text-align: center;
                font-family: "Fredoka", sans-serif;
            }
            .dog-2 img:nth-child(1) {
                width: 150px;
                position: absolute;
                top: 53px;
                right: 2px;
                z-index: 1;
            }
            .dog-2 .blue-circles {
                width: 200px;
                position: absolute;
                top: 90px;
                right: 60px;
            }
            .rs-2 {
                padding-top: 10px;
                display: flex;
                gap: 10px;
                flex-direction: column;
                height: 420px;
            }
        /*SECOND SECTION ============================*/

        /*THIRD SECTION =============================*/
            .section-third {
                background-image: url(https://i.imgur.com/5LgNp0i.png);
                background-repeat: no-repeat;
                background-size: cover;
                min-height: 330px;
            }
            .section-wrap-3 {
                display: flex;
                /*padding-top: 50px;*/
            }
            .section-wrap-3 h1 {
                font-size: 50px;
                text-align: center;
            }
            .sw-3 {
                display: flex;
                flex-direction: column;
                gap: 15px;
                align-items: center;
            }
            .sw-3 p {
                font-size: 20px;
                text-align: center;
            }
        /*THIRD SECTION =============================*/

        /*FOURTH SECTION ============================*/
            .section-fourth {
                background-image: url(https://i.imgur.com/y8RRiys.png);
                background-position: 0px 0px;
                background-repeat: no-repeat;
                background-size: contain;
            }
            .section-wrap-4 {
                display: flex;
                align-items: center;
                flex-direction: column;
                gap: 50px;
            }
            .section-fourth .title-box h1 {
                font-size: 50px;
            }
            .owl-carousel .owl-item img {
                display: block;
                width: 150px;
            }
            .section-fourth .owl-carousel .owl-stage-outer {
                padding-left: 7px;
                position: relative;
                overflow: hidden;
                -webkit-transform: translate3d(0, 0, 0);
            }
            .owl-carousel button.owl-dot {
                background: #343434;
                margin-top: 15px;
                color: inherit;
                border: none;
                border-radius: 50%;
                padding: 5px !important;
                font: inherit;
            }
            .owl-dots {
                display: flex;
                justify-content: center;
                gap: 20px;
            }
            .owl-carousel button.active {
                background: #e88b57;
                margin-top: 15px;
                color: inherit;
                border: none;
                border-radius: 50%;
                padding: 5px !important;
               
                font: inherit;
            }
            .card-1 {
                gap: 10px;
                display: flex;
                flex-direction: column;
                align-items: center;
                width: 250px;
            }
            .card-1 p {
                font-size: 13px;
                text-align: center;
            }
            .owl-nav {
                display: none;
            }
            .owl-dots {
                display: flex;
            }
        /*FOURTH SECTION ============================*/

        /*FIFTH SECTION =============================*/
            .section-wrap-5 {
                justify-content: center;
                flex-direction: column;
                display: flex;
            }
            .dog-4 {
                width: 290px;
            }
            .left-side-5 h1 {
                font-size: 50px;
                text-align: center;
                letter-spacing: 1px;
            }
            .right-side-5 {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }
            .card-2 {
                display: flex;
                justify-content: center;
                align-items: center;
                margin-top: 25px;
                margin-bottom: 35px;
            }
            .card-2 img {
                width: 100px;
            }
            .card-2 ul li {
                font-family: "Fredoka", sans-serif;
                line-height: 1.4rem;
                font-weight: 600;
                letter-spacing: 1.4px;
                font-size: 13px;
            }
            .right-side-5 p {
                font-size: 15px;
                text-align: center;
                margin-top: 20px;
                width: 290px;
            }
        /*FIFTH SECTION =============================*/

        /*SIXTH SECTION =============================*/
            .section-sixth {
                background-image: url(https://i.imgur.com/bAtzb7w.png);
                background-repeat: no-repeat;
                background-size: 383px;
                background-position: -174px 212px;
                position: relative;
                overflow: hidden;
            }
            .section-sixth .swish-06 {
                display: none;
                position: absolute;
                width: 250px;
                left: 10%;
                top: 20%;
            }
            .section-wrap-6 {
                justify-content: center;
                display: flex;
                align-items: center;
                flex-direction: column;
            }
            .rs-6 {
                height: 260px;
            }
            .dog-6 {
                width: 175px;
                position: absolute;
                left: -11px;
                bottom: -35px;
            }
            .promo {
                position: absolute;
                font-size: 40px;
                line-height: 0.5em;
                left: 70%;
                bottom: 95%;
                padding: 20px 8px;
                text-align: center;
                color: #fff;
                border-radius: 50%;
                box-shadow: inset -0.14px 3.998px 31px rgba(3,3,3,0.21);
                background-color: #0d6ab6;
            }
            .promo .off {
                font-size: 19px;
                font-weight: 500;
            }
        /*SIXTH SECTION =============================*/

        /*SEVENTH SECTION ===========================*/
            .section-wrap-7 .title-box h1 {
                font-size: 40px;
                text-align: center;
            }

            .section-seventh .owl-carousel .owl-stage-outer {
                padding-left: 7px;
                position: relative;
                overflow: hidden;
                -webkit-transform: translate3d(0, 0, 0);
            }
            .card-3 {
                gap: 10px;
                display: flex;
                flex-direction: column;
                align-items: center;
                width: 250px;
            }
            .card-3 p {
                font-size: 13px;
                text-align: center;
            }
        /*SEVENTH SECTION ===========================*/

        /*EIGHTH SECTION ============================*/
            .section-wrap-8 {
                justify-content: space-between;
                display: flex;
                height: 840px;
                flex-direction: COLUMN;
                /* padding-top: 100px; */
                background-image: url(https://i.imgur.com/UMuTzUj.png);
                background-position-y: bottom;
                background-repeat: no-repeat;
                background-size: 100%;
            }
            .ls-8 {
                width: 290px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: 20px;
            }
            .ls-8 h1 {
                font-size: 40px;
                text-align: center;
            }
            .description-8 {
                text-align: center;
                font-size: 15px;
                letter-spacing: 1px;
                line-height: 20px;
            }
            .dog-8 img {
                width: 280px;
            }
            .dog-8 h2 {
                font-size: 20px;
                text-align: center;
            }
        /*EIGHTH SECTION ============================*/

        /*NINETH SECTION ============================*/
            .section-nineth {
                margin-top: 10px;
                background-image: url(https://i.imgur.com/KELZ7Gg.png);
                background-position-x: right;
                background-size: cover;
            }
            .section-wrap-9 {
                display: flex;
                flex-flow: column;
                /* justify-content: center; */
                align-items: center;
                /*padding-top: 50px;
                padding-bottom: 40px;*/
                gap: 20px;
            }
            .logo-9 i {
                font-size: 80px;
            }
            .lp-9 {
                font-size: 18px;
                font-weight: 500;
            }
            .p-9 {
                width: 280px;
                font-size: 17px;
                letter-spacing: 2px;
                line-height: 1.4rem;
                text-align: center;
            }
        /*NINETH SECTION ============================*/

        /*FOOTER ====================================*/
            .footer-wrap {
                padding: 5%;
                display: flex;
                width: 100%;
                flex-direction: column;
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                grid-auto-rows: auto;
                justify-items: start;
            }
            .widget {
                padding-top: 15px;
            }
            .widget ul {
                padding-top: 0px;
                padding-left: 0;
            }
            .widget-1 p {
                padding-top: 5px;
            }
            .logo-footer {
                display: flex;
                margin-top: 0px;
                flex-direction: column;
                width: 85px;
                height: 95px;
                align-items: center;
                justify-content: flex-end;
                justify-self: flex-start;
            }
        /*FOOTER ====================================*/

        /*ABOUT SECTION =============================*/
            .t-b h1 {
                font-size: 28px;
            }
            .t-b p {
                font-size: 10px;
            }
            .section-about-first .ocm-1 {
                display: none;
            }
            .section-about-first .ocm-2 {
                display: none;
            }
            .section-about-first .left-side {
                width: 280px;
                display: flex;
                flex-direction: column;
                gap: 15px;
                align-items: center;
                justify-content: center;
                position: sticky;
            }
            .section-about-first .section-wrap {
                padding-top: 0px;
            }
            .section-about-first h2 {
                font-size: 35px;
            }
            .section-about-first .left-side .subtitle {
                text-align: center;
                font-size: 15px;
                line-height: 0.95em;
            }
            .abt {
                font-size: 9px;
                letter-spacing: 0px;
                line-height: 1.5em;
            }
            .section-about-first .ocl {
                position: absolute;
                top: 335px;
                left: -125px;
            }
            .section-about-first .oc-large {
                width: 330px;
                height: 330px;
            }
            .section-about-first .dog-1 { 
                display: none;
            }
        /*ABOUT SECTION =============================*/

        /*SERVICE SECTION ===========================*/
            .fz-h2 {
                font-size: 25px;
                text-align: center;
            }
            .lss-8 {
                width: 280px;
                gap: 15px;
                align-items: center;
            }
            .rss-8 {
                display: flex;
                gap: 50px;
                flex-direction: column;
                height: 290px;
            }
            .lss-8 .description-8 {
                text-align: center;
                font-size: 11px;
                letter-spacing: 0px;
                line-height: 15px;
            }
            .srv-m {
                justify-content: center;
                display: flex;
                height: 498px;
                flex-direction: column;
                background-image: url(https://i.imgur.com/UMuTzUj.png);
                background-position-y: bottom;
                background-repeat: no-repeat;
                background-size: 100%;
            }
            .srv-m .dog-8 img {
                width: 192px;
            }
            .happy-dog {
                display: none;
            }
        /*SERVICE SECTION ===========================*/

        /*GALLERY SECTION ===========================*/
            .gallery-wrap {
                flex-direction: column;
                gap: 10px;
                height: 100vh;
            }
            .itemg {
                border-radius: 10px;
            }
            .g-modal-content {
                width: 290px;
                height: 260px;
            }
            .g-modal-images {
                top: 45px;
                left: 16px;
                width: 260px;
            }
            .close {
                top: 0;
                right: 15px;
                font-size: 35px;
            }
            .page-btn {
                margin-top: 0px;
                font-size: 25px;
                letter-spacing: 20px;
            }
            .g-modal-pagination {
                left: 50px;
            }
        /*GALLERY SECTION ===========================*/

        /*CONTACT SECTION ===========================*/
            .contact-section h1 {
                font-size: 45px;
                line-height: 0.9em;
            }
            .contact-section {
                padding-bottom: 35px;
                background-position-x: 118px;
                background-size: contain;
            }
            .form input, select {
                width: 280px;
            }
            .form textarea {
                width: 280px;
                border-radius: 13px;
            }
            .sm {
                font-size: 12px;
                width: 100px;
                height: 35px;
                border-radius: 16px;
            }
        /*CONTACT SECTION ===========================*/
    }

/*=======================================RESPONSIVE LAYOUT FOR MOBILE UNDER 600 ===================================*/
/*=======================================RESPONSIVE LAYOUT FOR MOBILE UNDER 600 ===================================*/
/*=======================================RESPONSIVE LAYOUT FOR MOBILE UNDER 600 ===================================*/