* {
  --hoverColor: #ff545a;
  --mainColor: #f43032;
  --black: #1b1e20;
}

.item-service {
  height: 450px;
  overflow-y: visible;
}

/* .item-service .single-how-works-text h2, .item-service .single-how-works-text p {
  text-align: left;
} */

@media (max-width: 768px) {
  .item-service {
    height: max-content; /* zorgen dat er geen overflow is op gsm schermen */
    overflow-y: hidden !important;
    margin-bottom: 10px !important; /* marges tussen kaartjes aanpassen in mobile view */
    margin-top: 10px !important; /* marges tussen kaartjes aanpassen in mobile view */
  }
}

@media (max-width: 1024px) {
  .item-service:not(
      .socialMediaCard,
      .hostingCard,
      .printingCard,
      .computerCard,
      .electroCard,
      .recycleCard
    ) {
    height: 450px;
    overflow-y: scroll !important;
  }
}

#reviews {
  position: relative;
  background: linear-gradient(to right, #f85c5e, #ff6f6d);
  overflow: hidden;
  /* border-radius toevoegen? */
}

#reviews::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../img/pattern.png");
  background-size: auto;
  background-position: center;
  z-index: 0;
}

#reviews .reviewHeader {
  color: white;
}

#reviews .section-header p {
  color: white;
}

#reviews .googleLogoReviews {
  height: 45px;
  margin-left: 93%;
  padding-bottom: 5px;
}

.item-service::-webkit-scrollbar {
  width: 6px; /* Slim scrollbar */
}

.item-service::-webkit-scrollbar-thumb {
  background-color: #888; /* Scrollbar color */
  border-radius: 10px; /* Rounded edges */
}

.item-service::-webkit-scrollbar-thumb:hover {
  background-color: #555; /* Darker on hover */
}

.item-service::-webkit-scrollbar-track {
  background: #f0f0f0; /* Light background */
  border-radius: 10px;
}
.item-service {
  scrollbar-width: none;
  scrollbar-color: #888 #f0f0f0;
}

.buttonContactBottom {
  margin-left: auto;
  margin-right: auto;
}

.contactForm {
  justify-content: center;
}

/* ====================== */
/* Nieuwe navigatie balk */
/* ====================== */
.navbar {
  background-color: white;
  padding: 15px;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

body {
  margin-top: 90px;
}

/*? Marges van navbar (kleine witte ruimte onder navbar) fixen in mobile en tablet mode */
@media screen and (max-width: 1024px) {
  body {
    margin-top: 80px;
  }
}

.navbar-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-right: 0em;
  margin-inline: 292.5px;
}

.logo span {
  color: #1b1e20;
  font-size: 20px;
  font-weight: bold;
  padding-left: 0.5em;
  white-space: nowrap;
}
.logo {
  color: var(--hoverColor);
  font-size: 20px;
  font-weight: bold;
  margin-right: auto;
  padding-left: 0em;
  white-space: nowrap;
}

.navbar-links {
  display: flex;
  list-style: decimal;
  padding: 0;
  margin: 0;
  justify-content: center;
  text-align: center;
}

.navbar-links li {
  padding: 10px;
}

.navbar-links a {
  color: var(--black);
  font-family: "DM Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  padding: 10px;
  display: block;
  transition: 0.3s linear;
  font-size: 16px;
  padding-left: 40px;
  font-weight: 400;
}

.navbar-links a:hover {
  color: var(--hoverColor);
}

.navbar-links a > span.active {
  color: var(--hoverColor);
  font-weight: bold;
}

