@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-Bold.woff2") format("woff2"),
    url("../fonts/Manrope-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-Regular.woff2") format("woff2"),
    url("../fonts/Manrope-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-SemiBold.woff2") format("woff2"),
    url("../fonts/Manrope-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Red Hat Display";
  src: url("../fonts/RedHatDisplay-SemiBold.woff2") format("woff2"),
    url("../fonts/RedHatDisplay-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Red Hat Display";
  src: url("../fonts/RedHatDisplay-ExtraBold.woff2") format("woff2"),
    url("../fonts/RedHatDisplay-ExtraBold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Red Hat Display";
  src: url("../fonts/RedHatDisplay-Regular.woff2") format("woff2"),
    url("../fonts/RedHatDisplay-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Red Hat Display";
  src: url("../fonts/RedHatDisplay-Bold.woff2") format("woff2"),
    url("../fonts/RedHatDisplay-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: "Manrope";
  font-weight: normal;
  line-height: 29.6px;
  font-style: normal;
}

:root {
  --blue: #2a6fdd;
  --Black: #1a1a1a;
  --grey: #74787c;
  --green: #17be74;
  --lightGrey: #e8e8e8;
  --BgBlack: #0b0301;
  --blue: #2a6fdd;
  --Bglight: #f7f5f4;
  --BgDark: #0f0f0f;
  --offwhite: #f3f3f3;
}

a {
  text-decoration: none;
}

img {
  width: 100%;
}

.display-3 {
  font-family: "Red Hat Display";
  color: white;
  font-size: 75px;
  font-weight: 300;
  margin-bottom: 20px;
  line-height: 1.2em;
}

.secH {
  font-family: "Red Hat Display";
  font-size: 45px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 40px;
}

.secH .split-text {
  font-weight: 700;
}

.therdH {
  font-family: "Red Hat Display";
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 20px;
  letter-spacing: -0.02em;
}

.fourthH {
  font-family: "Red Hat Display";
  font-size: 20px;
  font-weight: bold;
  text-transform: capitalize;
  line-height: 1.4;
}
.fifthH {
  font-family: "Manrope";
  font-size: 18px;
  font-weight: bold;
  text-transform: capitalize;
  line-height: 1.4;
}

/* header css start */
.miniheader {
  padding-top: 10px;
  padding-bottom: 10px;
}
.miniheaderParrent {
  background-color: var(--Black);
}

.miniheader .mailpart {
  display: flex;
  flex-wrap: wrap;
  gap: 60px;
}
.miniheader .socialPart {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 18px;
}
.miniheader .socialPart a {
  color: #ffffff;
}
.miniheader .socialPart a:hover {
  color: var(--blue);
}
.miniheader .row {
  justify-content: space-between;
}

.mailpart a,
.mailpart p {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
  color: #ffffff;
  position: relative;
}
.mailpart a::after {
  content: "";
  position: absolute;
  right: -29.5px;
  height: 5px;
  width: 5px;
  background-color: var(--lightGrey);
  border-radius: 10px;
}
.mailpart a i,
.mailpart p span {
  color: var(--blue);
  font-size: 20px;
}
.mailpart a i{
  font-size: 16px;
}
.mailpart a:hover {
  color: var(--blue);
}

/* Initial header styling */
#main-header {
  transition: all 0.5s ease;
  z-index: 1055;
}

/* Hidden when out of view */
.sticky-header {
  position: fixed;
  top: -112.48px; /* Hidden initially */
  width: 100%;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: top 0.5s ease; /* Slide down animation */
  animation: slideDown 0.5s ease-in-out both;
}
@keyframes slideDown {
  0% {
    position: fixed;
    top: -112.48px;
  }
  100% {
    position: fixed;
    top: 0;
  }
}
.headerAnimate {
  animation: slideUp 0.5s ease-in-out both;
}

@keyframes slideUp {
  0% {
    top: 50.48px;
    position: relative;
  }
  100% {
    top: 0px;
  }
}
.sticky-header.visible {
  top: 0; /* Slide into view */
}

.navbar-brand {
  margin-right: 36px;
  width: 10rem;
}

.nav-link,
.dropdown-item {
  font-family: "Manrope";
  font-size: 18px;
  font-weight: bold;
  text-transform: capitalize;
  line-height: 1.4;
  color: var(--Black);
}
.dropdown-menu li {
  width: 260px;
}

.navbar-nav .nav-link.active,
.navbar-nav .show > .nav-link {
  color: var(--blue);
}
.nav-link:focus,
.nav-link:hover {
  color: var(--blue);
}
.dropdown-item {
  padding: 15px 20px;
  padding-right: 28px;
  border-bottom: 1px solid var(--lightGrey);
  text-wrap: wrap;
}

.dropend .dropdown-toggle::after {
  content: "\f054";
  position: absolute;
  right: 8px;
  top: 28px;
  transform: translateY(-50%);
  font-size: 10px;
  line-height: 1;
  font-weight: 900;
  font-family: "Font Awesome 6 free";
  border: none;
}
.dropdown-toggle::after {
  content: "\f107";
  font-size: 14px;
  line-height: 1;
  font-weight: 900;
  font-family: "Font Awesome 6 free";
  border: none;
}
.navbar-nav {
  gap: 20px;
}
.dropdown-item:focus,
.dropdown-item:hover {
  color: var(--blue);
  background-color: transparent;
}
.dropdown-menu {
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none !important;
}

.dropdown-mega .dropdown-menu[data-bs-popper] {
  margin-top: -2px !important;
}

.navbar-expand-lg .navbar-nav .dropdown-mega  .dropdown-menu {
  position: absolute;
  left: 0;
  right: 0;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.navbar>.container-fluid{
  position: relative;
}

.megaHeding{
    font-family: "Manrope";
    font-size: 18px;
    font-weight: bold;
    text-transform: capitalize;
    line-height: 1.4;
    color: var(--Black);
}

.megaDropdown{
  box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.13) !important;
}


.list-group .list-group-item{
  border: none;
  font-size: 14px;
  padding: 5px 10px;
  padding-left: 0;
  padding-right: 28px;
  border-bottom: 1px solid var(--lightGrey);
  text-wrap: wrap;
  font-weight: 600;
}


.list-group .list-group-item:last-child{
  border: none;
  padding-bottom: 0;
}


.headerRight {
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}

.Makeacall {
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
  position: relative;
}
.Makeacall a {
  position: absolute;
  width: 100%;
  height: 100%;
}
.Makeacall p {
  margin: 0;
  font-weight: 600;
}
.Makeacall h6 {
  font-family: "Red Hat Display";
  align-items: center;
  color: var(--grey);
  font-size: 14px;
  font-weight: 600;
  line-height: 1em;
}
.Makeacall .material-symbols-outlined {
  display: inline-block;
  width: 50px;
  height: 50px;
  font-size: 24px;
  color: #ffffff;
  background-color: var(--green);
  border-radius: 50px 50px 50px 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btnMedium {
  display: inline-block;
  border: none;
  padding: 15px 20px;
  background-color: var(--blue);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  text-transform: capitalize;
  position: relative;
}
.btnMedium i {
  margin-left: 5px;
}
.btnMedium span {
  position: relative;
  z-index: 1;
}
.btnMedium::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0%;
  height: 100%;
  background-color: var(--green);
  -webkit-transition: linear 0.2s;
  -o-transition: linear 0.2s;
  transition: linear 0.2s;
}
.btnMedium::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 0%;
  height: 100%;
  background-color: var(--green);
  -webkit-transition: linear 0.2s;
  -o-transition: linear 0.2s;
  transition: linear 0.2s;
}

.btnMedium:hover {
  color: #ffffff;
}
.btnMedium:hover::after,
.btnMedium:hover::before {
  width: 50%;
}

.btnOffcanvas {
  width: 30px;
  height: 30px;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  border: none;
  justify-content: center;
  align-items: center;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  background-color: transparent;
  transition: 0.3s;
}
.btnOffcanvas span {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 5px;
  background-color: var(--Black);
}
.btnOffcanvas span:nth-child(1) {
  position: absolute;
  left: 0;
  top: 0;
}
.btnOffcanvas span:nth-child(2) {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
}
.btnOffcanvas span:nth-child(3) {
  position: absolute;
  right: 0;
  top: 0;
}
.offcanvas-body .btnMedium{
  display: table; margin: auto; margin-top: 40px;
}
.btnOffcanvas span:nth-child(4) {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.btnOffcanvas span:nth-child(5) {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.btnOffcanvas span:nth-child(6) {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.btnOffcanvas span:nth-child(7) {
  position: absolute;
  left: 0;
  bottom: 0;
}
.btnOffcanvas span:nth-child(8) {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
}
.btnOffcanvas span:nth-child(9) {
  position: absolute;
  right: 0;
  bottom: 0;
}
.btnOffcanvas:hover {
  animation: rotation 0.3s 1 ease-in-out forwards;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
    border-radius: 0px;
  }
  50% {
    border-radius: 30px;
  }
  99.9% {
    transform: rotate(-90deg);
    border-radius: 0px;
  }
  100% {
    transform: rotate(0deg);
    border-radius: 0px;
  }
}
.offcanvas-start {
  background-color: #000000;
}
.offcanvas-start .btn {
  color: #ffffff;
  font-size: calc(15px + 0.390625vw);
}

.btn-close:focus {
  box-shadow: none;
}

.offcanvas-start {
  width: 30vw;
}
.offcanvas-header {
  height: 45px;
}
.offcanvas-header .btn-close {
  width: 45px;
  height: 45px;
  position: absolute;
  top: 7px;
  left: 0;
  padding: 0;
  border-radius: 0;
  background-image: url(../image/download.svg),
    linear-gradient(180deg, #1a1a1a 10%, #1a1a1a 80%);
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-size: 12px, cover;
  opacity: 1 !important;
}
.offcanvas.offcanvas-end {
  width: 420px;
}
.offcanvas-body {
  padding: 40px;
}
.offcanvas-body > p {
  color: var(--grey);
  margin-bottom: 40px;
}
.offcanvas-body .Makeacall {
  flex-wrap: nowrap;
}
.offcanvas-body .Makeacall > div {
  flex-shrink: 15;
}

.offcanvas-body .Makeacall p {
  color: var(--Black);
}

.offcanvas-body .Makeacall .material-symbols-outlined {
  color: var(--Black);
  background-color: transparent;
  font-size: 36px;
  justify-content: start;
}
.Call_to_Action {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 30px;
}

#exampleModal .modal-content {
  color: #ffffff;
  background-color: transparent;
  background-clip: padding-box;
  border: none;
  border-radius: 0;
}
#exampleModal .modal-header {
  border-bottom: 0;
}
#exampleModal .modal-header .btn-close {
  background: url("../image/download.svg");
  width: 8px;
  height: 8px;
}
#exampleModal .modal-body {
  padding-right: 0;
}
#exampleModal .modal-body .btn[type="submit"] {
  color: #fff;
}

