@font-face {
  font-family: "pangramRegular";
  src: url(../fonts/Pangram-Regular.otf);
}

@font-face {
  font-family: "lightbox21-regular-1";
  src: url(../fonts/lightbox21-regular-1.otf) format("opentype");
}

/* OTF */
body {
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: normal;
  /* font-family: 'Lora', serif; */
  /* font-family: "lightbox21-regular-1", Arial, sans-serif; */
  /* font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; */
}

.ff-system {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

ul {
  list-style: none;
  padding: 0;
}

h1, h2, h3, h4, h5 {
  font-weight: bold;
}

p {
  color: #303030;
  /* font-family: 'Quicksand', sans-serif; */
  /* font-family: "lightbox21-regular-1"; */
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: normal;
}

li {
  letter-spacing: 1px;
}

a {
  color: #111;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
  color: #e1bb1c;
}

a:focus {
  text-decoration: none;
  color: #e1bb1c;
}

/* .enquiry_form {
  background-color: #000000bd;
  border: 1px solid #dddcdc;
  border-radius: 15px;
} */

.enquiry_form select option {
  /* background-color: #ffffff; */
  /* Background of dropdown options */
  /* color: #000; */
}

.cost_estimate_button {
  /* height: 80px; */
  font-size: 30px;
  font-weight: bold;
  background-color: transparent;
  border: 2px solid #fff;
}

@media screen and (max-width:768px) {
  .cost_estimate_button {
    font-size: 24px !important;
  }
}

.cost_estimate_button:hover {
  background-color: rgb(221, 144, 0);
  border: 2px solid #fff;
}

/* .enquiry_form input, .enquiry_form textarea, .enquiry_form .form-select {
  background-color: transparent;
  color: #fff;
  border: 1px solid #fff;
} */

/* .enquiry_form input::placeholder, .enquiry_form textarea::placeholder {
  color: #d1d1d1;
} */
.enquiry_modal {
  /* background: #4871b7; */
  color: #000;
}

.enquiry_header {
  /* background: #ffc003; */
  color: #000;
}

.enquiry_form .form-check .form-check-input:checked {
  background-color: #000000;
  border-color: #fff;
}

.button {
  background: #fff;
  color: #000 !important;
  display: inline-block;
  transition: 0.3s;
  padding: 16px 35px 16px 35px;
  font-weight: bold;
  letter-spacing: 1px;
}

.button:hover {
  background: #e1bb1c;
  color: #fff !important;
}

.button_1 {
  background: #e1bb1c;
  color: #fff !important;
  display: inline-block;
  transition: 0.3s;
  padding: 16px 35px 16px 35px;
  font-weight: bold;
  letter-spacing: 1px;
}

.button_1:hover {
  background: #252531;
  color: #fff !important;
}

.button_2 {
  background: none;
  color: #000 !important;
  display: inline-block;
  transition: 0.3s;
  padding: 16px 35px 16px 35px;
  font-weight: bold;
  letter-spacing: 1px;
  border: 1px solid #0d6efd;
}

.button_2:hover {
  background: #073f94;
  color: #fff !important;
}

.button_3 {
  background: #fff;
  color: #000 !important;
  display: inline-block;
  transition: 0.3s;
  padding: 16px 35px 16px 35px;
  font-weight: bold;
  letter-spacing: 1px;
  border: 1px solid #e1bb1c;
}

.button_3:hover {
  background: #252531;
  color: #fff !important;
}


.grid figure {
  position: relative;
  float: left;
  overflow: hidden;
  width: 100%;
  text-align: center;
  cursor: pointer;
  border-radius: 15px;
}

figure.effect-jazz figcaption::after,
figure.effect-jazz img {
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
}

figure.effect-jazz:hover img {
  -webkit-transform: scale3d(1.05, 1.05, 1);
  transform: scale3d(1.05, 1.05, 1);
}

.col_brow {
  color: #e1bb1c;
}

.bg_dark {
  background: #252531 !important;
}

.bg_dark_o {
  background: #343444 !important;
}

.bg_brow {
  background: #e1bb1c !important;
}



hr {
  opacity: 1;
  background-color: #a7a7a7;
}

.font_30 {
  font-size: 30px;
}

.font_24 {
  font-size: 24px;
}

.font_20 {
  font-size: 20px;
}

.font_18 {
  font-size: 18px;
}

.font_16 {
  font-size: 16px;
}

.font_14 {
  font-size: 14px;
}

.font_12 {
  font-size: 12px;
}

.font_10 {
  font-size: 10px;
}

.font_8 {
  font-size: 8px;
}

.font_60 {
  font-size: 60px;
}

.font_50 {
  font-size: 50px;
}

.line {
  height: 2px !important;
  width: 60px;
  background-color: #e1bb1c;
}

.p_3 {
  padding-top: 30px;
  padding-bottom: 30px;
}

.border_1 {
  border: 1px solid #f5e4db;
}


.carousel_p .carousel-indicators {
  bottom: -60px !important;
}

.carousel_p {
  padding-bottom: 70px;
}

.icon_line:before {
  display: inline-block;
  width: 50px;
  height: 3px;
  background-color: #e1bb1c;
  vertical-align: middle;
  margin-right: 3%;
  content: "";
}

/*********************header****************/
.nav_hide:after {
  display: none;
}


#header .navbar-brand {
  font-size: 34px;
}

