:root{
    --teal: #2CD5C4;
    --gold: #FFC600;
}


html{
    scroll-behavior: smooth;
    scrollbar-width: none;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    }
    
    body{
      margin: 0;
     
      height: auto;
    
      /*overflow-x: hidden;*/
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-image: linear-gradient(180deg, var(--teal), var(--gold));
      transition: 0.3s ease-out;
      max-width: 100%;
      width: 100%;
      overscroll-behavior: none;
      scroll-snap-type: y mandatory;

    }

        header{
            display: grid !important;
            grid-template-areas: 'b c';
            width: 100%;
            background-color: var(--gold);
            height: 10svh;
            align-items: center;
            justify-content: space-around;
            align-content: center;
            justify-items: baseline;
            position: sticky;
            position: -webkit-sticky;
            top: 0;
            z-index: 5;
        }

        header > div {
            max-inline-size: 33%;
        }


        .logo2{ grid-area: b;}
        .fbo-id{ grid-area: c;
        font-size: 1.5rem;
        text-wrap: nowrap;}
p{
    margin: unset !important;
    
}
        .logo{
            max-height: 9svh;
        }


section{
    scroll-snap-align: center;
}

/*section.imgintro{
    background: url(GRU00763.jpg);
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    height: 350px;
    width: 100lvw;
    position: static;
} */



.introsec{
    
        position: relative;
        overflow: hidden;
        /* Set height as needed */
        height: 700px;
        transform: skewY(357deg);
        margin-top: 50px;
    }

    .imgintro {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        /* Adjust z-index as needed */
        z-index: -1;
    }


main{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: center;
    max-width: 100%;
    }

    .title{
        color: white;
        font-size: 2.2rem;

    }

    .welcome{
        display: flex;
        justify-content: center;
        flex-direction: row;
        padding: 10px;
        height: 15vh;
    }
    
.scrollstart{
    scroll-snap-align: start;
}    
.scrollcenter{
    scroll-snap-align: center;
}

.products {
    display: flex;
    overflow-x: scroll;
    white-space: normal;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    height: 100vh; /* Fix typo in height unit */
    margin-top: 40px;
}




    .products1{
        display: flex;
        overflow-x: scroll;
        white-space: normal;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        height: 100svh;
        margin-top: 40px;
    }


    .products1 {
        display: flex;
        overflow-x: auto;
    
        white-space: normal; /* <<Normal Prevent wrapping onto multiple lines */
        -webkit-overflow-scrolling: touch; /* For smooth scrolling on iOS devices */
        scroll-snap-type: x mandatory; /* Snap scrolling to each slide */
        height: 100vh;
        margin-top: 40px;
        
    }
    
    .products::-webkit-scrollbar {
        display: none; /* Hide scrollbar for WebKit browsers */
    }
    
    .slide {
        flex: 0 0 auto;
        width: 100vw; /* Adjust width as needed */
        scroll-snap-align: start; /* Snap each slide to the start */
        /*padding-right: 20px; /* Add some spacing between slides */
    }
    

    .slide{
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-content: baseline;
        align-items: center;
        flex-wrap: wrap; 
        column-gap: 25px; 
        min-width: 100%; 
        row-gap: 30px;   
        margin-top: 15px;
 
    }

    .slide1{
     display: grid;
     grid-template-areas: 
     'nr image text';

    }
    
    .slide > div{
        /*max-width: 33%;*/
    }

#modal-btn{display: none;}

    .nr{
        grid-area: nr;
              
    } 
    
    .number{
        font-size: 8rem;
        font-family: arial;
        left: 50px;
        transform: rotate(347deg);
        z-index: 1; 
        width: 15%; 
        font-weight: bolder;
    }

    .prod-img{
        grid-area: image;

    }
    .prodimg{
        width: 100%;
        height: 80svh;
        text-shadow: 2px 2px 5px black; */
        -webkit-filter: drop-shadow(5px 5px 5px #222);
        filter: drop-shadow(1px 1px 10px #222);*/
        }
        
    .prodtitle{

    }

.txt2{
    padding: 20px;
}

.wapp{
    position: fixed;
    bottom: 20px;
    right: -230px;
    z-index: 100;
    box-shadow: 5px 5ox 20 black;
    -webkit-filter: drop-shadow(5px 5px 5px #222);
    filter: drop-shadow(1px 1px 10px #222);
    scale: 0.9;
    transition: 700ms ease-in-out;

}

    .prodtxt{
        grid-area: text;
        width: 40%;
    }



    a:link{
        width: 100%;
        background-color: #00000057;
        color: #fff;
        height: 45px;
        font-size: 1.7rem;
        /* border-block-style: solid; */
        border-color: white;
        border-style: solid;
        border-radius: 8px;
        padding: 10px;
        text-decoration: none;
        display: inline-block;
        text-align: center;
        text-decoration: none !important;
        border-width: 1px;

    }

a:link:hover{
    background-color: rgb(0, 0, 0);
    transition: 200ms ease-in-out;
    color: white;

}
    .bttn{
        width: 100%;
        background-color: #00000057;
        color: #fff;
        height: 45px;
        font-size: 1.7rem;
        /* border-block-style: solid; */
        border-color: white;
        border-style: solid;
        border-radius: 8px;
        padding: 10px;
        border-width: 1px;

    }
    .bttn:hover{
        background-color: rgb(0, 0, 0);
        transition: 200ms ease-in-out;
        color: white;   
    }

    a.reset-link {
        all: unset;
    }

.footer{
    background-color: #5C3D31;
    color: white;
    padding: 15px;

}
.footnote{
    text-align: justify;

}

.credits{
    font-size: 1.2rem;
    text-align: center;
}

@media screen and (max-width:550px) {
    .welcome{
        flex-direction: column;
        max-width: 100%;
        height: auto;
    }
    .intro{
        padding: 5px;
    }
    .prodimg{
        height: 50svh;
    }
    .txt{
        width: 90%;
        display: none;
    }
    #modal-btn{
        display: block;
    }
    a:link{
        margin-top: 15px;
    }
    .introsec{
        height: 200px;
    }
    .slide{
        margin-top: 15px;
    }
    
    .prodtxt{
        width: 80%;
    }
    .imgmod{
        width: 200px;
        height: auto;
    }
}