/* ==========================================
   CSS Reset
========================================== */

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

html{
    scroll-behavior:smooth;
}

body{
    min-height:100vh;
    overflow-x:hidden;
}

img{
    display:block;
    max-width:100%;
    height:auto;
}

a{
    text-decoration:none;
    color:inherit;
}

ul{
    list-style:none;
}

button,
input,
textarea{
    font:inherit;
}

button{
    background:none;
    border:none;
    cursor:pointer;
}

iframe{
    border:none;
}

/* ==========================================
   CSS Variables
========================================== */

:root{

    /* Brand Colors */

    --primary-color:#2563eb;
    --primary-hover:#1d4ed8;
    --secondary-color:#0f172a;
    --accent-color:#3b82f6;

    /* Background Colors */

    --background-color:#ffffff;
    --section-background:#f8fafc;
    --card-background:#ffffff;

    /* Text Colors */

    --heading-color:#111827;
    --text-color:#374151;
    --text-light:#6b7280;

    /* Border */

    --border-color:#e5e7eb;

    /* Status */

    --success-color:#16a34a;
    --warning-color:#f59e0b;
    --danger-color:#dc2626;

    /* Typography */

    --font-family:"Poppins",sans-serif;

    /* Font Sizes */

    --fs-small:0.9rem;
    --fs-body:1rem;
    --fs-subheading:1.2rem;
    --fs-heading:2rem;
    --fs-hero:3.5rem;

    /* Font Weights */

    --fw-normal:400;
    --fw-medium:500;
    --fw-semibold:600;
    --fw-bold:700;

    /* Border Radius */

    --radius-small:8px;
    --radius-medium:12px;
    --radius-large:20px;
    --radius-circle:50%;

    /* Shadows */

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

    --shadow-medium:0 8px 20px rgba(0,0,0,.10);

    --shadow-large:0 15px 35px rgba(0,0,0,.15);

    /* Transition */

    --transition:all 0.3s ease;
}

/* ==========================================
   Global Styles
========================================== */

body{

    font-family:var(--font-family);

    background:var(--background-color);

    color:var(--text-color);

    line-height:1.7;

}

main{

    width:100%;

}

section{

    padding:100px 8%;

}

.container{

    width:100%;

    max-width:1200px;

    margin:0 auto;

}

/* ==========================================
   Typography
========================================== */

h1,
h2,
h3,
h4,
h5,
h6{

    color:var(--heading-color);

    font-weight:var(--fw-bold);

    line-height:1.3;

}

p{

    color:var(--text-color);

}

.section-title{

    text-align:center;

    margin-bottom:70px;

}

.section-title h5{

    color:var(--primary-color);

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:0.9rem;

    margin-bottom:10px;

}

.section-title h2{

    font-size:2.4rem;

}

/* ==========================================
   Reusable Components
========================================== */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 30px;

    border-radius:var(--radius-medium);

    font-weight:var(--fw-semibold);

    transition:var(--transition);

}

.card{

    background:var(--card-background);

    border-radius:var(--radius-medium);

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

}

.highlight{

    color:var(--primary-color);

}

/* ==========================================
   Header Section
========================================== */

header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    background:var(--background-color);

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

    z-index:1000;

}

header.sticky{

    background:var(--background-color);

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

}

/* ==========================================
   Navigation
========================================== */

nav{

    max-width:1200px;

    margin:0 auto;

    padding:18px 40px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

nav a.active{

    color:var(--primary-color);

}

nav a.active::after{

    width:100%;

}

/* ==========================================
   Logo
========================================== */

.logo{

    display:flex;

    align-items:center;

    gap:12px;

}

.logo-box{

    width:45px;

    height:45px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--primary-color);

    color:#ffffff;

    font-size:1.1rem;

    font-weight:700;

    border-radius:var(--radius-medium);

}

.logo-text{

    font-size:1.2rem;

    font-weight:700;

    color:var(--heading-color);

}