.navbar-collapse {
  align-items: start;
}

#header .nav-link {
  color: #000;
  padding: 10px 10px;
  font-weight: 600;
  letter-spacing: 1px;
  border-radius: 10px;
  font-size: 18px;
}

#header .nav-item {
  margin-right: 2px;
}


#header .active, #header .nav-link:hover, #header .nav-link:focus {
  background-color: #e1bb1c;
  color: #fff;
}

.drop_1 {
  min-width: 250px;
  padding: 0;
  border-radius: 0;
  margin-top: 9px !important;
  border: none;
  box-shadow: 0px 4px 20px -3px rgb(22 36 62 / 15%);
}

.drop_1 a {
  padding-top: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f5e4db;
  color: #000;
  font-weight: bold;
}

.drop_1 a:hover {
  background: #e1bb1c;
  color: #fff;
}


.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 3;
  width: 100% !important;
}

.sticky {
  top: -40px;
  transform: translateY(40px);
  transition: transform .3s;
}

#header .input-group {
  border-bottom: 1px dashed #c0c0c0;
  padding-bottom: 10px;
}

#header .input-group .form-control {
  font-size: 40px;
  color: #f4f4f4;
}

#header .input-group .form-control:focus {
  box-shadow: none;
}

#header ::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: rgba(255, 255, 255, 0.77) !important;
  opacity: 1;
  /* Firefox */
}

#header .btn {
  font-size: 40px;
  color: rgba(255, 255, 255, 0.77);
}

.modal-dialog {
  min-width: 900px;
}

/* .modal-header .btn-close {
  color: #fff !important;
  background: none;
  width: auto !important;
  opacity: 1 !important;
  font-size: 40px;
  margin-bottom: 100px;
} */

/* .fade {
  background-color: #0f1425e6;
  padding-top: 100px;
} */

.drop_conc a {
  /* margin-top: 10px; */
}

/*********************header_end****************/

