@font-face {
font-display: swap;
font-family: 'Domine';
font-style: normal;
font-weight: 400;
src: url('Fonts/domine-v23-latin-regular.woff2') format('woff2'); 
}

@font-face {
font-display: swap; 
font-family: 'Poetsen One';
font-style: normal;
font-weight: 400;
src: url('Fonts/poetsen-one-v3-latin-regular.woff2') format('woff2');
}

@font-face {
font-display: swap;
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
src: url('Fonts/poppins-v23-latin-regular.woff2') format('woff2');
}

html {
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
}

.mobile-bg {
    background: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url(../Images/Randoms/Gira.webp);
    background-position-x: 80%;
    background-position-y: 30%;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(var(--vh, 1vh) * 100);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    z-index: -1;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}


.page-wrapper {
    padding-top: 11vw;
    isolation: isolate;
    position:relative;
    overflow-x:hidden;
    min-height: 100vh;
    display:flex;
    flex-direction: column;
}

.background-container {
    position: relative;
    text-align:center;
    color:white;
    width:100vw;
    height:100%;
    display:flex;
    flex-direction: row;
    justify-content:space-between;
    margin-top: 2vw;
    padding-left:1vw;
    padding-right:1vw;

}

.background-image-container {
    display:flex;
}

.background-image-rocky,
.background-image-kentauras {
    align-self: center;
    border-radius:10px;
    display:block;
}

.background-image-rocky {
    border-radius:1vw;
    width:29vw;
    /* max-height:455px;
    max-width:360px; */
    height:auto;
    border-style:solid;
    border-color:black;
    border-width:0.2vw;
    flex:1;
}

.background-image-kentauras {
    border-radius:1vw;
    width:29vw;
    /* max-height:455px;
    max-width:357px; */
    height:auto;
    border-style:solid;
    border-color:black;
    border-width:0.2vw;
    object-fit: cover;
    flex:1;
}

.center {
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-self:center;
    width:auto;
    flex-shrink: 0;
    margin:0 2vw 0 2vw;
    height:min-content;
    flex:1;
}

.welcome, 
.hiams-hounds {
    display:block;
    font-family:Arial, Helvetica, sans-serif;
    margin:0;
    padding:0;
    text-shadow:0.2vw 0.5vw 0.6vw black;
    font-style: oblique;
    -webkit-text-stroke-width: 0.7px;
    -webkit-text-stroke-color: black;
}

.welcome {
    margin-bottom:2.5%;
    font-size:clamp(20px, 4vw, 90px);
}

.hiams-hounds {
    font-size:clamp(25px,5vw, 100px);
    
}

.paragraph-main-container {
    width:90%;
    display:block;
    position:absolute;
    align-self:center;
    left:5%;
    border-radius:0.5vw;
}

.info-container {
    display:flex;
    flex-direction:column;
    margin-top:15%;
}

.paragraph-container {
    display:flex;
    flex-direction: column;
}

.paragraph-text {
    font-size: clamp(16px, 1.75vw, 45px);
    font-family: "Domine";
    line-height: 2.5vw;
    display:block;
    padding:0;
    margin:0;
    text-align:center;
    align-self: center;
    color:white;
    font-weight: 400;
    max-width:95%;
}

.paragraph1-title {
    display:inline-block;
    margin:3% 0 1% 0;
    font-size:clamp(20px, 2.5vw, 60px);
    color:white;
    font-family:Arial, Helvetica, sans-serif;
}

.paragraph1 {
    display:flex;
    flex-direction:column-reverse;
    align-items: center;
    margin-bottom:0;
    border-style:solid;
    border-right: none;
    border-left:none;
    border-color:black;
    border-width:0.2vw;
    background-color:rgba(66, 107, 202, 0.7);
    width:102vw;
    align-self:center;
}

.paragraph2 {
    display:flex;
    flex-direction:row;
    margin-top:12%;
    margin-bottom:12%;
    margin-left:12vw;
    vertical-align: middle;
    border-style:solid;
    border-color:black;
    border-width:0.2vw;
    border-radius: 1vw;
    background-color:rgba(66, 107, 202, 0.7);
    width:90vw;
    padding-right:2vw;
}

