body {
  background: #eee;
  font-family: bookman;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding-top: 20px;
}
/* .d-block, h2{
  color: #33475c;
  font-weight: 700;
  font-size: 2.5rem;
  display: block;
  margin: 0 auto;
  text-align: center;
  padding-bottom: 20px;
} */

@font-face {
  font-family: "internormal";
  src: url(../font/Inter/static/Inter-Regular.ttf);
}

@font-face {
  font-family: "bookman";
  src: url(../font/bookman/Bookman-Old-Style-Regular/Bookman\ Old\ Style\ Regular.ttf);
}

@font-face {
  font-family: "Brow";
  src: url(../font/Barlow_Condensed/BarlowCondensed-Regular.ttf);
}

@font-face {
  font-family: "Browthin";
  src: url(../font/Barlow_Condensed/BarlowCondensed-Thin.ttf);
}

@font-face {
  font-family: "Browmedium";
  src: url(../font/Barlow_Condensed/BarlowCondensed-Medium.ttf);
}

@font-face {
  font-family: "Jose";
  src: url(..//font/Josefin_Slab/static/JosefinSlab-Regular.ttf);
}


/* You can also apply it to a specific container if needed */
#flex-container-1 {
  direction: rtl;
}

/* ============= Begin Testimonial Flexbox ============ */
#flex-container-1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  min-height: 400px;
  height: 110vh;
  max-width: 1000px;
  margin: auto;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  position: relative;
}

#left-zone-1 {
  height: 50%;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}

#left-zone-1 .list-1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  list-style: none;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  margin: auto;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
}

.item-1 input {
  display: none;
}

.label-1 {
  display: block;
  opacity: 1;
  height: 50px;
  text-align: end;
  line-height: 50px;
  position: relative;
  margin-right: -11px;
  font-size: 20px;
  font-family: "bookman";
  color: #FFF;
  font-weight:normal;
}

.label-1:hover {
  opacity: 0.75;
  background-color: rgba(255, 255, 255, 0.065);
  display: flex;
  align-items: end;
  justify-content: end;
  cursor: pointer;
}

.list-1 p{
  font-size: 40px;
}

.content-test-1 {
  position: absolute;
  right: 40%;
  bottom: 0;
  opacity: 1;
  height: 50%;
  width: 100%;
  -webkit-transition: 0.5s ease-out;
  -o-transition: 0.5s ease-out;
  transition: 0.5s ease-out;
  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;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  pointer-events: none;
}

.content-test-1 h1 {
  background-color: #9E885E;
  padding: 5px;
  border-radius: 66px;
}

.content-test-1 p {
  max-width: 50%;
  text-align: center;
}

#right-zone-1 {
  width: 100%;
  -webkit-box-flex: 1;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
  height: 50%;
}

input:checked ~ .content-test-1 {
  -webkit-transform: translateY(0%);
  -ms-transform: translateY(0%);
  transform: translateY(0%);
  -webkit-transition: -webkit-transform 1s;
  transition: -webkit-transform 1s;
  -o-transition: transform 1s;
  transition: transform 1s;
  transition: transform 1s, -webkit-transform 1s;
  opacity: 1;
}

.shrim-images-slider{
  background-color: #9E885E;
  padding: 05px;
  height: 530px;
  width: 380px;
  border-radius: 66px;
  position: absolute;
  top: -35px;
}

.shrim-slider-heading{
  margin-top: 50px;
  display: block;
}

.shrim-slider-heading-2::before{
  content: " ";
  height: 250px;
  right: 650px;
  position: absolute;
  border: 2px solid hsla(39, 25%, 50%, 1);
  border-radius: 30px;
}

.shrim-slider-heading h1{
font-family: "bookman";
color: #FFF;
}
.shrim-slider-heading-2{
  position: relative;
}

.shrim-slider-heading-2 p{
  margin-top:25px;
  font-size: 20px;
  color: #FFF;
  font-family: "bookman";
  line-height: 65px;
  display: flex;
}

.shrim-slider-heading-2 p:hover{
  background-color: #ffffff13;
  width: 70%;
  padding: 03px 05px 0px;
}

@media (min-width: 480px) {
  #flex-container-1 {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    min-height: auto;
    height: 400px;
    /* position: absolute; */
    top: -50px;
    bottom: 0;
    left: 0;
    right: 0;
  }

  #left-zone-1 .list-1 {
    border-left: 3px solid #9E885E;
    height: 225px;
  }

  .content-test-1 {
    width: 65%;
    height: 100%
  }

  #left-zone-1 {
    width: 50%;   
   
  }

  #right-zone-1 {
    height: 100%;
    width: 50%;
  }
}
/* If the screen size is 480px or less */
@media (max-width: 480px) {
  .content_testimonial-11 .picto {
    padding-top: 100px;
  }
  .content_testimonial-22 .picto {
    padding-top: 100px;
  }
  .content_testimonial-33 .picto {
    padding-top: 100px;
  }

  .item-1 > .label-1 {
    font-size: 1.3rem;
  }
}

