@import url("fonts.css");

/* =============================
1. RESET & BASE
============================= */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

sup {
    font-size: 65.5%;
    font-family: sans-serif !important;
    line-height: 0;
    /* Reduces the default ~83% superscript size by 25% */
}

body {
    font-family:
        "Asap",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 400;
    color: #fff;
    background-color: #141b4d;
    position: relative;
}
.header-inner .logo a{
	display:flex;
} 

/* =============================
2. CSS VARIABLES
============================= */
:root {
    --color-primary: #141b4d;
    --color-secondary: #5b6235;
    --color-white: #ffffff;
    --color-accent-bg: #edf4fb;
}

/* =============================
3. TYPOGRAPHY UTILITIES
Fluid font sizes scale from
1440px (max) → 767px (min)
============================= */
.fs-h1 {
    font-size: clamp(55px, 5.38vw + 13.71px, 91.2px);
    line-height: clamp(40px, 3.82vw + 10.68px, 65.729px);
    font-weight: 700;
    font-style: normal;
}

.fs-h2 {
    font-size: clamp(30px, 1.49vw + 18.6px, 40px);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.fs-28 {
    font-size: clamp(20px, 1.19vw + 10.88px, 28px);
    font-style: normal;
    font-weight: 300;
    line-height: 32px;
}

.fs-40 {
    font-size: clamp(30px, 1.49vw + 18.6px, 40px);
    font-style: normal;
    font-weight: 500;
    line-height: clamp(28px, 1.49vw + 20.6px, 44px);
}

.fs-p {
    font-size: clamp(16px, 0.59vw + 11.44px, 20px);
    font-style: normal;
    font-weight: 300;
    line-height: 140%;
}

.fs-16 {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.25;
    color: #fff;
}

.fs-15 {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.2;
    color: #fff;
}

.col-s{
	margin-left:2px;
}
.ls-ss{
	letter-spacing:0.9px;
}
/* =============================
4. UTILITY CLASSES
============================= */

.d-flex {
    display: flex;
}

.justify-center {
    justify-content: center;
}

.align-center {
    align-items: center;
}

.flex-column {
    flex-direction: column;
}

.pb-10 {
    padding-bottom: 10px;
}

.g-30 {
    gap: 30px;
}

.text-dark {
    color: var(--color-primary);
}

.ls-default {
    letter-spacing: -0.16px;
}

.pt-40 {
    padding-top: 40px;
}

.fw-bold {
    font-weight: 600 !important;
}

.fw-normal {
    font-weight: 400 !important;
}

.fw-600 {
    font-weight: 600 !important;
}

.p-0 {
    padding: 0 !important;
}

.ls-s{
	letter-spacing:0.1px;
}
.it-font{
	font-style:italic;
}
.lh-16 p{
	line-height:160% !important;
}
/* =============================
5. LAYOUT CONTAINERS
============================= */
.container {
    max-width: 1363px;
    margin: 0 auto;
    padding: 0 30px;
}

.container-lg {
    max-width: 1446px;
    margin: 0 auto;
    padding: 0 30px;
}

.container-custom {
    max-width: 1270px;
    padding: 0 30px;
    margin: 0 auto;
}

/* =============================
6. HEADER & NAVIGATION
============================= */
header {
    position: fixed;
    top: 30px;
    width: 100%;
    z-index: 400;
}

.header-inner {
    border-radius: 100px;
    border: 8px solid #6c7da5;
    background: linear-gradient(180deg, #fff 0%, #cbddf4 118.67%);
    box-shadow: 0 0 5px 0 rgba(20, 27, 77, 0.25);
    position: relative;
    display: flex;
    align-items: center;
    padding: 15px 63px 15px 83px;
}
/* header:before {
    content: '';
    position: absolute;
    top: -30px;
    left: 0;
    right: 0;
    height: 30px;
    backdrop-filter: blur(10px);
} */
.hero-title.hero-loading .title-part,
.hero-title.hero-loading .hero-penguin {
    opacity: 0 !important;
    visibility: hidden !important;
}
.hero-title .title-part,
.hero-title .hero-penguin {
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

header .logo {
    margin-right: 105px;
}

header .logo img {
    max-width: 155px;
    width: 100%;
    height: auto;
}

header nav {
    width: 100%;
}

header .nav ul {
    display: flex;
    gap: 10px;
    list-style: none;
    justify-content: space-between;
}

header .nav ul li {
    position: relative;
}

/* Nav link hover underline */
.nav ul li::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -12px;
    transform: translateX(-50%) scaleX(0);
    width: 100%;
    height: 6px;
    background: #6c7331;
    border-radius: 100%;
    transition: transform 0.3s ease;
}

.nav ul li:hover::after {
    transform: translateX(-50%) scaleX(1);
}

.nav ul li.active::after {
    transform: translateX(-50%) scaleX(1);
}

.nav a {
    text-decoration: none;
    color: #141b4d;
    text-align: center;
    leading-trim: both;
    text-edge: cap;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.6;
    position: relative;
}

/* Burger menu (hidden on desktop) */
.burger {
    width: 44px;
    height: 44px;
    display: none;
    flex-direction: column;
    justify-content: center;
    background: #141b4d;
    gap: 3px;
    cursor: pointer;
    z-index: 1002;
    padding: 7px 9px;
    border-radius: 100px;
}

.burger span {
    height: 3px;
    width: 100%;
    background: #ffffff;
    border-radius: 10px;
    transition: 0.3s;
}

/* Burger active state (cross) */
.burger.active {
    background: transparent;
}

.burger.active span {
    background: #141b4d;
}

.burger.active span:nth-child(1) {
    transform: rotate(45deg) translate(3px, 2px);
}

.burger.active span:nth-child(2) {
    opacity: 0;
}

.burger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* =============================
7. HERO SECTION
Fluid values scale from
1440px (max) → 767px (min)
============================= */
.hero {
    height: clamp(480px, 66.86vw - 32.88px, 930px);
  /*  background-image: url("../images/background\ 1.jpg");*/
	 background-image: url("/wp-content/uploads/2026/05/background2-scaled.jpg");
	
	
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: clamp(215px, 27.49vw - 15.85px, 380px);
    overflow: hidden;
    position: relative;
}

.hero .container {
    width: 100%;
}

.hero-content {
    width: 100%;
    position: relative;
    text-align: center;
}

.hero-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    position: relative;
    width: 100%;
    line-height: 1;
    max-width: clamp(630px, 87.67vw - 42.64px, 1220px);
    margin: 0 auto;
}

.title-part {
    font-size: clamp(48px, 6.42vw - 1.25px, 91.2px);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    background: linear-gradient(0deg, #141b4d 0%, #a7c6ed 250.78%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
	z-index:220;
}

.hero-penguin {
    width: clamp(195px, 27.67vw - 17.39px, 381.21px);
    height: clamp(120px, 16.76vw - 8.57px, 232.8px);
    object-fit: contain;
    position: absolute;
    z-index: 200;
    left: 22%;
    bottom: -32%;
}

.hero-subtitle {
    position: relative;
    z-index: 300;
    font-size: clamp(36px, 4.86vw - 1.31px, 68.733px);
    font-weight: 400;
    line-height: 1;
    margin: 4px 0 0;
    white-space: nowrap;
}

/* =============================
HERO PARALLAX ANIMATION
Applied via JS on scroll for penguin and title parts
============================= */
.hero-penguin {
    will-change: transform;
    transition: none;
    /* JS drives per-frame transform for smooth scroll-sync */
    transform-origin: center center;
    /* start off-screen at the bottom and slightly left so JS can animate upward into place */
    transform: translate(-220px, 120vh) scale(0.55);
    opacity: 1;
    z-index: 200;
}

.title-part {
    display: inline-block;
    transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.2, 1);
    will-change: transform;
}

.hero-subtitle {
    transition: none;
    will-change: transform, opacity;
}

/* =============================
8. SECTION TRANSITION (MERGE)
============================= */
.merge {
    position: absolute;
    left: 0;
    right: 0;
    top: 2px;
    transform: translateY(-100%);
    width: 100%;
    z-index: 2;
    object-fit: cover;
    pointer-events: none;
}

/* =============================
9. ADVANCING SECTION
============================= */
.advancing {
    position: relative;
    background: linear-gradient(180deg, #a7c6ed -138.7%, #141b4d 100%);
    text-align: center;
}

.pb-120 {
    padding-bottom: 120px;
}

.advancing-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.advancing-feature {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    text-align: left;
    padding-top: 50px;
}

.advancing-feature-icon {
    flex-shrink: 0;
    object-fit: contain;
    width: 48px;
}

/* =============================
10. FOOTER
============================= */
footer {
    padding: 55px 0 80px 0;
    background: linear-gradient(0deg, #a7c6ed -200%, #141b4d 100%);
}

footer .footer-logo img {
    width: 100%;
    max-width: 156px;
    height: auto;
}

footer .footer-inner-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 1081px;
    margin: 0 auto;
}

footer .footer-nav ul li:last-child {
    padding-right: 0px !important;
}

footer .footer-inner-wrapper p {
    max-width: 711px;
}

footer .footer-nav ul {
    list-style: none;
    display: flex;
}

footer .footer-nav ul li {
    padding: 0 20px;
}

footer .footer-nav ul li:first-child {
    padding-left: 0;
}

footer .footer-nav ul li a:hover {
    text-decoration: underline !important;
}

footer .footer-nav ul li a {
    text-decoration: none;
    position: relative;
}

footer .footer-nav ul li a::after {
    content: "";
    position: absolute;
    width: 1px;
    height: 16px;
    background: #fff;
    right: -20px;
    top: 0;
}

footer .footer-nav ul li:last-child a::after {
    display: none;
}

/* =============================
DIVIDER ANIMATION
============================= */

@keyframes expandFromCenter {
    from {
        transform: scaleX(0);
        opacity: 0;
    }

    to {
        transform: scaleX(1);
        opacity: 1;
    }
}

.divider-wrapper {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 68px;
}

.divider {
    display: flex;
    justify-content: center;
    transform-origin: center;
}

.divider-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    transform-origin: center;
    transform: scaleX(0.3);
    opacity: 0;
}

.divider.animate .divider-image {
    animation: expandFromCenter 1s ease-out forwards;
}

/* =============================
EXPANDING SECTION
============================= */
.expanding {
    background-color: var(--color-primary);
    padding-top: 90px;
}

.pb-90 {
    padding-bottom: 121px;
}

.expanding-header-icon {
    flex-shrink: 0;
    object-fit: contain;
}

.expanding-body {
    max-width: 1031px;
}

.expanding-body span {
    white-space: nowrap;
}

.expanding-text {
    padding-top: 35px;
}

.expanding-subheading {
    padding-top: 80px;
    padding-bottom: 55px;
}

.expanding-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    justify-content: space-between;
}