.header_banner {
  background-image: url(../img/1.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  padding: 100px 50px;
}

.franchise-section {
  background-image: url(../img/backgound_img.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.header_banner .container, .franchise-section .container {
  position: relative;
}

.header_banner::before {
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #000000a9;
}

.franchise-section::before {
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #000000bd;
}

franchise-section

/*********************common****************/
.pages ul li {
  display: inline-block;
}

.pages ul li a {
  display: block;
  color: #0c121d;
  margin: 0 2px;
  width: 40px;
  height: 40px;
  line-height: 38px;
  text-align: center;
  border: 1px solid #f5e4db;
  background: #fff;
}

.pages ul li a:hover {
  background: #e1bb1c;
  border: 1px solid #e1bb1c;
}

.pages ul li a:hover {
  color: #fff !important;
}

.act {
  background: #e1bb1c !important;
  border: 1px solid #e1bb1c !important;
  color: #fff !important;
}

/* footer social icons */
ul.social-network {
  list-style: none;
  display: block;
  margin-left: 0 !important;
  padding: 0;
}

ul.social-network li {
  display: inline-block;
}

/* footer social icons */
.social-network a.icoInstagram:hover {
  background-color: #f505f5;
}

.social-network a.icoFacebook:hover {
  background-color: #3B5998;
}

.social-network a.icoTwitter:hover {
  background-color: #ff333d;
}

.social-network a.icoGoogle:hover {
  background-color: #BD3518;
}

.social-network a.icoVimeo:hover {
  background-color: #0590B8;
}

.social-network a.icoLinkedin:hover {
  background-color: #007bb7;
}

/* footer social icons */
.social-network a.icoInstagram {
  background-color: #f505f5;
}

.social-network a.icoFacebook {
  background-color: #3B5998;
}

.social-network a.icoTwitter {
  background-color: #ff333d;
}

.social-network a.icoGoogle {
  background-color: #BD3518;
}

.social-network a.icoVimeo {
  background-color: #0590B8;
}

.social-network a.icoLinkedin {
  background-color: #007bb7;
}

.social-network a.icoRss:hover i, .social-network a.icoFacebook:hover i, .social-network a.icoTwitter:hover i,
.social-network a.icoGoogle:hover i, .social-network a.icoVimeo:hover i, .social-network a.icoLinkedin:hover i {
  color: #fff;
}

a.socialIcon:hover, .socialHoverClass {
  color: #44BCDD;
}

.social-circle li a {
  display: inline-block;
  position: relative;
  margin: 0 2px 0 2px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  text-align: center;
  width: 40px;
  height: 40px;
}

.social-circle li i {
  margin: 0;
  line-height: 60px;
  text-align: center;
  font-size: 30px;
}

.footer1-child {
  text-align: center;
  padding: 15px;
  background: #fff;
  color: #000;
  border-radius: 15px;
}

#footer .social-circle li i {
  margin: 0;
  line-height: 40px;
  text-align: center;
  font-size: 20px;
}

.social-circle li a:hover i, .triggeredHover {
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -ms--transform: rotate(360deg);
  transform: rotate(360deg);
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  -ms-transition: all 0.2s;
  transition: all 0.2s;
}

.social-circle i {
  color: #fff;
  -webkit-transition: all 0.8s;
  -moz-transition: all 0.8s;
  -o-transition: all 0.8s;
  -ms-transition: all 0.8s;
  transition: all 0.8s;
}

.form-control:focus {
  box-shadow: none;
  border-color: #0049b6;
}

.form-select:focus {
  box-shadow: none;
  border-color: #0049b6;
}

.form-control {
  border-color: #0d6efd;
  box-shadow: none;
  border-radius: 5px;
  /* height: 50px; */
}

.form-select {
  border-color: #0d6efd;
  box-shadow: none;
  border-radius: 0;
  /* height: 50px; */
  color: #777;
}

.shadow_box {
  box-shadow: 0px 4px 20px -3px rgb(22 36 62 / 15%);
}

.carousel-indicators [data-bs-target] {
  background-color: #e1bb1c;
}

.input-group .form-control {
  height: auto;
}

.input-group .form-control:focus {
  box-shadow: none;
}

.form-check .form-check-input:checked {
  background-color: #e1bb1c;
  border-color: #e1bb1c;
}

.form_text {
  height: 150px !important;
}

.offer_m {
  background: #000000f2;
}

.border_dark {
  border-bottom: 2px solid #e1bb1c;
}

.work_2r .progress-bar {
  background: #fff;
  border-radius: 0;
}

.work_2r .progress {
  background-color: #e1bb1c;
  height: 8px;
  overflow: hidden;
  border-radius: 0;
}

/*********************common_end****************/

/*********************team****************/
.team_2i2ir span a {
  width: 40px;
  height: 40px;
  line-height: 40px;
}

.team_2i3 ul li a {
  width: 40px;
  height: 40px;
  line-height: 40px;
}

.team_2i3 ul li a:hover {
  background: #e1bb1c !important;
  color: #fff;
}

.team_2i3 {
  background: #0000009c;
  display: none;
  border-radius: 15px;
}

.team_2im:hover .team_2i3 {
  display: block;
}

/*********************team_end****************/

/*********************blog****************/
.blog_1im:hover .blog_1im1i1 {
  background: #0000009c;
}

.blog_1im2ir {
  margin-top: 12px;
}

/*********************blog_end****************/

/*********************serv****************/
.serv_2i {
  box-shadow: 0 0 10px #90a5ff;
  border-radius: 15px;
  height: 100%;
  background-color: #f8f9fa;
}

.serv_2i2 span {
  width: 80px;
  height: 80px;
  line-height: 80px;
}

.serv_2i3 {
  bottom: 20px;
  width: 100%;
  left: 5%;
  border-radius: 15px;
  box-shadow: 0 0 10px #fff;
}

.serv_2i:hover .serv_2i2 {
  background: #0000009c;
}

/*********************serv_end****************/


/*********************footer****************/
#footer {
  background-image: url(../img/1.jpg);
  background-position: center;
}

#footer h3 {
  font-size: 34px;
}

