/* General styles for body */
html, body {
    font-family: 'Roboto', sans-serif;
    max-width: 100%;
    height: 100%;
    overflow-x: hidden;
    background-color:aliceblue;
}

section {
    scroll-margin-top: 80px; /* height of your navbar */
}


/* Navbar styling */
.navbar {
    height: 80px; /* Set the height of the navbar */
    width: 100%;
    max-width: 100vw;
    background-color: #362003; /* Navbar background color */
    padding-left: 0; /* Remove left padding */
    padding-right: 0; /* Remove right padding */
    display: flex;
    justify-content: space-between; /* Space between logo and navbar items */
    align-items: center; /* Vertically align items */
}

/* Navbar container to remove padding */
.navbar .container {
    padding-left: 0px; /* Remove container's default padding */
    padding-right: 0px;
    max-width: 100%; /* Ensure the container takes full width */
    display: flex;
    justify-content: space-between; /* Ensure elements are spaced out */
    align-items: center;
}

/* Logo styling */
.navbar .logo {
    margin-left: 0; /* No margin to the left */
    padding-left: 0; /* No padding to the left */
    display: flex;
    align-items: center; /* Vertically center the logo */
    justify-content: flex-start; /* Align logo to the left */
}

.navbar .logo img {
    height: 64px; /* Set a fixed logo height */
    width: auto; /* Maintain aspect ratio */
    margin-left: 10px;
    
}

.navbar .logo-img {
    height: auto; /* Set a fixed logo height */
    max-width: 100%; /* Maintain aspect ratio */
    background-color: transparent;
    display: block;
}

/* Navbar brand styling */
.navbar .navbar-brand {
    color: #ffffff !important; /* White text color */
    font-size: 1.6rem; /* Adjust font size */
    font-weight: bold; /* Make the brand name bold */
    margin-left: 30px; /* Add small space between the logo and brand name */
}

/* Navbar toggle button styling */
.navbar-toggler {
    outline: none !important;
    border: none;
}

.navbar-toggler-icon {
    background-color: transparent; /* White hamburger icon */
    font-weight: bolder;
}

/* Navbar links styling */
.navbar-nav .nav-link {
    color: #ffffff !important; /* White text for the links */
    padding: 8px 15px; /* Padding for links */
    font-size: 1rem; /* Font size for links */
    margin-right: 10px;
}

.navbar-nav .nav-link:hover {
    color: #ffd700 !important; /* Hover color for links */
}

/* Navbar collapse settings for mobile */
.navbar-collapse {
    text-align: left; /* Align items to the left */
    background-color: #362003; /* Ensure background color is the same */
    width: 100%;
}

.navbar-collapse ul {
    padding: 0;
}

.navbar-collapse .nav-item {
    display: block; /* Stack nav items vertically when collapsed */
    padding: 5px 0;
}

/* Media Queries for responsive behavior */
@media (max-width: 1199px) {
    .navbar .navbar-brand {
        font-size: 1.4rem; /* Adjust font size for medium screens */
    }

    .navbar-nav {
        text-align: left; /* Align nav items to the left */
        background-color: #362003; /* Background for collapse */
    }

    .navbar-nav .nav-link {
        font-size: 1.2rem; /* Adjust font size for mobile screens */
        padding: 5px 0; /* Adjust padding */
        margin-left: 20px; /* Add margin to the left */
    }

    .navbar-collapse {
        width: 100%;
         /* Add margin on top */
    }
}

/* For smaller screens (max-width: 991px) */
@media (max-width: 991px) {
    .navbar .navbar-brand {
        font-size: 1.2rem; /* Further adjust font size for smaller screens */
    }

    .navbar .logo {
        margin-right: 10px; /* Space between logo and brand */
    }

    .navbar-nav .nav-link {
        font-size: 1.1rem; /* Adjust font size for mobile */
        padding: 10px 0;
        margin-left: 10px;
    }

    .navbar-collapse {
        width: 100%;
        margin-right: 0px;
    }
}

/* For extra small screens (max-width: 575px) */
@media (max-width: 575px) {
    .navbar .navbar-brand {
        font-size: 1rem; /* Adjust font size for very small screens */
    }

    .navbar-nav .nav-link {
        font-size: 1rem; /* Adjust font size for mobile screens */
        padding: 0px 10px; /* Adjust padding for mobile */
    }
}