.menu-icon {
  cursor: pointer;
  display: none;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

@media screen and (max-width: 1024px) {
  .logo {
    font-size: 15.5px; /* Further reduce text size */
    padding-left: 0.5em; /* Minimal padding */
  }

  .contactKnopNavbar {
    margin-left: 0em !important;
  }

  .logo span {
    font-size: 15.5px; /* Further reduce text size */
    padding-left: 0.5em;
  }

  .menu-icon {
    margin-left: auto; /* Pushes the menu to the right */
    display: flex;
    transform: scale(0.9); /* Make the hamburger menu a bit smaller */
  }

  .navbar-brand {
    font-size: 16px !important;
  }

  .navbar-links a {
    padding-left: 0px;
  }

  .navbar-links a > span.active {
    /* Hier kan eventueel nog gespeeld worden, door bv, de geselecteerde elementen vet te drukken en de anderen niet. */
    font-weight: bold !important;
  }

  /* Onderaan de items in de navbar in mobile / tablet mode een shaduw toevoegen voor duidelijkheid in afzondering */
  .navbar-links {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  }
}

.bar {
  background-color: #1b1e20;
  height: 3px;
  width: 25px;
  margin: 5px;
  text-align: right;
}

/* Dropdown Styles */
.dropdown {
  position: relative;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50px;
  background-color: white;
  /* padding-left: 35px; */
  padding: 0;
  margin: 0;
  border-radius: 5px;
  width: 275px;
  list-style-type: disc;
  list-style-position: inside;
}

.dropdown-menu li {
  width: 100%;
  padding: 0%;
  /* list-style-type: disc;
  list-style-position: inside;
  padding-left: 5px; */
}

/* .dropdown-menu li > a */

.dropdown-menu li > a:hover {
  background-color: var(--hoverColor);
  color: white;
  width: 100%;
  /* padding-left: 5%; */
}

/* Als je hovert over een al actief item, dan zal de tekst wit worden. */
.dropdown-menu li > a:hover > span.active {
  color: white;
  /* padding-left: 5%; */
}

.dropdown-menu a {
  color: var(--black);
  text-decoration: none;
  padding-left: 5%; /*? Door hier padding left van 5% toe te voegen, worden de items ?*/
}

.dropdown:hover .dropdown-menu {
  display: block;
}

.menu-icon.implode {
  transform: scale(0.5);
  opacity: 0.5;
}

/* Responsive Styles */
@media screen and (max-width: 1024px) {
  /* Hier aanpassen naar 1024px zal de navbar op tablets ook mooi laten tonen */
  .navbar-container {
    margin-inline: 0px !important;
    padding-right: 5em;
  }
  .navbar-links {
    display: none;
    width: 100%;
    flex-direction: column;
    background-color: white;
    position: absolute;
    top: 60px;
    left: 0;
  }

  .navbar-links li {
    text-align: center;
    width: 100%;
  }

  .navbar-links.active {
    display: flex;
    color: var(--hoverColor);
  }

  .menu-icon {
    display: block;
    margin-left: auto; /* Bij tablets deze hamburger menu naar rechts duwen */
    margin-right: -50px; /*! Deze -50px margin naar rechts zal ervoor zorgen dat de hamburger menu iets meer rechts staat. */
    margin-bottom: 5px
      /*! Door hier ook nog een margin-bottom van 5px in te zetten, zal dit de hamburger menu, meer in hiet midden zetten op zijn as. */;
  }

  /* Dropdown centreren in mobile mode */
  .dropdown-menu {
    position: static;
    width: 100%;
  }
}

/*? Deze klasse / button wordt automatisch al in mobile & ipad view in midden van hamburger menu gezet. ?*/
.contactKnopNavbar {
  height: 40px !important;
  width: 120px !important;
  margin-left: 2em;
  margin-right: auto !important;
  margin-top: auto;
  margin-bottom: auto;
  text-transform: uppercase !important;
  cursor: pointer;
}

.contactKnopFooter {
  height: 40px !important;
  width: 120px !important;
  margin-left: 2em !important;
  margin-right: auto !important;
  margin-top: auto;
  margin-bottom: auto;
  text-transform: uppercase !important;
  cursor: pointer;
}

.newBtnHero {
  font-family: "DM Sans", sans-serif;
  outline: 0;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  background: #ff545a;
  min-width: 170px;
  height: 60px;
  border: 0;
  border-radius: 3px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  padding: 16px 20px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  cursor: pointer;
}

.newBtnHero:hover {
  opacity: 0.95;
  background-color: #f43032; /* deze kleur eventueel veranderen naar #ff545a  */
  color: #fff;
}

.newBtnHero:hover .animation {
  border-radius: 100%;
  animation: ripple 0.6s linear infinite;
}

@keyframes ripple {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1),
      0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 40px rgba(255, 255, 255, 0.1),
      0 0 0 60px rgba(255, 255, 255, 0.1);
  }

  100% {
    box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.1),
      0 0 0 40px rgba(255, 255, 255, 0.1), 0 0 0 60px rgba(255, 255, 255, 0.1),
      0 0 0 80px rgba(255, 255, 255, 0);
  }
}

