/*====================================================
THE GRADUATE TALK
Premium Website
Author: TENSE Technologies
=====================================================*/

/*==============================
GOOGLE FONTS
===============================*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');



/*==============================
CSS VARIABLES
===============================*/

:root{

--primary:#0B1F3A;
--secondary:#143D72;
--gold:#C79A32;
--gold-dark:#B1841F;

--white:#ffffff;

--light:#F8F9FC;

--text:#222;

--gray:#666;

--border:#E7EAF0;

--radius:18px;

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

--transition:.35s ease;

}

/*==============================
RESET
===============================*/

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Inter',sans-serif;

background:#fff;

color:var(--text);

line-height:1.7;

overflow-x:hidden;

}

img{

max-width:100%;

display:block;

}

a{

text-decoration:none;

color:inherit;

}

ul{

list-style:none;

}

.container{

width:min(1200px,92%);

margin:auto;

}

.section{

padding:120px 0;

}

/*==============================
TYPOGRAPHY
===============================*/

h1, h2, h3, h4, h5, h6 {
    font-family: 'Lora', serif;

color:var(--primary);

font-weight:700;

}

h1{

font-size:4rem;

line-height:1.1;

margin-bottom:30px;

}

h2{

font-size:2.8rem;

margin-bottom:20px;

}

h3{

font-size:1.5rem;

margin-bottom:15px;

}

p{

font-size:1.05rem;

color:#555;

}

.section-heading{

text-align:center;

max-width:800px;

margin:auto auto 70px;

}

.section-tag{

display:inline-block;

padding:10px 22px;

background:#EEF3FA;

color:var(--primary);

border-radius:40px;

font-size:.9rem;

font-weight:600;

margin-bottom:20px;

letter-spacing:1px;

text-transform:uppercase;

}

/*==============================
BUTTONS
===============================*/

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 34px;

border-radius:50px;

font-weight:600;

transition:.3s;

cursor:pointer;

}

.btn-primary{

background:var(--gold);

color:#fff;

}

.btn-primary:hover{

background:var(--gold-dark);

transform:translateY(-3px);

box-shadow:0 10px 30px rgba(199,154,50,.35);

}

.btn-secondary{

background:var(--primary);

color:#fff;

margin-left:15px;

}

.btn-secondary:hover{

background:#082047;

}

.btn-outline{

border:2px solid var(--primary);

color:var(--primary);

background:#fff;

}

.btn-outline:hover{

background:var(--primary);

color:#fff;

}

/*==============================
HEADER
===============================*/

.header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:999;

background:rgba(255,255,255,.92);

backdrop-filter:blur(14px);

border-bottom:1px solid rgba(0,0,0,.05);

}

.header .container{

display:flex;

align-items:center;

justify-content:space-between;

height:90px;

}

.logo{

font-family:'Space Grotesk',sans-serif;

font-size:1.8rem;

font-weight:700;

color:var(--primary);

}

.navbar ul{

display:flex;

gap:40px;

}

.navbar a{

font-weight:500;

position:relative;

transition:.3s;

}

.navbar a:hover{

color:var(--gold);

}

.navbar a.active{

color:var(--gold);

}

.header-buttons{

display:flex;

align-items:center;

gap:20px;

}

.menu-btn{

display:none;

background:none;

border:none;

font-size:1.8rem;

cursor:pointer;

color:var(--primary);

}

/*==============================
HERO
===============================*/

.hero{

padding-top:40px;

padding-bottom:70px;

position:relative;

overflow:hidden;

}

.hero-grid{

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:80px;

}
.hero,
.hero-section,
.hero {
    margin-top: 0 !important;
    padding-top: 15px !important;
}

.hero-tag{

display:inline-block;

padding:10px 20px;

background:#EEF3FA;

border-radius:30px;

font-weight:600;

color:var(--primary);

margin-bottom:25px;

}

.hero p{

font-size:1.2rem;

margin:30px 0;

max-width:600px;

}

.hero-buttons{

display:flex;

align-items:center;

margin-bottom:60px;

}

.hero-stats{

display:flex;

gap:50px;

}

.hero-stats h2{

font-size:2rem;

margin-bottom:5px;

}

.hero-image{

position:relative;

}

.image-card{

background:#fff;

padding:30px;

border-radius:30px;

box-shadow:var(--shadow);

}

