@media screen and (min-width:576px) {
    .header .navbar {
        padding: 16px;
        max-width: 1180px;
    }

    .header .navbar .nav {
        padding: 12px 24px;
        border-radius: 16px;
    }

    .header .navbar .nav .logo {
        font-size: 30px;
    }

    .header .navbar .nav .logo a {
        gap: 8px;
    }



    .header .navbar .nav a .mobile-menu-icon {
        height: 24px;
        vertical-align: -3px;
    }

    .header .navbar .nav .mobile-menu-icon .line {
        width: 18px;
        height: 3px;
        background-color: #000;

    }

    .header .navbar .nav .mobile-menu-container .mobile-menu-content {

        max-width: 320px;

    }



    .header .nav .mobile-menu-content .menu {
        padding: 24px;
    }

    .header .nav .menu .menu-content-1 {
        padding: 12px;
        margin-bottom: 32px;
        font-size: 24px;
    }


    .header .nav .menu .menu-content-2 {
        margin-bottom: 32px;

    }

    .header .nav .menu .menu-content-2 li {
        margin-bottom: 24px;
    }

    li a {

        font-size: 20px;
        line-height: 1.4;
    }

    .header .nav .menu .menu-content-3 {
        margin-top: 32px;

    }

    .header .nav .menu .menu-content-3 a {

        font-size: 18px;
        padding: 12px;
    }

    .header .nav .menu .menu-content-3 a .img {

        vertical-align: -2.25px;
        margin-right: 8px;
    }

    /*  HERO  */


    .hero {
        padding-bottom: 64px;
        padding-top: 144px;
    }



    .hero .back-ground .cube-1 {
        width: 128px;
        height: 128px;
        left: 40px;
        top: 40px;
    }

    .hero .back-ground .cube-2 {

        width: 96px;
        height: 96px;
        right: 80px;
        top: 160px;
    }

    .cube-3 {
        width: 112px;
        height: 112px;
        bottom: 80px;
    }


    .hero .container {
        max-width: 1280px;
        padding: 0px 32px;
    }


    .container .hero-content {
        gap: 64px;
    }

    .hero .text-content .badge {
        margin-bottom: 24px;
        padding: 8px 16px;
    }

    .hero .text-content .badge span {
        font-size: 14px;

    }

    .hero .text-content h2 {
        font-size: 72px;
        margin-bottom: 32px;

    }

    .hero .text-content .text-area {
        margin-bottom: 32px;
        padding: 16px;
        font-size: 24px;
    }

    .hero button {
        font-size: 20px;
        padding: 16px 32px;
    }

    .hero .buttons .button-container:hover {
        left: 6px;
        top: 6px;
    }


    .hero .buttons .but2 {
        margin-left: 18px;
    }


    .hero .buttons .button-container::before {
        left: 6px;
        top: 6px;
    }



    .hero .buttons .img {
        margin-right: 8px;
    }

    .hero .buttons .img img {
        width: 25px;
    }

    .hero .img .img-content {
        max-height: 384px;
    }

    .hero .img .badge {
        padding: 8px 16px;
        right: -16px;
        top: -16px;

    }

    .hero .img .badge span {
        font-size: 16px;
    }

    /*  Article */

    .latestArticles,
    .community {
        padding: 80px 0px;
    }

    .latestArticles .container,
    .community .container {
        padding: 0px 24px;
        max-width: 1280px;
    }

    .latestArticles-content {
        gap: 32px;
    }

    .latestArticles-content .col-1 .title {
        margin-bottom: 48px;
    }

    .latestArticles-content .col-1 .title h3 {
        font-size: 48px;
    }

    .latestArticles-content .col-1 .title .span {
        display: block;
    }


    .latestArticles-content .article {
        padding: 32px;
        margin-bottom: 32px;
        box-shadow: 6px 6px #000;

    }


    .latestArticles-content .col-1 .content .article .article-content .main-img {

        margin-bottom: 12px;

    }

    .latestArticles-content .col-1 .content .article .article-content .main-img .badge {
        font-size: 12px;
        padding: 4px 8px;
        right: -8px;
        top: -8px;
    }


    .latestArticles-content .col-1 .content .article .article-content .main-img img {
        width: 160px;
        height: 128px;
    }


    .latestArticles-content .col-1 .content .article .article-content .p .badge {
        font-size: 12px;
        padding: 4px 12px;
        margin-bottom: 12px;

    }


    .latestArticles-content .col-1 .content .article .article-content .p h4 {
        font-size: 24px;
        margin-bottom: 12px;

    }

    .latestArticles-content .col-1 .content .article .article-content .p p {
        font-size: 18px;
        margin-bottom: 16px;

    }

    .latestArticles-content .button {
        margin-top: 48px;
        box-shadow: 6px 6px #000;
    }

    .latestArticles-content .button button {
        font-size: 20px;
        padding: 16px 48px;
    }

    .latestArticles-content .col-2 .sticky {
        top: 32px;
    }

    .latestArticles-content .col-2 .sticky h4 {
        font-size: 30px;
        margin-bottom: 24px;
    }

    .latestArticles-content .col-2 .sticky .trend {
        margin-bottom: 24px;
    }

    .latestArticles-content .col-2 .sticky .trend span {
        font-size: 36px;
        margin-right: 16px;
    }

    .latestArticles-content .col-2 .sticky .trend h5 {
        font-size: 18px;
    }

    .latestArticles-content .col-2 .sticky .trend p {
        font-size: 14px;
        margin-top: 4px;
    }

    .latestArticles-content .col-2 .article.cat span {
        padding: 12px 16px;
        margin-bottom: 12PX;
    }

    /*  Author */

    .authors {
        padding: 80px 0px;
        font-size: 16px;
    }


    .authors .back-ground .cube-1 {
        width: 160px;
        height: 160px;
        right: 40px;
        top: 40px;
    }

    .authors .back-ground .cube-2 {
        width: 128px;
        height: 128px;
        left: 40px;
        bottom: 40px;
    }

    .authors .container {
        padding: 0px 24px;
        max-width: 1280px;
    }

    .authors .container .authors-content .title {
        margin-bottom: 64px;
    }

    .authors .container .authors-content .title h3 {
        font-size: 48px;
        margin-bottom: 16px;
    }

    .authors .container .authors-content .title p {
        font-size: 20px;
    }

    .authors .container .authors-content .title .line {
        width: 128px;
        height: 8px;
        margin: 16px auto 0px;
    }

    .authors .authors-content .author-grid {
        gap: 32px;
    }

    .authors .authors-content .author-grid .author {
        padding: 32px;
    }


    .authors .authors-content .author-grid .author .main-img {
        margin-bottom: 24px;
    }

    .authors .authors-content .author-grid .author .main-img img {
        width: 128px;
        height: 128px;
    }

    .authors .authors-content .author-grid .author .main-img .badge {
        font-size: 12px;
        padding: 4px 8px;
        right: -8px;
        top: -8px;
    }

    .authors .authors-content .author-grid .author h4 {
        font-size: 30px;
        margin-bottom: 8px;

    }

    .authors .authors-content .author-grid .author p {
        margin-bottom: 16px;
    }

    .authors .authors-content .author-grid .author .p p {
        margin-bottom: 24px;
    }


    .authors .authors-content .author-grid .author ul li {
        width: 48px;
        height: 48px;
    }

    .authors .authors-content .author-grid .author ul li a .img {
        height: 18px;
        vertical-align: -2.25px;

    }

    /*  footer */


    .footer {
        padding-block: 80px;
    }

    .foot-container {
        padding-inline: 24px;
        max-width: 1280px;
    }

    .foot-container .grid {
        gap: 48px;
        margin-bottom: 48px;
    }

    .foot-container .grid .logo {
        margin-bottom: 32px;
    }

    .foot-container .grid .logo .foot-img {

        width: 64px;
        height: 64px;
        margin-inline-end: 16px;
    }


    .foot-container .grid .logo h1 {
        font-size: 30px;
    }

    .foot-container .grid p {
        font-size: 18px;
        margin-bottom: 32px;
    }

    .foot-container .grid h4 {
        font-size: 24px;
        margin-bottom: 32px;
    }

    .foot-container .grid li {

        margin-block-end: 16px;
    }

    .foot-container .grid li a {

        font-size: 18px;
    }

    .foot-container .grid input {

        font-size: 18px;
        padding: 16px;
        margin-block-end: 16px;
    }

    .foot-container button {

        font-size: 18px;
        padding-block: 16px;
    }

    .foot-container .rights {
        padding-top: 32px;
    }


    .rights p {
        margin-bottom: 12px;
    }

    .policy a {

        margin-inline-end: 32px;
        font-size: 16px;
    }
    


}

