@import url("https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css");
.about-section .about-img--alt img {
    height: 570px !important;
}
.navbar-brand {
    width: 280px !important;
}
nav.navbar .row {
    justify-content: space-between !important;
    width: 109% !important;
}
header .container {
}
.about-img--alt:before {
    display: none;
}
.about-img--inner:before {
    display: none;
}
.about-img--inner img {
    height: 494px !important;
    object-position: 33%;
}
.main-tabs {
    display: none;
}
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
.imgFluid {
  max-width: 100%;
  height: auto;
}
@font-face {
  font-family: "Faktum Test";
  src: url("../fonts/FaktumTest-Regular.eot?#iefix") format("embedded-opentype"),
    url("../fonts/FaktumTest-Regular.woff2") format("woff2"),
    url("../fonts/FaktumTest-Regular.woff") format("woff"),
    url("../fonts/FaktumTest-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Faktum Test";
  src: url("../fonts/FaktumTest-Bold.eot?#iefix") format("embedded-opentype"),
    url("../fonts/FaktumTest-Bold.woff2") format("woff2"),
    url("../fonts/FaktumTest-Bold.woff") format("woff"),
    url("../fonts/FaktumTest-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
body {
  overflow-x: hidden;
  position: relative;
  font-family: "Faktum Test";
}
html {
  font-family: "Faktum Test";
  scroll-behavior: smooth;
}
a,
button {
  transition: all 0.5s ease-in-out 0s;
  text-decoration: none;
  outline: none;
  border: none;
  cursor: pointer;
}
a:hover,
button:hover {
  text-decoration: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Faktum Test";
  margin: 0px;
}
p,
span,
small {
  font-family: "Faktum Test";
  margin: 0px;
}
input,
select,
textarea {
  font-family: "Faktum Test";
}
ul,
ul.list-inline {
  margin: 0px;
  padding: 0px;
}
li {
  padding: 0px;
  list-style: none;
  font-family: "Faktum Test";
}
li a {
  font-family: "Faktum Test";
}
.mc-b-1 {
  padding-bottom: 10px;
}
.mc-b-2 {
  padding-bottom: 20px;
}
.mc-b-3 {
  padding-bottom: 30px;
}
@keyframes mymove {
  0% {
    opacity: 0.1;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.1;
  }
}
.primary-heading h3 {
  font-family: "Faktum Test";
  font-size: 35px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgb(14, 13, 13);
}
.primary-heading h4 {
  font-family: "Faktum Test";
  font-size: 30px;
}
.primary-heading h6 {
  font-family: "Faktum Test";
  font-size: 12px;
  font-weight: 700;
  line-height: 22px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgb(0, 0, 0);
}
.primary-heading p {
    font-family: "Faktum Test";
    font-size: 22px;
    font-weight: 500;
    line-height: 33px;
    letter-spacing: 0px;
    text-transform: none;
    text-align: left;
    color: rgb(0, 0, 0);
    padding: 10px 0px 20px 0px;
}
.primary-heading h2 {
  font-family: "Faktum Test";
  font-size: 66px;
  font-weight: 500;
  line-height: 80px;
  text-align: left;
  color: rgb(21, 41, 67);
  letter-spacing: 1px;
}
.primary-btn a {
  background-color: rgb(255, 255, 255);
  padding: 12px 30px;
  border-radius: 50px;
  font-family: "Faktum Test";
  color: black;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 13px;
  line-height: 23px;
  text-align: center;
  border: 1px solid rgb(255, 255, 255);
  display: inline-block;
}
.btn-quote a {
  background-color: rgb(255, 255, 255);
  padding: 12px 30px;
  border-radius: 50px;
  font-family: "Faktum Test";
  color: black;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 13px;
  line-height: 23px;
  text-align: center;
  border: 1px solid;
}
.btn-quote a:hover {
  text-decoration: none;
  border: 1px solid rgb(216, 215, 215);
  transition: all 0.2s ease-in-out 0s;
}
.primary-btn a:hover {
  text-decoration: none;
  border: 1px solid rgb(216, 215, 215);
  transition: all 0.2s ease-in-out 0s;
}
.primar-btn {
  display: inline-block;
  position: relative;
  font-size: 16px;
  font-weight: 500;
  padding: 10px 35px;
  text-align: center;
  text-transform: uppercase;
  transition: all 1s ease-in-out 0s;
  border: 2px solid;
  outline: none;
  border-radius: 10px;
}
.primar-btn.primar-bg {
  background: linear-gradient(139deg, rgb(0, 76, 137), rgba(0, 255, 209, 0.48));
  color: rgb(255, 255, 255);
  border: transparent;
  border-radius: 50px;
  font-weight: 600;
}
.primar-btn.primar-bg:hover {
  color: rgb(255, 255, 255);
  background: linear-gradient(303deg, rgb(0, 76, 137), rgba(0, 255, 209, 0.48));
}
header {
  position: absolute;
  width: 100%;
  top: 0px;
  left:0;
  z-index: 99;
}
header.header--inner{
    position: relative;
    background:#152943;
}
header .navbar-nav {
  background: rgba(255, 255, 255, 0.14);
  padding: 14px 10px;
  border-radius: 50px;
  flex-wrap: wrap;
  gap: 0 0.5rem;
  align-items: center;
  justify-content: center;
}
a.navbar-brand {
  filter: brightness(0) invert(1);
  padding: 30px 0px;
}
header .container {
  max-width: 1300px;
}
header .nav-link {
  display: block;
  padding: 0.25rem 5rem;
  color: rgb(255, 255, 255) !important;
}
header .navbar-collapse {
  float: right;
  padding: 40px 0px;
}
header .row {
  width: 100%;
}
header .navbar-collapse li {
  padding: 0px 2px;
}
header .navbar-collapse li a:hover {color:#00ffc7!important}
.dropdown-menu {}
.startBtn {
  background: transparent;
  padding: 16px 40px;
  border-radius: 50px;
  color: rgb(255, 255, 255);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  float: right;
  margin: 0px;
  z-index: 1111;
  position: relative;
}
.startBtn:hover,
.startBtn:focus {
  background: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
}
.fireBox {
  margin: 80px auto;
  width: 60px;
  height: 60px;
  position: relative;
  transform-origin: center bottom;
  animation-name: flicker;
  animation-duration: 3ms;
  animation-delay: 200ms;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.flame {
  bottom: 0px;
  position: absolute;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
  border-top-left-radius: 50%;
  transform: rotate(-45deg) scale(1.5, 1.5);
}
.yellow {
  left: 15px;
  width: 30px;
  height: 30px;
  background: gold;
  box-shadow: gold 0px 0px 9px 4px;
}
.orange {
  left: 10px;
  width: 40px;
  height: 40px;
  background: orange;
  box-shadow: orange 0px 0px 9px 4px;
}
.red {
  left: 5px;
  width: 50px;
  height: 50px;
  background: orangered;
  box-shadow: orangered 0px 0px 5px 4px;
}
.white {
  left: 15px;
  bottom: -4px;
  width: 30px;
  height: 30px;
  background: white;
  box-shadow: white 0px 0px 9px 4px;
}
.circle {
  border-radius: 50%;
  position: absolute;
}
.blue {
  width: 10px;
  height: 10px;
  left: 25px;
  bottom: -25px;
  background: slateblue;
  box-shadow: slateblue 0px 0px 15px 10px;
}
.black {
  width: 40px;
  height: 40px;
  left: 10px;
  bottom: -60px;
  background: black;
  box-shadow: black 0px 0px 15px 10px;
}
@keyframes flicker {
  0% {
    transform: rotate(-1deg);
  }
  20% {
    transform: rotate(1deg);
  }
  40% {
    transform: rotate(-1deg);
  }
  60% {
    transform: rotate(1deg) scaleY(1.04);
  }
  80% {
    transform: rotate(-2deg) scaleY(0.92);
  }
  100% {
    transform: rotate(1deg);
  }
}
@media only screen and (min-width: 300px) and (max-width: 767px) {
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
}
@media only screen and (min-width: 1024px) and (max-width: 1280px) {
}
@media only screen and (min-width: 1250px) and (max-width: 1400px) {
}
.transition,
body,
body #clients .wrapper .filtres ul li,
body #clients .wrapper .filtres ul li::before,
body #lets_talk .wrapper .form_container form .champ .input input,
body #lets_talk .wrapper .form_container form .champ .input textarea,
body #lets_talk header .wrapper .form_container form input[type="submit"],
body .projets .grid_projets a .titre_projet::before,
body header,
body header #lets_talk .wrapper .form_container form input[type="submit"],
body header .wrapper .bouton,
body header .wrapper nav ul li a {
  transition: all 0.5s ease-out 0s;
}
.bouton::after,
.cubic,
a,
a:active,
a:hover,
a:link,
a:visited,
body #clients .wrapper .grid_clients .single_client a .verso,
body #clients .wrapper .grid_clients .single_client a .verso span img,
body #clients .wrapper .intro,
body #clients .wrapper h3,
body #competences,
body #lets_talk,
body #lets_talk .wrapper .form_container form input[type="submit"],
body #lets_talk .wrapper .form_container form input[type="submit"]::after,
body #lets_talk .wrapper > div,
body #navigation_mobile_container,
body #navigation_mobile_container nav.mobile-navigation,
body .a_propos_pourquoi,
body .a_propos_pourquoi .pourquoi .slider .slide_container .slide,
body .a_propos_pourquoi .pourquoi .slider .slide_container .slide .chapitre,
body .a_propos_pourquoi .pourquoi .slider .slide_container .slide h5,
body .a_propos_pourquoi .pourquoi .slider .slide_container .slide p,
body .a_propos_pourquoi .pourquoi .title_container .slider_nav span::before,
body.call_to_action_open
  #lets_talk
  .wrapper
  .form_container
  form
  header
  input[type="submit"],
body.call_to_action_open header,
body.call_to_action_open
  header
  #lets_talk
  .wrapper
  .form_container
  form
  input[type="submit"],
body.call_to_action_open header .bouton,
body .modales,
body .projets .grid_projets a .titre_projet,
body .projets h3,
body header .wrapper .site-title a svg path:not(#pixel_logo),
body header .wrapper .site-title a svg text,
footer .wrapper .bottom_footer ul li,
footer .wrapper .coordonnees li {
  transition: all 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0s;
}
.absolute,
body #clients .wrapper .grid_clients .single_client a .verso,
body #headband .wrapper .logo_headband #svg_masque_headband,
body .modales .overlay,
body .projets .grid_projets a .covers_container .verso,
body header .wrapper .site-title a .logo_seo {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
}
figure.image_container {
  height: 100%;
  width: 100%;
  line-height: 0;
  font-size: 0px;
}
figure.image_container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
@-webkit-keyframes change_color {
  0% {
    fill: rgb(249, 185, 100);
  }
  50% {
    fill: rgb(249, 85, 83);
  }
  33% {
    fill: rgb(41, 108, 224);
  }
  100% {
    fill: rgb(249, 185, 100);
  }
}
body.white header {
  background: rgb(255, 255, 255);
}
body.white header .wrapper nav ul li a {
  color: rgb(17, 33, 56);
}
body.white header .wrapper nav ul li a.ancre_on::before,
body.white header .wrapper nav ul li a:hover::before {
  background: rgb(17, 33, 56);
}
body.white header .wrapper nav ul li a.ancre_on::after,
body.white header .wrapper nav ul li a:hover::after {
  background: 0px 0px;
}
body.white header .wrapper .site-title svg text {
  fill: rgb(17, 33, 56) !important;
}
body.white header .wrapper .site-title svg path:not(#pixel_logo) {
  fill: rgb(17, 33, 56) !important;
}
body.blue_light header {
  background: rgb(232, 238, 248);
}
body.blue_light header .wrapper nav ul li a {
  color: rgb(17, 33, 56);
}
body.blue_light header .wrapper nav ul li a.ancre_on::before,
body.blue_light header .wrapper nav ul li a:hover::before {
  background: rgb(17, 33, 56);
}
body.blue_light header .wrapper nav ul li a.ancre_on::after,
body.blue_light header .wrapper nav ul li a:hover::after {
  background: 0px 0px;
}
body.blue_light header .wrapper .site-title svg text {
  fill: rgb(17, 33, 56) !important;
}
body.blue_light header .wrapper .site-title svg path:not(#pixel_logo) {
  fill: rgb(17, 33, 56) !important;
}
body.blue header,
body.call_to_action_open header {
  background: rgb(17, 33, 56);
}
body.blue header .wrapper nav ul li a,
body.call_to_action_open header .wrapper nav ul li a {
  color: rgb(255, 255, 255);
}
body.blue header .wrapper nav ul li a.ancre_on::before,
body.blue header .wrapper nav ul li a:hover::before,
body.call_to_action_open header .wrapper nav ul li a.ancre_on::before,
body.call_to_action_open header .wrapper nav ul li a:hover::before {
  background: rgb(255, 255, 255);
}
body.blue header .wrapper nav ul li a.ancre_on::after,
body.blue header .wrapper nav ul li a:hover::after,
body.call_to_action_open header .wrapper nav ul li a.ancre_on::after,
body.call_to_action_open header .wrapper nav ul li a:hover::after {
  background: 0px 0px;
}
body.blue header .wrapper .site-title svg text,
body.call_to_action_open header .wrapper .site-title svg text {
  fill: rgb(255, 255, 255) !important;
}
body.blue header .wrapper .site-title svg path:not(#pixel_logo),
body.call_to_action_open header .wrapper .site-title svg path:not(#pixel_logo) {
  fill: rgb(255, 255, 255) !important;
}
body #headband {
  position: relative;
  min-height: 100vh;
  display: -webkit-box;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  color: rgb(255, 255, 255);
  z-index: 2;
  background: url("../images/bgg.png") 0% 0% / cover no-repeat;
  padding-top: 0px;
}
body #headband.headband--home {
  min-height: 110vh;
  -webkit-box-align: start;
  padding-top: 20rem !important;
}
body #headband::after {
  background: url("../images/pattern-30.png") 0% 0% / 100%;
  content: "";
  top: 0px;
  width: 100%;
  position: absolute;
  left: 0px;
  z-index: 0;
  height: 100%;
  animation: 5s ease 0s infinite normal none running mymove;
  pointer-events: none;
}
body #headband::before {
  background: url("../images/pattern-29.png") 0% 0% / 100%;
  content: "";
  top: 0px;
  left:auto;
  width: 100%;
  position: absolute;
  right: 0px;
  z-index: 0;
  height: 100%;
  animation: 5s ease 0s infinite normal none running mymove;
  pointer-events: none;
  background-position: right;
}
body #headband ::selection {
  text-shadow: none;
  color: inherit;
  background-color: transparent;
}
body #headband ::-webkit-selection {
  text-shadow: none;
  color: inherit;
  background-color: transparent;
}
body #headband canvas {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: -1;
}
body #headband .wrapper {
  text-align: center;
  max-width: 95%;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-align: center;
  align-items: center;
  font-family: Satoshi-Medium;
}
body #headband .wrapper .logo_headband {
  position: relative;
  overflow: visible;
  z-index: -1;
  transition: all 1s ease-in-out 0.75s;
  opacity: 1;
}
body #headband .wrapper .logo_headband #svg_masque_headband {
  z-index: -1;
}
body #headband .wrapper .logo_headband #svg_masque_headband svg {
  width: 100%;
}
body #headband .wrapper .logo_headband #svg_logo_headband svg {
  width: 100%;
}
body #headband .wrapper .logo_headband #svg_logo_headband svg path {
  opacity: 0;
}
body #headband .wrapper .texte_headband {
  position: relative;
  display: table;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-align: center;
  align-items: baseline;
  pointer-events: none;
}
body #headband .wrapper .texte_headband .titre {
  font-size: 22px;
  margin-bottom: 0px;
  line-height: 1.2;
  max-width: 100%;
  font-family: "Faktum Test";
  text-align: center;
}
body #headband .wrapper .texte_headband .titre .bleu {
  color: rgb(41, 108, 224);
}
body #headband .wrapper .texte_headband .titre .jaune {
  color: rgb(249, 185, 100);
}
body #headband .wrapper .texte_headband h2 {
  font-family: "Faktum Test";
  font-size: 63.5px;
  max-width: calc(200%);
  font-weight: 100;
  text-align: center;
  line-height: 85px;
  letter-spacing: -2px;
}
body #headband .wrapper .texte_headband h2 b {
  font-weight: 900;
  background-image: linear-gradient(
    to right bottom,
    rgb(11, 194, 181),
    rgb(5, 190, 183),
    rgb(23, 175, 181),
    rgb(0, 182, 187),
    rgb(8, 215, 177)
  );
  -webkit-background-clip: text;
  color: transparent;
  text-transform: capitalize;
}
.ServicesSec {
  position: relative;
  padding: 175px 0px 0px;
}
.ServicesSec .container-fluid {
  width: 100%;
  padding-right: 0%;
  padding-left: 0px;
}
.ServicesSec .container-fluid .servicesSlider {
  padding-left: 10%;
}
.ServicesSec .container-fluid .servicesSlider .main-box {
  margin: 0px 50px 0px 0px;
}
.main-boxSlider .slick-list.draggable {
  padding-bottom: 16rem;
}
.categoriesWrapper {
  position: relative;
  padding-bottom: 90px;
  z-index: 99;
}
.categoriesWrapper::before,
.categoriesWrapper::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  background: #152943;
  /* z-index: -9; */
}
section.ServicesSec.ServicesSec--bg {
  padding: 6rem 0px 3rem;
}
.ServicesSec--bg {
  background: rgb(21, 41, 67);
}
.categoriesWrapper::after {
  transform: skewY(-5deg);
  z-index: -8;
}
.ServicesSec .container {
  position: relative;
  z-index: 2222;
  max-width: 1300px;
  padding: 0px;
}
.ServicesSec p {
  color: rgb(255, 255, 255);
  font-size: 22px;
  line-height: 35px;
  font-weight: 500;
  padding: 0px;
  text-align: center;
}
.brandsBar {
  margin-top: 70px;
  padding: 0px 150px;
  margin-bottom: 90px !important;
  display: flex;
}
.brandsBar .slick-dots {
  display: none;
}
.brandsBarDiv {
  padding: 0px 20px;
}
.brandsBarDiv img {
  height: 50px;
  object-fit: contain;
  width: 100%;
}
.main-box {
  background-color: rgb(8, 23, 44);
  padding: 40px 30px;
  margin-top: 0px;
  min-height: 410px;
  width: 100%;
  --box-dimension: 180px;
  border-radius: 0 50px;
}
.main-boxWrapper .slick-list.draggable {
  padding: 0rem 0px 12rem;
}
.main-box.main-box1 {
  transform: translateY(var(--box-dimension)) !important;
}
.main-box.main-box2 {
  transform: translateY(calc(var(--box-dimension) - 60px)) !important;
}
.main-box.main-box3 {
  transform: translateY(calc(var(--box-dimension) - 120px)) !important;
}
.main-box:hover {
  background-image: linear-gradient(
    to right bottom,
    rgb(0, 76, 137),
    rgb(0, 112, 169),
    rgb(0, 148, 186),
    rgb(0, 182, 187),
    rgb(8, 215, 177)
  );
}
.main-box:hover .main-content {
  padding-top: 10px;
}
.main-box:hover .main-button {
  opacity: 1;
}
.main-box .main-img img {
  width: 22%;
  margin-bottom: 8%;
}
.main-box .main-content h2 {
  font-size: 23px;
  font-weight: bold;
  color: rgb(255, 255, 255);
  margin-bottom: 16px;
}
.main-box .main-content p {
  font-size: 14px;
  font-weight: 300;
  color: rgb(255, 255, 255);
  line-height: 24px;
  text-align: left;
}
.main-box .main-content ul {
}
.main-box .main-content ul li {
  font-size: 14px;
  font-weight: 300;
  color: rgb(255, 255, 255);
  line-height: 24px;
  text-align: left;
}
.main-content {
  padding-bottom: 0px;
  padding-top: 40px;
  transition: all 1s ease 0s;
}
.main-box .main-button {
  opacity: 0;
  transition: transform 300ms ease 0s;
}
.main-box .main-button a {
  color: rgb(0, 0, 0);
  text-decoration: none;
  padding: 11px 20px;
  background-color: rgb(255, 255, 255);
  border-radius: 38px;
  font-size: 12px;
  position: absolute;
  bottom: 8%;
  font-weight: 600;
}
.latestProject {
  padding: 90px 0px;
  background: rgb(254, 254, 254);position:relative;
}
.latestProject:after {
    background: url(../images/pattern-30.png) 0% 0% / 100%;
    content: "";
    top: 0px;
    width: 100%;
    position: absolute;
    left: 0px;
    z-index: 0;
    height: 100%;
    animation: 5s ease 0s infinite normal none running mymove;
    pointer-events: none;
}
.latestProject:before {
    background: url(../images/pattern-29.png) 0% 0% / 100%;
    content: "";
    top: 0px;
    left: auto;
    width: 100%;
    position: absolute;
    right: 0px;
    z-index: 0;
    animation: 5s ease 0s infinite normal none running mymove;
    pointer-events: none;
    background-position: right;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
}
.latestProject .container {
  position: relative;
  z-index: 2222;
  max-width: 1300px;
  padding: 0px;
}
.browsBtn {
  background: rgb(0, 0, 0);
  padding: 12px 30px;
  border-radius: 50px;
  color: rgb(255, 255, 255);
  font-weight: 600;
  font-size: 14px;
  margin: 40px 0px;
  display: block;
  width: fit-content;
  border: 1px solid;
}
.browsBtn:hover,
.browsBtn:focus {
  background: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
  border: 1px solid rgb(0, 0, 0);
}
.latestProject h2 span {
  position: relative;
}
.latestProject h2 span::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 20px;
  left: 0px;
  bottom: 9px;
  z-index: -1;
  background: linear-gradient(
      105.34deg,
      rgba(0, 76, 137, 0.64) 0.74%,
      rgba(0, 255, 209, 0.64) 94.7%
    ),
    rgb(162, 101, 235);
}
.latestProject h2 {
  font-size: 68px;
  font-weight: 600;
  font-family: "Faktum Test";
  color: rgb(0, 0, 0);
  text-transform: capitalize;
  margin-bottom: 115px;
}
.latestBox h5 {
  padding: 20px 0px;
  color: rgb(24, 151, 24);
}
footer {
  background: rgb(14, 53, 84);
  position: relative;
  padding-top: 4rem;
  z-index: 1;
  font-family: "Faktum Test";
  z-index: 999;
}
.news-letter-sec {
  border-bottom: 1px solid rgb(70, 70, 70);
}
.news-letter-sec .social-list li:not(:last-child) {
  margin-right: 20px;
}
.news-letter-sec .social-list li a {
  border: none;
  font-size: 20px;
  width: auto;
  color: rgb(255, 255, 255);
}
.news-letter-sec .form-group {
  margin-bottom: 0px;
  position: relative;
  background-color: rgb(243, 246, 249);
  padding: 10px;
  border-radius: 5px;
}
.news-letter-sec .form-group input {
  background-color: transparent;
  border: none;
}
.news-letter-sec .form-group input::placeholder {
  color: rgb(110, 110, 110);
}
.news-letter-sec .form-group button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 20px;
  background-color: transparent;
  color: rgb(110, 110, 110);
  font-size: 20px;
}
.news-letter-sec .form-group button:hover {
  right: 15px;
  color: rgb(80, 43, 33);
}
footer .footer-logo {
  width: 70px;
  display: block;
  margin: 0px 0px 0px auto;
}
footer .footer-logo img {
  width: 100%;
  object-fit: cover;
  display: block;
}
.footer-content h4 {
  color: rgb(255, 255, 255);
  font-size: 16px;
  padding-bottom: 30px;
  line-height: 28px;
  text-transform: uppercase;
  font-weight: 600;
}
.footer-content p {
  color: rgb(255, 255, 255);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
  margin-bottom: 10px;
}
.footer-content ul li a {
  color: rgb(255, 255, 255);
  font-size: 18px;
  line-height: 1.5;
  font-weight: 500;
}
.footer-content ul li:hover a {
  color: rgb(29 161 242);
}
.footer-content ul li:not(:last-child) {
  padding-bottom: 10px;
}
.footer-content .social-list li a {
  color: rgb(255, 255, 255);
  font-size: 20px;
  margin-right: 10px;
}
.footer-content .social-list li a i {
  color: rgb(255, 255, 255);
  transition: all 0.5s ease-in-out 0s;
}
.footer-content .social-list li:hover a i {
  color: rgb(29 160 241);
}
.contact-list li a span {
  color: rgb(255, 255, 255);
  margin-right: 5px;
}
.copyright-sec p {
  color: rgb(255, 255, 255);
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
}
.copyright-sec {
  justify-content: space-evenly;
  padding: 10px;
}
.copyright-sec ul li a,
.copyright-sec ul li {
  color: rgb(110, 110, 110);
  font-size: 14px;
  line-height: 24px;
}
.copyright-sec ul li:not(:last-child) {
  margin-right: 20px;
}
.copyright-sec ul li a:hover {
  color: rgb(255, 255, 255);
}
.get-it-quote h3 {
  font-size: 28px;
  font-weight: 600;
  color: rgb(255, 255, 255);
  margin-bottom: 30px;
}
.footer-sec {
  padding: 4rem 0px;
}
.footer-content .addres {
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  color: rgb(255, 255, 255);
  border-bottom: 1px solid;
}
.mc-t-2 {
  margin-top: 20px !important;
}
.pd-3 {
  padding-left: 40px;
}
.clr-1 h4 {
  color: rgb(255, 50, 46);
}
.clr-2 h4 {
  color: rgb(39, 174, 96);
}
.clr-3 h4 {
  color: rgb(47, 128, 237);
}
.clr-4 h4 {
  color: rgb(155, 81, 224);
}
.social-list {
  display: flex;
  gap: 1rem;
}
section.the-agency {
  padding: 13rem 0px 4rem;
}
section.the-agency .container {
  position: relative;
  z-index: 2222;
  max-width: 1250px;
}
.agency-quotes h4 {
  font-size: 14px;
  font-weight: 600;
}
.agency-quotes {
  color: rgb(255, 255, 255);
}
.agency-quotes h3 {
  font-size: 40px;
  font-weight: 600;
  padding: 24px 0px;
  line-height: 1.5;
}
section.the-agency .container,
footer .container,
.testimonialsSec .container {
  max-width: 1300px;
  padding: 0px;
}
.blog-content h4 {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
}
.blog-content {
  color: rgb(255, 255, 255);
  padding-bottom: 3rem;
}
.blog-content p {
  font-size: 21px;
  font-weight: 600;
  padding-top: 20px;
}
.blog-twitter {
  color: rgb(255, 255, 255);
  background: rgb(29, 161, 242);
  padding: 1rem;
  height: 380px;
  position: relative;
  min-height: 380px;
}
.blog-twitter h4 {
  font-size: 14px;
  font-weight: 600;
}
.blog-twitter p {
  padding-top: 30px;
  font-size: 16px;
  line-height: 1.8;
}
.twitter-list {
  display: flex;
  justify-content: space-between;
  position: absolute;
  bottom: 30px;
  width: 90%;
}
.testimional-img img {
  width: 100%;
  object-fit: contain;
  display: block;
}
.testimonialsSec .container {
  position: relative;
  z-index: 2222;
  max-width: 1300px;
}
.testmional-title h2 {
  font-size: 65px;
  font-family: "Faktum Test";
  font-weight: 600;
}
.testmional-title p {
  font-size: 21px;
  font-weight: 600;
  padding: 20px 0px;
}
.testimional-section {
  background: url("../images/testibg.png") 0% 0% / cover no-repeat;
  width: 100%;
  height: 100%;
  padding: 10rem 0rem;
  position: relative;
}
.testimional-content {
  background-color: rgb(234, 234, 234);
  padding: 2rem;
  border-radius: 20px;
  margin: 30px;
  position: relative;
}
.testimional-content p {
  margin-bottom: 15px;
}
.test-team h4 {
  -webkit-text-fill-color: transparent;
  font-weight: 600;
}
.test-team li {
  color: rgb(0, 0, 0);
  font-size: 18px;
}
.test-border {
  position: absolute;
  bottom: -20px;
  left: 50%;
  right: 0px;
  transform: translate(-50%);
  width: 0px;
  height: 0px;
  border-top: 20px solid rgb(234, 234, 234);
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
}
.testimional-items {
  padding: 2rem 0px;
}
.testimional-img img {
  width: 100%;
  height: auto;
}
.testimional-img {
  width: 57px;
  height: 57px;
  object-fit: contain;
  margin: 0px auto;
}
.test-title_content {
  padding: 3rem 0rem;
}
.testimional-section::before {
  position: absolute;
  content: "";
  background-image: url("../images/ball.png");
  width: 292px;
  height: 300px;
  background-size: contain;
  right: 0px;
  top: 0px;
}
.sliderPortfolio {
  position: absolute;
}
.sliderPortfolioImages {
  padding: 0px 20px 0px 10px;
  margin-bottom: 0px !important;
}
.portfolioBox {
  padding: 0px 10px;
}
.portfolioBoxImage {
  height: 310px;
  padding: 15px;
  background: rgb(255, 255, 255);
}
.portfolioBox img {
  width: 100%;
}
.sliderPortfolioBaR {
  background: rgb(255, 255, 255);
  padding: 13px 0px;
  margin-bottom: 0px;
}
.slideText {
  text-align: center;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 22px;
  color: rgb(153, 153, 153);
  position: relative;
}
.slideText::after {
  position: absolute;
  left: auto;
  content: "";
  background: rgb(255, 126, 33);
  width: 10px;
  height: 10px;
  border-radius: 100%;
  right: -10px;
  top: 12px;
}
.join-button {
  background-image: linear-gradient(
    to right bottom,
    rgb(0, 76, 137),
    rgb(0, 112, 169),
    rgb(0, 148, 186),
    rgb(0, 182, 187),
    rgb(8, 215, 177)
  );
}
.join-button {
  overflow: hidden;
  position: relative;
  border-radius: 50px;
  margin: 0 0 0px auto;
  display: table;
}
.join-button span {
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 80px;
  background-color: inherit;
  transition: transform 0.4s linear 0s, top 1s linear 0s;
  overflow: hidden;
  display: inline-block;
  z-index: 0;
}
.join-button span::before,
.join-button span::after {
  content: "";
  position: absolute;
  width: 433px;
  height: 510px;
  top: -60px;
  left: 50%;
  transform: translate(-50%, -75%);
}
.join-button span::before {
  border-radius: 46%;
  background: url("../images/pattern-30.png");
  animation: 12s linear 0s infinite normal none running joinButton;
}
.join-button span::after {
  border-radius: 40%;
  background: url("../images/pattern-30.png");
  animation: 32s linear 0s infinite normal none running joinButton;
}
@keyframes joinButton {
  0% {
    transform: translate(-50%, -75%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -75%) rotate(360deg);
  }
}
.join-button:hover,
.join-button:active,
.join-button:visited {
  box-shadow: rgba(0, 0, 0, 0.8) 0px 10px 25px;
}
.mc-b-4 {
  margin-bottom: 40px !important;
  
}
.col-center {
  margin: 0px auto;
}
.port-top {
  padding: 6% 0px;
}
.main-tabs {
  border: none;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.main-tabs li a {
  color: rgb(0, 0, 0);
  background-color: transparent;
  text-transform: capitalize;
  transition: all 0.5s ease-in-out 0s;
  padding: 10px 35px;
  font-size: 17px;
  border: none !important;
  border-radius: 3px !important;
}
.main-tabs li a:hover,
.main-tabs li a.active {
  background-color: rgb(14, 14, 14) !important;
  color: rgb(255, 255, 255) !important;
}
.main-tabs li:not(:first-child) {
  margin-left: 30px;
}
.gallery-box {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  height: 250px;
  box-shadow: rgba(201, 192, 192, 0.74) 0px 0px 30px;
  transition: all 0.5s ease-in-out 0s;
  margin: 15px 0px;
}
.gallery-box .gallery-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.5s ease-in-out 0s;
}
.gallery-box .gallery-content a i {
  color: rgb(255, 255, 255);
  font-size: 50px;
}
.gallery-box .gallery-img img {
  width: 100%;
  object-fit: cover;
  display: block;
  min-height: 250px;
  transition: all 0.5s ease-in-out 0s;
}
.gallery-box:hover .gallery-img img {
  filter: brightness(0.5);
}
.gallery-box:hover .gallery-content {
  opacity: 1;
}
.about-section {
  position: relative;
  color: rgb(0, 0, 0);
}
.about-section .about-img {
  position: relative;
}
.about-section .about-img::before {
  content: "";
  position: absolute;
  background: url("../images/about-img-2.jpg") 0% 0% / cover no-repeat;
  width: 386px;
  height: 300px;
  left: -17%;
  top: 55%;
  border-radius: 10px;
}
.about-section .about-img img {
  display: block;
  width: 100%;
  height: 530px;
  object-fit: cover;
  border-radius: 7px;
}
.about-section .text-list {
  position: relative;
  font-size: 16px;
  font-weight: 400;
  line-height: 2.125em;
}
.about-section .text-list ul li {
  line-height: 30px;
  margin-bottom: 10px;
  padding-left: 35px;
  color: rgba(0, 0, 0, 0.8);
  position: relative;
}
.about-section .text-list ul li::before {
    content: "*";
    font-size: 0;
    font-family: FontAwesome;
    position: absolute;
    left: 10px;
    top: 11px;
    background: rgb(255, 126, 33);
    font-weight: 400;
    width: 10px;
    height: 10px;
    border-radius: 100%;
}
.lower-text {
  color: rgb(0, 0, 0);
  padding: 20px 0;
  font-size: 20px;
  text-transform: capitalize;
  font-weight: 500;
}
.desciption-text p {
  color: rgb(0, 0, 0);
  font-size: 15px;
  line-height: 25px;
  
}
.pc-p-4 {
  padding: 4% 0px;
}
.blog-news {
}
.working-card-box .working-img {
  overflow: hidden;
}
.working-card-box .working-img img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  transition: all 0.7s ease-in-out 0s;
  display: block;
}
.working-card-box:hover .working-img img {
  filter: brightness(0.8);
  transform: scale(1.2);
}
.working-content {
  transition: all 500ms ease-in-out 0s;
  background-color: rgb(255, 255, 255);
  padding: 10px;
}
.working-content:hover {
  transition: all 500ms ease-in-out 0s;
  background-image: linear-gradient(
    to right bottom,
    rgb(0, 76, 137),
    rgb(0, 112, 169),
    rgb(0, 148, 186),
    rgb(0, 182, 187),
    rgb(8, 215, 177)
  );
}
.working-content:hover :is(h6, p) {
  color: rgb(255, 255, 255);
}
.working-tilte.primary-heading p {
  color: rgb(0, 0, 0);
}
.working-content h6 {
  font-size: 26px;
  font-weight: 600;
  padding-bottom: 10px;
  text-transform: capitalize;
}
.working-content p {
  font-size: 16px;
  line-height: 26px;
  color: rgb(0, 0, 0);
  padding-bottom: 14px;
}
.pc-p-6 {
  padding: 6% 0px;
}
.contact-sec {
  background: url("../images/testibg.png") 0% 0% / cover no-repeat;
  width: 100%;
  height: 100%;
  padding: 10rem 0rem;
  position: relative;
}
.contact-sec .form-box-main form select {
  width: 100%;
  margin: 0px;
  border: 1px solid rgb(178, 185, 193);
  background: white;
  padding: 15px;
  color: rgb(17, 33, 56);
  font-size: 15px;
  font-weight: 600;
  border-radius: 5px;
}
.contact-head {
  text-align: center;
}
.contact-head p {
  padding-top: 10px;
  font-size: 20px;
  line-height: 30px;
}
.contact-head .p-link {
  color: rgb(9, 30, 66);
  font-weight: 500;
}
.contact-head h3 {
  padding-top: 30px;
  text-align: center;
  font-size: 40px;
}
.contact-sec .form-box-main {
  background: rgba(158, 158, 158, 0.06);
  padding: 0px 15px;
}
.form-box-main form .form-group,
.form-box-main form {
  padding-bottom: 18px;
}
.form-box-main form label.field-txt {
  font-weight: 600;
  font-size: 16px;
  color: rgb(9, 30, 66);
  margin: 0px 0px 5px;
  width: 100%;
  display: block;
}
.form-box-main form input[type="text"],
.form-box-main form input[type="email"],
.form-box-main form input[type="number"],
.form-box-main form input[type="tel"],
.form-box-main form textarea {
  width: 100%;
  margin: 0px;
  border: 1px solid rgb(178, 185, 193);
  background: white;
  padding: 18px 15px;
  color: rgb(0, 0, 0);
  font-size: 16px;
  font-weight: 500;
  height: 55px;
  border-radius: 5px;
}
.form-box-main form label.field-txt span {
  color: rgb(233, 30, 99);
}
.form-box-main form textarea {
  width: 100%;
  margin: 0px;
  padding: 8px 12px;
  height: 100px;
}
.BlueBar {
  background: rgb(6, 21, 40);
}
.BlueBar .sliderPortfolioBaR {
  background: rgb(6, 21, 40);
  padding: 20px 0px;
  margin-bottom: 0px;
}
.BlueBar .slideText {
  color: rgb(255, 255, 255);
}
.SImage {
}
.servicesSliderList .slick-list {
  padding-left: 0px !important;
}
.imgListWrapper > .scrollNext {
  color: rgb(0, 0, 0);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  display: inline-flex;
  justify-content: flex-start;
  gap: 0.25rem;
  margin-bottom: 1.25rem;
  line-height: 1;
  user-select: none;
}
.imgListWrapper > .scrollNext:hover {
  transform: translateX(5px);
}
.imgListWrapper > .scrollNext > i {
  font-size: 1.25rem;
}
#sync1 .item {
  background: rgb(12, 131, 231);
  padding: 80px 0px;
  margin: 5px;
  color: rgb(255, 255, 255);
  border-radius: 3px;
  text-align: center;
}
#sync2 .item {
  background: rgb(201, 201, 201);
  padding: 10px 0px;
  margin: 5px;
  color: rgb(255, 255, 255);
  border-radius: 3px;
  text-align: center;
  cursor: pointer;
}
#sync2 .item h1 {
  font-size: 18px;
}
#sync2 .current .item {
  background: rgb(12, 131, 231);
}
.owl-theme .owl-nav {
}
.owl-theme .owl-nav [class*="owl-"] {
  transition: all 0.3s ease 0s;
}
.owl-theme .owl-nav [class*="owl-"].disabled:hover {
  background-color: rgb(214, 214, 214);
}
#sync1.owl-theme {
  position: relative;
}
#sync1.owl-theme .owl-next,
#sync1.owl-theme .owl-prev {
  width: 22px;
  height: 40px;
  margin-top: -20px;
  position: absolute;
  top: 50%;
}
#sync1.owl-theme .owl-prev {
  left: 10px;
}
#sync1.owl-theme .owl-next {
  right: 10px;
}
.ifrm {
  border: none;
  width: 100%;
  margin-top: 50px;
}
.about {
  color: rgb(0, 0, 0);
  background: rgb(255, 255, 255);
  margin: 0px 0px 5rem;
  padding: 0px 0px 8rem;
  position: relative;
}
.about:before {
  background: url("../images/pattern-29.png") 0% 0% / 100%;
  content: "";
  top: 0px;
  left:auto;
  width: 100%;
  position: absolute;
  right: 0px;
  z-index: 0;
  animation: 5s ease 0s infinite normal none running mymove;
  pointer-events: none;
  background-position: right;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
}
.about-content__subHeading {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 1rem;
}
.about-content__heading {
  color: rgb(21, 41, 67);
  font-size: 2.50rem;
  font-weight: 500;
  line-height: 1.05;
  padding-right: 4rem;
}
.about-content > p {
  font-size: 1.0rem;
  font-weight: 500;
  line-height: 28px;
  margin: 1rem 0px 1.5rem;
}
.about-content__btn {
  color: rgb(255, 255, 255);
  background: linear-gradient(
      127.11deg,
      rgb(46, 84, 132) -43.38%,
      rgb(63, 147, 255) 100%
    ),
    rgb(0, 0, 0);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  padding: 0.75rem 1.5rem;
}
.about-content__btn:hover {
  color: rgb(255, 255, 255);
}
.about-services {
  counter-reset: categories-counter 0;
}
.about-services__single {
  background: rgb(255, 255, 255);
  padding: 1.5rem;
  margin-bottom: 2rem;
}
.about-services__single:has(.show) {
  box-shadow: rgba(0, 0, 0, 0.125) 0px 0px 10px 5px;
}
.about-services__single:has(.show) .title {
  color: rgb(60, 136, 232);
}
.about-services__single:has(.show) .counting::after {
  color: rgb(60, 136, 233);
}
.about-services__single .title.collapsed i {
  transform: rotate(180deg);
}
.about-services__single :is(.title, .counting, .title i) {
  transition: all 300ms ease-in-out 0s;
}
.about-services__single .counting::after {
  counter-increment: categories-counter 1;
  content: counter(categories-counter, decimal-leading-zero);
  position: absolute;
  left: 0px;
  top: 0px;
  color: rgb(0, 0, 0);
  font-size: 1.25rem;
  font-weight: 600;
}
.about-services__single .title {
  color: rgb(21, 41, 67);
  font-size: 2.5rem;
  font-weight: 600;
  text-transform: capitalize;
  position: relative;
  padding-left: 2.5rem;
  cursor: pointer;
  background: none;
  user-select: none;
  outline: none;
  line-height: 1;
}
.about-services__single p {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.75;
  margin: 1.25rem 0px;
}
.about-services__single a {
  color: rgb(0, 0, 0);
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  line-height: 1;
}
.about-services__single a:hover {
  color: rgb(60, 136, 232);
  transform: translateX(5px);
}
.about-services__single a > i {
  font-size: 1.5rem;
  margin-top: 0.25rem;
}
.product-paragraph .heading {
  color: rgb(255, 255, 255);
  font-size: 3rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}
