/**
 * Banner Block - Frontend Styles
 * These styles are loaded on the frontend
 */

.banner-block { position: relative; overflow-y: hidden;}
.banner-top-animation {position: absolute;top: 90px;right: 0;z-index: 1;max-width: 256px;width: 100%;}
.banner-block-wrap {max-width: 823px;margin: 0;width: 100%;}
.banner-block {padding: 90px 0;}
.button-wrap {margin: 34px 0 0 0;display: flex;flex-wrap: wrap;gap: 16px;}
.banner-content p { width: 100%;}
.banner-content .button-wrap .button a.btn.btn-primary-transparent {padding: 12px 61px;}
.banner-content h1 span {color: var(--light-red-color);}
.banner-top-animation svg { width: 100%; height: 100%; }

/*Responsive Css Start Here*/
@media only screen and (max-width: 1024px) {
    .banner-block {padding: 70px 0;}
    .banner-top-animation {top: 60px;max-width: 160px;}
}
@media only screen and (max-width: 991px) {
    .banner-block-wrap { max-width: 590px; margin: 0; width: 100%; }
}

@media only screen and (max-width: 767px) {
    .banner-block {padding: 40px 0;}
    .button-wrap { gap: 12px; }
    .banner-content .button-wrap .button a.btn.btn-primary-transparent { padding: 12px 20px; }
    .banner-top-animation { top: 80px; max-width: 150px; height: 120px; bottom: 0; right: -20px; }
    
}
@media only screen and (max-width: 575px) {
    .banner-top-animation { top: 45%; max-width: 100px; height: 80px; bottom: 0; right: -40px; transform: translateY(-50%); }
}