:root{
--yellow: #f2ca25;
}
html,body{
padding: 0px;
margin: 0px;
}
body{
width: 100%;
height: 100%;
min-width: 1260px;
}
html[lang="En"] body{
font-family: 'Montserrat', sans-serif;
}
#toTop{
position: fixed;
z-index: 99;
right: 20px;
width: 60px;
cursor: pointer;
bottom: -80px;
opacity: 0;
transition: all 1000ms;
transition-timing-function: ease-in-out;
}
#toTop.show{
bottom: 20px;
opacity: 1;
}
#toTop.hide{
}
*{
box-sizing: border-box;
}
div.h30{
height: 30px;
}
div.h60{
height: 60px;
}
div.h100{
height: 100px;
}
h1{
text-transform: uppercase;
font-size: 100px;
}
h2{
text-transform: uppercase;
font-size: 40px;
}
input, textarea, select{
color-scheme: dark;
width: 100%;
padding: 20px;
background-color: rgba(0,0,0,0.9);
border: none;
font-size: 16px;
color: white;
}
input[type="submit"],input[type="button"]{
color-scheme: dark;
width: 100% !important;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 5px;
}
form.validate input:invalid,
form.validate select:invalid,
form.validate textarea:invalid{
outline: 2px solid red;
}
#modal{
display: none;
width: 100%;
height: 100%;
position: fixed;
background-color: rgb(0 0 0 / 80%);
z-index: 999;
align-content: center;
align-items: center;
justify-content: center;
color: black;
}
#modal .wrapper{
position: relative;
max-width: 550px;
width: 100%;
padding: 30px;
/* border-radius: 5px; */
background-color: var(--yellow);
}
#modal .wrapper .close{
font-family: 'Arial', sans-serif;
font-weight: bolder;
font-size: 30px;
position: absolute;
top: 30px;
right: 30px;
}
#modal .wrapper h2{
margin: 0px;
font-size: 32px;
}
#modal .wrapper button{
display: block;
margin: 0px auto;
padding: 10px;
width: 150px;
background-color: black;
color: var(--yellow);
text-transform: uppercase;
margin-top: 30px;
border: none;
}
#modal .wrapper p{
}
.loading{
display: flex;
background-color: #000;
width: 100%;
height: 100%;
position: fixed;
z-index: 999;
align-content: center;
justify-content: center;
align-items: center;
}
/* .nav::before {
content: '';
display: block;
position: absolute;
background-color: black;
height: 50px;
width: 100%;
top: 0px;
left: 0px;
z-index: 1;
} */
.nav{
display: flex;
position: relative;
justify-content: space-between;
height: 80px;
background-color: black;
align-items: center;
}
.nav > .left{
position: relative;
z-index: 2;
margin-left: 60px;
}
.nav > .left a.logo{
display: block;
/* margin-top: 80px; */
transition: all 300ms;
/* padding: 10px 20px; */
}
.nav > .left a.logo:hover{
/* background-color: rgba(255,255,255,0.05); */
}
.nav > .left a.logo > img{
width: 350px;
}
.nav > .right .desktop{
display: flex;
position: relative;
z-index: 2;
height: 50px;
align-content: center;
align-items: center;
margin-right: 60px;
}
.nav > .right .desktop a{
display: inline-block;
text-decoration: none;
color: white;
padding: 5px 10px;
background-color: black;
text-transform: uppercase;
font-weight: bold;
font-size: 12px;
transition: all 300ms;
margin-left: 5px;
}
.nav > .right .desktop a:hover, .nav > .right .desktop a.active{
background-color: var(--yellow);
color: black;
}
footer{
display: flex;
height: 60px;
background-color: black;
text-align: center;
color: white;
align-content: center;
justify-content: center;
align-items: center;
}
body.about > .hero_banner{
display: flex;
position: relative;
min-height: 800px;
background-image: url('../images/home_hero_banner.jpg');
background-color: black;
background-size: cover;
justify-content: space-between;
align-items: center;
overflow: hidden;
flex-wrap: wrap;
}
body.about > .hero_banner > .left{
position: relative;
width: 40%;
height: 100%;
}
body.about > .hero_banner > .left > .yellow_v_single_bar{
position: absolute;
width: 33px;
left: 0px;
/* bottom: 264px; */
}
body.about > .hero_banner > .right{
color: white;
position: relative;
width: 60%;
overflow: hidden;
}
body.about > .hero_banner > .right > .yellow_v_3bars{
position: absolute;
width: 20px;
right: 0px;
top: 0px;
}
body.about > .hero_banner > .right > h1{
margin: 0px;
margin-top: 60px;
}
body.about > .hero_banner > .right > h2{
color: var(--yellow);
text-transform: uppercase;
font-size: 60px;
margin: 0px;
}
body.about > .hero_banner > .right > .gray_h_13bars{
height: 12px;
float: right;
margin-top: 30px;
margin-bottom: 30px;
}
body.about > .hero_banner > .right > p{
clear: both;
margin-right: 60px;
font-size: 24px;
}
body.about > .hero_banner > .right .location_bullets{
display: inline-flex;
align-items: center;
margin-right: 20px;
font-size: 24px;
}
body.about > .hero_banner > .right .bullet_camel{
height: 25px;
margin-right: 10px;
}
body.about > .hero_banner .full_width{
color: white;
font-style: italic;
width: 100%;
text-align: center;
}
body.about > .about{
display: block;
position: relative;
width: 100%;
background-color: black;
color: white;
padding-left: 200px;
/* overflow: hidden; */
}
body.about > .about > ul{
position: relative;
width: 800px;
list-style: none;
margin: 0px;
padding: 0px;
}
body.about .hero_banner .v_about_yellow_camel{
width: 10px;
position: absolute;
bottom: 30px;
right: 0px;
}
body.about > .about > ul > li::before{
content: '';
display: inline-block;
position: absolute;
left: 0px;
background-image: url('../images/camel_icon.svg');
background-position: center center;
background-repeat: no-repeat;
width: 20px;
height: 20px;
vertical-align: middle;
}
body.about > .about > ul > li{
margin-bottom: 20px;
padding-left: 40px;
}
body.about > .about > .yellow_v_single_bar{
width: 33px;
position: absolute;
bottom: 40px;
left: 0px;
}
body.about > .about > .yellow_v_single_bar.second{
bottom: 120px;
}
body.about > .about > .gray_h_5bars{
height: 12px;
position: absolute;
right: 60px;
}
body.about > .mission{
display: flex;
position: relative;
/* height: 600px; */
background-color: #fcd323;
align-items: center;
justify-content: flex-start;
overflow: hidden;
}
body.about > .mission > .left{
display: flex;
width: 30%;
align-items: flex-end;
flex-shrink: 0;
overflow: hidden;
}
body.about > .mission > .left > img{
width: 100%;
}
body.about > .mission > .right{
}
body.about > .mission > .right > h2{
font-size: 60px;
}
body.about > .mission > .right > p{
width: 80%;
}
body.about > .mission > .right > .black_h_4bars{
position: absolute;
height: 20px;
bottom: 0px;
right: 20%;
}
body.about > .objectives{
display: flex;
position: relative;
text-align: center;
overflow: hidden;
background-image: url('../images/home_objectives.jpg');
background-size: cover;
background-position: center left;
height: 600px;
justify-content: center;
align-content: center;
align-items: stretch;
}
body.about > .objectives > h2{
position: absolute;
font-size: 60px;
text-transform: uppercase;
text-align: left;
top: 20px;
left: 60px;
}
body.about > .objectives > .black_h_11bars{
display: none;
height: 12px;
}
body.about > .objectives > .left{
flex-shrink: 0;
width: 50%;
}
body.about > .objectives > .right{
flex-shrink: 0;
width: 50%;
display: flex;
justify-content: center;
align-items: center;
}
body.about > .objectives > .right > .points_container{
display: flex;
position: relative;
width: 600px;
height: 380px;
/* right: 60px; */
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
align-content: space-around;
/* background-color: red; */
}
body.about > .objectives > .right > .points_container > .points{
/* width: 270px; */
flex-shrink: 0;
/* margin-top: 30px; */
}
body.about > .objectives > .right > .points_container > .points > img{
width: 190px;
}
body.about > .services{
position: relative;
background-color: black;
background-image: url(../images/services_home.jpg);
background-size: cover;
text-align: center;
overflow: hidden;
}
body.about > .services > .white_h_5bars{
position: absolute;
height: 25px;
left: 10%;
top: 0px;
}
body.about > .services > h2{
color: white;
font-size: 60px;
}
body.about > .services > h2 .yellow{
color: var(--yellow);
}
body.about > .services > .white_h_7bars{
height: 15px;
}
body.about > .services > .services_container{
display: flex;
position: relative;
justify-content: center;
align-items: flex-start;
}
body.about > .services > .services_container > .box{
width: 200px;
}
body.about > .services > .services_container > .box > img{
width: 80px;
}
body.about > .services > .services_container > .box > h3{
color: white;
}
body.about > .services > .services_container > .line{
position: relative;
width: 50px;
height: 3px;
background-color: white;
border-radius: 3px;
top: 40px;
}
.contact_form{
position: relative;
background-color: black;
background-image: url('../images/contact_hero_banner.jpg');
background-size: cover;
text-align: center;
overflow: hidden;
}
.contact_form > .white_h_5bars{
position: absolute;
height: 25px;
left: 10%;
top: 0px;
}
.contact_form > h2{
color: white;
font-size: 60px;
}
.contact_form > h2 .yellow{
color: var(--yellow);
}
.contact_form > .white_h_7bars{
height: 15px;
}
.contact_form > .form{
display: flex;
position: relative;
justify-content: space-between;
width: 800px;
flex-wrap: wrap;
margin: 0px auto;
}
.contact_form > .form.sending::before {
content: 'Sending...';
display: flex;
width: 100%;
height: 100%;
background-color: black;
position: absolute;
align-items: center;
align-content: center;
justify-content: center;
color: var(--yellow);
font-size: 32px;
opacity: 0.8;
}
.contact_form > .form input{
width: calc(50% - 5px);
margin-bottom: 10px;
flex-shrink: 0;
}
.contact_form > .form textarea{
margin-bottom: 10px;
}
/* Our Work */
body.our_work{
background-color: black;
}
body.our_work > .hero_banner{
display: flex;
position: relative;
height: 800px;
background-image: url('../images/services_hero_banner.jpg');
background-size: cover;
justify-content: flex-end;
align-items: flex-end;
align-content: flex-end;
overflow: hidden;
flex-direction: column;
padding-right: 80px;
}
body.our_work > .hero_banner > h1{
position: relative;
color: white;
text-align: right;
/* right: 60px; */
/* bottom: 70px; */
}
body.our_work > .hero_banner > h1 .yellow{
color: var(--yellow);
}
body.our_work > .hero_banner > .white_v_3bars{
position: absolute;
width: 30px;
bottom: 0px;
right: 0px;
}
body.our_work > .hero_banner > .yellow_h_13bars{
position: relative;
height: 10px;
bottom: 50px;
right: 330px;
}
body.our_work .swiper{
width: 100%;
}
body.our_work .swiper .swiper-button-next,
body.our_work .swiper .swiper-button-prev{
color: white;
padding: 50px;
}
body.our_work .swiper .swiper-pagination-bullet{
opacity: 0.5;
}
body.our_work .swiper .swiper-pagination-bullet-active{
background-color: var(--yellow);
opacity: 1;
}
body.our_work .swiper .ratio-box{
position: relative;
width: 100%;
padding-top: 40%; /* 16:9 Aspect Ratio */
background-color: #eee; /* Placeholder Background */
background-size: cover;
}
body.our_work .swiper .ratio-box::before{
content: '';
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
}
body.our_work .swiper .ratio-box.featured_1{
background-image: url('../images/our_work/featured_hajjan.jpg');
}
body.our_work .swiper .ratio-box.featured_2{
background-image: url('../images/our_work/featured_dunki.jpg');
}
body.our_work .swiper .ratio-box .featured_container{
display: flex;
gap: 30px;
position: absolute;
top: 50%;
left: 120px;
transform: translate(0px, -50%);
/* height: 100%; */
flex-wrap: nowrap;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
}
body.our_work .swiper .ratio-box .featured_container .logo{
}
body.our_work .swiper .ratio-box .featured_container .logo img{
width: 350px;
}
body.our_work .swiper .ratio-box .featured_container .details{
color: white;
font-weight: bold;
}
body.our_work .swiper .ratio-box .featured_container .details img{
height: 15px;
}
body.our_work .swiper .ratio-box .featured_container .watch_trailer{
background-color: rgba(0,0,0,0.5);
color: var(--yellow);
padding: 16px;
border: 2px solid var(--yellow);
font-weight: bold;
text-transform: uppercase;
font-family: 'Montserrat';
letter-spacing: 2px;
cursor: pointer;
}
body.our_work .modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.9);
align-items: center;
justify-content: center;
}
body.our_work .modal-content {
position: relative;
margin: 0px auto;
padding: 0px;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
background-color: #000;
}
body.our_work .close {
color: var(--yellow);
position: absolute;
top: 20px;
right: 50px;
font-size: 80px;
}
body.our_work .close:hover,
body.our_work .close:focus {
color: #FFF;
text-decoration: none;
cursor: pointer;
}
body.our_work #videoIframe {
width: 100%;
height: 600px;
}
body.our_work .our_work{
background-color: black;
padding: 30px 50px;
margin: 0px auto;
max-width: 1220px;
}
body.our_work .our_work .filters{
margin-bottom: 30px;
}
body.our_work .our_work .filters .filter{
display: inline-block;
border: 2px solid var(--yellow);
color: var(--yellow);
padding: 6px 10px;
border-radius: 100px;
font-size: 12px;
font-weight: bold;
cursor: pointer;
}
body.our_work .our_work .filters .filter:hover{
background-color: rgba(255,255,255,0.15);
}
body.our_work .our_work .filters .filter.active{
background-color: var(--yellow);
color: black;
}
body.our_work .our_work .thumbnails{
display: flex;
gap: 30px;
flex-wrap: wrap;
}
body.our_work .our_work .thumbnails .thumb{
display: flex;
flex-wrap: wrap;
width: 200px;
color: white;
transition: all 300ms;
font-size: 1em;
}
body.our_work .our_work .thumbnails .thumb .title{
margin-top: 10px;
font-size: 0.8em;
}
body.our_work .our_work .thumbnails .thumb img.thumbnail{
width: 100%;
}
body.our_work .our_work .thumbnails .thumb .details{
display: flex;
width: 100%;
flex-wrap: nowrap;
color: white;
justify-content: space-between;
margin-top: 10px;
}
body.our_work .our_work .thumbnails .thumb .details .left{
display: flex;
font-size: 0.6em;
border: 1px solid #333;
color: #999;
padding: 2px 6px;
border-radius: 10px;
align-items: center;
}
body.our_work .our_work .thumbnails .thumb .details .right{
text-align: right;
width: 50%;
color: var(--yellow);
font-weight: bold;
font-size: 0.8em;
}
body.our_work .our_work .thumbnails .thumb .additional_details{
display: flex;
width: 100%;
flex-wrap: nowrap;
color: white;
justify-content: space-between;
margin-top: 4px;
align-items: center;
min-height: 45px;
}
body.our_work .our_work .thumbnails .thumb .additional_details .left{
}
body.our_work .our_work .thumbnails .thumb .additional_details .left img{
height: 40px;
}
body.our_work .our_work .thumbnails .thumb .additional_details .right{
font-size: 0.8em;
}
body.our_work .our_work .thumbnails .thumb .additional_details .right img{
height: 9px;
}
/* Services */
body.services > .hero_banner{
display: flex;
position: relative;
height: 800px;
background-image: url('../images/services_hero_banner.jpg');
background-size: cover;
justify-content: flex-end;
align-items: flex-end;
align-content: flex-end;
overflow: hidden;
flex-direction: column;
padding-right: 80px;
}
body.services > .hero_banner > h1{
position: relative;
color: white;
text-align: right;
/* right: 60px; */
/* bottom: 70px; */
}
body.services > .hero_banner > h1 .yellow{
color: var(--yellow);
}
body.services > .hero_banner > .white_v_3bars{
position: absolute;
width: 30px;
bottom: 0px;
right: 0px;
}
body.services > .hero_banner > .yellow_h_13bars{
position: relative;
height: 10px;
bottom: 50px;
right: 330px;
}
body.services > .services{
position: relative;
width: 100%;
background-color: white;
color: black;
}
body.services > .services > .our_services{
width: 15px;
position: absolute;
top: -50%;
left: 100px;
}
body.services > .services > .services_container{
display: flex;
position: relative;
justify-content: center;
align-items: flex-start;
text-align: center;
}
body.services > .services > .services_container > .box{
width: 200px;
}
body.services > .services > .services_container > .box > img{
width: 80px;
}
body.services > .services > .services_container > .box > h3{
color: black;
}
body.services > .services > .services_container > .line{
position: relative;
width: 50px;
height: 3px;
background-color: #6d6e71;
border-radius: 3px;
top: 40px;
}
/* Services - Content Development */
body.services > .content_development{
background-image: url('../images/services_content_development_banner.jpg');
background-size: cover;
background-position: right center;
position: relative;
padding-left: 100px;
color: black;
overflow: hidden;
}
body.services > .content_development > .title{
display: flex;
align-content: center;
justify-content: flex-start;
align-items: center;
}
body.services > .content_development > .title > img{
height: 130px;
margin-right: 30px;
filter: sepia(100%) saturate(300%) brightness(0%) hue-rotate(180deg);
}
body.services > .content_development > .title > h2{
color: black;
}
body.services > .content_development > p{
/* color: white; */
width: 800px;
}
body.services > .content_development > .white_h_3bars {
position: absolute;
top: 0px;
right: 100px;
height: 30px;
}
/* In-house Production */
body.services > .production{
background-image: url('../images/services_production_banner.jpg');
background-size: cover;
background-position: right center;
position: relative;
padding-right: 100px;
color: black;
overflow: hidden;
}
body.services > .production > .title{
display: flex;
align-content: center;
justify-content: flex-start;
align-items: center;
width: 800px;
margin-left: auto;
}
body.services > .production > .title > img{
height: 130px;
margin-right: 30px;
/* filter: sepia(100%) saturate(300%) brightness(0%) hue-rotate(180deg); */
}
body.services > .production > .title > h2{
color: white;
}
body.services > .production > p{
color: white;
width: 800px;
margin-left: auto;
}
body.services > .production > .black_h_4bars{
position: absolute;
top: 0px;
right: 100px;
height: 30px;
}
/* Services - Lending */
body.services > .lending{
background-image: url('../images/services_lending_banner.jpg');
background-size: cover;
background-position: right center;
position: relative;
padding-left: 100px;
color: white;
overflow: hidden;
}
body.services > .lending > .title{
display: flex;
align-content: center;
justify-content: flex-start;
align-items: center;
}
body.services > .lending > .title > img{
height: 130px;
margin-right: 30px;
}
body.services > .lending > .title > h2{
color: white;
}
body.services > .lending > p{
/* color: white; */
width: 800px;
}
body.services > .lending > p > h3{
}
body.services > .lending > .yellow_h_3bars{
position: absolute;
bottom: 0px;
right: 100px;
height: 30px;
}
/* Services - Logistics */
body.services > .logistics{
/* background-image: url('../images/services_production_services.jpg'); */
/* background-position: top left; */
/* background-size: cover; */
/* height: 730px; */
display: flex;
align-items: flex-end;
position: relative;
overflow: hidden;
background-color: var(--yellow);
}
body.services > .logistics > .white_h_3bars{
position: absolute;
height: 30px;
top: 0px;
right: 30%;
}
body.services > .logistics > .left{
width: 40%;
height: 100%;
flex-shrink: 0;
/* flex-grow: 1; */
display: flex;
align-items: flex-end;
justify-content: flex-start;
}
body.services > .logistics > .left > img{
width: 100%;
}
body.services > .logistics > .right{
/* width: 60%; */
flex-grow: 1;
}
body.services > .logistics > .right > .title{
display: flex;
position: relative;
align-content: center;
align-items: center;
justify-content: flex-start;
}
body.services > .logistics > .right > .title > img{
height: 100px;
margin-right: 30px;
}
body.services > .logistics > .right > .title > h2{
}
body.services > .logistics > .right > .content{
width: 600px;
}
body.services > .logistics > .right > .content > h3{
}
body.services > .logistics > .right > .content > p{
}
body.services > .meet_greet{
display: flex;
position: relative;
background-color: black;
justify-content: center;
color: white;
background-image: url(../images/services_meet_greet.jpg);
background-position: right center;
background-size: cover;
}
/* Services - Local Resources */
body.services > .resources{
background-image: url('../images/services_resources_banner.jpg');
background-size: cover;
background-position: right center;
position: relative;
padding-left: 100px;
color: black;
overflow: hidden;
}
body.services > .resources > .title{
display: flex;
align-content: center;
justify-content: flex-start;
align-items: center;
}
body.services > .resources > .title > img{
height: 130px;
margin-right: 30px;
/* filter: sepia(100%) saturate(300%) brightness(0%) hue-rotate(180deg); */
}
body.services > .resources > .title > h2{
color: white;
}
body.services > .resources > p{
color: white;
width: 800px;
}
body.services > .resources > .white_h_3bars {
position: absolute;
top: 0px;
right: 100px;
height: 30px;
}
/* Meet and Greet */
body.services > .meet_greet > .yellow_h_4bars{
position: absolute;
height: 30px;
right: 30%;
top: 0px;
}
body.services > .meet_greet > .container{
display: flex;
flex-direction: column;
align-items: stretch;
}
body.services > .meet_greet > .container > .title{
display: flex;
position: relative;
align-content: center;
align-items: center;
justify-content: flex-start;
flex-grow: 1;
}
body.services > .meet_greet > .container > .title > img{
height: 100px;
margin-right: 30px;
}
body.services > .meet_greet > .container > .box_container{
width: 900px;
display: flex;
justify-content: space-between;
}
body.services > .meet_greet > .container > .box_container > img{
height: 150px;
}
/* Partners */
body.partners > .hero_banner{
display: flex;
position: relative;
height: 800px;
background-image: url('../images/partners_hero_banner.jpg');
background-size: cover;
justify-content: flex-end;
align-items: flex-end;
align-content: flex-end;
overflow: hidden;
flex-direction: column;
padding-right: 80px;
}
body.partners > .hero_banner > h1{
position: relative;
color: white;
text-align: right;
/* right: 60px; */
/* bottom: 70px; */
}
body.partners > .hero_banner > h1 .yellow{
color: var(--yellow);
}
body.partners > .hero_banner > .white_v_3bars{
position: absolute;
width: 30px;
bottom: 0px;
right: 0px;
}
body.partners > .hero_banner > .yellow_h_13bars{
position: relative;
height: 10px;
bottom: 50px;
right: 330px;
}
body.partners > .companies{
position: relative;
text-align: center;
background: rgb(255,255,255);
background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(167,169,172,1) 100%);
/* overflow: hidden; */
}
body.partners > .companies > .our_partners{
width: 15px;
position: absolute;
top: -46%;
left: 100px;
z-index: 1;
}
body.partners > .companies > img.partners{
width: 800px;
}
/* Contact */
body.contact > .hero_banner{
display: flex;
position: relative;
height: 800px;
background-image: url('../images/contact_hero_banner.jpg');
background-size: cover;
justify-content: center;
align-items: center;
align-content: flex-end;
overflow: hidden;
flex-direction: column;
/* padding-right: 80px; */
}
body.contact > .hero_banner > .yellow_v_3bars{
width: 30px;
position: absolute;
top: 60px;
right: 0px;
}
body.contact > .hero_banner > .white_h_5bars{
position: absolute;
height: 30px;
bottom: 0px;
left: 260px;
}
body.contact > .hero_banner > .contact{
position: relative;
color: white;
}
body.contact > .hero_banner > .contact > h1{
margin-bottom: 0px;
}
body.contact > .hero_banner > .contact > .gray_h_13bars{
position: relative;
height: 15px;
left: 300px;
}
body.contact > .hero_banner > .contact > .form{
display: flex;
position: relative;
justify-content: space-between;
width: 800px;
flex-wrap: wrap;
}
body.contact > .hero_banner > .contact > .form.sending::before {
content: 'Sending...';
display: flex;
width: 100%;
height: 100%;
background-color: black;
position: absolute;
align-items: center;
align-content: center;
justify-content: center;
color: var(--yellow);
font-size: 32px;
opacity: 0.8;
}
body.contact > .hero_banner > .contact > .form input{
width: calc(50% - 5px);
margin-bottom: 10px;
flex-shrink: 0;
}
body.contact > .hero_banner > .contact > .form textarea{
margin-bottom: 10px;
}
body.contact > .social{
position: relative;
overflow: hidden;
text-align: center;
}
body.contact > .social > .black_h_4bars{
position: absolute;
height: 30px;
bottom: 0px;
right: 10%;
}
body.contact > .social .social_media{
height: 60px;
margin: 10px;
}
/* Casting */
body.casting > .hero_banner{
display: flex;
position: relative;
min-height: 800px;
background-image: url('../images/contact_hero_banner.jpg');
background-size: cover;
justify-content: center;
align-items: center;
align-content: flex-end;
overflow: hidden;
flex-direction: column;
/* padding-right: 80px; */
}
body.casting > .hero_banner > .yellow_v_3bars{
width: 30px;
position: absolute;
top: 60px;
right: 0px;
}
body.casting > .hero_banner > .white_h_5bars{
position: absolute;
height: 30px;
bottom: 0px;
left: 260px;
}
.casting_career_contact{
position: relative;
color: white;
max-width: 800px;
}
.casting_career_contact > h1{
margin-bottom: 0px;
}
.casting_career_contact > .gray_h_13bars{
position: relative;
height: 15px;
left: 0px;
margin-top: 30px;
}
.casting_career_form{
display: flex;
gap: 20px;
width: 100%;
justify-content: space-between;
flex-wrap: wrap;
background-color: rgba(255,255,255,0.2);
padding: 20px;
}
.casting_career_form label{
flex-grow: 1;
flex-shrink: 0;
width: calc(50% - 20px);
}
.casting_career_form label input,
.casting_career_form label textarea,
.casting_career_form label select{
margin-top: 10px;
}
.casting_career_form label.full_width{
width:100%;
}
/* Our Team */
/* Services */
body.team > .hero_banner{
display: flex;
position: relative;
height: 800px;
background-image: url('../images/team_hero_banner.jpg');
background-size: cover;
justify-content: flex-end;
align-items: flex-end;
align-content: flex-end;
overflow: hidden;
flex-direction: column;
padding-right: 80px;
}
body.team > .hero_banner > h1{
position: relative;
color: white;
text-align: right;
/* right: 60px; */
/* bottom: 70px; */
}
body.team > .hero_banner > h1 .yellow{
color: var(--yellow);
}
body.team > .hero_banner > .white_v_3bars{
position: absolute;
width: 30px;
bottom: 0px;
right: 0px;
}
body.team > .hero_banner > .yellow_h_13bars{
position: relative;
height: 10px;
bottom: 50px;
right: 330px;
}
body.team > .team{
position: relative;
width: 100%;
background-color: black;
color: white;
}
body.team > .team > img.our_team{
width: 15px;
position: absolute;
top: -50%;
left: 100px;
}
body.team > .team > h2{
color: var(--yellow);
margin-left: 60px;
}
body.team > .team > .team_container{
display: flex;
align-items: center;
justify-content: space-between;
margin: 60px;
}
body.team > .team > .team_container > .member{
}
body.team > .team > .team_container > .member > .image{
width: 150px;
height: 150px;
border-radius: 200px;
border: 3px solid white;
background-position: center center;
background-size: cover;
margin-bottom: 20px;
}
body.team > .team > .team_container > .member > .image.m1{
background-image: url('../images/team/ZAKI-HAINAIN.jpg');
}
body.team > .team > .team_container > .member > .image.m2{
background-image: url('../images/team/ABDULLAH-KAMEL.jpg');
}
body.team > .team > .team_container > .member > .image.m3{
background-image: url('../images/team/FAISAL-I.jpg');
}
body.team > .team > .team_container > .member > .image.m4{
background-image: url('../images/team/RASHA-E.jpg');
}
body.team > .team > .team_container > .member > .image.m5{
background-image: url('../images/team/MAHMOUD-RIYAD.jpg');
}
body.team > .team > .team_container > .member > .image.m6{
background-image: url('../images/team/SCOTT-LASTAITI.jpg');
}
body.team > .team > .team_container > .member > .title{
font-size: 12px;
}
body.team > .team > .team_container > .member > .line{
height: 1px;
width: 100%;
background-color: var(--yellow);
margin-top: 5px;
margin-bottom: 5px;
}
body.team > .team > .team_container > .member > .name{
font-weight: bold;
}
body.team > .meet{
display: flex;
position: relative;
background-image: url('../images/team_meet.jpg');
background-size: cover;
background-position: left center;
justify-content: center;
align-items: center;
flex-direction: column;
}
body.team > .meet > h2{
position: absolute;
left: 60px;
top: 60px;
}
body.team > .meet > img{
width: calc(80% - 60px);
max-width: calc(1400px - 60px);
}
/* Gallery */
body.guest_management > .hero_banner{
display: flex;
position: relative;
height: 800px;
width: 100%;
background-image: url('../images/services_hero_banner.jpg');
background-size: cover;
justify-content: space-between;
align-items: stretch;
overflow: hidden;
padding-right: 80px;
}
body.guest_management > .hero_banner::before {
content: "";
position: absolute;
top: 0px;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8); /* Set overlay color with 50% opacity */
}
body.guest_management > .hero_banner .left{
width: 50%;
height: 100%;
}
body.guest_management > .hero_banner .right{
display: flex;
position: relative;
width: 50%;
height: 100%;
flex-direction: row;
align-items: center;
align-content: center;
flex-wrap: wrap;
}
body.guest_management > .hero_banner .right h1{
display: block;
position: relative;
color: white;
font-size: 80px;
width: 100%;
margin-bottom: 0px;
/* bottom: 70px; */
}
body.guest_management > .hero_banner .right h1 .yellow{
color: var(--yellow);
}
body.guest_management > .hero_banner .right p{
font-size: 24px;
color: white;
width: 100%;
}
body.guest_management > .hero_banner > .white_v_3bars{
position: absolute;
width: 30px;
bottom: 0px;
right: 0px;
}
body.guest_management > .hero_banner > .yellow_h_13bars{
position: absolute;
bottom: 20px;
width: 520px;
right: 330px;
}
body.guest_management .guest_management{
/* width: 1200px; */
position: relative;
margin: 0px auto;
background-color: #111111;
color: white;
overflow: hidden;
}
body.guest_management .guest_management .watermark{
position: absolute;
height: 300px;
top: 50%;
right: 20%;
scale: 4;
opacity: 0.01;
z-index: 0;
}
body.guest_management .guest_management ol{
margin: 0px auto;
width: 1200px;
font-size: 24px;
font-weight: bold;
}
body.guest_management .guest_management ol li{
margin-top: 30px;
margin-bottom: 30px;
}
body.guest_management .guest_management ol img{
height: 90px;
}
/* Gallery */
body.gallery > .hero_banner{
display: flex;
position: relative;
height: 800px;
background-image: url('../images/services_hero_banner.jpg');
background-size: cover;
justify-content: flex-end;
align-items: flex-end;
align-content: flex-end;
overflow: hidden;
flex-direction: column;
padding-right: 80px;
}
body.gallery > .hero_banner > h1{
position: relative;
color: white;
text-align: right;
/* right: 60px; */
/* bottom: 70px; */
}
body.gallery > .hero_banner > h1 .yellow{
color: var(--yellow);
}
body.gallery > .hero_banner > .white_v_3bars{
position: absolute;
width: 30px;
bottom: 0px;
right: 0px;
}
body.gallery > .hero_banner > .yellow_h_13bars{
position: relative;
height: 10px;
bottom: 50px;
right: 330px;
}
body.gallery > .gallery{
position: relative;
width: 100%;
background-color: white;
color: black;
}
body.gallery > .gallery > .our_locations{
width: 15px;
position: absolute;
top: -50%;
left: 100px;
}
body.gallery > .gallery > .gallery_container{
display: flex;
position: relative;
flex-wrap: wrap;
max-width: calc(100% - 120px);
margin: 0px auto;
}
body.gallery > .gallery > .gallery_container > .album{
width: 100%;
}
body.gallery > .gallery > .gallery_container > .album > .album_container{
column-gap: 30px;
row-gap: 30px;
display: flex;
flex-wrap: wrap;
}
body.gallery > .gallery > .gallery_container > .album > .album_container > a{
display: inline-block;
}
body.gallery > .gallery > .gallery_container > .album > .album_container > a > div{
position: relative;
width: 250px;
height: 180px;
background-size: cover;
}
body.gallery > .gallery > .gallery_container > .album > .album_container > a > div > span{
display: none;
position: absolute;
bottom: 0px;
width: 100%;
background-color: rgba(0,0,0,0.8);
color: white;
font-size: 10px;
text-align: center;
}
.mobile{
display: none;
}
.mobile-menu{
}
.mobile-menu{
display: flex;
position: fixed;
height: calc(100% - 150px);
width: 100%;
right: -100%;
top: 150px;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: var(--yellow);
z-index: 2;
transition: right 300ms;
}
.mobile-menu.active{
right: 0px;
}
.mobile-menu a{
font-size: 40px;
color: black;
text-decoration: none;
margin: 20px;
font-weight: bold;
width: 800px;
text-align: center;
padding: 20px;
}
.mobile-menu a.active{
background-color: black;
color: var(--yellow);
}
.hamburger{
background-color: var(--yellow);
/* z-index: 3; */
}
@media(max-width: 1280px){
body.contact > .social{
height: 800px;
}
body.contact > .hero_banner{
height: 1200px;
}
body.contact > .hero_banner > .contact > .form input{
width: 100%;
}
.nav{
height: 150px;
}
.nav > .left a.logo > img{
width: 500px;
}
.nav > .right .desktop{
display: none;
}
.nav > .right{
margin-right: 60px;
}
.nav > .right .mobile{
display: block;
}
body.about .hero_banner .left{
display: none;
}
body.about > .hero_banner > .right{
width: 100%;
padding: 0px 60px;
}
body.guest_management > .hero_banner .left{
display: none;
}
body.guest_management > .hero_banner > .right{
width: 100%;
padding: 0px 60px;
}
body.our_work .swiper .ratio-box .featured_container .details{
font-size: 1.5em;
}
body.our_work .swiper .ratio-box .featured_container .details img{
height: 20px;
}
body.our_work .swiper .ratio-box .featured_container .watch_trailer{
font-size: 1.5em;
}
body.our_work .our_work .filters .filter{
font-size: 22px;
}
body.our_work .our_work .thumbnails{
gap: 50px 30px;
}
body.our_work .our_work .thumbnails .thumb{
width: 350px;
font-size: 1.8em;
}
.casting_career_contact{
max-width: calc(100% - 140px);
}
.casting_career_form{
font-size:3em;
gap: 60px;
background-color: #222;
}
.casting_career_form label{
width: 100%;
}
.casting_career_form label input,
.casting_career_form textarea,
.casting_career_form label select{
font-size: 1em;
margin-top: 20px;
}
.contact_form > .form input,
.contact_form > .form textarea
{
width: 100%;
font-size: 3em;
margin-bottom: 20px;
flex-shrink: 0;
}
.contact_form > .form textarea{
height: 300px;
}
#modal .wrapper{
max-width: calc(100% - 100px);
font-size: 2em;
}
#modal .wrapper h2{
font-size: 2em;
}
#modal .wrapper p{
font-size: 1.5em;
}
#modal .wrapper button{
font-size: 1.5em;
width: 300px;
padding: 30px;
}
}