url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

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

.html {
  font-size: 62.5%;
}

body {
  font-family: "Poppins", sans-serif;
}

/* ///////////..utility classes../////////// */
/*.box {
  width: 80%;
  margin: 0 auto;
  background: rgba(255,255,255,0.2);
  padding: 35px;
  border: 2px solid #fff;
  border-radius: 20px/50px;
  background-clip: padding-box;
  text-align: center;
}
*/
.button {
  font-size: 1em;
  padding: 10px;
  color: #fff;
  border: 2px solid #06D85F;
  border-radius: 20px/50px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.button:hover {
  background: #06D85F;
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #06D85F;
   
  /*background: rgba(0, 0, 0, 0.7);*/
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  position: relative;
  top: 0%;
  left: 0%;
  background: #fff;
  border-radius: 5px;
  width: auto;
  height: 129%;
  transition: all 5s ease-in-out;
}


.popup .close {
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: #06D85F;
}
.popup .content {
  top: 15%;
  max-height: 80%;
  overflow: auto;
}

.anim-container {display: none}

.callback {position:fixed;
    top: 25%;
    left:  85%;
    width: 15%;
    height: 15%;
    display: flex;
    animation: durdom 7s linear infinite} 
        
    @keyframes durdom {
0% {top: 25%;
    left: 85%;}  
25% {top: 20%;
    left: 80%;}
50% {top: 25%;
        left: 75%;}
75% {top: 30%;
    left: 80%;}
100% {top: 25%;
        left: 85%;}
    }

.container {
  max-width: 1200px;
  width: 90%;
  margin: auto;
}
/*.elegantshadow {
    color: #131313;
    background-color: #e7e5e4;
    letter-spacing: .15em;
    
  }
*/
.btn {
  display: inline-block;
  padding: 0.5em 1.5em;
  text-decoration: none;
  border-radius: 50px;
  cursor: pointer;
  outline: none;
  margin-top: 1em;
  text-transform: uppercase;
  font-weight: small;
}

.btn-primary {
  color: #fff;
  background: #16a083;
}

.btn-primary:hover {
  background: #117964;
  transition: background 0.3s ease-in-out;
}

/* ............/navbar/............ *

/* desktop mode............/// */

.navbar input[type="checkbox"],
.navbar .hamburger-lines {
  display: none;
}

.navbar {
  box-shadow: 0px 5px 10px 0px #aaa;
  position: fixed;
  width: 100%;
  background: #fff;
  color: #000;
  opacity: 0.85;
  height: 50px;
  z-index: 12;
}

.navbar-container {
  display: flex;
  justify-content: space-between;
  height: 64px;
  align-items: center;
}

.menu-items {
  order: 2;
  display: flex;
}

.menu-items li {
  list-style: none;
  margin-left: 1.5rem;
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}

.menu-items a {
  text-decoration: none;
  color: #444;
  font-weight: 500;
  transition: color 0.3s ease-in-out;
}

.menu-items a:hover {
  color: #117964;
  transition: color 0.3s ease-in-out;
}

.logo {
  order: 1;
  font-size: 2.3rem;
  margin-bottom: 0.5rem;
}

/* ............//// Showcase styling ////......... */

.showcase-area {
  height: 50vh;
  background: linear-gradient(
      rgba(240, 240, 240, 0.144),
      rgba(255, 255, 255, 0.336)
    ),
    url(Dentist-background.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.showcase-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 1.6rem;
  transform: translateX(150%);
  animation: about-img-animation 1s ease-in-out forwards;
}

.main-title {
  text-transform: uppercase;
  margin-top: 2em;
  text-shadow: 
      1px -1px 0 #767676, 
      -1px 2px 1px #737272, 
      -2px 4px 1px #767474, 
      -3px 6px 1px #787777, 
      -4px 8px 1px #7b7a7a; 
      /*-5px 10px 1px #7f7d7d, 
      -6px 12px 1px #828181, 
      -7px 14px 1px #868585; 
      -8px 16px 1px #8b8a89, 
      -9px 18px 1px #8f8e8d, 
      -10px 20px 1px #949392, 
      -11px 22px 1px #999897, 
      -12px 24px 1px #9e9c9c, 
      -13px 26px 1px #a3a1a1; 
      -14px 28px 1px #a8a6a6, 
      -15px 30px 1px #adabab, 
      -16px 32px 1px #b2b1b0, 
      -17px 34px 1px #b7b6b5, 
      -18px 36px 1px #bcbbba, 
      -19px 38px 1px #c1bfbf, 
      -20px 40px 1px #c6c4c4, 
      -21px 42px 1px #cbc9c8, 
      -22px 44px 1px #cfcdcd, 
      -23px 46px 1px #d4d2d1, 
      -24px 48px 1px #d8d6d5, 
      -25px 50px 1px #dbdad9, 
      -26px 52px 1px #dfdddc, 
      -27px 54px 1px #e2e0df, 
      -28px 56px 1px #e4e3e2;  */
}

/* ......//about us//...... */

#about {
  padding: 50px 0;
  background: #f5f5f7;
}

.about-wrapper {
  display: flex;
  flex-wrap: wrap;
}

#about h2 {
  font-size: 2.3rem;
}

