/*======================================================
            WHY CHOOSE US SECTION
======================================================*/

.why-section{
    position:relative;
    padding:40px 0;
    background:linear-gradient(180deg,#f7fbff,#eef6ff);
    overflow:hidden;
}

.why-section::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    background:#0d6efd12;
    border-radius:50%;
    top:-180px;
    left:-170px;
}

.why-section::after{
    content:"";
    position:absolute;
    width:350px;
    height:350px;
    background:#27b4ff10;
    border-radius:50%;
    right:-120px;
    bottom:-120px;
}

.why-section .container{
    max-width:1320px;
    margin:auto;
    padding:0 15px;
    position:relative;
    z-index:2;
}



/*======================================================
                    HEADING
======================================================*/

.why-heading{
    text-align:center;
    margin-bottom:60px;
}

.why-tag{

    display:inline-block;

    padding:8px 20px;

    background:#e9f3ff;

    color:#0d6efd;

    font-size:13px;

    font-weight:700;

    border-radius:30px;

    letter-spacing:2px;

    margin-bottom:18px;
}

.why-heading h2{

    font-size:42px;

    font-weight:800;

    color:#183153;

    margin-bottom:15px;
}

.why-heading p{

    max-width:700px;

    margin:auto;

    color:#6d7685;

    line-height:1.8;

    font-size:17px;
}



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

.why-carousel{

    overflow:hidden;

    position:relative;

    width:100%;
}

.why-track{

    display:flex;

    gap:24px;

    transition:.55s ease;

    cursor:grab;

    user-select:none;
}



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

.why-card{

    flex:0 0 calc((100% - 48px)/3);

    background:#fff;

    border-radius:22px;

    text-decoration:none;

    padding:26px;

    border:1px solid #dbe9ff;

    box-shadow:0 12px 35px rgba(0,70,160,.08);

    position:relative;

    overflow:hidden;

    transition:.35s;
}



/* TOP BLUE LINE */

.why-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    background:linear-gradient(90deg,#1565ff,#24b8ff);
}



/* LIGHT CIRCLE */

.why-card::after{

    content:"";

    position:absolute;

    width:160px;

    height:160px;

    border-radius:50%;

    background:#0d6efd08;

    right:-70px;

    top:-70px;
}



/*======================================================
            ICON + TITLE
======================================================*/

.why-top{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:20px;
}



.why-icon{

    width:54px;

    height:54px;

    min-width:54px;

    border-radius:16px;

    background:linear-gradient(135deg,#1565ff,#39b8ff);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:22px;

    transition:.35s;

    box-shadow:0 12px 25px rgba(21,101,255,.25);
}



.why-top h3{

    margin:0;

    font-size:20px;

    color:#23395d;

    line-height:1.3;

    font-weight:700;
}



/*======================================================
                    LIST
======================================================*/

.why-card ul{

    margin:0;

    padding-left:22px;
}

.why-card ul li{

    color:#555;

    font-size:15px;

    line-height:1.8;

    margin-bottom:10px;
}



/*======================================================
                    HOVER
======================================================*/

.why-card:hover{

    transform:translateY(-8px);

    border-color:#1565ff;

    box-shadow:0 20px 45px rgba(0,90,200,.15);
}

.why-card:hover .why-icon{

    transform:rotate(12deg) scale(1.08);

    box-shadow:0 18px 35px rgba(21,101,255,.35);
}

.why-card:hover h3{

    color:#1565ff;
}





/*======================================================
                WHY CHOOSE US - CSS PART 2
======================================================*/


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

.why-dots{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    margin-top:40px;
}

.why-dot{
    width:12px;
    height:12px;
    border-radius:50%;
    background:#cfd8e6;
    cursor:pointer;
    transition:.35s ease;
}

.why-dot:hover{
    background:#4a8cff;
    transform:scale(1.15);
}

.why-dot.active{
    width:34px;
    border-radius:20px;
    background:linear-gradient(90deg,#1565ff,#24b8ff);
    box-shadow:0 6px 18px rgba(21,101,255,.35);
}



/*==========================
      SMOOTH EFFECT
==========================*/

.why-card,
.why-icon,
.why-dot,
.why-track{
    transition:all .35s ease;
}



/*==========================
      DRAGGING
==========================*/

.why-track.dragging{
    cursor:grabbing;
}

/* .why-track.dragging .why-card{
    pointer-events:none;
} */



/*==========================
    DESKTOP LARGE
==========================*/

@media(min-width:1200px){

.why-card{

    flex:0 0 calc((100% - 48px)/3);

}

}



/*==========================
        TABLET
==========================*/

@media(max-width:991px){

.why-section{

    padding:70px 0;

}

.why-heading{

    margin-bottom:45px;

}

.why-heading h2{

    font-size:34px;

}

.why-heading p{

    font-size:16px;

}

.why-track{

    gap:20px;

}

.why-card{

    flex:0 0 calc((100% - 20px)/2);

    padding:24px;

}

.why-top{

    gap:15px;

}

.why-top h3{

    font-size:18px;

}

.why-icon{

    width:48px;

    height:48px;

    min-width:48px;

    font-size:20px;

}

.why-card ul li{

    font-size:14px;

}

}



/*==========================
        MOBILE
==========================*/

@media(max-width:767px){

.why-section{

    padding:60px 0;

}

.why-heading{

    margin-bottom:35px;

}

.why-tag{

    font-size:12px;

    padding:7px 16px;

}

.why-heading h2{

    font-size:28px;

}

.why-heading p{

    font-size:15px;

    line-height:1.7;

}

.why-track{

    gap:15px;

}

.why-card{

    flex:0 0 100%;

    padding:22px;

}

.why-top{

    align-items:flex-start;

    gap:14px;

}

.why-top h3{

    font-size:17px;

    line-height:1.4;

}

.why-icon{

    width:46px;

    height:46px;

    min-width:46px;

    border-radius:12px;

    font-size:18px;

}

.why-card ul{

    padding-left:18px;

}

.why-card ul li{

    font-size:14px;

    line-height:1.7;

}

.why-dots{

    margin-top:30px;

}

.why-dot.active{

    width:28px;

}

}



/*==========================
      SMALL MOBILE
==========================*/

@media(max-width:480px){

.why-section{

    padding:50px 0;

}

.why-heading h2{

    font-size:24px;

}

.why-heading p{

    font-size:14px;

}

.why-card{

    padding:20px;

}

.why-top h3{

    font-size:16px;

}

.why-card ul li{

    font-size:13.5px;

}

.why-icon{

    width:42px;

    height:42px;

    min-width:42px;

    font-size:17px;

}

}



/*==========================
    HOVER EFFECTS
==========================*/

.why-card:hover{

    transform:translateY(-10px);

}

.why-card:hover .why-icon{

    transform:rotate(12deg) scale(1.08);

}

.why-card:hover::before{

    height:6px;

}



/*==========================
    SCROLLBAR HIDE
==========================*/

.why-carousel{

    scrollbar-width:none;

    -ms-overflow-style:none;

}

.why-carousel::-webkit-scrollbar{

    display:none;

}