.elementor-3682 .elementor-element.elementor-element-63517f8{margin-top:-63px;margin-bottom:0px;}.elementor-widget .tippy-tooltip .tippy-content{text-align:center;}/* Start custom CSS *//* ==================================================
   Karan Soleh - Girder Page
   Construction Industrial Landing Page
   Scoped CSS
   Brand Palette:
   Navy #051934
   Gold #EEAD16
================================================== */


/* =========================
   ROOT VARIABLES
========================= */


.karan-girder-page {

  --girder-bg: #051934;
  --girder-bg-soft: #082544;
  --girder-card: #0d2d52;

  --girder-gold: #EEAD16;
  --girder-gold-soft: rgba(238,173,22,.12);

  --girder-white: #f4f1ed;
  --girder-text: #d7dddd;
  --girder-muted: #aeb8ba;

  --girder-border: rgba(255,255,255,.12);

  width:100%;
  direction:rtl;

  background:var(--girder-bg);
  color:var(--girder-white);

  overflow:hidden;

  text-align:right;

}




/* =========================
   RESET
========================= */


.karan-girder-page *,
.karan-girder-page *::before,
.karan-girder-page *::after {

 box-sizing:border-box;

}




.karan-girder-page img {

 max-width:100%;
 display:block;

}




/* =========================
   TYPOGRAPHY
========================= */


.karan-girder-page h1,
.karan-girder-page h2,
.karan-girder-page h3 {

 margin-top:0;

 color:var(--girder-white);

 font-weight:800;

 line-height:1.45;

}




.karan-girder-page h1 {


font-size:clamp(2.4rem,5vw,5.2rem);

margin-bottom:28px;


}




.karan-girder-page h2 {


font-size:clamp(1.8rem,3.5vw,3rem);

margin-bottom:25px;


}




.karan-girder-page h3 {


font-size:1.2rem;

margin-bottom:15px;


}




.karan-girder-page p {


color:var(--girder-text);

font-size:1rem;

line-height:2.2;

margin-bottom:22px;


}




.karan-girder-page strong {

color:var(--girder-white);

font-weight:800;

}




/* =========================
   CONTAINER
========================= */


.ks-girder-container {


width:min(1180px, calc(100% - 48px));

margin-right:auto;

margin-left:auto;


}





/* =========================
   HERO
========================= */


.ks-girder-hero {


position:relative;

padding:

clamp(90px,12vw,160px)

0

100px;


border-bottom:

1px solid var(--girder-border);



background:

radial-gradient(

circle at 85% 15%,

rgba(238,173,22,.15),

transparent 350px

),

var(--girder-bg);


overflow:hidden;


}





.ks-girder-hero::before {


content:"";

position:absolute;

left:-150px;

bottom:-200px;

width:450px;

height:450px;

border-radius:50%;

border:1px solid rgba(238,173,22,.2);


}




.ks-girder-hero-content {


position:relative;

z-index:2;

max-width:820px;


}




/* small title */


.ks-girder-eyebrow {


display:inline-block;

margin-bottom:20px;

color:var(--girder-gold);

font-size:.9rem;

font-weight:700;

letter-spacing:.2px;


}




.ks-girder-lead {


font-size:clamp(1.05rem,1.5vw,1.25rem);

max-width:780px;

color:#dfe3e3;


}





/* =========================
   HERO META
========================= */


.ks-girder-meta {


display:flex;

flex-wrap:wrap;

gap:12px;

margin-top:35px;


}




.ks-girder-meta span {


padding:9px 18px;

border:1px solid rgba(238,173,22,.45);

background:rgba(238,173,22,.05);

color:#e7e5df;

font-size:.85rem;

transition:.3s;


}





.ks-girder-meta span:hover {


background:var(--girder-gold);

color:#051934;


}





/* =========================
   HERO IMAGE
========================= */


.ks-girder-hero-image {


position:absolute;

left:-60px;

top:50%;


width:420px;

height:420px;


transform:translateY(-50%);


opacity:.35;


pointer-events:none;


}





.ks-girder-hero-image img {


width:100%;

height:100%;

object-fit:cover;


filter:

grayscale(30%)

contrast(110%);


border-radius:4px;


}




/* =========================
   HERO HIGHLIGHT BOX
========================= */


.ks-girder-highlight-box {


position:relative;

z-index:3;


margin-top:70px;


max-width:760px;


padding:28px 35px;


border-right:4px solid var(--girder-gold);


background:

rgba(238,173,22,.08);


}




.ks-girder-highlight-box p {


margin:0;

color:var(--girder-white);

font-size:1.05rem;


}

/* ==================================================
   INTRO SECTION
================================================== */


