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

body {
    background-image: url(./asset/images/aurora.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-color: white;
    font-size: 0.9rem;
    font-family:"Sofia Sans", sans-serif;
 }

 .nav-bar {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    padding: 20px 150px;
  }

  /* Hide the checkbox (menu toggle) */
#menu-toggle {
    display: none;
  }

  /* Hamburger icon styling */
.menu-icon {
    display: none;
    flex-direction: column;
    cursor: pointer;
  }
  
  
  .nav-bar a {
    text-decoration: none;
    font-weight: 400;
  }

  /* Middle Nav Bar  */
.middle-nav {
    display: flex;
    justify-content: space-between;
  }
  .nav-bar li {
    list-style: none;
    padding: 0px 20px;
  }
  
  .nav-bar li a {
    color: #141414;
  }
  
  .nav-links {
    display: flex;
    padding: 0;
  }
  
  .nav-bar li a span {
    color:  #0065FE;
  }

  .features {
    display: flex;
    gap: 2px;
  }
  
  .features img {
    margin-top: -1px;
  }

  /* middle Nav Bar */

 .log-on {
    display: flex;
  }
  
  .log-on #log {
    font-weight: 400;
    color:  #0065FE;
    
  } 

  #trial {
    color: white;
    background-color: #0065FE;
    padding: 10px 20px;
    border-radius: 20px;
    border: 2px solid  #0065FE;
  }
  
  #trial:hover {
    color:  #0065FE;
    background-color: white;
    border: 2px solid  #0065FE;
  }



  main {
    text-align: center;
    font-family: "Gilroy-Bold", sans-serif;
    margin-top: 5%;
  }
  
  .hero {
    font-weight: 600;
    font-size: 3rem;
    line-height: 2;
  }
  
  .hero span {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    color: #005ae2;
  }
  
  .hero span img {
    margin-top: -20px;
  }
  
  .summary {
    padding: 30px 0px;
    padding-top: 20px;
    font-size: 1rem;
    line-height: 1.5;
  }
  
  .sign-on {
    text-align: center;
    display: inline-flex;
    align-items: center;
    padding: 50px;
    gap: 50px;
  }
  
  #sign-up-btn {
    padding: 12px 30px;
    background-color:  #0065FE;
    border-radius: 25px;
    color: white;
    text-decoration: none;
    font-size: 1rem;
    border: 2px solid  #0065FE;
 
  }
  
  #sign-up-btn:hover {
    background-color: white;
    color:  #0065FE;
    border: 2px solid  #0065FE;
  }
  
  .sign-on a {
    text-decoration: none;
    color:  #0065FE;
    font-size: 1rem;
  }

  /* Section One and Two */

.section-1,
.section-2 {
  display: flex;
  justify-self: center;
}

.section-2 img {
  width: 100%;
}

/* Section 3 */

.section-3 {
    display: grid;
    grid-template-columns: 35% 65%;
    padding: 80px 200px;
    background-color: #f9fbfd;
  }
  
  .section-3 h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
  }
  
  .section-3-left {
    font-weight: 600;
    font-size: 2rem;
  }
  
  .section-3-left span {
    color: #005ae2;
  }
  
  .benefits-list {
    list-style-type: none;
    display: flex;
    justify-content: space-between;
    gap: 30px;
    padding: 0px;
    line-height: 1.5;
  }
  
  .benefits-list li {
    padding: 0px 40px;
  }

  /* Section Four */

/* Section Four Left */

.section-4-left {
    line-height: 1.5;
  
  }
  
  .section-4-left p {
    padding-right: 100px;
   
  }
  
  .section-4-left span {
    color: #005ae2;
    padding-left: 5px;
  }

  .section-4-left .h2 {
    padding-left: 0px;
    color:#000000
  }
  
  .section-4 {
    display: grid;
    grid-template-columns: 35% 65%;
    padding: 100px 200px;
    gap: 20px;
  }
  
  .section-4 h2 {
    font-weight: 600;
    font-size: 1.5rem;
    
  }
  
  .line-head {
    display: flex;
    gap: 1px;
    align-items: center;
    margin-bottom: 10px;
  }
 
  
  .line-head img {
    margin-left: -15px;
  }
  
  /* Section 4 Right */
  
  .section-4-right {
    display: grid;
    row-gap: 50px;
  }
  
  .section-4-right h3 {
    margin: 15px 0px;
    font-size: 1.3rem;
  }
  
  .section-4-right img {
    margin-bottom: 10px;
  }
  
  .section-4-right p {
    padding-right: 50px;
    font-size: 1rem;
    line-height: 1.5;
  }
  
  .top {
    display: grid;
    grid-template-columns: 50% 50%;
    padding: 0px 50px 25px 50px;
    gap: 50px;
  }
  
  .bottom {
    display: grid;
    grid-template-columns: 50% 50%;
    padding: 0px 50px 25px 50px;
    gap: 50px;
  }
  
  /* Section Five */

