/*======================================
Theme Name: Cooper - Modern & Multipurpose Business
Theme URI:https://cooper.elvarstudios.com/
Author: Elvar Studios
Author URI: https://elvarstudios.com/
Template: Divi
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
======================================*/

/* ===== NOTES ==================================================================
 *
 * Discover our premium Divi products: https://elvarstudios.com/
 *
 * =============================================================================== */

 /* Let Lenis control smoothing. */
  html.lenis,
  html.lenis body {
    scroll-behavior: auto !important;
  }


/*code start with lines color */


/* =========================================
   GROUP MODULE
   Add class: es_ghc
   ========================================= */

.es_ghc {
    position: relative !important;
    
}


/* =========================================
   NORMAL / BACKGROUND LINE
   Always visible with low opacity
   ========================================= */

.es_ghc::before {
    content: "";

    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;

    width: 100% !important;
  

    

    opacity: 1px;

    display: block !important;

    pointer-events: none;

    z-index: 1;
}


/* =========================================
   HOVER / ACTIVE LINE
   Initially hidden
   ========================================= */

.es_ghc::after {
    content: "";

    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;

    width: 0;
    height: 1px;

    background: #1111112B;

    opacity: 1;

    display: block !important;

    pointer-events: none;

    z-index: 2;

    transition: width 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}


/* =========================================
   HOVER
   Strong line moves LEFT → RIGHT
   ========================================= */

.es_ghc:hover::after {
    width: 100%;
}


/* =========================================
   MOUSE LEAVE
   Strong line moves RIGHT → LEFT
   ========================================= */

.es_ghc:not(:hover)::after {
    width: 0;
}


/* =========================================================
   ES UNIVERSAL HOVER IMAGE PREVIEW
   BASE STYLING
========================================================= */


/* =========================================================
   UNIVERSAL CARD
========================================================= */

.es-card {
    position: relative;
    cursor: pointer;
}


/* =========================================================
   UNIVERSAL PREVIEW
   This class NEVER changes.
========================================================= */

.es-hover-preview {
    position: fixed;

    top: 0;
    left: 0;

    width: 280px;
    height: 360px;

    pointer-events: none;

    z-index: 999999;

    visibility: hidden;
    opacity: 0;

    overflow: hidden;

    will-change: transform, opacity;

    transform-origin: left bottom;
}


/* =========================================================
   PREVIEW IMAGE
========================================================= */

.es-hover-preview img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    pointer-events: none;

}


/* =========================================================
   MOBILE
   NEW RESPONSIVE FEATURE
========================================================= */

@media (max-width: 767px) {

    .es-hover-preview {

        /*
           IMPORTANT:
           Previously this was display:none.
           That prevented the image from ever appearing
           on mobile.

           Now the preview is allowed to display.
        */

        display: block !important;

        /*
           Mobile size.
           JavaScript also dynamically adjusts this
           based on the screen size.
        */

        width: 220px;
        height: 280px;

        /*
           Keep image above everything.
        */

        z-index: 999999;

        /*
           No interaction with preview itself.
        */

        pointer-events: none;

    }


    /* ================================================
       MOBILE CARD
    ================================================ */

    .es-card {

        cursor: pointer;

        /*
           Helps browsers understand that this element
           supports touch interaction.
        */

        touch-action: manipulation;

    }

}


/*code End with lines colors */


  



/*code start with services we do*/

/* =========================================
   COMPONENT SETTINGS
========================================= */

.me-switcher {
  --me-active-border:#8de969 ;

  --me-card-radius: 4px;
  

  /* Minimum space available for each left Group */
  --me-panel-min-height: 520px;
}

/* Native Divi row */
.me-switcher .et_pb_row.me-layout {
  align-items: center;
}

/* =========================================
   RIGHT-SIDE GROUP CARDS
========================================= */

.me-switcher .me-controls {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--me-card-gap) !important;
}

.me-switcher .me-card {
  box-sizing: border-box;
  width: 100% !important;
  margin: 0 !important;
  padding: 26px !important;

  background: var(--me-card-background) !important;
  border: 2px solid transparent !important;
  border-radius: var(--me-card-radius) !important;

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  /* Border only. No fading or card movement. */
  transition: border-color 200ms ease !important;
}

.me-switcher .me-card.is-active {
  border-color: var(--me-active-border) !important;
}