.floating-card{

position:absolute;

bottom:20px;

left:-30px;

background:#fff;

padding:20px 30px;

border-radius:18px;

display:flex;

align-items:center;

gap:15px;

box-shadow:var(--shadow);

font-weight:600;

}

.floating-card i{

color:var(--gold);

font-size:1.5rem;

}

.hero-shape-1{

position:absolute;

width:350px;

height:350px;

background:#EEF3FA;

border-radius:50%;

top:-100px;

right:-100px;

z-index:-1;

}

.hero-shape-2{

position:absolute;

width:280px;

height:280px;

background:#FFF7E6;

border-radius:50%;

bottom:-100px;

left:-100px;

z-index:-1;

}

/* ==========================================
   HEADER
========================================== */

.site-header {
    width: 100%;
    background: #ffffff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    position: sticky;
    top: 0;
    z-index: 9999;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}

.header-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;

    min-height: 82px;
    padding: 0 25px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* ==========================================
   LOGO
========================================== */

.site-logo {
    display: flex;
    align-items: center;
    gap: 12px;

    text-decoration: none;
    color: #1a1a1a;

    transition: transform 0.3s ease;
}

.site-logo:hover {
    transform: translateY(-1px);
}


/* Logo Image */

.site-logo img {
    width: 58px;
    height: 58px;

    object-fit: contain;
    display: block;

    border-radius: 10px;
}


/* Logo Text */

.logo-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.logo-title {
    font-family: "Poppins", sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;

    color: #0A4D68;
}

.logo-tagline {
    margin-top: 3px;

    font-family: "Inter", sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.4px;

    color: #777777;
}


/* ==========================================
   NAVIGATION
========================================== */

.main-nav {
    display: flex;
    align-items: center;
    gap: 28px;
}

.main-nav a {
    position: relative;

    text-decoration: none;

    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 600;

    color: #333333;

    transition: color 0.3s ease;
}

.main-nav a:not(.header-btn)::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: -7px;

    width: 0;
    height: 2px;

    background: #FFC300;

    transition: width 0.3s ease;
}

.main-nav a:hover {
    color: #0A4D68;
}

.main-nav a:not(.header-btn):hover::after {
    width: 100%;
}


/* ==========================================
   HEADER BUTTON
========================================== */

.header-btn {
    padding: 11px 20px;

    background: #0A4D68;
    color: #ffffff !important;

    border-radius: 7px;

    transition:
        background 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.header-btn:hover {
    background: #083c51;
    transform: translateY(-2px);

    box-shadow: 0 6px 15px rgba(10, 77, 104, 0.25);
}


/* ==========================================
   MOBILE MENU BUTTON
========================================== */

.menu-toggle {
    display: none;

    width: 42px;
    height: 42px;

    padding: 8px;

    border: none;
    background: transparent;

    cursor: pointer;

    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.menu-toggle span {
    display: block;

    width: 25px;
    height: 2px;

    background: #0A4D68;

    border-radius: 5px;

    transition: 0.3s ease;
}


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

@media (max-width: 900px) {

    .header-container {
        min-height: 75px;
        padding: 0 20px;
    }

    .site-logo img {
        width: 52px;
        height: 52px;
    }

    .logo-title {
        font-size: 18px;
    }

    .main-nav {
        gap: 18px;
    }

    .main-nav a {
        font-size: 13px;
    }
}


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

@media (max-width: 700px) {

    .header-container {
        min-height: 70px;
        padding: 0 16px;
    }

    .site-logo {
        gap: 9px;
    }

    .site-logo img {
        width: 46px;
        height: 46px;
    }

    .logo-title {
        font-size: 16px;
    }

    .logo-tagline {
        font-size: 8px;
    }


    /* Hide Desktop Navigation */

    .main-nav {
        position: absolute;

        top: 70px;
        left: 0;

        width: 100%;

        background: #ffffff;

        padding: 20px;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        gap: 0;

        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);

        opacity: 0;
        visibility: hidden;

        transform: translateY(-10px);

        transition:
            opacity 0.3s ease,
            visibility 0.3s ease,
            transform 0.3s ease;
    }

    /* Open Navigation */

    .main-nav.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .main-nav a {
        padding: 13px 5px;

        border-bottom: 1px solid #eeeeee;

        font-size: 14px;
    }

    .main-nav a:last-child {
        border-bottom: none;
    }

    .main-nav a:not(.header-btn)::after {
        display: none;
    }

    .header-btn {
        margin-top: 12px;
        text-align: center;
    }


    /* Show Mobile Menu */

    .menu-toggle {
        display: flex;
    }

}


/* ==========================================
   SMALL PHONES
========================================== */

@media (max-width: 380px) {

    .header-container {
        padding: 0 12px;
    }

    .site-logo img {
        width: 42px;
        height: 42px;
    }

    .logo-title {
        font-size: 14px;
    }

    .logo-tagline {
        display: none;
    }

    .menu-toggle {
        width: 38px;
    }
}
/*====================================================
MISSION SECTION
====================================================*/

.mission{
    background:#fff;
}

.mission-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
}