/*===============*/
/* Hero-Sections */
/*===============*/
#recycle {
  background: url("../img/hero-images/recyle.jpg") !important;
  height: 450px;
}

#print {
  background: url("../img/hero-images/printing.jpg") !important;
  height: 450px;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
}

#webDesign {
  background: url("../img/hero-images/webdesign.jpg") !important;
  height: 450px;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
}

#cloud {
  background: url("../img/hero-images/cloud.jpg") !important;
  height: 450px;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
}

#contact {
  background: url("../img/hero-images/contact-footer.jpg") !important;
  height: 450px;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
}

#hosting {
  background: url("../img/hero-images/hosting.jpg") !important;
  height: 450px;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
}

#elektro {
  background: url("../img/hero-images/elektro.jpg") !important;
  height: 450px;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
}

#computer {
  background: url("../img/hero-images/computer.jpg") !important;
  height: 450px;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
}

@media screen and (max-width: 768px) {
  /* ! Deze blok css zal ervoor zorgen dat de tekst in de hero-sections van de pagina's in mobile mode in het midden worden getoond, wat niet het geval was. 
     ! Bij tablet mode + mobile view's landscape and portrait mode zien deze er proper uit.  */
  .welcome-hero-txt:not(.heroStartText) {
    align-items: center !important;
    vertical-align: middle !important;
    align-content: center !important;
    justify-content: center !important;
    padding-top: 40% !important;
  }
}

#socialMedia {
  background: url("../img/hero-images/sm-management.jpeg") !important;
  height: 450px;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
}

#services {
  background: url("../img/hero-images/services.jpeg") !important;
  height: 450px;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
}

#about-us {
  background: url("../img/hero-images/about.jpg") !important;
  height: 450px;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
}

#termsHero {
  background: url("../img/hero-images/terms.jpg") !important;
  height: 450px;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
}

.headerTextPages:not(.contactTitle) > a {
  text-transform: none !important;
  cursor: default !important;
}

.contactTitle > a {
  text-transform: none !important;
  margin-bottom: 5px !important;
}

.phoneCard {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-evenly !important;
}

.phoneCard:hover hr {
  color: #ffffff;
}

.phoneCard h2,
.phoneCard p {
  text-align: left;
}

.phoneCard .textContactCard {
  margin-top: auto;
  margin-bottom: auto;
  margin-inline: 1em;
}

.item-service p a {
  color: inherit;
  font-weight: inherit;
  text-transform: initial;
  font-size: inherit;
  text-decoration: underline;
}

.item-service-term :hover {
  background-color: transparent !important;
}

.termsCard {
  text-align: left !important;
}

.termsCard :hover {
  background-color: transparent !important;
}

.term-content {
  margin-bottom: 5px !important;
}

.navbarFooter {
  margin-top: -55px !important;
  width: 100% !important;
}

#footerLocAndMail {
  padding-top: 2em;
}

.reviews-content {
  display: flex !important;
  flex-wrap: wrap !important; /* Ensures wrapping on smaller screens */
  justify-content: center !important;
  gap: 20px !important; /* Adds spacing between the reviews */
}

.phoneNumberSpanFooter {
  /* tel nummer in footer klikbaar maken */
  cursor: pointer;
}

