/*Navigation bar css */

/*@media(max-width: 768px) {
  .hideOnMobile {
    display: none;
  }

  .menu-button {
    display: block;
  }
}

@media(max-width: 400px) {
  .sidebar {
    width: 100%;
  }
}  */


/*Navigation bar css */

@media(max-width:930px) {
  nav .togglebtn {
      display: initial;
  }

  /* for toggle button**/
  .click {
      top: 45px;
  }

  .click span {
      position: absolute;
      margin-top: 12px
  }

  .click span:first-child {
      transform: rotate(-40deg);
  }

  .click span:nth-child(2) {
      opacity: 0;
      margin: 0;
  }

  .click span:last-child {
      transform: rotate(45deg);
      top: 0;
  }

  nav .navlinks {
    display: none;
      position: absolute;
      top: 110px;
      right: -100%;
      bottom: 0;
      width: 60%;
      height: 100vh;
      background-color: rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(12px);
      box-shadow: -10px 0 10px rgba(0, 0, 0, 0.1);
      z-index: 3;
      transition: 0.5s;
      padding: 25px 0px;
  }

  nav .navlinks li {
      display: block;
  }

  nav .navlinks li a {
      display: block;
      margin-bottom: 15px;
      text-align: center;
  }

  nav .navlinks.open {
      right: 0;
  }
}

/* Main content */
@media (max-width: 768px) {
  .hero {
    text-align: center;
    margin-top: 100px;
  }

  .content-row {
    flex-direction: column-reverse;
  }

  .image-circle {
    margin-top: 20px;
    margin-bottom: 30px;
    width: 300px;
    height: 300px;
  }

  .profile-img {
    width: 280px;
    height: 280px;
  }
}

/* About section */
@media (max-width: 768px) {
  .about-me {
    text-align: center;
    margin-top: 140px;
  }

  .about-image-circle {
    margin-top: -70px;
    margin-bottom: 30px;
  }
  .about-image-container {
    justify-self: center;
  }
}

/*============Service section Responsive layout================*/
@media (max-width: 768px) {
  .services {
    flex-direction: column;
    align-items: center;
  }

  .services-box {
    width: 100%;
    height: 300px;
  }

  .main-content h2 {
    margin-top: -26px;
  }
  .main-content img{
    margin-top: -18px;
  }

}

/*============= Skill section responsive css*/
@media (max-width: 768px) {
  .skills-container .skills-title{
      font-size: 2rem;
  }

  .skills-container .skills-title::after {
      font-size: 7rem;
  }
  .skills-container .skills-grid {
    padding: 0;
    margin: 0 10px;
  }
  .skills-container .skills-grid .skill {
      flex: 1 1 100%; /* Switch to one column for smaller screens */
  }

  .skills-container .skills-grid .skill .progress-bar span {
      font-size: 0.8rem;
  }
}

/*==========My team section responsive css ========*/
@media screen and (max-width: 900px) { 
	.my-team .card-container .wrapper .carousel { 
		grid-auto-columns: calc((100% / 2) - 9px); 

	} 
} 

@media screen and (max-width: 768px) { 
	.my-team .card-container .wrapper .carousel { 
		grid-auto-columns: 100%; 

	} 
}


/*contact section responsive css*/
@media (max-width: 768px) {
  .contact-section{
    width: 100%;
  }
  .contact-section .contact-container .left-container{
    border: none;
  }
  .contact{
    flex-direction: column;
  }
  .left-column{
    width: 100%;
  }
  .right-column{
    width: 100%;
  }
  .contact-section .contact-container .left-container .contact-form .form-group{
    flex-direction: column;
   
  }
}

/*Experience section responsive css*/
@media (max-width: 768px) {
  .work-experience .experience-container{
    flex-direction: column;
  }
  .work-experience .experience-container .experience-card{
    margin: 0 auto;
  }
}