/* ==========================================
   Navigation Menu
========================================== */

nav ul{

    display:flex;

    align-items:center;

    gap:35px;

}

nav ul li a{

    position:relative;

    font-size:1rem;

    font-weight:500;

    color:var(--text-color);

    transition:var(--transition);

}

nav ul li a:hover{

    color:var(--primary-color);

}

nav ul li a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:var(--primary-color);

    transition:var(--transition);

}

nav ul li a:hover::after{

    width:100%;

}

/* ==========================================
   Theme Toggle
========================================== */

#theme-toggle{

    width:45px;

    height:45px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:var(--section-background);

    transition:var(--transition);

}

#theme-toggle i{

    font-size:1.1rem;

    color:var(--heading-color);

}

#theme-toggle:hover{

    background:var(--primary-color);

}

#theme-toggle:hover i{

    color:#ffffff;

}

/* ==========================================
   Main Content Offset
========================================== */

main{

    padding-top:90px;

}

/* ==========================================
   Hero Section
========================================== */

.hero{

    min-height:calc(100vh - 90px);

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:60px;

    background:var(--background-color);

}

/* ==========================================
   Hero Content
========================================== */

.hero-content{

    flex:1;

}

.hero-greeting{

    font-size:1.1rem;

    color:var(--primary-color);

    font-weight:var(--fw-semibold);

    margin-bottom:15px;

}

.hero-content h1{

    font-size:var(--fs-hero);

    color:var(--heading-color);

    margin-bottom:15px;

}

.hero-content h2{

    font-size:2rem;

    color:var(--text-light);

    margin-bottom:20px;

}

.hero-status{

    display:inline-block;

    padding:8px 18px;

    background:#e8f5e9;

    color:var(--success-color);

    border-radius:30px;

    font-weight:600;

    margin-bottom:25px;

}

.hero-description{

    max-width:650px;

    margin-bottom:35px;

    color:var(--text-color);

}

/* ==========================================
   Hero Buttons
========================================== */

.hero-buttons{

    display:flex;

    gap:20px;

    margin-bottom:35px;

}

.hero-buttons a{

    display:inline-block;

    padding:14px 30px;

    border-radius:var(--radius-medium);

    font-weight:600;

    text-decoration:none;

    transition:var(--transition);

}

/* Primary Button */

.hero-buttons a:first-child{

    background:var(--primary-color);

    color:#ffffff;

}

.hero-buttons a:first-child:hover{

    background:var(--primary-hover);

}

/* Secondary Button (only when present) */

.hero-buttons a:last-child:not(:first-child){

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

    color:var(--primary-color);

    background:transparent;

}

.hero-buttons a:last-child:not(:first-child):hover{

    background:var(--primary-color);

    color:#ffffff;

}
/* ==========================================
   Hero Social Icons
========================================== */

.social-icons{

    display:flex;

    gap:18px;

}

.social-icons a{

    width:50px;

    height:50px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--section-background);

    color:var(--heading-color);

    font-size:1.2rem;

    transition:var(--transition);

}

.social-icons a:hover{

    background:var(--primary-color);

    color:#ffffff;

    transform:translateY(-5px);

}

/* ==========================================
   Hero Image
========================================== */

.hero-image{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-image img{

    width:380px;

    height:380px;

    object-fit:cover;

    border-radius:50%;

    border:8px solid var(--primary-color);

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

    transition:var(--transition);

}

.hero-image img:hover{

    transform:scale(1.03);

}

/* ==========================================
   About Section
========================================== */

.about{

    background:var(--section-background);

}

.about-container{

    display:grid;

    grid-template-columns:350px 1fr;

    gap:50px;

    align-items:start;

}

/* ==========================================
   Professional Snapshot
========================================== */

.profile-card{

    background:var(--card-background);

    padding:35px;

    border-radius:var(--radius-large);

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

}

.profile-card h3{

    text-align:center;

    margin-bottom:30px;

    color:var(--primary-color);

}

.profile-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:15px 0;

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

}

