Skip to content

T
THE BASE
Commit 9e201f36 authored by TokaKaram's avatar TokaKaram
Browse files
Options

special special screens

parent 661d95c7
Hide whitespace changes
Inline Side-by-side
Showing with 11359 additions and 0 deletions
thebase/thebase/the/Fonts/Sora/OFL.txt 0 → 100644
View file @ 9e201f36
Copyright 2019 The Sora Project Authors (https://github.com/sora-xor/sora-font)
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
https://openfontlicense.org
-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------
PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.
The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.
DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.
"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).
"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).
"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.
"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.
PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:
1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.
2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.
3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.
5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.
TERMINATION
This license becomes null and void if any of the above conditions are
not met.
DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.
thebase/thebase/the/Fonts/Sora/README.txt 0 → 100644
View file @ 9e201f36
Sora Variable Font
==================
This download contains Sora as both a variable font and static fonts.
Sora is a variable font with this axis:
wght
This means all the styles are contained in a single file:
Sora-VariableFont_wght.ttf
If your app fully supports variable fonts, you can now pick intermediate styles
that aren’t available as static fonts. Not all apps support variable fonts, and
in those cases you can use the static font files for Sora:
static/Sora-Thin.ttf
static/Sora-ExtraLight.ttf
static/Sora-Light.ttf
static/Sora-Regular.ttf
static/Sora-Medium.ttf
static/Sora-SemiBold.ttf
static/Sora-Bold.ttf
static/Sora-ExtraBold.ttf
Get started
-----------
1. Install the font files you want to use
2. Use your app's font picker to view the font family and all the
available styles
Learn more about variable fonts
-------------------------------
https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts
https://variablefonts.typenetwork.com
https://medium.com/variable-fonts
In desktop apps
https://theblog.adobe.com/can-variable-fonts-illustrator-cc
https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts
Online
https://developers.google.com/fonts/docs/getting_started
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts
Installing fonts
MacOS: https://support.apple.com/en-us/HT201749
Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux
Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows
Android Apps
https://developers.google.com/fonts/docs/android
https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts
License
-------
Please read the full license text (OFL.txt) to understand the permissions,
restrictions and requirements for usage, redistribution, and modification.
You can use them in your products & projects – print or digital,
commercial or otherwise.
This isn't legal advice, please consider consulting a lawyer and see the full
license for all details.
thebase/thebase/the/Fonts/futura/sharefonts.net.txt 0 → 100644
View file @ 9e201f36
Free download fonts at http://sharefonts.net
\ No newline at end of file
thebase/thebase/the/index.html 0 → 100644
View file @ 9e201f36
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap" rel="stylesheet">
<title>THE BASE</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style2.css">
</head>
<body>
<header id="header">
<div class="left_side">
<div class="logo_cont">
<img src="./images/logo.png" alt="Logo">
<!-- <p class="logo">
<span id="logo_the">The </span>
<span id="logo_base">base</span>
<span id="logo_gaming">gaming festival</span>
</p> -->
</div>
<i class="fa-solid fa-bars list_icon" id="open_list"></i>
<div class="right_side_h hidden ">
<a id="ticketing_btn1">حجز التذاكر</a>
<a><i class="fa-solid fa-bars"></i></a>
<a class="en_lang1">EN</a>
<a class="ar_lang1 colored">AR</a>
</div>
<p class="date">
<span id="from">from</span>
<span id="date_from">feb 5TH</span>
<span id="to">to</span>
<span id="date_to">feb 7TH 2025</span>
</p>
<p class="place" id="place">
<span>HALL 8 -</span>
<span>KUWAIT INTERNATIONAL</span>
<span> FAIR GROUND</span>
</p>
</div>
<div class="right_side">
<a id="ticketing_bnt_en" href="#ticketing_section" class="ticketing_bnt_en hidden1">ticketing</a>
<a id="ticketing_ar" href="#ticketing_section_ar" class=" ticketing_ar">حجز التذاكر</a>
<a class="lines">
<span></span>
<span></span>
<span></span>
</a>
<a class="en_lang">EN</a>
<a class="ar_lang colored">AR</a>
</div>
</header>
<!-- ============Hero_AR -->
<div class="hero_section2 rtl_size" id="hero_ar">
<div class="mainiMg1">
<img src="./images/main.jpg">
</div>
<div class="hero_desc_ar">
<h3 id="hero_title" class="hero_title2">
<div class="word21">
<span>مرحبا بكم في</span>
<span class="the">THE BASE</span>
</div>
<div class="word22">
<span>حيث تنبض الألعاب بالحياة</span>
</div>
</h3>
<p id="hero_desc" class="hero-sec21">مهرجان ضخم لعشاق الجيمينج، وصناع</p>
<p id="hero_desc" class="hero-sec22">المحتوى، والجماهير اللي بتعيش على</p>
<p id="hero_desc" class="hero-sec23">الحماس والإثارة </p>
<p id="hero_desc" class="hero-sec24">ثلاثة أيام من الطاقة الخالصة، والمنافسة،</p>
<p id="hero_desc" class="hero-sec25">وروح المجتمع</p>
<a id="book_now" class="bookA1" href="#ticketing_section_ar">احجز الان</a>
</div>
<div class="hero_desc_res_ar">
<h3 id="hero_title" class="hero_title2">
مرحبا بكم في
<span class="the">THE BASE</span>
حيث تنبض الألعاب بالحياة
</h3>
<p>
مهرجان ضخم لعشاق الجيمينج، وصناع
المحتوى، والجماهير اللي بتعيش على
الحماس والإثارة
ثلاثة أيام من الطاقة الخالصة، والمنافسة،
وروح المجتمع
</p>
<a id="book_now" class="bookA1" href="#ticketing_section_ar">احجز الان</a>
</div>
</div>
<!-- ==================== Hero_EN -->
<div class="hero_section rtl_size hidden1" id="hero_en">
<div class="mainiMg">
<img src="./images/main1.jpg">
</div>
<div class="hero_desc">
<h3 id="hero_title" class="hero_title">
<div class="word1">
<span>WELCOME TO</span>
<span class="the">THE</span>
</div>
<div class="word2">
<span class="base">BASE</span>
<span> — WHERE THE</span>
</div>
<span class="word4">GAME COMES</span>
<span class="word3">ALIVE!</span>
</h3>
<p id="hero_desc" class="hero-sec">A FESTIVAL BUILT FOR GAMERS, </p>
<p id="hero_desc" class="hero-sec2">CREATORS, AND FANS WHO LIVE</p>
<p id="hero_desc" class="hero-sec3">FOR THE ACTION.</p>
<p id="hero_desc" class="hero-sec4">THREE DAYS OF PURE ENERGY, </p>
<p id="hero_desc" class="hero-sec5">COMPETITION, AND COMMUNITY.</p>
<a id="book_now" class="bookA" href="#ticketing_section">book now</a>
</div>
<div class="hero_desc_res">
<h3 id="hero_title" class="hero_title">
WELCOME TO
<span class="the">THE BASE</span>
— WHERE THE
GAME COMES
ALIVE!
</h3>
<p>
A FESTIVAL BUILT FOR GAMERS,
CREATORS, AND FANS WHO LIVE
FOR THE ACTION.
THREE DAYS OF PURE ENERGY,
COMPETITION, AND COMMUNITY.</p>
<a id="book_now" class="bookA" href="#ticketing_section">book now</a>
</div>
</div>
<div class="play_games " id="play_games">
<h1 id="playable_games_title">الألعاب المتاحة</h1>
<div class="swiper_parent">
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="/images/game1.webp" alt=""></div>
<div class="swiper-slide"><img src="/images/game2.webp" alt=""></div>
<div class="swiper-slide"><img src="/images/game3.png" alt=""></div>
<div class="swiper-slide"><img src="/images/game3.webp" alt=""></div>
<div class="swiper-slide"><img src="/images/game4.png" alt=""></div>
<div class="swiper-slide"><img src="/images/game5.webp" alt=""></div>
<div class="swiper-slide"><img src="/images/game6.webp" alt=""></div>
<div class="swiper-slide"><img src="/images/game6.webp" alt=""></div>
</div>
<div class="swiper-pagination"> next</div>
</div>
</div>
</div>
<div class="e_sport" id="e_sport">
<h1 id="esports_title">بطولات الرياضات الالكترونية</h1>
<div>
<div>
<img class="abs_img" src="/images/game2.webp">
<img src="/images/valorant2 (1).webp" class="valorant_img">
</div>
<div>
<img class="abs_img1" src="/images/game3.png">
<img src="images/FIFA_VALORANT_LOL_pack/2.png" class="yasou_img">
</div>
<div>
<img class="abs_img2" src="/images/fifaCard_.png">
<img src="images/1.png" class="bellingham_img">
</div>
</div>
<div class="button_parent">
<a id="e_sport_btn">احجز الان</a>
</div>
</div>
<!-- =============== casual -->
<div class="casual_av" id="casual_av_ar">
<div class="casual_av_cont">
<div class="main_img">
<div class="img_parent">
<img src="./images/pc - ps5 area1.jpg" />
</div>
<a>PC - PS5 ZONE</a>
</div>
<div class="text">
<h1>CASUAL ACTIVITIES</h1>
<h1> هنا يبدأ <span>المرح الحقيقى </span></h1>
<p>استمتع بأجواء اللعب الحر على أكثر من 20 جهاز كمبيوتر جيمينغ و 10
أجهزة بلايستيشن 5 متاحة للجميع شارك في بطولات قصيرة تفجّر الحماس، اربح جوائز مميزة، أو تحدّ أصدقاءك في مباريات
ودية - كل لحظة هنا متعة خالصة منطقة تجمع بين الإثارة والراحة، حيث اللعب
هو جوهر التجربة !</p>
</div>
</div>
</div>
<div class="casual_ar hidden1" id="casual_en">
<div class="casual_av_cont">
<div class="text">
<h1>CASUAL ACTIVITIES</h1>
<h1> THIS IS WHERE <span>THE REAL
FUN BEGINS! </span> </h1>
<p>ENJOY THE FREE-PLAY VIBES WITH OVER 20 GAMING PCS AND 10 PLAYSTATION 5 CONSOLES OPEN FOR EVERYONE.</p>
<p>JUMP INTO QUICK CHALLENGES, FRIENDLY MATCHES WITH YOUR FRIENDS, OR TRY YOUR FAVORITE GAMES WITHOUT LIMITS.
</p>
<p>A ZONE THAT BLENDS EXCITEMENT AND COMFORT — WHERE GAMING IS PURE JOY.</p>
</div>
<div class="main_img">
<div class="img_parent">
<img src="./images/pc - ps5 area.jpg" />
</div>
<a>PC - PS5 ZONE</a>
</div>
</div>
</div>
<div class="Vr_zone" id="Vr_zone_AR">
<div class="Vr_zone_cont">
<div class="text">
<h1> ادخل إلى
<span> ٍ عالم جديد لا يشبه
أي شيء آخر</span>
</h1>
<p>تجربة تجمع بين الواقع الافتراضي وألعاب
الآركيد الكلاسيكية لتمنحك مزيجا من الحنين
ً
والمستقبل
ّ متطورة، استعد لمغامرات VR مع 6 محطات
ستعيشها بكل حواسك — تجربة تنقلك من
المشاهدة إلى قلب الحدث</p>
</div>
<div class="main_img">
<img src="./images/vr1.png">
<a>VR ZONE</a>
</div>
</div>
</div>
<!-- ========VR_EN -->
<div class="Vr_zone_ar hidden1" id="Vr_zone_en">
<div class="Vr_zone_ar_cont">
<div class="main_img">
<img src="./images/vr.png">
<a>VR ZONE</a>
</div>
<div class="text">
<h1> STEP INTO A WHOLE NEW
WORLD — <span>UNLIKE ANYTHING
YOU’VE EXPERIENCED BEFORE.</span></h1>
<p>A FUSION OF VIRTUAL REALITY AND CLASSIC
ARCADE GAMES, BLENDING NOSTALGIA WITH
THE THRILL OF THE FUTURE.
WITH 6 ADVANCED VR STATIONS, GET READY
FOR ADVENTURES THAT ENGAGE ALL YOUR
SENSES — AN EXPERIENCE
THAT PULLS YOU STRAIGHT INTO THE HEART
OF THE ACTION.</p>
</div>
</div>
</div>
<!-- ===========gaming -->
<div class="card_game " id="card_game_Ar">
<div class="card_game_cont">
<div class="main_img">
<div class="img_parent">
<img src="./images/card-boardgames.jpeg" />
</div>
<a>CARD / BOARD GAMES</a>
</div>
<div class="text">
<h1><span>لعبة</span> العقل، الصبر، والاستراتيجية</h1>
<p>استمتع بمجموعة متنوعة من ألعاب
الطاولة الكلاسيكية وبطولات ألعاب
البطاقات التي تجمع بين التحدي والمرح
سواء كنت محترفا
ً أو مبتدئا ً، هذه
المنطقة هي مكانك للتفاعل والتسلية
وجها لوجه مع الآخرين</p>
</div>
</div>
</div>
<div class="card_game_ar hidden1" id="card_game_en">
<div class="card_game_cont">
<div class="main_img">
<div class="img_parent">
<img src="./images/card-boardgames.jpeg" />
</div>
<a>CARD / BOARD GAMES</a>
</div>
<div class="text">
<div>
<h1><span>A PLACE FOR</span>THE MIND,</h1>
<h1> PATIENCE, AND STRATEGY.</h1>
</div>
<p>ENJOY A VARIETY OF CLASSIC BOARD</p>
<p>GAMES AND CARD TOURNAMENTS</p>
<p>THAT COMBINE CHALLENGE AND FUN.</p>
<p>WHETHER YOU’RE A PRO OR JUST</p>
<p>STARTING OUT, THIS ZONE IS YOUR</p>
<p>SPACE TO PLAY, CONNECT, AND</p>
<p>ENJOY FACE-TO</p>
<p>FACE GAMING WITH OTHERS.</p>
</div>
</div>
</div>
<!-- ==================== -->
<!-- ========mobile -->
<div class="mobile" id="mobile_Ar">
<div class="mobile_cont">
<div class="text">
<h1>لأن الجيمينغ <span>لا يتوقف عند
الشاشات الكبيرة</span></h1>
<p>اليومية، PUBG MOBILE انضم إلى بطولات
سواء كنت تلعب بمفردك أو مع فريقك
المنافسة هنا سريعة، مليئة بالإثارة، والمركز
الأول ينتظر الأفضل فقط</p>
<div class="a_parent">
<a>MOBILE AREA</a>
</div>
</div>
<div class="main_img">
<img src="./images/mobile .jpg">
</div>
</div>
</div>
<div class="mobile_ar hidden1" id="mobile_en">
<div class="mobile_cont">
<div class="text">
<h1>BECAUSE GAMING <span> DOESN’T
STOP AT BIG SCREENS! </span></h1>
<p>JOIN THE DAILY PUBG MOBILE TOURNAMENTS,
WHETHER YOU’RE PLAYING SOLO OR WITH
YOUR SQUAD.
THE COMPETITION HERE IS FAST, THRILLING,
AND ONLY THE BEST REACH THE TOP.</p>
<div class="a_parent">
<a>MOBILE AREA</a>
</div>
</div>
<div class="main_img">
<img src="./images/mobile .jpg">
</div>
</div>
</div>
<!-- ========casual========== -->
<!-- cosplay -->
<div class="cosplay" id="cosplay_Ar">
<div class="cosplay_cont">
<div class="text">
<h1>عش شخصيتك المفضلة <span>وكن
جزءا من عالمها</span></h1>
<p>في منطقة الكوسبلاي، يتحوّل الإبداع
إلى عرض حي ّ من الأزياء، الألوان، والخيال
شارك، التقط الصور، وكن أنت البطل
الذي يعشقه الجميع</p>
</div>
<div class="main_img">
<div class="img_parent">
<img src="./images/cosplay .jpg" />
</div>
<a>COSPLAY AREA</a>
</div>
</div>
</div>
<!-- ========= -->
<div class="cosplay_ar hidden1" id="cosplay_en">
<div class="cosplay_cont">
<div class="text">
<h1> <span> LIVE YOUR FAVORITE
CHARACTER </span> AND BECOME
PART OF THEIR WORLD!</h1>
<p>IN THE COSPLAY ZONE, CREATIVITY COMES
TO LIFE THROUGH COSTUMES, COLORS,
AND IMAGINATION.
JOIN IN, TAKE PHOTOS, AND BE THE HERO
EVERYONE LOVES.</p>
</div>
<div class="main_img">
<div class="img_parent">
<img src="./images/cosplay .jpg" />
</div>
<a>COSPLAY AREA</a>
</div>
</div>
</div>
<div class="vr_parent" id="vr_section_p">
<div class="vr-section vr-section_ar">
<div class="vr-image">
<img src="images/car simulator .png" alt="description" />
<div class="overlay-vr"></div>
</div>
<div class="vr-con">
<h2 class="vr-title1 arbt">
تجربة جديدة <span class="neon">في كل زاوية</span>
</h2>
<div class="vr-p arb">
من سباقات السيارات إلى المغامرات الغامرة, ستجد هنا ألعاب الواقع الافتراضي التي تختبر مهارتك وتلهب حماسك كل
لحظة في هذه المنطقة مغامرة تستحق أن تعيشها
</div>
<button class="vr-btn1">CAR simulator</button>
</div>
</div>
</div>
<!-- ///////////////////english ////////////////////////////////////////////-->
<div class="vr_parent hidden1" id="vr_section_en_p">
<div class="vr-section vr-section-en ">
<div class="vr-image imageen">
<img src="images/car simulator .png" alt="description" />
<div class="overlay-vr"></div>
</div>
<div class="vr-con conen">
<h2 class="vr-title1 title1en">
A NEW ADVENTURE <span class="neon">AROUND EVERY CORNER</span>
</h2>
<div class="vr-p p-en">
FROM HIGH-SPEED RACES TO IMMERSIVE JOURNEYS,TEST YOUR SKILL AND SPARK YOUR ADRENALINE.EVERY MOMENT HERE IS AN
EXPERIENCE WORTH LIVING.
</div>
<button class="vr-btn1 btnen">CAR simulator</button>
</div>
</div>
</div>
<div class="ticketing_section hidden1" id="ticketing_section">
<div class="title" id="ticketing1">
<img src="./images/ticketing.png" />
</div>
<!-- <div class="days_grid">
<div class="days">
<div>
<h1 id="pass1_title">1 DAY PASS _ REGULAR</h1>
<span>$$.$$</span>
</div>
<div class="text">
<div>
<p class="pass1_p1 perfect">PERFECT FOR GAMERS WHO
WANT TO EXPERIENCE THE
EVENT IN ONE HIT!
SPEND A FULL DAY EXPLORING
EVERY PART OF THE BASE:
TOURNAMENTS,VR,Card
ZONES,COSPLAY SHOWS,
AND MORE- ALL IN ONE PASS
.</p>
<a id="book_pass1_btn">BOOK YOUR PASS</a>
</div>
</div>
</div>
</div> -->
<div class="ticket_types">
<div class="days_t">
<div class="ticket_type">
<h1 id="pass3_title">3 DAY PASS - REGULAR</h1>
<span>15 KD</span>
</div>
<div class="text">
<p class="first-p">GET FULL ACCESS TO BASE ACROSS ALL THREE DAYS_TOURNAMENTS,
STAGES,COSPLAY SHOWS ,VR,ARCADE,
AND EVERY GAMING ZONE.ENJOY UNLIMITED ENTRY TO ALL CASUAL AND COMPETITIVE AREAS ,MAIN STAGES
ACTIVITIES,AND EXCLUSIVE COMMUNITY THROUGHOUT THE FESTIVAL.
</p>
</div>
<button class="btn2_type" onclick="openNewWindow( 'https://portal.myfatoorah.com/En/KWT/PayInvoice/LinkInvoiceDetails/060615219482625862'
)">BOOK YOUR PASS</button>
</div>
<div class="days_t">
<div class="ticket_type">
<h1 id="pass3_title" class="day_ticket">1 DAY PASS - REGULAR</h1>
<span>10 KD</span>
</div>
<div class="text">
<p class="first-p">GET FULL ACCESS TO BASE ACROSS ALL THREE DAYS_TOURNAMENTS,
STAGES,COSPLAY SHOWS ,VR,ARCADE,
AND EVERY GAMING ZONE.ENJOY UNLIMITED ENTRY TO ALL CASUAL AND COMPETITIVE AREAS ,MAIN STAGES
ACTIVITIES,AND EXCLUSIVE COMMUNITY THROUGHOUT THE FESTIVAL.
</p>
</div>
<button class="btn2_type_s"
onclick="openNewWindow('https://portal.myfatoorah.com/En/KWT/PayInvoice/LinkInvoiceDetails/060615219482625963')">BOOK
YOUR PASS</button>
</div>
</div>
<div class="days">
<div class="ticket_type">
<h1 id="pass3_title">VIP TICKET</h1>
<span>50 KD</span>
</div>
<div class="text">
<p class="first-p">FOR THOOSE WHO WANT THE FULL EXPERIENCE - AND MORE. ENJOY EXCLUSIVE VIP
ACCESS WITH PRIORITY ENTRY,
RESERVED MAIN STAGE SEATING,BACKSTAGE MEET & GREETS, AND A PREMIUM MERCH
PACK.THREE DAYS OF
GAMING ,LUXORY,AND NEXT-LEVEL ACCESS TO THE BASE.
</p>
</div>
<button class="btnn2"
onclick="openNewWindow('https://portal.myfatoorah.com/En/KWT/PayInvoice/LinkInvoiceDetails/060615219482626062')">BOOK
YOUR PASS</button>
</div>
<div class="map">
<iframe
src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d1740.2370475636292!2d48.04768467952594!3d29.268406228630678!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1sHALL%208%20-%0D%0AKUWAIT%20INTERNATIONAL%0D%0AFAIR%20GROUND!5e0!3m2!1sar!2seg!4v1760381351472!5m2!1sar!2seg"
allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<!-- <div class="days last">
<div>
<h1 id="vip_title">VIP TICKET</h1>
<h1>$$.$$</h1>
</div>
<div class="text">
<div>
<p class="vip_p1 vipp">FOR THOOSE WHO WANT THE FULL EXPERIENCE - AND MORE. ENJOY EXCLUSIVE VIP
ACCESS WITH PRIORITY ENTRY,
RESERVED MAIN STAGE SEATING,BACKSTAGE MEET & GREETS, AND A PREMIUM MERCH
PACK.THREE DAYS OF
GAMING ,LUXORY,AND NEXT-LEVEL ACCESS TO THE BASE.
</p>
</div>
<div>
<a id="book_vip_btn">BOOK YOUR PASS</a>
</div>
</div>
</div> -->
</div>
<div class="ticketing_section ticketing_section_ar " id="ticketing_section_ar">
<div class="title" id="ticketing1">
<img src="./images/ticketing.png" />
</div>
<div class="ticket_types">
<div class="days_t">
<div class="ticket_type">
<h1 id="pass3_title">3 DAY PASS - REGULAR</h1>
<span>15 KD</span>
</div>
<div class="text">
<p class="first-p">على مدار الأيام الثلاثة — البطولات، BASE THE احصل على دخول كامل إلى
والعروض، والكوسبلاي، ومنطقة الواقع الافتراضي، والآركيد، وجميع مناطق
الألعاب. استمتع بدخول غير محدود إلى جميع المناطق الترفيهية والتنافسية
وأنشطة المسرح الرئيسي وفعاليات المجتمع طوال المهرجان
</p>
</div>
<button class="btn2_type" onclick="openNewWindow( 'https://portal.myfatoorah.com/En/KWT/PayInvoice/LinkInvoiceDetails/060615219482625862'
)">احجز الان</button>
</div>
<div class="days_t">
<div class="ticket_type">
<h1 id="pass3_title" class="day_ticket">1 DAY PASS - REGULAR</h1>
<span>10 KD</span>
</div>
<div class="text">
<p class="first-p">مثالي لعشاق الألعاب الذين يرغبون
في خوض التجربة بيوم واحد مكثف.
ّ
يوما ً كاملا تستكشف فيه جميع
ً
ِ اقض
البطولات، والواقع :BASE THE أركان
الافتراضي، وألعاب الطاولة، وعروض
الكوسبلاي، والمزيد — كل ذلك
بتذكرة واحدة
</p>
</div>
<button class="btn2_type_s"
onclick="openNewWindow('https://portal.myfatoorah.com/En/KWT/PayInvoice/LinkInvoiceDetails/060615219482625963')">احجز
الان</button>
</div>
</div>
<div class="days">
<div class="ticket_type">
<h1 id="pass3_title">VIP TICKET</h1>
<span>50 KD</span>
</div>
<div class="text">
<p class="arab-p">
.على مدار الأيام الثلاثة - البطولات THE BASE احصل على دخول كامل إلى العروض، والكوسبلاي، ومنطقة الواقع
الافتراضي، والأركيد، وجميع مناطق الألعاب. استمتع بدخول غير محدود إلى جميع المناطق الترفيهية والتنافسية وأنشطة
المسرح الرئيسي وفعاليات المجتمع طوال المهرجان
</p>
</div>
<button class="btnn2"
onclick="openNewWindow('https://portal.myfatoorah.com/En/KWT/PayInvoice/LinkInvoiceDetails/060615219482626062')">احجز
الآن</button>
</div>
<!-- <div class="days last">
<div class="vi">
<h1 id="vip_title">VIP TICKET</h1>
<h1>$$.$$</h1>
</div>
<div class="text">
<div>
<p class="vip_p1 vipar">
حصري يتضمن اولوية مثالية لمن يبحث عن تجربة لمن يبحث عن تجربة استثنائية و شامله استمتع ب بدخول الدخول، ومقاعد محجوزة في المسرح الرئيسي، وفرص لقاء خلف الكواليس، وباقة منتجات مميزة. ثلاثة أيام من الألعاب، والرفاهية، والوصول إلى أعلى مستويات التجربة في the base.
</p>
</div>
<div>
<a id="book_vip_btn">احجز الآن</a>
</div>
</div>
</div> -->
<div class="map">
<iframe
src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d1740.2370475636292!2d48.04768467952594!3d29.268406228630678!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1sHALL%208%20-%0D%0AKUWAIT%20INTERNATIONAL%0D%0AFAIR%20GROUND!5e0!3m2!1sar!2seg!4v1760381351472!5m2!1sar!2seg"
allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
<div class="oragnize" id="organize">
<h1 id="organized">ORGANIZED BY</h1>
<div>
<img src="./images/website landing page-08.png">
<img src="./images/website landing page-07.png">
<img src="./images/website landing page-06.png">
<img src="./images/website landing page-05.png">
</div>
</div>
<div class="oragnize_slider" id="organize">
<h1 id="organized">ORGANIZED BY</h1>
<div class="swiper organize_slider">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./images/website landing page-08.png" alt=""></div>
<div class="swiper-slide"><img src="./images/website landing page-07.png" alt=""></div>
<div class="swiper-slide"><img src="./images/website landing page-06.png" alt=""></div>
<div class="swiper-slide"><img src="./images/website landing page-05.png" alt=""></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
<div class="letters">
<h1 id="newsletter">NEWS LETTER</h1>
<div>
<div class="image">
<img src="./images/logo.png">
</div>
<div class="info">
<p id="newsletter_text">RECEIVE THE LATEST NEWS FROM THE BASE - GAMING FESTIVAL</p>
<form>
<div>
<label for="email">Email:</label>
<input type="text" id="email" name="email" />
</div>
<div>
<label for="phone">Phone:</label>
<input type="text" id="phone" name="phone" />
</div>
<button type="submit">send message</button>
</form>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="index.js"></script>
</body>
</html>
\ No newline at end of file
thebase/thebase/the/index.js 0 → 100644
View file @ 9e201f36
const swiper = new Swiper(".mySwiper", {
slidesPerView: 7,
spaceBetween: 30,
loop: false,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
breakpoints: {
// when window width is >= 320px
320: {
slidesPerView: 1,
spaceBetween: 10
},
// when window width is >= 480px
480: {
slidesPerView: 2,
spaceBetween: 15
},
// when window width is >= 640px
640: {
slidesPerView: 3,
spaceBetween: 20
},
768: {
slidesPerView: 4,
spaceBetween: 20
},
1024: {
slidesPerView: 5,
spaceBetween: 20
},
1200: {
slidesPerView: 7,
spaceBetween: 20
}
}
});
const swiper_organize = new Swiper(".organize_slider", {
slidesPerView: 1,
// spaceBetween: 30,
loop: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
}
});
// =========================
// Translation
let card_game_Ar=document.getElementById("card_game_Ar")
let card_game_en=document.getElementById("card_game_en")
let mobile_Ar=document.getElementById("mobile_Ar")
let mobile_en=document.getElementById("mobile_en")
let cosplay_Ar=document.getElementById("cosplay_Ar")
let cosplay_en=document.getElementById("cosplay_en")
let ticketing_btn_en=document.getElementById("ticketing_bnt_en")
let ticketing_ar=document.getElementById("ticketing_ar")
let ticketing_btn1=document.getElementById("ticketing_btn1")
let ticketing_section_ar=document.getElementById("ticketing_section_ar")
let ticketing_section=document.getElementById("ticketing_section")
let vr_section=document.getElementById("vr_section_p")
let vr_section_en=document.getElementById("vr_section_en_p")
let casual_av_ar=document.getElementById("casual_av_ar")
let casual_en=document.getElementById("casual_en")
let hero_en=document.getElementById("hero_en")
let hero_ar=document.getElementById("hero_ar")
let Vr_zone_en=document.getElementById("Vr_zone_en")
let Vr_zone_AR=document.getElementById("Vr_zone_AR")
let playable_games_title=document.getElementById("playable_games_title")
let esports_title=document.getElementById("esports_title")
let e_sport_btn=document.getElementById("e_sport_btn")
let Ar_flag=true
function changeLanguage(lang) {
console.log("function")
if(lang === 'ar') {
Ar_flag=true
card_game_en.classList.add("hidden1")
card_game_Ar.classList.remove("hidden1")
mobile_en.classList.add("hidden1")
mobile_Ar.classList.remove("hidden1")
cosplay_en.classList.add("hidden1")
cosplay_Ar.classList.remove("hidden1")
ticketing_btn_en.classList.add("hidden1")
ticketing_ar.classList.remove("hidden1")
ticketing_section_ar.classList.remove("hidden1")
ticketing_section.classList.add("hidden1")
vr_section_en.classList.add("hidden1")
vr_section.classList.remove("hidden1")
casual_av_ar.classList.remove("hidden1")
casual_en.classList.add("hidden1")
hero_ar.classList.remove("hidden1")
hero_en.classList.add("hidden1")
Vr_zone_AR.classList.remove("hidden1")
Vr_zone_en.classList.add("hidden1")
ticketing_btn1.innerHTML=" ticketing"
esports_title.classList.add("En_font")
e_sport_btn.classList.add("En_font")
playable_games_title.innerHTML="الألعاب المتاحه"
esports_title.innerHTML=" بطولات الرياضات الالكترونية"
e_sport_btn.innerHTML="احجز الان"
ticketing_btn1.innerHTML="احجز الان"
e_sport_btn.onclick=function()
{
location.href = "#ticketing_section_ar"
}
document.querySelector(".en_lang").classList.remove("colored")
document.querySelector(".en_lang1").classList.remove("colored")
document.querySelector(".ar_lang").classList.add("colored")
document.querySelector(".ar_lang1").classList.add("colored")
} else {
Ar_flag=false
card_game_en.classList.remove("hidden1")
card_game_Ar.classList.add("hidden1")
mobile_en.classList.remove("hidden1")
mobile_Ar.classList.add("hidden1")
cosplay_en.classList.remove("hidden1")
cosplay_Ar.classList.add("hidden1")
ticketing_btn_en.classList.remove("hidden1")
ticketing_ar.classList.add("hidden1")
ticketing_section_ar.classList.add("hidden1")
ticketing_section.classList.remove("hidden1")
vr_section_en.classList.remove("hidden1")
vr_section.classList.add("hidden1")
casual_av_ar.classList.add("hidden1")
casual_en.classList.remove("hidden1")
hero_ar.classList.add("hidden1")
hero_en.classList.remove("hidden1")
Vr_zone_AR.classList.add("hidden1")
Vr_zone_en.classList.remove("hidden1")
playable_games_title.classList.add("En_font")
esports_title.classList.add("En_font")
e_sport_btn.classList.add("En_font")
e_sport_btn.classList.remove("En_font")
ticketing_btn1.innerHTML="Ticketing"
playable_games_title.innerHTML=" PLAYABLE GAMES"
esports_title.innerHTML="E-SPORTS TOURNAMENTS"
e_sport_btn.innerHTML="BOOK NOW"
document.querySelector(".en_lang").classList.add("colored")
document.querySelector(".en_lang1").classList.add("colored")
document.querySelector(".ar_lang").classList.remove("colored")
document.querySelector(".ar_lang1").classList.remove("colored")
}
}
document.querySelector(".en_lang").addEventListener("click", () => changeLanguage("en"));
document.querySelector(".en_lang1").addEventListener("click", () => changeLanguage("en"));
document.querySelector(".ar_lang").addEventListener("click", () => changeLanguage("ar"));
document.querySelector(".ar_lang1").addEventListener("click", () => changeLanguage("ar"));
// =========================
// ==========List Logic===============
let list_btn=document.getElementById("open_list")
let list =document.querySelector(".right_side_h")
let buttons = document.querySelectorAll(".right_side_h a");
buttons.forEach(button => {
button.addEventListener("click", () => {
list.classList.add("hidden")
});
});
list_btn.onclick=function()
{
list.classList.toggle("hidden")
}
let lastScrollTop = 0;
window.addEventListener("scroll", function () {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
if (scrollTop > lastScrollTop) {
list.classList.add("hidden")
}
lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
});
// ======================= Organize Logic
function openNewWindow(url) {
// Opens a new tab with example.com, specifying dimensions
window.open(url, "_blank");
}
e_sport_btn.onclick=function ()
{
if(Ar_flag)
location.href = "#ticketing_section_ar"
else
location.href = "#ticketing_section"
}
ticketing_btn1.onclick=function ()
{
if(Ar_flag)
location.href = "#ticketing_section_ar"
else
location.href = "#ticketing_section"
}
\ No newline at end of file
thebase/thebase/the/style.css 0 → 100644
View file @ 9e201f36
This source diff could not be displayed because it is too large. You can view the blob instead.
thebase/thebase/the/style2.css 0 → 100644
View file @ 9e201f36
/* ====================================== */
/* ===============Hero================= */
.mainiMg {
width: 60%;
position: relative;
height: 90vh;
/* background: url('your-image.jpg') center/cover no-repeat; */
clip-path: polygon(0 0, 80% 0, 100% 100%, 0 100%);
border-top-right-radius: 20% 100%;
border-bottom-right-radius: 10% 0%;
overflow: hidden;
margin-left: 40px;
transform: translateY(-40px);
object-position: 40% 70%;
display: flex !important;
flex-direction: row-reverse;
}
.mainiMg img {
width: 100%;
height: 100%;
object-fit: cover;
}
.mainiMg::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to right, rgba(128, 0, 128, 0.5), rgba(11, 11, 58, 0.9));
}
.hero_section,
.activate_section,
.VR_section {
display: grid;
align-items: start;
padding: 10px 50px 0 50px;
background-color: #0d0d41;
}
.ltr_size {
grid-template-columns: 48% 50%;
box-sizing: border-box;
column-gap: 10px;
padding: 80px 30px 40px;
justify-content: center;
align-items: center;
}
.ltr_size img {
width: 100%;
}
.ltr_size div:nth-child(1) {
margin-top: 100px;
}
.rtl_size {
grid-template-columns: 53% 45%;
box-sizing: border-box;
column-gap: 10px;
align-items: center;
padding: 80px 0px 0px;
}
#vr2_btn {
padding: 10px 40px;
}
.hero_section {
color: white;
font-family: var(--main-font);
text-transform: uppercase;
display: flex;
direction: ltr !important;
}
.hero_title .span {
width: 100%;
height: 100%;
position: relative;
font-family: "Archivo Black", sans-serif;
}
.word1 {
font-family: var(--sora_font);
display: flex;
position: absolute;
font-size: 40px;
width: 40%;
top: 24%;
right: 6%;
margin-left: 30px;
}
.word1 .the {
color: #aa09b4;
margin-left: 10px;
font-family: var(--sora_font);
}
.word2 {
font-family: "Archivo Black", sans-serif;
display: flex;
position: absolute;
font-size: 40px;
width: 40%;
top: 32%;
right: 4.5%;
margin-left: 40px;
font-family: var(--sora_font);
}
.word2 .base {
color: #aa09b4;
margin-right: 10px;
font-family: var(--sora_font);
}
.word4 {
font-family: "Archivo Black", sans-serif;
display: flex;
position: absolute;
font-size: 40px;
width: 35%;
top: 41%;
right: 8%;
font-family: var(--sora_font);
}
.word3 {
display: flex;
position: absolute;
font-family: "Archivo Black", sans-serif;
font-size: 40px;
width: 30%;
right: 11%;
top: 50%;
font-family: var(--sora_font);
}
.hero-sec {
display: flex;
position: absolute;
left: 60%;
top: 60%;
font-size: 22px;
width: 30% !important;
}
.hero-sec2 {
display: flex;
position: absolute;
left: 60.5%;
top: 65%;
font-size: 22px;
width: 30% !important;
font-family: var(--sora_font);
}
.hero-sec3 {
display: flex;
position: absolute;
left: 62%;
top: 70%;
font-size: 22px;
width: 30% !important;
font-family: var(--sora_font);
}
.hero-sec4 {
display: flex;
position: absolute;
left: 63%;
top: 75%;
font-size: 22px;
width: 30% !important;
font-family: var(--sora_font);
}
.hero-sec5 {
display: flex;
position: absolute;
left: 64%;
top: 80%;
font-size: 22px;
width: 30% !important;
font-family: var(--sora_font);
}
.hero_section a {
font-family: "Archivo Black", sans-serif;
position: absolute;
top: 650px;
right: 5px;
color: #ffffff;
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
border: none;
border-radius: 50px 0 0 50px;
background: linear-gradient(90deg, #aa09b4, #620b80, #270c54);
padding: 15px 20px;
display: block;
width: 30%;
height: 8%;
cursor: pointer;
outline: none;
text-align: start;
box-sizing: border-box;
font-size: 15px;
font-family: var(--sora_font);
}
.hero_desc_res {
display: none;
}
.hero_desc_res h3 {
font-size: 30px;
}
.hero_desc_res h3 span {
color: #be2fbe;
}
.hero_desc_res p {
font-size: 20px;
line-height: 32px;
}
@media(max-width:1800px) {
.word1 {
top: 28%;
left: 51%;
}
.word2 {
top: 35%;
left: 52%;
}
.word4 {
top: 41%;
left: 56%;
}
.word3 {
top: 48%;
left: 57%;
}
.hero-sec {
position: absolute;
left: 58%;
top: 58%;
}
.hero-sec2 {
top: 63%;
left: 59%;
}
.hero-sec3 {
left: 60%;
top: 68%;
}
.hero-sec4 {
left: 61%;
top: 73%;
}
.hero-sec5 {
left: 62%;
top: 78%;
}
.hero_section a {
top: 650px;
width: 37%;
}
}
@media(max-width:1500px) {
.word1 {
top: 31%;
}
.word2 {
top: 37%;
}
.word4 {
top: 46%;
/* left: 50%; */
}
.word3 {
top: 55%;
left: 58%;
}
.hero-sec {
position: absolute;
left: 58%;
top: 65%;
}
.hero-sec2 {
top: 70%;
left: 59%;
}
.hero-sec3 {
left: 60%;
top: 75%;
}
.hero-sec4 {
left: 61%;
top: 80%;
}
.hero-sec5 {
left: 62%;
top: 85%;
}
.hero_section a {
top: 750px;
}
}
@media(max-width:1450px) {
.word3 {
top: 55%;
left: 58%;
}
.hero-sec {
position: absolute;
left: 59%;
top: 65%;
}
.hero-sec2 {
top: 70%;
left: 60%;
}
.hero-sec3 {
left: 61%;
top: 75%;
}
.hero-sec4 {
left: 62%;
top: 80%;
}
.hero-sec5 {
left: 63%;
top: 85%;
}
.hero_section a {
top: 500px;
/* background: green !important; */
}
}
@media(max-width:1440px) {
.hero_section a {
top: 700px;
/* background: bisque !important; */
width: 34%;
}
}
@media(max-width:1430px) {
.hero_section a {
/* backgrou nd: red; */
top: 620px;
/* background: bisque !important; */
width: 37%;
}
.word2 {
top: 39%;
font-size: 35px;
}
}
@media(max-width:1300px) {
.hero_section a {
top: 600px;
}
}
@media(max-width:1030px) {
.word1 {
top: 30%;
}
.word2 {
top: 37%;
font-size: 35px;
}
.word4 {
top: 46%;
}
.word3 {
top: 55%;
}
.hero-sec {
position: absolute;
left: 60%;
top: 65%;
font-size: 18px;
}
.hero-sec2 {
top: 70%;
font-size: 18px;
left: 61%;
}
.hero-sec3 {
left: 62%;
top: 75%;
font-size: 18px;
}
.hero-sec4 {
left: 63%;
top: 80%;
font-size: 18px;
}
.hero-sec5 {
left: 64%;
top: 85%;
font-size: 18px;
line-height: 24px;
}
.hero_section a {
top: 650px;
width: 33%;
right: 0%;
}
}
@media(max-width:800px) {
.word1 {
position: relative;
top: unset;
left: unset;
}
.word2 {
position: relative;
top: unset;
left: unset;
}
.word4 {
position: relative;
top: unset;
left: unset;
}
.word3 {
position: relative;
top: unset;
left: unset;
}
.hero-sec {
position: relative;
top: unset;
left: unset;
}
.hero-sec2 {
position: relative;
top: unset;
left: unset;
}
.hero-sec3 {
position: relative;
top: unset;
left: unset;
}
.hero-sec4 {
position: relative;
top: unset;
left: unset;
}
.hero-sec5 {
position: relative;
top: unset;
left: unset;
}
.hero_section a {
position: relative;
top: unset;
left: unset;
width: 100%;
transform: translateX(76px);
}
.hero_desc {
display: none;
}
.hero_section {
display: grid;
grid-template-columns: 80% !important;
justify-content: center;
}
.mainiMg {
width: 100%;
height: auto;
}
.hero_desc_res {
display: block;
}
}
@media(max-width:500px) {
.hero_section {
grid-template-columns: 100% !important;
padding: 0 3% !important;
}
.mainiMg {
margin: 0 !important;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
border-top-right-radius: 0% 0%;
border-bottom-right-radius: 0% 0%;
}
.hero_desc_res h3 {
font-size: 18px;
}
.hero_desc_res p {
font-size: 14px;
}
.hero_section a {
transform: translateX(13px);
}
}
@media(max-width:400px) {
.hero_section a {
transform: translateX(10px);
}
}
@media(max-width:350px) {
.hero_section a {
transform: translateX(7px);
}
}
/* ==================================== */
/* ===========ticketing================ */
.ticketing_section {
background-color: var(--bck_color);
padding-top: 10px;
}
.ticketing_section>.title {
display: flex;
justify-content: center;
column-gap: 10px;
padding-bottom: 10px;
}
.ticketing_section>.title h1 {
margin: 30px 0;
text-align: center;
color: white;
text-transform: uppercase;
position: relative;
font-size: 37px;
font-family: var(--main-font);
}
.ticketing_section .title img {
width: 400px;
}
.ticketing_section>.title {
margin-bottom: 60px;
}
.ticketing_section .days {
background: linear-gradient(to bottom, #920aa2 10%, #660b82, #2c0c57 70%);
border-top-right-radius: 80px;
padding-bottom: 40px;
color: white;
width: 95%;
margin: 0 2.5%;
}
.ticketing_section .days>div,
.ticketing_section .days_2>div {
font-family: var(--sora_extrabold);
}
.ticketing_section .ticket_type {
display: flex;
align-items: center;
justify-content: space-between;
width: 90%;
margin: 0 5%;
font-family: var(--sora_extrabold);
}
.ticketing_section .ticket_type span {
font-size: 40px;
font-weight: bold;
font-family: var(--sora_extrabold);
}
.ticketing_section .days>div:nth-child(2) {
margin-left: 40px;
align-items: start;
}
.ticketing_section .ticket_types {
display: grid;
grid-template-columns: 56% 44%;
width: 95%;
margin: 0px 2.5%;
background: linear-gradient(to right, #2c0c57, #2c0c57 50%, var(--bck_color) 98%);
}
.ticketing_section .ticket_types .days_t {
background: linear-gradient(to right, #2c0c57, #660b82 50%, #920aa2 80%);
color: white;
border-top-right-radius: 80px;
position: relative;
padding-bottom: 80px;
}
.ticketing_section .days_t .day_ticket {
width: 50%;
}
.ticketing_section .days_t .text p {
font-weight: 400;
font-family: var(--sora_font);
color: white;
font-size: 25px;
width: 90%;
margin: 20px 5%;
line-height: 32px;
}
.ticketing_section_ar .days_t .text p,
.ticketing_section_ar .days .text p {
direction: rtl;
font-family: var(--font_noor_light);
}
.ticketing_section .days .text p {
font-weight: 400;
font-family: var(--font_noor_light);
color: white;
font-size: 25px;
}
.ticketing_section .days a {
color: #ffffff;
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
border: none;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
background: linear-gradient(90deg, var(--purple_col), #6a1a97, var(--bck_color));
padding: 7px 20px;
display: block;
width: 50%;
margin: 0px 0 0 40%;
cursor: pointer;
outline: none;
text-align: start;
margin-top: 110px;
transform: translateX(23px);
}
.ticketing_section .days_t a {
color: #ffffff;
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
border: none;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
background: linear-gradient(90deg, var(--purple_col), #6a1a97, var(--bck_color));
padding: 7px 20px;
display: block;
width: 50%;
margin: 0px 0 0 40%;
cursor: pointer;
outline: none;
text-align: start;
margin-top: 110px;
transform: translateX(23px);
}
.ticketing_section .days:nth-child(3) {
padding-bottom: 50px;
}
.map {
width: 95%;
margin: 0 2.5%;
}
.map iframe {
width: 100%;
height: 450px;
border-radius: 20px;
border: none;
}
/* ============================ */
/* ============ Hidden Header== */
.right_side_h {
display: flex;
flex-direction: column;
row-gap: 20px;
justify-content: center;
position: fixed;
background: var(--bck_color);
width: 100%;
right: 0;
padding: 20px 10px;
top: 75px;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.right_side_h a {
background-color: transparent;
color: white;
outline: none;
border: none;
text-transform: uppercase;
font-family: var(--main-font);
font-weight: bold;
cursor: pointer;
text-align: center;
}
.hidden {
transform: translateX(250%);
width: 0;
}
.hidden1 {
display: none !important;
}
/* ========================= */
/* ========Arabic============*/
.ticketing_sec_ar .days .text {
margin: 0 40px 0 0;
}
.ticketing_sec_ar .days>.text p {
width: 80%;
margin: 0;
}
.ticketing_sec_ar a {
margin: 60px 46.5% 0 0;
background: linear-gradient(90deg, var(--bck_color), #6a1a97, var(--purple_col));
border-radius: 8px;
}
.card_ar {
column-gap: 40px;
}
/* .days_grid .days:nth-child(2) a
{
margin-top: 40px;
} */
.arab-b {
direction: rtl;
}
.arab-p {
direction: rtl;
text-align: right;
width: 90%;
line-height: 1.3;
font-size: 30px;
width: 83%;
margin-left: 10% !important;
}
/* .days_grid .pass1{
direction: rtl !important;
} */
.passp12 {
direction: rtl !important;
width: 95%;
font-size: 30px;
}
.first-p {
width: 90%;
font-size: 30px;
line-height: 1.2;
}
.gg {
font-size: 30px;
width: 75%;
line-height: 1.2;
margin-top: 10%;
}
.perfect {
font-size: 30px;
width: 80%;
}
.vipp {
font-size: 30px;
width: 120%;
}
.pass1 {
direction: rtl;
width: 90%;
font-size: 33px;
margin-top: 10% !important;
margin-left: 40% !important;
}
.vipar {
direction: rtl;
font-size: 33px;
width: 180%;
}
.vipp {
width: 180%;
}
.btnn2 {
color: #ffffff;
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
border: none;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
background: linear-gradient(90deg, #aa09b4, #5f0b7d, #490b6d);
padding: 7px 20px;
display: block;
width: 35%;
cursor: pointer;
outline: none;
text-align: start;
margin-top: 50px;
margin-left: 65%;
font-size: 18px;
font-family: var(--font_noor_bold);
}
.ticketing_sec_ar .btnn2 {
width: 30%;
margin-left: 70%;
}
.btn2_type {
color: #ffffff;
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
border: none;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
background: linear-gradient(90deg, #aa09b4, #5f0b7d, #490b6d);
padding: 7px 20px;
display: block;
width: 35%;
cursor: pointer;
outline: none;
text-align: start;
margin-top: 50px;
margin-left: 65%;
font-size: 18px;
position: absolute;
bottom: 20px;
font-family: var(--noor_font);
}
.btn2_type_s {
color: #ffffff;
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
border: none;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
background: linear-gradient(90deg, #aa09b4, #5f0b7d, #490b6d);
padding: 7px 20px;
display: block;
width: 45%;
cursor: pointer;
outline: none;
text-align: start;
margin-top: 50px;
margin-left: 55%;
font-size: 18px;
position: absolute;
bottom: 20px;
font-family: var(--noor_font);
}
.ticketing_section_ar .days_grid .days:nth-child(1) a {
margin-top: 35px;
}
/* ========================== */
/* =====Responsive========== */
@media(max-width:2200px)
{
.ticketing_section .title img
{
width: 600px;
}
.ticketing_section .ticket_type
{
font-size: 30px;
/* width: 100%; */
}
.ticketing_section .days_t .day_ticket
{
font-size: 45px;
}
.ticketing_section_ar .days_t .text p, .ticketing_section_ar .days .text p
{
font-size: 47px;
line-height: 58px;
}
.btnn2,
.btn2_type_s,
.btn2_type
{
font-size: 25px;
}
.ticketing_section .ticket_type h1
{
/* width: 50%; */
}
.ticketing_section .ticket_type span
{
font-size: 55px;
}
}
@media(max-width:2000px)
{
.ticketing_section .title img
{
width: 580px;
}
.ticketing_section .ticket_type
{
font-size: 25px;
/* width: 100%; */
}
.ticketing_section .days_t .day_ticket
{
font-size: 35px;
}
.ticketing_section_ar .days_t .text p, .ticketing_section_ar .days .text p
{
font-size: 40px;
line-height: 52px;
}
.btnn2,
.btn2_type_s,
.btn2_type
{
font-size: 25px;
}
.ticketing_section .ticket_type h1
{
/* width: 50%; */
}
.ticketing_section .ticket_type span
{
font-size: 50px;
}
}
@media(max-width:1880px) {
.ticketing_section .title img
{
width: 500px;
}
.ticketing_section a {
margin: 0px 0 0 44%;
margin-left: 44%;
}
.ticketing_sec_ar a {
margin: 60px 46.5% 0 0 !important;
background: linear-gradient(90deg, var(--bck_color), #6a1a97, var(--purple_col));
border-radius: 8px;
}
/* .ticketing_section_ar .days_grid .days:nth-child(1) a
{
margin-top: 50px;
} */
.ticketing_section a {
width: 37%;
margin: 40px 0 0 60%;
}
.ticketing_section_ar a {
width: 37%;
margin: 20px 0 0 60%;
}
}
@media(max-width:1850px)
{
.ticketing_section .title img
{
width: 530px;
}
.ticketing_section .ticket_type
{
font-size: 25px;
/* width: 100%; */
}
.ticketing_section .days_t .day_ticket
{
font-size: 35px;
}
.ticketing_section_ar .days_t .text p, .ticketing_section_ar .days .text p
{
font-size: 40px;
line-height: 52px;
}
.btnn2,
.btn2_type_s,
.btn2_type
{
font-size: 25px;
}
.ticketing_section .ticket_type h1
{
/* width: 50%; */
}
.ticketing_section .ticket_type span
{
font-size: 50px;
}
}
@media(max-width:1800px)
{
.ticketing_section .title img
{
width: 500px;
}
.ticketing_section .ticket_type
{
font-size: 20px;
/* width: 100%; */
}
.ticketing_section .days_t .day_ticket
{
font-size: 35px;
}
.ticketing_section_ar .days_t .text p, .ticketing_section_ar .days .text p
{
font-size: 30px;
line-height: 42px;
}
.btnn2,
.btn2_type_s,
.btn2_type
{
font-size: 22px;
}
.ticketing_section .ticket_type h1
{
/* width: 50%; */
}
.ticketing_section .ticket_type span
{
font-size: 50px;
}
}
@media(max-width:1500px) {
.ticketing_section .ticket_type
{
font-size: 20px;
/* width: 100%; */
}
.ticketing_section .days_t .day_ticket
{
font-size: 35px;
}
.ticketing_section_ar .days_t .text p, .ticketing_section_ar .days .text p
{
font-size: 25px;
line-height: 42px;
}
.btnn2,
.btn2_type_s,
.btn2_type
{
font-size: 18px;
}
.ticketing_section .ticket_type h1
{
/* width: 50%; */
}
.ticketing_section .ticket_type span
{
font-size: 35px;
}
.ticketing_sec_ar a {
margin: 60px 46.5% 0 0;
background: linear-gradient(90deg, var(--bck_color), #6a1a97, var(--purple_col));
border-radius: 8px;
}
.ticketing_section .days>div:nth-child(1) {
width: 90%;
margin-left: 5%;
}
.ticketing_section a {
margin: 20px 0 0 60%;
width: 37%;
}
.ticketing_section_ar a {
margin: 30px 0 0 60%;
}
}
@media(max-width:1300px) {
.ticketing_section .ticket_type
{
font-size: 18px;
/* width: 100%; */
}
.ticketing_section .days_t .day_ticket
{
font-size: 30px;
}
.ticketing_section_ar .days_t .text p, .ticketing_section_ar .days .text p
{
font-size: 25px;
line-height: 38px;
}
.btnn2,
.btn2_type_s,
.btn2_type
{
font-size: 18px;
}
.ticketing_section .ticket_type h1
{
/* width: 50%; */
}
.ticketing_section .ticket_type span
{
font-size: 35px;
}
.ticketing_sec_ar a {
margin: 60px 46.5% 0 0;
background: linear-gradient(90deg, var(--bck_color), #6a1a97, var(--purple_col));
border-radius: 8px;
}
.ticketing_section .days>div:nth-child(1) {
width: 90%;
margin-left: 5%;
}
.ticketing_section a {
margin: 20px 0 0 60%;
width: 37%;
}
.ticketing_section_ar a {
margin: 30px 0 0 60%;
}
}
@media(max-width:1200px) {
.ticketing_section a {
margin: 40px 0 0 38%;
}
.ticketing_sec_ar a {
margin: 60px 46.5% 0 0;
background: linear-gradient(90deg, var(--bck_color), #6a1a97, var(--purple_col));
border-radius: 8px;
}
.ticketing_section .days_t .text p {
font-size: 20px;
}
}
@media(max-width:1030px) {
.ticketing_section .title img
{
width: 450px;
}
.ticketing_section .days .text p {
line-height: 32px;
font-size: 18px;
}
.ticketing_section .days_t .text p {
font-size: 18px;
line-height: 32px;
}
.btn2_type {
width: 45%;
margin-left: 55%;
}
.btn2_type_s {
width: 55%;
margin-left: 45%;
}
.ticketing_section .ticket_types .days_t {
padding-bottom: 60px;
}
.ticketing_section>.title {
margin-bottom: 30px;
}
.ticketing_section .ticket_type h1
{
font-size: 25px;
}
.ticketing_section .days_t .day_ticket {
font-size: 25px;
}
.ticketing_section .ticket_type span {
font-size: 25px;
}
.ticketing_section .ticket_type
{
margin: 3%;
}
}
@media(max-width:950px) {
.ticketing_section .title img
{
width: 400px;
}
.pass1 {
margin-top: 0% !important;
}
.ticketing_section .days:nth-child(3) a {
margin-left: 52% !important;
}
.ticketing_sec_ar .days:nth-child(3) a,
.ticketing_sec_ar a {
margin: 60px 52% 0 0 !important;
}
.last div:nth-child(1) h1 {
font-size: 25px;
}
.card_ar div:nth-child(1) a {
left: 165px;
}
.ticketing_section .days>div:nth-child(2) {
flex-direction: column;
margin-left: 0;
}
.ticketing_section .days .text p {
width: 95%;
margin-left: 2% !important;
/* text-align: center; */
font-size: 18px;
font-weight: normal;
margin-top: 30px;
/* margin-left: 3% !important; */
}
/* .ticketing_section .days_grid .days p
{
font-size: 18px !important;
} */
.btnn2 {
font-size: 18px !important;
width: 45% !important;
margin-left: 55%;
}
/* .days_grid
{
grid-template-columns: 100% !important;
} */
.ticketing_section a {
width: 40%;
margin-left: 45%;
}
.ticketing_section .last>div:nth-child(1) {
width: 80% !important;
margin: 0 10% !important;
}
/* .days_grid a
{
transform: translateX(70px);
} */
.ticketing_sec_ar a {
transform: translateX(0);
margin: 0 55% 0 0;
}
.ticketing_sec_ar .days_grid .days:nth-child(2) a,
.ticketing_sec_ar a
/* .ticketing_sec_ar .days_grid .days:nth-child(1) a,
.ticketing_section .days_grid .days:nth-child(1) a */
{
margin-top: 30px !important;
}
.ticketing_section .days>div:nth-child(2) div {
width: 100%;
}
.btnn2 {
margin-top: 20px;
}
.ticketing_section .last a {
margin-top: 20px;
}
.ticketing_section .ticket_types {
grid-template-columns: 100%;
row-gap: 0px;
}
.ticketing_section .ticket_types .days_t {
background: linear-gradient(to bottom, #920aa2 10%, #660b82, #2c0c57 70%);
}
.ticketing_section .ticket_types .days_t:nth-child(2) {
border-radius: 0;
}
.ticketing_section .ticket_types .days_t:nth-child(1) {
padding-bottom: 60px;
}
.btn2_type_s {
width: 45%;
margin-left: 55%;
}
.ticketing_section .days_t .day_ticket {
width: unset;
}
.map {
width: 95%;
margin: 0 2.5;
}
.ticketing_section .days {
border-radius: 0;
}
}
@media(max-width:700px) {
.ticketing_sec_ar a {
margin: 120px 25% 0 0;
transform: translateX(0) !important;
}
.ticketing_sec_ar .days_grid .days:nth-child(2) a,
.ticketing_sec_ar a,
.ticketing_sec_ar .days_grid .days:nth-child(1) a {
margin-top: 30px !important;
}
.ticketing_section .days:nth-child(3) a {
margin: 20px 0% 0 6% !important;
}
.ticketing_section .last a {
width: 60%;
margin: 20px 0% 0 25% !important;
}
.ticketing_sec_ar .last a,
.ticketing_sec_ar .days:nth-child(3) a {
margin: 60px 31% 0 0% !important;
}
.ticketing_section .days>div:nth-child(1) {
flex-direction: column;
width: 100%;
margin: 0;
}
.ticketing_section .days>div:nth-child(1) h1,
.ticketing_section .days>div:nth-child(1) span {
font-size: 30px;
text-align: center;
}
.ticketing_section .days>div:nth-child(2)>div {
width: 100%;
margin: 0 0%;
}
.ticketing_section a {
width: 60%;
margin-left: 20%;
}
.days_grid {
grid-template-columns: 100% !important;
margin-top: 40px;
/* column-gap: 30px; */
}
.days_grid>div:nth-child(2) {
margin-left: 0 !important;
}
.last {
margin-top: 20px !important;
}
.days_grid a {
transform: translateX(50px);
}
.right_side_h {
width: 40% !important;
}
.list_icon {
display: block;
}
.last div:nth-child(1) h1 {
width: 60%;
text-align: center;
}
.ticketing_section .days .text p {
font-size: 14px;
line-height: 28px;
}
.ticketing_section .days_grid .days p {
font-size: 14px !important;
}
.btnn2 {
margin-top: 20px;
}
.ticketing_section .ticket_type {
flex-direction: column;
justify-content: center;
}
.ticketing_section .ticket_type h1,
.ticketing_section .ticket_type span {
font-size: 30px;
text-align: center;
margin-bottom: 0;
}
.ticketing_section .days_t .text p {
font-size: 14px;
line-height: 28px;
width: 95%;
margin-left: 2%;
font-weight: normal;
}
.btn2_type,
.btn2_type_s {
width: 60%;
margin-left: 40%;
}
.ticketing_section .title img {
width: 300px;
}
.ticketing_section>.title {
margin-bottom: 30px;
}
.ticketing_section .days {
border-radius: 0;
}
.ticketing_section .ticket_types .days_t,
.ticketing_section .ticket_types .days_t:nth-child(2) {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
}
@media(max-width:500px) {
.ticketing_sec_ar a {
margin: 120px 32% 0 0 !important;
}
.play_games h1 {
font-size: 25px;
}
.ticketing_sec_ar .days>div:nth-child(2) {
margin: 0;
}
.ticketing_sec_ar .btnn2 {
width: 65%;
margin-left: 35%;
}
.btnn2 {
width: 60% !important;
margin-left: 40%;
}
.ticketing_section .days>div:nth-child(1) h1 {
margin-bottom: 0;
}
.ticketing_section .days .text p {
margin-left: 2% !important;
}
.ticketing_section .ticket_type h1,
.ticketing_section .days>div:nth-child(1) h1
{
font-size: 20px;
}
.ticketing_section .ticket_type span,
.ticketing_section .days>div:nth-child(1) span {
font-size: 25px;
}
.ticketing_section .ticket_types .days_t {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.ticketing_section .days_t .day_ticket
{
font-size: 18px;
}
/*
.ticketing_section .title img
{
width: 400px;
} */
}
@media(max-width:400px) {
.vipp {
width: 100% !important;
}
.ticketing_section .ticket_type h1,
.ticketing_section .ticket_type span {
font-size: 18px;
}
.ticketing_section_ar .btnn2 {
width: 65% !important;
margin-left: 35% !important;
}
.ticketing_section .days>div:nth-child(1) h1 {
margin-bottom: 5px;
}
.ticketing_section .days>div:nth-child(1) h1,
.ticketing_section .days>div:nth-child(1) span {
font-size: 18px !important;
}
.ticketing_section .days .text p,
.ticketing_sec_ar .days .text p {
/* font-size: 12px; */
margin-left: 0 !important;
}
.ticketing_section .text p {
margin-top: 30px !important;
}
.btnn2 {
/* width: 38% !important; */
font-size: 14px !important;
/* margin-left: 63%; */
}
.btn2_type,
.btn2_type_s {
font-size: 14px;
}
.ticketing_sec_ar .days .text p {
/* text-align: center; */
margin-top: 10px;
}
.ticketing_section>h1 {
font-size: 25px;
}
.days_grid a {
transform: translateX(25px);
}
.ticketing_section .days:nth-child(3) a {
margin: 60px 0% 0 23% !important;
}
.ticketing_section .last a {
margin: 20px 0% 0 23% !important;
}
.ticketing_sec_ar .days:nth-child(3) a,
.ticketing_sec_ar .last a {
margin: 60px 30% 0 0% !important;
}
.ticketing_section a {
margin: 60px 0 0 24% !important;
}
.ticketing_sec_ar a {
margin: 60px 29% 0 0% !important;
}
.ticketing_section .days .text p {
margin-left: 2% !important;
}
}
@media(max-width:322px) {
/* .ticketing_section .days > div:nth-child(2) p
{
margin-left: 2% !important;
} */
.ticketing_section .days:nth-child(3) a,
.ticketing_section .last a {
margin-left: 20%;
}
.ticketing_section .last a {
margin: 20px 0% 0 20% !important;
}
.ticketing_section .days>.text p {
/* font-size: 11px; */
margin-right: 2% !important;
}
.arab-b {
font-size: 13px !important;
}
.days_grid .pass1 {
/* font-size: 13px !important; */
}
.ticketing_section a {
margin: 60px 0 0 20% !important;
}
.ticketing_section .days:nth-child(3) a {
margin: 60px 0% 0 20% !important;
}
.ticketing_sec_ar .days:nth-child(3) a,
.ticketing_sec_ar .last a {
margin: 60px 28% 0% 0 !important;
}
.ticketing_sec_ar a {
margin: 120px 28% 0 0 !important;
}
.btnn2 {
width: 65% !important;
margin-left: 35% !important;
font-size: 13px !important;
}
.ticketing_section_ar .btnn2 {
width: 70% !important;
margin-left: 30% !important;
}
}
/* /////////////////////// */
.vr_parent {
margin: 0;
padding: 0;
font-family: var(--main-font);
background-color: var(--bck_color);
color: #fff;
overflow-x: hidden;
padding: 0 0 70px 0;
}
.vr-section {
display: flex;
align-items: center;
justify-content: center;
width: 95%;
/* padding: 0 0 70px; */
background: linear-gradient(to right, #0f0d42, #270c54 70%, #3e0b65);
/* min-height: 500px; */
gap: 40px;
flex-wrap: wrap;
}
.vr-image {
position: relative;
width: 45%;
overflow: hidden;
height: 500px;
}
.vr-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.overlay-vr {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, var(--title_color) 0%, #0d0d41b8 75%);
opacity: 0.4;
}
.vr-con {
width: 45%;
background: var(--gradient);
padding: 40px;
height: auto;
box-sizing: border-box;
}
/* العنوان */
.vr-title1 {
font-family: var(--sora_font);
font-size: 30px;
margin-bottom: 15px;
line-height: 1.2;
word-wrap: break-word;
font-weight: 700;
}
.neon {
color: var(--neon);
}
/* الفقرة */
.vr-p {
font-size: 25px;
line-height: 1.4;
margin-bottom: 25px;
font-family: var(--sora_font);
}
/* النص العربي */
.arb {
direction: rtl;
text-align: right;
width: 100%;
color: var(--text_color);
font-family: var(--font_noor_light);
}
.arbt {
margin-left: 20%;
width: 100%;
font-family: var(--font_noor_bold);
}
/* الزر */
.vr-btn1 {
background: var(--background_buttons);
outline: none;
border: none;
border-radius: 30px;
text-align: center;
font-size: 20px;
font-family: var(--sora_extrabold);
font-weight: bold;
padding: 10px 30px;
/* margin-top: 50px; */
margin-bottom: 20px;
text-transform: uppercase;
color: white;
}
/* .vr-btn1:hover {
transform: scale(1.05);
} */
.btnen {
margin-left: 10%;
}
/* ===== النسخة الإنجليزية ===== */
.vr-en {
flex-direction: row-reverse;
}
@media(max-width:2200px) {
.arbt {
font-size: 60px;
}
.arb {
font-size: 36px;
width: 80%;
margin-left: 20%;
}
.vr-btn1
{
font-size: 31.5px;
}
.vr-image
{
height: 650px;
/* background: red; */
}
.arbt {
margin-top: 0px;
/* color: red; */
margin-bottom: 40px;
}
}
@media(max-width:2000px)
{
.arbt {
margin-left: 50px;
/* color: red; */
margin-top: 0px;
}
.vr-btn1
{
font-size: 30px;
margin-top: 60px;
}
}
@media(max-width:1850px) {
.arbt {
font-size: 50px;
margin-left: 120px;
/* color: gray; */
}
.arb {
font-size: 30px;
width: 80%;
margin-left: 20%;
/* color: red; */
}
.vr-btn1
{
font-size: 30px;
margin-top: 10px;
}
.vr-image
{
height: 550px;
/* background: red; */
}
.arbt {
margin-top: 0px;
/* color: red; */
margin-bottom: 40px;
}
}
@media(max-width:1820px)
{
.vr-btn1
{
font-size: 30px;
margin-top: 160px;
/* background: red; */
}
.vr-image
{
height: 450px;
/* background: red; */
}
}
@media(max-width:1800px) {
.arbt {
font-size: 45px;
margin-left: 120px;
/* color: gray; */
}
.arb {
font-size: 26px ;
width: 80%;
line-height: 40px;
margin-left: 20%;
/* color: red; */
}
.vr-btn1
{
font-size: 27px;
margin-top: 30px;
}
.vr-image
{
height: 480px;
/* background: red; */
}
.arbt {
margin-top: 0px;
/* color: red; */
margin-bottom: 40px;
}
}
@media(max-width:1800px) {
.arbt {
margin-left: 0;
text-align: end;
}
}
@media(max-width:1500px) {
.arbt {
font-size: 45px;
margin-left: 0px;
/* color: gray; */
}
.arb {
font-size: 24px ;
width: 100%;
line-height: 40px;
margin-left: 0%;
/* color: red; */
}
.vr-btn1
{
font-size: 20px;
margin-top: 10px;
}
.vr-image
{
height: 450px;
/* background: red; */
}
.arbt {
margin-top: 0px;
/* color: red; */
margin-bottom: 40px;
}
}
@media(max-width:1500px) {
.arbt {
font-size: 45px;
margin-left: 0px;
/* color: gray; */
}
.arb {
font-size: 25px;
width: 100%;
line-height: 40px;
margin-left: 0%;
/* color: red; */
}
.vr-btn1
{
font-size: 18px;
margin-top: 10px;
}
.vr-image
{
height: 450px;
/* background: red; */
}
.arbt {
margin-top: 0px;
/* color: red; */
margin-bottom: 40px;
}
}
/* ===== التابلت (1024px) ===== */
@media (max-width: 1024px) {
.vr-section {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
text-align: left;
gap: 25px;
}
.vr-image,
.vr-con {
width: 48%;
height: auto;
/* min-height: 350px; */
}
.vr-con {
padding: 30px;
}
.vr-title1 {
font-size: 30px;
text-align: right;
margin-left: 5%;
}
.title1en {
text-align: left;
}
.vr-p {
font-size: 22px;
line-height: 1.4;
text-align: start;
margin-left: 5%;
margin-right: 5%;
}
/* العربي يبدأ من نفس المسافة */
.arb {
direction: rtl;
text-align: right;
margin-right: 5%;
margin-left: 5%;
}
.vr-btn1 {
font-size: 18px;
padding: 10px 22px;
/* width: 200px; */
/* margin: 20px auto 0; */
display: block;
}
}
/* ===== التابلت الصغير (768px) ===== */
@media (max-width: 768px) {
.vr-image img {
height: 300px;
}
.vr-section {
flex-direction: column;
gap: 25px;
}
.vr-image,
.vr-con {
width: 90%;
height: auto;
}
.vr-title1 {
font-size: 30px;
text-align: end;
margin-left: 0;
margin-bottom: 30px;
}
.vr-p {
font-size: 18px;
text-align: end;
margin: 0 auto;
}
.vr-section-en .vr-title1,
.vr-section-en .vr-p {
text-align: start;
}
.vr-section {
background: var(--bck_color);
}
.arb {
text-align: right;
margin: 0;
padding-right: 10%;
font-size: 22px;
}
.vr-btn1 {
width: 40%;
margin: 50px 0 0 0;
display: block;
}
.vr-section {
width: 90%;
margin: 0 5%;
align-items: center;
}
.vr-section>div {
width: 80%;
}
.vr-con {
padding: 0;
margin: 20px 0 0 0;
}
}
/* ===== الموبايل (600px) ===== */
@media (max-width: 600px) {
.vr-section {
width: 90%;
margin: 0 5%;
flex-direction: column;
gap: 20px;
}
.vr-image,
.vr-con {
width: 100%;
/* height: auto; */
}
.vr-con {
padding: 0px;
}
.vr-title1 {
font-size: 25px;
}
.vr-section-en .vr-title1 {
font-size: 18px;
}
.vr-p {
font-size: 18px;
}
.vr-section-en .vr-p {
font-size: 14px;
line-height: 32px;
}
.arb {
text-align: right;
margin: 0;
padding-right: 10%;
line-height: 32px;
}
.vr-btn1 {
width: 70%;
padding: 12px 0;
/* margin: 0 auto; */
display: block;
}
.vr-section {
width: 94%;
margin: 0 3%;
}
.vr-section>div {
width: 100%;
}
}
@media(max-width:500px) {
.vr-btn1 {
width: 50%;
}
}
@media(max-width:400px) {
.vr-title1 {
font-size: 20px;
}
.arb {
font-size: 16px;
}
.vr-btn1 {
margin-top: 20px;
width: 60%;
font-size: 16px;
font-weight: normal;
}
}
/* ===================== */
/* ===================== */
/* ===================== */
/* ===================== */
/* ===================== */
/* ====================================== */
/* ===============Activate================= */
.bookN {
background: linear-gradient(to right, var(--purple_col) 20%, #6e2698, var(--bck_color));
color: white;
font-family: var(--title_font);
padding: 8px 30px;
border-radius: 25px;
outline: none;
border: none;
cursor: pointer;
font-weight: 700;
font-size: 18px;
margin-top: 100px;
margin-left: 10%;
display: inline-block;
position: absolute;
width: 10%;
height: 4%;
left: 35%;
top: 100%;
}
.imagg {
width: 100%;
position: relative;
height: 75vh;
overflow: hidden;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
border-top-left-radius: 0 100%;
border-bottom-left-radius: 100% 200%;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
/* direction: ltr; */
top: 15% !important;
}
.imagg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 70% 70%;
}
.imagg::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to right, rgba(11, 11, 58, 0.6), rgba(129, 33, 132, 0.5));
}
.casualt2 {
display: flex;
font-family: "Archivo Black", sans-serif;
}
.casual_text2 {
position: absolute;
top: 135%;
left: 7%;
font-weight: 400;
font-size: 30px;
color: white;
}
.casual_text3 {
position: absolute;
top: 135%;
left: 28%;
color: #00ff00;
font-weight: 400;
font-size: 30px;
}
.casual_text4 {
font-family: "Archivo Black", sans-serif;
position: absolute;
color: #00ff00;
font-weight: 400;
font-size: 30px;
top: 142%;
left: 7%;
}
.casual_text5 {
font-family: var(--main-font);
position: absolute;
font-weight: 400;
font-size: 22px;
color: white;
top: 153%;
left: 7%;
width: 37%;
}
.casual_text6 {
font-family: var(--main-font);
position: absolute;
font-weight: 400;
font-size: 22px;
color: white;
top: 170%;
left: 7%;
width: 40%;
}
.casual_text7 {
font-family: var(--main-font);
position: absolute;
font-weight: 400;
font-size: 22px;
color: white;
top: 188%;
left: 7%;
width: 40%;
}
.activate_section {
padding: 200px 0px 30px 0;
}
.activate_section div:nth-child(2) a {
position: absolute;
bottom: 30px;
z-index: 1;
right: 30px;
background: var(--background_buttons);
color: white;
font-family: var(--main-font);
padding: 10px 35px;
border-radius: 25px;
outline: none;
border: none;
cursor: pointer;
font-weight: 700;
font-size: 22px;
}
.activate_section h1 {
color: var(--title_color);
width: 80%;
margin-left: 4%;
font-weight: 800;
font-family: var(--title_font);
font-size: 40px;
margin-top: 0px !important;
position: absolute;
top: 128%;
}
/* =================================*/
/* =============VR==================*/
.VR_section {
width: 100%;
height: 130vh;
}
.iGv {
width: 65%;
position: absolute;
top: 220%;
left: 2%;
background-color: none;
border: 20px bold black;
border-right: 20px;
}
.imagVr {
width: 100%;
height: 80vh;
overflow: hidden;
}
.imagVr::after {
content: "";
position: absolute;
top: 220%;
left: 0;
width: 98%;
height: 90vh;
background: linear-gradient(to right, var(--bck_color) 20%, #6a1a97);
z-index: 1;
opacity: 0.7;
}
.VR_section span {
font-family: "Archivo Black", sans-serif;
z-index: 1;
}
.vr_txt1 {
position: absolute;
font-size: 32px;
font-weight: 600;
color: white;
top: 237%;
right: 11.5%;
}
.vr_txt2 {
position: absolute;
font-size: 32px;
font-weight: 600;
color: white;
top: 243%;
right: 34.5%;
}
.vr_last {
display: flex;
direction: ltr;
}
.vr_txt3 {
position: absolute;
font-size: 32px;
font-weight: 600;
color: #00ff00;
top: 243%;
right: 2%;
width: 32%;
}
.vr_txt4 {
position: absolute;
font-size: 32px;
font-weight: 600;
color: #00ff00;
top: 250%;
right: 3%;
width: 45%;
}
.VR_section p {
color: white;
font-size: 25px;
font-weight: 500;
line-height: 30px;
text-transform: uppercase;
margin-left: 0%;
font-family: var(--main-font);
z-index: 1;
/* margin-bottom: 40px; */
}
.vr_txt5 {
position: absolute;
top: 260%;
right: 3%;
width: 45%;
}
.vr_txt6 {
position: absolute;
top: 275%;
right: 3%;
width: 45%;
}
.vr_txt7 {
position: absolute;
top: 290%;
right: 3%;
width: 45%;
}
.VR_section a {
background: var(--background_buttons);
color: white;
font-family: var(--title_font);
padding: 8px 70px;
border-radius: 25px;
outline: none;
border: none;
cursor: pointer;
font-weight: 700;
font-size: 20px;
margin-top: 100px;
margin-left: 10%;
display: inline-block;
position: absolute;
/* width: 8%; */
height: 5%;
left: -5%;
top: 277%;
z-index: 1;
}
/* =============Responsive==================*/
/* @media (max-width: 320px) {
.hero_section {
padding: 0px;
position: relative;
display: block;
}
.hero_section a {
position: absolute;
top: 730%;
right: 0%;
width: 40%;
padding: 10px 20px 30px;
font-size: 16px;
}
.hero-sec {
top: 545%;
left: 4.5% !important;
width: 86% !important;
font-size: 20px;
}
.hero-sec2 {
top: 572%;
left: 4.5% !important;
width: 86% !important;
font-size: 20px;
}
.hero-sec3 {
top: 600%;
left:4.5% !important;
width: 50% !important;
font-size: 20px;
}
.hero-sec4 {
top: 628%;
left: 4.5% !important;
width: 84% !important;
font-size: 20px;
}
.hero-sec5 {
top: 656%;
left: 4.5% !important;
width: 90% !important;
font-size: 20px;
}
.mainiMg {
position: absolute !important;
top: 180% !important;
right: 5% !important;
width: 90%;
height: 50vh;
clip-path: none !important;
border-top-right-radius: 0 0 !important;
}
.word1 {
display: flex;
font-size: 24px;
top: 478%;
right: 0%;
width: 90%;
}
.word2 {
display: flex;
font-size: 24px;
top: 505%;
right: 2%;
width: 93%;
}
.word3 {
display: flex;
font-size: 24px;
top: 535%;
right: 4%;
width: 30%;
}
.word4 {
display: flex;
font-size: 24px;
top: 535%;
right: 15%;
width: 80%;
}
.activate_section .imagg {
position: absolute !important;
top: 149% !important;
left: 50% !important;
width: 90% !important;
height: 40vh !important;
transform: translate(-50%, -50%) !important;
}
.bookN{
left: 20% !important;
top: 100% !important;
padding: 10px 0px 8px 20px !important;
display: flex !important;
width: 40% !important;
align-items: center !important;
font-size: 16px !important;
}
.activate_section h1 {
font-family: "Archivo Black", sans-serif;
font-size: 24px;
top: 171.5%;
right: 5%;
width: 90% !important;
font-weight: 700;
}
.casual_text2 {
font-size: 20px;
top: 174%;
left: 4%;
width: 70%;
}
.casual_text3 {
font-size: 20px;
top: 174%;
left: 60%;
width: 35%;
}
.casual_text4 {
font-size: 20px;
top: 179% !important;
left: 4.5%;
width: 85%;
}
.casual_text5 {
font-size: 18px;
top: 185% !important;
left: 4.5%;
width: 85%;
}
.casual_text6 {
font-size: 18px;
top: 205% !important;
width: 80%;
left: 4.5%;
}
.casual_text7 {
font-size: 18px;
top: 225% !important;
width: 90%;
left: 4.5%;
}
.activate_section div:nth-child(2) a {
width: 40%;
padding: 8px 15px 8px 16px;
font-size: 18px !important;
}
.VR_section {
padding-bottom: 500% !important;
}
.iGv {
top: 246% !important;
height: 40%;
}
.imagVr::after {
top: 246%;
width: 98%;
height: 40%;
}
.VR_section .vr_last {
display: flex;
}
.vr_txt1 {
font-size: 18px;
top: 289%;
right: 2%;
width: 95%;
}
.vr_txt2 {
font-size: 18px;
top: 294%;
left: 3%;
width: 60%;
}
.vr_txt3 {
font-size: 18px;
top: 294%;
left: 35%;
width: 64%;
}
.vr_txt4 {
font-size: 18px;
top: 298%;
left: 3%;
width: 80%;
}
.vr_txt5 {
font-size: 18px !important;
top: 303%;
left: 5.5%;
width: 85%;
}
.vr_txt6 {
font-size: 18px !important;
top: 324%;
left: 5%;
width: 85%;
}
.vr_txt7 {
font-size: 18px !important;
top: 345%;
left: 5%;
width: 85%;
}
.VR_section a {
top: 258%;
padding: 8px 20px 1px 20px !important;
font-size: 12px;
width: 20%;
left: -5% !important;
}
} */
/* @media (max-width: 768px) {
.hero_section {
padding: 40px;
position: relative;
display: block;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.hero_section h3 {
font-size: 26px;
text-align: center;
}
.hero_section a {
position: absolute;
top:270%;
right: 0%;
width: 28%;
padding: 5px 20px 25px;
font-size: 18px;
}
.hero-sec {
top: 152%;
left: 59.5%;
width: 40% !important;
font-size:16px;
}
.hero-sec2 {
top: 170%;
left: 60% ;
width: 38% !important;
font-size:16px;
}
.hero-sec3 {
top: 188%;
left: 61% ;
width: 30% !important;
font-size:16px;
}
.hero-sec4 {
top: 205%;
left: 61.5% ;
width: 37% !important;
font-size:16px;
}
.hero-sec5 {
top: 222%;
left: 62% ;
width: 38% !important;
font-size:16px;
}
.mainiMg {
position: absolute;
top: 70%;
left: -1.5%;
width: 60%;
height: 60vh;
}
.word1 {
position: absolute;
display: flex;
font-size: 28px;
top: 52%;
right: 5%;
}
.word2 {
display: flex;
font-size: 28px;
top: 82%;
right: 1%;
width: 43%;
}
.word3 {
display: flex;
font-size: 28px;
top: 134%;
right: 11%;
}
.word4 {
display: flex;
font-size: 28px;
top: 108%;
right: 8%;
}
.activate_section .imagg {
position: absolute;
top: 90% !important;
width: 50%;
right: 2%;
height: 56%;
}
.bookN {
position: relative;
left: -30%;
top: -10%;
padding: 15px 15px;
display: flex;
width: 35%;
align-items: center;
}
.activate_section h1 {
font-size: 30px;
top: 90%;
left: -2%;
font-weight: 600;
}
.casual_text2 {
font-size: 22px;
top: 95%;
left: 4%;
}
.casual_text3 {
font-size: 22px;
top: 95%;
left: 29%;
}
.casual_text4 {
font-size: 22px;
top: 100%;
left: 4%;
}
.casual_text5 {
font-size: 16px;
top: 109.5%;
width: 44%;
left: 4%;
}
.casual_text6 {
font-size: 16px;
top: 121%;
width: 44%;
left: 4%;
}
.casual_text7 {
font-size: 16px;
top: 136%;
width: 50%;
left: 4%;
}
.activate_section div:nth-child(2) a {
width: 55%;
padding: 8px 5px 8px 13px;
font-size: 20px;
}
.VR_section {
padding-bottom: 100% !important;
top: 1500%;
}
.iGv {
top: 170%;
}
.imagVr::after {
top: 170%;
width: 98%;
height: 63.6%;
}
.vr_txt1 {
font-size: 20px;
top: 180%;
right: 15%;
}
.vr_txt2 {
font-size: 20px;
top: 185%;
right: 38%;
}
.vr_txt3 {
font-size: 20px;
top: 185%;
right: 1%;
width: 35%;
}
.vr_txt4 {
font-size: 20px;
top: 190%;
right: 4%;
width: 48%;
}
.vr_txt5 {
font-size: 14px !important;
top: 193%;
right: 6.5%;
width: 45%;
line-height: 20px !important;
}
.vr_txt6 {
font-size: 14px !important;
top: 204%;
right: 6.5%;
line-height: 20px !important;
}
.vr_txt7 {
font-size: 14px !important;
top: 215%;
right: 2%;
width: 50%;
line-height: 20px !important;
}
.VR_section a {
top: 200%;
padding: 5px 5px 6px 20px;
width: 15%;
font-size: 18px;
}
} */
/* @media (max-width: 1024px) {
.hero_section {
padding: 80px;
position: relative;
display: block;
}
.hero_section a {
position: absolute;
top: 600%;
right: 0%;
width: 30%;
padding: 10px 40px 30px;
font-size: 18px;
}
.hero-sec {
top: 380% !important;
left: 59% !important;
width: 40% !important;
font-size: 28px;
}
.hero-sec2 {
top: 410%;
left: 59.5% !important;
width: 38% !important;
font-size: 28px;
}
.hero-sec3 {
top: 440%;
left: 60% !important;
width: 30% !important;
font-size: 28px;
}
.hero-sec4 {
top: 470%;
left: 60.5% !important;
width: 35% !important;
font-size: 28px;
}
.hero-sec5 {
top: 500%;
left: 61% !important;
width: 39% !important;
font-size: 28px;
}
.mainiMg {
position: absolute;
top: 240% !important;
left: -1%;
width: 60%;
height: 45vh;
}
.word1 {
display: flex;
font-size: 32px;
top: 230%;
right: 4.5%;
}
.word2 {
display: flex;
font-size: 32px;
top: 270%;
right: 4%;
}
.word3 {
display: flex;
font-size: 32px;
top: 350%;
right: 11%;
}
.word4 {
display: flex;
font-size: 32px;
top: 310%;
right: 8%;
}
.activate_section .imagg {
position: absolute;
top: 86% !important;
width: 50%;
right: 2%;
height: 56%;
}
.bookN {
position: relative;
left: -30%;
top: 240%;
padding: 18px 30px;
display: flex;
width: 25%;
align-items: center;
}
.activate_section h1 {
font-family: "Archivo Black", sans-serif;
font-size: 40px;
top: 85%;
left: -2%;
font-weight: 700;
}
.casual_text2 {
font-size: 28px;
top: 90%;
left: 4%;
}
.casual_text3 {
font-size: 28px;
top: 90%;
left: 28%;
}
.casual_text4 {
font-size: 28px;
top: 95%;
left: 4%;
}
.casual_text5 {
font-size: 22px;
top: 102%;
width: 40%;
left: 4%;
}
.casual_text6 {
font-size: 22px;
top: 115%;
width: 40%;
left: 4%;
}
.casual_text7 {
font-size: 22px;
top: 128%;
width: 50%;
left: 4%;
}
.VR_section {
padding-bottom: 300% !important;
}
.iGv {
top: 150%;
}
.imagVr::after {
top: 150%;
width: 98%;
height: 48%;
}
.VR_section .vr_last {
font-size: 28px;
display: flex;
}
.vr_txt1 {
font-size: 28px;
top: 157%;
right: 12%;
}
.vr_txt2 {
font-size: 28px;
top: 161%;
right: 36%;
}
.vr_txt3 {
font-size: 28px;
top: 161%;
right: 3%;
}
.vr_txt4 {
font-size: 28px;
top: 165%;
right: 1%;
width: 50%;
}
.vr_txt5 {
font-size: 22px !important;
top: 168%;
right: 5.5%;
}
.vr_txt6 {
font-size: 22px !important;
top: 178%;
right: 5.5%;
}
.vr_txt7 {
font-size: 22px !important;
top: 188%;
right: 0%;
width: 50%;
}
.VR_section a {
top: 175%;
padding: 5px 40px !important;
width: 10%;
}
} */
/* @media (max-width: 1440px) {
.hero_section a {
position: absolute;
top: 80%;
right: 0%;
width: 30%;
padding: 20px 40px 30px 30px;
font-size: 24px;
}
.hero-sec {
top: 44%;
left: 58% !important;
width: 40% !important;
font-size: 30px;
}
.hero-sec2 {
top: 50%;
left: 59.3% !important;
width: 38% !important;
font-size: 30px;
width: 40% !important;
}
.hero-sec3 {
top: 56%;
left: 60.5% !important;
width: 30% !important;
font-size: 30px;
}
.hero-sec4 {
top: 62%;
left: 61.5% !important;
width: 38% !important;
font-size: 30px;
}
.hero-sec5 {
top: 68%;
left: 62.5% !important;
width: 37% !important;
font-size: 30px;
}
.word1 {
display: flex;
font-size: 55px;
top: 12%;
right: 6.5%
}
.word2 {
display: flex;
font-size: 55px;
top: 20%;
right: 2.5%;
width: 43%;
}
.word3 {
display: flex;
font-size: 55px;
top: 36%;
right: 13%;
}
.word4 {
display: flex;
font-size: 55px;
top: 28%;
right: 9%;
}
.activate_section{
padding: 40px;
}
.activate_section .imagg {
top: 30%;
width: 110%;
height: 70vh;
right: 10%;
}
.bookN {
position: relative;
left: 60%;
top: -410%;
padding: 25px 30px;
display: flex;
width: 25%;
align-items: center;
font-size: 22px;
}
.activate_section h1 {
font-family: "Archivo Black", sans-serif;
font-size: 50px;
top: 120%;
left: -2%;
font-weight: 700;
}
.casual_text2 {
font-size: 34px;
top: 125%;
left: 4%;
}
.casual_text3 {
font-size: 34px;
top: 125%;
left: 25%;
}
.casual_text4 {
font-size: 34px;
top: 130%;
left: 4%;
}
.casual_text5 {
font-size: 28px;
top: 138%;
width: 38%;
left: 4%;
}
.casual_text6 {
font-size:28px;
top: 155%;
width: 40%;
left: 4%;
}
.casual_text7 {
font-size:28px;
top: 172%;
width: 40%;
left: 4%;
}
.activate_section div:nth-child(2) a {
width: 33%;
padding: 15px 5px 15px 30px;
font-size: 30px;
}
.VR_section {
padding: 20px;
}
.iGv {
top: 220%;
height: 78%;
}
.imagVr::after {
top: 220%;
width: 99%;
height: 78%;
}
.VR_section .vr_last {
font-size: 28px;
display: flex;
}
.vr_txt1 {
font-size: 36px;
top: 240%;
right: 14.2%;
}
.vr_txt2 {
font-size: 36px;
top: 245%;
right: 37%;
}
.vr_txt3 {
font-size: 36px;
top: 245%;
right: 4%;
}
.vr_txt4 {
font-size: 36px;
top: 250%;
right: 0%;
width: 50%;
}
.vr_txt5 {
font-size: 28px !important;
top: 255%;
right: 5%;
}
.vr_txt6 {
font-size: 28px !important;
top: 267%;
right: 5%;
}
.vr_txt7 {
font-size: 28px !important;
top: 280%;
right: 0%;
width: 50%;
}
.VR_section a {
top: 270%;
padding: 15px 10px 10px 40px;
width: 15%;
font-size: 28px;
}
} */
/* Arabic RTL */
:root {
--bck_color: #0d0d41;
--main-font: "Lalezar", sans-serif;
--title_font: "Archivo Black", "sans-serif";
--purple_col: #801880;
--background_buttons: linear-gradient(to right, var(--bck_color) 20%, #6a1a97, var(--purple_col));
--title_color: #be2fbe;
}
body {
margin: 0;
box-sizing: border-box;
width: 100%;
height: auto;
}
.ltr,
.rtl,
.activate_section2 {
box-sizing: border-box;
}
/* ====================================== */
/* ===============Hero================= */
.mainiMg1 {
width: 60%;
position: relative;
height: 90vh;
background: url('your-image.jpg') center/cover no-repeat;
/* clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 80% 0, 100% 100%, 0 100%); */
/* border-top-right-radius: 20% 0%;
border-bottom-right-radius: 10% 0%; */
border-top-left-radius: 100% 300%;
border-bottom-left-radius: 10% 0%;
overflow: hidden;
margin-left: 40px;
right: -35.5% !important;
object-position: 40% 70%;
}
.mainiMg1 img {
width: 100%;
height: 100%;
object-fit: cover;
}
.mainiMg1::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to right, rgba(128, 0, 128, 0.5), rgba(11, 11, 58, 0.9));
}
.hero_section2,
.activate_section2,
.VR_section2 {
display: grid;
align-items: start;
padding: 10px 50px 0 50px;
background-color: #0d0d41;
font-family: "Lalezar", sans-serif;
direction: rtl;
}
.ltr_size {
grid-template-columns: 48% 50%;
box-sizing: border-box;
column-gap: 10px;
padding: 80px 30px 40px;
justify-content: center;
align-items: center;
}
.ltr_size img {
width: 100%;
}
.ltr_size div:nth-child(1) {
margin-top: 100px;
}
.rtl_size {
grid-template-columns: 53% 45%;
box-sizing: border-box;
column-gap: 10px;
align-items: center;
padding: 80px 0px 0px;
}
#vr_btn {
padding: 10px 40px;
}
.hero_section2 {
color: white;
font-family: var(--noor_font);
text-transform: uppercase;
display: flex;
flex-direction: row-reverse;
}
.word21 {
display: flex;
position: absolute;
font-size: 50px;
width: 50%;
top: 14%;
left: 6%;
font-weight: 600;
/* margin-left: 30px; */
font-family: var(--noor_font);
}
.word21 .the {
color: #aa09b4;
margin-right: 15px;
font-family: var(--sora_extrabold);
}
.word22 {
display: flex;
position: absolute;
font-size: 45px;
width: 40%;
top: 26%;
left: 3.5%;
font-weight: 600;
margin-left: 40px;
font-family: var(--noor_font);
}
.hero-sec21 {
display: flex;
position: absolute;
left: 9.5%;
top: 38%;
font-size: 30px;
font-weight: 400;
width: 35% !important;
font-family: var(--font_noor_light);
}
.hero-sec22 {
display: flex;
position: absolute;
left: 8.5%;
top: 44%;
font-size: 30px;
font-weight: 400;
font-family: var(--font_noor_light);
width: 35% !important;
}
.hero-sec23 {
display: flex;
position: absolute;
left: 7.8%;
top: 49.5%;
font-size: 30px;
font-weight: 400;
width: 35% !important;
font-family: var(--font_noor_light);
}
.hero-sec24 {
display: flex;
position: absolute;
left: 6.5%;
top: 57%;
font-size: 30px;
font-weight: 400;
width: 35% !important;
font-family: var(--font_noor_light);
}
.hero-sec25 {
display: flex;
position: absolute;
left: 5.5%;
top: 62%;
font-size: 30px;
font-weight: 400;
width: 35% !important;
font-family: var(--font_noor_light);
}
.hero_section2 a {
position: absolute;
top: 480px;
left: 0px;
color: #ffffff;
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
border: none;
border-radius: 0 50px 50px 0;
background: linear-gradient(90deg, #2f0c5a, #690b84, #a709b2);
padding: 15px 20px;
display: flex;
width: 30%;
height: 8%;
cursor: pointer;
outline: none;
text-align: start;
box-sizing: border-box;
font-size: 15px;
font-family: var(--noor_font);
flex-direction: row-reverse;
direction: ltr;
}
.hero_desc_res_ar {
display: none;
}
.hero_desc_res_ar h3 {
font-size: 30px;
font-weight: 700;
font-family: var(--main-font);
width: 100%;
/* line-height: 32px; */
}
.hero_desc_res_ar p {
font-size: 25px;
font-weight: 700;
font-family: var(--main-font);
width: 100%;
line-height: 32px;
}
.hero_desc_res_ar h3 span {
color: #be2fbe;
}
/* zoom Out 60% */
@media(max-width:2150px) {
.word21 {
top: 28%;
left: -23%;
font-size: 79px;
width: 70%;
}
.word21 .the{
font-weight: bolder;
font-size: 79px;
}
.mainiMg1 {
height: 100%;
width: 58%;
right: -38% !important;
}
.word22 {
top: 40%;
left: -28%;
font-size: 65px;
width: 70%;
font-size: 79px;
}
.hero-sec21 {
left: 6%;
top: 48%;
font-size: 36px;
font-family: var(--font_noor_light);
}
.hero-sec22 {
left: -19%;
top: 54%;
font-size: 36px;
width: 60% !important;
font-family: var(--font_noor_light);
}
.hero-sec23 {
left: 5.5%;
top: 60%;
font-size: 36px;
font-family: var(--font_noor_light);
}
.hero-sec24 {
left:-20.5%;
top: 66%;
font-size: 36px;
width: 60% !important;
font-family: var(--font_noor_light);
}
.hero-sec25 {
font-size: 36px;
left: 3.5%;
top: 72%;
font-family: var(--font_noor_light);
}
.hero_section2 a {
font-size: 20px;
top: 800px;
height: 7%;
width: 28%;
font-family: var(--font_noor_light);
}
}
@media(max-width:2000px) {
.word21 {
top: 28%;
left: -23%;
font-size: 69px;
width: 70%;
}
.word21 .the{
font-weight: bolder;
font-size: 69px;
}
.mainiMg1 {
height: 100%;
width: 58%;
right: -38% !important;
}
.word22 {
top: 40%;
left: -28%;
font-size: 65px;
width: 70%;
font-size: 69px;
}
.hero-sec21 {
left: 6%;
top: 48%;
font-size: 33px;
font-family: var(--font_noor_light);
}
.hero-sec22 {
left: -19%;
top: 54%;
font-size: 33px;
width: 60% !important;
font-family: var(--font_noor_light);
}
.hero-sec23 {
left: 5.5%;
top: 60%;
font-size: 33px;
font-family: var(--font_noor_light);
}
.hero-sec24 {
left:-20.5%;
top: 66%;
font-size: 33px;
width: 60% !important;
font-family: var(--font_noor_light);
}
.hero-sec25 {
font-size: 33px;
left: 3.5%;
top: 72%;
font-family: var(--font_noor_light);
}
.hero_section2 a {
font-size: 20px;
top: 750px;
height: 7%;
width: 28%;
font-family: var(--font_noor_light);
}
}
/* Zoom Out 70% */
@media(max-width:1830px) {
.word21 {
/* color: red; */
top: 30%;
left: -22%;
font-size: 65px;
}
.word1 .the
{
font-size: 65px;
}
.mainiMg1 {
height: auto;
}
.word22 {
top: 41%;
left: -28%;
font-size: 65px;
}
.hero-sec21 {
top: 48%;
left: 6%;
/* font-size: 40px; */
}
.hero-sec22 {
top: 54%;
left: -19.5%;
}
.hero-sec23 {
top: 60%;
left: 5%;
}
.hero-sec24 {
top: 66%;
left: -20.5%;
/* color: gray; */
}
.hero-sec25 {
top: 72%;
left: 4%;
/* color: red; */
}
.hero_section2 a {
top: 750px;
width: 32%;
/* color: black; */
}
}
/* Zoom Out 80% */
@media(max-width:1800px) {
.word21 {
/* color: rebeccapurple; */
top: 31%;
left: -21%;
font-size: 58px;
/* color: red; */
}
.mainiMg1 {
height: 500px;
}
.word21 .the
{
font-size: 58px;
}
.word22 {
top: 41.5%;
left: -27.5%;
font-size: 52px;
}
.hero-sec21 {
top: 49%;
left: 7%;
font-size: 32px;
}
.hero-sec22 {
top: 55%;
left: -18.5%;
font-size: 32px;
}
.hero-sec23 {
top: 61%;
left: 6%;
font-size: 32px;
}
.hero-sec24 {
top: 67%;
left: -19.5%;
font-size: 32px;
/* color: red; */
}
.hero-sec25 {
top: 74%;
left: 05%;
font-size: 32px;
}
.hero_section2 a {
top: 660px;
width: 32%;
/* color: blue; */
}
}
@media(max-width:1440px) {
/* .hero_section2
{
background: red;
} */
.mainiMg1 {
height: auto;
}
.word21 {
top: 31%;
left: -21%;
/* color: beige; */
font-size: 50px;
}
.word21 .the
{
font-size: 50px;
}
.word22 {
top: 40%;
left: -27%;
font-size: 42px;
}
.hero-sec21 {
top: 48%;
left: 8%;
font-size: 28px;
}
.hero-sec22 {
top: 55%;
left: -17.5%;
width: 100%;
font-size: 28px;
}
.hero-sec23 {
top: 60%;
left: 7%;
width: 100%;
font-size: 28px;
}
.hero-sec24 {
top: 67%;
left: -19%;
font-size: 28px;
}
.hero-sec25 {
top: 73%;
font-size: 28px;
left: 5%;
}
.hero_section2 a {
top: 600px;
width: 32%;
font-size: 28px;
display: flex;
align-items: center;
}
}
@media(max-width:1430px) {
/* .hero_section2
{
background: red;
}
*/
.mainiMg1 {
height: auto;
}
.word21 {
top: 39%;
left: -22%;
font-size: 50px;
}
.word21 .the
{
font-size: 50px;
}
.word22 {
top: 49%;
left: -29%;
font-size: 42px;
}
.hero-sec21 {
top: 56%;
left: 8%;
font-size: 28px;
}
.hero-sec22 {
top: 62%;
left: -17.5%;
width: 100%;
font-size: 28px;
}
.hero-sec23 {
top: 68%;
left: 7%;
width: 100%;
font-size: 28px;
}
.hero-sec24 {
top: 74%;
left: -19%;
font-size: 28px;
}
.hero-sec25 {
top: 81%;
font-size: 28px;
left: 5%;
}
.hero_section2 a {
top: 620px;
width: 32%;
font-size: 28px;
display: flex;
align-items: center;
}
}
/* Normal 100% */
@media(max-width:1300px) {
.word21 {
top: 40%;
left: -21%;
font-size: 42px;
}
.word21 .the
{
font-size: 42px;
}
.word22 {
top: 50%;
left: -28%;
font-size: 38px;
}
.hero-sec21 {
top: 57%;
font-size: 26px;
}
.hero-sec22 {
top: 63%;
font-size: 26px;
}
.hero-sec23 {
top: 69%;
font-size: 26px;
}
.hero-sec24 {
top: 75%;
font-size: 26px;
}
.hero-sec25 {
font-size: 26px;
top: 81%;
}
.hero_section2 a {
top: 550px;
font-size: 24px;
}
}
@media(max-width:1030px) {
.mainiMg1 {
height: 450px;
}
.word21 {
top: 38%;
left: 0%;
width: 50%;
font-size: 30px;
}
.word21 .the
{
font-size: 30px;
}
.word22 {
top: 46%;
left: -27%;
font-size: 25px;
}
.hero-sec21 {
top: 52%;
width: 40% !important;
left: 4%;
font-size: 21px;
}
.hero-sec22 {
top: 58%;
left: -16%;
font-size: 21px;
}
.hero-sec23 {
top: 64%;
font-size: 21px;
left: 8%;
}
.hero-sec24 {
top: 70%;
width: 40% !important;
left: 2%;
font-size: 21px;
}
.hero-sec25 {
top: 76%;
left: 5%;
font-size: 21px;
}
.hero_section2 a {
top: 547px;
width: 38%;
}
}
@media(max-width:800px) {
.mainiMg1 img {
height: 300px;
}
.hero_section2 a {
top: unset;
width: 100%;
position: relative;
font-size: 20px;
}
.hero_desc_ar {
display: none;
}
.hero_desc_res_ar {
display: block;
}
.mainiMg1 {
right: unset !important;
margin: 0;
width: 100%;
height: 300px;
}
.hero_section2 {
display: grid;
grid-template-columns: 80%;
justify-content: center;
}
}
@media(max-width:500px) {
.hero_section2 {
grid-template-columns: 100%;
padding: 50px 5% 0;
}
.hero_desc_res_ar h3 {
font-size: 25px;
/* line-height: 32px; */
}
.hero_section2 a {
padding: 10px;
}
.hero_desc_res_ar p {
font-size: 18px;
font-weight: normal;
}
.mainiMg1 {
clip-path: unset;
border-top-left-radius: 0% 0%;
/* border-top-left-radius: 100% 300%; */
border-bottom-left-radius: 10% 0%;
}
}
@media(max-width:400px) {
.hero_desc_res_ar h3 {
font-size: 20px;
line-height: 32px;
/* line-height: 32px; */
}
.hero_desc_res_ar p {
font-size: 16px;
}
.hero_section2 {
grid-template-columns: 100%;
padding: 50px 3% 0;
}
}
/* ====================================== */
/* ===============Activate================= */
.bookN2 {
background: linear-gradient(to right, var(--purple_col) 20%, #6e2698, var(--bck_color)) !important;
color: white;
font-family: var(--title_font) !important;
padding: 8px 5px 8px 60px !important;
border-radius: 25px !important;
outline: none !important;
border: none !important;
cursor: pointer !important;
font-weight: 700 !important;
font-size: 18px !important;
margin-top: 100px !important;
margin-left: 10% !important;
display: inline-block !important;
position: absolute !important;
width: 10% !important;
height: 4% !important;
left: 35% !important;
top: 100% !important;
direction: ltr !important;
}
.imagg1 {
width: 100%;
position: relative;
height: 75vh;
overflow: hidden;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
border-top-right-radius: 0 100%;
border-bottom-right-radius: 100% 200%;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
transform: translate(-600px, -550px) !important;
}
.imagg1 img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 70% 70%;
}
.imagg1::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to right, rgba(11, 11, 58, 0.6), rgba(129, 33, 132, 0.5));
}
.casualt22 {
display: flex;
font-family: "Lalezar", sans-serif;
}
.casual_text22 {
position: absolute;
top: 143%;
left: 73%;
font-weight: 400;
font-size: 45px;
color: white;
}
.casual_text23 {
position: absolute;
top: 143%;
left: 54%;
color: #00ff00;
font-weight: 400;
font-size: 45px;
}
.casual_text24 {
font-family: var(--main-font);
position: absolute;
font-weight: 400;
font-size: 30px;
color: white;
top: 160% !important;
left: 45%;
width: 37%;
}
.casual_text25 {
font-family: var(--main-font);
position: absolute;
font-weight: 400;
font-size: 30px;
color: white;
top: 166% !important;
left: 41%;
width: 40%;
}
.casual_text26 {
font-family: var(--main-font);
position: absolute;
font-weight: 400;
font-size: 30px;
color: white;
top: 172%;
left: 38%;
width: 37%;
}
.casual_text27 {
font-family: var(--main-font);
position: absolute;
font-weight: 400;
font-size: 30px;
color: white;
top: 177.5%;
left: 41%;
width: 40%;
}
.casual_text28 {
font-family: var(--main-font);
position: absolute;
font-weight: 400;
font-size: 30px;
color: white;
top: 183%;
left: 42.5%;
width: 37%;
}
.casual_text29 {
font-family: var(--main-font);
position: absolute;
font-weight: 400;
font-size: 30px;
color: white;
top: 189%;
left: 40%;
width: 40%;
}
.casual_text31 {
font-family: var(--main-font);
position: absolute;
font-weight: 400;
font-size: 30px;
color: white;
top: 194%;
left: 15%;
width: 40%;
}
.activate_section2 {
padding: 200px 0px 30px 0;
}
.activate_section2 div:nth-child(1) a {
position: absolute;
bottom: 30px;
z-index: 1;
left: 10%;
background: var(--background_buttons);
color: white;
font-family: var(--main-font);
padding: 10px 35px;
border-radius: 25px;
outline: none;
border: none;
cursor: pointer;
font-weight: 700;
font-size: 21px;
}
.activate_section2 h1 {
color: var(--title_color);
width: 80%;
margin-left: 4%;
font-weight: 800;
font-family: var(--title_font);
font-size: 45px;
margin-top: 0px !important;
position: absolute;
top: 135%;
right: 6%;
}
/* =================================*/
/* =============VR==================*/
.VR_section2 {
padding: 400px;
direction: rtl;
}
.iGv2 {
width: 70% !important;
height: 90%;
position: absolute;
top: 220%;
left: 28%;
background-color: none;
border: 20px bold black;
border-right: 20px;
}
.imagVr2 {
width: 100%;
height: 80vh;
overflow: hidden;
}
.imagVr2::after {
content: "";
position: absolute;
top: 220%;
left: 0;
width: 98%;
height: 90%;
background: linear-gradient(to right, var(--bck_color) 20%, #6a1a97);
z-index: 1;
opacity: 0.7;
}
.vr_txt12 {
position: absolute;
font-size: 42px;
font-weight: 600;
color: white;
top: 237%;
left: 35%;
z-index: 1;
}
.vr_last2 {
display: flex;
}
.vr_txt23 {
position: absolute;
font-size: 42px;
font-weight: 600;
color: #00ff00;
top: 237%;
left: 2%;
width: 32%;
z-index: 1;
}
.vr_txt24 {
position: absolute;
font-size: 42px;
font-weight: 600;
color: #00ff00;
top: 245%;
left: 0%;
width: 45%;
z-index: 1;
}
.vr_txt25 {
position: absolute;
top: 260%;
left: 7%;
width: 38%;
color: white;
font-size: 30px;
font-weight: 500;
line-height: 30px;
text-transform: uppercase;
font-family: var(--main-font);
z-index: 1;
}
.vr_txt26 {
position: absolute;
top: 275%;
left: 7%;
width: 38%;
color: white;
font-size: 30px;
font-weight: 500;
line-height: 30px;
text-transform: uppercase;
font-family: var(--main-font);
z-index: 1;
}
.VR_section2 a {
background: var(--background_buttons);
color: white;
font-family: var(--title_font);
padding: 8px 70px;
border-radius: 25px;
outline: none;
border: none;
cursor: pointer;
font-weight: 700;
font-size: 20px;
margin-top: 100px;
margin-left: 10%;
display: inline-block;
position: absolute;
/* width: 8%; */
height: 5%;
left: 70% !important;
top: 277%;
z-index: 1;
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment