@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


@font-face {
    font-family: "eurostile";
    src: url("../fonts/eurostile.TTF");
}
@font-face {
    font-family: "dgb";
    src: url("../fonts/DharmaGothicE-Bold.ttf");
}
@font-face {
    font-family: "agbold";
    src: url("../fonts/AktivGrotesk-Black.otf");
}
@font-face {
    font-family: "dgr";
    src: url("../fonts/DharmaGothicE-Regular.ttf");
}
@font-face {
    font-family: "dgel";
    src: url("../fonts/DharmaGothicE-ExLight.ttf");
}
@font-face {
    font-family: "agl";
    src: url("../fonts/AktivGrotesk-Light.otf");
}
@font-face {
    font-family: "agm";
    src: url("../fonts/AktivGrotesk-Medium.otf");
}
@font-face {
    font-family: "agb";
    src: url("../fonts/AktivGrotesk-BlackItalic.otf");
}
@font-face{
    font-family: "agr";
    src: url("../fonts/AktivGrotesk-Regular.otf");
}
@font-face {
    font-family: "agxb";
    src: url("../fonts/AktivGrotesk-XBoldItalic.otf");
}
@font-face {
    font-family: "mer";
    src: url("../fonts/MonumentExtended-Regular.otf");
}
@font-face {
    font-family: "meb";
    src: url("../fonts/MonumentExtended-Ultrabold.otf");
}
@font-face {
    font-family: "me";
    src: url("../fonts/monument-extended-2.ttf");
}

body{
    padding: 0;
    margin: 0;
    overflow-x:hidden ;
}
/* navbar */
#nav-toggler{
    display: none;
}
.logo-mob{
    display: none;
}
.navbar{
    width: 100%;
    height: 4vw;
    background-color: #000000cb;
    position: fixed;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.navbar ul{
    display: flex;
    width: 40%;
    list-style: none;
    align-items: center;
    justify-content: space-around;
    font-family: "poppins";
    color: white;
    font-weight: 200;
    font-size: 1vw;
}
.navbar ul li a{
    color: white;
    text-decoration: none;
}
.logo{
    width: 23vw;
    margin-left: 2vw;
}
  /** {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }*/
        
           body {
            font-family: Arial, sans-serif;
            overflow-x: hidden;
            background-color: #ffffff;
        }
        
        .cover {
            width: 100%;
            height: 100vh;
            position: relative;
            overflow: hidden;
            background-color: #000000;
            
        }
        
        /* VIDEO BACKGROUND - SHOW ON ALL DEVICES */
        .video-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 1;
        }
        
        .cover-cont {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            /*padding: 0 5%;*/
            position: relative;
            z-index: 2;
        }
        
        .main-logo {
            width: 40vw;
            max-width: 300px;
            margin-top: 5vh;
        }
        
        .bottom-section {
            position: absolute;
            bottom: 7vh;
            width: 90%;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 3vh;
        }
        
        .cov-btns {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            gap: 1vw;
            width: 100%;
            max-width: 1600px;
        }
        
        .cov-btn {
            font-family: "dgb";
            color: white;
            font-size: 1.5rem;
            width: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #040503;
            border-radius: 1.5rem;
            padding: 0.8rem 0;
            text-decoration: none;
            transition: all 0.5s ease;
            text-align: center;
        }
        
        .cov-btn:hover {
            color: black;
            background-color: white;
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(255, 255, 255, 0.3);
        }
        
        .grid-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 2vw;
        }
        
        .subs-btn {
            color: white;
            font-family: "dgb";
            font-weight: bold;
            text-shadow: 2px 2px 2px black;
            font-size: 1.8rem;
            border: 2px solid white;
            box-shadow: 2px 2px 2px black;
            padding: 0.8rem 1.5rem;
            border-radius: 1rem;
            text-decoration: none;
            transition: all 0.3s ease;
        }
        
        .subs-btn:hover {
            background-color: white;
            color: black;
            text-shadow: none;
            transform: translateY(-3px);
        }
        
        /* MOBILE STYLES - VIDEO WITH BLACK BACKGROUND */
        @media (max-width: 768px) {
            .cover {
                display: flex;
                flex-direction: column;
                height: 100vh;
                background: #000000;
            }
            
            .video-background {
                position: relative;
                height: 40vh;
                width: 100%;
                flex-shrink: 0;
                z-index: 1;
            }
            
            .cover-cont {
                flex: 1;
                background: #000000;
                padding-top: 2vh;
                padding-bottom: 2vh;
                justify-content: space-between;
                height: auto;
                overflow-y: auto;
            }
            
            .main-logo {
                width: 70vw;
                max-width: 250px;
                margin-top: 2vh;
                margin-bottom: 2vh;
            }
            
            .bottom-section {
                position: relative;
                bottom: auto;
                width: 100%;
                gap: 3vh;
                margin-top: auto;
                margin-bottom: 2vh;
            }
            
            .cov-btns {
                gap: 2vw;
            }
            
            .cov-btn {
                width: 120px;
                font-size: 0.9rem;
                padding: 0.6rem 0;
            }
            
            .subs-btn {
                font-size: 1rem;
                padding: 0.7rem 1.2rem;
            }
        }
        
        @media (max-width: 480px) {
            .video-background {
                height: 45vh;
            }
            
            .cov-btns {
                gap: 3vw;
            }
            
            .cov-btn {
                width: 100px;
                font-size: 0.8rem;
                padding: 0.5rem 0;
                border-radius: 1rem;
            }
            
            .subs-btn {
                font-size: 0.9rem;
                padding: 0.6rem 1rem;
            }
            
            .main-logo {
                width: 80vw;
            }
        }
        
        /* DESKTOP/LAPTOP STYLES */
       /* @media (min-width: 769px) {
            .cover {
                background: #000000;
            }
            
            .cover-cont {
                background-color: rgba(0, 0, 0, 0.5);
            }
        }*/
