@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

/*@font-face {*/
/*    font-family: 'Rozanova HUM - Demo';*/
/*    src: url('../fonts/RozanovaHUM-Demo-Thin.woff2') format('woff2'),*/
/*        url('../fonts/RozanovaHUM-Demo-Thin.woff') format('woff');*/
/*    font-weight: 100;*/
/*    font-style: normal;*/
/*    font-display: swap;*/
/*}*/

/*@font-face {*/
/*    font-family: 'Rozanova HUM - Demo Semi';*/
/*    src: url('../fonts/RozanovaHUM-Demo-SemiBold.woff2') format('woff2'),*/
/*        url('../fonts/RozanovaHUM-Demo-SemiBold.woff') format('woff');*/
/*    font-weight: 600;*/
/*    font-style: normal;*/
/*    font-display: swap;*/
/*}*/

body {
    background: #fff;
    color: #222222;
}

p,
li {
    font-family: "Poppins", sans-serif;
    /*color: #333;*/
    font-size: 1rem;
    line-height: 1.6;
    letter-spacing: .3px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
     font-family: "Manrope", sans-serif;
     /* letter-spacing: .3px; */
     line-height: 1.3;
     font-weight: bold;
     transition: .4s ease;
}

ul,
ol,
dl {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
    color: #333;
    font-size: 1rem;
    letter-spacing: .1px;
    font-weight: 400;
    font-family: "Poppins", sans-serif;
    transition: .4s ease;
}

img {
    max-width: 100%;
    height: auto;
    transition: .4s ease;
}


@media (min-width: 992px) and (max-width: 1399.98px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
        max-width: 1280px;
    }
}

:root {
    --primary: #fbd42a;
}

/* header css  */

.header {
    width: 100%;
    position: fixed;
    background: transparent;
    z-index: 99;
    padding: 10px 0;
}

.header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.menus ul {
    display: flex;
    align-items: center;
}

.menus ul li a {
    display: inline-block;
    padding: 10px 15px;
    text-transform: uppercase;
    color: white;
}

.head-socials a {
    width: 35px;
    height: 35px;
    display: inline-grid;
    place-content: center;
    border: 1px solid #ffffff;
    border-radius: 100%;
    margin: 0 1px;
    color: #ffffff;
}

.head-socials a:hover {
    color: var(--primary);
    border-color: var(--primary);
}

.logo img {
    width: 110px;
}

.sticky {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    background-color: #000000;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}


.banner-sec {
    background-image: url(../imgs/bg-1.jpg);
    width: 100%;
    /* height: 100vh; */
    background-size: cover;
    position: relative;
    padding-bottom: 4rem !important;
}

.banner-inner {
    display: flex;
    align-items: center;
    width: 100%;
    margin: auto;
    gap: 20px;
    margin: 5rem 0;
    position: relative;
}

.banner-right {width: 15%;}

.slide-text-1 h3,
.slide-text-2 h3 {
    color: white;
    font-size: 7rem;
    /* text-shadow: 1px 0 0 currentColor,
        -1px 0 0 currentColor,
        0 1px 0 currentColor; */
    font-weight: 800;
}

.slide-img img {
    width: 100%;
    margin-left: auto;
    height: 100%;
    object-fit: cover;
}

.slide-img {
    text-align: right;
    position: relative;
    z-index: -1;
    width: 100%;
    height: 100%;
    margin-left: auto;
}

.padding-inner {
    padding: 9rem 0 0;
}

.banner-left {
    position: relative;
    width: 85%;
    z-index: 9;
    margin: auto;
}

.slide-text-1 h3 {
    position: absolute;
    top: -70px;
    left: -25px;
}

.slide-text-2 h3 {
    position: absolute;
    right: -190px;
    bottom: -70px;
}

.banner-right p {
    color: #999999;
    line-height: 1.7;
}

.nav-btn a {
    display: inline-block;
    padding: 8px 20px;
    background: var(--primary);
    border-radius: 10px;
    color: #000;
    font-size: 15px;
}


.creative-sec {
    position: relative;
    width: 100%;
    height: 550px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background-image : url(../imgs/new-bg.jpg);
}

/*.creative-sec video {*/
/*    position: absolute;*/
/*    top: 50%;*/
/*    left: 50%;*/
/*    min-width: 100%;*/
/*    min-height: 100%;*/
/*    width: auto;*/
/*    height: auto;*/
/*    z-index: 1;*/
/*    transform: translate(-50%, -50%);*/
/*    object-fit: cover;*/
/*    filter: brightness(0.45);*/
/*}*/

.creative-sec::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 42%);
    z-index: 2;
}

