/** Varibles
******************************************************************************/
:root {
    --black1: #000;
    --black2: #333;
    --black3: #999;
    --white: #fff;
    --bgcream: #F9F5F4;
    --brandcolor1: #ffdc06;
    --brandcolor2: #5fbf8d;
    --brandcolor3: #139cb2;
    --transition: 0.3s;
    --divHeight: 100%;
    --fw-000: normal;
    --fw-100: 100; 
    --fw-200: 200;
    --fw-300: 300;
    --fw-400: 400;
    --fw-500: 500;
    --fw-600: 600;
    --fw-700: 700;
    --fw-800: 800;
    --fw-900: 900;
    --h1: clamp(2rem, 1.3659rem + 3.1707vw, 3.625rem);
    --h2: clamp(1.375rem, 1.1311rem + 1.2195vw, 2rem);
    --h3: clamp(1.125rem, 0.9787rem + 0.7317vw, 1.5rem);
  }

body {
    margin: 0;
    padding: 0;
    background-color: #000;
    font-size: 1.3rem;
    line-height: 2rem;
}
h1, h2, h3 {
  font-family: "Inter", sans-serif !important;
  font-optical-sizing: inherit;
  font-weight: 900;
}

/*** Header
******************************************************************************/
header { 
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    background-image: linear-gradient(rgba(0,0,0, 0.9), rgba(0,0,0, 0.0));
    padding: 10px 0;
}
header .nav {
    display: block;
}
header .btn-hamburger {
    display: none;
}
header .logo {
    display: flex;
    justify-content: center;
    align-items: center;
}
header .nav ul {
    display: flex;
    justify-content: end;
    gap: 30px;
    align-items: center;
    list-style: none;
    width: 100%;
    font-size: 1.2rem;
    height: 100px;
    margin: 0;
    padding: 0;
}
header .nav ul li a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
}
header .nav ul li a:hover {
    color: #efac1e;
}

/*** Hero
******************************************************************************/
.hero {
    display: flex;
    align-items: end;
    background-image: url('../images/hero.webp');
    background-size: 100%;
    background-position: center top;
    background-repeat: no-repeat;
    height: 72vh;
    color: #fff;
    font-size: 1.5rem;
}
.hero .intro {
    padding-bottom: 50px
}
.hero h1, .hero h2 {
    text-shadow: 3px 3px #000;
}

/*** Subscribe
******************************************************************************/
.subscribe .max {
    background-color: #029293;
    color: #fff;
    padding: 50px;
}
.subscribe .max input, .subscribe .max textarea {
    margin-top: 15px;
}
.subscribe h2, .subscribe h3 {
    text-shadow: 3px 3px #000;
}
.subscribe h2 {
    font-size: 3rem;
}
.subscribe .cta {
    display: flex;
    align-items: center;
}

