/* =========================================
   ABOUT SECTION
========================================= */

.about-section{
    position:relative;
    padding:0px 0px 80px;
}

.about-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:4rem;
    align-items:center;
    margin-top:3rem;
}

/* =========================================
   LEFT CONTENT
========================================= */

.about-text{
    min-width:0;
}

.about-text p{
    font-size:.96rem;
    line-height:1.9;
    color:var(--muted);
	margin-bottom:6px;
}

/* =========================================
   COMMON TITLE
========================================= */

.s-tag{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 16px;
    border-radius:100px;
    background:rgba(82,66,216,.08);
    color:var(--primary);
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    margin-bottom:1rem;
}

.s-title{
    font-size:clamp(2rem,4vw,3rem);
    line-height:1.1;
    font-weight:800;
    color:var(--deep);
    margin-bottom:1.3rem;
    font-family:'Syne',sans-serif;
}

.s-title span{
    color:var(--primary);
}

/* =========================================
   WHY LABEL
========================================= */

.why-label{
    font-family:'Syne',sans-serif;
    font-size:1.15rem;
    font-weight:700;
    color:var(--deep);
    margin-bottom:1.2rem;
}

/* =========================================
   NON CAROUSEL GRID
========================================= */

.why-cards{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1rem;
}

/* =========================================
   OWL CAROUSEL
========================================= */

.why-carousel{
    width:100%;
    overflow:hidden;
}

.why-carousel .owl-stage-outer{
    overflow:hidden;
}

.why-carousel .owl-stage{
    display:flex;
}

.why-carousel .owl-item{
    height:auto;
}

.why-carousel .item{
    display:flex;
    flex-direction:column;
    gap:1rem;
    height:100%;
}

/* =========================================
   CARD
========================================= */

.why-card{
    position:relative;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    text-align:center;

    min-height:180px;

    background:#fff;
    border:1px solid var(--border);

    border-radius:18px;

    padding:1.8rem 1.3rem;

    box-shadow:var(--shadow);

    transition:all .3s ease;

    overflow:hidden;
}

.why-card:hover{
    transform:translateY(-6px);
    border-color:rgba(82,66,216,.25);
    box-shadow:0 15px 40px rgba(0,0,0,.08);
}

/* =========================================
   CARD IMAGE
========================================= */

.why-card img{
    width:100px;
    height:100px;

    object-fit:contain;

    margin:0 auto 1rem;

    display:block;
}

/* =========================================
   CARD TEXT
========================================= */

.why-card p{
    margin:0;

    font-size:.92rem;
    font-weight:700;

    line-height:1.5;

    color:var(--navy);

    word-break:break-word;
}

/* =========================================
   OWL DOTS
========================================= */

.why-carousel .owl-dots{
    margin-top:1.5rem;
    text-align:center;
}

.why-carousel .owl-dot span{
    width:10px;
    height:10px;
    margin:5px;

    background:#d4d4d8 !important;

    border-radius:50%;

    transition:.3s;
}

.why-carousel .owl-dot.active span{
    width:28px;
    border-radius:30px;
    background:var(--primary) !important;
}

/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:991px){

    .about-grid{
        grid-template-columns:1fr;
        gap:3rem;
    }

}

@media(max-width:767px){
	.media-slider img,.about-img img{
		height:350px;
	}

    .why-card{
        min-height:160px;
    }

    .s-title{
        font-size:2rem;
    }

}
@media(min-width:768px){
	.media-slider img,.about-img img{
		height:450px;
	}
}
.media-slider img,.about-img img{
	object-fit:cover;
	width:100%;
	border-radius:10px;
}
.media-slider video,.about-video video{
	border-radius:10px;
}