.me-switcher .me-card:focus-visible {
  outline: 3px solid var(--me-active-border);
  outline-offset: 4px;
}

/* =========================================
   LEFT-SIDE VIEWPORT
   Applied only after JavaScript initializes.
   This keeps all Groups editable in Divi.
========================================= */

.me-switcher.me-ready .me-stage {
  display: block !important;
  position: relative !important;

  width: 100% !important;
  min-width: 0;
  min-height: var(--me-panel-min-height);

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;
  isolation: isolate;
}

/* These are your native Divi Group modules */
.me-switcher.me-ready .me-panel {
  box-sizing: border-box;

  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;

  width: 100% !important;
  height: auto !important;
  min-height: var(--me-panel-min-height);
  max-height: none !important;
  margin: 0 !important;

  visibility: hidden;
  pointer-events: none;

  /* Opacity always remains 1. */
  opacity: 1 !important;

  /* JavaScript handles the sliding motion. */
  transition: none !important;
  animation: none !important;
}

.me-switcher.me-ready .me-panel.is-active,
.me-switcher.me-ready .me-panel.is-moving {
  visibility: visible;
}

.me-switcher.me-ready .me-panel.is-active {
  pointer-events: auto;
}

/* Prevent interaction with content while sliding */
.me-switcher.me-ready.me-busy .me-panel {
  pointer-events: none;
}

/* =========================================
   RESPONSIVE SETTINGS
========================================= */

@media (max-width: 980px) {
  .me-switcher {
    --me-panel-min-height: 420px;
  }
}

