:root{
    --themePink: #ec296b;
    --themePinkHover: #e11458;
    --themeYellow: #ff8c00;
    --themeYellowHover: #f08400;
    --themeBlue: #4801FF;
    --themeBlueHover: #3c01cf;
    --textDarkColor: #504e70;
    --white: #ffffff;
    --black: #000000;
    --lightGray: #ebe6f4;
    --boxShadow: 0 5px 25px rgba(39, 55, 76, 0.2);
    --transparentGray: rgba(0, 0, 0, 0.3);
    --gradientBg: linear-gradient(-225deg, rgba(236, 41, 107, 0.6) 0%, rgba(72, 1, 255, 0.6) 48%, rgba(236, 41, 107, 0.6) 100%);
    --transparentWhite: rgba(255, 255, 255, 0.2);
    --borderColor: #e8ebf3;
    --facebook: #2e54a8;
    --instagram: #d2005f;
    --youtube: #ce1c16;
}
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    line-height: 100%;
    font-family: sans-serif;
    font-size: 16px;
    color: var(--textDarkColor);
    font-weight: normal;
}
::selection{
	color: var(--black);
	background-color: var(--themePink);
}
body{
    overflow-x: hidden;
}
h1{
    font-size: 40px;
}
h2{
    font-size: 32px;
}
h3{
    font-size: 22px;
}
h4{
    font-size: 18px;
}
p{
    line-height: 120%;
}
a{
    text-decoration: none;
}
a:hover, a:hover span, a:hover p{
    color: var(--themePink);
}
button{
    cursor: pointer;
}
svg{
    width: 18px;
    fill: var(--themePink);
    cursor: pointer;
}
input, select, textarea{
    padding: 10px 15px;
    border: 1px solid var(--borderColor);
    border-radius: 5px;
    outline: none;
}
select{
    cursor: pointer;
}
input:focus, select:focus, textarea:focus{
    border: 1px solid var(--textDarkColor);
}
textarea{
    resize: vertical;
}
label, input[type="checkbox"], input[type="radio"]{
    cursor: pointer;
}

/* common styles */
.container{
    max-width: 1200px;
    margin: 0px auto;
}
.flex{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.yellowBtn{
    padding: 10px 15px;
    border-radius: 5px;
    background-color: var(--themeYellow);
    color: white;
    border: none;
}
.yellowBtn:hover{
    background-color: var(--themeYellowHover);
}
.pinkBtn{
    padding: 10px 15px;
    border-radius: 5px;
    background-color: var(--themePink);
    color: white;
    border: none;
}
.pinkBtn:hover{
    background-color: var(--themePinkHover);
}
.blueBtn{
    padding: 10px 15px;
    border-radius: 5px;
    background-color: var(--themeBlue);
    color: white;
    border: none;
}
.blueBtn:hover{
    background-color: var(--themeBlueHover);
}
.title{
    text-align: center;
    margin: 50px 0px 30px;
    display: block;
    padding-top: 50px;
}
.title h2{
    padding-bottom: 10px;
}
.inline{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
}
.inline>*{
    flex-grow: 1;
    flex-basis: 0;
    min-width: 200px;
}

/* header */
/* header top */
header{
    padding: 8px 0px;
    background-color: var(--white);
    max-height: 44px;
    height: 44px;
}
header .container, #headerNavBarContainer .container{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
header .flex{
    gap: 20px;
}
header a.flex{
    gap: 10px;
}
#headerTopMainLinks{
    border-left: 2px solid var(--lightGray);
    padding: 5px 0px 5px 20px;
}
#myDashboardLink{
    position: relative;
    padding: 5px 0px;
}
#myDashboardList{
    height: 0px;
    overflow: hidden;
    position: absolute;
    right: 0px;
    display: block;
    top: 28px;
    background-color: var(--white);
    z-index: 10;
    border-radius: 5px;
    min-width: 200px;
    box-shadow: var(--boxShadow);
    transition: 0.3s ease-in-out;
}
#myDashboardList a{
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 10px;
    padding: 10px;
}
#myDashboardLink:hover #myDashboardList{
    height: 123px;
    padding: 5px 0px;
}
#myDashboardList a:hover{
    background-color: var(--lightGray);
}
/* header bottom */
#headerNavBarContainer{
    background-color: var(--transparentGray);
    position: sticky;
    top: 0px;
    z-index: 9;
    padding: 20px 0px;
}
#headerNavBarContainer img{
    width: 200px;
    height: 40px;
    object-fit: contain;
    object-position: left center;
    cursor: pointer;
}
#logoColorful{
    display: none;
}
#headerNavBarContainer a{
    color: var(--white);
    padding: 10px 15px;
    border-radius: 3px;
}
#headerNavBarContainer a.active{
    background-color: var(--transparentWhite);
}
#headerNavBarContainer a:hover{
    background-color: var(--themePink);
}
#headerNavBarContainer a:nth-last-of-type(1):hover{
    background-color: var(--themeYellowHover);
}

