@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;600;700;800&display=swap');

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

body{
  font-family:'Baloo 2', cursive;
  background:#fff8ec;
  color:#0a1f44;
}

/* NAVBAR */
.hero h2{
  font-size:68px;
}
.hero-image::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle, rgba(255,211,56,.22), transparent 65%);
  z-index:-1;
}
.hero-image::before{
  content:"";
  position:absolute;
  width:500px;
  height:500px;
  background:radial-gradient(
    circle,
    rgba(255,211,56,.22) 0%,
    rgba(255,79,147,.12) 35%,
    transparent 70%
  );

  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:-1;
}

.hero-image{
  height:730px;
  border-radius:40px;

  background-image:url("images/hero-kids2.png");
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center bottom;
  position:relative;

  transform:scale(1.45);
  transform-origin:center;
  transform:scale(1.45) translateY(-180px);
   rotate:-2deg;
}

/* FUN NAVIGATION */

.fun-nav{
  display:flex;
  align-items:center;
  gap:28px;
  flex-wrap:wrap;
   transform:translateY(-25px);
}


.fun-nav a{
  position:relative;
  color:white;
  text-decoration:none;
  font-size:18px;
  font-weight:900;
  text-transform:uppercase;
  transition:.2s;
}

.fun-nav a:hover{
  transform:translateY(-2px);
}

/* UNDERLINES */

.fun-nav a span{
  position:absolute;
  left:0;

 
  border-radius:999px;
  transform:rotate(-2deg);
   height:4px;
  bottom:-8px;
}

/* COLORS */

.nav-home span{
  width:85px;
  background:#ffd338;
}

.nav-pink span{
  width:70px;
  background:#ff7a2f;
}

.nav-green span{
  width:105px;
  background:#9ad93a;
  transform:rotate(1deg);
}

.nav-blue span{
 width:65px;
  background:#00c4ff;
   transform:rotate(-3deg);
}

/* REGISTER BUTTON */

.register-btn{
  background:#ff4f93;
  color:white;
  padding:16px 28px;
  border-radius:18px;
  font-size:20px;
  font-weight:900;
  margin-left:15px;
  box-shadow:0 10px 20px rgba(0,0,0,.15);
}

.register-btn:hover{
  background:#ff2f7d;
  transform:scale(1.05);
}

.logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.site-logo {
  max-height: 170px;
  width: auto;
  display: block;
}

.header-nav {
  display: flex;
  gap: 30px;
}

.header-nav a {
  color: white;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  transition: opacity 0.3s ease;
}

.header-nav a:hover {
  opacity: 0.7;
}

@media screen and (max-width: 768px) {
  .custom-header {
    padding: 15px 20px;
  }

  .site-logo {
    max-height: 55px;
  }

  .header-nav {
    gap: 15px;
  }

  .header-nav a {
    font-size: 14px;
  }
}

.navbar{
    background:#071a3c;
    color:white;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 5%;
 
  }
.header-title-text {
    display: none !important;
  }
  
  .header-title-logo img {
    display: block !important;
    max-height: 100px !important;
    width: auto !important;
  }

.logo{
  display:flex;
  align-items:center;
  gap:12px;
}

.logo h1{
  font-size:32px;
  line-height:1;
}

.logo p{
  color:#ffd338;
  font-weight:800;
  letter-spacing:2px;
}

.star{
  font-size:40px;
}

nav{
  display:flex;
  gap:24px;
  align-items:center;
  flex-wrap:wrap;
}

nav a{
  color:white;
  text-decoration:none;
  font-weight:700;
}

.register-btn{
  background:#ff4f93;
  padding:12px 20px;
  border-radius:12px;
}

/* HERO */

html{
    scroll-behavior:smooth;
  }

.hero{
  background:#071a3c;
  color:white;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  padding:80px 5%;
  align-items:center;
}

.hero h2{
  font-size:90px;
  line-height:.9;
  margin-bottom:30px;
}

.pink{
  color:#ff4f93;
}

.yellow{
  color:#ffd338;
}

.hero p{
  font-size:24px;
  line-height:1.5;
  margin-bottom:30px;
}

.main-btn{
  background:#ff4f93;
  color:white;
  padding:18px 28px;
  border-radius:18px;
  text-decoration:none;
  display:inline-block;
  font-weight:800;
}




