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

body {
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
  color: #000;
  background-color: #fff;
}

header {
  display: flex;
  justify-content: space-between; /* Ensures the logo stays on the left */
  align-items: flex-start; /* Vertically aligns the logo and other content */
  padding: 1rem;
  width: 100%; /* Makes header span the full width of the screen */
  top: 0;
  left: 0;
  background-color: #fff; /* Matches site background */
  z-index: 1000; /* Ensures header stays on top of other elements */
  border-bottom: 1px solid #ddd; /* Optional: subtle separator for the header */
}

.logo {
  display: flex;
  align-items: center; /* Vertically align the logo image and text */
  gap: 0.5rem; /* Space between the logo image and text */
}

.logo img {
  height: 40px; /* Adjust height as needed */
  width: auto; /* Maintain aspect ratio */
}

.logo span {
  font-size: 1.5rem; /* Text size for the logo */
  font-weight: bold;
}

.logo span span {
  font-weight: normal;
  font-style: italic;
}
.work-button {
  padding: 0.5rem 1rem;
  border: 2px solid black;
  background: #fff;
  font-size: 1rem;
  cursor: pointer;
  border-radius: 30px;
  box-shadow: 0px 5px 0px rgba(0, 0, 0, 0.2), 0px 10px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

/* Mobile Styling */
@media (max-width: 768px) {
  header {
    padding: 0.5rem 1rem; /* Reduce padding for smaller screens */
  }

  .logo span {
    font-size: 1.2rem; /* Adjust logo text size */
  }

  .logo-image {
    height: 30px; /* Shrink logo image */
  }

  .work-button {
    font-size: 0.9rem; /* Adjust button size */
    padding: 0.4rem 0.8rem;
    margin-left: 25%;
  }
}

.work-button:active {
  transform: translateY(5px); /* Simulates pressing down */
  box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.2), 0px 7px 10px rgba(0, 0, 0, 0.1); /* Reduces shadow */
  background: #f0f0f0; /* Slightly darker background for pressed effect */
}


.hero {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  padding: 2rem 1rem;
  overflow: hidden;
}

.title {
  font-size: 5rem; /* Default size */
  font-weight: bold;
  position: relative;
  opacity: 0; /* Initially hidden */
  text-align: center;
  line-height: 1.2;
}

.title.fade-in {
  animation: fadeIn 2s ease-out forwards;
}

.title.shoot {
  animation: shootArrow 2s ease-out forwards;
}

.title.reappear {
  animation: reappear 0.5s ease-in forwards;
}

.title .design {
  display: flex;
  align-items: center;
  justify-content: center;
}

.title .arrow {
  margin-left: 1rem;
  font-size: 0.8em; /* Arrow size relative to text */
  transform: translateY(0.2em); /* Align with text */
  color: black;
}

.future-line {
  display: flex;
  justify-content: center;
  align-items: center;
}

.future {
  margin-left: 2.8rem; /* Align "future" under "g" */
}

