/**
 * Fixed Spacing Variables:
 * Though we can use relative units for most cases, we still need some fixed variable to overcome some drawbacks of relative units.
 * Example we don't want the left and right side padding of container to be increased relatively to the font-size.
 * The vertical spacing between two modules to be same regardless of increasing the font-size.
 * The spacing scale is a base-8 scale. We chose a base-8 scale because eight is a highly composable number (it can be divided and multiplied many times and result in whole numbers), yet allows spacing dense enough for UI. 
 The scale's exception is that it begins at 4px to allow smaller padding and margin for denser parts of the site, from there on it steps up consistently in equal values of 8px. Refer https://primer.style/css/support/
*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  font-weight: inherit;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  font-weight: 300;
  line-height: 1.4;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before, blockquote:after {
  content: "";
  content: none;
}

q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

a {
  text-decoration: none;
  cursor: pointer;
}

input,
textarea,
select {
  margin: 0;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
}

textarea {
  overflow: auto;
}

button::-moz-focus-inner,
input[type=button]::-moz-focus-inner,
input[type=submit]::-moz-focus-inner,
input[type=reset]::-moz-focus-inner {
  padding: 0 !important;
  border: 0 none !important;
}

mark {
  background: none;
  color: inherit;
}

strong {
  font-weight: bold;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

html {
  background-color: #ffffff;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 100%;
  width: 100%;
  min-height: 100%;
  overflow: initial;
  scroll-behavior: smooth;
}

body {
  background-color: #ffffff;
  color: #000000;
  font-family: "Poppins", Arial, sans-serif;
  font-weight: 400;
  line-height: 1.4;
  font-size: 100%;
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
}

button,
input, textarea {
  font-family: "Poppins", Arial, sans-serif;
}

iframe {
  width: 100%;
}

a,
button,
input {
  outline: none;
}

a {
  color: #e4c44d;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #000000;
  font-weight: 500;
  margin-bottom: 8px;
}

h1,
h2 {
  font-size: 30px;
  margin-bottom: 16px;
  color: #0F315B;
}

h3 {
  font-size: 22px;
}

p {
  font-size: 16px;
  color: #666666;
}

p,
li {
  margin-bottom: 8px;
}

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

button {
  border: 0;
  background-color: transparent;
}

.mb-20 {
  margin-bottom: 40px !important;
}

.fluid-box {
  position: relative;
  min-height: 350px;
}
.fluid-box .right-area {
  padding-left: 130px !important;
}
@media (max-width: 766.98px) {
  .fluid-box .right-area {
    padding-left: 0 !important;
  }
}

.left-slide {
  position: absolute;
  top: 0;
  width: 36%;
}
@media (min-width: 767px) and (max-width: 1023.98px) {
  .left-slide {
    width: 100%;
    position: relative;
    margin-top: 50px;
  }
}
.left-slide .product-slider,
.left-slide .product-slider-2 {
  padding: 50px 40px;
}
.left-slide .product-slider__item,
.left-slide .product-slider-2__item {
  box-shadow: 0px 0px 34px rgba(0, 0, 0, 0.15);
  border-radius: 20px;
  padding: 45px 15px 15px 15px;
  position: relative;
  margin-right: 30px;
}
.left-slide .product-slider__number,
.left-slide .product-slider-2__number {
  position: absolute;
  top: -30px;
  font-size: 55px;
  color: #DFECFF;
  right: 15px;
}
.left-slide .product-slider__titile h3,
.left-slide .product-slider-2__titile h3 {
  font-size: 22px;
  color: #0F315B;
}
.left-slide button[data-action=stop] {
  display: none;
}

#prod-2 {
  margin-top: 0;
  padding-top: 0;
}

*:focus {
  outline: none;
}

.content-wrapper {
  width: 100%;
  padding: 0 16px;
  max-width: 1404px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 767px) {
  .content-wrapper {
    padding: 0 32px;
  }
}

@media (min-width: 767px) {
  h1,
h2 {
    font-size: 38px;
  }
}
@media (max-width: 992px) {
  .left-slide {
    position: relative;
    width: 90%;
    margin: 30px auto 30px auto;
  }
}
.tns-outer {
  padding: 0 !important;
}
.tns-outer [hidden] {
  display: none !important;
}
.tns-outer [aria-controls], .tns-outer [data-action] {
  cursor: pointer;
}

.tns-slider {
  -webkit-transition: all 0s;
  -moz-transition: all 0s;
  transition: all 0s;
}
.tns-slider > .tns-item {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.tns-horizontal.tns-subpixel {
  white-space: nowrap;
}
.tns-horizontal.tns-subpixel > .tns-item {
  display: inline-block;
  vertical-align: top;
  white-space: normal;
}
.tns-horizontal.tns-no-subpixel:after {
  content: "";
  display: table;
  clear: both;
}
.tns-horizontal.tns-no-subpixel > .tns-item {
  float: left;
}
.tns-horizontal.tns-carousel.tns-no-subpixel > .tns-item {
  margin-right: -100%;
}

.tns-no-calc {
  position: relative;
  left: 0;
}

.tns-gallery {
  position: relative;
  left: 0;
  min-height: 1px;
}
.tns-gallery > .tns-item {
  position: absolute;
  left: -100%;
  -webkit-transition: transform 0s, opacity 0s;
  -moz-transition: transform 0s, opacity 0s;
  transition: transform 0s, opacity 0s;
}
.tns-gallery > .tns-slide-active {
  position: relative;
  left: auto !important;
}
.tns-gallery > .tns-moving {
  -webkit-transition: all 0.25s;
  -moz-transition: all 0.25s;
  transition: all 0.25s;
}

.tns-autowidth {
  display: inline-block;
}

.tns-lazy-img {
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  transition: opacity 0.6s;
  opacity: 0.6;
}
.tns-lazy-img.tns-complete {
  opacity: 1;
}

.tns-ah {
  -webkit-transition: height 0s;
  -moz-transition: height 0s;
  transition: height 0s;
}

.tns-ovh {
  overflow: hidden;
}

.tns-visually-hidden {
  position: absolute;
  left: -10000em;
}

.tns-transparent {
  opacity: 0;
  visibility: hidden;
}

.tns-fadeIn {
  opacity: 1;
  filter: alpha(opacity=100);
  z-index: 0;
}

.tns-normal, .tns-fadeOut {
  opacity: 0;
  filter: alpha(opacity=0);
  z-index: -1;
}

.tns-vpfix {
  white-space: nowrap;
}
.tns-vpfix > div, .tns-vpfix > li {
  display: inline-block;
}

.tns-t-subp2 {
  margin: 0 auto;
  width: 310px;
  position: relative;
  height: 10px;
  overflow: hidden;
}

.tns-t-ct {
  width: 2333.3333333%;
  width: -webkit-calc(100% * 70 / 3);
  width: -moz-calc(100% * 70 / 3);
  width: 2333.3333333333%;
  position: absolute;
  right: 0;
}
.tns-t-ct:after {
  content: "";
  display: table;
  clear: both;
}
.tns-t-ct > div {
  width: 1.4285714%;
  width: -webkit-calc(100% / 70);
  width: -moz-calc(100% / 70);
  width: 1.4285714286%;
  height: 10px;
  float: left;
}

.tns-nav {
  position: absolute;
  bottom: 24px;
  right: 0;
  left: 0;
  z-index: 3;
  text-align: center;
  display: flex;
  justify-content: center;
}
.tns-nav button {
  width: 18px;
  height: 18px;
  border: 0;
  padding: 0;
  position: relative;
  background-color: transparent;
  margin-top: 10px;
  margin-right: 8px;
  margin-bottom: 10px;
  border-radius: 50%;
  opacity: 0.3;
  transition: height 0.2s ease-in;
  border: 1px solid #ffffff;
}
.tns-nav button:before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 100px;
  background: #EB1D36;
  position: absolute;
  top: 5px;
  left: 0;
  right: 0;
  margin: 0 auto;
  display: none;
}
.tns-nav button.tns-nav-active {
  border: 1px solid #EB1D36;
}
.tns-nav button.tns-nav-active:before {
  display: block;
}
.tns-nav .tns-nav-active {
  opacity: 1;
}

@media (min-width: 768px) {
  .tns-nav {
    flex-direction: column;
    top: 50%;
    transform: translateY(-50%);
    right: 32px;
    left: auto;
    bottom: auto;
  }
  .tns-nav button {
    margin-bottom: 8px;
    margin-right: 0;
  }
}
.tns-controls {
  display: none !important;
  position: absolute;
  z-index: 2;
  bottom: 40px;
  width: 86px;
  height: 25px;
  pointer-events: none;
  right: 32px;
}
.tns-controls button {
  pointer-events: all;
}

.tns-outer {
  position: relative;
}

[data-controls] {
  background-color: transparent;
  border: 0;
  position: absolute;
  text-indent: -9999px;
  overflow: hidden;
  top: 0;
}
[data-controls]::before {
  content: "";
  display: inline-block;
  position: absolute;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center center;
}
[data-controls]::after {
  content: none;
}

[data-controls=prev] {
  right: 60px;
  width: 21px;
  height: 20px;
}
[data-controls=prev]::before {
  background-image: url("data:image/svg+xml,%3Csvg width='23' height='22' viewBox='0 0 23 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.5 11H1M1 11L11 1M1 11L11 21' stroke='white'/%3E%3C/svg%3E%0A");
  top: 0;
  right: 0;
  left: 0;
  width: 30px;
  height: 20px;
}

[data-controls=next] {
  right: 0;
  width: 50px;
  height: 30px;
}
[data-controls=next]::before {
  background-image: url("data:image/svg+xml,%3Csvg width='54' height='22' viewBox='0 0 54 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 11H53M53 11L43 1M53 11L43 21' stroke='white'/%3E%3C/svg%3E%0A");
  left: 0;
  top: 0;
  right: 0;
  width: 50px;
  height: 20px;
}

/**
 * Fixed Spacing Variables:
 * Though we can use relative units for most cases, we still need some fixed variable to overcome some drawbacks of relative units.
 * Example we don't want the left and right side padding of container to be increased relatively to the font-size.
 * The vertical spacing between two modules to be same regardless of increasing the font-size.
 * The spacing scale is a base-8 scale. We chose a base-8 scale because eight is a highly composable number (it can be divided and multiplied many times and result in whole numbers), yet allows spacing dense enough for UI. 
 The scale's exception is that it begins at 4px to allow smaller padding and margin for denser parts of the site, from there on it steps up consistently in equal values of 8px. Refer https://primer.style/css/support/
*/
.btn {
  text-decoration: none;
  display: inline-block;
  text-align: center;
  border-radius: 5px;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  box-shadow: none;
  border: 2px solid #EB1D36 !important;
  background-color: #EB1D36 !important;
  color: #ffffff !important;
  padding: 8px 16px;
  min-width: 150px;
  white-space: nowrap;
  transition: all 0.3s ease-in-out;
}
.btn:hover {
  cursor: pointer;
  background-color: #EB1D36;
  border-color: #EB1D36;
}
.btn--white {
  background-color: #ffffff;
  border-color: #ffffff;
  color: #0F315B;
}
.btn--white:hover {
  background-color: #0F315B;
  border-color: #0F315B;
  color: #ffffff;
}
.btn--border {
  background-color: transparent;
  border-color: #0F315B;
  color: #0F315B;
}
.btn--border:hover {
  background-color: #0F315B;
  border-color: #0F315B;
  color: #ffffff;
}
.btn--border-white {
  background-color: transparent;
  border-color: #ffffff;
  color: #ffffff;
}
.btn--border-white:hover {
  background-color: #e4c44d;
  border-color: #e4c44d;
  color: #ffffff;
}