#footer h3 {
  font-size: 34px;
}

.footer_1i ul li a {
  background: #3a3737;
}

/*********************footer_end****************/

.about_pgo .about_pgoi {
  box-shadow: 0 0 10px #fff;
  border-radius: 15px;
}

.about_pgo .about_pgoi:hover {
  transform: scale(1.05);
}

@media screen and (max-width : 767px) {
  .navbar-collapse {
    max-height: 450px;
    overflow-y: scroll;
    border-top: 1px solid #f5e4db;
    margin-top: 15px;
  }

  #header .nav-link {
    font-size: 24px;
    border-bottom: 1px solid #f5e4db;
    padding-top: 10px;
    padding-bottom: 10px;
    margin: 0 !important;
    border-left: none;
  }

  .navbar .navbar-toggler {
    box-shadow: none !important;
    background: #fbfbfb;
    border: none;
    border-radius: 0;
    margin-top: 0;
  }

  .drop_1 {
    margin-top: 0 !important;
    min-width: 100%;
  }

  .drop_1 a {
    font-size: 22px;
  }

  .drop_2 {
    margin-top: 0 !important;
    min-width: 100%;
  }

  .sticky .drop_1 {
    margin-top: 0 !important;
  }

  .line {
    margin-left: auto;
    margin-right: auto;
  }

  .pages ul li {
    margin-top: 5px;
    margin-bottom: 5px;
  }

  #top {
    display: none;
  }

  #header .navbar-brand {
    font-size: 26px;
  }

  .modal-dialog {
    min-width: 90%;
  }

  .serv_2i {
    margin-top: 8px;
    margin-bottom: 8px;
  }

  .team_2im {
    margin-top: 8px;
    margin-bottom: 8px;
  }

  .testim_1i1 {
    margin-top: 8px;
    margin-bottom: 8px;
    text-align: center;
  }

  .testim_1i1 p {
    text-align: left;
  }

  .blog_1im {
    margin-top: 8px;
    margin-bottom: 8px;
  }

  .blog_1im2il img {
    width: 30px;
    height: 30px;
  }

  .blog_1im2ir h6 {
    font-size: 14px;
  }

  .blog_1im2ir {
    margin-top: 5px;
  }

  .footer_1i h5 {
    text-align: center;
  }

  .footer_1i h3 {
    text-align: center;
  }

  .footer_1i ul {
    text-align: center;
  }

  .footer_1i {
    margin-top: 8px;
    margin-bottom: 8px;
  }

  .footer_1i p, .footer_1i h6, .footer_1i h6 a {
    font-size: 20px;
  }


  .footer_3ism h6 {
    margin-top: 10px !important;
    font-size: 20px;
  }

  .footer_2 {
    text-align: left !important;
  }

  .centre_o1 h1 .pull-right {
    display: block !important;
    float: none !important;
  }

  .centre_o1 h1 {
    text-align: center;
  }

  .work_2l img {
    height: auto;
  }

  .work_2r {
    margin-top: 15px !important;
  }

  .about_pgi {
    text-align: center;
  }

  .about_pgi p {
    text-align: left;
  }

  .about_pgir {
    margin-top: 15px;
  }

  .offer_l {
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
  }

  .offer_l p {
    text-align: left;
  }

  .offer_r img {
    height: auto;
  }

  .about_pgoi {
    margin-top: 8px;
    margin-bottom: 8px;

  }


  .team_1l {
    text-align: center;
  }

  .team_1r {
    text-align: center !important;
  }

  .team_3r {
    text-align: center !important;
  }

  .team_3l {
    text-align: center !important;
  }

  .serv_2i1 img {
    min-height: 240px;
  }

  .blog_1dt3il .form-control {
    margin-top: 10px;
  }

  .blog_1dt3il {
    text-align: center;
  }
}

