/* media query manager

 0-600px (37.5em )= phone
 600-900px (56.25em) = tablet portrait
 900-1200px (75em) = tablet landscape
  1200-1800 = normal style apply
 1800px (112.5em )= big desktop

 */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box; }

html {
  font-size: 62.5%;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
  @media (max-width: 75em) {
    html {
      font-size: 70%; } }
  @media (max-width: 56.25em) {
    html {
      font-size: 60%; } }
  @media (max-width: 37.5em) {
    html {
      font-size: 50%; } }
  @media (max-width: 25em) {
    html {
      font-size: 35%; } }

.testing {
  padding: 5rem 15rem; }
  @media (max-width: 75em) {
    .testing {
      padding: 5rem 5rem; } }
  @media (max-width: 56.25em) {
    .testing {
      padding: 5rem 4rem; } }
  @media (max-width: 25em) {
    .testing {
      padding: 2rem 1rem; } }
  @media (max-width: 37.5em) {
    .testing {
      padding: 2rem 1rem; } }

.container {
  margin-top: 2rem; }
  .container .row:last-child {
    margin-bottom: 0 !important; }
  .container .row:first-child {
    margin-bottom: 0 !important; }

h6 {
  font-size: 1.5rem;
  padding-top: 1rem;
  font-weight: bold; }

#left {
  padding: 0 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgba(86, 86, 87, 0.507)); }
  #left .photoId {
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    width: auto;
    margin-top: 5rem; }
    @media (max-width: 56.25em) {
      #left .photoId {
        display: flex;
        align-items: center;
        justify-content: center;
        width: auto; } }
    @media (max-width: 37.5em) {
      #left .photoId {
        display: flex;
        align-items: center;
        justify-content: center;
        width: auto; } }
    #left .photoId img {
      height: 14rem;
      width: 14rem;
      border: 0.5rem solid #4fc3f7;
      border-radius: 50%; }
      @media (max-width: 56.25em) {
        #left .photoId img {
          height: 60%;
          width: 60%;
          border: 0.3rem solid #4fc3f7;
          border-radius: 50%; } }
      @media (max-width: 37.5em) {
        #left .photoId img {
          height: 20%;
          width: 50%;
          border: 0.3rem solid #4fc3f7;
          border-radius: 50%; } }
      @media (max-width: 25em) {
        #left .photoId img {
          height: 40%;
          width: 50%;
          border: 0.3rem solid #4fc3f7;
          border-radius: 50%; } }
  #left .contact {
    width: auto;
    display: inline-block;
    padding: 0 2rem; }
    #left .contact .title {
      margin-bottom: 2rem;
      border-bottom: 1px solid #a5aaaa; }
      #left .contact .title h5 {
        color: #a5aaaa; }
    #left .contact .row {
      margin-bottom: 0.5rem; }
      #left .contact .row .icon {
        display: flex;
        align-items: center;
        justify-content: center; }
        #left .contact .row .icon a i {
          font-size: 1.2rem; }
        #left .contact .row .icon .test {
          display: inline-block;
          color: #a5aaaa;
          width: 3rem;
          height: 3rem;
          line-height: 2.4rem;
          border-radius: 50%;
          border: 0.2rem solid #4fc3f7; }
      #left .contact .row .details {
        display: flex;
        align-items: center;
        height: 4rem; }
        #left .contact .row .details h5 {
          font-size: 1.3rem;
          color: #a5aaaa; }
        #left .contact .row .details ul li {
          display: inline;
          margin-right: 2rem;
          font-size: 2rem;
          color: #a5aaaa; }
  @media (max-width: 56.25em) {
    #left .contact {
      padding: 1rem 1rem;
      margin-top: 2rem; }
      #left .contact .row:nth-child(3) .details h5 {
        font-size: 0.5rem;
        padding: 0; }
      #left .contact .row:nth-child(5) .details {
        padding: 0;
        padding-bottom: 1rem; }
      #left .contact .row .icon .test {
        width: 2.5rem;
        height: 2.5rem;
        margin-left: -2rem;
        line-height: 2.1rem; }
      #left .contact .row .icon a i {
        font-size: 0.8rem; }
      #left .contact .title {
        margin-bottom: 2.5rem; }
        #left .contact .title h5 {
          font-size: 1.3rem; }
      #left .contact .row .details h5 {
        font-size: 1.1rem;
        position: relative;
        margin-top: -1rem;
        margin-left: -1.5rem; }
      #left .contact .row .details i {
        font-size: 2.2rem; } }
  @media (max-width: 37.5em) {
    #left .contact {
      padding: 1rem 1rem;
      margin-top: 2rem; }
      #left .contact .row:nth-child(3) .details h5 {
        font-size: 0.5rem;
        padding: 0; }
      #left .contact .row:nth-child(5) .details {
        padding: 0;
        padding-bottom: 1rem; }
      #left .contact .row .icon .test {
        width: 2.5rem;
        height: 2.5rem;
        margin-left: -2rem;
        line-height: 2.1rem; }
      #left .contact .row .icon a i {
        font-size: 0.8rem; }
      #left .contact .title {
        margin-bottom: 2.5rem; }
        #left .contact .title h5 {
          font-size: 1.3rem; }
      #left .contact .row .details h5 {
        font-size: 1.1rem;
        position: relative;
        margin-top: -1rem;
        margin-left: -1.5rem; }
      #left .contact .row .details i {
        font-size: 2.2rem; } }
  @media (max-width: 25em) {
    #left .contact {
      padding: 1rem 1rem;
      margin-top: 2rem; }
      #left .contact .row:nth-child(3) .details h5 {
        font-size: 0.5rem;
        padding: 0; }
      #left .contact .row:nth-child(5) .details {
        padding: 0;
        padding-bottom: 1rem; }
      #left .contact .row .icon .test {
        width: 2.5rem;
        height: 2.5rem;
        margin-left: -2rem;
        line-height: 2.1rem; }
      #left .contact .row .icon a i {
        font-size: 0.8rem; }
      #left .contact .title {
        margin-bottom: 2.5rem; }
        #left .contact .title h5 {
          font-size: 1.3rem; }
      #left .contact .row .details h5 {
        font-size: 1.1rem;
        position: relative;
        margin-top: -1rem;
        margin-left: -1.5rem; }
      #left .contact .row .details i {
        font-size: 2.2rem; } }