/* Keyframes for fading in */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Keyframes for arrow shooting effect */
@keyframes shootArrow {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* Reappear instantly in normal position */
@keyframes reappear {
  0% {
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.images {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  opacity: 0; /* Initially hidden */
  animation: fadeInImages 15s 3s forwards; /* Fade in after title fade-in */
}

.images img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

@keyframes fadeInImages {
  0% {
    opacity: 0;
  }
  25% {
    opacity: .1;
  }
  50% {
    opacity: .5;
  }
  100% {
    opacity: 1;
  }
}

@media (min-width: 1024px) {
  .title {
    font-size: 8rem; /* Bigger font size for large screens */
  }

  .title .arrow {
    margin-left: 1.5rem; /* Larger space for bigger text */
    font-size: 0.7em; /* Adjust arrow size */
  }

  .future {
    margin-left: 4.2rem; /* Adjust alignment for larger screens */
  }
  .logo {
    align-items: flex-start;
  }
}

@media (max-width: 768px) {
  .title {
    font-size: 3rem; /* Smaller font size for mobile */
  }

  .logo img{
    height: 80px;
  }

  .title .arrow {
    margin-left: 0.5rem; /* Smaller space for mobile */
    font-size: 0.9em; /* Adjust arrow size */
  }

  .future {
    margin-left: 1.8rem; /* Adjust alignment for smaller screens */
  }

  .hero {
    grid-template-columns: 1fr;
  }

  header {
    flex-direction: column;
    gap: 0.5rem;
  }

  .images {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* About Section */
.about-section {
  background-color: #191919; /* Black background */
  color: #fff; /* White text */
  padding: 3rem 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.about-content {
  display: grid;
  gap: 2rem;
  max-width: 1200px; /* Center the content */
  width: 100%;
}

/* Large Screens: Two Columns */
@media (min-width: 1024px) {
  .about-content {
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    align-items: center; /* Vertically center items in columns */
  }

  .about-left, .about-right {
    text-align: center; /* Center text and image horizontally */
  }
}

/* Title */
.about-title {
  font-size: clamp(3.5rem, 10vw, 6rem);
  font-weight: bold;
  line-height: 1.2;
  margin-bottom: 1rem;
  text-align: left;
}

/* .about-title span {
  font-style: italic;
} */

/* Description */
.about-description {
  font-size: 1.5rem;
  line-height: 1.5;
  margin-top: 1.5rem;
  text-align: left;
  width: 525px;
}

#icon{
  display: flex;
  align-content: flex-start;
  max-height: 150px;
}

/* Image */
.about-image {
  max-width: 100%;
  height: auto;
  margin-bottom: 1rem;
  display: flex;
}

/* Mobile: Single Column */
@media (max-width: 1024px) {
  .about-content {
    grid-template-columns: 1fr; /* Single column layout */
    text-align: center;
  }

  .about-left, .about-right {
    width: 100%; /* Ensure full width */
  }
  .about-description {
    font-size: 1.3rem;
    width: 100%;
  }
}

/* General Styling */
.gallery-section {
  background-color: #fff; /* White background */
  padding: 3rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

/* Header (Title and Arrow) */
.gallery-header {
  display: grid;
  grid-template-columns: 1fr auto; /* Title and arrow in two columns */
  align-items: center;
  width: 100%;
  max-width: 1200px;
}

.gallery-title {
  font-size: 6rem;
  font-weight: bold;
  line-height: 1.2;
  text-align: left;
}

.gallery-arrow {
  font-size: 8rem;
}

.gallery-arrow span {
  display: inline-block;
  transform: rotate(0deg); /* Arrow points down */
}

/* Jigsaw Grid */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* 6 equal-width columns */
  grid-template-rows: repeat(3, 200px); /* Adjust grid to fit new rows */
  gap: 0.5rem;
  max-width: 1200px;
  width: 100%;
  position: relative; /* Allows absolute positioning for extra images */
}

/* Jigsaw Item Dimensions */
.small-square {
  grid-column: span 1;
  grid-row: span 1;
}

.vertical-rectangle {
  grid-column: span 1;
  grid-row: span 2;
}

.horizontal-rectangle {
  grid-column: span 2;
  grid-row: span 1;
}

.small-horizontal-rectangle {
  grid-column: span 2;
  grid-row: span 1;
}

.small-vertical-rectangle {
  grid-column: span 1;
  grid-row: span 1;
}

/* Extra Images for Empty Spaces */
.left-extra-image {
  position: absolute;
  top: 210px; /* Align with the top row */
  left: 0px; /* Position it to the left of the grid */
  width: 190px; /* Matches the height of grid rows */
  height: 197px; /* Matches 2 rows in height */
  object-fit: cover;
  border-radius: 4px;
}

.right-extra-image {
  position: absolute;
  bottom: 208px; /* Align with the bottom row */
  right: 0px; /* Position it to the right of the grid */
  width: 193px; /* Matches the height of grid rows */
  height: 200px; /* Matches 2 rows in height */
  object-fit: cover;
  border-radius: 4px;
}

/* Images and Videos */
img, video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.small-horizontal-rectangle {
  object-position: top;
}

/* General Responsive Design for Small Screens */
@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr); /* Only 2 columns */
    grid-auto-rows: auto; /* Allow rows to adapt to content sizes */
    gap: 0.5rem; /* Consistent spacing between items */
  }

  /* Adjust Item Dimensions for Mobile */
  .small-square {
    grid-column: span 1; /* Single column */
    grid-row: span 1; /* Single row */
  }

  .vertical-rectangle {
    grid-column: span 1; /* Single column */
    grid-row: span 2; /* Spans two rows for vertical alignment */
  }

  .horizontal-rectangle {
    grid-column: span 2; /* Spans both columns */
    grid-row: span 1; /* Single row */
  }

  .small-horizontal-rectangle {
    grid-column: span 2; /* Spans both columns */
    grid-row: span 1; /* Single row */
  }

  .small-vertical-rectangle {
    grid-column: span 1; /* Single column */
    grid-row: span 1; /* Single row */
  }

  /* Hide Extra Images on Small Screens */
  .left-extra-image,
  .right-extra-image {
    display: none;
  }

  .gallery-title {
    font-size: 1.5rem; /* Adjust title size for smaller screens */
  }

  .gallery-arrow {
    font-size: 1.5rem; /* Adjust arrow size */
  }
}

/* General Section Styling */
.schematiq-section {
  display: flex; /* Two-column layout for large screens */
  justify-content: space-between; /* Ensure space between text and image */
  align-items: flex-start; /* Align items at the top */
  background-color: #fff; /* White background */
  padding: 6rem;
  box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.1); /* Top shadow */
}

/* Left Content (Text) */
.schematiq-content {
  flex: 2; /* Take up 2/3 of the section width */
  max-width: 60%; /* Restrict max width */
}

/* Header: Title and Subtitle */
.schematiq-header {
  margin-bottom: 2rem;
}

.schematiq-title {
  font-size: clamp(3.5rem, 4vw, 3rem);
  font-weight: bold;
  color: #000;
  margin: 0 0 0.5rem 0;
}

.schematiq-subtitle {
  font-size: clamp(1rem, 3vw, 1rem);
  font-weight: normal;
  color: #666;
  margin: 0;
  padding: 0.2rem 1rem;
  border: 2px solid black;
  border-radius: 20px;
  display: inline-block;
}

/* Number and Title Sections */
.schematiq-number-section {
  display: flex;
  align-items: baseline; /* Align items to the bottom */
  gap: 1rem; /* Space between number and title */
  margin-bottom: 1rem; /* Space below each number section */
  margin-left: 50px; /* Align with the left edge of the "h" in Schematiq */
}

.section-number {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: bold;
  color: #000;
}

.section-title {
  font-size: 2rem; /* Slightly smaller for titles */
  font-weight: bold;
  color: #000;
  margin: 0;
}

/* Paragraph Styling */
/* Paragraph Styling */
.section-paragraph {
  font-size: clamp(1rem, 3vw, 1.5rem); 
  line-height: 1.5;
  color: #333;
  margin-bottom: 2rem;
  margin-left: 100px; /* Align paragraphs with the "01" and "02" sections */
  max-width: 400px; /* Optional: Limit the width for readability */
}

/* Right Image */
.schematiq-image-container {
  flex: 1; /* Take up 1/3 of the section width */
  display: flex;
  justify-content: center; /* Center image horizontally */
  align-items: flex-start; /* Align image to the top */
  overflow: hidden;
}

.schematiq-image {
  width: 100%; /* Image takes full container width */
  max-width: 500px; /* Restrict image size */
  transform: translateX(100%); /* Start off-screen */
  animation: slideIn 1.5s ease-out forwards; /* Fly-in animation */
}

/* Slide-in Animation */
@keyframes slideIn {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Responsive Design for Smaller Screens */
@media (max-width: 768px) {
  .schematiq-section {
    flex-direction: column; /* Stack sections vertically */
    align-items: flex-start; /* Align items to the left */
  }

  .schematiq-content {
    max-width: 100%; /* Text takes full width */
  }

  .schematiq-number-section {
    text-align: center; /* Center align number and title */
    margin-bottom: 2rem;
  }

  .section-paragraph {
    text-align: center; /* Center-align paragraphs */
  }

  .schematiq-image-container {
    justify-content: center; /* Center image horizontally */
    margin-top: 2rem; /* Add space above image */
  }

  .schematiq-image {
    width: 90%; /* Make the image more responsive */
    max-width: 300px; /* Restrict max width */
  }
  .section-title{
    font-size: 1.5rem;
  }
}

/* Advertisement Section */
.schematiq-advertisement-section {
  background-color: #ffffff; /* White background */
  padding: 40px; /* Padding around the entire section */
  position: relative; /* Position relative for the triangles */
  text-align: center; /* Center-align items */
  box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.1); /* Box shadow at the top */
}

/* Ad Container: Three Items (Images and Video) */
.schematiq-ad-container {
  display: flex; /* Horizontal layout for images and video */
  justify-content: center; /* Center items horizontally */
  align-items: center; /* Vertically align items */
  gap: 100px; /* Space between images and video */
  max-width: 100%; /* Prevent overflowing the container */
  flex-wrap: wrap; /* Allow wrapping if items don’t fit in one row */
  margin: 0 auto;
  margin-bottom: 150px;

}

/* Ad Items (Shared Styling for Images and Video) */
.ad-item {
  width: 400px; /* Fixed width for all items */
  height: 500px; /* Fixed height for all items */
  animation: slideInCard 1.5s ease-out forwards; /* Sliding animation */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow to items */
  border-radius: 8px; /* Optional: Rounded corners for all items */
  position: relative; /* Ensure stacking during animation */
  opacity: 0; /* Initially hidden */
  visibility: hidden; /* Ensure they are completely hidden before animation starts */
}

/* Add specific delays to each item */
.ad-item:nth-child(1) {
  animation-delay: 0s; /* First item comes in first */
}

.ad-item:nth-child(2) {
  animation-delay: 0.7s; /* Second item comes in after a delay */
}

.ad-item:nth-child(3) {
  animation-delay: 1.2s; /* Third item comes in last */
}
/* Styling for Images */
.ad-image {
  display: block;
  object-fit: cover; /* Maintain aspect ratio of images */
}

/* Styling for Videos */
.ad-video video {
  object-fit: cover; /* Crop video to fit the container */
  border-radius: 8px; /* Optional: Rounded corners for the video */
  width: 100%; /* Ensure the image fits inside the container */
  height: 100%; /* Ensure consistent size */
}

/* Triangles at the Bottom */
.schematiq-triangles {
  display: flex;
  justify-content: center; /* Center the triangles */
  position: absolute;
  bottom: 0; /* Move just below the section */
  left: 50%;
  transform: translateX(-50%); /* Center-align triangles */
}

.triangle {
  width: 40px;
  height: 40px;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  margin-bottom: 20px;
}

.triangle.black {
  background-color: #000000; /* Black triangle */
}

.triangle.white {
  background-color: #ffffff; /* White triangle */
  transform: rotate(180deg); /* Flip to form the square */
}

/* Animation: Slide in like dealing cards */
@keyframes slideInCard {
  0% {
    transform: translateY(-50px) scale(0.8); /* Start slightly above and smaller */
    opacity: 0; /* Fully transparent */
    visibility: visible; /* Ensure items are visible when animation starts */
  }
  50% {
    transform: translateY(10px) scale(1.05); /* Slight overshoot for a bounce effect */
    opacity: 1; /* Becoming visible */
  }
  100% {
    transform: translateY(0) scale(1); /* Settle in the final position */
    opacity: 1; /* Fully visible */
    visibility: visible; /* Ensure visibility persists */
  }
}

/* Responsive Styling */
@media (max-width: 1400px) {
  .schematiq-ad-container {
    flex-direction: column; /* Stack items vertically */
    gap: 40px; /* Keep the gap consistent */
  }

  .ad-item {
    width: 50%; /* Adjust width for smaller screens */
    max-width: 50%; /* Ensure consistent sizing */
    height: auto; /* Maintain proportional height */
  }
}

/* General Section Styling */
.commercial-section {
  display: flex;
  justify-content: space-between; /* Space between text and video columns */
  align-items: flex-start; /* Align items to the top */
  background-color: #ebebeb; /* White background */
  padding: 40px; /* Padding around the section */
  position: relative;
}

/* Left Content (Text) */
.commercial-content {
  flex: 2; /* Take up 2/3 of the section width */
  max-width: 60%; /* Restrict maximum width */
}

/* Title and Subtitle */
.commercial-header {
  margin-bottom: 2rem;
  position: relative;
}

.commercial-title {
  font-size: 4rem; /* Large font for title */
  font-weight: bold;
  color: #000;
  margin: 0;
}

.commercial-subtitle {
  font-size: 3rem; /* Slightly smaller subtitle font */
  font-weight: bold;
  color: #000;
  margin: 0;
}

.commercial-oval {
  font-size: 1.2rem;
  font-weight: bold;
  color: #000;
  
  padding: 0 1rem;
  border: 3px solid black;
  border-radius: 20px;
  position: absolute;
  top: 175px; /* Adjust alignment relative to subtitle */
  left: 0; /* Align to the right of the section */
}

/* Number Sections */
.commercial-number-section {
  display: flex;
  align-items: flex-start; /* Align number and content */
  gap: 1rem; /* Space between number and content */
  margin-bottom: 2rem; /* Add spacing between sections */
  margin-left: 60px; /* Indent based on "m" in Commercial */
  margin-top: 100px;
}

.section-number {
  font-size: 3rem;
  font-weight: bold;
  color: #000;
}

.section-title {
  font-size: 2rem;
  font-weight: bold;
  margin: 0;
  align-items: flex-start;
}

.section-paragraph {
  font-size: 1rem;
  color: #333;
  margin-top: 0.5rem;
  max-width: 600px;
}

/* Right Content: Videos */
.commercial-videos {
  flex: 1; /* Take up 1/3 of the section width */
  display: grid;
  grid-template-areas: 
    "small"
    "large"
    "bottom";
  grid-template-rows: auto; /* Allow rows to adjust naturally */
  gap: 20px; /* Space between videos */
  position: relative;
}

/* Video Sizes and Positions */
.video-small {
  grid-area: small;
  width: 350px;
  height: 285px;
  overflow: hidden;
  animation: slideInRight 1.5s ease-out forwards; /* Reversed: Slide in from the left */
  position: relative;
  left: 50%; /* Align center of the video with the section's center */
  transform: translateX(-50%); /* Ensure true centering */
}


.video-large {
  grid-area: large;
  width: 500px;
  height: 340px;
  margin-left: auto; /* Centers the larger video */
  margin-right: auto; /* Prevents it from passing the section center */
  overflow: hidden;
  animation: slideInRight 2s ease-out forwards;
}

.video-bottom {
  grid-area: bottom;
  width: 1100px;
  height: 600px;
  overflow: hidden;
  animation: slideInLeft 2.5s ease-out forwards; /* Slide in from the left */
  position: relative;
  left: -30%; /* Align center of the video with the section's center */
  transform: translateX(-50%); /* Ensure true centering */
  margin:  100px 0;
}

/* Video Elements */
video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Maintain aspect ratio and cover the container */
  border-radius: 8px; /* Optional rounded corners */
}

