/*******************************/

/********* General CSS *********/

/*******************************/

body {

  color: #666666;

  background: #ffffff;

  font-family: "Roboto", sans-serif;

  font-weight: 400;

}

:root {

  --primary: #6699ff;

  --secondary: #000000;

  --heaven: #ffffff;

  --background: #001f41;

}

::-moz-selection { /* Code for Firefox */

  color: #ffffff ;

  background: #aa9166;

}



::selection {

  color:#ffffff ;

  background: #aa9166;

}

::-webkit-selection {

  background: #aa9166;

  color: #ffffff;

  text-shadow: none;

}



h1,

h2,

h3,

h4,

h5,

h6 {

  /* font-family: 'EB Garamond', serif; */

  font-weight: 600;

  /*font-style: italic;*/

  color: var(--secondary);

}



a {

  color: #666666;

  transition: 0.3s;

}



a:hover,

a:active,

a:focus {

  color: var(--primary);

  outline: none;

  text-decoration: none;

}

ul{

  margin-bottom: 0px;

}

.btn:focus {

  box-shadow: none;

}



.wrapper {

  position: relative;

  width: 100%;

  /*max-width: 1366px;*/

  margin: 0 auto;

  background: #ffffff;

}



.back-to-top {

  position: fixed;

  display: none;

  background: var(--primary);

  color: var(--heaven);

  width: 44px;

  height: 44px;

  text-align: center;

  line-height: 1;

  font-size: 22px;

  right: 15px;

  bottom: 15px;

  transition: background 0.5s;

  z-index: 9;

}



.back-to-top:hover {

  color: var(--primary);

  background: var(--heaven);

  border: 2px solid var(--primary);

}



.back-to-top i {

  padding-top: 10px;

}



/**********************************/

/********** Top Bar CSS ***********/

/**********************************/

.top-bar {

  position: relative;

  height: 90px;

  background: var(--heaven);

}



.top-bar .logo {

  padding: 15px 0;

  /* width: 100px; */

  text-align: left;

  overflow: hidden;

}



.top-bar .logo img {

  max-width: 100%;

  max-height: 60px;

}



.top-bar .top-bar-right {

  display: flex;

  align-items: center;

  justify-content: flex-end;

}



.top-bar .text {

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

  height: 90px;

  padding: 0 20px;

  text-align: center;

  border-left: 1px solid rgba(255, 255, 255, 0.15);

}



.top-bar .text h2 {

  color: var(--secondary);

  font-family: "Roboto", sans-serif;

  font-weight: 500;

  font-style: normal;

  font-size: 25px;

  margin: 0;

}



.top-bar .text p {

  color: var(--secondary);

  font-size: 13px;

  margin: 0;

}



.top-bar .social {

  display: flex;

  height: 90px;

  font-size: 0;

  justify-content: flex-end;

}



.top-bar .social a {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 40px;

  height: 100%;

  font-size: 22px;

  color: var(--secondary);

  border-right: 1px solid rgba(255, 255, 255, 0.15);

}



.top-bar .social a:first-child {

  border-left: 1px solid rgba(255, 255, 255, 0.15);

}



.top-bar .social a:hover {

  color: var(--primary);

  background: #ffffff;

}



@media (min-width: 992px) {

  .top-bar {

    padding: 0 60px;

  }

}



@media (max-width: 991.98px) {

  .top-bar .logo {

    text-align: center;

  }



  .top-bar .social {

    display: none;

  }

}



/**********************************/

/*********** Nav Bar CSS **********/

/**********************************/

.nav-bar {

  position: relative;

  padding: 20px 0;

  transition: 0.3s;

}



.nav-bar.nav-sticky {

  position: fixed;

  top: 0;

  width: 100%;

  padding: 10px 0;

  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);

  z-index: 999;

}



.nav-bar .navbar {

  height: 100%;

  padding: 0;

}



.navbar-dark .navbar-nav .nav-link,

.navbar-dark .navbar-nav .nav-link:focus,

.navbar-dark .navbar-nav .nav-link:hover,

.navbar-dark .navbar-nav .nav-link.active {

  padding: 10px 10px 8px 10px;

  color: #ffffff;

}



.navbar-dark .navbar-nav .nav-link:hover,

.navbar-dark .navbar-nav .nav-link.active {

  color: var(--primary);

  transition: none;

}



.nav-bar .dropdown-menu {

  margin-top: 0;

  border: 0;

  border-radius: 0;

  background: #f8f9fa;

  text-transform: uppercase;

  font: 'Poppins', sans-serif;;

  font-size: 14px;

  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

}

.nav-bar .dropdown-menu a:hover{

  color: var(--primary);

}

.dropdown-item.active, .dropdown-item:active {

  color: var(--primary);

  text-decoration: none;

  background-color: #fff;

}



.nav-bar .btn {

  color: #ffffff;

  border: 2px solid var(--primary);

  border-radius: 0;

}



.nav-bar .btn:hover {

  background: var(--primary);

}



@media (min-width: 992px) {

  .nav-bar {

    padding: 20px 60px;

  }



  .nav-bar.nav-sticky {

    padding: 10px 60px;

  }



  .nav-bar,

  .nav-bar .navbar {

    background: var(--secondary) !important;

  }



  .nav-bar .navbar-brand {

    display: none;

  }



  .nav-bar a.nav-link {

    padding: 8px 15px;

    font-size: 15px;

    text-transform: uppercase;

  }

}



@media (max-width: 991.98px) {

  .nav-bar,

  .nav-bar .navbar {

    padding: 3px 0;

    background: var(--secondary) !important;

  }



  .nav-bar a.nav-link {

    padding: 5px;

  }



  .nav-bar .dropdown-menu {

    box-shadow: none;

  }



  /* .nav-bar .btn {

    display: none;

  } */

  .top-bar .top-bar-right {

    display: none;

  }

}



/*******************************/

/******** Carousel CSS *********/

/*******************************/

.carousel {

  position: relative;

  width: 100%;

  height: calc(100vh - 170px);

  margin: 0 auto;

  text-align: center;

  overflow: hidden;

}



.carousel .carousel-inner,

.carousel .carousel-item {

  position: relative;

  width: 100%;

  height: 100%;

}



.carousel .carousel-item img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.carousel .carousel-item::after {

  position: absolute;

  content: "";

  width: 100%;

  height: 100%;

  top: 0;

  left: 0;

  /*background: rgba(0, 0, 0, 0.3);*/

  

}