/* Phone and social media links in midden zetten (zorgt ervoor dat deze op 1 lijn staan, zodat je niet op een witruimte drukt en de phone app opent ineens. */
@media screen and (max-width: 768px) {
  .copyright {
    text-align: center;
  }

  .navbarFooter {
    width: 75%;
    margin-top: auto !important;
  }

  .footer-social {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }

  .phoneNumberSpanFooter {
    text-align: center !important;
  }

  #footerLocAndMail a {
    flex-direction: column !important;
  }

  #footerLocAndMail {
    margin-top: 10px !important;
  }

  #footerLocAndMail a svg {
    margin-bottom: 10px !important;
  }

  #footerLocAndMail a p {
    text-align: center !important;
  }

  .footer-social a {
    display: inline-block;
    margin: 0 8px;
  }

  .social-links {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    gap: 8px;
    width: 100%;
  }

  /*? deze 3 classes zullen er hier voor zorgen dat de 3 navigatie links onder elkaar staan bij smallere schermen. ?*/
  .footer-menu-item {
    margin-top: 9% !important;
    justify-content: center !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .footer-menu-item li {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
  }

  .footer-menu-item li button {
    margin-left: -13px !important;
  }

  .footer-menu .navbar-header {
    text-align: center !important;
    margin-left: -12px;
  }
}

.logo {
  /* Logo klikbaar maken */
  cursor: pointer;
}

/* ervoor zorgen dat de telefoonnummer + sociale media links rechts worden uitgelijnd, op dezelfde lijn, door flex. 
   Zodra deze in mobile mode worden bekeken zullen deze onder elkaar komen te staan door bovenstaande media-query  */
.footer-social {
  display: flex;
  align-items: center;
  justify-content: right;
  gap: 3.46px;
}

/* =================================================================================================*/
/*  Buttons in .item-service cards (diensten) --> 
    deze onderstaande klasses zorgen ervoor dat alle buttons op dezelfde rij staan ==> oogt mooier  */
/* =================================================================================================*/
.serviceComputers,
.serviceElektro,
.serviceHosting,
.serviceSocialMedia {
  margin-top: 45%;
}

.serviceRecycling,
.serviceWebDesign,
.servicePrinting {
  margin-top: 34%;
}

@media screen and (max-width: 768px) /* Eventueel voor tablets ook doen. */ {
  .serviceComputers,
  .serviceElektro,
  .serviceHosting,
  .serviceSocialMedia {
    margin-top: 0 !important;
  }

  .serviceRecycling,
  .serviceWebDesign,
  .servicePrinting {
    margin-top: 0 !important;
  }
}

/** Animations **/
.welcome-hero-txt h2 {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeIn 1s ease-in-out forwards; /*? Timing intervals kunnen hier aangepast worden indien gewenst */
}

.welcome-hero-txt p {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeIn 1.2s ease-in-out forwards; /*? Timing intervals kunnen hier aangepast worden indien gewenst */
}

.contactBtnStart {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeIn 1.4s ease-in-out forwards; /*? Timing intervals kunnen hier aangepast worden indien gewenst */
}

@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Eventueel deze animaties nog aanpassen */
.item-service {
  opacity: 0 !important;
  transform: translateY(20px) !important;
  transition: background 1s ease, box-shadow 1s ease, color 1s ease,
    opacity 1s ease-out, transform 1s ease-out !important;
}

