:root {
  --grid-color: #0000000c;
  --grid-size: 20px 20px;
}

::-webkit-scrollbar {
  width: 0.8rem;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background-image: linear-gradient(#f1f1f1, #050062);
  border-radius: 1rem;
  border: 3px solid transparent;
  background-clip: content-box;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  transform: scale(1);
  background: #242424;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
}

* {
  font-family: "Baloo Bhaijaan 2", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

html body {
  width: 100%;
  height: 100%;
}
body {
  overflow-x: hidden;
}

/* Main Section Start*/

.hero-container {
  background: #fee100;
  background: url("Assets/courses-detail-noise-bg.webp") no-repeat,
    radial-gradient(circle, #002196 0%, rgba(0, 0, 0, 1) 90%);
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  /* z-index: 1; */
  overflow: hidden;
  /* position: fixed; */
}

.hero-container .hero-content {
  max-width: 1200px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-container .hero-content h1 {
  font-family: "Anton", sans-serif;
  font-size: 22rem;
  font-weight: 800;
  color: rgb(255, 255, 255);
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
  letter-spacing: 10px;
  will-change: transform;
}

/* Main Section End */

/* Header Section Start */

header {
  max-width: 550px;
  margin: 20px auto;
  position: sticky;
  top: 10px;
  z-index: 999;
  /* margin-top: 100vh; */
  backdrop-filter: blur(10px);
  border-radius: 50px;
  padding: 10px;
  background-color: #74727a83;
  /* margin-bottom: 30px; */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.7);
}

header .navbar {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-evenly;
  position: relative;
  list-style: none;
}

header .navbar a {
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.8rem;
  text-decoration: none;
  color: #fafaff;
  position: relative;
  z-index: 1;
  display: block;
  padding: 7px 0;
}

header .dropdown {
  width: 270px;
  display: flex;
  gap: 8px;
  flex-direction: column;
  position: absolute;
  top: 60px;
  list-style: none;
  background-color: #050062;
  padding: 20px;
  border-radius: 8px;
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 0;
  visibility: hidden;
  box-shadow: 10px 10px 20px #000;
}

header .dropdown a {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.5rem;
  padding: 10px;
  transition: color 0.3s;
}

.dropdown a:hover {
  background-color: #f5f5f5;
  color: #000000fd;
  border-radius: 40px;
}

li:hover > .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(-10px);
}

.navbar span {
  position: absolute;
  background-color: rgb(2, 6, 22);
  align-self: center;
  width: 135px;
  height: 100%;
  top: 0;
  left: 27px;
  border-radius: 40px;
  transition: left 0.4s ease-in-out;
  pointer-events: none;
}

li:nth-child(1):hover ~ span {
  left: 27px;
}

li:nth-child(2):hover ~ span {
  left: 185px;
}

li:nth-child(3):hover ~ span {
  left: 343px;
  width: 160px;
}

/* Header Section End */

/* Section1 Start */

.section1 {
  /* z-index: 2; */
  position: relative;
  background-color: white;
  background-image: linear-gradient(
      to right,
      var(--grid-color) 1px,
      transparent 1px
    ),
    linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px);
  background-size: var(--grid-size);
  overflow: hidden;
}

.section1 .container-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 1200px;
  /* height: 100vh; */
  margin: 0 auto;
  padding-top: 50px;
  z-index: 2;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}

.section1 .container-content #name-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 0;
}

.section1 .container-content #name-title h1 {
  font-size: 50px;
  color: #000;
  font-weight: 600;
}

.section1 .container-content #name-title h1 span {
  color: rgb(254, 225, 0);
  font-weight: 900;
}

.section1 .container-content #name-title h2 {
  font-size: 4rem;
  margin-top: -18px;
  line-height: 4rem;
  text-align: center;
  font-weight: 900;
}

.inner-container {
  display: flex;
  justify-content: space-between;
  align-items: start;
  /* column-gap: 500px; */
  width: 100%;
  margin-top: 50px;
}

.inner-content {
  width: 50%;
  display: flex;
  flex-direction: column;
  /* justify-content: end; */
}

.inner-content p {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.5rem;
  color: #000000c5;
  width: 400px;
  margin-top: 20px;
}

.inner-content #client-no {
  font-weight: 700;
  font-size: 2rem;
  line-height: 2rem;
  margin-top: 20px;
  margin-bottom: 10px;
}

.inner-content #client-serve {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.7rem;
}

#inner-content hr {
  height: 3px;
  width: 235px;
  border: none;
  background-color: #000000;
  margin-top: 10px;
  align-self: flex-end;
}

.right-icon-div {
  display: flex;
  flex-direction: row-reverse;
}

.inner-content .client-exp {
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 2rem;
  margin-top: 20px;
  margin-bottom: 10px;
  text-align: end;
}

.inner-content .client-serve {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.7rem;
  text-align: end;
}

.section1 #button-element {
  font-size: 25px;
  border: 1px solid #000;
  border-radius: 50px;
  padding: 1px 25px;
  background: none;
}

.image-container {
  display: flex;
  flex-direction: column;
  margin-top: -380px;
  justify-content: center;
  align-items: center;
}

.image-container img {
  width: 60%;
  filter: drop-shadow(0 -5px 30px rgba(14, 13, 13, 0.795));
}

.image-container div {
  display: flex;
  margin-top: -90px;
  margin-bottom: 25px;
  justify-content: center;
  padding: 9px;
  background-color: aliceblue;
  max-width: 250px;
  align-items: center;
  border-radius: 35px;
  position: relative;
  z-index: inherit;
  border: none;
  filter: drop-shadow(0 0 20px rgba(255, 230, 88, 0.589));
}

.image-container div button {
  background-color: rgb(255, 255, 255);
  font-size: 25px;
  color: #fff;
  font-weight: 500;
  align-items: center;
  border: 1px solid;
  padding: 1px 25px;
  border-radius: 25px;
  background-color: rgb(2, 6, 22);
  cursor: pointer;
}
#name-title .name-anmi {
  opacity: 0;
  transform: translateY(-110%);
}

#name-title .name-anmi.visible {
  animation: SlideDown 0.6s ease forwards;
  -webkit-animation: SlideDown 0.6s ease forwards;
}

@keyframes SlideDown {
  0% {
    opacity: 0;
    transform: translateY(-110%);
    -webkit-transform: translateY(-110%);
    -moz-transform: translateY(-110%);
    -ms-transform: translateY(-110%);
    -o-transform: translateY(-110%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -o-transform: translateY(0%);
  }
}

#name-title .domain-anmi {
  opacity: 0;
  transform: scale(0.5);
}

#name-title .domain-anmi.visible {
  animation: ZoomInText 0.6s ease forwards;
  -webkit-animation: ZoomInText 0.6s ease forwards;
}

@keyframes ZoomInText {
  0% {
    opacity: 0;
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
  }
}

/* Section1 End */

/* Section2 Start */

.section2 .progress-circle {
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  transition: background 0.3s ease-out;
  --size: 55px;
  --p: 0;
  --c: #ffcb01;

  background: conic-gradient(var(--c) calc(var(--p) * 1%), #e6e6e6 0);
}

.section2 .progress-value {
  z-index: 999;
  position: absolute;
  color: #000000fd;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1rem;
}

.section2 .progress-circle::before {
  position: absolute;
  width: 40px;
  height: 40px;
  content: "";
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
}

.section2 {
  background: url("Assets/sec2-top-background.svg") top no-repeat,
    url("Assets/sec2-top-background1.svg") bottom no-repeat,
    linear-gradient(
      180deg,
      rgba(2, 0, 36, 1) 0%,
      rgba(0, 33, 150, 1) 50%,
      rgb(0, 32, 142) 100%
    );
  padding: 70px 0;
  /* z-index: 2; */
  position: relative;
}

.main-container {
  max-width: 1300px;
  margin: 0 auto;
}

.section2 .text-container {
  display: flex;
  justify-content: center;
  align-items: center;
  /* overflow: hidden; */
}

.section2 .text-container .text-box {
  width: 50%;
}

.section2 .text-container .text-box h2 {
  font-size: 4.5rem;
  color: rgb(254, 225, 0);
  font-weight: 900;
  line-height: 4.5rem;
}

.section2 .text-container .text-box h5 {
  font-family: "Sacramento", cursive;
  font-size: 3rem;
  color: #fff;
  margin-top: -15px;
  line-height: 3rem;
  padding-left: 370px;
  transform: rotate(-5deg);
}

.section2 .text-container .loti-icon {
  width: 20%;
  position: relative;
  bottom: 30px;
  transform: rotate(-70deg) !important;
}

.section2 .text-container .image-box {
  width: 30%;
  margin: 0 auto;
}

.section2 .text-container .image-box img {
  margin-top: -140px;
  margin-bottom: -30px;
  width: 100%;
}

.section2 .box-container {
  display: flex;
  color: #fff;
  gap: 20px;
  width: 100%;
  margin-bottom: 80px;
}

.section2 .inner-box-container {
  display: flex;
  width: 75%;
  flex-direction: column;
  row-gap: 20px;
}

#inner1 {
  display: flex;
  column-gap: 20px;
  width: 100%;
}

#inner2 {
  display: flex;
  column-gap: 20px;
  width: 100%;
}

.section2 .inner-box2-container {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 25%;
}

#tab-hide-container {
  display: none;
}