/* NEW SUMMER CAMP SECTION */

.summer-camp-new{
    background:#dff6ff;
    padding:100px 5%;
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:70px;
    align-items:center;
  }
  
  .camp-label{
    color:#071a3c;
    font-size:22px;
    font-weight:900;
    letter-spacing:3px;
    margin-bottom:18px;
  }
  
  .summer-left h2{
    color:#071a3c;
    font-size:64px;
    line-height:1;
    margin-bottom:28px;
    font-weight:900;
  }
  
  .camp-description{
    color:#243b5a;
    font-size:23px;
    line-height:1.55;
    max-width:780px;
    margin-bottom:35px;
  }
  
  .camp-details-row{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-bottom:35px;
  }
  
  .camp-detail-card{
    background:white;
    border-radius:24px;
    padding:26px;
    box-shadow:0 10px 24px rgba(0,0,0,.08);
  }
  
  .camp-detail-card h3{
    color:#ff4f93;
    font-size:30px;
    margin-bottom:12px;
    font-weight:900;
  }
  
  .camp-detail-card p{
    color:#071a3c;
    font-size:20px;
    font-weight:700;
    line-height:1.3;
  }
  
  .camp-register-btn{
    display:inline-block;
    background:#ffd338;
    color:#071a3c;
    text-decoration:none;
    padding:18px 34px;
    border-radius:20px;
    font-size:22px;
    font-weight:900;
    text-transform:uppercase;
    box-shadow:0 10px 22px rgba(0,0,0,.1);
    transition:.2s;
  }
  
  .camp-register-btn:hover{
    transform:scale(1.05);
  }
  
  /* EXPECT CARD */
  
  .summer-expect-card{
    background:white;
    border-radius:34px;
    padding:42px;
    box-shadow:0 14px 30px rgba(0,0,0,.1);
    transform:rotate(1.5deg);
  }
  
  .summer-expect-card h3{
    color:#ff4f93;
    font-size:42px;
    margin-bottom:25px;
    font-weight:900;
  }
  
  .summer-expect-card ul{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:18px;
  }
  
  .summer-expect-card li{
    color:#071a3c;
    font-size:22px;
    line-height:1.35;
    font-weight:700;
  }
  
  .age-note{
    display:inline-block;
    margin-top:30px;
    background:#7439bf;
    color:white;
    padding:12px 22px;
    border-radius:999px;
    font-size:20px;
    font-weight:900;
  }
  
  /* MOBILE */
  
  @media(max-width:900px){
  
    .summer-camp-new{
      grid-template-columns:1fr;
      padding:75px 5%;
    }
  
    .summer-left h2{
      font-size:46px;
    }
  
    .camp-details-row{
      grid-template-columns:1fr;
    }
  
    .summer-expect-card{
      transform:none;
    }
  
  }
/* PRODUCTION SECTION */

.production-section{
    position:relative;
    overflow:hidden;
    background:#071a3c;
    padding:110px 5%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
  }
  
  .production-overlay{
    position:absolute;
    inset:0;
    background:
      radial-gradient(circle at top left, rgba(255,211,56,.18), transparent 25%),
      radial-gradient(circle at bottom right, rgba(255,79,147,.15), transparent 30%);
    pointer-events:none;
  }
  
  .production-content{
    position:relative;
    z-index:2;
    color:white;
  }
  
  .production-tag{
    display:inline-block;
    background:#ff4f93;
    color:white;
    padding:12px 20px;
    border-radius:999px;
    font-weight:900;
    font-size:18px;
    margin-bottom:25px;
  }
  
  .production-content h2{
    font-size:82px;
    line-height:.9;
    margin-bottom:30px;
    color:#ffd338;
  }
  
  .production-content p{
    font-size:22px;
    line-height:1.6;
    margin-bottom:18px;
    max-width:650px;
    color:white;
  }
  
  .production-btn{
    display:inline-block;
    margin-top:20px;
    background:#ffd338;
    color:#071a3c;
    text-decoration:none;
    padding:18px 30px;
    border-radius:18px;
    font-size:20px;
    font-weight:900;
    transition:.2s;
  }
  
  .production-btn:hover{
    transform:scale(1.05);
  }
  
  /* TIMELINE */
  
  .timeline{
    position:relative;
    z-index:2;
  }
  
  .timeline-item{
    display:flex;
    gap:22px;
    align-items:flex-start;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    border-radius:24px;
    padding:24px;
    backdrop-filter:blur(8px);
  }
  
  .timeline-icon{
    min-width:75px;
    height:75px;
    border-radius:50%;
    background:#ffd338;
    color:#071a3c;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:34px;
  }
  
  .timeline-item h3{
    font-size:30px;
    margin-bottom:8px;
    color:white;
    text-transform:uppercase;
  }
  
  .timeline-item p{
    color:white;
    font-size:18px;
    line-height:1.5;
  }
  
  .timeline-line{
    width:6px;
    height:40px;
    background:#ff4f93;
    margin:0 auto;
    border-radius:999px;
  }
  
  @media(max-width:900px){
  
    .production-section{
      grid-template-columns:1fr;
    }
  
    .production-content h2{
      font-size:58px;
    }
  
  }

  /* CONTACT SECTION */

