/* =========================
SFALCON PROJECT SECTION
========================= */

.sfalcon-project-row{
display:flex;
flex-wrap:wrap;
gap:20px;
justify-content:center;
}

.sfalcon-project-row .project-block-one{
flex:1 1 calc(33.333% - 20px);
max-width:calc(33.333% - 20px);
overflow:hidden;
}

.sfalcon-project-row .project-block-one .image-box{
width:100%;
height:320px;
overflow:hidden;
}

.sfalcon-project-row .project-block-one .image-box img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:transform 0.4s ease;
}

/* hover efekt i lehtë */

.sfalcon-project-row .project-block-one:hover img{
transform:scale(1.05);
}

/* =========================
TABLET
========================= */

@media (max-width: 992px){

.sfalcon-project-row .project-block-one{
flex:1 1 calc(50% - 20px);
max-width:calc(50% - 20px);
}

.sfalcon-project-row .project-block-one .image-box{
height:280px;
}

}


/* =========================
MOBILE
========================= */

@media (max-width: 600px){

.sfalcon-project-row{
gap:15px;
}

.sfalcon-project-row .project-block-one{
flex:1 1 100%;
max-width:100%;
}

.sfalcon-project-row .project-block-one .image-box{
height:250px;
}

}


/* =========================
   S FALCON HEADER STYLES
   ========================= */

.sfcHeaderShell{
    width:100%;
    font-family:Arial, Helvetica, sans-serif;
}

/* ---------- TOP BAR ---------- */

.sfcHeaderTopBar{
    width:100%;
    background:#e31e24;
    color:#fff;
    font-size:14px;
}

.sfcHeaderTopBar__inner{
    max-width:1320px;
    margin:0 auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:6px 20px;
}

.sfcHeaderTopBar__left{
    display:flex;
    align-items:center;
    gap:35px;
}

.sfcHeaderTopBar__item{
    display:flex;
    align-items:center;
    gap:8px;
}

.sfcHeaderTopBar__icon{
    font-size:13px;
}

.sfcHeaderTopBar__text{
    white-space:nowrap;
}

.sfcHeaderTopBar__link{
    color:#fff;
    text-decoration:none;
}

.sfcHeaderTopBar__right{
    display:flex;
    align-items:center;
    gap:18px;
}

.sfcHeaderTopBar__social{
    color:#fff;
    font-size:14px;
    text-decoration:none;
    transition:opacity .2s;
}

.sfcHeaderTopBar__social:hover{
    opacity:.7;
}


/* ---------- MAIN NAV ---------- */

.sfcHeaderMainNav{
    background:#f3f3f3;
    border-bottom:3px solid #e31e24;
}

.sfcHeaderMainNav__inner{
  max-width:1250px;
    margin:0 auto;
    display:flex;
    align-items:center;
    padding:8px 0;
}

/* ---------- LOGO BLOCK ---------- */

.sfcHeaderBrandBlock{
    margin-left:0;
    padding-left:0;
}


.sfcHeaderBrandBlock__link{
    display:flex;
    align-items:center;
    text-decoration:none;
}

.sfcHeaderBrandBlock__logo{
    height:auto;
    width:150px;
    display:block;
   border-radius: 0 70% 0 0;
}


/* ---------- NAVIGATION ---------- */

.sfcHeaderNavigation{
    margin-left:40px;   /* afron menunë te logo */
}

.sfcHeaderNavigation__list{
    display:flex;
    gap:30px;
    list-style:none;
    margin:0;
    padding:0;
}

.sfcHeaderNavigation__item{
    position:relative;
}

.sfcHeaderNavigation__link{
    text-decoration:none;
    font-weight:600;
    font-size:14px;
    color:#1a1a1a;
}


.sfcHeaderNavigation__link:hover{
    color:#e31e24;
}

.sfcHeaderNavigation__item--active .sfcHeaderNavigation__link{
    color:#e31e24;
}


/* ---------- CTA BUTTON ---------- */

.sfcHeaderActionBox{
    margin-left:auto;
}

.sfcHeaderActionBox__button{
    background:#1f3e53;
    color:#fff;
    padding:10px 26px;
    border-radius:30px;
    font-weight:600;
    text-decoration:none;
}

.sfcHeaderActionBox__button:hover{
    background:#0e2736;
}


/* ---------- RESPONSIVE ---------- */

@media (max-width:1024px){

.sfcHeaderTopBar__inner{
    flex-direction:column;
    gap:8px;
}

.sfcHeaderMainNav__inner{
    flex-direction:column;
    gap:15px;
}

.sfcHeaderNavigation__list{
    gap:20px;
}

}

