@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;500;600;800&display=swap");

:root {
  --color-primary: #f9a100;
  --color-secondary: #131941;
  --color-white: #fff;
  --color-gray: #f1f1f1;
}
* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}
html {
  font-size: 10px;
}
body {
  font-family: "Poppins", sans-serif;
  font-size: 1.6rem;
}

.container {
  max-width: 104rem;
  margin: 0 auto;
  padding: 0rem 1.5rem;
}

/* nav */
.nav {
  width: 100%;
  height: 8rem;
  background-color: var(--color-white);
}
.nav_container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav_logo {
  font-size: 2.8rem;
  text-decoration: none;
  color: var(--color-secondary);
  font-weight: 600;
}
.nav_logo span{
  color: #f9a100;
}
.nav_list {
  list-style: none;
  display: flex;
}
.nav_item {
  margin: 0rem 0.7rem;
}
.nav_link:hover {
  color: #f9a100;
  font-size: 1.7rem;
}
.mobile_nav_link:link{
  color: #f9a100;
  font-size: 1.7rem;
}
.nav_link {
  text-decoration: none;
  color: var(--color-secondary);
  font-size: 1.5rem;
}
.nav_btn {
  text-decoration: none;
  background-color: var(--color-primary);
  padding: 1rem 1.5rem;
  color: var(--color-white);
  border-radius: 0.6rem;
}

/* header */
.header {
  width: 100%;
  height: calc(100vh - 8rem);
  background-color: var(--color-gray);
}
.header_container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
.header_container_wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
.header_text {
  width: 65%;
}
.header_text span{
  color: #f9a100;
}
.header_img {
  width: 35%;
}
.header_img h3{
  font-size: 1.8rem;
  text-align: center;
  font-size: 800;
  color: #f9a100;
}
.images_top{
  width: 100%;
}
.images_title{
  font-size: 2rem;
  font-weight: 800;
  text-align: center;
  color: #131941;
}
.header_title {
  font-size: 5.2rem;
  font-weight: 500;
  color: var(--color-secondary);
  line-height: 6.5rem;
}
.header_title > span {
  color: var(--color-primary);
}
.header_text {
  color: var(--color-secondary);
  margin: 2rem 0rem;
  font-weight: 600;
  line-height: 2.5rem;
}
.header_btn {
  text-decoration: none;
  background-color: var(--color-primary);
  color: var(--color-white);
  padding: 1rem 2rem;
  margin-top: 2rem;
  letter-spacing: 1.2px;
  border-radius: 0.4rem;
}

/* section */
.section {
  padding-top: 5rem;
}
.clients_container {
  text-align: center;
}
.section_header {
  margin-bottom: 5rem;
  padding-bottom: 2rem;
  padding-top: 5rem;
}
.section_title {
  font-size: 3.6rem;
  font-weight: 500;
  color: var(--color-primary);
  padding: 2rem;
}
.section_text {
  color: var(--color-secondary);
  line-height: 3rem;
  font-weight: 700;
}
.section_text span{
  color: #f9a100;
  font-weight: 600;
}
.clients_wrapper {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  grid-gap: 2rem;
}
.clients_wrapper > span {
  text-align: center;
}

/* services */

.services_container {
  text-align: center;
}
.services {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
  grid-gap: 4rem;
  padding-bottom: 5rem;
}
.service {
  padding: 1.5rem 0.4rem;
  box-shadow: 5px 5px 5px rgba(12, 12, 12, 0.144);
}
.service_title {
  color: var(--color-secondary);
  margin: 1rem 0rem;
}
.service_text {
  color: var(--color-secondary);
  line-height: 2.5rem;
  font-weight: 600;
}

/* experience */
.experience_container {
  display: flex;
  justify-content: center; /* Center items horizontally if flex-direction is row (default) */
  align-items: center; /* Align items vertically */
  gap: 3rem; /* Space between image/video and text */
  flex-wrap: wrap; /* Allows items to wrap on smaller screens */
  padding: 5rem 0; /* Add some padding around the section */
}
.experience_image {
  flex: 1; /* Allow image/video container to grow */
  min-width: 300px; /* Ensure it doesn't get too small */
  max-width: 600px; /* Limit its maximum width */
  text-align: center; /* Ensures the video itself is centered within this flex item */
}

.responsive-video {
  width: 100%; /* Makes the video take the full width of its parent (.experience_image) */
  height: auto; /* Maintains aspect ratio */
  display: block; /* Removes any extra space below the video */
  border-radius: 0.7rem; /* Optional: adds rounded corners to the video player */
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1); /* Optional: subtle shadow */
  object-fit: cover; /* Ensures video fills its area without letterboxing, potentially cropping */
  /* If you prefer letterboxing to avoid cropping, use object-fit: contain; */
}

