:root {
  --primary: #121212;
  --secondary: #555555;
  --border: rgba(18,
  18,
  18,
  0.08);
  --theme: #121212;
  --black: #121212;
  --black-2: #555555;
  --white: #FFFFFF;
  --white-2: #999999;
  --action: #FFCD4D
}
:root .dark {
  --primary: #ffffff;
  --secondary: #999999;
  --border: rgba(255, 255, 255, 0.08)
}

.mbm-1 {
  margin-bottom:-1px
}
:root {
  --font_awesome: "Font Awesome 6 Free"
}
* {
  margin:0;
  padding:0
}
body {
   font-family: "Outfit", sans-serif;
  line-height:1
}
html {
  scroll-behavior:smooth
}
h1,
h2,
h3,
h4,
h5,
h6 {
  padding:0;
  margin:0;
  color:var(--primary)
}
ul,
ol {
  padding:0;
  margin:0
}
li {
  list-style:none
}
a {
  text-decoration:none;
  transition:all .3s;
  color:inherit
}
a:hover {
  color:var(--primary)
}
button {
  background-color:rgba(0,0,0,0);
  border:0
}
p {
  padding:0;
  margin:0;
  line-height:1.41;
  font-weight:400;
  font-size:18px;
  color:var(--secondary)
}
strong {
  font-weight:500
}
video,
iframe,
img {
  margin:0;
  padding:0
}
img {
  max-width:100%
}
.medium {
  font-weight:600
}
.bold {
  font-weight:700
}
@media only screen and (max-width: 767px) {
  br {
    display:none
  }
}
main {
  display:inline-block;
  width:100%
}
h1 {
  font-size:48px
}
h2 {
  font-size:36px
}
h3 {
  font-size:32px
}
h4 {
  font-size:24px
}
h5 {
  font-size:20px
}
h6 {
  font-size:18px
}

.cf_parallax_image {
  overflow:hidden
}
.body-overlay {
  position:fixed;
  z-index:9;
  pointer-events:none;
  top:0;
  opacity:1;
  inset-inline-start:0;
  width:100vw;
  height:100vh;
  background-repeat:repeat;
  background-position:top left;
  background-image:url(../imgs/writer/body-bg.html)
}
.container-xl {
  max-width:1550px
}
::-webkit-scrollbar {
  width:5px
}
::-webkit-scrollbar-track {
  background:#d6d6d6
}
::-webkit-scrollbar-thumb {
  background:#888
}
::-webkit-scrollbar-thumb:hover {
  background:#555
}
/* .pagination.style-1 {
  display:flex;
  gap:20px
}
.pagination.style-1 li:last-child {
  padding-inline-start:20px
}
.pagination.style-1 li a {
  display:flex;
  align-items:center;
  gap:10px
}
.dir-rtl .pagination.style-1 li a img {
  transform:rotate(180deg)
}
.pagination.style-1 li a.current {
  color:#999
} */
./* register-form-box {
  background-color:var(--white);
  border-radius:30px;
  width:420px;
  padding:70px 45px 80px;
  position:relative;
  text-align:center
} */

/* .register-form-box .close-btn {
  width:45px;
  height:45px;
  border:1px solid var(--border);
  border-radius:50%
}
.register-form-box .btn-wrapper {
  position:absolute;
  right:10px;
  top:10px
}
.register-form-box .title {
  font-size:30px
}
.register-form-box .title span {
  font-weight:400;
  color:var(--primary)
}
.register-form-box .icon {
  margin-top:20px;
  margin-bottom:45px
}
.register-form-box .input-field input {
  width:100%;
  height:60px;
  border:1px solid var(--border);
  border-radius:30px;
  padding:0 30px;
  outline:none
}
.register-form-box .input-field input:focus {
  border-color:var(--theme)
}
.register-form-box .input-field:not(:first-child) {
  margin-top:12px
}
.register-form-box .policy-field {
  margin-top:20px;
  margin-bottom:42px;
  display:flex;
  gap:10px;
  align-items:flex-start
}
.register-form-box .policy-field label {
  font-size:14px
}
.register-form-box .policy-field label a {
  font-weight:600;
  text-decoration:underline
}
.register-form-box .note {
  margin-top:15px;
  text-align:start
}
.register-form-box .note p {
  font-size:14px
}
.register-form-box .note p a {
  font-weight:600;
  text-decoration:underline
}
.register-form-box button {
  width:100%
}
.register-form-box .alternative-title {
  font-size:16px;
  position:relative;
  margin-top:38px
}
.register-form-box .alternative-title::before {
  position:absolute;
  content:"";
  width:100%;
  height:1px;
  background-color:var(--border);
  left:0;
  top:50%;
  transform:translateY(-50%)
}
.register-form-box .alternative-title span {
  padding:0 18px;
  background-color:var(--white);
  display:inline-block;
  position:relative
}
.register-form-box .social-links {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin-top:37px
}
.register-form-box .social-links a {
  width:60px;
  height:60px;
  background-color:#f5f5f5;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  border-radius:50%;
  color:var(--primary)
}
.register-form-box .social-links a:hover {
  background-color:var(--theme)
} */
/* .login-form-box {
  background-color:var(--white);
  border-radius:30px;
  width:420px;
  padding:70px 45px 80px;
  position:relative;
  text-align:center
}


.login-form-box .close-btn {
  width:45px;
  height:45px;
  border:1px solid var(--border);
  border-radius:50%
}
.login-form-box .btn-wrapper {
  position:absolute;
  right:10px;
  top:10px
}
.login-form-box .title {
  font-size:30px
}
.login-form-box .title span {
  font-weight:400;
  color:var(--primary)
}
.login-form-box .icon {
  margin-top:20px;
  margin-bottom:45px
}
.login-form-box .input-field input {
  width:100%;
  height:60px;
  border:1px solid var(--border);
  border-radius:30px;
  padding:0 30px;
  outline:none
}
.login-form-box .input-field input:focus {
  border-color:var(--theme)
}
.login-form-box .input-field:not(:first-child) {
  margin-top:12px
}
.login-form-box .policy-field {
  margin-top:15px;
  margin-bottom:42px;
  display:flex;
  gap:10px;
  align-items:flex-start
}
.login-form-box .policy-field label {
  font-size:14px
}
.login-form-box .policy-field label a {
  font-weight:600;
  text-decoration:underline
}
.login-form-box .note {
  margin-top:15px;
  text-align:start
}
.login-form-box .note p {
  font-size:14px
}
.login-form-box .note p a {
  font-weight:600;
  text-decoration:underline
}
.login-form-box button {
  width:100%
}
.login-form-box .forget-password {
  font-size:14px;
  color:var(--theme);
  margin-left:auto
} */
.pos-abs {
  position:absolute
}
.header-area {
  transition: all 0.5s ease-in;
}
.header-area.sticky {
  position:fixed !important;
  background-color:var(--white);
  z-index:9999
}
.dark .header-area.sticky {
  background-color:#121212
}
.header-area.sticky .header-area__inner {
  height:90px !important
}
.header-area.sticky button i {
  color:var(--primary)
}
.modal {
  z-index:99999
}
.modal-content {
  background-color:rgba(0,0,0,0);
  border:0
}
.btn-primary {
  background-color:rgba(0,0,0,0);
  color:unset;
  border:unset;
  outline:unset
}
.btn-primary:hover {
  background-color:unset
}
.btn-primary:focus {
  outline:unset;
  background-color:unset;
  border:unset
}
.form-search input {
  width:100%;
  height:55px;
  background:rgba(0,0,0,0);
  border:0;
  color:var(--white)
}
.form-search input:focus {
  outline:0
}
.form-search {
  display:flex;
  gap:10px;
  border:1px solid #19242b;
  border-radius:70px;
  padding:0 15px
}
.form-search button i {
  color:var(--white)
}
.btn-close {
  content:"";
  font-family:"icomoon";
  font-size:16px;
  opacity:1;
  filter:brightness(100) contrast(0);
  border-radius:50px;
  width:2em;
  height:2em;
  border:1px solid var(--white);
  position:absolute;
  inset-inline-end:20px;
  top:20px;
  transition:unset
}
.modal {
  background-color:var(--primary)
}


.circle-text {
  width:140px;
  height:140px;
  position:relative;
  border-radius:100px;
  background-color:rgba(0,0,0,0);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
  overflow:hidden
}


.circle-text .text {
  animation:spinner 5s infinite linear;
  padding:2px
}
.circle-text .icon {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%)
}
.circle-text:before {
  position:absolute;
  content:"";
  width:100%;
  height:100%;
  border:37px solid rgba(0,0,0,0);
  border-radius:50%
}
.p-relative {
  position:relative
}
.p-absolute {
  position:absolute
}
.fix {
  overflow:hidden
}
.bg-full {
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0
}
.bg-full img {
  width:100%;
  height:100%;
  -o-object-fit:cover;
  object-fit:cover
}
.has-top-line {
  position:relative;
  padding-top:10px
}
.has-top-line:before {
  position:absolute;
  content:"";
  width:100%;
  height:1px;
  background-color:currentColor;
  top:0;
  left:0
}
.has-bottom-line {
  position:relative;
  padding-bottom:10px
}
.has-bottom-line:after {
  position:absolute;
  content:"";
  width:100%;
  height:1px;
  background-color:currentColor;
  bottom:0;
  left:0
}
.has-left-line {
  position:relative;
  padding-inline-start:35px;
  display:inline-block
}
.has-left-line:before {
  position:absolute;
  content:"";
  width:30px;
  height:1px;
  background-color:currentColor;
  inset-inline-start:0;
  top:50%;
  transform:translateY(-50%)
}
.has-right-line {
  position:relative;
  padding-inline-end:35px;
  display:inline-block
}
.has-right-line:after {
  position:absolute;
  content:"";
  width:30px;
  height:1px;
  background-color:currentColor;
  inset-inline-end:0;
  top:50%;
  transform:translateY(-50%)
}
.wc-btn-play {
  width:56px;
  height:56px;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  border:1.5px solid currentColor;
  color:var(--primary);
  border-radius:50%;
  transition:all .5s;
  font-size:14px
}


.wc-btn-play:hover {
  color:var(--theme, --action)
}
.wc-btn-play.light {
  color:var(--white)
}
.wc-btn-play.light:hover {
  color:var(--white)
}
.wc-btn-play.dark {
  color:var(--black)
}
.wc-btn-play.dark:hover {
  color:var(--black)
}