@media (max-width:768px){

.sfcHeaderTopBar__left{
    flex-direction:column;
    gap:6px;
}

.sfcHeaderNavigation__list{
    flex-wrap:wrap;
    justify-content:center;
}

}

 * {
        box-sizing: border-box;
    }

    .div_main {
        display: flex;
        border-bottom: 5px solid #db2122;
        min-height: 180px;
        width: 100%;
    }

    .div_01 {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 20px;
        background: white;
    }

    .div_01 img {
        height: 193px;
        width: 350px;
        display: inline-block;
        position: absolute;
        margin-left: 280px;
        
    }

    .div_02 {
        width: 100%;
        display: flex;
        flex-direction: column;
        margin-left: 170px;
    }

    .div_02_01 {
        min-height: 90px;
        background-color:  #db2122;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 30px;
    }

    .div_02_02 {
        flex: 1;
        background-color: white;
        display: flex;
        justify-content: center;
    }

    .div_02_01_01 {
        display: flex;
        align-items: center;
        gap: 10px;
        color: white;
        flex-wrap: wrap;
    }

    .div_02_01_01 div {
        display: flex;
        align-items: center;
        gap: 10px;
        color: white;
        font-size: 16px;
        line-height: 1.4;
    }

    .div_02_01_01 a {
        color: white;
        text-decoration: none;
    }

    .div_02_01_01 i {
        font-size: 18px;
        margin-left: 100px;
    }

    .div_02_01_01 a:hover {
        color: blue;
    }

    .icona_sociale {
        display: flex;
        align-items: center;
        gap: 25px;
    }

    .icona_sociale a {
        color: white;
        font-size: 22px;
        text-decoration: none;
        transition: 0.3s;
    }
    .icona_sociale a:hover {
        color: blue;
        transform: 0.3s;
    }
    .button {
        position: absolute;
        margin-top: 12px;
        margin-left: 580px;
        width: 200px;
    }
    
    #navbarSupportedContent {
        margin-left: -350px;
    }

    /* =========================
   RESPONSIVE - CUSTOM HEADER
========================= */

@media (max-width: 1400px) {
    .div_01 img {
        width: 300px;
        height: auto;
        margin-left: 220px;
    }

    .div_02 {
        margin-left: 150px;
    }

    .div_02_01_01 div {
        font-size: 15px;
    }

    .button {
        margin-left: 420px;
    }

    #navbarSupportedContent {
        margin-left: -220px;
    }
}

@media (max-width: 1200px) {
    .div_main {
        min-height: auto;
    }

    .div_01 img {
        width: 250px;
        height: auto;
        margin-left: 180px;
    }

    .div_02 {
        margin-left: 120px;
    }

    .div_02_01 {
        padding: 15px 20px;
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
    }

    .div_02_01_01 {
        gap: 20px;
    }

    .div_02_01_01 div {
        font-size: 14px;
        flex-wrap: wrap;
    }

    .div_02_01_01 i {
        margin-left: 0;
    }

    .icona_sociale {
        gap: 18px;
    }

    .button {
        position: static;
        margin-top: 20px;
        margin-left: 0;
        width: auto;
    }

    #navbarSupportedContent {
        margin-left: -120px;
    }
}

@media (max-width: 992px) {
    .div_main {
        flex-direction: column;
        border-bottom: 4px solid #db2122;
    }

    .div_01 {
        justify-content: center;
        padding: 20px 15px;
    }

    .div_01 img {
        position: static;
        margin-left: 0;
        width: 220px;
        height: auto;
    }

    .div_02 {
        margin-left: 0;
    }

    .div_02_01 {
        padding: 15px;
    }

    .div_02_01_01 {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .div_02_01_01 div {
        width: 100%;
        font-size: 14px;
    }

    .div_02_02 {
        justify-content: flex-start;
        padding: 15px;
        flex-direction: column;
    }

    .button {
        width: 100%;
        max-width: 220px;
    }

    #navbarSupportedContent {
        margin-left: 0;
    }
}

@media (max-width: 768px) {
    .div_01 {
        padding: 15px 10px;
    }

    .div_01 img {
        width: 190px;
    }

    .div_02_01 {
        padding: 12px 10px;
    }

    .div_02_01_01 div {
        font-size: 13px;
        line-height: 1.5;
    }

    .div_02_01_01 i {
        font-size: 16px;
    }

    .icona_sociale a {
        font-size: 18px;
    }

    .button {
        max-width: 200px;
    }
}

@media (max-width: 576px) {
    .div_main {
        border-bottom: 3px solid #db2122;
    }

    .div_01 img {
        width: 160px;
    }

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

    .div_02_01_01 i {
        font-size: 14px;
    }

    .icona_sociale {
        gap: 12px;
    }

    .icona_sociale a {
        font-size: 16px;
    }

    .button {
        max-width: 180px;
    }
}