/**
 * Fixed Spacing Variables:
 * Though we can use relative units for most cases, we still need some fixed variable to overcome some drawbacks of relative units.
 * Example we don't want the left and right side padding of container to be increased relatively to the font-size.
 * The vertical spacing between two modules to be same regardless of increasing the font-size.
 * The spacing scale is a base-8 scale. We chose a base-8 scale because eight is a highly composable number (it can be divided and multiplied many times and result in whole numbers), yet allows spacing dense enough for UI. 
 The scale's exception is that it begins at 4px to allow smaller padding and margin for denser parts of the site, from there on it steps up consistently in equal values of 8px. Refer https://primer.style/css/support/
*/
.btn-link {
  color: #e4c44d;
  text-decoration: none;
  font-size: 16px;
  position: relative;
}
.btn-link--right-arrow::after {
  content: "";
  position: absolute;
  right: -15px;
  top: 7px;
  width: 10px;
  height: 10px;
  background-image: url("data:image/svg+xml,%3Csvg width='6' height='11' viewBox='0 0 6 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 1L5 5.5L0.5 10' stroke='%233DC8DD'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  transition: right 0.2s ease-in;
}
.btn-link--right-arrow:hover::after {
  right: -20px;
}

/**
 * Fixed Spacing Variables:
 * Though we can use relative units for most cases, we still need some fixed variable to overcome some drawbacks of relative units.
 * Example we don't want the left and right side padding of container to be increased relatively to the font-size.
 * The vertical spacing between two modules to be same regardless of increasing the font-size.
 * The spacing scale is a base-8 scale. We chose a base-8 scale because eight is a highly composable number (it can be divided and multiplied many times and result in whole numbers), yet allows spacing dense enough for UI. 
 The scale's exception is that it begins at 4px to allow smaller padding and margin for denser parts of the site, from there on it steps up consistently in equal values of 8px. Refer https://primer.style/css/support/
*/
.input {
  border: 1px solid #0F315B;
  box-shadow: none;
  color: #000000;
  font-size: 16px;
  width: 100%;
  max-width: 600px;
  padding: 4px 16px;
  transition: all 0.3s ease-in;
}
.input:focus {
  outline: none;
}
.input--underline {
  padding-left: 0;
  border: 0;
  border-bottom: 1px solid #cccccc;
}
.input--underline:focus {
  border-bottom: 1px solid #0F315B;
}

/**
 * Fixed Spacing Variables:
 * Though we can use relative units for most cases, we still need some fixed variable to overcome some drawbacks of relative units.
 * Example we don't want the left and right side padding of container to be increased relatively to the font-size.
 * The vertical spacing between two modules to be same regardless of increasing the font-size.
 * The spacing scale is a base-8 scale. We chose a base-8 scale because eight is a highly composable number (it can be divided and multiplied many times and result in whole numbers), yet allows spacing dense enough for UI. 
 The scale's exception is that it begins at 4px to allow smaller padding and margin for denser parts of the site, from there on it steps up consistently in equal values of 8px. Refer https://primer.style/css/support/
*/
.background-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
.background-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  font-family: "object-fit: cover; object-position: center;";
}

