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

.why-choose{

    position: relative;

    padding:120px 0;

    overflow:hidden;

    background:url("../images/why-choose.png") center center/cover no-repeat;

}

/*================ Overlay ================*/

.why-choose::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:
    linear-gradient(
    rgba(6,18,44,.90),
    rgba(6,18,44,.88));

    z-index:1;

}

/*================ Container ================*/

.why-choose .container{

    position:relative;

    z-index:2;

    width:90%;

    max-width:1400px;

    margin:auto;

}

/*================ Heading ================*/

.section-title{

    text-align:center;

    margin-bottom:70px;

}

.section-title .tag{

    display:inline-block;

    color:#ffffff;

    font-size:18px;

    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

    margin-bottom:15px;

}

/*================ Main Heading ================*/

.section-title h2{

    font-size:58px;

    font-weight:800;

    line-height:1.2;

    color:#ffc107;

    text-transform:uppercase;

    margin-bottom:20px;

}

.section-title h2::before{

    content:"WHY CHOOSE";

    display:block;

    font-size:48px;

    color:#ffffff;

    margin-bottom:8px;

}

/*================ Subtitle ================*/

.section-title p{

    color:#d9d9d9;

    font-size:20px;

    letter-spacing:.5px;

}

/*================ Grid ================*/

.choose-grid{

    display:grid;

    grid-template-columns:repeat(6,1fr);

    gap:22px;

    align-items:stretch;

}

/*================ Card Default ================*/

.choose-card{

    position:relative;

    min-height:330px;

}

/*====================================================
                GLASS CARD DESIGN
====================================================*/

.choose-card{

    background:rgba(9,25,52,.55);

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    border:1px solid rgba(0,180,255,.35);

    border-radius:18px;

    padding:35px 20px;

    text-align:center;

    overflow:hidden;

    transition:.45s ease;

    box-shadow:
        0 0 20px rgba(0,140,255,.12),
        inset 0 0 10px rgba(255,255,255,.05);

}

/* Left Neon Border */

.choose-card::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:4px;
    height:100%;

    background:linear-gradient(
        to bottom,
        #00bfff,
        #0066ff
    );

}

/* Bottom Glow */

.choose-card::after{

    content:"";

    position:absolute;

    left:50%;
    bottom:-18px;

    transform:translateX(-50%);

    width:70%;

    height:8px;

    background:#00bfff;

    border-radius:50%;

    filter:blur(12px);

    opacity:.8;

}

/* Hover */

.choose-card:hover{

    transform:translateY(-12px);

    border-color:#00c8ff;

    box-shadow:
        0 0 15px rgba(0,191,255,.4),
        0 0 30px rgba(0,191,255,.35),
        0 0 60px rgba(0,191,255,.2);

}

/*====================================================
                    ICON
====================================================*/

.icon{

    width:85px;

    height:85px;

    margin:auto;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.15);

    box-shadow:0 10px 25px rgba(0,0,0,.25);

    margin-bottom:25px;

    transition:.4s;

}

.icon i{

    font-size:42px;

    color:#66b7ff;

}

/* Different Icon Colors */

.green i{

    color:#70ff5b;

}

.blue i{

    color:#3db8ff;

}

.orange i{

    color:#ffb224;

}

.purple i{

    color:#ba7dff;

}

.yellow i{

    color:#ffcc33;

}

/* Icon Hover */

.choose-card:hover .icon{

    transform:rotateY(360deg) scale(1.08);

    box-shadow:0 0 25px rgba(0,191,255,.45);

}

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

.choose-card h3{

    color:#ffffff;

    font-size:24px;

    font-weight:700;

    margin-bottom:18px;

    text-transform:uppercase;

}

/*====================================================
                DESCRIPTION
====================================================*/

.choose-card p{

    color:#d5d8e2;

    line-height:1.8;

    font-size:16px;

}

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

.choose-card>*{

    position:relative;

    z-index:2;

}

/*==================================================
            PREMIUM HOVER EFFECT
==================================================*/

.choose-card{

    isolation:isolate;

}

.choose-card::before{

    transition:.5s;

}

.choose-card:hover::before{

    width:100%;

    opacity:.08;

}

/*==============================================
            Animated Top Border
==============================================*/

.choose-card span.border{

    position:absolute;

    display:block;

}