.carousel .carousel-caption {

  position: absolute;

    top: 0;

    bottom: 0;

    z-index: 1;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-align: center;

    align-items: center;

    -ms-flex-pack: center;

    justify-content: center;

    /* width: 15%; */

    color: #fff;

    /* text-align: center; */

    /* position: absolute; */

    /* top: 3rem; */

    /* bottom: 0; */

    /* display: flex; */

    align-items: center;

    /* justify-content: start; */

    flex-direction: column;

    height: calc(100vh - 170px);

}



.carousel .carousel-caption h1 {

  color: #ffffff;

  font-size: 25px;

  font-weight: 500;

  margin-bottom: 20px;

}

.carousel .carousel-caption h3 {

  font-weight: 500;
  margin-bottom: 20px;
  font-size: 70px;
  color: #6699ff !important;
  font-family: 'Work Sans', sans-serif;
  text-transform: uppercase;
  font-style: normal;

}



.carousel .carousel-caption p {

  color: #ffffff;

  font-size: 18px;

  /*text-align: justify;*/

  margin-bottom: 25px;

}



.carousel .carousel-caption .btn {

  padding: 10px 20px;

  font-size: 18px;

  font-weight: 500;

  letter-spacing: 1px;

  text-transform: uppercase;

  color: #ffffff;

  /* background: var(--heaven); */

  border: 2px solid var(--primary);

  border-radius: 0;

  transition: 0.3s;

}



.carousel .carousel-caption .btn:hover {

  color: var(--heaven);

  background: var(--primary);

}



@media (max-width: 767.98px) {

  .carousel .carousel-caption h1 {

    font-size: 40px;

    font-weight: 700;

  }



  .carousel .carousel-caption p {

    font-size: 20px;

  }



  .carousel .carousel-caption .btn {

    padding: 12px 30px;

    font-size: 18px;

    font-weight: 500;

    letter-spacing: 0;

  }

}



@media (max-width: 575.98px) {

  .carousel .carousel-caption h1 {

    font-size: 16px;

    max-width: 400px;

    font-weight: 500;

  }

  .carousel .carousel-caption h3 {

    font-size: 16px;

    max-width: 400px;

    font-weight: 500;

  }

  .carousel .carousel-caption {

    top: 1rem;

  }



  .carousel .carousel-caption p {

    font-size: 14px;

  }



  .carousel .carousel-caption .btn {

    padding: 10px 25px;

    font-size: 16px;

    font-weight: 400;

    letter-spacing: 0;

  }

}



.carousel .animated {

  -webkit-animation-duration: 1.5s;

  animation-duration: 1.5s;

}

@media (max-width: 375px) {

.carousel {

  position: relative;

  width: 100%;

  height: calc(131vh - 170px);

  margin: 0 auto;

  text-align: center;

  overflow: hidden;

}

.carousel .carousel-caption {

  top: 4rem;

}

.appointment_area .appointment_info h3 {

  font-size: 24px !important;

  font-weight: 700;

  color: #1f1f1f;

}

.appointment_area form input {

  height: 30px !important;

}

.appointment_area form textarea {

  height: 50px !important;

}

.appointment_area form .appoinment_button button {

 padding: 10px 0px 10px 0px !important;

 margin-top: -1rem !important;

}

}





/*******************************/

/******* Page Header CSS *******/

/*******************************/

.page-header {

  position: relative;

  margin-bottom: 45px;

  padding: 90px 0;

  text-align: center;

  /* background: var(--primary); */

  background: url(../img/family-law-header.png);

  opacity: 1;

  background-repeat: no-repeat;

  background-clip: var(--secondary);

  background-size: cover;
  height: 40vh;

}



.page-header h2 {

  position: relative;
  color: var(--primary);
  font-size: 60px;
  font-weight: 500;
  margin-bottom: 20px;
  font-family: 'Work Sans', sans-serif;
  text-transform: uppercase;
  font-style: normal;
}

/*underline*/

/*.page-header h2::after {

  position: absolute;

  content: "";

  width: 100px;

  height: 2px;

  left: calc(50% - 50px);

  bottom: 0;

  background: var(--heaven);

}*/



.page-header a {

  position: relative;

  padding: 0 12px;

  font-size: 22px;

  /* color: black; */

  color: var(--heaven);

}



.page-header a:hover {

  color: #ffffff;

}



.page-header a::after {

  position: absolute;

  content: "/";

  width: 8px;

  height: 8px;

  top: -2px;

  right: -7px;

  text-align: center;

  color: var(--heaven);

}



.page-header a:last-child::after {

  display: none;

}



@media (max-width: 767.98px) {

  .page-header h2 {

    font-size: 30px;

  }



  .page-header a {

    font-size: 18px;

  }

}



/*******************************/

/******* Section Header ********/

/*******************************/

.section-header {

  position: relative;

  width: 100%;

  text-align: center;

  margin-bottom: 45px;

}



.section-header h2 {

  margin: 0;

  position: relative;

  font-size: 50px;

  font-weight: 700;

  white-space: nowrap;

  z-index: 1;

}



@media (max-width: 768px) {

  .section-header h2 {

    font-size: 23px;

  }

  .wrapper iframe{

    width: 30%;

    height: 250px;

  }

}

@media (max-width: 320px) {

  .section-header h2 {

    font-size: 23px;

  }

  .wrapper1 img{

    width: 100%;

    height: 220px !important;

  }

  .hermove-banner img {

    width: 100%;

    height: 154px;

}

.auto_hed{

 font-size: 30px;

}

}

.fglktl img{

  width: 100%;

}

.fglktl h6{

  text-align: center;

  padding: 5px 5px;

}





/*******************************/

/******** Top Feature CSS ******/

/*******************************/

.feature-top {

  position: relative;

  background: var(--background);

  margin-bottom: 45px;

}



.feature-top .col-md-3 {

  border-right: 1px solid rgba(255, 255, 255, 0.1);

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}



@media (max-width: 575.98px) {

  .feature-top .col-md-3:nth-child(1n) {

    border-right: none;

  }



  .feature-top .col-md-3:last-child {

    border-bottom: none;

  }

}



@media (min-width: 576px) and (max-width: 767.98px) {

  .feature-top .col-md-3:nth-child(2n) {

    border-right: none;

  }



  .feature-top .col-md-3:nth-child(3n),

  .feature-top .col-md-3:nth-child(4n) {

    border-bottom: none;

  }

}



@media (min-width: 768px) {

  .feature-top .col-md-3 {

    border-bottom: none;

  }



  .feature-top .col-md-3:nth-child(4n) {

    border-right: none;

  }

}



.feature-top .feature-item {

  padding: 30px 0;

  text-align: center;

}



.feature-top .feature-item i {

  color: var(--heaven);

  font-size: 35px;

  margin-bottom: 10px;

}