/*---Hero---*/
#hero {
    height:100vh;
    overflow: hidden;
    position:relative;
    width: 100%; /* Full viewport width */
    object-fit:fill; /* Ensure the image stretches to fill the container without distortion */
}

#hero video {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100vh;
    z-index: 0;
    border-radius: 0 0 50% 50%;
    position: absolute;
    object-fit: cover;  /* fits hero exactly */

    
            
}

/* If you want a gradient overlay like before */
#hero::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100vh;
    background: linear-gradient(to right, rgba(240, 241, 239, 0), #362003);
    pointer-events: none; /* so content stays clickable */
}

#hero:before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: 100vw; /* Match the width to the full screen width */
    height: 100vh; /* Full viewport height */
    background: #362003;
    z-index: 0;
    border-radius: 0 0 50% 50%;
    transform: translateX(-50%) translateY(18px) rotate(2deg);
}

#hero .carousel-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    position: relative;
    z-index: 10;
}

#hero h2 {
    color: rgb(0, 0, 0);
    margin-bottom: 0;
    font-size: 48px;
    font-weight:bolder;
    top: 200px;
    position: relative; /* required for z-index */
    z-index: 10;        /* in front of overlays */
}

#hero p {
    width: 80%;
    margin: 0 auto 30px auto;
    color: #ffffff;
    text-shadow: 0 0 15px rgba(255,255,255,0.5);
    font-weight: bolder;
    font-size: large;
    top: 200px;
    position: relative; /* required for z-index */
    z-index: 10;        /* in front of overlays */
}

#hero .carousel-control-prev, 
#hero .carousel-control-next {
    width: 10%;
}

#hero .carousel-control-next-icon,
#hero .carousel-control-prev-icon {
    background: none;
    font-size: 48px;
    line-height: 1;
    width: auto;
    height: auto;
}

#hero .hero-btn {
    font-weight: bold;
    font-size: 16px;
    letter-spacing: 1px;
    display: inline-block;
    padding: 12px 32px;
    border-radius: 50px;
    transition: 0.5s;
    line-height: 1;
    margin: 10px;
    color: #000000;
    animation-delay: 0.5s;
    border: 2px solid #9ef596;
}

#hero .hero-btn:hover {
    background: #0a6801;
    color: #462b04;
    text-decoration: none;
}

/* Hero before and after elements adjustments */
@media (min-width: 1024px) {
    #hero p {
        width: 60%; /* Ensures paragraph has enough space on large screens */
    }

    #hero .carousel-control-prev,
    #hero .carousel-control-next {
        width: 5%; /* Maintains small size for carousel controls */
    }
}

@media (max-width: 768px) {
    #hero h2 {
        font-size: 28px; /* Adjust font size for medium screens */
    }

    #hero:after {
        width: 100vw; /* Ensures the background image stretches to full width */
        height: 100vh; /* Stretches the background image to full height */
        border-radius: 0 0 50% 50%;
        transform: translateX(-50%) rotate(0deg);
    }

    #hero:before {
        width: 100vw; /* Matches the width for small screens */
        height: 100vh; /* Full height for small screens */
        transform: translateX(-50%) translateY(20px) rotate(4deg);
    }
}

@media (max-width: 575px) {
    #hero:after {
        left: 50%;
        top: 0;
        position: absolute;
        width: 100vw; /* Ensure the background stretches to full width */
        height: 100vh; /* Ensure the background fills the screen */
        border-radius: 0 0 50% 50%;
        transform: translateX(-50%) rotate(0deg);
    }

    #hero:before {
        left: 50%;
        top: 0;
        width: 100vw; /* Full width for smaller screens */
        height: 100vh; /* Full height for smaller screens */
        border-radius: 0 0 50% 50%;
        transform: translateX(-50%) translateY(20px) rotate(4deg);
    }

    #hero h2 {
        font-size: 24px; /* Reduce font size more for small screens */
    }

    #hero p {
        font-size: 14px; /* Ensure paragraph text is readable */
    }
}