.profile-item:last-child{

    border-bottom:none;

}

.profile-item strong{

    display:flex;

    align-items:center;

    gap:10px;

    font-weight:600;

    color:var(--heading-color);

}

.profile-item strong i{

    color:var(--primary-color);

    width:20px;

}

.profile-item span{

    color:var(--text-color);

    text-align:right;

}

.available{

    background:#e8f5e9;

    color:var(--success-color);

    padding:6px 14px;

    border-radius:25px;

    font-size:.9rem;

    font-weight:600;

}

/* ==========================================
   About Content
========================================== */

.about-content{

    background:var(--card-background);

    padding:40px;

    border-radius:var(--radius-large);

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

}

.about-intro{

    font-size:1.1rem;

    margin-bottom:30px;

    color:var(--text-light);

}

.about-content h3{

    margin-top:30px;

    margin-bottom:15px;

    color:var(--primary-color);

}

.about-content p{

    margin-bottom:18px;

    text-align:justify;

}

/* ==========================================
   Key Strengths
========================================== */

.strengths{

    display:grid;

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

    gap:15px;

    margin-top:20px;

}

.strengths div{

    display:flex;

    align-items:center;

    gap:12px;

    padding:15px;

    background:var(--section-background);

    border-radius:var(--radius-medium);

    transition:var(--transition);

}

.strengths div:hover{

    transform:translateY(-4px);

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

}

.strengths i{

    color:var(--success-color);

    font-size:1.1rem;

}

/* ==========================================
   Technical Highlights
========================================== */

.highlights{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

    margin-top:20px;

}

.highlights span{

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px 18px;

    background:var(--primary-color);

    color:#ffffff;

    border-radius:30px;

    font-size:.95rem;

    transition:var(--transition);

}

.highlights span:hover{

    background:var(--primary-hover);

    transform:translateY(-3px);

}

.highlights i{

    font-size:1rem;

}

/* ==========================================
   Education Section
========================================== */

.education{

    background:var(--background-color);

}

.education-container{

    display:grid;

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

    gap:30px;

}

/* ==========================================
   Education Card
========================================== */

.education-card{

    background:var(--card-background);

    padding:35px 30px;

    border-radius:var(--radius-large);

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

    text-align:center;

    transition:var(--transition);

    border:1px solid transparent;

}

.education-card:hover{

    transform:translateY(-8px);

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

    border-color:var(--primary-color);

}

/* ==========================================
   Education Icon
========================================== */

.education-icon{

    width:80px;

    height:80px;

    margin:0 auto 25px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--primary-color);

    color:#ffffff;

    border-radius:50%;

    font-size:2rem;

}

/* ==========================================
   Education Heading
========================================== */

.education-card h3{

    font-size:1.4rem;

    margin-bottom:10px;

    color:var(--heading-color);

}

.education-card h4{

    color:var(--primary-color);

    margin-bottom:20px;

    font-weight:600;

}

/* ==========================================
   Education Information
========================================== */

.education-card p{

    margin-bottom:12px;

    color:var(--text-color);

    line-height:1.6;

}

.college,
.school{

    font-weight:600;

    color:var(--heading-color);

}

.university,
.intermediate-board,
.ssc-board{

    color:var(--text-light);

}

.branch,
.stream{

    font-style:italic;

}

/* ==========================================
   Education Badge
========================================== */

.education-badge{

    display:inline-block;

    margin-top:20px;

    padding:10px 20px;

    background:var(--section-background);

    color:var(--primary-color);

    border-radius:30px;

    font-weight:600;

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

    transition:var(--transition);

}

.education-card:hover .education-badge{

    background:var(--primary-color);

    color:#ffffff;

}

.education-card{

    position:relative;

    overflow:hidden;

}