#exampleModal .modal-body .form-control {
  background-color: transparent;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid #fff;
  padding: 20px 0;
}
nav .form-control:focus {
  color: #ffffff;
  box-shadow: none;
}
nav .form-control {
  color: #ffffff;
}
#exampleModal .modal {
  background-color: #000000;
}
#exampleModal .modal-body .form-control::placeholder {
  color: #fff;
}

.navbar-nav .btn-check:checked + .btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check) + .btn:active {
  border-color: transparent;
}

.extraItems {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
@media (min-width: 576px) {
  #exampleModal .modal-dialog {
    max-width: 65%;
  }
}

/* gallery css */

#gallery {
  padding-top: 40px;
  @media screen and (min-width: 991px) {
    padding: 0;
  }
}
#image-gallery .col-4 {
  padding: 8px;
}

.img-wrapper {
  position: relative;
  margin-top: 15px;
  img {
    width: 100%;
    border-radius: 5px;
  }
}

.img-overlay {
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  i {
    color: #fff;
    font-size: 1em;
  }
}

#overlay {
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1056;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  img {
    margin: 0;
    width: 80%;
    height: auto;
    object-fit: contain;
    padding: 5%;
    @media screen and (min-width: 768px) {
      width: 60%;
    }
    @media screen and (min-width: 1200px) {
      width: 70%;
    }
  }
}

#nextButton {
  color: #fff;
  font-size: 2em;
  transition: opacity 0.8s;
  &:hover {
    opacity: 0.7;
  }
  @media screen and (min-width: 768px) {
    font-size: 3em;
  }
}

#prevButton {
  color: #fff;
  font-size: 2em;
  transition: opacity 0.8s;
  &:hover {
    opacity: 0.7;
  }
  @media screen and (min-width: 768px) {
    font-size: 3em;
  }
}

#exitButton {
  color: #fff;
  font-size: 2em;
  transition: opacity 0.8s;
  position: absolute;
  top: 15px;
  right: 15px;
  &:hover {
    opacity: 0.7;
  }
  @media screen and (min-width: 768px) {
    font-size: 3em;
  }
}

/* header css end */

/* banner css start */

.Banner{
  padding: 50px 0;
}

.btnLarg {
  display: inline-block;
  padding: 20px 35px;
  background-color: var(--green);
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  margin-top: 30px;
  text-transform: capitalize;
  position: relative;
}
.btnLarg i {
  margin-left: 10px;
}
.btnLarg span {
  position: relative;
  z-index: 1;
}
.btnLarg::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0%;
  height: 100%;
  background-color: var(--blue);
  -webkit-transition: linear 0.2s;
  -o-transition: linear 0.2s;
  transition: linear 0.2s;
}
.btnLarg::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 0%;
  height: 100%;
  background-color: var(--blue);
  -webkit-transition: linear 0.2s;
  -o-transition: linear 0.2s;
  transition: linear 0.2s;
}

.btnLarg:hover {
  color: #ffffff;
}
.btnLarg:hover::after,
.btnLarg:hover::before {
  width: 50.2%;
}


.container-fluid {
  max-width: 1780px;
}


.Banner .content {
  --fontSize: 76px;
  --LineHeight: 87px;
  display: table;
  text-align: left;
  background-image: linear-gradient(75deg, #FF4969, #FC9D44 80%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-family: "Manrope";
  font-size: var(--fontSize);
  font-weight: 800;
  line-height: var(--LineHeight);
  padding-bottom: 5px; 
  height: calc(var(--fontSize)*3 + 45px);
}

.bannerPage1.contactCard{
  margin-top: 24px;
}

.bannerPage1.contactCard .contactContent.differentCard a {
color: var(--Black);
}
.bannerPage1.contactCard .contactContent.differentCard a:hover{
  color: var(--blue);
}

/* whatsapp fab */
.fab-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  cursor: pointer;
  z-index: 1000;
}

.Call-fab-container{
  position: fixed;
  bottom: 94px;
  right: 24px;
  cursor: pointer;
  z-index: 1000;
}

/* banner css end */

/* updated with our services section start */
.updatedWithOurServices{
  position: relative;
  padding: 90px 0 50px;
  color: #ffffff;
}
.updatedWithOurServices::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: var(--BgDark);
  clip-path: polygon(0% 0%, 100% 16%, 100% 100%, 0% 100%);
  z-index: -1;
}
.updatedWithOurServices .container{
  position: relative;
}
.updatedWithOurServices .container{
  position: relative;
}

