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

@media only screen and (max-width: 1200px) {
    #photosContainer{
        flex-wrap:wrap;
    }

        #photosContainer .UploadedImg{
            width:32.33%;
            margin-block:10px;
        }

    .menubar .rightSection > a, .menubar .MenuHead {
        font-size: 14px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .menubar .MenuHead {
        padding-left: 0px;
    }

        .menubar .MenuHead > span {
            padding-left: 10px;
        }

    .menubar .rightSection > a:first-child {
        display: none;
    }

    .ProfileMain .ProductItem {
        width: 32.6%;
    }
}

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

    .section {
        width: calc(100% - 20px);
    }

    .ProductListArea {
        /*padding: 0px 10px;*/
    }


    .header {
        padding-top: 10px;
    }

        .header > .leftSection{
            width:260px;
        }

        .loginArea {
            width: 53px;
        }

        .loginArea span {
            display: none;
        }

    


    .MainFooter .rightSection {
        width: 100%;
        padding: 0px 10px;
    }

    .MainFooter .leftSection {
        float: unset;
        margin: 0 auto;
    }


    .CommentProduct .rightSection {
        width: 100%;
        order: 2;
    }

    .CommentProduct .leftSection {
        width: 100%;
        order: 1;
    }

    .hero {
        /*height: 300px;*/
    }

        .hero .HeroText h1 {
            /*font-size: 2.5rem;*/
        }

        .hero .HeroText p {
            /*font-size: 0.9rem;*/
        }

    .ProductExplorer {
        gap: 10px;
    }

        .ProductExplorer a {
            width: calc(33.33% - 10px);
        }

        .ProductExplorer .ProductItem .AiPlatform {
            font-size: 10px;
            letter-spacing: 0.5rem;
        }

    .MainPromptSection {
        flex-direction: column;
    }

    .PromptImg {
        width: 100%;
    }

    .PromptText {
        width: 100%;
    }

    .PromptPage {
        padding-top: 1rem;
    }

    .hero .HeroText h1 {
        /*margin-bottom: 10px;*/
    }

    .PromptImg img {
        width: 100%;
    }

    .VariablesArea {
        /*margin-top: 20px;*/
    }

    .BlogArticle {
        gap: 20px 2%;
    }

        .BlogArticle .PostItem {
            width: 32%;
        }

    .PromptText {
        margin-top: 20px;
    }

    .MainPromptArea{
        flex-direction:column;
    }

    .hero .HeroText h1{
        display:none;
    }

    .HeroDescription{
        width:100%;
    }
    .MainPromptArea{
        gap:10px;
    }
    .MainPromptSection {
        margin-bottom: 5px;
    }

    .RelatedPrompts{
        margin-top:10px;
    }

    .ProfileArea{
        flex-direction:column;
        gap:10px;
    }

    .ProfileSidebar, .ProfileMain{
        width:100%;
    }

    .ProfileSidebar {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 10px 5px;
    }

    .ProfileMeta{
        width:100%;
        margin-bottom:0px;
        height:unset;
        flex-direction:row;
        justify-content:space-between;
        padding:10px;
    }

    .ProfileMenuLine {
        border: 1px solid #e6e6e6;
    }
}

@media only screen and (max-width: 700px) {
    .mobile_menu {
        display: block;
    }
    .header{
        justify-content:space-between;
    }
    .header > .rightSection {
        width: 180px;
    }

    .menubar  {
        display: none;
    }


    .ProductListArea, .ArticleArea {
        margin-top: 10px;
    }

    .footerArea {
        margin-top: 50px;
    }

    .logo {
        margin-left: 0px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

        .logo img {
            width: unset;
        }

        .logo span {
            color: var(--mainColor);
            font-size: 20px;
            font-weight: 500;
        }


    .hero {
        /*margin-top: 10px;*/
    }

    .ShowUnder700 {
        display: block;
    }

    .MainFooter {
        flex-direction: column;
    }

        .MainFooter .leftSection {
            width: unset;
            margin-bottom: 20px;
        }


    .ProductListArea {
        /*padding: 0px 10px;*/
    }

    #variables {
        display: block;
    }

        #variables label {
            width: 100%;
            margin-bottom: 10px;
            display: flex;
        }

            #variables label span {
                width: 100px;
            }

        #variables input {
            flex-grow: 1;
        }

    .defaultVariable {
        gap: 0px;
    }

    .HijabSelection {
        width: 50%;
    }

    .BlogArticle {
        gap: 15px 2%;
    }

        .BlogArticle .PostItem {
            width: 49%;
        }

    .GenerateDescription {
        flex-direction: column;
        align-items: center;
        gap: 45px;
        margin-block:30px;
    }

    .HeroDescription{
        flex-direction:column;
        gap:10px;
    }

    .hero{
        margin-top:10px;
    }

    .ProfileMenuLine {
        gap:10px;
        padding-inline:5px;
        height:45px;
        font-size:14px;
    }

    .ProfileMain .ProductItem {
        width: 49.5%;
    }
}

