.wrap {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 7px;
  }
  
  
  img {
    width: 150%;
    height: auto;

  }
  
  .section_float {
    overflow: hidden;
  }
  .section_float .section--image {
    float: right;
    margin-left: 18px;
  }
  /* .section_float .section--content { */
  /* } */
  .section_flex {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
  }
  .section_flex .section--image {
    width: 25%;
  }
  .section_flex .section--content {
    width: 70%;
  }
  .section_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    grid-gap: 16px;
  }
  .section_grid .section--image {
    grid-column: span 1;
  }
  .section_grid .section--content {
    grid-column: span 1;
  }
  

  @media (max-width: 770px) {
    header,
    .main-hero-section,
    .common-section {
      padding: 0 5rem;
    }
  
    header nav {
      padding-top: 1rem;
      display: flex;
      flex-flow: column;
      align-items: flex-start;
    }
  
    header nav .left-side-menu {
      width: 100%;
      display: block;
      order: 2;
    }
  
    header nav .left-side-menu img {
      display: block;
      width: 100%;
    }
  
    header .left-side-menu .sub-menu {
      width: 100%;
      display: block;
    }
  
    header nav .left-side-menu .sub-menu a {
      margin-right: 2rem;
    }
  
    header nav .left-side-menu .sub-menu a li {
      font-size: 1.7rem;
    }
  
    header nav .right-side-menu {
      width: 100%;
      order: 1;
    }
  
    header nav .right-side-menu .sub-menu a {
      width: 10rem;
      height: 3.5rem;
      border: 0.1rem solid var(--main-color);
      border-radius: 2rem;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 1rem;
    }
  
    header nav .right-side-menu .sub-menu a li {
      font-size: 1.5rem;
      margin-right: 0;
      text-transform: uppercase;
    }
  
    header nav .right-side-menu .sub-menu button {
      width: 13rem;
      font-size: 1.5rem;
      text-transform: uppercase;
    }
  
    /* hero section css style  */
    .main-hero-section {
      width: 100%;
      height: 80vh;
      display: flex;
      flex-flow: column;
    }
  
    .main-hero-section .hero-left-side {
      order: 2;
      width: 100%;
    }
  
    .main-hero-section .hero-left-side h1 {
      width: 35rem;
      font-size: 5rem;
      line-height: 6rem;
      margin-bottom: 2rem;
    }
  
    .main-hero-section .hero-left-side p {
      width: 35rem;
      font-size: 2rem;
      margin-bottom: 5rem;
    }
  
    .main-hero-section .hero-right-side {
      order: 1;
      /* width: 100%; */
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      background: transparent;
    }
  
    .main-hero-section .hero-right-side img {
      width: 35rem;
      height: 35rem;
      margin: 0;
      margin-top: 4rem;
    }
  }
  


