body{background: url(https://www.gulfnetemirates.com/wp-content/themes/gulfnet/assets/images/landing-banner.webp) left top no-repeat; background-size:cover;}
.landing_container{width:100%; 
left:0; top:0; padding-bottom:60px}
.landing_container header {
left: 0;
top: 0;
width: 100%;
padding: 30px 0;
transition: all ease 600ms;
z-index: 9;
min-height: 235px;
width: 100%;
text-align: center;
background: transparent;
}
.main-box{display:flex; width:1280px; justify-content:space-between; margin:0 auto}
.landing_container .common_box {
width: 32%;
background-size: 100%;
background-position: 0px -80px;
}
.landing_container .common_box.right {
width: 50%;
background-size: 100%;
}
.landing_container .common_box {
text-align: center;
}
.landing_container .common_box figure{position:relative; margin-bottom:0; border-radius:20px}
.landing_container .common_box figure figcaption{width:100%; height:100%; border-radius:20px; position:absolute;top:0; display:flex; align-items:flex-end;
content:""; background: linear-gradient(180deg, rgba(55, 48, 132, 0) 33.14%, #090E2D 95.72%); padding:25px; transition:all .3s;overflow:hidden;
}
.landing_container .common_box figure figcaption:hover{background: linear-gradient(180deg, rgba(3, 0, 35, 0.7) 20.67%, #080E2D 80.5%); text-align:center
}
.landing_container .common_box figure figcaption .text-box p{height:0; opacity:0; margin-bottom:0; transition: all .3s}
.landing_container .common_box figure figcaption:hover .text-box p{height:auto; opacity:1; color:#fff; margin-bottom:30px; margin-top:30px}
.landing_container .common_box figure img{width:100%; border-radius:20px}
.landing_container .common_box h4 {
font-size: 30px;
line-height: 45px;
color: #fff;
font-family:'proxima_novabold'; margin-bottom: 0; margin-top:15px;
}
.landing_container .common_box span {
font-size: 17px;
line-height: 20px;
color: #C0AFFF;
display: inline-block;
width: 100%;
font-family: "proxima_novalight";
}
.landing_container .common_box .explore {
display: inline-flex; align-items:center; justify-content:center;
padding: 10px 15px;
text-align: center;
font-size: 20px;
line-height: 24px;
color:rgba(138, 121, 223, 1);
min-width: 180px;
border-radius: 25px;
transition: all ease 600ms;
font-family: "proxima_novabold";
margin-top: 20px; text-decoration: none;
}
.landing_container .common_box .explore img {
max-width: 25px;
position: relative;
top: -2px; margin-left:10px
}
.landing_container .common_box .explore svg{margin-left:10px}
.landing_container .common_box figure figcaption:hover .explore {
background: #fff;
color:rgba(55, 48, 132, 1);
}
.landing_container .common_box figure figcaption:hover .explore:hover{background: rgba(138, 121, 223, 1); color: #fff;}
.landing_container .common_box figure figcaption:hover .explore:hover svg path{fill: #fff;}
@media(max-width:1366px){
.main-box{width: 100%; padding: 0 15px;}
.landing_container .common_box h4 {
font-size: 26px;
line-height: 36px; margin-top: 0;
}
.landing_container .common_box span {
font-size: 17px;
line-height: 20px;
}
.landing_container .common_box figure figcaption:hover .text-box p{margin: 15px 0;}
.landing_container .common_box figure figcaption{padding: 20px;}
}
@media(max-width:1024px){
.landing_container .common_box.right{display: flex; align-items: center; padding-top: 0;
height: 100%; background-position: left bottom;}
.landing_container .common_box .mid_text{height: auto; width: 100%;}    
.landing_container .common_box.left{display: flex; align-items: center; padding-top: 0;}     
.landing_container .common_box h4 {
font-size: 22px;
line-height: 32px;
}
.landing_container .common_box figure figcaption{padding: 10px;}
.landing_container .common_box span {
font-size: 16px;
line-height: 20px;
}
.landing_container .common_box .explore{margin-top: 10px; padding:5px 10px; width: 130px; font-size: 16px;}
.landing_container .common_box figure img{height: 400px; object-fit: cover;}
}
@media(max-width:767px){
.landing_container .common_box{width: 100%; margin-bottom: 25px;}
.landing_container .common_box figure figcaption{ padding: 20px;}
.landing_container .main-box{flex-wrap: wrap; height: auto; position: relative;}
.landing_container header{position: relative; min-height: inherit;}
.landing_container header img{width: 180px;}
}