/* Triangles at the Bottom */
.commercial-triangles {
  display: flex; /* Arrange triangles horizontally */
  justify-content: center; /* Center the triangles */
  align-items: center; /* Align them vertically */
  position: absolute; /* Place them relative to the section */
  bottom: 0; /* Align to the bottom of the section */
  left: 50%; /* Center horizontally */
  transform: translateX(-50%); /* Ensure proper centering */
  height: 80px; /* Combined height of the triangles */
  width: 80px; /* Combined width of the two triangles */
}

.triangle {
  width: 40px;
  height: 40px;
  clip-path: polygon(0 0, 100% 0, 100% 100%); /* Triangle shape */
}

.triangle.black {
  background-color: #000000; /* Black triangle */
}

.triangle.white {
  background-color: #ffffff; /* White triangle */
  transform: translateX(-40px) rotate(180deg); /* Align with the black triangle */
}




/* Sliding Animations */
@keyframes slideInRight {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInLeft {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  /* Stack Items Vertically */
  .commercial-section {
    flex-direction: column; /* Stack text and videos */
    align-items: flex-start; /* Align to the left */
    padding: 20px; /* Reduce padding */
  }

  /* Text Adjustments */
  .commercial-title {
    font-size: 2.5rem; /* Smaller title */
  }

  .commercial-subtitle {
    font-size: 1.5rem; /* Smaller subtitle */
  }

  .commercial-oval {
    font-size: 1rem;
    padding: 0.3rem 1rem;
    top: 100px;
    right: 0;
  }

  .commercial-number-section {
    margin-left: 10%; /* Remove indentation on smaller screens */
    margin-bottom: 1.5rem; /* Space between sections */
    margin-top: 50px;
  }

  .section-number {
    font-size: 2rem; /* Smaller number size */
    
  }

  .number-content {
    text-align: left; /* Align text to the left */
  }

  .section-title {
    font-size: 1.5rem;
  }

  .section-paragraph {
    margin-left: .3rem; /* Indent the paragraph to align with the "B" and "S" */
    font-size: 0.9rem; /* Smaller font size for readability */
    line-height: 1.5; /* Improve line spacing for smaller screens */
    text-align: left;
    width: 175px;
    margin-top: 0;
  }

  /* Video Adjustments */
  .commercial-videos {
    gap: 20px; /* Space between videos */
    width: 100%; /* Ensure the container fills the screen width */
    justify-content: center; /* Center items */
  }

  /* Top Video: 75% Width, Aligned Right */
  .video-small {
    width: 75%; /* Reduce size */
    height: auto; /* Maintain aspect ratio */
    margin-left: -83px; /* Align to the right */
    margin-right: 0; /* Prevent overflow */
    overflow: hidden; /* Ensure no part of the video overflows */
    position: relative;
    right: 0; /* Reset right alignment to keep it inside the viewport */
  }

  .video-bottom{
    margin-top: 10px;
    left: 0;
  }

  .video-large,
  .video-bottom {
    width: 100%; /* Full width */
    height: auto; /* Maintain aspect ratio */
    overflow: hidden; /* Prevent any part from overflowing */
  }

  /* Video Elements */
  video {
    width: 100%; /* Ensure videos fill their container */
    height: auto; /* Maintain aspect ratio */
    object-fit: cover; /* Prevent distortions */
  }

}

/* General Section Styling */
.website-content {
  flex: 2; /* Take up 2/3 of the section width */
  max-width: 60%; /* Restrict maximum width */
  margin-left: 100px;
}

.website-header {
  position: relative; /* Make the header a positioning context */
  margin-bottom: 2rem;
}

.website-title {
  font-size: 4rem; /* Large font for the title */
  font-weight: bold;
  color: #000;
  margin: 0; /* Remove any extra spacing */
}

.website-oval {
  font-size: 1rem; /* Smaller font for the oval text */
  font-weight: bold;
  color: #000;
  border: 3px solid black;
  padding: 0.3rem 1rem; /* Padding to create the oval shape */
  border-radius: 20px; /* Oval shape */
  margin-top: 0.5rem; /* Add some space between the title and oval */
  display: inline-block; /* Ensure it's treated as a block element */
  position: relative;
  left: 0; /* Align it to the left edge of the title */
  width: 100px
}

/* Number Section */
.website-number-section {
  display: flex; /* Arrange the number and text horizontally */
  align-items: flex-start; /* Align title to the top of the number */
  gap: 1rem; /* Space between the number and the content */
  margin-bottom: 2rem; /* Space between the sections */
  margin-left: 30px; /* Indent to align the number sections */
}

.section-number {
  font-size: 3rem; /* Large number size */
  font-weight: bold;
  color: #000;
}

.number-content {
  text-align: left; /* Align text to the left */
}

.section-title {
  font-size: 2rem; /* Title for Background and Solution */
  font-weight: bold;
  margin: 0; /* Remove extra spacing */
  display: inline-block; /* Prevent the title from wrapping unnecessarily */
  
}

.section-paragraph {
  font-size: 1rem;
  color: #333;
  margin-top: 0.5rem; /* Add space below the title */
  margin-left: 0rem; /* Align paragraph to the "B" in Background */
  max-width: 400px; /* Restrict paragraph width */
}

/* Top Section: Two Columns */
.website-top {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two equal columns */
  gap: 320px; /* Space between the columns */
  align-items: flex-start; /* Align text and image to the top */
  margin-bottom: 2rem; /* Space between top and bottom sections */
}

.website-content {
  display: flex;
  flex-direction: column;
}

.top-image img {
  width: 100%; /* Full width of its container */
  max-width: 600px; /* Restrict maximum width */
  border-radius: 8px; /* Optional rounded corners */
  margin-top: 30px;
}

/* Bottom Section: Two Columns */
.website-bottom {
  display: grid;
  grid-template-columns: 400px 500px; /* Two columns with specific widths */
  gap: 50px; /* Space between the columns */
  margin-left: 200px; /* Align to the paragraph text */
}

.website-bottom img {
  width: 100%; /* Full width of their container */
  height: auto; /* Maintain aspect ratio */
  border-radius: 8px; /* Optional rounded corners */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

#image2{
  width: 700px;
  margin-top: 150px;
}
/* Triangles at the Bottom */
.website-triangles {
  display: flex; /* Align triangles horizontally */
  justify-content: center; /* Center the triangles */
  align-items: center; /* Align them vertically */
  position: absolute; /* Place the triangles relative to the section */
  bottom: 0; /* Stick to the bottom of the section */
  left: 50%; /* Center horizontally within the section */
  transform: translateX(-50%); /* Adjust for proper centering */
  height: 80px; /* Match the triangle height */
  width: 80px; /* Combined width for both triangles */
}

.triangle {
  width: 40px;
  height: 40px;
  clip-path: polygon(0 0, 100% 0, 100% 100%); /* Triangle shape */
}

.triangle.black {
  background-color: #000000; /* Black triangle */
}

.triangle.white {
  background-color: #ffffff; /* White triangle */
  transform: translateX(-40px) rotate(180deg); /* Align with the black triangle */
}

/* Ensure the website-section has space for the triangles */
.website-section {
  position: relative; /* For absolute positioning of triangles */
  padding-bottom: 60px; /* Add space at the bottom for the triangles */
}

/* Responsive Adjustments for Small Screens */
@media screen and (max-width: 768px) {
  /* General Section Styling */
  .website-section {
    padding: 40px 20px; /* Add horizontal padding */
    background-color: #ffffff;
    margin-left: -130px; /* Align to the left edge */
  }

  /* Title and Subtitle */
  .website-title {
    font-size: 2.5rem; /* Adjust font size */
    text-align: left; /* Align title to the left */
    margin-bottom: 0.5rem; /* Add space below the title */
    
  }

  .website-oval {
    font-size: 0.9rem;
    padding: 0.2rem 1rem;
    border-radius: 20px;
    margin-top: 0.5rem;
    margin-left: 20px; /* Align to the left edge */
    display: inline-block;
  }

  /* Number Sections */
  .website-number-section {
    display: flex;
    align-items: flex-start; /* Align text with numbers */
    gap: 1rem; /* Space between the number and text */
    margin-bottom: 2rem;
    margin-left: 20px; /* Align to the left edge */
  }

  .section-number {
    font-size: 2.5rem; /* Adjust size for smaller screens */
    font-weight: bold;
  }

  .number-content {
    text-align: left; /* Align content to the left */
  }

  .section-title {
    font-size: 1.5rem; /* Adjust title size */
    font-weight: bold;
    margin-bottom: 0.5rem;
  }

  .section-paragraph {
    font-size: 1rem;
    margin-left: 0; /* Align paragraph text to the left */
  }

  /* Image Adjustments for Small Screens */
  .website-top {
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    align-items: flex-start; /* Align everything to the left */
    gap: 20px;
    margin-left: 20px; /* Align top content to the left */
  }

  .top-image img {
    width: 100%;
    max-width: 350px;
    margin-top: 20px; /* Add space between the text and the image */
    margin-left: 100px;
  }

  /* Bottom Section */
  .website-bottom {
    display: flex;
    flex-direction: column; /* Stack images vertically */
    align-items: flex-start; /* Align images to the left */
    gap: 20px;
    margin-left: 20px; /* Align to the left edge */
  }

  .website-bottom img {
    width: 90%; /* Adjust image size for smaller screens */
    max-width: 350px;
    height: auto;
    margin-left: 100px;
  }

  #image2{
    margin-top: 10px;
  }

  .website-triangles {
    width: 30px; /* Adjusted size for small screens */
    height: 15px; /* Adjusted height */
    position: absolute;
    bottom: 0; /* Stick to the bottom */
    left: 60%; /* Center horizontally */
    transform: translateX(-50%); /* Shift left by 50% of its own width */
  }

  .triangle {
    width: 15px;
    height: 15px;
    clip-path: polygon(0 0, 100% 0, 100% 100%); /* Triangle shape */
  }

  .triangle.black {
    background-color: #000000; /* Black triangle */
  }

  .triangle.white {
    background-color: #ffffff; /* White triangle */
    transform: rotate(180deg); /* Flip to form a square */
  }
}