.creative-sec .container {
    position: relative;
    z-index: 3;
    padding: 0 1rem;
    text-align: center;
}

p.sub-title {
    /*color: white;*/
    text-transform: uppercase;
    font-size: 1.1rem;
    margin: 0;
}

.web-title {
    font-size: 3rem;
    /* text-shadow: 1px 0 1px currentColor, -0.8px 0 0 currentColor; */
    font-weight: 900;
}

.web-title span {
    color: var(--primary);
}

.sec-padding {
    padding: 4rem 0;
}

.portflio-sec {
    /* background-image: url(../imgs/bg-2.jpg); */
    background-size: cover;
    background-position: center;
    padding: 3rem 0;
    position: relative;
    background-color: white;
}


.portfolio-slider .slide {
  transform: scale(0.85);
  transition: transform 0.5s ease;
  opacity: 0.5;
  pointer-events: none;
}

.portfolio-slider .slick-center {
  transform: scale(1.1);
  opacity: 1;
  z-index: 2;
  pointer-events: all;
}

.portfolio-slider .slide {
  /* padding: 15px; */
}
.portfolio-slider video {
  width: 100%;
  height: auto;
  /* border-radius: 10px; */
}


.port-img.video-thumb {
  position: relative;
  border-radius: 0;
  /* overflow: hidden; */
  margin: 2rem auto;
  height: auto;
  width: 100%;
  position: relative;
  width: 99%;
  padding-top: 56.25%; /* 16:9 ratio = (9/16 * 100%) */
  overflow: hidden;
  margin: 2rem auto;
}

.port-img.video-thumb video {
  display: block;
  width: 100%;
  border-radius: 0;
  cursor: pointer;
  height: auto;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  display: block;
}

.play-btn-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  /* width: 60px; */
  /* height: 60px; */
  /* background: rgba(0,0,0,0.5); */
  /* border-radius: 50%; */
  /* display: flex; */
  /* align-items: center; */
  /* justify-content: center; */
  transition: background 0.3s ease;
}

.play-btn-overlay:hover {
  /* background: rgba(0,0,0,0.7); */
}

.play-btn-overlay img {
  width: 30px;
  height: 30px;
  pointer-events: none; 
}


.nav-btn-2 a {
    display: inline-block;
    padding: 11px 28px;
    border: 3px solid #000000;
    color: #000000;
    border-radius: 7px;
    /* font-size: 1.3rem; */
}

.nav-btn-2 a:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #000;
}

.text-ticker {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    background: transparent;
    line-height: 0.267;
}

.ticker-content h3 {
    display: inline-block;
    /* padding-left: 100%; */
    animation: scroll-left 100s linear infinite;
    font-size: 7rem;
    color: rgb(0 0 0 / 8%);
    will-change: transform;
    text-shadow: 1px 0 0 currentColor, -1px 0 0 currentColor, 0 1px 0 currentColor;
    opacity: .3;
}

/* Hover to pause */
.text-ticker:hover .ticker-content h3 {
    animation-play-state: paused;
}

/* Keyframes for ticker scroll */
@keyframes scroll-left {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-100%);
    }
}



button.slick-arrow {
    border: none;
    background: transparent;
    color: #999;
    font-weight: bold;
    position: absolute;
    z-index: 9;
    top: 40%;
    width: 40px;
    height: 40px;
    display: grid;
    place-content: center;
    border: 1px solid;
    border-radius: 100%;
}

button.slick-prev.slick-arrow {
    left: -35px;
}

button.slick-next.slick-arrow {
    right: -35px;
}

