/* ------------------------------------------- */
/* CUSTOM PROPERTIES                           */
/* ------------------------------------------- */
:root {
  /* Colors */
  --color-primary: 29, 100%, 49%;
  --color-primary: 3, 77%, 48%;
  --color-secondary: 52, 97%, 45%;
  --color-secondary: 3, 77%, 58%;
  --color-accent: 0, 0%, 15%;
  --color-accent: 3, 77%, 48%;
  --color-white: 0 0% 100%;
  --color-black: 0, 0%, 15%;
  --color-dark: 0, 0%, 100%;
  --color-gray: 0, 0%, 42%;
  --color-gray: 0, 0%, 32%;
  --color-card: 0, 0%, 100%;
  --color-body: 0, 0%, 100%;
  --color-light: 27, 60%, 97%;
  --swiper-theme-color: #ffffff;

  /* Box Shadows */
  --shadow-1: 4px 4px 8px 0px rgba(250, 121, 0, 0.15);
  --shadow-2: 0px 10px 10px 0px rgba(0, 0, 0, 0.65);

  /* Font Sizes */
  --fs-900: 4.5rem;
  --fs-800: 3rem;
  --fs-700: 2rem;
  --fs-600: 1.5rem;
  --fs-500: 1.25rem;
  --fs-400: 1rem;
  --fs-300: 0.9rem;
  --fs-200: 0.8rem;

  /* Font Families */
  --ff-regular: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', sans-serif;
  --ff-headings: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', sans-serif;
  --ff-accent: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
    sans-serif;
}

/* ------------------------------------------- */
/* RESET                                       */
/* ------------------------------------------- */

/* Box Sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
}
/* Margins */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
picture {
  margin: 0;
}
/* Font Weights */
body,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
}
a {
  text-decoration: none;
}
p {
  font-weight: 400;
}
/* Set-up the body */
body {
  font-family: var(--ff-regular);
  font-size: var(--fs-400);
  font-weight: 400;
  background-color: hsl(var(--color-body));
  color: hsl(var(--color-gray));
  line-height: 1.5;
  min-height: 100vh;
}

