/*======================================
Theme Name: Axis Business & Consulting Divi Child Theme
Theme URI: http://axis.elvarstudios.com/
Description: Axis is a A clean, scalable, and conversion-focused WordPress theme designed for agencies, startups, and businesses that demand performance and flexibility. This theme is built to help you launch professional websites faster, without compromising on performance or design quality.
Author: Elvarstudios
Author URI: https://elvarstudios.com/
Author Email: elvarstudios26@gmail.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
======================================*/

.button::after {
	content: "➜";
background: rgba(255,255,255,0.2);
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
margin-left: 10px;
font-size: 14px;
} 

/* Target Divi dropdown menu */
.et-menu li ul.sub-menu {
  min-width: 260px; /* control dropdown width */
  width: 260px;
}

/* Make each item full width */
.et-menu li ul.sub-menu li {
  width: 100%;
}

/* Make links fill the full width */
.et-menu li ul.sub-menu li a {
  display: block;
  width: 100%;
  padding: 12px 20px;
  box-sizing: border-box;
}

/* Base link styling */
.et-menu li ul.sub-menu li a {
  position: relative;
  color: #fff;
  /*text-transform: uppercase;*/
}

/* Underline effect */
.et-menu li ul.sub-menu li a::after {
  content: "";
  position: absolute;
  left: 20px;
  bottom: 8px;
  width: 0;
  height: 2px;
  background-color: #ff6a3d;
  transition: width 0.3s ease;
}

/* Hover animation */
.et-menu li ul.sub-menu li a:hover::after {
  width: calc(100% - 40px); /* respects padding */
}

.et-menu li ul.sub-menu li a {
  white-space: nowrap;
}
  
/* Remove weird spacing */
.et-menu li ul.sub-menu li {
  margin: 0;
  padding: 0;
}

/* Smooth hover background */
.et-menu li ul.sub-menu li a:hover {
  background-color: rgba(255,255,255,0.05);
}



/* Base link */
.et-menu li ul.sub-menu li a {
  position: relative;
  padding-right: 30px; /* space for icon */
  transition: all 0.3s ease;
}

/* Icon (hidden initially) */
.et-menu li ul.sub-menu li a::before {
  content: "→"; /* you can change this */
  position: absolute;
  right: 20px;
  opacity: 0;
  transform: translateX(-5px);
  color: #62d9c5;
  transition: all 0.3s ease;
}

/* Hover effect */
.et-menu li ul.sub-menu li a:hover::before {
  opacity: 1;
  transform: translateX(0);
}
  
.et-menu li ul.sub-menu li a {
  transition: all 0.3s ease;
}

.et-menu li ul.sub-menu li a:hover {
  padding-left: 25px;
  transition: all 0.3s ease;
}