/* * {
  border: 1px solid red;
} */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");
:root {
  --primary-color: #00A7DE;
  --primary-colordark: #147BC0;
  --second-color: #f4ff38;
}

body {
  font-family: "Jost", serif;
  font-optical-sizing: auto;
  font-style: normal;
  width: 100%;
  overflow-x: hidden !important;
  /* position: relative; */
}
html {
  scrollbar-width: thin;
  scrollbar-color: var(--primary-color) transparent;
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 20px;
}

::-webkit-scrollbar-thumb {
  background: #a613d7;
  border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a613d7;
}
.container {
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

.logo {
  width: 120px;
}
.logo.active {
  color: inherit;
}

.menu a {
  position: relative;
  font-size: 16px;
  font-weight: 600;
}

.menu a::after {
  position: absolute;
  content: "";
  width: 0px;
  transform: translateX(-50%);
  height: 2.5px;
  left: 50%;
  right: 50%;

  border-radius: 10px;
background: radial-gradient(
  circle at center,
  #2895d6 0%,
  #3ca9e6 40%,
  #5ebff0 70%,
  #a4dcff 100%
);

  transition: 0.2s;
  bottom: -0px;
}
.menu a.active {
  color: var(--primary-color);
  font-size: 18px;
}

.menu a.active::after {
  width: 40px;
}

.titel {
  color: var(--primary-color);
  font-weight: 600;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.section_titel span {
  color: transparent;


background: radial-gradient(
  circle at center,
  #a9e7fd 0%,
  #85ddfa 30%,
  #4FC3ED 60%,
  #00A7DE 100%
);



  background-clip: text;
}
.section_titel {
  color: #001E5B;
  font-weight: 800;
  font-size: 45px;
  padding: 20px 0;
  text-wrap: balance;
  line-height: 60px;
}

.praghraph {
  color: rgb(111, 110, 110);
  font-weight: 400;
  font-size: 18px;
  text-wrap: balance;
  line-height: 170%;
}
.button {

background: radial-gradient(
  circle at center,
  #00A7DE 0%,
  #4FC3ED 40%,
  #85ddfa 70%,
  #a9e7fd 100%
);


  padding: 17px 30px;

  font-weight: 600;
  border-radius: 10px;
  letter-spacing: 1px;
  display: inline-flex;
  gap: 10px;
  height: auto;
  align-items: center;
  position: relative;
  overflow: hidden;
  text-wrap: nowrap;
  transition: all 0.2s ease-out;
  box-shadow: 0 4px 20px -3px #00b7ff48;
}

.button:hover {
  transition: all 0.2s ease-out;
  box-shadow: 0 0px 0px #1eff0048;

  transform: translateY(-5px);
}

.button:hover::before {
  animation: sh02 0.5s 0s linear;
}
.button:hover svg {
  transform: translateX(5px) scale(1.3);
}
.button svg {
  transition: 0.2s;
}

.button::before {
  content: "";
  display: block;
  width: 0px;
  height: 86%;
  position: absolute;
  top: 7%;
  left: 0%;
  opacity: 0;
  background: #8eea48;
  box-shadow: 0 0 50px 30px #f1f9f1;

  transform: skewX(-20deg);
}

@keyframes sh02 {
  from {
    opacity: 0;
    left: 0%;
  }

  50% {
    opacity: 1;
  }

  to {
    opacity: 0;
    left: 100%;
  }
}

.button:active {
  box-shadow: 0 0 60px -5px #00c3ffdd;

  transition: box-shadow 0.2s ease-in;
}

.submenu {
  background: #fefefe;
  box-shadow: 0 5px 10px #8787875b;
  position: absolute;
  top:100%;
  padding: 15px 20px;
  left: 0;
  border-radius: 10px;
  visibility: hidden;
  transition: 0.3s;
  transform: translateY(30px);
  opacity: 0;
  width: 300px;
}
.menuhover:hover .submenu {
  visibility: visible;
  transform: translateY(0px);
  opacity: 1;
  z-index: 2;
}

.sub_submenu {
  background: #fefefe;

  box-shadow: 0 5px 10px #8787875b;
  position: absolute;
  top: 100%;
  padding: 20px 10px;
  right: 103%;
  top: 20%;
  border-radius: 10px;
  visibility: hidden;
  transition: 0.3s;
  transform: translateY(30px);
  opacity: 0;
  width: min-content;
}
.sub_menuhover:hover .sub_submenu {
  visibility: visible;
  transform: translateY(0px);
  opacity: 1;
}
/* 
.submenu li:hover {
  transform: translateX(10px);
  color: rgb(255, 179, 0);
  background: none !important;
}
.submenu li a:hover {
  background: none !important;
} */
.faq-item.faq-open {
  border: 1px solid #00A7DE;
  background: #f8fdff;
  transition:  0.1s;
}
.submenu li a.active::after {
  all: unset;
}
.submenu li a.active {
  color: var(--primary-color);
}
.submenu li {
  padding-right: 100px;
  transition: 0.2s;

  text-wrap: nowrap;
  padding: 7px 0;
}
.submenu li a {
  color: black;
  background: unset;
  text-wrap: nowrap;
}
.menu li a:hover {
  color: #fdbd1a;

  background: unset !important;
}
.carditem {
  /* border: 1px solid red; */
  position: relative;
  background: white;
  box-shadow: 0 10px 20px #cfdbe445;
  position: relative;
}
.shape {
  position: absolute;

  width: 8%;
  top: 25px;
  height: 20px;
  background: #02396d;
  left: 100%;
  border-radius: 0 0 20px 20px;
  /* box-shadow: 0 10px 0 rgb(255, 255, 255); */
  z-index: -1;
}
.empower {
text-shadow: 0 0 10px #147bc0d0, 0 0 30px #147bc073;


}
@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.carditem::after,
.carditem::before {
  content: "";
  position: absolute;
  width: calc(100% + 5px);
  height: calc(100% + 5px);
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  padding: 3px;
  border-radius: 19px;
  background: conic-gradient(
    from var(--angle),
    transparent 50%,
    rgb(1, 95, 219),
    var(--primary-color),
    transparent,
    transparent
  );
  animation: 5s spinn infinite linear;
  /* animation: 5s spinn  infinite linear; */
  z-index: -1;
}
.carditem::before {
  filter: blur(1rem);
  opacity: 0.2;
}

@keyframes spinn {
  from {
    --angle: 0deg;
  }
  to {
    --angle: 360deg;
  }
}

.services_slideritem {
  border-radius: 15px;
  padding: 13px;
  background: #014073;
}
.services_slideritem img {
  width: 100%;
  height: 270px;

  border-radius: 10px;
  object-fit: cover;
}
.services_slideritem p {
  padding: 10px 0;
  font-size: 18px;
  color: #ffffffb4;
}

.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: var(--swiper-pagination-bottom, 14px);
}

.servicesslider .swiper-pagination-bullet {
  background: #fdf3f3 !important;
  opacity: 1 !important;
  width: 12px;
  height: 12px;
  transition: 0.5s;
}
.servicesslider .swiper-pagination-bullet-active {
background: radial-gradient(
  circle,
  #a4dcff,
  #64bdec,
  #2895d6,
  #1b83cb,
  #147BC0
) !important;

  width: 40px;

  border-radius: 10px;
}

.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: var(--swiper-pagination-bottom, 8px);
  top: var(--swiper-pagination-top, auto);

  width: auto !important;
}

