fieldset[disabled] .multiselect{pointer-events:none}.multiselect__spinner{position:absolute;right:1px;top:1px;width:48px;height:35px;background:#fff;display:block}.multiselect__spinner:after,.multiselect__spinner:before{position:absolute;content:"";top:50%;left:50%;margin:-8px 0 0 -8px;width:16px;height:16px;border-radius:100%;border-color:#41b883 transparent transparent;border-style:solid;border-width:2px;box-shadow:0 0 0 1px transparent}.multiselect__spinner:before{animation:a 2.4s cubic-bezier(.41,.26,.2,.62);animation-iteration-count:infinite}.multiselect__spinner:after{animation:a 2.4s cubic-bezier(.51,.09,.21,.8);animation-iteration-count:infinite}.multiselect__loading-enter-active,.multiselect__loading-leave-active{transition:opacity .4s ease-in-out;opacity:1}.multiselect__loading-enter,.multiselect__loading-leave-active{opacity:0}.multiselect,.multiselect__input,.multiselect__single{font-family:inherit;font-size:16px;touch-action:manipulation}.multiselect{box-sizing:content-box;display:block;position:relative;width:100%;min-height:40px;text-align:left;color:#35495e}.multiselect *{box-sizing:border-box}.multiselect:focus{outline:none}.multiselect--disabled{opacity:.6}.multiselect--active{z-index:1}.multiselect--active:not(.multiselect--above) .multiselect__current,.multiselect--active:not(.multiselect--above) .multiselect__input,.multiselect--active:not(.multiselect--above) .multiselect__tags{border-bottom-left-radius:0;border-bottom-right-radius:0}.multiselect--active .multiselect__select{transform:rotate(180deg)}.multiselect--above.multiselect--active .multiselect__current,.multiselect--above.multiselect--active .multiselect__input,.multiselect--above.multiselect--active .multiselect__tags{border-top-left-radius:0;border-top-right-radius:0}.multiselect__input,.multiselect__single{position:relative;display:inline-block;min-height:20px;line-height:20px;border:none;border-radius:5px;background:#fff;padding:0 0 0 5px;width:100%;transition:border .1s ease;box-sizing:border-box;margin-bottom:8px;vertical-align:top}.multiselect__input::-moz-placeholder{color:#35495e}.multiselect__input::placeholder{color:#35495e}.multiselect__tag~.multiselect__input,.multiselect__tag~.multiselect__single{width:auto}.multiselect__input:hover,.multiselect__single:hover{border-color:#cfcfcf}.multiselect__input:focus,.multiselect__single:focus{border-color:#a8a8a8;outline:none}.multiselect__single{padding-left:5px;margin-bottom:8px}.multiselect__tags-wrap{display:inline}.multiselect__tags{min-height:40px;display:block;padding:8px 40px 0 8px;border-radius:5px;border:1px solid #e8e8e8;background:#fff;font-size:14px}.multiselect__tag{position:relative;display:inline-block;padding:4px 26px 4px 10px;border-radius:5px;margin-right:10px;color:#fff;line-height:1;background:#41b883;margin-bottom:5px;white-space:nowrap;overflow:hidden;max-width:100%;text-overflow:ellipsis}.multiselect__tag-icon{cursor:pointer;margin-left:7px;position:absolute;right:0;top:0;bottom:0;font-weight:700;font-style:normal;width:22px;text-align:center;line-height:22px;transition:all .2s ease;border-radius:5px}.multiselect__tag-icon:after{content:"\D7";color:#266d4d;font-size:14px}.multiselect__tag-icon:focus,.multiselect__tag-icon:hover{background:#369a6e}.multiselect__tag-icon:focus:after,.multiselect__tag-icon:hover:after{color:#fff}.multiselect__current{min-height:40px;overflow:hidden;padding:8px 12px 0;padding-right:30px;white-space:nowrap;border-radius:5px;border:1px solid #e8e8e8}.multiselect__current,.multiselect__select{line-height:16px;box-sizing:border-box;display:block;margin:0;text-decoration:none;cursor:pointer}.multiselect__select{position:absolute;width:40px;height:38px;right:1px;top:1px;padding:4px 8px;text-align:center;transition:transform .2s ease}.multiselect__select:before{position:relative;right:0;top:65%;color:#999;margin-top:4px;border-style:solid;border-width:5px 5px 0;border-color:#999 transparent transparent;content:""}.multiselect__placeholder{color:#adadad;display:inline-block;margin-bottom:10px;padding-top:2px}.multiselect--active .multiselect__placeholder{display:none}.multiselect__content-wrapper{position:absolute;display:block;background:#fff;width:100%;max-height:240px;overflow:auto;border:1px solid #e8e8e8;border-top:none;border-bottom-left-radius:5px;border-bottom-right-radius:5px;z-index:1;-webkit-overflow-scrolling:touch}.multiselect__content{list-style:none;display:inline-block;padding:0;margin:0;min-width:100%;vertical-align:top}.multiselect--above .multiselect__content-wrapper{bottom:100%;border-bottom-left-radius:0;border-bottom-right-radius:0;border-top-left-radius:5px;border-top-right-radius:5px;border-bottom:none;border-top:1px solid #e8e8e8}.multiselect__content::webkit-scrollbar{display:none}.multiselect__element{display:block}.multiselect__option{display:block;padding:12px;min-height:40px;line-height:16px;text-decoration:none;text-transform:none;vertical-align:middle;position:relative;cursor:pointer;white-space:nowrap}.multiselect__option:after{top:0;right:0;position:absolute;line-height:40px;padding-right:12px;padding-left:20px;font-size:13px}.multiselect__option--highlight{background:#41b883;outline:none;color:#fff}.multiselect__option--highlight:after{content:attr(data-select);background:#41b883;color:#fff}.multiselect__option--selected{background:#f3f3f3;color:#35495e;font-weight:700}.multiselect__option--selected:after{content:attr(data-selected);color:silver}.multiselect__option--selected.multiselect__option--highlight{background:#ff6a6a;color:#fff}.multiselect__option--selected.multiselect__option--highlight:after{background:#ff6a6a;content:attr(data-deselect);color:#fff}.multiselect--disabled{background:#ededed;pointer-events:none}.multiselect--disabled .multiselect__current,.multiselect--disabled .multiselect__select,.multiselect__option--disabled{background:#ededed;color:#a6a6a6}.multiselect__option--disabled{cursor:text;pointer-events:none}.multiselect__option--group{background:#ededed;color:#35495e}.multiselect__option--group.multiselect__option--highlight{background:#35495e;color:#fff}.multiselect__option--group.multiselect__option--highlight:after{background:#35495e}.multiselect__option--disabled.multiselect__option--highlight{background:#dedede}.multiselect__option--group-selected.multiselect__option--highlight{background:#ff6a6a;color:#fff}.multiselect__option--group-selected.multiselect__option--highlight:after{background:#ff6a6a;content:attr(data-deselect);color:#fff}.multiselect-enter-active,.multiselect-leave-active{transition:all .15s ease}.multiselect-enter,.multiselect-leave-active{opacity:0}.multiselect__strong{margin-bottom:8px;line-height:20px;display:inline-block;vertical-align:top}[dir=rtl] .multiselect{text-align:right}[dir=rtl] .multiselect__select{right:auto;left:1px}[dir=rtl] .multiselect__tags{padding:8px 8px 0 40px}[dir=rtl] .multiselect__content{text-align:right}[dir=rtl] .multiselect__option:after{right:auto;left:0}[dir=rtl] .multiselect__clear{right:auto;left:12px}[dir=rtl] .multiselect__spinner{right:auto;left:1px}@keyframes a{0%{transform:rotate(0)}to{transform:rotate(2turn)}}
@font-face {
  font-family: "robotoregular";
  src: url("/fonts/roboto-regular-webfont.woff2") format("woff2"), url("/fonts/roboto-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "robotomedium";
  src: url("/fonts/roboto-medium-webfont.woff2") format("woff2"), url("/fonts/roboto-medium-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "robotoblack";
  src: url("/fonts/roboto-black-webfont.woff2") format("woff2"), url("/fonts/roboto-black-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
/* width */
::-webkit-scrollbar {
  width: 10px;
  border-radius: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

[v-cloak] {
  display: none;
}

body {
  overflow-x: hidden;
  font-size: 15px;
  color: black;
  text-align: justify;
  padding: 20px;
  font-family: "robotoregular";
  transition: all 0.3s;
  background-color: white;
  direction: ltr;
  box-sizing: border-box;
}
body a {
  cursor: pointer;
}
body a:hover {
  text-decoration: none;
}

.section-menu {
  opacity: 1 !important;
  z-index: 2 !important;
}

header .jupiter {
  font-family: "robotomedium";
  margin-left: 65px;
  font-weight: 400;
  font-size: 2vw;
  margin-top: 2vh;
  color: #141414;
}
header .jupiter .dot {
  font-family: "robotoblack";
  color: #4e4cdc;
}
header .jupiter a {
  color: #141414;
  text-decoration: none;
}
header .jupiter img {
  max-width: 90px;
}
header .icon-collapse {
  cursor: pointer;
}
header .top-header-set-height {
  height: 100vw;
}
header .top-header {
  display: flex;
  justify-content: space-between;
  padding: 3px 3px;
  width: 100%;
  top: 22px;
  right: 0;
  z-index: 4;
  /*----------------------Start Top Menu ----------*/
  /*---. Start icon close collapse -----*/
  /*---. end icon close collapse -----*/
  /*----------------------End Top Menu ----------*/
}
header .top-header .menuTop {
  height: 100vw;
  right: 0;
  position: fixed;
  width: 100%;
  background-color: #4e4cdc;
  overflow: hidden;
  transition: height 0.3s, width 0.3s, top 0.3s;
}
header .top-header .menuTop ul {
  background-color: inherit;
  list-style-type: none;
  padding-top: 32vh;
  padding-left: 0;
}
header .top-header .menuTop li {
  display: block;
  background-color: #6765e2;
  padding: 3vh;
}
header .top-header .menuTop li:hover {
  background-color: #7674da;
}
header .top-header .menuTop a {
  text-decoration: none;
  text-align: center;
  color: white;
  display: block;
}
header .top-header .topMenu-icon-collpse {
  position: fixed;
  height: 51px;
  width: 97px;
  right: 0;
  z-index: 3;
}
header .top-header .topMenu-icon-collpse .icon-collapse {
  width: 60%;
}
header .top-header .topMenu-icon-collpse .hamburger.is-active .hamburger-inner,
header .top-header .topMenu-icon-collpse .hamburger.is-active .hamburger-inner:after,
header .top-header .topMenu-icon-collpse .hamburger.is-active .hamburger-inner:before {
  background-color: rgb(201, 198, 198);
}
header .top-header .topMenu-icon-collpse .hamburger.is-active .hamburger-inner:after {
  width: 40px;
}
header .top-header .topMenu-icon-collpse .hamburger--emphatic .hamburger-inner:after {
  width: 30px;
}
header .top-header .topMenu-icon-collpse button:focus {
  outline: none !important;
}
header .top-header .topMenu-icon-collpse .close-open {
  cursor: pointer;
  transition: all 0.5s;
  position: absolute;
  right: 52px;
}
header .top-header .topMenu-icon-collpse .collapse-animate-hide {
  transform: rotate(360deg);
  opacity: 0;
}
header .top-header .topMenu-icon-collpse .collapse-animate-show {
  transform: rotate(360deg);
  opacity: 1 !important;
  visibility: visible !important;
}
header .top-header .topMenu-icon-collpse .span-close {
  font-size: 74px;
  top: -32px;
  color: wheat;
  opacity: 0;
  visibility: hidden;
}
header .top-header .ml-40 {
  margin-left: 40px;
}

/*-------------------------------SideTop Menu---------------------*/
main {
  /*-----------topSideMenu refer to right menu-----------------*/
}
main .topSideMenu {
  font-family: "robotoregular";
  transform: rotate(-90deg);
  position: absolute;
  z-index: 5;
  left: -47vw;
  width: 100vw;
  top: 15vh;
}
main .topSideMenu ul {
  list-style-type: none;
}
main .topSideMenu li {
  margin: 20px;
  display: inline;
}
main .topSideMenu li a {
  color: #141414;
  position: relative;
  /* this is for animating the active border */
}
main .topSideMenu li a:after {
  content: "";
  display: inline-block;
  width: 0;
  height: 3px;
  position: absolute;
  background: #4e4cdc;
  transition: width 0.5s ease;
  margin: auto;
  transform: rotate(180deg);
  top: 27px;
  left: 1px;
}
main .topSideMenu li.active-item.page1-menu a {
  color: #4e4cdc;
}
main .topSideMenu li.active-item.page1-menu a:after {
  width: 150%;
  left: -9px;
}
main .topSideMenu li.active-item.page2-menu a {
  color: #4e4cdc;
}
main .topSideMenu li.active-item.page2-menu a:after {
  width: 85%;
  left: 4px;
}
main .topSideMenu li.active-item.page3-menu a {
  color: #4e4cdc;
}
main .topSideMenu li.active-item.page3-menu a:after {
  width: 59%;
  left: 20px;
}
main .topSideMenu li.active-item.page4-menu a {
  color: #4e4cdc;
}
main .topSideMenu li.active-item.page4-menu a:after {
  width: 76%;
  left: 6px;
}
main .topSideMenu a {
  text-decoration: none;
  color: black;
  font-size: 2.5vh;
}

/*-------------------------------Start Public class---------------------*/
.blur-div {
  filter: blur(14px);
  transition: 0.5s filter ease;
}

.blur-jupiter {
  filter: blur(8px);
}

.btn-success {
  background-color: #4e4cdc !important;
}
.btn-success:hover {
  background-color: #7470c3 !important;
}

.disable-pages {
  position: fixed;
  display: block;
  width: 70vw;
  height: 100vh;
  z-index: 5;
  visibility: visible;
  left: 0;
  top: 0;
}

.cursor-context {
  cursor: context-menu;
}

.showPage1,
.showPage2,
.showPage3,
.showPage4 {
  opacity: 1;
  z-index: 1;
  visibility: visible;
}

.next-item {
  transform: translatex(100vw);
  transition: all 0.5s;
  z-index: 2;
  opacity: 0;
}

.show-item {
  transform: translatex(0) !important;
  transition: all 0.5s;
  z-index: 2;
  opacity: 1 !important;
}

.carousel-item-p {
  width: 100%;
  transition: all 1s;
  position: absolute;
  top: 0;
  right: 0;
}

/*---Start Carouusel Handling(btn under baner)  ----*/
.carouselHandel {
  color: #d4d4d4;
  display: flex;
  position: absolute;
  width: 150px;
}
.carouselHandel .active {
  color: #4e4cdc;
}
.carouselHandel li {
  list-style-type: circle;
  margin: 0 -8px;
  color: rgb(160, 158, 158);
  margin-left: 7px;
  cursor: pointer;
  z-index: 2;
  font-size: 23px;
}
.carouselHandel li.active {
  list-style-type: disc;
}

.carousel-indicators li {
  background-color: unset;
  width: 22px;
}

/*-------------End Carouusel Handling ------ -----*/
/*-------------------------------End Public class---------------------*/
/*----------------------------------- Start define some buttons ------------------*/
.btn-submit {
  padding: 7px 22px;
  border-radius: 4px;
  outline: none;
  border: none;
  background-color: #4e4cdc;
  color: white;
  box-shadow: 1px 2px 8px #4e4cdc;
  text-decoration: none;
  font-family: "robotomedium";
}
.btn-submit:hover {
  color: white; /* because of a tag default blue color */
  background-color: #4d4ca5;
}

.mr-auto {
  margin: auto !important;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */ /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */ /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
             supported by Chrome, Edge, Opera and Firefox */
}

/*----------------------------------- End define some buttons ------------------*/
/*----------------------------------- Start Page 1 ------------------*/
.page1 {
  /* animation Page 1  */
}
.page1 .display-2 {
  font-size: calc(1.375rem + 3.9vw);
}
.page1 p.title {
  font-family: "robotoblack";
}
.page1 p.text {
  font-family: "robotoregular";
  letter-spacing: 1px;
}
.page1 svg {
  position: absolute;
  top: 0;
  left: 25vw;
  z-index: -1;
  width: 50%;
  height: 100%;
}
.page1 svg circle {
  animation: SkewCircleBgPage1 5s infinite alternate;
  fill: #eae5f2;
}
@keyframes SkewCircleBgPage1 {
  from {
    transform: skewX(0deg);
    transform: skewy(50deg);
  }
  to {
    transform: skewX(50deg);
    transform: skewy(0deg);
  }
}

/*----------------------------------- End Page 1 ------------------*/
/*---------------------------------------- Start Page 2 ------------------*/
.page2 {
  width: 100%;
  height: 100%;
  /*------cartMain refer 3 colms center Page 2-------/*/
  /* --set text 3 colms  ---/*/
}
.page2 .what-we-do {
  font-family: "robotoregular";
}
.page2 .what-we-do b {
  font-family: "robotoblack";
}
.page2 .cartMain {
  /*---h3Page2 refer title 3 colms ---/*/
}
.page2 .cartMain .h3Page2 {
  display: inline;
  margin: 2vh;
  font-size: 4.5vh;
  color: black;
  font-weight: 200;
}
.page2 .cartMain .heightCol {
  height: 70px;
  margin-top: 30px;
  padding: 20px 0;
  display: flex;
  align-items: flex-end;
}
.page2 .cartMain .heightCol:hover img {
  transform: rotateY(360deg);
}
.page2 .cartMain .heightCol:hover a::after {
  width: 100%;
}
.page2 .cartMain .heightCol img {
  transform: rotateY(0deg);
  transition: transform 0.5s;
}
.page2 .cartMain .heightCol a {
  position: relative;
}
.page2 .cartMain .heightCol a::after {
  content: "";
  position: absolute;
  background-color: #4e4cdc;
  display: inline-block;
  width: 0;
  height: 3px;
  left: 0;
  bottom: -3px;
  transition: width 0.3s;
}
.page2 p {
  text-align: justify;
  font-weight: 200;
  font-size: 1vw;
  line-height: 26px;
  letter-spacing: 1px;
}
.page2 a {
  text-decoration: none;
}

/*------------------------------------ End Page 2 ---------------------*/
/*------------------------------------ Start Page 3 ---------------------*/
.page3 {
  overflow: hidden;
  /*-------------Start Slider 1 of Caruasol Page 3 -----*/
  /*-------------End Slider 1 of Caruasol Page 3 -----*/
}
.page3 .h3Page3 {
  margin-top: -20px;
  margin-bottom: 10px;
  margin-left: 10px;
  display: block;
  font-size: 69px;
  color: black;
  font-family: "robotoblack";
}
.page3 p {
  font-weight: 400;
  margin-bottom: 0;
  font-size: 17px;
}
.page3 .btnSlider {
  background-color: #f2f2ff;
  color: #4e4cdc;
  padding: 5px 30px;
  margin-left: 20px;
  margin-top: 20px;
  z-index: 5;
}
.page3 .img-size {
  width: 100%;
  height: 100%;
}

/*------------------------------------ End Page 3 ---------------------*/
/*----------------------------------- Start Page 4 ------------------*/
.page4 {
  width: 100%;
  /*-------bgpage4 refer to bg icon ----*/
  /*-----------------Start Form And input page4 ------------*/
  /*-----------------End set input page4 ------------*/
  /*----------------Start About me page4 ------------*/
  /*------------Start Social icon ------------*/
  /*------------End Social icon --------------*/
  /*----------------End About me page4 ------------*/
}
.page4 .titlePage4 {
  font-size: 6vw;
  font-family: robotoblack;
}
.page4 .bgPage4 {
  right: 50%;
  top: -89px;
  z-index: -1;
}
.page4 .multiselect__tags {
  border: none;
  border-bottom: 1px solid #bbbbbb;
  border-radius: 0;
}
.page4 .multiselect__option--highlight,
.page4 .multiselect__tag-icon:hover,
.page4 .multiselect__tag {
  background: #4e4cdc;
}
.page4 .multiselect__tag-icon:after {
  color: white;
}
.page4 .input-animate {
  height: 100%;
  width: 100%;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  color: gray;
  font-size: 14px;
  padding: 0 10px;
}
.page4 .btnPage4 {
  width: 143px;
  margin-top: 22px;
  outline: none;
}
.page4 .aboutMe span {
  font-weight: 200;
  font-size: 1.4vw;
  color: #273064;
}
.page4 .aboutMe div {
  margin-top: 20px;
}
.page4 .aboutMe div img {
  width: 53px;
  margin-right: 10px;
}
.page4 .aboutMe a.tel {
  text-decoration: none;
  color: #273064;
}
.page4 .aboutMe a.tel:visited {
  color: #273064;
}
.page4 .socialIcon {
  padding-top: 3vh;
  padding-left: 2vw;
}
.page4 .socialIcon img {
  width: 40px;
  margin: 9px;
}
.page4 .default-underline {
  z-index: 0 !important;
}
.page4 .multiselect__placeholder {
  color: #8a8a8a;
}
.page4 span.valid,
.page4 span.untouched,
.page4 span.valid,
.page4 span.failed,
.page4 span.changed,
.page4 span.passed {
  opacity: 0;
  transition: opacity 0.5s, top 0.5s;
  top: 0;
}
.page4 span.invalid {
  color: #ff0000;
  font-size: 12px;
  position: absolute;
  opacity: 1;
  top: auto;
}
.page4 .active-underline {
  z-index: 0 !important;
}
.page4 .input-swiper input {
  padding-left: 7px !important;
}
.page4 .jupiter-textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid #d1d1d1;
  display: block;
}
.page4 .jupiter-textarea:focus {
  outline: none;
}
.page4 .jupiter-textarea:focus + span {
  font-size: 11px;
  top: -20px;
}
.page4 .relative {
  position: relative;
}
.page4 span.text-area-placeholder {
  position: absolute;
  width: 240px;
  top: 0;
  font-size: 14px;
  color: gray;
  pointer-events: none;
  left: 10px;
  transition: font-size 0.5s, top 0.5s;
}
.page4 span.text-area-placeholder.active {
  font-size: 11px;
  top: -20px;
}

/*------------------------------------------ End Page 4 ------------------*/
/*----------------------------------- Start See More Section In all themes ------------------*/
.see-more h3 {
  font-size: 20px;
  font-family: "open_sanssemibold";
}
.see-more .project-item {
  padding: 25px;
}
.see-more .project-item img {
  width: 100%;
  height: 225px;
  -o-object-fit: cover;
     object-fit: cover;
}
.see-more .project-item .w-100 a {
  display: block;
  position: relative;
}
.see-more .project-item .w-100 a::after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='106' height='106' viewBox='0 0 106 106'%3E%3Cg id='Group_572' data-name='Group 572' transform='translate(-649 -600)'%3E%3Ccircle id='Ellipse_188' data-name='Ellipse 188' cx='53' cy='53' r='53' transform='translate(649 600)' fill='%23fff' opacity='0.15'/%3E%3Cpath id='icons8_eye' d='M18.723,5C7.591,5,.4,16.5.271,16.707A1.245,1.245,0,0,0,.2,18.162l0,.007c.021.044,6.057,11.794,18.515,11.794,12.405,0,18.432-11.635,18.506-11.777l.015-.024a1.246,1.246,0,0,0-.066-1.453l0,0C37.045,16.5,29.854,5,18.723,5Zm0,3.745a8.737,8.737,0,1,1-8.737,8.737A8.737,8.737,0,0,1,18.723,8.745Zm0,4.993a3.745,3.745,0,1,0,3.745,3.745A3.745,3.745,0,0,0,18.723,13.737Z' transform='translate(683.277 635.518)' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E%0A");
  width: 106px;
  height: 106px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  opacity: 0;
  transition: 0.2s ease-in;
}
.see-more .project-item .w-100 a::before {
  background: rgba(7, 34, 78, 0.3);
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: 0.2s ease-in;
  opacity: 0;
}
.see-more .project-item .title {
  font-size: 18px;
  margin-top: 18px;
}
.see-more .project-item .text {
  font-size: 15px;
  font-family: "open_sanslight";
}
.see-more .project-item .subtitle {
  font-size: 16px;
  font-family: "open_sanslight";
}
.see-more .project-item .btn-info {
  margin-top: 22px;
  display: flex;
  width: 60%;
  justify-content: center;
  color: white;
  background: #3d5afe;
  border: none;
  padding: 10px;
  border-radius: 0;
  transition: width 0.3s;
}
.see-more .project-item:hover .btn-info {
  width: 100%;
}
.see-more .project-item:hover .w-100 a::after {
  opacity: 1;
}
.see-more .project-item:hover .w-100 a::before {
  opacity: 1;
}

/*----------------------------------- Start See More Section In all themes ------------------*/
/*-------------------------------------------------- xs mobile devices  -------------------*/
@media (max-width: 575.98px) {
  header .jupiter {
    margin-left: 15px;
    font-size: 9vw;
  }
  header .top-header {
    position: relative;
    padding: 0px 0px;
    top: 0;
  }
  header .top-header .menuTop {
    height: 100vh;
  }
  header .top-header .menuTop li {
    padding: 3vh;
  }
  header .top-header .menuTop ul {
    padding-top: 20vh;
  }
  /*-----------topSideMenu refer to right menu-----------------*/
  .topSideMenu {
    display: none;
  }
  /*----------------------Start Top Menu ----------*/
  .menuTop-show {
    top: 0 !important;
    visibility: visible !important;
  }
  .menuTop {
    top: 99vh;
  }
  .menuTop li {
    margin-top: 2vh;
    display: inline-block;
  }
  .menuTop a {
    font-size: 22px;
    padding: 0 0;
  }
  /*----------Start page1 responsive -------*/
  .page1 {
    padding-top: 20px;
  }
  .page1 svg {
    display: none;
  }
  .page1 .text-center-re {
    text-align: center;
  }
  .page1 .margin-left {
    margin-left: 0;
  }
  .page1 .text {
    font-size: 3.5vw;
  }
  /*----------End page1 responsive -------*/
  /*----------Start page2 responsive 500 -------*/
  .page2 {
    padding-left: 7px;
  }
  .page2 .cartMain {
    margin: 20px 4px 20px 2px;
  }
  .page2 .cartMain .h3Page2 {
    font-size: 2.5vh;
  }
  .page2 p {
    font-size: 3.2vw;
  }
  /*----------End page2 responsive -------*/
  /*----------start page3 responsive 500px -------*/
  .page3 {
    padding: 16px 2px 32px 21px;
  }
  .page3 .col-carousel-height {
    height: 886px;
    position: relative;
    overflow: hidden;
  }
  .page3 .carouselHandel {
    left: auto;
    bottom: auto;
    position: relative !important;
  }
  .page3 .img-size-sm {
    height: 473px;
    overflow: hidden;
    margin-bottom: 20px;
    margin: auto;
  }
  .page3 p {
    padding-left: 0;
    width: 100%;
    font-size: 3.8vw;
  }
  .page3 p:nth-child(1) {
    margin: 8px 0;
  }
  .page3 .h3Page3 {
    font-size: 19vw;
  }
  /*----------End page3 responsive -------*/
  /*----------start page3 responsive 500 -------*/
  .page4 {
    padding: 0 30px 0 32px;
  }
  .page4 .formPage4 {
    margin-top: 15px;
  }
  .page4 .bgPage4 {
    right: 0;
    top: 0;
    width: 38%;
  }
  .page4 .aboutMe {
    margin-left: 0;
    margin-top: 47px;
  }
  .page4 .aboutMe img {
    margin-right: 5px !important;
  }
  .page4 .aboutMe span {
    font-size: 3.7vw;
  }
  .page4 .titlePage4 {
    font-size: 17vw;
  }
  .page4 .input-animate {
    font-size: 14px;
  }
  /*----------End page3 responsive -------*/
  /*----------Start See More Section In all themes -------*/
  .see-more h3 {
    font-size: 17px;
  }
  .see-more .project-item .btn-info {
    width: 70%;
  }
  /*----------End See More Section In all themes -------*/
}
/*-------------------------------------------------- Galaxy fold  -------------------*/
@media (width: 280px) and (height: 653px) {
  .page4 .input-animate {
    font-size: 10px;
  }
}
/*-------------------------------------------------- sm mobile devices  -------------------*/
@media (max-width: 767.98px) and (min-width: 576px) {
  header .jupiter {
    margin-left: 15px;
    font-size: 210%;
  }
  header .top-header {
    position: relative;
    padding: 0px 0px;
    top: 0;
  }
  /*-----------topSideMenu refer to right menu-----------------*/
  .topSideMenu {
    display: none;
  }
  /*----------------------Start Top Menu ----------*/
  .menuTop-show {
    top: -40px !important;
    visibility: visible !important;
  }
  .menuTop {
    top: 746px;
  }
  .menuTop li {
    margin-top: 3vh;
    display: inline-block;
  }
  .menuTop a {
    font-size: 5vh;
    padding: 1vh 0;
  }
  /*----------Start page1 responsive -------*/
  .page1 {
    padding-top: 20px;
  }
  .page1 svg {
    display: none;
  }
  .page1 .text-center-re {
    text-align: center;
  }
  .page1 .margin-left {
    margin-left: 0;
  }
  /*----------End page1 responsive -------*/
  /*----------Start page2 responsive 500 -------*/
  .page2 {
    padding-left: 7px;
  }
  .page2 .cartMain {
    margin: 20px 4px 20px 2px;
  }
  .page2 p {
    font-size: 2vw;
  }
  /*----------End page2 responsive -------*/
  /*----------start page3 responsive 500px -------*/
  .page3 {
    padding: 16px 2px 32px 21px;
  }
  .page3 .col-carousel-height {
    height: 886px;
    position: relative;
    overflow: hidden;
  }
  .page3 .carouselHandel {
    right: 20%;
    bottom: inherit;
  }
  .page3 .img-size-sm {
    height: 473px;
    overflow: hidden;
    margin-bottom: 20px;
    margin: auto;
  }
  .page3 p {
    padding-left: 0;
    width: 100%;
  }
  /*----------End page3 responsive -------*/
  /*----------start page3 responsive 500 -------*/
  .page4 {
    padding: 0 30px 0 32px;
  }
  .page4 .formPage4 {
    margin-top: 15px;
  }
  .page4 .bgPage4 {
    right: 0;
    top: 0;
    width: 38%;
  }
  .page4 .aboutMe {
    margin-left: 0;
    margin-top: 47px;
  }
  .page4 .aboutMe img {
    margin-right: 5px !important;
  }
  .page4 .aboutMe span {
    font-size: 18px;
  }
  /*----------End page3 responsive -------*/
}
/*--------------------------------------------------md devices -------------------*/
@media (max-width: 991.98px) and (min-width: 768px) {
  /* some global properties in this screen size */
  body {
    overflow: hidden;
  }
  .display-3 {
    font-size: calc(1.525rem + 2.1vw);
  }
  section {
    opacity: 0;
    z-index: 0;
    visibility: hidden;
    position: absolute;
    transition: opacity 1s;
  }
  header .top-header {
    position: relative;
    padding: 0px 0px;
    top: 0;
  }
  header .top-header .menuTop {
    height: 100vh;
  }
  /*----------------------Start Top Menu ----------*/
  .menuTop-show {
    top: 0 !important;
    visibility: visible !important;
    width: 50% !important;
  }
  .menuTop {
    top: 947px;
  }
  .menuTop li {
    margin: 4vh 7vh;
  }
  .topSideMenu {
    left: -30vw;
  }
  /*----------Start page1 responsive -------*/
  .page1 {
    top: 0;
    left: 0;
    padding: 2.54167vh 1.54167vw 12.54167vh 14.54167vw;
    width: 100%;
    height: 100%;
  }
  .page1 .titr img {
    width: 345px;
  }
  .page1 .display-2 {
    font-size: calc(1.375rem + 1.6vw);
  }
  .page1 svg {
    display: none;
  }
  .page1 .margin-left {
    margin-left: 0;
  }
  .page1 .text-center-re {
    text-align: left;
  }
  /* ---------------------Start Animat Show Page ----------------*/
  .title-p1-animate {
    transform: translatex(-50vw);
    transition: transform 1s;
  }
  .img-p1-animate {
    transform: translatey(-50vw);
    transition: transform 1s;
  }
  .text-p1-animate {
    transition: all 0.5s;
    transform: translatey(20vw);
  }
  .title-p1-animate2 {
    transition: all 0.5s;
    transform: translatex(0vw) !important;
  }
  .img-p1-animate2 {
    transition: all 0.5s;
    transform: translatey(0vw) !important;
  }
  .text-p1-animate2 {
    transition: all 0.5s;
    transform: translatey(0vw) !important;
  }
  /* ---------------------End Animat Show Page ----------------*/
  /*----------End page1 responsive -------*/
  /*----------Start page2 responsive -------*/
  .page2 {
    overflow: hidden;
    top: 0;
    left: 0;
    padding: 2.54167vh 1.54167vw 12.54167vh 14.54167vw;
    width: 100%;
    height: 100%;
  }
  .page2 .cartMain {
    margin: 20px 4px 20px 2px;
  }
  .page2 .heightCol img {
    transform: scale(0.8);
  }
  /* ---------------------Start Animat Show Page ----------------*/
  .title-p2-animate {
    transform: translateX(-50vw);
    transition: transform 1s;
  }
  .img-p2-animate {
    transform: translatey(-50vw);
    transition: transform 1s;
  }
  .text-p2-animate {
    transition: all 0.5s;
    transform: translatey(20vw);
  }
  .title-p2-animate2 {
    transition: all 0.5s;
    transform: translateX(0vw) !important;
  }
  .img-p2-animate2 {
    transition: all 0.5s;
    transform: translatey(0vw) !important;
  }
  .text-p2-animate2 {
    transition: all 0.5s;
    transform: translatey(0vw) !important;
  }
  /* ---------------------End Animat Show Page ----------------*/
  /*----------End page2 responsive -------*/
  /*----------start page3 responsive -------*/
  .page3 {
    top: 0;
    left: 0;
    padding: 2.54167vh 1.54167vw 12.54167vh 14.54167vw;
    width: 100%;
    height: 100%;
  }
  .page3 .carouselHandel {
    right: 140px;
    bottom: inherit;
  }
  .page3 p {
    padding-left: 0;
    width: 100%;
    font-size: 13px;
  }
  .page3 .col-carousel-height {
    height: 490px;
    position: relative;
    overflow: hidden;
  }
  /* ---------------------Start Animat Show Page ----------------*/
  .tittle-p3-animate {
    transform: translatey(-100vw);
    transition: transform 1s;
  }
  .img-p3-animate {
    transform: translatex(-50vw);
    transition: transform 1s;
  }
  .text-p3-animate {
    transform: translatey(30vw);
    transition: transform 1s;
  }
  .tittle-p3-animate2 {
    transition: all 0.5s;
    transform: translateX(0vw) !important;
  }
  .img-p3-animate2 {
    transition: all 0.5s;
    transform: translatex(0vw) !important;
  }
  .text-p3-animate2 {
    transition: all 0.5s;
    transform: translatey(0vw) !important;
  }
  /* ---------------------End Animat Show Page ----------------*/
  /*----------End page3 responsive -------*/
  /*----------start page3 responsive -------*/
  .page4 {
    top: 0;
    left: 0;
    padding: 2.54167vh 1.54167vw 12.54167vh 14.54167vw;
    width: 100%;
    height: 100%;
  }
  .page4 .formPage4 {
    margin-top: 37px;
    margin-right: 20px;
  }
  .page4 .bgPage4 {
    right: 0;
    top: 0;
    width: 38%;
  }
  .page4 .aboutMe {
    margin-left: 0;
    margin-top: 0;
  }
  .page4 .aboutMe span {
    font-size: 1.8vw;
  }
  .page4 .titlePage4 {
    font-size: 6.5vw;
  }
  /* ---------------------Start Animat Show Page ----------------*/
  .tittle-p4-animate {
    transform: translatey(-20vw);
    transition: transform 0.5s;
  }
  .social-p4-animate {
    transform: translatey(-562px);
    transition: transform 0.5s;
  }
  .text-p4-animate {
    transform: translatex(-50vw);
    transition: transform 0.5s;
  }
  .tittle-p4-animate2 {
    transition: all 1s;
    transform: translatey(0vw) !important;
  }
  .social-p4-animate2 {
    transition: all 1s;
    transform: translatey(0vw) !important;
  }
  .text-p4-animate2 {
    transition: all 0.5s;
    transform: translatey(0vw) !important;
  }
  /* ---------------------End Animat Show Page ----------------*/
  /*----------End page4 responsive -------*/
}
/*--------------------------------------------------ipad devices -------------------*/
@media (width: 768px) and (height: 1024px) {
  /* some global properties in this screen size */
  body {
    overflow: hidden;
  }
  .display-3 {
    font-size: calc(1.525rem + 2.1vw);
  }
  section {
    opacity: 0;
    z-index: 0;
    visibility: hidden;
    position: absolute;
    transition: opacity 1s;
  }
  header .top-header {
    position: relative;
    padding: 0px 0px;
    top: 0;
  }
  header .top-header .menuTop {
    height: 100vh;
  }
  header .jupiter {
    font-size: 3vw;
  }
  main .topSideMenu {
    top: 19vh;
  }
  main .topSideMenu a {
    font-size: 1.7vh;
  }
  /*----------------------Start Top Menu ----------*/
  .menuTop-show {
    top: 0 !important;
    visibility: visible !important;
    width: 50% !important;
  }
  .menuTop {
    top: 99vh;
  }
  .menuTop li {
    margin: 4vh 7vh;
  }
  .topSideMenu {
    left: -30vw;
  }
  /*----------Start page1 responsive -------*/
  .page1 {
    padding: 11.54167vh 8.54167vw 12.54167vh 14.54167vw;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .page1 .titr img {
    width: 345px;
  }
  .page1 .display-2 {
    font-size: calc(1.375rem + 1.6vw);
  }
  .page1 svg {
    display: none;
  }
  .page1 .margin-left {
    margin-left: 0;
  }
  .page1 .text-center-re {
    text-align: left;
  }
  .page1 .text {
    font-size: 1.4vw;
  }
  /* ---------------------Start Animat Show Page ----------------*/
  .title-p1-animate {
    transform: translatex(-50vw);
    transition: transform 1s;
  }
  .img-p1-animate {
    transform: translatey(-50vw);
    transition: transform 1s;
  }
  .text-p1-animate {
    transition: all 0.5s;
    transform: translatey(20vw);
  }
  .title-p1-animate2 {
    transition: all 0.5s;
    transform: translatex(0vw) !important;
  }
  .img-p1-animate2 {
    transition: all 0.5s;
    transform: translatey(0vw) !important;
  }
  .text-p1-animate2 {
    transition: all 0.5s;
    transform: translatey(0vw) !important;
  }
  /* ---------------------End Animat Show Page ----------------*/
  /*----------End page1 responsive -------*/
  /*----------Start page2 responsive -------*/
  .page2 {
    overflow: hidden;
    top: 0;
    left: 0;
    padding: 11.54167vh 8.54167vw 12.54167vh 14.54167vw;
  }
  .page2 .cartMain {
    margin: 20px 4px 20px 2px;
  }
  .page2 .cartMain .h3Page2 {
    font-size: 1.5vh;
  }
  .page2 .heightCol img {
    transform: scale(0.8);
  }
  /* ---------------------Start Animat Show Page ----------------*/
  .title-p2-animate {
    transform: translateX(-50vw);
    transition: transform 1s;
  }
  .img-p2-animate {
    transform: translatey(-50vw);
    transition: transform 1s;
  }
  .text-p2-animate {
    transition: all 0.5s;
    transform: translatey(20vw);
  }
  .title-p2-animate2 {
    transition: all 0.5s;
    transform: translateX(0vw) !important;
  }
  .img-p2-animate2 {
    transition: all 0.5s;
    transform: translatey(0vw) !important;
  }
  .text-p2-animate2 {
    transition: all 0.5s;
    transform: translatey(0vw) !important;
  }
  /* ---------------------End Animat Show Page ----------------*/
  /*----------End page2 responsive -------*/
  /*----------start page3 responsive -------*/
  .page3 {
    padding: 11.54167vh 8.54167vw 12.54167vh 14.54167vw;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .page3 .carouselHandel {
    left: -120px;
    bottom: -30px;
  }
  .page3 p {
    padding-left: 0;
    width: 100%;
    font-size: 13px;
  }
  .page3 .col-carousel-height {
    height: 490px;
    position: relative;
    overflow: hidden;
  }
  /* ---------------------Start Animat Show Page ----------------*/
  .tittle-p3-animate {
    transform: translatey(-100vw);
    transition: transform 1s;
  }
  .img-p3-animate {
    transform: translatex(-50vw);
    transition: transform 1s;
  }
  .text-p3-animate {
    transform: translatey(30vw);
    transition: transform 1s;
  }
  .tittle-p3-animate2 {
    transition: all 0.5s;
    transform: translateX(0vw) !important;
  }
  .img-p3-animate2 {
    transition: all 0.5s;
    transform: translatex(0vw) !important;
  }
  .text-p3-animate2 {
    transition: all 0.5s;
    transform: translatey(0vw) !important;
  }
  /* ---------------------End Animat Show Page ----------------*/
  /*----------End page3 responsive -------*/
  /*----------start page3 responsive -------*/
  .page4 {
    padding: 11.54167vh 8.54167vw 12.54167vh 14.54167vw;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .page4 .formPage4 {
    margin-top: 37px;
    margin-right: 20px;
  }
  .page4 .bgPage4 {
    right: 0;
    top: 0;
    width: 38%;
  }
  .page4 .aboutMe {
    margin-left: 0;
    margin-top: 0;
  }
  .page4 .aboutMe span {
    font-size: 1.8vw;
  }
  .page4 .titlePage4 {
    font-size: 6.5vw;
  }
  /* ---------------------Start Animat Show Page ----------------*/
  .tittle-p4-animate {
    transform: translatey(-20vw);
    transition: transform 0.5s;
  }
  .social-p4-animate {
    transform: translatey(-562px);
    transition: transform 0.5s;
  }
  .text-p4-animate {
    transform: translatex(-50vw);
    transition: transform 0.5s;
  }
  .tittle-p4-animate2 {
    transition: all 1s;
    transform: translatey(0vw) !important;
  }
  .social-p4-animate2 {
    transition: all 1s;
    transform: translatey(0vw) !important;
  }
  .text-p4-animate2 {
    transition: all 0.5s;
    transform: translatey(0vw) !important;
  }
  /* ---------------------End Animat Show Page ----------------*/
  /*----------End page4 responsive -------*/
}
/*-------------------------------------------------- large devices   -------------------*/
@media (max-width: 1199.98px) and (min-width: 992px) {
  /* some global properties in this screen size */
  .display-3 {
    font-size: calc(1.525rem + 2.5vw);
  }
  section {
    opacity: 0;
    z-index: 0;
    visibility: hidden;
    position: absolute;
    transition: opacity 1s;
  }
  /* ----------------- this properties inclueds all show pages classes --------------------*/
  header .jupiter {
    font-size: 3vw;
  }
  body {
    overflow: hidden;
  }
  .top-header {
    position: fixed;
  }
  /*----------------------Start Top Menu ----------*/
  .menuTop {
    top: 99vh;
  }
  .menuTop li {
    margin: 4vh 7vh;
  }
  .menuTop a {
    font-size: 2.5vh;
  }
  .menuTop-show {
    width: 45vw !important;
    top: 0;
  }
  main .topSideMenu {
    top: 23vh;
  }
  /*----------Start page1 responsive -------*/
  .page1 {
    transition: all 0.5s;
    left: 0;
    top: 0;
    width: 100%;
    padding: 12.54167vh 8.54167vw 13.54167vh 13.54167vw;
    height: 100%;
  }
  .page1 svg {
    display: block;
  }
  .page1 .margin-left {
    margin-left: 6%;
  }
  .page1 .img-p1-animat-hover {
    position: relative;
  }
  .page1 .img-p1-animat-hover .img2-hover-p1 {
    position: absolute;
    width: 115px;
    left: 35%;
    top: -2%;
    transition: all 0.2s;
  }
  .page1 .img-p1-animat-hover .img1-hover-p1 {
    position: absolute;
    width: 10%;
    left: 20%;
    top: 15%;
    transition: all 0.2s;
  }
  .page1 .img-p1-animat-hover .img3-hover-p1 {
    position: absolute;
    width: 80px;
    right: 59%;
    bottom: 8%;
    transition: all 0.2s;
  }
  .page1 .img-p1-animat-hover .img4-hover-p1 {
    position: absolute;
    width: 30%;
    right: -41px;
    bottom: 66%;
    transition: all 0.2s;
  }
  .page1 .img-p1-animat-hover:hover .img1-hover-p1 {
    transform: rotate(360deg);
    transition: all 0.5s;
  }
  .page1 .img-p1-animat-hover:hover .img2-hover-p1 {
    position: absolute;
    width: 130px;
    transition: all 0.2s;
  }
  .page1 .img-p1-animat-hover:hover .img3-hover-p1 {
    width: 120px;
    bottom: 2%;
    right: 55%;
    transition: all 0.2s;
  }
  .page1 .img-p1-animat-hover:hover .img4-hover-p1 {
    bottom: 70%;
    transition: all 0.2s;
  }
  /* ---------------------Start Animat Show Page ----------------*/
  .title-p1-animate {
    transform: translatex(-50vw);
    transition: transform 1s;
  }
  .img-p1-animate {
    transform: translatey(-50vw);
    transition: transform 1s;
  }
  .text-p1-animate {
    transition: all 0.5s;
    transform: translatey(20vw);
  }
  .title-p1-animate2 {
    transition: all 0.5s;
    transform: translatex(0vw) !important;
  }
  .img-p1-animate2 {
    transition: all 0.5s;
    transform: translatey(0vw) !important;
  }
  .text-p1-animate2 {
    transition: all 0.5s;
    transform: translatey(0vw) !important;
  }
  /* ---------------------End Animat Show Page ----------------*/
  /*----------End page1 responsive -------*/
  /*----------Start page2 responsive -------*/
  .page2 {
    transition: all 0.5s;
    overflow: hidden;
    left: 0;
    top: 0;
    width: 100%;
    padding: 12.54167vh 8.54167vw 13.54167vh 13.54167vw;
    height: 100%;
  }
  .page2 .cartMain {
    margin: 20px 37px 20px 129px;
  }
  .page2 p {
    font-size: 1.3vw;
  }
  /* ---------------------Start Animat Show Page ----------------*/
  .title-p2-animate {
    transform: translateX(-50vw);
    transition: transform 1s;
  }
  .img-p2-animate {
    transform: translatey(-50vw);
    transition: transform 1s;
  }
  .text-p2-animate {
    transition: all 0.5s;
    transform: translatey(20vw);
  }
  .title-p2-animate2 {
    transition: all 0.5s;
    transform: translateX(0vw) !important;
  }
  .img-p2-animate2 {
    transition: all 0.5s;
    transform: translatey(0vw) !important;
  }
  .text-p2-animate2 {
    transition: all 0.5s;
    transform: translatey(0vw) !important;
  }
  /* ---------------------End Animat Show Page ----------------*/
  /*----------End page2 responsive -------*/
  /*----------start page3 responsive x-large-------*/
  .page3 {
    transition: all 0.5s;
    left: 0;
    top: 0;
    width: 100%;
    padding: 12.54167vh 8.54167vw 13.54167vh 13.54167vw;
    height: 100%;
  }
  .page3 .carousel-item-p {
    position: absolute;
  }
  .page3 .carouselHandel {
    bottom: -10%;
    left: -20%;
  }
  .page3 .col-carousel-height {
    height: 500px;
    position: relative;
    overflow: hidden;
  }
  .page3 .img-size-sm {
    height: 500px;
  }
  .page3 p {
    padding-left: 20px;
  }
  /* ---------------------Start Animat Show Page ----------------*/
  .tittle-p3-animate {
    transform: translatey(-100vw);
    transition: transform 1s;
  }
  .img-p3-animate {
    transform: translatex(-50vw);
    transition: transform 1s;
  }
  .text-p3-animate {
    transform: translatey(30vw);
    transition: transform 1s;
  }
  .tittle-p3-animate2 {
    transition: all 0.5s;
    transform: translateX(0vw) !important;
  }
  .img-p3-animate2 {
    transition: all 0.5s;
    transform: translatex(0vw) !important;
  }
  .text-p3-animate2 {
    transition: all 0.5s;
    transform: translatey(0vw) !important;
  }
  /* ---------------------End Animat Show Page ----------------*/
  /*----------End page3 responsive -------*/
  /*----------start page3 responsive ------- x-large*/
  .page4 {
    transition: all 0.5s;
    left: 0;
    top: 0;
    width: 100%;
    padding: 12.54167vh 8.54167vw 13.54167vh 13.54167vw;
    height: 100%;
  }
  .page4 .formPage4 {
    margin-top: 43px;
  }
  .page4 .bgPage4 {
    width: 123px;
  }
  .page4 .aboutMe {
    margin-left: 50px;
  }
  /* ---------------------Start Animat Show Page ----------------*/
  .tittle-p4-animate {
    transform: translatey(-20vw);
    transition: transform 0.5s;
  }
  .social-p4-animate {
    transform: translatey(-562px);
    transition: transform 0.5s;
  }
  .text-p4-animate {
    transform: translatex(-50vw);
    transition: transform 0.5s;
  }
  .tittle-p4-animate2 {
    transition: all 1s;
    transform: translatey(0vw) !important;
  }
  .social-p4-animate2 {
    transition: all 1s;
    transform: translatey(0vw) !important;
  }
  .text-p4-animate2 {
    transition: all 0.5s;
    transform: translatey(0vw) !important;
  }
  /* ---------------------End Animat Show Page ----------------*/
  /*----------End page4 responsive -------*/
}
/*--------------------------------------------------ipad pro devices -------------------*/
@media (width: 1024px) and (height: 1366px) {
  /* some global properties in this screen size */
  .display-3 {
    font-size: calc(1.525rem + 2.5vw);
  }
  section {
    opacity: 0;
    z-index: 0;
    visibility: hidden;
    position: absolute;
    transition: opacity 1s;
  }
  /* ----------------- this properties inclueds all show pages classes --------------------*/
  header .jupiter {
    font-size: 3vw;
  }
  header .top-header .menuTop {
    height: 100vh;
  }
  header .top-header .menuTop li {
    padding: 2vh;
  }
  body {
    overflow: hidden;
  }
  .top-header {
    position: fixed;
  }
  /*----------------------Start Top Menu ----------*/
  .menuTop {
    top: 99vh;
  }
  .menuTop li {
    margin: 4vh 7vh;
  }
  .menuTop a {
    font-size: 2.5vh;
  }
  .menuTop-show {
    width: 45vw !important;
    top: 0;
  }
  main .topSideMenu {
    top: 23vh;
  }
  main .topSideMenu a {
    font-size: 1.7vh;
  }
  /*----------Start page1 responsive -------*/
  .page1 {
    transition: all 0.5s;
    left: 0;
    top: 0;
    width: 100%;
    padding: 12.54167vh 8.54167vw 13.54167vh 13.54167vw;
    height: 100%;
  }
  .page1 svg {
    display: block;
  }
  .page1 .margin-left {
    margin-left: 6%;
  }
  .page1 .img-p1-animat-hover {
    position: relative;
  }
  .page1 .img-p1-animat-hover .img2-hover-p1 {
    position: absolute;
    width: 115px;
    left: 35%;
    top: -2%;
    transition: all 0.2s;
  }
  .page1 .img-p1-animat-hover .img1-hover-p1 {
    position: absolute;
    width: 10%;
    left: 20%;
    top: 15%;
    transition: all 0.2s;
  }
  .page1 .img-p1-animat-hover .img3-hover-p1 {
    position: absolute;
    width: 80px;
    right: 59%;
    bottom: 8%;
    transition: all 0.2s;
  }
  .page1 .img-p1-animat-hover .img4-hover-p1 {
    position: absolute;
    width: 30%;
    right: -41px;
    bottom: 66%;
    transition: all 0.2s;
  }
  .page1 .img-p1-animat-hover:hover .img1-hover-p1 {
    transform: rotate(360deg);
    transition: all 0.5s;
  }
  .page1 .img-p1-animat-hover:hover .img2-hover-p1 {
    position: absolute;
    width: 130px;
    transition: all 0.2s;
  }
  .page1 .img-p1-animat-hover:hover .img3-hover-p1 {
    width: 120px;
    bottom: 2%;
    right: 55%;
    transition: all 0.2s;
  }
  .page1 .img-p1-animat-hover:hover .img4-hover-p1 {
    bottom: 70%;
    transition: all 0.2s;
  }
  /* ---------------------Start Animat Show Page ----------------*/
  .title-p1-animate {
    transform: translatex(-50vw);
    transition: transform 1s;
  }
  .img-p1-animate {
    transform: translatey(-50vw);
    transition: transform 1s;
  }
  .text-p1-animate {
    transition: all 0.5s;
    transform: translatey(20vw);
  }
  .title-p1-animate2 {
    transition: all 0.5s;
    transform: translatex(0vw) !important;
  }
  .img-p1-animate2 {
    transition: all 0.5s;
    transform: translatey(0vw) !important;
  }
  .text-p1-animate2 {
    transition: all 0.5s;
    transform: translatey(0vw) !important;
  }
  /* ---------------------End Animat Show Page ----------------*/
  /*----------End page1 responsive -------*/
  /*----------Start page2 responsive -------*/
  .page2 {
    transition: all 0.5s;
    overflow: hidden;
    padding: 11.54167vh 8.54167vw 12.54167vh 14.54167vw;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .page2 .cartMain {
    margin: 20px 37px 20px 5px;
  }
  .page2 .cartMain .h3Page2 {
    font-size: 1.5vh;
  }
  .page2 p {
    font-size: 1.3vw;
  }
  /* ---------------------Start Animat Show Page ----------------*/
  .title-p2-animate {
    transform: translateX(-50vw);
    transition: transform 1s;
  }
  .img-p2-animate {
    transform: translatey(-50vw);
    transition: transform 1s;
  }
  .text-p2-animate {
    transition: all 0.5s;
    transform: translatey(20vw);
  }
  .title-p2-animate2 {
    transition: all 0.5s;
    transform: translateX(0vw) !important;
  }
  .img-p2-animate2 {
    transition: all 0.5s;
    transform: translatey(0vw) !important;
  }
  .text-p2-animate2 {
    transition: all 0.5s;
    transform: translatey(0vw) !important;
  }
  /* ---------------------End Animat Show Page ----------------*/
  /*----------End page2 responsive -------*/
  /*----------start page3 responsive x-large-------*/
  .page3 {
    transition: all 0.5s;
    left: 0;
    top: 0;
    width: 100%;
    padding: 12.54167vh 8.54167vw 13.54167vh 13.54167vw;
    height: 100%;
  }
  .page3 .carousel-item-p {
    position: absolute;
  }
  .page3 .carouselHandel {
    bottom: 10%;
    left: -10%;
  }
  .page3 .col-carousel-height {
    height: 500px;
    position: relative;
    overflow: hidden;
  }
  .page3 .img-size-sm {
    height: 500px;
  }
  .page3 p {
    padding-left: 20px;
  }
  /* ---------------------Start Animat Show Page ----------------*/
  .tittle-p3-animate {
    transform: translatey(-100vw);
    transition: transform 1s;
  }
  .img-p3-animate {
    transform: translatex(-50vw);
    transition: transform 1s;
  }
  .text-p3-animate {
    transform: translatey(30vw);
    transition: transform 1s;
  }
  .tittle-p3-animate2 {
    transition: all 0.5s;
    transform: translateX(0vw) !important;
  }
  .img-p3-animate2 {
    transition: all 0.5s;
    transform: translatex(0vw) !important;
  }
  .text-p3-animate2 {
    transition: all 0.5s;
    transform: translatey(0vw) !important;
  }
  /* ---------------------End Animat Show Page ----------------*/
  /*----------End page3 responsive -------*/
  /*----------start page3 responsive ------- x-large*/
  .page4 {
    transition: all 0.5s;
    left: 0;
    top: 0;
    width: 100%;
    padding: 12.54167vh 8.54167vw 13.54167vh 13.54167vw;
    height: 100%;
  }
  .page4 .formPage4 {
    margin-top: 43px;
  }
  .page4 .bgPage4 {
    width: 123px;
  }
  .page4 .aboutMe {
    margin-left: 50px;
  }
  /* ---------------------Start Animat Show Page ----------------*/
  .tittle-p4-animate {
    transform: translatey(-20vw);
    transition: transform 0.5s;
  }
  .social-p4-animate {
    transform: translatey(-562px);
    transition: transform 0.5s;
  }
  .text-p4-animate {
    transform: translatex(-50vw);
    transition: transform 0.5s;
  }
  .tittle-p4-animate2 {
    transition: all 1s;
    transform: translatey(0vw) !important;
  }
  .social-p4-animate2 {
    transition: all 1s;
    transform: translatey(0vw) !important;
  }
  .text-p4-animate2 {
    transition: all 0.5s;
    transform: translatey(0vw) !important;
  }
  /* ---------------------End Animat Show Page ----------------*/
  /*----------End page4 responsive -------*/
}
/*-------------------------------------------------- x-large devices   -------------------*/
@media (max-width: 1919.98px) and (min-width: 1200px) {
  /* some global properties in this screen size */
  .display-3 {
    font-size: calc(1.525rem + 2.5vw);
  }
  section {
    opacity: 0;
    z-index: 0;
    visibility: hidden;
    position: absolute;
    transition: opacity 1s;
  }
  /* ----------------- this properties inclueds all show pages classes --------------------*/
  header .top-header {
    padding: 2vw 3vw;
    position: fixed;
  }
  body {
    overflow: hidden;
  }
  /*----------------------Start Top Menu ----------*/
  .menuTop {
    top: 99vh;
  }
  .menuTop li {
    margin: 4vh 7vh;
  }
  .menuTop a {
    font-size: 2.5vh;
  }
  .menuTop-show {
    width: 35vw !important;
    top: 0;
  }
  main .topSideMenu {
    top: -12vh;
  }
  /*----------Start page1 responsive -------*/
  .page1 {
    transition: all 0.5s;
    left: 0;
    top: 0;
    width: 100%;
    padding: 9.542vw 8.54167vw 8.54167vw 13.54167vw;
    height: 100%;
  }
  .page1 .display-2 {
    font-size: calc(1.375rem + 4.2vw);
  }
  .page1 .text {
    font-size: 1.05vw;
    line-height: 3.8vh;
  }
  .page1 .btn-submit {
    padding: 2vh 2.5vw;
    display: inline-block;
    margin-top: 1vh;
    font-size: 1vw;
  }
  .page1 svg {
    display: block;
  }
  .page1 .margin-left {
    margin-left: 6%;
  }
  .page1 .img-p1-animat-hover {
    position: relative;
  }
  .page1 .img-p1-animat-hover .img2-hover-p1 {
    position: absolute;
    width: 115px;
    left: 35%;
    top: -2%;
    transition: all 0.2s;
  }
  .page1 .img-p1-animat-hover .img1-hover-p1 {
    position: absolute;
    width: 10%;
    left: 20%;
    top: 15%;
    transition: all 0.2s;
  }
  .page1 .img-p1-animat-hover .img3-hover-p1 {
    position: absolute;
    width: 80px;
    right: 59%;
    bottom: 8%;
    transition: all 0.2s;
  }
  .page1 .img-p1-animat-hover .img4-hover-p1 {
    position: absolute;
    width: 30%;
    right: -41px;
    bottom: 66%;
    transition: all 0.2s;
  }
  .page1 .img-p1-animat-hover:hover .img1-hover-p1 {
    transform: rotate(360deg);
    transition: all 0.5s;
  }
  .page1 .img-p1-animat-hover:hover .img2-hover-p1 {
    position: absolute;
    width: 130px;
    transition: all 0.2s;
  }
  .page1 .img-p1-animat-hover:hover .img3-hover-p1 {
    width: 120px;
    bottom: 2%;
    right: 55%;
    transition: all 0.2s;
  }
  .page1 .img-p1-animat-hover:hover .img4-hover-p1 {
    bottom: 70%;
    transition: all 0.2s;
  }
  .page1 div#canvas {
    position: fixed;
    left: -11vw;
    top: -11vh;
  }
  /* ---------------------Start Animat Show Page ----------------*/
  .title-p1-animate {
    transform: translatex(-50vw);
    transition: transform 1s;
  }
  .img-p1-animate {
    transform: translatey(-50vw);
    transition: transform 1s;
  }
  .text-p1-animate {
    transition: all 0.5s;
    transform: translatey(20vw);
  }
  .title-p1-animate2 {
    transition: all 0.5s;
    transform: translatex(0vw) !important;
  }
  .img-p1-animate2 {
    transition: all 0.5s;
    transform: translatey(0vw) !important;
  }
  .text-p1-animate2 {
    transition: all 0.5s;
    transform: translatey(0vw) !important;
  }
  /* ---------------------End Animat Show Page ----------------*/
  /*----------End page1 responsive -------*/
  /*----------Start page2 responsive -------*/
  .page2 {
    transition: all 0.5s;
    left: 0;
    top: 0;
    width: 100%;
    padding: 9.542vw 8.54167vw 8.54167vw 13.54167vw;
    height: 100%;
  }
  .page2 p {
    font-size: 1vw;
  }
  .page2 .imgPage2 {
    width: 70%;
  }
  /* ---------------------Start Animat Show Page ----------------*/
  .title-p2-animate {
    transform: translateX(-50vw);
    transition: transform 1s;
  }
  .img-p2-animate {
    transform: translatey(-50vw);
    transition: transform 1s;
  }
  .text-p2-animate {
    transition: all 0.5s;
    transform: translatey(20vw);
  }
  .title-p2-animate2 {
    transition: all 0.5s;
    transform: translateX(0vw) !important;
  }
  .img-p2-animate2 {
    transition: all 0.5s;
    transform: translatey(0vw) !important;
  }
  .text-p2-animate2 {
    transition: all 0.5s;
    transform: translatey(0vw) !important;
  }
  /* ---------------------End Animat Show Page ----------------*/
  /*----------End page2 responsive -------*/
  /*----------start page3 responsive x-large-------*/
  .page3 {
    transition: all 0.5s;
    left: 0;
    top: 0;
    width: 100%;
    padding: 9.542vw 8.54167vw 8.54167vw 13.54167vw;
    height: 100%;
  }
  .page3 .carousel-item-p {
    position: absolute;
  }
  .page3 .carouselHandel {
    bottom: 145px;
    left: -161px;
  }
  .page3 .col-carousel-height {
    height: 500px;
    position: relative;
    overflow: hidden;
  }
  .page3 .img-size {
    width: 78%;
  }
  .page3 p {
    padding-left: 20px;
  }
  /* ---------------------Start Animat Show Page ----------------*/
  .tittle-p3-animate {
    transform: translatey(-100vw);
    transition: transform 1s;
  }
  .img-p3-animate {
    transform: translatex(-50vw);
    transition: transform 1s;
  }
  .text-p3-animate {
    transform: translatey(30vw);
    transition: transform 1s;
  }
  .tittle-p3-animate2 {
    transition: all 0.5s;
    transform: translateX(0vw) !important;
  }
  .img-p3-animate2 {
    transition: all 0.5s;
    transform: translatex(0vw) !important;
  }
  .text-p3-animate2 {
    transition: all 0.5s;
    transform: translatey(0vw) !important;
  }
  /* ---------------------End Animat Show Page ----------------*/
  /*----------End page3 responsive -------*/
  /*----------start page3 responsive ------- x-large*/
  .page4 {
    transition: all 0.5s;
    left: 0;
    top: 0;
    width: 100%;
    padding: 9.542vw 8.54167vw 8.54167vw 13.54167vw;
    height: 100%;
  }
  .page4 .formPage4 {
    margin-top: 43px;
  }
  .page4 .bgPage4 {
    width: 123px;
  }
  .page4 .aboutMe {
    margin-left: 50px;
  }
  /* ---------------------Start Animat Show Page ----------------*/
  .tittle-p4-animate {
    transform: translatey(-20vw);
    transition: transform 0.5s;
  }
  .social-p4-animate {
    transform: translatey(-562px);
    transition: transform 0.5s;
  }
  .text-p4-animate {
    transform: translatex(-50vw);
    transition: transform 0.5s;
  }
  .tittle-p4-animate2 {
    transition: all 1s;
    transform: translatey(0vw) !important;
  }
  .social-p4-animate2 {
    transition: all 1s;
    transform: translatey(0vw) !important;
  }
  .text-p4-animate2 {
    transition: all 0.5s;
    transform: translatey(0vw) !important;
  }
  /* ---------------------End Animat Show Page ----------------*/
  /*----------End page4 responsive -------*/
}
/*-------------------------------------------------- xx-large devices   -------------------*/
@media (min-width: 1920px) {
  /* some global properties in this screen size */
  .display-3 {
    font-size: calc(1.525rem + 2.5vw);
  }
  section {
    opacity: 0;
    z-index: 0;
    visibility: hidden;
    position: absolute;
    transition: opacity 1s;
  }
  /* ----------------- this properties inclueds all show pages classes --------------------*/
  header .top-header {
    padding: 2vw 3vw;
    position: fixed;
  }
  body {
    overflow: hidden;
  }
  /*----------------------Start Top Menu ----------*/
  .menuTop {
    top: 99vh;
  }
  .menuTop li {
    margin: 4vh 7vh;
  }
  .menuTop a {
    font-size: 2.5vh;
  }
  .menuTop-show {
    width: 35vw !important;
    top: 0;
  }
  main .topSideMenu {
    top: -10vh;
  }
  main .topSideMenu li a::after {
    top: 40px;
  }
  /*----------Start page1 responsive -------*/
  .page1 {
    transition: all 0.5s;
    left: 0;
    top: 0;
    width: 100%;
    padding: 10.54167vw 8.54167vw 8.54167vw 14.54167vw;
    height: 100%;
  }
  .page1 .display-2 {
    font-size: calc(1.375rem + 4.2vw);
  }
  .page1 .text {
    font-size: 1.1vw;
    line-height: 4.2vh;
  }
  .page1 .btn-submit {
    padding: 2vh 2.5vw;
    display: inline-block;
    margin-top: 1vh;
    font-size: 1vw;
  }
  .page1 svg {
    display: block;
  }
  .page1 .margin-left {
    margin-left: 6%;
  }
  .page1 .img-p1-animat-hover {
    position: relative;
  }
  .page1 .img-p1-animat-hover .img2-hover-p1 {
    position: absolute;
    width: 115px;
    left: 35%;
    top: -2%;
    transition: all 0.2s;
  }
  .page1 .img-p1-animat-hover .img1-hover-p1 {
    position: absolute;
    width: 10%;
    left: 20%;
    top: 15%;
    transition: all 0.2s;
  }
  .page1 .img-p1-animat-hover .img3-hover-p1 {
    position: absolute;
    width: 80px;
    right: 59%;
    bottom: 8%;
    transition: all 0.2s;
  }
  .page1 .img-p1-animat-hover .img4-hover-p1 {
    position: absolute;
    width: 30%;
    right: -41px;
    bottom: 66%;
    transition: all 0.2s;
  }
  .page1 .img-p1-animat-hover:hover .img1-hover-p1 {
    transform: rotate(360deg);
    transition: all 0.5s;
  }
  .page1 .img-p1-animat-hover:hover .img2-hover-p1 {
    position: absolute;
    width: 130px;
    transition: all 0.2s;
  }
  .page1 .img-p1-animat-hover:hover .img3-hover-p1 {
    width: 120px;
    bottom: 2%;
    right: 55%;
    transition: all 0.2s;
  }
  .page1 .img-p1-animat-hover:hover .img4-hover-p1 {
    bottom: 70%;
    transition: all 0.2s;
  }
  .page1 div#canvas {
    position: fixed;
    left: 5vw;
    top: 12vh;
  }
  /* ---------------------Start Animat Show Page ----------------*/
  .title-p1-animate {
    transform: translatex(-50vw);
    transition: transform 1s;
  }
  .img-p1-animate {
    transform: translatey(-50vw);
    transition: transform 1s;
  }
  .text-p1-animate {
    transition: all 0.5s;
    transform: translatey(20vw);
  }
  .title-p1-animate2 {
    transition: all 0.5s;
    transform: translatex(0vw) !important;
  }
  .img-p1-animate2 {
    transition: all 0.5s;
    transform: translatey(0vw) !important;
  }
  .text-p1-animate2 {
    transition: all 0.5s;
    transform: translatey(0vw) !important;
  }
  /* ---------------------End Animat Show Page ----------------*/
  /*----------End page1 responsive -------*/
  /*----------Start page2 responsive -------*/
  .page2 {
    transition: all 0.5s;
    left: 0;
    top: 0;
    width: 100%;
    padding: 10.54167vw 8.54167vw 8.54167vw 14.54167vw;
    height: 100%;
  }
  .page2 p {
    font-size: 1.3vw;
  }
  /* ---------------------Start Animat Show Page ----------------*/
  .title-p2-animate {
    transform: translateX(-50vw);
    transition: transform 1s;
  }
  .img-p2-animate {
    transform: translatey(-50vw);
    transition: transform 1s;
  }
  .text-p2-animate {
    transition: all 0.5s;
    transform: translatey(20vw);
  }
  .title-p2-animate2 {
    transition: all 0.5s;
    transform: translateX(0vw) !important;
  }
  .img-p2-animate2 {
    transition: all 0.5s;
    transform: translatey(0vw) !important;
  }
  .text-p2-animate2 {
    transition: all 0.5s;
    transform: translatey(0vw) !important;
  }
  /* ---------------------End Animat Show Page ----------------*/
  /*----------End page2 responsive -------*/
  /*----------start page3 responsive x-large-------*/
  .page3 {
    transition: all 0.5s;
    left: 0;
    top: 0;
    width: 100%;
    padding: 10.54167vw 8.54167vw 8.54167vw 14.54167vw;
    height: 100%;
  }
  .page3 .carousel-item-p {
    position: absolute;
  }
  .page3 .carouselHandel {
    bottom: 60%;
    left: -15%;
  }
  .page3 .col-carousel-height {
    height: 500px;
    position: relative;
    overflow: hidden;
  }
  .page3 .img-size-sm {
    height: 500px;
  }
  .page3 p {
    padding-left: 20px;
  }
  /* ---------------------Start Animat Show Page ----------------*/
  .tittle-p3-animate {
    transform: translatey(-100vw);
    transition: transform 1s;
  }
  .img-p3-animate {
    transform: translatex(-50vw);
    transition: transform 1s;
  }
  .text-p3-animate {
    transform: translatey(30vw);
    transition: transform 1s;
  }
  .tittle-p3-animate2 {
    transition: all 0.5s;
    transform: translateX(0vw) !important;
  }
  .img-p3-animate2 {
    transition: all 0.5s;
    transform: translatex(0vw) !important;
  }
  .text-p3-animate2 {
    transition: all 0.5s;
    transform: translatey(0vw) !important;
  }
  /* ---------------------End Animat Show Page ----------------*/
  /*----------End page3 responsive -------*/
  /*----------start page3 responsive ------- x-large*/
  .page4 {
    transition: all 0.5s;
    left: 0;
    top: 0;
    width: 100%;
    padding: 10.54167vw 8.54167vw 8.54167vw 14.54167vw;
    height: 100%;
  }
  .page4 .formPage4 {
    margin-top: 43px;
  }
  .page4 .bgPage4 {
    width: 123px;
  }
  .page4 .aboutMe {
    margin-left: 50px;
  }
  /* ---------------------Start Animat Show Page ----------------*/
  .tittle-p4-animate {
    transform: translatey(-20vw);
    transition: transform 0.5s;
  }
  .social-p4-animate {
    transform: translatey(-562px);
    transition: transform 0.5s;
  }
  .text-p4-animate {
    transform: translatex(-50vw);
    transition: transform 0.5s;
  }
  .tittle-p4-animate2 {
    transition: all 1s;
    transform: translatey(0vw) !important;
  }
  .social-p4-animate2 {
    transition: all 1s;
    transform: translatey(0vw) !important;
  }
  .text-p4-animate2 {
    transition: all 0.5s;
    transform: translatey(0vw) !important;
  }
  /* ---------------------End Animat Show Page ----------------*/
  /*----------End page4 responsive -------*/
}