.updatedWithOurServices .container::before{
  position: absolute;
  content: "";
  background-color: var(--BgDark);
  width: 38px;
  height: 42px;
  display: block;
  bottom: -6px;
  left: 0;
  top: calc(100% + 18px);
  border-radius: 4px;
  -webkit-transform: skewY(35deg);
  -ms-transform: skewY(35deg);
  transform: skewY(35deg);
  border-top: 0;
}
/* updated with our services section end */


/* services column section start */
.servicesColums{
  position: relative;
}

.servicesBox{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: start;
}
.servicesBox::before{
  content: "";
  position: absolute;
  top: 80px;
  left: 42px;
  height: calc(100% - 80px);
  width: 1px;
  background-color: rgba(0, 0, 0, .07);
}
.iconCircle{
  width: 80px;
  height: 80px;
  position: relative;
  border: 2px solid var(--blue);
  color: var(--blue);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  line-height: 80px;
  text-align: center;
  margin-right: 20px;
  vertical-align: middle;
  border-radius: 50%;
  -webkit-transition: all .15s ease-out;
  transition: all .15s ease-out;
  background-color: var(--blue);
}
.iconCircle svg{
  position: relative;
  z-index: 2;
}
.iconCircle i{
  position: relative;
  z-index: 2;
  font-size: 30px;
}
.iconCircle::after{
content: "";
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
border-radius: 50%;
transform: translate(-50%, -50%);
height: 100%;
width: 100%;
background-color: #ffffff;
transition: 0.3s ease-in-out;
}
.servicesBox:hover .iconCircle{
  color: #ffffff;
}
.servicesBox:hover .iconCircle::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  height: 0%;
  width: 0%;
  background-color: #ffffff;
  }

  .serviceList{
    padding: 0;
    margin: 0;
    width: 100%;
    list-style: none;
  }
  .serviceList li{
    position: relative;
    padding-left: 100px;
  }

  .serviceList li::before{
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    left: 38px;
    top: 11px;
    border: 2px solid var(--blue);
    border-radius: 50%;
    display: block;
    background-color: #fff;
    outline: 0px solid var(--blue);
    -webkit-transition: all .15s;
    transition: all .15s;
  }
  .serviceList li:hover::before{
    outline: 2px solid var(--blue);
  }

/* services column section end */
.defaultPadding{
  padding: 80px 0;
}
/* working steps section start */
.workingSteps .therdH{
  font-weight: 500;
}
.workingSteps .therdH span{
  font-weight: 700;
}
.introLink{
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  transition: 0.3 ease-in-out;
}
.introLink:hover{
  color: var(--BgDark);
}
.iconHedContent{
  padding: 40px 20px ;
  position: relative;
  text-align: center;
  background-color: #5a5a5a;
  color: #ffffff;
}

.workingStepBox::after{
    content: "";
    position: absolute;
    top: 15px;
    right: -14px;
    border: 7px solid transparent;
    border-left-color: var(--blue) ;
    z-index: 1;
}

.iconHedContent:nth-child(2)::after{
    content: "";
    position: absolute;
    top: 15px;
    right: -14px;
    border: 7px solid transparent;
    border-left-color: #5a5a5a ;
    z-index: 1;
}
.iconHedContent:nth-child(2):hover svg{
animation: tada ease-in-out 1 normal 500ms;
}

@keyframes tada {
  from {
      -webkit-transform: scale3d(1,1,1);
      transform: scale3d(1,1,1);
  }

  10%,20% {
      -webkit-transform: scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);
      transform: scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);
  }

  30%,50%,70%,90% {
      -webkit-transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);
      transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);
  }

  40%,60%,80% {
      -webkit-transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);
      transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);
  }

  to {
      -webkit-transform: scale3d(1,1,1);
      transform: scale3d(1,1,1);
  }
}
.iconHedContent:nth-child(3):hover svg{
animation: pulse ease-in-out 1 normal 500ms;
}

@keyframes pulse {
  from {
      -webkit-transform: scale3d(1,1,1);
      transform: scale3d(1,1,1);
  }

  50% {
      -webkit-transform: scale3d(1.05,1.05,1.05);
      transform: scale3d(1.05,1.05,1.05);
  }

  to {
      -webkit-transform: scale3d(1,1,1);
      transform: scale3d(1,1,1);
  }
}
.iconHedContent:nth-child(4){
  overflow: hidden;
}
.iconHedContent:nth-child(4):hover svg{
animation: fadeOutRightBig ease-out 1 normal 1s;
}


@keyframes fadeOutRightBig {
  from {
      opacity: 1;
  }

  to {
      opacity: 0;
      -webkit-transform: translate3d(300px,-200px,0);
      transform: translate3d(300px,-200px,0);
  }
}
.iconHedContent:nth-child(3)::after{
  content: "";
  position: absolute;
  top: 15px;
  right: -14px;
  border: 7px solid transparent;
  border-left-color: #4a4a4a ;
  z-index: 1;
}

.workingStepBox{
  padding: 40px 20px ;
  position: relative;
  background-color: var(--blue);
  color: #ffffff;
}
.iconHedContent p{
  margin-bottom: 0;
  font-size: 14px;
}
.iconHedContent .iconCenter{
  height: 64PX;
  width: 64PX;
  margin: auto;
}
.iconHedDesc{
margin-top: 10px;
}
.iconHedContent:nth-child(3){
background-color: #4a4a4a;
}
.iconHedContent:nth-child(4){
  background-color: #3e3e3e;
  }
/* working steps section end */



/* companies and Partners Section start */

.Partners .container-fluid {
  max-width: 1620px;
  padding: 80px;
  background-color: var(--Bglight);
}
.Partners .fifthH {
  color: var(--grey);
  text-align: center;
  margin-bottom: 50px;
}

.Partners .owl-carousel{
  position: relative;
}
.Partners .owl-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 100%;
  display: flex;
  pointer-events: none;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(90deg, #F7F5F4 0%, rgba(255, 255, 255, 0.00) 26%, rgba(255, 255, 255, 0.00) 76.5%, #F7F5F4 100%);;
}
.Partners .owl-nav button span{
  font-size: 40px;
  pointer-events: all;
}

.PartnersImg {
  position: relative;
}

/* companies and Partners Section End */

/* What our client says.. section start */
.whatOurClient{
  color: #ffffff;
  background-color: var(--blue);
}
.clientsCards{

}
.commentcard{
  background: rgba(0, 0, 0, .2);
  border-radius: 3px;
  padding: 50px 25px 40px;
  font-size: 16px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.7;
  position: relative;
}

.commentcard::before{
  content: "";
  position: absolute;
  left: 55px;
  border: 13px solid transparent;
  top: 100%;
  border-top-color: rgba(0, 0, 0, .2);
}
.clientsComments{
  font-weight: 600;
  margin-bottom: 0;
}
.clientsDesc{
  font-size: 12px;
}
.clientsName{
  font-size: 14px;
  font-weight: 800;
}
.clientsPosi {
  color: #ffffffbe;
  display: block;
  line-height: 11px;
}

.clientsDesc .fa-star{
  margin-right: 4px;
  font-size: 10px;
  color: #ffffffbe;
}

.avatarCard{
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.avatarCard .AvatarImg{
  width: 60px;
  height: 60px;
  overflow: hidden;
  margin-right: 15px;
  border-radius: 50%;
  border: 4px solid #ffffff44;
}


/* What our client says.. section end */


/* footer section start */
footer {
  background-color: var(--BgBlack);
  color: #ffffff;
}
footer .navbar-brand {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
}
footer p {
  margin: 22px 0;
  color: #bbbbbb;
  text-align: center;
}
footer .container>.row{
  gap: 8%;
} 

footer .fIcons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px
}