#about p {
  font-size: 1.4rem;
  color: #555;
}

#about .small {
  font-size: 1.6rem;
  color: #666;
  font-weight: 600;
}

.about-img {

  flex: 1 1 400px;
  padding: 30px;
  transform: translateX(150%);
  animation: about-img-animation 1s ease-in-out forwards;
}

@keyframes about-img-animation {
  100% {
    transform: translate(0);
  }
}

.about-text {
  flex: 1 1 400px;
  padding: 30px;
  margin: auto;
	text-align: justify;
  transform: translate(-150%);
  animation: about-text-animation 1s ease-in-out forwards;
}

@keyframes about-text-animation {
  100% {
    transform: translate(0);
  }
}

.about-img img {
  display: block;
  height: 400px;
  max-width: 100%;
  margin: auto;
  object-fit: contain;
  object-position: right;
  
}
.slider {
   height: 400px;
   max-width: 100%;
   overflow: hidden;
   /*border: 10px solid #000;*/
}

.middle {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

.navigation {
   position: absolute;
   bottom: 50px;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
}

.bar {
   width: 30px;
   height: 8px;
   margin: 6px;
   cursor: pointer;
   background-color: #000;
   opacity: .5;
   border-radius: 10px;
   transition: all 0.4s ease;
}

.bar:hover {
   opacity: 1;
   transform:scale(1.1);
}

input[name="r"] {
   position: absolute;
   visibility: hidden;
}

.slides {
   width: 400%;
   height: 100%;
   display: flex;
}

.slide {
   width: 25%;
   transition: all 0.6s ease;
}

.img {
   width: 100%;
   height: 100%;
}

#r1:checked ~ .s1 {
   margin-left: 0;
}

#r2:checked ~ .s1 {
   margin-left: -25%;
}

#r3:checked ~ .s1 {
   margin-left: -50%;
}

#r4:checked ~ .s1 {
   margin-left: -75%;
}


/* ..........////Staff category///........... */

#staff {
  padding: 5rem 0 10rem 0;
}

#staff h2 {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 400;
  margin-bottom: 40px;
  text-transform: uppercase;
  color: #555;
}

.staff-container {
  display:flex;
  justify-content: center;
}

.staff-container img {
  display: block;
  width: 100%;
  margin: auto;
  max-height: 300px;
  object-fit: cover;
  object-position: center;
}

.img-container {
  margin: 0 1rem;
  position: relative;
}

.img-content {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  z-index: 2;
  text-align: center;
  transition: all 0.3s ease-in-out 0.1s;
}

.img-content h3 {
  color: #fff;
  font-size: 2.2rem;
}

.img-content a {
  font-size: 1.2rem;
}

.img-container::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #315a42;
  opacity: 0;
  z-index: 1;

  transform: scaleY(0);
  transform-origin: 100% 100%;
  transition: all 0.3s ease-in-out;
}

.img-container:hover::after {
  opacity: 1;
  transform: scaleY(1);
}

.img-container:hover .img-content {
  opacity: 1;
  top: 40%;
}