.education-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:var(--primary-color);

}

/* ==========================================
   Skills Section
========================================== */

.skills{

    background:var(--section-background);

}

.skills-container{

    display:grid;

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

    gap:30px;

}

/* ==========================================
   Skill Card
========================================== */

.skill-card{

    background:var(--card-background);

    padding:35px 30px;

    border-radius:var(--radius-large);

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

    transition:var(--transition);

    text-align:center;

    border:1px solid transparent;

}

.skill-card:hover{

    transform:translateY(-8px);

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

    border-color:var(--primary-color);

}

/* ==========================================
   Skill Icon
========================================== */

.skill-icon{

    width:80px;

    height:80px;

    margin:0 auto 25px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--primary-color);

    color:#ffffff;

    border-radius:50%;

    font-size:2rem;

    transition:var(--transition);

}

.skill-card:hover .skill-icon{

    transform:rotate(10deg) scale(1.08);

}

/* ==========================================
   Skill Heading
========================================== */

.skill-card h3{

    margin-bottom:25px;

    color:var(--heading-color);

    font-size:1.3rem;

}

/* ==========================================
   Skill List
========================================== */

.skill-card ul{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.skill-card ul li{

    padding:12px 15px;

    background:var(--section-background);

    border-radius:var(--radius-small);

    color:var(--text-color);

    font-weight:500;

    transition:var(--transition);

}

.skill-card ul li:hover{

    background:var(--primary-color);

    color:#ffffff;

    transform:translateX(6px);

}

/* ==========================================
   Skill Card Decoration
========================================== */

.skill-card{

    position:relative;

    overflow:hidden;

}

.skill-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:var(--primary-color);

}

/* ==========================================
   Projects Section
========================================== */

.projects{

    background:var(--background-color);

}

.projects-container{

    display:grid;

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

    gap:35px;

}

/* ==========================================
   Project Card
========================================== */

.project-card{

    background:var(--card-background);

    border-radius:var(--radius-large);

    overflow:hidden;

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

    transition:var(--transition);

    border:1px solid transparent;

}

.project-card:hover{

    transform:translateY(-10px);

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

    border-color:var(--primary-color);

}

/* ==========================================
   Project Image
========================================== */

.project-image{

    overflow:hidden;

}

.project-image img{

    width:100%;

    height:220px;

    object-fit:cover;

    transition:var(--transition);

}

.project-card:hover .project-image img{

    transform:scale(1.08);

}

/* ==========================================
   Project Content
========================================== */

.project-content{

    padding:30px;

}

.project-content h3{

    margin-bottom:15px;

    color:var(--heading-color);

    font-size:1.4rem;

}

.project-content p{

    color:var(--text-color);

    margin-bottom:25px;

    text-align:justify;

    line-height:1.7;

}

/* ==========================================
   Project Technologies
========================================== */

.project-tech{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-bottom:30px;

}

.project-tech span{

    padding:8px 16px;

    background:var(--section-background);

    color:var(--primary-color);

    border-radius:30px;

    font-size:.9rem;

    font-weight:600;

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

    transition:var(--transition);

}

.project-tech span:hover{

    background:var(--primary-color);

    color:#ffffff;

}

/* ==========================================
   Project Buttons
========================================== */

.project-buttons{

    display:flex;

    gap:15px;

}

.project-buttons a{

    flex:1;

    text-align:center;

    padding:12px 18px;

    border-radius:var(--radius-medium);

    font-weight:600;

    transition:var(--transition);

}

.project-buttons a:first-child{

    background:var(--primary-color);

    color:#ffffff;

}

.project-buttons a:first-child:hover{

    background:var(--primary-hover);

}

.project-buttons a:last-child{

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

    color:var(--primary-color);

}

.project-buttons a:last-child:hover{

    background:var(--primary-color);

    color:#ffffff;

}

/* ==========================================
   Project Card Decoration
========================================== */

