@charset "UTF-8";
:root{
    --primary:#003b7a;
    --secondary:#d50000;
    --gold:#ffc107;
}

body{
    background:#f5f7fb;
    font-family:'Segoe UI',sans-serif;
}

.hero{
    background:linear-gradient(135deg,#001f5b,#0b4db7);
    border-radius:25px;
    padding:50px;
    color:#fff;
    margin:30px 0;
    overflow:hidden;
    position:relative;
}

.hero:before{
    content:'';
    position:absolute;
    width:350px;
    height:350px;
    border-radius:50%;
    background:rgba(255,255,255,.05);
    top:-120px;
    right:-120px;
}

.student-photo{
    width:100%;
    max-width:320px;
    border-radius:20px;
    border:6px solid rgba(255,255,255,.15);
    box-shadow:0 10px 25px rgba(0,0,0,.25);
}

.logo{
    max-height:90px;
}

.germany-badge{
    display:inline-block;
    background:linear-gradient(90deg,#000,#dd0000,#ffce00);
    color:#fff;
    padding:10px 25px;
    border-radius:50px;
    font-weight:700;
    margin-bottom:15px;
}

.malta-badge{
    display:inline-block;
    background:linear-gradient(90deg,#cf142b,#ffffff);
    color:#222;
    padding:10px 25px;
    border-radius:50px;
    font-weight:700;
    margin-bottom:15px;
}
.usa-badge{
    display:inline-block;
    background:linear-gradient(90deg,#3C3B6E,#B22234,#FFFFFF);
    color:#fff;
    padding:10px 25px;
    border-radius:50px;
    font-weight:700;
    margin-bottom:15px;
    letter-spacing:.5px;
}

.uk-badge{
    display:inline-block;
    background:linear-gradient(135deg,#012169,#1E3A8A,#C8102E);
    color:#fff;
    padding:10px 25px;
    border-radius:50px;
    font-weight:700;
    letter-spacing:.5px;
    margin-bottom:15px;
}

.highlight{
    color:#ffd54f;
}

.stat-card{
    background:#fff;
    border-radius:18px;
    padding:25px;
    text-align:center;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
    height:100%;
}

.stat-card i{
    color:var(--primary);
    font-size:32px;
    margin-bottom:10px;
}

.offer-card{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
    margin-bottom:25px;

    position:relative;
    transition:all .4s ease;
    cursor:pointer;
}

.offer-card img{
    width:100%;
    display:block;

    transition:transform .5s ease;
}
/* Shine effect */
.offer-card::before{
    content:'';
    position:absolute;
    top:0;
    left:-100%;

    width:60%;
    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.4),
        transparent
    );

    transition:.8s;
    z-index:2;
}

/* Hover Animation */
.offer-card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 40px rgba(11,77,183,.25);
}

.offer-card:hover img{
    transform:scale(1.05);
}

.offer-card:hover::before{
    left:140%;
}
.offer-card{
    animation:floatCard 4s ease-in-out infinite;
}

@keyframes floatCard{
    0%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-4px);
    }
    100%{
        transform:translateY(0);
    }
}

.university-card{
    background:#fff;
    border-left:5px solid var(--primary);
    border-radius:15px;
    padding:18px;
    margin-bottom:15px;
    box-shadow:0 5px 15px rgba(0,0,0,.08);
}

.university-card h5{
    color:var(--primary);
    font-weight:700;
}

/* .cta{
    background:linear-gradient(135deg,#d50000,#ff1744);
    color:#fff;
    border-radius:20px;
    padding:35px;
    text-align:center;
    margin:30px 0;
}
 */
.section-title{
    font-weight:700;
    color:var(--primary);
    margin-bottom:25px;
}

@media(max-width:768px){

.hero{
    text-align:center;
    padding:30px;
}

.student-photo{
    margin-bottom:25px;
}

}

#imageLightbox .modal-dialog{
    max-width:90%;
}

#lightboxImage{
    max-height:90vh;
    width:auto;
    margin:auto;
    display:block;
}

.lightbox-nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);

    width:55px;
    height:55px;

    border:none;
    border-radius:50%;

    background:rgba(0,0,0,.65);
    color:#fff;

    z-index:9999;
    transition:.3s;
}

.lightbox-nav:hover{
    background:#0B4D8C;
}

.lightbox-prev{
    left:15px;
}

.lightbox-next{
    right:15px;
}

