html * {
    font-family: Montserrat;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    width: 100%;
    scroll-behavior: smooth;
}

.row {
    margin: 0;
}

a:hover {
    text-decoration: none;
    color: var(--text-primary-color);
}

.col-md-6, .col-sm-12 {
    padding: 0;
}

p {
    margin: 0;
}

.intext-link {
    color: var(--text-primary-color);
    text-decoration: none;
    font-weight: bold;
}

/* Background Image */
.img-src {
    position: fixed;
    top: 0;
    height: 100dvh;
    left: 0;
    right: 0;
    z-index: -1;
    width: 100vw;
    background-image: var(--background-image);
    background-position: center center;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

/* --- Banner Title --- */
#banner-title {
    height: 100vh;
}

.title {
    padding: 0px 20px;
    text-align: center;
    top: 40%;
    color: var(--text-primary-color);
    font-size: 3.5vmax;
    font-weight: 800;
    cursor: default;
    border-radius: 30px;
    width: -moz-fit-content;
    width: fit-content;
    margin-bottom: 0;
    letter-spacing: 3px;
    text-shadow: 0px 0px 20px var(--text-primary-color);
    white-space: nowrap;
}

.title-container {
    transition-duration: 300ms;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    flex-direction: column;
    overflow: hidden;
}

/* Line */
.line {
    width: 100px;
    border: 5px solid var(--text-primary-color);
    border-radius: 10px;
    margin-top: 50px;
    margin: auto;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.25);
}

/* --- Sections --- */
.all-sections {
    max-width: 1400px;
    margin: auto;
    color: var(--text-primary-color);
    background: var(--background-primary-color);
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.65);
    border-radius: 30px;
    width: 95%;
}

.about-title,
.gallery-title,
.design-title,
.contact-title {
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-title h3,
.gallery-title h3,
.projects-title h3,
.design-title h3,
.contact-title h3 {
    text-align: center;
    padding: 8px 25px;
    color: var(--text-primary-color);
    font-size: 25px;
    font-weight: 800;
    cursor: default;
    background-image: linear-gradient(120deg, var(--3-color) 0%, var(--4-color) 100%);
    border-radius: 50px;
    width: -moz-fit-content;
    width: fit-content;
    margin-bottom: 30px;
    letter-spacing: 6px;
    white-space: nowrap;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.25);
}

.about,
.gallery,
.design,
.contact {
    margin: 50px 0;
}

/* About Section */
.about-column{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.about p:nth-child(2) {
    font-size: 15px;
    line-height: 26px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    -moz-hyphens: none;
    -ms-hyphens: none;
    -webkit-hyphens: none;
    hyphens: none;
}

.image-about {
    border-radius: 30px;
    display: flex;
}

.about-name {
    display: flex;
    justify-content: center;
    word-wrap: break-word;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
    margin: 40px 0 20px 0;
    line-height: 40px;
    word-break: keep-all;
    font-weight: 800;
    font-size: 45px;
    letter-spacing: 3px;
}

/* Gallery Section */
.gallery-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
    justify-content: space-between;
    width: 95%;
}

.gallery-wrapper .gallery-item-button {
    padding: 0;
    background-size: cover;
    background-position: center;
    border-radius: 15px;
    transition: transform 0.5s ease;
    justify-content: space-evenly;
}

.gallery-item-button {
    display: flex;
    flex-direction: column;
    text-decoration: none;
}

.gallery-item-image {
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100%;
    border-radius: 15px;
}

.gallery-item-button:nth-child(1) .gallery-item-image {
    background-image: url(/assets/img/casual.webp);
}

.gallery-item-button:nth-child(2) .gallery-item-image {
    background-image: url(/assets/img/events.webp);
}

.gallery-item-button:nth-child(3) .gallery-item-image {
    background-image: url(/assets/img/nature.webp);
}

.gallery-category-text {
    color: var(--text-primary-color);
    align-content: center;
    text-align: center;
    border-radius: 20px;
    padding: 10px 20px;
    letter-spacing: 8px;
    font-weight: 100;
    z-index: 1;
    font-size: 2rem;
    text-transform: uppercase;
}

/* Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 576px) {
    .gallery-wrapper .gallery-item-button {
        height: 20rem;
        width: 100%;
        margin-bottom: 20px;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .gallery-wrapper .gallery-item-button {
        height: 25rem;
        width: 100%;
        margin-bottom: 20px;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .gallery-wrapper .gallery-item-button {
        height: 30rem;
        width: 30%;
        margin-bottom: 0px;
    }
}

/* Contact Section */
.contact p {
    font-size: 15px;
    line-height: 26px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
    text-align: center;
    margin: auto;
    width: 75%;
}

.contact-links {
    cursor: pointer;
    text-decoration: var(--text-primary-color);
    color: var(--text-primary-color);
    padding-bottom: 20px;
    justify-content: center;
    display: flex;
    max-width: 0%;
    margin: auto;
    white-space: nowrap;
}

.contact-links:hover {
    text-decoration: underline;
}

/* --- Media Queries ---- */

@media (prefers-reduced-motion) {
    .hide-elements-fade {
        transition: none;
    }
}

/* Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 576px) {
    body {
        text-align: center;
    }

    .gallery-category-text {
        font-size: 1.5rem;
    }

    .about-name {
        font-size: 25px;
    }

    #design-wrapper, .gallery-category-text {
        font-size: .7rem;
        font-weight: 300;
    }

    .about p:nth-child(2),
    .image-about {
        width: 95%
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .about-name {
        font-size: 45px;
    }

    #design-wrapper, .gallery-category-text {
        font-size: .7rem;
        font-weight: 300;
    }

    .about p:nth-child(2),
    .image-about {
        width: 95%
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    body {
        text-align: initial;
    }

    #design-wrapper, .gallery-category-text {
        font-size: 25px;
        font-weight: 100;
    }

    .about p:nth-child(2),
    .image-about {
        width: 90%
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}