/*
Theme Name: QudsPixel Theme
Theme URI: https://qudapixel.com/
Author: QudsPixel
Author URI: https://qudapixel.com/
Description: A custom WordPress theme for QudsPixel - Design & Development Agency.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: custom-theme, bootstrap5
Text Domain: qudapixel
*/


/*
 * 1. Import Custom Fonts
 */
@font-face {
    font-family: 'Ponte TRIAL SilkType';
    src: url('fonts/PonteTRIALSilkType-Medium.ttf') format('opentype'); /* আপনার ফাইলের সঠিক পাথ */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GrailGa';
    src: url('fonts/Grailga-Regular.woff') format('opentype'); /* GrailGa ফন্ট ফাইলের সঠিক পাথ দিন */
    font-weight: normal;
    font-style: normal;
}

/*
 * 2. General Body and Element Styling
 */
body {
    background-color: #000;
    color: #fff;
    font-family: 'Poppins', sans-serif; /* ডিফল্ট ফন্ট */
}

a {
    text-decoration: none;
    transition: color 0.3s ease;
}

.service-cards{
  display: block;
}

.service-mobile{
  display: none !important;
}


.contact-btn, .show-more-title {
  animation: rotation 2s linear 0s infinite normal forwards;
  backdrop-filter: blur(50px);
  background: linear-gradient(var(--gradient-angle), black, #ff00cb);
  box-shadow: var(--gradient-angle), 0 0 10px 4px red;
  animation: rotation 2s linear 0s infinite normal;
  padding: 1px 1px;
  border-radius: 5px;
  display: flex; }

.s-p {
  transition: all 0.2s;
  backdrop-filter: blur(5px);
  padding: 13px 15px;
  border-radius: 5px;
  background: linear-gradient(-45deg, #1a0b06, #252525, #071a20, #323232); }

@keyframes rotation {
  0% {
    --gradient-angle: 0deg; }
  100% {
    --gradient-angle: 360deg; } }
@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false; }
.sticky-bottom {
  box-shadow: inset 0px 2px 3px 0px aqua; }

.sticky-bottom {
  display: block;
  position: fixed;
  bottom: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  background-color: #0f0f0f;
  color: white;
  padding: 11px;
  transition: bottom 0.3s ease-in-out;
  z-index: 1000;
  text-align: center;
  margin-bottom: 30px;
  border-radius: 10px; }
  .sticky-bottom .menu-items {
    display: flex;
    justify-content: space-between;
    align-items: center; }

.sticky-bottom.show {
  bottom: 0;
  /* মেনুটি দেখান */ }


/*
 * phone header Styling
 */
 
.phone-bottom {
  display: none !important; }

.phone-bottom .menu-items {
    background: #0f0f0f;
    box-shadow: inset 0px 2px 3px 0px aqua;
    border-radius: 20px 20px 0 0;
    z-index: 9999; }
    .phone-bottom .menu-items #sidebarCollapse {
      outline: none !important;
      box-shadow: none !important;
      border: none !important; }

  .phone-bottom .menu-items, .item-navbar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    /* Overlay effect */ }
    .phone-bottom .menu-items .ph-title, .item-navbar .ph-title {
      display: grid;
      justify-items: center;
      color: #fff;
      padding: 12px;
      gap: 0.3rem; }
      .phone-bottom .menu-items .ph-title i, .item-navbar .ph-title i {
        font-size: 20px; }
      .phone-bottom .menu-items .ph-title span, .item-navbar .ph-title span {
        font-size: 12px; }
    .phone-bottom .menu-items img, .item-navbar img {
      width: 45px; }
    .phone-bottom .menu-items #navbar-sidebar, .item-navbar #navbar-sidebar {
      position: fixed;
      bottom: 3rem;
      left: 0;
      width: 100%;
      height: 60%;
      background: #fff;
      transition: bottom 0.5s ease-in-out;
      overflow-y: auto;
      transform: translateY(100%);
      /* নিচ থেকে লুকানো থাকবে */
      transition: transform 0.5s ease-in-out, opacity 0.3s ease-in-out;
      opacity: 0;
      border-radius: 15px; }
      .phone-bottom .menu-items #navbar-sidebar a, .item-navbar #navbar-sidebar a {
        color: #373737 !important;
		font-weight: 600;
		transition: all 0.5s;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-right: 2rem;}
	.phone-bottom .menu-items #navbar-sidebar a, .item-navbar #navbar-sidebar a:hover{
		margin-left: 1rem;
		margin-right: 0rem !important;}
	.phone-bottom .menu-items #navbar-sidebar a, .item-navbar #navbar-sidebar a i{
		display: none;}
	.phone-bottom .menu-items #navbar-sidebar a, .item-navbar #navbar-sidebar a:hover i{
		display: block;}
    .phone-bottom .menu-items #navbar-sidebar.active, .item-navbar #navbar-sidebar.active {
      transform: translateY(0);
      /* নিচ থেকে ওপরে উঠবে */
      opacity: 1; }
    .phone-bottom .menu-items .overlay, .item-navbar .overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.5);
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
      display: none; }
    .phone-bottom .menu-items .overlay.active, .item-navbar .overlay.active {
      opacity: 1;
      display: block; }
    .phone-bottom .menu-items #dismiss, .item-navbar #dismiss {
      text-align: right;
      top: 10px;
      right: 10px;
      cursor: pointer;
      -webkit-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s; }
      .phone-bottom .menu-items #dismiss i, .item-navbar #dismiss i {
        font-size: 25px;
        background: #202020;
        color: #fff;
        border-radius: 25px;
        height: 40px;
        width: 40px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        margin: 5px; }
      .phone-bottom .menu-items #dismiss i:hover, .item-navbar #dismiss i:hover {
        background: #3d3d3d; }
    .phone-bottom .menu-items .contact-btn, .item-navbar .contact-btn {
      margin: 10px 0; }

  .side-menu-icons {
    right: 15px; }
    .side-menu-icons li {
      margin-bottom: 25px; }
    .side-menu-icons .icon a {
      font-size: 20px; }

  .menu-navbar-field{
    display: grid;
    grid-template-columns: auto auto;
    gap: 20px;
    padding: 10px 0;
    color: #000;
  }





