:root {
    --bgPattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='%236c757d' fill-opacity='0.02'%3E%3Cpolygon fill-rule='evenodd' points='8 4 12 6 8 8 6 12 4 8 0 6 4 4 6 0 8 4'/%3E%3C/g%3E%3C/svg%3E");

    --bg: #f5f7fa;
    --text: #1e1e1e;
    --textSecond: #5C6670;
    --muted: #7c6f66;
    --border: #e7e5e7;

    --primary: #4361EE ;
    --primary-hover: #a6641d;

    --accent: #1f4fff ;
    --accentHover: #3A0CA3;

    --card-bg: #1e1e1e;
    --cart-bg2: #f0f2f5;
    --input-bg: #fffaf5;

    --badge: #f6e2ed;

    --shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    --shadowHover: 0 4px 50px rgba(0, 0, 0, 0.3);



    --fontLogo: 'Sora';
    --fontMain: 'Inter';

}



@media (min-width: 1591px) {

    .postModelInner {
        padding-right: 50px;
    }

}




@media (min-width: 1276px) and (max-width: 1590px) {

    .postModelInner {
        padding-right: 0;
    }

    .postModelImage {
        width: 750px;
    }

    .postModelText {
        padding-top: 30px;
    }


}




@media (max-width: 1590px) {

    .arrowsContainer {
        width: 637.5px; /* 750 * 0.85 */
        display: flex;
        justify-content: space-between;
        position: relative;
        z-index: 10;
        margin-top: 25.5px; /* 30 * 0.85 */
    }

    #connections {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      pointer-events: none;
    }

    .connection-line {
        opacity: 0;
        stroke: var(--textSecond);
        stroke-width: 4.25px; /* 5 * 0.85 */
        fill: none;
        stroke-dasharray: 1000;
        stroke-dashoffset: 0;
        animation: drawLineReverse 1s ease forwards;
    }

    @keyframes drawLineReverse {
      from {
        stroke-dashoffset: 1000;
      }
      to {
        stroke-dashoffset: 0;
        opacity: 1;
      }
    }

    .candidateCards {
      display: block;
    }

    .candidateCard {
      width: 229.5px; /* 270 * 0.85 */
      height: 76.5px; /* 90 * 0.85 */
      background-color: var(--bg);
      border-radius: 17px; /* 20 * 0.85 */
      border: 0.85px var(--border) solid; /* 1 * 0.85 */
      box-shadow: 0 1.7px 8.5px rgba(0, 0, 0, 0.3); /* 0 2 10 */
      margin-bottom: 17px; /* 20 * 0.85 */
      position: relative;
      z-index: 1;
    }

    .candidateDetails {
      display: flex;
      justify-content: left;
    }

    .candidatePhoto {
      width: 51px; /* 60 * 0.85 */
      height: 51px; /* 60 * 0.85 */
      border-radius: 50%;
      margin-top: 11px; /* 13 * 0.85 */
      margin-left: 8.5px; /* 10 * 0.85 */
      margin-right: 8.5px; /* 10 * 0.85 */
      border: 2.55px var(--border) solid; /* 3 * 0.85 */
    }

    .candidateTitle {
        display: grid;
        padding: 17.85px 0; /* 21 * 0.85 */
        font-size: 13.6px; /* 16 * 0.85 */
    }

    .candidateName {
      font-weight: 600;
      font-family: 'Inter';
      color: var(--text);
    }

    .candidateDes {
      font-weight: 500;
      color: var(--textSecond);
      font-family: 'Inter';
      font-size: 11.05px; /* 13 * 0.85 */
    }

    .employerCards {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .employerCard {
      width: 229.5px; /* 270 * 0.85 */
      height: 170px; /* 200 * 0.85 */
      background-color: var(--bg);
      border-radius: 17px; /* 20 * 0.85 */
      border: 0.85px var(--border) solid; /* 1 * 0.85 */
      box-shadow: 0 1.7px 8.5px rgba(0, 0, 0, 0.3);
      position: relative;
      z-index: 1;
    }

    .employerDetails {
      display: flex;
      justify-content: left;
    }

    .employerPhoto {
      width: 51px; /* 60 * 0.85 */
      height: 51px; /* 60 * 0.85 */
      border-radius: 50%;
      margin-top: 11px; /* 13 * 0.85 */
      margin-left: 8.5px; /* 10 * 0.85 */
      margin-right: 8.5px; /* 10 * 0.85 */
      border: 2.55px var(--border) solid; /* 3 * 0.85 */
    }

    .employerTitle {
      display: grid;
      padding-top: 17.85px; /* 21 * 0.85 */
    }

    .employerName {
      font-weight: 600;
      font-size: 13.6px; /* 16 * 0.85 */
      font-family: 'Inter';
      color: var(--text);
    }

    .employerDes {
      font-weight: 500;
      color: var(--textSecond);
      font-family: 'Inter';
      font-size: 11.05px; /* 13 * 0.85 */
    }

    .employerCompanyDes {
        font-family: var(--fontMain);
        font-size: 11.05px; /* 13 * 0.85 */
        color: var(--textSecond);
        text-align: justify;
        display: block;
        margin-left: auto;
        margin-right: auto;
        padding: 8.5px; /* 10 * 0.85 */
    }

}





