@import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@400..700&display=swap');
:root {
  --primaryColor: #000000;
  --helperColor: #0275d8;
  --lightHelper: #0275d8;
  --bgProject:#400b5015;
  --hrColor: #e8eef3;
  --middleColor: #3d3d3d;
  --transparentColor: rgba(0, 0, 0, 0.699);
  --shadow: rgba(189, 188, 188, 0.514);
  --whatsappColor: #5cb85c;
  --white: #ffff;
  --blue: #0275d8;
  --green: #25D366;
  --gray: #f8f8f8;
  --container-width: 1340px;
  --header-height: 200px;
  --facebook-color: #41BEE9;
  --instegram-color: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  --radius-md: 10px;
  --radius-lg: 16px;
  --border-medium: 2px;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 24px;
  --space-xl: 30px;

  --shadow-right: 4px 0 10px var(--shadow-color);
  --shadow-sm: 0px 4px 6px var(--shadow-color);
  --shadow-md: 0 5px 12px var(--shadow-color);
  --shadow-lg: 0 10px 25px var(--shadow-color);

  --text-md: 16px;
  --text-lg: 20px;
  --text-xl: 28px;
  --text-2xl: 38px;
}

/* =============================================
   Selection
  
============================================= */



/* Light sections — lightHelper bg */
.white-header *::selection,
.white-header .logo img *::selection,
.white-hero *::selection,
.white-whyus *::selection,
.pp-body *::selection,

.white-portfolio .portfolio-card__btn::selection,
.white-portfolio .portfolio-card__btn *::selection,
.white-portfolio .portfolio-top::selection,
.white-portfolio .portfolio-top *::selection,

.white-pricing .pricing-top::selection,
.white-pricing .pricing-top *::selection,

.white-locations .location-box::selection,
.white-locations .location-box *::selection,

.dark-testimonials .google-reviews-btn ::selection,
.dark-testimonials .google-reviews-btn  *::selection,


.blue-faq *::selection,

.white-why-us .bs-card-number::selection,
.white-why-us .bs-section-title::selection,

.engz-services *::selection,

.white-services *::selection
{
  background-color: var(--lightHelper);
  color: var(--white);
}


/* Blue sections — white bg */

.white-header .nav-links a.active::selection,    
.white-header .nav-links a.active *::selection,
.blue-hero *::selection,
.blue-whyus *::selection,
.blue-services *::selection,
.blue-portfolio *::selection,
.white-contact *::selection,

.white-locations .locations-title *::selection,
.white-locations .locations-title::selection,

.white-portfolio .portfolio-card__label::selection,
.white-portfolio .portfolio-card__label *::selection,
.white-portfolio .portfolio-card__desc::selection,
.white-portfolio .portfolio-card__desc *::selection,
.white-portfolio .portfolio-btn::selection,
.white-portfolio .portfolio-btn *::selection,
.white-portfolio .portfolio-controls *::selection,

.white-pricing .pricing-card::selection,
.white-pricing .pricing-card *::selection,

.dark-testimonials .slider-testimonials-section-header::selection,
.dark-testimonials .slider-testimonials-section-header *::selection,

.bs-why-grid::selection,
.dark-testimonials .slider-testimonials-section-header *::selection,

.blue-pp *::selection,


.footer *::selection {
  background-color: var(--white);
  color: var(--lightHelper);
}

.m-top {
  margin-top: 80px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "El Messiri", sans-serif;
  
   

}

a {
  text-decoration: none;
}

#projects,
#skills-slider,
.none {
  display: none !important;
}

ul {
  list-style: none;
}

.container-width {
  max-width: 1000px !important;
  margin-inline: auto !important;
}

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  /* padding: 0 18px; */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.m-auto {
  margin-inline: auto !important;
}

body::-webkit-scrollbar {
  width: 8px;
}

body::-webkit-scrollbar-track {
  background-color: var(--primaryColor);
}

body::-webkit-scrollbar-thumb {
  background-color: var(--lightHelper);
  background-image: linear-gradient(0deg, var(--lightHelper) 0%, var(--helperColor) 100%);
  border-radius: 5px;
}