.line-area {
  position:relative;
  z-index:1
}
.lines {
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  display:flex;
  justify-content:space-between;
  z-index:-1
}
.lines .line {
  width:1px;
  height:100%;
  background-color:var(--border);
  display:inline-block;
  position:relative;
  z-index:1
}
.wc-btn-icon i {
  transform:rotate(-45deg);
  transition:all .3s;
  font-size:20px;
  color:var(--primary)
}
.dir-rtl .wc-btn-icon i {
  transform:rotate(-135deg)
}
.wc-btn-icon:hover i {
  transform:rotate(0)
}
.dir-rtl .wc-btn-icon:hover i {
  transform:rotate(-180deg)
}
.list-check li {
  position:relative;
  padding-inline-start:30px;
  font-size:18px;
  font-weight:400;
  line-height:1.4;
  margin-bottom:10px
}
.list-check li::before {
  content:"";
  position:absolute;
  inset-inline-start:0;
  background-image:url("../imgs/electrician/check-mark.html");
  background-repeat:no-repeat;
  width:14px;
  height:14px;
  top:4px;
  transform:rotateY(0deg)
}
.dir-rtl .list-check li::before {
  transform:rotateY(180deg)
}
.list-check li:last-child {
  margin-bottom:0
}
.list-plus li {
  position:relative;
  padding-inline-start:30px;
  font-size:18px;
  font-weight:400;
  line-height:1.4;
  display:inline-block;
  width:100%
}
.list-plus li::before {
  content:"+";
  position:absolute;
  inset-inline-start:0;
  top:-10px;
  font-size:30px;
  font-weight:300;
  line-height:1
}
.list-plus li:not(:last-child) {
  margin-bottom:10px
}
.pos-center {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  z-index:1
}
.pagination-with-dash {
  font-size:14px;
  display:flex;
  gap:10px;
  color:var(--primary);
  align-items:center
}
.pagination-with-dash .dash {
  width:100px;
  height:1px;
  background-color:var(--primary)
}
.pagination-with-dash .swiper-pagination-current {
  display:flex;
  gap:5px;
  align-items:center
}
.pagination-with-dash .swiper-pagination-total {
  display:flex;
  gap:5px;
  align-items:center
}
.wcf__toggle_switcher .slide-toggle-wrapper {
  display:flex;
  justify-content:center
}
.wcf__toggle_switcher .slide-toggle-btn {
  --switcher-width: 40px;
  --switcher-border-width: 2px;
  --switcher-indicator-width: 16px;
  background-color:#f0f7f8;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  -webkit-user-select:none;
  -moz-user-select:none;
  user-select:none
}
.wcf__toggle_switcher .slide-toggle-btn input {
  display:none
}
.wcf__toggle_switcher .before_label,
.wcf__toggle_switcher .after_label {
  cursor:pointer;
  font-size:18px;
  color:var(--primary)
}
.wcf__toggle_switcher .toggle-pane {
  display:none
}
.wcf__toggle_switcher .toggle-pane.show {
  display:block
}
.wcf__toggle_switcher.style-1 .switcher {
  display:inline-block;
  width:var(--switcher-width);
  height:20px;
  background-color:#999;
  border:var(--switcher-border-width) solid #999;
  border-radius:10px;
  position:relative;
  cursor:pointer
}
.wcf__toggle_switcher.style-1 .switcher::before {
  content:"";
  position:absolute;
  top:50%;
  left:0;
  width:var(--switcher-indicator-width);
  height:var(--switcher-indicator-width);
  background-color:#fff;
  border-radius:50%;
  transition:transform .3s;
  transform:translate(0px, -50%)
}
.wcf__toggle_switcher.style-1 input:checked+.switcher::before {
  transform:translate(calc(var(--switcher-width) - (var(--switcher-indicator-width) + 2 * var(--switcher-border-width))), -50%)
}
.wcf__toggle_switcher.style-1 input:checked+.switcher {
  background-color:#000;
  border-color:#000
}
.wcf__toggle_switcher.style-2 .before_label,
.wcf__toggle_switcher.style-2 .after_label {
  padding:22px 38px;
  position:relative;
  z-index:2;
  font-size:16px;
  line-height:1;
  color:var(--primary)
}
.wcf__toggle_switcher.style-2 .before_label:after,
.wcf__toggle_switcher.style-2 .after_label:after {
  content:"";
  width:100%;
  height:100%;
  border-radius:60px;
  position:absolute;
  left:0;
  top:0;
  background-color:var(--theme);
  z-index:-1;
  opacity:0;
  visibility:hidden;
  transition:transform .3s
}
.wcf__toggle_switcher.style-2 .before_label.active,
.wcf__toggle_switcher.style-2 .after_label.active {
  color:var(--primary)
}
.wcf__toggle_switcher.style-2 .before_label.active:after,
.wcf__toggle_switcher.style-2 .after_label.active:after {
  opacity:1;
  visibility:visible;
  transform:translatex(0)
}
.wcf__toggle_switcher.style-2 .before_label:after {
  transform:translatex(100%)
}
.wcf__toggle_switcher.style-2 .after_label:after {
  transform:translatex(-100%)
}
.wcf__toggle_switcher.style-2 .slide-toggle-btn {
  gap:0;
  border-radius:60px
}
html {
  --container-max-widths: 1320px
}
@media only screen and (max-width: 1399px) {
  html {
    --container-max-widths: 1140px
  }
}
@media only screen and (max-width: 1199px) {
  html {
    --container-max-widths: 960px
  }
}
@media only screen and (max-width: 991px) {
  html {
    --container-max-widths: 720px
  }
}
@media only screen and (max-width: 767px) {
  html {
    --container-max-widths: 540px
  }
}
body {
  background-color:#f5f5f5;
  color:var(--secondary)
}
.dark body {
  background-color:#121212
}
.body-wrapper {
  background-color:var(--white);
/*   overflow:hidden */
}
.dark .body-wrapper {
  background-color:var(--black)
}
.img_anim_reveal {
  visibility:hidden;
  overflow:hidden
}
.img_anim_reveal img {
  -o-object-fit:cover;
  object-fit:cover;
  transform-origin:left
}
.anim-reveal {
  overflow:hidden
}
.anim-reveal-line {
  overflow:hidden
}
.color-white {
  color:var(--white)
}
.color-black {
  color:var(--black)
}
.color-primary {
  color:var(--primary)
}
.color-secondary {
  color:var(--secondary)
}
.wc-bg-white {
  background-color:var(--white)
}
.wc-bg-black {
  background-color:var(--black)
}
.wc-bg-primary {
  background-color:var(--primary)
}
.wc-bg-secondary {
  background-color:var(--secondary)
}
.wc-bg-transparent {
  background-color:rgba(0,0,0,0) !important
}
.zi-1 {
  z-index:1
}
.zi-2 {
  z-index:2
}
.zi-0 {
  z-index:0
}
.zi--1 {
  z-index:-1
}
.box-layout {
  max-width:1600px;
  margin:0 auto;
  overflow:hidden !important
}
.text-underline {
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:4px
}
.vertically-center {
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center
}
.text-indent-40 {
  text-indent:40px
}
.text-indent-50 {
  text-indent:50px
}
header {
  margin-bottom:-1px;
  z-index:100
}
section {
  margin-bottom:-1px
}
.dir-rtl {
  direction:rtl
}
.line-divider-sm {
  height:.5px;
  background-color:var(--black-9)
}
.dark .line-divider-sm {
  background-color:#e9e9e9
}
.admin-bar header,
.admin-bar .body-wrapper {
  margin-top:32px
}
.swiper,
.swiper-container {
  direction:ltr
}
.border-e-0 {
  border-inline-end:0 !important
}
.border-s-0 {
  border-inline-start:0 !important
}
.hover-zoom li a:hover {
  transform:scale(1.1)
}
.hover-rotate li a i {
  transition:all 1s
}
.hover-rotate li a:hover i {
  transform:rotate(360deg)
}
.hover-space li a:hover {
  letter-spacing:1px
}
.hover-border-move li a {
  position:relative;
  transition:all .5s
}
.hover-border-move li a:hover::after {
  width:100%;
  left:auto;
  right:0
}
.hover-border-move li a::after {
  position:absolute;
  content:"";
  width:0%;
  height:1px;
  bottom:0;
  left:0;
  transition:all .5s;
  background-color:currentColor
}
.menu-hover-default li a:hover {
  color:var(--primary)
}
.menu-hover-space li a:hover {
  letter-spacing:1px
}
.blog-img-leftmove img {
  transform:scale(1.1);
  transition:all .5s
}
.blog-img-leftmove:hover img {
  transform:scale(1.1) translateX(4%)
}
.blog-img-zoom {
  overflow:hidden
}
.blog-img-zoom img {
  transform:scale(1);
  transition:all 1s
}
.blog-img-zoom:hover img {
  transform:scale(1.1)
}
.anim_img_zoom img {
  transform:scale(1);
  transition:all 1s
}
.anim_img_zoom:hover img {
  transform:scale(1.1)
}
.title-hover-flip {
  overflow:hidden;
  perspective:1000px
}
.title-hover-flip strong {
  font-weight:400;
  position:relative;
  display:inline-block;
  transition:transform .5s;
  transform-origin:50% 0;
  transform-style:preserve-3d
}
.title-hover-flip strong:before {
  position:absolute;
  top:100%;
  left:0;
  width:100%;
  height:100%;
  content:attr(data-hover);
  transition:all .5s;
  transform:rotateX(-90deg);
  transform-origin:50% 0
}
.title-hover-flip:hover strong {
  transform:rotateX(90deg) translateY(-22px)
}
.service-hover-default:hover {
  background-color:var(--white-6)
}
.service-rollover-right {
  position:relative;
  transition:all .5s
}
.service-rollover-right::after {
  position:absolute;
  content:"";
  width:0%;
  height:100%;
  top:0;
  left:0;
  background-color:var(--white-6);
  transition:all .5s cubic-bezier(0.42, 0, 0.58, 1)
}
.service-rollover-right:hover::after {
  width:100%;
  left:auto;
  right:0%
}
.service-rollover-left {
  position:relative;
  transition:all .5s
}
.service-rollover-left::after {
  position:absolute;
  content:"";
  width:0%;
  height:100%;
  top:0;
  right:0;
  background-color:var(--white-6);
  transition:all .3s cubic-bezier(0.42, 0, 0.58, 1);
  z-index:-1
}
.service-rollover-left:hover::after {
  width:100%;
  right:auto;
  left:0%
}
.service-rollover-top {
  position:relative;
  transition:all .5s
}
.service-rollover-top::after {
  position:absolute;
  content:"";
  width:100%;
  height:0%;
  left:0;
  bottom:0;
  background-color:var(--white-6);
  transition:all .5s cubic-bezier(0.42, 0, 0.58, 1)
}
.service-rollover-top:hover::after {
  height:100%;
  bottom:auto;
  top:0%
}
.service-rollover-bottom {
  position:relative;
  transition:all .5s
}
.service-rollover-bottom::after {
  position:absolute;
  content:"";
  width:100%;
  height:0%;
  top:0;
  left:0;
  background-color:var(--white-6);
  transition:all .5s cubic-bezier(0.42, 0, 0.58, 1)
}
.service-rollover-bottom:hover::after {
  height:100%;
  top:auto;
  bottom:0%
}
.container-preloader {
  align-items:center;
  cursor:none;
  display:flex;
  height:100%;
  justify-content:center;
  position:fixed;
  left:0;
  top:0;
  width:100%;
  z-index:900
}
.container-preloader .animation-preloader {
  position:absolute;
  z-index:100
}
.container-preloader .animation-preloader .spinner {
  animation:spinner 1s infinite linear;
  border-radius:50%;
  height:9em;
  width:9em;
  border:10px solid var(--white);
  border-top-color:var(--primary);
  margin:0 auto 3.5em auto
}


.container-preloader .animation-preloader .txt-loading {
  font:bold 5em "Montserrat",sans-serif;
  text-align:center;
  -webkit-user-select:none;
  -moz-user-select:none;
  user-select:none
}
.container-preloader .animation-preloader .txt-loading .characters {
  color:var(--white);
  position:relative;
  display:inline-block
}
.dark .container-preloader .animation-preloader .txt-loading .characters {
  color:rgba(0,0,0,.2)
}


.container-preloader .animation-preloader .txt-loading .characters:before {
  color:var(--primary);
  content:attr(data-text);
  animation:characters 4s infinite;
  left:0;
  top:0;
  opacity:0;
  position:absolute;
  transform:rotateY(-90deg)
}
.container-preloader .animation-preloader .txt-loading .characters:nth-child(2):before {
  animation-delay:.2s
}
.container-preloader .animation-preloader .txt-loading .characters:nth-child(3):before {
  animation-delay:.4s
}
.container-preloader .animation-preloader .txt-loading .characters:nth-child(4):before {
  animation-delay:.6s
}
.container-preloader .animation-preloader .txt-loading .characters:nth-child(5):before {
  animation-delay:.8s
}
.container-preloader .animation-preloader .txt-loading .characters:nth-child(6):before {
  animation-delay:1s
}
.container-preloader .loader-section {
  background-color:var(--black);
  height:100%;
  position:fixed;
  top:0;
  width:calc(50% + 1px)
}
.dark .container-preloader .loader-section {
  background-color:var(--white)
}
.container-preloader .loader-section.section-left {
  left:0
}
.container-preloader .loader-section.section-right {
  right:0
}
.loaded .animation-preloader {
  opacity:0;
  transition:.3s ease-out
}
.loaded .loader-section.section-left {
  transform:translateX(-101%);
  transition:.7s .3s all cubic-bezier(0.1, 0.1, 0.1, 1)
}
.loaded .loader-section.section-right {
  transform:translateX(101%);
  transition:.7s .3s all cubic-bezier(0.1, 0.1, 0.1, 1)
}
.scroll__down {
  display:flex;
  gap:20px;
  align-items:center
}
.scroll__down p {
  font-weight:500;
  font-size:14px;
  line-height:1.9;
  text-transform:uppercase;
  color:var(--white)
}
.scroll__down span {
  width:66px;
  height:106px;
  border:1px solid var(--black-6);
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:89px
}
.scroll__down span i {
  color:var(--white)
}
.scroll__down-wrapper {
  height:425px;
  display:flex;
  align-items:center;
  justify-content:center
}


