/*--------------------- Copyright (c) 2020 ----------------------- 

[Comman Stylesheet] 

Project: Multifarious Services

Version: 1.0.0 

Author: Kamleshyadav

-------------------------------------------------------------------*/



/*------------------------------------------------------------------

[Table of contents]



1. Global CSS

2. Top Button CSS

3. PreLoader CSS

4. Search 

5. Header CSS

6. Responsive CSS



------------------------------------------------------------------*/



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

    1. Global CSS

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



:root {

  --main-black: #000000;

  --main-bg-color: #ffffff;

  --main-bg1-color: #f4f7fc;

  --off-gray: #cdd5e0;

  --main-color: #5350ff;

  --main-txt-color: #707070;

  --main-link-color: #222222;

  --main-border-color: #ececec;

  --main-comman-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);

  --main-gym-text: #666565;

  --main-gym-color1: #f6466c;

  --main-gym-color2: #ff6183;

  --main-gym-bg: #f5f5f5;

  --main-gym-color3: #fd5c7f;

  --main-gym-light: #f4f3f3;

  --main-gym-border: #dbe7eb;

  --main-table-color: #adaec1;

  --main-rating-color: #ffd925;

  --main-paint-color: var(--renk);

  --main-paint-color1: #37b7da;

  --main-paint-color2: #1394b7;

  --main-paint-color3: #06aa9c;

  --main-paint-color4: #d958ce;

  --main-paint-footer: #c4c4c4;

  --main-black-dark: #111111;

  --main-black1: #2a2a2a;

  --main-black2: #686868;

  --main-black3: #6a6a6a;

  --main-gray: #979797;

  --main-gray-light: #e0e0e0;

  --main-green-color: #80b236;

  --main-green-light: #8dba4a;

  --main-green-medium: #77a433;

  --main-green-bg: #6f9b2d;

  --main-gol-txt-color: #757c7e;

  --main-gol-title-color: #42445c;

  --main-gray-color: #d7d7d7;

  --main-gray-border: #6b6b6b;

  --main-light-blue: #e3eaf2;

  --main-vot-text-color: #8e8e8e;

  --main-charrey-color: #c24747;

  --main-darkBlue-color: #181d29;

  --main-gray-dark: #60636b;

  --main-gray-text: #cbcbcb;

  --main-gray-bg: #faf8f7;

  --main-gray-version: #d8d8d8;

  --main-gray-version2: #e9e3e0;

  --main-pink-color: #f9ecec;

  --main-dark-red: #ab3e3e;

  --main-dark-red2: #b74343;

  --main-black4: #1c1c1c;

  --main-royal-red: #f95759;

  --main-blur-red: #ea5254;

  --main-royal-blue: #396cf0;

  --main-royal-light-blue: #4b7dff;

  --main-lightBlue: #608cff;

  --main-lightBlue-version: #4d7bf2;

  --main-royal-light: #cfd7e2;

  --main-black5: #333333;

  --main-gray-version3: #647589;

  --main-gray-version4: #efefef;

  --main-gray-version5: #929292;

  --main-gray-version6: #a6acb5;

  --main-gray-version7: #f4f9fc;

  --main-gray-version8: #a0aab1;

  --main-gray-version9: #d8e1ea;

  --main-gray-version10: #67686d;

  --main-gray-version11: #25272e;

  --main-gray-version12: #e7e7e7;

  --main-gray-version13: #3b3d43;

  --main-green-version1: #07ff07;

  --main-blue-version1: #000022;

  --main-green-version2: #2b7e78;

  --main-green-version3: #6b8181;

  --main-green-version4: #eff6f6;

  --main-green-version5: #ebf5f4;

  --main-green-version6: #93bbb4;

  --main-green-version7: #f5fbfb;

  --main-green-version8: #738787;

  --main-wed-pink: #f199a3;

  --main-wed-pink-bg: #fff7f1;

  --main-pink-version1: #f5ebe3;

  --main-pink-version2: #e6be9f;

  --main-pink-version3: #f7eae0;

  --main-brown-version1: #b78e70;

  --main-orange-version1: #fb9d5c;

  --main-orange-version2: #ee8c48;

  --main-orange-version3: #fef5ee;

  --main-gray-version14: #909090;

  --main-gray-version15: #ededed;

  --main-gray-version16: #eaeaea;

  --main-gray-version17: #c0c0c0;

  --main-gray-version18: #151515;

  --main-off-white: #f9f9f9;

  --main-black6: #232323;

  --main-blue-version2: #ced7e1;

  --main-blue-version3: #2c3f51;

  --main-gray-version19: #9fa9b4;

  --main-gray-version20: #f7f7f7;

  --main-gray-version21: #d0d0d0;

  --main-gray-version22: #4c4c4c;

  --main-gray-version23: #a1abb6;

  --main-gray-version24: #f6fbff;

  --main-red-version1: #ff1944;

  --main-yellow: #ffd40e;

  --main-gray-version25: #a4a3a3;

  --main-gray-version26: #3c3c3f;

  --main-gray-version27: #333336;

  --main-gray-version28: #68686a;

  --main-gray-version29: #e8e8e8;

  --main-gray-version30: #f6f6f6;

  --main-gray-version31: #363638;

  --main-gray-version32: #29292c;

  --main-gray-version33: #f2f2f2;

  --main-brown-version2: #a49360;

  --main-black7: #222225;

  --main-black8: #131417;

  --main-black9: #24262c;

  --main-black10: #2e3036;

  --main-blue-version4: #ecf6f5;

  --main-blue-version5: #d2d9d9;

  --wa-bg-color: #fbfdff;

  --wa-text-color: #969dbe;

  --wa-orange-color: #ffae0d;

  --wa-heading-color: #606989;

  --wa-pueple-color: #9570ee;

}