.expanding-card {
    display: flex;
    flex-direction: column;
    gap: 35px;
}

.expanding-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.expanding-card-icon img,
.disruption-circle img {
    max-width: 179px;
    height: auto;
    width: 100%;
}
.max-425 {
    max-width: 425px;
}

.expanding-card-icon {
    align-self: center;
}

.expanding-card-text {
    font-weight: 300;
    line-height: 1.5;
}

.evidence-cards {
    width: 100%;
    overflow: hidden;
}

.bcl-2 {
    background: linear-gradient(90deg, #edf4fb 0%, #dce8f7 100%);
    margin-top: clamp(40px, 3.74vw + 26.17px, 80px);
    padding: clamp(12px, 1.68vw + 5.78px, 30px)
        clamp(14px, 1.96vw + 6.74px, 35px);
    border-radius: clamp(60px, 8.41vw + 28.88px, 150px);
    border: clamp(8px, 1.12vw + 3.86px, 20px) solid #40466f;
    width: 100%;
    flex-shrink: 1;
}

.bcl-2-heading {
    color: #141b4d;
    text-align: center;
    font-size: clamp(14px, 1.68vw + 7.78px, 32px);
    font-weight: 700;
    line-height: clamp(16px, 1.49vw + 10.48px, 32px);
    white-space: wrap;
}

.dumbbell-container {
    display: flex;
    justify-content: space-around;
    margin-top: clamp(6px, 0.56vw + 3.93px, 12px);
	max-width:1031px;
}

/* .dumbbell-icon {
    width: 1px;
    height: clamp(16px, 1.59vw + 10.12px, 33px);
    background-color: #e0e6ff;
    position: relative;
} */
.dumbbell-container svg{
	 height: clamp(22px, 1.59vw + 10.12px, 47px);
}

/* Shared styles for both circles */
/* .dumbbell-icon::before,
.dumbbell-icon::after {
    content: "";
    position: absolute;
    width: clamp(4px, 0.28vw + 2.96px, 7px);
    height: clamp(4px, 0.28vw + 2.96px, 7px);
    background-color: #e0e6ff;
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%);
} */

/* Position the top circle */
/* .dumbbell-icon::before {
    top: -5px;
} */

/* Position the bottom circle */
/* .dumbbell-icon::after {
    bottom: -5px;
} */

.cards-w {
    margin-top: clamp(6px, 0.56vw + 3.93px, 12px);
    display: flex;
    justify-content: space-between;
    flex-shrink: 1;
    gap: clamp(4px, 0.56vw + 1.93px, 10px);
}

.card1,
.card2 {
    width: 48%;
    min-width: 0;
    padding-left: clamp(8px, 2.06vw + 0.38px, 30px);
    padding-right: clamp(8px, 2.06vw + 0.38px, 30px);
    padding-top: clamp(8px, 1.12vw + 3.86px, 20px);
    padding-bottom: clamp(8px, 1.12vw + 3.86px, 20px);
    border-radius: clamp(40px, 5.61vw + 19.25px, 100px);
    border: clamp(6px, 1.03vw + 2.19px, 17px) solid #40466f;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #edf4fb 0%, #dce8f7 100%);
}

.card1 img,
.card2 img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Evidence card GIF loop — timing controlled in anim.js */
.evidence-cards .cards-w > div > * {
    transition: opacity 0.25s ease;
}

.card1 h5,
.card2 h5 {
    max-width: 390px;
    color: #141b4d;
    text-align: center;
    font-weight: 700;
    font-size: clamp(12px, 1.49vw + 6.48px, 28px);
    line-height: clamp(14px, 1.78vw + 7.42px, 33px) !important;
    padding-bottom: clamp(8px, 1.49vw + 2.48px, 24px);
}

.card1 ul,
.card2 ul {
  list-style: none;
  padding-left: 0;
}

.card1 ul li,
.card2 ul li {
    color: #141b4d;
    font-size: clamp(16px, 1.31vw + 5.16px, 24px);
    font-weight: 300;
    line-height: clamp(19px, 1.49vw + 6.48px, 28px);
    padding-top: clamp(7px, 0.56vw + 1.93px, 10px);
    max-width: 250px;
	position: relative;
    padding-left: 14px;
}

.card1 ul li::before,
.card2 ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 24px;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  background-color: #141B4D;
  border-radius: 50%;
}