.section-5 {
    display: grid;
  }
  
  .section-5-top {
    display: grid;
    justify-content: center;
    padding: 50px 0px;
  }
  
  .section-5-top h2 {
    font-weight: 600;
    font-size: 2rem;
    
  }
  
  .section-5-top h2 span {
    color: #005ae2;
  }
  
  .section-5-top p {
    text-align: center;
    line-height: 1.5;
    
  }
  
  .line-head-2 {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 20px;
  }
  
  
  
  .line-head-2 img {
    margin-left: -15px;
    
  }
  
  .line-head-2 span {
    align-items: start;
  }

  /* Plans Table */

.section-5-mid {
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: center;
    padding: 100px 0px;
  }
  
  .section-5-mid ul {
    list-style: none;
  }
  
  /* Basic Plan style */
  
  .plan-left {
    padding: 50px 50px 0px 70px;
    border-left: 1px solid #005ae2;
    border-top: 1px solid #005ae2;
    border-bottom: 1px solid #005ae2;
    border-right: 0px;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
  }
  .price span {
    margin: 10px 0px;
    font-size: 24px;
  }
  
  .price p {
    margin: 10px 0px;
    font-size: 20px;
  }
  
  .price h1 {
    margin-top: 30px;
    font-size: 40px;
  }
  
  .price ul li {
    display: flex;
    gap: 10px;
    font-size: 14px;
    margin: 30px 0px;
  }

  /* Professional Plan */

#plan-middle span {
    margin: 10px 0px;
    font-size: 24px;
  }
  
  #plan-middle p {
    margin: 20px 0px;
    font-size: 20px;
  }
  
  #plan-middle h1 {
    margin-top: 30px;
    font-size: 40px;
  }
  
  #plan-middle ul {
    padding: 0px;
    margin-top: 25px;
  }
  
  #plan-middle ul li {
    display: flex;
    gap: 10px;
    font-size: 14px;
    margin: 30px 0px;
  }
  
  .price ul {
    padding: 0px;
    margin-top: 25px;
  }
  
  #plan-middle {
    margin: -70px 0px;
    padding: 100px 150px 70px 70px;
    background-color: #1e3448;
    border-radius: 10px;
    color: white;
  }

  /* Teams Plan */

.plan-right {
    padding: 50px;
    border-left: 0px;
    border-top: 1px solid #005ae2;
    border-bottom: 1px solid #005ae2;
    border-right: 1px solid #005ae2;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
  }
  
  
  /* Pricing Buttons */
  .pricing-btn {
    display: flex;
    gap: 20px;
    padding: 50px 0px;
    justify-content: center;
    align-items: center;
    margin-bottom: 50px;
  }
  
   .custom-pricing-btn {
    padding: 15px 50px;
    background-color:#0065FE;
    border: 2px solid#0065FE;
    border-radius: 25px;
    color: white;
    text-decoration: none; 
    cursor: pointer;
  } 
  
   .custom-pricing-btn:hover {
    padding: 15px 50px;
    border: 2px solid #0065FE;
    border-radius: 25px;
    color: #0065FE;
    text-decoration: none;  
    background-color: white;
    cursor: pointer;
  }
  
  
  .select-pricing-btn {
    padding: 15px 50px;
    background-color:#0065FE;
    border: 2px solid #0065FE;
    border-radius: 25px;
    color: white;
    text-decoration: none;  
    cursor: pointer;
  }
  
  .select-pricing-btn:hover {
    padding: 15px 50px;
    border: 2px solid #0065FE;
  
    border-radius: 25px;
    color: #0065FE;
    text-decoration: none; 
    background-color: #ffff;
    cursor: pointer;
  } 



  /* Section Six */

