/*==========================================================
    IMROZ AHMAD
    OFFICIAL ENGINEERING WEBSITE
    STYLE.CSS
    PART 1
==========================================================*/

/*==========================================================
    GOOGLE FONT
==========================================================*/

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

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

:root{

    /* Primary */

    --primary:#2563EB;
    --primary-dark:#1D4ED8;
    --primary-light:#60A5FA;

    /* Background */

    --background:#020617;
    --surface:#0F172A;
    --card:#111827;

    /* Text */

    --white:#F8FAFC;
    --gray:#CBD5E1;
    --muted:#94A3B8;

    /* Border */

    --border:#1E293B;

    /* Status */

    --success:#22C55E;
    --warning:#F59E0B;
    --danger:#EF4444;

    /* Shadow */

    --shadow-sm:0 4px 12px rgba(0,0,0,.18);
    --shadow:0 12px 30px rgba(0,0,0,.25);
    --shadow-lg:0 20px 60px rgba(0,0,0,.40);

    /* Radius */

    --radius-sm:8px;
    --radius:16px;
    --radius-lg:24px;

    /* Transition */

    --transition:.35s ease;

    /* Layout */

    --container:1200px;

}

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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

*::before,
*::after{
    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;

    scroll-padding-top:90px;

}

body{

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

    background:var(--background);

    color:var(--white);

    line-height:1.7;

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;

    text-rendering:optimizeLegibility;

}

/*==========================================================
    SELECTION
==========================================================*/

::selection{

    background:var(--primary);

    color:#fff;

}

/*==========================================================
    SCROLLBAR
==========================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:var(--background);

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary-dark);

}

/*==========================================================
    IMAGES
==========================================================*/

img{

    display:block;

    max-width:100%;

    height:auto;

}

/*==========================================================
    LINKS
==========================================================*/

a{

    color:inherit;

    text-decoration:none;

    transition:var(--transition);

}

/*==========================================================
    LIST
==========================================================*/

ul{

    list-style:none;

}

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

button{

    font-family:inherit;

    cursor:pointer;

    border:none;

    background:none;

}

/*==========================================================
    CONTAINER
==========================================================*/

.container{

    width:min(var(--container),92%);

    margin-inline:auto;

}

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

section{

    padding:100px 0;

    position:relative;

}

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

h1{

    font-size:3.8rem;

    font-weight:800;

    line-height:1.1;

    letter-spacing:-1px;

}

h2{

    font-size:2.6rem;

    font-weight:700;

    line-height:1.2;

}

h3{

    font-size:1.5rem;

    font-weight:600;

}

h4{

    font-size:1.15rem;

    font-weight:600;

}

p{

    color:var(--gray);

    font-size:1.05rem;

}

small{

    color:var(--muted);

}

/*==========================================================
    SECTION TITLE
==========================================================*/

.section-title{

    margin-bottom:60px;

    text-align:center;

}

.section-title p{

    color:var(--primary);

    font-size:.9rem;

    text-transform:uppercase;

    letter-spacing:3px;

    margin-bottom:12px;

    font-weight:700;

}

.section-title h2{

    color:var(--white);

}

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

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:15px 34px;

    border-radius:50px;

    background:var(--primary);

    color:#fff;

    font-weight:600;

    transition:var(--transition);

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

}

.btn:hover{

    transform:translateY(-3px);

    background:var(--primary-dark);

    box-shadow:var(--shadow);

}

.btn:active{

    transform:translateY(0);

}

.btn.outline{

    background:transparent;

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

    color:var(--white);

}

.btn.outline:hover{

    background:var(--primary);

}

.btn.small{

    padding:12px 22px;

    font-size:.95rem;

}

/*==========================================================
    CARD
==========================================================*/

.card{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:30px;

    transition:var(--transition);

}

.card:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow);

}
/*==========================================================
    IMROZ AHMAD
    OFFICIAL ENGINEERING WEBSITE
    STYLE.CSS
    PART 1
==========================================================*/

/*==========================================================
    GOOGLE FONT
==========================================================*/

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

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