.section2 .main-container .box-container .inner-box-content {
  backdrop-filter: blur(5px);
  background-color: rgba(96, 96, 96, 0.4);
  border: 1px solid;
  display: flex;
  flex-direction: column;
  padding: 25px;
  border-radius: 10px;
  width: 40%;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
  border: 2px solid rgb(254, 225, 0);
}

.section2 .main-container .box-container .inner-box-content h3 {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 2.2rem;
  margin-bottom: 20px;
  color: rgb(254, 225, 0);
}

.section2 .main-container .box-container .inner-box-content span {
  font-size: 1.8rem;
  font-weight: 500;
  margin-bottom: 7px;
  line-height: 1.8rem;
}

.section2 .main-container .box-container .inner-box2-content {
  backdrop-filter: blur(5px);
  background-color: rgba(96, 96, 96, 0.4);
  border: 1px solid;
  display: flex;
  flex-direction: column;
  padding: 25px;
  border-radius: 10px;
  width: 60%;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
  border: 2px solid rgb(254, 225, 0);
}

.section2 .main-container .box-container .inner-box2-content h3 {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 2.2rem;
  margin-bottom: 20px;
  color: rgb(254, 225, 0);
}

.section2 .main-container .box-container .inner-box2-content .btech {
  font-size: 1.8rem;
  font-weight: 500;
  margin-bottom: 5px;
  line-height: 1.8rem;
}

.section2 .main-container .box-container .inner-box2-content .college {
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.3rem;
}

.section2 .main-container .box-container .inner-box2-content .diploma {
  font-size: 1.8rem;
  font-weight: 500;
  margin-top: 18px;
  margin-bottom: 5px;
  line-height: 1.8rem;
}

.section2 .main-container .inner-box2-container .box1-content {
  backdrop-filter: blur(5px);
  background-color: rgba(96, 96, 96, 0.4);
  border: 1px solid;
  display: flex;
  flex-direction: column;
  padding: 25px;
  border-radius: 10px;
  width: 100%;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
  border: 2px solid rgb(254, 225, 0);
}

.section2 .main-container .inner-box2-container .box1-content h3 {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 2.2rem;
  margin-bottom: 30px;
  color: rgb(254, 225, 0);
}

.section2 .main-container .inner-box2-container .box1-content .progress-box {
  width: 100%;
  position: relative;
  padding-left: 30px;
}

.section2 .main-container .inner-box2-container .progress-box .exp-box::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 100%;
  background-color: rgb(250, 250, 250);
  left: 0;
  bottom: 0;
  border-radius: 20px;
  height: 0;
}

.section2
  .main-container
  .inner-box2-container
  .progress-box.start-animation
  .exp-box::before {
  animation: moveup 4s ease forwards;
}

@keyframes moveup {
  0% {
    height: 0%;
  }
  100% {
    height: 100%;
  }
}

.section2 .main-container .inner-box2-container .progress-box .exp-box,
.exp-item {
  display: flex;
  flex-direction: column;
}

.section2 .main-container .inner-box2-container .progress-box .exp-box {
  row-gap: 10px;
  width: 100%;
}

.section2
  .main-container
  .inner-box2-container
  .progress-box
  .exp-item
  .circle {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: rgb(226, 200, 2);
  border-radius: 50%;
  left: -5px;
  box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.9);
  opacity: 0;
  /* animation: zoomAndMoveUp 0.9s ease forwards; */
}

.section2
  .main-container
  .inner-box2-container
  .progress-box.start-animation
  .exp-item
  .circle {
  animation: zoomAndMoveUp 0.9s ease forwards;
  opacity: 1;
}

@keyframes zoomAndMoveUp {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1) translateY(-50%);
  }
}

.section2
  .main-container
  .inner-box2-container
  .progress-box.start-animation
  .exp-item
  .delay3 {
  animation-delay: 2.9s;
}

.section2
  .main-container
  .inner-box2-container
  .progress-box.start-animation
  .exp-item
  .delay2 {
  animation-delay: 1.5s;
}

.section2
  .main-container
  .inner-box2-container
  .progress-box.start-animation
  .exp-item
  .delay1 {
  animation-delay: 1s;
}

.section2
  .main-container
  .inner-box2-container
  .progress-box.start-animation
  .exp-item
  .delay0 {
  animation-delay: 0.5s;
}

.section2
  .main-container
  .inner-box2-container
  .progress-box.start-animation
  .exp-item {
  border: 1px solid #fff;
  padding: 10px;
  border-radius: 10px;
}

.section2 .main-container .inner-box2-container .progress-box .exp-item .title {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.6rem;
  margin-bottom: 10px;
}

.section2 .main-container .inner-box2-container .progress-box .exp-item .desc {
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.2rem;
  margin-bottom: 5px;
}

#inner2 .inner2-box1-container {
  backdrop-filter: blur(5px);
  background-color: rgba(96, 96, 96, 0.4);
  border: 2px solid rgb(254, 225, 0);
  display: flex;
  flex-direction: column;
  padding: 25px;
  border-radius: 10px;
  width: 75%;
  /* margin-top: 20px; */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

#inner2 .inner2-box1-container h3 {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 2.2rem;
  margin-bottom: 25px;
  color: rgb(254, 225, 0);
}

#inner2 .inner2-box1-container .skill-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 30px;
}

.skill-image {
  width: 30%;
}

#image-skill {
  width: 55px;
}

#inner2 .inner2-box1-container .skill-container .skill-item-col {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
  width: 50%;
}

#inner2 .inner2-box1-container .skill-container .skill-item {
  display: flex;
  align-items: start;
  column-gap: 10px;
  width: 100%;
}

#inner2 .inner2-box1-container .skill-container .skill-item .text-box-skills {
  display: flex;
  flex-direction: column;
  align-items: start;
  width: 80%;
  row-gap: 5px;
}

#inner2
  .inner2-box1-container
  .skill-container
  .skill-item
  .text-box-skills
  .head {
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.8rem;
  letter-spacing: 0.1rem;
}

#inner2
  .inner2-box1-container
  .skill-container
  .skill-item
  .text-box-skills
  span {
  font-size: 1.2rem;
  line-height: 1.3rem;
  /* letter-spacing: 0.1rem; */
  font-weight: 300;
}

#inner2 .inner2-box2-container {
  display: flex;
  flex-direction: column;
  width: 25%;
  /* margin-top: 20px; */
  row-gap: 20px;
}

#inner2 .inner2-box1-content {
  backdrop-filter: blur(5px);
  background-color: rgba(96, 96, 96, 0.4);
  display: flex;
  flex-direction: column;
  padding: 23px;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
  border: 2px solid rgb(254, 225, 0);
  /* width: 100%; */
}

#inner2 .inner2-box1-content h3 {
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.8rem;
  margin-bottom: 25px;
  color: rgb(254, 225, 0);
}

#inner2 .inner2-box1-content .hobbi-item-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hobbi-item {
  display: flex;
  align-items: center;
  gap: 10px;
  /* flex: 1; */
}

#hobbi-img {
  width: 30px;
  border-radius: 5px;
}

#inner2 .inner2-box1-content .hobbi-item-container .hobbi-item span {
  font-size: 20px;
  font-weight: 500;
  line-height: 23px;
}

#inner2 .inner2-box2-content {
  backdrop-filter: blur(5px);
  background-color: rgba(96, 96, 96, 0.4);
  display: flex;
  flex-direction: column;
  padding: 23px;
  border-radius: 10px;
  width: 100%;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
  border: 2px solid rgb(254, 225, 0);
}

#inner2 .inner2-box2-content .language-item {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

#inner2 .inner2-box2-content h3 {
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.8rem;
  margin-bottom: 25px;
  color: rgb(254, 225, 0);
}

#inner2 .inner2-box2-content .language-item span {
  font-size: 18px;
  font-weight: 500;
  line-height: 21px;
}

#inner2 .inner2-box2-content .language-item hr {
  height: 18px;
  width: 3px;
  border: none;
  background-color: #fff;
}

.inner-box2-container .box2-content {
  backdrop-filter: blur(5px);
  background-color: rgba(96, 96, 96, 0.4);
  border: 1px solid;
  display: flex;
  flex-direction: column;
  padding: 20px;
  border-radius: 10px;
  max-width: 100%;
  width: 100%;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
  border: 1px solid rgb(254, 225, 0);
}

.inner-box2-container .box2-content h3 {
  font-size: 2rem;
  font-weight: 500;
  line-height: 37px;
  margin-bottom: 15px;
  color: rgb(254, 225, 0);
}

.inner-box2-container .box2-content .phone {
  margin-bottom: 10px;
  font-size: 23px;
  line-height: 22px;
}

.inner-box2-container .box2-content .phone i {
  background-color: rgb(254, 225, 0);
  padding: 5px;
  border-radius: 5px;
  color: #000;
  margin-right: 8px;
  font-size: 14px;
}

.inner-box2-container .box2-content .email {
  font-size: 20px;
  line-height: 22px;
}

.inner-box2-container .box2-content .email i {
  background-color: rgb(254, 225, 0);
  padding: 5px;
  border-radius: 5px;
  color: #000;
  margin-right: 8px;
  font-size: 14px;
}

/* Section2 End */

/* Section3 Start */

#section3 {
  background: url("Assets/sec2-top-background2.svg") top no-repeat,
    url("Assets/Sec2-bottom-background.svg") bottom no-repeat,
    linear-gradient(
      0deg,
      rgba(2, 0, 36, 1) 0%,
      rgba(0, 33, 150, 1) 50%,
      rgb(0, 32, 142) 98%
    );
  /* background-size: contain; */
  padding-top: 40px;
  padding-bottom: 70px;
  position: relative;
  /* z-index: 2; */
  overflow: hidden;
}