.ks-girder-intro {


display:grid;

grid-template-columns:180px minmax(0,1fr);

gap:clamp(35px,7vw,110px);


padding:

clamp(80px,10vw,140px)

0;


border-bottom:

1px solid var(--girder-border);


}





.ks-girder-section-label {


padding-top:12px;


color:var(--girder-gold);


font-weight:700;


}




.ks-girder-section-label::before {


content:"";

display:block;


width:45px;

height:3px;


background:var(--girder-gold);


margin-bottom:18px;


}





.ks-girder-content {


max-width:820px;


}





.ks-girder-content p {


max-width:820px;


}





/* =========================
   ENGINEERING BOXES
========================= */


.ks-girder-engineering-box {


display:grid;

grid-template-columns:repeat(3,1fr);


gap:18px;


margin:

45px

0;


}




.ks-girder-engineering-item {


padding:28px;


min-height:190px;


background:

var(--girder-card);


border:

1px solid var(--girder-border);


transition:.3s;


}




.ks-girder-engineering-item:hover {


transform:translateY(-6px);


border-color:

rgba(238,173,22,.65);


}




.ks-girder-engineering-item span {


display:flex;

align-items:center;

justify-content:center;


width:42px;

height:42px;


margin-bottom:20px;


border:

1px solid rgba(238,173,22,.6);


border-radius:50%;


color:

var(--girder-gold);


font-weight:800;


}




.ks-girder-engineering-item strong {


display:block;

margin-bottom:12px;


color:

var(--girder-white);


}




.ks-girder-engineering-item p {


font-size:.9rem;

margin:0;


}




/* ==================================================
   SECTION HEADINGS
================================================== */


.ks-girder-heading {


max-width:820px;

margin-bottom:55px;


}





.ks-girder-section-intro {


padding:

80px

0

20px;


}





/* ==================================================
   ADVANTAGES
================================================== */


.ks-girder-advantages {


padding:

80px

0

140px;


border-bottom:

1px solid var(--girder-border);


}





.ks-girder-card-grid {


display:grid;


grid-template-columns:

repeat(3,minmax(0,1fr));


gap:20px;


}




.ks-girder-card {


padding:32px;


background:

var(--girder-card);


border:

1px solid var(--girder-border);


min-height:360px;


position:relative;


overflow:hidden;


transition:

transform .3s ease,

border-color .3s ease;


}




.ks-girder-card::before {


content:"";

position:absolute;


top:0;

right:0;


width:0;

height:3px;


background:

var(--girder-gold);


transition:.35s;


}




.ks-girder-card:hover {


transform:translateY(-8px);


border-color:

rgba(238,173,22,.7);


}




.ks-girder-card:hover::before {


width:100%;


}





/* ICON */


.ks-girder-card-icon {


margin-bottom:25px;


}




.ks-girder-card-icon span {


display:flex;


align-items:center;

justify-content:center;


width:50px;

height:50px;


border:

1px solid rgba(238,173,22,.55);


border-radius:50%;


color:

var(--girder-gold);


font-weight:800;


}




.ks-girder-card p {


font-size:.95rem;


line-height:2;


}





/* =========================
   LIST STYLE
========================= */


.ks-girder-list {


padding:0;

margin:25px 0;


list-style:none;


}




.ks-girder-list li {


position:relative;


padding-right:25px;


margin-bottom:12px;


color:

var(--girder-text);


line-height:2;


}





.ks-girder-list li::before {


content:"";


position:absolute;


right:0;

top:14px;


width:9px;

height:9px;


background:

var(--girder-gold);


border-radius:50%;


}






/* ==================================================
   APPLICATION SECTION
================================================== */


.ks-girder-applications {


padding:

clamp(80px,10vw,140px)

0;


}





.ks-girder-application-grid {


display:grid;


grid-template-columns:

repeat(2,minmax(0,1fr));


gap:25px;


}





.ks-girder-application-card {


background:

var(--girder-card);


border:

1px solid var(--girder-border);


overflow:hidden;


transition:.3s;


}





.ks-girder-application-card:hover {


transform:translateY(-7px);


border-color:

rgba(238,173,22,.65);


}





.ks-girder-image-box {


height:280px;


overflow:hidden;


}




.ks-girder-image-box img {


width:100%;

height:100%;


object-fit:cover;


transition:

transform .5s ease;


}




.ks-girder-application-card:hover img {


transform:scale(1.05);


}





.ks-girder-application-card h3 {


padding:

25px 28px 0;


}





.ks-girder-application-card p {


padding:

0 28px 30px;


margin-bottom:0;


}

/* ==================================================
   PROCESS / TIMELINE SECTION
================================================== */


.ks-girder-process {


padding:

clamp(80px,10vw,140px)

0;


border-top:

1px solid var(--girder-border);


}