.item-service.show {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/*! Alle andere cards ook dit effect geven, buiten die op de over-ons pagina. !*/
.item-service:not(.aboutUsCard):hover {
  background: var(--hoverColor);
  box-shadow: 0 0px 10px rgba(71, 71, 71, 0.4);
}

.item-service:not(.aboutUsCard):hover h2,
.item-service:not(.aboutUsCard):hover a {
  color: #fff;
}

.item-service h2,
.item-service a {
  color: #343a3f;
  transition: color 1s ease;
}

.gallery-cell {
  opacity: 0;
  transform: translateY(
    20px
  ); /* Hier gaan de reviews verticaal in faden (indien nodig horizontaal zetten) */
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.gallery-cell.show {
  opacity: 1;
  transform: translateY(0);
}

.subscription-input-group,
.subscribe-title {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInBottomSection 0.8s ease-in-out forwards;
}

@keyframes fadeInBottomSection {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* H2's (kan ook pas als je naar deze scrollt) */
.section-header {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInH2 0.8s ease-in-out forwards;
}

@keyframes fadeInH2 {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.contact-form {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInContact 1s ease-in-out forwards;
}

@keyframes fadeInContact {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* recycle icoon eventueel laten rotaten */
#computerIcon,
#cloudIcon,
#electronicsIcon,
#recycleIcon,
#hostingIcon,
#socialMediaIcon,
#codeIcon,
#drukWerkIcon {
  animation: pulseAnimation 1.5s ease-in-out infinite;
}

@keyframes pulseAnimation {
  /* 0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  } */
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.15);
  }

  100% {
    transform: scale(1);
  }
}

hr {
  color: #859098;
}

@media screen and (max-width: 768px) {
  .cloudPageTitles {
    padding-top: 2.5em !important;
  }
}

.cloudPageSubNav {
  text-align: center !important;
}

.photograph {
  margin-top: 25%;
  margin-bottom: 25%;
  transition: transform 0.3s ease-in-out;
}

.photograph:hover {
  transform: scale(1.1) !important;
}

/* Proberen om eventueel nog op Ipad's te tonen */
@media screen and (max-width: 768px) {
  .photograph {
    height: min-content !important;
  }
  .waaromDesktop {
    margin-top: 0px !important;
  }
}

.autoText {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 25px;
}

.autoText div {
  position: absolute;
  display: flex;
  overflow: hidden;
  width: 200%;
  height: 30px;
  animation: autoText 10s linear infinite;
}

.autoText h2 {
  float: left;
  width: 50%;
}

@keyframes autoText {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media screen and (max-width: 768px) {
  .autoText div {
    width: max-content;
  }

  .autoText h2 {
    padding: 0 1em;
  }
}

/*? Cards iets meer bij elkaar zetten op contact pagina */
.phoneCard {
  height: 751px;
  /* margin-top: 10%; */
}

.emailCard {
  height: fit-content;
  margin-bottom: 10%;
}

.footer {
  /*? Kleur kan indien nodig aangepast worden ?*/
  /* background-color:#f0f0f0 !important; */
  /* background-color:whitesmoke !important; */
  background-color: azure !important;
  /* background-color:burlywood !important; */
  /* background-color:blanchedalmond !important; */
  /* background-color:#859098 !important; */
  /* background-color:beige !important; */
}

/* Ervoor zorgen dat de about us titel en logo's horizontaal naast elkaar blijven in portret modus*/
@media screen and (max-width: 768px) {
  #aboutUsContent {
    gap: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
  }

  .aboutImage {
    width: 50px;
    height: 50px;
  }

  .aboutUsHeaderText {
    font-size: medium;
    text-align: center;
  }
}

.what-service,
.why-service {
  cursor: default !important;
}

.why-service.inCardLink {
  cursor: pointer !important;
}

.imageBullet {
  width: 20px;
  height: 20px;
  margin-right: 1em;
  background-color: white;
  border-radius: 50%;
  padding: 0.094rem; /* 1.5px */
}

.photograph img {
  width: 2000px;
  height: 250px;
}

/*! =================== !*/
/*! IPad Responsiveness !*/
/*! =================== !*/

/*? IPad Mini - Portrait Mode ?*/
@media (width: 768px) {
  .welcome-hero-txt:not(.heroStartText) {
    padding-top: 25% !important;
  }

  .item-service.why-service,
  .item-service.what-service,
  .item-service.contact-service {
    height: max-content !important;
  }

  .item-service.why-service,
  .item-service.what-service,
  .item-service.contact-service {
    height: max-content !important;
  }

  .item-service#storage {
    height: max-content !important;
  }

  .item-service#desktop {
    height: max-content !important;
  }

  .item-service#email {
    height: max-content !important;
  }

  .item-service#machines {
    height: max-content !important;
  }

  .footer-menu .navbar-header {
    margin-top: 50px;
    margin-left: 5%;
  }

  .footer-social {
    margin-left: 170px;
  }

  .footer-menu .footer-menu-item {
    margin-left: 75%;
    margin-top: 5%;
  }

  .footer-menu .footer-menu-item .contactKnopFooter {
    margin-left: 10px !important;
  }

  .footer-menu .footer-menu-item li a {
    margin-bottom: 10px !important;
  }

  .photograph img {
    width: 2000px;
    height: auto;
  }

  .phoneCard,
  .emailCard {
    width: auto !important;
    height: max-content !important;
    justify-content: space-between !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }

  .contactItem {
    display: block !important;
  }

  .contactKnopNavbar {
    margin-left: -1em !important;
  }

  .contactItem h2,
  .contactItem p {
    text-align: center !important;
  }

  #footerLocAndMail {
    padding-top: 25px !important;
    flex-direction: row !important;
    justify-content: space-evenly !important;
  }

  .navbarFooter {
    margin-top: -145px !important;
  }

  .aboutPageCardDivWho {
    display: flex !important;
    flex-direction: column !important;
  }

  .aboutPageCardDivWhat {
    display: flex !important;
    flex-direction: column-reverse !important;
  }

  .aboutPageImageWho {
    width: auto !important;
    height: auto !important;
    object-fit: cover !important;
    margin-bottom: 15px !important;
  }

  .aboutPageImageWhat {
    width: auto !important;
    height: auto !important;
    object-fit: cover !important;
    margin-top: 15px !important;
  }

  .aboutPageTitleWho {
    margin-block: 25px !important;
    margin-left: 0px !important;
    font-size: 20px !important;
  }

  .textInAboutCardWho {
    margin-inline: 0px !important;
  }

  .who,
  .what {
    margin: 0em !important;
  }

  .googleLogoReviews {
    margin-left: 83% !important;
  }

  .dropdown-menu a {
    padding-left: unset !important;
  }
}

