/* banner */
.banner{
    background-color: #feaf0a;
    color: #fff;
    width:100%;
    margin-top:0;
}

.banner p {
    margin:0;
    text-align:center;
    padding:26px;
    font-family: var(--secondary-font);
    font-weight:600
}

.banner a {
    color:var(--accent-1)
}


.banner-area{
    min-height:600px;
    width:100vw;
    text-align: center;
    background-image: url(/img/hero_candles.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    color:#fff;
    padding-top:40px;
    
}

.banner-area .text-cont{
    display: inline-block;
    background:#33333366;
    padding:20px 120px 40px 120px;
    border-radius:4px;
    vertical-align: middle;
    margin-top:50px;
    animation-name: fadeIn;
    z-index:1;
    /* animation-duration: 2s;
    animation-delay: 5s; */
    animation: fadeIn 0.7s linear 0s 1 normal backwards;
    /* filter: blur(2px); */
}

.banner-area p {
    font-weight: 700;
    animation: fadeIn 0.7s linear 0.2s 1 normal backwards;
}

.banner-area .sur-text {
    font-size:50px;
    margin-bottom:0;
    margin-top: 0;
}

.banner-area img {
    z-index:1;
    width:200px;
    filter: invert(1);
    animation: fadeIn 1s linear 0.7s 1 normal backwards;
}

.banner-area .sub-text {
    font-size:30px;
    margin-top:0;
}

.banner-area .cta {
    animation: fadeIn 0.7s linear 0.5s 1 normal backwards;
}

.welcome p {
    padding: 0 20px;
}

.product {
    cursor:pointer;
}

.product-cats{
    background:#f4f4f4;
}


.product-flex {
    display:flex;
    flex-wrap:wrap;
    /* justify-content: space-between; */
}

.product-flex .product{
    width:calc(25% - 40px);
    text-align: center;
    text-decoration: none;
    border-radius:4px;
    transition:0.2s;
    padding:20px;
    position: relative;
}

.product-flex .product:hover{
    background:#e9e9e9;

}

.product img{
    width:100px;
}

.product .title {
    font-weight:700;
    color:var(--accent-1);
}

.product .text{
    color:#000;
    margin: 20px;
    padding-bottom:10px;
}


.product hr{
    background:var(--accent-2);
    height:2px;
    border:0;
    width:60%;
    position: absolute;
    bottom:0;
    left:20%;
    transition:0.2s;
}


.product:hover hr{
    width:80%;
    left:10%;
}

.product-lines .cta,
.product-cats .cta{
    text-wrap: nowrap;
    text-align: center;
    margin:15px calc(50vw - 100px);
    width:120px;
    box-sizing: border-box;
    display:inline-block;
}


@media (max-width:1000px){
    .product-flex .product{
        width:calc(33% - 40px);
    }
}

@media (max-width:680px){
    .product-flex .product{
        width:calc(50% - 40px);
    }
}

@media (max-width:590px){
    .banner-area .text-cont{
        padding: 20px 40px;
    }
}

@media (max-width:450px){
    .product-flex .product{
        width:calc(100% - 40px);
    }
}

@media (max-width:350px){
    .banner-area .text-cont{
        padding: 20px 10px;
        margin:0;
    }
}