footer .fIcons a {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    height: 40px;
    width: 40px;
    background-color: var(--Black);
    color: #fff;
    border-radius: 50%;
    transition: 0.3s
}

footer .fIcons a:hover {
    background-color: var(--green)
}

.footerLinks a i, .footerLinks address i{
  margin-right: 4px;
}

footer > :nth-child(1) a.fa-brands {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  height: 40px;
  width: 40px;
  background-color: var(--Black);
  color: #ffffff;
  border-radius: 50%;
  transition: 0.3s;
}

footer .fourthH {
  color: var(--yellow);
  margin-bottom: 36px;
}
footer ul {
  list-style-type: none;
  padding: 0;
}
footer ul a {
  color: #bbbbbb;
  position: relative;
}
footer ul a:hover {
  color: var(--lightGrey);
}
footer ul li {
  position: relative;
  margin-bottom: 12px;
}




/* footer section End */

.copyrightSection {
  background-color: #0f0f0f;
  padding: 20px 12px;
}
.copyrightSection p {
  margin-bottom: 0;
  text-align: center;
  color: #bbbbbb;
}
.copyrightSection .row{
  justify-content: space-between;
}



.footerPage{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.footerPage a{
  font-size: 14px;
  color: var(--grey);
  transition: color 0.3s ease-in-out;
}
.footerPage a:hover{
  color: #ffffff;
}





/**************** 
***Career page***  
*****************/

.notification {
  display: flex;
  flex-direction: column;
  isolation: isolate;
  position: relative;
  background: var(--blue);
  border-radius: 1rem;
  overflow: hidden;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: 16px;
  --gradient: linear-gradient(to bottom, #6feb56, #23cc77,#17be74);
}

.notification:before {
  position: absolute;
  content: "";
  inset: 0.0625rem;
  border-radius: 0.9375rem;
  background: var(--blue);
  z-index: 2
}

.notification:after {
  position: absolute;
  content: "";
  width: 0.25rem;
  inset: 0.65rem auto calc(0.65rem + 47.5px) 0.5rem ;
  border-radius: 0.125rem;
  background: var(--gradient);
  transition: transform 300ms ease, inset 300ms ease;
  z-index: 4;
}

.notification:hover:after {
  transform: translateX(0.15rem);
}

.notititle {
  color: var(--BgDark);
  padding: 0.65rem 0.25rem 0.4rem 1.25rem;
  font-weight: 500;
  text-transform: capitalize;
  transition: transform 300ms ease;
  z-index: 5;
}
.notititle.therdH{
  margin-bottom: 0;
  font-weight: 600;
}
.notititle.fourthH{
  color: var(--BgDark);
}

.notification:hover .notititle {
  transform: translateX(0.15rem)
}

.notibody {
  color: var(--lightGrey);
  padding: 0 1.25rem;
  transition: transform 300ms ease;
  z-index: 5;
  padding-bottom: 0.65rem;
  line-height: 25px;
}


.notification .btnMedium{
  z-index: 5;
  width: 100%;
  bottom: -200px;
  left: 0;
  padding: 15px 20px;
  text-align: center;
  background-color: var(--BgDark);
  overflow: hidden;
  transition: all 0.3s ease;
}

.notification:hover .btnMedium{

  bottom: 0;
}
.notification .btnMedium:hover{
  color: var(--BgDark);
}


.notification:hover .notibody {
  transform: translateX(0.25rem)
}

.notiglow,
.notiborderglow {
  position: absolute;
  width: 25rem;
  height: 25rem;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle closest-side at center, white, transparent);
  opacity: 0;
  transition: opacity 300ms ease;
}

.notiglow {
  z-index: 3;
}

.notiborderglow {
  z-index: 1;
}

.notification:hover .notiglow {
  opacity: 0.1
}

.notification:hover .notiborderglow {
  opacity: 0.1
}


/************* 
***About Us***  
**************/

.newBanner {
  background-image: linear-gradient(180deg, #0f0f0fcc 0%, #0f0f0fcc 100%),
    url("../image/page-bg-1.webp");
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  text-align: center;
}

.newBanner .secH{
  color: #ffffff;
  margin-top: 16px;
}

.breadcrumb {
  justify-content: center;
  margin-bottom: 0;
}

.breadcrumb-item {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}

.breadcrumb-item a {
  color: #ffffff;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: #ffffff;
}

.breadcrumb-item.active {
  color: var(--blue);
}

/* InnovativeShading section start  */

.InnovativeShading.AboutPage0 .col-xl-8 {
  padding-right: 39px;
}

.UShape {
  padding: 40px 55px 75px 50px;
  border-style: solid;
  border-width: 3px 0px 0px 0px;
  border-color: var(--blue);
  border-radius: 0px 0px 130px 130px;
  background-color: #f7f5f4;
}

.UShape .display-3 {
  color: var(--BgBlack);
}

.AboutPage0 .InnovativeShadingImg img {
  width: auto;
  max-width: 100%;
}

.AboutPage0 .InnovativeShadingImg {
  height: 100%;
}

hr {
  margin: 1rem 0;
  border-top: 1px solid #ffffff;
  width: 80%;
  opacity: 1;
}
.thumbnails-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}




/* InnovativeShading end  */

/* who we are section start  */
.whoWeAre {
  background-color: var(--Bglight);
}
svg[role="progressbar"] circle {
  stroke: #ffffff;
}
.progressImg {
  position: relative;
  padding-right: 40px;
  padding-bottom: 40px;
}
.progressBarWrap {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 30px;
  background-color: var(--blue);
}
svg[role="progressbar"] .pie-text-1 {
  font-size: 16px;
  font-weight: 600;
  fill: #ffffff;
}

.progressBarWrap .fifthH {
  color: #ffffff;
  text-align: center;
}

.progressBarWrap2 {
  position: relative;
  padding: 30px;
}
.progressBarWrap2 .percentage2 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  font-weight: 600;
}

.progressBarWrap2  svg[role="progressbar"] .pie-text-1 {
  font-size: 16px;
  font-weight: 600;
  fill: #ffffff;
}


.textPart2 {
  padding-left: 70px;
}
.verticleCardsWrap {
  background-color: #ffffff;
  box-shadow: 0px 4px 60px 0px rgba(0, 0, 0, 0.05);
}
.verticleCard {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 25px 40px;
  row-gap: 34px;
  transition: 0.3s;
}
.verticleCard:hover .iconV {
  color: #ffffff;
}