.service-box {
    width: 95%;
    /* padding: 35px 30px; */
    background: white;
    border-radius: 10px;
    margin: 0 auto 20px;
    transition: .4s ease;
    color: #333;
    overflow: hidden;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.ser-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ser-text li {
    /* list-style: inside; */
    /* margin: 0 0 3px; */
}

.service-box:hover {
    background: var(--primary);
    /* transform: translateY(10px); */
    box-shadow: 0px 9px 9.6px 0.4px rgba(132, 132, 132, 0.29);
}

.service-box:hover img {
    transform: scale(1.1);
}

.ser-icon {
    overflow: hidden;
    height: 270px;
    /* margin: 0 0 25px; */
}

.ser-text {
    padding: 40px 25px;
}

.ser-arrow {
    color: #333;
    font-weight: 500;
    text-decoration: underline;
}

.service-slider button.slick-arrow {
    top: -26%;
    background: var(--primary);
    color: #000;
    transform: scale(1.1);
    right: 0;
    border: none;
}

.service-slider button.slick-prev.slick-arrow {
    left: auto;
    right: 65px;
}

.ab-1-img {
    width: 75%;
    margin-left: auto;
    height: 550px;
}

.ab-2-img {
    width: 80%;
    margin: auto;
    height: 590px;
}

.ab-right p {
    color: #d8d8d8;
    font-size: 1.2rem;
}

.vintage-hover {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: filter 0.6s ease;
}

.vintage-hover img {
    display: block;
    width: 100%;
    height: 100%;
    transform: scale(1) rotate(0);
    transition: transform 1s ease;
    object-fit : cover;
}

.vintage-hover:hover {
    filter: grayscale(0.2) sepia(0.5) contrast(1.1);
}

.vintage-hover:hover img {
    transform: scale(1.1) rotate(-0.5deg);
}

.vintage-hover .grain {
    pointer-events: none;
    position: absolute;
    inset: 0;
    background-image: url('../imgs/grain.png');
    opacity: 0;
    animation: flicker 0.3s infinite alternate;
    z-index: 2;
}

.vintage-hover:hover .grain {
    opacity: .5;
}

footer {
    background-image: url(../imgs/footer-bg.jpg);
    padding: 4rem 0 1rem;
    background-size: cover;
    background-position: top;
}

footer h4 {
    color: var(--primary);
    margin: 0 0 20px;
}

.footer-links ul li a {
    display: inline-block;
    padding: 0 0 8px 10px;
    text-transform: uppercase;
}

footer a, footer p , footer label {
    color: white;
}

li.footer-contact {
    margin: 0 0 15px;
    display: flex;
    align-items: baseline;
}

li.footer-contact i {
    width: 35px;
    height: 34px;
    display: grid;
    place-content: center;
    border: 1px solid var(--primary);
    color: var(--primary);
    border-radius: 100%;
    margin-right: 10px;
}

li.footer-contact a {
    width: 75%;
}

.footer-form input {
    border: none;
    background: transparent;
    padding: 5px 10px;
    outline: none;
    width: 100%;
    color: white;
}

.footer-form .form-flex:first-child {
    border-bottom: 1px solid #cdcdcd;
    padding: 0 0 10px;
    margin: 0 0 10px;
    width: 80%;
}

.footer-form i {
    color: white;
}

.footer-form input[type="submit"] {
    color: #000000;
    background: white;
    width: auto;
    padding: 4px 10px;
}

.footer-form input::placeholder {
    color: white;
}

.copyrights {
    text-align: center;
    padding: 20px 0 0;
    margin: 20px 0 0;
    border-top: 1px solid;
}

ul.slick-dots {
    display: flex;
    justify-content: end;
    gap: 5px;
}

ul.slick-dots li button {
    font-size: 0;
    border: none;
    width: 21px;
    height: 10px;
    background: #99999957;
    border-radius: 30px;
    transition: .4s ease;
}

ul.slick-dots li.slick-active button {
    width: 40px;
    background: var(--primary);
}

.inner-banner {
    padding: 13rem 0 4rem;
    background-attachment: fixed !important;
    background-position: top !IMPORTANT;
    position: relative;
    z-index: 9;
}

.inner-banner:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #000000c2, #78787821);
    z-index: -1;
    top: 0;
    left: 0;
}

.inner-main {
    width: 75%;
}

.inner-main .inner-title {
    font-size: 3.5rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1; /* number of lines to show */
    line-clamp: 1;
    -webkit-box-orient: vertical;
    font-weight: 900;
}