.over-bg {
    background-image: url(../image/overview.webp);
    margin-bottom: 2vw;
}
.overview{
    width: 100%;
    height: 80vh;
    display: flex;
    background-color: rgba(255, 255, 255, 0.693);
}
.over-left{
    width: 50%;
    height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.over-right{
    width: 50%;
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;

}
.over-im-box{
    width: 80%;
    height: 80%;
    overflow: hidden;
}
/*.title{
    font-size: 3vw;
    font-family: "meb";
    font-size: 3vw;
    text-transform: uppercase;
    margin: 1vw;
}*/
.title{
    font-size: 3vw;
    font-family: 'Montserrat', sans-serif; /* Apply Montserrat Bold */
    font-weight: bold; /* Ensure Bold Weight */
    font-size: 3vw;
    text-transform: uppercase;
    margin: 1vw;
}
.over-para{
    margin: 0vw 1vw;
    text-align: justify;
    font-family: "Poppins";
    font-size: 1vw;
    font-weight: 400;
}
.over-img{
    width: 90%;
    margin-top: -10vw;
}
/* speaker */
.speakers{
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.speakers .owl-carousel {
    overflow: visible;
}
.speakers .owl-carousel .item{
    width: 100%;
    height: 40vw;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}
.spk-box{
    width: 90%;
    height: 34vw;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}
.speakers .owl-carousel .item .spk-patch{
    width: 85%;
    position: absolute;
}
.spk-img-box{
position: absolute;
z-index: 10;
width: 118%;
height: auto;
display: flex;
align-items: center;
justify-content: center;
-webkit-mask: url("../image/spk_mask.svg");
mask:url("../image/spk_mask.svg");
mask-size: 70%;
mask-repeat: no-repeat;
mask-position: 50% 0%;
transform: translate(0vw,-3.1vw);
}
.speakers .owl-carousel .item .spk-img{
    width: 100%;
    transform: translate(0,3.5vw);
}
.spk-cont{
    position: absolute;
    z-index: 11;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    height: 38vw;
    width: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0) 30%,rgba(0, 0, 0, 0.699) 70% ,black);
}
.spk-fname{
    color: white;
    font-family: "Montserrat";
    font-size: 2.7vw;
    font-weight: 900;
    line-height: 2.7vw;
    width: 60%;
    text-align: center;
    text-transform: uppercase;
}
.spk-lname{
    color: white;
    font-family: "Montserrat";
    font-size: 2.2vw;
    font-weight: 700; 
    line-height: 2.2vw;
    width: 60%;
    text-align: center;
    text-transform: uppercase;
}
.spk-job{
    color: white;
    font-family: "Montserrat";
    font-size: 1vw;
    font-weight: 300; 
    line-height: 1vw;  
    margin: 0.5vw 0vw;
    width: 60%;
    text-align: center;
}
.spk-comp{
    color: white;
    font-family: "Montserrat";
    font-size: 1vw;
    font-weight: 300; 
    line-height: 1vw;  
    margin-bottom: 2vw;
    width: 60%;
    text-align: center;
}
/* events */
.events{
    width: 100%;
    height: auto;
}
.events button{
    display: none
   
}
.evh-btn a {
    color: white; /* Sets the text color to white */
    text-decoration: none; /* Removes underline (optional) */
}

.evh-btn a:hover {
    color: #f0f0f0; /* Slightly lighter white for hover effect (optional) */
}