#section3 .main-container {
  max-width: 1350px;
  margin: 0 auto;
}

#section3 .heading-container {
  display: flex;
  padding: 10px;
  gap: 20px;
}

#section3 .main-container .heading-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
}

#section3 .heading-container h1 {
  font-size: 4.5rem;
  line-height: 4.5rem;
  color: rgb(254, 225, 0);
  font-weight: 900;
}

#section3 .heading-container h5 {
  font-size: 48px;
  line-height: 48px;
  font-family: "Sacramento", cursive;
  font-weight: 400;
  color: #fff;
  padding-left: 27px;
  margin-bottom: -28px;
  transform: rotate(-5deg);
}

#section3 .heading-container .loti-icon {
  position: relative;
  top: 40px;
  transform: rotate(-70deg);
}

#section3 .table-container {
  backdrop-filter: blur(10px);
  background-color: rgba(96, 96, 96, 0.4);
  border: 2px solid rgb(254, 225, 0);
  display: grid;
  grid-template-columns: auto auto;
  padding: 25px;
  border-radius: 16px;
  gap: 25px;
  margin-top: 30px;
  align-content: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

#section3 .table-container .table-item {
  display: flex;
  align-items: center;
  /* justify-content: center; */
}

#section3 .table-container .table-item .no-text {
  font-size: 5rem;
  font-weight: 700;
  /* color: rgb(254,225,0); */
  font-family: "Oswald", sans-serif;
  margin-right: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: transparent;
  -webkit-text-stroke: 2px #fff;
  text-stroke: 2px #fff;
}

#section3 .table-container .table-item h3 {
  font-size: 4.2rem;
  line-height: 4rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

#section3 .table-container .table-item .text-box {
  display: flex;
  flex-direction: column;
}

#section3 .table-container .table-item .ani-text {
  font-family: "Sacramento", cursive;
  font-size: 48px;
  font-weight: 500;
  color: rgb(254, 225, 0);
  margin-top: -20px;
  line-height: 48px;
  padding-left: 290px;
  transform: rotate(-5deg);
}

#section3 .table-container .table-item .ani-text1 {
  font-family: "Sacramento", cursive;
  font-size: 48px;
  font-weight: 500;
  color: rgb(254, 225, 0);
  margin-top: -20px;
  line-height: 48px;
  padding-left: 280px;
  transform: rotate(-5deg);
}

#section3 .table-container .table-item .ani-text2 {
  font-family: "Sacramento", cursive;
  font-size: 48px;
  font-weight: 500;
  color: rgb(254, 225, 0);
  margin-top: -20px;
  line-height: 48px;
  padding-left: 280px;
  transform: rotate(-5deg);
}

#section3 .table-container .table-item .ani-text3 {
  font-family: "Sacramento", cursive;
  font-size: 48px;
  font-weight: 500;
  color: rgb(254, 225, 0);
  margin-top: -20px;
  line-height: 48px;
  padding-left: 170px;
  transform: rotate(-5deg);
}

/* Section3 End */

/* Section4 Start */

#section4 {
  background: #fafaff url("Assets/master-bg-layer.png") repeat top;
  padding: 70px 0;
  position: relative;
  /* z-index: 2; */
  overflow: hidden;
}

#section4 .container {
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* align-items: center; */
}

#section4 .heading-container {
  display: flex;
  flex-direction: column;
}

#section4 .square-box {
  background-color: rgb(254, 225, 0);
  display: inline-block;
  width: 60px;
  height: 60px;
  border-radius: 5px;
  rotate: 30deg;
}

#section4 .square-box.visible {
  animation: RotateBoxSec4 1.2s ease-out forwards;
  -webkit-animation: RotateBoxSec4 1.2s ease-out forwards;
}

@keyframes RotateBoxSec4 {
  0% {
    opacity: 0;
    transform: translateX(-110%) rotate(-360deg);
    -webkit-transform: translateX(-110%) rotate(-360deg);
    -moz-transform: translateX(-110%) rotate(-360deg);
    -ms-transform: translateX(-110%) rotate(-360deg);
    -o-transform: translateX(-110%) rotate(-360deg);
  }
  100% {
    opacity: 1;
    transform: translateX(0) rotate(0);
    -webkit-transform: translateX(0) rotate(0);
    -moz-transform: translateX(0) rotate(0);
    -ms-transform: translateX(0) rotate(0);
    -o-transform: translateX(0) rotate(0);
    margin-left: 280px;
    margin-top: 10px;
  }
}

#section4 .text-container {
  margin-top: -29px;
  z-index: 998;
  text-align: center;
}

#section4 .text-container h2 {
  margin-bottom: -15px;
  font-size: 4.5rem;
  color: #000000;
  font-weight: 900;
  line-height: 4.5rem;
}

#section4 .text-container span {
  font-family: "Sacramento", cursive;
  font-size: 48px;
  font-weight: 500;
  color: rgb(254, 225, 0);
  line-height: 48px;
  margin-left: 620px;
  display: inline-block;
  transform: rotate(-5deg);
}

#section4 .short-desc-container {
  display: flex;
  justify-content: start;
  align-items: center;
  margin-bottom: 50px;
}

#section4 .short-desc-container #loti-icon {
  transform: scaleX(-1);
  rotate: 60deg;
  /* top: 20px; */
}

#section4 .short-desc-container .no-text {
  font-size: 8rem;
  font-weight: 700;
  font-family: "Oswald", sans-serif;
  margin-right: 70px;
  display: inline-block;
  justify-content: center;
  align-items: center;
  color: transparent;
  -webkit-text-stroke: 2px #050062;
  text-stroke: 2px #fff;
}

#section4 .short-desc-container .desc-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  row-gap: 20px;
}

#section4 .short-desc-container .short-desc {
  font-size: 1.4rem;
  font-weight: 500;
  max-width: 650px;
  margin: 0 auto;
  line-height: 30px;
  text-align: center;
  color: #000000;
}

#section4 .web-dev-container {
  display: flex;
  flex-direction: column;
  gap: 70px;
}

#section4 .container .image-box {
  display: flex;
  justify-content: center;
  align-items: center;
}

#section4 .image-box .desktop-image-container {
  width: 65%;
  display: flex;
  flex-direction: column;
}

#section4 .desktop-image-div {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

#section4 .image-box .desktop-image-container .desktop {
  width: 100%;
  position: relative;
  z-index: 5;
  overflow: hidden;
}

#section4 .desktop-image-div .onesave {
  position: absolute;
  width: 77%;
  height: 61%;
  overflow: hidden;
  position: absolute;
  left: 12%;
  top: 6%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  object-fit: cover;
  object-position: top center;
  transition: object-position 15s ease-out;
  -webkit-transition: object-position 15s ease-out;
  -moz-transition: object-position 15s ease-out;
  -ms-transition: object-position 15s ease-out;
  -o-transition: object-position 15s ease-out;
}

#section4 .desktop-image-div:hover .onesave {
  object-position: bottom center;
}

#section4 .image-box .mobile-image-container {
  width: 35%;
  display: flex;
  flex-direction: column;
}

#section4 .mobile-image-div {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

#section4 .image-box .mobile-image-container .mobile {
  width: 100%;
  position: relative;
  z-index: 5;
  overflow: hidden;
}

#section4 .onesave-mobile {
  position: absolute;
  width: 62%;
  height: 94%;
  overflow: hidden;
  position: absolute;
  left: 19%;
  top: 3%;
  object-fit: cover;
  object-position: top center;
  transition: object-position 19s ease-out;
  -webkit-transition: object-position 19s ease-out;
  -moz-transition: object-position 19s ease-out;
  -ms-transition: object-position 19s ease-out;
  -o-transition: object-position 19s ease-out;
}

#section4 .mobile-image-div:hover .onesave-mobile {
  object-position: bottom center;
}

#section4 .image-box .info-box {
  display: flex;
  flex-direction: column;
  /* color: #000; */
  gap: 20px;
  margin-top: 20px;
}

#section4 .text-rev .info-box .tech-use {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  flex-wrap: wrap;
}

#section4 .image-box .info-box .tech-use .tech-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background-color: #00000027;
  backdrop-filter: blur(5px);
  padding: 8px 12px;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
  transition: 0.3s ease;
  -webkit-transition: 0.3s ease;
  -moz-transition: 0.3s ease;
  -ms-transition: 0.3s ease;
  -o-transition: 0.3s ease;
}

#section4 .image-box .info-box .tech-use .tech-item:hover {
  box-shadow: 0 0 50px #0000008a;
}

#section4 .image-box .info-box .tech-use span:nth-child(1) {
  width: 8px;
  height: 8px;
  background-color: #002196;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

#section4 .image-box .info-box .tech-use span:nth-child(2) {
  font-weight: 600;
  font-size: 1rem;
  line-height: 1rem;
  color: #000;
}

#section4 .text-rev .info-box .client-url .url-div {
  display: flex;
  float: right;
  background-color: #00000027;
  backdrop-filter: blur(5px);
  color: #000;
  padding: 8px 12px;
  font-size: 1rem;
  border-radius: 20px;
  cursor: pointer;
}

#section4 .image-box .info-box .client-url .url-div:hover i,
#section4 .image-box .info-box .client-url .url-div:hover a {
  color: #005eff;
}