@media screen and (min-width:768px) {


}

@media screen and (min-width:992px) {

    .header .navbar {
        max-width: 1280px;
    }

    .child {
        width: 50%;
    }

    .container .hero-content {
        flex-wrap: nowrap;
    }

    .hero .img .img-content {
        transition: all .3s;
        transform: rotate(2deg);
    }

    .hero .buttons .but2 {
        margin-left: 16px;
    }


    .latestArticles-content {
        flex-direction: row;
        gap: 32px;
    }

    .latestArticles-content .col-1 {
        width: 66.66%;
    }

    .latestArticles-content .col-2 .sticky .trend {
        margin-right: 10px;
        margin-left: 10px;
    }

    .latestArticles-content .col-1 .content .article .article-content {
        flex-direction: row;
    }

    .latestArticles-content .col-1 .content .article .article-content .main-img {

        margin-right: 24px;
        margin-bottom: 0px;

    }



    /*  Author */


    .authors .authors-content .author-grid {
        margin: auto;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .authors .authors-content .author-grid .author {
        width: 48%;
    }


    .community .container .grid {
        flex-wrap: nowrap;
    }

    .foot-container .grid {
        flex-wrap: nowrap;
        gap: 48px;
        justify-content: space-between;
    }
    .foot-container .grid .col{
        width:fit-content;
    }


}

@media screen and (min-width:1200px) {

    .header .navbar .nav a[href="#mobile-menu"] {
        display: none;
    }

    .header .navbar .nav .nav-menu,
    .header .navbar .nav .nav-button {
        display: block;
    }


    .latestArticles-content .col-1 .content .article .article-content .p .info {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-evenly;
    }

    .latestArticles-content .col-1 .content .article .article-content .p .info span {

        align-items: flex-start;
        margin-right: 24px;
    }

    .latestArticles-content .col-1 .content .article .article-content .p .info span.red {
        margin-right: 0;
    }


    .authors .authors-content .author-grid {
        flex-wrap: nowrap;
    }
    .rights .rights-content{
        flex-direction: row;
    }

}

@media screen and (min-width:1400px) {}