@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");
}
body{
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    /* background: linear-gradient(to right,#00cea1,#0280e5); */
    scroll-behavior: smooth;
}
/* navbar */
.navbar{
    display: flex;
    width: 100%;
    height: 5vw;
    position: fixed;
    align-items: center;
    justify-content: space-between;
    z-index: 100;
    transition: all 0.5s ease;
}
.navbar ul{
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 10%;
}
.logo{
    width: 6vw;
    padding-left: 3vw;
}
.navbar ul li a{
    text-decoration: none;
    color: white;
    font-family: "eurostile";
}
#nav-toggler{
    display: none;
}
.logo-mob{
    display: none;
}
.nav-active{
    background-color: #2fa5e1;
}

.speakers {
    padding-top: 10vh;
    text-align: center;
    width: 100%;
    height: auto;
    background-color: #191919;
}

.speakers-heading {
    color: white;
    font-family: "agbold";
    font-size: 3vw;
    line-height: 8vw;
    text-transform: uppercase;
    margin:0;
}

.speakers-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    height: calc(100% - 80px);
}

.speaker {
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.speaker img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(100%);
    transition: transform 0.3s ease, filter 0.3s ease;
    will-change: transform, filter;
}

.speaker img:hover {
    transform: scale(1.1);
    filter: grayscale(0%);
}

.speakers-info {
    position: absolute;
    bottom: 0px;
    width: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
    color: white;
    text-align: center;
    height: 30vh;
    display: flex;
    align-items: center;
    justify-content: end;
    flex-direction: column;
}

.speakers-first-name {
    font-family: "agb";
    font-size: 1.5vw;
    color: #2fa5e1;
    text-transform: uppercase;
    padding: 0.5vw 1vw;
}

.speakers-job-title {
    font-family: "agr";
    font-size: 1vw;
    padding: 0 0.75vw;
}

.speakers-company-name {
    font-family: "agxb";
    font-size: 1vw;
    padding: 1vw 0.75vw;
}

.speakers-button {
    background: none;
    color: white;
    border: none;
    padding: 40px 40px;
    font-size: 1.5vw;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: background-color 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.speakers-button::before,
.speakers-button::after {
    content: '\25C0';
    position: absolute;
    color: white;
    transition: transform 0.3s ease, color 0.3s ease;
}

.speakers-button::after {
    content: '\25B6';
    right: 10px;
}

.speakers-button::before {
    left: 10px;
}

.speakers-button:hover {
    transform: scale(1.1);
}

.speakers-button:hover::before {
    transform: translateX(-10px);
    color: #2fa5e1;
}

.speakers-button:hover::after {
    transform: translateX(10px);
    color: #2fa5e1;
}


/* footer */
.footer{
  width: 100%;
  height: 12vw;
  background-color:#191919;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-top: 2px solid #55cbf9;
}
.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: 8vw;
}
.mail-heading{
  color: #2fa5e1;
  font-family: "agr";
  text-align: center;
}
.mail{
  color: #55cbf9;
  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;
}
.footer-box1{
  display: flex;
  align-items: center;
  justify-content: center;
}
.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: #2fa5e1;
}
.foot-line{
  font-family: "agr";
  color:#2fa5e1;
  font-size: 1vw;
  padding-bottom: 1vw;
}
.foot-line a{
  text-decoration: none;
  color: #55cbf9;
  font-family: "agbold";
}


  .mob-top{
    display: none;
  }
    
@media screen and (max-width: 450px){
        
  body,html{
    overflow-x: hidden !important;
  }
  
   .navbar{
    width: 100vw;
    height: 100vh;
    background-color: rgba(104, 104, 104, 0.712);
    backdrop-filter: blur(8px);
    align-items: center;
    justify-content: center;
    left: -100vw;
   }
   
   .logo{
    display: none;
   }
   
   .logo-mob{
    display: block;
    position: fixed;
    width: 18vw;
    top:3vw;
    left: 3vw;
    z-index: 1000000000000000;
    }
    
   .navbar ul{
    padding: 0;
    margin: 0;
    flex-direction: column;
    width: 100%;
   }
   
   .navbar ul li{
    margin: 4vw 0vw;
   }
   
   #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:translate(-41vw,65vw);
  }
  
  #nav-toggler:checked ~ .navbar{
    left: 0;
  }

  #nav-toggler:checked::before {
    content: "\f00d";
    color: rgb(250, 250, 250);
    transition: 0.2s linear 0.2s;
  }
  
  #nav-toggler:checked::after{
    content: "";
    width: 10vw;
    height: 3px;
    background-color: #00cea1;
    display: block;
    margin-top: 1vw;
  }
  
  .speakers {
    padding: 7vh 0;
  }
  
  .speakers-heading {
    font-size: 6vw;
    line-height: 12vw;
  }
  
  .speakers-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(2, 1fr);
    }

    .speakers-info {
    height: 20vh;
    }

    .speakers-first-name {
    font-size: 7vw;
    padding: 0.5vw 1vw;
    }

    .speakers-job-title {
    font-size: 4.5vw;
    padding: 0 1vw;
    }

    .speakers-company-name {
    font-size: 4.5vw;
    padding: 0 1vw;
    }
    
    .speakers-button {
    font-size: 5vw;
    }
  
  /* footer */
.footer {
  height: auto;
}

.footer-cont{
  flex-direction: column;
}

.footer-box1, .footer-box3 {
  width: 100%;
  height: 30vw;
}

.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: 768px) and (max-width: 1024px){
  body,html{
    overflow-x: hidden !important;
  }
   .navbar{
    width: 100vw;
    height: 100vh;
    background-color: rgba(104, 104, 104, 0.712);
    backdrop-filter: blur(8px);
    align-items: center;
    justify-content: center;
    left: -100vw;
   }
   .logo{
    display: none;
   }
   .logo-mob{
    display: block;
    position: fixed;
    width: 18vw;
    top:3vw;
    left: 3vw;
    z-index: 1000000000000000;
    }
   .navbar ul{
    padding: 0;
    margin: 0;
    flex-direction: column;
    width: 100%;
   }
   .navbar ul li{
    margin: 4vw 0vw;
   }
   .navbar ul li a{
    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:translate(-41vw,31vw);
  }
  #nav-toggler:checked ~ .navbar{
    left: 0;
  }

  #nav-toggler:checked::before {
    content: "\f00d";
    color: rgb(250, 250, 250);
    transition: 0.2s linear 0.2s;
  }
  #nav-toggler:checked::after{
    content: "";
    width: 10vw;
    height: 3px;
    background-color: #00cea1;
    display: block;
    margin-top: 1vw;
  }
  
  .speakers {
    padding: 7vh 0;
  }
  
  .speakers-heading {
    font-size: 6vw;
    line-height: 12vw;
  }
  
  .speakers-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(2, 1fr);
    }

    .speakers-info {
    height: 20vh;
    }

    .speakers-first-name {
    font-size: 7vw;
    padding: 0.5vw 1vw;
    }

    .speakers-job-title {
    font-size: 4.5vw;
    padding: 0 1vw;
    }

    .speakers-company-name {
    font-size: 4.5vw;
    padding: 0 1vw;
    }
    
    .speakers-button {
    font-size: 3.5vw;
}

  /* footer */
.footer {
  height: auto;
}
.footer-cont{
  flex-direction: column;
}
.footer-box1, .footer-box3 {
  width: 100%;
  height: auto;
  margin: 4vw 0vw;
}
.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: 28vw;
}
}