One Hat Cyber Team

View File Name : index.php

<!DOCTYPE html>
<html lang="en-US">
  
<!-- Mirrored from themes.potenzaglobalsolutions.com/html/interium/index-03.html by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 15 Apr 2025 12:35:58 GMT -->
<head>
    <meta charset="utf-8">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="potenzaglobalsolutions.com">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title> GoCosy -Home </title>
    <!-- Favicon -->
    <link rel="shortcut icon" href="images/Artboard_1-removebg-preview.png">
    <!-- Google Font -->
    <link href="https://fonts.googleapis.com/css2?family=Bona+Nova:ital,wght@0,400;0,700;1,400&amp;family=Jost:ital,wght@0,100..900;1,100..900&amp;display=swap" rel="stylesheet">
    <!-- CSS Global Compulsory (Do not remove)-->
    <link rel="stylesheet" href="css/font-awesome/all.min.css">
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap/bootstrap-icons.min.css">
    <!-- Page CSS Implementing Plugins (Remove the plugin CSS here if site does not use that feature)--> 
    <link rel="stylesheet" href="css/owl-carousel/owl.carousel.min.css">
    <link rel="stylesheet" href="css/swiper/swiper.min.css">
    <link rel="stylesheet" href="css/animate/animate.min.css">
    <link rel="stylesheet" href="css/pannellum/pannellum.css">
    <link rel="stylesheet" href="css/magnific-popup/magnific-popup.css">
    <link rel="stylesheet" href="css/select2/select2.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" />
    <!-- Template Style -->
    <link rel="stylesheet" href="css/styles.css">
<!-- Latest compiled and minified standalone viewer -->
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.css">

    <style>

#vibes .infobox-sub-title{
    height:50px;
}

#vibes .infobox-title{
    height:60px;
    margin-bottom:80px;
        font-size: 15px;
}

#blog  .blog-post blog-style-2
{
    height:300px;
}

@media (max-width: 767px) {
  .before-after-container .before-after-box .before-after-slider-wrapper .before-after-wrapper-overlay .before-after-figure .before-bg {
    height: 500px; /* or a specific value like 200px */
    width: 100%;
    object-fit: contain !important; /* Ensures it fills the container without distortion */
    display: block;
  }
  
  
.before-after-thumb {
  background: none !important;
  width: 0;
  height: 100%;
  border: none;
  box-shadow: none;
  pointer-events: auto; /* keeps it draggable */
}


#round{
    height:223px;
    width:400px;
}

/* Base styles for larger screens */
.section-title {
  text-align: center;
  padding: 40px 0;
}

.client-logo-slider .item img {
    max-height: 80px;
    object-fit: contain;
  }
.section-title .title {
    font-size: 37px;
    line-height: 39px;
    font-weight: normal;
    font-family: "Bona Nova", serif;
    text-transform: capitalize;
    color: #262626;
    word-spacing: 7px;
    position: relative;
    z-index: 2;
    display: inline-block;
     margin-right: 20px;
}
.sub-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #555;
}


.client-logo-slider .item img {
    max-height: 80px;
    object-fit: contain;
  }

.title-description {
  font-size: 1.1rem;
  margin-top: 20px;
}

.title-description .btn {
  margin-top: 20px;
  font-size: 1rem;
  padding: 10px 20px;
}

/* Mobile styles */
@media (max-width: 768px) {
  .section-title {
    padding: 20px;
  }

  .sub-title {
    font-size: 1rem;
  }

  .title {
    font-size: 2rem; /* Adjust title size for smaller screens */
  }

  .title .word {
    display: inline-block;
    font-size: 1.5rem; /* Reduce font size of words */
  }

  .title-description {
    font-size: 1rem; /* Smaller description text */
  }

  .title-description .btn {
    padding: 8px 15px;
    font-size: 0.9rem;
  }
}

/* Small mobile screens */
@media (max-width: 480px) {
  .section-title {
    padding: 10px;
  }

  .sub-title {
    font-size: 0.9rem;
  }

  .title {
    font-size: 1.6rem; /* Further reduce title size */
  }

  .title-description {
    font-size: 0.9rem; /* Further reduce description text */
  }

  .title-description .btn {
    font-size: 0.8rem; /* Smaller button text */
  }
}

.client-logos-section .client-logos .item img {
    height: 147px;
    width: 171px;

}
      .before-after-container {
  position: relative;
  overflow: hidden;
}

.before-after-slider-wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
}


.after-bg-box {
  position: relative;
  width: 100%;
  height: auto;
}

.before-after-figure {
  position: relative;
}

.before-after-wrapper-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%; /* This will be updated via JS */
  height: 100%;
  overflow: hidden;
  z-index: 2;
}

.before-after-range {
  position: absolute;
  bottom: -20px;
  left: 0;
  width: 100%;
  z-index: 3;
}

.before-after-thumb {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  background: #000;
  z-index: 4;
  transform: translateX(-50%);
}

.before-after-lebal {
  position: absolute;
  top: 10px;
  padding: 4px 10px;
  background: #000;
  color: #fff;
  font-size: 14px;
  z-index: 5;
  border-radius: 3px;
}

.before-after-lebal-before {
  left: 10px;
}

.before-after-lebal-after {
  right: 10px;
}




.client-logo-slider .owl-item {
      display: flex;
      justify-content: center;
      align-items: center;
    }

  
.card {
    width: 157px;
    height: 100px;
      padding: 10px;
      text-align: center;
      border-radius: 10px;
      background-color: #fff;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s, box-shadow 0.3s ease;
    }

    .card-icon {
      font-size: 24px;
      margin-bottom: 10px;
      color: #333;
    }



   /* Default styles for larger screens */
.img-fluid.rounded.img {
  height: 400px;
  object-fit: cover;
  width: 100%;  /* Ensure it takes full width of its container */
}

/* Mobile styles for screens less than 768px */
@media (max-width: 768px) {
  .img-fluid.rounded.img {
    height: 300px; /* Adjust height for mobile devices */
  }
}

/* For very small screens (below 480px) */
@media (max-width: 480px) {
  .img-fluid.rounded.img {
    height: 250px; /* Further reduce height for smaller screens */
  }
}


    .card-image img {
      max-width: 100%;
      height: auto;
    }

    .card:hover {
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
      transform: scale(1.05);
    }


    .infobox.infobox-style-01 .infobox-title {
    font-size: 14px;
    line-height: 36px;
    font-weight: normal;
    margin-bottom: 22px;
}

/* 1) Ensure the banner always has height via aspect‑ratio (modern browsers) */
.banner.banner-01 {
  position: relative;
  width: 100%;
  background-image: url('about1/interior design.jpg');
  background-repeat: no-repeat;
 
  background-position: center center;
  /* give it a 16:9 aspect ratio; you can tweak to taste */
  aspect-ratio: 16 / 9;
}

/* 2) Fallback for browsers that don’t support aspect‑ratio */
@supports not (aspect-ratio: 16/9) {
  .banner.banner-01 {
    /* e.g. 56.25% = 9/16, gives same 16:9 box */
    padding-top: 56.25%;
  }
}

/* 3) Make your overlay container fill the banner */
.banner.banner-01 .light-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

/* 4) Base styles for your lights */
.banner.banner-01 .light-img img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 5) Mobile tweaks */
@media only screen and (max-width: 767px) {
  /* if you want a taller banner on small screens, override the aspect ratio */
  .banner.banner-01 {
    aspect-ratio: auto;
    min-height: 200px;   /* pick a height that looks good */
  }

  /* reposition and shrink the overlays */
  .banner.banner-01 .light-01 {
    position: absolute;
    width: 30%;
    top: 5%;
    left: 5%;
  }
  .banner.banner-01 .light-02 {
    position: absolute;
    width: 30%;
    bottom: 5%;
    right: 5%;
  }
}

.before-after-slider {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.before-after-thumb {
  position: absolute;
  top: 0;
  left: 50%;
  width: 20px;
  height: 100%;
  background-color: #fff;
  cursor: pointer;
  z-index: 2;
  transition: left 0.2s ease; /* Smooth transition for thumb movement */
}

.before-after-wrapper-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
}

.before-after-figure {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}



.before-after-figure-overlay {
  clip: rect(0, 50%, 100%, 0); /* Clip the before image initially */
  transition: clip 0.2s ease;  /* Smooth transition for before/after switch */
}