/*--End of Hero---*/
/*======About Us=========*/
.tabs .nav-pills .nav-item{
    margin-bottom: 10px;
}
.tabs .nav-pills .nav-item .nav-link{
    border-radius:4px;
    color:#000;
    font-weight:bold;
    border:1px solid rgba(20,54,1,0.6);
    font-size:20px;
    line-height: 2px;
}
.tabs .nav-pills .nav-item .nav-link span{
    color:#053001;
    font-size:30px;
}
.tabs .nav-pills .nav-item .nav-link.active{
    color:#fff;
    background:#362003;
    border:1px solid #ffa602;
}
.tabs .nav-pills .nav-item .nav-link.active span{
    color:#fff;
}
.tabs .tab-content{
    padding:0px;
    max-width: 80%;
    margin-top: 40px;
    
    
}
.tabs .tab-content h3{
    font-weight:bold;

}
.tabs .tab-content h3 a{
    color:#000000;
}
/* For smaller screens, the content can take full width */
@media (max-width: 991px) {
    .tabs .tab-content {
        max-width: 100%; /* Allow full width for smaller screens */
        margin: 0; /* No extra margin on small screens */
        font-size: 14px;
    }
}
/*======End of About Us=========*/
/*========Stories========*/
  /* Flexbox layout to align the logo and text */
  .row {
    display: flex;
    align-items: flex-start; /* Aligns items to the top */
    flex-wrap: wrap; /* Allows wrapping for smaller screens */
  }
  
  /* Logo column */
  .stories {
    flex: 0 0 auto; /* Prevents the image column from resizing */
    width: 100vw;
    margin-right: 1px; /* Adds space between the image and text */
    display: flex; /* Ensure the logo is aligned at the top */
    align-items: flex-start; /* Aligns the logo at the top */
    
  }
  /* Text column should take up the remaining space */
  
  
  /* Optional: Adjust the logo size in the navbar */
  .navbar .logo {
    max-width: 50px; /* Adjust logo size as needed */
    margin-right: 5px; /* Space on the right side of the logo */
    float: left;
  }
  
  /* Adjust logo size for smaller screens */
  @media (max-width: 768px) {
    .navbar .logo img {
      max-width: 100%; /* Reduce the logo size on smaller screens */
      float: left;
    }
    .tabs .nav-pills .nav-item .nav-link{
        font-size: 20px;
    }
    .col-md-4 {
      flex: 0% 0 40%; /* Keeps the image width at 40% on smaller screens */
    }
    .col-md-8 {
      flex: 1; /* Ensures text column still takes remaining space */
      float: left;
    }
    
  }
  
/*========End of the Stories========*/
/*============Projects Section=======*/
.project-container {
    position: center;
    overflow: hidden;
    width: fit-content;
    max-width: 400px;
    height: auto;
    margin-top: 25px;
}

.fixed-size {
    width: 100%;    /* Ensures the image takes up the full width of its container */
    height: 300px;  /* Adjust the height to your preferred size */
    object-fit: cover;
}

.outline {
    display: inline-block;
    vertical-align: middle;
    transform: perspective(2px) translateZ(0);
    box-shadow: 0 0 1px rgba(37, 2, 2, 0);
    position: relative;
}

.outline:before {
    content: '';
    position: center;
    border: #7ff677 solid 2px;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    opacity: 0;
    transition-duration: 0.3s;
    transition-property: opacity;
}

.outline:hover:before,
.outline:focus:before,
.outline:active:before {
    opacity: 1;
}

.grow:hover,
.grow:focus,
.grow:active {
    box-shadow: 0 2px 2px 1px #5c4703;
    transform: scale(1.2); /* Zoom in effect (larger value for stronger zoom) */
}

/* Media Query Adjustments for Smaller Screens */
@media (max-width: 768px) {
    .project-container {
        margin: 0 auto;
        max-width: 90%; /* Ensure images don't stretch too wide on smaller screens */
        text-align: center; /* Centers the text under the image */
    }

    /* For the image inside .outline */
    .outline img {
        width: 100%; /* Makes the image fill the container width */
        height: auto; /* Maintain aspect ratio */
        border-radius: 10%;
    }

    .row {
        display: flex;
        flex-wrap: wrap;
        justify-content: center; /* Centers the items horizontally */
    }

    .col-10 {
        flex: 1 1 100%; /* Make each project container take full width on small screens */
        text-align: center;
        margin: 0px 0;
    }

    .col-md-6 {
        flex: 1 1 100%; /* Adjusts the column size for medium screens */
    }

    .col-lg-6 {
        flex: 1 1 100%; /* Adjusts the column size for large screens */
    }
}

/* Larger screen adjustments */
@media (min-width: 1024px) {
    .row {
        display: flex;
        justify-content: space-between; /* Distribute space between items */
        flex-wrap: wrap;
    }

    .outline img {
        border-radius: 10%;
    }

    .col-10 {
        flex: 1 1 50%; /* Make the project container take up 50% of the width on large screens */
    }
}

