body {
    margin: 0;
    overflow: hidden;
    background-color: black;
    color: white;
    font-family: Arial, sans-serif;
}

/* navbar------------------------------------------------------------------------------------------------------------ */



header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  transition: transform 0.3s ease-in-out;
}

header.hidden {
  transform: translateY(-100%);
}


nav {
    display: flex; /* Aligne les éléments horizontalement */
    justify-content: space-around; /* Aligne les éléments à gauche */
    /* border:solid rgba(249, 235, 235, 0.207) 2px ; */
    /* Couleur de fond */
    padding: 15px 40px; /* Espacement interne */
}

nav a{
    position: relative;
    color: #999;
    text-decoration: none;
    font-size: 1.0em;
    z-index: 2;
    height: 75px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 30px;
    transition: 0.5s;
}

nav a :active{
    color: #222327;
}


.seo-h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
}

.menu-items{
  display: flex;
  justify-content: space-around;
}

input[type="checkbox"] {
  display: none;
}

@keyframes slideIn {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
/* nav a pour cyber -------------------------------------- */
.box {
  /* width: 150px; 
  height: 50px;  */
  
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 2px 4px hsl(0 0% 0% / 25%);
  animation: border-angle-rotate 2s infinite linear;
  border: 2px solid transparent;
  
}

.box.a {
  background: transparent; /* Fond transparent */
  border-image: conic-gradient(
    from var(--border-angle),
    oklch(100% 100% 0deg),
    oklch(100% 100% 45deg),
    oklch(100% 100% 90deg),
    oklch(100% 100% 135deg),
    oklch(100% 100% 180deg),
    oklch(100% 100% 225deg),
    oklch(100% 100% 270deg),
    oklch(100% 100% 315deg),
    oklch(100% 100% 360deg)
  ) 1;
  border-image-slice: 1;
}

@keyframes border-angle-rotate {
  from { --border-angle: 0deg; }
  to { --border-angle: 360deg; }
}

/** boilerplate **/

@property --border-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

/* nav a hover -------------------------------------------------------*/



a:hover{
  
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 2px 4px hsl(0 0% 0% / 25%);
  animation: border-angle-rotate 2s infinite linear;
  border: 2px solid transparent;
  background: transparent; /* Fond transparent */
  border-image: conic-gradient(
    from var(--border-angle),
    oklch(100% 100% 0deg),
    oklch(100% 100% 45deg),
    oklch(100% 100% 90deg),
    oklch(100% 100% 135deg),
    oklch(100% 100% 180deg),
    oklch(100% 100% 225deg),
    oklch(100% 100% 270deg),
    oklch(100% 100% 315deg),
    oklch(100% 100% 360deg)
  ) 1;
  border-image-slice: 1;
  padding-right: 20px;
}

@keyframes border-angle-rotate {
  from { --border-angle: 0deg; }
  to { --border-angle: 360deg; }
}

/** boilerplate **/

@property --border-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;

}

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

#menu {
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
    
  }

 /*  bouton *--------------------------------------------*/




 
/*-------------------------------------------  */
 .btn {
  position: relative;
  padding: 1.5rem 3rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.4s ease;
}


.hologram {
  border: 2px solid rgba(0, 255, 255, 0.5);
  background: rgba(0, 250, 250, 0.1);
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
  backdrop-filter: blur(5px);
}

.hologram span {
  position: relative;
  display: inline-block;
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
}

.hologram span::before,
.hologram span::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  opacity: 0;
  filter: blur(1px);
  transition: all 0.3s ease;
}

.hologram span::before {
  top: -2px;
  color: #ff00ff;
  transform: translateX(0);
  animation: glitch 2s infinite;
}

.hologram span::after {
  bottom: -2px;
  color: #00ffff;
  transform: translateX(0);
  animation: glitch 2s infinite reverse;
}

.scan-line {
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(0, 255, 255, 0.8),
    transparent
  );
  top: 0;
  animation: scan 2s linear infinite;
  filter: blur(1px);
}


/* btn detresse rouge-------------------------------------------------------------------------------------------------------------  */

.btn {
  position: relative;
  padding: 1.5rem 3rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.4s ease;
}

