* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-family: "Epilogue", sans-serif;
}

/* 1st slide start */

.header {
  width: 100%;
  height: 100vh;
  position: relative;
  padding: 20px 30px;
  display: flex;
  align-items: center;
}
.bg-video {
  background-color: rgba(0, 0, 0, 0.171);
  width: 100%;
  height: 100vh;
  overflow: hidden;
  object-fit: cover;
  /* height: 100%; */
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  left: 0;
  top: 0;
  z-index: -1;
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.952);
  padding: 10px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 10000; 
}

nav .logo-main {
  width: 50px;
}
nav ul li {
  list-style-type: none;
  display: inline-block;
  margin-left: 40px;
}
nav ul li a {
  text-decoration: none;
  color: #fff;
  font-size: 18px;
  position: relative;
}
nav li a:hover {
  color: #d8ff36;
}
nav li a::before {
  content: "";
  position: absolute;
  bottom: -10px;
  width: 100%;
  height: 1px;
  background-color: #d1fd1e;
  transform: scaleX(0);
  transition: all 0.4s;
}
nav li a:hover::before {
  transform: scaleX(1);
  width: 100%;
}
/* .menu i {
  font-size: 45px;
  color: #d8ff36;
  display: none !important;
} */
.menuToggle {
  display: none;
}