/* main */
main{
    margin-top: -80px;
}
/* homeTop */
#homeTop{
    background: url("../img/bg/homeTop.webp");
    height: 500px;
    width: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
}
#homeTop::before{
    background: var(--gradientBg);
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    content: '';
    z-index: 1;
}
#homeTop>div{
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
}
#headerSearchContainer form{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    max-width: 700px;
    margin: 0px auto;
}
#headerSearchContainer p, #headerSearchContainer h1{
    color: var(--white);
}
#headerSearchContainer p{
    margin: 10px 0px 40px 0px;
}
#headerSearchContainer form>div{
    position: relative;
    flex-grow: 1;
    flex-basis: 0;
}
#headerSearchContainer form>button{
    position: relative;
    flex-grow: 1;
    flex-basis: 0;
    max-width: 150px;
    width: 100%;
    background-color: var(--themePink);
    color: var(--white);
    border: 0px;
    padding: 10px 20px;
    height: 42px;
}
#headerSearchContainer form>button:hover{
    background-color: var(--themePinkHover);
}
#headerSearchContainer input{
    padding: 10px;
    height: 42px;
    background-color: var(--white);
    outline: none;
    border: 1px solid var(--lightGray);
    border-radius: unset;
}
#headerSearchContainer input[type="search"], #headerSearchContainer input[type="search"]::placeholder{
    background-color: var(--themePink);
    color: var(--white);
}
#headerCategorySelectBoxContainer, #headerCategorySelectBoxContainer *, #headerLocationSelectBoxContainer, #headerLocationSelectBoxContainer *{
    width: 100%;
    max-width: 320px;
    text-align: left;
    z-index: 10;
    position: relative;
}
#headerCategorySelectBoxContainer, #headerLocationSelectBoxContainer{
    min-width: 280px;
}
#headerCategorySearchBoxText, #headerCategorySearchBoxTextBanner, #headerLocationSelectBoxText{
    cursor: pointer;
}
#headerCategorySearchBox, #headerCategorySearchBoxBanner, #headerLocationSelectBox{
    display: none;
    position: absolute;
    top: 42px;
    left: 0px;
    background-color: var(--white);
    min-width: 280px;
}
#headerCategorySearchBox.active, #headerCategorySearchBoxBanner.active, #headerLocationSelectBox.active{
    display: block;
}
#headerCategorySearchBox nav, #headerCategorySearchBoxBanner nav, #headerLocationSelectBox nav{
    max-height: 276px;
    overflow-y: auto;
    border: 1px solid var(--lightGray);
}
#headerCategorySearchBox nav div, #headerCategorySearchBoxBanner nav div, #headerLocationSelectBox nav div, #headerLocationSelectBox nav details{
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    cursor: pointer;
}
#headerLocationSelectBox nav details{
    padding: 0px;
}
#headerLocationSelectBox nav details summary{
    padding: 5px;
}
#headerCategorySearchBox img, #headerCategorySearchBoxBanner img{
    height: 32px;
    width: 32px;
    object-fit: contain;
    object-position: center;
}
#headerCategorySearchBox nav div.headerCategorySearchBoxGroup, #headerCategorySearchBoxBanner nav div.headerCategorySearchBoxGroup, #headerLocationSelectBox nav div.headerLocationSelectBoxGroup{
    padding: 8px;
}
#headerCategorySearchBox nav div.headerCategorySearchBoxGroup span, #headerCategorySearchBoxBanner nav div.headerCategorySearchBoxGroup span, #headerLocationSelectBox nav div.headerLocationSelectBoxGroup span{
    font-weight: bold;
}
#headerCategorySearchBox nav div:hover, #headerCategorySearchBoxBanner nav div:hover, #headerLocationSelectBox nav div:hover, #headerLocationSelectBox nav details:hover summary{
    background-color: var(--themePink);
}
#headerCategorySearchBox nav div:hover span, #headerCategorySearchBoxBanner nav div:hover span, #headerLocationSelectBox nav div:hover span, #headerLocationSelectBox nav details:hover summary{
    color: var(--white);
}
#headerCategorySearchBox div b, #headerCategorySearchBoxBanner div b, #headerLocationSelectBox div b{
    background-color: var(--themeYellow);
    color: var(--white);
    padding: 5px;
    float: right;
    width: fit-content;
}
#headerCategorySearchBox span p, #headerCategorySearchBoxBanner span p, #headerLocationSelectBox span p{
    display: none;
}

/* homeCategoriesList */
#homeCategoriesList{
    background-color: var(--lightGray);
    margin-bottom: -130px;
}
#homeCategoriesList .container{
    position: relative;
    z-index: 1;
    transform: translateY(-130px);
}
#homeCategoriesButtonList{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}
.adsCategoriesList{
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 30px;
    flex-wrap: wrap;
    max-width: 100%;
    overflow: auto;
    scroll-snap-type: x mandatory;
    padding: 5px;
}
#homeCategoriesList article{
    background-color: var(--white);
    box-shadow: 0px 0px 10px var(--transparentGray);
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    width: 210px;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
    padding: 25px;
    cursor: pointer;
    scroll-snap-stop: normal;
    scroll-snap-align: start;
}
#homeCategoriesList article:hover{
    background-color: var(--themePink);
}
#homeCategoriesList article, #homeCategoriesList article *{
    transition: 0.3s;
}
#homeCategoriesList article:hover *{
    color: var(--white);
}
#homeCategoriesList article:hover b{
    background-color: var(--themeYellow);
}
#homeCategoriesList article:hover img{
    scale: 60%;
}
#homeCategoriesList article img{
    height: 60px;
}
#homeCategoriesList article span{
    padding: 10px 0px;
    text-align: center;
}
#homeCategoriesList article b{
    padding: 5px;
    background-color: var(--themePink);
    color: var(--white);
    border-radius: 10px;
}

