body{
    /* overflow-x:hidden; */
}
.catalog-top{
    height: 500px;
    overflow-x: hidden;
}
.catalog-top svg path{
    background-image:url('https://getenergie.co.id/wp-content/uploads/2024/04/solar-house-roof.jpg');
}
.catalog-top-bg{
    position: absolute;
}
.catalog-top-caption{
    position:relative;
    z-index: 2;
    width: max-content;
    left: 10vw;
    top: 130px;
    color: var(--c3);
}
.catalog-top h1 {
    /* color: var(--c5); */
    font-size: 30pt;
    margin-bottom:0.3em;
    margin-top:0;
}
.main-catalog {
    height: 500px;
    /* display: flex;
    flex-direction: column;
    justify-content: center; */
}
.action-buttons{
    display: flex;
    gap:2em;
    margin-top: 2em;
}
.action-button{
    padding:0.5em 1em;
    border: 1px solid;
    border-radius: 10px;
    box-sizing: border-box;
    color:var(--c1)
}
.action-button:hover{
    background:#ddd;
}
.solar-panel-catalog{
    background-image: url('https://getenergie.co.id/wp-content/uploads/2024/04/solar-house-roof.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position:50%;
    
}
.solar-panel-catalog .product-contents{top:160px;}
.ev-charger{
    background-image: url('https://getenergie.co.id/wp-content/uploads/2024/04/chuttersnap-xJLsHl0hIik-unsplash-2.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position:50%;
    
}
.ev-charger .product-contents{top:168px;}
.product-contents{
    position: relative;
    background:var(--c2);
    width:700px;
    padding:0.7em 2em 0.9em 2em;
    box-sizing: border-box;
    border-radius: 10px;
    box-shadow:1px 1px 6px var(--c4);
    left:10vw;
}
.product-contents h2{
    font-size:25pt;
    margin-top:0;
    margin-bottom:1rem;
}
.lighten{width:100%;height:90vh;position:absolute}
.solar-panel-catalog .lighten{
    /* background-image: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 43%, rgba(255,255,255,1) 103%); */
}
/*@media(min-width:800px){
    svg.catalog-top-bg {
        height:60%;
    }
}
@media(min-width:480px){
    svg.catalog-top-bg {
        height: 80%;
    }
}
@media(min-width:900px){
    svg.catalog-top-bg {
        width:100%;
        height:auto;
    }
}*/
@media(max-width:980px){
    svg.catalog-top-bg {
        display: none;
    }
    .catalog-top-caption {
        color: var(--c1);
    }
}
@media(max-width:800px){
    .container {
        margin-top: 70px;
    }
    .catalog-top{padding: 1.5em;}
    .catalog-top h1 {
        font-size: 24pt;
    }
    
    .catalog-top-caption {
        width: 100%;
        color: var(--c1);
        left: 20px;
    }
    .product-contents {
        width: 90%;
        left: 0;
        margin: auto;
    }
}
@media(min-width:560px){
    .product-contents {
        width: 700px;
        margin:0;
        left:10vw;
    }
}