/* =========================================================
   PREMIUM ABOUT + WHY CHOOSE US
   Luxury glassmorphism · animated text · floating cards
   Namespaced with "abtx-" to avoid collisions with other
   section stylesheets loaded on the same page.
========================================================= */

.abtx-about-section *,
.abtx-why-section *,
.abtx-divider *{
    box-sizing:border-box;
}

.abtx-about-section,
.abtx-why-section{
    --abtx-pink:#ff0099;
    --abtx-pink-2:#ff4db8;
    --abtx-gold:#d4af37;
    --abtx-gold-bright:#ffcc00;
    --abtx-purple:#3a0066;
    --abtx-ink:#120018;
    --abtx-ease:cubic-bezier(.22,1,.36,1);

    font-family:'Poppins',sans-serif;
}

/* =========================================================
   SHARED — BADGE
========================================================= */

.abtx-badge{
    position:relative;
    overflow:hidden;

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

    padding:13px 26px;

    border-radius:999px;

    background:linear-gradient(135deg,rgba(255,0,153,.10),rgba(255,77,184,.10));
    border:1px solid rgba(255,0,153,.18);

    color:var(--abtx-pink);

    font-size:14px;
    font-weight:800;
    letter-spacing:1.4px;
    text-transform:uppercase;

    margin-bottom:24px;
}

.abtx-badge::after{
    content:'';
    position:absolute;
    top:0;left:-130%;
    width:60%;height:100%;
    background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);
    transform:skewX(-20deg);
    animation:abtxBadgeShine 3.6s ease-in-out infinite;
}

@keyframes abtxBadgeShine{
    0%,45%{left:-130%;}
    75%,100%{left:140%;}
}

.abtx-badge-dark{
    background:rgba(255,255,255,.06);
    border-color:rgba(255,255,255,.14);
    color:var(--abtx-gold-bright);
}

.abtx-badge-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:currentColor;
    animation:abtxPulseDot 1.8s ease-in-out infinite;
}

@keyframes abtxPulseDot{
    0%,100%{box-shadow:0 0 0 0 currentColor;opacity:1;}
    50%{box-shadow:0 0 0 6px transparent;opacity:.55;}
}

/* =========================================================
   SHARED — HEADING / WORD REVEAL
========================================================= */

.abtx-eyebrow{
    font-size:15px;
    font-weight:700;
    color:#555;
    text-transform:uppercase;
    letter-spacing:2px;
    margin-bottom:14px;
}

.abtx-heading{
    font-size:clamp(38px,4.9vw,68px);
    font-weight:800;
    line-height:1.14;
    color:#111;
    margin-bottom:24px;
}

.abtx-heading-light{
    color:#fff;
}

.abtx-word{
    display:inline-block;
    opacity:0;
    transform:translateY(28px);
    margin-right:.28em;
}

.abtx-reveal.show .abtx-word{
    animation:abtxWordUp .75s var(--abtx-ease) forwards;
}

.abtx-reveal.show .abtx-word:nth-child(1){animation-delay:.05s;}
.abtx-reveal.show .abtx-word:nth-child(2){animation-delay:.12s;}
.abtx-reveal.show .abtx-word:nth-child(3){animation-delay:.19s;}
.abtx-reveal.show .abtx-word:nth-child(4){animation-delay:.26s;}
.abtx-reveal.show .abtx-word:nth-child(5){animation-delay:.33s;}
.abtx-reveal.show .abtx-word:nth-child(6){animation-delay:.40s;}
.abtx-reveal.show .abtx-word:nth-child(7){animation-delay:.47s;}
.abtx-reveal.show .abtx-word:nth-child(8){animation-delay:.54s;}

@keyframes abtxWordUp{
    to{opacity:1;transform:translateY(0);}
}

.abtx-grad-word{
    background:linear-gradient(90deg,var(--abtx-pink),var(--abtx-gold-bright),var(--abtx-pink-2),var(--abtx-pink));
    background-size:300% 100%;
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    animation-name:abtxWordUp,abtxGradientFlow;
    animation-duration:.75s,6s;
    animation-timing-function:var(--abtx-ease),linear;
    animation-iteration-count:1,infinite;
    animation-fill-mode:forwards,none;
}

@keyframes abtxGradientFlow{
    0%{background-position:0% 50%;}
    100%{background-position:300% 50%;}
}

.abtx-underline{
    width:120px;
    height:4px;
    border-radius:4px;
    margin-bottom:30px;
    background:rgba(0,0,0,.08);
    overflow:hidden;
}