/**
 * Fixed Spacing Variables:
 * Though we can use relative units for most cases, we still need some fixed variable to overcome some drawbacks of relative units.
 * Example we don't want the left and right side padding of container to be increased relatively to the font-size.
 * The vertical spacing between two modules to be same regardless of increasing the font-size.
 * The spacing scale is a base-8 scale. We chose a base-8 scale because eight is a highly composable number (it can be divided and multiplied many times and result in whole numbers), yet allows spacing dense enough for UI. 
 The scale's exception is that it begins at 4px to allow smaller padding and margin for denser parts of the site, from there on it steps up consistently in equal values of 8px. Refer https://primer.style/css/support/
*/
.tiles-horizontal {
  border-radius: 20px;
  box-shadow: 0px 0px 34px rgba(0, 0, 0, 0.15);
  max-width: 700px;
  width: 100%;
  overflow: hidden;
  min-height: 200px;
  background-color: #ffffff;
}
.tiles-horizontal__content {
  padding: 24px;
  text-align: center;
}
.tiles-horizontal__image {
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0 auto;
  margin-top: 24px;
  overflow: hidden;
}
.tiles-horizontal__image svg {
  height: 100%;
}
.tiles-horizontal__image svg,
.tiles-horizontal__image img {
  width: 100%;
  max-width: 80px;
  max-height: 100px;
}
.tiles-horizontal__title {
  color: #0F315B;
}
.tiles-horizontal--image-full {
  display: flex;
  align-items: center;
}
.tiles-horizontal--image-full .tiles-horizontal__content {
  text-align: left;
  width: calc(100% - 300px);
}
@media (max-width: 766.98px) {
  .tiles-horizontal--image-full .tiles-horizontal__content {
    width: 100%;
  }
}
.tiles-horizontal--image-full .tiles-horizontal__image {
  height: 200px;
  align-items: flex-start;
  position: relative;
  margin-top: 0;
}
.tiles-horizontal--image-full .tiles-horizontal__image img {
  max-width: 100%;
}

@media (min-width: 1024px) {
  .tiles-horizontal {
    display: flex;
    align-items: center;
  }
  .tiles-horizontal__content {
    text-align: left;
  }
  .tiles-horizontal__image {
    margin-top: 0;
  }
}
/**
 * Fixed Spacing Variables:
 * Though we can use relative units for most cases, we still need some fixed variable to overcome some drawbacks of relative units.
 * Example we don't want the left and right side padding of container to be increased relatively to the font-size.
 * The vertical spacing between two modules to be same regardless of increasing the font-size.
 * The spacing scale is a base-8 scale. We chose a base-8 scale because eight is a highly composable number (it can be divided and multiplied many times and result in whole numbers), yet allows spacing dense enough for UI. 
 The scale's exception is that it begins at 4px to allow smaller padding and margin for denser parts of the site, from there on it steps up consistently in equal values of 8px. Refer https://primer.style/css/support/
*/
.tiles-vertical {
  border-radius: 20px;
  box-shadow: 0px 0px 12px 0px #dcdcdc;
  max-width: 600px;
  overflow: hidden;
  background-color: #ffffff;
}
.tiles-vertical__content {
  padding: 24px 24px 64px;
  position: relative;
}
.tiles-vertical__image {
  height: 200px;
  position: relative;
  width: 100%;
}
.tiles-vertical__title {
  color: #0F315B;
  margin-bottom: 16px;
}
.tiles-vertical .btn-link {
  position: absolute;
  bottom: 30px;
}