body {

  font-family: "Open Sans", sans-serif;

  font-weight: 400;

  font-size: 16px;

  line-height: 26px;

  -webkit-font-smoothing: antialiased;

  overflow-x: hidden;

}



a,

a:hover,

a:focus,

button,

button:hover {

  text-decoration: none;

  -webkit-transition: all 0.5s;

  -moz-transition: all 0.5s;

  -ms-transition: all 0.5s;

  -o-transition: all 0.5s;

  transition: all 0.5s;

}



.relative {

  position: relative;

}



img {

  max-width: 100%;

}



input,

textarea,

select,

button,

button:focus,

button:hover,

label,

svg,

svg path,

svg rect,

svg polygon,

img,

a,

:after,

:before,

:hover,

:focus,

.form-control:focus {

  outline: none;

  box-shadow: none;

}



ul,

p {

  padding: 0;

  margin: 0;

  list-style-type: none;

}



h1,

h2,

h3,

h4,

h5,

h6 {

  margin: 0;

  padding: 0;

  text-transform: capitalize;

}



.full_width {

  width: 100%;

}



.padder0 {

  padding: 0;

}



.mb_30 {

  margin-bottom: 30px;

}



.mt_30 {

  margin-top: 30px;

}



.mt_40 {

  margin-top: 40px;

}



.mb_40 {

  margin-bottom: 40px;

}



.mb_50 {

  margin-bottom: 50px;

}



.mb_0 {

  margin: 0;

}



.padder_right {

  padding-right: 0;

}



.padder_left {

  padding-left: 0;

}



.overflow_hidden {

  overflow: hidden;

}



button {

  cursor: pointer;

}



.display_flex {

  display: flex;

  flex-wrap: wrap;

}



.nice-select .list {

  width: 100%;

}



.map_bg {

  background: var(--main-border-color);

}



.white {

  color: var(--main-bg-color);

}



.fullWidth {

  width: 100% !important;

}



iframe {

  width: 100%;

  border: none;

}



.hidden_div {

  visibility: hidden;

  opacity: 0;

  height: 0;

}