.feature-top .feature-item i:hover {

  color: var(--primary);

}



.feature-top .feature-item h3 {

  color: #ffffff;

  font-size: 30px;

  font-weight: 600;

}



.feature-top .feature-item p {

  color: #999999;

  margin: 0;

  font-size: 18px;

}



/*******************************/

/********** About CSS **********/

/*******************************/

.about {

  position: relative;

  width: 100%;

  padding: 45px 0;

}



.about .section-header {

  margin-bottom: 30px;

}



.about .about-img {

  position: relative;

  height: 100%;

  padding: 10px;

  background: var(--primary);

}



.about .about-img img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.about .about-text p {

  font-size: 16px;

}



.about .about-text a.btn {

  position: relative;

  margin-top: 15px;

  padding: 15px 35px;

  font-size: 16px;

  font-weight: 500;

  letter-spacing: 1px;

  text-transform: uppercase;

  color: var(--primary);

  border: 2px solid var(--primary);

  border-radius: 0;

  background: var(--heaven);

  transition: 0.3s;

}



.about .about-text a.btn:hover {

  color: var(--heaven);

  background: var(--primary);

}



@media (max-width: 767.98px) {

  .about .about-img {

    margin-bottom: 30px;

    height: auto;

  }

}



/*******************************/

/********* Service CSS *********/

/*******************************/

.service {

  position: relative;

  width: 100%;

  padding: 45px 0 15px 0;

}



.service .service-item {

  position: relative;

  width: 100%;

  text-align: center;

  /* border: 2px solid var(--background); */

  /* background: var(--heaven); */

  background: rgb(57 71 73);

  margin-bottom: 30px;

}





.service .service-icon {

  height: 200px;

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  background: var(--background);

}



.service .service-icon i {

  width: 100px;

  height: 100px;

  padding: 20px 0;

  text-align: center;

  font-size: 60px;

  color: var(--primary);

  background: var(--heaven);

  transition: 0.5s;

  border-radius: 50%;

}



.service .service-item:hover .service-icon i {

  margin-top: -15px;

}



.service .service-item h3 {

  margin: 0;

  padding: 25px 15px 15px 15px;

  font-size: 30px;

  font-weight: 600;

  color: var(--primary);

}



.service .service-item p {

  margin: 0;

  color: #999999;

  padding: 0 25px 25px 25px;

  font-size: 18px;

}



.service .service-item a.btn {

  position: relative;

  margin-bottom: 30px;

  margin-top: 25px;

  padding: 10px 20px;

  font-size: 14px;

  font-weight: 500;

  letter-spacing: 1px;

  text-transform: uppercase;

  color: var(--primary);

  border: 2px solid var(--primary);

  border-radius: 0;

  background: var(--heaven);

  transition: 0.3s;


}



.service .service-item:hover a.btn {

  color: var(--heaven);

  background: var(--primary);

}



/*******************************/

/********* Feature CSS *********/

/*******************************/

.feature {

  position: relative;

  width: 100%;

  padding: 45px 0;

}



.feature .feature-item {

  margin-bottom: 30px;

}



.feature .feature-icon {

  height: 180px;

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  /* background: var(--background); */

}



.feature .feature-icon i {

  width: 100px;

  height: 100px;

  padding: 20px 0;

  text-align: center;

  font-size: 60px;

  color: var(--heaven);

  background: var(--background);

  transition: 0.5s;

  border-radius: 50%;

}



.feature .feature-item:hover .feature-icon i {

  margin-right: -15px;

}



.feature .feature-item h3 {

  position: relative;

  margin-bottom: 15px;

  padding-bottom: 10px;

  font-size: 30px;

  font-weight: 600;

}



.feature .feature-item h3::after {

  position: absolute;

  content: "";

  width: 50px;

  height: 2px;

  left: 0;

  bottom: 0;

  background: var(--primary);

}



.feature .feature-item p {

  margin: 0;

  font-size: 16px;

}



.feature .feature-img {

  position: relative;

  height: 100%;

  padding: 10px;

  background: var(--primary);

}



.feature .feature-img img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



/*******************************/

/*********** Team CSS **********/

/*******************************/

.team {

  position: relative;

  width: 100%;

  padding: 45px 0 15px 0;

}



.team .team-item {

  margin-bottom: 30px;

}



.team .team-img {

  position: relative;

}



.team .team-img img {

  width: 100%;

}



.team .team-text {

  position: relative;

  padding: 50px 15px 30px 15px;

  text-align: center;

  background: var(--background);

}



.team .team-text h2 {

  font-size: 22px;

  font-weight: 600;

  color: var(--primary);

}



.team .team-text p {

  margin: 0;

  color: #999999;

}



.team .team-social {

  position: absolute;

  width: calc(100% - 60px);

  height: 50px;

  top: -25px;

  left: 30px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: var(--primary);

  font-size: 0;

  transition: 0.5s;

}



.team .team-item:hover .team-social {

  width: 100%;

  left: 0;

}



.team .team-social a {

  display: inline-block;

  margin-right: 15px;

  font-size: 18px;

  text-align: center;

  color: var(--heaven);

  transition: 0.3s;

}



.team .team-social a:last-child {

  margin-right: 0;

}



.team .team-social a:hover {

  color: var(--background);

}



/*******************************/

/*********** FAQs CSS **********/

/*******************************/

.faqs {

  position: relative;

  width: 100%;

  padding: 45px 0;

}



.faqs .faqs-img {

  position: relative;

  height: 100%;

  padding: 10px;

  background: var(--primary);

}



.faqs .faqs-img img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



@media (max-width: 767.98px) {

  .faqs .faqs-img {

    margin-bottom: 30px;

    height: auto;

  }

}



.faqs .card {

  margin-bottom: 15px;

  padding-top: 15px;

  border: none;

  border-radius: 0;

  border-top: 1px solid var(--primary);

}



.faqs .card:last-child {

  margin-bottom: 0;

  padding-bottom: 15px;

  border-bottom: 1px solid var(--primary);

}



.faqs .card-header {

  padding: 0;

  border: none;

  background: #ffffff;

}



.faqs .card-header a {

  display: block;

  width: 100%;

  color: var(--secondary);

  font-size: 18px;

  line-height: 40px;

}



.faqs .card-header a span {

  display: inline-block;

  width: 40px;

  height: 40px;

  margin-right: 10px;

  text-align: center;

  background: var(--background);

  color: var(--heaven);

  font-weight: 700;

}



.faqs .card-header [data-toggle="collapse"]:after {

  font-family: "font Awesome 5 Free";

  content: "\f067";

  float: right;

  color: var(--background);

  font-size: 12px;

  font-weight: 900;

  transition: 0.3s;

}



