/* *************** Navigation Bar Start *************** */

@media (max-width: 1250px) {
  .nav_link {
    display: flex;
    justify-content: center;  /* Center horizontally */
    align-items: center;  /* Center vertically */
    margin-left: 60px;
  }
}

/* Mobile Styles */
@media (max-width: 1000px) {
  nav {
      flex-direction: column;
      height: auto;
      padding: 1rem 0;
  }

  .nav_name {
    font-size: 1.3rem;
    text-align: left;
    margin-left: 0; /* Ensure it starts from the left */
  }

  .nav__menu__btn {
    display: block;
  }

  .nav_link {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 172px;
    left: 43%;
    width: 1000px; /* Ensures full viewport width */
    background-color: rgba(51, 51, 51, 0.9);
    text-align: center;
    padding: 10px 0;
    gap: 1rem;
    justify-content: center;
    align-items: center;
  }

  .nav_link.open {
      display: flex;
  }
}

@media (max-width: 650px) {
  .nav_link {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 162px;
    left: 40%;
    width: 1000px; /* Ensures full viewport width */
    background-color: rgba(51, 51, 51, 0.9);
    text-align: center;
    padding: 10px 0;
    gap: 1rem;
    justify-content: center;
    align-items: center;
  }
}

@media (max-width: 400px) {
  .nav_link {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 162px;
    left: 30%;
    width: 1000px; /* Ensures full viewport width */
    background-color: rgba(51, 51, 51, 0.9);
    text-align: center;
    padding: 10px 0;
    gap: 1rem;
    justify-content: center;
    align-items: center;
  }
}

@media (max-width: 380px) {
  nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align children to the left */
    height: auto;
    padding: 1rem 0;
  }

  .nav_name {
    font-size: 1.3rem;
    text-align: left;
    align-self: flex-start; /* Align to the left */
    margin-left: 1rem; /* Adjust spacing from the left */
  }
}

/* *************** Navigation Bar End *************** */




/* *************** Home Section Start *************** */

@media (max-width: 700px) {
  .home_main h1 {
    font-size: 1.75rem;
    margin-bottom: 30px;
  }

  .home_main h2 {
      font-size: 1.3rem;
      color: var(--primary-color);
      margin-bottom: 70px;
  }

  .home_main p {
    font-size: 1rem;
    line-height: 1.6;
    max-width: 800px;
  }
}

@media (max-width: 450px) {
  .home_main h1 {
    font-size: 1.5rem;
    margin-bottom: 30px;
  }

  .home_main h2 {
      font-size: 1.3rem;
      color: var(--primary-color);
      margin-bottom: 70px;
  }
  .home_main p {
    font-size: 1rem;
    line-height: 1.6;
    max-width: 800px;
  }
}

@media (max-width: 1000px) {
  .home_main {
      flex-direction: column;
      text-align: center;
  }

  .home_main .home_text {
      text-align: center;
  }

  .home_main img {
      margin-top: 20px;
  }

  .link_logo_main {
      margin-bottom: 50px;
  }
}

@media (max-width: 350px) {
  .my_picher:hover {
    transform: scale(1.06); /* Slight zoom effect on hover */
  }
}

/* *************** Home Section End *************** */




/* *************** Education Section Start *************** */



@media (max-width: 600px) {
  .header_name {
    margin-bottom: -60px; /* Adds space below */
  }

  /* Education Title Styling */
  .education_main h1 {
      font-size: 2.5rem;
      margin-top: 10px;
      margin-bottom: 100px;
  }
}

/* ======= Mobile Styles (Max Width 1350px) ======= */
@media (max-width: 1350px) {
  .edu_wrapper {
      flex-direction: column;
      align-items: center;
      width: 100%;
  }

  .edu_details_box,
  .edu_details_box2 {
      width: 100%;
      display: flex;
      justify-content: center; /* Center items in mobile view */
      margin: 20px 0; /* Add spacing */
      margin-top: 60px; /* Add space between boxes */
  }

  /* Remove Vertical Line for Mobile */
  .edu_wrapper::after {
      display: none;
  }
}