.single_tab,

.single_tab.hidden_div {

  -webkit-transition: all 0.8s;

  -moz-transition: all 0.8s;

  -ms-transition: all 0.8s;

  -o-transition: all 0.8s;

  transition: all 0.8s;

}



.response {

  color: var(--red);

  position: absolute;

  right: 12px;

  bottom: 12px;

}



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

    2. Top Button CSS

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



#scroll {

  position: fixed;

  right: 15px;

  bottom: 56px;

  cursor: pointer;

  width: 50px;

  height: 50px;

  text-align: center;

  line-height: 50px;

  -webkit-border-radius: 60px;

  -moz-border-radius: 60px;

  border-radius: 60px;

  z-index: 9;

  visibility: hidden;

  -webkit-transform: translateY(150px);

  -ms-transform: translateY(150px);

  transform: translateY(150px);

}



#scroll.active {

  visibility: visible;

  -webkit-transform: translateY(0);

  -ms-transform: translateY(0);

  transform: translateY(0);

  animation: bounceInDown 2s;

  -webkit-animation: bounceInDown 2s;

  -moz-animation: bounceInDown 2s;

}



@keyframes bounce {

  0%,

  100% {

    transform: translateY(-20px);

  }

  50% {

    transform: translateY(0px);

  }

}



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

    3. PreLoader CSS

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



.preloader_active {

  position: fixed;

  top: 0;

  left: 0;

  overflow: hidden;

  height: 100vh;

  width: 100vw;

  z-index: 99999;

}



.preloader_active .preloader_holder {

  position: absolute;

  left: 0;

  display: block;

  top: 0;

  height: 100%;

  width: 100%;

  z-index: 999999;

}



.preloader_active .preloader_holder .preloader span {

  width: 50px;

  height: 50px;

  display: block;

  border-radius: 50px;

  position: absolute;

  -webkit-animation: loadingCircles 1s infinite;

  -moz-animation: loadingCircles 1s infinite;

  animation: loadingCircles 1s infinite;

  -webkit-animation-fill-mode: forwards;

  -moz-animation-fill-mode: forwards;

  animation-fill-mode: forwards;

  opacity: 0;

}



.preloader_wrapper > .preloader > span:nth-child(2) {

  -webkit-animation-delay: 0.3s;

  -moz-animation-delay: 0.3s;

  animation-delay: 0.3s;

}



.preloader_wrapper > .preloader > span:nth-child(3) {

  -webkit-animation-delay: 0.6s;

  -moz-animation-delay: 0.6s;

  animation-delay: 0.6s;

}



.preloader_holder {

  display: none;

}



.preloader_open {

  position: fixed;

  background-color: transparent;

  z-index: 9999;

  height: 100%;

  width: 100%;

  -webkit-transition: 0.2s all ease;

  -o-transition: 0.2s all ease;

  transition: 0.2s all ease;

  -webkit-transition-delay: 0.5s;

  -o-transition-delay: 0.5s;

  transition-delay: 0.5s;

}



.preloader_open.loaded {

  opacity: 0;

  visibility: hidden;

}



.preloader_open.loaded:before,

.preloader_open.loaded:after {

  width: 0%;

}



.preloader_open:before,

.preloader_open:after {

  content: "";

  position: absolute;

  height: 100%;

  width: 50%;

  -webkit-transition: all 0.5s ease-in-out;

  -o-transition: all 0.5s ease-in-out;

  transition: all 0.5s ease-in-out;

}



.preloader_open:before {

  top: 0;

  left: 0;

}



.preloader_open:after {

  bottom: 0;

  right: 0;

}



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

    4. Search CSS

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



.searchBox {

  position: fixed;

  right: 0;

  bottom: 0;

  top: 0;

  width: 100%;

  left: 0%;

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

  z-index: 99;

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  align-items: center;

  cursor: url(../images/close_search.png), auto;

  -webkit-transform: translateY(-100%);

  -moz-transform: translateY(-100%);

  -ms-transform: translateY(-100%);

  -o-transform: translateY(-100%);

  transform: translateY(-100%);

}



