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

h2{
  font-size: clamp(4rem, 3.4175rem + 1.5534vw, 6.4rem);
  line-height: 130%;
  margin-bottom: 10rem
}

a {
  cursor: pointer!important;
  text-decoration: none
}

html {
  font-family: Poppins,sans-serif;
  font-size: 52.5%;
  scroll-behavior: smooth;
  
}

body {
    background-color: #000
}

.degrade-text {
    background: linear-gradient(90deg,#ff7b1c,#ffc531);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.container {
    margin: 0 auto;
    max-width: 144rem;
    padding: 0 3rem;
    width: 100%
}

/* header {
    height: 11.2rem;
    left: 0;
    position: absolute;
    top: 3rem;
    transition: all .3s ease;
    width: 100%;
    z-index: 2023;
    display: flex;
    align-items: center;
}

header .container {
    align-items: center;
    display: flex
}

header .container {
    justify-content: space-between
}

header img {
  width: 100%;
  max-width: clamp(15rem, 12.5728rem + 6.4725vw, 25rem);
}

header nav {
    display: flex;
    align-items: center;
    gap: 5rem
}

header nav ul {
  align-items: center;
  display: flex;
  gap: 5rem
}

header nav ul li {
  list-style: none
}

header nav ul li a {
  color: #f2f2f7;
  font-size: 2.4rem;
  font-weight: 400;
  transition: background ease .3s
}

header nav ul li a:hover {
  background: linear-gradient(90deg, #ff7b1c, #ffc531);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
    
}

header nav .btn-apply {
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal
}

header nav .btn-apply:hover {
  background: linear-gradient(180deg,#ff7b1c,#ffc531);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent
} */

/* ========= SECTION HERO =========== */

.s-hero {
    background: url(//2564010.fs1.hubspotusercontent-na1.net/hubfs/2564010/raw_assets/public/CMO-Unity/assets/images/bg-hero.png) no-repeat top;
    background-size: cover;
    height: 980px;
    width: 100%
}

.s-hero .container {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: center;
    width: 100%
}

.s-hero h1 {
    color: #fff;
    font-size: clamp(3.5rem, 2.7718rem + 1.9417vw, 6.5rem);
    font-weight: 600;
    line-height: 130%;
    margin-bottom: 12rem;
    text-align: center
}

.s-hero .companies-logo {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 5rem;
    justify-content: center
}

.s-hero .companies-logo span {
    color: #fff;
    font-size: clamp(1.5rem, 1.2816rem + 0.5825vw, 2.4rem);
    font-weight: 400;
    letter-spacing: 6.82px;
    line-height: 114%;
    text-align: center;
    text-transform: uppercase
}

.s-hero .companies-logo .logos {
    width:100%;
    display: flex;
    align-items: center;
    justify-content: center; 
    flex-wrap: wrap;
    gap: 5rem;
}

.s-hero .companies-logo .logos .logo:first-child img {
    width: clamp(15rem, 11.3592rem + 9.7087vw, 30rem)
}

.s-hero .companies-logo .logos .logo img {
    width: clamp(10rem, 7.5728rem + 6.4725vw, 20rem);
}

/* ========= SECTION HERO =========== */

/* ========= SECTION ABOUT =========== */

.s-about {    
    padding-top: 5rem;
    padding-bottom: 10rem;
}

.s-about .container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.s-about h2 {
    font-weight: 500;
    text-align: center
}

.s-about .about-cards {
     display: flex;
    align-items: center;  
     justify-content: center;
    flex-wrap: wrap; 
    gap: 10rem;   
      
}

.s-about .about-cards .card {
    width: 100%;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3rem
}

.s-about .about-cards .card:nth-child(2) img {
    margin-top: -15px
}

.s-about .about-cards .card h3{
    color: #F7C653;
    text-align: center;
    font-size: clamp(1.8rem, 1.6301rem + 0.4531vw, 2.5rem);
    font-weight: 400;
    line-height: 114%; /* 35.34px */
    letter-spacing: 6.82px;
    text-transform: uppercase;
}

.s-about .about-cards .card p{
    color: #FFF;
    font-size: clamp(1.5rem, 1.4272rem + 0.1942vw, 1.8rem);
    font-weight: 400;
    text-align: center;
    line-height: 114%;
}

.s-about .btn{
    color: #000;
    text-align: center;
    font-size: clamp(1.8rem, 1.6544rem + 0.3883vw, 2.4rem);
    font-weight: 400;
    border-radius: 56px;
    background: linear-gradient(90deg, #FF7B1C 0%, #FFC531 100%);
    padding: 1.3rem 10rem;
    margin-top: 10rem;
}

.s-about .btn:hover {
    background: linear-gradient(180deg,#ff7b1c,#ffc531);
   
}

/* ========= SECTION ABOUT =========== */

/* ========= SECTION UPCOMING EVENTS ======== */

.s-upcoming-events{    
    padding-top: 10rem;
    padding-bottom: 10rem;
}

.s-upcoming-events .container {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 3rem;
  flex-wrap: wrap
}

.s-upcoming-events h2 {
  font-weight: 400;
  margin-bottom: 4rem
}

.s-upcoming-events .left-content {
   width:41%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
      
}

.s-upcoming-events .right-content {
   width: 55%;      
}

.s-upcoming-events .left-content p {
  width: 400px;
  color: #fff;
  font-size: clamp(1.5rem, 1.4272rem + .1942vw, 1.8rem);
  font-weight: 300;
  line-height: 130%;
  text-align: left;
      
}

.s-upcoming-events .right-content img{
     width: 100%;
  transition: ease-in-out .4s;
  cursor: pointer !important;
      
}

.s-upcoming-events .right-content img:hover{
     transform: translateY(-2px);
      
}

.s-upcoming-events .event-cards {
     display: flex;
    align-items: center;  
     justify-content: center;
    flex-wrap: wrap; 
    gap: 5rem;   
      
}

.s-upcoming-events .event-cards .card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.s-upcoming-events .event-cards .card img{
    width: 100%;
    max-width: 400px;   
}

.s-upcoming-events .left-content .btn {
  background: #000;
  background-clip: padding-box;
  border: 2px solid transparent;
  border-radius: 50px;
  color: #fff;
  font-size: clamp(1.8rem,1.6544rem + .3883vw,2.4rem);
  font-weight: 400;
  margin-top: 3rem;
  padding: 1rem 4rem;
  position: relative;
  text-align: center
}

.s-upcoming-events .left-content .btn:hover {
  background: linear-gradient(280deg,#ff7b1c,#ffc531);
  border: 2px solid black;
  color: black
  
}

.s-upcoming-events .left-content .btn:after {
    background: linear-gradient(45deg, #FF7B1C,#FFC531);
    border-radius: 50px;
    bottom: -2px;
    content: "";
    left: -2px;
    position: absolute;
    right: -2px;
    top: -2px;
    z-index: -1;
}

/* ========= SECTION UPCOMING EVENTS ======== */

/* ========= SECTION SPONSORS =========== */

.s-sponsors {    
  padding-top: 10rem;
  padding-bottom: 10rem;
}

.s-sponsors .container{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.s-sponsors h2 {
  font-weight: 500;
  text-align: center;
}

.s-sponsors .sponsors-cards {
   display: flex;
  align-items: center;  
   justify-content: center;
  flex-wrap: wrap; 
  gap: 10rem;   
      
}

.s-sponsors .sponsors-cards .card {
  width: 100%;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3rem
}

.s-sponsors .sponsors-cards .card:first-child img{
  width: clamp(15rem, 12.5728rem + 6.4725vw, 28rem) ;
}

.s-sponsors .sponsors-cards .card img {
  width: clamp(10rem,7.5728rem + 6.4725vw,20rem);
}

.s-sponsors .sponsors-cards .card h3{
  color: #F7C653;
  text-align: center;
  font-size: clamp(1.8rem, 1.6301rem + 0.4531vw, 2.5rem);
  font-weight: 400;
  line-height: 114%; /* 35.34px */
  letter-spacing: 6.82px;
  text-transform: uppercase;
}

.s-sponsors .sponsors-cards .card p{
  color: #FFF;
  font-size: clamp(1.5rem, 1.4272rem + 0.1942vw, 1.8rem);
  font-weight: 300;
  text-align: left;
  line-height: 130%;
}

/* ========= SECTION SPONSORS =========== */

/* ========= FOOTER ================== */

footer {
  display: flex;
  align-items: flex-start;
  background: url(//2564010.fs1.hubspotusercontent-na1.net/hubfs/2564010/raw_assets/public/CMO-Unity/assets/images/divisor_shape_footer.svg) no-repeat top;
  background-position-y: -109px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding-top: 20rem;
}

footer .container{
  display: flex;
  justify-content: space-between;
}



footer .left-content {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

footer .left-content .content .cards {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 3rem;
}

footer .left-content .content h2 {
  font-weight: 500;
  margin-bottom: 3rem;
}

footer .left-content .content .cards p {
  background-color: #023630;
  border-radius: 2rem 2rem 2rem 0;
  color: #fff;
  font-size: clamp(2.2rem, 2.0058rem + 0.5178vw, 3rem);
  font-weight: 400;
  line-height: 130%;
  padding: 2rem 3rem;
}


footer .right-content {
    width: 50%;
    
}

footer .right-content .form {
  width: 100%;
  display: flex;
  flex-direction:  column;
  padding: 6rem; 4.7rem;
  border-radius: 43px;
  background: rgba(242, 242, 247, 0.20);
  backdrop-filter: blur(15px);
  border: 1px solid #ffffff17;
}

footer .right-content .form form#hsForm_388addf5-4cfd-4d2e-abcd-ffec1632aade :is(input[type="text"], input[type="email"], input[type="tel"], textarea){
  width: 100%;
  height: 6rem;
  border: 0;
  border-radius: 14px;
  background: #FFF;

  color: #D9D9D9;
  font-family: Poppins;
  font-size: 2.2rem;
  font-style: italic;
  font-weight: 500;

  padding: 2rem;
  margin-bottom: 2.5rem;
  
  outline: 0
}

footer .right-content .form form#hsForm_388addf5-4cfd-4d2e-abcd-ffec1632aade textarea{
  height: 15rem !important;
}

footer .right-content .form form#hsForm_388addf5-4cfd-4d2e-abcd-ffec1632aade ul{
  list-style: none;
  padding: 0
}

footer .right-content .form form#hsForm_388addf5-4cfd-4d2e-abcd-ffec1632aade ul li{
  margin-bottom: 2rem
}

footer .right-content .form form#hsForm_388addf5-4cfd-4d2e-abcd-ffec1632aade ul li label{
  color: #ff8f23;
  font-size: 1.3rem
}

footer .right-content .form form#hsForm_388addf5-4cfd-4d2e-abcd-ffec1632aade ul li span{
  color: #F2F2F7;
  font-size: 1.8rem;
  font-style: italic;
  font-weight: 500;
  line-height: 130%;
}

footer .right-content .form form#hsForm_388addf5-4cfd-4d2e-abcd-ffec1632aade input[type=submit]{
  width: 100%;
  border-radius: 56px;
  background: linear-gradient(90deg, #FF7B1C 0%, #FFC531 100%);
  border: 0;
  height:7rem;

  color: #000;
  text-align: center;
  font-size: 3rem;
  font-style: normal;
  font-weight: 400;
  
  cursor: pointer
}

footer .right-content .form form#hsForm_388addf5-4cfd-4d2e-abcd-ffec1632aade input[type=submit]:hover{
  width: 100%;
  border-radius: 56px;
  background: linear-gradient(180deg, #FF7B1C 0%, #FFC531 100%);
  border: 0;
  height:7rem;
}

footer .footer-copy{
  width: 100%;
  max-width: 144rem;
  padding: 5rem 3rem;
  margin: 0 auto;
  
  display: flex;
  justify-content: flex-start
}

footer .footer-copy img{
  width: 100%;
  max-width: clamp(15rem, 11.3592rem + 9.7087vw, 30rem)
}



/* ========= RESPONSIVE ======== */

@media (width <= 1220px){
  .s-upcoming-events .left-content {
    width: 40%;
}
  .s-upcoming-events .right-content {
    width: 57%;
}
}

@media (width <= 1025px){
  
  header nav {
        display: none
    }
  
  .s-upcoming-events .container{
    gap:7rem
  }
  .s-upcoming-events .left-content {
    width: 100% !important;
}
  .s-upcoming-events .right-content {
    width: 100% !important;
}
  
  .s-upcoming-events .left-content p{
    width: 100% !important;
  }
  
  .s-sponsors .container{
    align-items: flex-start;
  }
  
  .s-sponsors .sponsors-cards {  
    justify-content: flex-start;
}

}

@media (width <= 900px){
  h2{
    margin-bottom: 5rem;
  }
  .s-hero{
    height: 830px;
  }
  
  .s-hero .container {
   height: 70vh;
 }
  
  .s-hero h1{
    margin-bottom: 7rem;
  }
  
  .s-hero .companies-logo .logos{
    gap: 3rem;
  }
  
   .s-about {
    margin-top: -18rem
}
  .s-upcoming-events, .s-sponsors{
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
  .s-upcoming-events .left-content {
    width: 100%;
    gap: 2rem;
}
  .s-upcoming-events .right-content {
    width: 100%;
}
  .s-sponsors .sponsors-cards{
    gap: 5rem;
  }
  .s-sponsors .sponsors-cards .card{
    max-width: 47%;
  }
  footer{
    padding-top: 30rem;
  }
  
  footer .container{
    flex-direction: column;
    gap: 5rem;
  }
  
  footer .right-content,
  footer .left-content{
    width: 100%;
  }
}

@media screen and (max-width: 480px) {
  header a.nav-link {
    padding: 0.75rem 0;
    color: white
  }
  
  .s-hero .container{
    height: 85vh;
  }
  
  .s-sponsors .sponsors-cards .card {
    max-width: 100%;
}
  
  footer .right-content .form {
   padding: 3rem 2rem;
    border-radius: 25px;
  }
  
  footer .footer-copy{
  
  justify-content: center
}
}


header {
    height: 11.2rem;
    left: 0;
    position: absolute;
    transition: all .3s ease;
    width: 100%;
    z-index: 2023;
    display: flex;
    align-items: center;
}

header .container {
    align-items: center;
    display: flex
}

header .container {
    justify-content: space-between
}

header img {
  width: 100%;
  max-width: clamp(15rem, 12.5728rem + 6.4725vw, 25rem);
}

header nav {
  display: flex;
  height: 75px;
  align-items: center;
  gap: 3rem
}

header ul {
  margin-bottom: 0;
}

header .navbar {
    text-align: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: all .5s;
    transition: all .5s;
    display: flex;
    align-items: center;
    gap: 5rem;
}

header .nav-menu li {
  list-style: none;
  padding: 0 1rem;
}

header .nav-menu {
    display: flex;
    align-items: center;
    gap: 5rem;
}

header nav ul li a {
  color: #f2f2f7;
  font-size: 2.4rem;
  font-weight: 400;
  transition: background ease .3s
}

header nav ul li a:hover {
  background: linear-gradient(90deg, #ff7b1c, #ffc531);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
    
}

header nav .btn-apply {
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal
}

header nav .btn-apply:hover {
  background: linear-gradient(180deg,#ff7b1c,#ffc531);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent
} 

header .hamburger {
  display: none;
}

header .bar,
header .fa-times {
  width: 1.5rem;
  height: 3px;
  display: block;
  color: #fff;
  padding: 0;
  margin: 6px;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  background-color: #fff;
}

header .bar:nth-child(1) {
  width: 100%;
}

header .bar:nth-child(2) {
  width: 200%;
}

header .bar:nth-child(3) {
  width: 300%;
}

@media (max-width: 1015px) {
  header .hamburger {
    display: block;
    padding-right: 3rem;
  }
  header .active .bar:nth-child(2) {
    opacity: 0;
  }
  header .active .bar:nth-child(1) {
    -webkit-transform: translateY(8px) rotate(-315deg);
    transform: translateY(8px) rotate(-315deg);
    width: 300%;
  }
  header .active .bar:nth-child(3) {
    -webkit-transform: translateY(-10px) rotate(-45deg);
    transform: translateY(-10px) rotate(-45deg);
    width: 300%;
  }
  header .nav-menu {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 75px;
    right: -100%;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    margin: 0 auto;
  }

  header .nav-menu li {
    padding: 1rem 0;
  }

  header a.nav-link {
    margin: 1rem 0;
    color: white;
    z-index: 1;
  }

  header .active {
    background-color: black;
    top: 0;
    right: 0;
    z-index: 100;
    transition: 0.2s ease;
    
  }
}