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

@font-face {
    font-family: 'Chelsea';
    src: url('/assets/fonts/ChelseaMarket-Regular.ttf') format('truetype');
    font-style: normal;
}
body,html{
    font-family: 'Chelsea', cursive;
    overflow-x: hidden;
}
.hero_section{
    width: 100%;
    height: 100vh;
    background-image: url('/assets/images/hero-section-1.avif');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 700px;
}

.hero_content{
    width: auto;
    height: auto;
}
.content_image{
    width: 450px;
    height: 450px;
    border-radius: 50%;
    position: relative;
}
.content_image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.speech{
    position: absolute;
    top: -4%;
    right: -50%;
    opacity: 0;
    transform-origin: 20% 80%;              /* pivot near the tail */
    transform: translate(-60px, -40px) rotate(-12deg);
    animation: speechIn 900ms cubic-bezier(.22,1,.36,1) 200ms forwards;
    will-change: transform, opacity;
}
.speech img{
    width: 500px;
}
.second_section{
    width: 100%;
    background:#244122;
    padding: 40px;
}   

.chelsea{
    font-family: 'Chelsea', cursive;
    text-shadow:rgba(0, 0, 0, 0.298039) 0px 5px 0px;
}
.h1{
    font-size: 60px;
    line-height: 1;
    letter-spacing: 2px;
    color: rgb(199, 199, 199);
    font-weight:500 ;
}
.text_center{
    text-align: center;
}
.primary_color{
    color: rgb(199, 199, 199);
}
.flex{
    display: flex;
}
.flex_column{
    flex-direction: column;
}
.align_center{
    align-items: center;
}
.justify_center{
    justify-content: center;
}
.align_start{
    align-items: flex-start;
}
.second_content{
    gap: 50px;
    max-width: 800px;
}
.norm_size{
    font-size:16px;
}
.section_second_text_box{
    gap:30px;
}

@keyframes speechIn{
  to{
    opacity: 1;
    transform: translate(0, 0) rotate(0deg);
  }
}
.green_box{
    background-color: #42663F;
    padding: 10px;
    max-width: max-content;
}
.light_green_box{
    background-color: #75873D;
    max-width: max-content;
    padding: 10px;
}
.bg_blue{
    background-color: #0D324E;
}
footer{
    background-image: url('/assets/images/hero-section-1.avif');
}
.social_links{
    background-color: #DDD7BD;
    width: 330px;
    padding: 20px;
    display:flex;
    margin-bottom: 40px;
    align-items: center;
    gap: 15px;
}
.white_color{
    color: #DBDBDB;
}
.font_52{
    font-size: 52px;
    font-weight: 500;
}
.icon{
    width: 90px;
    height: 90px;
    border-radius: 50%;
}
.icon img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.icon_tele{
    width: 70px;
    height: 70px;
}
.third_section{
    background-image: url('/assets/images/bg.avif');
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
.med_size{
    font-size:36px;
}
.mt_sm{
    margin-top: 30px;
}
.mt_xsm{
    margin-top: 20px;
}
.section_third_text_box{
    margin-top: 30px;
}
.second_text_box p{
    margin:25px 0;
}
.third_content{
    max-width: 800px;
}

.fourth_content{
    max-width: 990px;
    width: 100%;
}
.videoz_box{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
@media (min-width: 768px){
    
    .iframe{
        width: 415px;
        height: 215px;
    }
    .pd_md{
        padding: 40px 80px 80px 80px;
    }
    .section_third_text_box{
        gap:20px;
    }
   
    .video_box_4{
        display: grid;
        grid-template-columns: repeat(2,1fr);
        column-gap: 70px;
        row-gap: 60px;
        margin-top: 20px;
    }
    .h2{
        font-size: 40px;
    }
    .community_videos{
        margin-top: 40px;
        padding-top:20px;
    }
    .px_30{
        padding-left: 30px;
        padding-right: 30px;
    }
    .pb_20{
        padding-bottom: 20px;
    }
    .font_4{
        font-size:32px;
    }
}
@media (min-width: 1000px){
    .pd_md{
        padding: 40px 100px 80px 100px;
    }
    .pb_20{
        padding-bottom: 20px;
    }
}
@media (min-width: 1200px){
    .pd_md{
        padding: 40px 200px 80px 200px;
    }
    
}
@media (max-width: 868px){
    .section_third_text_box{
        flex-direction: column;
    }
    .second_text_box p{
        text-align: center;
    }
    .video_box_4{
        display: grid;
        grid-template-columns: repeat(1,1fr);
        gap: 40px;
    }
    .sm_flex.sm_flex_col{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .font_4{
        text-align: center;
    }
    .video_box_4{
        margin-top: 40px;
    }
    .community_videos{
        margin-top: 40px;
        width: 100%;
    }
    .font_52{
        font-size: 40px;
    }
    
}

@media (max-width: 768px){
    
    .hero_content{
        right: 15px;
        position: relative;
    }
    .content_image{
        width: 75%;
        height: auto;
        margin: auto;
    }
    
    .speech{
        top: -2%;
        left: 39%;
    }
    .speech img{
        width: 98%;
        height: auto;
    }
    .video_box{
        width: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
    }
    .iframe{
        width: 100%;
        height: 250px;
    }
    .h1{
        font-size: 40px;
    }
    .mb_flex_col{
        flex-direction: column;
    }
    .second_content {
        gap:30px;
    }
    .pd_md{
        padding: 40px;
    }
}
@media (max-width: 550px){
    .hero_section{
        height:80vh;
        max-height: 400px;
    }
    .font_4{
        font-size:12px;
    }
    
    .social_links{
        width: 100%;
        justify-content: center;
    }
}
@media (max-width: 380px){
    .social_links .icon{
        width: 70px;
        height: 70px;
    }
    .social_links .icon_tele{
        width: 60px;
        height: 60px;
    }
}