/* 
Theme Name: Elegant Services 2.0
Theme URI: https://elegantservices.ae/
Description: Elegant Services 2.0 is a child theme of Hello Elementor built by Top Tier Digital Marketing
Author: Top Tier Digital Marketing
Author URI: https://toptierdigitalmarketing.com/
Template: hello-elementor
Version: 1.0.0
Text Domain: elegantservices	
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/


/* =========================================
   ELEGANT SERVICES
   RESPONSIVE TYPOGRAPHY SYSTEM
========================================= */

:root {
  /* FONT FAMILY */
  --font-primary: inherit;

  /* DISPLAY */
  --fs-display: clamp(2.25rem, 3.75vw, 3.375rem); /*  56px/36px  */

  /* HEADINGS */
  --fs-h1: var(--fs-display);
  --fs-h2: clamp(1.75rem, 2.5vw, 2.25rem); /*  36px/28px  */
  --fs-h3: clamp(1.5rem, 2.1vw, 1.875rem); /*  30px/24px  */
  --fs-h4: clamp(1.25rem, 1.7vw, 1.5rem); /*  24px/20px     */
  --fs-h5: clamp(1.125rem, 1.4vw, 1.25rem); /*  20px/18px  */
  --fs-h6: clamp(1rem, 1.2vw, 1.125rem); /*  18px/16px  */

  /* BODY TEXT */
  --fs-body-xl: clamp(1.125rem, 1.4vw, 1.25rem); /*  20px/18px  */
  --fs-body-lg: clamp(1rem, 1.25vw, 1.125rem); /*  18px/16px  */
  --fs-body: clamp(0.9375rem, 1.1vw, 1rem); /*  16px/15px  */
  --fs-body-sm: 0.875rem; /*  14px/14px  */

  /* SUPPORTING TEXT */
  --fs-block-head: clamp(1.125rem, 1.53vw, 1.375rem); /*  22px/16px  */
  --fs-stat: clamp(1.5rem, 2.1vw, 2rem); /*  32px/18px  */
  --fs-caption: 0.75rem; /*  12px/12px  */
  --fs-overline: 0.75rem; /* 12px/12px */

  /* FONT WEIGHTS */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* LINE HEIGHTS */
  --lh-display: 1.2;
  --lh-heading: 1.18;
  --lh-subheading: 1.3;
  --lh-body: 1.4;
  --lh-compact: 1.4;

  /* LETTER SPACING */
  --ls-tight: -0.035em;
  --ls-heading: -0.025em;
  --ls-normal: 0;
  --ls-wide: 0.06em;

}

/* =========================================
   BASE TYPOGRAPHY
========================================= */

body {
  font-family: var(--font-primary);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
}

/* =========================================
   DISPLAY & HEADINGS
========================================= */

.text-display {
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tight);
}

h1, .h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tight);
}

h2, .h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}

h3, .h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}

h4, .h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-subheading);
}

h5, .h5 {
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-subheading);
}

h6, .h6 {
  font-size: var(--fs-h6);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-subheading);
}

/* =========================================
   BODY TEXT
========================================= */
.page-heading *{
    font-size: var(--fs-h2) !important;
    font-weight: var(--fw-bold);
  line-height: var(--lh-heading) !important;
}
.text-xl *{
  font-size: var(--fs-body-xl);
  line-height: var(--lh-subheading);
}

.text-large *{
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
}

.text-body *{
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
}

.text-small *{
  font-size: var(--fs-body-sm);
  line-height: var(--lh-compact);
}

.text-caption *{
  font-size: var(--fs-caption);
  line-height: var(--lh-compact);
}

/* =========================================
   EYEBROW / PREHEADING
========================================= */

.preheading .elementor-button-text{
  font-size: var(--fs-body);
  font-weight: var(--fw-bold) ;
  line-height: 1;
  letter-spacing: var(--ls-normal);
  text-transform: uppercase;
}

.heading_desc *{
    font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
}

/* =========================================
   BUTTONS
========================================= */

button,
.button,
.wp-element-button {
    font-size: var( --fs-body-lg);
    line-height: 1;
    font-weight: var(--fw-medium);
}
.button .elementor-button-text{
    font-size: var( --fs-body-lg);
    line-height: 1 !important;
    font-weight: var(--fw-medium);
}
.button.button_secondary .elementor-button-text{
    font-weight: var(--fw-semibold);
}
/* =========================================
   RESPONSIVE ADJUSTMENTS
========================================= */

@media (max-width: 767px) {

  :root {
    --lh-body: 1.6 !important;
    --ls-tight: -0.025em !important;
    --ls-heading: -0.015em !important;
  }

}