/* premierBanners */
#premierBanners{
    background-color: var(--white);
    margin-bottom: 50px;
}

/* bannerListType1 */
.bannerListType1{
    display: flex;
    justify-content: center;
    align-items: start;
    gap: 30px;
    flex-direction: column;
}
.bannerListType1 article{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
    width: 100%;
    flex-wrap: wrap;
    cursor: pointer;
}
.bannerListType1 article:nth-of-type(even){
    flex-direction: row-reverse;
}
.bannerListType1 article::before{
    background: var(--gradientBg);
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100vh;
    content: '';
    z-index: 1;
    display: block;
    opacity: 0.3;
    transition: 0.3s;
}
.bannerListType1 img{
    flex-grow: 1;
    flex-basis: 0;
    object-fit: contain;
    object-position: center;
    z-index: 2;
    transition: 0.3s;
}
.bannerListType1 article img:nth-of-type(1){
    width: 100%;
    max-width: 450px;
    min-width: 280px;
    aspect-ratio: 3/2;
    flex-grow: 1;
    flex-basis: 0;
}
.bannerListType1 article img:nth-of-type(2){
    height: 100%;
    max-height: 300px;
    min-height: 200px;
    flex-grow: 1;
    flex-basis: 0;
    max-width: 745px;
}
.bannerListType1 img:hover{
    scale: 90%;
}

/* premierAds */
#premierAds{
    background-color: var(--lightGray);
    padding-bottom: 50px;
    margin-top: -50px;
}