.categories.categories--light {
  background: rgb(247 247 247);
}
.categories {
  background: rgb(6, 21, 40);
  width: 105%;
  position: absolute;
  top: -90px;
  left: 50%;
  transform: rotate(-4deg) translate(-50%);
  padding: 2rem 5rem;
  z-index: -1;
}
.categories--bottom {
  top: auto;
  bottom: -5rem;
  transform: rotate(0deg) translate(-50%);
}
.categories-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 1;
}
.categories.categories--light .categories-list__single > a {
  color: rgb(0, 0, 0);
}
.categories-list__single {
  margin: auto;
  max-width: 5% !important;
}
.categories-list__single > a {
  color: rgb(255, 255, 255);
  font-size: 1.2rem;
  font-weight: 500;
  text-transform: uppercase;
  padding: 0px 3rem;
  position: relative;
}
.categories-list__single:not(:first-child) > a::after {
  content: "";
  width: 12px;
  height: 12px;
  background: rgb(255, 126, 33);
  border-radius: 100%;
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
}
.categoriesWrapper::before {
  height: 70%;
  bottom: 0px;
  top: auto;
}
.the-agency.categoriesWrapper::before,
.the-agency.categoriesWrapper::after {
  background: rgb(20, 23, 26);
}
.templatesSlider .slick-list.draggable {
  padding: 4rem 0px 0px;
}
.templatesWrapper {
  position: relative;
  transform: rotate(-4deg) translateY(-100%);
  z-index: 10;
}
.templates {
  padding: 0px;
}
.templates .categories {
  padding-inline: 1rem;
}
.templates-card {
  margin-inline: auto;
}
.templates-card.odd {
  width: 100%;position: relative;
animation: mymovesSecond  7s infinite;
}
@keyframes mymovesSecond  {
  0% {bottom: -0px;}
  50% {bottom: -10px;}
    100% {bottom: -0px;}
}
.templates-card.even .templates-card__img {
  width: 98%;
  height: 275px;
  margin-top: auto;
  transform: translateY(15%); position: relative;
}
.templates-card__img {
  width: 100%;
  height: 275px;
  animation: mymoves  2s infinite;
}
@keyframes mymoves  {
  0% {bottom: -0px;}
  50% {bottom: -10px;}
    100% {bottom: -0px;}
}
.templates-card__img > img {
  width: 100%;
  height: 100%;
}
.latestBox {
  margin: 0px 1rem;
  
}