.headline-cart{
    display: inline-flex;
    align-items: center;
    padding: 8px 20px;
    background-color: #d4f4f2;
    color: #000000;
    border: 1px solid #000000;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 500;
}

/*
 * Animated Gradient Button
 */
.animated-gradient-button {
  /* --- বেসিক বাটনের স্টাইল --- */
  display: inline-block;
  padding: 15px 45px;
  font-size: 1rem;
  font-weight: 600;
  color: #3b3b3b;
  text-decoration: none;
  border-radius: 9px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  border: 2px solid #dfdfdf;
  margin-top: 3rem;

  /* --- অ্যানিমেশনের মূল অংশ --- */
  
  /* ১. ২-৩টি রঙের একটি গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড তৈরি */
  background: linear-gradient(
    90deg,
    #09c5c2,
    #28fffb,
    #02aed4
  );
  background-size: 300% auto;
  animation: gradient-flow 4s linear infinite;

  background: linear-gradient( 90deg, #08D9D6, #00CFFF, #00FF40, #37E2D5 );
  background-size: auto;
  background-size: 300% 100%;
  animation: scroll-gradient-footer 5s linear infinite;
}

/* অ্যানিমেশনের Keyframes (কীভাবে প্রবাহিত হবে) */
@keyframes gradient-flow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

/* (বোনাস) হোভার করলে বাটনটি আরও আকর্ষণীয় করে তোলা */
.animated-gradient-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  /* হোভার করলে অ্যানিমেশনের গতি বাড়িয়ে দেওয়া যায় */
  animation-duration: 2s;
}

.animated-gradient-button span{
  margin-left: 1rem;
  transition: all 0.5s ease;
}
.animated-gradient-button:hover span {
  margin-left: 2rem;
  transition: all 0.5s ease;
}


/*
 * 3. Hero Section Styling
 */
.site-main {
    padding: 150px 0;
    position: relative;
    background-image: url('images/hero-background.jpg'); /* আপনার ব্যাকগ্রাউন্ড ইমেজ */
    background-size: cover;
    background-position: center;
    height: 1050px;
}

.hero-section h1 {
    /* দুটি ফন্টই এখানে যুক্ত করা হলো, আপনি যেটি পছন্দ করেন সেটি ব্যবহার করতে পারেন */
    /* font-family: 'Ponte TRIAL SilkType', serif; */
    font-family: 'Poppins', serif; /* হেডিং এর জন্য GrailGa ফন্ট ব্যবহার করা হলো */
    font-size: 4.5rem;
    font-weight: 500;
    color: #ffffff;
    /* 'We Craft Modern' এবং 'That Drive Growth' এর জন্য GrailGa ব্যবহৃত হবে */
}


.hero-section {
  margin-top: 5%;
}

.hero-section h1 .hero-style {
    font-family: 'GrailGa', sans-serif; /* 'Digital Experiences' এর জন্য Poppins ফন্ট */
    font-weight: 700;
}

.hero-section h1 .highlight {
    font-weight: 700;
    color: #00f0ff;
}

.hero-section .lead {
    font-family: 'Poppins', sans-serif;
    font-size: 1.5rem;
    color: #e0e0e0;
}


/* .hero-section .btn-primary {
    background-color: transparent;
    border: 2px solid #ff00ff;
    border-radius: 7px;
    padding: 15px 40px;
    margin-top: 30px;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    transition: all 0.3s ease;
} */

.hero-section .btn-primary:hover {
    background-color: #ff00ff;
    color: #000;
}

/*
 * 4. Header/Navbar Styling
 */
.site-header{
    display: flex;
    justify-content: center;
    margin-top: 1%;
    position: absolute;
    z-index: 99999;
    right: 0;
    left: 0;
}

/* .site-header .navbar-nav .nav-link {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    color: #ffffff;
} */
.site-header .navbar-nav .nav-link {
    font-family: 'Poppins', sans-serif;
    color: #ffffff;
    background: #202020;
    border-radius: 25px;
    padding: 8px 30px;
    font-size: 15px;
    transition: all 0.5s ease;
}
.site-header .navbar-nav .nav-link:hover {
    color: #000000;
    background: #bbb;
    transition: all 0.5s ease;
}
.site-header .navbar-nav .current_page_item .nav-link {
    color: #000000;
    background: #bbb;
}

/* .navbar-nav{
    background: linear-gradient(-45deg, #000, #000, #071a20, #000);
    border: 1px solid #353535;
    border-radius: 25px;
    padding: 3px 33px;
    gap: 20px;
} */

.navbar-nav{
  /* border: 2px solid #3c3c3c; */
  border-radius: 42px;
  padding: 8px 14px;
  gap: 10px;
  background: #202020;
  box-shadow: inset 0px -1px 1px 0px #628080;
}

.header_logo{
    display: flex;
    justify-content: center;
    margin-top: 9%;
    position: absolute;
    z-index: 99999;
    right: 0;
    left: 0;
}
/* .header_logo a {
    background: linear-gradient(-45deg, #000, #000, #071a20, #000);
    border: 1px solid #353535;
    border-radius: 25px;
    padding: 9px 20px;
} */
.header_logo a {
  animation: rotation 2s linear 0s infinite normal forwards;
  backdrop-filter: blur(50px);
  background: linear-gradient(var(--gradient-angle), black, aqua);
  box-shadow: var(--gradient-angle), 0 0 10px 4px red;
  animation: rotation 2s linear 0s infinite normal;
  padding: 1px 1px;
  border-radius: 5px;
  display: flex;
}