body.dark {
  /* Colors */
  /*
  --color-primary: 29, 72%, 49%;
  --color-secondary: 52, 82%, 45%;
  --color-accent: 52, 82%, 45%;
  */
  --color-white: 0 0% 15%;
  --color-white: 0 0% 100%;
  --color-black: 0, 0%, 100%;
  --color-dark: 0, 0%, 15%;
  --color-gray: 0, 0%, 58%;
  --color-card: 27, 60%, 3%;
  --color-body: 0, 12%, 5%;
  --color-light: 27, 60%, 3%;
  --swiper-theme-color: #ffffff;
}
/* Images */
img,
picture {
  max-width: 100%;
  display: block;
}
/* Forms */
input,
button,
textarea,
select {
  font: inherit;
}
/* Disable animations as per user's device settings */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------- */
/* UTILITY CLASSES                             */
/* ------------------------------------------- */
.flex {
  display: flex;
  gap: var(--gap, 1rem);
}
.flex-column {
  flex-direction: column;
}
.align-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-end {
  justify-content: end;
}
.grid {
  display: grid;
  gap: var(--gap, 1rem);
}
.container {
  margin-inline: auto;
  padding-inline: 2rem;
  width: 90%;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(250, 121, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Colors */
.bg-primary {
  background-color: hsl(var(--color-primary));
}
.bg-secondary {
  background-color: hsl(var(--color-secondary));
}
.bg-white {
  background-color: hsl(var(--color-white));
}
.bg-black {
  background-color: hsl(var(--color-black));
}

.color-primary {
  color: hsl(var(--color-primary));
}
.color-secondary {
  color: hsl(var(--color-secondary));
}
.color-white {
  color: hsl(var(--color-white));
}
.color-black {
  color: hsl(var(--color-black));
}

.text-primary {
  color: hsl(var(--color-primary));
}
.text-accent {
  color: hsl(var(--color-accent));
}
.text-black {
  color: hsl(var(--color-black));
}
.text-dark {
  color: hsl(var(--color-dark));
}
.text-white {
  color: hsl(var(--color-white));
}
.text-gray {
  color: hsl(var(--color-gray));
}

/* Typography */
.ff-regular {
  font-family: var(--ff-regular);
}
.ff-headings {
  font-family: var(--ff-headings);
}
.ff-accent {
  font-family: var(--ff-accent);
}

.uppercase {
  text-transform: uppercase;
}
.text-center {
  text-align: center;
}

.fs-900 {
  font-size: var(--fs-900);
}
.fs-800 {
  font-size: var(--fs-800);
}
.fs-700 {
  font-size: var(--fs-700);
}
.fs-600 {
  font-size: var(--fs-600);
}
.fs-500 {
  font-size: var(--fs-500);
}
.fs-400 {
  font-size: var(--fs-400);
}
.fs-300 {
  font-size: var(--fs-300);
}
.fs-200 {
  font-size: var(--fs-200);
}
.fs-900,
.fs-800,
.fs-700,
.fs-600 {
  line-height: 1.1;
}

/* Text Decorations */
.text-decoration-none {
  text-decoration: none;
}

/* Hero Section */
.hero {
  height: calc(100vh - 3.5rem);
  border-radius: 0 0 20% 20%;
  -webkit-border-radius: 0 0 20% 20%;
  -moz-border-radius: 0 0 20% 20%;
  -ms-border-radius: 0 0 20% 20%;
  -o-border-radius: 0 0 20% 20%;
  display: grid;
}
.hero h1,
.hero h2 {
  text-transform: uppercase;
  text-align: center;
  color: hsl(var(--color-white));
  line-height: 1.15;
}
.hero h1 {
  padding-block-start: 3rem;
  font-weight: 900;
  font-size: var(--fs-800);
  text-shadow: 3px 3px rgba(0, 0, 0, 0.4);
}
.hero h2 {
  margin-block-start: 3rem;
  font-weight: 800;
  font-size: var(--fs-700);
  text-shadow: 2px 2px rgba(0, 0, 0, 0.4);
}

/* Buttons */
.btn {
  padding: 0.5rem 2rem;
  font-family: inherit;
  font-size: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
}
.btn-outline {
  background-color: transparent;
  border: 2px solid hsl(var(--color-dark));
  border-radius: 0.875rem;
  -webkit-border-radius: 0.875rem;
  -moz-border-radius: 0.875rem;
  -ms-border-radius: 0.875rem;
  -o-border-radius: 0.875rem;
  transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
}
.btn-outline:hover {
  background-color: hsl(var(--color-dark));
  color: hsl(var(--color-black));
}
.btn-gradient {
  background-image: linear-gradient(
    to right,
    hsl(var(--color-primary)) 0%,
    hsl(var(--color-secondary)) 100%
  );
  transition: all 0.8s ease-in-out;
  border-radius: 0.875rem;
  -webkit-transition: all 0.8s ease-in-out;
  -moz-transition: all 0.8s ease-in-out;
  -ms-transition: all 0.8s ease-in-out;
  -o-transition: all 0.8s ease-in-out;
  -webkit-border-radius: 0.875rem;
  -moz-border-radius: 0.875rem;
  -ms-border-radius: 0.875rem;
  -o-border-radius: 0.875rem;
  color: hsl(var(--color-white));
  border: none;
  outline: none;
}

.btn-gradient:hover {
  background-image: linear-gradient(
    to right,
    hsl(var(--color-secondary)) 0%,
    hsl(var(--color-primary)) 100%
  );
}

.sectionTitle {
  font-size: 2.25rem;
}

.sectionHeading {
  font-size: 1.5rem;
  font-weight: 600;
}

/* Grid */
.grid {
  display: grid;
}
/* .grid > * {
  height: 100%;
} */
.grid-columns-2 {
  grid-template-columns: repeat(2, 1fr);
  gap: 4rem;
}
.grid-columns-3 {
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.grid-columns-4 {
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

/* ------------------------------------------- */
/* HEADER SECTION                              */
/* ------------------------------------------- */
/* Topbar */
.topbar {
  background-color: hsl(var(--color-primary));
  height: 3rem;
}
.topbar__content {
  height: 100%;
}
/* Navbar */
nav {
  padding-block: 0.5rem;
}
nav .logo img {
  width: 280px;
}
nav .logo span {
  font-weight: 600;
}
.navbar__navItems {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 0.625rem;
}
.navbar__navItems a {
  padding: 0.625rem 1rem;
  color: hsl(var(--color-black));
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
}
.navbar__navItems a.active,
.navbar__navItems a:hover,
.navbar__navItems a:focus,
.navbar__navItems a:focus-visible,
.navbar__navItems a.active:focus-within {
  
  /* background-color: hsl(var(--color-primary)); */
  /* color: hsl(var(--color-white)); */
  
  color: hsl(var(--color-primary));
  background-color: transparent;
  border-radius: 0.625rem;
  -webkit-border-radius: 0.625rem;
  -moz-border-radius: 0.625rem;
  -ms-border-radius: 0.625rem;
  -o-border-radius: 0.625rem;
}
.navbar__navItems a span i {
  color: hsl(var(--color-black));
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
}
.navbar__navItems a.active span i,
.navbar__navItems a:hover span i,
.navbar__navItems a:focus span i,
.navbar__navItems a:focus-visible span i,
.navbar__navItems a.active:focus-within span i {
  color: hsl(var(--color-white));
}


.navbar__navItems .subMenu a{
    padding: 0 1rem;
}

.navbar__navItems .subMenu a:hover,
.navbar__navItems .subMenu a:active,
.navbar__navItems .subMenu a:focus,
.navbar__navItems .subMenu a:focus-visble,
.navbar__navItems .subMenu a:focus-within{
    color: hsl(var(--color-primary));
    background-color: transparent;
}



.subMenuWrapper {
  position: relative;
}
.subMenu {
  display: none;
  position: absolute;
  top: 2rem;
  left: 0;
  min-width: max-content;
  background-color: hsl(var(--color-body));
  color: hsl(var(--color-black));
  padding: 0.875rem;
  border-radius: 1.25rem;
  -webkit-border-radius: 1.25rem;
  -moz-border-radius: 1.25rem;
  -ms-border-radius: 1.25rem;
  -o-border-radius: 1.25rem;
  box-shadow: var(--shadow-2);
  z-index: 99;
}

.subMenuWrapper:hover .subMenu {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.navbar__navIcons {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 1.25rem;
  font-size: var(--fs-500);
  font-weight: 500;
  cursor: pointer;
}

.menuToggleIcon {
  display: none;
}

.responsiveNavbar {
  position: fixed;
  top: 0;
  left: -50vw;
  height: 100vh;
  width: 50vw;
  background-color: hsl(var(--color-card));
  box-shadow: hsl(--shadow-2);
  padding: 1rem;
  overflow-y: scroll;
  z-index: 99;
  transition: all 0.75s ease-in-out;
  -webkit-transition: all 0.75s ease-in-out;
  -moz-transition: all 0.75s ease-in-out;
  -ms-transition: all 0.75s ease-in-out;
  -o-transition: all 0.75s ease-in-out;
}
.responsiveNavbar.active {
  left: 0;
}
.responsiveLogo {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.responsiveNavbar__navItems {
  margin-block-start: 2rem;
  display: flex;
  flex-direction: column;
  /* justify-content: space-between; */
  align-items: flex-start;
  /*gap: 1.25rem;*/
  gap: 0.875rem;
}
.responsiveNavbar__navItems a {
  padding: 0.125rem 1rem;
  color: hsl(var(--color-black));
  font-weight: 500;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
}

.responsiveNavbar__navItems a.active,
.responsiveNavbar__navItems a:hover,
.responsiveNavbar__navItems a:focus,
.responsiveNavbar__navItems a:focus-visible,
.responsiveNavbar__navItems a.active:focus-within {
  
  /* background-color: hsl(var(--color-primary)); */
  /* color: hsl(var(--color-white)); */
  
  color: hsl(var(--color-primary));
  background-color: transparent;
  
  border-radius: 0.625rem;
  -webkit-border-radius: 0.625rem;
  -moz-border-radius: 0.625rem;
  -ms-border-radius: 0.625rem;
  -o-border-radius: 0.625rem;
}
.responsiveNavSubItem {
  margin-inline-start: 0.875rem;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.625rem;
}

/* ------------------------------------------- */
/* FOOTER SECTION                              */
/* ------------------------------------------- */
.footerSection {
  background-color: hsl(var(--color-light));
  padding-block-start: 3rem;
}
.footerSectionHome,
.footerSectionBlog,
.footerSectionContact {
  margin-block-start: 4rem;
}
.footer {
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  padding-block-end: 2rem;
}
.footerTitle {
  color: hsl(var(--color-black));
  font-weight: 600;
  font-size: 1.125rem;
}
.footerText {
  margin-block-start: 1rem;
}
.footerNav {
  margin-block-start: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footerNav a {
  text-decoration: none;
  color: hsl(var(--color-gray));
  transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
}
.footerNav a:hover {
  color: hsl(var(--color-primary));
  margin-inline-start: 1rem;
}
.footerGroups {
  margin-block-start: 1rem;
}
.footerGroup {
  margin-block: 1rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
}
.footerGroup:hover a {
  color: hsl(var(--color-primary));
  margin-inline-start: 0.5rem;
}
.footerGroup i {
  font-size: 1.2rem;
}
.footerGroup a {
  transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
}
.footerGroup a:hover {
  color: hsl(var(--color-primary));
}
.copyrightSection {
  background-color: hsl(var(--color-primary));
  padding-block: 0.875rem;
  gap: 2rem;
  color: hsl(var(--color-white));
}
.developerInfo {
  text-align: right;
}
/* ------------------------------------------- */
/* HOME PAGE - HERO SECTION                    */
/* ------------------------------------------- */
.hero-home {
  background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.65) 20%,
      rgba(250, 121, 0, 0.35) 100%
    ),
    url('../media/home/1/01.jpg') bottom center;
  background-size: cover;
  background-repeat: no-repeat;
  /* background-attachment: fixed; */
  place-content: start;
}
.hero-home h1 {
  padding-block-start: 3rem;
}

/* ------------------------------------------- */
/* HOME PAGE - FEATURE CARDS                   */
/* ------------------------------------------- */
.feature-cards {
  margin-block: -9rem 6rem;
}
.feature-card {
  padding: 0.875rem;
  background-color: hsl(var(--color-card));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  box-shadow: var(--shadow-1);
  border-radius: 1.125rem;
  -webkit-border-radius: 1.125rem;
  -moz-border-radius: 1.125rem;
  -ms-border-radius: 1.125rem;
  -o-border-radius: 1.125rem;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
}
.feature-card:hover {
  margin-top: -0.875rem;
}
.cardIcon {
  color: hsl(var(--color-primary));
  font-size: 3rem;
}
.cardTitle {
  font-weight: 600;
  font-size: 1.125rem;
  color: hsl(var(--color-black));
}
.cardContent {
  color: hsl(var(--color-gray));
}

/* ------------------------------------------- */
/* HOME PAGE - ABOUT US                        */
/* ------------------------------------------- */
.aboutUs {
  margin-block: 6rem;
  align-items: center;
}
.aboutImage img {
  border-radius: 1.75rem;
  -webkit-border-radius: 1.75rem;
  -moz-border-radius: 1.75rem;
  -ms-border-radius: 1.75rem;
  -o-border-radius: 1.75rem;
  box-shadow: var(--shadow-1);
}
.aboutTitle i {
  font-size: 2rem;
}
.aboutTitleText {
  font-weight: 600;
  letter-spacing: 3px;
  font-size: 1.125rem;
  line-height: 1;
}
.aboutSubtitle {
  font-size: var(--fs-700);
  font-weight: 700;
  line-height: 1;
  color: hsl(var(--color-black));
}
.aboutContent {
  margin-block: 1.5rem;
}

/* ------------------------------------------- */
/* HOME - PRODUCTS SECTION                     */
/* ------------------------------------------- */
.productCategoriesSection {
  /* background-image: linear-gradient(to bottom, #262626 30%, transparent 70%); */
  background-color: hsl(var(--color-light));
  padding-block-start: 2rem;
}
.productCategories {
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.productCategory {
  background-color: transparent;
  border-radius: 1rem;
  -webkit-border-radius: 1rem;
  -moz-border-radius: 1rem;
  -ms-border-radius: 1rem;
  -o-border-radius: 1rem;
  overflow: hidden;
  margin-block: 2rem;
}
.productCategory img {
  border-radius: 1rem;
  -webkit-border-radius: 1rem;
  -moz-border-radius: 1rem;
  -ms-border-radius: 1rem;
  -o-border-radius: 1rem;
}
.productCategoryDetails {
  position: relative;
  padding: 1.5rem;
  background-color: hsl(var(--color-card));
  margin: -3rem 1.5rem 2rem 1.5rem;
  box-shadow: var(--shadow-1);
  border-radius: 1rem;
  -webkit-border-radius: 1rem;
  -moz-border-radius: 1rem;
  -ms-border-radius: 1rem;
  -o-border-radius: 1rem;
  transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
}
.productCategoryDetails:hover {
  margin-top: -4rem;
}
.productCategoryTitle {
  color: hsl(var(--color-black));
  font-weight: 600;
  font-size: 1.125rem;
}
.productCategoryIntro {
  margin-block: 0.875rem;
}
.productCategoryDetails .btn-gradient {
  display: block;
}
/* ------------------------------------------- */
/* HOME - CTA SECTION                          */
/* ------------------------------------------- */
.cta {
  padding: 2rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
}
.ctaHome {
  background: linear-gradient(
      to right,
      rgba(217, 38, 28, 0.45) 0%,
      rgba(230, 74, 65, 0.30) 100%
    ),
    url('../media/home/best-it-solutions-dubai-uae.jpg') bottom center;
  background-attachment: fixed;
  color: #fff;
}

/* ------------------------------------------- */
/* HOME - CLIENTS SECTION                      */
/* ------------------------------------------- */

.clients {
  margin-block: 4rem;
  padding: 4rem 2rem;
  background-color: hsl(var(--color-light));
  border-radius: 1.5rem;
  -webkit-border-radius: 1.5rem;
  -moz-border-radius: 1.5rem;
  -ms-border-radius: 1.5rem;
  -o-border-radius: 1.5rem;
  gap: 3rem;
}
.clientsContent {
  width: 55%;
}
.clients .swiper {
  width: 45%;
}
.clientsContent .achievements {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-block: 2rem;
}
.achievements .achievementIcon {
  font-size: 3rem;
  color: hsl(var(--color-primary));
}
.achievementContent .achievementContentTitle {
  font-weight: 600;
  font-size: 1.125rem;
  margin-block-end: 0.5rem;
}
.clientCard {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: 1.25rem;
  -webkit-border-radius: 1.25rem;
  -moz-border-radius: 1.25rem;
  -ms-border-radius: 1.25rem;
  -o-border-radius: 1.25rem;
  overflow: hidden;
}
.clientCard .clientInfo {
  padding-block: 0 2.5rem;
  margin-block: -4rem 0;
  background-color: hsl(var(--color-primary));
  background-image: linear-gradient(
    to right,
    rgba(217, 38, 28, 0.45) 0%,
    rgba(230, 74, 65, 0.30) 100%
  );
  position: relative;
  text-align: center;
}
.clientCard .clientInfo p {
  color: hsl(var(--color-white));
  font-size: var(--fs-400);
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.clients .swiper img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 1.25rem;
  -webkit-border-radius: 1.25rem;
  -moz-border-radius: 1.25rem;
  -ms-border-radius: 1.25rem;
  -o-border-radius: 1.25rem;
}

/* ------------------------------------------- */
/* HOME - BLOGS SECTION                        */
/* ------------------------------------------- */
.blogCards {
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
}
.blogCard {
  padding: 0.625rem;
  background-color: hsl(var(--color-card));
  border-radius: 1.25rem;
  -webkit-border-radius: 1.25rem;
  -moz-border-radius: 1.25rem;
  -ms-border-radius: 1.25rem;
  -o-border-radius: 1.25rem;
  box-shadow: var(--shadow-1);
}

.blogCard img {
  border-radius: 1.25rem 1.25rem 0 0;
  -webkit-border-radius: 1.25rem 1.25rem 0 0;
  -moz-border-radius: 1.25rem 1.25rem 0 0;
  -ms-border-radius: 1.25rem 1.25rem 0 0;
  -o-border-radius: 1.25rem 1.25rem 0 0;
}
.blogPostDetails {
  margin-top: 1rem;
  padding-inline: 0.5rem;
}
.blogPostCategory {
  font-size: 0.875rem;
  letter-spacing: 3px;
  font-weight: 500;
  margin-block-end: 0.625rem;
}
.blogPostTitle {
  color: hsl(var(--color-black));
  font-weight: 600;
  font-size: 1.125rem;
}
.blogPostSummary {
  margin-block: 0.875rem;
}
.blogCard .btn-gradient {
  display: block;
}

/* ------------------------------------------- */
/* ABOUT PAGE - HERO SECTION                   */
/* ------------------------------------------- */
.hero-about {
  background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.65) 20%,
      rgba(250, 121, 0, 0.35) 100%
    ),
    url('../media/about/crosswords-general-trading-llc-dubai-uae.jpg') bottom
      center;
  background-size: cover;
  background-repeat: no-repeat;
}
.hero-about h1 {
  padding-block-start: 15rem;
  display: block;
}

/* ------------------------------------------- */
/* ABOUT PAGE - CTA SECTION                    */
/* ------------------------------------------- */
.ctaAbout {
  background: linear-gradient(
      to right,
      rgba(217, 38, 28, 0.45) 0%,
      rgba(230, 74, 65, 0.30) 100%
    ),
    url('../media/about/crosswords-general-trading-llc.jpg') center center;
  background-attachment: fixed;
}

/* ------------------------------------------- */
/* PRODUCT CATEGORY PAGES                      */
/* ------------------------------------------- */
/* Computers & Accessories */
.hero-computers {
  background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.65) 20%,
      rgba(250, 121, 0, 0.35) 100%
    ),
    url('../media/products/computers-and-accessories-supplier-exporter-dubai-uae.jpg')
      center center;
  background-size: cover;
  background-repeat: no-repeat;
  /* background-attachment: fixed; */
  place-content: start;
}
.ctaComputers {
  background: linear-gradient(
      to right,
      rgba(217, 38, 28, 0.45) 0%,
      rgba(230, 74, 65, 0.30) 100%
    ),
    url('../media/products/computers-and-accessories.jpg') bottom center;
  background-attachment: fixed;
}

/* IT Products & Equipment */
.hero-it {
  background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.65) 20%,
      rgba(250, 121, 0, 0.35) 100%
    ),
    url('../media/products/it-equipment-and-accessories-supplier-exporter-dubai-uae.jpg')
      center center;
  background-size: cover;
  background-repeat: no-repeat;
  /* background-attachment: fixed; */
  place-content: start;
}
.ctaIT {
  background: linear-gradient(
      to right,
      rgba(217, 38, 28, 0.45) 0%,
      rgba(230, 74, 65, 0.30) 100%
    ),
    url('../media/products/it-equipment-and-accessories.jpg') bottom center;
  background-attachment: fixed;
}

