Skip to content

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

Delete style2.css

parent acff55ed
Show whitespace changes
Inline Side-by-side
Showing with 0 additions and 4375 deletions
style2.css deleted 100644 → 0
View file @ acff55ed
/* ====================================== */
/* ===============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(--main-font);
}
.ticketing_section .ticket_type
{
display: flex;
align-items: center;
justify-content: space-between;
width: 90%;
margin: 0 5%;
font-family: var(--sora_font);
}
.ticketing_section .ticket_type span
{
font-size: 40px;
font-weight: bold;
}
.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(--noor_font);
}
.ticketing_section .days .text p
{
font-weight: 400;
font-family: var(--sora_font);
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(--noor_font);
}
.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:1880px)
{
/* .days_grid .days:nth-child(2) a
{
margin-top: 110px;
}
.ticketing_sec_ar .days_grid .days:nth-child(2) a
{
margin-top: 100px !important;
}
*/
.ticketing_section a
{
margin: 0px 0 0 44%;
margin-left: 44%;
}
/* .ticketing_section .days_grid .days:nth-child(1) a
{
margin-top: 80px;
} */
.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:1500px)
{
/* .ticketing_sec_ar .days_grid .days:nth-child(2) a
{
margin-top: 60px !important;
}
.ticketing_section .days_grid .days:nth-child(1) a
{
margin-top: 80px ;
} */
.ticketing_sec_ar a
{
margin: 60px 46.5% 0 0;
background: linear-gradient(90deg, var(--bck_color), #6a1a97, var(--purple_col));
border-radius: 8px;
}
/*
.days_grid .days:nth-child(2) a
{
margin-top: 80px;
} */
.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 .days_grid .days:nth-child(1) a
{
margin-top: 80px;
} */
.ticketing_section_ar a
{
margin: 30px 0 0 60%;
}
}
/* @media(max-width:1300px)
{
.days_grid .days:nth-child(2) a
{
margin-top: 70px;
}
.ticketing_section_ar .days_grid .days:nth-child(1) a
{
margin-top: 100px;
}
} */
@media(max-width:1200px)
{
/* .ticketing_section .days_grid .days:nth-child(1) a
{
margin-top: 0px;
}
.ticketing_section_ar .days_grid .days:nth-child(1) a
{
margin-top: 10px;
} */
.ticketing_section a
{
margin: 40px 0 0 38%;
}
/* .ticketing_section .last a
{
margin-top: 20px;
margin-left: 57%;
} */
.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 .days .text p
{
line-height: 32px;
}
.ticketing_section .days_t .text p
{
font-size: 18px;
}
.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;
}
}
@media(max-width:950px)
{
.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 .ticket_type span
{
font-size: 30px;
}
.ticketing_section .ticket_types .days_t
{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
}
@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: 500px;
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(--noor_font);
}
.arbt {
margin-left: 20%;
width: 100%;
font-family: var(--noor_font);
}
/* الزر */
.vr-btn1 {
background: var(--background_buttons) ;
outline: none;
border: none;
border-radius: 30px;
text-align: center;
font-size: 20px;
font-family: var(--sora_font);
font-weight: bold;
padding: 10px 30px;
margin-top: 50px;
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:1800px)
{
.arbt
{
margin-left: 0;
text-align: end;
}
}
/* ===== التابلت (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: 18px;
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: 16px;
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;
}
.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: 25px;
}
.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%;
}
.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%;
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_font);
}
.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(--noor_font);
}
.hero-sec22 {
display: flex;
position: absolute;
left: 8.5%;
top: 44%;
font-size: 30px;
font-weight: 400;
font-family: var(--noor_font);
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(--noor_font);
}
.hero-sec24 {
display: flex;
position: absolute;
left: 6.5%;
top: 57%;
font-size: 30px;
font-weight: 400;
width: 35% !important;
font-family: var(--noor_font);
}
.hero-sec25 {
display: flex;
position: absolute;
left: 5.5%;
top: 62%;
font-size: 30px;
font-weight: 400;
width: 35% !important;
font-family: var(--noor_font);
}
.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;
}
@media(max-width:1800px)
{
.word21 {
top: 30%;
left: -2%;
}
.mainiMg1 {
height: 500px;
}
.word22 {
top: 40%;
left: 4%;
}
.hero-sec21 {
top: 47%;
left: 9%;
}
.hero-sec22 {
top: 52%;
left: 9%;
}
.hero-sec23 {
top: 57%;
left: 8.5%;
}
.hero-sec24 {
top: 62%;
left: 7.5%;
}
.hero-sec25 {
top: 67%;
left: 6.5%;
}
.hero_section2 a {
top: 580px;
width: 32%;
}
}
@media(max-width:1500px)
{
.word21 {
top: 38%;
left: 5%;
}
.word22 {
top: 50%;
left: 3%;
}
.hero-sec21 {
top: 58%;
left: 8%;
}
.hero-sec22 {
top: 63%;
left: 8%;
}
.hero-sec23 {
top: 68%;
left: 7.5%;
}
.hero-sec24 {
top: 73%;
left: 7%;
}
.hero-sec25 {
top: 78%;
left: 6%;
}
.hero_section2 a {
top: 500px;
}
}
@media(max-width:1450px)
{
.hero_section2 a
{
top: 580px;
}
.mainiMg1
{
height: auto;
}
.word21 {
top: 30%;
left: -2%;
}
.word22 {
top: 39%;
left: 3%;
}
.hero-sec21 {
top: 47%;
left: 8%;
}
.hero-sec22 {
top: 52%;
left: 8%;
}
.hero-sec23 {
top: 57%;
left: 7%;
}
.hero-sec24 {
top: 62%;
left: 6%;
}
.hero-sec25 {
top: 72%;
left: 5%;
}
.hero_section2 a {
top: 590px;
width: 32%;
}
}
@media(max-width:1430px)
{
/* .hero_section2
{
background: red;
} */
.hero_section2 a
{
top: 580px;
}
.mainiMg1
{
height: auto;
}
.word21 {
top: 35%;
left: -2%;
}
.word22 {
top: 45%;
left: 3%;
}
.hero-sec21 {
top: 53%;
left: 8%;
font-size: 28px;
}
.hero-sec22 {
top: 60%;
left: 8%;
width: 100%;
font-size: 28px;
}
.hero-sec23 {
top: 66%;
left: 7%;
width: 100%;
font-size: 28px;
}
.hero-sec24 {
top: 72%;
left: 6%;
font-size: 28px;
}
.hero-sec25 {
top: 79%;
font-size: 28px;
left: 5%;
}
.hero_section2 a {
top: 590px;
width: 32%;
/* font-size: 28px; */
}
}
@media(max-width:1300px)
{
.word21 {
top: 35%;
left: -2%;
font-size: 45px;
}
.word22 {
top: 45%;
left: 3%;
font-size: 40px;
}
.hero-sec21 {
top: 54%;
font-size: 26px;
}
.hero-sec22 {
top: 60%;
font-size: 26px;
}
.hero-sec23 {
top: 66%;
font-size: 26px;
}
.hero-sec24 {
top: 72%;
font-size: 25px;
}
.hero-sec25 {
font-size: 25px;
top: 78%;
}
.hero_section2 a {
top: 550px;
}
}
@media(max-width:1030px)
{
.mainiMg1
{
height: 450px;
}
.word21 {
top: 34%;
left: -2%;
width: 50%;
font-size: 35px;
}
.word22 {
top: 43%;
left: 2%;
font-size: 30px;
}
.hero-sec21 {
top: 51%;
width: 40% !important;
left: 5%;
font-size: 21px;
}
.hero-sec22 {
top: 58%;
left: 9%;
font-size: 21px;
}
.hero-sec23 {
top: 65%;
font-size: 21px;
left: 8%;
}
.hero-sec24 {
top: 72%;
width: 40% !important;
left: 2%;
font-size: 21px;
}
.hero-sec25 {
top: 77%;
left: 5%;
font-size: 21px;
}
.hero_section2 a {
top: 587px;
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: polygon(0% 0, 100% 0, 100% 100%, 0 100%);
border-top-right-radius: 0% 0%;
border-bottom-right-radius: 0% 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;
}
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