@media (max-width: 500px) {
  /* Education Title Styling */
  .education_main h1 {
    font-size: 2rem;
    margin-top: 10px;
    margin-bottom: 100px;
  }

  /* Fix Card Positioning */
  .card {
    position: relative;
    width: 500px;
    height: 150px;
    border-radius: 14px;
    z-index: 500; /* Lower than navbar */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 20px 20px 60px #58ccfa;
    transition: transform 0.3s ease-in-out;
  }

  /* Background should also have a lower z-index */
  .bg {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 97.5%;
    height: 140px;
    z-index: 2;
    background: rgba(0, 0, 0, 0.98);
    backdrop-filter: blur(24px);
    border-radius: 10px;
    overflow: hidden;
    outline: 2px solid black;
    transition: transform 0.3s ease-in-out;
  }

  /* Ensure text is above the background */
  .card p {
    position: relative;
    z-index: 2; /* Higher than the background */
    font-size: 1rem;
    font-weight: bold;
    text-align: center; /* Center-align text */
  }

  /* Specific styling for .edu_sub_text */
  .card .edu_sub_text {
    position: relative;
    z-index: 2; /* Higher than the background */
    font-size: 0.9rem;
    font-weight: normal; /* Normal weight for sub-text */
    text-align: center; /* Center-align sub-text */
    margin-top: 5px; /* Space between main text and sub-text */
  }

  .blob {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 150px;
    border-radius: 50%;
    background-color: #e81cff;
    opacity: 1;
    filter: blur(12px);
    animation: blob-bounce 5s infinite ease;
    transition: transform 0.3s ease-in-out;
  }
}


@media (max-width: 420px) {
  /* Background should also have a lower z-index */
  .bg {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 96%;
    height: 140px;
    z-index: 2;
    background: rgba(0, 0, 0, 0.98);
    backdrop-filter: blur(24px);
    border-radius: 10px;
    overflow: hidden;
    outline: 2px solid black;
    transition: transform 0.3s ease-in-out;
  }
}


/* ======= Mobile Styles (Max Width 1350px) ======= */
@media (max-width: 1350px) {
  .cards_wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 cards per row */
    gap: 100px; /* Space between cards */
    justify-items: center; /* Centers cards horizontally */
    margin-top: 30px;
  }
}


/* ======= Mobile Styles (Max Width 1000px) ======= */
@media (max-width: 1000px) {
  .cards_wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 3 cards per row */
    gap: 100px; /* Space between cards */
    justify-items: center; /* Centers cards horizontally */
    margin-top: 30px;
  }
}

/* *************** Education Section End *************** */





/* *************** Certifications Section Start *************** */

@media (max-width: 500px) {
  .header_name {
    margin-bottom: -60px; /* Adds space below */
  }

  /* Education Title Styling */
  .certifications_main h1 {
      font-size: 2rem;
      margin-top: 10px;
      margin-bottom: 150px;
  }
}


/* ======= Mobile Styles (Max Width 1200px) ======= */
@media (max-width: 1200px) {
  .cer_wrapper {
      display: flex;
      flex-direction: column; /* Stack elements vertically */
      align-items: center; /* Center align the items */
      width: 100%;
      margin-bottom: 0px;
  }
  
  /* Apply same styles to both .cert_box and .cert_box2 */
  .cert_box, .cert_box2 {
      width: 90%; /* Ensure both take full width */
      display: flex;
      justify-content: center; /* Center content */
      margin-bottom: 80px; /* Add spacing between boxes */
  }
}

@media (max-width: 500px) {
  /* Fix Card Positioning */
  .card2 {
    position: relative;
    width: 500px;
    height: 150px;
    border-radius: 14px;
    z-index: 500; /* Lower than navbar */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 10px 10px 20px #58ccfa;
    transition: transform 0.3s ease-in-out;
  }

  /* Background should also have a lower z-index */
  .bg2 {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 97%;
    height: 140px;
    z-index: 2;
    background: rgba(0, 0, 0, 0.98);
    backdrop-filter: blur(24px);
    border-radius: 10px;
    overflow: hidden;
    outline: 2px solid black;
    transition: transform 0.3s ease-in-out;
  }

  .blob2 {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 150px;
    border-radius: 50%;
    background-color: #e81cff;
    opacity: 1;
    filter: blur(12px);
    animation: blob-bounce 5s infinite ease;
    transition: transform 0.3s ease-in-out;
  }
}


@media (max-width: 420px) {
  .bg2 {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 95.7%;
    height: 140px;
    z-index: 2;
    background: rgba(0, 0, 0, 0.98);
    backdrop-filter: blur(24px);
    border-radius: 10px;
    overflow: hidden;
    outline: 2px solid black;
    transition: transform 0.3s ease-in-out;
  }
}

/* *************** Certifications Section End *************** */




/* *************** Projects Section Start *************** */

@media (max-width: 610px) {
  /* Education Title Styling */
  .projects_main h1 {
    font-size: 2.5rem;
    margin-top: -70px;
    margin-bottom: 60px;
  }

  /* Wrapper for the cards */
  .cards_wrapper {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* 3 cards per row */
    gap: 100px; /* Space between cards */
    justify-items: center; /* Centers cards horizontally */
    margin-top: 30px;
  }
}

