/* ===========================
   Reset
=========================== */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
/* ===========================
   Day 11 - Smooth Scrolling
=========================== */

html {
    scroll-behavior: smooth;
}
html{
    scroll-behavior:smooth;
}

/* ===========================
   Body
=========================== */

body{
    font-family:Arial, Helvetica, sans-serif;
    background:#f4f7fc;
    color:#333;
    line-height:1.6;
    transition:0.4s;
}

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

header{
    background:#0d6efd;
    padding:25px 20px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

header h1{
    color:white;
    font-size:38px;
    margin-bottom:20px;
    letter-spacing:2px;
    text-transform:uppercase;
}

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

.navbar{
    display:flex;
    justify-content:center;
    gap:25px;
    flex-wrap:wrap;
}

.navbar a{
    text-decoration:none;
    color:white;
    font-size:18px;
    font-weight:bold;
    transition:.3s;
}

.navbar a {
    position: relative;
    text-decoration: none;
    color: white;
    font-size: 18px;
    font-weight: bold;
    transition: color 0.3s ease;
}

.navbar a:hover {
    color: yellow;
}
.navbar a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -5px;

    width: 0;

    height: 2px;

    background: yellow;

    transition: width 0.3s ease;

}

.navbar a:hover::after {

    width: 100%;

}

/* ===========================
   Grid Layout
=========================== */

.container{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:25px;
    padding:30px;
}

#home{
    grid-column:1/3;
    text-align:center;
}

#contact{
    grid-column:1/3;
}

/* ===========================
   Sections
=========================== */

section{
    background:white;
    padding:25px;
    border-radius:10px;
    box-shadow:0 4px 10px rgba(0,0,0,.1);
    transition:.3s;
}

section:hover{
    transform:translateY(-3px);
}

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

section h2{
    color:#0d6efd;
    margin-bottom:15px;
}

h3{
    margin:15px 0 10px;
    color:#444;
}

/* ===========================
   Paragraph
=========================== */

p{
    margin-bottom:10px;
}

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

.skills-list{
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.skills-list li{
    background:#0d6efd;
    color:white;
    padding:10px 18px;
    border-radius:20px;
}

/* ===========================
   Button Animation
=========================== */

button {

    background: #0d6efd;

    color: white;

    border: none;

    padding: 12px 25px;

    font-size: 16px;

    border-radius: 5px;

    cursor: pointer;

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

}

button:hover {

    background: #084298;

    transform: translateY(-3px);

    box-shadow:
        0 5px 12px rgba(0, 0, 0, 0.2);

}

button:active {

    transform: scale(0.95);

}
/* Theme Button */

#themeBtn{
    background:#198754;
}

#themeBtn:hover{
    background:#146c43;
}

/* ===========================
   Contact Form
=========================== */

.contact-form{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.contact-form label{
    font-weight:bold;
}

.contact-form input,
.contact-form textarea{
    padding:12px;
    border:1px solid #ccc;
    border-radius:5px;
    font-size:15px;
}

.contact-form input:focus,
.contact-form textarea:focus{
    outline:none;
    border-color:#0d6efd;
}

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

footer{
    background:#222;
    color:white;
    text-align:center;
    padding:20px;
}

/* ===========================
   Scroll To Top Animation
=========================== */

#topBtn {

    position: fixed;

    right: 20px;

    bottom: 20px;

    width: 50px;

    height: 50px;

    border-radius: 50%;

    border: none;

    background: #0d6efd;

    color: white;

    font-size: 22px;

    cursor: pointer;

    display: none;

    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.3);

    transition:
        transform 0.3s ease,
        background 0.3s ease;

}

#topBtn:hover {

    background: #084298;

    transform: scale(1.15);

}
/* ===========================
   Dark Theme
=========================== */

.dark-mode{

    background:#1b1b1b;

    color:white;

}

.dark-mode section{

    background:#2d2d2d;

    color:white;

}

.dark-mode h2,
.dark-mode h3{

    color:#66b3ff;

}