/**
 * Fixed Spacing Variables:
 * Though we can use relative units for most cases, we still need some fixed variable to overcome some drawbacks of relative units.
 * Example we don't want the left and right side padding of container to be increased relatively to the font-size.
 * The vertical spacing between two modules to be same regardless of increasing the font-size.
 * The spacing scale is a base-8 scale. We chose a base-8 scale because eight is a highly composable number (it can be divided and multiplied many times and result in whole numbers), yet allows spacing dense enough for UI. 
 The scale's exception is that it begins at 4px to allow smaller padding and margin for denser parts of the site, from there on it steps up consistently in equal values of 8px. Refer https://primer.style/css/support/
*/
.header {
  width: 100%;
  position: absolute;
  z-index: 999;
  padding: 16px 0;
  transition: all 0.2s ease-in;
}
.header__logo {
  position: relative;
  z-index: 3;
}
.header__logo img {
  max-width: inherit;
  height: 40px;
  transition: all 0.1s ease-in;
  border-radius: 8px;
}
.header__list {
  display: none;
}
.header__list--show {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  padding: 80px 16px 16px;
  background-color: #001533;
  width: 100%;
}
.header__hamburger {
  display: block;
  cursor: pointer;
  position: relative;
  z-index: 3;
  padding: 0;
}
.header__hamburger svg {
  width: 40px;
  height: 40px;
}
.header__hamburger svg path {
  fill: #666666;
}
.header__list-items {
  display: block;
  margin-bottom: 16px;
  position: relative;
  color: #666666;
  padding: 5px 0;
  position: relative;
}
.header__list-items a, .header__list-items .link-item {
  color: #666666;
  transition: all 0.4s;
  text-decoration: none;
}
.header__list-items a:hover, .header__list-items .link-item:hover {
  color: #e4c44d;
}
.header__list-items::after {
  content: "";
  width: 5px;
  height: 5px;
  background: #e4c44d;
  display: block;
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  margin: 0 auto;
  border-radius: 50px;
  transition: all 0.4s;
  opacity: 0;
  display: none;
}
@media (max-width: 1023.98px) {
  .header__list-items::after {
    display: none;
  }
}
.header__list-items:hover::after {
  opacity: 1;
}
.header__list-items:hover .submenu {
  display: block;
}
.header__list-items.active a {
  color: #e4c44d;
}
.header__list-items.active::after {
  opacity: 1;
}
.header__list-items .link-item {
  width: 220px;
  background: #ffffff;
  padding: 2px;
  border-radius: 5px;
  position: absolute;
  left: 0;
  top: 30px;
  overflow: hidden;
  display: none;
}
.header__list-items .link-item a {
  display: block;
  color: #0F315B;
  padding: 10px;
  font-size: 14px;
}
.header__list-items .link-item a:hover {
  background: #d4e5ff;
  color: #002f73;
}
.header__list-items.nav-btn a {
  padding: 8px 15px;
  border: 1px solid #ffffff;
  border-radius: 5px;
  background: transparent;
  transition: all 0.4s;
}
.header__list-items.nav-btn a:hover {
  background: #e4c44d;
  color: #ffffff;
}
.header__list-items:hover .link-item {
  display: block;
}
.header__list-items .submenu {
  display: none;
  position: absolute;
  background: #ffffff;
  padding: 0;
  min-width: 300px;
  border-radius: 10px;
  left: calc(100% - 150px);
  box-shadow: 1px 3px 12px 3px rgba(0, 0, 0, 0.15);
  z-index: 3;
  overflow: hidden;
}
@media (max-width: 1023.98px) {
  .header__list-items .submenu {
    left: 0;
  }
}
.header__list-items .submenu li {
  width: 100%;
  margin-bottom: 0;
}
.header__list-items .submenu li a {
  color: #444444;
  margin-bottom: 0;
  padding: 15px 25px;
  display: block;
  width: 100%;
}
.header__list-items .submenu li a:hover {
  background-color: #e4c44d;
}
.header--scroll {
  background-color: #ffffff;
  padding: 16px 0;
}
.header--scroll .header__list-items a,
.header--scroll .header__list-items .link-item {
  color: #666666;
}
.header--scroll .header__list-items a:hover, .header--scroll .header__list-items a.active,
.header--scroll .header__list-items .link-item:hover,
.header--scroll .header__list-items .link-item.active {
  color: #e4c44d;
}
.header--scroll .header__list-items.active > a {
  color: #e4c44d !important;
}
.header--scroll .header__list-items.nav-btn a {
  border: 1px solid #666666;
}
.header .content-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media (min-width: 767px) {
  .header {
    position: fixed;
    padding: 24px 0;
  }
  .header__list {
    display: block;
  }
  .header__list--show {
    display: none;
  }
  .header__list-items {
    display: inline-block;
  }
  .header__hamburger {
    display: none;
  }
  .header--scroll {
    background-color: #ffffff;
    padding: 16px 0;
  }
  .header--scroll .header__logo img {
    max-width: inherit;
  }
}
@media (min-width: 1024px) {
  .header__logo img {
    max-width: inherit;
    height: 56px;
  }
  .header__list-items {
    margin-left: 24px;
    margin-bottom: 0;
  }
}
@media (min-width: 767px) and (max-width: 1023.98px) {
  .header__list-items {
    margin-left: 16px;
  }
}
/**
 * Fixed Spacing Variables:
 * Though we can use relative units for most cases, we still need some fixed variable to overcome some drawbacks of relative units.
 * Example we don't want the left and right side padding of container to be increased relatively to the font-size.
 * The vertical spacing between two modules to be same regardless of increasing the font-size.
 * The spacing scale is a base-8 scale. We chose a base-8 scale because eight is a highly composable number (it can be divided and multiplied many times and result in whole numbers), yet allows spacing dense enough for UI. 
 The scale's exception is that it begins at 4px to allow smaller padding and margin for denser parts of the site, from there on it steps up consistently in equal values of 8px. Refer https://primer.style/css/support/
*/
.net-banner {
  background: #F6F7F7 url(../images/banner/bg2.png);
  background-repeat: no-repeat !important;
  background-size: 100%;
  background-position: center bottom !important;
}
@media (min-width: 1366px) {
  .net-banner {
    background-size: 1366px;
    background-position: center bottom;
  }
}
@media (max-width: 1023.98px) {
  .net-banner {
    background-size: 100% !important;
    background: #F6F7F7 url(../images/banner/bg2-tab.png);
  }
}
.net-banner .content-wrapper {
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.net-banner__slider-item {
  position: relative;
}
.net-banner__content {
  padding: 64px 0 56px;
  position: relative;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
}
@media (max-width: 766.98px) {
  .net-banner__content {
    flex-wrap: wrap;
    flex-direction: column-reverse;
  }
}
.net-banner__content-center {
  width: 80%;
  margin: 0 auto;
  text-align: center;
}
.net-banner__content-center h1 {
  text-align: center;
}
.net-banner__content-center h1 span {
  text-transform: uppercase;
}
.net-banner__content-center h1 span:first-child {
  color: #9b563f;
}
.net-banner__content-center h1 span:nth-child(2) {
  color: #9b8234;
}
.net-banner__content-left {
  width: 60%;
  padding-right: 100px;
}
@media (max-width: 1023.98px) {
  .net-banner__content-left {
    width: 100%;
    padding-right: 0;
  }
}
.net-banner__content-right {
  width: 40%;
  display: flex;
  justify-content: space-between;
}
@media (max-width: 1023.98px) {
  .net-banner__content-right {
    width: 50%;
  }
}
.net-banner__content-right .img-box-1 {
  width: 100%;
  position: relative;
  bottom: -20px;
}
@media (max-width: 1023.98px) {
  .net-banner__content-right .img-box-1 {
    bottom: 0px;
  }
}
.net-banner__content-right .img-box-1 img {
  width: 100%;
}
.net-banner__content-right .img-box-2 {
  width: 40%;
  position: relative;
  top: -20px;
}
@media (max-width: 1023.98px) {
  .net-banner__content-right .img-box-2 {
    top: 0px;
  }
}
.net-banner__content-right .img-box-2 img {
  width: 100%;
}
.net-banner__title {
  color: #ffffff;
  margin-bottom: 20px;
  font-weight: 600;
  text-align: left;
  line-height: 130%;
  font-size: 26px;
}
.net-banner__title span {
  display: block;
  margin-bottom: 10px;
}
@media (max-width: 766.98px) {
  .net-banner__title {
    margin-top: 20px;
    text-align: center;
  }
}
.net-banner__title span {
  font-weight: 700;
}
.net-banner p {
  color: #ffffff;
  margin-bottom: 30px;
}
@media (max-width: 1023.98px) {
  .net-banner p {
    text-align: center;
  }
}
@media (max-width: 1023.98px) {
  .net-banner__buttons {
    margin-bottom: 20px;
  }
}
.net-banner__buttons li {
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 16px;
}
@media (max-width: 766.98px) {
  .net-banner__buttons li {
    width: 100%;
    text-align: center;
  }
}
.net-banner__slider-item {
  background-position: center;
  background-size: cover;
  background-repeat: repeat;
  background-blend-mode: overlay;
}
.net-banner__bg-element {
  display: none;
}
.net-banner .tns-controls {
  display: none;
}
.net-banner.inner-banner.product-banner .content-wrapper {
  display: flex;
  min-height: 0;
}
.net-banner.inner-banner.product-banner .content-wrapper .left-area {
  text-align: left;
}
.net-banner.inner-banner.product-banner .content-wrapper .left-area .our-services__title {
  text-align: left;
}
.net-banner.inner-banner.product-banner .content-wrapper .right-area {
  display: flex;
  justify-content: flex-end;
}
.net-banner.inner-banner.product-banner .content-wrapper .right-area img {
  width: 80%;
}
@media (max-width: 766.98px) {
  .net-banner.inner-banner.product-banner .content-wrapper .right-area img {
    display: none;
  }
}
.net-banner.inner-banner.product-banner .content-wrapper .left-area,
.net-banner.inner-banner.product-banner .content-wrapper .right-area {
  width: 50%;
}
@media (max-width: 766.98px) {
  .net-banner.inner-banner.product-banner .content-wrapper {
    min-height: 0;
  }
}
.net-banner button {
  display: none !important;
}
.net-banner .tns-nav button {
  display: block !important;
}

.inner-banner {
  background: #eceff2;
  background-size: cover;
  padding: 75px 0 25px 0;
  text-align: center;
  background-image: none !important;
}
.inner-banner.product-banner {
  background: #eceff2;
}
.inner-banner h2 {
  color: #555555;
}
@media (max-width: 1023.98px) {
  .inner-banner h2 {
    padding: 0 30px;
  }
}

@media (max-width: 992px) {
  .net-banner__title {
    font-size: 18px;
  }
}
@media (min-width: 767px) {
  .net-banner__content {
    padding: 0 0 56px;
  }
  .net-banner__bg-element {
    display: block;
    position: absolute;
    z-index: 1;
    right: 9%;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    padding-top: 100px;
    max-width: 300px;
    padding-top: 50px;
  }
  .net-banner .tns-controls {
    display: flex;
  }
}
@media (min-width: 1024px) {
  .net-banner__bg-element {
    max-width: 430px;
    padding-top: 100px;
    right: 12%;
  }
  .net-banner.product-banner .content-wrapper {
    min-height: 0;
  }
}
@media (min-width: 1367px) {
  .net-banner .content-wrapper {
    min-height: 500px;
  }
  .net-banner__bg-element {
    max-width: 500px;
    padding-top: 50px;
  }
  .net-banner.inner-banner.product-banner .content-wrapper {
    min-height: 0;
  }
  .net-banner.product-banner .content-wrapper {
    min-height: 0;
  }
}
/* PRELOADER CSS */
.page-loader {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  background: #ffd8d8;
  z-index: 1000;
}
.page-loader .txt {
  color: #666;
  text-align: center;
  top: 40%;
  position: relative;
  text-transform: uppercase;
  letter-spacing: 0.3rem;
  font-weight: bold;
  line-height: 1.5;
}

/* SPINNER ANIMATION */
.spinner {
  position: relative;
  top: 35%;
  width: 80px;
  height: 80px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 100%;
  -webkit-animation: sk-scaleout 1s infinite ease-in-out;
  animation: sk-scaleout 1s infinite ease-in-out;
}

@-webkit-keyframes sk-scaleout {
  0% {
    -webkit-transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 0;
  }
}
@keyframes sk-scaleout {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}
/**
 * Fixed Spacing Variables:
 * Though we can use relative units for most cases, we still need some fixed variable to overcome some drawbacks of relative units.
 * Example we don't want the left and right side padding of container to be increased relatively to the font-size.
 * The vertical spacing between two modules to be same regardless of increasing the font-size.
 * The spacing scale is a base-8 scale. We chose a base-8 scale because eight is a highly composable number (it can be divided and multiplied many times and result in whole numbers), yet allows spacing dense enough for UI. 
 The scale's exception is that it begins at 4px to allow smaller padding and margin for denser parts of the site, from there on it steps up consistently in equal values of 8px. Refer https://primer.style/css/support/
*/
.key-features {
  padding: 32px 0;
}
.key-features__title {
  margin-bottom: 0;
  text-align: center;
}
.key-features__slider-item {
  width: 100%;
  max-width: 340px;
}
.key-features .tiles-horizontal--image-full {
  display: flex;
  align-items: center;
  transition: all 0.2s ease-in;
}
.key-features .tiles-horizontal--image-full img {
  transition: all 0.2s ease-in;
}
.key-features .tiles-horizontal--image-full .tiles-horizontal__image {
  height: 400px;
  width: 300px;
  display: none;
}
@media (max-width: 766.98px) {
  .key-features .tiles-horizontal--image-full .tiles-horizontal__image {
    width: 100%;
  }
}
.key-features .tiles-horizontal--image-full .tiles-horizontal__image img {
  height: 100%;
  max-height: 100%;
}
.key-features .tiles-horizontal--image-full:hover img {
  transform: scale(1.1);
}
.key-features .tns-ovh {
  padding: 24px 0;
}
.key-features .tns-nav {
  flex-direction: row;
  top: -20px;
  transform: none;
  display: none;
}
.key-features .tns-nav button {
  background-color: #0F315B;
  margin-right: 8px;
}
.key-features .tns-nav .tns-nav-active {
  height: 10px;
  width: 50px;
}
.key-features .tns-controls {
  width: 100%;
  bottom: 50%;
  transform: translateY(-30%);
  right: 0;
}
.key-features [data-controls=next],
.key-features [data-controls=prev] {
  width: 40px;
  height: 40px;
  background-color: #ffffff;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);
  border-radius: 50%;
  transition: box-shadow 0.2s ease-in;
}
.key-features [data-controls=next]::before,
.key-features [data-controls=prev]::before {
  background-image: url("data:image/svg+xml,%3Csvg width='17' height='14' viewBox='0 0 17 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 7H16M16 7L10.0952 1M16 7L10.0952 13' stroke='%23666666'/%3E%3C/svg%3E%0A");
  top: 11px;
  right: 0;
  width: 20px;
  height: 20px;
  margin: 0 auto;
}
.key-features [data-controls=next]:hover,
.key-features [data-controls=prev]:hover {
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
}
.key-features [data-controls=prev] {
  left: 0;
}
.key-features [data-controls=prev]::before {
  transform: rotate(180deg);
}
.key-features [data-controls=next] {
  right: 0;
}

@media (min-width: 767px) {
  .key-features__slider-item {
    max-width: 700px;
  }
  .key-features__title {
    text-align: left;
  }
  .key-features .tiles-horizontal--image-full .tiles-horizontal__image {
    display: block;
  }
  .key-features .tns-nav {
    display: block;
  }
  .key-features .tns-controls {
    transform: translateY(-50%);
  }
  .key-features [data-controls=next],
.key-features [data-controls=prev] {
    width: 60px;
    height: 60px;
  }
  .key-features [data-controls=next]::before,
.key-features [data-controls=prev]::before {
    top: 19px;
  }
  .key-features [data-controls=prev] {
    left: 50%;
    transform: translateX(-367px);
  }
  .key-features [data-controls=next] {
    right: 50%;
    transform: translateX(367px);
  }
}
@media (min-width: 1024px) {
  .key-features {
    padding: 48px 0;
  }
}
/**
 * Fixed Spacing Variables:
 * Though we can use relative units for most cases, we still need some fixed variable to overcome some drawbacks of relative units.
 * Example we don't want the left and right side padding of container to be increased relatively to the font-size.
 * The vertical spacing between two modules to be same regardless of increasing the font-size.
 * The spacing scale is a base-8 scale. We chose a base-8 scale because eight is a highly composable number (it can be divided and multiplied many times and result in whole numbers), yet allows spacing dense enough for UI. 
 The scale's exception is that it begins at 4px to allow smaller padding and margin for denser parts of the site, from there on it steps up consistently in equal values of 8px. Refer https://primer.style/css/support/
*/
.our-services {
  padding: 32px 0 16px;
  position: relative;
}
.our-services__title {
  position: relative;
  text-align: center;
  color: #ffffff;
  margin-bottom: 24px;
}
.our-services .content-wrapper {
  position: relative;
  display: flex;
  flex-wrap: wrap;
}
.our-services .tiles-horizontal {
  max-width: 100%;
  margin-bottom: 32px;
}

.inner-content {
  padding: 80px 0;
}
.inner-content .content-wrapper {
  display: flex;
}
.inner-content .content-wrapper img {
  width: 100%;
  margin-bottom: 30px;
}
.inner-content .content-wrapper .left-area {
  width: 400px;
}
.inner-content .content-wrapper .right-area {
  padding-left: 50px;
  width: calc(100% - 400px);
}

@media (max-width: 992px) {
  .inner-content .content-wrapper {
    flex-wrap: wrap;
  }
  .inner-content .content-wrapper .left-area {
    width: 80%;
    margin: 0 auto;
  }
  .inner-content .content-wrapper .left-area img {
    width: 100%;
  }
  .inner-content .content-wrapper .right-area {
    padding-left: 0;
    padding-top: 50px;
    width: 90%;
    margin: 0 auto;
  }
}
@media (min-width: 767px) {
  .our-services {
    padding: 56px 0 32px;
  }
  .our-services__title {
    margin-bottom: 40px;
  }
  .our-services .tiles-horizontal {
    max-width: calc(50% - 16px);
  }
  .our-services .tiles-horizontal:nth-child(odd) {
    margin-right: 16px;
  }
  .our-services .tiles-horizontal:nth-child(even) {
    margin-left: 16px;
  }
}
/**
 * Fixed Spacing Variables:
 * Though we can use relative units for most cases, we still need some fixed variable to overcome some drawbacks of relative units.
 * Example we don't want the left and right side padding of container to be increased relatively to the font-size.
 * The vertical spacing between two modules to be same regardless of increasing the font-size.
 * The spacing scale is a base-8 scale. We chose a base-8 scale because eight is a highly composable number (it can be divided and multiplied many times and result in whole numbers), yet allows spacing dense enough for UI. 
 The scale's exception is that it begins at 4px to allow smaller padding and margin for denser parts of the site, from there on it steps up consistently in equal values of 8px. Refer https://primer.style/css/support/
*/
.latest-news {
  padding: 32px 0 16px;
}
.latest-news__title {
  text-align: center;
  margin-bottom: 40px;
}
.latest-news__container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.latest-news .tiles-vertical {
  margin-bottom: 32px;
  max-width: 100%;
}
.latest-news .tiles-vertical__content {
  padding-bottom: 72px;
}
.latest-news .tiles-vertical .btn-link {
  bottom: 40px;
}

@media (min-width: 767px) {
  .latest-news {
    padding: 56px 0 32px;
  }
  .latest-news .tiles-vertical {
    width: calc(50% - 22px);
    max-width: 100%;
    margin-right: 32px;
  }
  .latest-news .tiles-vertical:nth-of-type(2n + 0) {
    margin-right: 0;
  }
  .latest-news .tiles-vertical__title {
    min-height: 60px;
  }
}
@media (min-width: 1024px) {
  .latest-news .tiles-vertical {
    width: calc(33.33% - 22px);
  }
  .latest-news .tiles-vertical:nth-of-type(3n + 0) {
    margin-right: 0;
  }
  .latest-news .tiles-vertical:nth-of-type(2n + 0) {
    margin-right: 32px;
  }
  .latest-news .tiles-vertical__content {
    padding-left: 40px;
  }
}
/**
 * Fixed Spacing Variables:
 * Though we can use relative units for most cases, we still need some fixed variable to overcome some drawbacks of relative units.
 * Example we don't want the left and right side padding of container to be increased relatively to the font-size.
 * The vertical spacing between two modules to be same regardless of increasing the font-size.
 * The spacing scale is a base-8 scale. We chose a base-8 scale because eight is a highly composable number (it can be divided and multiplied many times and result in whole numbers), yet allows spacing dense enough for UI. 
 The scale's exception is that it begins at 4px to allow smaller padding and margin for denser parts of the site, from there on it steps up consistently in equal values of 8px. Refer https://primer.style/css/support/
*/
.contact-us {
  padding: 32px 0;
  position: relative;
}
.contact-us__form {
  width: 100%;
  background-color: #ffffff;
  border-radius: 20px;
  padding: 32px 24px;
}
.contact-us__title {
  color: #0F315B;
  margin-bottom: 24px;
}
.contact-us__text {
  color: #ffffff;
  font-size: 30px;
  text-align: center;
  margin-bottom: 24px;
}
.contact-us .content-wrapper {
  position: relative;
  max-width: 1100px;
}
.contact-us .input {
  height: 50px;
  margin-bottom: 16px;
}
.contact-us textarea.input {
  min-height: 70px;
  max-height: 100px;
  margin-bottom: 24px;
}

@media (min-width: 767px) {
  .contact-us {
    padding: 56px 0;
  }
  .contact-us__form {
    max-width: 500px;
    padding: 32px;
  }
  .contact-us__text {
    color: #ffffff;
    font-size: 60px;
    padding-left: 32px;
    margin-bottom: 0;
    text-align: left;
  }
  .contact-us .content-wrapper {
    display: flex;
    align-items: flex-end;
    flex-direction: row-reverse;
  }
}
/**
 * Fixed Spacing Variables:
 * Though we can use relative units for most cases, we still need some fixed variable to overcome some drawbacks of relative units.
 * Example we don't want the left and right side padding of container to be increased relatively to the font-size.
 * The vertical spacing between two modules to be same regardless of increasing the font-size.
 * The spacing scale is a base-8 scale. We chose a base-8 scale because eight is a highly composable number (it can be divided and multiplied many times and result in whole numbers), yet allows spacing dense enough for UI. 
 The scale's exception is that it begins at 4px to allow smaller padding and margin for denser parts of the site, from there on it steps up consistently in equal values of 8px. Refer https://primer.style/css/support/
*/
footer {
  background-color: #D7D7D7;
}

.footer-header {
  padding: 32px 0;
  position: relative;
}
.footer-header__logo {
  max-width: 160px;
  margin-bottom: 8px;
}
.footer-header__text {
  color: #89BAFF;
  font-size: 14px;
}
.footer-header__column {
  width: 100%;
  margin-bottom: 24px;
}
.footer-header__column:first-child {
  width: 46%;
  margin-bottom: 0;
}
@media (max-width: 1023.98px) {
  .footer-header__column:first-child {
    width: 100%;
  }
}
.footer-header__column:nth-child(2) {
  width: 27%;
  margin-top: 64px;
}
@media (max-width: 1023.98px) {
  .footer-header__column:nth-child(2) {
    width: 100%;
  }
}
.footer-header__column:last-child {
  width: 27%;
  margin-bottom: 0;
}
@media (max-width: 1023.98px) {
  .footer-header__column:last-child {
    width: 100%;
  }
}
.footer-header__column h3 {
  margin-bottom: 30px;
  color: #0F315B;
}
.footer-header__column h5 {
  margin-bottom: 20px;
}
.footer-header__list-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 24px;
}
.footer-header__list-item:last-child {
  margin-bottom: 0;
}
.footer-header__list-item a {
  width: calc(100% - 36px);
  color: #444444;
  font-size: 14px;
}
.footer-header__list-item a:hover {
  color: #e4c44d;
}
.footer-header__list-item svg {
  width: 18px;
  height: 18px;
  margin-right: 16px;
}