/*====end of Projects Section======*/
/*====Team Section======*/
.team {
    padding: 60px 0 30px 0;
    margin-top: 0px;
}

.team .team-1 {
    text-align: center;
    margin-bottom: 80px;
    position: relative;
    max-width: 350px; /* Set a default max width */
    margin: 0 auto; /* Center the card */
}

.team .team-1 .pic {
    border-radius: 4px;
    overflow: hidden;
}

.team .team-1 img {
    transition: all ease-in-out 0.4s;
    width: 100%; /* Ensures the image takes up the full width of the card */
    height: auto;
    max-height: 300px; /* Set a max height for the image */
}

.team .team-1:hover img {
    transform: scale(1.1);
}

.team .team-1 .team-info {
    position: absolute;
    bottom: -48px;
    left: 20px;
    right: 20px;
    background: linear-gradient(360deg, #cabd02 0%, rgba(187, 240, 152, 0.9) 35%, #ffa602 100%);
    padding: 15px 0;
    border-radius: 4px;
}

.team .team-1 h4 {
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 16px;
    color: #000000;
    position: relative;
    padding-bottom: 10px;
}

.team .team-1 h4:after {
    content: "";
    position: absolute;
    display: block;
    width: 50px;
    height: 1px;
    background: #1d3501;
    bottom: 0;
    left: calc(50% - 25px);
}

.team .team-1 span {
    font-style: italic;
    display: block;
    font-size: 13px;
    color: #000000;
}

.team .team-1 .social {
    margin-top: 15px;
}

.team .team-1 .social a {
    transition: color 0.3s;
    color: #362003;
}

.team .team-1 .social a:hover {
    color: #fff;
}

.team .team-1 .social i {
    font-size: 16px;
    margin: 0 2px;
}

/* Centering the team */
@media (max-width: 992px) {
    .team .team-1 {
        margin-bottom: 100px;
    }
}

/* Ensuring the single team item is centered */
.row.justify-content-center {
    display: flex;
    justify-content: center;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .team .team-1 {
        width: 70%; /* Adjust the width to 70% for tablets */
        max-width: 300px; /* Reduce max width */
        max-height: 350px; /* Adjust max height for smaller screens */
        margin-bottom: 0px;
    }
}

@media (max-width: 576px) {
    .team .team-1 {
        width: 80%; /* Adjust the width to 80% for mobile screens */
        max-width: 250px; /* Further reduce the max width */
        max-height: 250px; /* Reduce max height for small screens */
    }
}

/*====end of Team Section======*/
/*==========Finished projects======*/
/* Default styling for project-item */
.project-item {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%; /* Ensure width is full */
    height: 470px; /* Fixed height for all carousel items */
    margin: auto;
}

/* Styling for the overlay text */
.project-item .text {
    display: flex;
    flex-direction: column; /* Stack the text vertically */
    justify-content: flex-end; /* Align text at the bottom */
    height: 100%;
    width: 100%;
    background-color: rgba(38, 41, 39, 0.4); /* Darker overlay for better text visibility */
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    padding: 10px;
    opacity: 1; /* Always visible */
    transition: opacity 0.25s ease-out; /* Smooth transition effect */
}

/* Description inside the text box */
/* Carousel Caption Styling */
.project-item .text .des {
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent overlay for readability */
    padding: 20px;
    border-radius: 10px;
    max-width: 80%;
    margin: 20px auto;
}

.project-item .text .des h2 {
    font-size: 30px;        /* Large, bold title */
    font-weight: 700;       /* Bold font */
    text-transform: uppercase;
    margin-bottom: 15px;
    color: #FFD700;         /* Golden/yellow for emphasis */
    text-align: center;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.7);
}

.project-item .text .des p {
    font-size: 20px;         /* Large, readable paragraph */
    font-weight: 400;        /* Regular weight for clarity */
    line-height: 1.6;
    color: #FFFFFF;          /* White for contrast */
    text-align: center;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
}

/* Hover effect for darkening text container */
.project-item:hover .text {
    background-color: rgba(38, 41, 39, 0.7); /* Darken the background on hover */
}

/* Carousel item images */
.carousel-item img {
    object-fit: cover; /* Ensures the image covers the area without distortion */
    width: 100%; /* Make sure the image takes up the full width of the container */
    height: 100%; /* Make sure the image takes up the full height of the container */
    transition: transform 0.3s ease-in-out;
}