.lightbox-nav i{
    font-size:20px;
}

@media(max-width:768px){

    .lightbox-nav{
        width:42px;
        height:42px;
    }

    .lightbox-nav i{
        font-size:16px;
    }

    .lightbox-prev{
        left:5px;
    }

    .lightbox-next{
        right:5px;
    }
}
/* TIMELINE */

.step{
    text-align:center;
    padding:25px;
}

.step-icon{
    width:90px;
    height:90px;
    border-radius:50%;
    background:var(--primary);
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:auto;
    font-size:30px;
    margin-bottom:20px;
}
.cta{
    text-align:center;
    padding:80px 0;
}

.btn-lingo{
    background:var(--primary);
    color:white;
    padding:15px 35px;
    border-radius:50px;
    text-decoration:none;
    font-weight:600;
}

.btn-lingo:hover{
    color:white;
    background:#003d82;
}
.highlight-box{
    background:white;
    border-left:5px solid var(--primary);
    padding:30px;
    border-radius:12px;
    box-shadow:0 5px 20px rgba(0,0,0,.05);
}
/* QUOTE */

.quote-section{
    background:linear-gradient(135deg,#0056b3,#003a80);
    color:white;
    padding:80px 0;
}

.quote{
    font-size:24px;
    font-style:italic;
    line-height:1.8;
}
.badge-accepted{
    display:inline-block;
    background:#28a745;
    color:#fff;
    padding:10px 25px;
    border-radius:50px;
    font-weight:600;
    margin-top:15px;
}

.story-navigation{
    margin:50px 0;
    position:relative;
}

.storySwiper{
    padding:10px 50px;
}

.storySwiper .swiper-slide{
    text-align:center;
}

.storySwiper a{
    text-decoration:none;
    color:#333;
}

.storySwiper img{
    width:90px;
    height:90px;
    border-radius:50%;
    object-fit:cover;
    border:4px solid #fff;
    box-shadow:0 5px 15px rgba(0,0,0,.12);
    transition:.3s;
}

.storySwiper img:hover{
    transform:scale(1.08);
}

.storySwiper span{
    display:block;
    margin-top:10px;
    font-size:14px;
    font-weight:600;
}

.story-prev,
.story-next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:40px;
    height:40px;
    border-radius:50%;
    background:#003b7a;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:10;
}

.story-prev{
    left:0;
}

.story-next{
    right:0;
}

@media(max-width:768px){

    .storySwiper{
        padding:10px 35px;
    }

    .storySwiper img{
        width:70px;
        height:70px;
    }

    .storySwiper span{
        font-size:12px;
    }

}

    /*=====================================
ACADEMIC ACHIEVEMENT CARD
=====================================*/

.achievement-card{

    position:absolute;

    top:35px;

    right:35px;

    width:190px;

    padding:18px;

    border-radius:20px;

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.25);

    box-shadow:0 15px 40px rgba(0,0,0,.18);

    text-align:center;

    z-index:100;

}

.achievement-label{

    font-size:.78rem;

    color:#FFD34D;

    text-transform:uppercase;

    letter-spacing:1px;

    font-weight:700;

}

.achievement-score{

    font-size:3rem;

    line-height:1;

    margin:12px 0 6px;

    font-weight:800;

    color:#fff;

}

.achievement-type{

    font-size:1rem;

    color:#FFD34D;

    font-weight:700;

}

.achievement-divider{

    width:60px;

    height:2px;

    background:#FFD34D;

    margin:15px auto;

}

.achievement-extra{

    font-size:.85rem;

    color:#f4f4f4;

    line-height:1.5;

}
@media(max-width:992px){

.achievement-card{

    position:relative;

    top:auto;

    right:auto;

    margin:0 auto 25px;

    width:220px;

}

}
/*==========================================================
FREE CONSULTATION FORM
==========================================================*/

.submit-story-card{

    max-width:980px;

    margin:3rem auto;

    border-radius:24px;

    overflow:hidden;

    background:#fff;

    box-shadow:0 20px 60px rgba(0,0,0,.08);

}

.submit-story-card .hd{

    /* background:linear-gradient(135deg,#0B4A95,#1565C0); */

    color:#fff;

    padding:1.5rem 2rem;

    font-size:1.8rem;

    font-weight:700;

}

/* .submit-story-card .section-tag{

    display:inline-block;

    margin-bottom:.75rem;

    background:rgba(255,255,255,.15);

    color:#FFD54F;

    border:1px solid rgba(255,255,255,.2);

} */

