/* Ensure full height and no margin or padding */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    
}

/* Container for the section */
.why-choose-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 20px; 
  
   
   
}


/* Main Content Container */
.why-choose-container-content-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 130px;
    width: 100%;
   

}

/* Hero Section Layout */
.why-choose-container-content-container-card-hero {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1270px;
    gap: 30px;
   
    transition: height 0.3s ease;
}



/* Left Section Styling */
.first-left-side-card-why-choose-section {
    flex: 1;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    gap: 20px;
  
}

/* Heading and Paragraph Styling */
.left-side-content-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.left-side-content-card .heading {
    color: var(--Colors-Text-Color, #000);
    /* Serif/Heading/Se H2 */
    font-family: "DM Serif Display";
    font-size: 61px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%; /* 61px */
}

.left-side-content-card .paragraph {
	color: var(--Color-Text-Color-def, #000);
    margin-top: 61px;
    font: 31px / 37px DM Serif Display, -apple-system, Roboto, Helvetica, sans-serif;
    width: 543px;
	
    /*color: #000;
    font-family: "DM Serif Display", serif;
    font-size: 2vw; 
    font-weight: 400;
    line-height: 1.4;
    margin: 0;*/
}

/* Buttons Styling */
.buttons-left-side {
    display: flex;
    align-items: flex-start;
    gap: 25px;
}

.buttons-left-side .first-button,
.buttons-left-side .second-button {
    display: flex;
    padding: 16px 16px 16px 31px;
    align-items: center;
    gap: 10px;
    border-radius: 61px;
    font-family: "Familjen Grotesk";
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
}

.buttons-left-side .first-button {
    background: #992E00;
    color: #F2F1ED;
    border: none;
}

.buttons-left-side .second-button {
    background: transparent;
    border: 1px solid #992E00;
    color: #992E00;
}

/* Right Section Styling */
.first-right-side-card-why-choose-section {
    align-items: center;
    flex: 1;
    min-width: 300px;
    
}

.first-right-side-card-why-choose-section .image {
    width: 100%;
    max-height: 600px;
    object-fit: cover;
    border-radius: 20px;
}

/* Additional Empty Cards */
.why-choose-container-content-container-card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    padding: 20px;
   
}

/* Bottom Section */
.why-choose-container-bottom-card {
    width: 100%;
    height: 50px;
    background: #f2f2f2;
}

.smallview{
		display:none;
}
@media(max-width: 768px){
	
.largeview{
		display:none; 
}
	.smallview{
		display:flex;
}

}

/* Responsive Media Queries */

/* Medium Devices (Tablets) */
@media (max-width: 768px) {
    .why-choose-container-content-container-card-hero {
        flex-direction: column;
        gap: 20px;
    }

    .first-left-side-card-why-choose-section, 
    .first-right-side-card-why-choose-section {
        min-width: 100%;
        padding: 15px;
    }

    .left-side-content-card .heading {
        font-size: 6vw; /* Adjust font size for smaller devices */
    }

    .left-side-content-card .paragraph {
        font-size: 3vw; /* Adjust font size for smaller devices */
    }

    .buttons-left-side {
        flex-direction: column;
        gap: 15px;
    }

    .first-right-side-card-why-choose-section .image {
        max-height: 400px;
    }
}

/* Small Devices (Phones) */
@media (max-width: 480px) {
	.buttons-left-side {
        flex-direction: row;
        gap: 15px;
    }

    .why-choose-container {
        padding: 0px;
    }

    .left-side-content-card .heading {
        font-size: 8vw; /* Adjust for phone */
    }

    .left-side-content-card .paragraph {
        /*font-size: 4vw;*/ /* Adjust for phone */
		 /*font: 20px / 27px DM Serif Display, -apple-system, Roboto, Helvetica, sans-serif; */
		
		color: var(--Color-Text-Color-def, #000);  
		margin-top: 0px !important;
        font: 20px / 24px DM Serif Display, -apple-system, Roboto, Helvetica, sans-serif !important;
        width: 100% !important;
    }

    .buttons-left-side .first-button, 
    .buttons-left-side .second-button {
        padding: 14px 10px;
        font-size: 14px;
    }

    .first-right-side-card-why-choose-section .image {
        max-height: 300px;
    }
	.why-choose-container-content-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		gap: 10px;
		width: 100%;
	}
	.ritik-column{
		height: 70vh !important; /* Example: Full viewport height, adjust as needed */
		display: flex; /* Flexbox for alignment purposes */
		flex-direction: column;
		justify-content: flex-end; /* Align the flex children to the bottom */
	}
}


/* second section */

.why-choose-container-content-container-card-subcard {
    display: flex;
    flex-wrap: wrap; /* Allows cards to wrap */
    justify-content: space-between; /* Distribute cards evenly */
    align-items: stretch; /* Ensure all cards are of equal height */
    width: 100%;
    height: 100vh; /* Full viewport height */
    max-width: 1270px;
    gap: 20px; /* Adjusted for better spacing */
    padding: 10px; /* Ensure padding around the container */
   
}



.second-section-card {
    display: flex;
    flex-direction: column; /* Stack content vertically */
    justify-content: space-between; /* Space between content inside the card */
    align-items: flex-start;
    width: calc(33.333% - 20px); /* Three cards per row on large screens */
    height: 100%; /* Make each card take the full height of its container */
  
    border-radius: 8px;
   gap:20px;
    padding: 20px;
    transition: transform 0.3s ease;
}
.second-section-card .heading {
    color: black;
    font-size: 40px;
    font-family: DM Serif Display;
    font-weight: 400;
    line-height: 40px;
    word-wrap: break-word;
    margin: 0;
}

.second-section-card .heading2 {
   
    color: black;
    font-size: 25px;
    font-family: DM Serif Display;
    font-weight: 400;
    line-height: 30px;
    word-wrap: break-word;
    margin: 0;
}

/* Paragraph Styles */
.second-section-card .paragraph {
    color: black;
    font-size: 16px;
    font-family: Familjen Grotesk;
    font-weight: 400;
    line-height: 22.40px;
    word-wrap: break-word;
    margin: 0;
}


.left-side-content-card .paragraph {
    /*font-family: "DM Serif Display", serif;
    font-size: 18px;
    font-weight: 400;
    color: #000;
    line-height: 1.6;
    margin: 0;*/
	color: var(--Color-Text-Color-def, #000);
    margin-top: 61px;
    font: 31px / 37px DM Serif Display, -apple-system, Roboto, Helvetica, sans-serif;
    width: 543px;

}

.short-content-card{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.second-section-card img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 4px;
    margin-top: 20px;
   
}

.second-section-card .image-card {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; /* Ensures the image card fills the parent card height */
    overflow: hidden; /* Prevents overflow of the image */
}

.second-section-card .image-card .second-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the parent container while maintaining aspect ratio */
    border-radius: 4px; /* Adds consistent border-radius */
}


/* Responsive Design */

/* Extra small screens (phones) */
@media (max-width: 480px) {
    .why-choose-container-content-container-card-subcard {
        flex-direction: column;
        height: auto; /* Allow height to adjust for small screens */
    }

    .second-section-card {
        width: 100%; /* Full width */
        height: auto; /* Adjust height */
    }
}

/* Medium screens (tablets) */
@media (min-width: 481px) and (max-width: 768px) {
    .why-choose-container-content-container-card-subcard {
        flex-wrap: wrap;
    }

    .second-section-card {
        width: 48%; /* Two cards per row */
        height: 100%; /* Full height for each card */
    }
}

/* Large screens (desktops) */
@media (min-width: 769px) {
    .second-section-card {
        width: calc(33.333% - 20px); /* Three cards per row */
        height: 100%; /* Full height for each card */
    }
}


/* third Section Styling */

.flex-end {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

.cycle-image-class-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    width: 100%;
    height: 100%;
}

.cycle-image-class-container img {
    width: 100%;
    max-width: 300px; /* Limit the cycle image size */
    height: auto;
    object-fit: contain;
    border-radius: 50%; /* Circular image */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* List Styling */
.unorder-list {
    margin: 0;
    padding-left: 20px; /* Bullet indentation */
    padding-bottom: 10px;
    list-style-type: disc;
}

/* Responsive Design */

/* Medium screens (tablets) */
@media (max-width: 768px) {
    .why-choose-container-content-container-card-subcard {
        flex-wrap: wrap; /* Allow wrapping */
        height: auto; /* Adjust height for smaller screens */
    }

    .second-section-card {
        width: 48%; /* Two cards per row */
        margin-bottom: 20px;
    }
}

/* Small screens (phones) */
@media (max-width: 480px) {
    .why-choose-container-content-container-card-subcard {
        flex-direction: column; /* Stack cards vertically */
        height: auto;
    }

    .second-section-card {
        width: 100%; /* Full width */
    }
}







/*  this is forth section  */
/* Styling for resized images */
.resize-image-small,
.resize-image-small-cycle {
    width: 100%; /* Default full width */
    max-width: 200px; /* Limit the maximum width */
    height: auto; /* Maintain aspect ratio */
    object-fit: cover; /* Scale the image without stretching */
    margin: 10px 0; /* Add spacing between images */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add a shadow for better visuals */
}

.resize-image-small-cycle {
    border-radius: 50%; /* Make the image circular */
    margin: 20px auto; /* Center the image horizontally */
}

/* Styling for the third card */
.go{
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center items horizontally */
    justify-content: center; /* Center items vertically */
    text-align: center; /* Center-align text (if any) */
}

/* Responsive design adjustments for smaller screens */
@media (max-width: 768px) {
    .resize-image-small,
    .resize-image-small-cycle {
        max-width: 150px; /* Reduce size for medium screens */
    }
}

@media (max-width: 480px) {
    .resize-image-small,
    .resize-image-small-cycle {
        max-width: 120px; /* Further reduce size for small screens */
    }
}



/* five section */

.second-section-card-content-end {
    display: flex;
    flex-direction: column; /* Already correct */
    align-items: flex-end;  /* Align content to the end horizontally */
    justify-content: flex-end; /* Align content to the end vertically */
    height: 100%; /* Ensure the container takes full height for proper alignment */
    gap:20px;
}

/* six section */

.ritik-column{
    height: 100vh; /* Example: Full viewport height, adjust as needed */
    display: flex; /* Flexbox for alignment purposes */
    flex-direction: column;
    justify-content: flex-end; /* Align the flex children to the bottom */
}


.resize-image-small{
    width: 50px;
    height: 50px;
}


/* Footer Container */
/* Main Footer Container */
.why-choose-container-footer-container {
    background-color: #8a2c0b; /* Dark burnt orange background */
    color: #fff; /* White text color */
    padding: 60px 40px; /* Spacing around the content */
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 2rem;
  }
  
  /* Footer Content Wrapper */
  .footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    width: 100%;
    flex-wrap: wrap; /* Ensures responsiveness */
  }
  
  /* Left Section */
  .footer-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  .text-card .headings {
    font-family: "DM Serif Display", serif;
    font-size: 48px;
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
  }
  
  .footer-buttons {
    display: flex;
    gap: 16px;
  }
  
  .footer-button {
    padding: 12px 24px;
    font-size: 16px;
    font-family: "Familjen Grotesk", sans-serif;
    border-radius: 30px;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.3s ease;
  }
  
  .apply-button {
    background-color: #fff;
    color: #8a2c0b;
    border: none;
  }
  
  .international-button {
    background-color: transparent;
    color: #fff;
    border: 2px solid #fff;
  }
  
  .footer-button:hover {
    opacity: 0.8;
  }
  
  /* Right Section */
  .footer-right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  
  .footer-image-container {
    width: 100%;
    max-width: 450px;
    aspect-ratio: 3 / 4; /* Adjusts the height automatically */
    position: relative;
    overflow: hidden;
    border-radius: 50% 50% 0 0; /* Creates the top arched effect */
  }
  
  .footer-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* Responsive Design */
  @media (max-width: 1024px) {
    .footer-content {
      flex-direction: column;
      text-align: center;
      align-items: center;
      gap: 20px;
    }
  
    .footer-right {
      justify-content: center;
    }
  
    .footer-image-container {
      max-width: 350px;
    }
  
    .text-card .headings {
      font-size: 36px;
    }
  
    .footer-button {
      font-size: 14px;
      padding: 10px 20px;
    }
  }
  
  @media (max-width: 768px) {
    .footer-content{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .footer-buttons{
        justify-content: center;
        align-items: center;
       }
    .text-card .headings {
      font-size: 28px;
    }
  }


  @media (max-width: 440px) {
   .footer-buttons{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
   }

   .footer-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  }
  


.ftr{
    padding-top: 5rem;
}