/* General Section Styling */
.branding-section {
  padding: 0 60px;
  top: 0;
  background-color: #ffffff; /* White background */
  display: flex;
  flex-direction: column;
   /* Space between top and bottom sections */
  position: relative;
  /* max-height: 600px; */
  margin: 20px 0;

}

/* Top Section */
.branding-top {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two columns: text and icon */
  align-items: center;
  gap: 20px;
  padding-bottom: 200px;
}

.branding-title {
  font-size: 7rem; /* Large font size for title */
  font-weight: normal;
  text-align: left;
  margin-bottom: 10px;
}

.branding-subtitle {
  font-size: 2rem; /* Subtitle smaller size */
  font-weight: normal;
  text-align: left;
  margin-top: 0px;
}

.branding-icon {
  display: flex;
  justify-content: center;
  align-items: center;
}

.branding-icon img {
  width: 550px; /* Icon size */
  height: auto;
  object-fit: contain;
  margin-top: 0;
}

/* Bottom Section: Ovals */
.branding-ovals {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Three columns */
  gap: 20px; /* Space between the ovals */
}

.oval {
  display: flex;
  justify-content: space-between; /* Arrow aligned to the right */
  align-items: center;
  padding: 10px 20px;
  font-size: 1rem;
  font-weight: normal;
  border: 2px solid black; /* Outline */
  border-radius: 40px; /* Make it an oval */
  animation: flyIn 1s ease-out forwards;
  animation-delay: var(--delay); /* Delays for individual ovals */
  opacity: 0; /* Initially hidden */
}

.arrow {
  font-size: 1rem;
  margin-left: 10px; /* Space between text and arrow */
}

/* Fly-In Animation */
@keyframes flyIn {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@media screen and (max-width: 768px) {
  /* Branding Top Section */
  .branding-section{
    padding: 0;
    margin: 0;
  }
  .branding-top {
    display: flex;
    flex-direction: column; /* Stack content vertically */
    align-items: flex-start; /* Align to the left */
    gap: 5px; /* Space between elements */
    width: 100%; /* Ensure it spans the entire width */
    padding-left: 5%; /* Add padding for a neat alignment */
    padding-bottom: 0;
  }

  .branding-title {
    font-size: 4rem; /* Adjust the font size */
    font-weight: bold;
    width: 95%; /* Title spans most of the screen */
  }

  .branding-subtitle {
    font-size: 1.2rem; /* Smaller font size for the subtitle */
    width: 95%; /* Subtitle spans most of the screen */
    margin: 0;
  }

  /* Branding Icon */
  .branding-icon {
    display: flex;
    justify-content: center; /* Align to the left */
    width: 95%; /* Match the width of the text */
     /* Space between subtitle and icon */
  }

  .branding-icon img {
    width: 300px; /* Smaller icon for small screens */
    height: auto;
    padding: 0;
  }

  /* Branding Ovals */
  .branding-ovals {
    display: flex;
    flex-direction: column; /* Stack ovals vertically */
    gap: 15px; /* Add spacing between ovals */
    align-items: flex-start; /* Align ovals to the left */
    width: 90%; /* Occupy most of the screen width */
    padding-left: 5%; /* Align with the title and subtitle */
    margin-bottom: 20px;
  }

  .oval {
    display: flex;
    justify-content: space-between; /* Keep text and arrow aligned */
    align-items: center;
    /* padding: 10px 20px; */
    font-size: 1rem;
    border: 1px solid black; /* Oval border */
    border-radius: 40px; /* Create oval shape */
    width: 100%; /* Oval fills available space */
  }

  .arrow {
    font-size: 1rem;
    margin-left: 10px; /* Space between text and arrow */
  }
}

/* For Larger Screens */
@media screen and (min-width: 769px) {
  /* Branding Top Section */
  .branding-top {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    align-items: center; /* Vertically align items in both columns */
    gap: 20px; /* Space between the columns */
  }

  .branding-text {
    display: flex;
    flex-direction: column; /* Stack title and subtitle */
    gap: 10px; /* Space between the title and subtitle */
  }

  .branding-title {
    
    font-weight: bold;
    text-align: left; /* Left-align the title */
  }

  .branding-subtitle {
     /* Larger font for the subtitle */
    text-align: left; /* Left-align the subtitle */
  }

  /* Branding Icon */
  .branding-icon {
    display: flex;
    justify-content: center; /* Center the icon within its column */
    align-items: center;
  }

  .branding-icon img {
    /* Larger size for the icon on larger screens */
    height: auto; /* Maintain aspect ratio */
  }
}

/* General Styling for Awards Section */
.awards-section {
  background-color: #000; /* Black background */
  color: #fff; /* White text */
  padding: 60px 5%; /* Add padding for space around the section */
  position: relative;
}

/* Title Styling */
.awards-title {
  font-size: 7.5rem; /* Very large font size for the title */
  font-weight: bold;
  margin-bottom: 60px; /* Space below the title */
  text-align: left; /* Left-align the title */
  width: 50%; /* Title occupies half the screen width */
  margin-left: 5%; /* Indent the title slightly */
}

/* Grid Layout for Articles */
.awards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Four columns */
  gap: 24px; /* Reduced gap between cards (40% reduction) */
  padding-left: 21%; /* Align grid to start under the "d" in "Awards" */
  padding-right: 0; /* No right padding */
  justify-content: start; /* Align grid to the left */
}

.award-card {
  text-align: left; /* Align content to the left */
  display: flex;
  flex-direction: column; /* Stack content vertically */
  gap: 10px; /* Space between elements */
  max-width: 200px; /* Ensure card width matches image width */
}

.award-image {
  width: 200px; /* Restrict image width */
  height: auto; /* Maintain aspect ratio */
  border-radius: 8px; /* Slightly rounded corners */
}

.award-date {
  font-size: 0.9rem; /* Smaller font for the date */
  color: #aaa; /* Light gray text */
  margin-top: 10px;
  max-width: 200px; /* Match the image width */
}

.award-title {
  font-size: 1.1rem; /* Medium font for the title */
  font-weight: bold;
  line-height: 1.5;
  color: #fff; /* White text */
  text-decoration: underline; /* Underline the title */
  max-width: 200px; /* Restrict title width to match image width */
  white-space: normal; /* Allow text wrapping */
}

/* Hover Effect for Title */
.award-title:hover {
  color: #f0f0f0; /* Slightly lighter hover effect */
}

/* Responsive Design */
@media screen and (max-width: 1024px) {
  .awards-grid {
    grid-template-columns: repeat(2, 1fr); /* Two columns */
    gap: 16px; /* Reduce gap further for medium screens */
    padding-left: 10%; /* Adjust left padding for medium screens */
  }

  .awards-title {
    font-size: 5rem; /* Adjust title font size for medium screens */
    width: 70%; /* Title takes up 70% of screen width */
  }

  .award-image {
    width: 150px; /* Reduce image size on medium screens */
  }

  .award-card {
    max-width: 150px; /* Match card width to image size */
  }
}