.card2 {
    justify-content: space-between;
}

.card2 ul {
    padding-bottom: clamp(15px, 2.34vw + 6.34px, 40px);
}

.card2 ul li {
    max-width: 290px;
}

/* =============================
LIMITED DISRUPTION SECTION
============================= */
.disruption-heading {
    margin-top: 40px;
}

.disruption-heading h4 {
    font-weight: 300;
    letter-spacing: -0.14px !important;
}

.disruption-icons {
    display: flex;
    justify-content: center;
    gap: 20px;
    justify-content: space-between;
    margin-top: clamp(25px, 2.8vw + 19.64px, 54px);
}

.disruption-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(15px, 0.93vw + 6.55px, 20px);
    flex: 1;
}

.disruption-item p {
    font-weight: 600;
    line-height: 1.3;
}

.disruption-note {
    margin-top: clamp(25px, 2.8vw + 19.64px, 55px);
    max-width: 1000px;
}

.disruption-note ul {
	list-style:none;
    padding-left: 20px;
}

.disruption-note ul li {
    line-height: 1.5;
	position:relative;
}

.disruption-note ul li::before {
	content: "";
    position: absolute;
    left: -11px;
    top: 15px;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    background-color: white;
    border-radius: 50%;
}


/* =============================
OPTIMAL DISEASE CONTROL SECTION
============================= */