@media screen and (max-width: 768px) {
  .experience_container {
    flex-direction: column; /* Stack video and text vertically on smaller screens */
    text-align: center; /* Center align content when stacked */
    gap: 3rem; /* Adjust gap for mobile */
  }

  .experience_image {
    width: 90%; /* Make them take up more width on mobile */
    max-width: 100%; /* Ensure they don't exceed container width */
  }
}

.experience_title {
  font-size: 2rem;
  font-weight: 500;
  color: var(--color-secondary);
}
.experience_text {
  margin: 1.5rem 0rem 2.5rem 0rem;
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--color-secondary);
}
.experience_btn {
  text-decoration: none;
  background-color: var(--color-primary);
  padding: 1rem 2rem;
  border-radius: 0.3rem;
  color: var(--color-white);
}

/* blog_container */

.main_container{
  width: 100%;
  height: auto; 
  padding: 5rem 0; 
  background-color: var(--color-gray);
}
.blog_container > .section_header {
  text-align: center;
}
.blogs {
  margin-top: 1rem;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
  grid-gap: 2rem;
}
.blog_item {
  width: 100%;
  position: relative;
}
.blog_item > img {
  width: 100%;
  height: 40rem;
  object-fit: contain;
  border-radius: 10px;
}
.blog_body {
  width: 90%;
  background-color: var(--color-white);
  padding: 1.8rem 1.5rem;
  box-shadow: 2px 2px 5px rgba(128, 128, 128, 0.144);
  margin: 0 auto;
  border-radius: 0.4rem;
  text-align: center;
  position: absolute;
  left: 4.5%;
  bottom: -5rem;
}
.blog_body p{
  font-weight: 700;
}
.blog_title {
  font-size: 1.6rem;
  color: var(--color-secondary);
  margin-bottom: none;
}
.blog_link {
  text-decoration: none;
  color: var(--color-primary);
}