/* Security Solutions & Equipment */
.hero-security {
  background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.65) 20%,
      rgba(250, 121, 0, 0.35) 100%
    ),
    url('../media/products/security-solutions-and-equipment-supplier-exporer-dubai-uae.jpg')
      center center;
  background-size: cover;
  background-repeat: no-repeat;
  /* background-attachment: fixed; */
  place-content: start;
}
.ctaSecurity {
  background: linear-gradient(
      to right,
      rgba(217, 38, 28, 0.45) 0%,
      rgba(230, 74, 65, 0.30) 100%
    ),
    url('../media/products/security-solutions-equipment.jpg') center center;
  background-attachment: fixed;
}

/* Networking Equipment & Accessories */
.hero-networking {
  background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.65) 20%,
      rgba(250, 121, 0, 0.35) 100%
    ),
    url('../media/products/networking-equipment-and-accessories-supplier-exporter-dubai-uae.jpg')
      center center;
  background-size: cover;
  background-repeat: no-repeat;
  /* background-attachment: fixed; */
  place-content: start;
}
.ctaNetworking {
  background: linear-gradient(
      to right,
      rgba(217, 38, 28, 0.45) 0%,
      rgba(230, 74, 65, 0.30) 100%
    ),
    url('../media/products/networking-equipment-and-accessories.jpg') bottom
      center;
  background-attachment: fixed;
}