.wrapper{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.wrapper .card{
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-direction: column;
}
.wrapper .card .circle{
  position: relative;
  height: 150px;
  width: 150px;
  border-radius: 50%;
  cursor: default;
}
.card .circle .box,
.card .circle .box span{
  position: absolute;
  top: 50%;
  left: 50%;
}
.card .circle .box{
  height: 100%;
  width: 100%;
  background: #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  transition: all 0.2s;
}
.card .circle:hover .box{
  transform: translate(-50%, -50%) scale(0.91);
}
.card .circle .box span{
  background: -webkit-linear-gradient(left, #a445b2, #fa4299);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.circle .box span{
  font-size: 38px;
  font-family: sans-serif;
  font-weight: 600;
  transform: translate(-45%, -45%);
  transition: all 0.1s;
}
.card .circle:hover .box span{
  display: inline-block;
  padding: 4px;
  transform: translate(-45%, -45%) scale(1.09);
}

@media(max-width: 753px){
 
  .wrapper .card{
    width: calc(50% - 20px);
    margin-bottom: 20px;
  }
}
@media(max-width: 505px){
  .wrapper{
    max-width: 500px;
  }
  .wrapper .card{
    width: 100%;
  }
}


.verticleCardsWrap .verticleCard:not(:hover) {
  background-color: #f8f8f8;
}
.iconV {
  font-size: 35px;
  color: var(--blue);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border-radius: 50% 50% 50% 50%;
  transition: 0.3s;
}

.VacrdText {
  width: 100%;
  text-align: center;
}
.VacrdText p {
  color: var(--grey);
}

.whoWeAre .container > .row {
  align-items: center;
}
.headingTitleWidget.AboutPage0{
background-color: var(--blue);
}
.headingTitleWidget.AboutPage0 .container-fluid {
  background-color: var(--blue);
}
.headingTitleWidget.AboutPage0 .therdH a {
  color: #ffffff;
  text-decoration: underline;
}
.headingTitleWidget.AboutPage0 .therdH a:hover {
  color: var(--BgDark);
}

.headingTitleWidget.AboutPage0 .btnLarg{
  background-color: var(--blue);
}
.headingTitleWidget.AboutPage0 .btnLarg::before,
.headingTitleWidget.AboutPage0 .btnLarg::after {
  background-color: var(--green);
}
/* who we are section end  */

/* team member section start  */
.teamMember .member-info {
  background-color: var(--Bglight);
  border: 2px solid transparent;
  padding: 40px 35px;
}
.teamMember .member-info:hover {
  border: 2px solid var(--blue);
  background-color: #ffffff;
}
.teamMember .member-info a {
  color: var(--Black);
}
.teamMember .fourthH.styledHeading {
  text-align: center;
  display: table;
  margin-left: auto;
  margin-right: auto;
}
.teamMember .secH {
  text-align: center;
}
.teamMember .secH span {
  display: table;
  margin-left: auto;
  margin-right: auto;
}
.teamMember .member-info p {
  margin-bottom: 0;
  color: var(--grey);
}

/* team member section End */

/* Company History section Start */
.companyHistory {
  background-color: var(--BgBlack);
  color: #ffffff;
}

.companyHistory .fourthH.styledHeading {
  color: #ffffff;
}
.companyHistory .Historywrap{
  position: relative;
  isolation: isolate;
}
.companyHistory .Historywrap::after {
  content: "";
  width: 100%;
  height: 2px;
  background-color: var(--grey);
  position: absolute;
  top: 40px;
  z-index: -1;
}

.history-box {
  position: relative;
}

.history-box .timeline-year {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: var(--blue);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 40px;
}

.history-box .description {
  color: #ffffffa6;
  font-size: 14px;
  margin-bottom: 0;
}
.history-box .timeline-content {
  padding: 30px 35px;
  background-color: var(--BgDark);
  position: relative;
  transition: all 0.3s;
}

.history-box .timeline-content::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 0;
  width: 30px;
  height: 20px;
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
  background-color: var(--BgDark);
  -webkit-clip-path: polygon(0 0, 0% 100%, 100% 100%);
  clip-path: polygon(0 0, 0% 100%, 100% 100%);
}

.history-box:hover .timeline-content,
.history-box:hover .timeline-content::before {
  background-color: #ffffff;
}

.history-box:hover .timeline-content .fourthH {
  color: var(--BgBlack);
}
.history-box:hover .timeline-content p {
  color: var(--grey);
}
/* Company History section End */

/* extra section start  */
.tickMark .fifthH i{
margin-right: 10px;
color: var(--blue);
font-size: 18px;
}
.tickMark p{
  padding-left: 28px;
}


/* testimonial section video start  */
.TestimonialVideo {
  background-color: #000000;
}
.TestimonialVideo.defaultPadding {
  padding-top: 50px;
  padding-bottom: 180px;
}
#player-wrapper iframe {
  pointer-events: none; /* Disable interaction with the video */
}

#player-wrapper.playing iframe {
  pointer-events: auto; /* Enable interaction only during playback */
}


.TestimonialVideo .container-fluid {
  position: relative;
}

.TestimonialVideo video {
  max-width: 100%;
  height: auto;
}
.TestimonialVideo iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}

.VideoPlayPause {
  border: none;
  padding: 22px;
  height: 70px;
  width: 70px;
  color: var(--blue);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.VideoPlayPause::before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  border: 1px solid #ffffff;
  border-radius: 0;
  -webkit-animation: pulse-border-2 1.5s linear infinite;
  animation: pulse-border-2 1.5s linear infinite;
}

.VideoPlayPause::after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  border: 1px solid #ffffff;
  border-radius: 0;
  -webkit-animation: pulse-border 1s linear infinite;
  animation: pulse-border 1s linear infinite;
}

@keyframes pulse-border-2 {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    opacity: 0;
  }
}

@keyframes pulse-border {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
    opacity: 0;
  }
}
/* testimonial section video end */

/* testimonial content section start */

.testimonialContent .container {
  background-color: var(--BgBlack);
}

#testimonial1 {
  padding: 80px;
  padding-right: 80px;
  color: #ffffff;
  position: relative;
}
#testimonial1 .item > .therdH {
  font-size: 34px;
  font-weight: 500;
  line-height: 1.35;
  
}
.authorWraper {
  margin-top: 60px;
  padding-top: 40px;
  border-top: 1px solid var(--grey);
}

.authorCard,
.authorWraper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.authorWraper .fa-quote-left {
  font-size: 70px;
  color: var(--green);
}

.AvatarIcon {
  height: 80px;
  width: 80px;
}
.AvatarIcon img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
}
.authorCard .AvatarInfo {
  width: calc(100% - 110px);
}
.authorCard .AvatarInfo .fourthH{
  text-wrap-mode: nowrap;
}



#testimonial1 .owl-dots {
  text-align: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 20px;
  display: flex;
  flex-direction: column;
}
#testimonial1 .owl-dots button.owl-dot {
  width: 8px;
  height: 8px;
  border: none;
  display: inline-block;
  background: #ffffff;
  margin: 4px 0px;
}
#testimonial1 .owl-dots button.owl-dot.active {
  background-color: var(--blue);
}
#testimonial1 .owl-dots button.owl-dot:focus {
  outline: none;
}
.Partners.AboutPage0{
padding: 0 !important;
}
.Partners.AboutPage0 .container {
  padding: 80px 12px;
  background-color: transparent;
}
/* testimonial content section End */

/******************** 
***Contact Us Page***  
*********************/

/* Get in Touch section start */

.contactCardWrap {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 50px;
}

