@charset "UTF-8";

/* =================
    Google Fonts 
===================*/
@import url("https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Rubik:wght@400;500;600;700&display=swap");
/* =================
    Root Color 
=================*/
:root {
  /* Brand Colors */
  --color-white: var(--color-rank-2);
  --color-white2: var(--color-rank-4);
  --color-black: var(--color-rank-3);
  --color-orange: var(--color-rank-1);
  --color-orange2: var(--color-rank-7);
  
  /* Gray Scale */
  --color-gBlack: var(--color-rank-5);
  --color-gBlack2: var(--color-rank-8);
  --color-gray-light: var(--color-rank-12);
  --color-gray-medium: var(--color-rank-13);
  --color-gray-dark: var(--color-rank-14);
  --color-gray-border: var(--color-rank-15);
  
  /* UI Colors */
  --color-border: var(--color-rank-6);
  --color-error: var(--color-rank-10);
  --color-success: var(--color-rank-11);
  --color-danger: var(--color-rank-16);
  --color-cookie-bg: #f8f8f8ef;
  
  /* Gradient Colors */
  --color-gradient-start: var(--color-rank-9);

  
  /* Text Shadow Values */
  --text-shadow-glow: 0 0 10px rgba(255, 255, 255, 0.3), 0 0 20px rgba(255, 255, 255, 0.2), 0 0 30px rgba(0, 255, 255, 0.1);
  --text-shadow-glow-hover: 0 0 15px rgba(255, 255, 255, 0.5), 0 0 30px rgba(255, 255, 255, 0.4), 0 0 45px rgba(0, 255, 255, 0.2);
  --text-shadow-orange: 0 0 8px rgba(224, 226, 219, 0.6);
  
  /* Typography */
  --font-primary: "Rubik", sans-serif;
  --font-heading: "Rajdhani", sans-serif;
  --font-icon: "icomoon";
  --font-modern: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  --font-mono: monospace, monospace;
  
  /* Box Shadows */
  --shadow-light: 0px 4.8px 24.4px -6px rgba(19, 16, 34, 0.1), 0px 4px 13px -2px rgba(19, 16, 34, 0.06);
  --shadow-medium: 0px 4.4px 20px rgba(19, 16, 34, 0.05);
  --shadow-medium-offset: 0px 4.4px 20px -1px rgba(19, 16, 34, 0.05);
  --shadow-heavy: 0 0 30px rgba(0, 0, 0, 0.09);
  --shadow-focus: 0 0 0 0em rgba(0, 123, 255, 0.25);
  --shadow-card: 0 4px 10px rgba(0, 0, 0, 0.15);
  --shadow-card-hover: 0 10px 20px rgba(0, 0, 0, 0.25);
  --shadow-form: 0px 0px 20px 0px var(--color-gray-medium);
  --shadow-cookie: 0 -2px 5px rgba(0, 0, 0, 0.1);
  --shadow-sticky: 4px 0 20px 10px hsla(0, 0%, 54%, 0.34);
  --shadow-whatsapp: 2px 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-orange: 0 5px 15px rgba(211, 142, 37, 0.4);
  --shadow-orange-hover: 0 8px 20px rgba(255, 186, 8, 0.6);
  --shadow-orange-light: 0 8px 20px rgba(255, 186, 8, 0.4);
}



/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: var(--font-mono); /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: var(--font-mono); /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

/*====================
	 Default
======================*/
*,
html,
body,
div,
span,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
address,
big,
cite,
code,
del,
img,
q,
small,
strong,
sub,
sup,
tt,
b,
u,
i,
dl,
dt,
dd,
ol,
ul,
li,
table,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
footer,
header,
menu,
nav,
section,
mark,
audio,
video,
::before,
::after {
  margin: 0;
  padding: 0;
  border: 0;
}

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

article,
aside,
footer,
header,
nav,
section {
  display: block;
}

blockquote,
q {
  quotes: none;
}

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

ul,
ol,
li {
  list-style: none;
}

img {
  vertical-align: middle;
}

iframe {
  max-width: 100%;
}

del {
  text-decoration: line-through;
}

table {
  width: 100%;
  max-width: 100%;
}

table th {
  vertical-align: top;
}

pre {
  display: block;
  word-break: break-all;
  word-wrap: break-word;
}

textarea {
  resize: initial;
}

b,
strong {
  font-weight: 700;
}

blockquote,
q {
  quotes: none;
}

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

input,
.uneditable-input,
select,
textarea {
  border-radius: 0;
  font-size: 14px;
  min-width: auto;
  letter-spacing: 1.4px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  line-height: 1.6;
  height: 50px;
  padding: 0px 20px;
  vertical-align: middle;
}

input:focus,
.uneditable-input:focus,
select:focus,
textarea:focus {
  outline: none;
  -webkit-box-shadow: var(--shadow-focus);
          box-shadow: var(--shadow-focus);
}

input[type=submit] {
  padding: 13px 15px;
  height: 40px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: 0.5px;
  border: none;
}

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

/*=====================
    1 Theme Default
=======================*/
.row,
.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
  --bs-gutter-x: 1.875rem;
}

html {
  overflow-x: hidden;
}

body {
  font-family: var(--font-primary);
  font-size: 14px;
  line-height: 25px;
  letter-spacing: 0.5px;
  word-spacing: 0px;
  word-wrap: break-word;
  background: var(--color-white);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  color: var(--color-black);
}

h1 {
  font-size: 54px;
  line-height: 66px;
}

h2 {
  font-size: 48px;
  line-height: 60px;
}

h3 {
  font-size: 32px;
  line-height: 44px;
}

h4 {
  font-size: 24px;
  line-height: 36px;
}

h5 {
  font-size: 20px;
  line-height: 30px;
}

h6 {
  font-size: 18px;
  line-height: 28px;
}

p {
  font-size: 16px;
  font-weight: 400;
  margin: 0;
  padding: 0;
  line-height: 26px;
  color: var(--color-gBlack);
}

.color-orange {
  color: var(--color-orange);
}