/*? IPad Mini - Landscape Mode / IPad Pro - Portrait mode ?*/
@media screen and (min-width: 1024px) and (max-width: 1080px) {
  .item-service {
    height: 490px !important;
  }

  .contactKnopNavbar {
    margin-left: 0em !important;
  }

  .dropdown-menu a {
    padding-left: unset !important;
  }

  .serviceComputers {
    margin-top: 57%;
    bottom: auto;
  }

  .serviceElektro {
    margin-top: 41%;
    bottom: auto;
  }

  .serviceRecycling,
  .serviceSocialMedia {
    margin-top: 25%;
    bottom: auto;
  }

  .servicePrinting {
    margin-top: 41%;
  }

  .serviceWebDesign {
    margin-top: -10%;
    margin-bottom: auto;
  }

  #computerPage .item-service {
    height: 500px !important;
    overflow: hidden !important;
  }

  #elektroPage .item-service {
    overflow: hidden !important;
  }

  #recycling .item-service {
    height: 600px !important;
    overflow: hidden !important;
  }

  #web-design .item-service {
    height: 600px !important;
    overflow: hidden !important;
  }

  #hostingPage .item-service {
    height: 600px !important;
    overflow: hidden !important;
  }

  #socialMediaPage .item-service {
    height: 510px !important;
    overflow: hidden !important;
  }
  /* 
  #cloud_ .container .row #email {
    height: 580px !important;
    overflow: hidden !important;
  }

  #cloud_ .container .row #machines {
    height: 580px !important;
    overflow: hidden !important;
  } */

  .photograph {
    margin-top: 50% !important;
    /* margin-bottom: 25%; */
  }

  .photograph img {
    width: 2000px;
    height: 200px;
  }

  .contactPage {
    margin-left: -4% !important;
  }

  /*todo: dit nog responsief maken*/
  .phoneCard,
  .emailCard {
    width: max-content !important;
    height: 740px !important;
  }

  /* .locationFooter {
    margin-top: 25px;
    margin-left: 34%;
  }

  .mailFooter {
    margin-top: 35px;
    margin-left: 34%;
  }  */

  #cloud_ .container .row.firstRow #email,
  #cloud_ .container .row.firstRow #storage {
    height: initial !important;
  }

  #cloud_ .container .row.secondRow #machines,
  #cloud_ .container .row.firstRow #machines {
    height: initial !important;
  }

  .googleLogoReviews {
    margin-left: 87% !important;
  }
}