.hologram-rouge {
  border: 2px solid rgba(255, 0, 0, 0.5);
  background: rgba(255, 0, 0, 0.1);
  box-shadow: 0 0 15px rgba(255, 0, 0, 0.3);
  backdrop-filter: blur(5px);
}

.hologram-rouge span {
  position: relative;
  display: inline-block;
  text-shadow: 0 0 8px rgba(255, 0, 0, 0.5);
}

.hologram-rouge span::before,
.hologram-rouge span::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  opacity: 0;
  filter: blur(1px);
  transition: all 0.3s ease;
}

.hologram-rouge span::before {
  top: -2px;
  color: #ff4500;
  transform: translateX(0);
  animation: glitch 2s infinite;
}

.hologram-rouge span::after {
  bottom: -2px;
  color: #ff6347;
  transform: translateX(0);
  animation: glitch 2s infinite reverse;
}

.scan-line-rouge {
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 0, 0, 0.8),
    transparent
  );
  top: 0;
  animation: scan 2s linear infinite;
  filter: blur(1px);
}

/* animation btn  */
@keyframes glitch {
  0%, 100% { transform: translateX(0); opacity: 0.3; }
  20% { transform: translateX(-5px); opacity: 0.5; }
  40% { transform: translateX(5px); opacity: 0.7; }
  60% { transform: translateX(-3px); opacity: 0.5; }
  80% { transform: translateX(3px); opacity: 0.3; }
}

@keyframes scan {
  0% { top: -10%; }
  100% { top: 110%; }
}

/* btn soc  ------------------------------------------------------------------------------------------------------------------*/

.hologram-soc {
  border: 2px solid rgba(0, 255, 0, 0.5);
  background: rgba(0, 255, 0, 0.1);
  box-shadow: 0 0 15px rgba(0, 255, 0, 0.3);
  backdrop-filter: blur(5px);
}

.hologram-soc span {
  position: relative;
  display: inline-block;
  text-shadow: 0 0 8px rgba(0, 255, 0, 0.5);
}

.hologram-soc span::before,
.hologram-soc span::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  opacity: 0;
  filter: blur(1px);
  transition: all 0.3s ease;
}

.hologram-soc span::before {
  top: -2px;
  color: #32cd32;
  transform: translateX(0);
  animation: glitch 2s infinite;
}

.hologram-soc span::after {
  bottom: -2px;
  color: #7cfc00;
  transform: translateX(0);
  animation: glitch 2s infinite reverse;
}

.scan-line-soc {
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(0, 255, 0, 0.8),
    transparent
  );
  top: 0;
  animation: scan 2s linear infinite;
  filter: blur(1px);
}

/* animation btn  */
@keyframes glitch {
  0%, 100% { transform: translateX(0); opacity: 0.3; }
  20% { transform: translateX(-5px); opacity: 0.5; }
  40% { transform: translateX(5px); opacity: 0.7; }
  60% { transform: translateX(-3px); opacity: 0.5; }
  80% { transform: translateX(3px); opacity: 0.3; }
}

@keyframes scan {
  0% { top: -10%; }
  100% { top: 110%; }
}

/* btn penteste --------------------------------------------------------------------------------------------------- */


.hologram-pentest {
  border: 2px solid rgba(128, 0, 128, 0.5);
  background: rgba(128, 0, 128, 0.1);
  box-shadow: 0 0 15px rgba(128, 0, 128, 0.3);
  backdrop-filter: blur(5px);
}

.hologram-pentest span {
  position: relative;
  display: inline-block;
  text-shadow: 0 0 8px rgba(128, 0, 128, 0.5);
}

.hologram-pentest span::before,
.hologram-pentest span::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  opacity: 0;
  filter: blur(1px);
  transition: all 0.3s ease;
}

.hologram-pentest span::before {
  top: -2px;
  color: #dda0dd;
  transform: translateX(0);
  animation: glitch 2s infinite;
}

.hologram-pentest span::after {
  bottom: -2px;
  color: #ee82ee;
  transform: translateX(0);
  animation: glitch 2s infinite reverse;
}

.scan-line-pentest {
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(128, 0, 128, 0.8),
    transparent
  );
  top: 0;
  animation: scan 2s linear infinite;
  filter: blur(1px);
}

