:root{
    /* Brand palette */
    --sf-yellow: rgba(255, 212, 0, 1);
    --sf-yellow-dark: #DB9F00;
    --sf-black: #121212;
    --sf-black-soft: #1c1c1c;
    --sf-black-card: rgba(30, 30, 30, 1);

    --sf-gray-50: #f7f7f7;
    --sf-gray-100: #f1f1f1;
    --sf-gray-200 : rgba(165, 165, 165, 1);
    --sf-gray-300: #d9d9d9;
    --sf-gray-500: #F5F5F5;
    --sf-gray-700: #3d3d3d;

    --sf-radius-sm: 10px;
    --sf-radius-md: 0px;
    --sf-radius-lg: 24px;

    /* Font: prepared for the "Peyda" family — add @font-face separately */
    --sf-font-family: "Peyda";

    /* Button tokens (used by .btn-sfe-*) */

    --sf-btn-lv1-bg: var(--sf-yellow);
    --sf-btn-lv1-color: var(--sf-black);
    --sf-btn-lv1-bg-hover: var(--sf-black);
    --sf-btn-lv1-color-hover: var(--sf-yellow);

    --sf-btn-lv2-bg: var(--sf-black);
    --sf-btn-lv2-color: #ffffff;
    --sf-btn-lv2-bg-hover: var(--sf-yellow);
    --sf-btn-lv2-color-hover: var(--sf-black);

    --sfe-border: #dcdcdc;
}

/* -------------------------------------------------------------
   2. Base / reset
------------------------------------------------------------- */
html{
    scroll-behavior: smooth;
}

body{
    font-family: var(--sf-font-family);
    color: var(--sf-gray-700);
    background-color: #ffffff;
    overflow-x: hidden;
    font-size: 10px;
}

img{
    max-width: 100%;
    display: block;
}

a{
    text-decoration: none;
}

/* -------------------------------------------------------------
   3. Layout container
   Redesign note: the legacy ".container-home" was capped at
   1300px. The new full-page layout requires 1600px — this class
   is the single source of truth for the site's max content width
   and can be dropped straight into the existing project.
------------------------------------------------------------- */


@media (max-width: 575.98px){
    .container-home{
        padding-inline: 16px;
    }
}

.sf-section{
    padding-top: 12px;
    padding-bottom: 12px;
}

@media (max-width: 767.98px){
    .sf-section{
        padding-block: 36px;
    }

}

/* -------------------------------------------------------------
   4. Buttons (fixed classes — do not add new button variants)
------------------------------------------------------------- */




.btn-sfe-black{
    background: var(--sf-btn-lv2-bg);
    border: none;
    color: var(--sf-btn-lv2-color);
    font-weight: 700;
    border-radius: var(--sf-btn-radius);
    padding: 10px 18px;
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    transition: background .3s ease, color .3s ease;
}

.btn-sfe-black:hover{
    background: var(--sf-btn-lv2-bg-hover);
    color: var(--sf-btn-lv2-color-hover);
}

.btn-sfe-outline{
    border: 1px solid var(--sfe-border);
    border-radius: 10px;
    padding: 10px 18px;
    background: #fff;
    font-weight: 600;
    font-size: 13.5px;
    display: inline-flex;
    align-items: center;
    color: var(--sf-black);
    transition: border-color .3s ease;
}

.btn-sfe-outline:hover{
    border-color: var(--sf-black);
    color: var(--sf-black);
}



/* -------------------------------------------------------------
   6. Intro section
------------------------------------------------------------- */
.sf-intro-title{
    font-size: 26px;
    font-weight: 700;
    color: var(--sf-black);
    text-align: right;
    margin-bottom: 20px;
}

.sf-intro-text p{
    font-size: 14.5px;
    line-height: 2.05;
    color: var(--sf-gray-700);
    text-align: justify;
    margin-bottom: 14px;
}

@media (max-width: 767.98px){
    .sf-intro-title{
        font-size: 20px;
    }
    .sf-intro-text p{
        font-size: 14px;
        line-height: 1.9;
    }
}

