/* Index Page */

@media only screen and (min-width: 1440px) {
    .indexPage .headerWrapper .headerImg {
        left: 65%;
    }
    .indexPage .aboutUsWrapper {
        padding-left: 7rem;
        padding-right: 7rem;
    }
    .footerWrapper {
        gap: 8rem;
    }
}

@media only screen and (max-width: 1330px) {
    .navbarLogo {
        width: 20%;
    }
    .navbarList {
        gap: 1rem;
    }
    .navbarBody {
        gap: 3rem;
    }
    .indexPage .headerSection {
        padding: 0rem 5rem;
    }
    .indexPage .headerWrapper {
        padding-bottom: 18rem;
    }
    .indexPage .headerWrapper .headerImg {
        top: 99px;
    }
}

@media only screen and (max-width: 1110px) {
    .pageBtn {
        padding: 7px 20px;
    }
    .indexPage .headerWrapper {
        padding-bottom: 15rem;
    }
    .indexPage .headerWrapper .headerTitle {
        width: 80%;
    }
    .indexPage .headerWrapper .headerImg {
        top: 44px;
    }
}

@media only screen and (max-width: 1050px) {
    .navbarLogo {
        width: 16%;
    }
    .pageBtn {
        padding: 7px 10px;
    }
    .indexPage .headerSection {
        padding: 0rem 2rem;
    }
    .indexPage .headerWrapper {
        padding-bottom: 13rem;
    }
    .indexPage .headerWrapper .headerTitle {
        width: 90%;
    }
    .indexPage .headerWrapper .headerImg {
        top: 22px;
    }
    .indexPage .newsCardWrapper .newsCard {
        width: 29%;
    }
    .indexPage .newsCardWrapper {
        gap: 1rem;
    }
}

