@media screen and (max-width: 768px) {
}

#text {
 color: white;
 text-align: left;
 font-size: 20px;
 padding-left: 0px;
 padding-right: 190px;
 font-family: 'Playfair Display', serif;
}

.holder {
   max-width: 100%;
   overflow: hidden;
}

body {
      margin: 0;
      padding: 0;
      font-family: 'Lato', sans-serif;
      display: flex;
    }

    header {
      background-color: #333;
      padding: 5px;
      color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-family: 'Montserrat', sans-serif;
    }

    nav {
      text-align: right;
    }

    nav a {
      color: #fff;
      text-decoration: none;
      margin-left: 70px;
    }

.icon {
 color: white;
}

.container5 {
    width: 100%;
    text-align: center; /* Optional: Center the image within the container */
    position: relative;
    overflow: hidden;

}

.responsive-image {
    width: 100%;
    height: auto;
   
}


.image-text {
    position: absolute;
    top: 320px; /* Adjust the top position as needed */
    left: 50%;
    font-weight: bold;
    transform: translateX(-50%);
    color: white; /* Adjust text color as needed */
    font-size: 50px; /* Adjust font size as needed */
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    border-right: .15em solid orange; /* The typwriter cursor */
    white-space: nowrap; /* Keeps the content on a single line */
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */
    letter-spacing: .10em; /* Adjust as needed */
  animation: 
    typing 3.5s steps(33, end),
    blink-caret .75s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 60% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: white; }
}


.carousel-container {
    overflow: hidden;
    width: 100%; /* Set the width of the container */
    margin: auto;
}

.carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out; /* Animation transition */
}

.carousel-item {
    min-width: 100%;
    box-sizing: border-box;
}

.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    color: white;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 10px;
}

.left-arrow {
    left: 15px;
}

.right-arrow {
    right: 15px;
}

.vertical-container {
    display: flex;
    height: 40vh;
}

.image-container,
.text2-container {
    width: 100%; /* Adjust the width as needed */
    box-sizing: border-box;
    padding: 10px;
    height: auto;
}

.image-container img {
    width: 100%;
    height: auto;
}

.text2-container {
    background-color: #f4f4f4; /* Optional: Add a background color to the text side */
    top: 10%;
    text-align: center;
    padding: 20px;  
  
}

h2, p {
    margin: 0;
}

.text1-container {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.8); /* Adjust background color and opacity */
    padding: 20px;
    box-sizing: border-box;
    opacity: 0;
    animation: slideInFromTop 1s forwards;
    font-variant: small-caps;
    font-weight: normal;
}

h1 {
    margin: 0;
}

.building {
    display: block;
    width: 100%;
    height: auto;
}

@keyframes slideInFromTop {
    0% {
        transform: translate(-50%, -100%);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, 0);
        opacity: 1;
    }
}


.footer {
    background-color: #333;
    color: white;
    padding: 5px;
    text-align: center;
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2px;
}

.footer-content p {
 color: white;
}

.contact-container {
    display: flex;
    flex-direction: column;
    align-items: left;
    margin: 20px;
}

.contact-item {
    display: flex;
    align-items: left;
    margin: 2px;
}

i {
    font-size: 20px;
    margin-right: 10px;
}

.contact {
   font-size: 20px;
   text-align: left;
   font-variant: small-caps;
}


.horizontal-container {
    width: 150%; /* Adjust the width as needed */
    box-sizing: border-box;
    top-padding: 10px;
    height: 10%;
    height: 50vh;
}

.image-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* Adjust the number of columns as needed */
            gap: 20px;
            max-width: 1000px; /* Adjust the maximum width of the grid */
            justify-content: center;
            align-items: center;
            height: 65vh;
        }

        .image-item {
            position: relative;
            overflow: hidden;
            left: 70%;
        }

        .image-item img {
            width: 130%;
            height: auto%;
            display: block;
            transition: transform 0.3s ease;
            width: 100%;
            height: 200px;
            object-fit: cover;
            border-radius: 8px 8px 0 0;
        }

        .image-item:hover img {
            transform: scale(1.1);
        }

        .image-title {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            opacity: 0;
            transition: opacity 0.3s ease;
            text-align: center;
            color: #fff;
        }

        .image-item:hover .image-title {
            opacity: 1;
        }