.dark-mode input,
.dark-mode textarea{

    background:#444;

    color:white;

    border:1px solid #666;

}

.dark-mode footer{

    background:#111;

}

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

/* Desktop */

@media(min-width:1200px){

.container{

max-width:1200px;

margin:auto;

}

}

/* Tablet */

@media(min-width:769px) and (max-width:1024px){

.container{

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

padding:20px;

}

}

/* Mobile */

@media(max-width:768px){

header h1{

font-size:28px;

}

.navbar{

flex-direction:column;

align-items:center;

gap:10px;

}

.container{

grid-template-columns:1fr;

padding:15px;

}

#home,
#contact{

grid-column:auto;

}

.skills-list{

justify-content:center;

}

button{

width:100%;

margin:5px 0;

}

footer{

font-size:14px;

}

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

.projects-container{

    display:grid;

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

    gap:20px;

    margin-top:20px;

}

.project-card{

    background:white;

    border-radius:10px;

    padding:20px;

    box-shadow:0 4px 10px rgba(0,0,0,.15);

    text-align:center;

    transition:.3s;

}

.project-card:hover{

    transform:translateY(-8px);

}

.project-card h3{

    color:#0d6efd;

    margin-bottom:15px;

}

.project-card p{

    margin-bottom:20px;

}

.project-card button{

    width:100%;

}
/* Tablet */

@media(max-width:1024px){

.projects-container{

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

}

}

/* Mobile */

@media(max-width:768px){

.projects-container{

grid-template-columns:1fr;

}
/* ===========================
   Project Card Animation
=========================== */

.project-card {

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

}

.project-card:hover {

    transform:
        translateY(-10px)
        scale(1.02);

    box-shadow:
        0 10px 20px rgba(0, 0, 0, 0.2);

}

}/* ===========================
   Skills
=========================== */

.skills-container{

display:flex;

flex-wrap:wrap;

gap:15px;

justify-content:center;

margin-top:20px;

}

.skill-card{

background:#0d6efd;

color:white;

padding:15px 25px;

border-radius:30px;

font-weight:bold;

transition:.3s;

}

.skill-card:hover{

transform:scale(1.08);

background:#084298;

}

/* ===========================
   Experience
=========================== */

.experience-card{

margin-top:20px;

padding:20px;

background:white;

border-left:6px solid #0d6efd;

border-radius:10px;

box-shadow:0 4px 10px rgba(0,0,0,.1);

}

.experience-card h3{

color:#0d6efd;

margin-bottom:10px;

}

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

#resume{

text-align:center;

}

#resume button{

margin-top:20px;

padding:12px 30px;

}
/* ===========================
   Day 10 - Contact Section
=========================== */

#contact {
    grid-column: 1 / 3;
}

.contact-intro {
    text-align: center;
    margin-bottom: 25px;
}

.contact-container {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 30px;
    margin-top: 20px;
}

/* Contact Information */

.contact-info {
    background: #f4f7fc;
    padding: 25px;
    border-radius: 10px;
}

.contact-info h3 {
    color: #0d6efd;
    margin-bottom: 15px;
}

.contact-info p {
    margin-bottom: 15px;
}

.contact-info a {
    color: #0d6efd;
    text-decoration: none;
}

.contact-info a:hover {
    text-decoration: underline;
}

/* Social Links */

.social-links {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 15px;
}

.social-links a {
    background: #0d6efd;
    color: white;
    padding: 10px 18px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: 0.3s;
}

.social-links a:hover {
    background: #084298;
    transform: translateY(-2px);
}

/* Contact Form */

.contact-form-container {
    padding: 25px;
    background: white;
    border-radius: 10px;
}