@media (min-width:576px) and (max-width:767px) {
  .about_pgi p {
    text-align: center;
  }
}

@media (min-width:768px) and (max-width:991px) {
  .navbar-expand-md {
    flex-wrap: wrap !important;
  }

  #header .navbar-brand {
    font-size: 20px;
  }

  #header .nav-link {
    padding: 10px 8px;
    font-size: 13px;
  }

  .drop_conc a {
    font-size: 13px;
  }

  .drop_1 {
    left: auto !important;
    right: 0 !important;
  }

  .modal-dialog {
    min-width: 90%;
  }

  .serv_2i3 {
    padding: 10px !important;
  }

  .serv_2i1 img {
    min-height: 220px;
  }

  .team_2i1 img {
    min-height: 220px;
  }

  .team_2i2 {
    padding: 10px !important;
  }

  .team_2i2ir span a {
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
  }

  .team_2i2il h5 {
    font-size: 14px;
  }

  .team_2i2il h6 {
    font-size: 13px;
  }

  .team_1r {
    margin-top: 0 !important;
  }

  .blog_1im2il img {
    width: 30px;
    height: 30px;
  }

  .blog_1im2il h6 {
    font-size: 11px;
  }

  .blog_1im2ir h6 {
    font-size: 11px;
  }

  .blog_1im2 {
    padding: 11px !important;
  }

  .blog_1im2ir {
    margin-top: 5px;
  }

  #footer h3 {
    font-size: 18px;
  }

  #footer ul li a {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }

  #footer ul li a i {
    line-height: 30px;
  }

  #about_pg .work_2l img {
    min-height: 680px;
  }
}

@media (min-width:871px) and (max-width:991px) {
  #header .nav-link {
    padding: 10px 10px;
  }
}

@media (min-width:992px) and (max-width:1200px) {
  .navbar-expand-md {
    flex-wrap: wrap !important;
  }

  #header .navbar-brand {
    font-size: 28px;
  }

  #header .nav-link {
    padding: 10px 10px;
  }

  .modal-dialog {
    min-width: 90%;
  }

  .serv_2i3 {
    padding: 10px !important;
  }

  .serv_2i1 img {
    min-height: 220px;
  }

  .team_2i2 {
    padding: 10px !important;
  }

  .team_2i2ir span a {
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
  }

  #footer h3 {
    font-size: 24px;
  }

  #about_pg .work_2l img {
    min-height: 680px;
  }
}

@media (min-width:1201px) and (max-width:1320px) {}


.nav-tabs .nav-link {
  border: none;
  color: #ffe600;
  font-weight: bold;
  font-size: 18px;
}

.nav-tabs .nav-link.active {
  background-color: #fff;
  border: 1px solid #e1bb1c;
  border-bottom: 2px solid #e1bb1c;
  color: #0d6efd;
  font-size: 18px;
  font-weight: bold;
}