.project-card{

    position:relative;

}

.project-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:var(--primary-color);

}

/* ==========================================
   Certifications Section
========================================== */

.certifications{

    background:var(--section-background);

}

.certifications-container{

    display:grid;

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

    gap:30px;

}

/* ==========================================
   Certificate Card
========================================== */

.certificate-card{

    position:relative;

    background:var(--card-background);

    padding:35px 30px;

    border-radius:var(--radius-large);

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

    border:1px solid transparent;

    text-align:center;

    transition:var(--transition);

    overflow:hidden;

}

.certificate-card:hover{

    transform:translateY(-8px);

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

    border-color:var(--primary-color);

}

/* ==========================================
   Certificate Decoration
========================================== */

.certificate-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:var(--primary-color);

}

/* ==========================================
   Certificate Icon
========================================== */

.certificate-icon{

    width:80px;

    height:80px;

    margin:0 auto 25px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:var(--primary-color);

    color:#ffffff;

    font-size:2rem;

    transition:var(--transition);

}

.certificate-card:hover .certificate-icon{

    transform:rotate(10deg) scale(1.08);

}

/* ==========================================
   Certificate Heading
========================================== */

.certificate-card h3{

    font-size:1.35rem;

    color:var(--heading-color);

    margin-bottom:12px;

}

/* ==========================================
   Certificate Provider
========================================== */

.certificate-provider{

    color:var(--primary-color);

    font-weight:600;

    margin-bottom:18px;

}

/* ==========================================
   Certificate Description
========================================== */

.certificate-description{

    color:var(--text-color);

    text-align:justify;

    line-height:1.7;

    margin-bottom:30px;

}

/* ==========================================
   Certificate Button
========================================== */

.certificate-card a{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    padding:12px 26px;

    border-radius:var(--radius-medium);

    background:var(--primary-color);

    color:#ffffff;

    font-weight:600;

    transition:var(--transition);

}

.certificate-card a:hover{

    background:var(--primary-hover);

    transform:translateY(-3px);

}

/* ==========================================
   Certificate Hover Effect
========================================== */

.certificate-card:hover h3{

    color:var(--primary-color);

}

.certifications-grid{

    display: flex;
    
    justify-content: center;
    
    flex-wrap: wrap;
    
    gap: 30px;

}

/* ==========================================
   Resume Section
========================================== */

.resume{

    background:var(--background-color);

}

.resume-container{

    display:grid;

    grid-template-columns:1fr 1.2fr;

    gap:50px;

    align-items:center;

}

/* ==========================================
   Resume Content
========================================== */

.resume-content{

    background:var(--card-background);

    padding:40px;

    border-radius:var(--radius-large);

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

}

.resume-content h3{

    font-size:2rem;

    color:var(--heading-color);

    margin-bottom:20px;

}

.resume-content p{

    color:var(--text-color);

    line-height:1.8;

    margin-bottom:30px;

}

/* ==========================================
   Resume Highlights
========================================== */

.resume-highlights{

    display:flex;

    flex-direction:column;

    gap:18px;

    margin-bottom:35px;

}

.resume-highlights li{

    display:flex;

    align-items:center;

    gap:15px;

    padding:14px 18px;

    background:var(--section-background);

    border-radius:var(--radius-medium);

    transition:var(--transition);

}

.resume-highlights li:hover{

    background:var(--primary-color);

    color:#ffffff;

    transform:translateX(8px);

}

.resume-highlights li i{

    color:var(--success-color);

    font-size:1.1rem;

}

.resume-highlights li:hover i{

    color:#ffffff;

}

/* ==========================================
   Resume Buttons
========================================== */

.resume-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

.resume-buttons a{

    flex:1;

    text-align:center;

    padding:14px 22px;

    border-radius:var(--radius-medium);

    font-weight:600;

    transition:var(--transition);

}

