.welcome-hero {
  position: relative;
  background:
    radial-gradient(circle at top left, rgba(47, 123, 219, 0.16), transparent 26%),
    radial-gradient(circle at top right, rgba(16, 79, 140, 0.12), transparent 30%),
    linear-gradient(180deg, #f7fbff 0%, #eef4fb 100%);
  background-color: #eef4fb;
  opacity: 1;

  
}

.welcome-hero-other {
  position: relative;
  background-position: center;
  background-size: cover;
  background-color: transparent;
  opacity: 0.8;

  
}


.columnMain {
  float: left;
  width: 50%;
  padding: 15px;
}

.columnMaincharts{
  float: left;
  width: 80%;
  padding: 30px;
  background-color: #FFFFFF;
}

.columnText {
  padding-bottom: 250px;
  padding-top : 100px;
  padding-left: 10px;
  padding-right: 10px;
  

}


.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}


.signup-txt{
  margin: auto;
  text-align: center;
  padding:   20px 0 272px;
  width: 50%;
}


  .welcome-hero-txt{
      text-align: center;
      padding:   150px 0 372px;
  }
  
  .welcome-hero-txt h1 {
      font-size: 38px;
      color: #080808;
      font-weight: 700;
      text-transform: uppercase;
      margin-bottom: 45px;
  }

  .welcome-hero-txt p {
      font-size: 18px;
      text-transform: initial;
      color: #080808;
      font-weight: 500;
      max-width: 735px;
      margin: 0 auto;
  }


.mapstyle{
      text-align: center;
      padding : 2% 2% 2% 2%;
    


  }

.popup-window {
  min-width: 220px;
  max-width: 280px;
  padding: 4px 2px 2px;
  color: #12304d;
  font-family: "Lato", sans-serif;
}

.popup-window--link {
  cursor: pointer;
}

.popup-window--link:hover h6 {
  color: #2f7bdb;
}

.popup-window--link:focus {
  outline: 2px solid rgba(47, 123, 219, 0.35);
  outline-offset: 2px;
}

.popup-window__eyebrow {
  margin: 0 0 6px;
  color: #617488;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.popup-window h6 {
  margin: 0 0 12px;
  color: #0c2f57;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 800;
}

.popup-window__row {
  margin: 0 0 10px;
}

.popup-window__label {
  display: block;
  margin-bottom: 4px;
  color: #617488;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.popup-window__value {
  display: block;
  color: #12304d;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}

.hyperLinkPopup {
  margin-top: 14px;
}

.popup-window__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  width: 100%;
  padding: 10px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, #0c2f57, #2f7bdb);
  color: #ffffff !important;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  box-sizing: border-box;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.popup-window__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(12, 47, 87, 0.16);
}



  /* this is the code for the home page that moves the maps depending on screen size*/

  .columnMainindex{
    float: left;
    width: 33.3%;

  }
    


/* log in popup css below*/

/* Button used to open the contact form - fixed at the bottom of the page */
.open-button {
background-color: #555;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
opacity: 0.8;
position: fixed;
bottom: 23px;
right: 28px;
width: 280px;
}

/* The popup form - hidden by default */
.form-popup {
display: none;
position: fixed;
bottom: 0;
right: 15px;

border: 3px solid #f1f1f1;
z-index: 9;
}

/* Add styles to the form container */
.form-container {
max-width: 300px;
padding: 10px;
background-color: white;
}

.form-container {
  max-width: 400px;
  padding: 10px;
  background-color: white;
  }


/* Full-width input fields */
.form-container input[type=text], .form-container input[type=email], .form-container input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
background: #f1f1f1;
}

/* When the inputs get focus, do something */
.form-container input[type=text]:focus, .form-container input[type=email]:focus, .form-container input[type=password]:focus {
background-color: #ddd;
outline: none;
}

/* Set a style for the submit/login button */
.form-container .btn {
background-color: #04AA6D;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
width: 100%;
margin-bottom:10px;
opacity: 0.8;
}

/* 
below this is for the sign in page for mobile */
/* The popup form - hidden by default */
.form-popup-page {
  position: relative;
  width: 60%;
  padding-top: 150px;
  bottom: 0;
  margin: auto;
  
  
  border: 3px solid #f1f1f1;
  z-index: 9;
  }

  

/* this below and above is for the  signup form */


.modern-form {
width: 50%;
margin: 30px auto;
background-color:  #fff;
border: solid 1px #ccc;
padding: 20px 10px;
}

.modern-form h3 {
text-align: center;
}

.float-label-field {
border: none;
outline: none;
position: relative;
margin: 0 0 20px 0;
padding: 0;
box-sizing: border-box;
}

.float-label-field input {
border: none;
outline: none;
padding: 5px 5px 8px 0px;
width: 100%;
font-size: 18px;
border-bottom: solid 1px #efefef;
}

