:root {
  --backgroudColor: #232B2B;
  --fontColor: #ffffff;
  --seconderyfontColor: #bbbbbb;
  /* --primaryColor: #DC3D24; */
  /* --primaryColor: #55BEC0; */
  --primaryColor: #214307;
  --navbarColor: #262626;
  --normalFont:'Roboto Mono', monospace;
  --titleFont:'Roboto Slab', serif;
}
body {
  font-family: var(--titleFont);
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: var(--backgroudColor);
  color: var(--fontColor);
  letter-spacing: 1.5px;
  position: relative;
  height: 100%;
}
/*+++++ Utlity +++++++ */
.primaryBtn{
  padding: 1rem 1.5rem;
  background-color: var(--primaryColor);
  border-radius: 25px;
  color: var(--fontColor);
  border: none;
}
.primaryBtn:hover {
  cursor: pointer;
  background-color: #9a9a9a;

}
/*+++++++ Utlity End ++++++ */
.container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}
/*++++++ Navigataion Bar++++++ */
.navbar{
  background-color: var(--navbarColor);
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  position: sticky;
}
.navbar .logoHolder img{
  width: 200px;
}
.navbar .navLinks{
  align-items: center;
  justify-content: center;
  display: flex;  
  
}
.navbar .navLinks ul {
  display: flex;
  
}
.navbar .navLinks ul li{
  margin-left: 2rem;
  list-style: none;;
  position: relative;
}
.navbar .navLinks ul li .current{
  color: var(--fontColor);

}
.navbar .navLinks ul li .current::before{
  content: '';
  height: 3px;
  width: 100%;
  position: absolute;
  background-color: var(--primaryColor);
  bottom: -7px;

}
.navbar .navLinks ul li a{
  color: var(--seconderyfontColor);
  text-decoration: none;
  font-size: 1rem;
  letter-spacing: 1.5px;
}
.navbar .navLinks ul li a:hover{
  color: var(--fontColor);
}
/*++++++++ Navigataion Bar End +++++++*/


/* +++++++Main Section+++++++ */
.mainSection .mainContent{
  display: flex;
  justify-content: space-between;
}
.mainSection .mainContent .mainImgHolder{
  max-width: 550px;
  display: flex;
  align-items: center;
  margin-right: 1.5rem;
  
  
}
.mainSection .mainContent .mainImgHolder img{
  max-width: 400px;
  width: 100%;
  height: auto;
  margin-top:2rem;
}
.mainSection .mainContent .mainContentHolder{
  max-width: 700px;
  margin-top: 8rem;
  width: 100%;
  height: auto;
}
.mainSection .mainContent .mainContentHolder h1{
  color: var(--fontColor);
  font-size: 3rem;
  
}
.mainSection .mainContent .mainContentHolder p{
  text-align: justify;
  margin-top: 2rem;
  color: var(--seconderyfontColor);
}
.mainSection .mainContent .mainContentHolder .mainButtonHolder .primaryBtn{
  margin-top: 2rem;
}
/* +++++++Main Section End+++++++ */


/* +++++++Second Section+++++++ */
.secondSec .secondContent{
  display: flex;
  justify-content: space-between;
  margin-top: 4rem;
}
.secondSec .secondContent .secondContentHolder{
  max-width: 450px;
  width: 100%;
  height: auto;
}
.secondSec .secondContent .secondContentHolder h1{
  color: var(--fontColor);
  font-size: 2rem;
}
.secondSec .secondContent .secondContentHolder p{
    text-align: justify;
    color: var(--seconderyfontColor);
}
.secondSec .secondContent .secondImgHolder{
  max-width: 600px;
  display: flex;
  align-items: center;

}
.secondSec .secondContent .secondImgHolder img{
  max-width: 575px;
  width: 100%;
  height: auto;
  border: var(--primaryColor) 4px solid;
  border-radius: 25px; 
}
/* +++++++Second Section End+++++++ */