a,
button,
.btn {
  outline: none;
  cursor: pointer;
  color: var(--color-black);
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
a:hover,
button:hover,
.btn:hover {
  color: var(--color-orange);
  outline: none;
}

a {
  text-decoration: none;
}
a:hover {
  color: var(--color-orange);
  text-decoration: none;
}

.btn,
.btn:focus {
  outline: none;
  -webkit-box-shadow: var(--shadow-focus);
          box-shadow: var(--shadow-focus);
}

input,
.uneditable-input,
select,
textarea {
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

section {
  padding: 50px 0px;
}

/*=====================
    2 Top Bar
=======================*/
.top-bar .info-link .my-icon {
  color: var(--color-orange);
}
.top-bar .my-icon ~ p {
  display: inline-block;
  margin-left: 10px;
}
.top-bar .info-link ul,
.top-bar .social-link ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.top-bar .info-link ul,
.top-bar .social-link ul {
  gap: 12px;
}
.top-bar .info-link ul {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.top-bar .info-link li:nth-child(3),
.top-bar .social-link {
  display: none;
}
.top-bar .social-link ul {
  gap: 25px;
}
.top-bar .social-link a {
  font-size: 15px;
}
.top-bar.v1 {
  padding: 15px 0px;
  background: var(--color-black);
}
.top-bar.v1 p,
.top-bar.v1 p a {
  color: var(--color-white);
}
.top-bar.v1 p a:hover {
  color: var(--color-orange);
}
.top-bar.v1 .top-left {
  display: none;
}
.top-bar.v1 .top-right .social-link ul::before {
  content: "Follow On :";
  color: var(--color-white);
}
.top-bar.v1 .top-right .social-link a {
  color: var(--color-white);
}
.top-bar.v1 .top-right .social-link a:hover {
  color: var(--color-orange);
}
.top-bar.v2 {
  padding: 15px 0px;
  background: var(--color-white2);
}
.top-bar.v2 p,
.top-bar.v2 p a {
  color: var(--color-gBlack);
}
.top-bar.v2 p a:hover {
  color: var(--color-orange);
}
.top-bar.v2 .social-link ul {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}
.top-bar.v2 .social-link a {
  color: var(--color-gBlack);
}
.top-bar.v2 .social-link a:hover {
  color: var(--color-orange);
}

/*=====================
    3 Menu Bar
=======================*/
.menu-bar {
  padding: 20px 0px;
  background: var(--color-white);
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.menu-bar.sticky-header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 5;
  -webkit-box-shadow: var(--shadow-sticky);
          box-shadow: var(--shadow-sticky);
}
.menu-bar .menu-bar-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.menu-bar .menu-logo a {
  display: inline-block;
  max-width: 150px;
}
.menu-bar .menu-logo img {
  width: 100%;
}
.menu-bar .main-menu, .menu-bar.v1 .right-btn {
  display: none;
}
.menu-bar .main-menu ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 30px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.menu-bar .main-menu ul a {
  display: block;
  padding: 30px 0px;
  font-weight: 500;
  font-size: 16px;
}
.menu-bar .main-menu ul a span {
  font-size: 10px;
  margin-left: 5px;
}
.menu-bar .main-menu ul a.active {
  color: var(--color-orange);
}
.menu-bar .main-menu ul ul {
  position: absolute;
  min-width: 220px;
  gap: 0;
  top: 80%;
  left: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-shadow: var(--shadow-heavy);
          box-shadow: var(--shadow-heavy);
  background: var(--color-white);
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  z-index: 4;
}
.menu-bar .main-menu ul ul ul {
  left: 100%;
}
.menu-bar .main-menu ul li {
  position: relative;
}
.menu-bar .main-menu ul li:nth-last-child(1) ul, .menu-bar .main-menu ul li:nth-last-child(2) ul, .menu-bar .main-menu ul li:nth-last-child(3) ul {
  right: 0;
}
.menu-bar .main-menu ul li:nth-last-child(1) ul ul, .menu-bar .main-menu ul li:nth-last-child(2) ul ul, .menu-bar .main-menu ul li:nth-last-child(3) ul ul {
  right: 100%;
}
.menu-bar .main-menu ul li:nth-last-child(1) ul,
.menu-bar .main-menu ul li:nth-last-child(1) ul ul, .menu-bar .main-menu ul li:nth-last-child(2) ul,
.menu-bar .main-menu ul li:nth-last-child(2) ul ul, .menu-bar .main-menu ul li:nth-last-child(3) ul,
.menu-bar .main-menu ul li:nth-last-child(3) ul ul {
  left: inherit;
}
.menu-bar .main-menu ul li li {
  width: 100%;
}
.menu-bar .main-menu ul li li ~ li {
  border-top: 1px dashed var(--color-orange);
}
.menu-bar .main-menu ul li li a {
  padding: 15px 35px;
}
.menu-bar .main-menu ul li li:hover > ul {
  top: 0;
}
.menu-bar .main-menu ul li li:hover > a {
  padding-left: 45px;
}
.menu-bar .main-menu ul li:hover > a {
  color: var(--color-orange);
}
.menu-bar .main-menu ul li:hover > ul {
  top: 100%;
  opacity: 1;
  visibility: visible;
}
.menu-bar .mobile-menu-btn {
  position: relative;
  width: 35px;
  height: 25px;
  background: var(--color-tr);
}
.menu-bar .mobile-menu-btn span {
  position: absolute;
  width: 100%;
  height: 2px;
  left: 0;
  border-radius: 10px;
  background: var(--color-orange);
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.menu-bar .mobile-menu-btn span:nth-child(1) {
  top: 0;
}
.menu-bar .mobile-menu-btn span:nth-child(3) {
  bottom: 0;
}
.menu-bar .mobile-menu-btn.active span:nth-child(1) {
  width: 15px;
  top: 23px;
  -webkit-transform: translate(-1.5px, -5.3px) rotate(-135deg);
  transform: translate(-1.5px, -5.3px) rotate(-135deg);
}
.menu-bar .mobile-menu-btn.active span:nth-child(2) {
  width: 75%;
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg);
}
.menu-bar .mobile-menu-btn.active span:nth-child(3) {
  width: 15px;
  bottom: 23px;
  -webkit-transform: translate(-1.5px, 7.3px) rotate(135deg);
  transform: translate(-1.5px, 7.3px) rotate(135deg);
}
.menu-bar .mobile-menu {
  position: fixed;
  width: 320px;
  max-width: 100%;
  height: 100%;
  top: 0;
  left: -100%;
  opacity: 0;
  visibility: hidden;
  background: var(--color-white);
  -webkit-box-shadow: var(--shadow-heavy);
          box-shadow: var(--shadow-heavy);
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  z-index: 5;
}
.menu-bar .mobile-menu.active {
  left: 0;
  opacity: 1;
  visibility: visible;
}
.menu-bar .mobile-menu .mobile-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 30px;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  border-bottom: 1px dashed var(--color-orange);
}
.menu-bar .mobile-menu .mobile-header .close-mobile-btn {
  padding: 30px;
  border-left: 1px dashed var(--color-orange);
  background: var(--color-tr);
}
.menu-bar .mobile-menu .mobile-logo {
  padding-left: 20px;
}
.menu-bar .mobile-menu .mobile-logo a {
  display: inline-block;
  max-width: 150px;
}
.menu-bar .mobile-menu .mobile-logo a img {
  width: 100%;
}
.menu-bar .mobile-menu .mobile-overflow {
  margin-top: 25px;
  overflow-y: auto;
  height: calc(100% - 100px);
}
.menu-bar .mobile-menu .main-manu li {
  border-top: 1px dashed var(--color-orange);
}
.menu-bar .mobile-menu .main-manu li.active > a {
  color: var(--color-orange);
}
.menu-bar .mobile-menu .main-manu li.active a > .my-icon {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
.menu-bar .mobile-menu .main-manu > ul > li:first-child {
  border-top: none;
}
.menu-bar .mobile-menu .main-manu ul ul {
  display: none;
}
.menu-bar .mobile-menu .main-manu a {
  position: relative;
  display: block;
  padding: 15px 40px 15px 20px;
  font-size: 15px;
  line-height: 25px;
  font-weight: 500;
}
.menu-bar .mobile-menu .main-manu a span {
  position: absolute;
  top: 21px;
  right: 24px;
  font-size: 12px;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.menu-bar .mobile-menu .main-manu a.active {
  color: var(--color-orange);
}
.menu-bar .mobile-menu .socials-links {
  padding: 0 20px;
  margin-top: 30px;
}
.menu-bar .mobile-menu .socials-links ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 15px;
}
.menu-bar .mobile-menu .socials-links a {
  display: block;
  width: 45px;
  height: 45px;
  line-height: 45px;
  border-radius: 50px;
  text-align: center;
  font-size: 15px;
  color: var(--color-orange);
  border: 1px solid var(--color-orange);
  background: var(--color-white);
}
.menu-bar .mobile-menu .socials-links a:hover {
  color: var(--color-white);
  background: var(--color-orange);
}
.menu-bar .mobile-menu-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  background: var(--color-black);
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  z-index: 2;
}
.menu-bar .mobile-menu-overlay.active {
  opacity: 0.3;
  visibility: visible;
}
.menu-bar.v1 .right-btn a {
  padding: 35px 53px;
  display: block;
  border-radius: 0px;
}
.menu-bar.v1 .right-btn a:hover {
  color: var(--color-white);
}
.menu-bar.v1 .right-btn a:hover::before {
  left: 0;
}
.menu-bar.v2 .main-menu > ul {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.menu-bar.v2 .main-menu ul a {
  color: var(--color-gBlack);
}
.menu-bar.v2 .main-menu ul a.active {
  color: var(--color-orange);
}
.menu-bar.v2 .right-contact {
  display: none;
}
.menu-bar.v2 .right-contact .my-icon {
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  color: var(--color-white);
  font-size: 16px;
  border-radius: 50px;
  background: var(--color-orange);
}
.menu-bar.v2 .right-contact .text-content h4 {
  font-weight: 700;
  margin-top: -1px;
}

.link-anime,
.btn-anime {
  position: relative;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1.28px;
  border-radius: 5px;
  border: 2px solid var(--color-orange);
  text-transform: uppercase;
  overflow: hidden;
  background: var(--color-tr);
}
.link-anime.v1, .link-anime.v2,
.btn-anime.v1,
.btn-anime.v2 {
  z-index: 1;
}
.link-anime.v1::before, .link-anime.v1::after, .link-anime.v2::before, .link-anime.v2::after,
.btn-anime.v1::before,
.btn-anime.v1::after,
.btn-anime.v2::before,
.btn-anime.v2::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  z-index: -1;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.link-anime.v1,
.btn-anime.v1 {
  color: var(--color-orange);
  z-index: 1;
}
.link-anime.v1::before, .link-anime.v1::after,
.btn-anime.v1::before,
.btn-anime.v1::after {
  left: -100%;
  background: var(--color-orange);
}
.link-anime.v1::before,
.btn-anime.v1::before {
  opacity: 0.6;
}
.link-anime.v1:hover,
.btn-anime.v1:hover {
  color: var(--color-white);
  background: var(--color-tr);
}
.link-anime.v1:hover::after,
.btn-anime.v1:hover::after {
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
.link-anime.v1:hover::before, .link-anime.v1:hover::after,
.btn-anime.v1:hover::before,
.btn-anime.v1:hover::after {
  left: 0;
}
.link-anime.v2,
.btn-anime.v2 {
  color: var(--color-white);
}
.link-anime.v2::before, .link-anime.v2::after,
.btn-anime.v2::before,
.btn-anime.v2::after {
  left: 0;
  background: var(--color-orange);
}
.link-anime.v2::before,
.btn-anime.v2::before {
  opacity: 0.6;
}
.link-anime.v2:hover,
.btn-anime.v2:hover {
  color: var(--color-orange);
  background: var(--color-tr);
}
.link-anime.v2:hover::before,
.btn-anime.v2:hover::before {
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
.link-anime.v2:hover::before, .link-anime.v2:hover::after,
.btn-anime.v2:hover::before,
.btn-anime.v2:hover::after {
  left: -100%;
}
.link-anime.v3,
.btn-anime.v3 {
  padding: 22px 30px;
  color: var(--color-white);
  border: none;
}
.link-anime.v3:hover,
.btn-anime.v3:hover {
  background: var(--color-orange);
}
.link-anime.v4,
.btn-anime.v4 {
  border-color: var(--color-border);
}
.link-anime.v4:hover,
.btn-anime.v4:hover {
  color: var(--color-orange);
}
.link-anime.border-round,
.btn-anime.border-round {
  border-radius: 80px;
}
.link-anime span.my-icon,
.btn-anime span.my-icon {
  margin-left: 10px;
}

.link-anime {
  padding: 20px 30px;
  display: inline-block;
}
.link-anime::before, .link-anime::after {
  display: block;
}

.btn-anime {
  padding: 23.2px 30px;
  background: var(--color-tr);
}

.preloder {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 10;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: var(--color-white);
}
.preloder svg {
  width: 150px;
  height: 150px;
}
.preloder .small-circle,
.preloder .big-circle {
  stroke-width: 3px;
  stroke: var(--color-orange);
}
.preloder .small-circle {
  stroke-dasharray: 210;
  stroke-dashoffset: 210;
  -webkit-transform-origin: 50%;
          transform-origin: 50%;
  -webkit-animation: 1s draw-small infinite alternate;
          animation: 1s draw-small infinite alternate;
}
.preloder .big-circle {
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  -webkit-transform-origin: 50%;
          transform-origin: 50%;
  -webkit-animation: 1s draw-big infinite alternate 0.5s;
          animation: 1s draw-big infinite alternate 0.5s;
}

@-webkit-keyframes draw-small {
  0% {
    stroke-dashoffset: 0;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    stroke-dashoffset: 210;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes draw-small {
  0% {
    stroke-dashoffset: 0;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    stroke-dashoffset: 210;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes draw-big {
  0% {
    stroke-dashoffset: 0;
    -webkit-transform: rotateY(180deg) rotate(360deg);
    transform: rotateY(180deg) rotate(360deg);
  }
  100% {
    stroke-dashoffset: 240;
    -webkit-transform: rotateY(180deg) rotate(0deg);
    transform: rotateY(180deg) rotate(0deg);
  }
}
@keyframes draw-big {
  0% {
    stroke-dashoffset: 0;
    -webkit-transform: rotateY(180deg) rotate(360deg);
    transform: rotateY(180deg) rotate(360deg);
  }
  100% {
    stroke-dashoffset: 240;
    -webkit-transform: rotateY(180deg) rotate(0deg);
    transform: rotateY(180deg) rotate(0deg);
  }
}
.my-select {
  position: relative;
  display: inline-block;
}
.my-select .current {
  position: relative;
  padding: 0px 40px 0px 20px;
  height: 50px;
  font-weight: 400;
  font-size: 16px;
  line-height: 30px;
  border-radius: 5px;
  letter-spacing: 1.4px;
  color: var(--color-gBlack);
  border: 1px solid var(--color-border);
  background: var(--color-white);
}
.my-select .current::before {
  position: absolute;
  font-size: 10px;
  top: 50%;
  right: 20px;
  content: "\e902";
  font-family: var(--font-icon);
  -moz-osx-font-smoothing: grayscale;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.my-select .current.open::before {
  -webkit-transform: translateY(-50%) rotate(180deg);
  transform: translateY(-50%) rotate(180deg);
}
.my-select .list {
  position: absolute;
  width: 100%;
  top: 110%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-shadow: var(--shadow-heavy);
          box-shadow: var(--shadow-heavy);
  background: var(--color-white);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  z-index: 2;
}
.my-select .list.open {
  top: 100%;
  opacity: 1;
  visibility: visible;
}
.my-select .list li {
  cursor: pointer;
  padding: 10px 20px;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.my-select .list li:hover {
  padding: 10px 20px 10px 24px;
  color: var(--color-orange);
}
.my-select .list li ~ li {
  border-top: 1px dashed var(--color-orange);
}

.section-title h6,
.section-title h2,
.section-title-center h6,
.section-title-center h2 {
  font-weight: 700;
}
.section-title h6,
.section-title-center h6 {
  color: var(--color-orange);
  letter-spacing: 4px;
  text-transform: uppercase;
}
.section-title h6 ~ h2,
.section-title-center h6 ~ h2 {
  margin-top: 10px;
}
.section-title h2,
.section-title-center h2 {
  font-size: 40px;
  line-height: 50px;
  text-transform: capitalize;
}
.section-title ~ .row,
.section-title-center ~ .row {
  margin-top: 50px;
}
.section-title.title-left-right .right-content,
.section-title-center.title-left-right .right-content {
  margin-top: 10px;
}

.section-title-center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.star-mark {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
}
.star-mark .my-icon {
  font-size: 19px;
  color: var(--color-orange2);
}
.star-mark.star-1 li:nth-child(1) .my-icon::before, .star-mark.star-2 li:nth-child(1) .my-icon::before, .star-mark.star-2 li:nth-child(2) .my-icon::before, .star-mark.star-3 li:nth-child(1) .my-icon::before, .star-mark.star-3 li:nth-child(2) .my-icon::before, .star-mark.star-3 li:nth-child(3) .my-icon::before, .star-mark.star-4 li:nth-child(1) .my-icon::before, .star-mark.star-4 li:nth-child(2) .my-icon::before, .star-mark.star-4 li:nth-child(3) .my-icon::before, .star-mark.star-4 li:nth-child(4) .my-icon::before, .star-mark.star-5 li:nth-child(1) .my-icon::before, .star-mark.star-5 li:nth-child(2) .my-icon::before, .star-mark.star-5 li:nth-child(3) .my-icon::before, .star-mark.star-5 li:nth-child(4) .my-icon::before, .star-mark.star-5 li:nth-child(5) .my-icon::before {
  content: "\e93e";
}

.list-mark.two-col-list ul,
.list-mark li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.list-mark li {
  gap: 12px;
}
.list-mark li ~ li {
  margin-top: 15px;
}
.list-mark li p {
  width: calc(100% - 32px);
  margin-top: -4px;
}
.list-mark .my-icon {
  width: 20px;
  min-width: 20px;
  height: 20px;
  font-size: 10px;
  text-align: center;
  line-height: 24px;
  border-radius: 50px;
  color: var(--color-white);
  background: var(--color-orange);
}
.list-mark.two-col-list h2 ~ ul {
  margin-top: 15px;
}
.list-mark.two-col-list ul {
  gap: 20px 30px;
}
.list-mark.two-col-list h6 {
  width: calc(100% - 32px);
  font-weight: 700;
  color: var(--color-gBlack);
}
.list-mark.two-col-list li {
  gap: 12px;
}
.list-mark.two-col-list li ~ li {
  margin-top: 0px;
}

.slider {
  position: relative;
  overflow: hidden;
  padding-bottom: 45px;
}
.slider .swiper-pagination {
  bottom: 0px;
  z-index: 1;
}
.slider .swiper-pagination .swiper-pagination-bullet {
  position: relative;
  width: 30px;
  height: 5px;
  border-radius: 2px;
  padding: 0;
  opacity: 1;
  background: var(--color-gBlack);
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.slider .swiper-pagination .swiper-pagination-bullet ~ .swiper-pagination-bullet {
  margin: 0px 0px 0px 10px;
}
.slider .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: var(--color-black);
}

.faq-btn {
  position: relative;
  width: 100%;
  padding: 30px 90px 30px 30px;
  font-weight: 700;
  font-size: 18px;
  line-height: 28px;
  border-radius: 5px;
  text-align: inherit;
  background: var(--color-white);
}
.faq-btn span {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 30px;
  right: 30px;
  border-radius: 5px;
  background: var(--color-orange);
}
.faq-btn span::before, .faq-btn span::after {
  position: absolute;
  content: "";
  top: 14px;
  left: 9px;
  width: 12px;
  height: 2px;
  border-radius: 5px;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  background: var(--color-white);
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.faq-btn span::after {
  -webkit-transform: rotate(90deg) rotateY(-90deg);
  transform: rotate(90deg) rotateY(-90deg);
}
.faq-btn.collapsed span::after {
  -webkit-transform: rotate(90deg) rotateY(0deg);
  transform: rotate(90deg) rotateY(0deg);
}

.faq-content-body {
  padding: 13px 30px 30px 30px;
  background: var(--color-white);
}

.bg-cover,
.bg-cover-center {
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-cover-center {
  background-position: center;
}

.breadcum {
  position: relative;
  padding: 50px 0px;
  z-index: 1;
}
.breadcum::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.6;
  background: var(--color-black);
  z-index: -1;
}
.breadcum .breadcum-content {
  text-align: center;
}
.breadcum .breadcum-content h2 {
  color: var(--color-white);
  font-weight: 700;
  font-size: 38px;
  line-height: 48px;
}
.breadcum .breadcum-content h2 ~ ul {
  margin-top: 10px;
}
.breadcum .breadcum-content ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 5px;
  color: var(--color-white);
  font-size: 15px;
  line-height: 25px;
  font-weight: 700;
}
.breadcum .breadcum-content li ~ li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 5px;
}
.breadcum .breadcum-content li ~ li::before {
  content: "/";
}
.breadcum .breadcum-content a {
  display: block;
  color: var(--color-white);
}
.breadcum .breadcum-content a:hover {
  color: var(--color-orange);
}

.pegination-box ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 15px;
}
.pegination-box li.active a {
  color: var(--color-white);
  background: var(--color-orange);
}
.pegination-box a {
  display: block;
  font-weight: 700;
  color: var(--color-gBlack);
  font-size: 14px;
  line-height: 40px;
  text-align: center;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  background: var(--color-white2);
}
.pegination-box a:hover {
  color: var(--color-white);
  background: var(--color-orange);
}
.pegination-box a .my-icon {
  font-size: 14px;
}

.widgets .widget ~ .widget {
  margin-top: 30px;
}
.widgets .widget-header {
  padding: 15px;
  border-radius: 5px 5px 0px 0px;
  background: var(--color-orange);
}
.widgets .widget-header h4 {
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  color: var(--color-white);
}
.widgets .widget-content {
  padding: 30px 15px;
  border-radius: 0px 0px 5px 5px;
  background: var(--color-white2);
}
.widgets .search-widget form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.widgets .search-widget input {
  width: 100%;
  font-size: 16px;
  border-radius: 5px 0px 0px 5px;
}
.widgets .search-widget button {
  padding: 0;
  width: 50px;
  height: 50px;
  font-size: 15px;
  color: var(--color-gBlack);
  border-radius: 0px 5px 5px 0px;
  background: var(--color-white);
}
.widgets .post-list li,
.widgets .post-list li .date {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.widgets .post-list li {
  gap: 20px;
}
.widgets .post-list li ~ li {
  margin-top: 15px;
}
.widgets .post-list .date {
  gap: 10px;
}
.widgets .post-list .post-img {
  width: 75px;
}
.widgets .post-list .post-text {
  width: calc(100% - 75px);
}
.widgets .post-list .post-text .my-icon {
  color: var(--color-orange);
}
.widgets .post-list .post-text h6 {
  font-weight: 700;
  color: var(--color-gBlack2);
  margin-top: 2px;
}
.widgets .post-list .post-text h6 a {
  color: var(--color-gBlack2);
}
.widgets .post-list .post-text h6 a:hover {
  color: var(--color-orange);
}
.widgets .category-list ul {
  padding: 15px;
  border-radius: 5px;
  background: var(--color-white);
}
.widgets .category-list li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
}
.widgets .category-list li ~ li {
  margin-top: 20px;
}
.widgets .category-list h6 {
  font-weight: 700;
}
.widgets .category-list .my-icon {
  color: var(--color-orange);
  font-size: 14px;
}
.widgets .tags-widgets ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 12px;
}
.widgets .tags-widgets a {
  display: block;
  padding: 5px 20px;
  color: var(--color-gBlack);
  border-radius: 5px;
  background: var(--color-white);
}
.widgets .tags-widgets a:hover {
  color: var(--color-white);
  background: var(--color-orange);
}

.scroll-bottom-Top {
  position: fixed;
  width: 40px;
  height: 40px;
  right: 0px;
  bottom: 75px;
  text-align: center;
  line-height: 40px;
  opacity: 0;
  font-size: 13px;
  visibility: hidden;
  border-radius: 100px;
  color: var(--color-orange);
  background: var(--color-white);
  -webkit-box-shadow: var(--shadow-light);
          box-shadow: var(--shadow-light);
  z-index: 5;
}
.scroll-bottom-Top.show {
  right: 25px;
  opacity: 1;
  visibility: visible;
}
.scroll-bottom-Top .my-icon {
  display: inline-block;
  -webkit-transform: rotate(-180deg);
          transform: rotate(-180deg);
}

/*=====================
    4 Banner
  =======================*/
.banner {
  padding: 0;
}
.banner .banner-content {
  padding: 50px 0px;
}
.banner .banner-content h6,
.banner .banner-content h2,
.banner .banner-content p {
  color: var(--color-white);
}
.banner .banner-content h6,
.banner .banner-content h2 {
  font-weight: 700;
}
.banner .banner-content h6 {
  letter-spacing: 4px;
  text-transform: uppercase;
}
.banner .banner-content h2 {
  font-size: 48px;
  line-height: 50px;
}
.banner .banner-content ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 10px;
}
.banner .banner-content h6 ~ h2,
.banner .banner-content h2 ~ p {
  margin-top: 30px;
}
.banner .banner-content p ~ ul {
  margin-top: 40px;
}
.banner.v1 {
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.banner.v1::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: -webkit-gradient(linear, left top, right top, from(var(--color-gradient-start)), to(var(--color-gradient-end-transparent)));
  background: linear-gradient(90deg, var(--color-gradient-start) 0%, var(--color-gradient-end-transparent) 100%);
  z-index: -1;
}
.banner.v1::after {
  position: absolute;
  content: "";
  width: 54vh;
  height: 54vh;
  left: -16%;
  bottom: -12%;
  opacity: 0.3;
  background-image: url("../img/banner/v1/shap-1.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%, 100%;
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-animation: c-rotate 6.5s linear infinite;
          animation: c-rotate 6.5s linear infinite;
  z-index: -1;
}
@-webkit-keyframes c-rotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes c-rotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.banner.v2 {
  position: relative;
  padding: 50px 0px;
  z-index: 1;
  background-size: cover;
  background-position: center;
}
.banner.v2::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0.6;
  background: var(--color-black);
}

/*=====================
     5 About Us
  =======================*/
.about-us .section-title ~ .items-content,
.about-us .items-content ~ .items-link {
  margin-top: 40px;
}
.about-us .about-img {
  position: relative;
  width: calc(100% - 45px);
  margin: 21px 21px 15px 21px;
}
.about-us .about-img::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -webkit-transform: rotate(-5deg);
  transform: rotate(-5deg);
  background: var(--color-orange);
  z-index: -1;
}
.about-us .about-img img {
  width: 100%;
}
.about-us .about-img .circle-play-btn {
  position: absolute;
  width: 105px;
  height: 105px;
  bottom: 6%;
  left: -6%;
  border-radius: 50%;
  background: var(--color-white);
  background-repeat: no-repeat;
  background-position: 3px -3px;
  background-size: 100%, 100%;
  border: 13px solid var(--color-white);
  -webkit-box-shadow: var(--shadow-light);
          box-shadow: var(--shadow-light);
  -webkit-animation: c-rotate 6.5s linear infinite;
          animation: c-rotate 6.5s linear infinite;
}
.about-us .about-img .circle-play-btn .my-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: var(--color-orange);
}
.about-us .about-content {
  margin-top: 40px;
}
.about-us .items-content li {
  padding: 30px;
  background: var(--color-white);
  -webkit-box-shadow: var(--shadow-light);
          box-shadow: var(--shadow-light);
  border-radius: 5px;
}
.about-us .items-content li ~ li {
  margin-top: 15px;
}
.about-us .items-content .my-icon {
  font-size: 65px;
  color: var(--color-orange);
}
.about-us .items-content .my-icon ~ .item-text {
  margin-top: 30px;
}
.about-us .items-content h4 {
  font-weight: 700;
  text-transform: capitalize;
}
.about-us .items-content h4 ~ p {
  margin-top: 10px;
}
.about-us .items-link ul,
.about-us .items-link .cantact-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.about-us .items-link ul {
  gap: 20px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.about-us .items-link .cantact-link {
  gap: 15px;
}
.about-us .items-link .cantact-link .left-icon {
  position: relative;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  color: var(--color-orange);
  font-size: 16px;
}
.about-us .items-link .cantact-link .left-icon::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.1;
  border-radius: 50px;
  background: var(--color-orange);
  z-index: -1;
}
.about-us .items-link .cantact-link .text-content h4 {
  font-weight: 700;
  margin-top: -1px;
}

/*=====================
     6 Services
  =======================*/
.services .row > div:first-child .services-card {
  margin-top: 0;
}
.services .services-card {
  margin-top: 30px;
}
.services.v1, .services.v2 {
  background: var(--color-white2);
}
.services.v3 {
  background: var(--color-white);
}
.services.v1 .services-card .services-text {
  padding: 30px;
  text-align: center;
  border-radius: 5px 5px 0px 0px;
  background: var(--color-white);
}
.services.v1 .services-card .services-text h4 {
  font-weight: 700;
  text-transform: capitalize;
}
.services.v1 .services-card .services-text h4 ~ p {
  margin-top: 20px;
}
.services.v1 .services-card .services-text p ~ .my-icon {
  margin-top: 45px;
}
.services.v1 .services-card .services-text .my-icon {
  position: relative;
  color: var(--color-white);
  font-size: 40px;
  width: 75px;
  height: 75px;
  text-align: center;
  line-height: 75px;
  border-radius: 5px;
  background: var(--color-orange);
  margin: 0px auto -85px auto;
  z-index: 0;
}
.services.v1 .services-card .services-img img {
  width: 100%;
  border-radius: 0px 0px 5px 5px;
}
.services.v2 .services-card .services-header, .services.v3 .services-card .services-header {
  padding: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 15px;
  border-radius: 5px 5px 0px 0px;
}
.services.v2 .services-card .services-header .my-icon, .services.v3 .services-card .services-header .my-icon {
  font-size: 40px;
  color: var(--color-orange);
}
.services.v2 .services-card .services-text h4, .services.v3 .services-card .services-text h4 {
  font-weight: 700;
  font-size: 20px;
  line-height: 30px;
}
.services.v2 .services-card .services-img, .services.v3 .services-card .services-img {
  position: relative;
  overflow: hidden;
  border-radius: 0px 0px 5px 5px;
}
.services.v2 .services-card .services-img img, .services.v3 .services-card .services-img img {
  width: 100%;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.services.v2 .services-card .services-img .sev-link, .services.v3 .services-card .services-img .sev-link {
  position: absolute;
  left: 0;
  bottom: -100%;
  width: 100%;
  padding: 20px 35px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  font-weight: 700;
  color: var(--color-white);
  text-transform: uppercase;
  background: var(--color-orange);
}
.services.v2 .services-card .services-img .sev-link:hover, .services.v3 .services-card .services-img .sev-link:hover {
  color: var(--color-black);
}
.services.v2 .services-card:hover .services-img img, .services.v3 .services-card:hover .services-img img {
  -webkit-transform: rotate(1.05deg) scale(1.1);
  transform: rotate(1.05deg) scale(1.1);
}
.services.v2 .services-card:hover .services-img .sev-link, .services.v3 .services-card:hover .services-img .sev-link {
  bottom: 0;
}
.services.v2 .services-card .services-header,
.services.v2 .services-card .services-img .sev-link:hover {
  background: var(--color-white);
}
.services.v3 .services-card .services-header,
.services.v3 .services-card .services-img .sev-link:hover {
  background: var(--color-white2);
}

/*=====================
     7 Work Gallery
  =======================*/
.work-gallery .row .gallery-card {
  margin-top: 30px;
}
.work-gallery .row > div:nth-child(1) .gallery-card {
  margin-top: 0px;
}
.work-gallery .section-title .right-content {
  margin-top: 10px;
}
.work-gallery .section-title ~ .gallery-img-boxs,
.work-gallery .section-title-center ~ .gallery-img-boxs {
  margin-top: 30px;
}
.work-gallery .gallery-img-boxs {
  display: grid;
  grid-gap: 15px;
}
.work-gallery .gallery-card {
  position: relative;
  border-radius: 5px;
  overflow: hidden;
}
.work-gallery .gallery-card .card-info {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  bottom: 20px;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.work-gallery .gallery-card img {
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.work-gallery .gallery-card:hover img {
  -webkit-transform: rotate(1.05deg) scale(1.1);
  transform: rotate(1.05deg) scale(1.1);
}
.work-gallery .gallery-img-horizontal .gallery-card img {
  min-height: 300px;
}
.work-gallery .gallery-img-vertical .gallery-card img {
  min-height: 200px;
}
.work-gallery.v1 .gallery-card .card-info {
  padding: 25px 20px;
  width: calc(100% - 40px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 15px;
  left: 50%;
  border-radius: 5px;
  -webkit-box-shadow: var(--shadow-light);
          box-shadow: var(--shadow-light);
  background: var(--color-white);
  -webkit-transform: translate(-50%, 0%) scale(0.8) rotateX(90deg);
  transform: translate(-50%, 0%) scale(0.8) rotateX(90deg);
  -webkit-transform-origin: bottom;
          transform-origin: bottom;
}
.work-gallery.v1 .gallery-card .card-info h4 {
  font-weight: 700;
}
.work-gallery.v1 .gallery-card .card-info h4 ~ p {
  margin-top: 5px;
}
.work-gallery.v1 .gallery-card .card-info p {
  color: var(--color-black);
}
.work-gallery.v1 .gallery-card .card-info .info-link {
  width: 50px;
  min-width: 50px;
  height: 50px;
  color: var(--color-white);
  line-height: 50px;
  text-align: center;
  border: 2px solid var(--color-orange);
  border-radius: 5px 0px 5px 0px;
  background: var(--color-orange);
}
.work-gallery.v1 .gallery-card .card-info .info-link .my-icon {
  font-size: 16px;
}
.work-gallery.v1 .gallery-card .card-info .info-link:hover {
  color: var(--color-orange);
  background: var(--color-tr);
}
.work-gallery.v1 .gallery-card:hover .card-info {
  -webkit-transform: translate(-50%, 0%) scale(1);
  transform: translate(-50%, 0%) scale(1);
  opacity: 1;
  visibility: visible;
}
.work-gallery.v2 .gallery-card {
  position: relative;
}
.work-gallery.v2 .gallery-card::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, left top, left bottom, from(var(--color-overlay-transparent)), to(var(--color-black)));
  background: linear-gradient(180deg, var(--color-overlay-transparent) 0%, var(--color-black) 100%);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  z-index: 1;
}
.work-gallery.v2 .gallery-card .card-info {
  padding: 50px 30px;
  width: 100%;
  left: 0;
  text-align: center;
  z-index: 2;
}
.work-gallery.v2 .gallery-card .card-info h4,
.work-gallery.v2 .gallery-card .card-info h4 a,
.work-gallery.v2 .gallery-card .card-info p {
  color: var(--color-white);
}
.work-gallery.v2 .gallery-card .card-info h4 {
  font-weight: 700;
}
.work-gallery.v2 .gallery-card .card-info h4 ~ p {
  margin-top: 5px;
}
.work-gallery.v2 .gallery-card .card-info h4 a:hover {
  color: var(--color-orange);
}
.work-gallery.v2 .gallery-card:hover::before,
.work-gallery.v2 .gallery-card:hover .card-info {
  opacity: 1;
  visibility: visible;
}
.work-gallery.v2 .gallery-card:hover .card-info {
  bottom: 0;
}

/*=====================
     8 Counter Section 
  =======================*/
.counter-section {
  position: relative;
  background: var(--color-black);
  z-index: 1;
}
.counter-section::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url("../img/counter/bg-shap.png");
  background-repeat: no-repeat;
  background-size: 100%, 100%;
  background-position: center;
  mix-blend-mode: overlay;
  z-index: -1;
}
.counter-section .counter-items ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 30px;
}
.counter-section .counter-items li {
  position: relative;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 1;
}
.counter-section .counter-items li::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: var(--color-orange);
  border-radius: 5px 0px 0px 5px;
  z-index: -1;
}
.counter-section .counter-items .my-icon {
  width: 110px;
  min-width: 110px;
  font-size: 50px;
  text-align: center;
  line-height: 101px;
  color: var(--color-white);
}
.counter-section .counter-items .content {
  padding: 20px;
  width: calc(100% - 100px);
  border-radius: 0px 5px 5px 0px;
  background: var(--color-white);
}
.counter-section .counter-items .content h2 {
  font-size: 45px;
  line-height: 45px;
  font-weight: 700;
  color: var(--color-orange);
}
.counter-section .counter-items .content h4 {
  font-size: 20px;
  font-weight: 700;
}

/*=====================
     9 Common Faq’s
  =======================*/
.common-faqs {
  padding-top: 0;
  position: relative;
  z-index: 1;
}
.common-faqs::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  background: var(--color-black);
}
.common-faqs .faq-content {
  padding: 30px 15px;
  border-radius: 5px;
  background: var(--color-white2);
}
.common-faqs .section-title ~ .accordion,
.common-faqs li ~ li {
  margin-top: 30px;
}
.common-faqs .faq-img {
  margin-top: 30px;
}
.common-faqs .faq-img img {
  width: 100%;
  border-radius: 5px;
}

/*========================
     10 Our Simple Step
  =======================*/
.our-simple-step .row > div:first-child .process-card {
  margin-top: 0;
}
.our-simple-step .process-card {
  padding: 30px;
  border-radius: 5px;
  margin-top: 30px;
}
.our-simple-step .process-card h4 {
  font-weight: 700;
}
.our-simple-step .process-card h4 ~ p {
  margin-top: 14px;
}
.our-simple-step.v1 .process-card {
  position: relative;
  background: var(--color-white2);
}
.our-simple-step.v1 .process-card .my-icon {
  width: 60px;
  height: 60px;
  font-size: 40px;
  color: var(--color-orange);
  border-radius: 5px;
  text-align: center;
  line-height: 60px;
  background: var(--color-white);
  -webkit-box-shadow: var(--shadow-light);
          box-shadow: var(--shadow-light);
  border-radius: 5px;
  margin-bottom: 15px;
}
.our-simple-step.v1 .process-card h6 {
  font-weight: 700;
}
.our-simple-step.v1 .process-card h6 {
  color: var(--color-orange);
}
.our-simple-step.v1 .process-card h6 ~ h4 {
  margin-top: 4px;
}
.our-simple-step.v2 .process-card {
  background: var(--color-white);
  -webkit-box-shadow: var(--shadow-light);
          box-shadow: var(--shadow-light);
}
.our-simple-step.v2 .process-card .process-card-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 30px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.our-simple-step.v2 .process-card .process-card-header .my-icon {
  color: var(--color-orange);
  font-size: 60px;
}
.our-simple-step.v2 .process-card .process-card-header h4 {
  color: var(--color-tr);
  font-size: 48px;
  line-height: 60px;
  -webkit-text-stroke: 1px var(--color-orange);
}
.our-simple-step.v2 .process-card .process-card-header ~ p {
  margin-top: 30px;
}
.our-simple-step.v2 .process-card p ~ h4 {
  margin-top: 5px;
}

/*========================
     11 Clients Review
  =======================*/
.clients-review .section-title ~ .slider {
  margin-top: 30px;
  padding-bottom: 0;
}
.clients-review .right-content {
  margin-top: 50px;
  text-align: right;
}
.clients-review .prev-btn,
.clients-review .next-btn {
  width: 45px;
  height: 45px;
}
.clients-review .prev-btn ~ .next-btn {
  margin-left: 15px;
}
.clients-review .client-card {
  padding: 30px;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.clients-review .client-card h6 {
  font-weight: 700;
}
.clients-review .client-card .star-mark ~ .profile {
  margin-top: 24px;
}
.clients-review .client-card .profile {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 20px;
}
.clients-review .client-card .profile-img {
  width: 50px;
  height: 50px;
}
.clients-review .client-card .profile-img img {
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
}
.clients-review.v1 {
  padding-top: 0;
}
.clients-review.v1 .prev-btn,
.clients-review.v1 .next-btn {
  position: relative;
  font-size: 12px;
  color: var(--color-orange);
  background: var(--color-tr);
  z-index: 1;
}
.clients-review.v1 .prev-btn::before,
.clients-review.v1 .next-btn::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.1;
  border-radius: 5px;
  background: var(--color-orange);
  z-index: -1;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.clients-review.v1 .prev-btn:hover,
.clients-review.v1 .next-btn:hover {
  color: var(--color-white);
}
.clients-review.v1 .prev-btn:hover::before,
.clients-review.v1 .next-btn:hover::before {
  opacity: 1;
}
.clients-review.v1 .client-card {
  border-radius: 10px;
  border-bottom: 5px solid var(--color-tr);
  background: var(--color-white2);
}
.clients-review.v1 .client-card .client-card-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 30px;
}
.clients-review.v1 .client-card .client-card-title .my-icon {
  width: 50px;
  min-width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-size: 24px;
  color: var(--color-white);
  border-radius: 50px;
  background: var(--color-orange);
}
.clients-review.v1 .client-card .client-card-title ~ p,
.clients-review.v1 .client-card p ~ .star-mark {
  margin-top: 30px;
}
.clients-review.v1 .client-card .profile-img img {
  border-radius: 50px;
}
.clients-review.v2 {
  background: var(--color-white2);
}
.clients-review.v2 .prev-btn,
.clients-review.v2 .next-btn {
  font-size: 16px;
  color: var(--color-black);
  border: 1px solid var(--color-border);
  border-radius: 5px;
  background: var(--color-white);
  z-index: 1;
}
.clients-review.v2 .prev-btn:hover,
.clients-review.v2 .next-btn:hover {
  color: var(--color-white);
  background: var(--color-orange);
}
.clients-review.v2 .client-card {
  border-radius: 5px;
  border: 1px solid var(--color-border);
  background: var(--color-white2);
}
.clients-review.v2 .client-card .star-mark {
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid var(--color-border);
}
.clients-review.v2 .client-card .profile-img img {
  border-radius: 5px;
}

/*========================
     12 Get In Touch
  =======================*/
.get-in-touch {
  position: relative;
  background: var(--color-black);
  z-index: 1;
}
.get-in-touch::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: -10%;
  opacity: 0.3;
  background: url("../img/get-in-touch/shap-bg.png");
  background-repeat: no-repeat;
  background-position: left;
  background-size: contain;
  z-index: -1;
}
.get-in-touch .left-content h2,
.get-in-touch .left-content p,
.get-in-touch .left-content .s-items-list .my-icon {
  color: var(--color-white);
}
.get-in-touch .left-content h2 {
  font-weight: 700;
}
.get-in-touch .left-content h2 ~ p {
  margin-top: 10px;
}
.get-in-touch .left-content p ~ .s-items-list {
  margin-top: 30px;
}
.get-in-touch .left-content .s-items-list li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
}
.get-in-touch .left-content .s-items-list li ~ li {
  margin-top: 5px;
}
.get-in-touch .left-content .s-items-list ~ a {
  margin-top: 30px;
}
.get-in-touch .card-items-list {
  margin-top: 50px;
}
.get-in-touch .card-items-list ul,
.get-in-touch .card-items-list li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.get-in-touch .card-items-list ul {
  gap: 30px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.get-in-touch .card-items-list li {
  width: 100%;
  gap: 13px;
  padding: 40px;
  border: 1px solid var(--color-border);
  background: var(--color-white);
}
.get-in-touch .card-items-list p {
  color: var(--color-black);
}
.get-in-touch .card-items-list h3 {
  font-weight: 700;
}
.get-in-touch .card-items-list .my-icon {
  font-size: 65px;
  color: var(--color-orange);
}
.get-in-touch .get-in-touch-form {
  padding: 35px 30px;
  border-radius: 5px;
  background: var(--color-white2);
  margin-top: 50px;
}
.get-in-touch .get-in-touch-form .section-title ~ form {
  margin-top: 25px;
}
.get-in-touch .input-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: 5px;
  background: var(--color-white);
}
.get-in-touch .input-box ~ .input-box {
  margin-top: 30px;
}
.get-in-touch .input-box input[type=number]::-webkit-inner-spin-button,
.get-in-touch .input-box input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.get-in-touch .input-box input[type=number] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}
.get-in-touch .input-box input[type=number] {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.get-in-touch .input-box.text-textarea {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}
.get-in-touch .input-box.text-textarea .my-icon {
  margin-top: 5px;
}
.get-in-touch .input-box input,
.get-in-touch .input-box textarea {
  padding-right: 0;
  font-size: 16px;
  width: calc(100% - 70px);
  background: var(--color-tr);
}
.get-in-touch .input-box input {
  height: 70px;
}
.get-in-touch .input-box textarea {
  padding-top: 16px;
  height: 140px;
}
.get-in-touch .input-box .my-icon {
  width: 70px;
  line-height: 50px;
  text-align: center;
  color: var(--color-orange);
  font-size: 14px;
}
.get-in-touch .input-box ~ .btn-anime {
  margin-top: 30px;
}
.get-in-touch .btn-anime {
  width: 100%;
}
.get-in-touch .btn-anime ~ .error,
.get-in-touch .btn-anime ~ .success {
  margin-top: 30px;
}
.get-in-touch .response.error,
.get-in-touch .response.success {
  padding: 20px;
  border-radius: 5px;
  background: var(--color-white);
}
.get-in-touch .response.error {
  color: var(--color-error);
}
.get-in-touch .response.success {
  color: var(--color-success);
}

/*========================
     13 Latest News
  =======================*/
.latest-news .row > div:first-child .new-post-card {
  margin-top: 0;
}
.latest-news .new-post-card {
  border-radius: 5px;
  background: var(--color-white);
  margin-top: 30px;
}
.latest-news .new-post-card .post-img {
  position: relative;
  overflow: hidden;
}
.latest-news .new-post-card .post-img img {
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.latest-news .new-post-card .post-content {
  padding: 30px 25px;
}
.latest-news .new-post-card .post-content h4 {
  font-weight: 700;
}
.latest-news .new-post-card .post-content h4 ~ p {
  margin-top: 10px;
}
.latest-news .new-post-card .post-content p ~ a {
  margin-top: 30px;
}
.latest-news .new-post-card .post-content a.link-anime {
  color: var(--color-black);
}
.latest-news .new-post-card .post-content a.link-anime .my-icon {
  color: var(--color-orange);
}
.latest-news .new-post-card .post-content a.link-anime:hover,
.latest-news .new-post-card .post-content a.link-anime:hover .my-icon {
  color: var(--color-white);
}
.latest-news .new-post-card:hover .post-img img {
  -webkit-transform: rotate(1.05deg) scale(1.1);
  transform: rotate(1.05deg) scale(1.1);
}
.latest-news.v1 .new-post-card {
  -webkit-box-shadow: var(--shadow-light);
          box-shadow: var(--shadow-light);
}
.latest-news.v1 .new-post-card .date-time {
  position: absolute;
  top: 30px;
  right: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  padding: 10px 15px;
  border-radius: 5px;
  background: var(--color-orange);
  z-index: 1;
}
.latest-news.v1 .new-post-card .date-time .my-icon,
.latest-news.v1 .new-post-card .date-time h6 {
  color: var(--color-white);
}
.latest-news.v2 .new-post-card {
  border: 1px solid var(--color-border);
}
.latest-news.v2 .new-post-card .date-time {
  position: absolute;
  width: 75px;
  height: 75px;
  top: 0;
  right: 0;
  z-index: 1;
  text-align: center;
}
.latest-news.v2 .new-post-card .date-time::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  opacity: 0.9;
  right: 0;
  top: 0;
  border-radius: 0px 5px 0px 0px;
  background: var(--color-white);
  z-index: -1;
}
.latest-news.v2 .new-post-card .date-time h4 {
  font-weight: 700;
  color: var(--color-orange);
}
.latest-news.v2 .new-post-card .post-info {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 10px 15px;
  border-radius: 0px 5px 0px 0px;
  background: var(--color-orange);
  z-index: 1;
}
.latest-news.v2 .new-post-card .post-info ul,
.latest-news.v2 .new-post-card .post-info li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.latest-news.v2 .new-post-card .post-info ul {
  gap: 12px;
}
.latest-news.v2 .new-post-card .post-info li {
  gap: 5px;
}
.latest-news.v2 .new-post-card .post-info .my-icon,
.latest-news.v2 .new-post-card .post-info p,
.latest-news.v2 .new-post-card .post-info p a {
  color: var(--color-white);
}

/*=====================
    14 Who We Are
  =======================*/
.who-we-are .left-images {
  margin-bottom: 50px;
}
.who-we-are .left-images img {
  width: 100%;
}
.who-we-are .left-images .count-and-img,
.who-we-are .left-images .count-user ~ .smaill-img {
  margin-top: 20px;
}
.who-we-are .left-images .count-user {
  padding: 25px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 5px;
  gap: 19px;
  background: var(--color-black);
}
.who-we-are .left-images .count-user .my-icon {
  min-width: 65px;
  width: 65px;
  height: 65px;
  font-size: 33px;
  line-height: 65px;
  text-align: center;
  color: var(--color-white);
  border-radius: 100px;
  background: var(--color-orange);
}
.who-we-are .left-images .count-content p,
.who-we-are .left-images .count-content h2 {
  color: var(--color-white);
}
.who-we-are .left-images .count-content h2 {
  font-weight: 700;
}
.who-we-are .left-images .count-content h2 ~ p {
  margin-top: -7px;
}
.who-we-are .right-content .section-title h2 ~ p {
  margin-top: 20px;
}
.who-we-are .right-content .section-title ~ .who-we-tabs {
  margin-top: 40px;
}
.who-we-are .right-content .who-we-tabs {
  gap: 30px;
}
.who-we-are .right-content .who-we-tabs button {
  border-color: var(--color-border);
  background: var(--color-white);
}
.who-we-are .right-content .who-we-tabs button.active {
  border-color: var(--color-orange);
  -webkit-box-shadow: var(--shadow-light);
          box-shadow: var(--shadow-light);
  background: var(--color-white);
}
.who-we-are .right-content .who-tab-content {
  padding-top: 20px;
}
.who-we-are .right-content .who-tab-content ~ .profile-and-button {
  margin-top: 40px;
}
.who-we-are .right-content .profile-and-button {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 30px;
}
.who-we-are .right-content .profile-and-button,
.who-we-are .right-content .profile-and-button .profile {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.who-we-are .right-content .profile-and-button .profile {
  gap: 20px;
}
.who-we-are .right-content .profile-and-button .profile-img img {
  width: 70px;
  height: 70px;
  border-radius: 100px;
}
.who-we-are .right-content .profile-and-button .profile-text p {
  color: var(--color-orange);
}
.who-we-are .right-content .profile-and-button .profile-text p ~ h4 {
  margin-top: 1px;
}
.who-we-are .right-content .profile-and-button .profile-text h4 {
  font-weight: 700;
}

/*=====================
    15 Company Benefits
  =======================*/
.company-benefits {
  position: relative;
}
.company-benefits::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
  background: var(--color-black);
  z-index: -1;
}
.company-benefits .content-box {
  margin-top: 30px;
}
.company-benefits .content-box h6,
.company-benefits .content-box h2,
.company-benefits .content-box h4,
.company-benefits .content-box p {
  color: var(--color-white);
}
.company-benefits .content-box .section-title h2 ~ p {
  margin-top: 20px;
}
.company-benefits .content-box .section-title ~ .benefits-list {
  margin-top: 40px;
}
.company-benefits .content-box .benefits-list .my-icon {
  color: var(--color-white);
  margin-top: 12px;
}
.company-benefits .content-box .benefits-list li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
}
.company-benefits .content-box .benefits-list li ~ li {
  margin-top: 30px;
}
.company-benefits .content-box .benefits-list .list-content h4 {
  font-weight: 700;
}
.company-benefits .content-box .benefits-list .list-content h4 ~ p {
  margin-top: 10px;
}
.company-benefits .content-box .benefits-list ul ~ .link-anime {
  margin-top: 50px;
}
.company-benefits .content-box .benefits-list .link-anime {
  border-color: var(--color-white);
}
.company-benefits .box-img {
  margin-top: 50px;
}
.company-benefits .box-img img {
  width: 100%;
}

