style.css

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

    Version: 1.0

-----------------------------------------------------------------------------------
    
    CSS INDEX
    =========================================
	
    01. Theme default CSS
        - Common Classes
        - Section Padding
    02. Element
        - Button Style 
        - Section Title Css
        - Breadcrumb Style
        - Widget Css
        - Paginatoin Css
    03. Mobile Menu Css
    04. Header Css
    05. Hero Slider Css
    06. Feature Css
    07. Choose Area Css
    08. Footer Css
    09. About us Css
    10. Contact css
    11. Faq Style
    12. Pricing Panel Css
    13. Testimonial Css
    14. product Css
    
    
    
-----------------------------------------------------------------------------------*/
/* transition */
/* flex */
/* transform */
/* opacity */
/*----------------------------------------*/
/*  01. Theme default CSS
/*----------------------------------------*/
/*-- Google Font --*/
@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900");
/*-- Common Style --*/
*, *::after, *::before {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  background-color: #fff;
  font-family: "Poppins", sans-serif !important;
  line-height: 28px;
  font-size: 14px;
  font-style: normal;
  font-weight: normal;
  visibility: visible;
  color: #333;
}

h1, h2, h3, h4, h5, h6 {
  color: #333333;
  font-weight: 400;
  margin-top: 0;
  font-family: "Poppins", sans-serif;
}

h1 {
  font-size: 72px;
  line-height: 1;
}

h2 {
  font-size: 36px;
  line-height: 1;
}

h3 {
  font-size: 24px;
}

h4 {
  font-size: 18px;
}

h5 {
  font-size: 16px;
}

h6 {
  font-size: 14px;
}