/* adsListType1 */
.adsListType1{
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 30px;
    flex-wrap: wrap;
}
.adsListType1 article{
    max-width: 350px;
    min-width: 250px;
    overflow: hidden;
    box-shadow: 0px 0px 10px var(--transparentGray);
    cursor: pointer;
    flex-grow: 1;
    flex-basis: 0;
    transition: 0.3s;
    box-sizing: content-box;
    background-color: var(--white);
}
.adsListType1 article:hover{
    scale: 90%;
}
.adsListType1 article>div:nth-of-type(1){
    position: relative;
    aspect-ratio: 3/2;
    overflow: hidden;
}
.adsListType1 article>div>img{
    position: absolute;
    width: 100%;
    object-fit: cover;
    object-position: center;
    top: 0px;
    left: 0px;
    transition: 0.3s;
}
.adsListType1 article>div:nth-of-type(1):hover>img{
    scale: 120%;
}
.specialAdShape{
    background-color: var(--themeYellow);
    z-index: 1;
    position: absolute;
    top: -70px;
    left: -70px;
    width: 120px;
    height: 120px;
    rotate: 45deg;
}
.specialAdShape svg{
    fill: var(--white);
    width: 20px;
    rotate: -45deg;
    position: absolute;
    right: 10px;
    bottom: 50px;
}
.adCategoryShape{
    background-color: var(--themePink);
    z-index: 1;
    position: absolute;
    bottom: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.adCategoryShape img{
    width: 30px;
}
.adsListType1 article>span>div:nth-of-type(1){
    padding: 25px 25px;
}
.adsListType1 article>span>div:nth-of-type(1)>h3{
    max-height: 44px;
    height: 44px;
    overflow: hidden;
}
.adsListType1 article>span>div:nth-of-type(1)>p:nth-of-type(1){
    padding: 5px 0px;
}
.adsListType1 article>span>div:nth-of-type(1)>h3:hover{
    color: var(--themePink);
}
.adsListType1 article>span>div:nth-of-type(21)>p:nth-of-type(1){
    margin: 10px 0px;
}
.adsListType1 article>span>div:nth-of-type(1)>p:nth-of-type(1):hover{
    color: var(--themePink);
}
.adsListType1 article>span>div:nth-of-type(1)>p:nth-of-type(1) svg{
    height: 14px;
}
.adsListType1 article>span>div:nth-of-type(1)>p:nth-of-type(2){
    max-height: 38px;
    height: 38px;
    overflow: hidden;
}
.adsListType1 article>span>div:nth-of-type(2){
    padding: 25px 25px;
    border-top: 1px solid var(--borderColor);
    text-align: center;
    position: relative;
}
.adsListType1 article>span>div:nth-of-type(2) span:nth-of-type(2){
    background-color: var(--themePink);
    border-radius: 3px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    position: relative;
    transition: 0.5s;
}
.adsListType1 article>span>div:nth-of-type(2) span:nth-of-type(1){
    background-color: var(--themeYellow);
    border-radius: 3px;
    position: absolute;
    top: 25px;
    left: 25px;
    width: calc(100% - 50px);
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.adsListType1 article>span>div:nth-of-type(2) div:hover>span:nth-of-type(2){
    transform: translateY(-50px);
}
.adsListType1 article>span>div:nth-of-type(2) span p{
    color: var(--white);
    padding: 5px;
}

/* adsListType2 */
.adsListType2{
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 30px;
    flex-direction: column;
}
.adsListType2 article{
    box-shadow: 0px 0px 10px var(--transparentGray);
    cursor: pointer;
    flex-grow: 1;
    flex-basis: 0;
    transition: 0.3s;
    box-sizing: content-box;
    background-color: var(--white);
    display: flex;
    min-height: 220px;
    max-height: 220px;
    width: 100%;
    overflow: hidden;
}
.adsListType2 article:hover{
    scale: 90%;
}
.adsListType2 article>div:nth-of-type(1){
    position: relative;
    height: 220px;
    aspect-ratio: 3/2;
}
.adsListType2 article>div>img{
    position: absolute;
    height: 220px;
    aspect-ratio: 3/2;
    object-fit: cover;
    object-position: center;
    top: 0px;
    left: 0px;
    transition: 0.3s;
}
.adsListType2 article>div:nth-of-type(1):hover>img{
    scale: 120%;
}
.adsListType2 article>span{
    background-color: var(--white);
    position: relative;
    width: 100%;
}
.adsListType2 article>span>div:nth-of-type(1){
    padding: 25px 25px 10px;
}
.adsListType2 article>span>div:nth-of-type(1)>h3{
    max-height: 22px;
    height: 22px;
    overflow: hidden;
}
.adsListType2 article>span>div:nth-of-type(1)>h3:hover{
    color: var(--themePink);
}
.adsListType2 article>span>div:nth-of-type(1)>p:nth-of-type(1){
    margin: 10px 0px;
}
.adsListType2 article>span>div:nth-of-type(1)>p:nth-of-type(1):hover{
    color: var(--themePink);
}
.adsListType2 article>span>div:nth-of-type(1)>p:nth-of-type(1) svg{
    height: 14px;
}
.adsListType2 article>span>div:nth-of-type(1)>p:nth-of-type(2){
    max-height: 57px;
    height: 57px;
    overflow: hidden;
}
.adsListType2 article>span>div:nth-of-type(2){
    padding: 10px 25px 25px;
    border-top: 1px solid var(--borderColor);
    text-align: center;
    position: relative;
}
.adsListType2 article>span>div:nth-of-type(2) span:nth-of-type(2){
    background-color: var(--themePink);
    border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    position: relative;
    transition: 0.5s;
    height: 30px;
}
.adsListType2 article>span>div:nth-of-type(2) span:nth-of-type(1){
    background-color: var(--themeYellow);
    border-radius: 3px;
    position: absolute;
    width: calc(100% - 50px);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
}
.adsListType2 article>span>div:nth-of-type(2) div:hover>span:nth-of-type(2){
    transform: translateX(calc(100% + 25px));
}
.adsListType2 article>span>div:nth-of-type(2) span p{
    color: var(--white);
    padding: 5px;
}

/* loginRegister */
#loginRegister{
    background-color: var(--lightGray);
    padding: 50px 0px;
    text-align: center;
}
#loginRegister form{
    background-color: var(--white);
    box-shadow: var(--boxShadow);
    border-radius: 5px;
    max-width: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 15px;
    padding: 30px;
    margin: auto;
}
#loginRegister form>*{
    width: 100%;
}
#loginRegister form p a{
    color: var(--themePink);
}

/* post */
#post{
    background-color: var(--lightGray);
    padding: 50px 0px;
}
#post>div{
    display: flex;
    justify-content: center;
    align-items: start;
    flex-wrap: wrap;
    gap: 30px;
}
#post>div>div{
    min-width: 400px;
}
#post>div>div button{
    width: 100%;
}
#post>div>div>span{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}
#post>div hr{
    width: calc(100% + 40px);
    transform: translateX(-20px);
}
#post>div aside hr{
    margin: 15px 0px;
}
#post>div>div, #post>div>aside>div{
    background-color: var(--white);
    padding: 20px;
    border-radius: 5px;
    flex-grow: 1;
    flex-basis: 0;
}
#post>div>aside{
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}
#post>div form{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
#post form input, #post form textarea, #post form select{
    width: 100%;
    background-color: var(--lightGray);
    text-align: left;
}
#post form input[type="radio"]{
    width: unset;
    accent-color: var(--themePink);
}
#post form input[type="search"], #post form input[type="search"]::placeholder{
    background-color: var(--themePink);
    color: var(--white);
}
#post>div form>div{
    position: relative;
}
#post>div form>div>div{
    z-index: 2;
    width: 100%;
    top: 65px;
}
#post form textarea{
    height: 150px;
}
#post form>div>label{
    display: block;
    margin-bottom: 5px;
}
#post form>div>span>img{
    width: 100%;
    margin: auto;
    display: block;
    object-fit: cover;
    object-position: center;
    border: 1px solid var(--textDarkColor);
    aspect-ratio: 3/2;
}
#post .inline>label{
    white-space: nowrap;
    line-height: 40px;
}
#post .inline>div>label{
    padding-bottom: 5px;
    display: inline-block;
}