.faqs .card-header [data-toggle="collapse"][aria-expanded="true"]:after {

  font-family: "font Awesome 5 Free";

  content: "\f068";

  float: right;

  color: var(--background);

  font-size: 12px;

  font-weight: 900;

  transition: 0.3s;

}



.faqs .card-body {

  padding: 15px 0 0 0;

  font-size: 16px;

  border: none;

  background: #ffffff;

}



.faqs a.btn {

  position: relative;

  margin-top: 15px;

  padding: 15px 35px;

  font-size: 16px;

  font-weight: 500;

  letter-spacing: 1px;

  text-transform: uppercase;

  color: var(--primary);

  border: 2px solid var(--primary);

  border-radius: 0;

  background: var(--heaven);

  transition: 0.3s;

}



.faqs a.btn:hover {

  color: var(--heaven);

  background: var(--primary);

}



/*******************************/

/******* Testimonial CSS *******/

/*******************************/

.testimonial {

  position: relative;

  padding: 45px 0;

}



.testimonial .testimonials-carousel {

  position: relative;

  width: calc(100% + 30px);

  left: -15px;

  right: -15px;

}



.testimonial .testimonial-item {

  position: relative;

  margin: 0 15px;

  padding: 30px;

  background: var(--background);

  overflow: hidden;

}



.testimonial .testimonial-item i {

  position: absolute;

  top: 0;

  right: 0;

  color: aliceblue;

  /* font-size: 60px; */

  transform: rotate(45deg);

  z-index: 1;

  font-size: 25px;

  margin: 35px 20px 0px 0px;

}



.testimonial .testimonial-item .col-12 {

  margin-top: 20px;

}



.testimonial .testimonial-item img {

  width: 100%;

}



.testimonial .testimonial-item h2 {

  color: var(--heaven);

  font-size: 22px;

  font-weight: 600;

  margin-bottom: 5px;

}



.testimonial .testimonial-item p {

  color: #999999;

  font-size: 16px;

  margin: 0;

}



.testimonial .owl-nav,

.testimonial .owl-dots {

  margin-top: 15px;

  text-align: center;

}



.testimonial .owl-dot {

  display: inline-block;

  margin: 0 5px;

  width: 12px;

  height: 12px;

  border-radius: 50%;

  background: var(--primary);

}



.testimonial .owl-dot.active {

  background: var(--background);

}



/*******************************/

/*********** Blog CSS **********/

/*******************************/

.blog {

  position: relative;

  width: 100%;

  padding: 45px 0;

}



.blog .blog-carousel {

  position: relative;

  width: calc(100% + 30px);

  left: -15px;

  right: -15px;

}



.blog .blog-item {

  position: relative;

  margin: 0 15px;

  background: #ffffff;

  overflow: hidden;

}



.blog .blog-page .blog-item {

  margin: 0 0 30px 0;

}



.blog .blog-item img {

  width: 100%;

  margin-bottom: 25px;

}



.blog .blog-item h3 {

  font-size: 25px;

  font-weight: 600;

}



.blog .blog-item .meta {

  padding: 0 0 15px 0;

}



.blog .blog-item .meta * {

  display: inline-block;

  margin: 0;

  padding: 0;

  font-size: 14px;

  color: #999999;

}



.blog .blog-item .meta i {

  margin: 0 2px 0 10px;

}



.blog .blog-item .meta i:first-child {

  margin-left: 0;

}



.blog .blog-item p {

  font-size: 16px;

}



.blog .blog-item a.btn {

  padding: 0;

  font-size: 14px;

  font-weight: 500;

  letter-spacing: 1px;

  text-transform: uppercase;

  color: var(--primary);

  transition: 0.3s;

}



.blog .blog-item a.btn i {

  margin-left: 10px;

}



.blog .blog-item a.btn:hover {

  color: var(--secondary);

}



.blog .owl-nav,

.blog .owl-dots {

  margin-top: 15px;

  text-align: center;

}



.blog .owl-dot {

  display: inline-block;

  margin: 0 5px;

  width: 12px;

  height: 12px;

  border-radius: 50%;

  background: var(--primary);

}



.blog .owl-dot.active {

  background: var(--background);

}



.blog .pagination .page-link {

  color: var(--heaven);

  border-radius: 0;

  border-color: var(--primary);

}



.blog .pagination .page-link:hover,

.blog .pagination .page-item.active .page-link {

  color: var(--heaven);

  background: var(--background);

}



.blog .pagination .disabled .page-link {

  color: #999999;

}



.blog .pagination .page-item .page-link {

  color: var(--heaven);

  background: var(--primary);

}

.blog .pagination .page-item .page-link:hover {

  color: var(--heaven);

  background: var(--background);

}



/*******************************/

/********* Timeline CSS ********/

/*******************************/

.timeline {

  position: relative;

  padding: 45px 0;

}



.timeline .timeline-start {

  position: relative;

  width: calc(100% + 30px);

  left: -15px;

  right: -15px;

}



.timeline .timeline-container {

  padding: 0 15px;

  position: relative;

  background: inherit;

  width: 50%;

  margin-top: -5px;

}



.timeline .timeline-container.left {

  left: 0;

}



.timeline .timeline-container.right {

  left: 50%;

}



.timeline .timeline-container::before {

  content: "";

  position: absolute;

  width: 15px;

  height: 5px;

  background: var(--primary);

  z-index: 1;

}



.timeline .timeline-container.left::before {

  top: 0;

  right: 0;

}



.timeline .timeline-container.right::before {

  bottom: 0;

  left: 0;

}



.timeline .timeline-container::after {

  content: "";

  position: absolute;

  width: 15px;

  height: 5px;

  background: var(--primary);

  z-index: 1;

}



.timeline .timeline-container.left::after {

  bottom: 0;

  right: 0;

}



.timeline .timeline-container.right::after {

  top: 0;

  left: 0;

}



.timeline .timeline-container:first-child::before,

.timeline .timeline-container:last-child::before {

  display: none;

}



.timeline .timeline-container .timeline-content {

  padding: 30px;

  background: var(--heaven);

  position: relative;

  border-right: 5px solid var(--primary);

}



.timeline .timeline-container.right .timeline-content {

  border-left: 5px solid var(--primary);

}



.timeline .timeline-container .timeline-content h2 {

  margin-bottom: 15px;

  font-size: 22px;

  font-weight: 600;

  color: var(--primary);

}



.timeline .timeline-container .timeline-content h2 span {

  display: inline-block;

  margin-right: 15px;

  padding: 5px 10px;

  color: var(--heaven);

  background: var(--primary);

  font-family: "Roboto", sans-serif;

  font-style: normal;

}



