@import url(https://fonts.googleapis.com/css2?family=Alike+Angular&family=Allura&family=Dancing+Script:wght@400..700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap);

:root{
    --header:#212121;
    --heading:#51b5be;
    --orange:#ff7900;
    --gray:#f5f5f5;
}

.banner-cont,
.banner-wrap,
.banners-overlay {
    height: 100%;
    width: 100%;
}
.banner-text1,
.banner-text2 {
    font-weight: 700;
    text-transform: uppercase;
}
.banner-text1,
.banner-text2,
.banner-text4 {
    text-transform: uppercase;
}
.aspect-img,
.ban-nav-btns,
.blog-box,
.card-img,
.color-change,
.dropdown-item,
.nav-item,
.nav-tabs .tabs,
.nxt-btn,
.pre-btn {
    transition: 0.3s ease-in-out;
}
.breadcrumb-item a,
.links,
.no-decoration {
    text-decoration: none;
}
.blog-text a,
.blog-text p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
}
.blog-img-wrap,
.blog-text a,
.blog-text p {
    overflow: hidden;
}
.aspect-img,
.blog-img-wrap img,
.card-img {
    transform: scale(1.1);
}
.about-banner,
.about-img-wrap img,
.aspect-img,
.banner-wrap img,
.blog-images,
.certificate-img-wrap {
    object-fit: cover;
    object-position: center;
}
* {
    margin: 0 !important;
    padding: 0;
    text-decoration: none !important;
    box-sizing: border-box;
    scroll-behavior: smooth;
}
:root {
    --grey: rgb(46 43 43 / 92%);
    --light-black: #212121;
    --orange: #fc721e;
    --second-color: #51b5be;
    --font1: "Inter", sans-serif;
    --font2: "Lato", serif;
    --overly: rgba(0, 0, 0, 0.663);
}
body {
    font-family: var(--font1);
}
.logo {
    width: 195px;
}
.nav-item {
    border-radius: 2px;
    color: #000;
}
.nav-item:hover {
    background: var(--second-color);
    color: #fff !important;
}
.solutions::after,
.solutions::before,
.underline::after,
.underline::before {
    content: "";
    width: 62px;
    height: 1px;
    background: var(--orange);
}
.cards-wrap:hover h3,
.nav-item:hover .nav-link,
.side-menu:hover a {
    color: #fff;
}
.dropdown-item:focus,
.dropdown-item:hover {
    color: #fff !important;
    background-color: var(--orange);
}
.no-decoration {
    color: #fff;
    opacity: 0.8;
    font-size: 13px;
}
.banners:hover .nxt-btn,
.banners:hover .pre-btn,
.no-decoration:hover {
    opacity: 1;
}
.shade {
    background: var(--light-black);
}
.sidebar,
.snowflake {
    background: #f5f5f5;
}
.banners {
    display: flex;
    justify-content: center;
}
.banner-wrap {
    position: relative;
    z-index: 1;
}
.banner-wrap img {
    width: 100%;
    aspect-ratio: 16/9;
}
.banners-overlay {
    position: absolute;
    top: 0;
    background: var(--overly);
    z-index: 2;
}
.banner-cont {
    position: absolute;
    top: 0;
    z-index: 3;
}
.ban-nav-btns {
    position: absolute;
    width: 98%;
    top: 50%;
    z-index: 4;
}
.common-cta,
.solutions {
    position: relative;
}
.ban-nav-btns svg:hover,
.navigation-btns .next svg:hover,
.navigation-btns .prev svg:hover {
    fill: var(--orange);
}
.nxt-btn,
.pre-btn {
    opacity: 0;
}
.banner-text1 {
    font-size: 36px;
}
.banner-text2 {
    font-size: 50px;
}
.banner-text3 {
    font-size: 24px;
    font-weight: 400;
}
.banner-text4 {
    font-size: 66px;
    font-weight: 700;
}
.banner-btns {
    width: 50%;
    z-index: 3;
}
.con-box {
    background-color: #898989;
}
.desc-justify {
    text-align: justify;
    font-family: var(--font2);
}
.abt-fab img {
    width: 60px;
    aspect-ratio: 1/1;
}
.solutions::after {
    position: absolute;
    bottom: 0;
}
.solutions::before {
    position: absolute;
    bottom: 3px;
}
.card-img {
    aspect-ratio: 16/9;
}
.aspect-img,
.gallery-items {
    aspect-ratio: 1/1;
    width: 100%;
}
.aspect-img:hover,
.blog-box:hover .blog-img-wrap img,
.casement-windows-wrap:hover .casement-windows-img,
.service-card:hover .card-img {
    transform: scale(1);
}
.content{
    padding:10px 15px 30px 15px;
}
.line-limit{
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.read-more-button{
    background: #fc721e;
    color: white;
    font-size: 15px;
    font-weight: 500;
    user-select: none;
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 5px 5px 20px;
    border-radius: 30px;
}
.read-more-button .icon_span {
    width: 30px;
    height: 30px;
    background: white;
    color: #fc721e;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    transition: 0.2s all ease-in-out;
}
.read-more-button:hover .icon_span {
    transform: rotate(45deg);
}
.cards-wrap,
.side-menu {
    background: #fff;
    transition: 0.3s ease-in-out;
}
.text-box p {
    font-size: 15px;
    font-weight: 400;
    font-family: Lato;
    color: var(--grey);
}
.color-change:hover,
.orange-text,
.text-box h6:hover {
    color: var(--orange);
}
.text-box h6 {
    cursor: pointer;
}
.title-orange {
    color: #000000 !important;
}
.links {
    color: inherit;
}
.text-format-p,
ul li {
    font-family: var(--font2);
    color: var(--grey);
}
.underline::after {
    position: absolute;
    left: 48%;
    bottom: 0;
}
.underline::before {
    position: absolute;
    bottom: 2px;
    left: 48%;
}
.nav-tabs .tabs {
    border: none !important;
    color: var(--light-black) !important;
    font-weight: 500;
    opacity: 1;
    transform: translateY(0);
}
.nav-tabs .tabs.active,
.tabs:focus,
.tabs:hover {
    border-bottom: none !important;
    color: #000 !important;
    font-weight: 600;
}
.text-format-p {
    font-size: 18px;
    line-height: 1.8em !important;
}
.text-format-p h1{font-size:2rem}
.text-format-p h2{font-size:1.7rem}
.text-format-p h3{font-size:1.45rem}
.text-format-p h4{font-size:1.25rem}
.text-format-p h5,.text-format-p h6{font-size:1.12rem}
.text-format-p li{font-size:18px}
.text-format-p td,.text-format-p th{font-size:18px}
.common-btn,
.common-btn2 {
    padding: 10px 30px;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    font-family: Montserrat;
    white-space: nowrap;
    transition: 0.3s ease-in-out;
}
.common-cta {
    width: 100%;
    height: 55vh;
    background-image: url(../images/cta-all.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    z-index: 0;
}
.cta-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--overly);
    z-index: 1;
}
.cta-content {
    position: relative;
    z-index: 2 !important;
}
.common-btn {
    background: #000;
    border: 2px solid #56c5d0;
    border-radius: 3px;
}
.common-btn:hover {
    background-color: var(--light-black);
    border-color: var(--light-black);
}
.cards-wrap:hover,
.sidemenu-item.active,
.submit-btn:hover {
    background: var(--orange);
}
.common-btn2 {
    background: var(--light-black);
    border: none;
    border-radius: 3px;
}
.common-btn2:hover {
    background-color: var(--orange);
}
.testimonial {
    width: 100%;
    height: 65vh;
    background-image: url(../images/testimonials.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: relative;
    z-index: 0;
}
.testimonial-cont {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}
.text-font p {
    font-family: var(--font2);
    font-size: 20px;
}
.navigation-btns {
    display: block;
}
.navigation-btns .next svg,
.navigation-btns .prev svg {
    background-color: transparent;
    transition: 0.3s ease-in-out;
}
.img-wrap img {
    width: 80% !important;
    aspect-ratio: 16/9;
    object-fit: cover;
    border: 1px solid #f5f5f5;
}
.border-bottom-cus {
    border-bottom: 1px solid rgba(243, 242, 242, 0.1);
    list-style: none;
}
.about-banner {
    width: 100%;
}
.about-banner-overlay {
    position: absolute;
    width: 100%;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.abt-headings {
    font-size: 36px;
}
.breadcrumb-item a {
    color: #898989;
    font-weight: 500;
}
.breadcrumb-item:not(.active) a:hover {
    color: #fc721e;
}
.breadcrumb-item.active a {
    color: inherit;
    cursor: default;
}
.breadcrumb-item + .breadcrumb-item::before {
    float: left;
    padding-right: var(--bs-breadcrumb-item-padding-x);
    color: var(--orange);
    content: "\276F";
}
.about-img-wrap img {
    width: 100%;
    aspect-ratio: 1/1;
}
.blog-img-wrap img,
.casement-windows-img {
    aspect-ratio: 16/9;
    transition: 0.3s ease-in-out;
}
.certificate-banner-overlay {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--overly);
    display: flex;
    justify-content: center;
    align-items: center;
}
.certificate-img-wrap {
    width: 50%;
}
.gallery-banner {
    width: 100%;
    height: 33vh;
    object-fit: cover;
}
.we-are-best {
    width: 100%;
    background-image: url(../images/why-we-best.webp);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.cards-wrap:hover .icon-box img {
    filter: invert(1);
}
.icon-box img {
    width: 80px;
}
.cus-padd {
    padding-left: 0.13rem !important;
    padding-right: 0.13rem !important;
}
.blog-box:hover {
    box-shadow: 0 0 10px rgb(29 27 27);
}
.blog-text a {
    -webkit-line-clamp: 1;
    transition: 0.3s ease-in-out;
}
.blog-text p {
    -webkit-line-clamp: 3;
}
.blog-text a:hover,
.read-more:hover {
    color: var(--orange) !important;
}
.blog-img-wrap img {
    width: 100%;
    object-fit: cover;
}
.blog-text {
    background-color: #fff;
    height: 15rem;
    transition: 0.3s ease-in-out;
}
.submit-btn {
    width: 100%;
    background-color: var(--light-black);
    border: none;
    color: #fff;
    transition: 0.3s ease-in-out;
}
.submit-btn:hover {
    color: #fff;
}
.form-control:focus,
.form-select:focus {
    border: 2px solid var(--orange) !important;
    box-shadow: none !important;
}
.casement-windows-img {
    width: 100%;
    transform: scale(1.2);
}
.product-card-desc {
    border-bottom: 2px solid #fff;
    transition: 0.3s ease-in-out;
}
.product-card-desc:hover {
    border-color: var(--orange);
}
.sidemenu-item {
    background: 0 0;
    color: #000;
}
.sidemenu-item.active {
    color: #fff;
}
.sidemenu-item.active svg {
    fill: white;
    stroke: white;
}
.blog-images {
    width: 100%;
}
.accordion-button:not(.collapsed) {
    background: #fff !important;
    color: #000;
}
.accordion-button:focus {
    box-shadow: none !important;
}
.accordion-item {
    border: none !important;
}
.swiper-wrapper {
    height: auto !important;
}
.side-menu:hover {
    background: #fc721e;
}
.side-menu a {
    color: #000;
    font-weight: 500;
}
ul li {
    font-size: 16px;
}
.select-city {
    width: 50% !important;
}
.img_outer_wrap{
    padding:12px;
}

        /* Outer canvas */
.testimonial-canvas{
  background:#eaf6f7;
  border-radius:24px;
  padding:56px 24px 64px;
  overflow:hidden;
  position:relative;
  box-shadow: 0 10px 40px rgba(0,0,0,.08) inset;
}

/* subtle glow */
.testimonial-canvas::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(800px 400px at 50% 0,
              rgba(81,181,190,.18), transparent 60%);
  pointer-events:none;
}

/* Top label pill */
.ts-pill{
  position:absolute; left:50%; top:18px; transform:translateX(-50%);
  padding:6px 16px; font-weight:600; font-size:14px;
  color:#fc721e;
  background:rgba(81,181,190,.22);
  border:1px solid rgba(81,181,190,.28);
  border-radius:999px; backdrop-filter: blur(4px);
  text-wrap:nowrap;
}

/* Card inside each slide */
.ts-card{
  width:100%;
  min-height: 260px;
  background: linear-gradient(135deg,#ffffff 0%, #e4f4f5 60%, #cbecef 100%);
  border-radius:16px;
  border:1px solid rgba(0,0,0,.05);
  padding:18px;
  gap:18px;
  box-shadow: 0 6px 22px rgba(0,0,0,.08);
}

/* left column */
.ts-left{
  flex: 0 0 42%;
  background: radial-gradient(120px 120px at 30% 40%, rgba(81,181,190,.18), transparent 60%);
  border-radius:12px;
  padding:18px;
  color:#35696d;
  position:relative;
}
.ts-brand-name{ color:#176b73; font-weight:600; letter-spacing:.2px; }
.ts-dot{
  width:10px; height:10px; border-radius:50%;
  background:#fc721e; display:inline-block;
}
.ts-subtle-arrows{
  height:84px; margin-top:16px;
  background:
    linear-gradient(90deg, transparent 40%, rgba(81,181,190,.3) 45%, transparent 50%) center/60% 2px no-repeat;
  opacity:.5;
}
.ts-avatar{ width:44px; height:44px; border-radius:50%; object-fit:cover; }
.ts-author{ color:#0d3b3e; font-weight:600; }
.ts-role{ color:#4b858a; }

/* right quote panel */
.ts-quote{
  flex: 1 1 auto;
  background:#ffffff;
  border-radius:12px;
  padding:22px;
  border:1px solid rgba(0,0,0,.06);
  color:#35696d;
}
.ts-stars{ letter-spacing:3px; color:#fc721e; font-size:18px; margin-bottom:10px; }
.ts-quote p{ color:#176b73; line-height:1.6; }

/* CTA button */
.ts-cta{
  background:#fc721e;
  border:0; color:#ffffff; font-weight:600;
  padding:8px 14px; border-radius:999px;
  box-shadow: 0 3px 10px rgba(252,114,30,.25);
}
.ts-cta:hover{
  background:#e26217;
}

/* arrows + bullets */
.ts-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  background:#51b5be;
  color:#fff; display:grid; place-items:center;
  border:1px solid rgba(0,0,0,.05);
  cursor:pointer; z-index:3; transition:.2s ease;
  box-shadow: 0 4px 15px rgba(81,181,190,.25);
}
.ts-nav:hover{ background:#3fa6b0; }
.ts-nav.prev{ left:12px; }
.ts-nav.next{ right:12px; }

.ts-bullets{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
}
.ts-bullets .swiper-pagination-bullet{
  background:#fc721e; opacity:.35; width:8px; height:8px;
}
.ts-bullets .swiper-pagination-bullet-active{
  opacity:1; width:10px; height:10px;
}

/* Responsive */
@media (max-width: 992px){
  .testimonial-canvas{ padding:52px 16px 64px; }
  .ts-card{ flex-direction:column; }
  .ts-left{ flex: 1 0 auto; }
  .ts-nav{ top:auto; bottom:14px; }
  .ts-nav.prev{ left:14px; }
  .ts-nav.next{ right:14px; }
}

/* ------------------------------------------------------------------
   Card overlap fix
   Problem: .blog-img-wrap ki apni koi height nahi thi aur andar ka <img>
   transform: scale(1.1) ki wajah se wrap se 29px chauda / 16px lamba tha.
   Image missing ho to wrap sikud jaata tha, alt text card ke bahar nikal
   kar doosre content par chadh jaata tha, aur card ki height bhi alag
   ho jaati thi (312px vs 402px) jisse grid tedha dikhta tha.
   Fix: wrap ko fix aspect ratio do, img usay poora bhare, aur cards
   ek hi height ke rahe. Sahi image wale cards bilkul waise hi dikhte hai.
   ------------------------------------------------------------------ */
.blog-img-wrap,
.casement-windows-wrap .d-flex.overflow-hidden {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.blog-img-wrap img,
.casement-windows-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* saare cards ek hi height ke — chhoti/missing image se grid tedha na ho */
.blog-box,
.casement-windows-wrap {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.blog-box > a {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* .blog-text ki height 15rem fix thi: lamba title neeche nikal jaata tha */
.blog-text {
    height: auto;
    min-height: 15rem;
    flex: 1 1 auto;
}

/* title 3 line se zyada na ho (CSS me clamp sirf .blog-text a par tha,
   markup me title <h5> hai) */
.blog-text h5 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

/* Jis blog/product ki image set nahi hai uska <img> src="" ke saath render hota
   hai. Khali src par browser alt text ko poori chaudai me dikha deta hai, jo
   card ke bahar nikal kar doosre text par chadh jaata hai. Aise img ko chhupa
   do — wrap ka aspect-ratio box apni jagah bana rehta hai. */
img[src=""],
img:not([src]) {
    display: none;
}

/* Product card: ek line wale aur do line wale naam se row tedhi ho jaati thi.
   Title area ko ek jaisi jagah do, taaki har row ke card barabar rahe. */
.product-card-desc {
    flex: 1 1 auto;
    justify-content: center;
    min-height: 4.5rem;
}

/* Blog/product ke content me padi image apni poori natural width le leti thi
   (ek blog par 1672px), jisse pura page left-right scroll hone lagta tha.
   Koi bhi content image apne column se chaudi na ho. */
img {
    max-width: 100%;
}

.text-format-p img,
.col-lg-8 > img,
.blog-text img {
    height: auto;
}

/* editor se aayi tables / pre bhi page ko chauda na karein */
.text-format-p table,
.text-format-p pre {
    max-width: 100%;
    overflow-x: auto;
    display: block;
}