/* postAdSection */
#postAdSection{
    text-align: center;
    position: relative;
    background-image: url("../img/bg/postAd.webp");
    background-size: cover;
    background-attachment: fixed;
}
#postAdSection::before{
    display: block;
    position: absolute;
    height: 100%;
    width: 100%;
    content: '';
    background: var(--gradientBg);
}
#postAdSection>div>*{
    color: var(--white);
    z-index: 2;
    position: relative;
}
#postAdSection h1{
    padding-top: 50px;
}
#postAdSection p{
    padding: 10px 0px 30px;
}
#postAdSection a{
    margin-bottom: 50px;
    display: inline-block;
    padding: 15px 30px;
    border-radius: 50px;
    background-color: var(--themePink);
}
#postAdSection a:hover{
    background-color: var(--themePinkHover);
}

/* pageTop */
#pageTop{
    background: url("../img/bg/pageTop.webp");
    height: 300px;
    width: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
}
#pageTop.viewPageTop{
    height: 220px;
}
#pageTop::before{
    background: var(--gradientBg);
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    content: '';
    z-index: 1;
}
#pageTop>div{
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
}
#pageTop h1{
    margin: 40px 0px 20px;
}
#pageTop.viewPageTop h1{
    margin-top: 80px;
}
#pageTop h1, #pageTop p{
    color: var(--white);
}
#pageTop a{
    color: var(--lightGray);
}

/* about */
#about{
    background-color: var(--lightGray);
    padding: 50px 0px;
}
#about>div{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 30px;
}
#about>div>*{
    flex-grow: 1;
    flex-basis: 0;
}
#about>div>span{
    min-width: 400px;
}
#about>div>img{
    max-width: 600px;
    min-width: 350px;
}
#about h4{
    margin: 20px 0px;
}

/* privacyAndTerms */
#privacyAndTerms{
    padding: 50px 0px;
    background-color: var(--lightGray);
    text-align: justify;
}
#privacyAndTerms h4{
    margin: 20px 0px 10px;
}
#privacyAndTerms p{
    line-height: 150%;
}

/* contact */
#contact{
    padding: 50px 0px;
}
#contact>div{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 30px;
}
#contact>div>span{
    flex-grow: 1;
    flex-basis: 0;
}
#contact>div>span>h3{
    text-align: center;
    margin-bottom: 20px;
}
#contact>div>span:nth-of-type(1){
    max-width: 400px;
}
#contact>div>span:nth-of-type(1)>div{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
#contact article{
    padding: 20px;
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 20px;
}
#contact article>div:nth-of-type(1){
    padding: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--white);
    border-radius: 100%;
    background-color: var(--transparentWhite);
}
#contact article svg{
    fill: var(--white);
}
#contact article:nth-of-type(1){
    background-color: var(--themePink);
}
#contact article:nth-of-type(2){
    background-color: var(--themeBlue);
}
#contact article:nth-of-type(3){
    background-color: var(--themeYellow);
}
#contact article h4{
    color: var(--white);
}
#contact article p{
    color: var(--lightGray);
    margin-top: 3px;
}
#contact form{
    box-shadow: var(--boxShadow);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 30px;
}

/* subPagesTopBar */
#subPagesTopBar>div{
    padding-top: 15px;
    padding-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}
#subPagesTopBar span{
    color: var(--themePink);
}
#subPagesTopBar svg{
    transform: translateY(3px);
}

/* adsSection */
#adsSection{
    background-color: var(--lightGray);
    padding: 50px 0px;
}
#adsSection>div{
    display: flex;
    justify-content: center;
    align-items: start;
    gap: 30px;
}
#adsSection>div>div>span, #adsSection aside>form, #adsSection aside>div>span{
    background-color: var(--white);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-radius: 5px;
    margin-bottom: 30px;
}
#adsSection>div>div>span>div{
    display: flex;
    justify-content: right;
    align-items: center;
    margin-left: 15px;
}
#adsSection>div>div>span>div svg{
    margin-right: 20px;
    width: 20px;
}
#columnView{
    fill: var(--textDarkColor);
}
#adsSection aside{
    min-width: 300px;
}
#adsSection aside>form input{
    width: 100%;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}
