@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

/* width */
::-webkit-scrollbar {
    width: 8px;
    background: #ffffff;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #bc2e31;
    border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #b30000;
}

/* gtranslate css */

.gt_float_switcher img {
    width: 22px !important;
}

.gt_float_switcher .gt-selected .gt-current-lang {
    padding: 5px 10px !important;
}

.gt_float_switcher .gt_options a {
    font-size: 14px !important;
}

span.gt-lang-code {
    font-size: 14px !important;
}

/* gtranslate css */
body {
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Outfit", sans-serif;
    color: #323232;
}

.themeColor {
    color: #bc2e31 !important;
}

p,
span,
strong {
    font-family: "Outfit", sans-serif;
}

p {
    font-weight: 300;
    margin: 0;
    font-size: 16px;
}

a {
    font-family: "Outfit", sans-serif;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul li {
    font-family: "Outfit", sans-serif;
}

.main {
    width: 85%;
    margin: 0 auto;
}

/* hero section */

section#hero {
    position: relative;
}

.slider-wrap {
    background: #3d3d3d;
    height: 550px;
    overflow: hidden;
}

.swiper-slide--inner {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.slider-wrap .swiper-slide {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.slide--bg {
    z-index: 0;
    visibility: inherit;
    font-weight: 400;
    white-space: nowrap;
    background-color: #00000073;
    width: 100%;
    height: 100%;
    display: flex;
    position: absolute;
    overflow: auto;
    overflow: hidden;
}

.swiper-slide-active .slide--bg {
    animation: zoomInBg 1.5s ease forwards;
}

.slide--bg .slide-bg--inner {
    width: 550px;
    height: 550px;
    background: #00000070;
    margin: auto;
    border-radius: 50%;
}

.slider-wrap .swiper-slide-active .slide--bg .slide-bg--inner {
    animation: zoomInInner 1s ease forwards;
}

.slide-detail {
    position: relative;
    z-index: 1;
    text-align: center;
}

.slide-main--heading {
    display: block;
    text-align: center;
    color: #fff;
    line-height: normal;
    padding: 0px 0px 23px;
    font-weight: 700;
    font-size: 52px;
    white-space: normal;
    text-transform: capitalize;
}

.from-left,
.from-right {
    opacity: 0;
    /* filter: blur(4px); */
    transition: opacity 0.5s ease, filter 0.5s ease;
    color: #bc2e31;
    text-transform: uppercase;
    font-weight: 800;
}

.slider-wrap .swiper-slide-active .from-left {
    animation: fadeInLeft 1s ease forwards;
    animation-delay: 0.8s;
}

.slider-wrap .swiper-slide-active .from-right {
    animation: fadeInRight 1s ease forwards;
    animation-delay: 1s;
}

.slide-des {
    text-align: center;
    line-height: 25px;
    border-width: 0px;
    padding: 0px 0px 25px;
    letter-spacing: 1px;
    font-weight: 500;
    font-size: 18px;
    white-space: normal;
    min-height: 0px;
    min-width: 347px;
    max-height: none;
    max-width: 347px;
    color: #fff;
    margin: auto;
    opacity: 0;
    /* filter: blur(4px); */
    text-transform: uppercase;
}

.slider-wrap .swiper-slide-active .slide-des {
    transition: opacity 0.5s ease, filter 0.5s ease;
    animation: fadeInUp 1s ease forwards;
    animation-delay: 1.4s;
}

/* Keyframe animations for Badge */
@keyframes fadeInUp3 {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* Keyframe animations for CTA */
@keyframes fadeInUp2 {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* Keyframe animations for Description */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(-50px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* Keyframe animations for Sub Heading */
@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-50px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* Keyframe animations for Main Heading */
@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }
}

/* Keyframe animations for background */
@keyframes zoomInBg {
    from {
        opacity: 0;
        transform: scale(0.5);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes zoomInInner {
    from {
        opacity: 0;
        transform: scale(0.5);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.parallax-slider .slide-btns {
    width: 54px;
    height: 54px;
    background: 0 0;
    border: 1px solid rgba(255, 255, 255, .2);
    -webkit-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
    border-radius: 50%;
    font-size: 16px;
    font-weight: 900;
}

.slide-btns.swiper-button-next:after,
.slide-btns.swiper-button-prev:after {
    font-size: 16px;
    font-weight: 900;
    color: #fff;
}

.slide-btns:hover {
    border: 1px solid #fff;
    background: #fff;
}

.slide-btns:hover:after {
    color: #232323;
}

span.swiper-pagination-bullet {
    width: 16px;
    height: 16px;
    background: transparent;
    background-color: transparent;
    box-shadow: inset 0 0 0 2px #fff;
    -webkit-transition: background .3s ease;
    transition: background .3s ease;
    opacity: 1;
    display: none;
}

span.swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: #fff;
}

.autoplay-progress {
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 10;
    width: 100%;
    height: 10px;
}

.progress-fill {
    --progress: 0;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    height: 100%;
    background-color: #00000026;
    width: var(--progress, 0%);
    transition: width 0.5s ease;
}

/* ==================== Responsive Ipad ========================== */
@media only screen and (max-width: 981px) {
    .slider-wrap {
        height: 750px;
        background: #3d3d3d;
    }

    .slide--bg {
        min-height: 720px;
        min-width: 720px;
        max-height: 720px;
        max-width: 720px;
    }

    .slide--bg .slide-bg--inner {
        width: 590px;
        height: 590px;
    }

    .slide-badge {
        right: -116px;
    }
}

/* ==================== Responsive Ipad ========================== */
@media only screen and (max-width: 480px) {
    .slider-wrap {
        height: 445px;
        background: #3d3d3d;
    }

    .slide--bg {
        min-height: 550px;
        min-width: 550px;
        max-height: 550px;
        max-width: 550px;
    }

    .slide--bg .slide-bg--inner {
        width: 450px;
        height: 450px;
    }

    .parallax-slider .slide-btns {
        display: none;
    }

    .slide-main--heading {
        font-size: 32px;
    }

    .slider-wrap .swiper-pagination {
        display: flex;
        column-gap: 15px;
        justify-content: center;
        bottom: 100px !important;
    }

    span.swiper-pagination-bullet {
        display: block;
    }

}

/* hero section */

/* about section */
section#about {
    padding: 50px 0 0;
    position: relative;
}

.aboutBox h1 {
    position: relative;
    font-size: 30px;
    text-align: center;
    text-transform: uppercase;
}

span.words {
    color: #bc2e31;
}

.aboutBox p {
    text-align: center;
}

.credentials {
    position: relative;
    height: 300px;
    background: url(/assets/images/productsbanner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    display: grid;
    align-items: center;
    padding: 40px 0;
}

.credentials .row {
    height: 100%;
    align-items: center;
}

.credentials .row .col-md-3 {
    display: grid;
    align-items: center;
}

.credentials .row .col-md-3:nth-child(1) {
    border-right: 1px solid #fff;
    position: relative;
    z-index: 999;
}

.credentials .row .col-md-3:nth-child(2) {
    border-right: 1px solid #fff;
    position: relative;
    z-index: 999;
}

.credentials .row .col-md-3:nth-child(3) {
    border-right: 1px solid #fff;
    position: relative;
    z-index: 999;
}

.credsFilter {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #0000006b;
}

.counter-box {
    text-align: center;
    position: relative;
    z-index: 999;
}

.counter-box span {
    color: #ffffff;
    font-size: 40px;
    line-height: 45px;
}

.counter-desc {
    font-size: 14px;
    color: #ffffff;
    font-weight: 500;
    text-transform: uppercase;
}

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

.counter {
    font-size: 30px;
    text-align: center;
    color: #ffffff;
    font-weight: 600;
}

/* about section */

/* solutions section start */

.mySwipercats h4 {
    font-size: 15px;
    margin: 6px 0 0 0;
    text-transform: uppercase;
}

/* new css */

section#solutions {
    position: relative;
}

.slidetxtBox {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 55%;
    transform: translate(-50%, -30%);
    text-align: center;
}

.slidetxtBox h3 {
    margin: 0;
    color: #fff;
    font-size: 38px;
    font-weight: 600;
    line-height: 40px;
}

.slide-navigation ul {
    display: flex;
    list-style: none;
    justify-content: space-evenly;
    padding: 0;
    width: 85%;
    margin: 0 auto;
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -90%);
}

.slide-navigation ul li {
    color: #fff;
    font-size: 14px;
    padding: 0 0 2px 0;
    border-bottom: 2px solid #a1a1a1;
    font-weight: 400;
}

/* solutions section end */

/* product range section start */

.prangeHome {
    display: none;
}

section#productRange {
    padding: 40px 0 0 0;
    background: #ffffff;
}

.rangeSwiper {
    width: 80%;
    height: 60%;
    margin-left: auto;
    margin-right: auto;
}

.rangeSwiper .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    height: 100%;
    color: #000;
    /* 	transform: scale(0.8); */
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    transition: 0.3s all;
    box-shadow: 0 0 20px #00000036;
    border-radius: 10px;
}

.rangeSwiper .swiper-slide:not(.swiper-slide-prev):not(.swiper-slide-active):not(.swiper-slide-next) {
    opacity: 0;
}

.rangeSwiper .swiper-slide-prev,
.rangeSwiper .swiper-slide-next {
    opacity: 0.3;
}

.rangeSwiper .swiper-slide-active {
    transition: 0.3s all;
    opacity: 1;
}

#rangeWrapper {
    display: flex;
    width: 100%;
    gap: 5px;
}

/* Card Styles */
.rangeCard {
    flex: 1;
    height: 350px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    transition: flex 0.5s ease-in-out, transform 0.5s;
    display: flex;
    justify-content: start;
    align-items: end;
    padding: 35px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.rangeCardOverlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #0000007a;
    top: 0;
    left: 0;
}

.rangeCard:hover {
    flex: 8;
}

.rangeCard .rangeCardcontent {
    color: white;
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    position: relative;
    z-index: 99;
}

.rangeCard .rangeCardcontent h3 {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    word-spacing: 2px;
    font-size: 28px;
}

.rangeCard .rangeCardcontent p {
    text-align: justify;
}

.rangeCard .rangeCardcontent a.readMore {
    color: #fff;
    text-decoration: none;
    transition: 0.3s ease-in-out;
}

.rangeCard .rangeCardcontent a.readMore:hover {
    color: #bc2e31;
}

.rangeCard:hover .rangeCardcontent {
    opacity: 1;
    transition-delay: 0.5s;
    transform: translateX(0px);
}

.rangeCard::before {
    content: attr(data-label);
    position: absolute;
    top: 0;
    left: 0;
    font-size: 16px;
    color: #3d3d3d;
    font-weight: 500;
    opacity: 0.8;
    width: 100%;
    background: #fff;
    font-family: system-ui;
    z-index: 99;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}

/* Responsiveness */
@media (max-width: 768px) {
    .card-container {
        flex-direction: column;
        gap: 15px;
    }

    .rangeCard {
        height: 200px;
    }
}

#rangeWrapper .rangeCard:nth-child(1) {
    background-image: url("https://creativesoundconcepts.webastyle.com/assets/images/loudspeaker.webp");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 10;
}

