@import url('https://fonts.googleapis.com/css2?family=Teko:wght@300&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Teko", sans-serif;
  line-height: 1.6;
  background: #fff;
  color: #666666;
  letter-spacing:1px;
}

.hero {
  background: url('images/header-bg.jpg') no-repeat center center/cover;
  text-align: center;
  color: white;
  position: relative; padding: 80px 0;
}

.overlay {
  background-color: rgba(186, 12, 47, 0.70);
  padding: 60px 92px;
  border-radius: 0;
  max-width: 850px;
  margin: 0 auto;
}
.overlay h1 {
    font-size: 92px;
    line-height: 92px;
    font-weight: 700;
    padding: 0;
    margin: 0 auto 30px;
    text-transform: uppercase;
    letter-spacing: 5px;
}
.logo {
    width: 231px;
    margin-bottom: 30px;
}

.tryout-dates {
  font-size: 48px;
  line-height: 60px;
  font-weight: 600;
}

span.devider{background: #fff; height: 10px; width: 450px; margin:0 auto 45px; display: block;}

.container{ max-width: 1000px; margin: 0 auto;}

.info-section {
  margin: 80px 0 60px;
  background:#fff; position: relative;
}
.info-section .image-right {
    position: absolute;
    right: 0;
    top: 0;
    width: 45%;
    height: 100%;
}

.info-section .text {
  max-width: 573px;
  font-size: 32px;
    line-height: 35px;
    font-weight: 300;
}
.info-section .text p{margin-bottom: 20px;}
.info-section .text p.date-box{
    margin: 32px 0 43px;
    border-left: 8px solid #BA0C2F;
    padding-left: 20px;
    font-size: 38px;
    line-height: 48px;
	font-weight:600;
}
.image-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.button {
    display: inline-block;
    font-size: 37px;
    line-height: 37px;
    background: #BA0C2F;
    color: #fff;
    padding: 15.5px 27px 10px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 3px;
}
.button:hover{background: #000;}
  .acc-container {
    width: 100%;
  }
.have-question-box {
    font-size: 36px;
    color: #444;
    line-height: 35px;
    font-weight: 400;
    background: #F5F5F5;
    padding: 34px 0;
    clear: both;
    display: block;
    text-align: center;
    margin-bottom: 83px;
}
.have-question-box a{ color: #BA0C2F;}
.have-question-box a:hover{ color: #444;}

.faq-section h2{ display: flex; padding: 0; margin: 0 ; justify-content: space-between; align-items: center; letter-spacing: 3px; font-size: 60px; color: #000;}
.red-devider{ height: 10px; width: 400px; margin: 0 auto 50px; background: #BA0C2F; display: block;}
  .acc {
    margin-bottom: 30px;
  }
  
  .acc-head {
    background-color: #F5F5F5;
    padding: 14.5px 40px;
    font-size: 32px;
    position: relative;
    cursor: pointer;
    border-radius: 5px;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15);
}
  
   .acc-head::before,
   .acc-head::after {
    content: '';
    position: absolute;
    top: 50%;
    background-color: #BA0C2F;
    transition: all .3s;
   }
  
   .acc-head::before {
    right: 30px;
    width: 3px;
    height: 20px;
    margin-top: -10px;
  }
  
  .acc-head::after {
    right: 21px;
    width: 20px;
    height: 3px;
    margin-top: -2px;
  }
  
.acc-head p {
    color: #666;
    font-weight: 400;
}
  
.acc-content {
    padding: 25px 40px;
    display: none;
    font-size: 28px;
    line-height: 32px;
}

.acc-content a{color:#BA0C2F;}
.acc-content a:hover{color:#666;}
          
  .acc-head.active::before {
      transform: rotate(90deg);
  }


.footer-cta {
    margin: 80px 0 40px;
    color: #fff;
    position: relative;
}
.footer-cta::before{ content: url('images/footer-cta-bg.png');
  display: inline-block; /* Or block, depending on layout */
  width: 150px; /* Optional: control size */
  height: 122px;
  margin-right: 8px; /* spacing if needed */
  vertical-align: middle;position: absolute; right: 0; top: 50%; transform: translatey(-50%);}
.tryout-box {
    font-size: 32px;
    line-height: 45px;
    color: #666;
    max-width: 450px;
    margin-left: auto;
    text-align: center;
    padding: 85px 0;
	font-weight:600;
}
.footer-cta .button{ margin-top: 40px;}
.footer-cta img {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 50%;
    height: 100%;
        object-fit: cover;
}
footer {
    background-color: #F5F5F5;
    color: #666;
    text-align: center;
    padding: 35px 0;
    font-size: 22px;
    line-height: 25px;
}

footer a {
  color: #BA0C2F;
  text-decoration: none;
}
footer a:hover {color: #666;}
.brk{display:none;}
@media (max-width:1200px){
  .info-section .text {max-width: 520px;}
}
@media (max-width:1024px){
.overlay { padding: 30px;}
}
@media (max-width:1000px){
.container {margin: 0 20px;}
.info-section .image-right {
    position: relative;
    right: 0;
    top: 0;
    width: auto;
    height: auto;
    margin: 0 20px; text-align: center;
}
.image-right img {
    width: 100%;
    height: auto;
    margin: 20px 0;
}
.info-section .text {
        max-width: 100%;
    }
.footer-cta img {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 94%;
    height: auto;
    object-fit: cover;
    margin: 20px auto;
    display: block;
}
.tryout-box {
    max-width: 100%;
    padding: 20px 0;
}
.acc-head {
    font-size: 28px; line-height:normal;
  }
  .acc-content {
    font-size: 22px;
    line-height: 28px;
}
.have-question-box {font-size: 30px;}
span.devider,.red-devider{width: 100%;}
.overlay h1 {
    font-size: 42px;
    line-height: 50px;
  }
  .tryout-dates {
    font-size: 26px;
    line-height: 40px;
    font-weight: 600;
}
.info-section .text p.date-box {
    font-size: 32px;
    line-height: 42px;
}
.button {
    display: inline-block;
    font-size: 26px;
    line-height: 36px;
  }
  .faq-section h2{ display: block;font-size: 36px;text-align: center;}
  .faq-section h2 img{ display: block; margin:0 auto 15px;}
  .have-question-box{ margin-bottom: 40px;}
  .info-section{margin: 40px 0;}

}

@media (max-width:768px){.overlay h1 { font-size: 36px; line-height: 46px; }.info-section .text {font-size: 24px; line-height: 30px;}.info-section .text p.date-box { font-size: 26px; line-height: 36px; }.button { font-size: 24px; line-height: 34px; }.acc-head {padding: 14.5px 40px 14.5px 10px;}.acc-content { padding: 25px 10px 25px 10px;}.footer-cta::before{display:none;}.brk{display:block;}.logo { max-width: 150px;} span.devider, .overlay h1{margin-bottom:10px;}.faq-section h2 img{max-width:50px;} .acc-head { font-size: 23px;}}

@media (max-width: 370px) {.overlay h1 { font-size: 28px; line-height: 38px; } .tryout-dates { font-size: 23px; line-height: 33px;}.info-section .text p.date-box { font-size: 22px; line-height: 32px; }.button { font-size: 18px; line-height: 34px; }.have-question-box { font-size: 24px; }.faq-section h2 { display: block; font-size: 29px; text-align: center; }.tryout-box { font-size: 23px; line-height: 33px;}.acc-head Specificity: (0,1,0) { font-size: 22px; line-height: normal; }.logo { max-width: 150px;}}