.project {
  text-align: center;
  font-size: 25px;
  font-weight: bold;
  font-variant: small-caps
}
        
h3 {
  text-align: center;
  font-size: 16px;
  font-weight: normal;
}

h5 {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  height: 1vh;
}

.container2 {
            display: flex;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            height: 35vh;
        }

        .section1 {
            flex: 1;
            padding: 5px;
            border-right: 0px solid #ccc; /* Add a border to separate the sections */
        }

        .section1:last-child {
            border-right: none; /* Remove the border from the last section */
        }

h6 {
text-align: left;
font-size:20px;
padding: 5px;
font-weight: normal;
margin-top: 0px; 
}

.section {
      text-align: center;
      padding: 20px;
    }

    .section img {
      max-width: 100%;
      height: auto;
      border-radius: 8px; /* Optional: Add rounded corners to images */
    }

    h2 {
      margin-bottom: 10px;
    }

.container1 {
  display: flex;
  width: 40%; /* Adjust the width as needed */
  font-family: Arial, sans-serif;
  align-items: center;
  justify-content: center;
  height: 38vh; /* Adjust the height as needed */
  padding-left: 500px;
 
}

.image {
  flex: 1;
  padding: 20px;
}

.image img {
  max-width: 100%;
  height: auto;
  border-radius: 8px; /* Optional: Add rounded corners to images */
}

.text {
  flex: 1;
  padding: 20px;
  box-sizing: border-box;
}

h2 {
  margin-bottom: 10px;
  font-family: Brush Script MT, Brush Script Std;
  font-weight: normal;
}

.work {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  height: 3vh;
  font-variant: small-caps;
  
}

.container2 {
            display: flex;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            height: 30vh;
        }

        .section {
            flex: 1;
            padding: 20px;
            border-right: 0px solid #ccc; /* Add a border to separate the sections */
        }

        .section:last-child {
            border-right: none; /* Remove the border from the last section */
        }

.sentence {
   text-align: left;
   font-size: 20px;
   font-weight: normal;
}


.title {
  text-align: center;
  font-size: 25px;
  font-weight: bold;
  height: 3vh;
  font-variant: small-caps;
}

.set-container {
    display: flex
    margin-bottom: 20px;
}

.image-container_s {
    flex: 1;
}

.text-container_s {
    flex: 1;
    margin-left: 20px; /* Adjust the margin as needed */
}

img {
    max-width: 100%;
    height: auto;
}

.title1 {
  font-size: 25px;
  font-weight: bold;
  height: 3vh;
  font-variant: small-caps;
}

.vertical-container_s {
    display: flex;
    height: 25vh;
}

.image-container,
.text2-container_s {
    width: 100%; /* Adjust the width as needed */
    box-sizing: border-box;
    padding: 10px;
    height: auto;
}

.image-container img {
    width: 100%;
    height: auto;
}

.text2-container_s {
    background-color: #f4f4f4; /* Optional: Add a background color to the text side */
    top: 10%;
    text-align: center;
    padding: 20px;  
  
}

h2, p {
    margin: 0;
}

.centered-container-s {
    display: flex;
    align-items: center;
    padding-right: 80px;
}

.image-container-s {
    flex: 1;
}

.text-container-s {
    flex: 1;
    margin-left: 20px; /* Adjust the margin as needed */
}

img {
    max-width: 100%;
    height: auto;
    padding-right: 80px;
}

.a {
    max-width: 100%;
    height: auto;
    padding-left: 100px;
}

.s {
  text-align: left;
  font-size: 25px;
  font-weight: bold;
  height: 3vh;
  font-variant: small-caps;
  
}

.s1 {
  text-align: left;
  font-size: 17px;
  font-weight: normal;
  padding-left: 5px;
}

.ul {
  font-size: 20px;
  text-align: left;
  
}