.resume-buttons a:first-child{

    background:var(--primary-color);

    color:#ffffff;

}

.resume-buttons a:first-child:hover{

    background:var(--primary-hover);

}

.resume-buttons a:last-child{

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

    color:var(--primary-color);

}

.resume-buttons a:last-child:hover{

    background:var(--primary-color);

    color:#ffffff;

}

/* ==========================================
   Resume Preview
========================================== */

.resume-preview{

    background:var(--card-background);

    padding:20px;

    border-radius:var(--radius-large);

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

}

.resume-preview iframe{

    width:100%;

    height:650px;

    border-radius:var(--radius-medium);

}

/* ==========================================
   Resume Hover Effect
========================================== */

.resume-content,
.resume-preview{

    transition:var(--transition);

}

.resume-content:hover,
.resume-preview:hover{

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

}

/* ==========================================
   Contact Section
========================================== */

.contact{

    background:var(--section-background);

}

.contact-container{

    display:flex;

    justify-content:center;

    align-items:center;

}

/* ==========================================
   Contact Information
========================================== */

.contact-info{

    width:100%;

    max-width:800px;

    background:var(--card-background);

    padding:50px;

    border-radius:var(--radius-large);

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

    text-align:center;

    transition:var(--transition);

}

.contact-info:hover{

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

}

/* ==========================================
   Contact Heading
========================================== */

.contact-info h3{

    font-size:2rem;

    color:var(--heading-color);

    margin-bottom:20px;

}

.contact-info p{

    color:var(--text-color);

    line-height:1.8;

    margin-bottom:35px;

}

/* ==========================================
   Contact Details
========================================== */

.contact-details{

    display:flex;

    flex-direction:column;

    gap:25px;

    margin-bottom:40px;

}

.contact-item{

    display:flex;

    align-items:center;

    gap:20px;

    padding:20px;

    background:var(--section-background);

    border-radius:var(--radius-medium);

    transition:var(--transition);

}

.contact-item:hover{

    background:var(--primary-color);

    transform:translateX(8px);

}

.contact-item i{

    width:60px;

    height:60px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--primary-color);

    color:#ffffff;

    border-radius:50%;

    font-size:1.4rem;

}

.contact-item:hover i{

    background:#ffffff;

    color:var(--primary-color);

}

/* ==========================================
   Contact Text
========================================== */

.contact-item h4{

    margin-bottom:6px;

    color:var(--heading-color);

}

.contact-item a,
.contact-item p{

    color:var(--text-color);

    transition:var(--transition);

}

.contact-item:hover h4,
.contact-item:hover a,
.contact-item:hover p{

    color:#ffffff;

}

/* ==========================================
   Contact Social Icons
========================================== */

.contact-social{

    display:flex;

    justify-content:center;

    gap:20px;

}

.contact-social a{

    width:55px;

    height:55px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--primary-color);

    color:#ffffff;

    border-radius:50%;

    font-size:1.3rem;

    transition:var(--transition);

}

.contact-social a:hover{

    background:var(--primary-hover);

    transform:translateY(-6px);

}

/* ==========================================
   Contact Decoration
========================================== */

.contact-info{

    position:relative;

    overflow:hidden;

}

.contact-info::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:var(--primary-color);

}

/* ==========================================
   Footer Section
========================================== */

footer{

    background:var(--secondary-color);

    color:#ffffff;

}

/* ==========================================
   Footer Container
========================================== */

.footer-container{

    max-width:1200px;

    margin:0 auto;

    padding:70px 8% 50px;

    display:grid;

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

    gap:50px;

}

/* ==========================================
   Footer Logo
========================================== */

.footer-logo .logo-box{

    margin-bottom:20px;

}

.footer-logo h3{

    color:#ffffff;

    margin-bottom:10px;

    font-size:1.5rem;

}

.footer-logo p{

    color:#cbd5e1;

}

/* ==========================================
   Footer Headings
========================================== */

