/* CSS Document */

/*########################################
## Body
########################################*/
:root {
    --white: #FFFFFF;
    --lightgray: #F8F6FA;
    --black: #000000;
    --purple: #794696;
    --gray: #878787;
    --orange: #FD8722;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	box-sizing: inherit;
}

body {
    padding: 0;
    margin: 0;
    width: 100%;
    font-family: 'Onest', sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: var(--gray);
    min-width: 320px;
}

/*########################################
## Typography
########################################*/

/* Locally hosted font face: FinkRoman */
@font-face {
    font-family: "FinkRoman";
    src: url("fonts/FinkRoman.woff2") format("woff2"),  /* Preferred (modern browsers) */
        url("fonts/FinkRoman.woff") format("woff"),    /* Fallback for older browsers */
        url("fonts/FinkRoman.ttf") format("truetype"); /* Fallback for very old browsers */
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    crossorigin: anonymous;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'FinkRoman', sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1.1;
    margin: 0 0 30px;
}

ul,
ol,
li,
dl,
dd,
dt {
    padding: 0;
    margin: 0;
}

ul,
ol {
    margin: 0;
    padding-left: 20px;
}

ul li::marker,
ol li::marker {
    color: var(--orange);
}

ul.paws {
    list-style: none;
    padding-left: 0;
    margin: 30px 0;
}

ul.paws:last-of-type {
    margin-bottom: 0;
}

ul.paws > li {
    position: relative;
    padding-left: 40px;
    font-size: 20px;
    margin-bottom: 20px;
}

ul.paws > li::after {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 20px;
    height: 20px;
    background: url(../images/common/orange_paw_mini.png) center no-repeat;
    background-size: 100%;
}

ol.paws-alt {
    padding-left: 20px;
}

ol.paws-alt > li {
    position: relative;
    margin-bottom: 30px;
    padding-left: 20px;
    z-index: 10;
}

ol.paws-alt > li::marker {
    font-family: "FinkRoman", serif;
    font-size: 30px;
    line-height: 1.2;
    color: var(--white);
}

ol.paws-alt > li::after {
    position: absolute;
    top: -15px;
    left: -42px;
    content: "";
    width: 42px;
    height: 50px;
    background: url(../images/common/paw_number.png) center no-repeat;
    background-size: 100%;
    z-index: -1;
}

.ul-col-2 {
    columns: 2;
}

a {
    color: var(--purple);
    text-decoration: none;
    transition: all .3s linear;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -ms-transition: all .3s linear;
    -o-transition: all .3s linear;
}

a:hover {
    color: var(--purple);
}

a:focus {
    outline: none;
}

h1,
h2 {
    font-size: 70px;
}

h3 {
    font-size: 45px;
}

h4 {
    font-size: 30px;
}

h5 {
    font-family: 'Onest', sans-serif;
    font-weight: 700;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--lightgray);
    margin-bottom: 15px;
}

p,
ul,
ol {
    font-size: 18px;
    color: var(--gray);
    line-height: 200%;
    line-height: 150%;
    font-weight: 400;
    margin: 0 0 30px;
}

p:last-of-type {
    margin-bottom: 0;
}

.white {
    color: var(--white) !important;
}

.orange {
    color: var(--orange) !important;
}

.purple {
    color: var(--purple) !important;
}

/*########################################
## Layouts
########################################*/
.screen-reader-text {
    display: block;
    width: .1px;
    height: .1px;
    overflow: hidden;
    padding: 0 !important;
    margin: 0 !important;
}

img {
    display: block;
    border: 0;
    max-width: 100%;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
}

hr.hide-line {
    padding: 0;
    margin: 0;
    display: none;
}

figure {
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: inline-block;
}

figure img {
    display: block;
}

figure img:hover {
	filter: brightness(1.1);
	-webkit-filter: brightness(1.1);
	transform: scale(1.03);
	-webkit-transform: scale(1.03);
	-moz-transform: scale(1.03);
	-ms-transform: scale(1.03);
	-o-transform: scale(1.03);
}

.container {
    position: relative;
    width: 100%;
    max-width: 1600px;
    padding: 0 20px;
    margin: 0 auto;
}

.mobile {
    display: none;
}

.curve-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}

.curve-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}

.text-center {
    text-align: center;
}

/*########################################
## Flexbox
########################################*/
.dflex {
    display: flex !important;
    display: -webkit-flex !important;
}

.sb-flex {
    justify-content: space-between;
    -webkit-justify-content: space-between;
}

.cn-flex {
    justify-content: center;
    -webkit-justify-content: center;
}

.end-flex {
    justify-content: flex-end;
    -webkit-justify-content: flex-end;
}

.start-flex {
    justify-content: flex-start;
    -webkit-justify-content: flex-start;
}

.cn-align {
    align-items: center;
    -webkit-align-items: center;
}

.end-align {
    align-items: flex-end;
    -webkit-align-items: flex-end;
}

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

.wrap-flex {
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
}

.col-flex {
    flex-direction: column;
    -webkit-flex-direction: column;
}

.row-flex {
    flex-direction: row;
    -webkit-flex-direction: row;
}

.rowrev-flex {
    flex-direction: row-reverse;
}

/*########################################
## Clearfix
########################################*/
.clear {
    clear: both;
}

.clearfix:after {
    height: 0;
    clear: both;
    visibility: hidden;
}

.clrfix:before,
.clrfix:after {
    content: " ";
    display: table;
}

.clrfix:after {
    clear: both;
}

.clrfix {
    zoom: 1;
}

/*########################################
## Forms
########################################*/

/* Messages */

form .messages p {
    display: none;
    font-family: "Open Sans", sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    font-size: 16px !important;
}

form .loading {
    display: none;
}

form .alert {
    padding: 15px !important;
    margin-bottom: 20px;
    border: 1px solid transparent !important;
    border-radius: 4px !important;
}

form .alert-success {
    color: #3c763d !important;
    background-color: #dff0d8 !important;
    border-color: #d6e9c6 !important;
}

form .alert-danger {
    color: #a94442 !important;
    background-color: #f2dede !important;
    border-color: #ebccd1 !important;
}

form input:focus,
form select:focus,
form textarea:focus {
    outline: none;
}

/* Forms */

.ctc-form .section {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    margin: 40px 0;
}

.ctc-form .section > h5 {
    width: 100%;
    color: var(--purple);
    border-bottom: 2px solid var(--purple);
    text-transform: uppercase;
}

.ctc-form .section .col-33 {
    width: calc((100% - 2 * 20px) / 3);
}

.ctc-form .section .col-50 {
    width: calc((100% - 1 * 20px) / 2);
}

.ctc-form .section .col-100 {
    width: 100%;
}

.ctc-form .section .group {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    border: 1px solid #D6D6D6;
    padding: 20px;
    gap: 20px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.ctc-form .section .field label {
    font-size: 18px;
    line-height: 1.2;
}

.ctc-form .section .field .label {
    display: block;
    margin-top: 10px;
}

.ctc-form input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]),
.ctc-form select,
.ctc-form textarea {
    width: 100%;
    border: 1px solid #D6D6D6;
    background: var(--white);
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 120%;
    padding: 15px;
    display: block;
    color: var(--black);
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.ctc-form textarea {
    min-height: 100px;
}

.ctc-form .button {
    display: block;
    margin: 10px auto;
}

.ctc-form .recap {
    display: inline-block;
}

.ctc-hide {
    display: none;
}

.g-recaptcha > div {
    margin: 20px auto 0;
}

/*########################################
## Button
########################################*/

.button,
.contactForm input[type=submit] {
    position: relative;
    z-index: 1;
    display: inline-block;
    min-width: 200px;
    padding: 20px;
    text-align: center;
    font-family: 'Onest', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: var(--white);
    background-color: var(--orange);
    line-height: 1.2;
    border: none;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
}

.button-purple {
    background-color: var(--purple);
}

.button-lg {
    padding: 40px;
    font-size: 25px;
}

.button:hover {
    /* background-color: var(--purple); */
    color: var(--white) !important;
}

/* .button::after {
    position: absolute;
    z-index: -1;
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    transform-origin: top;
    background: #111111;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transform: scaleY(0);
    -webkit-transform: scaleY(0);
    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -o-transform: scaleY(0);
}

.button:hover::after {
    transform: scaleY(1);
    -webkit-transform: scaleY(1);
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
} */

/*########################################
## Modals
########################################*/

/* Modal overlay */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.6);
    z-index: 999;
    overflow: auto;
    padding: 40px 20px;
}