#section4 .image-box .info-box .client-url a {
  text-decoration: none;
  color: #000;
  margin-left: 5px;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1rem;
}

#section4 .mobile-rev .info-box .tech-use {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  flex-wrap: wrap;
}

#section4 .mobile-rev .info-box .client-url .url-div {
  display: flex;
  float: left;
  background-color: #00000027;
  backdrop-filter: blur(5px);
  color: #000;
  padding: 8px 12px;
  font-size: 1rem;
  border-radius: 20px;
  cursor: pointer;
}

/* <================= Section4 Animatiom ===================> */

#section4 .image-box .desktop-image-container,
#section4 .image-box .mobile-image-container {
  opacity: 0;
  /* will-change: opacity; */
}

#section4 .image-box .desktop-image-container.visible,
#section4 .image-box .mobile-image-container.visible {
  animation: FadeINSec4 0.8s ease-out forwards;
  -webkit-animation: FadeINSec4 0.8s ease-out forwards;
}

@keyframes FadeINSec4 {
  from {
    opacity: 0; /* Start fully transparent */
  }
  to {
    opacity: 1; /* End fully opaque */
  }
}

#section4 .text-rev .mobile-image-container.visible {
  animation-delay: 0.4s;
}

#section4 .text-rev .info-box .tech-item,
.url-div {
  opacity: 0;
}

#section4 .text-rev .info-box .tech-use .tech-item.visible {
  animation: slide-in-right 0.9s ease-out forwards;
  opacity: 0;
  -webkit-animation: slide-in-right 0.9s ease-out forwards;
}

#section4 .text-rev .info-box .client-url .url-div.visible {
  animation: slide-in-right 0.9s ease-out forwards;
  opacity: 0;
  -webkit-animation: slide-in-right 0.9s ease-out forwards;
}

@keyframes slide-in-right {
  from {
    transform: translateX(-100%);
    opacity: 0;
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
  }
}

#section4 .text-rev .info-box .tech-use .tech-item.visible:nth-child(4) {
  animation-delay: 0.2s;
}

#section4 .text-rev .info-box .tech-use .tech-item.visible:nth-child(3) {
  animation-delay: 0.4s;
}

#section4 .text-rev .info-box .tech-use .tech-item.visible:nth-child(2) {
  animation-delay: 0.6s;
}

#section4 .text-rev .info-box .tech-use .tech-item.visible:nth-child(1) {
  animation-delay: 0.8s;
}

#section4 .text-rev .info-box .client-url .url-div.visible {
  animation-delay: 1s;
}

/* ============ mobile rev Animation ============= */

#section4 .mobile-rev .info-box .tech-item,
.url-div {
  opacity: 0;
}

#section4 .mobile-rev .info-box .tech-use .tech-item.visible {
  animation: slide-in-left 0.9s ease-out forwards;
  opacity: 0;
  -webkit-animation: slide-in-left 0.9s ease-out forwards;
}

#section4 .mobile-rev .info-box .client-url .url-div.visible {
  animation: slide-in-left 0.9s ease-out forwards;
  opacity: 0;
  -webkit-animation: slide-in-left 0.9s ease-out forwards;
}

@keyframes slide-in-left {
  from {
    transform: translateX(100%);
    opacity: 0;
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
}
  to {
    transform: translateX(0);
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
  }
}

#section4 .mobile-rev .info-box .tech-use .tech-item.visible:nth-child(1) {
  animation-delay: 0.2s;
}

#section4 .mobile-rev .info-box .tech-use .tech-item.visible:nth-child(2) {
  animation-delay: 0.4s;
}

#section4 .mobile-rev .info-box .tech-use .tech-item.visible:nth-child(3) {
  animation-delay: 0.6s;
}

#section4 .mobile-rev .info-box .tech-use .tech-item.visible:nth-child(4) {
  animation-delay: 0.8s;
}

#section4 .mobile-rev .info-box .client-url .url-div.visible {
  animation-delay: 1s;
}

/* Section4 End */

/* Section5 Start */

#section5 {
  background: #fafaff url("Assets/master-bg-layer.png") repeat top;
  padding-top: 70px;
  position: relative;
  /* z-index: 2; */
  overflow: hidden;
}

/* Section5 End */

/* Section7 Start */

#section7 {
  background-color: #fff;
  padding-top: 70px;
  position: relative;
  /* z-index: 2; */
  background-image: linear-gradient(to right, #0020960e 1px, transparent 1px),
    linear-gradient(to bottom, #0020960e 1px, transparent 1px);
  background-size: 19px 19px;
  overflow: hidden;
}

#section7 .container {
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* align-items: center; */
}

#section7 .heading-container {
  display: flex;
  flex-direction: column;
}

#section7 .square-box {
  background-color: rgb(254, 225, 0);
  display: inline-block;
  width: 60px;
  height: 60px;
  rotate: 30deg;
  border-radius: 5px;
}

#section7 .square-box.visible {
  animation: RotateBoxSce7 1.2s ease-out forwards;
  -webkit-animation: RotateBoxSce7 1.2s ease-out forwards;
}

@keyframes RotateBoxSce7 {
  0% {
    opacity: 0;
    transform: translateX(-110%) rotate(-360deg);
    -webkit-transform: translateX(-110%) rotate(-360deg);
    -moz-transform: translateX(-110%) rotate(-360deg);
    -ms-transform: translateX(-110%) rotate(-360deg);
    -o-transform: translateX(-110%) rotate(-360deg);
  }
  100% {
    opacity: 1;
    transform: translateX(0) rotate(0);
    -webkit-transform: translateX(0) rotate(0);
    -moz-transform: translateX(0) rotate(0);
    -ms-transform: translateX(0) rotate(0);
    -o-transform: translateX(0) rotate(0);
    margin-left: 380px;
    margin-top: 10px;
  }
}

#section7 .text-container {
  margin-top: -29px;
  z-index: 998;
  text-align: center;
}

#section7 .text-container h2 {
  margin-bottom: -15px;
  font-size: 5.5rem;
  color: #000;
  font-weight: 900;
  line-height: 75px;
}

#section7 .text-container span {
  font-family: "Sacramento", cursive;
  font-size: 48px;
  font-weight: 500;
  color: rgb(254, 225, 0);
  line-height: 48px;
  margin-left: 620px;
  display: inline-block;
  transform: rotate(-5deg);
}

#section7 .short-desc-container {
  display: flex;
  justify-content: start;
  align-items: center;
}

#section7 .short-desc-container #loti-icon {
  transform: scaleX(-1);
  rotate: 50deg;
}

#section7 .short-desc-container .no-text {
  font-size: 8rem;
  font-weight: 700;
  font-family: "Oswald", sans-serif;
  margin-right: 70px;
  display: inline-block;
  justify-content: center;
  align-items: center;
  color: transparent;
  -webkit-text-stroke: 2px #050062;
  text-stroke: 2px #000;
}

#section7 .short-desc-container .desc-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  row-gap: 20px;
}

#section7 .short-desc-container .short-desc {
  font-size: 1.4rem;
  font-weight: 500;
  max-width: 650px;
  margin: 0 auto;
  line-height: 30px;
  text-align: center;
  color: #000;
}

#section7 .animate,
.slide,
.slide2,
.slide3,
.slide4 {
  opacity: 0;
}

#section7 .creative-item .animate.visible {
  opacity: 0;
  animation-name: fadeInUp;
  animation-duration: 0.7s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  -webkit-transition: transform 0.9s ease-in-out;
  -moz-transition: transform 0.9s ease-in-out;
  -ms-transition: transform 0.9s ease-in-out;
  -o-transition: transform 0.9s ease-in-out;
}

#section7 .creative-item .delay.visible {
  animation-delay: 0.2s;
}
#section7 .creative-item .delay1.visible {
  animation-delay: 0.4s;
}
#section7 .creative-item .delay2.visible {
  animation-delay: 0.6s;
}
#section7 .creative-item .delay3.visible {
  animation-delay: 0.8s;
}
#section7 .creative-item .delay4.visible {
  animation-delay: 1s;
}
#section7 .creative-item .delay5.visible {
  animation-delay: 1.2s;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
    -webkit-transform: translateY(30px);
    -moz-transform: translateY(30px);
    -ms-transform: translateY(30px);
    -o-transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
  }
}

#section7 .mobile-container .slide.visible,
.slide3.visible {
  animation-name: slideInFromRight;
  animation-duration: 1.2s;
  animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation-fill-mode: forwards;
}

@keyframes slideInFromRight {
  0% {
    opacity: 0;
    transform: translateX(110%);
    -webkit-transform: translateX(110%);
    -moz-transform: translateX(110%);
    -ms-transform: translateX(110%);
    -o-transform: translateX(110%);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
  }
}

#section7 .mobile-container .slide2.visible,
.slide4.visible {
  animation-name: slideInFromLeft;
  animation-duration: 1.2s;
  animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation-fill-mode: forwards;
}

@keyframes slideInFromLeft {
  0% {
    opacity: 0;
    transform: translateX(-110%);
    -webkit-transform: translateX(-110%);
    -moz-transform: translateX(-110%);
    -ms-transform: translateX(-110%);
    -o-transform: translateX(-110%);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
  }
}

#section7 .socialmedia-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  column-gap: 30px;
  z-index: 15;
  margin-bottom: 70px;
}

#section7 .socialmedia-container .creative-container {
  width: 70%;
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}

#section7 .socialmedia-container .creative-item {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 20px;
  place-content: center;
}

#section7 .socialmedia-container .creative-item img {
  width: 100%;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