.contact-form-container h3 {
    color: #0d6efd;
    margin-bottom: 20px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contact-form label {
    font-weight: bold;
    margin-top: 8px;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 15px;
    font-family: Arial, Helvetica, sans-serif;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: #0d6efd;
    box-shadow: 0 0 5px rgba(13, 110, 253, 0.2);
}

/* Validation Error */

.error {
    color: #dc3545;
    font-size: 13px;
    min-height: 18px;
}
/* ===========================
   Form Animation
=========================== */

.contact-form input,
.contact-form textarea {

    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.2s ease;

}

.contact-form input:focus,
.contact-form textarea:focus {

    border-color: #0d6efd;

    box-shadow:
        0 0 8px rgba(13, 110, 253, 0.25);

    transform: translateY(-2px);

}

/* Success Message */

#formMessage {
    text-align: center;
    font-weight: bold;
    margin-top: 15px;
}

/* ===========================
   Contact Responsive Design
=========================== */

/* Tablet */

@media (max-width: 1024px) {

    .contact-container {
        grid-template-columns: 1fr;
    }

}

/* Mobile */

@media (max-width: 768px) {

    #contact {
        grid-column: auto;
    }

    .contact-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .contact-info,
    .contact-form-container {
        padding: 18px;
    }

    .social-links {
        justify-content: center;
    }

}
/* ===========================
   Header Animation
=========================== */

header h1 {
    animation: fadeDown 1s ease-in-out;
}

@keyframes fadeDown {

    from {
        opacity: 0;
        transform: translateY(-30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}
/* ===========================
   Section Animation
=========================== */

section {

    animation: fadeUp 0.8s ease-in-out;

}

@keyframes fadeUp {

    from {

        opacity: 0;

        transform: translateY(30px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}
section {

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

}

section:hover {

    transform: translateY(-5px);

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

}
/* ===========================
   Skills Animation
=========================== */

.skill-card {

    transition:
        transform 0.3s ease,
        background 0.3s ease;

}

.skill-card:hover {

    transform: scale(1.1);

    background: #084298;

}
/* ===========================
   Social Links Animation
=========================== */

.social-links a {

    transition:
        transform 0.3s ease,
        background 0.3s ease;

}

.social-links a:hover {

    transform: translateY(-5px);

    background: #084298;

}
/* ===========================
   Resume Button
=========================== */

#resume button {

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

}

#resume button:hover {

    transform: scale(1.05);

    box-shadow:
        0 6px 15px rgba(0, 0, 0, 0.2);

}
/* ===========================
   Experience Animation
=========================== */

.experience-card {

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

}

.experience-card:hover {

    transform: translateX(8px);

    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.15);

}
footer {

    transition: background 0.3s ease;

}

footer:hover {

    background: #111;

}
/* ===========================
   Page Load Animation
=========================== */

body {

    animation: pageLoad 0.8s ease-in-out;

}

@keyframes pageLoad {

    from {

        opacity: 0;

    }

    to {

        opacity: 1;

    }

}
/* ===========================
   Day 13 - Final Optimization
=========================== */

/* Prevent horizontal overflow */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Make images responsive */
img {
    max-width: 100%;
    height: auto;
}

/* Better text wrapping */
h1,
h2,
h3,
p {
    overflow-wrap: break-word;
}

/* Improve container spacing */
.container {
    width: 100%;
}

/* Mobile optimization */
@media (max-width: 768px) {

    .container {
        padding: 15px;
    }

    section {
        width: 100%;
    }

    header {
        padding: 20px 15px;
    }

    header h1 {
        font-size: 28px;
        line-height: 1.3;
    }

    .navbar {
        width: 100%;
        gap: 12px;
    }

    .navbar a {
        font-size: 16px;
    }

    .contact-container {
        width: 100%;
    }

    .contact-form input,
    .contact-form textarea {
        width: 100%;
    }

    #topBtn {
        width: 45px;
        height: 45px;
        right: 15px;
        bottom: 15px;
    }
}

/* Small mobile devices */
@media (max-width: 480px) {

    header h1 {
        font-size: 24px;
    }

    section {
        padding: 15px;
    }

    section h2 {
        font-size: 22px;
    }

    button {
        padding: 10px 18px;
        font-size: 15px;
    }

    footer {
        font-size: 13px;
    }

}