/*=====================
    16 Our Team
  =======================*/
.our-tema .row > div:first-child .tema-card {
  margin-top: 0;
}
.our-tema .tema-card {
  border-radius: 5px;
  background: var(--color-white2);
  margin-top: 30px;
}
.our-tema .tema-card:hover .profile-img img {
  -webkit-transform: rotate(1.05deg) scale(1.1);
  transform: rotate(1.05deg) scale(1.1);
}
.our-tema .tema-card:hover .profile-img .social-link {
  opacity: 1;
  visibility: visible;
  bottom: 30px;
}
.our-tema .profile-img,
.our-tema .profile-info {
  padding: 30px;
}
.our-tema .profile-img {
  position: relative;
  padding-bottom: 0px;
  overflow: hidden;
}
.our-tema .profile-img a {
  display: block;
  overflow: hidden;
  border-radius: 5px;
}
.our-tema .profile-img img {
  width: 100%;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.our-tema .profile-img .social-link {
  position: absolute;
  width: 100%;
  bottom: 100px;
  opacity: 0;
  visibility: hidden;
  left: 0;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.our-tema .profile-img .social-link ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 10px;
}
.our-tema .profile-img .social-link a {
  display: block;
  width: 40px;
  height: 40px;
  font-size: 16px;
  color: var(--color-white);
  line-height: 40px;
  text-align: center;
  border-radius: 5px;
  background: var(--color-orange);
}
.our-tema .profile-img .social-link a:hover {
  color: var(--color-orange);
  background: var(--color-white);
}
.our-tema .profile-info {
  text-align: center;
}
.our-tema .profile-info h4 {
  font-weight: 700;
}
.our-tema .profile-info h4 ~ p {
  margin-top: 5px;
}

/*=====================
    17 Talk To Us
  =======================*/
.talk-to-us .left-img-numbber {
  padding-left: 18px;
}
.talk-to-us .left-img {
  position: relative;
}
.talk-to-us .left-img::before {
  position: absolute;
  content: "";
  width: 18px;
  height: 80%;
  top: 50%;
  left: -18px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  border-radius: 5px 0px 0px 5px;
  background: var(--color-orange);
}
.talk-to-us .left-img img {
  width: 100%;
  border-radius: 5px;
}
.talk-to-us .left-numbber {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 30px;
  border-radius: 5px;
  gap: 15px;
  margin: 30px 0px 0px -18px;
  background: var(--color-white);
  -webkit-box-shadow: var(--shadow-medium);
          box-shadow: var(--shadow-medium);
  z-index: 1;
}
.talk-to-us .left-numbber .my-icon {
  font-size: 35px;
  color: var(--color-orange);
}
.talk-to-us .left-numbber .text-content h4,
.talk-to-us .left-numbber .text-content h3 {
  font-weight: 700;
}
.talk-to-us .left-numbber .text-content h4 {
  color: var(--color-gBlack);
}
.talk-to-us .right-content {
  margin-top: 30px;
}
.talk-to-us .right-content .section-title ~ form {
  margin-top: 30px;
}
.talk-to-us .right-content form input,
.talk-to-us .right-content form textarea,
.talk-to-us .right-content form .current {
  width: 100%;
  font-size: 16px;
  height: 65px;
  border-radius: 5px;
}
.talk-to-us .right-content form input ~ .group-box,
.talk-to-us .right-content form input ~ .my-select,
.talk-to-us .right-content form input ~ select,
.talk-to-us .right-content form input ~ input,
.talk-to-us .right-content form .group-box ~ textarea,
.talk-to-us .right-content form textarea ~ .btn-anime {
  margin-top: 20px;
}
.talk-to-us .right-content form .btn-anime {
  width: 100%;
}
.talk-to-us .right-content form input[type=number]::-webkit-inner-spin-button,
.talk-to-us .right-content form input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.talk-to-us .right-content form input[type=number] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}
.talk-to-us .right-content form input[type=number] {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.talk-to-us .right-content form textarea {
  padding-top: 20px;
  height: 130px;
}
.talk-to-us .right-content form .my-select {
  width: 100%;
}
.talk-to-us .right-content form .current {
  text-align: inherit;
}
.talk-to-us .right-content form .btn-anime ~ .error,
.talk-to-us .right-content form .btn-anime ~ .success {
  margin-top: 30px;
}
.talk-to-us .right-content form .response.error,
.talk-to-us .right-content form .response.success {
  padding: 20px;
  border-radius: 5px;
  background: var(--color-white);
}
.talk-to-us .right-content form .response.error {
  color: var(--color-error);
}
.talk-to-us .right-content form .response.success {
  color: var(--color-success);
}
.talk-to-us.v1 {
  background: var(--color-black);
}
.talk-to-us.v1 .right-content .section-title h6,
.talk-to-us.v1 .right-content .section-title h2 {
  color: var(--color-white);
}
.talk-to-us.v1 .right-content form input,
.talk-to-us.v1 .right-content form textarea,
.talk-to-us.v1 .right-content form .current {
  color: var(--color-white);
  border: 1px solid var(--color-gray-border);
  background: var(--color-black);
}
.talk-to-us.v2 .right-content form input,
.talk-to-us.v2 .right-content form textarea,
.talk-to-us.v2 .right-content form .current {
  border: 1px solid var(--color-border);
  background: var(--color-tr);
}

/*=====================
    19 Team Details
=======================*/
.team-details .profile-img img {
  width: 100%;
}
.team-details .profile-info {
  margin-top: 30px;
}
.team-details .info-title h4,
.team-details .info-title h6 {
  font-weight: 700;
  text-transform: capitalize;
}
.team-details .info-title h4 ~ h6 {
  margin-top: 8px;
}
.team-details .info-title h6 {
  color: var(--color-orange);
}
.team-details .info-title h6 ~ p {
  margin-top: 15px;
}
.team-details .info-title ~ .info-list {
  margin-top: 30px;
}
.team-details .info-list li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 12px;
}
.team-details .info-list li ~ li {
  margin-top: 12px;
}
.team-details .info-list h4,
.team-details .info-list p,
.team-details .info-list p a {
  color: var(--color-gBlack);
}
.team-details .info-list h4 {
  font-size: 20px;
  line-height: 30px;
  font-weight: 700;
}
.team-details .info-list p a:hover {
  color: var(--color-orange);
}
.team-details .info-list ~ .info-social {
  margin-top: 30px;
}
.team-details .info-social ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 15px;
}
.team-details .info-social a {
  display: block;
  width: 40px;
  height: 40px;
  font-size: 16px;
  text-align: center;
  line-height: 40px;
  border-radius: 50px;
  color: var(--color-gBlack);
  background: var(--color-white2);
}
.team-details .info-social a:hover {
  color: var(--color-white);
  background: var(--color-orange);
}
.team-details .row ~ .team-description {
  margin-top: 30px;
}
.team-details .team-description h3 {
  font-weight: 700;
}
.team-details .team-description h3 ~ p {
  margin-top: 6px;
}
.team-details .team-description p ~ h3, .team-details .team-description ~ .row {
  margin-top: 30px;
}
.team-details .list-mark ul ~ p {
  margin-top: 30px;
}
.team-details .skills-list {
  margin-top: 30px;
}
.team-details .skills-list li ~ li {
  margin-top: 20px;
}
.team-details .skills-list .skill-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 15px;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.team-details .skills-list .skill-title h4 {
  font-weight: 700;
}
.team-details .skills-list .skill-title ~ .my-progress-bar {
  margin-top: 7px;
}
.team-details .skills-list .my-progress-bar {
  position: relative;
  width: 100%;
  height: 8px;
  border-radius: 50px;
  overflow: hidden;
}
.team-details .skills-list .my-progress-bar::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  opacity: 0.2;
  background: var(--color-orange);
}
.team-details .skills-list .my-progress-bar .progress-vale {
  height: 100%;
  border-radius: 50px;
  background: var(--color-orange);
}