/* .........../Services/............ */

.services-menu-heading {
  text-align: center;
  font-size: 3.4rem;
  font-weight: 400;
  color: #666;
}

.services-menu-container {
  display: flex;
  flex-wrap: wrap;
  padding: 50px 50px 30px 0px;
}

.services-menu-container img {
  display: block;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}

.services-menu-item {
  display: flex;
  flex: 1 1 600px;
  margin: 0 10px;
  /*justify-content: space-evenly;*/
  margin-bottom: 3rem;
}

.services-description {
  margin: auto 1.5rem;
}

.font-title {
  font-size: 1.8rem;
  font-weight: 400;
  color: #444;
}

.services-description p {
  margin-right: 10px;
  text-align: justify;
  font-size: 1.4rem;
  color: #555;
  font-weight: 500;
}

/*.services-description .services-price {
  color: #117964;
  font-weight: 700;
}*/
/*........../Prices/..................*/
.prices-menu-heading {
  text-align: center;
  font-size: 3.4rem;
  font-weight: 400;
  color: #666;
}
.prices-description {
  display: flex;
  flex-wrap: wrap;
  padding: 50px 50px 30px 0px;
  margin: auto 1.5rem;
  flex: 1 1 600px;
  margin-bottom: 3rem;	
}

.prices-title {
  position: relative;
  left: 25%;
  font-size: 1.5rem;
  font-weight: 600;
  color: #020202;
}

.prices-description p {
  margin-right: 10px;
  text-align: justify;
  font-size: 1.4rem;
  color: #555;
  font-weight: 500;
}

/* ........./ Testimonial /.......... */

#testimonials {
display: none;
  padding: 5rem 0;
  background: rgba(243, 243, 243);
}

.testimonial-title {
	display: none;
  text-align: center;
  font-size: 2.8rem;
  font-weight: 400;
  color: #555;
}

.testimonial-container {
display:none;
  display: flex;
  justify-content: space-between;
  font-size: 1.4rem;
  padding: 1rem;
}

.testimonial-box .checked {
  color: #ff9529;
}

.testimonial-box .testimonial-text {
  margin: 1rem 0;
  color: #444;
}

.testimonial-box {
  text-align: center;
  padding: 1rem;
}

.customer-photo img {
  display: block;
  width: 150px;
  height: 150px;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  margin: auto;
}

/* ........ Contact Us........... */

#contact {
  padding: 5rem 0;
  background: rgb(226, 226, 226);
}

.contact-container {
  display: flex;
  background-image: url(Dentist-background.jpg);
  background-size: cover;
  /*background-position: center;*/
  background-repeat: no-repeat
}

.contact-img {
text-align: center;
font-size: 1.8em;
  width: 50%;
}

/*.contact-img img {
  display: block;
  height: 400px;
  width: 100%;
  object-position: center;
  object-fit: cover;
}*/

.form-container {
  padding: 1rem;
  width: 50%;
  margin: auto;
  font-size: 1.8em;
  font-weight: 400;
}

.form-container input {
  display: block;
  width: 100%;
  border: none;
  border-bottom: 2px solid #ddd;
  padding: 1rem 0;
  box-shadow: none;
  outline: none;
  margin-bottom: 1rem;
  color: #444;
  font-weight: 500;
}

.form-container textarea {
  display: block;
  width: 100%;
  border: none;
  border-bottom: 2px solid #ddd;
  color: #444;
  outline: none;
  padding: 1rem 0;
  resize: none;
}

.form-container h2 {
  font-size: 2.7rem;
  font-weight: 500;
  color: #444;
  margin-bottom: 1rem;
  margin-top: -1.2rem;
}

.form-container a {
  font-size: 1.3rem;
}

#footer h2 {
  text-align: center;
  font-size: 1.8rem;
  padding: 2.6rem;
  font-weight: 500;
  color: #fff;
  background: rgb(65, 65, 65);
}

/* ......../ media query /.......... */