@media screen and (max-width: 768px) {
  /* Title Styling for Small Screens */
  .awards-title {
    font-size: 4rem; /* Smaller font size */
    text-align: left; /* Left-align the title */
    margin-left: 5%; /* Indent title slightly */
    margin-bottom: 40px; /* Add spacing below the title */
    width: 90%; /* Title spans 90% of the screen */
  }

  /* Grid Layout for Articles */
  .awards-grid {
    grid-template-columns: repeat(2, 1fr); /* Two columns */
    gap: 16px; /* Adjust spacing between items */
    padding: 0 5%; /* Add padding on both sides */
  }

  /* Card Styling */
  .award-card {
    max-width: 100%; /* Cards span full width of their column */
    display: flex;
    flex-direction: column; /* Stack content vertically */
    gap: 8px; /* Reduce spacing between elements */
    text-align: left; /* Align text to the left */
  }

  /* Image Styling */
  .award-image {
    width: 100%; /* Images span full width of their container */
    height: auto; /* Maintain aspect ratio */
    border-radius: 8px; /* Rounded corners */
  }

  /* Date Styling */
  .award-date {
    font-size: 0.8rem; /* Slightly smaller font for the date */
    color: #aaa; /* Light gray text */
  }

  /* Title Styling */
  .award-title {
    font-size: 0.9rem; /* Adjusted font size for the title */
    font-weight: bold;
    line-height: 1.4; /* Tighter line height */
    text-decoration: underline; /* Underlined text */
    color: #fff; /* White text */
  }

  /* Adjust spacing and alignment */
  .awards-section {
    padding: 40px 5%; /* Adjust padding for small screens */
  }
}

/* General Styling for Clients Section */
.clients-section {
  background-color: #d8d8d8; /* Light gray background */
  padding: 60px 5%; /* Spacing around the section */
  text-align: center; /* Center-align text and content */
}

/* Title Styling */
.clients-title {
  font-size: 7.5rem; /* Large font size */
  font-weight: bold;
  margin-bottom: 40px; /* Space below the title */
  color: #000; /* Black text */
  text-align: left; /* Align the title to the left */
}

/* Grid Layout for Client Logos */
.clients-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Four columns */
  gap: 40px; /* Space between items */
  align-items: center; /* Center-align logos within the grid */
  justify-content: center; /* Center the grid content */
}

/* Individual Client Logo Styling */
.client-logo img {
  max-width: 100%; /* Responsive logos */
  height: auto; /* Maintain aspect ratio */
  display: block; /* Ensure no inline space */
  margin: 0 auto; /* Center-align the logos */
  max-height: 200px; /* Limit logo height */
}