.scroll-top {
  width:50px;
  height:50px;
  position:fixed;
  right:15px;
  bottom:0px;
  z-index:9999;
  background:var(--white);
  border-radius:100px;
  mix-blend-mode:exclusion;
  opacity:0;
  visibility:hidden;
  transition:all .5s
}
.scroll-top.showed {
  opacity:1;
  visibility:visible;
  bottom:20px
}
.go-top-writer {
  width:105px;
  font-size:16px;
  cursor:pointer;
  text-align:left;
  color:var(--white);
  background-image:url(../imgs/writer/go-top.html);
  background-position:right center;
  background-repeat:no-repeat;
  right:16%;
  visibility:hidden;
  opacity:0;
  z-index:9;
  transition:all .5s
}
.dark .go-top-writer {
  color:var(--black);
  background-image:url(../imgs/writer/go-top-light.html)
}
.go-top-writer:hover {
  color:var(--primary)
}
.go-top-writer.showed {
  opacity:1;
  visibility:visible;
  bottom:20px
}


.progress-wrap {
  position:fixed;
  right:30px;
  bottom:100px;
  height:46px;
  width:46px;
  cursor:pointer;
  display:block;
  border-radius:50px;
  z-index:99;
  opacity:0;
  visibility:hidden;
  transform:translateY(15px);
  transition:all 200ms linear;
}
.progress-wrap.active-progress {
  opacity:1;
  visibility:visible;
  transform:translateY(0)
}
.progress-wrap::after {
  position:absolute;
  content:"";
  font:var(--fa-font-solid);
  text-align:center;
  line-height:46px;
  font-size:20px;
  color:var(--black);
  left:0;
  top:0;
  height:46px;
  width:46px;
  cursor:pointer;
  display:block;
  z-index:1;
  transition:all 200ms linear;
  border-radius:50px
}
.progress-wrap svg path {
  fill:var(--black-6)
}
.progress-wrap svg.progress-circle path {
  fill:var(--white);
  stroke:var(--theme);
  stroke-width:5;
  box-sizing:border-box;
  transition:all 200ms linear
}
.light .scroll__down p {
  color:var(--black)
}
.light .scroll__down span {
  border-color:var(--white-3)
}
.light .scroll__down span i {
  color:var(--black)
}
.light.go-top-writer {
  color:var(--black);
  background-color:rgba(0,0,0,0);
  background-image:url(../imgs/writer/go-top-light.html)
}
.light.progress-wrap {
  margin:0;
  background-color:rgba(0,0,0,0)
}
.light.progress-wrap svg path {
  fill:var(--black)
}
.light.progress-wrap::after {
  color:var(--white)
}
.b-radius {
  border-radius:12px
}
.wc-btn {
  display:inline-flex;
  transition:all .3s
}
.wc-btn-default {
  font-size:14px;
  font-weight:500;
  line-height:1;
  color:var(--white);
  text-transform:capitalize;
  background:rgba(0,0,0,0);
  border-radius:100px;
  padding:17px 35px;
  display:inline-flex;
  gap:10px;
  align-items:center;
  border:1px solid var(--border);
  overflow:hidden;
  transition:all .3s
}
.wc-btn-default:hover {
  color:var(--white)
}
.dark .wc-btn-default {
  color:var(--black)
}
.dark .wc-btn-default:hover {
  color:var(--black)
}
.dir-rtl .wc-btn-default i {
  transform:rotateY(180deg)
}
.wc-btn-border {
  gap:10px;
  display:inline-flex;
  align-items:center;
  color:var(--white);
  font-size:16px;
  font-weight:500;
  line-height:1.5;
  padding:16px 30px;
  border:1px solid var(--white);
  overflow:hidden;
  transition:all .3s;
  z-index:1;
  position:relative
}
.wc-btn-border:hover {
  color:var(--white)
}
.dark .wc-btn-border {
  color:var(--black);
  border-color:var(--black)
}
.dark .wc-btn-border:hover {
  color:var(--black)
}
.wc-btn-primary {
padding: 18.5px 22.2px;
  font-weight:700;
  font-size:16px;
  line-height:1;
  color:var(--white);
  background-color: #1B8B83;
  border-radius:15px;
  transition:all .3s;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  z-index:1;
  gap:30px;
  white-space:nowrap
}
.dark .wc-btn-primary {
  color:var(--black)
}
@media only screen and (max-width: 991px) {
  .wc-btn-primary {
    padding:16px 25px
  }
}
.wc-btn-primary:hover {
  color:var(--white);
  opacity: 0.9;
/*   background-color:var(--primary); */
}
.wc-btn-primary.bordered {
  border-color:var(--primary);
  background-color:rgba(0,0,0,0);
  color:var(--primary)
}
.wc-btn-primary.bordered:hover {
  border-color:var(--primary);
  background-color:var(--primary);
  color:var(--white)
}
.dark .wc-btn-primary.bordered:hover {
  color:var(--black)
}
.dir-rtl .wc-btn-primary i {
  transform:rotateY(180deg)
}
.wc-btn-circle {
  text-align:center;
  width:70px;
  height:70px;
  font-weight:500;
  font-size:16px;
  line-height:1.5;
  color:var(--black);
  border-radius:100%;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  background-color:var(--white)
}
@media only screen and (max-width: 1199px) {
  .wc-btn-circle {
    width:50px;
    height:50px
  }
}
.wc-btn-circle:hover {
  background-color:var(--black);
  color:var(--white)
}
.wc-btn-oval {
  font-weight:500;
  font-size:16px;
  line-height:1.5;
  color:var(--white);
  border:1px solid #3f3a36;
  display:inline-block;
  padding:32px 52px;
  text-align:center;
  transition:all .3s;
  border-radius:50% 50% 50% 50%/50% 50% 50% 50%
}
.dark .wc-btn-oval {
  color:var(--black)
}
.wc-btn-oval:hover {
  color:var(--primary)
}
.wc-btn-light {
  color:var(--white) !important;
  border-color:var(--white) !important
}
.wc-btn-light:hover {
  color:var(--black) !important
}
.wc-btn-light span {
  background-color:var(--white) !important
}
.wc-btn-ellipse {
  font-size:16px;
  font-weight:500;
  color:var(--white);
  padding:45px 45px;
  position:relative;
  display:inline-block;
  background-color:var(--white);
  border-radius:100%;
  border-top-left-radius:200%;
  border-bottom-right-radius:200%;
  z-index:1
}
.dark .wc-btn-ellipse {
  color:var(--black);
  background-color:var(--black)
}
.wc-btn-ellipse:before {
  position:absolute;
  content:"";
  width:calc(100% - 14px);
  height:calc(100% - 2px);
  background-color:var(--black);
  z-index:-1;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  border-radius:100%;
  border-top-left-radius:200%;
  border-bottom-right-radius:200%
}
.dark .wc-btn-ellipse:before {
  background-color:#ededed
}
.wc-btn-appointment {
  font-weight:500;
  font-size:20px;
  line-height:24px;
  color:var(--blue-6);
  text-align:center;
  border:1px solid currentColor;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  height:215px;
  width:215px;
  padding:20px
}


.wc-btn-appointment i {
  font-size:24px;
  margin-bottom:10px
}
.wc-btn-appointment:hover {
  color:var(--blue-3)
}
.wc-btn-link {
  font-weight:500;
  font-size:14px;
  line-height:1.7;
  color:var(--white);
  display:inline-block;
  text-transform:uppercase;
  transition:all .3s;
  display:inline-flex;
  align-items:center;
  gap:10px
}
.dark .wc-btn-link {
  color:var(--black)
}
.wc-btn-link i {
  transform:rotate(-45deg);
  transition:all .3s
}
.wc-btn-link:hover {
  color:var(--primary)
}
.wc-btn-link:hover i {
  transform:rotate(0);
  color:var(--primary)
}
.about-btn {
  display:inline-block;
  padding:15px 30px;
  background-color:var(--primary);
  color:var(--black);
  font-weight:500;
  font-size:16px;
  line-height:26px;
  text-align:center
}
.about-btn img {
  padding-left:15px
}
.readmore-btn img {
  margin-bottom:3px
}
.play_btn_5 {
  height:100px;
  width:100px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--white)
}


.play_btn_5:hover {
  border-color:var(--primary)
}
.play_btn_5 i {
  font-size:20px;
  color:var(--white)
}
.dark .play_btn_5 i {
  color:var(--black)
}
.dark .play_btn_5 img {
  filter:brightness(0)
}
.get-touch {
  font-weight:500;
  font-size:14px;
  line-height:1.5;
  color:var(--white-11);
  padding:13px 18px;
  display:inline-block;
  text-transform:uppercase;
  border:1px solid var(--white);
  margin-inline-end:40px
}
.get-touch:hover {
  color:var(--white)
}
@media only screen and (max-width: 767px) {
  .get-touch {
    padding:12px 10px;
    margin-inline-end:12px
  }
}
.wc-btns-group {
  text-align:center;
  display:flex
}
@media only screen and (max-width: 991px) {
  .wc-btns-group {
    flex-direction:column
  }
}
@media only screen and (max-width: 767px) {
  .wc-btns-group {
    padding:40px 0
  }
  .wc-btns-group br {
    display:block
  }
}
.wc-btns-group .btn-wrapper a {
  width:140px;
  height:140px;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  background:var(--white);
  border-radius:50%;
  color:var(--black);
  font-weight:500
}
@media only screen and (max-width: 1199px) {
  .wc-btns-group .btn-wrapper a {
    width:110px;
    height:110px
  }
}
.wc-btns-group .btn-wrapper:first-child a {
  margin-inline-end:-15px;
  background-color:var(--primary)
}
@media only screen and (max-width: 991px) {
  .wc-btns-group .btn-wrapper:first-child a {
    margin-inline-end:0
  }
}
.wc-btns-group .btn-wrapper:first-child a span {
  background-color:var(--white)
}
.wc-btns-group .btn-wrapper:last-child a {
  margin-inline-start:-15px
}
.dark .wc-btns-group .btn-wrapper:last-child a {
  background:var(--black);
  color:var(--white)
}
@media only screen and (max-width: 991px) {
  .wc-btns-group .btn-wrapper:last-child a {
    margin-inline-start:0;
    margin-top:-15px
  }
}
.wc-btns-group .btn-wrapper:last-child a:hover {
  border:0
}
.wc-btns-group .btn-wrapper:last-child a span {
  background-color:var(--primary)
}
.wc-btns-group-wrap {
  height:425px;
  display:flex;
  justify-content:center;
  align-items:center;
  border-bottom:1px solid var(--black-6)
}
.dark .wc-btns-group-wrap {
  border-color:#f3f2f2
}