/* -------------------------------------------------------------
   7. Stats section — flex layout
   Outer split: 35% / 65%  (on a 1920px canvas → 672px / 1248px)
   Right column top row: 60% / 40%
   Right column bottom row: reversed → 40% / 60%
------------------------------------------------------------- */
.sf-stats-flex{
    display: flex;
    align-items: stretch;
    flex-direction: row-reverse;
}

.sf-stats-col--left{
    flex: 0 0 35%;
    max-width: 35%;
    display: flex;
    flex-direction: column;
}

.sf-stats-col--right{
    flex: 0 0 65%;
    max-width: 65%;
    display: flex;
    flex-direction: column;
}

.sf-stats-row{
    display: flex;
    flex: 1;
    flex-direction: row-reverse;
}

/* top row ratio: 60 / 40 */
.sf-stats-row--top .sf-stat-map{
    flex: 0 0 60%;
    max-width: 60%;
    height: 280px;
}

.sf-stats-row--top .sf-stat-badge{
    flex: 0 0 40%;
    max-width: 40%;
}
.sf-stats-row--top .sf-stat-badge,
.sf-stats-row--bottom .sf-stat-yellow {
    padding-right: max(26px, calc((100vw - 1600px) / 2));
}
@media (max-width: 1600px) {
    .sf-stats-row--top .sf-stat-badge,
    .sf-stats-row--bottom .sf-stat-yellow {
        padding-right: 26px !important;
    }
}

/* bottom row ratio reversed: 40 / 60 */
.sf-stats-row--bottom .sf-stat-yellow{
    flex: 0 0 40%;
    max-width: 40%;
}
.sf-stats-row--top .sf-stat-map,
.sf-stats-row--bottom .sf-stat-coil{
    flex: 0 0 60%;
    max-width: 60%;
    min-height: 190px;
    height: 280px;
    max-height: 280px;
}

.sf-item-num{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    background-color: var(--sf-gray-50);
}

/* base card look (unchanged) */
.sf-stat-card{
    border-radius: var(--sf-radius-md);
    padding: 28px 26px;
    position: relative;
    overflow: hidden;
}

