@font-face {
  font-family: labelFont;
  src:url("../fonts/BlackHanSans-Regular.ttf");
}

@font-face {
  font-family: textFont;
  src:url("../fonts/EncodeSans-Regular.ttf");
}

@font-face {
  font-family: smallLabel;
  src:url("../fonts/EncodeSans-SemiBold.ttf");
}

@font-face {
  font-family: newLabel;
  src:url("../fonts/EncodeSansCondensed-Black.ttf");
}

@font-face {
  font-family: newTitle;
  src:url("../fonts/EncodeSansCondensed-Bold.ttf");
}

@font-face {
    font-family: arabicFont;
    src: url("../fonts/NotoSansArabic-VariableFont_wdth\,wght.ttf");
}

body{
    margin: 0px;
    background-color: #ffffff;
}

.float-menu{
    
    position: fixed; 
    bottom: 10px;  
    left: 50vw;
    transform: translateX(-50%);
    
    /* pointer-events: none; */
    z-index: 99999;
     /* filter:drop-shadow(2px 2px 2px rgba(0,0,0,0.3)); */
    /* background-color: rgba(255, 255, 255, 0.4); */
    /* background-color: linear-gradient(90deg,rgba(106, 199, 218, 1) 100%, rgba(56, 106, 116, 0.99) 96%); */
    
}

.float-menu .menu-container{
    /* width:fit-content; */
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.3) 0% ,
        rgba(255, 255, 255, 0.6) 100% 
        );

    /* background-color: #0B6375;    */     

    border-radius: 25px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 0.2px solid rgba(220, 220, 220, 0.5);
    padding: 10px 15px 7px 15px;
}

.float-menu .closed-menu{
    display: flex;
     justify-content: center;
}

.float-menu .menu-container{
    width:500px;
    max-width:80vw;
    overflow: hidden;
    padding: 20px;
    
}

.float-menu .closed-menu{

    display: flex;
    
    justify-content: space-between;
    padding-bottom: 10px;
    /* width: 180px; */    
}

.logo-card{

    
}
    
.menu-column{    
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}


.float-menu .menu-label{

    border-radius: 3px;
    padding: 3px 8px 3px 8px;
    /* border: 0.2px solid white; */
     width:fit-content;
    /*height:fit-content; */    
    /* height: min-content; */
    font-family: smallLabel; 
    font-size: 0.65rem; 
    letter-spacing:0.2px;
    color:rgba(255, 255, 255,1);
    text-transform: uppercase;

}

.menu-logo{
   /*  filter:drop-shadow(2px 2px 2px rgba(0,0,0,0.3)); */
}

.menu-group{
    padding-bottom: 8px;
}

.group-menu-link{
    font-size: 0.7rem;
    font-family: smallLabel;
    text-transform: uppercase;
    padding-top: 5px;
    user-select: none;
    cursor: pointer;
    padding-left: 8px;;
    color: #3c3c3c;
}


.menu-description{
      
    font-family: newTitle;
    color: rgb(53, 53, 53);
    font-size:0.8rem;
    padding-bottom: 18px;
    text-transform: uppercase;
}

.ground{
    color:rgb(52, 52, 52);
    /* position: fixed; */
    z-index: 10000;
    width: 95%;
    height: 100%;
    pointer-events: none;
    bottom: 20px;
    left: 2.5%;
    right:2.5%;

}

.ground-footer{

    display: flex;
    justify-content: space-between;
    gap: 20px;
    /* position: absolute; */
    flex-wrap:wrap;
    /* padding: 3%px; */
    bottom: -400px;
    width: 96%;
    max-width: 96%;
    padding: 2%;
    padding-bottom: 1%;
}

/* .ground-footer > * {
  position: relative;
  padding: 0 10px; 
}


.ground-footer > *:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -10px;               
  transform: translateY(-50%);
  width: 0.5px;              
  height: 60%;               
  background-color: #CCCCCC; 
} */

