@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Open+Sans:wght@400;500;600;700&family=Poppins&display=swap');



* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
   background: #ECFAFF;
}

.nav-menu {
   padding: 40px 5%;
}

/* Style for the modal container */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1;
}

/* Style for the modal content */
.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  text-align: center;
}

/* Style for the OK button */
#ok-button {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

.nav-bar {
   background: #FDFDFD;
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 80px;
   padding: 10px 4%;
   border-radius: 10px;
}

.logo-div {
   align-items: center;
   gap: 15px;
   display: inline-flex;
   padding-left: 20px;
}

.logo {
   border-radius: 50%;
   height: 50px;
}

.logo-text {
   font-size: 26px;
   font-family: 'Bebas Neue', sans-serif;
   letter-spacing: .2rem;
   color: #212844;
   box-shadow: 2px 2px 4px rgba(255, 255, 255, 0.3);
}

a {
   text-decoration: none;
}

.nav-links {
   list-style: none;
   display: flex;
   gap: 50px;
   padding-left: 40px;
   justify-content: center;
   align-items: center;
}

li {
   font-size: 16px;
   font-family: 'Poppins', sans-serif;
}


.reg-btn {
   padding: 12px 40px;
   font-size: 18px;
   color: #fff;
   border-radius: 10px;
   border: 0;
   background: coral;
}


.container {
   padding: 50px 12%;
   display: grid;
   grid-template-columns: 1fr 2fr;
}

.right-column {
   padding-top: 30px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

.right-img {
   width: 380px;
   border-radius: 30%;
   height: 380px;
   padding-right: 40px;
}

h2 {
   font-size: 34px;
   width: 600px;
   font-family: Poppins;
   font-weight: 600;
}

p {
   font-size: 28px;
   font-family: Open;
}

span {
   color: coral;
   font-size: 38px;
}

.validation {
   margin-top: 40px;
   display: flex;
   align-items: center;
   gap: 20px;
}

.inner-container {
   margin-top: 30px;
   padding: 20px;
   border-radius: 10px;
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 20px;
}

label {
   font-size: 18px;
   font-family: Open;
   font-weight: bold;
}

.phone {
   padding: 18px 26px;
   outline: 0;
   width: 400px;
   border: 0;
   box-shadow: 4px 4px 2px #212844;
   letter-spacing: .2rem;
   margin-left: 20px;
}

.phone::placeholder {
   letter-spacing: .2rem;
   font-size: 14px;
}

.check-carrier {
   font-size: 16px;
   padding: 5px;
   color: #fff;
   border-radius: 10px;
   height: 45px;
   width: 150px;
   border: 0;
   background: coral;
   box-shadow: 4px 4px 2px #a9abb3;
}

.provider-logo {
   position: absolute;
   top: 38%;
   left: 500px;
   transform: translateY(-70%);
   width: 40px;
   height: 40px;
   background-repeat: no-repeat;
   background-size: contain;
   border-radius: 20px;
}

.provider-logo.mtn {
   background-image: url('../images/mtn.png');
}

.provider-logo.glo {
   background-image: url('../images/glo.png');
}

.provider-logo.airtel {
   background-image: url('../images/airtel.png');
}

.provider-logo.nineMobile {
   background-image: url('../images/9mobile.png');
}


.error {
   visibility: hidden;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   text-align: center;
   color: hsl(0, 100%, 50%);
   font-size: 30px;
}

.error.errormsg {
   visibility: visible;
   display: flex;
}

.submit-button{
   width: 400px;
   padding: 15px;
   font-size: 18px;
   border: 0;
   background: coral;
   color: white;
   border-radius: 10px;
}


/* --------------- Media Queries --------------- */
@media screen and (max-width: 1200px) {
   /* CSS styles for screens with a width of 1200 pixels or less */

   .reg-btn {
      padding: 12px 30px;
      font-size: 14px;
      transition: 850ms;
   }

   .container {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
   }

   .right-img {
      width: 500px;
      height: 400px;
      padding-right: 40px;
      transition: 850ms;
   }

   h2 {
      font-size: 34px;
      width: 500px;
      font-family: Poppins;
      font-weight: 600;
      text-align: center;
   }
}

@media screen and (max-width: 983px) {
   /* CSS styles for screens with a width of 1200 pixels or less */
   .nav-links{
      display: none;
   }
}

@media screen and (max-width: 751px) {
   /* CSS styles for screens with a width of 751 pixels or less */

   .nav-links {
      display: none;
   }

   .provider-logo {
      position: absolute;
      top: 44%;
      left: 380px;
      transform: translateY(-70%);
      width: 40px;
      height: 40px;
      background-repeat: no-repeat;
      background-size: contain;
      border-radius: 20px;
   }
}

@media screen and (max-width: 500px) {
   /* CSS styles for screens with a width of 500 pixels or less */

   .nav-bar{
      display: none;
   }

   .container {
      margin-left: 50px;
   }

   .right-img {
      width: 350px;
      transition: 850ms;
   }

   h2 {
      font-size: 18px;
      width: 400px;
      padding: 20px;
      text-align: left;
   }

   .display {
      display: flex;
      flex-direction: column;
      gap: 30px;
      transition: 850ms;
   }

   .phone {
      width: 90%;
      transition: 850ms;
   }

   .provider-logo {
      position: absolute;
      top: 53%;
      left: 280px;
      transform: translateY(-70%);
      width: 30px;
      height: 30px;

   }
}