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

.about-section {

   
    position:relative;
    padding:50px 0;

    background:linear-gradient(
        135deg,
        #071B2F 0%,
        #0B2E59 55%,
        #123E73 100%
    );
    /* background: linear-gradient(135deg, #0B2E59 0%, #1B4332  55%, #1E4D86  100%); */

    overflow:hidden;

}

.about-section::before {

    content: '';
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
      
    background:rgba(245,158,11,.08);

    filter:blur(20px);

    top: -180px;
    right: -180px;

}

.about-section::after {

    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;

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

    filter:blur(30px);

    left: -120px;
    bottom: -120px;

}

/*=========================================
        IMAGE AREA
=========================================*/

.about-images {

    position: relative;

}

.main-image {

    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 25px 70px rgba(0, 0, 0, .12);

}

.main-image img {

    width: 100%;
    display: block;
    transition: .6s;

}

.main-image:hover img {

    transform: scale(1.05);

}

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

.experience-card {

    position: absolute;
    left: -25px;
    bottom: 40px;

    width: 180px;

  
    border-radius: 22px;

    padding: 25px;

    text-align: center;

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

    backdrop-filter:blur(18px);

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

    box-shadow:0 20px 50px rgba(0,0,0,.30);

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

}

.experience-card h2 {

    font-size: 48px;
    font-weight: 700;
    color: var(--secondary);
    margin-bottom: 5px;

}

.experience-card span {

    color:rgba(255,255,255,.75);
    font-size: 15px;
    font-weight: 500;

}

/*=========================================
        FLOATING BADGE
=========================================*/

.floating-badge {

    position: absolute;
    right: -20px;
    top: 40px;

    background: linear-gradient(135deg, var(--primary), #174b84);

    color: var(--white);

    padding: 15px 22px;

    border-radius: 50px;

    font-size: 14px;
    font-weight: 600;

    display: flex;
    align-items: center;
    gap: 10px;

    box-shadow: 0 18px 40px rgba(11, 46, 89, .25);

}

.floating-badge i {

    color: #FFD54F;
    font-size: 18px;

}

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

.section-tag {

    display: inline-flex;
    align-items: center;
    gap: 8px;

     background:rgba(245,158,11,.12);

    border:1px solid rgba(245,158,11,.25);

    color: var(--secondary);

    padding: 8px 18px;

    border-radius: 30px;

    font-size: 14px;
    font-weight: 600;

    margin-bottom: 20px;

}

.about-section-title {

    font-size: 44px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 25px;

}

.about-text {

    font-size: 16px;
    color:rgba(255,255,255,.75);
    line-height: 1.9;
    margin-bottom: 18px;

}

/*=========================================
        ABOUT FEATURES
=========================================*/

.about-feature {

    display: flex;
    align-items: flex-start;
    gap: 18px;

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

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

    backdrop-filter:blur(15px);

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

    padding: 22px;

    border-radius: 18px;

    transition: all .35s ease;

    height: 100%;

}

.about-feature:hover {

    transform: translateY(-8px);

    box-shadow: 0 20px 45px rgba(15, 23, 42, .10);
   
    background:rgba(255,255,255,.09);

    border-color:rgba(245,158,11,.45);
}

.about-feature .icon {

    width: 65px;

    height: 65px;

    min-width: 65px;

    border-radius: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg, var(--secondary), #ffb52e);

    color: var(--white);

    font-size: 26px;

    transition: .35s;

}

.about-feature:hover .icon {

    transform: rotate(-10deg) scale(1.08);

}

.about-feature h5 {

    margin-bottom: 8px;

    font-size: 18px;

    font-weight: 700;

    color: var(--white);

}

.about-feature p {

    margin: 0;

    color:rgba(255,255,255,.72);

    font-size: 14px;

    line-height: 1.7;

}

/*=========================================
        BUTTONS
=========================================*/

.about-buttons {

    display: flex;

    gap: 18px;

    flex-wrap: wrap;

}

.btn-theme {

    background: linear-gradient(135deg, var(--secondary), #ffb52e);

    color: var(--white);

    padding: 14px 32px;

    border-radius: 50px;

    font-weight: 600;

    text-decoration: none;

    transition: .35s;

    box-shadow: 0 12px 25px rgba(245, 158, 11, .30);

}

.btn-theme:hover {

    transform: translateY(-4px);

    color: var(--white);

    box-shadow: 0 18px 40px rgba(245, 158, 11, .40);

}

.about-btn-outline-theme {

    padding: 14px 30px;

     border:2px solid rgba(255,255,255,.25);

    color:#fff;

    border-radius: 50px;

    font-weight: 600;

    text-decoration: none;

    transition: .35s;

    /* display: inline-flex; */


    align-items: center;

    gap: 10px;

    text-align: center;

}

.btn-outline-theme:hover {

     background:#fff;

    color:var(--primary);

}

/*=========================================
        FLOAT ANIMATION
=========================================*/

@keyframes floatCard {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-10px);

    }

    100% {

        transform: translateY(0);

    }

}

.main-image {

    animation: floatCard 6s ease-in-out infinite;

}

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

@media(max-width:991px) {

    .about-section {

        padding: 80px 0;

    }

    .about-section-title {

        font-size: 36px;

    }

    .experience-card {

        left: 20px;

        bottom: 20px;

    }

    .floating-badge {

        right: 20px;

        top: 20px;

    }

    .about-buttons {

        margin-top: 35px;

    }

}

@media(max-width:767px) {

    .about-section {

        padding: 65px 0;

    }

    .about-section-title {

        font-size: 30px;

    }

    .about-text {

        font-size: 15px;

    }

    .experience-card {

        width: 145px;

        padding: 18px;

    }

    .experience-card h2 {

        font-size: 36px;

    }

    .floating-badge {

        position: relative;

        top: 0;

        right: 0;

        margin-top: 20px;

        display: inline-flex;

    }

    .about-feature {

        padding: 18px;

    }

    .about-feature .icon {

        width: 55px;

        height: 55px;

        min-width: 55px;

        font-size: 22px;

    }

    .about-buttons {

        flex-direction: column;

    }

    .btn-theme,

    .btn-outline-theme {

        width: 100%;

        justify-content: center;

    }

}

@media(max-width:575px) {

    .main-image {

        border-radius: 20px;

    }

    .about-section-title {

        font-size: 26px;

    }

    .experience-card {

        /* position: relative;

        left: 0;

        bottom: 0;

        margin-top: 20px; */

        right: 9px;
        left: auto;
        top: -33px;
        height: fit-content;
        padding: 10px;
        width: 100px;

    }

    .about-feature {

        flex-direction: column;

        text-align: center;

        align-items: center;

    }

    .about-feature .icon {

        margin-bottom: 10px;

    }

}

/*=========================================
        PERFORMANCE
=========================================*/

.about-feature,
.main-image img,
.experience-card,
.floating-badge {

    will-change: transform;

    backface-visibility: hidden;

    transform: translateZ(0);

    transition: all .35s ease;

}