.footer-copy {
  background-color: #000000;
  text-align: center;
  color: #ffffff;
  padding: 8px;
  font-size: 14px;
}

.footer-inner {
  padding: 80px;
  background: #D7D7D7;
}
.footer-inner h3 {
  text-align: center;
  color: #0F315B;
}
@media (max-width: 1023.98px) {
  .footer-inner h3 {
    text-align: left;
  }
}
.footer-inner .footer-header {
  padding-bottom: 0;
}
.footer-inner .footer-header__list {
  display: flex;
  flex-wrap: wrap;
  width: 40%;
  margin: 0 auto;
  text-align: center;
}
@media (max-width: 1023.98px) {
  .footer-inner .footer-header__list {
    width: 100%;
  }
}
.footer-inner .footer-header__list-item {
  width: 33.333333%;
}
@media (max-width: 1023.98px) {
  .footer-inner .footer-header__list-item {
    width: 100%;
  }
}
.footer-inner .footer-header__list-item a {
  text-align: left;
}

@media (min-width: 767px) {
  .footer-header {
    padding: 56px 0;
  }
  .footer-header__column {
    padding-left: 16px;
    margin-bottom: 0;
  }
  .footer-header__column:first-child {
    padding-left: 0;
  }
  .footer-header .content-wrapper {
    display: flex;
  }
}
@media (min-width: 1024px) {
  .footer-header__column:first-child {
    padding-right: 64px;
  }
}
@media (min-width: 767px) {
  .scroll-position {
    position: relative;
    top: -50px;
  }
}
a {
  text-decoration: none !important;
}