/* Responsive Adjustments */
@media screen and (max-width: 1024px) {
  .clients-title {
    font-size: 5rem; /* Adjust title size for medium screens */
  }

  .clients-grid {
    grid-template-columns: repeat(3, 1fr); /* Three columns */
    gap: 30px; /* Reduce spacing */
  }
}

@media screen and (max-width: 768px) {
  .clients-title {
    font-size: 4rem; /* Smaller title font size for small screens */
    text-align: center; /* Center-align the title on small screens */
    max-width: 20px;
  }

  .clients-grid {
    grid-template-columns: repeat(2, 1fr); /* Two columns */
    gap: 90px; /* Reduce spacing further */
  }
  .client-logo img {
    max-width: 150px;
  }
}

@media screen and (max-width: 480px) {
  .clients-title {
    font-size: 3rem; /* Smaller title font size for very small screens */
  }

  .clients-grid {
    grid-template-columns: 1fr; /* Single column for smaller screens */
  }
}

/* General Footer Section Styling */
.footer-section {
  background-color: #000; /* Black background */
  color: #fff; /* White text */
  display: flex;
  flex-wrap: wrap; /* Wrap content for small screens */
  justify-content: space-between;
  padding: 60px 5%; /* Add padding for spacing */
  align-items: center; /* Center-align items */
}

/* VidaDesigns Title */
.footer-logo {
  font-size: 2rem; /* Slightly smaller font size */
  font-weight: bold; /* Bold font */
  margin-bottom: 20px; /* Space below the logo */
  color: #fff; /* White color */
}

/* Left Column */
.footer-left {
  flex: 1; /* Take up equal space */
  max-width: 50%; /* Limit width on large screens */
}

.footer-title {
  font-size: 7.5rem; /* Large title font size */
  font-weight: bold;
  margin: 0 0 20px; /* Add spacing below */
  line-height: 1.2;
  text-align: left;
}

.footer-subtitle {
  display: block;
  font-size: 7.5rem; /* Match title font */
  font-style: italic; /* Italicize the subtitle */
}

.footer-button {
  display: inline-block;
  font-size: 1.5rem;
  padding: 10px 30px;
  border: 2px solid #fff;
  background: transparent;
  color: #fff;
  border-radius: 30px;
  cursor: pointer;
  animation: flyIn 1.5s ease-out;
  text-align: center;
  margin-top: 20px; /* Space above the button */
}

/* Right Column */
.footer-right {
  flex: 1; /* Take up equal space */
  max-width: 50%; /* Limit width on large screens */
  text-align: right; /* Align content to the right */
}

.footer-right p {
  margin: 0 0 20px; /* Add spacing between text blocks */
  font-size: 1rem; /* Adjust font size */
  line-height: 1.5;
}

.footer-socials {
  display: flex;
  justify-content: flex-end;
  gap: 20px; /* Add spacing between icons */
}

.footer-socials a {
  font-size: 1.2rem; /* Icon size */
  color: #000; /* Black icon color */
  background-color: #fff; /* White background for contrast */
  text-decoration: none;
  border: 2px solid #fff; /* White border */
  border-radius: 50%; /* Circular icons */
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.footer-socials a:hover {
  background-color: #000; /* Black background on hover */
  color: #fff; /* White icon color on hover */
}

/* Animation for Button */
@keyframes flyIn {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Responsive Design */
@media screen and (max-width: 1024px) {
  .footer-title {
    font-size: 3.5rem; /* Adjust font size */
  }

  .footer-logo {
    font-size: 1.8rem; /* Adjust logo size for medium screens */
  }

  .footer-button {
    font-size: 1.2rem;
    padding: 8px 20px; /* Adjust button padding */
  }
}

@media screen and (max-width: 768px) {
  .footer-section {
    flex-direction: column; /* Stack the content vertically */
    align-items: flex-start; /* Align all content to the left */
    text-align: left; /* Left-align text */
    padding-left: 5%; /* Add some padding from the left edge */
  }

  .footer-left, .footer-right {
    max-width: 100%; /* Make columns full-width */
    margin-bottom: 20px; /* Add spacing between sections */
  }

  /* Footer Title */
  .footer-title {
    font-size: 2.5rem;
    font-weight: bold;
    margin: 0 auto 10px; /* Center title with spacing below */
    line-height: 1.2;
    width: 100%; /* Make title span the full width */
    text-align: left; /* Align text to the left */
  }

  .footer-subtitle {
    font-style: italic;
    display: block;
    font-size: 2.5rem;
    text-align: left; /* Align subtitle to the left */
  }

  /* Adjust Footer Section Padding for Better Alignment */
  .footer-section {
    padding: 20px 10px; /* Add left and right padding for space */
  }
  .footer-title, .footer-subtitle, .footer-logo {
    text-align: left; /* Ensure all titles are left-aligned */
  }

  .footer-right {
    text-align: left; /* Align contact details to the left */
  }

  .footer-socials {
    justify-content: flex-start; /* Align social icons to the left */
    gap: 15px; /* Maintain consistent spacing between icons */
  }
}



@media screen and (max-width: 480px) {
  .footer-title, .footer-subtitle {
    font-size: 4rem; /* Even smaller font */
  }

  .footer-logo {
    font-size: 1.4rem; /* Smaller logo */
  }

  .footer-button {
    font-size: 1rem;
    padding: 6px 15px; /* Adjust button size */
  }
}


/* font styling */

.cormorant-garamond-light {
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  font-style: normal;
}

.cormorant-garamond-semibold-italic {
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-style: italic;
}