* {
  box-sizing: border-box;
}
.video {
    position: absolute;
    top: 2557px;
    left: 552px;
}

body {
  font-size: 14px;
}
.frame {
  width: 100%;
  height: 2849px;
  background: rgba(26,26,41,1);
  opacity: 1;
  position: relative;
  top: 0px;
  left: 0px;
  overflow: hidden;
}
.navigation_bar {
    width: 100%;
    height: 88px;
    background: rgba(23,23,36,1);
    opacity: 1;
    position: absolute;
    top: 0px;
    left: 16px;
}
.deco {
    width: 634px;
    height: 634px;
    background: url( "../images/circle.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    opacity: 1;
    position: absolute;
    top: 84px;
    left: 736px;
    overflow: hidden;
}
.name {
    width: 233px;
    color: rgba(242,201,76,1);
    position: absolute;
    top: 11px;
    left: 159px;
    font-family: Poppins;
    font-weight: SemiBold;
    font-size: 28px;
    opacity: 1;
    text-align: left;
}
.navHome {
    width: 55px;
    color: rgba(242,201,76,1);
    position: absolute;
    top: 19px;
    left: 1242px;
    font-family: Poppins;
    font-weight: SemiBold;
    font-size: 18px;
    opacity: 1;
    text-align: left;
}
.navProjects {
    width: 74px;
    color: rgba(255,255,255,1);
    position: absolute;
    top: 19px;
    left: 1096px;
    font-family: Poppins;
    font-weight: SemiBold;
    font-size: 18px;
    opacity: 1;
    text-align: left;
}
.navContact {
    width: 75px;
    color: rgba(255,255,255,1);
    position: absolute;
    top: 19px;
    left: 945px;
    font-family: Poppins;
    font-weight: SemiBold;
    font-size: 18px;
    opacity: 1;
    text-align: left;
}
p a .navContact:link {
    color: rgba(255,255,255,1.00);
    text-decoration: none;
}
p a .navContact:hover {
    color: rgba(242,201,76,1.00);
    text-decoration: underline;
}
.frame p .navProjects:link  {
    color: rgba(255,255,255,1.00);
    text-decoration: none;
}
.frame p .navProjects:hover {
    color: rgba(242,201,76,1.00);
    text-decoration: underline;
}

.frame p .navProjects:visited  {
    color: rgba(255,255,255,1.00);
    text-decoration: none;
}
.frame p .navHome:link  {
    color: rgba(242,201,76,1.00);
    text-decoration: none;
}
.frame p .navHome:hover {
    color: rgba(255,255,255,1.00);
    text-decoration: underline;
}

.frame p .navHome:visited  {
    color: rgba(242,201,76,1.00);
    text-decoration: none;
}





p a .navContact:visited {
    color: rgba(255,255,255,1.00);
    text-decoration: none;
}


.infoHello {
    width: 148px;
    color: rgba(255,255,255,1);
    position: absolute;
    top: 184px;
    left: 170px;
    font-family: Poppins;
    font-weight: SemiBold;
    font-size: 32px;
    opacity: 1;
    text-align: left;
}
.about_me {
  width: 168px;
  color: rgba(242,201,76,1);
  position: absolute;
  top: 824px;
  left: 136px;
  font-family: Poppins;
  font-weight: SemiBold;
  font-size: 32px;
  opacity: 1;
  text-align: left;
}
.s5_context0 {
  width: 296px;
  color: rgba(242,201,76,1);
  position: absolute;
  top: 2030px;
  left: 147px;
  font-family: Poppins;
  font-weight: SemiBold;
  font-size: 32px;
  opacity: 1;
  text-align: left;
}
.footer_itm1 {
    width: 190px;
    color: rgba(255,255,255,1);
    position: absolute;
    top: 2784px;
    left: 209px;
    font-family: Poppins;
    font-weight: Medium;
    font-size: 16px;
    opacity: 0.5;
    text-align: left;
}
.footer_item2 {
    width: 133px;
    color: rgba(255,255,255,1);
    position: absolute;
    top: 2778px;
    left: 521px;
    font-family: Poppins;
    font-weight: Medium;
    font-size: 16px;
    opacity: 0.5;
    text-align: left;
}
.footer_item3 {
    width: 144px;
    color: rgba(255,255,255,1);
    position: absolute;
    top: 2778px;
    left: 1004px;
    font-family: Poppins;
    font-weight: Medium;
    font-size: 16px;
    opacity: 0.5;
    text-align: left;
}
.footer_itm4 {
    width: 67px;
    color: rgba(255,255,255,1);
    position: absolute;
    top: 2778px;
    left: 776px;
    font-family: Poppins;
    font-weight: Medium;
    font-size: 16px;
    opacity: 0.5;
    text-align: left;
}
.s5_context1 {
  width: 100%;
  color: rgba(255,255,255,1);
  position: absolute;
  top: 2094px;
  left: 147px;
  font-family: Poppins;
  font-weight: Medium;
  font-size: 18px;
  opacity: 1;
  text-align: left;
}
.experence {
  width: 123px;
  color: rgba(242,201,76,1);
  position: absolute;
  top: 973px;
  left: 129px;
  font-family: Poppins;
  font-weight: SemiBold;
  font-size: 96px;
  opacity: 1;
  text-align: left;
}
.about_mid {
  width: 100%;
  color: rgba(255,255,255,1);
  position: absolute;
  top: 882px;
  left: 137px;
  font-family: Poppins;
  font-weight: Medium;
  font-size: 18px;
  opacity: 1;
  text-align: left;
}
.exp_context {
  width: 859px;
  color: rgba(255,255,255,1);
  position: absolute;
  top: 1006px;
  left: 278px;
  font-family: Poppins;
  font-weight: Medium;
  font-size: 24px;
  opacity: 1;
  text-align: left;
}
.infoDetails {
    width: 435px;
    color: rgba(255,255,255,1);
    position: absolute;
    top: 361px;
    left: 169px;
    font-family: Poppins;
    font-weight: Medium;
    font-size: 18px;
    opacity: 1;
    text-align: left;
}
.infoName {
    width: 904px;
    color: rgba(245,245,245,1);
    position: absolute;
    top: 227px;
    left: 161px;
    font-family: Poppins;
    font-weight: SemiBold;
    font-size: 113px;
    opacity: 1;
    text-align: left;
}
.frame7 {
  width: 100%;
  height: 128px;
  background: rgba(23,23,36,1);
  opacity: 1;
  position: absolute;
  top: 641px;
  left: 0px;
  overflow: hidden;
}
.shapes {
  width: 100%;
  height: 254px;
  background: url( );
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  margin: 71px;
  opacity: 1;
  position: absolute;
  top: 1136px;
  left: 136px;
  overflow: hidden;
}
.s1 {
  width: 256px;
  height: 254px;
  background: rgba(242,201,76,1);
  opacity: 1;
  position: absolute;
  top: 0px;
  left: 0px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.20000000298023224);
  overflow: hidden;
}
.s1_context {
  width: 98px;
  color: rgba(255,255,255,1);
  position: absolute;
  top: 153px;
  left: 24px;
  font-family: Poppins;
  font-weight: SemiBold;
  font-size: 24px;
  opacity: 1;
  text-align: left;
}
.s2 {
  width: 256px;
  height: 254px;
  background: rgba(189,189,189,1);
  opacity: 1;
  position: absolute;
  top: 0px;
  left: 273px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.20000000298023224);
  overflow: hidden;
}
.s2_context {
  width: 171px;
  color: rgba(255,255,255,1);
  position: absolute;
  top: 153px;
  left: 301px;
  font-family: Poppins;
  font-weight: SemiBold;
  font-size: 24px;
  opacity: 1;
  text-align: left;
}
.s3 {
  width: 255px;
  height: 254px;
  background: rgba(189,189,189,1);
  opacity: 1;
  position: absolute;
  top: 0px;
  left: 546px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.20000000298023224);
  overflow: hidden;
}
.s3_context {
  width: 111px;
  color: rgba(255,255,255,1);
  position: absolute;
  top: 153px;
  left: 574px;
  font-family: Poppins;
  font-weight: SemiBold;
  font-size: 24px;
  opacity: 1;
  text-align: left;
}
.s4 {
  width: 256px;
  height: 254px;
  background: rgba(189,189,189,1);
  opacity: 1;
  position: absolute;
  top: 0px;
  left: 818px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.20000000298023224);
  overflow: hidden;
}
.s4_context {
  width: 128px;
  color: rgba(255,255,255,1);
  position: absolute;
  top: 153px;
  left: 846px;
  font-family: Poppins;
  font-weight: SemiBold;
  font-size: 24px;
  opacity: 1;
  text-align: left;
}
.s1_icon {
  width: 66px;
  height: 61px;
  background: url( "../images/s5_icon.png" );
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 1;
  position: absolute;
  top: 66px;
  left: 24px;
  overflow: hidden;
}
.s2_icon {
  width: 57px;
  height: 57px;
  background: url( "../images/s6_icon.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 1;
  position: absolute;
  top: 70px;
  left: 301px;
  overflow: hidden;
}
.mid_info1 {
    width: 310px;
    color: rgba(242,201,76,1);
    position: absolute;
    top: 1535px;
    left: 136px;
    font-family: Poppins;
    font-weight: SemiBold;
    font-size: 32px;
    opacity: 1;
    text-align: left;
}
.midlShape_wrapper {
  width: 100%;
  height: 364px;
  background: url("../images/midlShape_wrapper.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  margin: 71px;
  opacity: 1;
  position: absolute;
  top: 1550px;
  left: 136px;
  overflow: hidden;
}
.s5 {
  width: 341px;
  height: 338px;
  background: url("../images/s5.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 1;
  position: absolute;
  top: 0px;
  left: 0px;
  border: 3px solid rgba(242,201,76,1);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.20000000298023224);
  overflow: hidden;
}
.s5_context {
  width: 201px;
  color: rgba(255,255,255,1);
  position: absolute;
  top: 139px;
  left: 59px;
  font-family: Poppins;
  font-weight: SemiBold;
  font-size: 24px;
  opacity: 1;
  text-align: left;
}
.s6 {
  width: 341px;
  height: 338px;
  background: url("../images/s6.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 1;
  position: absolute;
  top: 0px;
  left: 363px;
  border: 3px solid rgba(245,245,245,1);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.20000000298023224);
  overflow: hidden;
}
.s6_context {
  width: 229px;
  color: rgba(242,201,76,1);
  position: absolute;
  top: 144px;
  left: 419px;
  font-family: Poppins;
  font-weight: SemiBold;
  font-size: 24px;
  opacity: 1;
  text-align: left;
}
.s7 {
  width: 339px;
  height: 338px;
  background: url("../images/s7.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 1;
  position: absolute;
  top: 0px;
  left: 727px;
  border: 3px solid rgba(242,201,76,1);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.20000000298023224);
  overflow: hidden;
}
.s7_context {
    width: 226px;
    color: rgba(255,255,255,1);
    position: absolute;
    top: 156px;
    left: 765px;
    font-family: Poppins;
    font-weight: SemiBold;
    font-size: 24px;
    opacity: 1;
    text-align: left;
}
.s5_context1 {
    width: 296px;
    color: rgba(255,255,255,1);
    position: absolute;
    top: 1845px;
    left: 223px;
    font-family: Poppins;
    font-weight: Medium;
    font-size: 17px;
    opacity: 1;
    text-align: center;
}
.s6_context1 {
    width: 296px;
    color: rgba(255,255,255,1);
    position: absolute;
    top: 228px;
    left: 385px;
    font-family: Poppins;
    font-weight: Medium;
    font-size: 17px;
    opacity: 1;
    text-align: center;
}
.s7_context1 {
  width: 296px;
  color: rgba(255,255,255,1);
  position: absolute;
  top: 196px;
  left: 746px;
  font-family: Poppins;
  font-weight: Medium;
  font-size: 17px;
  opacity: 1;
  text-align: center;
}
.maya {
    width: 51px;
    height: 51px;
    background: url( "../images/v109_100.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    opacity: 1;
    position: absolute;
    top: 88px;
    left: 778px;
    overflow: hidden;
}
.s5_context2 {
  width: 343px;
  height: 246px;
  background: rgba(49,49,62,1);
  opacity: 1;
  position: absolute;
  top: 2242px;
  left: 129px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
.s5_context3 {
    width: 344px;
    height: 246px;
    background: rgba(49,49,62,1);
    opacity: 1;
    position: absolute;
    top: 2242px;
    left: 602px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}
.s64 {
  width: 311px;
  height: 173px;
  background: url("../images/s64.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 0.5;
  position: absolute;
  top: 2258px;
  left: 145px;
  overflow: hidden;
}
.s5_context5 {
  width: 311px;
  height: 173px;
  background: url("../images/s5_context5.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 1;
  position: absolute;
  top: 0px;
  left: 0px;
  border: 2px solid rgba(242,201,76,1);
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  overflow: hidden;
}
.s61 {
  width: 311px;
  height: 173px;
  background: linear-gradient(rgba(23,23,36,0.25), rgba(117,98,224,0.5));
  opacity: 1;
  position: absolute;
  top: 0px;
  left: 0px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  overflow: hidden;
}
.s62 {
  width: 311px;
  height: 173px;
  background: url("../images/s62.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 0.5;
  position: absolute;
  top: 2258px;
  left: 539px;
  overflow: hidden;
}
.s5_context7 {
    width: 311px;
    height: 173px;
    background: url("../images/s5_context7.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    opacity: 1;
    position: absolute;
    top: 0px;
    left: 78px;
    border: 2px solid rgba(242,201,76,1);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    overflow: hidden;
}
.s60 {
    width: 311px;
    height: 173px;
    background: linear-gradient(rgba(23,23,36,0.25), rgba(117,98,224,0.5));
    opacity: 1;
    position: absolute;
    top: 0px;
    left: 141px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    overflow: hidden;
}
.s5_icon {
    width: 66px;
    height: 61px;
    background: url( "../images/v109_96.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    opacity: 1;
    position: absolute;
    top: 1680px;
    left: 269px;
    overflow: hidden;
}
.s6_icon {
    width: 57px;
    height: 57px;
    background: url( "../images/v109_98.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    opacity: 1;
    position: absolute;
    top: 1692px;
    left: 629px;
    overflow: hidden;
}
.pojects_link {
    width: 159px;
    height: 48px;
    background: url( "../images/v109_102.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    opacity: 1;
    position: absolute;
    top: 476px;
    left: 395px;
    overflow: hidden;
}
.about_link {
    width: 160px;
    height: 48px;
    background: url( "../images/v109_104.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    opacity: 1;
    position: absolute;
    top: 471px;
    left: 168px;
    overflow: hidden;
}
.v110_18 {
    width: 293px;
    height: 260px;
    background: url("../images/v110_18.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    opacity: 1;
    position: absolute;
    top: 2235px;
    left: 1045px;
    overflow: hidden;
}