/* Communication & Navigation Equipment */
.hero-communication {
  background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.65) 20%,
      rgba(250, 121, 0, 0.35) 100%
    ),
    url('../media/products/communication-and-navigation-equipment-supplier-exporter-dubai-uae.jpg')
      center center;
  background-size: cover;
  background-repeat: no-repeat;
  /* background-attachment: fixed; */
  place-content: start;
}
.ctaCommunication {
  background: linear-gradient(
      to right,
      rgba(217, 38, 28, 0.45) 0%,
      rgba(230, 74, 65, 0.30) 100%
    ),
    url('../media/products/communication-and-navigation-equipment.jpg') top
      center;
  background-attachment: fixed;
}

/* Office & Home Furniture */
.hero-furniture {
  background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.65) 20%,
      rgba(250, 121, 0, 0.35) 100%
    ),
    url('../media/products/home-and-office-furniture-supplier-exporter-dubai-uae.jpg')
      bottom center;
  background-size: cover;
  background-repeat: no-repeat;
  /* background-attachment: fixed; */
  place-content: start;
}
.ctaFurniture {
  background: linear-gradient(
      to right,
      rgba(217, 38, 28, 0.45) 0%,
      rgba(230, 74, 65, 0.30) 100%
    ),
    url('../media/products/home-and-office-furniture.jpg') bottom center;
  background-attachment: fixed;
}