.navbar-brand img {
  max-height: 51px;
  background: #000;
  padding: 10px 20px;
  border-radius: 6px;
}



.work-section {
    padding: 100px 0;
}
/* .work-section .hero-img{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
} */
.work-section .hero-img .img-items img{
    height: 250px;
}
.work-section .hero-img .img-items{
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.sliders{
  display: flex;
  gap: 10px;
  overflow-x: scroll;
  scroll-behavior: smooth;
  scrollbar-width: none;
  margin-top: 1rem;
  align-items: center;}

.sliders .slides:hover {
  margin-top: 0rem !important;
  transition: all 0.5s; }

.sliders::-webkit-scrollbar {
  display: none; }


.effect-container { 
 position: relative; 
} 
.effect-container:before, 
.effect-container:after { 
 content: ""; 
 position: absolute; 
 top: 0; 
 bottom: 0; 
 width: 20%; 
 z-index: 1; 
} 
.effect-container:before { 
 left: 0; 
 background: linear-gradient(to right, #015F5E, transparent); 
} 
.effect-container:after { 
 right: 0; 
 background: linear-gradient(to left, #015F5E, transparent); 
}




  /*
 * 5. Client Marquee Section Styling
 */
.client-marquee-section {
    padding: 80px 0;
    background-image: url('images/grid-dot.jpg');
    color: #000000;
    overflow-x: hidden;
    height: 462px;
    background-size: cover;
}

.client-marquee-section .section-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 1px;
    margin-bottom: 70px;
    color: #333;
}

.marquee-wrapper {
    width: 100%;
    overflow: hidden;
    margin-bottom: 50px; /* প্রতিটি সারির মধ্যে ফাঁকা জায়গা */
}

.marquee-track {
    display: flex;
    align-items: center;
    /* width: fit-content; */
    white-space: nowrap; /* লেখা বা ছবিকে এক লাইনে রাখে */
}

.marquee-content {
    display: flex;
    align-items: center;
}

/* Animation */
.scroll-left {
    animation: marquee-left 30s linear infinite;
}

.scroll-right {
    animation: marquee-right 30s linear infinite;
}

@keyframes marquee-left {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

@keyframes marquee-right {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

/* Content Styling */
.marquee-track span {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1.2rem;
    color: #000;
    margin: 0 20px;
}

.marquee-track .dot {
    width: 8px;
    height: 8px;
    background-color: #000;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    margin: 0 15px;
}

.marquee-track img {
    height: 25px; /* লোগোর উচ্চতা */
    margin: 0 35px;
    /* filter: grayscale(1); */
    /* opacity: 0.5; */
    transition: all 0.3s ease;
}

.marquee-track:hover img {
    filter: grayscale(0); /* হোভার করলে রঙিন দেখাবে */
    opacity: 1;
}

/* Hover করলে অ্যানিমেশন থামানোর জন্য */
/* .marquee-track:hover {
    animation-play-state: paused;
} */


.client-marquee-section { 
 position: relative; 
}
.client-marquee-section:before, 
.client-marquee-section:after { 
 content: ""; 
 position: absolute; 
 top: 27%; 
 bottom: 0; 
 width: 50%; 
 z-index: 1; 
 height: 330px;
}
.client-marquee-section:before { 
 left: 0%; 
 background: linear-gradient(to right, white, transparent); 
}
.client-marquee-section:after { 
 right: 0%; 
 background: linear-gradient(to left, white, transparent); 
}



/*--------------------------------------------------------------
# About Us Section
--------------------------------------------------------------*/
.about-us-section {
    background-color: #ffffff;
    font-family: 'Inter', sans-serif;
    padding: 150px 0;
}

/* Image styling */
.about-section-image {
    border-radius: 24px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

/* Pill-shaped "About Us" tag */
.about-us-tag {
    display: inline-flex;
    align-items: center;
    padding: 8px 20px;
    background-color: #d4f4f2;
    color: #000000;
    border: 1px solid #000000;
    border-radius: 50px; /* Pill shape */
    font-size: 1rem;
    font-weight: 500;
    gap: 8px;
}

/* Headline styling */
.about-content h2 {
    color: #000000;
    line-height: 1.2;
}

/* Paragraph text styling */
.about-content p.text-secondary {
    color: #555 !important; /* Overriding bootstrap's default secondary color if needed */
    font-size: 1.1rem;
    line-height: 1.6;
}

/* "More About Us" button styling */
.btn-about-us {
    padding: 14px 32px;
    border-radius: 7px; /* Pill shape */
    transition: all 0.3s ease;
}

.btn-about-us:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
    .about-content {
        text-align: center;
        padding-left: 0 !important;
        margin-top: 30px;
    }
}



.services-section{
    padding: 100px 0;
    background-image: url('images/grid-dot.jpg');
    color: #000000;
    background-size: cover;
}
.services-section .section-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 60px;
    letter-spacing: 1px;
    margin-bottom: 20px;
    color: #000000;
    width: 50%;
}
.services-section .section-subtitle {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    color: #4b4b4b;
    margin-bottom: 30px;
    margin-bottom: 0;
    width: 50%;
}
.text-view{
    justify-content: space-between;
    align-items: center;
}



/*--------------------------------------------------------------
# Works Section
--------------------------------------------------------------*/
.works-section {
  padding: 100PX 0;
    position: relative;
    z-index: 1;
}

/* Giant background title "Works" */
.works-title {
    font-family: 'Poppins', sans-serif; /* বা আপনার পছন্দের কোনো sans-serif ফন্ট */
    font-weight: 600;
    font-size: 24rem; /* Responsive font size */
    line-height: 0.75;
    padding: 4rem 0;
    /* color: rgba(255, 255, 255, 0.07); */
    text-align: center;
    /* position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
    user-select: none;
    text-transform: uppercase; */
}

.works-header {
    position: relative;
    z-index: 2;
    padding-bottom: 20px;
}

.solutions-subtitle {
    font-family: "GrailGa", serif; /* একটি ক্লাসিক serif ফন্ট */
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 500;
    line-height: 1.1;
    margin: 0;
}

.works-intro p {
    font-size: 1.1rem;
    color: #cccccc;
    max-width: 450px;
}

.works-navigation {
    justify-content: flex-end;
    margin-right: 20%;
}



.view-btn{
    backdrop-filter: blur(50px);
    background: linear-gradient(var(--gradient-angle), black, #ff00cb);
    box-shadow: var(--gradient-angle), 0 0 10px 4px red;
    animation: rotation 2s linear 0s infinite normal;
    padding: 1px 1px;
    border-radius: 7px;
    display: flex;
}

@keyframes rotation {
  0% {
    --gradient-angle: 0deg; }
  100% {
    --gradient-angle: 360deg; } }
@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false; }

.btn-view-all {
    color: #fff;
    border-radius: 7px;
    padding: 13px 30px;
    transition: all 0.3s ease;
    background: linear-gradient(-45deg, #1a0b06, #000, #002733, #000);
}

.btn-view-all:hover {
    background: #C70A80;
    color: #fff;
}

.img-fluid {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.work-item-text {
    padding-right: 20px;
}

.work-title {
    font-size: 2.5rem;
    font-weight: 600;
}


.see-more-link {
    display: inline-flex;
    align-items: center;
    color: #00e0c6; /* Teal color from design */
    text-decoration: none;
    font-weight: 600;
    margin-top: 20px;
    transition: color 0.3s ease;
}

.see-more-link:hover {
    color: #fff;
}

.work-bg{
    background: #000;
    height: 103px;
    z-index: 99999;
    position: absolute;
    top: 8%;
    right: 0;
    left: 0;
    opacity: 0.9;
}


.quds-work img{
  width: 100%;
  height: auto;
  margin-bottom: 1.5rem;
}
.quds-work{
  margin-bottom: 2rem;
}

.work-text {
  display: grid;
  line-height: 3;
}
.work-text .work-name{
  font-size: 25px;
  font-weight: 500;
  color: #ffffff;
}
.work-text .work-description{
  font-size: 18px;
}
.work-cate{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 380px;
  height: 41px;
  justify-content: center;
  border-radius: 25px;
  background: #202020;
}
.work-cate a{
  font-size: 10px;
  padding: 2px 22px;
  border-radius: 25px;
  color: #fff;
}
.work-cate a:hover{
  color: #000;
  background: #fff;
  transition: all 0.3s;
}
.work-cate .a-2{
  background: #fff;
  color: #000;
}

.work-portfolio {
    display: flex;
    padding: 10px;
    justify-content: space-between;
    margin-top: 4rem;
  }

  .work-grid {
    flex-basis: 47%;

  }
  .work-field{
    margin-bottom: 4rem;
  }
  .img-item{
    margin-bottom: 1rem;
    overflow: hidden;
    transition: all 0.5s;
  }
  .img-item img {
    width: 100%;
    height: auto;
    transition: all 0.5s;
  }

  .work-video .work-video-img{
    overflow: hidden;
  }
  .work-video .work-video-img img{
    transition: all 0.5s;
  }


  .works-section .work-grid .img-item:hover {
    transform: perspective(1000px) rotateX(5deg) rotateY(-20deg) rotateX(5deg) rotateY(5deg);
    box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.5); }
  .works-section .work-grid img:hover {
    transform: scale(1.1); 
    transition: all 0.5s;}
  .works-section .work-bottom img:hover {
    transform: scale(1.1); 
    transition: all 0.5s;}
  .works-section .work-bottom .img-item:hover {
    border-radius: 30px;}

  .work-video .work-video-img img:hover {
    transform: scale(1.1); 
    transition: all 0.5s;}
  .work-video .work-video-img:hover {
    border-radius: 30px;}
    
    

/* Responsive adjustments */
@media (max-width: 991.98px) {
    .solutions-subtitle {
        text-align: center;
        margin-bottom: 30px;
    }
    .works-intro {
        text-align: center;
    }
    .works-navigation {
        justify-content: center;
    }
    .work-item-text {
        padding-right: 0;
        text-align: center;
        margin-bottom: 30px;
    }
}




/* Wavy Text Animation */


.wave {
  position: relative;
  display: inline-block; /* প্রতিটি অক্ষরকে আলাদা ব্লক বানানো হলো */
  
  /* অ্যানিমেশন প্রয়োগ করা হলো */
  animation: wave-animation 1.6s ease-in-out infinite;
  
  /* প্রতিটি অক্ষরের জন্য অ্যানিমেশনে দেরি (delay) তৈরি করা */
  /* এটাই ঢেউ তৈরির মূল কৌশল */
}

/* প্রতিটা অক্ষরকে একটির পর একটি অ্যানিমেট করা */
.wave:nth-child(1) { animation-delay: 0.1s; }
.wave:nth-child(2) { animation-delay: 0.2s; }
.wave:nth-child(3) { animation-delay: 0.3s; }
.wave:nth-child(4) { animation-delay: 0.4s; }
.wave:nth-child(5) { animation-delay: 0.5s; }
/* আপনার টেক্সটে যতগুলো অক্ষর আছে, ততগুলো যোগ করতে পারেন */


/* অ্যানিমেশনের Keyframes (কীভাবে নড়াচড়া করবে) */
@keyframes wave-animation {
  0%, 40%, 100% {
    transform: translateY(0); /* স্বাভাবিক অবস্থান */
  }
  20% {
    transform: translateY(-30px); /* উপরে উঠবে */
  }
}


/* অ্যানিমেশনের আগে এলিমেন্টগুলোকে লুকিয়ে রাখা */
.animate-on-scroll {
  opacity: 0; /* অদৃশ্য থাকবে */
  transform: translateY(50px); /* ৫০ পিক্সেল নিচে থাকবে */
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* যখন is-visible ক্লাস যুক্ত হবে, তখন দৃশ্যমান হবে */
.animate-on-scroll.is-visible {
  opacity: 1; /* সম্পূর্ণ দৃশ্যমান হবে */
  transform: translateY(0); /* স্বাভাবিক অবস্থানে ফিরে আসবে */
}

.quds-inner{
  top: 5% !important;
  left: -4% !important;
  display: flex;
  position: fixed;
  z-index: 999
}

.circle-items {
  display: flex;
  position: fixed;
  top: 70%;
  right: 1%;
  z-index: 999;}
  .circle-items .circle, .quds-inner .circle {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 100vmax;
    display: flex;
    align-items: center;
    justify-content: center; }
.circle-items .circle .logo img, .quds-inner .circle .logo img{
	width: 50px;
}
  .circle-items .text, .quds-inner .title {
    position: absolute;
    width: 100%;
    height: 100%;
    font-family: consolas;
    color: #000;
    font-size: 17px;
    animation: textRotation 8s linear infinite; }
@keyframes textRotation {
  to {
    transform: rotate(360deg); } }
  .circle-items .text span, .quds-inner .title span {
    position: absolute;
    left: 50%;
    font-size: 1.2em;
    transform-origin: 0 100px; }
  .circle-items .logo span, .quds-inner .logo span {
    font-size: 40px; }



/*
 * Animated Footer Logo
 */
.footer-logo-container {
    background-color: #000; /* ফুটারের ব্যাকগ্রাউন্ড কালো হলে দেখতে ভালো লাগবে */
    padding: 60px 0; /* উপরে-নিচে কিছু প্যাডিং */
    width: 100%;
}

.animated-footer-logo {
  /* Step 1: Define container size and position */
  display: block;
  width: 100%;
  height: 282px;
  margin: 0 auto;

  /* Step 2: Create the animated gradient background */
  background: linear-gradient(
    90deg,
    #08D9D6,
    #00CFFF,
    #E6FF00,
    #37E2D5
  );
  
  /* Gradient-কে চওড়া করা হলো মসৃণ স্ক্রলিংয়ের জন্য */
  background-size: 300% 100%;
  
  /* অ্যানিমেশন প্রয়োগ করা হলো */
  animation: scroll-gradient-footer 5s linear infinite;

  /* Step 3: Use the WHITE PNG logo as a mask */
  -webkit-mask-image: url('./images/qudspixel-3.png');
  mask-image: url('./images/qudspixel-3.png');
  
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Keyframes for the scrolling gradient animation */
@keyframes scroll-gradient-footer {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 150% 50%;
  }
}


/*
 * Jagged Edge Footer Effect with Fade-Out
 */
.site-footer {
  position: relative;
  padding-bottom: 20px; 
  padding: 50px 0; /* Adjusted padding for better spacing */
  background-color: #000; /* Footer background color */
  color: #ffffff; /* Footer text color */
}

.site-footer:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0; 
  width: 100%;
  height: 300px;
  background: linear-gradient(to top, #08D9D6, transparent); 
  z-index: 1;
}


/*--------------------------------------------------------------
# Project Process Section
--------------------------------------------------------------*/
.desk-process{
  display: block;
}
.mobile-process{
  display: none;
}

.project-process{
  background: #000;
  padding: 100px 0;
}
.process-final img{
  width: 100%;
  height: auto;
}
/* process-btn img{
  width: 100%;
  height: auto;
  border-radius: 20px;
} */
.process-btn{
  padding-top: 50px;
  padding-left: 42px;
 }
.process-btn a{
  display: inline-block;
  padding: 15px 30px;
  color: #fff;
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.3s ease;
  font-size: 18px;
}
.process-btn span{
  font-weight: 600;
}
.process-btn a:hover{
  color: #08D9D6; /* আপনার ব্র্যান্ডের রঙ দিন */
  transform: translateY(-3px);
}



/*
 * FAQ & CTA Section Styles
 * ---------------------------------------
 */

.faq-cta-section {
    padding: 100px 0;
    background-image: url('images/grid-dot.jpg');
    background-size: cover;
}

/* Section Tag ("Frequently Asked Questions") */
.section-tag {
    display: inline-flex;
    align-items: center;
    padding: 8px 20px;
    background-color: #d4f4f2;
    border: 1px solid #1a1a1a;
    border-radius: 50px;
    margin-bottom: 20px;
    color: #000;
    gap: 10px;
}

/* Section Title ("Things You Should Know") */
.section-title .main-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    color: #1a1a1a;
    display: block;
    line-height: 1.1;
}
.section-title .serif-title {
    font-family: 'GrailGA', serif; /* একটি সুন্দর Serif ফন্ট */
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 500;
    color: #1a1a1a;
    display: block;
    line-height: 1.5;
}

.custom-faq-wrapper {
    max-width: 991px; /* আপনার প্রয়োজন অনুযায়ী প্রস্থ দিন */
    margin: 0 auto;
}

.faq-item {
    background-color: #F0F0F0;
    border-radius: 15px;
    margin-bottom: 25px;
    overflow: hidden; /* ভেতরের কন্টেন্টকে বর্ডারের বাইরে যেতে দেবে না */
    border-radius: 14px
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    cursor: pointer; /* মাউস আনলে হাতের চিহ্ন দেখাবে */
    user-select: none; /* টেক্সট সিলেক্ট করা যাবে না */
}

.faq-question h4 {
    margin: 0;
    font-size: 1.5rem;
    color: #1a1a1a;
}

/* --- কাস্টম অ্যারো বাটন স্টাইল --- */
.faq-arrow-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background-color: #c4c4c4;
    border-radius: 50%;
    transition: transform 0.4s ease; /* অ্যারো ঘোরার জন্য ট্রানজিশন */
    flex-shrink: 0; /* স্ক্রিন ছোট হলে বাটনটি সংকুচিত হবে না */
    margin-left: 15px;
}

.faq-arrow-btn i {
    width: 16px;
    height: 16px;
    color: #393939;
}

/* --- উত্তর সেকশনের স্টাইল --- */
.faq-answer {
    max-height: 0; /* প্রাথমিকভাবে উত্তর লুকিয়ে রাখা হবে */
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out, opacity 0.4s ease-out, padding 0.4s ease; /* স্মুথ অ্যানিমেশন */
    padding: 0 25px; /* প্রাথমিকভাবে প্যাডিং থাকবে না */
}

.faq-answer p {
    margin: 0;
    padding-bottom: 25px; /* উত্তরের নিচে স্পেস */
    color: #6c757d;
    line-height: 1.7;
    font-size: 1.1rem;
}


/* --- JavaScript দিয়ে যুক্ত করা 'active' ক্লাসের স্টাইল --- */

.faq-item.active .faq-answer {
    max-height: 200px; /* উত্তর দেখানোর জন্য একটি বড় মান দিন */
    opacity: 1;
}

.faq-item.active .faq-arrow-btn {
    transform: rotate(180deg); /* অ্যারোটি ঘুরে যাবে */
}


/* CTA Card Styles */
.cta-card {
    border-radius: 25px;
    padding: 60px;
    color: #fff;
    overflow: hidden;
}

.cta-bg{
    background-image: url('images/lets-talk.png'); /* ডার্ক ব্যাকগ্রাউন্ড ইমেজ */
    background-size: cover;
    width: 100%;
    padding: 0 42px;
    border-radius: 30px;
    height: 400px;
}

.cta-title {
    font-weight: 800;
}

.cta-title .main-title, .cta-title .serif-title {
    font-size: 36px;
    line-height: 1.2;
    display: block;
}

.cta-title .serif-title {
    font-family: 'GrailGA', serif;
    font-weight: 500;
}

.cta-subtitle {
    font-size: 1rem;
    color: #cccccc;
    margin-top: 20px;
    margin-bottom: 30px;
}

.btn-cta {
    background-color: #ff4081; /* আপনার ব্র্যান্ডের রঙ দিন */
    color: #fff;
    font-weight: bold;
    padding: 15px 35px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid #fff;
}

.btn-cta:hover {
    background-color: #f50057;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(255, 64, 129, 0.4);
}


/*
 * Projects Section Styles
 * --------------------------------------------------
 */

.projects-inner {
  background: #000000;
  padding: 120px 0; }


  .projects-title {
  margin-bottom: 3rem; }
  .projects-title h2 {
    font-size: 43px;
    font-weight: 600; }
  .projects-title p {
    font-size: 17px; }

  .projects-btn{
    margin-top: 1rem;
    font-weight: 400 !important;
  }

/*
 * Professional Footer Styles
 * --------------------------------------------------
 */


.footer-col {
  margin-bottom: 40px;
}
.footer-col img {
  max-width: 100px;
  margin-bottom: 20px;
}
.footer-col h2 {
  font-size: 2rem;
  color: #ffffff;
  font-weight: 600;
}

.footer-about img{
  max-width: 200px !important;
}

.footer-top{
  margin-bottom: 6rem;
}


.footer-widget-title {
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 25px;
  position: relative;
  padding-bottom: 10px;
}



.alert-footer{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3rem;
}

.alert-footer p{
  margin-bottom: 0;
}

.company-document i{
  background: #FFB300;
  border-radius: 50px;
  height: 60px;
  width: 60px;
  align-content: center;
  color: #fff;
  margin-right: 0.5rem;
}
.company-document .desk-text{
  font-weight: 600;
  color: #fff;
  font-size: 1.2rem;
}

/* Footer Menu Styles */
.footer-menu-list ul{
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-menu-list li a {
  color: #a9a9a9;
  text-decoration: none;
  display: block;
  padding: 5px 0;
  transition: all 0.3s ease;
}

.footer-menu-list li a:hover {
  color: #ffffff;
  transform: translateX(5px);
}

/* Social Media Icons */
.footer-social-icons a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #333;
  color: #fff;
  margin-right: 10px;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.footer-social-icons a:hover {
  background-color: #007bff; /* আপনার ব্র্যান্ডের রঙ দিন */
  transform: translateY(-3px);
}

/* Newsletter Form */
.footer-newsletter-form {
  display: flex;
  margin-top: 20px;
}

.footer-newsletter-form input {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #444;
  background-color: #333;
  color: #fff;
  border-radius: 5px 0 0 5px;
  outline: none;
}

.footer-newsletter-form button {
  padding: 12px 20px;
  border: none;
  background-color: #007bff; /* আপনার ব্র্যান্ডের রঙ দিন */
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  border-radius: 0 5px 5px 0;
  transition: background-color 0.3s ease;
}

.footer-newsletter-form button:hover {
  background-color: #0056b3;
}

/* Bottom Bar */
.footer-bottom-bar {
  background-color: #000;
  padding: 20px 0;
  margin-top: 40px;
  text-align: center;
}

.footer-bottom-bar p {
  margin: 0;
  font-size: 0.9rem;
}

/* Responsive Adjustments */
@media only screen and (min-width: 992px) and (max-width: 1199px) {

  /* .site-header .navbar-nav .nav-link{
    font-size: 13px;
    padding: 8px 20px;
  } */

  .navbar-brand img{
    max-height: 46px;
  }

  .header_logo{
    margin-top: 12%;
  }

   .site-main {
    /* background-image: url('images/hero-background-2.jpg'); */
    padding: 120px 0;
    height: 843px;
  }
  
  .sticky-bottom{
    width: 75%;
  }

  .hero-section{
    margin-top: 8%;
  }

  .hero-section h1{
    font-size: 3rem;
  }

  .animated-gradient-button{
    font-size: 0.8rem;
    padding: 14px 35px;
    margin-top: 1rem;
  }

  .work-section .hero-img .img-items img{
    height: 200px;
  }

  .about-us-tag{
    font-size: 0.6rem;
  }
  .about-content h2{
    font-size: 35px;
  }

  .about-content p.text-secondary{
    font-size: 0.7rem;
  }

  .btn-about-us{
    font-size: 0.8rem;
  }

  .services-section .section-title{
    font-size: 46px;
  }

  .works-title{
    font-size: 17rem;
  }

  .cta-bg{
    height: 289px;
  }

  .cta-title .main-title, .cta-title .serif-title{
    font-size: 23px;
  }

  .cta-subtitle{
    font-size: 0.8rem;
  }

  .btn-cta{
    font-size: 0.7rem;
  }
}





@media only screen and (min-width: 1370px) and (max-width: 1605px) {
  .header_logo{
    margin-top: 12%;
  }
  .hero-section {
    margin-top: 7%;
  }

}



@media only screen and (min-width: 1200px) and (max-width: 1369px) {

  .header_logo{
    margin-top: 11%;
  }
  .hero-section {
    margin-top: 8%;
  }
  .hero-section h1 {
    font-size: 3.7rem;
  }

  .hero-section .lead {
    font-size: 1.2rem;
  }

  .site-main {
    /* background-image: url('images/hero-background-2.jpg'); */
    height: 1000px;
  }
  
  .works-title {
    font-size: 20rem; /* Responsive font size */
  }

  .sticky-bottom{
    width: 60%;
  }

  .footer-widget-title::after {
    left: 50%;
    transform: translateX(-50%);
  }
  .footer-newsletter-form {
    justify-content: center;
  }
}



@media (max-width: 991.98px) {

  .site-main {
    /* background-image: url('images/hero-background-4.jpg'); */
    height: 725px;
  }

  .header_logo{
    margin-top: 6%;
  }
  .hero-section {
    margin-top: 2%;
  }

  .hero-section h1{
    font-size: 2.5rem;
  }

  .hero-section .lead{
    font-size: 1rem;
  }

  .animated-gradient-button{
    font-size: 0.8rem;
    margin-top: 2rem;
  }

  .work-section .hero-img .img-items img{
    height: 200px;
  }

  .work-section{
    padding: 65px 0;
  }

  .services-section .section-title{
    width: 100%;
  }

  .works-title{
    font-size: 13rem;
  }

  .work-bg{
    height: 43px;
    top: 7%;
  }

  .solutions-subtitle{
    font-size: 55px;
  }

  .works-intro p{
    max-width: 100%;
  }

  .work-portfolio{
    display: block;
  }

  .cta-card {
    padding: 0px;
  }

  .cta-bg{
    background-image: url('images/lets-talk-2.png'); /* ডার্ক ব্যাকগ্রাউন্ড ইমেজ */
    background-size: cover;
    width: 100%;
    height: 345px;
  }

  .cta-title .main-title, .cta-title .serif-title{
    font-size: 30px;
    line-height: 1.5;
  }

  .company-document .desk-text{
    font-size: 0.8rem;
  }

  .company-document i{
    width: 40px;
    height: 40px;
  }

  .footer-social-icons a{
    width: 35px;
    height: 35px;
    font-size: 0.8rem;
  }

  .footer-bottom-text p{
    font-size: 0.8rem;
  }


  .footer-col {
    text-align: center;
  }
  .footer-widget-title::after {
    left: 50%;
    transform: translateX(-50%);
  }
  .footer-newsletter-form {
    justify-content: center;
  }
  .footer-bottom-bar {
    text-align: center;
  }
  .footer-bottom-bar p {
    font-size: 0.8rem;
  }
  .footer-social-icons {
    justify-content: center;
  }
  .footer-social-icons a {  
    margin-right: 5px;
  }
  .footer-social-icons a:last-child {       
    margin-right: 0;
  }
}




/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (max-width: 768px) {

  .navbar-brand img{
    max-height: 40px;
  }

  .header_logo{
    margin-top: 7%;
  }

  .service-cards{
    display: none;
  }

  .service-mobile{
    display: block !important;
  }

  .img-fluid{
    border-radius: 15px;
  }

  .sticky-bottom {
    display: none; }

  .phone-bottom{
    display: block !important;
  }

  .work-bg{
    top: 3.7%;
    height: 65px;
  }

  .works-section{
    padding: 40px 0;
  }

  .works-title {
    font-size: 9rem;
  }

  .text-view{
    flex-direction: column;
    gap: 2rem;
    align-items: normal;
  }
  .view-btn{
    width: fit-content;
  }

  .projects-title h2 {
    margin-bottom: 1.5rem;
  }

  .services-section .section-subtitle{
    width: 100%;
  }

  .about-us-section{
    padding: 100px 0;
  }


  .footer-col {
    text-align: center;
  }
  .footer-widget-title::after {
    left: 50%;
    transform: translateX(-50%);
  }

  .alert-footer {
    flex-direction: column;
    gap: 2rem;
  }

  .process-btn{
    padding-left: 0 !important;
  }
  .process-btn a{
    padding: 0 10px;
  }

  .project-process{
    padding: 65px 0;
  }

 .desk-process{
    display: none;
  }
  .mobile-process{
    display: block;
  }

  .services-section{
    background-image: url('images/grid-dot-2.jpg');
}



}


@media only screen and (min-width: 481px) and (max-width: 600px) {

  .navbar-brand img{
    height: 43px;
  }

  .header_logo{
    margin-top: 8%;
  }

  .hero-section h1{
    font-size: 2rem;
  }

  .hero-section .lead{
    font-size: 0.8rem;
  }

  .animated-gradient-button{
    padding: 15px 39px;
    margin-top: 1.5%;
  }

  .site-main{
    height: 684px;
  }

  .scroll-left{
    animation: marquee-left 20s linear infinite;
  }
  .scroll-right {
    animation: marquee-right 20s linear infinite;
  }
  .circle-items{
    top: 66%;
    right: -6%;
  }

  .circle-items .text span{
    font-size: 0.9rem;
    left: 50%;
    top: 14%;
    transform-origin: 0px 70px;
  }

  .client-marquee-section{
    height: 420px;
  }

  .headline-cart{
    font-size: 0.8rem;
  }

  .services-section .section-title{
    font-size: 46px;
  }

  .btn-view-allZ{
    font-size: 13px;
  }

  .services-section .section-subtitle{
    font-size: 0.8rem;
  }

  .works-title{
    font-size: 8rem;
  }

  .cta-bg {
    background-image: url('images/lets-talk-3.png');
    height: 302px;
  }

  .cta-title .main-title, .cta-title .serif-title{
    font-size: 22px;
  }
  .cta-subtitle{
    font-size: 0.8rem;
    margin-top: 6px;
    margin-bottom: 20px;
  }
  .btn-cta{
    font-size: 12px;
  }

  .projects-title h2{
    font-size: 27px;
  }
  .projects-title p{
    font-size: 12px;
  }
  .projects-btn{
    font-size: 12px;
  }

  .alert-footer{
    flex-direction: column;
    gap: 2rem;
  }

  .animated-footer-logo{
    height: 100px;
  }

}

@media screen and (min-width: 320px) and (max-width: 480px) {

  .site-main {
    /* background-image: url('images/hero-background-5.jpg'); */
    padding: 100px 0;
    height: 608px;
  }

  .header_logo{
    margin-top: 9%;
  }

  .navbar-brand img{
    height: 38px;
  }

  .hero-section h1{
    font-size: 1.7rem;
  }

  .animated-gradient-button{
    padding: 13px 27px;
    margin-top: 1rem;
    border-radius: 6px !important;
    font-size: 0.7rem;
  }

  .hero-section .lead{
    font-size: 0.8rem;
  }

  .work-section .hero-img .img-items img{
    height: 160px;
  }

  .marquee-track img{
    height: 17px;
    margin: 0px 20px;
  }
  .marquee-track span{
    font-size: 1rem;
    margin: 0 7px;
  }

  .client-marquee-section .section-title{
    font-size: 0.8rem;
  }

  .scroll-left{
    animation: marquee-left 10s linear infinite;
  }
  .scroll-right {
    animation: marquee-right 10s linear infinite;
  }


  .about-us-tag{
    font-size: 0.7rem;
  }

  .about-content p.text-secondary{
    font-size: 0.8rem;
  }

  .btn-about-us{
    font-size: 0.9rem;
  }

  .headline-cart{
    font-size: 0.7rem;
  }
  .services-section .section-title{
    font-size: 40px;
  }

  .works-title{
    font-size: 6rem;
    padding: 3rem 0;
  }

  .work-bg {
    top: 3.2%;
    height: 50px;
  }

  .solutions-subtitle{
    font-size: 46px;
    margin-bottom: 8px;
  }

  .works-intro p{
    font-size: 0.9rem;
  }

  .work-video .work-video-img:hover {
    border-radius: 6px;
  }

  .work-text .work-description{
    font-size: 14px;
  }

  .work-cate a{
    font-size: 8px;
    padding: 2px 18px;
  }

  .work-cate{
    width: 304px;
  }

  .section-tag{
    font-size: 0.7rem;
  }

  .faq-question h4{
    font-size: 0.9rem;
  }

  .faq-arrow-btn{
    width: 30px;
    height: 30px;
  }

  .faq-arrow-btn i{
    width: 12px;
    height: 12px;
  }
  .faq-answer p{
    font-size: 0.7rem;
  }

  .cta-bg {
    background-image: url('images/lets-talk-3.png');
    height: 275px;
  }

  .cta-title .main-title, .cta-title .serif-title{
    font-size: 19px;
  }

  .cta-subtitle{
    font-size: 0.7rem;
    margin-top: 8px;
    margin-bottom: 20px;
  }

  .btn-cta{
    font-size: 0.6rem;
  }

  .projects-title h2{
    font-size: 30px;
  }

  .projects-title p{
    font-size: 10px;
  }

  .projects-btn{
    font-size: 0.7rem;
  }

  .alert-footer{
    flex-direction: column;
    gap: 2rem;
  }

  .animated-footer-logo{
    height: 100px;
  }

  .circle-items{
    top: 66%;
    right: -6%;
  }

  .circle-items .text span{
    font-size: 0.9rem;
    left: 50%;
    top: 14%;
    transform-origin: 0px 70px;
  }

  .quds-inner{
    top: 0% !important;
    left: -21% !important;
  }

}