.searchBox.show {

  -webkit-transform: translateY(0%);

  -moz-transform: translateY(0%);

  -ms-transform: translateY(0%);

  -o-transform: translateY(0%);

  transform: translateY(0%);

}



.searchBox.show,

.searchBox {

  -webkit-transition: all 0.5s;

  -moz-transition: all 0.5s;

  -ms-transition: all 0.5s;

  -o-transition: all 0.5s;

  transition: all 0.5s;

}



.searchBoxContainer {

  width: 50%;

  position: relative;

  text-align: end;

  -webkit-transform: translateY(200px);

  -moz-transform: translateY(200px);

  -ms-transform: translateY(200px);

  -o-transform: translateY(200px);

  transform: translateY(200px);

  visibility: hidden;

}



.searchBox.show .searchBoxContainer {

  -webkit-transform: translateY(0px);

  -moz-transform: translateY(0px);

  -ms-transform: translateY(0px);

  -o-transform: translateY(0px);

  transform: translateY(0px);

  visibility: visible;

}



.searchBox.show .searchBoxContainer,

.searchBoxContainer {

  -webkit-transition: all 2s;

  -moz-transition: all 2s;

  -ms-transition: all 2s;

  -o-transition: all 2s;

  transition: all 2s;

}



.search_bar_inner {

  position: relative;

  height: 50px;

}



.search_bar_inner input {

  width: 100%;

  height: 50px;

  padding: 12px 55px 12px 0;

  border: none;

  border-radius: 0;

  background: transparent;

  border-bottom: 2px solid var(--main-bg-color);

  color: var(--main-bg-color);

}



.search_bar_inner input::-webkit-input-placeholder {

  color: var(--main-bg-color);

  opacity: 90%;

}



.search_bar_inner input::-moz-placeholder {

  color: var(--main-bg-color);

  opacity: 90%;

}



.search_bar_inner input:-ms-input-placeholder {

  color: var(--main-bg-color);

  opacity: 90%;

}



.search_bar_inner input:-moz-placeholder {

  color: var(--main-bg-color);

  opacity: 90%;

}



.search_bar_inner button {

  position: absolute;

  right: 3px;

  top: 3px;

  bottom: 3px;

  border: none;

  background: transparent;

  color: var(--main-bg-color);

  width: 45px;

  font-size: 20px;

  border-radius: 26px;

}



.closeBtn {

  margin: 0 0 20px 0;

  display: inline-block;

  padding: 0 15px;

}



.closeBtn svg {

  width: 20px;

  fill: var(--main-bg-color);

}



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

    5. Header CSS

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



.main_menu_parent {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: flex-end;

}



.main_menu_wrapper ul,

.main_menu_wrapper li {

  display: inline-block;

  position: relative;

}



.main_menu_wrapper ul > li > a {

  padding: 12px 20px;

  display: inline-block;

  font-weight: bold;
  font-size:15px;

}



.main_menu_wrapper > ul > li {

  position: relative;

}



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

    6. Responsive CSS

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



@media (min-width: 1200px) {

  .container {

    max-width: 1170px;

    padding: 0;

  }

  .closeBtn {

    display: none;

  }

}



@media (min-width: 991.98px) {

  .menu_btn {

    display: none;

  }

  ul.sub_menu {

    position: absolute;

    width: max-content;

    min-width: 200px;

    top: 60px;

    left: 0;

    z-index: 9;

    transform: translate(20px, 0px);

    transition: 0.3s;

    opacity: 0;

    visibility: hidden;

    border: none;

    border-radius: 0 0 10px 10px;

    padding: 0 0 15px;

    background: var(--main-bg-color);

    box-shadow: 0px 6px 6px 0 rgba(0, 0, 0, 0.06);

  }

  ul.sub_menu li {

    display: block;

    text-align: left;

    padding: 0;

  }

  ul.sub_menu li a {

    display: block;

    padding: 12px 20px 0;

    overflow: hidden;

    position: relative;

  }

  .main_menu_wrapper > ul > li:hover ul.sub_menu {

    transform: translate(0px, 0px);

    visibility: visible;

    opacity: 1;

  }

}