.servicesslider .swiper-slide {
  background-position: bottom;
  transition: 0.3s;
}

.servicesslider .swiper-slide.swiper-slide-active {
  background: linear-gradient(-40deg, #ffffffe1, #ffffff, #ffffff, white),
    url(/img/servicescardbg.webp), #ffffff;
  background-size: 100%;

  background-position: bottom;
  background-repeat: no-repeat;
  transform: translateY(-20px) scale(1.05);
}

.projectbg {
background: 
  linear-gradient(0deg, #00213f, #001530e8, #012657),
  url("/img/projectbg.webp") #012741;
  background-size: 100%;
}
.servicesslider .swiper-slide.swiper-slide-active p {
  color: black;
}
.servicesslider h3 {
  color: #ffffff;
}
.servicesslider .swiper-slide.swiper-slide-active h3 {
  color: black;
}
.servicesslider .swiper-slide.swiper-slide-active a {
  color: var(--primary-color);
  font-weight: 500;
  letter-spacing: 1px;
}
.Project_slideritem {
  border-radius: 15px;
  padding: 10px;
   background: #01356F;
   /* height: 500px; */

}
.Project_slideritem a{
 font-weight: bold;
 color: var(--primary-color);

}
.swiper-wrapper {
  
    height: auto;
    padding-bottom: 140px;

}
.productbg{
  background: url(/img/productbg.png);
  background-size: 100% 100%;

}
.Project_slideritem img {
  width: 100%;
  border-radius: 10px;
}
.Project_slider .swiper-slide {
  border: 2px solid rgba(35, 34, 35, 0) !important;
  transform: rotate(3deg) scale(0.8) !important;
  transition: 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.Project_slider .swiper-slide.swiper-slide-active {
  background: linear-gradient(-40deg, #ffffffe1, #ffffff, #ffffff, white),
    url(/img/servicescardbg.webp), #ffffff;
  background-size: 100%;
  transform: rotate(0deg) scale(1) !important;

  background-position: bottom;
  background-repeat: no-repeat;
  transform: translateY(-20px) scale(1.05);
}
.Project_slider .swiper-slide img {
  /* filter: blur(2px); */
  transition: 0.5s;
}
.Project_slider .swiper-slide h3 {
  color: #ffffff;
}

.Project_slider .swiper-slide.swiper-slide-active h3 {
  color: black;
}
.Project_slider .swiper-slide.swiper-slide-active img {
  /* filter: blur(0px); */
  object-fit: cover !important;
}
.testimonials_item {
  transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  filter: blur(5px);
}
.testimonialslider .swiper-pagination-bullet {
  transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  background: #c5c5c5;
  height: 23px;
  border-radius: 2px;
  width: 3px;
}
.testimonialslider .swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
background: radial-gradient(
  circle at center,
  #a4dcff 0%,
  #2895d6 40%,
  #147BC0 70%,
  #0e5a9e 100%
);
  height: 55px;
}
.testimonialslider .swiper-slide.swiper-slide-active .testimonials_item {
  filter: blur(0px);

  /* background:#ffffff; */
  border: 1px solid #01acfc42;

  transform: translateX(-20px) scale(1.03);
}

.new_slider .swiper-slide img {
  transition: 1s;
  transform: rotate(8deg);
  filter: blur(2px);
}
.new_slider .swiper-slide.swiper-slide-active img {
  filter: blur(0px);

  transform: rotate(0deg) !important;
}

.swiper-button-next,
.swiper-rtl .swiper-button-prev,
.swiper-button-prev,
.swiper-ltr .swiper-button-next {
  right: 50% !important;
  transform: translateX(120%);
  border: 2px solid #49ccf4;
  min-width: 50px;
  min-height: 50px;
  border-radius: 50%;
}
.swiper-button-prev,
.swiper-ltr .swiper-button-next {
  left: 50% !important;
  transform: translateX(-120%);
}
.swiper-button-prev,
.swiper-button-next {
  top: 90% !important;
}
.swiper-button-prev:after,
.swiper-button-next:after {
  font-size: 20px !important;
  color: #49ccf4;
}

.imgitem {
  overflow: hidden;
  height: 400px;
  border-radius: 10px;
}

.imgitem img {
  transition: 0.5s;
}
.imgitem:hover img {
  /* background-size: 150% !important; */
  transform: scale(1.2);
}
.mix img {
  border-radius: 10px;
  margin-bottom: 20px;
  width: 100%;
}
.headerwapper {
  background: linear-gradient(to left top, #014c86, #0d1d41, #00133b);
}

.servicesbg {
background: linear-gradient(-50deg, #002255cc, #011e49cc, #011e41b4),
    url(/img/servicesbg.webp);

  background-size: 100% 200%;
  background-size: cover;
  background-repeat: no-repeat;
}

.centerbanner {
  width: 100%;
  /* height: 400px; */
background: linear-gradient(-50deg, #012863cc, #012b69cc, #011e41b4),
    url("/img/servicesbg.webp");

  background-size: cover;
  background-position: center center;

  /* background-size: 100% ; */
}

.testimonialbg {
  background: linear-gradient(
      0deg,
      #fffffff3,
      #ffffffda,
      #ffffffe1,
      #ffffffe5,
      #ffffffea,
      #fffffff1,
      #ffffff
    ),
    url(/img/testimonialbg.png);

  background-size: 100%;
  background-repeat: no-repeat;
}

.footerbg {
background: linear-gradient(-50deg, #002152fa, #012957e0, #001e4be7),
    url("/img/servicesbg.webp");
  color: #e2e2e2;
}
.herosection {
  background: url(../img/hero.webp);
  background-size: 40%;
  background-repeat: no-repeat;
  background-position: right 120px;
}

.navbar_fixed {
  background: #ffffff;
  
  /* background: url("/img/EZZE Design Image.png") white; */
  background-size: cover;
 

  position: fixed;
  z-index: 99;
  left: 0%;
 
  
  top: 0px;
  transition: all  top 0.4s linear;
  
}
.navbar_fixed .logo{

  width: 90px;

}
.navbar_fixed .menu a{
  color: #000707;
  
}
.navbar_fixed .menu a:hover  {
  color: var(--primary-color);
  
}
/* ============about================ */
/* ============about================ */
/* ============about================ */
/* ============about================ */

.company_year {
  top: 85%;
  right: 18%;
  /* width: 300px; */
  background: #ebb401;
  background: #0e3128;
  transform: translate(100%, -50%);

  border-radius: 20px;
  text-wrap: nowrap;
  width: 130px;
  height: 200px;
  border-radius: 50% 50% 50% 50%;
  border-radius: 100px;
  /* backdrop-filter: blur(5px); */
  display: flex;
  justify-content: center;
  align-items: center;
  border: 15px solid white;
}

.company_year .year_num {
  font-weight: 900;
  font-size: 65px;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(-20px);

  position: relative;
  color: transparent;

  background-position: center;
  background-size: 30px;
  background-repeat: 5;
  /* opacity: .4; */
  /* -webkit-text-stroke: 2px red; */
}

.company_year .year_num span {
  -webkit-text-stroke: 2px #e4f624;
}
.company_year img {
  opacity: 0.7;
  filter: grayscale(1);
}
.company_year b {
  font-size: 25px;
  right: -27%;
  letter-spacing: 5px;
  top: 70%;
  transform: translateY(-30%);
  color: #0e3128;
  background: #ffffffc5;
  font-weight: 400;
  line-height: 23px;
  padding: 0 10px;
  /* text-shadow: 0 0 5px white; */

  position: absolute;
}

.company_year small {
  right: -10%;
  top: 25%;

  position: absolute;

  background-position: center;
  font-size: 30px;
  font-weight: 200;
  display: inline-block;
  color: rgb(248, 248, 248);
  color: #e4f624;

  /* transform: translateY(-45px); */
}

.why_card {
  padding: 20px;
  padding-right: 10px; 
  position: relative;
  border-radius: 15px;
  border: 1px dashed #d8d8d8d2;
  background: white;
  transition: 0.2s;
  box-shadow: 0 5px 20px -5px #7979793a;
}

.why_card:hover {
  box-shadow: 0 0px 0px 0px #7979793a;
  transform: translateY(-5px);
  background: linear-gradient(
    140deg,
    #fdeeb6,
    #fffbed,
    white,
    #f1faf0,
    #e2ffde
  );
  /* color: white; */
  border: 1px solid #ffedbb;
  border-right-color: #35ac2850;

  border-bottom-color: #35ac2850;
}

.why_card .why_choose_titel {
  font-size: 18px;
  font-weight: 700;
}
.why_card p {
  padding: 10px 0;
}

.serviswiper {
  padding-bottom: 60px !important;
}
.tesimonialswiper {
  padding-left: 40px !important;
  padding-right: 20px !important;
}

.linerbg {
  background: linear-gradient(290deg,#001e5f, #0e0044);
  padding-top: 50px;
}
.about_banner {
  background: url(/img/aboutpagebanner.png);
  height: 350px;
  background-size: 30%;
  background-repeat: no-repeat;
  background-position: 100% 140px;
}
.contact_banner {
  background: url(/img/contactabout.png);
  height: 350px;
  background-size: 38%;
  background-repeat: no-repeat;
  background-position: 90% 20px;
}
.slinerbg {
  background: linear-gradient(-200deg, #025517, #003308, #003308, #003308);
  padding-top: 50px;
}
.services_banner {
  background: url(/img/servicespagebanner.png);
  height: 350px;
  background-size: 15%;
  background-repeat: no-repeat;
  background-position: 90% bottom;
}
.about_banner h1,
.contact_banner h1,
.services_banner h1 {
  font-size: 40px;
  color: white;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 3px;
}
.griditem img {
  padding: 10px 0;
  margin: auto;
  width: 100px;

  /* width:auto; */
}
.borderarea {
  margin: auto 0;
  border-radius: 20px;

  border: 5px solid rgb(1, 66, 116);
}
.griditem {
  position: relative;
}

.griditem p {
  /* width: 90%; */
  font-size: 15px;
  color: rgb(100, 100, 100);
}
.griditem h3 {
  font-size: 30px;
  color: rgb(7, 186, 240);
}

.griditem:nth-child(1)::after {
  content: "";
  position: absolute;
  background: url(/img/firstarrow.png);
  background-size: 100%;
  background-repeat: no-repeat;
  width: 80%;
  height: 60%;
  left: 90%;
  top: 25%;

  /* width:auto; */
}
.griditem:nth-child(2)::after {
  content: "";
  position: absolute;
  background: url(/img/2arrow.png);
  background-size: 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 60%;
  left: 80%;
  bottom: 15%;

  /* width:auto; */
}
.griditem:nth-child(3)::after {
  content: "";
  position: absolute;
  background: url(/img/3arrow.png);
  background-size: 100%;
  background-repeat: no-repeat;
  width: 90%;
  height: 60%;
  left: 85%;
  top: 25%;
  transform: rotate(10deg);
}
/* ==========sevices page==================== */
/* ==========sevices page==================== */
/* ==========sevices page==================== */
/* ==========sevices page==================== */
.services_section {
  background: #f8f4e9;
  background-size: cover;
  background-repeat: no-repeat;
}
.product_detail_page_bg {
    background: #F6EFD3;

  background-size: cover;
  background-repeat: no-repeat;
}
.servicesitem {
  background: white;
  padding: 40px 30px;
  border-radius: 15px;
  position: relative;
  transition: 0.3s;
}

.servicesitem::after {
  position: absolute;
  content: "";
  width: 60px;
  height: 30px;
  background: transparent;
  border-bottom: 1px double #adadad;
  border-right: 1px double #adadad;
  border-radius: 0 0 10px 0;
  left: 0;
  top: 35%;
}
.servicesitem::before {
  position: absolute;
  content: "";
  width: 10px;
  height: 10px;
  background: #adadad;

  border-radius: 10px;
  left: 53.5px;
  top: 34%;
}
.servicesitem:hover::before {
  background: var(--primary-color);
}
.servicesitem:hover::after {
  border-bottom: 1px double var(--primary-color);
  border-right: 1px double var(--primary-color);
}
.servicesitem h3 {
  color: black;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 1px;
}
.servicesitem p {
  color: rgb(126, 126, 126);
  line-height: 25px;
  font-size: 15px;
  padding: 10px 0;
}
.servicesitem img {
  transition: 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.servicesitem:hover img {
  transform: scale(1.2);
}
.servicesitem:hover .servicesbtn {
  outline-offset: -5px;

  outline: 2px dashed white;
}
.servicesbtn:hover {
  outline: 2px dashed var(--primary-color) !important  ;

  outline-offset: 5px !important;
}
.servicesbtn {
  width: 35px;
  height: 35px;
  background: #001D5B;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: white;
  font-size: 18px;
  transition: 0.3s;
  outline: 1px solid #001D5B;
  outline-offset: 4px;
  
}

.cntentheader{

 background-size: 450px !important;
 
background-position: right bottom !important;
background-repeat: no-repeat !important;
}
.technicalservice li{
font-size: 15px;
padding: 4px 0;
font-weight: 500;
padding-left: 20px;
}
.keycard{
 
  background: white;
  position: relative;
  border-radius: 20px;
}
.keycard img{
  height: 80px;
}
.keycard::after{
 
  position: absolute;
  top: 0;
  right: 50px;
  content: '';
  width: 53%;
  height: 80px;
  /* background: red; */
  border-right: 1px dashed #04a038;
  border-bottom: 1px dashed #04a038;
  border-radius: 0 0 15px  0 ;
}
.keycard::before{
  
  position: absolute;
  top: 74px;
  right: 67%;
  content: '';
  width: 10px;
  height: 10px;
  background:#61A552;
  
  border-radius: 50%;
  transition: .2s;
}
.keycard:hover::before{
 
  position: absolute;

transform: scale(1.5);
  background:#61c44b;
  
  outline: 1px dashed #61A552;
  outline-offset: 2px;
 
  
}
.topbanner{
  background:linear-gradient(30deg,#011b33b4,#000531b4),url(/img/netbg.webp) #021435 ;
  background-size: cover;
  background-position: center;
}
.mobilenav{
  padding-left: 30px;

}
.mobilenav li {

  /* background: red; */
  padding: 3px 0;

}
.mobilenav li a{

  /* background: rgb(0, 255, 21); */
  width: 100%;
  display: inline-block;
  font-size: 17px;

}
.wccard{
  background: linear-gradient(-30deg, #cdedff, #fffdef, #faf6fa,white,white);
  border:2px dashed #050505;
  text-align: center;
  padding: 30px 10px;
  padding-top: 60px ;
  position: relative;
  border-radius: 20px;
  
  
}
.wccard img{

 position: absolute;
 left: 50%;
 transform: translateX(-50%);
 top: -45px;
 /* outline: 7px solid #0a0a0a; */
 outline-offset: -5px;
 border-radius: 5px;
 width: 80px;
 padding:0 2px;
 background: white;
  
}
.meshbg{
  background: url(/img/servicesbg.png);
  background-size: cover;
  background-position: center;
  border-radius: 10px;
}

  .t {
    top: 87% !important;
    left: 10px !important;
  }
  .v{
    top: 87% !important;
    left: 60px !important;
  }
/* ======1024======responsive=====1024=========== */
/* ======1024======responsive=====1024=========== */
/* ======1024======responsive=====1024=========== */
/* ======1024======responsive=====1024=========== */

@media (max-width: 1024px) {
  .mix img {
    margin-bottom: 10px;
  }
  .section_titel {
    font-size: 25px;

    line-height: 35px;
  }
}
/* ======768======responsive=====768=========== */
/* ======768======responsive=====768=========== */
/* ======768======responsive=====768=========== */
/* ======768======responsive=====768=========== */
/* ======768======responsive=====768=========== */
/* ======768======responsive=====768=========== */
/* ======768======responsive=====768=========== */
/* ======768======responsive=====768=========== */

@media (max-width: 768px) {
  .productbg{
  background: url(/img/mproductbg.png);
  background-size: 100% 100%;

}
  .titel {
    font-size: 16px;
  }
  .section_titel {
    font-size: 23px;
    padding: 10px 0;
    line-height: 30px;
  }
  .tesimonialswiper {
    padding-left: 0px !important;
    padding-right: 0px !important;

    /* background: #faeec5b7; */
  }
  .productswiper {
    padding-bottom: 0px !important;
  }
  .productswiper h3,
  .productswiper a {
    text-align: center;
    display: block;
  }

  .swiper-vertical > .swiper-pagination-bullets,
  .swiper-pagination-vertical.swiper-pagination-bullets {
    right: var(--swiper-pagination-right, 8px);
    left: var(--swiper-pagination-left, auto);
    top: 99% !important;
    transform: translate3d(0px, -50%, 0);
    display: flex;
    gap: 10px;
    width: 200px;
    justify-content: center;
    /* background-color: red; */
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
  .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet,
  .swiper-pagination-vertical.swiper-pagination-bullets
    .swiper-pagination-bullet {
    display: inset !important;
    height: 3px;
    width: 30px;
    opacity: 0.4;
  }
  .testimonialslider .swiper-pagination-bullet-active {
    opacity: var(--swiper-pagination-bullet-opacity, 1);
  
    width: 55px !important;
  }
  .testimonialslider .swiper-slide .testimonials_item {
    filter: blur(0px);

    transform: translateX(0px) scale(1);
  }
  .testimonialslider .swiper-slide.swiper-slide-active .testimonials_item {
    filter: blur(0px);

    /* background:#ffffff; */
    border: 1px solid #34b6dd42;
    box-shadow: 0 5px 0px var(--primary-color);

    transform: translateX(0px) scale(1);
  }
  .swiper-pagination-fraction,
  .swiper-pagination-custom,
  .swiper-horizontal > .swiper-pagination-bullets,
  .swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom: var(--swiper-pagination-bottom, 8px);
    top: var(--swiper-pagination-top, auto);

    width: 100% !important;
  }


  .herosection {
    background-size: 90%;

    background-position: -30px 95%;
  }
  .services_slideritem {
    padding: 8px;
  }
  .services_slideritem img {
    height: 330px;
  }
  .serviswiper {
    padding-bottom: 0px !important;
  }
  .services_slideritem p {
    padding: 6px 4px;
    font-size: 18px;

    text-wrap: blance;
  }
  .company_year {
    top: 87%;
    right: 25%;
    border-radius: 20px;
    width: 80px;
    height: 110px;
    border: 7px solid white;
  }

  .company_year .year_num {
    font-size: 35px;

    transform: translateY(-25px);
  }

  .company_year b {
    font-size: 15px;
    right: -27%;
    letter-spacing: 1px;
    top: 70%;
    transform: translateY(50%);

    line-height: 15px;
  }
  .why_card {
    padding: 20px 10px;
  }
  .why_card p {
    padding: 5px 0;
  }
  .Project_slideritem {
    /* padding: 6px; */
    padding-bottom: 15px;
    height: 480px ;
  }
  .Project_slideritem h3 {
    font-size: 22px !important;
    padding-top: 15px;
    padding-bottom: 10px;
  }

  .swiper-button-prev,
  .swiper-button-next {
    top: 95% !important;
  }
  .v,
  .t {
    top: 86% !important;
  }
  .griditem {
    text-align: center;
  }

  .griditem:nth-child(1)::after {
    width: 45%;
    height: 30%;
    left: 80%;
    top: 40%;

    /* width:auto; */
  }
  .griditem:nth-child(2)::after {
    width: 60%;
    height: 30%;
    left: -28%;
    bottom: -15%;
    transform: rotate(160deg);

    /* width:auto; */
  }
  .griditem:nth-child(3)::after {
    width: 50%;
    height: 30%;
    left: 70%;
    top: 45%;
    transform: rotate(10deg);
  }
  .linerbg {
    padding-top: 10px;
  }
  .about_banner h1,
  .contact_banner h1 {
    font-size: 30px;
  }
  .about_banner p,
  .contact_banner p {
    font-size: 15px;
  }
  .about_banner,
  .contact_banner {
    height: 270px;
  }
  .contact_banner {
    background-position: 90% bottom;
  }
  .servicesitem {
    padding: 20px 20px;
  
  }
  
.servicesitem::after {

  width: 60px;
  
  border-radius: 0 0 10px 0;

  top: 30%;
}
.servicesitem::before {
  position: absolute;
  content: "";
  width: 10px;
  height: 10px;
  background: #adadad;

  border-radius: 10px;
  left: 54px;
  top: 28%;
}
.servicesitem p {
  
    padding: 0px 0;
}
.about_banner {

    background-size: 50%;
    background-repeat: no-repeat;
    background-position: 100% 200px;
}
.navbar_fixed {
  background:linear-gradient(-15deg, #0b156e, #001549);
  

/* backdrop-filter: blur(10px); */
  position: fixed;
  z-index: 99;
  left: 0%;
  top: 0px;
  transition: all top 0.4s linear;
  padding: 10px 0;
 border: 1px solid var(--primary-color);

  left: 50%;
  transform: translateX(-50%) translateY(10px);
  /* backdrop-filter: unset; */

  width: 95%;
  border-radius: 10px;
  box-shadow: 0 5px 20px -5px #01699950;
}
.logo {
  width: 80px;
}
    .v {
        left: 50% !important;
    }
   .t {
        left: 40% !important;
    }

    .why_card {
 
  padding-top: 55px;
}
/* ========== */
/* ========== */
/* ========== */
/* ========== */
}