/* Modal box */
.modal {
    position: relative;
    top: 0;
    left: 50%;
    background: #fff;
    padding: 40px;
    max-width: 700px;
    width: 90%;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    z-index: 1000;
    transform: translateX(-50%);
}

/* Close button */
.modal-close {
    float: right;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
}

/* Modal header */
.modal-header {
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: bold;
}

/* Modal body */
.modal-body {
    font-size: 16px;
}

/* Modal open button */
.open-modal-btn {
    cursor: pointer;
}

/*########################################
## Header
########################################*/
header {
    position: relative;
}

#header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 999;
    background-color: transparent;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}

#header .container {
    max-width: 1820px;
}

#header nav #pull {
    display: none;
    cursor: pointer;
}

#header .header-wrap {
    padding: 30px 0;
}

/* Header Logo */
#header .header-logo {
    width: 25%;
}

#header .header-logo a {
    line-height: 1;
}

/* Header Nav */
#header .header-right {
    width: 75%;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}

#header .header-nav {
    padding-right: 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

#header .header-nav nav {
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

#header .header-nav nav > ul {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 30px;
}

#header .header-nav nav > ul > li {
    position: relative;
    padding: 0;
    margin: 0;
}

#header .header-nav nav > ul > li > a {
    display: inline-block;
    font-weight: 700;
    font-size: 16px;
    line-height: 120%;
    padding: 18px 0;
    text-transform: uppercase;
    text-align: center;
    color: var(--white);
    position: relative;
    transition: all .3s linear;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -ms-transition: all .3s linear;
    -o-transition: all .3s linear;
}

#header .header-nav nav > ul > li > a::after {
    content: "";
    background: url(../images/common/orange_bone_small.png) center no-repeat;
    background-size: contain;
    height: 15px;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 0;
    transition: all .3s linear;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -ms-transition: all .3s linear;
    -o-transition: all .3s linear;
    transform: translateY(100%);
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    transform-origin: center;
}

#header .header-nav nav > ul > li > a.active-menu,
#header .header-nav nav > ul > li > a:hover {
    color: var(--orange) !important;
}

#header .header-nav nav > ul > li > a.active-menu::after,
#header .header-nav nav > ul > li > a:hover::after {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
}

/* Header Nav > Sub Menu */
#header .header-nav nav > ul > li > ul.sub-menu {
    min-width: 300px;
    padding: 20px;
    list-style: none;
    margin: 0;
    position: absolute;
    top: 110%;
    left: 0;
    opacity: 0;
    visibility: hidden;
    background-color: var(--white);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
}

#header .header-nav nav > ul > li > ul.sub-menu > li {
    padding: 5px 0;
}

#header .header-nav nav > ul > li > ul.sub-menu > li > a {
    display: block;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
}

#header .header-nav nav > ul > li:hover > ul.sub-menu {
    top: 120%;
    opacity: 1;
    visibility: visible;
}

#header .header-nav nav > ul > li > ul.sub-menu > li > a.active-menu,
#header .header-nav nav > ul > li > ul.sub-menu > li > a:hover {
    color: var(--orange);
}

/* Header Phone */
#header .header-phone {
    padding-left: 20px;
}
#header .header-phone a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

#header .header-phone .text small {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--orange);
}

#header .header-phone .text span {
    display: block;
    color: var(--white);
    font-weight: 700;
    font-size: 1.302vw;
}

/* Sticky Header */
#header.sticky {
    background-color: var(--purple);
}

#header.sticky .header-logo {
    width: 20%;
}

#header.sticky .header-wrap {
    padding: 20px 0;
    /* align-items: center; */
}

#header.sticky .header-wrap .header-logo img {
    max-width: 100px;
}

#header.sticky .header-right {
    padding-top: 20px;
    width: 80%;
}

#header.sticky .header-nav nav > ul {
    gap: 15px;
}

#header.sticky .header-nav nav > ul > li > a {
    font-size: 14px;
}

/*########################################
## Banner
########################################*/
#home-banner {
    position: relative;
    background: url(../images/home/home_banner.jpg) center right no-repeat;
    background-size: cover;
    min-height: 980px;
    padding-top: 480px;
}

#home-banner .banner-caption {
    max-width: 50%;
}

#home-banner .banner-caption h2 {
    color: var(--white);
}

#home-banner .banner-caption p {
    color: var(--white);
    font-size: 25px;
    font-weight: 700;
    margin: 35px 0;
}

#home-banner .paw {
    position: absolute;
    bottom: 0;
    right: 8.333%;
    z-index: 20;
}

/*########################################
## Home Page Content
########################################*/

/* Home > About */
.home #about {
    position: relative;
    padding: 140px 0; 
    background-color: var(--lightgray);
}

.home #about .bone-outer {
    position: absolute;
    left: 3%;
    bottom: 140px;
}

.home #about .container {
    max-width: 1366px;
}

.home #about .image {
    position: relative;
    width: 40%;
}

.home #about .image .bone-inner {
    position: absolute;
    top: -30px;
    left: 0;
}

.home #about .text {
    width: 50%;
}

.home #about .text h1 {
    color: var(--purple);
}

.home #about .text .button {
    margin-top: 30px;
}

/* Home > Services */
.home #services {
    background-color: var(--lightgray);
}

.home #services .container {
    position: relative;
    padding: 110px 115px;
    background-color: var(--white);
    margin-bottom: -210px;
    z-index: 20;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

.home #services h2 {
    color: var(--purple);
    text-align: center;
}

.home #services .services-wrapper .service {
    position: relative;
    padding: 0 15px;
}

.home #services .services-wrapper .service img {
    border-radius: 20px;
}

.home #services .services-wrapper .service h4 {
    display: block;
    position: absolute;
    bottom: 30px;
    left: 30px;
    right: 30px;
    background-color: var(--purple);
    border-radius: 30px;
    text-align: left;
    color: var(--white);
    padding: 20px;
}

/* Home > Testimonials */
.home #testimonials {
    position: relative;
    background-color: var(--orange);
    border-radius: 50px;
    padding: 350px 0 150px 0;
}

.home #testimonials .container {
    max-width: 1366px;
}

.home #testimonials .text {
    width: 45%;
    color: var(--white);
}

.home #testimonials .text .quote {
    margin-bottom: 30px;
}

.home #testimonials .text p {
    color: var(--white);
    font-weight: 700;
    font-size: 25px;
}

.home #testimonials .text p.stars {
    font-size: 30px;
    color: var(--purple);
    margin: 0;
}

.home #testimonials .text .read-more {
    display: block;
    margin-top: 50px;
}

.home #testimonials .text .socials {
    margin-top: 20px;
}

.home #testimonials .text .socials .fab {
    font-size: 30px;
}

.home #testimonials .image {
    position: relative;
    width: 40%;
    text-align: right;
}

.home #testimonials .image .paw {
    position: absolute;
    top: -85px;
    left: -85px;
}

.home #testimonials .image .dog {
    position: relative;
    display: block;
    border-radius: 20px;
    box-shadow: 20px 20px 0 var(--purple);
    z-index: 10;
}

/* Home > Gallery */
.home #gallery {
    padding: 50px;
}

.home #gallery .container {
    gap: 30px;
    padding: 0;
}

.home #gallery img {
    border-radius: 20px;
    width: calc((100% - 3 * 30px) / 4);
}

/* Home > D-Magazine */
#d-magazine {
    position: relative;
    padding: 100px 0;
}

#d-magazine .bone-outer {
    position: absolute;
    top: 100px;
    right: 3%;
}

#d-magazine .container {
    max-width: 1366px;
}

#d-magazine .image {
    width: 55%;
}

#d-magazine .image img {
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

#d-magazine .text {
    width: 45%;
    background: var(--lightgray);
    padding: 50px 80px;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

#d-magazine .text .featured-text {
    gap: 20px;
}

#d-magazine .text h3 {
    color: var(--purple);
    margin-top: 50px;
}

#d-magazine .text .button {
    margin-top: 40px;
}

/* Home > Download */
.home #download {
    position: relative;
    padding: 20px 0 80px 0;
}

.home #download .bone-outer {
    position: absolute;
    bottom: 180px;
    left: 7.5%;
}

.home #download .container {
    max-width: 1100px;
    gap: 45px;
}

.home #download .download-buttons {
    gap: 30px;
}

/* Home > Awards */
#awards {
    position: relative;
    padding: 80px 0 105px 0;
    background-color: var(--lightgray);
}