/* +++++++Third Section +++++++ */
.thirdsection{
  background-color: var(--primaryColor);
  margin-top: 3rem;
  text-align: center;
  padding: 0.5rem 0;
}
.thirdsection .thirdContent .thirdCardbox{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.thirdsection .thirdContent .thirdCardbox .card{
  border: 3px solid var(--backgroudColor);
  padding: 1rem 1rem;
  border-radius: 15px;
  max-width: 300px;
}
.thirdsection .thirdContent .thirdCardbox .card img{
  max-width: 200px;
  width: 100%;
  height: auto;
}
/* +++++++Third Section End+++++++ */



/* +++++++Fourth Section +++++++ */
.fourthSec .fourthContent {
  display: grid;
  align-items: center;
  grid-template-columns: repeat(2, 1fr);
}
.fourthSec .fourthContent p{
  text-align: justify;
  color: var(--seconderyfontColor);
  max-width: 450px;
}
.fourthSec .fourthContent img{
  max-width: 550px;
  width: 100%;
  height: auto;
  border: var(--primaryColor) 4px solid;
  border-radius: 25px;
}
/* +++++++Fourth Section End+++++++ */
/* +++++++Fifth Section+++++++ */
.fifthSec{
  margin-top: 4rem;
}
.fifthSec .fifthCardBox{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.fifthSec .fifthCardBox .card{
  background-color: var(--primaryColor);
  padding: 1rem 1rem;
  border-radius: 15px;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: justify;
  margin: 0.5rem;
}
.fifthSec .fifthCardBox .card img{
    max-width: 200px;
    width: 100%;
    height: auto;
}
/* +++++++Fifhth Section End+++++++ */


/* +++++++sixth Section+++++++ */
.sixthSec .sixthContent{
  display: flex;
  justify-content: space-between;
  margin-top: 4rem;
}
.sixthSec .sixthContent .sixImgHolder{
  max-width: 600px;
  display: flex;
  align-items: center;
  margin: 1.5rem;
}
.sixthSec .sixthContent .sixImgHolder img{
  max-width: 550px;
  width: 100%;
  height: auto;
  border: var(--primaryColor) 4px solid;
  border-radius: 25px;
}
.sixthSec .sixthContent .sixthContentHolder{
  max-width: 550px;
  width: 100%;
  height: auto;
}
.sixthSec .sixthContent .sixthContentHolder h1{
  color: var(--fontColor);
  font-size: 2rem;
}
.sixthSec .sixthContent .sixthContentHolder p{
  text-align: justify;
  color: var(--seconderyfontColor);
  max-width: 500px;
}
/* +++++++sixth Section End+++++++ */


/* +++++++seventh Section +++++++ */
.seventhSec .seventhContent{
  margin-top: 4rem;
}
.seventhSec .seventhContent img{
  max-width: 1200px;
  width: 100%;
  height: auto;
  border: var(--primaryColor) 4px solid;
  border-radius: 25px;
}
/* +++++++seventh Section End+++++++ */


/* +++++++Footer+++++++ */
footer{
  background-color: var(--navbarColor);
  margin-top: 4rem;
}
footer .footerCardBox{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
footer .footerCardBox .card{
  max-width: 350px;
  margin: 0 0.8rem;

}
footer  .footerlogo{
  max-width: 250px;
  width: 100%;
  height: auto;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
footer .footerCardBox .card ul li{
  margin-bottom: 0.5rem;
  list-style: none;
}
footer .footerCardBox .card ul li a{
  text-decoration: none;
  color: var(--fontColor);
  
}
footer .footerCardBox .card .socialMidea{
  margin-top: 4rem;
}
footer .footerCardBox .card .footerAbout{
  text-align: justify;
}
/* +++++++Footer End+++++++ */


/* +++++++About Main+++++++ */

.mainaboutSec .mainAboutContent .mainAboutImgHolder{
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: 2rem;
}
.mainaboutSec .mainAboutContent .mainAboutImgHolder .img1{
  max-width: 400px;
  width: 100%;
  height: auto;
}
.mainaboutSec .mainAboutContent .mainAboutImgHolder .img2{
  max-width: 550px;
  width: 100%;
  height: auto;
  margin-top: 1rem;
}
.mainaboutSec .mainAboutContent .mainAboutTextHolder p{
  text-align: justify;
  color: var(--seconderyfontColor);
}
/* +++++++About MainEnd+++++++ */


/* +++++++About Show +++++++ */
.aboutShow .aboutShowCardBox{
  display: flex;
  flex-direction: row;
  justify-content:space-around;
}
.aboutShow .aboutShowCardBox .card .showImageHolder{
  border-radius: 50%;
  background-color: var(--primaryColor);
  text-align: center;
}
.aboutShow .aboutShowCardBox .card .showImageHolder img{
  max-width: 100px;
  width: 100%;
  height: auto;
  padding: 3rem;
  
  
}
.aboutShow .aboutShowCardBox .card h1{
  text-align: center;
}
/* +++++++About Show End+++++++ */


/* +++++++About Second +++++++ */
.secondAboutSec .secondAboutContent .secondAboutContentHolder{
  margin-top: 2rem;
}
.secondAboutSec .secondAboutContent .secondAboutContentHolder img{
  max-width: auto;
  width: 100%;
  height: auto;
}
.secondAboutSec .secondAboutContent .secondAboutContentHolder p{
  text-align: justify;
  color: var(--seconderyfontColor);
}
/* +++++++About Second End+++++++ */


/* +++++++Last About +++++++ */
.lastAboutSec{
  margin-top: 2rem;
}
.lastAboutSec .lastAboutContent{
  display: flex;
  flex-direction: row;
  justify-content: center;

}
.lastAboutSec .lastAboutContent .lastAboutImgHolder img{
  max-width: 550px;
  width: 100%;
  height: auto;
}
.lastAboutSec .lastAboutContent .lastAboutTextHolder{
  max-width: 500px;
  width: 100%;
  height: auto;
  background-color: var(--primaryColor);
  padding: 0 1rem;
}
.lastAboutSec .lastAboutContent .lastAboutTextHolder p{
  text-align: justify;
  
}
/* +++++++Last AboutEnd+++++++ */


/* +++++++Third About+++++++ */
.thirdAboutSec .thirdAboutContent p{
  color: var(--seconderyfontColor);
  text-align: justify;
}
/* +++++++Third About End+++++++ */


/* +++++++Fourth About+++++++ */
.fourthAboutSec .fourthAboutContent{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fourthAboutSec .fourthAboutContent .fourthAboutTextHolder{
  max-width: 550px;
  width: 100%;
  height: auto;
}
.fourthAboutSec .fourthAboutContent .fourthAboutTextHolder p{
  text-align: justify;
  color: var(--seconderyfontColor);
}
.fourthAboutSec .fourthAboutContent .fourthAboutImgHolder{
  background-color: #ffffff;
  border-radius: 150px;
  border: 3px solid var(--primaryColor);
}
.fourthAboutSec .fourthAboutContent .fourthAboutImgHolder img{
  max-width: 550px;
  width: 100%;
  height: auto;
}
/* +++++++Fourth About End+++++++ */


/* +++++++Service Main+++++++ */
.serviceMain{
  margin-top: 3rem;
}
.serviceMain h1{
  text-align: center;
  letter-spacing: 6px;
}
.serviceMain .serviceMainCardBox{
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: space-between;
  align-items: center;
}
.serviceMain .serviceMainCardBox .card .serviceMainCardImgHolder img{
  max-width: 375px;
  min-width: 200PX;
  width: 100%;
  height: auto;
}
.serviceMain .serviceMainCardBox .card h1{
  text-align: center;
}
/* +++++++Service Main End+++++++ */


/* +++++++Service Second +++++++ */
.secondServiceSec p{
  text-align: justify;
  color: var(--seconderyfontColor);
}
.secondServiceSec .secondSerHealth {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.secondServiceSec .secondSerHealth .secondHealthTextHolder{
    max-width: 550px;
    width: 100%;
    height: auto;
}
.secondServiceSec .secondSerHealth .secondHealthTextHolder p{
  text-align: justify;
  color: var(--seconderyfontColor);
}
.secondServiceSec .secondSerHealth .secondHealthImgHolder img{
    max-width: 450px;
    width: 100%;
    height: auto;
}
.secondServiceSec .importantSer{
  margin-top: 3rem;
  background-color: #e7e7e7b8;
  padding: 1rem 2rem;
}
.secondServiceSec .importantSer p{
  color: var(--backgroudColor);
  font-weight: 800;
}
/* +++++++Service Second End+++++++ */


/* +++++++Swiper +++++++ */
swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.swiper {
  width: 100%;
  height: 300px;
  margin-left: auto;
  margin-right: auto;
}

.swiper-slide {
  background-size: cover;
  background-position: center;
}

.mySwiper2 {
  height: 80%;
  width: 100%;
}

.mySwiper {
  height: 20%;
  box-sizing: border-box;
  padding: 10px 0;
}

.mySwiper .swiper-slide {
  width: 25%;
  height: 100%;
  opacity: 0.4;
}

.mySwiper .swiper-slide-thumb-active {
  opacity: 1;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* +++++++Swiper End+++++++ */
.galleryImgSec{
  max-width: 1200px;
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  padding: 1rem 1rem;
}
.burgerHolder{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* display: none; */
    position: relative;
}
#checkboxbtn{
  position: absolute;
  width: 40px;
  height: 40px;
  opacity: 0;
  z-index: 2;
}
input:checked ~ .toggler .bar:nth-child(1){
  position: absolute; 
  transform: rotate(225deg);
}
input:checked ~ .toggler .bar:nth-child(2){
  display: none;
}
input:checked ~ .toggler .bar:nth-child(3){
  transform: rotate(135deg);
}


.bar{
  display: block;
  height: 3px;
  width: 33px;
  background-color: #fff;
  margin-bottom: 8px;
  transition: 0.1s all ease-in-out;
}
.burgerHolder{
  display: none;
}
@media screen and (max-width:720px){
.navbar .navLinks {
    display: none;

  }
    .burgerHolder {
      display: flex;
    }
    .navbar .logoHolder img {
      width: 175px;
    }
  .mainSection .mainContent {
    flex-direction: column;
  }
  .container {
    max-width: 600px;
  }
  .mainSection .mainContent .mainImgHolder img {
    max-width: 585px;
  }
  .mainSection .mainContent .mainContentHolder {
    margin-top: 0rem;
    max-width: 500px;
  }
  .secondSec .secondContent {
    margin-top: 1rem;
    flex-direction: column;
    align-items: center;
  }
  .secondSec .secondContent .secondContentHolder {
  max-width: 600px;
  }
  .thirdsection .thirdContent .thirdCardbox {
  justify-content: center;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  }
  .fourthSec .fourthContent {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    flex-direction: column;
    align-items: center;
  }
  .fourthSec .fourthContent p {
    max-width: 600px;
  }
  .fifthSec .fifthCardBox {
    flex-direction: column;
    gap: 1.2rem;
    align-items: center;
  }
  .sixthSec .sixthContent {
    flex-direction: column;
    align-items: center;
  }
  .sixthSec .sixthContent .sixthContentHolder p {
    max-width: 600px;
  }
  footer .footerCardBox {
    flex-direction: column;
    align-items: center;
  }
  .logoHolder{
    grid-area: logo;
  }
  .burgerHolder{
    grid-area: humMenu;
  }
  .navLinks{
    grid-area: navLink;
    transform: translateX(-300px);
    transition: 1.5s all ease-in-out;
    display: none;
  }
  .navLinks.active{

    display: flex;
      transform: translateX(0);
  }

  .navbar {
    display: grid;
    grid-template-areas: 
    'logo humMenu'
    'navLink navLink';
  }
  .navbar .navLinks ul {
    flex-direction: column;
    width: -webkit-fill-available;
    align-items: center;
  }
  .navbar .navLinks ul li {
    margin: 1rem;
  }
  .serviceMain .serviceMainCardBox {
    grid-template-columns: repeat(1, auto);
    justify-content: center;
  }
  .secondServiceSec .secondSerHealth {
    align-items: center;
    justify-content: center;
    flex-direction: column-reverse;
  }
  .fourthAboutSec .fourthAboutContent {
    flex-direction: column;
  }
}
@media screen and (max-width:1065px){
  .lastAboutContent{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .lastAboutImgHolder{
    display: flex;
    align-items: center;
  }
  .fourthAboutSec .fourthAboutContent {
    gap: 1rem;
  }
}
@media screen and (max-width:930px){
  .lastAboutSec .lastAboutContent {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2rem;
  }
  .aboutShow .aboutShowCardBox {
    flex-direction: column;
  }
  .aboutShow .aboutShowCardBox .card .showImageHolder {
    border-radius: 0;
  }
  .fourthAboutSec .fourthAboutContent .fourthAboutImgHolder {
    border-radius: 100px;
  }

}
@media screen and (max-width:977px){
  .mainaboutSec .mainAboutContent .mainAboutImgHolder {
    margin-top: 1rem;
    flex-direction: column;
  }
}

.contactSec .contactContainer{
  max-width: 1200px;
  margin: 0 auto;

}
.contactSec .contactContainer .contactImgHolder{
  margin: 2rem 1rem;

}
.contactSec .contactContainer .contactImgHolder img{
  max-width: 1200px;
  width: 100%;
  height: auto;
}
.contactTextHolder{
  text-align: justify;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 1rem;
}
.contactTextHolder p {
  max-width: 721px;
}
.fullname,
.cityPostcode,
.emailPhone{
  display: flex;
  gap: 2rem;
}

.firstNameHolder,
.lastNameHolder,
.cityHolder,
.PostHolder,
.emailHolder,
.phoneHolder{
  display: flex;
  flex-direction: column;
  width: -webkit-fill-available;
}
form{
  display: flex;
  flex-direction: column;
}
.formMapHolder{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1rem;
  margin-top: 1.5rem;
}
input,
textarea{
  background: none;
  color: #fff;
  border: none;
  border-bottom: 1px solid #fff;
  padding: 0.8rem 0.5rem;
  margin-bottom: 1rem;
}
input:focus,
textarea:focus{
  outline: none;
  border-bottom: 2px solid #fff;
}
.contactbtnHolder{
  display: contents;
}
.mapCanvas{
  display: flex;
  align-items: center;
}
@media screen and (max-width:1235px) {
  .galleryImgSec {
    height: 86vh;
    padding: 2rem 0rem;
  }

  .formMapHolder {
    grid-template-columns: repeat(1, 1fr);
  }
  .mapCanvas {
    justify-content: center;
    align-items: center;
  }
  .contactbtnHolder{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  form {
    margin: 0 1rem;
  }
}
@media screen and (max-width:645px){
  .mapCanvas {
    max-width: 530px;
    margin: 2rem;
  }
}
@media screen and (max-width:588px){
  .mapCanvas {
    max-width: 460px;
    margin: 3rem;
  }
  form {
    margin: 0 3rem;
  }
}
@media screen and (max-width:502px){
  .mapCanvas {
    max-width: 467px;
    margin: 1rem;
  }
  iframe {
    width: 371px;
    height: 409px;
  }
}
@media screen and (max-width:414px){
  .mapCanvas {
    max-width: 365px;
    margin: 1rem;
    width: 100%;
    height: auto;
  }
}
@media screen and (max-width:400px){
  .mapCanvas {
    max-width: 303px;
    margin: 2rem;
  }
  .fullname,
  .cityPostcode,
  .emailPhone {
    display: flex;
    gap: 2rem;
    flex-direction: column;
  }
  form {
    margin: 0 3rem;
  }
  .contactTextHolder p {
    max-width: 298px;
  }
  .contactSec .contactContainer .contactImgHolder img {
    max-width: 336px;
    width: 100%;
    height: auto;
  }
}
@media screen and (max-width:370px){
  form {
    margin: 0 3rem;
  }
  .contactTextHolder p {
    max-width: 259px;
  }
}
@media screen and (max-width:340px){
  form {
    margin: 2rem;
  }
  .contactTextHolder p {
    max-width: 259px;
  }
  iframe {
    width: 185px;
    height: 409px;
  }
  .mapCanvas {
    margin: 1rem;
  }
}
@media screen and (max-width:320px){
  form {
    margin: 0 3rem;
  }
  .contactTextHolder p {
    max-width: 259px;
  }
  .mainSection .mainContent .mainContentHolder h1 {
    font-size: 2rem;
  }
  form {
    margin: 0px 1rem;
  }

  iframe{
    width: 600px;
    height: 600px;
  }
}
@media screen and (max-width:290px){
  iframe {
    width: 185px;
    height: 409px;
  }
  .mapCanvas {
    max-width: 275px;
    margin: 0rem;
  }
}