/*
Theme Name: Portfolio
Author: 
Description: Your description goes here
Version: 1.0
Template: hello-elementor

This is the child theme for Hello Elementor theme, generated with Generate Child Theme plugin by catchthemes.

(optional values you can add: Theme URI, Author URI, License, License URI, Tags, Text Domain)
*/

/* ==================== Common Style Start ==================== */
html,
body {
  overflow-x: hidden;
}

:focus,
:focus-visible,
:focus-within {
  outline: none !important;
}

.elementor-icon-wrapper {
  display: flex;
}

.common-details>*:last-child {
  margin-bottom: 0 !important;
}

.common-details h1,
.common-details h2,
.common-details h3,
.common-details h4,
.common-details h5,
.common-details h6 {
  margin-bottom: 20px;
  margin-top: 0;
}

.common-details ul,
.common-details ol {
  margin-bottom: 20px;
}

.common-details ul li:not(:last-child),
.common-details ol li:not(:last-child) {
  margin-bottom: 15px;
}

.dark-mode .common-details strong,
.dark-mode .common-details b {
  color: #FFFFFF;
}

.common-details strong,
.common-details b {
  font-weight: 500;
  color: #000000;
}

.common-details .alignnone,
.common-details .alignleft,
.common-details .alignright,
.common-details .aligncenter {
  height: 380px !important;
  object-fit: cover !important;
}

.common-details .alignnone {
  float: none;
  margin: 20px;
}

.common-details .alignleft {
  float: left;
  margin: 20px 20px 20px 0;
}

.common-details .alignright {
  float: right;
  margin: 20px 0 20px 20px;
}

.common-details .aligncenter {
  float: none;
  display: block;
  margin: 20px auto;
}

.common-details blockquote {
  padding-left: 30px;
  border-left: 5px solid #000000;
  margin-bottom: 20px;
}

.cmn-menu ul li a {
  display: inline-flex !important;
}

/* ==================== Common Style End ==================== */

/* ==================== Common Style End ==================== */
.dark-mode .dark-mode-divider {
  background: #FFFFFF;
}

/* ==================== Common Style End ==================== */

/* ==================== Header Style Start ==================== */
.header-main-block {
  position: relative;
  width: 100%;
  z-index: 999;
  transition: box-shadow 0.4s ease-in-out, background-color 0.4s ease-in-out, backdrop-filter 0.4s ease-in-out;
  -webkit-transition: box-shadow 0.4s ease-in-out, background-color 0.4s ease-in-out, backdrop-filter 0.4s ease-in-out;
  -moz-transition: box-shadow 0.4s ease-in-out, background-color 0.4s ease-in-out, backdrop-filter 0.4s ease-in-out;
  -ms-transition: box-shadow 0.4s ease-in-out, background-color 0.4s ease-in-out, backdrop-filter 0.4s ease-in-out;
  -o-transition: box-shadow 0.4s ease-in-out, background-color 0.4s ease-in-out, backdrop-filter 0.4s ease-in-out;
}

.header-main-block.sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
}

