.container {
  border-radius: 4px;
  margin-bottom: 10px;
  overflow: hidden;
}

.switchContainer {
  display: flex;
  width: 758px;
  margin: 0 auto;
  justify-content: space-around;
  font-size: 1.2rem;
  font-weight: 700;
  border: 1px solid #1F998E;
}
.dark .switchContainer{
  border-color: #333333;
}
.switch {
  flex: 1;
  padding: 10px;
  border: none;
  cursor: pointer;
  text-align: center;
}

.activeSwitch {
  flex: 1;
  padding: 10px;
  border: none;
  background-color: #1F998E;
  color:#FFFFFF;
  cursor: pointer;
  text-align: center;

}


.dark {
color: #f0f0f0;
}
.content{
padding: 1rem 0rem;
width: 570px;

}
.dark .switch {
color: #f0f0f0;
}

.dark .activeSwitch {
background: #f0f0f0;
color: #111111;
}
.dark .activeSwitch1 {
background: #f0f0f0;
color: #111111;
}
@media (max-width: 1600px) {

.container {
margin-bottom: 10px;
overflow: hidden;
}

.switchContainer {
display: flex;
width: 570px;
margin: 0 auto;
justify-content: space-around;
border-radius: 8px;
font-size: 1rem;
font-weight: 700;
border: 1px solid #1F998E;
}

.switch {
flex: 1;
padding: 10px;
border: none;
cursor: pointer;
text-align: center;
}

.activeSwitch {
flex: 1;
padding: 10px;
border: none;
background-color: #1F998E;
border-radius: 8px 0px 0px 8px;
color:#FFFFFF;
cursor: pointer;
text-align: center;

}
.activeSwitch1 {
flex: 1;
padding: 10px;
border: none;
background-color: #1F998E;
border-radius: 0px 8px 8px 0px;
color:#FFFFFF;
cursor: pointer;
text-align: center;

}



.dark {
color: #f0f0f0;
}

.dark .switch {
color: #f0f0f0;
}

.dark .activeSwitch {
background: #f0f0f0;
color: #111111;
}

}
@media (max-width: 1100px) {
.switchContainer {
  width: 35rem;
  font-size: 1rem;
}
.switch {
  padding: 0.5rem 0.5rem;
}
}
@media (max-width: 600px) {
.switchContainer{
  width: 100%;
  font-size: 14px;
}
.container{
  width: 360px;
}
.switch{
  padding: 15px 15px;
}
.activeSwitch{
  padding: 15px 15px;
}

}