@import url("../css/swiper-bundle.min.css");
@import url("../css/font-awesome.css");

/* Custom CSS - Sanaullah Khan */
*, *:after, *:before { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
html, body { margin:0; padding:0; font-weight:normal; font-family: 'DM Sans';  }
body { overflow-x:hidden !important;  }
h1, h2, h3, h4, h5, h6 { font-weight:500; padding:0; margin:0; margin-bottom:10px; color:var(--gray500); font-family: 'Familjen Grotesk'; line-height:normal;  }
p { margin-bottom:10px;  }
p, li  { line-height:24px; font-size:15px; color:#666; font-weight:normal;   }

ul {list-style:none;}
a { color:#000; font-family: "Poppins", sans-serif; -webkit-transition:all .2s ease-in-out; -moz-transition:all .2s ease-in-out; transition:all .2s ease-in-out; text-decoration:none; }
a:hover,a:focus { text-decoration:none; outline:0;  } 
.clear { clear:both; float:none !important; width:100% !important; }
.ie6,.ie7,.ie8,.ie9, img{ border:none; }
b, strong { font-weight:600; }
section { padding:50px 0; }


.color-white { color:#fff; }
 
.h-100 { height:100vh; }
.pd-0 { padding:0px !important; }
.relative { position:relative; }
.section-padding { padding:60px 0; }
.blue,
.text-primary { color:var(--secondary) !important; }

.fw-semibold { font-weight:500 !important; }

.mt-10 { margin-top:10px !Important; }
.mt-20 { margin-top:20px !Important; }
.mt-30 { margin-top:30px !Important; }
.mt-40 { margin-top:40px !Important; }
.mt-50 { margin-top:50px !Important; }

.mb-10 { margin-bottom:10px !Important; }
.mb-20 { margin-bottom:20px !Important; }
.mb-30 { margin-bottom:30px !Important; }
.mb-40 { margin-bottom:40px !Important; }
.mb-50 { margin-bottom:50px !Important; }


.pt-50 { padding-top:50px !Important; }
.pt-60 { padding-top:60px; }
.pt-80 { padding-top:80px; }
.pt-100 { padding-top:100px; }
.pt-120 { padding-top:120px; }

.fw-bold { font-weight:600 !important; }


:root{
--sand:#f9f6c1;
--white:#FFFFFF;
--ink:#1C2B28;
--terracotta:#eec51b;
--teal:#2C6E63;
--gold:#C9A227;
--pale:#E7EFE9;
--line:#E3DCC9;
}


.container { /* border:1px solid#ddd; */ }
  

.cst-section-title { font-size:50px; }


/* Header */

.tp-header-logo { }
.tp-header-logo a { display:block; width:100px; }

.header-sticky { background: #ffffff; }

@media(max-width:995px){
.tp-header-logo a { display:block; width:70px; }

}	

.top_image { display:none; }


@media(max-width:995px){
.top_image { display:block; width:auto; min-height:100%; }
.stage { display:none; }	
}	



/* Hero section */
.hero-section { padding:0px 0px; position:relative; height:100vh !important; min-height:100vh !important; overflow:hidden; }

.hero-section:before { content:''; position:absolute; z-index:5; width:100%; top:0px; height:120px;
background: #ffffff;
background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

@media(max-width:995px){
.hero-section:before { height:219px }	
}	


.stage{position:relative;width:100%;;background:#fff;overflow:hidden; }
.art{position:relative;width:100%;aspect-ratio:1672/1272;overflow:hidden}
.hero-section svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }

#baseSvg{z-index:1}
#colourSvg{z-index:2;pointer-events:none}
#hitSvg{z-index:5}

#introClip rect{transform-origin:left center}

.colour-layer{
  opacity:0;
  transition:opacity .55s cubic-bezier(.22,.61,.36,1);
}
.colour-layer.active{opacity:1}

.hit-area{
  fill:transparent;
  stroke:transparent;
  stroke-width:3;
  vector-effect:non-scaling-stroke;
  cursor:pointer;
  pointer-events:all;
  outline:none;
  transition:fill .25s ease,stroke .25s ease,filter .25s ease;
}
.hit-area:hover,
.hit-area:focus-visible,
.hit-area.active{
  /*fill:rgba(218,168,72,.07);
  stroke:rgba(211,158,59,.95);*/
  filter:drop-shadow(0 0 8px rgba(211,158,59,.75));
}
 

.info{
  position:absolute;
  left:22px;
  bottom:22px;
  z-index:20;
  width:min(370px,calc(100% - 44px));
  padding:15px 18px;
  border-radius:15px;
  background:rgba(24,20,17,.80);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  color:#fff;
  opacity:0;
  transform:translateY(12px);
  pointer-events:none;
  transition:.35s ease;
}
.info.show{opacity:1;transform:translateY(0)}
.info small{display:block;color:#dfb86e;font-size:9px;font-weight:800;letter-spacing:.17em;text-transform:uppercase}
.info h3{margin:5px 0;font:700 20px/1.15 Georgia,serif}
.info p{margin:0;color:#eee;font-size:12px;line-height:1.5}
.gold-line{width:38px;height:2px;background:#d4a34e;margin-top:10px}

.hint{
  position:absolute;right:20px;bottom:20px;z-index:20;
  padding:9px 12px;border-radius:11px;
  background:rgba(255,250,240,.9);
  color:#514940;font-size:11px;
  box-shadow:0 10px 28px rgba(0,0,0,.12);
}
.hint b{color:#9b7130}

@media(max-width:700px){
 .stage{width:100%;}
 .hint{display:none}
 .info{left:8px;bottom:8px;width:270px;padding:11px 13px}
 .info h3{font-size:16px}
}

::selection{ background:var(--terracotta); color:var(--white); }

.serif{ font-family:'Playfair Display', serif; }
.cormorant{ font-family:'Cormorant Garamond', serif; }

.eyebrow{
font-family:'Inter', sans-serif; text-transform:uppercase; letter-spacing:0.28em;
font-size:11px; font-weight:500; color:var(--terracotta);
}
.hairline{ border:none; border-top:1px solid var(--line); }
 

#about-us { padding:100px 0; }
#hero{ min-height:100svh; position:relative; display:flex; align-items:center;  background:var(--sand); }
 
.hero-eyebrow{ margin-bottom:26px; display:flex; align-items:center; gap:14px; }
.hero-eyebrow .line{ width:34px; height:1px; background:var(--terracotta); }
.hero-headline{ font-size:clamp(44px, 6vw, 86px); line-height:1.03; font-weight:500; letter-spacing:-0.01em; margin:0 0 30px; }
.hero-headline em{ font-style:italic; font-weight:400; color:var(--terracotta); }
.hero-copy{ font-size:16px; line-height:1.85; color:#4a463c; max-width:440px; margin-bottom:44px; font-weight:300; }
.hero-ctas{ display:flex; gap:18px; flex-wrap:wrap; }
.btn-line{
font-size:11px; letter-spacing:0.16em; text-transform:uppercase; font-weight:500;
padding:16px 30px; border:1px solid var(--ink); border-radius:999px;
transition:all .45s cubic-bezier(.22,1,.36,1); display:inline-flex; align-items:center; gap:10px;
}
.btn-line:hover{ background:var(--ink); color:var(--white); letter-spacing:0.2em; }
.btn-solid{
font-size:11px; letter-spacing:0.16em; text-transform:uppercase; font-weight:500;
padding:16px 30px; background:var(--terracotta); color:var(--white); border-radius:999px;
transition:all .45s cubic-bezier(.22,1,.36,1);
}
.btn-solid:hover{ background:var(--ink); }

.hero-art{ position:relative; }
.hero-art svg{ width:100%; height:auto; display:block; }
.annot{ position:absolute; font-family:'Cormorant Garamond', serif; font-style:italic; font-size:13px; color:#7c765f; letter-spacing:0.02em; display:flex; align-items:center; gap:6px; }
.annot .dash{ width:22px; height:1px; background:#c9bf9c; }
.edge-label{
position:absolute; right:-6px; top:50%; transform:translateY(-50%) rotate(90deg); transform-origin:right center;
font-size:10px; letter-spacing:0.3em; text-transform:uppercase; color:#a89a71; white-space:nowrap; display:none;
}
@media(min-width:1100px){ .edge-label{ display:block; } }

.scroll-cue{ position:absolute; bottom:34px; left:6vw; display:flex; align-items:center; gap:12px; font-size:10px; letter-spacing:0.24em; text-transform:uppercase; color:#a89a71; }
.scroll-cue .stem{ width:1px; height:38px; background:linear-gradient(var(--terracotta), transparent); position:relative; overflow:hidden; }
.scroll-cue .stem::after{ content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--terracotta); animation:stemdrop 2.4s ease-in-out infinite; }
@keyframes stemdrop{ 0%{top:-100%;} 60%{top:100%;} 100%{top:100%;} }

/* wave divider */
.wave-divider{ position:relative; width:100%; overflow:hidden; line-height:0; }
.wave-divider svg{ width:100%; height:60px; display:block; }


.tp--hover-img canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* =========================================================
   WEDDING SVG TOOLTIP
========================================================= */

.wedding-tooltip {
    position: fixed;
    z-index: 99999;

    padding: 9px 15px;

    background: rgba(25, 25, 25, 0.92);
    color: #fff;

    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;

    white-space: nowrap;

    border-radius: 4px;

    pointer-events: none;

    opacity: 0;
    visibility: hidden;

    transform: translateY(6px);

    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        visibility 0.25s ease;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.18);
}


/* ACTIVE */

.wedding-tooltip.show {

    opacity: 1;
    visibility: visible;

    transform: translateY(0);

}


/* SMALL ARROW */

.wedding-tooltip::after {

    content: "";

    position: absolute;

    left: 50%;
    bottom: -5px;

    width: 10px;
    height: 10px;

    background: rgba(25, 25, 25, 0.92);

    transform:
        translateX(-50%)
        rotate(45deg);

}


/* =========================================================
   OPTIONAL — SVG HIT AREA
========================================================= */

.hit-area {

    cursor: pointer;

    fill: transparent;

    stroke: transparent;

}


/* ---------- REVEAL ---------- */


 
.section-pad {  }
.label-row{ display:flex; align-items:center; gap:16px; margin-bottom:34px; }
.label-row .num{ font-family:'Cormorant Garamond', serif; font-style:italic; color:var(--terracotta); font-size:15px; }



.cst-hero-slider-wrapper { padding:20px 0; background:#000; }
.cst-hero-slider-wrapper .swiper-slide { margin-right:0px !important; }
.cst-hero-slider-wrapper h3 { color:#fff; margin-bottom:0px; /* border:1px solid#fff; */ font-size:14px; position:relative; padding:0 20px; }
.cst-hero-slider-wrapper h3:after { content:''; position:absolute; z-index:5; width:100%; left:-4px; top:50%; transform:translateY(-50%); height:6px; width:6px; background:#fff; border-radius:50%; }



 /* ---------- INTRO ---------- */
  #intro{ background:var(--white); }
  .intro-grid{ display:grid; grid-template-columns:1.3fr 0.7fr; gap:8vw; align-items:start; }
  .intro-statement{  }
  .intro-statement i{ color:var(--terracotta); font-style:italic; font-weight:400; }
  .intro-body{ font-size:15px; line-height:1.9; color:#5a5751; font-weight:300; }
  .intro-sketch{ margin-top:60px; display:flex; justify-content:flex-end; }
  .intro-sketch svg{ width:80%; height:auto; }

  /* ---------- SERVICES ---------- */
  #services{ background:var(--pale); }
  .services-head{ display:grid; grid-template-columns:1fr 1fr; gap:6vw; align-items:end; margin-bottom:40px; }
  .services-title{ font-size:clamp(32px, 4vw, 54px); line-height:1.12; font-weight:500; }
  .services-title i{ font-style:italic; color:var(--terracotta); font-weight:400; }
  .services-sub{ font-size:15px; color:#4f5a54; line-height:1.8; font-weight:300; }

  .service-row{
    display:grid; grid-template-columns:70px 1.4fr 1.6fr 110px; gap:36px; align-items:center;
    padding:42px 0; border-top:1px solid rgba(28,43,40,0.14); cursor:pointer; position:relative; overflow:hidden;
    transition:padding .5s ease;
  }
  .service-row:last-child{ border-bottom:1px solid rgba(28,43,40,0.14); }
  .service-num{  font-style:italic; font-size:22px; color:var(--terracotta); }
  .service-name{  font-weight:500; transition:transform .5s cubic-bezier(.22,1,.36,1); }
  .service-desc{ font-size:14px; color:#4f5a54; line-height:1.7; font-weight:300; max-width:420px; }
  .service-sketch{ opacity:0; transform:translateX(14px) scale(.9); transition:all .5s cubic-bezier(.22,1,.36,1); justify-self:end; }
  .service-sketch svg{ width:56px; height:56px; }
  .service-row:hover{ padding-left:14px; }
  .service-row:hover .service-name{ transform:translateX(8px); color:var(--terracotta); }
  .service-row:hover .service-sketch{ opacity:1; transform:translateX(0) scale(1); }
  @media(max-width:860px){
    .service-row{ grid-template-columns:40px 1fr; row-gap:14px; }
    .service-desc{ grid-column:2; }
    .service-sketch{ display:none; }
  }
/* ---------- FINAL CTA ---------- */
  #final-cta{ /* background:var(--sand); */ text-align:center; padding:200px 6vw; position:relative; overflow:hidden; }
  .cta-bg{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0.1; pointer-events:none; }
  .cta-bg svg{ width:900px; max-width:140vw; height:auto; }
  .cta-title{ font-size:clamp(34px,5.6vw,72px); font-weight:500; line-height:1.08; position:relative; z-index:2; margin-bottom:26px; }
  .cta-title i{ font-style:italic; color:var(--terracotta); }
  .cta-sub{ font-size:15px; color:#5c5c56; margin-bottom:46px; position:relative; z-index:2; }


  /* ---------- SERVICES ---------- */
  #services{ background:var(--white); }
  .services-head{ display:grid; grid-template-columns:1fr 1fr; gap:6vw; align-items:end; margin-bottom:80px; }
  .services-title{ font-size:clamp(32px, 4vw, 54px); line-height:1.12; font-weight:500; }
  .services-title i{ font-style:italic; color:var(--champagne); font-weight:400; }
  .services-sub{ font-size:15px; color:#767268; line-height:1.8; font-weight:300; }

  .service-row{
    display:grid; grid-template-columns:70px 1.4fr 1.6fr 110px; gap:36px; align-items:center;
    padding:42px 0; border-top:1px solid #ededed; cursor:pointer; position:relative; overflow:hidden;
    transition:padding .5s ease;
  }
  .service-row:last-child{ border-bottom:1px solid var(--gray); }
  .service-num{  font-style:italic; font-size:22px; color:var(--champagne); }
  .service-name{  font-size:clamp(22px,2.2vw,32px); font-weight:500; transition:transform .5s cubic-bezier(.22,1,.36,1); }
  .service-desc{ font-size:14px; color:#767268; line-height:1.7; font-weight:300; max-width:420px; }
  .service-sketch{ opacity:0; transform:translateX(14px) scale(.9); transition:all .5s cubic-bezier(.22,1,.36,1); justify-self:end; }
  .service-sketch svg{ width:56px; height:56px; }
  .service-row:hover{ padding-left:14px; }
  .service-row:hover .service-name{ transform:translateX(8px); color:var(--champagne); }
  .service-row:hover .service-sketch{ opacity:1; transform:translateX(0) scale(1); }

  @media(max-width:860px){
    .service-row{ grid-template-columns:40px 1fr; row-gap:14px; }
    .service-desc{ grid-column:2; }
    .service-sketch{ display:none; }
  }






















/*----------------------------------------*/
/*   3.3 Brand Style
/*----------------------------------------*/
.cnt-brand-style.ar-brand-style .tp-brand-title {
  font-size: 18px;
  font-family: var(--tp-ff-inter);
}
.cnt-brand-style.ar-brand-style .tp-brand-title::after {
  width: 12px;
  height: 12px;
  transform: translateY(-1px);
  background-color: transparent;
  border: 3px solid var(--tp-common-white);
}

.ais-brand-blur {
  padding: 30px 0;
  position: relative;
}
.ais-brand-blur::after {
  position: absolute;
  content: "";
  right: 0;
  top: 0;
  height: 100%;
  width: 230px;
  z-index: 1;
  background: linear-gradient(-270deg, rgba(253, 252, 254, 0) 3.5%, #FDFCFE 100%);
}
.ais-brand-blur::before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  height: 100%;
  width: 230px;
  z-index: 2;
  background: linear-gradient(270deg, rgba(253, 252, 254, 0) 3.5%, #FDFCFE 100%);
}

.ar-brand-style .tp-brand-wrapper {
  margin-top: -1px;
  transform: rotate(0);
  padding: 30px 0 26px 0;
}
.ar-brand-style .tp-brand-wrapper.pp-about-me-brand-wrap {
  z-index: -1;
  padding: 26px 0 13px 0;
}
.ar-brand-style .tp-brand-title {
  font-size: 20px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--tp-common-white);
  font-family: var(--tp-ff-clash-medium);
}
.ar-brand-style .tp-brand-title::after {
  background-color: var(--tp-common-white);
}
@media (max-width: 574.98px) {
  .ar-brand-area {
    margin-bottom: 80px;
  }
}

.ar-brand-active .slide-transtion {
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
}
.ar-brand-active .swiper-slide {
  width: auto;
}
.ar-brand-active .swiper-wrapper {
  align-items: center;
}
.ar-brand-bg {
  padding: 42px 0;
  border-top: 1px solid rgba(25, 25, 25, 0.06);
  border-bottom: 1px solid rgba(25, 25, 25, 0.06);
}

.red-bg {
  background-color: var(--tp-common-red);
}

.tp-brand-title {
  font-weight: 500;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--tp-common-black);
}
.tp-brand-title::after {
  content: "";
  height: 8px;
  width: 8px;
  margin-left: 30px;
  border-radius: 50%;
  display: inline-block;
  transform: translateY(-4px);
  background-color: var(--tp-common-black);
}
.tp-brand-active .swiper-slide {
  width: auto;
}

.dgm-brand-item {
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 -1px 0 0px;
  border: 1px solid #E8E8E8;
  border-bottom: 0;
}
.dgm-brand-item img {
  filter: invert(1);
}
.dgm-brand-active {
  margin: 0px -20px;
}

/*----------------------------------------*/
/*  7.30 testimonial css start
/*----------------------------------------*/

.tp-testimonial-area { padding:80px 0 20px 0; }


.tp-testimonial-thumb {
  overflow: hidden;
}
@media (max-width: 574.98px) {
  .tp-testimonial-thumb {
    margin-left: 0;
    width: 100%;
  }
}
.tp-testimonial-thumb:hover img {
  transform: scale(1.1);
}
.tp-testimonial-thumb img {
  transition: all 0.4s ease;
}
@media (max-width: 574.98px) {
  .tp-testimonial-thumb img {
    width: 100%;
  }
}
.tp-testimonial-thumb-2 {
  position: absolute;
  bottom: 60px;
  right: 0;
  z-index: 2;
  overflow: hidden;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-testimonial-thumb-2 {
    bottom: 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .tp-testimonial-thumb-2 {
    position: inherit;
    bottom: auto;
    margin-top: 30px;
    display: inline-block;
  }
}
.tp-testimonial-thumb-2:hover img {
  transform: scale(1.1);
}
.tp-testimonial-thumb-2 img {
  transition: all 0.4s ease;
}
.tp-testimonial-video {
  position: absolute;
  top: 20px;
  right: 20px;
}
.tp-testimonial-video .popup-video {
  width: 36px;
  height: 36px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .tp-testimonial-2-content h5 br {
    display: none;
  }
}
.tp-testimonial-2-content-wrap .fraction-wrapper {
  position: inherit;
  bottom: auto;
  left: auto;
  right: auto;
  margin: 0 auto;
  margin-top: 96px;
}
.tp-testimonial-2-shape {
  position: absolute;
  bottom: 50px;
  left: -112px;
}
.tp-testimonial-wd-spacing {
  padding-top: 230px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
  .tp-testimonial-wd-spacing {
    padding-top: 120px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .tp-testimonial-wd-spacing {
    padding-top: 60px;
  }
}
.tp-testimonial-wd-ratings {
  text-align: left;
}
.tp-testimonial-wd-ratings span i {
  color: var(--tp-common-yellow-2);
  font-size: 14px;
  transform: translateY(-3px);
}
.tp-testimonial-wd-ratings-wrap {
  float: right;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .tp-testimonial-wd-ratings-wrap {
    float: left;
  }
}
.tp-testimonial-wd-ratings-inner {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 100px;
  width: 264px;
  padding: 15px 32px;
}
.tp-testimonial-wd-slider-item .tp-testimonial-video {
  position: inherit;
  margin-bottom: 38px;
}
.tp-testimonial-wd-slider-item .fraction-wrapper {
  position: inherit;
  bottom: auto;
  float: right;
  margin-top: 50px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .tp-testimonial-wd-slider-item .fraction-wrapper {
    float: left;
  }
}
.tp-testimonial-wd-slider-item .fraction-wrapper #paginations span {
  color: var(--tp-common-white);
}
.tp-testimonial-wd-slider-item .shop-slider-progress-bar {
  background-color: rgba(255, 255, 255, 0.5);
}
.tp-testimonial-wd-shape {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 24%;
}
.tp-testimonial-wd-shape svg {
  width: 100%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .tp-testimonial-wd-thumb {
    margin-left: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .tp-testimonial-wd-para {
    margin-left: 0;
  }
  .tp-testimonial-wd-para p br {
    display: none;
  }
}
.tp-testimonial-sa-qoute {
  display: flex;
}
.tp-testimonial-sa-qoute img {
  margin-left: -15px;
  width: 50px;
  height: 50px;
  object-fit: cover;
}
.tp-testimonial-sa-qoute .qoute {
  width: 50px;
  height: 50px;
  border-radius: 50px;
  text-align: center;
  line-height: 46px;
  background: var(--tp-common-nights);
  display: inline-block;
  flex: 0 0 auto;
}
.tp-testimonial-sa-video .popup-video {
  background: var(--tp-grey-1);
  width: 35px;
  height: 35px;
  color: var(--tp-common-white);
  transition: all 0.4s ease;
}
.tp-testimonial-sa-video .popup-video span {
  line-height: 0;
}
.tp-testimonial-sa-item {
  border: 1px solid var(--tp-border-1);
  padding: 45px 35px 40px 35px;
}
.tp-testimonial-sa-item:hover .popup-video {
  background: var(--tp-common-nights);
}
.tp-testimonial-qoute .qoute {
  width: 60px;
  height: 60px;
  line-height: 60px;
  background: var(--tp-theme-primary);
}
.tp-testimonial-qoute .qoute-img {
  width: 60px;
  flex: 0 0 auto;
}
.tp-testimonial-qoute .qoute-img img {
  width: 100%;
  height: 100%;
}
.tp-testimonial-pp-content .fraction-wrapper {
  margin-top: 75px;
}
.tp-testimonial-cst-wrap {
  border-radius: 20px;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  height: 100%;
}
.tp-testimonial-cst-item {
  padding: 40px 32px 34px 40px;
  border-radius: 20px;
  position: absolute;
  margin: 40px;
  bottom: 0;
  left: 0;
  right: 0;
  transition: all 0.4s ease;
}
@media (max-width: 574.98px) {
  .tp-testimonial-cst-item {
    padding: 20px 20px 14px 20px;
    margin: 10px;
    position: inherit;
    margin-top: -120px;
  }
}
.tp-testimonial-cst-item .popup-video {
  width: 60px;
  height: 60px;
  background: var(--tp-common-black-1);
  display: flex;
  justify-content: center;
  align-items: center;
}
.tp-testimonial-cst-item .popup-video span {
  line-height: 1;
}
.tp-testimonial-cst-item .tp-testimonial-sa-qoute .qoute {
  background: var(--tp-common-black-1);
}
.tp-testimonial-cst-thumb {
  border-radius: 20px;
  height: 100%;
}
@media (max-width: 574.98px) {
  .tp-testimonial-cst-thumb {
    height: auto;
  }
}
.tp-testimonial-cst-thumb img {
  border-radius: 20px;
  height: 100%;
}
.tp-testimonial-cst-result {
  padding: 50px 60px 40px 60px;
  border-radius: 20px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .tp-testimonial-cst-result {
    padding: 50px 30px 40px 30px;
  }
}
.tp-testimonial-cst-result-top {
  padding-bottom: 363px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .tp-testimonial-cst-result-top {
    padding-bottom: 200px;
  }
  .tp-testimonial-cst-result-top h3 {
    font-size: 28px;
  }
  .tp-testimonial-cst-result-top h3 br {
    display: none;
  }
  .tp-testimonial-cst-result-top p br {
    display: none;
  }
}
@media (max-width: 574.98px) {
  .tp-testimonial-cst-result-top {
    padding-bottom: 100px;
    flex-direction: column;
  }
}
.tp-testimonial-cst-network {
  width: 60px;
  height: 60px;
  display: inline-block;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--tp-common-green-2);
  flex: 0 0 auto;
}
.tp-testimonial-cst-btn {
  border: 1px solid rgba(243, 241, 242, 0.1);
  border-radius: 24px;
}
.tp-testimonial-cst-shape {
  position: absolute;
  bottom: -110px;
  right: -110px;
  opacity: 0.2;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .tp-testimonial-cst-shape {
    width: 50%;
  }
}
.tp-testimonial-cst-pagenation {
  text-align: center;
}
.tp-testimonial-cst-pagenation span {
  width: 10px;
  height: 10px;
  background: transparent;
  background: var(--tp-grey-5);
  opacity: 1;
}
.tp-testimonial-cst-pagenation span.swiper-pagination-bullet-active {
  background: var(--tp-common-green-2);
}
.tp-testimonial-it-title h2 {
  font-size: 132px;
  line-height: 1;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-testimonial-it-title h2 {
    font-size: 100px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .tp-testimonial-it-title h2 {
    font-size: 70px;
    margin-bottom: 20px;
  }
}
@media (max-width: 574.98px) {
  .tp-testimonial-it-title h2 {
    font-size: 50px;
  }
}
.tp-testimonial-it-star i {
  color: #FF6D00;
}
.tp-testimonial-it-ratings-wrap {
  border: 1px solid #E3E7E6;
  border-radius: 100px;
  width: 310px;
  padding: 18px 32px;
}
.tp-testimonial-it-item {
  backdrop-filter: blur(5px);
  opacity: 0.97;
  border: 1px solid rgba(16, 48, 42, 0.08);
  border-radius: 20px;
  padding: 50px 20px 50px 50px;
}
@media (max-width: 574.98px) {
  .tp-testimonial-it-item {
    padding: 30px 20px 30px 20px;
  }
}
.tp-testimonial-it-item:hover .tp-testimonial-it-shape {
  opacity: 1;
  visibility: visible;
}
.tp-testimonial-it-qoute {
  width: 40px;
  height: 40px;
  background: var(--tp-common-black-1);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
}
.tp-testimonial-it-shape {
  position: absolute;
  top: 20px;
  right: 20px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease;
}
.tp-testimonial-it-slider {
  margin-right: -290px;
  margin-top: -55px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .tp-testimonial-it-slider {
    margin-right: 0;
    margin-top: 0;
  }
}
.tp-testimonial-it-pagenation {
  text-align: center;
}
.tp-testimonial-it-pagenation span {
  width: 10px;
  height: 10px;
  background: transparent;
  background: var(--tp-common-black-1);
  opacity: 0.1;
}
.tp-testimonial-it-pagenation span.swiper-pagination-bullet-active {
  background: var(--tp-common-black-1);
  opacity: 1;
}
.tp-testimonial-it-author img {
  width: 80px;
  border-radius: 100px;
}
.tp-testimonial-pb-wrap {
  padding: 160px 160px 160px 160px;
  box-shadow: 0 4px 40px 10px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
  margin-bottom: -240px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .tp-testimonial-pb-wrap {
    margin-bottom: -140px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .tp-testimonial-pb-wrap {
    padding: 60px 60px 90px 60px;
  }
}
@media (max-width: 574.98px) {
  .tp-testimonial-pb-wrap {
    padding: 30px 20px 30px 20px;
  }
}
.tp-testimonial-pb-pagenation {
  text-align: right;
  line-height: 1;
  margin-top: -50px;
}
@media (max-width: 574.98px) {
  .tp-testimonial-pb-pagenation {
    text-align: center;
    margin-top: 20px;
  }
}
.tp-testimonial-pb-pagenation span {
  width: 10px;
  height: 10px;
  background: transparent;
  background: var(--tp-theme-secondary);
  opacity: 0.1;
}
.tp-testimonial-pb-pagenation span.swiper-pagination-bullet-active {
  background: var(--tp-theme-secondary);
  opacity: 1;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .tp-testimonial-pb-content br {
    display: none;
  }
}
.tp-testimonial-ai-shape {
  top: -63px;
  right: 0;
  width: 19%;
  z-index: -1;
}
.tp-testimonial-ai-profeson {
  padding: 3px 17px;
}
.tp-testimonial-ai-expreance {
  border-top: 1px solid rgba(17, 17, 18, 0.1);
  padding-top: 32px;
  margin-top: 117px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .tp-testimonial-ai-expreance {
    margin-top: 50px;
  }
}
.tp-testimonial-ai-navigation {
  display: flex;
  gap: 10px;
  position: absolute;
  bottom: 48px;
  left: 12px;
  z-index: 1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .tp-testimonial-ai-navigation {
    position: inherit;
    left: auto;
    bottom: auto;
    margin-left: 85px;
  }
}
.tp-testimonial-ai-navigation span {
  transition: all 0.4s ease;
  position: relative;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2px;
}
.tp-testimonial-ai-navigation span::after {
  content: "";
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: -2px;
  right: -2px;
  z-index: -2;
  border-radius: 101px;
  background-image: -webkit-linear-gradient(90deg, #201b17 0%, #f96501 50%, #201b17 100%);
  background-image: -moz-linear-gradient(90deg, #201b17 0%, #f96501 50%, #201b17 100%);
  background-image: -ms-linear-gradient(90deg, #201b17 0%, #f96501 50%, #201b17 100%);
  background-image: -o-linear-gradient(90deg, #201b17 0%, #f96501 50%, #201b17 100%);
  background-image: linear-gradient(90deg, #201b17 0%, #f96501 50%, #201b17 100%);
  -moz-animation: sliderTitle3 2s ease-in-out 1s forwards infinite alternate;
  -webkit-animation: sliderTitle3 2s ease-in-out 1s forwards infinite alternate;
  animation: sliderTitle3 2s ease-in-out 1s forwards infinite alternate;
  background-size: 150% 150%;
}
.tp-testimonial-ai-navigation span::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--tp-common-white);
  z-index: -1;
  border-radius: 100px;
  transition: all 0.4s ease;
}
.tp-testimonial-ai-navigation span:hover {
  background-color: transparent;
  color: var(--tp-common-white);
}
.tp-testimonial-ai-navigation span:hover::before {
  background: transparent;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .tp-testimonial-ai-avatar {
    text-align: center;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .tp-testimonial-ai-content {
    margin-right: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .tp-testimonial-ai-content {
    margin-left: 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .tp-testimonial-ai-content p br {
    display: none;
  }
}
.tp-testimonial-md-map {
  position: absolute;
  top: 114px;
  left: 0;
  right: 0;
  z-index: -1;
  margin: 0 auto;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .tp-testimonial-md-map {
    top: 44px;
    height: 90%;
  }
}
.tp-testimonial-md-item {
  margin: 0px 30px;
}
@media (max-width: 574.98px) {
  .tp-testimonial-md-item {
    margin: 0;
  }
}

.fraction-wrapper {
  position: absolute;
  bottom: 110px;
  left: 0;
  width: 270px;
  z-index: 1;
  height: 12px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .fraction-wrapper {
    position: inherit;
    margin-top: 30px;
    bottom: auto;
  }
}
.fraction-wrapper #paginations span {
  font-size: 22px;
  font-size: 500;
  color: var(--tp-common-black);
}
.fraction-wrapper #paginations span:last-child {
  float: right;
}

#paginations {
  position: absolute;
  bottom: -7px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 1;
}

.shop-slider-progress-bar {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 1px;
  z-index: 11;
  background-color: var(--tp-border-1);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.shop-slider-progress-bar span {
  position: absolute;
  left: 0;
  top: -1px;
  height: 1px;
  width: 100%;
  background-color: var(--tp-common-black);
  transform: scaleX(1);
  transform-origin: left;
}

/*----------------------------------------*/
/*   3.2 Portfolio Style
/*----------------------------------------*/
.cst-portfolio-ptb {
  padding-bottom: 200px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cst-portfolio-ptb {
    padding-bottom: 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .cst-portfolio-ptb {
    padding-bottom: 40px;
  }
}
.cst-portfolio-bg {
  position: relative;
  border-radius: 32px;
  overflow: hidden;
}
.cst-portfolio-bg::after {
  position: absolute;
  content: "";
  right: 0;
  top: 20%;
  width: 435px;
  height: 435px;
  z-index: 0;
  border-radius: 435px;
  filter: blur(100px);
  background: linear-gradient(0deg, rgba(1, 15, 210, 0.32) 0%, rgba(1, 15, 210, 0.32) 100%);
}
.cst-portfolio-bg::before {
  /* position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  border-radius: 32px;
  content:"";
  background: url("../img/portfolio.jpg"); */
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .cst-portfolio-heading .cst-section-title {
    margin-bottom: 25px;
  }
}
.cst-portfolio-item {
  position: relative;
  z-index: 1;
  padding: 40px;
  border-radius: 30px;
  background-color: var(--tp-common-white);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .cst-portfolio-item {
    padding: 26px;
  }
}
.cst-portfolio-item:hover .cst-portfolio-item-thumb img {
  transform: scale(1.1);
}
.cst-portfolio-item-num {
  font-size: 28px;
  font-weight: 500;
  margin-bottom:15px;
  display: inline-block;
  font-family: var(--tp-ff-phudu);
  color: var(--tp-common-black-7);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .cst-portfolio-item-num {
    font-size: 26px;
  }
}
.cst-portfolio-item-thumb {
  overflow: hidden;
  margin-bottom: 20px;
  border-radius: 32px;
}
.cst-portfolio-item-thumb img {
  width: 100%;
  border-radius: 32px;
  transition: all 0.5s ease-in-out;
}
.cst-portfolio-item-title {
  font-size: 42px;
  font-weight: 500;
  margin-bottom: 22px;
  font-family: var(--tp-ff-phudu);
  color: var(--tp-common-black-7);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) {
  .cst-portfolio-item-title {
    font-size: 34px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .cst-portfolio-item-title {
    font-size: 28px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .cst-portfolio-item-title {
    font-size: 25px;
  }
  .cst-portfolio-item-title br {
    display: none;
  }
}
.cst-portfolio-item-categories span {
  font-size: 12px;
  font-weight: 600;
  padding: 0px 17px;
  margin-bottom: 5px;
  border-radius: 10px;
  display: inline-block;
  text-transform: uppercase;
  font-family: var(--tp-ff-inter);
  color: var(--tp-common-black-7);
  border: 1px solid rgba(5, 3, 18, 0.1);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .cst-portfolio-thumb {
    padding-top: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .cst-portfolio-thumb {
    padding-top: 40px;
  }
}
.cst-portfolio-thumb img {
  border-radius: 24px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .cnt-portfolio-ptb {
    padding-top: 100px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .cnt-portfolio-ptb {
    padding-top: 80px;
    padding-bottom: 60px;
  }
}
.cnt-portfolio-heading p {
  margin-bottom: 34px;
  color: rgba(5, 3, 18, 0.6);
  font-family: var(--tp-ff-inter);
  font-size: 18px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .cnt-portfolio-heading p br {
    display: none;
  }
}
.cnt-portfolio-video-wrapper {
  position: relative;
  width: 100%;
  height: 950px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .cnt-portfolio-video-wrapper {
    height: auto;
    padding-bottom: 60px;
  }
}
.cnt-portfolio-video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-size: cover;
  background-position: center center;
}
.cnt-portfolio-video-card {
  width: 630px;
  margin: 0 auto;
  margin-bottom: 60px;
  padding: 60px 50px;
  border-radius: 16px;
  display: inline-block;
  background-color: #F2F1EE;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cnt-portfolio-video-card {
    padding: 30px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .cnt-portfolio-video-card {
    padding: 20px;
    width: auto;
    margin: 0 20px;
    margin-bottom: 30px;
  }
}
.cnt-portfolio-video-sub {
  font-size: 16px;
  font-weight: 500;
  position: relative;
  margin-bottom: 8px;
  display: inline-block;
  text-transform: uppercase;
  color: var(--tp-common-black-7);
  font-family: var(--tp-ff-clash-medium);
}
.cnt-portfolio-video-sub::before {
  content: "";
  width: 4px;
  height: 4px;
  margin-right: 5px;
  border-radius: 50%;
  display: inline-block;
  transform: translateY(-3px);
  background-color: var(--tp-common-black-7);
}
.cnt-portfolio-video-title {
  font-size: 32px;
  font-weight: 500;
  margin-bottom: 22px;
  color: var(--tp-common-black-7);
  font-family: var(--tp-ff-clash-medium);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .cnt-portfolio-video-title {
    font-size: 28px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .cnt-portfolio-video-title {
    font-size: 22px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .cnt-portfolio-video-title br {
    display: none;
  }
}
.cnt-portfolio-video-thumb {
  width: 100%;
  margin-bottom: 25px;
  border-radius: 16px;
}
.cnt-portfolio-video-thumb img {
  width: 100%;
  border-radius: 16px;
}
.cnt-portfolio-video-text p {
  opacity: 0.6;
  margin-bottom: 0;
  color: var(--tp-common-black-7);
  font-family: var(--tp-ff-inter);
  font-size: 18px;
  line-height: 1.56;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .cnt-portfolio-video-text p br {
    display: none;
  }
}
.cnt-portfolio-banner img {
  margin-top: -150px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .cnt-portfolio-banner img {
    margin-top: -100px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .cnt-portfolio-banner img {
    margin-top: -20px;
  }
}

.des-project-banner {
  height: 800px;
  overflow: hidden;
}
.des-project-banner img {
  margin-top: -350px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .des-project-banner img {
    margin-top: -200px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .des-project-banner img {
    margin-top: -150px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .des-project-banner img {
    margin-top: -70px;
  }
}
@media (max-width: 574.98px) {
  .des-project-banner img {
    margin-top: -30px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .des-project-banner {
    height: 620px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .des-project-banner {
    height: 480px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .des-project-banner {
    height: 300px;
  }
}
@media (max-width: 574.98px) {
  .des-project-banner {
    height: 250px;
  }
}


/*----------------------------------------*/
/*  4.1 project css
/*----------------------------------------*/

.al-project-pg-area { padding:80px 0; }
.al-project-pg-area .services-head { margin-bottom:40px; }
.al-project-pg-area .services-title {  }
.al-project-pg-area .services-sub {   }
.al-project-pg-area .al-project-pg-text { padding-bottom:30px;  }


.al-project-seo-item {
  background: #0e3948;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  box-shadow: 0 20px 30px 0 rgba(3, 14, 18, 0.1);
  padding: 38px 50px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .al-project-seo-item {
    padding: 38px 35px;
  }
}
.al-project-seo-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.33;
  margin-bottom: 0;
  letter-spacing: -0.02em;
  color: var(--tp-common-white);
  font-family: var(--tp-ff-inter);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .al-project-seo-title {
    margin-bottom: 35px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .al-project-seo-title {
    font-size: 20px;
    margin-bottom: 35px;
  }
  .al-project-seo-title br {
    display: none;
  }
}
.al-project-seo-title a:hover {
  color: var(--tp-common-yellow);
}
.al-project-seo-title-box .al-section-subtitle.fs-12 {
  background-color: #0d3f52;
  color: var(--tp-common-white);
}
.al-project-seo-info h5 {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
  color: var(--tp-common-white);
  font-family: var(--tp-ff-inter);
}
.al-project-seo-info span {
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--tp-ff-inter);
}
.al-project-seo-content {
  padding-left: 50px;
  margin-left: 50px;
  position: relative;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .al-project-seo-content {
    margin-left: 0;
    padding-left: 0;
  }
}
.al-project-seo-content::after {
  top: 0;
  left: 0;
  width: 1px;
  height: 80px;
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, 0.14);
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .al-project-seo-content::after {
    display: none;
  }
}
.al-project-seo-btn a {
  height: 60px;
  width: 60px;
  line-height: 55px;
  text-align: center;
  border-radius: 50%;
  display: inline-block;
  color: var(--tp-common-white);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.al-project-seo-btn a:hover {
  color: var(--tp-common-black-1);
  border-color: var(--tp-common-yellow);
  background-color: var(--tp-common-yellow);
}

.al-project-archi-title-wrapper {
  margin-right: 260px;
  padding-bottom: 220px;
}
.al-project-archi-title-sm {
  font-size: 34px;
  line-height: 1;
  position: relative;
  z-index: 2;
}
@media (max-width: 574.98px) {
  .al-project-archi-title-sm {
    font-size: 22px;
  }
}
.al-project-archi-title-sm a:hover {
  color: var(--tp-theme-secondary);
}
.al-project-archi-meta h5 {
  font-size: 14px;
  text-decoration: underline;
  color: var(--tp-grey-1);
  font-family: var(--tp-ff-inter);
}
.al-project-archi-icon {
  padding-left: 450px;
  position: relative;
  transform: translateY(-15px);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .al-project-archi-icon {
    padding-left: 0;
    float: right;
  }
}
@media (max-width: 574.98px) {
  .al-project-archi-icon {
    padding-top: 12px;
  }
}
.al-project-archi-icon::before {
  position: absolute;
  content: "";
  height: 1px;
  width: 450px;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  background-color: #cecac4;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .al-project-archi-icon::before {
    left: inherit;
    right: 59px;
    width: 648%;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .al-project-archi-icon::before {
    display: none;
  }
}
.al-project-archi-icon a {
  border: 1px solid #cecac4;
  width: 60px;
  height: 60px;
  display: block;
  border-radius: 50%;
  text-align: center;
  color: #030303;
  transition: all 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.al-project-archi-icon a .tp-arrow-angle svg {
  width: 13px;
  height: 13px;
}
.al-project-archi-icon a:hover {
  background-color: var(--tp-theme-secondary);
  color: var(--tp-common-white);
  border-color: var(--tp-theme-secondary);
}
.al-project-archi-content span {
  line-height: 1;
  transform: translateY(-30px);
  display: inline-block;
  font-family: var(--tp-ff-inter);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .al-project-archi-content span {
    margin-top: 18px;
    transform: inherit;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .al-project-archi-content span {
    margin-top: 5px;
  }
}
.al-project-archi-content-2 {
  padding-left: 370px;
  padding-top: 40px;
}

.al-project-pg-text span {
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  text-transform: uppercase;
  font-family: var(--tp-ff-poppins); 
}
.al-project-pg-title, .al-project-pg-title a {
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  color:#000;
  font-family: var(--tp-ff-poppins);
}
.al-project-pg-wrapper {
  margin: 0px -15px;
}
.al-project-pg-inner-wrap {
  width: 100%;
  display: flex;
  grid-area: list;
  box-sizing: border-box;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .al-project-pg-inner-wrap {
    flex-wrap: wrap;
  }
}
.al-project-pg-item {
  width: 30%;
  height: 615px;
  display: block;
  position: relative !important;
  left: 0 !important;
  top: 0 !important;
  margin: 0px 15px;
  transition: width 0.6s cubic-bezier(0.38, 0.005, 0.215, 1);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .al-project-pg-item {
    width: 100%;
    margin-bottom: 30px;
  }
}
.al-project-pg-item:hover {
  width: 80%;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .al-project-pg-item:hover {
    width: 100%;
  }
}
.al-project-pg-thumb {
  height: 100%;
  width: 100%;
  margin-bottom: 30px;
}
.al-project-pg-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.al-project-pg-2-year span {
  color: var(--tp-common-cream);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  margin-top: 15px;
  margin-right: 130px;
  display: inline-block;
  transition: 0.3s;
  text-transform: uppercase;
  font-family: var(--tp-ff-poppins);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .al-project-pg-2-year span {
    margin-right: 30px;
  }
}
.al-project-pg-2-title {
  font-size: 46px;
  font-weight: 400;
  line-height: 1;
  color: var(--tp-common-cream);
  letter-spacing: -1.84px;
  font-family: var(--tp-ff-playfair);
  transform: 0.3s;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .al-project-pg-2-title {
    font-size: 30px;
  }
}
.al-project-pg-2-title-box span {
  color: var(--tp-common-cream);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  font-family: var(--tp-ff-poppins);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .al-project-pg-2-title-box span {
    font-size: 11px;
  }
}
.al-project-pg-2-link span {
  color: var(--tp-common-cream);
  display: inline-block;
  transition: 0.3s;
}
.al-project-pg-2-item {
  border-bottom: 1px solid rgba(183, 171, 152, 0.14);
  padding: 40px 0;
  position: relative;
}
.al-project-pg-2-item::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 1px;
  background-color: var(--tp-common-pink);
  content: "";
  transition: 0.4s;
}
.al-project-pg-2-item:first-child {
  border-top: 1px solid rgba(183, 171, 152, 0.14);
}
.al-project-pg-2-item:hover .al-project-pg-2-link span {
  transform: rotate(-45deg);
}
.al-project-pg-2-item:hover::after {
  width: 100%;
}
.al-project-pg-2-item.active .al-project-pg-2-title {
  color: var(--tp-common-black-7);
}
.al-project-pg-2-item.active .al-project-pg-2-year span {
  color: var(--tp-common-black-7);
}
.al-project-pg-2-item.active .al-project-pg-2-title-box span {
  color: var(--tp-common-black-7);
}
.al-project-pg-2-item.active .al-project-pg-2-link span {
  color: var(--tp-common-black-7);
}

.al-project-pg-2-item .tp-reveal-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 370px;
  height: 470px;
  opacity: 0;
  margin: -150px 0 0 -150px;
  overflow: hidden;
  pointer-events: none;
  z-index: 99;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-transition: opacity 0.3s, transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: opacity 0.3s, transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: opacity 0.3s, transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: opacity 0.3s, transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 0.3s, transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .al-project-pg-2-item .tp-reveal-bg {
    height: 240px;
    width: 240px;
  }
}
.al-project-pg-2-item:hover .tp-reveal-bg {
  opacity: 1;
}

.al-video-pg-wrap {
  line-height: 0;
}
.al-video-pg-wrap video {
  height: 800px;
  width: 100%;
  object-fit: cover;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .al-video-pg-wrap video {
    height: 400px;
  }
}

.tp-testimonial-area { overflow-x:hidden !important;  }
.tp-testimonial-area .cst-section-title { font-size:80px; }

.tp-testimonial-it-item p.tp-ff-inter { font-size:16px; margin-top:15px; }
.tp-testimonial-it-author { gap:15px; margin-top:20px; }
.tp-testimonial-it-author img { width:60px; }
.tp-testimonial-it-author div h4.tp-ff-inter { font-size:15px; margin-bottom:0px !important; }
.tp-testimonial-it-author div span { font-size:12px; margin-bottom:0px !important; }

.tp-testimonial-it-slider { margin-top:-86px; }


 
body {
  --sb-track-color: #fff;
  --sb-thumb-color: #eec51b;
  --sb-size: 4px;
}

body::-webkit-scrollbar {
  width: var(--sb-size)
}

body::-webkit-scrollbar-track {
  background: var(--sb-track-color);
  border-radius: 3px;
}

body::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
  border-radius: 3px;
  
}

@supports not selector(::-webkit-scrollbar) {
  body {
    scrollbar-color: var(--sb-thumb-color)
                     var(--sb-track-color);
  }
}





.footer { overflow:hidden; }
.footer { padding:80px 0 15px 0; background-color:#000; }
.footer p { color:#fff; }


.footer .col-xl-3 { }
.footer .col-xl-3 h4 { color:#fff; font-size:20px; }
.footer .col-xl-3 ul {  }
.footer .col-xl-3 ul li { line-height: normal }
.footer .col-xl-3 ul li a { color:#fff; font-size:14px; display:block; padding:4px 0px; }

.footer-social {  }
.footer-social ul { display:flex; gap:15px;  }
.footer-social ul li { width:30px; }
.footer-social ul li a { display:block; width:35px; height:35px; text-align:center; padding-top:6px; border-radius:50%; background-color:rgb(from var(--white) r g b / 10%); border:0; color:#fff; }
.footer-social a { color:#fff; }



.footer-contact li { color:#fff; display:flex;  }
.footer-contact li div { padding:0 15px; }
.footer-contact li div i { color:#f9f6c1; }
.footer-contact p { color:#fff; margin-bottom:0px; }
.footer-contact h4 { font-size:16px; }
.footer-contact a { color:#fff; }
.footer .col-xl-3 .contact-content h4 { font-size:16px; }


.footer-copyright { padding-top:30px; } 
.footer-copyright .copyright-menu {  } 
.footer-copyright .copyright-menu ul { display:flex; justify-content:end; gap:25px; } 
.footer-copyright .copyright-menu li {  } 
.footer-copyright .copyright-menu li a { color:#fff; font-size:14px;   } 



@media (max-width:997px) {

.footer-menu-container { padding-top:30px; }	
.footer-contact { display:flex; }
.footer-contact li:nth-child(2),
.footer-contact li:nth-child(3) { width:35%; }
.footer-contact li div { padding:0 10px; }

}



@media (max-width:767px) {

.footer-menu-container { padding-top:30px; }	
.footer-contact { display:block; }
.footer-contact li:nth-child(2),
.footer-contact li:nth-child(3) { width:100%; }
.footer-contact li div { padding:0 10px; }

}
















@media (min-width:997px) {

 


}	

@media (max-width:997px) {
	

 

}	



/* ===== Responsive ===== */


@media (min-width: 1200px) {
	
.container, .container-lg,
.container-md, .container-sm, .container-xl { max-width: 1140px; }

}

@media (min-width: 1300px) {
	
.container, .container-lg,
.container-md, .container-sm, .container-xl { max-width: 1240px; }

}

@media (min-width: 1400px) {
	
.container, .container-lg,
.container-md, .container-sm,
.container-xl, .container-xxl { max-width: 1320px; }

}

@media (max-width:1450px) {

body { overflow-x:hidden !important;  }
.hero-section { /* height:auto; min-height:auto; */ }

}	


@media (max-width:1300px) { 

 
}

@media (max-width:1100px) { 
  
.tp-btn-lg { padding:19px 13px; }
.tp-menu-bar { margin-left:25px; }

}


@media (max-width: 995px) {
body { overflow-x:hidden !important;  } 
.cst-section-title { font-size:40px;}
.tp-testimonial-area .cst-section-title { font-size:50px; }
.tp-testimonial-area .cst-section-title  br { display:none; }


.hero-section { /* height:auto !important; min-height:auto !important; */ }
#about-us, .cst-portfolio-bg, .al-project-pg-area { padding:50px 0; }

.cst-portfolio-heading br { display:none; }
.cst-section-subtitle.mt-50 { margin-top:0px !Important; }

.al-project-pg-area .al-project-pg-text { padding-bottom:10px; }
.al-project-pg-item { height:350px; margin-bottom:70px; } 
.al-project-pg-thumb { margin-bottom:10px; }
.al-project-pg-area { padding-bottom:0px; }

.cst-portfolio-item { margin-bottom:20px !Important; }
.cst-portfolio-item-thumb { margin-bottom:0px; }

.services-head {  }
.al-project-pg-area .services-head { display:block; margin-bottom:10px !Important; }

.tp-testimonial-it-slider { margin-top:-59px; }

#final-cta { padding:50px 6vw; }



}

@media (max-width:800px) {



	 
}	

@media (max-width:768px) {

.container, .container-sm { max-width:90%; }
.hero-section { height:auto; min-height:auto; }

html, body,
.tp-testimonial-area { overflow-x:hidden !important; }

.footer-copyright,
.footer-copyright .copyright-menu { text-align:center; }
.footer-copyright .copyright-menu ul { justify-content:center; }

}	

@media (max-width:600px) {

.container, .container-sm { max-width:98%; }	 
	
}	

@media (max-width:480px) {

.col-xs-6 { flex:0 0 auto; width:50%; } 	 


footer .col-xs-6 { padding:20px 15px; }
	
}