.abtx-underline span{
    display:block;
    width:0;
    height:100%;
    border-radius:4px;
    background:linear-gradient(90deg,var(--abtx-pink),var(--abtx-gold-bright));
    transition:width 1s .3s var(--abtx-ease);
}

.abtx-reveal.show .abtx-underline span{
    width:100%;
}

.abtx-underline-center{
    margin-left:auto;
    margin-right:auto;
}

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

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

    padding:64px 24px 56px;

    background:
        radial-gradient(circle at 8% 12%,rgba(255,0,153,.08),transparent 40%),
        radial-gradient(circle at 92% 88%,rgba(255,204,0,.07),transparent 40%),
        linear-gradient(160deg,#fffaf9 0%,#ffffff 45%,#fff6fb 100%);
    background-size:140% 140%,140% 140%,100% 100%;
    animation:abtxBgDrift 18s ease-in-out infinite;
}

@keyframes abtxBgDrift{
    0%,100%{background-position:0% 0%,100% 100%,0 0;}
    50%{background-position:15% 8%,85% 92%,0 0;}
}

.abtx-grid-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(rgba(255,0,153,.035) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,0,153,.035) 1px,transparent 1px);
    background-size:64px 64px;
    mask-image:radial-gradient(circle at 50% 30%,black,transparent 75%);
    pointer-events:none;
}

.abtx-blob{
    position:absolute;
    border-radius:50%;
    filter:blur(110px);
    pointer-events:none;
    z-index:0;
}

.abtx-blob-1{
    width:380px;
    height:380px;
    background:rgba(255,0,153,.16);
    top:-120px;
    left:-100px;
    animation:abtxBlobFloat 11s ease-in-out infinite;
}

.abtx-blob-2{
    width:340px;
    height:340px;
    background:rgba(255,204,0,.14);
    bottom:-100px;
    right:-90px;
    animation:abtxBlobFloat 13s ease-in-out infinite reverse;
}

@keyframes abtxBlobFloat{
    0%,100%{transform:translate(0,0);}
    50%{transform:translate(30px,-25px);}
}

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

    width:100%;
    max-width:1480px;
    margin:0 auto;

    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:50px;

    align-items:center;
}

/* ---------- LEFT ---------- */

.abtx-about-left{
    opacity:0;
    transform:translateY(40px);
    transition:opacity .9s var(--abtx-ease),transform .9s var(--abtx-ease);
}

.abtx-about-left.show{
    opacity:1;
    transform:translateY(0);
}

.abtx-desc{
    font-size:18.5px;
    line-height:1.9;
    color:#3d3d3d;
    margin-bottom:22px;
    max-width:640px;
}

.abtx-desc strong{
    color:#1a1a1a;
}

.abtx-cta-row{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:24px;
    margin-top:12px;
}

.abtx-btn-primary{
    position:relative;
    overflow:hidden;

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

    padding:21px 42px;

    border-radius:999px;

    background:linear-gradient(135deg,var(--abtx-pink),var(--abtx-pink-2));
    color:#fff;

    font-size:17.5px;
    font-weight:700;

    text-decoration:none;

    box-shadow:0 14px 32px rgba(255,0,153,.32);
    animation:abtxBtnPulse 2.8s ease-in-out infinite;
    transition:transform .4s var(--abtx-ease),box-shadow .4s var(--abtx-ease);
}

@keyframes abtxBtnPulse{
    0%,100%{box-shadow:0 14px 32px rgba(255,0,153,.32);}
    50%{box-shadow:0 14px 32px rgba(255,0,153,.32),0 0 0 8px rgba(255,0,153,.08);}
}

.abtx-btn-primary i{
    transition:transform .4s var(--abtx-ease);
}

.abtx-btn-primary:hover{
    transform:translateY(-4px);
    box-shadow:0 20px 42px rgba(255,0,153,.42);
    animation-play-state:paused;
}

.abtx-btn-primary:hover i{
    transform:translateX(5px);
}

.abtx-btn-primary::after{
    content:'';
    position:absolute;
    top:0;left:-130%;
    width:70%;height:100%;
    background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);
    transform:skewX(-20deg);
    transition:left .7s var(--abtx-ease);
}

.abtx-btn-primary:hover::after{
    left:140%;
}

.abtx-btn-ghost{
    display:inline-flex;
    align-items:center;
    gap:10px;

    color:#222;
    font-size:17px;
    font-weight:700;

    text-decoration:none;

    padding-bottom:2px;
    border-bottom:2px solid transparent;
    transition:.35s ease;
}

.abtx-btn-ghost i{
    color:var(--abtx-pink);
}

