h1{
    font-family: 'Merriweather', serif;
}

a.tag{
    font-family: 'Source Code Pro', monospace;
    letter-spacing: 1.5px;
    border: 0px;
    border-radius:0px;
}

button.tag{
    font-family: 'Source Code Pro', monospace;
    letter-spacing: 1.5px;
    border: 0px;
    border-radius:0px;
    color: white;
    font-size: 13px;
    padding-left: 10px;
    padding-right:10px;
    padding-top:5px;
    padding-bottom:5px;
}

.btn:focus,.btn:active {
    outline: none !important;
    box-shadow: none;
 }

.btn:hover{
    background-color: #a0e0f5 !important;
}

.instagram{
    background-color: #E1306C !important;
}

.linkedin{
    background-color: #0a66c2 !important;
}

.github{
    background-color: #171515  !important;
}

.behance{
    background-color: #053eff  !important;
}

.message{
    background-color: #3b3b3b !important;
}

.html{
    background-color: #f06529 !important;
}

.css{
    background-color: #2965f1 !important;
}

.php{
    background-color: #777BB3 !important;
}

.vb{
    background-color: #308cf5 !important;
}

/* Progress Bar Colors */
.viz-progress {
    background: linear-gradient(45deg, #f0824f, #ff9a66) !important;
}

.ae-progress {
    background: linear-gradient(45deg, #CF96FD, #d8a6fd) !important;
}

.pp-progress {
    background: linear-gradient(45deg, #E298F2, #e7a8f4) !important;
}

.ps-progress {
    background: linear-gradient(45deg, #31A8FF, #4db5ff) !important;
}

.ai-progress {
    background: linear-gradient(45deg, #f8a829, #fbb447) !important;
}

.id-progress {
    background: linear-gradient(45deg, #FF3366, #ff5277) !important;
}

.c4d-progress {
    background: linear-gradient(45deg, #303BA4, #4a52b8) !important;
}

.html-progress {
    background: linear-gradient(45deg, #f06529, #f27742) !important;
}

.css-progress {
    background: linear-gradient(45deg, #2965f1, #4178f3) !important;
}

.php-progress {
    background: linear-gradient(45deg, #777BB3, #8a8ec2) !important;
}

.lang-progress {
    background: linear-gradient(45deg, #36454F, #4a5862) !important;
}

/* Original Tag Colors for Social Links */
.viz {
    background-color: #f0824f !important;
}

.ae {
    background-color: #CF96FD !important;
}

.pp {
    background-color: #E298F2 !important;
}

.ps {
    background-color: #31A8FF !important;
}

.ai {
    background-color: #f8a829 !important;
}

.id {
    background-color: #FF3366 !important;
}

.c4d {
    background-color: #303BA4 !important;
}

.ble {
    background-color: #EA7600 !important;
}

.lang {
    background-color: #36454F !important;
}

/* Layout */
.top {
    height: 30px;
}

/* Form Improvements */
.modal-body {
    padding: 2rem;
}

.form-control {
    border-radius: 8px;
    border: 1px solid #ddd;
    padding: 0.75rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-control:focus {
    border-color: #4a90e2;
    box-shadow: 0 0 0 0.2rem rgba(74, 144, 226, 0.25);
}

.form-control.is-valid {
    border-color: #28a745;
}

.form-control.is-invalid {
    border-color: #dc3545;
}

.invalid-feedback {
    display: block;
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .skill-item {
        margin-bottom: 1.5rem;
    }
    
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    h1 {
        font-size: 2rem;
    }
    
    .pricing-header p {
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    h1 {
        font-size: 1.5rem;
    }
    
    h4 {
        font-size: 1.25rem;
    }
    
    h5 {
        font-size: 1.1rem;
    }
    
    .modal-body {
        padding: 1rem;
    }
}

/* Accessibility */
.progress-bar:focus {
    outline: 2px solid #4a90e2;
    outline-offset: 2px;
}

a:focus, button:focus {
    outline: 2px solid #4a90e2;
    outline-offset: 2px;
}

/* Loading States */
.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Section Spacing */
section {
    margin-bottom: 3rem;
}

section h5 {
    color: #495057;
    border-bottom: 2px solid #e9ecef;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}