@media only screen and (min-width: 1200px) and (max-width: 1600px) {
  h1 {
    font-size: 65px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  h1 {
    font-size: 62px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  h1 {
    font-size: 52px;
  }

  h2 {
    font-size: 26px;
  }

  h3 {
    font-size: 24px;
  }
}
@media only screen and (max-width: 767px) {
  h1 {
    font-size: 37px;
  }

  h2 {
    font-size: 22px;
  }

  h3 {
    font-size: 20px;
  }

  .s--mt--30 {
    margin-top: 35px;
  }

  .s--mb--30 {
    margin-bottom: 35px;
  }
}
p:last-child {
  margin-bottom: 0;
}

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

a, button {
  color: inherit;
  display: inline-block;
  line-height: inherit;
  text-decoration: none;
  cursor: pointer;
}

a, button, img, input, span {
  transition: all 0.3s ease 0s;
}

*:focus {
  outline: none !important;
}

a:focus {
  color: inherit;
  outline: none;
  text-decoration: none;
}

a:hover {
  text-decoration: none !important;
  color: #0259ae;
}

button, input[type="submit"] {
  cursor: pointer;
}

img {
  max-width: 100%;
  height: auto;
}

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

.bg-image {
  background-repeat: no-repeat;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (max-width: 767px) {
  .bg-image {
    background-size: cover;
  }
}

.bg-image-two {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.bg-image-amicritas{
  background-repeat: no-repeat;
}

/*-- 
    - Common Classes
-----------------------------------------*/
.fix {
  overflow: hidden;
}

.hidden {
  display: none;
}

.clear {
  clear: both;
}

@media only screen and (max-width: 767px) {
  .container {
    width: 450px;
  }
}
@media only screen and (max-width: 479px) {
  .container {
    width: 320px;
  }
}
.capitalize {
  text-transform: capitalize;
}

.uppercase {
  text-transform: uppercase;
}

.no-gutters > .col, .no-gutters > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
  margin: 0;
}

.boxed-layout {
  background: #ffffff none repeat scroll 0 0;
  box-shadow: -3px 0 50px -2px rgba(0, 0, 0, 0.14);
  margin: auto;
  max-width: 1600px;
  position: relative;
  width: 100%;
}
@media only screen and (min-width: 1200px) and (max-width: 1600px) {
  .boxed-layout {
    max-width: 1280px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .boxed-layout {
    max-width: 980px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .boxed-layout {
    max-width: 730px;
  }
}
@media only screen and (max-width: 767px) {
  .boxed-layout {
    max-width: 560px;
  }
}

/*-- 
    - Background color
-----------------------------------------*/
.bg-white {
  background-color: #ffffff;
}

.bg-light-grey {
  background-color: #fafafa;
}

.bg-dark {
  background-color: #333;
}

.bg-grey {
  background-color: #f6f6f6;
}

.grey-light {
  background: #f1f1f1;
}

.bg-color-two {
  background: #ffab00;
}

.color-two {
  color: #ffab00;
}

.bg-tow {
  background: #ffab00;
}

.malachite {
  background: #10c45c;
}

.sunglow {
  background: #fdc735;
}

.mariner {
  background: #307ad5;
}

.brilliantrose {
  background: #e948ae;
}

.shakespeare {
  background: #48a7d4;
}

.deyork {
  background: #6fc191;
}

/*-- 
    - Input Placeholder
-----------------------------------------*/

.fMbuBM{
  border-radius: 2px !important;
  border: none !important;
  right: 2% !important;
  padding: 11px 15px !important;
  font-weight: normal !important;
}



/*-- 
    Scroll Up 
-----------------------------------------*/
#scrollUp {
  width: 40px;
  height: 40px;
  background-color: #0259ae;
  color: #ffffff;
  right: 20px;
  bottom: 60px;
  line-height: 40px;
  text-align: center;
  overflow: hidden;
}

#scrollUp i {
  display: block;
  line-height: 40px;
  font-size: 16px;
}
#scrollUp:hover i {
  animation-name: fadeInUp;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
}

/*-- 
    - Main Wrapper
-----------------------------------------*/
.main-wrapper.header-transparent {
  padding: 0 !important;
  margin: 0 !important;
}

/*-- 
    - Section Padding
-------------------------------------*/
.section-ptb {
  padding: 150px 0;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .section-ptb {
    padding: 100px 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section-ptb {
    padding: 80px 0;
  }
}
@media only screen and (max-width: 767px) {
  .section-ptb {
    padding: 70px 0;
  }
}
@media only screen and (max-width: 479px) {
  .section-ptb {
    padding: 60px 0;
  }
}

.section-pt {
  padding-top: 150px;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .section-pt {
    padding-top: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section-pt {
    padding-top: 80px;
  }
}
@media only screen and (max-width: 767px) {
  .section-pt {
    padding-top: 70px;
  }
}
@media only screen and (max-width: 479px) {
  .section-pt {
    padding-top: 60px;
  }
}

.section-pb-120 {
  padding-bottom: 120px;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .section-pb-120 {
    padding-bottom: 90px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section-pb-120 {
    padding-bottom: 80px;
  }
}
@media only screen and (max-width: 767px) {
  .section-pb-120 {
    padding-bottom: 70px;
  }
}
@media only screen and (max-width: 479px) {
  .section-pb-120 {
    padding-bottom: 60px;
  }
}

.section-pt-120 {
  padding-top: 120px;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .section-pt-120 {
    padding-top: 70px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section-pt-120 {
    padding-top: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .section-pt-120 {
    padding-top: 30px;
  }
}
@media only screen and (max-width: 479px) {
  .section-pt-120 {
    padding-top: 30px;
  }
}

.section-pt-110 {
  padding-top: 110px;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .section-pt-110 {
    padding-top: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section-pt-110 {
    padding-top: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .section-pt-110 {
    padding-top: 30px;
  }
}
@media only screen and (max-width: 479px) {
  .section-pt-110 {
    padding-top: 30px;
  }
}

.section-pt-90 {
  padding-top: 90px;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .section-pt-90 {
    padding-top: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section-pt-90 {
    padding-top: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .section-pt-90 {
    padding-top: 40px;
  }
}
@media only screen and (max-width: 479px) {
  .section-pt-90 {
    padding-top: 30px;
  }
}

.section-pt-60 {
  padding-top: 60px;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .section-pt-60 {
    padding-top: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section-pt-60 {
    padding-top: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .section-pt-60 {
    padding-top: 10px;
  }
}
@media only screen and (max-width: 479px) {
  .section-pt-60 {
    padding-top: 0px;
  }
}

.section-pb-70 {
  padding-bottom: 90px;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .section-pb-70 {
    padding-bottom: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section-pb-70 {
    padding-bottom: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .section-pb-70 {
    padding-bottom: 40px;
  }
}
@media only screen and (max-width: 479px) {
  .section-pb-70 {
    padding-bottom: 30px;
  }
}

.section-pb {
  padding-bottom: 150px;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .section-pb {
    padding-bottom: 90px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section-pb {
    padding-bottom: 80px;
  }
}
@media only screen and (max-width: 767px) {
  .section-pb {
    padding-bottom: 70px;
  }
}
@media only screen and (max-width: 479px) {
  .section-pb {
    padding-bottom: 60px;
  }
}

.section-ptb-140 {
  padding: 140px 0;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .section-ptb-140 {
    padding: 90px 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section-ptb-140 {
    padding: 80px 0;
  }
}
@media only screen and (max-width: 767px) {
  .section-ptb-140 {
    padding: 70px 0;
  }
}
@media only screen and (max-width: 479px) {
  .section-ptb-140 {
    padding: 60px 0;
  }
}

.section-ptb-160 {
  padding: 160px 0;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .section-ptb-160 {
    padding: 110px 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section-ptb-160 {
    padding: 80px 0;
  }
}
@media only screen and (max-width: 767px) {
  .section-ptb-160 {
    padding: 70px 0;
  }
}
@media only screen and (max-width: 479px) {
  .section-ptb-160 {
    padding: 60px 0;
  }
}

/*-- Margin top --*/
.mt--5 {
  margin-top: 5px;
}

.mt--10 {
  margin-top: 10px;
}

.mt--15 {
  margin-top: 15px;
}

.mt--20 {
  margin-top: 20px;
}

.mt--25 {
  margin-top: 25px;
}

.mt--30 {
  margin-top: 30px;
}

.mt--35 {
  margin-top: 35px;
}

.mt--40 {
  margin-top: 40px;
}

.mt--45 {
  margin-top: 45px;
}

.mt--50 {
  margin-top: 50px;
}

.mt--55 {
  margin-top: 55px;
}

.mt--60 {
  margin-top: 60px;
}

.mt--65 {
  margin-top: 65px;
}

.mt--70 {
  margin-top: 70px;
}

.mt--75 {
  margin-top: 75px;
}

.mt--80 {
  margin-top: 80px;
}

.mt--85 {
  margin-top: 85px;
}

.mt--90 {
  margin-top: 90px;
}

.mt--95 {
  margin-top: 95px;
}

.mt--100 {
  margin-top: 100px;
}

.mt--105 {
  margin-top: 105px;
}

.mt--110 {
  margin-top: 110px;
}

.mt--115 {
  margin-top: 115px;
}

.mt--120 {
  margin-top: 120px;
}

.mt--125 {
  margin-top: 125px;
}

/*-- Margin Bottom --*/
.mb--5 {
  margin-bottom: 5px;
}

.mb--10 {
  margin-bottom: 10px;
}

.mb--15 {
  margin-bottom: 15px;
}

.mb--20 {
  margin-bottom: 20px;
}

.mb--25 {
  margin-bottom: 25px;
}

.mb--30 {
  margin-bottom: 30px;
}

.mb--35 {
  margin-bottom: 35px;
}

.mb--40 {
  margin-bottom: 40px;
}

.mb--45 {
  margin-bottom: 45px;
}

.mb--50 {
  margin-bottom: 50px;
}

.mb--55 {
  margin-bottom: 55px;
}

.mb--60 {
  margin-bottom: 60px;
}

.mb--65 {
  margin-bottom: 65px;
}

.mb--70 {
  margin-bottom: 70px;
}

.mb--75 {
  margin-bottom: 75px;
}

.mb--80 {
  margin-bottom: 80px;
}

.mb--85 {
  margin-bottom: 85px;
}

.mb--90 {
  margin-bottom: 90px;
}

.mb--95 {
  margin-bottom: 95px;
}

.mb--100 {
  margin-bottom: 100px;
}

.mb--105 {
  margin-bottom: 105px;
}

.mb--110 {
  margin-bottom: 110px;
}

.mb--115 {
  margin-bottom: 115px;
}

.mb--120 {
  margin-bottom: 120px;
}

.mb--125 {
  margin-bottom: 125px;
}

/*-- Margin Bottom --*/
.mr--5 {
  margin-right: 5px;
}

.mr--10 {
  margin-right: 10px;
}

/*-- Margin Bottom --*/
.ml--5 {
  margin-left: 5px;
}

.ml--10 {
  margin-left: 10px;
}

/*-- padding top --*/
.pt--5 {
  padding-top: 5px;
}

.pt--10 {
  padding-top: 10px;
}

.pt--15 {
  padding-top: 15px;
}

.pt--20 {
  padding-top: 20px;
}

.pt--25 {
  padding-top: 25px;
}

.pt--30 {
  padding-top: 30px;
}

.pt--35 {
  padding-top: 35px;
}

.pt--40 {
  padding-top: 40px;
}

.pt--45 {
  padding-top: 45px;
}

.pt--50 {
  padding-top: 50px;
}

.pt--55 {
  padding-top: 55px;
}

.pt--60 {
  padding-top: 60px;
}

.pt--65 {
  padding-top: 65px;
}

.pt--70 {
  padding-top: 70px;
}

.pt--75 {
  padding-top: 75px;
}

.pt--80 {
  padding-top: 80px;
}

.pt--85 {
  padding-top: 85px;
}

.pt--90 {
  padding-top: 90px;
}

.pt--95 {
  padding-top: 95px;
}

.pt--100 {
  padding-top: 100px;
}

.pt--105 {
  padding-top: 105px;
}

.pt--110 {
  padding-top: 110px;
}

.pt--115 {
  padding-top: 115px;
}

.pt--120 {
  padding-top: 120px;
}

.pt--125 {
  padding-top: 125px;
}

/*-- padding Bottom --*/
.pb--5 {
  padding-bottom: 5px;
}

.pb--10 {
  padding-bottom: 10px;
}

.pb--15 {
  padding-bottom: 15px;
}

.pb--20 {
  padding-bottom: 20px;
}

.pb--25 {
  padding-bottom: 25px;
}

.pb--30 {
  padding-bottom: 30px;
}

.pb--35 {
  padding-bottom: 35px;
}

.pb--40 {
  padding-bottom: 40px;
}

.pb--45 {
  padding-bottom: 45px;
}

.pb--50 {
  padding-bottom: 50px;
}

.pb--55 {
  padding-bottom: 55px;
}

.pb--60 {
  padding-bottom: 60px;
}

.pb--65 {
  padding-bottom: 65px;
}

.pb--70 {
  padding-bottom: 70px;
}

.pb--75 {
  padding-bottom: 75px;
}

.pb--80 {
  padding-bottom: 80px;
}

.pb--85 {
  padding-bottom: 85px;
}

.pb--90 {
  padding-bottom: 90px;
}

.pb--95 {
  padding-bottom: 95px;
}

.pb--100 {
  padding-bottom: 100px;
}

.pb--105 {
  padding-bottom: 105px;
}

.pb--110 {
  padding-bottom: 110px;
}

.pb--115 {
  padding-bottom: 115px;
}

.pb--120 {
  padding-bottom: 120px;
}

.pb--125 {
  padding-bottom: 125px;
}

/*-- Overlay styles --*/
[data-overlay],
[data-secondary-overlay],
[data-black-overlay],
[data-white-overlay] {
  position: relative;
}

[data-overlay] > div,
[data-overlay] > *,
[data-secondary-overlay] > div,
[data-secondary-overlay] > *,
[data-black-overlay] > div,
[data-black-overlay] > *,
[data-white-overlay] > div,
[data-white-overlay] > * {
  position: relative;
  z-index: 2;
}

[data-overlay]:before,
[data-secondary-overlay]:before,
[data-black-overlay]:before,
[data-white-overlay]:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 2;
}

[data-overlay]:before {
  background-color: #0259ae;
}

[data-secondary-overlay]:before {
  background-color: #031b38;
}

[data-black-overlay]:before {
  background-color: #000000;
}

[data-white-overlay]:before {
  background-color: #ffffff;
}

[data-overlay="1"]:before,
[data-secondary-overlay="1"]:before,
[data-black-overlay="1"]:before,
[data-white-overlay="1"]:before {
  opacity: 0.1;
}

[data-overlay="2"]:before,
[data-secondary-overlay="2"]:before,
[data-black-overlay="2"]:before,
[data-white-overlay="2"]:before {
  opacity: 0.2;
}

[data-overlay="3"]:before,
[data-secondary-overlay="3"]:before,
[data-black-overlay="3"]:before,
[data-white-overlay="3"]:before {
  opacity: 0.3;
}

[data-overlay="4"]:before,
[data-secondary-overlay="4"]:before,
[data-black-overlay="4"]:before,
[data-white-overlay="4"]:before {
  opacity: 0.4;
}

[data-overlay="5"]:before,
[data-secondary-overlay="5"]:before,
[data-black-overlay="5"]:before,
[data-white-overlay="5"]:before {
  opacity: 0.5;
}

[data-overlay="6"]:before,
[data-secondary-overlay="6"]:before,
[data-black-overlay="6"]:before,
[data-white-overlay="6"]:before {
  opacity: 0.6;
}

[data-overlay="7"]:before,
[data-secondary-overlay="7"]:before,
[data-black-overlay="7"]:before,
[data-white-overlay="7"]:before {
  opacity: 0.7;
}

[data-overlay="8"]:before,
[data-secondary-overlay="8"]:before,
[data-black-overlay="8"]:before,
[data-white-overlay="8"]:before {
  opacity: 0.8;
}

[data-overlay="9"]:before,
[data-secondary-overlay="9"]:before,
[data-black-overlay="9"]:before,
[data-white-overlay="9"]:before {
  opacity: 0.9;
}

[data-overlay="10"]:before,
[data-secondary-overlay="10"]:before,
[data-black-overlay="10"]:before,
[data-white-overlay="10"]:before {
  opacity: 1;
}

/*--
    02. Element
-------------------------*/
/*--
    - Button Style
------------------------------------------*/
.default-btn {
  letter-spacing: 1px;
  padding: 20px 45px;
  display: inline-block;
  border-radius: 5px;
  color: #ffffff;
  font-weight: 600;
  display: inline-block;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
@media only screen and (max-width: 767px) {
  .default-btn {
    padding: 10px 22px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .default-btn {
    padding: 10px 22px;
  }
}

.gradient-btn {
  background-image: linear-gradient(to top, #12b4f2 0%, #0259ae 51%, #12b4f2 100%);
  background-size: auto  200%;
}
.gradient-btn:hover {
  background-position: center bottom;
  color: #ffffff;
}

.hover-gradient-btn:hover {
  background-image: linear-gradient(to top, #12b4f2 0%, #0259ae 51%, #12b4f2 100%);
  background-size: auto  200%;
  background-position: center bottom;
  color: #ffffff;
}

.primary-btn {
  padding: 20px 30px;
  background: #ffffff;
  color: #333;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
@media only screen and (max-width: 767px) {
  .primary-btn {
    padding: 10px 22px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .primary-btn {
    padding: 10px 22px;
  }
}

.border-r-30 {
  border-radius: 30px;
}

.border-r-5 {
  border-radius: 5px;
}

.btn {
  background: #0259ae;
  color: #ffffff;
  border-radius: 0;
  font-weight: 600;
  font-size: 14px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  position: relative;
}
.btn:focus {
  outline: none;
  box-shadow: none;
}
@media only screen and (max-width: 479px) {
  .btn {
    padding: 1px 20px;
    font-size: 12px;
  }
}
.btn span {
  display: inline-block;
  line-height: inherit;
  transition: none;
}
.btn i {
  display: inline-block;
  line-height: inherit;
  transition: none;
}
.btn.left i {
  margin-right: 10px;
}
.btn.right i {
  margin-left: 10px;
}
.btn:hover, .btn:active {
  background: #000000;
  color: #ffffff;
}

/*--
    - Section Title Css
-------------------------------*/
.section-title {
  margin-bottom: 80px;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .section-title {
    margin-bottom: 50px;
  }
  .section-title.mb-60 {
    margin-bottom: 25px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section-title {
    margin-bottom: 40px;
  }
  .section-title.mb-60 {
    margin-bottom: 0px;
  }
}
@media only screen and (max-width: 767px) {
  .section-title {
    margin-bottom: 30px;
  }
}
.section-title h2 {
  font-weight: 400;
  margin-top: -5px;
  margin-bottom: 30px;
  padding-bottom: 30px;
  display: inline-block;
  position: relative;
}
.section-title h2::after {
  position: absolute;
  content: "";
  background: url(./title-bg.png) no-repeat;
  left: 50%;
  bottom: 0;
  height: 9px;
  width: 203px;
  transform: translateX(-50%);
}
.section-title p {
  font-size: 16px;
}
.section-title.mb-60 {
  margin-bottom: 40px;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .section-title.mb-60 {
    margin-bottom: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .section-title.mb-60 {
    margin-bottom: 10px;
  }
}
.section-title.mb-70 {
  margin-bottom: 50px;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .section-title.mb-70 {
    margin-bottom: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section-title.mb-70 {
    margin-bottom: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .section-title.mb-70 {
    margin-bottom: 30px;
  }
}

.section-title-two h2, .section-title-3 h2 {
  font-weight: 400;
  margin-top: -5px;
  margin-bottom: 30px;
  padding-bottom: 30px;
  display: block;
  position: relative;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .section-title-two h2, .section-title-3 h2 {
    font-size: 28px;
  }
}
.section-title-two h2::after, .section-title-3 h2::after {
  position: absolute;
  content: "";
  background: url(../images/icon/title-bg.png) no-repeat;
  left: 0;
  bottom: 0;
  height: 9px;
  width: 203px;
}

.section-title-3 h2::after {
  background: url(../images/icon/title-bg-2.png) no-repeat;
  height: 10px;
}

/*--
    - Breadcrumb Style
------------------------------------------*/
/*---- Breadcrumb One ----*/
.breadcrumb-area {
  padding: 120px 0;
}
@media only screen and (max-width: 767px) {
  .breadcrumb-area {
    padding: 60px 0;
  }
}
.breadcrumb-area .in-breadcrumb {
  margin-top: 50px;
}
.breadcrumb-area h2 {
  font-weight: 700;
  margin-top: -5px;
  font-weight: 600;
  color: #ffffff;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .breadcrumb-area h2 {
    font-size: 26px;
  }
}
@media only screen and (max-width: 767px) {
  .breadcrumb-area h2 {
    font-size: 26px;
  }
}

.breadcrumb-list .breadcrumb-item {
  font-size: 14px;
  color: #ffffff;
  text-transform: capitalize;
  line-height: 1;
  display: inline-block;
}
.breadcrumb-list .breadcrumb-item a{
  color:#ffffff;
}
.breadcrumb-list .breadcrumb-item.active {
  color: #ffffff;
}
.breadcrumb-list .breadcrumb-item a:hover {
  color: #0259ae;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: #ffffff;
  content: ">";
  display: inline-block;
  padding-right: 10px;
}

/*--
    - Widget Css
-------------------------*/
.right-sidebar {
  padding-left: 30px;
}
@media only screen and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1200px) {
  .right-sidebar {
    padding: 0;
  }
}

.left-sidebar {
  padding-right: 30px;
}
@media only screen and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1200px) {
  .left-sidebar {
    padding: 0;
  }
}

.single-widget {
  margin-top: 30px;
}

@media only screen and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .widgets {
    padding-top: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .widgets {
    padding-top: 50px;
  }
}

.widget-search-form {
  position: relative;
}
.widget-search-form input {
  width: 100%;
  border: none;
  padding: 8px 45px 8px 15px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  color: #0259ae;
}
.widget-search-form button {
  position: absolute;
  top: 0;
  right: 0;
  background: transparent;
  border: none;
  font-size: 20px;
  padding: 8px 15px;
}

.widget-about-us {
  position: relative;
}
.widget-about-us img {
  width: 100%;
}
.widget-about-us .widget-socail {
  position: absolute;
  background: rgba(240, 240, 240, 0.9);
  border: 1px solid #0259ae;
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
  left: 50%;
  height: 130px;
  width: 250px;
}
.widget-about-us .widget-socail .style-border {
  position: absolute;
  border: 1px solid #0259ae;
  width: 87%;
  height: 82%;
  left: 15px;
  top: 9px;
  transform: rotate(5deg);
}
.widget-about-us .widget-socail .socail-list {
  text-align: center;
  top: 50%;
  position: relative;
  transform: translateY(-50%) translateX(50%);
  right: 50%;
}
.widget-about-us .widget-socail .socail-list li {
  display: inline-block;
  margin: 0 3px;
}
.widget-about-us .widget-socail .socail-list li a {
  display: block;
  height: 35px;
  width: 35px;
  line-height: 35px;
  border-radius: 50%;
  border: 2px solid #0259ae;
  text-align: center;
  color: #0259ae;
}
.widget-about-us .widget-socail .socail-list li a:hover {
  background: #0259ae;
  color: #ffffff;
}

.widget-title {
  font-weight: 700;
  color: #0259ae;
  padding: 15px 20px;
  margin-bottom: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  display: block;
}

.widget-categories {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.widget-categories ul {
  padding: 20px;
}
.widget-categories ul li {
  margin-bottom: 20px;
}
.widget-categories ul li:last-child {
  margin-bottom: 0px;
}
.widget-categories ul li a {
  font-size: 16px;
  position: relative;
  display: block;
  display: flex;
  justify-content: space-between;
}
.widget-categories ul li a .categories-name {
  z-index: 999;
  background: #ffffff;
  position: relative;
  padding-right: 15px;
}
.widget-categories ul li a .count-item {
  background: #ffffff;
  position: relative;
  border: 1px solid #ddd;
  width: 35px;
  z-index: 1;
  height: 35px;
  line-height: 35px;
  text-align: center;
  border-radius: 50%;
  margin-top: -6px;
  color: #0259ae;
}
.widget-categories ul li a::after {
  content: "";
  border-top: 1px solid #dddddd;
  position: absolute;
  left: 0%;
  top: 50%;
  margin-top: -1px;
  height: 1px;
  width: 100%;
  transition: all 0.3s ease-in-out 0s;
}

.widget-related {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.widget-related ul {
  padding: 0 20px 20px;
}
.widget-related .single-related {
  padding-top: 5px;
  margin-bottom: 20px;
  display: flex;
  border-bottom: 1px solid #ddd;
  padding-bottom: 20px;
}
.widget-related .single-related:last-child {
  margin-bottom: 10px;
  padding-bottom: 0;
  border-bottom: none;
}
.widget-related .single-related-image {
  min-width: 100px;
  margin-right: 15px;
}
.widget-related .single-related-contents h5 {
  font-weight: 700;
  margin-bottom: 3px;
}
.widget-related .single-related-contents h5 p {
  font-size: 12px;
}
.widget-related .single-related-contents p {
  margin-bottom: 0;
  line-height: 22px;
}
.widget-related .single-related-contents .post_meta ul {
  padding: 0;
}
.widget-related .single-related-contents .post_meta ul li {
  display: inline-block;
  font-size: 12px;
  padding-right: 6px;
  margin-right: 6px;
}
.widget-related .single-related-contents .post_meta ul li::before {
  margin-bottom: 10px;
  font-size: 12px;
}
.widget-related .single-related-contents .post_meta ul li a {
  color: #0259ae;
}

.newsletter-wrap input {
  background: transform;
  border: none;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  width: 100%;
  padding: 8px 20px;
  margin-bottom: 10px;
  font-size: 14px;
  border-radius: 5px;
}
.newsletter-wrap .newsletter-btn {
  width: 100%;
  border: none;
  background: #0259ae;
  text-align: left;
  border-radius: 5px;
  padding: 0px 0 0px 20px;
  font-weight: 600;
  color: #ffffff;
  position: relative;
}
.newsletter-wrap .newsletter-btn span {
  display: inline-block;
  padding-top: 10px;
}
.newsletter-wrap .newsletter-btn .in-icon {
  background: #ffffff;
  float: right;
  padding: 15px 20px;
  border-radius: 25px 0 0 25px;
}

.tag > a {
  border: 1px solid #ddd;
  padding: 6px 10px;
  border-radius: 5px;
  font-size: 16px;
  margin-right: 2.5px;
  margin-bottom: 10px;
  display: inline-block;
}
.tag > a:hover {
  background: #0259ae;
  color: #ffffff;
  border: 1px solid #0259ae;
}

/*--
    - Paginatoin Css
---------------------------------*/
.pagination-box {
  display: flex;
  justify-content: center;
  margin-top: 80px;
}
@media only screen and (max-width: 767px) {
  .pagination-box {
    margin-top: 60px;
  }
}
.pagination-box li {
  display: inline-block;
  margin: 0 4px;
}
.pagination-box li.active a {
  color: #ffffff;
  background: #ffab00;
  border: 1px solid #ffab00;
}
.pagination-box li a {
  color: #333333;
  display: block;
  width: 40px;
  height: 40px;
  border: 1px solid #e8e8e8;
  line-height: 40px;
  text-align: center;
  color: #ffab00;
  font-size: 18px;
  border-radius: 5px;
}
.pagination-box li a:hover {
  color: #ffffff;
  background: #ffab00;
  border: 1px solid #ffab00;
}
.pagination-box li a span {
  font-size: 18px;
}

/*-- 
    03. Mobile Menu Css
-------------------------*/
.mobile-menu {
  float: left;
  width: 100% !important;
  position: relative !important;
}
.mobile-menu .mean-bar {
  position: relative;
  /*---- Mean Nav ----*/
}
.mobile-menu .mean-bar .meanmenu-reveal {
  position: absolute;
  top: -45px;
  color: #000;
  left: 0;
}
.mobile-menu .mean-bar .meanmenu-reveal span {
  position: relative;
  /*---- Menu Open ----*/
  /*---- Menu Close ----*/
}
.mobile-menu .mean-bar .meanmenu-reveal span.menu-bar {
  height: 2px;
  width: 26px;
  background-color: #ffffff;
  display: block;
  margin: 8px 0;
}
.mobile-menu .mean-bar .meanmenu-reveal span.menu-bar::before, .mobile-menu .mean-bar .meanmenu-reveal span.menu-bar::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}
.mobile-menu .mean-bar .meanmenu-reveal span.menu-bar::before {
  top: -8px;
}
.mobile-menu .mean-bar .meanmenu-reveal span.menu-bar::after {
  bottom: -8px;
}
.mobile-menu .mean-bar .meanmenu-reveal span.menu-close {
  height: 2px;
  width: 26px;
  background-color: transparent;
  display: block;
  margin: 8px 0;
}
.mobile-menu .mean-bar .meanmenu-reveal span.menu-close::before, .mobile-menu .mean-bar .meanmenu-reveal span.menu-close::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}
.mobile-menu .mean-bar .meanmenu-reveal span.menu-close::before {
  top: 0;
  transform: rotate(45deg);
}
.mobile-menu .mean-bar .meanmenu-reveal span.menu-close::after {
  bottom: 0;
  transform: rotate(-45deg);
}
.mobile-menu .mean-bar .mean-nav {
  background-color: #12AFEF;
}
.mobile-menu .mean-bar .mean-nav > ul {
  margin-bottom: 30px;
  border: 1px solid #eeeeee;
  border-top: 0px solid transparent;
  overflow-x: hidden;
}
@media only screen and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .mobile-menu .mean-bar .mean-nav > ul {
    max-height: 280px;
    overflow-y: auto;
  }
}
@media only screen and (max-width: 479px) {
  .mobile-menu .mean-bar .mean-nav > ul {
    max-height: 220px;
    overflow-y: auto;
  }
}
.mobile-menu .mean-bar .mean-nav > ul li {
  position: relative;
  display: block;
  float: left;
  width: 100%;
  /*---- Sub Menu & Mega Menu ----*/
}
.mobile-menu .mean-bar .mean-nav > ul li a {
  font-size: 13px;
  display: block;
  color: #ffffff;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 44px;
  position: relative;
  border-top: 1px solid #eeeeee;
  padding: 0 40px 0 20px;
  /*---- Menu Expand For Sub Menu ----*/
}
.mobile-menu .mean-bar .mean-nav > ul li a i {
  display: none;
}
.mobile-menu .mean-bar .mean-nav > ul li a:hover {
  color: #ccc;
  padding-left: 25px;
}
.mobile-menu .mean-bar .mean-nav > ul li a.mean-expand {
  border: 1px solid #eeeeee;
  position: absolute;
  right: -1px;
  top: 0;
  font-size: 20px !important;
  color: #fff;
  line-height: 44px;
  height: 46px;
  width: 40px;
  text-align: center;
  padding: 0;
}
.mobile-menu .mean-bar .mean-nav > ul li a.mean-expand.mean-clicked {
  line-height: 40px;
}
.mobile-menu .mean-bar .mean-nav > ul li .sub-menu, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu, .mobile-menu .mean-bar .mean-nav > ul li ul {
  position: static;
  background-color: #0a99d3;
  margin: 0;
  padding: 0 !important;
  width: 100%;
  box-shadow: none;
  margin: 0;
  display: none;
  float: left;
  width: 100%;
}
.mobile-menu .mean-bar .mean-nav > ul li .sub-menu li, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li, .mobile-menu .mean-bar .mean-nav > ul li ul li {
  padding: 0;
  margin: 0;
  flex: 0 0 100%;
  border-right: 0px solid transparent;
  width: 100%;
  display: block !important;
  float: left;
  width: 100%;
}
.mobile-menu .mean-bar .mean-nav > ul li .sub-menu li a, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li a, .mobile-menu .mean-bar .mean-nav > ul li ul li a {
  font-size: 12px;
}
.mobile-menu .mean-bar .mean-nav > ul li .sub-menu li a::before, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li a::before, .mobile-menu .mean-bar .mean-nav > ul li ul li a::before {
  display: none;
}
.mobile-menu .mean-bar .mean-nav > ul li .sub-menu li .sub-menu, .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li ul, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li .sub-menu, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li ul, .mobile-menu .mean-bar .mean-nav > ul li ul li .sub-menu, .mobile-menu .mean-bar .mean-nav > ul li ul li ul {
  background-color: rgba(0, 0, 0, 0.04);
}
.mobile-menu .mean-bar .mean-nav > ul li .sub-menu li .sub-menu li a, .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li ul li a, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li .sub-menu li a, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li ul li a, .mobile-menu .mean-bar .mean-nav > ul li ul li .sub-menu li a, .mobile-menu .mean-bar .mean-nav > ul li ul li ul li a {
  border-top: 1px solid #dddddd;
}
.mobile-menu .mean-bar .mean-nav > ul li .sub-menu li .sub-menu li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li ul li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li .sub-menu li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li ul li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li ul li .sub-menu li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li ul li ul li a.mean-expand {
  border: 1px solid #dddddd;
}
.mobile-menu .mean-bar .mean-nav > ul li .sub-menu li .sub-menu .sub-menu, .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li .sub-menu ul, .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li ul .sub-menu, .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li ul ul, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li .sub-menu .sub-menu, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li .sub-menu ul, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li ul .sub-menu, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li ul ul, .mobile-menu .mean-bar .mean-nav > ul li ul li .sub-menu .sub-menu, .mobile-menu .mean-bar .mean-nav > ul li ul li .sub-menu ul, .mobile-menu .mean-bar .mean-nav > ul li ul li ul .sub-menu, .mobile-menu .mean-bar .mean-nav > ul li ul li ul ul {
  background-color: rgba(0, 0, 0, 0.05);
}
.mobile-menu .mean-bar .mean-nav > ul li .sub-menu li .sub-menu .sub-menu li a, .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li .sub-menu ul li a, .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li ul .sub-menu li a, .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li ul ul li a, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li .sub-menu .sub-menu li a, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li .sub-menu ul li a, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li ul .sub-menu li a, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li ul ul li a, .mobile-menu .mean-bar .mean-nav > ul li ul li .sub-menu .sub-menu li a, .mobile-menu .mean-bar .mean-nav > ul li ul li .sub-menu ul li a, .mobile-menu .mean-bar .mean-nav > ul li ul li ul .sub-menu li a, .mobile-menu .mean-bar .mean-nav > ul li ul li ul ul li a {
  border-top: 1px solid #eeeeee;
}
.mobile-menu .mean-bar .mean-nav > ul li .sub-menu li .sub-menu .sub-menu li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li .sub-menu ul li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li ul .sub-menu li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li ul ul li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li .sub-menu .sub-menu li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li .sub-menu ul li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li ul .sub-menu li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li ul ul li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li ul li .sub-menu .sub-menu li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li ul li .sub-menu ul li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li ul li ul .sub-menu li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li ul li ul ul li a.mean-expand {
  border: 1px solid #eeeeee;
}

@media only screen and (max-width: 479px) {
  .is-sticky .mean-bar .meanmenu-reveal {
    top: -40px;
  }
}
@media only screen and (max-width: 767px) {
  .is-sticky .mean-bar .meanmenu-reveal {
    top: -42px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .is-sticky .mean-bar .meanmenu-reveal {
    top: -48px;
  }
}

.mobile-sidebar.mobile-menu .mean-bar .meanmenu-reveal {
  top: -45px;
  z-index: 99999;
}

.mobile-sidebar.mobile-menu .mean-bar .meanmenu-reveal span.menu-bar {
  background-color: #333;
}
.mobile-sidebar.mobile-menu .mean-bar .meanmenu-reveal span.menu-bar::before, .mobile-sidebar.mobile-menu .mean-bar .meanmenu-reveal span.menu-bar::after {
  background-color: #333;
}
.mobile-sidebar.mobile-menu .mean-bar .meanmenu-reveal span.menu-close {
  margin: 8px 0;
}
.mobile-sidebar.mobile-menu .mean-bar .meanmenu-reveal span.menu-close::before, .mobile-sidebar.mobile-menu .mean-bar .meanmenu-reveal span.menu-close::after {
  background-color: #333;
}

/*--
    04. Header Css
--------------------------*/
.inner-header {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 9;
}

.header-area {
  padding: 12px 0px;
}

.logo a {
  padding: 20px 0;
}

.main-menu {
  justify-content: flex-end;
  display: flex;
}
.main-menu ul > li {
  display: inline-block;
  color: #ffffff;
  position: relative;
  margin-right: 35px;
}
.main-menu ul > li > a {
  display: block;
  padding: 20px 0;
  color: #ffffff;
}
.main-menu ul > li > a:hover{
  text-decoration: none;
  color: #adaec2;
}
.main-menu ul > li .sub-menu {
  width: 180px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
  position: absolute;
  background: #fff;
  padding: 15px;
  z-index: 9;
  top: 120%;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  border-bottom: 2px solid #0259ae;
}
.main-menu ul > li .sub-menu li {
  display: block;
  margin-right: 0;
  margin-bottom: 8px;
}
.main-menu ul > li .sub-menu li:last-child {
  margin-bottom: 0;
}
.main-menu ul > li .sub-menu li > a {
  display: block;
  padding: 0;
  font-weight: 500;
  text-align: left;
  text-transform: capitalize;
  color: #333;
  font-size: 14px;
}
.main-menu ul > li .sub-menu li > a:hover {
  color: #0259ae;
}
.main-menu ul > li:hover {
  color: #0259ae;
}
.main-menu ul > li:hover .sub-menu {
  visibility: visible;
  opacity: 1;
  top: 100%;
}

.login-button {
  padding-left: 60px;
  margin-top: 15px;
}
.login-button .login-btn {
  padding: 4px 30px;
  background: #ffffff;
  font-size: 14px;
}
.login-button .login-btn.button-c-two {
  background: #ffc61b;
  color: #fff;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.login-button .login-btn.button-c-two:hover {
  background: #fff;
  color: #333;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .login-button {
    padding-left: 0;
    padding-right: 60px;
  }
}
@media only screen and (max-width: 767px) {
  .login-button {
    padding-left: 0;
    padding-right: 40px;
  }
  .login-button .login-btn {
    padding: 2px 10px;
  }
}

.tb-gradient-hover:hover {
  background-image: linear-gradient(to top, #12b4f2 0%, #0259ae 51%, #12b4f2 100%);
  background-size: auto  200%;
  background-position: center bottom;
  color: #ffffff;
}

.hover-two:hover {
  background: #ffab00;
}

/*-- Header style home 3 --*/
.header-medea-inner-area {
  background: #fff;
  padding: 30px 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 999;
  position: relative;
  top: 0;
  width: 100%;
  margin: auto;
  left: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .header-medea-inner-area {
    padding: 30px 15px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header-medea-inner-area {
    padding: 20px 15px;
  }
}
@media only screen and (max-width: 767px) {
  .header-medea-inner-area {
    padding: 20px 0px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .right-side {
    margin-right: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .right-side {
    margin-right: 52px;
  }
}

.side-main-menu .simplebar-scrollbar {
  width: 4px;
}

.is-sticky {
  position: absolute;
  top: 0;
  width: 100%;
  background: #ffffff;
  z-index: 999;
  position: fixed;
}

nav.sidebar-menu {
  position: relative;
  overflow-x: hidden !important;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  height: 100%;
  display: block;
  margin-top: 104px;
  position: fixed;
  background: #ffffff;
  top: 0;
  left: 0;
  bottom: 0;
  width: 260px;
  z-index: 6;
  overflow-y: hidden;
  max-height: 100% !important;
}
@media only screen and (min-width: 1200px) and (max-width: 1600px) {
  nav.sidebar-menu {
    width: 200px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  nav.sidebar-menu {
    width: 200px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (max-width: 767px) {
  nav.sidebar-menu {
    margin-left: -1000px;
    margin-top: 82px;
  }
  nav.sidebar-menu.offsetmenu-on {
    margin-left: 0px;
    transition: all 0.4s ease-in-out;
    width: 180px;
  }
  nav.sidebar-menu.offsetmenu-on ul {
    padding-bottom: 100px;
  }
  nav.sidebar-menu.offsetmenu-on ul a {
    padding: 25px 0;
  }
}
@media only screen and (max-width: 767px) {
  nav.sidebar-menu.offsetmenu-on ul {
    padding-bottom: 60px;
  }
}
@media only screen and (max-width: 479px) {
  nav.sidebar-menu {
    margin-top: 80px;
  }
  nav.sidebar-menu.offsetmenu-on ul {
    padding-bottom: 60px;
  }
}
nav.sidebar-menu ul {
  padding-bottom: 70px;
}
@media only screen and (max-width: 767px) {
  nav.sidebar-menu ul {
    padding: 0;
  }
}
nav.sidebar-menu ul li {
  margin-bottom: 2px;
}
nav.sidebar-menu ul li a {
  display: block;
  background: #ffffff;
  border: 1px solid #eee;
  padding: 55px 0;
  text-align: center;
  border-radius: 3px;
  font-size: 20px;
}
nav.sidebar-menu ul li a span {
  display: block;
  font-size: 16px;
}
nav.sidebar-menu ul li a:hover {
  color: #ffab00;
}

.menu-bar-area {
  width: 40px;
  font-size: 21px;
  background: #f9f9f9;
  color: #637282;
  text-align: center;
  border-radius: 2px;
  margin-right: 40px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .menu-bar-area {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .menu-bar-area {
    display: none;
  }
}

.search-input-box {
  margin-left: 15px;
  position: relative;
  width: 500px;
}
@media only screen and (min-width: 1200px) and (max-width: 1600px) {
  .search-input-box {
    width: 400px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .search-input-box {
    width: 400px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .search-input-box {
    width: 300px;
  }
}
@media only screen and (max-width: 767px) {
  .search-input-box {
    display: none;
  }
}
.search-input-box input {
  position: relative;
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 25px;
  padding: 6px 60px 6px 15px;
  font-size: 14px;
}
.search-input-box button {
  position: absolute;
  right: 0;
  border: none;
  top: 0;
  background: transparent;
  padding: 0px 16px;
  line-height: 42px;
  font-size: 16px;
  border-left: 1px solid #ddd;
}
.search-input-box button:hover {
  color: #ffab00;
}

.notifications-bar {
  margin-left: 35px;
  padding-top: 5px;
}
.notifications-bar .notifications-iocn {
  position: relative;
  color: #637282 !important;
  width: 32px;
  height: 32px;
  line-height: 32px;
  border-radius: 50%;
  border: 1px solid #637282;
  text-align: center;
}
.notifications-bar .notifications-iocn > span {
  position: absolute;
  right: 0;
  top: -15px;
  background: #637282;
  color: #ffffff;
  font-size: 12px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 100%;
}
.notifications-bar .dropdown-menu {
  transform: translate3d(0px, 44px, 0px) !important;
  right: 0;
  background: #fafafa none repeat scroll 0 0;
  border-radius: 0;
  box-shadow: none;
  left: auto !important;
  margin: 0;
  padding: 20px 20px;
  position: absolute;
  text-align: left;
  transition: all 0.4s ease-in-out;
  width: 240px;
}
@media only screen and (max-width: 767px) {
  .notifications-bar .dropdown-menu {
    transform: translate3d(60px, 44px, 0px) !important;
  }
}
.notifications-bar .dropdown-menu h5 {
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid #ddd;
  font-size: 14px;
  font-weight: 600;
}
.notifications-bar .dropdown-menu li {
  margin-bottom: 15px;
}
.notifications-bar .dropdown-menu li:last-child {
  margin-bottom: 0;
}
.notifications-bar .dropdown-menu li a {
  font-size: 14px;
  display: flex;
  line-height: 18px;
}
.notifications-bar .dropdown-menu li a:hover {
  color: #ffab00;
}
.notifications-bar .dropdown-menu li a img {
  max-width: 40px;
  max-height: 40px;
}
.notifications-bar .dropdown-menu li a .notific-contents {
  padding-left: 15px;
}
.notifications-bar .dropdown-menu li a .notific-contents > span {
  margin-bottom: 0;
}
.notifications-bar .dropdown-menu li a .notific-contents .time {
  margin-top: 5px;
  color: #666;
  display: block;
}

.our-profile-area {
  padding-top: 5px;
  margin-left: 15px;
  padding-left: 15px;
  position: relative;
}
.our-profile-area .our-profile-pc {
  min-width: 32px;
  min-height: 32px;
  line-height: 32px;
}
.our-profile-area::before {
  background: #ddd;
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 20px;
  width: 1px;
}
.our-profile-area .dropdown-menu {
  transform: translate3d(0px, 44px, 0px) !important;
  right: 0;
  background: #ffffff none repeat scroll 0 0;
  border: 1px solid #eaecee;
  border-radius: 0;
  box-shadow: none;
  left: auto !important;
  margin: 0;
  padding: 15px 20px;
  position: absolute;
  text-align: left;
  transition: all 0.4s ease-in-out;
}
.our-profile-area .dropdown-menu li {
  margin-bottom: 3px;
}
.our-profile-area .dropdown-menu li:last-child {
  margin-bottom: 0;
}
.our-profile-area .dropdown-menu li a {
  font-size: 14px;
  display: block;
}
.our-profile-area .dropdown-menu li a:hover {
  color: #ffab00;
}

.mobile-sidebar {
  margin-top: 0;
  color: red;
  position: absolute;
  top: -50px;
  z-index: 9999;
  left: auto;
  right: 8px;
  cursor: pointer;
}
.mobile-sidebar span {
  cursor: pointer;
  content: "";
  display: block;
  width: 25px;
  height: 2px;
  background: #333;
  margin: 5px 0;
}

/*--
    05. Hero Slider Css
-----------------------------*/
.single-slide-1 {
  height: 1200px;
}
@media only screen and (min-width: 1200px) and (max-width: 1600px) {
  .single-slide-1 {
    height: 1050px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .single-slide-1 {
    height: 950px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .single-slide-1 {
    height: 800px;
  }
}
@media only screen and (max-width: 767px) {
  .single-slide-1 {
    height: 640px;
  }
}
@media only screen and (max-width: 479px) {
  .single-slide-1 {
    height: 720px;
  }
}

.single-slide-2 {
  height: 950px;
}
@media only screen and (min-width: 1200px) and (max-width: 1600px) {
  .single-slide-2 {
    height: 700px;
  }
  .single-slide-2 .hero-content-two {
    margin-top: 50px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .single-slide-2 {
    height: 700px;
  }
  .single-slide-2 .hero-content-two {
    margin-top: 20px;
  }
  .single-slide-2 .slider-text-info {
    margin-top: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .single-slide-2 {
    height: 600px;
  }
  .single-slide-2 .hero-content-two {
    margin-top: 50px;
  }
  .single-slide-2 .slider-text-info {
    margin-top: 0px;
  }
  .single-slide-2 .slider-text-info h3 {
    margin-bottom: 20px;
    font-size: 20px;
  }
  .single-slide-2 .slider-text-info h1 {
    margin-bottom: 20px;
    font-size: 46px;
  }
}
@media only screen and (max-width: 767px) {
  .single-slide-2 {
    height: 800px;
  }
  .single-slide-2 .slider-text-info {
    margin-top: 80px;
  }
  .single-slide-2 .slider-image {
    margin-top: 30px;
  }
}

.slider-screenshort {
  margin-top: -550px;
}
@media only screen and (min-width: 1200px) and (max-width: 1600px) {
  .slider-screenshort {
    margin-top: -377px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .slider-screenshort {
    margin-top: -377px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .slider-screenshort {
    margin-top: -250px;
  }
}
@media only screen and (max-width: 767px) {
  .slider-screenshort {
    margin-top: -120px;
  }
}

.slider-mt-200 {
  margin-top: 200px;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .slider-mt-200 {
    margin-top: 175px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .slider-mt-200 {
    margin-top: 140px;
  }
}
@media only screen and (max-width: 767px) {
  .slider-mt-200 {
    margin-top: 150px;
  }
}

.slider-text-info h3 {
  font-weight: 400;
  margin-bottom: 25px;
}
.slider-text-info h1 {
  font-weight: 800;
  margin-bottom: 30px;
}
.slider-text-info p {
  font-size: 16px;
}
.slider-text-info .slider-button {
  margin-top: 45px;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .slider-text-info h3 {
    margin-bottom: 15px;
  }
  .slider-text-info h1 {
    margin-bottom: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .slider-text-info {
    margin-top: 140px;
  }
  .slider-text-info h3 {
    margin-bottom: 15px;
  }
}
@media only screen and (max-width: 767px) {
  .slider-text-info {
    margin-top: 150px;
  }
  .slider-text-info h3 {
    font-weight: 400;
    margin-bottom: 15px;
  }
  .slider-text-info h1 {
    margin-bottom: 20px;
  }
  .slider-text-info .slider-button {
    margin-top: 25px;
  }
}

.two-c-theme .default-btn:hover, .two-c-theme .primary-btn:hover {
  background: #333;
  color: #ffffff;
}

.hero-content-three {
  padding-left: 80px;
}
.hero-content-three p {
  width: 40%;
}
.hero-content-three .slider-text-info h3 {
  color: #18163a;
}
.hero-content-three .slider-text-info h1 {
  color: #18163a;
}
.hero-content-three .slider-text-info .slider-button {
  display: flex;
  align-items: center;
}
.hero-content-three .slider-text-info .slider-button .default-btn {
  background: #18163a;
}
.hero-content-three .slider-text-info .slider-button .default-btn:hover {
  background: #ffab00;
  color: #ffffff;
}
.hero-content-three .slider-text-info .slider-button.two-c-theme .default-btn {
  background: #ffab00;
}
.hero-content-three .slider-text-info .slider-button.two-c-theme .default-btn:hover {
  background: #ffffff;
  color: #333;
}
.hero-content-three .slider-text-info .slider-button.two-c-theme .video-play-btn {
  border: 5px solid #ffab00;
}
.hero-content-three .slider-text-info .slider-button.two-c-theme .video-play-btn:hover {
  border: 5px solid #ffffff;
  color: #ffffff;
}
.hero-content-three .slider-text-info .slider-button .video-play-btn {
  border: 5px solid #ffab00;
  height: 60px;
  width: 60px;
  line-height: 55px;
  text-align: center;
  color: #ffab00;
  border-radius: 5000px;
  font-size: 48px;
  padding-left: 10px;
}
.hero-content-three .slider-text-info .slider-button .video-play-btn:hover {
  border: 5px solid #18163A;
  color: #18163A;
}
.hero-content-three .slider-text-info .slider-button .video-play-btn.color-balck {
  border: 5px solid #18163A;
  color: #18163A;
}
.hero-content-three .slider-text-info .slider-button .video-play-btn.color-balck:hover {
  border: 5px solid #ffab00;
  color: #ffab00;
}
@media only screen and (min-width: 1200px) and (max-width: 1600px) {
  .hero-content-three {
    padding-left: 40px;
  }
  .hero-content-three p {
    width: 60%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .hero-content-three {
    padding-left: 15px;
  }
  .hero-content-three p {
    width: 60%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (max-width: 767px) {
  .hero-content-three {
    padding-left: 15px;
  }
  .hero-content-three p {
    width: 70%;
  }
}
@media only screen and (max-width: 479px) {
  .hero-content-three p {
    width: 100%;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .single-slide-3 {
    position: inherit;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) and (min-width: 768px) and (max-width: 991px) {
  .single-slide-3 .slider-text-info {
    margin-top: 0px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) and (max-width: 767px) {
  .single-slide-3 .slider-text-info {
    margin-top: 0px;
  }
}

@media only screen and (max-width: 767px) {
  .single-slide-3 {
    position: inherit;
  }
}
@media only screen and (max-width: 767px) and (min-width: 768px) and (max-width: 991px) {
  .single-slide-3 .slider-text-info {
    margin-top: 0px;
  }
}
@media only screen and (max-width: 767px) and (max-width: 767px) {
  .single-slide-3 .slider-text-info {
    margin-top: 0px;
  }
}

.hero-slider-three .slick-arrow {
  background-color: rgba(0, 0, 0, 0.2);
  border: medium none;
  color: #ffffff;
  font-size: 24px;
  height: 40px;
  position: absolute;
  bottom: 0%;
  width: 40px;
  z-index: 9;
  transition: 0.4s;
}
.hero-slider-three .slick-arrow:hover {
  background-color: #ffc61b;
  color: #fff;
}
.hero-slider-three .slick-arrow.slick-next {
  right: 0px;
}
.hero-slider-three .slick-arrow.slick-prev {
  right: 40px;
  left: auto;
}

.hero-slider-three .slick-arrow h3 {
  animation-name: fadeInBottom;
  animation-duration: 0.3s;
}
.hero-slider-three .slick-arrow h1 {
  animation-name: fadeInBottom;
  animation-duration: 0.5s;
}
.hero-slider-three .slick-arrow p {
  animation-name: fadeInBottom;
  animation-duration: 0.7s;
}
.hero-slider-three .slick-arrow .btn {
  animation-name: fadeInBottom;
  animation-duration: 0.8s;
}
.hero-slider-three .slick-arrow .slider-inner-image {
  opacity: 1;
  animation-name: fadeInRight;
  animation-duration: 0.9s;
}

/*--
    06. Feature Css
----------------------------*/
.single-feature {
  padding: 0 40px;
}
.single-feature-icons {
  height: 100px;
  width: 100px;
  background: #fff;
  text-align: center;
  line-height: 100px;
  border-radius: 5000px;
  margin: 0 auto 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .single-feature {
    padding: 0;
  }
}

.border-b-one {
  border-bottom: 3px solid #0259ae;
}

.border-b-two {
  border-bottom: 3px solid #ffab00;
}

.best-single-feature {
  padding: 0 40px;
}
.best-single-feature-icons {
  height: 100px;
  width: 100px;
  text-align: center;
  line-height: 100px;
  border-radius: 5000px;
  margin: 0 auto 20px;
  background-image: linear-gradient(to left, #0259ae 51%, #12b4f2 100%);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.best-single-feature-contents h4 {
  margin-bottom: 15px;
}
.best-single-feature-contents p {
  font-size: 14px;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .best-single-feature {
    padding: 0;
  }
}
@media only screen and (max-width: 767px) {
  .best-single-feature {
    padding: 0 15px;
  }
}

/*-- get-started-area Css*/
.get-started-area {
  background-image: linear-gradient(to left, #0259ae 51%, #12b4f2 100%);
  padding: 100px 0;
}
.get-started-area h2 {
  letter-spacing: 1px;
  margin-bottom: 15px;
}
.get-started-area p {
  font-size: 16px;
}
@media only screen and (max-width: 767px) {
  .get-started-area {
    padding: 60px 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .get-started-area {
    padding: 80px 0;
  }
}

.get-started-buton {
  text-align: right;
}
@media only screen and (max-width: 767px) {
  .get-started-buton {
    text-align: center;
    margin-top: 30px;
  }
}
.get-started-buton a {
  padding: 18px 50px;
  color: #637282;
  background: #fff;
  display: inline-block;
  border-radius: 5px;
}
.get-started-buton a:hover {
  background: #333;
  color: #ffffff;
}

/*--
    07. Choose Area Css
------------------------------*/
.why-choose-area {
  position: relative;
}
@media only screen and (min-width: 992px) and (max-width: 1200px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (max-width: 767px) {
  .why-choose-area {
    overflow: hidden;
  }
  .why-choose-area .choose-main-area {
    margin-bottom: 0px;
  }
  .why-choose-area .choose-button {
    margin-top: 25px;
  }
}

.choose-contents-wrap p {
  font-size: 16px;
}

@media only screen and (max-width: 767px) {
  .choose-image-wrap {
    margin-top: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (max-width: 767px) {
  .choose-image-wrap img {
    width: 100%;
  }
}

.choose-button {
  margin-top: 40px;
}

.choose-contents-wrap.ml--35 {
  margin-left: 35px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (max-width: 767px) {
  .choose-contents-wrap.ml--35 {
    margin-left: 0;
  }
}

.section-bg-shape {
  position: relative;
}
.section-bg-shape::before {
  position: absolute;
  content: "";
  right: 0;
  bottom: -50px;
  width: 100%;
  height: 100%;
  background: url("../images/other/choose-s-01.png") no-repeat bottom right;
}
@media only screen and (min-width: 1200px) and (max-width: 1600px) {
  .section-bg-shape::before {
    right: -315px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .section-bg-shape::before {
    right: -320px;
    bottom: -200px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section-bg-shape::before {
    right: -280px;
    bottom: -193px;
    background: url("../images/other/choose-s-01.png") no-repeat top left;
  }
}
@media only screen and (max-width: 767px) {
  .section-bg-shape::before {
    right: -280px;
    bottom: -193px;
    background: url("../images/other/choose-s-01.png") no-repeat top left;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1200px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (max-width: 767px) {
  .feature-list-area {
    margin-top: 0;
  }
}
.feature-list-area .feature-list-two {
  margin-top: 60px;
}
@media only screen and (min-width: 992px) and (max-width: 1200px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (max-width: 767px) {
  .feature-list-area .feature-list-two {
    margin-top: 30px;
  }
}

.feature-list {
  margin-top: 20px;
}
.feature-list li {
  margin-bottom: 15px;
  font-size: 16px;
}
.feature-list li:last-child {
  margin-bottom: 0;
}
.feature-list li i {
  margin-right: 20px;
}

.video-inner-wrap {
  position: relative;
}
.video-inner-wrap .video-btn {
  position: absolute;
  left: 47%;
  top: 47%;
  background-image: linear-gradient(to top, #12b4f2 0%, #0259ae 51%, #12b4f2 100%);
  background-size: auto  200%;
  color: #ffffff;
  font-size: 18px;
  height: 80px;
  font-size: 30px;
  width: 80px;
  line-height: 80px;
  border-radius: 5000px;
  transform: translateY(-50%) translateX(-50%);
}

.section-pb-b {
  padding-bottom: 110px;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .section-pb-b {
    padding-bottom: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section-pb-b {
    padding-bottom: 80px;
  }
}
@media only screen and (max-width: 767px) {
  .section-pb-b {
    padding-bottom: 70px;
  }
}
@media only screen and (max-width: 479px) {
  .section-pb-b {
    padding-bottom: 60px;
  }
}

.section-bg-shape-2 {
  position: relative;
  overflow: hidden;
}
.section-bg-shape-2::before {
  position: absolute;
  content: "";
  right: 25px;
  bottom: -100px;
  width: 100%;
  height: 100%;
  background: url("../images/other/mokup-08.png") no-repeat top right;
}
@media only screen and (min-width: 1200px) and (max-width: 1600px) {
  .section-bg-shape-2::before {
    right: -200px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .section-bg-shape-2::before {
    right: -400px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section-bg-shape-2::before {
    right: -548px;
    bottom: 80px;
    background: url("../images/other/mokup-08.png") no-repeat bottom left;
  }
}
@media only screen and (max-width: 767px) {
  .section-bg-shape-2::before {
    background: none;
  }
}

.videos-image-wrap {
  position: relative;
}

.play-btn {
  background: #fff;
  font-size: 30px;
  height: 80px;
  width: 80px;
  text-align: center;
  line-height: 80px;
  border-radius: 5000pc;
  color: #ffab00;
  position: relative;
  z-index: 2;
}
.play-btn:hover {
  color: #ffab00;
}

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

.video-animation {
  position: absolute;
  width: 14rem;
  height: 14rem;
  left: -70px;
  top: -70px;
  z-index: 1;
  float: right;
}
.video-animation .animation {
  position: absolute;
  width: 220px;
  height: 220px;
  background: rgba(231, 179, 24, 0.9);
  background-clip: border-box;
  opacity: 0;
  border-radius: 50%;
  background-clip: padding-box;
  animation: waves 3s ease-in-out infinite;
  animation-delay: 0s;
}
.video-animation .animation.animation-1 {
  animation-delay: 0.5s;
}
.video-animation .animation.animation-2 {
  animation-delay: 1.5s;
}
.video-animation .animation.animation-3 {
  animation-delay: 2.5s;
}

@-webkit-keyframes waves {
  0% {
    transform: scale(0.2, 0.2);
    opacity: 0;
  }
  50% {
    opacity: 0.9;
  }
  100% {
    transform: scale(0.9, 0.9);
    opacity: 0;
  }
}
@keyframes waves {
  0% {
    transform: scale(0.2, 0.2);
    opacity: 0;
  }
  50% {
    opacity: 0.9;
  }
  100% {
    transform: scale(0.7, 0.7);
    opacity: 0;
  }
}
.section-t-border {
  border-top: 1px solid #ddd;
  padding-top: 100px;
  margin-top: 100px;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .section-t-border {
    padding-top: 80px;
    margin-top: 80px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section-t-border {
    padding-top: 50px;
    margin-top: 80px;
  }
}
@media only screen and (max-width: 767px) {
  .section-t-border {
    padding-top: 30px;
    margin-top: 60px;
  }
}

.single-brand a {
  opacity: 0.8;
}
.single-brand a:hover {
  opacity: 1;
}
@media only screen and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .single-brand {
    margin-top: 30px;
  }
}

.header--transparant {
  position: absolute;
}

/*--
    08. Footer Css
-------------------------------*/
.footer-bg-image {
  background-repeat: no-repeat;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer-bg-image {
    background-size: cover;
  }
}

.footer-top-one {
  padding-bottom: 80px;
  padding-top: 130px;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .footer-top-one {
    padding-bottom: 80px;
    padding-top: 80px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer-top-one {
    padding-bottom: 80px;
    padding-top: 30px;
    background-image: linear-gradient(#0259ae, #12b4f2);
  }
}
@media only screen and (max-width: 767px) {
  .footer-top-one {
    padding-bottom: 60px;
    padding-top: 10px;
    background-image: linear-gradient(#0259ae, #12b4f2);
  }
}

.footer-bg-image-two {
  background-image: url("../images/bg/footer-bg-03.jpg");
  background-repeat: no-repeat;
}
@media only screen and (min-width: 992px) and (max-width: 1200px), only screen and (min-width: 1200px) and (max-width: 1600px) {
  .footer-bg-image-two {
    background-size: cover;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer-bg-image-two {
    padding-bottom: 80px;
    padding-top: 30px;
    background-image: none;
    background: #f0f4f5;
  }
}
@media only screen and (max-width: 767px) {
  .footer-bg-image-two {
    padding-bottom: 60px;
    padding-top: 10px;
    background-image: none;
    background: #f0f4f5;
  }
}

.footer-top-tow {
  padding-bottom: 80px;
  padding-top: 130px;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .footer-top-tow {
    padding-bottom: 80px;
    padding-top: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer-top-tow {
    padding-bottom: 80px;
    padding-top: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .footer-top-tow {
    padding-bottom: 60px;
    padding-top: 10px;
  }
}
@media only screen and (max-width: 479px) {
  .footer-top-tow {
    padding-bottom: 60px;
    padding-top: 10px;
  }
}

.col-custom-4 {
  flex: 33%;
  padding-right: 65px;
  padding-left: 15px;
  min-height: 1px;
}
@media only screen and (min-width: 1200px) and (max-width: 1600px) {
  .col-custom-4 {
    padding-right: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .col-custom-4 {
    padding-right: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .col-custom-4 {
    padding-right: 30px;
    flex: 50%;
  }
}
@media only screen and (max-width: 767px) {
  .col-custom-4 {
    padding-right: 15px;
    flex: 50%;
  }
}
@media only screen and (max-width: 479px) {
  .col-custom-4 {
    padding-right: 0px;
    flex: 100%;
  }
}

.col-custom-3 {
  flex: 22%;
  padding-left: 65px;
  padding-right: 15px;
  min-height: 1px;
  border-left: 1px solid rgba(255, 255, 255, 0.4);
}
@media only screen and (min-width: 1200px) and (max-width: 1600px) {
  .col-custom-3 {
    padding-left: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .col-custom-3 {
    padding-left: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .col-custom-3 {
    padding-left: 30px;
    flex: 50%;
  }
  .col-custom-3:nth-child(3) {
    border-left: none;
    padding-left: 15px;
  }
}
@media only screen and (max-width: 767px) {
  .col-custom-3 {
    padding-left: 15px;
    padding-right: 15px;
    flex: 50%;
    border-left: none;
  }
}
@media only screen and (max-width: 479px) {
  .col-custom-3 {
    padding-left: 15px;
    flex: 100%;
    border-left: none;
  }
}

.footer-widget-title {
  font-weight: 600;
  margin-top: -8px;
  margin-bottom: 20px;
  padding-bottom: 30px;
  display: inline-block;
  position: relative;
  color: #ffffff;
}
@media only screen and (max-width: 767px) {
  .footer-widget-title {
    margin-bottom: 12px;
  }
}
.footer-widget-title::after {
  position: absolute;
  content: "";
  background: url(http://demo.hasthemes.com/streamo-v1/streamo/assets/images/icon/fotter-title-bg.png) no-repeat;
  left: 0;
  bottom: 0;
  height: 12px;
  width: 203px;
}

.footer-contet p {
  color: #ffffff;
}
.footer-contet .fotter-socail li {
  display: inline-block;
  margin-right: 10px;
}
.footer-contet .fotter-socail li a {
  color: #ffffff;
}
.footer-contet .footer-list li {
  display: block;
  margin-bottom: 8px;
}
.footer-contet .footer-list li:last-child {
  margin-bottom: 0;
}
.footer-contet .footer-list li a {
  color: #ffffff;
}
@media only screen and (max-width: 767px) {
  .footer-contet .footer-list li {
    line-height: 18px;
  }
}
.footer-contet .footer-contact-list li {
  display: flex;
  margin-bottom: 10px;
  align-items: center;
}
@media only screen and (max-width: 767px) {
  .footer-contet .footer-contact-list li {
    margin-bottom: 7px;
  }
}
.footer-contet .footer-contact-list li:last-child {
  margin-bottom: 0;
}
.footer-contet .footer-contact-list li a {
  color: #ffffff;
  display: block;
}
.footer-contet .footer-contact-list li i {
  background: #1ec7f0;
  color: #ffffff;
  min-width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 100%;
  margin-right: 10px;
}

.footer-bottom {
  background-image: linear-gradient(to top, #0259ae, #12b4f2);
  padding: 10px 0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  color: #ffffff;
}
@media only screen and (max-width: 767px) {
  .footer-bottom {
    text-align: center;
  }
}

.footer-bottom-list {
  display: flex;
  justify-content: flex-end;
  color: #ffffff;
}
.footer-bottom-list a, .copyright-text{
  color: #ffffff;
  margin-top: 10px;
}
.footer-bottom-list li {
  margin-left: 10px;
}
@media only screen and (max-width: 767px) {
  .footer-bottom-list {
    justify-content: center;
  }
}

.coloer-three {
  background: #18163a;
}
.coloer-three .footer-widget-title {
  color: #637282;
}
.coloer-three .footer-widget-title::after {
  background: url(../images/icon/fotter-title-bg-3.png) no-repeat;
}
.coloer-three p {
  color: #637282;
}
.coloer-three .fotter-socail li a {
  color: #637282;
}
.coloer-three .footer-list li {
  display: block;
}
.coloer-three .footer-list li a {
  color: #637282;
}
.coloer-three .footer-contact-list li a {
  color: #637282;
}
.coloer-three .footer-contact-list li i {
  background: #ffc61b;
}
.coloer-three .footer-bottom {
  background: #18163a;
}
.coloer-three .footer-bottom p {
  color: #ffffff;
}

/*--
    09. About us Css
----------------------------*/
.about-us-title {
  margin-bottom: 30px;
}
.about-us-title h2 {
  margin-bottom: 15px;
}
.about-us-title p {
  font-size: 16px;
}

.about-list-content {
  margin-top: 70px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about-list-content {
    margin-top: 10px;
  }
}
@media only screen and (max-width: 767px) {
  .about-list-content {
    margin-top: 10px;
  }
}
.about-list-content .single-about-area {
  margin-top: 30px;
}
.about-list-content .single-about-area h4 {
  margin-bottom: 30px;
  font-weight: 600;
}

.about-feature-list li {
  margin-bottom: 15px;
}
.about-feature-list li:last-child {
  margin-bottom: 0;
}
.about-feature-list li i {
  margin-right: 15px;
}

.single_counter .count {
  font-weight: 600;
  font-size: 48px;
  margin-top: 15px;
}
.single_counter h5 {
  margin-bottom: 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about-images {
    margin-top: 30px;
  }
}

.single-team .team-image {
  position: relative;
  padding-top: 30px;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.single-team .team-socail {
  position: absolute;
  bottom: -20px;
  left: 50%;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
}
.single-team .team-socail ul {
  display: flex;
}
.single-team .team-socail ul li {
  margin: 0 4px;
}
.single-team .team-socail ul li a {
  display: block;
  background: #ffc61b;
  color: #ffffff;
  height: 40px;
  width: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 5000pc;
}
.single-team .team-info {
  margin-top: 25px;
}
.single-team .team-info h4 {
  font-weight: 600;
}
.single-team .team-info h5 {
  margin-bottom: 0;
}
.single-team:hover .team-image {
  background: #ffda84;
}
.single-team:hover .team-socail {
  opacity: 1;
  visibility: visible;
}
.single-team:hover .team-socail li a {
  animation-name: rollIn;
  animation-duration: 0.7s;
}
@media only screen and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .single-team {
    margin-top: 30px;
  }
}

@media only screen and (max-width: 767px) {
  .get-started-text {
    text-align: center;
  }
}

/*--
    10. Contact css
-----------------------*/
.contact-form-info {
  padding: 20px 50px 20px 0;
}
@media only screen and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .contact-form-info {
    padding: 0;
  }
}

.contact-title > h3 {
  font-size: 22px;
  margin-bottom: 30px;
  font-weight: 600;
}

.contact-input {
  display: block;
}

.contact-inner {
  float: left;
  margin-bottom: 30px;
}
@media only screen and (max-width: 767px) {
  .contact-inner {
    width: 100%;
  }
}
.contact-inner input, .contact-inner textarea {
  border: 1px solid #f6f6f6;
  color: #333;
  font-size: 14px;
  height: 60px;
  padding-left: 15px;
  width: 100%;
  background: #f6f6f6;
}
.contact-inner.contact-message {
  width: 100%;
}
.contact-inner.contact-message textarea {
  height: 180px;
  padding: 15px;
}

.contact-infor {
  background: #f2f2f2 none repeat scroll 0 0;
  padding: 20px 30px;
}
@media only screen and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .contact-infor {
    margin-top: 60px;
  }
}

.contact-dec > p {
  margin-bottom: 30px;
}

.contact-address {
  margin-bottom: 10px;
}
.contact-address li {
  border-top: 1px solid #e4e4e4;
  font-size: 14px;
  padding: 10px 0;
}
.contact-address li:first-child {
  border-top: none;
}
.contact-address li i {
  margin-right: 5px;
}

.work-hours {
  margin-bottom: 15px;
}

.contact-submit-btn .submit-btn {
  border: 0 none;
  border-radius: 3px;
  color: #ffffff;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-weight: 400;
  height: 52px;
  line-height: 40px;
  padding: 0 25px;
  text-transform: capitalize;
  -webkit-transition: all 0.4s ease-out 0s;
  transition: all 0.4s ease-out 0s;
  background-image: linear-gradient(to top, #12b4f2 0%, #0259ae 51%, #12b4f2 100%);
  background-size: auto  200%;
}
.contact-submit-btn .submit-btn:hover {
  background-position: center bottom;
  color: #ffffff;
}

.form-messege {
  margin-bottom: 0;
  margin-top: 3px;
  font-size: 14px;
}
.form-messege.error {
  color: red;
  font-style: italic;
}
.form-messege.success {
  color: #008000;
  font-style: italic;
}

#googleMap {
  height: 670px;
  width: 100%;
}
@media only screen and (max-width: 767px) {
  #googleMap {
    height: 400px;
  }
}

.contact-info-inner {
  padding: 48px 100px;
  background-image: linear-gradient(to left, #0259ae 30%, #12b4f2 100%);
  position: absolute;
  top: -670px;
  width: 590px;
  right: -80px;
  border-radius: 5px;
}
@media only screen and (min-width: 1200px) and (max-width: 1600px) {
  .contact-info-inner {
    width: 100%;
    right: 0px;
    padding: 48px 100px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .contact-info-inner {
    width: 100%;
    right: 0px;
    padding: 48px 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .contact-info-inner {
    right: 0px;
    padding: 48px 50px;
    width: 400px;
  }
}
@media only screen and (max-width: 767px) {
  .contact-info-inner {
    width: 100%;
    right: 0px;
    padding: 48px 50px;
    top: 70px;
    position: inherit;
    margin-bottom: 70px;
  }
}
@media only screen and (max-width: 479px) {
  .contact-info-inner {
    width: 100%;
    right: 0px;
    padding: 28px 20px;
    top: 60px;
    position: inherit;
    margin-bottom: 60px;
  }
}

.single-contact-info {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #fff;
}
.single-contact-info:last-child {
  margin-bottom: 0px;
  padding-bottom: 0px;
  border-bottom: none;
}

.contact-info-icon {
  margin-right: 15px;
}
.contact-info-icon i {
  width: 50px;
  height: 50px;
  background-image: linear-gradient(to top, #0259ae 30%, #12b4f2 100%);
  text-align: center;
  line-height: 50px;
  border-radius: 50%;
  color: #ffffff;
  font-size: 18px;
}

.contact-info-text {
  color: #ffffff;
  font-size: 16px;
}
.contact-info-text a {
  display: block;
  color:#ffffff;
  text-decoration: none;
}

.contact-info-text a:hover{
  color: #dddddd;
}

/*--
    11. Faq Style
-------------------------------*/
.faq-style-wrap {
  margin-top: 60px;
}
.faq-style-wrap .panel-default {
  margin-bottom: 10px;
}
.faq-style-wrap .panel-title {
  margin-bottom: 0;
  font-weight: 500;
  line-height: 24px;
}
.faq-style-wrap .panel-title .button-faq {
  position: absolute;
  height: 35px;
  width: 35px;
  background: #0259ae;
  z-index: 1;
  right: 10px;
  top: 44%;
  transform: translateY(-40%);
}
.faq-style-wrap .panel-title a {
  background: #f6f9fb;
  padding: 25px 60px 25px 15px;
  font-size: 16px;
  display: flex;
}
.faq-style-wrap .panel-title a span {
  margin-right: 10px;
}
@media only screen and (max-width: 767px) {
  .faq-style-wrap .panel-title a {
    padding: 15px 50px 15px 15px;
  }
}
.faq-style-wrap .panel-title a[aria-expanded="true"] {
  margin-bottom: 0px;
  position: relative;
  width: 100%;
}
.faq-style-wrap .panel-title a[aria-expanded="true"]::before {
  position: absolute;
  content: "\f2f9";
  font-family: 'Material-Design-Iconic-Font';
  color: #fff;
  background-image: linear-gradient(to left, #0259ae 51%, #12b4f2 100%);
  width: 35px;
  height: 35px;
  text-align: center;
  line-height: 35px;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  transition: 0.4s ease-in-out;
  border-radius: 100%;
  z-index: 4;
  margin-top: 0px;
}
.faq-style-wrap .panel-body {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 30px;
  margin-bottom: 15px;
}
.faq-style-wrap .panel-body p {
  color: #494849;
  font-size: 16px;
  line-height: 28px;
}
.faq-style-wrap .panel-body .read-btn a {
  font-size: 14px;
  color: #3e3e3e;
  font-weight: 500;
  display: inline-block;
  border-bottom: 1px solid #9e9e9e;
}

.frequently-ask-questions-area {
  position: relative;
}
.frequently-ask-questions-area p {
  font-size: 16px;
}

.faq-inner-image {
  position: absolute;
  bottom: 150px;
  padding-left: 15px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .faq-inner-image {
    position: relative;
    bottom: 0;
    padding-left: 15px;
    margin-top: 60px;
  }
}
@media only screen and (max-width: 767px) {
  .faq-inner-image {
    position: relative;
    bottom: 0;
    padding-left: 15px;
    margin-top: 60px;
  }
}

.every-moments-wrap .section-title-3 h2 {
  line-height: 1.2;
}
.every-moments-wrap p {
  font-size: 16px;
}

.single-list-dec {
  padding-left: 30px;
  position: relative;
  margin-top: 40px;
  font-size: 16px;
}
.single-list-dec::after {
  content: "\f26b";
  font-family: Material-Design-Iconic-Font;
  position: absolute;
  left: 0;
  top: 0;
}
.single-list-dec h6 {
  line-height: 1.5;
  margin-bottom: 20px;
  font-size: 16px;
}

.support-and-solution {
  position: relative;
  overflow: hidden;
}

.moments-inner-image {
  position: absolute;
  right: -75%;
  top: 10%;
}
@media only screen and (min-width: 1200px) and (max-width: 1600px) {
  .moments-inner-image {
    right: -50%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .moments-inner-image {
    right: -30%;
    top: 30%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .moments-inner-image {
    right: 0%;
    top: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .moments-inner-image {
    right: 0%;
    top: 30px;
  }
}

.moments-inner-image-2 {
  position: relative;
  right: -45px;
  top: 40%;
}
@media only screen and (min-width: 1200px) and (max-width: 1600px) {
  .moments-inner-image-2 {
    right: 0px;
    top: 30%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .moments-inner-image-2 {
    right: 0px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .moments-inner-image-2 {
    right: -100px;
    top: 24%;
  }
}
@media only screen and (max-width: 767px) {
  .moments-inner-image-2 {
    right: 0px;
    top: 24%;
  }
}

/*--
     solutions Css
------------------------------------*/
.single-solutions {
  display: flex;
}
.single-solutions-icons {
  min-width: 50px;
}
.single-solutions-contents {
  margin-left: 20px;
}

/*--
    12. Pricing Panel Css
--------------------------*/
.pricing-panel {
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  border-radius: 5px;
  position: relative;
  z-index: 1;
}
.pricing-panel::after {
  background: linear-gradient(to top, #12b4f2 50%, #0259ae 100%);
  left: 0;
  top: 0;
  content: "";
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: -1;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.pricing-panel .pricing-heading {
  padding: 70px 0 30px;
  position: relative;
  z-index: 1;
}
.pricing-panel .pricing-heading::before {
  background: #375dcd none repeat scroll 0 0;
  border-radius: 100%;
  height: 300px;
  position: absolute;
  width: 610px;
  content: "";
  top: -170px;
  left: -60px;
  transform: rotate(-22deg);
  z-index: -1;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.pricing-panel .pricing-heading h2 {
  color: #ffffff;
  font-weight: 600;
}
.pricing-panel .pricing-heading h4 {
  color: #ffffff;
  font-weight: 600;
}
.pricing-panel .pricing-body {
  margin-top: 15px;
}
.pricing-panel .pricing-body ul li {
  display: block;
  color: #333;
  font-size: 16px;
  margin-bottom: 20px;
}
.pricing-panel .pricing-body ul li:last-child {
  margin-bottom: 0;
}
@media only screen and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .pricing-panel .pricing-body ul li {
    margin-bottom: 10px;
  }
}
.pricing-panel .pricing-footer {
  padding-top: 30px;
  padding-bottom: 40px;
}
.pricing-panel .pricing-footer .plan-btn {
  display: inline-block;
  padding: 12px 40px;
  background: #375dcd;
  color: #ffffff;
  border-radius: 5px;
  font-size: 16px;
}
.pricing-panel .pricing-footer .plan-btn:hover {
  background: #fff;
  color: #333;
}
.pricing-panel:hover::after {
  opacity: 1;
  visibility: visible;
}
.pricing-panel:hover .pricing-heading::before {
  background: linear-gradient(to top, #0259ae 10%, #12b4f2 50%);
}
.pricing-panel:hover .pricing-body ul li {
  color: #fff;
}

.free-panel {
  position: relative;
}
.free-panel span {
  position: absolute;
  left: -120px;
  top: 50%;
  background: linear-gradient(to left, #0259ae 31%, #12b4f2 80%);
  font-size: 16px;
  letter-spacing: 2px;
  transform: rotate(-90deg);
  width: 200px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  color: #fff;
  border-radius: 5px 5px 0 0;
}
@media only screen and (max-width: 479px) {
  .free-panel {
    display: none;
  }
}

/*--
    13. Testimonial Css
 ---------------------------------*/
.testimonial-image {
  margin: auto;
  text-align: center;
}

.testimonial {
  text-align: center;
  padding: 30px 55px 0;
  margin: 0 auto;
  margin-top: 85px;
  position: relative;
  border-radius: 10px;
  transition: all 0.4s ease-in-out 0s;
  z-index: 1;
}
@media only screen and (max-width: 479px) {
  .testimonial {
    padding: 30px 30px 0;
  }
}

.testimonial-header {
  margin-top: 40px;
  transition: all 0.3s ease-in-out 0s;
}
.testimonial-header .bg-inner-image {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
}
.testimonial-header .bg-inner-image::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 5000px;
}
.testimonial-header i {
  position: absolute;
  top: 40%;
  font-size: 22px;
  color: #ffc61b;
  transform: translate(-50%, -50%);
}

.testimonial-image {
  height: 140px;
  width: 140px;
  display: inline-block;
  border-radius: 100px;
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translate(-40%, -50%);
  z-index: 1;
  transition: all 0.4s ease-in-out 0s;
  visibility: hidden;
  opacity: 0;
}

.slick-current .testimonial-image {
  transition: all 0.4s ease-in-out;
  height: 140px;
  width: 140px;
  visibility: visible;
  opacity: 1;
}

.testimonial-slider {
  margin-left: -15px;
  margin-right: -15px;
}

.testimonial-slider .slider-item {
  margin: 15px 0 0 0;
}

.first-elem {
  transition: all 0.4s ease-in-out;
}
.first-elem .testimonial-header .bg-inner-image::after {
  background: #ffc61b;
  content: "";
  position: absolute;
  right: -112px;
  top: 50%;
  height: 1px;
  width: 112px;
  line-height: 45px;
  -webkit-transition: 0.3;
  transition: 0.3;
}

.last-elem {
  transition: all 0.4s ease-in-out;
}
.last-elem .testimonial-header .bg-inner-image::after {
  background: #ffc61b;
  content: "";
  position: absolute;
  left: -112px;
  top: 50%;
  height: 1px;
  width: 112px;
  line-height: 45px;
  -webkit-transition: 0.3;
  transition: 0.3;
}

/*--
    14. product Css
---------------------------*/
.page-content-wrapper {
  overflow-x: hidden;
  margin-left: 265px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (max-width: 767px) {
  .page-content-wrapper {
    margin-left: 0;
    padding-top: 0px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1600px) {
  .page-content-wrapper {
    margin-left: 210px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .page-content-wrapper {
    margin-left: 210px;
  }
}

.container-coustom {
  max-width: 1200px;
}

.container-coustom {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: 120px;
}
@media only screen and (min-width: 1200px) and (max-width: 1600px), only screen and (min-width: 992px) and (max-width: 1200px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (max-width: 767px) {
  .container-coustom {
    margin-left: auto;
  }
}

.single-product-wrap .product-image a {
  display: block;
}
.single-product-wrap .product-image a img {
  width: 100%;
}
.single-product-wrap .product-contents {
  margin-top: 10px;
}
.single-product-wrap .product-contents h4 {
  font-weight: 600;
}
.single-product-wrap .product-contents h4 a {
  color: #222222;
}
.single-product-wrap .product-contents h4 a:hover {
  color: #ffab00;
}
.single-product-wrap .product-contents .pro-quality {
  display: flex;
  justify-content: space-between;
}
.single-product-wrap .product-contents .pro-quality .product-reting li {
  display: inline-block;
}
.single-product-wrap .product-contents .pro-quality .product-reting li a {
  color: #ffc61b;
}
.single-product-wrap .product-contents .pro-quality .product-reting li a.o-star {
  color: #ffe9bb;
}

.product-carousl-active .slick-arrow {
  background-color: #eeeeee;
  border: medium none;
  color: #333;
  font-size: 18px;
  height: 35px;
  position: absolute;
  top: -70px;
  width: 40px;
  z-index: 9;
  transition: 0.4s;
}
.product-carousl-active .slick-arrow:hover {
  background-color: #ffc61b;
  color: #fff;
}
.product-carousl-active .slick-arrow.slick-next {
  right: 15px;
}
.product-carousl-active .slick-arrow.slick-prev {
  right: 55px;
  left: auto;
}

.our-play-list-area .product-carousl-active .slick-arrow {
  top: -40px;
}

.tabs-categorys-list li {
  margin: 0 10px 10px 10px;
}
.tabs-categorys-list li a {
  border-radius: 5px;
  background: #ffab00;
  height: 80px;
  width: 100px;
  padding: 12px 0px;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  text-align: center;
  border: 1px solid #ffab00;
}
.tabs-categorys-list li a span {
  display: block;
}
.tabs-categorys-list li a:hover {
  color: #ffffff;
}

.tabs-categorys-list-two li {
  margin: 0 10px 10px 10px;
}
.tabs-categorys-list-two li a {
  border-radius: 5px;
  background: #ffab00;
  padding: 12px 30px;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  text-align: center;
  border: 1px solid #ffab00;
}
.tabs-categorys-list-two li a span {
  display: block;
}
.tabs-categorys-list-two li a:hover {
  color: #ffffff;
}

.player-style-1 iframe {
  width: 100%;
  height: 550px;
  border: 0 none;
}
@media only screen and (max-width: 767px) {
  .player-style-1 iframe {
    height: 250px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .player-style-1 iframe {
    height: 350px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .player-style-1 iframe {
    height: 450px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1600px) {
  .player-style-1 iframe {
    height: 470px;
  }
}

.single-video-popup .video-img {
  position: relative;
}
.single-video-popup .video-img::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}
.single-video-popup .video-img .video-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px;
}
.single-video-popup .video-img .video-content h3 {
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
}
.single-video-popup .video-img .video-content span {
  color: #ffab00;
  font-weight: 600;
}

.coming-soon-active {
  margin-left: -15px;
  margin-right: -15px;
}
.coming-soon-active li {
  padding-left: 15px;
  padding-right: 15px;
}

.coming-soon-active .slick-arrow {
  background-color: #eeeeee;
  border: medium none;
  color: #333;
  font-size: 18px;
  height: 35px;
  position: absolute;
  top: 50%;
  width: 40px;
  z-index: 9;
  transition: 0.4s;
  opacity: 0;
  visibility: hidden;
}
.coming-soon-active .slick-arrow:hover {
  background-color: #ffc61b;
  color: #fff;
}
.coming-soon-active .slick-arrow.slick-next {
  right: 15px;
  left: auto;
}
.coming-soon-active .slick-arrow.slick-prev {
  left: 15px;
  right: auto;
}
.coming-soon-active:hover .slick-arrow {
  opacity: 1;
  visibility: visible;
}

@media only screen and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .coming-soon-area.pt--100 {
    padding-top: 60px;
  }
}

@media only screen and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .our-play-list-area.pt--100 {
    padding-top: 60px;
  }
}

/*# sourceMappingURL=style.css.map */