body.dark-mode .header-main-block.sticky {
  background: rgba(20, 20, 20, 0.45);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

/* ========================= Adaptive text color ========================= */
.header-main-block,
.header-main-block a,
.header-main-block h4,
.header-main-block .logo-name,
.header-main-block .hfe-menu-item {
  color: #000;
  transition: color 0.35s ease-in-out;
  -webkit-transition: color 0.35s ease-in-out;
  -moz-transition: color 0.35s ease-in-out;
  -ms-transition: color 0.35s ease-in-out;
  -o-transition: color 0.35s ease-in-out;
}

.header-main-block svg circle[fill="black"] {
  transition: fill 0.35s ease-in-out;
  -webkit-transition: fill 0.35s ease-in-out;
  -moz-transition: fill 0.35s ease-in-out;
  -ms-transition: fill 0.35s ease-in-out;
  -o-transition: fill 0.35s ease-in-out;
}

.header-main-block[data-header-theme="dark"],
.header-main-block[data-header-theme="dark"] a,
.header-main-block[data-header-theme="dark"] h4,
.header-main-block[data-header-theme="dark"] .logo-name,
.header-main-block[data-header-theme="dark"] .hfe-menu-item {
  color: #FFFFFF !important;
}

body.dark-mode .header-main-block,
body.dark-mode .header-main-block a,
body.dark-mode .header-main-block h4,
body.dark-mode .header-main-block .logo-name,
body.dark-mode .header-main-block .hfe-menu-item {
  color: #FFFFFF;
}

.logo-name-link {
  display: inline-block;
  text-decoration: none;
  color: inherit;
}

.logo-name-link:hover,
.logo-name-link:focus,
.logo-name-link:visited,
.logo-name-link:active {
  color: inherit;
  text-decoration: none;
}

.logo-name {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 110%;
  cursor: pointer;
  margin: 0;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
  will-change: opacity, transform;
  -webkit-transition: opacity 0.3s ease, transform 0.3s ease;
  -moz-transition: opacity 0.3s ease, transform 0.3s ease;
  -ms-transition: opacity 0.3s ease, transform 0.3s ease;
  -o-transition: opacity 0.3s ease, transform 0.3s ease;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
}

.logo-name.is-changing {
  opacity: 0;
  transform: translateY(8px);
  -webkit-transform: translateY(8px);
  -moz-transform: translateY(8px);
  -ms-transform: translateY(8px);
  -o-transform: translateY(8px);
}

.h-menu nav {
  width: 100% !important;
}

.h-menu nav ul::after,
.h-menu nav ul::before {
  display: none !important;
}

.h-menu nav ul li>a {
  position: relative !important;
  padding-right: 16px !important;
}

.h-menu nav ul li>a::after {
  position: absolute !important;
  content: "" !important;
  top: 50% !important;
  right: 2px !important;
  width: 16px !important;
  height: 16px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="512" height="512" x="0" y="0" viewBox="0 0 6.35 6.35" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g><path d="M2.912.532 2.91 5.177l-.87-.868a.27.27 0 0 0-.189-.08.265.265 0 0 0-.183.453L2.99 6.006a.265.265 0 0 0 .375 0l1.322-1.324c.259-.25-.127-.633-.375-.373l-.873.873.002-4.65a.265.265 0 1 0-.529 0" fill="%23000000" opacity="1" data-original="%23000000" class=""></path></g></svg>') no-repeat center / contain !important;
  z-index: 2 !important;
  -webkit-transform: translateY(-50%) !important;
  transform: translateY(-50%) !important;
  -moz-transform: translateY(-50%) !important;
  -ms-transform: translateY(-50%) !important;
  -o-transform: translateY(-50%) !important;
  transition: opacity 0.3s ease, visibility 0.3s ease, right 0.3s ease !important;
  -webkit-transition: opacity 0.3s ease, visibility 0.3s ease, right 0.3s ease !important;
  -moz-transition: opacity 0.3s ease, visibility 0.3s ease, right 0.3s ease !important;
  -ms-transition: opacity 0.3s ease, visibility 0.3s ease, right 0.3s ease !important;
  -o-transition: opacity 0.3s ease, visibility 0.3s ease, right 0.3s ease !important;
}

.dark-mode .h-menu nav ul li>a::after {
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="512" height="512" x="0" y="0" viewBox="0 0 6.35 6.35" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g><path d="M2.912.532 2.91 5.177l-.87-.868a.27.27 0 0 0-.189-.08.265.265 0 0 0-.183.453L2.99 6.006a.265.265 0 0 0 .375 0l1.322-1.324c.259-.25-.127-.633-.375-.373l-.873.873.002-4.65a.265.265 0 1 0-.529 0" fill="%23ffffff" opacity="1" data-original="%23000000" class=""></path></g></svg>') no-repeat center / contain !important;
}

.h-menu nav ul li.current-menu-item>a::after,
.h-menu nav ul li.current_page_item>a::after {
  right: -6px !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.h-menu nav ul li>a:hover::after {
  right: -6px !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.timezone-box {
  display: inline-block;
  font-family: Manrope;
  font-weight: 400;
  font-size: 14px;
  line-height: auto;
}

/* ==================== Header Style End ==================== */

/* ==================== Footer Style Start ==================== */
.email-copy-icon {
  cursor: pointer;
}

.branding-logo svg {
  animation: brandingLogoRotate 12s linear infinite;
  transform-origin: center center;
  will-change: transform;
  -webkit-animation: brandingLogoRotate 12s linear infinite;
}

@keyframes brandingLogoRotate {
  0% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
  }
}

.dark-mode .branding-logo svg * {
  fill: #FFFFFF !important;
}

/* ==================== Footer Style End ==================== */
.project-fea-img a {
  width: 100% !important;
}

.dark-mode .project-type-dark-mode {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* ==================== Responsive Style Start ==================== */
@media (max-width: 1200px) {

  .common-details h1,
  .common-details h2,
  .common-details h3,
  .common-details h4,
  .common-details h5,
  .common-details h6,
  .common-details ul,
  .common-details ol {
    margin-bottom: 15px;
  }

  .common-details ul li,
  .common-details ol li {
    margin-bottom: 10px;
  }
}

@media (max-width: 1024px) {
  .h-menu nav ul li>a {
    padding-right: 14px !important;
  }

  .h-menu nav ul li>a::after {
    width: 14px !important;
    height: 14px !important;
  }
}

@media (max-width: 767px) {
  .logo-name {
    font-size: 14px;
  }

  .h-menu nav {
    width: 100vw !important;
  }

  .h-menu nav ul li.current-menu-item>a::after,
  .h-menu nav ul li.current_page_item>a::after {
    right: 0px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

@media (max-width: 575px) {
  .cmn-br-style br {
    display: none;
  }

  .common-details .alignnone,
  .common-details .alignleft,
  .common-details .alignright,
  .common-details .aligncenter {
    float: none !important;
    display: block !important;
    margin: 20px auto !important;
    height: 320px !important;
  }

  .common-width-100 {
    max-width: 100% !important;
  }

  .common-grid-block {
    display: flex !important;
    flex-direction: column !important;
  }
}

/* ==================== Responsive Style End ==================== */