/* Hero paragraph force override */ .hero-content { width: 100% !important; max-width: 1200px !important; margin: 0 auto !important; } /* (reverted) Remove hero-specific overrides for 'View Profile' */ /* (reverted) Remove hero overrides on profile-download button anchor */ /* (reverted) Remove hero-specific teal button overrides */ .hero-content p { width: 100% !important; max-width: 900px !important; margin: 0 auto 30px !important; font-size: 32px !important; font-weight: 700 !important; line-height: 1.5 !important; text-align: center !important; } .hero-logo-wrap { position: relative; width: fit-content; margin: 0 auto 40px; z-index: 2; } .hero-logo-wrap::before { content: ""; position: absolute; top: 50%; left: 50%; width: 280px; height: 280px; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(1,175,185,0.3), rgba(215,145,189,0.2), transparent 70%); filter: blur(40px); z-index: -1; opacity: 0.7; animation: glowPulse 4s ease-in-out infinite; } .hero-logo { display: block; margin: 0 auto 40px; width: 100%; max-width: 600px; height: auto; position: relative; z-index: 2; } @keyframes glowPulse { 0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.6; } } @media (min-width: 1200px) { .hero-logo { max-width: 700px; } } @media (max-width: 991px) { .hero-content p { font-size: 26px !important; } } @media (max-width: 767px) { .hero-content p { font-size: 22px !important; max-width: 95% !important; } .hero-logo { max-width: 250px; } .hero-logo-wrap::before { width: 200px; height: 200px; } } /* (reverted) Remove hero button positioning overrides */ /* ---------------------------------------------------------------------------------------- * Author : Awaiken * Template Name : Evenza - Event & Conference HTML Template * File : CSS File * Version : 1.0 * ---------------------------------------------------------------------------------------- */ /* INDEX ---------------------------------------------------------------------------------------- 01. Global Variables 02. General css 03. Header css 04. Hero css 05. Scrolling Ticker css 06. About Us css 07. Our Features css 08. Our Benefits css 09. Our Event Equipment css 10. Our Speakers css 11. Interactive Process css 12. Our Pricing css 13. Intro Video css 14. Our FAQs css 15. Our Testimonials css 16. Our Blog css 17. Footer css 18. About Us Page css 19. Equipments Page css 20. Equipment Single css 21. Features Page css 22. Blog Archive css 23. Blog Single css 24. Speaker Page css 25. Speaker Single css 26. Pricing Page css 27. Testimonials Page css 28. Image Gallery css 29. Video Gallery css 30. FAQs Page css 31. Contact Us Page css 32. 404 Error Page css 33. Responsive css 34. Home - Version 2 css 35. Home - Version 3 css -------------------------------------------------------------------------------------- */ /************************************/ /*** 01. Global Variables ***/ /************************************/ :root{ /* Delight brand palette */ --primary-color : #12A3A6; --primary-hover : #0E8F92; --accent-color : #D28AB0; --lavender : #B98AC6; --light-accent-pink : #E3A1C2; --bg-color : #FFFFFF; --off-white : #F8FAFA; --light-gray : #F2F4F5; --secondary-color : #F8FAFA; --text-color : #222222; --white-color : #FFFFFF; --divider-color : #12A3A61A; --dark-divider-color : #FFFFFF1A; --error-color : rgb(230, 87, 87); /* Typography stacks * English: "Google Sans" first (used when installed on the device, e.g. Google employees/Android), * then DM Sans (the publicly available Google-Sans-style open font) and safe system fallbacks. * Arabic: Cairo (modern Arabic typeface from Google Fonts) with Noto Sans Arabic / Vazirmatn fallbacks. * The cascade below (html[lang="ar"] { --default-font: var(--font-ar) }) propagates this stack * to and inherits down to every text element automatically. * --default-font is the page-wide alias; it follows the active language via :root[lang="ar"] below. */ --font-en : "Google Sans", "DM Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-ar : "Cairo", "Noto Sans Arabic", "Vazirmatn", sans-serif; --default-font : var(--font-en); --gradient-primary : linear-gradient(135deg, var(--primary-color) 0%, var(--lavender) 100%); --gradient-accent : linear-gradient(135deg, var(--accent-color) 0%, var(--lavender) 100%); --gradient-hero : linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 50%, var(--lavender) 100%); --gradient-soft : linear-gradient(180deg, var(--secondary-color) 0%, var(--white-color) 100%); --gradient-button : var(--primary-color); --teal-color : #0E8F92; --accent-hover : #0E8F92; /* Semantic theme aliases for utilities/components */ --primary : var(--primary-color, #01AFB9); --secondary : var(--lavender, #4E509D); --accent : var(--accent-color, #D791BD); --bg : var(--bg-color, #ffffff); --text : var(--text-color, #0f172a); } /************************************/ /*** 02. General css ***/ /************************************/ html, body{ width: 100%; overflow-x: clip; } body{ font-family: var(--default-font); font-size: 16px; font-weight: 400; line-height: 1em; color: var(--text-color); background: var(--bg-color); /* Smooth rendering across OS/browsers for both Latin and Arabic glyphs. */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Language-aware font switching: single source of truth for the whole website. */ html[lang="ar"], html[lang="ar"] body{ --default-font: var(--font-ar); } html[lang="en"], html[lang="en"] body{ --default-font: var(--font-en); } /* Arabic pages: slightly larger line-height so Cairo Play descenders/ligatures breathe. */ html[lang="ar"] body{ line-height: 1.05; } button, input, textarea, select, optgroup{ font-family: var(--default-font); } /* Keep headings bold/premium regardless of active language. */ h1, h2, h3, h4, h5, h6, .btn-default, .nav-link, .section-title h2, .section-title h3{ font-family: var(--default-font); } /* Responsive readability tweaks for Arabic on small screens. */ @media (max-width: 767px){ html[lang="ar"] body{ font-size: 15px; line-height: 1.1; } } .our-benefits, .our-faqs{ background: var(--off-white); } ::-webkit-scrollbar-track{ background-color: var(--primary-color); border-left: 1px solid var(--primary-color); } ::-webkit-scrollbar{ width: 7px; background-color: var(--primary-color); } ::-webkit-scrollbar-thumb{ background: var(--gradient-button); } ::selection{ color: var(--white-color); background-color: var(--accent-color); } p{ line-height: 1.6em; margin-bottom: 1.5em; } h1, h2, h3, h4, h5, h6{ font-weight: 700; line-height: 1.1em; color: var(--primary-color); margin :0; } figure{ margin: 0; } img{ max-width: 100%; } a{ text-decoration: none; color: var(--primary-color); transition: color 0.3s ease; } a:hover{ text-decoration: none; outline: 0; color: var(--primary-hover); } a:focus{ text-decoration: none; outline: 0; } .container{ max-width: 1500px; } .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl{ padding-right: 15px; padding-left: 15px; } .image-anime{ position: relative; overflow: hidden; } .image-anime:after{ content: ""; position: absolute; width: 200%; height: 0%; left: 50%; top: 50%; background-color: rgba(255,255,255,.3); transform: translate(-50%,-50%) rotate(-45deg); z-index: 1; } .image-anime:hover:after{ height: 250%; transition: all 600ms linear; background-color: transparent; } .reveal{ position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; visibility: hidden; overflow: hidden; } .reveal img{ height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transform-origin: left; transform-origin: left; } .row{ margin-right: -15px; margin-left: -15px; } .row > *{ padding-right: 15px; padding-left: 15px; } .row.no-gutters{ margin-right: 0px; margin-left: 0px; } .row.no-gutters > *{ padding-right: 0px; padding-left: 0px; } .btn-default{ position: relative; display: inline-block; background: var(--gradient-button); border-radius: 100px; font-size: 16px; font-weight: 700; line-height: 1em; text-transform: capitalize; color: var(--white-color); padding: 17px 24px; border: none; outline: none; transition: all 0.4s ease-in-out; z-index: 0; } .btn-default::after{ content: ''; display: block; position: absolute; top: 0; left: 50%; right: 50%; bottom: 0; width: 0; height: 100%; background: var(--primary-hover); border-radius: 100px; opacity: 0; transition: 0.4s ease-in-out; z-index: -1; } .btn-default:hover::after{ width: 100%; left: 0; right: 0; opacity: 1; } .btn-default.btn-border{ background: none; border:1px solid var(--dark-divider-color); padding: 16px 24px; } .btn-default.btn-border:hover, .btn-default.btn-highlighted:hover{ color: var(--primary-color); } .btn-default.btn-border::after, .btn-default.btn-highlighted::after{ background-color: var(--white-color); } .btn-default.btn-download{ background: linear-gradient(135deg, #01AFB9, #4E509D); border-radius: 50px; box-shadow: 0 4px 15px rgba(1, 175, 185, 0.3); transition: 0.3s ease; } .btn-default.btn-download:hover{ transform: translateY(-3px); box-shadow: 0 8px 25px rgba(1, 175, 185, 0.4); } .btn-default.btn-download::after{ background: linear-gradient(135deg, #4E509D 0%, #01AFB9 100%); } .btn-default.btn-download i{ margin-right: 8px; } /* --- Premium custom language switcher (replaces native