.choose-card span.border:nth-child(1){

    top:0;

    left:-100%;

    width:100%;

    height:2px;

    background:linear-gradient(
        90deg,
        transparent,
        #00bfff
    );

    animation:borderTop 3s linear infinite;

}

.choose-card span.border:nth-child(2){

    top:-100%;

    right:0;

    width:2px;

    height:100%;

    background:linear-gradient(
        180deg,
        transparent,
        #00bfff
    );

    animation:borderRight 3s linear infinite;

    animation-delay:.75s;

}

.choose-card span.border:nth-child(3){

    bottom:0;

    right:-100%;

    width:100%;

    height:2px;

    background:linear-gradient(
        270deg,
        transparent,
        #00bfff
    );

    animation:borderBottom 3s linear infinite;

    animation-delay:1.5s;

}

.choose-card span.border:nth-child(4){

    bottom:-100%;

    left:0;

    width:2px;

    height:100%;

    background:linear-gradient(
        0deg,
        transparent,
        #00bfff
    );

    animation:borderLeft 3s linear infinite;

    animation-delay:2.25s;

}

/*==============================================
            Border Animation
==============================================*/

@keyframes borderTop{

0%{

left:-100%;

}

100%{

left:100%;

}

}

@keyframes borderRight{

0%{

top:-100%;

}

100%{

top:100%;

}

}

@keyframes borderBottom{

0%{

right:-100%;

}

100%{

right:100%;

}

}

@keyframes borderLeft{

0%{

bottom:-100%;

}

100%{

bottom:100%;

}

}

/*==============================================
        Floating Glow Effect
==============================================*/

.choose-card::after{

    animation:glowPulse 2s ease-in-out infinite;

}

@keyframes glowPulse{

0%{

opacity:.3;

transform:translateX(-50%) scale(.8);

}

50%{

opacity:1;

transform:translateX(-50%) scale(1.2);

}

100%{

opacity:.3;

transform:translateX(-50%) scale(.8);

}

}

/*==============================================
            Icon Floating
==============================================*/

.icon{

    animation:iconFloat 4s ease-in-out infinite;

}

@keyframes iconFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0);

}

}

/*==============================================
            Card Shine Effect
==============================================*/

.choose-card::selection{

background:none;

}

.choose-card .shine{

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.18),

        transparent

    );

    transform:skewX(-25deg);

}

.choose-card:hover .shine{

    animation:shine 1.1s;

}

@keyframes shine{

0%{

left:-120%;

}

100%{

left:160%;

}

}

/*==============================================
        Soft Background Particles
==============================================*/

.why-choose::after{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

background-image:

radial-gradient(circle,#00bfff22 2px,transparent 2px),

radial-gradient(circle,#ffffff18 1px,transparent 1px);

background-size:120px 120px,80px 80px;

animation:particlesMove 18s linear infinite;

pointer-events:none;

}

@keyframes particlesMove{

0%{

background-position:0 0,0 0;

}

100%{

background-position:300px 600px,-250px 400px;

}

}

/*==============================================
        Hover Text Color
==============================================*/

.choose-card:hover h3{

color:#00d9ff;

transition:.3s;

}

.choose-card:hover p{

color:#ffffff;

transition:.3s;

}


/*==========================================
        LARGE SCREEN
==========================================*/

@media(max-width:1400px){

.choose-grid{

grid-template-columns:repeat(3,1fr);

gap:30px;

}

}


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

@media(max-width:992px){

.why-choose{

padding:90px 0;

}

.section-title h2{

font-size:42px;

}

.section-title h2::before{

font-size:34px;

}

.choose-grid{

grid-template-columns:repeat(2,1fr);

gap:25px;

}

.choose-card{

padding:35px 25px;

min-height:290px;

}

}


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

@media(max-width:768px){

.why-choose{

padding:70px 0;

}

.section-title{

margin-bottom:45px;

}

.section-title h2{

font-size:34px;

}

.section-title h2::before{

font-size:28px;

}

.section-title p{

font-size:16px;

}

.choose-grid{

grid-template-columns:1fr;

}

.icon{

width:70px;
height:70px;

}

.icon i{

font-size:32px;

}

.choose-card h3{

font-size:22px;

}

.choose-card p{

font-size:15px;

}

}

/*==========================================
        Scroll Reveal
==========================================*/

.choose-card{

opacity:0;

transform:translateY(80px);

transition:1s;

}

.choose-card.show{

opacity:1;

transform:translateY(0);

}