/* 🔥 Hide loader + transition everywhere inside Elementor editor */

/* Change the background and text color for everything */
::selection {
  background-color: #1919e6; /* The highlight color */
  color: #fff;            /* The text color when highlighted */
}

/* For Firefox support */
::-moz-selection {
  background-color: #ffde59;
  color: #fff;
}


/* Admin (main editor UI) */
body.wp-admin .loader,
body.wp-admin .page-transition {
  display: none !important;
  pointer-events: none !important;
}

/* Elementor editor iframe */
html.elementor-html body .loader,
html.elementor-html body .page-transition {
  display: none !important;
  pointer-events: none !important;
}

/* Extra safety (covers preview modes) */
.elementor-editor-active .loader,
.elementor-editor-active .page-transition {
  display: none !important;
  pointer-events: none !important;
}



.nav-bar{
     display: inline-flex !important;
     /* 🔥 KEY */
    position: relative !important;
    transition: none !important;
    overflow: hidden;
    justify-content: center !important;
     margin: 0 auto !important;
     transition: none !important;
     
}


.nav-inner {
  display: flex;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  transition: none !important;
}


.nav-bar.active .nav-logo,
.nav-bar.active .nav-trigger {
  opacity: 0;
  pointer-events: none;
  transition: none !important;
  display: none !important;
  
}

.nav-bar.active .nav-inner > *:not(.nav-center) {
  display: none !important;
}


.nav-trigger, .nav-close {
    cursor: pointer;
}

.nav-center {
  position: relative;
  width: auto !important;
  flex: 0 0 auto !important;
  overflow: hidden;
  display: flex !important;
   flex-direction: column !important;
  align-items: center;
  justify-content: center;
  transition: none !important;
}

.center-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  transform: translateY(0%);
  transition: none !important;
   height: 24px !important;
   
}

/* Each item same height = perfect swap */
.page-name,
.nav-close {
  height: 24px !important;
  line-height: 24px !important; /* ensures perfect vertical centering */
  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0; /* remove any Elementor weirdness */
  padding: 0;
  transition: none !important;
}

/* .nav-center.active .center-wrapper {
  transform: translateY(-100%);
} */

.menu-box{
    width: min(480px,90%) !important;
    position: absolute !important;
    top: 68px !important;
    left: 50%;
    transform: translateX(-50%);
        transition: none !important;
        opacity: 0;
        pointer-events: none;
        backdrop-filter: blur(10px) !important;
        transition: none !important;
}

.menu-link {
  cursor: pointer;
}

.page-name {
    cursor: pointer;
  text-transform: uppercase !important;   /* or lowercase / capitalize */
  letter-spacing: 1.2px !important;
  font-size: 12px !important;
  font-family: inter !important;
  font-weight: 600 !important;
  transition: none !important;
}


@media (max-width: 767px) {
  .center-wrapper, .bottom-menu-nav {

    --flex-wrap: nowrap !important; 
  }


  /* allow absolute positioning context */
  .nav-bar {
    position: relative !important;
    max-width: 90% !important;
  }

  
  .bottom-menu-nav {

   text-align: center !important; 
  }


}






/* Footer CSS - */

/* Page Transition*/

.page-transition {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
 transition: none !important;
  z-index: 9999;
  pointer-events: none;
}

.transition-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: 100%;
  transition: none !important;
}

.col {
  transform: translateY(0%);
  will-change: transform;
  background-color: rgb(15, 31, 255);
  width: calc(100% + 1px); /* 🔥 overlap */
}



.loader {
     opacity: 0;
  pointer-events: none;
  position: fixed;
  bottom: 8px;
  right: 8px;
  transform: translate(-50%, -50%);
  width: 200px;
  text-align: center;
  color: white;
  z-index: 10;
}

.loader-bar {
  width: 0%;
  height: 2px;
  background: white;
  margin-bottom: 8px;
    display: none;
  margin-left: auto; /* 🔥 aligns bar to right */
}

.loader-text {
  font-size: 72px;
  letter-spacing: 2px;
  text-align: right;
}


body.has-loader .loader {
  opacity: 1;
  pointer-events: auto;
}