@media only screen and (max-width: 967px) {
    .navbar {
        justify-content: space-between;
        padding: 1rem 1rem;
        display: flex;
        align-items: center;
    }
    .navbarLogo img {
        width: 100%;
        height: auto;
    }
    .navbarToggleBtn {
        display: flex;
    }
    .navbarBody {
        position: fixed;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        top: 0;
        gap: 3rem;
        right: -100%;
        background-color: var(--green-color);
        z-index: 15;
        height: 100vh;
        width: 35%;
        transition: 750ms ease-in-out;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
    }
    .navbarBody.open {
        right: 0;
    }
    .navbarButtons,
    .navbarList {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        width: 100%;
    }
    .navbarList .listItem {
        transition: 400ms ease-in-out;
    }
    .navbarList .listItem:hover {
        transform: scale(1.15);
    }
    .navbarList .listItem span {
        font-size: 25px;
        font-weight: 600;
        color: #fff;
    }
    .navbarList .listItem a:hover {
        transform: scale(1.2);
    }
    .navbarButtons .buttonsItem {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .navbarButtons .buttonsItem .pageBtn {
        font-size: 20px;
        width: 75%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .navbarButtons .buttonsItem a {
        background-color: transparent;
        border-color: #fff;
        color: #fff;
        transition: 200ms ease-in-out;
    }
    .navbarButtons .buttonsItem .selectLanguage {
        border-color: #fff;
        color: #fff;
        font-size: 20px;
    }
    .navbarButtons .buttonsItem.bgGreen a {
        border-color: #fff;
        background-color: #fff;
        color: var(--green-color);
        transition: 200ms ease-in-out;
    }
    .indexPage .informationDetailList {
        gap: 10rem;
    }
    .footerSocial {
        width: 20%;
    }
    .footerTop {
        width: 90%;
    }
}

@media only screen and (max-width: 850px) {
    .indexPage .headerWrapper {
        padding-bottom: 10rem;
    }
    .indexPage .headerWrapper .headerImg {
        top: -25px;
        opacity: 65%;
    }
    .indexPage .headerWrapper .headerImg {
        left: 50%;
    }
    .indexPage .bannerSectionContentArea {
        width: 100%;
    }
    .indexPage .bannerSectionWrapper .bannerSectionImg {
        width: 50%;
        height: auto;
        left: 8px;
        opacity: 50%;
    }
    .indexPage .informationList {
        width: 95%;
    }
    .informationDetailCardWrapper {
        gap: 3rem;
    }
    .informationDetailCardWrapper a {
        width: 40%;
    }
    .informationDetailCardWrapper .informationCard {
        align-items: center;
    }
    .informationDetailCardWrapper .informationCard .cardLogo {
        left: 0;
        right: 0;
        margin: auto;
    }
    .indexPage .aboutUsWrapper .aboutUsLeft {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        width: 25%;
        padding-left: 3rem;
    }
}

@media only screen and (max-width: 768px) {
    .navbarBody {
        width: 60%;
    }
    .indexPage .headerWrapper {
        padding-bottom: 9rem;
    }
    .indexPage .headerWrapper .headerImg {
        top: -41px;
        opacity: 65%;
    }
    .indexPage .informationDetailList {
        width: 100%;
        gap: 0;
        justify-content: space-around
    }
    .indexPage .newsCardWrapper {
        flex-wrap: wrap;
        gap: 4rem 1rem;
    }
    .indexPage .newsCardWrapper .newsCard {
        width: 40%;
    }
    .indexPage .informationList {
        width: 100%;
    }
    .footerContact {
        width: 30%;
    }
    .footerSocial {
        width: 25%;
    }
}

@media only screen and (max-width: 600px) {
    .navbarBody {
        width: 60%;
    }
    .navbarLogo {
        width: 35%;
    }
    .indexPage .informationList {
        width: 95%;
        flex-wrap: wrap;
        gap: 2rem 0rem;
    }
    .indexPage .informationList .listItem {
        border-right: transparent;
    }
    .informationDetailCardWrapper {
        flex-wrap: wrap;
    }
    .informationDetailCardWrapper a {
        width: 55%;
    }
    .indexPage .aboutUsMidImg {
        display: none;
    }
    .indexPage .aboutUsWrapper {
        flex-direction: column;
        gap: 1rem;
    }
    .indexPage .aboutUsWrapper .aboutUsLeft {
        width: 100%;
        padding-left: 0rem;
    }
    .indexPage .aboutUsExplanation {
        width: 90%;
        text-align: center;
        margin: auto;
    }
    .indexPage .newsCardWrapper .newsCard {
        width: 70%;
    }
    .indexPage .headerWrapper .headerImg {
        display: none;
    }
    .indexPage .headerWrapper .headerTitle {
        width: 100%;
    }
    .indexPage .bannerSection {
        margin-bottom: 0rem;
    }
    .indexPage .headerWrapper {
        padding-top: 2rem;
        padding-bottom: 3rem;
    }
    .indexPage .informationDetailList {
        background-image: none;
        flex-wrap: wrap;
        gap: 2rem 0rem;
    }
    .indexPage .informationDetailList .listItem {
        width: 50%;
    }
    .footerTop {
        padding: 1rem;
    }
    .footerButtons {
        width: max-content;
    }
    .footerTopTexts {
        flex: 1;
    }
    .footerSocial {
        width: 30%;
    }
}

@media only screen and (max-width: 475px) {
    .navbarBody {
        width: 95%;
    }
    .footerInfo {
        flex-direction: column;
        align-items: start;
        gap: 1rem;
    }
    .footerInfoItem {
        border-right: none;
    }
}

@media only screen and (max-width: 425px) {
    .informationDetailCardWrapper a {
        width: 80%;
    }
    .indexPage .informationDetailList .listItem {
        width: 100%;
    }
    .indexPage .bannerSectionContentArea .areaTitle {
        width: 100%;
    }
    .indexPage .bannerSectionContentArea {
        padding: 10px;
    }
    .indexPage .bannerSectionCardWrapper {
        margin-top: 3rem;
        flex-wrap: wrap;
    }
    .indexPage .bannerSectionCardWrapper .bannerSectionCard {
        width: 35%;
    }
    .indexPage .newsCardWrapper .newsCard {
        width: 80%;
    }
}

@media only screen and (max-width: 375px) {
    .pageBtn {
        padding: 7px 3px;
    }
    .indexPage .headerSection {
        padding: 0rem 1rem;
    }
    .indexPage .headerWrapper .headerTitle {
        font-size: 40px;
    }
    .footerContact,
    .footerLink,
    .footerInfo,
    .footerSocial {
        width: 100%;
    }
    .footerContact,
    .footerSocial,
    .footerLinkList,
    .footerInfo {
        align-items: center;
    }
    .footerContact {
        padding: 0px 15px;
    }
}

/* Farmer Page */

@media only screen and (min-width: 1441px) {
    .farmerPage .headerSection .headerWrapper .headerTitle {
        width: 35%;
    }
    .farmerPage .headerSection .headerWrapper .headerSubtitle {
        width: 40%;
    }
}

@media only screen and (max-width: 1024px) {
    .farmerPage .headerSection .headerWrapper {
        padding: 3rem 2rem;
    }
    .farmerPage .pageContentSection .contentWrapper .contentExplanation {
        padding: 0rem 2rem;
    }
    .farmerPage .headerSection .headerWrapper .headerTitle,
    .farmerPage .headerSection .headerWrapper .headerSubtitle {
        width: 60%;
    }
    .contactSocial {
        left: 35px;
    }
    .contactWrapper {
        padding-left: 5rem;
        padding-right: 3rem;
    }
    .explanationWrapper p:nth-child(1) {
        width: 50%;
    }
}

@media only screen and (max-width: 768px) {
    .farmerPage .headerSection .headerWrapper .headerTitle,
    .farmerPage .headerSection .headerWrapper .headerSubtitle {
        width: 80%;
    }
    .farmerPage .headerSection .headerWrapper .headerImg:after {
        width: 250px;
        height: 264px;
    }
    .farmerPage .pageContentSection .contentWrapper .contentListWrapper .listItem {
        width: 100%;
    }
    .explanationWrapper p:nth-child(2),
    .explanationWrapper p:nth-child(1) {
        width: 90%;
    }
}

@media only screen and (max-width: 600px) {
    .farmerPage .pageContentSection .contentWrapper .contentListWrapper {
        padding: 0px 2rem;
    }
    .farmerPage .pageContentSection .contentWrapper .contentListWrapper .listItem {
        width: 100%;
    }
    .contactWrapper {
        padding: 0rem 2rem;
    }
    .contactWrapper .contactContent {
        flex-direction: column;
    }
    .contactWrapper .contactForm {
        width: 100%;
    }
    .contactWrapper .contactMaps {
        width: 100%;
    }
    .contactSocial {
        position: relative;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 100%;
        left: inherit;
    }
    .contactSocial:before {
        position: absolute;
        content: "";
        width: 140px;
        height: 1px;
        background-color: #707070;
        top: 0;
        bottom: 0;
        margin: auto;
        opacity: 50%;
        right: 300px;
    }
    .contactSocial:after {
        position: absolute;
        content: "";
        width: 140px;
        height: 1px;
        background-color: #707070;
        top: 0;
        bottom: 0;
        margin: auto;
        opacity: 50%;
        left: 300px;
    }
}

@media only screen and (max-width: 500px) {
    .contactSocial:after,
    .contactSocial:before {
        width: 25%;
    }
    .contactSocial:before {
        right: 245px;
    }
    .contactSocial:after {
        left: 245px;
    }
    .farmerPage .headerSection .headerWrapper .headerTitle {
        font-size: 35px;
    }
    .farmerPage .headerSection .headerWrapper .headerSubtitle {
        font-size: 20px;
    }
    .farmerPage .headerSection .headerWrapper {
        padding: 1rem 2rem;
        padding-bottom: 2rem;
    }
}

@media only screen and (max-width: 320px) {
    .farmerPage .headerSection .headerWrapper .headerTitle {
        font-size: 45px;
        font-weight: 900;
        color: var(--green-color);
        width: 45%;
        line-height: 1.2;
        z-index: 1;
    }
    .contactSocial:before {
        width: 20%;
    }
    .contactSocial:after {
        left: 200px;
    }
    .contactSocial:before {
        right: 200px;
    }
}

/* Page Content */

@media only screen and (max-width: 1024px) {
    .pageContent .pageContentSection,
    .pageContent .headerSection {
        padding: 0px 3rem;
    }
    .pageContent .pageContentWrapper .cardWrapper .pageContentCard {
        width: 40%;
    }
}

@media only screen and (max-width: 930px) {
    .pageContent .pageContentWrapper .cardWrapper .pageContentCard {
        width: 60%;
    }
}

@media only screen and (max-width: 620px) {
    .pageContent .pageContentWrapper .cardWrapper .pageContentCard {
        width: 75%;
    }
}

@media only screen and (max-width: 515px) {
    .pageContent .headerWrapper .headerTitle {
        font-size: 41px;
    }
    .pageContent .pageContentWrapper .imgWrapper {
        width: 100%;
    }
    .pageContent .pageContentWrapper .cardWrapper .pageContentCard {
        width: 95%;
        padding-left: 10px;
        padding-right: 10px;
    }
    .pageContent .pageContentSection,
    .pageContent .headerSection {
        padding: 0px 1rem;
    }
}