.contactCard {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.contactCard .PosAbsol {
  position: absolute;
  height: 100%;
  width: 100%;
}

.callDetails{
  position: relative;
}

 .mrIndia{
  position: absolute;
  left: 0;
  right: 0;
  bottom:100% ;
  height: 180px;
}
.contactContent {
  width: calc(100% - 65px);
}
.contactContent p,
.contactContent address {
  margin-bottom: 0;
  color: var(--grey);
  font-family: "Manrope";
}
.contactContent.differentCard a{
  color: var(--grey);
  font-family: "Manrope";
}
.contactContent.differentCard p a{
  display: inline-block;
  margin-top: 4px;
}
.contactIcon {
  height: 40px;
  width: 40px;
  font-size: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  color: var(--blue);
  transition: color 0.3s;
}

.contactCard:hover .contactIcon {
  color: var(--green);
}
.ContactForm {
  padding: 60px;
  background-color: var(--offwhite);
  gap: 16px 40px;
}
.ContactForm input:not(.form-check-input),
.ContactForm textarea {
  width: 100%;
  height: auto;
  border-radius: 0;
  padding: 0 0 20px 0;
  border-style: solid;
  border-width: 0px 0px 1px 0px;
  border-color: #0000001a;
  background-color: #02010100;
}
.ContactForm .form-control:focus {
  background-color: #02010100;
  border-color: #0000001a;
  outline: 0;
  box-shadow: none;
}
.ContactForm .form-control.is-invalid:focus,
.was-validated .form-control:invalid:focus {
  box-shadow: none;
}
.ContactForm textarea {
  resize: none;
}
.ContactForm textarea:focus-visible {
  outline: none;
}
.ContactForm button {
  border: none;
  transform: translate(0,0);
  transition: transform 0.3s ease-in-out;
}

.ContactForm button::before,
.ContactForm button::after{
  box-shadow: inset 0px 0px 4px #00000000;
}
.ContactForm button:after,
.ContactForm button:before {
  transition: box-shadow 0.1s ease-in-out,width linear 0.2s;
  -webkit-transition: box-shadow 0.1s ease-in-out,width linear 0.2s;
  -o-transition: box-shadow 0.1s ease-in-out,width linear 0.2s;
}
.ContactForm button:hover::after,
.ContactForm button:hover::before {
  width: 52%;
}

.ContactForm button:active::before {
  box-shadow: inset 4px 4px 15px #00000044;
}
.ContactForm button:active::after{
  box-shadow: inset -10px 4px 15px #00000044;
}
.ContactForm .input-group > .form-control,
.input-group > .form-floating,
.input-group > .form-select {
  padding: 0 0 20px 0;
}
.form-control.is-valid:focus, .was-validated .form-control:valid:focus {
  box-shadow: none;
}

#contactForm .modal-header {
  justify-content: center;
  position: relative;
}
#contactForm .modal-header .btn-close {
  margin: 0 !important;
  position: absolute;
  right: 14px;
  top: 14px;
}
.options {
  display: flex;
  justify-content: center;
  gap: 40px;
}
.option {
  border: none;
  background: 0 0;
  cursor: pointer;
}
.portfolio-item,
.spotlight {
  border: 2px solid var(--lightPink);
}
.option img {
  width: 50px;
  height: 50px;
}

#alertBox .alert.alert-success.alert-dismissible.fade.show {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 1066;
}

#alertBox  .alert-success {
 background-color: #e3f5ff !important;
 text-align: center;
}

#alertBox .alert {
  width: 400px;
  max-width: 400px;
}
#alertBox  .alert-success.alert-dismissible {
  padding: 40px;
}

.successIco{
  display: table;
  margin: auto;
  margin-bottom: 8px;
}
.successIco .iconify{
  font-size: 60px;
  display: inline-block;
  color: var(--green);
  margin-bottom: 30px;
}
.sucMessage{
  display: flex;
  text-align: left;
  align-items: center;
  line-height: 20px;
  gap: 16px;
  padding: 16px;
  background-color: #2a6fdd34;
  border-radius: 4px;
}
.emIcon{
  font-size: 24px;
  flex: 0 0 auto;
  width: auto;
}
.sucText{
  flex: 1 0 0%;
}
.dulText{
  font-size: 14px;
  color: #a5a5a5;
}

/* Get in Touch section end */

/* Contact Map Section start */

.mapSection iframe {
  margin-bottom: -16px;
}

/* Contact Map Section end */

/****************** 
***Services Page***  
*******************/
.newBanner .Categories{
  color: var(--blue);
}

.newBanner .Categories b{
  color: var(--green);
}




/* Slider CSS Start  */

.thumbnail_slider {
  max-width: 700px;
  margin: 0px auto;
}

.splide__slide {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
  width: 580px;
  overflow: hidden;
  transition: .2s;
  border-width: 2px !important;
  margin: 10px 4px;
}

.splide--nav > .splide__track > .splide__list > .splide__slide.is-active {
  box-shadow: 2px 3px 8px #000000a3;
}

.splide__slide img {
  width: auto;
  height: auto;
  margin: auto;
  display: block;
  max-width: 100%;
  max-height: 100%;
}

/* Slider CSS End  */

.servicesHighlights ul{
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  row-gap: 20px;
}
.servicesHighlights ul li {
color: #696687;
}
.servicesHighlights ul li::marker{
  color: var(--blue);
}

/* services discription section start */
.servicesDiscription .paragrey{
  font-weight: 600;
}
.servicesDiscription{
  padding-top: 0;
}

.pointsSection .therdH{
  margin-top: 40px;
}

.pointsSection ol li{
  margin-top: 10px;
  color: #696687;
}

.pointsSection ol li::marker{
  color: var(--blue);
}

.pointsSection ul li{
  margin-top: 10px;
  color: #696687;
}
.pointsSection ul li::marker{
  color: var(--blue);
}

.pointsSection ol li strong{
  font-weight: bolder;
  color:#5a5870;
  }


/* services discription section end */



/****************** 
***Products Page***  
*******************/
.productCard2 .productCardContent {
  margin-top: 35px;
}
.productCard2 .cardCategories a {
  color: var(--grey);
  font-weight: 600;
  transition: color 0.3s;
}
.productCard2 .cardCategories a:hover {
  color: var(--blue);
}
.productCard2 .title.fourthH a {
  color: var(--BgBlack);
}
.paragrey{
  color: var(--grey);
}

.paragrey strong{
  color: #5a5870;
}

.productCard2 .ImgHoverZoom::before {
  content: "";
  left: 0;
  top: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: rgba(25, 25, 25, 0.75);
  visibility: hidden;
  opacity: 0;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.productCard2 .ImgHoverZoom:hover::before {
  visibility: visible;
  opacity: 1;
}

.productCard2 .PosAbsol {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: var(--BgBlack);
  color: #ffffff;
  font-size: 18px;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  opacity: 0;
  visibility: hidden;
}

.productCard2 .PosAbsol:hover {
  background-color: var(--blue);
}

.productCard2 .ImgHoverZoom:hover .PosAbsol {
  top: 50%;
  opacity: 1;
  visibility: visible;
}

/* Get Consultations section start */
.getConsultations {
  background-color: var(--offwhite);
}
.getConsultations .container > .row {
  align-items: center;
  row-gap: 40px;
}

.videoPng {
  padding-left: 40px;
  position: relative;
}
.videoPng img {
  max-width: 420px;
}

.videoPng .modal-dialog {
  width: 100%;
  max-width: 900px;
  margin-right: auto;
  margin-left: auto;
}

.videoPng .modal-content {
  background-color: transparent;
  border: none;
  border-radius: 0;
  outline: 0;
}

.videoPng .modal-header {
  border: none;
}
.videoPng .modal-header .btn-close {
  background: url(../image/download.svg);
  width: 8px;
  height: 8px;
}

.videoPng .modal-body iframe {
  aspect-ratio: 16/9;
}
.VideoPlayBtn {
  border: none;
  position: absolute;
  left: 100px;
  bottom: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  color: #ffffff;
  background-color: var(--blue);
}

.VideoPlayBtn::before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  border-radius: 50%;
  height: 100%;
  width: 100%;
  border: 1px solid var(--blue);
  -webkit-animation: pulse-border-2 1.5s linear infinite;
  animation: pulse-border-2 1.5s linear infinite;
}

.VideoPlayBtn::after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  border-radius: 50%;
  height: 100%;
  width: 100%;
  border: 1px solid var(--blue);
  -webkit-animation: pulse-border 1s linear infinite;
  animation: pulse-border 1s linear infinite;
}

@keyframes pulse-border-2 {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    opacity: 0;
  }
}

@keyframes pulse-border {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
    opacity: 0;
  }
}

/* Get Consultations section end */

/**************************** 
***Retractable Awning Page***  
*****************************/

/* Awning type section start */
.awningType p {
  color: #74787c;
}
.awningType .display-3 {
  color: var(--BgBlack);
}

.awningType .listFlex ul {
  list-style: square inside url("../image/check-mark.png");
  padding: 0;
  font-weight: 600;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  row-gap: 15px;
}