#awards .bone-outer-1 {
    position: absolute;
    top: 180px;
    right: 7.5%;
}

#awards .bone-outer-2 {
    position: absolute;
    bottom: 180px;
    left: 3%;
}

#awards .container {
    max-width: 1366px;
}

#awards h2 {
    text-align: center;
    color: var(--purple);
}

#awards .awards-logos {
    gap: 20px;
    margin: 20px 0;
    flex-wrap: wrap;
}

#awards .awards-logos img {
    max-width: 23%;
}

#awards .awards-list {
    gap: 20px;
    margin-top: 40px;
}

#awards .awards-list .awards-col {
    width: 30%;
}

#awards .awards-list .awards-col .award {
    position: relative;
    padding-left: 45px;
    margin: 15px 0;
}

#awards .awards-list .awards-col .award h4 {
    color: var(--purple);
    margin: 0;
}

#awards .awards-list .awards-col .award .fa-check-circle {
    position: absolute;
    top: 8px;
    left: 0;
    color: var(--orange);
}

/* Home > Contact */
.home #contact-us {
    position: relative;
    background: var(--orange) url(../images/home/home_contact_bg.png) center right no-repeat;
    background-size: cover;
    padding: 300px 0;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    margin-top: -25px;
    z-index: 10;
}

.home #contact-us .container {
    max-width: 1366px;
}

.home #contact-us .text {
    max-width: 375px;
}

.home #contact-us .text h2 {
    color: var(--white);
}

.home #contact-us .text .bark {
    gap: 20px;
}

.home #contact-us .text .bark .phone {
    flex-direction: column;
}

.home #contact-us .text .bark .phone small {
    color: var(--white);
}

.home #contact-us .text .bark .phone a {
    color: var(--white);
    font-size: 25px;
    font-weight: 700;
}

.home #contact-us .paw {
    position: absolute;
    left: 7.5%;
    bottom: 0;
    z-index: 10;
}

/*########################################
## Inner Pages
########################################*/

/* Inner Pages Banner */

.banner-inner {
    position: relative;
    min-height: 470px;
    background: var(--purple);
}

.banner-inner .curve-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}

.banner-inner .paw {
    position: absolute;
    bottom: 0;
    right: 8.333%;
    z-index: 20;
}

.banner-inner .container {
    padding: 200px 0;
    text-align: center;
}

.banner-inner h1 {
    color: var(--white);
}

.bone-left {
    left: 3.5%;
}

.bone-right {
    right: 3.5%;
}

/* Dog Boarding Page */

.dog-boarding-page h5 {
    color: var(--purple);
}

.dog-boarding-page .section-1 {
    padding: 80px 0;
    background: var(--lightgray);
}

.dog-boarding-page .section-1 .container {
    max-width: 960px;
    text-align: center;
}

.dog-boarding-page .section-2 {
    position: relative;
    padding: 100px 0;
}

.dog-boarding-page .section-2 .bone-1 {
    position: absolute;
    top: 10%;
}

.dog-boarding-page .section-2 .bone-2 {
    position: absolute;
    top: 35%;
}

.dog-boarding-page .section-2 .bone-3 {
    position: absolute;
    top: 65%;
}

.dog-boarding-page .section-2 .bone-4 {
    position: absolute;
    top: 90%;
}

.dog-boarding-page .section-2 .container {
    flex-wrap: wrap;
    max-width: 1366px;
}

.dog-boarding-page .section-2 .header {
    width: 100%;
    margin-bottom: 60px;
}

.dog-boarding-page .section-2 .header > * {
    max-width: 960px;
    margin: 0 auto 20px;
    text-align: center;
}

.dog-boarding-page .section-2 .header h2 {
    color: var(--purple);
}

.dog-boarding-page .section-2 .text-left,
.dog-boarding-page .section-2 .text-right {
    width: 45%;
}

.dog-boarding-page .section-2 .text-left .price {
    color: var(--orange);
}

.dog-boarding-page .section-2 .text-left .price span {
    font-size: 35px;
    font-family: 'FinkRoman', serif;
}

.dog-boarding-page .section-2 .boarding-prices-wrapper {
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 30px;
}