@media (max-width: 1275px) {

    .postModelInner {
        padding-right: 0;
        padding-left: 0;
        display: block;
    }


    .postModelImage {
        width: 1000px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }


    .postModelText {
        width: 100%;
        margin-left: 0;
    }

    .postModelTitle {
        margin-top: 10px;
    }

    .postModelDes {
        display: flex;
        justify-content: center;
    }

    .postModelButton {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

}





@media (max-width: 1150px) {

    .postModelImage {
        width: 900px;
    }

}








@media screen and (min-width: 1025px) {
    .mobile {
        display: none;
    }
}




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


    .desktop {
        display: none;
    }



    .mainFirstMobile {
        margin-top: 4.673vw;
        width: 100vw;
        height: 128.505vw;
        padding: 4.673vw;
    }



    .mainText1Mobile {
        font-family: var(--fontLogo);
        color: var(--textSecond);
        font-size: 9.346vw;
        font-weight: 700;
        width: 87.85vw;
    }


    .mainText2Mobile {
        font-family: var(--fontLogo);
        color: var(--text);
        font-size: 5.607vw;
        font-weight: 700;
        margin-top: 3vw;
        display: block;
    }


    .mainText3Mobile {
        font-family: var(--fontLogo);
        color: var(--textSecond);
        font-size: 3vw;
        font-weight: 500;
        width: 58.411vw;
        display: inherit;
        margin-top: 5vw;
    }



    .mainSearchCTA {
        display: block;
        opacity: 0;
        background-color: var(--text) !important;
        color: var(--bg) !important;
        font-family: var(--fontLogo);
        font-weight: 500;
        width: 35.78vw;
        height: 8.94vw;
        border-radius: 1.79vw;
        font-size: 3.5vw;
        border: none;
        transform: translateY(4.3vw);
        margin-top: 3vw;
        transition: all ease-in-out 0.6s;
    }


    .mainSearchCTA:hover {
        background-color: var(--accentHover) !important;
        color: var(--bg) !important;
    }

    .mainSearchCTA:active {
        background-color: var(--accentHover) !important;
        color: var(--bg) !important;
    }


    .mainSearchCTA.show {
        opacity: 1;
        transform: translateY(0);
    }



    .burjKhalifaMobile {
        width: 58.411vw;
        position: absolute;
        top: 37.383vw;
        right: 0;
        z-index: 1000;
    }



    .searchBarMobile {
        background-color: var(--textSecond);
        margin-top: 10vw;
        width: 95vw;
        height: max-content;
        border-radius: 4.673vw;
        display: block;
        margin-left: auto;
        margin-right: auto;
        padding: 5vw 4.673vw;
    }


    .searchBarInputs {
        width: 100%;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }


    .searchBarInput {
        width: 100%;
        height: 13.725vw;
        margin-bottom: 3.922vw;
        padding-left: 1.961vw;
        padding-right: 1.961vw;
        background-color: white;
        border: 2px var(--border) solid;
        border-radius: 1.961vw;
        color: var(--text);
        font-family: var(--fontMain);
        outline: none;
        font-size: 4.5vw;
        font-weight: 600;
    }




    .locationSectionMobile {
        position: relative;
        width: 100%;
        height: 13.725vw;
        margin-bottom: 3.922vw;
        font-family: var(--fontLogo);
    }

    .locationFieldMobile {
        width: 100%;
        height: 13.725vw;
        background-color: white;
        border: 2px var(--border) solid;
        border-radius: 1.961vw;
        color: #1e1e1e;
        font-family: var(--fontMain);
        outline: none;
        font-size: 5vw;
        font-weight: 600;
        padding: 2.7vw 2vw;
    }

    .locationListMobile {
        list-style: none;
        padding: 0;
        margin: 0;
        border: 2px solid var(--border);
        border-radius: 2vw;
        border-top: none;
        max-height: 45vw;
        overflow-y: auto;
        position: absolute;
        width: 100%;
        background-color: white;
        box-shadow: var(--shadowHover);
        display: none;
        z-index: 1000;
    }

    .locationListMobile li {
        padding: 2.7vw 2vw;
        cursor: pointer;
        transition: background 0.2s;
        font-size: 4vw;
        font-weight: 500;
    }

    .locationListMobile li:hover {
        background-color: var(--border);
        border-radius: 2vw;
    }






    .searchBarButton {
        background-color: var(--text);
        color: var(--bg);
        font-family: var(--fontLogo);
        width: 100%;
        height: 11.765vw;
        font-size: 4.8vw;
        font-weight: 500;
        border-radius: 1.961vw;
    }


    .searchBarButton:hover {
        background-color: var(--text);
        color: var(--bg);
    }

    .searchBarButton:active {
        background-color: var(--text) !important;
        color: var(--bg) !important;
    }




    .postModelMobile {
        padding-top: 22.222vw;
        perspective: 77.778vw;
        position: relative;
        overflow: hidden;
    }


    .postModelImageMobile {
        width: 77.778vw;
        height: auto;
        display: block;
        margin-left: auto;
        margin-right: auto;
        border-radius: 3.922vw;
        border: 1px var(--border) solid;
        box-shadow: var(--shadowHover);

        transform-origin: bottom center;
        transform: rotateX(90deg) translateY(11.111vw); /* Initial position */
        transition: transform 3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smooth transition */
    }



    .postModelTitleMobile {
        text-align: center;
    }

    .postModelTextMobile {
        font-family: var(--fontMain);
        color: var(--text);
        font-weight: 700;
        font-size: 6.4vw;
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top: 6.667vw;
    }



    .postsModelButtonMobile {
        font-family: var(--fontLogo);
        color: var(--bg);
        font-weight: 500;
        background-color: var(--textSecond);
        border-radius: 2.222vw;
        width: 80%;
        height: 10vw;
        padding: 0;
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top: 2.5vw;
        font-size: 4.3vw;
    }


    .postsModelButtonMobile:hover {
        font-family: var(--fontLogo);
        color: var(--bg);
        background-color: var(--accentHover);
    }

    .postsModelButtonMobile:active {
        font-family: var(--fontLogo) !important;
        color: var(--bg) !important;
        background-color: var(--accentHover) !important;
    }








    .arrowsContainerMobile {
        margin-top: 33.333vw;
        position: relative;
        z-index: 10;
    }



    #connectionsMobile {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        pointer-events: none;
    }


    .connection-lineMobile {
        opacity: 0;
        stroke: var(--textSecond);
        stroke-width: 5;
        fill: none;
        stroke-dasharray: 1000;
        stroke-dashoffset: 0;
        animation: drawLineReverse 1s ease forwards;
    }

    @keyframes drawLineReverse {
      from {
        stroke-dashoffset: 1000;
      }
      to {
        stroke-dashoffset: 0;
        opacity: 1;
      }
    }




    .candidateCardsMobile1 {
        display: flex;
        justify-content: space-between;
        padding-left: 2.5vw;
        padding-right: 2.5vw;
    }


    .candidateCardMobile {
        width: 45vw;
        height: 17.778vw;
        background-color: var(--bg);
        border-radius: 4.444vw;
        border: 1px var(--border) solid;
        box-shadow: var(--shadow);
        position: relative;
        z-index: 1;
        display: flex;
    }


    .candidateCardImageMobile {
        width: 12.222vw;
        height: 12.222vw;
        border-radius: 50%;
        margin-top: 2.667vw;
        margin-left: 1.111vw;
        margin-right: 2.222vw;
        border: 3px var(--border) solid;
    }


    .candidateCardDetailsMobile {
        display: grid;
        padding: 3.333vw 0;
        width: max-content;
    }


    .candidateCardNameMobile {
        font-weight: 600;
        font-family: 'Inter';
        color: var(--text);
        font-size: 3.556vw;
    }

    .candidateCardDesMobile {
        font-weight: 500;
        font-family: 'Inter';
        color: var(--textSecond);
        font-size: 2.667vw;
    }





    .employerCardMobile {
        width: 60vw;
        height: 46.667vw;
        background-color: var(--bg);
        border-radius: 4.444vw;
        border: 1px var(--border) solid;
        box-shadow: var(--shadowHover);
        position: relative;
        z-index: 1;
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top: 22.222vw;
    }

    .employerCardDetailsMobile {
        display: flex;
    }


    .employerCardImageMobile {
        width: 12.222vw;
        height: 12.222vw;
        border-radius: 50%;
        margin-top: 2.667vw;
        margin-left: 2.222vw;
        margin-right: 2.222vw;
        border: 3px var(--border) solid;
    }


    .employerCardTitleMobile {
        display: grid;
        padding-top: 4vw;
        width: max-content;
    }


    .employerCardNameMobile {
        font-weight: 600;
        font-family: 'Inter';
        color: var(--text);
        font-size: 3.556vw;
    }

    .employerCardDesMobile {
        font-weight: 500;
        font-family: 'Inter';
        color: var(--textSecond);
        font-size: 2.667vw;
    }


    .employerCardTextMobile {
        font-family: var(--fontMain);
        font-size: 3.022vw;
        color: var(--textSecond);
        text-align: justify;
        display: block;
        margin-left: auto;
        margin-right: auto;
        padding: 2.222vw;
    }




    .candidateCardsMobile2 {
        margin-top: 22.222vw;
        display: flex;
        justify-content: space-between;
        padding-left: 2.5vw;
        padding-right: 2.5vw;
    }

}