@font-face {
  font-family: 'Poppins Light';
  src: url(../fonts/Poppins-Light.ttf);
}
@font-face {
  font-family: 'Poppins Medium';
  src: url(../fonts/Poppins-Medium.ttf);
}
@font-face {
  font-family: 'Poppins Bold';
  src: url(../fonts/Poppins-Bold.ttf);
}
@font-face {
  font-family: 'Poppins SemiBold';
  src: url(../fonts/Poppins-SemiBold.ttf);
}
@font-face {
  font-family: 'Poppins Regular';
  src: url(../fonts/Poppins-Regular.ttf);
}
@font-face {
  font-family: 'Tajawal Regular';
  src: url(../fonts/Tajawal/Tajawal-Regular.ttf);
}
@font-face {
  font-family: 'Tajawal Medium';
  src: url(../fonts/Tajawal/Tajawal-Medium.ttf);
}
@font-face {
  font-family: 'Tajawal Bold';
  src: url(../fonts/Tajawal/Tajawal-Bold.ttf);
}
*{
    margin: 0;
    border: none;
    padding: 0px;
    box-sizing: border-box;
}
*,
*:before,
*:after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    position: relative;
    overflow-x: hidden;
    background-image: var(--bodyBackGround);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
button,a,.btn-hover{transition: 0.3s;}
input:focus-visible{outline: none ;}
button:hover,.btn-hover:hover{transform: scale(0.9);}
/* Sections */
.sty-address{
    font-family: 'Poppins SemiBold';
    font-size: 48px;
    font-weight: 600;
    line-height: normal;
    color:#231F20 ;
}
.border-green {
    background: var(--mainColor);
    width: 50px;
    height: 8px;
    border-radius: 180px;
}
.sty-text {
    font-size: 24px;
    font-weight: 400;
    line-height: normal;
    color: #231F20;
    margin-bottom: 0px;
   
}
.sty-text-header {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    max-height: 4.2rem;
}

.sty-text20{
    font-size: 20px;
    font-weight: 400;
    line-height: normal;
    color:#231F20;
    margin-bottom: 0px;
}
.images-footer img{
    cursor:pointer;
}
.sty-Subtext {
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    color: #231F20;
    margin-bottom: 0px;
    line-height: 1.6rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 2.4rem;
}
.show-all {
    font-weight: 400;
    font-size: 24px;
    line-height: 36px;
    color: var(--mainColor);
    text-decoration: none;
}
.show-all-mb {
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    color: var(--mainColor);
    text-decoration: none;
    display: none;
    text-align: center;
    margin-top: 24px;
}
.title-fx{gap: 18px;}
.sub-fx{margin-bottom: 32px;}
.search-form{
    display: flex;
    align-items: center;
    justify-content: start;
    width: 332px;
    height: 64px;
    border-radius: 40px;
    padding: 0 32px;
    gap: 10px;
    background: #F9FEFF;
}
.click{cursor: pointer;}
.search-form input{
    border: none;
    padding-left: 0px;
    padding-right: 0px;
    background-color: transparent;
}
.search-form  .form-control:focus{
    box-shadow: none;
    border-color: none;
}
.search-form input::placeholder{
    color: #B0B0B0;
    font-size: 20px;
    line-height: 40px;
}
/* Flex Cards */
.fx-general-cards{
     display: flex;
     align-items: start;
     justify-content: start;
   flex-wrap: wrap;
     gap: 48px;
}
.fx-general-cards .fx-general-card-st{
    flex: 1 1 calc(25% - 48px);
    box-sizing: border-box;
    max-width: calc(26% - 48px);
}
.fx-general-cards2{
     display: flex;
     align-items: start;
     justify-content: start;
     flex-wrap: wrap;
     gap: 32px;
}
.fx-general-cards2 .fx-general-card-st2{
    flex: 1 1 calc(50% - 32px);
    box-sizing: border-box;
    max-width: calc(51% - 32px);
}
/* ************** */
.categories-products-cards{
    text-decoration: none;
    width:384px;
    box-shadow: 0px 14px 44px 0px rgba(0, 0, 0, 0.05);
    transition: 0.3s;
}
.categories-products-cards:hover{
    transform: scale(0.95);
}
.categories-products-cards img{
    width: 100%;
    height: 263.33px;
    object-fit: fill;
}
.categories-products-cards .categories-products-text{
    padding: 20px 24px;
    display: flex;
    align-items: start;
    justify-content: start;
    gap: 8px;
    flex-direction: column;
}
.categories-products-cards .categories-products-text h3{
    margin-bottom: 0px;
      line-height: 29px;
    letter-spacing: 0.2px;
    text-transform: uppercase;
}
.categories-products-cards .categories-products-text p{
    margin-bottom: 0px;
    font-size: 15px;
    line-height: normal;
    letter-spacing: 0.2px;
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 48px;
    gap: 8px;
}
.pagination .page-number, .pagination .prev, .pagination .next {
    cursor: pointer;
    color: #BFBFBF;
    text-decoration: none;
    padding: 8px 10px;
    font-size: 21px;
}
.pagination .page-number.active, .pagination .page-number:hover, .pagination .prev:hover, .pagination .next:hover {
    color: #686868;
}