/* Data Storage & Backup Solutions */
.hero-data-storage {
  background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.65) 20%,
      rgba(250, 121, 0, 0.35) 100%
    ),
    url('../media/products/data-storage-products-supplier-exporter-dubai-uae.jpg')
      center center;
  background-size: cover;
  background-repeat: no-repeat;
  /* background-attachment: fixed; */
  place-content: start;
}
.ctaDataStorage {
  background: linear-gradient(
      to right,
      rgba(217, 38, 28, 0.45) 0%,
      rgba(230, 74, 65, 0.30) 100%
    ),
    url('../media/products/data-storage-products-and-solutions.jpg') bottom center;
  background-attachment: fixed;
}


/* Consumer Electronics */
.hero-consumer-electronics {
  background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.65) 20%,
      rgba(250, 121, 0, 0.35) 100%
    ),
    url('../media/products/consumer-electronics-supplier-exporter-dubai-uae.jpg')
      center center;
  background-size: cover;
  background-repeat: no-repeat;
  /* background-attachment: fixed; */
  place-content: start;
}
.ctaConsumerElectronics {
  background: linear-gradient(
      to right,
      rgba(217, 38, 28, 0.45) 0%,
      rgba(230, 74, 65, 0.30) 100%
    ),
    url('../media/products/consumer-electronics.jpg') bottom center;
  background-attachment: fixed;
}