/* animation btn  -----------------------------------------------------------------------------------------------*/
@keyframes glitch {
  0%, 100% { transform: translateX(0); opacity: 0.3; }
  20% { transform: translateX(-5px); opacity: 0.5; }
  40% { transform: translateX(5px); opacity: 0.7; }
  60% { transform: translateX(-3px); opacity: 0.5; }
  80% { transform: translateX(3px); opacity: 0.3; }
}

@keyframes scan {
  0% { top: -10%; }
  100% { top: 110%; }
}



/* btn audit --------------------------------------------------------------------------------------------------- ---------------------*/

.hologram-audit {
  border: 2px solid rgba(0, 0, 139, 0.5);
  background: rgba(0, 0, 139, 0.1);
  box-shadow: 0 0 15px rgba(0, 0, 139, 0.3);
  backdrop-filter: blur(5px);
}

.hologram-audit span {
  position: relative;
  display: inline-block;
  text-shadow: 0 0 8px rgba(0, 0, 139, 0.5);
}

.hologram-audit span::before,
.hologram-audit span::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  opacity: 0;
  filter: blur(1px);
  transition: all 0.3s ease;
}

.hologram-audit span::before {
  top: -2px;
  color: #4682b4;
  transform: translateX(0);
  animation: glitch 2s infinite;
}

.hologram-audit span::after {
  bottom: -2px;
  color: #1e90ff;
  transform: translateX(0);
  animation: glitch 2s infinite reverse;
}

.scan-line-audit {
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(0, 0, 139, 0.8),
    transparent
  );
  top: 0;
  animation: scan 2s linear infinite;
  filter: blur(1px);
}

/* btn blockchaine ------------------------------------------------------------------------------------------------------ */



.hologram-blockchain {
  border: 2px solid rgba(0, 255, 255, 0.5);
  background: rgba(0, 255, 255, 0.1);
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
  backdrop-filter: blur(5px);
}

.hologram-blockchain span {
  position: relative;
  display: inline-block;
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
}

.hologram-blockchain span::before,
.hologram-blockchain span::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  opacity: 0;
  filter: blur(1px);
  transition: all 0.3s ease;
}

.hologram-blockchain span::before {
  top: -2px;
  color: #00bfff;
  transform: translateX(0);
  animation: glitch 2s infinite;
}

.hologram-blockchain span::after {
  bottom: -2px;
  color: #1e90ff;
  transform: translateX(0);
  animation: glitch 2s infinite reverse;
}

.scan-line-blockchain {
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(0, 255, 255, 0.8),
    transparent
  );
  top: 0;
  animation: scan 2s linear infinite;
  filter: blur(1px);
}

/* animation btn  */
@keyframes glitch {
  0%, 100% { transform: translateX(0); opacity: 0.3; }
  20% { transform: translateX(-5px); opacity: 0.5; }
  40% { transform: translateX(5px); opacity: 0.7; }
  60% { transform: translateX(-3px); opacity: 0.5; }
  80% { transform: translateX(3px); opacity: 0.3; }
}

@keyframes scan {
  0% { top: -10%; }
  100% { top: 110%; }
}









/* animation btn  */
@keyframes glitch {
  0%, 100% { transform: translateX(0); opacity: 0.3; }
  20% { transform: translateX(-5px); opacity: 0.5; }
  40% { transform: translateX(5px); opacity: 0.7; }
  60% { transform: translateX(-3px); opacity: 0.5; }
  80% { transform: translateX(3px); opacity: 0.3; }
}

@keyframes scan {
  0% { top: -10%; }
  100% { top: 110%; }
}




/* annimation fon des btn  hover           --------------------------------------------------- ,-------------------- ------------------ */

.glow-on-hover {
  width: 150px;
  height: 50px;
  display: flex;
  border: none;
  outline: none;
  color: #fff;
  background: #111;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 10px;
  overflow: hidden; /* Important to hide overflow */
 }  

.glow-on-hover:before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  animation: glowing 20s linear infinite;
  opacity: 0;
  transition: opacity .3s ease-in-out;
  border-radius: 10px;
}

.glow-on-hover:active {
  color: #000;
}

.glow-on-hover:active:after {
  background: transparent;
}

.glow-on-hover:hover:before {
  opacity: 1;
}