#section7 .creative-container .client-name-container {
  display: flex;
  flex-direction: column;
}

#section7 .client-detail {
  display: flex;
  align-items: center;
  color: #000;
  justify-content: end;
  flex-direction: row-reverse;
}

#section7 .client-detail .clientname {
  font-weight: 500;
  font-size: 1.2rem;
  margin-right: 10px;
  margin-left: 8px;
}

#section7 .client-name-container .client-detail hr {
  height: 15px;
  width: 3px;
  border: none;
  background-color: #000;
  margin-right: 10px;
}

#section7 .socialmedia-container .mobile-container {
  width: 30%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

#section7 .socialmedia-container .mobile-container .mobile {
  width: 100%;
  z-index: 5;
}

#section7 .background-effect-div1 {
  background-color: #002196;
  width: 60%;
  height: 280px;
  position: absolute;
  top: 16%;
  right: 0px;
  z-index: 10;
  filter: drop-shadow(0px 0px 19px #363636);
}

#section7 .background-effect-div2 {
  background-color: #002196;
  width: 60%;
  height: 280px;
  position: absolute;
  bottom: 54%;
  left: 0px;
  z-index: 10;
  filter: drop-shadow(0px 0px 19px #363636);
}

#section7 .background-effect-div3 {
  background-color: #002196;
  width: 60%;
  height: 280px;
  position: absolute;
  bottom: 33%;
  right: 0px;
  z-index: 10;
  filter: drop-shadow(0px 0px 19px #363636);
}

#section7 .background-effect-div4 {
  background-color: #002196;
  width: 60%;
  height: 280px;
  position: absolute;
  bottom: 10%;
  left: 0px;
  z-index: 10;
  filter: drop-shadow(0px 0px 19px #363636);
}

#section7 .socialmedia-container2 {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  column-gap: 30px;
  z-index: 15;
  max-width: 1300px;
  margin: 0 auto;
}

#section7 .socialmedia-container2 .mobile-container {
  width: 30%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

#section7 .socialmedia-container2 .mobile-container .mobile {
  width: 100%;
  z-index: 5;
}

#section7 .socialmedia-container2 .creative-container {
  width: 70%;
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}

#section7 .socialmedia-container2 .creative-item {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 20px;
  place-content: center;
}

#section7 .socialmedia-container2 .creative-item img {
  width: 100%;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

#section7 .socialmedia-container2 .creative-container .client-name-container {
  display: flex;
  flex-direction: column;
}

#section7 .socialmedia-container2 .client-detail2 {
  display: flex;
  align-items: center;
  color: #000000;
  justify-content: start;
}

#section7 .socialmedia-container2 .client-detail2 .clientname {
  font-weight: 500;
  font-size: 1.2rem;
  margin-right: 10px;
  margin-left: 8px;
}

#section7 .socialmedia-container2 .client-detail2 hr {
  height: 15px;
  width: 3px;
  border: none;
  background-color: #000000;
}

#section7 .socialmedia-container3 {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  column-gap: 30px;
  max-width: 1300px;
  margin: 0 auto;
  z-index: 15;
  padding-top: 70px;
}

#section7 .socialmedia-container3 .creative-container {
  width: 70%;
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}

#section7 .socialmedia-container3 .creative-item {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 20px;
  align-content: center;
}

#section7 .socialmedia-container3 .creative-item img {
  width: 100%;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

#section7
  .background-color-div2
  .socialmedia-container3
  .creative-container
  .client-name-container {
  display: flex;
  flex-direction: column;
}

#section7 .background-color-div2 .client-detail2 {
  display: flex;
  align-items: center;
  color: #000000;
  flex-direction: row-reverse;
}

#section7
  .background-color-div2
  .socialmedia-container3
  .client-detail2
  .clientname {
  font-weight: 500;
  font-size: 1.2rem;
  margin-right: 10px;
  margin-left: 8px;
}

#section7 .background-color-div2 .socialmedia-container3 .client-detail2 hr {
  height: 15px;
  width: 3px;
  border: none;
  background-color: #000000;
  margin-right: 10px;
}

#section7 .socialmedia-container3 .mobile-container {
  width: 30%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

#section7 .socialmedia-container3 .mobile-container .mobile {
  width: 100%;
  z-index: 5;
}

#section7 .socialmedia-container3 .mobile-container .onesave-mobile {
  width: 82%;
  height: 94%;
  overflow: hidden;
  position: absolute;
  left: 9%;
  top: 3%;
  border-radius: 5px;
  object-fit: cover;
  object-position: top center;
  transition: object-position 19s ease-in-out;
}

#section7 .socialmedia-container4 {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  column-gap: 30px;
  max-width: 1300px;
  margin: 0 auto;
  padding: 70px 0;
  z-index: 15;
}

#section7 .socialmedia-container4 .creative-container {
  width: 70%;
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}

#section7 .socialmedia-container4 .creative-item {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 20px;
  align-content: center;
}

#section7 .socialmedia-container4 .creative-item img {
  width: 100%;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

#section7 .socialmedia-container4 .creative-container .client-name-container {
  display: flex;
  flex-direction: column;
}
#section7 .socialmedia-container4 .client-detail3 {
  display: flex;
  align-items: center;
  color: #000000;
  justify-content: start;
}

#section7 .socialmedia-container4 .client-detail3 .clientname {
  font-weight: 500;
  font-size: 1.2rem;
  margin-right: 10px;
  margin-left: 8px;
}

#section7 .socialmedia-container4 .client-detail3 hr {
  height: 15px;
  width: 3px;
  border: none;
  background-color: #000000;
  margin-right: 10px;
}

#section7 .socialmedia-container4 .mobile-container {
  width: 30%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

#section7 .socialmedia-container4 .mobile-container .mobile {
  width: 100%;
  z-index: 5;
}

/* Section7 End */

/* Section8 Start */

#section8 {
  padding: 70px 0;
  background: #002196 url("Assets/client-image-background.png");
  background-size: contain;
  overflow: hidden;
  position: relative;
  /* z-index: 2; */
  overflow: hidden;
}

#section8 .container {
  max-width: 1300px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#section8 .heading-container {
  display: flex;
  flex-direction: column;
}
#section8 .square-box {
  background-color: rgb(254, 225, 0);
  display: inline-block;
  width: 60px;
  height: 60px;
  border-radius: 5px;
  rotate: 30deg;
}

#section8 .square-box.visible {
  animation: RotateBoxSec8 1.2s ease-out forwards;
  -webkit-animation: RotateBoxSec8 1.2s ease-out forwards;
}

@keyframes RotateBoxSec8 {
  0% {
    opacity: 0;
    transform: translateX(-110%) rotate(-360deg);
    -webkit-transform: translateX(-110%) rotate(-360deg);
    -moz-transform: translateX(-110%) rotate(-360deg);
    -ms-transform: translateX(-110%) rotate(-360deg);
    -o-transform: translateX(-110%) rotate(-360deg);
  }
  100% {
    opacity: 1;
    transform: translateX(0) rotate(0);
    -webkit-transform: translateX(0) rotate(0);
    -moz-transform: translateX(0) rotate(0);
    -ms-transform: translateX(0) rotate(0);
    -o-transform: translateX(0) rotate(0);
    margin-left: 410px;
    margin-top: 10px;
  }
}

#section8 .text-container {
  margin-top: -29px;
  z-index: 998;
  text-align: center;
}

#section8 .text-container h2 {
  margin-bottom: -15px;
  font-size: 5.5rem;
  color: #ffffff;
  font-weight: 900;
  line-height: 75px;
}

#section8 .text-container span {
  font-family: "Sacramento", cursive;
  font-size: 48px;
  font-weight: 500;
  color: rgb(254, 225, 0);
  line-height: 48px;
  margin-left: 420px;
  display: inline-block;
  transform: rotate(-5deg);
}

#section8 .short-desc-container {
  display: flex;
  justify-content: start;
  align-items: center;
}

#section8 .short-desc-container #loti-icon {
  transform: scaleX(-1);
  rotate: 50deg;
  /* top: 20px; */
}

#section8 .short-desc-container .no-text {
  font-size: 8rem;
  font-weight: 700;
  font-family: "Oswald", sans-serif;
  margin-right: 70px;
  display: inline-block;
  justify-content: center;
  align-items: center;
  color: transparent;
  -webkit-text-stroke: 2px #ffffff;
  text-stroke: 2px #000;
}

#section8 .short-desc-container .desc-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  row-gap: 20px;
}

#section8 .short-desc-container .short-desc {
  font-size: 1.4rem;
  font-weight: 500;
  max-width: 650px;
  margin: 0 auto;
  line-height: 30px;
  text-align: center;
  color: #ffffff;
}

#section8 .media-gallery {
  width: 110vw;
  margin-left: -5vw;
}

#section8 .media-gallery .gallery {
  display: flex;
  gap: 1rem;
}

#section8 .media-gallery .gallery-column:nth-child(1) img,
.gallery-column:nth-child(6) img {
  opacity: 0.3;
}

#section8 .media-gallery .gallery-column:nth-child(2) img,
.gallery-column:nth-child(5) img {
  opacity: 0.5;
}

#section8 .media-gallery .gallery-column .image-blur img {
  opacity: 0.8;
}

#section8 .media-gallery .gallery-column img {
  width: 100%;
  border-radius: 8px;
  transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.9s;
}

#section8 .media-gallery .gallery-column img:hover {
  opacity: 1;
  transform: scale(1.05);
  filter: grayscale(0%);
}