.ground-banner img{
    position: absolute;
    font-family: textFont;
    color: grey;
    font-size: 1rem;
    /* line-height: 1.5rem; */
    opacity: 0.8;
    
    text-align: right;
    top: 20px;
    right:25%;
    width:50%;
}

.ground-text{
    
    /* position: absolute; */
    font-family: textFont;
    color: rgb(175, 172, 172);
    font-size: 0.8rem;
    /* text-transform: uppercase; */
    /* line-height: 1.5rem; */
    /* opacity: 0.8; */
    
    /* text-align: right; */
    /* bottom: 20px;
    right:30px; */
    /* width:25% */
}


.footer-link{
    font-family: newLabel;
    font-size: 1rem;
    color: #bbb4b4;
    text-decoration: none;
    cursor: pointer;
    
}

.main-grid {
    
    position: relative;
    z-index: 10;
    display: flex;
    gap: 1.2rem;
    margin: 0px;
    padding: 30px;
    padding-bottom: 25vh;
    pointer-events: none;           
}

.menu-blocks{
    position: relative;
    z-index: 10;
    display: flex;
    gap: 1.6rem;
    margin: 0px;    
}


.column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.column-1{
    /* padding-top:250px; */
}

.grid-item img{
    border-radius: 15px;
}

.grid-card{
    position: relative;
    
    
}


.logo-card{
    background: linear-gradient(90deg,rgba(106, 199, 218, 1) 0%, rgba(56, 106, 116, 0.99) 96%);
}

.grid-item{
    position: relative;
    /* background: lightgrey; */
    border-radius: 15px;
    margin-bottom: 1em;
    pointer-events: auto;
}

.grid-media {
    filter:drop-shadow(0px 4px 3px rgba(0,0,0,0.2));
    height:100%; 
    margin:0px;
    border-radius: 15px;
}

.grid-media img{
    width:100%;
    height:100%;
    object-fit: cover;   
    border-radius: 15px;
}

.item-layover{

    /* padding-top: 25px; */
    position: absolute;
    bottom: 0px;
    width: 100%; 
    height: auto; 
    /* background-color: #3d3d3cb7; */
    z-index: 2; 
    /* backdrop-filter: blur(2px); */ 
    border-radius: 20px;

    justify-content:flex-end;  
    
    display: none;
    padding-top: 60px;


    background-color: rgba(255, 255, 255, 0);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    -webkit-mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 0%, rgb(255, 255, 255) 30%);
    mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 40%);
        

    /* mix-blend-mode:difference; */
}

.service-layover{

    /* padding-top: 25px; */
    position: absolute;
    bottom: 0px;
    width: 100%; 
    height: 100%; 
    /* background-color: #3d3d3cb7; */
    z-index: 2; 
    /* backdrop-filter: blur(2px); */ 
    border-radius: 20px;

    /* justify-content:flex-end;   */
    
    display: none;
    /* padding-top: 60px; */


    background-color: rgba(255, 255, 255, 0);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
   /*  -webkit-mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 0%, rgb(255, 255, 255) 30%);
    mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 40%); */
        

    /* mix-blend-mode:difference; */
}

.service-info{
    height: 100%;
    width: 100%;
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content:flex-end;   /* vertical center */
    align-items:flex-start;       /* horizontal center (optional) */
    /* keep text aligned left */
    padding-left: 15px;
    /* padding-top: 15px; */
}

.service-text{
    color: white;
    font-family: textFont !important;
    font-size: 0.7rem;
    padding-right: 15px;
}

.item-info {
    height: 100%;
    width: 100%;
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content:flex-end;   /* vertical center */
    align-items:flex-start;       /* horizontal center (optional) */
    /* keep text aligned left */
    padding-left: 15px;
    padding-top: 15px;
    padding-right: 10px;
    /* padding-bottom: 10px; */    
}