/* Optional: Add a zoom effect when hovering over the image */
.project-item:hover img {
    transform: scale(1.05); /* Slight zoom on hover */
}

/* Additional adjustments for carousel controls */
.carousel-control-prev-icon, .carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.5);
}

/* Styling for carousel indicators (optional) */
.carousel-indicators li {
    background-color: #fff;
}

/* Optional: Styling for the carousel container if needed */
#pictorialsCarousel {
    position: relative;
    overflow: hidden;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .project-item {
        height: 350px; /* Adjust height on smaller screens */
    }

    .carousel-item img {
        height: 100%; /* Ensure image fills the container on small screens */
    }

    .project-item .text .des h2 {
        font-size: 14px;
    }

    .project-item .text .des p {
        font-size: 10px;
    }
}



/*==========End of the Finished projects======*/
/* Footer Section */
.footer {
    background: linear-gradient(#ffa602, rgba(0, 59, 37, 0.4));
    padding: 60px 0 30px 0;
    color: #000;
    font-size: 15px;
    position: relative;
    clear: both;
}

/* Footer Top Section */
.footer .footer-top {
    padding: 0 0 30px 0;
}

/* Footer Description */
.footer .footer-top .footer-des {
    margin-top: -60px;
    margin-bottom: 15px;
    background: #362003;
    color: #fff;
    border-top: 4px solid #b3f19b;
    text-align: center;
    padding: 30px 20px;
}

.footer .footer-top .footer-des h3 {
    font-size: 24px;
    margin: 0 0 2px 0;
    padding: 2px 0 2px 0;
    line-height: 1;
    font-weight: bold;
}

.footer .footer-top .footer-des p {
    font-size: 14px;
    line-height: 24px;
    margin-bottom: 0;
}

/* Social Links */
.footer .footer-top .social-links a {
    font-size: 18px;
    display: inline-block;
    background: #b3f19b;
    color: #053001;
    line-height: 1;
    padding: 8px 0;
    margin-right: 4px;
    border-radius: 50%;
    text-align: center;
    width: 36px;
    height: 36px;
    transition: 0.3s;
}

.footer .footer-top .social-links a:hover {
    background: #053001;
    color: #fff;
    text-decoration: none;
}

/* Links Styling */
.footer .footer-top h4 {
    font-size: 16px;
    font-weight: bold;
    color: #000;
    position: relative;
    padding-bottom: 12px;
}

.footer .footer-top .footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer .footer-top .footer-links ul i {
    padding-right: 2px;
    color: #000;
    font-size: 18px;
    line-height: 1;
}

.footer .footer-top .footer-links ul li {
    padding: 10px 10px;
    display: inline-block;
    gap: 1px;
    line-height: 1;
    align-items: center;
}

.footer .footer-top .footer-links ul a {
    color: #000;
    transition: 0.3s;
    display: inline-block;
    line-height: 1;
}

.footer .footer-top .footer-links ul a:hover {
    color: #053001;
}

/* Newsletter Form */
.footer .footer-top .footer-newsletter form {
    margin-top: 30px;
    background: #fff;
    padding: 6px 10px;
    position: relative;
    border-radius: 4px;
}

.footer .footer-top .footer-newsletter form input[type="email"] {
    border: 0;
    padding: 4px;
    width: calc(100% - 110px);
}

.footer .footer-top .footer-newsletter form input[type="submit"] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    border: 0;
    background: none;
    font-size: 16px;
    padding: 0 20px;
    background: #053001;
    color: #fff;
    transition: 0.3s;
    border-radius: 4px;
}

.footer .footer-top .footer-newsletter form input[type="submit"]:hover {
    background: #b3f19b;
    color: #053001;
}

/* Stack all footer content in a single column */
.footer .footer-top .footer-des, 
.footer .footer-top .footer-links, 
.footer .footer-top .footer-newsletter {
    text-align: center;
    width: 100%;
    margin-bottom: 20px;
}

.footer .footer-top .footer-links ul {
    text-align: center;
}

/* Responsive Design - Stack vertically on smaller screens */
@media (max-width: 768px) {
    .footer .footer-top .footer-des {
        margin-top: -30px;
    }

    .footer .footer-top .footer-links ul {
        text-align: center;
    }

    .footer .footer-top .footer-newsletter form input[type="email"] {
        width: 100%;
    }

    .footer .footer-top .footer-newsletter form input[type="submit"] {
        width: 100%;
        padding: 10px;
    }
}