/* ==================================
   SECTIONS
================================== */

/*hero section*/

.hero-section{
    text-align: center;
    font-weight: 600;

    max-width: 100vw;

    background-image: 
        url(/images/depo-bg.webp),
        linear-gradient(
            transparent 75%,
            var(--bg) 
        );
    background-position: center;
    background-size: cover;
}

.hero-section h1{
    max-width: 750px;
    margin: var(--space-6) auto;
}

.hero-button-container{
    margin: auto;
    max-width: 750px;

    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: var(--space-2);

    text-wrap: wrap;
}

.hero-button{
    padding: var(--space-2);
    border-radius: 30px;

    font-size: 1.1rem;
    color: var(--text-dark);
    
    transition: all 0.5s ease;

    background-image: linear-gradient(
        90deg,
        var(--primary),
        var(--primary-light),
        var(--bg)
    );
    background-size: 200%;
    background-position: left;
    
}

.hero-button:hover{
    background-position: center;
    transform: scale(1.01);
}

.hero-button:active{
    background-position: right;
    transform: scale(0.99);
}

/*catalog*/

.hero-section .product-catalog{
    text-align: center;
    max-width: 750px;
    margin: var(--space-4) auto;
    max-width: 300px;
}

.hero-section .product-catalog a{
    font-size: 1.2rem;
    display: flex;
    justify-content: center;
    gap: var(--space-1);
    background-image: linear-gradient(
        90deg,
        var(--primary-light),
         var(--primary)
    );
    padding: var(--space-3);
    border-radius: 30px;
}

.hero-section .product-catalog a span{
    vertical-align: text-bottom;
    font-size: 2rem;
}

/*contact section*/
.contact-section {
    display: grid;
    border: none;
    grid-template-columns: repeat(1, 1fr);
    grid-template-areas: 
    "contact-header"
    "contact-list"
    "map"
    "contact-form";
    gap: var(--space-3);
}

.contact-section h2{
    grid-area: contact-header;
}

.contact-section ul{
    grid-area: contact-list;

    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0;
}

.contact-section .map{
    grid-area: map;

    max-height: 300px;
    width: 100%;
    aspect-ratio: 1 / 1 ;
}

.contact-icon{
    vertical-align: text-bottom;
}

.contact-form{
    grid-area: contact-form;

    margin-top:var(--space-5) ;
    background-color: var(--accent-clear);
    border-radius: 20px;
    padding: var(--space-3);
    max-width: 750px;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.contact-form h3{
    margin: var(--space-1);
}

.contact-form input, .contact-form textarea{
    border: none;
    border-radius: 7px;
    padding: var(--space-1) var(--space-2);
}

/*about-section*/
.about-section{
    text-align: justify;
}


/*breadcrumb navigation*/
.breadcrumb-nav{
    margin: var(--space-3);
    padding: 0;
    box-shadow: 0 10px 10px rgba(0,0,0,0.1);

    text-align: center;

    display: flex;
    flex-direction: column;

    background-color: var(--primary-light);
}

.breadcrumb-links{
    display: flex;
    text-wrap: nowrap;
    flex-wrap: wrap;

    background-color: var(--bg);
    padding: var(--space-2);
    margin: 0;

    list-style: none;
}

/*product categories container */
.categories-container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
}

/*product container*/
.product-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--space-3);
}

/*product-info*/

.product-img-wrapper{
    display: flex;
    flex-direction: column;
}

.product-info h2{
    text-align: center;
}

.product-page-img{
    width: 100%;
}

.product-info ul{
    list-style: disc;
    padding: var(--space-3);
}

.product-info-features{
    display: flex;
    flex-direction: column;
    align-self: center;
}

.product-info table{
    text-align: center;
    border: 1px solid var(--accent);
    width: 100%;
    margin: 0 auto var(--space-4);
}

.product-info table tr:nth-child(odd) {
    background-color: var(--accent-clear);
}

.product-info table td, .product-info table th{
    border: 1px solid var(--accent);
    padding: var(--space-2);
}

.product-gallery{
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;

    gap: var(--space-2);
    margin: auto;
}

.product-gallery img{
    width: 80%;
}

/*related-products*/
.related-products{
    color: var(--text-dark);
    padding-top:var(--space-1) ;
    max-width: 1200px;
}

/*footer*/
.footer{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-2);

    background-color: var(--bg2);

    width: 100%;
    padding: var(--space-3);
}

.footer-bottom{
    width: 100%;
    padding:var(--space-1) ;

    display: flex;
    justify-content: center;

    background-image: linear-gradient(
    90deg,    
    var(--primary),
    var(--primary-light),
    var(--primary));
    box-shadow:0 0.5px 3px var(--accent);
}