.awningType .listFlex {
  display: flex;
  flex-wrap: wrap;
  gap: 0 40px;
  margin-top: 40px;
}

.awningType .secH {
  font-weight: 700;
  font-size: 30px;
  margin-bottom: 30px;
  margin-top: 60px;
}

#generalQuestions .therdH {
  margin-bottom: 0;
  font-weight: 600;
}
#generalQuestions .accordion-button {
  padding-left: 0;
}
#generalQuestions .accordion-button::before {
  flex-shrink: 0;
  font-size: 18px;
  margin-left: 10px;
  margin-right: 10px;
  content: "\2b";
  font-weight: 900;
  font-family: "Font Awesome 6 Free";
}

#generalQuestions .accordion-button:not(.collapsed)::before {
  content: "\f068";
}

#generalQuestions .accordion-button::after {
  display: none;
}

#generalQue .owl-dots {
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 20px;
}
#generalQue .owl-dots button.owl-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  display: inline-block;
  background: #f94d1c26;
  margin: 4px 0px;
}
#generalQue .owl-dots button.owl-dot.active {
  background-color: var(--blue);
}
#generalQue .owl-dots button.owl-dot:focus {
  outline: none;
}

#generalQue .item img {
  aspect-ratio: 4/3;
  object-fit: cover;
  object-position: center;
}

.awningPage0#generalQue .item img {
  object-position: top;
}

#generalQuestions ul {
  color: var(--grey);
}

/* Awning type section end */

/************** 
***FAQs Page***  
***************/
.FAQsQues .fourthH.styledHeading {
  display: table;
  margin-left: auto;
  margin-right: auto;
}