.timeline .timeline-container .timeline-content p {

  margin: 0;

  font-size: 16px;

  color: #999999;

}



@media (max-width: 767.98px) {

  .timeline .timeline-container {

    width: 100%;

    margin-top: 0;

    padding-left: 15px;

    padding-right: 15px;

    padding-bottom: 30px;

  }



  .timeline .timeline-container:last-child {

    padding-bottom: 0;

  }



  .timeline .timeline-container.right {

    left: 0%;

  }



  .timeline .timeline-container.left::after,

  .timeline .timeline-container.right::after,

  .timeline .timeline-container.left::before,

  .timeline .timeline-container.right::before {

    width: 5px;

    height: 35px;

    left: 15px;

  }



  .timeline .timeline-container.left .timeline-content,

  .timeline .timeline-container.right .timeline-content {

    border-left: 5px solid var(--primary);

    border-right: none;

  }

}



/*******************************/

/******** Portfolio CSS ********/

/*******************************/

.portfolio {
  position: relative !important;
  padding: 45px 0;
  background: #ffffff;
}

.portfolio #portfolio-flters {
  padding: 0;
  margin: -15px 0 25px 0;
  list-style: none;
  font-size: 0;
  text-align: center;
}
.portfolio-container{
  height: auto !important;
}

.portfolio #portfolio-flters li,
.portfolio .load-more .btn {
  cursor: pointer;
  display: inline-block;
  margin: 5px;
  padding: 8px 15px;
  color: #aa9166;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  border-radius: 0;
  background: #121518;
  border: 2px solid #aa9166;
  transition: .3s;
}

.portfolio #portfolio-flters li:hover,
.portfolio #portfolio-flters li.filter-active {
  background: #aa9166;
  color: #121518;
}

.portfolio .load-more {
  text-align: center;
}

.portfolio .load-more .btn {
  padding: 15px 35px;
  font-size: 16px;
  transition: .3s;
}

.portfolio .load-more .btn:hover {
  color: #121518;
  background: #aa9166;
}

.portfolio .portfolio-item {
  position: relative !important;
  margin-bottom: 30px;
  overflow: hidden;
  transition: .5s;
  left: 0px !important;
  top: 0px !important;
}

.portfolio .portfolio-item:hover {
  margin-top: -10px;
}

.portfolio .portfolio-wrap {
  position: relative;
  width: 100% !important;
}

.portfolio img {
  position: relative;
  width: 100%; 
  height: 100%; 
  object-fit: cover;
}

.portfolio figure {
  position: absolute;
  padding: 30px;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  flex-direction: column;
  background: linear-gradient(rgba(0, 0, 0, .0), rgba(0, 0, 0, .0), rgba(0, 0, 0, 1) 90%);
}

.portfolio figure p {
  position: relative;
  margin-bottom: 5px;
  padding-bottom: 5px;
  color: #ffffff;
  font-size: 18px;
}

.portfolio figure p::after {
  position: absolute;
  content: "";
  width: 50px;
  height: 2px;
  left: 0;
  bottom: 0;
  background: #ffffff;
}

.portfolio figure a {
  font-family: 'EB Garamond', serif;
  color: #aa9166;
  font-size: 25px;
  font-weight: 600;
  font-style: italic;
  transition: .3s;
}

.portfolio figure a:hover {
  text-decoration: none;
  color: #ffffff;
}

.portfolio figure span {
  position: relative;
  color: #999999;
  font-size: 16px;
}



/*******************************/

/********* Contact CSS *********/

/*******************************/

.contact {

  position: relative;

  width: 100%;

  padding: 45px 0 15px 0;

}



.contact .contact-info {

  position: relative;

  margin-bottom: 30px;

  width: 100%;

  padding: 30px;

  background: var(--heaven);

}



.contact .contact-item {

  position: relative;

  margin-bottom: 30px;

  padding: 30px;

  display: flex;

  align-items: flex-start;

  flex-direction: row;

  border: 2px solid var(--primary);

}



.contact .contact-item i {

  display: inline-block;

  width: 60px;

  height: 60px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 30px;

  color: var(--primary);

  /* border: 2px solid var(--primary); */

}



.contact .contact-text {

  position: relative;

  width: auto;

  padding-left: 15px;

}



.contact .contact-text h2 {

  color: var(--primary);

  font-size: 25px;

  font-weight: 600;

}



.contact .contact-text p {

  margin: 0;

  color: #999999;

  font-size: 16px;

}



.contact .contact-item:last-child {

  margin-bottom: 0;

}



.contact .contact-form {

  position: relative;

  margin-top: 2rem;

  margin-bottom: 30px;

}



.contact .contact-form input {

  height: 60px;

  border-radius: 3px;

  border-width: 2px;

  /* border-color: var(--heaven); */

}





.contact .contact-form textarea {

  height: 190px;

  border-radius: 3px;

  border-width: 2px;

  /* border-color: var(--primary); */

}



.contact .contact-form .btn {

  padding: 16px 35px;

  font-size: 18px;

  font-weight: 500;

  letter-spacing: 1px;

  text-transform: uppercase;

  color: var(--primary);

  background: var(--heaven);

  border: 2px solid var(--primary);

  border-radius: 0;

  transition: 0.3s;

}



.contact .contact-form .btn:hover {

  color: var(--heaven);

  background: var(--primary);

}



/*******************************/

/******* Single Page CSS *******/

/*******************************/

.single {

  position: relative;

  width: 100%;

  padding: 45px 0 65px 0;

}



.single img {

  margin: 10px 0 15px 0;

}



.single .table,

.single .list-group {

  margin-bottom: 30px;

}



.single .ul-group {

  padding: 0;

  list-style: none;

}



.single .ul-group li {

  margin-left: 2px;

}



.single .ul-group li::before {

  position: relative;

  content: "\f0da";

  font-family: "Font Awesome 5 Free";

  font-weight: 900;

  margin-right: 10px;

}



.single .ol-group {

  padding-left: 18px;

}



/*******************************/

/********** Newsletter *********/

/*******************************/

.newsletter {

  position: relative;

  max-width: 900px;

  margin: 45px auto -140px auto;

  padding: 30px 15px;

  background: var(--primary);

  z-index: 1;

}



.newsletter .section-header {

  margin-bottom: 25px;

}



.newsletter .section-header h2::before,

.newsletter .section-header h2::after {

  border-color: #ffffff;

}



.newsletter .form {

  position: relative;

  max-width: 400px;

  margin: 0 auto;

}



.newsletter input {

  height: 50px;

  border: 2px solid var(--heaven);

  border-radius: 0;

}



