@font-face {
    font-family: 'SF Compact Text';
    src: url('../fonts/SFCompactText-Semibold.eot');
    src: url('../fonts/SFCompactText-Semibold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SFCompactText-Semibold.woff2') format('woff2'),
        url('../fonts/SFCompactText-Semibold.woff') format('woff'),
        url('../fonts/SFCompactText-Semibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Compact Text';
    src: url('../fonts/SFCompactText-Regular.eot');
    src: url('../fonts/SFCompactText-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SFCompactText-Regular.woff2') format('woff2'),
        url('../fonts/SFCompactText-Regular.woff') format('woff'),
        url('../fonts/SFCompactText-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Compact Text';
    src: url('../fonts/SFCompactText-Medium.eot');
    src: url('../fonts/SFCompactText-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SFCompactText-Medium.woff2') format('woff2'),
        url('../fonts/SFCompactText-Medium.woff') format('woff'),
        url('../fonts/SFCompactText-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Compact Display';
    src: url('../fonts/SFCompactDisplay-Bold.eot');
    src: url('../fonts/SFCompactDisplay-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SFCompactDisplay-Bold.woff2') format('woff2'),
        url('../fonts/SFCompactDisplay-Bold.woff') format('woff'),
        url('../fonts/SFCompactDisplay-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}


h1, h2, h3, h4, h5, h6{
	 font-family: 'SF Compact Display' !important;
	font-weight:600 !important;
}
body{
 font-family: 'SF Compact Text'; !important;
}
a{
font-family: 'SF Compact Text'; !important;
}
p{
font-family: 'SF Compact Text'; !important;
}
ul li{
font-family: 'SF Compact Text'; !important;
}
span{
font-family: 'SF Compact Text'; !important;
}

.projects {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-items: center;
}
.project-card h3 {
    font-size: 20px;
    margin-top: 20px;
}
.project-card {
    cursor: pointer;
    width: calc(100% / 4 - 180px / 4);
    margin-left: 60px;
    margin-bottom:60px;
}
.project-card:nth-child(4n + 1) {
    margin-left: 0px;
}

.project-card img {
  width: 100%;
  max-width:100%;
  height: 180px !important;
  object-fit: cover;
}

/* POPUP */
.open-popup-slide .popup {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.open-popup-slide .popup img {
  width: 70%;
  max-height: 80vh;
  object-fit: contain;
}

.open-popup-slide .close {
  position: absolute;
  top: 20px;
  right: 40px;
  font-size: 35px;
  color: white;
  cursor: pointer;
}

.open-popup-slide .nav {
  position: absolute;
  background: none;
  border: none;
  color: white;
  font-size: 40px;
  cursor: pointer;
}

.open-popup-slide .left { left: 40px; }
.open-popup-slide .right { right: 40px; }


/* --------------------tab css----------------------- */

.tabs-slider-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  align-items: center;
}

.tabs-slider-wrapper .project-card {
  cursor: pointer;
  width: calc(100% / 4 - 180px / 4);
  margin-left: 60px;
}

.tabs-slider-wrapper .project-card:nth-child(4n + 1){
  margin-left: 0px;
}

.tabs-slider-wrapper .project-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.tabs-slider-wrapper .popup {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  justify-content: center;
  align-items: center;
  z-index: 99999;
}

.tabs-slider-wrapper .popupImage {
  width: 70%;
  max-height: 80vh;
  object-fit: contain;
}

.tabs-slider-wrapper .close {
  position: absolute;
  top: 20px;
  right: 40px;
  font-size: 35px;
  color: #fff;
  cursor: pointer;
}

.tabs-slider-wrapper .nav {
  position: absolute;
  background: none;
  border: none;
  color: #fff;
  font-size: 40px;
  cursor: pointer;
}

.tabs-slider-wrapper .left { left: 40px; }
.tabs-slider-wrapper .right { right: 40px; }


---------responsiv---------

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

.tabs-slider-wrapper .project-card {
    cursor: pointer;
    width: calc(100% / 4 - 90px / 4)!important;
    margin-left: 30px !important;
}

.project-card {
    cursor: pointer;
    width: calc(100% / 4 - 90px / 4);
    margin-left: 30px;
    margin-bottom: 30px;
}

}