/* ======================================
SA Technology Solutions
Mobile-first responsive design by WebSofa
========================================= */

/* ---- Simple css reset ----*/

*,
*::before,
*::after {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

/* ---- Base styles ----*/

html {
   font-size: 62.5%;
}

body {
   max-width: 100%;
   overflow-x: hidden;
   margin: 0;
   background-color: #fff;
   scroll-behavior: smooth;
}

.content-wrapper {
   max-width: 100%;
}

.section-light {
   background-color: #fff;
   color: #313639;
}

.section-dark {
   background-color: #8c8c8c;
   background-image: linear-gradient(to top, #8c8c8c, darkgrey);
}

.section-black {
   background-color: #000;
}

.center {
   text-align: center;
   margin: 0 auto;
}

.larger-text {
   font-size: 2rem;
}

.noise {
   position: relative;
   z-index: -1;
}

.noise:before,
.body-noise:before {
   content: "";
   position: absolute;
   z-index: -1;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   background-image: url(data:image/png;base64,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);
}

iframe {
   border: 0px;
   margin: 30px auto;
   width: 90%;
   height: auto;
}

/*
=========================================
Mobile design (default)
=========================================
*/

/* Font styles */

h1,
h2,
h3,
h4,
a,
li,
input {
   font-family: "Sen", sans-serif;
}

h1 {
   font-size: 2.6rem;
   font-weight: bold;
}

h2 {
   font-size: 2.2rem;
   font-weight: normal;
}

h3 {
   font-size: 2rem;
   font-weight: normal;
}

p {
   font-family: "Heebo", sans-serif;
   font-size: 1.6rem;
   line-height: 1.6;
}

a {
   text-decoration: none;
   font-size: 1.6rem;
   line-height: 1.6;
}

/*---- Navigation menu ----*/

.nav-container {
   width: 100%;
   max-width: 100%;
   height: 100px;
   overflow: hidden;
}

nav {
   height: 100px;
   width: 100%;
   position: fixed;
   padding: 18px;
   display: flex;
   align-items: center;
   /* background: #141f35; */
   border-bottom: 1px white solid;
   z-index: 999;
   background-color: rgba(15, 67, 86, 0.9);
   background-image: url("../img/NewBanner_mobile.png");
   background-size: cover;
   background-repeat: no-repeat;
}

/* .logo {
   display: flex;
   align-items: center;
} */

.logo img {
   display: block;
   width: 70px;
   height: auto;
}

/* Mobile navigation */

.nav-items {
   display: none;
}

.open-slide {
   /* positions "hamburger" icon*/
   position: absolute;
   top: 35px;
   right: 35px;
}

.side-nav {
   height: 100%;
   width: 0;
   position: fixed;
   z-index: 999;
   top: 0;
   right: 0;
   background-color: #111;
   opacity: 0.9;
   overflow-x: hidden;
   padding-top: 60px;
   transition: 0.5s;
}

.side-nav a {
   padding: 10px 10px 10px 30px;
   text-decoration: none;
   font-size: 22px;
   color: #ffffff;
   display: block;
   transition: 0.3s;
}

.side-nav a:hover {
   color: #014ec5;
}

.side-nav .btn-close {
   color: #ffffff;
   position: absolute;
   top: 0;
   right: 22px;
   font-size: 36px;
   margin-left: 150px;
}

/* Hero section with showcase image */

.hero {
  min-height: 100vh;
  height: calc(100vh - 100px);
   width: 100%;
   overflow: hidden;
   background: url("../img/hero2.png");
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
}

.hero h1,
h2,
p,
a {
   color: #fff;
}

.hero h1 {
   letter-spacing: 0.15em;
   font-weight: bold;
   margin: 10px 5%;
}

.hero h2 {
   line-height: 1.5;
   text-align: left;
   font-weight: bold;
   margin: 15px 5%;
}

.hero p {
   line-height: 1.6;
}

.hero-text {
   width: 100%;
   margin: 0 auto;
   position: relative;
   top: 110px;
   text-align: center;
   color: white;
   text-shadow: 2px 1px 1px #000000;
   padding: 20px 0;
   /*   background-color: rgba(97, 116, 130, 0.6);  */
   background-color: rgba(0, 0, 0, 0.3);
}

.hero-text h1 {
   font-size: 2rem;
   text-transform: uppercase;
}

.herobtn {
   display: inline-block;
   margin-top: 0px;
   width: 120px;
   padding: 10px;
   font-size: 14px;
   line-height: 1.4;
   color: #fff;
   border: 2px solid #fff;
   border-radius: 5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   text-align: center;
   outline: none;
   text-decoration: none;
   text-transform: uppercase;
   /*    background-color: rgba(255, 255, 255, 0);   */
   background-color: rgba(97, 116, 130, 0.4);
   transition: background-color 300ms ease;
   -webkit-transition: background-color 300ms ease;
   -moz-transition: background-color 300ms ease;
}

.grid4 {
   padding: 30px 5%;
   margin: 0;
}

.grid4 img {
   margin: 0 10%;
   width: 80%;
   max-width: 500px;
}

.grid4 h1 {
   margin-bottom: 15px;
   color: #014ec5;
   text-transform: uppercase;
}

.grid4 ul {
   display: grid;
   grid-template-columns: 1fr;
}

.grid4 ul li {
   list-style: none;
}

/* THE CARD HOLDS THE FRONT AND BACK FACES */

.card {
   position: relative;
   top: 0;
   left: 0;
   width: 100%;
   height: 300px;
   border-radius: 5px;
   transform-style: preserve-3d;
   transition: all 0.8s ease;
   display: flex;
   flex-direction: column;
}

/* THE PSUEDO CLASS CONTROLS THE FLIP ON MOUSEOVER AND MOUSEOUT */

.card:hover,
.card:focus {
   transform: rotateY(180deg);
}

/* THE FRONT FACE OF THE CARD, WHICH SHOWS BY DEFAULT */

.card-front {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border-radius: 10px;
   backface-visibility: hidden;
   overflow: hidden;
   background: #ffc728;
   color: #000;
}

.card-front img {
   display: block;
   margin: 0 auto;
   width: 100%;
}

/* THE BACK FACE OF THE CARD, WHICH SHOWS ON MOUSEOVER */

.card-rear {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border-radius: 10px;
   backface-visibility: hidden;
   overflow: hidden;
   background: #fafafa;
   color: #333;
   text-align: center;
   transform: rotateY(180deg);
   display: flex;
   align-items: center;
   justify-content: center;
}

/*This block (starts here) is merely styling for the flip card, and is NOT an essential part of the flip code */

.card-rear h1 {
   padding: 30px;
   font-weight: bold;
   font-size: 24px;
   text-align: center;
}

.card-rear p {
   padding: 30px;
   font-weight: bold;
   font-size: 2rem;
   text-align: center;
   color: #222;
   margin: 0 auto;
}

.card-rear p:hover,
.card-rear p:focus {
   color: blue;
}

.card-content h2 {
   text-align: center;
   color: #222;
   font-size: 2.5rem;
   margin-top: 15px;
   font-weight: bold;
}

.card-content p {
   color: #333;
   margin-bottom: 15px;
   text-align: left;
   font-size: 1.6rem;
}

.about-content-btn:hover,
.about-content-btn:focus {
   cursor: pointer;
   font-weight: bold;
}

.services {
   padding: 100px 10%;
}

/* Subscription form - mobile version*/

.subscribe {
   min-height: 50vh;
   width: 100%;
   display: grid;
   place-items: center;
   padding: 30px 0 50px;
   background-color: rgba(0, 133, 230, 0.55);
   /*
background: -webkit-radial-gradient(center, #FFFFFF, #0085E6);
  background: -moz-radial-gradient(center, #FFFFFF, #0085E6);
  background: radial-gradient(ellipse at center, #FFFFFF, #0085E6);*/
}

.subscribe p {
   margin: 20px 10%;
   text-align: center;
}

.subscribe-form {
   background: #fff;
   display: flex;
   flex-direction: column;
   box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
   border-radius: 20px;
   overflow: hidden;
   width: 80%;
   max-width: 300px;
   margin-top: 10px;
}

.subscribe-form-input,
.subscribe-form-button {
   font-family: "Sen", sans-serif;
   text-transform: uppercase;
   font-weight: 800;
   font-size: 1.4rem;
   letter-spacing: 1.2px;
   border: 0px;
}

.subscribe-form-input {
   padding: 1.5em;
   width: 100%;
}

.subscribe-form-input::placeholder {
   opacity: 0.35;
}

.subscribe-form-input:focus {
   outline: none;
}

.subscribe-form-input:focus::placeholder {
   color: #014ec5;
   opacity: 0.85;
}

.subscribe-form-item:first-of-type::after {
   content: " ";
   display: block;
   left: 0;
   right: 0;
   bottom: 0;
   height: 1px;
   background: rgba(0, 0, 0, 0.1);
}

.subscribe-form-button {
   background: #014ec5;
   color: #fff;
   padding: 1.5em 2.25em;
}

/* ----------------------------------
    Services page - mobile version
    ---------------------------------*/

/* .services-img {
   background-image: url("../img/pcrepair2.jpg");
   background-color: rgba(15, 67, 86, 0.9);
   background-blend-mode: multiply;
   min-height: 400px;
   width: 100%;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
}

.services-frame h1 {
   color: #fff;
   font-size: 2.5rem;
   margin-bottom: 5px;
   position: relative;
   top: 300px;
   left: 20px;
}
.services-frame-line {
   margin-bottom: 20px;
   height: 2px;
   width: 155px;
   border-bottom: 6px solid #fff;
   position: relative;
   top: 300px;
   left: 20px;
} */

.content {
   padding: 20px 5%;
}

.content h2 {
   color: #014ec5;
   margin: 20px 0;
   font-weight: bold;
   text-transform: uppercase;
}

.content p {
   margin: 10px 0;
   color: #222;
}

.content li {
   font-size: 1.5rem;
   margin: 0 10px 5px;
}

/* Brands grid on services page - mobile version*/

.brands {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   grid-column-gap: 30px;
   grid-row-gap: 15px;
}

.brands__img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   display: flex;
   justify-items: center;
}

/* --------------------------------
  Contact Page - mobile version
  -------------------------------- */

.contact {
   background: rgba(255, 255, 102, 0.5);
}

/* .contact-img {
   background-image: url("../img/contact.jpg");
   background-color: rgba(15, 67, 86, 0.9);
   background-blend-mode: multiply;
   min-height: 400px;
   width: 100%;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
}

.thankyou-img {
   background-image: url("../img/pcrepair3.jpg");
   background-color: rgba(15, 67, 86, 0.9);
   background-blend-mode: multiply;
   min-height: 400px;
   width: 100%;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
} */

/****************
      Global styles
  *****************/

.container {
   width: 90%;
   overflow: hidden;
   margin: 50px auto;
   border-radius: 5px;
}
.container h1 {
   text-align: center;
}
.container span {
   color: #fff;
}
.container ul {
   list-style: none;
   padding: 0;
}
.wrapper {
   box-shadow: 0 0 20px 0 rgba(117, 79, 68, 0.7);
}
.wrapper > * {
   padding: 1em;
}
.company-info {
   background: #141f35;
   background-image: url("../img/abstract2.png");
   background-blend-mode: multiply;
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
}
.company-info ul {
   color: #fff;
   font-size: 1.6rem;
   margin: 30px 0 20px 0;
   text-align: center;
}
.company-info ul li {
   margin: 20px 0;
   text-align: left;
   font-size: 1.6rem;
}

.company-info ul li i {
   margin-right: 10px;
}

/* --------------------------------
    Specials Page
    -------------------------------- */

.specials {
   display: flex;
   flex-direction: column;
   justify-self: center;
}

.specials-image {
   order: 2;
}

.specials-text {
   order: 1;
}

.specials-text h3 {
   font-size: 1.7rem;
   line-height: 2.4rem;
   margin-bottom: 10px;
}

.specials p {
   font-family: "Arial";
   margin-bottom: 0px;
   line-height: 15px;
}

.specials img {
   width: 250px;
   height: auto;
   display: block;
   margin: 20px auto 30px;
}

.specials-text-columns {
   display: flex;
   column-gap: 30px;
}

.specials-text-LHS {
   margin-right: 30px;
}

.section-line {
   text-align: center;
   width: 100%;
   margin: 25px auto;
   border-bottom: 1px dotted #666;
}

/* .specials-img {
   background-image: url("../img/Laptops_Store.jpg");
   background-color: rgba(15, 67, 86, 0.9);
   background-blend-mode: multiply;
   min-height: 400px;
   width: 100%;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
} */

.showcase_specials {
   background-image: url("../img/Laptops_Store.jpg");
   width: 100%;
   overflow: hidden;
}

.showcase_services {
   background-image: url("../img/pcrepair2.jpg");
   width: 100%;
   overflow: hidden;
}

.showcase_contact {
   background-image: url("../img/contact.jpg");
   width: 100%;
   overflow: hidden;
}

.showcase_thank_you_enquiry,
.showcase_thank_you_subscribe {
   background-image: url("../img/pcrepair3.jpg");
   width: 100%;
   overflow: hidden;
}

/* .specials-frame {
   position: relative;
   top: 300px;
   left: 20px;
   color: white;
}

.specials-frame h1 {
   color: #fff;
   font-size: 2.5rem;
   margin-bottom: 5px;
   position: relative;
   top: 260px;
   left: 20px;
}
.specials-frame-line {
   margin-bottom: 20px;
   height: 2px;
   width: 205px;
   border-bottom: 6px solid #fff;
   position: relative;
   top: 310px;
   left: 20px;
}
 */

.showcase_contact,
.showcase_services,
.showcase_specials,
.showcase_thank_you_enquiry,
.showcase_thank_you_subscribe {
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   max-width: 100%;
   height: 70vh;
   min-height: 400px;
}

.showcase_contact h1,
.showcase_services h1,
.showcase_specials h1,
.showcase_thank_you_enquiry h1,
.showcase_thank_you_subscribe h1 {
   color: white;
   font-size: 28px;
   text-shadow: 2px 2px 6px #000000;
   position: relative;
   top: 75%;
   left: 20px;
}

.showcase_contact h1::after,
.showcase_services h1::after,
.showcase_specials h1::after,
.showcase_thank_you_enquiry h1::after,
.showcase_thank_you_subscribe h1::after {
   content: "";
   display: block;
   background: #fff;
   width: 200px;
   height: 3px;
   position: absolute;
   text-align: center;
   top: 40px;
}

.specials-banner {
   margin: 30px 0;
   transform: rotate(-5deg);
}

.specials h4 {
   font-size: 2.4rem;
   letter-spacing: 1px;
   margin: 10px 0;
   font-weight: normal;
}

.specials_btn {
   font-weight: bold;
   font-size: 1.5rem;
   background-color: red;
   color: white;
   padding: 15px 20px;
   border-radius: 3px;
}

.specials_btn:hover {
   background-color: rgba(253, 2, 2, 0.8);
}

.main_btn {
   font-weight: bold;
   font-size: 1.5rem;
   background-color: #014ec5;
   color: white;
   padding: 5px;
   border-radius: 2px;
}

.main_btn:hover {
   background-color: rgba(12, 1, 39, 0.8);
}

/****************
    Contact form
  *****************/
.contact {
   background: rgba(255, 255, 102, 0.5);
}
.contact form {
   margin: 0 30px;
}
.contact h3 {
   font-size: 2.8rem;
   margin: 20px 30px;
   font-weight: bold;
}
.contact p {
   margin: 0;
}
.contact label {
   display: block;
   color: #222;
   margin: 10px 5px;
}
.contact .full {
   grid-column: 1/3;
}
.contact input,
.contact textarea,
.contact button {
   width: 100%;
   border: 1px solid yellow;
   padding: 1em;
}

.contact input[type="submit"] {
   background: #141f35;
   cursor: pointer;
   border: 0;
   font-weight: 700;
   font-size: 1.6rem;
   color: #fff;
   text-transform: uppercase;
   margin: 30px 0;
   padding: 25px;
   letter-spacing: 2px;
}
.contact input[type="submit"]:hover,
.contact input[type="submit"]:focus {
   color: yellow;
   transition: 1s ease-in-out;
}

.sweet {
   display: none;
   visibility: hidden;
}

/* Footer styles */

.footer {
   width: 100%;
   padding: 30px 0;
   margin: 0 auto;
   max-width: 100%;
   height: auto;
   display: grid;
   grid-template-areas: "lhs" "mid" "rhs";
   grid-template-columns: 1fr;
   background-image: url("../img/abstract2_90.png");
   background-color: #020d15;
   background-blend-mode: multiply;
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
}

.footer h3 {
   margin: 25px 0 0 0;
   font-size: 1.4rem;
   font-weight: normal;
}
.footer p,
.footer a {
   margin: 0;
   font-size: 1.3rem;
}
.footerLhs {
   grid-area: lhs;
}
.footerLhs p:last-child {
   margin-bottom: 20px;
}
.footerLhs img {
   display: block;
   margin: 0 auto 20px;
   width: 85px;
   height: auto;
}
.footerMid {
   grid-area: mid;
}
.footerMid h3 {
   color: yellow;
   font-size: 1.6rem;
   font-weight: normal;
   margin-bottom: 10px;
}
.footerMid p,
.footerMid a {
   color: white;
   font-size: 1.5rem;
   text-transform: uppercase;
}
.footerMid a {
   display: block;
   line-height: 1.7;
}
.footerRhs {
   grid-area: rhs;
}
.footerRhs h3 {
   color: yellow;
   font-size: 1.6rem;
   font-weight: normal;
   margin-bottom: 10px;
}
.footerRhs ul a {
   color: white;
   line-height: 1.7;
   font-size: 1.5rem;
   text-transform: uppercase;
}
.footerRhs ul li {
   list-style: none;
}
.footer-Banner {
   padding: 30px 0;
   width: 100%;
   border-top: 1px solid white;
   background-color: #010305;
}
.footer-Banner p {
   font-size: 1.9rem;
   text-align: center;
   font-family: Arial, Helvetica, sans-serif;
   font-weight: 200;
}
.footer h3 {
   color: yellow;
   font-size: 1.8rem;
   font-weight: normal;
   margin-top: 20px;
   margin-bottom: 10px;
}

/************************
  TABLET ONLY DESIGN
*************************/

@media only screen and (min-width: 569px) and (max-width: 1023px) {
   h1 {
      font-size: 3.2rem;
      font-weight: bold;
   }
   h2 {
      font-size: 2.9rem;
      font-weight: bold;
   }
   p,
   span,
   a {
      font-size: 1.7rem;
   }
   .lhs {
      margin: 0 10%;
      height: 40%;
   }
   .lhs p {
      font-size: 18px;
   }
   .rhs {
      width: 100%;
      transform: rotate(-90deg);
      display: flex;
      flex-direction: row;
      align-self: center;
      justify-content: space-between;
      margin: 0;
   }
   .rhs p {
      font-size: 18px;
   }
   .mobile {
      display: none;
   }
}

/* Tablet and laptop/desktop design */

@media only screen and (min-device-width: 569px) {
   .open-slide {
      display: none;
   }

   .nav-items {
      /* desktop navigation items */
      display: flex;
      justify-content: center;
      align-items: center;
   }

   .nav-items li {
      list-style: none;
   }

   .nav-items li:after {
      content: "";
      display: inline-block;
      position: absolute;
      height: 20px;
      width: 1px;
      background: #999;
   }

   .nav-items li:last-child::after {
      display: none;
   }

   .nav-items li a {
      font-size: 1.8rem;
      text-transform: uppercase;
      color: #fff;
      font-weight: 500;
      letter-spacing: 2px;
      margin-right: 5px;
      transition: opacity 150ms ease-in-out;
      padding: 10px;
      line-height: 20px;
      text-decoration: none;
   }

   .nav-items li a:hover {
      color: yellow;
      font-weight: bold;
   }

   .logo {
      position: relative;
      left: 0px;
      top: 0px;
   }
   .subscribe-form {
      display: flex;
      flex-direction: row;
      max-width: 700px;
      border: 6px solid #fff;
      border-radius: 3em;
   }
   .subscribe-form-button {
      background: #014ec5;
      color: #fff;
      padding: 1.5em 2em;
      margin-left: auto;
      border-radius: 3em;
   }
   .subscribe-form-item {
      justify-content: center;
   }
   .subscribe-form-item:last-of-type {
      flex-grow: 1;
   }
   .subscribe-form-item:first-of-type::after {
      right: 0;
      top: 0;
      bottom: 0;
      left: initial;
      width: 1px;
      height: initial;
   }

   .container h1,
   .company-info h3,
   .company-info ul {
      text-align: left;
   }
   .wrapper {
      display: grid;
      grid-template-columns: 1fr 2fr;
   }
   .wrapper > * {
      padding: 2em;
   }

   .footer h3 {
      margin: 25px 0 10px 0;
      font-size: 1.6rem;
   }
   .footer p,
   .footer a {
      margin: 0;
      font-size: 1.5rem;
   }
}

/* Laptop only design */

@media only screen and (min-device-width: 1024px) {
   .nav-container {
      width: 100%;
      height: 100px;
   }
   nav {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100px;
      background: #141f35;
      border-bottom: 1px white solid;
      z-index: 999;
      background-image: url("../img/BannerV2.png");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      display: flex;
      justify-content: center;
   }
   .logo {
      margin: 0;
      position: relative;
      left: -100px;
      top: 10px;
   }
   .logo img {
      display: flex;
      align-self: center;
      justify-self: center;
      width: 95px;
      height: auto;
   }
   .nav-items {
      position: relative;
      left: -30px;
   }
   .hero {
      background-image: url("../img/hero2.png");
      height: calc(100% - 100px);
      width: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      overflow: hidden;
   }
   .hero-text {
      width: 100%;
      margin: 0 auto;
      position: relative;
      top: 150px;
      text-align: center;
      color: white;
      text-shadow: 2px 1px 1px #000000;
      padding: 20px 0;
      background-color: rgba(0, 0, 0, 0.3);
   }
   .hero-text h1 {
      font-size: 3.6rem;
      text-transform: uppercase;
   }
   .hero-text p,
   .hero-text a {
      font-size: 2.9rem;
   }

   .herobtn {
      width: 250px;
      padding: 10px;
      /* font-size: 30px;
      line-height: 1.4;
      color: #fff;
      border: 2px solid #fff;
      border-radius: 5px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      text-align: center;
      outline: none;
      text-decoration: none;
      text-transform: uppercase;
      /*    background-color: rgba(255, 255, 255, 0);   */
      background-color: rgba(97, 116, 130, 0.4);
      transition: background-color 300ms ease;
      -webkit-transition: background-color 300ms ease;
      -moz-transition: background-color 300ms ease; */
   }

   .herobtn:hover {
      background-color: rgba(97, 116, 130, 0.7);
      transition: background-color 300ms ease;
   }

   h1 {
      font-size: 5.6rem;
      font-weight: bold;
      margin-bottom: 30px;
   }
   h2 {
      font-size: 3rem;
      font-weight: normal;
   }
   p,
   span,
   a {
      font-size: 1.8rem;
      margin-bottom: 15px;
   }
   .lhs {
      margin: 100px 15%;
   }
   .lhs p {
      font-size: 22px;
   }
   .rhs {
      width: 80%;
      display: flex;
      flex-direction: row;
      align-self: center;
      justify-content: space-between;
      margin: 0;
      transform: rotate(-90deg);
   }
   .rhs p {
      font-size: 22px;
   }
   .mobile {
      display: none;
   }
   /*     Services grid (home page)   */
   .grid4 {
      margin: 0 auto;
      padding: 60px 0;
      width: 100%;
   }
   .services h1 {
      color: #0085e6;
      font-weight: bold;
   }
   .services p {
      color: #333;
   }
   .grid4 ul {
      display: grid;
      /* grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); */
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-column-gap: 20px;
      grid-auto-rows: 1fr;

      margin: 0 10%;
   }
   .grid4 h1 {
      color: #014ec5;
      font-weight: bold;
      font-size: 3.4rem;
      text-align: left;
      margin-left: 10%;
      margin-bottom: 10px;
   }
   .grid4-line {
      margin: 0px 10% 30px;
      height: 3px;
      width: 200px;
      border-bottom: 6px solid #014ec5;
      left: 50px;
   }
   .grid4 img {
      margin: 0 auto;
   }
   .card-content p {
      color: #333;
      margin: 5px 5px 15px;
      text-align: justify;
      font-size: 1.6rem;
   }
   .content-title h2 {
      text-align: center;
      font-weight: bold;
      font-size: 2.2rem;
      margin-bottom: 10px;
      color: #014ec5;
   }
   .staff-line {
      width: 450px;
      height: 2px;
      border-bottom: 1px solid #333;
      margin: auto;
   }
   .chevron::before {
      border-style: solid;
      border-width: 0.25em 0.25em 0 0;
      content: "";
      display: inline-block;
      height: 0.45em;
      left: 0.15em;
      position: relative;
      top: 0.15em;
      transform: rotate(-45deg);
      vertical-align: top;
      width: 0.45em;
   }
   .chevron.right:before {
      left: 0;
      transform: rotate(45deg);
   }

   /*  .contact-img {
      background-image: url("../img/contact.jpg");
      background-color: rgba(15, 67, 86, 0.9);
      background-blend-mode: multiply;
      min-height: 550px;
      width: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
   }

   .thankyou-img {
      background-image: url("../img/pcrepair3.jpg");
      background-color: rgba(15, 67, 86, 0.9);
      background-blend-mode: multiply;
      min-height: 550px;
      width: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
   } */

   /*  .services-img {
      background-image: url("../img/pcrepair2.jpg");
      background-color: rgba(15, 67, 86, 0.9);
      background-blend-mode: multiply;
      min-height: 550px;
      width: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
   }
   .services-frame {
      padding: 50px 0;
      width: 100%;
      margin: 0 auto;
      position: relative;
      color: white;
   }
   .services-frame h1 {
      color: #fff;
      font-size: 4.5rem;
      margin-bottom: 5px;
      position: relative;
      top: 350px;
      left: 130px;
   }
   .services-frame-line {
      margin-bottom: 20px;
      height: 2px;
      width: 265px;
      border-bottom: 6px solid #fff;
      position: relative;
      top: 350px;
      left: 130px;
   } */

   .showcase_contact h1,
   .showcase_services h1,
   .showcase_specials h1,
   .showcase_thank_you_enquiry h1,
   .showcase_thank_you_subscribe h1 {
      color: white;
      font-size: 54px;
      text-shadow: 2px 2px 6px #000000;
      position: relative;
      top: 80%;
      left: 13%;
   }

   .showcase_contact h1::after,
   .showcase_services h1::after,
   .showcase_specials h1::after,
   .showcase_thank_you_enquiry h1::after,
   .showcase_thank_you_subscribe h1::after {
      content: "";
      display: block;
      background: #fff;
      width: 400px;
      height: 5px;
      position: absolute;
      text-align: center;
      top: 65px;
   }

   .content {
      padding: 50px 10%;
   }
   .content h2 {
      color: #014ec5;
      margin: 30px 10% 30px 0;
      font-weight: bold;
   }
   .content h3 {
      color: #222;
      margin: 0px 0 30px;
      font-weight: bold;
   }
   .content p,
   .content ul li {
      color: #222;
      font-size: 1.8rem;
      line-height: 1.6;
   }

   .content ul {
      padding-left: 15px;
   }

   iframe {
      border: 0px;
      margin: 30px auto;
      width: 100%;
      height: 500px;
   }

   .brands {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
      grid-column-gap: 80px;
      grid-row-gap: 15px;
      background-color: #fff;
      border-radius: 5px;
      padding: 10px 20px;
      border: 1px solid lightgray;
   }

   /* --------------------------------
    Specials Page
    -------------------------------- */

   .specials {
      display: flex;
      flex-direction: row;
      gap: 100px;
   }

   .specials-image {
      order: 1;
   }

   .specials-text {
      order: 2;
   }

   .specials-text h3 {
      font-size: 2.3rem;
      line-height: 3rem;
      margin-bottom: 10px;
      font-weight: normal;
   }

   .specials p {
      font-family: "Arial";
      margin-bottom: 0px;
      line-height: 17px;
   }

   .specials img {
      width: 600px;
      height: auto;
      display: block;
   }

   .specials-text-columns {
      display: flex;
      column-gap: 60px;
   }

   .section-line {
      text-align: center;
      width: 100%;
      margin: 25px auto;
      border-bottom: 1px dotted #666;
   }

   /* .specials-img {
      background-image: url("../img/Laptops_Store.jpg");
      background-color: rgba(15, 67, 86, 0.9);
      background-blend-mode: multiply;
      min-height: 550px;
      width: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      align-items: center;
   }
   .specials-frame {
      padding: 50px 0;
      width: 100%;
      margin: 0 auto;
      position: relative;
      color: white;
   }
   .specials-frame h1 {
      color: #fff;
      font-size: 4.5rem;
      margin-bottom: 5px;
      position: relative;
      top: 350px;
      left: 130px;
   }
   .specials-frame-line {
      margin-bottom: 20px;
      height: 2px;
      width: 420px;
      border-bottom: 6px solid #fff;
      position: relative;
      top: 350px;
      left: 130px;
   } */

   .specials-banner {
      margin-top: 30px;
      position: relative;
      z-index: 1000;
   }

   .specials h4 {
      font-size: 2.8rem;
      letter-spacing: 1px;
      margin: 10px 0;
   }

   .specials_btn {
      font-weight: bold;
      font-size: 3rem;
      background-color: red;
      color: white;
      padding: 15px 20px;
      border-radius: 3px;
   }

   .specials_btn:hover {
      background-color: rgba(253, 2, 2, 0.8);
   }

   .main_btn {
      font-weight: normal;
      font-size: 1.8rem;
      background-color: #014ec5;
      color: white;
      padding: 10px 15px;
      border-radius: 5px;
   }

   .main_btn:hover {
      background-color: rgba(12, 1, 39, 0.8);
   }

   /* --------------------------------
    Contact Form
    -------------------------------- */

   /****************
        Global styles
    *****************/

   .container {
      max-width: 1170px;
      margin: 50px auto;
   }
   .container h1 {
      text-align: center;
   }
   .container span {
      color: #fff;
   }
   .container ul {
      list-style: none;
      padding: 0;
   }
   .wrapper {
      box-shadow: 0 0 20px 0 rgba(117, 79, 68, 0.7);
   }
   .wrapper > * {
      padding: 1em;
   }
   .company-info {
      background: #141f35;
      background-image: url("../img/abstract2.png");
      background-blend-mode: multiply;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
   }

   .company-info ul {
      color: #fff;
      font-size: 1.8rem;
      margin: 30px 0 20px 0;
      text-align: center;
   }

   .company-info ul li {
      margin: 20px 10px 20px 20px;
      text-align: left;
      font-size: 1.8rem;
   }

   .company-info ul li i {
      margin-right: 10px;
   }

   /****************
        Form styles
    *****************/
   .contact {
      background: rgba(255, 255, 102, 0.9);
   }
   .contact form {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 30px;
      margin: 0 30px;
   }

   .contact h3 {
      font-size: 2.8rem;
      margin: 20px 30px;
      font-weight: bold;
   }
   .contact p {
      margin: 0;
   }
   .contact label {
      display: block;
      color: #222;
   }
   .contact .full {
      grid-column: 1/3;
   }
   .contact input,
   .contact textarea {
      width: 100%;
      border: 1px solid yellow;
      padding: 1em;
   }

   .contact input[type="submit"] {
      background: #141f35;
      cursor: pointer;
      border: 0;
      font-weight: 700;
      font-size: 1.6rem;
      color: #fff;
      text-transform: uppercase;
      margin-bottom: 30px;
      padding: 25px;
      letter-spacing: 2px;
   }
   .contact input[type="submit"]:hover,
   .contact input[type="submit"]:focus {
      color: yellow;
      transition: 1s ease-in-out;
   }

   /* --------------------------------
  Footer - desktop/laptop
  -------------------------------- */
   .footer {
      padding: 50px 0;
      margin: 0 auto;
      width: 100%;
      height: auto;
      display: grid;
      grid-template-areas: "lhs mid rhs";
      grid-template-columns: 1fr 1fr 1fr;
      /* background-image: url("../img/abstract2_90.png"); */
      background-image: none;
      background-color: rgba(1, 11, 15, 0.9);
     /* background-blend-mode: multiply;
      background-repeat: no-repeat;
      background-position: right;
      background-size: contain; */
   }
   .footer h3 {
      margin: 25px 0 0 0;
      font-size: 2rem;
      font-weight: normal;
   }
   .footer p,
   .footer a {
      margin: 0;
      font-size: 1.6rem;
   }
   .footerLhs {
      grid-area: lhs;
      border-right: 1px dotted rgb(221, 219, 219);
   }

   .footerLhs h3 {
      margin-bottom: 10px;
      color: aqua;
   }

   .footerLhs p:last-child {
      margin-bottom: 50px;
   }
   .footerLhs img {
      display: block;
      margin: 0 auto 30px;
      width: 85px;
      height: auto;
   }
   .footerMid {
      grid-area: mid;
      border-right: 1px dotted rgb(221, 219, 219);
   }
   .footerMid h3 {
      color: aqua;
      font-size: 2rem;
      font-weight: normal;
      margin-bottom: 10px;
   }
   .footerMid p,
   .footerMid a {
      color: white;
      font-size: 1.6rem;
      text-transform: uppercase;
   }
   .footerMid a {
      display: block;
      line-height: 1.7;
   }
   .footerRhs {
      grid-area: rhs;
   }
   .footerRhs h3 {
      color: aqua;
      font-size: 2rem;
      font-weight: normal;
      margin-bottom: 10px;
   }
   .footerRhs ul a {
      color: white;
      line-height: 1.7;
      font-size: 1.6rem;
      text-transform: uppercase;
   }
   .footerRhs ul li {
      list-style: none;
   }
   .footer-Banner {
      padding: 30px 0;
      width: 100%;
      border-top: 1px solid white;
      background-color: #010305;
   }
   .footer-Banner p {
      font-size: 2rem;
      text-align: center;
      font-family: Arial, Helvetica, sans-serif;
      font-weight: 200;
   }
   .mobile span {
      display: none;
   }
   .mobile i {
      display: none;
   }
   .desktop {
      margin-top: 25px;
   }
   .desktop span {
      display: inline;
      margin-top: 20px;
      font-size: 18px;
   }
   .desktop i {
      display: inline;
      margin-top: 20px;
      font-size: 18px;
   }
}