.ks-girder-timeline {


position:relative;


max-width:900px;


margin-top:60px;


}





.ks-girder-timeline::before {


content:"";


position:absolute;


right:25px;


top:0;


bottom:0;


width:1px;


background:

rgba(238,173,22,.35);


}





.ks-girder-step {


position:relative;


display:grid;


grid-template-columns:90px minmax(0,1fr);


gap:35px;


margin-bottom:45px;


}





.ks-girder-step-number {


position:relative;


z-index:2;


display:flex;


align-items:center;


justify-content:center;


width:55px;


height:55px;


border-radius:50%;


border:

1px solid rgba(238,173,22,.7);


background:

var(--girder-bg);


color:

var(--girder-gold);


font-size:1rem;


font-weight:800;


}





.ks-girder-step-content {


padding:

25px 30px;


background:

var(--girder-card);


border:

1px solid var(--girder-border);


transition:.3s;


}





.ks-girder-step-content:hover {


border-color:

rgba(238,173,22,.65);


transform:translateX(-5px);


}





.ks-girder-step-content p {


margin-bottom:0;


}




.ks-girder-process-footer {


margin-top:45px;


padding:25px;


border-right:

3px solid var(--girder-gold);


background:

rgba(238,173,22,.06);


color:

var(--girder-white);


}





/* ==================================================
   KARAN SECTION
================================================== */


.ks-girder-karan {


display:grid;


grid-template-columns:

minmax(0,1.1fr)

minmax(320px,.9fr);


gap:

clamp(40px,8vw,100px);


align-items:start;


padding:

clamp(80px,10vw,140px)

0;


border-top:

1px solid var(--girder-border);


}





.ks-girder-karan-content {


max-width:820px;


}





.ks-girder-service-box {


padding:

35px;


background:

var(--girder-card);


border:

1px solid var(--girder-border);


border-top:

3px solid var(--girder-gold);


}





.ks-girder-service-box h3 {


margin-bottom:30px;


}





.ks-girder-service-list {


padding:0;

margin:0;


list-style:none;


}





.ks-girder-service-list li {


position:relative;


padding:

15px 32px 15px 0;


border-bottom:

1px solid var(--girder-border);


color:

var(--girder-text);


line-height:1.9;


}





.ks-girder-service-list li:last-child {


border-bottom:none;


}





.ks-girder-service-list li::before {


content:"";


position:absolute;


right:0;


top:25px;


width:10px;


height:10px;


background:

var(--girder-gold);


border-radius:50%;


}





/* ==================================================
   CTA SECTION
================================================== */


.ks-girder-cta {


position:relative;


padding:

90px 0;


background:


linear-gradient(

135deg,

rgba(238,173,22,.12),

transparent

),

var(--girder-bg-soft);


border-top:

1px solid var(--girder-border);


}





.ks-girder-cta-content {


max-width:850px;


}





.ks-girder-cta h2 {


font-size:

clamp(2rem,4vw,3.5rem);


}





.ks-girder-cta p {


font-size:1.15rem;


color:

var(--girder-white);


}





/* ==================================================
   FINAL TRUST SECTION
================================================== */


.ks-girder-final-trust {


padding:

clamp(80px,10vw,130px)

0;


border-top:

1px solid var(--girder-border);


}





.ks-girder-final-grid {


display:grid;


grid-template-columns:

minmax(0,1fr)

400px;


gap:

70px;


align-items:center;


}





.ks-girder-final-box {


padding:

35px;


background:

rgba(238,173,22,.08);


border-right:

4px solid var(--girder-gold);


}





.ks-girder-final-box h3 {


margin-bottom:20px;


}





.ks-girder-button {


display:inline-flex;


align-items:center;


justify-content:center;


margin-top:25px;


padding:

14px 32px;


background:

var(--girder-gold);


color:

#051934;


font-weight:800;


text-decoration:none;


transition:.3s;


}





.ks-girder-button:hover {


background:#ffc52b;


transform:translateY(-3px);


}





/* ==================================================
   GALLERY
================================================== */


.ks-girder-gallery {


display:grid;


grid-template-columns:

repeat(3,1fr);


gap:20px;


padding:

60px 0;


}





.ks-girder-gallery-item {


height:260px;


overflow:hidden;


border:

1px solid var(--girder-border);


}





.ks-girder-gallery-item img {


width:100%;


height:100%;


object-fit:cover;


transition:.5s;


}





.ks-girder-gallery-item:hover img {


transform:scale(1.08);


}





/* ==================================================
   SEO FOOTER
================================================== */


.ks-girder-seo-footer {


padding:

70px 0;


max-width:900px;


border-top:

1px solid var(--girder-border);


}





.ks-girder-seo-footer p {


color:

var(--girder-muted);


}

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


