@media all and (max-width: 1024px) {

    .main {
        flex-direction: column;
    }

    .tbg-inform .newsletter-form .form-input input {
        width: 100px;
    }

    .main .banner img {
        width: 100%;
        height: calc(50vh - 45px);
        object-fit: cover;
    }

    .main .banner .banner-img {
        width: 100%;
        height: calc(50vh - 45px);
        object-fit: cover;
    }

    .core-value-content .core-value-acronym {
        width: 15%;
    }

    .core-value-content .core-value-desc {
        width: 85%;
    }

    .main .content .content-about {
        padding: 0 1rem;
        gap: 1rem;
    }

    .main .content .content-blog-desc {
        margin: 0;
        padding: 0 0.5rem;
    }

    .main .content h1 {
        margin-top: 1rem;
        padding: auto;
        font-style: normal;
    }

    .main .content .card {
        width: 183px;
        height: 11rem;
        box-shadow: none;
        margin: 0 auto;
    }

    .main .content .card img {
        width: 100%;
        height: 150px;
    }

    .content .content-title {
        padding: 0;
    }

    .content .business-desc {
        padding: 3rem 8rem 2rem 8rem;
    }

    .content .business-sectoral {
        padding: 0 4rem 3rem 4rem;
    }

    .nested-sectoral-options ul li {
        padding: .3rem 1rem;
        font-size: 13px;
        border-radius: 1rem 0 1rem 0;
        -webkit-border-radius: 1rem 0 1rem 0;
        -moz-border-radius: 1rem 0 1rem 0;
        -ms-border-radius: 1rem 0 1rem 0;
        -o-border-radius: 1rem 0 1rem 0;
    }

    .content .business-structure {
        padding: 3rem 3rem;
    }

    .business-structure .tbg-logo {
        width: 150px;
        margin: 0 auto 3rem;
    }

    .bm-section .bm-sectoral-title,
    .hdte-section .hdte-sectoral-title,
    .agro-section .agro-sectoral-title,
    .trading-section .trading-sectoral-title,
    .pc-section .pc-sectoral-title {
        gap: 0;
        padding: .3rem 1rem;
        margin: 0 0 .5rem 0;
    }

    .bm-section .bm-sectoral-title img,
    .hdte-section .hdte-sectoral-title img,
    .agro-section .agro-sectoral-title img,
    .trading-section .trading-sectoral-title img,
    .pc-section .pc-sectoral-title img {
        height: 25px;
    }

    .bm-section .bm-sectoral-title h5,
    .agro-section .agro-sectoral-title h5,
    .trading-section .trading-sectoral-title h5,
    .pc-section .pc-sectoral-title h5 {
        padding: 3px 0 0;
        font-size: 12px;
    }

    .hdte-section .hdte-sectoral-title h5,
    .pc-section .pc-sectoral-title h5 {
        padding: 2px 0 0;
        font-size: 9px;
    }

    .bm-section .bm-nested-list li,
    .hdte-section .hdte-nested-list li,
    .agro-section .agro-nested-list li,
    .trading-section .trading-nested-list li,
    .pc-section .pc-nested-list li {
        margin-bottom: 3px;
        font-size: 11px;
        padding: 0 .2rem;
    }

    .tbg-inform {
        padding: 0 4rem !important;
    }

    .tbg-inform .addreas p {
        padding: 0;
        line-height: 17px;
    }

    .career-content {
        flex-direction: column;
    }

    .content .about-company-leader {
        padding: 3rem 8rem;
    }

    .content .vision-mission {
        padding: 3rem 10rem;
    }

    .card-img {
        grid-template-columns: repeat(3, 1fr);
    }

    .text-about {
        text-align: center;
    }

    .container-about .text-about img {
        width: 40rem; 
    }

    .card-body {
        padding: 0 !important;
    }
    .card-wrap-img {
        padding: 0;
    }

    .content .magazine-page {
        padding: 3rem 8rem 0 8rem;
    }

    .cover-file img {
        height: 220px;
    }

    .banner .media-banner-caption {
        top: 40%;
        left: 5%;
        width: 450px;
        font-size: 20px;
    }

    .gallery-page {
        padding: 3rem 10rem 0 10rem;
    }

    .img-content .img-file img {
    height: 220px;
    }

    .content .news-section {
        padding: 3rem 6rem 0 6rem;
    }

    .news-container,
    .search-items {
        gap: 1rem;
    }

    .news-single-section {
        padding: 0 10rem 3rem 10rem;
    }

    .news-single-container .news-single-img {
        height: 350px;
    }

    /* Contact Page */
    .contact-page {
        padding: 3rem 6rem 3rem 6rem;
        gap: 2rem;
    }

    .contact-page .form-section .form-panel {
        padding: 2rem 3rem 3rem 3rem;
    }

    .career-page {
        padding: 3rem 8rem 3rem 8rem;
    }

    .career-container {
        gap: 1rem;
    }

    .career-container .job-item {
        border-radius: 3rem 0 3rem 0;
        -webkit-border-radius: 3rem 0 3rem 0;
        -moz-border-radius: 3rem 0 3rem 0;
        -ms-border-radius: 3rem 0 3rem 0;
        -o-border-radius: 3rem 0 3rem 0;
    }

    .job-item .career-company-logo img {
        border-radius: 1rem 0 1rem 0;
        -webkit-border-radius: 1rem 0 1rem 0;
        -moz-border-radius: 1rem 0 1rem 0;
        -ms-border-radius: 1rem 0 1rem 0;
        -o-border-radius: 1rem 0 1rem 0;
    }

    .job-item .job-content h4 {
        font-size: 16px;
    }

    .career-page .career-form {
        padding: 0;
    }

    .cover-content img {
        height: 50vh;
    }
}