#section8 .media-gallery .gallery-column {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
}

#section8 .media-gallery .gallery-column:nth-child(1),
.gallery-column:nth-child(6) {
  margin-top: 7rem;
}

#section8 .media-gallery .gallery-column:nth-child(2),
.gallery-column:nth-child(5) {
  margin-top: 15rem;
}

#section8 .media-gallery .gallery-column:nth-child(3),
.gallery-column:nth-child(4) {
  margin-top: 3rem;
}

#section8 .print-media-box2 {
  display: flex;
  gap: 10px;
  margin-top: 50px;
}

#section8 .print-media-box2 .print-media-div {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

#section8 .print-media-box2 .print-media-div .print-media-image {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

#section8 .print-media-box2 .print-media-div .print-media-image img {
  width: 100%;
  position: relative;
  z-index: 8;
  border-radius: 10px;
}

#section8 .print-media-box2 .print-media-div .print-media-image #media-image1 {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  width: 150px;
}

#section8 .print-media-box2 .print-media-div .print-media-image #media-image2 {
  width: 170px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

#section8 .print-media-box2 .print-media-div .print-media-image #media-image3 {
  width: 190px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

#section8 .print-media-box2 .print-media-div .print-media-image #media-image4 {
  width: 210px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

#section8 .print-media-box2 .print-media-div .print-media-image #media-image5 {
  width: 215px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

#section8 .print-media-box2 .print-media-div .print-media-image #media-image6 {
  width: 190px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

#section8 .print-media-box2 .print-media-div .print-media-image #media-image7 {
  width: 170px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

#section8 .print-media-box2 .print-media-div .print-media-image #media-image8 {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  width: 150px;
}

#section8 .print-media-box2 .print-media-div .print-media-image .overlay-div1,
.overlay-div8 {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 10px;
  z-index: 9;
  transition: 0.5s;
}

#section8 .print-media-box2 .print-media-div .print-media-image .overlay-div2,
.overlay-div7 {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 10px;
  z-index: 9;
  transition: 0.5s;
}
#section8 .print-media-box2 .print-media-div .print-media-image .overlay-div3,
.overlay-div6 {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 10px;
  z-index: 9;
  transition: 0.5s;
}

#section8 .print-media-box2 .print-media-div .print-media-image .overlay-div4,
.overlay-div5 {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  z-index: 9;
  transition: 0.5s;
}

#section8
  .print-media-box2
  .print-media-div
  .print-media-image
  .overlay-div1:hover,
.overlay-div8:hover {
  background-color: rgba(0, 0, 0, 0);
  transform-style: preserve-3d;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.9);
}

#section8
  .print-media-box2
  .print-media-div
  .print-media-image
  .overlay-div2:hover,
.overlay-div7:hover {
  background-color: rgba(0, 0, 0, 0);
  transform-style: preserve-3d;
}

#section8
  .print-media-box2
  .print-media-div
  .print-media-image
  .overlay-div3:hover,
.overlay-div6:hover {
  background-color: rgba(0, 0, 0, 0);
  transform-style: preserve-3d;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.9);
}

#section8
  .print-media-box2
  .print-media-div
  .print-media-image
  .overlay-div4:hover,
.overlay-div5:hover {
  background-color: rgba(0, 0, 0, 0);
  transform-style: preserve-3d;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.9);
}

#section8 .print-media-box2 .print-media-div .margin-right1 {
  margin-right: -2rem;
  z-index: 6;
}

#section8 .print-media-box2 .print-media-div .margin-right2 {
  margin-right: -2rem;
  z-index: 7;
}

#section8 .print-media-box2 .print-media-div .margin-right3 {
  margin-right: -2rem;
  z-index: 8;
}

#section8 .print-media-box2 .print-media-div .margin {
  z-index: 9;
}

#section8 .print-media-box2 .print-media-div .margin {
  z-index: 9;
}

#section8 .print-media-box2 .print-media-div .margin-left1 {
  margin-left: -2rem;
  z-index: 8;
}

#section8 .print-media-box2 .print-media-div .margin-left2 {
  z-index: 7;
  margin-left: -2rem;
}

#section8 .print-media-box2 .print-media-div .margin-left3 {
  margin-left: -2rem;
  z-index: 6;
}

#section8 .gallery .gallery-column .img-anime {
  opacity: 0;
  transform: scale(1.5);
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -ms-transform: scale(1.5);
  -o-transform: scale(1.5);
}

#section8 .gallery .gallery-column .img-anime.visible {
  animation: ZoomIn 0.9s ease-out forwards;
  -webkit-animation: ZoomIn 0.9s ease-out forwards;
}
/* @keyframes ZoomIn {
  0%
} */

#section8 .print-media-box2 .media-anime-lft,
.media-anime-rit {
  opacity: 0;
}

#section8 .print-media-box2 .media-anime-lft.visible {
  animation: FadeInLeft 0.6s ease-out forwards;
  -webkit-animation: FadeInLeft 0.6s ease-out forwards;
}

@keyframes FadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-110%);
    -webkit-transform: translateX(-110%);
    -moz-transform: translateX(-110%);
    -ms-transform: translateX(-110%);
    -o-transform: translateX(-110%);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
  }
}

#section8 .print-media-box2 .media-anime-lft.visible:nth-child(1) {
  animation-delay: 1.4s;
}

#section8 .print-media-box2 .media-anime-lft.visible:nth-child(2) {
  animation-delay: 1s;
}

#section8 .print-media-box2 .media-anime-lft.visible:nth-child(3) {
  animation-delay: 0.6s;
}

#section8 .print-media-box2 .media-anime-lft.visible:nth-child(4) {
  animation-delay: 0.2s;
}

#section8 .print-media-box2 .media-anime-rit.visible {
  animation: FadeInRight 0.9s ease-out forwards;
  -webkit-animation: FadeInRight 0.9s ease-out forwards;
}

@keyframes FadeInRight {
  0% {
    opacity: 0;
    transform: translateX(110%);
    -webkit-transform: translateX(110%);
    -moz-transform: translateX(110%);
    -ms-transform: translateX(110%);
    -o-transform: translateX(110%);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
  }
}

#section8 .print-media-box2 .media-anime-rit.visible:nth-child(5) {
  animation-delay: 0.2s;
}

#section8 .print-media-box2 .media-anime-rit.visible:nth-child(6) {
  animation-delay: 0.6s;
}

#section8 .print-media-box2 .media-anime-rit.visible:nth-child(7) {
  animation-delay: 1s;
}

#section8 .print-media-box2 .media-anime-rit.visible:nth-child(8) {
  animation-delay: 1.4s;
}

/* Section8 End */

/* Section10 Start */

#section10 {
  padding: 30px 0;
  position: relative;
  /* z-index: 2; */
  background-color: #fff;
  overflow: hidden;
}

#section10 .logo-slides {
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  padding-top: 50px;
  padding-bottom: 25px;
}

#section10 .logo-images {
  display: inline-block;
  animation: 18s slide infinite linear;
  animation-direction: normal;
}

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

#section10 .logo-slides:before,
.logo-slides:after {
  content: "";
  position: absolute;
  width: 200px;
  height: 100%;
  top: 0;
  /* background: #000; */
  z-index: 9;
}

#section10 .logo-slides:before {
  left: 0;
  background: linear-gradient(to left, rgba(255, 255, 255, 0), white);
}

#section10 .logo-slides:after {
  right: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), white);
}

#section10 .logo-images img {
  height: 130px;
  margin: 0 20px;
  border-radius: 16px;
  filter: drop-shadow(0 0 19px rgba(128, 128, 128, 0.43));
}

#section10 .logo-slides2 {
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  padding-top: 25px;
  padding-bottom: 50px;
}

#section10 .logo-images2 {
  display: inline-block;
  animation: 18s slide infinite linear;
  animation-direction: reverse;
}

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

#section10 .logo-slides2:before,
.logo-slides2:after {
  content: "";
  position: absolute;
  width: 200px;
  height: 100%;
  top: 0;
  /* background: #000; */
  z-index: 9;
}

#section10 .logo-slides2:before {
  left: 0;
  background: linear-gradient(to left, rgba(255, 255, 255, 0), white);
}

#section10 .logo-slides2:after {
  right: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), white);
}

#section10 .logo-images2 img {
  height: 130px;
  margin: 0 20px;
  border-radius: 16px;
  filter: drop-shadow(0 0 19px rgba(128, 128, 128, 0.43));
}

/* Section10 End */

/* section9 Start */

#section9 {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  background: url("Assets/Ui-Ux\ background.svg") no-repeat top left,
    url("Assets/master-bg-layer.png"), #fafaff;
  overflow: hidden;
  padding-top: 70px;
  position: relative;
  /* z-index: 2; */
  overflow: hidden;
}

#section9 .uiux-gallery {
  width: 110vw;
  margin-left: -5vw;
  overflow: hidden;
  padding: 70px 0;
}

#section9 .uiux-gallery .uiux-gallery-div {
  display: flex;
  gap: 1rem;
  align-items: flex-end;
}

#section9 .uiux-gallery .uiux-image-column {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
  flex: 1;
}

#section9 .uiux-gallery .uiux-image-column img {
  width: 100%;
  border-radius: 10px;
  -o-object-fit: cover;
  object-fit: cover;
  aspect-ratio: 205 / 405;
  object-position: top;
  filter: drop-shadow(0px 0px 19px #36363666);
  cursor: pointer;
  transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.9s;
}

