@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@100;200;300;400;500;600;700;800;900&family=Marcellus&display=swap');

:root {
  /* Primary Colors */
  --raffaut-yellow: #FFB238;
  --primary-gray: #191D1D;
  --darker-gray: #131616;
  --lighter-gray: #2C2C2C;

  /* Additional Colors (if needed) */
  --accent-color: #007BFF; /* Adjust as per your design */
  --success-color: #28A745;
  --error-color: #DC3545;
}


/* Reset Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Apply a border-box box model to all elements */
html {
  box-sizing: border-box;
}

/* Typography defaults */
body {
  font-family: 'Kanit', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-size: 16px;
  line-height: 1.6;
  color: #fff;
  font-weight: 400;
  background-color: var(--primary-gray);
}

/* Links */
a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Lists 
ul, ol {
  margin-bottom: 20px;
} */

/* Form Elements */
input, textarea, button {
  font-size: 16px;
}

ul, ol, li{
  list-style-type: none;
}

/* Remove default button styling */
button, input[type="button"], input[type="submit"], input[type="reset"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  outline: none;
  background: none;
  cursor: pointer;
  /* Additional styling as needed */
}

/* Example: Add a simple border and padding to the reset buttons */
button, input[type="button"], input[type="submit"], input[type="reset"] {
  border: 1px solid #ccc;
  padding: 5px 10px;
}


#hero{
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 600px;
}

nav{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: auto;
  max-width: 1100px;
  padding: 2rem 0;
}

.menu ul,
.menu{
  display: flex;
  align-items: center;
  text-transform: lowercase;
}

.menu li{
  margin-left: 2rem;
}

.contactbtn{
  border-radius: 50px;
  text-transform: uppercase;
  font-family: 'Kanit';
  color: var(--raffaut-yellow);
  border: 1px solid #FFB238;
  padding: 0.2rem 2rem;
  letter-spacing: 5px;
}

#herocontact{
  margin-left: 3rem;
}

.logo{
  text-transform: uppercase;
}

.logo h1{
  font-weight: 400;
  letter-spacing: 5px;
}

.herocontentParent{
  max-width: 1100px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: auto;
  padding: 0;
}

.herocontent{
  padding: 6rem 0 8rem 0;
  margin: auto;
}

.herocontent h1,
.herocontent h2{
  font-size: 2rem;
}

.herocontent h2{
  font-weight: 400;
  margin-top: -10px;
}

.herocontent p{
  font-size: 16px;
  margin: 1rem 0 2rem 0;
}


.stars{
  display: flex;
  gap: 5px;
}

.hLine{
  height: 1px;
  width: 100%;
  background-color: var(--lighter-gray);
}

#footer{
  background-color: var(--darker-gray);
  padding: 4rem 0 7rem 0;
}

.footercontent{
  max-width: 1100px;
  margin: auto;
}

.footermenu,
.footermenu ul{
  display: flex;
  align-items: center;
  text-transform: lowercase;
}

.footermenu li{
  margin-right: 2rem;
}

.topcontent{
  display: flex;
  justify-content: space-between;
}

#footer .logo{
  font-size: 12px;
}

#footerLine{
  margin: 3rem 0;
}

.bottomcontent{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 3rem;
}

.bottomcontent p{
  width: 42%;
  text-align: right;
  font-size: 16px;
}

.vLine{
  width: 1px;
  height: 50px;
  background-color: var(--lighter-gray);
}

.footerSocials img{
  margin-right: 10px;
}

#copyright{
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1100px;
  margin: auto;
  padding: 2rem 0;
}

#copyright p{
  font-weight: 300;
}

#copyright a{
  font-weight: 500;
}

.cr-menu ul{
  display: flex;
  gap: 40px;
}

.cr-menu li{
  color: #6D7D7D;
  text-align: right;
  font-family: Kanit;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 6.88px;
  text-transform: uppercase;
}

.cr-menu a{
  text-decoration: none;
}

#subscribe{
  max-width: 1110px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 5rem;
}