@media (max-width: 768px) {
  .navbar {
    opacity: 0.95;
  }

  .navbar-container input[type="checkbox"],
  .navbar-container .hamburger-lines {
    display: block;
  }

  .navbar-container {
    display: block;
    position: relative;
    height: 64px;
  }

  .navbar-container input[type="checkbox"] {
    position: absolute;
    display: block;
    height: 32px;
    width: 30px;
    top: 20px;
    left: 20px;
    z-index: 5;
    opacity: 0;
  }

  .navbar-container .hamburger-lines {
    display: block;
    height: 23px;
    width: 35px;
    position: absolute;
    top: 17px;
    left: 20px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .navbar-container .hamburger-lines .line {
    display: block;
    height: 4px;
    width: 100%;
    border-radius: 10px;
    background: #333;
  }

  .navbar-container .hamburger-lines .line1 {
    transform-origin: 0% 0%;
    transition: transform 0.4s ease-in-out;
  }

  .navbar-container .hamburger-lines .line2 {
    transition: transform 0.2s ease-in-out;
  }

  .navbar-container .hamburger-lines .line3 {
    transform-origin: 0% 100%;
    transition: transform 0.4s ease-in-out;
  }

  .navbar .menu-items {
    padding-top: 100px;
    background: #fff;
    height: 100vh;
    max-width: 300px;
    transform: translate(-150%);
    display: flex;
    flex-direction: column;
    margin-left: -40px;
    padding-left: 50px;
    transition: transform 0.5s ease-in-out;
    box-shadow: 5px 0px 10px 0px #aaa;
  }

  .navbar .menu-items li {
    margin-bottom: 1.5rem;
    font-size: 1.3rem;
    font-weight: 500;
  }

  .logo {
    position: absolute;
    top: 5px;
    right: 15px;
    font-size: 2rem;
  }

  .navbar-container input[type="checkbox"]:checked ~ .menu-items {
    transform: translateX(0);
  }

  .navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
    transform: rotate(35deg);
  }

  .navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
    transform: scaleY(0);
  }

  .navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
    transform: rotate(-35deg);
  }
/*.animate-ul1{position: fixed; margin-top: 100px;left: 50%;display: flex;transform: translate(-50%,-50%);}*/
    /*.anim-container {
    margin-left:  left: 30px;
    }*/