.abtx-btn-ghost:hover{
    color:var(--abtx-pink);
    border-bottom-color:var(--abtx-pink);
}

/* ---------- RIGHT — PHOTO + FLOATING CARDS ---------- */

.abtx-about-right{
    opacity:0;
    transform:translateY(40px);
    transition:opacity .9s .15s var(--abtx-ease),transform .9s .15s var(--abtx-ease);

    display:flex;
    justify-content:center;

    /* keeps the floating credential cards clear of the fixed
       call/WhatsApp/email dock docked to the viewport's right edge */
    padding-right:clamp(46px,6.5vw,110px);
}

.abtx-about-right.show{
    opacity:1;
    transform:translateY(0);
}

.abtx-photo-wrap{
    --abtx-mx:0;
    --abtx-my:0;

    position:relative;
    width:min(460px,80vw);
    aspect-ratio:1/1;
    margin:10px auto;
}

.abtx-chakra{
    position:absolute;
    inset:-14%;
    z-index:0;
    background:url('../images/chakra.png') center/contain no-repeat;
    opacity:.16;
    animation:abtxRingSpin 34s linear infinite;
    pointer-events:none;
}

.abtx-ring{
    position:absolute;
    inset:0;
    border-radius:50%;
    border:1px dashed rgba(255,0,153,.28);
    animation:abtxRingSpin 26s linear infinite;
}

.abtx-ring-1{
    inset:-22px;
}

.abtx-ring-2{
    inset:-52px;
    border-color:rgba(212,175,55,.28);
    animation-duration:36s;
    animation-direction:reverse;
}

@keyframes abtxRingSpin{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
}

.abtx-photo-wrap::before{
    content:'';
    position:absolute;
    inset:-16px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(255,0,153,.28),transparent 70%);
    filter:blur(24px);
    animation:abtxAuraPulse 4s ease-in-out infinite;
    z-index:-1;
}

@keyframes abtxAuraPulse{
    0%,100%{opacity:.55;transform:scale(1);}
    50%{opacity:1;transform:scale(1.08);}
}

.abtx-photo-frame{
    position:relative;
    z-index:1;
    width:100%;
    height:100%;
    border-radius:50%;
    overflow:hidden;

    padding:10px;

    background:linear-gradient(135deg,#fff,#fff0f7);
    box-shadow:0 30px 70px rgba(255,0,153,.22);

    transform:
        translate3d(calc(var(--abtx-mx) * 8px),calc(var(--abtx-my) * 8px),0);
    transition:transform .25s ease-out;
}

.abtx-photo-frame img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:50%;
    border:6px solid #fff;
    display:block;
    animation:abtxKenBurns 16s ease-in-out infinite alternate;
}

@keyframes abtxKenBurns{
    0%{transform:scale(1);}
    100%{transform:scale(1.1);}
}

.abtx-float-card{
    position:absolute;
    z-index:3;

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

    padding:16px 20px;

    border-radius:20px;

    background:rgba(255,255,255,.85);
    backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.6);

    box-shadow:0 18px 40px rgba(80,0,50,.16);

    opacity:0;
    transform:translateY(20px) scale(.9);
    transition:opacity .7s var(--abtx-ease),transform .35s var(--abtx-ease),box-shadow .35s var(--abtx-ease);
}

.abtx-about-right.show .abtx-float-card{
    opacity:1;
    transform:translateY(0) scale(1);
}

.abtx-about-right.show .abtx-fc-1{transition-delay:.25s;}
.abtx-about-right.show .abtx-fc-2{transition-delay:.4s;}
.abtx-about-right.show .abtx-fc-3{transition-delay:.55s;}
.abtx-about-right.show .abtx-fc-4{transition-delay:.7s;}

/* Positions kept tight to the portrait so cards never reach the
   fixed call/WhatsApp/email dock on the viewport's right edge. */
.abtx-fc-1{top:-2%;left:-10%;animation:abtxCardFloat 5s ease-in-out .3s infinite;}
.abtx-fc-2{bottom:0;right:-4%;animation:abtxCardFloat 5.6s ease-in-out .6s infinite;}
.abtx-fc-3{bottom:8%;left:-16%;animation:abtxCardFloat 6.2s ease-in-out .9s infinite;}
.abtx-fc-4{top:12%;right:-6%;animation:abtxCardFloat 5.3s ease-in-out 1.1s infinite;}

.abtx-about-right.show .abtx-float-card:hover{
    transform:translateY(-6px) scale(1.05) !important;
    box-shadow:0 24px 48px rgba(255,0,153,.28);
    animation-play-state:paused;
}