#rangeWrapper .rangeCard:nth-child(2) {
    background-image: url("https://creativesoundconcepts.webastyle.com/assets/images/subwoofer.webp");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 20;
}

#rangeWrapper .rangeCard:nth-child(3) {
    background-image: url("https://creativesoundconcepts.webastyle.com/assets/images/linearray.webp");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 30;
}

#rangeWrapper .rangeCard:nth-child(4) {
    background-image: url("https://creativesoundconcepts.webastyle.com/assets/images/amplifier.webp");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 40;
}

#rangeWrapper .rangeCard:nth-child(5) {
    background-image: url("https://creativesoundconcepts.webastyle.com/assets/images/bluredspeakers.webp");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 50;
}

#rangeWrapper .rangeCard:nth-child(6) {
    background-image: url("https://creativesoundconcepts.webastyle.com/assets/images/stagemonitor.webp");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 50;
}

#rangeWrapper .rangeCard:nth-child(7) {
    background-image: url("https://creativesoundconcepts.webastyle.com/assets/images/ceilingpeaker.webp");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 50;
}

/* Solutions css homepage */

.productContainer p {
    text-align: center;
}

.productCard {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 0px 7px -1px, rgba(0, 0, 0, 0.3) 0px 0px 3px -1px;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle, rgba(255, 255, 255, 1) 24%, rgba(195, 195, 195, 1) 100%);
}