.mission-image img{
    width:100%;
    border-radius:24px;
    box-shadow:0 20px 60px rgba(0,0,0,.08);
}

.mission-content{
    display:grid;
    gap:25px;
}

.mission-card{
    background:#fff;
    padding:35px;
    border-radius:20px;
    border:1px solid var(--border);
    transition:.35s;
    box-shadow:0 8px 25px rgba(0,0,0,.05);
}

.mission-card:hover{
    transform:translateY(-8px);
    box-shadow:0 25px 50px rgba(0,0,0,.08);
}

.mission-card i{
    width:65px;
    height:65px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--gold);
    color:#fff;
    border-radius:50%;
    font-size:24px;
    margin-bottom:20px;
}

.mission-card h3{
    margin-bottom:12px;
}

/*====================================================
FEATURED BOOK
====================================================*/

.featured-book{
    background:var(--light);
}

.book-grid{
    display:grid;
    grid-template-columns:420px 1fr;
    gap:80px;
    align-items:center;
}

.book-cover img{
    border-radius:25px;
    box-shadow:0 35px 80px rgba(0,0,0,.18);
}

.book-content h3{
    color:var(--gold);
    font-weight:500;
    margin-bottom:25px;
}

.book-content p{
    margin-bottom:30px;
}

.book-features{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
    margin:35px 0;
}

.book-features li{
    display:flex;
    align-items:center;
    gap:12px;
    font-weight:500;
}

.book-features i{
    color:var(--gold);
}

.book-buttons{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
}

/*====================================================
SPEAKING
====================================================*/

.speaking{
    background:#fff;
}

.speaking-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:30px;
}

.topic-card{
    background:#fff;
    padding:40px;
    border-radius:20px;
    border:1px solid var(--border);
    transition:.35s;
    text-align:center;
}

.topic-card:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 60px rgba(0,0,0,.08);
}

.topic-card i{
    width:80px;
    height:80px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--primary);
    color:#fff;
    border-radius:50%;
    margin:auto auto 25px;
    font-size:30px;
}

.center{
    text-align:center;
    margin-top:60px;
}

/*====================================================
RESOURCES
====================================================*/

.resources{
    background:var(--light);
}

.resource-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:30px;
}