.pagination .prev, .pagination .next {
    background: transparent;
    
    color: #686868;
}

.pagination .prev.disabled, .pagination .next.disabled {
   color: #C4CDD5;
    cursor: not-allowed;
}

/* End Pagination */
@media (max-width: 1400px) {
.sty-text{font-size: 20px;}
}
@media (max-width: 1300px) {
    .fx-general-cards .fx-general-card-st {
        flex: 1 1 calc(24% - 16px);
        max-width: calc(25% - 16px);
    }
    .fx-general-cards2 .fx-general-card-st2 {
        flex: 1 1 calc(50% - 32px);
        max-width: calc(51% - 32px);
    }
    .fx-general-cards{gap: 36px;}
}
@media (max-width: 1100px) {
   .fx-general-cards .fx-general-card-st {
        flex: 1 1 calc(33% - 16px);
        max-width: calc(32% - 16px);
    }
     .fx-general-cards2 .fx-general-card-st2 {
            flex: 1 1 calc(100% - 16px);
            max-width: calc(100% - 16px);
    }
}
@media (max-width: 1000px) {
    .fx-general-cards{gap: 24px;}
    .fx-general-cards2{gap: 24px;}
    .fx-general-cards .fx-general-card-st {
            flex: 1 1 calc(50% - 16px);
            max-width: calc(50% - 16px);
    }
       .fx-general-cards2 .fx-general-card-st2 {
            flex: 1 1 calc(100% - 16px);
            max-width: calc(100% - 16px);
    }
}
@media (max-width:1800px) {

}
@media (max-width:1500px)  {

}
@media (max-width:1200px) {
 .fx-title-page{
        flex-direction: column;
    }
     .fx-title-page .search-form{
        width: 100%;
    }
    .search-form input::placeholder{font-size: 16px; }
    .search-form img{width: 16px;}
}
@media (max-width:1000px) {
   .pagination{
    margin: 32px 0px;
    gap: 0px;
   }
   .pagination .page-number, .pagination .prev, .pagination .next{font-size: 16px;}
}
/*Pagination*/
.pagination li a {
    cursor: pointer;
    color: #BFBFBF;
    text-decoration: none;
    padding: 8px 10px;
    font-size: 21px;
}

.PagedList-skipToPrevious a {
    text-decoration: none !important;
    padding: 8px 10px !important;
    font-size: 30px !important;
    background: transparent !important;
    color: #686868 !important;
}

.PagedList-skipToNext a {
    text-decoration: none !important;
    padding: 8px 10px !important;
    font-size: 30px !important;
    background: transparent !important;
    color: #686868 !important;
}

.pagination .active span {
    color: #686868 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    padding: 8px 10px !important;
    font-size: 21px !important;
}
.careersPage .sty-address {
    white-space: nowrap;
}