.glow-on-hover:after {
  z-index: -1;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: #111;
  left: 0;
  top: 0;
  border-radius: 10px;
}

@keyframes glowing {
  0% { background-position: 0 0; }
  50% { background-position: 400% 0; }
  100% { background-position: 0 0; }
} 

 



/* animation btn  */

@keyframes glitch {
  0%, 100% { transform: translateX(0); opacity: 0.3; }
  20% { transform: translateX(-5px); opacity: 0.5; }
  40% { transform: translateX(5px); opacity: 0.7; }
  60% { transform: translateX(-3px); opacity: 0.5; }
  80% { transform: translateX(3px); opacity: 0.3; }
}

@keyframes scan {
  0% { top: -10%; }
  100% { top: 110%; }
}


  /* category */
  
  .category {
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 5px;
    padding: 10px 15px;
    cursor: pointer;
    overflow: hidden; /* Important to hide overflow */
    position: relative; /* Needed for positioning pseudo-elements */
  }
  
  /*  */
  
  #cards-container {
    position: fixed;
    margin: 10px;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
    z-index: 20;
  }
  
  .hidden {
    display: none;
  }
  
  #close-cards {
    align-self: flex-end;
    background: none;
    border: none;
    color: white;
    font-size: 16px;
    cursor: pointer;
  }
  #cards {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap; /* Pour s'assurer que les cartes se réorganisent bien sur différents écrans */
  }
  
  :root {
    --card-height: 300px;
    --card-width: 250px;
  }
  
  .card {
    background: rgba(255, 255, 255, 0.8); /* Fond blanc avec transparence */
    width: var(--card-width);
    height: var(--card-height);
    padding: 10px;
    margin: 10px;
    position: relative;
    border-radius: 10px;
    justify-content: center;
    align-items: center;
    text-align: center;
    display: flex;
    flex-direction: column;
    font-size: 1em;
    cursor: pointer;
    font-family: 'Arial', sans-serif;
    transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre légère */
  }
  
  .card:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 30px rgba(88, 199, 250, 0.5);
    background: rgba(255, 255, 255, 1); /* Change le fond à blanc opaque au survol */
  }
  
  .card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(0, 0, 0, 0.1), transparent);
    border-radius: 10px;
    opacity: 0;
    transition: opacity 0.5s;
  }
  
  .card:hover::before {
    opacity: 1;
  }
  
  .card h3 {
    margin-bottom: 15px;
    color: #333;
    font-weight: bold;
    transition: color 0.3s;
  }
  
  .card:hover h3 {
    color: #58c7fa; /* Change la couleur du titre au survol */
  }
  
  .card p {
    color: #666;
    line-height: 1.5;
    transition: color 0.3s;
  }
  
  .card:hover p {
    color: #333; /* Change la couleur du texte au survol */
  }
  
  

  /* media query -----------------------------------------------------------------*/


/* ......../ media query 968 -------------------------------------------------------------------------------------------- /.......... */

@media (max-width: 968px) {
  
  .navbar {
    opacity: 0.95;
  }

  .navbar-container input[type="checkbox"],
  .navbar-container .hamburger-lines {
    display: block;
    
  }

  .navbar-container {
    display: block;
    position: relative;
    height: 64px;
   
  }

  .navbar-container input[type="checkbox"] {
    position: absolute;
    display: block;
    height: 32px;
    width: 30px;
    top: 20px;
    left: 20px;
    z-index: 5;
    opacity: 0;
  }

  .navbar-container .hamburger-lines {
    display: block;
    height: 23px;
    width: 35px;
    position: absolute;
    top: 17px;
    left: 20px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    }

  .navbar-container .hamburger-lines .line {
    display: block;
    height: 4px;
    width: 100%;
    border-radius: 10px;
    background: #333;
    
  }

  .navbar-container .hamburger-lines .line1 {
    transform-origin: 0% 0%;
    transition: transform 0.4s ease-in-out;
  }

  .navbar-container .hamburger-lines .line2 {
    transition: transform 0.2s ease-in-out;
  }

  .navbar-container .hamburger-lines .line3 {
    transform-origin: 0% 100%;
    transition: transform 0.4s ease-in-out;
  }

  .navbar .menu-items {
    padding-top: 0px;
    /* background: #ffffff00; */
    height: 100vh;
    width: 1000%;
    top: -100px;
    transform: translate(-150%);
    display: flex;
    flex-direction: column;
    padding-left: 50px;
    transition: transform 0.5s ease-in-out;
    /* box-shadow: 5px 0px 10px 0px #aaa; */
    background-color: aqua;
  }

  .navbar .menu-items li {
    margin-bottom: 1.5rem;
    font-size: 1.0rem;
    font-weight: 200;
   
  }


  .navbar-container input[type="checkbox"]:checked ~ .menu-items {
    transform: translateX(0);
  }

  .navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
    transform: rotate(35deg);
  }

  .navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
    transform: scaleY(0);
  }

  .navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
    transform: rotate(-35deg);
  }