.optimal-card {
    max-width: 1031px;
    background: linear-gradient(90deg, #edf4fb 0%, #dce8f7 100%);
    margin-top: 80px;
    padding: clamp(25px, 2.34vw + 16.34px, 50px)
        clamp(30px, 2.8vw + 19.64px, 60px);
    padding-left: clamp(25px, 3.34vw + 16.34px, 56px) !important;
    padding-right: clamp(25px, 4.34vw + 16.34px, 72px) !important;
    border-radius: clamp(20px, 14vw - 32.5px, 150px);
    border: clamp(6px, 1.5vw + 0.4px, 20px) solid #40466f;
}

.optimal-card2 {
    max-width: 1031px;
    background: linear-gradient(90deg, #edf4fb 0%, #dce8f7 100%);
    margin-top: clamp(6px, 0.56vw + 3.93px, 12px);
    padding: clamp(25px, 2.34vw + 16.34px, 35px)
        clamp(30px, 2.8vw + 19.64px, 50px);
    border-radius: clamp(20px, 14vw - 32.5px, 150px);
    border: clamp(6px, 1.5vw + 0.4px, 20px) solid #40466f;
}

.optimal-card-title {
    color: #141b4d;
    font-size: clamp(20px, 1.5vw + 12.4px, 32px) !important;
    text-align: center;
    margin-bottom: 55px;
}

.optimal-card-content {
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 68px;
}

.optimal-card2 .optimal-card-content {
    justify-content: center;
}

.mw-420 {
    max-width: 420px;
    width: 100%;
}

.optimal-card p {
    color: #141b4d;
    max-width: 853px !important;
    font-size: clamp(16px, 1vw + 10.25px, 24px) !important;
    padding-bottom: clamp(25px, 3.8vw + 5.7px, 55px);
}

.optimal-card-col {
    flex: 1;
    min-width: 0;
    max-width: fit-content;
}

.optimal-card-col2 {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: flex-end;
    margin-bottom: 40px;
    min-width: 0;
    background-color: #141b4d;
    border-radius: clamp(10px, 4.3vw - 6px, 50px);
    padding: clamp(15px, 1.4vw + 9.8px, 20px);
    padding-left: clamp(15px, 1.4vw + 9.8px, 19px);
    max-width: 344px !important;
}
.optimal-card .optimal-card-content {
    gap: 0;
}
.optimal-card-wrap {
    overflow: hidden;
    flex: 1;
    min-width: 0;
    max-width: fit-content;
    padding-left: 68px;
}
.optimal-card-wrap .optimal-card-col2 {
    transform: translatex(-150%);
    transition: 1s all;
    transition-delay: 0.4s;
}
.optimal-card-wrap .optimal-card-col2.active {
    transform: translatex(0);
}

.optimal-card-col2 .fs-cust {
    color: #ffffff !important;
    font-weight: 600;
    padding: 0 !important;
    font-size: clamp(14px, 1vw + 12.74px + 9.25px, 20px) !important;
    line-height: 22px !important;
}

.optimal-card-col2 p {
    color: #ffffff !important;
}

.optimal-card-col .data {
    color: #141b4d;
    text-align: center;
    font-size: clamp(14px, 0.64vw + 11.5px, 20px);
    line-height: 35.093px;
    white-space: nowrap;
    /* 175.466% */
}

.optimal-card2-content {
    color: #141b4d;
    text-align: center;
    font-size: clamp(16px, 1vw + 10px, 24px);
    font-weight: 300;
    line-height: 28px;
    padding-bottom: clamp(25px, 3.8vw + 5.7px, 55px);
}

.optimal-card-img {
    height: auto;
    max-height: 114px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.optimal-card-img2 {
    height: auto;
    max-width: 422px;
    width: 100%;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.optimal-card-img-cust {
    height: auto;
    max-width: 68px;
    object-fit: contain;
    margin: auto;
    display: block;
}

.optimal-highlight {
    font-size: clamp(24px, 1.49vw + 18.6px, 40px);
    font-weight: 600;
    line-height: 33px !important;
    display: inline-block;
    margin: 15px auto;
    color: #a7c6ed !important;
}

.optimal-card-footnote {
    margin-top: clamp(18px, 1.68vw + 11.78px, 30px);
    padding-top: clamp(12px, 1.12vw + 7.86px, 20px);
    border-top: 1px solid rgba(20, 27, 77, 0.15);
    /* Darker border for light card */
    font-size: clamp(10px, 0.47vw + 8.27px, 14px);
    line-height: 1.4;
    color: #141b4d;
    opacity: 0.8;
}

.optimal-references {
    margin-top: 80px;
}

.optimal-references p {
    color: #fff;
    font-size: clamp(10px, 1.08vw + 6px, 20px);
    font-style: normal;
    font-weight: 300;
    line-height: 140%;
}

.mw-235 {
    max-width: 235px !important;
    margin-bottom: 32px;
}
.optimal-card-content .blood-animation {
    max-width: 420px;
    width: 100%;
    height: auto;
}
/* =============================
SIGNUP SECTION
============================= */
.penguin-banner {
    position: relative;
    max-width: 950px;
    background-color: #2c325f;
    /* Lighter blue background matching the image */

    border-radius: 15px;
    /* Keeping the rounded corners of the background intact */

    padding: clamp(25px, 4vw, 40px) clamp(30px, 6vw, 70px);
    box-sizing: border-box;
    margin: 0 auto clamp(40px, 8vw, 105px) auto;
}

/* 2. Add the custom border via a pseudo-element */
.penguin-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  border-style: solid;
  border-width: 30px 150px 150px 30px;
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cpath fill='%2376843c' d='M 12 0 L 288 0 A 12 12 0 0 1 300 12 L 300 237 L 298 237 L 295 12 A 7 7 0 0 0 288 5 L 12 5 A 7 7 0 0 0 5 12 L 5 288 A 7 7 0 0 0 12 295 L 261 298 L 261 300 L 12 300 A 12 12 0 0 1 0 288 L 0 12 A 12 12 0 0 1 12 0 Z' /%3E%3C/svg%3E");
  border-image-slice: 30 149 150 30;
 
  -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0, 0 0);
  clip-path: polygon(0 0, 0 0, 0 0, 0 0, 0 0);
}
 
.penguin-banner.border-animate::before {
  animation: border-draw 4.5s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
 
@keyframes border-draw {
  0% {
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0, 0 0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0, 0 0);
  }
  50% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 100%, 0 100%);
  }
  100% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 0 100%);
  }
}
.penguin-icon {
    position: absolute;
    top: clamp(-30px, -3vw, -45px);
    left: clamp(-64px, -4vw, -65px);
    z-index: 10;
    pointer-events: none;
}