.float-label-field label {
opacity: 0.5;
position: absolute;
top: 10px;
left: 0px;
transition: all 0.2s ease;
font-size: 18px;
}

.float-label-field.focus label {
color: orange;
}
.float-label-field.focus input {
border-bottom: solid 1px orange;
}
.float-label-field.float label {
opacity: 1;
top: -8px;
font-size: 60%;
transition: all 0.2s ease;
font-weight: bold;
}

/* this  above is for the  signup form */

/* code below for button */
/* CSS */
.button-3 {
appearance: none;
background-color: #2ea44f;
border: 1px solid rgba(27, 31, 35, .15);
border-radius: 6px;
box-shadow: rgba(27, 31, 35, .1) 0 1px 0;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: inline-block;
font-family: -apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
font-size: 14px;
font-weight: 600;
line-height: 20px;
padding: 6px 16px;
position: relative;
text-align: center;
text-decoration: none;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
vertical-align: middle;
white-space: nowrap;

}

.button-3:focus:not(:focus-visible):not(.focus-visible) {
box-shadow: none;
outline: none;
}

.button-3:hover {
background-color: #2c974b;
}

.button-3:focus {
box-shadow: rgba(46, 164, 79, .4) 0 0 0 3px;
outline: none;
}

.button-3:disabled {
background-color: #94d3a2;
border-color: rgba(27, 31, 35, .1);
color: rgba(255, 255, 255, .8);
cursor: default;
}

.button-3:active {
background-color: #298e46;
box-shadow: rgba(20, 70, 32, .2) 0 1px 0 inset;
}

/* below is the flash text for the singup    */


.blink_text {
transition: opacity 1s;
color: red;
font-size: 20px;
position: relative;
text-align: center;
}


blink_text_sus{
transition: opacity 1s;
color: green;
font-size: 20px;
position: relative;
text-align: center;
}







  @media screen and (max-width: 600px) {
      .welcome-hero,
      .welcome-hero-other {
        background:
          radial-gradient(circle at top left, rgba(47, 123, 219, 0.16), transparent 28%),
          radial-gradient(circle at top right, rgba(16, 79, 140, 0.12), transparent 30%),
          linear-gradient(180deg, #f7fbfd 0%, #eef4fb 100%);
        background-size: auto;
        background-position: center top;
        opacity: 1;
      }

      .columnMain {
        width: 100%;
      }

      .chartPhone{
        height: auto;


      }

      .contentGap {
        margin-top: 10px; /* or whatever the height of the canvas is */
        position: relative;
      }
      

      .columnMaincharts{
        float: left;
        width: 95%;
        padding: 10px;
        background-color: #FFFFFF;
        height: auto;
        padding-bottom: 50%;

      }

      .columnText {
        padding-bottom: 0px;
        padding-top : 10px

      }
      .mapstyle {
        width: 100%;

      }
      
      .modern-form {
       width: 100%;
       
      }

      .columnMainindex{
        float: left;
        width: 90%;
        padding-left: 15px;
    
      }

      .welcome-hero-txt {
        padding-top: 50px;

      }

      .welcome-hero-txt h1{
        font-size: 25px;

      } 

      .welcome-hero-txt p{
        font-size: 20px;

      } 

      .columnMainindex p{
        font-size: 15px;
        padding-top: 15px;
        padding-bottom: 15px;
        

      }

      .w3-bar-item{
        font-size: 14px;
      }
      
      #cavanH {
        content: "Cavan House Price Details";

      }


    

      .form-container {
        max-width: 500px;
        padding: 10px;
        width: 80%;
        background-color: white;
        }

        .form-popup-page {
          width: 80%;
          
          }
  


      

    }

    hr.blackLine {
      border: 10px solid black;
      border-radius: 5px;
    }

    
    @media screen and (max-width: 1000px) {

    .columnText {
      padding-bottom: 150px;
      padding-top : 10px

  
    }
    
      .modern-form {
       width: 100%;
       
      }

      .columnMainindex{
        float: left;
        width: 90%;
    
      }

      #cavanH span {
        display: none;
      }

      #cavanH:after {
        content: 'Cavan House Price Details';
      }
      
      #premiumHeader span {
        display: none;
      }

      #premiumHeader:after {
        content: '';
      }


      #MapsHeader span {
        display: none;
      }

      #MapsHeader:after {
        content: 'Yearly Price Difference';
      }

      #signupHeader span {
        display: none;
      }

      #signupHeader:after {
        content: 'Sign Up';
      }

      #mapPercentage span {
        display: none;
      }

      #mapPercentage:after {
        content: 'Yearly Percentage Change';
      }
      

      .signup-txt{
        margin: auto;
        text-align: center;
        width: 80%;
      }

      

  }