.product-card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.3s;
  text-align: center;
  background-color: #fff;
  /* height: 100%; */
}


.product-card:hover {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.product-card img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
  transition: 0.5s;
}

.product-card img:hover {
  transform: scale(1.3);
}

.product-card p {
  margin: 0;
  font-size: 0.9rem;
}

.product-card .price {
  font-weight: bold;
  color: #28a745;
}


.bg-offset-hero::after {
  position: absolute;
  content: '';
  width: 75%;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: -1;
  background-color: #dec119;
  border-radius: 15px;
}

.quote_ {
  opacity: 0.3;
}

.quote_second {
  opacity: 0.1;
}


@media (max-width: 767.98px) {
  .bg-offset-hero::after {
    width: 100%;
  }
}

#testimonials .lead {
  color: #fff;
}

#testimonials .carousel-control-next, #testimonials .carousel-control-prev {
  z-index: 12 !important;
  width: 10%;
}

#testimonials .carousel-control-next-icon, #testimonials .carousel-control-prev-icon {
  width: 1rem;
  height: 1rem;
}

#testimonials .carousel-item::before {
  min-height: 300px;
}

#testimonials .carousel-item .bg-dark-blue {
  min-height: 300px;
}


.process-section {
  margin: 0 auto;
  padding: 50px 20px;
}

.process-section h2 {
  text-align: center;
  margin-bottom: 40px;
  font-size: 2em;
}

.step {
  display: flex;
  align-items: center;
  margin: 20px 0;
}

.step:nth-child(even) {
  flex-direction: row-reverse;
}

.step-content {
  background-color: #fff;
  padding: 20px 30px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgb(92 116 150);
  width: 50%;
}

.step-content:hover {
  transform: scale(1.1);
}


.step-number {
  font-size: 2em;
  font-weight: bold;
  color: #2196f3;
  margin-right: 20px;
  margin-left: 20px;
  width: 40px;
  text-align: center;
}

.step:nth-child(even) .step-number {
  margin-left: 20px;
  margin-right: 20px;
}

@media (max-width: 768px) {
  .step {
    flex-direction: column !important;
    text-align: center;
  }

  .step-number {
    margin: 0 0 10px 0;
  }

  .step-content {
    width: 100%;
  }

  .step {
    margin: 20px 0;
  }
}

.services-section {
  max-width: 1100px;
  margin: auto;
  padding: 60px 20px;
}

.services-section h1 {
  text-align: center;
  font-size: 2.5em;
  margin-bottom: 10px;
}

.services-section p.subtitle {
  text-align: center;
  font-size: 1.2em;
  margin-bottom: 40px;
  color: #666;
}

.human-resources {
  --bg-color: #435b85;
  --bg-color-light: #f1f7ff;
  --text-color-hover: #4C5656;
  --box-shadow-color: rgba(220, 233, 255, 0.48);
}

.service {
  background: #fff;
  padding: 15px;
  border-radius: 10px;
  margin-bottom: 30px;
  box-shadow: 0 2px 8px rgb(92 116 150);
  text-align: center;
  height: 100%;
  width: 100%;
  /* transition: background-color 0.3s ease; */
  position: relative;
  z-index: 1;
  transition: all 0.3s ease-out;
}

.main-service {
  width: 100%;
  height: 100%;
  padding: 20px;
  border-radius: 10px;
  background: #fff;
  border: 2px solid var(--bg-color);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
  transition: all 0.3s ease-out;
}

.service:hover {
  transform: translateY(-5px) scale(1.005) translateZ(0);
  box-shadow: 0 0px 15px rgba(0, 0, 0, 0.11),
    0 0px 15px var(--box-shadow-color);
}

.service:hover .overlay {
  transform: scale(4) translateZ(0);
}

.service:hover .main-service {
  border-color: #000;
  background: #0d6efd;
}

.service:hover .service-icon {
  box-shadow: 0 0 15px #fff;
  background-color: #fff;
}

.service:hover h2, .service:hover p {
  color: #fff;
}