.image-text-s {
    position: absolute;
    top: 250px; /* Adjust the top position as needed */
    left: 50%;
    font-weight: bold;
    transform: translateX(-50%);
    color: #FFAE42; /* Adjust text color as needed */
    font-size: 50px; /* Adjust font size as needed */
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    border-right: .15em solid orange; /* The typewriter cursor */
    white-space: nowrap; /* Keeps the content on a single line */
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */
    letter-spacing: .10em; /* Adjust as needed */
    animation: 
        typing 1.5s steps(2, end),
        blink-caret .25s steps(1, end) forwards; /* Use "forwards" to keep the final state */
}

/* The typing effect */
@keyframes typing {
    from { width: 0 }
    to { width: 20% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: #FFAE42; }
    to { border-color: transparent; } /* Added to hide the cursor at the end of animation */
}


.enquiries-form {
    width: 100%;
    height: auto;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h2 {
    text-align: center;
    color: #333;
}

form {
    display: flex;
    flex-direction: column;
}

.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}

.form-group label {
    margin-bottom: 5px;
}

input,
textarea {
    padding: 2px;
    margin-top: 5px;
    margin-bottom: 10px;
    margin-left:150px;
    margin-right:150px;
}

input[type="submit"] {
    background-color: #333;
    color: #fff;
    cursor: pointer;
    margin-left:650px;
    margin-right:650px;
    padding: 7px;
    border-radius: 5px;
}

input[type="submit"]:hover {
    background-color: #45a049;
}

.enquire {
  text-align: center;
  font-size: 25px;
  font-weight: normal;
  height: 3vh;
  font-variant: small-caps;
  padding-left: 500px;
  
}

.image-container-a {
    text-align: center;
    padding-left: 300px;
}

img {
    max-width: 100%;
    height: auto;
}

.vertical-container_a {
    display: flex;
    height: 55vh;
}

.text2-container_a {
    background-color: #f4f4f4; /* Optional: Add a background color to the text side */
    top: 10%;
    text-align: center;
    padding: 20px;
}

.core-values {
    display: flex;
}

.value {
    text-align: center;
    margin: 0 80px;
    padding-left:50px;
    padding-right:50px;
}

.value i {
    font-size: 50px;
    margin-bottom: 10px;
    color: #555555;
}

.value p {
    margin: 0;
    font-weight: bold;
}

.core-values-a {
    display: flex;
}

.value-a {
    text-align: center;
    margin: 0 40px;
    padding-left:200px;
}

.value-a i {
    font-size: 50px;
    margin-bottom: 10px;
    color: #555555;
}

.value-a p {
    margin: 0;
    font-weight: bold;
}


.carousel-item-a {
    position: relative;
    text-align: center;
}

.carousel-item-a img {
    width: 100%;
    height: auto;
}

.text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff; /* Text color */
    text-align: center;
}

.text-overlay h2 {
    margin: 0;
}

.text-overlay p {
    margin: 10px 0;
}



.mission-vision-section {
    padding: 20px;
    background-color: #f4f4f4;
}

.section-title h2 {
    text-align: left;
    margin-bottom: 20px;
    font-family: Arial, sans-serif;
    color: #333;
}

.content-container {
    display: flex;
    justify-content: space-around;
    text-align: left;
}

.mission-vision-section {
    padding: 40px 20px;
    background-color: #f4f4f4;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.box {
    flex: 1;
    margin: 0 10px; /* Space between the boxes */
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
}

h3 {
    color: black;
    margin-bottom: 15px;
    text-align: center;
    font-size: 25px;
    font-weight: bold;
    height: 3vh;
    font-variant: small-caps;

}

p {
    font-family: Arial, sans-serif;
    color: #555;
    text-align: left;
    line-height: 1.6;
    margin-bottom: 10px;
}

.no-bullets {
    list-style-type: none; /* Removes bullets */
    padding-left: 0;      /* Removes default padding */
    margin: 0;            /* Removes default margin */
    text-align: center;
}

.middle {
text-align: center;
}

.middle1 {
   text-align: center;
}

.reno{
  text-align: center;
  font-size: 25px;
  font-weight: bold;
  height: 3vh;
  font-variant: small-caps;
}

.expertise {