.slider{
    position: absolute;
    top:100px;
    width: 100%;
}
.overlay-detail{
    padding-top: 40vh;
    margin: auto;
    padding-left:10%;
    padding-right:10%;
    text-align: center;
    color: white;
    
}
#slider1,#slider2,#slider3{
    background-position: top !important;
}
#slidertext1{
    display: block;
    position: relative;
    animation-name:text-animation-1;
    animation-duration: 5s;
}
#slidertext1 div span{
    padding-left:40px;
    padding-right:30px;
    font-size:30px;
    margin-bottom: 40px;
    /* background-color: red; */
}
#slidertext1 div i{
    /* padding-left:30px; */
    font-size:30px;
    padding-top:10px;
    /* padding-right:6px; */
    /* background-color: red; */
}
#slidertext1 h2{
    padding-top:20px;
    display: block;
    font-size: 80px;
    /* background-color: yellow; */
}
@media(max-width:1000px){
    .overlay-detail{
        padding-top: 30vh;        
    }
    
    #slidertext1 div span{
        padding-left:30px;
        padding-right:20px;
        font-size:25px;
    }
    #slidertext1 div i{
        font-size:25px;
        padding-top:10px;
    }
    #slidertext1 h2{
        padding-top:20px;
        display: block;
        font-size:35px;
        padding-right: 10px;
    }
}
@media(max-width:550px){
    #slidertext1 div span{
        text-align: left;
        padding-left:40%;
        font-size:20px;
        display: block;
        padding-top: 0px;
        padding-bottom: 0px;
        margin-bottom: 10px;
    }
    #slidertext1 div i{
        text-align: left;
        font-size:19px !important;
        padding-top:8px;
        left:calc(40% - 20px);
    }
}
@media(max-width:500px){
    .overlay-detail{
        padding-top: 20vh;        
    }
    #slidertext1 div {
        /* background-color: yellow; */
        position: relative;
        /* text-align: center; */
        margin: auto;
    }
    
    
    #slidertext1 h2{
        padding-top:20px;
        display: block;
        /* font-size:90px; */
        padding-right: 10px;
    }
}
#slidertext2{
    display:none;
    animation-name:text-animation-2;
    animation-duration: 5s;
    position: relative;
    padding-top: 0px;
    text-align: left;
    padding-left:calc(50% - 400px);
}

#slidertext3{
    display:none;
    animation-name:text-animation-3;
    animation-duration: 5s;
    position: relative;
    padding-top: 50px;
    text-align: left;
    padding-left:calc(50% - 650px);
}
#slidertext2 span{
    font-size: 20px;
    margin-bottom: 20px;
    padding-bottom:100px;
    
}
#slidertext2 .line,#slidertext3 .line{
    height: 2px;
    width: 50px;
    background-color: white;
    display: block;
    margin-top: 5px;
    margin-left: 0px;

}
#slidertext2 h1,#slidertext3 h1{

    font-size: 90px;
    padding-top: 20px;
}
@media (max-width:1500px){
    #slidertext3{
        text-align: left;
        padding-left:calc(50% - 400px);
    }
    #slidertext3 h1{
        font-size: 50px;
        padding-top: 20px;
    }
    
}
@media (max-width:1100px){
    #slidertext2{
        text-align: left;
        padding-left:calc(50% - 240px);
    }
    #slidertext3{
        text-align: left;
        padding-left:calc(50% - 240px);
    }
    #slidertext2 h1,#slidertext3 h1{
        font-size: 50px;
        padding-top: 20px;
    }
}
@media(max-width:600px){

    #slidertext2{
        /* background-color: red; */
        margin-top: 10%;
        padding-left:calc(50% - 140px);
    }
    #slidertext3{
        margin-top:1%;
        padding-left:calc(50% - 160px);
    }
    #slidertext2 span{
        font-size: 17px;
    }
    #slidertext2 .line,#slidertext3 .line{
        height: 1px;
        width: 40px;
        margin-top: 1px;
        margin-left: 3px;
    
    }
    #slidertext2 h1,#slidertext3 h1{
        font-size: 35px;
        padding-top: 10px;
    }
}
@media(max-width:500px){

    #slidertext2 ,#slidertext3{
        /* background-color: red; */
        margin-top: 10%;
        padding-left:0px;
        text-align: center;
    }
    #slidertext2 span{
        font-size: 14px;
    }
    #slidertext2 .line,#slidertext3 .line{
        display: none;
    }
    #slidertext2 h1,#slidertext3 h1{
        font-size: 25px;
        padding-top: 10px;
    }
    #slidertext1 h2{
        font-size: 25px;
        padding-top: 10px;
    }
}
.text-animation-1{
    animation-name: text-animation-1;
    animation-duration: 3s;
    animation-delay: 1s;
}
.text-animation-2{
    animation-name: text-animation-2;
    animation-duration: 3s;
    animation-delay: 1s;
}
.text-animation-3{
    animation-name: text-animation-3;
    animation-duration: 3s;
    animation-delay: 1s;
}
@keyframes text-animation-1{
    0%{opacity: 0;top:-20vh}
    100%{opacity:1;top:0px}
}
@keyframes text-animation-2{
    0%{opacity: 0;left:-20%;}
    100%{opacity:1;left:0px}
}
@keyframes text-animation-3{
    0%{opacity: 0;left:20%}
    100%{opacity:1;left:0px}
}
.slider img{
    display: none;
    width: 100%;
    /* width: 100vw; */
    height: 100vh;
    object-fit: cover;
    transition:display 1s ease-in-out;
    /* position: absolute; */
}
#slider1{
    display: block;
}


.icon{
    width: 60px;
    height: 60px;
    position: absolute;
    border-radius: 50%;
    padding-top:4px;
    box-sizing: border-box;
    top:50%;
    box-sizing: border-box;
    border: 1px solid white;
}
.icon:hover{
    background-color: rgb(0, 49, 211);
    border: 0px;
}
.icon-next{
    padding-left:23px;
    left:calc(100% - 100px);
}
.icon-pre{
    padding-left: 17px;
    left:40px;
}
.fa{
    position: absolute;
    color: white;
    stroke-width:1 !important;
}
.dot{
    position: absolute;
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid white;
    top:96%;
    z-index: 1;
}
#dot1{
    left: calc(45% - 15px);
    background-color: white;
}
#dot2{
    left: calc(50% - 15px) ;
}
#dot3{
    left: calc(55% - 15px);
}
@media(max-width:800px){
  .icon{
    width: 40px;
    height: 40px;
    padding-top:6px;   
  }
  .icon-next{
    padding-left:17px;
    padding-top: 5px;
    left:calc(100% - 50px);
  }
  .icon-pre{
      padding-left:12px;
      left:10px;
  }
  .fa{
      font-size: 25px !important;
      position: absolute;
      color: white;
  }
  .dot{
    width: 10px;
    height: 10px;
  }
  #dot1{
    
      left: calc(45% - 10px);
      background-color: white;
  }
  #dot2{
      left: calc(50% - 10px) ;
  }
  #dot3{
      left: calc(55% - 10px);
  }
}
.img-overlay{
    position: absolute;
    height: 100vh;
    width: 100%;
    background-color: rgba(2, 0, 0, 0.4);
}