.contact-section{
    background:#fff8ec;
    padding:100px 5%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:start;
  }
  
  .contact-tag{
    display:inline-block;
    background:#ff4f93;
    color:white;
    padding:12px 20px;
    border-radius:999px;
    font-size:18px;
    font-weight:900;
    margin-bottom:25px;
  }
  
  .contact-left h2{
    font-size:72px;
    line-height:.92;
    color:#071a3c;
    margin-bottom:28px;
  }
  
  .contact-left p{
    font-size:22px;
    line-height:1.6;
    color:#243b5a;
    margin-bottom:18px;
    max-width:650px;
  }
  
  .contact-info{
    margin-top:35px;
    display:flex;
    flex-direction:column;
    gap:22px;
  }
  
  .contact-item{
    display:flex;
    gap:18px;
    align-items:flex-start;
  }
  
  .contact-item span{
    font-size:34px;
  }
  
  .contact-item h3{
    font-size:24px;
    color:#071a3c;
    margin-bottom:4px;
  }
  
  .contact-item p{
    font-size:20px;
    margin:0;
  }
  
  /* FORM */
  
  .contact-form-box{
    background:#071a3c;
    border-radius:32px;
    padding:40px;
    color:white;
    box-shadow:0 14px 30px rgba(0,0,0,.12);
  }
  
  .contact-form-box h3{
    font-size:42px;
    margin-bottom:25px;
  }
  
  .contact-form-box form{
    display:flex;
    flex-direction:column;
    gap:18px;
  }
  
  .contact-form-box input,
  .contact-form-box textarea{
    border:none;
    border-radius:18px;
    padding:18px;
    font-size:18px;
    font-family:inherit;
  }
  
  .contact-form-box textarea{
    min-height:180px;
    resize:vertical;
  }
  
  .contact-form-box button{
    background:#ffd338;
    color:#071a3c;
    border:none;
    border-radius:18px;
    padding:18px 24px;
    font-size:20px;
    font-weight:900;
    cursor:pointer;
    transition:.2s;
  }
  
  .contact-form-box button:hover{
    transform:scale(1.03);
  }
  
  /* FOOTER */
  
  .site-footer{
    background:#071a3c;
    color:white;
    text-align:center;
    padding:50px 5%;
  }
  
  .footer-logo{
    height:95px;
    width:auto;
    margin-bottom:20px;
  }
  
  .site-footer p{
    font-size:18px;
    margin-bottom:10px;
  }
  
  /* MOBILE */
  
  @media(max-width:900px){
  
    .contact-section{
      grid-template-columns:1fr;
    }
  
    .contact-left h2{
      font-size:52px;
    }
  
  }
/* FOOTER */

footer{
  background:#071a3c;
  color:white;
  padding:50px 5%;
  text-align:center;
}

footer p{
  margin-top:20px;
  font-size:20px;
}



/* ABOUT / PROGRAMS */