#right {
  padding: 2rem 4rem;
  color: #a5aaaa;
  min-height: 120rem;
  margin-bottom: 4rem;
  border-bottom: 1px solid #a5aaaa;
  border-right: 1px solid #a5aaaa;
  border-top: 1px solid #a5aaaa; }
  @media (max-width: 25em) {
    #right {
      padding: 0.5rem 1rem; } }
  #right .name {
    height: 17rem;
    color: #4fc3f7; }
    #right .name h3 {
      font-size: 1.8rem;
      color: #4fc3f7; }
    @media (max-width: 37.5em) {
      #right .name {
        height: 20rem; }
        #right .name h1 {
          padding-top: 4rem;
          font-size: 4rem; }
        #right .name h3 {
          font-size: 2.5rem; } }
    @media (max-width: 25em) {
      #right .name {
        height: 19rem; }
        #right .name h1 {
          padding-top: 4rem;
          font-size: 4rem; }
        #right .name h3 {
          font-size: 2.5rem; } }
  #right .profSummary .title {
    margin-bottom: 1rem;
    border-bottom: 1px solid #a5aaaa; }
    #right .profSummary .title h5 {
      color: #a5aaaa; }
  #right .profSummary .profDetails {
    margin-bottom: 6rem; }
    #right .profSummary .profDetails p {
      font-size: 1.3rem;
      margin-top: 2rem; }
  #right .workExp p {
    font-size: 1.2rem; }
  #right .workExp .compDetails {
    margin-bottom: 1rem; }
  #right .ionics {
    margin-bottom: 6rem; }
  #right .education p {
    font-size: 1.2rem;
    margin-bottom: 3.4rem; }
  @media (max-width: 56.25em) {
    #right .education p {
      font-size: 1.1rem; }
    #right .education .tip h6,
    #right .education .ea h6 {
      font-size: 1.2rem; } }
  @media (max-width: 37.5em) {
    #right .education p {
      font-size: 1rem; }
    #right .education .tip h6,
    #right .education .ea h6 {
      font-size: 1.1rem; } }
  @media (max-width: 25em) {
    #right .education p {
      font-size: 1rem; }
    #right .education .tip h6,
    #right .education .ea h6 {
      font-size: 1.1rem; } }