/* ----------------------------------------- */

/* nav a pour cyber -------------------------------------- */
.box {
    /* width: 150px; 
    height: 50px;  */
    
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 2px 4px hsl(0 0% 0% / 25%);
    animation: border-angle-rotate 2s infinite linear;
    border: 2px solid transparent;
    
  }
  
  .box.a {
    background: transparent; /* Fond transparent */
    border-image: conic-gradient(
      from var(--border-angle),
      oklch(100% 100% 0deg),
      oklch(100% 100% 45deg),
      oklch(100% 100% 90deg),
      oklch(100% 100% 135deg),
      oklch(100% 100% 180deg),
      oklch(100% 100% 225deg),
      oklch(100% 100% 270deg),
      oklch(100% 100% 315deg),
      oklch(100% 100% 360deg)
    ) 1;
    border-image-slice: 1;
  }
  
  @keyframes border-angle-rotate {
    from { --border-angle: 0deg; }
    to { --border-angle: 360deg; }
  }
  
  /** boilerplate **/
  
  @property --border-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
  }
  
  /* nav a hover -------------------------------------------------------*/
  
  
  
  a:hover{
    
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 2px 4px hsl(0 0% 0% / 25%);
    animation: border-angle-rotate 2s infinite linear;
    border: 2px solid transparent;
    background: transparent; /* Fond transparent */
    border-image: conic-gradient(
      from var(--border-angle),
      oklch(100% 100% 0deg),
      oklch(100% 100% 45deg),
      oklch(100% 100% 90deg),
      oklch(100% 100% 135deg),
      oklch(100% 100% 180deg),
      oklch(100% 100% 225deg),
      oklch(100% 100% 270deg),
      oklch(100% 100% 315deg),
      oklch(100% 100% 360deg)
    ) 1;
    border-image-slice: 1;
    padding-right: 20px;
  }
  
  @keyframes border-angle-rotate {
    from { --border-angle: 0deg; }
    to { --border-angle: 360deg; }
  }
  
  /** boilerplate **/
  
  @property --border-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
  
  }


nav a{
  
    position: relative;
    color: #999;
    text-decoration: none;
    font-size: 0.7em;
    z-index: 2;
    height: 75px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 30px;
    transition: 0.5s;
   
}

 #menu{
  flex-direction: column;
 }

}


/*  media query  500px           ---------------------------------------                   ---+------------------------------------------- */

@media (max-width: 500px) {
  html {
    font-size: 65%;
  }

  .navbar .menu-items li{
      font-size: 1.6rem;
  }

  .testimonial-container {
    flex-direction: column;
    text-align: center;
  }

  .food-menu-container img {
    margin: auto;
  }

  .food-menu-item {
    flex-direction: column;
    text-align: center;
  }

  .form-container {
    width: 90%;
  }

  .contact-container {
    display: flex;
    flex-direction: column;
  }

  .contact-img {
    width: 90%;
    margin: 3rem auto;
  }

  .logo {
    position: absolute;
    top: 06px;
    right: 15px;
    font-size: 3rem;
  }

  .navbar .menu-items li {
    margin-bottom: 2.5rem;
    font-size: 1.8rem;
    font-weight: 500;
  }
}

/*  media query  769px           ---------------------------------------                   ---+------------------------------------------- */

@media (min-width: 769px) and (max-width: 1200px) {
  .img-container h3 {
    font-size: 1.5rem;
  }

  .img-container .btn {
    font-size: 0.7rem;
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  .showcase-area {
    height: 50vmax;
  }
}