.penguin-banner-content {
    text-align: center;
    color: #fff;
    position: relative;
    z-index: 2;
}

.penguin-banner-title {
    font-size: clamp(18px, 0.94vw + 14.48px, 28px);
    font-weight: 600;
    margin-bottom: 12px;
    line-height: 1.4;
}

.penguin-banner-text {
    font-size: clamp(14px, 1vw + 10.48px, 24px);
    font-weight: 600;
    line-height: 1.5;
}

.signup-section {
    background-color: #141b4d;
    padding: clamp(50px, 5vw + 20px, 90px) 0;
    padding-bottom: 0px !important;
    padding-top: 122px !important;
    color: #fff;
}

.signup-heading {
    font-size: clamp(24px, 2.5vw + 12px, 30px);
    text-align: center;
    font-weight: 400;
    margin-bottom: 55px;
    line-height: 1.3;
}

.signup-subheading {
    font-size: clamp(16px, 1.2vw + 8px, 20px);
    text-align: center;
    font-weight: 300;
    margin-bottom: clamp(35px, 4vw + 15px, 50px);
}

.signup-form-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 47px;
    margin-bottom: clamp(30px, 3vw + 15px, 50px);
}

.signup-form-bottom {
    display: flex;
    align-items: flex-end;
    gap: 30px;
}

.signup-input-group {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 435px;
}

.email-label {
    font-size: 20px;
    margin-bottom: 8px;
    font-weight: 400;
}

.email-input {
    width: 100%;
    height: 44px;
    border-radius: 6px;
    border: none;
    padding: 0 14px;
    font-size: 13px;
    outline: none;
    font-weight: 400;
	color: #333;
}

.email-input::placeholder {
    color: #bdbdbd;
	color: #424242;
    font-size: 13px;
    font-weight: 400;
}

.signup-btn {
    background-image: url(../images/button.svg);
    background-color: transparent !important;
    background-repeat: no-repeat;
    background-size: cover;
    border: none;
    width: 210px;
    height: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 22px;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
    margin-bottom: -6px;
}

.signup-btn:hover {
    opacity: 0.9;
/*     transform: translateY(-2px); */
}

.signup-form-wrapper a {
    text-decoration: none !important;
    margin-bottom: -13px;
}

.signup-btn .text {
    color: #141b4d;
    font-size: 24px;
    font-weight: 700;
    text-decoration: none !important;
}

.signup-input-group a {
    margin-bottom: -12px;
}

.signup-btn-icon {
    width: 30px;
    height: 30px;
    background-color: #141b4d;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.signup-footnote {
    font-size: 16px;
    text-align: center;
    font-style: italic;
}

.txt1,
.txt2,
.txt3 {
    font-size: clamp(10px, 0.56vw + 7.88px, 16px);
    color: white;
    font-weight: 300;
}

.textarea {
    margin-top: 80px;
    max-width: 1081px;
    margin-left: auto;
    margin-right: auto;
}

.txt1 {
    padding-bottom: 35px;
    max-width: 1081px;
}

.txt2 {
    padding-bottom: 55px;
    max-width: 1033px;
}

.txt3 {
    max-width: 999px;
}

.bg-gradient {
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    width: 100%;
    height: 17%;
    background: linear-gradient(
        180deg,
        rgba(82, 99, 144, 0) 0%,
        rgba(82, 99, 144, 0.5) 22.11%,
        rgba(82, 99, 144, 0.7) 42.79%,
        rgba(82, 99, 144, 0.9) 60.58%,
        rgba(82, 99, 144, 0.97) 74.04%,
        #526390 100%
    );
    z-index: 100;
}
.country-dropdown-wrapper {
    position: relative;
    width: 220px;
    flex-shrink: 0;
    align-self: flex-end;
}

.country-dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    height: 44px;
    padding: 0 14px;
    background: #fff;
    border: none;
    border-radius: 6px; /* closed state — full radius */
    font-size: 13px;
    font-weight: 400;
    color: #b0b0c3;
	color: #424242;
    cursor: pointer;
    outline: none;
    white-space: nowrap;
}

.country-dropdown-wrapper.is-open .country-dropdown-toggle {
    border-radius: 6px 6px 0 0; /* open state — flat bottom */
}
/* Once a real value is selected, toggle label turns dark */
.country-dropdown-toggle.has-value {
    color: #141b4d;
}

.country-dropdown-toggle:focus-visible {
    box-shadow: 0 0 0 2px #e6007e;
}

.country-dropdown-chevron {
    flex-shrink: 0;
/*     color: #b0b0c3; */
    transition: transform 0.2s ease;
	width:6px;
}

.country-dropdown-toggle.has-value .country-dropdown-chevron {
    color: #1a1a2e;
}

.country-dropdown-wrapper.is-open .country-dropdown-chevron {
    transform: rotate(180deg);
}

.country-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%; /* ← was calc(100% + 4px) */
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 0 0px 6px 6px;
    overflow: hidden;
    list-style: none;
    margin: 0;
    padding: 4px 0;
    z-index: 100;
}

.country-dropdown-wrapper.is-open .country-dropdown-menu {
    display: block;
}

/* All options start grey */
.country-dropdown-option {
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 400;
    color: #bcbec0;
	color: #8b8b8b;
    cursor: pointer;
    transition: color 0.12s ease;
    white-space: nowrap;
}

/* Hover: text turns dark navy, no background change */
.country-dropdown-option:hover {
    color: #141b4d;
    background: transparent;
}

/* Selected option is dark navy and bold */
.country-dropdown-option.is-selected {
    color: #141b4d;
    font-weight: 400;
}

/* =============================
   Signup form validation states
   ============================= */
