*{
  box-sizing: border-box;
}

body{
    overflow-x: hidden;
}

.main{
    width: 100%;
    height: 600px;
    padding-top: 120px;
    overflow: hidden;
    position: relative;

}
.slider img{
width: 50%;
height: 700px;
object-fit: cover ;

}
.slider{
    display: flex;
    width: 400%;
    transform: translateX(-99.4vw);
}
.left, .right{
    width: 50px;
    height: 50px;
    position: absolute;
    top: 300px;
    left: 50px;
    filter: invert(1);
    cursor: pointer;
    rotate: 180deg;
}
.left img , .right img{
    height: 50px;
    width: 50px;
    object-fit: cover; 
       
}
.right{
 left: 95%;
rotate: 0deg;
}
.slider_bar{
    position:absolute;
    width: 200px;
    background:rgba(0, 0, 0, 0.851);
    height: 40px;
    top: 600px;
    left: 500px;
    border-radius: 50px;
    display: flex;
justify-content: space-around;
align-items: center;

}


.intro{
    width: 100vw;
min-height: 25vh;
height: auto;
 }
 .intro h3{
    font-family: 'MyFontRegular';
    font-size: clamp(24px, 3.5vw, 50px);
    text-align: center;
}
.intro_box{
width: 100vw;
min-height: 10vh;
height: auto;
display: flex;
align-items: center;
justify-content: center;
}
.text_box{
width: 55vw;
min-height: 10vh;
height: auto;
font-size: 20px;
text-align: left;
font-family: 'MyFontRegular'
}
.image_box{
width: 35vw;
height: 40vh;
background-color: rgb(214, 6, 120);
display:flex ;

}
.image_box img{
    width: 50vw;
    height: 40vh;
    object-fit: cover;
}


.wtf{
    width: 50px;
    height: 50px;
    font-size: 35px;
    background-color: #25d366;
    color: white;
    position: fixed;     
    bottom: 20px;         
    right: 20px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;      
}


.text_box pre {
min-width: 55vw;
min-height: 10vh;
height: auto;
font-size: 20px;
text-align: left;
font-family: 'MyFontRegular';
white-space: pre-wrap;
word-wrap: break-word;
}

    .logo-slider {
      width: 100%;
      overflow: hidden;
      background: #fff;
      padding: 20px 0;
    }

    .logo-track {
      display: flex;
      align-items: center;
      gap: 60px;
      animation: scroll 20s linear infinite;
      will-change: transform;
    }

    .logo-track img {
      width: 150px;
      height: 150px;
      object-fit: contain;
      flex-shrink: 0;      
      max-width: 100%;
      filter: grayscale(0%);
      transition: 0.5s ease;
    }

    .logo-track img:hover {
      filter: grayscale(0%);
      transform: scale(1.45);
    }

  
    @keyframes scroll {
      from {
        transform: translateX(0);
      }
      to {
        transform: translateX(-50%);
      }
    }

@media (max-width:1440px) {
    .text_box{
width: 85vw;}
.intro{
margin-top: 5%;
}
}

@media (max-width:1350px) {
.main{
    display: none;
}
.first_intro{
    margin-top: 10%;
}
}
@media (max-width:755px) {
.first_intro{
    margin-top: 20%;
}
.logo-slider{
    display: none;
}
.by{
    display: none;
}

}


@media (max-width:379px) {
.mm{
    margin-top: 50%;
}
}