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

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


body {
    background-color: #fff0f5;
    background-image: linear-gradient(to right,
            #98FB98 0%,
            #fffacd 50%,
            #FFE4E1 75%,
            #fff0f5 100%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;
}


/* CONTACT TOP SECTION - CONTACT TOP SECTION - CONTACT TOP SECTION - CONTACT TOP SECTION - */

#contact-top {
    color: white;
    text-align: center;
    background-color: rgb(185, 185, 185);
    border: none;
    padding: 0.5%;
    padding-bottom: 10px;
    font-family: 'Lato', sans-serif;

    position: relative;
    width: 100vw;
    margin: 0;
}

#contact-top p {
    color: white;
    text-align: center;
}


/* TITLE TYPE WRITER & INTRODUCTION - TITLE TYPE WRITER & INTRODUCTION - TITLE TYPE WRITER & INTRODUCTION -  */

.left-text-function,
.right-text-function {
    display: inline-block;
    vertical-align: top;
    /*Keeps both texts perfectly aligned at the top */
    width: 45%;
    /* Adjust the width so they fit on one line */
}


/* TITLE SECTION - TITLE SECTION - TITLE SECTION - TITLE SECTION - TITLE SECTION - TITLE SECTION - TITLE SECTION -  */

.left-text-function {
    margin-left: 130px;
    padding-top: 60px;
    padding-bottom: 00px;
}

/* TITLE SECTION - TITLE SECTION - TITLE SECTION - TITLE SECTION - TITLE SECTION - TITLE SECTION - TITLE SECTION -  */


#typing-text {
    color: gray;
    cursor: pointer;
    font-size: 100px;
    font-family: 'Lato', sans-serif;
    font-weight: 1000;
}

/* TITLE SECTION - TITLE SECTION - TITLE SECTION - TITLE SECTION - TITLE SECTION - TITLE SECTION - TITLE SECTION -  */

#typing-bar {
    display: inline-block;
    width: 5px;
    height: 100px;
    background-color: gray;
    margin-left: 8px;
    animation: blink 0.7s step-end infinite;
}

/* TITLE SECTION - TITLE SECTION - TITLE SECTION - TITLE SECTION - TITLE SECTION - TITLE SECTION - TITLE SECTION -  */


@keyframes blink {
    50% {
        opacity: 0;
    }
}

/* INTRODUCTION SECTION - INTRODUCTION SECTION - INTRODUCTION SECTION - INTRODUCTION SECTION - INTRODUCTION SECTION -  */

#right-text-function {
    color: gray;
    font-weight: 1000;
    font-family: 'Lato', sans-serif;
    padding-top: 490px;
    font-size: 20px;
    margin-right: 50px;
    padding-right: 130px;
    padding-left: 130px;
}

/* INTRODUCTION SECTION - INTRODUCTION SECTION - INTRODUCTION SECTION - INTRODUCTION SECTION - INTRODUCTION SECTION -  */

#right-text-function h2 {
    font-size: 40px;
    margin-bottom: 3px;
}

/* DESIGN / BUILD / ENJOY SECTION - DESIGN / BUILD / ENJOY SECTION - DESIGN / BUILD / ENJOY SECTION - DESIGN / BUILD / ENJOY SECTION -  */

#image-row {
    display: flex;
    flex-direction: row;
}

/* DESIGN / BUILD / ENJOY SECTION - DESIGN / BUILD / ENJOY SECTION - DESIGN / BUILD / ENJOY SECTION - DESIGN / BUILD / ENJOY SECTION -  */


#image-row img {
    width: 400px;
    height: 400px;
    border-radius: 15px;
    object-fit: cover;
    margin-left: 170px;
    margin-top: 100px;
}

/* DESIGN / BUILD / ENJOY SECTION - DESIGN / BUILD / ENJOY SECTION - DESIGN / BUILD / ENJOY SECTION - DESIGN / BUILD / ENJOY SECTION -  */



#jacuzzi img {
    width: 400px;
    height: 400px;
}

/* DESIGN / BUILD / ENJOY SECTION - DESIGN / BUILD / ENJOY SECTION - DESIGN / BUILD / ENJOY SECTION - DESIGN / BUILD / ENJOY SECTION -  */


#jazuzzi-build {
    width: 400px;
    height: 400px;
}

/* DESIGN / BUILD / ENJOY SECTION - DESIGN / BUILD / ENJOY SECTION - DESIGN / BUILD / ENJOY SECTION - DESIGN / BUILD / ENJOY SECTION -  */


#roof {
    width: 400px;
    height: 400px;
}

/* DESIGN / BUILD / ENJOY SECTION - DESIGN / BUILD / ENJOY SECTION - DESIGN / BUILD / ENJOY SECTION - DESIGN / BUILD / ENJOY SECTION -  */


#jacuzzi h3 {
    color: black;
    font-weight: 1000;
    margin-left: 170px;
    font-size: larger;
    padding-bottom: 2px;

}