#adsSection aside>form button{
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    padding: 12px;
}
#adsSection aside>div{
    display: flex;
    flex-direction: column;
    gap: 30px;
}
#adsSection aside>div span hr{
    border: none;
    margin: 10px 0px;
    width: calc(100% + 40px);
    transform: translateX(-20px);
    border-top: 1px solid var(--borderColor);
}
#adsSection aside>div span{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    margin-bottom: 0px;
}
#adsSection aside>div span article{
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}
#adsSection aside span:hover h4, #adsSection aside span span:hover{
    color: var(--themePink);
    cursor: pointer;
}
#adsSection, #adsSection>div>div, #adsSection>div>div>span, #adsSection.viewAdSection>div>div img{
    width: 100%;
    margin: 0px;
}
#adsSection>div>div>span.sortResultsContainer{
    margin-bottom: 30px;
}
#adsSection.viewAdSection aside form, #adsSection.viewAdSection aside{
    min-width: 400px;
    max-width: 400px;
}
#adsSection.viewAdSection aside form{
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 10px;
}
#adsSection.viewAdSection aside form>*{
    width: 100%;
}
#contactButtonContainer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
#adsSection.viewAdSection aside form div button{
    color: var(--white);
    border: none;
    flex-grow: 1;
    flex-basis: 0;
    transition: 0.3s;
}
#adsSection.viewAdSection aside form div button:nth-of-type(1){
    background-color: var(--themePink);
    border-bottom-right-radius: 20px;
}
#adsSection.viewAdSection aside form div button:nth-of-type(2){
    background-color: var(--themeYellow);
    border-bottom-right-radius: 20px;
}
#adsSection.viewAdSection aside form div button:nth-of-type(3){
    background-color: var(--themeBlue);
    border-bottom-right-radius: 20px;
}
#adsSection.viewAdSection aside form div button:nth-of-type(1):hover{
    background-color: var(--themePinkHover);
    border-bottom-right-radius: 0px;
}
#adsSection.viewAdSection aside form div button:nth-of-type(2):hover{
    background-color: var(--themeYellowHover);
    border-bottom-right-radius: 0px;
}
#adsSection.viewAdSection aside form div button:nth-of-type(3):hover{
    background-color: var(--themeBlueHover);
    border-bottom-right-radius: 0px;
}
#adsSection.viewAdSection p{
    line-height: 150%;
    text-align: justify;
}
#adsSection.viewAdSection p b{
    font-weight: bold;
}
#adsSection form .viewPageAsideLongBox{
    display: flex;
    justify-content: left;
    align-items: center;
    background-color: var(--themePink);
    color: var(--white);
    padding: 10px;
    border-radius: 5px;
}
#adsSection form .viewPageAsideLongBox:nth-of-type(2){
    background-color: var(--themeYellow);
}
#adsSection form .viewPageAsideLongBox:nth-of-type(3){
    background-color: var(--transparentGray);
}
#adsSection form .viewPageAsideLongBox:nth-of-type(3) svg{
    fill: var(--white);
}
.viewPageAsideLongBox a{
    color: var(--white);
}
.viewPageAsideLongBox a:hover{
    color: var(--textDarkColor);
}
/* ads section active sidebar categories */
#adsSection aside>div>span{
    max-height: 2000px;
    transition: 0.3s;
    overflow: hidden;
}
#adsSection aside>div span.activeSideBarCategories{
    max-height: 53px;
}



/* footer */
footer{
    background-color: var(--themePink);
    padding: 50px 0px 20px;
}
footer *{
    color: var(--white);
}
footer a:hover, footer a:hover p, footer{
    color: var(--themeYellow);
}
footer a:hover svg{
    fill: var(--themeYellow);
}
footer svg{
    fill: var(--white);
}
footer .container{
    gap: 30px;
    align-items: flex-start;
    flex-wrap: wrap;
}
footer .container>div{
    flex-grow: 1;
    flex-basis: 0;
    min-width: 250px;
}
footer .container>div:nth-of-type(1){
    flex-grow: 2;
}
footer h3{
    border-bottom: 2px solid var(--themeYellow);
    margin-bottom: 10px;
    padding-bottom: 10px;
    width: fit-content;
}
footer a{
    display: block;
    margin-top: 10px;
    width: fit-content;
}
footer div a.flex{
    justify-content: left;
    gap: 10px;
}
#footerSocialIcons{
    justify-content: left;
    gap: 20px;
    margin-top: 10px;
}
#footerSocialIcons span{
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 8px;
}
#footerSocialIcons span:hover{
    background-color: var(--white);
}
#copyright p{
    text-align: center;
}
footer hr{
    border: none;
    margin: 20px 0px 10px;
    border-top: 1px solid var(--borderColor);
}
#copyright p a{
    display: inline-block;
    color: var(--themeYellow);
}
#copyright p a:hover{
    color: var(--themeYellowHover);
}


/* social media icon colors */
.facebook{
    background-color: var(--facebook);
}
.facebook:hover svg{
    fill: var(--facebook);
}
.instagram{
    background-color: var(--instagram);
}
.instagram:hover svg{
    fill: var(--instagram);
}
.youtube{
    background-color: var(--youtube);
}
.youtube:hover svg{
    fill: var(--youtube);
}

/* notificationBox */
#notificationBox{
    position: fixed;
    top: -100px;
    right: 16px;
    opacity: 0;
    transition: 0.3s;
    background-color: var(--themePink);
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 280px;
    border-radius: 8px;
    z-index: 15;
}
#notificationBox.active{
    animation: 3s forwards notificationBoxAnimation;
}
@keyframes notificationBoxAnimation {
    0%{
        top: -100px;
        opacity: 0;
    }
    20%{
        top: 16px;
        opacity: 1;
    }
    80%{
        top: 16px;
        opacity: 1;
    }
    100%{
        top: -100px;
        opacity: 0;
    }
}
#notificationBox svg{
    fill: var(--white);
    width: 30px;
    height: 30px;
}
#notificationBox p{
    color: var(--white);
}

/* dashboard */