.signup-input-group {
    position: relative;
}

.signup-field-error {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.3;
    color: #ff6b6b;
    text-align: left;
}

.signup-field-error.is-visible {
    display: block;
}

.email-input.has-error,
.country-dropdown-toggle.has-error {
    box-shadow: 0 0 0 2px #ff6b6b;
}

.signup-form-status {
    margin: 16px 0 0;
    text-align: center;
    font-size: 14px;
    color: #fff;
}

.signup-form-status:empty {
    display: none;
}

.signup-form-status.is-error {
    color: #ff6b6b;
}

.signup-form-success {
    margin: 16px 0 0;
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    color: #fff;
}

.signup-form-success:not(.is-visible) {
    display: none;
}

.mb-mobile{
		display:none;
	}
.txt2 p{
	color: inherit;           
    text-decoration: none;    
    cursor: text;
}
.top-al{
	transform: translateY(0px);
    position: absolute;
	font-size:50px;
}
/* =============================
11. MEDIA QUERIES
Ordered: largest → smallest
============================= */

/* ---------- ≥ 1200px ---------- */

@media (min-width: 1440px) {
    .advancing {
        margin-top: 0 !important;
    }
}

@media (min-width: 1200px) {
    .fs-28 {
        font-size: 28px !important;
    }

    .penguin-banner-title {
        font-size: 28px !important;
    }

    .penguin-banner-text {
        font-size: 24px !important;
    }

    .optimal-card-title {
        font-size: 32px !important;
    }
}

@media (max-width: 1300px) {
		.disruption-note ul li::before {
    top: 14px;
}
    .header-inner {
        padding: 15px 50px;
    }

    header .logo {
        margin-right: 80px;
    }

    .divider-wrapper {
        padding: 0 30px;
    }
}

/* ---------- ≤ 1199px ---------- */
@media (max-width: 1199px) {
	.disruption-note ul li::before {
    top: 13px;
}

    header .logo {
        margin-right: 30px;
    }

    .header-inner {
        padding: 15px 25px;
    }

    .nav a {
        font-size: 18px;
    }

    header .nav ul {
        gap: 5px;
    }

    footer {
        padding: 40px 0 60px 0;
    }

    .penguin-icon {
        top: -50px;
        left: -30px;
    }
}

/* ---------- ≤ 1024px ---------- */
@media (max-width: 1024px) {
	.disruption-note ul li::before {
    top: 12px
}
    .nav a {
        font-size: 16px;
    }

    .penguin-icon {
        top: -50px;
        left: 0px;
    }

    .optimal-card-col2 .fs-cust {
        font-size: clamp(14px, 1vw + 12.74px + 9.25px, 16px) !important;
    }
}

