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

@font-face {
  font-family: "SNPro";
  /*src: url(/fonts/GothamDisplay-Regular.ttf) format("truetype");*/
  src: url(/fonts/SNPro-Medium.otf) format("truetype");
}

@font-face {
  font-family: "Header";
  /* src: url(/fonts/GothamDisplay-Bold.ttf) format("truetype");*/
  src: url(/fonts/SNPro-Medium.otf) format("truetype");
}

@font-face {
  font-family: "Footer";
  /* src: url(/fonts/GothamDisplay-Bold.ttf) format("truetype");*/
  src: url(/fonts/SNPro-Light.otf) format("truetype");
}

body {
  font-family: "SNPro";
  /* @apply text-info; */ /* Commented out the @apply directive for now */
  /* You can use Tailwind CSS classes directly, for example: */
}
html {
  scroll-behavior: smooth;
}

body {
  scroll-behavior: smooth;
  overflow-x: hidden;
}
/* class button */
.btn-type-1 {
  border-radius: 50px;
  background: linear-gradient(to right, #ec2029 50%, #f7ff00 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  transition: all 0.5s ease-out;
}

.btn-type-1:hover {
  background-position: left bottom;
}

.text-type-1 {
  color: black;
  transition: all 0.6s ease-out;
}
.text-article {
  color: black;
  transition: all 0.6s ease-out;
}

.text-type-1:hover {
  color: white;
}

/* Newsletter Section  */

.newsletter-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}

.newsletter-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
}

.newsletter-form {
  display: flex;
  background-color: white;
  padding: 5px;
  border-radius: 40px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.newsletter-form input {
  border: none;
  padding: 10px 20px;
  border-radius: 40px;
  flex: 2;
  font-size: 16px;
  color: #8e8e8e;
  outline: none;
}

.newsletter-form button {
  background-color: #b83529;
  color: white;
  border: none;
  padding: 20px 20px;
  border-radius: 50px;
  cursor: pointer;
  font-size: 16px;
  margin-left: 10px;
}

.newsletter-form button:hover {
  background-color: #a02d22;
}

.newsletter-form input::placeholder {
  color: #b8b8b8;
  font-size: 16px;
}
/* Newsletter Section */

.image-grid-section {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.image-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}

.image-item {
  flex: 1;
}

.social-connect {
  text-align: left;
}

.social-connect h3 {
  margin-bottom: 10px;
}

.social-buttons {
  display: flex;
  gap: 10px;
}

.social-buttons button {
  border: none;
  padding: 7px 40px;
  font-size: 16px;
  cursor: pointer;
}