.content_testimonial-11 .picto {
  height: 100px;
  width: 100px;
  background-image: url("https://i.postimg.cc/RFBHkG46/diamond-Pest-Logo-small.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.content_testimonial-11 h1 {
  color: #d64541;
  text-align: center;
}

.content_testimonial-22 .picto {
  height: 100px;
  width: 100px;
  background-image: url("https://i.postimg.cc/bsqXXKCV/a-Plus-Handyman-Logo.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.content_testimonial-22 h1 {
  color: #f5d76e;
}

.content_testimonial-33 .picto {
  height: 100px;
  width: 100px;
  background-image: url("https://i.postimg.cc/zV7sq04z/mod-Movers-Logo.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.content_testimonial-33 h1 {
  color: #00b16a;
}

.content_testimonial-4 .picto {
  height: 100px;
  width: 100px;
  background-image: url("https://i.postimg.cc/4Y3rypTz/ak-Pest-Control-Logo.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.content_testimonial-4 h1 {
  color: #f27935;
}

.content-test-1 h1:first-letter {
  text-transform: uppercase;
}

input:checked ~ .label-1 {
  opacity: 1;
  -webkit-animation: all 10s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation: all 10s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

input:checked ~ .label-1 .label_testimonial-11 {
  color: #fff;
  background-color: rgba(158, 136, 94, 1)
  rgba(158, 136, 94, 0);
  border-left: solid 4px #fff;
  margin-right: 2px;
  display: block;
}

input:checked ~ .label-1 .label_testimonial-22 {
  color: #fff;
  background-color: rgba(158, 136, 94, 1)
  rgba(158, 136, 94, 0);
  border-left: solid 4px #fff;
  margin-right: 2px;
}

input:checked ~ .label-1 .label_testimonial-33 {
  color: #fff;
  background-color: rgba(158, 136, 94, 1)
  rgba(158, 136, 94, 0);
  border-left: solid 4px #fff;
  margin-right: 2px;
}

.label-1:first-letter {
  text-transform: uppercase;
}

.label-1_testimonial-11:hover {
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#ffffff),
    to(#d64541a3)
  );
  background-image: -webkit-linear-gradient(left, #ffffff, #d64541a3);
  background-image: -o-linear-gradient(left, #ffffff, #d64541a3);
  background-image: linear-gradient(to right, #ffffff, #d64541a3);
  font-size: 1.2rem;
  -webkit-transition: font-size 0.5s;
  -o-transition: font-size 0.5s;
  transition: font-size 0.5s;
}

.label-1_testimonial-22:hover {
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#ffffff),
    to(#f5d76e59)
  );
  background-image: -webkit-linear-gradient(left, #ffffff, #f5d76e59);
  background-image: -o-linear-gradient(left, #ffffff, #f5d76e59);
  background-image: linear-gradient(to right, #ffffff, #f5d76e59);
  font-size: 1.2rem;
  -webkit-transition: font-size 0.5s;
  -o-transition: font-size 0.5s;
  transition: font-size 0.5s;
}

.label-1_testimonial-33:hover {
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#ffffff),
    to(#00b16aa3)
  );
  background-image: -webkit-linear-gradient(left, #ffffff, #00b16aa3);
  background-image: -o-linear-gradient(left, #ffffff, #00b16aa3);
  background-image: linear-gradient(to right, #ffffff, #00b16aa3);
  font-size: 1.2rem;
  -webkit-transition: font-size 0.5s;
  -o-transition: font-size 0.5s;
  transition: font-size 0.5s;
}

.label-1_testimonial-4:hover {
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#ffffff),
    to(#f27935a3)
  );
  background-image: -webkit-linear-gradient(left, #ffffff, #f27935a3);
  background-image: -o-linear-gradient(left, #ffffff, #f27935a3);
  background-image: linear-gradient(to right, #ffffff, #f27935a3);
  font-size: 1.2rem;
  -webkit-transition: font-size 0.5s;
  -o-transition: font-size 0.5s;
  transition: font-size 0.5s;
}

p.testimonialState {
  margin-top: -5px;
  font-size: 0.8rem;
  font-style: italic;
  color: #808080d4;
}

p.testimonialFrom {
  margin-top: 5px;
  font-weight: bold;
  color: #33475c;
}

.skill-heading p{
  font-size: 20px;
  color: white;
}
/* ============== End Testimonial Flexbox =============