/* =========================================================
   COMMON BANNER
========================================================= */

.Common_About_Banner {
    position: relative;
    width: 100%;
    min-height: 350px;

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

    overflow: hidden;

    background:
        linear-gradient(135deg,
            rgba(0, 174, 239, 0.95),
            rgba(0, 145, 210, 0.96));

    isolation: isolate;
}


/* =========================================================
   3D TILE BACKGROUND
========================================================= */

.Common_About_Banner::before {
    content: "";
    position: absolute;
    inset: -80px;

    background:
        linear-gradient(30deg,
            transparent 30%,
            rgba(255, 255, 255, 0.12) 31%,
            rgba(255, 255, 255, 0.12) 48%,
            transparent 49%),
        linear-gradient(150deg,
            transparent 30%,
            rgba(0, 104, 180, 0.18) 31%,
            rgba(0, 104, 180, 0.18) 48%,
            transparent 49%);

    background-size: 180px 100px;
    background-position: 0 0, 90px 50px;

    transform: perspective(500px) rotateX(45deg) scale(1.5);

    opacity: 0.8;

    z-index: -2;
}


/* =========================================================
   OVERLAY
========================================================= */

.common_banner_overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at center,
            rgba(255, 255, 255, 0.15),
            transparent 55%);

    z-index: -1;
}


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

.common_banner_content {
    position: relative;
    width: min(720px, 90%);
    padding: 25px 45px;
    border: 8px solid rgba(255, 255, 255, 0.95);
    border-radius: 24px;
    background: rgba(65, 190, 235, 0.38);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    box-shadow: 0 10px 30px rgba(0, 80, 140, 0.15),
        inset 0 0 30px rgba(255, 255, 255, 0.08);
    text-align: center;
}


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

.common_banner_content h1 {
    position: relative;
    display: inline-block;
    margin: 0;
    color: #ffffff;
    font-size: clamp(32px, 4vw, 50px);
    font-weight: 700;
    line-height: 1.15;
    text-transform: none;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    /* border-bottom: 6px solid #ffc400; */
}

.common_banner_content h1::after {
  content: "";
  position: absolute;
  left: -5px;
  right: -5px;
  bottom: 0;
  height: 5px;
  width: 100%;
  background: #eba06f;
  border-radius: 50%;
  transform: rotate(-1deg);
}


/* =========================================================
   YELLOW UNDERLINE
========================================================= */

/* .common_banner_content h1::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    bottom: -8px;

    height: 6px;

    background: #ffc400;

    border-radius: 50%;

    transform: rotate(-1deg);

    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.08);
} */


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

.common_banner_pause {
    position: absolute;

    right: 14px;
    bottom: 12px;

    width: 32px;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;

    padding: 0;

    border: none;

    border-radius: 50%;

    background: rgba(0, 0, 0, 0.55);

    cursor: pointer;

    transition: 0.3s ease;
}

.common_banner_pause:hover {
    background: rgba(0, 0, 0, 0.8);

    transform: scale(1.08);
}

.common_banner_pause span {
    display: block;

    width: 3px;
    height: 11px;

    border-radius: 2px;

    background: #ffffff;
}


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

@media (max-width: 991px) {
    .Common_About_Banner {
        min-height: 300px;
    }

    .common_banner_content {
        width: 80%;

        padding: 22px 35px;

        border-radius: 20px;
    }

    .common_banner_content h1 {
        font-size: 38px;
    }
}


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

@media (max-width: 767px) {
    .Common_About_Banner {
        min-height: 240px;
    }

    .common_banner_content {
        width: 88%;

        padding: 20px 22px;

        border-width: 3px;

        border-radius: 17px;
    }

    .common_banner_content h1 {
        font-size: 28px;

        line-height: 1.2;
    }

    .common_banner_content h1::after {
        bottom: -6px;

        height: 4px;
    }

    .common_banner_pause {
        right: 10px;
        bottom: 10px;

        width: 28px;
        height: 28px;
    }

    .common_banner_pause span {
        width: 3px;
        height: 9px;
    }
}


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

@media (max-width: 480px) {
    .Common_About_Banner {
        min-height: 210px;
    }

    .common_banner_content {
        width: 90%;

        padding: 18px 15px;
    }

    .common_banner_content h1 {
        font-size: 24px;
    }
}