/* ---------- ≤ 992px ---------- */
@media (max-width: 992px) {
	.card1 ul li::before, .card2 ul li::before {
    top: 17px;
}

    .header-fade {
        display: none;
    }

    .advancing-features {
        grid-template-columns: repeat(2, 1fr);
    }

    .flex-lg-column {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .penguin-banner {
        margin-left: 0px !important;
        margin-right: 0px !important;
    }
}

/* ---------- ≤ 991px (mobile nav) ---------- */
@media (max-width: 991px) {
	.advancing-feature p br{
		display:none;
	}
	.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(20, 27, 77, 0.5); 
  backdrop-filter: blur(4px); 
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  z-index: 300; 
}

.menu-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
	.country-dropdown-toggle {
    padding: 0 10px;
}
	.email-input {
    padding: 0 10px;
}
	.optimal-card2 {
    margin-top: 7px;
}

    .signup-form-wrapper {
        gap: 20px;
    }
    header {
        top: 0;
        background: linear-gradient(180deg, #fff 0%, #cbddf4 118.67%);
    }

    header .logo img {
        max-width: 136px;
    }

    .header-inner {
        border-radius: 0;
        border: 0;
        box-shadow: none;
        justify-content: space-between;
        background: transparent;
        padding: 12px 0;
    }

    .nav {
        position: fixed;
        top: 75px;
        transform: translateX(100%);
        width: 100%;
        background: linear-gradient(180deg, #fff 0%, #cbddf4 118.67%);
        box-shadow: 0 0 5px 0 rgba(20, 27, 77, 0.25);
        padding: 0;
        transition: 0.4s ease;
        z-index: 1001;
    }

    .nav.open {
        transform: translateX(0);
        right: 0;
    }

    .nav ul {
        flex-direction: column;
        gap: 0;
    }

    .nav ul li a {
        font-size: 18px;
        line-height: 1.6;
        padding: 14px 70px 14px 30px;
        border-bottom: 1px solid #6c7da5;
        width: 100%;
        display: block;
        text-align: start;
    }

    .nav ul li:first-child a {
        border-top: 1px solid #bcc3d3;
    }

    .nav ul li::after {
        display: none;
    }

    /* Chevron arrow on mobile nav links */
    .nav ul li a::before {
        content: "";
        position: absolute;
        right: 45px;
        top: 50%;
        transform: translateY(-50%);
        width: 10px;
        height: 14px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='14' viewBox='0 0 10 14' fill='none'%3E%3Cpath d='M0.497812 -0.000205934C0.331871 0.18678 0.165931 0.373767 -8.89599e-06 0.560753C0.225601 0.816678 0.452594 1.07104 0.68097 1.32385C2.73635 3.59913 4.90374 5.74819 7.18314 7.77103C7.25047 7.83079 7.31791 7.89043 7.38543 7.94997L7.43452 6.4139C5.10757 8.23938 2.8783 10.1902 0.746721 12.2664C0.50267 12.5041 0.259899 12.7435 0.0184078 12.9845C0.17207 13.1817 0.325733 13.3789 0.479395 13.5761C0.772107 13.4008 1.06354 13.2239 1.35369 13.0454C3.8879 11.4859 6.32443 9.80101 8.66328 7.9908L9.6112 7.24719L8.71237 6.45474C8.64523 6.39476 8.578 6.3349 8.51066 6.27514C6.23126 4.2523 3.83985 2.35567 1.33643 0.585257C1.05828 0.388545 0.778735 0.19339 0.497812 -0.000205934Z' fill='%23141B4D'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-size: contain;
    }

    .burger {
        display: flex;
    }

    .card1 ul li,
    .card2 ul li {
        max-width: 220px !important;
    }

    footer {
        padding: 30px 0 40px 0;
    }
}

/* ---------- ≤ 767px (hero stacking) ---------- */
@media (max-width: 767px) {
	.top-al {
    transform: translateY(2px);
    font-size: 44px;
}
	.country-dropdown-chevron {
	width:8px;
}

		.mb-mobile{
		display:block;
	}
    .country-dropdown-toggle {
        max-width: 220px;
    }
    .country-dropdown-wrapper {
        max-width: 220px;
    }
    .signup-form-wrapper {
        flex-direction: column;
        align-items: stretch;
        gap: 27px;
    }

    .signup-input-group {
        max-width: 100%;
    }

    .signup-form-bottom {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
        gap: 16px;
    }

    .signup-btn {
        flex-shrink: 0;
    }

    .pb-90 {
        padding-bottom: 80px;
    }

    .pb-120 {
        padding-bottom: 80px;
    }

    .hero-content {
        text-align: left;
    }

    .hero {
        height: 725px;
    }

    .hero-title {
        display: block;
        margin: unset;
    }

    .title-part {
        white-space: normal;
        display: inline;
    }

    .hero-penguin {
        left: auto;
        right: -10%;
        bottom: 50%;
    }

    .hero-subtitle {
        white-space: normal;
        text-align: left;
    }

    .max-425 {
        max-width: 100%;
    }

    .card1 ul li,
    .card2 ul li {
        max-width: 150px !important;
    }

    footer {
        padding: 25px 0 40px 0;
    }

    footer .footer-nav ul li {
        padding: 0 8px;
    }

    footer .footer-nav ul li a::after {
        right: -8px;
    }

    .expanding {
        padding: 50px 0 60px;
        padding-bottom: 0 !important;
    }

    .expanding-cards {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .disruption-icons {
        flex-direction: column;
        align-items: center;
        gap: 25px;
    }

    .optimal-card-content {
        flex-direction: column;
        gap: 25px;
    }

    .optimal-card-col {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .optimal-card-col2 {
        width: 100%;
    }

    .optimal-card,
    .optimal-card2 {
        border-radius: 45px !important;
        border-width: 6px !important;
    }

    .signup-input-group {
        max-width: 100%;
    }

    .penguin-banner {
        margin-left: 15px;
        margin-right: 5px;
    }

    .penguin-icon {
        position: absolute;
        top: -30%;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
        pointer-events: none;
    }

    .divider-image {
        height: 20px;
        object-fit: cover;
    }

    .signup-input-group a {
        margin-bottom: 0px;
    }

    .optimal-card-col2 {
        max-width: 100% !important;
        margin-bottom: 0 !important;
    }

    .optimal-card-wrap {
        padding-left: 0;
        padding-top: 25px;
    }
    .optimal-card-wrap .optimal-card-col2 {
        transition-delay: 1s;
    }
}

@media (max-width: 680px) {
    .penguin-banner::before {
        border-image-slice: 19 120 110 19;
        border-width: 25px 150px 150px 30px;
    }
    .mb-hide {
        display: none;
    }
}

/* ---------- ≤ 575px (small screens) ---------- */
@media (max-width: 575px) {
	.top-al {
        transform: translateY(2px);
        font-size: 33px;
    }
	.disruption-note ul li::before {
    top: 12px;
		width: 3px;
    height: 3px;
}
	.mb-15-mob{
		margin-bottom:15px !important;
	}
	    .signup-form-bottom {
        flex-direction: column;
			align-items:center;
    }
	.signup-btn-icon {
    margin-right: 0px;
}
		.card1 ul li::before, .card2 ul li::before {
    top: 14px;
	width: 3px;
    height: 3px;
}

    .signup-btn {
        margin-bottom: 0px;
    }
    .country-dropdown-toggle {
        max-width: 100%;
		width:100%;
        font-size: 12px;
    }
    .country-dropdown-option {
        font-size: 14px;
    }
    .country-dropdown-wrapper {
        max-width: 100%;
		width:100%;
    }

    footer .footer-nav ul li a::after {
        height: 8px;
        margin-top: 1px;
    }

    .pb-50 {
        padding-bottom: 50px !important;
    }

    .expanding {
        padding-top: 40px;
        padding-bottom: 0px;
    }

    .fw-normal {
        font-weight: 400;
    }

    .optimal-card,
    .optimal-card2 {
        padding: 25px !important;
        border-radius: 44px !important;
        border-width: 6px !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .optimal-card-col2 {
        border-radius: 37px !important;
        padding: 20px 10px !important;
    }

    .optimal-card-footnote,
    .optimal-references p {
        font-size: 16px;
    }

    .top-20 {
        padding-top: 20px;
    }

    .fs-15,
    .fs-16 {
        font-size: 10px;
        line-height: 1;
    }

    .fs-28 {
        font-size: 18px;
    }

    .fs-40 {
        font-size: 22px;
    }

    .g-30 {
        gap: 25px;
    }

    .hero {
        background-position: 60%;
        min-height: 560px;
    }

    .hero-subtitle {
        margin-top: 20px;
        font-size: 29px;
    }

    .title-part {
        line-height: 48px;
    }

    .hero-subtitle {
        line-height: 34px;
    }

    .fs-p {
        line-height: 130%;
    }

    .fs-28 {
        line-height: 23px !important;
    }

    .signup-heading {
        line-height: 20px;
    }

    .hero-penguin {
        right: -8%;
        bottom: 65%;
    }

    .advancing-feature {
        padding-top: 0;
		align-items: center;
    }

    .merge {
        height: 50px;
    }

    .advancing-features {
        grid-template-columns: 1fr;
        justify-items: start;
        gap: 21px;
    }

    .advancing-feature br {
        display: none;
    }

    .expanding-text {
        font-size: 16px !important;
        letter-spacing: -0.08px;
        padding-top: 25px;
    }

    .expanding-body2 h2 {
        font-size: 22px;
    }

    .expanding-body h2 {
        max-width: 203px;
        margin: auto;
    }

    .expanding-body h2,
    .expanding-body2 h2 {
        text-align: center !important;
    }

    .expanding-subheading {
        padding-top: 40px;
        padding-bottom: 25px;
    }

    .expanding-subheading {
        letter-spacing: -0.3px;
    }

    .expanding-card-icon,
    .expanding-card-icon img {
        max-width: 100px;
        max-height: 100px;
    }

    .expanding-card-text {
        font-size: 16px !important;
        letter-spacing: 0.14px;
    }

    .container-custom {
        padding: 0 30px;
    }
	
	.mb-40-mob{
		margin-bottom:40px;
	}

    .bcl-2 {
        border-radius: 80px;
    }

    .card1 ul li,
    .card2 ul li {
        max-width: 100%;
    }

    .card1,
    .card2 {
        min-width: 0;
    }

    .bcl-2-heading {
        font-size: 16px !important;
    }

    .card1 h5,
    .card2 h5 {
        font-size: 14px !important;
        padding-top: 18px !important;
    }

    .card1 ul {
        padding-bottom: 10px;
    }

    .disruption-circle {
        width: 100px;
        height: 100px;
    }

    .disruption-circle img {
        width: 100px;
        height: 100px;
    }

    .disruption-item p,
    .disruption-note li {
        font-size: 16px !important;
    }

    .disruption-note ul {
        padding-left: 0px;
    }

    .disruption-note {
        border-radius: 12px;
    }

    .optimal-card-title {
        line-height: 18px !important;
        padding-top: 20px;
        font-size: 16px !important;
        max-width: 226px;
        margin-bottom: 15px;
    }

    .optimal-card2-content {
        line-height: 16px;
    }

    .p-mb-15 {
        padding: 15px !important;
    }

    .optimal-highlight {
        font-size: 30px !important;
    }

    .penguin-icon {
        position: absolute;
        top: -20%;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
        pointer-events: none;
        width: 107px;
    }

    .penguin-banner-title {
        font-size: 16px;
    }

    .penguin-banner-text {
        font-size: 14px;
    }

    .penguin-banner {
        padding-left: 9px;
        padding-right: 9px;
    }

    .signup-heading {
        font-size: 16px;
        text-align: left;
    }

    .signup-subheading {
        font-size: 14px;
        text-align: left;
        line-height: 18.2px;
        letter-spacing: -0.105px;
    }

    .email-label {
        font-size: 14px;
    }

    .email-input {
        font-size: 12px;
    }

    .signup-btn .text {
        font-size: 18px;
    }

       .signup-btn-icon {
        width: 28px;
        height: 28px;
    }


    .signup-btn-icon img {
        width: 100%;
        height: 100%;
    }

    .signup-btn {
        width: 166px;
        height: 44px;
    }

    .signup-footnote {
        font-size: 10px;
    }

    .textarea {
        margin-top: 40px;
    }

    .txt1 {
        padding-bottom: 15px;
    }

    .txt2 {
        padding-bottom: 25px;
    }

    .optimal-references {
        margin-top: 23px;
    }

    .signup-section {
        padding-top: 77px !important;
    }

    .signup-heading,
    .signup-subheading {
        margin-bottom: 25px;
		font-size:16px;
    }

    .signup-btn-icon svg {
        height: 7px !important;
    }

    .optimal-card {
        margin-top: 41px;
    }

    .email-input::placeholder {
        font-size: 12px;
    }

    .footer-inner-wrapper p span {
        white-space: nowrap;
    }

    .footer-inner-wrapper p {
        line-height: 12px;
    }

    .optimal-highlight {
        margin: 10px auto;
    }

    footer .footer-inner-wrapper {
        gap: 15px;
    }

    footer .footer-inner-wrapper .footer-nav {
        margin-top: 10px;
    }

    .penguin-banner::before {
        border-image-slice: 19 120 110 19;
        border-width: 13px 230px 138px 30px;
    }

    .mw-235 {
        max-width: 176px !important;
        margin-bottom: 25px;
    }
}

/* ---------- ≤ 479px ---------- */
@media (max-width: 479px) {
	
    .hero-penguin {
        bottom: 79%;
    }

    .penguin-icon {
        position: absolute;
        top: -18%;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
        pointer-events: none;
        width: 107px;
    }

    .ls-decrease {
        letter-spacing: -0.35px !important;
    }

    .advancing-features {
        padding-top: 21px;
    }

    .expanding-cards {
        gap: 25px;
    }

    .expanding-card {
        gap: 15px;
    }

    .penguin-banner::before {
        border-image-slice: 19 120 110 19;
        border-width: 25px 150px 150px 30px;
    }
}
@media (max-width: 390px) {
	    .penguin-icon {
        top: -15%;
    }
	
.card1 ul li::before, .card2 ul li::before {
        top: 14px;
    }
	  .card1 ul li,
    .card2 ul li {
		max-width: 115px !important;
        font-size: 14px !important;
        line-height: clamp(14px, 1.49vw + 6.48px, 28px) !important;
    }
}
	
}