@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;1,400;1,700&family=Oswald:wght@700&display=swap');





        h1 {

            font-family: 'Oswald', sans-serif;

            color: #000;

            line-height: 1;

            text-transform: uppercase;

        }



        h2 {

            font-family: 'Oswald', sans-serif;

            text-transform: uppercase;

        }



        h3 {

            font-family: 'Oswald', sans-serif;

        }



        h4 {

            font-family: 'Oswald', sans-serif;

        }



        h4 a {

            color: #fff;

            text-decoration: none;

        }



        h4 a:hover {

            color: #ccc;

        }



        .ticklist-text {

            text-transform: uppercase;

        }



        p {

            font-family: 'Lato', sans-serif;

        }



        .tender-tails-text {

            background: linear-gradient(90deg, rgba(88, 43, 126, 1) 0%, rgba(30, 198, 218, 1) 100%);

            background-clip: text;

            -webkit-background-clip: text;

            -webkit-text-fill-color: transparent;

        }



        .logo {

            max-width: 150px;

            max-height: 100%;

            height: auto;

        }



        .fa-phone,

        .fa-facebook-messenger,

        .fa-facebook {

            font-size: 25px;

        }



        .fa-whatsapp {

            font-size: 30px;

        }



        .text-tails-teal {

            color: #3f6ea6;

        }



        .text-tails-purple {

            color: #582b7e;

        }



        .logo-background {

            border-top: #fff 2px solid;

        }



        .nav-container {

            position: fixed;

            background-color: #fff;

            z-index: 999999;

            top: 0;

        }



        .hannah-pp {

            margin-top: -50px;

        }



        .container-fluid {

            scroll-margin-top: 4rem;

        }



        .hero {

            display: block;

            width: 100%;

            min-height: 900px;

            background-image:

                url(images/header-img1.webp);

            background-repeat: no-repeat;

            background-position: bottom left;

            -webkit-background-size: cover;

            -moz-background-size: cover;

            -o-background-size: cover;

            background-size: cover;

            margin-top: 50px;

        }



        .contact-us-container {

            background: rgb(88, 43, 126);

            background: url(images/paws.webp), linear-gradient(90deg, rgba(88, 43, 126, 1) 0%, rgba(30, 198, 218, 1) 100%);

            background-attachment: fixed;

        }



        * {

            box-sizing: border-box;

        }





        nav {

            width: 100%;

        }



        nav ul {

            display: flex;

            justify-content: space-between;

            /* max-width: 200px; */

            /* margin: unset; */

            list-style: none;

            align-self: end;

            margin-bottom: 0px !important;

        }



        .nav-link {

            display: block;

            position: relative;

            color: #000;

            padding: 30px;

            text-decoration: none;

            text-transform: uppercase;

            font-size: 20px;

            font-family: 'Lato', sans-serif;

            font-weight: 600;

        }



        .nav-link,

        .nav-link:after {

            transition: all 0.5s;

        }



        .nav-link:hover {

            color: #1ec6da;

        }



        .nav-link:after {

            content: " ";

            width: 0%;

            position: absolute;

            margin: auto;

            top: 0;

            left: 0;

            right: 0;

            background: #1ec6da;

            height: 2px;

        }



        .nav-link:hover:after {

            width: 100%;

        }



        .card-body {

            background-color: #fff;

            color: #000;

            border: none;

        }



        .card {

            border-radius: 0;

            border: 0;

        }



        .card-title {

            font-family: 'Oswald', sans-serif;

        }



        .popup-button {

            display: inline-block;

            text-align: center;

            text-decoration: none;

            font-family: 'Oswald', sans-serif;

            font-weight: 800;

            font-size: 1em;

            text-transform: uppercase;

            color: #fff;

            border-radius: 6px;

            margin: 10px;

            padding: 1em 3em;

            background-size: 200% auto;

            color: white;

            box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);

            background-image: linear-gradient(45deg, rgba(88, 43, 126, 1) 0%, rgba(30, 198, 218, 1) 100%);

            transition: 0.5s;

            max-width: 300px;

        }



        .popup-button:hover {

            background-position: right center;

            color: #fff;

        }



        .parallax-title-1 {

            background-image: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), url(images/chille.webp);

            background-size: cover;

            background-repeat: no-repeat;

            background-attachment: fixed;

            background-position: center center;

            min-height: 250px;

            display: flex;

            flex-direction: column;

            justify-content: center;

            width: 100%;

        }



        .parallax-title-2 {

            background-image: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), url(images/woogis.webp);

            background-size: cover;

            background-repeat: no-repeat;

            background-attachment: fixed;

            background-position: center center;

            min-height: 250px;

            display: flex;

            flex-direction: column;

            justify-content: center;

            width: 100%;

        }



        .parallax-title-3 {

            background-image: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), url(images/hamster.webp);

            background-size: cover;

            background-repeat: no-repeat;

            background-attachment: fixed;

            background-position: center center;

            min-height: 250px;

            display: flex;

            flex-direction: column;

            justify-content: center;

            width: 100%;

        }



        .parallax-title-4 {

            background-image: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), url(images/turle.webp);

            background-size: cover;

            background-repeat: no-repeat;

            background-attachment: fixed;

            background-position: center center;

            min-height: 250px;

            display: flex;

            flex-direction: column;

            justify-content: center;

            width: 100%;

        }



        .tick-image {

            width: auto;

            height: 100%;

            max-height: 50px;

            vertical-align: middle;

        }



        .contact-info {

            display: flex;

            flex-direction: column;

            text-align: center;

            align-items: center;

        }



        /* FANCY CARDS */



        .magic-card-title p {

            text-transform: uppercase;

            font-family: 'Oswald', sans-serif;

            color: #fff;

        }



        .wrapper-magic-cards {

            width: 100%;

            margin: 0 auto;

            max-width: 80rem;

        }



        .cols-magic-cards {

            display: -webkit-box;

            display: -ms-flexbox;

            display: flex;

            -ms-flex-wrap: wrap;

            flex-wrap: wrap;

            -webkit-box-pack: center;

            -ms-flex-pack: center;

            justify-content: center;

        }



        .col-magic-cards {

            width: calc(25% - 2rem);

            margin: 1rem;

            cursor: pointer;

        }



        .container-magic-cards {

            -webkit-transform-style: preserve-3d;

            transform-style: preserve-3d;

            -webkit-perspective: 1000px;

            perspective: 1000px;

        }



        .front-magic-cards,

        .back-magic-cards {

            background-size: cover;

            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25);

            border-radius: 10px;

            background-position: center;

            -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);

            transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);

            -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);

            transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);

            transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);

            -webkit-backface-visibility: hidden;

            backface-visibility: hidden;

            text-align: center;

            min-height: 400px;

            height: auto;

            border-radius: 10px;

            color: #fff;

            font-size: 1.5rem;

        }



        .back-magic-cards {

            background: rgb(88, 43, 126);

            background: linear-gradient(45deg, rgba(88, 43, 126, 1) 0%, rgba(30, 198, 218, 1) 100%);

        }



        .front-magic-cards:after {

            position: absolute;

            top: 0;

            left: 0;

            z-index: 1;

            width: 100%;

            height: 100%;

            content: '';

            display: block;

            opacity: .2;

            background: rgb(88, 43, 126);

            background: linear-gradient(45deg, rgba(88, 43, 126, 1) 0%, rgba(30, 198, 218, 1) 100%);

            -webkit-backface-visibility: hidden;

            backface-visibility: hidden;

            border-radius: 10px;

        }



        .container-magic-cards:hover .front-magic-cards,

        .container-magic-cards:hover .back-magic-cards {

            -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);

            transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);

            -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);

            transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);

            transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);

        }



        .back-magic-cards {

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

        }



        .inner-magic-cards {

            -webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);

            transform: translateY(-50%) translateZ(60px) scale(0.94);

            top: 50%;

            position: absolute;

            left: 0;

            width: 100%;

            padding: 1rem;

            -webkit-box-sizing: border-box;

            box-sizing: border-box;

            outline: 1px solid transparent;

            -webkit-perspective: inherit;

            perspective: inherit;

            z-index: 2;

        }



        .container-magic-cards .back-magic-cards {

            -webkit-transform: rotateY(180deg);

            transform: rotateY(180deg);

            -webkit-transform-style: preserve-3d;

            transform-style: preserve-3d;

        }



        .container-magic-cards .front-magic-cards {

            -webkit-transform: rotateY(0deg);

            transform: rotateY(0deg);

            -webkit-transform-style: preserve-3d;

            transform-style: preserve-3d;

        }



        .container-magic-cards:hover .back-magic-cards {

            -webkit-transform: rotateY(0deg);

            transform: rotateY(0deg);

            -webkit-transform-style: preserve-3d;

            transform-style: preserve-3d;

        }



        .container-magic-cards:hover .front-magic-cards {

            -webkit-transform: rotateY(-180deg);

            transform: rotateY(-180deg);

            -webkit-transform-style: preserve-3d;

            transform-style: preserve-3d;

        }



        .front-magic-cards .inner p {

            font-size: 2rem;

            margin-bottom: 2rem;

            position: relative;

        }



        .front-magic-cards .inner p:after {

            content: '';

            width: 4rem;

            height: 2px;

            position: absolute;

            background: #C6D4DF;

            display: block;

            left: 0;

            right: 0;

            margin: 0 auto;

            bottom: -.75rem;

        }



        .front-magic-cards .inner span {

            color: rgba(255, 255, 255, 0.7);

            font-weight: 300;

        }



        @media screen and (max-width: 1200px) {

            .col-magic-cards {

                width: calc(50% - 2rem);

            }

        }



        @media screen and (max-width: 768px) {

            .col-magic-cards {

                width: calc(50% - 2rem);

            }

        }



        @media screen and (max-width: 576px) {

            .col-magic-cards {

                width: 100%;

                margin: 0 0 2rem 0;

            }

        }



        /* Testimonials */

        body,

        html {

            height: 100%;

            width: 100%;

            margin: 0;

        }



        .gtco-testimonials {

            position: relative;

        }



        @media (max-width: 767px) {

            .gtco-testimonials {

                margin-top: 20px;

            }

        }



        .gtco-testimonials .owl-stage-outer {

            padding: 30px 0;

        }



        .gtco-testimonials .owl-nav {

            display: none;

        }



        .gtco-testimonials .owl-dots {

            text-align: center;

        }



        .gtco-testimonials .owl-dots span {

            position: relative;

            height: 10px;

            width: 10px;

            border-radius: 50%;

            display: block;

            background: #fff;

            border: 2px solid #582b7e;

            margin: 0 5px;

        }



        .gtco-testimonials .owl-dots .active {

            box-shadow: none;

        }



        .gtco-testimonials .owl-dots .active span {

            background: #582b7e;

            box-shadow: none;

            height: 12px;

            width: 12px;

            margin-bottom: -1px;

        }



        .gtco-testimonials .card {

            background: #fff;

            box-shadow: 0 8px 30px -7px #c9dff0;

            margin: 0 20px;

            padding: 0 10px;

            border-radius: 20px;

            border: 0;

        }



        .gtco-testimonials .card .card-img-top {

            max-width: 100px;

            border-radius: 50%;

            margin: 15px auto 0;

            filter: drop-shadow(0px 0px 13px rgba(0, 0, 0, 0.30));

            width: 100px;

            height: 100px;

        }



        .gtco-testimonials .card h5 {

            color: #000;

            font-size: 21px;

            line-height: 1.3;

        }



        .gtco-testimonials .card h5 span {

            font-size: 18px;

            color: #666666;

        }



        .gtco-testimonials .card p {

            font-size: 18px;

            color: #000;

            padding-bottom: 15px;

        }



        .gtco-testimonials .active {

            opacity: 0.5;

            transition: all 0.3s;

        }



        .gtco-testimonials .center {

            opacity: 1;

        }



        .gtco-testimonials .center h5 {

            font-size: 24px;

        }



        .gtco-testimonials .center h5 span {

            font-size: 20px;

        }



        .gtco-testimonials .center .card-img-top {

            max-width: 100%;

            height: 120px;

            width: 120px;

        }



        .owl-carousel .owl-nav button.owl-next,

        .owl-carousel .owl-nav button.owl-prev,

        .owl-carousel button.owl-dot {

            outline: 0;

        }



        /* Burger Menu */



        header {

            height: 70px;

            background: #fff;

            position: relative;

            z-index: 2;

            overflow: hidden;

            transition: all 300ms ease-in-out;

            box-shadow: 0px 1px 11px rgba(0, 0, 0, 0.5);

        }



        header.willGrow {

            color: #582b7e;

            height: 100vh;

        }



        header .title {

            float: left;

            margin-left: 15px;

            margin-top: 28px;

            line-height: 0.6;

            font-weight: bold;

            font-size: 1.5em;

        }



        header .burger-menu-container {

            float: right;

            margin-right: 65px;

            margin-top: 65px;

            cursor: pointer;

        }



        header .burger-menu-container .burger-menu {

            width: 50px;

            height: 5px;

            background-color: black;

            margin-bottom: 5px;

            transition: all 300ms ease-in-out;

        }



        header .burger-menu-container .burger-menu.willChangeColor {

            background-color: #582b7e;

        }



        header .header-menu-content {

            font-size: 30px;

            font-weight: 800;

            color: #555;

            position: absolute;

            top: 110px;

            left: 50%;

            transform: translate(-50%, 0);

        }



        header .header-menu-content ul {

            list-style: none;

        }



        header .header-menu-content ul li {

            padding: 10px;

        }



        header .header-menu-content ul a {

            text-decoration: none;

            color: #000;

        }



        header .header-menu-content ul a:hover {

            color: #582b7e;

        }



        .about-me {

            border: solid 1px #582b7e;

            border-radius: 5px;

        }



        .about-me-list {

            list-style-type: none;

            padding-left: 0px !important;

        }



        .about-me-list li {

            position: relative;

            margin-bottom: .5em;

            padding-left: 2em;

            font-family: 'Lato', sans-serif;

        }



        .about-me-list ::before {

            content: '';

            position: absolute;

            width: 2em;

            height: 100%;

            top: 6px;

            left: 0;

            background-image: url(images/paw-bullet.webp);

            background-size: 1em 1em;

            background-repeat: no-repeat;

            background-position: top;

        }



        /* Accordion */



        ul.accordion-list {

            position: relative;

            display: block;

            width: 100%;

            height: auto;

            padding: 20px 0px 20px 0px;

            margin: 0;

            list-style: none;

        }



        ul.accordion-list li {

            position: relative;

            display: block;

            width: 100%;

            height: auto;

            background-color: #FFF;

            padding: 20px;

            margin: 0 auto 15px auto;

            border-radius: 5px;

            cursor: pointer;

            border-image: linear-gradient(45deg, #582b7e, #1ec6da) 2;

            border-width: 2px;

            border-style: solid;

        }



        ul.accordion-list li.active h3:after {

            transform: rotate(45deg);

        }



        ul.accordion-list li h3 {

            position: relative;

            display: block;

            width: 100%;

            height: auto;

            padding: 0 0 0 0;

            margin: 0;

            letter-spacing: 0.01em;

            cursor: pointer;

        }



        ul.accordion-list li h3:after {

            content: "";

            font-family: "material-design-iconic-font";

            position: absolute;

            right: 0;

            top: 0;

            color: #582b7e;

            transition: all 0.3s ease-in-out;

            font-size: 30px;

        }



        ul.accordion-list li div.answer {

            position: relative;

            display: block;

            width: 100%;

            height: auto;

            margin: 0;

            padding: 0;

            cursor: pointer;

        }



        ul.accordion-list li div.answer p {

            position: relative;

            display: block;

            padding: 10px 0 0 0;

            cursor: pointer;

            margin: 0 0 15px 0;

        }



        .font-xxl {

            font-size: 5.0rem !important;

        }



        .font-xl {

            font-size: 3.2rem !important;

        }



        .font-lg {

            font-size: 2.5rem !important;

        }



        .font-md {

            font-size: 2.1rem !important;

        }



        .font-sm {

            font-size: 1.6rem !important;

        }



        .font-sms {

            font-size: 1.4rem !important;

        }



        .font-xsl {

            font-size: 1.2rem !important;

        }



        .font-xs {

            font-size: 1rem !important;

        }





        @media screen and (max-width: 1400px) {

            .parallax-title-2 {

                background-position: 70%;

            }



            .parallax-title-1 {

                background-position: 70%;

            }



            .parallax-title-4 {

                background-position: 36%;

            }



            .nav-link {

                padding: 18px;

                font-size: 16px;

            }

        }



        @media screen and (max-width: 992px) {

            .hero {

                background-position: 20%;

            }



            .font-xxl {

                font-size: 4rem !important;

            }



            header .burger-menu-container {

                margin-right: 25px;

                margin-top: 25px;

            }

        }



        @media screen and (max-width: 768px) {

            header .burger-menu-container {

                float: right;

                margin-right: 15px;

                margin-top: 22px;

                cursor: pointer;

            }



            .hannah-pp {

                max-width: 300px;

                margin-top: 0px;

            }



            .font-xxl {

                font-size: 3.8rem !important

            }

        }



        @media screen and (max-width: 576px) {

            .font-xxl {

                font-size: 2.5rem !important;

            }



            .font-xl {

                font-size: 2.4rem !important;

            }



            .font-lg {

                font-size: 1.9rem !important;

            }



            .font-md {

                font-size: 1.9rem !important;

            }



            .font-sm {

                font-size: 1.5rem !important;

            }



            .font-sms {

                font-size: 1.3rem !important;

            }



            .font-xsl {

                font-size: 1.1rem !important;

            }



            .font-xs {

                font-size: 1rem !important;

            }



            .tick-image {

                max-height: 30px;

            }







            .hero {

                min-height: 450px;

                background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.4) 100%), url(images/header-img1.webp);

                background-position: 13%;

            }



            .logo {

                max-width: 120px;

            }



            .hannah-pp {

                max-width: 200px;

                margin-top: 0px;

            }



            header .burger-menu-container {

                float: right;

                margin-right: 15px;

                margin-top: 22px;

                cursor: pointer;

            }



            .popup-button {

                padding: 0.6em 1.5em;

            }



            .parallax-title-2 {

                background-position: 70%;

            }



            .parallax-title-1 {

                background-position: 70%;

            }

        }



        @media screen and (max-width: 380px) {

            .font-lg {

                font-size: 1.6rem !important;

            }

        }



        @supports (-webkit-touch-callout: none) {



            .parallax-title-1,

            .parallax-title-2,

            .parallax-title-3,

            .parallax-title-4,

            .contact-us-container {

                background-attachment: scroll;

            }



            .parallax-title-2 {

                background-position: 100% 22%;

            }

        }