@media (max-width: 991.98px) {

  body {

    font-size: 14px;

    line-height: 20px;

  }

  .menu_btn {

    width: 50px;

    height: 50px;

    display: inline-block;

    text-align: center;

    line-height: 26px;

    border: 1px solid transparent;

    border-radius: 50%;

    padding: 21px 0 16px 0;

  }

  .menu_btn span {

    display: block;

    width: 18px;

    height: 2px;

    transition: 0.3s;

    margin: 0 auto 3px;

    background: var(--main-link-color);

  }

  .menu_btn_wrap.open .menu_btn span:nth-child(2) {

    opacity: 0;

    visibility: hidden;

  }

  .menu_btn_wrap.open .menu_btn span:nth-child(1) {

    transform: translate(0px, 4px) rotate(-48deg);

  }

  .menu_btn_wrap.open .menu_btn span:nth-child(3) {

    transform: translate(0px, -6px) rotate(48deg);

  }

  .main_menu_wrapper {

    position: fixed;

    left: -300px;

    top: 0;

    bottom: 0;

    width: 300px;

    z-index: 999;

    overflow: hidden;

    overflow-y: auto;

    background: var(--main-bg-color);

    box-shadow: 2px 4px 28px 0px rgba(0, 0, 0, 0.1);

  }

  .main_menu_wrapper.open {

    left: 0;

  }

  .main_menu_wrapper,

  .main_menu_wrapper.open {

    -webkit-transition: all 0.5s;

    -moz-transition: all 0.5s;

    -ms-transition: all 0.5s;

    -o-transition: all 0.5s;

    transition: all 0.5s;

  }

  .main_menu_wrapper li {

    width: 100%;

    text-align: left;

    padding-bottom: 15px;

    border-bottom: 1px solid var(--main-border-color);

  }

  .main_menu_wrapper li.has_submenu {

    padding-left: 0;

  }

  .main_menu_wrapper li.has_submenu > ul {

    display: none;

  }

  .main_menu_wrapper li:last-child {

    border: none;

    padding-bottom: 0;

  }

  .main_menu_wrapper li > ul > li {

    padding-left: 25px;

  }

  .main_menu_wrapper ul > li > a {

    padding: 15px 20px 0px;

    width: 100%;

  }

  .main_menu_wrapper li.has_submenu:before,

  .main_menu_wrapper li.has_submenu:after {

    position: absolute;

    bottom: 0;

    content: "";

  }

  .main_menu_wrapper li.has_submenu:after {

    right: 21px;

    width: 12px;

    height: 2px;

    top: 25px;

  }

  .main_menu_wrapper li.has_submenu:before {

    right: 26px;

    width: 2px;

    height: 12px;

    top: 20px;

  }

  .main_menu_wrapper li.has_submenu.open::before {

    content: unset;

  }

  .main_menu_wrapper::-webkit-scrollbar {

    width: 3px;

  }

  .main_menu_wrapper::-webkit-scrollbar-track {

    background-color: var(--main-border-color);

  }

  .main_menu_wrapper::-webkit-scrollbar-thumb {

    background-color: var(--main-txt-color);

  }

}



@media (max-width: 767.98px) {

  .menu_btn {

    height: 40px;

    padding: 16px 0 0;

  }

  .searchBoxContainer {

    width: 80%;

  }

}



@media (max-width: 575.98px) {

  .main_menu_wrapper {

    left: -200px;

    width: 200px;

  }

  .menu_btn {

    padding: 10px 0 0;

  }

  .response {

    position: unset;

  }

}