/* DESIGN / BUILD / ENJOY SECTION - DESIGN / BUILD / ENJOY SECTION - DESIGN / BUILD / ENJOY SECTION - DESIGN / BUILD / ENJOY SECTION -  */


#jacuzzi p {
    color: black;
    font-weight: 1000;
    margin-left: 170px;
    font-size: larger;
    padding-bottom: 200px;

}

/* DESIGN / BUILD / ENJOY SECTION - DESIGN / BUILD / ENJOY SECTION - DESIGN / BUILD / ENJOY SECTION - DESIGN / BUILD / ENJOY SECTION -  */


#jacuzzi-build h3 {
    color: black;
    font-weight: 1000;
    margin-left: 170px;
    font-size: larger;
    padding-bottom: 2px;
}

/* DESIGN / BUILD / ENJOY SECTION - DESIGN / BUILD / ENJOY SECTION - DESIGN / BUILD / ENJOY SECTION - DESIGN / BUILD / ENJOY SECTION -  */


#jacuzzi-build p {
    color: black;
    margin-left: 170px;
    font-size: larger;
    /* padding-bottom: 30px; */
    font-weight: 1000;
    padding-bottom: 200px;
}

/* DESIGN / BUILD / ENJOY SECTION - DESIGN / BUILD / ENJOY SECTION - DESIGN / BUILD / ENJOY SECTION - DESIGN / BUILD / ENJOY SECTION -  */


#roof h3 {
    color: black;
    margin-left: 170px;
    font-size: larger;
    padding-bottom: 2px;
    padding-right: 700px;
}

/* DESIGN / BUILD / ENJOY SECTION - DESIGN / BUILD / ENJOY SECTION - DESIGN / BUILD / ENJOY SECTION - DESIGN / BUILD / ENJOY SECTION -  */


#roof p {
    color: black;
    font-weight: 1000;
    margin-left: 170px;
    font-size: larger;
    /* padding-bottom: 30px; */
    white-space: nowrap;
    padding-bottom: 200px;
}


/* COMPLETED WORK SECTION - COMPLETED WORK SECTION - COMPLETED WORK SECTION - COMPLETED WORK SECTION - COMPLETED WORK SECTION - COMPLETED WORK SECTION -  */

/* 1. Define the animation keyframes */
@keyframes shrink-and-grow {

    /* Starts out small when it enters the bottom of the screen */
    0% {
        transform: scale(0.5);
        opacity: 0.3;
    }

    /* Reaches full size when it is perfectly in the center/fully visible */
    50% {
        transform: scale(1);
        opacity: 1;
    }

    /* Shrinks back down as it exits the top of the screen */
    100% {
        transform: scale(0.5);
        opacity: 0.3;
    }
}

/* COMPLETED WORK SECTION - COMPLETED WORK SECTION - COMPLETED WORK SECTION - COMPLETED WORK SECTION - COMPLETED WORK SECTION - COMPLETED WORK SECTION - */

#scroll-image {
    width: 100%;
    display: flex;
    justify-content: center;
    /* margin-left: 200px; */
}


/* IMAGES */

#image-wrapper1 img {
    display: block;
    width: 600px;
    height: auto;
    object-fit: cover;
    margin-left: 150px;

    margin-bottom: 100px;

    /* Keep the shrinking and growing effect */
    animation: shrink-and-grow linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
}


/* HEADING */

#image-wrapper1 h1 {
    color: gray;
    font-size: 80px;
    margin-bottom: 100px;
}

/* PREVIOUSLY WORKED WITH SECTION - PREVIOUSLY WORKED WITH SECTION - PREVIOUSLY WORKED WITH SECTION - PREVIOUSLY WORKED WITH SECTION - PREVIOUSLY WORKED WITH SECTION -  */

#previous-work {
    margin-top: 40px;
    margin-bottom: 200px;
    margin-left: 130px;
    margin-right: 130px;
    border-color: #C0C0C0;
    border-style: solid;
    color: black;
    background-color: #C0C0C0;
    padding-bottom: 2px;
}

/* PREVIOUSLY WORKED WITH SECTION - PREVIOUSLY WORKED WITH SECTION - PREVIOUSLY WORKED WITH SECTION - PREVIOUSLY WORKED WITH SECTION - PREVIOUSLY WORKED WITH SECTION -  */

#previous-work h2 {
    font-size: 50px;
    text-align: center;
    padding-bottom: 5px;
    margin-bottom: 30px;
}

/* PREVIOUSLY WORKED WITH SECTION - PREVIOUSLY WORKED WITH SECTION - PREVIOUSLY WORKED WITH SECTION - PREVIOUSLY WORKED WITH SECTION - PREVIOUSLY WORKED WITH SECTION -  */

/* GRID */

#previous-work-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 30px;
    padding: 30px;

}

