/* ========================================================= ARABIC (RTL) VERSION – FULL CSS (Right-aligned layout) ✅ Use on Arabic page with: (or add: and it will work too) ========================================================= */ /* ---------- Font ---------- */ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap'); /* ---------- Root + shared vars ---------- */ :root{ --max-content-width: 1320px; --max-width: 1320px; --text-light:#ffffff; --bg-dark:#000000; /* missing vars in your CSS – defining to avoid conflicts */ --text-main:#ffffff; --text-muted: rgba(255,255,255,.75); --bg-main:#000000; --border: rgba(255,255,255,.15); --border-soft: rgba(255,255,255,.22); --bg-row: #ffffff; --bg-answer: #f6f6f6; --card-bg: rgba(0,0,0,0.86); --card-bg-top: rgba(255,255,255,0.08); --card-bg-bottom: rgba(255,255,255,0.02); --card-border: rgba(255,255,255,0.12); --border-field:#e3e3e3; --btn-dark-top:#111; --btn-dark-bottom:#000; } /* ---------- Base ---------- */ *{box-sizing:border-box;margin:0;padding:0;} html[dir="rtl"], body.rtl{ direction: rtl; } body{ font-family:"Tajawal", sans-serif; background-color:var(--bg-dark); color:var(--text-light); min-height:100vh; text-align:right; } a{color:inherit;text-decoration:none;} /* ========================================================= HEADER ========================================================= */ .site-header{ position:fixed; z-index:50; inset:0 0 auto 0; display:flex; justify-content:center; padding:24px 70px; background:linear-gradient(to bottom, rgba(0,0,0,0.9), rgba(0,0,0,0.4), transparent); } .header-inner{ max-width:var(--max-content-width); width:100%; display:flex; align-items:center; justify-content:space-between; gap:40px; } /* RTL: keep logo on the RIGHT, menu in middle, CTA on LEFT */ html[dir="rtl"] .header-inner, body.rtl .header-inner{ flex-direction: row-reverse; } .logo-area{display:flex;align-items:center;} .logo-mark{ width:140px; height:40px; } .main-nav{flex:1;} .main-nav ul{ list-style:none; display:flex; justify-content:flex-start; gap:42px; font-size:14px; /*/*letter-spacing:0.14em;*/*/ text-transform:uppercase; } /* RTL: nav items align to the RIGHT */ html[dir="rtl"] .main-nav ul, body.rtl .main-nav ul{ justify-content:flex-end; } .header-cta{ flex-shrink:0; display:inline-flex; align-items:center; gap:10px; padding:14px 26px; border:1px solid #838383; background:#000; font-size:13px; /*letter-spacing:0.14em;*/ text-transform:uppercase; white-space:nowrap; border-radius:6px; } .header-cta-icon{ width:18px; height:18px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-size:30px; } .header-cta:hover{background:#fff;color:#000;} /* ========================================================= HERO ========================================================= */ .hero{ position:relative; min-height:100vh; display:flex; justify-content:center; align-items:stretch; background:url("../images/Emaar-com.jpg") center center / cover no-repeat fixed; color:#fff; } .hero::before{ content:""; position:absolute; inset:0; background:linear-gradient( 180deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.3) 45%, rgba(0,0,0,0.85) 100% ); z-index:1; } .hero-inner{ position:relative; z-index:2; max-width:var(--max-content-width); width:100%; padding:120px 70px 70px; display:flex; flex-direction:column; justify-content:center; gap:24px; text-align:right; /* RTL */ align-items:flex-end; /* RTL */ } .hero-logo-row{margin-bottom:10px;} .hero-logo{width:210px;height:56px;} .hero-kicker{ font-size:20px; font-weight:400; margin-bottom:8px; } .hero-title{ max-width:780px; font-size:38px; font-weight:500; line-height:1.22; } .hero-title span{font-weight:700;} .hero-subtitle{ font-size:16px; margin-top:8px; } /* RTL: CTA row sticks to the right */ .hero-cta-row{ margin-top:20px; width:50%; display:flex; justify-content:flex-end; } /* Buttons */ .btn-primary{ display:inline-flex; justify-content:center; align-items:center; padding:18px 42px; border-radius:999px; border:1px solid rgba(255,255,255,0.7); background:transparent; text-transform:uppercase; /*letter-spacing:0.14em;*/ font-size:13px; } .hero-scroll{ margin-top:70px; display:inline-flex; flex-direction:column; align-items:center; gap:16px; font-size:13px; } .hero-scroll-icon{ width:56px; height:92px; border-radius:999px; border:1px solid rgba(255,255,255,0.6); display:inline-flex; align-items:flex-start; justify-content:center; padding-top:20px; } .hero-scroll-icon span{ font-size:18px; animation:bounce 1.3s infinite; } @keyframes bounce{ 0%,100%{transform:translateY(0);opacity:.8;} 50%{transform:translateY(6px);opacity:1;} } /* Binghatti logo wrapper: RTL right on desktop, center on mobile */ .binghatti-logo-wrap{ text-align:right; } @media (max-width:767px){ .binghatti-logo-wrap{ text-align:center; } .binghatti-logo-wrap img{ display:inline-block; } } /* ========================================================= NAV TOGGLE (MOBILE) ========================================================= */ .nav-toggle{ display:none; border:none; background:transparent; width:34px; height:34px; padding:0; cursor:pointer; } .nav-toggle span{ display:block; width:26px; height:3px; background:#fff; border-radius:10px; position:relative; } .nav-toggle span::before, .nav-toggle span::after{ content:""; position:absolute; left:0; width:26px; height:3px; background:#fff; border-radius:10px; } .nav-toggle span::before{top:-7px;} .nav-toggle span::after{top:7px;} @media (max-width:768px){ .site-header{ padding:22px 18px; background:linear-gradient(to bottom, rgba(0,0,0,0.7), transparent); } .logo-mark{width:170px;height:46px;} .header-cta{display:none;} .nav-toggle{display:block;} .main-nav{ position:fixed; inset:0; background:rgba(0,0,0,0.96); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.25s ease; } .main-nav ul{ flex-direction:column; align-items:center; gap:24px; font-size:18px; /*letter-spacing:0.14em;*/ } .header-inner.nav-open .main-nav{ opacity:1; pointer-events:auto; } .hero{ background-attachment:scroll; background-position:center top; } /* Mobile stays centered (Arabic too) */ .hero-inner{ padding:140px 26px 80px; align-items:center; text-align:center; } .hero-logo-row{display:none;} .hero-kicker{font-size:18px;margin-bottom:16px;} .hero-title{font-size:30px;text-transform:uppercase;/*letter-spacing:0.14em;*/} .hero-subtitle{font-size:17px;margin-top:28px;} .hero-cta-row{ width:100%; margin-top:40px; display:flex; justify-content:center; } .btn-primary{ width:100%; max-width:360px; border-radius:22px; padding-block:18px; font-size:13px; /*letter-spacing:0.14em;*/ } .hero-scroll{margin-top:70px;} .hero-scroll-icon{width:54px;height:90px;} } @media (max-width:480px){ .hero-title{font-size:28px;} .hero-subtitle{font-size:16px;} } /* ========================================================= ABOUT SECTION (RTL) ========================================================= */ .about-section{ padding:2px 0; background: linear-gradient(180deg, rgba(0,0,0,0.95), rgba(0,0,0,0.98)), url("images/about-bg.jpg") center/cover no-repeat; color:#fff; } .about-card{ margin:0 16px; padding:40px 20px 32px; background:rgba(0,0,0,0.96); border-radius:0; border:1px solid rgba(255,255,255,0.05); box-shadow:0 20px 60px rgba(0,0,0,0.85); } .about-inner{ display:flex; flex-direction:column; align-items:center; text-align:center; max-width:430px; margin:0 auto; } .about-kicker{ font-size:12px; /*letter-spacing:0.14em;*/ text-transform:uppercase; color:#f1f1f1; margin-bottom:16px; } .about-heading{ font-size:22px; /*letter-spacing:0.14em;*/ text-transform:uppercase; margin-bottom:26px; } .about-heading span{font-weight:700;} .about-text{ font-size:13px; line-height:1.9; color:var(--text-muted); margin-bottom:16px; } .about-image-wrapper{ width:100%; margin:28px 0 24px; } .about-image{ display:block; width:100%; height:auto; border-radius:0; box-shadow:0 18px 40px rgba(0,0,0,0.9); } .about-divider{ width:100%; height:1px; background:rgba(255,255,255,0.15); margin:26px 0; } .about-stats{ width:100%; display:flex; flex-direction:column; gap:32px; align-items:center; } .about-stat{text-align:center;} .about-stat-icon{font-size:26px;margin-bottom:10px;opacity:0.9;} .about-stat-title{font-size:16px;font-weight:600;margin-bottom:6px;} .about-stat-text{font-size:13px;line-height:1.7;color:var(--text-muted);} .about-cta{width:100%;margin-top:24px;} .about-btn{ display:block; width:100%; padding:14px 18px; text-align:center; text-transform:uppercase; /*letter-spacing:0.14em;*/ font-size:11px; border-radius:6px; border:1px solid rgba(255,255,255,0.7); background:linear-gradient(180deg, rgba(255,255,255,0.14), rgba(0,0,0,0.4)); box-shadow: 0 0 0 1px rgba(255,255,255,0.25), 0 6px 14px rgba(0,0,0,0.9); font-family: 'Tajawal'; } .about-btn:hover{ background:linear-gradient(180deg, rgba(255,255,255,0.22), rgba(0,0,0,0.5)); } @media (min-width:900px){ .about-section{ padding:40px 50px 40px; background-attachment:fixed; } .about-card{ max-width:var(--max-width); margin:0 auto; padding:0; background:transparent; border:none; box-shadow:none; } .about-inner{ max-width:100%; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); column-gap:70px; align-items:flex-start; text-align:right; /* RTL */ } /* RTL: text on the RIGHT, image on the LEFT */ html[dir="rtl"] .about-inner, body.rtl .about-inner{ grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); } .about-main{grid-column:1;} .about-image-wrapper{grid-column:2;margin:0;align-self:center;} /* RTL tweak for image alignment */ html[dir="rtl"] .about-image, body.rtl .about-image{ margin-right:auto; margin-left:0; } .about-divider, .about-stats, .about-cta{grid-column:1 / -1;} .about-stats{ flex-direction:row; align-items:flex-start; justify-content:space-between; gap:40px; } .about-stat{ max-width:220px; text-align:right; } .about-cta{ max-width:360px; padding-top:10px; } .about-btn{width:100%;} } /* ========================================================= PROJECTS SECTION (RTL) ========================================================= */ .projects-section{ padding:10px 30px 10px; background: linear-gradient(180deg, #050505 0%, #050505 100%), url("images/projects-bg.jpg") center/cover no-repeat; } .projects-inner{max-width:var(--max-width);margin:0 auto;} .projects-header{margin-bottom:38px;text-align:right;} .projects-kicker{ font-size:12px; text-transform:uppercase; /*letter-spacing:0.14em;*/ margin-bottom:10px; opacity:0.9; } .projects-title{ font-size:26px; text-transform:uppercase; /*letter-spacing:0.14em;*/ margin-bottom:8px; } .projects-title span{font-weight:700;} .projects-subtitle{ font-size:13px; color:var(--text-muted); max-width:520px; line-height:1.6; margin-left:auto; /* keep block to right */ } .projects-list{ display:flex; flex-direction:column; gap:54px; } .project{ display:flex; flex-direction:column; gap:18px; } .project-media{ position:relative; border-radius:0; overflow:hidden; background:#111; box-shadow:0 20px 60px rgba(0,0,0,0.9); } .project-media img{ display:block; width:100%; height:auto; } /* slider arrows */ .project-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:32px; height:32px; border-radius:999px; border:1px solid rgba(255,255,255,0.7); background:rgba(0,0,0,0.55); display:flex; align-items:center; justify-content:center; font-size:18px; } .project-arrow--left{left:14px;} .project-arrow--right{right:14px;} .project-body{ padding:10px 4px 0; text-align:right; } .project-pill{ display:inline-flex; align-items:center; justify-content:center; padding:8px 16px; border-radius:6px; background:#fff; font-size:11px; text-transform:uppercase; /*letter-spacing:0.14em;*/ margin-bottom:10px; color:#000; } .project-name{ font-size:20px; font-weight:600; margin-bottom:4px; } .project-location{ font-size:13px; color:var(--text-muted); margin-bottom:18px; max-width:400px; margin-left:auto; /* keep right */ } /* Specs */ .project-specs{ display:flex; flex-direction:column; gap:6px; margin-bottom:18px; font-size:13px; } .project-spec-row{ display:flex; justify-content:flex-end; /* RTL */ gap:50px; flex-wrap:wrap; align-items:center; } .project-spec{ display:inline-flex; align-items:center; gap:6px; color:var(--text-muted); white-space:nowrap; } .project-spec strong{ color:#fff; font-weight:500; } .project-spec-icon{ font-size:14px; opacity:0.9; } /* CTAs */ .project-ctas{ display:flex; flex-direction:column; gap:8px; } .project-btn{ display:inline-flex; align-items:center; justify-content:center; padding:14px 18px; border-radius:6px; border:1px solid var(--border-soft); background:transparent; font-size:12px; /*letter-spacing:0.14em;*/ text-transform:uppercase; width:100%; } .project-btn.primary{background:rgba(255,255,255,0.06);} @media (min-width:992px){ .projects-section{padding:90px 40px 110px;} .projects-header{margin-bottom:40px;} .projects-title{font-size:30px;} .projects-subtitle{font-size:14px;} .projects-list{gap:70px;} .project{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); column-gap:54px; align-items:center; } /* RTL: body on the RIGHT, media on the LEFT by default */ html[dir="rtl"] .project, body.rtl .project{ grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); } .project-body{padding:4px 0 0;} .project-ctas{flex-direction:row;gap:14px;} .project-btn{width:auto;min-width:200px;} /* alternate image position: keep your class working in RTL */ .project--image-right .project-media{order:2;} .project--image-right .project-body{order:1;} } @media (max-width:480px){ .projects-section{padding-inline:20px;} .projects-header{margin-bottom:28px;text-align:center;} .projects-title{font-size:20px;} .projects-subtitle{font-size:12px;margin-inline:auto;} .project-body{padding-inline:2px;text-align:right;} .project-name{font-size:18px;} .project-location{font-size:12px;} .project-spec{font-size:12px;white-space:normal;} } /* ========================================================= WHY SECTION (RTL) ========================================================= */ .why-section{ background:var(--bg-main); padding:56px 16px 10px; display:flex; justify-content:center; } .why-inner{ width:100%; max-width:var(--max-width); } .why-header{text-align:right;} .why-eyebrow{ font-size:13px; font-weight:500; /*letter-spacing:0.14em;*/ text-transform:uppercase; margin-bottom:8px; color:var(--text-main); } .why-heading{ font-size:26px; text-transform:uppercase; /*letter-spacing:0.14em;*/ margin-bottom:26px; } .why-heading span{font-weight:700;} .why-grid{ display:grid; grid-template-columns:1fr; gap:14px; } .why-card{ background:linear-gradient(180deg, var(--card-bg-top), var(--card-bg-bottom)); border:1px solid var(--card-border); padding:22px 24px 20px; display:flex; align-items:flex-start; gap:18px; border-bottom:1px solid #e3e3e321; } /* RTL: icon on the RIGHT */ html[dir="rtl"] .why-card, body.rtl .why-card{ flex-direction: row-reverse; } .why-icon{ flex-shrink:0; width:30px; height:30px; border-radius:999px; border:1px solid #ffffff40; display:flex; align-items:center; justify-content:center; font-size:16px; opacity:0.9; margin-top:4px; } .why-content{flex:1;text-align:right;} .why-title{font-size:16px;font-weight:500;margin-bottom:6px;} .why-text{font-size:13px;line-height:1.7;color:var(--text-muted);} @media (min-width:1024px){ .why-section{padding:80px 70px 90px;} .why-heading{font-size:32px;margin-bottom:34px;} .why-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); column-gap:22px; row-gap:22px; } .why-card{padding:26px 32px 24px;} .why-title{font-size:17px;} .why-text{font-size:14px;} } @media (max-width:480px){ .why-section{padding-inline:12px;} .why-card{padding-inline:18px;} } /* Mobile: center WHY header */ @media (max-width:768px){ .why-header{text-align:center;} .why-heading{margin-bottom:20px;} } /* ========================================================= MAP SECTION (RTL) ========================================================= */ .map-section{ background:var(--bg-main); display:flex; justify-content:center; } .map-inner{ width:100%; max-width:var(--max-width); } .map-header{ padding:54px 70px 28px; background:#000; text-align:right; } .map-eyebrow{ font-size:13px; /*letter-spacing:0.14em;*/ text-transform:uppercase; margin-bottom:10px; } .map-title{ font-size:32px; /*letter-spacing:0.14em;*/ text-transform:uppercase; white-space:nowrap; } .map-title span{font-weight:700;} .map-image-wrap{width:100%;background:#050505;} .map-image-wrap img{display:block;width:100%;height:auto;} @media (max-width:900px){ .map-header{padding:46px 24px 26px;text-align:center;} .map-title{ font-size:26px; white-space:normal; line-height:1.25; } } @media (max-width:600px){ .map-header{padding:40px 18px 24px;} .map-title{font-size:22px;/*letter-spacing:0.14em;*/} .map-eyebrow{font-size:12px;} } /* ========================================================= FAQ SECTION (RTL) ========================================================= */ .faq-section{ padding:70px 24px 90px; display:flex; justify-content:center; } .faq-inner{ width:100%; max-width:var(--max-width); } .faq-header{ display:flex; align-items:center; justify-content:space-between; gap:40px; margin-bottom:32px; } /* RTL: reverse header row */ html[dir="rtl"] .faq-header, body.rtl .faq-header{ flex-direction: row-reverse; } .faq-title{ font-size:40px; font-weight:300; /*letter-spacing:0.14em;*/ text-transform:uppercase; white-space:nowrap; text-align:right; } .faq-accordion{ border-left:1px solid var(--border); border-right:1px solid var(--border); border-bottom:1px solid var(--border); } .faq-item{ border-top:1px solid var(--border); background:var(--bg-row); } /* RTL: question is right-aligned, icon on the LEFT */ .faq-question{ width:100%; padding:18px 26px; background:#ffffff; border:none; display:flex; align-items:center; justify-content:space-between; text-align:right; cursor:pointer; font-size:13px; /*letter-spacing:0.14em;*/ text-transform:uppercase; font-weight:600; font-family:"Tajawal", sans-serif; text-decoration: none !important; } html[dir="rtl"] .faq-question, body.rtl .faq-question{ flex-direction: row-reverse; } .faq-question-text{ flex:1; padding-left:12px; padding-right:0; text-decoration: none !important; } .faq-toggle-icon{ font-size:20px; line-height:1; } .faq-answer{ display:none; padding:18px 26px 22px; background:var(--bg-answer); border-top:1px solid var(--border); font-size:13px; line-height:1.7; color:rgba(0,0,0,.75); text-align:right; text-decoration: none !important; } .faq-item.is-open .faq-answer{display:block;} @media (max-width:900px){ .faq-section{padding:50px 18px 70px;} .faq-header{ flex-direction:column; align-items:center; text-align:center; gap:18px; } .faq-title{ white-space:normal; font-size:32px; line-height:1.25; text-align:center; } .faq-header-right{display:none;} } @media (max-width:600px){ .faq-title{font-size:28px;/*letter-spacing:0.14em;*/} .faq-question{padding-inline:18px;} .faq-answer{padding-inline:18px;} } /* ========================================================= INVESTMENT SECTION (RTL) ========================================================= */ .investment-section{ background:#000 url("https://www.royaloasis.co.ae/binghatti-projects/images/binghatti_mega_plot_master_community_dubai.avif") center/cover no-repeat; display:flex; flex-direction:column; justify-content:flex-start; align-items:center; padding:60px 16px 40px; } .investment-inner{ width:100%; max-width:var(--max-width); display:flex; justify-content:center; } .investment-card{ width:100%; background:var(--card-bg); border-radius:0; padding:52px 70px 46px; box-shadow:0 22px 80px rgba(0,0,0,0.55); } .investment-heading{text-align:center;margin-bottom:20px;} .investment-heading h2{ font-size:40px; /*letter-spacing:0.14em;*/ text-transform:uppercase; font-weight:300; } .investment-heading h2 span{font-weight:700;} .investment-subtitle{ margin-top:18px; font-size:15px; line-height:1.7; color:var(--text-muted); max-width:780px; margin-inline:auto; } /* Footer */ .investment-footer{ width:100%; background:#000; color:#f5f5f5; padding:26px 16px 70px; text-align:center; font-size:11px; line-height:1.7; } .investment-footer a{text-decoration:underline;} @media (max-width:900px){ .investment-section{padding:40px 16px 30px;align-items:stretch;} .investment-card{margin-inline:auto;max-width:640px;padding:36px 26px 32px;} .investment-heading h2{font-size:30px;line-height:1.3;} .investment-subtitle{font-size:14px;margin-top:16px;} } @media (max-width:600px){ .investment-card{padding:30px 20px 28px;} .investment-heading h2{font-size:26px;/*letter-spacing:0.14em;*/} .investment-subtitle{font-size:13px;} } /* ========================================================= MODAL ========================================================= */ .modal{ position:fixed; inset:0; display:none; z-index:999; align-items:center; justify-content:center; } .modal.is-open{display:flex !important;} .modal-overlay{ position:absolute; inset:0; background:rgba(0,0,0,0.7); } .modal-content{ position:relative; z-index:1; background:#ffffff; color:#111; max-width:640px; width:100%; border-radius:10px; padding:28px 26px 24px; box-shadow:0 24px 80px rgba(0,0,0,0.65); max-height:90vh; overflow-y:auto; text-align:right; } /* RTL: close button on the LEFT */ .modal-close{ position:absolute; left:14px; right:auto; top:10px; border:none; background:transparent; font-size:26px; cursor:pointer; line-height:1; } .modal-info h3{margin:0 0 8px;font-size:22px;line-height:1.4;} .modal-form-container p{font-size:13px;color:#555;margin-bottom:14px;} .form-group{ margin-bottom:12px; display:flex; flex-direction:column; font-size:13px; text-align:right; } .form-group input, .form-group select{ padding:10px 12px; border-radius:3px; border:1px solid #d5d5d5; font-size:14px; font-family:inherit; outline:none; } .form-group input:focus, .form-group select:focus{border-color:#111;} .q-label{margin-bottom:6px;font-weight:500;} .req{color:#d60000;} .btn-primary{ display:block; width:100%; margin-top:10px; padding:12px 20px; border-radius:4px; border:none; background:#111; color:#fff; text-transform:uppercase; /*letter-spacing:0.14em;*/ font-size:12px; cursor:pointer; font-family: "Tajawal", sans-serif; } .btn-primary:hover{background:#000;} @media (max-width:600px){ .modal-content{max-width:92vw;padding:24px 18px 20px;} } /* ========================================================= PHONE CUSTOM DROPDOWN (RTL FIX) ========================================================= */ .phone-wrapper{ position:relative; display:flex; width:100%; } /* RTL: put input FIRST (right side), code block SECOND (left side) */ html[dir="rtl"] .phone-wrapper, body.rtl .phone-wrapper{ flex-direction: row-reverse; } .country-select-display{ display:flex; align-items:center; gap:6px; padding:9px; background:#f6f6f6; border:1px solid #e3e3e3; /* default LTR rounding */ border-radius:3px 0 0 3px; width:100px; font-size:14px; cursor:pointer; } /* RTL: code block is on LEFT so rounding should flip */ html[dir="rtl"] .country-select-display, body.rtl .country-select-display{ border-radius:0 3px 3px 0; border-left:1px solid #e3e3e3; border-right:none; } .country-flag{width:20px;height:14px;object-fit:cover;} .country-arrow{margin-left:auto;font-size:10px;color:#555;} #countryCodeSelect{display:none;} #phoneNumber{ flex:1; padding:10px 12px; font-size:14px; font-family:inherit; border:1px solid #e3e3e3; /* default LTR */ border-left:none; border-radius:0 3px 3px 0; box-sizing:border-box; text-align:right; } /* RTL: input is on RIGHT so rounding flips */ html[dir="rtl"] #phoneNumber, body.rtl #phoneNumber{ border-right:none; border-left:1px solid #e3e3e3; border-radius:3px 0 0 3px; } .country-select-display, #phoneNumber{height:40px;} #phoneNumber:focus{outline:none;border-color:#111;} /* Dropdown */ .country-dropdown{ position:absolute; top:100%; /* default LTR */ left:0; margin-top:4px; width:260px; background:#fff; border:1px solid #e3e3e3; border-radius:3px; box-shadow:0 2px 8px rgba(0,0,0,0.15); z-index:9999; display:none; box-sizing:border-box; } /* RTL: open dropdown from the RIGHT edge */ html[dir="rtl"] .country-dropdown, body.rtl .country-dropdown{ right:0; left:auto; } .country-dropdown.open{display:block;} .country-search{ width:100%; padding:6px 8px; border:none; border-bottom:1px solid #e3e3e3; box-sizing:border-box; font-size:13px; outline:none; text-align:right; } .country-list{ max-height:260px; overflow-y:auto; list-style:none; margin:0; padding:0; } .country-option{ display:flex; align-items:center; gap:6px; padding:6px 8px; font-size:13px; cursor:pointer; box-sizing:border-box; } /* RTL: keep flag on the right */ html[dir="rtl"] .country-option, body.rtl .country-option{ flex-direction: row-reverse; text-align:right; } .country-option img.country-flag{width:18px;height:12px;object-fit:cover;} .country-option:hover{background-color:#f5f5f5;} /* ========================================================= PROJECT SLIDER VISIBILITY (as you had) ========================================================= */ .project-media{position:relative;overflow:hidden;} .project-media .project-slide{display:none;width:100%;height:auto;} .project-media .project-slide.active{display:block;} /* ========================================================= STICKY CTA ========================================================= */ .sticky-cta-container{ position:fixed; z-index:1000; font-family:'Satoshi', sans-serif; } /* MOBILE */ .cta-desktop{display:none;} .cta-mobile{ display:flex; width:100%; background:rgba(51,51,51,0.16); padding:5px; } .sticky-cta-container{bottom:0;left:0;right:0;} .cta-mobile-button{ flex:1; display:flex; align-items:center; justify-content:center; gap:10px; padding:12px 10px; color:white; text-decoration:none; font-weight:600; } .cta-mobile-button.cta-call{background-color:#4285F4;border-radius:12px;margin-right:3px;} .cta-mobile-button.cta-whatsapp{background-color:#25D366;border-radius:12px;margin-left:3px;} .cta-mobile-button i{font-size:1.1rem;} /* DESKTOP */ @media (min-width:768px){ .cta-mobile{display:none;} .cta-desktop{ display:flex; flex-direction:column; gap:8px; padding:8px; background-color:#11111161; border-radius:50px; box-shadow:0 4px 12px rgba(0,0,0,0.2); } /* keep it bottom-right even in RTL (better UX) */ .sticky-cta-container{ bottom:25px; right:25px; left:auto; } .cta-desktop-button{ display:flex; align-items:center; justify-content:center; width:54px; height:54px; border-radius:50%; text-decoration:none; transition:transform 0.2s ease; } .cta-desktop-button:hover{transform:scale(1.1);} .cta-desktop-button.cta-call{background-color:#4285F4;} .cta-desktop-button.cta-whatsapp{background-color:#25D366;} .cta-desktop-button i{color:white;font-size:1.8rem;} } /* Footer button */ .foot-btn{ text-decoration:none !important; border:1px #fff solid; display:inline-flex; align-items:center; gap:10px; padding:14px 26px; background:#000; font-size:13px; /*letter-spacing:0.14em;*/ text-transform:uppercase; white-space:nowrap; border-radius:6px; }