@media (max-width: 500px) {
  /* Education Title Styling */
  .projects_main h1 {
    font-size: 2rem;
    margin-top: -50px;
    margin-bottom: 120px;
  }
}

/* *************** Projects Section End *************** */




/* *************** Skills Section Start *************** */

@media (max-width: 500px) {
  /* Education Title Styling */
  .skills_main h1 {
    font-size: 2rem;
    margin-bottom: 100px;
  }

  .book {
    position: relative;
    border-radius: 10px;
    width: 180px;
    height: 250px;
    background-color: black;
    -webkit-box-shadow: 1px 1px 12px #58ccfa;
    box-shadow: 1px 1px 12px #58ccfa;
    -webkit-transform: preserve-3d;
    -ms-transform: preserve-3d;
    transform: preserve-3d;
    -webkit-perspective: 2000px;
    perspective: 2000px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #ffffff;
  }

  .skills_main p {
    font-size: 25px;
    color: white;
    font-weight: bolder;
  }
}

/* *************** Skills Section End *************** */




/* *************** Contact Section Start *************** */

@media (max-width: 660px) {
  .contact_main {
    display: flex;
    flex-direction: column; /* Stacks elements vertically */
    align-items: center; /* Centers everything horizontally */
    color: var(--text-light);
    padding: 100px 3%;
    max-width: 560px;
    margin: auto;
  }

  /* Education Title Styling */
  .contact_main h1 {
      font-size: 2rem;
      display: flex;
      justify-content: center; /* Center horizontally */
      align-items: center; /* Center vertically */
      margin-top: -60px;
      margin-bottom: 60px;
  }

  .con_wrapper {
      display: flex;
      justify-content: center; /* Center horizontally */
      align-items: center; /* Center vertically */
      width: 100%;
      margin-bottom: 50px;
  }

  .con_box {
      width: 100%; /* Adjust width */
      display: flex;
      justify-content: center; /* Center content */
  }

  .contact-form {
      display: flex;
      flex-direction: column;
      width: 80%;
      max-width: 100%;
      padding: 20px;
      background: rgba(0, 0, 0, 0.8);
      border-radius: 10px;
  }

  .contact-form h2 {
      text-align: center;
      color: var(--text-light);
      margin-bottom: 20px;
  }

  .contact-form label {
      color: var(--text-light);
      font-size: 1rem;
      margin-bottom: 5px;
  }

  .contact-form input,
  .contact-form textarea {
      width: 100%;
      padding: 10px;
      margin-bottom: 15px;
      border: 1px solid var(--primary-color);
      border-radius: 5px;
      background: #222;
      color: var(--text-light);
      margin-bottom: 20px;
  }

  .contact-form button {
      background: var(--primary-color);
      color: var(--text-dark);
      padding: 10px;
      width: 105%;
      border: none;
      border-radius: 5px;
      font-size: 1rem;
      font-weight: bold; /* Makes input text bold */
      cursor: pointer;
      transition: background 0.3s ease;
      margin-top: 40px;
  }

  .contact-form button:hover {
      background: #1da1f2;
  }

  /* Fix Card Positioning */
  .card3 {
      position: relative;
      width: 90%;
      height: 800px;
      border-radius: 14px;
      z-index: 500; /* Lower than navbar */
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      box-shadow: 0 10px 25px #58ccfa, 0 -7px 15px #e81cff; /* Top and bottom shadows */
      transition: transform 0.3s ease-in-out;
  }

  .card3 p {
      position: relative;
      z-index: 2; /* Higher than the background */
      font-size: 1.2rem;
      font-weight: bold;
      text-align: center; /* Center-align text */
  }

  /* Specific styling for .edu_sub_text */
  .card3 .edu_sub_text {
      position: relative;
      z-index: 2; /* Higher than the background */
      font-size: 1rem;
      font-weight: normal; /* Normal weight for sub-text */
      text-align: center; /* Center-align sub-text */
      margin-top: 5px; /* Space between main text and sub-text */
  }
}


@media (max-width: 360px) {
  .contact-form input,
  .contact-form textarea {
      width: 95%;
      padding: 10px;
      margin-bottom: 15px;
      border: 1px solid var(--primary-color);
      border-radius: 5px;
      background: #222;
      color: var(--text-light);
      margin-bottom: 20px;
  }

  .contact-form button {
      background: var(--primary-color);
      color: var(--text-dark);
      padding: 10px;
      width: 104%;
      border: none;
      border-radius: 5px;
      font-size: 1rem;
      font-weight: bold; /* Makes input text bold */
      cursor: pointer;
      transition: background 0.3s ease;
      margin-top: 40px;
  }
}

