@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500;600;700&display=swap');

body {font-family: 'Montserrat', sans-serif; width: 100%; margin: 0;}



/* ECF Logo Fixed Bar */
.ecf-fixed {position: fixed; z-index: 60; top: 0; left: 0;  width: 100%; background: #ffffff; filter: drop-shadow(0 -5px 10px #d5d5d5); overflow-x: hidden;}
  .ecf-logo {height: 45px; margin: 0 auto; padding: 16px 0 10px 0; text-align: center;}
  .ecf-logo img {height: 100%; animation: logo-reveal 1.2s ease-in-out}

/* Hero Banner Section */
 .hero-section {margin: 40px 0 0 0; width: 100%; 
    overflow-x: hidden; position: relative; padding-bottom: 140px;}

/* Backpack Artwork */
  .backpack-artwork {position: absolute; z-index: 50; left: 50%; transform: translate(-50%, 0); top: 280px;}
.backpack-artwork img {width: 370px;}

/* Rings Left */
.hero-section .circle-left-out {position: absolute; height: 160px; width: 160px; z-index: 40; 
  border: solid 12px rgba(65, 182, 230, 0.9); border-radius: 160px; 0.9; top: 0px; left: -100px;}
.hero-section .circle-left-in {position: absolute; height: 110px; width: 110px; z-index: 30;
  border: solid 12px rgba(65, 182, 230, 0.9); border-radius: 110px; 0.9; top: 25px; left: -70px;}

/* Rings Right */
.hero-section .circle-right-out {position: absolute; height: 125px; width: 125px; z-index: 20;
  border: solid 12px rgba(65, 182, 230, 0.9); border-radius: 125px; top: 215px; right: -90px;}
.hero-section .circle-right-in {position: absolute; height: 80px; width: 80px; z-index: 10; 
  border: solid 12px rgba(65, 182, 230, 0.9); border-radius: 80px; top: 238px; right: -65px;}

/* Hero Image */
  .hero-section .hero-img {margin: 0 5%; border-radius: 0 0 60px 60px; width: 90%; height: 410px; 
  background-image: url("https://2768210.fs1.hubspotusercontent-na1.net/hubfs/2768210/2025%20Backpack%20Program/Bkpk_LP_Hero_Desktop.webp");
  background-size: cover; background-repeat: no-repeat; background-position: center;}


/* Info / Paragraph Columns */
  .info-block {margin: 20px auto; max-width: 930px;}
  .info-block h4 {font-size: 24px; line-height: 30px; color: #004b87; text-align: center; 
    font-weight: 700; margin: 0 auto 20px auto; padding: 0 10%; max-width: 220px;}
  .info-columns {display: flex; flex-direction: column;}
  .column-left-top {font-size: 16px; line-height: 28px; color: #606060; width: 90%; margin: 20px 5%; font-weight: 500;}
  .column-right-btm {font-size: 16px; line-height: 28px; color: #606060; width: 90%; margin: 20px 5%; font-weight: 600;}


/* Form Content Area */
.form-area {background-color: #f7f7f7; margin: 60px auto; padding: 80px 0;}
/* Form Header */
.form-area h3 {font-size: 30px; line-height: 41px; color: #004b87; text-align: center; padding: 0 5%; margin-bottom: 40px;}

/* Form Fields Styling – Act On */
.form-area p {color: #ffffff; font-weight: 500; font-size: 16px; text-align: left; text-align: center; padding: 0 35px; max-width: 740px; margin: 45px auto 35px auto; line-height: 24px;}
.ao-column-inner {padding: 0 30px;}
.ao-form-label {color: #8c8c8c; font-weight: 500; text-align: left; padding-bottom: 5px; font-size: 16px !important;}
.ao-form-field {height: 60px; border-radius: 4px !important;}
.ao-required {font-weight: 300;}
.ao-form-error-message {font-size: 14px; color: black; padding-top: 5px;}
/* Form Button */
.ao-form-submit {background-color: #41b6e6 !important; height: 60px; font-weight: 700 !important; 
  margin: 30px auto 0 auto; justify-content: center; font-family: montserrat;}*/
/* Button Width */
.ao-form-submit button {width: 100% !important;}
#block-b1671048064538 button {width: 100% !important;}
/* Button Hover */
.ao-form-submit:hover {background-color: #004b87 !important; transition: 0.4s;}

/* Footer Information */
.footer {margin: 50px auto 100px auto;}
.footer a {color: #41b6e6;}
.footer p {max-width: 450px; text-align: center; padding: 15px 8%; margin: 0 auto; color: #606060;}
.footer .asterisk {font-size: 14px; font-weight: 500; margin: 0 auto;}


/* N E W – P A G E */


/* submission thank you page */
.submit-logo {width: 180px; margin: 55px auto 40px auto;}
.submit-logo img {width: 100%;}
h3 {color: #41b6e6; font-size: 37px; font-weight: 700; text-align: center; margin: 0 auto; max-width: 350px;}
.thank-you-sub {color: #606060; font-size: 16px; font-weight: 500; text-align: center; margin: 40px auto; padding: 0 10%;} 


/* B R E A K – P O I N T */


@media only screen and (min-width: 320px) {

/* Hero Image */
   .hero-section {padding-bottom: 240px;}
  .hero-section .hero-img {border-radius: 0 0 90px 90px; }
    
/* Backpack Artwork */
    .backpack-artwork {top: 330px;}
    .backpack-artwork img {width: 440px;}
}


  
/* B R E A K – P O I N T */


@media only screen and (min-width: 480px) {

/* Hero Banner Section */
  .hero-section {padding-bottom: 220px;}  
  
/* Rings Left */
  .hero-section .circle-left-out {height: 210px; width: 210px;
    border: solid 15px rgba(65, 182, 230, 0.9); border-radius: 210px; 0.9; top: 25px; left: -110px;}
  .hero-section .circle-left-in {position: absolute; height: 150px; width: 150px;
    border: solid 15px rgba(65, 182, 230, 0.9); border-radius: 150px; 0.9; top: 55px; left: -80px;}

/* Rings Right */
  .hero-section .circle-right-out {height: 170px; width: 170px;
    border: solid 15px rgba(65, 182, 230, 0.9); border-radius: 170px; top: 220px; right: -90px;}
  .hero-section .circle-right-in {height: 110px; width: 110px;
    border: solid 15px rgba(65, 182, 230, 0.9); border-radius: 110px; top: 250px; right: -60px;}
  
/* Backpack Artwork */
  .backpack-artwork {top: 280px;}
  .backpack-artwork img {width: 480px;}

/* Hero Image(s) */
  .hero-section .hero-img {border-radius: 0 0 120px 120px; margin: 0 6%; width: 88%;}
  
/* Info / Paragraph Columns */
  .info-block h4 {max-width: none; margin: 0 auto 50px auto;}  
  
/* Form Content Area */
.form-area h3 {max-width: none; margin-bottom: 55px;}

}


/* B R E A K – P O I N T */


@media only screen and (min-width: 600px) {
  
  #ao-form-04f7c356-0833-4af2-8580-fb3eb0c086b3 .ao-row:nth-child(1) .ao-block-wrapper:nth-child(9) {width: 100%}
  .ao-column-inner {display: flex; flex-direction: row; flex-wrap: wrap; max-width: 950px; margin: 0 auto; justify-content: center;}
  .ao-block-wrapper {width: 46%; padding: 0 2%;}
  .ao-form-label {font-size: 18px;}
  .ao-form-submit {width: 300px;}

}


/* B R E A K – P O I N T */


@media only screen and (min-width: 768px) {
 
/* ECF Logo Fixed Bar */
  .ecf-logo {height: 63px; padding: 18px 0 14px 0;}
  
/* Hero Banner Section */
 .hero-section {padding-bottom: 275px;}  
  
/* Backpack Artwork */
  .backpack-artwork {top: 320px;}
  
  .backpack-artwork img {width: 590px;}

/* Rings Left */
  .hero-section .circle-left-out {height: 290px; width: 290px;
    border: solid 20px rgba(65, 182, 230, 0.9); border-radius: 290px; 0.9; top: 45px; left: -100px;}
  .hero-section .circle-left-in {position: absolute; height: 220px; width: 220px;
    border: solid 20px rgba(65, 182, 230, 0.9); border-radius: 220px; 0.9; top: 80px; left: -65px;}

/* Rings Right */
  .hero-section .circle-right-out {height: 240px; width: 240px;
    border: solid 20px rgba(65, 182, 230, 0.9); border-radius: 240px; top: 280px; right: -60px;}
  .hero-section .circle-right-in {height: 170px; width: 170px;
    border: solid 20px rgba(65, 182, 230, 0.9); border-radius: 170px; top: 315px; right: -25px;}
  
/* Hero Image(s) */
  .hero-section .hero-img {margin: 0 5%; border-radius: 0 0 180px 180px; width: 90%; height: 500px;}

/* Info / Paragraph Columns */
  .info-block {margin: 0 auto 100px auto;}
  .info-block h4 {font-size: 28px;}
  .info-columns {display: flex; flex-direction: row; flex-wrap: no-wrap;}
  .column-left-top {width: 44%; margin: 0 3%;}
  .column-right-btm {width: 44%; margin: 0 3%;}

/* Form Header */
  .form-area h3 {max-width: none; margin-bottom: 70px; font-size: 36px;}
  
/* Footer Information */
  p {font-size: 18px; line-height: 27px; margin: 40px auto 55px auto;}

  .footer p {margin: 40px auto 0 auto; padding: 0 30px; font-size: 17px;}
  .footer .asterisk {margin: 20px auto 0 auto; padding: 0;}
  
  
/* N E W – P A G E */


/* submission thank you page */
  
  .submit-logo {width: 210px; margin: 90px auto 45px auto;}
  h3 {font-size: 50px; max-width: 450px;}
  .thank-you-sub {font-size: 20px; margin: 40px auto;} 
  
}