.anim-container {display: block}
.animate-ul1 li{list-style:none;letter-spacing:7px;font-size:25px;font-family:fantasy;color:#1d5f25;animation:ani 1.2s linear infinite}
.animate-ul1 li:nth-child(1){color:#1d5f25; animation-delay:.6s;animation:ani 2s linear infinite}
.animate-ul1 li:nth-child(2){color:#1d5f25; animation-delay:.6s;animation:ani 2s linear infinite}
.animate-ul1 li:nth-child(3){color:#1d5f25; animation-delay:.6s;animation:ani 2s linear infinite}
.animate-ul1 li:nth-child(4){color:#1d5f25; animation-delay:.6s;animation:ani 2s linear infinite}
.animate-ul1 li:nth-child(5){color:#1d5f25; animation-delay:.6s;animation:ani 2s linear infinite}
.animate-ul1 li:nth-child(6){color:#1d5f25; animation-delay:.6s;animation:ani 2s linear infinite}
.animate-ul1 li:nth-child(7){color:#1d5f25; animation-delay:.6s;animation:ani 2s linear infinite}
.animate-ul1 li:nth-child(8){color:#1d5f25; animation-delay:.6s;animation:ani 2s linear infinite}
.animate-ul1 li:nth-child(9){color:#1d5f25; animation-delay:.6s;animation:ani 2s linear infinite}
.animate1-ul{position: fixed; top: 1%;margin-left: 14%;  display: flex;transform: translate(-50%,-50%);
animation:mover 40s linear infinite;}

.animate1-ul li{list-style:none;
        letter-spacing:13px;font-size:30px;font-family:serif;color:#484848;animation:ani 1.2s linear infinite;}
.animate1-ul li:nth-child(1){animation-delay:.2s}
.animate1-ul li:nth-child(2){animation-delay:.6s}
.animate1-ul li:nth-child(3){animation-delay:.8s}
.animate1-ul li:nth-child(4){animation-delay:1s}
.animate1-ul li:nth-child(5){animation-delay:1.2s}
.animate1-ul li:nth-child(6){animation-delay:1.6s}
.animate-ul li:nth-child(7){animation-delay:1.8s}
.animate1-ul li:nth-child(8){animation-delay:2s}
.animate1-ul li:nth-child(9){animation-delay:2.2s}
.animate1-ul li:nth-child(10){animation-delay:2.4s}
.animate1-ul li:nth-child(11){animation-delay:2.6s}
.animate1-ul li:nth-child(12){animation-delay:2.8s}
.animate1-ul li:nth-child(13){animation-delay:3s; opacity:0}
.animate1-ul li:nth-child(14){animation-delay:3.2s}
.animate1-ul li:nth-child(15){animation-delay:3.4s}
.animate1-ul li:nth-child(16){animation-delay:3.6s}
.animate1-ul li:nth-child(17){animation-delay:3.8s;opacity:0}
.animate1-ul li:nth-child(18){animation-delay:4s}
.animate1-ul li:nth-child(19)
{animation-delay:4.2s}
.animate1-ul li:nth-child(20){animation-delay:4.4s}
.animate1-ul li:nth-child(21){animation-delay:4.6s;opacity:0}
.animate1-ul li:nth-child(22){animation-delay:4.8s;opacity:0}
.animate1-ul li:nth-child(23){animation-delay:5s;opacity:0}
.animate1-ul li:nth-child(24){animation-delay:5.2s;opacity:0}
.animate1-ul li:nth-child(25){animation-delay:5.4s; opacity: 0}
.animate1-ul li:nth-child(26){animation-delay:5.6s; opacity:0}
.animate1-ul li:nth-child(27){animation-delay:5.8s}
.animate1-ul li:nth-child(28){animation-delay:6s}
.animate1-ul li:nth-child(29){animation-delay:6.2s}
.animate1-ul li:nth-child(30){animation-delay:6.4s}
.animate1-ul li:nth-child(31){animation-delay:6.6s}
.animate1-ul li:nth-child(32){animation-delay:6.8s }
.animate1-ul li:nth-child(33){animation-delay:7s; opacity:0}
.animate1-ul li:nth-child(34){animation-delay:7.2s}
.animate1-ul li:nth-child(35){animation-delay:7.4s}
.animate1-ul li:nth-child(36){animation-delay:7.6s}
.animate1-ul li:nth-child(37){animation-delay:7.8s; opacity:0}
.animate1-ul li:nth-child(38){animation-delay:8s}
.animate1-ul li:nth-child(39){animation-delay:8.2s}
.animate1-ul li:nth-child(40){animation-delay:8.4s}
.animate1-ul li:nth-child(41)
{animation-delay:8.6s; opacity:0}
.animate1-ul li:nth-child(42){animation-delay:8.8s}
.animate1-ul li:nth-child(43)
{animation-delay:9s}
.animate1-ul li:nth-child(44){animation-delay:9.2s}
.animate1-ul li:nth-child(45){animation-delay:9.4s; opacity:0}
.animate1-ul li:nth-child(46){animation-delay:9.6s; opacity:0}
.animate1-ul li:nth-child(47){animation-delay:9.8s}
.animate1-ul li:nth-child(48){animation-delay:10s}
.animate1-ul li:nth-child(49){animation-delay:10.2s}
.animate1-ul li:nth-child(50){animation-delay:10.4s; }
.animate1-ul li:nth-child(51){animation-delay:10.6s}
.animate1-ul li:nth-child(52){animation-delay:10.8s}
.animate1-ul li:nth-child(53){animation-delay:11s; opacity:0}
.animate1-ul li:nth-child(54){animation-delay:11.2s}
.animate1-ul li:nth-child(55){animation-delay:11.4s}
.animate1-ul li:nth-child(56){animation-delay:11.6s}
.animate1-ul li:nth-child(57){animation-delay:11.8s}
.animate1-ul li:nth-child(58){animation-delay:12s}
.animate1-ul li:nth-child(59){animation-delay:12.2s;}
.animate1-ul li:nth-child(60){animation-delay:12.4s}
.animate1-ul li:nth-child(61)
{animation-delay:12.6s}
.animate1-ul li:nth-child(62){animation-delay:12.8s }
.animate1-ul li:nth-child(63)
{animation-delay:13s; opacity:0}
.animate1-ul li:nth-child(64){animation-delay:13.2s; }
.animate1-ul li:nth-child(65)
{animation-delay:13.4s}
.animate1-ul li:nth-child(66){animation-delay:13.6s}
.animate1-ul li:nth-child(67){animation-delay:13.8s; opacity:0}
.animate1-ul li:nth-child(68){animation-delay:14s}
.animate1-ul li:nth-child(69){animation-delay:14.2s}
.animate1-ul li:nth-child(70){animation-delay:14.4s}
.animate1-ul li:nth-child(71){animation-delay:14.6s;opacity: 0}
.animate1-ul li:nth-child(72){animation-delay:14.8s}
.animate1-ul li:nth-child(73){animation-delay:15s}
.animate1-ul li:nth-child(74){animation-delay:15.2s}
.animate1-ul li:nth-child(75){animation-delay:15.4s; opacity:0}
.animate1-ul li:nth-child(76){animation-delay:15.6s; opacity:0}
.animate1-ul li:nth-child(77){animation-delay:15.8s}
.animate1-ul li:nth-child(78){animation-delay:16s}
.animate1-ul li:nth-child(79){animation-delay:16.2s}
.animate1-ul li:nth-child(80){animation-delay:16.4s}
.animate1-ul li:nth-child(81){animation-delay:16.6s}
.animate1-ul li:nth-child(82){animation-delay:16.8s}
.animate1-ul li:nth-child(83){animation-delay:17s}
.animate1-ul li:nth-child(84)
{animation-delay:17.2s}
.animate1-ul li:nth-child(85){animation-delay:17.4s;opacity: 0}
.animate1-ul li:nth-child(86){animation-delay:17.6s}
.animate1-ul li:nth-child(87){animation-delay:17.8s}
.animate1-ul li:nth-child(88){animation-delay:18s}
.animate1-ul li:nth-child(89){animation-delay:18.2s}
.animate1-ul li:nth-child(90){animation-delay:18.4s}
.animate1-ul li:nth-child(91){animation-delay:18.6s}
.animate1-ul li:nth-child(92){animation-delay:18.8s;}
.animate1-ul li:nth-child(93){animation-delay:19s;opacity:0 }
.animate1-ul li:nth-child(94){animation-delay:19.2s}
.animate1-ul li:nth-child(95){animation-delay:19.4s;}
.animate1-ul li:nth-child(96){animation-delay:19.6s}
.animate1-ul li:nth-child(97){animation-delay:19.8s}
.animate1-ul li:nth-child(98){animation-delay:20s}
.animate1-ul li:nth-child(99){animation-delay:20.2s}
.animate1-ul li:nth-child(100){animation-delay:20.4s}
.animate1-ul li:nth-child(101){animation-delay:20.6s; opacity:0}
.animate1-ul li:nth-child(102){animation-delay:20.8s}
.animate1-ul li:nth-child(103)
{animation-delay:21s}
.animate1-ul li:nth-child(104){animation-delay:21.2s}
.animate1-ul li:nth-child(105)
{animation-delay:21.4s}
.animate1-ul li:nth-child(106){animation-delay:21.6s;}
.animate1-ul li:nth-child(107){animation-delay:21.8s;}
.animate1-ul li:nth-child(108){animation-delay:22s}
.animate1-ul li:nth-child(109){animation-delay:22.2s; opacity:0}
.animate1-ul li:nth-child(110){animation-delay:22.4s}
.animate1-ul li:nth-child(111){animation-delay:22.6s}
.animate1-ul li:nth-child(112){animation-delay:22.8s}
.animate1-ul li:nth-child(113){animation-delay:23s; opacity:0}
.animate1-ul li:nth-child(114){animation-delay:23.2s}
.animate1-ul li:nth-child(115){animation-delay:23.4s}
.animate1-ul li:nth-child(116){animation-delay:23.6s}
.animate1-ul li:nth-child(117){animation-delay:23.8s}
.animate1-ul li:nth-child(118){animation-delay:24s}
.animate1-ul li:nth-child(119){animation-delay:24.2s}
.animate1-ul li:nth-child(120){animation-delay:24.4s}
.animate1-ul li:nth-child(121){animation-delay:51.2s;}
.animate1-ul li:nth-child(122){animation-delay:51.6s}
.animate1-ul li:nth-child(123)
{animation-delay:52s}
.animate1-ul li:nth-child(124){animation-delay:52.4s}
.animate1-ul li:nth-child(125)
{animation-delay:52.8s}
.animate1-ul li:nth-child(126){animation-delay:53.2s}
.animate1-ul li:nth-child(127)
{animation-delay:53.6s}
.animate1-ul li:nth-child(128){animation-delay:54s}
.animate1-ul li:nth-child(129){animation-delay:54.2s}
.animate1-ul li:nth-child(130){animation-delay:54.6s}
.animate1-ul li:nth-child(131){animation-delay:56s;opacity: 0}
.animate1-ul li:nth-child(132)
{animation-delay:56.4s; opacity:0}
.animate1-ul li:nth-child(133){animation-delay:56.8s; opacity: 0}
.animate1-ul li:nth-child(134)
{animation-delay:57.2s}
.animate1-ul li:nth-child(135)
{animation-delay:57.6s}
.animate1-ul li:nth-child(136)
{animation-delay:58s}
.animate1-ul li:nth-child(137)
{animation-delay:58.4s}
.animate1-ul li:nth-child(138)
{animation-delay:58.8s }
.animate1-ul li:nth-child(139)
{animation-delay:59.2s}

@keyframes ani {
0%{color:#1d5f25;text-shadow:none}
90%{color:#0d982d;text-shadow:none}
100%{color:#00fd1d;text-shadow:0 0 7px #fff900,0 0 70px #fff123}
}
@keyframes mover {
0%{left:2000px;}
25%{left:1000px;}    
50%{left:00px;}
75%{left:-1000px;}
100%{left:-2000px;}
}
  /* ......./ Staff /......... */

  .staff-container {
    flex-direction: column;
    align-items: stretch;
  }
.staff-container img {
 
  width: 50%;
  max-height: 50%;
 }
  .staff-type:not(:last-child) {
    margin-bottom: 3rem;
  }

  .staff-type {
    box-shadow: 5px 5px 10px 0 #aaa;
  }

  .img-container {
    margin: 0;
  }
 
/* ......./ Services /......... */

.services-menu-container {
     flex-direction: column;
    align-items: stretch;
    
    
}


}

@media (max-width: 500px) {
  html {
    font-size: 100%;
  }
    .navbar {
        height: 12%;
    }
  .navbar .menu-items li{
      font-size: 1.6rem;
  }

  .testimonial-container {
	  display: none;
    flex-direction: column;
    text-align: center;
  }

  .staff-menu-container img {
    margin: auto ;
  }

  .staff-menu-item {
    flex-direction: column;
    text-align: center;
  }
.staff-container img {
 
  width: 50%;
  max-height: 50%;
 }
.services-menu-container img {
    margin: auto;
    
}
.services-menu-item  {
    margin-right: 5px;
    flex-direction: column;
    text-align: center;  
    }  
.services-description p {
  /*margin-right: 5px;*/
  text-align: justify;
  
} 
  .form-container {
    width: 90%;
  }

  .contact-container {
    display: flex;
    flex-direction: column;
  }

  .contact-img {
    width: 90%;
    margin: 3rem auto;
  }

  .logo {
    position: absolute;
    top: 06px;
    right: 15px;
    font-size: 3rem;
  }

  .navbar .menu-items li {
    margin-bottom: 2.5rem;
    font-size: 1.8rem;
    font-weight: 500;
  }

  
}

@media (min-width: 769px) and (max-width: 1200px) {
  .img-container h3 {
    font-size: 1.5rem;
  }

  .img-container .btn {
    font-size: 0.7rem;
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  .showcase-area {
    height: 50vmax;
  }
}