/* Laboratory Equipment Supplies */
.hero-laboratory-equipment {
  background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.65) 20%,
      rgba(250, 121, 0, 0.35) 100%
    ),
    url('../media/products/laboratory-equipment-exporter-dubai-uae.jpg')
      center center;
  background-size: cover;
  background-repeat: no-repeat;
  /* background-attachment: fixed; */
  place-content: start;
}
.ctaLaboratoryEquipment {
  background: linear-gradient(
      to right,
      rgba(217, 38, 28, 0.45) 0%,
      rgba(230, 74, 65, 0.30) 100%
    ),
    url('../media/products/laboratory-equipment.jpg') bottom center;
  background-attachment: fixed;
}



/* Cloud Computing Services and Solutions */
.hero-cloud-computing {
  background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.65) 20%,
      rgba(250, 121, 0, 0.35) 100%
    ),
    url('../media/products/cloud-computing-services-dubai-uae.jpg')
      center center;
  background-size: cover;
  background-repeat: no-repeat;
  /* background-attachment: fixed; */
  place-content: start;
}
.ctaCloudComputing {
  background: linear-gradient(
      to right,
      rgba(217, 38, 28, 0.45) 0%,
      rgba(230, 74, 65, 0.30) 100%
    ),
    url('../media/products/cloud-computing.jpg') bottom center;
  background-attachment: fixed;
}