.section-6 {
    display: flex;
    background-color: #1E3448;
    background-image: url(./asset/images/BG-section\ 6.png), url(./asset/images/BG\ section\ II.png);
    background-repeat: no-repeat;
    background-position: left, right;
    justify-content: center;
    padding: 80px 0px;
  
  }
  
  .domain {
    display: grid;
    background-color: #ffff;
    padding: 50px;
    border-radius: 10px;
    gap: 20px;
  }
  
  .domain-name {
    display: grid;
    grid-template-columns: 55% 42%;
    gap: 10px;
    
  }
  
  #url,
  #domains,
  #alias {
    padding: 15px 20px;
    border-radius: 10px;
    border: 1px solid #3284FF;
    color: #005AE2;
  }
  
  #url::placeholder {
    color: #3284FF;
  }
  
  #alias::placeholder {
    color:  #3284FF;
    
  }
  
  #url:active {
    border: 1px solid #005AE2;
  }
  
  #alias:active {
    border: 1px solid #005AE2;
  }
  
  
  .trim-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: #005AE2;
    padding: 15px 20px;
    color: #ffff;
    border-radius: 50px;
    text-decoration: none;
  }
  
  .trim-btn:hover {
    border: 2px solid #0065FE;
    border-radius: 25px;
    color: #0065FE;
    text-decoration: none; 
    background-color: #000000;
    cursor: pointer;
  } 
 
  
  
  .domain p {
    font-size: 0.8rem;
    line-height: 1.5;
    color:#0065FE;
  
  }


  /* Section Seven */

.section-7 {
    padding: 50px 0px;
    justify-items: center;
    background-color: white;
    background-image: url(./asset/images/BG\ section\ 7\ 1\ .png), url(./asset/images/BG\ section\ 7\ 2.png);
    background-position: top left, bottom right;
    background-repeat: no-repeat;
  }
  
  .faqs {
    display: flex;
    font-size: 1.5rem;
    gap: 15px;
  }
  
  .faq-list {
    margin: 50px 0px;
  }
  
  .faq-1 {
    padding: 20px 0px 15px 0px;
    border-bottom: 1px solid #D6D6D6;
  }
  
  .faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0px;
    font-weight: 300;
  }
  
  .faq-1 p {
    font-size: 0.8rem;
    line-height: 1.5;
    padding: 10px 0px;
  }
  
  .faq-q-2 {
    display: flex;
    align-items: center;
    gap: 30px;
    justify-content: space-between;
    padding: 20px 0px;
    font-weight: 300;
    line-height: 1.5;
  }
  
  /* Section Eight */

.section-8 {
    display: grid;
    background-color: #1e3448;
    padding: 80px 0px;
    text-align: center;
    color: white;
    justify-content: center;
    justify-items: center;
    background-image: url(./asset/images/BG\ section\ 8\ 1.png), url(./asset/images/BG\ section\ 8\ 2.png);
    background-repeat: no-repeat;
    background-position: top left, bottom right;
  }
  
  .section-8 h2 {
    font-size: 2.5rem;
    padding: 30px 0px;
  }
  
  .section-8 a {
    background-color: #0065FE;
    padding: 10px 50px;
    border-radius: 50px;
    width: fit-content;
    color: white;
    text-decoration: none;
    
  }
  
  .section-8 a:hover {
    background-color: white;
    color: #0065FE;
    
  }

  /* Footer */

footer {
    background-color: white;  
    padding-bottom: 50px;
    background-image: url(./asset/images/footer\ bg\ 1.png), url(./asset/images/footer\ bg\ 2.png);
    background-repeat: no-repeat;
    background-position: bottom left, bottom right;
  }
  
  .footer-links {
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    justify-content: center;
    padding: 100px 0px 20px 0px;
    gap: 50px
  }
  
  .footer-links ul {
    padding: 0px;
  }
  
  .footer-links ul li {
    list-style: none;
    padding: 0px;
    padding: 5px 0px;
  }
  
  .footer-links ul li a {
    text-decoration: none;
    color: #112232;
    cursor: pointer;  
  }
  
  .footer-links ul li a:hover {
    color: #005AE2;
  }
  
  
  /* Line 1 */
  .line-1 {
    display: grid;
    align-content: start;
    gap: 30px;
  }
  
  .socials {
    display: flex;
    gap: 30px;
  }
  
  
  /* Line 2 */
  .line-2 {
    display: flex;
    flex-direction: column;
    gap: 70px;
    padding: 0px 25px;
  }
  
  .line-2 p {
    padding-bottom: 10px;
  }
  
  .solutions {
    gap: 41px;
  }
   
  
  .foot-links {
  display: flex;
   justify-content: end;
   padding-right: 100px;
  
  }
  
  .foot-links li {
    padding: 0px 10px;
    list-style: none;
    font-size: 0.8rem;
  }
  
  .foot-links a {
    text-decoration: none;
    color: #112232;
    cursor: pointer;
  }
  
  .foot-links a:hover {
    color: #005AE2;
  }
  
  
  .tos,
  .security {
    border-right: 1px solid #112232;
  }
  