/* ----------------------------responsive website layout start 
 ---------------------------*/

  @media (max-width: 1620px) {
    header,
    .main-hero-section,
    .common-section {
      padding: 0 12rem;
    }
  
    .main-hero-section .hero-right-side img {
      width: 95rem;
      height: 95rem;
      margin-right: 30rem;
    }
  }
  
  /* laptop devices  */
  @media (max-width: 1280px) {
    header,
    .main-hero-section,
    .common-section {
      padding: 0 10rem;
    }
    html {
      font-size: 50%;
    }
  
    .main-hero-section .hero-right-side img {
      width: 80rem;
      height: 80rem;
  
      margin-right: 28rem;
      margin-top: 5rem;
    }
  }
  
  /* tablet mode css style   */
  @media (max-width: 980px) {
    header,
    .main-hero-section,
    .common-section,
    .section-third {
      padding: 0 8rem;
    }
  
    .main-hero-section .hero-right-side {
      width: 100%;
      position: relative;
      background: transparent;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  
    .main-hero-section .hero-right-side img {
      width: 60rem;
      height: 60rem;
      /* margin-left: -11rem; */
      margin-right: 0;
      margin-top: 5rem;
    }
  
    .common-section {
      width: 100%;
      height: auto;
      display: grid;
      grid-template-columns: 1fr;
    }
  
    .common-section .left-side figure {
      height: 55rem;
    }
  
    .common-section .left-side figure img {
      height: 50rem;
      margin-left: 5rem;
      width: 35rem;
    }
  
    .common-section .right-side {
      margin-top: 6rem;
      justify-content: start;
      height: auto;
    }
  
    .common-section .right-side h2 {
      font-size: 4.5rem;
      width: 35rem;
    }
  
    /* section 3 style  */
    .section-third {
      height: auto;
      padding: 0 5rem;
      padding-bottom: 5rem;
    }
  
    .section-third h2 {
      width: auto;
      padding: 0 1rem;
      font-size: 4.5rem;
      line-height: 6rem;
      padding-top: 5rem;
    }
  
    .section-third .section-third-task {
      display: grid;
      grid-template-columns: 1fr;
      grid-column-gap: 4rem;
      padding: 0;
    }
  
    .section-third .section-third-task .task-1 img,
    .section-third .section-third-task .task-2 img,
    .section-third .section-third-task .task-3 img {
      width: 15rem;
      height: 15rem;
    }
  
    .section-third .section-third-task .task-2 {
      margin: 2rem 0;
    }
  
    /* section 4 style  */
  
    #section-four .right-side {
      order: 2;
    }
  
    #section-four .right-side h2 {
      width: 40rem;
    }
  
    #section-four .left-side img {
      height: 38rem;
      width: 38rem;
      margin-top: 5rem;
    }
  
    /* section 5 style  */
  
    #section-five .right-side {
      order: 2;
    }
  
    #section-five .right-side h2 {
      width: 40rem;
      font-size: 3.5rem;
      line-height: 4.2rem;
    }
  
    #section-five .left-side img {
      height: 38rem;
      width: 38rem;
      margin-top: 5rem;
    }
  
    /* section 6 style  */
    footer {
      width: 100%;
      padding: 3rem 5rem;
      display: grid;
      grid-template-columns: none;
    }
  
    footer .footer-menu {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }
  
    footer .footer-menu h4 {
      font-size: 1.5rem;
    }
  
    /* icons bar  */
    .icon-bar {
      top: 35%;
    }
  }
  
  /* mobile devices */
  @media (max-width: 770px) {
    header,
    .main-hero-section,
    .common-section {
      padding: 0 5rem;
    }
  
    header nav {
      padding-top: 1rem;
      display: flex;
      flex-flow: column;
      align-items: flex-start;
    }
  
    header nav .left-side-menu {
      width: 100%;
      display: block;
      order: 2;
    }
  
    header nav .left-side-menu img {
      display: block;
      width: 100%;
    }
  
    header .left-side-menu .sub-menu {
      width: 100%;
      display: block;
    }
  
    header nav .left-side-menu .sub-menu a {
      margin-right: 2rem;
    }
  
    header nav .left-side-menu .sub-menu a li {
      font-size: 1.7rem;
    }
  
    header nav .right-side-menu {
      width: 100%;
      order: 1;
    }
  
    header nav .right-side-menu .sub-menu a {
      width: 10rem;
      height: 3.5rem;
      border: 0.1rem solid var(--main-color);
      border-radius: 2rem;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 1rem;
    }
  
    header nav .right-side-menu .sub-menu a li {
      font-size: 1.5rem;
      margin-right: 0;
      text-transform: uppercase;
    }
  
    header nav .right-side-menu .sub-menu button {
      width: 13rem;
      font-size: 1.5rem;
      text-transform: uppercase;
    }
  
    /* hero section css style  */
    .card-img-top {
      width: 50%;
      height: 50%;
      display: flex;
      flex-flow: column;
    }
  
    .main-hero-section .hero-left-side {
      order: 2;
      width: 100%;
    }
  
    .main-hero-section .hero-left-side h1 {
      width: 35rem;
      font-size: 5rem;
      line-height: 6rem;
      margin-bottom: 2rem;
    }
  
    .main-hero-section .hero-left-side p {
      width: 35rem;
      font-size: 2rem;
      margin-bottom: 5rem;
    }
  
    .main-hero-section .hero-right-side {
      order: 1;
      /* width: 100%; */
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      background: transparent;
    }
  
    .main-hero-section .hero-right-side img {
      width: 35rem;
      height: 35rem;
      margin: 0;
      margin-top: 4rem;
    }
  }