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

body{

  font-family:
  'Times New Roman',
  Times,
  serif;

  background: #fdfcf8;
}

.doctor-list-section{

  padding: 100px 80px;

  text-align: center;
}

.small-title{

  color: #557153;

  letter-spacing: 2px;

  font-weight: bold;

  font-size: 12px;

  margin-bottom: 10px;
}

.doctor-list-section h1{

  color: #2d5a27;

  font-size: 45px;

  margin-bottom: 60px;

  line-height: 1.2;
}

.doctor-grid-container{

  max-width: 1300px;

  margin: auto;

  display: grid;

  grid-template-columns:
  repeat(4,1fr);

  gap: 20px;
}

.doctor-card{

  background: white;

  padding: 30px 20px;

  border-radius: 20px;

  box-shadow:
  0px 8px 25px
  rgba(0,0,0,0.05);

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  align-items: center;

  transition: 0.3s ease;

  border: 1px solid #f0f0f0;

  text-decoration: none;
}

.doctor-card:hover{

  transform: translateY(-8px);

  box-shadow:
  0px 12px 30px
  rgba(0,0,0,0.1);
}

.doctor-card h2{

  color: #6f4e37;

  font-size: 26px;

  margin-bottom: 15px;

  text-align: center;
}


.doctor-card p{

  color: #777;

  font-size: 17px;

  line-height: 1.6;

  margin-bottom: 25px;

  text-align: center;
}

.explore-btn{

  background:
  linear-gradient(
    to right,
    #557153,
    #2d5a27
  );

  color: white;

  border: none;

  padding: 12px 28px;

  border-radius: 50px;

  font-weight: 600;

  cursor: pointer;

  font-size: 14px;

  transition: 0.3s ease;

  width: auto;

  display: inline-block;
}

.explore-btn:hover{

  transform: scale(1.03);
}

.back-link{

  display: flex;

  justify-content: center;

  text-decoration: none;

  margin-top: 50px;
}

.back-btn{

  background:
  linear-gradient(
    to right,
    #557153,
    #2d5a27
  );

  color: white;

  border: none;

  padding: 12px 30px;

  border-radius: 40px;

  font-size: 16px;

  font-weight: 600;

  cursor: pointer;

  transition: 0.3s ease;

  width: auto;

  display: inline-block;
}

.back-btn:hover{

  transform: scale(1.05);
}

@media(max-width:1100px){

  .doctor-grid-container{

    grid-template-columns:
    repeat(2,1fr);
  }

  .doctor-list-section{

    padding: 80px 40px;
  }

  .doctor-list-section h1{

    font-size: 37px;
  }
}

@media(max-width:600px){

  .doctor-grid-container{

    grid-template-columns: 1fr;
  }

  .doctor-list-section{

    padding: 60px 20px;
  }

  .doctor-list-section h1{

    font-size: 26px;
  }

  .doctor-card h2{

    font-size: 21px;
  }

  .doctor-card p{

    font-size: 16px;
  }

  .explore-btn{

    font-size: 13px;

    padding: 10px 24px;
  }

  .back-btn{

    font-size: 14px;

    padding: 10px 24px;

    width: auto;
  }
}