@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Montserrat',sans-serif;
    background:var(--light-white);
}

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

.about-section{
    position:relative;
    overflow:hidden;

    padding:var(--container-padding);

    background:
    radial-gradient(circle at top left, rgba(13,45,78,.04), transparent 30%),
    radial-gradient(circle at bottom right, rgba(13,45,78,.05), transparent 35%),
    radial-gradient(circle at 100% 100%, rgba(11,42,74,.06) 18%, transparent 19%),
    radial-gradient(circle at 100% 100%, rgba(11,42,74,.025) 36%, transparent 37%),
    radial-gradient(circle at 100% 100%, rgba(11,42,74,.015) 72%, transparent 73%),
    var(--light-white);

    background-repeat:no-repeat;

    background-position:
    left top,
    right bottom,
    right bottom,
    right bottom,
    right bottom,
    center;

    background-size:
    auto,
    auto,
    550px 550px,
    820px 820px,
    1080px 1080px,
    auto;
}

/* TOP BLUEPRINT */

/* .about-section::before{
    content:"";

    position:absolute;

    top:70px;
    right:8%;

    width:420px;
    height:420px;

    border-top:1px solid rgba(11,42,74,.08);
    border-left:1px solid rgba(11,42,74,.08);

    opacity:.7;

    pointer-events:none;
} */

/* GRID */

.about-section::after{
    content:"";

    position:absolute;
    inset:0;

    background-image:
    linear-gradient(rgba(11,42,74,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,42,74,.03) 1px, transparent 1px);

    background-size:48px 48px;

    opacity:.35;

    pointer-events:none;
}

/* =========================================
   CONTAINER
========================================= */

.about-container{
    position:relative;
    z-index:2;

    margin:auto;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:var(--section-gap);
}

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

.about-left{
    width:48%;
}

/* TAG */

.about-tag{
    position:relative;

    display:inline-block;

    padding-left:52px;
    margin-bottom:22px;

    font-size:var(--mini-text);
    font-weight:700;

    letter-spacing:1.5px;

    color:var(--super-light-blue-bg);
    text-transform: uppercase;
}

.about-tag::before{
    content:"";

    position:absolute;

    left:0;
    top:50%;

    transform:translateY(-50%);

    width:36px;
    height:2px;

    background:var(--super-light-blue-bg);
}

/* HEADING */

.about-left h2{
    font-size:clamp(var(--big-head),6vw,58px);

    line-height:1.05;
    font-weight:800;

    color:var(--dark-font);

    margin-bottom:22px;
}

/* SMALL LINE */

.about-line{
    width:58px;
    height:3px;

    background-image: linear-gradient(90deg, var(--dark-blue), var(--medium-blue-bg));

    margin-bottom:28px;
}

/* PARA */

.about-left p{
    max-width:560px;

    font-size:var(--big-para);
    line-height:1.9;

    color:var(--light-font);

    margin-bottom:34px;
}

/* =========================================
   BUTTON
========================================= */



/* =========================================
   RIGHT
========================================= */

.about-right{
    position:relative;
    width:52%;
}

/* BIG TEXT */

.bg-text{
    position:absolute;

    top:-45px;
    left:0;

    font-size:clamp(72px,12vw,135px);

    line-height:1;
    font-weight:800;

    letter-spacing:4px;

    color:transparent;

    -webkit-text-stroke:
    1px rgba(11,42,74,.10);

    opacity:.9;
}

/* =========================================
   FEATURE WRAPPER
========================================= */

.feature-wrapper{
    position:relative;
    z-index:2;

    margin-top:60px;

    display:flex;
    flex-direction:column;

    gap:14px;
}

/* FEATURE BOX */

.feature-box{
    position:relative;

    display:flex;
    align-items:center;

    gap:12px;

    padding:12px 14px;

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

    backdrop-filter:blur(8px);

    border:
    1px solid rgba(11,42,74,.06);

    border-radius:12px;

    transition:.22s ease;
}

/* HOVER */

.feature-box:hover{
    transform:translateY(-3px);

    border-color:
    rgba(11,42,74,.12);

    box-shadow:
    0 8px 20px rgba(11,42,74,.06);
}

/* SIDE CONNECTOR */

.feature-box::before{
    content:"";

    position:absolute;

    left:-14px;
    top:50%;

    transform:translateY(-50%);

    width:14px;
    height:1px;

    background:
    rgba(11,42,74,.12);
}

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

.feature-icon{
    min-width:48px;
    width:48px;
    height:48px;

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

    border-radius:12px;

    background:
    linear-gradient(
        135deg,
        var(--dark-blue),
        var(--medium-blue-bg)
    );

    color:var(--light-white);

    font-size:18px;

    box-shadow:
    0 6px 14px rgba(11,42,74,.12);
}

.feature-icon img{
    width:34px;
    height:34px;

    object-fit:contain;
}

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

.feature-content h2{
    font-size:var(--small-head);
    font-weight:700;

    color:var(--dark-font);

    margin-bottom:6px;
}

.feature-content p{
    max-width:360px;

    font-size:var(--small-para);
    line-height:1.6;

    color:var(--light-font);
}

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

@media(max-width:992px){

    .about-container{
        flex-direction:column;
        align-items:flex-start;
        gap: var();
    }

    .about-left,
    .about-right{
        width:100%;
    }

    .bg-text{
        position:relative;
        top:auto;

        font-size:100px;

    }

    .feature-wrapper{
        margin-top:0;
    }

}

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

@media(max-width:768px){

    .about-section{
        padding:70px 22px;
    }

    .about-container{
        gap:45px;
    }

    .about-left h2{
        font-size:40px;
    }

    .about-left p{
        font-size:15px;
    }

    .bg-text{
        font-size:72px;

        margin-bottom:25px;
    }

    .feature-box{
        padding:16px;
    }

}

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

@media(max-width:480px){

    .about-section{
        padding:65px 18px;
    }

    .about-left h2{
        font-size:34px;
    }

    .bg-text{
        font-size:52px;
    }

    .about-btn{
        width:100%;
        justify-content:center;
    }

    .feature-icon{
        min-width:54px;
        width:54px;
        height:54px;
    }

    .feature-icon img{
        width:26px;
        height:26px;
    }

}