/* Professional Services & Consulting */
.hero-professional-consulting {
  background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.65) 20%,
      rgba(250, 121, 0, 0.35) 100%
    ),
    url('../media/products/professional-consulting-services-dubai-uae.jpg')
      center center;
  background-size: cover;
  background-repeat: no-repeat;
  /* background-attachment: fixed; */
  place-content: start;
}
.ctaProfessionalConsulting {
  background: linear-gradient(
      to right,
      rgba(217, 38, 28, 0.45) 0%,
      rgba(230, 74, 65, 0.30) 100%
    ),
    url('../media/products/professional-consulting.jpg') bottom center;
  background-attachment: fixed;
}


/* Maintenance Repair & Operation Supplies */
.hero-mro {
  background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.65) 20%,
      rgba(250, 121, 0, 0.35) 100%
    ),
    url('../media/products/maintenance-repair-operation-products-dubai-uae.jpg')
      center center;
  background-size: cover;
  background-repeat: no-repeat;
  /* background-attachment: fixed; */
  place-content: start;
}
.ctaMRO {
  background: linear-gradient(
      to right,
      rgba(217, 38, 28, 0.45) 0%,
      rgba(230, 74, 65, 0.30) 100%
    ),
    url('../media/products/maintenance-repair-operation-products.jpg') bottom center;
  background-attachment: fixed;
}


/* Educational Technology Products */
.hero-educational-technology {
  background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.65) 20%,
      rgba(250, 121, 0, 0.35) 100%
    ),
    url('../media/products/educational-technology-products-dubai-uae.jpg')
      center center;
  background-size: cover;
  background-repeat: no-repeat;
  /* background-attachment: fixed; */
  place-content: start;
}
.ctaEducationalTechnology {
  background: linear-gradient(
      to right,
      rgba(217, 38, 28, 0.45) 0%,
      rgba(230, 74, 65, 0.30) 100%
    ),
    url('../media/products/educational-technology-products.jpg') bottom center;
  background-attachment: fixed;
}


/* Building Management Systems */
.hero-building-management {
  background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.65) 20%,
      rgba(250, 121, 0, 0.35) 100%
    ),
    url('../media/products/building-management-systems-dubai-uae.jpg')
      center center;
  background-size: cover;
  background-repeat: no-repeat;
  /* background-attachment: fixed; */
  place-content: start;
}
.ctaBuildingManagement {
  background: linear-gradient(
      to right,
      rgba(217, 38, 28, 0.45) 0%,
      rgba(230, 74, 65, 0.30) 100%
    ),
    url('../media/products/building-management-systems.jpg') bottom center;
  background-attachment: fixed;
}


/* Software & Applications */
.hero-software-applications {
  background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.65) 20%,
      rgba(250, 121, 0, 0.35) 100%
    ),
    url('../media/products/software-applications-dubai-uae.jpg')
      center center;
  background-size: cover;
  background-repeat: no-repeat;
  /* background-attachment: fixed; */
  place-content: start;
}
.ctaSoftwareApplications {
  background: linear-gradient(
      to right,
      rgba(217, 38, 28, 0.45) 0%,
      rgba(230, 74, 65, 0.30) 100%
    ),
    url('../media/products/software-applications.jpg') bottom center;
  background-attachment: fixed;
}






/* ------------------------------------------- */
/* BLOG ARTICLE PAGES                          */
/* ------------------------------------------- */

.blogHero img {
  width: 100%;
  max-height: 60vh;
  object-fit: cover;
  object-position: center center;
  border-radius: 1.25rem;
}

.articleSection {
  margin-block-start: 4rem;
}
.articleTitle {
  font-size: var(--fs-700);
  font-weight: 500;
  line-height: 1.1;
  color: hsl(var(--color-black));
}
.articleMeta {
  margin-block: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  color: hsl(var(--color-black));
  font-style: italic;
}
.articleMeta span {
  color: hsl(var(--color-primary));
}
.articleContent a {
  color: hsl(var(--color-primary));
  text-decoration: underline;
  font-style: italic;
}
/* ------------------------------------------- */
/* CONTACT PAGE - HERO SECTION                 */
/* ------------------------------------------- */
.hero-contact {
  background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.65) 20%,
      rgba(250, 121, 0, 0.35) 100%
    ),
    url('../media/contact/contact-crosswords-general-trading-llc.jpg') bottom
      center;
  background-size: cover;
  background-repeat: no-repeat;
}
.hero-contact h1 {
  padding-block-start: 15rem;
  display: block;
}

.locationMap {
  height: 60vh;
  border-radius: 1.25rem;
  -webkit-border-radius: 1.25rem;
  -moz-border-radius: 1.25rem;
  -ms-border-radius: 1.25rem;
  -o-border-radius: 1.25rem;
  /* overflow: hidden; */
  padding-inline: 0;
}
.locationMap iframe {
  height: 100%;
  border-radius: 1.25rem;
  -webkit-border-radius: 1.25rem;
  -moz-border-radius: 1.25rem;
  -ms-border-radius: 1.25rem;
  -o-border-radius: 1.25rem;
  box-shadow: var(--shadow-1);
}

