/*
Theme Name: The Lustry Theme
Author: shatha alharthie
Description: Pixel-perfect dark luxury creative studio homepage.
Version: 1.2.0
Text Domain: thelustrytheme
*/



        body{
            font-family: "Geist", Arial, sans-serif;
            font-weight: 400;
            background-color: #000;
            direction: ltr;
        }
        html, body{
          margin: 0;
          padding: 0;
          width: 100%;
          height: 100%;
          
        }
        /* Geist Regular */
        @font-face{
          font-family: "Geist-Regular";
          src: url("assets/fonts/geist-regular.ttf") format("truetype");
          font-weight: 400;
          font-style: normal;
          font-display: swap;
        }

        /* Geist Medium */
        @font-face{
          font-family: "Geist-Medium";
          src: url("assets/fonts/geist-medium.ttf") format("truetype");
          font-weight: 500;
          font-style: normal;
          font-display: swap;
        }

        /* Geist Bold */
        @font-face{
          font-family: "Geist-Bold";
          src: url("assets/fonts/geist-bold.ttf") format("truetype");
          font-weight: 700;
          font-style: normal;
          font-display: swap;
        }

        /* Geist Light */
        @font-face{
          font-family: "Geist-Light";
          src: url("assets/fonts/geist-light.ttf") format("truetype");
          font-weight: 300;
          font-style: normal;
          font-display: swap;
        }

        /* Geist ExtraLight */
        @font-face{
          font-family: "Geist-ExtraLight";
          src: url("assets/fonts/geist-extralight.ttf") format("truetype");
          font-weight: 300;
          font-style: normal;
          font-display: swap;
        }


        main{
            background-size: cover;
            text-align: center;
        }

        .hero{
            object-fit: cover;
            width: 100%;
            height: 100%;
            display: block;
        }
        .overlay{
          position: absolute;
          inset: 0;
          background: rgba(0,0,0,0.65);
        }

        .hero-section{
         position: relative; 
         width:100%;
         height: 100vh; 
         overflow: hidden;
        }
        .hero-inner{
            position: absolute;
            top: 46%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
        }

        .main-menu{
            border-top:1px solid rgb(251, 251, 251);
            border-left:1px solid rgb(251, 251, 251);
            border-right:1px solid rgb(251, 251, 251);
            border-bottom:2px none;
            padding: 15px 25px;
            margin: 0px 30px;
            border-radius: 50px;
            width: 650px;
            height: 15px;
            justify-content: center;
            background: rgba(20, 0, 40, 0.55);
            text-align: center;
            display: flex;
            align-items: center;
        }
        nav a{
            text-decoration: none;
            color: #fff;
            font-size: 18px;
            padding: 25px;
        }
        .site-header{
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          z-index: 9999;                 /* أعلى من الهيرو */
          background: rgba(0,0,0,0.02);
          backdrop-filter: blur(10px);
          padding: 15px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-family: "Geist-Light";
        }
        .hero-inner h1{
            font-family: "Geist-Light";
            font-size: 70px;
            margin: 10px 0;
        }
        .hero-inner p{
            font-family: "Geist-ExtraLight";
            font-size: 20px;
            margin: 10px 0;
        }
        .header-right{
            display: flex;
            align-items: center;
            gap: 50px;
            margin-right: 40px;
        }
        .logo{
            width: 180px;
            display: inline;
            align-items: center;
            justify-self: start;
            padding: 10px;
            margin-left: 40px;
        }

        .select-language{
          background: transparent;
          color: #fff;
          border: none;
          font-size: 15px;
        }

        .select-language option{
          background: #0b0b0b;
          color: #fff;
        }
        

        .btnCall{
            background-color: #814AC8;
            color: #fff;
            font-size: 15px;
            border: none;
            border-radius: 90px;
            height: 45px;
            padding: 0px 30px;
        }
        .btnGetIn{
            background-color: #814AC8;
            color: #fff;
            font-size: 15px;
            border: none;
            border-radius: 90px;
            height: 35px;
            padding: 5px 10px;
        }
        .btnViewServices{
            background-color: transparent;
            border-top: 1px solid #fff;
            border-bottom: 1px solid #fff;
            border-right: 1px solid #fff;
            border-left: none;
            color: #fff;
            font-size: 15px;
            border-radius: 90px;
            height: 35px;
            padding: 5px 10px;
            margin-left: 18px;
        }
        .btnBlack{
            background-color: #000;
            color: #fff;
            font-size: 15px;
            border-right: 1px solid #fff;
            border-top: 1px solid #fff;
            border-bottom: 1px solid #fff;
            border-left: none;
            border-radius: 90px;
            height: 40px;
            width: auto;
            padding: 5px 10px;
        }
        .first-word{
          font-family: "Geist-Light";
          display: inline-block;
          border: 1px solid rgba(255,255,255,0.7);  /* هذا يعطي يمين منحني طبيعي */
          border-radius: 90px;
          color:#fff;
          padding: 2px 10px 2px 0;
          margin: 0px 0px ;
        }
        .first-word p {
            font-size: 15px;
            margin: 0px;
        }
        .first-word mark{
            font-size: 15px;
            color: #fff;
            background: #814AC8;
            padding: 3px 7px;
            margin-right: 10px;
            border-radius: 90px;
        }

        .section-info{
            width: 100%;
            height: 100vh;
            color:#fff;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-family: "Geist-Light";
        }
        .section-info h2{
            font-size: 60px;
            margin-top: 40px;
        }
        .section-info p{
            font-family: "Geist-ExtraLight";
            font-size: 18px;
            margin-top: -15px;
            margin-bottom: 90px;
        }
        .section-info h3{
            font-size: 18px;
            margin-bottom: 50px;
        }

        /*bar logos*/
        .bar-logos{
            overflow: hidden;
            width: 80%;
            position: relative;
        }
        .bar-logos::before,
        .bar-logos::after{
            content: "";
            position: absolute;
            top: 0;
            width: 100px;
            height: 100%;
            z-index: 2;
            pointer-events: none;
        }
        .bar-logos::before{
            left: 0;
            background: linear-gradient(to right, #000 0%, rgba(0,0,0,0) 100%);
        }
        .bar-logos::after{
            right: 0;
            background: linear-gradient(to left, #000 0%, rgba(0,0,0,0) 100%);
        }

        .track{
            display: flex;
            align-items: center;
            gap: 50px;
            width: max-content;
            animation: scrollLTR 20s linear infinite;
            will-change: transform;
        }
        @keyframes scrollLTR{
            from {transform: translateX(-50%);}
            to {transform: translateX(0);}
        }
        .track img{
            width: 180px;
            height: auto;
            flex: 0 0 auto;
        }

        .track:hover{
            animation-play-state: paused;
        }

        .box-wwa{
          border: 1px solid rgba(255,255,255,0.2);
          width: 320px;
          height: 140px;
          border-radius: 8px;
          padding: 10px;
          background: 
          linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)),
          linear-gradient(to top left, #3b1f6f 0%, #000 70%);
        }
        .box-wwa h5{
            font-size: 25px;
            margin-top: 10px;
        }
        .box-wwa h5 img{
            width: 30px;
            height: auto;
            margin-right: 10px;
        }
        .box-wwa p{
            font-size: 17px;
            margin-top: -25px;
            margin-left: 20px;
            margin-right: 50px;
            margin-bottom: 30px;
            text-align: left;
        }

        .content-box-wwa{
            display: flex;
            gap: 20px;
        }

        .section-services{
            width: 80%;
            margin: 0 auto;
        }
        .service-row{
            display: flex;
            gap: 50px;
            align-items: center;
            margin-bottom: 50px;
            align-items: stretch;
        }
        .service-row.reverse{
            flex-direction: row-reverse;
        }

        .content-cell{
            width: 50%;
            display: flex;
            flex-direction: column;
            text-align: left;
            color: #fff;
        }
        .content-cell h5{
            font-size: 30px;
            margin-bottom: 5px;
            margin-top: 20px;
        }
        .content-cell button{
            width: 40%;
        }
        .img-cell{
          border: 1px solid rgba(255,255,255,0.2);
          width: 50%;
          height: 300px;
          border-radius: 8px;
          padding: 10px;
          background: 
          linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)),
          linear-gradient(to top left, #3b1f6f 0%, #000 70%);
        }

        .contact-row{
            width: 78%;
            display: flex;
            gap: 35px;
        }
        
        .contact-cell{
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: flex-start;
          text-align: left;

          border: 1px solid rgba(255,255,255,0.2);
          width: 50%;
          height: 120px;
          border-radius: 8px;
          padding: 20px;
          background: 
          linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)),
          linear-gradient(to top left, #3b1f6f 0%, #000 70%);
        }
        .contact-cell p{
            margin: 10px;
            margin-left: 50px;
            font-size: 25px;
        }
        .contact-cell p:first-child{
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 10px;
        }
        .contact-cell img{
            width: 30px;
            height: auto;
        }
        
        .contact-card{
            display: flex;
            justify-content: center;
            justify-self: center;
            width: 75%;
            border: 1px solid rgba(255,255,255,0.2);
            height: auto;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 100px;
            background: 
            linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)),
            linear-gradient(to top left, #3b1f6f 0%, #000 70%);
        }
        /* هنا الترتيب الحقيقي */
        .contact-grid{
          display: grid;
          grid-template-columns: 1fr 1fr; /* عمودين */
          gap: 18px 22px;                /* row gap / column gap */
          width: 100%;
        }

        /* كل حقل */
        .field{
          display: flex;
          flex-direction: column;
          gap: 10px;
          text-align: left;
        }

        /* حقول بعرض كامل */
        .field.full{
          grid-column: 1 / -1;
        }

        /* تصميم الليبل */
        .field label{
          color: rgba(255,255,255,0.85);
          font-size: 18px;
        }

        /* تصميم الانبوت */
        .field input,
        .field textarea{
          width: auto;
          padding: 16px 18px;
          border-radius: 8px;
          border: 1px solid rgba(255,255,255,0.14);
          background: rgba(0,0,0,0.45);
          color: #fff;
          outline: none;
          font-size: 18px;
        }

        /* placeholder */
        .field input::placeholder,
        .field textarea::placeholder{
          color: rgba(255,255,255,0.45);
        }

        /* الفوكس */
        .field input:focus,
        .field textarea:focus{
          border-color: rgba(129,74,200,0.75);
          box-shadow: 0 0 0 3px rgba(129,74,200,0.18);
        }

        /* textarea */
        .field textarea{
          min-height: 140px;
          resize: vertical;
        }

        /* زر الإرسال */
        .btn-submit{
          grid-column: 1 / -1;
          height: 56px;
          border: none;
          border-radius: 10px;
          background: #814AC8;
          color: #fff;
          font-size: 18px;
          cursor: pointer;
        }

        .footer-content{
            background:
            /* تعتيم خفيف فوق كل شيء */
            linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)),
            /* اللون يبدأ من فوق بالنص ويتلاشى للأسود */
            radial-gradient(700px 260px at 50% 0%,
              rgba(59,31,111,0.95) 0%,
              rgba(59,31,111,0.55) 35%,
              rgba(0,0,0,0.95) 75%,
              #000 100%
            );
        } 
         .footer-grid{
          width: 90%;
          margin: 0 auto;
          display: grid;
          grid-template-columns: repeat(12, 1fr);
          gap: 40px;
          padding: 40px 0;
          color: #fff;
        }

        /* العمود الأول */
        .footer-col.footer-brand-col{ 
          grid-column: span 6;
          text-align: left;         /* مهم */
        }

        /* الأعمدة الثلاثة */
        .footer-col.footer-services{ grid-column: span 2; }
        .footer-col.footer-links{ grid-column: span 2; }
        .footer-col.footer-socials{ grid-column: span 2; }
      
        .footer-col h4{
            margin: 0 0 16px 0;
            font-size: 16px;
            font-family: "Geist-Medium";
        }
        .footer-col a{
          display: block;
          text-decoration: none;
          color: rgba(255,255,255,0.75);
          margin: 10px 0;
          font-size: 14px;
        }

        .footer-col a:hover{
          color: #fff;
        }
        
        /* اللوقو داخل الفوتر */
        .footer-logo{
          width: 180px;
          height: auto;
          display: block;
          margin: 0 0 18px 0;
        }

        /* صندوق الاشتراك */
        .content-subscribe{
          display: flex;             /* بدل inline-flex */
          align-items: center;
          gap: 10px;
          border: 1px solid rgba(255,255,255,0.5);
          padding: 6px;
          border-radius: 10px;
          width: max-content;        /* يبقى على قد المحتوى */
        }

        .input-email{
          width: 220px;
          border: none;
          background: transparent;
          color: #fff;
          outline: none;
        }

        .btnSubscribe{
          border: none;
          background: #814AC8;
          color: #fff;
          padding: 10px 18px;
          border-radius: 8px;
          cursor: pointer;
        }
        .footer-brand-col label{
          display: block;
          margin-bottom: 15px;   /* الفراغ تحت الليبل */
        }

        .footer-bottom{
          width: 100%;
          margin-top: 30px;
        }
        
        .footer-divider{
          width: 100%;
          height: 1px;
          background: rgba(255,255,255,0.18);
        }
        
        .footer-copy{
          width: 90%;
          margin: 16px auto 0;
          color: rgba(255,255,255,0.7);
          font-size: 14px;
          text-align: center;
          padding-bottom: 22px; /* مسافة تحت الكوبي رايت */
        }

        /* Force LTR for header & footer (same as your HTML design) */
.site-header,
.footer-content{
  direction: ltr;
}