#subscribe h2{
  font-weight: 400;
  font-size: 2rem;
}

#subscribe form{
  display: flex;
}

#email{
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #6d7d7d;
  width: 500px;
  padding: 0.7rem 1rem;
  margin-right: 2rem;
}

input::placeholder{
  font-family: 'Kanit';
  color: #fff;
}

#submit{
  border-radius: 50px;
  text-transform: uppercase;
  font-family: 'Kanit';
  color: var(--raffaut-yellow);
  border: 1px solid #FFB238;
  padding: 0.2rem 3rem;
  letter-spacing: 5px;
  font-weight: 300;
}

.mobile-menu,
.hamburger-menu{
  display: none;
}

.menu-wrapper{
  display: flex;
}

.desktop-menu{
  display: flex;
  gap: 35px;
  margin-left: 13rem;
  text-transform: lowercase;
  margin-top: 3px;
}

nav{
  display: flex;
  justify-content: space-between;
}

.hamburger-mobile{
  display: none;
}

.mobile-menu {
  display: none;
  /* Other styles for positioning, width, etc. */
}

.mobile-menu ul{
  display: flex;
  flex-direction: column;
  gap: 25px;
  margin-top: 6rem;
  font-size: 1.3rem;
}

.mobile-menu.active {
  display: block;
  position: fixed;
  background-color: #131616f9;
  height: 100vh;
  width: 400px;
  padding: 4rem;
  top: 0;
  right: 0;
}

/* Style for close button and the hamburger icon */
#closeMenu, #hamburger {
  cursor: pointer;
}

#closeMenu{
  font-size: 2rem;
  position: absolute;
  right: 60px;
}


@media only screen and (max-width: 1024px) {
  .hamburger-mobile{
    display: block;
  }

  .menu{
    display: none;
  }

  nav{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 4rem;
    margin: 0;
  }

  #hamburger{
    margin-top: -1.7rem;
    font-size: 1.7rem;
  }
}



/* Mobile First Media Query */
@media only screen and (max-width: 600px) {
  /* General styles for mobile devices */

  #hero {
    height: 700px; /* Adjust height for better mobile view */
  }

  .herocontentParent {
    flex-direction: column-reverse; /* Adjust the layout for better stacking */
  }

  .herocontent {
    width: 100%; /* Full width on mobile */
    padding: 2rem; /* Adjust padding for better mobile view */
    padding-top: 4rem;
  }

  .herocontent h1,
  .herocontent h2,
  .herocontent p {
    text-align: center; /* Center text on mobile */
  }

  .menu {
    flex-direction: column; /* Stack navigation items on mobile */
    align-items: center;
  }

  .menu li {
    margin: 1rem 0; /* Adjust spacing between navigation items */
  }

  .contactbtn,
  #herocontact {
    margin: 1rem 0; /* Adjust spacing for better mobile view */
  }

  #subscribe {
    flex-direction: column; /* Stack subscribe elements on mobile */
    align-items: center;
  }

  #email {
    width: 100%; /* Full width for email input on mobile */
    margin: 1rem 0; /* Adjust spacing for better mobile view */
  }

  #subscribe form {
    width: 100%; /* Full width for form on mobile */
  }

  #submit {
    margin-top: 1rem; /* Adjust spacing for better mobile view */
  }

  nav{
    padding: 2rem;
  }
}

/* Tablet Media Query */
@media only screen and (min-width: 601px) and (max-width: 1024px) {
  /* Styles for tablets */

  #hero {
    height: 501px; /* Adjust height for better tablet view */
  }

  .herocontent{
    padding: 0;
    margin: auto;
    width: 100%;
  }
  
  .herocontent h1,
  .herocontent h2{
    font-size: 2rem;
  }
  
  .herocontent h2{
    font-weight: 400;
    margin-top: -10px;
  }
  
  .herocontent p{
    font-size: 16px;
    margin: 1rem 0 2rem 0;
  }
  
  .contactbtn,
  #herocontact {
    margin: 1rem; /* Adjust spacing for better tablet view */
  }
}