.service-content {
  margin-left: 15px;
  text-align: justify;
}

.team_2im {
  border-radius: 15px;
  box-shadow: 0 0 10px #0d6efd;
}

.team_2i2 {
  border-radius: 15px;
}

.team_2i2il h5 {
  font-size: 24px;
}

.team_2i2il h6 {
  font-size: 20px;
  color: #0d6efd !important;
}


.overlay {
  background: var(--bg-color);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  transition: transform 0.3s ease-out;
}

.service:hover .service-icon {
  animation: spin 0.5s linear;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.service-icon {
  width: 100px;
  height: 100px;
  background-color: #2196f3;
  color: white;
  font-size: 50px;
  margin: 0px auto 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
}

.service-content h2 {
  margin: 0 0 10px;
  font-size: 1.5em;
}

.service-content p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: #000;
}

@media (max-width: 768px) {
  .service {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .service-icon {
    margin-bottom: 15px;
  }

  .service-content h2 {
    font-size: 1.3em;
  }
}

.progressContainer {
  position: relative;
  padding: 50px 20px;
  /* max-width: 1000px; */
  margin: auto;
}

.progresss {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.progresss::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 4px;
  background-color: #ccc;
  transform: translateX(-50%);
}

.progress__item {
  position: relative;
  width: 50%;
  /* padding: 20px 40px; */
  box-sizing: border-box;
}

.progress__item:nth-child(odd) {
  left: 0;
  padding: 20px 40px 20px 20px;
  text-align: right;
}

.progress__item:nth-child(even) {
  left: 50%;
  padding: 20px 20px 20px 40px;
  text-align: left;
}

.progress__item::before {
  content: "";
  position: absolute;
  top: 30px;
  width: 30px;
  height: 30px;
  background: #ffc107;
  border-radius: 50%;
  border: 3px solid white;
  z-index: 1;
}

.progress__item:nth-child(odd)::before {
  right: -15px;
}

.progress__item:nth-child(even)::before {
  left: -15px;
}

.progress__title {
  font-weight: bold;
  color: #fff;
  font-size: 30px;
  margin: 0 0 15px;
  border-bottom: 3px solid #fff;
}

.progress__info {
  font-size: 16px;
  color: #fff;
  margin: 0 0 10px;
  text-align: justify;
}

.list_info {
  font-size: 16px;
  color: #fff;
  margin: 4px 0;
}

/* Responsive for mobile */
@media screen and (max-width: 768px) {
  .progress__item::before {
    width: 20px;
    height: 20px;
  }

  .progress__item,
  .progress__item:nth-child(even),
  .progress__item:nth-child(odd) {
    left: 0 !important;
    width: 100%;
    text-align: left;
    padding-left: 30px;
  }

  .progresss::before {
    left: 20px;
  }

  .progress__item::before {
    left: 10px !important;
    right: auto;
  }

  .progressContainer {
    padding: 50px 5px;
  }

  .progress__item:nth-child(odd) {
    padding: 20px 20px 20px 30px;
  }

}

.progress__item4 table td {
  text-align: left;
  font-weight: 500;
  color: #fff;
  font-family: 'Quicksand', sans-serif;

}

.float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 40px;
  left: 40px;
  background-color: #25d366;
  color: #FFF;
  border-radius: 50px;
  text-align: center;
  font-size: 30px;
  box-shadow: 2px 2px 3px #999;
  z-index: 100;
}

.my-float {
  margin-top: 16px;
}

/* Container */
/* Base: Always expanded on mobile */
.social-nav {
  position: fixed;
  right: 0;
  bottom: 35%;
  width: 160px;
  z-index: 1000;
  transition: width 0.3s ease;
}

/* List Items */
.social-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.social-nav li {
  position: relative;
  height: 50px;
  margin-bottom: 10px;
}

/* Hover effect on individual item */
.social-nav li a:hover {
  background-color: yellow !important;
  color: #000;
}