#section9 .uiux-gallery .uiux-image-column .image-column-img {
  display: flex;
}

#section9 .uiux-gallery .uiux-image-column:nth-child(1),
.uiux-image-column:nth-child(8) {
  margin-bottom: 5rem;
}

#section9 .uiux-gallery .uiux-image-column:nth-child(2),
.uiux-image-column:nth-child(7) {
  margin-bottom: 1rem;
}

#section9 .uiux-gallery .uiux-image-column:nth-child(3),
.uiux-image-column:nth-child(6) {
  margin-bottom: 10rem;
}

#section9 .uiux-gallery .uiux-image-column:nth-child(4),
.uiux-image-column:nth-child(5) {
  margin-bottom: 20rem;
}

#section9 .uiux-gallery .uiux-image-column img:hover {
  transform: scale(1.05);
}

#section9 .container {
  max-width: 1300px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#section9 .heading-container {
  display: flex;
  flex-direction: column;
}
#section9 .square-box {
  background-color: rgb(254, 225, 0);
  display: inline-block;
  width: 60px;
  height: 60px;
  rotate: 30deg;
  border-radius: 5px;
}

#section9 .square-box.visible {
  animation: RotateBoxSec9 1.2s ease-out forwards;
  -webkit-animation: RotateBoxSec9 1.2s ease-out forwards;
}

@keyframes RotateBoxSec9 {
  0% {
    opacity: 0;
    transform: translateX(-110%) rotate(-360deg);
    -webkit-transform: translateX(-110%) rotate(-360deg);
    -moz-transform: translateX(-110%) rotate(-360deg);
    -ms-transform: translateX(-110%) rotate(-360deg);
    -o-transform: translateX(-110%) rotate(-360deg);
  }
  100% {
    opacity: 1;
    transform: translateX(0) rotate(0);
    -webkit-transform: translateX(0) rotate(0);
    -moz-transform: translateX(0) rotate(0);
    -ms-transform: translateX(0) rotate(0);
    -o-transform: translateX(0) rotate(0);
    margin-left: 485px;
    margin-top: 10px;
  }
}

#section9 .text-container {
  margin-top: -29px;
  z-index: 998;
  text-align: center;
}

#section9 .text-container h2 {
  margin-bottom: -15px;
  font-size: 5.5rem;
  color: #000000;
  font-weight: 900;
  line-height: 75px;
}

#section9 .text-container span {
  font-family: "Sacramento", cursive;
  font-size: 48px;
  font-weight: 500;
  color: rgb(254, 225, 0);
  line-height: 48px;
  margin-left: 300px;
  display: inline-block;
  transform: rotate(-5deg);
}

#section9 .short-desc-container {
  display: flex;
  justify-content: start;
  align-items: center;
}

#section9 .short-desc-container #loti-icon {
  transform: scaleX(-1);
  rotate: 50deg;
}

#section9 .short-desc-container .no-text {
  font-size: 8rem;
  font-weight: 700;
  font-family: "Oswald", sans-serif;
  margin-right: 70px;
  display: inline-block;
  justify-content: center;
  align-items: center;
  color: transparent;
  -webkit-text-stroke: 2px #050062;
  text-stroke: 2px #000;
}

#section9 .short-desc-container .desc-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  row-gap: 20px;
}

#section9 .short-desc-container .short-desc {
  font-size: 1.4rem;
  font-weight: 500;
  max-width: 650px;
  margin: 0 auto;
  line-height: 30px;
  text-align: center;
  color: #000000;
}

#section9 .uiux-gallery .image-column-img {
  opacity: 0;
  transform: scale(1.5);
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -ms-transform: scale(1.5);
  -o-transform: scale(1.5);
}

#section9 .uiux-gallery .uiux-image-column .image-column-img.visible {
  animation: ZoomIn 0.9s ease-out forwards;
  -webkit-animation: ZoomIn 0.9s ease-out forwards;
}

@keyframes ZoomIn {
  0% {
    opacity: 0;
    transform: scale(1.5);
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -o-transform: scale(1.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
  }
}

/* section9 End */

/* Section11 Start */

#section11 {
  /* z-index: 3; */
  position: relative;
  background: url("Assets/courses-detail-noise-bg.webp"),
    radial-gradient(circle, #002196 0%, rgba(0, 0, 0, 1) 90%);
  background-size: cover;
  padding: 70px 0;
}

#section11 .contact-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 50px;
}

#section11 .form-content {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#section11 form {
  padding: 50px 50px 50px 50px;
  max-width: 550px;
  width: 100%;
  gap: 1rem;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(25px);
  box-shadow: 0 0 50px #69580bb8;
  border-radius: 15px;
  position: relative;
  background: url("Assets/courses-detail-noise-bg.webp");
}
#section11 form h2 {
  max-width: 70%;
  font-size: 1.6rem;
  line-height: 1.6rem;
  font-weight: 700;
  width: 100%;
  text-align: center;
  position: absolute;
  top: 0;
  left: 50%;
  border-radius: 0 0 10px 10px;
  transform: translateX(-50%);
  background-color: #fafaff;
  padding: 20px 10px;
  filter: drop-shadow(0 0 15px #0000009f);
}

#section11 form h2 span {
  color: rgb(220, 194, 0);
}

#section11 form h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: -30px;
  width: 30px;
  height: 50px;
  background: transparent;
  border-top-right-radius: 50%;
  box-shadow: 15px 0 0 0 #fafaff;
}

#section11 form h2::after {
  content: "";
  position: absolute;
  top: 0;
  right: -30px;
  width: 30px;
  height: 50px;
  background: transparent;
  border-top-left-radius: 50%;
  box-shadow: -15px 0 0 0 #fafaff;
}

#section11 .form-group {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 60px;
}

#section11 .form-group2 {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

#section11 .input-box {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
}

#section11 input,
select,
textarea {
  width: 100%;
  padding: 10px 40px 10px 15px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1rem;
  transition: border 0.5s ease;
  appearance: none;
  background-color: #ffffff;
}

#section11 .input-box textarea:focus,
#section11 .input-box input:focus,
#section11 .input-box select:focus {
  border: 1px solid #fad104;
  outline: none;
}

#section11 label {
  position: absolute;
  top: 10px;
  left: 15px;
  transition: 0.5s;
  pointer-events: none;
  background-color: #ffffff;
  padding: 0 5px;
  color: #999;
  font-size: 20px;
}

#section11 .input-box input:focus + label,
#section11 .input-box input:not(:placeholder-shown) + label,
#section11 .input-box textarea:focus + label,
#section11 .input-box textarea:not(:placeholder-shown) + label {
  top: -10px;
  left: 25px;
  font-size: 15px;
  color: #000;
  border: 1px solid #fad104;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom: none;
  border-left: none;
  border-right: none;
  padding: 0 10px;
}

#section11 .input-box select:focus + label,
#section11 .input-box select:valid + label {
  top: -10px;
  left: 25px;
  font-size: 15px;
  color: #000;
  border: 1px solid #fad104;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom: none;
  border-left: none;
  border-right: none;
  padding: 0 10px;
}

#section11 .form-content .fa-solid {
  position: absolute;
  top: 15px;
  right: 15px;
  color: #999;
  overflow: hidden;
}

#section11 button {
  width: 60%;
  border-radius: 10px;
  align-self: center;
  font-size: 1.5rem;
  font-weight: 700;
  outline: none;
  border: 2px solid #00000000;
  transition: 0.5s ease-in-out;
  cursor: pointer;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}

#section11 button:hover {
  background-color: #cccccc;
  border-radius: 25px;
  border: 2px solid #fee100;
  box-shadow: 0 0 20px #fee100;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -ms-border-radius: 25px;
  -o-border-radius: 25px;
}

#section11 .contact-content {
  width: 50%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  row-gap: 30px;
}

#section11 .contact-content .contact-us {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 10px;
  font-size: 1.5rem;
  line-height: 1.5rem;
  font-weight: 700;
  color: #fafaff;
  width: 100%;
  backdrop-filter: blur(5px);
  filter: drop-shadow(0 0 15px #0000009f);
  background: url("Assets/courses-detail-noise-bg.webp");
  padding: 20px;
  border: 2px solid #00000000;
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
}

#section11 .contact-content .contact-us:hover {
  border: 2px solid #fee100;
  box-shadow: 0 0 30px #fee00075;
  transition: 0.5s all ease-in-out;
  0-webkit-transition: 0.3s ease-out;
  -moz-transition: 0.5s all ease-in-out;
  -ms-transition: 0.5s all ease-in-out;
  -o-transition: 0.5s all ease-in-out;
  -webkit-transition: 0.5s all ease-in-out;
}

#section11 .contact-content .contact-us .linkedin a {
  text-decoration: none;
  color: #fafaff;
}

#section11 .contact-content .testimonial-container {
  position: relative;
  max-width: 450px;
  margin: 0 auto;
  width: 100%;
  overflow: hidden;
}

#section11 .contact-content .phone,
.email,
.address,
.linkedin {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

#section11 .testimonial-container .slider-container {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

#section11 .testimonial-container .testimonial-card {
  flex: 1 0 100%;
  padding: 20px;
}

#section11 .testimonial-card .card-content {
  padding: 20px 40px 20px 40px;
  background-color: #e2e2e2;
  border-radius: 10px;
  box-shadow: 0 0 20px #000000b8;
}

#section11 .testimonial-container .testimonial-card p {
  font-size: 1.1rem;
  font-weight: 400;
  color: #000;
  line-height: 1.3rem;
}