@media only screen and (max-width: 1199px) {
  .wc-btns-group-wrap {
    height:350px
  }
}
@media only screen and (max-width: 767px) {
  .wc-btns-group-wrap {
    height:auto
  }
}
.wc-btns-group a:hover {
  border:0
}
.wc-btns-group a span {
  background-color:var(--white)
}
.btn-hover-bgchange {
  overflow:hidden;
  position:relative;
  z-index:5
}
.btn-hover-bgchange span {
  position:absolute;
  content:"";
  width:0;
  height:0;
  left:50%;
  top:50%;
  z-index:-1;
  border-radius:100%;
  transition:all 1s;
  background-color:var(--primary);
  transform:translate(-50%, -50%)
}
.btn-hover-bgchange:hover {
  color:var(--black);
  border:1px solid var(--primary)
}
.btn-hover-bgchange:hover span {
  width:400px;
  height:400px
}
.wc-btn-link-none {
  color:var(--primary);
  font-size:13px;
  font-weight:700;
  line-height:1.85;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:30px
}
.wc-btn-link-none:hover {
  color:var(--action)
}
.wc-btn-underline {
  font-size:14px;
  font-weight:500;
  letter-spacing:0;
  color:var(--primary);
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding-bottom:4px;
  white-space:nowrap
}
.wc-btn-underline:hover::before {
  width:0
}
.wc-btn-underline::before {
  position:absolute;
  content:"";
  inset-inline-start:0;
  bottom:0px;
  width:100%;
  height:2px;
  background-color:currentColor;
  transition:.3s
}
.wc-btn-underline i,
.wc-btn-underline img {
  font-size:10px
}
.dir-rtl .wc-btn-underline i,
.dir-rtl .wc-btn-underline img {
  transform:rotateY(180deg)
}
.wc-btn-normal {
  display:inline-flex;
  position:relative;
  color:var(--secondary);
  text-decoration:none;
  font-size:18px;
  font-weight:500;
  align-items:center;
  gap:5px
}
.wc-btn-normal:hover {
  color:var(--theme)
}
.wc-btn-normal i {
  font-size:14px
}
.dir-rtl .wc-btn-normal i {
  transform:rotateY(180deg)
}
.btn-text-flip {
  perspective:1000px
}
.btn-text-flip:hover span {
  transform:rotateX(90deg) translateY(-12px);
  color:inherit
}
.btn-text-flip span {
  position:relative;
  display:inline-block;
  padding:0;
  transition:transform .5s;
  transform-origin:50% 0;
  transform-style:preserve-3d
}
.btn-text-flip span:before {
  position:absolute;
  top:100%;
  left:0;
  width:100%;
  height:100%;
  content:attr(data-text);
  transition:color .5s;
  transform:rotateX(-90deg);
  transform-origin:50% 0;
  text-align:center
}
.wc-btn-group {
  display:flex;
  width:-moz-fit-content;
  width:fit-content
}
.wc-btn-group>*:nth-child(1) {
  transform:scale3d(0.5, 0.5, 1);
  margin-inline-end:-40px
}
.wc-btn-group>*:nth-child(2) {
  transform:scale3d(1, 1, 1)
}
.wc-btn-group>*:nth-child(3) {
  transform:scale3d(1, 1, 1);
  margin-inline-start:0
}
.wc-btn-group:hover>*:nth-child(1) {
  transform:scale3d(1, 1, 1);
  margin-inline-end:0
}
.wc-btn-group:hover>*:nth-child(2) {
  transform:scale3d(1, 1, 1)
}
.wc-btn-group:hover>*:nth-child(3) {
  transform:scale3d(0.5, 0.5, 1);
  margin-inline-start:-40px
}
@keyframes mask_animation {
  from {
    -webkit-mask-position:0 0;
    mask-position:0 0
  }
  to {
    -webkit-mask-position:100% 0;
    mask-position:100% 0
  }
}
@keyframes mask_animation_2 {
  from {
    -webkit-mask-position:100% 0;
    mask-position:100% 0
  }
  to {
    -webkit-mask-position:0 0;
    mask-position:0 0
  }
}
.btn-hover-default {
  transition:all .5s
}
.btn-hover-default:hover {
  color:var(--black);
  background-color:var(--white)
}
.btn-hover-cross {
  overflow:hidden;
  position:relative;
  transition:all 1s
}
.btn-hover-cross::after {
  position:absolute;
  content:"";
  width:150%;
  height:0%;
  left:50%;
  top:50%;
  background-color:var(--primary);
  transform:translateX(-50%) translateY(-50%) rotate(0deg);
  transition:all .75s;
  opacity:.5;
  z-index:-1
}
.btn-hover-cross:hover {
  border-color:var(--primary);
  background-color:rgba(0,0,0,0)
}
.btn-hover-cross:hover::after {
  height:120%;
  opacity:1
}
.btn-hover-divide {
  overflow:hidden;
  position:relative;
  transition:all 1s;
  z-index:1
}
.btn-hover-divide::after {
  position:absolute;
  content:"";
  width:150%;
  height:0%;
  left:50%;
  top:50%;
  background-color:var(--primary);
  transform:translateX(-50%) translateY(-50%) rotate(90deg);
  transition:all .75s;
  opacity:.5;
  z-index:-1
}
.btn-hover-divide:hover {
  border-color:var(--primary);
  background-color:rgba(0,0,0,0) !important;
  border-color:rgba(0,0,0,0)
}
.btn-hover-divide:hover::after {
  height:400%;
  opacity:1
}
.btn-hover-cropping {
  overflow:hidden;
  position:relative;
  transition:all 1s
}
.btn-hover-cropping::after {
  position:absolute;
  content:"";
  width:150%;
  height:0%;
  left:50%;
  top:50%;
  background-color:var(--primary);
  transform:translateX(-50%) translateY(-50%) rotate(25deg);
  transition:all .75s;
  opacity:.5;
  z-index:-1
}
.btn-hover-cropping:hover {
  border-color:var(--primary);
  background-color:rgba(0,0,0,0)
}
.btn-hover-cropping:hover::after {
  height:400%;
  opacity:1
}
.btn-hover-mask {
  gap:10px;
  display:inline-flex;
  align-items:center;
  padding:15px 30px;
  position:relative;
  overflow:hidden;
  transition:all .5s;
  border-radius:5px;
  color:var(--white);
  font-weight:400;
  font-size:16px;
  border:1px solid var(--white);
  z-index:1
}
.btn-hover-mask::after {
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--black);
  position:absolute;
  content:attr(data-text);
  cursor:pointer;
  width:100%;
  height:100%;
  left:0;
  top:0;
  background-color:var(--white);
  -webkit-mask:url("https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/nature-sprite.webp");
  mask:url("https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/nature-sprite.webp");
  -webkit-mask-size:2300% 100%;
  mask-size:2300% 100%;
  animation:mask_animation_2 .7s steps(22) forwards
}
.btn-hover-mask:hover {
  color:var(--white)
}
.btn-hover-mask:hover::after {
  animation:mask_animation .7s steps(22) forwards
}
.dark .btn-hover-mask {
  border-color:var(--black)
}
.dark .btn-hover-mask::after {
  z-index:-1;
  color:var(--white);
  background-color:var(--black)
}
.dark .btn-hover-mask:hover {
  color:var(--black)
}
.btn-rollover-top {
  position:relative;
  transition:all .4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s
}
.btn-rollover-top:before {
  position:absolute;
  left:0px;
  bottom:0px;
  height:0px;
  width:100%;
  z-index:-1;
  content:"";
  background-color:var(--primary);
  transition:all .4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s
}
.btn-rollover-top:hover {
  border-color:var(--primary);
  background-color:rgba(0,0,0,0)
}
.btn-rollover-top:hover::before {
  top:0%;
  bottom:auto;
  height:100%
}
.btn-rollover-left {
  position:relative;
  transition:all .4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s
}
.btn-rollover-left::before {
  position:absolute;
  top:0px;
  right:0px;
  height:100%;
  width:0px;
  z-index:-1;
  content:"";
  background-color:var(--primary);
  transition:all .4s cubic-bezier(0.42, 0, 0.58, 1) 0s
}
.btn-rollover-left:hover {
  border-color:var(--primary);
  background-color:rgba(0,0,0,0)
}
.btn-rollover-left:hover::before {
  left:0%;
  right:auto;
  width:100%
}
.btn-rollover-cross {
  overflow:hidden;
  position:relative;
  transition:all .5s
}
.btn-rollover-cross::before {
  position:absolute;
  content:"";
  width:100%;
  height:100%;
  bottom:100%;
  left:100%;
  opacity:0;
  border-bottom:3px solid var(--primary);
  border-left:3px solid var(--primary);
  transition:all .75s
}
.btn-rollover-cross::after {
  position:absolute;
  content:"";
  width:100%;
  height:100%;
  top:100%;
  right:100%;
  opacity:0;
  border-top:3px solid var(--primary);
  border-right:3px solid var(--primary);
  transition:all .75s
}
.btn-rollover-cross:hover {
  border-color:rgba(0,0,0,0);
  color:var(--primary)
}
.btn-rollover-cross:hover::before {
  bottom:0;
  left:0;
  opacity:1;
  width:100%;
  height:100%
}
.btn-rollover-cross:hover::after {
  top:0;
  right:0;
  opacity:1;
  width:100%;
  height:100%
}
.btn-parallal-border {
  overflow:hidden;
  position:relative;
  transition:all .5s
}
.btn-parallal-border::before {
  position:absolute;
  content:"";
  width:0%;
  height:0%;
  bottom:0;
  left:0;
  opacity:0;
  border-bottom:3px solid var(--primary);
  border-left:3px solid var(--primary);
  border-radius:5px;
  transition:all .75s
}
.btn-parallal-border::after {
  position:absolute;
  content:"";
  width:0%;
  height:0%;
  top:0;
  right:0;
  opacity:0;
  border-top:3px solid var(--primary);
  border-right:3px solid var(--primary);
  border-radius:5px;
  transition:all .75s
}
.btn-parallal-border:hover {
  border-color:rgba(0,0,0,0);
  color:var(--primary)
}
.btn-parallal-border:hover::before {
  opacity:1;
  width:100%;
  height:100%
}
.btn-parallal-border:hover::after {
  opacity:1;
  width:100%;
  height:100%
}
.main-menu.menu-dark>ul>li>a {
  color:var(--black)
}
.main-menu.menu-light>ul>li>a {
  color:var(--white)
}
.main-menu>ul {
  display:flex;
  align-items: center;
}
.main-menu>ul>li:hover>a {
  color:var(--primary)
}
.main-menu>ul>li:hover>ul {
  opacity:1;
  pointer-events:all;
  inset-inline-start:0
}
.main-menu>ul>li:hover>ul.dp-menu li:hover>ul {
  opacity:1;
  pointer-events:all;
  inset-inline-start:100%;
  visibility:visible
}
.main-menu li {
  position:relative
}
.main-menu li > a {
  display:flex;
  align-items:center;
  font-weight: 500;
  font-size:16px;
  line-height:1;
  color:var(--primary);
  /*padding:37px 24px;*/
  padding:57px 24px;
}
.sticky .main-menu li > a {
  padding: 35px 24px;
}
.main-menu ul.dp-menu li a::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  background: #1c8a82;
  position: absolute;
  bottom: 0;
  top: 0;
  left: 16px;
  margin: auto 0;
  clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
  /*clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);*/
}
/*.main-menu ul.dp-menu {*/
/*    background-color: #fff;*/
/*    padding:10px 0px;*/
/*    width:250px;*/
/*    position:absolute;*/
/*    inset-inline-start:10px;*/
/*    opacity:0;*/
/*    pointer-events:none;*/
/*    z-index:10;*/
/*    transition:all .5s*/
/*}*/
.main-menu ul.dp-menu {
  background-color: #fff;
  padding: 10px 0px;
  width: 250px;
  position: absolute;
  inset-inline-start: 10px;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  transition: all .5s;
  border-top: 2px solid #1b8b83;
  box-shadow: 0px 7px 17px #e8e5e5ba;
}
/*.main-menu ul.dp-menu ul {*/
/*  background:#232529;*/
/*  padding:18px 0px;*/
/*  width:230px;*/
/*  position:absolute;*/
/*  inset-inline-start:calc(100% + 10px);*/
/*  top:0;*/
/*  opacity:0;*/
/*  z-index:10;*/
/*  transition:all .5s;*/
/*  visibility:hidden*/
/*}*/
.main-menu ul.dp-menu li {
    position:relative;
    /*padding:0 25px*/
    padding-left: 30px;
}

.main-menu ul.dp-menu li:hover>ul {
  opacity:1;
  transform:none !important;
  pointer-events:all
}

.main-menu ul.dp-menu li a {
  padding: 10px 0;
  text-transform: capitalize;
  display: flex;
  align-items: center;
  font-weight: 400;
  font-size: 16px;
  color: var(--primary);
}
.main-menu ul.dp-menu .menuList li a {
  padding: 8px 0;
  font-size: 14.5px;
}
.main-menu ul.dp-menu li a:hover {
  letter-spacing:.1px
}
.main-menu ul.dp-menu li a:after {
  transform:rotate(-90deg);
  margin-left:auto
}
.main-menu ul.dp-menu.col-2 {
    -moz-column-count:2;
    column-count:2;
    width:550px
}
.main-menu .has-mega-menu {
  position:static
}
.main-menu li.menu-item-has-children>a:after {
  content:"";
  font-family:var(--font_awesome);
  margin-inline-start:5px;
  font-weight:600;
  font-size:14px
}
.main-menu .mega-menu {
  background-color:var(--black);
  padding:30px 50px;
  width:100%;
  position:absolute;
  left:10px;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  -moz-column-gap:50px;
  column-gap:50px;
  justify-content:center;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
  z-index:10;
  transition:all .5s
}

