body {
      font-family: Arial, sans-serif;
      background: #f0f4f8;
      margin: 0;
      padding: 0px;
    }
	section.heroform-section {
    padding: 0 10px;
}
.d-none{
	display:none;
}
.d-block{
	display:block;
} 

.bg-purple{
	 background-color: #356ebd;   
    /* Change Log:
 
       #597ce4;
       #5276e3;   
       #4b71e2;   
       #446be1; 
       #3d66e0;   
       #3660df;  
       #2f5ade;  
       #2855dd;  
       #2250da; 
       #4169e1; Royal Blue
       #0041c2; Blueberry
       #4361ee; Too Bright
       #4895ef; Too Baby
       #0080fe; Azure
       #1e90ff; Dodger
       #356ebd; Last fixed
       #605f97;
    */
}
.bg-green{
	 background-color: #04AA6D;
}
.text-green{
	color: #04AA6D;
}
.text-white{
	color:#fff;
}
.text-danger{
	color:red;
}
.text-success{
	color: #356ebd;
}
.fs-16{
	font-size:16px;
}
.fw-bold{
	font-weight:bold;
}

    .container {
      max-width: 825px;  /* I changed from 950px */
      background: #fff;
      margin: 20px auto;
      border-radius: 8px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      overflow: hidden;
    }
.header-title-btn {
    padding: 25px;
    display: grid;
    grid-template-columns: 58% 40%;
    align-items: center;
    gap: 2%;
}
.form-section h3 {
    margin-top: 0 !important;
}
.domain-title-subtitle {
    border-right: 1px solid #ddd;
}
  .header {
   
    padding: 5px;   /* I changed from 12px */
    font-size: 11px;  /* I changed from 16px */
    font-weight: bold;
    text-align: center;
    border-radius: 10px 10px 0 0;
}
   .domain-title {
    font-size: 31px;   /* I changed from 40px */
    line-height: 46px;  /* I changed from 40px */
	margin-bottom: 15px;  
}

   .domain-subtitle {
    color: #356ebd;    /* I changed from #51667b; */
    font-size: 15px;  /* I changed from 22px */
}

    .buttons {     
      display: flex;
      flex-direction: column;
      gap: 18px;
      align-items: center;
    }

   .buttons a {
    text-decoration: none;
    padding: 11px 33px;   /* I changed from 12px 18px;  */
    border-radius: 6px;
    font-size: 17px;  /* I changed from 22px */
    font-weight: bold;  /* I changed from bold */
    text-align: center;
    width: ; -webkit-fill-available;  /* I changed from " -webkit-fill-available; " */
}

    .form-section {
	  border-top:1px solid #ddd;	
      padding: 25px;
    }
	.form-submiited-accepted, .fatal-error-form {
    text-align: center;
    border-top: 1px solid #ddd;
    padding: 50px 20px;
}
:focus-visible {
    outline: 1px solid #605f97;
}



/* New Footer - IS Visible */
.new_footer {
    margin-top: 0;  /*   I added  */
    display: flex;
    justify-content: center;
    color: #c5cad2;  /*  Original #c5cad2;  */
}
.new_footer .footer-link{
    text-decoration:none;
    color: #c5cad2;    /*   Original #acb1ba;  */
    opacity: 1;     /*   I added  */
}
.new_footer label {
    text-decoration: none;
    color: #c5cad2;    /*   Original #acb1ba;  */
    opacity: 1;     /*   I added  */
    font-weight: 600;  /* I changed from 600, no px */
    margin-top: 0;
    font-size: 13px;  /* I added this line */
    margin-bottom: 12px  /* The page cuts off when using Label instead of P class */
}
.new_footer label:hover{
    /* opacity: .8;   Original .8   */
    font-size: 14px;
    color: #04AA6D;   /*  And/Or Use  */
}



/* Original Footer - NOT Visible */

.footer {
    display: flex;
    justify-content: center;
    color: #c5cad2;  /*  Original #c5cad2;  */
}
.footer .footer-link{
    text-decoration:none;
    color: #c5cad2;    /*   Original #acb1ba;  */
    opacity: 1;     /*   I added  */
}
.footer p {
    font-weight: 600;  /* I changed from 600, no px */
    margin-top: 0;
    font-size: 14px;  /* I added this line */
}
.footer .footer-link:hover{
    opacity: .8;   /* Original .8  */
}


    .form-section h3 {
    color: #51667b;
    font-size: 25px;
    margin-bottom: 5px;
    font-weight: inherit;  /* I changed from 600, no px */
}

.form-group label {
    color: #51667b;
    display: block;
    margin-bottom: 5px;     /* I changed from 5px */
    font-weight: inherit;    /* I changed from Bold */
    font-size: 14px;         /* I added */
}
    .form-section p {
      margin-top: 10px;    /* I changed from 0 */
      font-size: 16px;
     color: #51667b;
      margin-bottom: 25px;    /* I changed from 0 */
    }