.resource-card{
    background:#fff;
    padding:40px 35px;
    border-radius:20px;
    transition:.35s;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.resource-card:hover{
    transform:translateY(-10px);
}

.resource-card i{
    font-size:45px;
    color:var(--gold);
    margin-bottom:25px;
}

.resource-card h3{
    margin-bottom:15px;
}

/*====================================================
NEWSLETTER
====================================================*/

.newsletter{
    padding:120px 0;
    background:linear-gradient(135deg,#0B1F3A,#143D72);
}

.newsletter-box{
    max-width:900px;
    margin:auto;
    text-align:center;
}

.newsletter h2{
    color:#fff;
    margin-bottom:20px;
}

.newsletter p{
    color:rgba(255,255,255,.85);
    margin-bottom:40px;
}

.newsletter form{
    display:flex;
    gap:20px;
    justify-content:center;
    flex-wrap:wrap;
}

.newsletter input{
    width:420px;
    max-width:100%;
    padding:18px 22px;
    border:none;
    border-radius:50px;
    font-size:16px;
    outline:none;
}

/*====================================================
FOOTER
====================================================*/

footer{
    background:#071626;
    color:#fff;
    padding-top:80px;
}

.footer-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:60px;
}

footer h3,
footer h4{
    color:#fff;
    margin-bottom:20px;
}

footer p{
    color:#c7ced9;
}

footer ul li{
    margin-bottom:14px;
}

footer ul li a{
    color:#c7ced9;
    transition:.3s;
}

footer ul li a:hover{
    color:var(--gold);
}

.social-icons{
    display:flex;
    gap:15px;
    margin-top:20px;
}

.social-icons a{
    width:45px;
    height:45px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#10263f;
    transition:.3s;
}

.social-icons a:hover{
    background:var(--gold);
    transform:translateY(-4px);
}

.copyright{
    margin-top:60px;
    border-top:1px solid rgba(255,255,255,.08);
    text-align:center;
    padding:30px;
}

.copyright p{
    color:#b8c2cf;
}

/*==================================
CONTACT PAGE
===================================*/

.contact-section{

padding:100px 0;
background:#f8fafc;

}

.contact-wrapper{

display:grid;
grid-template-columns:350px 1fr;
gap:50px;
align-items:start;

}

.contact-info{

background:#0B1F3A;
color:#fff;
padding:45px;
border-radius:25px;
height:100%;

}

.contact-info h3{

font-size:30px;
margin-bottom:20px;

}

.contact-info p{

line-height:1.8;
color:#d8d8d8;
margin-bottom:40px;

}

.info-item{

display:flex;
gap:18px;
margin-bottom:30px;
align-items:flex-start;

}

.info-item i{

width:55px;
height:55px;
background:#D4AF37;
color:#0B1F3A;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:20px;
flex-shrink:0;

}

.info-item h4{

margin-bottom:6px;
font-size:18px;

}

.contact-card{

background:#fff;
padding:50px;
border-radius:25px;
box-shadow:0 20px 60px rgba(0,0,0,.08);

}

.form-grid{

display:grid;
grid-template-columns:repeat(2,1fr);
gap:25px;

}

.input-group{

margin-bottom:25px;

}

.input-group label{

display:block;
margin-bottom:10px;
font-weight:600;
color:#0B1F3A;

}

.input-icon{

position:relative;

}

.input-icon i{

position:absolute;
left:18px;
top:50%;
transform:translateY(-50%);
color:#999;

}

.input-icon input,
.input-icon select{

width:100%;
height:56px;
padding-left:52px;
padding-right:15px;
border:1px solid #ddd;
border-radius:12px;
font-size:15px;
transition:.3s;

}

textarea{

width:100%;
padding:18px;
border:1px solid #ddd;
border-radius:12px;
resize:vertical;
font-size:15px;
transition:.3s;

}

input:focus,
select:focus,
textarea:focus{

outline:none;
border-color:#D4AF37;
box-shadow:0 0 0 4px rgba(212,175,55,.18);

}

.submit-btn{

width:100%;
height:58px;
font-size:17px;
margin-top:10px;

}

.submit-btn i{

margin-right:10px;

}

/* Responsive */

@media(max-width:991px){

.contact-wrapper{

grid-template-columns:1fr;

}

.contact-info{

order:2;

}

.contact-card{

order:1;

}

}

@media(max-width:768px){

.form-grid{

grid-template-columns:1fr;

}

.contact-card{

padding:30px 20px;

}

.contact-info{

padding:30px;

}

}

/*====================================================
SCROLL TO TOP
====================================================*/

#scrollTop{
    position:fixed;
    right:25px;
    bottom:25px;
    width:55px;
    height:55px;
    border:none;
    border-radius:50%;
    background:var(--gold);
    color:#fff;
    font-size:20px;
    cursor:pointer;
    display:none;
    z-index:999;
    transition:.3s;
    box-shadow:0 15px 40px rgba(0,0,0,.15);
}

#scrollTop:hover{
    transform:translateY(-5px);
}
/* ======================================
ANIMATIONS
====================================== */

.hidden{

opacity:0;

transform:translateY(60px);

transition:all .8s ease;

}

.show{

opacity:1;

transform:translateY(0);

}

.topic-card,
.resource-card,
.mission-card,
.book-cover{

transition:.4s;

}

.hero-image{

animation:float 6s ease-in-out infinite;

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0);

}

}

.btn{

transition:.35s;

}

.btn:hover{

transform:translateY(-3px);

}

html{

scroll-behavior:smooth;

}
/* LOADER */

#loader{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:#fff;

display:flex;

align-items:center;

justify-content:center;

z-index:99999;

transition:.5s;

}

.spinner{

width:60px;

height:60px;

border-radius:50%;

border:5px solid #eee;

border-top:5px solid #D4AF37;

animation:spin 1s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}