.tableContainer{
    overflow: auto;
    max-width: 100%;
    max-height: calc(100vh - 100px);
    height: auto;
}
.tableContainer table{
    width: 100%;
}
.tableContainer table th{
    font-weight: bold;
    padding: 10px 5px;
}
.tableContainer table td{
    padding: 5px;
}
.tableContainer table tr:nth-of-type(odd){
    background-color: var(--lightGray);
}
.tableContainer table tr:nth-of-type(1){
    background-color: var(--transparentGray);
}
.tableContainer svg{
    fill: var(--white);
}
.tableContainer .inline{
    flex-wrap: nowrap;
    gap: 5px;
}
.tableContainer .inline>*{
    min-width: unset;
}
.tableContainer img{
    width: 90px;
    height: 60px;
    object-fit: cover;
    object-position: center;
}
#dashboard .container h3{
    margin-bottom: 10px;
    margin-top: 50px;
    text-align: center;
}
#dashboard .tableContainer:nth-last-of-type(1){
    margin-bottom: 50px;
}

/* addPostSideList */
#addPostSideList article h3{
    text-align: center;
    margin-bottom: 10px;
}
#addPostSideList article img{
    width: 100%;
}
#addPostSideList article p{
    text-align: justify;
    margin: 10px 0px;
}
#addPostSideList article button{
    width: 100%;
}
#post #addPostSideList hr{
    border: none;
    margin: 20px 0px;
    width: calc(100% + 40px);
    transform: translateX(-20px);
    border-top: 1px solid var(--borderColor);
}

/* Scrollbar CSS */
* {
    scrollbar-width: auto;
    scrollbar-color: #ec296b #ff8c00;
}
*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
*::-webkit-scrollbar-track {
    background: #ff8c00;
}
*::-webkit-scrollbar-thumb {
    background-color: #ec296b;
    border-radius: 0px;
}

/* share buttons properties */
#shareButton{
    display: block;
    position: fixed;
    top: calc(50% - 100px);
    left: 0px;
    width: 45px;
    height: 247px;
    background-color: var(--white);
    z-index: 11;
}
#shareButton div{
    width: 45px;
    height: 45px;
    position: relative;
    transition: 0.5s;
}
#shareButton div:hover{
    width: 90px;
    height: 45px;
    position: relative;
    cursor: pointer;
    padding: 0px 22px;
}
#shareButton div:last-child:hover{
    width: 45px;
    padding: 0px 0px;
    cursor: auto;
}
#shareButton div svg{
    fill: var(--white);
    position: absolute;
    width: 25px;
    height: 25px;
    margin: 10px 0px 0px 10px;
}
#shareButtonMain{
    display: none;
}
#shareButtonText h6{
    font-weight: 400;
    text-align: center;
    padding-top: 4px;
}
/* icon colors */
.facebook{
    background-color: #3b5998;
}
.whatsapp{
    background-color: #25D366;
}
.instagram{
    background-color: #c525bd;
}
.telegram{
    background-color: #0088CC;
}
.youtube{
    background-color: #c4302b;
}
.twitter{
    background-color: #00acee;
}
.call{
    background-color: #e4c22b;
}
.email{
    background-color: #c83116;
}
.share{
    background-color: var(--themeYellow);
}


/* Body Scroll */
#headerNavBarContainer.onTop{
    background-color: var(--white);
}
#headerNavBarContainer.onTop::after{
    content: "";
    position: absolute;
    height: 4px;
    border-top: 0;
    background: #c49cde;
    border-radius: 5px;
    z-index: 1;
    width: 100%;
    bottom: 0;
    background-image: linear-gradient(to right, var(--themeBlue), #a36bc7 12.5%, #20c981 12.5%, #2dce89 25%, var(--themePink) 25%, #fecf71 37.5%, #e45a4d 37.5%, #f8b5ae 50%, var(--themePink) 50%, #fa74a1 62.5%, #8b51b0 62.5%, #c49cde 75%, #1874f0 75%, #92bbf4 87.5%, #1d8eb6 87.5%, #89d3ee);
}
#headerNavBarContainer.onTop a{
    color: var(--textDarkColor);
}
#headerNavBarContainer.onTop a:hover, #headerNavBarContainer.onTop a.active, #headerNavBarContainer.onTop a:nth-last-of-type(1){
    color: var(--white);
}
#headerNavBarContainer.onTop a.active{
    background-color: var(--themePink);
}

/* menu toggler */
#menuClosed, #menuOpen{
    display: none;
    width: 30px;
    height: 30px;
    fill: white;
    z-index: 12;
}
#menuOpen{
    fill: var(--textDarkColor);
}

/* scrollToTop */
#scrollToTop{
    position: fixed;
    right: 30px;
    bottom: 30px;
    background-color: var(--themePink);
    border-radius: 100%;
    z-index: 11;
    width: 44px;
    height: 44px;
    transition: 1s;
    transform: translateY(-100vh);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
#scrollToTop svg{
    width: 18px;
    fill: var(--white);
    transition: 0.5s;
}
#scrollToTop:hover svg{
    rotate: 180deg;
}