/*=====================
    20 Service Details 
  =======================*/
.service-details .service-links-list h4 {
  font-weight: 700;
  padding: 15px 30px;
  border-radius: 5px;
  background: var(--color-white2);
}
.service-details .service-links-list h4 ~ ul {
  margin-top: 20px;
}
.service-details .service-links-list li ~ li {
  margin-top: 15px;
}
.service-details .service-links-list li a {
  padding: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 15px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  border-radius: 5px;
  color: var(--color-gBlack);
  font-weight: 700;
  font-size: 15px;
  line-height: 28px;
  border: 1px solid var(--color-border);
  background: var(--color-tr);
}
.service-details .service-links-list li a .my-icon {
  display: inline-block;
  width: 25px;
  height: 25px;
  font-size: 14px;
  line-height: 25px;
  border-radius: 50px;
  color: var(--color-orange);
  text-align: center;
  background: var(--color-white);
}
.service-details .service-links-list li a:hover {
  color: var(--color-white);
  border-color: var(--color-orange);
  background: var(--color-orange);
}
.service-details .service-links-list ~ .profile-img-numbber {
  margin-top: 50px;
}
.service-details img {
  width: 100%;
}
.service-details .profile-numbber {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 30px;
  border-radius: 5px;
  gap: 15px;
  margin: 30px 0px 50px 0px;
  background: var(--color-white);
  -webkit-box-shadow: var(--shadow-light);
          box-shadow: var(--shadow-light);
  z-index: 1;
}
.service-details .profile-numbber .my-icon {
  position: relative;
  width: 50px;
  height: 50px;
  font-size: 16px;
  line-height: 50px;
  text-align: center;
  color: var(--color-orange);
  z-index: 1;
}
.service-details .profile-numbber .my-icon::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 50px;
  opacity: 0.1;
  background: var(--color-orange);
  z-index: -1;
}
.service-details .profile-numbber .text-content h4 {
  font-weight: 700;
}
.service-details .service-content .big-img ~ .service-text {
  margin-top: 30px;
}
.service-details .service-content h2 {
  font-size: 40px;
  line-height: 50px;
  font-weight: 700;
}
.service-details .service-content .service-text h6 {
  font-weight: 700;
}
.service-details .service-content .service-text h2 ~ p,
.service-details .service-content .service-text p ~ h6 {
  margin-top: 15px;
}
.service-details .service-content .service-text ~ .list-mark {
  margin-top: 30px;
}
.service-details .service-content .list-mark h2 ~ ul {
  margin-top: 15px;
}
.service-details .service-content .list-mark ~ .services-box-imgs {
  margin-top: 50px;
}
.service-details .services-box-imgs .box-img ~ .box-img, .service-details .services-box-imgs ~ .services-faq {
  margin-top: 30px;
}
.service-details .services-faq h2 ~ ul {
  margin-top: 30px;
}
.service-details .services-faq .faq-btn {
  padding: 30px 50px 30px 20px;
}
.service-details .services-faq li {
  -webkit-box-shadow: var(--shadow-light);
          box-shadow: var(--shadow-light);
}
.service-details .services-faq li ~ li {
  margin-top: 30px;
}

/*=====================
    18 FAQ Section 
=======================*/
.faq-section .accordion li {
  background: var(--color-white);
  -webkit-box-shadow: var(--shadow-light);
          box-shadow: var(--shadow-light);
  border-radius: 5px;
}
.faq-section .accordion li ~ li {
  margin-top: 30px;
}

/*=====================
    21 Project Details 
=======================*/
.project-details .partnering-progress h3 {
  font-weight: 700;
}
.project-details .partnering-progress h3 ~ p {
  margin-top: 10px;
}
.project-details .partnering-progress p ~ ul {
  margin-top: 15px;
}
.project-details .partnering-progress li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 30px;
  padding: 25px 0px;
}
.project-details .partnering-progress li ~ li {
  border-top: 1px solid var(--color-border);
}
.project-details .partnering-progress li .my-icon {
  font-size: 48px;
  color: var(--color-orange);
}
.project-details .partnering-progress li .content h4 {
  font-weight: 700;
}
.project-details .partnering-progress li .content h4 ~ p {
  margin-top: 5px;
}
.project-details .big-img img {
  width: 100%;
  border-radius: 5px;
}
.project-details .project-content,
.project-details .project-details-box {
  margin-top: 50px;
}
.project-details .project-content p ~ p {
  margin-top: 20px;
}
.project-details .project-content h4 {
  font-weight: 700;
}
.project-details .project-content p ~ h4 {
  margin-top: 50px;
}
.project-details .project-content p ~ .list-mark {
  margin-top: 30px;
}
.project-details .project-details-box {
  border-radius: 5px;
  background: var(--color-white2);
}
.project-details .project-details-box .title {
  padding: 15px;
  text-align: center;
  border-radius: 5px 5px 0px 0px;
  background: var(--color-orange);
}
.project-details .project-details-box .title h4 {
  color: var(--color-white);
  font-weight: 700;
}
.project-details .project-details-box .box-info-list,
.project-details .project-details-box .star-mark {
  padding: 30px;
}
.project-details .project-details-box .box-info-list {
  padding-bottom: 20px;
}
.project-details .project-details-box .box-info-list li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 15px;
}
.project-details .project-details-box .box-info-list li ~ li {
  margin-top: 12px;
}
.project-details .project-details-box .box-info-list li h6,
.project-details .project-details-box .box-info-list li h4 {
  font-weight: 700;
}
.project-details .project-details-box .box-info-list li h4 {
  color: var(--color-orange);
}
.project-details .project-details-box .star-mark {
  padding-top: 0px;
}

/*=====================
       23 Blog Post
  =======================*/
.blog-post-card .tag,
.blog-post-details .tag {
  display: inline-block;
  padding: 8px 18px;
  font-weight: 700;
  font-size: 16px;
  line-height: 27px;
  color: var(--color-white);
  border-radius: 5px;
  background: var(--color-orange);
}