/* Anchor */
.social-nav li a {
  display: flex;
  align-items: center;
  color: white;
  height: 100%;
  width: 100%;
  padding: 10px;
  font-size: 16px;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  transition: all 0.3s ease;
  overflow: hidden;
  white-space: nowrap;
}

/* Icons */
.social-nav li a i {
  font-size: 26px;
  width: 30px;
}

/* Span (Text) */
.social-nav li a span {
  margin-left: 10px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0;
  transform: translateX(10px);
  transition: all 0.3s ease;
}

/* Backgrounds */
.social-nav .facebook a {
  background: #dc3545;
}

.social-nav .twitter a {
  background: #1DA1F2;
}


/* Desktop only: show-hide behavior */
@media (min-width: 768px) {
  .social-nav {
    width: 40px;
  }

  .social-nav:hover {
    width: 150px;
  }

  .social-nav li a span {
    opacity: 0;
    transform: translateX(10px);
  }

  .social-nav:hover li:nth-child(1) a span {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.1s;
  }

  .social-nav:hover li:nth-child(2) a span {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.2s;
  }
}

@media screen and (max-width:768px) {
  .social-nav {
    right: 5px !important;
    width: 150px !important;
    bottom: 40%;
  }

  .social-nav li a span {
    opacity: 1;
    transform: translateX(0px);
  }

  .social-nav li a {
    border-radius: 10px !important;
  }
}

#main_fa_form {
  display: none;
}

.image-gallery img {
  position: relative;
  overflow: hidden;
  top: 0;
  left: 0;
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}


.image-gallery .column {
  -ms-flex: 33.33%;
  /* IE10 */
  flex: 33.33%;
  max-width: 33.33%;
  padding: 10px;
}

.image-gallery .column img {
  margin-top: 20px;
  vertical-align: middle;
}

.image-gallery #overlay:hover {
  overflow: hidden;
  top: 0;
  left: 0;
  opacity: 0.7;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}

@media screen and (max-width: 800px) {
  .image-gallery .column {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .image-gallery .column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}

.wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 100%;
  /* height: 260px; */
  /* margin: 50px auto; */
  padding: 10px;
  transition: transform 0.3s ease;
}

.wrapper:hover {
  transform: translateY(-5px);
}

.orange-border {
  background-image: linear-gradient(130deg, #F88D32, #F9BC4F);
  position: absolute;
  z-index: 1;
  transition: all 0.5s ease;
}

.orange-top,
.orange-left {
  background-color: transparent;
}

.orange-top {
  width: 100px;
  height: 10px;
  top: 0;
  left: 0;
}

.orange-left {
  width: 10px;
  height: 100px;
  top: 0;
  left: 0;
}

.wrapper:hover .orange-left {
  animation: leftgrow 0.5s forwards;
}

.wrapper:hover .orange-top {
  animation: topgrow 0.5s forwards;
}

.white-card {
  display: block;
  position: relative;
  background-color: white;
  text-align: center;
  width: 100%;
  height: 100%;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  z-index: 2;
  padding: 10px;
  text-decoration: none;
}

.white-card img {
  width: 100%;
  /* height: 140px; */
  object-fit: cover;
  border-radius: 5px;
}

.category {
  font-size: 18px;
  color: #222;
  font-weight: 700;
  margin: 15px 0 10px;
}

.CTA {
  text-transform: uppercase;
  padding: 10px 30px;
  color: #FF8D00;
  font-size: 14px;
  font-weight: 600;
  border: 2px solid #FF8D00;
  border-radius: 25px;
  display: inline-block;
  transition: all 0.3s ease;
}

.CTA:hover {
  background-color: #FF8D00;
  color: white;
}

/* Animations */
@keyframes leftgrow {
  0% {
    height: 100px;
    width: 10px;
  }
  40% {
    height: 100%;
    width: 10px;
  }
  100% {
    width: 100%;
    height: 100%;
  }
}

@keyframes topgrow {
  0% {
    width: 100px;
    height: 10px;
  }
  60% {
    width: 100%;
    height: 10px;
  }
  100% {
    width: 100%;
    height: 100%;
  }
}