.paragraph3 {
    display:flex;
    flex-direction:row;
    column-gap: 1vw;
    margin-bottom:0;
    border-style:solid;
    border-color:black;
    border-width:0.2vw;
    background-color:rgba(66, 107, 202, 0.7);
    width:90vw;
    flex:2;
    border-radius:1vw;
    padding-left:2vw;
}

.paragraph-image-puppies {
    display: flex;
    justify-content: center;
    margin-top:1%;
    padding:1.5%;
    background-color:white;
    height:35vw;
}

.paragraph-text1 {
    font-size: clamp(16px, 1.75vw, 45px);
    font-family: "Domine", Arial, Helvetica, sans-serif;
    line-height: 2.5vw;
    display:block;
    padding:0;
    margin:2% 0 2% 0;
    text-align:center;
    align-self: center;
    color:white;
    font-weight: 400;
    max-width:95%;
}

.paragraph-image-lickypoo {
    align-items: center;
    display: flex;
    max-width:100%;
    padding:1.5%;
    background-color:white; 
    margin: 2% 0 2% 2%;
    flex:1;
}

.paragraph-image-iko {
    align-items: center;
    display: flex;
    max-width:100%;
    padding:1.5%;
    background-color:white;
    margin: 2% 2% 2% 0;
    flex:1;
}

.image-homepage-shepherdPuppies {
    display:flex;
    max-width:auto;
    max-height:100%;
    box-shadow:0vw 0vw 1vw 0.6vw rgba(0,0,0,0.5);
}

.image-homepage-lickypoo {
    max-width:100%;
    height:auto;
    box-shadow:0vw 0vw 1vw 0.6vw rgba(0,0,0,0.5);
}

.image-homepage-iko {
    max-width:100%;
    height:auto;
    box-shadow:0vw 0vw 1vw 0.6vw rgba(0,0,0,0.5);
}

.paragraph-info {
    display:flex;
    flex-direction: column;
    text-align:center;
    margin-left: 0.8vw;
    text-indent: 1vw;
    flex:2;
    justify-content: center;
}

.paragraph-info-reverse {
    display:flex;
    flex-direction: column;
    text-align:center;
    margin-left: 0.8vw;
    text-indent: 1vw;
    flex:2;
    justify-content: center;
}

/* reviews */

.review-box {
    display:flex;
    flex-direction: column;
    position:relative;
    align-items: center;
    height:40vw;
    margin-top:10vw;
    margin-bottom:4vw;
    justify-content: center;
}

.review-container {
    max-width:60%;
    max-height:max-content;
    position:relative;
    margin-top:7vw;
    display:flex;
    flex-direction: column;
    font-family:Lucida Sans;
}

.number-text {
    display:flex;
    flex-direction: row;
}

.reviewNumber {
    font-size:clamp(13px, 2vw, 20px);
    display:inline-block;
    font-family:Impact;
    padding-left:1%;
    padding-top:1%;
}

.text {
    color: black;
    font-size:clamp(25px, 2.5vw, 60px);
    padding: 8px 12px;
    position:static;
    display:inline-block;
    text-align: center;
    line-height: clamp(23px, 3.5vw, 40px);
    flex:1;
    align-self:center;
    margin-right:24px;
    margin-bottom:10px;
}

.review-source {
    font-size:clamp(15px, 2vw, 25px);
}

.myReview {
    top:-6vw;
    display:none;
    max-height: auto;
    position: relative;
    width:100%;
    border:solid;
    border-width:1.1vw;
    border-radius: 10px;
    border-color:rgb(118, 164, 239);
    background-color:rgba(235, 235, 235, 0.8);
    
}

.review-paragraph {
    font-size:clamp(20px, 1.75vw, 45px);
    text-align: center;
    display:inline-block;
    align-self:center;
    margin:0;
    font-family: 'Poetsen One', impact;
    -webkit-text-stroke-color: white;
    padding:0 1%;
}

.review-5 {
    font-size:clamp(24px, 3vw, 60px);
}

.stars-container {
    display:flex;
    flex-direction: column;
    align-items: center;
}