.latestBox h3{
  font-size: 15px;
}

a.browsBtn {
margin-bottom: -6px;
}

.WorkList .slick-list.draggable {
  padding: 0px !important;
}
.alphabet-img {
  padding: 6rem 1rem;
}
.teamWrapper {
  margin: 6rem 0px;
}
.team {
  height: 100%;
  color: rgb(0, 0, 0);
  position: relative;
}
:is(.team__socialLinks, .team__categories, .team-content-list, .imgListWrapper
    > .scrollNext) {
  display: flex;
  align-items: center;
}
.team__socialLinks {
  min-height: 100%;
  justify-content: flex-start;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  padding: 0px;
}
.team__socialLinks::after {
  content: "";
  width: 2px;
  height: 9rem;
  background: rgb(0, 0, 0);
  position: absolute;
  top: -105px;
  left: 50%;
  transform: translate(-50%, -50%);
}
.team__socialLinks > li > a {
  color: rgb(0, 0, 0);
  font-size: 1.25rem;
  transition: all 300ms ease-in-out 0s;
}
.team__socialLinks > li > a:hover {
  scale: 1.5;
}
.team-person {
  position: relative;
}
.team-person__img {
  width: 100%;
  height: 650px;
  background: rgb(255, 255, 255);
  position: relative;
}
.team-person__img::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  bottom: 0px;
  background: linear-gradient(200deg, transparent, rgb(0, 0, 0));
  opacity: 0.75;
}
.team-person__img > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}
.team-person__details {
  position: absolute;
  left: 4rem;
  bottom: 1.5rem;
  color: rgb(255, 255, 255);
}
.team-person__details :is(.designation, .name) {
  font-weight: 600;
  line-height: 1;
}
.team-person__details > .name {
  font-size: 1.25rem;
  text-transform: capitalize;
  letter-spacing: 2px;
  margin-bottom: 0.5rem;
}
.team-person__details > .designation {
  font-size: 0.75rem;
  text-transform: uppercase;
}
.team-content {
  padding: 0px 0.75rem;
  overflow: hidden;
}
.teamContentWrapper {
  width: 100%;
  position: absolute;
  top: 30%;
  right: -57.85%;
  transform: translateY(-50%);
  z-index: 100;
}
.team__title {
  font-size: 3.5rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 1.35;
}
:is(.imgListWrapper .scrollNext) {
  padding-left: 5rem;
}
.team__title > span {
  font-weight: 600;
  display: block;
}
.team__categories {
  justify-content: flex-start;
  gap: 1.45rem;
  margin: 2rem 0px 0px;
}
.team__categories > li > a {
  color: rgb(0, 0, 0);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  padding: 0.5rem 0px;
  position: relative;
}
.team__categories > li > a::after {
  content: "";
  width: 0px;
  height: 2px;
  background: rgb(0, 0, 0);
  position: absolute;
  bottom: 0px;
  left: 0px;
  transition: all 300ms ease-in-out 0s;
}
.team__categories > li > a:where(:hover, .active)::after {
  width: 100%;
}
.carousel-indicators.team-content-list {
  width: 100%;
  position: static;
  margin: 0px;
}
.carousel-indicators li.team-content-list__img {
  width: 130px;
  height: 160px;
  cursor: pointer;
  margin-right: 0.65rem;
  background: rgb(255, 255, 255);
  text-indent: 0px;
}
.team-content-list__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.team-personWrapper {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}
.team__socialLinks {
  flex: 0.15 1 0%;
}
.team-person {
  flex: 1 1 0%;
}
.compensate-for-scrollbar {
  margin: 0px !important;
  padding: 0px !important;
  overflow: inherit !important;
}