/*? IPad Air - Landscape Mode ?*/
@media (width: 1180px) {
  .item-service {
    height: 490px !important;
  }

  .navbar-container {
    margin-inline: initial !important;
  }

  .cloudCard {
    overflow: scroll !important;
  }

  .serviceComputers {
    margin-top: 57%;
    bottom: auto;
  }

  .serviceElektro {
    margin-top: 41%;
    bottom: auto;
  }

  .serviceRecycling,
  .serviceSocialMedia {
    margin-top: 25%;
    bottom: auto;
  }

  .servicePrinting {
    margin-top: 41%;
  }

  .serviceWebDesign {
    margin-top: -10%;
    margin-bottom: auto;
  }

  #computerPage .item-service {
    height: 500px !important;
    overflow: hidden !important;
  }

  #elektroPage .item-service {
    overflow: hidden !important;
  }

  #recycling .item-service {
    height: 600px !important;
    overflow: hidden !important;
  }

  #web-design .item-service {
    height: 600px !important;
    overflow: hidden !important;
  }

  #hostingPage .item-service {
    height: 600px !important;
    overflow: hidden !important;
  }

  #socialMediaPage .item-service {
    height: 510px !important;
    overflow: hidden !important;
  }

  #cloud_ .container .row #email {
    height: 580px !important;
    overflow: hidden !important;
  }

  #cloud_ .container .row #email {
    height: 580px !important;
    overflow: hidden !important;
  }

  #cloud_ .container .row #machines {
    height: 580px !important;
    overflow: hidden !important;
  }

  #cloud_ .container .row.firstRow #email,
  #cloud_ .container .row.firstRow #storage {
    height: initial !important;
  }

  #cloud_ .container .row.secondRow #machines,
  #cloud_ .container .row.firstRow #machines {
    height: initial !important;
  }

  .photograph {
    margin-top: 50% !important;
    /* margin-bottom: 25%; */
  }

  .contactPage {
    margin-left: 2% !important;
  }

  .phoneCard,
  .emailCard {
    width: max-content !important;
    height: 740px !important;
  }

  .googleLogoReviews {
    margin-left: 89% !important;
  }
}

/*? Ipad Air - Portrait ?*/
@media screen and (min-width: 810px) and (max-width: 820px) {
  .item-service {
    height: 490px !important;
  }

  .item-service:not(.cloudCard) {
    overflow: hidden !important;
  }

  .contactKnopNavbar {
    margin-left: -1em !important;
  }

  .serviceComputers {
    margin-top: 60%;
    bottom: auto;
  }

  .serviceElektro {
    margin-top: 41%;
    bottom: auto;
  }

  .serviceSocialMedia {
    margin-top: 29%;
    bottom: auto;
  }

  .serviceRecycling {
    margin-top: 35%;
    bottom: auto;
  }

  .serviceHosting {
    margin-top: 48%;
  }

  .servicePrinting {
    margin-top: 41%;
  }

  .serviceWebDesign {
    margin-top: -8%;
    margin-bottom: auto;
  }

  .photograph {
    margin-top: 5% !important;
    margin-bottom: 5% !important;
    height: auto !important;
    /* margin-bottom: 25%; */
  }

  .cloudPageTitles {
    padding-top: 2.5em !important;
  }

  .photograph img {
    height: max-content !important;
  }

  .item-service.why-service,
  .item-service.what-service,
  .item-service.contact-service {
    height: max-content !important;
  }

  .item-service.why-service,
  .item-service.what-service,
  .item-service.contact-service {
    height: max-content !important;
  }

  .item-service#storage {
    height: max-content !important;
  }

  .item-service#desktop {
    height: max-content !important;
  }

  .item-service#email {
    height: max-content !important;
  }

  .item-service#machines {
    height: max-content !important;
  }

  .phoneCard,
  .emailCard {
    height: 740px !important;
    width: fit-content !important;
  }

  .contactPage {
    margin-left: -5% !important;
  }

  #footerLocAndMail {
    /* justify-content: space-evenly !important; */ /*? Eventueel kan hier de 'space-between' gebruikt worden om deze wat meer uit elkaar te zetten zoals bij de IPad Mini Portrait Mode ?*/
    justify-content: center !important;
  }

  .aboutPageCardDivWho {
    display: flex !important;
    flex-direction: column !important;
  }

  .aboutPageCardDivWhat {
    display: flex !important;
    flex-direction: column-reverse !important;
  }

  .aboutPageImageWho {
    width: auto !important;
    height: auto !important;
    object-fit: cover !important;
    margin-bottom: 15px !important;
  }

  .aboutPageImageWhat {
    width: auto !important;
    height: auto !important;
    object-fit: cover !important;
    margin-top: 15px !important;
  }

  .aboutPageTitleWho {
    margin-block: 25px !important;
    margin-left: 0px !important;
    font-size: 20px !important;
  }

  .textInAboutCardWho {
    margin-inline: 0px !important;
  }

  .who,
  .what {
    margin: 0em !important;
  }

  .googleLogoReviews {
    margin-left: 84% !important;
  }

  .dropdown-menu a {
    padding-left: unset !important;
  }
}

