@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');

* {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

*::-webkit-scrollbar {
    width: 0vw;
    display: none;
}

*:root {
    --primary: #00bfa6;
    --hovered: #00a18b;
}

.nav {
    height: 13vh;
    display: flex;
    box-shadow: 00 0 10px rgba(0, 0, 0, 0.12);
    justify-content: space-evenly;
    align-items: center;
    /* gap: 2rem; */
}

.nav .common {
    width: 30%;
    height: 100%;
}

.nav .logo {
    display: flex;
    flex: 1;
    justify-content: center;
    /* background: red; */
    align-items: center;
}

.nav .links {
    flex: 3;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    /* gap: 3rem; */
}

.nav .links a {
    text-decoration: none;
    color: black;
    font-weight: 600;
    transition: 0.4s ease;
}

.nav .links a.active {
    color: var(--primary);
}

.nav .links a:hover {
    color: var(--primary);
}

.nav .contacts {
    flex: 1;
}

.nav .common img {
    height: 100%;
}

.nav .contacts {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    padding: 0 00 0 20px;
    gap: 1rem;
}

.nav .contacts .navCard {
    /* margin: 0 auto; */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.8rem;
}

.bannerupd {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 40vh;
    background: url("https://img.freepik.com/free-vector/abstract-background-with-squares_23-2148995948.jpg?w=1060&t=st=1665766770~exp=1665767370~hmac=6880d0e9100115db6708d5e6c8db7e41ea43481dadf97393caa5cdbaafea967b");
    background-position: center;
    background-size: cover;
}

.bannerupd h1 {
    /* border: 2px solid red; */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.7rem;
    padding: 40px;
    font-size: 37px;
}

.bannerupd h1 span.effectupd {
    /* color: white; */
    font-size: 40px;
    color: var(--primary);
}

.decorate {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.leftStrip {
    /* border: 2px solid red; */
    height: 13vh;
    width: 0.5vw;
    background: var(--primary);
}

.rightStrip {
    /* border: 2px solid red; */
    height: 13vh;
    width: 0.5vw;
    background: var(--primary);
}

/* End of navbar */

.firstP {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Starting of miniGallery */
.miniGallery {
    /* border: 2px solid red; */
    height: 25vh;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.miniGallery img {
    height: 100%;
}

/* End of miniGallery */

.buttons {
    height: 22vh;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12rem;
}

.buttons a {
    text-decoration: none;
    color: white;
    background: var(--primary);
    transition: 0.5s ease;
    padding: 10px 30px;
    border-radius: 6px;
    font-size: 15px;
}

.buttons a:nth-child(1):hover {
    background: var(--hovered);
}

.buttons a:nth-child(2) {
    background: none;
    border: 2px solid var(--primary);
    color: var(--primary);
}

.buttons a:nth-child(2):hover {
    background: var(--primary);
    color: white;
}

/* Gallery */

/* Gallery */
.gallery {
    height: auto;
    overflow-y: auto;
    display: flex;
    gap: 3rem;
    padding: 30px;
    flex-wrap: wrap;
}

.gallery img {
    box-shadow: 0 0 30px #0000001f;
    border-radius: 20px;
    height: min-content;
    width: 440px;
}

.notice {
    border-radius: 20px;
    box-shadow: 0 0 30px #0000001f;
    padding: 20px;
    height: 730px;
    overflow-y: auto;
    width: 430px;
}

.notice h2 {
    margin: 30px 0;
}

.notice p {
    line-height: 37px;
}

.notice .lok {
    margin-bottom: 20px;
}

.notice .lok img {
    height: 100%;
    width: 100%;
}

.gallery a video {
    border-radius: 20px;
}

.gallery a video.second {
    border-radius: 20px;
    height: 530px;
}


/* MainSection */

#productSection {
    height: 100vh;

}

#productSection h1 {
    padding: 20px;
}

.color {
    color: var(--primary);
}

#productsmodified {
    padding: 50px;
    gap: 3rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.card {
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    width: 40vw;
    padding: 30px;
}

.info {
    line-height: 28px;
    padding: 20px 0;
}

.action {
    margin-top: 10px;
    margin-bottom: 10px;
}

.action a {
    padding: 10px 30px;
    text-decoration: none;
    color: white;
    background: var(--primary);
    /* transition: ; */
    transition: 0.4s ease;
    border-radius: 7px;
}

.action a:hover {
    box-shadow: 0 0 10px var(--primary);
}

.imgDivmodified {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 70vh;
}

.imgDivmodified img {
    height: 80%;
    width: auto;
}

#purchaseCard {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 90vh;
    width: 50vw;
    background: #fff;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.12);
    border-radius: 12px;
}

/* Responsive navbar */
/* Add a black background color to the top navigation */
.topnav {
    background-color: #333;
    overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
    background-color: #04AA6D;
    color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}

#myTopnav {
    display: none;
}