.submit-story-card .bd{

    padding:2.5rem;

}

.submit-story-card .section-desc{

    color:#667085;

    line-height:1.8;

    margin-bottom:2rem;

}



/*==========================================================
GRID
==========================================================*/

#contactForm .form-grid{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:1.4rem;

}

#contactForm .full{

    grid-column:1/-1;

}

#contactForm .hp-field{

    display:none;

}



/*==========================================================
LABELS
==========================================================*/

#contactForm label{

    display:block;

    margin-bottom:.55rem;

    font-weight:600;

    color:#17345C;

    font-size:.95rem;

}



/*==========================================================
INPUTS
==========================================================*/

#contactForm .input{

    width:100%;

    border:1px solid #D7DFEA;

    border-radius:14px;

    padding:.95rem 1rem;

    font-size:1rem;

    transition:.3s;

    background:#F9FBFD;

}
     .card{border-radius:16px !important}
    .card .hd{    color:#0b4d8c;

    font-size:24px;

    font-weight:700;

    padding:20px 30px;

    position:relative;}
    .card .bd{padding:1.1rem}


#contactForm textarea.input{

    /* min-height:150px; */

    resize:vertical;

}
#contactForm .txt-area{height:90px !important;}

#contactForm .input:hover{

    border-color:#AFC7E9;

}

#contactForm .input:focus{

    outline:none;

    border-color:#1565C0;

    background:#fff;

    box-shadow:0 0 0 4px rgba(21,101,192,.12);

}



/*==========================================================
SELECT
==========================================================*/

#contactForm select.input{

    cursor:pointer;

}



/*==========================================================
CONSENT
==========================================================*/

#contactForm .consent{

    display:flex;

    align-items:flex-start;

    gap:.75rem;

    margin-top:.5rem;

}

#contactForm .consent input{

    margin-top:4px;

}

#contactForm .consent span{

    color:#667085;

    line-height:1.6;

}

#contactForm .consent a{

    color:var(--primary);

    text-decoration:none;

    font-weight:600;

}

#contactForm .consent a:hover{

    text-decoration:underline;

}



/*==========================================================
BUTTON
==========================================================*/

#contactForm .submit{

    margin-top:2rem;

    width:100%;

    padding:1rem;

    border:none;

    border-radius:14px;

    font-size:1.05rem;

    font-weight:700;

    cursor:pointer;

    transition:.35s;

}

#contactForm .submit:hover{

    transform:translateY(-3px);

    box-shadow:0 15px 35px rgba(11,74,149,.22);

}



/*==========================================================
STATUS
==========================================================*/

#cf-status{

    margin-top:1rem;

    font-weight:600;

    color:#0B4A95;

}



/*==========================================================
SHOW / HIDE
==========================================================*/

.hidden-story{

    max-height:0;

    opacity:0;

    overflow:hidden;

    transition:max-height .6s ease,
               opacity .45s ease,
               margin .45s ease;

    margin:0 auto;

}

.hidden-story.show{

    max-height:2500px;

    opacity:1;

    margin-top:2rem;

}



/*==========================================================
ANIMATION
==========================================================*/

.hidden-story.show{

    animation:fadeSlide .6s ease;

}

@keyframes fadeSlide{

from{

    opacity:0;

    transform:translateY(35px);

}

to{

    opacity:1;

    transform:none;

}

}



/*==========================================================
RESPONSIVE
==========================================================*/

@media(max-width:992px){

.submit-story-card{

    margin:2rem 1rem;

}

.submit-story-card .bd{

    padding:2rem;

}

}



@media(max-width:768px){

#contactForm .form-grid{

    grid-template-columns:1fr;

}

.submit-story-card .hd{

    font-size:1.45rem;

    padding:1.25rem;

}

.submit-story-card .bd{

    padding:1.5rem;

}

#contactForm .submit{

    width:100%;

}

}



@media(max-width:576px){

.submit-story-card{

    border-radius:18px;

}

#contactForm .input{

    padding:.9rem;

}

.submit-story-card .section-desc{

    font-size:.95rem;

}

}
.section-tag {
    display: inline-block;
    padding: 8px 18px;
    background: rgba(244, 180, 0, .12);
    color: #F4B400;
    font-weight: 600;
    border-radius: 50px;
    margin-bottom: 15px;
}