/*? IPad Pro - Landscape Mode ?*/
@media (width: 1366px) {
  .item-service {
    height: 490px !important;
  }

  .navbar-container {
    margin-inline: initial !important;
  }

  .serviceComputers {
    margin-top: 70%;
    bottom: auto;
  }

  .serviceElektro {
    margin-top: 69%;
    bottom: auto;
  }

  .serviceRecycling,
  .serviceSocialMedia {
    margin-top: 59%;
    bottom: auto;
  }

  .servicePrinting {
    margin-top: 59%;
  }

  .serviceWebDesign {
    margin-top: 45%;
    margin-bottom: auto;
  }

  .phoneCard,
  .emailCard {
    height: 740px !important;
    width: max-content !important;
  }

  .photograph {
    margin-top: 50% !important;
    /* margin-bottom: 25%; */
  }

  .googleLogoReviews {
    margin-left: 90% !important;
  }
}

@media screen and (min-width: 358px) and (max-width: 432px) and (orientation: portrait) {
  .phoneCard {
    height: fit-content !important;
    text-align: center !important;
  }

  .dropdown-menu a {
    padding-left: unset !important;
  }

  .phoneCard h2,
  .phoneCard p {
    text-align: center !important;
  }

  .contactItem {
    flex-direction: column !important;
  }

  .contactItem:nth-child(3) {
    margin-block: 15px !important;
  }

  .contactItem:last-child {
    margin-top: 15px !important;
  }

  .aboutPageCardDivWho {
    display: flex;
    flex-direction: column !important;
  }

  .aboutPageCardDivWhat {
    display: flex;
    flex-direction: column-reverse !important;
  }

  .aboutPageTitleWho {
    margin-block: 25px !important;
    margin-left: 0px !important;
    font-size: 20px !important;
  }

  .textInAboutCardWho {
    margin-inline: 0px !important;
  }

  .who,
  .what {
    margin: 0em !important;
  }
  .googleLogoReviews {
    margin-left: 68% !important;
  }
}

.aboutPageTitleWho {
  text-transform: uppercase;
  font-weight: bolder;
  margin-bottom: 25px;
  margin-left: 50px;
  font-size: 20px;
}

.aboutPageTitleWhat {
  text-transform: uppercase;
  font-weight: bolder;
  margin-bottom: 25px;
  font-size: 20px;
}

.aboutPageImageWho {
  width: 350px;
  height: auto;
  object-fit: cover;
  margin-right: 15px;
}

.aboutPageImageWhat {
  width: 350px;
  height: auto;
  object-fit: cover;
  margin-left: 15px !important;
}

.aboutUsCard {
  height: fit-content !important;
  cursor: default !important;
}

.aboutPageCardDivWho {
  display: flex;
  flex-direction: row;
}

.aboutPageCardDivWhat {
  display: flex;
  flex-direction: row-reverse;
}

.aboutPageWhatBoldText {
  font-weight: bold;
}

.servicesSumUp {
  padding-bottom: 5px;
}

.textInAboutCardWho {
  margin-inline: 50px;
}

.who,
.what {
  margin: 1em;
}

@media screen and (min-width: 358px) and (max-width: 432px) and (orientation: portrait) {
  #footerLocAndMail {
    margin-left: -2px;
  }

  .navbarFooter {
    margin-left: 2px;
  }
}

#footerLocAndMail a:hover p,
#footerLocAndMail a:hover svg,
#footerLocAndMail a:hover i {
  color: var(--hoverColor);
  fill: var(--hoverColor);
}