li.nav-item.dropdown:hover .dropdown-menu {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgb(255 255 255);
    border-radius: 0;
    color: #fff;
    border-radius: 0 0 0 0px;
}
li.nav-item.dropdown .dropdown-menu a {border-bottom: 1px solid #ccc;color: #999;padding: 8px 20px;}
li.nav-item.dropdown .dropdown-menu a:hover {
    background-image: linear-gradient( to right bottom, rgb(0, 76, 137), rgb(0, 112, 169), rgb(0, 148, 186), rgb(0 167 186), rgb(0 142 183) );
    color: #fff;
}
li.nav-item.dropdown .dropdown-menu a:last-child{border:0}
.btnLeft {float: left;
    margin: 0;}

    .main-box {position: relative;}
.main-box:before {
    background: url(../images/pattern-29.png) 0% 0% / 100%;
    content: "";
    top: 0px;
    left: auto;
    width: 100%;
    position: absolute;
    right: 0px;
    z-index: 0;
    height: 100%;
    animation: 3s ease 0s infinite normal none running mymoveservice;
    pointer-events: none;
    background-position: center;
    background-size: cover;
}

@keyframes mymoveservice {
  0% {
    opacity: 0.1;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.1;
  }
}


.ContestsBtn{
    background-image: linear-gradient(to right, #363bd3, #6b20bf);
    padding: 20px 40px;
    margin: 50px auto;
    display: table;
    color: #fff;
    font-weight: 600;
    border-radius: 50px;
}
.ContestsBtn:hover, .ContestsBtn:focus {
    background: #464646!important;
    color: #fff;
}
.ContestsModal {position: relative;}

.ContestsModal h2 {
    color: rgb(17 33 56);
    margin: 15px 0 10px 0;
    font-weight: 800;
    font-family: "Faktum Test";
    font-size: 35px;
    line-height: 42px;
}

.ContestsModal .col-md-6 {padding: 0}
.ContestsModal .col-md-12 {padding: 0}
.padding-left {
    padding-left: 8px!important;
}
.padding-right {padding-right: 8px!important;}

.ContestsModal h2 span {
    font-size: 18px;
    color: #000;
    display: block;
    font-weight: 100;
    font-family: "Faktum Test";
}
.ContestsModal input, .ContestsModal select, .ContestsModal textarea {background-color: #ffffff;padding-left: 15px;padding-right: 15px;border-radius: 5px;border-color: #02010114 !important;height: 45px;font-size: 14px;margin-bottom: 15px;width: 100%;outline: none;border: 1px solid;}
.ContestsModal textarea {height:100px}
/* .ContestsModal .ContestsBtn {
    background-image: linear-gradient(to right, #363BD3, #6B20BF);
    padding: 10px 40px;
    margin: 0px auto;
    display: table;
    color: #fff;
    font-weight: 600;
    border-radius: 5px;
    width: 100%; outline: none;
}
.ContestsModal .ContestsBtn a {color:#fff}

 */
/*.ContestsModal .modal-content:after { background: #000; position: absolute;top: 0; left: 0; content: ""; width: 100%; height: 100%; }
*/.ContestsModal .modal-dialog {
    max-width: 900px;
    margin: 0rem auto 0;
    border-radius: 0 0 0  40px;
    overflow: hidden;
    top: 50%;
    transform: translatey(-50%) !important;
}
.ContestsModal .modal-content {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border: 0px solid rgba(0,0,0,.2);
    border-radius: 0;
    outline: 0;
    background-position: center left;
    background-repeat: no-repeat;
    background-size: cover;
}
.ContestsModal  button.close {
    padding: 0;
    background-color: #ededed;
    border: 0;
    -webkit-appearance: none;
    position: absolute;
    right: 0;
    color: #999;
    width: 45px;
    height: 45px;
    font-size: 16px;
    z-index: 22;
    opacity: 1;
    top: 0;
    font-weight: 100;
    outline: none;
    text-shadow: none;
    color: #0091b8;
    border-radius: 0 0 0 20px;
}
.ContestsModal  .modal-body {
    position: relative;
    -webkit-box-flex: 0;
    -ms-flex: 0;
    flex: 0;
    padding: 0 30px 0 0;
    border: 0;
}
.ContestsModal .img-fluid {
    max-width: 440px;
    height: auto;
    height: 600px;
    object-fit: cover;
    object-position: center center;
    width: 340px;
}
.loginFormInner {padding: 70px 20px 0;}
.ContestsModal  .join-button {
 margin: 5px 0px;
 width: 100%;
 text-align: center;
}
.ContestsModal .join-button a {
    margin: 0px auto;
    display: table;
    width: 100%;
}
.modal-open {
    padding: 0!important;
    margin: 0!important;
    overflow-y: inherit!important;
}

.teamBanner {}
.teamBanner img {width: 100%}

.innerHeader {
    position: relative;
    background: url(../images/bgg.png) 0% 0% / cover no-repeat;
}

.ServicesSec  .join-button {
   
    margin: 0px auto 0px;
    
}

.innerServices {
    margin-top: -60px;
    position: relative;
    z-index: 22;
}
.modal-backdrop.show {
    opacity: 0.9;
    background-color: rgb(17 33 56);
}


.innerBannerName {
  min-height: 75vh!important;
  padding: 130px 0 0 !important;
}
.innerBannerName canvas {

    display: none;
}
/* Side Bar */
.sideBar {
  width: 280px;
  position: fixed;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #ffffff;
  transition: all 300ms ease-in-out;
  padding: 0.5rem 0;
  transform: translateX(-100%);
  z-index: 100;
  backdrop-filter: blur(10px);
  overflow-y: scroll;
}  
.sideBar.show{
  transform: translateX(0);
}
.sideBar__logo {
  width: 200px;
  display: block;
  margin: 3rem auto 2rem;
}
.sideBar__logo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sideBar__close {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  font-size: 1.25rem;
  background: #D9D9D9;
  border-radius: 100%;
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 12px;
}
.sideBar__close:hover{
  color: #fff;
  background: rgb(11, 194, 181);
}
.sideBar__nav > li > a:hover{
  color: rgb(11, 194, 181);
}
.sideBar__nav {
    padding: 0rem 2rem;
}
.sideBar__nav > li  :is(a,button){
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.5rem 0;
  display: block;
  background: none;
  color: #335883;
}



.header-main__menu {display: none;position: absolute;top: 40%;right: 1rem;transform: translateY(-50%);z-index: 100;}
.header-main__menu a > i {color: #fff;font-size: 2.5rem;}



.portfolio-img {
    width: 100%;
    height: 100%;
}


.portfolio-img a {
    width: 100%;
    height: 100%;
}

.portfolio-img a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}
html{
    overflow-x:hidden;
}



.topBarAddress {}
.topBarAddress ul {
    border-bottom: 1px solid #cccccc2b;
    padding: 10px 0;
    width: 100%;
}
.topBarAddress ul li {
    margin-left: 50px;
    color: #fff;
    float: right;
}
.topBarAddress ul li b {}
/*Responsive Styling*/
@media screen and (min-width: 320px) and (max-width: 600px){
    /*Header*/
  .about-img:before {
    display: none;
}
  .navbar {
    padding-top: 29px;
}
  .templates-card.even .templates-card__img {
    transform: none;
    height: 170px;
}
.about {
    padding-bottom: 0px;
}
.templates-card__img {
    height: auto;
}

.templates-card__img img {
}

.navbar-brand {
    width: 180px !important;
}
.primary-heading h3 {
    font-size: 18px;
}

.lower-text {
    font-size: 14px;
}

.about-section .text-list ul li {
    font-size: 14px;
}
.navbar-brand {
    padding: 0 !important;
}

.header-main__menu {
    top: 45px;
}
.about-section .about-img img {
    height: 300px !important;
}
    .startBtn {display: none;}
    nav.navbar.navbar-expand-lg .row :is(.col-md-3:not(:has(.navbar-brand)),.col-md-6) {display: none;}
    .topBarAddress ul li {
       float: none;
    font-size: 11px;
    text-align: center;
}
    
    /*About Us*/
    .about-content__heading {font-size: 2rem;line-height: 1.25;padding-right: 0;}
    .about-content__subHeading {margin-bottom: 0.5rem;line-height: 1.5;}
    .about-services__single .title {font-size: 1.35rem;padding-left: 1.75rem;}
    .about-services__single .counting::after {font-size: 1rem;}
    .about-services__single p {font-size: 0.9rem;margin: 0.75rem 0px;}
    .about-services__single a {font-size: 0.9rem;gap: 0.25rem;}
    .about-services__single a > i {font-size: 1.25rem;}
    .about-services__single {padding: 1.25rem;}
    .about-services {margin: 2rem 0;}
    
    
    .product-paragraph .heading {font-size: 2rem;}
    .ServicesSec p {font-size: 16px;line-height: 32px;}
    
    
    .latestProject h2 {font-size: 35px;margin-bottom: 2rem;}
    .latestProject h2 span::after {height: 10px;}
    
    /*Categories*/
    .categories {padding: 1.5rem 0 0.75rem;transform: rotate(0) translate(0);top: -3rem;left: 0;}
    .categoriesWrapper::after {transform: skewY(0);}
    .categories-list {line-height: 1;}
    .categories-list__single {display: flex !important;align-items: center;justify-content: center;max-width: initial !important;}
    .categories-list__single > a {font-size: 0.75rem;padding: 0px 1.15rem;}
    .categories-list__single:not(:first-child) > a::after {left: 0}
    .categories-list__single:not(:first-child) > a::after {width: 10px;height: 10px;}
    .categories--bottom {top: auto !important;bottom: -4rem;transform: rotate(0deg) translate(0);}
    
    /*Agency*/
    section.the-agency {    padding: 4rem 0px;margin: 6rem 0 0;}
    .agency-quotes h3 {font-size: 30px;padding: 14px 0px;}
    .blog-content {padding: 0.5rem 1rem;}
    .agency-blog {margin: 2rem 0;padding-inline: 1rem;}
    .blog-content p {font-size: 16px;}
    .blog-content h4 {    font-size: 15px;padding-top: 10px;}
    .agency-quotes {padding-inline: 1rem;}
    .agency-quotes .btn-quote {margin-top: 0.75rem;}
    
    /*Services*/
    .ServicesSec {padding: 3rem 1rem 0px;}
    
    
    /*Templates*/
    .templatesWrapper {transform: rotate(0) translateY(0);margin: -194px 0 8rem;}
    .templatesSlider .slick-list.draggable {padding: 0rem 0px 0px;}
    
    
    .column{
     flex-direction:column;
    }
    
    /*Footer*/
    footer {padding: 1rem 1rem 0;}
    .footer-sec {padding: 0;}
    .footer-content h4 {margin: 1rem 0;padding: 0;}
    .footer-content p {font-size: 16px;}
    .footer-content.pd-3.clr-3 {padding: 0;}
    .get-it-quote h3 {font-size: 24px;margin-bottom: 0;}
    footer .footer-logo {margin: 1rem auto;}
    .copyright-sec {text-align: center;}
    .copyright-sec p {margin-bottom: 0.25rem;}
    
    
    /*Banner*/
    body #headband.headband--home {padding: 10rem 0 14rem !important;clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 90%);min-height: auto;}
    body #headband .wrapper {max-width: 95%;}
    body #headband .wrapper .texte_headband h2 {font-size: 1.6rem;line-height: 1.5;}
    body #headband .wrapper .texte_headband .titre {font-size: 20px;margin-bottom: 1rem;}
    
    .row.main-boxSlider.slick-initialized.slick-slider .slick-track {display: flex;flex-direction: column;}
    .row.main-boxSlider.slick-initialized.slick-slider .slick-track .col-12 {width: 100% !important;}
    
    .brandsBarDiv {padding: 0;}
    .brandsBar {margin: 2rem 0;padding: 0 1rem;display: flex;gap: 2rem;flex-wrap: wrap;align-items: center;justify-content: center;}
    .brandsBarDiv img {object-fit: contain;width: 100px;}
    :is(.main-box.main-box1,.main-box.main-box2,.main-box.main-box3,.main-box.main-box4) {transform: translate(0) !important;}
    .main-box {margin: 1rem 0;}
    .main-boxSlider .slick-list.draggable {padding-bottom: 3rem;}
    .latestProject {padding: 3rem 1rem;}
    header .header-main__menu {display: block;}
    
    footer .btn-quote a {display: block;margin: 2rem 0;}
    .sec-title.primary-heading {margin: 2rem 0 1rem;}
    .innerBannerName {min-height: 60vh!important;padding-top: 0 !important;}
    
    /*Our Team*/
    .teamWrapper {margin: 10rem 0px;}
    .teamContentWrapper {top: -4rem;left: 55%;transform: translate(-50%,-50%);}
    .team__title {font-size: 2.5rem;}
    .team__title > span {display: inline-block;}
    .imgListWrapper > .scrollNext {margin: 2.25rem 0;}
    
    /*Contact*/
    .contact-sec {padding: 1rem 0rem;}
    .contact-sec {background: none;
    
    a.navbar-brand {padding: 0;}
    header.header--inner {position: relative;background: #152943;height: 125px;display: flex;align-items: center;justify-content: center;padding-top: 1rem;}
    
}
@media screen and (min-width: 481px) and (max-width: 520px){
     /*Header*/
    .startBtn {display: none;}
    nav.navbar.navbar-expand-lg .row :is(.col-md-3:not(:has(.navbar-brand)),.col-md-6) {display: none;}
        .topBarAddress ul li {
       float: none;
    font-size: 11px;
    text-align: center;
}
    
    /*About Us*/
    .about-content__heading {font-size: 2rem;line-height: 1.25;padding-right: 0;}
    .about-content__subHeading {margin-bottom: 0.5rem;line-height: 1.5;}
    .about-services__single .title {font-size: 1.35rem;padding-left: 1.75rem;}
    .about-services__single .counting::after {font-size: 1rem;}
    .about-services__single p {font-size: 0.9rem;margin: 0.75rem 0px;}
    .about-services__single a {font-size: 0.9rem;gap: 0.25rem;}
    .about-services__single a > i {font-size: 1.25rem;}
    .about-services__single {padding: 1.25rem;}
    .about-services {margin: 2rem 0;}
    
    
    .product-paragraph .heading {font-size: 2rem;}
    .ServicesSec p {font-size: 16px;line-height: 32px;}
    
    
    .latestProject h2 {font-size: 35px;margin-bottom: 2rem;}
    .latestProject h2 span::after {height: 10px;}
    
    /*Categories*/
    .categories {padding: 1.5rem 0 0.75rem;transform: rotate(0) translate(0);top: -3rem;left: 0;}
    .categoriesWrapper::after {transform: skewY(0);}
    .categories-list {line-height: 1;}
    .categories-list__single {display: flex !important;align-items: center;justify-content: center;max-width: initial !important;}
    .categories-list__single > a {font-size: 0.75rem;padding: 0px 1.15rem;}
    .categories-list__single:not(:first-child) > a::after {left: 0}
    .categories-list__single:not(:first-child) > a::after {width: 10px;height: 10px;}
    .categories--bottom {top: auto !important;bottom: -4rem;transform: rotate(0deg) translate(0);}
    
    /*Agency*/
    section.the-agency {    padding: 4rem 0px;margin: 6rem 0 0;}
    .agency-quotes h3 {font-size: 30px;padding: 14px 0px;}
    .blog-content {padding: 0.5rem 1rem;}
    .agency-blog {margin: 2rem 0;padding-inline: 1rem;}
    .blog-content p {font-size: 16px;}
    .blog-content h4 {    font-size: 15px;padding-top: 10px;}
    .agency-quotes {padding-inline: 1rem;}
    .agency-quotes .btn-quote {margin-top: 0.75rem;}
    
    /*Services*/
    .ServicesSec {padding: 3rem 1rem 0px;}
    
    
    /*Templates*/
    .templatesWrapper {transform: rotate(0) translateY(0);margin: -194px 0 8rem;}
    .templatesSlider .slick-list.draggable {padding: 0rem 0px 0px;}
    
    
    .column{
     flex-direction:column;
    }
    
    /*Footer*/
    footer {padding: 1rem 1rem 0;}
    .footer-sec {padding: 0;}
    .footer-content h4 {margin: 1rem 0;padding: 0;}
    .footer-content p {font-size: 16px;}
    .footer-content.pd-3.clr-3 {padding: 0;}
    .get-it-quote h3 {font-size: 24px;margin-bottom: 0;}
    footer .footer-logo {margin: 1rem auto;}
    .copyright-sec {text-align: center;}
    .copyright-sec p {margin-bottom: 0.25rem;}
    
    
    /*Banner*/
    body #headband.headband--home {padding: 10rem 0 14rem!important;clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 90%);min-height: auto;}
    body #headband .wrapper {max-width: 95%;}
    body #headband .wrapper .texte_headband h2 {font-size: 2rem;line-height: 1.5;}
    body #headband .wrapper .texte_headband .titre {font-size: 20px;margin-bottom: 1rem;}
    
    .row.main-boxSlider.slick-initialized.slick-slider .slick-track {display: flex;flex-direction: column;}
    .row.main-boxSlider.slick-initialized.slick-slider .slick-track .col-12 {width: 100% !important;}
    
    .brandsBarDiv {padding: 0;}
    .brandsBar {margin: 2rem 0;padding: 0 1rem;display: flex;gap: 2rem;flex-wrap: wrap;align-items: center;justify-content: center;}
    .brandsBarDiv img {object-fit: contain;width: 100px;}
    :is(.main-box.main-box1,.main-box.main-box2,.main-box.main-box3,.main-box.main-box4) {transform: translate(0) !important;}
    .main-box {margin: 1rem 0;}
    .main-boxSlider .slick-list.draggable {padding-bottom: 3rem;}
    .latestProject {padding: 3rem 1rem;}
    header .header-main__menu {display: block;}
    
    footer .btn-quote a {display: block;margin: 2rem 0;}
    .sec-title.primary-heading {margin: 7rem 0 1rem;}
    .innerBannerName {min-height: 60vh!important;padding-top: 0 !important;}
    
    /*Our Team*/
    .teamWrapper {margin: 10rem 0px;}
    .teamContentWrapper {top: -4rem;left: 55%;transform: translate(-50%,-50%);}
    .team__title {font-size: 2.5rem;}
    .team__title > span {display: inline-block;}
    .imgListWrapper > .scrollNext {margin: 2.25rem 0;}
    
    /*Contact*/
    .contact-sec {padding: 1rem 0rem;}
    .contact-sec {background: none;
    
    a.navbar-brand {padding: 0;}
    header.header--inner {position: relative;background: #152943;height: 125px;display: flex;align-items: center;justify-content: center;padding-top: 1rem;}
    
}
@media screen and (min-width: 501px) and (max-width: 769px){
    /*Header*/
    .startBtn {display: none;}
    nav.navbar.navbar-expand-lg .row :is(.col-md-3:not(:has(.navbar-brand)),.col-md-6) {display: none;}
    
        .topBarAddress ul li {
       float: none;
    font-size: 11px;
    text-align: center;
}
    /*About Us*/
    .about-content__heading {font-size: 2rem;line-height: 1.25;padding-right: 0;}
    .about-content__subHeading {margin-bottom: 0.5rem;line-height: 1.5;}
    .about-services__single .title {font-size: 1.35rem;padding-left: 1.75rem;}
    .about-services__single .counting::after {font-size: 1rem;}
    .about-services__single p {font-size: 0.9rem;margin: 0.75rem 0px;}
    .about-services__single a {font-size: 0.9rem;gap: 0.25rem;}
    .about-services__single a > i {font-size: 1.25rem;}
    .about-services__single {padding: 1.25rem;}
    .about-services {margin: 2rem 0;}
    
    
    .product-paragraph .heading {font-size: 2rem;}
    .ServicesSec p {font-size: 16px;line-height: 32px;}
    
    
    .latestProject h2 {font-size: 35px;margin-bottom: 2rem;}
    .latestProject h2 span::after {height: 10px;}
    
    /*Categories*/
    .categories {padding: 1.5rem 0 0.75rem;transform: rotate(0) translate(0);top: -3rem;left: 0;}
    .categoriesWrapper::after {transform: skewY(0);}
    .categories-list {line-height: 1;}
    .categories-list__single {display: flex !important;align-items: center;justify-content: center;max-width: initial !important;}
    .categories-list__single > a {font-size: 0.75rem;padding: 0px 1.15rem;}
    .categories-list__single:not(:first-child) > a::after {left: 0}
    .categories-list__single:not(:first-child) > a::after {width: 10px;height: 10px;}
    .categories--bottom {top: auto !important;bottom: -4rem;transform: rotate(0deg) translate(0);}
    
    /*Agency*/
    section.the-agency {    padding: 4rem 0px;margin: 6rem 0 0;}
    .agency-quotes h3 {font-size: 30px;padding: 14px 0px;}
    .blog-content {padding: 0.5rem 1rem;}
    .agency-blog {margin: 2rem 0;padding-inline: 1rem;}
    .blog-content p {font-size: 16px;}
    .blog-content h4 {    font-size: 15px;padding-top: 10px;}
    .agency-quotes {padding-inline: 1rem;}
    .agency-quotes .btn-quote {margin-top: 0.75rem;}
    
    /*Services*/
    .ServicesSec {padding: 3rem 1rem 0px;}
    
    
    /*Templates*/
    .templatesWrapper {transform: rotate(0) translateY(0);margin: -180px 0 8rem;}
    .templatesSlider .slick-list.draggable {padding: 0rem 0px 0px;}
    
    
    .column{
     flex-direction:column;
    }
    
    /*Footer*/
    footer {padding: 1rem 1rem 0;}
    .footer-sec {padding: 0;}
    .footer-content h4 {margin: 1rem 0;padding: 0;}
    .footer-content p {font-size: 16px;}
    .footer-content.pd-3.clr-3 {padding: 0;}
    .get-it-quote h3 {font-size: 24px;margin-bottom: 0;}
    footer .footer-logo {margin: 1rem auto;}
    .copyright-sec {text-align: center;}
    .copyright-sec p {margin-bottom: 0.25rem;}
    
    
    /*Banner*/
    body #headband.headband--home {padding: 10rem 0 14rem!important;min-height: auto;clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 90%);}
    body #headband .wrapper {max-width: 95%;}
    body #headband .wrapper .texte_headband h2 {font-size: 2rem;line-height: 1.5;}
    body #headband .wrapper .texte_headband .titre {font-size: 20px;margin-bottom: 1rem;}
    
    .row.main-boxSlider.slick-initialized.slick-slider .slick-track {display: flex;flex-direction: column;}
    .row.main-boxSlider.slick-initialized.slick-slider .slick-track .col-12 {width: 100% !important;}
    
    .brandsBarDiv {padding: 0;}
    .brandsBar {margin: 2rem 0;padding: 0 1rem;display: flex;gap: 2rem;flex-wrap: wrap;align-items: center;justify-content: center;}
    .brandsBarDiv img {object-fit: contain;width: 100px;}
    :is(.main-box.main-box1,.main-box.main-box2,.main-box.main-box3,.main-box.main-box4) {transform: translate(0) !important;}
    .main-box {margin: 1rem 0;}
    .main-boxSlider .slick-list.draggable {padding-bottom: 3rem;}
    .latestProject {padding: 3rem 1rem;}
    header .header-main__menu {display: block;}
    
    footer .btn-quote a {display: block;margin: 2rem 0;}
    .sec-title.primary-heading {margin: 7rem 0 1rem;}
    .innerBannerName {min-height: 60vh!important;padding-top: 0 !important;}
    
    /*Our Team*/
    .teamWrapper {margin: 10rem 0px;}
    .teamContentWrapper {top: -4rem;left: 55%;transform: translate(-50%,-50%);}
    .team__title {font-size: 2.5rem;}
    .team__title > span {display: inline-block;}
    .imgListWrapper > .scrollNext {margin: 2.25rem 0;}
    
    /*Contact*/
    .contact-sec {padding: 1rem 0rem;}
    .contact-sec {background: none;
    
    a.navbar-brand {padding: 0;}
    header.header--inner {position: relative;background: #152943;height: 125px;display: flex;align-items: center;justify-content: center;padding-top: 1rem;}
}
@media screen and (min-width: 770px) and (max-width: 1024px){
    /*Header*/
    .startBtn {display: none;}
    nav.navbar.navbar-expand-lg .row :is(.col-md-3:not(:has(.navbar-brand)),.col-md-6) {display: none;}
    
    
    /*About Us*/
    .about-content__heading {font-size: 2rem;line-height: 1.25;padding-right: 0;}
    .about-content__subHeading {margin-bottom: 0.5rem;line-height: 1.5;}
    .about-services__single .title {font-size: 1.35rem;padding-left: 1.75rem;}
    .about-services__single .counting::after {font-size: 1rem;}
    .about-services__single p {font-size: 0.9rem;margin: 0.75rem 0px;}
    .about-services__single a {font-size: 0.9rem;gap: 0.25rem;}
    .about-services__single a > i {font-size: 1.25rem;}
    .about-services__single {padding: 1.25rem;}
    .about-services {margin: 2rem 0;}
    
    
    .product-paragraph .heading {font-size: 2rem;}
    .ServicesSec p {font-size: 16px;line-height: 32px;}
    
    
    .latestProject h2 {font-size: 35px;margin-bottom: 2rem;}
    .latestProject h2 span::after {height: 10px;}
    
    /*Categories*/
    .categories {padding: 1.5rem 0 0.75rem;transform: rotate(0) translate(0);top: -3rem;left: 0;}
    .categoriesWrapper::after {transform: skewY(0);}
    .categories-list {line-height: 1;}
    .categories-list__single {display: flex !important;align-items: center;justify-content: center;max-width: initial !important;}
    .categories-list__single > a {font-size: 0.75rem;padding: 0px 1.15rem;}
    .categories-list__single:not(:first-child) > a::after {left: 0}
    .categories-list__single:not(:first-child) > a::after {width: 10px;height: 10px;}
    .categories--bottom {top: auto !important;bottom: -4rem;transform: rotate(0deg) translate(0);}
    
    /*Agency*/
    section.the-agency {    padding: 4rem 0px;margin: 6rem 0 0;}
    .agency-quotes h3 {font-size: 30px;padding: 14px 0px;}
    .blog-content {padding: 0.5rem 1rem;}
    .agency-blog {margin: 2rem 0;padding-inline: 1rem;}
    .blog-content p {font-size: 16px;}
    .blog-content h4 {    font-size: 15px;padding-top: 10px;}
    .agency-quotes {padding-inline: 1rem;}
    .agency-quotes .btn-quote {margin-top: 0.75rem;}
    
    /*Services*/
    .ServicesSec {padding: 3rem 1rem 0px;}
    
    
    /*Templates*/
    .templatesWrapper {transform: rotate(0) translateY(0);margin: 0 0 8rem;}
    .templatesSlider .slick-list.draggable {padding: 0rem 0px 0px;}
    
    
    .column{
     flex-direction:column;
    }
    
    /*Footer*/
    footer {padding: 1rem 1rem 0;}
    .footer-sec {padding: 0;}
    .footer-content h4 {margin: 1rem 0;padding: 0;}
    .footer-content p {font-size: 16px;}
    .footer-content.pd-3.clr-3 {padding: 0;}
    .get-it-quote h3 {font-size: 24px;margin-bottom: 0;}
    footer .footer-logo {margin: 1rem auto;}
    .copyright-sec {text-align: center;}
    .copyright-sec p {margin-bottom: 0.25rem;}
    
    
    /*Banner*/
    body #headband.headband--home {padding-top: 10rem !important;min-height: 80vh;clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 90%);}
    body #headband .wrapper {max-width: 95%;}
    body #headband .wrapper .texte_headband h2 {font-size: 2rem;line-height: 1.5;}
    body #headband .wrapper .texte_headband .titre {font-size: 20px;margin-bottom: 1rem;}
    
    .row.main-boxSlider.slick-initialized.slick-slider .slick-track {display: flex;flex-direction: column;}
    .row.main-boxSlider.slick-initialized.slick-slider .slick-track .col-12 {width: 100% !important;}
    
    .brandsBarDiv {padding: 0;}
    .brandsBar {margin: 2rem 0;padding: 0 1rem;display: flex;gap: 2rem;flex-wrap: wrap;align-items: center;justify-content: center;}
    .brandsBarDiv img {object-fit: contain;width: 100px;}
    :is(.main-box.main-box1,.main-box.main-box2,.main-box.main-box3,.main-box.main-box4) {transform: translate(0) !important;}
    .main-box {margin: 1rem 0;}
    .main-boxSlider .slick-list.draggable {padding-bottom: 3rem;}
    .latestProject {padding: 3rem 1rem;}
    header .header-main__menu {display: block;}
    
    footer .btn-quote a {display: block;margin: 2rem 0;}
    .sec-title.primary-heading {margin: 7rem 0 1rem;}
    .innerBannerName {min-height: 60vh!important;padding-top: 0 !important;}
    
    /*Our Team*/
    .teamWrapper {margin: 10rem 0px;}
    .teamContentWrapper {top: -4rem;left: 55%;transform: translate(-50%,-50%);}
    .team__title {font-size: 2.5rem;}
    .team__title > span {display: inline-block;}
    .imgListWrapper > .scrollNext {margin: 2.25rem 0;}
    
    /*Contact*/
    .contact-sec {padding: 1rem 0rem;}
    .contact-sec {background: none;
    
    a.navbar-brand {padding: 0;}
    header.header--inner {position: relative;background: #152943;height: 125px;display: flex;align-items: center;justify-content: center;padding-top: 1rem;}
}
@media screen and (min-width: 900px) and (max-width: 1000px){
    body #headband.headband--home {min-height: 145vh;padding-top: 12rem !important;}    
    .categories--bottom {bottom: -5rem;}
    .templatesWrapper {bottom: 5rem;}
    
    footer .btn-quote a {display: block;margin: 2rem 0;}
    .sec-title.primary-heading {margin: 7rem 0 1rem;}
    .innerBannerName {min-height: 60vh!important;padding-top: 0 !important;}
    
    /*Our Team*/
    .teamWrapper {margin: 10rem 0px;}
    .teamContentWrapper {top: -4rem;left: 55%;transform: translate(-50%,-50%);}
    .team__title {font-size: 2.5rem;}
    .team__title > span {display: inline-block;}
    .imgListWrapper > .scrollNext {margin: 2.25rem 0;}
    
    /*Contact*/
    .contact-sec {padding: 1rem 0rem;}
    .contact-sec {background: none;
    
    a.navbar-brand {padding: 0;}
    header.header--inner {position: relative;background: #152943;height: 125px;display: flex;align-items: center;justify-content: center;padding-top: 1rem;}
}
@media screen and (min-width: 1000px) and (max-width: 1300px){
    body #headband.headband--home {min-height: 145vh;padding-top: 12rem !important;}    
    .categories--bottom {bottom: -5rem;}
    .templatesWrapper {bottom: 5rem;}
    footer .btn-quote a {display: block;margin: 2rem 0;}
    .sec-title.primary-heading {margin: 7rem 0 1rem;}
    .innerBannerName {min-height: 60vh!important;padding-top: 0 !important;}
    
    /*Our Team*/
    .teamWrapper {margin: 10rem 0px;}
    .teamContentWrapper {top: -4rem;left: 55%;transform: translate(-50%,-50%);}
    .team__title {font-size: 2.5rem;}
    .team__title > span {display: inline-block;}
    .imgListWrapper > .scrollNext {margin: 2.25rem 0;}
    
    /*Contact*/
    .contact-sec {padding: 1rem 0rem;}
    .contact-sec {background: none;
    
    a.navbar-brand {padding: 0;}
    header.header--inner {position: relative;background: #152943;height: 125px;display: flex;align-items: center;justify-content: center;padding-top: 1rem;}
}

@media screen and (min-width: 1301px) and (max-width: 1400px){
    body #headband.headband--home {min-height: 120vh;padding-top: 12rem !important;}    
    .categories--bottom {bottom: -5rem;}
    .templatesWrapper {bottom: -1rem;}
    footer .btn-quote a {display: block;margin: 2rem 0;}
    .sec-title.primary-heading {margin: 7rem 0 1rem;}
    .innerBannerName {min-height: 60vh!important;padding-top: 0 !important;}
    
    /*Our Team*/
    .teamWrapper {margin: 10rem 0px;}
    .teamContentWrapper {top: -4rem;left: 55%;transform: translate(-50%,-50%);}
    .team__title {font-size: 2.5rem;}
    .team__title > span {display: inline-block;}
    .imgListWrapper > .scrollNext {margin: 2.25rem 0;}
    
    /*Contact*/
    .contact-sec {padding: 1rem 0rem;}
    .contact-sec {background: none;
    
    a.navbar-brand {padding: 0;}
    header.header--inner {position: relative;background: #152943;height: 125px;display: flex;align-items: center;justify-content: center;padding-top: 1rem;}
}
@media screen and (min-width: 1401px) and (max-width: 1700px){
    body #headband.headband--home {min-height: 130vh;padding-top: 14rem !important;}    
    .categories--bottom {bottom: -5rem;}
    .templatesWrapper {bottom: -1rem;}
    .categories-list__single {display: flex !important;justify-content: center;align-items: center;}
    .categories-list__single > a {font-size: 0.9rem;padding: 0px 2rem;}
    html {overflow-x: hidden;}
    footer .btn-quote a {display: block;margin: 2rem 0;}
    .sec-title.primary-heading {margin: 7rem 0 1rem;}
    .innerBannerName {min-height: 60vh!important;padding-top: 0 !important;}
    
    /*Our Team*/
    .teamWrapper {margin: 10rem 0px;}
    .teamContentWrapper {top: -4rem;left: 55%;transform: translate(-50%,-50%);}
    .team__title {font-size: 2.5rem;}
    .team__title > span {display: inline-block;}
    .imgListWrapper > .scrollNext {margin: 2.25rem 0;}
    
    /*Contact*/
    .contact-sec {padding: 1rem 0rem;}
    .contact-sec {background: none;
    
    a.navbar-brand {padding: 0;}
    header.header--inner {position: relative;background: #152943;height: 125px;display: flex;align-items: center;justify-content: center;padding-top: 1rem;}
    
}