.dog-boarding-page .section-2 .boarding-prices-wrapper .boarding-service {
    width: calc((100% - 2 * 30px) / 3);
    background: var(--lightgray);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.dog-boarding-page .section-2 .boarding-prices-wrapper .boarding-service img {
    width: 100%;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.dog-boarding-page .section-2 .boarding-prices-wrapper .boarding-service .text-wrapper {
    padding: 30px;
}

.dog-boarding-page .section-2 .boarding-prices-wrapper .boarding-service h4 {
    color: var(--purple);
    margin: 0;
}

.dog-boarding-page .section-2 .boarding-prices-wrapper .boarding-service p {
    margin-bottom: 10px;
}

.dog-boarding-page .section-2 .boarding-prices-wrapper .boarding-service .price {
    color: var(--orange);
    margin-bottom: 10px;
}

.dog-boarding-page .section-2 .boarding-prices-wrapper .boarding-service .divider {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--white);
    margin: 30px 0;
}

.dog-boarding-page .section-2 .boarding-prices-wrapper .boarding-service ul li::marker {
    color: var(--orange);
}

.dog-boarding-page .section-2 .boarding-prices-wrapper .boarding-service.day-stay {
    background-color: var(--purple);
}

.dog-boarding-page .section-2 .boarding-prices-wrapper .boarding-service.day-stay h4,
.dog-boarding-page .section-2 .boarding-prices-wrapper .boarding-service.day-stay p,
.dog-boarding-page .section-2 .boarding-prices-wrapper .boarding-service.day-stay ul {
    color: var(--white);
}

.dog-boarding-page .section-3 {
    position: relative;
    background: url(../images/dog-boarding/dog_walking_bg.jpg) center no-repeat;
    background-size: cover;
    padding: 100px 0;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
}

.dog-boarding-page .section-3 .dog-walking-content {
    margin-left: auto;
    max-width: 585px;
    padding: 30px;
    background-color: var(--lightgray);
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

.dog-boarding-page .section-3 .dog-walking-content > h4 {
    text-align: center;
    margin-bottom: 20px;
}

.dog-boarding-page .section-3 .dog-walking-content > p {
    margin-bottom: 20px;
    text-align: center;
    font-size: 16px;
}

.dog-boarding-page .section-3 .dog-walking-content .single-dog {
    margin-bottom: 20px;
}

.dog-boarding-page .section-3 .dog-walking-content .single-dog,
.dog-boarding-page .section-3 .dog-walking-content .personalized {
    background: var(--white);
    padding: 20px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.dog-boarding-page .section-3 .dog-walking-content .pd-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--lightgray);
}

.dog-boarding-page .section-3 .dog-walking-content .pd-wrap:last-of-type {
    border-bottom: 0;
}

.dog-boarding-page .section-3 .dog-walking-content .pd-wrap h5 {
    margin-bottom: 0;
}

.dog-boarding-page .section-3 .dog-walking-content .pd-wrap .price {
    color: var(--orange);
}

.dog-boarding-page .section-3 .dog-walking-content .pd-wrap .price span {
    font-family: 'FinkRoman', serif;
    font-size: 35px;
}

.dog-boarding-page .section-3 .dog-walking-content .pd-wrap .duration {
    color: var(--gray);
}

.dog-boarding-page .section-4 {
    position: relative;
    padding: 130px 0;
}

.dog-boarding-page .section-4 .bone-1 {
    position: absolute;
    top: 10%;
}

.dog-boarding-page .section-4 .container {
    max-width: 1366px;
}

.dog-boarding-page .section-4 .text {
    width: 45%;
}

.dog-boarding-page .section-4 .text h4 {
    color: var(--purple);
}

.dog-boarding-page .section-4 .text p {
    font-size: 20px;
}

.dog-boarding-page .section-4 .text .phone {
    margin-top: 30px;
}

.dog-boarding-page .section-4 .text .phone a {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
    color: var(--gray);
}

.dog-boarding-page .section-4 .text .phone .text small {
    display: block;
    font-size: 15px;
    font-weight: 700;
}

.dog-boarding-page .section-4 .text .phone .text span {
    display: block;
    font-weight: 700;
    font-size: 25px;
}

.dog-boarding-page .section-4 .image {
    position: relative;
    width: 40%;
    text-align: right;
}

.dog-boarding-page .section-4 .image .paw {
    position: absolute;
    top: -85px;
    left: -85px;
}

.dog-boarding-page .section-4 .image .dog {
    position: relative;
    display: block;
    z-index: 10;
    box-shadow: 20px 20px 0 var(--purple);
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

.dog-boarding-page .section-5 {
    position: relative;
    background: var(--orange);
    padding: 100px 0 150px 0;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
}

.dog-boarding-page .section-5 .bone-1 {
    position: absolute;
    bottom: 50%;
}

.dog-boarding-page .section-5 .container {
    max-width: 1366px;
}

.dog-boarding-page .section-5 .image {
    width: 40%;
}

.dog-boarding-page .section-5 .image img {
    box-shadow: 20px 20px 0 var(--purple);
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

.dog-boarding-page .section-5 .text {
    width: 45%;
}

.dog-boarding-page .section-5 .text h4,
.dog-boarding-page .section-5 .text p {
    color: var(--white);
}

.dog-boarding-page .section-5 .text .paw {
    gap: 20px;
    margin-top: 40px;
}

.dog-boarding-page .section-6 {
    position: relative;
    padding: 80px 0 150px 0;
}

.dog-boarding-page .section-6 .bone-1 {
    position: absolute;
    top: 10%;
}

.dog-boarding-page .section-6 .bone-2 {
    position: absolute;
    bottom: 10%;
}

.dog-boarding-page .section-6 .container {
    max-width: 1366px;
    flex-wrap: wrap;
}

.dog-boarding-page .section-6 .text {
    width: 45%;
}

.dog-boarding-page .section-6 .image {
    position: relative;
    width: 40%;
}

.dog-boarding-page .section-6 .image .paw {
    position: absolute;
    right: 0;
    bottom: 200px;
    z-index: -1;
}

.dog-boarding-page .section-6 .accordion-wrap {
    margin-top: 100px;
}

/* Pack Play Day Care Page */

.pack-play-day-care-page .section-1 {
    padding: 160px 0;
    background-color: var(--orange);
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
}

.pack-play-day-care-page .section-1 .container {
    max-width: 1366px;
}

.pack-play-day-care-page .section-1 .image {
    width: 40%;
}

.pack-play-day-care-page .section-1 .image img {
    position: relative;
    width: 140%;
    max-width: unset;
    right: 40%;
    bottom: 0;
}

.pack-play-day-care-page .section-1 .text {
    width: 50%;
}

.pack-play-day-care-page .section-1 .text h3 {
    font-size: 45px;
    color: var(--white);
}

.pack-play-day-care-page .section-1 .text p {
    color: var(--white);
}

.pack-play-day-care-page .section-1 .text .button {
    margin-top: 50px;
}

.pack-play-day-care-page .section-2 {
    position: relative;
    padding: 120px 0;
}

.pack-play-day-care-page .section-2 .bone {
    position: absolute;
    top: 120px;
    right: 3.5%;
}

.pack-play-day-care-page .section-2 .container {
    max-width: 1366px;
}

.pack-play-day-care-page .section-2 .text {
    width: 35%;
}

.pack-play-day-care-page .section-2 .text h2 {
    color: var(--purple);
}

.pack-play-day-care-page .section-2 .text .button {
    margin-top: 40px;
}

.pack-play-day-care-page .section-2 .image {
    width: 50%;
}

.pack-play-day-care-page .section-2 .image img {
    border-radius: 20px;
    box-shadow: 20px 20px 0 var(--purple);
}

.pack-play-day-care-page .section-3 {
    position: relative;
    background: linear-gradient(to bottom, var(--lightgray), var(--white));
    padding: 130px 0;
}

.pack-play-day-care-page .section-3 .bone-1 {
    position: absolute;
    top: 10%;
    left: 3.5%;
}

.pack-play-day-care-page .section-3 .bone-2 {
    position: absolute;
    top: 35%;
    right: 3.5%;
}

.pack-play-day-care-page .section-3 .bone-3 {
    position: absolute;
    top: 65%;
    left: 3.5%;
}

.pack-play-day-care-page .section-3 .bone-4 {
    position: absolute;
    top: 90%;
    right: 3.5%;
}

.pack-play-day-care-page .section-3 .container {
    max-width: 1366px;
    flex-wrap: wrap;
    gap: 40px;
}

.pack-play-day-care-page .section-3 .heading {
    width: 100%;
}

.pack-play-day-care-page .section-3 .heading h2 {
    color: var(--purple);
    text-align: center;
    margin-bottom: 80px;
}

/* Plans */

.plans .container {
    gap: 40px;
}

.plans .plan {
    padding: 35px;
    border-radius: 20px;
    text-align: center;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

.plans .plan.bg-orange {
    background: var(--orange);
}

.plans .plan.bg-purple {
    background: var(--purple);
}

.plans .plan.bg-gray {
    background: var(--lightgray);
}

.plans .plan > h3 {
    text-align: center;
    color: var(--white);
    font-size: 45px;
}

.plans .plan > p {
    text-align: center;
    color: var(--white);
    font-size: 20px;
}

.plans .plan.bg-gray > h3 {
    color: var(--purple);
}

.plans .plan.bg-gray > p {
    color: var(--gray);
    max-width: 900px;
    margin: 20px auto;
}

.plans .plan.col-50 {
    width: calc((100% - 1 * 40px) / 2);
}

.plans .plan.col-100 {
    width: 100%;
}

.plans .plan .rates-wrapper {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    margin: 30px 0;
    text-align: left;
}

.plans .plan .rates-wrapper .rate {
    background: var(--white);
    padding: 20px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.plans .plan .rates-wrapper .rate h5 {
    color: var(--purple);
    margin-bottom: 0;
}

.plans .plan .rates-wrapper .rate.col-50 {
    width: calc((100% - 1 * 20px) / 2);;
}

.plans .plan .rates-wrapper .rate.col-100 {
    width: 100%;
}

.plans .plan .rates-wrapper .rate > p {
    padding: 15px 0;
    margin: 0 !important;
    border-bottom: 1px solid var(--lightgray);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.plans .plan .rates-wrapper .rate > p:last-of-type {
    border: 0;
    padding-bottom: 0;
}

.plans .plan .rates-wrapper .rate > p > span {
    font-family: 'Onest', sans-serif;
    font-size: 20px;
    width: 47%;
}

.plans .plan .rates-wrapper .rate > p > .price {
    font-family: "FinkRoman", serif;
    font-size: 35px;
}

.plans .plan .rates-wrapper .rate > p > .price > small {
    font-family: 'Onest', sans-serif;
    font-size: 20px;
}

.plans .plan .rates-wrapper .rate > p > span:last-of-type:not(:first-of-type) {
    text-align: right;
}

.plans .plan .button {
    display: inline-block;
    margin: 0 auto;
}

/* Spaw Style Bar Page */

.spaw-style-bar-page .section-1 {
    background: var(--lightgray);
    padding: 75px 0;
}

.spaw-style-bar-page .section-1 .container {
    gap: 40px;
}

.spaw-style-bar-page .section-1 .button {
    font-family: "FinkRoman", serif;
    font-size: 35px;
    font-weight: 700;
    padding: 20px 40px;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
}


.spaw-style-bar-page .section-2 {
    position: relative;
    padding: 50px 0;
}

.spaw-style-bar-page .section-2 .bone-1 {
    position: absolute;
    top: 30%;
}

.spaw-style-bar-page .section-2 .bone-2 {
    position: absolute;
    top: 75%;
}

.spaw-style-bar-page .section-2 .container {
    max-width: 1366px;
}

.spaw-style-bar-page .section-2 .top {
    border-bottom: 1px solid var(--lightgray);
    margin-bottom: 90px;
}

.spaw-style-bar-page .section-2 .top .text {
    width: 45%;
}

.spaw-style-bar-page .section-2 .top .image {
    width: 50%;
}

.spaw-style-bar-page .section-2 .top .image img {
    margin: 0 auto;
}

.spaw-style-bar-page .section-2 .mid {
    margin-bottom: 90px;
}

.spaw-style-bar-page .section-2 .mid .text {
    width: 45%;
}

.spaw-style-bar-page .section-2 .bot {
    margin-bottom: 50px;
}

.spaw-style-bar-page .section-2 .bark-at-us {
    text-align: center;
}

.spaw-style-bar-page .section-3 {
    position: relative;
    background-color: var(--purple);
    padding: 160px 0 110px 0;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
}

.spaw-style-bar-page .section-3 .bone-1 {
    position: absolute;
    top: 55%;
}

.spaw-style-bar-page .section-3 .container {
    max-width: 1366px;
}

.spaw-style-bar-page .section-3 .top {
    margin-bottom: 100px;
}

.spaw-style-bar-page .section-3 .top .image {
    position: relative;
    width: 45%;
}

.spaw-style-bar-page .section-3 .top .image .dog {
    position: relative;
    z-index: 10;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    box-shadow: -20px 20px 0 var(--orange);
}

.spaw-style-bar-page .section-3 .top .image .paw {
    position: absolute;
    top: -75px;
    right: -60px;
}

.spaw-style-bar-page .section-3 .top .text {
    width: 45%;
}

.spaw-style-bar-page .section-3 .top .text ul.paws {
    margin-top: 30px;
}

.spaw-style-bar-page .section-3 .full-bath-services-wrapper {
    gap: 20px;
}

.spaw-style-bar-page .section-3 .full-bath-services-wrapper .service {
    width: calc((100% - 3 * 20px) / 4);
    background-color: var(--white);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.spaw-style-bar-page .section-3 .full-bath-services-wrapper .service > img {
    width: 100%;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.spaw-style-bar-page .section-3 .full-bath-services-wrapper .service .text {
    padding: 30px;
}

.spaw-style-bar-page .section-3 .full-bath-services-wrapper .service .text p {
    margin: 0 0 20px;
}

.spaw-style-bar-page .section-3 .full-bath-services-wrapper .service .text p:last-of-type {
    margin: 0;
}

.spaw-style-bar-page .section-3 .full-bath-services-wrapper .service .text h4 small {
    display: block;
    font-size: 15px;
    font-family: 'Onest', sans-serif;
}

.spaw-style-bar-page .section-4 {
    position: relative;
    padding: 100px 0;
}

.spaw-style-bar-page .section-4 .container {
    max-width: 1366px;
}

.spaw-style-bar-page .section-4 .bone {
    position: absolute;
    top: 100px;
    left: 3.5%;
}

.spaw-style-bar-page .section-4 .reservations {
    margin-top: 50px;
}

/* Dog Parties Page */

.dog-parties-page .section-1 {
    padding: 100px 0;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    background-color: var(--orange);
}

.dog-parties-page .section-1 .container {
    max-width: 1366px;
}

.dog-parties-page .section-1 h2,
.dog-parties-page .section-1 p {
    color: var(--white);
    max-width: 960px;
    margin: 0 auto 30px;
    text-align: center;
}

.dog-parties-page .section-1 p {
    font-size: 20px;
}

.dog-parties-page .section-1 p strong {
    font-size: 25px;
}

.dog-parties-page .section-1 .buttons {
    flex-wrap: wrap;
    gap: 30px;
}

.dog-parties-page .section-1 .button {
    font-family: "FinkRoman", serif;
    font-size: 35px;
    font-weight: 700;
    padding: 20px 40px;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
}

.dog-parties-page .section-2 {
    position: relative;
    padding: 100px 0;
}

.dog-parties-page .section-2 .bone {
    position: absolute;
    top: 50%;
    right: 3.5%;
}

.dog-parties-page .section-2 .container {
    max-width: 1366px;
}

.dog-parties-page .section-2 .text {
    width: 45%;
}

.dog-parties-page .section-2 .text h3 {
    font-size: 45px;
}

.dog-parties-page .section-2 .image {
    position: relative;
    width: 50%;
}

.dog-parties-page .section-2 .image .paw {
    position: absolute;
    top: 90px;
    right: 65px;
    z-index: -1;
}

.dog-parties-page .section-3 {
    position: relative;
    background: var(--purple);
    padding: 100px 0;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
}

.dog-parties-page .section-3 .bone-1 {
    position: absolute;
    top: 200px;
    right: 3.5%;
}

.dog-parties-page .section-3 .bone-2 {
    position: absolute;
    bottom: 150px;
    left: 3.5%;
}

.dog-parties-page .section-3 .container {
    flex-wrap: wrap;
    max-width: 1366px;
}

.dog-parties-page .section-3 .top {
    width: 100%;
    text-align: center;
    margin-bottom: 40px;
    color: var(--white);
}

.dog-parties-page .section-3 .image {
    width: 50%;
}

.dog-parties-page .section-3 .image img {
    display: block;
    margin: 0 auto;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    box-shadow: -20px 20px 0 var(--orange);
}

.dog-parties-page .section-3 .text {
    width: 45%;
}

.dog-parties-page .section-3 .top h2,
.dog-parties-page .section-3 .top p {
    color: var(--white);
    max-width: 960px;
    margin: 0 auto 40px;
}

.dog-parties-page .section-3 .text p,
.dog-parties-page .section-3 .text ul {
    color: var(--white);
}

.dog-parties-page .section-3 .text ul {
    margin-top: 20px;
}

.dog-parties-page .section-4 {
    position: relative;
    padding: 100px 0;
}

.dog-parties-page .section-4 .bone-1 {
    position: absolute;
    top: 300px;
}

.dog-parties-page .section-4 .bone-2 {
    position: absolute;
    bottom: 30%;
}

.dog-parties-page .section-4 .container {
    max-width: 1366px;
}

.dog-parties-page .section-4 .top {
    text-align: center;
    margin-bottom: 40px;
}

.dog-parties-page .section-4 .top h2,
.dog-parties-page .section-4 .top p {
    max-width: 960px;
    margin: 0 auto 30px;
}

.dog-parties-page .section-4 .themes-wrapper {
    flex-wrap: wrap;
    gap: 30px;
}

.dog-parties-page .section-4 .themes-wrapper .theme {
    width: calc((100% - 2 * 30px) / 3);
    background-color: var(--lightgray);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.dog-parties-page .section-4 .themes-wrapper .theme img {
    display: block;
    width: 100%;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.dog-parties-page .section-4 .themes-wrapper .theme .text {
    padding: 30px;
}

.dog-parties-page .section-5 {
    position: relative;
    padding: 100px 80px;
    background-color: var(--orange);
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
}

.dog-parties-page .section-5 .bone {
    position: absolute;
    top: 50%;
    left: 3.5%;
}

.dog-parties-page .section-5 .container {
    max-width: 1366px;
    flex-wrap: wrap;
}

.dog-parties-page .section-5 .top {
    width: 100%;
    margin-bottom: 40px;
    text-align: center;
}

.dog-parties-page .section-5 .text {
    width: 45%;
    color: var(--white);
}

.dog-parties-page .section-5 .image {
    width: 40%;
}

.dog-parties-page .section-5 .image img {
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    box-shadow: 20px 20px 0 var(--purple);
    display: block;
    margin: 0 auto;
}

.dog-parties-page .section-6 {
    position: relative;
    padding: 100px 0;
}

.dog-parties-page .section-6 .bone {
    position: absolute;
    bottom: 25px;
    right: 3.5%;
}

/* Pet Taxi Services Page */

.pet-taxi-services-page .section-1 {
    position: relative;
    padding: 100px 0;
}

.pet-taxi-services-page .section-1 .bone-1 {
    position: absolute;
    top: 10%;
}

.pet-taxi-services-page .section-1 .bone-2 {
    position: absolute;
    top: 35%;
}

.pet-taxi-services-page .section-1 .bone-3 {
    position: absolute;
    top: 65%;
}

.pet-taxi-services-page .section-1 .bone-4 {
    position: absolute;
    top: 90%;
}

.pet-taxi-services-page .section-1 .container {
    flex-wrap: wrap;
    max-width: 1366px;
}

.pet-taxi-services-page .section-1 .heading {
    width: 100%;
    margin-bottom: 30px;
}

.pet-taxi-services-page .section-1 .heading .text {
    width: 60%;
    text-align: left;
}

.pet-taxi-services-page .section-1 .heading .image {
    width: 35%;
}

.pet-taxi-services-page .section-1 .heading .image img {
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    box-shadow: 20px 20px 0 var(--purple);
}

.pet-taxi-services-page .section-1 .heading h3,
.pet-taxi-services-page .section-1 .heading p {
    margin: 0 auto 30px;
}

.pet-taxi-services-page .section-1 .bottom-text {
    margin-top: 30px;
}

.pet-taxi-services-page .section-1 .bottom-text .image {
    width: 35%;
}

.pet-taxi-services-page .section-1 .bottom-text .image img {
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    box-shadow: 20px 20px 0 var(--orange);
}

.pet-taxi-services-page .section-1 .bottom-text .text {
    width: 60%;
}

.pet-taxi-services-page .section-1 .bottom-text .text > p {
    margin-bottom: 30px;
}

.pet-taxi-services-page .section-1 .text {
    width: 100%;
    text-align: center;
    padding: 40px 0;
}

.pet-taxi-services-page .section-1 .text p {
    font-size: 20px;
    max-width: 960px;
    margin: 0 auto;
}

.pet-taxi-services-page .section-1 .buttons {
    width: 100%;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}

.pet-taxi-services-page .section-1 .plan.bg-gray h4 {
    margin-bottom: 0;
}

/* Bark Retail Page */

.bark-retail-page .section-1 {
    position: relative;
    padding: 80px 0;
}

.bark-retail-page .section-1 .bone-1 {
    position: absolute;
    top: 80px;
    left: 3.5%;
}

.bark-retail-page .section-1 .bone-2 {
    position: absolute;
    top: 50%;
    right: 3.5%;
}

.bark-retail-page .section-1 .container {
    max-width: 960px;
    text-align: center;
}

.bark-retail-page .section-2 {
    padding: 30px;
}

.bark-retail-page .section-2 .container {
    max-width: 100%;
    gap: 30px;
}

.bark-retail-page .section-2 img {
    width: calc((100% - 2 * 30px) / 3);
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

.bark-retail-page .section-3 {
    padding: 20px 0 100px;
}

.bark-retail-page .section-3 .container {
    max-width: 960px;
    text-align: center;
}

.bark-retail-page .section-3 .button {
    margin-top: 30px;
}

/* App Page */

.app-page .section-1 {
    position: relative;
    padding: 80px 0;
    background: var(--lightgray);
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
}

.app-page .section-1 .bone-1 {
    position: absolute;
    top: 80px;
    left: 3.5%;
}

.app-page .section-1 .bone-2 {
    position: absolute;
    top: 60%;
    right: 3.5%;
}

.app-page .section-1 .container {
    max-width: 1366px;
}

.app-page .section-1 .text {
    width: 50%;
    padding-top: 50px;
}

.app-page .section-1 .text ul.paws {
    margin-top: 30px;
}

.app-page .section-1 .image {
    position: relative;
    width: 35%;
}

.app-page .section-1 .image img.app {
    display: block;
    margin-bottom: -300px
}

.app-page .section-1 .image img.qr {
    position: absolute;
    top: 55%;
    left: -100px;
}

.app-page .section-2 {
    padding: 80px 0 130px 0;
}

.app-page .section-2 .container {
    max-width: 1366px;
}

.app-page .section-2 .downloads {
    max-width: 50%;
    gap: 30px;
}

/* Cat Boarding Page */

.cat-boarding-page .section-1 {
    position: relative;
    padding: 80px 0;
    background-color: var(--lightgray);
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
}

.cat-boarding-page .section-1 .bone {
    position: absolute;
    top: 20%;
    left: 8.33%
}

.cat-boarding-page .section-1 .container {
    max-width: 1000px;
    text-align: center;
}

.cat-boarding-page .section-2 {
    position: relative;
    padding: 150px 0;
}

.cat-boarding-page .section-2 .bone {
    position: absolute;
    left: 3.5%;
    top: 100px;
}

.cat-boarding-page .section-2 .container {
    max-width: 1366px;
    flex-wrap: wrap;
}

.cat-boarding-page .section-2 .image {
    position: relative;
    width: 41%;
}

.cat-boarding-page .section-2 .image .cat-main {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    box-shadow: -20px 20px 0 var(--orange);
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

.cat-boarding-page .section-2 .image .cat-sub {
    position: absolute;
    right: -100px;
    bottom: -120px;
    z-index: 10;
}

.cat-boarding-page .section-2 .image .paw {
    position: absolute;
    top: 40%;
    right: -55px;
    z-index: 5;
}

.cat-boarding-page .section-2 .text {
    width: 45%;
}

.cat-boarding-page .section-3 {
    position: relative;
    background: var(--orange);
    padding: 160px 0 100px 0;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
} 

.cat-boarding-page .section-3 .bone {
    position: absolute;
    top: 50%;
}

.cat-boarding-page .section-3 .container {
    max-width: 1366px;
}

.cat-boarding-page .section-3 .plan .rate {
    text-align: center;
    justify-content: center;
}

.cat-boarding-page .section-3 .plan .rate p {
    flex-wrap: wrap;
}

.cat-boarding-page .section-3 .plan .rate p span {
    width: 100%;
    text-align: center !important;
}

.cat-boarding-page .section-3 .image {
    width: 45%;
}

.cat-boarding-page .section-3 .image img {
    width: 100%;
    box-shadow: -20px 20px 0 var(--purple);
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

.cat-boarding-page .section-4 {
    position: relative;
    padding: 100px 0;
}

.cat-boarding-page .section-4 .container {
    max-width: 1366px;
}

.cat-boarding-page .section-4 .bone-1 {
    position: absolute;
    top: 80px;
    left: 3.5%;
}

.cat-boarding-page .section-4 .bone-2 {
    position: absolute;
    top: 50%;
    right: 3.5%;
}

/* Dog Cams Page */
.dog-cams-page .banner-inner {
    background-image: url(../images/dog-cams/banner_doggie_cams.jpg);
}

.dog-cams-page .section-1 {
    padding: 80px 0;
    background-color: var(--lightgray);
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
}

.dog-cams-page .section-1 .container {
    max-width: 1366px;
}

.dog-cams-page .section-1 .text {
    text-align: center;
    width: 26%;
}

.dog-cams-page .section-1 .text > img {
    display: block;
    margin: 0 auto 30px;
}

.dog-cams-page .section-2 {
    padding: 80px 0;
}

.dog-cams-page .section-2 .container {
    max-width: 1366px;
}

.dog-cams-page .section-2 .heading {
    text-align: center;
    margin-bottom: 200px;
}

.dog-cams-page .section-2 .cams-wrapper {
    gap: 30px;
}

.dog-cams-page .section-2 .cams-wrapper .dog {
    width: calc((100% - 3 * 30px) / 4);
    border: 1px solid var(--lightgray);
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

.dog-cams-page .section-2 .cams-wrapper .dog .image {
    position: relative;
    background-image: url(../images/common/curve_bottom_white.png);
    background-color: var(--lightgray);
    background-size: 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
    min-height: 120px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.dog-cams-page .section-2 .cams-wrapper .dog .image img {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}

.dog-cams-page .section-2 .cams-wrapper .dog .text {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 30px;
    text-align: center;
}

.dog-cams-page .section-2 .cams-wrapper .dog .text h3 {
    color: var(--purple);
    margin-bottom: 0;
    font-size: 35px;
}

.dog-cams-page .section-2 .cams-wrapper .dog .text .button {
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
}

.dog-cams-page .section-2 .note {
    max-width: 960px;
    text-align: center;
    margin: 80px auto 0;
}

.dog-cams-page .section-2 .note h5 {
    border-bottom: 0;
    padding-bottom: 0;
}

/* Testimonials Page */

.testimonials-page .section-1 {
    position: relative;
    background: var(--lightgray);
    padding: 80px 0;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
}

.testimonials-page .section-1 .container {
    max-width: 960px;
    text-align: center;
}

.testimonials-page .section-2 {
    position: relative;
    padding: 90px 0;
}

.testimonials-page .section-2 .bone-1 {
    position: absolute;
    top: 90px;
    left: 8.5%;
}

.testimonials-page .section-2 .bone-2 {
    position: absolute;
    top: 20%;
    left: 3.5%;
}

.testimonials-page .section-2 .bone-3 {
    position: absolute;
    top: 40%;
    right: 3.5%;
}

.testimonials-page .section-2 .bone-4 {
    position: absolute;
    top: 60%;
    left: 3.5%
}

.testimonials-page .section-2 .bone-5 {
    position: absolute;
    top: 80%;
    right: 3.5%;
}

.testimonials-page .section-2 .bone-6 {
    position: absolute;
    bottom: 90px;
    left: 8.5%;
}

.testimonials-page .section-2 .container {
    max-width: 1366px;
}

.testimonials-page .section-2 h3 {
    text-align: center;
}

.testimonials-page .section-2 .testimonial {
    margin-bottom: 40px;
}

.testimonials-page .section-2 .testimonial .content {
    position: relative;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    background-color: var(--lightgray);
    padding: 50px;
    margin-bottom: 25px;
}

.testimonials-page .section-2 .testimonial .content p {
    font-size: 20px;
}

.testimonials-page .section-2 .testimonial .content::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 30px;
    height: 30px;
    background-color: var(--lightgray);
    clip-path: polygon(100% 0, 0 0, 0 100%);
}

.testimonials-page .section-2 .testimonial .author {
    gap: 20px;
}

.testimonials-page .section-2 .testimonial .author h5 {
    font-size: 25px;
    padding: 0;
    margin: 0;
    border-bottom: 0;
}

.testimonials-page .section-2 .buttons {
    padding: 50px 0;
    border-top: 1px solid var(--lightgray);
    text-align: center;
}

.testimonials-page .section-3 {
    position: relative;
    background-color: var(--purple);
    padding: 130px 0;
}

.testimonials-page .section-3 .container {
    flex-wrap: wrap;
    max-width: 1366px;
}

.testimonials-page .section-3 .top {
    width: 100%;
    padding-bottom: 90px;
    margin-bottom: 90px;
    border-bottom: 1px solid var(--white);
    text-align: center;
}

.testimonials-page .section-3 .top .socials-list {
    list-style: none;
    padding: 0;
    margin: 30px 0 0;
    gap: 20px;
}

.testimonials-page .section-3 .top .socials-list li a {
    font-size: 30px;
}

.testimonials-page .section-3 .image {
    position: relative;
    width: 40%;
}

.testimonials-page .section-3 .image img.dog {
    position: relative;
    z-index: 10;
    display: block;
    margin: 0 auto;
}

.testimonials-page .section-3 .image img.paw {
    position: absolute;
    top: -60px;
    right: 0;
}

.testimonials-page .section-3 .text {
    width: 50%;
}

.testimonials-page .section-3 .text p {
    font-size: 20px;
}

.testimonials-page .section-3 .text .manager {
    margin-bottom: 0;
}

.testimonials-page #awards .curve-top {
    display: none;
}

/* FAQ Page */

.faq-page .section-1 {
    position: relative;
    padding: 80px 0;
    background: var(--lightgray);
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
}

.faq-page .section-1 .bone {
    position: absolute;
    left: 8.3%;
    top: 35%;
}

.faq-page .section-1 .container {
    max-width: 960px;
    text-align: center;
}

.faq-page #faqs {
    position: relative;
    padding: 80px 0;
}

.faq-page #faqs .bone-1 {
    position: absolute;
    top: 10%;
    left: 3.5%;
}

.faq-page #faqs .bone-2 {
    position: absolute;
    top: 25%;
    right: 3.5%;
}

.faq-page #faqs .bone-3 {
    position: absolute;
    top: 50%;
    left: 3.5%;
}

.faq-page #faqs .bone-4 {
    position: absolute;
    top: 75%;
    right: 3.5%;
}

.faq-page #faqs .bone-5 {
    position: absolute;
    bottom: 10%;
    left: 3.5%;
}

.faq-page #faqs .container {
    max-width: 1366px;
}

.faq-page #faqs .accordion-wrap {
    flex-wrap: wrap;
}

.faq-page #faqs .accordion .toggle.active {
    background: var(--purple);
}

.faq-page #faqs .accordion .toggle.active h4 {
    color: var(--white);
}

/* Join Our Pack Page */

.join-our-pack-page .section-1 {
    background-color: var(--lightgray);
    padding: 80px 0;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
}

.join-our-pack-page .section-1 .container {
    max-width: 750px;
    text-align: center;
}

.join-our-pack-page .section-2 {
    position: relative;
    padding: 80px 0;
}

.join-our-pack-page .section-2 .bone-1 {
    position: absolute;
    top: 80px;
    left: 3.5%;
}

.join-our-pack-page .section-2 .bone-2 {
    position: absolute;
    bottom: 150px;
    right: 3.5%;
}

.join-our-pack-page .section-2 .container {
    max-width: 1366px;
    flex-wrap: wrap;
}

.join-our-pack-page .section-2 .heading {
    width: 100%;
    margin-bottom: 80px;
}

.join-our-pack-page .section-2 .heading .purple {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.join-our-pack-page .section-2 .image {
    position: relative;
    width: 45%;
}

.join-our-pack-page .section-2 .image img {
    position: relative;
    z-index: 1;
}

.join-our-pack-page .section-2 .image .paw {
    position: absolute;
    top: -60px;
    left: 0;
    z-index: 0;
}

.join-our-pack-page .section-2 .text {
    width: 50%;
}

.join-our-pack-page .section-3 {
    padding: 10px 0;
}

.join-our-pack-page .section-3 .container {
    max-width: 960px;
    text-align: center;
}

.join-our-pack-page .section-4 {
    position: relative;
    padding: 100px 0;
}

.join-our-pack-page .section-4 .bone-1 {
    position: absolute;
    top: 40%;
    left: 3.5%;
}

.join-our-pack-page .section-4 .bone-2 {
    position: absolute;
    bottom: 120px;
    right: 3.5%;
}

.join-our-pack-page .section-4 .container {
    max-width: 1366px;
    gap: 20px;
    flex-wrap: wrap;
}

.join-our-pack-page .section-4 .image-box {
    width: calc((100% - 3 * 20px) / 4);
    background-color: var(--lightgray);
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

.join-our-pack-page .section-4 .image-box > img {
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

.join-our-pack-page .section-4 .image-box .text {
    padding: 30px;
}

.join-our-pack-page .section-4 .image-box .text h3 {
    font-size: 35px;
}

.join-our-pack-page .section-5 {
    position: relative;
    background-color: var(--lightgray);
    padding: 100px 0;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
}

.join-our-pack-page .section-5 .container {
    max-width: 800px;
}

.join-our-pack-page .section-5 h3 {
    text-align: center;
    margin-bottom: 60px;
}

.join-our-pack-page .section-6 {
    padding: 80px 0;
}

.join-our-pack-page .section-6 .container {
    max-width: 800px;
    text-align: center;
}

/* Sniff Us Out / Contact Page */
.sniff-us-out-page .section-1 {
    position: relative;
    padding: 100px 0;
}

.sniff-us-out-page .section-1 .bone-1 {
    position: absolute;
    top: 80px;
    left: 3.5%;
}

.sniff-us-out-page .section-1 .bone-2 {
    position: absolute;
    bottom: 80px;
    right: 3.5%;
}

.sniff-us-out-page .section-1 .container {
    max-width: 1366px;
    flex-wrap: wrap;
    background-color: var(--orange);
    padding: 70px;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

.sniff-us-out-page .section-1 .info-wrap {
    width: 45%;
}

.sniff-us-out-page .section-1 .info-wrap .info {
    position: relative;
    padding-left: 80px;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
}

.sniff-us-out-page .section-1 .info-wrap .info .icon {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    background-color: var(--purple);
    color: var(--white);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.sniff-us-out-page .section-1 .info-wrap .info small {
    font-size: 15px;
    color: var(--white);
}

.sniff-us-out-page .section-1 .info-wrap .info p,
.sniff-us-out-page .section-1 .info-wrap .info p a {
    color: var(--white);
}

.sniff-us-out-page .section-1 .info-wrap .info .phone p.lg,
.sniff-us-out-page .section-1 .info-wrap .info .fax p.lg,
.sniff-us-out-page .section-1 .info-wrap .info .email p.lg,
.sniff-us-out-page .section-1 .info-wrap .info .weekdays p.lg,
.sniff-us-out-page .section-1 .info-wrap .info .saturday p.lg,
.sniff-us-out-page .section-1 .info-wrap .info .sunday p.lg {
    color: var(--white);
    font-size: 25px;
    font-weight: 700;
}

.sniff-us-out-page .section-1 .map {
    width: 50%;
}

.sniff-us-out-page .section-1 .map .map-info-wrapper {
    flex-wrap: wrap;
    margin-top: 30px;
}

.sniff-us-out-page .section-1 .map .info {
    position: relative;
    padding-left: 80px;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
    width: 50%;
}

.sniff-us-out-page .section-1 .map .info .icon {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    background-color: var(--purple);
    color: var(--white);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.sniff-us-out-page .section-1 .map .info small {
    display: block;
    font-size: 15px;
    color: var(--white);
    margin-bottom: 10px;
}

.sniff-us-out-page .section-1 .map .info p {
    color: var(--white);
    font-size: 25px;
}

.sniff-us-out-page .section-1 .map .socials {
    width: 40%;

}

.sniff-us-out-page .section-1 .map .socials small {
    display: block;
    color: var(--white);
    font-size: 15px;
    margin-bottom: 10px;
}

.sniff-us-out-page .section-1 .map .socials ul.socials-list {
    margin: 0;
    padding: 0;
    list-style: none;
    gap: 20px;
}

.sniff-us-out-page .section-1 .map .socials ul.socials-list li a {
    color: var(--white);
    font-size: 30px;
}

.sniff-us-out-page .section-2 {
    position: relative;
    padding: 80px 0;
}

.sniff-us-out-page .section-2 .bone {
    position: absolute;
    top: 25%;
    left: 3.5%;
}

.sniff-us-out-page .section-2 .container {
    flex-wrap: wrap;
    max-width: 1366px;
}

.sniff-us-out-page .section-2 .form-wrapper {
    width: 50%;
}

.sniff-us-out-page .section-2 .images {
    width: 45%;
    position: relative;
}

.sniff-us-out-page .section-2 .images > img {
    position: relative;
    margin: 0 auto;
    z-index: 1;
}

.sniff-us-out-page .section-2 .images .paw {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    z-index: 0;
}

/* Client Portal Page */
.client-portal-page .section-1 {
    padding: 80px 0;
    background: var(--lightgray);
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
}

.client-portal-page .section-1 .container {
    flex-wrap: wrap;
    gap: 40px;
    max-width: 1366px;
}

.client-portal-page .section-1 .new-clients,
.client-portal-page .section-1 .existing-clients {
    width: calc((100% - 1 * 40px) / 2);
    background-color: var(--white);
    padding: 40px;
    text-align: center;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
}

.client-portal-page .section-1 .new-clients h3,
.client-portal-page .section-1 .existing-clients h3 {
    margin: 0;
}

.client-portal-page .section-1 .new-clients .button-lg,
.client-portal-page .section-1 .existing-clients .button-lg {
    padding: 20px;
    max-width: 435px;
    width: 100%;
    margin: 30px auto;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
}

.client-portal-page .section-2 {
    padding: 80px 0;
}

.client-portal-page .section-2 .container {
    max-width: 1366px;
}

.client-portal-page .section-2 h3 {
    max-width: 730px;
    margin: 0 auto 30px;
    text-align: center;
}

/* Login Page */
.dog-cams-login .section-1 {
    background-color: var(--lightgray);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dog-cams-login .section-1 .container {
    text-align: center;
}

.dog-cams-login .section-1 .login-image {
    display: block;
    margin: 0 auto;
}

.dog-cams-login .section-1 p {
    margin: 30px 0;
}

.dog-cams-login .section-1 .ctc-form {
    max-width: 800px;
    margin: 0 auto;
}

/*########################################
## Footer
########################################*/
#footer {
    position: relative;
    background-color: var(--lightgray);
}

#footer .container {
    max-width: 1366px;
}

/* Footer > Contact Informations */
#footer .footer-contact {
    padding: 100px 0 50px 0;
}

#footer .footer-contact .dflex {
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 30px;
    column-gap: 2.25%;
}

#footer .footer-contact .info > div {
    margin-bottom: 30px;
}

#footer .footer-contact .info strong {
    display: block;
    color: var(--orange);
}

#footer .footer-contact .info a,
#footer .footer-contact .info p {
    display: block;
    color: var(--purple);
    margin: 10px 0;
    font-size: 25px;
    font-weight: 700;
}

#footer .footer-contact .socials .socials-list {
    list-style: none;
    margin: 10px 0;
    padding: 0;
    gap: 20px;
}

#footer .footer-contact .socials .socials-list li a {
    color: var(--purple);
    font-size: 25px;
}

/* Footer > Logos */
#footer .footer-logo .container {
    border-bottom: 2px solid var(--gray);
}