.about-section{
    padding:80px 5%;
    background:#fff8ec;
  }
  
  .about-intro{
    max-width:950px;
    margin-bottom:50px;
  }
  
  .about-intro h3{
    font-size:52px;
    margin-bottom:20px;
    color:#071a3c;
  }
  
  .about-intro p{
    font-size:22px;
    line-height:1.5;
    margin-bottom:18px;
    color:#243b5a;
  }
  
  .program-cards{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
  }
  
  .program-card{
    border-radius:28px;
    padding:35px;
    color:white;
    box-shadow:0 12px 24px rgba(0,0,0,.1);
  }
  
  .program-card h4{
    font-size:38px;
    line-height:1.1;
    margin-bottom:20px;
  }
  
  .program-card p{
    font-size:21px;
    line-height:1.45;
    margin-bottom:15px;
  }
  
  .pink-card{
    background:#ff4f93;
  }
  
  .blue-card{
    background:#0799b7;
  }
  
  .age-badge{
    display:inline-block;
    background:#ffd338;
    color:#071a3c;
    padding:12px 18px;
    border-radius:999px;
    font-weight:800;
    font-size:20px;
    margin-top:10px;
  }
  
  @media(max-width:900px){
    .program-cards{
      grid-template-columns:1fr;
    }
  
    .about-intro h3{
      font-size:42px;
    }
  }

  .about-fun-section{
    background:#fff8ec;
    padding:80px 5%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:55px;
    align-items:center;
    position:relative;
  }
  
  .about-copy h2{
    font-size:56px;
    line-height:1.05;
    color:#7038bd;
    margin-bottom:25px;
    font-weight:900;
  }
  
  .about-copy h2 span{
    color:#0799b7;
  }
  
  .about-copy p{
    font-size:21px;
    line-height:1.55;
    color:#10294f;
    margin-bottom:16px;
    max-width:650px;
  }
  
  .about-highlight-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
  }
  
  .highlight-box{
    min-height:145px;
    border-radius:22px;
    padding:25px;
    display:flex;
    align-items:center;
    gap:18px;
    color:#071a3c;
    box-shadow:0 10px 20px rgba(0,0,0,.08);
    transform:rotate(-1deg);
  }
  
  .highlight-box:nth-child(even){
    transform:rotate(1deg);
  }
  
  .highlight-box span{
    font-size:48px;
    line-height:1;
  }
  
  .highlight-box h3{
    font-size:28px;
    line-height:1.05;
    text-transform:uppercase;
    font-weight:900;
  }
  
  .yellow-box{
    background:#ffd338;
  }
  
  .pink-box{
    background:#ff4f93;
    color:white;
  }
  
  .teal-box{
    background:#0799b7;
    color:white;
  }
  
  .purple-box{
    background:#7439bf;
    color:white;
  }
  
  @media(max-width:900px){
    .about-fun-section{
      grid-template-columns:1fr;
    }
  
    .about-copy h2{
      font-size:42px;
    }
  
    .about-highlight-grid{
      grid-template-columns:1fr;
    }
  }

/* SUMMER CAMP REGISTRATION PAGE */

.summer-registration-page{
  background:#dff6ff;
  min-height:100vh;
  padding:70px 5% 100px;
}

.summer-registration-header{
  text-align:center;
  max-width:950px;
  margin:0 auto 45px;
}

.summer-registration-header h1{
  color:#071a3c;
  font-size:72px;
  line-height:.95;
  margin-bottom:25px;
}

.summer-registration-header p{
  color:#243b5a;
  font-size:24px;
  line-height:1.5;
}

.summer-registration-details{
  max-width:1100px;
  margin:0 auto 45px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}

.summer-detail-card{
  background:white;
  border-radius:24px;
  padding:28px;
  text-align:center;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}

.summer-detail-card h3{
  color:#ff4f93;
  font-size:30px;
  margin-bottom:10px;
}

.summer-detail-card p{
  color:#071a3c;
  font-size:24px;
  font-weight:900;
}

.summer-registration-info{
  max-width:1000px;
  margin:0 auto 45px;
  background:#071a3c;
  color:white;
  padding:38px;
  border-radius:32px;
  box-shadow:0 14px 30px rgba(0,0,0,.12);
}

.summer-registration-info h2{
  color:#ffd338;
  font-size:42px;
  margin-bottom:18px;
}

.summer-registration-info p{
  font-size:21px;
  line-height:1.55;
  margin-bottom:14px;
}

@media(max-width:900px){
  .summer-registration-header h1{
    font-size:48px;
  }

  .summer-registration-details{
    grid-template-columns:1fr;
  }
}

/* 6 WEEK REGISTRATION PAGE */

.production-registration-page{
  background:#071a3c;
  min-height:100vh;
  padding:70px 5% 100px;
}