/* testimonial */
.testimonial {
  padding: 3rem 0rem;
}
.testimonial h1{
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 4rem;
  font-size: 3.5rem;
  font-weight: 700;
  letter-spacing: 5px;
  color: #f9a100;
}
.testimonial_container {
  width: 100%;
  display: flex;
  align-items: center;
}
.test_image {
  width: 20%;
  height: 12rem;
  border-radius: 50%;
}
.test_image > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
}
.test_content {
  width: 65%;
  margin-left: 4rem;
}
.test_p {
  margin-bottom: 2rem;
  color: var(--color-secondary);
}
.test_name {
  color: var(--color-primary);
  margin-bottom: 1rem;
}
.test_designation {
  color: var(--color-secondary);
  font-size: 1.4rem;
  margin-bottom: 3rem;
}
.test_logos {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.test_link {
  text-decoration: none;
  color: var(--color-primary);
}

/* demo */
.demo {
  background-color: var(--color-gray);
  padding: 7rem 0rem;
}
.demo_container {
  width: 100%;
  text-align: center;
}
.demo_title {
  font-size: 4.8rem;
  color: var(--color-secondary);
  margin-bottom: 4rem;
}
.demo_btn {
  text-decoration: none;
  background-color: var(--color-primary);
  border: none;
  padding: 1.2rem 2rem;
  color: var(--color-white);
  border-radius: 0.5rem;
  cursor: pointer;
}

/* footer */
.footer {
  padding: 7rem;
  background-color: var(--color-secondary);
  display: flex;
}
.footer_container {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.footer_logo {
  text-decoration: none;
  color: var(--color-white);
  font-size: 2.8rem;
  font-weight: 600;
}
.footer_logo span{
  color: #f9a100;
}
.footer_item_title {
  color: var(--color-primary);
  font-size: 2rem;
  font-weight: 600;
}
.footer_copy {
  margin: 2rem 0rem;
  font-size: 1.4rem;
  color: var(--color-white);
}
.footer_icons {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.footer_icon {
  background-color: #ffffff41;
  padding: 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
}
.footer_company_list {
  margin-top: 2rem;
  list-style: none;
}

.footer_company_link {
  text-decoration: none;
  color: var(--color-white);
  font-size: 1.4rem;
  margin: 0.5rem 0rem;
}


/* Styles for the form in the Contact Us section */

.footer_update {
    /* If .footer_update is currently a flex container, you might need to adjust it */
    /* Example: If you want the form fields to stack vertically within footer_update */
    display: flex;
    flex-direction: column; /* Stacks the form groups vertically */
    gap: 1.5rem; /* Adds space between form groups */
    align-items: center; /* Centers the form content if narrower than container */
    max-width: 500px; /* Limit the width of the form for better readability */
    margin: 0 auto; /* Center the form horizontally */
}

.form-group {
    /* Ensures each label-input pair takes its own line */
    display: flex;
    flex-direction: column; /* Makes the label and input stack vertically */
    width: 100%; /* Ensures the form group takes full width within its parent */
}

.form-group label {
    /* Style for the labels */
    display: block; /* Makes the label a block-level element, forcing it onto a new line */
    margin-bottom: 0.5rem; /* Adds some space between the label and the input */
    font-weight: 600; /* Makes the label text a bit bolder */
    color: var(--color-dark); /* Or whatever your primary text color is */
    text-align: left; /* Ensures the label text is left-aligned */
}

.footer_update_input {
    width: 100%; /* Make input fields take full width of their parent .form-group */
    padding: 0.8rem 1rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
    /* Add any other consistent styling for your input fields */
}

/* Specific styling for the textarea */
.text-area-style {
    min-height: 8rem; /* Give the textarea a default height */
    resize: vertical; /* Allow users to resize it vertically */
}

/* Style for the submit button */
.demo_btn {
    margin-top: 1.5rem; /* Add space above the button */
    padding: 1rem 2rem;
    background-color: var(--color-primary); /* Use your primary brand color */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1rem;
    transition: background-color 0.3s ease;
    width: fit-content; /* Make the button only as wide as its content */
}

.demo_btn:hover {
    background-color: var(--color-primary-dark); /* A slightly darker shade on hover */
}
.stay {
  margin-bottom: 4rem;
}
.footer_update > span {
  cursor: pointer;
}

/* mabile nav */
.nav_burger {
  width: 3.5rem;
  height: 3.5;
  display: none;
  cursor: pointer;
}
.mobile_nav_list {
  display: none;
}
.mobile_nav_list {
  list-style: none;
}
.mobile_nav_item {
  margin: 1.5rem 1rem;
}
.mobile_nav_link {
  padding: 1rem 0rem;
  text-decoration: none;
  color: var(--color-secondary);
}
.mobile_nav_item_last {
  margin-bottom: 2rem !important;
}
@media only screen and (max-width: 745px) {
  .desktop_nav {
    display: none;
  }
  .nav_burger {
    display: block;
  }
  .mobile_nav_list {
    position: relative;
    top: -500%;
    display: block;
    width: 100%;
    background-color: var(--color-white);
    padding: 2rem;
    transition: all 0.4s ease;
  }
  .show_mobile_nav {
    top: 0;
  }

  .header {
    height: auto; /* Allow content to dictate height on mobile */
    padding: 4rem 0; /* Add some vertical padding */
  }

  .header_container_wrapper {
    flex-direction: column; /* Stack items vertically */
    text-align: center; /* Center text content */
  }

  .header_text,
  .header_img {
    width: 100%; /* Make both elements take full width */
    margin-bottom: 2rem; /* Add spacing between text and image/button */
  }

  .header_title {
    font-size: 3.5rem; /* Adjust font size for smaller screens */
    line-height: 4.5rem;
  }

  .header_text {
    font-size: 1.6rem; /* Adjust paragraph font size */
    margin-bottom: 3rem; /* More space before the button */
  }

  .header_btn {
    margin-top: 0; 
    margin-bottom: 3rem; 
    width: fit-content; 
    display: block; 
    margin-left: auto;
    margin-right: auto;
  }

  .header_img {
    order: 1; 
    margin-top: 2rem; 
  }

  .header_img img {
    max-width: 100%; /* Ensure image scales down */
    height: auto;
  }

  .test_image > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
}

  .test_image{
    width: 10%;
    height: 12rem;
  }

  .blogs {
    grid-template-columns: 1fr; 
    grid-gap: 4rem;
    padding: 0 1rem;
  }
}

/* Optional: Even smaller screens like phones */
@media screen and (max-width: 480px) {
  .header_title {
    font-size: 3rem;
    line-height: 4rem;
  }
  .header_text {
    font-size: 1.4rem;
  }
}

  .experience_container {
    width: 100%;
    flex-direction: column;
    text-align: center;
  }
  .experience_image {
    width: 100%;
  }
  .expericen_text {
    width: 100%;
    margin-left: 0px;
  }
  .help_container {
    width: 100%;
    flex-direction: column;
  }
  .help_heading {
    width: 100%;
  }
  .help_content {
    margin-top: 2rem;
    width: 100%;
    margin-left: 0px;
  }
  .testimonial_container {
    width: 100%;
    flex-direction: column;
  }
  .test_image {
    width: 100%;
  }
  .test_content {
    width: 100%;
    margin-left: 0px;
    margin-top: 2rem;
  }
@media only screen and (max-width: 350px) {
  .header_title {
    font-size: 2.4rem;
    line-height: 3rem;
  }
  .header_text {
    width: 100%;
  }
  .header_img {
    display: none;
  }
}