@media (max-width: 767px) {
  .before-bg img,
  .after-bg img {
   
    height: 350px;
  
  }

}

@media (max-width: 767.98px) {
  .infobox {
    text-align: center !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .infobox .infobox-icon {
    margin-bottom: 15px;
  }
}



.btn {
    font-size: 11px;
    line-height: 28px;
    font-weight: 400;
    font-family: "Jost", sans-serif;
    text-transform: uppercase;
    color: #ffffff;
    padding: 7px 38px;
    margin-right: 14px;
    background-color: #93c624;
    border: 1px solid #93c624;
    border-radius: 0;
    transition: all 0.3s ease-in-out;
    position: relative;
    z-index: 2;
    width: auto;
    margin-bottom: 14px;
}

@media only screen and (max-width: 767px) {
    .header .navbar-brand img {
        height: 50px;
        max-width: 251px;
        display: block;
        margin: 0 auto;
        /* margin-left: 20px; */
    }
}

    </style>
  </head>
  <body>

    <!--=================================
    cursor -->
    <div id="cursor">
      <div class="cursor__circle"></div>
    </div>
    <!--=================================
    cursor -->

    <div id="page" class="main">
      <!--=================================
      Header -->
      <?php include "header.php"; ?>
     
      <!--=================================
      Header -->

      <!--=================================
      Main Menu OffCanvas -->
      <div class="offcanvas main-menu-offcanvas offcanvas-end bg-dark" tabindex="-1" id="menuOffcanvas" aria-labelledby="menuOffcanvasLabel">
        <div class="offcanvas-header">
          <a id="menuOffcanvasLabel" class="navbar-brand" href="index.php"> <img class="img-fluid" src="images/logo-light.svg" alt="Main logo"></a>
          <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close">
            <svg width="20" height="20" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M4.19995 25.5841L25.7999 3.98413" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M4.19995 3.98413L25.7999 25.5841" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </button>
        </div>
        <!-- <div class="offcanvas-body lenis-scroll-disable">
          <div class="body-inner">
            <nav class="navbar">
              <ul class="navbar-nav">
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Home</a>
                  <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="index-2.html"><span>Home 01</span></a></li>
                    <li><a class="dropdown-item" href="index-02.html"><span>Home 02</span></a></li>
                    <li><a class="dropdown-item active" href="index-03.html"><span>Home 03</span></a></li>
                  </ul>
                </li>
                <li class="nav-item"><a class="nav-link" href="virtual-tours.html"><span>Virtual Tours</span></a></li>
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Pages</a>
                  <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="about-us.html"><span>About Us</span></a></li>
                    <li><a class="dropdown-item" href="pricing.html"><span>Pricing</span></a></li>
                    <li><a class="dropdown-item" href="contact-us.html"><span>Contact</span></a></li>
                    <li><a class="dropdown-item" href="team.html"><span>Team</span></a></li>
                    <li><a class="dropdown-item" href="team-single.html"><span>Team Single</span></a></li>
                    <li><a class="dropdown-item" href="faq.html"><span>Faq</span></a></li>
                    <li><a class="dropdown-item" href="typography.html"><span>Typography</span></a></li>
                    <li><a class="dropdown-item" href="privacy-policy.html"><span>Privacy Policy</span></a></li>
                    <li><a class="dropdown-item" href="terms-and-conditions.html"><span>Terms and Conditions</span></a></li>
                    <li><a class="dropdown-item" href="error-404.html"><span>Error 404</span></a></li>
                    <li><a class="dropdown-item" href="coming-soon.html"><span>Coming Soon</span></a></li>
                  </ul>
                </li>

                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Services</a>
                  <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="service.html"><span>Services</span></a></li>
                    <li><a class="dropdown-item" href="service-single.html"><span>Service Single</span></a></li>
                  </ul>
                </li>

                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Project</a>
                  <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="portfolio-2-columns.html"><span>Portfolio 2 Columns</span></a></li>
                    <li><a class="dropdown-item" href="portfolio-3-columns.html"><span>Portfolio 3 Columns</span></a></li>
                    <li><a class="dropdown-item" href="portfolio-4-columns.html"><span>Portfolio 4 Columns</span></a></li>
                    <li><a class="dropdown-item" href="portfolio-5-columns.html"><span>Portfolio 5 Columns</span></a></li>
                    <li><a class="dropdown-item" href="portfolio-carousel.html"><span>Portfolio Carousel</span></a></li>
                    <li><a class="dropdown-item" href="portfolio-masonry.html"><span>Portfolio Masonary</span></a></li>
                    <li><a class="dropdown-item" href="portfolio-single.html"><span>Portfolio Single</span></a></li>
                  </ul>
                </li>

                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Blog</a>
                  <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="blog.html"><span>Blog</span></a></li>
                    <li><a class="dropdown-item" href="blog-sidebar.html"><span>Blog Sidebar</span></a></li>
                    <li><a class="dropdown-item" href="blog-2-columns.html"><span>Blog 2 Columns</span></a></li>
                    <li><a class="dropdown-item" href="blog-3-columns.html"><span>Blog 3 Columns</span></a></li>
                    <li><a class="dropdown-item" href="blog-4-columns.html"><span>Blog 4 Columns</span></a></li>
                    <li><a class="dropdown-item" href="blog-single.html"><span>Blog Single</span></a></li>
                  </ul>
                </li>

                <li class="dropdown nav-item">
                  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Shop</a>
                  <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <li><a class="dropdown-item" href="shop.html"><span>Shop</span></a></li>
                    <li><a class="dropdown-item" href="shop-single.html"><span>Shop Single</span></a></li>
                    <li><a class="dropdown-item" href="cart.html"><span>Cart</span></a></li>
                    <li><a class="dropdown-item" href="checkout.html"><span>Checkout</span></a></li>
                    <li><a class="dropdown-item" href="wishlist.html"><span>Wishlist</span></a></li>
                  </ul>
                </li>
              </ul>
            </nav>

            <div class="bottom-info">
              <div class="contact-info">
                <span class="number">+1 234 567 8910</span>
                <a class="mail" href="#"><i class="fa-regular fa-envelope"></i>info@example.com</a>
                <span class="text">Looking for collaboration for your next creative project?</span>
              </div>
            </div>
          </div>
        </div> -->
      </div>

      <!--=================================
      Shopping-Cart OffCanvas -->
      <!-- <div class="offcanvas offcanvas-end  bg-dark cart-sidepanel " tabindex="-1" id="cartSidepanel">
        <div class="offcanvas-header text-end">
          <h5 class="mb-0"> Shopping cart</h5>
          <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close">
            <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M4.19995 25.5841L25.7999 3.98413" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M4.19995 3.98413L25.7999 25.5841" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </button>
        </div>
        <div class="offcanvas-body cart-item-body">
          <ul class="cart-item-list lenis-scroll-disable">
            <li class="cart-item">
              <a href="#" class="product-remove"><i class="far fa-trash-alt"></i></a>
              <div class="product-image">
                <a href="">
                  <img class="img-fluid" src="images/shop/01.jpg" alt="">
                </a>
              </div>
              <div class="product-details">
                <a href="" class="product-title">Lamp with Gold Base</a>
                <div class="product-price">$149.99</div>
              </div>
            </li>
            <li class="cart-item">
              <a href="#" class="product-remove"><i class="far fa-trash-alt"></i></a>
              <div class="product-image">
                <a href="shop-single.html">
                  <img class="img-fluid" src="images/shop/02.jpg" alt="">
                </a>
              </div>
              <div class="product-details">
                <a href="shop-single.html" class="product-title">Tea table</a>
                <div class="product-price">$139.99</div>
              </div>
            </li>
            <li class="cart-item">
              <a href="#" class="product-remove"><i class="far fa-trash-alt"></i></a>
              <div class="product-image">
                <a href="shop-single.html">
                  <img class="img-fluid" src="images/shop/03.jpg" alt="">
                </a>
              </div>
              <div class="product-details">
                <a href="shop-single.html" class="product-title">Recliner chair</a>
                <div class="product-price">$109.99</div>
              </div>
            </li>
            <li class="cart-item">
              <a href="#" class="product-remove"><i class="far fa-trash-alt"></i></a>
              <div class="product-image">
                <a href="shop-single.html">
                  <img class="img-fluid" src="images/shop/04.jpg" alt="">
                </a>
              </div>
              <div class="product-details">
                <a href="shop-single.html" class="product-title">Recliner chair</a>
                <div class="product-price">$100.00</div>
              </div>
            </li>
            <li class="cart-item">
              <a href="#" class="product-remove"><i class="far fa-trash-alt"></i></a>
              <div class="product-image">
                <a href="shop-single.html">
                  <img class="img-fluid" src="images/shop/05.jpg" alt="">
                </a>
              </div>
              <div class="product-details">
                <a href="shop-single.html" class="product-title">Bathtub</a>
                <div class="product-price">$99.99</div>
              </div>
            </li>
          </ul>
          <div class="offcanvas-footer">
            <div class="mini-cart-total">
              <span>Total ( 5 items ) :</span><strong> $859.94</strong>
            </div>
            <div class="cart-buttons">
              <a href="cart.html" class="btn">View cart</a>
              <a href="checkout.html" class="btn">Checkout</a>
            </div>
          </div>
        </div>
      </div> -->
      <!--=================================
      Shopping-Cart OffCanvas -->
      
      <!--=================================
      Search -->
      <div id="search">
				<button type="button" class="close"></button>
				<div class="search-inner">
					<h2 class="title">Search here...</h2>
					<form>
						<input type="search" value="" placeholder="Search">
						<button type="submit" class="search-btn btn">Search</button>
					</form>
				</div>
			</div>
      <!--=================================
      Search -->

      <!--=================================
      Right menu -->
   
      <!--=================================
      Right menu -->

      <div class="site-content">
        <!--=================================
        banner -->
<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <div class="banner banner-01 position-relative bg-holder" style="background-image:url('images/2.png'); background-size: cover!important;">
        <div class="light-img">
          <img class="img-fluid light-01 wow fadeInDown" data-swiper-animation="fadeInDown" data-duration="0.5s" data-delay="0.25s" src="images/banner/banner-01/02.png" alt="#">
          <img class="img-fluid light-02 wow fadeInDown" data-swiper-animation="fadeInDown" data-duration="1s" data-delay="0.25s" src="images/banner/banner-01/03.png" alt="#">
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="banner banner-01 position-relative bg-holder" style="background-image:url('images/3.png'); background-size: cover!important;">
        <div class="light-img">
          <img class="img-fluid light-01 wow fadeInDown" data-swiper-animation="fadeInDown" data-duration="0.5s" data-delay="0.25s" src="images/banner/banner-01/02.png" alt="#">
          <img class="img-fluid light-02 wow fadeInDown" data-swiper-animation="fadeInDown" data-duration="1s" data-delay="0.25s" src="images/banner/banner-01/03.png" alt="#">
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="banner banner-01 position-relative bg-holder" style="background-image:url('images/4.png'); background-size: cover!important;">
        <div class="light-img">
          <img class="img-fluid light-01 wow fadeInDown" data-swiper-animation="fadeInDown" data-duration="0.5s" data-delay="0.25s" src="images/banner/banner-01/02.png" alt="#">
          <img class="img-fluid light-02 wow fadeInDown" data-swiper-animation="fadeInDown" data-duration="1s" data-delay="0.25s" src="images/banner/banner-01/03.png" alt="#">
        </div>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>


        <!--=================================
        banner -->

        <div class="content-wrapper">
          <!--=================================
          About -->
          <div class="overflow-hidden">
            <div class="container-fluid p-0">
              <div class="row g-0">
                <div class="col-md-12 position-relative">
                  <div class="marquee bg-primary">
                  <div class="marquee-box">
  <div class="marquee-item">
    <span class="icon">❈</span>
    <span class="title">Interior Design Consultation</span>
  </div>

  <div class="marquee-item">
    <span class="icon">❈</span>
    <span class="title">Modular Kitchen Designs</span>
  </div>

  <div class="marquee-item">
    <span class="icon">❈</span>
    <span class="title">Living Room Styling</span>
  </div>

  <div class="marquee-item">
    <span class="icon">❈</span>
    <span class="title">Luxury Interiors</span>
  </div>

  <div class="marquee-item">
    <span class="icon">❈</span>
    <span class="title">False Ceiling Concepts</span>
  </div>

  <div class="marquee-item">
    <span class="icon">❈</span>
    <span class="title">3D Design Visuals</span>
  </div>

  <div class="marquee-item">
    <span class="icon">❈</span>
    <span class="title">Customized Wardrobes</span>
  </div>

  <div class="marquee-item">
    <span class="icon">❈</span>
    <span class="title">Office Interiors</span>
  </div>

  <div class="marquee-item">
    <span class="icon">❈</span>
    <span class="title">Space Planning</span>
  </div>

  <div class="marquee-item">
    <span class="icon">❈</span>
    <span class="title">Home Renovation</span>
  </div>

  <div class="marquee-item">
    <span class="icon">❈</span>
    <span class="title">Wall Color Coordination</span>
  </div>

  <div class="marquee-item">
    <span class="icon">❈</span>
    <span class="title">Lighting Layouts</span>
  </div>

  <div class="marquee-item">
    <span class="icon">❈</span>
    <span class="title">Bedroom Concepts</span>
  </div>

  <div class="marquee-item">
    <span class="icon">❈</span>
    <span class="title">Texture Painting</span>
  </div>

  <div class="marquee-item">
    <span class="icon">❈</span>
    <span class="title">Balcony Makeover</span>
  </div>

  <div class="marquee-item">
    <span class="icon">❈</span>
    <span class="title">Eco-Friendly Interiors</span>
  </div>

  <div class="marquee-item">
    <span class="icon">❈</span>
    <span class="title">Minimalist Designs</span>
  </div>
</div>

                  </div>
                </div>
              </div>
            </div>
          </div>


        
         <section class="space-pt before-after-section overflow-hidden">
  <div class="before-after-section-inner">
    <div class="container-fluid p-0">
      <div class="row">
        <div class="col-xl-6">
          <div class="before-after-container">
            <div class="before-after-box" data-component="before-after-slider">
              <div class="before-after-slider-wrapper">
                <input type="range" min="0" max="100" value="50" class="before-after-range" id="before-after-range" data-before-after-range="">
                <div class="before-after-wrapper-overlay" data-before-after-overlay="">
                  <div class="before-after-figure before-after-figure-overlay">
                    <div class="before-bg">
                      <img src="about1/go1.webp" alt="before image" >
                    </div>
                  </div>
                </div>

                <div class="after-bg-box">
                  <div class="before-after-figure">
                    <div class="after-bg">
                      <img src="about1/go2.jpeg" alt="after image"  >
                    </div>
                  </div>
                </div>

               <div class="before-after" data-before-after-slider="">
  <span class="before-after-thumb" data-image-comparison-thumb=""></span>
</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="before-after-content-absolute">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-xl-6">
            <!-- Content on the left side (currently empty) -->
          </div>
          <div class="col-xl-6">
            <div class="about-section">
              <div class="section-title pgs-title-effect">
                <span class="sub-title">ABOUT US</span>
                <h3 class="title" data-splitting="chars" style="font-size: 33px;">GoCosy – Style that fits, prices that click. </h3>
                <p class="description">
               
At GoCosy, we bring you affordable, stylish, and reliable home transformations – turning everyday spaces into dream homes without breaking the bank. Experience comfort, elegance, and quality like never before!
                </p>
              </div>

              <ul class="project-list wow fadeInUp" data-swiper-animation="fadeInUp" data-duration="0.3s" data-delay="0.25s">
                <li><a href="#"><span class="icon-bg"><img class="img-fluid" src="images/about/icon-01.png" alt="3D Space Designing"></span><span>3D Space Designing</span></a></li>
                <li><a href="#"><span class="icon-bg"><img class="img-fluid" src="images/about/icon-02.png" alt="VisionArc Project"></span><span>VisionArc Project</span></a></li>
                <li><a href="#"><span class="icon-bg"><img class="img-fluid" src="images/about/icon-03.png" alt="NextGen Structures"></span><span>NextGen Structures</span></a></li>
                <li><a href="#"><span class="icon-bg"><img class="img-fluid" src="images/about/icon-04.png" alt="Visionary Interiors"></span><span>Visionary Interiors</span></a></li>
              </ul>

              <div class="more-project wow fadeInUp" data-swiper-animation="fadeInUp" data-duration="0.5s" data-delay="0.25s">
         <a href="https://wa.me/919082458900?text=Hi!%20I'm%20interested%20to%20know%20more.%20Please%20share%20details." 
   class="btn" 
   target="_blank" 
   style="padding: 6px 12px; font-size: 14px; line-height: 1; border-radius: 4px;">
  WhatsApp Us
</a>


              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

          <!--=================================
          About -->

          <!--=================================
          Marquee -->
          <!-- <div class="space-medium-ptb client-logos-section">
            <div class="container">
              <div class="row justify-content-center">
                <div class="col-xl-6 col-lg-8 col-md-10">
                 <div class="text-center wow fadeInUp  wow-animated" data-swiper-animation="fadeInUp" data-duration="0.3s" data-delay="0.25s" style="visibility: visible; animation-name: fadeInUp;">
                   <h3 class="title">We have successfully completed over 200 projects for more than 150 clients.</h3>
                 </div>
               </div>
             </div>
             <div class="row">
               <div class="col-md-12">
                 <div class="client-logos wow fadeInUp  wow-animated" data-cursor-type="arrow" data-swiper-animation="fadeInUp" data-duration="0.3s" data-delay="0.25s" style="visibility: visible; animation-name: fadeInUp;">
                  <div class="owl-carousel client-logo-slider owl-loaded owl-drag" data-nav-dots="false" data-nav-arrow="false" data-items="6" data-lg-items="5" data-md-items="4" data-sm-items="3" data-xs-items="3" data-xx-items="2" data-space="45" data-autoheight="true">
                    
                    
                    
                    
                    
                    
                  <div class="owl-stage-outer owl-height" style="height: 36.2188px;">
                    <div class="owl-stage" style="transform: translate3d(-1161px, 0px, 0px); transition: 1s; width: 3483px;">
                      <div class="owl-item cloned" style="width: 148.5px; margin-right: 45px;">
                        <div class="item">
                        <div class="card">
                    <i class="fas fa-cogs"></i>
                    <p>Quality Support</p>
                  </div>
                    </div>
                  </div>
                  <div class="owl-item cloned" style="width: 148.5px; margin-right: 45px;">
                    <div class="item">
                    <div class="card">
                    <i class="fas fa-headset"></i>
                    <p>24/7 Help</p>
                  </div>
                    </div>
                  </div>
                  <div class="owl-item cloned" style="width: 148.5px; margin-right: 45px;">
                      <div class="item">
                      <div class="card">
                    <i class="fas fa-globe"></i>
                    <p>Fastest Delivery</p>
                  </div>
                    </div>
                  </div>
                  <div class="owl-item cloned" style="width: 148.5px; margin-right: 45px;">
                    <div class="item">
                    <div class="card">
                    <i class="fas fa-thumbs-up"></i>
                    <p>Customer Satisfaction</p>
                  </div>
                    </div>
                  </div>
                  <div class="owl-item cloned" style="width: 148.5px; margin-right: 45px;">
                    <div class="item">
                    <div class="card">
                  <i class="fas fa-pencil-ruler"></i> <!-- Icon representing design or creativity 


                    <p>400+ In-House Designers</p>
                  </div>
                    </div>
                  </div>
          
                  <div class="owl-item cloned" style="width: 148.5px; margin-right: 45px;">
                        <div class="item">
                        <div class="card">
                    <i class="fas fa-cogs"></i>
                    <p>Quality Support</p>
                  </div>
                    </div>
                  </div>
                  <div class="owl-item cloned" style="width: 148.5px; margin-right: 45px;">
                    <div class="item">
                    <div class="card">
                    <i class="fas fa-headset"></i>
                    <p>24/7 Help</p>
                  </div>
                    </div>
                  </div>
                  <div class="owl-item cloned" style="width: 148.5px; margin-right: 45px;">
                      <div class="item">
                      <div class="card">
                    <i class="fas fa-globe"></i>
                    <p>Fastest Delivery</p>
                  </div>
                    </div>
                  </div>
                  <div class="owl-item cloned" style="width: 148.5px; margin-right: 45px;">
                    <div class="item">
                    <div class="card">
                    <i class="fas fa-thumbs-up"></i>
                    <p>Customer Satisfaction</p>
                  </div>
                    </div>
                  </div>
                  <div class="owl-item cloned" style="width: 148.5px; margin-right: 45px;">
                    <div class="item">
                    <div class="card">
                  <i class="fas fa-pencil-ruler"></i> <!-- Icon representing design or creativity 


                    <p>400+ In-House Designers</p>
                  </div>
                    </div>
                  </div>
                  <div class="owl-item cloned" style="width: 148.5px; margin-right: 45px;">
                        <div class="item">
                        <div class="card">
                    <i class="fas fa-cogs"></i>
                    <p>Quality Support</p>
                  </div>
                    </div>
                  </div>
                  <div class="owl-item cloned" style="width: 148.5px; margin-right: 45px;">
                    <div class="item">
                    <div class="card">
                    <i class="fas fa-headset"></i>
                    <p>24/7 Help</p>
                  </div>
                    </div>
                  </div>
                  <div class="owl-item cloned" style="width: 148.5px; margin-right: 45px;">
                      <div class="item">
                      <div class="card">
                    <i class="fas fa-globe"></i>
                    <p>Fastest Delivery</p>
                  </div>
                    </div>
                  </div>
                  <div class="owl-item cloned" style="width: 148.5px; margin-right: 45px;">
                    <div class="item">
                    <div class="card">
                    <i class="fas fa-thumbs-up"></i>
                    <p>Customer Satisfaction</p>
                  </div>
                    </div>
                  </div>
                  <div class="owl-item cloned" style="width: 148.5px; margin-right: 45px;">
                    <div class="item">
                    <div class="card">
                  <i class="fas fa-pencil-ruler"></i>


                    <p>400+ In-House Designers</p>
                  </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="owl-nav disabled"><button type="button" role="presentation" class="owl-prev"><i class="fas fa-chevron-left"></i></button><button type="button" role="presentation" class="owl-next"><i class="fas fa-chevron-right"></i></button></div><div class="owl-dots disabled"></div></div>
                </div>
               </div>
              </div>
           </div>
         </div> -->
          <!--=================================
          Marquee -->
       
          <!--=================================
          Service box  -->



          <section class=" space-ptb overflow-hidden fancy-portfolio-section">
            <div class="container">
              <div class="row align-items-center align-items-center section-title-horizontal">
                <div class="col-md-11 col-xl-9">
                  <div class="section-title pgs-title-effect">
                    <span class="sub-title">Our Services</span>
          <h3 class="title" data-splitting="chars">Elegant, functional, and personalized interiors..</h3>



                    <p class="description ps-0 wow fadeInUp  wow-animated" data-swiper-animation="fadeInUp" data-duration="0.5s" data-delay="0.25s" style="visibility: visible; animation-name: fadeInUp;">At GoCosy, we design spaces that feel like home from the moment you walk in. Whether it's a cozy corner or an entire home makeover, we blend style, comfort, and functionality to create environments that reflect you. Our goal is simple — to make your space look amazing and feel even better.</p>
                  </div>
                </div>
              </div>
              <div class="row justify-content-between row-gap-70">
                <div class="col-sm-7">
                  <div class="portfolio-item portfolio-style-02">
                    <div class="portfolio-img wow pgsUpToDown fadeInDown  wow-animated" style="visibility: visible; animation-name: fadeInDown;">
                      <img class="img-fluid" src="about1/k1.jpg" alt="">
                    </div>
                    <div class="portfolio-info">
                      <div class="portfolio-category">
                        <h3 class="portfolio-title">
                          <a href="portfolio.php">Modern Kitchen</a>
                        </h3>
                       
                      </div>
                      <a href="https://wa.me/919082458900?text=Hi!%20I'm%20interested%20to%20know%20more.%20Please%20share%20details." 
   class="btn" 
   target="_blank" 
   style="padding: 6px 12px; font-size: 14px; line-height: 1; border-radius: 4px;">
   know more
</a>

                    </div>
                  </div>
                </div>
                <div class="col-sm-5 col-lg-4">
                  <div class="portfolio-item portfolio-style-02">
                    <div class="portfolio-img wow pgsUpToDown fadeInDown  wow-animated" style="visibility: visible; animation-name: fadeInDown;">
                      <img class="img-fluid" src="about1/k2.jpg" alt="">
                    </div>
                    <div class="portfolio-info">
                      <div class="portfolio-category">
                        <h3 class="portfolio-title">
                          <a href="portfolio.php">Master Bedroom</a>
                        </h3>
                 
                      </div>
                     <a href="https://wa.me/919082458900?text=Hi!%20I'm%20interested%20to%20know%20more.%20Please%20share%20details." 
   class="btn" 
   target="_blank" 
   style="padding: 6px 12px; font-size: 14px; line-height: 1; border-radius: 4px;">
   know more
</a>

                    </div>
                  </div>
                </div>
                <div class="col-sm-5 col-lg-4">
                  <div class="portfolio-item portfolio-style-02">
                    <div class="portfolio-img wow pgsUpToDown fadeInDown  wow-animated" style="visibility: visible; animation-name: fadeInDown;">
                      <img class="img-fluid" src="about1/k3.jpg" alt="">
                    </div>
                    <div class="portfolio-info">
                      <div class="portfolio-category">
                        <h3 class="portfolio-title">
                          <a href="portfolio.php">Wall Art Frame</a>
                        </h3>
                   
                      </div>
                   <a href="https://wa.me/919082458900?text=Hi!%20I'm%20interested%20to%20know%20more.%20Please%20share%20details." 
   class="btn" 
   target="_blank" 
   style="padding: 6px 12px; font-size: 14px; line-height: 1; border-radius: 4px;">
  know more
</a>

                    </div>
                  </div>
                </div>
                <div class="col-sm-7">
                  <div class="portfolio-item portfolio-style-02">
                    <div class="portfolio-img wow pgsUpToDown fadeInDown  wow-animated" style="visibility: visible; animation-name: fadeInDown;">
                      <img class="img-fluid" src="about1/pojaa1.jpg" alt="">
                    </div>
                    <div class="portfolio-info">
                      <div class="portfolio-category">
                        <h3 class="portfolio-title">
                          <a href="portfolio.php">Pooja Ghar</a>
                        </h3>
                       
                      </div>
                  <a href="https://wa.me/919082458900?text=Hi!%20I'm%20interested%20to%20know%20more.%20Please%20share%20details." 
   class="btn" 
   target="_blank" 
   style="padding: 6px 12px; font-size: 14px; line-height: 1; border-radius: 4px;">
  know more
</a>

                    </div>
                  </div>
                </div>
                <div class="col-sm-7">
                  <div class="portfolio-item portfolio-style-02">
                    <div class="portfolio-img wow pgsUpToDown fadeInDown  wow-animated" style="visibility: visible; animation-name: fadeInDown;">
                      <img class="img-fluid" src="about1/k6.jpg" alt="">
                    </div>
                    <div class="portfolio-info">
                      <div class="portfolio-category">
                        <h3 class="portfolio-title">
                          <a href="portfolio.php">Bathroom</a>
                        </h3>
                     
                      </div>
            <a href="https://wa.me/919082458900?text=Hi!%20I'm%20interested%20to%20know%20more.%20Please%20share%20details." 
   class="btn" 
   target="_blank" 
   style="padding: 6px 12px; font-size: 14px; line-height: 1; border-radius: 4px;">
  know more
</a>

                    </div>
                  </div>
                </div>
                <div class="col-sm-5 col-lg-4">
                  <div class="portfolio-item portfolio-style-02">
                    <div class="portfolio-img wow pgsUpToDown fadeInDown  wow-animated" style="visibility: visible; animation-name: fadeInDown;">
                      <img class="img-fluid" src="about1/k8.png" alt="">
                    </div>
                    <div class="portfolio-info">
                      <div class="portfolio-category">
                        <h3 class="portfolio-title">
                          <a href="portfolio.php">Kids Interior Design</a>
                        </h3>
                     
                      </div>
                   <a href="https://wa.me/919082458900?text=Hi!%20I'm%20interested%20to%20know%20more.%20Please%20share%20details." 
   class="btn" 
   target="_blank" 
   style="padding: 6px 12px; font-size: 14px; line-height: 1; border-radius: 4px;">
  know more
</a>

                    </div>
                  </div>
                </div>
                  <div class="col-sm-7">
                  <div class="portfolio-item portfolio-style-02">
                    <div class="portfolio-img wow pgsUpToDown fadeInDown  wow-animated" style="visibility: visible; animation-name: fadeInDown;">
                      <img class="img-fluid" src="images/blog/Successful-Office-Interior-Design.webp" alt="">
                    </div>
                    <div class="portfolio-info">
                      <div class="portfolio-category">
                        <h3 class="portfolio-title">
                          <a href="portfolio.php">Office Interior Design</a>
                        </h3>
                     
                      </div>
                    <a href="https://wa.me/919082458900?text=Hi!%20I'm%20interested%20to%20know%20more.%20Please%20share%20details." 
   class="btn" 
   target="_blank" 
   style="padding: 6px 12px; font-size: 14px; line-height: 1; border-radius: 4px;">
  know more
</a>

                    </div>
                  </div>
                </div>
                <div class="col-sm-5 col-lg-4">
                  <div class="portfolio-item portfolio-style-02">
                    <div class="portfolio-img wow pgsUpToDown fadeInDown  wow-animated" style="visibility: visible; animation-name: fadeInDown;">
                      <img class="img-fluid" src="images/step/hotel1.jpg" alt="">
                    </div>
                    <div class="portfolio-info">
                      <div class="portfolio-category">
                        <h3 class="portfolio-title">
                          <a href="portfolio.php">Hotels interior design</a>
                        </h3>
                     
                      </div>
                   <a href="https://wa.me/919082458900?text=Hi!%20I'm%20interested%20to%20know%20more.%20Please%20share%20details." 
   class="btn" 
   target="_blank" 
   style="padding: 6px 12px; font-size: 14px; line-height: 1; border-radius: 4px;">
 know more
</a>

                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
          

          <section class="py-5 bg-light">
  <div class="container">
    <h3 class="text-center mb-5">Capturing Moments of Delight</h3>
    <div id="testimonialCarousel" class="carousel slide" data-bs-ride="carousel">
      <div class="carousel-inner">

        <!-- Slide 1 -->
        <div class="carousel-item active">
          <div class="row align-items-center">
            <div class="col-lg-6 col-sm-12">
              <img src="about1/T4.jpg" alt="Client Image 1" class="img-fluid rounded"  id="round">
            </div>
            <div class="col-lg-6 col-sm-12">
              <div class="p-3">
                <p>GoCosy Interior Designing transformed my home into a cozy and modern space. Their attention to detail and creativity exceeded my expectations!</p>
                <h5>Priya Sharma</h5>
                <small>Happy Client</small>
              </div>
            </div>
          </div>
        </div>

        <!-- Slide 2 -->
        <div class="carousel-item">
          <div class="row align-items-center">
            <div class="col-lg-6 col-sm-12">
              <img src="about1/T6.jpg" alt="Client Image 2" class="img-fluid rounded"  id="round">
            </div>
            <div class="col-lg-6 col-sm-12">
              <div class="p-3">
                <p>The team at GoCosy Interior Design brought my vision to life. The space feels inviting and stylish. Highly recommend their services!</p>
                <h5>Ravi Mehta</h5>
                <small>Satisfied Homeowner</small>
              </div>
            </div>
          </div>
        </div>

        <!-- Slide 3 -->
        <div class="carousel-item">
          <div class="row align-items-center">
            <div class="col-lg-6 col-sm-12">
              <img src="about1/E6.jpg" alt="Client Image 3" class="img-fluid rounded" id="round" >
            </div>
            <div class="col-lg-6 col-sm-12">
              <div class="p-3">
                <p>GoCosy Interior Design's professionalism and innovation transformed our office into a creative hub. Their work has boosted productivity!</p>
                <h5>Amit Desai</h5>
                <small>Business Owner</small>
              </div>
            </div>
          </div>
        </div>

        <!-- Slide 4 -->
        <div class="carousel-item">
          <div class="row align-items-center">
            <div class="col-lg-6 col-sm-12">
              <img src="about1/E4.png" alt="Client Image 4" class="img-fluid rounded"  id="round">
            </div>
            <div class="col-lg-6 col-sm-12">
              <div class="p-3">
                <p>The design team at GoCosy Interior Design is top-notch! Their creativity and dedication made our new home feel comfortable and elegant.</p>
                <h5>Neha Patel</h5>
                <small>New Homeowner</small>
              </div>
            </div>
          </div>
        </div>

        <!-- Slide 5 -->
        <div class="carousel-item">
          <div class="row align-items-center">
            <div class="col-lg-6 col-sm-12">
              <img src="about1/E5.avif" alt="Client Image 5" class="img-fluid rounded" id="round" >
            </div>
            <div class="col-lg-6 col-sm-12">
              <div class="p-3">
                <p>We hired GoCosy Interior Design to remodel our living room, and they exceeded all our expectations. The space is now functional and beautiful.</p>
                <h5>Simran Joshi</h5>
                <small>Satisfied Customer</small>
              </div>
            </div>
          </div>
        </div>

        <!-- Slide 6 -->
        <div class="carousel-item">
          <div class="row align-items-center">
            <div class="col-lg-6 col-sm-12">
              <img src="about1/y1.jpg" alt="Client Image 6" class="img-fluid rounded" id="round" >
            </div>
            <div class="col-lg-6 col-sm-12">
              <div class="p-3">
                <p>Working with GoCosy Interior Design was a delightful experience. Their team is attentive, and they have a knack for maximizing space and style.</p>
                <h5>Karan Gupta</h5>
                <small>Happy Client</small>
              </div>
            </div>
          </div>
        </div>

        <!-- Slide 7 -->
        <div class="carousel-item">
          <div class="row align-items-center">
            <div class="col-lg-6 col-sm-12">
              <img src="about1/TES2.avif" alt="Client Image 7" class="img-fluid rounded" id="round" >
            </div>
            <div class="col-lg-6 col-sm-12">
              <div class="p-3">
                <p>The team at GoCosy Interior Design really listened to our needs. They transformed our space into something we love to come home to!</p>
                <h5>Rajesh Kumar</h5>
                <small>Happy Homeowner</small>
              </div>
            </div>
          </div>
        </div>

      </div>

      <!-- Controls -->
      <button class="carousel-control-prev" type="button" data-bs-target="#testimonialCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#testimonialCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
      </button>
    </div>
  </div>
</section>


<!-- Bootstrap JS (include before </body>) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>




          <section class="space-pt stacking-card-section">
            <div class="container-fluid full-width">
              <div class="row justify-content-center">
                <div class="col-lg-8">
                  <div class="section-title center pgs-title-effect">
                    <span class="sub-title">Process</span>
                     <h3 class="title" data-splitting="chars">How we Work ?</h3>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-12">
                  <div class="stacking-card-wrapper grid-wrapper grid-md-1 grid-sm-1 grid-xs-1" style="padding-bottom: 36px;">
                    <div class="stacking-card-item" style="transform: translateY(0px);">
                      <div class="card-item-info">
                          <div class="card-item-content">
                          <div class="card-item-number">01</div>
                          <div class="card-item-icon">
                            <img class="img-fluid" src="images/step/icon/01.svg" alt="#">
                          </div>
                          <h3 class="title">Concept & Consultation</h3>
                          <p class="mb-0">Every successful interior design begins with understanding your vision, preferences, and lifestyle, laying the foundation for a unique design concept. </p>
                        </div>
                      </div>
                      <div class="card-item-img wow fadeInLeft pgsLeftToRight  wow-animated" style="visibility: visible; animation-name: fadeInLeft;">
                        <img class="img-fluid" src="images/step/01.jpg" alt="#">
                      </div>
                    </div>
                    <div class="stacking-card-item" style="transform: translateY(18px);">
                      <div class="card-item-img wow fadeInRight pgsRightToLeft  wow-animated" style="visibility: visible; animation-name: fadeInRight;">
                        <img class="img-fluid" src="images/step/02.jpg" alt="#">
                      </div>
                      <div class="card-item-info">
                        <div class="card-item-content">
                          <div class="card-item-number">02</div>
                          <div class="card-item-icon">
                              <img class="img-fluid" src="images/step/icon/02.svg" alt="#">
                          </div>
                          <h3 class="title">Space Planning</h3>
                          <p class="mb-0">We meticulously plan the layout to maximize functionality, flow, and aesthetics, ensuring your space reflects both form and function.</p>
                        </div>
                      </div>
                    </div>
                    <div class="stacking-card-item" style="transform: translateY(36px);">
                      <div class="card-item-info">
                        <div class="card-item-content">
                          <div class="card-item-number">03</div>
                          <div class="card-item-icon">
                              <img class="img-fluid" src="images/step/icon/03.svg" alt="#">
                          </div>
                          <h3 class="title">Design Development</h3>
                          <p class="mb-0">Bringing ideas to life through mood boards, 3D visuals, and detailed presentations—ensuring each element aligns with your style and purpose.</p>
                       </div>
                      </div>
                      <div class="card-item-img wow fadeInLeft pgsLeftToRight  wow-animated" style="visibility: visible; animation-name: fadeInLeft;">
                        <img class="img-fluid" src="images/step/03.jpg" alt="#">
                      </div>
                    </div>
                  </div>
                 </div>
              </div>
            </div>
          </section>
          <!--=================================
          Service box  -->
<div class="overflow-hidden space-ptb wow fadeInUp wow-animated" data-wow-delay="0.0s" data-wow-duration="1500ms" style="visibility: visible; animation-duration: 1500ms; animation-delay: 0s; animation-name: fadeInUp;">
  <div class="container-fluid p-0">
    <div class="row g-0">
      <div class="col-12"> <!-- Ensures the marquee takes full width on all screen sizes -->
        <div class="marquee marquee-style-02 space-small-pb">
          <div class="marquee-box p-0">
            <div class="marquee-item">
              <span class="title" data-text="Let's design">Let's design</span>
            </div>
            <div class="marquee-item">
              <span class="title" data-text="Transform your space">Transform your space</span>
            </div>
            <div class="marquee-item">
              <span class="title" data-text="Elegant interiors">Elegant interiors</span>
            </div>
            <div class="marquee-item">
              <span class="title" data-text="Modern living">Modern living</span>
            </div>
            <div class="marquee-item">
              <span class="title" data-text="Stylish solutions">Stylish solutions</span>
            </div>
            <div class="marquee-item">
              <span class="title" data-text="Creative comfort">Creative comfort</span>
            </div>
            <div class="marquee-item">
              <span class="title" data-text="Inspired interiors">Inspired interiors</span>
            </div>
            <div class="marquee-item">
              <span class="title" data-text="Personalized design">Personalized design</span>
            </div>
            <div class="marquee-item">
              <span class="title" data-text="Spaces that speak">Spaces that speak</span>
            </div>
            <div class="marquee-item">
              <span class="title" data-text="Timeless aesthetics">Timeless aesthetics</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


          <!--=================================
          Video -->
          <div class="video-section pgs-bg-move-effect-center">
            <div class="container-fluid p-0">
              <div class="video-wrapper bg-holder" style="background-image: url(about1/hall.jpg)" data-cursor-type="text" data-custom-text="Play" data-cursor-class="video-btn-lg">
                <div class="row g-0">
                  <div class="col-md-12 text-center" >
                    <a class="popup-youtube video-btn cursor-style btn-hide" href="about1/inter.mp4">Play</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!--=================================
          Video -->

          <!--=================================
          Our Project -->
       <section class="space-ptb"id="vibes">
            <div class="container">
              <div class="row">
                <div class="col-md-12">
                  <div class="section-title pgs-title-effect">
                    <span class="sub-title">Why Choose us</span>
                    <h3 class="title" data-splitting="chars">Comfortable Living Spaces & Cozy Vibes</h3>

                    <div class="title-description">
                      <p class="description wow fadeInUp  wow-animated" data-swiper-animation="fadeInUp" data-duration="0.1s" data-delay="0.25s" style="visibility: visible; animation-name: fadeInUp;">We turn your space into paradise. Trust us - every space we design is crafted to 
bring warmth, comfort and a touch of elegance to your everyday living. 
                      .</p>
                      <div class="ms-sm-auto wow fadeInUp  wow-animated" data-swiper-animation="fadeInUp" data-duration="0.3s" data-delay="0.25s" style="visibility: visible; animation-name: fadeInUp;"><a href="https://wa.me/919082458900?text=Hi!%20I'm%20interested%20to%20know%20more.%20Please%20share%20details." 
   class="btn btn-success btn-sm" 
   target="_blank">
  WhatsApp Us
</a>
</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-12">
                <div class="infobox-wrapper grid-wrapper grid-xl-6 grid-lg-3 grid-md-2 grid-sm-1">

                    <div class="infobox infobox-style-01 pgsDownToUP wow fadeInUp  wow-animated" data-wow-delay="0.0s" data-wow-duration="1500ms" style="visibility: visible; animation-duration: 1500ms; animation-delay: 0s; animation-name: fadeInUp;">
                      <div class="infobox-sub-title">Only ISO certified</div>
                      <h5 class="infobox-title">interior design brand</h5>
                      <div class="infobox-icon">
                        <img class="img-fluid" src="about1/iso-certificate.png" alt=""  style="height:70px;">
                      </div>
                      <div class="infobox-content">
                       
                        
                          </span>
                        </a>
                      </div>
                    </div>

                    <div class="infobox infobox-style-01 pgsDownToUP wow fadeInUp  wow-animated" data-wow-delay="0.2s" data-wow-duration="1500ms" style="visibility: visible; animation-duration: 1500ms; animation-delay: 0.2s; animation-name: fadeInUp;">
                      <div class="infobox-sub-title">300+ in-house</div>
                      <h5 class="infobox-title">designers</h5>
                      <div class="infobox-icon">
                        <img class="img-fluid" src="about1/home.png" alt="" style="height:70px;">
                      </div>
                      <div class="infobox-content">
                      
                       
                         </span>
                        </a>
                      </div>
                    </div>

                    <div class="infobox infobox-style-01 wow pgsDownToUP fadeInUp  wow-animated" data-wow-delay="0.4s" data-wow-duration="1500ms" style="visibility: visible; animation-duration: 1500ms; animation-delay: 0.4s; animation-name: fadeInUp;">
                      <div class="infobox-sub-title">8 million+ sq.ft</div>
                      <h5 class="infobox-title">designed and delivered</h5>
                      <div class="infobox-icon">
                        <img class="img-fluid" src="about1/interiorr.png" alt="" style="height:70px;">
                      </div>
                      <div class="infobox-content">
                       
                   
                          </span>
                        </a>
                      </div>
                    </div>

                    <div class="infobox infobox-style-01 pgsDownToUP wow fadeInUp  wow-animated" data-wow-delay="0.6s" data-wow-duration="1500ms" style="visibility: visible; animation-duration: 1500ms; animation-delay: 0.6s; animation-name: fadeInUp;">
                      <div class="infobox-sub-title">Professionally managed </div>
                      <h5 class="infobox-title">Creative Interior Transformations</h5>
                      <div class="infobox-icon">
                        <img class="img-fluid" src="about1/bc1.png" alt="" style="height:70px;">
                      </div>
                      <div class="infobox-content">
                        
                       
                         </span>
                        </a>
                      </div>
                    </div>
                    <div class="infobox infobox-style-01 pgsDownToUP wow fadeInUp  wow-animated" data-wow-delay="0.6s" data-wow-duration="1500ms" style="visibility: visible; animation-duration: 1500ms; animation-delay: 0.6s; animation-name: fadeInUp;">
                      <div class="infobox-sub-title">Full-home </div>
                      <h5 class="infobox-title">personalised interiors</h5>
                      <div class="infobox-icon">
                        <img class="img-fluid" src="about1/designn.png" alt="" style="height:70px;">
                      </div>
                      <div class="infobox-content">
                        
                       
                         </span>
                        </a>
                      </div>
                    </div>
                    <div class="infobox infobox-style-01 pgsDownToUP wow fadeInUp  wow-animated" data-wow-delay="0.6s" data-wow-duration="1500ms" style="visibility: visible; animation-duration: 1500ms; animation-delay: 0.6s; animation-name: fadeInUp;">
                      <div class="infobox-sub-title">7-stage quality </div>
                      
                      <h5 class="infobox-title">check with 400+ tests</h5>
                      <div class="infobox-icon">
                        <img class="img-fluid" src="about1/badgee.png" alt="" style="height:70px;">
                      </div>
                      <div class="infobox-content">
                        
                      
                          </span>
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>

          <!--=================================
          Our Project -->

          <!--=================================
          How it Work -->
          <section class="bg-light how-it-work bg-holder" style="background-image:url(images/bg/07.png); background-size: auto; background-position: bottom right;">
            <div class="container-fluid g-0">
              <div class="row ">
                <div class="col-md-12">
                  <div class="service-tabs panorama-tabs service-style-02 wow fadeInUp" data-swiper-animation="fadeInUp" data-duration="0.5s" data-delay="0.25s">
                    <div class="row ">
                      <div class="col-xxl-6 col-lg-6 order-2 order-lg-1">
                        <div class="service-tab-content">
                          <div class="degree"><img class="img-fluid" src="images/service/360-degree.png" alt="#"></div>
                          <div id="service-item-1" class="service-content-box service-content-active">
                            <div class="panorama" data-panorama="about1/bedroom.jpg"></div>
                          </div>

                          <div id="service-item-2" class="service-content-box">
                            <div class="panorama" data-panorama="about1/RESIDENTIAL.jpg"></div>
                          </div>

                          <div id="service-item-3" class="service-content-box">
                            <div class="panorama" data-panorama="about1/rak-bangalore.jpg"></div>
                          </div>

                          <div id="service-item-4" class="service-content-box">
                            <div class="panorama" data-panorama="about1/kitchen.jpeg"></div>
                          </div>

                          <div id="service-item-5" class="service-content-box">
                            <div class="panorama" data-panorama="about1/bath11.jpg"></div>
                          </div>
                        </div>
                      </div>

                      <div class="col-xxl-5 col-lg-6 order-1 order-lg-2">
                        <div class="work-title space-pt">
                          <div class="section-title pgs-title-effect">
                            <span class="sub-title">Works</span>
                            <h3 class="title" data-splitting="chars">we provide</h3>
                          </div>
                        </div>
                        <div class="service-items lenis-scroll-disable">
                          <div data-tab="service-item-1" class="service-item item-active">
                            <div class="service-group-item">
                              <div class="tab-content-wrap">
                                <img class="img-fluid" src="images/service/icon/icon-primary-02.png" alt="#">
                                <div class="service-info">
                                  <h3 class="title">Bedroom Interior Design </h3>
                                  <p>Transform your bedroom into a cozy, stylish retreat with our expert interior design services.</p>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div data-tab="service-item-2" class="service-item">
                            <div class="service-group-item">
                              <div class="tab-content-wrap">
                                <img class="img-fluid" src="images/service/icon/icon-primary-01.png" alt="#">
                                <div class="service-info">
                                  <h3 class="title">Living Interior Design</h3>
                                  <p>Create a welcoming and functional living space that reflects your style with our expert interior design services</p>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div data-tab="service-item-3" class="service-item">
                            <div class="service-group-item">
                              <div class="tab-content-wrap">
                                <img class="img-fluid" src="images/service/icon/icon-primary-03.png" alt="#">
                                <div class="service-info">
                                  <h3 class="title">Outdoor Interior Design</h3>
                                  <p>Transform your outdoor spaces into beautiful retreats with our innovative outdoor interior design solutions</p>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div data-tab="service-item-4" class="service-item">
                            <div class="service-group-item">
                              <div class="tab-content-wrap">
                                <img class="img-fluid" src="images/service/icon/icon-primary-05.png" alt="#">
                                <div class="service-info">
                                  <h3 class="title">Kitchen Interior Design</h3>
                                  <p> We create and  turn ordinary kitchens into inspiring and well planned                   
spaces.  
 </p>
                                </div>
                              </div>
                            </div>
                          </div>

                          <div data-tab="service-item-5" class="service-item">
                            <div class="service-group-item">
                              <div class="tab-content-wrap">
                                <img class="img-fluid" src="images/service/icon/icon-primary-08.png" alt="#">
                                <div class="service-info">
                                  <h3 class="title">Bathroom Interior Design</h3>
                                  <p>Create a serene and functional bathroom oasis with our expert bathroom interior design servicesy</p>
                                </div>
                              </div>
                            </div>
                          </div>

                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <!--=================================
          How it Work -->

          <!--=================================
          Team -->
      
          <!--=================================
          Team -->

          <!--=================================
          Testimonials -->
     
          <!--=================================
          Testimonials -->

          <!--=================================
          Blog -->
        
         

          <!--=================================
          Marquee -->
        <!-- Client Logos Section -->
<div class="space-medium-ptb client-logos-section">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-xl-6 col-lg-8 col-md-10">
        <div class="text-center wow fadeInUp" data-swiper-animation="fadeInUp" data-duration="0.3s" data-delay="0.25s">
          <h3 class="title">Our Partners.</h3>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
      <div class="client-logos wow fadeInUp" 
     data-cursor-type="arrow" 
     data-swiper-animation="fadeInUp" 
     data-duration="0.3s" 
     data-delay="0.25s">

  <div class="owl-carousel client-logo-slider">
    <!-- Repeatable Logo Item -->
    <div class="item d-flex align-items-center justify-content-center" style="height: 100px; width: 100px;">
      <img class="img-fluid" src="cilents/asian1-removebg-preview.png" alt="Asian Paints">
    </div>

    <div class="item d-flex align-items-center justify-content-center" style="height: 100px; width: 100px;">
      <img class="img-fluid" src="cilents/asian-paints-logo-removebg-preview.png" alt="Asian Paints 2">
    </div>

    <div class="item d-flex align-items-center justify-content-center" style="height: 100px; width: 100px;">
      <img class="img-fluid" src="cilents/berger-removebg-preview.png" alt="Berger Paints">
    </div>

    <div class="item d-flex align-items-center justify-content-center" style="height: 100px; width: 100px;">
      <img class="img-fluid" src="cilents/CENTURYPLY.NS_BIG-33e1b422.png" alt="Century Ply">
    </div>

    <div class="item d-flex align-items-center justify-content-center" style="height: 100px; width: 100px;">
      <img class="img-fluid" src="images/bg/dulux-paints7333-removebg-preview.png" alt="Dulux Paints">
    </div>

    <div class="item d-flex align-items-center justify-content-center" style="height: 100px; width: 100px;">
      <img class="img-fluid" src="images/bg/hettich-logo-removebg-preview.png" alt="Hettich">
    </div>

    <div class="item d-flex align-items-center justify-content-center" style="height: 100px; width: 100px;">
      <img class="img-fluid" src="cilents/download-removebg-preview (2).png" alt="Download Logo">
    </div>

    <div class="item d-flex align-items-center justify-content-center" style="height: 100px; width: 100px;">
      <img class="img-fluid" src="cilents/1781092-middle-removebg-preview.png" alt="Client Logo">
    </div>

    <div class="item d-flex align-items-center justify-content-center" style="height: 100px; width: 100px;">
      <img class="img-fluid" src="cilents/Anchor_by_Panasonic_logo.svg-removebg-preview.png" alt="Anchor Panasonic">
    </div>

    <div class="item d-flex align-items-center justify-content-center" style="height: 100px; width: 100px;">
      <img class="img-fluid" src="cilents/BATHWARE_FINAL_LOGO.d064046d7dc121b9dacd-removebg-preview.png" alt="Bathware">
    </div>

    <div class="item d-flex align-items-center justify-content-center" style="height: 100px; width: 100px;">
      <img class="img-fluid" src="cilents/GREENPLY.NS_BIG.png" alt="Greenply">
    </div>
  </div>
</div>
      </div>
    </div>
  </div>
</div>

          <!--=================================
          Contact us -->

        </div>
      </div>
      <!--=================================
      footer-->
      <?php include "footer.php"; ?>
      <!--=================================
      footer-->
    </div>
      

    <!--=================================
    Back To Top -->
    <div class="progress-wrap">
      <svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
        <path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/>
      </svg>
    </div>
    <!--=================================
    Back To Top -->
    <!--=================================
    Javascript -->
    <!-- JS Global Compulsory (Do not remove)-->
    <script src="js/jquery-3.7.1.min.js"></script>
    <script src="js/jquery.appear.js"></script>
    <script src="js/popper/popper.min.js"></script>
    <script src="js/bootstrap/bootstrap.min.js"></script>
    <!-- Page JS Implementing Plugins (Remove the plugin script here if site does not use that feature)-->
    <script src="js/select2/select2.full.js"></script>
    <script src="js/jarallax/jarallax.min.js"></script>
    <script src="js/jarallax/jarallax-video.min.js"></script>
    <script src="js/owl-carousel/owl.carousel.min.js"></script>
    <script src="js/swiper/swiper.min.js"></script>
    <script src="js/wow.min.js"></script>
    <script src="js/swiperanimation/SwiperAnimation.min.js"></script>
    <script src="js/magnific-popup/jquery.magnific-popup.js"></script>
    <script src="js/counter/jquery.countTo.js"></script>
    <script src="js/gsap.min.js"></script>
    <script src="js/gsap-animated.js"></script>
    <script src="js/scrolltrigger.min.js"></script>
    <script src="js/stacking-cards.js"></script>
    <script src='js/splitting.min.js'></script>
    <script src="js/pannellum/pannellum.js"></script>
    <!-- Template Scripts (Do not remove)-->
    <script src="js/lenis.min.js"></script> 
    <script src="js/custom.js"></script>


    <!-- Include jQuery and Owl Carousel JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Owl Carousel JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
 
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const range = document.querySelector('[data-before-after-range]');
    const overlay = document.querySelector('[data-before-after-overlay]');
    const thumb = document.querySelector('[data-image-comparison-thumb]');

    function updateSlider(value) {
      overlay.style.width = `${value}%`;
      thumb.style.left = `${value}%`;
    }

    if (range && overlay && thumb) {
      updateSlider(range.value); // initial value

      range.addEventListener('input', function () {
        updateSlider(this.value);
      });
    }
  });