/* *************** Contact Section End *************** */




/* *************** Footer start *************** */

@media (max-width: 550px) {
  footer {
    position: relative;
    bottom: 0;
    left: 0;
    width: auto; /* Full width */
    height: 255px; /* Auto height to adjust content */
    background-color: rgba(51, 51, 51, 0.9); /* Semi-transparent background */
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    align-items: center;
    padding: 20px 2rem;
    color: white;
  }

  /* Footer navigation links centered */
  .footer_nav_link {
      list-style: none;
      display: grid;
      grid-template-columns: repeat(2, auto); /* 3 links per row */
      gap: 25px 120px; /* Space between links */
      padding: 0;
      margin: 0 auto; /* Centers the grid inside the footer */
      justify-content: center; /* Centers the grid horizontally */
      text-align: center;
      margin-bottom: 25px;
  }

    /* Footer bottom bar */
    .footer_bar {
      width: 100%;
      padding: 1rem;
      font-size: 0.85rem;
      text-align: center;
  }
}

@media (max-width: 420px) {
  footer {
    position: relative;
    bottom: 0;
    left: 0;
    width: auto; /* Full width */
    height: 255px; /* Auto height to adjust content */
    background-color: rgba(51, 51, 51, 0.9); /* Semi-transparent background */
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    align-items: center;
    padding: 20px 2rem;
    color: white;
  }

  /* Footer navigation links centered */
  .footer_nav_link {
      list-style: none;
      display: grid;
      grid-template-columns: repeat(2, auto); /* 3 links per row */
      gap: 25px 80px; /* Space between links */
      padding: 0;
      margin: 0 auto; /* Centers the grid inside the footer */
      justify-content: center; /* Centers the grid horizontally */
      text-align: center;
      margin-bottom: 25px;
  }

  /* Footer bottom bar */
  .footer_bar {
      width: 100%;
      padding: 0.5rem;
      font-size: 0.7rem;
      text-align: center;
  }

  .link_logo_fo {
      display: flex;
      justify-content: center;  /* Center horizontally */
      align-items: center;  /* Center vertically */
      gap: 25px;  /* Space between images */
      margin-bottom: 40px; /* Adjust top margin if needed */
  }
}

@media (max-width: 420px) {
  footer {
    position: relative;
    bottom: 0;
    left: 0;
    width: auto; /* Full width */
    height: 318px; /* Auto height to adjust content */
    background-color: rgba(51, 51, 51, 0.9); /* Semi-transparent background */
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    align-items: center;
    padding: 20px 2rem;
    color: white;
  }

  .link_logo_fo {
    display: grid;
    grid-template-columns: repeat(3, auto); /* 3 links per row */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    gap: 25px;  /* Space between images */
    margin-bottom: 40px; /* Adjust top margin if needed */
  }
}

/* *************** Footer End *************** */




/* *************** Chatbot start *************** */


@media (max-width: 500px) {
  .chatbot-button img {
    width: 45px;
    height: 45px;
    object-fit: contain;
    border-radius: 50%; 
    object-fit: cover;
    border: 3px solid var(--primary-color);
    box-shadow: 0 0 10px var(--primary-color);
  }

  /* Chatbot container */
  .chatbot-container {
    position: fixed;
    bottom: 10px;
    right: 10px;
    width: 300px;
    height: 400px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .chatbot-container h2 {
    font-size: 20px;
  }

  /* Chatbot header */
  .chatbot-header {
    background-color: var(--primary-color);
    padding: 10px;
    height: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    font-weight: bold;
  }

  /* Close button */
  .close-chatbot {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
  }

  /* Chat messages */
  .chatbot-messages {
    padding: 10px;
    height: 287px;
    overflow-y: auto;
    background: #f5f5f5;
    font-size: 13px;
    display: flex;
    flex-direction: column;
  }

  /* Text input */
  #userInput {
    flex: 1;
    padding: 10px;
    border: 2px solid #ccc; /* Added border */
    outline: none;
    font-size: 12px;
    border-radius: 5px; /* Optional: Add rounded corners */
  }

  /* Voice typing button */
  #voiceBtn {
    width: 35px;
    height: 35px;
    background-color: var(--primary-color);
    color: white;
    font-size: 18px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    margin-right: 2px;
  }
}

/* *************** Chatbot End *************** */