:root{

    /* Primary */

    --primary:#2563EB;
    --primary-dark:#1D4ED8;
    --primary-light:#60A5FA;

    /* Background */

    --background:#020617;
    --surface:#0F172A;
    --card:#111827;

    /* Text */

    --white:#F8FAFC;
    --gray:#CBD5E1;
    --muted:#94A3B8;

    /* Border */

    --border:#1E293B;

    /* Status */

    --success:#22C55E;
    --warning:#F59E0B;
    --danger:#EF4444;

    /* Shadow */

    --shadow-sm:0 4px 12px rgba(0,0,0,.18);
    --shadow:0 12px 30px rgba(0,0,0,.25);
    --shadow-lg:0 20px 60px rgba(0,0,0,.40);

    /* Radius */

    --radius-sm:8px;
    --radius:16px;
    --radius-lg:24px;

    /* Transition */

    --transition:.35s ease;

    /* Layout */

    --container:1200px;

}

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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

*::before,
*::after{
    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;

    scroll-padding-top:90px;

}

body{

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

    background:var(--background);

    color:var(--white);

    line-height:1.7;

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;

    text-rendering:optimizeLegibility;

}

/*==========================================================
    SELECTION
==========================================================*/

::selection{

    background:var(--primary);

    color:#fff;

}

/*==========================================================
    SCROLLBAR
==========================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:var(--background);

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary-dark);

}

/*==========================================================
    IMAGES
==========================================================*/

img{

    display:block;

    max-width:100%;

    height:auto;

}

/*==========================================================
    LINKS
==========================================================*/

a{

    color:inherit;

    text-decoration:none;

    transition:var(--transition);

}

/*==========================================================
    LIST
==========================================================*/

ul{

    list-style:none;

}

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

button{

    font-family:inherit;

    cursor:pointer;

    border:none;

    background:none;

}

/*==========================================================
    CONTAINER
==========================================================*/

.container{

    width:min(var(--container),92%);

    margin-inline:auto;

}

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

section{

    padding:100px 0;

    position:relative;

}

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

h1{

    font-size:3.8rem;

    font-weight:800;

    line-height:1.1;

    letter-spacing:-1px;

}

h2{

    font-size:2.6rem;

    font-weight:700;

    line-height:1.2;

}

h3{

    font-size:1.5rem;

    font-weight:600;

}

h4{

    font-size:1.15rem;

    font-weight:600;

}

p{

    color:var(--gray);

    font-size:1.05rem;

}

small{

    color:var(--muted);

}

/*==========================================================
    SECTION TITLE
==========================================================*/

.section-title{

    margin-bottom:60px;

    text-align:center;

}

.section-title p{

    color:var(--primary);

    font-size:.9rem;

    text-transform:uppercase;

    letter-spacing:3px;

    margin-bottom:12px;

    font-weight:700;

}

.section-title h2{

    color:var(--white);

}

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

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:15px 34px;

    border-radius:50px;

    background:var(--primary);

    color:#fff;

    font-weight:600;

    transition:var(--transition);

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

}

.btn:hover{

    transform:translateY(-3px);

    background:var(--primary-dark);

    box-shadow:var(--shadow);

}

.btn:active{

    transform:translateY(0);

}

.btn.outline{

    background:transparent;

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

    color:var(--white);

}

.btn.outline:hover{

    background:var(--primary);

}

.btn.small{

    padding:12px 22px;

    font-size:.95rem;

}

/*==========================================================
    CARD
==========================================================*/

.card{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:30px;

    transition:var(--transition);

}

.card:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow);

}
/*==========================================================
    STYLE.CSS
    PART 3
    CORE COMPETENCIES
    ENGINEERING PROFILE
    TECHNICAL EXPERTISE
==========================================================*/

/*==========================================================
    CORE COMPETENCIES
==========================================================*/

#competencies{

    background:var(--surface);

}

/*==========================================================
    COMPETENCY GRID
==========================================================*/

#competencyContainer{

    display:grid;

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

    gap:24px;

}

/*==========================================================
    COMPETENCY CARD
==========================================================*/

.competency-card{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:35px 30px;

    text-align:center;

    transition:var(--transition);

}

.competency-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}

.competency-icon{

    font-size:2.3rem;

    margin-bottom:20px;

    color:var(--primary);

}

.competency-card h3{

    margin-bottom:12px;

}

.competency-card p{

    color:var(--muted);

    font-size:.98rem;

}

/*==========================================================
    ENGINEERING PROFILE
==========================================================*/

#profile{

    background:var(--background);

}

/*==========================================================
    PROFILE GRID
==========================================================*/

