.elementor-6 .elementor-element.elementor-element-69941ca{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6 .elementor-element.elementor-element-1d6cfd4{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6 .elementor-element.elementor-element-1489295{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6 .elementor-element.elementor-element-1879f3f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6 .elementor-element.elementor-element-afc48d7{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6 .elementor-element.elementor-element-0f6fb71{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6 .elementor-element.elementor-element-4949b3c{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-6 .elementor-element.elementor-element-6afe73c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6 .elementor-element.elementor-element-76b2c75{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6 .elementor-element.elementor-element-0b71fda{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-6 .elementor-element.elementor-element-5a3478f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-6 .elementor-element.elementor-element-d692c43{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6 .elementor-element.elementor-element-eca8139{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}@media(max-width:1024px){.elementor-6 .elementor-element.elementor-element-69941ca{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6 .elementor-element.elementor-element-1d6cfd4{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6 .elementor-element.elementor-element-1489295{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6 .elementor-element.elementor-element-1879f3f{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6 .elementor-element.elementor-element-afc48d7{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6 .elementor-element.elementor-element-0f6fb71{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6 .elementor-element.elementor-element-6afe73c{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6 .elementor-element.elementor-element-76b2c75{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6 .elementor-element.elementor-element-d692c43{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}@media(max-width:767px){.elementor-6 .elementor-element.elementor-element-69941ca{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6 .elementor-element.elementor-element-1d6cfd4{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6 .elementor-element.elementor-element-1489295{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6 .elementor-element.elementor-element-1879f3f{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6 .elementor-element.elementor-element-afc48d7{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6 .elementor-element.elementor-element-0f6fb71{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6 .elementor-element.elementor-element-6afe73c{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6 .elementor-element.elementor-element-76b2c75{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6 .elementor-element.elementor-element-5a3478f{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6 .elementor-element.elementor-element-d692c43{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}/* Start custom CSS for html, class: .elementor-element-bb7d0fc *//* ========================================================== HAMED ELKHESHN PREMIUM ANIMATED HOME HERO FULL CSS ========================================================== */ .hkx-hero{ --hkx-black:#080806; --hkx-dark:#11100c; --hkx-dark-2:#18130a; --hkx-gold:#c9982a; --hkx-gold-dark:#9b701b; --hkx-gold-light:#f0d574; --hkx-white:#ffffff; --hkx-text:#dcd8ce; --hkx-muted:#aaa59c; position:relative; isolation:isolate; width:100%; min-height:calc(100vh - 80px); display:flex; align-items:center; justify-content:center; overflow:hidden; padding:90px 20px 75px; background: radial-gradient( circle at 50% 32%, rgba(201,152,42,.12), transparent 34% ), radial-gradient( circle at 50% 78%, rgba(201,152,42,.06), transparent 33% ), linear-gradient( 145deg, #070705 0%, #0d0c09 42%, #171208 100% ); } /* ========================================================== BACKGROUND EFFECTS ========================================================== */ .hkx-bg{ position:absolute; inset:0; z-index:-2; overflow:hidden; pointer-events:none; } /* ========================================================== MOVING GRID ========================================================== */ .hkx-grid{ position:absolute; inset:-180px; opacity:.22; background-image: linear-gradient( rgba(255,255,255,.045) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.045) 1px, transparent 1px ); background-size:56px 56px; transform: perspective(900px) rotateX(58deg) scale(1.45); transform-origin:center 35%; animation: hkxGridMove 14s linear infinite; -webkit-mask-image: radial-gradient( ellipse at center, #000 20%, transparent 75% ); mask-image: radial-gradient( ellipse at center, #000 20%, transparent 75% ); } @keyframes hkxGridMove{ 0%{ background-position: 0 0, 0 0; } 100%{ background-position: 0 56px, 56px 0; } } /* ========================================================== GOLD GLOWS ========================================================== */ .hkx-glow{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.75; animation: hkxGlowFloat 10s ease-in-out infinite alternate; } .hkx-glow-one{ width:450px; height:450px; top:-230px; right:-120px; background: rgba(201,152,42,.18); } .hkx-glow-two{ width:380px; height:380px; bottom:-190px; left:-100px; background: rgba(201,152,42,.13); animation-delay:-3s; } .hkx-glow-three{ width:280px; height:280px; top:45%; left:42%; background: rgba(240,213,116,.07); animation-delay:-6s; } @keyframes hkxGlowFloat{ 0%{ transform: translate3d(0,0,0) scale(1); } 100%{ transform: translate3d(38px,-35px,0) scale(1.14); } } /* ========================================================== SMALL FLOATING LIGHTS ========================================================== */ .hkx-star{ position:absolute; width:4px; height:4px; border-radius:50%; background:#e8c765; box-shadow: 0 0 13px rgba(232,199,101,.9); animation: hkxStarFloat 7s ease-in-out infinite; } .hkx-star-1{ top:17%; left:12%; } .hkx-star-2{ top:28%; right:10%; animation-delay:-2s; } .hkx-star-3{ top:63%; left:17%; animation-delay:-4s; } .hkx-star-4{ top:73%; right:13%; animation-delay:-1s; } .hkx-star-5{ top:43%; left:6%; animation-delay:-5s; } .hkx-star-6{ top:14%; right:37%; animation-delay:-3s; } @keyframes hkxStarFloat{ 0%, 100%{ transform: translateY(0) scale(1); opacity:.25; } 50%{ transform: translateY(-20px) scale(1.7); opacity:1; } } /* ========================================================== MAIN CONTAINER ========================================================== */ .hkx-container{ position:relative; z-index:3; width:min(1200px,100%); margin:0 auto; text-align:center; } /* ========================================================== TOP BADGE ========================================================== */ .hkx-top-badge{ display:inline-flex; align-items:center; justify-content:center; gap:9px; margin:0 auto 22px; padding:9px 17px; border: 1px solid rgba(240,213,116,.22); border-radius:999px; background: rgba(201,152,42,.07); backdrop-filter:blur(10px); color:#ebce6e; font-size:14px; font-weight:800; line-height:1.5; box-shadow: 0 8px 30px rgba(0,0,0,.12); } .hkx-live-dot{ width:8px; height:8px; flex:0 0 8px; border-radius:50%; background:#e5c157; box-shadow: 0 0 0 5px rgba(229,193,87,.07), 0 0 17px rgba(229,193,87,.65); animation: hkxPulse 2s ease infinite; } @keyframes hkxPulse{ 0%, 100%{ transform:scale(1); } 50%{ transform:scale(1.35); } } /* ========================================================== MAIN TITLE ========================================================== */ .hkx-title{ max-width:1030px; margin:0 auto; padding:0; color:#ffffff; font-size: clamp(52px,7vw,86px); font-weight:900; line-height:1.05; letter-spacing:-2px; text-align:center; } .hkx-title > span{ display:block; max-width:970px; margin:18px auto 0; background: linear-gradient( 90deg, #a77a1d 0%, #d7aa39 25%, #f3da7b 50%, #d8ac3c 75%, #a97b1d 100% ); background-size:200% auto; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; font-size:.49em; line-height:1.5; letter-spacing:0; animation: hkxGoldText 6s linear infinite; } @keyframes hkxGoldText{ 0%{ background-position:0 center; } 100%{ background-position:200% center; } } /* ========================================================== DESCRIPTION ========================================================== */ .hkx-desc{ max-width:830px; margin:24px auto 0; padding:0; color:#d8d4ca; font-size:18px; line-height:2; font-weight:500; text-align:center; } /* ========================================================== BUTTONS ========================================================== */ .hkx-actions{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:29px; } .hkx-btn{ position:relative; min-width:175px; min-height:54px; display:inline-flex; align-items:center; justify-content:center; gap:10px; overflow:hidden; padding:13px 27px; border-radius:12px; font-size:16px; font-weight:900; line-height:1.4; text-align:center; text-decoration:none !important; transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease; } .hkx-btn-primary{ border: 1px solid #dfb94e; background: linear-gradient( 135deg, #946714 0%, #c9982a 40%, #efd36e 100% ); color:#111111 !important; box-shadow: 0 15px 35px rgba(201,152,42,.22); } .hkx-btn-primary::before{ content:""; position:absolute; top:-50%; left:-80%; width:45%; height:200%; transform:rotate(22deg); background: linear-gradient( 90deg, transparent, rgba(255,255,255,.35), transparent ); transition:left .6s ease; } .hkx-btn-primary:hover::before{ left:140%; } .hkx-btn-primary:hover{ transform:translateY(-4px); box-shadow: 0 21px 46px rgba(201,152,42,.33); } .hkx-btn-primary i{ font-style:normal; font-size:18px; transition: transform .25s ease; } .hkx-btn-primary:hover i{ transform:translateX(-4px); } .hkx-btn-secondary{ border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.045); backdrop-filter:blur(10px); color:#ffffff !important; } .hkx-btn-secondary:hover{ transform:translateY(-4px); border-color: rgba(201,152,42,.35); background: rgba(201,152,42,.08); box-shadow: 0 14px 35px rgba(0,0,0,.18); } /* ========================================================== VISUAL / SLIDER AREA ========================================================== */ .hkx-visual{ position:relative; width:min(980px,100%); min-height:585px; display:flex; align-items:center; justify-content:center; margin:40px auto 0; } /* ========================================================== DECORATIVE ORBITS ========================================================== */ .hkx-orbit{ position:absolute; border-radius:50%; pointer-events:none; } .hkx-orbit-one{ width:610px; height:610px; border: 1px solid rgba(201,152,42,.16); animation: hkxRotate 24s linear infinite; } .hkx-orbit-one::before{ content:""; position:absolute; width:9px; height:9px; top:40px; left:115px; border-radius:50%; background:#e7c861; box-shadow: 0 0 20px #d7ad36; } .hkx-orbit-one::after{ content:""; position:absolute; width:5px; height:5px; bottom:90px; right:35px; border-radius:50%; background:#c9982a; box-shadow: 0 0 14px rgba(201,152,42,.8); } .hkx-orbit-two{ width:735px; height:735px; border: 1px dashed rgba(201,152,42,.09); animation: hkxRotateReverse 36s linear infinite; } @keyframes hkxRotate{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } } @keyframes hkxRotateReverse{ from{ transform:rotate(360deg); } to{ transform:rotate(0deg); } } /* ========================================================== LANDSCAPE SLIDER ========================================================== */ .hkx-slider{ position:relative; z-index:5; width:min(780px,88vw); overflow:hidden; border: 1px solid rgba(240,213,116,.27); border-radius:28px; background:#111111; box-shadow: 0 40px 100px rgba(0,0,0,.55), 0 0 90px rgba(201,152,42,.11); } .hkx-slider::before{ content:""; position:absolute; z-index:9; inset:0; border-radius:inherit; pointer-events:none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), inset 0 0 45px rgba(0,0,0,.08); } /* ========================================================== IMAGE AREA LANDSCAPE 16:9 ========================================================== */ .hkx-slides{ position:relative; width:100%; aspect-ratio:16 / 9; overflow:hidden; background:#111111; } .hkx-slide{ position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; object-position:center center; opacity:0; transform:scale(1.055); animation: hkxSlideShow 32s infinite; will-change: opacity, transform; } /* ========================================================== 8 SLIDES 4 SECONDS EACH ========================================================== */ .hkx-slide:nth-child(1){ animation-delay:0s; } .hkx-slide:nth-child(2){ animation-delay:4s; } .hkx-slide:nth-child(3){ animation-delay:8s; } .hkx-slide:nth-child(4){ animation-delay:12s; } .hkx-slide:nth-child(5){ animation-delay:16s; } .hkx-slide:nth-child(6){ animation-delay:20s; } .hkx-slide:nth-child(7){ animation-delay:24s; } .hkx-slide:nth-child(8){ animation-delay:28s; } @keyframes hkxSlideShow{ 0%{ opacity:0; transform: scale(1.055); } 2%{ opacity:1; } 10.5%{ opacity:1; transform: scale(1); } 12.5%{ opacity:0; transform: scale(.995); } 100%{ opacity:0; } } /* ========================================================== MOVING SHINE OVER SLIDER ========================================================== */ .hkx-slider-shine{ position:absolute; z-index:12; top:-45%; left:-75%; width:32%; height:200%; transform:rotate(22deg); background: linear-gradient( 90deg, transparent, rgba(255,255,255,.08), rgba(240,213,116,.05), transparent ); animation: hkxSliderShine 8s ease-in-out infinite; pointer-events:none; } @keyframes hkxSliderShine{ 0%, 55%{ left:-75%; } 100%{ left:145%; } } /* ========================================================== IMAGE INFORMATION ========================================================== */ .hkx-image-info{ position:relative; z-index:10; padding:17px 25px 19px; background: linear-gradient( 180deg, rgba(18,15,10,.98), #090806 ); text-align:center; } .hkx-image-line{ position:absolute; top:0; right:25%; width:50%; height:1px; background: linear-gradient( 90deg, transparent, #d9ae3c, transparent ); } .hkx-image-info strong{ display:block; margin:0; color:#edcd68; font-size:20px; line-height:1.5; font-weight:900; } .hkx-image-info small{ display:block; margin-top:5px; color:#aaa59c; font-size:12px; line-height:1.6; font-weight:600; } /* ========================================================== SLIDER DOTS ========================================================== */ .hkx-slider-dots{ position:absolute; z-index:15; left:50%; bottom:-3px; transform: translateX(-50%); display:flex; align-items:center; justify-content:center; gap:6px; } .hkx-slider-dots span{ width:6px; height:6px; border-radius:50%; background: rgba(255,255,255,.20); animation: hkxDot 32s infinite; } .hkx-slider-dots span:nth-child(1){ animation-delay:0s; } .hkx-slider-dots span:nth-child(2){ animation-delay:4s; } .hkx-slider-dots span:nth-child(3){ animation-delay:8s; } .hkx-slider-dots span:nth-child(4){ animation-delay:12s; } .hkx-slider-dots span:nth-child(5){ animation-delay:16s; } .hkx-slider-dots span:nth-child(6){ animation-delay:20s; } .hkx-slider-dots span:nth-child(7){ animation-delay:24s; } .hkx-slider-dots span:nth-child(8){ animation-delay:28s; } @keyframes hkxDot{ 0%, 11.8%{ width:22px; border-radius:50px; background:#e7c761; box-shadow: 0 0 12px rgba(231,199,97,.45); } 12.5%, 100%{ width:6px; border-radius:50%; background: rgba(255,255,255,.20); box-shadow:none; } } /* ========================================================== FLOATING SERVICE CARDS ========================================================== */ .hkx-service{ position:absolute; z-index:16; display:flex; align-items:center; gap:9px; padding:10px 14px; border: 1px solid rgba(240,213,116,.16); border-radius:12px; background: rgba(12,11,8,.84); backdrop-filter:blur(14px); box-shadow: 0 16px 40px rgba(0,0,0,.30); color:#ffffff; animation: hkxFloat 4.5s ease-in-out infinite; } .hkx-service > span{ width:31px; height:31px; flex:0 0 31px; display:flex; align-items:center; justify-content:center; border-radius:8px; background: linear-gradient( 135deg, rgba(201,152,42,.26), rgba(240,213,116,.07) ); color:#efcf6b; font-size:12px; font-weight:900; box-shadow: inset 0 0 0 1px rgba(240,213,116,.08); } .hkx-service strong{ white-space:nowrap; color:#ffffff; font-size:12px; line-height:1.4; font-weight:800; } .hkx-service-google{ top:60px; right:12px; } .hkx-service-seo{ top:60px; left:12px; animation-delay:-1s; } .hkx-service-instagram{ top:45%; right:-35px; animation-delay:-2s; } .hkx-service-snap{ bottom:90px; left:15px; animation-delay:-3s; } .hkx-service-tiktok{ bottom:88px; right:38px; animation-delay:-1.5s; } @keyframes hkxFloat{ 0%, 100%{ transform: translateY(0); } 50%{ transform: translateY(-10px); } } /* ========================================================== VALUE CARDS ========================================================== */ .hkx-values{ display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:10px; margin:5px auto 0; } .hkx-values > div{ display:flex; align-items:center; justify-content:center; gap:9px; min-height:42px; padding:9px 14px; border: 1px solid rgba(255,255,255,.08); border-radius:10px; background: rgba(255,255,255,.035); backdrop-filter:blur(8px); box-shadow: 0 10px 30px rgba(0,0,0,.07); } .hkx-values span{ color:#dfba50; font-size:11px; font-weight:900; } .hkx-values strong{ color:#d8d4ca; font-size:13px; line-height:1.4; font-weight:700; } /* ========================================================== DESKTOP HOVER ========================================================== */ @media(min-width:922px){ .hkx-slider{ transition: transform .35s ease, box-shadow .35s ease; } .hkx-slider:hover{ transform: translateY(-5px); box-shadow: 0 50px 115px rgba(0,0,0,.58), 0 0 105px rgba(201,152,42,.14); } } /* ========================================================== TABLET ========================================================== */ @media(max-width:921px){ .hkx-hero{ min-height:auto; padding: 75px 18px 65px; } .hkx-container{ width:100%; } .hkx-title{ max-width:850px; font-size:60px; } .hkx-title > span{ font-size:.49em; } .hkx-desc{ max-width:760px; font-size:17px; } .hkx-visual{ width:100%; min-height:515px; margin-top:35px; } .hkx-slider{ width:min(720px,86vw); } .hkx-orbit-one{ width:510px; height:510px; } .hkx-orbit-two{ width:625px; height:625px; } .hkx-service-google{ top:45px; right:0; } .hkx-service-seo{ top:45px; left:0; } .hkx-service-instagram{ right:-5px; } .hkx-service-snap{ left:5px; } .hkx-service-tiktok{ right:15px; } } /* ========================================================== MOBILE ========================================================== */ @media(max-width:600px){ .hkx-hero{ min-height:auto; padding: 55px 13px 52px; } .hkx-grid{ inset:-100px; opacity:.14; background-size: 42px 42px; animation-duration:18s; } .hkx-glow{ filter:blur(70px); } .hkx-glow-one{ width:300px; height:300px; top:-160px; right:-100px; } .hkx-glow-two{ width:260px; height:260px; } .hkx-glow-three{ width:180px; height:180px; } .hkx-top-badge{ max-width:96%; margin-bottom:18px; padding: 8px 12px; font-size:11.5px; line-height:1.6; } .hkx-title{ max-width:100%; font-size:44px; line-height:1.1; letter-spacing:-1px; } .hkx-title > span{ margin-top:14px; font-size:.48em; line-height:1.55; } .hkx-desc{ max-width:96%; margin-top:19px; font-size:15.5px; line-height:1.9; } .hkx-actions{ width:100%; gap:9px; margin-top:24px; } .hkx-btn{ min-width:145px; min-height:50px; flex:1; padding: 11px 13px; font-size:14px; } /* ========================== MOBILE VISUAL ========================== */ .hkx-visual{ width:100%; min-height:345px; margin-top:35px; } .hkx-slider{ width:94vw; max-width:440px; border-radius:18px; box-shadow: 0 25px 60px rgba(0,0,0,.48), 0 0 55px rgba(201,152,42,.08); } .hkx-slides{ aspect-ratio:16 / 9; } .hkx-slide{ object-fit:cover; object-position:center center; } .hkx-slider::before{ border-radius:18px; } /* ========================== MOBILE ORBITS ========================== */ .hkx-orbit-one{ width:315px; height:315px; } .hkx-orbit-two{ width:385px; height:385px; } .hkx-orbit-one::before{ width:7px; height:7px; top:20px; left:55px; } /* ========================== IMAGE INFO ========================== */ .hkx-image-info{ padding: 12px 12px 14px; } .hkx-image-info strong{ font-size:16px; } .hkx-image-info small{ margin-top:3px; font-size:9px; line-height:1.5; } /* ========================== FLOATING SERVICES ========================== */ .hkx-service{ gap:5px; padding: 6px 8px; border-radius:9px; } .hkx-service > span{ width:24px; height:24px; flex:0 0 24px; border-radius:6px; font-size:9px; } .hkx-service strong{ font-size:9px; } .hkx-service-google{ top:12px; right:-2px; } .hkx-service-seo{ top:12px; left:-2px; } .hkx-service-instagram{ top:auto; right:-3px; bottom:34px; } .hkx-service-snap{ display:none; } .hkx-service-tiktok{ display:none; } /* ========================== VALUES ========================== */ .hkx-values{ display:grid; grid-template-columns:1fr; width:min(340px,100%); gap:7px; margin: 8px auto 0; } .hkx-values > div{ width:100%; justify-content:center; padding: 9px 12px; } .hkx-values strong{ font-size:12px; } } /* ========================================================== SMALL MOBILE ========================================================== */ @media(max-width:390px){ .hkx-title{ font-size:39px; } .hkx-title > span{ font-size:.49em; } .hkx-desc{ font-size:14.5px; } .hkx-actions{ display:grid; grid-template-columns:1fr; width:100%; } .hkx-btn{ width:100%; } .hkx-visual{ min-height:315px; } .hkx-slider{ width:95vw; } .hkx-service strong{ font-size:8px; } } /* ========================================================== REDUCED MOTION ========================================================== */ @media(prefers-reduced-motion:reduce){ .hkx-grid, .hkx-glow, .hkx-star, .hkx-orbit, .hkx-service, .hkx-slider-shine, .hkx-live-dot, .hkx-title > span{ animation:none !important; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-d4a58b5 *//* ========================================================== HAMED ELKHESHN HOME SERVICES SECTION ========================================================== */ .hks-services{ --hks-black:#11100d; --hks-text:#39352e; --hks-muted:#746d62; --hks-gold:#c9982a; --hks-gold-dark:#9c7017; --hks-gold-light:#e6c45f; --hks-cream:#fffdf8; --hks-cream-2:#f8f2e6; --hks-cream-3:#efe3cd; position:relative; overflow:hidden; padding-bottom:100px; background: radial-gradient( circle at 50% 20%, rgba(201,152,42,.08), transparent 32% ), linear-gradient( 180deg, #fffdf9 0%, #faf5eb 48%, #f5ecdc 100% ); } /* subtle background */ .hks-services::before{ content:""; position:absolute; width:650px; height:650px; top:250px; right:-400px; border-radius:50%; border: 1px solid rgba(201,152,42,.08); pointer-events:none; } .hks-services::after{ content:""; position:absolute; width:500px; height:500px; bottom:-320px; left:-250px; border-radius:50%; border: 1px solid rgba(201,152,42,.08); pointer-events:none; } /* ========================================================== MARQUEE ========================================================== */ .hks-marquee{ position:relative; width:100%; overflow:hidden; padding:16px 0; border-top: 1px solid rgba(201,152,42,.15); border-bottom: 1px solid rgba(201,152,42,.15); background: linear-gradient( 90deg, #f1e5cf, #fffaf0, #f1e5cf ); } .hks-marquee::before, .hks-marquee::after{ content:""; position:absolute; z-index:3; top:0; bottom:0; width:120px; pointer-events:none; } .hks-marquee::before{ right:0; background: linear-gradient( 90deg, transparent, #f5ecd9 ); } .hks-marquee::after{ left:0; background: linear-gradient( -90deg, transparent, #f5ecd9 ); } .hks-marquee-track{ width:max-content; display:flex; align-items:center; gap:24px; animation: hksMarquee 30s linear infinite; } .hks-marquee-track span{ color:#1b1915; font-size:14px; font-weight:900; white-space:nowrap; } .hks-marquee-track i{ width:5px; height:5px; flex:0 0 5px; border-radius:50%; background:var(--hks-gold); box-shadow: 0 0 10px rgba(201,152,42,.30); } @keyframes hksMarquee{ from{ transform:translateX(0); } to{ transform:translateX(50%); } } /* ========================================================== CONTAINER ========================================================== */ .hks-container{ position:relative; z-index:2; width:min(1200px,calc(100% - 40px)); margin:0 auto; padding-top:92px; } /* ========================================================== SECTION HEADING ========================================================== */ .hks-heading{ max-width:860px; margin:0 auto 55px; text-align:center; } .hks-eyebrow{ display:inline-flex; align-items:center; justify-content:center; margin-bottom:16px; padding:8px 15px; border: 1px solid rgba(156,112,23,.18); border-radius:999px; background: rgba(201,152,42,.07); color:var(--hks-gold-dark); font-size:13px; font-weight:900; } .hks-heading h2{ margin:0; color:#12110e; font-size: clamp(36px,5vw,56px); line-height:1.25; font-weight:900; letter-spacing:-1px; } .hks-heading h2 span{ display:block; margin-top:4px; color:var(--hks-gold-dark); } .hks-heading p{ max-width:760px; margin:20px auto 0; color:#625c52; font-size:17px; line-height:2; font-weight:500; } /* ========================================================== GRID ========================================================== */ .hks-grid{ display:grid; grid-template-columns: repeat(6,1fr); gap:18px; align-items:stretch; } /* first 3 */ .hks-card:nth-child(1), .hks-card:nth-child(2), .hks-card:nth-child(3){ grid-column:span 2; } /* final two centered */ .hks-card:nth-child(4){ grid-column:2 / span 2; } .hks-card:nth-child(5){ grid-column:4 / span 2; } /* ========================================================== SERVICE CARD ========================================================== */ .hks-card{ position:relative; min-height:395px; display:flex; flex-direction:column; overflow:hidden; padding:27px; border: 1px solid rgba(116,87,27,.12); border-radius:21px; background: rgba(255,255,255,.70); box-shadow: 0 14px 45px rgba(47,36,12,.055); text-decoration:none !important; transition: transform .32s ease, border-color .32s ease, box-shadow .32s ease, background .32s ease; } .hks-card::before{ content:""; position:absolute; width:170px; height:170px; top:-110px; left:-100px; border-radius:50%; background: rgba(201,152,42,.12); filter:blur(10px); transition: transform .4s ease; } .hks-card::after{ content:""; position:absolute; right:0; bottom:0; width:0; height:3px; background: linear-gradient( 90deg, var(--hks-gold-dark), var(--hks-gold-light) ); transition: width .35s ease; } .hks-card:hover{ transform: translateY(-9px); border-color: rgba(201,152,42,.28); background:#fffdf8; box-shadow: 0 26px 65px rgba(47,36,12,.12); } .hks-card:hover::before{ transform: scale(1.6); } .hks-card:hover::after{ width:100%; } /* ========================================================== FEATURED CARD ========================================================== */ .hks-card-featured{ border-color: rgba(201,152,42,.27); background: linear-gradient( 145deg, #fffdf8, #f7edd8 ); box-shadow: 0 18px 50px rgba(201,152,42,.09); } .hks-featured-label{ position:absolute; top:0; right:50%; transform: translateX(50%); padding: 5px 14px; border-radius: 0 0 10px 10px; background: linear-gradient( 135deg, #9c7017, #d4aa3b ); color:#fff; font-size:10px; font-weight:900; } /* ========================================================== CARD TOP ========================================================== */ .hks-card-top{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; margin-bottom:29px; } .hks-icon{ width:54px; height:54px; display:flex; align-items:center; justify-content:center; border: 1px solid rgba(201,152,42,.18); border-radius:14px; background: linear-gradient( 145deg, #fff, #f5ead5 ); box-shadow: 0 8px 20px rgba(201,152,42,.08); } .hks-icon svg{ width:25px; height:25px; fill:none; stroke:var(--hks-gold-dark); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .hks-number{ color: rgba(156,112,23,.25); font-size:31px; line-height:1; font-weight:900; } /* ========================================================== CARD CONTENT ========================================================== */ .hks-card-content{ position:relative; z-index:2; text-align:right; } .hks-mini{ display:block; margin-bottom:9px; color:var(--hks-gold-dark); font-size:11px; font-weight:900; } .hks-card h3{ margin: 0 0 14px; color:#16140f; font-size:22px; line-height:1.45; font-weight:900; } .hks-card p{ margin:0; color:#696258; font-size:14.5px; line-height:1.9; font-weight:500; } /* ========================================================== CARD LINK ========================================================== */ .hks-link{ position:relative; z-index:2; display:flex; align-items:center; gap:8px; margin-top:auto; padding-top:25px; color:#1d1a15; font-size:13px; font-weight:900; } .hks-link span{ width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:50%; background: rgba(201,152,42,.11); color:var(--hks-gold-dark); transition: transform .25s ease, background .25s ease; } .hks-card:hover .hks-link span{ transform: translateX(-5px); background: rgba(201,152,42,.18); } /* ========================================================== SECTION BOTTOM ========================================================== */ .hks-bottom{ max-width:850px; display:flex; align-items:center; justify-content:center; gap:18px; margin: 53px auto 0; text-align:center; } .hks-bottom > span{ flex:1; height:1px; background: linear-gradient( 90deg, transparent, rgba(156,112,23,.23) ); } .hks-bottom > span:last-child{ background: linear-gradient( -90deg, transparent, rgba(156,112,23,.23) ); } .hks-bottom p{ margin:0; color:#70685d; font-size:13px; font-weight:700; } /* ========================================================== TABLET ========================================================== */ @media(max-width:921px){ .hks-services{ padding-bottom:80px; } .hks-container{ width:min( 100% - 32px, 1200px ); padding-top:75px; } .hks-heading{ margin-bottom:45px; } .hks-heading h2{ font-size:43px; } .hks-grid{ grid-template-columns: repeat(2,1fr); gap:15px; } .hks-card:nth-child(1), .hks-card:nth-child(2), .hks-card:nth-child(3), .hks-card:nth-child(4), .hks-card:nth-child(5){ grid-column:auto; } .hks-card:nth-child(5){ grid-column: 1 / -1; width:calc(50% - 8px); justify-self:center; } .hks-card{ min-height:365px; } } /* ========================================================== MOBILE ========================================================== */ @media(max-width:600px){ .hks-services{ padding-bottom:65px; } .hks-marquee{ padding:13px 0; } .hks-marquee-track{ gap:18px; animation-duration:25s; } .hks-marquee-track span{ font-size:12px; } .hks-container{ width: calc(100% - 26px); padding-top:60px; } .hks-heading{ margin-bottom:35px; } .hks-eyebrow{ font-size:11px; } .hks-heading h2{ font-size:34px; line-height:1.35; } .hks-heading p{ margin-top:17px; font-size:15px; line-height:1.9; } .hks-grid{ grid-template-columns:1fr; gap:12px; } .hks-card:nth-child(1), .hks-card:nth-child(2), .hks-card:nth-child(3), .hks-card:nth-child(4), .hks-card:nth-child(5){ grid-column:auto; width:100%; } .hks-card{ min-height:auto; padding:23px; border-radius:17px; } .hks-card-top{ margin-bottom:23px; } .hks-icon{ width:49px; height:49px; } .hks-icon svg{ width:23px; height:23px; } .hks-number{ font-size:27px; } .hks-card h3{ font-size:20px; } .hks-card p{ font-size:14px; } .hks-link{ padding-top:23px; } .hks-bottom{ gap:10px; margin-top:38px; } .hks-bottom > span{ display:none; } .hks-bottom p{ max-width:290px; line-height:1.7; } } /* ========================================================== REDUCED MOTION ========================================================== */ @media(prefers-reduced-motion:reduce){ .hks-marquee-track{ animation:none; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-529736c *//* ========================================================== HAMED KH WEBSITE SHOWCASE FULL COVER IMAGE + PREMIUM FRAME IMAGE SIZE: 800 × 1300 ========================================================== */ .hkw-showcase{ --hkw-gold:#c9982a; --hkw-gold-light:#efd36d; --hkw-gold-dark:#855b10; --hkw-gap:20px; position:relative; isolation:isolate; width:100%; overflow:hidden; padding: 95px 0 85px; background: radial-gradient( circle at 50% 18%, rgba(201,152,42,.12), transparent 30% ), radial-gradient( circle at 90% 70%, rgba(201,152,42,.05), transparent 24% ), linear-gradient( 145deg, #080705 0%, #0e0c08 50%, #181207 100% ); } /* ========================================================== BACKGROUND ========================================================== */ .hkw-background{ position:absolute; inset:0; z-index:-2; overflow:hidden; pointer-events:none; } .hkw-grid{ position:absolute; inset:-160px; opacity:.11; background-image: linear-gradient( rgba(255,255,255,.04) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.04) 1px, transparent 1px ); background-size: 56px 56px; animation: hkwGridMove 22s linear infinite; } @keyframes hkwGridMove{ from{ background-position: 0 0, 0 0; } to{ background-position: 56px 56px, -56px 56px; } } /* ========================================================== BACKGROUND GLOWS ========================================================== */ .hkw-glow{ position:absolute; border-radius:50%; filter: blur(110px); pointer-events:none; } .hkw-glow-1{ width:420px; height:420px; top:-190px; right:-160px; background: rgba(201,152,42,.13); } .hkw-glow-2{ width:380px; height:380px; bottom:-170px; left:-140px; background: rgba(201,152,42,.08); } /* ========================================================== SMALL FLOATING LIGHTS ========================================================== */ .hkw-light{ position:absolute; width:5px; height:5px; border-radius:50%; background:#e6c45b; box-shadow: 0 0 18px rgba(230,196,91,.75); animation: hkwLightFloat 7s ease-in-out infinite; } .hkw-light-1{ top:22%; right:8%; } .hkw-light-2{ top:50%; left:7%; animation-delay:-2s; } .hkw-light-3{ bottom:14%; right:20%; animation-delay:-4s; } @keyframes hkwLightFloat{ 0%, 100%{ opacity:.2; transform: translateY(0) scale(1); } 50%{ opacity:1; transform: translateY(-18px) scale(1.6); } } /* ========================================================== HEADING ========================================================== */ .hkw-heading{ position:relative; z-index:5; width:min( 920px, calc(100% - 30px) ); margin: 0 auto 44px; text-align:center; } .hkw-badge{ display:inline-flex; align-items:center; justify-content:center; margin-bottom:17px; padding: 8px 16px; border: 1px solid rgba(239,211,109,.20); border-radius:999px; background: rgba(201,152,42,.08); color:#e8c65e; font-size:12px; font-weight:900; } .hkw-heading h2{ margin:0; color:#ffffff; font-size: clamp( 40px, 5vw, 60px ); line-height:1.25; font-weight:900; letter-spacing:-1px; } .hkw-heading h2 span{ display:block; margin-top:5px; background: linear-gradient( 90deg, #a87919, #efd36d, #bc8920 ); -webkit-background-clip:text; background-clip:text; color:transparent; } .hkw-heading p{ max-width:790px; margin: 20px auto 0; color:#c4beb4; font-size:17px; line-height:2; font-weight:500; } /* ========================================================== SLIDER ========================================================== */ .hkw-slider{ position:relative; width:100%; overflow:hidden; direction:ltr; padding: 24px 0 36px; } /* ========================================================== SIDE FADES ========================================================== */ .hkw-side-fade{ position:absolute; z-index:30; top:0; bottom:0; width:5vw; pointer-events:none; } .hkw-side-fade-left{ left:0; background: linear-gradient( 90deg, #0a0805 0%, rgba(10,8,5,.58) 35%, transparent 100% ); } .hkw-side-fade-right{ right:0; background: linear-gradient( -90deg, #0a0805 0%, rgba(10,8,5,.58) 35%, transparent 100% ); } /* ========================================================== TRACK ========================================================== */ .hkw-track{ display:flex; align-items:center; width:max-content; gap: var(--hkw-gap); will-change: transform; animation: hkwMoveRight 88s linear infinite; } @keyframes hkwMoveRight{ from{ transform: translate3d( calc(-50% - (var(--hkw-gap) / 2)), 0, 0 ); } to{ transform: translate3d( 0, 0, 0 ); } } /* ========================================================== GROUP ========================================================== */ .hkw-group{ display:flex; align-items:center; gap: var(--hkw-gap); flex-shrink:0; } /* ========================================================== CARD NO INNER SPACE ========================================================== */ .hkw-card{ position:relative; flex: 0 0 clamp( 225px, 18vw, 280px ); width: clamp( 225px, 18vw, 280px ); aspect-ratio: 8 / 13; padding:0; overflow:hidden; border-radius: 25px; background:#080705; border: 1px solid rgba(239,211,109,.40); box-shadow: 0 24px 55px rgba(0,0,0,.48), 0 0 0 1px rgba(201,152,42,.08), 0 0 30px rgba(201,152,42,.08); transform: translateZ(0); transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease; } /* ========================================================== PREMIUM FRAME الفريم فوق الصورة وليس بجانبها ========================================================== */ .hkw-card::before{ content:""; position:absolute; z-index:10; inset:0; border-radius:inherit; pointer-events:none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), inset 0 0 0 4px rgba(5,4,2,.18), inset 0 0 0 5px rgba(201,152,42,.22), inset 0 0 35px rgba(0,0,0,.12); } /* ========================================================== TOP GOLD SHINE ========================================================== */ .hkw-card::after{ content:""; position:absolute; z-index:11; top:0; left:17%; width:66%; height:2px; border-radius:999px; background: linear-gradient( 90deg, transparent, #b57d16, #fff0a0, #c9982a, #fff0a0, #b57d16, transparent ); box-shadow: 0 0 14px rgba(239,211,109,.62); pointer-events:none; } /* ========================================================== IMAGE FULL COVER NO GAP ========================================================== */ .hkw-card img{ position:absolute; inset:0; z-index:1; width:100%; height:100%; display:block; margin:0; padding:0; border:0; border-radius:inherit; object-fit:cover; object-position:center center; transform: scale(1.001); transition: transform .75s cubic-bezier(.2,.7,.2,1), filter .4s ease; } /* ========================================================== HOVER ========================================================== */ .hkw-card:hover{ transform: translateY(-8px) scale(1.018); border-color: rgba(239,211,109,.72); box-shadow: 0 38px 78px rgba(0,0,0,.58), 0 0 0 1px rgba(239,211,109,.18), 0 0 42px rgba(201,152,42,.20); } .hkw-card:hover img{ transform: scale(1.025); filter: brightness(1.035) saturate(1.03); } /* ========================================================== TABLET ========================================================== */ @media(max-width:1000px){ .hkw-showcase{ padding: 84px 0 76px; } .hkw-heading{ margin-bottom: 36px; } .hkw-heading h2{ font-size: 43px; } .hkw-card{ flex-basis: 240px; width: 240px; aspect-ratio: 8 / 13; border-radius: 23px; } .hkw-track{ animation-duration: 82s; } } /* ========================================================== MOBILE ========================================================== */ @media(max-width:600px){ .hkw-showcase{ padding: 64px 0 58px; } .hkw-grid{ opacity:.07; background-size: 44px 44px; } .hkw-heading{ width: calc(100% - 26px); margin-bottom: 25px; } .hkw-badge{ font-size: 10px; } .hkw-heading h2{ font-size: 32px; line-height: 1.35; } .hkw-heading p{ margin-top: 15px; font-size: 15px; line-height: 1.9; } .hkw-slider{ --hkw-gap:13px; padding: 16px 0 27px; } /* ====================================================== MOBILE CARD ====================================================== */ .hkw-card{ flex-basis: 54vw; width: 54vw; min-width: 190px; max-width: 225px; aspect-ratio: 8 / 13; padding:0; border-radius: 21px; box-shadow: 0 20px 44px rgba(0,0,0,.46), 0 0 24px rgba(201,152,42,.08); } .hkw-card::before{ box-shadow: inset 0 0 0 1px rgba(255,255,255,.13), inset 0 0 0 3px rgba(5,4,2,.15), inset 0 0 0 4px rgba(201,152,42,.20); } .hkw-card img{ position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; object-fit:cover; object-position:center; border-radius:inherit; } .hkw-track{ animation-duration: 75s; } .hkw-side-fade{ width: 2.5vw; } } /* ========================================================== SMALL MOBILE ========================================================== */ @media(max-width:390px){ .hkw-card{ flex-basis: 55vw; width: 55vw; min-width: 185px; max-width: 215px; } .hkw-heading h2{ font-size: 30px; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-b292428 *//* ========================================================== HAMED ELKHESHN PREMIUM PROCESS SECTION ========================================================== */ .hkp-process{ --hkp-gold:#c9982a; --hkp-gold-dark:#9c7017; --hkp-gold-light:#efd36d; position:relative; isolation:isolate; overflow:hidden; padding:110px 20px 105px; background: radial-gradient( circle at 50% 45%, rgba(201,152,42,.10), transparent 34% ), linear-gradient( 145deg, #080705 0%, #0e0c08 48%, #181207 100% ); } /* ========================================================== BACKGROUND ========================================================== */ .hkp-bg{ position:absolute; inset:0; z-index:-2; overflow:hidden; pointer-events:none; } .hkp-grid{ position:absolute; inset:-150px; opacity:.14; background-image: linear-gradient( rgba(255,255,255,.04) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.04) 1px, transparent 1px ); background-size:52px 52px; animation: hkpGridMove 16s linear infinite; mask-image: radial-gradient( circle at center, black 15%, transparent 75% ); } @keyframes hkpGridMove{ from{ background-position:0 0,0 0; } to{ background-position:52px 52px,-52px 52px; } } .hkp-glow{ position:absolute; border-radius:50%; filter:blur(100px); animation: hkpGlow 10s ease-in-out infinite alternate; } .hkp-glow-1{ width:420px; height:420px; top:-180px; right:-100px; background: rgba(201,152,42,.13); } .hkp-glow-2{ width:360px; height:360px; bottom:-160px; left:-80px; background: rgba(201,152,42,.09); animation-delay:-4s; } @keyframes hkpGlow{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(30px,-35px,0); } } /* ========================================================== CONTAINER ========================================================== */ .hkp-container{ width:min(1200px,100%); margin:auto; text-align:center; } /* ========================================================== HEADING ========================================================== */ .hkp-heading{ max-width:850px; margin:0 auto 65px; text-align:center; } .hkp-badge{ display:inline-flex; align-items:center; justify-content:center; margin-bottom:17px; padding:8px 15px; border: 1px solid rgba(239,211,109,.18); border-radius:999px; background: rgba(201,152,42,.075); color:#ebcb68; font-size:13px; font-weight:900; } .hkp-heading h2{ margin:0; color:#ffffff; font-size: clamp(38px,5vw,58px); line-height:1.25; font-weight:900; letter-spacing:-1px; } .hkp-heading h2 span{ display:block; margin-top:3px; background: linear-gradient( 90deg, #a97b1d, #efd36d, #bc8b21 ); -webkit-background-clip:text; background-clip:text; color:transparent; } .hkp-heading p{ max-width:760px; margin:20px auto 0; color:#cbc6bc; font-size:17px; line-height:2; font-weight:500; } /* ========================================================== STAGE ========================================================== */ .hkp-stage{ position:relative; width:min(1050px,100%); min-height:720px; margin:0 auto; display:flex; align-items:center; justify-content:center; } /* ========================================================== RINGS ========================================================== */ .hkp-ring{ position:absolute; border-radius:50%; pointer-events:none; } .hkp-ring-one{ width:510px; height:510px; border: 1px solid rgba(201,152,42,.15); animation: hkpRotate 28s linear infinite; } .hkp-ring-one::before{ content:""; position:absolute; width:8px; height:8px; top:25px; left:115px; border-radius:50%; background:#ebcb68; box-shadow: 0 0 20px rgba(235,203,104,.8); } .hkp-ring-two{ width:650px; height:650px; border: 1px dashed rgba(201,152,42,.10); animation: hkpRotateReverse 38s linear infinite; } @keyframes hkpRotate{ to{ transform:rotate(360deg); } } @keyframes hkpRotateReverse{ to{ transform:rotate(-360deg); } } /* ========================================================== CENTER CORE ========================================================== */ .hkp-core{ position:absolute; z-index:5; width:230px; height:230px; display:flex; flex-direction:column; align-items:center; justify-content:center; border: 1px solid rgba(239,211,109,.25); border-radius:50%; background: radial-gradient( circle, rgba(201,152,42,.17), rgba(201,152,42,.04) 45%, rgba(9,8,6,.96) 75% ); box-shadow: 0 0 80px rgba(201,152,42,.12), inset 0 0 40px rgba(201,152,42,.06); } .hkp-core::before{ content:""; position:absolute; inset:12px; border: 1px dashed rgba(239,211,109,.14); border-radius:50%; animation: hkpRotate 18s linear infinite; } .hkp-core-small{ position:relative; z-index:2; margin-bottom:8px; color:#bca45e; font-size:11px; font-weight:900; } .hkp-core strong{ position:relative; z-index:2; color:#f2d36e; font-size:27px; line-height:1.45; font-weight:900; } .hkp-core-pulse{ position:absolute; inset:-14px; border: 1px solid rgba(201,152,42,.18); border-radius:50%; animation: hkpPulse 3s ease-out infinite; } @keyframes hkpPulse{ 0%{ transform:scale(.92); opacity:.9; } 100%{ transform:scale(1.18); opacity:0; } } /* ========================================================== STEPS ========================================================== */ .hkp-step{ position:absolute; z-index:6; width:260px; padding:22px 20px 21px; border: 1px solid rgba(239,211,109,.12); border-radius:18px; background: linear-gradient( 145deg, rgba(255,255,255,.07), rgba(255,255,255,.025) ); backdrop-filter:blur(12px); box-shadow: 0 22px 50px rgba(0,0,0,.20); text-align:center; transition: transform .3s ease, border-color .3s ease, background .3s ease, box-shadow .3s ease; } .hkp-step:hover{ transform: translateY(-7px); border-color: rgba(201,152,42,.28); background: linear-gradient( 145deg, rgba(201,152,42,.11), rgba(255,255,255,.035) ); box-shadow: 0 30px 65px rgba(0,0,0,.28); } /* positions */ .hkp-step-1{ top:25px; left:50%; transform: translateX(-50%); } .hkp-step-1:hover{ transform: translateX(-50%) translateY(-7px); } .hkp-step-2{ top:180px; right:20px; } .hkp-step-3{ bottom:40px; right:150px; } .hkp-step-4{ bottom:40px; left:150px; } .hkp-step-5{ top:180px; left:20px; } /* ========================================================== STEP NUMBER ========================================================== */ .hkp-step-number{ position:absolute; top:14px; left:16px; color: rgba(239,211,109,.23); font-size:25px; line-height:1; font-weight:900; } /* ========================================================== STEP ICON ========================================================== */ .hkp-step-icon{ width:50px; height:50px; display:flex; align-items:center; justify-content:center; margin:0 auto 15px; border: 1px solid rgba(201,152,42,.19); border-radius:14px; background: rgba(201,152,42,.08); } .hkp-step-icon svg{ width:23px; height:23px; fill:none; stroke:#e4bf55; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .hkp-step h3{ margin: 0 0 9px; color:#ffffff; font-size:18px; line-height:1.5; font-weight:900; } .hkp-step p{ margin:0; color:#bcb7ae; font-size:13.5px; line-height:1.8; font-weight:500; } /* ========================================================== SUMMARY ========================================================== */ .hkp-summary{ max-width:900px; display:flex; align-items:center; justify-content:center; gap:18px; margin: 25px auto 0; } .hkp-summary-line{ flex:1; height:1px; background: linear-gradient( 90deg, transparent, rgba(201,152,42,.25) ); } .hkp-summary-line:last-child{ background: linear-gradient( -90deg, transparent, rgba(201,152,42,.25) ); } .hkp-summary p{ margin:0; color:#aba69d; font-size:13px; font-weight:700; line-height:1.8; } /* ========================================================== TABLET ========================================================== */ @media(max-width:950px){ .hkp-process{ padding: 90px 18px; } .hkp-stage{ min-height:auto; display:grid; grid-template-columns: repeat(2,1fr); gap:15px; margin-top:45px; } .hkp-ring, .hkp-core{ display:none; } .hkp-step{ position:relative; inset:auto; width:100%; transform:none !important; min-height:220px; display:flex; flex-direction:column; justify-content:center; } .hkp-step:hover{ transform: translateY(-6px) !important; } .hkp-step-5{ grid-column: 1 / -1; width:calc(50% - 8px); justify-self:center; } } /* ========================================================== MOBILE ========================================================== */ @media(max-width:600px){ .hkp-process{ padding: 70px 13px 65px; } .hkp-heading{ margin-bottom:35px; } .hkp-badge{ font-size:11px; } .hkp-heading h2{ font-size:34px; line-height:1.35; } .hkp-heading p{ margin-top:17px; font-size:15px; line-height:1.9; } .hkp-stage{ grid-template-columns:1fr; gap:11px; margin-top:30px; } .hkp-step, .hkp-step-5{ width:100%; min-height:auto; grid-column:auto; padding: 22px 18px; } .hkp-step-icon{ width:47px; height:47px; margin-bottom:13px; } .hkp-step h3{ font-size:18px; } .hkp-step p{ font-size:13.5px; } .hkp-summary{ margin-top:32px; } .hkp-summary-line{ display:none; } .hkp-summary p{ max-width:310px; } .hkp-grid{ opacity:.09; } } /* ========================================================== REDUCED MOTION ========================================================== */ @media(prefers-reduced-motion:reduce){ .hkp-grid, .hkp-glow, .hkp-ring, .hkp-core::before, .hkp-core-pulse{ animation:none !important; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-a72d65d *//* ========================================================== HAMED ELKHESHN 20 IMAGE AUTO RESULTS SLIDER 3 SECONDS PER IMAGE ========================================================== */ .hkr-results{ --hkr-black:#0b0a07; --hkr-dark:#12100b; --hkr-gold:#c9982a; --hkr-gold-dark:#966a14; --hkr-gold-light:#efd36d; position:relative; isolation:isolate; overflow:hidden; padding: 110px 20px 100px; background: radial-gradient( circle at 50% 45%, rgba(201,152,42,.09), transparent 33% ), linear-gradient( 180deg, #fffdf8 0%, #f9f3e8 50%, #f3e7d3 100% ); } /* ========================================================== BACKGROUND ========================================================== */ .hkr-bg{ position:absolute; inset:0; z-index:-2; overflow:hidden; pointer-events:none; } /* MOVING GRID */ .hkr-grid{ position:absolute; inset:-150px; opacity:.16; background-image: linear-gradient( rgba(156,112,23,.06) 1px, transparent 1px ), linear-gradient( 90deg, rgba(156,112,23,.06) 1px, transparent 1px ); background-size: 58px 58px; animation: hkrGridMove 18s linear infinite; mask-image: radial-gradient( ellipse at center, black 15%, transparent 78% ); } @keyframes hkrGridMove{ from{ background-position: 0 0, 0 0; } to{ background-position: 58px 58px, -58px 58px; } } /* GLOWS */ .hkr-glow{ position:absolute; border-radius:50%; filter:blur(100px); animation: hkrGlowMove 11s ease-in-out infinite alternate; } .hkr-glow-one{ width:450px; height:450px; top:100px; right:-250px; background: rgba(201,152,42,.13); } .hkr-glow-two{ width:420px; height:420px; bottom:-180px; left:-220px; background: rgba(201,152,42,.10); animation-delay:-4s; } @keyframes hkrGlowMove{ from{ transform: translate3d(0,0,0); } to{ transform: translate3d(35px,-30px,0); } } /* SMALL LIGHTS */ .hkr-light{ position:absolute; width:5px; height:5px; border-radius:50%; background:#d9b347; box-shadow: 0 0 15px rgba(217,179,71,.65); animation: hkrLightFloat 6s ease-in-out infinite; } .hkr-light-1{ top:25%; right:8%; } .hkr-light-2{ top:60%; left:8%; animation-delay:-2s; } .hkr-light-3{ top:17%; left:20%; animation-delay:-4s; } .hkr-light-4{ bottom:16%; right:22%; animation-delay:-1s; } @keyframes hkrLightFloat{ 0%, 100%{ transform: translateY(0) scale(1); opacity:.25; } 50%{ transform: translateY(-18px) scale(1.6); opacity:1; } } /* ========================================================== CONTAINER ========================================================== */ .hkr-container{ position:relative; z-index:2; width:min( 1180px, 100% ); margin:auto; } /* ========================================================== HEADING ========================================================== */ .hkr-heading{ max-width:900px; margin: 0 auto 58px; text-align:center; } .hkr-eyebrow{ display:inline-flex; align-items:center; justify-content:center; margin-bottom:16px; padding: 8px 15px; border: 1px solid rgba(156,112,23,.17); border-radius:999px; background: rgba(201,152,42,.07); color: var(--hkr-gold-dark); font-size:13px; font-weight:900; } .hkr-heading h2{ margin:0; color:#12110e; font-size: clamp(40px,5vw,60px); line-height:1.22; font-weight:900; letter-spacing:-1px; } .hkr-heading h2 span{ display:block; margin-top:5px; color: var(--hkr-gold-dark); } .hkr-heading p{ max-width:780px; margin: 20px auto 0; color:#686157; font-size:17px; line-height:2; font-weight:500; } /* ========================================================== STAGE ========================================================== */ .hkr-stage{ position:relative; width:min( 1050px, 100% ); display:flex; align-items:center; justify-content:center; margin:auto; padding: 35px 0; } /* ========================================================== ORBITS ========================================================== */ .hkr-orbit{ position:absolute; top:50%; left:50%; border-radius:50%; pointer-events:none; } .hkr-orbit-one{ width:760px; height:760px; transform: translate(-50%,-50%); border: 1px solid rgba(201,152,42,.11); animation: hkrRotate 35s linear infinite; } .hkr-orbit-one::before{ content:""; position:absolute; width:8px; height:8px; top:60px; left:130px; border-radius:50%; background:#d9b347; box-shadow: 0 0 20px rgba(217,179,71,.65); } .hkr-orbit-two{ width:900px; height:900px; transform: translate(-50%,-50%); border: 1px dashed rgba(201,152,42,.07); animation: hkrRotateReverse 47s linear infinite; } @keyframes hkrRotate{ from{ transform: translate(-50%,-50%) rotate(0deg); } to{ transform: translate(-50%,-50%) rotate(360deg); } } @keyframes hkrRotateReverse{ from{ transform: translate(-50%,-50%) rotate(360deg); } to{ transform: translate(-50%,-50%) rotate(0deg); } } /* ========================================================== SLIDER ========================================================== */ .hkr-slider{ position:relative; z-index:5; width:min( 920px, 92vw ); overflow:hidden; border: 1px solid rgba(201,152,42,.25); border-radius:28px; background:#0b0a07; box-shadow: 0 40px 100px rgba(48,34,8,.22), 0 0 100px rgba(201,152,42,.08); } /* TOP GOLD LINE */ .hkr-slider-line{ position:absolute; z-index:20; top:0; right:15%; width:70%; height:2px; background: linear-gradient( 90deg, transparent, #a87818, #efd36d, #a87818, transparent ); } /* ========================================================== IMAGE SLIDES 16:9 ========================================================== */ .hkr-slides{ position:relative; width:100%; aspect-ratio:16 / 9; overflow:hidden; background:#0c0b08; } .hkr-slide{ position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; object-position:center center; opacity:0; transform: scale(1.045); animation: hkrAutoSlide 60s infinite; will-change: opacity, transform; } /* ========================================================== 20 IMAGES EVERY 3 SECONDS ========================================================== */ .hkr-slide:nth-child(1){ animation-delay:0s; } .hkr-slide:nth-child(2){ animation-delay:3s; } .hkr-slide:nth-child(3){ animation-delay:6s; } .hkr-slide:nth-child(4){ animation-delay:9s; } .hkr-slide:nth-child(5){ animation-delay:12s; } .hkr-slide:nth-child(6){ animation-delay:15s; } .hkr-slide:nth-child(7){ animation-delay:18s; } .hkr-slide:nth-child(8){ animation-delay:21s; } .hkr-slide:nth-child(9){ animation-delay:24s; } .hkr-slide:nth-child(10){ animation-delay:27s; } .hkr-slide:nth-child(11){ animation-delay:30s; } .hkr-slide:nth-child(12){ animation-delay:33s; } .hkr-slide:nth-child(13){ animation-delay:36s; } .hkr-slide:nth-child(14){ animation-delay:39s; } .hkr-slide:nth-child(15){ animation-delay:42s; } .hkr-slide:nth-child(16){ animation-delay:45s; } .hkr-slide:nth-child(17){ animation-delay:48s; } .hkr-slide:nth-child(18){ animation-delay:51s; } .hkr-slide:nth-child(19){ animation-delay:54s; } .hkr-slide:nth-child(20){ animation-delay:57s; } /* ========================================================== SLIDE ANIMATION ========================================================== */ @keyframes hkrAutoSlide{ 0%{ opacity:0; transform: scale(1.045); } 0.5%{ opacity:1; } 4.2%{ opacity:1; transform: scale(1); } 5%{ opacity:0; transform: scale(.995); } 100%{ opacity:0; } } /* ========================================================== IMAGE OVERLAY ========================================================== */ .hkr-image-overlay{ position:absolute; z-index:6; inset:0; pointer-events:none; background: linear-gradient( 180deg, rgba(0,0,0,.02) 45%, rgba(4,4,3,.18) 66%, rgba(4,4,3,.90) 100% ); } /* ========================================================== ARABIC QUALITY BADGE ========================================================== */ .hkr-quality{ position:absolute; z-index:30; top:23px; right:23px; } .hkr-quality-ring{ position:relative; width:105px; height:105px; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:50%; border: 2px solid rgba(29,20,4,.25); background: linear-gradient( 145deg, #f1d675 0%, #d4a63a 45%, #a87616 100% ); color:#171005; text-align:center; box-shadow: 0 15px 35px rgba(0,0,0,.28), 0 0 30px rgba(201,152,42,.20); animation: hkrSealFloat 4s ease-in-out infinite; } .hkr-quality-ring::before{ content:""; position:absolute; inset:-7px; border: 1px dashed rgba(201,152,42,.75); border-radius:50%; animation: hkrSealRotate 18s linear infinite; } .hkr-quality-ring::after{ content:""; position:absolute; inset:7px; border: 1px solid rgba(56,38,5,.18); border-radius:50%; } .hkr-quality-star{ position:relative; z-index:2; margin-bottom:2px; font-size:13px; } .hkr-quality-ring strong{ position:relative; z-index:2; font-size:21px; line-height:1; font-weight:900; } .hkr-quality-ring small{ position:relative; z-index:2; margin-top:5px; font-size:10px; font-weight:900; } @keyframes hkrSealFloat{ 0%, 100%{ transform: translateY(0); } 50%{ transform: translateY(-6px); } } @keyframes hkrSealRotate{ to{ transform: rotate(360deg); } } /* ========================================================== CAPTION ========================================================== */ .hkr-caption{ position:absolute; z-index:10; right:0; bottom:0; left:0; padding: 70px 30px 28px; text-align:center; } .hkr-caption span{ display:block; margin-bottom:7px; color:#e4bf57; font-size:11px; font-weight:900; } .hkr-caption strong{ display:block; color:#ffffff; font-size: clamp(21px,3vw,32px); line-height:1.45; font-weight:900; } /* ========================================================== BOTTOM NOTE ========================================================== */ .hkr-bottom{ max-width:900px; display:flex; align-items:center; justify-content:center; gap:18px; margin: 42px auto 0; text-align:center; } .hkr-bottom > span{ flex:1; height:1px; background: linear-gradient( 90deg, transparent, rgba(156,112,23,.24) ); } .hkr-bottom > span:last-child{ background: linear-gradient( -90deg, transparent, rgba(156,112,23,.24) ); } .hkr-bottom p{ max-width:590px; margin:0; color:#71695e; font-size:13px; line-height:1.8; font-weight:700; } /* ========================================================== TABLET ========================================================== */ @media(max-width:921px){ .hkr-results{ padding: 90px 18px 80px; } .hkr-heading{ margin-bottom:45px; } .hkr-heading h2{ font-size:45px; } .hkr-stage{ width:100%; } .hkr-slider{ width:min( 820px, 92vw ); } .hkr-orbit-one{ width:620px; height:620px; } .hkr-orbit-two{ width:750px; height:750px; } .hkr-quality-ring{ width:90px; height:90px; } .hkr-quality-ring strong{ font-size:18px; } } /* ========================================================== MOBILE ========================================================== */ @media(max-width:600px){ .hkr-results{ padding: 68px 12px 62px; } .hkr-grid{ opacity:.09; background-size: 43px 43px; } .hkr-heading{ margin-bottom:32px; } .hkr-eyebrow{ font-size:11px; } .hkr-heading h2{ font-size:34px; line-height:1.35; } .hkr-heading p{ margin-top:16px; font-size:15px; line-height:1.9; } .hkr-stage{ padding: 20px 0; } .hkr-slider{ width:95vw; max-width:440px; border-radius:18px; box-shadow: 0 25px 60px rgba(40,29,8,.20), 0 0 50px rgba(201,152,42,.06); } .hkr-slides{ aspect-ratio:16 / 9; } .hkr-quality{ top:12px; right:12px; } .hkr-quality-ring{ width:67px; height:67px; border-width:1px; } .hkr-quality-ring::before{ inset:-4px; } .hkr-quality-star{ margin-bottom:0; font-size:8px; } .hkr-quality-ring strong{ font-size:14px; } .hkr-quality-ring small{ margin-top:3px; font-size:7px; } .hkr-caption{ padding: 45px 12px 13px; } .hkr-caption span{ margin-bottom:3px; font-size:8px; } .hkr-caption strong{ font-size:16px; line-height:1.4; } .hkr-orbit-one{ width:350px; height:350px; } .hkr-orbit-two{ width:430px; height:430px; } .hkr-bottom{ margin-top:30px; } .hkr-bottom > span{ display:none; } .hkr-bottom p{ max-width:310px; font-size:11px; } } /* ========================================================== REDUCED MOTION ========================================================== */ @media(prefers-reduced-motion:reduce){ .hkr-grid, .hkr-glow, .hkr-light, .hkr-orbit, .hkr-quality-ring, .hkr-quality-ring::before{ animation:none !important; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-4949b3c *//* ========================================================== HAMED ELKHESHN PREMIUM ABOUT / PERSONAL BRAND SECTION PORTRAIT IMAGE VERSION ========================================================== */ .hka-about{ --hka-gold:#c9982a; --hka-gold-dark:#9c7017; --hka-gold-light:#efd36d; position:relative; isolation:isolate; width:100%; overflow:hidden; padding: 110px 20px 105px; background: radial-gradient( circle at 50% 39%, rgba(201,152,42,.13), transparent 31% ), radial-gradient( circle at 50% 75%, rgba(201,152,42,.05), transparent 32% ), linear-gradient( 145deg, #080705 0%, #0f0d08 48%, #181207 100% ); } /* ========================================================== BACKGROUND ========================================================== */ .hka-bg{ position:absolute; inset:0; z-index:-2; overflow:hidden; pointer-events:none; } /* MOVING GRID */ .hka-grid{ position:absolute; inset:-170px; opacity:.13; background-image: linear-gradient( rgba(255,255,255,.04) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.04) 1px, transparent 1px ); background-size: 54px 54px; animation: hkaGridMove 18s linear infinite; -webkit-mask-image: radial-gradient( ellipse at center, black 15%, transparent 76% ); mask-image: radial-gradient( ellipse at center, black 15%, transparent 76% ); } @keyframes hkaGridMove{ from{ background-position: 0 0, 0 0; } to{ background-position: 54px 54px, -54px 54px; } } /* ========================================================== BACKGROUND GLOWS ========================================================== */ .hka-glow{ position:absolute; border-radius:50%; filter:blur(100px); animation: hkaGlow 10s ease-in-out infinite alternate; } .hka-glow-1{ width:430px; height:430px; top:-190px; right:-120px; background: rgba(201,152,42,.14); } .hka-glow-2{ width:380px; height:380px; bottom:-180px; left:-100px; background: rgba(201,152,42,.09); animation-delay:-4s; } @keyframes hkaGlow{ from{ transform: translate3d(0,0,0); } to{ transform: translate3d(35px,-30px,0); } } /* ========================================================== SMALL LIGHTS ========================================================== */ .hka-light{ position:absolute; width:5px; height:5px; border-radius:50%; background:#e1bd54; box-shadow: 0 0 15px rgba(225,189,84,.70); animation: hkaLight 7s ease-in-out infinite; } .hka-light-1{ top:19%; right:12%; } .hka-light-2{ top:45%; left:9%; animation-delay:-2s; } .hka-light-3{ bottom:18%; right:16%; animation-delay:-4s; } .hka-light-4{ top:28%; left:25%; animation-delay:-1s; } @keyframes hkaLight{ 0%, 100%{ opacity:.25; transform: translateY(0) scale(1); } 50%{ opacity:1; transform: translateY(-20px) scale(1.6); } } /* ========================================================== CONTAINER ========================================================== */ .hka-container{ position:relative; z-index:2; width:min( 1180px, 100% ); margin:0 auto; text-align:center; } /* ========================================================== HEADING ========================================================== */ .hka-heading{ max-width:900px; margin: 0 auto 50px; text-align:center; } .hka-eyebrow{ display:inline-flex; align-items:center; justify-content:center; margin-bottom:17px; padding: 8px 15px; border: 1px solid rgba(239,211,109,.18); border-radius:999px; background: rgba(201,152,42,.07); color:#ebcb68; font-size:13px; line-height:1.5; font-weight:900; } .hka-heading h2{ max-width:900px; margin:0 auto; color:#ffffff; font-size: clamp(39px,5vw,58px); line-height:1.25; font-weight:900; letter-spacing:-1px; text-align:center; } .hka-heading h2 span{ display:block; margin-top:5px; background: linear-gradient( 90deg, #a87a1d 0%, #efd36d 50%, #bd8b20 100% ); -webkit-background-clip:text; background-clip:text; color:transparent; } .hka-heading p{ max-width:780px; margin: 20px auto 0; color:#c9c4ba; font-size:17px; line-height:2; font-weight:500; text-align:center; } /* ========================================================== VISUAL ========================================================== */ .hka-visual{ position:relative; width:min( 760px, 100% ); min-height:650px; display:flex; align-items:center; justify-content:center; margin: 0 auto 45px; } /* ========================================================== ORBITS ========================================================== */ .hka-orbit{ position:absolute; border-radius:50%; pointer-events:none; } .hka-orbit-one{ width:520px; height:520px; border: 1px solid rgba(201,152,42,.15); animation: hkaRotate 30s linear infinite; } .hka-orbit-one::before{ content:""; position:absolute; width:8px; height:8px; top:32px; left:90px; border-radius:50%; background:#e3be55; box-shadow: 0 0 20px rgba(227,190,85,.70); } .hka-orbit-one::after{ content:""; position:absolute; width:5px; height:5px; right:32px; bottom:95px; border-radius:50%; background:#c9982a; box-shadow: 0 0 15px rgba(201,152,42,.75); } .hka-orbit-two{ width:650px; height:650px; border: 1px dashed rgba(201,152,42,.08); animation: hkaRotateReverse 42s linear infinite; } @keyframes hkaRotate{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } } @keyframes hkaRotateReverse{ from{ transform: rotate(360deg); } to{ transform: rotate(0deg); } } /* ========================================================== PORTRAIT PERSONAL PHOTO ========================================================== */ .hka-photo-card{ position:relative; z-index:5; width:min( 390px, 82vw ); overflow:hidden; border: 1px solid rgba(239,211,109,.24); border-radius:28px; background:#111111; box-shadow: 0 42px 105px rgba(0,0,0,.50), 0 0 90px rgba(201,152,42,.11); transition: transform .35s ease, box-shadow .35s ease; } .hka-photo-card:hover{ transform: translateY(-6px); box-shadow: 0 52px 120px rgba(0,0,0,.55), 0 0 110px rgba(201,152,42,.14); } .hka-photo-card::before{ content:""; position:absolute; z-index:8; inset:0; border-radius:inherit; pointer-events:none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.035); } /* gold top line */ .hka-photo-card::after{ content:""; position:absolute; z-index:10; top:0; right:18%; width:64%; height:2px; background: linear-gradient( 90deg, transparent, #a97b1c, #efd36d, #a97b1c, transparent ); } /* ========================================================== PHOTO GLOW ========================================================== */ .hka-photo-glow{ position:absolute; z-index:0; width:310px; height:310px; top:70px; left:50%; transform: translateX(-50%); border-radius:50%; background: rgba(201,152,42,.20); filter: blur(65px); } /* ========================================================== PORTRAIT IMAGE ========================================================== */ .hka-photo-card img{ position:relative; z-index:1; width:100%; aspect-ratio:4 / 5; display:block; object-fit:cover; object-position:center top; transition: transform .8s ease; } .hka-photo-card:hover img{ transform: scale(1.035); } /* ========================================================== PHOTO OVERLAY ========================================================== */ .hka-photo-overlay{ position:absolute; z-index:3; inset:0; pointer-events:none; background: linear-gradient( 180deg, transparent 45%, rgba(8,7,5,.10) 57%, rgba(8,7,5,.38) 72%, rgba(8,7,5,.97) 100% ); } /* ========================================================== PHOTO CAPTION ========================================================== */ .hka-photo-caption{ position:absolute; z-index:5; right:0; bottom:0; left:0; padding: 100px 24px 25px; text-align:center; } .hka-photo-caption > span{ display:block; margin-bottom:5px; color:#b7b1a7; font-size:11px; font-weight:700; } .hka-photo-caption strong{ display:block; color:#edcd68; font-size:25px; line-height:1.4; font-weight:900; } .hka-photo-caption small{ display:block; max-width:300px; margin: 6px auto 0; color:#c5c0b7; font-size:11px; line-height:1.6; font-weight:600; } /* ========================================================== PRINCIPLES GRID ========================================================== */ .hka-principles{ display:grid; grid-template-columns: repeat(4,1fr); gap:14px; margin-top:15px; } /* ========================================================== PRINCIPLE CARD ========================================================== */ .hka-principle{ position:relative; overflow:hidden; min-height:275px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding: 25px 20px; border: 1px solid rgba(239,211,109,.11); border-radius:18px; background: linear-gradient( 145deg, rgba(255,255,255,.065), rgba(255,255,255,.025) ); backdrop-filter: blur(10px); box-shadow: 0 18px 45px rgba(0,0,0,.14); text-align:center; transition: transform .3s ease, border-color .3s ease, background .3s ease, box-shadow .3s ease; } .hka-principle::before{ content:""; position:absolute; width:150px; height:150px; top:-100px; left:-100px; border-radius:50%; background: rgba(201,152,42,.11); filter: blur(5px); transition: transform .4s ease; } .hka-principle:hover{ transform: translateY(-8px); border-color: rgba(201,152,42,.25); background: linear-gradient( 145deg, rgba(201,152,42,.10), rgba(255,255,255,.03) ); box-shadow: 0 28px 60px rgba(0,0,0,.23); } .hka-principle:hover::before{ transform: scale(1.5); } /* ========================================================== NUMBER ========================================================== */ .hka-number{ position:absolute; top:14px; left:16px; color: rgba(239,211,109,.20); font-size:27px; line-height:1; font-weight:900; } /* ========================================================== ICON ========================================================== */ .hka-icon{ position:relative; z-index:2; width:50px; height:50px; display:flex; align-items:center; justify-content:center; margin: 0 auto 15px; border: 1px solid rgba(201,152,42,.18); border-radius:14px; background: rgba(201,152,42,.08); } .hka-icon svg{ width:23px; height:23px; fill:none; stroke:#e4bf55; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } /* ========================================================== PRINCIPLE TEXT ========================================================== */ .hka-principle h3{ position:relative; z-index:2; margin: 0 0 10px; color:#ffffff; font-size:18px; line-height:1.5; font-weight:900; text-align:center; } .hka-principle p{ position:relative; z-index:2; margin:0; color:#bdb8af; font-size:13.5px; line-height:1.85; font-weight:500; text-align:center; } /* ========================================================== CTA ========================================================== */ .hka-cta{ max-width:820px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:18px; margin: 45px auto 0; padding: 20px 24px; border: 1px solid rgba(239,211,109,.13); border-radius:16px; background: rgba(255,255,255,.035); backdrop-filter: blur(10px); text-align:center; } .hka-cta > span{ color:#d8d3ca; font-size:15px; line-height:1.6; font-weight:700; } .hka-cta a{ min-height:46px; display:inline-flex; align-items:center; justify-content:center; gap:9px; padding: 11px 21px; border: 1px solid #d4aa3b; border-radius:10px; background: linear-gradient( 135deg, #966915, #c9982a, #efd36d ); color:#111111 !important; font-size:14px; font-weight:900; text-decoration:none !important; box-shadow: 0 10px 28px rgba(201,152,42,.20); transition: transform .25s ease, box-shadow .25s ease; } .hka-cta a:hover{ transform: translateY(-3px); box-shadow: 0 16px 35px rgba(201,152,42,.30); } .hka-cta i{ font-style:normal; font-size:17px; } /* ========================================================== TABLET ========================================================== */ @media(max-width:921px){ .hka-about{ padding: 90px 18px 85px; } .hka-heading h2{ font-size:44px; } .hka-visual{ min-height:610px; } .hka-orbit-one{ width:480px; height:480px; } .hka-orbit-two{ width:590px; height:590px; } .hka-photo-card{ width:min( 380px, 76vw ); } .hka-principles{ grid-template-columns: repeat(2,1fr); } } /* ========================================================== MOBILE ========================================================== */ @media(max-width:600px){ .hka-about{ padding: 68px 13px 65px; } .hka-grid{ opacity:.08; background-size: 43px 43px; } .hka-heading{ margin-bottom:32px; } .hka-eyebrow{ font-size:11px; } .hka-heading h2{ font-size:34px; line-height:1.35; } .hka-heading p{ margin-top:17px; font-size:15px; line-height:1.9; } /* ========================== MOBILE PORTRAIT IMAGE ========================== */ .hka-visual{ min-height:495px; margin-bottom:25px; } .hka-photo-card{ width:min( 330px, 86vw ); border-radius:20px; } .hka-photo-card img{ aspect-ratio:4 / 5; object-fit:cover; object-position:center top; } .hka-photo-caption{ padding: 75px 15px 18px; } .hka-photo-caption strong{ font-size:20px; } .hka-photo-caption small{ max-width:250px; font-size:9px; } .hka-orbit-one{ width:355px; height:355px; } .hka-orbit-two{ width:430px; height:430px; } /* ========================== PRINCIPLES ========================== */ .hka-principles{ grid-template-columns:1fr; gap:10px; } .hka-principle{ min-height:auto; padding: 24px 18px; } .hka-principle h3{ font-size:18px; } .hka-principle p{ font-size:13.5px; } /* ========================== CTA ========================== */ .hka-cta{ display:grid; grid-template-columns:1fr; margin-top:32px; padding: 18px 15px; } .hka-cta > span{ font-size:14px; } .hka-cta a{ width:100%; } } /* ========================================================== SMALL MOBILE ========================================================== */ @media(max-width:390px){ .hka-heading h2{ font-size:31px; } .hka-photo-card{ width:85vw; } .hka-visual{ min-height:455px; } .hka-orbit-one{ width:310px; height:310px; } .hka-orbit-two{ width:375px; height:375px; } } /* ========================================================== REDUCED MOTION ========================================================== */ @media(prefers-reduced-motion:reduce){ .hka-grid, .hka-glow, .hka-light, .hka-orbit{ animation:none !important; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-38c44d2 *//* ========================================================== HAMED ELKHESHN SEO-RICH DIGITAL MARKETING SECTION ========================================================== */ .hkg-growth{ --hkg-gold:#c9982a; --hkg-gold-dark:#946813; --hkg-gold-light:#efd36d; position:relative; isolation:isolate; overflow:hidden; padding: 110px 20px 105px; background: radial-gradient( circle at 50% 28%, rgba(201,152,42,.11), transparent 31% ), linear-gradient( 180deg, #fffdf8 0%, #faf4e8 55%, #f2e4cd 100% ); color:#1b1915; } /* ========================================================== BACKGROUND ========================================================== */ .hkg-bg{ position:absolute; inset:0; z-index:-2; overflow:hidden; pointer-events:none; } .hkg-pattern{ position:absolute; inset:-150px; opacity:.17; background-image: linear-gradient( rgba(156,112,23,.06) 1px, transparent 1px ), linear-gradient( 90deg, rgba(156,112,23,.06) 1px, transparent 1px ); background-size: 56px 56px; -webkit-mask-image: radial-gradient( ellipse at center, #000 15%, transparent 78% ); mask-image: radial-gradient( ellipse at center, #000 15%, transparent 78% ); animation: hkgPatternMove 20s linear infinite; } @keyframes hkgPatternMove{ from{ background-position: 0 0, 0 0; } to{ background-position: 56px 56px, -56px 56px; } } .hkg-glow{ position:absolute; border-radius:50%; filter:blur(110px); } .hkg-glow-1{ width:450px; height:450px; top:-200px; right:-200px; background: rgba(201,152,42,.14); } .hkg-glow-2{ width:400px; height:400px; bottom:-200px; left:-170px; background: rgba(201,152,42,.10); } /* ========================================================== CONTAINER ========================================================== */ .hkg-container{ position:relative; z-index:2; width:min( 1180px, 100% ); margin:auto; text-align:center; } /* ========================================================== HEADING ========================================================== */ .hkg-heading{ max-width:930px; margin: 0 auto 48px; text-align:center; } .hkg-eyebrow{ display:inline-flex; align-items:center; justify-content:center; margin-bottom:16px; padding: 8px 15px; border: 1px solid rgba(156,112,23,.18); border-radius:999px; background: rgba(201,152,42,.07); color: var(--hkg-gold-dark); font-size:13px; font-weight:900; } .hkg-heading h2{ margin:0; color:#15130f; font-size: clamp(40px,5vw,60px); line-height:1.25; font-weight:900; letter-spacing:-1px; } .hkg-heading h2 span{ display:block; margin-top:5px; color: var(--hkg-gold-dark); } .hkg-heading p{ max-width:840px; margin: 21px auto 0; color:#635d53; font-size:17px; line-height:2.05; font-weight:500; } .hkg-heading strong, .hkg-seo-panel strong, .hkg-knowledge strong, .hkg-final strong{ color:#805a10; font-weight:900; } /* ========================================================== MAIN SEO PANEL ========================================================== */ .hkg-seo-panel{ position:relative; overflow:hidden; max-width:1000px; margin: 0 auto 22px; padding: 37px 40px; border: 1px solid rgba(156,112,23,.17); border-radius:24px; background: rgba(255,255,255,.68); box-shadow: 0 25px 65px rgba(82,58,14,.08); backdrop-filter: blur(12px); text-align:center; } .hkg-seo-panel::before{ content:""; position:absolute; width:230px; height:230px; top:-170px; right:-100px; border-radius:50%; background: rgba(201,152,42,.10); } .hkg-seo-badge{ display:inline-flex; padding: 7px 13px; margin-bottom:14px; border-radius:999px; background: rgba(201,152,42,.08); color: var(--hkg-gold-dark); font-size:11px; font-weight:900; } .hkg-seo-panel h3{ position:relative; margin: 0 0 17px; color:#171510; font-size: clamp(25px,3vw,34px); line-height:1.45; font-weight:900; } .hkg-seo-panel p{ position:relative; max-width:880px; margin: 0 auto 13px; color:#625c52; font-size:15px; line-height:2; font-weight:500; } .hkg-seo-panel p:last-child{ margin-bottom:0; } /* ========================================================== PILLARS ========================================================== */ .hkg-pillars{ display:grid; grid-template-columns: repeat(4,1fr); gap:14px; margin: 22px 0; } .hkg-pillar{ position:relative; overflow:hidden; min-height:325px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding: 28px 20px; border: 1px solid rgba(156,112,23,.13); border-radius:20px; background: rgba(255,255,255,.72); box-shadow: 0 18px 48px rgba(70,52,15,.06); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; } .hkg-pillar::before{ content:""; position:absolute; width:150px; height:150px; top:-100px; left:-80px; border-radius:50%; background: rgba(201,152,42,.10); transition: transform .4s ease; } .hkg-pillar:hover{ transform: translateY(-7px); border-color: rgba(201,152,42,.28); box-shadow: 0 28px 62px rgba(70,52,15,.12); } .hkg-pillar:hover::before{ transform: scale(1.5); } .hkg-number{ position:absolute; top:15px; left:16px; color: rgba(156,112,23,.18); font-size:27px; font-weight:900; } .hkg-icon{ position:relative; z-index:2; width:52px; height:52px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; border: 1px solid rgba(201,152,42,.17); border-radius:15px; background: linear-gradient( 145deg, #ffffff, #f6ead3 ); } .hkg-icon svg{ width:24px; height:24px; fill:none; stroke: var(--hkg-gold-dark); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .hkg-pillar h3{ position:relative; z-index:2; margin: 0 0 11px; color:#191610; font-size:18px; line-height:1.55; font-weight:900; } .hkg-pillar p{ position:relative; z-index:2; margin:0; color:#696257; font-size:13.5px; line-height:1.9; font-weight:500; } /* ========================================================== KNOWLEDGE SECTION ========================================================== */ .hkg-knowledge{ max-width:1080px; margin: 22px auto; padding: 38px 38px; border: 1px solid rgba(156,112,23,.14); border-radius:24px; background: linear-gradient( 145deg, #171207, #0b0906 ); box-shadow: 0 30px 80px rgba(50,34,8,.17); text-align:center; } .hkg-knowledge-head{ max-width:820px; margin: 0 auto 28px; } .hkg-knowledge-head span{ display:inline-block; margin-bottom:9px; color:#d4ab42; font-size:11px; font-weight:900; } .hkg-knowledge-head h3{ margin:0; color:#ffffff; font-size: clamp(26px,3.5vw,38px); line-height:1.5; font-weight:900; } .hkg-knowledge-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:16px; } .hkg-knowledge-text{ padding: 24px 23px; border: 1px solid rgba(239,211,109,.10); border-radius:16px; background: rgba(255,255,255,.035); } .hkg-knowledge-text p{ margin: 0 0 13px; color:#c3bdb3; font-size:14px; line-height:2; font-weight:500; } .hkg-knowledge-text p:last-child{ margin-bottom:0; } .hkg-knowledge-text strong{ color:#e1bd54; } /* ========================================================== SERVICES ========================================================== */ .hkg-services{ max-width:1050px; margin: 30px auto; text-align:center; } .hkg-services-title{ display:block; margin-bottom:15px; color:#6c655a; font-size:12px; font-weight:900; } .hkg-service-links{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; } .hkg-service-links a{ min-height:42px; display:inline-flex; align-items:center; justify-content:center; padding: 9px 15px; border: 1px solid rgba(156,112,23,.15); border-radius:999px; background: rgba(255,255,255,.72); color:#252119 !important; font-size:11px; font-weight:900; text-decoration:none !important; transition: transform .25s ease, color .25s ease, border-color .25s ease, background .25s ease; } .hkg-service-links a:hover{ transform: translateY(-3px); border-color: rgba(201,152,42,.35); background:#fff9ed; color: var(--hkg-gold-dark) !important; } /* ========================================================== FINAL CTA ========================================================== */ .hkg-final{ position:relative; overflow:hidden; max-width:950px; margin: 30px auto 0; padding: 38px 35px; border: 1px solid rgba(156,112,23,.18); border-radius:22px; background: rgba(255,255,255,.70); box-shadow: 0 22px 60px rgba(70,52,15,.07); text-align:center; } .hkg-final-small{ display:block; margin-bottom:9px; color: var(--hkg-gold-dark); font-size:11px; font-weight:900; } .hkg-final h3{ max-width:800px; margin: 0 auto 14px; color:#18150f; font-size: clamp(25px,3vw,35px); line-height:1.5; font-weight:900; } .hkg-final p{ max-width:820px; margin: 0 auto 22px; color:#645d53; font-size:15px; line-height:2; font-weight:500; } .hkg-final a{ min-height:49px; display:inline-flex; align-items:center; justify-content:center; gap:9px; padding: 11px 23px; border: 1px solid #c99b2c; border-radius:10px; background: linear-gradient( 135deg, #956813, #c9982a 50%, #efd36d ); color:#111111 !important; font-size:14px; font-weight:900; text-decoration:none !important; box-shadow: 0 12px 30px rgba(201,152,42,.20); transition: transform .25s ease, box-shadow .25s ease; } .hkg-final a:hover{ transform: translateY(-3px); box-shadow: 0 18px 40px rgba(201,152,42,.30); } .hkg-final i{ font-style:normal; font-size:17px; } /* ========================================================== TABLET ========================================================== */ @media(max-width:950px){ .hkg-growth{ padding: 90px 18px 85px; } .hkg-heading h2{ font-size:45px; } .hkg-pillars{ grid-template-columns: repeat(2,1fr); } } /* ========================================================== MOBILE ========================================================== */ @media(max-width:600px){ .hkg-growth{ padding: 68px 13px 65px; } .hkg-pattern{ opacity:.08; background-size: 43px 43px; } .hkg-heading{ margin-bottom:31px; } .hkg-eyebrow{ font-size:10px; } .hkg-heading h2{ font-size:34px; line-height:1.35; } .hkg-heading p{ margin-top:17px; font-size:15px; line-height:1.95; } .hkg-seo-panel{ padding: 27px 18px; border-radius:18px; } .hkg-seo-panel h3{ font-size:23px; } .hkg-seo-panel p{ font-size:14px; } .hkg-pillars{ grid-template-columns:1fr; gap:10px; } .hkg-pillar{ min-height:auto; padding: 26px 18px; } .hkg-pillar h3{ font-size:18px; } .hkg-knowledge{ padding: 28px 15px; border-radius:18px; } .hkg-knowledge-grid{ grid-template-columns:1fr; gap:10px; } .hkg-knowledge-head h3{ font-size:24px; } .hkg-knowledge-text{ padding: 21px 16px; } .hkg-service-links{ display:grid; grid-template-columns: 1fr 1fr; gap:7px; } .hkg-service-links a{ width:100%; padding: 9px 7px; font-size:10px; } .hkg-service-links a:last-child{ grid-column: 1 / -1; } .hkg-final{ padding: 29px 18px; border-radius:18px; } .hkg-final h3{ font-size:24px; } .hkg-final p{ font-size:14px; } .hkg-final a{ width:100%; } } /* ========================================================== REDUCED MOTION ========================================================== */ @media(prefers-reduced-motion:reduce){ .hkg-pattern{ animation:none !important; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-eca8139 *//* ========================================================== HAMED ELKHESHN SIGNATURE EDITORIAL JOURNAL ========================================================== */ .hkm-journal{ --hkm-black:#080705; --hkm-dark:#100d08; --hkm-dark-2:#171108; --hkm-gold:#c9982a; --hkm-gold-dark:#946713; --hkm-gold-light:#efd36d; --hkm-white:#fffdf8; --hkm-muted:#bdb6aa; position:relative; isolation:isolate; overflow:hidden; width:100%; padding: 115px 20px 105px; background: radial-gradient( circle at 50% 18%, rgba(201,152,42,.13), transparent 28% ), radial-gradient( circle at 85% 70%, rgba(201,152,42,.055), transparent 25% ), linear-gradient( 145deg, #070604 0%, #0d0b07 45%, #171106 100% ); } /* ========================================================== BACKGROUND ========================================================== */ .hkm-bg{ position:absolute; inset:0; z-index:-2; overflow:hidden; pointer-events:none; } /* GRID */ .hkm-grid{ position:absolute; inset:-180px; opacity:.12; background-image: linear-gradient( rgba(255,255,255,.04) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.04) 1px, transparent 1px ); background-size: 58px 58px; -webkit-mask-image: radial-gradient( ellipse at center, #000 12%, transparent 78% ); mask-image: radial-gradient( ellipse at center, #000 12%, transparent 78% ); animation: hkmGridMove 20s linear infinite; } @keyframes hkmGridMove{ from{ background-position: 0 0, 0 0; } to{ background-position: 58px 58px, -58px 58px; } } /* ========================================================== GLOWS ========================================================== */ .hkm-glow{ position:absolute; border-radius:50%; filter:blur(110px); animation: hkmGlow 12s ease-in-out infinite alternate; } .hkm-glow-1{ width:480px; height:480px; top:-250px; right:-180px; background: rgba(201,152,42,.15); } .hkm-glow-2{ width:430px; height:430px; bottom:-200px; left:-160px; background: rgba(201,152,42,.09); animation-delay:-5s; } @keyframes hkmGlow{ from{ transform: translate3d(0,0,0); } to{ transform: translate3d(35px,-25px,0); } } /* ========================================================== STARS ========================================================== */ .hkm-star{ position:absolute; width:5px; height:5px; border-radius:50%; background: #e5c25c; box-shadow: 0 0 16px rgba(229,194,92,.80); animation: hkmStar 7s ease-in-out infinite; } .hkm-star-1{ top:17%; right:8%; } .hkm-star-2{ top:48%; left:6%; animation-delay:-2s; } .hkm-star-3{ bottom:15%; right:18%; animation-delay:-4s; } .hkm-star-4{ top:24%; left:22%; animation-delay:-1s; } @keyframes hkmStar{ 0%, 100%{ opacity:.2; transform: translateY(0) scale(1); } 50%{ opacity:1; transform: translateY(-15px) scale(1.6); } } /* ========================================================== CONTAINER ========================================================== */ .hkm-container{ position:relative; z-index:2; width:min( 1180px, 100% ); margin: 0 auto; } /* ========================================================== HEADING ========================================================== */ .hkm-heading{ max-width:900px; margin: 0 auto 42px; text-align:center; } /* small heading */ .hkm-mini-title{ display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:17px; color:#e5c35d; font-size:12px; font-weight:900; } .hkm-mini-title span{ width:30px; height:1px; background: linear-gradient( 90deg, transparent, #c9982a ); } .hkm-mini-title span:last-child{ background: linear-gradient( -90deg, transparent, #c9982a ); } /* title */ .hkm-heading h2{ margin:0; color:#ffffff; font-size: clamp(40px,5vw,61px); line-height:1.22; font-weight:900; letter-spacing:-1px; } .hkm-heading h2 strong{ display:block; margin-top:5px; background: linear-gradient( 90deg, #9f7117, #f0d574, #ba8720 ); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:900; } .hkm-heading p{ max-width:770px; margin: 20px auto 0; color:#c3bdb2; font-size:17px; line-height:2; font-weight:500; } /* ========================================================== CATEGORY STRIP ========================================================== */ .hkm-categories{ max-width:1050px; display:flex; align-items:center; justify-content:center; gap:15px; margin: 0 auto 50px; padding: 13px 17px; border: 1px solid rgba(239,211,109,.10); border-radius:15px; background: rgba(255,255,255,.028); backdrop-filter: blur(12px); } .hkm-categories-label{ flex: 0 0 auto; color:#817b71; font-size:10px; font-weight:900; } .hkm-category-list{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:7px; } .hkm-category-list a{ display:inline-flex; align-items:center; justify-content:center; min-height:35px; padding: 7px 12px; border: 1px solid rgba(201,152,42,.10); border-radius:999px; background: rgba(201,152,42,.045); color:#d9d3c8 !important; font-size:10px; font-weight:900; text-decoration:none !important; transition: transform .25s ease, color .25s ease, border-color .25s ease, background .25s ease; } .hkm-category-list a:hover{ transform: translateY(-2px); border-color: rgba(239,211,109,.30); background: rgba(201,152,42,.10); color:#efd36d !important; } /* ========================================================== MAIN POSTS GRID ========================================================== */ .hkm-posts{ display:grid; grid-template-columns: repeat(12,1fr); gap:18px; align-items:stretch; } /* ========================================================== CARD ========================================================== */ .hkm-card{ position:relative; overflow:hidden; border: 1px solid rgba(239,211,109,.11); border-radius:22px; background: linear-gradient( 145deg, rgba(255,255,255,.065), rgba(255,255,255,.023) ); box-shadow: 0 22px 60px rgba(0,0,0,.19); backdrop-filter: blur(12px); transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; } .hkm-card:hover{ transform: translateY(-7px); border-color: rgba(239,211,109,.27); box-shadow: 0 32px 78px rgba(0,0,0,.31), 0 0 60px rgba(201,152,42,.05); } /* ========================================================== MAIN ARTICLE ========================================================== */ .hkm-card-main{ grid-column: span 7; grid-row: span 2; min-height:590px; display:grid; grid-template-rows: minmax(340px,1.35fr) auto; border-color: rgba(201,152,42,.21); } /* ========================================================== SMALL ARTICLES ========================================================== */ .hkm-card-small{ grid-column: span 5; min-height:286px; display:grid; grid-template-columns: 42% 58%; } /* fifth/sixth card layout */ .hkm-card-small:nth-child(4), .hkm-card-small:nth-child(5), .hkm-card-small:nth-child(6){ grid-column: span 4; display:block; } /* ========================================================== IMAGE ========================================================== */ .hkm-card-image{ position:relative; overflow:hidden; min-height:100%; background:#12100b; } .hkm-image-link{ position:absolute; inset:0; display:block; text-decoration:none !important; } .hkm-card-image img{ width:100%; height:100%; display:block; object-fit:cover; object-position:center; transition: transform .8s cubic-bezier(.2,.7,.2,1); } .hkm-card:hover .hkm-card-image img{ transform: scale(1.055); } /* small vertical cards */ .hkm-card-small:nth-child(4) .hkm-card-image, .hkm-card-small:nth-child(5) .hkm-card-image, .hkm-card-small:nth-child(6) .hkm-card-image{ position:relative; width:100%; aspect-ratio:16 / 9; min-height:0; } /* ========================================================== IMAGE OVERLAY ========================================================== */ .hkm-image-overlay{ position:absolute; inset:0; z-index:2; pointer-events:none; background: linear-gradient( 180deg, rgba(0,0,0,.02), rgba(0,0,0,.15) ); } /* ========================================================== CATEGORY BADGE ========================================================== */ .hkm-category{ position:absolute; z-index:6; top:17px; right:17px; display:inline-flex; align-items:center; gap:7px; padding: 7px 12px; border: 1px solid rgba(239,211,109,.24); border-radius:999px; background: rgba(7,6,4,.80); backdrop-filter: blur(10px); color:#efd36d !important; font-size:10px; font-weight:900; text-decoration:none !important; box-shadow: 0 8px 24px rgba(0,0,0,.18); } .hkm-category span{ width:6px; height:6px; border-radius:50%; background:#dfba50; box-shadow: 0 0 10px rgba(223,186,80,.70); } /* ========================================================== FEATURED BADGE ========================================================== */ .hkm-featured-badge{ position:absolute; z-index:6; top:17px; left:17px; display:flex; align-items:center; gap:6px; padding: 7px 12px; border-radius:999px; background: linear-gradient( 135deg, #986b15, #d0a239 ); color:#100d06; font-size:10px; font-weight:900; box-shadow: 0 10px 25px rgba(0,0,0,.20); } .hkm-featured-badge span{ font-size:9px; } /* ========================================================== FALLBACK IMAGE ========================================================== */ .hkm-placeholder{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; background: radial-gradient( circle at center, rgba(201,152,42,.17), transparent 34% ), linear-gradient( 145deg, #171108, #070604 ); text-align:center; } .hkm-placeholder::before{ content:""; position:absolute; width:240px; height:240px; border: 1px solid rgba(239,211,109,.09); border-radius:50%; } .hkm-placeholder-ring{ position:absolute; width:170px; height:170px; border: 1px dashed rgba(239,211,109,.10); border-radius:50%; animation: hkmPlaceholderRotate 20s linear infinite; } @keyframes hkmPlaceholderRotate{ to{ transform: rotate(360deg); } } .hkm-placeholder strong{ position:relative; z-index:2; color:#e5c25b; font-size:22px; font-weight:900; } .hkm-placeholder small{ position:relative; z-index:2; margin-top:7px; color:#8e887d; font-size:10px; font-weight:700; } /* ========================================================== ARTICLE CONTENT ========================================================== */ .hkm-card-content{ position:relative; display:flex; flex-direction:column; justify-content:center; padding: 25px 24px; text-align:right; } .hkm-card-main .hkm-card-content{ padding: 32px 31px; } /* ========================================================== META ========================================================== */ .hkm-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:11px; color:#8f897f; font-size:9.5px; font-weight:700; } .hkm-meta i{ width:4px; height:4px; border-radius:50%; background:#b98722; } /* ========================================================== ARTICLE TITLE ========================================================== */ .hkm-card h3{ margin: 0 0 11px; font-size:19px; line-height:1.6; font-weight:900; } .hkm-card-main h3{ font-size: clamp(25px,3vw,34px); line-height:1.5; } .hkm-card h3 a{ color:#ffffff !important; text-decoration:none !important; transition: color .25s ease; } .hkm-card h3 a:hover{ color:#efd36d !important; } /* ========================================================== DESCRIPTION ========================================================== */ .hkm-card p{ margin:0; color:#aaa49a; font-size:12.5px; line-height:1.85; font-weight:500; } .hkm-card-main p{ color:#bdb7ad; font-size:14px; line-height:1.95; } /* ========================================================== CARD BOTTOM ========================================================== */ .hkm-card-bottom{ display:flex; align-items:center; justify-content:space-between; gap:15px; margin-top:20px; } /* ========================================================== READ ARTICLE ========================================================== */ .hkm-read{ display:inline-flex; align-items:center; gap:9px; color:#e1bc53 !important; font-size:11px; font-weight:900; text-decoration:none !important; } .hkm-read i{ width:29px; height:29px; display:flex; align-items:center; justify-content:center; border: 1px solid rgba(201,152,42,.15); border-radius:50%; background: rgba(201,152,42,.07); font-size:15px; font-style:normal; transition: transform .25s ease, background .25s ease; } .hkm-read:hover i{ transform: translateX(-5px); background: rgba(201,152,42,.16); } /* ========================================================== ARTICLE NUMBER ========================================================== */ .hkm-index{ color: rgba(239,211,109,.17); font-size:28px; line-height:1; font-weight:900; } /* ========================================================== LOADING ========================================================== */ .hkm-loading{ min-height:260px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:15px; text-align:center; } .hkm-loader{ width:48px; height:48px; display:flex; align-items:center; justify-content:center; border: 1px solid rgba(239,211,109,.12); border-radius:50%; } .hkm-loader span{ width:28px; height:28px; border: 2px solid rgba(201,152,42,.10); border-top-color: #d6ae43; border-radius:50%; animation: hkmLoading .9s linear infinite; } @keyframes hkmLoading{ to{ transform: rotate(360deg); } } .hkm-loading p{ margin:0; color:#99938a; font-size:12px; font-weight:700; } /* ========================================================== EMPTY STATE ========================================================== */ .hkm-empty{ grid-column: 1 / -1; min-height:200px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:30px; border: 1px solid rgba(239,211,109,.10); border-radius:18px; background: rgba(255,255,255,.025); text-align:center; } .hkm-empty span{ color:#a57a22; font-size:11px; font-weight:900; } .hkm-empty strong{ color:#d8d2c7; font-size:17px; font-weight:900; } /* ========================================================== FOOTER ========================================================== */ .hkm-footer{ display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap:25px; margin-top:50px; } .hkm-footer-line{ height:1px; background: linear-gradient( 90deg, transparent, rgba(201,152,42,.23) ); } .hkm-footer-line:last-child{ background: linear-gradient( -90deg, transparent, rgba(201,152,42,.23) ); } .hkm-footer-center{ display:flex; align-items:center; gap:17px; } .hkm-footer-center > span{ color:#8f897e; font-size:11px; font-weight:700; } .hkm-footer-center a{ min-height:47px; display:inline-flex; align-items:center; justify-content:center; gap:9px; padding: 10px 20px; border: 1px solid #c99b2c; border-radius:10px; background: linear-gradient( 135deg, #956813, #c9982a 50%, #efd36d ); color:#100e09 !important; font-size:12px; font-weight:900; text-decoration:none !important; box-shadow: 0 12px 30px rgba(201,152,42,.18); transition: transform .25s ease, box-shadow .25s ease; } .hkm-footer-center a:hover{ transform: translateY(-3px); box-shadow: 0 18px 38px rgba(201,152,42,.28); } .hkm-footer-center i{ font-style:normal; font-size:16px; } /* ========================================================== LARGE TABLET ========================================================== */ @media(max-width:1050px){ .hkm-card-main{ grid-column: 1 / -1; min-height:520px; } .hkm-card-small{ grid-column: span 6; display:block; } .hkm-card-small .hkm-card-image{ position:relative; width:100%; min-height:0; aspect-ratio:16 / 9; } .hkm-card-small:nth-child(4), .hkm-card-small:nth-child(5), .hkm-card-small:nth-child(6){ grid-column: span 6; } } /* ========================================================== TABLET ========================================================== */ @media(max-width:820px){ .hkm-journal{ padding: 90px 18px 82px; } .hkm-heading h2{ font-size:44px; } .hkm-categories{ flex-direction:column; gap:10px; padding: 15px; } .hkm-card-main{ min-height:auto; display:block; } .hkm-card-main .hkm-card-image{ position:relative; width:100%; aspect-ratio:16 / 9; min-height:0; } .hkm-card-small, .hkm-card-small:nth-child(4), .hkm-card-small:nth-child(5), .hkm-card-small:nth-child(6){ grid-column: span 6; } .hkm-footer{ display:block; text-align:center; } .hkm-footer-line{ display:none; } .hkm-footer-center{ justify-content:center; } } /* ========================================================== MOBILE ========================================================== */ @media(max-width:600px){ .hkm-journal{ padding: 68px 13px 65px; } .hkm-grid{ opacity:.07; background-size: 44px 44px; } .hkm-heading{ margin-bottom:30px; } .hkm-mini-title{ font-size:10px; } .hkm-heading h2{ font-size:34px; line-height:1.35; } .hkm-heading p{ margin-top:16px; font-size:15px; line-height:1.9; } /* categories */ .hkm-categories{ margin-bottom:30px; padding: 13px 10px; } .hkm-category-list{ gap:6px; } .hkm-category-list a{ min-height:32px; padding: 6px 10px; font-size:9px; } /* posts */ .hkm-posts{ display:block; } .hkm-card, .hkm-card-main, .hkm-card-small, .hkm-card-small:nth-child(4), .hkm-card-small:nth-child(5), .hkm-card-small:nth-child(6){ width:100%; display:block; min-height:auto; margin-bottom:12px; border-radius:18px; } .hkm-card-image, .hkm-card-main .hkm-card-image, .hkm-card-small .hkm-card-image{ position:relative; width:100%; aspect-ratio:16 / 9; min-height:0; } .hkm-card-content, .hkm-card-main .hkm-card-content{ padding: 20px 18px 22px; } .hkm-card h3, .hkm-card-main h3{ font-size:19px; line-height:1.55; } .hkm-card p, .hkm-card-main p{ font-size:13px; line-height:1.85; } .hkm-category{ top:11px; right:11px; padding: 6px 9px; font-size:8px; } .hkm-featured-badge{ top:11px; left:11px; padding: 6px 9px; font-size:8px; } .hkm-index{ font-size:23px; } .hkm-footer{ margin-top:32px; } .hkm-footer-center{ flex-direction:column; gap:13px; } .hkm-footer-center a{ width:min( 330px, 100% ); } } /* ========================================================== VERY SMALL MOBILE ========================================================== */ @media(max-width:380px){ .hkm-heading h2{ font-size:31px; } .hkm-category-list a{ font-size:8.5px; } } /* ========================================================== REDUCED MOTION ========================================================== */ @media(prefers-reduced-motion:reduce){ .hkm-grid, .hkm-glow, .hkm-star, .hkm-placeholder-ring, .hkm-loader span{ animation:none !important; } }/* End custom CSS */