@media only screen and (max-width: 480px) {

    .header {
        flex-direction: column;
        gap: 10px;
    }

    .logo img{
        max-height:40px;
    }

    .logo span{
        font-size:17px;
    }

    .header > .rightSection{
        width:100%;
        justify-content:center;
        display:flex;
    }

    .header > .leftSection{
        width:100%;
        justify-content:space-between;
    }

        .header > .leftSection .MoneyArea{
            width:130px;
            height:40px;
            font-size:12px;
        }

    .HeroDescription div{
        font-size:12px;
    }

    .MainFooter .leftSection {
        width: 95%;
    }

    .socials {
        width: unset;
        margin: 0px auto;
    }

    .copyRight p {
        width: 100%;
        text-align: center;
        margin-bottom: 0px;
        padding: 5px 0px;
    }



    .CommentProduct .rightSection, .CommentProduct .leftSection {
        padding: 20px 15px;
    }



    .ProductListArea, .ArticleArea {
        margin-top: 10px;
        margin-bottom: 20px;
    }

    .footerArea {
        margin-top: 50px;
    }

/*    .hero {
        height: 200px;
    }

        .hero .HeroText h1 {
            font-size: 2rem;
        }

        .hero .HeroText p {
            font-size: 0.9rem;
        }*/

    .logo .ShowUnder700 {
    }

    .ProductExplorer a {
        width: calc(50% - 5px);
    }

    .ProductListArea {
        padding: 10px 10px;
    }

    .ProductExplorer {
        gap: 5px;
    }

    .PromptActions {
        flex-wrap: wrap;
    }

        .PromptActions span {
            width: 100%;
            text-align: center;
        }

    .copyPrompt {
        width: 50%;
    }

    .ShareSection {
        height: unset;
        flex-direction: column;
        padding-top: 5px;
    }

    .ActionButton {
        font-size: 12px;
        height: 30px;
        padding-inline: 5px;
    }

    .sectionTitle h3 {
        font-size: 16px;
    }

    .ProductListArea p {
        font-size: 14px;
    }

    .defaultVariable {
        flex-direction: column;
    }

    .HijabSelection {
        width: 100%;
    }

    .ProductItem h5 {
/*        font-size: 11px;
        padding-block: 5px;
        line-height: 15px;*/
    }

    .PostItem {
        padding: 5px;
        padding-bottom: 25px;
    }

        .PostItem h2 {
            font-size: 12px;
            font-weight: 300;
            line-height: 18px;
        }

    .DescriptionSite h2{
        font-size:16px;

    }

    .VariableTitles{
        flex-direction:column;
        align-items:start;
    }

    .VariablesArea h3{
        margin-bottom:0px;
    }

    .VariableTitles .PromptAlert {
        text-align: center;
        margin-bottom:10px;
    }

    #photosContainer .UploadedImg {
        width: 49%;
    }

    .GenerateBtn{
        width:100%;
    }

    .ProfileMenuLine img{
        width:20px;
    }

    .ProfileMenuLine:last-child {
        width: 100%;
        justify-content: center;
    }

    .ProfileMain .ProductExplorer .ProductItem h5{
        display:none !important;
    }

    .BalanceForm input{
        padding-inline:0px;
    }
}