.productCard img {
    width: 100% !important;
    height: 100% !important;
    transition: transform 0.3s ease-in-out;
    object-fit: cover;
}

.productCard:hover img {
    transform: scale(1.1);
}

.productCard h4 {
    color: #fff;
    margin: 0;
    position: absolute;
    width: 100%;
    background: #0000008f;
    top: 0;
    padding: 5px 0;
    font-size: 20px;
    text-transform: uppercase;
}

.productCard .overlay-content {
    position: absolute;
    top: 0%;
    left: 0%;
    background: #0000008f;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 40px;
    color: #fff;
    text-align: center;
}

.productCard:hover .overlay-content {
    opacity: 1;
}

.productCard a {
    text-decoration: none;
}

.productCard a h4 {
    font-size: 14px;
    margin: 0;
    color: #323232;
    text-transform: uppercase;
    position: absolute;
    left: 50%;
    top: 82%;
    transform: translate(-50%, 0px);
    text-align: center;
}

.productCard a p {
    color: #fff;
    margin: 10px 0 0 0;
    font-size: 14px;
}

/* product range section end */

/* series section starts */

section#hSeries {
    padding: 40px 0 30px 0;
    position: relative;
    background: #f1f1f1;
}

.swiper.mySwiperseries {
    height: auto !important;
    padding: 0 0 10px 0;
}

.seriesBox {
    position: relative;
    z-index: 9;
}

.seriesBox h3 {
    color: #323232;
}

.seriesBox p {
    color: #323232;
    text-align: center;
}

.catBox h4 {
    position: absolute;
    top: 0;
    text-align: center;
    margin: 0;
    width: 100%;
    background: #ffffff;
    opacity: 0.8;
    font-size: 16px;
    text-transform: uppercase;
    padding: 10px 0;
    font-family: system-ui;
    font-weight: 500;
}

/* series section ends */

/* clients section css start */
section#clients {
    background: #f1f1f1;
    position: relative;
    padding: 40px 0;
}

.swiper.myclientSwiper {
    height: auto !important;
}

.clientaleBox p {
    text-align: center;
}

/* clients section css end */

/* application section css starts */

section#applications {
    position: relative;
    padding: 40px 0;
}

.appsBox p {
    text-align: center;
}

/* application section css ends */

/* application section start */
.heading {
    margin: 0;
    text-align: center;
    text-transform: uppercase;
    font-size: 24px;
    position: relative;
    z-index: 9;
}

/* application section snd */

/* category section */

section#categories {
    background: #f1f1f1;
    padding: 40px 0 0;
    position: relative;
}

.swiper.mySwipercats {
    height: auto !important;
}

.categorySlider h3 {
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
    word-spacing: 5px;
}

.categorySlider p {
    text-align: center;
}

.catBox {
    position: relative;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.catBox p {
    font-size: 14px;
}

.overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgb(0 0 0 / 50%);
    overflow: hidden;
    width: 100%;
    height: 100%;
    transform: translateY(100%);
    transition: transform 0.5s ease;
}

.catBox .overlay .text p {
    text-align: center;
}

.swiper-slide:hover .overlay {
    transform: translateY(0);
}

.text {
    color: white;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    padding: 25px;
}

.text h4,
.text p {
    color: #fff;
}