.item-info-background{
    position: absolute; 
    width:100%; 
    height:100%; 
    color:white; 
    /* background-color: #ffffff70;  */
    left:0px;
    bottom:0px;

}

.item-label{    

    text-transform: uppercase;
    font-family: newLabel; 
    opacity: 0.9;
    color:#ffffff;
    font-size: 1rem; 
    /* letter-spacing: 0.4px; */

}

.arabic-label{
font-family:arabicFont;
font-weight: 500;
}

.arabic-item-label{
 font-size: 1.1rem;
}

.sur-card-text{

    font-family: textFont; 
    font-size: 0.7rem; 
    /* text-transform: capitalize; */
    
    color: #a3dbed;
    margin-bottom:3px;
    padding: 0px 20px 10px 15px;

    

}

.sur-card-contact{
    text-align: center;
    padding-bottom: 20px;
}

.contact-type{
    font-family: textFont;
    font-size: 1rem;
    text-align: center;
    text-decoration: none;
    color:#a3dbed;
    /* color:rgb(255, 255, 255); */
    padding-bottom: 5px;
    user-select: none;
   
}


.item-text {

    font-family: textFont; 
    font-size: 0.65rem; 
    text-transform: uppercase;
    /* text-transform: capitalize; */
    
    color: #868484;
    margin-bottom:3px;
    padding: 10px 10px 0px 10px;
}

.item-desc{
    max-width: 80%;
    text-transform: uppercase;
    
    font-family: textFont; 
    font-size: 0.7rem; 
    letter-spacing:0.8px;
    
    color: #EAEAEA;
    margin-bottom:3px;
}

.item-tasks{
    max-width: 95%;
    display: flex;
    gap: 5px;
    padding-top: 8px;
    flex-wrap: wrap;
    left: 0px;
    /* width: 100%; */
    align-items: flex-start;
    padding-bottom: 20px;
    
}

.item-task{   

    border-radius: 3px;
    padding: 3px 5px 3px 5px;
    /* border: 0.2px solid white; */
    /* width:fit-content;
    height:fit-content; */
    
    /* height: min-content; */

    font-family: smallLabel; 
    font-size: 0.65rem; 
    letter-spacing:0.2px;
    color:rgba(255, 255, 255,1);
    text-transform: uppercase;
       
}

.logo{
    background-color:#A3AD37;    
}

.website{
    background-color:aqua;
}

.ux{
   background-color: #F57449;
}

/* pages-overlay*/



.overlay {
      position: fixed;
        top: 0; left: 0;
        width: 100%;
        height: 100%;
        /* background: rgba(223, 227, 229, 0.5); */
        background: radial-gradient(circle,rgba(21, 146, 168, 0.85) 0%, rgba(35, 79, 90, 0.6) 33%, rgba(135, 138, 138, 0.8) 78%, rgba(68, 113, 113, 0.7) 100%);
        opacity: 0;
        pointer-events: none;
        display: flex;
        justify-content: center;
        align-items: center;
        backdrop-filter: blur(25px);
        -webkit-backdrop-filter: blur(25px);
        z-index: 8000;
    }

.overlay-content {         
    width: 84%;
    overflow-x: hidden;
    padding-left: 8;
    padding-left: 8%;
    height: 100%;
    overflow-y: scroll;   /* only this scrolls */
    padding: 20px;
    border-radius: 10px;
    /* transform: scale(0.9); */
    opacity: 0;
    
}

.overlay-content::-webkit-scrollbar {
  display: none; /* hide scrollbar on Chrome, Safari, Opera */
}

.close-overlay {
    position: absolute;
    top:25px; 
    right:25px;
    
    cursor:pointer;
    
    z-index: 1001;
}



/* button { margin-top:20px; padding:10px 20px; } */

@media screen and (max-width: 900px){
    .main-grid{
        padding:10px;
        gap:0.7rem;
        padding-bottom: 40vh;
    }
}