#profileContainer{

    display:grid;

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

    gap:30px;

}

/*==========================================================
    PROFILE CARD
==========================================================*/

.profile-card{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:35px;

    transition:var(--transition);

}

.profile-card:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow);

}

.profile-card h3{

    color:var(--white);

    margin-bottom:20px;

    position:relative;

    padding-bottom:12px;

}

.profile-card h3::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:60px;

    height:3px;

    background:var(--primary);

    border-radius:20px;

}

.profile-card p{

    color:var(--gray);

}

/*==========================================================
    PROFILE LIST
==========================================================*/

.profile-card ul{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.profile-card li{

    color:var(--gray);

    position:relative;

    padding-left:28px;

}

.profile-card li::before{

    content:"✓";

    position:absolute;

    left:0;

    color:var(--success);

    font-weight:700;

}

/*==========================================================
    TECHNICAL EXPERTISE
==========================================================*/

#expertise{

    background:var(--surface);

}

/*==========================================================
    EXPERTISE GRID
==========================================================*/

#expertiseContainer{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:28px;

}

/*==========================================================
    EXPERTISE CARD
==========================================================*/

.expertise-card{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:35px;

    transition:var(--transition);

    position:relative;

    overflow:hidden;

}

.expertise-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}

/* blue top line */

.expertise-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:var(--primary);

}

.expertise-card h3{

    margin-bottom:24px;

    color:var(--white);

}

/*==========================================================
    EXPERTISE LIST
==========================================================*/

.expertise-card ul{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.expertise-card li{

    position:relative;

    color:var(--gray);

    padding-left:28px;

    transition:var(--transition);

}

.expertise-card li::before{

    content:"●";

    position:absolute;

    left:0;

    color:var(--primary);

    font-size:.8rem;

    top:7px;

}

.expertise-card li:hover{

    color:var(--white);

    transform:translateX(4px);

}
/*==========================================================
    STYLE.CSS
    PART 4
    ENGINEERING JOURNEY
    PROJECTS
==========================================================*/

/*==========================================================
    ENGINEERING JOURNEY
==========================================================*/

#journey{

    background:var(--background);

}

/*==========================================================
    JOURNEY CONTAINER
==========================================================*/

#journeyContainer{

    position:relative;

    max-width:900px;

    margin:0 auto;

    padding-left:40px;

}

/* Vertical Line */

#journeyContainer::before{

    content:"";

    position:absolute;

    left:18px;

    top:0;

    width:3px;

    height:100%;

    background:var(--primary);

    border-radius:50px;

}

/*==========================================================
    JOURNEY ITEM
==========================================================*/

.journey-item{

    position:relative;

    margin-bottom:45px;

    padding-left:45px;

}

/* Timeline Circle */

.journey-item::before{

    content:"";

    position:absolute;

    left:-1px;

    top:10px;

    width:18px;

    height:18px;

    border-radius:50%;

    background:var(--primary);

    border:4px solid var(--background);

    box-shadow:0 0 0 3px rgba(37,99,235,.25);

}

.journey-card{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:28px;

    transition:var(--transition);

}

.journey-card:hover{

    transform:translateY(-5px);

    box-shadow:var(--shadow);

}

.journey-year{

    display:inline-block;

    margin-bottom:12px;

    color:var(--primary);

    font-weight:700;

    letter-spacing:1px;

}

.journey-card h3{

    margin-bottom:10px;

    color:var(--white);

}

.journey-card p{

    color:var(--gray);

}

/*==========================================================
    PROJECT SECTION
==========================================================*/

#projects{

    background:var(--surface);

}

/*==========================================================
    PROJECT GRID
==========================================================*/

#engineeringProjects,
#technicalProjects{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));

    gap:30px;

}

.section-title.second{

    margin-top:90px;

    margin-bottom:45px;

}

/*==========================================================
    PROJECT CARD
==========================================================*/

.project-card{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:var(--radius);

    overflow:hidden;

    transition:var(--transition);

    display:flex;

    flex-direction:column;

}

.project-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}

/*==========================================================
    PROJECT IMAGE
==========================================================*/

.project-card img{

    width:100%;

    height:220px;

    object-fit:cover;

}

/*==========================================================
    PROJECT BODY
==========================================================*/

.project-body{

    padding:28px;

    display:flex;

    flex-direction:column;

    flex:1;

}

