/* Basic Reset and Typography */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    font-family: "Datatype",   
                monospace, 
                'Segoe UI', 
                Tahoma, 
                Geneva, 
                Verdana, 
                sans-serif; 
}

body { 
    line-height: 1.6; 
    color: #333; 
    background-color: #f9f9f9; 
}

h1, h2, h3 { 
    margin-bottom: 10px; 
    color: #222; 
}
        
a { color: #0078D4; text-decoration: none; } /* Azure Blue */
        
a:hover { text-decoration: underline; }

/* Layout and Sections */
header { background-color: #00aeff; color: #fff; padding: 40px 20px; text-align: center; }
header h1 { color: #fff; font-size: 2.5rem; margin-bottom: 5px; }
header p { font-size: 1.2rem; font-weight: 300; }
        
.container { max-width: 900px; margin: 0 auto; padding: 40px 20px; }
section { margin-bottom: 50px; background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
        
/* Project & Experience Cards */
.card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.card { border: 1px solid #eee; padding: 20px; border-radius: 5px; }
.card h3 { color: #0078D4; }
.date { font-size: 0.9rem; color: #666; margin-bottom: 10px; display: block; }
        
/* Footer */
footer { text-align: center; padding: 20px; background: #222; color: #fff; margin-top: 40px; }

/* Mobile Responsiveness */
@media(max-width: 768px) {
    .card-grid { grid-template-columns: 1fr; }
}
        
/* Footer Section Styling */
.contact-footer {
    background-color: #00b4f6;
    color: #ffffff;
    padding: 60px 20px 20px;
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.footer-content h2 {
    font-size: 2rem;
    margin-bottom: 10px;
    color: #ffffff;
}

.footer-content p {
    font-size: 1.1rem;
    color: #cccccc;
    margin-bottom: 30px;
}

/* Social Icons Container */
.social-icons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

/* Individual Icon Styling */
.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #f5f5f5;
    color: #ffffff;
    font-size: 1.5rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Hover Effects with Brand Colors */
.icon:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.icon.email:hover { background-color: #f5f5f5; }      /* Gmail Red */
.icon.linkedin:hover { background-color: #0077B5; }   /* LinkedIn Blue */
.icon.github:hover { background-color: #f5f5f5; }     /* GitHub Purple */
.icon.twitter:hover { background-color: #000000; }    /* X Black */
.icon.fiverr:hover { background-color: #1DBF73; }     /* Fiverr Green */

/* Bottom Copyright Bar */
.footer-bottom {
    border-top: 1px solid #333333;
    padding-top: 20px;
    color: #f5f5f5;
    font-size: 0.9rem;
}


#mail{
    background-image: url();
}