.FAQsQues .secH {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.commonAccordion .fourthH {
  font-weight: 600;
}
.commonAccordion p {
  color: var(--grey);
}

.commonAccordion .accordion-item {
  border: none;
  border-bottom: var(--bs-accordion-border-width) solid
    var(--bs-accordion-border-color);
}

.commonAccordion .accordion-button::after {
  content: "\f055";
  width: unset;
  height: unset;
  margin-left: auto;
  background-image: none;
  transition: var(--bs-accordion-btn-icon-transition);
  font-size: 18px;
  font-weight: 900;
  font-family: "Font Awesome 6 Free";
}

.commonAccordion .accordion-button:not(.collapsed)::after {
  content: "\f056";
  transition: var(--bs-accordion-btn-icon-transition);
}
.CommonForm.ContactForm {
  gap: 0;
  row-gap: 20px;
}
.CommonForm.ContactForm input:not(.CommonForm.ContactForm #invalidCheck.form-check-input),
.CommonForm.ContactForm textarea {
  width: 100%;
  padding: 20px 25px;
  border-width: 1px;
  border-color: #ffffff;
  background-color: #ffffff;
}

.CommonForm.ContactForm input::placeholder,
.CommonForm.ContactForm textarea::placeholder {
  color: #cfcfcf;
}

.CommonForm.ContactForm input:focus,
.CommonForm.ContactForm textarea:focus {
  background-color: #ffffff;
}
.CommonForm.ContactForm .form-control:focus {
  border-color: var(--BgBlack);
}

.FaqForm .ContactForm .input-group > .form-control,
.FaqForm .input-group > .form-floating,
.FaqForm .input-group > .form-select {
  padding: 20px 25px;
}

.CommonForm.ContactForm label {
  font-family: "Red Hat Display";
  font-weight: 700;
}

.CommonForm.ContactForm label span {
  color: red;
}

.CommonForm.ContactForm .secH {
  margin-bottom: 20px;
}

.CommonForm.ContactForm .btnLarg {
  display: table;
  margin-left: auto;
  margin-right: auto;
}

/************** 
***Blog Page***  
***************/

.blogPage0.NewsAndBlog .NewsCard {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.blogPage0.NewsAndBlog .cardwrapBlogs {
  background-color: #ffffff;
  -webkit-box-shadow: 0px 4px 60px 0px rgba(0, 0, 0, 0.07);
  box-shadow: 0px 4px 60px 0px rgba(0, 0, 0, 0.07);
  padding: 10px;
}
.blogPage0.NewsAndBlog .ImgHoverZoom {
  width: 45%;
  aspect-ratio: unset;
  object-fit: cover;
}
.blogPage0.NewsAndBlog .ImgHoverZoom img {
  object-fit: cover;
  height: 100%;
}

.blogPage0.NewsAndBlog .NewsCardBody {
  padding: 40px 50px;
  width: 55%;
}

.searchbarBlogsForm label {
  font-weight: 600;
}

.searchbarBlogsForm .input-group > .form-control,
.input-group > .form-floating,
.input-group > .form-select {
  background-color: var(--offwhite);
}

.searchbarBlogsForm:not(.searchbarBlogsForm.was-validated)
  .input-group
  > .form-control,
.input-group > .form-floating,
.input-group > .form-select {
  border-color: transparent;
}

.searchbarBlogsForm .btnMedium {
  border: none;
  display: table;
  margin-left: auto;
  margin-right: auto;
}
.searchbarBlogsForm .btnMedium:hover::after,
.btnMedium:hover::before {
  width: 51%;
}

.asideSection {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  row-gap: 60px;
}

.form-control:focus {
  box-shadow: none;
}

.recentPosts ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.recentPosts ul li:not(.recentPosts ul li:last-child) {
  margin-bottom: 10px;
}
.recentPosts ul a {
  color: var(--BgBlack);
  display: inline-block;
  padding-left: 0px;
  font-weight: 500;
  transition: 0.3s;
}
.recentPosts ul a:hover {
  color: var(--blue);
  padding-left: 10px;
}

.ctaWidget {
  padding: 60px 50px;
  background: linear-gradient(#0b0301ab, #0b0301ab),
    url("../image/widget-cta-1.webp");
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
}
.ctaWidget .therdH {
  color: #ffffff;
  line-height: 1.5;
}

.ctaWidget .btnLarg {
  margin-top: 120px;
}
.tagWraper{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 10px;
}

.tag-link{
    display: inline-block;
    font-size: 14px ;
    font-weight: 600;
    text-transform: capitalize;
    line-height: 1;
    padding: 14px 20px;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
    color: var(--BgBlack);
    border: 1px solid var(--lightGrey);
    background-color: rgba(0, 0, 0, 0);
  }

  .tag-link:hover{
    color: #ffffff;
    border: 1px solid var(--blue);
    background-color: var(--blue);
  }





/*********************
***Blog Detail Page***  
**********************/

.blogDetailPage0.newBanner{
  text-align: left;
}

.tagsAndComments{
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 15px 40px ;
}
.tagsAndComments .text-muted {
  font-size: 18px;
  color: #ffffff !important;
}
.blogDetailPage0.newBanner .Datelink{
  cursor: initial;
}


.tagsAndComments .text-muted i {
  margin-right: 8px;
}
.taglinkFill{
  color: #ffffff;
  background-color: var(--blue);
  border: 1px solid var(--blue);
}
 .tag-link.taglinkFill:hover{
  color: var(--BgBlack);
  border: 1px solid #ffffff;
  background-color: #ffffff;
}
.blogDetailPage0.newBanner .taglinkFill{
  padding: 8px 15px;
}
.article-content{
  color: var(--grey);
}
.article-content .therdH{
  color: var(--BgBlack);
}

.postBottom .taglinkFill{
  color: #ffffff;
  background-color: var(--blue);
  border: 1px solid var(--blue);
}
.postBottom  .tag-link.taglinkFill:hover{
  color: #ffffff;
  background-color: var(--BgBlack);
  border: 1px solid var(--BgBlack);
}

.postBottomLinks .fIcons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.postBottomLinks a.fa-brands {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  height: 40px;
  width: 40px;
  background-color: var(--blue);
  color: #ffffff;
  border-radius: 50%;
  transition: 0.3s;
}
.postBottomLinks .fIcons a:hover {
  background-color: var(--BgBlack);
}

.authorImage{
  height: 160px;
  width: 160px;
}

.authorImage img{
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
}
.adminCard{
  position: relative;
  background-color: var(--Bglight);
  padding: 40px 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-top: 80px;
}
.authorDesc{
  width: calc(100% - 210px);
}

.postThubCard {
  max-width: 45%;
  align-items: center;
  margin-top: 40px;
}

.postThubCard .thumbImage{
  height: 100px;
  width: 100px;
}
.postThubCard .thumbImage img{
  aspect-ratio: 1;
  object-fit: cover;
}

.postThubCard .thumbPostContent{
  width: calc(100% - 115px);
}

.postThubCard .fourthH a{
color: var(--BgBlack);
transition: 0.3s;
}

.postThubCard .fourthH a:hover{
  color: var(--blue);
  }

  .readMoreBtn{
  color: var(--grey);
  font-weight: 600;
}
.readMoreBtn:hover{
  color: var(--blue);
}


.commentSection{
  margin-top: 80px;
}

.commentCard {
  color: var(--grey);
  padding-bottom: 30px;
  border-bottom: 1px solid var(--lightGrey);
}

.commentCardimg {
  height: 100px;
  width: 100px;
}


.commentCardimg  img{
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
}

.commentCard .commentDesc{
  width: calc(100% - 130px);
}

.commentCard .commentDesc .date{
  font-size: 16px;
  font-weight: 400;
  padding-left: 20px;
}
.commentCard .commentDesc .fifthH a{
  color: var(--BgBlack);
}

.commentCardWrap{
  row-gap: 30px;
}
.cardService{
  position: relative;
  padding: 10px;
  border:  1px solid var(--lightGrey);
}
.cardService .btnMedium{
  display: table;
  margin: auto;
  margin-top: -20px;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.absoAnchor{
  position: absolute;
  display: inline-block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.cardService p{
  text-align: center;
  margin-top: 16px;
  margin-bottom: 0;
  color: var(--grey);
  font-weight: 600;
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

.cardService:hover .btnMedium{
  opacity: 1;
}

.cardService:hover p{
  opacity: 0;
}

.pointsSection ol.olStyle li strong{
  color: var(--Black);
}

.pointsSection ol.olStyle  ul{
  list-style: disc;
}

/* GMB Services Section Styles */
.gmbServices {
  background: var(--Bglight);
}

.gmbIntro {
  max-width: 900px;
  margin: 0 auto;
}
.gmbIntro + .therdH{
    margin-bottom: 60px;
}

.gmbIntroText {
  font-size: 16px;
  line-height: 1.7;
  color: var(--grey);
  margin-top: 20px;
}

/* GMB Cards */
.gmbCard {
  background: #fff;
  padding: 24px 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  border: 2px solid transparent;
  position: relative;
}

.gmbCard:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(42, 111, 221, 0.15);
  border-color: var(--blue);
}

.gmbCardPopular {
  border: 2px solid var(--blue);
  transform: scale(1.04);
}

.gmbCardPopular:hover {
  transform: scale(1.04) translateY(-4px);
}

.popularBadge {
  position: absolute;
  top: -15px;
  text-wrap: nowrap;
  left: 50%;
  transform: translateX(-50%);
  background: var(--blue);
  color: white;
  padding: 8px 24px;
  border-radius: 30px;
  line-height: normal;
  font-weight: 700;
  font-size: 14px;
  font-family: "Manrope";
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Card Header */
.gmbCardHeader {
  text-align: center;
}

.gmbSubtitle {
  font-size: 14px;
  color: var(--grey);
  margin: 8px 0 0;
}

/* Price Section */
.gmbPrice {
  text-align: center;
  margin: 12px 0;
  padding: 16px 0;
  border-top: 2px solid var(--lightGrey);
  border-bottom: 2px solid var(--lightGrey);
}

.priceAmount {
  display: block;
  font-size: 36px;
  font-weight: 700;
  color: var(--Black);
  font-family: "Red Hat Display";
  line-height: 1;
}

.priceType {
  display: block;
  font-size: 16px;
  color: var(--grey);
  margin-top: 8px;
  font-weight: 500;
}

.additionalCharge {
  text-align: center;
  background: #fff3cd;
  color: #856404;
  padding: 10px 15px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  margin: 15px 0;
}

/* Description */
.gmbDescription {
  font-size: 15px;
  line-height: 1.6;
  color: var(--grey);
  text-align: center;
  margin-bottom:0;
}

/* Features List */
.gmbFeatures {
  margin: 25px 0 0;
  flex-grow: 1;
}

.gmbFeatures h5 {
  margin-bottom: 15px;
  color: var(--Black);
}

.gmbFeatures ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.gmbFeatures ul li {
  padding: 4px 0;
  font-size: 15px;
  color: var(--grey);
  display: flex;
  align-items: flex-start;
  line-height: 1.5;
}

.checkIcon {
  color: var(--green);
  font-weight: bold;
  margin-right: 12px;
  font-size: 18px;
  flex-shrink: 0;
}

/* Button */
.gmbBtn {
  display: block;
  text-align: center;
  padding: 15px 30px;
  background: var(--offwhite);
  color: var(--blue);
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  font-family: "Manrope";
  transition: all 0.3s ease;
  margin-top: 20px;
  border: 2px solid var(--blue);
}

.gmbBtn:hover {
  background: var(--blue);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(42, 111, 221, 0.3);
}

.gmbBtnPrimary {
  background: var(--blue);
  color: white;
}

.gmbBtnPrimary:hover {
  background: #1a54c7;
}
      
.gmbCard .btnMedium{
text-align: center;
margin-top: 20px;
align-self: center;
}
.razorpay-payment-button{
  margin-top: 16px;
  display: table !important;
  margin-left: auto;
  margin-right: auto;
}

.PaymentButton--dark{
 background-color: var(--blue) !important;
  border-radius: 0 !important;
}
.PaymentButton.svelte-ekc7fv.svelte-ekc7fv:not(.PaymentButton--rzpTheme):not(.PaymentButton--noRzpLogo)::before{
  display: none;
}

#razorPayModal .modal-header,#razorPayModal2 .modal-header{
  padding: 10px;
}
#razorPayModal .modal-dialog-centered,#razorPayModal2 .modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: unset;
    max-height: calc(100% - 34px);
}

#razorPayModal .modal-body,#razorPayModal2 .modal-body{
padding: 10px;
}

.btnMedium[data-bs-target="#razorPayModal"] i{
  margin-left: 0;
  margin-right: 5px;
}

#razorPayModal,#razorPayModal2, #exampleModal{
  z-index: 1057;
}
.modal-backdrop{
  z-index: 1056;
  opacity: 0.8 !important;
}

.policyContainer hr {
    margin: 1rem 0;
    border-top: 1px solid #724f4f;
    width: 100%;
    opacity: 1;
}

.bottomAnchors{
  display: flex;
  gap: 8px;
  text-shadow: 2px 2px 4px #0000004b;
  margin-bottom: 8px;
}

.policyIcon{
  flex: 0 0 auto;
  width: auto;
  font-size: 18px;
  transition: color 0.3s ease-in-out;
}

.policyAnchor{
flex: 1 0 0%;
color: var(--BgBlack);
transition: color 0.3s ease-in-out;
}
.bottomAnchors:hover .policyAnchor{
color: var(--blue);
}
.bottomAnchors:hover .policyIcon{
color: var(--blue);
}