.blog-post-card ul,
.blog-post-card li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.blog-post-card ul {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 20px 0px;
  gap: 20px;
}
.blog-post-card li {
  gap: 5px;
}
.blog-post-card li .my-icon {
  color: var(--color-orange);
}
.blog-post-card .blog-img {
  position: relative;
  overflow: hidden;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.blog-post-card .blog-img .tag {
  position: absolute;
  left: 0;
  bottom: 0;
  border-radius: 0px 5px 0px 0px;
  z-index: 1;
}
.blog-post-card .blog-img a {
  position: relative;
  display: block;
}
.blog-post-card .blog-img a::before, .blog-post-card .blog-img a::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  opacity: 0.2;
  background: var(--color-black);
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.blog-post-card .blog-img a::before {
  top: 100%;
  left: 100%;
}
.blog-post-card .blog-img a::after {
  top: -100%;
  left: -100%;
}
.blog-post-card .blog-img img {
  position: relative;
  width: 100%;
  z-index: -2;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.blog-post-card .blog-content ul,
.blog-post-card .blog-content li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.blog-post-card .blog-content ul {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 20px 0px;
  gap: 20px;
}
.blog-post-card .blog-content li {
  gap: 5px;
}
.blog-post-card .blog-content li .my-icon {
  color: var(--color-orange);
}
.blog-post-card .blog-content h3 {
  text-transform: capitalize;
  font-weight: 700;
}
.blog-post-card .blog-content h3 ~ p {
  margin-top: 10px;
}
.blog-post-card .blog-content p ~ a {
  margin-top: 20px;
}
.blog-post-card ~ .blog-post-card {
  margin-top: 30px;
}
.blog-post-card ~ .pegination-box {
  margin: 30px 0;
}
.blog-post-card ~ .pegination-box ul {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.blog-post-card.video-box {
  position: relative;
}
.blog-post-card.video-box .blog-img::before, .blog-post-card.video-box .blog-img::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  opacity: 0.2;
  background: var(--color-black);
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.blog-post-card.video-box .blog-img::before {
  top: 100%;
  left: 100%;
}
.blog-post-card.video-box .blog-img::after {
  top: -100%;
  left: -100%;
}
.blog-post-card.video-box .blog-img img {
  width: 100%;
}
.blog-post-card.video-box .play-video-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 50px;
  height: 50px;
  font-size: 14px;
  border-radius: 100px;
  color: var(--color-white);
  background: var(--color-orange);
}
.blog-post-card.video-box .play-video-btn::before, .blog-post-card.video-box .play-video-btn::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 200px;
  z-index: -1;
  border: 2px solid var(--color-orange);
}
.blog-post-card.video-box .play-video-btn::before {
  -webkit-animation: f-zoom 5s 2s ease infinite;
          animation: f-zoom 5s 2s ease infinite;
}
.blog-post-card.video-box .play-video-btn::after {
  -webkit-animation: f-zoom 5s 4s ease infinite;
          animation: f-zoom 5s 4s ease infinite;
}
@-webkit-keyframes f-zoom {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  80% {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
  }
  100% {
    opacity: 0;
  }
}
@keyframes f-zoom {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  80% {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
  }
  100% {
    opacity: 0;
  }
}
.blog-post-card:hover .blog-img img {
  -webkit-transform: rotate(1.05deg) scale(1.1);
  transform: rotate(1.05deg) scale(1.1);
}
.blog-post-card:hover .blog-img::before, .blog-post-card:hover .blog-img::after,
.blog-post-card:hover .blog-img a::before,
.blog-post-card:hover .blog-img a::after {
  top: 0;
  left: 0;
}
.blog-post-card .post-slider {
  padding-bottom: 0;
}
.blog-post-card .post-slider .prev-btn,
.blog-post-card .post-slider .next-btn {
  position: absolute;
  width: 40px;
  height: 40px;
  font-size: 15px;
  color: var(--color-white);
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  line-height: 45px;
  background: var(--color-orange);
  z-index: 1;
}
.blog-post-card .post-slider .prev-btn {
  left: 0;
  border-radius: 0px 5px 5px 0px;
}
.blog-post-card .post-slider .next-btn {
  right: 0;
  border-radius: 5px 0px 0px 5px;
}

/*=====================
    24 Blog Post Details
  =======================*/
.blog-post-details .post-details-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 30px;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.blog-post-details .blog-img img,
.blog-post-details .box-img img {
  width: 100%;
}
.blog-post-details .blog-post-info ul,
.blog-post-details .blog-post-info li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.blog-post-details .blog-post-info ul {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 20px 0px;
  gap: 20px;
}
.blog-post-details .blog-post-info li {
  gap: 5px;
}
.blog-post-details .blog-post-info li .my-icon {
  color: var(--color-orange);
}
.blog-post-details .share-btns {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 50px;
  font-size: 16px;
  color: var(--color-orange);
  background: var(--color-white2);
}
.blog-post-details .blog-img ~ .blog-content {
  margin-top: 30px;
}
.blog-post-details .blog-content h3,
.blog-post-details .blog-content h4,
.blog-post-details .blog-content h6 {
  text-transform: capitalize;
  font-weight: 700;
}
.blog-post-details .blog-content h3 ~ p,
.blog-post-details .blog-content p ~ p {
  margin-top: 10px;
}
.blog-post-details .blog-content p ~ h4 {
  margin-top: 30px;
}
.blog-post-details .blog-content p ~ .blog-img-gallary,
.blog-post-details .blog-content p ~ .todays-resource,
.blog-post-details .blog-content p ~ .your-potential {
  margin-top: 40px;
}
.blog-post-details .blog-img-gallary {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 20px;
}
.blog-post-details .blog-img-gallary .box-img {
  width: calc(50% - 10px);
}
.blog-post-details .todays-resource h6 ~ ul {
  margin-top: 10px;
}
.blog-post-details .todays-resource .my-icon {
  color: var(--color-orange);
}
.blog-post-details .todays-resource li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
}
.blog-post-details .todays-resource li ~ li {
  margin-top: 10px;
}
.blog-post-details .your-potential .box-content {
  margin-top: 20px;
}
.blog-post-details .your-potential ul {
  padding-top: 20px;
  margin-top: 20px;
  border-top: 1px solid var(--color-border);
}
.blog-post-details .your-potential li ~ li {
  margin-top: 10px;
}
.blog-post-details .user-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-top: 20px;
}
.blog-post-details .user-content h5 {
  font-weight: 700;
}
.blog-post-details .user-content .my-icon {
  font-size: 50px;
  color: var(--color-border);
}
.blog-post-details .blog-content ~ .post-tags,
.blog-post-details .post-tags ~ .post-comments,
.blog-post-details .coomment-post ~ .all-comments,
.blog-post-details .all-comments ~ .comments-form {
  margin-top: 30px;
}
.blog-post-details .post-tags h4 {
  font-weight: 700;
}
.blog-post-details .post-tags,
.blog-post-details .post-tags ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 20px;
}
.blog-post-details .post-tags a {
  display: block;
  padding: 5px 20px;
  color: var(--color-black);
  border-radius: 5px;
  background: var(--color-white2);
}
.blog-post-details .post-tags a:hover {
  color: var(--color-white);
  background: var(--color-orange);
}
.blog-post-details .post-comments {
  margin-bottom: 50px;
}
.blog-post-details .post-comments .coomment-post {
  padding: 25px 30px;
  background: var(--color-white2);
}
.blog-post-details .post-comments .coomment-post .comment-img {
  width: 120px;
}
.blog-post-details .post-comments .coomment-post .comment-img img {
  width: 100%;
}
.blog-post-details .post-comments .coomment-post .comment-img ~ .comment-text {
  margin-top: 15px;
}
.blog-post-details .post-comments .coomment-post h4 {
  position: relative;
  font-weight: 700;
  padding-bottom: 5px;
}
.blog-post-details .post-comments .coomment-post h4::before {
  position: absolute;
  content: "";
  width: 30px;
  height: 2px;
  left: 0;
  bottom: 0;
  background: var(--color-orange);
}
.blog-post-details .post-comments .coomment-post h4 ~ p {
  margin-top: 10px;
}
.blog-post-details .post-comments .all-comments h3 {
  font-weight: 700;
}
.blog-post-details .post-comments .all-comments h3 ~ ul {
  margin-top: 25px;
}
.blog-post-details .post-comments .all-comments li ~ li {
  margin-top: 35px;
}
.blog-post-details .post-comments .all-comments li ul {
  margin: 30px 0px 0px calc(9% + 15px);
}
.blog-post-details .post-comments .comment-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.blog-post-details .post-comments .comment-wrapper .profile-img {
  width: 60px;
  height: 60px;
  min-width: 60px;
  overflow: hidden;
  border-radius: 100px;
}
.blog-post-details .post-comments .comment-wrapper .profile-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
}
.blog-post-details .post-comments .comment-wrapper .profile-text {
  width: calc(100% - 90px);
}
.blog-post-details .post-comments .comment-wrapper h4 {
  font-weight: 700;
  margin-left: 3px;
}
.blog-post-details .post-comments .comment-wrapper h4 ~ .content {
  margin-top: 5px;
}
.blog-post-details .post-comments .comment-wrapper .content {
  position: relative;
  padding: 40px 30px;
  margin-left: 5px;
  background: var(--color-white2);
}
.blog-post-details .post-comments .comment-wrapper .content::before {
  position: absolute;
  content: "";
  width: 25px;
  height: 19px;
  left: -25px;
  top: 0;
  border-bottom: 19px solid var(--color-tr);
  border-right: 25px solid var(--color-white2);
  background: var(--color-tr);
}
.blog-post-details .post-comments .comment-wrapper .content ~ .reply-btn {
  margin-top: 20px;
}
.blog-post-details .post-comments .comment-wrapper .reply-btn {
  padding: 0;
  color: var(--color-orange);
  font-weight: 700;
  font-size: 18px;
  background: var(--color-tr);
}
.blog-post-details .post-comments .comment-wrapper .reply-btn .my-icon {
  display: inline-block;
  font-size: 16px;
  margin-right: 13px;
}
.blog-post-details .post-comments .comments-form h3 {
  position: relative;
  font-weight: 700;
  padding-bottom: 5px;
}
.blog-post-details .post-comments .comments-form h3::before {
  position: absolute;
  content: "";
  width: 30px;
  height: 2px;
  left: 0;
  bottom: 0;
  background: var(--color-orange);
}
.blog-post-details .post-comments .comments-form h3 ~ .main-form {
  margin-top: 20px;
}
.blog-post-details .post-comments .main-form input,
.blog-post-details .post-comments .main-form textarea {
  width: 100%;
  border-radius: 5px;
  background-color: var(--color-white2);
}
.blog-post-details .post-comments .main-form p ~ input,
.blog-post-details .post-comments .main-form input ~ input {
  margin-top: 20px;
}
.blog-post-details .post-comments .main-form input ~ .check-box {
  margin-top: 30px;
}
.blog-post-details .post-comments .main-form .check-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
}
.blog-post-details .post-comments .main-form .check-box input {
  padding: 0;
  width: 14px;
  height: 14px;
  min-width: 14px;
  border-radius: 1px;
  border: 1px solid var(--color-border);
  margin-top: 0;
}
.blog-post-details .post-comments .main-form .check-box input:checked {
  background-color: var(--color-orange);
  border-color: var(--color-orange);
}
.blog-post-details .post-comments .main-form .check-box input:focus {
  -webkit-box-shadow: none;
          box-shadow: none;
}
.blog-post-details .post-comments .main-form .check-box label {
  width: calc(100% - 20px);
  color: var(--color-gBlack);
  font-size: 16px;
  line-height: 26px;
  margin-top: -5px;
}
.blog-post-details .post-comments .main-form .check-box ~ textarea,
.blog-post-details .post-comments .main-form input ~ button,
.blog-post-details .post-comments .main-form textarea ~ button {
  margin-top: 20px;
}
.blog-post-details .post-comments .main-form textarea {
  height: 180px;
  padding: 20px;
}

/*=====================
       22 Contact Us
  =======================*/
.contact-us .contact-left li {
  padding: 20px 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 15px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: 5px;
  -webkit-box-shadow: var(--shadow-medium-offset);
          box-shadow: var(--shadow-medium-offset);
  background: var(--color-white);
}
.contact-us .contact-left li ~ li {
  margin-top: 40px;
}
.contact-us .contact-left .my-icon {
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  color: var(--color-white);
  font-size: 20px;
  border-radius: 5px;
  background: var(--color-orange);
}
.contact-us .contact-left .content h4 {
  font-weight: 700;
}
.contact-us .contact-left ~ .contact-map {
  margin-top: 50px;
}
.contact-us .contact-map iframe {
  width: 100%;
  height: 450px;
  border-radius: 5px;
}
.contact-us .contact-form {
  padding: 35px 30px;
  border-radius: 5px;
  background: var(--color-white2);
  margin-top: 50px;
}
.contact-us .contact-form h2 {
  font-weight: 700;
}
.contact-us .contact-form h2 ~ p {
  margin-top: 20px;
}
.contact-us .contact-form p ~ form {
  margin-top: 40px;
}
.contact-us .contact-form .input-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: 5px;
  background: var(--color-white);
}
.contact-us .contact-form .input-box ~ .input-box {
  margin-top: 30px;
}
.contact-us .contact-form .input-box input[type=number]::-webkit-inner-spin-button,
.contact-us .contact-form .input-box input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.contact-us .contact-form .input-box input[type=number] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}
.contact-us .contact-form .input-box input[type=number] {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.contact-us .contact-form .input-box.text-textarea {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}
.contact-us .contact-form .input-box.text-textarea .my-icon {
  margin-top: 5px;
}
.contact-us .contact-form .input-box input,
.contact-us .contact-form .input-box textarea {
  padding-right: 0;
  font-size: 16px;
  width: calc(100% - 70px);
  background: var(--color-tr);
}
.contact-us .contact-form .input-box input {
  height: 70px;
}
.contact-us .contact-form .input-box textarea {
  padding-top: 16px;
  height: 156px;
}
.contact-us .contact-form .input-box .my-icon {
  width: 70px;
  line-height: 50px;
  text-align: center;
  color: var(--color-orange);
  font-size: 14px;
}
.contact-us .contact-form .input-box ~ .btn-anime {
  margin-top: 30px;
}
.contact-us .contact-form .btn-anime {
  width: 100%;
}
.contact-us .contact-form .btn-anime ~ .error,
.contact-us .contact-form .btn-anime ~ .success {
  margin-top: 30px;
}
.contact-us .contact-form .response.error,
.contact-us .contact-form .response.success {
  padding: 20px;
  border-radius: 5px;
  background: var(--color-white);
}
.contact-us .contact-form .response.error {
  color: var(--color-error);
}
.contact-us .contact-form .response.success {
  color: var(--color-success);
}

/*=====================
       25 Info Footer
  =======================*/
.info-footer {
  padding: 50px 0px;
  background: var(--color-black);
}
.info-footer .footer-left .footer-logo a {
  display: inline-block;
  max-width: 150px;
}
.info-footer .footer-left .footer-logo a img {
  width: 100%;
}
.info-footer .footer-left p {
  color: var(--color-white);
}
.info-footer .footer-left .footer-logo ~ p,
.info-footer .footer-left p ~ .social-link,
.info-footer .footer-left .social-link ~ .sent-email {
  margin-top: 30px;
}
.info-footer .footer-left .social-link ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 10px;
}
.info-footer .footer-left .social-link a {
  display: inline-block;
  width: 40px;
  height: 40px;
  color: var(--color-white);
  font-size: 15px;
  text-align: center;
  line-height: 40px;
  border-radius: 5px;
}
.info-footer .footer-left .sent-email form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.info-footer .footer-left .sent-email form input {
  width: calc(100% - 60px);
  height: 50px;
  padding: 0px 20px;
  font-weight: 700;
  color: var(--color-gBlack);
  border-radius: 5px 0px 0px 5px;
}
.info-footer .footer-left .sent-email form button {
  width: 60px;
  height: 50px;
  color: var(--color-white);
  border-radius: 0px 5px 5px 0px;
  background: var(--color-orange);
}
.info-footer .popular-post,
.info-footer .our-link,
.info-footer .get-touch,
.info-footer .news-letter {
  margin-top: 50px;
}
.info-footer .popular-post > h4,
.info-footer .our-link > h4,
.info-footer .get-touch > h4,
.info-footer .news-letter > h4 {
  font-weight: 700;
  color: var(--color-white);
}
.info-footer .popular-post h4 ~ ul,
.info-footer .our-link h4 ~ ul,
.info-footer .get-touch h4 ~ ul,
.info-footer .news-letter h4 ~ p {
  margin-top: 30px;
}
.info-footer .popular-post li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 15px;
}
.info-footer .popular-post li ~ li {
  margin-top: 22px;
}
.info-footer .popular-post .post-img img {
  width: 80px;
  height: 85px;
  border-radius: 5px;
}
.info-footer .popular-post .post-text {
  width: calc(100% - 80px);
}
.info-footer .popular-post .post-text h6 {
  font-weight: 700;
  color: var(--color-white);
}
.info-footer .popular-post .post-text h6 a {
  color: var(--color-white);
}
.info-footer .popular-post .post-text h6 a:hover {
  color: var(--color-orange);
}
.info-footer .popular-post .post-text .post-time {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 7px;
}
.info-footer .popular-post .post-text .post-time .my-icon {
  color: var(--color-orange);
}
.info-footer .popular-post .post-text .post-time p {
  color: var(--color-white);
  opacity: 0.8;
}
.info-footer .our-link li ~ li {
  margin-top: 16px;
}
.info-footer .our-link li a {
  font-size: 16px;
  line-height: 26px;
  color: var(--color-white);
}
.info-footer .our-link li a:hover {
  color: var(--color-orange);
}
.info-footer .get-touch li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 15px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.info-footer .get-touch li ~ li {
  margin-top: 40px;
}
.info-footer .get-touch .my-icon {
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  color: var(--color-white);
  font-size: 30px;
  border-radius: 5px;
  background: var(--color-orange);
}
.info-footer .get-touch .content p,
.info-footer .get-touch .content h6 {
  color: var(--color-white);
}
.info-footer .get-touch .content h6 {
  font-weight: 700;
}
.info-footer .get-touch .content h6 a {
  color: var(--color-white);
}
.info-footer .get-touch .content h6 a:hover {
  color: var(--color-orange);
}
.info-footer .news-letter p {
  color: var(--color-white);
}
.info-footer .news-letter p ~ .sent-email {
  margin-top: 30px;
}
.info-footer .news-letter form .cover-form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border: 1px solid var(--color-gBlack);
  background: var(--color-tr);
}
.info-footer .news-letter form .cover-form ~ button {
  margin-top: 10px;
}
.info-footer .news-letter form input {
  width: calc(100% - 60px);
  color: var(--color-white);
  background: var(--color-tr);
}
.info-footer .news-letter form .my-icon {
  font-size: 16px;
  color: var(--color-white);
  width: 60px;
  height: 50px;
  text-align: center;
  line-height: 50px;
}
.info-footer .news-letter form button {
  font-weight: 700;
  width: 100%;
  padding: 18px 10px;
  color: var(--color-white);
  text-transform: uppercase;
  background: var(--color-orange);
}
.info-footer.v1 .social-link a {
  border: 1px solid var(--color-border);
}
.info-footer.v1 .social-link a:hover {
  border-color: var(--color-orange);
  background: var(--color-orange);
}
.info-footer.v2 {
  position: relative;
  z-index: 1;
}
.info-footer.v2::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url("../img/footer-img/footer-shap.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: -1;
}
.info-footer.v2 .social-link a {
  border: 1px solid var(--color-orange);
  background: var(--color-orange);
}
.info-footer.v2 .social-link a:hover {
  border-color: var(--color-border);
  background: var(--color-tr);
}

/*=====================
       26 Footer Main
  =======================*/
.footer-main {
  background: var(--color-black);
}
.footer-main .footer-content {
  padding: 30px 0px;
  gap: 20px 0px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.footer-main .footer-content p {
  color: var(--color-white);
  opacity: 0.5;
}
.footer-main .footer-content p a {
  color: var(--color-white);
}
.footer-main .footer-content p a:hover {
  color: var(--color-orange);
}
.footer-main .footer-content ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 30px;
}
.footer-main .footer-content ul a {
  color: var(--color-white);
  opacity: 0.5;
}
.footer-main .footer-content ul a:hover {
  opacity: 1;
}
.footer-main.v1 {
  border-top: 1px solid var(--color-gBlack2);
}
.footer-main.v2 {
  position: relative;
  z-index: 1;
}
.footer-main.v2::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: var(--color-orange);
  opacity: 0.1;
  z-index: -1;
}