.menuIcon {
  display: none;
  font-size: 45px;
  color: #d8ff36;
  cursor: pointer;
}
.content {
  width: 100%;
  position: relative;
  z-index: 1;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.content h1 {
  width: 50%;
  margin-top: 100px;
  padding-left: 30px;
  font-size: 110px;
  line-height: 1.2;
  color: white;
  font-weight: 500;
}

.subtitle {
  font-size: 28px;
  padding-left: 30px;
  margin: 40px 0 40px 710px;
  line-height: 1.7;
  width: 30%;
  max-width: 560px;
  color: #fff;
}
.bar-button {
  height: 60px;
  width: 60px;
  border: 1px solid white;
  border-radius: 50%;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  right: 10px;
  bottom: 20px;
  margin: 20px 30px;
}
.bar-button i {
  position: absolute;
  z-index: 2;
  font-size: 32px;
  color: #fff;
}
.bar-button::before,
.bar-button::after {
  content: "";
  position: absolute;
  width: 90%;
  height: 90%;
  border: 1px solid white;
  border-radius: 50%;
  z-index: -1;
  opacity: 0.4;
}
.bar-button::before {
  animation: bar 2s ease-out infinite;
}
.bar-button::after {
  animation: bar 3s 2s ease-out infinite;
}
@keyframes bar {
  100% {
    transform: scale(1.5);
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* .list{
            display: none;  
            }
            .menu i{
    display: block !important;
            } */

  .content h1 {
    padding-left: 10px;
    margin-top: 80px;
    font-size: 110px;
    width: 100%;
  }

  .subtitle {
    padding-left: 10px;
    padding-top: 20px;
    margin: 0px;
    width: 50%;
    max-width: 560px;
    font-size: 28px;
  }
}

@media screen and (min-width: 0px) and (max-width: 767px) {
  .menuIcon {
    display: block;
  }

  .list {
    display: none;
    position: absolute;
    top: 60px;
    right: 20px;
    background-color: rgba(0, 0, 0, 0.95);
    border-radius: 8px;
    padding: 15px 20px;
    z-index: 999;
  }

  .menuToggle:checked + .menuIcon + .list {
    display: block;
  }

  .list ul {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  .list ul li {
    margin: 0;
  }

  .list ul li a {
    font-size: 18px;
    color: white;
  }

  .header {
    padding: 0px;
  }
  .content h1 {
    padding-left: 13px;
    margin-top: 0px;
    font-size: 60px;
    margin-bottom: 30px;

    width: 100%;
  }

  .subtitle {
    padding-left: 13px;
    margin: 0px;
    width: 100%;
    max-width: 560px;
    font-size: 18px;
  }
}
/* 1st slide end */
/* 2nd slide start */
.creation {
  width: 100%;
  padding-top: 140px;
  padding-bottom: 140px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;
  justify-content: space-evenly;
  position: relative;
}
.circle {
  width: 350px;
  flex-direction: column;
  position: relative;
  gap: 10px;
}
.circle img {
  width: 15%;
  margin-bottom: 10px;
}
.circle h5 {
  font-size: 50px;
  font-weight: 600;
}
.circle p {
  text-align: center;
  margin: 20px 0;
  font-size: 18px;
  width: 90%;
  line-height: 1.6;
}
.pencil {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.pencil::after {
  content: "";
  position: absolute;
  left: 1;
  right: 1;
  width: 400px;
  height: 430px;
  border-radius: 100%;
  z-index: -1;
  background: #d8ff36;
  transform: scale(0);
  transition: all 0.5s;
}

.pencil::after {
  animation: pencil 2s ease-out;
}
.pencil:hover::after {
  transform: scale(0.9);
}

.pen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.pen::after {
  content: "";
  position: absolute;
  left: -1;
  right: -1;
  width: 400px;
  height: 430px;
  border-radius: 100%;
  z-index: -1;
  transition: all 0.4s;
  background: #d8ff36;
  transform: scale(0);
  transition: all 0.5s;
}

.pen::after {
  animation: pen 2s ease-out;
}
.pen:hover::after {
  transform: scale(0.9);
}

.tick {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.tick::after {
  content: "";
  position: absolute;
  left: -1;
  right: -1;
  width: 400px;
  height: 430px;
  border-radius: 100%;
  z-index: -1;
  transition: all 0.4s;
  background: #d8ff36;
  transform: scale(0);
  transition: all 0.5s;
}

.tick::after {
  animation: tick 2s ease-out;
}
.tick:hover::after {
  transform: scale(0.9);
}

@media screen and (min-width: 0px) and (max-width: 1200px) {
  .creation {
    margin-top: 40px;
    padding-top: 80px;
    padding-bottom: 80px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
  }

  .circle h5 {
    font-size: 40px;
  }
  .circle p {
    font-size: 16px;
  }

  .pencil::after {
    width: 330px;
    height: 300px;
  }
}

/* 3rd slide start */

.third {
  padding-left: 30px;
  max-width: 1320px;
  display: flex;
  max-width: 100%;
}
.sucess {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.left-third {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.p1 {
  margin: 0px 0 20px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.title2 {
  font-size: 60px;
  font-weight: 600;
  line-height: 1.2;
  padding-bottom: 30px;
}
.left-bottom {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  justify-content: flex-start;
}
.bt1 h5 {
  font-size: 20px;
  margin: 0px 0px 15px;
  line-height: 1.2;
}
.bt2 h5 {
  font-size: 20px;
  margin: 0px 0px 15px;
  line-height: 1.2;
}
.bt1 p {
  font-size: 18px;
  line-height: 1.7;
  width: 400px;
}
.bt2 {
  margin-left: 40px;
}
.bt2 p {
  font-size: 18px;
  line-height: 1.7;
  width: 400px;
}
.btn1 {
  width: 200px;
  height: 55px;
  font-size: 16px;
  font-weight: 700;
  padding: 17px;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: space-evenly;
  color: #fff;
  background-color: black;
  border-radius: 35px;
  border: none;
  margin-top: 30px;
  margin-bottom: 20px;
  transition: all 0.4s linear;
}

.more {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #d8ff36;
  border-radius: 100%;
}
.pluse {
  color: black;
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
}

.btn1:hover {
  transform: translateY(-10px);
  /* transform: scale(0); */
  background-color: #d1fd1e;
  color: #000;
}
.btn1:hover .more {
  background-color: #000;
}
.btn1:hover .pluse {
  color: #fff;
}

.right {
  margin-bottom: 10px;
  margin-left: 400px;
}
.number {
  width: 250px;
  height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  border: 1px solid black;
  border-radius: 100%;
}
.number::before {
  content: "";
  position: absolute;
  left: 35px;
  top: 35px;
  right: 35px;
  bottom: 35px;
  border: 1px solid black;
  border-radius: 100%;
}
.num14 {
  position: relative;
  top: 7px;
  font-size: 90px;
  font-weight: 900;
  line-height: 1;
  color: black;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 3px;
}
.circle-motion {
  position: absolute;
  width: 90%;
  height: 90%;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  animation: rotate 10s linear infinite;
}
.circle-motion span {
  position: absolute;
  transform-origin: 0 111px;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@media screen and (max-width: 767px) {
  .third {
    max-width: 720px;
    padding: 5px;
  }
  .title2 {
    font-size: 38px;
    padding-left: 13px;
    padding-right: 13px;
    margin: 0;
  }
  .sucess {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .right {
    margin: 0;
  }
  .p1 {
    padding-left: 13px;
    padding-right: 13px;
    font-size: 16px;
    font-weight: 700;
  }
  .bt1 p {
    font-size: 18px;
  }
  .bt1 p {
    width: 100%;
    margin: 20px 0;
  }
  .bt2 p {
    width: 100%;
  }
  .bt2 {
    margin-left: 0px;
  }
  .left-third {
    padding: 0px 0px;
  }

  .left-bottom {
    display: flex;
    padding-left: 13px;
    padding-right: 13px;
    flex-direction: column;
  }
  .right {
    margin-bottom: 20px;
    padding-left: 13px;
  }
}

@media screen and (min-width: 768px) and (max-width: 993px) {
  .third {
    padding-left: 13px;
  }
  .title2 {
    font-size: 50px;
  }
  .sucess {
    display: flex;
  }
  .right {
    margin: 0;
    padding-right: 35px;
  }
  .bt1 p {
    width: 350px;
  }
  .bt2 p {
    width: 300px;
  }
  .bt2 {
    margin-left: 20px;
  }
  .left-bottom {
    padding-top: 30px;
  }
}

@media screen and (min-width: 994px) and (max-width: 1024px) {
  .title2 {
    font-size: 50px;
    margin: 0;
  }

  .sucess {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }
  .right {
    margin: 0px;
  }

  .left-bottom {
    width: 100%;
  }
  .bt1 p {
    width: 350px;
  }
  .bt2 p {
    width: 300px;
  }
  .bt2 {
    margin-left: 20px;
  }
}

/* 3 slide end */

/* 4th slide start */

.border {
  border-top: 1px solid #555;
  border-bottom: 1px solid #555;
  padding-top: 90px;
  padding-bottom: 100px;
}
.slider {
  padding-top: 140px;
  padding-bottom: 140px;
}
.slider-text {
  width: 100%;
  padding-block: 10px;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.slider-text h5 {
  width: auto;
  display: inline-block;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 100px;
  line-height: 1;
  -webkit-text-stroke-width: 4px;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-color: black;
  margin: 0 100px;
  word-spacing: 10px;
  letter-spacing: 4px;
  animation: slide 13s linear infinite;
}

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

@media screen and (max-width: 767px) {
  .border {
    padding-top: 45px;
    padding-bottom: 50px;
  }

  .slider {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .slider-text h5 {
    font-size: 50px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .slider-text h5 {
    font-size: 70px;
  }
}

/* 4th slide end */

/* 5th slide start */
.showcase {
  max-width: 1318px;
  padding-right: 20px;
  padding-left: 20px;
  width: 100%;
}
.showcase p {
  color: #1b252e;
  font-size: 16px;
  margin: 0 0 20px;
  font-weight: 700;
  line-height: 1;
}
.showcase h2 {
  font-size: 60px;
  font-weight: 600;
  color: black;
  padding-bottom: 40px;
}
.show {
  position: relative;
  padding-bottom: 50px;
}
.ani-img {
  width: 470px;
  height: 350px;
  overflow: hidden;
  position: absolute;
  top: 150px;
  left: 200px;
  background-position: center;
  background-size: cover;
  filter: blur(15%);
  position: 50%;
  z-index: 1;
  transform: rotate(-30deg);
  animation: ani-img 15s ease-in-out infinite;
}
@keyframes ani-img {
  0% {
    background: url(../images/project-n01-3-1200x900.jpg);
    background-position: center;
    background-size: cover;
  }
  35% {
    background: url(../images/project-2-2-1200x982.jpg);
    background-position: center;
    background-size: cover;
  }
  55% {
    background: url(../images/project-2-1200x988.jpg);
    background-position: center;
    background-size: cover;
  }
  75% {
    background: url(../images/project-4.jpg);
    background-position: center;
    background-size: cover;
  }
  100% {
    background: url(../images/project-3-1200x750.jpg);
    background-position: center;
    background-size: cover;
  }
}
.show .img-circle {
  position: absolute;
  top: 100px;
  left: 150px;
  width: 400px;
  height: 400px;
  background: #d8ff36;
  border-radius: 100%;
}
.move {
  animation: move 6s ease-in-out infinite;
  transform-origin: left;
}
@keyframes move {
  50% {
    transform: translateX(15px);
  }
}

.branding {
  padding-left: 20px;
  padding-right: 20px;
  width: 100%;
  display: flex;
}
.left1 {
  padding: 30px 0;
}
.left-01 {
  text-transform: uppercase;
  width: 155px;
  color: #999999;
}

.left-02 {
  text-transform: capitalize;
  font-size: 26px;
  color: #000;
  line-height: 1.2;
  font-weight: 700;
  position: relative;
}
.left-02 p {
  -webkit-animation: scale-in-ver-bottom 0.5s
    cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: scale-in-ver-bottom 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.left-02:hover {
  color: #000;
}
.left-02::before {
  content: "";
  position: absolute;
  bottom: -10px;
  width: 100%;
  height: 1px;
  background-color: #000;
  transform: scaleX(0);
  transition: all 0.4s;
}
.left-02:hover::before {
  transform: scaleX(1);
  width: 100%;
}
.row {
  width: 100%;
  width: auto;
  padding: 30px 0;
  border-top: 1px solid #b8b0b0;
  display: flex;
  align-items: center;
}
@-webkit-keyframes scale-in-ver-bottom {
  0% {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    opacity: 1;
  }
}
@keyframes scale-in-ver-bottom {
  0% {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    opacity: 1;
  }
}
.none {
  border-top: none;
}

.art-img img {
  max-width: 100%;
  height: auto;
  width: auto;
  overflow: hidden;
  margin-bottom: 20px;
  display: none;
  animation: scale-in-hor-left 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@keyframes scale-in-hor-left {
  0% {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    opacity: 1;
  }
}
.design {
  padding-left: 30px;
  padding-bottom: 140px;
  border-bottom: 1px solid #555;
}
.design a {
  text-decoration: none;
}

.btn-effect {
  position: relative;
}
.btn2 {
  width: 200px;
  height: 55px;
  font-size: 16px;
  font-weight: 700;
  padding: 30px 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: space-evenly;
  color: #fff;
  background-color: black;
  border-radius: 35px;
  border: none;
  margin-bottom: 20px;
  position: relative;
  transition: all 0.3s ease;
}

.btn3 {
  position: absolute;
  left: 0;
  width: 200px;
  height: 55px;
  font-size: 16px;
  font-weight: 700;
  padding: 30px 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: space-evenly;
  color: black;
  background-color: #d8ff36;
  border-radius: 35px;
  border: none;
  margin-bottom: 20px;
  opacity: 0;
  z-index: 1;
  transform: translateY(-10px);
}

.more3 {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
  border-radius: 100%;
}
.pluse3 {
  color: white;
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
}

.btn3:hover {
  transition: all 0.3s ease;
  opacity: 1;
}

.btn3:hover {
  transform: scale(1);
  opacity: 2;
}

.more2 {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #d8ff36;
  border-radius: 100%;
}
.pluse2 {
  color: black;
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
}

@media screen and (max-width: 767px) {
  .art-img img {
    display: block;
    width: 100%;
  }
  .art-img {
    padding-top: 30px;
  }
  .ani-img,
  .img-circle,
  .move {
    display: none;
  }
  .left {
    padding: 10px 0;
  }
  .left1 {
    padding: 0;
  }
  .left-01 {
    /* padding: 0; */
    width: 100px;
  }
  .left-02 {
    margin-top: 10px;
    padding-bottom: 30px;
    font-size: 26px;
  }
  .showcase h2 {
    font-size: 38px;
    padding-bottom: 0px;
  }
  .branding {
    padding: 0 13px;
  }

  .row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    /* padding-bottom: 30px; */
    border-bottom: 1px solid #b2b2b2;
  }

  .left-01 h3 {
    font-size: 15px;
    padding: 0 0 10px;
  }
  .none {
    border-bottom: none;
  }

  .design {
    padding-bottom: 80px;
    padding-left: 10px;
    padding-top: 30px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .art-img img {
    display: block;
    width: 100%;
  }
  .ani-img,
  .img-circle,
  .move {
    display: none;
  }

  .row {
    width: auto;
    padding: 30px 0;
    display: flex;
    align-items: center;
  }

  .showcase {
    padding: 0px 13px;
  }
  .showcase h2 {
    font-size: 50px;
    padding-bottom: 0px;
  }

  .branding {
    padding: 0 13px;
  }

  .row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .left-01 h3 {
    font-size: 15px;
    padding: 0 0 10px;
  }
}

/* 5th slide end */

/* 6th start */
.experts {
  padding-top: 140px;
  padding-bottom: 140px;
}
.members {
  padding-bottom: 40px;
}
.members p {
  margin: 0 0 20px;
  text-transform: uppercase;
  line-height: 1;
  font-size: 16px;
  text-align: center;
  font-weight: 700;
  color: #1b252e;
}
.members h2 {
  font-size: 60px;
  font-weight: 600;
  text-align: center;
}

.cards-full {
  /* width: 100%; */
  padding-left: 30px;
  padding-right: 30px;
  display: flex;
  flex-wrap: wrap;
}
.cards {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  justify-content: space-evenly;
}
.cards-item {
  width: 22%;
  padding: 30px 32px;
  position: relative;
  overflow: hidden;
  border: 1px solid #3e3e3e;
  height: 669px;
}
.cards-item h5 {
  margin: 0 0 20px;
  font-size: 36px;
  line-height: 1;
  text-transform: capitalize;
}
.cards-item p {
  margin: 0 0 20px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: #1b252e;
}
.social {
  margin-top: 30px;
}
.social ul li {
  margin-right: 4px;
  display: inline-block;
}
.social ul li a {
  position: relative;
  text-decoration: none;
  display: flex;
  width: 70px;
  height: 70px;
  border: 1px solid #3e3e3e;
  border-radius: 70px;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: #666;
}
.social ul li a i {
  position: relative;
  z-index: 2;
  font-weight: 400;
}

/* item down */
.item-down {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: absolute;
  flex-wrap: wrap;
  width: 100%;
  line-height: 1;
}
.item-down img {
  width: 356px;
  height: 530px;
  filter: grayscale(1);
}
.item-down .letter {
  color: black;
  position: absolute;
  right: 0px;
  bottom: 100px;
  font-size: 300px;
  font-weight: 700;
  line-height: 0.5;
  -webkit-text-stroke-width: 1.8px;
  -webkit-text-fill-color: transparent;
}
.letter span {
  background-color: #fff;
  background-size: cover;
  /* background-position: center; */
  overflow: hidden;
  background-clip: text;
}

.cards-item::after {
  content: "";
  position: absolute;
  left: 1;
  right: 1;
  width: 400px;
  height: 400px;
  border-radius: 100%;
  z-index: -1;
  background: #d8ff36;
  transform: scale(0);
  transition: all 0.5s;
  transform-origin: center;
}

.cards-item::after {
  animation: card-item 2s ease-out;
}
.cards-item:hover::after {
  transform: scale(3);
}
.cards-item:hover .item-down img {
  filter: none;
}
.cards-item:hover .letter span {
  background-color: #d8ff36;
}
.social ul li a::before {
  content: "";
  position: absolute;
  left: 1;
  right: 1;
  width: 60px;
  height: 60px;
  border-radius: 100%;
  z-index: 1;
  background-color: black;
  transform: scale(0);
  transition: all 0.4s;
}

.social ul li a::before {
  animation: social 2s ease;
}
.social ul li a:hover::before {
  transform: scale(1);
}
.social a:hover {
  color: #fff;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .cards-item {
    width: 43%;
    padding-left: 0px;
    padding-right: 0px;
  }

  .item-down img {
    max-width: 410px;
    max-height: 500px;
  }
  .cards {
    display: flex;
    flex-direction: row;
    /* width: 800px; */
  }
  .cards-full {
    padding: 0 5px;
  }
  .item-up {
    padding: 30px 10px 30px 30px;
  }
  .item-down .letter {
    font-size: 270px;
    bottom: 138px;
  }
  .members h2 {
    font-size: 50px;
  }
}

@media screen and (max-width: 767px) {
  .experts {
    padding: 80px 0;
  }
  .cards-item {
    width: 100%;
    padding-left: 0px;
    padding-right: 0px;
  }
  .cards {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .cards {
    display: flex;
    flex-direction: column;
  }
  .cards-full {
    padding: 0 13px;
  }
  .item-up {
    padding: 30px 10px 20px 30px;
  }
  .item-down .letter {
    bottom: 150px;
    font-size: 270px;
  }

  .members p {
    font-size: 16px;
    color: #1b252e;
    font-weight: 700;
  }
  .members h2 {
    font-size: 38px;
  }
}

/* 7th slide start */

.reviews {
  position: relative;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 140px;
}
.star {
  display: flex;
  flex-direction: row;
  /* flex-wrap: wrap; */
}
.star-titles {
  width: 50%;
}
.star-titles h2 {
  font-size: 60px;
  font-weight: 600;
  color: #000;
  line-height: 1.2;
  padding-bottom: 20px;
  -webkit-animation: scale-in-ver-bottom 0.5s
    cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: scale-in-ver-bottom 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.rating {
  display: flex;
  gap: 20px;
  align-items: center;
}
.rating p {
  font-size: 22px;
  line-height: 26px;
  font-weight: 700;
}
.rate {
  font-size: 22px;
  color: #1b252e;
  font-weight: 700;
}
.stars-4 {
  margin: 0 15px;
  padding: 0 20px;
  display: inline-block;
  font-size: 12px;
  height: 26px;
  line-height: 28px;
  font-weight: 900;
  border-radius: 20px;
  color: #000;
  background: #d8ff36;
}

.star-5 {
  width: 45%;
  padding-left: 50px;
  border-left: 1px solid #000;
}
.star-5 h3 {
  font-size: 25px;
  font-weight: 400;
  margin-bottom: 15px;
  color: #1b252e;
  line-height: 1.7;
}
.star-5 .smith {
  margin: 0 0 20px;
  font-size: 26px;
  color: #000;
  font-weight: 700;
  line-height: 1.2;
}
.sup {
  margin-top: 10px;
  display: flex;
  align-items: center;
}
.sup p {
  font-size: 18px;
  font-weight: 400;
}

.circle-2 {
  position: absolute;
  left: 0;
  bottom: 0;
}
.circle-1a {
  margin-left: 50px;
  margin-right: 10px;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 70px;
  height: 70px;
  border: 1px solid #6a5a5a;
  border-radius: 50%;
}

.circle-1b {
  margin-left: 50px;
  margin-right: 50px;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 70px;
  height: 70px;
  border: 1px solid #6a5a5a;
  border-radius: 50%;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .reviews {
    padding-left: 13px;
    padding-right: 13px;
  }
  .star {
    display: flex;
    flex-direction: column;
  }
  .star-titles {
    width: 100%;
    margin-bottom: 30px;
  }
  .star-titles h2 {
    margin-bottom: 20px;
    font-size: 50px;
  }
  .rate {
    font-size: 22px;
  }

  .star-5 {
    width: 100%;
  }

  .star-5 h3 {
    font-size: 26px;
    margin-bottom: 20px;
  }
  .star-5 .smith {
    font-size: 26px;
  }
  .sup p {
    font-size: 18px;
  }
  .rating {
    gap: 0px;
  }
}

@media screen and (max-width: 767px) {
  .reviews {
    padding-left: 13px;
    padding-right: 13px;
    padding-bottom: 80px;
  }
  .star {
    display: flex;
    flex-direction: column;
  }
  .star-titles {
    width: 100%;
    margin-bottom: 30px;
  }
  .star-titles h2 {
    font-size: 34px;
  }
  .stars-4 {
    font-size: 16px;
    margin: 0px;
  }
  .rating {
    display: flex;
    gap: 0px;
    /* flex-direction: column; */
    align-items: start;
  }
  .rate {
    font-size: 18px;
  }

  .star-5 {
    width: 100%;
    margin: 30px 0 0;
    padding-left: 30px;
  }

  .star-5 h3 {
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 20px;
  }
  .star-5 .smith {
    font-size: 26px;
  }
  .sup {
    display: flex;
    flex-direction: column;
    align-items: start;
  }
  .sup p {
    font-size: 18px;
    margin-bottom: 10px;
  }
  .stars-4 {
    font-size: 10px;
  }
}
/* 7th slide end */
.pura {
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 140px;
  height: 800px;
}
.full-img {
  max-width: 100%;
  width: 100%;
  height: 100%;
  background: url(../images/posts1.jpg);
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-animation: scale-in-hor-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
    both;
  animation: scale-in-hor-left 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.up-circle {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: #d8ff36;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  cursor: pointer;
  z-index: 3;
  flex-direction: row;
  position: relative;
}
.up-circle .play {
  position: absolute;
  font-size: 80px;
  margin-top: 10px;
  margin-left: 10px;
  z-index: 1;
}

.up-circle::before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  border: 2px solid #000;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3;
}

.circle-motion1 {
  position: absolute;
  left: 5%;
  right: 5%;
  width: 90%;
  height: 90%;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  animation: rotate 10s linear infinite;
}
.circle-motion1 span {
  position: absolute;
  transform-origin: 0 90px;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@media screen and (max-width: 767px) {
  .pura {
    height: 270px;
    padding-bottom: 80px;
    padding-left: 12px;
    padding-right: 12px;
  }
  .full-img {
    height: 280px;

    .up-circle {
      transform: scale(0.5);
    }
  }
}

/* 8th slide end */

/* 9th slide start */
.count {
  padding-bottom: 140px;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
}
.count-num {
  font-size: 100px;
  color: black;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 3px;
}
.num-pluse {
  font-size: 80px;
  margin-bottom: 70px;
  color: black;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 4px;
}
.m1 {
  margin-bottom: 70px;
  font-size: 60px;
  color: black;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 4px;
}
.num-after {
  width: 50%;
  position: relative;
  display: flex;
  align-items: center;
  font-size: 150px;
  font-weight: 700;
  line-height: 1;
}

.team {
  font-size: 18px;
  color: #666;
  font-weight: 700;
  margin-bottom: 10px 0 20px;
  line-height: 1;
}

@media screen and (max-width: 767px) {
  .count {
    display: flex;
    flex-direction: column;
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .count-num {
    font-size: 80px;
  }
  .m1 {
    font-size: 50px;
  }
  .num-pluse {
    width: fit-content;
    font-size: 50px;
  }
}
/* 9th slide end */

/* 10th slide start */

.black {
  padding-bottom: 100px;
  padding-left: 30px;
  padding-right: 30px;
  position: relative;
  height: 650px;
}

.black-img {
  padding-top: 140px;
  padding-bottom: 140px;
  padding-left: 40px;
  padding-right: 40px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: url(../images/cta-bg-1.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.black-content {
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.content-left {
  width: 50%;
  padding-bottom: 40px;
}
.content-left p {
  font-size: 17px;
  color: white;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
}

.content-left h2 {
  padding-bottom: 40px;
  font-size: 60px;
  color: white;
  text-transform: capitalize;
  font-weight: 600;
  line-height: 1.2;
}

.email p {
  text-transform: capitalize;
  color: #d5d5d5;
  font-size: 26px;
  margin: 20px 0px;
  font-weight: 300;
  line-height: 1.7;
}

.email a {
  text-decoration: none;
  color: #d8ff36;
  font-size: 40px;
  font-weight: 500;
  line-height: 1;
}

.content-right {
  margin-bottom: -200px;
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}
.right-img {
  background: url(../images/cta-circle2.png);
  position: absolute;
  right: 0px;
  bottom: -200px;
  width: 600px;
  height: 600px;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.sub-circle1 {
  right: 0px;
  top: 70px;
  width: 120px;
  height: 120px;
  position: absolute;
  background: #d8ff36;
  border-radius: 100%;
}

.sub-circle1 {
  right: 0px;
  top: 70px;
  width: 110px;
  height: 110px;
  position: absolute;
  background: #d8ff36;
  border-radius: 100%;
  animation: sub-circle 6.5s linear infinite;
}

.sub-circle2 {
  right: 170px;
  top: -10px;
  width: 80px;
  height: 80px;
  position: absolute;
  background: #d8ff36;
  border-radius: 100%;
  animation: sub-circle 6.5s linear infinite;
}

.sub-circle3 {
  width: 50px;
  height: 50px;
  right: 50px;
  top: -8px;
  position: absolute;
  background: #d8ff36;
  border-radius: 100%;
  animation: sub-circle 6.5s linear infinite;
}

@keyframes sub-circle {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.6);
  }
  100% {
    transform: scale(1);
  }
}
.line-btns {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  display: none;
}
.design1 {
  padding-left: 30px;
}
.design1 a {
  text-decoration: none;
}

.btn-effect1 {
  position: relative;
}
.btn4 {
  width: 220px;
  height: 80px;
  font-size: 16px;
  font-weight: 700;
  padding: 17px;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: space-evenly;
  color: #000;
  background-color: #fff;
  border-radius: 45px;
  border: none;
  margin-bottom: 20px;
  /* position: relative; */
  transition: all 0.3s ease;
}

.more4 {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
  border-radius: 100%;
}
.pluse4 {
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}
.more4 a,
.more5 a {
  text-decoration: none;
  color: #fff;
}

.btn5 {
  position: absolute;
  left: 0;
  width: 220px;
  height: 80px;
  font-size: 16px;
  font-weight: 700;
  padding: 17px;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: space-evenly;
  color: #fff;
  background-color: black;
  border-radius: 45px;
  border: none;
  margin-bottom: 20px;
  opacity: 0;
  z-index: 1;
}

.more5 {
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #d8ff36;
  border-radius: 100%;
}
.pluse5 a {
  color: black;
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
}

.btn5:hover .more5 {
  transform: scale(1.2);
}
.btn5:hover {
  transform: scaleY(1);
  transition: all 0.1s ease-in-out;
  opacity: 1;
}

@media screen and (max-width: 1024px) {
  .right-img {
    width: 500px;
    height: 500px;
    left: 480px;
    top: -420px;
    display: flex;
    flex-direction: column;
  }
  .sub-circle1 {
    width: 90px;
    height: 90px;
    top: 50px;
    right: -0px;
  }

  .sub-circle2 {
    width: 50px;
    height: 50px;
    top: -50px;
    right: -10px;
  }

  .sub-circle3 {
    width: 70px;
    height: 70px;
    right: 100px;
    top: -20px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  .black-content {
    display: flex;
    flex-direction: column;
    /* padding-bottom: 200px; */
    /* margin-bottom: -200px; */
  }
  .black-img {
    /* padding-bottom: 100px; */
    padding-top: 30px;
    height: 800px;
  }
  .right-img {
    width: 420px;
    height: 420px;
    left: 150px;
    top: 0px;
  }
  .content-left h2 {
    font-size: 50px;
  }
  .sub-circle1 {
    width: 90px;
    height: 90px;
    top: 30px;
    right: -20px;
  }

  .sub-circle2 {
    width: 50px;
    height: 50px;
    top: -50px;
    right: -10px;
  }

  .sub-circle3 {
    width: 70px;
    height: 70px;
    right: 100px;
    top: -20px;
  }

  .design1 {
    display: flex;
    gap: 50px;
    padding-left: 30px;
  }
}

@media screen and (max-width: 767px) {
  .black {
    padding-bottom: 30px;
  }
  .black-img {
    padding-top: 15px;
    height: 700px;
    padding-bottom: 15px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .content-left {
    padding-top: 40px;
    padding-left: 13px;
    padding-right: 13px;
    /* padding-bottom: 10px; */
    width: 100%;
  }
  .content-left h2 {
    font-size: 35px;
  }
  .right-img {
    display: none;
    /* position: relative; */
  }
  .btn4 {
    width: 260px;
    height: 65px;
    margin-bottom: 10px;
    justify-content: center;
    gap: 10px;
  }
  .line-btns {
    /* padding: 10px; */
    bottom: 0px;
    left: 50px;
    display: flex;
    flex-direction: column;
    display: block;
    padding-bottom: 40px;
  }
  .down {
    padding-bottom: 100px;
  }
  .design1 {
    display: flex;
    flex-direction: column;
    /* padding-top: 100px; */
  }

  .sub-circle1,
  .sub-circle2,
  .sub-circle3 {
    display: none;
  }

  .email a {
    font-size: 20px;
  }

  .email p {
    line-height: 1.5;
    font-size: 20px;
  }
  .sub-circle1 {
    width: 90px;
    height: 90px;
    top: 50px;
    right: -0px;
  }

  .sub-circle2 {
    width: 50px;
    height: 50px;
    top: -50px;
    right: -10px;
  }

  .sub-circle3 {
    width: 70px;
    height: 70px;
    right: 100px;
    top: -20px;
  }
}

/* 10th slide end */
/* 11th start */
.blog {
  padding-top: 140px;
  padding-bottom: 140px;
  padding-left: 30px;
  padding-right: 30px;
}

.blog p {
  margin: 0 0 20px;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  color: #1b252e;
}
.blog h2 {
  text-align: center;
  font-size: 60px;
  line-height: 1.2;
  color: #000;
  font-weight: 700;
  padding: 0 0 40px;
}

.blog-cards {
  width: 100%;
}
.blog-cards1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  max-width: 100%;
}
.cards1-item {
  width: 400px;
  margin: 10px 0;
  overflow: hidden;
  margin-bottom: 40px;
  animation: scale-up-hor-left 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

@keyframes scale-up-hor-left {
  0% {
    -webkit-transform: scaleX(0.4);
    transform: scaleX(0.4);
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
  }
  100% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
  }
}

.cards1-item img {
  width: 100%;
  max-width: 100%;
}
.date {
  margin-top: 20px;
  margin-right: 12px;
}
.date .twenty {
  width: fit-content;
  background-color: #d8ff36;
  border-radius: 20px;
  padding: 8px 22px;
  color: #000;
  font-size: 14px;
  font-weight: 700;
}
.date {
  display: inline-block;
}
.april h5 {
  font-size: 22px;
  font-weight: 700;
  max-width: 100%;
  line-height: 1.2;
}
.april a {
  text-decoration: none;
  color: #000;
}

.april p {
  margin: 20px 0;
  text-align: left;
  line-height: 1.7;
  font-size: 18px;
  font-weight: 400;
  color: black;
}

.blog-btn a {
  text-decoration: none;
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  .blog {
    padding-top: 280px;
    padding-left: 13px;
    padding-right: 13px;
  }
  .blog p {
    font-size: 18px;
  }
  .blog h2 {
    font-size: 50px;
    word-break: break-all;
  }
  .blog-cards1 {
    justify-content: space-between;
  }
  .cards1-item {
    width: 48%;
  }
  .cards1-item img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    object-position: center;
  }
}

@media screen and (max-width: 767px) {
  .blog {
    padding-top: 80px;
    padding-left: 13px;
    padding-right: 13px;
  }
  .blog p {
    font-size: 18px;
    color: #000;
  }
  .cards1-item {
    width: 100%;
    margin: 10px;
  }
  .blog h2 {
    font-size: 38px;
    word-wrap: break-word;
    padding: 0 0 30px;
  }
}

/* 11th slide end */

/* 12th slide start */

.clients {
  /* padding-top: 100px; */
  padding-left: 30px;
  padding-right: 30px;
  max-width: 1318px;
  padding-bottom: 90px;
}

.clients-title p {
  margin: 0 0 20px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: #1b252e;
  text-transform: uppercase;
}
.clients-title h2 {
  font-size: 60px;
  font-weight: 600;
  color: #000;
  line-height: 1.2;
  max-width: 100%;
  padding-bottom: 40px;
}

.clients-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.clients-cards1 {
  margin: 10px 0px;
  width: 300px;
  /* width: 280px; */
  height: 200px;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  line-height: 1;
  border: 1px solid #3e3e3e;
}
.clients-cards1 img {
  width: 100%;
  max-height: 80px;
}

.yellow-ani {
  background-color: #d8ff36;
  overflow: hidden;
  font-size: 12px;
  width: 100%;
  height: 100%;
  color: #000;
  font-weight: 700;
  display: flex;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0px;
  left: 0px;
  opacity: 0;
  z-index: 2;
  transform: scale(0);
  transition: all 0.4s ease-in-out;
}

.clients-cards1:hover .yellow-ani {
  opacity: 1;
  transform: scale(1.5);
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .clients {
    padding-left: 13px;
    padding-right: 13px;
  }
  .clients-title h2 {
    font-size: 50px;
    text-align: left;
  }
  .clients-title p {
    text-align: left;
    font-size: 16px;
    color: #000;
  }

  .clients-cards1 {
    width: 30%;
  }
}
@media screen and (min-width: 390px) and (max-width: 767px) {
  .clients {
    padding-left: 13px;
    padding-right: 13px;
  }
  .clients-title h2 {
    font-size: 38px;
    text-align: left;
  }
  .clients-title p {
    text-align: left;
    font-size: 16px;
  }
  .clients-cards img {
    width: 100px;
    height: 200px;
  }
  .clients-cards1 {
    width: 47%;
  }
}

/* @media screen and (max-width:432px){

     .clients-title  h2{
        font-size: 30px;
     }
    .clients-title p{
        font-size: 20px;
    }
} */
/* 12th slide end */

/* footer start */
footer {
  background: #000;
  /* position: fixed; */
  left: 0;
  bottom: 0;
  width: 100%;
  /* z-index: 5; */
}

.all-footer {
  padding: 85px 40px;
  max-width: 1318px;
}
.footer-content {
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.footer-left {
  width: 25%;
  flex: 0 0 auto;
}
.footer-left h5 {
  color: #fff;
  /* padding: 0  13px; */
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
}
.footer-left p {
  color: #fff;
  /* padding: 0  13px; */
  font-size: 18px;
  margin: 20px 0;
  opacity: 0.6;
  line-height: 1.7;
}
.footer-middle {
  margin-left: 8.33%;
  flex: 0 0 auto;
  width: 32%;
}

.footer-middle h5 {
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 15px;
}
.footer-middle p {
  opacity: 0.6;
  margin: 20px 0;
  font-size: 20px;
  color: #fff;
  font-weight: 400;
  line-height: 1.7;
}
.footer-middle a {
  text-decoration: none;
  opacity: 0.6;
  margin: 20px 0;
  font-size: 20px;
  color: #fff;
  font-weight: 400;
  line-height: 1.7;
}
.footer-right {
  width: 32%;
  padding: 0 13px;
  flex: 0 0 auto;
}
.footer-img {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.footer-img1 {
  width: 31%;
  margin-bottom: 10px;
  max-width: 100%;
}
.footer-img1 img {
  max-width: 100%;
  overflow: hidden;
}

.lines {
  margin: 50px 0 30px;
  border-top: 9px solid rgba(255, 255, 255, 0.048);
  background-image: url(../images/fline.svg);
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 13px;
}
.footer-bottom p {
  width: 50%;
  margin-top: 22px;
  font-size: 18px;
  color: #fff;
  line-height: 1.3;
  font-weight: 400;
}
.footer-bottom a {
  text-decoration: none;
  font-size: 18px;
  color: #fff;
  line-height: 1.3;
  font-weight: 400;
}

.footer-icon {
  width: 50%;
  padding: 0 13px;
  text-align: right;
}

.social-footer ul li {
  margin-right: 4px;
  display: inline-block;
}
.social-footer ul li a {
  position: relative;
  text-decoration: none;
  display: flex;
  width: 70px;
  height: 70px;
  border: 1px solid #3e3e3e;
  border-radius: 70px;
  align-items: center;
  justify-content: center;
  font-size: 27px;
  font-weight: 700;
  color: #666;
}
.social-footer ul li a i {
  position: relative;
  z-index: 2;
  font-weight: 400;
}

.social-footer ul li a::before {
  content: "";
  position: absolute;
  left: 1;
  right: 1;
  width: 60px;
  height: 60px;
  border-radius: 100%;
  z-index: 1;
  background-color: #d8ff36;
  transform: scale(0);
  transition: all 0.4s;
}

.social-footer ul li a::before {
  animation: social 2s ease;
}
.social-footer ul li a:hover::before {
  transform: scale(1);
}
.social-footer a:hover {
  color: #000;
}

@media screen and (max-width: 768px) {
  .footer-left {
    width: 40%;
  }
  .footer-middle {
    width: 44%;
  }
  .footer-right {
    width: 100%;
  }
}

@media screen and (max-width: 500px) {
  .footer-content {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .footer-left {
    width: 100%;
  }
  .footer-middle {
    width: 100%;
  }
  .footer-middle {
    margin: 0px;
  }
  .footer-right {
    width: 100%;
  }
  .footer-bottom p {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .footer-icon {
    width: 100%;
  }
}

/* ============================== */

/* About us start */

.about-head {
  background-color: #000;
  padding-top: 200px;
  height: auto;
  padding-bottom: 30px;
  padding-left: 30px;
  padding-right: 30px;
}

.about-content {
  max-width: 1318px;
}
.about-title {
  color: #fff;
  font-size: 60px;
  font-weight: 600;
  line-height: 1.2;
}
.small-circle-img {
  margin: -10px 0 0 15px;
  position: relative;
  top: 0;
  right: 0;
  display: inline-block;
  width: 34px;
  height: 1em;
}
.circle-img {
  background: url(../images/title_icon.svg);
  position: absolute;
  left: 0;
  top: 0;
  /* width: 100%; */
  width: 34px;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: contain;
}

.about-subtitle {
  color: #fff;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.7;
  margin: 20px 0;
}

.about-title-bottom {
  margin-top: 60px;
  padding-top: 30px;
  border-top: 3px solid #848484;
  line-height: 1.7;
  font-size: 18px;
  font-weight: 400;
}
.about-title-bottom ul {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 16px;
}
.about-title-bottom ul li {
  color: #fff;
  display: inline-block;
  vertical-align: top;
  font-size: 16px;
  font-weight: 700;
  margin-right: 30px;
  padding-right: 30px;
  border-right: 1px solid silver;
}
.about-title-bottom ul li a {
  color: #fff;
  text-decoration: none;
}

.about-title-bottom .ab1 {
  margin: 0;
  padding: 0;
  border: none;
}

@media screen and (max-width: 767px) {
  .about-head {
    padding-left: 13px;
    padding-right: 1zpx;
    padding-top: 160px;
    margin-bottom: 50px;
  }

  .about-title {
    font-size: 42px;
  }
  .about-title-bottom {
    margin-top: 30px;
  }
}
/* 1st end */
/* 2nd start */

.agency {
  padding-bottom: 20px;
  padding-top: 140px;
  padding-left: 40px;
  padding-right: 30px;
  max-width: 1318px;
  width: 100%;
}
.agency-content {
  display: flex;
  flex-wrap: wrap;
}
.agency-content-left {
  width: 60%;
  padding-bottom: 60px;
}
.agency-content-left h3 {
  margin: 0 0 20px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
}

.agency-content-left h2 {
  font-size: 50px;
  font-weight: 600;
  line-height: 1.2;
  max-width: 100%;
}
.agency-content-left p {
  margin: 20px 0;
  font-size: 18px;
  line-height: 1.7;
  font-weight: 400;
}

.agency-right {
  margin-left: 8%;
  width: 25%;
}
.agency-right img {
  max-width: 100%;
}

@media screen and (max-width: 1024px) {
  .agency-content-left h2 {
    font-size: 50px;
  }
  .agency {
    padding-bottom: 0px;
    padding-top: 140px;
    padding-left: 13px;
    padding-right: 13px;
  }
}
@media screen and (max-width: 770px) {
  .agency-content-left {
    width: 100%;
  }
  .agency-right {
    display: none;
  }
}

@media screen and (max-width: 433px) {
  .agency-content-left {
    width: 100%;
    padding-bottom: 0px;
  }
  .agency {
    padding-top: 60px;
  }
  .agency-content-left h2 {
    font-size: 38px;
  }
  .agency-right {
    display: none;
  }
}
/* 2rd slide end */

/* 3th slide start/  3rd end */

/* 4th slide start */

.full-img1 {
  max-width: 100%;
  width: 100%;
  height: 100%;
  background: url(../images/hero-digital-1.jpg);
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-animation: scale-in-hor-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
    both;
  animation: scale-in-hor-left 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@media screen and (max-width: 767px) {
  /* .pura{
        height: 400px;
    } */
  .full-img1 {
    height: 200px;
  }

  .up-circle {
    transform: scale(0.4);
  }
}

/* 4th slide end */

/* 5th slide start */
.mission {
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 100px;
  display: flex;
  flex-wrap: wrap;
}
.our-mission-1 {
  width: 25%;
  flex: 0 0 auto;
}
.our-mission-1 h5 {
  text-transform: uppercase;
  font-size: 20px;
  font-weight: 500;
  color: #000;
  margin: 0 0 15px;
  line-height: 1.2;
  max-width: 100%;
}
.our-mission-2 {
  padding: 0 0 13px;
  width: 74%;
  max-width: 100%;
  flex: 0 0 auto;
}
.our-mission-2 p {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
}

.goal {
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 60px;
  display: flex;
  flex-wrap: wrap;
}
.our-goal-1 {
  width: 25%;
  flex: 0 0 auto;
}
.our-goal-1 h5 {
  text-transform: uppercase;
  font-size: 20px;
  font-weight: 500;
  color: #000;
  margin: 0 0 15px;
  line-height: 1.2;
  max-width: 100%;
}
.our-goal-2 {
  padding: 0 0 13px;
  width: 74%;
  max-width: 100%;
  flex: 0 0 auto;
}
.our-goal-2 p {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
}
@media screen and (max-width: 770px) {
  .mission {
    padding-top: 0px;
    padding-left: 13px;
    padding-right: 13px;
  }
  .our-mission-1 {
    width: 32%;
  }
  .our-mission-2 {
    width: 66%;
  }

  .our-goal-1 {
    width: 32%;
  }
  .our-goal-2 {
    width: 66%;
  }
}

@media screen and (max-width: 433px) {
  .mission {
    display: flex;
    flex-direction: column;
  }
  .our-mission-1 {
    width: 100%;
  }
  .our-mission-2 {
    width: 100%;
  }
  .goal {
    display: flex;
    flex-direction: column;
    padding-left: 13px;
    padding-right: 13px;
    padding-top: 20px;
  }
  .our-goal-1 {
    width: 100%;
  }
  .our-goal-2 {
    width: 100%;
  }
}
/* 6th slide start */
.two-img {
  padding-top: 100px;
  padding-bottom: 140px;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

.img-first {
  width: 45%;
}
.img-first img {
  max-width: 100%;
}

.img-second {
  padding-top: 60px;
  width: 45%;
}
.img-second img {
  max-width: 100%;
}

@media screen and (max-width: 433px) {
  .img-first {
    width: 100%;
    padding: 10px;
  }
  .img-second {
    padding: 10px;
    width: 100%;
  }
  .two-img {
    padding-top: 40px;
    padding-bottom: 0px;
  }
}
/* 6th slide end */
/* 7th slide start */

.service-agency {
  max-width: 1318px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 140px;
  padding-left: 40px;
  padding-right: 40px;
}
.service-heading {
  padding-bottom: 40px;
}
.service-heading p {
  text-transform: uppercase;
  margin: 0 0 20px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}
.service-heading h2 {
  font-size: 60px;
  font-weight: 600;
}

.service-item-lists {
  margin-top: -1px;
  padding: 30px 0;
  position: relative;
  border-top: 1px solid #8a8a8a;
  border-bottom: 1px solid #8a8a8a;
}

.service-item1 {
  padding: 0 110px 0 70px;
  position: relative;
}

.item-num {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  font-size: 16px;
  color: #555;
}
.service-item1 h5 {
  font-size: 26px;
  font-weight: 700;
  max-width: 100%;
  margin: 0 0 15px;
}
.service-item1 a {
  text-decoration: none;
  color: #000;
}
.service-item1 p {
  margin: 20px 0;
  font-size: 18px;
  color: #1b252e;
  line-height: 1.7;
  margin-bottom: 0;
}
.service-item-img1 {
  position: absolute;
  overflow: hidden;
  top: -12px;
  right: 0;
  width: 105px;
  height: 105px;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  border-radius: 100%;
  -webkit-border-radius: 100%;
  z-index: 2;
  border: 1px solid #3e3e3e;
}
.service-item-img1 img {
  width: auto;
  height: auto;
  position: relative;
  max-width: 50px;
  max-height: 50px;
}
.service-item-img1::after {
  content: "";
  border: 1px solid #3e3e3e;
  border-radius: 100%;
  position: absolute;
  left: 4px;
  top: 4px;
  right: 4px;
  bottom: 4px;
}
.service-item-img1::before {
  content: "";
  position: absolute;
  left: 1;
  right: 1;
  width: 60px;
  height: 60px;
  border-radius: 100%;
  z-index: -1;
  background-color: #d8ff36;
  transform: scale(0);
  transition: all 0.4s;
}
.service-item-img1::before {
  animation: service 2s ease;
}
.service-item-img1:hover::before {
  transform: scale(1.8);
}

@media screen and (max-width: 433px) {
  .service-heading h2 {
    font-size: 35px;
  }
  .service-heading {
    padding-top: 100px;
  }
  .item-num {
    margin-right: 5px;
    position: relative;
    left: 0;
    bottom: 7px;
    font-size: 20px;
    display: inline-block;
  }
  .service-item1 h5 {
    font-size: 26px;
    margin: 0;
    display: inline-block;
    max-width: 300px;
  }
  .service-item1 {
    padding: 0px;
  }
  .service-item-img1 {
    position: relative;
    margin-bottom: 20px;
    top: 0;
  }

  .service-agency {
    padding-left: 13px;
    padding-right: 13px;
    padding-bottom: 80px;
  }
}

/* 7th end */

/* 8th start */
.awards {
  padding-bottom: 140px;
  max-width: 1318px;
  padding-left: 40px;
  padding-right: 40px;
}
.awards-heading {
  text-transform: uppercase;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  margin: 0 0 20px;
}
.awards-cards {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-left: auto;
  margin-right: auto;
}
.awards-cards1 {
  margin-top: 30px;
  width: 32%;
}
.awards-cards1 img {
  padding: 0;
  margin: 20px 0;
  max-width: 100%;
}
.awards-cards1 h5 {
  font-size: 60px;
  font-weight: 600;
  max-width: 100%;
}
.awards-cards1 p {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.7;
  color: #1b252e;
}

@media screen and (max-width: 770px) {
  .awards-cards {
    justify-content: space-between;
  }
  .awards {
    padding-bottom: 0px;
  }
}

@media screen and (max-width: 433px) {
  .awards-cards {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .awards-cards1 {
    margin-top: 0px;
    width: 100%;
  }
  .awards {
    padding-left: 13px;
    padding-right: 13px;
    padding-bottom: 80px;
  }
}
/* 8th end */
/* 9th start */

.family {
  padding-top: 60px;
  padding-bottom: 140px;
  padding-left: 40px;
  padding-right: 40px;
  max-width: 1318px;
}
.co-family {
  text-align: center !important;
  display: flex;
  flex-wrap: wrap;
  margin-left: auto;
  margin-right: auto;
}
.family-content {
  margin-top: 30px;
  width: 41%;
}
.family-title {
  text-align: left !important;
}
.family-title p {
  text-transform: uppercase;
  margin: 0 0 20px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: #1b252e;
}

.family-title h2 {
  font-size: 50px;
  font-weight: 600;
  max-width: 100%;
}
.empty {
  margin-top: 30px;
  width: 8%;
}
.family-img1 {
  position: relative;
  overflow: hidden;
  width: 25%;
  padding: 0 13px;
  margin-top: 30px;
}
.img1-img {
  position: relative;
  overflow: hidden;
  bottom: 0;
  left: 0;
  width: 100%;
  /* height: 380px; */
  text-align: center;
  line-height: 1;
}
.img1-img img {
  max-width: 100%;
  width: auto;
  height: auto;
  background-color: #eef0ee;
  transition: all 0.5s;
}
.img1-img::before {
  content: "";
  position: absolute;
  overflow: hidden;
  margin: -400px 0 0 -400px;
  left: 50%;
  top: 50%;
  width: 800px;
  height: 800px;
  border-radius: 100%;
  transform: scale(0);
  transition: all 0.5s ease-in-out;
  background: rgba(0, 0, 0, 0.192);
  z-index: -1;
}

.img1-img:hover::before {
  z-index: 1;
  transform: scale(0.7);
}
.img-social {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 2;
  opacity: 0;
  transition: all 0.5s ease;
}
.img-social ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.img-social ul li {
  margin-right: 4px;
  display: inline-block;
}
.img-social ul li a {
  text-decoration: none;
  position: relative;
  display: flex;
  width: 60px;
  height: 60px;
  border: 1px solid white;
  border-radius: 56px;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: white;
  font-weight: 900;
}
.img-social ul li a::before {
  content: "";
  position: absolute;
  left: 1;
  right: 1;
  width: 60px;
  height: 60px;
  border-radius: 100%;
  z-index: -1;
  background-color: #d1fd1e;
  transform: scale(0);
  transition: all 0.4s;
}
.img-social ul li a:hover {
  color: #000;
}
.img-social ul li a:hover::before {
  transform: scale(0.85);
}
.family-img1:hover .img-social {
  opacity: 0.8;
}

.family-bottom {
  padding: 25px;
  position: relative;
}
.family-bottom h3 {
  font-size: 23px;
  font-weight: 800;
  line-height: 1;
  margin: 0 0 20px;
}
.family-bottom p {
  font-size: 16px;
  color: #1b252e;
  font-weight: 500;
}

.family-circle {
  margin-top: 30px;
  text-align: center;
  width: 25%;
  align-self: center;
}

.family-circle-icon {
  padding: 0;
  width: 100px;
  height: 100px;
  line-height: 100px;
  border: 1px solid #3e3e3e;
  border-radius: 100px;
  position: relative;
  overflow: hidden;
  display: inline-block;
  font-size: 40px;
  color: #000;
  font-weight: 700;
}
.family-circle::before {
  content: "";
  position: absolute;
  left: 1;
  right: 1;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  z-index: -1;
  background-color: #d1fd1e;
  transform: scale(0);
  transition: all 0.4s;
}
.family-circle:hover::before {
  transform: scale(0.9);
}
@media screen and (max-width: 768px) {
  .family-title h2 {
    font-size: 50px;
    width: 100%;
  }
  .empty {
    display: none;
  }
  .family {
    padding-top: 140px;
    padding-bottom: 80px;
  }
  .family-content {
    width: 50%;
  }
  .family-img1 {
    width: 50%;
  }
}
@media screen and (max-width: 433px) {
  .family {
    padding-top: 30px !important;
    padding-left: 5px;
    padding-right: 5px;
  }
  .family-content {
    width: 100%;
  }
  .family-title h2 {
    font-size: 30px;
  }

  .family-img1 {
    width: 100%;
  }
  .family-circle {
    width: 100%;
  }
}

/* 9th slide end */

.thomas-customer {
  padding-bottom: 140px;
  max-width: 1318px;
  padding-left: 40px;
  padding-right: 40px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.customer-content {
  position: relative;
  width: auto;
  height: auto;
  padding: 140px 100px;
  background-color: #000;
}
.content-img {
  background: url(../images/testi-bg.jpg);
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  opacity: 0.2;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.thomas-review {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  position: relative;
  text-align: center;
}
.review-text {
  padding-left: 10%;
  padding-right: 10%;
  color: white;
}
.review-text p {
  font-size: 22px;
  line-height: 1.5;
  font-weight: 400;
}
.review-text h5 {
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 10px;
  line-height: 1.7;
}
.review-stars {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.arrow {
  position: absolute;
  left: auto;
  right: 0;
  display: inline-block;
  width: 65px;
  height: 65px;
  top: 50%;
  border: 1px solid white;
  border-radius: 67px;
  transform: translateX(20px);
}
.arrow i {
  position: absolute;
  /* left: 20px; */
  right: 25px;
  top: 0px;
  font-size: 65px;
  color: #fff;
  transition: all 0.5s linear;
}
.arrow::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  width: 65px;
  height: 65px;
  border-radius: 100%;
  z-index: -1;
  background-color: #d1fd1e;
  transform: scale(0);
  transition: all 0.4s;
}
.arrow:hover::before {
  transform: scale(0.9);
}

.arrow2 {
  position: absolute;
  right: auto;
  left: 0;
  display: inline-block;
  vertical-align: middle;
  width: 67px;
  height: 67px;
  top: 50%;
  border: 1px solid #ffffff38;
  border-radius: 67px;
}
.arrow2 i {
  position: absolute;
  left: 20px;
  right: 25px;
  top: 0px;
  font-size: 65px;
  color: #ffffff38;
}
.arrow:hover .bx.bx-right-arrow-alt {
  transform: translateX(20px);
  color: black;
}
@media screen and (max-width: 1024px) {
  .customer-content {
    padding: 140px 70px;
  }
  .review-text p {
    font-size: 20px;
  }
  .review-text h5 {
    font-size: 24px;
  }
}
@media screen and (max-width: 770px) {
  .customer-content {
    padding: 80px 50px;
  }
  .review-text p {
    font-size: 18px;
  }
  .review-text h5 {
    font-size: 22px;
  }
}

@media screen and (max-width: 433px) {
  .customer-content {
    padding: 90px 50px;
  }
  .review-text {
    width: 280px;
    padding: 0;
  }
  .review-text p {
    font-size: 12px;
  }
  .review-text h5 {
    font-size: 20px;
  }
  .review-stars {
    display: flex;
    gap: 10px;
    flex-direction: column;
  }
  .arrow,
  .arrow2 {
    top: 100%;
  }
}

/* 10th slide end */

/* 11th end */
/* footer end */

/* ============================================== */
/* Team start */
/* 4th slide start */
.clients1 {
  padding-top: 130px;
  padding-left: 40px;
  padding-right: 40px;
  max-width: 1318px;
  padding-bottom: 90px;
}
@media screen and (max-width: 425px) {
  .clients1 {
    padding-top: 170px !important;
    padding-left: 13px !important;
    padding-right: 13px !important;
  }
}

@media screen and (max-width: 768px) and (max-width: 1024px) {
  .clients1 {
    padding-top: 300px;
    padding-left: 13px;
    padding-right: 13px;
  }
}

/* 4th end */

/* ========================================================================= */
/* Services start */
/* 1st slide end */
/* 2nd start */
.brand-creation {
  padding-top: 140px;
  padding-bottom: 140px;
  padding-left: 40px;
  padding-right: 40px;
  max-width: 1318px;
}

.brand-creation-content {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

.creation-card1 {
  text-align: center;
  width: 33%;
  margin-top: 30px;
}
.creation-card1-item {
  position: relative;
  max-width: 400px;
}
.service-item-logo {
  position: relative;
  margin: 0 auto -80px;
  background: #d8ff36;
  width: 161px;
  height: 161px;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  border-radius: 100%;
  z-index: 2;
}
.service-item-logo img {
  max-width: 75px;
  max-height: 75px;
  width: auto;
  height: auto;
}
.service-item-logo::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 6px;
  right: 6px;
  bottom: 6px;
  border-radius: 100%;
  border: 1px solid black;
}

.creation-card1-item1 {
  padding: 120px 60px 60px;
  position: relative;
  overflow: hidden;
  min-height: 200px;
  border: 1px solid black;
}
.creation-card1-item1::before {
  position: absolute;
  content: "";
  background-color: black;
  margin: -400px 0 0 -400px;
  left: 50%;
  top: 50%;
  width: 800px;
  height: 800px;
  border-radius: 100%;
  transition: all 0.5s ease-in-out;
  transform: scale(0);
}

.creation-card1-item1::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 6px;
  right: 6px;
  bottom: 6px;
  border: 1px solid black;
}

.creation-card1-item1 h5 {
  font-size: 28px;
  font-weight: 600;
  position: relative;
  z-index: 2;
}
.creation-card1-item1 a {
  text-decoration: none;
  color: #000;
  position: relative;
}

.creation-list {
  margin-top: 30px;
  position: relative;
  z-index: 2;
}
.creation-list ul {
  list-style-type: none;
}
.creation-list ul li {
  margin: 20px 0 0;
  padding-left: 20px;
  font-size: 18px;
  position: relative;
}
.creation-list ul li ::before {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 50%;
  height: 1px;
  background-color: white;
  transform: scaleX(0);
  transition: all 0.6s;
}
.creation-list ul li :hover::before {
  transform: scaleX(1);
  width: 100%;
}
.creation-list ul li i {
  position: absolute;
  left: 0;
  top: 0px;
  font-size: 22px;
  color: #1b252e;
}

.creation-card1-item1:hover::before {
  transform: scale(1);
}
.creation-card1-item1:hover h5 a {
  color: #fff;
}
.creation-card1-item1:hover .creation-list ul li {
  color: #fff;
}

.creation-card1-item1:hover .creation-list ul li i {
  color: #fff;
}
.creation-card1-item1:hover::after {
  border: 1px solid white;
}

@media screen and (max-width: 1024px) {
  /* .brand-creation{
        max-width: 1000px;
    } */
  .creation-card1 {
    width: 31%;
  }
  .creation-card1-item {
    max-width: 330px;
  }
  .creation-list ul li {
    font-size: 12px;
    font-weight: 600;
  }
}

@media screen and (max-width: 768px) {
  .brand-creation {
    max-width: 760px;
    /* padding-left: 20px;
        padding-right: 20px; */
  }
  .brand-creation-content {
    justify-content: flex-start;
  }
  .creation-card1 {
    width: 50%;
    margin-top: 0px;
  }
  .creation-card1-item {
    max-width: 300px;
  }
  .creation-list ul li {
    font-size: 15px;
    font-weight: 600;
  }
}
@media screen and (max-width: 433px) {
  .brand-creation {
    max-width: 750px;
    padding-top: 80px;
    padding-bottom: 0px;
  }
  .creation-card1 {
    width: 100%;
  }
  /* .creation-card1-item{
    max-width: 300px;
   }  */
  .creation-list ul li {
    font-size: 15px;
    font-weight: 600;
  }
}

/* 2nd  slide end */
/* 3rd end */

/* ============================================================= */

/* Blog Start */

/* 2nd slide start */

.blog-content {
  padding-top: 140px;
  max-width: 1318px;
  padding-left: 13px;
  padding-right: 13px;
  margin-right: auto;
  margin-left: auto;
}

.business {
  display: flex;
  flex-wrap: wrap;
}
.business-left {
  width: 65%;
  max-width: 100%;
  flex: 0 0 auto;
  /* padding-right: 13px;
    padding-left: 13px; */
}
.business-item {
  margin-bottom: 60px;
  padding-bottom: 40px;
  border-bottom: 3px solid #d6d6d6;
}
.business-item-img {
  margin: 0 0 25px;
  line-height: 1.2;
  /* position: relative; */
}
.business-item-img img {
  width: 100%;
  max-width: 100%;
  height: 460px;
  object-fit: cover;
  object-position: center;
  animation: scale-in-hor-left 0.5s ease-in both;
}
@keyframes scale-in-hor-left {
  0% {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    opacity: 1;
  }
}
.date1 {
  margin-top: 20px;
  display: inline-block;
}
.april1 {
  font-size: 16px;
  color: #000;
  font-weight: 500;
}
.april1 .month {
  background-color: #d8ff36;
  margin-right: 22px;
  padding: 8px 22px;
  line-height: 20px;
  border-radius: 36px;
  color: #000;
  font-size: 14px;
  font-weight: 700;
}

.april1 h5 {
  font-size: 30px;
  font-weight: 700;
  max-width: 100%;
  line-height: 1.2;
}
.april1 a {
  text-decoration: none;
  color: #000;
}

.april1 p {
  margin: 20px 0;
  text-align: left;
  line-height: 1.7;
  font-size: 20px;
  font-weight: 400;
  color: #1b252e;
}

.Read-more {
  padding: 0px 30px;
  border: none;
  line-height: 66px;
  border-radius: 66px;
  background: #000;
  color: white;
  font-size: 16px;
  font-weight: 700;
  transition: all 0.5s ease-in-out;
}
.Read-more:hover {
  background-color: #d1fd1e;
  color: #000;
  transform: translateY(-11px);
}

.business-right {
  flex: 0 0 auto;
  max-width: 100%;
  width: 33%;
  padding-left: 14px;
  padding-right: 14px;
}
.right-content {
  padding: 6px;
  position: relative;
  border: 1px solid #b2b2b2;
}

.Search {
  padding: 42px;
  border-bottom: 1px solid #b2b2b2;
}

.Search-btn {
  position: relative;
  max-width: 100%;
}

.bx.bx-search {
  position: absolute;
  top: 70px;
  right: 70px;
  font-size: 20px;
}
.right-bottom {
  padding: 44px;
  border-bottom: 1px solid #b2b2b2;
  /* border: 1px solid #b2b2b2;/ */
}
.right-bottom h2 {
  margin-bottom: 30px;
  padding-bottom: 8px;
  display: inline-block;
  font-size: 22px;
  font-weight: 700;
  color: #000;
  text-transform: uppercase;
  border-bottom: 3px solid #000;
}

.right-bottom ul {
  list-style-type: none;
}
.right-bottom ul li {
  margin: 0 0 30px;
  position: relative;
  line-height: 1.5;
  display: flex;
}
.right-bottom ul li a {
  text-decoration: none;
  color: #000;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}
.right-bottom img {
  border-radius: 100%;
  width: 100px;
  max-width: 100%;
  margin-right: 10px;
  margin-bottom: 6px;
}

.usable {
  display: flex;
  flex-direction: column;
}
.usable span {
  padding: 8px 22px;
  color: #000;
  margin: 10px 0px;
  width: fit-content;
  line-height: 20px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 36px;
  background: #d8ff36;
}

.right-bottom ol {
  list-style-type: none;
}
.right-bottom ol li {
  margin-bottom: 15px;
  line-height: 1.3;
  font-size: 18px;
  font-weight: 400;
}

.right-bottom ol li a {
  text-decoration: none;
  color: black;
  font-weight: 700;
  position: relative;
}
.right-bottom ol li a::before {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: black;
  transform: scaleX(0);
  transition: all 0.3s ease-out;
  transform-origin: bottom right;
}
.right-bottom ol li a:hover::before {
  transform: scaleX(1.5);
  width: 100%;
}

#jan li a {
  font-size: 18px;
  font-weight: 400;
  position: relative;
}

#jan li a::before {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: black;
  transform: scaleX(0);
  transition: all 0.3s ease-out;
  transform-origin: bottom right;
}
#jan li a:hover::before {
  transform: scaleX(1);
  width: 100%;
}

.tags {
  margin: 5px 0 0;
}
.tags a {
  text-decoration: none;
  text-transform: capitalize;
  font-size: 15px;
  line-height: 1.7;
  font-weight: 700;
  color: black;
  margin-right: 5px;
  margin-bottom: 10px;
  padding: 14px 25px;
  display: inline-block;
  background: #d8ff36;
  border: none;
  border-radius: 50px;
}
@media screen and (min-width: 993px) {
  .business {
    display: flex;
  }
  .business-left {
    width: 66%;
  }
  .business-right {
    width: 33%;
  }
  .business-item-img img {
    padding-right: 13px;
  }
}
@media screen and (min-width: 767px) and (max-width: 992px) {
  .business {
    display: flex;
    flex-direction: column;
  }
  .business-left {
    width: 100%;
    max-width: 100%;
  }
  .business-right {
    width: 100%;
    max-width: 100%;
  }
}

@media screen and (max-width: 767px) {
  .business {
    display: flex;
    flex-direction: column;
  }
  .business-left {
    width: 100%;
    max-width: 100%;
  }
  .business-right {
    width: 100%;
    max-width: 100%;
    padding-left: 0px;
    padding-right: 0px;
  }
  .business-item-img img {
    height: 280px;
  }
  .blog-content {
    padding-top: 30px;
  }
  .right-bottom {
    padding: 13px;
  }

  .april1 h5 {
    font-size: 26px;
  }
  .april1 p {
    font-size: 18px;
  }
  .date1 {
    margin-top: 0px;
  }
}
/* =========================================================== */
/* contact us */

.contact {
  padding-top: 140px;
  padding-bottom: 140px;
  padding-left: 10px;
  padding-right: 10px;
  margin-left: auto;
  margin-right: auto;
  max-width: 1318px;
}

.contact-form {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

.form-left {
  width: 55%;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 40px;
}

.form-left h4 {
  font-size: 30px;
  font-weight: 600;
  margin: 0 0 15px;
}
.form-left h5 {
  padding-bottom: 40px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.7;
}

.form-1 {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.form-1 p {
  margin: 0 0 15px;
}
input {
  padding: 0 30px;
  display: block;
  width: 100%;
  height: 62px;
  font-size: 16px;
  color: #000;
  font-weight: 400;
  outline: none;
  border: 1px solid #b2b2b2;
  border-radius: 62px;
}
textarea {
  font-family: "Epilogue", sans-serif;
  font-size: 18px;
  font-weight: 400;
  height: 125px;
  padding: 20px 30px;
  width: 100%;
  outline: none;
  border: 1px solid #b2b2b2;
  border-radius: 31px;
}

.form-btn {
  font-size: 16px;
  font-weight: 700;
  font-family: "Epilogue", sans-serif;
  background-color: #000;
  color: #fff;
  height: 60px;
  border-radius: 66px;
  padding: 0 30px;
  border: none;
}

.form-right {
  width: 40%;
}
.form-right-content {
  position: relative;
  background: #000;
  color: #fff;
  padding: 50px;
}

.form-right-content::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  bottom: 10px;
  border: 1px solid #fff;
}

.form-right-content > ul > li {
  padding-bottom: 30px;
  margin-bottom: 30px;
  border-bottom: 2px solid #3e3e3e;
}
.form-right-content ul li {
  list-style-type: none;
}
.form-right-content ul li h5 {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 15px;
  line-height: 1.2;
}
.form-right-content ul li p {
  font-size: 18px;
  font-weight: 400;
  color: #fff;
  line-height: 1.7;
}
.form-right-content ul li a {
  text-decoration: none;
  color: #fff;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.7;
  position: relative;
}
.form-right-content ul li a::before {
  content: "";
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 1px;
  background-color: #fff;
  transform: scaleX(0);
  transition: all 0.4s;
  /* transform-origin: bottom right; */
}
.form-right-content ul li a:hover::before {
  transform: scaleX(1);
  width: 100%;
}

.form-icon {
  margin-top: 15px;
}
.social-footer1 ul li {
  margin-right: 4px;
  display: inline-block;
}
.social-footer1 ul li a {
  position: relative;
  text-decoration: none;
  display: flex;
  width: 70px;
  height: 70px;
  border: 1px solid #3e3e3e;
  border-radius: 70px;
  align-items: center;
  justify-content: center;
  font-size: 27px;
  font-weight: 700;
  color: #666;
}
.social-footer1 ul li a i {
  position: relative;
  font-weight: 400;
}

.social-footer1 ul li a::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: #d8ff36;
  transform: scale(0);
  transition: all 0.4s ease-in-out;
}

.social-footer1 ul li a::before {
  animation: 2s ease;
}
.social-footer1 ul li a:hover::before {
  transform: scale(0.8);
}
.social-footer1 a:hover {
  color: #000;
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .contact-form {
    display: flex;
    flex-direction: column;
  }
  .form-left {
    width: 100%;
  }
  .form-right {
    width: 100%;
  }
  .form-1 {
    width: 100%;
  }
  .contact {
    padding-bottom: 80px;
  }
}
@media screen and (max-width: 767px) {
  .contact {
    padding-top: 120px;
    padding-bottom: 90px;
  }
  .contact-form {
    display: flex;
    flex-direction: column;
  }
  .form-left {
    width: 100%;
    padding-bottom: 30px;
  }
  .form-left h4 {
    font-size: 26px;
  }
  .form-right {
    width: 100%;
  }
  .form-1 {
    width: 100%;
  }
}

iframe {
  width: 100%;
  height: 450px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 140px;
}
@media screen and (max-width: 768px) {
  iframe {
    padding-bottom: 80px;
  }
}