@media all and (max-width: 960px) {
    .milestone-content .milestone-content-detail {
        width: 450px;
    }

    .cover-content img {
        height: 40vh;
    }

    .cover-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media all and (max-width: 820px) {
    .milestone-content .milestone-content-detail {
        width: 400px;
    }
}


@media all and (max-width: 792px) {
    .container {
        display: block !important;
    }

    .content .content-mailing-title{
        font-size: 25px;
    }

    .main .content h1{
        font-size: 22px;
    }

    .map-container {
        padding: auto;
    }

    .global-mas-sub-title {
        width: 100%;
        padding: 0;
        font-size: 1rem;
    }

    .card-img {
        grid-template-columns: repeat(2, 1fr);
    }

    .content .about-company-leader {
        padding: 3rem 5rem;
    }

    .content .vision-mission {
        padding: 3rem 9rem;
    }

    .core-value-content .core-value-acronym {
        width: 15%;
    }

    .core-value-content .core-value-desc {
        width: 85%;
    }

    .nested-sectoral-options ul li {
        padding: .3rem .5rem;
        font-size: 11px;
        border-radius: .5rem 0 .5rem 0;
        -webkit-border-radius: .5rem 0 .5rem 0;
        -moz-border-radius: .5rem 0 .5rem 0;
        -ms-border-radius: .5rem 0 .5rem 0;
        -o-border-radius: .5rem 0 .5rem 0;
    }

    .content .magazine-page {
        padding: 3rem 8rem 0 8rem;
    }

    .cover-file img {
        height: 200px;
    }

    .banner .media-banner-caption {
        top: 40%;
        left: 4%;
        width: 380px;
        font-size: 17px;
    }

    .gallery-page {
        padding: 3rem 8rem 0 8rem;
    }

    .img-content .img-file img {
        height: 200px;
    }

    .news-single-section {
        padding: 0 8rem 3rem 8rem;
    }

    .news-single-container .news-single-img {
        height: 300px;
    }

    .career-page {
        padding: 3rem 6rem 3rem 6rem;
    }

    .career-container {
        display: flex;
        flex-direction: column;
    }

    .job-desc-container {
        height: 300px;
        width: 400px;
    }

    .form-radio-container {
        flex-direction: column;
    }
}

/* Responsive */
/* tab */
@media all and (max-width: 768px) {
    .content-mailing {
        display: block;
        text-align: left;
        margin-top: 20px !important;
    }

    .founder-content .founder-desc-container,
    .director-content .director-desc-container {
        text-align: left;
        hyphens: none;
    }

    .business-sectoral .bm-content,
    .business-sectoral .hdte-content,
    .business-sectoral .agro-content,
    .business-sectoral .trading-content,
    .business-sectoral .pc-content {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .business-sectoral .trading-content {
        flex-wrap: nowrap;
    }
    .business-sectoral .trading-content.show{
        display: grid;
        flex: 0 0 100%;
    }

    .bm-content .img-bm-container,
    .hdte-content .img-hdte-container,
    .agro-content .img-agro-container,
    .trading-content .img-trading-container,
    .pc-content .img-pc-container {
        height: 18vh;
        border-radius: 0 1rem 0 1rem;
    }

    .main .banner .banner-img {
        width: 100%;
        height: 50vw;
        object-fit: cover;
        border-bottom-right-radius: 7rem;
        border-bottom: 10px solid #67C042;
        border-right: 10px solid #67C042;
    }

    .content .about-desc {
        padding: 3rem 5rem;
    }

    .content .vision-mission {
        padding: 3rem 8rem;
    }

    .core-value-acronym {
        height: 100%;
    }

    .tbg-inform {
        padding: 0 3rem !important;
    }
    
    .acronym-container h1 {
        margin: 10px !important;
    }

    .core-value-acronym .acronym-container {
        height: 90%;
    }

    .core-value-content .core-value-acronym {
        border-radius: .7rem 0 .7rem 0;
        -webkit-border-radius: .7rem 0 .7rem 0;
        -moz-border-radius: .7rem 0 .7rem 0;
        -ms-border-radius: .7rem 0 .7rem 0;
        -o-border-radius: .7rem 0 .7rem 0;
    }

    .milestone-section .milestone-content-container {
        max-height: none;
        overflow-y: hidden;
        display: none;
    }

    .milestone-section {
        height: 1100px;
    }

    .milestone-section-mobile {
        display: block;
    }

    .milestone-timeline-mobile {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        position: absolute;
        left: 100px;
        top: 80px;
        margin-top: 50px;
    }
    .milestone-year-item-mobile {
        position: relative;
        margin-bottom: 25px;
        cursor: pointer;
        font-size: 18px;
        font-weight: bold;
        color: #aaa;
        transition: color 0.3s, font-size 0.3s;
    }
    .milestone-year-item-mobile::before {
        content: '';
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: #aaa;
        position: absolute;
        right: -21.6px;
        margin-bottom: -30px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
        transition: background-color 0.3s, width 0.3s, height 0.3s;
    }
    .milestone-year-item-mobile.active {
        color: #0090D6;
        font-size: 1.5em;
        font-weight: bold;
    }
    .milestone-year-item-mobile.active::before {
        background-color: #67C042;
    }
    .milestone-timeline-mobile::after {
        content: '';
        position: absolute;
        width: 3px;
        height: 100%;
        background-color: #ddd;
        right: -17px;
        top: -17px;
    }
    .milestone-content-container-mobile {
        margin-left: 120px;
        display: flex;
        justify-content: center;
        align-items: start;
        min-height: 320px;
        max-height: 320px;
    }
    .milestone-content-mobile {
        display: none;
        background-color: #0090D6;
        padding: 20px;
        color: white;
        border-radius: 2rem 0 2rem 0;
    }
    .milestone-content-mobile.active {
        flex-direction: column;
        align-items: center;
        display: flex;
        height: 100%;
        max-height: 950px;
        overflow-y: auto;
        overflow-x: hidden;
        row-gap: 1em;
    }
    .milestone-nested-mobile {
        display: flex;
        align-items: start;
    }
    .milestone-img-container-mobile {
        flex: 0 0 80px;
        margin-right: 20px;
        background-color: white;
        border-radius: .8rem 0 .8rem 0;
    }
    .milestone-img-container-mobile img {
        width: 80px;
        height: auto;
    }
    .milestone-nested-desc-mobile {
        flex: 1;
        font-size: .7em;
        letter-spacing: 1px;
    }

    .banner-caption {
        left: 20%;
        top: 37%;
        max-width: 15rem;
    }
    
    .banner-caption h1 {
        font-size: 22px;
    }

    .banner-caption p {
        font-size: 14px;
    }

    .banner-caption .banner-button {
        font-size: 10px;
    }

    .container-about {
        flex-direction: column;
        padding: 0 3rem;
    }

    .image-container {
        max-width: 60%;
        padding: 2rem 0;
    }

    .image-container img {
        border-radius: 0 1.5rem 0 1.5rem;
        -webkit-border-radius: 0 1.5rem 0 1.5rem;
        -moz-border-radius: 0 1.5rem 0 1.5rem;
        -ms-border-radius: 0 1.5rem 0 1.5rem;
        -o-border-radius: 0 1.5rem 0 1.5rem;
        box-shadow: 0 0 0 1.3rem #0090D6;
    }

    .container-about img,
    .content-about {
        max-width: 100%;
        flex: 1 1 100%;
        margin: 10px 0;
    }

    .content-about {
        padding: 10px;
    }

    .sectoral-section .sectoral-item {
        flex: 1 1 100%;
    }

    .sectoral-section .sectoral-item img {
        max-height: 1000px;
        object-fit: cover;
    }

    .sectoral-item .sectoral-content {
        left: 30%;
        transform: translateX(-20%);
        -webkit-transform: translateX(-20%);
        -moz-transform: translateX(-20%);
        -ms-transform: translateX(-20%);
        -o-transform: translateX(-20%);
    }

    .career-section {
        padding: 3rem;
        border-radius: 0 5rem 0 5rem;
        -webkit-border-radius: 0 5rem 0 ;
        -moz-border-radius: 0 5rem 0 ;
        -ms-border-radius: 0 5rem 0 ;
        -o-border-radius: 0 5rem 0 ;
    }

    .career-content {
        flex-direction: column;
    }

    .magazine-section {
        padding: 3rem 3rem;
        position: relative;
    }

    .magazine-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 3rem;
        white-space: normal;
        overflow-x: visible;
        padding: 1rem;
    }

    .magazine-item {
        width: 100%;
        max-width: 300px;
        justify-self: center;
    }

    .magazine-item .show-publuu-viewer {
        width: 100% !important;
        height: auto !important;
        max-height: 400px;
    }

    .magazine-item img {
        width: 100% !important;
        height: auto !important;
        object-fit: contain;
    }

    .tbg-inform .menu-link,
    .tbg-inform .media-link,
    .tbg-inform .tbg-newsletter {
        padding-top: 0;
    }

    .content .business-desc {
        padding: 3rem 6rem 2rem 6rem;
    }

    nav .nav-top .lang-section > .lang-menu .lang-panel > ul {
        margin-left: 77rem;
        background: none;
    }

    .nested-sectoral-options {
        display: none;
    }

    .sectoral-select-options {
        display: flex;
    }

    .content .business-sectoral {
        padding: 0 6rem 3rem 6rem;
    }

    .business-structure-line {
        display: none;
    }

    .business-structure .tbg-logo {
        margin: 0 auto 1rem;
    }

    .business-structure-content {
        flex-direction: column;
        padding: 0 6rem;
    }

    .bm-sectoral-title::before,
    .hdte-sectoral-title::before,
    .agro-sectoral-title::before,
    .trading-sectoral-title::before,
    .pc-sectoral-title::before {
        display: none;
    }

    .bm-sectoral-title::after,
    .hdte-sectoral-title::after,
    .agro-sectoral-title::after,
    .trading-sectoral-title::after,
    .pc-sectoral-title::after {
        display: none;
    }

    .business-structure-content .bm-section,
    .business-structure-content .hdte-section,
    .business-structure-content .agro-section,
    .business-structure-content .trading-section,
    .business-structure-content .pc-section {
        margin-top: 1rem;
    }

    .bm-section .bm-sectoral-title,
    .hdte-section .hdte-sectoral-title,
    .agro-section .agro-sectoral-title,
    .trading-section .trading-sectoral-title,
    .pc-section .pc-sectoral-title {
        padding: .3rem 1rem;
        margin: 0 0 .5rem 0;
    }

    .bm-section .bm-sectoral-title img,
    .hdte-section .hdte-sectoral-title img,
    .agro-section .agro-sectoral-title img,
    .trading-section .trading-sectoral-title img,
    .pc-section .pc-sectoral-title img {
        height: 25px;
        margin-right: 5px;
    }

    .bm-section .bm-sectoral-title h5,
    .hdte-section .hdte-sectoral-title h5,
    .agro-section .agro-sectoral-title h5,
    .trading-section .trading-sectoral-title h5,
    .pc-section .pc-sectoral-title h5 {
        padding: 3px 0 0;
        font-size: 16px;
    }

    .bm-section .bm-nested-list,
    .hdte-section .hdte-nested-list,
    .agro-section .agro-nested-list,
    .trading-section .trading-nested-list,
    .pc-section .pc-nested-list {
        padding: 0 1rem;
    }

    .hdte-section .hdte-nested-list,
    .agro-section .agro-nested-list,
    .trading-section .trading-nested-list,
    .pc-section .pc-nested-list {
        display: none;
    }

    .bm-section .bm-nested-list li,
    .hdte-section .hdte-nested-list li,
    .agro-section .agro-nested-list li,
    .trading-section .trading-nested-list li,
    .pc-section .pc-nested-list li {
        margin-bottom: 5px;
        font-size: 13px;
        padding: 0 .3rem;
        border-radius: 0 .5rem 0 .5rem;
        -webkit-border-radius: 0 .5rem 0 .5rem;
        -moz-border-radius: 0 .5rem 0 .5rem;
        -ms-border-radius: 0 .5rem 0 .5rem;
        -o-border-radius: 0 .5rem 0 .5rem;
    }

    /* business sectoral modal */

    .sectoral-content-container {
        display: flex;
        flex-direction: column-reverse;
        padding: 1rem;
        max-width: 600px;
        padding: 3rem;
    }

    .sectoral-content-section {
        flex: 0 0 auto;
    }

    .sectoral-img-modal {
        flex: 0 0 auto;
    }

    .sectoral-content-section .sectoral-contact-label {
        font-size: 16px;
    }
    
    .sectoral-content-section .sectoral-website-label {
        font-size: 16px;
    }
    
    .sectoral-content-section .sectoral-website-link {
        font-size: 14px;
    }

    .content .content-mailing-title {
        height: 45px;
        padding: 0;
        justify-content: left;
    }

    .content .content-mailing-title h1 {
        font-size: 15px !important;
    }

    .container-about {
        .text-about {
            padding: 0;
        }
        .video-frame {
            width: 15rem;
            height: 10rem;
            text-align: center;
        }
    }

    .input-sub {
        height: 60px;
    }

    .main .content .blog-content p {
        font-size: 0.6rem;
        margin-top: 1rem;
        text-align: justify;
        text-indent: 1rem;
    }

    .container-about .text-about .card-wrap {
        grid-template-columns: 1fr;
    }
    .news-page {
        display: flex;
        flex-direction: column-reverse;
        width: 100%;
    }

    .news-wrap img {
        height: 300px;
    }

    .new-news {
        padding-left: 0;
    }

    .content .about-company-leader {
        padding: 3rem 6rem;
    }

    .about-company-leader .founder-container,
    .about-company-leader .director-container {
        flex-direction: column;
    }

    .about-company-leader .director-container {
        flex-direction: column-reverse;
    }

    .content .core-value {
        padding: 3rem 6rem; 
    }

    .banner .media-banner-caption {
        top: 30%;
        left: 4%;
        width: 350px;
        font-size: 16px;
    }

    .content .magazine-page {
        padding: 3rem 6rem 0 6rem;
    }

    .cover-content {
        display: flex;
        width: 100%;
    }

    .cover-content img {
        height: 400px;
    }

    .magazine-title {
        margin: 0;
        padding: 1rem;
    }

    .gallery-page {
        padding: 3rem 6rem 0 6rem;
    }

    .gallery-container {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .img-content {
        display: flex;
        width: 100%;
    }

    .img-content .img-file {
        flex: 0 0 50%;
        border-radius: 0 1.2rem 0 1.2rem;
        -webkit-border-radius: 0 1.2rem 0 1.2rem;
        -moz-border-radius: 0 1.2rem 0 1.2rem;
        -ms-border-radius: 0 1.2rem 0 1.2rem;
        -o-border-radius: 0 1.2rem 0 1.2rem;
    }

    .img-content .img-file img {
        width: 100%;
        height: 200px;
        object-fit: cover;
    }

    .img-content .img-name {
        flex: 0 0 50%;
        margin: 0;
        padding: 1rem;
    }

    /* Magazine */
    .cover-container {
        grid-template-columns: repeat(2, 1fr);
    }

    /* News */

    .content .news-section {
        padding: 3rem 3rem 0 3rem;
    }

    .news-container,
    .search-items {
        display: flex;
        flex-direction: column;
    }

    .news-section .main-news {
        flex-direction: column;
    }

    .news-section .main-news {
        height: 450px;
    }

    .main-news .main-news-img {
        margin-bottom: 2rem;
        width: 100%;
    }

    .main-news .main-news-content {
        padding: 0;
    }

    .main-news-content h4 {
        margin-bottom: .5rem;
    }

    .news-content {
        display: flex;
        width: 100%;
    }

    .news-content-container {
        padding: .5rem;
        width: 100%;
    }

    .news-content .news-file {
        flex: 0 0 40%;
    }

    .news-content .news-file img {
        width: 100%;
        height: 200px;
        object-fit: cover;
    }

    .news-content .news-content-container {
        flex: 0 0 60%;
        margin: 0;
        padding: 1rem;
    }

    .news-content-container .news-title {
        margin: 0 0 .7rem 0;
    }

    .news-single-section {
        padding: 0 6rem 3rem 6rem;
    }

    .contact-page {
        display: flex;
        flex-direction: column;
    }

    .contact-page .form-section .form-panel {
        padding: 2rem 3rem 3rem 3rem;
    }
    
    .address-section .contact-info{
        display: none;
    }

    .contact-page .contact-info-header
    {
        display: block;
    }

    .job-desc-container {
        height: 300px;
        width: 370px;
    }

    .career-search-icon {
        display: flex;
    }

    .nested-career-search ul {
        flex-direction: column;
    }

    .nested-career-search ul li {
        margin: 0 0 1rem 0;
    }

    .nested-career-search ul li:not(:first-child) {
        display: none;
    }

    .nested-career-search ul li .career-search {
        flex: 1;
        margin-right: .5rem;
    }

    .nested-career-search ul li:first-child {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        box-sizing: border-box;
    }

    .nested-career-search ul li:last-child {
        margin: 0;
    }

    .career-form .job-header {
        margin-left: 0;
    }

    .career-form .form-section .form-panel {
        padding: 2rem;
    }

    .form-input-file-container {
        display: block;
        margin-left: 2rem;
    }

    .form-input-file {
        font-size: 11px;
        line-height: normal;
    }

    .form-submit-container {
        padding: 0;
        flex-direction: column;
        align-items: flex-start;
    }
}

@media all and (max-width: 668px) {
    nav .nav-top .lang-section > .lang-menu .lang-panel > ul {
        margin-left: 61rem;
        background: none;
    }

    .banner-caption {
        left: 18%;
        top: 35%;
        max-width: 10rem;
    }
    
    .banner-caption h1 {
        font-size: 16px;
    }

    .banner-caption p {
        font-size: 10px;
    }

    .vision-mission .vision-mission-content {
        justify-content: center;
    }

    .card-item .card-content p {
        width: 35vh;
    }

    .tagline-content .tagline-button,
    .banner-caption .banner-button {
        font-size: 6px;
        padding: .225rem .60rem;
    }

    .content .about-desc {
        padding: 3rem 3rem;
    }

    .content .vision-mission {
        padding: 3rem 6rem;
    }

    .content .core-value {
        padding: 3rem 6rem; 
    }

    .milestone-section .milestone-content-container {
        max-height: none;
        overflow-y: hidden;
    }

    .content .business-sectoral {
        padding: 0 5rem 3rem 5rem;
    }

    .business-structure-content {
        flex-direction: column;
        padding: 0 4rem;
    }

    .business-structure .tbg-logo {
        margin: 0 auto 1rem;
    }

    .banner .media-banner-caption {
        top: 28%;
        font-size: 14px;
        width: 290px;
    }

    .job-content-container {
        gap: 0;
    }

    .job-content-section {
        flex: 0 0 100%;
    }

    .job-desc-container {
        height: 300px;
        width: 470px;
    }

    .job-content-container {
        grid-template-areas:
        'title logo'
        'desc desc'
        ;
    }

    .job-img-modal div {
        max-width: 15vh;
        max-height: 15vh;
        padding: 1rem;
    }

    .career-form .form-section .form-panel .form-label {
        font-size: 0.8em;
    }

    .radio-wrapper label {
        font-size: 0.8em;
    }
}

@media all and (max-width: 575px) {

    .main {
        flex-direction: column;
        margin-top: -1.5rem;
    }

    .tbg-inform .newsletter-form .form-input input {
        width: 200px;
    }

    .main .banner img {
        width: 100%;
        height: 80vw;
        object-fit: cover;
    }

    .main .banner .banner-img {
        width: 100%;
        height: 50vw;
        object-fit: cover;
        border-bottom-right-radius: 5rem;
        border-bottom: 8px solid #67C042;
        border-right: 8px solid #67C042;
    }

    .content .about-desc {
        padding: 3rem 3rem;
    }

    .content .vision-mission {
        padding: 3rem;
    }

    .content .core-value {
        padding: 3rem 6rem; 
    }

    .main .content .content-about {
        padding: 0 1rem;
    }

    .milestone-section .milestone-content-container {
        max-height: none;
        overflow-y: hidden;
    }

    .main .content h1 {
        margin-top: 1rem;
        padding: auto;
        font-style: normal;
        font-size: 14px;
    }

    nav .nav-top .lang-section > .lang-menu .lang-panel > ul {
        margin-left: 35rem;
        background: none;
    }


    .banner-caption {
        left: 17%;
        top: 43%;
        max-width: 8rem;
    }
    
    .banner-caption h1 {
        font-size: 14px;
    }

    .banner-caption p {
        font-size: 9px;
    }

    .banner-caption .banner-button {
        font-size: 6px;
        padding: .125rem .55rem;
    }

    .tagline-section img {
        height: 250px;
        object-fit: cover;
        object-position: center center;
    }

    .content .content-mailing-title {
        height: 0.5rem;
        padding: 0;
        justify-content: left;
        font-size: 0.9rem;
        text-align: left;
        height: 1.2rem;
    }
    
    .main .content .blog-content p {
        font-size: 0.6rem;
        margin-top: 1rem;
        text-align: justify;
        text-indent: 1rem;
    }

    .submit {
        font-size: 0.6rem;
    }

    .form-sub{
        font-size: 0.6rem;
    }
    .main .content .main-card {
        text-align: center;
    }

    .main .content .card img {
        width: 100%;
        height: 150px;
    }

    .content .content-title h1 {
        font-size: 20px;
    }

    .container {
        display: grid;
        grid-template-columns: 50% 50%;
        grid-template-rows: auto;
        grid-template-areas:
            "item3 item3 item3"
            "item1 item1 item2";
    }

    .container .item-a {
        grid-area: item1;
    }

    .container .item-b {
        grid-area: item2;
    }

    .container .item-c {
        grid-area: item3;
    }

    .container img {
        width: min(100%,320px);
        height: min(100%,192px);
    }

    .container ul {
        justify-items: center;
        padding: 0;
    }

    .main-card {
        display: block;
        padding: 0 2rem;
    }

    .card {
        height: 263px;
        text-align: center;
        border-radius: 10px;
        cursor: pointer;
        margin: 0 auto;
    }

    .card-title h1 {
        font-size: 20px;
    }

    .card-img {
        grid-template-columns: 1fr;
    }

    nav .nav-top {
        padding-right: 4rem;
    }

    .tbg-inform {
        display: flex;
        flex-direction: column;
        align-items: start;
    }

    .content .addreas h1{
        line-height: normal;
    }

    #map {
        width: 270px;
        height: 300px;
    }
    .grecaptcha-badge { 
        visibility: hidden;
    }
    .google-notes {
        font-size:10px;
        margin-top:10px;
    }

    /* About */

    .card-height {
        grid-template-columns: repeat(1, 1fr);
        justify-items: start;
        gap: 2rem;
        padding: 0;
    }

    .card-height .card-content {
        padding: 2rem;
        margin: 0 1rem;
    }

    .container-about .text-about img {
        width: 15rem; 
    }

    /* Contact */

    .wrapper-card .card-form {
        width: 85% !important;
    }

    .inform-title p {
        text-align: center;
        font-size: 14px;
        margin: 0;
    }

    footer {
        margin-top: 0.5rem;
    }

    .content .business-sectoral {
        padding: 0 4rem 3rem 4rem;
    }

    .business-structure-content {
        flex-direction: column;
        padding: 0 3rem;
    }

    .business-structure .tbg-logo {
        margin: 0 auto 1rem;
    }

    .banner .media-banner-caption {
        top: 25%;
        font-size: 12px;
        width: 270px;
    }

    /* Magazine */

    .content .magazine-page {
        padding: 3rem 6rem 0 6rem;
    }

    .cover-content {
        display: block;
        margin-bottom: .7rem;
    }

    .cover-container {
        display: flex;
        flex-direction: column;
    }

    .cover-content img {
        height: 500px;
    }

    .news-single-section {
        padding: 0 4rem 3rem 4rem;
    }

    .news-single-container .news-single-img {
        height: 270px;
        border-radius: 0 2rem 0 2rem;
        -webkit-border-radius: 0 2rem 0 2rem;
        -moz-border-radius: 0 2rem 0 2rem;
        -ms-border-radius: 0 2rem 0 2rem;
        -o-border-radius: 0 2rem 0 2rem;
    }

    .career-page {
        padding: 2rem;
    }

    .career-container .job-item {
        border-radius: 2rem 0 2rem 0;
        -webkit-border-radius: 2rem 0 2rem 0;
        -moz-border-radius: 2rem 0 2rem 0;
        -ms-border-radius: 2rem 0 2rem 0;
        -o-border-radius: 2rem 0 2rem 0;
    }

    .job-desc-container {
        width: 430px;
    }

    .content .page-search-section {
        padding: 0 3rem 0 3rem;
    }

    .milestone-section {
        padding: 3rem 2rem;
    }

    .milestone-timeline-mobile {
        left: 40px;
    }

    .milestone-img-container-mobile {
        flex: 0 0 60px;
    }
    .milestone-img-container-mobile img {
        width: 60px;
    }

    .milestone-content-container-mobile {
        margin-left: 100px;
    }

    .milestone-year-item-mobile {
        font-size: 16px;
    }

    .milestone-year-item-mobile.active {
        font-size: 1.2em;
    }

}

@media all and (max-width: 475px) {

    .banner .media-banner-caption {
        top: 22%;
        font-size: 11px;
        width: 260px;
    }

    /* Magazine */

    .content .magazine-page {
        padding: 3rem 4rem 0 4rem;
    }

    .cover-content img {
        height: 480px;
    }

    .news-content .news-file img {
        height: 160px;
    }

    .news-single-section {
        padding: 0 2rem 3rem 2rem;
    }

    .news-single-container .news-single-img {
        height: 230px;
    }

    .contact-page {
        padding: 3rem;
    }

    .contact-page .form-section .form-panel {
        padding: 2rem;
    }

    .g-recaptcha {
        transform: scale(0.77);
    }

    .job-content-container {
        padding: 2rem 2.5rem 2rem 2rem;
    }

    .job-desc-container {
        width: 360px;
    }

    .career-form .form-section .form-panel .form-title {
        font-size: .75em;
    }

    .image-container img {
        height: 230px;
    }
}

@media all and (max-width: 428px) {
    nav .nav-top .lang-section > .lang-menu .lang-panel > ul {
        margin-left: 37rem;
        background: none;
    }

    .sectoral-img-modal div img {
        max-width: 150px;
        max-height: 150px;
        width: auto;
        height: auto;
    }

    .tbg-inform {
        padding: 0 2rem !important;
    }

    .person-content-container {
        padding: 1rem 2rem 2rem 10.3rem;
    }

    .person-content-container p {
        font-size: 10px;
    }
    
    .person-content-container h5 {
        font-size: 11px;
    }

    .person-name-container h2 {
        font-size: 14px;
        margin: 0 0 0 10.3rem;
    }

    .career-content img {
        width: 160px;
        height: 220px;
        object-fit: cover;
        bottom: 2.1rem;
        padding-left: .8rem;
    }

    .container-about {
        padding: 0 2rem;
    }

    .milestone-section .milestone-content-container {
        max-height: none;
        overflow-y: hidden;
    }

    .content .about-desc {
        padding: 3rem 3rem;
    }

    .content .about-company-leader {
        padding: 3rem 3rem;
    }

    .content .core-value {
        padding: 3rem 3rem; 
    }

    .core-value-content .core-value-acronym {
        width: 15%;
        border-radius: .5rem 0 .5rem 0;
        -webkit-border-radius: .5rem 0 .5rem 0;
        -moz-border-radius: .5rem 0 .5rem 0;
        -ms-border-radius: .5rem 0 .5rem 0;
        -o-border-radius: .5rem 0 .5rem 0;
    }

    .acronym-container h1 {
        font-size: 20px !important;
    }

    .core-value-content .core-value-desc {
        width: 85%;
    }

    .milestone-section {
        padding: 3rem 1.5rem;
    }

    .milestone-content {
        gap: 15px;
    }

    .milestone-section .milestone-content-container {
        max-height: none;
        overflow-y: hidden;
    }

    .milestone-content .milestone-content-detail {
        width: 220px;
    }

    .milestone-nested-list li .milestone-nested-desc {
        font-size: 10px;
    }

    .milestone-img-container img {
        width: 35px;
    }

    .milestone-nested-list {
        padding-left: .7rem;
    }

    .milestone-content li {
        margin-right: 5px;
    }

    .milestone-nested {
        border-radius: 1.5rem 0 1.5rem 0;
        -webkit-border-radius: 1.5rem 0 1.5rem 0;
        -moz-border-radius: 1.5rem 0 1.5rem 0;
        -ms-border-radius: 1.5rem 0 1.5rem 0;
        -o-border-radius: 1.5rem 0 1.5rem 0;
    }

    .milestone-nested-list .milestone-img-container {
        border-radius: .5rem 0 .5rem 0;
        margin-right: .7rem;
        -webkit-border-radius: .5rem 0 .5rem 0;
        -moz-border-radius: .5rem 0 .5rem 0;
        -ms-border-radius: .5rem 0 .5rem 0;
        -o-border-radius: .5rem 0 .5rem 0;
    }

    .milestone-year-container {
        padding-top: 22px;
    }

    .milestone-content li .milestone-year {
        font-size: 19px;
    }

    .content .business-desc {
        padding: 3rem 3rem 2rem 3rem;
    }

    .content .business-sectoral {
        padding: 0 3rem 3rem 3rem;
    }

    .business-structure-content {
        padding: 0 1.5rem;
    }

    .content .business-structure {
        padding: 1rem 2rem 2rem 2rem;
    }

    .bm-section .bm-sectoral-title img,
    .hdte-section .hdte-sectoral-title img,
    .agro-section .agro-sectoral-title img,
    .trading-section .trading-sectoral-title img,
    .pc-section .pc-sectoral-title img {
        height: 20px;
        margin-right: 3px;
    }

    .bm-section .bm-sectoral-title h5,
    .hdte-section .hdte-sectoral-title h5,
    .agro-section .agro-sectoral-title h5,
    .trading-section .trading-sectoral-title h5,
    .pc-section .pc-sectoral-title h5 {
        padding: 2px 0 0;
        font-size: 14px;
    }

    .bm-section .bm-nested-list,
    .hdte-section .hdte-nested-list,
    .agro-section .agro-nested-list,
    .trading-section .trading-nested-list,
    .pc-section .pc-nested-list {
        padding: 0 .7rem;
    }

    .bm-section .bm-nested-list li,
    .hdte-section .hdte-nested-list li,
    .agro-section .agro-nested-list li,
    .trading-section .trading-nested-list li,
    .pc-section .pc-nested-list li {
        font-size: 12px;
    }

    .business-structure .tbg-logo {
        margin: 0 auto 1rem;
    }

    /* business sectoral modal */

    .sectoral-content-container {
        padding: 1rem;
        max-width: 360px;
        padding: 2rem;
    }

    .sectoral-content-section {
        flex: 0 0 auto;
    }

    .sectoral-img-modal {
        flex: 0 0 auto;
    }

    .sectoral-content-section .sectoral-contact-label {
        font-size: 15px;
    }
    
    .sectoral-content-section .sectoral-website-label {
        font-size: 15px;
    }
    
    .sectoral-content-section .sectoral-website-link {
        font-size: 13px;
    }

    .banner .media-banner-caption {
        top: 20%;
        left: 4%;
        width: 230px;
    }

    .content .magazine-page {
        padding: 3rem 2rem 0 2rem;
    }

    .cover-file img {
        height: 170px;
    }

    .magazine-title {
        font-size: 13px;
    }

    .gallery-page {
        padding: 3rem 2rem 0 2rem;
    }
    
    .img-content .img-file img {
        height: 170px;
    }
    
    .img-content .img-name {
        font-size: 13px;
    }

    /* Magazine */

    .content .magazine-page {
        padding: 3rem 3rem 0 3rem;
    }

    .cover-content img {
        height: 470px;
    }

    /* News */

    .content .news-section {
        padding: 3rem 3rem 0 3rem;
    }

    .news-container,
    .search-items {
        display: flex;
        flex-direction: column;
    }

    .news-section a {
        margin-bottom: 1rem;
    }

    .news-section .main-news {
        flex-direction: column;
    }

    .news-section .main-news {
        height: 400px;
    }

    .main-news .main-news-content {
        padding: 0;
    }

    .main-news-content h4 {
        margin-bottom: 0;
    }

    .main-news .main-news-img {
        border-radius: 0 2rem 0 2rem;
        -webkit-border-radius: 0 2rem 0 2rem;
        -moz-border-radius: 0 2rem 0 2rem;
        -ms-border-radius: 0 2rem 0 2rem;
        -o-border-radius: 0 2rem 0 2rem;
    }

    .news-content .news-file img {
        height: 150px;
    }

    .news-content .news-file{
        border-radius: 0 1rem 0 1rem;
        -webkit-border-radius: 0 1rem 0 1rem;
        -moz-border-radius: 0 1rem 0 1rem;
        -ms-border-radius: 0 1rem 0 1rem;
        -o-border-radius: 0 1rem 0 1rem;
    }

    .main-news-content h4 {
        font-size: 14px;
    }

    .main-news-content p {
        font-size: 12px;
    }

    .job-content .job-details {
        gap: .2rem;
    }

    .job-category img,
    .job-location img {
        width: 12px;
    }

    .job-desc-container {
        width: 330px;
    }

    .image-container img {
        height: 200px;
    }

    .milestone-img-container-mobile {
        flex: 0 0 50px;
    }
    .milestone-img-container-mobile img {
        width: 50px;
    }

    .milestone-year-item-mobile {
        font-size: 14px;
    }

    .milestone-year-item-mobile.active {
        font-size: 1em;
    }

}

@media all and (max-width: 375px) {
    nav .nav-top .lang-section > .lang-menu .lang-panel > ul {
        margin-left: 33rem;
        background: none;
    }

    .person-content-container {
        padding: 1rem 1rem 1.5rem 10.3rem;
    }

    .person-content-container p {
        font-size: 9px;
    }
    
    .person-content-container h5 {
        font-size: 9px;
    }

    .tbg-inform .newsletter-form .form-input input {
        width: 150px;
    }

    .content .about-desc {
        padding: 2.5rem 2.5rem;
    }

    .milestone-content li .milestone-year {
        font-size: 18px;
    }

    .content .business-sectoral {
        padding: 0 2rem 3rem 2rem;
    }

    .business-structure-content {
        padding: 0 1rem;
    }

    .business-structure .tbg-logo {
        margin: 0 auto 1rem;
    }

    .sectoral-content-container {
        padding: 1rem;
        max-width: 300px;
        padding: 2rem;
    }

    .banner .media-banner-caption {
        top: 18%;
        font-size: 10px;
        width: 200px;
    }

    .news-single-container .news-single-img {
        height: 200px;
    }

    .g-recaptcha {
        transform: scale(0.60);
        -webkit-transform: scale(0.60);
        -moz-transform: scale(0.60);
        -ms-transform: scale(0.60);
        -o-transform: scale(0.60);
    }

    .career-page {
        padding: 1.5rem;
    }

    .job-item .career-company-logo img {
        background-color: #FFF;
        border-radius: 1rem 0 1rem 0;
        -webkit-border-radius: 1rem 0 1rem 0;
        -moz-border-radius: 1rem 0 1rem 0;
        -ms-border-radius: 1rem 0 1rem 0;
        -o-border-radius: 1rem 0 1rem 0;
    }

    .job-item .job-content h4 {
        font-size: 13px;
    }

    .job-item .job-content p {
        font-size: 11px;
    }

    .job-category p,
    .job-location p {
        font-size: 10px;
    }

    .job-desc-container {
        width: 280px;
    }

    .image-container img {
        height: 180px;
    }
}

/* Responsive */
/* phone */
@media all and (max-width: 320px) {
    nav .nav-top .lang-section > .lang-menu .lang-panel > ul {
        margin-left: 27rem;
        background: none;
    }
    .content-title {
        .shapes {
            width: 8rem;
        }
    }
    .card {
        height: 11rem;
        box-shadow: none;
    }
    .card-text {
        margin-top: .5rem;
    }

    .partner-carousel {
        padding: 0 !important;
    }

    .menu-link {
        justify-self: left;

        ul {

            li {
                padding: 0;
            }
        }
    }

    .news-wrap img {
        height: 200px;
    }

    .content .about-desc {
        padding: 2.5rem 2.5rem;
    }

    .milestone-section {
        padding: 3rem 1.5rem;
    }

    .milestone-content {
        gap: 15px;
    }

    .milestone-section .milestone-content-container {
        max-height: none;
        overflow-y: visible;
    }

    .milestone-content .milestone-content-detail {
        width: 190px;
    }

    .milestone-nested-list li .milestone-nested-desc {
        font-size: 9px;
    }

    .milestone-img-container img {
        width: 30px;
    }

    .milestone-nested-list {
        padding-left: .7rem;
    }

    .milestone-content li {
        margin-right: 5px;
    }

    .milestone-nested {
        border-radius: 1.5rem 0 1.5rem 0;
        -webkit-border-radius: 1.5rem 0 1.5rem 0;
        -moz-border-radius: 1.5rem 0 1.5rem 0;
        -ms-border-radius: 1.5rem 0 1.5rem 0;
        -o-border-radius: 1.5rem 0 1.5rem 0;
    }

    .milestone-nested-list .milestone-img-container {
        border-radius: .5rem 0 .5rem 0;
        margin-right: .7rem;
        -webkit-border-radius: .5rem 0 .5rem 0;
        -moz-border-radius: .5rem 0 .5rem 0;
        -ms-border-radius: .5rem 0 .5rem 0;
        -o-border-radius: .5rem 0 .5rem 0;
    }

    .milestone-year-container {
        padding-top: 22px;
    }

    .milestone-content li .milestone-year {
        font-size: 15px;
    }

    .content .business-sectoral {
        padding: 0 2rem 3rem 2rem;
    }

    .content .business-structure {
        padding: 0 .5rem 1rem .5rem;
    }

    .business-structure .tbg-logo {
        margin: 0 auto 1rem;
    }

    .business-structure-content {
        padding: 0 .5rem;
    }

    .bm-section .bm-sectoral-title img,
    .hdte-section .hdte-sectoral-title img,
    .agro-section .agro-sectoral-title img,
    .trading-section .trading-sectoral-title img,
    .pc-section .pc-sectoral-title img {
        height: 15px;
        margin-right: 2px;
    }

    .bm-section .bm-sectoral-title h5,
    .hdte-section .hdte-sectoral-title h5,
    .agro-section .agro-sectoral-title h5,
    .trading-section .trading-sectoral-title h5,
    .pc-section .pc-sectoral-title h5 {
        padding: 2px 0 0;
        font-size: 11px;
    }

    .bm-section .bm-nested-list,
    .hdte-section .hdte-nested-list,
    .agro-section .agro-nested-list,
    .trading-section .trading-nested-list,
    .pc-section .pc-nested-list {
        padding: 0 .5rem;
    }

    .bm-section .bm-nested-list li,
    .hdte-section .hdte-nested-list li,
    .agro-section .agro-nested-list li,
    .trading-section .trading-nested-list li,
    .pc-section .pc-nested-list li {
        font-size: 9px;
    }

    .sectoral-content-container {
        padding: 1rem;
        max-width: 280px;
        padding: 2rem;
    }

    .banner .media-banner-caption {
        top: 16%;
        font-size: 9px;
        width: 180px;
    }

    /* Magazine */

    
    .content .magazine-page {
        padding: 3rem 2rem 0 2rem;
    }
    
    .cover-content img {
        height: 450px;
    }

    .news-content .news-file{
        border-radius: 0 1rem 0 1rem;
        -webkit-border-radius: 0 1rem 0 1rem;
        -moz-border-radius: 0 1rem 0 1rem;
        -ms-border-radius: 0 1rem 0 1rem;
        -o-border-radius: 0 1rem 0 1rem;
    }

    .news-content .news-file img {
        height: 120px;
    }

    .main-news-content h4 {
        font-size: 13px;
    }

    .main-news-content p {
        font-size: 11px;
    }

    .g-recaptcha {
        transform: scale(0.50);
        -webkit-transform: scale(0.50);
        -moz-transform: scale(0.50);
        -ms-transform: scale(0.50);
        -o-transform: scale(0.50);
    }

    .job-desc-container {
        width: 250px;
    }

    .job-img-modal div {
        padding: .3rem;
    }
}