@media (max-width: 767px) {
  .me-switcher {
    --me-panel-min-height: 340px;
    --me-card-gap: 10px;
  }

  .me-switcher .me-card {
    padding: 20px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .me-switcher .me-card {
    transition: none !important;
  }
}
  
/* Hide inactive panels completely, including nested Divi modules.
   Keep active and currently sliding panels untouched. */

.me-switcher.me-ready
.me-panel:not(.is-active):not(.is-moving) {
  visibility: hidden !important;
  pointer-events: none !important;
  clip-path: inset(50%) !important;
}

.me-switcher.me-ready
.me-panel:not(.is-active):not(.is-moving) * {
  visibility: hidden !important;
}

/*code End with services we do*/



/* code downward menu header start */

/* =========================================
   SETTINGS
========================================= */

.sn-shell {
  --sn-width: 500px;
  --sn-top: 46px;
  --sn-background: #000000;
  --sn-text: #ffffff;
  --sn-border: #CDFF9B38;
  --sn-speed: 650ms;
  --sn-ease: cubic-bezier(.22, 1, .36, 1);

  width: min(var(--sn-width), calc(100vw - 32px)) !important;
  max-width: none !important;
  padding: 0 !important;
  background: var(--sn-background);
  border: 1px solid var(--sn-border);
  border-radius: 3px;
  overflow: visible !important;
  box-sizing: border-box;
}



body.admin-bar .sn-shell.sn-ready {
  top: calc(var(--sn-top) + 32px) !important;
}

/* =========================================
   VISIBLE HEADER GROUP
========================================= */

.sn-shell .sn-header {
  width: 100% !important;
  min-height: 52px;
  margin: 0 !important;
  padding: 5px 18px !important;
  box-sizing: border-box;
  background: var(--sn-background);
}

.sn-shell .sn-header .et_pb_module {
  margin-bottom: 0 !important;
}

.sn-shell .sn-brand {
  flex: 1 1 auto;
  min-width: 0;
}

.sn-shell .sn-brand,
.sn-shell .sn-brand a {
  color: var(--sn-text);
}

.sn-shell .sn-brand p {
  padding-bottom: 0;
}

.sn-shell .sn-toggle-module {
  flex: 0 0 42px;
  width: 42px;
  padding: 0 !important;
}

/* Accessible hamburger button */
.sn-shell .sn-toggle {
  appearance: none;
  width: 42px;
  height: 42px;
  padding: 7px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.sn-shell .sn-toggle span {
  display: block;
  width: 28px;
  height: 1px;
  background: #bbbbbb;
}

/* =========================================
   REVEAL GROUP
========================================= */

.sn-shell .sn-panel {
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  background: var(--sn-background);
}

/* Without JS / inside the builder, content stays editable. */
.sn-shell.sn-ready .sn-panel {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;

  height: 0;
  overflow: hidden !important;
  visibility: hidden;
  pointer-events: none;
  overscroll-behavior: contain;

  border-radius: 0 0 3px 3px;

  transition:
    height var(--sn-speed) var(--sn-ease),
    visibility 0s var(--sn-speed);
}

.sn-shell.sn-ready.sn-open .sn-panel {
  visibility: visible;
  pointer-events: auto;

  transition:
    height var(--sn-speed) var(--sn-ease),
    visibility 0s;
}

/* Scroll if the content exceeds the available screen height. */
.sn-shell.sn-ready.sn-settled .sn-panel {
  overflow-y: auto !important;
}

.sn-shell .sn-content {
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 24px 18px 40px !important;
  box-sizing: border-box;
  background: var(--sn-background);
  border-top: 1px solid var(--sn-border);
}

/* =========================================
   NATIVE DIVI MENU: VERTICAL ON ALL DEVICES
========================================= */

.sn-shell .sn-menu.et_pb_menu {
  width: 100%;
  margin: 0 !important;
  background: transparent !important;
}

.sn-shell .sn-menu.et_pb_menu .et_pb_menu_inner_container {
  width: 100%;
}

.sn-shell .sn-menu.et_pb_menu .et_pb_menu__wrap {
  justify-content: flex-start !important;
  width: 100%;
}

/* Keep the actual menu visible on tablet and phone. */
.sn-shell .sn-menu.et_pb_menu .et_pb_menu__menu {
  display: flex !important;
  width: 100%;
}

/* Prevent a second hamburger inside the reveal panel. */
.sn-shell .sn-menu.et_pb_menu .et_mobile_nav_menu {
  display: none !important;
}

.sn-shell .sn-menu.et_pb_menu .et_pb_menu__menu > nav {
  width: 100%;
}

.sn-shell .sn-menu.et_pb_menu .et_pb_menu__menu > nav > ul.et-menu {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;

  width: 100%;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

.sn-shell .sn-menu.et_pb_menu .et-menu > li {
  display: block !important;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

/* =========================================
   MENU LINKS
========================================= */

.sn-shell .sn-menu.et_pb_menu .et-menu > li > a {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  display: flex !important;
  align-items: center;

  width: 100%;
  min-height: 53px;
  margin: 0 !important;
  padding: 14px 44px 14px 13px !important;
  box-sizing: border-box;

  border-bottom: 1px solid var(--sn-border);
  background: transparent !important;
  color: var(--sn-text) !important;

  font-size: 20px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.6px;

  opacity: 1 !important;
  transition: color 180ms ease;
}

/* White fill rises from the bottom. */
.sn-shell .sn-menu.et_pb_menu .et-menu > li > a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;

  background: #ffffff;
  transform: scaleY(0);
  transform-origin: center bottom;

  transition: transform 280ms var(--sn-ease);
}

/* Right-side chevron: no icon font required. */
.sn-shell .sn-menu.et_pb_menu .et-menu > li > a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;

  width: 7px;
  height: 7px;
  margin: 0;

  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;

  transform: translateY(-50%) rotate(45deg);
  opacity: 1;

  transition:
    transform 250ms var(--sn-ease),
    opacity 180ms ease;
}

.sn-shell .sn-menu.et_pb_menu .et-menu > li > a:hover,
.sn-shell .sn-menu.et_pb_menu .et-menu > li > a:focus-visible {
  color: #000000 !important;
}

.sn-shell .sn-menu.et_pb_menu .et-menu > li > a:hover::before,
.sn-shell .sn-menu.et_pb_menu .et-menu > li > a:focus-visible::before {
  transform: scaleY(1);
}

/* Matches the disappearing arrow in the reference. */
.sn-shell .sn-menu.et_pb_menu .et-menu > li > a:hover::after,
.sn-shell .sn-menu.et_pb_menu .et-menu > li > a:focus-visible::after {
  opacity: 0;
  transform: translate(5px, -50%) rotate(45deg);
}

.sn-shell .sn-toggle:focus-visible,
.sn-shell .sn-brand a:focus-visible {
  outline: 2px solid #def9c6;
  outline-offset: 3px;
}

.sn-shell .sn-menu.et_pb_menu .et-menu > li > a:focus-visible {
  outline: 2px solid #def9c6;
  outline-offset: -2px;
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 980px) {
  .sn-shell {
    --sn-top: 24px;
  }

  .sn-shell .sn-content {
    padding: 20px 14px 24px !important;
  }

  .sn-shell .sn-menu.et_pb_menu .et-menu > li > a {
    min-height: 48px;
    font-size: 18px;
  }
}

@media (max-width: 782px) {
  body.admin-bar .sn-shell.sn-ready {
    top: calc(var(--sn-top) + 46px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sn-shell *,
  .sn-shell *::before,
  .sn-shell *::after {
    transition: none !important;
  }
}
  
.sn-shell .sn-panel > .sn-content {
  flex-shrink: 0 !important;
}
/* code downward menu header end */

/*cooper carousel start code*/

@media (hover: hover) and (pointer: fine) {
  .cooper-drag-carousel.cooper-drag-ready .et_pb_group_carousel_container {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
  }
  .cooper-drag-carousel.cooper-cursor-on .et_pb_group_carousel_container,
  .cooper-drag-carousel.cooper-cursor-on .et_pb_group_carousel_container * {
    cursor: none !important;
  }
  .cooper-drag-carousel .et_pb_group_carousel_container img {
    -webkit-user-drag: none;
  }
}
.cooper-drag-cursor {
  --cursor-bg: #c4f18a;
  --cursor-color: #151515;
  position: fixed;
  top: 0;
  left: 0;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--cursor-color);
  background: var(--cursor-bg);
  border: 1px solid rgb(255 255 255 / 45%);
  box-shadow: 0 8px 30px rgb(0 0 0 / 12%);
  font: 600 11px/1 Arial, sans-serif;
  letter-spacing: .08em;
  pointer-events: none;
  z-index: 2147483000;
  opacity: 0;
  scale: .7;
  transition: opacity .18s ease, scale .22s ease, transform .07s linear;
}
.cooper-drag-cursor.is-visible { opacity: 1; scale: 1; }
.cooper-drag-cursor.is-down { scale: .88; }
.cooper-drag-cursor span:first-child,
.cooper-drag-cursor span:last-child { font-size: 19px; font-weight: 400; }
@media (prefers-reduced-motion: reduce) {
  .cooper-drag-cursor { transition: none; }
}
@media (hover: none), (pointer: coarse) {
  .cooper-drag-cursor { display: none; }
}

/* Show and position the Drag cursor immediately */
.cooper-drag-cursor {
  transition: none !important;
}




/* Curve controls */
.cooper-curve-carousel {
  --curve-angle: 28;
  --curve-center-scale: 0.82;
  --curve-perspective: 900px;
}

/* Allow room for the tilted card edges */
.cooper-curve-carousel > .et_pb_group_carousel_container {
  padding-block: 40px;
  overflow-x: clip;
  overflow-y: visible;
}

/* Transform only the card inside each native slide */
.cooper-curve-carousel
> .et_pb_group_carousel_container
> .et_pb_group_carousel_track
> .et_pb_group_carousel_slide
> .et_pb_group {
  transform-origin: center center;

  transform:
    perspective(var(--curve-perspective))
    rotateY(var(--cooper-card-angle, 0deg))
    scale(var(--cooper-card-scale, 1));

  backface-visibility: hidden;

  /* Position-based transforms must not lag behind the drag */
  transition-property: filter, box-shadow !important;
}

/* Flat, full-size cards on phones */
@media (max-width: 767px) {
  .cooper-curve-carousel {
    --curve-angle: 0;
    --curve-center-scale: 1;
  }

  .cooper-curve-carousel > .et_pb_group_carousel_container {
    padding-block: 16px;
  }
}

.cooper-curve-carousel
.et_pb_group_carousel_slide > .et_pb_group {
  filter: none !important;
}

/* EDIT SPACING HERE */
.cooper-curve-carousel {
  --cooper-card-margin: -12px;
}

/* Widen cards inside the existing slide slots */
.et_pb_module.cooper-curve-carousel
> .et_pb_group_carousel_container
> .et_pb_group_carousel_track
> .et_pb_group_carousel_slide
> .et_pb_group {
  margin-left: var(--cooper-card-margin) !important;
  margin-right: var(--cooper-card-margin) !important;
}

/* Preserve comfortable spacing on phones */
@media (max-width: 767px) {
  .cooper-curve-carousel {
    --cooper-card-margin: 4px;
  }
}

/*cooper carousel End code*/