#section11 .testimonial-container .testimonial-card .testimo-author {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

#section11 .testimo-author .author {
  display: flex;
  justify-content: start;
  align-items: center;
  column-gap: 10px;
  width: 80%;
}

#section11 .testimo-author .author img {
  object-fit: cover;
}

#section11 .testimo-author .author-info {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

#section11 .testimo-author .author-info .author-name {
  font-size: 1.1rem;
  font-weight: 500;
  color: #000;
  line-height: 1.3rem;
}

#section11 .testimo-author .author-info .author-description {
  font-size: 1rem;
  color: #000;
  line-height: 1.2rem;
}

#section11 .testimo-author .author-icon {
  width: 20%;
  display: flex;
  justify-content: end;
  align-items: center;
}

#section11 .testimo-author .author-icon i {
  font-size: 2.5rem;
  color: #00000075;
}

#section11 .testimonial-container .nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(189, 189, 189, 0.6);
  color: white;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

#section11 .testimonial-container .nav-btn:hover {
  background-color: rgba(0, 0, 0, 0.6);
}

#section11 .testimonial-container .prev-btn {
  left: 0;
}

#section11 .testimonial-container .next-btn {
  right: 0;
}

#section11 .testimonial-container .slider-nav {
  width: 105px;
  margin: 0 auto;
  background-color: rgba(189, 189, 189, 0.6);
  backdrop-filter: blur(5px);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 7px;
  column-gap: 7px;
  border-radius: 20px;
}

#section11 .testimonial-container .slider-nav .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: #ccc;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

#section11 .testimonial-container .slider-nav .dot.active {
  background-color: rgb(255, 255, 255);
  transform: scale(1.4);
}

#section11 .testimonial-container .slider-nav .dot:hover {
  background-color: rgb(255, 255, 255);
}

#section11 .top-btn {
  padding: 0;
  position: fixed;
  z-index: 998;
  bottom: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  border-radius: 50%;
  transition: opacity0.4sease, visibility0.4sease, transform0.4sease;
  background-image: radial-gradient(circle, #050061, rgb(0, 0, 0));
  box-shadow: 0 0 24px rgb(0, 0, 0);
  -webkit-transition: opacity0.4sease, visibility0.4sease, transform0.4sease;
  -moz-transition: opacity0.4sease, visibility0.4sease, transform0.4sease;
  -ms-transition: opacity0.4sease, visibility0.4sease, transform0.4sease;
  -o-transition: opacity0.4sease, visibility0.4sease, transform0.4sease;
}

#section11 .top-btn.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
}

#section11 .top-btn i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  transition: 0.3s ease;
  -webkit-transform: translate(-50%, -50%);
  translate: (-50%, -50%);
}

#section11 .top-btn {
  animation-name: appear;
  animation-timeline: scroll(y);
}

/* @keyframes appear{
  0%{
    opacity: 0;
    visibility: hidden;
  }
  14%{
    opacity: 1;
    visibility: visible;
  }
  100%{
    opacity: 1;
    visibility: visible;
  }
} */
/* Section11 End */

/* <<=============== Skill Sharnpeed =======================>> */

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr 0.8fr;
  grid-template-rows: repeat(2 1fr);
  max-width: 1300px;
  margin: 0 auto;
  width: 100%;
  gap: 20px;
}

.grid-container .creative,
.education,
.experience,
.software-skill,
.inner-item {
  backdrop-filter: blur(3px);
  background-color: rgba(17, 27, 46, 0.148);
  border: 1px solid;
  padding: 25px;
  border-radius: 10px;
  color: rgb(255, 255, 255);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
  border: 2px solid rgb(254, 225, 0);
}

.grid-container .creative {
  grid-column: 2;
}

.grid-container .education {
  grid-column: span 2;
}

.grid-container .experience {
  grid-row: span 2;
}

.grid-container .software-skill {
  grid-column: span 2;
}

.grid-container .inner-item {
  grid-column: span 1;
}

.grid-container .item > h3 {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 2.2rem;
  margin-bottom: 20px;
  color: rgb(254, 225, 0);
}

.grid-container .creative .creative-list p {
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.8rem;
  color: aliceblue;
}

.grid-container .creative .creative-list .margin-top {
  margin-top: 7px;
}

/* <<=============== Education =======================>> */

.grid-container .education .education-detail > h6 {
  font-size: 1.8rem;
  font-weight: 500;
  margin-bottom: 5px;
  line-height: 1.8rem;
}

.grid-container .education .education-detail {
  margin-top: 18px;
}
.grid-container .education .education-detail > p {
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.3rem;
}

/* <<=============== Experience =======================>> */

.grid-container .experience h3 {
  margin-bottom: 30px;
}

.grid-container .experience .exp-box .exp-item {
  border: 1px solid #fff;
  padding: 10px;
  border-radius: 10px;
}

.grid-container .experience .exp-box .exp-item > .company {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.6rem;
  margin-bottom: 10px;
}

.grid-container .experience .exp-box .exp-item > .position {
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.2rem;
  margin-bottom: 5px;
}

.grid-container .experience .progress-box {
  width: 100%;
  position: relative;
  padding-left: 30px;
}

.grid-container .experience .progress-box .exp-box {
  row-gap: 10px;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.grid-container .experience .progress-box .exp-box::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 100%;
  background-color: rgb(250, 250, 250);
  left: 0;
  bottom: 0;
  border-radius: 20px;
  /* height: 0; */
}

.grid-container .experience .progress-box.start-animation .exp-box::before {
  animation: moveup 4s ease forwards;
}

@keyframes moveup {
  0% {
    height: 0%;
  }
  100% {
    height: 100%;
  }
}

.grid-container .experience .progress-box .exp-box .exp-item .circle {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: rgb(226, 200, 2);
  border-radius: 50%;
  left: -5px;
  box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.9);
  animation: zoomAndMoveUp 0.9s ease forwards;
  animation-delay: 0s;
  opacity: 1;
}

.grid-container .experience .progress-box .exp-box .exp-item .delay3 {
  animation-delay: 2.9s;
}

.grid-container .experience .progress-box .exp-box .exp-item .delay2 {
  animation-delay: 1.5s;
}

.grid-container .experience .progress-box .exp-box .exp-item .delay1 {
  animation-delay: 1s;
}

.grid-container .experience .progress-box .exp-box .exp-item .delay {
  animation-delay: 0.5s;
}

/* <<===============Software Skill =======================>> */

.grid-container .software-skill {
  display: flex;
  flex-direction: column;
}

.grid-container .software-skill .skill-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  gap: 20px;
}

.grid-container .software-skill .skill-grid .skill-item {
  display: flex;
  align-items: start;
  column-gap: 10px;
  width: 100%;
}

.grid-container .progress-circle {
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  transition: background 0.3s ease-out;
  --size: 53px;
  --p: 0;
  --c: #ffcb01;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), #e6e6e6 0);
  -webkit-transition: background 0.3s ease-out;
  -moz-transition: background 0.3s ease-out;
  -ms-transition: background 0.3s ease-out;
  -o-transition: background 0.3s ease-out;
}

.grid-container .progress-circle::before {
  position: absolute;
  width: 40px;
  height: 40px;
  content: "";
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
}

.grid-container .progress-value {
  z-index: 999;
  position: absolute;
  color: #000000fd;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1rem;
}

.grid-container .software-skill .skill-item .skill-text-box {
  display: flex;
  flex-direction: column;
  align-items: start;
  width: 80%;
  row-gap: 5px;
}

.grid-container .software-skill .skill-item .skill-text-box > h6 {
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.8rem;
  letter-spacing: 0.1rem;
  /* margin-bottom: 5px; */
}

.grid-container .software-skill .skill-item .skill-text-box > p {
  font-size: 1.2rem;
  line-height: 1.3rem;
  /* letter-spacing: 0.1rem; */
  font-weight: 300;
}

/* <<===============inner-Item =======================>> */

.grid-container .inner-item {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border: none;
  border-radius: none;
  -webkit-border-radius: none;
  -moz-border-radius: none;
  -ms-border-radius: none;
  -o-border-radius: none;
  box-shadow: none;
  backdrop-filter: none;
  background-color: rgba(96, 96, 96, 0);
}

.grid-container .inner-item .hobbies-box h3,
.language-box h3 {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 2.2rem;
  margin-bottom: 20px;
  color: rgb(254, 225, 0);
}

.grid-container .hobbies-box {
  display: flex;
  flex-direction: column;
  /* background-color: rgba(96, 96, 96, 0.4); */
  padding: 20px;
  border: 2px solid rgb(254, 225, 0);
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
  background-color: rgba(17, 27, 46, 0.148);
}

.grid-container .hobbies-box .hobby {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 15px;
}

.grid-container .inner-item .hobby img {
  /* width: 20%; */
  width: 40px;
  border-radius: 5px;
}

.grid-container .hobbies-box .hobby h6 {
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.3rem;
}

/* <<=============== inner-Item-Language =======================>> */

.grid-container .inner-item .language-box {
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 2px solid rgb(254, 225, 0);
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
  background-color: rgba(17, 27, 46, 0.148);
}

.grid-container .language-box .education-detail {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.grid-container .language-box .education-detail p {
  font-size: 18px;
  font-weight: 500;
  line-height: 21px;
}

.grid-container .language-box .education-detail hr {
  height: 18px;
  width: 3px;
  border: none;
  background-color: #fff;
}