.w-100 {
  width: 100%;
}

.about {
  padding: 80px 0;
}
.about .about-wrap {
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
}
@media (max-width: 766.98px) {
  .about .about-wrap {
    flex-wrap: wrap;
    flex-direction: column-reverse;
  }
}
.about .about-wrap__left {
  width: 55%;
  padding-left: 30px;
}
@media (max-width: 766.98px) {
  .about .about-wrap__left {
    padding-left: 0;
    padding-right: 0;
  }
}
.about .about-wrap__left h2 {
  font-size: 28px;
}
.about .about-wrap__left .btn {
  margin-top: 30px;
}
@media (max-width: 766.98px) {
  .about .about-wrap__left {
    width: 100%;
  }
}
.about .about-wrap__right {
  width: 40%;
}
.about .about-wrap__right img {
  width: 100%;
}
@media (max-width: 766.98px) {
  .about .about-wrap__right {
    width: 100%;
  }
}
.about .about-wrap.contact-box .about-wrap__left {
  width: 40%;
}
@media (max-width: 766.98px) {
  .about .about-wrap.contact-box .about-wrap__left {
    width: 100%;
  }
}
.about .about-wrap.contact-box .about-wrap__right {
  width: 60%;
}
@media (max-width: 766.98px) {
  .about .about-wrap.contact-box .about-wrap__right {
    width: 100%;
  }
}
.about.inner-page .about-wrap__left {
  width: 75%;
  padding-right: 50px;
}
@media (max-width: 766.98px) {
  .about.inner-page .about-wrap__left {
    width: 100%;
    padding-right: 0;
  }
}
.about.inner-page .about-wrap__left p {
  margin-bottom: 32px;
}
.about.inner-page .about-wrap__right {
  width: 25%;
  margin-bottom: 20px;
}