.production-registration-header{
  text-align:center;
  max-width:950px;
  margin:0 auto 50px;
}

.production-registration-header h1{
  color:#ffd338;
  font-size:78px;
  line-height:.9;
  margin-bottom:24px;
}

.production-registration-header p{
  color:white;
  font-size:24px;
  line-height:1.5;
}

/* EXPERIENCE GRID */

.production-experience-grid{
  max-width:1200px;
  margin:0 auto 50px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}

.production-experience-card{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(10px);
  border-radius:28px;
  padding:30px;
  text-align:center;
}

.production-experience-card span{
  font-size:52px;
  display:block;
  margin-bottom:16px;
}

.production-experience-card h3{
  color:#ffd338;
  font-size:28px;
  margin-bottom:12px;
}

.production-experience-card p{
  color:white;
  font-size:18px;
  line-height:1.45;
}

/* INFO BOX */

.production-info-box{
  max-width:1000px;
  margin:0 auto 50px;
  background:#ff4f93;
  color:white;
  padding:42px;
  border-radius:34px;
  box-shadow:0 16px 30px rgba(0,0,0,.18);
}

.production-info-box h2{
  font-size:44px;
  margin-bottom:20px;
}

.production-info-box p{
  font-size:21px;
  line-height:1.6;
  margin-bottom:16px;
}

/* MOBILE */

@media(max-width:900px){

  .production-registration-header h1{
    font-size:52px;
  }

  .production-experience-grid{
    grid-template-columns:1fr;
  }

}

/* FINAL HERO FIT FIX */

.navbar{
  padding:18px 8% 0;
  min-height:auto;
}



.hero{
  min-height:calc(100vh - 115px);
  padding:20px 5% 30px;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:55px;
}

.hero h2{
  font-size:70px;
  line-height:.92;
  margin-bottom:28px;
}

.hero p{
  font-size:21px;
  line-height:1.45;
  margin-bottom:24px;
  max-width:650px;
}


.hero-left{
  transform:translateY(-20px);
}

.hero-right{
  transform:translateY(-10px);
}

/* =========================
   MOBILE RESPONSIVE FIXES
========================= */

@media(max-width:900px){

  /* NAVBAR */

  .navbar{
    padding:18px 5% 10px;
    flex-wrap:wrap;
    gap:20px;
    justify-content:center;
    text-align:center;
  }

  .logo{
    width:100%;
    display:flex;
    justify-content:center;
  }

  .logo img{
    height: 115px;
    width:auto;
  }

  /* ONLY KEEP REGISTER BUTTON */

  .fun-nav{
    width:100%;
    justify-content:center;
  }

  .fun-nav a:not(.register-btn){
    display:none;
  }

  .register-btn{
    font-size:18px;
    padding:14px 22px;
    margin-left:0;
  }

  /* HERO */

  .hero{
    grid-template-columns:1fr;
    text-align:center;
    padding:35px 5% 45px;
    min-height:auto;
    gap:35px;
  }

  .hero-left{
    transform:none;
  }

  .hero-right{
    transform:none;
  }

  .hero h2{
    font-size:52px;
    line-height:.95;
    margin-bottom:22px;
  }

  .hero p{
    font-size:20px;
    line-height:1.5;
    max-width:100%;
    margin-bottom:24px;
  }

  .hero-image{
    height:300px;
    max-height:none;
    font-size:28px;
  }

  /* ABOUT */

  .about-fun-section{
    grid-template-columns:1fr;
    gap:35px;
    padding:65px 5%;
  }

  .about-copy h2{
    font-size:42px;
  }

  .about-copy p{
    font-size:20px;
  }

  .about-highlight-grid{
    grid-template-columns:1fr;
  }

  /* SUMMER CAMP */

  .summer-camp-new{
    grid-template-columns:1fr;
    gap:40px;
    padding:70px 5%;
  }

  .summer-left h2{
    font-size:44px;
  }

  .camp-description{
    font-size:20px;
  }

  .camp-details-row{
    grid-template-columns:1fr;
  }

  .camp-detail-card h3{
    font-size:26px;
  }

  .camp-detail-card p{
    font-size:20px;
  }

  .summer-expect-card{
    transform:none;
    padding:32px;
  }

  .summer-expect-card h3{
    font-size:34px;
  }

  .summer-expect-card li{
    font-size:20px;
  }

  /* PRODUCTION SECTION */

  .production-section{
    grid-template-columns:1fr;
    gap:45px;
    padding:75px 5%;
  }

  .production-content h2{
    font-size:52px;
  }

  .production-content p{
    font-size:20px;
  }

  .timeline-item{
    padding:20px;
  }

  .timeline-item h3{
    font-size:24px;
  }

  .timeline-item p{
    font-size:17px;
  }

  .timeline-icon{
    min-width:60px;
    height:60px;
    font-size:28px;
  }

  /* CONTACT */

  .contact-section{
    grid-template-columns:1fr;
    gap:45px;
    padding:75px 5%;
  }

  .contact-left h2{
    font-size:48px;
  }

  .contact-left p{
    font-size:20px;
  }

  .contact-form-box{
    padding:30px;
  }

  .contact-form-box h3{
    font-size:34px;
  }

  /* REGISTRATION PAGES */

  .registration-header h1,
  .summer-registration-header h1,
  .production-registration-header h1{
    font-size:48px;
  }

  .registration-header p,
  .summer-registration-header p,
  .production-registration-header p{
    font-size:20px;
  }

  .summer-registration-details{
    grid-template-columns:1fr;
  }

  .production-experience-grid{
    grid-template-columns:1fr;
  }

  .production-info-box{
    padding:32px;
  }

  .production-info-box h2{
    font-size:34px;
  }

  .production-info-box p{
    font-size:19px;
  }

  /* IFRAME */

  iframe{
    min-height:1350px;
  }

  .registration-frame-wrapper{
    padding:10px;
    border-radius:24px;
  }

  .registration-frame-wrapper iframe{
    border-radius:18px;
  }

  /* FOOTER */

  .site-footer{
    padding:40px 5%;
  }

  .footer-logo{
    height:70px;
  }

  .site-footer p{
    font-size:16px;
  }

}

