/*==================================================
APPLICATION HERO
==================================================*/
.hero-application {
    position: relative;

    overflow: hidden;

    isolation: isolate;

    background-image: url("../../images/application-hero.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-top:6rem;
    padding-bottom:6rem;

}

.hero-essay-editing {

     position: relative;

    overflow: hidden;

    isolation: isolate;

    background-image: url("../../images/application-essay-hero.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-top:6rem;
    padding-bottom:6rem;


}

.hero-cv-editing {

     position: relative;

    overflow: hidden;

    isolation: isolate;

    background-image: url("../../images/application-cv-hero.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-top:6rem;
    padding-bottom:6rem;


}

.hero-interview {
    position: relative;

    overflow: hidden;

    isolation: isolate;

    background-image: url("../../images/interview-hero.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-top:6rem;
    padding-bottom:6rem;

}

.hero-essay-consulting {
    position: relative;

    overflow: hidden;

    isolation: isolate;

    background-image: url("../../images/hero-essay-consulting.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-top:6rem;
    padding-bottom:6rem;
}



.hero-actions{

display:flex;

gap:1rem;

flex-wrap:wrap;

margin-top:2rem;

}

.feature-card{

background:white;

padding:2.5rem;

border-radius:22px;

box-shadow:0 18px 45px rgba(0,0,0,.08);

text-align:center;

transition:.35s;

height:100%;

}

.feature-card:hover{

transform:translateY(-12px);

box-shadow:0 30px 60px rgba(0,0,0,.12);

}

.feature-icon{

width:72px;

height:72px;

margin:auto;

margin-bottom:1.5rem;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:rgba(var(--primary-rgb),.08);

font-size:2rem;

}

.feature-card h3{

margin-bottom:1rem;

}

/*==================================================
APPLICATION SERVICES
==================================================*/

.services-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:2rem;

margin-top:4rem;

}

.service-card{

background:white;

padding:2.75rem;

border-radius:24px;

box-shadow:0 18px 50px rgba(0,0,0,.08);

display:flex;

flex-direction:column;

transition:.35s;

height:100%;

}

.service-card:hover{

transform:translateY(-10px);

box-shadow:0 28px 60px rgba(0,0,0,.14);

}

.service-icon{

width:80px;

height:80px;

border-radius:18px;

background:rgba(var(--primary-rgb),.08);

display:flex;

align-items:center;

justify-content:center;

font-size:2rem;

margin-bottom:1.75rem;

}

.service-card h3{

margin-bottom:1rem;

line-height:1.3;

}

.service-card p{

margin-bottom:1.5rem;

color:#666;

}

.service-card ul{

margin:0 0 2rem;

padding-left:1.2rem;

}

.service-card li{

margin-bottom:.7rem;

color:#555;

}

.service-card .btn{

margin-top:auto;

align-self:flex-start;

}

@media(max-width:1000px){

.services-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:700px){

.services-grid{

grid-template-columns:1fr;

}

}

/*==================================================
APPLICATION ECOSYSTEM
==================================================*/

.ecosystem{

position:relative;

margin:5rem auto;

max-width:1000px;

min-height:650px;

}

.ecosystem-centre{

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);

z-index:5;

}

.centre-circle{

width:220px;

height:220px;

border-radius:50%;

background:linear-gradient(135deg,var(--color-primary),#6030c5);

color:white;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

box-shadow:0 25px 60px rgba(0,0,0,.18);

padding:2rem;

}

.centre-circle h3{

color:white;

margin-bottom:1rem;

}

.centre-circle p{
color: white;
opacity:.95;

margin:0;

}

.eco-card{

width:180px;

background:white;

padding:1.6rem;

border-radius:18px;

text-align:center;

box-shadow:0 15px 40px rgba(0,0,0,.08);

transition:.35s;

}

.eco-card:hover{

transform:translateY(-8px);

box-shadow:0 25px 50px rgba(0,0,0,.12);

}

.eco-card{

font-size:2rem;

}

.eco-card h4{

font-size:1.1rem;

line-height:1.35;

margin:.8rem 0 .5rem;
overflow-wrap:break-word;

hyphens:auto;

}

.ecosystem-item{

position:absolute;

}

/* top */

.item-essay{

left:50%;

top:0;

transform:translateX(-50%);

}

/* top right */

.item-cv{

right:5%;

top:18%;

}

/* bottom right */

.item-interviews{

right:5%;

bottom:18%;

}

/* bottom */

.item-supplementals{

left:50%;

bottom:0;

transform:translateX(-50%);

}

/* bottom left */

.item-recommendations{

left:5%;

bottom:18%;

}

/* top left */

.item-activities{

left:5%;

top:18%;

}

.ecosystem-footer{

max-width:700px;

margin:auto;

text-align:center;

}

@media(max-width:900px){

.ecosystem{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:1.5rem;

min-height:auto;

}

.ecosystem-item,

.ecosystem-centre{

position:static;

transform:none;

}

.centre-circle{

margin:auto;

margin-bottom:2rem;

}

.eco-card{

width:100%;

}

}

@media(max-width:650px){

.ecosystem{

grid-template-columns:1fr;

}

}


/* Application Essay Editing */




.hero-description {

    max-width:550px;
    font-size:1.15rem;
    line-height:1.7;

}



.hero-features {

    display:flex;
    flex-direction:column;
    gap:12px;

}


.hero-feature {

    display:flex;
    align-items:center;
    gap:12px;
    font-weight:500;

}


.hero-feature i {

    color:#7b2cbf;

}



.hero-image {

    position:relative;

}



.essay-preview-card {

    position:relative;
    background:white;
    border-radius:24px;
    padding:20px;
    box-shadow:0 25px 60px rgba(0,0,0,.15);

}



.essay-header {

    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:15px;
    font-weight:600;

}



.status {

    background:#eee4ff;
    color:#320064;
    padding:6px 14px;
    border-radius:30px;
    font-size:.85rem;

}



.essay-preview-card img {

    width:100%;
    border-radius:12px;

}



.floating-card {

    position:absolute;
    background:white;
    padding:15px 20px;
    border-radius:15px;
    box-shadow:0 15px 40px rgba(0,0,0,.15);

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

}


.feedback-card {

    left:-50px;
    bottom:80px;

}



.ai-card {

    right:-40px;
    top:120px;

}



.floating-card small {

    display:block;
    color:#666;

}

.mistake-card {
    text-align:center;
    align-items: center;
}

.mistake-card i, .deliver-card i {
    display:flex;
    justify-content:center;
    align-items:center;

    width:50px;
    height:50px;

    margin:0 auto 1.5rem;

    font-size:3rem;
    transition:all .3s ease;
    color:rgb(50,0,100);

}


.mistake-card h3{

    text-align:center;

    margin-bottom:1rem;

}
.mistake-card, .deliver-card{

    height:100%;

    transition:
        transform .3s ease,
        box-shadow .3s ease;

         position:relative;

    overflow:hidden;
}

.mistake-card:hover, .deliver-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-xl);

}

.mistake-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:5px;

    background:rgb(225,74,21);

    transition:height .3s ease;

}

.mistake-card:hover::before{

    height:8px;

}

.bg-purple {
    background-color: #320064;
}

.text-white {
    color:white;
}

.deliver-card {
    margin-top:1rem;
    text-align: center;
}

.guarantee {
    text-align: center;
}

/* =======================================
   Sticky Upload Button
======================================= */

.sticky-upload-btn{

    position:fixed;

    right:30px;
    bottom:30px;

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

    padding:16px 24px;

    background:var(--color-primary);

    color:#fff;

    border-radius:999px;

    text-decoration:none;

    font-weight:600;

    font-size:.95rem;

    box-shadow:
    0 12px 35px rgba(50,0,100,.25);

    z-index:999;

    opacity:0;
    visibility:hidden;

    transform:
    translateY(20px);

    transition:
    .35s ease;

}



.sticky-upload-btn.show{

    opacity:1;

    visibility:visible;

    transform:
    translateY(0);

}



.sticky-upload-btn:hover{

    background:var(--color-primary-hover);

    color:#fff;

    transform:
    translateY(-3px);

}



.sticky-upload-btn i{

    font-size:1rem;

}

@media (max-width:768px){

.sticky-upload-btn{

    left:15px;
    right:15px;

    bottom:15px;

    width:auto;

    justify-content:center;

    border-radius:16px;

    padding:16px;

}

}

.audience-icon {
    color: var(--color-primary);
}

/* Interview */
.interview-card p{
    text-align: left;
}
.interview-card ul {
    text-align: left;
    list-style-type: disc;
    margin-left: 1rem;
}

.interview-bold {
    font-weight: bold;
    color: var(--color-primary);
}

.comparison-wrapper{

    overflow-x:auto;

    border-radius:20px;

    box-shadow:0 15px 45px rgba(0,0,0,.08);

}

.comparison-table{

    width:100%;

    min-width:1000px;

    border-collapse:collapse;

    background:white;

}

.comparison-table th{

    background:var(--color-primary);

    color:white;

    padding:18px;

    font-size:.95rem;

    text-align:center;

}

.comparison-table td{

    padding:18px;

    text-align:center;

    border-bottom:1px solid #ececec;

}

.comparison-table td:first-child{

    font-weight:700;

    text-align:left;

    background:#fafafa;

    position:sticky;

    left:0;

}

.comparison-table tbody tr:nth-child(even){

    background:#fcfcfc;

}

.comparison-table i.fa-check{

    color:#24a148;

}

.comparison-table i.fa-minus{

    color:#999;

}