/*==========================================================
    CATEGORY
==========================================================*/

.project-category{

    display:inline-block;

    align-self:flex-start;

    padding:6px 14px;

    margin-bottom:18px;

    border-radius:30px;

    background:rgba(37,99,235,.12);

    color:var(--primary);

    font-size:.85rem;

    font-weight:600;

}

/*==========================================================
    TITLE
==========================================================*/

.project-card h3{

    margin-bottom:14px;

}

/*==========================================================
    DESCRIPTION
==========================================================*/

.project-card p{

    margin-bottom:24px;

    color:var(--gray);

}

/*==========================================================
    TECHNOLOGY TAGS
==========================================================*/

.project-tech{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-top:auto;

    margin-bottom:28px;

}

.tag{

    padding:8px 14px;

    border-radius:30px;

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

    color:var(--gray);

    font-size:.88rem;

    border:1px solid var(--border);

}

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

.project-buttons{

    display:flex;

    gap:14px;

    flex-wrap:wrap;

}

.project-buttons .btn{

    flex:1;

    min-width:130px;

    text-align:center;

}
/*==========================================================
    STYLE.CSS
    PART 5
    TRAINING
    EDUCATION
    CERTIFICATES
==========================================================*/

/*==========================================================
    TRAINING
==========================================================*/

#training{

    background:var(--background);

}

/*==========================================================
    TRAINING CONTAINER
==========================================================*/

#trainingContainer{

    display:grid;

    gap:30px;

}

/*==========================================================
    TRAINING CARD
==========================================================*/

.training-card{

    background:var(--card);

    border:1px solid var(--border);

    border-left:6px solid var(--primary);

    border-radius:var(--radius);

    padding:35px;

    transition:var(--transition);

}

.training-card:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow);

}

.training-card h3{

    margin-bottom:10px;

    color:var(--white);

}

.training-company{

    color:var(--primary);

    font-weight:600;

    margin-bottom:8px;

}

.training-duration{

    display:inline-block;

    margin-bottom:20px;

    color:var(--muted);

    font-size:.95rem;

}

.training-card p{

    color:var(--gray);

}

/*==========================================================
    EDUCATION
==========================================================*/

#education{

    background:var(--surface);

}

/*==========================================================
    EDUCATION CONTAINER
==========================================================*/

#educationContainer{

    display:grid;

    gap:30px;

}

/*==========================================================
    EDUCATION CARD
==========================================================*/

.education-card{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:35px;

    transition:var(--transition);

}

.education-card:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow);

}

.education-card h3{

    margin-bottom:12px;

    color:var(--white);

}

.education-institute{

    color:var(--primary);

    font-weight:600;

    margin-bottom:10px;

}

.education-session{

    color:var(--muted);

    margin-bottom:8px;

}

.education-result{

    display:inline-block;

    margin-top:12px;

    padding:8px 16px;

    background:rgba(37,99,235,.10);

    color:var(--primary);

    border-radius:30px;

    font-weight:600;

}

/*==========================================================
    CERTIFICATES
==========================================================*/

#certificates{

    background:var(--background);

}

/*==========================================================
    CERTIFICATE GRID
==========================================================*/

#certificateContainer{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

    gap:30px;

}

/*==========================================================
    CERTIFICATE CARD
==========================================================*/

.certificate-card{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:var(--radius);

    overflow:hidden;

    transition:var(--transition);

}

.certificate-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}

/*==========================================================
    CERTIFICATE IMAGE
==========================================================*/

.certificate-card img{

    width:100%;

    height:220px;

    object-fit:cover;

}

/*==========================================================
    CERTIFICATE BODY
==========================================================*/

.certificate-body{

    padding:24px;

}

.certificate-body h3{

    color:var(--white);

    margin-bottom:10px;

}

.certificate-body p{

    color:var(--gray);

}
/*==========================================================
    STYLE.CSS
    PART 6
    PROFESSIONAL VISION
    CONTACT
    FOOTER
==========================================================*/

/*==========================================================
    PROFESSIONAL VISION
==========================================================*/

#vision{

    background:var(--surface);

}

/*==========================================================
    VISION CONTAINER
==========================================================*/

#visionContainer{

    max-width:900px;

    margin:0 auto;

}

/*==========================================================
    VISION CARD
==========================================================*/

