@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  background-color:  #0C0C0C;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align:center;
}
.waviy {
  position: relative;
  -webkit-box-reflect: below -64px linear-gradient(transparent, rgba(0,0,0,.2));
  font-size: 4em;
}
.waviy span {
  font-family: 'Alfa Slab One', cursive;
  position: relative;
  display: inline-block;
  color: #fff;
  text-transform: uppercase;
  animation: waviy 2.5s infinite;
  animation-delay: calc(.2s * var(--i));
}

.contact {
  margin-top: 3em;
}

.contact1 {
  margin-top: 0em; /* Reduced margin to move up */
}

.contact2 {
  margin-top: 0em; /* Reduced margin to move up */
}

.contactext {
  font-family: 'Alfa Slab One', cursive;
  position: relative;
  display: inline-block;
  color: #fff;
  text-transform: uppercase;
  font-size: 1.5em;
  text-decoration: none;  
}

.contactext1 {
  font-family: "Tajawal", sans-serif;
  position: relative;
  display: inline-block;
  color: #fff;    
  font-size: 1.5em;
  text-decoration: none;
  margin-top: -0.5em;
}
.contactext2 {
    font-family: 'Alfa Slab One', cursive;
    position: relative;
    display: inline-block;
    color: #ffffff;
    text-transform: uppercase;
    font-size: 1em;
    text-decoration: none;  
  }
.email {
  margin-top: 0.5em; /* Reduced margin to decrease space */
  text-decoration: none;
}

a, a:visited, a:hover, a:active, a:focus {
  text-decoration: none; /* Removes underline from links */
  outline: none; /* Removes the outline that appears on click or focus */
}

.arrow {
    width: 1.5em;
    margin-top: 3em;
    display: inline-block;
  animation: upDown 2s infinite; /* Infinite loop of up-down animation */
}

.custom-button img {
  width: 2em;
  height: auto;
  transition: opacity 0.3s ease-in-out; /* Smooth transition effect */
}

.custom-hover:hover img {
  content: url('img/pdfdownloadblack.png'); /* Change the image on hover */
  opacity: 1; /* Ensure full opacity when hovering */
}
.custom-hover2:hover img {
  content: url('img/pdfdownloadblack.png'); /* Change the image on hover */
  opacity: 1; /* Ensure full opacity when hovering */
}
.custom-hover3:hover img {
  content: url('img/pdfdownloadblack.png'); /* Change the image on hover */
  opacity: 1; /* Ensure full opacity when hovering */
}
.custom-hover:hover img {
  content: url('img/pdfdownloadblack.png'); /* Change the image on hover */
  opacity: 1; /* Ensure full opacity when hovering */
}
@keyframes upDown {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-20px); /* Moves the arrow up by 20px */
    }
    100% {
      transform: translateY(0); /* Moves it back down */
  }
  }
.custom-button {
    display: inline-block;
    padding: 0.5em;
    margin: 0.5em;
    font-family: 'Alfa Slab One', cursive;
    font-size: 1.2em;
    color: white;
    background-color: #028D73;
    border: 2px solid #028D73;
    border-radius: 25px; /* Smooth rounded corners */
    text-decoration: none;
    transition: background-color 0.3s ease, border-color 0.3s ease;
  }
  
  /* Hover effect */
  .custom-button:hover {
    background-color: transparent; /* Changes the background on hover */
    border-color: white; /* Changes the border to white on hover */
    color: white; /* Keeps the text white */
  }

  .button-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.7em; /* Adds space between the buttons */
    margin-top: 2.4em; /* Adjust this for spacing from other content */
}
.button-rowAR {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3.2em; /* Adds space between the buttons */
  margin-top: 2em; /* Adjust this for spacing from other content */
}
.contact3 img, .contact4 img {
    width: 2em;
    height: auto;
}

.custom-button img {
    width: 2em;
    height: auto;
}

.contact2, .contact1 {
    display: inline-block;
}


body {
    font-size: calc(1vw + 1vh + .5vmin); /* Adjust based on your design */
  }
  
  .waviy span {
    font-size: calc(1.5vw + 1.5vh + .5vmin); /* Responsive font size */
  }
  
  .contactext {
    font-size: calc(1.15vw + 1.15vh + .5vmin); /* Responsive font size */
  }