.videos {
    /* border: 2px solid red; */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */

#hproducts {
    height: auto;
    padding: 10px 50px;
    gap: 3rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.piece {
    box-shadow: 0 0 40px rgba(00, 0, 0, 0.12);
    border-radius: 12px;
    padding: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.pieceModified {
    width: 100%;
    height: auto;
    display: flex;
    /* gap: 3rem; */
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.pieceModified img {
    height: 100%;
    width: 100%;
}

.haction {
    /* border: 2px solid red; */
    margin-top: 30px;
}

.haction a {
    transition: 0.4s ease;
    background: var(--primary);
    color: white;
    padding: 10px 30px;
    border-radius: 4px;
    text-decoration: none;
}

.haction a:hover {
    background: var(--hovered);
}

@media screen and (max-width: 600px) {

    #hproducts {
        height: auto;
        padding: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .imgDivmodified {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        height: 70vh;
    }

    .imgDivmodified img {
        height: auto;
        width: 100%;
    }

    #myTopnav {
        display: block;
    }

    .topnav a:not(:first-child) {
        display: none;
    }

    .nav {
        display: none;
    }

    .topnav a.icon {
        float: right;
        display: block;
    }

    .bannerupd {
        /* flex-direction: column; */
        height: 77vh;

    }

    .bannerupd h1 {
        /* border: 2px solid red; */
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 0.7rem;
        padding: 40px;
        font-size: 32px;
    }

    .bannerupd h1 span.effectupd {
        color: var(--primary);
        text-align: center;
    }

    .firstP {
        display: flex;
        justify-content: center;
        align-items: center;
        /* border: 2px solid red; */
        text-align: justify;
        line-height: 30px;
        padding: 0 30px;
    }

    .miniGallery {
        /* border: 2px solid red; */
        height: auto;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        flex-direction: column;
        width: 100%;
        gap: 3rem;

    }

    .miniGallery img {
        /* border: 2px solid red; */
        height: auto;
        width: 70vw;
    }

    .buttons {
        margin: 0 auto;
        height: 15vh;
        display: flex;
        width: 80%;
        justify-content: center;
        align-items: center;
        /* border: 2px solid red; */
        /* padding: 0 30px; */
        gap: 3rem;
    }

    .buttons a {
        padding: 6px 10px;
    }

    #productsmodified {
        padding: 0 20px;
        gap: 3rem;
        display: flex;
        flex-direction: column;
    }

    .card {
        width: 100%;
        margin: 0 auto;
    }

    .videos {
        flex-direction: column;
        width: 100%;
    }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
    .topnav.responsive {
        position: relative;
    }

    .topnav.responsive a.icon {
        position: absolute;
        right: 0;
        top: 0;
    }

    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
}

#hproducts {
    height: auto;
    padding: 10px 50px;
    gap: 3rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.piece {
    box-shadow: 0 0 40px rgba(00, 0, 0, 0.12);
    border-radius: 12px;
    padding: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.pieceModified {
    width: 100%;
    height: auto;
    display: flex;
    /* gap: 3rem; */
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.pieceModified img {
    height: 100%;
    width: 100%;
}

.haction {
    /* border: 2px solid red; */
    margin-top: 30px;
}

.haction a {
    transition: 0.4s ease;
    background: var(--primary);
    color: white;
    padding: 10px 30px;
    border-radius: 4px;
    text-decoration: none;
}

.haction a:hover {
    background: var(--hovered);
}



.mainHeading {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 40vh;
    background: url("https://img.freepik.com/free-vector/abstract-background-with-squares_23-2148995948.jpg?w=1060&t=st=1665766770~exp=1665767370~hmac=6880d0e9100115db6708d5e6c8db7e41ea43481dadf97393caa5cdbaafea967b");
    background-position: center;
    background-size: cover;
}

.mainHeading h1 {
    /* border: 2px solid red; */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.7rem;
    padding: 40px;
    font-size: 37px;
}

.mainHeading h1 span.markEffect {
    /* color: white; */
    font-size: 40px;
    color: var(--primary);
}


.leftPart {
    /* border: 2px solid red; */
    height: 13vh;
    width: 0.5vw;
    background: var(--primary);
}

.rightPart {
    /* border: 2px solid red; */
    height: 13vh;
    width: 0.5vw;
    background: var(--primary);
}

.actionAllofthem {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

@media screen and (max-width: 600px) {


    #hproducts {
        height: auto;
        padding: 20px;
        gap: 3rem;
        display: grid;
        grid-template-columns: 1fr;
    }


    .mainHeading {
        /* flex-direction: column; */
        height: 77vh;

    }

    .mainHeading h1 {
        /* border: 2px solid red; */
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 0.7rem;
        padding: 40px;
        font-size: 32px;
    }

    .mainHeading h1 span.markEffect {
        color: var(--primary);
        text-align: center;
    }
}