/** Shopify CDN: Minification failed

Line 270:14 Expected identifier but found whitespace
Line 438:1 Expected "}" to go with "{"

**/

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

a {
    opacity: 1;
}


.hero {
    height: 121vh;
    width: 100%;
    background-image: url('/cdn/shop/files/Flaco-Photography-Fine-Art-Website-01.png?v=1770315511');
    background-size: contain;
    background-position: 50% 0%;
    background-repeat: no-repeat;
    position: relative;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero-two {
    height: 126vh;
    width: 100%;
    background-attachment: fixed;
    background-image: url('/cdn/shop/files/Flaco-Photography-Fine-Art-Website-03.png?v=1770334731');
    background-size: contain;
     background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.hero-two::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero-five {
    height: 126vh;
    width: 100%;
    background-attachment: fixed;
    background-image: url('/cdn/shop/files/Flaco-Photography-Fine-Art-Website-04.png?v=1770334731');
    background-size: contain;
     background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.hero-five::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero-three {
    height: 121vh;
    width: 100%;
    background-image: url('/cdn/shop/files/Flaco-Photography-Fine-Art-Website-02.png?v=1770318412');
    background-size: contain;
    background-position: 50% 20%;
    background-repeat: no-repeat;
    position: relative;
}

.hero-three::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.hero-content {
    position: absolute;
    bottom: calc(120vh - 100vh); /* This equals 20vh from bottom */
    /* OR simply: */
    bottom: 21vh;
    left: 0;
    z-index: 1;
    text-align: left;
    color: white;
    padding: 45px;
    max-width: 900px;
    text-shadow: 1px 1px 2px #0f0f0f30;
}

.hero-content h1 {
    font-size: 5rem;
    margin-bottom: 0rem;
    font-family: Arial, sans-serif;
}

.hero-content h1::after {
    content: '+';
    opacity: 0;
    margin-left: 9px;
    font-size: 0.6em;
    vertical-align: middle; /* Keeps it centered vertically */
    transition: opacity 0.3s ease, margin-left 0.3s ease;
    display: inline-block;
}

.hero-content h1:hover::after {
    opacity: 1;
    margin-left: 9px;
}

.hero-content p {
    font-size: 1.5rem;
    font-family: Arial, sans-serif;
}


.hero-twocontent {
    position: absolute;
    bottom: calc(120vh - 100vh); /* This equals 20vh from bottom */
    /* OR simply: */
    bottom: 3vh;
    left: 18rem;
    z-index: 1;
    text-align: left;
    color: white;
    padding: 45px;
    max-width: 690px;
    
}

.hero-twocontent h1 {
    font-size: 3rem;
    margin-bottom: 0rem;
    font-family: Arial, sans-serif;
}

.hero-twocontent h1::after {
    content: '+';
    opacity: 0;
    margin-left: 9px;
    font-size: 0.6em;
    vertical-align: middle; /* Keeps it centered vertically */
    transition: opacity 0.3s ease, margin-left 0.3s ease;
    display: inline-block;
}

.hero-twocontent h1:hover::after {
    opacity: 1;
    margin-left: 9px;
}

.hero-twocontent p {
    font-size: 1.5rem;
    font-family: Arial, sans-serif;
}


.hero-threecontent {
    position: absolute;
    bottom: calc(120vh - 100vh); /* This equals 20vh from bottom */
    /* OR simply: */
    bottom: 3vh;
    right: 18rem;
    z-index: 1;
    text-align: left;
    color: white;
    padding: 45px;
    max-width: 690px;
}

.hero-threecontent h1 {
    font-size: 3rem;
    margin-bottom: 0rem;
    font-family: Arial, sans-serif;
}

.hero-threecontent h1::after {
    content: '+';
    opacity: 0;
    margin-left: 9px;
    font-size: 0.6em;
    vertical-align: middle; /* Keeps it centered vertically */
    transition: opacity 0.3s ease, margin-left 0.3s ease;
    display: inline-block;
}

.hero-threecontent h1:hover::after {
    opacity: 1;
    margin-left: 9px;
}

.hero-threecontent p {
    font-size: 1.5rem;
    font-family: Arial, sans-serif;
}

.scroll-gallery {
    height: 300vh;
    position: relative;
    background: white;
}

.gallery-track {
    position: absolute;
    top: 0;
    height: 100vh; /* Adjust accordingly */
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 0 2rem;
    padding-right: 5rem; /* Extra padding on the right */
    overflow: hidden;
}

.gallery-item {
    position: relative;
    flex-shrink: 0;
    width: 36vw;
    height: 100vh;
    padding: 21px;
    overflow: hidden;
}

.gallery-item a {
    display: block;
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease;
}

.gallery-item a:hover {
    opacity: 1;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.gallery-item:hover img {
    transform: scale(1.05);
}


.gallery-row:: after{
  content: "";
  clear: both;
  display: table;
}

.hero-four {
    height: 160vh;
    width: 100%;
    background-attachment: fixed;
    background-image: url('/cdn/shop/files/Flaco-Photography-Fine-Art-Hero.png?v=1770169002');
    background-size: cover;
    background-position: 50% 20%;
    background-repeat: no-repeat;
    position: relative;
}

.scale-on-hover {
    transition: transform 0.3s ease;
}

.scale-on-hover:hover {
    transform: scale(1.1);
}

.move-right-hover {
    transition: transform 0.3s ease;
}

.move-right-hover:hover {
    transform: translateX(10px);
}


/* Responsive adjustments */
@media (max-width: 1800px) {

 .hero {
    height: 114vh;
   }

}

@media (max-width: 1440px) {
    .gallery-item {
    width: 39vw;
}

.gallery-item img {
   object-fit: contain;
}

/* Responsive adjustments */
@media (max-width: 768px) {

      .hero {
        background-size: cover;
        background-position: center;
    }


    .hero-two {
        background-attachment: scroll;
    }

     .hero-three {
        background-attachment: scroll;
    }
    
    .hero-content {
        padding: 20px;
    }    
    
    .hero-content h1 {
        font-size: 2rem;
    }

    .hero-content h1::after {
        opacity: 1;
    }
    
    .hero-content p {
        font-size: 1.2rem;
    }


    .hero-twocontent {
        padding: 20px;
    }    
    
    .hero-twocontent h1 {
        font-size: 2rem;
    }

    .hero-twocontent h1::after {
        opacity: 1;
    }
    
    .hero-twocontent p {
        font-size: 1.2rem;
    }


    .hero-threecontent {
        padding: 20px;
    }    
    
    .hero-threecontent h1 {
        font-size: 2rem;
    }

    .hero-threecontent h1::after {
        opacity: 1;
    }
    
    .hero-threecontent p {
        font-size: 1.2rem;
    }


    .gallery-track {
         padding: 0 1rem;
         padding-right: 3rem; /* Extra padding to prevent clipping on final image */
    }
    
    .gallery-item {
        width: 150vw;
        height: 100vh;
        padding: 120px;
    }

     .gallery-item:last-child {
        margin-right: 5rem; /* Extra margin on last item to show it fully */
    }
    
    .scroll-gallery {
        height: 300vh;
    }
}


@media (max-width: 450px) {
    .hero {
    background-position: 74% 0%;
    height: 100vh;
}

.gallery-item {
width: 160vw;
padding: 60px;
}

    .hero-two {
    background-position: 90% 0%;
    height: 100vh;
}

.hero-content {
     padding: 30px;
     bottom: 1.5vh;
}

 .hero-content h1 {
        font-size: 2.3rem;
        line-height: 2.7rem;
        max-width:300px;
    }

}