/*
Theme Name: SYT Plus (صيت)
Theme URI: https://syt-inf.com/
Author: SYT Marketing Agency
Author URI: https://syt-inf.com/
Description: Custom WordPress theme for SYT Plus Marketing Agency, featuring premium Arabic typography, dynamic animated navigation, interactive sliders, stats counter, custom case studies, and responsive RTL layout.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: syt-theme
Domain Path: /languages
Tags: rtl-language-support, custom-menu, featured-images, flexible-header, full-width-template, theme-options
*/

@font-face {
  font-family: "TheYearOfHandicrafts";
  src: url("./assets/fonts/alfont_com_TheYearofHandicrafts-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TheYearOfHandicrafts";
  src: url("./assets/fonts/alfont_com_TheYearofHandicrafts-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TheYearOfHandicrafts";
  src: url("./assets/fonts/alfont_com_TheYearofHandicrafts-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TheYearOfHandicrafts";
  src: url("./assets/fonts/alfont_com_TheYearofHandicrafts-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --main-bg: #fffcf4;
  --primary-color: #eee65a;
  --secondary-color: #2f0b60;
  --dark-color: #242424;
  --black-color: #1f1f1f;
  --foreground-color: #ffffff;
  --page-bg: var(--main-bg);
  --text-color: var(--dark-color);
}

* {
  box-sizing: border-box;
  font-family: "TheYearOfHandicrafts", sans-serif;
}

html,
body {
  margin: 0;
  padding: 0;
  color: var(--text-color);
  font-family: "TheYearOfHandicrafts", sans-serif;
  background-color: var(--main-bg);
  direction: rtl;
  overflow-x: hidden;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.dark-theme {
  background-color: var(--dark-color);
  color: #ffffff;
}

.light-theme {
  background-color: var(--main-bg);
  color: var(--dark-color);
}

a {
  color: inherit;
  text-decoration: none;
}


/* style of single service */
/* ---------- buttons ---------- */
.sy-btn .elementor-button{transition:all .35s ease;}
.sy-btn .elementor-button:hover{background:#EEE65A!important;color:#451883!important;box-shadow:0 12px 30px rgba(238,230,90,.35);}
.sy-pulse .elementor-button{animation:syPulse 2.6s ease-out infinite;}
@keyframes syPulse{0%{box-shadow:0 0 0 0 rgba(238,230,90,.55)}70%{box-shadow:0 0 0 18px rgba(238,230,90,0)}100%{box-shadow:0 0 0 0 rgba(238,230,90,0)}}
/* ---------- header ---------- */
.sy-phone{display:inline-flex;align-items:center;gap:10px;height:49px;padding:0 6px 0 18px;border-radius:49px;background:#EEE65A;color:#000;font-size:18px;letter-spacing:1.4px;text-decoration:none;direction:ltr;transition:transform .3s, box-shadow .3s;}
.sy-phone span.ic{width:38px;height:38px;border-radius:50%;background:#333231;color:#EEE65A;display:flex;align-items:center;justify-content:center;font-size:16px;animation:syRing 3s ease-in-out infinite;}
.sy-phone:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.12);}
@keyframes syRing{0%,80%,100%{transform:rotate(0)}84%{transform:rotate(-18deg)}88%{transform:rotate(18deg)}92%{transform:rotate(-12deg)}96%{transform:rotate(12deg)}}
.sy-menu{position:relative;}
.sy-menu summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:12px;transition:background .3s;}
.sy-menu summary::-webkit-details-marker{display:none;}
.sy-menu summary:hover{background:rgba(0,0,0,.04);}
.sy-burger{width:30px;height:20px;position:relative;}
.sy-burger i{position:absolute;right:0;height:3px;border-radius:3px;background:#2C2C2C;transition:all .35s ease;}
.sy-burger i:nth-child(1){top:0;width:100%}.sy-burger i:nth-child(2){top:8px;width:70%;background:#56D4E6}.sy-burger i:nth-child(3){top:16px;width:100%}
.sy-menu[open] .sy-burger i:nth-child(1){top:8px;transform:rotate(45deg)}
.sy-menu[open] .sy-burger i:nth-child(2){opacity:0;width:0}
.sy-menu[open] .sy-burger i:nth-child(3){top:8px;transform:rotate(-45deg)}
.sy-menu ul{position:absolute;top:64px;right:0;width:313px;margin:0;padding:12px 20px;list-style:none;background:#fff;border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.12);z-index:99;animation:syDrop .35s ease both;}
.sy-menu li{border-bottom:1px solid rgba(0,0,0,.15);}
.sy-menu li:last-child{border-bottom:0;}
.sy-menu li a{display:block;padding:10px 0;color:rgba(0,0,0,.8);font-size:20px;text-decoration:none;transition:padding .3s,color .3s;}
.sy-menu li a:hover{padding-right:12px;color:#451883;}
@keyframes syDrop{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
/* ---------- hero ---------- */
.sy-hero{position:relative;overflow:hidden;}
.sy-hero::before{content:"Mix";position:absolute;top:-40px;left:50%;transform:translateX(-50%);font-size:600px;font-weight:700;line-height:1;color:rgba(47,14,92,.41);filter:blur(42px);pointer-events:none;animation:syMix 9s ease-in-out infinite;}
.sy-hero::after{content:"";position:absolute;width:430px;height:176px;top:28%;right:4%;border-radius:177px;background:#D9D9D9;opacity:.35;filter:blur(100px);pointer-events:none;animation:syBlob 12s ease-in-out infinite alternate;}
.sy-hero > .e-con-inner, .sy-hero > *{position:relative;z-index:1;}
@keyframes syMix{0%,100%{transform:translateX(-50%) scale(1);opacity:.9}50%{transform:translateX(-50%) scale(1.08);opacity:1}}
@keyframes syBlob{from{transform:translate(0,0)}to{transform:translate(-120px,80px)}}
@media(max-width:1024px){.sy-hero::before{font-size:340px}}
@media(max-width:767px){.sy-hero::before{font-size:200px;top:20px}}
.sy-float{animation:syFloat 5s ease-in-out infinite;}
@keyframes syFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
/* ---------- how we work cards ---------- */
.sy-card{border-radius:12px;transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s;box-shadow:0 20px 45px rgba(0,0,0,.10);}
.sy-r1{transform:rotate(7deg)}.sy-r2{transform:rotate(-7deg)}.sy-r3{transform:rotate(6deg)}.sy-r4{transform:rotate(-10deg)}
.sy-card:hover{transform:rotate(0) translateY(-18px) scale(1.03);box-shadow:0 35px 70px rgba(0,0,0,.18);z-index:5;}
.sy-card .sy-num .elementor-heading-title{line-height:1;transition:transform .5s;}
.sy-card:hover .sy-num .elementor-heading-title{transform:scale(1.12) rotate(-6deg);}
.sy-sticker img{filter:drop-shadow(0 12px 18px rgba(0,0,0,.18));animation:syWiggle 4.5s ease-in-out infinite;}
.sy-card:hover .sy-sticker img{animation-duration:1.2s;}
@keyframes syWiggle{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg) translateY(-6px)}}
@media(max-width:1024px){.sy-r1,.sy-r2,.sy-r3,.sy-r4{transform:rotate(0)}}
/* ---------- footer ---------- */
.sy-pill .elementor-heading-title{display:inline-block;background:#fff;padding:5px 25px;border-radius:12px 12px 0 12px;box-shadow:0 6px 14px rgba(0,0,0,.05);}
.sy-links .elementor-icon-list-item a{transition:transform .3s,color .3s;display:inline-flex;}
.sy-links .elementor-icon-list-item a:hover{transform:translateX(-6px);color:#451883!important;}
.sy-links .elementor-icon-list-item:hover .elementor-icon-list-text{color:#451883!important;}
.sy-deco img{box-shadow:0 7px 15px rgba(0,0,0,.10),0 27px 27px rgba(0,0,0,.09),0 61px 37px rgba(0,0,0,.05);transition:transform .5s;}
.sy-t1 img{transform:rotate(-14deg)}.sy-t2 img{transform:rotate(-15deg)}.sy-t3 img{transform:rotate(12deg);border:10px solid #fff;border-radius:22px}
.sy-deco:hover img{transform:rotate(0) scale(1.08);}
.sy-social .elementor-social-icon{transition:transform .3s, background .3s;}
.sy-social .elementor-social-icon:hover{transform:translateY(-6px) rotate(-8deg);background:#451883!important;}

/* header: menu label with cyan diamond */
.sy-menu summary .sy-label{font-size:20px;color:#2C2C2C;font-weight:700;}
.sy-diamond{width:26px;height:26px;background:#56D4E6;transform:rotate(45deg);border-radius:4px;transition:transform .5s;}
.sy-menu:hover .sy-diamond,.sy-menu[open] .sy-diamond{transform:rotate(225deg);}
.sy-menu ul ul{position:static;width:auto;box-shadow:none;padding:4px 16px 8px 0;animation:none;}
.sy-menu ul ul li{border:0;}
.sy-menu ul ul li a{font-size:16px;padding:6px 0;color:rgba(0,0,0,.65);}
.sy-menu .sy-sub > span{display:block;padding:10px 0;font-size:20px;color:rgba(0,0,0,.8);}
/* whatsapp pill that expands to show the number */
.sy-wa{display:inline-flex;align-items:center;height:49px;border-radius:49px;background:#EEE65A;overflow:hidden;text-decoration:none;direction:ltr;
  max-width:49px;transition:max-width .6s cubic-bezier(.2,.8,.2,1), box-shadow .3s;box-shadow:0 0 0 0 rgba(238,230,90,.6);animation:syPulse 2.8s ease-out infinite;}
.sy-wa .ic{flex:0 0 49px;height:49px;border-radius:50%;background:#333231;color:#EEE65A;display:flex;align-items:center;justify-content:center;font-size:24px;}
.sy-wa .num{padding:0 18px 0 12px;white-space:nowrap;color:#000;font-size:20px;letter-spacing:1.4px;}
.sy-wa:hover{max-width:240px;}
/* hero */
.sy-hero::before{color:rgba(47,14,92,.41);}
.sy-hero-bg{position:absolute!important;inset:0;z-index:0!important;border-radius:20px;overflow:hidden;opacity:.9;pointer-events:none;}
/* cards: textures blended like Figma */
.sy-c1,.sy-c4{background-blend-mode:overlay,normal;}
.sy-c2{background-blend-mode:color-burn,normal;}
.sy-c3{background-blend-mode:overlay,normal;}
.sy-line{height:2px;border-radius:2px;margin:6px 0 10px;transform-origin:right;transform:scaleX(0);transition:transform 1s cubic-bezier(.2,.8,.2,1) .4s;}
.sy-card.animated .sy-line,.sy-card:hover .sy-line{transform:scaleX(1);}
.sy-line.light{background:rgba(255,255,255,.9);} .sy-line.dark{background:rgba(0,0,0,.85);}
.sy-card .sy-sticker img{max-height:190px;width:auto;}
/* footer */
.sy-footer{position:relative;overflow:hidden;}
.sy-wave{position:absolute!important;left:-6%;right:-6%;bottom:-40px;height:60%;z-index:0!important;pointer-events:none;background-size:100% 100%;background-repeat:no-repeat;animation:syWave 10s ease-in-out infinite alternate;}
@keyframes syWave{from{transform:translateX(0)}to{transform:translateX(-3%)}}
.sy-footer > .e-con-inner > *:not(.sy-wave), .sy-footer > *:not(.sy-wave){position:relative;z-index:1;}
.sy-badges img{height:42px;width:auto;transition:transform .3s;}
.sy-badges .elementor-widget-image:hover img{transform:translateY(-4px) scale(1.06);}
.sy-t4 img{transform:rotate(12deg);border:10px solid #fff;border-radius:22px;}