/* media queries */
@media (max-width: 768px) {

    body {
      background-size: cover;
    }
  
    /* Header */
  
    .nav-bar {
      justify-content: space-between;
      padding: 30px 10px;
    }
  
    .nav-bar img {
      width: 80%;
    }
  
    .nav-links {
      display: block;
      padding-left: 10px;
      padding-right: 10px;
      
          
    }
    .nav-links li {
        padding: 10px 0px;
        font-size: larger;
      }
    
      .features img {
        width: 20%;
      }
    
      .middle-nav {
        display: none;
      }
    
      .log-on {
        display: block;    
        padding-left: 10px;
      }
    
      .log-on li {
        padding: 10px 0px;
        padding-bottom: 20px;
        font-size: larger;
      }

      #trial {
        padding: 2px 10px;
        margin-left: -12px;
       
      }
    
      #trial:hover {
        color: #005AE2;
        background-color: white;
        border: 2px solid #005AE2;
      }
    
    
      /* Show the menu links when checkbox is checked */
      #menu-toggle:checked + .menu-icon + .middle-nav {
        display: block;
        background-color: none;
        margin-top: 10px;
         justify-content: right; 
        transition: 5s;
        
      }
    
      
    
      /* Display the hamburger icon */
      .menu-icon {
        display: flex;    
      }
    
      .menu-icon span {
        background-color: #005AE2;
        width: 25px;
        height: 3px;
        margin: 4px 0;
        transition: 1s;
      }

      main {
        margin-top: 2%;
      }
    
      .hero {
        font-size: 2rem;
        line-height: 1.5;
        padding: 20px;
      }
    
      .hero span img {
        margin-top: -8px;
      }
    
      .summary {
        font-size: 1rem;
        padding: 20px ;
      }
    
      .sign-on {
        gap: 20px;
      }
    
      .sign-on a{
       font-size: 0.8rem;
      }
   
    
      #sign-up-btn {
        padding: 5px 15px;
        font-size: 0.8rem;
      }
    
      .section-1,
      .section-2 {
        display: flex;
        padding-inline-end: 25px ;
      }
    
      .section-1 img {
        width: 100%;
      }
    
      /* Section 3 */
    
      .section-3 {
        display: block;
        padding: 50px;
        
      }
    
      .section-3 h3 {
        font-size: 1rem;
        margin-bottom: 5px;
      }
    
      .section-3-left {
        font-size: 2rem;
        margin-bottom: 20px;
      }
    
      .benefits-list {
        display: block;
        justify-content: space-between;
        gap: 20px;  
      }
    
      .benefits-list li {
        padding: 10px 0px;
      }
    
    
      /* Section 4  */
    
      .section-4 {
        display: block;
        padding: 20px 50px;    
      }
    
      .section-4 h2 {
        font-size: 2rem;
        line-height: 1.5;
      }
    
      .line-head {
        display: inline-block;
        align-content: start;
      }
    
      .line-head img {
        margin-right: 10px;
      }
    
      .section-4-left p {
        font-size: small;
        padding-right: 20px;
      }
    
      /* Section Four Right */
      
      .section-4-right {
        display: block;
        margin-top: 50px;
      }
    
      .section-4-right h3 {
        margin: 0px 0px;
        font-size: 1rem;
      }
      
      .top {
        display: block;
        padding: 10px;
      }
    
      .top p {
        padding-right: 0px;
      }
    
    .reasons-top-x {
      margin: 50px 0px;
      margin-top: 10px;
    }
    
    .reasons-top-x img {
      margin-bottom: 20px;
    }
    
    .reasons-top-x h3 {
      margin-bottom: 10px;
      
    }
    
    .bottom {
      display: block;
      padding: 10px;
    }
    
    .bottom p {
      padding-right: 0px;
    }
    
    
    /* Section Five */
    
    .section-5 {
      display: block;
    }
    
    .section-5-top {
      display: block;
      /* justify-items: center; */
      padding: 0px 50px;
    }
    
    .section-5-top h2 {
      font-weight: 600;
      font-size: 2rem;
    }
    
    .line-head-2 {
      display: block;
      align-items: center;
      align-content: center;
      
      gap: 10px;
      margin-bottom: 20px;
    }
    
    .line-head-2 img {
      margin-left: -15px;
      margin-right: 10px;
    }
    
    .section-5-top p {
      text-align: left;
      
      line-height: 1.5;
    }
    
    
    /* Plans Table */
    
    .section-5-mid {
      display: block;  
      justify-content: center;
      padding: 100px 20px;
      padding-bottom: 20px;
    }
    
    /* Basic Plan */
    
    .plan-left {
      padding: 30px 10px 0px 35px;
      border-left: 1px solid #005ae2;
      border-top: 1px solid #005ae2;
      border-bottom: 1px solid #005ae2;
      border-right: 1px solid #005ae2;
      border-top-left-radius: 0px;
      border-bottom-left-radius: 0px;
    }
    
    .price span {
      margin: 10px 0px;
      font-size: 20px;
    }
    
    .price p {
      margin: 10px 0px;
      font-size: 15px;
    }
    
    .price h1 {
      margin-top: 30px;
      font-size: 30px;
    }
    
    .price ul li {
      display: flex;
      gap: 5px;
      font-size: 12px;
      margin: 20px 0px;
    }
    
    /* Professional Plan */
    
    #plan-middle span {
      margin: px 0px;
      font-size: 20px;
    }
    
    #plan-middle p {
      margin: 10px 0px;
      font-size: 20px;
    }
    
    #plan-middle h1 {
      margin-top: 20px;
      font-size: 30px;
    }
    
    #plan-middle ul {
      padding: 0px;
      margin-top: 20px;
    }
    
    #plan-middle ul li {
      display: flex;
      gap: 10px;
      font-size: 14px;
      margin: 30px 0px;
    }
    
    .price ul {
      padding: 0px;
      margin-top: 25px;
    }
    
    #plan-middle {
      margin: 0px 0px;
      padding: 50px 30px 70px 30px;
      background-color: #1e3448;
      border-radius: 0px;
      color: white;
    }
    
    .plan-right {
      padding: 20px;
      border-top: 1px solid #005ae2;
      border-bottom: 1px solid #005ae2;
      border-right: 1px solid #005ae2;
      border-left: 1px solid #005ae2;
      border-top-right-radius: 0px;
      border-bottom-right-radius: 0px;
    }
    
    /* Pricing Buttons */
    .pricing-btn {
      display: block;
      margin-bottom: 10px;
      padding: 50px;
      text-align: center;
    }
    
    .custom-pricing-btn {
      padding: 10px 25px;
      margin-bottom: 20px;
      
    }
    
    .custom-pricing-btn:hover {
      padding: 10px 25px;
    }
    
    .select-pricing-btn {
      padding: 10px 25px;
      
    }
    
    .select-pricing-btn:hover {
      padding: 10px 25px;
    }
    
    /* Section Six */
    
    .section-6 {
      text-align: center;
    }
    
    .domain {
      display: block;
      padding: 20px;    
    }
    
    .domain-name {
      display: block;
         
    }
    
    #url,
    #domains,
    #alias {
      padding: 15px 20px;
      margin: 10px 0px;
      border-radius: 10px;
      border: 1px solid #3284FF;
      color: #005AE2;
      width: 70%;
    }
    
    #domains {
      width: 81.5%;
    }
    
    #alias {
      margin-bottom: 20px;
    }
    
    .trim-btn {  
      justify-self: center;
      padding: 10px 10px;
      margin-bottom: 10px;
      width: 76%;
    }
    
    /* Section Seven */
    
    .faq-1 {
      justify-self: center;
      width: 80%;  
    }
    
    .faq-list {
      padding: 0px 10px;
    }
    
    /* Section Eight */
    
    .section-8 h2 {
      font-size: 2rem;
    }
    
    /* Footer */
    
    .footer-links {
      display: block;
      justify-self: center;
      width: 70%;
    }
    
    /* Line 1 */
    .line-1 {
      display: grid;
      align-content: center;
      gap: 30px;
      justify-self: center;
      margin-bottom: 50px;
    }
    
    .line-1 img {
      justify-self: center;
    }
    
    .line-2 {
      display: flex;
      flex-direction: column;
      gap: 70px;
      padding: 0px 25px;
      margin-bottom: 50px;
      text-align: center;
    }
    
    .foot-links {
      display: flex;
      justify-content: center;
       justify-self: center;
       width: 90%;
       margin-bottom: 20px;  
       padding-right: 0px;
       padding-left: 0px;
      
      }
}