.skill {
  min-height: auto; }
  .skill .mainBox {
    display: flex;
    flex-direction: column;
    padding: 1rem 1rem; }
    .skill .mainBox div:nth-child(2) {
      display: grid;
      justify-content: center; }
    .skill .mainBox .title {
      margin-bottom: 1rem;
      border-bottom: 1px solid #a5aaaa; }
      .skill .mainBox .title h5 {
        color: #a5aaaa; }
    .skill .mainBox .container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      justify-content: stretch;
      align-content: center;
      margin: 1rem 1rem;
      width: auto;
      padding-left: 1.5rem;
      grid-gap: 1rem; }
      @media (max-width: 56.25em) {
        .skill .mainBox .container {
          display: grid;
          grid-template-columns: 1fr 1fr 1fr; } }
      @media (max-width: 37.5em) {
        .skill .mainBox .container {
          display: grid;
          grid-template-columns: 1fr 1fr;
          padding-left: 0; } }
      @media (max-width: 25em) {
        .skill .mainBox .container {
          display: grid;
          grid-template-columns: 1fr 1fr;
          padding: 0; } }
      .skill .mainBox .container .card {
        position: relative;
        width: 5rem;
        background: linear-gradient(0deg, #1b1b1b, #222, #1b1b1b);
        display: flex;
        justify-content: center;
        align-items: center;
        height: 8rem;
        border-radius: 0.4rem;
        text-align: center;
        overflow: hidden;
        transition: 0.5s; }
        @media (max-width: 56.25em) {
          .skill .mainBox .container .card {
            width: 6rem;
            height: 8rem; } }
        @media (max-width: 37.5em) {
          .skill .mainBox .container .card {
            width: 8rem;
            height: 8rem;
            text-align: center;
            overflow: hidden;
            transition: 0.5s; } }
        @media (max-width: 25em) {
          .skill .mainBox .container .card {
            width: 10rem;
            height: 14rem; } }
        .skill .mainBox .container .card:hover {
          transform: translateY(-1rem);
          box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, 0.5); }
        .skill .mainBox .container .card:before {
          content: "";
          position: absolute;
          top: 120%;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(255, 255, 255, 0.03);
          pointer-events: none;
          z-index: 1; }
        .skill .mainBox .container .card .box .text {
          position: relative;
          color: #777;
          font-size: 0.6rem;
          text-transform: uppercase;
          transition: 0.5s;
          margin: 0.5rem 0;
          color: font; }
        .skill .mainBox .container .card .box .percent {
          position: relative;
          width: 5rem;
          height: 5rem;
          border-radius: 95%;
          z-index: 1;
          display: flex;
          justify-content: center; }
          @media (max-width: 25em) {
            .skill .mainBox .container .card .box .percent {
              box-shadow: none;
              background: none;
              width: 10rem;
              height: 10rem; } }
          @media (max-width: 37.5em) {
            .skill .mainBox .container .card .box .percent {
              box-shadow: none;
              background: none; } }
          @media (max-width: 56.25em) {
            .skill .mainBox .container .card .box .percent {
              box-shadow: none;
              background: none; } }
          .skill .mainBox .container .card .box .percent .number {
            position: absolute;
            top: -2%;
            line-height: 40;
            left: -10%;
            width: 125%;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%; }
            @media (max-width: 56.25em) {
              .skill .mainBox .container .card .box .percent .number {
                left: -12%;
                top: 6%; } }
            @media (max-width: 25em) {
              .skill .mainBox .container .card .box .percent .number {
                left: -12%;
                top: 22%; } }
          .skill .mainBox .container .card .box .percent h3 {
            font-size: 0.8rem;
            line-height: 2.5;
            transition: 0.5s;
            color: #a5aaaa; }
            .skill .mainBox .container .card .box .percent h3 span {
              font-size: 0.8rem;
              color: #a5aaaa; }
          .skill .mainBox .container .card .box .percent svg {
            position: absolute;
            width: 7rem;
            height: 7rem;
            border: 1px solid red; }
            .skill .mainBox .container .card .box .percent svg circle {
              width: 100%;
              height: 100%;
              fill: none;
              stroke: #191919;
              stroke-linecap: square;
              stroke-width: 1;
              transform: translate(1.8rem, 0.6rem); }
            @media (max-width: 56.25em) {
              .skill .mainBox .container .card .box .percent svg {
                width: 10rem;
                height: 10rem; }
                .skill .mainBox .container .card .box .percent svg circle {
                  transform: translate(3rem, 0.8rem); } }
            @media (max-width: 25em) {
              .skill .mainBox .container .card .box .percent svg {
                width: 10rem;
                height: 10rem; }
                .skill .mainBox .container .card .box .percent svg circle {
                  transform: translate(1.8rem, 1.8rem); } }
        .skill .mainBox .container .card:hover .percent .number h3 {
          color: #fff;
          font-size: 1rem; }
        .skill .mainBox .container .card:hover .percent .number h3 span {
          color: #fff;
          font-size: 1rem; }
        .skill .mainBox .container .card .card:hover .text {
          color: #fff;
          font-size: 1rem; }
      .skill .mainBox .container .card svg circle:nth-child(2) {
        stroke-dasharray: 124;
        stroke-dashoffset: 62; }
      .skill .mainBox .container .card:nth-child(1) svg circle:nth-child(2) {
        stroke-dashoffset: calc(125 - (125 * 95) / 125);
        stroke: #4fc3f7; }
      .skill .mainBox .container .card:nth-child(2) svg circle:nth-child(2) {
        stroke: #4fc3f7;
        stroke-dashoffset: calc(125 - (125 * 95) / 125); }
      .skill .mainBox .container .card:nth-child(3) svg circle:nth-child(2) {
        stroke: #4fc3f7;
        stroke-dashoffset: calc(125 - (125 * 95) / 125); }
      .skill .mainBox .container .card:nth-child(4) svg circle:nth-child(2) {
        stroke-dashoffset: calc(125 - (125 * 95) / 125);
        stroke: #00ff43; }
      .skill .mainBox .container .card:nth-child(5) svg circle:nth-child(2) {
        stroke: #00ff43;
        stroke-dashoffset: calc(125 - (125 * 95) / 125); }
      .skill .mainBox .container .card:nth-child(6) svg circle:nth-child(2) {
        stroke: #00ff43;
        stroke-dashoffset: calc(125 - (125 * 95) / 125); }
      .skill .mainBox .container .card:nth-child(7) svg circle:nth-child(2) {
        stroke-dashoffset: calc(125 - (125 * 40) / 125);
        stroke: hotpink; }
      .skill .mainBox .container .card:nth-child(8) svg circle:nth-child(2) {
        stroke: hotpink;
        stroke-dashoffset: calc(125 - (125 * 40) / 125); }
      .skill .mainBox .container .card:nth-child(9) svg circle:nth-child(2) {
        stroke: hotpink;
        stroke-dashoffset: calc(125 - (125 * 40) / 125); }

.counters {
  width: auto;
  display: flex;
  flex-direction: column;
  padding: 1rem 1rem;
  margin-top: -2rem; }
  .counters .title {
    margin-bottom: 3rem;
    border-bottom: 1px solid #a5aaaa; }
    .counters .title h5 {
      color: #a5aaaa; }
  .counters .stats-icon {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: space-around;
    grid-gap: 1rem; }
    .counters .stats-icon .statsBox {
      display: grid;
      justify-content: center;
      margin-bottom: 2rem;
      text-align: center;
      line-height: 2;
      transition: 0.5s;
      padding: 0 1rem;
      padding-top: 2rem;
      box-shadow: inset 0 0 60px rgba(138, 134, 134, 0.397);
      background: #222;
      border-radius: 1rem; }
      .counters .stats-icon .statsBox:hover i {
        cursor: pointer;
        transform: scale(1.05);
        color: #4fc3f7;
        transform: scale(1.05); }
      .counters .stats-icon .statsBox i {
        text-align: center;
        font-size: 3.5rem;
        color: #a5aaaa;
        transition: 0.5s; }
      .counters .stats-icon .statsBox .counter {
        font-size: 1.2rem;
        color: #4fc3f7; }
      .counters .stats-icon .statsBox h3 {
        font-size: 1.2rem;
        color: #a5aaaa;
        margin-top: -0.1rem; }
  @media (max-width: 56.25em) {
    .counters .title h5 {
      font-size: 1.35rem; }
    .counters .stats-icon .statsBox a i {
      font-size: 2.5rem; }
    .counters .stats-icon .statsBox h3 {
      font-size: 1rem; } }
  @media (max-width: 37.5em) {
    .counters .title h5 {
      font-size: 1.35rem; }
    .counters .stats-icon .statsBox a i {
      font-size: 2.5rem; }
    .counters .stats-icon .statsBox h3 {
      font-size: 1rem; } }
  @media (max-width: 25em) {
    .counters .title h5 {
      font-size: 1.25rem; }
    .counters .stats-icon .statsBox .counter {
      font-size: 1.5rem; }
    .counters .stats-icon .statsBox a i {
      font-size: 4rem; }
    .counters .stats-icon .statsBox h3 {
      font-size: 1.1rem; } }

section .jobDesc {
  color: #a5aaaa; }
  section .jobDesc .modal {
    background: #1b1b1b; }
    section .jobDesc .modal .modalBox {
      padding: 5rem; }
      section .jobDesc .modal .modalBox .jd {
        border-bottom: 1px solid #a5aaaa;
        margin-bottom: 1rem; }
      section .jobDesc .modal .modalBox ul li {
        font-size: 1.5rem; }
      section .jobDesc .modal .modalBox .modal-footer {
        padding: 3rem;
        border-top: #a5aaaa; }

.savings {
  color: #a5aaaa;
  overflow-y: scroll; }
  .savings .modal {
    background: #1b1b1b; }
    .savings .modal .totalSavings {
      padding: 0 2rem;
      display: flex;
      justify-content: space-between; }
    .savings .modal .modalBox {
      padding: 5rem; }
      .savings .modal .modalBox .acc {
        border-bottom: 1px solid #a5aaaa;
        margin-bottom: 1rem; }
      .savings .modal .modalBox ul li {
        font-size: 1.4rem;
        line-height: 1.5; }