.vision-card{

    background:var(--card);

    border:1px solid var(--border);

    border-left:6px solid var(--primary);

    border-radius:var(--radius);

    padding:45px;

    transition:var(--transition);

}

.vision-card:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow);

}

.vision-card h3{

    color:var(--white);

    margin-bottom:25px;

}

.vision-card p{

    color:var(--gray);

    font-size:1.08rem;

    text-align:justify;

}

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

#contact{

    background:var(--background);

}

/*==========================================================
    CONTACT CONTAINER
==========================================================*/

#contactContainer{

    display:grid;

    grid-template-columns:1.2fr .8fr;

    gap:40px;

    align-items:start;

}

/*==========================================================
    CONTACT INFO
==========================================================*/

.contact-info{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:40px;

}

.contact-info h3{

    margin-bottom:20px;

}

.contact-info p{

    margin-bottom:30px;

}

/*==========================================================
    CONTACT LIST
==========================================================*/

.contact-list{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.contact-item{

    display:flex;

    align-items:flex-start;

    gap:18px;

}

.contact-icon{

    width:52px;

    height:52px;

    border-radius:50%;

    background:rgba(37,99,235,.12);

    display:flex;

    justify-content:center;

    align-items:center;

    color:var(--primary);

    font-size:1.2rem;

    flex-shrink:0;

}

.contact-details h4{

    margin-bottom:6px;

    color:var(--white);

}

.contact-details p{

    margin:0;

    color:var(--gray);

}

/*==========================================================
    CONTACT FORM
==========================================================*/

.contact-form{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:40px;

}

.contact-form h3{

    margin-bottom:25px;

}

.contact-form form{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.contact-form input,

.contact-form textarea{

    width:100%;

    padding:16px 18px;

    border-radius:12px;

    border:1px solid var(--border);

    background:var(--surface);

    color:var(--white);

    font-family:inherit;

    font-size:1rem;

    transition:var(--transition);

}

.contact-form textarea{

    min-height:180px;

    resize:vertical;

}

.contact-form input:focus,

.contact-form textarea:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(37,99,235,.12);

}

.contact-form input::placeholder,

.contact-form textarea::placeholder{

    color:var(--muted);

}

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

footer{

    background:#01040d;

    border-top:1px solid var(--border);

    padding:70px 0 35px;

}

footer .container{

    text-align:center;

}

footer h3{

    font-size:2rem;

    margin-bottom:12px;

}

footer p{

    color:var(--gray);

    margin-bottom:12px;

}

footer small{

    display:block;

    margin-top:30px;

    color:var(--muted);

}

/*==========================================================
    SOCIAL LINKS
==========================================================*/

.social-links{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:16px;

    margin-top:30px;

}

.social-links a{

    width:48px;

    height:48px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--card);

    border:1px solid var(--border);

    color:var(--gray);

    transition:var(--transition);

}

.social-links a:hover{

    background:var(--primary);

    color:#fff;

    transform:translateY(-4px);

}
/*==========================================================
    STYLE.CSS
    PART 6
    PROFESSIONAL VISION
    CONTACT
    FOOTER
==========================================================*/

/*==========================================================
    PROFESSIONAL VISION
==========================================================*/

#vision{

    background:var(--surface);

}

/*==========================================================
    VISION CONTAINER
==========================================================*/

#visionContainer{

    max-width:900px;

    margin:0 auto;

}

/*==========================================================
    VISION CARD
==========================================================*/

.vision-card{

    background:var(--card);

    border:1px solid var(--border);

    border-left:6px solid var(--primary);

    border-radius:var(--radius);

    padding:45px;

    transition:var(--transition);

}

.vision-card:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow);

}

.vision-card h3{

    color:var(--white);

    margin-bottom:25px;

}

.vision-card p{

    color:var(--gray);

    font-size:1.08rem;

    text-align:justify;

}

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

#contact{

    background:var(--background);

}

/*==========================================================
    CONTACT CONTAINER
==========================================================*/

#contactContainer{

    display:grid;

    grid-template-columns:1.2fr .8fr;

    gap:40px;

    align-items:start;

}

/*==========================================================
    CONTACT INFO
==========================================================*/

.contact-info{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:40px;

}

.contact-info h3{

    margin-bottom:20px;

}

.contact-info p{

    margin-bottom:30px;

}

/*==========================================================
    CONTACT LIST
==========================================================*/