@keyframes waviy {
  0%,40%,100% {
    transform: translateY(0)
  }
  20% {
    transform: translateY(-20px)
  }
}

.logoimg {
  width: 40%;
  margin-bottom: 0; /* Adjust this value to reduce space */
}

@media only screen and (max-width: 768px) {
  .contact {
    font-size: 1em;
    width: 90%;
    margin: 0 auto;
    margin-top: 8em;
  }
  .contact1 {
    margin-top: 0em; /* Reduced margin to move up */
  }
  .contactext1 {
    margin: 0em;
  }
  .button-rowAR {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5em; /* Adds space between the buttons */
    margin-top: 2em; /* Adjust this for spacing from other content */
  }
} 

@media only screen and (max-width: 768px) {
  .waviy {
    font-size: 2em;
    margin: 0 auto;
  }

  .logoimg {
    width: 80%;
    margin-bottom: 3em;
  }
  
body {
  font-size: calc(1.5vw + 1.5vh + .5vmin); /* Adjust based on your design */
}

.waviy span {
  font-size: calc(1.85vw + 1.85vh + .5vmin); /* Responsive font size */
}

.contactext {
  font-size: calc(2.15vw + 1.25vh + .5vmin); /* Responsive font size */
}
}
/* Example of using max-width for a container */
.main-content {
  max-width: 1200px; /* Max width of the main content */
  margin: auto; /* Center it */
  padding: 1em; /* Add some padding */
}

@media only screen and (max-width: 480px) {
  /* Adjustments for smaller devices */
  .waviy {
    font-size: 12vw; /* Smaller font size on very small devices */
    -webkit-box-reflect: below -20px linear-gradient(transparent, rgba(0,0,0,.2));
  }
  
  .logoimg {
    width: 90%; /* Larger relative width on small screens */
  }

  .contact {
    margin-top: 5em; /* Reduced spacing */
    font-size: 5vw; /* Adjust font size for smaller screens */ 
  }
}

@media only screen and (max-width: 480px) {
    
    .contactext1 {
        font-size: calc(4vw + 1vh); /* Arabic text adjustment for very small screens */
    }

    .contactext {
        font-size: calc(2.5vw + 1vh); /* English text adjustment for very small screens */
    }

    .button-row {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 1.5em; /* Adds space between the buttons */
      margin-top: 2em; /* Adjust this for spacing from other content */
  }

}
@media only screen and (max-width: 768px) {
    
 
  .contactext {
      font-size: calc(2.15vw + 1vh); /* Responsive English text for smaller screens */
  }
}

/* Custom button styling */
.custom-button {
  display: inline-block;
  padding: 0.5em;
  margin: 0.5em;
  font-family: 'Alfa Slab One', cursive;

  color: white;
  background-color: #028D73;
  border: 2px solid #028D73;
  border-radius: 25px; /* Smooth rounded corners */
  text-decoration: none;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  white-space: nowrap; /* Prevent line breaks between words */
}

/* Style for text inside the Company Profile button */
.contactext {
  font-family: 'Alfa Slab One', cursive;
  color: #fff;
  font-size: calc(1.2vw + 0.5vh); /* Responsive text size for English text */
  white-space: nowrap; /* Prevent line breaks between words */
}

/* Responsive scaling for smaller devices */
@media only screen and (max-width: 768px) {
  .custom-button {
      white-space: normal; /* Allow line breaks if space is limited */
      text-align: center; /* Center the text if it breaks to the next line */
  }

  .contactext {
      font-size: calc(1.5vw + 0.5vh); /* Responsive English text for smaller screens */
      white-space: normal; /* Allow the text to stack vertically */
      text-align: center; /* Center the text when it stacks */
  }
}

/* Very small screens (phones) */
@media only screen and (max-width: 480px) {
  .custom-button {
      white-space: normal; /* Allow line breaks if space is limited */
      text-align: center; /* Center the text if it breaks to the next line */
  }
  
  .contactext {
      font-size: calc(2.5vw + 0.5vh); /* English text adjustment for very small screens */
      white-space: normal; /* Allow the text to stack vertically */
      text-align: center; /* Center the text when it stacks */
  }
}