/* FINAL HERO HEIGHT + KIDS ALIGNMENT FIX */

.hero{
  min-height:calc(100vh - 120px);
  max-height:calc(100vh - 120px);
  padding:0 5%;
  overflow:hidden;
  display:grid;
  grid-template-columns:1fr 1.25fr;
  align-items:end;
}

.hero-left{
  align-self:center;
  transform:translateY(-50px);
}

.hero-right{
  height:100%;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  overflow:hidden;
}

.hero-image{
  height:70%;
  width:100%;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center bottom;
  transform:scale(1.35);
  transform-origin:bottom center;
  margin-bottom:0;
}

.hero h2{
  font-size:64px;
  line-height:.92;
}

.hero p{
  font-size:21px;
  max-width:650px;
}

@media(max-width:900px){

  .hero{
    min-height:auto;
    padding:30px 5% 50px;
    grid-template-columns:1fr;
    text-align:center;
  }

  .hero-right{
    display:none;
  }

  .hero h2{
  font-size:44px;
  line-height:.95;
  word-break:keep-all;
}

  .hero p{
    font-size:20px;
    max-width:100%;
    margin:0 auto 24px;
  }

}

@media(max-width:900px){

  .hero-left{
    width:100%;
    max-width:100%;
    overflow:visible;
  }

  .hero h2{
    display:block;
    width:100%;
    max-width:100%;
    font-size:55px;
    line-height:1;
    letter-spacing:0;
    white-space:normal;
    overflow:visible;
    transform:none;
  }

}

/* FINAL MOBILE HERO FIX */

@media(max-width:900px){

  .hero{
    max-height:none !important;
    min-height:auto !important;
    overflow:visible !important;
    padding:35px 5% 55px !important;
    display:block !important;
    text-align:center;
  }

  .hero-left{
    transform:none !important;
    padding:0 !important;
    margin:0 auto !important;
    width:100% !important;
    max-width:100% !important;
    overflow:visible !important;
  }

  .hero-right{
    display:none !important;
  }

  .hero h2{
    font-size:48px !important;
    line-height:1.08 !important;
    margin:0 0 24px !important;
    padding-top:20px !important;
    overflow:visible !important;
    white-space:normal !important;
  }

  .hero p{
    font-size:20px !important;
    line-height:1.45 !important;
    max-width:100% !important;
    margin:0 auto 26px !important;
  }
}