.newsletter .btn {

  position: absolute;

  top: 5px;

  right: 5px;

  height: 40px;

  padding: 8px 20px;

  font-size: 14px;

  font-weight: 500;

  text-transform: uppercase;

  color: var(--primary);

  background: var(--heaven);

  border-radius: 0;

  border: 2px solid var(--primary);

  transition: 0.3s;

}

.form-group input{

  border: 2px solid var(--primary);

}

.form-group textarea{

  border: 2px solid var(--primary);

}

.form-control:focus {

  color: #495057;

  background-color: #fff;

  border-color: var(--primary);

  outline: 0;

  box-shadow: none;

}



.newsletter .btn:hover {

  color: var(--heaven);

  background: var(--primary);

}



/*******************************/

/********* Footer CSS **********/

/*******************************/

.footer {

  position: relative;

  margin-top: 25px;

  padding-top: 50px;

  background: var(--secondary);

  color: #ffffff;

  width: 100%;

  padding-right: 15px;

  padding-left: 35px;

  margin-right: auto;

  margin-left: auto;

}



.footer .footer-about,

.footer .footer-link,

.footer .footer-contact {

  position: relative;

  margin-bottom: 45px;

  color: #999999;

}



.footer .footer-about h2,

.footer .footer-link h2,

.footer .footer-contact h2 {

  position: relative;

  margin-bottom: 30px;

  font-size: 25px;

  font-weight: 600;

  color: var(--primary);

}

.footer-about p img {

  width: 150px;

  height: 70px;

}

.footer .footer-link a {

  display: block;

  margin-bottom: 10px;

  color: #999999;

  transition: 0.3s;

}



.footer .footer-link a::before {

  position: relative;

  content: "\f105";

  font-family: "Font Awesome 5 Free";

  font-weight: 900;

  margin-right: 10px;

}



.footer .footer-link a:hover {

  color: var(--primary);

  letter-spacing: 1px;

}



.footer .footer-contact p i {

  width: 25px;

  color: #999999;

}

.footer .footer-contact p i:hover{

  color: var(--primary);

}

.footer .footer-contact p a{

  color: #999999;

}



.footer .footer-social {

  position: relative;

  margin-top: 20px;

}



.footer .footer-social a {

  display: inline-block;

}



.footer .footer-social a i {

  margin-right: 15px;

  font-size: 18px;

  color: var(--heaven);

}



.footer .footer-social a:last-child i {

  margin: 0;

}



.footer .footer-social a:hover i {

  color: var(--primary);

}



.footer .footer-menu .f-menu {

  position: relative;

  padding: 15px 0;

  background: #121518;

  font-size: 0;

  text-align: center;

}



.footer .footer-menu .f-menu a {

  color: #999999;

  font-size: 16px;

  margin-right: 15px;

  padding-right: 15px;

  border-right: 1px solid rgba(255, 255, 255, 0.3);

}



.footer .footer-menu .f-menu a:hover {

  color: var(--primary);

}



.footer .footer-menu .f-menu a:last-child {

  margin-right: 0;

  padding-right: 0;

  border-right: none;

}



.footer .copyright {

  padding: 30px 15px;

}



.footer .copyright p {

  margin: 0;

  color: #999999;

}



.footer .copyright .col-md-6:last-child p {

  text-align: right;

}



.footer .copyright p a {

  color: var(--primary);

  font-weight: 500;

  letter-spacing: 1px;

}



.footer .copyright p a:hover {

  color: #ffffff;

}



@media (max-width: 768px) {

  .footer .copyright p,

  .footer .copyright .col-md-6:last-child p {

    margin: 5px 0;

    text-align: center;

  }

}



/*******************************/

/********* appointment CSS **********/

/*******************************/

.appointment_area {

  padding-top: 20px;

  position: fixed;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  background: rgba(0, 0, 0, 0.7);

  transition: opacity 500ms;

  visibility: hidden;

  opacity: 0;

  z-index:100;

}

.appointment_area:target {

  visibility: visible;

  opacity: 1;

}

@media (max-width: 767px) {

  .appointment_area {

    padding-top: 100px;

  }

}

@media (min-width: 768px) and (max-width: 991px) {

  .appointment_area {

    padding-bottom: 100px;

  }

}

.appointment_area .opacity_icon {

  position: absolute;

  bottom: -126px;

  z-index: -1;

}

.appointment_area .opacity_icon i {

  font-size: 478px;

  color: #fefcf6;

}

@media (max-width: 767px) {

  .appointment_area .appiontment_thumb img {

    width: 100%;

  }

}

.appointment_area .appointment_info {

  position: relative;

  z-index: 1;

  margin: 70px auto;

  padding: 20px;

  background: #fff;

  border-radius: 5px;

  width: 90%;

  position: relative;

  transition: all 5s ease-in-out;

}

.appointment_area .appointment_info .close {

  position: absolute;

  top: 20px;

  right: 20px;

  transition: all 200ms;

  font-size: 30px;

  font-weight: bold;

  text-decoration: none;

  color: var(--primary);

}

.appointment_area .appointment_info  .close:hover {

  color:var(--background);

}

@media (max-width: 767px) {

  .appointment_area .appointment_info {

    margin-bottom: 40px;

    margin-top: 40px;

  }

}

.appointment_area .appointment_info h3 {

  font-size: 40px;

  font-weight: 700;

  color: #1f1f1f;

}

.appointment_area .appointment_info p {

  font-size: 16px;

  color: #727272;

  margin-top: 13px;

  margin-bottom: 40px;

}

.appointment_area form input {

  width: 100%;

  height: 60px;

  font-size: 16px;

  border: none;

  border-bottom: 2px solid var(--primary);

  margin-bottom: 26px;

  padding-bottom: 7px;

}

.appointment_area form input::placeholder {

  font-size: 16px;

  padding-left: 5px;

  color: #919191;

  font-weight: 400;

}

.appointment_area form textarea {

  width: 100%;

  height: 100px;

  font-size: 16px;

  padding-left: 5px;

  border: none;

  border-bottom: 2px solid var(--primary);

  margin-bottom: 30px;

  padding-bottom: 7px;

  margin-top: 10px;

}

.appointment_area form textarea::placeholder {

  font-size: 16px;

  color: #919191;

  font-weight: 400;

}

.appointment_area form .appoinment_button button {

  width: 100%;

  font-size: 18px;

  padding: 16px 0px 16px 0px;

  background: #fff;

  color: var(--primary);

  border: 2px solid var(--primary);

  text-align: center;

}

.appointment_area form .appoinment_button button:hover {

  color: var(--heaven);

  border: 2px solid var(--primary);

  background-color: var(--primary);

  text-align: center;

}