</script>
<!-- Add this JS for auto-play -->
<script>
  $(document).ready(function(){
    $(".owl-carousel").owlCarousel({
      autoplay: true, // Enables auto-play
      autoplayTimeout: 1000, // Sets the auto-play interval to 3 seconds (3000ms)
      loop: true, // Enables looping of the carousel
      
      dots: false, // Disables dots
      responsive: {
        0: {
          items: 2
        },
        600: {
          items: 3
        },
        1000: {
          items: 5
        }
      }
    });
  });
</script>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<script>
  $(document).ready(function(){
    $(".client-logo-slider").owlCarousel({
      loop: true,
      margin: 20,
      nav: false,
      autoplay: true,
      autoplayTimeout: 2000,
      responsive: {
        0: {
          items: 2
        },
        576: {
          items: 3
        },
        768: {
          items: 4
        },
        992: {
          items: 5
        },
        1200: {
          items: 6
        }
      }
    });
  });
</script>

<script>
    document.addEventListener("DOMContentLoaded", function () {
  const slider = document.querySelector('.before-after-slider');
  const thumb = document.querySelector('.before-after-thumb');
  const beforeImage = document.querySelector('.before-after-wrapper-overlay .before-after-figure-overlay');
  const rangeInput = document.querySelector('#before-after-range');

  // Function to update the thumb position
  function updateThumbPosition(event) {
    let sliderWidth = slider.offsetWidth;
    let thumbPosition = event.clientX - slider.offsetLeft;

    if (thumbPosition < 0) thumbPosition = 0;
    if (thumbPosition > sliderWidth) thumbPosition = sliderWidth;

    thumb.style.left = thumbPosition + 'px';

    // Adjust the clip of the before image based on the thumb position
    let clipValue = (thumbPosition / sliderWidth) * 100;
    beforeImage.style.clip = `rect(0, ${clipValue}%, 100%, 0)`;
  }

  // Event listeners for mouse movement and interaction
  slider.addEventListener('mousemove', function (event) {
    if (event.buttons === 1) {
      updateThumbPosition(event);
    }
  });

  slider.addEventListener('mousedown', function (event) {
    updateThumbPosition(event);
  });

  // Allow the slider to work with the range input as well
  rangeInput.addEventListener('input', function () {
    const value = rangeInput.value;
    thumb.style.left = value + '%';
    beforeImage.style.clip = `rect(0, ${value}%, 100%, 0)`;
  });
});

</script>
  </body>

<!-- Mirrored from themes.potenzaglobalsolutions.com/html/interium/index-03.html by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 15 Apr 2025 12:38:15 GMT -->
</html>