/*** About
******************************************************************************/
.about {
    display: flex;
    align-items: center;
    color: #fff;
    padding: 100px 0;
    background-image: url(../images/bg-mic.webp);
    background-size: 80%;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.about h2 {
    font-weight: 300;
    font-size: 3.9rem;
    text-shadow: none;
}
.about span {
    color: #ffc107
}

/*** Meet The Hosts
******************************************************************************/
.meethosts {
    background-color: #fff8ea;
    padding: 100px 0;
}
.meethosts h2 {
    font-weight: 300;
    font-size: 3.5rem;
}
.meethosts h3 {
    text-shadow: none;
}

/*** Story Form
******************************************************************************/
.spacer {
    height: 10px;
}
.story-form .modal-content {
    background-color: #029293 !important;
}
.story-form .modal-body .submitStory {
    color: #fff;
}
.story-form .modal-body .submitStory img {
    margin-bottom: 15px;
}

.internal-content hr {
    margin: 30px 0;
    border: solid 1px #fff;
}

.internal-content .max p {
    margin: 0;
}

.internal-content .max .wpcf7-form-control-wrap .wpcf7-checkbox {
    display: block;
    height: 160px;

}
.internal-content .max .wpcf7-form-control-wrap .wpcf7-checkbox .wpcf7-list-item {
    display: inline-block;
    width: 50%;
    float: left;
    margin: 3px 0;
}
.internal-content .max .wpcf7-form-control-wrap .wpcf7-radio {
    display: block;
}
.internal-content .max .wpcf7-form-control-wrap .wpcf7-radio .wpcf7-list-item {
    display: inline-block;
    width: 50%;
    float: left;
    margin: 3px 0;
}

.internal-content .max .wpcf7-form-control-wrap .wpcf7-checkbox input[type="checkbox"],
.internal-content .max .wpcf7-form-control-wrap .wpcf7-radio input[type="radio"] {
    width: 20px; /* Adjust as needed */
    height: 20px; /* Adjust as needed */
}
.internal-content .max .wpcf7-form-control-wrap .wpcf7-checkbox input[type="checkbox"] {
    border-radius: 3px !important;
}

.wpcf7-not-valid-tip {
  color: #ffc107;
  font-size: 1em;
  font-weight: normal;
  display: block;
}

/*** Footer
******************************************************************************/
footer {
    padding: 100px 0;
    color: #fff;
    background-color: #000;
    font-size: 1rem;
}
footer h3 {
    margin-bottom: 30px;
}
footer a {
    color: #fff;
    text-decoration: none;
}
footer .footer-logo {
    padding-bottom: 30px;
}
footer ul {
    list-style: none;
}
footer ul li {
    margin: 10px 0;
}
footer a.btn-ig:hover  {
    color: #DD2A7B !important;
}
footer a.btn-tiktok:hover  {
    color: #28E8E2 !important;
}
footer a.btn-fb:hover  {
    color: #1773EA !important;
}
footer a.btn-yt:hover  {
    color: #F60000 !important;
}

/*** Media Queries
******************************************************************************/
@media only screen and (max-width : 1180px) {
    .hero {
        background-size: 150%;
        height: 65vh;
    }
    header .nav {
        display: none;
        width: 100%;
        padding-bottom: 30px;
        padding-right: 0;
        position: relative;
    }
    header .btn-hamburger {
        display: inline-block;
        position: absolute;
        width: 100%;
        top: 10px;
        right: 15px;

    }
    header .btn-hamburger button {
        background-color: transparent;
        border: none;
    }
    header .nav ul {
        display:block;
        height: 100%;
        width: 100%;
        background-color: #000;
    }
    header .nav ul li {
        border-bottom: solid 1px #ccc;
    }
    header .nav ul li a {
        margin: 8px;
        text-align: right;
        display: block;
        padding-right: 15p;
    }
    header .nav ul li:last-child {
        border-bottom: none;
    }
    .about {
        background-size: 130%;
    }
    .meethosts .mobile-pad,
    .hero .mobile-pad,
    .about .mobile-pad {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media only screen and (max-width : 480px) {
    header .logo img {
        width: 50%;
        height: auto;
        margin-bottom: 10px;
        z-index: 100;
    }
    .hero {
        background-position: center 85px;
        background-size: 170%;
        font-size: 1.2rem;
        line-height: 1.8rem;
        padding-left: 30px;
        padding-right: 30px;
    }
    .hero .intro {
        padding-bottom: 20px
    }
    .subscribe h2 {
        font-size: 2.3rem;
    }
    .subscribe h3 {
        font-size: 1.3rem;
        margin-bottom: 15px;
    }
    .subscribe .max {
        padding: 50px 15px;
    }
    .about {
        background-position: center top;
        background-size: cover;
        background-attachment: scroll;
        font-size: 1.2rem;
        line-height: 1.8rem;
        padding-left: 30px;
        padding-right: 30px;
    }
    .about .icon-mic {
        width: 35%;
        height: auto;
        margin: 0 auto;
        padding-bottom: 15px;
    }
    .about h2 {
        font-size: 2.5rem;
        text-align: center;
        margin-bottom: 15px;
    }
    .meethosts {
        padding-left: 30px;
        padding-right: 30px;
    }
    .meethosts img {
        width: 50%;
        height: auto;
        
    }
    .meethosts .mobile-pad,
    .hero .mobile-pad,
    .about .mobile-pad {
        padding-left: 0px;
        padding-right: 0px;
    }
    .internal-content .max .wpcf7-form-control-wrap .wpcf7-checkbox {
        display: block;
        height: 160px;

    }
     .internal-content .max .wpcf7-form-control-wrap .wpcf7-checkbox .wpcf7-list-item {
        display: inline-block;
        width: 170px;
        float: left;
        margin: 3px 0;

    }
    .internal-content .max .wpcf7-form-control-wrap .wpcf7-radio {
        display: block;
        height: 180px;

    }
    .internal-content .max .wpcf7-form-control-wrap .wpcf7-radio .wpcf7-list-item {
        display: inline-block;
        width: 100%;
        margin: 3px 0;
    }


    footer {
        padding-left: 30px;
        padding-right: 30px;
    }
}