html, body {
  overflow-x: hidden;
}
@media only screen and (max-width: 600px) {
  #subscribe {
    padding: 4rem 2rem; /* Adjust padding */
    text-align: center;
  }

  #subscribe h2 {
    font-size: 1.5rem; /* Adjust font size */
    margin-bottom: 1rem;
  }

  #subscribe form {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  #email {
    width: 90%; /* Adjust input width */
    margin-bottom: 1rem;
  }

  #submit {
    width: 250px; /* Adjust button width */
  }
}

@media only screen and (min-width: 601px) and (max-width: 1024px) {
  #subscribe {
    padding: 4rem 2rem; /* Adjust padding */
    text-align: center;
    flex-direction: column;
  }

  #subscribe h2 {
    font-size: 1.5rem; /* Adjust font size */
    margin-bottom: 1rem;
  }

  #subscribe form {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  #email {
    width: 90%; /* Adjust input width */
    margin-bottom: 1rem;
  }

  #submit {
    width: 250px; /* Adjust button width */
  }
}
/* Mobile First Media Query */
@media only screen and (max-width: 600px) {
  /* General styles for mobile devices */

  #footer {
    padding: 4rem 2rem; /* Adjust padding for better mobile view */
  }

  .footercontent {
    text-align: center; /* Center content on mobile */
  }

  .footermenu,
  .logo {
    margin-bottom: 1.5rem; /* Adjust spacing between menu and logo on mobile */
  }

  .footermenu{
    display: none;
  }

  .hLine,
  .vLine {
    display: none; /* Hide lines on mobile for a cleaner look */
  }

  .bottomcontent p {
    font-size: 16px; /* Adjust font size for better mobile view */
  }

  .footerSocials img {
    margin-right: 8px; /* Adjust spacing between social icons on mobile */
  }

  #copyright{
    padding: 2rem;
  }

  #copyright p{
    width: 90%;
  }

  .cr-menu{
    display: none;
  }
}

/* Tablet Media Query */
@media only screen and (min-width: 601px) and (max-width: 1024px) {
  /* Styles for tablets */

  #footer {
    padding: 4rem 2rem; /* Adjust padding for better mobile view */
  }

  .footercontent {
    text-align: center; /* Center content on mobile */
  }

  .footermenu,
  .logo {
    margin-bottom: 1.5rem; /* Adjust spacing between menu and logo on mobile */
  }

  .footermenu{
    display: none;
  }

  .hLine,
  .vLine {
    display: none; /* Hide lines on mobile for a cleaner look */
  }

  .bottomcontent p {
    font-size: 16px; /* Adjust font size for better mobile view */
  }

  .footerSocials img {
    margin-right: 8px; /* Adjust spacing between social icons on mobile */
  }

  #copyright{
    padding: 2rem;
  }

  #copyright p{
    width: 90%;
  }

  .cr-menu{
    display: none;
  }
}

@media only screen and (max-width: 600px) {
  #hireus {
    padding: 4rem 2rem; /* Adjust padding */
  }

  .hire-cta {
    text-align: center;
    padding: 2rem;
    width: 100%; /* Full width */
  }

  .hire-cta h3 {
    font-size: 1.5rem; /* Adjust font size */
    margin-bottom: 2rem;
  }

  .hire-cta button {
    width: 90%; /* Full width for button */
  }
}

@media only screen and (min-width: 601px) and (max-width: 1024px) {
  #hireus {
    padding: 6rem 4rem; /* Adjust padding */
  }

  .hire-cta {
    text-align: center;
    padding: 4rem;
    width: 80%; /* Slightly less than full width */
  }

  .hire-cta h3 {
    font-size: 2rem; /* Adjust font size */
    margin-bottom: 2.5rem;
  }

  .hire-cta button {
    width: 70%; /* Adjust button width */
  }
}

/* Page load animation */
body {
  animation: fadeInPage 1s ease-out;
}

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