/* mobile responsiveness */
@media screen and (max-width: 1320px) {
    #shareButton{
        top: 0px;
        width: 0px;
        height: 0px;
    }
    #shareButton div{
        position: fixed;
        left: 5px;
        bottom: 5px;
        width: 43px;
        height: 43px;
        transition: 0.5s;
        border-radius: 100%;
        z-index: 11;
    }
    #shareButton div:hover{
        transform: rotate(360deg);
        position: fixed;
        padding: 0px 0px;
        width: 43px;
        height: 43px;
    }
    #shareButton div svg{
        width: 20px;
        height: 20px;
        margin: 11px 11px;
    }
    #shareButtonText{
        display: none;
    }
    #shareButtonMain{
        display: block;
        z-index: 12;
        width: 45px;
        height: 45px;
        bottom: 4px;
        left: 4px;
    }
    #scrollToTop{
        bottom: 5px;
        right: 5px;
    }
}
@media screen and (max-width: 1220px) {
    .container{
        padding: 0px 10px;
    }
    .adsCategoriesList{
        gap: 10px;
    }
    #homeCategoriesList article{
        width: 165px;
        padding: 10px;
    }
}
@media screen and (max-width: 1080px) {
    .bannerListType1 article img:nth-of-type(2) {
        height: unset;
        max-height: unset;
        min-height: unset;
        flex-grow: 1;
        flex-basis: 0;
        max-width: unset;
        width: 100%;
    }
}
@media screen and (max-width: 950px) {
    #headerNavBarContainer nav a:nth-of-type(2), #headerNavBarContainer nav a:nth-of-type(3), #headerNavBarContainer nav a:nth-of-type(4){
        display: none;
    }
}
@media screen and (max-width: 880px) {
    #about>div>span{
        min-width: unset;
    }
    #about>div>img{
        max-width: 100%;
        min-width: unset;
    }
    #post>div>aside{
        max-width: 500px;
    }
    #post>div>div{
        min-width: unset;
    }
    #adsSection>div>div>span svg{
        display: none;
    }
    #adsSection>div>div>span{
        flex-wrap: wrap;
    }
    #adsSection{
        padding: 10px 0px 50px;
    }
    #adsSection>.container{
        flex-direction: column-reverse;
    }
    #adsSection.viewAdSection aside form, #adsSection.viewAdSection aside{
        width: 100%;
        max-width: unset;
        min-width: unset;
    }
    #adsSection>div{
        flex-wrap: wrap;
    }
    #adsSection aside>form{
        margin-bottom: 10px;
    }
    #adsSection aside>div{
        gap: 10px;
    }
    #adsSection aside>div>span{
        max-height: 53px;
    }
    #adsSection aside>div>span.activeSideBarCategories{
        max-height: 2000px;
    }
    #adsSection aside{
        width: 100%;
    }
    h1{
        font-size: 30px;
    }
    h2{
        font-size: 28px;
    }
}
@media screen and (max-width: 740px) {
    #headerCategorySelectBoxContainer, #headerCategorySelectBoxContainer *, #headerLocationSelectBoxContainer, #headerLocationSelectBoxContainer *{
        max-width: unset;
    }
    #headerSearchContainer form>button{
        max-width: unset;
    }
    #pageTop h1{
        margin: 60px 0px 20px;
    }
    #homeTop{
        height: 520px;
    }
    #homeTop>div{
        top: 45%;
    }
}
@media screen and (max-width: 620px) {
    #menuClosed{
        display: block;
    }
    #headerTopMainLinks{
        display: none;
    }
    #headerNavBarContainer nav{
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 20px;
        align-items: center;
        position: fixed;
        top: 0px;
        left: 0px;
        height: fit-content;
        height: 100vh;
        width: 100%;
        background-color: var(--white);
        padding: 30px;
        display: none;
    }
    #headerNavBarContainer nav>*{
        width: 100%;
    }
    #headerNavBarContainer nav a:nth-of-type(2), #headerNavBarContainer nav a:nth-of-type(3), #headerNavBarContainer nav a:nth-of-type(4){
        display: block;
    }
    #headerNavBarContainer a{
        color: var(--textDarkColor);
        background-color: var(--lightGray);
    }
    #headerNavBarContainer a:hover, #headerNavBarContainer a.active, #headerNavBarContainer a:nth-last-of-type(1){
        color: var(--white);
    }
    #headerNavBarContainer a.active{
        background-color: var(--themePink);
    }
    #headerNavBarContainer .yellowBtn{
        background-color: var(--themeYellow);
    }
}
@media screen and (max-width: 500px) {
    #adsSection>div>div>span p{
        display: none;
    }
    #pageTop{
        height: 330px;
    }
    #pageTop.viewPageTop h1{
        margin-top: 30px;
    }
    #pageTop>div{
        margin-top: 20px;
    }
}
@media screen and (max-width: 400px) {
    #homeCategoriesButtonList{
        flex-wrap: wrap;
        gap: 10px;
        align-items: stretch;
    }
    #homeCategoriesButtonList>*{
        flex-grow: 1;
        flex-basis: 0;
        min-width: 120px;
    }
    #headerCategorySelectBoxContainer, #headerLocationSelectBoxContainer{
        min-width: 250px;
    }
    #headerSearchContainer form>button{
        min-width: 250px;
    }
    #homeCategoriesList article{
        min-width: 120px;
        padding: 10px;
        flex-grow: 1;
        flex-basis: 0;
    }
}