/*
Theme Name: ConsTimes HTML5 Template
Theme URI: https://themeforest.net/item/constimes-consulting-business-figma-template/43743481?s_rank=2
Design by: techsometimes
Developed by: A N Abdullah Al Numan
Version: 1.0
License: 
Tags: 
*/
/*================================================
[  Table of contents  ]
================================================

    1 Theme Default

    2 Top Bar

    3 Menu Bar

    4 Banner

    9 Common Faq’s

    11 Clients Review

    12 Get In Touch

    14 Who We Are

    22 Contact Us

    24 Blog Post Details

    25 Info Footer

======================================
[ End table content ]
======================================*/
[dir=rtl] {
  /*=====================
       1 Theme Default
  =======================*/
  /*=====================
      2 Top Bar
  =======================*/
  /*=====================
      3 Menu Bar
  =======================*/
  /*=====================
    4 Banner
  =======================*/
  /*=====================
    9 Common Faq’s
  =======================*/
  /*=====================
    11 Clients Review
  =======================*/
  /*========================
     12 Get In Touch
  =======================*/
  /*========================
     14 Who We Are
  =======================*/
  /*=====================
       22 Contact Us
  =======================*/
  /*=====================
    24 Blog Post Details
  =======================*/
  /*=====================
       25 Info Footer
  =======================*/
}
[dir=rtl] .icon-quote-right,
[dir=rtl] .icon-arrow-top-right,
[dir=rtl] .icon-arrow-left,
[dir=rtl] .icon-arrow-right,
[dir=rtl] .icon-angle-arrow-left,
[dir=rtl] .icon-angle-arrow-right,
[dir=rtl] .icon-dobble-angle-left,
[dir=rtl] .icon-dobble-angle-right {
  display: inline-block;
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}
[dir=rtl] .my-icon {
  direction: ltr;
}
[dir=rtl] .link-anime.v1::before, [dir=rtl] .link-anime.v1::after,
[dir=rtl] .btn-anime.v1::before,
[dir=rtl] .btn-anime.v1::after {
  left: inherit;
  right: -100%;
}
[dir=rtl] .link-anime.v1:hover::before, [dir=rtl] .link-anime.v1:hover::after,
[dir=rtl] .btn-anime.v1:hover::before,
[dir=rtl] .btn-anime.v1:hover::after {
  left: inherit;
  right: 0;
}
[dir=rtl] .link-anime.v2::before, [dir=rtl] .link-anime.v2::after,
[dir=rtl] .btn-anime.v2::before,
[dir=rtl] .btn-anime.v2::after {
  left: inherit;
  right: 0;
}
[dir=rtl] .link-anime.v2:hover::before, [dir=rtl] .link-anime.v2:hover::after,
[dir=rtl] .btn-anime.v2:hover::before,
[dir=rtl] .btn-anime.v2:hover::after {
  left: inherit;
  right: -100%;
}
[dir=rtl] .link-anime span.my-icon,
[dir=rtl] .btn-anime span.my-icon {
  margin-left: inherit;
  margin-right: 10px;
}
[dir=rtl] .scroll-bottom-Top {
  right: inherit;
  left: 0;
}
[dir=rtl] .scroll-bottom-Top.show {
  right: inherit;
  left: 25px;
}
[dir=rtl] .top-bar .my-icon ~ p {
  margin-right: 10px;
  margin-left: 0;
}
[dir=rtl] .menu-bar .main-menu ul a span {
  margin-left: 0px;
  margin-right: 5px;
}
[dir=rtl] .menu-bar .main-menu ul ul {
  left: inherit;
  right: 0;
}
[dir=rtl] .menu-bar .main-menu ul ul ul {
  left: inherit;
  right: 100%;
}
[dir=rtl] .menu-bar .main-menu ul li:nth-last-child(1) ul, [dir=rtl] .menu-bar .main-menu ul li:nth-last-child(2) ul, [dir=rtl] .menu-bar .main-menu ul li:nth-last-child(3) ul {
  left: 0;
  right: inherit;
}
[dir=rtl] .menu-bar .main-menu ul li:nth-last-child(1) ul ul, [dir=rtl] .menu-bar .main-menu ul li:nth-last-child(2) ul ul, [dir=rtl] .menu-bar .main-menu ul li:nth-last-child(3) ul ul {
  left: 100%;
  right: inherit;
}
[dir=rtl] .menu-bar .main-menu ul li:nth-last-child(1) ul,
[dir=rtl] .menu-bar .main-menu ul li:nth-last-child(1) ul ul, [dir=rtl] .menu-bar .main-menu ul li:nth-last-child(2) ul,
[dir=rtl] .menu-bar .main-menu ul li:nth-last-child(2) ul ul, [dir=rtl] .menu-bar .main-menu ul li:nth-last-child(3) ul,
[dir=rtl] .menu-bar .main-menu ul li:nth-last-child(3) ul ul {
  right: inherit;
}
[dir=rtl] .menu-bar .main-menu ul li li:hover > a {
  padding-left: 35px;
  padding-right: 45px;
}
[dir=rtl] .menu-bar .mobile-menu {
  left: inherit;
  right: -100%;
}
[dir=rtl] .menu-bar .mobile-menu.active {
  left: inherit;
  right: 0;
}
[dir=rtl] .menu-bar .mobile-menu .mobile-header .close-mobile-btn {
  border-left: inherit;
  border-right: 1px dashed var(--color-orange);
}
[dir=rtl] .menu-bar .mobile-menu .mobile-header .close-mobile-btn .my-icon {
  display: inline-block;
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
[dir=rtl] .menu-bar .mobile-menu .mobile-logo {
  padding-left: inherit;
  padding-right: 20px;
}
[dir=rtl] .menu-bar .mobile-menu .main-manu a {
  padding: 15px 20px 15px 40px;
}
[dir=rtl] .menu-bar .mobile-menu .main-manu a span {
  left: 24px;
  right: inherit;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
[dir=rtl] .menu-bar.v1 .right-btn a:hover::before {
  left: inherit;
  right: 0;
}
[dir=rtl] .banner.v1::before {
  left: inherit;
  right: 0;
  background: -webkit-gradient(linear, right top, left top, from(var(--color-gradient-start)), to(var(--color-gradient-end-transparent)));
  background: linear-gradient(-90deg, var(--color-gradient-start) 0%, var(--color-gradient-end-transparent) 100%);
}
[dir=rtl] .banner.v1::after {
  left: inherit;
  right: -16%;
}
[dir=rtl] .banner.v2::before {
  left: inherit;
  right: 0;
}
[dir=rtl] .banner.v2::after {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
[dir=rtl] .faq-btn {
  padding: 30px 30px 30px 90px;
}
[dir=rtl] .faq-btn span {
  right: inherit;
  left: 30px;
}
[dir=rtl] .faq-btn span::before, [dir=rtl] .faq-btn span::after {
  left: inherit;
  right: 9px;
}
[dir=rtl] .clients-review .right-content {
  text-align: left;
}
[dir=rtl] .clients-review .prev-btn ~ .next-btn {
  margin-left: inherit;
  margin-right: 15px;
}
[dir=rtl] .get-in-touch::before {
  left: inherit;
  right: -10%;
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}
[dir=rtl] .get-in-touch .input-box input,
[dir=rtl] .get-in-touch .input-box textarea {
  padding-right: 20px;
  padding-left: 0;
}
[dir=rtl] .who-we-are .left-images .smaill-img::before {
  left: inherit;
  right: -100%;
}
[dir=rtl] .contact-us .contact-form .input-box input,
[dir=rtl] .contact-us .contact-form .input-box textarea {
  padding-right: 20px;
  padding-left: inherit;
}
[dir=rtl] .blog-post-details .post-comments .coomment-post h4::before {
  left: inherit;
  right: 0;
}
[dir=rtl] .blog-post-details .post-comments .all-comments li ul {
  margin: 30px calc(9% + 15px) 0px 0px;
}
[dir=rtl] .blog-post-details .post-comments .comment-wrapper .content {
  margin-left: inherit;
  margin-right: 5px;
}
[dir=rtl] .blog-post-details .post-comments .comment-wrapper .content::before {
  left: inherit;
  right: -25px;
}
[dir=rtl] .blog-post-details .post-comments .comment-wrapper .reply-btn .my-icon {
  margin-right: inherit;
  margin-left: 13px;
}
[dir=rtl] .blog-post-details .post-comments .comments-form h3::before {
  left: inherit;
  right: 0;
}
[dir=rtl] .info-footer .footer-left .sent-email form input {
  border-radius: 0px 5px 5px 0px;
}
[dir=rtl] .info-footer .footer-left .sent-email form button {
  border-radius: 5px 0px 0px 5px;
}
/*# sourceMappingURL=style.css.map */


/* =================
    Root Color 
=================*/


/*
Theme Name: ConsTimes HTML5 Template
Theme URI: https://themeforest.net/item/constimes-consulting-business-figma-template/43743481?s_rank=2
Design by: techsometimes
Developed by: A N Abdullah Al Numan
Version: 1.0
License: 
Tags: 
*/
/*================================================
[  Table of contents  ]
================================================

    1 Theme Default

    2 Top Bar

    3 Menu Bar

    4 Banner

    5 About Us

    6 Services

    7 Work Gallery

    8 Counter Section 

    9 Common Faq’s

    10 Our Simple Step

    11 Clients Review

    12 Get In Touch

    13 Latest News

    14 Who We Are

    15 Company Benefits

    16 Our Team

    17 Talk To Us

    18 FAQ Section 

    19 Team Details

    20 Service Details 

    22 Contact Us

    23 Blog Post

    24 Blog Post Details

    25 Info Footer

    26 Footer Main

======================================
[ End table content ]
======================================*/
@media (min-width: 576px) {
  /*=====================
       1 Theme Default
  =======================*/
  .breadcum {
    padding: 80px 0px;
  }
  .widgets .widget ~ .widget {
    margin-top: 50px;
  }
  /*=====================
     5 About Us
  =======================*/
  .about-us .about-img {
    width: calc(100% - 55px);
    margin: 21px 0px 21px 28px;
  }
  .about-us .items-content li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 20px;
    padding: 35px 30px;
  }
  .about-us .items-content .my-icon ~ .item-text {
    margin-top: 0px;
  }
  .about-us .items-link ul {
    gap: 50px;
  }
  /*=====================
       26 Footer Main
  =======================*/
  .footer-main .footer-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
}
@media (min-width: 768px) {
  /*=====================
       1 Theme Default
  =======================*/
  section {
    padding: 80px 0px;
  }
  .breadcum {
    padding: 100px 0px;
  }
  .title-left-right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: end;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .title-left-right .left-content {
    width: 45%;
  }
  .title-left-right .right-content {
    width: 55%;
    padding-left: 30px;
    margin-top: 10px;
  }
  [dir=rtl] .title-left-right .right-content {
    padding-left: inherit;
    padding-right: 30px;
  }
  /*=====================
       2 Top Bar
  =======================*/
  .top-bar .info-link ul {
    gap: 15px;
  }
  .top-bar .info-link li:nth-child(3) {
    display: block;
  }
  /*=====================
    4 Banner
  =======================*/
  .banner .banner-content {
    width: 70%;
  }
  /*=====================
     6 Services
  =======================*/
  .services .row > div:nth-child(2) .services-card {
    margin-top: 0;
  }
  /*=====================
     7 Work Gallery
  =======================*/
  .work-gallery .row > div:nth-child(2) .gallery-card {
    margin-top: 0px;
  }
  .work-gallery .gallery-img-boxs {
    grid-gap: 30px;
  }
  .work-gallery.v1 .gallery-img-horizontal {
    grid-column: auto/span 2;
  }
  .work-gallery.v2 .gallery-img-boxs {
    grid-auto-flow: dense;
    grid-template-columns: repeat(auto-fit, calc(33.3333333% - 20px));
  }
  .work-gallery.v2 .gallery-img-small {
    grid-row: span 1;
    grid-column: span 1;
  }
  .work-gallery.v2 .gallery-img-horizontal {
    grid-row: span 2;
    grid-column: span 1;
  }
  .work-gallery.v2 .gallery-img-vertical {
    grid-row: span 1;
    grid-column: span 2;
  }
  /*=====================
     8 Counter Section 
  =======================*/
  .counter-section .counter-items ul {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
  .counter-section .counter-items li {
    width: calc(50% - 23px);
    min-width: calc(50% - 23px);
  }
  /*========================
     10 Our Simple Step
  =======================*/
  .our-simple-step .row > div:nth-child(2) .process-card {
    margin-top: 0;
  }
  /*=====================
    11 Clients Review
  =======================*/
  .clients-review .section-title ~ .slider {
    margin-top: 60px;
  }
  .clients-review .client-card {
    padding: 40px;
  }
  .clients-review.v1 .client-card .swiper-slide-active,
  .clients-review.v1 .client-card:hover {
    border-bottom-color: var(--color-orange);
    border-radius: 10px;
    -webkit-box-shadow: var(--shadow-medium-offset);
            box-shadow: var(--shadow-medium-offset);
    background: var(--color-white);
  }
  .clients-review.v2 .client-card h6,
  .clients-review.v2 .client-card p {
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
  }
  .clients-review.v2 .client-card.swiper-slide-active, .clients-review.v2 .client-card:hover {
    border-color: var(--color-orange);
    border-radius: 5px;
    -webkit-box-shadow: var(--shadow-light);
            box-shadow: var(--shadow-light);
    background: var(--color-orange);
  }
  .clients-review.v2 .client-card.swiper-slide-active h6,
  .clients-review.v2 .client-card.swiper-slide-active h6 a,
  .clients-review.v2 .client-card.swiper-slide-active p, .clients-review.v2 .client-card:hover h6,
  .clients-review.v2 .client-card:hover h6 a,
  .clients-review.v2 .client-card:hover p {
    color: var(--color-white);
  }
  /*========================
     12 Get In Touch
  =======================*/
  .get-in-touch .left-content .card-items-list li {
    width: calc(50% - 15px);
  }
  /*========================
     13 Latest News
  =======================*/
  .latest-news .row > div:nth-child(2) .new-post-card {
    margin-top: 0;
  }
  /*========================
     14 Who We Are
  =======================*/
  .who-we-are .left-images {
    position: relative;
  }
  .who-we-are .left-images .big-img {
    width: calc(100% - 70px);
    margin: 0 auto;
  }
  .who-we-are .left-images .count-and-img {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 30px;
    margin-top: -57px;
  }
  .who-we-are .left-images .count-and-img .count-user ~ .smaill-img {
    margin-top: 0px;
  }
  .who-we-are .left-images .smaill-img {
    position: relative;
    width: 32%;
    border: 7px solid var(--color-white);
    -webkit-box-shadow: var(--shadow-medium-offset);
            box-shadow: var(--shadow-medium-offset);
    border-radius: 5px;
  }
  .who-we-are .left-images .smaill-img::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: -100%;
    background-image: url("../img/who-we-are/shap.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    z-index: -1;
  }
  /*=====================
    16 Our Team
  =======================*/
  .our-tema .row > div:nth-child(2) .tema-card {
    margin-top: 0;
  }
  /*=====================
       17 Talk To Us
  =======================*/
  .talk-to-us .left-numbber {
    padding: 40px 60px;
    gap: 25px;
    margin: -100px 46px 0px 46px;
  }
  .talk-to-us .left-numbber .my-icon {
    font-size: 50px;
  }
  .talk-to-us .left-numbber .text-content h4 ~ h3 {
    margin-top: -4px;
  }
  .talk-to-us .right-content .section-title ~ form {
    margin-top: 60px;
  }
  .talk-to-us .right-content form .group-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 20px;
  }
  .talk-to-us .right-content form input ~ .my-select,
  .talk-to-us .right-content form input ~ input {
    margin-top: 0;
  }
  .talk-to-us.v1 {
    position: relative;
    z-index: 1;
  }
  .talk-to-us.v1::before {
    position: absolute;
    content: "";
    width: 60%;
    height: 100%;
    right: 0;
    bottom: 0;
    background-image: url("../img/talk-to-us/bg-shap.png");
    background-repeat: no-repeat;
    background-position: right;
    background-size: 100% 100%;
    z-index: -1;
  }
  /*=====================
       23 Blog Post
  =======================*/
  .blog-post-card ~ .blog-post-card {
    margin-top: 50px;
  }
  .blog-post-card.video-box .play-video-btn {
    width: 80px;
    height: 80px;
    font-size: 18px;
  }
  /*=====================
       25 Info Footer
  =======================*/
  .info-footer .popular-post {
    margin-top: 6px;
  }
}
@media (min-width: 992px) {
  /*=====================
       1 Theme Default
  =======================*/
  .section-title-center {
    max-width: 50%;
  }
  .breadcum {
    padding: 100px 0px;
  }
  .list-mark.two-col-list li {
    width: calc(50% - 25px);
  }
  /*=====================
       2 Top Bar
  =======================*/
  .top-bar .social-link {
    display: inline;
  }
  .top-bar .info-link ul {
    gap: 35px;
  }
  .top-bar.v1 {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .top-bar.v1 .top-right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 12px;
  }
  .top-bar.v2 .top-bar-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  /*=====================
       3 Menu Bar
  =======================*/
  .menu-bar {
    padding: 0px;
  }
  .menu-bar .main-menu {
    display: inherit;
  }
  .menu-bar .mobile-menu-btn {
    display: none;
  }
  /*=====================
    4 Banner
  =======================*/
  .banner .banner-content {
    width: 50%;
  }
  .banner.v2 {
    background-position: 130% 0%;
    background-size: 70% 100%;
  }
  .banner.v2::before, .banner.v2::after {
    position: absolute;
    content: "";
    height: 100%;
    top: 0;
    z-index: -1;
  }
  .banner.v2::before {
    width: 50%;
    opacity: 1;
    background: var(--color-black);
  }
  .banner.v2::after {
    width: 100%;
    right: 0%;
    background-image: url("../img/banner/v2/shap.svg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  /*=====================
     5 About Us
  =======================*/
  .about-us .about-content {
    margin-top: 0px;
  }
  .about-us .about-img {
    width: calc(100% - 70px);
  }
  .about-us .about-img .circle-play-btn {
    width: 144px;
    height: 144px;
  }
  /*=====================
     6 Services
  =======================*/
  .services.v1 .services-card .services-text {
    padding: 40px;
  }
  .services.v1 .services-card .services-text .my-icon {
    font-size: 55px;
    width: 95px;
    height: 95px;
    line-height: 95px;
  }
  .services.v2 .services-card .services-header, .services.v3 .services-card .services-header {
    padding: 20px 35px;
  }
  .services.v2 .services-card .services-header .services-text h4 ~ p, .services.v3 .services-card .services-header .services-text h4 ~ p {
    margin-top: 5px;
  }
  /*========================
     12 Get In Touch
  =======================*/
  .get-in-touch .left-content .card-items-list li {
    width: 100%;
  }
  /*========================
     13 Latest News
  =======================*/
  .latest-news.v1 .new-post-card .post-content {
    padding: 40px;
  }
  .latest-news.v2 .section-title .right-content {
    text-align: right;
  }
  /*=====================
     15 Company Benefits
  =======================*/
  .company-benefits {
    padding: 0;
    overflow: hidden;
  }
  .company-benefits::before {
    height: calc(100% - 80px);
  }
  .company-benefits .content-box {
    padding: 100px 0;
    margin-top: 80px;
  }
  .company-benefits .box-img {
    position: relative;
    left: 0;
    margin-top: 0;
  }
  .company-benefits .box-img::before {
    position: absolute;
    content: "";
    width: 50vw;
    height: 100%;
    bottom: -100%;
    left: 0;
    background: var(--color-white2);
  }
  .company-benefits .box-img img {
    width: 50vw;
  }
  /*=====================
      18 FAQ Section 
  =======================*/
  .faq-section .accordion {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
    gap: 30px;
  }
  .faq-section .accordion li {
    width: calc(50% - 15px);
  }
  .faq-section .accordion li ~ li {
    margin-top: 0;
  }
  /*=====================
     19 Team Details
  =======================*/
  .team-details .profile-info {
    margin-top: 0px;
    padding-left: 70px;
  }
  .team-details .info-title h6 ~ p {
    margin-top: 25px;
  }
  .team-details .list-mark li ~ li {
    margin-top: 25px;
  }
  .team-details .list-mark h4 {
    font-size: 24px;
    line-height: 36px;
  }
  .team-details .list-mark ~ .info-social {
    margin-top: 45px;
  }
  .team-details .row ~ .team-description {
    margin-top: 100px;
  }
  .team-details .team-description p ~ h3 {
    margin-top: 50px;
  }
  .team-details .skills-list {
    padding-left: 70px;
    margin-top: 0;
  }
  /*=====================
    20 Service Details 
  =======================*/
  .service-details .service-links-list li a {
    padding: 15px 30px;
    font-size: 18px;
  }
  .service-details .profile-numbber {
    margin: -10% 20px 0px 20px;
  }
  .service-details .service-content .big-img ~ .service-text {
    margin-top: 50px;
  }
  .service-details .service-content h2 {
    font-size: 48px;
    line-height: 60px;
  }
  .service-details .service-content .service-text h2 ~ p {
    margin-top: 50px;
  }
  .service-details .service-content .service-text p ~ h6 {
    margin-top: 30px;
  }
  .service-details .service-content .service-text ~ .list-mark {
    margin-top: 50px;
  }
  .service-details .service-content .list-mark h2 ~ ul {
    margin-top: 30px;
  }
  .service-details .services-box-imgs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 30px;
  }
  .service-details .services-box-imgs .box-img ~ .box-img {
    margin-top: 0px;
  }
  .service-details .services-box-imgs ~ .services-faq {
    margin-top: 50px;
  }
  /*=====================
       25 Info Footer
  =======================*/
  .info-footer .popular-post,
  .info-footer.v2 .our-link {
    margin-top: 0px;
  }
  /*=====================
       26 Footer Main
  =======================*/
  .footer-main .footer-content ul {
    margin-top: 0;
  }
  [dir=rtl] {
    /*=====================
      4 Banner
    =======================*/
    /*========================
       13 Latest News
    =======================*/
    /*=====================
      15 Company Benefits
    =======================*/
  }
  [dir=rtl] .banner.v2 {
    background-position: -30% 0%;
  }
  [dir=rtl] .latest-news.v2 .section-title .right-content {
    text-align: left;
  }
  [dir=rtl] .company-benefits .box-img,
  [dir=rtl] .company-benefits .box-img::before {
    left: inherit;
    right: 0;
  }
}
@media (min-width: 1200px) {
  /*=====================
       1 Theme Default
  =======================*/
  section {
    padding: 100px 0px;
  }
  .breadcum {
    padding: 150px 0px;
  }
  .breadcum .breadcum-content h4 {
    font-size: 48px;
    line-height: 60px;
  }
  .breadcum .breadcum-content ul {
    font-size: 18px;
    line-height: 28px;
  }
  .widgets .widget-header {
    padding: 20px 30px;
  }
  .widgets .widget-header h4 {
    font-size: 24px;
    line-height: 36px;
  }
  .widgets .widget-content {
    padding: 30px;
  }
  .widgets .category-list ul {
    padding: 30px 20px;
  }
  .widgets .post-list li ~ li {
    margin-top: 30px;
  }
  .widgets .tags-widgets ul {
    gap: 20px;
  }
  .pegination-box ul {
    gap: 20px;
  }
  .pegination-box a {
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 18px;
  }
  .section-title h2,
  .section-title-center h2 {
    font-size: 48px;
    line-height: 60px;
  }
  .scroll-bottom-Top {
    width: 55px;
    height: 55px;
    bottom: 50px;
    line-height: 55px;
  }
  .scroll-bottom-Top.show {
    right: 50px;
  }
  /*=====================
       2 Top Bar
  =======================*/
  .top-bar .top-bar-content {
    padding: 0px 15px;
  }
  .top-bar .info-link ul {
    -webkit-box-pack: inherit;
        -ms-flex-pack: inherit;
            justify-content: inherit;
  }
  /*=====================
       3 Menu Bar
  =======================*/
  .menu-bar .main-menu ul a {
    padding: 37px 0px;
  }
  .menu-bar .main-menu ul li:nth-last-child(3) ul {
    left: 0;
    right: inherit;
  }
  .menu-bar .main-menu ul li:nth-last-child(3) ul ul {
    left: 100%;
    right: inherit;
  }
  .menu-bar.v1 .container {
    max-width: 100%;
    padding: 0px 0px 0px 40px;
  }
  .menu-bar .main-menu, .menu-bar.v1 .right-btn {
    display: inherit;
  }
  .menu-bar.v2 .right-contact {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    gap: 15px;
  }
  /*=====================
    4 Banner
  =======================*/
  .banner {
    padding: 0;
  }
  .banner .banner-content {
    padding: 100px 0px;
    width: 40%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-height: calc(100vh - 155px);
  }
  .banner .banner-content h2 {
    font-size: 68px;
    line-height: 90px;
  }
  .banner .banner-content h6 ~ h2 {
    margin-top: 10px;
  }
  .banner .banner-content h2 ~ p {
    margin-top: 5px;
  }
  .banner .banner-content p ~ ul {
    margin-top: 50px;
  }
  .banner.v1::after {
    width: 54vh;
    height: 54vh;
    left: -16%;
    bottom: -12%;
  }
  /*=====================
     5 About Us
  =======================*/
  .about-us .about-img {
    width: calc(100% - 130px);
  }
  /*=====================
     6 Services
  =======================*/
  .services .row > div:nth-child(3) .services-card {
    margin-top: 0;
  }
  /*=====================
     7 Work Gallery
  =======================*/
  .work-gallery .section-title ~ .gallery-img-boxs,
  .work-gallery .section-title-center ~ .gallery-img-boxs {
    margin-top: 60px;
  }
  .work-gallery .row > div:nth-child(3) .gallery-card {
    margin-top: 0px;
  }
  .work-gallery.v1 .gallery-img-boxs {
    grid-template-columns: repeat(auto-fit, calc(25% - 23px));
  }
  /*=====================
     8 Counter Section 
  =======================*/
  .counter-section .counter-items li {
    width: calc(25% - 23px);
    min-width: calc(25% - 23px);
  }
  /*=====================
     9 Common Faq’s
  =======================*/
  .common-faqs::before {
    height: 45%;
  }
  .common-faqs .faqs-card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .common-faqs .faq-content {
    width: 60%;
    padding: 60px;
    border-radius: 5px 0px 0px 5px;
  }
  .common-faqs .faq-img {
    width: 40%;
    margin-top: 0;
  }
  .common-faqs .faq-img img {
    border-radius: 0px 5px 5px 0px;
  }
  /*========================
     10 Our Simple Step
  =======================*/
  .our-simple-step {
    position: relative;
  }
  .our-simple-step::before {
    position: absolute;
    content: "";
    background-repeat: no-repeat;
    z-index: -1;
  }
  .our-simple-step .row > div:nth-child(3) .process-card {
    margin-top: 0;
  }
  .our-simple-step.v1 {
    padding-top: 0;
  }
  .our-simple-step.v1::before {
    width: 30%;
    min-height: calc(100% + 910px);
    top: -100%;
    left: 0;
    background-image: url("../img/our-simple-step/v1/bg-shap.png");
    background-position: left;
    background-size: 100% 100%;
  }
  .our-simple-step.v1 .section-title ~ .row,
  .our-simple-step.v1 .section-title-center ~ .row {
    margin-top: 80px;
  }
  .our-simple-step.v1 .row > div:nth-child(4) .process-card {
    margin-top: 0;
  }
  .our-simple-step.v1 .process-card {
    padding: 70px 30px 40px 30px;
  }
  .our-simple-step.v1 .process-card .my-icon {
    position: absolute;
    top: -30px;
    right: 30px;
    margin-bottom: 0;
  }
  .our-simple-step.v2::before {
    width: 75%;
    height: 75%;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-image: url("../img/our-simple-step/v2/bg-shap.png");
    background-size: contain;
    background-position: center;
  }
  .our-simple-step.v2 .process-card {
    padding: 40px;
  }
  /*=====================
    11 Clients Review
  =======================*/
  .clients-review .section-title ~ .slider {
    margin-top: 60px;
  }
  .clients-review .prev-btn,
  .clients-review .next-btn {
    width: 60px;
    height: 60px;
    font-size: 14px;
  }
  .clients-review .prev-btn ~ .next-btn {
    margin-left: 20px;
  }
  /*========================
     12 Get In Touch
  =======================*/
  .get-in-touch {
    padding-bottom: 0;
  }
  .get-in-touch::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 35%;
    left: 0;
    bottom: 0;
    background: var(--color-white);
    z-index: -1;
  }
  .get-in-touch .left-content .s-items-list ~ a {
    margin-top: 60px;
  }
  .get-in-touch .left-content .card-items-list {
    margin-top: 200px;
  }
  .get-in-touch .get-in-touch-form {
    padding: 65px 60px;
    margin-top: 0;
  }
  /*========================
     13 Latest News
  =======================*/
  .latest-news .row > div:nth-child(3) .new-post-card {
    margin-top: 0;
  }
  /*=====================
    16 Our Team
  =======================*/
  .our-tema .row > div:nth-child(3) .tema-card {
    margin-top: 0;
  }
  .our-tema.shap-bg {
    position: relative;
    padding-bottom: 0;
    z-index: 1;
  }
  .our-tema.shap-bg::before, .our-tema.shap-bg::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 30%;
    left: 0;
    z-index: -1;
  }
  .our-tema.shap-bg::before {
    bottom: 0;
    background: var(--color-black);
  }
  .our-tema.shap-bg::after {
    top: 0;
    background-image: url("../img/team/shap.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100vw 19vw;
  }
  /*=====================
       22 Contact Us
  =======================*/
  .contact-us .contact-info-map {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 30px;
  }
  .contact-us .contact-left {
    width: calc(30% - 15px);
  }
  .contact-us .contact-left li {
    padding: 30px;
  }
  .contact-us .contact-left .my-icon {
    width: 60px;
    height: 60px;
    line-height: 60px;
    font-size: 30px;
  }
  .contact-us .contact-left ~ .contact-map {
    margin-top: 0px;
  }
  .contact-us .contact-map {
    width: calc(70% - 15px);
  }
  .contact-us .contact-form {
    padding: 65px 60px;
  }
  /*=====================
       23 Blog Post
  =======================*/
  .blog-post-card ~ .blog-post-card {
    margin-top: 60px;
  }
  .blog-post-card ~ .pegination-box {
    margin: 50px 0px 0px 0px;
  }
  .blog-post-card .post-slider .prev-btn,
  .blog-post-card .post-slider .next-btn {
    width: 60px;
    height: 60px;
    font-size: 20px;
    line-height: 64px;
  }
  /*=====================
    24 Blog Post Details
  =======================*/
  .blog-post-details .post-comments {
    margin-bottom: 0px;
  }
  .blog-post-details .blog-content ~ .post-tags,
  .blog-post-details .post-tags ~ .post-comments,
  .blog-post-details .coomment-post ~ .all-comments,
  .blog-post-details .all-comments ~ .comments-form {
    margin-top: 50px;
  }
  .blog-post-details .blog-img-gallary {
    gap: 30px;
  }
  .blog-post-details .blog-img-gallary .box-img {
    width: calc(50% - 15px);
  }
  .blog-post-details .your-potential {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .blog-post-details .your-potential .box-img {
    width: 45%;
  }
  .blog-post-details .your-potential .box-content {
    width: 55%;
    padding-left: 30px;
    margin-top: 0;
  }
  .blog-post-details .user-content {
    margin-top: 0;
  }
  .blog-post-details .user-content .my-icon {
    font-size: 96px;
  }
  .blog-post-details .post-comments .coomment-post {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 20px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .blog-post-details .post-comments .coomment-post .comment-img {
    min-width: 120px;
  }
  .blog-post-details .post-comments .coomment-post .comment-img ~ .comment-text {
    margin-top: 0;
  }
  .blog-post-details .post-comments .coomment-post .comment-text {
    width: calc(100% - 140px);
  }
  /*=====================
       25 Info Footer
  =======================*/
  .info-footer {
    padding: 70px 0px;
  }
  .info-footer .footer-left .footer-logo a {
    max-width: 180px;
  }
  .info-footer .footer-left .footer-logo ~ p {
    margin-top: 40px;
  }
  .info-footer .news-letter,
  .info-footer .get-touch {
    margin-top: 0px;
  }
  .info-footer .popular-post {
    margin-left: 15px;
  }
  .info-footer.v1 .our-link {
    margin-top: 0px;
  }
  /*=====================
       26 Footer Main
  =======================*/
  .footer-main .footer-content ul {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: end;
  }
  [dir=rtl] {
    /*=====================
         3 Menu Bar
    =======================*/
    /*=====================
       9 Common Faq’s
    =======================*/
    /*========================
       10 Our Simple Step
    =======================*/
    /*=====================
      11 Clients Review
    =======================*/
  }
  [dir=rtl] .menu-bar .main-menu ul li:nth-last-child(3) ul {
    left: inherit;
    right: 0;
  }
  [dir=rtl] .menu-bar .main-menu ul li:nth-last-child(3) ul ul {
    left: inherit;
    right: 100%;
  }
  [dir=rtl] .menu-bar.v1 .container {
    padding: 0px 40px 0px 0px;
  }
  [dir=rtl] .common-faqs .faq-content {
    border-radius: 0px 5px 5px 0px;
  }
  [dir=rtl] .common-faqs .faq-img img {
    border-radius: 5px 0px 0px 5px;
  }
  [dir=rtl] .our-simple-step.v1 .process-card .my-icon {
    right: inherit;
    left: 30px;
  }
  [dir=rtl] .clients-review .prev-btn ~ .next-btn {
    margin-left: inherit;
    margin-right: 20px;
  }
  /*=====================
    24 Blog Post Details
  =======================*/
  .blog-post-details .your-potential .box-content {
    padding-left: inherit;
    padding-right: 30px;
  }
}
@media (min-width: 1400px) {
  /*=====================
       2 Top Bar
  =======================*/
  .top-bar.v1 {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .top-bar.v1 .container {
    max-width: 100%;
    padding: 0px 40px;
  }
  .top-bar.v1 .top-bar-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .top-bar.v1 .top-left {
    display: inherit;
  }
  .top-bar.v1 .top-right {
    gap: 25px;
  }
  .top-bar.v1 .top-right .info-link ul {
    position: relative;
    padding-right: 21px;
  }
  .top-bar.v1 .top-right .info-link ul::before {
    position: absolute;
    content: "";
    width: 1px;
    height: 100%;
    top: 0;
    right: 0;
    opacity: 0.2;
    background: var(--color-white);
  }
  /*=====================
       3 Menu Bar
  =======================*/
  .menu-bar .menu-logo a {
    max-width: 180px;
  }
  /*========================
     12 Get In Touch
  =======================*/
  .get-in-touch .left-content .card-items-list li {
    width: calc(50% - 15px);
  }
  /*========================
     14 Who We Are
  =======================*/
  .who-we-are .left-images .smaill-img {
    width: 45%;
  }
  .who-we-are .left-images .count-user .my-icon {
    min-width: 100px;
    width: 100px;
    height: 100px;
    font-size: 60px;
    line-height: 100px;
  }
}
/*# sourceMappingURL=responsive.css.map */


/* Banner başlığı için modern, fütüristik ve resmi stil */
.banner .banner-content h1 {
  /* Font boyutu: Büyük ekranlarda 64 piksel, daha küçük ekranlarda dinamik küçülme */
  font-size: clamp(3rem, 7vw, 4rem);
  /* 48px - 64px aralığında duyarlı boyutlandırma */

  /* Satır yüksekliği: Okunabilirliği artırmak için başlık boyutuyla orantılı */
  line-height: 1.2;
  /* Başlık boyutuna göre otomatik ayarlanır */

  /* Yazı tipi ağırlığı: Güçlü ve otoriter bir duruş için kalın */
  font-weight: 700;
  /* Kalın */

  /* Renk: Beyaz, modern ve temiz bir görünüm için */
  color: var(--color-white);
  /* Varsayılan beyaz, tema değişkeni destekli */

  /* Metin gölgesi: Fütüristik bir derinlik ve parlaklık katmak için */
  text-shadow: var(--text-shadow-glow);
  /* Hafif bir ışıltı */ /* Daha belirgin bir parlaklık */ /* Hafif bir siber mavi tonu */

  /* Harf aralığı: Ferah ve modern bir görünüm için hafif aralık */
  letter-spacing: 0.05em;
  /* Harfler arasında hafif boşluk */

  /* Geçiş efekti: Fütüristik etkileşimler için yumuşak animasyon */
  transition: all 0.3s ease-in-out;
  /* Tüm değişiklikler için yumuşak geçiş */
  margin-bottom: 1rem;
}

/* Odaklanma veya üzerine gelme durumları için (opsiyonel fütüristik etki) */
.banner .banner-content h1:hover {
  text-shadow: var(--text-shadow-glow-hover);
  transform: translateY(-2px);
  /* Hafif yukarı hareket */
}

header {
  height: 99px;
}

.editor-content img {
  margin-bottom: 10px;
}
.editor-content h1 {
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-black);
}

.editor-content h2 {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--color-black);
}

.editor-content h3 {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-black);
}

.editor-content h4 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-black);
}