.text a.downloadBtn {
    font-size: 11px !important;
    padding: 2px 10px !important;
    border: 1px solid #fff;
    color: #fff;
}

/* category section */

/* Product section */

section#Products {
    padding: 80px 0 80px;
    background: #ededed;
}

.section-head {
    text-align: center;
}

h3.sec-heading {
    text-align: center;
    text-transform: uppercase;
    font-weight: 400;
    word-spacing: 5px;
    color: #bc2e31;
}

.redirect-page a {
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    font-weight: 500;
}

.theProduct {
    padding: 30px;
    display: flex;
    align-items: start;
    background: url(/assets/images/home-product-bg.png);
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    position: relative;
}

.theProduct a {
    width: 50%;
}

.theProduct a button {
    position: absolute;
    bottom: 30px;
    border: 0;
    background: #bc2e31;
    color: #fff;
    padding: 6px 20px;
    font-size: 12px;
}

.theProduct img {
    width: 50%;
    margin: 0 0 0 auto;
}

.ptext {
    font-size: 16px;
    font-weight: 500;
    color: #bc2e31;
}

.tagLine {
    font-size: 12px;
}

.product-box {
    position: relative;
    width: 100%;
    background: #f1f1f1;
    padding-top: 0 !important;
    height: 100%;
    transition: 0.3s ease-in-out;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.product-box:hover {
    transform: translateY(-5px);
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.product-box img {
    width: 100%;
    height: auto;
    transition: transform 0.5s ease;
    /* transform: scale(0.8); */
}

/* Product section */

/* application section */
section#Applications {
    padding: 100px 0;
}

.sec-title h3 {
    text-align: center;
    text-transform: uppercase;
    word-spacing: 5px;
    font-weight: 600;
}

.appBox {
    position: relative;
    height: auto;
    width: 100%;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.appBox h5 {
    text-align: center;
    margin: 0;
    position: absolute;
    top: 0;
    left: 50%;
    background-color: #ffffff;
    width: 100%;
    transform: translate(-50%, 0px);
    padding: 10px 0;
    font-size: 16px;
    text-transform: uppercase;
    line-height: 30px;
    font-family: system-ui;
    opacity: 0.8;
}

.appBox img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.appOverlay {
    position: absolute;
    bottom: -60px;
    left: 0;
    right: 0;
    background-color: rgb(0 0 0 / 70%);
    overflow: hidden;
    width: 100%;
    height: 0;
    transition: .5s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 0 60px 0;
}

.appBox:hover .appOverlay {
    height: 100%;
    bottom: -50px;
}

.appText {
    text-align: center;
}

.appText p {
    color: white;
    font-size: 16px;
    text-align: center;
    padding: 0 30px;
    margin: 0;
}

/* .appText a {
    color: #fff;
    font-size: 12px;
    text-align: center;
    border: 1px solid #fff;
} */

/* CSS */
.button-38 {
    background-color: #FFFFFF;
    border: 0;
    border-radius: .5rem;
    box-sizing: border-box;
    color: #111827;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 500;
    padding: .5rem 1rem;
    text-align: center;
    text-decoration: none #D1D5DB solid;
    text-decoration-thickness: auto;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.button-38:hover {
    background-color: rgb(249, 250, 251);
    text-decoration: none;
    color: #bc2e31;
}

.button-38:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    text-decoration: none;
    color: #bc2e31;
}

.button-38:focus-visible {
    box-shadow: none;
    text-decoration: none;
    color: #bc2e31;
}

/* application section */

/* footer */

footer#csc {
    background: #323232;
    position: relative;
}

.footer-wrap {
    display: grid;
    grid-auto-rows: 1fr;
    grid-template-columns: 1fr 1fr 1fr;
}

.footer-wrap .footer-one,
.footer-wrap .footer-three,
.footer-wrap .footer-four {
    display: block;
    padding: 40px;
    border-right: 1px solid #5a5a5a;
}

.footer-one h3 {
    color: #bc2e31;
    font-size: 25px;
}

.footer-one .card-header {
    transition: 0.3s ease-in-out;
}

.footer-one .card-header:hover {
    background-color: #fff;
}

.footer-one .card-header:hover a.btn-block {
    color: #bc2e31;
}

.footer-four .card-header {
    transition: 0.3s ease-in-out;
}

.footer-four .card-header:hover {
    background-color: #fff;
}

.footer-four .card-header:hover a.btn-block {
    color: #bc2e31;
}

a.btn-block {
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    transition: 0.3s ease-in-out;
}

.address-one h5 {
    margin: 15px 0;
    font-size: 16px;
}

.address-one p {
    font-size: 14px;
}

.address-two h5 {
    margin: 25px 0 15px 0;
    font-size: 16px;
}

.address-two p {
    font-size: 14px;
}

.resources h3 {
    color: #bc2e31;
    font-size: 25px;
}

.resources ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.resources ul li a {
    font-size: 14px;
}

.contactUs ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.contactUs ul li a {
    font-size: 14px;
}

.contactUs h3 {
    color: #bc2e31;
    font-size: 25px;
}

ul.social {
    display: flex;
    align-items: center;
}

ul.social li a {
    display: flex;
    align-items: center;
    margin: 0 15px 0 0;
    font-size: 20px;
    color: #ffffff;
    text-decoration: none;
    transition: 0.3s ease-in-out;
}

ul.social li a:hover {
    color: #bc2e31;
}

.copyrights {
    padding: 40px 0;
    border-top: 1px solid #5a5a5a;
}

.copyrights p {
    text-align: center;
    color: #ffffff;
    font-size: 16px;
}

.copyrights p strong {
    color: #bc2e31;
}

/* Button styles */
#backToTopBtn {
    display: none;
    position: fixed;
    bottom: 100px;
    right: 30px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: #ffffff;
    color: #bc2e31;
    cursor: pointer;
    border-radius: 50%;
    padding: 8px;
    line-height: 0;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

button#backToTopBtn i {
    font-size: 30px;
}