@keyframes abtxCardFloat{
    0%,100%{transform:translateY(0) scale(1);}
    50%{transform:translateY(-10px) scale(1);}
}

.abtx-fc-icon{
    width:50px;
    height:50px;
    min-width:50px;

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

    border-radius:50%;

    background:linear-gradient(135deg,var(--abtx-pink),var(--abtx-pink-2));
    color:#fff;
    font-size:19px;

    box-shadow:0 8px 18px rgba(255,0,153,.32);
    animation:abtxIconPulse 3.4s ease-in-out infinite;
}

@keyframes abtxIconPulse{
    0%,100%{transform:scale(1);}
    50%{transform:scale(1.08);}
}

.abtx-fc-text h4{
    font-size:22px;
    font-weight:800;
    color:#111;
    line-height:1.1;
}

.abtx-fc-static{
    font-size:16.5px !important;
}

.abtx-fc-text p{
    font-size:13px;
    font-weight:600;
    color:#666;
    text-transform:uppercase;
    letter-spacing:.4px;
}

/* =========================================================
   ANIMATED DIVIDER
========================================================= */

.abtx-divider{
    position:relative;
    z-index:2;

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

    max-width:420px;
    margin:0 auto;
    padding:0 24px;

    transform:translateY(-1px);
}

.abtx-divider-line{
    flex:1;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,0,153,.35),transparent);
}

.abtx-divider-icon{
    width:48px;
    height:48px;
    min-width:48px;

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

    border-radius:50%;

    background:linear-gradient(135deg,var(--abtx-pink),var(--abtx-gold-bright));
    color:#fff;
    font-size:17px;

    box-shadow:0 10px 26px rgba(255,0,153,.3);
    animation:abtxDividerSpin 8s linear infinite;
}

@keyframes abtxDividerSpin{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
}

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

.abtx-why-section{
    position:relative;
    overflow:hidden;

    padding:80px 24px 90px;

    background:linear-gradient(160deg,#0d0018 0%,#1c0030 50%,#25003d 100%);
}

.abtx-why-glow{
    position:absolute;
    border-radius:50%;
    filter:blur(120px);
    opacity:.35;
    pointer-events:none;
}

.abtx-why-glow-1{
    width:420px;
    height:420px;
    background:var(--abtx-pink);
    top:-140px;
    left:-120px;
    animation:abtxBlobFloat 12s ease-in-out infinite;
}

.abtx-why-glow-2{
    width:380px;
    height:380px;
    background:#7b2cff;
    bottom:-120px;
    right:-100px;
    animation:abtxBlobFloat 14s ease-in-out infinite reverse;
}

.abtx-why-container{
    position:relative;
    z-index:2;

    width:100%;
    max-width:1400px;
    margin:0 auto;
}

.abtx-why-header{
    text-align:center;
    max-width:780px;
    margin:0 auto 54px;

    opacity:0;
    transform:translateY(30px);
    transition:opacity .8s var(--abtx-ease),transform .8s var(--abtx-ease);
}

.abtx-why-header.show{
    opacity:1;
    transform:translateY(0);
}

.abtx-why-header .abtx-badge{
    justify-content:center;
}

.abtx-why-subtext{
    font-size:17px;
    line-height:1.85;
    color:rgba(255,255,255,.72);
    margin-top:6px;
}

.abtx-why-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.abtx-why-card{
    position:relative;
    overflow:hidden;

    padding:38px 30px;

    border-radius:26px;

    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.09);
    backdrop-filter:blur(14px);

    box-shadow:0 16px 40px rgba(0,0,0,.28);

    opacity:0;
    transform:translateY(36px);
    transition:
        opacity .7s var(--abtx-ease),
        transform .45s var(--abtx-ease),
        border-color .45s ease,
        box-shadow .45s ease;
}

.abtx-why-card.show{
    opacity:1;
    transform:translateY(0);
}

.abtx-why-grid .abtx-why-card:nth-child(1){transition-delay:.05s,0s,0s,0s;}
.abtx-why-grid .abtx-why-card:nth-child(2){transition-delay:.15s,0s,0s,0s;}
.abtx-why-grid .abtx-why-card:nth-child(3){transition-delay:.25s,0s,0s,0s;}
.abtx-why-grid .abtx-why-card:nth-child(4){transition-delay:.35s,0s,0s,0s;}
.abtx-why-grid .abtx-why-card:nth-child(5){transition-delay:.45s,0s,0s,0s;}
.abtx-why-grid .abtx-why-card:nth-child(6){transition-delay:.55s,0s,0s,0s;}