.footer-quote{
    text-wrap: balance;
}



.contact-link, .hyper-link, .mobile-copy, .social-link{
    cursor: pointer;
}



/* Header footer ends here */


/* button css */

.elementor-icon svg {
  fill: none !important;
}



.ds-btn{
    cursor:pointer;
      width: fit-content !important;
  min-width: 96px !important;
  display: inline-flex;
  flex: 0 0 auto !important;
  white-space: nowrap;
  padding: 12px 32px 12px 32px !important;
  align-items:center !important;
  border-radius: 4px !important;
  box-sizing: border-box !important;
   overflow: hidden; /* 🔥 key */
}





/* 🔥 Fix icon alignment */
.ds-btn .elementor-icon-wrapper {
  display: flex;
  align-items: center;
}

.ds-btn .elementor-icon {
  display: flex;
  align-items: center;
  line-height: 1 !important;
}

.ds-btn .elementor-icon svg {
  display: block; /* removes inline baseline gap */
}


.btn-text-wrap {
  position: relative;
  height: 18px !important;
  line-height: 1em; /* 🔥 force exact height */
  display: inline-block;
  overflow: hidden;
   align-items: center !important;
}

.btn-text {
  display: block;
  line-height: 1em; /* 🔥 match exactly */
  
}

/* TOP */
.btn-text.top {
  transform: translateY(0%);
}

/* BOTTOM */
.btn-text.bottom {
  position: absolute;
  top: 0;              /* 🔥 NOT 100% */
  left: 0;
  transform: translateY(100%); /* push it below */
}

/* HOVER */
.ds-btn:hover .btn-text.top {
  transform: translateY(-100%);
}

.ds-btn:hover .btn-text.bottom {
  transform: translateY(0%);
}




.secondary-btn-dark{
  background-color: transparent !important;
  border: solid 1.5px #323232;
}


.secondary-btn-dark:hover{
  background-color: #efefef !important;
}

.secondary-btn-dark:hover .elementor-widget-heading span{
  color: #222 !important;
}

.secondary-btn-dark:hover .elementor-icon svg path {
  stroke: #222 !important;  

}

.secondary-btn-dark:hover .elementor-icon svg rect {
  stroke: #222 !important; 
}





.primary-btn-dark:hover {
  background-color:#1919e6 !important;
}


.primary-btn-dark:hover .elementor-icon svg path {
  stroke: #fff !important;
}


/*primary buttons ends here*/



/* horizontal service section */


/* section */
.h-scroll {
  position: relative;
  transition: none !important;
  align-items: center !important;
}

/* track */
.h-scroll-track {
  display: flex;
  width: max-content;
  gap: 32px;
  will-change: transform;
  transition: none !important;
}

/* cards */
.service-card {
  width: 500px !important;
  flex-shrink: 0 !important;
  transition: none !important;
  

}

.service-card:hover h3,.service-card:hover h6,.service-card:hover p{
    color: #1919e6 !important;
}

.service-card:hover .elementor-icon svg path {
  stroke: #1919e6 !important;  
  

}

/* mobile */
@media (max-width: 767px) {
  .service-card {
    min-width: 75vw;
  }
}








/*loop item - blogs*/
.loop-text-title{
    text-wrap: balance;
}

/* 1. Force the Container to be a Square */
.loop-image-window {
    /*width: 250px !important;*/
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    border-radius: 2px !important;
}

/* 2. Style the Image to fill the square */
.loop-featured-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
    will-change: transform;
}

/* 3. The Hover Zoom Effect */
.loop-image-window:hover .loop-featured-img img {
    transform: scale(1.1); /* Adjust zoom level here */
}


.loop-category{
    position: absolute !important;
    top:4px !important;
    right: 4px !important;
    border-radius:2px;
    z-index: 8 !important;
    height: fit-content !important;
    backdrop-filter: blur(15px) saturate(180%);
    -webkit-backdrop-filter: blur(15px) saturate(180%);
    
    /* 2. The Semi-Transparent Background */
    background-color: rgba(255, 255, 255, 0.3) !important;
    
}


.post-wrapper:hover .post-url-title h2{
    text-decoration: underline;
}