@media (max-width:1050px){



.karan-girder-page .ks-girder-container {

width:

calc(100% - 40px);

}




/* Hero */


.ks-girder-hero-image {


width:320px;

height:320px;

left:-80px;


opacity:.25;


}




/* Intro */


.ks-girder-intro {


grid-template-columns:1fr;


gap:35px;


}




.ks-girder-section-label {


margin-bottom:10px;


}




/* Engineering */


.ks-girder-engineering-box {


grid-template-columns:repeat(2,1fr);


}





/* Cards */


.ks-girder-card-grid {


grid-template-columns:repeat(2,1fr);


}





.ks-girder-card:nth-child(3){


grid-column:

1/-1;


}





/* Applications */


.ks-girder-application-grid {


grid-template-columns:1fr;


}





/* Karan */


.ks-girder-karan {


grid-template-columns:1fr;


}





.ks-girder-service-box {


max-width:600px;


}





.ks-girder-final-grid {


grid-template-columns:1fr;


}





}





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


@media(max-width:700px){



.karan-girder-page {


overflow:hidden;


}




.karan-girder-page .ks-girder-container {


width:

calc(100% - 28px);


}





/* Typography */


.karan-girder-page h1 {


font-size:2.25rem;

line-height:1.35;


}



.karan-girder-page h2 {


font-size:1.7rem;


}



.karan-girder-page p {


font-size:.95rem;


line-height:2;


}




/* Hero */


.ks-girder-hero {


padding:

70px 0 65px;


}




.ks-girder-hero-image {


position:absolute;


top:-50px;


left:-120px;


width:230px;

height:230px;


opacity:.15;


}




.ks-girder-lead {


font-size:1rem;


}




.ks-girder-meta {


gap:8px;


}




.ks-girder-meta span {


font-size:.75rem;


padding:

7px 12px;


}




.ks-girder-highlight-box {


margin-top:45px;


padding:

20px;


}




/* Intro */


.ks-girder-intro {


padding:

70px 0;


}




/* Engineering */


.ks-girder-engineering-box {


grid-template-columns:1fr;


margin:

35px 0;


}





.ks-girder-engineering-item {


min-height:auto;


}





/* Advantages */


.ks-girder-advantages {


padding:

70px 0;


}





.ks-girder-card-grid {


grid-template-columns:1fr;


}





.ks-girder-card {


padding:25px;


min-height:auto;


}





.ks-girder-card:nth-child(3){


grid-column:auto;


}





/* Applications */


.ks-girder-applications {


padding:

70px 0;


}




.ks-girder-image-box {


height:220px;


}





/* Timeline */


.ks-girder-timeline {


margin-top:40px;


}





.ks-girder-timeline::before {


right:20px;


}





.ks-girder-step {


grid-template-columns:60px minmax(0,1fr);


gap:20px;


margin-bottom:30px;


}





.ks-girder-step-number {


width:42px;

height:42px;


font-size:.85rem;


}





.ks-girder-step-content {


padding:

20px;


}




.ks-girder-step-content:hover {


transform:none;


}





.ks-girder-process-footer {


padding:

20px;


}




/* Services */


.ks-girder-karan {


padding:

70px 0;


}





.ks-girder-service-box {


padding:

25px;


}




/* CTA */


.ks-girder-cta {


padding:

65px 0;


}





.ks-girder-cta p {


font-size:1rem;


}




/* Gallery */


.ks-girder-gallery {


grid-template-columns:1fr;


padding:

40px 0;


}




.ks-girder-gallery-item {


height:220px;


}





/* SEO */


.ks-girder-seo-footer {


padding:

50px 0;


}



}






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


@media(max-width:420px){



.karan-girder-page h1 {


font-size:2rem;


}



.karan-girder-page h2 {


font-size:1.55rem;


}



.ks-girder-meta span {


width:100%;

justify-content:center;


}





.ks-girder-step {


grid-template-columns:45px 1fr;

gap:15px;


}





.ks-girder-step-number {


width:38px;

height:38px;


}




.ks-girder-service-list li {


padding-right:25px;


}



}






/* ==================================================
   ELEMENTOR SAFE FIX
================================================== */


.elementor-widget-html .karan-girder-page {


width:100%;


}




.karan-girder-page a {


transition:.3s ease;


}




/* جلوگیری از اسکرول افقی */


.karan-girder-page,
.karan-girder-page article,
.karan-girder-page section {


max-width:100%;

overflow-x:hidden;


}






/* ==================================================
   REDUCED MOTION
================================================== */


@media(prefers-reduced-motion:reduce){


.karan-girder-page *,
.karan-girder-page *::before,
.karan-girder-page *::after{


animation:none!important;

transition:none!important;


scroll-behavior:auto!important;


}



}/* End custom CSS */