.editor-content h5 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-black);
}

.editor-content h6 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-black);
}

.editor-content a {
  font-weight: 800;
  color: var(--color-orange);
}

.editor-content p {
  margin-bottom: 15px;
}

.editor-content ul {
  margin: 20px 0;
  padding-left: 0px;
}

.editor-content li {
  line-height: 1.5;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  color: var(--color-gBlack);
  font-size: 18px;
  line-height: 28px;
}

.editor-content li::before {
  content: "\e94a";
  font-family: var(--font-icon);
  display: inline-block;
  margin-right: 10px;

  width: 20px;
  min-width: 20px;
  height: 20px;
  font-size: 10px;
  text-align: center;
  line-height: 24px;
  border-radius: 50px;
  color: var(--color-white);
  background: var(--color-orange);
}

.section-title h6 ~ h2,
.section-title-center h6 ~ h2 {
  line-height: 1.2;
  margin-bottom: 20px;
}

.services-card {
  /* Basic styling for the card, adjust as needed */
  border: 1px solid var(--color-gray-light);
  border-radius: 8px;
  overflow: hidden;
  /* Ensures image transforms don't spill out */
  box-shadow: var(--shadow-card);
  transition: all 0.3s ease-in-out;
  /* Smooth transition for the card itself */
  margin-top: 0px !important;
}

.services-card:hover {
  box-shadow: var(--shadow-card-hover);
  /* Enhanced shadow on hover */
  transform: translateY(-5px);
  /* Slight lift effect for the card */
}

.services-card .services-img {
  position: relative;
  overflow: hidden;
}

.services-card .services-img img {
  width: 100%;
  display: block;
  transition: transform 0.4s ease-in-out, filter 0.4s ease-in-out;
  /* Smooth transitions for image */
}

.services-card:hover .services-img img {
  transform: scale(1.05) rotate(1deg);
  /* Slightly zoom in and rotate for futuristic feel */
  filter: brightness(1.1) contrast(1.1) grayscale(0.1);
  /* Subtle color shift */
}

.services-card .services-text h4 {
  font-size: 1.5em;
  /* Adjust as needed */
  transition: color 0.3s ease-in-out, text-shadow 0.3s ease-in-out,
    transform 0.3s ease-in-out;
  /* Smooth transitions for title */
  line-height: 1.4;
}

.services-card:hover .services-text h4 {
  color: var(--color-orange);
  text-shadow: var(--text-shadow-orange);
  /* Glowing effect for futuristic touch */
  transform: translateX(5px);
  /* Slight horizontal shift */
}

/* Optional: Add a subtle overlay effect to the image on hover */
.services-card .services-img::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-blue-transparent);
  /* Start transparent */
  transition: background 0.4s ease-in-out;
  pointer-events: none;
  /* Allows clicks to pass through */
}

.services-card:hover .services-img::before {
  background: var(--color-blue-overlay);
  /* Subtle blue overlay on hover */
}

