.con4 {

    background-color: rgba(4, 30, 66, 0.8);
    height: 20rem; 
    width: 90%;
    margin: auto;
    margin-left: 2rem;
    border-radius: 1rem;
    margin-bottom: 4rem;   
    position: relative;
       

}

.firstline {

    color: white;
    padding-left: 0.5rem;
    padding-right: 1rem;
    padding-top: 2.5rem;
    margin-left: 2rem;
    font-size: 2.4vw;
    font-weight: 800;
    font-family: "Geologica", sans-serif;

    animation: TextPopUp both;
    animation-timeline: view();
    animation-range: entry 55% cover 35%;


}

.secondline {

    color: white;
    padding: 2.5rem;
    padding-top: 2.7rem;
    padding-bottom: 1.4rem;
    font-size: 2.1vw;
    font-weight: 800;
    font-family: "Geologica", sans-serif;
    
    animation: TextPopUp both;
    animation-timeline: view();
    animation-range: entry 70% cover 35%;

}

.thirdline {

    color: white;
    padding: 2.5rem;
    padding-top: 1.2rem;
    font-size: 1.9vw;
    font-weight: 800;
    font-family: "Geologica", sans-serif;

    animation: TextPopUp both;
    animation-timeline: view();
    animation-range: entry 85% cover 40%;
}

.wheel {


    height: 50%;
    width: 25%;
    background-image: url(Images/Wheel.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    z-index: 10;
    top: -4rem;
    right: -8rem;

    animation: WheelSpin;
    animation-timeline: view();


}


@keyframes TextPopUp {

  0% {

    transform: translateY(0px);

  }

  60% {

    transform: translateY(-1rem);
    text-shadow: 0 8px 12px rgba(255, 192, 0, 0.7);

}

  100% {

    transform: translateY(0px);

  }

}

@keyframes WheelSpin {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

  }

@media (max-width: 1080px) {

    .con4 {

      height: 18rem;

    }

    .wheel {

      right: -7rem;

    }

}

@media (max-width: 968px) {

    .con4 {

      height: 16rem;

    }

    .wheel {

      right: -6rem;

    }

}

@media (max-width: 856px) {

    .con4 {

      height: 15rem;

    }

    .wheel {

      right: -5rem;

    }

    .firstline {

      padding-top: 1.6rem;
      padding-left: 0;
      margin-left: 1.5rem;

    }

    .secondline {

      padding-left: 0;
      margin-left: 1.5rem;

    }


    .thirdline {

      padding-left: 0;
      margin-left: 1.5rem;

    }

}

@media (max-width: 804px) {

    .con4 {

      height: 15rem;
      margin-left: 0.8rem;

    }

    .wheel {

      width: 15%;
      right: -4rem;

    }

    .firstline {

      font-size: 1.2rem;

    }

    .secondline {

      font-size: 1rem;

    }


    .thirdline {

      font-size: 0.9rem;

    }

}


@media (max-width: 742px) {

    .con4 {

      height: 17rem;

    }

    .wheel {

      right: -3rem;

    }

}

@media (max-width: 658px){


    .wheel {

      right: -3.5rem;

    }

}

@media (max-width: 642px){


    .wheel {

      right: -1.5rem;
      width: 20%;

    }

}


@media (max-width: 580px){


    .wheel {

      right: -2.2rem;
      width: 18%;

    }

}


@media (max-width: 548px){

    .con4 {

      height: 18rem;

    }

    .wheel {

      right: -2rem;
      width: 14%;

    }

}


@media (max-width: 494px){

    .con4 {

      height: 18rem;
      width: 80%;

    }

    .wheel {

      right: -2rem;
      width: 18%;
      top: -4rem;

    }


     .firstline {

      font-size: 1rem;

    }

    .secondline {

      font-size: 0.9rem;

    }


    .thirdline {

      font-size: 0.8rem;

    }

  }

@media (max-width: 441px){

    .con4 {

      height: 22rem;

    }

    .wheel {

      top: -3;
      right: -2;
      width: 25%;

    }

  }

@media (max-width: 382px){

    .con4 {

      height: 19rem;

    }

     .firstline {

      font-size: 0.9rem;

    }

    .secondline {

      font-size: 0.75rem;

    }


    .thirdline {

      font-size: 0.7rem;

    }

  }


@media (max-width: 338px){

    .con4 {

      height: 60vh;

    }

    .wheel {

      top: -4;
      right: -2;
      width: 25%;

    }

  }

@media (max-width: 302px){

    .con4 {

      height: 25.5rem;

    }

    .wheel {

      top: -10;
      right: -2;
      width: 25%;

    }

  }

@media (max-width: 286px){


    .wheel {

      width: 40%;

    }

  }

@media (min-width: 1876px){


    .con4 {

      height: 27rem;

    }


  .wheel {

      right: -15rem;

    }

  }