.service {
  padding: 80px 0;
  background: url(../images/service-bg.jpg) repeat;
}
.service h2 {
  color: #ffffff;
  margin-bottom: 30px;
}
@media (max-width: 1023.98px) {
  .service__content {
    flex-wrap: wrap;
  }
}
.service__box {
  display: block;
  width: calc(25% - 15px);
  background: #ffffff;
  border-radius: 10px;
  padding: 30px;
  margin: 0 10px;
}
.service__box .img-box img {
  width: 100%;
}
.service__box .icon-box img {
  width: 68px;
}
.service__box h3 {
  font-size: 22px;
  font-weight: 600;
  color: #0F315B;
  margin-top: 20px;
  margin-bottom: 15px;
  min-height: 60px;
  text-align: center;
}
.service__box .content {
  min-height: 170px;
}
.service__box .read-more {
  text-align: right;
}
.service__box .read-more a {
  font-size: 14px;
  color: #61483A;
  position: relative;
  padding-right: 15px;
}
.service__box .read-more a:after {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 1px solid #EB1D36;
  border-right: 1px solid #EB1D36;
  position: absolute;
  top: 7px;
  right: 0px;
  transform: rotate(45deg);
}
@media (max-width: 1023.98px) {
  .service__box {
    width: calc(50% - 15px);
    margin-bottom: 30px;
  }
}
@media (max-width: 766.98px) {
  .service__box {
    width: 100%;
    margin-bottom: 30px;
  }
}

.contact-grid {
  padding: 80px 0;
  background: url(../images/contact-bg.jpg) no-repeat;
  background-size: cover;
}
.contact-grid .content-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media (max-width: 1023.98px) {
  .contact-grid .content-wrapper {
    flex-wrap: wrap;
  }
}
.contact-grid__left {
  width: 70%;
}
@media (max-width: 766.98px) {
  .contact-grid__left {
    width: 100%;
  }
}
.contact-grid__left h2 {
  color: #ffffff;
  font-size: 28px;
}
.contact-grid__left p {
  color: #E8E8E8;
}
.contact-grid__right {
  width: 25%;
}
.contact-grid__right .btn {
  padding: 20px 50px;
  width: 100%;
}
@media (max-width: 766.98px) {
  .contact-grid__right {
    margin-top: 30px;
    width: 100%;
  }
}

.personals {
  background: #F4F4F4;
  padding: 80px 0;
}
.personals h2 {
  text-align: center;
  margin-bottom: 30px;
}
.personals .key-wrap {
  display: flex;
  flex-wrap: wrap;
}
.personals .key-wrap .item {
  width: calc(50% - 15px);
  padding: 30px 0 80px 80px;
  position: relative;
  margin-bottom: 30px;
}
@media (max-width: 1023.98px) {
  .personals .key-wrap .item {
    width: 100%;
    padding: 30px 0 20px 30px;
  }
}
.personals .key-wrap .item p {
  position: relative;
  z-index: 3;
}
.personals .key-wrap .item .name {
  font-weight: 700;
  color: #000000;
  margin-bottom: 20px;
}
.personals .key-wrap .item .name span {
  font-weight: 500;
}
.personals .key-wrap .item:after {
  content: "";
  position: absolute;
  padding: 100%;
  background: #FFE8DC;
  padding: 15%;
  left: 0;
  top: 0;
  border-radius: 200px;
}