/* Bootstrap 5'in kendi boşluk (gap) sistemi olduğu için .ref-grid'den gap ve padding kaldırılabilir */
/* .ref-grid artık bir Flexbox konteyneri değil, sadece bir sarmalayıcı div olacak */

/* Önceki .ref-grid ve .ref-grid-wrapper CSS'lerini KESİNLİKLE KALDIRIN */
/* Çünkü bu işi artık Bootstrap'ın .row ve .col sınıfları yapacak */

/* Sadece .ref-card ve içindeki img için stillerimiz kalacak */
.ref-card {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  /* Sütunun tüm genişliğini kapla */
  /* Bootstrap col sınıfları genişliği yönettiği için max-width'e artık ihtiyaç yok */
  /* max-width: 250px; */
  height: 160px;
  /* Kartların sabit yüksekliğini koru */
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.3s ease-in-out;
  background-color: var(--color-white);
}

.ref-card:hover {
  box-shadow: var(--shadow-card-hover);
}

.ref-card img {
  object-fit: contain;
  width: 85%;
  height: 85%;
  filter: grayscale(1);
  transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
}

.ref-card:hover img {
  transform: scale(1.08);
  filter: grayscale(0);
}

/* Medya Sorguları: Kart yüksekliklerini küçültebilirsiniz */
/* Bootstrap col sınıfları genişliği ve sütun sayısını yönettiği için,
     bu medya sorgularında sadece kartların yüksekliğini ayarlayabilirsiniz,
     genişlik için col- sınıfları daha öncelikli olacaktır. */
@media (max-width: 992px) {
  .ref-card {
    height: 130px;
  }
}

@media (max-width: 768px) {
  .ref-card {
    height: 110px;
  }
}

@media (max-width: 480px) {
  .ref-card {
    height: 90px;
    border-radius: 8px;
  }
}

/* CTA Section - Modern ve Şık (Açık Arka Plan) */
.cta-section {
  background-color: var(--color-white2);
  /* Arka plan rengi: Kirli beyaz */
  color: var(--color-black);
  /* Metin rengi: Koyu siyah */
  padding: 80px 0;
  /* Üstten ve alttan boşluk */
  text-align: center;
  /* Tüm içeriği ortala */
  position: relative;
  /* Arka plan efekti için */
  overflow: hidden;
  /* Taşmayı engelle */
  border-top: 1px solid var(--color-border);
  /* Üstte hafif bir çizgi */
  border-bottom: 1px solid var(--color-border);
  /* Altta hafif bir çizgi */
}

/* Opsiyonel: Arka plan efekti (açık arka planda daha az belirgin olabilir) */
.cta-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Açık arka plan için daha pastel veya şeffaf degradeler */
  background: radial-gradient(
      circle at top left,
      var(--color-orange-gradient-light) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at bottom right,
      var(--color-orange2-gradient-light) 0%,
      transparent 50%
    );
  opacity: 0.5;
  /* Efektin görünürlüğünü ayarla */
  z-index: 0;
}

.cta-section .container {
  position: relative;
  z-index: 1;
  /* İçeriği arka plan efektinin üzerine taşı */
  max-width: 900px;
  /* İçeriğin çok genişlemesini engelle */
}

.cta-section h2.display-4 {
  font-weight: 700;
  margin-bottom: 20px;
  color: var(--color-black);
  /* Başlık rengi: Koyu siyah */
  line-height: 1.2;
}

.cta-section p.lead {
  font-size: 1.25rem;
  margin-bottom: 30px;
  color: var(--color-gBlack);
  /* Paragraf rengi: Koyu gri */
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

/* CTA Buton Stili (öncekiyle aynı, turuncu vurgu devam ediyor) */
.cta-section .cta-button {
  display: inline-block;
  padding: 15px 40px;
  font-size: 1.15rem;
  font-weight: 600;
  text-decoration: none;

  background-color: var(--color-orange);
  /* Turuncu vurgu rengi */
  color: var(--color-black);
  /* Buton metin rengi (açık arka planla uyumlu) */
  border: 2px solid var(--color-orange);
  transition: all 0.3s ease-in-out;
  box-shadow: var(--shadow-orange);
}

.cta-section .cta-button:hover {
  background-color: var(--color-orange2);
  /* Hover'da daha parlak turuncu */
  color: var(--color-black);
  border-color: var(--color-orange2);
  transform: translateY(-3px);
  box-shadow: var(--shadow-orange-hover);
}

/* Responsive Ayarlamalar (Değişiklik Yok) */
@media (max-width: 768px) {
  .cta-section {
    padding: 60px 0;
  }

  .cta-section h2.display-4 {
    font-size: 2.5rem;
  }

  .cta-section p.lead {
    font-size: 1rem;
  }

  .cta-section .cta-button {
    padding: 12px 30px;
    font-size: 1rem;
  }
}

@media (max-width: 576px) {
  .cta-section {
    padding: 40px 0;
  }

  .cta-section h2.display-4 {
    font-size: 2rem;
  }
}

.ref-area {
  padding-top: 60px !important;
}

.faq-section .accordion li {
  width: 100% !important;
}

.tumu-btn {
  display: flex;
  /* Butonun içeriğini (metni) ortalamak için Flexbox */
  justify-content: center;
  align-items: center;

  width: max-content;
  margin: 60px auto 30px auto;
  padding: 12px 25px;
  /* Butonun iç boşluğu */
  font-size: 1rem;
  /* Buton metin boyutu */
  font-weight: 600;
  /* Kalın font */
  letter-spacing: 0.5px;
  /* Hafif harf aralığı */
  text-transform: uppercase;
  /* Tüm harfleri büyük yap */
  text-decoration: none;
  /* Link ise alt çizgiyi kaldır */
  white-space: nowrap;
  /* Metnin tek satırda kalmasını sağla */

  /* Açık Outline Görünümü */
  background-color: transparent;
  /* Arka plan şeffaf */
  color: var(--color-gBlack);
  /* Metin rengi: Koyu gri */
  border: 2px solid var(--color-border);
  /* Çerçeve rengi: Açık gri */
  border-radius: 8px;
  /* Köşeleri hafif yuvarlak */

  cursor: pointer;
  transition: all 0.3s ease-in-out;
  /* Geçiş efekti */
}

.tumu-btn:hover,
.tumu-btn:focus {
  /* Odaklandığında da hover efekti olsun */
  background-color: var(--color-orange2);
  /* Hover'da daha parlak turuncu */
  color: var(--color-black);
  border-color: var(--color-orange2);
  transform: translateY(-3px);
  box-shadow: var(--shadow-orange-hover);
}

/* Eğer butonunuz bir link (<a>) ise, aktif olduğunda da aynı hover efekti için */
.tumu-btn:active {
  background-color: var(--color-orange2);
  /* Hover'da daha parlak turuncu */
  color: var(--color-black);
  border-color: var(--color-orange2);
  transform: translateY(-3px);
  box-shadow: var(--shadow-orange-hover);
}

.info-footer .popular-post > h4,
.info-footer .our-link > h4,
.info-footer .get-touch > h4,
.info-footer .news-letter > h4 {
  color: var(--color-orange);
}

.info-footer .footer-left .footer-logo a {
  max-width: 95%;
}

.make-sticky {
  position: sticky;
  top: 160px;
}

.breadcum-content h1 {
  font-weight: 700;
  font-size: 38px;
  line-height: 48px;
  color: var(--color-orange);
  margin-bottom: 20px;
}

/* whatsapp-çerrez */

.whatsapp-button {
  position: fixed;

  left: 20px;

  bottom: 20px;

  z-index: 999;

  /* Diğer elementlerin üzerinde görünmesini sağlar */
}

.whatsapp-button a {
  display: block;
}

.whatsapp-button img {
  width: 60px;

  /* Ä°kon boyutunu ayarlayabilirsiniz */

  height: 60px;

  border-radius: 50%;

  /* Yuvarlak görünüm için */

  box-shadow: var(--shadow-whatsapp);

  /* Hafif gölge */

  transition: transform 0.3s ease-in-out;

  /* Hover efekti için geçiş */
}

.whatsapp-button img:hover {
  transform: scale(1.1);

  /* Hoverda hafif büyüme efekti */
}

/* çerez bandı */

.cookie-banner {
  position: fixed;

  left: 0;

  bottom: 0;

  width: 100%;

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

  color: var(--color-gray-dark);

  padding: 15px 20px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  z-index: 1000;

  /* Diğer elementlerin üzerinde görünmesini sağlar */

  box-shadow: var(--shadow-cookie);

  transform: translateY(100%);

  /* Başlangıçta aşağı kaydırarak gizle */

  opacity: 0;

  /* Görünürlüğü de sıfıra indir */

  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;

  /* Opaklık geçişini de ekle */
}

.cookie-banner.show {
  transform: translateY(0);

  /* Göstermek için yukarı kaydır */

  opacity: 1;

  /* Görünür yap */
}

.cookie-banner.hidden {
  transform: translateY(100%);

  opacity: 0;
}

.cookie-text {
  font-size: 16px;
}

.cookie-link {
  color: var(--color-orange);

  text-decoration: none;

  margin-left: 10px;
}

.cookie-link:hover {
  text-decoration: underline;
}

.cookie-button {
  background-color: var(--color-black);

  color: var(--color-white);

  border: none;

  padding: 5px 15px;

  border-radius: 5px;

  cursor: pointer;

  font-size: 16px;

  transition: background-color 0.3s ease-in-out;
}

.cookie-button:hover {
  background-color: var(--color-orange);
  color: var(--color-white);
}

/* Responsive Tasarım */

@media (max-width: 768px) {
  .cookie-banner {
    flex-direction: column;

    align-items: stretch;

    padding: 10px;

    text-align: center;
  }

  .cookie-text {
    margin-bottom: 10px;
  }

  .cookie-link {
    display: block;

    margin: 5px 0;
  }

  .cookie-button {
    width: 100%;
  }
}

/* çerez bandı */

/* whatsapp-çerrez */

/* formlarla */

.swal2-container {
  z-index: 99999999999 !important;
}

.swal2-container .select2-container {
  display: none;
}

.zorunlu-alanlar {
  display: flex;

  gap: 10px;

  flex-direction: column;
}

.zorunlu-alanlar span {
  color: var(--color-danger);

  font-size: 14px;

  font-weight: 500;
}

div:where(.swal2-container) div:where(.swal2-actions) .swal2-confirm {
  background-image: none;
  color: var(--color-white);
  background-color: var(--color-orange);
}

/* Spinner Stili */

.custom-spinner {
  display: inline-block;

  width: 16px;

  height: 16px;

  border: 2px solid var(--color-white);

  border-top: 2px solid var(--color-tr);

  border-radius: 50%;

  animation: spin 0.8s linear infinite;

  margin-left: 8px;

  vertical-align: middle;
}

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

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

.latest-news .new-post-card .post-img img {
  object-fit: cover;
  height: 300px;
}

.devami-btn {
  /* Metin rengini ve yazı tipini ayarlayın */
  color: var(--color-orange);
  font-family: var(--font-modern);
  /* Modern ve okunaklı bir yazı tipi */
  font-size: 1rem;
  /* Okunabilir font boyutu */
  font-weight: 500;
  /* Biraz daha belirgin bir kalınlık */

  /* Alt çizgiyi vurgulayın */
  text-decoration: none;
  /* Varsayılan alt çizgiyi kaldırın */
  position: relative;
  /* Sahte alt çizgi için konumlandırma */
  padding-bottom: 3px;
  /* Alt çizgi ile metin arasında boşluk */

  /* Hover efekti için geçiş ekleyin */
  transition: color 0.3s ease, border-color 0.3s ease;
  /* Renk ve alt çizgi rengi geçişi */
}

/* Sahte alt çizgi oluşturma */
.devami-btn::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  /* İnce bir çizgi */
  background-color: var(--color-orange);
  /* Metinle aynı renk */
  transition: width 0.3s ease, background-color 0.3s ease;
  /* Genişlik ve renk geçişi */
}

/* Üzerine gelince (hover) efekti */
.devami-btn:hover {
  color: var(--color-gBlack);
  /* Hafifçe daha koyu mavi */
}

.devami-btn:hover::after {
  width: 0;
  /* Alt çizgiyi kaydırarak yok et */
  background-color: transparent;
  /* Çizgiyi şeffaf yap */
}

/* Odaklanma (focus) ve aktif (active) durumları için */
.devami-btn:focus,
.devami-btn:active {
  outline: none;
  /* Odaklandığında varsayılan çerçeveyi kaldırın */
  color: var(--color-gBlack);
  /* Aynı hover rengi */
}

.devami-btn:focus::after,
.devami-btn:active::after {
  width: 0;
  background-color: transparent;
}

.latest-news .new-post-card .post-content h4 ~ p {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 10px;
}

.f-hiza {
  display: flex;
}

.f-hiza a {
  margin-left: 5px;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
}

.form-padding {
  padding: 90px 0;
  background: var(--color-white2);
}

.page-padding {
  padding: 90px 0;
}

.form-padding .contact-wrap {
  background: var(--color-white);
  padding: 55px 100px;
  box-shadow: var(--shadow-form);
}

.custom-form .form-control {
  background-color: var(--color-tr);
  border: 1px solid var(--color-orange);
  border-radius: 0;
  height: 60px;
  padding-left: 30px;
  color: var(--color-black);
  font-size: 15px;
  height: 45px !important;
  padding-left: 15px !important;
  margin-bottom: 20px;
}

.custom-form .form-label {
  color: var(--color-black);
  margin-bottom: 10px;
  font-weight: 500;
  font-size: 16px;
}

.custom-form .input-file {
  padding-left: 10px !important;
  height: auto !important;
  border-width: 1px;
}

.contact-btn-dark {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 200px;
  width: max-content;
  padding: 18px 30px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;

  /* Koyu Tema Görünümü */
  background-color: var(--color-black);
  /* Arka plan koyu gri (orijinal metin rengi) */
  color: var(--color-white);
  /* Metin rengi: Beyaz */
  border: 2px solid var(--color-border-dark);
  /* Çerçeve rengi: Açık gri veya hafif koyu gri */
  border-radius: 8px;
  /* Köşeleri aynı yuvarlak */

  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.contact-btn-dark:hover,
.contact-btn-dark:focus {
  background-color: var(--color-orange2);
  /* Hover'da orijinaldeki gibi parlak turuncu */
  color: var(--color-white);
  /* Hover'da metin beyaz kalsın */
  border-color: var(--color-orange2);
  /* Hover'da çerçeve turuncu olsun */
  transform: translateY(-3px);
  /* Koyu arka plan üzerinde daha belirgin bir gölge */
  box-shadow: var(--shadow-orange-light);
  /* Gölge saydamlığını biraz azalttık */
}

/* Eğer butonunuz bir link (<a>) ise, aktif olduğunda da aynı hover efekti için */
.contact-btn-dark:active {
  background-color: var(--color-orange2);
  color: var(--color-white);
  border-color: var(--color-orange2);
  transform: translateY(-3px);
  box-shadow: var(--shadow-orange-light);
}

.service-faq {
  background: var(--color-white);
  box-shadow: var(--shadow-form);
  padding: 30px 20px;
  margin-top: 60px;
}

.widgets .category-list .active h6 a {
  color: var(--color-orange);
}

.share-info {
  display: flex;
  gap: 1rem;
}

.share-info span {
  font-weight: 700;
  font-size: 24px;
  line-height: 36px;
  font-family: var(--font-heading);
  color: var(--color-black);
}

.social-link.vx ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 10px;
}

.social-link.vx a {
  display: inline-block;
  width: 40px;
  height: 40px;
  color: var(--color-white);
  font-size: 15px;
  text-align: center;
  line-height: 40px;
  border-radius: 5px;
}

.vx.social-link a {
  border-color: var(--color-orange);
  background: var(--color-orange);
}

.vx.social-link a:hover {
  opacity: 0.5;
}

.blog-detail-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.post-tags {
  display: none !important;
}

.modal-footer button {
  /* Basic button styling */
  padding: 8px 15px; /* Smaller padding for smaller buttons */
  border-radius: 5px; /* Slightly rounded corners */
  font-size: 0.9em; /* Slightly smaller font size */
  cursor: pointer;
  border: 1px solid transparent; /* Neutral border */
}

.modal-footer #dontShowAgain {
  background-color: var(--color-gBlack); /* Grey background for "Don't Show Again" */
  color: var(--color-white); /* White text */
  border-color: var(--color-gBlack);
}

.modal-footer #dontShowAgain:hover {
  background-color: var(--color-gBlack2); /* Darker grey on hover */
  border-color: var(--color-gBlack2);
}

.modal-footer .btn-primary {
  background-color: var(--color-orange); /* Orange background for primary button */
  color: var(--color-white); /* White text */
  border-color: var(--color-orange);
}

.modal-footer .btn-primary:hover {
  background-color: var(--color-orange2); /* Lighter orange on hover */
  border-color: var(--color-orange2);
}

.service-details .service-links-list li a {
  flex-wrap: nowrap;
}

.services-card .services-img img {
  height: 250px;
  object-fit: cover;
}

/* .services.v1 .services-card .services-text h4 {
  min-height: 60px;
} */

.services.v1 .services-card .services-text p {
  display: -webkit-box; /* Webkit tabanlı tarayıcılar için */
  -webkit-line-clamp: 3; /* Kaç satır olacağını belirtir */
  -webkit-box-orient: vertical; /* Metnin dikey olarak hizalanmasını sağlar */
  overflow: hidden; /* Taşınan içeriği gizler */
  text-overflow: ellipsis; /* Taşınan metnin sonuna üç nokta ekler */
}

.breadcum .breadcum-content ul {
  flex-wrap: wrap;
}

@media (min-width: 1200px) {
  .contact-us .contact-left .my-icon {
    min-width: 60px;
  }
}
@media (max-width: 1199.98px) {
  .contact-us .contact-left .my-icon {
    min-width: 40px;
  }
}
@media (min-width: 992px) {
  .menu-bar .menu-bar-content {
    margin-right: 20px;
  }

  .lang-change {
    border: 1px solid var(--color-orange);
  }

  .lang-change ul {
    width: max-content !important;
    min-width: unset !important;
    margin-top: 10px !important;
  }

  .lang-change a.first {
    padding: 10px !important;
  }

  .menu-bar .menu-logo a {
    max-width: 200px !important;
  }

  .banner .banner-content {
    width: 60%;
  }

  .fcols {
    justify-content: center;
    display: flex;
  }

  /* .fcols:first-child {
        justify-content: start;
        display: flex;
      }
    .fcols:last-child {
        justify-content: end;
        display: flex;
      } */
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .menu-bar .main-menu ul a {
    font-size: 12px;
  }
}
@media (max-width: 991.98px) {
  
header {
  height: 65px;
}

}

@media (max-width: 767.98px) {
  .form-padding .contact-wrap {
    padding: 25px 30px;
  }

  .link-anime {
    padding: 10px 15px;
        font-size: 14px;
  }
}
@media (max-width: 599.98px) {
  .blog-detail-bottom {
    flex-direction: column;
  }
}