.service-pg .service-box {
    width: 100%;
    margin: 0 0 25px;
}


.recent-blog li img {
    width: 65px;
    height: 60px;
    object-fit: cover;
}

.recent-blog li a {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* number of lines to show */
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.recent-blog li span {
    opacity: .5;
    font-size: 12px;
}

.recent-blog li {
    border-bottom: 1px solid #cdcdcd;
    padding: 0 0 10px;
}

.blog-subscribe {
    padding: 25px;
    border: 1px solid #ebebeb;
}

.blog-sidebar {
    width: 95%;
    margin-left: auto;
    position: sticky;
    top: 50px;
}

.blog-author {
    border: 1px solid #ebebeb;
    padding: 25px;
    text-align: center;
}

.blog-author img {
    margin: 0 0 15px;
    width: 100%;
    height: 400px;
    object-fit: cover;
}

.follow-box {
    background: #f3f3f3;
    padding: 25px;
}

/* contact  */

input[type="submit"] {
    width: 100%;
    padding: 10px 45px;
    border: none;
    background: var(--primary);
    color: #000;
    font-size: 1rem;
}

.contact-right {
    width: 90%;
    margin-left: auto;
}

.contact-box {
    border-bottom: 1px solid #ebebeb;
    padding: 0 0 15px;
}

.contact-left form {
    padding: 35px;
    background: #0f1010;
}

.form-control, label , input[type="submit"] {
    font-family: 'Poppins';
}




 .meta-info li {
      list-style: none;
      margin-bottom: 0.5rem;
    }
    .meta-info strong {
      min-width: 100px;
      display: inline-block;
    }

    .process-step {
      border-left: 5px solid #fbd42a;
      padding-left: 1rem;
      margin-bottom: 2rem;
    }
    .process-step h5 {
      /* font-weight: 700; */
      /* color: #333; */
      /* margin-bottom: 0.5rem; */
    }
    .step-image img {
      width: 100%;
      height: 250px;
      object-fit: cover;
      border-radius: 10px;
    }

.sidebar-box {
      background: #000;
      padding: 25px;
      /* border-radius: 10px; */
      border: 1px solid #cdcdcd69;
    }
    .sidebar-box h5 {
      margin-bottom: 1rem;
      font-weight: bold;
    }
    .sidebar-box ul {
      padding-left: 0;
      list-style: none;
    }
    .sidebar-box ul li a {
      display: block;
      padding: 8px 12px;
      color: #000000;
      text-decoration: none;
      border-radius: 5px;
      transition: 0.3s;
      background: var(--primary);
      margin: 0 0 10px;
    }
    .sidebar-box ul li a:hover {
      background: #ffffff;
      /* color: #fff; */
    }

 .counter-stroke {
    color: #000;
    font-family: "Poppins", sans-serif;
    font-size: 100px;
    font-weight: 600;
    line-height: 1em;
    letter-spacing: -2px;
opacity: .5;
    position: relative;
    display: inline-block;
  }

  .unit-k {
    color: #000;
    font-family: "Poppins", sans-serif;
    font-size: 77px;
    font-weight: 600;
    line-height: 1em;
    letter-spacing: -2px;
opacity: .5;
    position: relative;
    display: inline-block;
  }
  
  
 .counter-box p {
    color: #333;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 1.1rem;
} 

.progress-bar {
    background-color: var(--primary);
}


/*.white-box {*/
/*  background-color: #fff;*/
/*  transition: 0.3s ease;*/
/*  border: 1px solid #eaeaea;*/
/*  color: #333;*/
/*}*/

/*.white-box:hover {*/
/*  transform: translateY(-6px);*/
/*  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);*/
/*}*/

/*.int-hath {*/
/*  position: relative;*/
/*  z-index: 2;*/
/*}*/

.overlay {
  background-color: rgba(0, 0, 0, 0.7);
}

.logo-gray {
/*   filter: grayscale(100%); */
/*   opacity: 0.7; */
  transition: all 0.3s ease;
  max-height: 95px;
  object-fit: contain;
  margin: auto;
  width: 200px;
  object-fit: contain;
}

.logo-gray:hover {
/*   filter: grayscale(0%); */
/*   opacity: 1; */
  transform: scale(1.05);
}

.portfolio-row .col-md-12:nth-child(even) .row {
    flex-direction: row-reverse;
}

#videoControlBtn {
    border: 2px solid #fff;
    background: transparent;
    color: white;
}