.main-menu .mega-menu li:has(ul)>a:after {
  content:""
}
.main-menu .mega-menu li a {
  font-size:16px;
  font-weight:500;
  color:#999;
  height:40px;
  padding:0 20px;
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--black);
  border-radius:8px;
  overflow:hidden
}
.main-menu .mega-menu li a:hover {
  color:var(--white);
  background:#2c2c2f
}
.main-menu .mega-menu .title {
  font-weight:600;
  color:var(--white);
  text-transform:uppercase;
  border-bottom:1px solid #333337;
  padding-bottom:20px;
  margin-bottom:20px;
  pointer-events:none;
  border-radius:0
}
.main-menu .mega-style-2 {
  padding:0 15%;
  gap:0;
  grid-template-columns:repeat(2, 1fr)
}
.main-menu .mega-style-2 .title {
  height:70px;
  padding-bottom:0;
  margin-bottom:0;
  position:relative;
  overflow:visible;
  padding-left:30px
}
.main-menu .mega-style-2 .title:after {
  position:absolute;
  content:"";
  width:5000px;
  height:1px;
  background-color:#333337;
  bottom:-1px;
  left:50%;
  transform:translateX(-50%)
}
.main-menu .mega-style-2>li:not(:first-child) {
  border-left:1px solid #333337
}
.main-menu .mega-style-2 ul {
  -moz-column-count:2;
  column-count:2;
  position:relative;
  padding:20px 0
}
.main-menu .mega-style-2 ul:after {
  position:absolute;
  content:"";
  width:1px;
  height:700px;
  background-color:#333337;
  top:0;
  left:50%;
  z-index:1
}
.main-menu .mega-style-2 ul li a {
  padding-left:30px
}
.main-menu .mega-style-3 {
  padding:0 0 0 20px;
  gap:0;
  grid-template-columns:repeat(3, 1fr)
}
.main-menu .mega-style-3 .title {
  height:70px;
  padding-bottom:0;
  margin-bottom:0;
  position:relative;
  overflow:visible;
  padding-left:30px
}
.main-menu .mega-style-3 .title:after {
  position:absolute;
  content:"";
  width:5000px;
  height:1px;
  background-color:#333337;
  bottom:-1px;
  left:50%;
  transform:translateX(-50%)
}
.main-menu .mega-style-3>li:not(:first-child) {
  border-left:1px solid #333337
}
.main-menu .mega-style-3>li:last-child {
  border:none;
  width:36vw
}

.main-menu .mega-style-3 ul {
  -moz-column-count:2;
  column-count:2;
  position:relative;
  padding:20px 0;
  -moz-column-gap:0;
  column-gap:0
}
.main-menu .mega-style-3 ul:after {
  position:absolute;
  content:"";
  width:1px;
  height:700px;
  background-color:#333337;
  top:0;
  left:50%;
  z-index:1
}
.main-menu .mega-style-3 ul li {
  margin:0 10px
}
.main-menu .mega-style-3 ul li a {
  padding-left:20px
}
.main-menu .mega-grid-6 {
  grid-template-columns:repeat(6, 1fr)
}
.main-menu .mega-grid-2 {
  grid-template-columns:repeat(2, 1fr);
  row-gap:60px
}
.main-menu .list-3-column ul {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  -moz-column-gap:50px;
  column-gap:50px
}


.main-menu .span-first-item ul li:first-child {
  grid-column:1/-1;
  -moz-column-span:all;
  column-span:all
}
.main-menu .new {
  font-size:10px;
  font-weight:600;
  background:#ffa38e;
  color:var(--black);
  padding:3px 7px;
  line-height:1;
  border-radius:2px;
  margin-inline-start:8px;
  display:inline-block
}
@media only screen and (max-width: 1199px) {
  .main-menu-2 {
    display:none
  }
}
.main-menu-2 li {
  display:inline-block;
  padding:0 10px
}
.main-menu-2 li a {
  display:block;
  font-weight:500;
  font-size:20px;
  line-height:1.5;
  color:var(--white);
  padding:10px;
  text-transform:capitalize
}
.main-menu-2 li a:hover {
  color:var(--primary)
}


