@tailwind base;
@tailwind components;
@tailwind utilities;

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

*{
    font-family: "Roboto", system-ui;;
}

html {
  scroll-behavior: smooth;
}



.btn-primary {
  @apply bg-top_Header_color p-3 font-medium w-fit rounded-md text-white px-8 text-sm hover:bg-hover_color duration-200 ease-in-out
}
.container-fluid
{
  width: 85% ;
  margin: auto;
}

@media screen and (max-width: 768px) {
  .container-fluid
  {
    width: 100% ;
    margin: auto;
  }
}

 /* Hide and show the mobile menu with animation */
 #mobile-menu {
    width: 0;
  }
  #mobile-menu.open {
    width: 50%;
  }
  

  /* ==== banner section ===  */
  .banner_bg
  {
    background: url('./images/header-2s.jpg') center center no-repeat;
    background-size: cover;
  }
/* ==== testimonail section ===  */

/* Custom animation */
.slide-down {
  animation: slideDown 0.5s ease forwards;
}

.slide-up {
  animation: slideUp 0.5s ease forwards;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}

/* ==== contact popup form  */
/* Custom animation */
.fade-in {
  animation: fadeIn 0.5s ease forwards;
}

.fade-out {
  animation: fadeOut 0.5s ease forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* === general english ===  */
.general_english
{
  background: url(./images/IMG_0158-scaled.jpg) center center no-repeat;
  background-size: cover;
  background-attachment: fixed;
  position: relative;
  z-index: 1;
}

.general_english::after{
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.541);
  z-index: -1;
}

/* ==== about us ===  */
.about-us
{
  background: url('./images/about-us.jpg') center center no-repeat;
  background-size: cover;
  background-attachment: fixed;
  position: relative;
  z-index: 1;
}

.about-us::after{
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.541);
  z-index: -1;
}

@layer utilities {
  .paused {
    animation-play-state: paused;
  }
}