#backToTopBtn:hover {
    background-color: #ffffff;
}

/* footer ends*/

section#breadcrmb {
    background: #e3e3e3;
    padding: 10px 0;
}

.breadcrumbItems {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.breadcrumbItems p a {
    text-transform: uppercase;
}

.breadcrumbItems h1 {
    margin: 0;
    font-size: 20px;
}

/* internal pages css starts*/
.solutionVideo {
    position: relative;
    width: 100%;
    height: 75vh;
    overflow: hidden;
}

section.solutionVideo img {
    position: fixed;
    top: 0;
    width: 100%;
}

.solutionVoverlay {
    position: relative;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100%;
    width: 100%;
    padding: 70px 0 0 0;
    text-align: center;
}

.solutionVoverlay h1 {
    margin: 0;
    color: #fff;
    font-size: 70px;
    font-weight: 600;
    text-transform: uppercase;
}

.solutionVoverlay span {
    color: #fff;
    transition: 0.3s ease-in-out;
}

.solutionVoverlay span:hover {
    color: #fff;
    transform: translateY(-6px);
}

section#contentclubs {
    padding: 60px 0;
    position: relative;
    background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
}

/* .contentclubs-overlay {
    position: absolute;
    top: 0;
    left: 0;
    background: #00000094;
    width: 100%;
    height: 100%;
} */

.relaventProducttitle {
    padding: 30px 0 0 0;
    background: #fff;
    position: relative;
}

.clubBarbox {
    position: relative;
    z-index: 99;
}

.clubBarbox h2 {
    text-align: center;
    text-transform: uppercase;
    font-size: 28px;
    letter-spacing: 1px;
}

.title-box h3 {
    text-align: center;
    margin: 0;
    text-transform: uppercase;
}

section#loudSpeakers {
    padding: 30px 0;
    background: #fff;
    position: relative;
}

a.rel-slider-link {
    height: 100%;
    display: flex;
    align-items: center;
}

.relatedBoxcard {
    background: #f1f1f1;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
    border-radius: 4px;
    height: 100%;
}

.relatedBoxcard h4 {
    font-size: 12px;
    text-transform: uppercase;
    padding: 0 0 10px 0;
}

section#subwoofers {
    background: #fff;
    position: relative;
}

section#amplifiers {
    padding: 30px 0 60px 0;
    background: #fff;
    position: relative;
}

section#rangeBnner {
    position: relative;
    height: 75vh;
}

section#rangeBnner img {
    position: fixed;
    width: 100%;
    top: 0;
}

.rangeBnneroverlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 70px 0 0;
}

.rangeBnneroverlay h1 {
    color: #fff;
    font-size: 70px;
    text-transform: uppercase;
    font-weight: 600;
}

.rangeBnneroverlay span {
    color: #fff;
    transition: 0.3s ease-in-out;
}

.rangeBnneroverlay span:hover {
    transform: translateY(-6px);
}

section#rangeContnt {
    position: relative;
    padding: 60px 0 70px 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
}

.tangeCntBox h2 {
    text-align: center;
    color: #fff;
    font-size: 28px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.tangeCntBox p {
    color: #fff;
    text-align: justify;
}

section#subRange {
    position: relative;
    background: #fff;
    padding: 60px 0;
}

/* internal pages css ends  */

/* Single product section css */

section#single {
    padding: 50px 0;
}

.product-gallery {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
}

.main-image {
    position: relative;
    overflow: hidden;
    /* padding: 0 0 0 15px; */
    background: #f1f1f1;
}

.main-image img {
    width: 600px;
    height: auto;
    transition: transform 0.3s ease;
}

.main-image img.zoom {
    transform: scale(1.8);
    cursor: zoom-in;
}

.thumbnails {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;
    padding: 0 15px 0 0;
    gap: 10px;
}

.thumbnails img {
    width: 100px;
    transition: transform 0.2s ease;
    cursor: pointer;
    position: relative;
    border: 1px solid transparent;
}

.thumbnails img:hover {
    border: 1px solid #c9c9c9;
}

img.active-thumbnail {
    border: 1px solid #c9c9c9;
}

.thumbnail {
    width: 100px;
    height: auto;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.productInfobox h1 {
    font-size: clamp(20px, calc(1.5rem + ((1vw - 7.68px) * 1.1905)), 24px);
    text-transform: uppercase;
    font-weight: 600;
    color: #323232;
    margin: 0;
}

.productInfobox p {
    font-weight: 400;
    text-align: justify;
}

button#download-pdf {
    border: 0;
    padding: 8px 20px;
    border-radius: 8px;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 500;
    background: #bb1519;
    color: #fff;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.keyfeatures h4 {
    font-size: 22px;
}