.events .swiper-container{
    width: 100%;
    height: 50vh;
    overflow: hidden;
    position: relative;
}
.events .swiper-container .swiper-slide a{
    text-decoration: none;
}
.eve-logo{
    width: 40vw;
}
.ev-lb{
    position: absolute;
    left: 3%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.evh-btn{
    font-family: "mer";
    color: white;
    border: 2px solid white;
    padding: 0.3vw 1vw;
    box-shadow: 2px 2px 3px black;
}
.evl2{
    left: auto;
    right: 3%;
}
.evsq{
    width: 15vw;
}
.even-con{
    width: 100%;
    height: 100%;
   display: flex;
   align-items: center;
   justify-content: flex-end;
}
.qatar,.oman{
    background-color: rgba(34, 34, 34, 0.727);
}
.date-place{
    margin: 0vw 3vw;
}
.date{
    color: white;
    font-family: "dgb";
    font-size: 10vw;
    line-height: 6vw;
}
.date span{
    font-size: 1.8vw;
    line-height: 1vw;
    color: #fef274;
}
.date sup{
    font-size: 3.5vw;
    position: absolute;
    transform: translateY(-3vw);
}
.place{
    color: white;
    font-family: "dgb";
    font-size: 1.6vw;
}
.country{
    font-size: 5.2vw;
    line-height: 4.3vw;
    color: white;
    font-family: "dgb";
}
.ind,.bahrain{
    background-color: rgba(0, 0, 0, 0.667);
    justify-content: start;
}
.ind .place{
    font-size: 2.1vw;
}
.ind .country{
   font-size: 5.3vw;
}
.bahrain .country{
    line-height: 5vw;
}
.ev1{
    background-image: url("../image/qatar.jpg");
    background-size: cover;
}
.ev2{
    background-image: url("../image/ind.jpg");
    background-size: cover;
}
.ev3{
    background-image: url("../image/oman.jpg");
    background-size: cover;
}
.ev4{
    background-image: url("../image/bahrain.jpg");
    background-size: cover;
}
/* sponsors */
.sponsors{
  width: 100%;
  height: auto;
  background-color: #11080b;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.t-head{
  font-family: 'Montserrat';
    font-size: 4vw;
    color: white;
    font-weight: 900;
    font-style: italic;
    background: white;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  padding-top: 2vw;
}
.sponsors .themes-head{
  width: 90%;
}
.sponsors .t-head span{
  font-size: 3vw;
  line-height: 1vw;
}
.sponsors .t-head{
  line-height: 3.5vw;
}
.spon-container{
  width: 80%;
  padding: 0 2vw;
  height: 100%;
  min-height: 20vw;
  background: black;
  /*border: 1px solid white;*/
  margin: 2vw 0vw;
  /*border-radius: 1vw;*/
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.spon-cont{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 1vw 0vw;
}
.spon-h{
  font-family: "Montserrat";
  font-weight: 700;
  font-size: 1.2vw;
  color: black;
}
.spon-boxes{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1vw;
  flex-wrap: wrap;
    
}

.spon-box{
  width: 15vw;
  border: 1px solid rgba(0, 0, 0, 0.168);
  height: 7vw;
  display: flex;
  align-items: center;
  justify-content: center;
  
  border-radius: 1vw;
     
}
.platinum .spon-box{
  width: 24vw;
  height: 12vw;
}
.gold .spon-box{
  width: 20vw;
  height: 9vw;
}
.silver .spon-box{
  width: 18vw;
  height: 8vw;
}
.spon-img{
  width: 52%;
  filter: grayscale(90%);
 
}
 img:hover{
        filter:grayscale(0%)
        } 
.sqMax{
  width: 90% !important;
}
.sq{
  width: 30%;
}
.sq1{
  width: 52% !important;
}

.sponsors2{
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.sponsors .owl-carousel{
    width: 90%;
}
.sponsors .item{
    height: 15vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sponsors .item .spon-logo{
    width: 70%;
}
.spon-box{
    width: 98%;
    height: 98%;
    border: 1px solid black;
    display: flex;
    align-items: center;
    justify-content: center;
    
}
/* testimonial */
.testimonial{
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.testimonial .test-carousel{
    width: 100%;
    height: 99vh;
}
.testimonial .test-carousel .item{
    height: 99vh;
}
.test-box{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.center .test-box{
    transform: translateY(-2.2vw) scale(1.2);
}
.center .test-con-box{
    background-color: #414141;
    color: white;
    border: 1px solid #414141;
}
.test-con-box{
    width: 80%;
    height: 60vh;
  border: 1px solid black;
    border-radius: 3vw 3vw 0vw 0vw;
    margin-top: 8vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 1vw;
}
.test-im{
    width: 10vw;
    height: 10vw;
    background-color: rgb(255, 255, 255);
    border-radius: 50%;
    position: absolute;
    top: 17%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid black;
}
.test-in-box{
    width: 9vw;
    height: 9vw;
    border-radius: 50%;
    background-color: rgb(51, 51, 51);
}
.center .test-im{
    border: 1px solid #414141;
}
.test-description{
    width: 90%;
    height: 35vh;
}
.test-fname{
    font-family: 'meb';
    font-size: 2vw;
    line-height: 2vw;
}
.test-lname{
    font-family: 'mer';
    font-size: 1.5vw;
    line-height: 1.5vw;
}

.test-job{
    margin-top: 1vw;
    font-family: "Poppins";
    font-weight: 500;
    line-height: 1vw;
    font-size: 1vw;
}
.test-comp{
    font-family: "Poppins";
    font-weight: 700;
    line-height: 1vw;
    font-size: 1vw;
}
.test-para{
    margin-top: 1vw;
    font-family: "Poppins";
    text-align: justify;
    font-size: 1vw;
}
.test-btn{
    width: 100%;
    height: 8vh;
    background-color: #3f4040;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1vw;
}
.center .test-btn{
    background-color: #000000;
}
.play-btn{
    width: 6vh;
    height: 6vh;
    border: 1px solid white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
}
.center .play-btn{
    background-color: #707070;
}
.play-tri{
    width: 3vh;
    height: 4vh;
    clip-path: polygon(0 0, 0 100%, 100% 50%);
    background-color: white;
    margin-left: 1vh;
}
.center .play-tri{
    background-color: #222222;
}
.play-text{
    color: white;
    font-family: "meb";
    font-size: 1.7vw;
}
.center .play-text{
    color: #707070;
}

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 10000;
    backdrop-filter: blur(3px);
    transition: all 0.5s ease;
  }
  
  .modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
  }
  
  .close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 20px;
    cursor: pointer;
  }
#prevBtn,#nextBtn{
    font-family: "Nanum Gothic";
    color: white;
    background: #4e4e4e86;
    border: none;
    font-size: 3vw;
    border-radius: 5%;
    position: absolute;
   width: 3vw;
   height: 5vw;
   display: flex;
   align-items: center;
   justify-content: center;
   backdrop-filter: blur(3px);
 
}
#prevBtn{
    top: 40%;
    left: 2%;
}
#nextBtn{
    top: 40%;
    right: 2%;
    padding-left: auto;
}
  /* gallery */
  .gallery{
    width: 100%;
    height: 45vw;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
.video_gallery{
    width: 100%;
    height: 45vw;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .gal-cont{
    position: relative;
    width: 90%;
  }
  .gal-cont .item{
   height: 18vw;
   background-color: #04050351;
  }

  /* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    overflow: auto;
}

.modal-content {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 90%;
}

.close {
    color: #fff;
    position: absolute;
    top: 15px;
    right: 35px;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

  /* footer */
.footer{
    width: 100%;
    height: 12vw;
    background-color:#191919;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-top: 2px solid #a2a2a2;
  }
  .footer-cont{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .footer-box1,.footer-box3{
    width: 20%;
    height: 80%;
  }
  .footer-box2{
  width: 60%;
  height: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2vw;
  }
  .mail-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2vw;
    cursor: pointer;
  }
  .footer-logo{
    width: 5vw;
  }
  .mail-heading{
    color: #c9c9c9;
    font-family: "agr";
    text-align: center;
  }
  .mail{
    color: #ffffff;
    text-decoration: none;
    font-family: "agm";
  }
  .mail-box:hover .mail{
    color: white;
  }
  .mail-box:hover .mail-heading{
    color: white;
  }
  .footer-box3{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1vw;
  }
  .footerl1{
    width: 5vw;
    margin-top: 2vw;
  }
  .footer-box1{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1vw;
  }
  .social-box{
    color: #040503;
    text-decoration: none;
    width: 2vw;
    height: 2vw;
    display: flex;
    align-items: center;
    justify-content: center;
   background-color: white;
   border-radius: 50%;
   transition: all 0.5s ease;
  }
  .social-box:hover{
    transform: translateY(-0.5vw);
    background-color: #888888;
  }
  .foot-line{
    font-family: "agr";
    color:#c9c9c9;
    font-size: 1vw;
    padding-bottom: 1vw;
  }
  .foot-line a{
    text-decoration: none;
    color: #ffffff;
    font-family: "agbold";
  }
  

  @media screen and (max-width: 450px){
    .navbar{
        width: 100vw;
        height: 100vh;
        backdrop-filter: blur(8px);
        align-items: center;
        justify-content: center;
        left: -100vw;
        transition: all 0.5s ease;
       }
       .mob-top{
        width: 100%;
        position: fixed;
        height: 15vw;
        background-color: #000000c5;
        z-index: 100;
        transition: all 0.5s ease;
       }
       .logo{
        display: none;
       }
       .logo-mob{
        display: block;
        position: fixed;
        width: 60vw;
        left: 3vw;
        top: 3vw;
        z-index: 1000;
       }
       .navbar ul{
        padding: 0;
        margin: 0;
        flex-direction: column;
        width: 100%;
       }
       .navbar ul li{
        margin: 4vw 0vw;
        font-size: 3vw;
       }
       #nav-toggler{
        display: block;
        position: fixed;
        font-size: 7vw;
        appearance: none;
        color: white;
        right: 3vw;
        top: 2vw;
        transition: all 0.5s ease;
        z-index: 1000;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
       }
       #nav-toggler:checked {
        transform:rotate(360deg);
      }
      #nav-toggler:checked ~ .navbar{
        left: 0;
      }
      #nav-toggler:checked ~ .mob-top{
        opacity: 0;
      }
    
      #nav-toggler:checked::before {
        content: "\f00d";
        color: rgb(250, 250, 250);
        transition: 0.2s linear 0.2s;
      }
      .cov-btn {
        font-size: 6vw;
        width: 11vw;
        border-radius: 2.5vw;
        padding: 0.9vw 0vw;
        transition: all 0.5s ease;
    }
    .cov-btns{
        gap: 1vw;
    }
    .cover-cont{
        gap: 7vw;
    }
    .subs-btn {
        margin-top: 5vw;
        font-size: 6vw;
        padding: 0.9vw 3vw;
        border-radius: 4vw;
    }
    /* overview */
    .main-logo {
        width: 62vw;
    }
    .overview{
        height: auto;
        flex-direction: column;
    }
    .title {
        font-size: 7vw;
        margin: 4vw;
    }
    .over-left{
        width: 100%;
        height: auto;
    }
    .over-para {
        margin: 0vw 3vw;
      line-height: 5vw;
        font-size: 3vw;
    }
    .over-right{
        width: 100%;
        height: auto;
    }
    .over-im-box{
        width: 90vw;
        height: 110vw;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /* speakers */
    .speakers{
        height: auto;
      padding-top: 10vw;
    }
    .speakers .owl-carousel .item {
        width: 100%;
        height: 155vw;
    }
    .spk-img-box{
        transform: translate(0vw,-9vw);
    }
    .spk-cont{
        height: 117vw;
    }
    .spk-fname {
        font-size: 8vw;
        line-height: 8vw;
    }
    .spk-lname {
        font-size: 6.5vw;
        line-height: 6.5vw;
    }
    .spk-job {
        font-size: 3vw;
        line-height: 3vw;
        margin: 2.5vw 0vw;
    }
    .spk-comp {
        font-size: 3vw;
        line-height: 3vw;
        margin-bottom: 8vw;
        width: 57%;
    }
    /* events */
    .events{
        position: relative;
    }
    .date sup {
        font-size: 9.5vw;
        transform: translateY(-8vw);
    }
    .events button{
        display: block;
        width: 20vw;
        height: 20vw;
        font-family: "poppins";
        font-size: 14vw;
        border-radius: 50%;
        border: none;
        position: absolute;
        z-index: 50;
        right: 3vw;
        bottom: 3vw;
        transform: rotate(90deg);
        background-color: #4b4b4ba8;
        color: white;
        -webkit-animation: heartbeat 1.5s ease-in-out infinite both;
	        animation: heartbeat 1.5s ease-in-out infinite both;
    }
    /* ----------------------------------------------
 * Generated by Animista on 2024-1-5 22:51:2
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation heartbeat
 * ----------------------------------------
 */
@-webkit-keyframes heartbeat {
    from {
      -webkit-transform: rotate(90deg) scale(1);
              transform: rotate(90deg) scale(1);
      -webkit-transform-origin: center center;
              transform-origin: center center;
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    10% {
      -webkit-transform: rotate(90deg) scale(0.91);
              transform: rotate(90deg) scale(0.91);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    17% {
      -webkit-transform: rotate(90deg) scale(0.98);
              transform: rotate(90deg) scale(0.98);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    33% {
      -webkit-transform: rotate(90deg) scale(0.87);
              transform: rotate(90deg) scale(0.87);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    45% {
      -webkit-transform: rotate(90deg) scale(1);
              transform: rotate(90deg) scale(1);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
  }
  @keyframes heartbeat {
    from {
      -webkit-transform: rotate(90deg) scale(1);
              transform: rotate(90deg) scale(1);
      -webkit-transform-origin: center center;
              transform-origin: center center;
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    10% {
      -webkit-transform: rotate(90deg) scale(0.91);
              transform: rotate(90deg) scale(0.91);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    17% {
      -webkit-transform: rotate(90deg) scale(0.98);
              transform: rotate(90deg) scale(0.98);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    33% {
      -webkit-transform: rotate(90deg) scale(0.87);
              transform: rotate(90deg) scale(0.87);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    45% {
      -webkit-transform: rotate(90deg) scale(1);
              transform: rotate(90deg) scale(1);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
  }
  
    .eve-logo{
        position: static;
        width: 90vw;
    }
    .ev-lb{
        position: static;
    }
    .even-con{
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8vw;
    }
    .date {
        font-size: 30vw;
        line-height: 20vw;
    }
    .place{
        font-size: 5vw;
    }
    .date span {
        font-size: 5.2vw;
        line-height: 4vw;
    }
    .ind .place {
        font-size: 6.6vw;
    }
    .country {
        font-size: 17.8vw;
        line-height: 15vw;
    }
    .ind .country {
        font-size: 16.3vw;
    }
    .bahrain .country{
        line-height: 17vw;
    }
    .evsq{
        width: 30vw;
    }
    /* sponsors */
    .sponsors{
        height: auto;
        padding: 4vw 0vw;
    }
    .sponsors .item{
        height: 43vw;
    }
    /* testimonial */
    .test-im {
    width: 35vw;
    height: 35vw;
    top: 13%;
    }
    .test-in-box{
        width: 31vw;
        height: 31vw;
    }
    .test-fname{
        font-size: 9vw;
        line-height: 9vw;
    }
    .test-lname {
        font-size: 5.5vw;
        line-height: 5.5vw;
    }
    .test-job {
        margin-top: 3vw;
        line-height: 3vw;
        font-size: 3vw;
    }
    .test-comp {
        line-height: 3vw;
        font-size: 3vw;
    }
    .test-para {
        margin-top: 3vw;
        font-size: 3vw;
    }
    .play-text{
        font-size: 5.7vw;
    }
    /* gallery */
    .gallery{
        height: 125vw;
    }
      .video_gallery{
        height: 125vw;
    }
    .gal-cont .item {
        height: 46vw;
    }
    #prevBtn, #nextBtn {
        font-size: 10vw;
        border-radius: 10%;
        width: 11vw;
        height: 19vw;
        z-index: 1000;
        backdrop-filter: blur(3px);
        top: 45%;
    }
    /* footer */
.footer {
    height: auto;
    margin-top: 10vw;
  }
  .footer-cont{
    flex-direction: column;
  }
  .footer-box1{
    display: flex;
    flex-direction: column;
  }

   .footer-box3 {
    width: 100%;
    height: 30vw;
  }
  .footer-box1{
    width: 100%;
    height: 50vw;
    gap: 5vw;
  }
  .footerl1{
    width: 20vw;
  }
  .footer-box2 {
    width: 100%;
    height: auto;
    gap: 6vw;
    flex-direction: column;
  }
  .footer-box3 {
    gap: 4vw;
  }
  .social-box {
    width: 10vw;
    height: 10vw;
  }
  .foot-line {
    font-size: 4vw;
    padding-bottom: 4vw;
  }
  .footer-logo {
    width: 23vw;
  }
  }

  @media screen and (min-width: 760px) and (max-width: 1024px){
    .navbar{
        width: 100vw;
        height: 100vh;
        backdrop-filter: blur(8px);
        align-items: center;
        justify-content: center;
        left: -100vw;
        transition: all 0.5s ease;
       }
       .mob-top{
        width: 100%;
        position: fixed;
        height: 12vw;
        background-color: #000000c5;
        z-index: 100;
        transition: all 0.5s ease;
       }
       .logo{
        display: none;
       }
       .logo-mob{
        display: block;
        position: fixed;
        width: 9vw;
        left: 3vw;
        top: 2vw;
        z-index: 1000;
       }
       .navbar ul{
        padding: 0;
        margin: 0;
        flex-direction: column;
        width: 100%;
       }
       .navbar ul li{
        margin: 4vw 0vw;
        font-size: 3vw;
       }
       #nav-toggler{
        display: block;
        position: fixed;
        font-size: 7vw;
        appearance: none;
        color: white;
        right: 3vw;
        top: 2vw;
        transition: all 0.5s ease;
        z-index: 1000;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
       }
       #nav-toggler:checked {
        transform:rotate(360deg);
      }
      #nav-toggler:checked ~ .navbar{
        left: 0;
      }
      #nav-toggler:checked ~ .mob-top{
        opacity: 0;
      }
    
      #nav-toggler:checked::before {
        content: "\f00d";
        color: rgb(250, 250, 250);
        transition: 0.2s linear 0.2s;
      }
/* cover */
.cov-btn {
    font-size: 4vw;
    width: 16vw;
    border-radius: 3.5vw;
    padding: 0.9vw 0vw;

}
.cov-btns{
    gap: 3vw;
}
.cover-cont{
    gap: 7vw;
}
.subs-btn {
    margin-top: 5vw;
    font-size: 3.5vw;
    padding: 0.9vw 3vw;
    border-radius: 4vw;
}
      
    /* overview */
    .main-logo {
        width: 50vw;
    }
    .overview{
        height: auto;
        flex-direction: column;
    }
    .title {
        font-size: 8vw;
        margin: 3vw;
    }
    .over-left{
        width: 100%;
        height: auto;
    }
    .over-para {
        margin: 0vw 3vw;
      line-height: 5vw;
        font-size: 3vw;
    }
    .over-right{
        width: 100%;
        height: auto;
    }
    .over-im-box{
        width: 90vw;
        height: 110vw;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /* speakers */
    .speakers{
        height: auto;
      padding-top: 10vw;
    }
    .speakers .owl-carousel .item {
        width: 100%;
        height: 155vw;
    }
    .spk-img-box{
        transform: translate(0vw,-9vw);
    }
    .spk-cont{
        height: 117vw;
    }
    .spk-fname {
        font-size: 8vw;
        line-height: 8vw;
    }
    .spk-lname {
        font-size: 6.5vw;
        line-height: 6.5vw;
    }
    .spk-job {
        font-size: 3vw;
        line-height: 3vw;
        margin: 2.5vw 0vw;
    }
    .spk-comp {
        font-size: 3vw;
        line-height: 3vw;
        margin-bottom: 8vw;
        width: 57%;
    }
    /* events */
    .events{
        position: relative;
    }
    .events button{
        display: block;
        width: 15vw;
        height: 15vw;
        font-family: "poppins";
        font-size: 9vw;
        border-radius: 50%;
        border: none;
        position: absolute;
        z-index: 50;
        right: 3vw;
        bottom: 3vw;
        transform: rotate(90deg);
        background-color: #4b4b4ba8;
        color: white;
        -webkit-animation: heartbeat 1.5s ease-in-out infinite both;
	        animation: heartbeat 1.5s ease-in-out infinite both;
    }
    /* ----------------------------------------------
 * Generated by Animista on 2024-1-5 22:51:2
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation heartbeat
 * ----------------------------------------
 */
@-webkit-keyframes heartbeat {
    from {
      -webkit-transform: rotate(90deg) scale(1);
              transform: rotate(90deg) scale(1);
      -webkit-transform-origin: center center;
              transform-origin: center center;
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    10% {
      -webkit-transform: rotate(90deg) scale(0.91);
              transform: rotate(90deg) scale(0.91);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    17% {
      -webkit-transform: rotate(90deg) scale(0.98);
              transform: rotate(90deg) scale(0.98);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    33% {
      -webkit-transform: rotate(90deg) scale(0.87);
              transform: rotate(90deg) scale(0.87);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    45% {
      -webkit-transform: rotate(90deg) scale(1);
              transform: rotate(90deg) scale(1);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
  }
  @keyframes heartbeat {
    from {
      -webkit-transform: rotate(90deg) scale(1);
              transform: rotate(90deg) scale(1);
      -webkit-transform-origin: center center;
              transform-origin: center center;
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    10% {
      -webkit-transform: rotate(90deg) scale(0.91);
              transform: rotate(90deg) scale(0.91);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    17% {
      -webkit-transform: rotate(90deg) scale(0.98);
              transform: rotate(90deg) scale(0.98);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    33% {
      -webkit-transform: rotate(90deg) scale(0.87);
              transform: rotate(90deg) scale(0.87);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    45% {
      -webkit-transform: rotate(90deg) scale(1);
              transform: rotate(90deg) scale(1);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
  }
    .eve-logo{
        position: static;
        width: 60vw;
    }
    .ev-lb{
        position: static;
    }
    .evh-btn{
        font-size: 3vw;
    }
    .even-con{
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8vw;
    }
    .date {
        font-size: 20vw;
        line-height: 10vw;
    }
    .date sup {
        font-size: 7.5vw;
        transform: translateY(-7vw);
    }
    .place{
        font-size: 3.5vw;
    }
    .date span {
        font-size: 5.2vw;
        line-height: 4vw;
    }
    .ind .place {
        font-size: 4.6vw;
    }
    .country {
        font-size: 12.8vw;
        line-height: 11vw;
    }
    .ind .country {
        font-size: 11.3vw;
    }
    .bahrain .country{
        line-height: 11vw;
    }
    .evsq{
        width: 25vw;
    }
    /* sponsors */
    .sponsors{
        height: auto;
        padding: 4vw 0vw;
    }
    .sponsors .item{
        height: 23vw;
    }
    /* testimonial */
    .testimonial{
        height: 120vh;
    }
    .testimonial .test-carousel .item {
        height: 115vh;
    }
    .test-con-box {
        width: 80%;
        height: 70vh;
    }
    .test-description {
        height: 40vh;
    }
    .test-im {
    width: 35vw;
    height: 35vw;
    top: 13%;
    }
    .test-in-box{
        width: 31vw;
        height: 31vw;
    }
    .test-fname{
        font-size: 9vw;
        line-height: 9vw;
    }
    .test-lname {
        font-size: 5.5vw;
        line-height: 5.5vw;
    }
    .test-job {
        margin-top: 3vw;
        line-height: 3vw;
        font-size: 3vw;
    }
    .test-comp {
        line-height: 3vw;
        font-size: 3vw;
    }
    .test-para {
        margin-top: 3vw;
        font-size: 3vw;
    }
    .play-text{
        font-size: 5.7vw;
    }
    /* gallery */
    .gallery{
        height: 60vw;
    }
    .gal-cont .item{
        height: 27vw;
    }
    .gal-box{
        height: auto;
    }
    #prevBtn, #nextBtn {
        font-size: 7vw;
        border-radius: 5%;
        width: 8vw;
        font-weight: 600;
        height: 13vw;
        backdrop-filter: blur(3px);
        z-index: 1000;
    }
    /* footer */
.footer {
    height: auto;
    margin-top: 9vw;
  }
  .footer-cont{
    flex-direction: column;
  }
  .footer-box1, .footer-box3 {
    width: 100%;
    height: auto;
    margin: 4vw 0vw;
  }
  .footer-box1{
    gap: 3vw;
  }
  .footerl1{
    width: 20vw;
  }
  .footer-box2 {
    width: 100%;
    height: auto;
    gap: 6vw;
    flex-direction: column;
  }
  .footer-box3 {
    gap: 4vw;
  }
  .social-box {
    width: 6vw;
    height: 6vw;
  }
  .foot-line {
    font-size: 4vw;
    padding-bottom: 4vw;
  }
  .footer-logo {
    width: 20vw;
  }
  }

.row {
      display: flex;
      flex-wrap: wrap;
      gap: 16px; /* Space between columns */
      justify-content: center; /* Center the columns */
    }
.partners-sponsors {
    text-align: center;
    padding: 40px;
}

.partners-sponsors h1 {
    margin-bottom: 20px;
    font-size: 2rem;
    color: #fff;
}

.grid-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
}

.grid-item {
    position: relative;
    width: 230px;
    height: 100px;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /*background-color: #000;*/ /* Default black background */
    transition: background-color 0.5s ease; /* Smooth background color transition */
}

.grid-item:hover {
    background-color: #fff; /* White background on hover */
}

.hover-effect-item {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0%) contrast(0%) saturate(42%) blur(0) hue-rotate(0deg); /* Apply grayscale by default */
    transition: transform 0.5s ease, filter 0.5s ease; /* Smooth transition */
    transform: translateY(0); /* Initial position */
}

.grid-item:hover .hover-effect-item {
    filter: grayscale(0); /* Remove grayscale on hover */
    transform: translateY(0%); /* Slide up slightly on hover */
}

/* Responsive design */
@media (max-width: 768px) {
    .grid-item {
        width: 120px;
        height: 120px;
    }
}

@media (max-width: 480px) {
    .grid-item {
        width: 100px;
        height: 100px;
    }
}
@media (max-width: 600px) { /* Adjust the width as needed */
    .cov-btns {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .cov-btn {
        flex: 1 1 45%; /* Each button takes around 45% width, adjusting for margins */
        margin: 5px;
        text-align: center;
    }
}
.gallery-container {
    width: 90%;
    margin: 0 auto;
    text-align: center;
  }

  .gallery-title {
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    font-size: 3vw;
    margin-bottom: 2vw;
  }

  .gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* ✅ 3 videos per row */
    gap: 2vw;
  }

  .video-item {
    background: #111;
    border-radius: 1vw;
    overflow: hidden;
    box-shadow: 0 10px 25px rgb(175 175 175 / 40%);
    transition: transform 0.3s ease;
  }

  .video-item:hover {
    transform: scale(1.02);
  }

  .video-item iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: none;
    display: block;
  }

  .video-caption {
    background: #ffffff;
    color: #060606;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    font-size: 1.2vw;
    padding: 1vw 0;
    text-transform: uppercase;
  }

  /* Responsive: 2 columns on tablet */
  @media screen and (max-width: 1024px) {
    .gallery-grid {
      grid-template-columns: repeat(2, 1fr);
    }
    .gallery-title {
      font-size: 5vw;
    }
    .video-caption {
      font-size: 2vw;
    }
  }

  /* Responsive: 1 column on mobile */
  @media screen and (max-width: 600px) {
    .gallery-grid {
      grid-template-columns: 1fr;
    }
    .video-caption {
      font-size: 4vw;
    }
  }