.rating-star {
    max-width:30%;
    height:auto;
    display:block;
    position:relative;
    margin-top:5%;
    margin-bottom:5%;
}

.previousReview,
.nextReview {
    cursor:pointer;
    position:absolute;
    display:inline-block;
    width:auto;
    padding:1% 1%;
    color:rgba(16, 54, 143, 0.8);
    font-weight:bold;
    font-size:clamp(50px,7vw, 200px);
    transition: 0.6s ease;
    user-select: none;
    align-self:center;
    border:none;
    background-color:transparent;
}

.previousReview {
    left:0;
}

.nextReview {
    right:1vw;
}

.previousReview:hover,
.nextReview:hover {
    background-color:rgb(43, 85, 183);
    color:white;
}

.slide {
    animation-name: slide;
    animation-duration: 1.5s;
}

@keyframes slide {
    from {opacity: .4}
    to {opacity: 1}
}


/* mobile device */

@media only screen and (min-width:300px) and (max-width:1100px) {
    body {
        padding-top:28vw;
        background: none;
    }
    .page-wrapper {
        padding-top:0;
    }
    .background-container {
        justify-content: center;
        width:100vw;
        height:60vw;
    }
    .center {
        display:block;
        position: absolute;
        z-index: 2;
        align-self: center;
        margin:0;
    }
    .welcome {
        display:block;
        font-size:clamp(20px, 6vw, 65px);
        -webkit-text-stroke-width: 0;
        margin-top:15%;
        
    }
    .hiams-hounds {
        display:block;
        font-size:clamp(30px, 8vw, 85px);
        -webkit-text-stroke-width: 0;
    }
    .background-image-rocky {
        border-top-right-radius:0;
        border-bottom-right-radius:0;
        border-right-style:none;
        width:45vw;
        height:57.5vw;
    }
    .background-image-kentauras {
        border-top-left-radius:0;
        border-bottom-left-radius:0;
        border-left-style: none;
        width:45vw;
        height:57.5vw;
        
    }
    #kentauras-container {
        justify-content:start !important;
    }
    .background-image-container {
        justify-content:end;
    }
    .info-container {
        width:80%;
        align-self: center;
        position:relative;
        justify-self: center;
        justify-content: center;
    }
    .paragraph1 {
        border-style:none;
        position:relative;
        margin-bottom:15vh;
        width:100%;
    }
    .paragraph2 {
        flex-direction: column;
        margin:0 0 15vh 0;
        align-items:center;
        border:none;
        border-radius:0;
        position:relative;
        right: -150%;
        opacity: 0;
        width:100%;
        padding:0;
    }
    .paragraph3 {
        flex-direction: column-reverse;
        
        align-items:center;
        border:none;
        border-radius:0;
        position:relative;
        left:-150%;
        opacity: 0;
        width:100%;
        padding:0;
    }

    .paragraph-image-puppies,
    .paragraph-image-lickypoo,
    .paragraph-image-iko {
        margin-bottom:5px;
        flex:0;
        padding:2% 2%;
        margin:0 0 3% 0;
        background-color:white;
        margin-top:2%;
        object-fit:cover;
    }
    .image-homepage-iko,
    .image-homepage-lickypoo,
    .image-homepage-shepherdPuppies {
        border-radius: 0;
        margin:0;
        max-width:60vw;
        max-height:40vw;
    }
    .paragraph1-title {
        font-size:clamp(18px, 5vw, 40px);
        text-indent: -0.5vw;
        padding: 0 0.8vw;
        align-self:center;
    }
    .paragraph-text,
    .paragraph-text1 {
        font-size:4vw;
        line-height: 6vw;
        margin-bottom: 2%;
    }

    /* reviews */

    .review-box {
        max-height:max-content;
        margin-top:95vw;
        margin-bottom:85vw;

    }
    .review-container {
        max-width:70%;
    }
    .review-5 {
        font-weight:bold;
    }
    .rating-star {
        width:26vw;
    }
    .nextReview {
        right:0vw;
    }
}

@media (min-width:600px) and (max-width:1100px) {
    .review-box {
        margin-top:30vw;
        margin-bottom:30vw;

    }
}