.contact-list{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.contact-item{

    display:flex;

    align-items:flex-start;

    gap:18px;

}

.contact-icon{

    width:52px;

    height:52px;

    border-radius:50%;

    background:rgba(37,99,235,.12);

    display:flex;

    justify-content:center;

    align-items:center;

    color:var(--primary);

    font-size:1.2rem;

    flex-shrink:0;

}

.contact-details h4{

    margin-bottom:6px;

    color:var(--white);

}

.contact-details p{

    margin:0;

    color:var(--gray);

}

/*==========================================================
    CONTACT FORM
==========================================================*/

.contact-form{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:40px;

}

.contact-form h3{

    margin-bottom:25px;

}

.contact-form form{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.contact-form input,

.contact-form textarea{

    width:100%;

    padding:16px 18px;

    border-radius:12px;

    border:1px solid var(--border);

    background:var(--surface);

    color:var(--white);

    font-family:inherit;

    font-size:1rem;

    transition:var(--transition);

}

.contact-form textarea{

    min-height:180px;

    resize:vertical;

}

.contact-form input:focus,

.contact-form textarea:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(37,99,235,.12);

}

.contact-form input::placeholder,

.contact-form textarea::placeholder{

    color:var(--muted);

}

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

footer{

    background:#01040d;

    border-top:1px solid var(--border);

    padding:70px 0 35px;

}

footer .container{

    text-align:center;

}

footer h3{

    font-size:2rem;

    margin-bottom:12px;

}

footer p{

    color:var(--gray);

    margin-bottom:12px;

}

footer small{

    display:block;

    margin-top:30px;

    color:var(--muted);

}

/*==========================================================
    SOCIAL LINKS
==========================================================*/

.social-links{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:16px;

    margin-top:30px;

}

.social-links a{

    width:48px;

    height:48px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--card);

    border:1px solid var(--border);

    color:var(--gray);

    transition:var(--transition);

}

.social-links a:hover{

    background:var(--primary);

    color:#fff;

    transform:translateY(-4px);

}
/*==========================================================
    STYLE.CSS
    PART 8
    ACTIVE NAVIGATION
    BACK TO TOP
    LIGHT THEME
==========================================================*/

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

.nav-menu a.active{

    color:var(--white);

    font-weight:600;

}

.nav-menu a.active::after{

    width:100%;

}

/*==========================================================
    BACK TO TOP BUTTON
==========================================================*/

#backToTop{

    transition:.35s ease;

    box-shadow:var(--shadow);

}

#backToTop:hover{

    transform:translateY(-5px);

    background:var(--primary-dark)!important;

}

/*==========================================================
    LIGHT MODE
==========================================================*/

body.light-mode{

    --background:#F8FAFC;

    --surface:#FFFFFF;

    --card:#FFFFFF;

    --white:#0F172A;

    --gray:#334155;

    --muted:#64748B;

    --border:#CBD5E1;

}

/*==========================================================
    LIGHT MODE HEADER
==========================================================*/

body.light-mode #header{

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

}

/*==========================================================
    LIGHT MODE HERO
==========================================================*/

body.light-mode .hero::before{

    opacity:.08;

}

body.light-mode .hero-image img{

    border:8px solid #E2E8F0;

}

/*==========================================================
    LIGHT MODE CARDS
==========================================================*/

body.light-mode .card,
body.light-mode .profile-card,
body.light-mode .competency-card,
body.light-mode .expertise-card,
body.light-mode .journey-card,
body.light-mode .project-card,
body.light-mode .training-card,
body.light-mode .education-card,
body.light-mode .certificate-card,
body.light-mode .vision-card,
body.light-mode .contact-info,
body.light-mode .contact-form{

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

}

/*==========================================================
    LIGHT MODE TAG
==========================================================*/

body.light-mode .tag{

    background:#EFF6FF;

    color:#1E3A8A;

    border-color:#BFDBFE;

}

/*==========================================================
    LIGHT MODE FOOTER
==========================================================*/

body.light-mode footer{

    background:#E2E8F0;

}

/*==========================================================
    INPUT AUTOFILL FIX
==========================================================*/

input:-webkit-autofill,
textarea:-webkit-autofill{

    -webkit-box-shadow:0 0 0 1000px var(--surface) inset;

    -webkit-text-fill-color:var(--white);

}