.h4_p_text{
position: inherit;
font-weight: 800;
line-height: 22px;
text-align: center;
padding: 20px;
Padding-top: 5px;
z-index: 100;
color: #fff;
font-size: 12px !important;
font-family: 'Campton-LightDEMO' !important;
}
.h4_event_text{
font-size: 22px !important;
font-family: 'Campton-LightDEMO' !important;
}
.h2-text {
font-size: 18px !important;
color: #fff;
font-family: 'Campton-LightDEMO' !important;
}
.btn-style {
font-size: 12px !important;
font-family: 'Campton-LightDEMO';
}
@media only screen and (max-width:700px) {
.btn-style {
border: none;
background-color: transparent;
color: white;
padding: 2px;
margin-top: -10px;
font-size: 12px;
/* font-family: Tajawal-Regular; */
font-family: 'Campton-LightDEMO';
}
}
@media only screen and (min-width:700px) {
.hvrbox{
margin-top: 0px;
}
.btn-style {
border: none;
background-color: transparent;
color: white;
padding: 3px;
margin-top: -10px;
font-size: 12px;
/* font-family: Tajawal-Regular; */
font-family: 'Campton-LightDEMO';
}
}
.hvrbox,
.hvrbox * {
box-sizing: border-box;
/* margin-top: -8px; */
}
.hvrbox {
position: relative;
display: inline-block;
overflow: hidden;
max-width: 100%;
height: auto;
}
.hvrbox img {
max-width: 100%;
width: 354px;
}
.hvrbox .hvrbox-layer_bottom {
display: block;
}
.hvrbox .hvrbox-layer_top {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(13, 13, 14, 0.6);
color: #fff;
padding: 15px;
-moz-transition: all 0.4s ease-in-out 0s;
-webkit-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
/* width: 280px; */
}
.hvrbox:hover .hvrbox-layer_top,
.hvrbox.active .hvrbox-layer_top {
opacity: 1;
}
.hvrbox .hvrbox-text {
text-align: center;
font-size: 12px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 280px;
/* font-family: Tajawal-Regular; */
font-family: 'Campton-LightDEMO';
}
.hvrbox .hvrbox-text_mobile {
font-size: 15px;
border-top: 1px solid rgb(179, 179, 179);
/* for old browsers */
border-top: 1px solid rgba(179, 179, 179, 0.7);
margin-top: 5px;
padding-top: 2px;
display: none;
/* font-family: Tajawal-Regular; */
font-family: 'Campton-LightDEMO';
} 
.hvrbox.active .hvrbox-text_mobile {
display: block;
}
.zoom1 {
padding: 10px;
transition: transform .1s;
/* Animation */
margin: 0 auto;
}
.zoom1:hover {
transform: scale(1.2);
/* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}
.imgy {
filter: grayscale(100%);
}
.imgy:hover {
filter: none;
color: transparent;
}
.imgBlackWhite {
/* filter: contrast(0%) brightness(100%) grayscale(100%) !important; */
filter: none !important;
}
.imgBlackWhite:hover {
filter: none !important;
color: transparent !important;
}
.imgymp:hover {
filter: none;
color: transparent;
}
.txt-left {
position: absolute;
bottom: 40px;
left: 30px;
color: white !important;
font-family: 'Campton-LightDEMO';
z-index:-100% ;
font-size: 18px;
}
.txt-left:hover {
bottom: 0px;
color: red;
}
.myDIV:hover+.tex-left {
color: red;
}
.gfg {
/* margin: 3%; */
position: relative;
color: white;
}
.gfg:hover {
color: transparent;
}
.ul-desktop {
display: flex;
}
.li-desktop {
list-style: none;
padding: 10px;
scale: gray;
}
.a-style {
margin-bottom: -40px;
text-decoration: none;
}
@media only screen and (max-width:900px) {
.hvrbox-text{
top:50% !important;
}
.h4_event_text{
padding: 1px;
margin-top: 30px !important;
}
.h4_p_text{
margin-top: -10px !important;
margin-bottom: 4px;
}
}
@media only screen and (min-width:900px) {
.hvrbox-text{
top:40% !important;
}
.h4_event_text{
padding: 1px;
margin-top: 30px !important;
}
.h4_p_text{
margin-top: -10px !important;
margin-bottom: 4px;
}
.btn-style{
cursor: pointer;
}
}
@media only screen and (min-width:1000px) {
.hvrbox-text{
top:40% !important;
}
.h4_event_text{
padding: 1px;
margin-top: 30px !important;
}
.h4_p_text{
margin-top: -10px !important;
margin-bottom: 4px;
}
.btn-style{
font-size: 10px;
cursor: pointer;
}
}
@media only screen and (min-width:1100px) {
.hvrbox-text{
top:40% !important;
}
.h4_event_text{
padding: 1px;
margin-top: 30px !important;
}
.h4_p_text{
margin-top: -10px !important;
margin-bottom: 4px;
}
.btn-style{
cursor: pointer;
}
}
.h2-text{
margin-top: 8px;font-size: 18px;
}
/* container style start */
.container-services-section {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
background: rgb(0, 0, 0);
padding: 15px;
}
.container-services-section .img-services-section {
width: 100%;
display: block;
-webkit-filter: grayscale(1);
filter: grayscale(1);
transition: all 100ms ease-out;
}
.container-services-section .img-services-section:hover {
transform: scale(1.04);
-webkit-filter: grayscale(0);
filter: grayscale(0);
}
/* read more button - underline style */
/* underline style start */
.underline{
margin-top: 10px;
height: 3px;
text-align:center !important;
margin-top: 2px;
background-color:red !important;
width: 40%;
color: red !important;
margin-left: 30%;
font-weight: lighter;
}
/* underline style end */
.hide {
display: block;
width: 100%;
}
.hide:hover {
display: none;
}
.myDIV {
color: white;
bottom: 10px;
}
.myDIV:hover+.hide {
display: none;
color: transparent;
bottom: -10px;
width: 100%;
}
.hvrbox-layer_slideup:hover+.hide {
display: none;
color: transparent;
bottom: -10px;
width: 100%;
}
.hvrbox-layer_top:hover+.hide {
display: none;
color: transparent;
bottom: -10px;
width: 100%;
}
.hvrbox-layer_bottom :hover+.hide {
display: none;
color: transparent;
bottom: -10px;
width: 100%;
}
.tttt {
display: block;
}
.banner-video-main::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: '';
background-image: radial-gradient(circle at 20% 50%,#000000,rgba(11, 39, 65, 0.10) 30%,rgba(0, 0, 0, 0));
}
.quick-video-main {
position: relative;
/* padding: 5px; */
/* background-color: #212121; */
width: 100% !important;
margin: 0 auto;
border-radius: 20px;
overflow: hidden;
border-style: solid;
border-color: #1e1e1e;
border-width: 5px;
}
.quick-events-list {
position: relative;
z-index: 10;
width: 85%;
margin: 0 auto;
margin-top: 10px;
}
@import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&display=swap");
.html body {
overflow-x: hidden;
}
.bd{
background-color: black;
overflow-x: hidden;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.img-logo{
text-align:center;
margin-top: 25px;
margin-bottom: 20px;
}
.cl {
flex-direction: column;
align-items: center;
}
.cl:hover {
cursor: pointer;
}
@media only screen and (min-width:760px) {
.img-op1{
margin-top: 30px !important;
}
.img1{
margin-left: 6px;
}
.row-style{
padding-left: -40px;padding-right: 0px;
}
}
@media only screen and (min-width:1024px) {
.img1{
margin-left: 6px;
}
.bg{
width: 120px !important;
height: 120px !important;
}
.imgy{
width: 100px !important;
}
.img-op1{
margin-top: 85px !important;
}
}
.cls .img1 {
filter: contrast(200%);
width: 200px;
height: 50px;
box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 0.5);
margin-bottom: 1rem;
transition: filter 0.4s ease-in-out;
margin-top: 20px;
}
.cl .img1  {
border-radius: 10px;
opacity: 0.5;;
filter: grayscale(var(--value, 100%));
width: 150px;
height: 150px;
box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 0.5);
margin-bottom: 1rem;
transition: filter 0.4s ease-in-out;
}
.cl:hover .img1 {
filter: none;
}
.bg:hover .title::after {
width: 100%;
left: 0;
}
.row-style{
padding-right: calc(var(--bs-gutter-x) * .4);
/* padding-left: calc(var(--bs-gutter-x) * .4); */
}
.bg .imgy {
/* filter: grayscale(); */
transition: all 0.5s ease;
cursor: pointer;
}
.bg:hover .imgy {
filter: none;
transform: scale(1.1);
/* -webkit-transition: all 0.5s ease; */
}
.bg {
flex-direction: column;
align-items: center;
}
.bg:hover {
cursor: pointer;
}
.title {
font-family: Arial, Helvetica, sans-serif;
font-size: 3rem;
color:rgb(144, 141, 141);
position: relative;
}
.title::before {
position: absolute;
width: 0%;
height: 4px;
background-color: rgb(4, 4, 4) !important;
left: 50%;
bottom: -10px;
color: rgb(38, 38, 38);
transition: all 0.4s ease-in-out;
}
.title::after {
position: absolute;
content: "";
width: 0%;
height: 2px;
left: 50%;
background-color: rgb(166,51,40);
bottom: -10px;
color: rgb(230, 230, 230);
transition: all 0.3s ease-in-out;
}
.bg:hover .title::after {
width: 100%;
left: 0;
visibility: visible;
color: #fff;
}
.bg .inner-title {
display: none;
}
.bg:hover .inner-title {
display: block;
}
.inner-title{
margin-top: 40px;
}
.inner-title::after{
transition: all 0.2s ease-in-out;
filter: none;
}
.inner-title::before {
filter: none;
}
@media only screen and (max-width:700px) {
.scroll-downs{
display:none !important;
}
.cl .img1{
display: flex !important;
width: 80px !important;
height: 80px !important;
}
.inner-title{
margin-top: 20px;
}
.bg{
height: 80px !important;
margin-left: 0;
margin-top: 0;
}
.img-logo{
margin-bottom: -20px;
}
.imgy{
margin-left: 0px !important;
margin-top: 30px !important;
}
.inner-title{
font-size: 8px !important;
width: 60px;
text-align: center;
margin-left: -10px;
}
.tx{
margin-top: -70px !important;
}
.rw{
margin-left: -45px
}
}
@media only screen and (min-width:700px) {
.tx{
margin-top: 90px;
}
.inner-title{
margin-top: 60px !important;
}
.rw{
margin-left: -45px;
}
.imgy{
margin-top: 28px;
margin-left: 0px;
}
}
@media only screen and (min-width:1000px) {
.tx{
margin-top: -80px;
}
.inner-title{
margin-top: 60px !important;
}
.con{
margin-top: -100px !important;
}
}
/* container style */
.con-style{
/* height: 300px; */
/* background-image: url(<?php echo base_url($frameworks_dir . '/design/images/business-vertical-bg.webp'); ?>);background-size: 100% 300px; */
margin-top: 0px;
}
/* row style */
.rw{
padding:40px;
}
.bg{
width:135px;
height:135px;
border-radius: 10px;
background-color: rgb(35, 35, 35);
margin: 5px;
opacity: 80%;
}
.imgy-style{
width: 160px;
text-align: center;
}
.lity{
z-index:999999999 !important;
}
.img-trending{
height:200px;
cursor: pointer;
pointer-events: visible;
}
.txt-trending{
cursor: pointer !important;
pointer-events: visible;
}
.txt-trending{
cursor:pointer;
}
.div-trending{
margin-bottom: 10px;
border-top:1px solid white;
width: 200px;
}
.h3-trending{
font-size: 11px !important;
color: #ffffff;
margin-bottom: 15px;
}
.p-text-spacing{
word-spacing: -2px !important;
font-family: 'Campton-LightDEMO';
letter-spacing: 2px;
font-size: 20px;
}
.section-ods {
padding: 20px 20px !important;
}
.home-page-brief {
  margin-bottom: -160px;
}
@media (max-width: 1400px){
.section-ods {
padding: 20px 100px;
}
}
@media (max-width: 1024px){
.insta-main-comment{
font-size: 12px !important;
}
}
@media (max-width: 769px){
.insta-main-comment{
font-size: 15px !important;
}
.section-ods {
padding: 30px 30px !important;
}
}
@media (max-width: 600px){
.bv-tabs-mobile{
margin-left: -25px !important;
}
}
@media (max-width: 576px){
.insta-pic a {
height: 300px  !important;
}
.op1-top-block {
    margin-top: 0px !important;
}
.op1-top-block-ods {
    margin-top: 50px !important;
}
.section-ods {
padding: 15px 15px !important;
}
.home-page-brief {
  margin-bottom: -60px !important;
}
}
.ods-logos-home{
    display: flex;
    align-items: center;
    border-radius: 10px;
    background-color: #151515;
    justify-content: center;
    min-height: 80px;
    padding: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
}
.ods-logos-home img{
max-height:100px;
}
.op1-top-block{
    margin-top:50px;
}
.op1-top-block-ods{
    margin-top:50px;
}
.centralise{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    margin-top: 0px;
    margin-bottom: 30px;
}
.banner-video-main{
    max-height: 800px;
}
.homepage-content {
    margin-top: 40px;
    padding: 24px;
    background: #212121;
    border-radius: 20px
}
.learn_more_button {
    background-color: var(--highlight) !important;
    width: 100% !important;
    max-width: 120px !important;
    min-width: 80px !important;
    color: white !important;
    border: none !important;
    border-radius: 5px !important;
    font-size: 12px !important;
    padding: 6px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    font-family: var(--Highlight-font);
    font-style: italic;
    text-align: center !important;
}
Section{
 padding-top:10px !important;
}
.centralise-ods{
     display: flex;
    align-items: center;
    justify-content: center;
    height:100%;
}
p {
    padding-bottom:20px
}
  .learn_more_button_home {
         background-color: var(--highlight) !important;
         width: 100% !important;
         min-width: 80px !important;
         color: white !important;
         border: none !important;
         border-radius: 5px !important;
         font-size: 12px !important;
         padding: 6px !important;
         font-weight: bold !important;
         text-transform: uppercase !important;
         font-family: var(--Highlight-font);
         font-style: italic;
         margin-top: auto;
         text-align: center;
         border-radius: 4px;
         cursor: pointer;
         }
         .learn_more_button_home_banner {
         background-color: var(--highlight) !important;
         width: 40% !important;
         min-width: 80px !important;
         color: white !important;
         border: none !important;
         border-radius: 5px !important;
         font-size: 10px !important;
         padding: 6px !important;
         font-weight: bold !important;
         text-transform: uppercase !important;
         font-family: var(--Highlight-font);
         font-style: italic;
         margin-top: 20px;
         text-align: center;
         border-radius: 4px;
         cursor: pointer;
         }
         .centralise{
         display: flex;
         align-items: center;
         justify-content: center;
         height: auto !important;
         margin-top: 0px;
         margin-bottom: 30px;
         }
         .card-brand-image{
         height: 180px;
         border-radius: 10px;
         width: 300px;
         }
         .homepage-content{
         margin-top: 40px;
         background: #212121;
         background: linear-gradient(125deg, rgba(19, 19, 19, 1) 0%, rgba(48, 48, 48, 1) 100%);
         border-radius: 20px;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         height: 95%;
         border-radius: 20px;
         padding: 20px;
         }
          .brand-card {
            transition: transform 0.3s ease-in-out;
         }
         .brand-card img {
            transition: transform 0.3s ease-in-out;
         }
         .brand-card:hover {
            transform: scale(1.03);
         }
         .brand-card:hover img {
            transform: scale(1.05);
         }