/*======================================
Theme Name: cloudessentia Multipurpose Business Divi Child Theme
Theme URI:https://cloudessentia.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/
 
 *
 *
 * =============================================================================== */
 
 
/* ===========================
   Divi Native Menu Hover
   =========================== */

/* Transition */
.et_pb_menu .et-menu > li > a{
    transition: color .35s ease;
}

/* When hovering anywhere on the menu,
   make every menu item light gray */
.et_pb_menu .et-menu:hover > li > a{
    color: #bdbdbd !important;
}

/* Keep the hovered menu item in its original color */
.et_pb_menu .et-menu > li:hover > a{
    color: #121212 !important; /* Change to your normal text color */
}

/* Optional: Keep current active page highlighted */
.et_pb_menu .et-menu > li.current-menu-item > a,
.et_pb_menu .et-menu > li.current-menu-ancestor > a{
    color: #4f2dff !important; /* Active color */
}

/* Header and Footer CSS Code */

/* ====================================================
   DIVI Hide Header on Scroll Down
   Show Header on Scroll Up
==================================================== */

.scroll-header{
position: fixed;
top:0;
left:0;
width:100%;
z-index:999;   
transform:translateY(0);
transition:
transform .6s cubic-bezier(.16,1,.3,1),
background-color .4s ease,
}

/* Hide Header */

.scroll-header.header-hide{
    transform:translateY(-100%);
}

/* Show Header */

.scroll-header.header-show{   transform:translateY(0);
}

/* Optional Scroll Style */

.scroll-header.header-scrolled{
background:#fff;
backdrop-filter:blur(12px);
}
  
/* =========================================
   Divi Sticky Second Header
========================================= */

.sticky-header{
position:relative;
width:100%;
z-index:9999;
transition:
transform .55s cubic-bezier(.16,1,.3,1),
box-shadow .35s ease;
}

.sticky-header.is-fixed{
position:fixed;
top:0;
left:0;
width:100%;
background:#fff;
box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.sticky-header.is-hidden{ transform:translateY(-100%);
}

.sticky-header.is-visible{   transform:translateY(0);
}

/* =========================================
   Module Box Shadow for whole website
========================================= */
.module-box-shadow {
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}



/* ===== NOTES ==================================================================
 *
 *
 * Home Page CSS Code
 
 *
 *
 * =============================================================================== */


/* =========================================
 home cards section CSS
========================================= */

.service-card{
box-shadow:
    0 15px 40px rgba(0,0,0,.06);
transition:.45s ease;
}

.service-icon{

    width:70px;
    height:70px;

    background:#fff !important;
    border-radius:12px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin-top:-70px;
    transition:.45s ease;
}
.card-link{
overflow:hidden;
}
.link-text{

    max-width:0;

    opacity:0;

    white-space:nowrap;

    transform:translateX(-30px);

    transition:
    max-width .45s ease,
    opacity .35s ease,
    transform .45s ease;

}
.arrow{
transform:translateX(0);
transition:transform .45s ease;
}
  
.service-card:hover .link-text{

    max-width:160px;

    opacity:1;

    transform:translateX(0);
}

.service-card:hover .arrow{

    transform:translateX(8px);
}

.service-card:hover .service-icon{

    background:#1a191c !important;
}



/* =========================================
 home pricing Orange cards css code 
========================================= */

.price-tag{
    top: auto-flow;
    right: auto-flow;
    width: 100px;
    height: 100px;
    background: #ff9828;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

 clip-path: polygon(0 0, 100% 0%, 100% 100%, 49% 83%, 0 100%);
z-index: 10;
background: linear-gradient(
        135deg,
        #ffc44d 0%,
        #ffb133 18%,
        #ff9b23 45%,
        #f98b16 72%,
        #ef7b0a 100%
    );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.35),
        inset 0 -3px 6px rgba(0,0,0,.08);
}
}

.price-tag::before,
.price-tag::after{
    display: none;
}

/* =========================================
 home pricing Blue cards css code 
========================================= */

.price-tag1{
    top: auto-flow;
    right: auto-flow;
    width: 100px;
    height: 100px;
    background: #ff9828;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

 clip-path: polygon(0 0, 100% 0%, 100% 100%, 49% 83%, 0 100%);
z-index: 10;
background: linear-gradient(
        135deg,
        #9368ff 0%,
        #814fff 18%,
        #6e36ff 45%,
        #5d1dff 72%,
        #4b04ff 100%
    );
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.35),
        inset 0 -3px 6px rgba(0,0,0,.08);
}
}

.price-tag1::before,
.price-tag1::after{
    display: none;
}


/* =========================================
 home number count hover css code 
========================================= */

.number .et_pb_text_inner {
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
background: #2ea3f2;
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
transition: all 0.35s ease;
}
  
.number-card:hover .number .et_pb_text_inner {
background: #10b981;
color: #fff;
box-shadow: 0 20px 40px rgba(37, 99, 235, 0.22);
}