@media screen and (max-width: 1202px) {
    .card {
        width: 100% !important;
    }
}

@media screen and (max-width: 1158px) {
    

    .navbar-nav a {
        padding: 15px  30px !important;
    } 

    

    
}


@media screen and (max-width: 994px) {
    

    .col-lg-6.col-auto.col-md-12,
    #buttons_center {
        margin-top: 20px;
        text-align: center;
    }


    

    form .container div.contact-details {
        margin: auto;
        display: inline-block;
        text-align: center;
        padding: 0 20px;
    }

    form .container h2 {
        margin: 0 !important;
        padding: 10px;
        text-align: center;
    }

    .col-lg-6.col-md-12 {
        margin-top: 50px;
    }

    .col-lg-4.col-md-12.mt-3 {
        text-align: center;
    }
}

@media screen and (max-width: 580px) {

    .timeline-time,
    .timeline-icon,
    .timeline::before {
        display: none;
    }

    .timeline-body {
        margin: auto !important;
    }

    .hamburger {
        display: flex !important;
        height: 72px;
    }

    .navbar-nav {
        flex-direction: column !important;
    }

    .navbar {
        display: none !important;
    }
}

@media screen and (max-width: 380px) {
    #buttons_center {
        display: flex;
        flex-direction: column;
        row-gap: 10px;
        width: 10%;
    }

    div form i {
        padding: 7px;
    }

}

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


html, body {
    font-family: 'Montserrat';
    color: gray;
    background-color: white;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    
}

  
  .logo_name {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;              /* Slightly larger for emphasis */
    font-weight: 700;               /* Bold for strong presence */
    text-transform: uppercase;      /* Professional look */
    letter-spacing: 0.1em;          /* Improves readability for uppercase */
    color: white;                 /* Vibrant blue that pops on dark backgrounds */
    
    /* Optional glow effect */
    animation: glow 1.5s infinite alternate ease-in-out;
    
    /* Remove the line below if you want a flatter look without shadow */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
  }
  


p {
    text-align: justify;
    font-size: 20px;
    color: rgba(89, 88, 88, 0.628);
}

.container-fluid img {
    
    height: auto;
}

.navbar+.container-fluid {
    background-color: rgba(128, 128, 128, 0.233);
}

.navbar-nav a {
    color: white;
}


.navbar-nav a:hover {
    color: #ffc107;
}

.btn.btn-light {
    border: 1.5px solid black;
}

.card {

    transition: all 0.3s ease-in-out;
    background-color: #222;
    border-radius: 10px;

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

.card:hover {
    box-shadow: 20px 20px 20px rgba(11, 11, 11, 0.3); /* Stronger shadow */
    transform: scale(1.05); /* Slight zoom */
    background-color: #222; /* Darker background */
}
.card img {
    height: 300px;
    width: 100%;
}

.container form .col {
    margin-top: 20px;
}

div form i {
    padding: 20px;
    color: rgb(44, 128, 255);
}

footer {
    padding-top: 10px;
    height: 75px;
    margin-top: 100px;
}

footer p {
    color: white;
    font-family: 'Times New Roman', Times, serif;
    font-size: 17px;
    line-height: 1;
}

#contact-form {
    margin-top: 150px;
}

a {
    text-decoration: none;
}

.hamburger i {
    
    color: white;
    transition: transform 0.3s ease, color 0.3s ease;
}

.hamburger i:hover {
    color: #f39c12; /* Change color on hover */
    transform: scale(1.2); /* Slight zoom effect */
}

.hamburger i:active {
    transform: rotate(90deg); /* Rotate when clicked */
}

.shown {
    display: flex !important;
}

.justify-content-center.py-5 {
    margin: 10px;
}

@keyframes modernDuotone {
    0% {
        color: #ffc107; /* Yellow */
    }
    16% {
        color: #ff9f43; /* Orange */
    }
    33% {
        color: #ffdd57; /* Gold */
    }
    50% {
        color: #c0c0c0; /* Metallic Silver */
    }
    66% {
        color: #b3b3b3; /* Soft Gray */
    }
    83% {
        color: #d4af37; /* Deep Gold */
    }
    100% {
        color: #ffc107; /* Back to Yellow */
    }
}

  
  .change_color {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    text-transform: capitalize;
    font-size: 2rem;
    animation: modernDuotone 3s infinite ease-in-out;
  }

  .social-icons a i {
    transition: all 0.3s ease-in-out;
}

.social-icons a:hover i {
    color: #007bff; /* Blue color on hover */
    transform: scale(1.2); /* Slight zoom effect */
    text-shadow: 0px 0px 8px rgba(0, 123, 255, 0.6); /* Soft glow */
}

.card-text {
    color: white;
    
    font-size: 16px;
}

.project {
text-align: center;
 color: black;   
 position: relative;
 padding-bottom: 6px;
 display: inline-block;
 
}



.card-title i, .material-symbols-outlined{
    
 font-size: 30px !important;
 color: #ffc107;
}

h6.card-title {
    
    color: #ffc107;

}
.card-title {
    color: white;

}

.form-control {
    border-width: 2px;

}

.btn-warning {

    background-color: #ffc107;
    color: white;
    text-decoration: none;
} 


.skill {
    text-align: center;
}
.skill-section {
    text-align: center;
}
.skill-section h1, #qualify h1, .contact-me, .interested{
    text-align: center;
    color: black;
    display: inline-block;
    position: relative;
    padding-bottom: 5px;

}

.project::after, .skill-section h1::after, #qualify h1::after, .contact-me::after, .interested::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -12%;
    width: 100%; /* Adjust width to make underline shorter */
    height: 6px; /* Thickness of the underline */
    background-color: #ffc107; /* Change color */
    border-radius: 50px; /* More rounded effect */
    transform: translateX(-50%); /* Centers the underline */
}


.skill img {
    padding: 20px 60px;
    width: 220px;
    height: 220px;
    display: inline-block;
}

#buttons_center button{
    min-width: 100px;
    height: 50px;
    width: 20%;
}

.timeline img {
    max-width: 100%;
    min-width: 30px;
    height: auto;
    /* border-radius: 50%; */
}

.punjab
{
    max-width: 100%;
    border-radius: 50%;
}

.contact-details {
    padding: 10px;
}
.contact-details i {
    color: black;
    border-radius: 50%;
    background-color: #ffc107;
    padding: 10px;
    margin: 0;
}