.blog-box {
    width: 97%;
    position: relative;
    background: white;
    margin: 0 auto 2rem;
}

.blog-img {
    height: 375px;
    position: relative;
    z-index: 9;
}

.blog-text {
    position: relative;
    bottom: 45px;
    z-index: 9;
    padding: 0px 10px;
}

.blog-text h3 {
    text-transform: uppercase;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1; /* number of lines to show */
    line-clamp: 1;
    -webkit-box-orient: vertical;
    font-size: 1.5rem;
    font-weight: 700;
}

.blog-read {
    display: flex;
    gap: 10px;
}

.author , .date {
    font-size: 13px;
    margin-right: 7px;
    font-family: "Poppins", sans-serif;
}

.blog-img:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 60%;
    background: linear-gradient(to top, #fff, transparent);
    bottom: 0;
    left: 0;
    z-index: 2;
}

a.blog-read-a {
    font-size: .9rem;
    font-weight: 500;
    text-decoration: underline;
}

.blog-slider .blog-box {
    margin : 0 auto 0;
}

 .video-control {
    position: absolute;
    /* top: 20px; */
    bottom: 20px;
    left: 20px;
    /* transform: translate(-50%, -50%); */
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    background: rgb(0 0 0 / 82%);
    padding: 10px 20px;
    border-radius: 30px;
    transition: all 0.5s ease;
    user-select: none;
  }
  
  .service-pg-video {
    border-radius: 20px;
    border: 1px solid #cdcdcd;
    padding: 10px;
    height: 600px;
}

.service-pg-video #myVideo {
    border-radius: 20px;
}

  /* When playing, move control to bottom left */
  .video-control.playing {
    /* top: auto; */
    bottom: 20px;
    left: 20px;
    transform: none;
    font-size: 1.2rem;
    background: rgba(0, 0, 0, 0.7);
  }

  .video-control i {
    font-size: 2rem;
  }

  /* Change icon when playing */
  .video-control.playing i {
    content: "\f04c"; /* fa-pause-circle unicode, fallback if needed */
  }

.bg-darks {
    background-color: #0f1010;
}