/* =============Careers Css================== */

.career h1{

  font-size: 50px;

}

.carrer1 img{

  max-width: 100%;

}

.career .blue{

  color: var(--primary);

  font-weight: 500;

}



.hermove-banner img{

  background-repeat: no-repeat;

  background-size: cover;

  /* object-fit: cover; */

  width: 100%;

  height: 250px;

}

.wrapper1 img{

  width: 100%;

  height: 550px;

}





/* =======================Terms&condition======================== */

.active.link-secondary{

  font-weight: bold;

  color:#fff;

}

.condition-tab p{

  line-height: 30px;

}

.condition-tab li{

  line-height: 40px;

}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {

  color: #6699ff;

  background-color: #fff;

  font-weight: 500;

  border-color: #dee2e6 #dee2e6 #fff;

}



/* ===================publication css===================== */



.title2 p {

color:#fff;

}





.intro {

font-size:16px;

max-width:500px;

margin:0 auto;

}

.intro p {

margin-bottom:0;

}



.people2 {

padding:50px 0;

cursor: pointer;

}

.item2 {

margin-bottom:30px;

}



.item2 .box2 {

text-align:center;

background-repeat:no-repeat;

background-size:cover;

background-position:center;

height:200px;

position:relative;

overflow:hidden;

}



.box2 .cover2 {

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

background-color:rgba(31,148,255,0.75);

transition:opacity 0.15s ease-in;

opacity:0;

padding: 40px 20px;

text-align: center;

color:#fff;

text-shadow:1px 1px 1px rgba(0,0,0,0.15);

}



.box2:hover .cover2 {

opacity:1;

}



.item2 .name2 {

font-weight:bold;

font-size: 16px;

margin-bottom:8px;

}



.item2 .title2 {

text-transform:uppercase;

font-weight:bold;

color:#bbd8fb;

letter-spacing:2px;

font-size:12px;

margin-bottom:20px;

}

.item2 .title2{

  color: #fff;

}

.public{

  background-color: #fff;

  border: 2px solid #6699ff;

  padding: 8px 10px;

  color: #6699ff;

}

.public:hover{

  color:#fff ;

  border: 2px solid #6699ff;

  background-color: #6699ff;

}







/* ==============dorpdown css================= */

 .mega-menu {

  position: absolute;

  left: 0;

  width: 100vw;

  top: 65px;

  border-top: 1px solid #ffffff;

  opacity: 0;

  visibility: hidden;

  transition: all 0.4s ease-out 0s, visibility 0.1s linear 0s;

}

.mega-menu .content {

  background: #e9ecef;

  padding: 1rem;

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 1rem;

  width: 100%;

  justify-content: space-between;

  -webkit-box-shadow: 0 20px 50px 0 rgb(0 0 0 / 5%);

  box-shadow: 0 20px 50px 0 rgb(0 0 0 / 5%);

}

.blog .content {

  grid-template-columns: repeat(4, 1fr);

}

.content .col {

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  line-height: 3rem;

}



.content .col .img-wrapper {

  display: block;

  position: relative;

  width: 100%;

  height: 20vw;

  overflow: hidden;

}



.content .col .img {

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

}



.content .col img {

  width: 100%;

  transition: transform 0.3s ease-in-out;

}



.content .col .img-wrapper:hover img {

  transform: scale(1.1);

}



.content .col .menu-title {

  color: #ff5722;

  font-size: 1.2rem;

  line-height: 3rem;

  font-weight: bold;

}



.content .col p {

  line-height: 1.2rem;

  margin-top: 5px;

  color: #112f48;

}



.content .col .mega-links {

  border-left: 1px solid #3c3c3c;

}



.content .col .read-more {

  font-size: 16px;

  display: flex;

  padding-top: 1rem;

  color: #03a9f4;

  transition: color 0.3s ease;

  justify-content: flex-end;

  padding-right: 10px;

}



.col .mega-links li,

.col .mega-links li a {

  padding: 0 1rem;

}

.menu-items li:hover .mega-menu {

  opacity: 1;

  visibility: visible;

}



.menu-items li:hover .mega-menu {

  opacity: 1;

  visibility: visible;

}



.content .col .read-more:hover {

  color: #ff5722;

}



.publication_button{

  display: flex;

  margin: auto;

  padding: 8px 15px;

  border: 2px solid #03a9f4;

  background-color: #fff;

  color: #03a9f4;

}

.publication_button:hover{

  background-color: #03a9f4;

  color: #fff;

  border:2px solid #03a9f4;

}







/* ====================Slider===================== */

/* Google Fonts - Poppins */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');



*{

  margin: 0;

  padding: 0;

  box-sizing: border-box;

  font-family: 'Poppins', sans-serif;

}

body{

  min-height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

  background-color: #EFEFEF;

}

.slide-container{

  max-width: 1120px;

  width: 100%;

  padding: 40px 0;

}

.slide-content{

  margin: 0 40px;

  overflow: hidden;

  /* border-radius: 25px; */

}

.card{

  /* border-radius: 25px; */

  background-color: #FFF;

}

.image-content,

.card-content{

  display: flex;

  flex-direction: column;

  align-items: center;

  padding: 10px 14px;

}

.image-content{

  position: relative;

  row-gap: 5px;

  padding: 25px 0;

}

.overlay{

  position: absolute;

  left: 0;

  top: 0;

  height: 100%;

  width: 100%;

  background-color: #4070F4;

  /* border-radius: 25px 25px 0 25px; */

}



/* .swiper-slide{

  width: 250px !important;

} */

.card-image{

  position: relative;

  height: 150px;

  width: 150px;

  border-radius: 50%;

  background: #FFF;

  padding: 3px;

}

.card-image .card-img{

  height: 100%;

  width: 100%;

  object-fit: cover;

  border-radius: 50%;

  border: 4px solid #4070F4;

}

.name{

  font-size: 18px;

  font-weight: 500;

  color: #333;

}

.description{

  font-size: 14px;

  color: #707070;

  text-align: center;

}

.button{

  border: none;

  font-size: 16px;

  color: #FFF;

  padding: 8px 16px;

  background-color: #4070F4;

  /* border-radius: 6px; */

  margin: 14px;

  cursor: pointer;

  transition: all 0.3s ease;

}

.button:hover{

  background: #265DF2;

}



.swiper-navBtn{

  color: #6E93f7;

  transition: color 0.3s ease;

}

.swiper-navBtn:hover{

  color: #4070F4;

}

.swiper-navBtn::before,

.swiper-navBtn::after{

  font-size: 35px;

}

.swiper-button-next{

  right: 0;

}