.keyfeatures ul {
    list-style: circle;
    padding: 0 0 0 18px;
}

.applications h4 {
    font-size: 22px;
}

.applications ul {
    list-style: circle;
    padding: 0 0 0 18px;
}

section#navTabss {
    position: sticky;
    top: 80px;
    z-index: 999;
}

nav.secTarget {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
    background: #f1f1f1;
    margin: 0 0 30px 0;
    flex-wrap: nowrap;
}

nav.secTarget a {
    color: #5f5f5f;
    padding: 0 15px;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 14px;
    transition: 0.3s ease-in-out;
}

nav.secTarget a:hover {
    color: #bc2e31;
}

nav.secTarget a.active {
    color: #bc2e31;
}

nav.secTarget a:nth-child(2) {
    border-left: 1px solid #999999;
    border-right: 1px solid #999999;
}

nav.secTarget a:nth-child(3) {
    border-right: 1px solid #999999;
}

section#pOverview {
    padding: 90px 0;
}

section#aboutSeries {
    padding: 40px 0 0 0;
}

/* Single product section css */

section#product_desc {
    padding: 40px 0;
}

.descBox {
    text-align: justify;
}

ul.features {
    display: flex;
    justify-content: space-between;
    margin: 0;
}

ul.features li {
    padding: 30px;
    background: #fff;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    border-radius: 20px;
    text-align: center;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s ease-in-out;
    text-transform: uppercase;
}

ul.features li:hover {
    transform: translateY(-5px);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

ul.features li img {
    width: 35px;
    margin: 0 10px 0 0;
}

div#product-filters {
    z-index: 999;
    background: #f8f9fa;
    padding: 30px;
    border-radius: 10px;
}

.search-box {
    width: 26%;
}

div#results {
    position: absolute;
    width: 100%;
    z-index: 9999;
    background: #fff;
    top: auto;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

div#results .media p {
    font-size: 13px;
}

.product {
    padding: 5px 10px;
    background: #fff;
}

.filter-dropdowns {
    padding: 20px 20px;
    background: #323232;
    border-radius: 45px;
}

.filterSidebar {
    margin: 0 0 30px 0;
}

section#singleProduct {
    padding: 0 0 30px 0;
    background: #e3e3e3;
}

section#pOverview {
    padding: 60px 0;
    background: #e1e1e1;
}

section#techSpec {
    padding: 40px 0;
    background: #efefef;
}

section#downloads {
    padding: 40px 0;
}

section#downloads h4 {
    font-size: 20px;
}

.downloadBox {
    background: #e1e1e1;
    padding: 8px;
}

.downloadBox h3 {
    margin: 0;
}

section#combinatons {
    background: #efefef;
    padding: 40px 0;
}

.clear-filters {
    cursor: pointer;
}

.filterheading {
    background: #f8f9fa;
    padding: 0 30px 30px 30px;
}

.p360view {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.viewBox {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    cursor: grab;
}

select#category-filter {
    color: #adadad;
    font-weight: 200;
}

select#series-filter {
    color: #adadad;
    font-weight: 200;
}

select#application-filter {
    color: #adadad;
    font-weight: 200;
}

.clear-filters {
    background: #bc2e31 !important;
    border: 1px solid #bc2e31 !important;
}

select#category-filter option {
    font-size: 13px;
    text-transform: uppercase;
}

select#series-filter option {
    font-size: 13px;
    text-transform: uppercase;
}

select#application-filter option {
    font-size: 13px;
    text-transform: uppercase;
}

.product_description h2 {
    font-weight: 500 !important;
}

.product_description p {
    text-align: justify;
}

.product_description ul li {
    font-size: 14px;
}

.about-series p {
    text-align: justify;
}

section#relatedP {
    padding: 60px 0;
}

.swiper.simgleCats {
    width: 100%;
    height: auto;
}

img.img-fluid.related {
    border: 1px solid #e3e3e3;
}

section#productCombo {
    padding: 0 0 80px 0;
}

.warranty {
    padding: 40px;
    background: #f9f9f9;
    border-radius: 12px;
}

.faqs {
    padding: 40px;
    background: #f9f9f9;
    border-radius: 12px;
}

.caseStudies {
    padding: 40px;
    background: #f9f9f9;
    border-radius: 12px;
}

.technews {
    padding: 40px;
    background: #f9f9f9;
    border-radius: 12px;
}

.dosndonts {
    padding: 40px;
    background: #f9f9f9;
    border-radius: 12px;
}

.corpAv {
    padding: 40px;
    background: #f9f9f9;
    border-radius: 12px;
}

.pagebreadcrumb {
    position: relative;
    height: 350px;
    display: flex;
    align-items: center;
    background: url(../images/brdimg.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.bInner {
    position: relative;
    z-index: 999;
}

.bInner h1 {
    color: #fff;
    font-weight: 300 !important;
}

.bInner p {
    color: #fff;
    font-size: 22px;
}

.bInner p>a {
    color: #fff;
    font-size: 22px;
}

.boverlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #000000ba;
}

section#topdesc {
    padding: 60px 0;
}

section#missviss {
    padding: 80px 0;
    background: #f9f9f9;
}

.missionBox {
    padding: 40px;
    background: #fff;
    border-radius: 12px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    transition: 0.3s ease-in-out;
}

.missionBox:hover {
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    transform: translateY(-5px);
}