.ser-text p {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* number of lines to show */
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.feature-box {
    width: 100%;
    padding: 35px  0;
    border-bottom: 1px solid #a5a5a5;
    border-right: 1px solid #a5a5a5;
    min-height: 210px;
    transition : .4s ease;
}

.feature-box img {
    width: 80px;
    height: auto;
    margin: 0 0 20px;
    background: var(--primary);
    padding: 10px;
    border-radius: 10px;
}

.feature-box:hover {
    background: white;
}

.feature-box:hover img {
    /* background: #000000; */
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.feature-box:hover h5 {
    color: #000000;
    transform: scale(1.1);
}

.testimonial-box {
    position: relative;
    background: #8181811a;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 30px;
    width: 95%;
    margin: auto;
}

.test-icon img {
    position: absolute;
    right: 40px;
    filter: grayscale(1);
}

.testimonial-box p {
    margin: 50px 0 0;
    color: white;
}

.testimonial-box hr {
    border-color: white;
    opacity: 1;
    margin: 1.5rem 0;
}

.test-info p , .test-info h6 {
    margin: 0;
    color: white;
}

.test-info {
    display: flex;
    gap: 10px;
}

.test-info img {
    width: 60px;
    height: 60px;
    border-radius: 100%;
}

.why-matter-txt {
    width: 80%;
    margin: auto;
}

section.why-matter {
    background: url(../imgs/bg-1.jpg) center center / cover no-repeat;
    background-attachment: fixed;
}

.portfolio-img-slider .large-img video {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}


.porftolio-bts-img {
    width: 100%;
    margin: 0 auto 2rem;
	height: 300px;
}

.contact-left label {
    color: white;
}

/*.custom-video-wrapper {*/
/*  position: relative;*/
/*  width: 100%;*/
  /* padding-top: 56.25%; */ /* 16:9 aspect ratio */
/*  overflow: hidden;*/
  /* border-radius: 10px; */
/*  height: auto;*/
/*  margin: 2rem auto 0;*/
/*}*/

/*.custom-video {*/
  /* position: absolute; */
/*  top: 0;*/
/*  left: 0;*/
/*  width: 100%;*/
/*  height: 100%;*/
/*  object-fit: cover;*/
  /* border-radius: 10px; */
/*}*/

/*.custom-play-toggle {*/
  /* position: absolute; */
/*  bottom: 30px;*/
/*  right: 30px;*/
  /* transform: translate(-50%, -50%); */
/*  background: rgb(255 255 255);*/
/*  padding: 15px;*/
/*  border-radius: 50%;*/
/*  cursor: pointer;*/
/*  z-index: 10;*/
/*  transition: all 0.3s ease;*/
/*  width: 40px;*/
/*  height: 40px;*/
/*  display: grid;*/
/*  place-content: center;*/
/*  margin: auto;*/
/*  color: #000;*/
/*}*/

/*.custom-play-toggle i {*/
/*  color: #000000;*/
/*  font-size: 17px;*/
/*}*/


/*.custome-text {*/
/*    position: absolute;*/
/*    top: 45%;*/
/*    left: 50%;*/
/*    transform: translate(-50% , -50%);*/
/*    text-align: center;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    margin: auto;*/
/*    transition: .5s ease;*/
    /*opacity: 0;*/
/*    background: #000000a3;*/
/*    color: white;*/
/*    padding: 35px 25px;*/
/*    display: grid;*/
/*    place-content: center;*/
/*    gap: 3px;*/
/*}*/

/*.custom-video-wrapper:hover .custome-text {*/
/*    opacity: 1;*/
/*    top: 50%;*/
/*}*/

.custom-video-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin: 2rem auto 0;
}

/* Thumbnail Image */
.video-thumbnail img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Hide video by default */
.custom-video.d-none {
  display: none;
}

/* Overlay text always centered */
.custome-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding: 20px;
  opacity: 1; /* always visible on thumbnail */
  transition: opacity 0.4s ease;
}

/* Optional: fade overlay out while playing */
.custom-video-wrapper.playing .custome-text {
  opacity: 0;
}

.custom-play-toggle {
  /* position: absolute; */
  /* top: 50%; */
  /* left: 50%; */
  background: #fff;
  padding: 12px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 11;
  transition: all 0.3s ease;
  width: 40px;
  height: 40px;
  display: grid;
  place-content: center;
  color: #000;
  /* transform: translate(-50% , -50%); */
}


section {
    overflow-x: clip;
}

.web-title-2 {
    font-size: 3rem;
    font-weight: 900;
}

.custome-text .nav-btn-2 a {
    border-color: white;
    color: white;
}

.custome-text .nav-btn-2 a:hover {
    color: #000;
    border-color: var(--primary);
}

.form-flex .d-flex p {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #cdcdcd;
}

.offcanvas-start {
    background: #000;
}

.offcanvas-header img {
    width: 100px;
}

button.btn-close {
    background: white;
    opacity: 1;
    line-height: 1;
}

.menus.mobile-menus ul {flex-direction: column;align-items: flex-start;}

.menus.mobile-menus ul li {
    width: 100%;
}

.menus.mobile-menus ul li a {
    padding: 8px 10px;
    width: 100%;
    border-bottom: 1px solid #cdcdcd47;
    font-size: 14px;
}

.testimonial-slider {
    width: 95%;
    margin: auto;
}

.breadcrumb-item+.breadcrumb-item::before {
    color: white !important;
}

.service-detail li {
    list-style: inside;
    margin: 0 0 8px;
}

.footer-logo img {
    width: 180px;
}

img.service-de-img {
    width: 100%;
    height: auto;
}

.copyrights a {
    color: #fbd42a;
}

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

@media only screen and (max-width: 1360px) {
    html {
        font-size: 15px;
    }
}