.swiper-button-prev{

  left: 0;

}

.swiper-pagination-bullet{

  background-color: #6E93f7;

  opacity: 1;

}

.swiper-pagination-bullet-active{

  background-color: #4070F4;

}



@media screen and (max-width: 768px) {

  .slide-content{

    margin: 0 10px;

  }

  .swiper-navBtn{

    display: none;

  }

}





/* ==================================== */

.mega_menu{

	width: 100%;

	/* height: 60px; */

}



.mega_menu ul{

	width: 100%;

	height: 100%;

	background: #000000;

	text-align: center;

	/* line-height: 59px; */

	position: relative;

}



.mega_menu ul li{

	display: inline-block;

	/* margin: 0 15px; */

	/* padding: 0 15px; */

}



.mega_menu ul li a{

	text-decoration: none;

	color: #333;

	/* letter-spacing: 5px; */

	/* font-size: 12px; */

	display: block;

}



.mega_menu ul li .sub_menu{

	position: absolute;

	background: #fff;

  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

	width: 1200px;

	left: -375%;

	top: 40px;

	padding: 20px 15px;

  z-index: 1000;

	display: flex;

	justify-content: space-around;

  text-align: start;

	visibility: hidden;

	line-height: 24px;

}

/* .mega_menu ul li:hover{

	background: #2c2c2c;

} */



.mega_menu ul li:hover a{

	color: #333;

}



.mega_menu ul li:hover .sub_menu{

	visibility: visible;

}



.mega_menu ul li .sub_menu a{

	color: #333;

	margin-top: 15px;

  font-weight: 500;

  text-transform: uppercase;

  font: 'Poppins', sans-serif;;

	font-size: 14px;

}

.mega_menu ul li .sub_menu a:hover{

  color: #6699ff;

  cursor: pointer;

  font-weight: 500;

}

.mega_menu ul li .sub_menu .active{

  color: #6699ff;

}

@media (max-width: 1920px) {

  .mega_menu ul li .sub_menu{

    width: 1600px !important;

    left: -375%;

  }

}

@media (max-width: 1440px) {

  .mega_menu ul li .sub_menu{

    width: 1200px !important;

    left: -375%;

  }

}

@media (max-width: 1024px) {

  .mega_menu ul li .sub_menu{

    width: 900px !important;

    left: -380% !important;

    top: 66px;

   }

}

@media (max-width: 768px) {

  .mega_menu {

    width: 100%;

    margin-left: -19.4rem ;

  }

  .mega_menu ul li .sub_menu{

    width: 641px !important;

    left: 57% !important;

    top: 43px;

   }

   .container-fluid, .container-lg, .container-md, .container-sm, .container-xl {

    overflow: auto;

 }



}

@media (max-width: 320px) {

  .mega_menu {

    width: 100%;

    margin-left: -5.4rem ;

   

  }

  .mega_menu ul li .sub_menu{

    display: block;

    width: 222px !important;

    top: 43px;

    height: auto;

  }

  .container-fluid, .container-lg, .container-md, .container-sm, .container-xl {

   overflow: auto;

}



}

@media (max-width: 375px) {

  .mega_menu {

    width: 100%;

    margin-left: -7.1rem !important;

   

  }

  .mega_menu ul li .sub_menu{

    display: block;

    width: 222px !important;

    top: 43px;

    height: auto;

  }

  .container-fluid, .container-lg, .container-md, .container-sm, .container-xl {

   overflow: auto;

}



}

@media (max-width: 425px) {

  .mega_menu {

    width: 100%;

    float: left;

    margin-left: -8.6rem ;

   

  }

  .mega_menu ul li .sub_menu{

    display: block;

    width: 222px !important;

    top: 43px;

    height: auto;

  }

  .container-fluid, .container-lg, .container-md, .container-sm, .container-xl {

   overflow: auto;

}



}

.fables-bussiness-section {
    background-image: url(../img/family-law.png);
    background-size: cover;

}
.fables-bussiness-caption {
    background-color: rgba(255, 255, 255, .9);
    padding: 15px;
}

.serviceList {
    padding: 0.3rem 1rem 1rem;
}

.serviceList ul {
    list-style: none;
    font-weight: 400;
    color: black;
}

.serviceList ul li:before {
    content: "\2022";
    color: var(--color-red);
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}


/* variables */

.tabordion {
  position: relative;
  color: #30455c;
  margin: auto;
  padding: 50px 20px;
}
 .tabordion section {
  display: block;
  width: 100%;
  left: 0;
}
 .tabordion section input[name=sections] {
  left: -9999px;
  position: absolute;
  /*top: -9999px;*/
}
 .tabordion section input[name=sections]:checked + label {
  background: var(--primary);
  color:#fff;
}
 .tabordion section input[name=sections]:checked ~ article {
  display: block;
}
 .tabordion section label {
  /*background: rgba(220, 231, 235, 0.5);*/
  border: 1px solid var(--primary);
 
  font-weight: 700;
  color: var(--secondary);
  cursor: pointer;
  display: block;
  font-size: 1.2em;
  font-weight: bold;
  padding: 1em 0.83em;
  position: relative;
  width: 100%;
  z-index: 100;
}
 .tabordion section article {
  display: none;
  left: 0;
  width: 100%;
 /* padding-top: 50px;*/
  position: relative;
  top: 50px;
  /*padding:50px;*/
  /*background: #fefffa;
*/  /*font-family: "Ubuntu", sans-serif;
  font-weight: 300;
  line-height: 1.7;*/
}

 .tabordion section article:after {
  background-color: transparent;
  bottom: 0;
  content: "";
  display: block;
  left: -229px;
  position: absolute;
  top: 0;
  width: 220px;
  z-index: 1;
}

@media all and (min-width: 768px) {
   .tabordion {
    /*width: 80%;*/
    color: #30455c;
  }
   .tabordion section label {
   /* background: rgba(220, 231, 235, 0.5);
    border-left: 1px solid #22bec6;*/
    padding: 10px 1%;
    width: 35%;
  }
   .tabordion section article {
    position: absolute;
    width: 60%;
    left: 38%;
  }
}


/* ========== 7 august changes ===== */

.carddy ul li{

  list-style: none;
  color: #999999;

}

.carddy .service-item {

  position: relative;

  width: 100%;

  text-align: center;

  /* border: 2px solid var(--background); */

  /* background: var(--heaven); */

  background: rgb(57 71 73);

  margin-bottom: 30px;

  height: 450px;

}

.disclaimer h1{
  text-align: start;
}

.disclaimer p{
  margin-top: 0;
  margin-bottom: 1rem;
  padding: 7px;
  text-align: justify;
  color: #999999;
}