.tab-carousel {
  margin-bottom: 30%;
  margin-top: 1%;
}
.interior h2 {
  font-size: 74px;
  line-height: 74px;
}
p {
  font-size: 1.25rem;
  line-height: 1.2;
  font-family: "Nunito Sans", sans-serif;
}
.tab-bar {
  background: #92c3c3;
  color: #000;
  padding: 30px 0px;
  overflow: hidden;
}
.tab-content img {
  height: fit-content;
  margin: 40px;
  aspect-ratio: auto 1.2797619048;
  align-self: end;
}
.tab-content a {
  color: #111 !important;
  font: 1.25rem "Nunito", sans-serif;
  padding: 0 !important;
  text-decoration: none !important;
  background-image: linear-gradient(transparent 0%, transparent calc(50% - 8px), #b8d9d9, calc(50% - 8px), #b8d9d9 100%) !important;
  transition: background-position 120ms ease-in-out, padding 120ms ease-in-out !important;
  background-size: 100% 200% !important;
  background-position: 0 0 !important;
}
.tab-content a:hover {
  background-image: linear-gradient(transparent 0%, transparent calc(50% - 8px), #92c3c3, calc(50% - 8px), #92c3c3 100%) !important;
  background-position: 0 100% !important;
}
.tab-wrap label {
  font-family: "Saira Extra Condensed", sans-serif;
}
.tab-wrap {
  width: 90%;
  position: relative;
  display: flex;
  top: -82px;
  max-width: 1600px;
  margin: 0 auto;
}
.serv-img1 {
  content: url(../png/compass-3.png);
  height: 400px;
  margin-right: 40px;
}
.serv-img2 {
  content: url(../png/magnet-3.png);
  height: 430px;
  margin-top: 5%;
}
.serv-img3 {
  content: url(../png/roses-3.png);
  height: 400px;
  margin-top: 5%;
}
.serv-img4 {
  content: url(../png/tools-3.png);
  height: 400px;
}
.serv-img5 {
  content: url(../png/typewriter-3.png);
  height: 400px;
}
.serv-img6 {
  content: url(../png/old-camera-3.png);
  height: 400px;
  margin-top: 5%;
}
.tab-interior {
  flex-direction: column;
  margin-top: -10%;
  max-width: 900px;
}
input[type="radio"][name="tabs"] {
  position: absolute;
  z-index: -1;
  opacity: 0;
}
input[type="radio"][name="tabs"]:checked + .tab-label-content .tab-content {
  display: flex;
  width: 90%;
}
@keyframes slidein {
  from {
    margin-left: 100%;
    width: 90%;
  }
  to {
    margin-left: 0%;
    width: 90%;
  }
}
input[type="radio"][name="tabs"]:nth-of-type(0):checked ~ .slide {
  left: calc((100% / 6) * -1);
}
input[type="radio"][name="tabs"]:nth-of-type(1):checked ~ .slide {
  left: calc((100% / 6) * 0);
}
input[type="radio"][name="tabs"]:nth-of-type(2):checked ~ .slide {
  left: calc((100% / 6) * 1);
}
input[type="radio"][name="tabs"]:nth-of-type(3):checked ~ .slide {
  left: calc((100% / 6) * 2);
}
input[type="radio"][name="tabs"]:nth-of-type(4):checked ~ .slide {
  left: calc((100% / 6) * 3);
}
input[type="radio"][name="tabs"]:nth-of-type(5):checked ~ .slide {
  left: calc((100% / 6) * 4);
}
input[type="radio"][name="tabs"]:nth-of-type(6):checked ~ .slide {
  left: calc((100% / 6) * 5);
}
input[type="radio"][name="tabs"]:first-of-type:checked ~ .slide {
  left: 0;
}
label {
  cursor: pointer;
  color: #000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 36px;
  transition: color 0.2s ease;
  width: 100%;
  padding: 51px 20px;
  font-size: 2.2rem;
  white-space: nowrap;
}
.tab-label-content {
  width: 100%;
}
.tab-content {
  position: absolute;
  top: 100px;
  left: 2%;
  line-height: 130%;
  display: none;
  animation-duration: 400ms;
  animation-name: slidein;
  width: 100%;
}
.slide {
  width: 125px;
  height: 72px;
  background: transparent;
  margin-left: 8.3%;
  border: 3px solid #000;
  color: #fff;
  position: absolute;
  top: 50.5%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: left 0.3s ease-out;
}
.slide:before {
  position: absolute;
  width: 0;
  height: 3px;
  content: "";
  background: #fff;
  top: -3px;
  left: -3px;
}
.slide:after {
  position: absolute;
  width: 3px;
  height: 0;
  content: "";
  background: #fff;
  top: -3px;
  right: -3px;
}
@media screen and (max-width: 1900px) {
  .tab-carousel {
    margin-bottom: 30%;
  }
  .tab-content img {
    align-self: flex-start;
  }
}
@media screen and (max-width: 1700px) {
  .tab-carousel {
    margin-bottom: 30%;
  }
  .tab-content img {
    align-self: flex-start;
  }
}
@media screen and (max-width: 1600px) {
  .tab-carousel {
    margin-bottom: 42%;
  }
}
@media screen and (max-width: 1500px) {
  .tab-carousel {
    margin-bottom: 45%;
  }
}
@media screen and (max-width: 1400px) {
  .tab-carousel {
    margin-bottom: 52%;
  }
  .tab-interior {
    left: 35% !important;
  }
}
@media screen and (max-width: 1300px) {
  .tab-carousel {
    margin-bottom: 60%;
  }
  .tab-interior {
    left: 40% !important;
  }
  input[type="radio"][name="tabs"]:checked + .tab-label-content .tab-content {
    width: 86%;
  }
}
@media screen and (max-width: 1200px) {
  .tab-carousel {
    margin-bottom: 78%;
  }
  input[type="radio"][name="tabs"]:checked + .tab-label-content .tab-content {
    width: 81%;
  }
  .tab-interior {
    left: 48% !important;
  }
}
@media screen and (max-width: 1100px) {
  .tab-carousel {
    margin-bottom: 88%;
  }
  .tab-interior {
    left: 50% !important;
  }
  input[type="radio"][name="tabs"]:checked + .tab-label-content .tab-content {
    width: 82%;
  }
}
@media screen and (max-width: 1000px) {
  .slide {
    margin-left: 8%;
  }
  .tab-content {
    padding: unset;
  }
  .tab-wrap {
    width: 100%;
  }
  .tab-carousel {
    margin-bottom: 107%;
  }
  .tab-content img {
    align-self: flex-start;
  }
  .tab-interior {
    left: 53% !important;
  }
  input[type="radio"][name="tabs"]:checked + .tab-label-content .tab-content {
    width: 78%;
  }
}
@media screen and (max-width: 900px) {
  .tab-interior {
    left: 60% !important;
  }
  input[type="radio"][name="tabs"]:checked + .tab-label-content .tab-content {
    width: 74%;
  }
}
@media screen and (max-width: 850px) {
  .tab-carousel {
    margin-bottom: 148%;
  }
  .tab-interior {
    left: 67% !important;
  }
  input[type="radio"][name="tabs"]:checked + .tab-label-content .tab-content {
    width: 72% !important;
  }
}
@media screen and (max-width: 770px) {
  .tab-content img {
    align-self: center;
    width: 80%;
  }
  .interior h2 {
    text-align: center;
  }
  .tab-content {
    padding: 0px 0 0 11%;
  }
  input[type="radio"][name="tabs"] {
    top: 40px;
  }
  .interior {
    margin-top: -17%;
  }
  input[type="radio"][name="tabs"]:checked + .tab-label-content .tab-content {
    width: 96% !important;
  }
  .tab-interior {
    left: 0 !important;
    margin-top: 4% !important;
  }
  .tab-carousel {
    margin-bottom: 263%;
  }
  .serv-img1 {
    height: 300px;
    width: 300px !important;
    margin-left: 9%;
  }
  .serv-img2 {
    height: 300px;
    width: 300px !important;
    margin-left: 9%;
    margin-top: 4%;
  }
  .serv-img3 {
    height: 300px;
    width: 300px !important;
    margin-top: 4%;
  }
  .serv-img4 {
    height: 300px;
    width: 300px !important;
    margin-top: 4%;
  }
  .serv-img5 {
    height: 300px;
    width: 300px !important;
    margin-top: 4%;
    margin-left: 8%;
  }
  .serv-img6 {
    height: 300px;
    width: 300px !important;
    margin-top: 4%;
  }
}
@media screen and (max-width: 740px) {
  label {
    font-size: 1.2rem;
    justify-content: space-evenly;
  }
  .tab-label-content {
    width: 15%;
  }
  .tab-carousel {
    margin-bottom: 263%;
  }
  .slide {
    width: 68px;
    margin-left: 8.6%;
    overflow: hidden;
  }
  .tab-wrap {
    justify-content: space-evenly;
    column-gap: 4px;
  }
}
.dark-theme label {
  color: white;
}
.dark-theme .tab-bar {
  background: #2170b8;
}
.dark-theme .tab-content a {
  background-image: linear-gradient(transparent 0%, transparent calc(50% - 8px), #db816b, calc(50% - 8px), #db816b 100%) !important;
}
.dark-theme .tab-content a:hover {
  background-image: linear-gradient(transparent 0%, transparent calc(50% - 8px), #db816b, calc(50% - 8px), #db816b 100%) !important;
}
.dark-theme .slide {
  border: 3px solid #e6afae;
}
/*# sourceMappingURL=carousel-module.css.map */