@import url("https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700;9..40,800&display=swap");
@import url(../fonts/stylesheet.css);
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; }

html, body {
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
  font-family: "DM Sans", sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  overflow-x: hidden; }

ul, ol {
  list-style: none; }

a, img {
  text-decoration: none; }

/* media Queries */
.popupMenu {
  height: 100%;
  width: 100%;
  background-color: #024782;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  transition: .5s ease-in-out;
  transform: translateX(100%); }
  @media (max-width: 768px) {
    .popupMenu {
      overflow: auto; } }
  .popupMenu .popupmenuHeader {
    width: 100%;
    max-width: 1332px;
    padding: 48px 24px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative; }
    @media (max-width: 768px) {
      .popupMenu .popupmenuHeader {
        flex-flow: column;
        gap: 24px;
        padding: 72px 16px 24px 16px; } }
    .popupMenu .popupmenuHeader .search {
      width: auto;
      display: inline-flex;
      align-items: center;
      position: relative; }
      @media (max-width: 768px) {
        .popupMenu .popupmenuHeader .search {
          width: 100%; } }
      .popupMenu .popupmenuHeader .search input[type=text] {
        display: block;
        width: 320px;
        height: 48px;
        border-radius: 0 8px 8px 0;
        padding: 6px 12px;
        box-sizing: border-box;
        text-align: left;
        color: #fff;
        border: none;
        background-color: #2568A1;
        font-size: 15px;
        font-weight: 300; }
        @media (max-width: 1024px) {
          .popupMenu .popupmenuHeader .search input[type=text] {
            width: 260px; } }
        @media (max-width: 768px) {
          .popupMenu .popupmenuHeader .search input[type=text] {
            width: 100%; } }
        .popupMenu .popupmenuHeader .search input[type=text]:focus {
          outline: none; }
        .popupMenu .popupmenuHeader .search input[type=text]::placeholder {
          color: rgba(255, 255, 255, 0.48); }
      .popupMenu .popupmenuHeader .search span {
        width: 48px;
        height: 48px;
        border-radius: 8px 0 0 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #5FCD2C; }
        .popupMenu .popupmenuHeader .search span img {
          display: block;
          width: 24px; }
    .popupMenu .popupmenuHeader .popupmenuLinks {
      width: auto;
      display: inline-flex;
      flex-flow: row wrap;
      align-items: center;
      gap: 48px; }
      @media (max-width: 1280px) {
        .popupMenu .popupmenuHeader .popupmenuLinks {
          gap: 24px; } }
      @media (max-width: 1024px) {
        .popupMenu .popupmenuHeader .popupmenuLinks {
          gap: 16px; } }
      @media (max-width: 768px) {
        .popupMenu .popupmenuHeader .popupmenuLinks {
          gap: 24px;
          justify-content: center; } }
      .popupMenu .popupmenuHeader .popupmenuLinks a {
        display: inline-block;
        width: auto;
        color: rgba(255, 255, 255, 0.78); }
        .popupMenu .popupmenuHeader .popupmenuLinks a:hover {
          color: #5FCD2C; }
    .popupMenu .popupmenuHeader .close {
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      background-color: #CB8B3F;
      cursor: pointer; }
      @media (max-width: 768px) {
        .popupMenu .popupmenuHeader .close {
          position: absolute;
          right: 16px;
          top: 16px; } }
      .popupMenu .popupmenuHeader .close:hover {
        background-color: #de8a24; }
      .popupMenu .popupmenuHeader .close img {
        display: block;
        width: 24px; }
  .popupMenu .popupcontainer {
    width: 100%;
    height: 100%;
    position: relative; }
    @media (max-width: 768px) {
      .popupMenu .popupcontainer {
        overflow: auto;
        height: auto; } }
    .popupMenu .popupcontainer .popupCon {
      width: 100%;
      max-width: 1332px;
      margin: 0 auto;
      padding: 72px 24px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-gap: 72px;
      align-items: center;
      background: url(../images/popuplogo.png) no-repeat left 20% center;
      background-size: contain;
      overflow-y: auto; }
      @media (max-width: 768px) {
        .popupMenu .popupcontainer .popupCon {
          grid-template-columns: repeat(1, 1fr);
          padding: 24px 16px; } }
      .popupMenu .popupcontainer .popupCon ul {
        width: 100%;
        max-width: 300px;
        display: flex;
        flex-flow: column;
        gap: 24px;
        align-items: flex-start;
        position: relative;
        border-right: 1px solid #346B99; }
        @media (max-width: 768px) {
          .popupMenu .popupcontainer .popupCon ul {
            border: none;
            max-width: 100%; } }
        .popupMenu .popupcontainer .popupCon ul li {
          width: 100%;
          display: flex;
          align-items: flex-end;
          justify-content: flex-end; }
          @media (max-width: 768px) {
            .popupMenu .popupcontainer .popupCon ul li {
              align-items: center;
              justify-content: center;
              position: relative;
              flex-flow: column; } }
          .popupMenu .popupcontainer .popupCon ul li a {
            display: inline-block;
            width: auto;
            text-align: right;
            font-size: 20px;
            font-weight: 600;
            color: #fff;
            padding: 0 24px 0 0; }
            @media (max-width: 768px) {
              .popupMenu .popupcontainer .popupCon ul li a {
                padding: 0;
                display: block;
                width: 100%;
                text-align: center; } }
            .popupMenu .popupcontainer .popupCon ul li a:hover {
              color: #5FCD2C; }
          .popupMenu .popupcontainer .popupCon ul li:hover .submenu {
            transform: translateX(292px); }
            @media (max-width: 768px) {
              .popupMenu .popupcontainer .popupCon ul li:hover .submenu {
                transform: translateX(0);
                display: flex; } }
          .popupMenu .popupcontainer .popupCon ul li .submenu {
            height: 100%;
            width: 260px;
            position: absolute;
            left: 0;
            top: 0;
            display: flex;
            flex-flow: column;
            align-items: center;
            justify-content: center;
            gap: 16px;
            z-index: 0;
            transform: translateX(-200%); }
            @media (max-width: 768px) {
              .popupMenu .popupcontainer .popupCon ul li .submenu {
                width: 100%;
                transform: translateX(0);
                display: none;
                position: relative;
                padding: 16px;
                background-color: rgba(0, 0, 0, 0.15);
                border-radius: 16px;
                gap: 12px; } }
            .popupMenu .popupcontainer .popupCon ul li .submenu a {
              display: inline-block;
              width: auto;
              font-size: 14px;
              font-weight: 300;
              color: rgba(255, 255, 255, 0.78); }
              .popupMenu .popupcontainer .popupCon ul li .submenu a:hover {
                color: #5FCD2C; }
    .popupMenu .popupcontainer .popupphoto {
      width: 100%;
      max-width: 50%;
      display: block;
      aspect-ratio: 3 / 4;
      position: absolute;
      right: 0;
      top: 6%; }
      @media (max-width: 1024px) {
        .popupMenu .popupcontainer .popupphoto {
          display: none; } }
      .popupMenu .popupcontainer .popupphoto img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover; }

header {
  width: 100%;
  padding: 8px 0 12px 0;
  background-color: rgba(0, 0, 0, 0.32);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999; }
  header .header {
    width: 100%;
    max-width: 1332px;
    padding: 0 24px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between; }
    header .header .logo {
      width: 100%;
      max-width: 250px; }
      @media (max-width: 560px) {
        header .header .logo {
          max-width: 180px; } }
      header .header .logo a {
        display: block;
        width: 100%; }
        header .header .logo a img {
          display: block;
          width: 100%; }
    header .header .headerLinks {
      width: auto;
      display: inline-flex;
      align-items: center;
      gap: 48px; }
      header .header .headerLinks ul {
        width: auto;
        display: flex;
        align-items: center;
        gap: 48px; }
        @media (max-width: 768px) {
          header .header .headerLinks ul {
            display: none; } }
        header .header .headerLinks ul li {
          width: auto; }
          header .header .headerLinks ul li a {
            display: inline-block;
            width: auto;
            color: #fff; }
            header .header .headerLinks ul li a:hover {
              color: #5FCD2C; }
      header .header .headerLinks .moreLinks {
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer; }
        header .header .headerLinks .moreLinks small {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 32px;
          height: 32px; }
          header .header .headerLinks .moreLinks small span {
            display: block;
            width: 18px;
            height: 2px;
            border-radius: 20px;
            background-color: #fff;
            position: relative;
            transition: .25s ease; }
            header .header .headerLinks .moreLinks small span::before {
              content: '';
              position: absolute;
              right: 0;
              top: -8px;
              height: 2px;
              border-radius: 20px;
              background-color: #fff;
              width: 24px;
              transition: .25s ease; }
            header .header .headerLinks .moreLinks small span::after {
              content: '';
              position: absolute;
              right: 0;
              bottom: -8px;
              height: 2px;
              border-radius: 20px;
              background-color: #fff;
              width: 24px;
              transition: .25s ease; }

.wrapper {
  width: 100%; }
  .wrapper .slider {
    width: 100%; }
    .wrapper .slider .sliderPhoto {
      width: 100%;
      position: relative; }
      @media (max-width: 1024px) {
        .wrapper .slider .sliderPhoto {
          height: 560px; } }
      @media (max-width: 560px) {
        .wrapper .slider .sliderPhoto {
          height: 400px; } }
      .wrapper .slider .sliderPhoto img {
        display: block;
        width: 100%; }
        @media (max-width: 1024px) {
          .wrapper .slider .sliderPhoto img {
            height: 100%;
            object-fit: cover; } }
        @media (max-width: 560px) {
          .wrapper .slider .sliderPhoto img {
            height: 100%;
            object-fit: cover; } }
      .wrapper .slider .sliderPhoto small {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.7) 100%);
        z-index: 1;
        position: absolute;
        left: 0;
        top: 0;
        font: 300 48px "DM Sans", sans-serif;
        color: #fff;
        text-align: center;
        letter-spacing: normal;
        line-height: 1.25;
        padding: 0 0 48px 0; }
        @media (max-width: 768px) {
          .wrapper .slider .sliderPhoto small {
            font-size: 32px; } }
        @media (max-width: 560px) {
          .wrapper .slider .sliderPhoto small {
            font-size: 24px; } }
  .wrapper .sliderButtons {
    width: 100%;
    background-color: #024782; }
    .wrapper .sliderButtons .sliderBtnsInner {
      width: 100%;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      align-items: center;
      border-color: #fff;
      border-style: solid;
      border-width: 1px 0px 1px 0px; }
      @media (max-width: 768px) {
        .wrapper .sliderButtons .sliderBtnsInner {
          grid-template-columns: repeat(3, 1fr);
          border: none; } }
      @media (max-width: 560px) {
        .wrapper .sliderButtons .sliderBtnsInner {
          grid-template-columns: repeat(1, 1fr); } }
      .wrapper .sliderButtons .sliderBtnsInner a {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        padding: 32px 0;
        border-left: 1px solid #fff; }
        @media (max-width: 768px) {
          .wrapper .sliderButtons .sliderBtnsInner a {
            border: 1px solid #fff; } }
        @media (max-width: 560px) {
          .wrapper .sliderButtons .sliderBtnsInner a {
            border: none;
            border-top: 1px solid #fff; } }
        .wrapper .sliderButtons .sliderBtnsInner a:first-child {
          border: none; }
          @media (max-width: 768px) {
            .wrapper .sliderButtons .sliderBtnsInner a:first-child {
              border: 1px solid #fff; } }
          @media (max-width: 560px) {
            .wrapper .sliderButtons .sliderBtnsInner a:first-child {
              border: none; } }
        .wrapper .sliderButtons .sliderBtnsInner a:hover {
          background-color: #042d52; }
        .wrapper .sliderButtons .sliderBtnsInner a span {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          max-width: 24px; }
          .wrapper .sliderButtons .sliderBtnsInner a span img {
            display: block;
            width: 100%; }
        .wrapper .sliderButtons .sliderBtnsInner a b {
          display: inline-block;
          width: auto;
          text-align: center;
          font-weight: 400;
          color: #fff; }
  .wrapper .weknowWrapper {
    width: 100%;
    background-color: #F5F8FF; }
    .wrapper .weknowWrapper .wellRoundedWrapper {
      width: 100%;
      background: url(../../images/deliveringBg.jpg) no-repeat left top #F5F8FF;
      background-size: 100%; }
      @media (max-width: 560px) {
        .wrapper .weknowWrapper .wellRoundedWrapper {
          background: url(../../images/deliveringBg.jpg) no-repeat left bottom #F5F8FF;
          background-size: 100%; } }
      .wrapper .weknowWrapper .wellRoundedWrapper .wellRoundCon {
        width: 100%;
        max-width: 1332px;
        padding: 248px 24px 180px 24px;
        margin: 0 auto;
        display: grid;
        align-items: center;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-gap: 348px; }
        @media (max-width: 1024px) {
          .wrapper .weknowWrapper .wellRoundedWrapper .wellRoundCon {
            grid-gap: 96px;
            padding: 200px 24px 80px 24px; } }
        @media (max-width: 768px) {
          .wrapper .weknowWrapper .wellRoundedWrapper .wellRoundCon {
            padding: 300px 24px 48px 24px;
            display: flex;
            flex-flow: column-reverse; } }
        @media (max-width: 560px) {
          .wrapper .weknowWrapper .wellRoundedWrapper .wellRoundCon {
            display: flex;
            flex-flow: column-reverse;
            padding: 24px 16px 224px 16px; } }
        .wrapper .weknowWrapper .wellRoundedWrapper .wellRoundCon .wellRoundText {
          width: 100%;
          display: flex;
          flex-flow: column;
          gap: 40px; }
          @media (max-width: 768px) {
            .wrapper .weknowWrapper .wellRoundedWrapper .wellRoundCon .wellRoundText {
              gap: 24px; } }
          @media (max-width: 560px) {
            .wrapper .weknowWrapper .wellRoundedWrapper .wellRoundCon .wellRoundText {
              gap: 16px; } }
          .wrapper .weknowWrapper .wellRoundedWrapper .wellRoundCon .wellRoundText h2 {
            text-align: left;
            font-weight: 700;
            font-size: 48px;
            color: #0B6C8B;
            line-height: 1.25; }
            @media (max-width: 1024px) {
              .wrapper .weknowWrapper .wellRoundedWrapper .wellRoundCon .wellRoundText h2 {
                font-size: 36px;
                line-height: 1.2; } }
            @media (max-width: 560px) {
              .wrapper .weknowWrapper .wellRoundedWrapper .wellRoundCon .wellRoundText h2 {
                font-size: 32px;
                line-height: 1.2; } }
          .wrapper .weknowWrapper .wellRoundedWrapper .wellRoundCon .wellRoundText p {
            line-height: 1.5;
            color: #202020; }
            @media (max-width: 560px) {
              .wrapper .weknowWrapper .wellRoundedWrapper .wellRoundCon .wellRoundText p {
                font-size: 14px; } }
    .wrapper .weknowWrapper .weknowWrapp {
      width: 100%;
      max-width: 1332px;
      background: linear-gradient(180deg, #024782 0%, #024782 88%, rgba(255, 255, 255, 0) 88%, rgba(255, 255, 255, 0) 100%);
      padding: 48px 48px 0 48px;
      margin: 0 auto;
      display: flex;
      flex-flow: column;
      gap: 24px; }
      @media (max-width: 560px) {
        .wrapper .weknowWrapper .weknowWrapp {
          padding: 24px 16px 0 16px;
          gap: 16px; } }
      .wrapper .weknowWrapper .weknowWrapp .heading {
        width: 100%;
        display: flex;
        align-items: center;
        flex-flow: column;
        gap: 8px; }
        .wrapper .weknowWrapper .weknowWrapp .heading b {
          display: block;
          width: 100%;
          font-weight: 700;
          text-transform: uppercase;
          color: #fff;
          font-size: 40px;
          text-align: center;
          line-height: 1; }
          @media (max-width: 1024px) {
            .wrapper .weknowWrapper .weknowWrapp .heading b {
              font-size: 32px; } }
          @media (max-width: 560px) {
            .wrapper .weknowWrapper .weknowWrapp .heading b {
              font-size: 24px; } }
      .wrapper .weknowWrapper .weknowWrapp p {
        text-align: center;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.78); }
        @media (max-width: 560px) {
          .wrapper .weknowWrapper .weknowWrapp p {
            font-size: 14px; } }
      .wrapper .weknowWrapper .weknowWrapp ul {
        width: 100%;
        margin: 24px 0 0 0;
        display: grid;
        align-items: center;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-gap: 16px; }
        @media (max-width: 768px) {
          .wrapper .weknowWrapper .weknowWrapp ul {
            grid-template-columns: repeat(1, minmax(0, 1fr));
            grid-gap: 8px; } }
        .wrapper .weknowWrapper .weknowWrapp ul li {
          display: block;
          width: 100%;
          position: relative;
          overflow: hidden;
          transition: .25s ease; }
          .wrapper .weknowWrapper .weknowWrapp ul li.fullW {
            grid-column: 2 / 4; }
            @media (max-width: 768px) {
              .wrapper .weknowWrapper .weknowWrapp ul li.fullW {
                grid-column: 1 / 2; } }
          @media (max-width: 768px) {
            .wrapper .weknowWrapper .weknowWrapp ul li {
              aspect-ratio: 16 / 9; } }
          @media (max-width: 560px) {
            .wrapper .weknowWrapper .weknowWrapp ul li {
              aspect-ratio: 4 / 3; } }
          .wrapper .weknowWrapper .weknowWrapp ul li img {
            display: block;
            width: 100%;
            transition: .25s ease; }
            @media (max-width: 768px) {
              .wrapper .weknowWrapper .weknowWrapp ul li img {
                object-fit: cover;
                height: 100%; } }
          .wrapper .weknowWrapper .weknowWrapp ul li:hover {
            transition: .25s ease; }
            .wrapper .weknowWrapper .weknowWrapp ul li:hover img {
              transform: scale(1.1);
              transition: .25s ease; }
            .wrapper .weknowWrapper .weknowWrapp ul li:hover .hoverDiv {
              background: rgba(11, 64, 109, 0.78);
              transition: .25s ease; }
              .wrapper .weknowWrapper .weknowWrapp ul li:hover .hoverDiv span {
                transition: .25s ease;
                transform: scale(1); }
              .wrapper .weknowWrapper .weknowWrapp ul li:hover .hoverDiv .hoverDivInn {
                transition: .25s ease; }
                .wrapper .weknowWrapper .weknowWrapp ul li:hover .hoverDiv .hoverDivInn p {
                  opacity: 1;
                  display: block;
                  transition: .25s ease; }
          .wrapper .weknowWrapper .weknowWrapp ul li .hoverDiv {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            bottom: 0;
            z-index: 1;
            display: flex;
            flex-flow: column;
            justify-content: flex-end;
            background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
            transition: .25s ease; }
            .wrapper .weknowWrapper .weknowWrapp ul li .hoverDiv span {
              display: none;
              width: 40px;
              position: absolute;
              right: 20px;
              top: 20px;
              z-index: 2;
              transition: .25s ease;
              transform: scale(0); }
              .wrapper .weknowWrapper .weknowWrapp ul li .hoverDiv span img {
                display: block;
                width: 100%; }
            .wrapper .weknowWrapper .weknowWrapp ul li .hoverDiv .hoverDivInn {
              width: 100%;
              display: flex;
              flex-flow: column;
              justify-content: flex-end;
              gap: 16px;
              padding: 24px;
              box-sizing: border-box;
              transition: .25s ease; }
              .wrapper .weknowWrapper .weknowWrapp ul li .hoverDiv .hoverDivInn b {
                display: block;
                width: 100%;
                text-align: left;
                font-weight: 700;
                font-size: 26px;
                color: #fff;
                line-height: 1.15;
                transition: .25s ease; }
                @media (max-width: 1024px) {
                  .wrapper .weknowWrapper .weknowWrapp ul li .hoverDiv .hoverDivInn b {
                    font-size: 20px; } }
              .wrapper .weknowWrapper .weknowWrapp ul li .hoverDiv .hoverDivInn p {
                text-align: left;
                color: #fff;
                line-height: 1.4;
                opacity: 0;
                display: none;
                transition: .25s ease; }
                @media (max-width: 560px) {
                  .wrapper .weknowWrapper .weknowWrapp ul li .hoverDiv .hoverDivInn p {
                    font-size: 14px; } }
    .wrapper .weknowWrapper .vibrantWrapper {
      width: 100%;
      background: url(../../images/vibrantBg.jpg) no-repeat left top #F5F8FF;
      background-size: 100%; }
      @media (max-width: 560px) {
        .wrapper .weknowWrapper .vibrantWrapper {
          background-size: 120%; } }
      .wrapper .weknowWrapper .vibrantWrapper .vibrantCon {
        width: 100%;
        max-width: 1332px;
        margin: 0 auto;
        padding: 200px 24px 200px 24px;
        display: grid;
        align-items: center;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-gap: 96px; }
        @media (max-width: 1024px) {
          .wrapper .weknowWrapper .vibrantWrapper .vibrantCon {
            padding: 200px 24px 70px 24px; } }
        @media (max-width: 768px) {
          .wrapper .weknowWrapper .vibrantWrapper .vibrantCon {
            grid-template-columns: repeat(1, minmax(0, 1fr));
            padding: 272px 16px 16px 16px; } }
        .wrapper .weknowWrapper .vibrantWrapper .vibrantCon .vibrantConInner {
          width: 100%;
          display: flex;
          flex-flow: column;
          gap: 48px; }
          @media (max-width: 560px) {
            .wrapper .weknowWrapper .vibrantWrapper .vibrantCon .vibrantConInner {
              gap: 24px; } }
          .wrapper .weknowWrapper .vibrantWrapper .vibrantCon .vibrantConInner .head_ing {
            width: 100%;
            display: flex;
            align-items: center;
            flex-flow: column;
            gap: 8px; }
            .wrapper .weknowWrapper .vibrantWrapper .vibrantCon .vibrantConInner .head_ing b {
              display: block;
              width: 100%;
              font-weight: 700;
              text-transform: uppercase;
              color: #0B6C8B;
              font-size: 40px;
              text-align: center;
              line-height: 1; }
              @media (max-width: 1024px) {
                .wrapper .weknowWrapper .vibrantWrapper .vibrantCon .vibrantConInner .head_ing b {
                  font-size: 32px; } }
              @media (max-width: 560px) {
                .wrapper .weknowWrapper .vibrantWrapper .vibrantCon .vibrantConInner .head_ing b {
                  font-size: 24px; } }
          .wrapper .weknowWrapper .vibrantWrapper .vibrantCon .vibrantConInner ul {
            width: 100%;
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            align-items: center; }
            @media (max-width: 560px) {
              .wrapper .weknowWrapper .vibrantWrapper .vibrantCon .vibrantConInner ul {
                grid-template-columns: repeat(2, minmax(0, 1fr)); } }
            .wrapper .weknowWrapper .vibrantWrapper .vibrantCon .vibrantConInner ul li {
              width: 100%;
              background-color: rgba(255, 255, 255, 0.58);
              aspect-ratio: 1 / 1;
              display: flex;
              align-items: center;
              flex-flow: column;
              justify-content: center;
              gap: 16px;
              padding: 20px;
              box-sizing: border-box; }
              .wrapper .weknowWrapper .vibrantWrapper .vibrantCon .vibrantConInner ul li:nth-child(even) {
                background-color: rgba(66, 212, 232, 0.2); }
                @media (max-width: 560px) {
                  .wrapper .weknowWrapper .vibrantWrapper .vibrantCon .vibrantConInner ul li:nth-child(even) {
                    background: unset; } }
              @media (max-width: 560px) {
                .wrapper .weknowWrapper .vibrantWrapper .vibrantCon .vibrantConInner ul li:nth-child(2) {
                  background-color: rgba(66, 212, 232, 0.2); } }
              @media (max-width: 560px) {
                .wrapper .weknowWrapper .vibrantWrapper .vibrantCon .vibrantConInner ul li:nth-child(3) {
                  background-color: rgba(66, 212, 232, 0.2); } }
              @media (max-width: 560px) {
                .wrapper .weknowWrapper .vibrantWrapper .vibrantCon .vibrantConInner ul li:nth-child(6) {
                  background-color: rgba(66, 212, 232, 0.2); } }
              .wrapper .weknowWrapper .vibrantWrapper .vibrantCon .vibrantConInner ul li span {
                display: block;
                width: 100%;
                text-align: center;
                font-weight: 700;
                font-size: 36px;
                color: #0B6C8B; }
                @media (max-width: 1024px) {
                  .wrapper .weknowWrapper .vibrantWrapper .vibrantCon .vibrantConInner ul li span {
                    font-size: 28px; } }
                @media (max-width: 560px) {
                  .wrapper .weknowWrapper .vibrantWrapper .vibrantCon .vibrantConInner ul li span {
                    font-size: 26px; } }
              .wrapper .weknowWrapper .vibrantWrapper .vibrantCon .vibrantConInner ul li p {
                text-align: center;
                font-size: 14px;
                font-weight: 500;
                line-height: 1.15; }
                @media (max-width: 560px) {
                  .wrapper .weknowWrapper .vibrantWrapper .vibrantCon .vibrantConInner ul li p {
                    font-size: 13px; } }
      .wrapper .weknowWrapper .vibrantWrapper .heading {
        width: 100%;
        display: flex;
        flex-flow: column;
        gap: 8px;
        padding: 0 0 48px 0; }
        @media (max-width: 768px) {
          .wrapper .weknowWrapper .vibrantWrapper .heading {
            padding: 24px 0; } }
        @media (max-width: 560px) {
          .wrapper .weknowWrapper .vibrantWrapper .heading {
            padding: 24px 0; } }
        .wrapper .weknowWrapper .vibrantWrapper .heading b {
          display: block;
          width: 100%;
          font-weight: 700;
          text-transform: uppercase;
          color: #0B6C8B;
          font-size: 48px;
          text-align: center;
          line-height: 1; }
          @media (max-width: 1024px) {
            .wrapper .weknowWrapper .vibrantWrapper .heading b {
              font-size: 32px; } }
          @media (max-width: 560px) {
            .wrapper .weknowWrapper .vibrantWrapper .heading b {
              font-size: 22px; } }
    .wrapper .weknowWrapper .challengedWrapper {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      align-items: flex-start;
      margin: 0 0 40px 0; }
      @media (max-width: 768px) {
        .wrapper .weknowWrapper .challengedWrapper {
          grid-template-columns: repeat(1, minmax(0, 1fr)); } }
      .wrapper .weknowWrapper .challengedWrapper .known {
        width: 100%;
        aspect-ratio: 1 / 1;
        background-color: #024782;
        overflow: hidden;
        transition: .25s ease;
        position: relative; }
        .wrapper .weknowWrapper .challengedWrapper .known img {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: .25s ease; }
        .wrapper .weknowWrapper .challengedWrapper .known:hover {
          transition: .25s ease; }
          .wrapper .weknowWrapper .challengedWrapper .known:hover img {
            transform: scale(1.2); }
          .wrapper .weknowWrapper .challengedWrapper .known:hover .knownHover {
            align-items: center;
            justify-content: center;
            background: rgba(2, 71, 130, 0.9);
            border-bottom: 8px solid #5FCD2C;
            transition: .25s ease; }
            .wrapper .weknowWrapper .challengedWrapper .known:hover .knownHover p {
              display: block;
              transition: .25s ease; }
        .wrapper .weknowWrapper .challengedWrapper .known .knownHover {
          width: 100%;
          display: flex;
          flex-flow: column;
          align-items: center;
          justify-content: flex-end;
          gap: 16px;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          padding: 48px;
          box-sizing: border-box;
          background: linear-gradient(180deg, transparent 0%, transparent 44.17%, rgba(0, 0, 0, 0.9) 100%);
          transition: .25s ease; }
          .wrapper .weknowWrapper .challengedWrapper .known .knownHover b {
            display: block;
            width: 100%;
            text-align: center;
            font-size: 36px;
            font-weight: 700;
            color: #fff;
            text-transform: uppercase; }
            @media (max-width: 1024px) {
              .wrapper .weknowWrapper .challengedWrapper .known .knownHover b {
                font-size: 24px; } }
          .wrapper .weknowWrapper .challengedWrapper .known .knownHover p {
            text-align: center;
            color: #fff;
            display: none;
            transition: .25s ease; }
            @media (max-width: 560px) {
              .wrapper .weknowWrapper .challengedWrapper .known .knownHover p {
                font-size: 13px; } }
      .wrapper .weknowWrapper .challengedWrapper .loved {
        width: 100%;
        aspect-ratio: 1 / 1;
        background-color: #0B6C8B;
        transition: .25s ease;
        overflow: hidden;
        position: relative; }
        .wrapper .weknowWrapper .challengedWrapper .loved img {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: .25s ease; }
        .wrapper .weknowWrapper .challengedWrapper .loved:hover {
          transition: .25s ease; }
          .wrapper .weknowWrapper .challengedWrapper .loved:hover img {
            transform: scale(1.2); }
          .wrapper .weknowWrapper .challengedWrapper .loved:hover .lovedHover {
            align-items: center;
            justify-content: center;
            background: rgba(2, 71, 130, 0.9);
            border-bottom: 8px solid #5FCD2C;
            transition: .25s ease; }
            .wrapper .weknowWrapper .challengedWrapper .loved:hover .lovedHover p {
              display: block;
              transition: .25s ease; }
        .wrapper .weknowWrapper .challengedWrapper .loved .lovedHover {
          width: 100%;
          display: flex;
          flex-flow: column;
          align-items: center;
          justify-content: flex-end;
          gap: 16px;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          padding: 48px;
          box-sizing: border-box;
          background: linear-gradient(180deg, transparent 0%, transparent 44.17%, rgba(0, 0, 0, 0.9) 100%);
          transition: .25s ease; }
          .wrapper .weknowWrapper .challengedWrapper .loved .lovedHover b {
            display: block;
            width: 100%;
            text-align: center;
            font-size: 36px;
            font-weight: 700;
            color: #fff;
            text-transform: uppercase; }
            @media (max-width: 1024px) {
              .wrapper .weknowWrapper .challengedWrapper .loved .lovedHover b {
                font-size: 24px; } }
          .wrapper .weknowWrapper .challengedWrapper .loved .lovedHover p {
            text-align: center;
            color: #fff;
            display: none;
            transition: .25s ease; }
            @media (max-width: 560px) {
              .wrapper .weknowWrapper .challengedWrapper .loved .lovedHover p {
                font-size: 13px; } }
      .wrapper .weknowWrapper .challengedWrapper .challanged {
        width: 100%;
        aspect-ratio: 1 / 1;
        background-color: #202020;
        overflow: hidden;
        transition: .25s ease;
        position: relative; }
        .wrapper .weknowWrapper .challengedWrapper .challanged img {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: .25s ease; }
        .wrapper .weknowWrapper .challengedWrapper .challanged:hover {
          transition: .25s ease; }
          .wrapper .weknowWrapper .challengedWrapper .challanged:hover img {
            transform: scale(1.2); }
          .wrapper .weknowWrapper .challengedWrapper .challanged:hover .challangedhover {
            align-items: center;
            justify-content: center;
            background: rgba(2, 71, 130, 0.9);
            border-bottom: 8px solid #5FCD2C;
            transition: .25s ease; }
            .wrapper .weknowWrapper .challengedWrapper .challanged:hover .challangedhover p {
              display: block;
              transition: .25s ease; }
        .wrapper .weknowWrapper .challengedWrapper .challanged .challangedhover {
          width: 100%;
          display: flex;
          flex-flow: column;
          align-items: center;
          justify-content: flex-end;
          gap: 16px;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          padding: 48px;
          box-sizing: border-box;
          background: linear-gradient(180deg, transparent 0%, transparent 44.17%, rgba(0, 0, 0, 0.9) 100%);
          transition: .25s ease; }
          .wrapper .weknowWrapper .challengedWrapper .challanged .challangedhover b {
            display: block;
            width: 100%;
            text-align: center;
            font-size: 36px;
            font-weight: 700;
            color: #fff;
            text-transform: uppercase; }
            @media (max-width: 1024px) {
              .wrapper .weknowWrapper .challengedWrapper .challanged .challangedhover b {
                font-size: 24px; } }
          .wrapper .weknowWrapper .challengedWrapper .challanged .challangedhover p {
            text-align: center;
            color: #fff;
            display: none;
            transition: .25s ease; }
            @media (max-width: 560px) {
              .wrapper .weknowWrapper .challengedWrapper .challanged .challangedhover p {
                font-size: 13px; } }
  .wrapper .betterPlaceWrapper {
    width: 100%;
    background: url(../../images/betterbg.jpg) no-repeat left top;
    background-size: 100%;
    padding: 300px 0 0 0;
    display: flex;
    flex-flow: column;
    gap: 48px;
    align-items: center; }
    @media (max-width: 1024px) {
      .wrapper .betterPlaceWrapper {
        gap: 24px;
        padding: 200px 0 0 0; } }
    @media (max-width: 768px) {
      .wrapper .betterPlaceWrapper {
        gap: 24px;
        background-size: 200%;
        padding: 200px 0 0 0; } }
    @media (max-width: 560px) {
      .wrapper .betterPlaceWrapper {
        gap: 24px;
        background-size: 200%;
        padding: 140px 0 0 0; } }
    .wrapper .betterPlaceWrapper .heading {
      width: 100%;
      display: flex;
      flex-flow: column;
      gap: 8px; }
      @media (max-width: 560px) {
        .wrapper .betterPlaceWrapper .heading {
          gap: 5px; } }
      .wrapper .betterPlaceWrapper .heading b {
        display: block;
        width: 100%;
        text-align: center;
        font-weight: 700;
        font-size: 48px;
        line-height: 48px;
        color: #0B6C8B;
        text-transform: uppercase; }
        @media (max-width: 1024px) {
          .wrapper .betterPlaceWrapper .heading b {
            font-size: 32px;
            line-height: 1; } }
        @media (max-width: 560px) {
          .wrapper .betterPlaceWrapper .heading b {
            font-size: 24px;
            line-height: 1; } }
    .wrapper .betterPlaceWrapper .betterPlaceContainer {
      width: 100%; }
      .wrapper .betterPlaceWrapper .betterPlaceContainer ul {
        width: 100%;
        display: grid;
        align-items: center;
        grid-template-columns: repeat(6, minmax(0, 1fr)); }
        @media (max-width: 768px) {
          .wrapper .betterPlaceWrapper .betterPlaceContainer ul {
            grid-template-columns: repeat(3, minmax(0, 1fr)); } }
        @media (max-width: 560px) {
          .wrapper .betterPlaceWrapper .betterPlaceContainer ul {
            grid-template-columns: repeat(2, minmax(0, 1fr)); } }
        .wrapper .betterPlaceWrapper .betterPlaceContainer ul li {
          display: block;
          width: 100%;
          aspect-ratio: 1 / 1;
          position: relative;
          overflow: hidden; }
          .wrapper .betterPlaceWrapper .betterPlaceContainer ul li img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: .25s ease; }
          .wrapper .betterPlaceWrapper .betterPlaceContainer ul li span {
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            /*background: url(../icons/plusGreen.svg) no-repeat right 20px top 20px rgba($color: #024782, $alpha: 0.78);
                        background-size: 40px;*/
            background: rgba(2, 71, 130, 0.78);
            opacity: 0;
            transition: .25s ease; }
          .wrapper .betterPlaceWrapper .betterPlaceContainer ul li:hover img {
            transition: .25s ease;
            transform: scale(1.2); }
          .wrapper .betterPlaceWrapper .betterPlaceContainer ul li:hover span {
            opacity: 1;
            transition: .25s ease; }
  .wrapper .getConnectedWrapper {
    width: 100%;
    padding: 72px 0 48px 0;
    display: flex;
    flex-flow: column;
    align-items: center;
    gap: 48px; }
    @media (max-width: 1024px) {
      .wrapper .getConnectedWrapper {
        gap: 24px; } }
    .wrapper .getConnectedWrapper h2 {
      text-align: center;
      font-weight: 700;
      color: #0B6C8B;
      font-size: 48px;
      text-transform: uppercase; }
      @media (max-width: 1024px) {
        .wrapper .getConnectedWrapper h2 {
          font-size: 36px; } }
      @media (max-width: 560px) {
        .wrapper .getConnectedWrapper h2 {
          font-size: 24px; } }
    .wrapper .getConnectedWrapper .getConnectedInner {
      width: 100%; }
      .wrapper .getConnectedWrapper .getConnectedInner .getConnectedPhoto {
        width: 100%;
        position: relative;
        overflow: hidden;
        transition: .25s ease-in;
        aspect-ratio: 1 / 1; }
        .wrapper .getConnectedWrapper .getConnectedInner .getConnectedPhoto:hover {
          transition: .25s ease; }
          .wrapper .getConnectedWrapper .getConnectedInner .getConnectedPhoto:hover span {
            transition: .25s ease; }
            .wrapper .getConnectedWrapper .getConnectedInner .getConnectedPhoto:hover span a {
              display: flex;
              align-items: center;
              justify-content: center;
              height: 48px;
              width: 48px;
              border-radius: 50%;
              background: url(../icons/arrow-blue.svg) no-repeat center #fff;
              background-size: 24px;
              transition: .25s ease; }
          .wrapper .getConnectedWrapper .getConnectedInner .getConnectedPhoto:hover img {
            transform: scale(1.2);
            transition: .25s ease; }
          .wrapper .getConnectedWrapper .getConnectedInner .getConnectedPhoto:hover .connectedHover {
            opacity: 1;
            transition: .25s ease; }
        .wrapper .getConnectedWrapper .getConnectedInner .getConnectedPhoto span {
          display: block;
          width: 48px;
          position: absolute;
          right: 16px;
          top: 16px;
          z-index: 4; }
          .wrapper .getConnectedWrapper .getConnectedInner .getConnectedPhoto span a {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 48px;
            width: 48px;
            border-radius: 50%;
            background: url(../icons/arrow-white.svg) no-repeat center #024782;
            background-size: 24px;
            transition: .25s ease; }
        .wrapper .getConnectedWrapper .getConnectedInner .getConnectedPhoto img {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: .25s ease; }
        .wrapper .getConnectedWrapper .getConnectedInner .getConnectedPhoto .connectedHover {
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          padding: 24px;
          background-color: rgba(2, 71, 130, 0.86);
          display: flex;
          align-items: center;
          justify-content: center;
          box-sizing: border-box;
          opacity: 0;
          transition: .25s ease; }
          .wrapper .getConnectedWrapper .getConnectedInner .getConnectedPhoto .connectedHover p {
            text-align: center;
            color: #fff; }

.docWrapp {
  width: 100%;
  padding: 124px 24px 62px 24px; }
  @media (max-width: 1024px) {
    .docWrapp {
      padding: 96px 24px 48px 24px; } }
  .docWrapp .docCon {
    width: 100%;
    max-width: 1332px;
    padding: 0 24px;
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    flex-flow: column;
    align-items: center; }
    .docWrapp .docCon h2 {
      text-align: center;
      color: #0B6C8B;
      font-size: 48px;
      font-weight: 700; }
      @media (max-width: 560px) {
        .docWrapp .docCon h2 {
          font-size: 32px; } }
    .docWrapp .docCon .docTable {
      width: 100%;
      margin: 56px 0 0 0; }
      .docWrapp .docCon .docTable table {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed; }
        .docWrapp .docCon .docTable table tbody {
          width: 100%;
          display: grid;
          grid-template-columns: repeat(1, 1fr);
          grid-gap: 36px; }
          .docWrapp .docCon .docTable table tbody tr {
            display: block;
            width: 100%; }
            .docWrapp .docCon .docTable table tbody tr td {
              display: block;
              width: 100%; }
              .docWrapp .docCon .docTable table tbody tr td h3 {
                text-align: left;
                color: #202022;
                font-weight: 700;
                font-size: 18px; }
              .docWrapp .docCon .docTable table tbody tr td table {
                width: 100%;
                border-collapse: collapse;
                margin: 16px 0 0 0; }
                .docWrapp .docCon .docTable table tbody tr td table tbody {
                  width: 100%;
                  display: grid;
                  grid-gap: 24px;
                  grid-template-columns: repeat(4, minmax(0, 1fr)); }
                  @media (max-width: 1024px) {
                    .docWrapp .docCon .docTable table tbody tr td table tbody {
                      grid-template-columns: repeat(3, minmax(0, 1fr)); } }
                  @media (max-width: 768px) {
                    .docWrapp .docCon .docTable table tbody tr td table tbody {
                      grid-template-columns: repeat(2, minmax(0, 1fr)); } }
                  @media (max-width: 560px) {
                    .docWrapp .docCon .docTable table tbody tr td table tbody {
                      grid-template-columns: repeat(1, minmax(0, 1fr)); } }
                  .docWrapp .docCon .docTable table tbody tr td table tbody tr {
                    display: block;
                    width: 100%; }
                    .docWrapp .docCon .docTable table tbody tr td table tbody tr td {
                      display: block;
                      width: 100%; }
                      .docWrapp .docCon .docTable table tbody tr td table tbody tr td .doc {
                        width: 100%; }
                        .docWrapp .docCon .docTable table tbody tr td table tbody tr td .doc a {
                          display: block;
                          width: 100%;
                          border: 1px solid #e0e0e0;
                          border-radius: 8px;
                          overflow: hidden; }
                          .docWrapp .docCon .docTable table tbody tr td table tbody tr td .doc a:hover {
                            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); }
                          .docWrapp .docCon .docTable table tbody tr td table tbody tr td .doc a span {
                            height: 148px;
                            width: 100%;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            border-bottom: 1px solid #e0e0e0; }
                            .docWrapp .docCon .docTable table tbody tr td table tbody tr td .doc a span.pdf {
                              background-color: #FFF7E4; }
                            .docWrapp .docCon .docTable table tbody tr td table tbody tr td .doc a span.excel {
                              background-color: #D6FFE3; }
                            .docWrapp .docCon .docTable table tbody tr td table tbody tr td .doc a span.xls {
                              background-color: #E9F0FF; }
                            .docWrapp .docCon .docTable table tbody tr td table tbody tr td .doc a span.ppt {
                              background-color: #FADFFF; }
                            .docWrapp .docCon .docTable table tbody tr td table tbody tr td .doc a span img {
                              display: block;
                              width: 100%;
                              max-width: 62px; }
                          .docWrapp .docCon .docTable table tbody tr td table tbody tr td .doc a b {
                            display: block;
                            text-align: left;
                            font-weight: 500;
                            font-size: 16px;
                            color: #202020;
                            padding: 16px 20px;
                            box-sizing: border-box;
                            word-break: break-word; }

.contactWrapper {
  width: 100%;
  background-color: #fff; }
  .contactWrapper .map {
    width: 100%;
    height: auto;
    max-height: 440px;
    overflow: hidden;
    margin: 0 0 32px 0; }
    .contactWrapper .map img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover; }
  .contactWrapper h2 {
    text-align: center;
    font-weight: 700;
    font-size: 48px;
    color: #0B6C8B; }
    @media (max-width: 560px) {
      .contactWrapper h2 {
        font-size: 32px; } }
  .contactWrapper .enquiryForm {
    width: 100%;
    margin: 0 auto;
    max-width: 1332px;
    padding: 24px 24px 62px 24px;
    display: grid;
    grid-gap: 62px;
    grid-template-columns: repeat(1, 1fr);
    align-items: flex-start; }
    .contactWrapper .enquiryForm .addressCon {
      width: 100%;
      display: flex;
      flex-flow: column;
      gap: 32px;
      padding: 32px;
      align-items: center; }
      @media (max-width: 560px) {
        .contactWrapper .enquiryForm .addressCon {
          padding: 16px; } }
      .contactWrapper .enquiryForm .addressCon ul {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        align-items: flex-start;
        grid-gap: 48px; }
        @media (max-width: 768px) {
          .contactWrapper .enquiryForm .addressCon ul {
            grid-template-columns: repeat(1, 1fr); } }
        .contactWrapper .enquiryForm .addressCon ul li {
          width: 100%;
          display: flex;
          flex-flow: column;
          gap: 8px; }
          .contactWrapper .enquiryForm .addressCon ul li b {
            width: 100%;
            display: flex;
            flex-flow: column;
            align-items: center;
            gap: 16px; }
            .contactWrapper .enquiryForm .addressCon ul li b small {
              display: block;
              width: 36px; }
              .contactWrapper .enquiryForm .addressCon ul li b small img {
                display: block;
                width: 100%; }
            .contactWrapper .enquiryForm .addressCon ul li b i {
              display: inline-block;
              text-align: left;
              color: #202020;
              font-weight: 700;
              font-size: 18px;
              font-style: normal; }
          .contactWrapper .enquiryForm .addressCon ul li p {
            text-align: center;
            color: #605151;
            font-weight: 500;
            font-size: 14px; }
    .contactWrapper .enquiryForm .enquiryWrapp {
      width: 100%;
      display: flex;
      flex-flow: column;
      gap: 24px; }
      .contactWrapper .enquiryForm .enquiryWrapp h2 {
        text-align: left;
        color: #202020;
        font-weight: 700;
        font-size: 20px; }
      .contactWrapper .enquiryForm .enquiryWrapp ul {
        width: 100%;
        display: flex;
        flex-flow: column;
        gap: 16px; }
        .contactWrapper .enquiryForm .enquiryWrapp ul li {
          width: 100%;
          display: flex;
          flex-flow: column;
          gap: 8px;
          align-items: center; }
          .contactWrapper .enquiryForm .enquiryWrapp ul li label {
            display: block;
            width: 100%;
            text-align: left;
            color: #202020;
            font-weight: 400;
            font-size: 14px; }
          .contactWrapper .enquiryForm .enquiryWrapp ul li input[type=text] {
            height: 48px;
            width: 100%;
            padding: 8px 12px;
            border-radius: 8px;
            background-color: #fff;
            border: 1px solid #C0C0C0;
            text-align: left;
            color: #202020;
            font-size: 15px;
            font-weight: 500; }
            .contactWrapper .enquiryForm .enquiryWrapp ul li input[type=text]:focus {
              outline: none;
              border-color: #06f; }
          .contactWrapper .enquiryForm .enquiryWrapp ul li textarea {
            height: 96px;
            width: 100%;
            padding: 8px 12px;
            border-radius: 8px;
            background-color: #fff;
            border: 1px solid #C0C0C0;
            text-align: left;
            color: #202020;
            font-size: 15px;
            font-weight: 500; }
            .contactWrapper .enquiryForm .enquiryWrapp ul li textarea:focus {
              outline: none;
              border-color: #06f; }
          .contactWrapper .enquiryForm .enquiryWrapp ul li input[type=submit] {
            appearance: none;
            cursor: pointer;
            height: 56px;
            width: 100%;
            max-width: 220px;
            border-radius: 8px;
            background: linear-gradient(180deg, #024782 0%, #024782 88%, rgba(255, 255, 255, 0) 88%, rgba(255, 255, 255, 0) 100%);
            border: none;
            cursor: pointer;
            text-align: center;
            color: #fff;
            margin: 16px 0 0 0;
            font-size: 15px;
            font-weight: 500; }
            @media (max-width: 560px) {
              .contactWrapper .enquiryForm .enquiryWrapp ul li input[type=submit] {
                max-width: 100%; } }
            .contactWrapper .enquiryForm .enquiryWrapp ul li input[type=submit]:focus, .contactWrapper .enquiryForm .enquiryWrapp ul li input[type=submit]:hover {
              outline: none;
              background-color: #291fae; }

.photoGalleryWrapper {
  width: 100%;
  padding: 124px 24px 62px 24px;
  /*background-color: $lightGreen;*/ }
  @media (max-width: 1024px) {
    .photoGalleryWrapper {
      padding: 96px 24px 48px 24px; } }
  .photoGalleryWrapper .photogalleryInner {
    width: 100%;
    max-width: 1332px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    flex-flow: column;
    align-items: center; }
    .photoGalleryWrapper .photogalleryInner h2 {
      text-align: center;
      color: #202022;
      font-size: 48px;
      font-weight: 700;
      color: #0B6C8B; }
      @media (max-width: 560px) {
        .photoGalleryWrapper .photogalleryInner h2 {
          font-size: 32px; } }
    .photoGalleryWrapper .photogalleryInner .gallery {
      width: 100%;
      margin: 24px 0 0 0;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-gap: 16px; }
      @media (max-width: 1024px) {
        .photoGalleryWrapper .photogalleryInner .gallery {
          grid-template-columns: repeat(3, 1fr); } }
      @media (max-width: 768px) {
        .photoGalleryWrapper .photogalleryInner .gallery {
          grid-template-columns: repeat(2, 1fr); } }
      @media (max-width: 560px) {
        .photoGalleryWrapper .photogalleryInner .gallery {
          grid-template-columns: repeat(1, 1fr); } }
      .photoGalleryWrapper .photogalleryInner .gallery .photo_gallery_box {
        width: 100%; }
        .photoGalleryWrapper .photogalleryInner .gallery .photo_gallery_box a {
          display: block;
          width: 100%;
          padding: 14px;
          background-color: #fff;
          transition: .3s ease; }
          .photoGalleryWrapper .photogalleryInner .gallery .photo_gallery_box a:hover span img {
            transform: scale(1.25);
            transition: .3s ease; }
          .photoGalleryWrapper .photogalleryInner .gallery .photo_gallery_box a span {
            display: block;
            width: 100%;
            aspect-ratio: 4 / 3;
            overflow: hidden; }
            .photoGalleryWrapper .photogalleryInner .gallery .photo_gallery_box a span img {
              display: block;
              width: 100%;
              object-fit: cover;
              transition: .3s ease;
              height: 100%; }
          .photoGalleryWrapper .photogalleryInner .gallery .photo_gallery_box a b {
            display: block;
            width: 100%;
            text-align: center;
            color: #202020;
            padding: 1rem 0 .25rem 0;
            font-weight: 500;
            font-size: 14px; }

.aboutWrapp {
  width: 100%;
  max-width: 1332px;
  margin: 0 auto;
  padding: 0 24px 62px 24px; }
  @media (max-width: 1024px) {
    .aboutWrapp {
      padding: 0 24px 48px 24px; } }
  .aboutWrapp .photo {
    width: 100%;
    overflow: hidden;
    max-height: 460px; }
    .aboutWrapp .photo img {
      display: block;
      width: 100%; }
  .aboutWrapp h2 {
    text-align: left;
    color: #0B6C8B;
    margin: 24px auto 16px auto;
    font-weight: 700;
    font-size: 32px;
    line-height: 1; }
    @media (max-width: 560px) {
      .aboutWrapp h2 {
        font-size: 24px; } }
  .aboutWrapp p {
    text-align: left;
    color: #505050;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px; }

.contentWrapp {
  width: 100%;
  padding: 124px 0 62px 0; }
  @media (max-width: 1024px) {
    .contentWrapp {
      padding: 96px 0 48px 0; } }
  .contentWrapp .content {
    width: 100%;
    max-width: 1332px;
    padding: 0 24px;
    margin: 0 auto;
    display: flex;
    flex-flow: column;
    align-items: center; }
    .contentWrapp .content h2 {
      text-align: left;
      color: #0B6C8B;
      margin: 24px auto 16px auto;
      line-height: 1;
      font-weight: 700;
      font-size: 48px; }
      @media (max-width: 560px) {
        .contentWrapp .content h2 {
          font-size: 28px; } }
    .contentWrapp .content .heading {
      width: auto;
      display: inline-flex;
      flex-flow: column;
      align-items: center;
      gap: 44px; }
      .contentWrapp .content .heading h1 {
        text-align: center;
        color: #202020;
        text-transform: uppercase;
        font-weight: 700;
        font-size: 32px; }
      .contentWrapp .content .heading .sep {
        width: 224px;
        height: 0;
        border-top: 1px solid #6E6DB5;
        position: relative; }
        .contentWrapp .content .heading .sep span {
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #fff;
          width: 72px;
          aspect-ratio: 1 / 1;
          border-radius: 50%;
          position: absolute;
          left: 0;
          right: 0;
          margin: 0 auto;
          top: -36px; }
          .contentWrapp .content .heading .sep span img {
            display: block;
            width: 48px; }
    .contentWrapp .content .photo {
      width: 100%;
      margin: 72px 0 40px 0;
      align-items: center;
      text-align: center; }
      .contentWrapp .content .photo img {
        display: inline-block;
        width: 40%; }
    .contentWrapp .content p {
      text-align: left;
      color: #505050;
      margin: 24px 0 0 0;
      font-weight: 500;
      font-size: 16px; }
      .contentWrapp .content p span {
        width: auto;
        font-weight: 500;
        font-size: 16px;
        color: #505050; }
      .contentWrapp .content p b {
        width: auto;
        font-weight: 500;
        font-size: 16px;
        color: #505050; }
    .contentWrapp .content .contentTable {
      width: 100%;
      overflow-x: auto; }
      .contentWrapp .content .contentTable div {
        width: 100% !important; }
      .contentWrapp .content .contentTable table {
        width: 100% !important;
        border-collapse: collapse; }
        .contentWrapp .content .contentTable table th {
          text-align: center;
          font-weight: 500;
          font-size: 13px;
          color: #202020;
          border: 1px solid #d0d0d0;
          padding: 8px 6px;
          background-color: #f2f2f2;
          font-weight: 600; }
        .contentWrapp .content .contentTable table td {
          text-align: center;
          font-weight: 500;
          font-size: 13px;
          color: #202020;
          border: 1px solid #d0d0d0;
          padding: 8px 6px;
          background-color: #fff;
          font-weight: 400; }
      .contentWrapp .content .contentTable h1 {
        font-weight: 700;
        font-size: 18px;
        padding: 10px 0; }
        .contentWrapp .content .contentTable h1 span {
          font-weight: 700;
          font-size: 18px; }

.schoolAppWrapper {
  width: 100%; }
  .schoolAppWrapper .schoolAppwrapp {
    width: 100%;
    max-width: 1332px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    margin: 0 auto;
    padding: 72px 0 0 24px; }
    @media (max-width: 1024px) {
      .schoolAppWrapper .schoolAppwrapp {
        padding: 124px 0 0 24px; } }
    @media (max-width: 768px) {
      .schoolAppWrapper .schoolAppwrapp {
        padding: 124px 0 0 24px;
        grid-template-columns: repeat(1, 1fr); } }
    @media (max-width: 560px) {
      .schoolAppWrapper .schoolAppwrapp {
        padding: 96px 0 0 24px;
        grid-template-columns: repeat(1, 1fr); } }
    .schoolAppWrapper .schoolAppwrapp .appText {
      width: auto;
      display: inline-flex;
      flex-flow: column;
      align-items: center;
      gap: 40px;
      padding: 0 0 62px 0; }
      @media (max-width: 560px) {
        .schoolAppWrapper .schoolAppwrapp .appText {
          padding: 0 24px 62px 0; } }
      .schoolAppWrapper .schoolAppwrapp .appText .introd {
        width: auto;
        display: inline-flex;
        flex-flow: column;
        align-items: center; }
        .schoolAppWrapper .schoolAppwrapp .appText .introd h1 {
          text-align: center;
          font: 400 78px "dk_au_revoirregular", serif;
          color: #E76933; }
          @media (max-width: 560px) {
            .schoolAppWrapper .schoolAppwrapp .appText .introd h1 {
              font-size: 48px; } }
        .schoolAppWrapper .schoolAppwrapp .appText .introd b {
          display: inline-block;
          width: auto;
          text-align: center;
          color: #0B6C8B;
          font-weight: 700;
          font-size: 48px; }
          @media (max-width: 560px) {
            .schoolAppWrapper .schoolAppwrapp .appText .introd b {
              font-size: 30px; } }
      .schoolAppWrapper .schoolAppwrapp .appText .unified {
        width: auto;
        display: inline-flex;
        flex-flow: column;
        gap: 16px; }
        .schoolAppWrapper .schoolAppwrapp .appText .unified b {
          display: inline-block;
          width: auto;
          text-align: center;
          color: #EA4F23;
          font-size: 24px;
          font-weight: 700; }
        .schoolAppWrapper .schoolAppwrapp .appText .unified .edusecurelogo {
          width: auto;
          display: inline-flex;
          align-items: center;
          justify-content: center; }
          .schoolAppWrapper .schoolAppwrapp .appText .unified .edusecurelogo img {
            display: block;
            width: 100%;
            max-width: 248px; }
      .schoolAppWrapper .schoolAppwrapp .appText .code {
        width: auto;
        display: inline-block;
        color: #fff;
        background-color: #EA4F23;
        padding: 12px 32px;
        border-radius: 4px 24px 4px 24px;
        font-weight: 700;
        font-size: 16px; }
      .schoolAppWrapper .schoolAppwrapp .appText .appStore {
        width: auto;
        display: inline-flex;
        align-items: center;
        gap: 24px; }
        @media (max-width: 560px) {
          .schoolAppWrapper .schoolAppwrapp .appText .appStore {
            gap: 16px; } }
        .schoolAppWrapper .schoolAppwrapp .appText .appStore a {
          display: inline-block;
          width: auto; }
          .schoolAppWrapper .schoolAppwrapp .appText .appStore a img {
            display: block;
            width: 100%;
            max-width: 200px; }
    .schoolAppWrapper .schoolAppwrapp .appPhoto {
      width: 100%;
      background: url(../icons/mobilebg.svg) no-repeat right bottom;
      background-size: 100%; }
      .schoolAppWrapper .schoolAppwrapp .appPhoto img {
        display: block;
        width: 100%; }
  .schoolAppWrapper .appfeatures {
    width: 100%;
    padding: 62px 0;
    background-color: #F5F8FF; }
    .schoolAppWrapper .appfeatures .appfeaturesInner {
      width: 100%;
      max-width: 1332px;
      padding: 0 24px;
      margin: 0 auto;
      display: flex;
      flex-flow: column;
      align-items: center;
      gap: 48px; }
      .schoolAppWrapper .appfeatures .appfeaturesInner h1 {
        text-align: center;
        color: #0B6C8B;
        padding: 0 148px;
        font-weight: 700;
        font-size: 48px;
        line-height: 1.25; }
        @media (max-width: 1024px) {
          .schoolAppWrapper .appfeatures .appfeaturesInner h1 {
            font-size: 40px; } }
        @media (max-width: 768px) {
          .schoolAppWrapper .appfeatures .appfeaturesInner h1 {
            padding: 0 48px;
            font-size: 32px; } }
        @media (max-width: 560px) {
          .schoolAppWrapper .appfeatures .appfeaturesInner h1 {
            padding: 0;
            font-size: 24px;
            line-height: 1; } }
      .schoolAppWrapper .appfeatures .appfeaturesInner .featuresCon {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: flex-start;
        grid-gap: 20px; }
        @media (max-width: 768px) {
          .schoolAppWrapper .appfeatures .appfeaturesInner .featuresCon {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            grid-gap: 8px; } }
        @media (max-width: 560px) {
          .schoolAppWrapper .appfeatures .appfeaturesInner .featuresCon {
            grid-template-columns: repeat(2, minmax(0, 1fr)); } }
        .schoolAppWrapper .appfeatures .appfeaturesInner .featuresCon .featureCC {
          width: 100%;
          height: 100%;
          min-height: 204px;
          display: flex;
          flex-flow: column;
          gap: 32px;
          padding: 48px 24px 24px 24px;
          background-color: #fff;
          border-radius: 16px;
          box-shadow: 1px 5px 11px 0px rgba(7, 74, 131, 0.1), 4px 19px 20px 0px rgba(7, 74, 131, 0.09), 10px 43px 26px 0px rgba(7, 74, 131, 0.05), 17px 76px 31px 0px rgba(7, 74, 131, 0.01), 27px 119px 34px 0px rgba(7, 74, 131, 0); }
          @media (max-width: 560px) {
            .schoolAppWrapper .appfeatures .appfeaturesInner .featuresCon .featureCC {
              padding: 24px 16px 16px 16px;
              min-height: auto; } }
          .schoolAppWrapper .appfeatures .appfeaturesInner .featuresCon .featureCC span {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%; }
            .schoolAppWrapper .appfeatures .appfeaturesInner .featuresCon .featureCC span img {
              display: block;
              width: 100%;
              max-width: 48px; }
              @media (max-width: 560px) {
                .schoolAppWrapper .appfeatures .appfeaturesInner .featuresCon .featureCC span img {
                  max-width: 36px; } }
          .schoolAppWrapper .appfeatures .appfeaturesInner .featuresCon .featureCC b {
            display: block;
            width: 100%;
            text-align: center;
            color: #202020;
            font-weight: 400;
            font-size: 16px; }
            @media (max-width: 560px) {
              .schoolAppWrapper .appfeatures .appfeaturesInner .featuresCon .featureCC b {
                font-size: 14px; } }

.initiativesWrapper {
  width: 100%; }
  .initiativesWrapper .initiativeInner {
    width: 100%;
    max-width: 1332px;
    padding: 124px 24px 62px 24px;
    margin: 0 auto; }
    .initiativesWrapper .initiativeInner h1 {
      text-align: center;
      font-weight: 700;
      font-size: 48px;
      color: #0B6C8B; }
      @media (max-width: 768px) {
        .initiativesWrapper .initiativeInner h1 {
          font-size: 40px; } }
      @media (max-width: 560px) {
        .initiativesWrapper .initiativeInner h1 {
          font-size: 32px; } }
    .initiativesWrapper .initiativeInner p {
      text-align: center;
      margin: 24px 0 0 0; }
      .initiativesWrapper .initiativeInner p small {
        font-weight: 600;
        font-size: 15px; }
    .initiativesWrapper .initiativeInner .initiativesContainer {
      width: 100%;
      display: flex;
      flex-flow: column;
      margin: 62px 0 0 0;
      gap: 48px; }
      .initiativesWrapper .initiativeInner .initiativesContainer .initiativeLeft {
        width: 100%;
        display: grid;
        grid-gap: 48px;
        grid-template-columns: repeat(2, 1fr);
        align-items: center; }
        @media (max-width: 768px) {
          .initiativesWrapper .initiativeInner .initiativesContainer .initiativeLeft:nth-child(even) {
            flex-flow: column-reverse; } }
        @media (max-width: 768px) {
          .initiativesWrapper .initiativeInner .initiativesContainer .initiativeLeft {
            display: flex;
            flex-flow: column;
            gap: 24px; } }
        .initiativesWrapper .initiativeInner .initiativesContainer .initiativeLeft .text {
          width: 100%;
          display: flex;
          flex-flow: column;
          gap: 32px; }
          .initiativesWrapper .initiativeInner .initiativesContainer .initiativeLeft .text h2 {
            text-align: left;
            font-weight: 700;
            font-size: 32px;
            color: #0B6C8B;
            line-height: 1; }
            @media (max-width: 768px) {
              .initiativesWrapper .initiativeInner .initiativesContainer .initiativeLeft .text h2 {
                font-size: 28px;
                line-height: 1; } }
            @media (max-width: 560px) {
              .initiativesWrapper .initiativeInner .initiativesContainer .initiativeLeft .text h2 {
                font-size: 24px;
                line-height: 1; } }
          .initiativesWrapper .initiativeInner .initiativesContainer .initiativeLeft .text ul {
            width: 100%;
            display: flex;
            flex-flow: column;
            gap: 8px; }
            .initiativesWrapper .initiativeInner .initiativesContainer .initiativeLeft .text ul li {
              width: 100%;
              text-align: left; }
        .initiativesWrapper .initiativeInner .initiativesContainer .initiativeLeft .photo {
          width: 100%; }
          .initiativesWrapper .initiativeInner .initiativesContainer .initiativeLeft .photo img {
            display: block;
            width: 100%; }

footer {
  width: 100%;
  background: url(../images/footerBg.png) no-repeat left bottom #024782;
  background-size: cover; }
  footer .footer {
    width: 100%;
    padding: 72px 24px;
    margin: 0 auto;
    max-width: 1332px;
    display: flex;
    align-items: flex-start;
    gap: 48px; }
    @media (max-width: 768px) {
      footer .footer {
        flex-flow: column;
        padding: 48px 16px; } }
    footer .footer .footerLogo {
      flex: 1; }
      @media (max-width: 560px) {
        footer .footer .footerLogo {
          width: 100%; } }
      footer .footer .footerLogo .logo {
        width: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start; }
        @media (max-width: 560px) {
          footer .footer .footerLogo .logo {
            justify-content: center; } }
        footer .footer .footerLogo .logo img {
          display: block;
          width: 100%;
          max-width: 222px; }
    footer .footer .footerLink {
      flex: 1;
      display: flex;
      flex-flow: column;
      gap: 32px; }
      footer .footer .footerLink h2 {
        text-align: left;
        font-size: 24px;
        font-weight: 700px;
        color: #fff; }
      footer .footer .footerLink dl {
        width: 100%;
        display: flex;
        flex-flow: column;
        gap: 16px; }
        footer .footer .footerLink dl dt {
          width: 100%;
          text-align: left; }
          footer .footer .footerLink dl dt a {
            display: inline-block;
            width: auto;
            color: rgba(255, 255, 255, 0.78); }
            footer .footer .footerLink dl dt a:hover {
              color: #5FCD2C; }
      footer .footer .footerLink .socialLinks {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px; }
        footer .footer .footerLink .socialLinks a {
          display: block;
          width: 36px; }
          footer .footer .footerLink .socialLinks a img {
            display: block;
            width: 100%; }
      footer .footer .footerLink p {
        text-align: left;
        color: #fff; }
      footer .footer .footerLink ul {
        width: 100%;
        display: flex;
        flex-flow: column;
        gap: 16px; }
        footer .footer .footerLink ul li {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 12px; }
          footer .footer .footerLink ul li span {
            display: block;
            width: 32px; }
            footer .footer .footerLink ul li span img {
              display: block;
              width: 100%; }
          footer .footer .footerLink ul li b {
            display: inline-flex;
            align-items: center;
            text-align: left;
            color: #fff;
            font-weight: 400; }
            footer .footer .footerLink ul li b small {
              display: inline-block;
              width: auto;
              font-weight: 500;
              font-size: 15px;
              margin: 0 6px 0 0; }
  footer .copyrightWrapper {
    width: 100%;
    background-color: #024782;
    border-top: 1px solid rgba(255, 255, 255, 0.32); }
    footer .copyrightWrapper .copyrightInner {
      width: 100%;
      max-width: 1332px;
      margin: 0 auto;
      padding: 20px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between; }
      @media (max-width: 768px) {
        footer .copyrightWrapper .copyrightInner {
          flex-flow: column;
          gap: 16px;
          padding: 20px 16px; } }
      footer .copyrightWrapper .copyrightInner b {
        display: inline-block;
        width: auto;
        text-align: left;
        font-size: 14px;
        color: #fff;
        font-weight: 300; }
        @media (max-width: 1024px) {
          footer .copyrightWrapper .copyrightInner b {
            font-size: 13px; } }
      footer .copyrightWrapper .copyrightInner .copyLinksRight {
        width: auto;
        display: inline-flex;
        align-items: center;
        gap: 24px; }
        @media (max-width: 1024px) {
          footer .copyrightWrapper .copyrightInner .copyLinksRight {
            gap: 16px; } }
        @media (max-width: 560px) {
          footer .copyrightWrapper .copyrightInner .copyLinksRight {
            gap: 6px;
            flex-flow: column;
            align-items: flex-start;
            width: 100%; } }
        footer .copyrightWrapper .copyrightInner .copyLinksRight a {
          display: inline-block;
          width: auto;
          font-size: 14px;
          color: rgba(255, 255, 255, 0.78); }
          @media (max-width: 1024px) {
            footer .copyrightWrapper .copyrightInner .copyLinksRight a {
              font-size: 13px; } }
          footer .copyrightWrapper .copyrightInner .copyLinksRight a:hover {
            color: #5FCD2C; }
        footer .copyrightWrapper .copyrightInner .copyLinksRight p {
          display: inline-flex;
          align-items: center;
          gap: 4px;
          font-size: 14px;
          color: rgba(255, 255, 255, 0.78); }
          @media (max-width: 1024px) {
            footer .copyrightWrapper .copyrightInner .copyLinksRight p {
              font-size: 13px; } }
          footer .copyrightWrapper .copyrightInner .copyLinksRight p a {
            display: inline-block;
            font-size: 14px;
            color: #5FCD2C; }
            @media (max-width: 1024px) {
              footer .copyrightWrapper .copyrightInner .copyLinksRight p a {
                font-size: 13px; } }
            footer .copyrightWrapper .copyrightInner .copyLinksRight p a:hover {
              color: #fff; }

.scrollToTop {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: linear-gradient(180deg, #95D118 0%, #5FCD2C 100%);
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1), 1px 8px 8px 0px rgba(0, 0, 0, 0.09), 1px 18px 11px 0px rgba(0, 0, 0, 0.05), 2px 31px 12px 0px rgba(0, 0, 0, 0.01), 4px 49px 14px 0px transparent;
  position: fixed;
  right: 24px;
  bottom: 48px;
  font-size: 0;
  display: none;
  z-index: 999; }
  .scrollToTop span {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center; }
    .scrollToTop span img {
      display: block;
      width: 100%;
      max-width: 30px; }
  .scrollToTop:hover {
    background: linear-gradient(0deg, #95D118 0%, #5FCD2C 100%); }

.simplePopupWrap {
  position: fixed;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.78);
  z-index: 9999; }
  .simplePopupWrap .simplePopup {
    position: fixed;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    overflow: hidden; }
    .simplePopupWrap .simplePopup .simplePopup_outer {
      width: 100%;
      max-width: 440px;
      max-height: 100%;
      position: relative; }
      .simplePopupWrap .simplePopup .simplePopup_outer .closepopup {
        display: block;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: url(../icons/close_black.svg) no-repeat center #F05555;
        background-size: 22px;
        position: absolute;
        top: -12px;
        right: -12px;
        font-size: 0;
        z-index: 99; }
      .simplePopupWrap .simplePopup .simplePopup_outer .closepopup:hover {
        background-color: red; }
      .simplePopupWrap .simplePopup .simplePopup_outer .simplePopup_inner {
        width: 100%;
        padding: 16px;
        box-sizing: border-box;
        background-color: #fff;
        overflow-y: auto;
        max-height: 80vh; }
        .simplePopupWrap .simplePopup .simplePopup_outer .simplePopup_inner img {
          display: block;
          width: 100%; }