/* ------------------------------------------- */
/* MEDIA QUERIES                               */
/* ------------------------------------------- */

/* ------------- 1200px ---------------------- */
@media (max-width: 1200px) {
  /* Varables */
  :root {
    /* Font Sizes */
    --fs-900: 4rem;
    --fs-800: 3rem;
    --fs-700: 1.75rem;
    --fs-600: 1.25rem;
    --fs-500: 1rem;
    --fs-400: 0.875rem;
    --fs-300: 0.825rem;
    --fs-200: 0.75rem;
  }
  /* Container */
  .container {
    margin-inline: auto;
    padding-inline: 1.5rem;
    width: 94%;
  }
  /* Navbar */
  nav .logo img {
    width: 180px;
  }
  /* Grid */
  .grid-columns-2 {
    grid-template-columns: repeat(1, 1fr);
    gap: 3rem;
  }
  .grid-columns-3,
  .grid-columns-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Font Sizes */
  .sectionTitle {
    font-size: 2rem;
  }
  /* Hero Section */
  .hero {
    height: calc(100vh - 6rem);
    border-radius: 0 0 15% 15%;
    -webkit-border-radius: 0 0 15% 15%;
    -moz-border-radius: 0 0 15% 15%;
    -ms-border-radius: 0 0 15% 15%;
    -o-border-radius: 0 0 15% 15%;
  }
  /* Home Page - Feature Card */
  .feature-card:hover {
    margin-top: -1.25rem;
  }
  .cardIcon {
    font-size: 3.25rem;
  }
  /* Home Page - About Us */
  .aboutUs {
    margin-block: 4rem;
  }
}

/* -------------- 960px ---------------------- */
@media (max-width: 960px) {
  /* Navbar */
  .navbar__navItems {
    display: none;
  }
  .navbar__navIcons {
    gap: 0.875rem;
    font-size: var(--fs-600);
  }
  .menuToggleIcon {
    display: initial;
  }
}

/* -------------- 768px ---------------------- */
@media (max-width: 768px) {
  /* Varables */
  :root {
    /* Font Sizes */
    --fs-900: 2.5rem;
    --fs-800: 1.65rem;
    --fs-700: 1.5rem;
    --fs-600: 1.125rem;
    --fs-500: 0.925rem;
    --fs-400: 0.825rem;
    --fs-300: 0.75rem;
    --fs-200: 0.7rem;
  }
  /* Container */
  .container {
    margin-inline: auto;
    padding-inline: 0.625rem;
    width: 98%;
  }
  /* Grid */
  .grid-columns-2,
  .grid-columns-3,
  .grid-columns-4 {
    grid-template-columns: repeat(1, 1fr);
  }
  .grid-columns-2 {
    gap: 2rem;
  }
  /* Font Sizes */
  .sectionTitle {
    font-size: 1.75rem;
  }
  /* Navbar */
  .responsiveNavbar {
    left: -70vw;
    width: 70vw;
  }
  /* Hero Section */
  .hero {
    height: 60vh;
    border-radius: 0 0 10% 10%;
    -webkit-border-radius: 0 0 10% 10%;
    -moz-border-radius: 0 0 10% 10%;
    -ms-border-radius: 0 0 10% 10%;
    -o-border-radius: 0 0 10% 10%;
    background-position: bottom center;
    background-attachment: scroll;
    /* place-content: start; */
  }
  .hero h1 {
    padding-block-start: 2rem;
  }
  /* .hero-home {
    background-position: bottom center;
    background-attachment: scroll;
    place-content: start;
  } */
  /* Home Page - Feature Card */
  .feature-cards {
  margin-block: -6rem 4rem;
}
  .feature-card:hover {
    margin-top: -0.75rem;
  }
  .cardIcon {
    font-size: 2.5rem;
  }
  /* Home Page - About Us */
  .aboutUs {
    margin-block: 3rem;
  }
  /* Home Page - Products */
  .productCategory {
    margin-block: 0;
  }
  .productCategoryDetails {
    padding: 1.25rem;
    margin: -3rem 1rem 1.5rem 1rem;
  }
  /* Home Page - CTA */
  .cta {
    min-height: 50vh;
  }
  /* Home Page - Clients Section */
  .clients {
    flex-wrap: wrap;
  }
  .clientsContent {
    width: 100%;
  }
  .clients .swiper {
    width: 100%;
  }
  /* Footer Section */
  .footerSection {
    margin-block-start: 4rem;
  }
  .copyrightSection {
    text-align: center;
  }
  .developerInfo {
    text-align: center;
  }
}

/* -------------- 540px ---------------------- */
@media (max-width: 540px) {
  /* Navbar */
  .responsiveNavbar {
    left: -80vw;
    width: 80vw;
  }
}