:root {
  --white: #ffffff;
  --black: #000000;
  --grey: #e3e4e5;
  --head_grey: #b6b6b7;
  --dark_grey: #cfcfcf;
  --green: #2a8f70;
  --dark_green: #151d16;
  --logo_green: #6bbe45;
  --logo_grey: #4d4b54;
  --primary: 'Roboto', sans-serif;
  --secondary: 'Roboto', sans-serif;
}
#myBtn {
  display: flex; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: #65bf46; /* Set a background color */
  color: rgb(0, 0, 0); /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 16px; /* Increase font size */
  z-index: 100000;
  transition: 1s;
}
#myBtn:hover {background-color: #519938; transition: 0.3s;}
body {padding: 0px; margin: 0px;}
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);
@media only screen and (min-width: 1280px) {

    body {padding: 0; margin: 0;}
    p {color: var(--dark_green);  font-size: 22px;}
    header {background-color: var(--logo_grey); font-family: var(--secondary); font-weight: 700; font-size: 20px; display: flex; justify-content: center; height: 132px;
      width: 100%; box-sizing: border-box; border-bottom: 4px solid var(--logo_grey); align-items: center; }
    .header_case {width: 90%; height: 100%; display: flex; justify-content: space-between; align-items: center;}
    .header_case_1 {width: auto; height: 100%; display: flex; justify-content: flex-start; align-items: center;}
    .logo_case img {height: 132px;}
    .header_case_2 {justify-content: flex-end !important; align-items: center!important; flex-direction: column!important}
    .phone_case {display: flex; height: 40%; justify-content: center; align-items: center; flex-direction: row; }
    .header_element {display: flex; height: 50%; align-items: center; padding: 0 10px;}
    .header_element img {height: 22px; padding-right: 10px;}
    .header_element p {font-size: 22px; color: var(--white);}
    .section_title p {font-size: 28px; font-family: var(--primary) !important; text-transform: uppercase; font-weight: 700; color: var(--dark_green);}
    a {color: var(--white); text-decoration: none;}
    a:link {text-decoration: none;}
    a:visited {text-decoration: none;}
    a:hover {text-decoration: none; opacity: 0.7;}
    a:active {text-decoration: none;}
    .hero {background-image: url("assets/1.webp"); background-size: cover; height: 35vw; width: 100%;}
    .hero_text {position: absolute; font-family: var(--primary); margin-left: 44px; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4));}
    .hero_text p {font-size: 3.2vw; color: var(--dark_green);}
    #first_section {background-color: var(--grey); height: auto; padding: 44px 0; display: flex; justify-content: center;}
    .about_us_wrap {width: 90%; height: 35vw; display: flex; justify-content: center; flex-direction: row;}
    .about_us_image {width: 50%; position: relative; overflow: hidden;}
    .about_us_image img {height: 35vw;}
    .before_image {position: absolute;}
    .after_image {position: absolute;}
    .before_image:hover {opacity: 0; transition: 0.3s;}
    .about_us_text {width: 50%; display: flex; align-items: center; justify-content: center; flex-direction: column;}
    .about_us_text_box {width: 90%;}
    .about_us_text_box p {font-family: var(--secondary); color: var(--dark_green); font-size: 1.4vw;}
    #service_section {display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 50px 0;}
    .title_wrap {width: 100%; height: auto; display: flex; align-items: center; justify-content: space-between; margin-bottom: 1vw;}
    .green_line {background-color: var(--dark_green); height: 4px; width: 30%;}
    .service_wrap {display: flex; width: 80vw; height: auto; flex-wrap: wrap;}
    .service_wrap_mob {display: none;}
    .big_case_2 {display: flex; justify-content: space-between; width: 80vw; height: calc(80vw/6); margin-bottom: 1vw;}
    .medium_case {display: flex; width: calc(40vw - 0.5vw); height: 100%; overflow: hidden; justify-content: space-between; position: relative;}
        .medium_green {
          display: flex;
          position: absolute;
          border-radius: 10px;
          background-color: var(--logo_grey);
          mix-blend-mode: multiply;
          opacity: 1;
          padding: 50px;
          height: 0.7vw;
          width: 100%;
          filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4));
          transition: 0.7s;
        }
    
    .medium_green:hover {height: 100%; transition: 0.7s;}
    .medium_text {display: flex; position: absolute; height: 40px; justify-content: center; align-items: center;}
    .medium_text p {font-size: 32px; font-family: var(--primary); font-weight: 700; color: white; text-align: center;}
    .small_case {display: flex; width: calc((40vw - 0.5vw)/2 - 0.5vw); height: 100%; overflow: hidden; z-index: 100; justify-content: center; align-items: center; position: relative;}
    .medium_case_photo img {object-fit: cover; width: 100%;}
    .small_case_photo img {object-fit: cover; width: 100%;}
    #photo_item {justify-content: center;align-items: center;}
    #two_smaller {display: flex; flex-direction: row; width: 100%; height: auto; height: 500px;}
    .small_section {height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; width:50%;}
    .ant_case img {height: 112px; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4));}
    .ant_case:hover {opacity: 0.7; transition: 0.2s;}
    .button_case img {height: 88px;   filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4));}
    .small_button_case img {height: 33px;   filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.4));}
    .button_wrap {display: flex; width: auto; flex-direction: column; height: auto;}
    .phone_text {border-radius: 10px; background-color: var(--dark_green); margin-bottom: 5px; height: 50px; width: 160px; display: flex; justify-content: center; align-items: center;}
    .phone_text p {color: var(--white)!important; font-size: 22px; font-family: var(--secondary); z-index: 19999;}
    .button_text p {font-size: 22px; font-family: var(--secondary); font-weight: 500; margin-left: 10px;}
    #grey {box-sizing: border-box; border-right: 4px solid var(--dark_green); background-color: var(--white);}
    .call_now {display: flex; opacity: 0.2; position: relative; overflow: hidden; width: 100%; height: 100%;}
    .call_now img {object-fit: cover; width: 100%;}
    .wrap_call {display: flex; position: absolute; flex-direction: column; justify-content: center; align-items: center;}
    .color_me {background-color: var(--grey);}
    footer {background-color: var(--black); height: 44px; justify-content: center; align-items: center; display: flex; user-select: none; padding: 0.5rem 0;}
    footer p {color: var(--white)!important; font-family: var(--secondary); font-size: 22px;}
    #map_section {justify-content: center; display: flex; align-items: center; border-top: 4px solid var(--dark_green); flex-direction: row; height: 550px;}
    #map_section_mob {display: none;}
    .wrap_address {width: 100%; height: 50px; display: flex; justify-content: center; align-items: center; flex-direction: row;}
    .text_address_wrap {flex-direction: column; text-align: center; flex-direction: row; display: flex;}
    .text_address_wrap p {padding: 0.2rem 0;}
    .slider {height: 350px; width: 40%; background-color: white; position: relative; overflow: hidden; display: -webkit-box;
      display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap;
      flex-flow: row nowrap; -webkit-box-align: end; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end;
      -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; box-shadow: 0 0 5px grey;
      border-radius: 10px;border: 2px solid var(--green);}
    .slider__nav {width: 12px; height: 12px; margin: 1rem 12px; border-radius: 50%; z-index: 10; outline: 6px solid #ccc;
      outline-offset: -6px; box-shadow: 0 0 0 0 var(--green), 0 0 0 0 var(--dark_green); cursor: pointer; -webkit-appearance: none;
      -moz-appearance: none; appearance: none;-webkit-backface-visibility: hidden; backface-visibility: hidden;}
    .slider__nav:checked {-webkit-animation: check 0.4s linear forwards; animation: check 0.4s linear forwards;}
    .slider__nav:checked:nth-of-type(1) ~ .slider__inner {left: 0;}
    .slider__nav:checked:nth-of-type(2) ~ .slider__inner {left: -100%;}
    .slider__nav:checked:nth-of-type(3) ~ .slider__inner {left: -200%;}
    .slider__nav:checked:nth-of-type(4) ~ .slider__inner {left: -300%;}
    .slider__nav:checked:nth-of-type(5) ~ .slider__inner {left: -400%;}
    .slider__nav:checked:nth-of-type(6) ~ .slider__inner {left: -500%;}
    .slider__inner {
      position: absolute;
      top: 0;
      left: 0;
      width: 600%;
      height: 100%;
      -webkit-transition: left 0.5s;
      transition: left 0.5s;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-flow: row nowrap;
      -ms-flex-flow: row nowrap;
      flex-flow: row nowrap;
    }
    .slider__contents {
      height: 100%;
      padding: 1rem;
      text-align: center;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      -ms-flex: 1;
      flex: 1;
      -webkit-flex-flow: column nowrap;
      -ms-flex-flow: column nowrap;
      flex-flow: column nowrap;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
    }
    .slider__contents img {filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.4));height: 33px;}
    .slider__image {font-size: 2.7rem; color: #2196F3;}
    .slider__caption {font-weight: 500; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);}
    .slider__txt {color: var(--black); margin-bottom: 2rem; max-width: 70%;}
    .review_container {display: flex; background-color: var(--grey); justify-content: center; align-items: center; height: 450px; width: 100%; font-family: var(--secondary);}
    @-webkit-keyframes check {50% {outline-color: #333;box-shadow: 0 0 0 12px #333, 0 0 0 36px rgba(51, 51, 51, 0.2);}
      100% {outline-color: #333;box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);}}

    @keyframes check {50% {outline-color: #333; box-shadow: 0 0 0 12px #333, 0 0 0 36px rgba(51, 51, 51, 0.2);}
      100% {outline-color: #333; box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);} }
    .google_link p {font-family: var(--primary); font-size: 22px;}
}

@media only screen and (min-width: 700px) and (max-width: 1279px) {
            body {padding: 0; margin: 0;}
            p {color: var(--dark_green);  font-size: 22px;}
            header {background-color: var(--logo_grey); font-family: var(--secondary); font-weight: 700; font-size: 20px; display: flex; justify-content: center; height: 110px;
              width: 100%; box-sizing: border-box; border-bottom: 4px solid var(--logo_grey); }
            .header_case {width: 90%; height: 100%; display: flex; justify-content: space-between; align-items: center;}
            .header_case_1 {width: auto; height: 100%; display: flex; justify-content: flex-start; align-items: center;}
            .logo_case img {height: 100px;}
            .header_case_2 {justify-content: flex-end !important; align-items: center; flex-direction: column!important; }
            .phone_case {display: flex; height: 40%; justify-content: center; align-items: center; flex-direction: row;}
            .header_element {display: flex; height: 50%; align-items: center; padding: 0 10px;}
            .header_element img {height: 18px; padding-right: 10px;}
            .header_element p {font-size: 18px; color: white;}
            .section_title p {font-size: 28px; font-family: var(--primary) !important; text-transform: uppercase; font-weight: 700; color: var(--dark_green); text-align: center;}
            a {color: var(--white); text-decoration: none;}
            a:link {text-decoration: none;}
            a:visited {text-decoration: none;}
            a:hover {text-decoration: none; opacity: 0.7;}
            a:active {text-decoration: none;}
            .hero {background-image: url("assets/1.webp"); background-size: cover; height: 35vw; width: 100%;}
            .hero_text {position: absolute; font-family: var(--primary); margin-left: 44px; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4));}
            .hero_text p {font-size: 3.2vw; color: var(--dark_green);}
            #first_section {background-color: var(--grey); height: auto; padding: 44px 0; display: flex; justify-content: center;}
            .about_us_wrap {width: 90%; height: 35vw; display: flex; justify-content: center; flex-direction: row;}
            .about_us_image {width: 50%; position: relative; overflow: hidden;}
            .about_us_image img {height: 35vw;}
            .before_image {position: absolute;}
            .after_image {position: absolute;}
            .before_image:hover {opacity: 0; transition: 0.3s;}
            .about_us_text {width: 50%; display: flex; align-items: center; justify-content: flex-end; flex-direction: column;}
            .about_us_text_box {width: 90%;}
            .about_us_text_box p {font-family: var(--secondary); color: var(--dark_green); font-size: 1.7vw;}
            #service_section {display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 50px 0;}
            .title_wrap {width: 100%; height: auto; display: flex; align-items: center; justify-content: space-between; margin-bottom: 1vw;}
            .green_line {background-color: var(--dark_green); height: 4px; width: 30%;}
            .service_wrap {display: flex; width: 80vw; height: auto; flex-wrap: wrap;}
            .service_wrap_mob {display: none;}
            .big_case_2 {display: flex; justify-content: space-between; width: 80vw; height: calc(80vw/6); margin-bottom: 1vw;}
            .medium_case {display: flex; width: calc(40vw - 0.5vw); height: 100%; overflow: hidden; justify-content: space-between; position: relative;}
            .medium_green {display: flex; position: absolute; background-color: var(--logo_grey); mix-blend-mode: multiply; opacity: 1; height: 70px; width: 100%; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transition: all 0.5s;}
            .medium_text {display: flex; position: absolute; height: 30px; justify-content: center; align-items: center;}
            .medium_text p {font-size: 22px; font-family: var(--primary); font-weight: 700; color: white; text-align: center; padding: 0; user-select: none;}
            .medium_green:hover {height: 100%;}
            .small_case {display: flex; width: calc((40vw - 0.5vw)/2 - 0.5vw); height: 100%; overflow: hidden; z-index: 100; justify-content: center; align-items: center; position: relative;}
            .medium_case_photo img {object-fit: cover; width: 100%;}
            .small_case_photo img {object-fit: cover; width: 100%;}
            #photo_item {justify-content: center;align-items: center;}
            #two_smaller {display: flex;flex-direction: row; width: 100%; height: 550px;}
            .small_section {width: 50%; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column;}
            .ant_case img {height: 88px; filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.4));}
            .ant_case:hover {opacity: 0.7; transition: 0.2s;}
            .button_case img {height: 66px;   filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4));}
            .small_button_case img {height: 22px;   filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.4));}
            .button_wrap {display: flex; width: auto; flex-direction: column; height: auto;}
            .phone_text {border-radius: 10px; background-color: var(--dark_green); margin-bottom: 5px; height: 50px; width: 160px; display: flex; justify-content: center; align-items: center;}
            .phone_text p {color: var(--white)!important; font-size: 22px; font-family: var(--secondary); z-index: 19999;}
            .button_text p {font-size: 22px; font-family: var(--secondary); font-weight: 500; margin: 0px 5px;}
            #grey {box-sizing: border-box; border-right: 2px solid var(--dark_green); background-color: var(--white);}
            .call_now {display: flex; opacity: 0.2; position: relative; overflow: hidden; width: 100%; height: 100%;}
            .call_now img {object-fit: cover; width: 100%;}
            .wrap_call {display: flex; position: absolute; flex-direction: column; justify-content: center; align-items: center;}
            .color_me {background-color: var(--grey);}
            footer {background-color: var(--black); height: 44px; justify-content: center; align-items: center; display: flex; user-select: none; padding: 0.5rem 0;}
            footer p {color: var(--white)!important; font-family: var(--secondary); font-size: 22px;}
            #map_section {justify-content: center; display: flex; align-items: center; border-top: 2px solid var(--dark_green); flex-direction: row; height: 550px;}
            #map_section_mob {display: none;}
            .wrap_address {width: 100%; height: 50px; display: flex; justify-content: center; align-items: center; flex-direction: row;}
            #address p {font-size: 16px!important;}
            .text_address_wrap {flex-direction: row; text-align: center;}
            .text_address_wrap p {padding: 0.2rem 0;}
            .slider {height: 350px; width: 60%; background-color: white; position: relative; overflow: hidden; display: -webkit-box;
              display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap;
              flex-flow: row nowrap; -webkit-box-align: end; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end;
              -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; box-shadow: 0 0 5px grey;
              border-radius: 10px;border: 2px solid var(--green);}
            .slider__nav {width: 12px; height: 12px; margin: 1rem 12px; border-radius: 50%; z-index: 10; outline: 6px solid #ccc;
              outline-offset: -6px; box-shadow: 0 0 0 0 var(--green), 0 0 0 0 var(--dark_green); cursor: pointer; -webkit-appearance: none;
              -moz-appearance: none; appearance: none;-webkit-backface-visibility: hidden; backface-visibility: hidden;}
            .slider__nav:checked {-webkit-animation: check 0.4s linear forwards; animation: check 0.4s linear forwards;}
            .slider__nav:checked:nth-of-type(1) ~ .slider__inner {left: 0;}
            .slider__nav:checked:nth-of-type(2) ~ .slider__inner {left: -100%;}
            .slider__nav:checked:nth-of-type(3) ~ .slider__inner {left: -200%;}
            .slider__nav:checked:nth-of-type(4) ~ .slider__inner {left: -300%;}
            .slider__nav:checked:nth-of-type(5) ~ .slider__inner {left: -400%;}
            .slider__nav:checked:nth-of-type(6) ~ .slider__inner {left: -500%;}
            .slider__inner {
              position: absolute;
              top: 0;
              left: 0;
              width: 600%;
              height: 100%;
              -webkit-transition: left 0.5s;
              transition: left 0.5s;
              display: -webkit-box;
              display: -webkit-flex;
              display: -ms-flexbox;
              display: flex;
              -webkit-flex-flow: row nowrap;
              -ms-flex-flow: row nowrap;
              flex-flow: row nowrap;
            }
            .slider__contents {
              height: 100%;
              padding: 1rem;
              text-align: center;
              display: -webkit-box;
              display: -webkit-flex;
              display: -ms-flexbox;
              display: flex;
              -webkit-box-flex: 1;
              -webkit-flex: 1;
              -ms-flex: 1;
              flex: 1;
              -webkit-flex-flow: column nowrap;
              -ms-flex-flow: column nowrap;
              flex-flow: column nowrap;
              -webkit-box-align: center;
              -webkit-align-items: center;
              -ms-flex-align: center;
              align-items: center;
              -webkit-box-pack: center;
              -webkit-justify-content: center;
              -ms-flex-pack: center;
              justify-content: center;
            }
            .slider__contents img {filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.4));height: 33px;}
            .slider__image {font-size: 2.7rem; color: #2196F3;}
            .slider__caption {font-weight: 500; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);}
            .slider__txt {color: var(--black); margin-bottom: 2rem; max-width: 70%;}
            .review_container {display: flex; background-color: var(--grey); justify-content: center; align-items: center; height: 450px; width: 100%; font-family: var(--secondary);}
            @-webkit-keyframes check {50% {outline-color: #333;box-shadow: 0 0 0 12px #333, 0 0 0 36px rgba(51, 51, 51, 0.2);}
              100% {outline-color: #333;box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);}}

            @keyframes check {50% {outline-color: #333; box-shadow: 0 0 0 12px #333, 0 0 0 36px rgba(51, 51, 51, 0.2);}
              100% {outline-color: #333; box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);}                    
}

            .google_link p {font-family: var(--primary); font-size: 18px;}
}

@media  screen and (max-width: 699px) {
                body {padding: 0; margin: 0;}
                p {color: var(--dark_green);  font-size: 22px;}
                header {background-color: var(--logo_grey); font-family: var(--secondary); font-weight: 700; font-size: 20px; display: flex; justify-content: center; height: 132px;
                  width: 100%; box-sizing: border-box; border-bottom: 4px solid var(--logo_grey); flex-direction: column; }
                .header_case {width: 100%; height: auto; display: flex; justify-content: space-between; align-items: center; flex-direction: column;}
                .header_case_1 {width: auto; height: 100%; display: flex; justify-content: center; align-items: center; width: 100%;}
                .logo_case img {height: 80px;}
                .header_case_2 {justify-content: flex-end !important; align-items: center; display: flex; width: 100%; height: auto; border-top: 1px solid var(--white)}
                .phone_case {display: flex; height: 80%; justify-content: center; align-items: center; flex-direction: row;}
                .header_element {display: flex; height: 50%; align-items: center; padding: 0 10px;}
                .header_element img {height: 16px; padding-right: 8px;}
                .header_element p {font-size: 12px; color: white;}
                .section_title {padding: 0!important; margin: 0!important; height: 66px; display: flex; justify-content: center;}
                .section_title p {font-size: 22px; font-family: var(--primary) !important; text-transform: uppercase; font-weight: 700; color: var(--dark_green); text-align: center;}
                a {color: var(--white); text-decoration: none;}
                a:link {text-decoration: none;}
                a:visited {text-decoration: none;}
                a:hover {text-decoration: none; opacity: 0.7;}
                a:active {text-decoration: none;}
                .hero {background-image: url("assets/1.webp"); background-size: cover; height: 50vw; width: 100%; display: flex; justify-content: center;}
                .hero_text {position: absolute; font-family: var(--primary); filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); background-color: var(--dark_green);
                border-radius: 40px; height: 20px; display: flex; justify-content: center; align-items: center; padding: 8px; margin-top: 180px;}                
                .hero_text p {font-size: 3.2vw; color: var(--white);}
                #first_section {background-color: var(--grey); height: auto; padding: 0; display: flex; justify-content: center; flex-direction: column; width: 100%; }
                .about_us_wrap {width: 100%; height: auto;  display: flex; justify-content: center; flex-direction: column-reverse;}
                .about_us_image {width: 100%; height: 60vw; position: relative; overflow: hidden;}
                .about_us_image img {width: 100%}
                .before_image {position: absolute;}
                .after_image {position: absolute;}
                .before_image:hover {opacity: 0; transition: 0.3s;}
                #mobId1 {height: 30px; display: flex; align-items: center; justify-content: center;}
                .about_us_text {width: 100%; height: auto; display: flex; align-items: center; justify-content: center; flex-direction: column;}
                .about_us_text_box {width: 85%; height: auto;}
                .about_us_text_box p {font-family: var(--secondary); color: var(--dark_green); font-size: 12px; text-align: center;}
                #service_section {display: flex; flex-direction: column; justify-content: center; align-items: center; padding-top: 12px; padding-bottom: 0;}
                .title_wrap {width: 100%; height: auto; display: flex; align-items: center; justify-content: space-between; margin-bottom: 1vw;}
                .green_line {background-color: var(--dark_green); height: 2px; width: 20%;}
                .service_wrap {display: none; width: 80vw; height: auto; flex-wrap: wrap;}
                .service_wrap_mob {display: flex; width: 100%; height: auto; flex-direction: column;}
                .big_case_2 {display: flex; justify-content: space-between; width: 80vw; height: calc(80vw/6); margin-bottom: 1vw;}
                .medium_case {display: flex; width: 100%; height: 30vw; overflow: hidden; justify-content: space-between; position: relative;}
                .medium_case img {object-fit: cover; height: auto; width: 100%;}
                .medium_green {display: flex; position: absolute; background-color: var(--logo_grey); mix-blend-mode: multiply; opacity: 1; height: 60px; width: 100%; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transition: all 0.5s;}
                .medium_text {display: flex; position: absolute;}
                .medium_text p {font-size: 18px; font-family: var(--primary); font-weight: 700; color: white; text-align: center; padding: 0; user-select: none;}
                .medium_green:hover {height: 100%;}
                .small_case {display: flex; width: calc((40vw - 0.5vw)/2 - 0.5vw); height: 100%; overflow: hidden; z-index: 100; justify-content: center; align-items: center; position: relative;}
                .small_case_photo img {object-fit: cover; width: 100%;}
                #photo_item {justify-content: center;align-items: center;}
                #two_smaller {display: flex; flex-direction: column; width: 100%; height: auto;}
                .ant_case img {height: 66px; filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.4));}
                .ant_case:hover {opacity: 0.7; transition: 0.2s;}
                .button_case img {height: 44px;   filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4));}
                .button_wrap {display: flex; width: auto; flex-direction: column; height: auto;}
                .phone_text {border-radius: 10px; background-color: var(--dark_green); margin-bottom: 5px; height: 30px; width: 120px; display: flex; justify-content: center; align-items: center; }
                .phone_text p {color: var(--white)!important; font-size: 16px; font-family: var(--secondary); z-index: 19999;}
                .button_text p {font-size: 16px; font-family: var(--secondary); font-weight: 500; margin: 0px 5px;}
                #grey {box-sizing: border-box; background-color: var(--white);}
                .call_now {display: flex; opacity: 0.2; position: relative; overflow: hidden; width: 100%; height: 100%;}
                .call_now img {object-fit: cover; width: 100%;}
                .wrap_call {display: flex; position: absolute; flex-direction: column; justify-content: center; align-items: center;}
                .color_me {background-color: var(--grey);}
                footer {background-color: var(--black); height: 33px; justify-content: center; align-items: center; display: flex; user-select: none; padding: 0.5rem 0;}
                footer p {color: var(--white)!important; font-family: var(--secondary); font-size: 16px;}
                #map_section_mob {justify-content: center; display: flex; align-items: center; border-top: 2px solid var(--dark_green); flex-direction: column; height: 550px;}
                #map_section {display: none;}
                .small_section {width: 100%; height: 250px; display: flex; justify-content: center; align-items: center; flex-direction: column;}
                .wrap_address {width: 100%; height: 30px; display: flex; justify-content: center; align-items: center; flex-direction: row;}
                .small_button_case img {height: 22px;   filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.4));}
                .text_address_wrap {flex-direction: column; text-align: center;}
                .text_address_wrap p {padding: 0.1rem 0;}
                .slider {height: 300px; width: 70%; background-color: white; position: relative; overflow: hidden; display: -webkit-box;
                  display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap;
                  flex-flow: row nowrap; -webkit-box-align: end; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end;
                  -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; box-shadow: 0 0 5px grey;
                  border-radius: 10px;border: 2px solid var(--green);}
                  .slider p {font-size: 16px;}
                .slider__nav {width: 12px; height: 12px; margin: 1rem 12px; border-radius: 50%; z-index: 10; outline: 6px solid #ccc;
                  outline-offset: -6px; box-shadow: 0 0 0 0 var(--green), 0 0 0 0 var(--dark_green); cursor: pointer; -webkit-appearance: none;
                  -moz-appearance: none; appearance: none;-webkit-backface-visibility: hidden; backface-visibility: hidden;}
                .slider__nav:checked {-webkit-animation: check 0.4s linear forwards; animation: check 0.4s linear forwards;}
                .slider__nav:checked:nth-of-type(1) ~ .slider__inner {left: 0;}
                .slider__nav:checked:nth-of-type(2) ~ .slider__inner {left: -100%;}
                .slider__nav:checked:nth-of-type(3) ~ .slider__inner {left: -200%;}
                .slider__nav:checked:nth-of-type(4) ~ .slider__inner {left: -300%;}
                .slider__nav:checked:nth-of-type(5) ~ .slider__inner {left: -400%;}
                .slider__nav:checked:nth-of-type(6) ~ .slider__inner {left: -500%;}
                .slider__inner {
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: 600%;
                  height: 100%;
                  -webkit-transition: left 0.5s;
                  transition: left 0.5s;
                  display: -webkit-box;
                  display: -webkit-flex;
                  display: -ms-flexbox;
                  display: flex;
                  -webkit-flex-flow: row nowrap;
                  -ms-flex-flow: row nowrap;
                  flex-flow: row nowrap;
                }
                .slider__contents {
                  height: 100%;
                  padding: 1rem;
                  text-align: center;
                  display: -webkit-box;
                  display: -webkit-flex;
                  display: -ms-flexbox;
                  display: flex;
                  -webkit-box-flex: 1;
                  -webkit-flex: 1;
                  -ms-flex: 1;
                  flex: 1;
                  -webkit-flex-flow: column nowrap;
                  -ms-flex-flow: column nowrap;
                  flex-flow: column nowrap;
                  -webkit-box-align: center;
                  -webkit-align-items: center;
                  -ms-flex-align: center;
                  align-items: center;
                  -webkit-box-pack: center;
                  -webkit-justify-content: center;
                  -ms-flex-pack: center;
                  justify-content: center;
                }
                .slider__contents img {filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.4));height: 22px;}
                .slider__caption {font-weight: 500; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);}
                .slider__txt {color: var(--black); margin-bottom: 2rem; max-width: 85%;}
                .small_text {font-size: 14px!important;}
                .review_container {display: flex; background-color: var(--grey); justify-content: center; align-items: center; height: 350px; width: 100%; font-family: var(--secondary);}
                @-webkit-keyframes check {50% {outline-color: #333;box-shadow: 0 0 0 12px #333, 0 0 0 36px rgba(51, 51, 51, 0.2);}
                  100% {outline-color: #333;box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);}}

                @keyframes check {50% {outline-color: #333; box-shadow: 0 0 0 12px #333, 0 0 0 36px rgba(51, 51, 51, 0.2);}
                  100% {outline-color: #333; box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);}      
    }
                .google_link p {font-family: var(--primary); font-size: 14px; color: var(--dark_green);}
}