.empanelment {
  padding: 80px 0;
  background: url(../images/service-bg.jpg);
  background-repeat: repeat;
}
.empanelment h2 {
  color: #ffffff;
  text-align: center;
  margin-bottom: 60px;
}
.empanelment .em-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.empanelment .em-wrap .item {
  width: 48%;
  background: #ffffff;
  padding: 15px;
  border-radius: 10px;
  margin-bottom: 20px;
  padding-left: 75px;
  min-height: 74px;
  display: flex;
  align-items: center;
  position: relative;
}
@media (max-width: 1023.98px) {
  .empanelment .em-wrap .item {
    width: 100%;
  }
}
.empanelment .em-wrap .item p {
  margin-bottom: 0;
}
.empanelment .em-wrap .item:after {
  content: "";
  width: 20px;
  height: 20px;
  border-top: 1px solid #EB1D36;
  border-right: 1px solid #EB1D36;
  position: absolute;
  top: 26px;
  left: 19px;
  transform: rotate(45deg);
}

.banner-text {
  background: #0F315B url(../images/banner/44bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  padding: 20px;
  text-align: center;
}
.banner-text .net-banner__title {
  text-align: center;
  text-transform: uppercase;
}
.banner-text .net-banner__title span {
  font-size: 20px;
}
@media (max-width: 766.98px) {
  .banner-text .net-banner__title span {
    font-size: 16px;
  }
}

.brands {
  padding: 80px 0;
  background: #0F315B url(../images/service-bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
.brands h2 {
  color: #ffffff;
}
.brands-wrap {
  display: flex;
}
.brands-wrap__left {
  width: 70%;
  padding-right: 30px;
}
@media (max-width: 766.98px) {
  .brands-wrap__left {
    padding-right: 0;
  }
}
.brands-wrap__left p {
  color: #ffffff;
}
.brands-wrap__right {
  width: 30%;
}

.service-inner {
  padding-bottom: 60px;
}
.service-inner .sr-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 80px 0;
}
.service-inner .sr-head__left {
  width: 30%;
}
.service-inner .sr-head__left img {
  width: 100%;
}
@media (max-width: 1023.98px) {
  .service-inner .sr-head__left {
    width: 100%;
  }
}
.service-inner .sr-head__right {
  width: 65%;
}
@media (max-width: 1023.98px) {
  .service-inner .sr-head__right {
    width: 100%;
  }
}
.service-inner .sr-content__item {
  margin-bottom: 60px;
}
@media (max-width: 1023.98px) {
  .service-inner .sr-content__item {
    margin-bottom: 30px;
  }
}
.service-inner .sr-content__head h3 {
  font-weight: 600;
  color: #0F315B;
  margin-bottom: 20px;
}
.service-inner .sr-content__list {
  display: flex;
  flex-wrap: wrap;
  gap: 50px;
}
.service-inner .sr-content__list-img {
  width: 50%;
}
@media (max-width: 766.98px) {
  .service-inner .sr-content__list-img {
    width: 100%;
    margin-bottom: 20px;
  }
}
.service-inner .sr-content__list-img img {
  width: 100%;
}
.service-inner .sr-content__list-contnet {
  width: 45%;
}
@media (max-width: 766.98px) {
  .service-inner .sr-content__list-contnet {
    width: 100%;
  }
}
.service-inner .sr-content__list-contnet h4 {
  font-weight: 600;
  margin-bottom: 15px;
}
.service-inner .sr-content__list-contnet ul {
  margin-bottom: 20px;
}
.service-inner .sr-content__list-contnet ul li {
  position: relative;
  font-size: 1rem;
  color: #444444;
  padding-left: 30px;
}
.service-inner .sr-content__list-contnet ul li:after {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 1px solid #EB1D36;
  border-right: 1px solid #EB1D36;
  position: absolute;
  top: 7px;
  left: 0px;
  transform: rotate(45deg);
}
.service-inner .service-wrap {
  width: 990px;
}
@media (max-width: 1023.98px) {
  .service-inner .service-wrap {
    width: 100%;
  }
}
.service-inner .pt-0 {
  padding-top: 0 !important;
}
.service-inner .pt-50 {
  padding-top: 80px;
}

.product-inner-list .service {
  background: none;
}
.product-inner-list .service__content {
  flex-wrap: wrap;
  justify-content: start;
}
.product-inner-list .service__box {
  width: calc(33.33333% - 15px);
}

.product-inner__main {
  padding: 80px 0;
}
.product-inner__main .nav-tabs,
.product-inner__main .nav-link,
.product-inner__main .nav-link.active {
  padding: 0;
  border: 0 !important;
}
.product-inner__main .nav-tabs {
  align-items: baseline;
  min-height: 60px;
  margin-bottom: 30px;
  position: sticky;
  z-index: 4;
  top: 83px;
  background: #ffffff;
}
.product-inner__main .nav-tabs .nav-item:first-child .nav-link {
  margin-left: 0 !important;
}
.product-inner__main .nav-link {
  font-size: 16px;
  font-weight: 500;
  margin: 0 30px !important;
  transition: all 0.4s;
  -moz-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  color: #999999;
  border-bottom: 2px solid #ffffff !important;
}
.product-inner__main .nav-link.active {
  text-decoration: none;
  font-size: 30px;
  color: #ed1c24 !important;
}
.product-inner__main .nav-link:hover {
  color: #ed1c24 !important;
  border-bottom: 2px solid #ed1c24 !important;
}
.product-inner__box {
  margin-bottom: 40px;
}
.product-inner__box-img {
  margin-bottom: 10px;
  border: 1px solid #ececec;
}
.product-inner__box-img img {
  width: 100%;
}
.product-inner__box-title span {
  font-size: 13px;
  color: #555555;
}
.product-inner__box-title h4 {
  font-size: 22px;
  font-weight: 500;
  color: #555555;
  margin-top: 20px;
  margin-bottom: 15px;
}
.product-inner__box-content p {
  color: #777777;
}

.recipes-box h2 {
  font-size: 30px;
  color: #153462;
  margin-bottom: 20px;
  background: #f8fbff;
  padding: 10px 20px;
  border-radius: 10px;
}
.recipes-box h3 {
  font-size: 24px;
  color: #E0144C;
}
.recipes-box h4 {
  font-size: 18px;
  color: #555555;
  margin-top: 30px;
}
.recipes-box__list {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0 0 10px 0;
}
.recipes-box__list li {
  padding: 4px 10px;
  border: 1px solid #d1d1d1;
  margin-right: 5px;
  margin-bottom: 5px;
  border-radius: 4px;
}
.recipes-box__item {
  padding: 30px 0;
}

@media (max-width: 768px) {
  .mobile {
    display: block;
  }
  .desktop {
    display: none;
  }
}
@media (min-width: 769px) {
  .mobile {
    display: none;
  }
  .desktop {
    display: block;
  }
}

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