.visionBox {
    padding: 40px;
    background: #fff;
    border-radius: 12px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    transition: 0.3s ease-in-out;
}

.visionBox:hover {
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    transform: translateY(-5px);
}

.valuecards {
    display: flex;
    justify-content: center;
    column-gap: 30px;
    margin: 30px 0;
    height: 100%;
}

.valuecards .value {
    padding: 30px;
    width: 100%;
    height: auto;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    border-radius: 12px;
    text-align: center;
    transition: 0.3s ease-in-out;
}

.valuecards .value:hover {
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.text-center {
    text-align: center;
}

.color-white {
    color: #fff;
}

.box-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 35px 15px;
    width: 100%;
}

.box-item {
    position: relative;
    -webkit-backface-visibility: hidden;
    width: 100%;
    height: auto;
}

.flip-box {
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    perspective: 1000px;
    -webkit-perspective: 1000px;
}

.flip-box-front,
.flip-box-back {
    background-size: cover;
    background-position: center;
    border-radius: 12px;
    min-height: 381px;
    -ms-transition: transform 0.7s cubic-bezier(.4, .2, .2, 1);
    transition: transform 0.7s cubic-bezier(.4, .2, .2, 1);
    -webkit-transition: transform 0.7s cubic-bezier(.4, .2, .2, 1);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flip-box-front {
    -ms-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.flip-box:hover .flip-box-front {
    -ms-transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.flip-box-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    -ms-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.flip-box:hover .flip-box-back {
    -ms-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.flip-box .inner {
    position: absolute;
    left: 0;
    width: 100%;
    padding: 30px;
    outline: 1px solid transparent;
    -webkit-perspective: inherit;
    perspective: inherit;
    z-index: 2;
    transform: translateY(-50%) translateZ(60px) scale(.94);
    -webkit-transform: translateY(-50%) translateZ(60px) scale(.94);
    -ms-transform: translateY(-50%) translateZ(60px) scale(.94);
    top: 50%;
}

.flip-box-header {
    font-size: 22px;
    color: #fff;
    font-weight: 300 !important;
}

.flip-box p {
    font-size: 14px;
    line-height: 1.5em;
    margin: 0;
    color: #fff;
}

.flip-box-img {
    margin-top: 25px;
}

.flip-box-button {
    background-color: transparent;
    border: 2px solid #fff;
    border-radius: 2px;
    color: #fff;
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
    margin-top: 25px;
    padding: 15px 20px;
    text-transform: uppercase;
}

section#directorDesk {
    padding: 80px 0;
}

.directorBox p {
    text-align: justify;
}

.accordion-header {
    background-color: #f1f1f1;
    border: none;
    padding: 10px;
    text-align: left;
    cursor: pointer;
    width: 100%;
    outline: none;
    transition: background-color 0.3s ease;
}

.accordion-header:hover {
    background-color: #ddd;
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
    background-color: #f9f9f9;
    padding: 0 10px;
}

.accordion-content p {
    margin: 10px 0;
}

section#faqs {
    padding: 80px 0;
}

.faq-listing h4 {
    font-weight: 300 !important;
    font-size: 20px;
    margin: 0;
}

.faq-listing p {
    margin: 0;
}

/* contact us page css */
.mapBox iframe {
    width: 100%;
    height: 300px;
    line-height: 0;
    margin: 0;
    padding: 0;
}

section#globalOffice {
    padding: 40px 0;
}

.ctBox {
    padding: 30px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    height: 100%;
    background: #f1f1f1;
}

.ctBox h3 {
    font-size: 20px;
    font-weight: 500;
    color: #323232;
}

.ctBox p {
    font-size: 14px;
}

form#myForm input,
form#myForm textarea,
form#myForm select {
    box-shadow: none !important;
    border-radius: 0 !important;
    border-color: #323232 !important;
    font-size: 13px !important;
    color: #323232 !important;
}

section#contactForm {
    padding: 0 0 40px 0;
}

/* contact us page css */

/* single product page design css */
section#pBanner {
    position: relative;
    background: url(/assets/images/prod-bn-bg.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    height: 550px;
}

.product_desc span {
    color: #fff;
    font-weight: 200;
    font-size: 24px;
}

.product_desc h1 {
    font-weight: 600 !important;
    color: #bc2e31;
}

.product_desc p {
    margin: 0;
    color: #fff;
    font-size: 35px;
    line-height: 35px;
}

.divider {
    border-bottom: 2px solid #bc2e31;
    margin: 30px 0;
    width: 60%;
}

section#visual {
    padding: 100px 0;
    background: url(/assets/images/desktop-ver.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 700px;
    display: flex;
    align-items: center;
}

.vsBox h2 {
    font-size: 25px;
    font-weight: 600 !important;
    color: #bc2e31;
}

.vsBox .divider {
    width: 35%;
}

.vsBox p {
    margin: 0;
    color: #fff;
}

section#descBox {
    padding: 50px 0;
    background: #e9e9e9;
    border-bottom: 2px solid #bc2e31;
}

.dswrap .divider {
    width: 13%;
}

.dswrap h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 600 !important;
    color: #bc2e31;
}

ul.keyFeatures {
    margin: 0;
}

ul.keyFeatures li::marker {
    color: #bc2e31;
}

ul.applications {
    margin: 0;
}

ul.applications li::marker {
    color: #bc2e31;
}

