:root{
    --strip:25vh
    }
    body{margin:0;overflow-x: hidden;font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;}
    
    .vip{
      padding-top: 8vh;
        width: 12vw;
margin: auto;
display: block;
    }
    .content{
        background: linear-gradient(to top,white,black);
    }
    .logo{position: absolute;left: 50%;transform: translateX(-50%);top:calc(var(--strip) - 10vh);border-radius: 20px;border: 4px solid white;width: 30%;}
    footer{text-align: center;}
    
    h1{color: white;width: fit-content;margin: 0 auto;overflow:hidden;}
    span {
        display: inline-block; 
        min-width: 10px; 
    }
    p{padding: .5% 10% 2%;font-size: 1rem;margin: 0;text-align: justify;text-align-last: center;}
    .link-container{margin-top:3vh;}
    .link-container,.links{display: flex;overflow: hidden;}
    .links{flex-direction: column;align-items: center;width: 50%;gap: 2vh;}
    hr{height: 30vh;border: none;border-left: 3px solid black;margin: 0;}
    .links a{
    width: 60%;
    }
    .links a img{width: 80%;}
    .main{
        height: 10vh;
    }
    .slick-list,.slick-track{
        height: 100%;
    }
    .slick-track{
        overflow: hidden;
    }
        .slick-arrow{display:none !important;}
        .main{
                width: 90%;
        margin: 0 5%;
        }
    
    .item1,.item2,.item3,.item4,.item5{
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 20px;
        position: relative;
       margin:0 .1%;
    }
    .item1 a,.item2 a,.item3 a,.item4 a,.item5 a{
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      width: 50%;
    }
    .item1 img,.item2 img,.item3 img,.item4 img,.item5 img{
    width: 100%;
    }
    .item1{
        background-image: url(img/maher-1.jpg);
    }
    .item2{
        background-image: url(img/maher-2.jpg);
    }
    .item3{
        background-image: url(img/maher-3.jpg);
    }
    .item4{
        background-image: url(img/maher-4.jpg);
    }
    .item5{
        background-image: url(img/maher-5.jpg);
    }
    footer{
        width: 100%;
        position: relative;
        margin-top: 3vh;
    }
    footer a,footer a:hover{
        color: rgb(0, 0, 0);
        text-decoration: none;
    }
    .slare{width: 8%;}
    .strip {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: var(--strip);
       background: url(img/maher-banner-p.jpg) no-repeat center /cover;
       border-bottom: 3px solid white;
    }
    .button-play {
        display: inline-block;
        width: 50px;
        height:50px;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 24px;
        text-decoration: none;
        cursor: pointer;
        margin-bottom: 5vh;
    }
    
    @media only screen and (min-width: 600px) {
    .logo{width: 20%;}
    p{font-size: 1.2rem;}
    .button-play{
        width: 80px;
        height:80px;
    }
    .slare{width: 3rem;}
    hr{height: 40vh;}
    .vip{width: 8vw;}
    }
    @media only screen and (min-width: 992px) {
        :root{
            --strip:30vh
            }
        .link-container{padding:0 30%;}
        .links a{width: 50%;}
        .strip{background: url(img/maher-banner.jpg) no-repeat center /cover;}
        .logo{
            width: 8%;
        }
        p{font-size: 1.5rem;}
        .main{
            height: 20vh;
        }
        .vip{width: 3vw;}
                .item1 a,.item2 a,.item3 a,.item4 a,.item5 a{
            width: 20%;
        }
    }
    @media only screen and (min-width: 1700px) {
    
  
    }