@media (min-aspect-ratio: 16/9){ 
    .container {
        max-width: 100%;
        align-content: center;
        text-align: center;
        display: grid;
        position: relative;
    }
    .design {
        object-fit: cover;
        text-align: center;
    }
    .line1{ 
        position: absolute;
        font-size: 2.9vw;
        top: 51%;
        left: 50%;
        transform: translate(-50%, 0);
        /* left: 33%; */
      font-family: beINNormal; 
      color: #ffffff;
    }
    
    .line2{ 
        position: absolute;
        font-size: 2.7vw;
        top: 57%;
        left: 50.5%;
        transform: translate(-50%, 0);
        /* left: 46.6%; */
      font-family: NizarbeINSportThin; 
      color: #ffffff;
    }
    
    .line3{ 
        position: absolute;
        font-size: 2.4vw;
        top: 62%;
        left: 49%;
        transform: translate(-50%, 0);
        /* left: 40%; */
      font-family: beINNormal; 
      color: #db5e3b;
    }
    
    .line4{ 
        position: absolute;
        font-size: 3.5vw;
        top: 67%;
        left: 49.5%;
        transform: translate(-50%, 0);
        /* left: 41%; */
      font-family: beINNormal; 
      color: #db5e3b;
    }
    
    .line5{ 
        position: absolute;
        font-size: 2.4vw;
        top: 80%;
        left: 50.5%;
        transform: translate(-50%, 0);
        /* left: 39%; */
      font-family: AmpleSoftPro; 
      color: #ffffff;
    }
    .socialDiv{
        position: absolute;
        top: 83.5%;
        left: 50.5%;
        transform: translate(-50%, 0);
        /* left: 41%; */
    }
    .social{
        filter: invert(.9);
        width: 5%;
        height: auto;
        margin-left: 0.5%;
    }
}

/* mobile */
@media (min-aspect-ratio: 1/2){
    .container {
        max-width: 100%;
        align-content: center;
        text-align: center;
        display: grid;
        position: relative;
    }
    .design {
        object-fit: cover;
        text-align: center;
    }
    .line1{ 
        position: absolute;
        font-size: 2.9vw;
        top: 51%;
        left: 50%;
        transform: translate(-50%, 0);
        /* left: 33%; */
      font-family: beINNormal; 
      color: #ffffff;
    }
    
    .line2{ 
        position: absolute;
        font-size: 2.7vw;
        top: 57%;
        left: 50.5%;
        transform: translate(-50%, 0);
        /* left: 46.6%; */
      font-family: NizarbeINSportThin; 
      color: #ffffff;
    }
    
    .line3{ 
        position: absolute;
        font-size: 2.4vw;
        top: 62%;
        left: 49%;
        transform: translate(-50%, 0);
        /* left: 40%; */
      font-family: beINNormal; 
      color: #db5e3b;
    }
    
    .line4{ 
        position: absolute;
        font-size: 3.5vw;
        top: 67%;
        left: 49.5%;
        transform: translate(-50%, 0);
        /* left: 41%; */
      font-family: beINNormal; 
      color: #db5e3b;
    }
    
    .line5{ 
        position: absolute;
        font-size: 2.4vw;
        top: 80%;
        left: 50.5%;
        transform: translate(-50%, 0);
        /* left: 39%; */
      font-family: AmpleSoftPro; 
      color: #ffffff;
    }
    .socialDiv{
        position: absolute;
        top: 83.5%;
        left: 50.5%;
        transform: translate(-50%, 0);
        /* left: 41%; */
    }
    .social{
        filter: invert(.9);
        width: 5%;
        height: auto;
        margin-left: 0.5%;
    }
}


body{
    background-color: #001d26;
    margin: 0;
    padding: 0;
}
/* * {
    margin: 0;
    padding: 0;
} */
img {
    width: 100%;
    height: auto;
  }
 


@font-face {
    font-family: "beINNormal";
    src: url("../Fonts/beINNormal.ttf");
}
@font-face {
    font-family: "NizarbeINSportThin";
    src: url("../Fonts/NizarbeINSportThin.ttf");
}
@font-face {
    font-family: "AmpleSoftPro";
    src: url("../Fonts/AmpleSoftPro-Medium.ttf");
}