* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Rubik", sans-serif;
}
.disableScrolling {
  margin: 0;
  height: 100%;
  overflow: hidden;
}
html {
  scroll-behavior: smooth;
}
nav span {
  cursor: pointer;
  font-weight: 600;
  line-height: 0.9;
}
.MenuBtn span {
  transition: all, 0.3s;
}
.NewSpan2 {
  opacity: 0;
}
.NewSpan1 {
  background-color: white;
  position: absolute;
  top: 50%;
  transform: rotate(45deg);
}
.NewSpan3 {
  background-color: white;
  position: absolute;
  top: 50%;
  transform: rotate(-45deg);
}
article button::after {
  width: 0;
  height: 0;
  transition: 0.7s;
  border-radius: 50%;
  content: "";
  position: absolute;
  right: -20%;
  bottom: -75%;
  background-color: rgb(147 51 234);
}
article button:hover::after {
  width: 200px;
  height: 200px;
}
.imgCon {
  border-radius: 65% 35% 46% 54% / 65% 61% 39% 35%;
}

.imgCon img {
  border-radius: 0 0 100px 100px;
}

/*@media (min-width: 1200px) {*/
/*  .imgCon {*/
/*    width: 50%;*/
/*    height: 23rem;*/
/*  }*/
/*  .imgCon img {*/
/*    height: 25rem;*/
/*    !*border-radius: 0 0 128px 124px;*!*/
/*  }*/
/*}*/
@media (min-width: 1280px) {
  .imgCon {
    width: 45%;
    height: 26rem;
    border-radius: 0;

  }
  .imgCon img {
    height: 30rem;
    border-radius: 0;
    /*border-radius: 0 0 195px 185px;*/
  }
}

.servCon {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.servCon > div {
  max-width: 18rem;
}
.bcc {
  min-height: 40vh;
}
.GIW > div {
  transition: 0.3s;
  cursor: pointer;
  font-weight: 500;
}
.on {
  color: rgb(147 51 234);
}
.GIW > .on::after {
  transition: 0.3s;
  content: "";
  height: 3px;
  width: 100%;
  display: block;
  background-color: rgb(147 51 234);
}
.GIW > div::after {
  transition: 0.3s;
  content: "";
  height: 3px;
  width: 0%;
  display: block;
  background-color: #7e22ce;
}
.GIW > div:hover::after {
  width: 100%;
}
/*.catCon{*/
/*    width:2048px;*/
/*}*/
/*.gdp{*/
/*    left: 1024px;*/
/*}*/
/*.ip{*/
/*    left: -1024px;*/
/*}*/
.wdp > div,
.gdp > div,
.ip > div {
  display: grid;
  justify-items: center;
  justify-content: center;
  grid-template-columns: minmax(240px, 400px);
  gap: 15px 0px;
}
@media (min-width: 640px) {
  .wdp > div,
  .gdp > div,
  .ip > div {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
  }
  .wdp div a,
  .gdp div a,
  .ip div a {
    height: 200px !important;
  }
}
.wdp div a,
.gdp div a,
.ip div a {
  display: block;
  width: 100%;
  height: 240px;
  border-radius: 4px;
  transition: all, 0.3s;
  background-size: cover;
  background-position: center;
}

.wdp div a:first-child {
  background-image: url(../images/portfolio/wd/1.jpg);
}
.wdp div a:nth-child(2) {
  background-image: url(../images/Portfolio/wd/2.jpg);
}
.wdp div a:nth-child(3) {
  background-image: url(../images/Portfolio/wd/3.jpg);
}
.wdp div a:nth-child(4) {
  background-image: url(../images/Portfolio/wd/4.jpg);
}
.wdp div a:nth-child(5) {
  background-image: url(../images/Portfolio/wd/5.jpg);
}
.wdp div a:last-child {
  background-image: url(../images/Portfolio/wd/6.jpg);
}

.gdp div a:first-child {
  background-image: url(../images/Portfolio/gd/1.jpg);
}
.gdp div a:nth-child(2) {
  background-image: url(../images/Portfolio/gd/2.jpg);
}
.gdp div a:nth-child(3) {
  background-image: url(../images/Portfolio/gd/3.jpg);
}
.gdp div a:last-child {
  background-image: url(../images/Portfolio/gd/4.jpg);
}

.ip div a:first-child {
  background-image: url(../images/Portfolio/ai/1.jpg);
}
.ip div a:nth-child(2) {
  background-image: url(../images/Portfolio/ai/2.jpg);
}
.ip div a:nth-child(3) {
  background-image: url(../images/Portfolio/ai/3.jpg);
}
.ip div a:last-child {
  background-image: url(../images/Portfolio/ai/4.jpg);
}
.wdp span,
.gdp span,
.ip span {
  display: block;
  margin-top: 12px;
}
form .menuC,
form .menuC span {
  line-height: 48px;
}
form .menuC {
  transition: all, 0.7s;
  /*color: #a4a3af;*/
}
form > button::after {
  width: 0;
  height: 0;
  transition: 0.7s;
  border-radius: 50%;
  content: "";
  position: absolute;
  right: -35%;
  bottom: -50%;
  background-color: rgb(147 51 234);
}
form > button:hover::after {
  width: 150px;
  height: 150px;
}
select option {
  color: red;
  height: 60px;
  padding: 10px;
}
footer ul li a {
  line-height: 40px;
}
/*.GD:after{*/
/*    content: '';*/
/*    display: block;*/
/*    padding-top: 80%;*/
/*}*/
/*.WD:after{*/
/*    content: '';*/
/*    display: block;*/
/*    padding-top: 80%;*/
/*}*/