#footer .footer-logo a.logo {
    padding: 20px 0;
}

/* Footer > Copyright */
#footer .footer-bot {
    padding: 20px 0;
}

#footer .footer-bot p {
    margin: 0;
}

/*########################################
## Sidebar
########################################*/
aside {
    float: right;
    width: 280px;
    min-height: 444px;
    margin: 0;
    padding: 0;
    background: #C63;
}

/*########################################
## Inner Pages
########################################*/
.inner #content {
    padding: 30px 0 50px;
    min-height: 400px;
}

.inner #content h1 {
    text-align: center;
    margin-bottom: 30px;
}

/*########################################
## Accordion Inner Pages
########################################*/

.accordion-wrap {
    width: 100%;
    gap: 30px;
}

.accordion-wrap .accordion {
    position: relative;
    background-color: var(--lightgray);
    width: 100%;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.accordion-wrap.col-2 .accordion {
    width: calc((100% - 1 * 30px) / 2);
}

.accordion-wrap.col-3 .accordion {
    width: calc((100% - 2 * 30px) / 3);
}

.accordion-wrap.col-4 .accordion {
    width: calc((100% - 3 * 30px) / 4);
}

.accordion .toggle {
    position: relative;
    cursor: pointer;
    padding: 30px 60px 30px 30px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.accordion .toggle h4 {
    margin: 0;
    color: var(--purple);
}

.accordion .toggle img {
    position: absolute;
    right: 30px;
    top: 50%;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transform: translateY(-50%) rotate(180deg);
    -webkit-transform: translateY(-50%) rotate(180deg);
    -moz-transform: translateY(-50%) rotate(180deg);
    -ms-transform: translateY(-50%) rotate(180deg);
    -o-transform: translateY(-50%) rotate(180deg);
}

.accordion .toggle.active img {
    transform: translateY(-50%) rotate(0deg);
    -webkit-transform: translateY(-50%) rotate(0deg);
    -moz-transform: translateY(-50%) rotate(0deg);
    -ms-transform: translateY(-50%) rotate(0deg);
    -o-transform: translateY(-50%) rotate(0deg);
}

.accordion .content {
    position: relative;
    display: none;
    padding: 30px;
}

.accordion .content::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    width: calc(100% - 60px);
    height: 2px;
    margin: 0;
    background-color: var(--white);
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}

.accordion .content ul li {
    font-size: 18px;
    margin-bottom: 15px;
}

.accordion .content ul li ul li {
    margin-bottom: 0;
}

/*########################################
## Contact Forms
########################################*/
.contact-page #content .ctc-form {}

/*########################################
## Gallery Page
########################################*/

.gallery-page .section-1 {
    padding: 80px 0;
}

.gallery-page .section-1 .container {
    max-width: 1366px;
}

.gallery-page .gallery-container {
    gap: 30px;
    flex-wrap: wrap;
}

.gallery-page .gallery-container .gallery-wrapper {
    width: calc((100% - 2 * 30px) / 3);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    background: var(--lightgray);
}

.gallery-page .gallery-container .gallery-wrapper a.thumbnail {
    display: block;
    width: 100%;
}

.gallery-page .gallery-container .gallery-wrapper img {
    width: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.gallery-page .gallery-container .gallery-wrapper .title {
    padding: 20px;
}

.gallery-page .gallery-container .gallery-wrapper .title h4 {
    margin: 0;
}

.gallery-page .gallery-container .gallery-wrapper .title p {
    margin-top: 20px;
}

.gallery-page .gallery-container .gallery-wrapper .title .button {
    margin-top: 20px;
}

.gallery {
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.gallery li {
    width: 19.3%;
    padding: 3px;
    box-sizing: border-box;
    border: 1px solid #AAA;
    margin: 3px;
    border-radius: 3px;
    transition: all .3s linear;
}

.gallery li a {
    overflow: hidden;
    display: block;
}

.gallery li img {
    transition: all .3s linear;
    display: block;
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.gallery li:hover {
    background: #FF9124;
}

.gallery li:hover img {
    transform: scale(1.1);
}

.pswp__img {
    max-height: 100vh !important;
    object-position: center;
    object-fit: contain;
}

.gallery-page .section-2 {
    position: relative;
    background: var(--purple);
    padding: 10px 0;
}

.gallery-page .section-2 .bone {
    position: absolute;
    right: 3.5%;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

.gallery-page .section-2 .container {
    max-width: 1366px;
    flex-wrap: wrap;
}

.gallery-page .section-2 .image {
    position: relative;
    width: 31%;
    z-index: 10;
}

.gallery-page .section-2 .image .dog {
    position: relative;
    z-index: 2;
}

.gallery-page .section-2 .image .paw {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    z-index: 1;
}

.gallery-page .section-2 .text {
    width: 50%;
}

/*########################################
## Thank You Page
########################################*/
.thank-you-page #content {
    text-align: center;
}

.thank-you-page .inThankLogo {
    margin-bottom: 40px;
}