.sf-stat-left-item{
    background: var(--sf-gray-50);
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sf-stat-left-item--inline{
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.sf-stat-card--dark{
    background: var(--sf-black-card);
    color: #ffffff;
}

.sf-stat-card--yellow{
    background: var(--sf-yellow);
    color: var(--sf-black);
}

.sf-stat-label{
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--sf-gray-700);
}

.sf-stat-label-en{
    display: block;
    font-size: 14px;
    color: #7e7e7e;
    direction: ltr;
    text-align: right;
}

.sec-2-numberbx{
    width: 50%;
}

.en-titlee hr{
    width: 40%;
}
.en-titlee{
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: flex-start;
}

.sf-stat-label-mixed{
    display: block;
    font-size: 16px;
    color: #1E1E1E;
    margin-top: 4px;
    padding-right: 12%;
}

.sf-stat-number{
    font-size: 6rem;
    font-weight: 100;
    color: var(--sf-black);
    direction: ltr;
    text-align: right;
    line-height: 1.1;
}

.sec-2-numberbx hr{
    color:#FFD400;
}

.sf-stat-number--sm{ font-size: 6rem;padding-right: 12% }
.sf-stat-number--md{ font-size: 30px; }
.sf-stat-number--lg{ font-size: 6.6rem; color: #1E1E1E;font-weight: 100;border-bottom: 1px solid #FFF;display: inline-flex;}
.sf-stat-number--dark{ color: var(--sf-black); }

.sf-stat-unit{
    font-size: 16px;
    font-weight: 500;
}

.sf-stat-unit-lg{
    font-size: 2rem;
    margin-inline-start: 6px;
    font-weight: 100;
}

.sf-stat-eyebrow{
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--sf-gray-300);
    margin-bottom: 10px;
}

.sf-stat-eyebrow--dark{
    color: rgba(165, 165, 165, 1);
    font-size: 20px;
    font-weight: 400;
}

.sf-stat-caption{
    font-size: 12.5px;
    color: #cfcfcf;
    margin-top: 14px;
    line-height: 1.8;
}

.sf-stat-caption--dark{
    color: rgba(0,0,0,1);
    font-size: 18px;
}

.sf-stat-caption-en{
    display: block;
    color: rgba(120, 120, 120, 1);
    font-size: 14px;
    direction: ltr;
    text-align: right;
    margin-top: 2px;
}

.sf-stat-map-graphic{
    position: absolute;
    inset-inline-end: 20px;
    bottom: 12px;
    width: 46%;
    right: 0px;
    top: calc(50% - 150px);
    opacity: .9;
}

.sf-stat-map-graphic img{
    width: 265px;
}

.cstm-map{
    text-align: left !important;
    align-self: center;
    padding: 16px 0px 10px;
    position: absolute;
    left: calc(70% / 3);
    border-bottom: 1px solid #FFD400;
    border-top: 1px solid #FFD400;
    font-weight: 100;
    font-size: 6.6rem;
    z-index: 1;
}

.cstm-ahan{
    flex-direction: row-reverse;
    align-items: center;
}
.cstm-ahan img{
    position: absolute;
    right: 0;
}
.sf-iran-map{
    width: 100%;
    height: auto;
}

.sf-stat-coil-graphic{
    position: absolute;
    inset-inline-end: 0;
    bottom: 0;
    width: 55%;
    height: 100%;
    background: linear-gradient(135deg, #4a4a4a, #2a2a2a);
    border-start-start-radius: var(--sf-radius-lg);
    opacity: .55;
}

/* -------------------------------------------------------------
   Responsive
------------------------------------------------------------- */
@media (max-width: 991.98px){
    .sf-stats-flex{
        flex-direction: column-reverse;
    }
    .sf-stats-col--left,
    .sf-stats-col--right{
        flex: 1 1 100%;
        max-width: 100%;
    }
}

@media (max-width: 575.98px){
    .sf-stats-row--top {
        flex-direction: column;
    }
    .sf-stats-row--bottom {
        flex-direction: column-reverse;
    }
    .sf-stats-row--top .sf-stat-map,
    .sf-stats-row--top .sf-stat-badge,
    .sf-stats-row--bottom .sf-stat-yellow,
    .sf-stats-row--bottom .sf-stat-coil{
        flex: 1 1 100%;
        max-width: 100%;
    }
    .sf-stat-number--lg{
        font-size: 36px;
    }
}
/* =========================================================
   HOVER EFFECTS
========================================================= */

/* =========================================================
   CSTM AHAN - SMOOTH REVERSE
========================================================= */

.cstm-ahan {
    position: relative;
    overflow: hidden;
    transition: background-color 0.6s ease;
}


/* -------------------------
   Number / Text
------------------------- */

.cstm-ahan .cstm-map {
    position: absolute;
    left: calc(70% / 3);

    transition:
        transform 0.8s cubic-bezier(.25, .8, .25, 1),
        color 0.5s ease,
        border-color 0.5s ease;

    will-change: transform;
}


/* -------------------------
   Map
------------------------- */

.cstm-ahan .sf-stat-map-graphic {
    position: absolute;
    right: 0;

    transition:
        transform 0.8s cubic-bezier(.25, .8, .25, 1);

    will-change: transform;
}


/* =========================================================
   HOVER
========================================================= */

.cstm-ahan:hover {
    background-color: #FFD400;
}


/* Text -> RIGHT */
.cstm-ahan:hover .cstm-map {
    transform: translateX(180px);
    color: #1E1E1E;
    border-color: #1E1E1E;
}


/* Map -> LEFT */
.rs-1920-sclae125 .cstm-ahan:hover .sf-stat-map-graphic {
    transform: translateX(-420px);
}
.rs-1920-sclae150 .cstm-ahan:hover .sf-stat-map-graphic {
    transform: translateX(-320px);
}
.cstm-ahan:hover .sf-stat-map-graphic {
    transform: translateX(-580px);
}

.sf-stat-coil img {
    transition: transform 0.8s cubic-bezier(.25, .8, .25, 1);
    will-change: transform;
}

.rs-1920-sclae125 .sf-stat-coil:hover img {
    transform: translateX(-420px);
}
.rs-1920-sclae150 .sf-stat-coil:hover img {
    transform: translateX(-320px);
}
.sf-stat-coil:hover img {
    transform: translateX(-580px);
}

/* ---------------------------------------------------------
   Yellow Cards Hover
   Applies to:
   .sf-stat-badge
   .sf-stat-yellow
--------------------------------------------------------- */

.sf-stat-card.sf-stat-card--yellow.sf-stat-badge,
.sf-stat-card.sf-stat-card--yellow.sf-stat-yellow {
    transition: background-color 0.5s ease;
}

/* Number */
.sf-stat-card.sf-stat-card--yellow.sf-stat-badge .sf-stat-number--lg,
.sf-stat-card.sf-stat-card--yellow.sf-stat-yellow .sf-stat-number--lg {
    transition:
        color 0.4s ease,
        border-color 0.4s ease;
}

/* Caption */
.sf-stat-card.sf-stat-card--yellow.sf-stat-badge .sf-stat-caption--dark,
.sf-stat-card.sf-stat-card--yellow.sf-stat-yellow .sf-stat-caption--dark {
    transition: color 0.4s ease;
}


/* Hover Background */
.sf-stat-card.sf-stat-card--yellow.sf-stat-badge:hover,
.sf-stat-card.sf-stat-card--yellow.sf-stat-yellow:hover {
    background-color: #1E1E1E;
}


/* Hover Number */
.sf-stat-card.sf-stat-card--yellow.sf-stat-badge:hover .sf-stat-number--lg,
.sf-stat-card.sf-stat-card--yellow.sf-stat-yellow:hover .sf-stat-number--lg {
    color: #FFD400;
    border-color: #FFD400;
}


/* Hover Caption */
.sf-stat-card.sf-stat-card--yellow.sf-stat-badge:hover .sf-stat-caption--dark,
.sf-stat-card.sf-stat-card--yellow.sf-stat-yellow:hover .sf-stat-caption--dark {
    color: #FFD400;
}


/* ---------------------------------------------------------
   3. Number Cards
--------------------------------------------------------- */
.sf-item-num:hover{
    background-color: #1E1E1E;
}
.sf-stat-card.sf-ite.sf-item-num {
    transition: background-color 0.4s ease;
    height: 36%;
}

/* عدد */
.sf-stat-card.sf-ite.sf-item-num
.sf-stat-number.text-center {
    transition: color 0.4s ease;
}

/* بخش عنوان */
.sf-stat-card.sf-ite.sf-item-num
.sec-2-numberbx.en-titlee {
    transition: transform 0.45s ease;
}

/* عنوان انگلیسی */
.sf-stat-card.sf-ite.sf-item-num
.sf-stat-label-en.text-center {
    transition: transform 0.4s ease;
}

/* عنوان فارسی */
.sf-stat-card.sf-ite.sf-item-num
.sf-stat-label {
    transition: color 0.4s ease;
}


/* Hover */

.sf-stat-card.sf-ite.sf-item-num:hover
.sf-stat-number.text-center {
    color: #FFFFFF;
}

.sf-stat-card.sf-ite.sf-item-num:hover
.sec-2-numberbx.en-titlee {
    transform: translateX(5px);
}

.sf-stat-card.sf-ite.sf-item-num:hover
.sf-stat-label-en.text-center {
    transform: scale(1.04);
}

.sf-stat-card.sf-ite.sf-item-num:hover
.sf-stat-label {
    color: #FFFFFF;
}
/* Plant Area Card Hover */
.sf-stat-card.sf-stat-left-item {
    transition: background-color 0.45s ease;
}

.sf-stat-card.sf-stat-left-item .sf-stat-label-mixed,
.sf-stat-card.sf-stat-left-item .sf-stat-number--sm {
    transition:
        transform 0.4s ease,
        color 0.4s ease;
}

.sf-stat-card.sf-stat-left-item:hover {
    background-color: #1e1e1e;
}

.sf-stat-card.sf-stat-left-item:hover .sf-stat-label-mixed {
    transform: scale(1.04);
    color: #ffffff;
}

.sf-stat-card.sf-stat-left-item:hover .sf-stat-number--sm {
    color: #ffffff;
}
/* -------------------------------------------------------------
   8. Mission section
------------------------------------------------------------- */
.mission-section{
    position:relative;

    background: #FFD200;
    margin: 200px auto;
    /* overflow:hidden; */
    /* height:630px; */
}

.mission-div {
    width:50%;
}

.mission-bg{
    position:absolute;
    left:0;
    right:0;
    top:198px;
    height:240px;
    background:#FFD200;
    z-index:1;

    display: none;
}

.mission-section .container{
    position:relative;
    /* height:562px; */
    background: #FFD200;
    z-index:2;
}
.mission-image{
    position:absolute;
    left:0;
    top:calc(50% - 220px);
    width:48%;
    z-index:5;
}

.mission-image img{
    width:100%;
    display:block;
}
.mission-title-en{
    position:absolute;
    top:-110px;
    right: 0;
    /* left:60%; */
    /* transform:translateX(-10%); */
    font-size:110px;
    font-weight:100;
    line-height:1;
    color:#FFD200;
    white-space:nowrap;
    z-index:4;
    opacity: 0.2;
}
.mission-content{

    /* position:absolute; */
    /* right:0;
    top:237px;
    width:50%;
    text-align:right;
    z-index:6; */

    padding: 50px 8px;

}

.mission-content h3{

    font-size:34px;
    margin-bottom:30px;
    font-weight:700;
    color:#111;
}

.mission-content p {
	color: #222;
	line-height: 1.5;
	font-size: 16px;
}

.sf-ceo h2 {
    color: #111;
   font-size: 22px;
   font-weight: bold;
   line-height: 2;
}
.sf-ceo h3 {
    color: #111;
    font-size: 16px;
    font-weight: bold;
    line-height: 2;
}
.sf-ceo p {
  color: #535353;
  line-height: 1.5;
  font-size: 16px;
  margin: 10px 0;
}
.sf-ceo img {
	display: inline-block;
}

/* -------------------------------------------------------------
   9. Features section
------------------------------------------------------------- */
.sf-feature-item{
    height: 100%;
    padding: 22px 16px;
    text-align: center;
    border-radius: var(--sf-radius-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    transition: all .3s ease-in-out;
}
.sf-feature-item:hover{
    background: #FFD400;
    box-shadow: 0px 0px 40px rgba(255, 221, 0, 0.4);
    transition: all .3s ease-in-out;
}
.sf-feature-item:hover hr{
    transition: all .3s ease-in-out;
    color: #FFF !important;
}
.sf-feature-item:hover .sf-feature-title{
    color: #282828;
}
.sf-feature-icon img {
    transition: transform 0.4s ease;
}

.sf-feature-item:hover .sf-feature-icon img {
    transform: scale(1.15);
}


.sf-feature-icon{
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--sf-black);
}

.sf-feature-title{
    font-size: 18px;
    font-weight: 600;
    color: #535353;
    margin: 0;
    line-height: 1.7;
}

.sf-feature-highlight{
    height: 100%;
    color: #fff;
    border-radius: var(--sf-radius-md);
    padding: 26px 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right: 1px solid #ffdd00;
}

.sf-feature-highlight h3{
    color: #FFF;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 10px;
}
.why-safa{
    background-color: var(--sf-black);
    padding:14px 24px;
    height: 100%;
}

.sf-feature-highlight p{
    font-size: 18px;
    line-height: 1.9;
    color: #cfcfcf;
    margin: 0;
}

/* -------------------------------------------------------------
   10. CEO quote section
------------------------------------------------------------- */
.sf-ceo{
    background: var(--sf-yellow);
    margin: 200px auto 230px;
}

.sf-ceo-eyebrow{
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: rgba(0,0,0,.6);
    margin-bottom: 10px;
}

.sf-ceo-name{
    font-size: 24px;
    font-weight: 700;
    color: var(--sf-black);
    margin-bottom: 4px;
}

.sf-ceo-role{
    font-size: 13.5px;
    color: rgba(0,0,0,.65);
    margin-bottom: 20px;
}

.sf-ceo-text{
    font-size: 14px;
    line-height: 2;
    color: rgba(0,0,0,.75);
    text-align: justify;
    margin-bottom: 14px;
}

.sf-ceo-signature{
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    font-family: cursive;
    align-items: flex-end;
}

.sf-ceo-signature span{
    font-size: 18px;
    font-weight: 700;
    color: var(--sf-black);
}

.sf-ceo-signature small{
    font-size: 12px;
    color: rgba(0,0,0,.6);
}

.sf-ceo-photo-frame{
    position: relative;
    border-radius: var(--sf-radius-lg);
    min-height: 380px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px;
}

.sf-ceo-photo-placeholder{
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 90px;
    color: rgba(255,255,255,.15);
    top: calc(50% - 300px);
}

.sf-ceo-photo-caption{
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sf-ceo-photo-name{
    color: #fff;
    font-size: 22px;
    font-weight: 700;
}

.sf-ceo-photo-role{
    color: var(--sf-yellow);
    font-size: 13px;
    font-weight: 600;
}

.sf-ceo-photo-company{
    color: #9c9c9c;
    font-size: 11.5px;
}

.sf-ceo-photo-badge{
    position: absolute;
    top: 20px;
    inset-inline-start: 20px;
    z-index: 1;
    background: var(--sf-yellow);
    color: var(--sf-black);
    border-radius: var(--sf-radius-sm);
    padding: 8px 12px;
    text-align: center;
    line-height: 1.2;
}

.sf-ceo-photo-badge-num{
    display: block;
    font-size: 16px;
    font-weight: 700;
}

.sf-ceo-photo-badge-txt{
    display: block;
    font-size: 10px;
    font-weight: 600;
}

@media (max-width: 767.98px){

    .sf-ceo-photo-frame{
        min-height: 300px;
    }
    .cstm-map {
        left: 15px;
    }

    .sf-feature-highlight {
        padding: 0px 15px 0 0;
    }
    .sf-feature-highlight p {
        font-size: 12px;
        line-height: 1.6;
        text-align: right;
    }

    .mission-section {
        margin: 100px auto 50px;
    }
    .sf-gallery-item {
        min-height: unset;
    }
    .sf-ceo {
        margin: 20px 0px;
    }
    .sf-stat-card {
        padding: 20px 26px;
    }



}

/* -------------------------------------------------------------
   11. Gallery section
------------------------------------------------------------- */
.sf-gallery-item{
    min-height: 600px;
    border-radius: var(--sf-radius-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    height: 600px;
}
.sf-gallery-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.sf-gallery-item i{
    font-size: 40px;
    opacity: .8;
}

/*.sf-gallery-item--brochure{*/
/*    background: linear-gradient(135deg, #2c2c2c, #111);*/
/*}*/

/*.sf-gallery-item--team{*/
/*    background: linear-gradient(135deg, #3a3a3a, #161616);*/
/*}*/

/* -------------------------------------------------------------
   12. CTA section
------------------------------------------------------------- */
.sf-cta{
    position: relative;
    background: var(--sf-black);
    color: #fff;
    overflow: hidden;
}

.sf-cta-shape{
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: 45%;
    background: var(--sf-yellow);
    clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%);
    opacity: .95;
    z-index: 0;
}

.sf-cta .container-home{
    position: relative;
    z-index: 1;
}

.sf-cta-title{
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 16px;
}

.sf-cta-text{
    font-size: 14px;
    line-height: 2;
    color: #c9c9c9;
    max-width: 640px;
    margin-bottom: 26px;
}

.sf-cta-buttons{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.sf-cta-callus{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--sf-black);
    text-align: center;
}

.sf-cta-callus i{
    font-size: 46px;
}

.sf-cta-callus-text{
    font-size: 20px;
    font-weight: 800;
    line-height: 1.3;
    direction: ltr;
}

@media (max-width: 991.98px){
    .sf-cta-shape{
        display: none;
    }
    .sf-cta-callus{
        margin-top: 24px;
        color: var(--sf-yellow);
    }

    .mission-div {
	width: 100%;
}

.sf-ceo {
    margin: 150px 0px 50px;
  }
.sf-ceo-photo-placeholder {
	position: relative;
	max-width: 400px;
	margin: -120px auto 0;
	width: 100%;
}

    /* .mission-content {
        width: 100%;
    }
    .mission-image {
        top: calc(42% - 150px);
    } */
}

/* @media (max-width: 400px){
    .mission-image {
        left: 5px;
        top: calc(54% - 150px);
        width: 56%;
    }
    .mission-bg {
        height: calc(100% - 298px);
    }
} */





/* =========================================================
   ctta SAFA ("چرا سافا را برای پروژه خود انتخاب کنید؟")
   ========================================================= */
.ctta-safa{
    position:relative;
    display:flex;
    align-items:stretch;
    min-height: 400px;
    /* overflow:hidden; */
}

.ctta-safa-content{
    flex: 0 0 65%;
    max-width: 65%;
    position:relative;
    z-index:2;
    background: #1e1e1e;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding: 48px calc((100vw - min(100vw, 1600px)) / 2 + 20px) 48px 64px;
}
.ctta-safa-content h2{ color:#fff; text-align:right;margin-bottom: 32px; }

.ctta-item{
    display:flex;
    align-items:flex-start;
    justify-content:flex-end;
    gap:24px;
    padding: 16px 0;
    text-align:right;
    flex-direction:row-reverse;
}
.ctta-item .icon-badge{
    width:56px; height:56px;
    background: rgba(255,212,0,.2);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
    color: var(--yellow-9);
}
.ctta-item .icon-badge svg{ width:40px; height:40px; }
.ctta-item .ctta-text h4{ color:#fff; font-size:20px; line-height:36px; font-weight:500; margin:0; }
.ctta-item .ctta-text p{ color:#a9a9a9; font-size:16px; line-height:28px; margin:0; }

/* ---- Left side: full image ---- */
.ctta-safa-image{
    flex: 0 0 35%;
    max-width: 35%;
    position:relative;
    /* overflow:hidden; */
    background: #1e1e1e;
}
.ctta-safa-image:before {
    content:"";
    position:absolute;
    left:0;
    width:340px;
    height:100%;
    background: linear-gradient(270deg, rgba(30, 30, 30, 0) 100% , #1E1E1E 42.65%);
    z-index:1;
    pointer-events:none;
}
.ctta-safa-image img{
    /* width:100%; height:100%; */
    object-fit:cover;
    display:block;
    transform: scale(1.45) translateX(-36px);
    position: relative;
  z-index: 4;
  top: 12px;
  height: 400px;
}

/* ---- White corner triangles cut into the left image ---- */
.ctta-safa::before,
.ctta-safa::after{
    content:"";
    position:absolute;
    left:0;
    width:140px;
    height:88px;
    background: #fff;
    z-index:3;
    pointer-events:none;
}
.ctta-safa::before{
    width: 100%;
    top:-1px;
    clip-path: polygon(100% 0, 0 0, 100% 100%);
}
.ctta-safa::after{
    width: 100%;
    bottom:-1px;
    clip-path: polygon(100% 100%, 0 100%, 100% 0);
}

/* ---- Responsive ---- */

@media (max-width: 1400px){
.mission-section{
    margin: 150px auto 50px;
    }
}

@media (min-width: 767px) and (max-width: 991px){
    .sf-stats-col--left {
        flex-direction: row;
    }
    .sf-stat-card {
        width: 33%;
    }
}


@media (max-width: 991.98px){
    .ctta-safa{ flex-direction:column; min-height:auto; }
    .ctta-safa-content,
    .ctta-safa-image{ flex:1 1 100%; max-width:100%; }
    .ctta-safa-content{ padding: 60px 24px; }
    .ctta-safa-image{ height:320px; display: none;}
    .ctta-safa::before { clip-path: polygon(100% 0, 0 0, 100% 50%); }
    .ctta-safa::after{ clip-path: polygon(100% 100%, 0 100%, 100% 50%); }
    .sf-cta-text {	max-width: 100%;}
    .cstm-map {
        left: 15px;
        font-size: 4.6rem;
    }
    .sf-stat-number {
  font-size: 5rem;
    }
    .sf-stat-number--sm {
  font-size: 5rem;
    }
}

@media (max-width: 767.98px){
    .sf-gallery-item {
    min-height: unset;
        height: unset;
    }
}

@media (max-width: 575.98px){
    .ctta-safa-image{ height:240px; display: none;}

}