.main-menu-3 li {
  display:inline-block;
  margin-right:45px
}
@media only screen and (max-width: 1199px) {
  .main-menu-3 li {
    margin-right:25px
  }
}
.main-menu-3 li:last-child {
  margin-right:0
}
.main-menu-3 li a {
  color:var(--white);
  font-weight:500;
  font-size:18px;
  line-height:26px
}
.main-menu-3 li a:hover {
  color:var(--primary)
}
.main-menu-4 li {
  display:inline-block;
  margin-right:50px
}
.main-menu-4 li a {
  font-size:14px;
  font-weight:500;
  line-height:1.5;
  color:var(--white);
  text-transform:uppercase
}
.main-menu-4 li a:hover {
  color:var(--primary)
}
.mega-menu-thumb {
  width:108%;
  aspect-ratio:100/83;
  position:absolute;
  right:0;
  bottom:0;
  z-index:-1
}
@media only screen and (max-width: 1199px) {
  .mega-menu-thumb {
    width:100%;
    height:100%
  }
}
.mega-menu-thumb:after {
  position:absolute;
  content:"";
  width:76%;
  height:100%;
  top:0;
  left:0;
  background:linear-gradient(270deg, rgba(28, 29, 32, 0) 0%, #1C1D20 100%)
}
.mega-menu-thumb .laptop-view {
  width:70%;
  aspect-ratio:100/114;
  -o-object-fit:cover;
  object-fit:cover;
  -o-object-position:center top;
  object-position:center top;
  position:absolute;
  right:70px;
  bottom:0
}
.mega-menu-counter__item {
  text-align:center;
  display:inline-block;
  margin-top:35%;
  margin-left:17%;
  position:relative
}
@media only screen and (max-width: 1199px) {
  .mega-menu-counter__item {
    margin:30px auto 50px
  }
}
.mega-menu-counter__text p {
  font-size:30px;
  line-height:28px;
  color:var(--white);
  font-weight:500
}
.mega-menu-counter__number {
  font-size:150px;
  font-weight:600;
  line-height:1;
  margin-bottom:24px;
  color:var(--white);
  background:linear-gradient(136deg, #9479FF 0%, #FFA6D6 47.92%, #FFFCE3 100%);
  background-clip:text;
  -webkit-background-clip:text;
  -webkit-text-fill-color:rgba(0,0,0,0)
}
@media only screen and (max-width: 1199px) {
  .menu-with-number {
    display:none
  }
}
.menu-with-number li {
  display:inline-block
}
.menu-with-number li a {
  font-weight:500;
  font-size:14px;
  line-height:1.5;
  color:var(--white);
  padding:34px 40px;
  display:inline-block;
  text-transform:uppercase
}
.menu-with-number li a:hover span {
  color:var(--white)
}
.menu-with-number li a:hover span::before {
  background-color:var(--white)
}
.menu-with-number li a.active span {
  color:var(--white)
}
.menu-with-number li a.active span::before {
  position:absolute;
  content:"";
  width:35px;
  height:1px;
  right:20px;
  top:50%;
  background-color:var(--white)
}
.menu-with-number li a span {
  display:block;
  font-weight:500;
  font-size:12px;
  line-height:10px;
  text-align:right;
  color:#999;
  position:relative;
  transition:all .5s
}
.menu-with-number li a span::before {
  position:absolute;
  content:"";
  width:35px;
  height:1px;
  right:20px;
  top:50%;
  transition:all .5s;
  background-color:var(--black-6)
}
.sidebar-menu li {
  display:block;
  padding-bottom:15px
}

.sidebar-menu li a {
  display:block;
  font-weight:600;
  font-size:14px;
  line-height:1.5;
  color:var(--white);
  padding:10px 0;
  text-transform:uppercase
}
.sidebar-menu li a:hover,
.sidebar-menu li a.active {
  color:var(--primary)
}

.offcanvas__menu-wrapper.mean-container .mean-nav>ul {
  padding:0;
  margin:0;
  width:100%;
  list-style-type:none;
  display:block !important
}
.offcanvas__menu-wrapper.mean-container .mean-nav>ul>li:last-child>a {
  border-bottom:1px solid var(--black-4)
}
.offcanvas__menu-wrapper.mean-container .mean-nav {
  background:none;
  margin-top:0
}
.offcanvas__menu-wrapper.mean-container .mean-nav .new {
  font-size:10px;
  font-weight:600;
  background:#ffa38e;
  color:var(--black);
  padding:3px 7px;
  line-height:1;
  display:flex;
  align-items:center;
  border-radius:2px
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
  width:100%;
  padding:15px 0;
  padding-inline-start:15px;
  font-weight:400;
  font-size:22px;
  line-height:1;
  color:var(--white);
  text-transform:capitalize;
  border-top:1px solid var(--black-4);
  display:flex;
  gap:8px;
  justify-content:flex-start;
  align-items:center;
  outline:none;
  transform:translateY(var(--y)) translateZ(0);
  transition:transform .4s ease,box-shadow .4s ease;
  box-sizing:border-box
}
.dark .offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
  color:var(--black);
  border-color:var(--white-4)
}
@media only screen and (max-width: 767px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
    font-size:20px
  }
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand {
  width:54px;
  height:54px;
  justify-content:center;
  font-weight:300;
  border:none !important
}
.dark .offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand {
  background-color:var(--white-4)
}
.dir-rtl .offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand {
  right:275px
}
@media only screen and (max-width: 767px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand {
    height:50px
  }
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand:hover {
  background:var(--secondary);
  opacity:1
}
.dark .offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand:hover {
  background-color:var(--white-4)
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li li:first-child {
  border-top:1px solid var(--black-4)
}
.dark .offcanvas__menu-wrapper.mean-container .mean-nav ul li li:first-child {
  border-color:var(--white-4)
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li li a {
  font-size:20px;
  text-transform:capitalize;
  border-top:none !important;
  padding:12px 0;
  padding-inline-start:30px
}
@media only screen and (max-width: 767px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a {
    font-size:18px
  }
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li li a.mean-expand {
  height:58px
}
@media only screen and (max-width: 991px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a.mean-expand {
    height:25px
  }
}
@media only screen and (max-width: 767px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a.mean-expand {
    height:22px
  }
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li li li:last-child {
  border-bottom:1px solid var(--black-4)
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li li li a {
  padding-left:40px
}
.offcanvas__menu-wrapper.mean-container .mean-bar {
  padding:0;
  background:none;
  max-height:auto;
  overflow-y:scroll
}
.offcanvas__menu-wrapper.mean-container .mean-bar::-webkit-scrollbar {
  width:0
}
.offcanvas__menu-wrapper.mean-container a.meanmenu-reveal {
  display:none !important
}
.light .main-menu li a:hover {
  color:var(--primary)
}
.light .main-menu-2 li a {
  color:var(--black)
}
.light .main-menu-2 li a:hover {
  color:var(--primary)
}
.light .main-menu-3 li a {
  color:var(--black)
}
.light .main-menu-3 li a:hover {
  color:var(--primary)
}
.light .sidebar-menu li a {
  color:var(--black)
}
.light .sidebar-menu li a:hover {
  color:var(--primary)
}
.light .menu-with-number li a {
  color:var(--black)
}
.light .menu-with-number li a:hover span {
  color:var(--black)
}
.light .menu-with-number li a:hover span::before {
  background-color:var(--black)
}
.light .menu-with-number li a span {
  color:var(--black-9)
}
.light .menu-with-number li a span::before {
  background-color:var(--black-9)
}
.light .menu-with-number li a.active span {
  color:var(--black)
}
.light .menu-with-number li a.active span::before {
  background-color:var(--black)
}
.modal__dialog {
  width:760px;
  max-width:100%;
  margin-top:100px
}
@media only screen and (max-width: 991px) {
  .modal__dialog {
    width:700px;
    margin-top:80px
  }
}
@media only screen and (max-width: 767px) {
  .modal__dialog {
    width:350px
  }
}
.modal__content {
  height:500px
}
@media only screen and (max-width: 767px) {
  .modal__content {
    height:300px
  }
}
.modal__content iframe {
  width:100%;
  height:100%
}
.modal__close {
  position:absolute;
  width:40px;
  height:40px;
  top:-15px;
  right:-15px;
  z-index:9;
  border-radius:50px;
  font-size:20px;
  color:var(--white);
  background:var(--black);
  transition:all .3s
}
.modal__close:hover {
  color:var(--primary)
}
.modal__sfluence {
  width:100%;
  height:100%;
  padding:60px
}
@media only screen and (max-width: 767px) {
  .modal__sfluence {
    padding:20px 10px
  }
}
.modal__sfluence-area {
  width:100vw;
  height:100vh;
  background:var(--black);
  position:fixed;
  top:0;
  left:0;
  z-index:9;
  opacity:0;
  visibility:hidden;
  transition:all .5s;
  transform:scale(0.5)
}
.modal__sfluence-area.showed {
  opacity:1;
  visibility:visible;
  transform:scale(1)
}
.modal__sfluence-area .close_btn {
  position:absolute;
  width:60px;
  height:60px;
  top:0px;
  right:20px;
  z-index:9;
  border-radius:50px;
  font-size:30px;
  color:var(--white);
  transition:all .3s;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center
}
.modal__sfluence-area .close_btn:hover {
  color:var(--primary)
}
@media only screen and (max-width: 767px) {
  .modal__sfluence-area .close_btn {
    right:0
  }
}
.modal__sfluence-area iframe,
.modal__sfluence-area video {
  width:100%;
  height:100%
}
@media only screen and (max-width: 767px) {
  .modal__sfluence-area iframe,
  .modal__sfluence-area video {
    height:300px;
    -o-object-fit:cover;
    object-fit:cover;
    margin-top:45%
  }
}
.cursor {
  position:fixed;
  pointer-events:none;
  font-weight:500;
  font-size:16px;
  line-height:23px;
  color:var(--var(--white));
  background:var(--black);
  text-transform:capitalize;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100px;
  height:100px;
  border-radius:100%;
  transform:translate(-50%, -50%);
  z-index:999;
  opacity:0;
  mix-blend-mode:hard-light;
  transition:all .3s
}
.cursor.large {
  width:180px;
  height:180px;
  text-align:center;
  font-size:19px;
  font-weight:400
}
.cursor1 {
  position:fixed;
  width:40px;
  height:40px;
  border:1px solid var(--primary);
  border-radius:50%;
  left:0;
  top:0;
  pointer-events:none;
  transform:translate(-50%, -50%);
  transition:.15s;
  z-index:999
}
@media(max-width: 1200px) {
  .cursor1 {
    display:none
  }
}
.cursor2 {
  position:fixed;
  width:8px;
  height:8px;
  background-color:var(--primary);
  border-radius:50%;
  left:0;
  top:0;
  pointer-events:none;
  transform:translate(-50%, -50%);
  transition:.2s;
  z-index:999
}
@media(max-width: 1200px) {
  .cursor2 {
    display:none
  }
}
.cursor-testi {
  position:fixed;
  width:80px;
  height:80px;
  background-color:var(--black);
  border-radius:50%;
  left:0;
  top:0;
  pointer-events:none;
  transform:translate(-50%, -50%);
  transition:.2s;
  z-index:999
}
@media(max-width: 1200px) {
  .cursor-testi {
    display:none
  }
}
@supports(mix-blend-mode: exclusion) {
  .wc-cursor.exclusion,
  .wc-cursor.opaque {
    mix-blend-mode:exclusion
  }
}
@supports(mix-blend-mode: exclusion) {
  .wc-cursor.exclusion:before,
  .wc-cursor.opaque:before {
    background:var(--white)
  }
}
.wc-cursor.normal,
.wc-cursor.text {
  mix-blend-mode:normal
}
.wc-cursor.normal:before,
.wc-cursor.text:before {
  background:currentColor
}
.wc-cursor.inverse {
  color:var(--white)
}
.wc-cursor.visible:before {
  transform:scale(0.2)
}
.wc-cursor.visible.active:before {
  transform:scale(0.23);
  transition-duration:.2s
}
.wc-cursor.pointer:before {
  transform:scale(0.15)
}
.wc-cursor.text:before {
  opacity:.85;
  transform:scale(1.7)
}
.wc-cursor.text.active:before {
  transform:scale(1.6);
  transition-duration:.2s
}
.wc-cursor.opaque:before {
  transform:scale(1.32)
}
.wc-cursor.opaque.active:before {
  transform:scale(1.2)
}
.wc-cursor.sm:before {
  transform:scale(1.25)
}
.wc-cursor.md:before {
  transform:scale(1.5)
}
.wc-cursor.lg:before {
  transform:scale(2)
}
.wc-cursor.xl:before {
  transform:scale(2.5)
}
.wc-cursor.xxl:before {
  transform:scale(3)
}
.wc-cursor.hidden:before {
  transform:scale(0)
}
.color-accent-lilac {
  color:#8d53e9
}
.color-accent-lilac-bg {
  background:#8d53e9
}
.wc-cursor {
  position:fixed;
  top:0;
  left:0;
  z-index:150;
  contain:layout style size;
  pointer-events:none;
  will-change:transform;
  color:var(--primary);
  transition:opacity .3s,color .4s
}
.wc-cursor:before {
  content:"";
  position:absolute;
  top:-24px;
  left:-24px;
  display:block;
  width:48px;
  height:48px;
  transform:scale(0);
  background:currentColor;
  border-radius:50%;
  transition:transform .3s ease-in-out,opacity .1s
}
.wc-cursor-text {
  position:absolute;
  top:-30px;
  left:-30px;
  width:60px;
  height:60px;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:scale(0) rotate(10deg);
  opacity:0;
  color:var(--white);
  font-size:16px;
  line-height:20px;
  text-align:center;
  letter-spacing:-0.01em;
  transition:opacity .4s,transform .3s
}
.wc-cursor.text .wc-cursor-text {
  opacity:1;
  transform:scale(1)
}
@supports(mix-blend-mode: exclusion) {
  .wc-cursor.-exclusion,
  .wc-cursor.-opaque {
    mix-blend-mode:exclusion
  }
}
@supports(mix-blend-mode: exclusion) {
  .wc-cursor.exclusion:before,
  .wc-cursor.opaque:before {
    background:var(--white)
  }
}
.wc-cursor.normal,
.wc-cursor.text {
  mix-blend-mode:normal
}
.wc-cursor.normal:before,
.wc-cursor.text:before {
  background:currentColor
}
.wc-cursor.inverse {
  color:var(--white)
}
.wc-cursor.visible:before {
  transform:scale(0.2)
}
.wc-cursor.visible.active:before {
  transform:scale(0.23);
  transition-duration:.2s
}
.wc-cursor.pointer:before {
  transform:scale(0.15)
}
.wc-cursor.text:before {
  opacity:.85;
  transform:scale(1.7)
}
.wc-cursor.text.active:before {
  transform:scale(1.6);
  transition-duration:.2s
}
.wc-cursor.opaque:before {
  transform:scale(1.32)
}
.wc-cursor.opaque.active:before {
  transform:scale(1.2)
}
.wc-cursor.sm:before {
  transform:scale(1.25)
}
.wc-cursor.md:before {
  transform:scale(1.5)
}
.wc-cursor.lg:before {
  transform:scale(2)
}
.wc-cursor.xl:before {
  transform:scale(2.5)
}
.wc-cursor.xxl:before {
  transform:scale(3)
}
.wc-cursor.xxxl:before {
  transform:scale(3.5)
}
.wc-cursor.hidden:before {
  transform:scale(0)
}
.progress__item p.title,
.progress__item-2 p.title {
  padding:0;
  font-weight:500;
  font-size:15px;
  line-height:25px;
  color:var(--white);
  padding-bottom:15px;
  text-transform:uppercase
}
.progress__item-2 {
  padding-bottom:25px
}
.light .progress__item p.title,
.light .progress__item-2 p.title {
  color:var(--black)
}
.light .developer-skill__resume .sonny_progressbar .progress-percent {
  color:var(--black)
}
.cf-cta__text-wrapper {
  display:grid;
  grid-template-columns:auto auto;
  align-items:center;
  justify-content:space-between;
  grid-gap:45px
}
@media only screen and (max-width: 991px) {
  .cf-cta__text-wrapper {
    grid-template-columns:1fr
  }
}
.cf-cta__btn .wc-btn-default {
  font-size:18px;
  font-weight:600;
  padding:35px 75px;
  background-color:var(--white);
  color:var(--black);
  text-transform:uppercase;
  border-width:0
}
.dark .cf-cta__btn .wc-btn-default {
  background-color:var(--black);
  color:var(--white)
}
@media only screen and (max-width: 1199px) {
  .cf-cta__btn .wc-btn-default {
    padding:20px 40px;
    font-weight:500
  }
}
.dark .cf-cta__btn .wc-btn-default:hover {
  color:var(--black)
}
.cf-cta__text {
  max-width:250px;
  position:absolute;
  inset-inline-end:-30px;
  top:47%;
  transform:translateY(-50%)
}
@media only screen and (max-width: 1199px) {
  .cf-cta__text {
    inset-inline-end:-130px;
    max-width:270px
  }
}
@media only screen and (max-width: 991px) {
  .cf-cta__text {
    inset-inline-end:0;
    max-width:270px
  }
}
@media only screen and (max-width: 767px) {
  .cf-cta__text {
    position:static;
    transform:none
  }
}
.cf-cta__text p {
  font-size:18px
}
.dark .cf-cta__text p {
  color:#555
}
.cf-cta__sec-title-wrapper {
  position:relative
}
@media only screen and (max-width: 767px) {
  .cf-cta__sec-title-wrapper .sec-title-18 {
    margin-bottom:20px;
    font-size:40px
  }
}
.offcanvas-3__area {
  background:var(--primary);
  position:fixed;
  width:100%;
  height:100%;
  padding:50px 50px 100px;
  z-index:100000;
  overflow:hidden
}
@media(max-height: 500px) {
  .offcanvas-3__area {
    padding:40px
  }
}
.offcanvas-3__inner {
  display:grid;
  grid-template-columns:340px 1fr;
  height:100%
}
@media only screen and (max-width: 991px) {
  .offcanvas-3__inner {
    grid-template-columns:260px 1fr
  }
}
@media only screen and (max-width: 767px) {
  .offcanvas-3__inner {
    overflow-y:scroll;
    display:flex;
    flex-direction:column
  }
}
@media(max-height: 500px) {
  .offcanvas-3__inner {
    overflow-y:scroll
  }
}
.offcanvas-3__inner::-webkit-scrollbar {
  width:0
}
.offcanvas-3__meta li {
  font-size: 15px;
  line-height: 1.4;
  color: var(--white);
}
.offcanvas-3__meta li:not(:last-child) {
  margin-bottom:19px
}
.offcanvas-3__meta li a:hover {
  color:var(--secondary)
}
.offcanvas-3__meta-wrapper {
  display:flex;
  flex-direction:column;
  gap:50px;
/*   justify-content:space-between */
}
.offcanvas-3__meta {
  margin-bottom: 70px;
}
.offcanvas-3__social .title {
  font-size: 16px;
  font-weight: 600;
  line-height:20px;
  color:var(--white);
  margin-bottom:10px
}
.offcanvas-3__social .social-links {
  display: flex;
}
.offcanvas-3__social-links {
  display:flex;
  gap:20px
}
.offcanvas-3__social-links a {
  font-size:18px;
  color:var(--white)
}
.offcanvas-3__social-links a:hover {
  color:var(--secondary)
}
.offcanvas-3__menu {
  position:relative;
  width:100%;
  height:100%;
  overflow-y:scroll;
  overflow-x:hidden
}
.offcanvas-3__menu ul {
  position:relative
}
.offcanvas-3__menu ul:before {
  position:absolute;
  content:"";
  width:1px;
  height:100%;
  background:#333337;
  inset-inline-start:8px;
  top:0
}
/*@media only screen and (max-width: 767px) {*/
/*  .offcanvas-3__menu ul:before {*/
/*    display:none*/
/*  }*/
/*}*/
@media(max-height: 500px) {
  .offcanvas-3__menu ul:before {
    height:100%
  }
}
.offcanvas-3__menu li {
  padding-inline-start:58px;
  position:relative
}
@media only screen and (max-width: 767px) {
    .offcanvas-3__menu li a {
      font-size: 18px !important;
    }
    .offcanvas-3__area {
      padding: 30px;
    }
    .nav-menu.offcanvas-3__menu > ul::before {
      display: none;
    }
    .offcanvas-3__menu li {
        padding-inline-start: 25px;
    }
    .nav-menu.offcanvas-3__menu > ul > li {
        padding-left: 0;
    }
}
.offcanvas-3__menu li:hover>a {
  color:var(--white)
}
.offcanvas-3__menu li:hover:before {
  opacity:1;
  visibility:visible
}
.offcanvas-3__menu li:before {
  position:absolute;
  content:"";
  width:17px;
  height:17px;
  background:var(--white);
  border-radius:50%;
  border:4px solid var(--black-2);
  inset-inline-start:0;
  top:38%;
  transform:translateY(-50%);
  opacity:0;
  visibility:hidden;
  transition:.5s
}
@media only screen and (max-width: 767px) {
  .offcanvas-3__menu li:before {
    display:none
  }
}
.offcanvas-3__menu li:not(:last-child) {
  margin-bottom:26px
}
@media only screen and (max-width: 991px) {
  .offcanvas-3__menu li:not(:last-child) {
    margin-bottom:20px
  }
}
.offcanvas-3__menu li a {
    font-size:21px;
    color:var(--secondary);
    line-height:.9;
    position:relative;
    transition:all .5s cubic-bezier(0, 0, 0.23, 1);
    text-decoration:none;
    -webkit-background-clip:text;
    -webkit-text-fill-color:rgba(0,0,0,0);
    background-image:linear-gradient(90deg, #fff, #ddd 50%, #666 0);
    background-size:200% 100%;
    background-position:100%;
    transform:perspective(359px) rotateY(-18deg)
}
.offcanvas-3__menu li a:hover {
    background-position:0;
    color:#fff;
    letter-spacing:1.5px
}
.offcanvas-3__menu li ul {
  margin-top: 22px;
}
.offcanvas-3__menu li ul ul {
  margin-bottom: 22px;
}
.offcanvas-3__menu li ul li {
  margin-bottom: 14px !important;
}
.offcanvas-3__menu-wrapper {
  display:flex;
  align-items:flex-end;
  overflow-y:hidden
}
.offcanvas-3__area {
  left:0%;
  opacity:0;
  visibility:hidden;
  transform:perspective(359px) rotateY(50deg)
}
.offcanvas-3__menu ul li {
  opacity:0;
  top:-100px;
  position:relative;
  transform:perspective(359px) rotateX(50deg)
}
.offcanvas-3__meta {
  opacity:0;
  top:-30px;
  position:relative
}
.offcanvas-3__social {
  opacity:0;
  top:-30px;
  position:relative
}
.close-button {
  width:70px;
  height:70px;
  border-radius:100%;
  background-color:var(--black-2);
  position:relative;
  border:1px solid #333337;
  transition:all .5s
}
@media only screen and (max-width: 767px) {
  .close-button {
    width:50px;
    height:50px
  }
}
.close-button:hover {
  background-color:var(--secondary)
}
.close-button:hover span {
  background-color:var(--primary)
}
.close-button span {
  width:26px;
  height:1px;
  display:inline-block;
  background-color:var(--white);
  position:absolute;
  left:50%;
  top:50%;
  transition:all .5s
}
@media only screen and (max-width: 767px) {
  .close-button span {
    width:20px
  }
}
.close-button span:first-child {
  transform:translateX(-50%) rotate(45deg)
}
.close-button span:last-child {
  transform:translateX(-50%) rotate(-45deg)
}
/* .cf_feature.style-1 .thumb {
  margin-bottom:50px
}
@media only screen and (max-width: 1199px) {
  .cf_feature.style-1 .thumb {
    margin-bottom:30px
  }
}
.cf_feature.style-1 .title {
  font-size:22px;
  font-weight:700;
  line-height:1.15;
  margin-bottom:20px
}
.cf_feature.style-1 .title:hover {
  color:var(--action)
}
.cf_feature.style-1 .text {
  color:var(--primary)
}
.cf_feature.style-1 .btn-wrapper {
  display:none
}
.cf_feature.text-design {
  padding:60px;
  padding-left:70px;
  padding-right:0;
  border-left:1px solid rgba(18,18,18,.06)
}
@media only screen and (max-width: 1199px) {
  .cf_feature.text-design {
    padding-left:30px
  }
}
@media only screen and (max-width: 991px) {
  .cf_feature.text-design {
    border:0;
    padding-left:0
  }
}
@media only screen and (max-width: 767px) {
  .cf_feature.text-design {
    padding-top:30px;
    padding-bottom:30px
  }
}
.cf_feature.text-design .thumb {
  margin-bottom:30px
}
.cf_feature.text-design .title-2 {
  font-size:30px;
  font-weight:600;
  line-height:1.16;
  text-decoration-line:underline;
  margin-bottom:40px
}
@media only screen and (max-width: 1199px) {
  .cf_feature.text-design .title-2 {
    font-size:22px;
    margin-bottom:20px
  }
}
.cf_feature.style-2 {
  padding:60px;
  border-right:1px solid rgba(18,18,18,.06)
}
@media only screen and (max-width: 1199px) {
  .cf_feature.style-2 {
    padding:30px
  }
}
@media only screen and (max-width: 767px) {
  .cf_feature.style-2 {
    padding-left:0
  }
}
.cf_feature.style-2:first-child {
  padding-left:0
}
.cf_feature.style-2:last-child {
  border-right:0;
  padding-right:0
} */
/* .font-heading-Beatricetrial h1,
.font-heading-Beatricetrial h2,
.font-heading-Beatricetrial h3,
.font-heading-Beatricetrial h4,
.font-heading-Beatricetrial h5,
.font-heading-Beatricetrial h6 {
  font-family:var(--font_beatricetrial)
} */
/* .cf_feature.style-3 {
  border-right:1px solid #f1f1f1;
  border-top:1px solid #f1f1f1;
  padding:50px;
  padding-bottom:0
}
@media only screen and (max-width: 1199px) {
  .cf_feature.style-3 {
    padding:30px
  }
}
@media only screen and (max-width: 991px) {
  .cf_feature.style-3 {
    flex-basis:45%;
    border:0;
    padding-left:0
  }
}
@media only screen and (max-width: 767px) {
  .cf_feature.style-3 {
    padding-left:0;
    margin-bottom:0;
    flex-basis:100%;
    padding-bottom:20px
  }
}
.cf_feature.style-3:first-child {
  padding-left:0
}
.cf_feature.style-3:last-child {
  border-right:0
}
.cf_feature.style-3:hover .title {
  padding-left:15px
}
.cf_feature.style-3:hover .title::before {
  left:0
}
.cf_feature.style-3 .content {
  overflow:hidden
}
.cf_feature.style-3 .count-title {
  color:var(--primary);
  font-size:14px;
  font-style:normal;
  font-weight:400;
  line-height:1;
  margin-bottom:25px
}
.cf_feature.style-3 .title {
  color:var(--primary);
  font-size:24px;
  font-weight:400;
  line-height:1.25;
  margin-bottom:25px;
  transition:.3s;
  position:relative
}
.cf_feature.style-3 .title::before {
  content:"";
  position:absolute;
  left:-10px;
  top:0;
  height:100%;
  width:1px;
  background-color:var(--primary)
}
.cf_feature.style-3 .title:hover {
  color:var(--action)
}
.cf_feature.style-3 .text {
  margin-bottom:100px
} */
/* @media only screen and (max-width: 991px) {
  .cf_feature.style-3 .text {
    margin-bottom:50px
  }
} */
/* @media only screen and (max-width: 767px) {
  .cf_feature.style-3 .text {
    margin-bottom:20px
  }
} */
/* .cf_feature.style-3 .btn-underline {
  font-size:16px;
  font-weight:600;
  letter-spacing:0;
  color:var(--primary);
  text-transform:capitalize
} */
:root {
  --theme: #BD2020
}
.section-subtitle {
  font-size:16px;
  font-weight:600;
  color:var(--theme);
  position:relative
}
.dark .section-subtitle {
  color:var(--white)
}
.section-subtitle.has-left-line {
  padding-inline-start:60px
}
.section-subtitle.has-left-line:before {
  width:50px;
  height:2px
}
.section-title {
  font-size:90px
}

@media only screen and (max-width: 1199px) {
  .section-title {
    font-size:50px
  }
}
@media only screen and (max-width: 991px) {
  .section-title {
    font-size:40px
  }
}
@media only screen and (max-width: 767px) {
  .section-title {
    font-size:35px
  }
}

.header-area {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    width: 100%;
}

.header-area .header-area__inner {
  display:flex;
  align-items:center;
  position:relative;
  height: 129px;
  border-bottom:1px solid var(--border)
}
.header__nav {
  margin-right: 35px;
}
.header__right {
  margin-left: auto;
}

.header-area .header-area__inner>*:nth-child(2) {
	height:100%;
	display:flex;
	align-items:center;
	gap:30px;
}

@media only screen and (max-width: 1199px) {
  .header-area .header-area__inner>*:nth-child(2) {
    border-inline-start:0
  }
}
@media(max-width: 575px) {
  .header-area .header__meta {
    display:none
  }
}
.header-area .wc-btn-primary {
	padding: 18.5px 27.7px;
	font-weight: 500;
	color:var(--white);
	background-color: #BD2020;
	box-shadow: 0 12px 18px 0 #BD202021;
}
@media only screen and (max-width: 991px) {
  .header-area .wc-btn-primary {
    padding:11px 20px
  }
}
.dark .header-area .wc-btn-primary:hover {
  color:var(--black)
}
.dir-rtl .header-area .header__navicon img {
  transform:rotateY(180deg)
}
.hero-area {
  padding-top:129px;
  overflow:hidden
}

.hero-area-inner {
  position:relative;
  z-index:1
}
.hero-area-inner .shape-1 {
	position:absolute;
	inset-inline-end: calc(0% - -6%);
	top:80px;
	z-index:-1;
	width:704px;
	animation: moveUpDown 3s infinite ease-in-out;
}

@keyframes moveUpDown {
  0% {
    top: 80px;
  }
  50% {
    top: 100px; /* Moves the element 30px up */
  }
  100% {
    top: 80px;
  }
}



.dir-rtl .hero-area-inner .shape-1 img {
  transform:rotateY(180deg)
}
.hero-area .year-box {
	background-color: #1B8B83;
	border-radius:35px;
	padding:30px 38px 40px;
	display:inline-block;
	position:relative
}
.dark .hero-area .year-box {
  background-color:#1b1b1b
}
.hero-area .year-box .meta {
  font-size:14px;
  font-weight:500;
  display:inline-block;
  padding:9px 24px;
  border-radius:10px;
  background-color:#fff;
  color:var(--primary)
}
.dark .hero-area .year-box .meta {
  background-color:#353535
}
.hero-area .year-box .btn-wrapper {
  position:absolute;
  inset-inline-end:20px;
  top:20px
}
.dark .hero-area .year-box .btn-wrapper .wc-btn-icon {
  background-color:#343434
}
.hero-area .year-box .thumb {
  margin-top:30px;
  text-align:center
}
.hero-area .year-box .title {
	margin-top:30px;
	font-size:30px;
	line-height:1.1;
	color: #fff;
	text-align: center;
}

.hero-area .meta-info {
  margin-top:105px
}


.hero-area .meta-info .text {
  margin-top:26px;
  font-size:20px;
  line-height:1.37
}


.hero-area .content-first {
  padding-top:100px;
/*   padding-bottom:96px */
}


.hero-area .hero-social {
  writing-mode:vertical-lr;
  display:flex;
  gap:20px;
  align-items:center
}
.dir-rtl .hero-area .hero-social {
  justify-content:flex-end;
}

.hero-area .hero-social .title {
  position:relative;
  padding-inline-end:80px;
  display:inline-block;
  font-size:16px;
  font-weight: 600;
  color:var(--primary);
}
.hero-area .hero-social .title:before {
  position:absolute;
  content:"";
  width:1px;
  height:60px;
  background-color:var(--border);
  bottom:0;
  left:50%;
  transform:translateX(-50%)
}
.dir-rtl .hero-area .hero-social .title:before {
  top:0;
  bottom:auto
}
@media only screen and (max-width: 991px) {
  .hero-area .hero-social .title:before {
    width:60px;
    height:1px;
    inset-inline-end:0;
    top:50%;
    transform:translateY(-50%)
  }
}
.hero-area .hero-social .hero-social-links {
  display:flex;
}
.hero-area .hero-social .hero-social-links a {
  color:var(--primary)
}
.hero-area .hero-social .hero-social-links a:hover {
  color:var(--secondary)
}
.hero-area .section-content {
	display:grid;
	gap:0px 130px;
	/*   grid-template-columns:305px 1fr auto */
	grid-template-columns: 21% 1fr auto;
}

@media only screen and (max-width: 991px) {
  .hero-area .section-content {
    grid-template-columns:235px 1fr
  }
}
@media only screen and (max-width: 767px) {
  .hero-area .section-content {
    grid-template-columns:1fr
  }
}
.hero-area .scroll-icon {
  display:inline-block;
  padding:29px 20px;
  border:1px solid var(--border);
  border-radius:25px
}
.hero-area .scroll-down {
  margin-top:60px
}
@media only screen and (max-width: 767px) {
  .hero-area .scroll-down {
    display:none
  }
}
.hero-area .section-header {
	/*   max-width:742px */
	max-width:950px;
}
.hero-area .section-header .section-title {
  font-size:100px;
  font-weight:700;
  line-height:1.3;
}


.hero-area .section-header .section-title .icon-first {
  margin-top:-25px
}


@media only screen and (max-width: 767px) {
  .hero-area .section-header .section-title .icon-first {
    display:none
  }
}


.hero-area .section-header .btn-wrapper {
  margin-top:41px;
  display:flex;
  align-items:center;
  gap: 40px
}
.hero-area .content-third {
  align-self:center
}

.hero-area .video-btn {
	position: relative;
	gap:20px
}
.hero-area .video-btn i::after {
  content: "";
  background: #000;
  width: 10px;
  height: 1px;
  display: block;
  top: 1px;
  position: absolute;
  bottom: 0;
  margin: auto;
  right: 10px;
}
.hero-area .video-btn i {
  color:var(--theme)
}
.hero-area .video-btn br {
  display:block
}
.hero-area .content-second {
/*   padding-bottom:100px; */
  padding-top: 70px
}

@media only screen and (max-width: 767px) {
  .hero-area .content-second {
    padding-inline-start:0;
    border-left:0;
    padding-top:40px;
    padding-bottom:40px
  }
}
.works-area {
  padding-top:145px
}

@media only screen and (max-width: 1199px) {
  .works-area {
    padding-top:54px
  }
}
.works-area .section-header {
  text-align:center
}
.works-area .section-header .title-wrapper {
  margin-top:17px
}
.works-area .section-title {
  max-width:627px;
  margin:0 auto
}
.works-area .works-wrapper-box {
  margin-top:56px
}

@media only screen and (max-width: 1199px) {
  .works-area .works-wrapper-box {
    margin-top:36px
  }
}
.works-area .work-box {
  display:inline-block
}
.works-area .work-box:hover .thumb img {
  transform:scale(1.1)
}
.works-area .work-box .title {
  font-size:30px
}

@media only screen and (max-width: 1199px) {
  .works-area .work-box .title {
    font-size:24px
  }
}
.works-area .work-box .meta {
  margin-top:8px
}
@media only screen and (max-width: 1199px) {
  .works-area .work-box .meta {
    margin-top:3px
  }
}

.works-area .work-box .content {
  margin-top:30px
}
@media only screen and (max-width: 1199px) {
  .works-area .work-box .content {
    margin-top:20px
  }
}
.works-area .work-box .thumb {
  border-radius:30px;
  overflow:hidden
}

@media only screen and (max-width: 1199px) {
  .works-area .work-box .thumb {
    border-radius:10px
  }
}
.works-area .work-box .thumb img {
  width:100%;
  transition:all .5s
}
.works-area .works-wrapper {
  display:grid;
  gap:63px 50px;
  grid-template-columns:repeat(2, 1fr)
}

@media only screen and (max-width: 991px) {
  .works-area .works-wrapper {
    grid-template-columns:repeat(2, 1fr)
  }
}
@media only screen and (max-width: 767px) {
  .works-area .works-wrapper {
    grid-template-columns:repeat(1, 1fr)
  }
}
.works-area .btn-wrapper {
  margin-top:63px;
  display:flex;
  justify-content:center
}

@media only screen and (max-width: 1199px) {
  .works-area .btn-wrapper {
    margin-top:33px
  }
}
.works-area-inner {
  position:relative;
  z-index:1
}
.works-area-inner .shape-1 {
  position:absolute;
  top:951px;
  inset-inline-start:calc(100% + 26px);
  width:-moz-max-content;
  width:max-content
}
@media only screen and (max-width: 991px) {
  .works-area-inner .shape-1 {
    display:none
  }
}
.dir-rtl .works-area-inner .shape-1 img {
  transform:rotateY(180deg)
}
.works-area-inner .shape-2 {
  position:absolute;
  bottom:0;
  inset-inline-end:calc(100% - 77px);
  width:-moz-max-content;
  width:max-content;
  z-index:-1
}

@media only screen and (max-width: 991px) {
  .works-area-inner .shape-2 {
    display:none
  }
}
.dir-rtl .works-area-inner .shape-2 img {
  transform:rotateY(180deg)
}

/* .achievement-area {
  background-color:#f9fafd;
  padding-top:145px
}
.dark .achievement-area {
  background-color:#222
}

@media only screen and (max-width: 1199px) {
  .achievement-area {
    padding-top:54px
  }
}
.achievement-area-inner {
  position:relative
}
.achievement-area-inner .shape-1 {
  position:absolute;
  inset-inline-start:129px;
  top:250px
}


@media only screen and (max-width: 991px) {
  .achievement-area-inner .shape-1 {
    display:none
  }
}
.dir-rtl .achievement-area-inner .shape-1 img {
  transform:rotateY(180deg)
}
.achievement-area-inner .shape-2 {
  position:absolute;
  inset-inline-start:calc(100% - 257px);
  top:460px;
  width:-moz-max-content;
  width:max-content;
  width:459px
}
@media only screen and (max-width: 767px) {
  .achievement-area-inner .shape-2 {
    display:none
  }
}
.dir-rtl .achievement-area-inner .shape-2 img {
  transform:rotateY(180deg)
}
.achievement-area-inner .shape-3 {
  position:absolute;
  inset-inline-end:calc(100% + 12px);
  bottom:170px;
  width:142px
}
.dir-rtl .achievement-area-inner .shape-3 img {
  transform:rotateY(180deg)
}
.achievement-area .section-title {
  max-width:1294px;
  margin:0 auto
}

@media only screen and (max-width: 1199px) {
  .achievement-area .section-title {
    max-width:694px
  }
}
.achievement-area .section-title img {
  max-height:68px
}

@media only screen and (max-width: 1199px) {
  .achievement-area .section-title img {
    max-height:48px
  }
}
@media only screen and (max-width: 767px) {
  .achievement-area .section-title img {
    display:none
  }
}
.achievement-area .section-header {
  text-align:center
}
.dir-rtl .achievement-area .section-header .section-title img {
  transform:rotateY(180deg)
}
.achievement-area .section-header .title-wrapper {
  margin-top:17px
}
.achievement-area .section-header .text-wrapper {
  margin-top:26px
}
.achievement-area .section-header .btn-wrapper {
  margin-top:43px
}
.achievement-area .section-header .text {
  max-width:407px;
  margin:0 auto
}
.achievement-area .achievement-thumb {
  max-width:1130px;
  margin:0 auto;
  margin-top:80px;
  position:relative
}
@media only screen and (max-width: 1199px) {
  .achievement-area .achievement-thumb {
    max-width:630px
  }
}
@media only screen and (max-width: 991px) {
  .achievement-area .achievement-thumb {
    max-width:430px
  }
}
.dir-rtl .achievement-area .achievement-thumb .main-image {
  transform:rotateY(180deg)
}
.achievement-area .achievement-thumb .position-text {
  position:absolute;
  top:145px;
  inset-inline-end:0
} */


.features-area-inner {
  position:relative
}
.features-area-inner .shape-1 {
  position:absolute;
  inset-inline-start:calc(100% - 225px);
  top:50%;
  transform:translateY(-50%);
  width:425px
}

.dir-rtl .features-area-inner .shape-1 img {
  transform:rotateY(180deg)
}
.features-area-inner .shape-2 {
  position:absolute;
  inset-inline-start:calc(100% - 195px);
  top:calc(100% - 65px);
  width:200px
}
.features-area .section-title {
  font-size:50px;
  max-width:403px
}
.features-area .section-content {
  display:flex;
  gap:40px 71px;
  align-items:center;
  background-color:#f9fafd;
  border-radius:30px;
  padding:130px 115px 143px
}
.dark .features-area .section-content {
  background-color:#1b1b1b
}
.features-area .section-content .title-wrapper {
  margin-top:31px
}
.features-area .text-wrapper .title {
  font-size:250px;
  font-weight:400;
  line-height:.74;
  display:flex;
  align-items:flex-start;
  gap:20px
}
.features-area .text-wrapper .title span {
  font-size:50px;
  line-height:.4
}
.features-area .text-wrapper .text {
  font-size:20px;
  line-height:1.38;
  margin-top:31px;
  max-width:303px
}
.features-area .text-wrapper.has-left-line {
  padding-inline-start:265px
}
.features-area .text-wrapper.has-left-line:before {
  width:200px;
  height:2px;
  background-color:var(--primary)
}
.blog-area {
  padding-top:145px;
  padding-bottom:147px
}
.blog-area .section-title {
  max-width:581px
}
.blog-area .section-header {
  display:flex;
  gap:20px 60px;
  justify-content:space-between;
  align-items:center
}
@media only screen and (max-width: 767px) {
  .blog-area .section-header {
    flex-direction:column;
    align-items:flex-start
  }
}
.blog-area .section-header .title-wrapper {
  margin-top:17px
}
.blog-area .section-header .text {
  max-width:350px
}
.blog-area .blog-wrapper-box {
  margin-top:56px
}

.blog-area .blog-wrapper {
  display:grid;
  gap:40px 45px;
  grid-template-columns:repeat(3, 1fr)
}
@media only screen and (max-width: 991px) {
  .blog-area .blog-wrapper {
    grid-template-columns:repeat(2, 1fr)
  }
}
@media only screen and (max-width: 767px) {
  .blog-area .blog-wrapper {
    grid-template-columns:repeat(1, 1fr)
  }
}
.blog:hover .thumb img {
  transform:scale(1.1)
}
.blog .thumb {
  border-radius:25px;
  overflow:hidden
}
.blog .thumb img {
  width:100%;
  transition:all .5s
}
.blog .content-wrapper {
  margin-top:28px
}
.blog .title {
  font-size:30px;
  line-height:1.15
}
.blog .tag {
  font-size:14px
}
.blog .meta {
  margin-top:27px;
  display:flex;
  gap:5px;
  align-items:center
}

.blog .date {
  font-size:14px;
  color:#c2c2c2
}
.blog .date.has-left-line {
  padding-inline-start:25px
}
.blog .date.has-left-line:before {
  width:20px
}
.cta-area-inner {
  position:relative;
  border-top:1px solid var(--border);
  padding-top:145px
}

.cta-area-inner .shape-1 {
  position:absolute;
  bottom:-150px;
  inset-inline-start:calc(100% - 135px);
  width:400px
}
.dir-rtl .cta-area-inner .shape-1 img {
  transform:rotateY(180deg)
}
.cta-area .section-title {
  max-width:689px;
  margin:0 auto
}
.cta-area .section-header {
  text-align:center
}
.cta-area .section-header .title-wrapper {
  margin-top:17px
}
.cta-area .section-header .text {
  max-width:407px;
  margin:0 auto
}
.cta-area .section-header .text-wrapper {
  margin-top:26px
}
.cta-area .section-header .btn-wrapper {
  margin-top:43px
}