.abtx-why-card::before{
    content:'';
    position:absolute;
    top:0;left:0;
    width:100%;
    height:3px;
    background:linear-gradient(90deg,var(--abtx-pink),var(--abtx-gold-bright),var(--abtx-pink-2));
    background-size:200% 100%;
    opacity:.7;
    transition:opacity .4s ease;
}

.abtx-why-card:hover{
    transform:translateY(-10px);
    border-color:rgba(255,0,153,.4);
    box-shadow:0 26px 60px rgba(255,0,153,.24);
}

.abtx-why-card:hover::before{
    opacity:1;
    animation:abtxGradientFlow 3s linear infinite;
}

.abtx-why-icon{
    width:70px;
    height:70px;

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

    border-radius:20px;

    background:linear-gradient(135deg,rgba(255,0,153,.18),rgba(123,44,255,.18));
    border:1px solid rgba(255,255,255,.12);

    color:#fff;
    font-size:29px;

    margin-bottom:24px;

    animation:abtxWhyIconFloat 4s ease-in-out infinite;
    transition:transform .45s var(--abtx-ease),background .45s ease;
}

@keyframes abtxWhyIconFloat{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-6px);}
}

.abtx-why-card:hover .abtx-why-icon{
    transform:scale(1.1) rotate(-6deg);
    background:linear-gradient(135deg,var(--abtx-pink),var(--abtx-pink-2));
    animation-play-state:paused;
}

.abtx-why-card h3{
    font-size:20px;
    font-weight:700;
    color:#fff;
    margin-bottom:12px;
}

.abtx-why-card p{
    font-size:15px;
    line-height:1.8;
    color:rgba(255,255,255,.66);
}

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

@media(max-width:1200px){

    .abtx-about-container{
        grid-template-columns:1fr;
        gap:60px;
        text-align:center;
    }

    .abtx-about-left{
        order:1;
    }

    .abtx-eyebrow,
    .abtx-underline{
        margin-left:auto;
        margin-right:auto;
    }

    .abtx-desc{
        margin-left:auto;
        margin-right:auto;
    }

    .abtx-cta-row{
        justify-content:center;
    }

    .abtx-about-right{
        order:2;
        padding-right:0;
    }

    /* Floating cards become a static grid below the photo —
       keeps the layout safe on medium screens without negative
       offsets pushing content off-canvas. */
    .abtx-photo-wrap{
        margin:20px auto 40px;
    }

    .abtx-float-card{
        position:static;
        animation:none !important;
        margin:0;
    }

    .abtx-about-right .abtx-photo-wrap{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:16px;
        width:100%;
        max-width:420px;
        aspect-ratio:auto;
    }

    .abtx-about-right .abtx-photo-frame{
        position:relative;
        grid-column:1/-1;
        justify-self:center;
        width:min(340px,70vw);
        aspect-ratio:1/1;
        margin-bottom:20px;
    }

    .abtx-ring{
        width:min(340px,70vw);
        height:min(340px,70vw);
        inset:auto;
        top:0;left:50%;
        transform:translateX(-50%);
    }

    .abtx-ring-1{
        margin:-22px 0 0 -22px;
        width:calc(min(340px,70vw) + 44px);
        height:calc(min(340px,70vw) + 44px);
    }

    .abtx-ring-2{
        margin:-52px 0 0 -52px;
        width:calc(min(340px,70vw) + 104px);
        height:calc(min(340px,70vw) + 104px);
    }

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

@media(max-width:991px){

    .abtx-about-section{
        padding:56px 20px 48px;
    }

    .abtx-why-section{
        padding:70px 20px 80px;
    }
}

@media(max-width:768px){

    .abtx-about-section{
        padding:48px 16px 40px;
    }

    .abtx-why-section{
        padding:60px 16px 70px;
    }

    .abtx-heading{
        font-size:clamp(30px,7vw,40px);
    }

    .abtx-desc{
        font-size:16px;
    }

    .abtx-why-grid{
        grid-template-columns:1fr;
    }

    .abtx-why-card{
        padding:32px 24px;
    }

    .abtx-cta-row{
        flex-direction:column;
        align-items:center;
        gap:18px;
    }
}

@media(max-width:480px){

    .abtx-about-right .abtx-photo-wrap{
        grid-template-columns:1fr;
    }

    .abtx-fc-text h4{
        font-size:17px;
    }

    .abtx-divider{
        max-width:280px;
    }

    .abtx-why-subtext{
        font-size:15.5px;
    }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){
    .abtx-about-section *,
    .abtx-why-section *,
    .abtx-divider *{
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.001ms !important;
    }
}