.domain-title p {
    margin: 0 !important;
}
    .form-group {
      margin-bottom: 18px;   /* I changed from 18px */
    }
.fatal-error-form a {
    text-decoration: none;
}
 .form-group select {
    font-weight: inherit;    /* I changed from 600, no px */
    font-size: 13px;       /* I added */
}
.error-message {
      color: red;
      font-size: 14px;
      margin-top: 4px;
      display: none;
    }

    .form-group.invalid input,
    .form-group.invalid textarea,
    .form-group.invalid select {
      border-color: red;
    }

    input, select, textarea {
      width: 100%;
      padding: 10px;
      border-radius: 6px;
      border: 1px solid #ccc;
      font-size: 14px;
      box-sizing: border-box;
 	  font-family: sans-serif;
    color: #51667b;
     background-color: inherit;  /* I added this line; */
    }

.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;    /* Original 10px; */
    align-items: end;
}
form#domainForm {
    display: flex;
    gap: 30px;
}
form#domainForm>div {
    flex: 1 1 50%;
}
.captcha {
    display: flex;
    justify-content: center;
    padding-top: 3px;  /* I added this line; */
}
    .form-row > div {
      flex: 1;
      min-width: calc(50% - 5px);
    }   
.desktop-show{
		  display:block;
}
.mobile-show {
    display: none;
}
  .send-btn {
    margin-top: 18px;  /* Original was 20px */
    width: 100%;
    border: none;
    padding: 11px;   /* I didn't change from 12px */
    font-size: 15px;  /* I changed from 18px */
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
}

.send-btn:hover,
.buttons a:hover {
    opacity: .6;
}

/**/
/* Highlight iframe and parent */
iframe[src*="challenges.cloudflare.com"] {
  border: 2px solid red !important;
}

/* Reveal everything */
* {
  overflow: visible !important;
}


 @media (max-width:  800px) {
	.domain-title {
    font-size: 26px;    /* I changed from 36px */
    line-height: 38px;   /* I changed from 36px */
}
.header-title-btn {  
    grid-template-columns: 55% 40%;
    gap: 5%;
}
}
	 @media (max-width:  699px) {   /* I changed from 750px */
		 form#domainForm,
         .header-title-btn{
			display: block;
		 }
		 .domain-title-subtitle{
			 border:0;
		 }
		 .domain-title {
			font-size: 31px;    /* I changed from 22px */
			line-height: 41px;   /* I changed from 32px */
            margin-bottom: 25px /* I added */
		}
		.buttons a { 
          font-size: 19px;  /* I changed from 20px */
	  }
	   .desktop-show{
		  display:none;
	  }
	  .mobile-show {
		display: block;
		margin-top: 30px;   /* I changed from 15px */
	}
         
  }


/* It looks there are rendering gaps for @media between 461 and 699 */


@media (max-width: 460px) {  /* I changed from 320px, It looks like iPhone 16 is 440 */
    .form-row > div {
        min-width: 100%;
     }

    .buttons a {
        max-width: 100%;
        font-size: 15px;  /* I added */
     }	 
    
		 .domain-title {
			font-size: 25px;    /* I changed from 22px */
			line-height: 42px;   /* I changed from 32px */
            margin-bottom: 27px /* I added */
            }
    
           /* I Added the following 15 lines, parially copied from the @media above */
             .header-title-btn{
			  display: block;
              padding-top: 23px;   /* Decrease white space below banner/headed  */
              padding-left: 15px;    /* These two apply to eveything above the middle divider line, but below the page title  */
              padding-right: 15px;   /* They decrease the margins from 25px to help fit long domain  */
             }
            .form-section{
              padding-left: 22px;    /* These two apply start applying the middle divider line */
              padding-right: 22px;    /* They decrease the margins from 25px to help make the fields bigger  */
             }
           .footer p {
             font-size: 14px;  /* Moved down from 13px */
              }
           .new_footer label {
             font-size: 14px;  /* Moved down from 13px */
              }
           .form-submiited-accepted, .fatal-error-form {
             padding: 20px 20px;  /* I added */
           }
           .form-row {
             gap: 1px;    /* I added, sightly improved dual input field spacing. */
             display: inherit;  /* Fixed Label font size problems with dual inputs  */
           }
           .form-group label {
             margin-bottom: 5px;  /* I added, normally 5px */
           }
           .container {
             /* Primary  margin: 20px auto;  */
             margin-top: 15px;
             margin-bottom: 15px;
           }
  	      .mobile-show {
	      	display: block;
		    margin-top: 31px;   /* I changed from 15px */
	}
        }



       @media (max-width: 409px) {  /* Added another @media for slimmer phones */
		 .domain-title {
			font-size: 24px;    /* I changed from 30px */
			line-height: 36px;   /* I changed from 40px */ 
          }
       }