.footer-links h4,
.footer-contact h4,
.footer-social h4{

    color:#ffffff;

    margin-bottom:25px;

    font-size:1.2rem;

}

/* ==========================================
   Footer Links
========================================== */

.footer-links ul{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.footer-links a{

    color:#cbd5e1;

    transition:var(--transition);

}

.footer-links a:hover{

    color:#ffffff;

    padding-left:8px;

}

/* ==========================================
   Footer Contact
========================================== */

.footer-contact p{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:18px;

    color:#cbd5e1;

}

.footer-contact i{

    color:var(--primary-color);

    width:20px;

}

.footer-contact a{

    transition:var(--transition);

}

.footer-contact a:hover{

    color:#ffffff;

}

/* ==========================================
   Footer Social
========================================== */

.footer-social .social-icons{

    display:flex;

    gap:18px;

}

.footer-social .social-icons a{

    width:48px;

    height:48px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

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

    color:#ffffff;

    font-size:1.2rem;

    transition:var(--transition);

}

.footer-social .social-icons a:hover{

    background:var(--primary-color);

    transform:translateY(-5px);

}

/* ==========================================
   Footer Bottom
========================================== */

.footer-bottom{

    border-top:1px solid rgba(255,255,255,.1);

    padding:25px 20px;

    text-align:center;

}

.footer-bottom p{

    color:#cbd5e1;

    font-size:.95rem;

}

/* ==========================================
   Footer Decoration
========================================== */

footer{

    position:relative;

}

footer::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:var(--primary-color);

}

/* ==========================================
   Utility Classes
========================================== */

.text-center{

    text-align:center;

}

.text-left{

    text-align:left;

}

.text-right{

    text-align:right;

}

.d-flex{

    display:flex;

}

.align-center{

    align-items:center;

}

.justify-center{

    justify-content:center;

}

.justify-between{

    justify-content:space-between;

}

.flex-column{

    flex-direction:column;

}

.w-100{

    width:100%;

}

.mt-1{

    margin-top:10px;

}

.mt-2{

    margin-top:20px;

}

.mt-3{

    margin-top:30px;

}

.mb-1{

    margin-bottom:10px;

}

.mb-2{

    margin-bottom:20px;

}

.mb-3{

    margin-bottom:30px;

}

/* ==========================================
   Animations
========================================== */

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes slideLeft{

    from{

        opacity:0;

        transform:translateX(-50px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes slideRight{

    from{

        opacity:0;

        transform:translateX(50px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.85);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

/* ==========================================
   Animation Classes
========================================== */

.fade-in{

    animation:fadeIn .8s ease forwards;

}

.fade-up{

    animation:fadeUp .8s ease forwards;

}

.slide-left{

    animation:slideLeft .8s ease forwards;

}

.slide-right{

    animation:slideRight .8s ease forwards;

}

.zoom-in{

    animation:zoomIn .8s ease forwards;

}

/* ==========================================
   Focus States
========================================== */

a:focus-visible,
button:focus-visible{

    outline:3px solid var(--primary-color);

    outline-offset:4px;

    border-radius:6px;

}

/* ==========================================
   Text Selection
========================================== */

::selection{

    background:var(--primary-color);

    color:#ffffff;

}

/* ==========================================
   Custom Scrollbar
========================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:var(--section-background);

}

::-webkit-scrollbar-thumb{

    background:var(--primary-color);

    border-radius:10px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary-hover);

}

/* ==========================================
   Global Transition
========================================== */

a,
button,
.card,
.project-card,
.skill-card,
.education-card,
.certificate-card{

    transition:var(--transition);

}

/* ==========================================
   Image Optimization
========================================== */

img{

    user-select:none;

    -webkit-user-drag:none;

}

/* ==========================================
   Responsive Media
========================================== */

iframe,
video{

    max-width:100%;

}

/* ==========================================
   Print
========================================== */