table.spec-table th {
    position: relative;
    border-top: 0 !important;
}

table.spec-table td {
    position: relative;
    border-top: 0 !important;
}

a.btn.btn-block:focus {
    box-shadow: none !important;
}

.relatedP-box {
    padding: 30px;
}

.relatedP-box h4 {
    color: #bc2e31;
    font-size: 20px;
    text-align: left;
}

a.productWrap {
    height: 100%;
    display: block;
    position: relative;
}

.category span {
    text-transform: capitalize;
    color: #323232;
}

.usesfor {
    display: flex;
    align-items: center;
    border-top: 1px solid #323232;
    border-bottom: 4px solid #bc2e31;
}

.category p {
    font-style: italic;
    font-weight: 500;
    color: #323232;
    font-size: 14px;
}

.category p>span {
    color: #bc2e31;
    font-weight: 600;
    font-style: normal;
}

h5.label {
    color: #bc2e31;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
}

.productWrap h6 {
    font-size: 14px;
    font-weight: 300 !important;
    padding: 0;
    text-align: justify;
}

.box-one {
    padding: 10px;
    color: #323232;
    width: 23%;
    height: 100%;
}

.box-one span {
    font-size: 14px;
}

.box-two {
    border-left: 1px solid #323232;
    padding: 10px;
    color: #323232;
    width: 77%;
    height: 100%;
}

.box-two span {
    font-size: 12px;
    color: #bc2e31;
    text-transform: capitalize;
}

section#filters {
    margin: 35px 0 0 0;
}

.searchWrap {
    margin: 0 0 15px 0;
}

.filterWrap button {
    width: 15%;
    border-radius: 0;
    padding: 15px 0;
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 500;
    border-color: #bc2e31;
}

.rangeSelection.mt-4 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

a.whatsApp img {
    position: fixed;
    right: 30px;
    bottom: 30px;
    width: 47px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    border-radius: 50%;
    z-index: 9999;
}

/* Shake animation keyframes */
@keyframes shake {

    0%,
    100% {
        transform: translateX(0) !important;
    }

    20%,
    60% {
        transform: translateX(-10px) !important;
    }

    40%,
    80% {
        transform: translateX(10px) !important;
    }
}

/* Class to apply the animation */
.shake {
    animation: shake 0.5s ease-in-out !important;
    animation-iteration-count: infinite !important;
}

section#warranty {
    padding: 60px 0;
}

.wrannty-wrap h2 {
    text-transform: uppercase;
    text-align: center;
}

.wrannty-wrap h3 {
    font-size: 24px;
}

/* Solutions css homepage */

#wrapper {
    display: flex;
    width: 100%;
    gap: 5px;
}

/* Card Styles */
.solCard {
    flex: 1;
    height: 350px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    transition: flex 0.5s ease-in-out, transform 0.5s;
    display: flex;
    justify-content: start;
    align-items: end;
    padding: 35px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.solCardOverlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #0000007a;
    top: 0;
    left: 0;
}

.solCard:hover {
    flex: 8;
}

.solCard .content {
    color: white;
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    position: relative;
    z-index: 99;
}

.solCard .content h3 {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    word-spacing: 2px;
    font-size: 28px;
}

.solCard .content p {
    text-align: justify;
}

.solCard .content a.readMore {
    color: #fff;
    text-decoration: none;
    transition: 0.3s ease-in-out;
}

.solCard .content a.readMore:hover {
    color: #bc2e31;
}

.solCard:hover .content {
    opacity: 1;
    transition-delay: 0.5s;
    transform: translateX(0px);
}

.solCard::before {
    content: attr(data-label);
    position: absolute;
    top: 0;
    left: 0;
    font-size: 12px;
    font-weight: bold;
    color: #3d3d3d;
    opacity: 0.8;
    width: 100%;
    background: #fff;
    font-family: system-ui;
    z-index: 99;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}

/* Responsiveness */
@media (max-width: 768px) {
    .card-container {
        flex-direction: column;
        gap: 15px;
    }

    .solCard {
        height: 200px;
    }
}

#wrapper .solCard:nth-child(1) {
    background-image: url("https://creativesoundconcepts.webastyle.com/assets/images/auditorium.webp");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 10;
}

#wrapper .solCard:nth-child(2) {
    background-image: url("https://creativesoundconcepts.webastyle.com/assets/images/retails.webp");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 20;
}

#wrapper .solCard:nth-child(3) {
    background-image: url("https://creativesoundconcepts.webastyle.com/assets/images/hotels.webp");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 30;
}

#wrapper .solCard:nth-child(4) {
    background-image: url("https://creativesoundconcepts.webastyle.com/assets/images/gyms.webp");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 40;
}

#wrapper .solCard:nth-child(5) {
    background-image: url("https://creativesoundconcepts.webastyle.com/assets/images/bars.webp");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 50;
}

#wrapper .solCard:nth-child(6) {
    background-image: url("https://creativesoundconcepts.webastyle.com/assets/images/worship-place.webp");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 50;
}

#wrapper .solCard:nth-child(7) {
    background-image: url("https://creativesoundconcepts.webastyle.com/assets/images/live-show.webp");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 50;
}

#wrapper .solCard:nth-child(8) {
    background-image: url("https://creativesoundconcepts.webastyle.com/assets/images/institutions.webp");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 50;
}

/* Solutions css homepage */