/* Styling for the button */
.custom-button {
  display: inline-block;
  padding: 0.5em;
  margin: 0.5em;
  text-decoration: none;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Default image */
.hover-image {
  width: 2em;
  height: auto;
  transition: opacity 0.3s ease-in-out; /* Smooth transition effect */
}

/* Hover effect to switch images */
.hover-image:hover {
  content: url('pdfdownload-hover.png'); /* Change the image on hover */
  opacity: 1; /* Ensure full opacity when hovering */
}

/* Container for the buttons */
.button-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
  width: 100%;
  max-width: 350px;
  margin-left: auto;
  margin-right: auto;
}

/* Main button style */
.main-button {
  background-color: #0C7962; 
  color: white;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  border-radius: 30px; 
  width: 100%;
  height: 60px;
  box-shadow: 0 2px 12px rgba(0, 98, 65, 0.8);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.main-button:hover {
  background-color: black;
  color: #0C7962;
}

/* Icon inside the main button */
.main-button .icon {
  width: 28px; 
  transition: fill 0.3s ease;
  fill: #ffffff; 
  margin-left: 20px;
}

.main-button:hover .icon {
  filter: invert(26%) sepia(58%) saturate(353%) hue-rotate(120deg) brightness(70%) contrast(91%);
}

/* Download button style */
.icon-button {
  border: none;
  padding: 5px;
  border-radius: 50%;
  margin-left: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: auto;
  flex-shrink: 0;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.icon-button:hover .icon {
  transition: 0.4s ease;
  transform: scale(1.33);
  filter: invert(26%) sepia(58%) saturate(353%) hue-rotate(120deg) brightness(70%) contrast(91%);
}

/* Icon styling for the download button */
.icon {
  width: 24px; 
  transition: fill 0.4s ease;
}

/* Line separator between text and icon */
.line-separator {
  height: 100%;
  width: 2px;
  background-color: white;
  transition: background-color 0.3s ease;
  align-self: stretch;
}

.main-button:hover .line-separator {
  background-color: #0C7962;
}

/* Arabic and English text styling */
.arabic-text{
  font-family: "Tajawal", sans-serif;
  font-size: 24px;
  white-space: nowrap;
  padding: 10px 36px;
  display: flex;
  align-items: center;
  font-weight: 500;
}

.english-text{
  font-family: "Tajawal", sans-serif;
  font-size: 24px;
  white-space: nowrap;
  padding: 10px 15px;
  display: flex;
  align-items: center;
  font-weight: 500;
}

span{
  display: block;
  height: 80%;
}
@media (max-width: 768px) {
  .main-button {  
      width: 100%;
      font-size: 14px;
      height: 60px;
  }

  .icon-button {
      width: 35px;
  }

  .icon {
      width: 24px;
  }
}
@media only screen and (max-width: 768px) {
  /* Adjust Coming Soon text positioning */
  .waviy {
    font-size: 2.5em;  /* Make the font slightly bigger on smaller screens */
    margin-bottom: 2em;  /* Add more space below the text */
  }

  /* Adjust button-row positioning */
  .button-row {
    margin-top: 2em; /* Center buttons more vertically */
  }

  /* Contact section at the bottom */
  .contact {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding-bottom: 1em; /* Add space from the bottom */
  }
  
  /* Move Coming Soon text higher */
  body {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Align content to the top */
    height: 100vh; /* Full screen height */
  }

  main {
    flex-grow: 1; /* Ensure main content takes up available space */
  }
}


/* Responsive text alignment fix for Safari and Android */
@media screen and (-webkit-min-device-pixel-ratio:0), screen and (max-width: 768px) {
  .main-button span {
      line-height: 1.3; /* Fix vertical alignment */
      padding-top: 0.3em; /* Fine-tune text positioning */
      text-align: center;
  }

  .english-text{
    font-size: 1.9em; /* Adjust font size for mobile */
 
  }

  .arabic-text{
    font-size: 2em; /* Adjust font size for mobile */
    
  }
 
}

@media screen and (min-width: 768px) {
  .english-text{
    font-size: 0.8em; /* Adjust font size for mobile */
    
  }

  .arabic-text{
    font-size: 0.825em; /* Adjust font size for mobile */
  }
}

@media only screen and (max-width: 768px) {
  .arabic-text{
    padding: 10px 36px 0px 36px
}
  .english-text{
    padding: 10px 15px 0px 15px
}
}