/* PREVIOUSLY WORKED WITH SECTION - PREVIOUSLY WORKED WITH SECTION - PREVIOUSLY WORKED WITH SECTION - PREVIOUSLY WORKED WITH SECTION - PREVIOUSLY WORKED WITH SECTION -  */

/* LATCH */

#latch {
    grid-column: 2 / 4;

    font-family: Georgia, serif;
    font-weight: bold;
    font-size: 40px;


    border-style: solid;

    padding: 20px;
    text-align: center;
    border-color: #B8B8B8;
    background-color: #B8B8B8;
}

/* PREVIOUSLY WORKED WITH SECTION - PREVIOUSLY WORKED WITH SECTION - PREVIOUSLY WORKED WITH SECTION - PREVIOUSLY WORKED WITH SECTION - PREVIOUSLY WORKED WITH SECTION -  */

/* COLLECTIVE */

#collective {
    grid-column: 4 / 6;

    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    letter-spacing: 0.15em;
    font-size: 40px;

    border-color: gray;
    border-style: solid;

    padding: 20px;
    text-align: center;

    border-color: #B8B8B8;
    background-color: #B8B8B8;

}

/* PREVIOUSLY WORKED WITH SECTION - PREVIOUSLY WORKED WITH SECTION - PREVIOUSLY WORKED WITH SECTION - PREVIOUSLY WORKED WITH SECTION - PREVIOUSLY WORKED WITH SECTION -  */

/* PREVIOUSLY WORKED WITH SECTION - PREVIOUSLY WORKED WITH SECTION - PREVIOUSLY WORKED WITH SECTION - PREVIOUSLY WORKED WITH SECTION - PREVIOUSLY WORKED WITH SECTION -  */

/* HORIZON */

#horizon {
    grid-column: 1 / 3;

    font-family: 'Montserrat', 'Arial Black', sans-serif;
    text-transform: uppercase;
    font-size: 40px;

    border-color: gray;
    border-style: solid;

    padding: 20px;
    text-align: center;

    border-color: #B8B8B8;
    background-color: #B8B8B8;
}

/* PREVIOUSLY WORKED WITH SECTION - PREVIOUSLY WORKED WITH SECTION - PREVIOUSLY WORKED WITH SECTION - PREVIOUSLY WORKED WITH SECTION - PREVIOUSLY WORKED WITH SECTION -  */

/* PREVIOUSLY WORKED WITH SECTION - PREVIOUSLY WORKED WITH SECTION - PREVIOUSLY WORKED WITH SECTION - PREVIOUSLY WORKED WITH SECTION - PREVIOUSLY WORKED WITH SECTION -  */

/* PJK */

#pjk {
    grid-column: 3 / 5;

    font-family: 'Montserrat', 'Arial Black', sans-serif;
    font-weight: 900;
    font-size: 40px;

    border-color: gray;
    border-style: solid;

    padding: 20px;
    text-align: center;

    border-color: #B8B8B8;
    background-color: #B8B8B8;
}

/* PREVIOUSLY WORKED WITH SECTION - PREVIOUSLY WORKED WITH SECTION - PREVIOUSLY WORKED WITH SECTION - PREVIOUSLY WORKED WITH SECTION - PREVIOUSLY WORKED WITH SECTION -  */

/* PAN TILES */

#pan-tiles {
    grid-column: 5 / 7;

    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 40px;

    border-color: gray;
    border-style: solid;

    padding: 20px;
    text-align: center;

    border-color: #B8B8B8;
    background-color: #B8B8B8;
}

/* CONTACT BOTTOM SECTION - CONTACT BOTTOM SECTION - CONTACT BOTTOM SECTION - CONTACT BOTTOM SECTION - CONTACT BOTTOM SECTION - CONTACT BOTTOM SECTION -  */

#contact-bottom {
    color: white;
    text-align: center;
    border: 2px;
    border-style: solid;
    background-color: rgb(185, 185, 185);
    border-color: rgb(185, 185, 185);

    border-left: none;
    border-right: none;
    border-width: 10;
    border-top: none;
    padding: 0.5%;
    padding-bottom: 10px;

    font-family: 'Lato', sans-serif;
    margin-left: -10px;
    margin-right: -10px;
    margin-top: 100px;
    margin-bottom: -8px;

}


/* GALLERY SECTION - GALLERY SECTION - GALLERY SECTION - GALLERY SECTION - GALLERY SECTION - GALLERY SECTION - GALLERY SECTION - GALLERY SECTION - */

#slide_container {
    display: flex;
    gap: 30px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    cursor: grab;
}

#gallery-title {
    color: gray;
    font-size: 40px;
    margin-bottom: 2px;
    margin-left: 400px;
}

#slide_container:active {
    cursor: grabbing;
}

.slide {
    flex: 0 0 auto;
}

.slide img {
    width: 500px;
    height: 350px;
    object-fit: cover;
    display: block;
    border-radius: 15px;
}