/* MOBILE VERSION */
@media (min-width: 320px) and (max-width: 768px)
{
    /* AVIOR TOP CLASS -------------------------------------------------------------------------------------------- */
    .ATOP {background-position: center; background: linear-gradient(310deg,rgba(4, 98, 98, 1) 27%, rgba(68, 151, 132, 1) 44%, rgba(88, 187, 171, 1) 60%, rgba(255, 255, 255, 1) 74%),var(--aimb);}
    .AVIOR .LIA h3 { font-size: 3.5rem }

    /* SPECIAL CLASSES */
    .TXX h6,.TXX p { width: 35ch;}

    /* ACT Button */
    .ACT a { font-size: 1.3rem; }

    /* FLEX CLASS */
    .FE {display: flex; flex-direction: column !important;}
    .F2F5 {flex-basis: 49%;}
    .F3F5 {flex-basis: 49%;}
    .F3F100 {flex-basis: 99.5%;}

    .HERO img {width: 299px !important; }

    /* BOXCOVER AND BOXIN */
    .BOXCOVER { display: flex;flex-direction: column !important; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding: 1rem 0; }
    .BOXIN { flex: 1 1 200px; min-width: 200px; padding: 1.5rem;}
    
    .PATITLE { display: flex; flex-direction: column !important; justify-content: center; align-items: center; gap: 1rem; }
    .PATITLE h1 {padding-top: 0;}

    /* STYLE HEADER SESSION */
    .HEADSES h1 { font-family: Outfit, sans-serif; font-size: 2.7rem; color: var(--tezh6); font-weight: 400; letter-spacing: 2px; word-spacing: 10px; }
    .HEADSES p { font-family: Outfit, sans-serif; font-size: 1.3rem !important; color: #3DA197 !important; font-weight: 300; letter-spacing: 2px; line-height: 2.1rem; word-spacing: 5px; }
    .HEADSES img { max-width: 149px; max-height: auto; }  

    /* BLOG BOX FOR READERS AND VIEWERS */
    .BLOGS { padding: 0rem 2rem 2rem !important; }
    .BLOGS .BLOGIN { background: linear-gradient(to top, #0E3F29 5%, #337C68 25%, #75ffea 100% ); border-radius: 1rem; overflow: hidden;}
    .BLOGS .BLOGIN .LOGO img {border-radius: 50%;}
    .BLOGS .BLOGIN .LOGO img {width: 3rem; height: 3rem; position: absolute; bottom: -25px; right: 40%;}
    
    /* Title */
    .TIT h6 { font-size: 2.3rem !important; font-weight: 500; }
    .TIT span { font-size: 2.3rem; font-weight: 500; }
    .TITLE_DAY { font-size: 1.5rem; }
    
    /* PADDING CLASS */
    .PA {padding: 5rem 1rem;}
    .PS {padding: 1.5rem 1rem;} 
    .PX1 {padding: 1rem 0rem;}
    .PX2 {padding: 2rem 0rem;}
    .PX5 {padding: 5rem 0rem;}
    .PH2 {padding: 1.5rem 0.5rem 1.5rem;}
    footer .MIDZ {padding: 2.5rem 1.5rem;} 

    /* TEXT CLASS */
    .AVIOR .TEZ h2 {font-size: 3.25rem;}
    .AVIOR .TEZ h6 {font-size: 1rem;} 
    .AVIOR .TEZ p {font-size: 14px;} 
    .AVIOR .TBIG span {font-size: 4.25rem;}
    .AVIOR .TTBIG span {font-size: 4.25rem;}
    .REGISTER h2 {font-size: 4rem !important;}

    /* AGENDA CLASS */
    .AGENDA .ENTER h2 {font-size: 4rem !important;}
    .AGENDA .ENTRE h6 {font-size: 0.65rem !important;}
    .AGENDA .ENTRE p {font-size: 0.75rem !important;}

    /* Youtube display */
    .YTDP { height: 300px; }

    /* Logo Partners */
    .LOGOP { display: grid; grid-template-columns: repeat(2, 1fr); align-items: center;}
    .LOGOP img { width: 150px; height: 150px; object-fit: cover;}
    
    /* Card Container */
    .CARD_CONTAINER { grid-template-columns: 1fr; gap: 1.5rem; padding-bottom: 1.5rem;}
    .CARD { height: 380px;}
    .CARD_CONTENT { padding: 0rem 1.3rem 0.5rem 1.3rem; }
    .CARD_CONTENT h3 { font-size: 0.9rem !important; margin-bottom: 0.3rem;}
    .CARD_CONTENT p { font-size: 0.7rem !important; }
    .CARD_META p { font-size: 0.6rem !important; }
    .CARD::before { background: linear-gradient(to top, rgba(9, 54, 31, 1) 15%, rgba(10, 64, 48, 0.1) 70%); }

    /* PRODUCT Container */
    .PDU_CONTAINER { grid-template-columns: repeat(1, 1fr); gap: 1.5rem; }
    .PDU { height: 200px; }
    .PDU_RIGHT { display: flex; flex-direction: column; justify-content: center; }
    .PDU_RIGHT h1 { font-size: 2rem !important; }
    .PDU_RIGHT h2 { font-size: 1.5rem !important; }
    .PDU_RIGHT h3 { font-size: 1rem !important; }
    .PDU_RIGHT h5 { font-size: 0.9rem !important; }
    .PDU_RIGHT h6 { font-size: 0.8rem !important; }
    .PDU_RIGHT p { font-size: 1.2rem !important; }
    .PDU_RIGHT a { font-size: 0.8rem; padding: 0.5rem 0.8rem; }
    .PDU_LOGO { width: 80px; height: 40px; top: 0px; left: 0px; }
    /* TIMER CLASS */
    .TIMER span {font-size: 2rem;}
    .TIMER .TIMIN {font-size: 1rem;}

    /* BLOG TEXT */
    .BLOGS { display: flex; flex-direction: column !important; }
    .BLOGS .BLOGIN { width: 300px; height: 500px; }
    .BLOGS .BLOGIN h5 {font-size: 20px !important; color: var(--hxb) !important; padding-bottom: 5px;}
    .BLOGS .BLOGSS p {font-size: 14px !important; color: var(--hxb) !important; padding-bottom: 5px;}
    .BLOGS .AUTHOR p {font-size: 14px !important; font-weight: bold; color: var(--hxb) !important; padding-bottom: 5px;}
    .BLOGS .BLOA a {padding: 0.5rem 1rem; width: 100%; color: white; font-size: 14px; font-weight: 900; transition: all 900ms linear;}

    /* FOOTER */
    footer .PT5 {padding-top: 0rem !important;}
    footer h1 { color: var(--hxb); font-size: 1.2rem; letter-spacing: 2px; padding: 7px 0px;}
    footer h5 {color: var(--hxb) !important; font-size: 20px; font-weight: 600; letter-spacing: 2px;}
    footer .LOWZ a {color: var(--hxb) !important; font-weight: 600; font-size: 20px; letter-spacing: 2px; padding-bottom: 1rem; transition: all 200ms ease-in;}
    footer .LOWZ a:hover {color: var(--hxb) !important; letter-spacing: 2px; font-size: 22px !important;}
    footer .LOGO { padding-top: 1.5rem;}
}