.main_nav .menu-item.current-menu-item a{
    font-weight: 600 !important;    
    text-decoration: underline;
    text-decoration-color: #A843CC;
    text-underline-offset: 4px;
}
.elementor-nav-menu .elementor-item::after{
    display: none;
}
.elementor-button-content-wrapper {
    align-items: center;
}
.elementor-button-icon {
    width: 13px;
    height: 12px;
}
.preheading .elementor-button-icon {
    width: 8px;
    height: 8px;
    margin-bottom: 3px;
}
.highlight{
    background: linear-gradient(100.46deg, #7C3AED 0%, #A855F7 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
}
p:last-child {
    margin-bottom: 0 !important;
}

.steps_image:after {
    content: "";
    background: #000;
    width: 100%;
    height: 100%;
    position: absolute;
    background: linear-gradient(180.04deg, rgba(0, 0, 0, 0) 0.03%, #000000 93.55%);
}
.steps_image{
    overflow: hidden;
}
.elementor-widget-n-accordion .e-n-accordion-item[open]>.e-n-accordion-item-title .e-n-accordion-item-title-icon span>svg {
    fill: transparent;
}
.elementor-widget-n-accordion .e-n-accordion-item:not([open]):hover>.e-n-accordion-item-title .e-n-accordion-item-title-icon span>svg {
    fill: transparent;
}
.process_floating_number {
    position: relative;
    left: -48px;
}
.industries_item{
    overflow: hidden;
}
.circle_arrow{
    box-shadow: 0px 2px 4px 0px #00000040;
    width: 45px;
    height: 45px;
    line-height: 45px;
    border-radius: 100%;
}
.industries_item:hover .circle_arrow{
    background: linear-gradient(180deg, #A843CC 0%, #7C3AED 100%);
    box-shadow: 0px 10px 15px -5px #A843CC4D;
    display: inline-block;
}
.industries_item:hover .circle_arrow svg{
    fill: #ffffff;
}
.industries_item:hover .circle_arrow svg path{
    stroke: #ffffff;
}
.faq .e-n-accordion-item {
    border: 1px solid #E3C4FF;
    border-radius: 10px;
}
.footer_header {
    position: relative;
}
.footer_header h6:after {
    content: "";
    width: 37px;
    height: 1px;
    background: #ffffff;
    position: absolute;
    bottom: -6px;
    left: 0;
}

.accordion_icon1 .e-n-accordion-item-title-header,
.accordion_icon2 .e-n-accordion-item-title-header{
    align-items: center;
    gap: 20px;
}
.accordion_icon1 .e-n-accordion-item-title-header:before{
    content: "";
    background-image: url('/wp-content/uploads/2026/10/box.png');
    width: 40px;
    height: 40px;
    position: relative;
    background-repeat: no-repeat;
}
.accordion_icon2 .e-n-accordion-item-title-header:before{
    content: "";
    background-image: url('/wp-content/uploads/2026/10/gear.png');
    width: 40px;
    height: 40px;
    position: relative;
    background-repeat: no-repeat;
}
.client_reviews .swiper-slide.swiper-slide-active .client_review_item{
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #E3C4FF;
    box-shadow: 0px 10px 15px -3px rgba(167.99999999999986, 67.00000000000001, 204, 0.30196078431372547);
}
.about_team .elementor-swiper-button.elementor-swiper-button {
    box-shadow: 0px 2px 4px 0px #00000040;
    width: 45px;
    height: 45px;
    line-height: 45px;
    border-radius: 100%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: #fff;
}
.about_team .elementor-swiper-button.elementor-swiper-button svg {
    text-align: center;
    width: 16px !important;
    margin: 0 auto;
}
.about_team .elementor-swiper-button-prev svg {
    transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
}
.about_team .elementor-swiper-button.elementor-swiper-button:hover{
	background: linear-gradient(180deg, #A843CC 0%, #7C3AED 100%);
    box-shadow: 0px 10px 15px -5px #A843CC4D;
    display: inline-block;
}
.about_team .elementor-swiper-button.elementor-swiper-button:hover svg path{
	stroke: #fff;
}
.mission_vission:hover {
    transform: translateY(-4px);
	-moz-transform: translateY(-4px);
	-webkit-transform: translateY(-4px);
	transition: transform 0.2s ease-out;
	-moz-transition: transform 0.2s ease-out;
	-webkit-transition: transform 0.2s ease-out;
}
.elementor-button .elementor-button-icon {
    transform: translateX(0);
	-moz-transform: translateX(0);
	-webkit-transform: translateX(0);
		transition: transform 0.2s ease-out;
	-moz-transition: transform 0.2s ease-out;
	-webkit-transition: transform 0.2s ease-out;
	
}
.elementor-button:hover .elementor-button-icon {
    transform: translateX(5px);
	-moz-transform: translateX(5px);
	-webkit-transform: translateX(5px);
		transition: transform 0.2s ease-out;
	-moz-transition: transform 0.2s ease-out;
	-webkit-transition: transform 0.2s ease-out;
	
}
.preheading .elementor-button:hover .elementor-button-icon {
    transform: translateX(0);
	-moz-transform: translateX(0);
	-webkit-transform: translateX(0);
		transition: transform 0.2s ease-out;
	-moz-transition: transform 0.2s ease-out;
	-webkit-transition: transform 0.2s ease-out;
	
}
.product_support{
    overflow: hidden;
}
.product_support:hover{
    border: 1px solid #AE5FF9 !important;
    box-shadow: 0px 6px 15px 1px #9737EE1A !important;
}
.product_support .elementor-button-icon {
    box-shadow: 0px 3px 10px -2px #00000040;
    padding: 8px;
    border-radius: 100%;
    width: 24px !important;
    height: 24px !important;
}
.product_support  .elementor-button:hover .elementor-button-icon{
    box-shadow: rgba(168, 67, 204, 0.3) 0px 10px 15px -5px;
    background: linear-gradient(rgb(168, 67, 204) 0%, rgb(124, 58, 237) 100%);
}
.product_support  .elementor-button:hover .elementor-button-icon svg{
        width: 24px !important;
    height: 24px !important;
}
.product_support  .elementor-button:hover .elementor-button-icon svg path{
    stroke: #ffffff;
}
.elementor-swiper-button {
    border-radius: 100% !important;
}
.elementor-swiper-button:hover {
    border-radius: 100%;
    box-shadow: rgba(168, 67, 204, 0.3) 0px 10px 15px -5px;
    background: linear-gradient(rgb(168, 67, 204) 0%, rgb(124, 58, 237) 100%);
}
.elementor-swiper-button:hover svg rect {
    fill: transparent;
    border-radius: 100%;
}
.elementor-swiper-button:hover svg path {
    stroke: #fff !important;
}
.work_item{
    position: sticky;
    top: 10%;
}
.work_item.is-stuck{
    background-color: #FCF8FF !important;
    box-shadow: 0px 10px 15px -3px rgba(167.99999999999986, 67.00000000000001, 204, 0.30196078431372547) !important;
}

.footer_icons .elementor-icon{
    transform: translateY(0);
    -moz-transform: translateY(0);
    -webkit-transform: translateY(0);
        transition: transform 0.2s ease-out;
    -moz-transition: transform 0.2s ease-out;
    -webkit-transition: transform 0.2s ease-out;
    box-shadow: none;
}
.footer_icons .elementor-icon:hover{
    transform: translateY(-3px);
    -moz-transform: translateY(-3px);
    -webkit-transform: translateY(-3px);
        transition: transform 0.2s ease-out;
    -moz-transition: transform 0.2s ease-out;
    -webkit-transition: transform 0.2s ease-out;
    box-shadow: 0px 1px 4px 1.5px #00000033;
    opacity: 1;
}
.footer_icons .elementor-icon:hover svg path{
    fill: #A855F7 !important;
}

.industries_carousel .swiper-slide .circle_arrow,
.industries_carousel .swiper-slide.swiper-slide-next .circle_arrow{
    display: none !important;
}
.industries_carousel .swiper-slide.swiper-slide-active .circle_arrow,
.industries_carousel .swiper-slide.swiper-slide-next .circle_arrow{
    display: block !important;
}
.team_position h4 {
    position: relative;
}
.team_position h4:after {
    content: "";
    width: 33px;
    background: #8241D5;
    height: 3px;
    position: absolute;
    left: 0;
    bottom: -10px;
}


@media (max-width: 1024px) {
    .accordion_icon1 .e-n-accordion-item-title-header, .accordion_icon2 .e-n-accordion-item-title-header {
        gap: 10px;
    }
}
@media (max-width: 767px) {
    .title_head h1 br{
        display: none;
    }
    .preheading .elementor-button-text {
        text-align: left;
    }
    .accordion_icon1 .e-n-accordion-item-title-header, .accordion_icon2 .e-n-accordion-item-title-header {
        gap: 10px;
    }
    .accordion_icon1 .e-n-accordion-item-title-header:before,
    .accordion_icon2 .e-n-accordion-item-title-header:before {
        width: 58px;
    }
    .with_br br{
        display: none;
    }
}