@media only screen and (max-width: 1280px) {
    .slide-text-1 h3, .slide-text-2 h3 {
    font-size: 5rem;
}

.slide-text-1 h3 {
    left: 0;
}

.slide-text-2 h3 {
    right: -100px;
}

.banner-left {
    width: 75%;
}

.banner-right {
    width: 20%;
}

.web-title-2 {
    font-size: 2.6rem;
}

    
}
@media only screen and (max-width: 1140px) {
    


    
}
@media only screen and (max-width: 991px) {
    
.desk-menus {
    display: none;
}

.head-socials {
    margin-left: auto;
    margin-right: 10px;
}

a.btn.toggle {
    background: #fff;
    color: #000;
}

.banner-inner {
    flex-wrap: wrap;
}

.banner-left {
    width: 100%;
}

.banner-right {
    width: 100%;
}

.slide-text-1 h3 {
    top: -50px;
}

.slide-text-2 h3 {
    bottom: -35px;
}

.ab-1-img {
    width: 100%;
    height: auto;
    margin: 0 0 1rem;
}

.ab-2-img {
    display: none;
}    
    
.slide-text-2 h3 {
        bottom: -25px;
        right: 0;
}

.web-title-2 {
        font-size: 2.2rem;
}  
    
.web-title {
    font-size: 2.4rem; 
}

.inner-banner {
    padding: 11rem 0 3rem; 
}

.inner-main .inner-title {
    font-size: 2.5rem; 
}

.counter-box {
    width: 50%;
}

.counter-stroke {
    font-size: 70px;
}

span.unit-k {
    font-size: 50px;
}

.counter-box p {
    font-size: 1rem;
}

.service-pg-video {
    height: auto;
}

.video-control , .video-control.playing {
    font-size: 1.2rem;
    bottom: 30px;
}

.video-control i {
    font-size: 1.5rem;
}

.blog-sidebar {
    width: 100%;
    margin: 2rem 0 0;
}

.contact-right {
    width: 100%;
    margin: 2rem 0 0;
}




    
    
    
}



@media only screen and (max-width: 767px) {
    
.banner-inner {
    margin: 3rem 0;
}

.slide-text-1 h3, .slide-text-2 h3 {
    font-size: 3.5rem;
}

.head-socials a {
    width: 30px;
    height: 30px;
    font-size: 13px;
}

.logo img {
    width: 100px;
}

.web-title-2 {
    font-size: 2rem;
}

.creative-sec {
    height: 500px;
}

.portfolio-slider .slide {
    opacity: 1;
    transform: inherit;
    pointer-events: inherit;
}

.custom-video-wrapper {
    width: 90%;
}

.custome-text .nav-btn-2 a {
    padding: 5px 20px;
}

button.slick-arrow {
    width: 30px;
    height: 30px;
}

.service-slider button.slick-arrow {
    top: -21%;
}

.service-slider button.slick-prev.slick-arrow {
    right: 50px;
}

.ser-text {
    padding: 20px;
}

h3.web-title {
    font-size: 2rem;
}

.ab-right p {
    font-size: 1rem;
}

footer {
    padding: 2rem 0 1rem;
}    

.sec-padding
 {
    padding: 3.5rem 0;
}



    
    
}



@media only screen and (max-width: 575px) {
    
.padding-inner {
    padding: 8rem 0 0;
}

.banner-sec {
    padding-bottom: 1rem !important;
}

.creative-sec {
    height: 400px;
}

.web-title-2 {
    font-size: 1.6rem;
}

.sec-padding {
    padding: 3rem 0;
}

.mt-5 {
    margin-top: 1.5rem !important;
}

html {
    font-size: 14px;
}

.slide-text-1 h3 {
    top: -35px;
}

li.footer-contact a {
    width: 85%;
}

li.footer-contact i {
    width: 30px;
    height: 30px;
    font-size: 13px;
}

button.slick-next.slick-arrow {
    right: 0;
}

button.slick-prev.slick-arrow {
    left: 0;
}

.video-control, .video-control.playing {
    font-size: 1rem;
    bottom: 30px;
}

.blog-img {
    height: 300px;
}




    
}


@media only screen and (max-width: 480px) {
    
.counter-stroke {
    font-size: 50px;
}
    
span.unit-k {
    font-size: 35px;
}

.inner-main .inner-title {
    font-size: 2.2rem;
}
    
.breadcrumb li  , .breadcrumb a {
    font-size: 13px !important;
}

    
    
    
    
    
}


@media only screen and (max-width: 400px) {
    
}


@media only screen and (max-width: 375px) {
    
}


@media only screen and (max-width: 320px) {
    
}