* {
    box-sizing: border-box;
}

body {
    background: url("../assets/img/gallery/background.png") no-repeat center center fixed;

    background-size: 105% 105%;
    color: white;
    font-family: 'Lexend Deca', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    /* Ensure no default margin */
    padding: 0;
    /* Ensure no default padding */
    overflow-x: hidden;
    overflow-y: hidden;
}

main {
    width: 100%;
    height: 100vh;
    overflow-y: scroll;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    /* scroll-snap-type: y proximity; */
}

main>section {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

    scroll-snap-align: start;
    scroll-snap-stop: always;
    /* background-color: #ED2C10; */
}

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.aife {
    align-items: flex-end;
}

.w50 {
    width: 50%;
}


.container {
    max-width: 1024px;
    margin: 0 auto;
    /* overflow-x: hidden; */
    align-items: center;

}

.container.blur-active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    /* Semi-transparent overlay */
    backdrop-filter: blur(10px);
    /* Adjust blur intensity as needed */
    z-index: 0;
    /* Ensure it's behind the content but in front of the modal */
    pointer-events: none;
    /* Allow interaction with underlying content */
}

#galleryModal {
    z-index: 4;
    /* Ensure it appears above the blur effect */
}

.section-1 {
    position: relative;
    /* Ensure the section is positioned relative */
}

.logo-container {
    position: fixed;
    /* left: 130%;
      bottom: 10%; */
    left: 90%;
    bottom: 6%;
    transition: height 0.3s ease-out;
    padding: 10px;
    transform: translate(0px, 40px);
    z-index: 999;
    /* Adjust padding as needed */
}

.logo-container img {
    width: 50%;
}

/* @media only screen and (min-width: 1024px) and (max-width: 1600px) {
    .logo-container {
      bottom: 9%;
      left: 95%;
    }
  }
  
  @media only screen and (min-width: 1600px) and (max-width: 1800px) {
    .logo-container {
      bottom: 9%;
      left: 95%;
    }
  } */

.logo-image {
    width: 50px;
    /* Adjust size as needed */
    height: auto;
    /* Maintain aspect ratio */
}

.section__pinned {
    padding: 0 0;
    height: 100vh;
    width: 100%;
    overflow: visible;
    left: 0% !important;
    /* background-color: blue; */
}

.scene {
    /* perspective: 1000cm; */
    /* perspective-origin: 69% -148%; */

    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    align-items: center;
    z-index: 1;
    perspective: 2288px;
    perspective-origin: 50% 50%;
    transform: translate(0px, 40px);

}

.image-container1 {
    display: flex;
    /* gap: 200px; */
    flex-direction: row;
    /* Stack images vertically */
    align-items: center;
    /* Center images horizontally */
    justify-content: center;

    position: absolute;
    left: 95%;
    /* Adjust as needed */
    top: 15%;
    /* Adjust this value to move the container closer to the cube */
    z-index: 1;
    /* Ensure it is above other elements */
    transform: rotateZ(0deg) rotateX(27deg) rotateY(0deg) translate(-350px, -300px) scale(1) skewX(-40deg);
    /* Adjust if needed to move the container up */
    transition: transform 0.5s ease;
    opacity: 0;
}

.image-container1.resized-image-container {
    opacity: 1;

    transform: rotateZ(0deg) rotateX(27deg) rotateY(0deg) translate(-300px, -157px) scale(1) skewX(-30deg)
}


/* 
    .image-container1 img {
      display: block;
      width: auto;
    
      height: auto;
  
    
    } */
.image-container1 img {
    display: block;
    width: 145px;
    height: 85px;
}

.cube {

    position: fixed;
    width: 70vmin;
    height: 55vmin;
    transform-style: preserve-3d;

    transform: skew(27deg, -4deg)translate(0px, 0px);

}

.face {
    position: fixed;
    width: 70vmin;
    height: 55vmin;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;

    overflow: hidden;
    color: white;
    /* border: 20px solid black; */

}

.front {
    transform: translateZ(40vmin)translateX(40vmin);

    background: linear-gradient(to top, #121212, #1e1e1e);
    transition: transform 0.5s ease;
}

.front.resized-gap4 {
    transform: translateZ(40vmin)translateX(0vmin);
}


.back {
    transform: rotateY(180deg) translateZ(30vmin);


}

.left {
    transform: rotateY(230deg) rotateX(337deg) translateZ(50vmin) translateY(-106px) translateX(-148px);
    background: black;


}

.right {
    height: 30vmin;
    transform: rotateY(90deg) translateZ(30vmin);

}

.top {
    transform: rotateX(90deg) translateZ(30vmin);

}

.face.top {
    display: flex;
    flex-direction: row;
    /* Change this to row to display images next to each other */
    align-items: center;
    justify-content: center;
}

.qr-code img,
.logo-image img {
    width: 150px;
    /* Set a fixed width for square shape */
    height: auto;
    /* Set the same value as width for square shape */
    object-fit: cover;
    /* Ensure the image covers the square without distortion */
    margin: 0 70px;

}

.reach-us-button {
    display: inline-block;
    padding: 2px 30px;
    color: #E7432B;
    background-color: #121212;
    border: 1px solid #E7432B;
    /* Red border */
    text-decoration: none;
    font-size: 18px;
    margin-top: 2%;
    margin-bottom: 3%;
    margin-left: 7%;
    /* border-radius: 2px; */
    letter-spacing: normal;
    /* Optional: rounded corners */
    transition: background-color 0.3s, color 0.3s;
    /* Smooth transition */
}

.reach-us-button:hover {
    background-color: #E7432B;
    color: #FFFFFF;
}

.getintouch-page {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


.get-form {
    display: none;
    position: fixed;
    top: 0%;
    left: 21%;
    transform: translate(6%, 0%);
    z-index: 1000;
    background: rgba(51, 51, 51, 0.3);
    /* background-color: transparent; */
    padding: 50px;
    /* box-sizing: border-box; */

    margin-top: 5%;
    width: 52%;
    /* height: 100%; */
    overflow-x: hidden;
    overflow-y: auto;
    /* border-radius: 8px; */
    box-shadow: 0 10px 10px 10px rgb(0, 0, 0);
}



#contact-form {
    /* background-color: transparent;  */
    border: 1px solid #0f0f0f;
    /* Optional border for better visibility */
    padding: 10px 50px;
    margin: 50px 0px;
    /* Adjust padding as needed */
    /* border-radius: 8px; */
    /* Optional border radius for rounded corners */
}

/* .gray-box {
    background-color: #3F3F3F;
  
    border-radius: 5px;
   
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  
    margin-top: 50px;
   
    margin-left: 0%;
} */

.get-form .getintouch-page {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: left;

    position: relative;

}

/* CSS for blur effect */
.blur-active {
    position: relative;
    overflow: hidden;
    filter: blur(20px);
    /* Ensure the blur effect does not overflow */
}






.contact-header {
    width: 100%;
    /* Ensure it takes full width of its container */
    margin-left: 0;
    /* Shift header to the left */
    /* Optional: add space below the header */
    text-align: left;
    /* Align text to the left */
}

.contact-header h1 {
    color: #F41111;
    font-size: 50px;
    margin: 0;
    transform: translate(0%);

    /* Remove default margins if needed */
}

.contact-content {

    display: flex;
    justify-content: space-evenly;
    gap: 0px;
    width: 100%;
}

.send-message1 {
    flex: 1;
    padding-right: 20px;
}

.contact-info1 {
    flex: 1;
    padding-left: 0px;
    padding-right: 0px;
    margin-left: 4%;
}

.send-message1 h2,
.contact-info1 h2 {
    color: white;
    font-size: 24px;
    margin-bottom: 10px;
}

.send-message1 p,
.contact-info1 p {
    color: white;
    font-size: 16px;
    line-height: 28px;
}

.form-fields {
    /* display: flex; */
    flex-wrap: wrap;
    margin-bottom: 20px;

}

.form-group {
    /* width: 48%; */
    margin-bottom: 20px;
    margin-right: 5px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    color: white;
}

.form-group input {
    width: 100%;
    /* Full width of the form group */
    padding: 5px 0;
    /* Padding on top and bottom */
    border: none;
    /* Remove default border */
    border-bottom: 1px solid #ccc;
    /* Single line underline */
    background: transparent;
    /* Transparent background */
    color: white;
    font-size: 16px;
    /* Adjust font size as needed */
    box-sizing: border-box;
    /* Ensure padding is included in width */
}

.form-group input:focus {
    border-bottom: 1px solid #E7432B;
    /* Change underline color on focus */
    outline: none;
    /* Remove default focus outline */
}

.submit-button {
    background-color: rgba(51, 51, 51, 0.3);
    color: #E7432B;
    border-color: #E7432B;
    border-width: 0.5px;
    padding: 0px 30px;
    border-radius: 0px;
    font-size: 20px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-left: 70%;
}

.submit-button:hover {
    background-color: #E7432B;
    color: #FFFFFF;
}

@media only screen and (min-width: 1024px) and (max-width: 1600px) {
    .submit-button {
        margin-left: 63%;


    }
}

@media only screen and (min-width: 1600px) and (max-width: 1800px) {
    .submit-button {
        margin-left: 66%;

    }
}

.contact-info1 .call-us1,
.contact-info1 .visit-us1 {
    margin-bottom: 20px;
}

.contact-info1 h2 {
    color: white;
}

.contact-info1 p {
    color: white;
    font-size: 16px;
    line-height: 28px;
}


.get-heading h1 {
    color: red;
    margin-left: 10%;

}

.close-button-form {
    position: absolute;
    top: 10px;
    /* Adjust as needed */
    right: 10px;
    /* Adjust as needed */
    background: transparent;
    border: none;
    color: white;
    font-size: 30px;
    /* Adjust size as needed */
    cursor: pointer;
    z-index: 10001;
    display: block;
    border-radius: 100%;
    /* Ensure it is above other content */
}

.close-button-form:hover {
    color: #E7432B;
    /* Change color on hover if needed */
}


.get-heading {

    position: relative;
    font-size: 3.5vmin;
    width: 100%;

    /* Optional: center text if desired */
}

.get-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 700px;
    height: 20px;
    background: rgb(7, 7, 7);
}


.get-message {
    position: relative;
    width: 100%;
    padding-bottom: 20px;
    /* Ensure there's space for the border */
    /* background: linear-gradient(to top, #121212, #1e1e1e); */
}

.get-message::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 700px;
    height: 20px;
    background: rgb(7, 7, 7);
}

.get-message h2 {

    margin-left: 10%;

}

.get-message button {
    background-color: #E7432B;
    /* Red color for the button */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.get-message,
.get-callvisit {
    font-size: 1.7vmin;
}

.get-callvisit {
    display: flex;
    gap: 70px;
    width: 100%;
    margin-left: 10%;
    padding-bottom: 10%;
    /* background: linear-gradient(to top, #121212, #1e1e1e); */
}

/* DIRECTORS */
.scened {
    perspective: 1409px;
    /* perspective-origin: -1% -1%; */
    /* margin-top: 30vw;
  margin-bottom:30vw ; */
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    align-items: center;
    z-index: 1;
    transform: translate(-4%, -20px);
    /* background: blue; */


}

.directors-text {
    position: absolute;
    /* top: 11%; */
    left: -50%;
    /* Adjst this value to position it correctly */
    /* transform: scaleY(0.8); */
    top: 0%;
    width: 85%;
    z-index: 2;

    transition: left 0.5s ease;
}

/* .directors-text .img{
    width: 9%;
  } */

.directors-text.resized-gap2 {
    left: 0%;
}

/* 
  @media only screen and (min-width: 1024px) and (max-width: 1280px) {
    .directors-text.resized-gap2 {
      transform: scaleX(1) scaleY(0.7) translateX(0px) translateY(0px);
      left: 20%;
  
  
    }
  }
  
  @media only screen and (min-width: 1300px) and (max-width: 1480px) {
    .directors-text.resized-gap2 {
      transform: scaleX(1) scaleY(0.69) translateX(0px) translateY(0px);
      left: 25%;
  
  
    }
  }
  
  @media only screen and (min-width: 1480px) and (max-width: 1600px) {
    .directors-text.resized-gap2 {
      transform: scaleX(1) scaleY(0.8) translateX(0px) translateY(0px);
      left: 11%;
      top: 7%;
  
  
    }
  } */

.directors-text img {
    height: auto;
    width: 10%;
    transform: scaleX(1.2);
}



/* @media only screen and (min-width: 1600px) and (max-width: 1800px) {
      .directors-text {
        transform: scaleX(1) scaleY(.80) translateX(0px) translateY(0px);
        top: 5%;
      }
    }  */

.cubed {
    position: relative;
    width: 70vh;
    height: 70vh;
    transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    perspective: 1409px;
    /* -webkit-transform: scaleX(1.3) scaleY(1) scaleZ(0.8) rotateX(0deg) rotateY(10.53deg) rotateZ(0deg) translateX(-80px) translateY(-100px) translateZ(0px) skewX(0deg) skewY(-9deg);
    -moz-transform: scaleX(1.3) scaleY(1) scaleZ(0.8) rotateX(0deg) rotateY(10.53deg) rotateZ(0deg) translateX(-80px) translateY(-100px) translateZ(0px) skewX(0deg) skewY(-9deg);
    transform: scaleX(1.3) scaleY(1) scaleZ(0.8) rotateX(0deg) rotateY(10.53deg) rotateZ(0deg) translateX(-80px) translateY(-100px) translateZ(0px) skewX(0deg) skewY(-9deg);
    z-index: 1;  */
    /* background: yellow; */

}

/* @media only screen and (min-width: 1024px) and (max-width: 1280px) {
    .cubed {
      position: relative;
      width: auto;
      height: 50vmin;
      transform-style: preserve-3d;
      transform: scaleX(1) scaleY(0.9) scaleZ(0.8) rotateX(0deg) rotateY(10.53deg) rotateZ(0deg) translateX(-66px) translateY(-130px) translateZ(0px) skewX(0deg) skewY(-9deg);
  
  
  
    }
  }
  
  @media only screen and (min-width: 1300px) and (max-width: 1480px) {
    .cubed {
      position: relative;
      width: auto;
      height: 50vmin;
      transform-style: preserve-3d;
      transform: scaleX(1) scaleY(0.9) scaleZ(0.8) rotateX(0deg) rotateY(10.53deg) rotateZ(0deg) translateX(-50px) translateY(-130px) translateZ(0px) skewX(0deg) skewY(-9deg);
  
  
  
    }
  }
  
  @media only screen and (min-width: 1480px) and (max-width: 1600px) {
    .cubed {
      position: relative;
      width: auto;
      height: 50vmin;
      transform-style: preserve-3d;
      transform: scaleX(1.3) scaleY(1) scaleZ(0.8) rotateX(0deg) rotateY(10.53deg) rotateZ(0deg) translateX(-60px) translateY(-100px) translateZ(0px) skewX(0deg) skewY(-9deg);
  
  
  
    }
  }
  
  @media only screen and (min-width: 1600px) and (max-width: 1800px) {
    .cubed {
      position: relative;
      width: auto;
      height: 50vmin;
      transform-style: preserve-3d;
      transform: scaleX(1.3) scaleY(1) scaleZ(0.8) rotateX(0deg) rotateY(10.53deg) rotateZ(0deg) translateX(-80px) translateY(-100px) translateZ(0px) skewX(0deg) skewY(-9deg);
  
  
  
    }
  } */

.faced {
    position: absolute;
    width: 70vh;
    height: 70vh;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;

    overflow: visible;
    color: white;


}


.frontd {
    /* transform: translateZ(40vmin); */
    /* transform: translateZ(50vmin) translateX(30vmin); */
    transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform: scaleX(1) scaleY(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(80%) translateY(50px) translateZ(0px) skewX(0deg) skewY(-10deg);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 20px;
    width: 70vh;
    height: 70vh;
    justify-content: center;
    align-items: center;
    transition: transform 0.8s ease;
    z-index: 999
        /* background: red; */
}

.frontd.resized-gap2 {
    transform: scaleX(1) scaleY(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(20%) translateY(50px) translateZ(0px) skewX(0deg) skewY(-10deg);
}




.backd {
    transform: rotateY(180deg) translateZ(30vmin);

}

.leftd {
    transform: rotateY(-90deg) translateZ(30vmin) translateX(30vmin);


}

.leftd.resized-gap3 {
    transform: rotateY(-90deg) translateZ(30vmin) translateX(30vmin);
    background: blue;
}



.rightd {

    transform: rotateY(90deg) translateZ(30vmin);

}

.topd {
    transform: rotateX(90deg) translateZ(30vmin);


}

.bottomd {
    transform: rotateX(-90deg) translateZ(30vmin);

}

.directors-heading {
    font-size: 60px;
    font-style: italic;
    text-shadow: #555;
    color: gray;
    transform: rotateX(180deg) rotateY(180deg) translateX(0%) translateY(0%) scaleY(1.3)scaleX(7);

    writing-mode: vertical-lr;
    /* Ensures vertical text orientation */
}

.directors-card {
    display: flex;
    height: 17vh;
    /* width: 240px; */
    background: linear-gradient(to top, #111111 30%, #1a1919 92%);
    align-items: center;
    justify-content: center;
    position: relative;
    /* Required for pseudo-elements positioning */
    z-index: 1;
}

/* Top border */
.directors-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 140px;
    /* Adjust the length of the top border */
    height: 0.5px;
    /* Border thickness */
    background: linear-gradient(to left, #3b3a3a, #111111);
}

/* Right border */
.directors-card::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    /* Border thickness */
    height: 140px;
    /* Adjust the length of the right border */

    background: linear-gradient(to bottom, #3b3a3a, #111111);
}

.directors-info {
    flex: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    z-index: 1;
    color: #fff;
    /* Ensures the text is visible on the dark background */
}

.directors-info h2 {
    margin: 9px;
    font-size: 22px;
}

.directors-img {
    height: auto;
    width: 8vw;
    margin-right: 10px;
    margin-left: 20px;
    margin-top: 100px;
    margin-bottom: 100px;
    overflow: hidden;
    flex: 0 0 140px;

}

.directors-img img {
    width: 100%;
    height: 100%;
    filter: grayscale(100%);
    object-fit: cover;
    transition: transform 0.3s ease, filter 0.3s ease;
    /* Combine transform and filter transitions */
}


.directors-info {

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    z-index: 1;
}



.directors-card:hover .directors-img img {
    filter: grayscale(0%);
    transform: scale(1.2);
}

.directors-info h2 {
    color: red;
    /* font-size: medium; */
    letter-spacing: normal;
}



.directorssection {
    margin-left: -15vw;
    align-items: center;
    z-index: 1;
}

.angle-container {
    position: relative;
    width: 200px;
    height: 200px;


}

@media only screen and (min-width: 1024px) and (max-width: 1600px) {
    .angle-container {
        transform: scaleX(0.90) scaleY(0.90) translateX(0%) translateY(0%);



    }
}

@media only screen and (min-width: 1600px) and (max-width: 1800px) {
    .angle-container {
        transform: scaleX(0.90) scaleY(0.90) translateX(0%) translateY(0%);


    }
}

.line-group {
    display: flex;
    flex-direction: column;
    /* Stack items vertically */
    align-items: center;
    /* Center items horizontally within each group */
    margin: 10px;
    /* Adjust spacing between groups */
}

.lined {
    position: absolute;
    width: 0.5px;
    height: 150px;
    background-color: rgb(75, 72, 72);
    transform: rotate(20deg);



}

.line1-1d {
    top: -190%;

    left: -140%;
    transform: rotate(90deg);
    transform-origin: bottom;
    background: linear-gradient(to bottom, rgb(126, 123, 123), transparent);


}

@-moz-document url-prefix() {
    .line1-1d {
        transform: rotate(90.1deg);
    }
}

.line1-2d {
    top: -190%;
    left: -65%;
    transform: rotate(120deg);
    transform-origin: bottom;
    background: linear-gradient(to bottom, transparent, rgb(126, 123, 123));

}

.line2-1d {
    top: -220%;

    left: -140%;
    transform: rotate(90deg);
    transform-origin: bottom;
    background: linear-gradient(to bottom, (126, 123, 123), transparent);


}

@-moz-document url-prefix() {
    .line2-1d {
        transform: rotate(90.1deg);
    }
}

.line2-2d {
    top: -220%;
    left: -65%;
    transform: rotate(120deg);
    transform-origin: bottom;
    background: linear-gradient(to bottom, transparent, (126, 123, 123));

}

.line3-1d {
    top: -270%;

    left: -140%;
    transform: rotate(90deg);
    transform-origin: bottom;
    background: linear-gradient(to bottom, rgb(126, 123, 123), transparent);


}

@-moz-document url-prefix() {
    .line3-1d {
        transform: rotate(90.1deg);
    }
}

.line3-2d {
    top: -270%;
    left: -65%;
    transform: rotate(120deg);
    transform-origin: bottom;
    background: linear-gradient(to bottom, transparent, rgb(126, 123, 123));

}

.line4-1d {
    top: -330%;

    left: -140%;
    transform: rotate(90deg);
    transform-origin: bottom;
    background: linear-gradient(to bottom, rgb(126, 123, 123), transparent);


}

@-moz-document url-prefix() {
    .line4-1d {
        transform: rotate(90.1deg);
    }
}

.line4-2d {
    top: -330%;
    left: -65%;
    transform: rotate(120deg);
    transform-origin: bottom;
    background: linear-gradient(to bottom, transparent, rgb(126, 123, 123));

}

.line5-1d {
    top: -400%;

    left: -140%;
    transform: rotate(90deg);
    transform-origin: bottom;
    background: linear-gradient(to bottom, rgb(126, 123, 123), transparent);


}

@-moz-document url-prefix() {
    .line5-1d {
        transform: rotate(90.1deg);
    }
}

.line5-2d {
    top: -400%;
    left: -65%;
    transform: rotate(120deg);
    transform-origin: bottom;
    background: linear-gradient(to bottom, transparent, rgb(126, 123, 123));

}

.line6-1d {
    top: -430%;

    left: -140%;
    transform: rotate(90deg);
    transform-origin: bottom;
    background: linear-gradient(to bottom, rgb(126, 123, 123), transparent);


}

@-moz-document url-prefix() {
    .line6-1d {
        transform: rotate(90.1deg);
    }
}

.line6-2d {
    top: -430%;
    left: -65%;
    transform: rotate(120deg);
    transform-origin: bottom;
    background: linear-gradient(to bottom, transparent, rgb(126, 123, 123));

}

.line7-1d {
    top: -520%;

    left: -140%;
    transform: rotate(90deg);
    transform-origin: bottom;
    background: linear-gradient(to bottom, rgb(126, 123, 123), transparent);


}

@-moz-document url-prefix() {
    .line7-1d {
        transform: rotate(90.1deg);
    }
}

.line7-2d {
    top: -520%;
    left: -65%;
    transform: rotate(120deg);
    transform-origin: bottom;
    background: linear-gradient(to bottom, transparent, rgb(126, 123, 123));

}

.line8-1d {
    top: -550%;

    left: -140%;
    transform: rotate(90deg);
    transform-origin: bottom;
    background: linear-gradient(to bottom, rgb(126, 123, 123), transparent);


}

@-moz-document url-prefix() {
    .line8-1d {
        transform: rotate(90.1deg);
    }
}

.line8-2d {
    top: -550%;
    left: -65%;
    transform: rotate(120deg);
    transform-origin: bottom;
    background: linear-gradient(to bottom, transparent, rgb(126, 123, 123));

}

/* right side lines */
.line-1dr {
    top: -551%;

    left: 560%;
    transform: rotate(120deg);
    ;
    transform-origin: bottom;
    background: linear-gradient(to bottom, rgb(126, 123, 123), transparent);

}

.line-2dr {
    top: -513.5%;
    left: 625%;
    transform: rotate(90deg);
    ;
    transform-origin: bottom;
    background: linear-gradient(to bottom, transparent, rgb(126, 123, 123));

}

.line-1dr1 {
    top: -527.5%;
    left: 560%;
    ;
    transform: rotate(120deg);
    ;
    transform-origin: bottom;
    background: linear-gradient(to bottom, rgb(126, 123, 123), transparent);

}

.line-2dr1 {
    top: -490%;
    left: 625%;
    transform: rotate(90deg);
    transform-origin: bottom;
    background: linear-gradient(to bottom, transparent, rgb(126, 123, 123));

}

@-moz-document url-prefix() {
    .line-2dr1 {
        transform: rotate(90.1deg);
    }
}

.line-1dr2 {
    top: -477.5%;

    left: 560%;
    transform: rotate(120deg);
    ;
    transform-origin: bottom;
    background: linear-gradient(to bottom, rgb(126, 123, 123), transparent);

}

.line-2dr2 {
    top: -440%;
    left: 625%;
    transform: rotate(90deg);
    ;
    transform-origin: bottom;
    background: linear-gradient(to bottom, transparent, rgb(126, 123, 123));

}

@-moz-document url-prefix() {
    .line-2dr2 {
        transform: rotate(90.1deg);
    }
}

.line-1dr3 {
    top: -407.5%;

    left: 560%;
    transform: rotate(120deg);
    ;
    transform-origin: bottom;
    background: linear-gradient(to bottom, rgb(126, 123, 123), transparent);

}

.line-2dr3 {
    top: -370%;
    left: 625%;
    transform: rotate(90deg);
    ;
    transform-origin: bottom;
    background: linear-gradient(to bottom, transparent, rgb(126, 123, 123));

}

@-moz-document url-prefix() {
    .line-2dr3 {
        transform: rotate(90.1deg);
    }
}

.line-1dr4 {
    top: -357.5%;

    left: 560%;
    transform: rotate(120deg);
    ;
    transform-origin: bottom;
    background: linear-gradient(to bottom, rgb(126, 123, 123), transparent);

}

.line-2dr4 {
    top: -320%;
    left: 625%;
    transform: rotate(90deg);
    ;
    transform-origin: bottom;
    background: linear-gradient(to bottom, transparent, rgb(126, 123, 123));

}

@-moz-document url-prefix() {
    .line-2dr4 {
        transform: rotate(90.1deg);
    }
}

.line-1dr5 {
    top: -317.5%;

    left: 560%;
    transform: rotate(120deg);
    ;
    transform-origin: bottom;
    background: linear-gradient(to bottom, rgb(126, 123, 123), transparent);

}

.line-2dr5 {
    top: -280%;
    left: 625%;
    transform: rotate(90deg);
    ;
    transform-origin: bottom;
    background: linear-gradient(to bottom, transparent, rgb(126, 123, 123));

}

@-moz-document url-prefix() {
    .line-2dr5 {
        transform: rotate(90.1deg);
    }
}

.line-1dr6 {
    top: -297.5%;

    left: 560%;
    transform: rotate(120deg);
    ;
    transform-origin: bottom;
    background: linear-gradient(to bottom, rgb(126, 123, 123), transparent);

}

.line-2dr6 {
    top: -260%;
    left: 625%;
    transform: rotate(90deg);
    ;
    transform-origin: bottom;
    background: linear-gradient(to bottom, transparent, rgb(126, 123, 123));

}

@-moz-document url-prefix() {
    .line-2dr6 {
        transform: rotate(90.1deg);
    }
}

.line-1dr7 {
    top: -207.5%;

    left: 560%;
    transform: rotate(120deg);
    ;
    transform-origin: bottom;
    background: linear-gradient(to bottom, rgb(126, 123, 123), transparent);

}

.line-2dr7 {
    top: -170%;
    left: 625%;
    transform: rotate(90deg);
    ;
    transform-origin: bottom;
    background: linear-gradient(to bottom, transparent, rgb(126, 123, 123));

}

@-moz-document url-prefix() {
    .line-2dr7 {
        transform: rotate(90.1deg);
    }
}

.line-1dr8 {
    top: -177.5%;

    left: 560%;
    transform: rotate(120deg);
    ;
    transform-origin: bottom;
    background: linear-gradient(to bottom, rgb(126, 123, 123), transparent);

}

.line-2dr8 {
    top: -140%;
    left: 625%;
    transform: rotate(90deg);
    ;
    transform-origin: bottom;
    background: linear-gradient(to bottom, transparent, rgb(126, 123, 123));

}

@-moz-document url-prefix() {
    .line-2dr8 {
        transform: rotate(90.1deg);
    }
}


/* about us */
.aboutus {
    display: flex;
    flex-direction: row;
    margin-top: 80vh;
    justify-content: center;
    /* Centers content horizontally */
    align-items: center;
    margin-left: -16vw;
    /* margin-bottom: 30%;
      padding-top: 20%;
      transform: translateX(0%) translateY(15%) scaleX(1) scaleY(1.5) rotateX(55deg)rotateY(0deg); */
}


.lines-container {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aboutus-lines {
    position: absolute;
    width: 0.5px;
    /* Line thickness */
    background-color: rgb(75, 72, 72);
    /* Line color */
    height: 0%;
    /* Hidden initially */
    transition: height 1s ease;
    /* Adjust timing for the first set of lines */
}

/* Positions for above lines */
.aboutus-lines.line1 {
    top: -10%;
    left: 26%;
}

@media only screen and (min-width: 1024px) and (max-width: 1600px) {
    .aboutus-lines.line1 {
        top: -10%;
        left: 48%;

    }
}


@media only screen and (min-width: 1600px) and (max-width: 1800px) {
    .aboutus-lines.line1 {
        top: -10%;
        left: 34%;

    }
}

.aboutus-lines.line2 {
    top: -10%;
    left: 39%;

    background: linear-gradient(to top, #1C1C1C, #727272);
}

.aboutus-lines.line3 {
    top: -10%;
    left: 43%;
    background: linear-gradient(to top, #1C1C1C, #727272);
}

.aboutus-lines.line4 {
    top: -10%;
    left: 55%;
    background: linear-gradient(to top, #1C1C1C, #727272);
}

.aboutus-lines.line5 {
    top: -10%;
    left: 60%;
    background: linear-gradient(to top, #1C1C1C, #727272);
}

.aboutus-lines.line6 {
    top: -10%;
    left: 70%;
}

.aboutus-lines.line7 {
    top: -10%;
    left: 84%;
}

.aboutus-lines.line8 {
    top: -10%;
    left: 96%;
    background: linear-gradient(to top, #1C1C1C, #727272);
}

.aboutus-lines.line9 {
    top: -10%;
    left: 101%;
    background: linear-gradient(to top, #1C1C1C, #727272);
}

.aboutus-lines.line10 {
    top: -10%;
    left: 109%;
    background: linear-gradient(to top, #1C1C1C, #727272);
}

.aboutus-lines.line11 {
    top: -10%;
    left: 114%;
    background: linear-gradient(to top, #1C1C1C, #727272);
}

.aboutus-lines.line12 {
    top: -10%;
    left: 128%;
}

@media only screen and (min-width: 1024px) and (max-width: 1600px) {
    .aboutus-lines.line12 {
        top: -10%;
        left: 120%;

    }
}


@media only screen and (min-width: 1600px) and (max-width: 1800px) {
    .aboutus-lines.line12 {
        top: -10%;
        left: 125%;

    }
}

/* Positions for below lines */
.aboutus-lines.line13 {
    top: 57%;
    left: 40%;
}

@media only screen and (min-width: 1024px) and (max-width: 1600px) {
    .aboutus-lines.line13 {
        top: 57%;
        left: 60%;

    }
}


@media only screen and (min-width: 1600px) and (max-width: 1800px) {
    .aboutus-lines.line13 {
        top: 57%;
        left: 60%;

    }
}

.aboutus-lines.line14 {
    top: 57%;
    left: 50%;
    background: linear-gradient(to bottom, #1C1C1C, #727272);
}

@media only screen and (min-width: 1024px) and (max-width: 1600px) {
    .aboutus-lines.line14 {
        top: 57%;
        left: 64%;

    }
}

.aboutus-lines.line15 {
    top: 57%;
    left: 55%;
    background: linear-gradient(to bottom, #1C1C1C, #727272);
}

.aboutus-lines.line16 {
    top: 57%;
    left: 68%;
    background: linear-gradient(to bottom, #1C1C1C, #727272);
}

.aboutus-lines.line17 {
    top: 57%;
    left: 75%;
    background: linear-gradient(to bottom, #1C1C1C, #727272);
}

.aboutus-lines.line18 {
    top: 57%;
    left: 87%;
}


.aboutus-lines.line19 {
    top: 57%;
    left: 100%;
}

.aboutus-lines.line20 {
    top: 57%;
    left: 113%;
    background: linear-gradient(to bottom, #1C1C1C, #727272);
}

.aboutus-lines.line21 {
    top: 57%;
    left: 117%;
    background: linear-gradient(to bottom, #1C1C1C, #727272);
}

.aboutus-lines.line22 {
    top: 57%;
    left: 130%;
    background: linear-gradient(to bottom, #1C1C1C, #727272);
}

.aboutus-lines.line23 {
    top: 57%;
    left: 135%;
    background: linear-gradient(to bottom, #1C1C1C, #727272);
}

.aboutus-lines.line24 {
    top: 57%;
    left: 145%;
}

@media only screen and (min-width: 1024px) and (max-width: 1600px) {
    .aboutus-lines.line24 {
        top: 57%;
        background: linear-gradient(to bottom, #1C1C1C, #727272);
        left: 125%;

    }
}


@media only screen and (min-width: 1600px) and (max-width: 1800px) {
    .aboutus-lines.line24 {
        top: 57%;
        background: linear-gradient(to bottom, #1C1C1C, #727272);
        left: 140%;
    }
}

.aboutusitems {
    position: relative;
    transform: scaleX(1) scaleY(1) scaleZ(1) rotateX(70deg) rotateY(9deg) rotateZ(-23deg) translateZ(110px) translateX(0%);
    display: grid;
    gap: calc(20px + 110%);
    justify-content: center;
    /* Centers content horizontally */
    align-items: center;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    transition: all 0.8s ease;
    /* Changed from gap to all */
    z-index: 2;
    left: 0%;
}

.aboutusitems.resized-gap {
    left: 0%;
    gap: 0 3%;
}

.aboutusheading.resized-gap {
    opacity: 1;
}


/* Individual Grid Items */
.aboutusitems>div {
    transition: transform 0.5s ease;
    /* Add individual transitions */
}

.item1 {

    position: relative;
    /* Ensure relative positioning */
    height: 18vh;
    width: 33vw;
    max-width: 33vw;
    /* background-color: rgb(41, 40, 40); */
    /* background: linear-gradient(135deg, rgb(27, 27, 27), rgb(60, 59, 59)); */
    /* padding: 40px; */
    border: O.2px solid black;
    display: flex;
    font-weight: bold;
    justify-content: center;
    /* Centers content horizontally */
    align-items: center;
    /* Centers content vertically */
    font-size: 48px;
    cursor: pointer;
    z-index: 5;
    /* Added cursor pointer for clickable effect */
}

.item1-gradient1 {
    background: linear-gradient(135deg, #171717, #292929);
}

.item1-gradient2 {
    background: linear-gradient(135deg, #161616, #272727);
}

.item1-gradient3 {
    background: linear-gradient(135deg, #171717, #292929);
}

.item1-gradient4 {
    background: linear-gradient(135deg, #171717, #292929);
}


.item1:hover .item1-text {
    color: red;
    /* Change text color on hover */
}



.item1-content {
    display: none;
    /* Hidden by default */
    background: linear-gradient(135deg, #161616, #272727);
    position: absolute;
    /* Ensure it's absolutely positioned */
    width: 30vw;
    height: 200px;
    text-align: left;
    font-size: 18px;
    font-weight: lighter;
    opacity: 0;
    /* Initially hidden */
    transition: opacity 0.3s ease, clip-path 0.5s ease;
    /* Removed max-height transition */
    clip-path: inset(100% 0 0 0);
    /* Hidden by default */
    overflow-y: scroll;
    z-index: 1;
    top: 20vh;
    /* Top will be updated by JS */
    left: 17vw;
    /* Left will be updated by JS */
}

@media only screen and (min-width: 1280px) and (max-width: 1366px) {
    .item1-content {
        top: 9.5%;
        left: 21.5vw;

    }
}

@media only screen and (min-width: 1366px) and (max-width: 1400px) {
    .item1-content {
        top: 12%;
        left: 20.5vw;

    }
}

@media only screen and (min-width: 1400px) and (max-width: 1500px) {
    .item1-content {
        top: 10.5%;
        left: 20vw;

    }
}

@media only screen and (min-width: 1500px) and (max-width: 1600px) {
    .item1-content {
        top: 16.1%;
        left: 19.3vw;

    }
}

@media only screen and (min-width: 1600px) and (max-width: 1700px) {
    .item1-content {
        top: 18%;
        left: 18.6vw;

    }
}

@media only screen and (min-width: 1700px) and (max-width: 1800px) {
    .item1-content {
        top: 21%;
        left: 17.9vw;
    }
}

/* @media only screen and (min-width: 1920px) and (max-width: 2000px) {
    .item1-content {
      top: 23.5%;
      left: 16.6vw;
  
    }
  } */


.item1-content1 {
    display: none;
    /* Hidden by default */
    background: linear-gradient(135deg, #161616, #272727);
    position: absolute;
    width: 30vw;
    height: 200px;
    text-align: left;
    font-size: 18px;
    font-weight: lighter;
    opacity: 0;
    transition: opacity 0.3s ease, max-height 0.5s ease, clip-path 0.5s ease;
    clip-path: inset(100% 0 0 0);
    overflow-y: scroll;
    z-index: 1;
    /* transform: translateX(44%) translateY(-100%); */
    top: 20vh;
    right: 21vw;
}

@media only screen and (min-width: 1280px) and (max-width: 1366px) {
    .item1-content1 {
        top: 9.5%;
        left: 53.5vw;

    }
}

@media only screen and (min-width: 1366px) and (max-width: 1400px) {
    .item1-content1 {
        top: 12%;
        left: 52.5vw;

    }
}

@media only screen and (min-width: 1400px) and (max-width: 1500px) {
    .item1-content1 {
        top: 10.5%;
        left: 52vw;

    }
}

@media only screen and (min-width: 1500px) and (max-width: 1600px) {
    .item1-content1 {
        top: 16.1%;
        left: 51.3vw;

    }
}

@media only screen and (min-width: 1600px) and (max-width: 1700px) {
    .item1-content1 {
        top: 18%;
        left: 50.8vw;

    }
}

@media only screen and (min-width: 1700px) and (max-width: 1800px) {
    .item1-content1 {
        top: 21vh;
        left: 50vw;

    }
}

/* @media only screen and (min-width: 1920px) and (max-width:1920px) {
    .item1-content1 {
      top: 23.5vh;
      left: 48.5vw;
  
    }
  } */

.item1-content2 {
    display: none;
    /* Hidden by default */
    background: linear-gradient(135deg, #171717, #292929);
    position: absolute;
    width: 30vw;
    height: 200px;
    text-align: left;
    font-size: 18px;
    font-weight: lighter;
    opacity: 0;
    transition: opacity 0.3s ease, max-height 0.5s ease, clip-path 0.5s ease;
    clip-path: inset(0 0 100% 0);
    /* Start hidden */
    overflow-y: scroll;
    z-index: 1;
    /* transform: translateX(-37%) translateY(60%); */
    /* bottom: 0%;
    left: 0%; */
    bottom: 25.4vh;
    left: 23.6vw;
}

@media only screen and (min-width: 1280px) and (max-width: 1366px) {
    .item1-content2 {
        bottom: 22vh;
        left: 29.4vw;

    }
}

@media only screen and (min-width: 1366px) and (max-width: 1400px) {
    .item1-content2 {
        bottom: 22.6vh;
        left: 28.4vw;

    }
}

@media only screen and (min-width: 1400px) and (max-width: 1500px) {
    .item1-content2 {
        bottom: 22.5vh;
        left: 26.5vw;

    }
}

@media only screen and (min-width: 1500px) and (max-width: 1600px) {
    .item1-content2 {
        bottom: 24vh;
        left: 27vw;

    }
}

@media only screen and (min-width: 1600px) and (max-width: 1700px) {
    .item1-content2 {
        bottom: 24.5%;
        left: 26.6vw;
    }
}

@media only screen and (min-width: 1700px) and (max-width: 1800px) {
    .item1-content2 {
        bottom: 25.5%;
        left: 25.6vw;
    }
}

/* @media only screen and (min-width: 1920px) and (max-width: 1920px) {
    .item1-content2 {
      bottom: 26.4%;
      left: 24.5vw;
    }
  } */

.item1-content3 {
    display: none;
    /* Hidden by default */
    background: linear-gradient(135deg, #171717, #292929);
    position: absolute;
    width: 30vw;
    height: 200px;
    text-align: left;
    font-size: 18px;
    font-weight: lighter;
    opacity: 0;
    transition: opacity 0.3s ease, max-height 0.5s ease, clip-path 0.5s ease;
    clip-path: inset(0 0 100% 0);
    /* Start hidden */
    overflow-y: scroll;
    z-index: 1;
    /* transform: translateX(70%) translateY(60%); */
    bottom: 25.4vh;
    right: 14.5vw;
}

@media only screen and (min-width: 1280px) and (max-width: 1366px) {
    .item1-content3 {
        bottom: 22vh;
        right: 9vw;

    }
}

@media only screen and (min-width: 1366px) and (max-width: 1400px) {
    .item1-content3 {
        bottom: 22.5vh;
        right: 9.5vw;

    }
}

@media only screen and (min-width: 1400px) and (max-width: 1500px) {
    .item1-content3 {
        bottom: 22.5vh;
        right: 11.5vw;

    }
}

@media only screen and (min-width: 1500px) and (max-width: 1600px) {
    .item1-content3 {
        bottom: 24vh;
        right: 11vw;

    }
}

@media only screen and (min-width: 1600px) and (max-width: 1800px) {
    .item1-content3 {
        bottom: 24.5vh;
        right: 12vw;
    }
}

@media only screen and (min-width: 1600px) and (max-width: 1700px) {
    .item1-content3 {
        bottom: 24.5vh;
        right: 12vw;
    }
}

@media only screen and (min-width: 1700px) and (max-width: 1800px) {
    .item1-content3 {
        bottom: 25.5vh;
        right: 12.5vw;
    }
}

/* @media only screen and (min-width: 1920px) and (max-width: 1920px) {
    .item1-content3 {
      bottom: 26.3vh;
      right: 13.7vw;
    }
  } */

.item1-content.show,
.item1-content1.show,
.item1-content2.show,
.item1-content3.show {
    display: block;
    /* Show content */
    opacity: 1;
    clip-path: inset(0 0 0 0);
    /* Fully visible */
    max-height: 100%;
    /* Adjust as needed */
}

/* Display styles for visible content */

/* Custom scrollbar for the content */
.item1-content::-webkit-scrollbar,
.item1-content1::-webkit-scrollbar,
.item1-content2::-webkit-scrollbar,
.item1-content3::-webkit-scrollbar {
    width: 3px;
    /* Width of the scrollbar */
}

.item1-content::-webkit-scrollbar-thumb,
.item1-content1::-webkit-scrollbar-thumb,
.item1-content2::-webkit-scrollbar-thumb,
.item1-content3::-webkit-scrollbar-thumb {
    background-color: red;
    /* Color of the scrollbar */
    border-radius: 4px;
    /* Round the corners of the scrollbar */

}

.item1-content::-webkit-scrollbar-track,
.item1-content1::-webkit-scrollbar-track,
.item1-content1::-webkit-scrollbar-track,
.item1-content3::-webkit-scrollbar-track {
    background: transparent;
    /* Background of the scrollbar track */
}

.aboutusheading {
    color: red;
    font-size: 90px;
    font-weight: 900;
    margin-right: 0vw;
    letter-spacing: 0px;
    font-family: Lexend Deca;
    opacity: 0;
    z-index: 1;

}

#aboutword {

    background-image: linear-gradient(to right, #781506, #cd2c13);
    background-clip: border-box;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* color: transparent; */
    letter-spacing: 4px;
    /* 
      transform: translateX(430px) translateY(70px) scaleX(1) scaleY(1) scaleZ(1) rotateX(331deg) rotateY(-66deg) rotateZ(0deg) skewX(0deg) skewY(0deg); */
    transform: translateX(170px) translateY(0px) scaleX(1) scaleY(1) scaleZ(1) rotateX(331deg) rotateY(-66deg) rotateZ(0deg) skewX(0deg) skewY(0deg);


}

@-moz-document url-prefix() {
    #aboutword {

        background-image: linear-gradient(to right, #781506, #cd2c13);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: #cd2c13;
        /* color: transparent; */
        letter-spacing: 4px;

        /* transform: translateX(430px) translateY(70px) scaleX(1) scaleY(1) scaleZ(1) rotateX(331deg) rotateY(-66deg) rotateZ(0deg) skewX(0deg) skewY(0deg); */
        transform: translateX(170px) translateY(0px) scaleX(1) scaleY(1) scaleZ(1) rotateX(331deg) rotateY(-66deg) rotateZ(0deg) skewX(0deg) skewY(0deg);

    }
}

#usword {
    color: #E7432B;
    font-size: 80px;
    background-image: linear-gradient(to top, #8f2515, #E7432B);
    background-clip: border-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* transform: translateX(480px) translateY(240px) scaleX(1) scaleY(1) scaleZ(1) rotateX(0deg) rotateY(54deg) rotateZ(90deg) skewX(-23deg) skewY(0deg); */
    transform: translateX(210px) translateY(160px) scaleX(1) scaleY(1) scaleZ(1) rotateX(0deg) rotateY(54deg) rotateZ(90deg) skewX(-23deg) skewY(0deg);
    z-index: 10;


}

@-moz-document url-prefix() {
    #usword {
        color: #E7432B;
        font-size: 80px;
        background-image: linear-gradient(to top, #8f2515, #E7432B);
        background-clip: border-box;
        -webkit-background-clip: text;
        -webkit-text-fill-color: #E7432B;
        transform: translateX(210px) translateY(160px) scaleX(1) scaleY(1) scaleZ(1) rotateX(0deg) rotateY(54deg) rotateZ(90deg) skewX(-23deg) skewY(0deg);
    }
}


.aboutusword1 {
    writing-mode: vertical-rl;
    font-size: 50px;
    color: rgb(56, 55, 55);
    position: fixed;
    opacity: 1;

    bottom: 0%;

    /* left: 0%; */
    font-style: bold;
    letter-spacing: -7px;


    transform: translateY(0%) translateX(540%) rotate(0deg) skewY(40deg);
}

@media only screen and (min-height: 700px) and (max-height: 800px) {
    .aboutusword1 {
        transform: translateY(50%) translateX(540%) rotate(0deg) skewY(40deg);
    }
}

@media only screen and (min-height: 800px) and (max-height: 900px) {
    .aboutusword1 {
        transform: translateY(25%) translateX(540%) rotate(0deg) skewY(40deg);
    }
}

.aboutusword2 {
    writing-mode: vertical-rl;
    font-size: 50px;
    color: rgb(56, 55, 55);
    position: absolute;

    opacity: 1;
    top: 0%;

    left: 0%;
    font-style: bold;
    letter-spacing: -8px;
    transform: translateY(100%) translateX(295%) rotate(0deg)skewY(40deg);
}

@media only screen and (min-height: 600px) and (max-height: 720px) {
    .aboutusword2 {
        transform: translateY(25%) translateX(220%) rotate(0deg)skewY(40deg);
    }
}

@media only screen and (min-height: 721px) and (max-height: 800px) {
    .aboutusword2 {
        transform: translateY(50%) translateX(220%) rotate(0deg)skewY(40deg);
    }
}

@media only screen and (min-height: 800px) and (max-height: 900px) {
    .aboutusword2 {
        transform: translateY(50%) translateX(270%) rotate(0deg)skewY(40deg);
    }
}

.aboutusword3 {
    writing-mode: vertical-rl;
    font-size: 50px;
    color: rgb(56, 55, 55);
    position: absolute;
    opacity: 1;

    top: 0%;

    left: 0%;
    font-style: bold;
    letter-spacing: -8px;
    transform: translateY(-20%) translateX(295%) rotate(0deg) skewY(40deg);

}

@media only screen and (min-height: 700px) and (max-height: 800px) {
    .aboutusword3 {
        transform: translateY(-80%) translateX(220%) rotate(0deg) skewY(40deg);
    }
}

@media only screen and (min-height: 800px) and (max-height: 900px) {

    .aboutusword3 {
        transform: translateY(-80%) translateX(280%) rotate(0deg) skewY(40deg);
    }

}


/* @media only screen and (min-width: 1024px) and (max-width: 1280px) {
      .aboutusword3 {
        transform: translateY(-55%) translateX(540%) rotate(0deg) skewY(40deg);
  
  
  
      }
    }
    @media only screen and (min-width: 1352px) and (max-width: 1366px) {
      .aboutusword3 {
        transform: translateY(-55%) translateX(500%) rotate(0deg) skewY(40deg);
      }
    }
    @media only screen and (min-width: 1512px) and (max-width: 1512px) {
      .aboutusword3{
        transform: translateY(-45%) translateX(450%) rotate(0deg) skewY(40deg);
      }
    }
    @media only screen and (min-width: 1400px) and (max-width: 1480px) {
      .aboutusword3 {
        transform: translateY(-45%) translateX(455%) rotate(0deg) skewY(40deg);
  
  
      }
    }
    @media only screen and (min-width: 1600px) and (max-width: 1680px) {
      .aboutusword3 {
        transform: translateY(-45%) translateX(365%) rotate(0deg) skewY(40deg);
  
  
      }
    }
    @media only screen and (min-width: 1800px) and (max-width: 1800px) {
      .aboutusword3 {
        transform: translateY(-45%) translateX(330%) rotate(0deg) skewY(40deg);
  
  
      }
    }
    @media only screen and (min-width: 1920px) and (max-width: 1920px) {
      .aboutusword3 {
        transform: translateY(-45%) translateX(210%) rotate(0deg) skewY(40deg);
  
  
      }
    }
    @media only screen and (min-width: 3024px) and (max-width: 3024px) {
      .aboutusword3 {
        transform: 
        translateY(-15%) translateX(-290%) rotate(0deg) skewY(40deg)
        scaleX(1.5) scaleY(1.5);
  
  
      }
    } */

/*  project gallery */
.app {
    height: 100vh;
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
    overflow-y: visible;
    scroll-behavior: smooth;
    /* Enable smooth scrolling */
    perspective: 900px;
    overflow-x: visible;
    transform: translateX(0%)translateY(0%) scaleX(1)scaleY(1);
    /* transform-style: preserve-3d;  */
    /* transform: translateX(0%)translateY(0%) scaleX(1)scaleY(1); */
    z-index: 15;

}

.item.dummy {
    pointer-events: none;
    opacity: 0.5;
    cursor: default;
    background-color: #f9f9f9;
}

.item.dummy:hover {
    box-shadow: none;
}

.horizontal-line {
    position: absolute;
    top: -10px;
    left: 0;
    /* align to the start of the container */
    right: 0;
    margin-right: 20px;
    /* simulate right padding */
    margin-left: -100%;
    /* simulate left padding if needed */
    width: 100vh;
    /* subtract space from the right */
    height: 1px;
    background: linear-gradient(to left, transparent 0%, rgb(68, 67, 67) 50%, rgb(68, 67, 67) 50%, transparent 100%),
        linear-gradient(to right, transparent 0%, rgb(68, 67, 67) 50%, rgb(68, 67, 67) 50%, transparent 100%);
    z-index: 2;
}



@media only screen and (min-width: 1024px) and (max-width: 1480px) {
    .app {
        height: 105vh;
        transform: translateX(0%) translateY(0%) scaleX(0.8) scaleY(1);

    }
}

@media only screen and (min-width: 1480px) and (max-width: 1600px) {
    .app {

        transform: translateX(0%) translateY(0%) scaleX(1.2) scaleY(1);

    }
}

@media only screen and (min-width: 1600px) and (max-width: 1800px) {
    .app {
        transform: translateX(0%)translateY(0%) scaleX(1)scaleY(1);

    }
}



.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* gap: 0 3.6%; */
    margin: 0vh auto 0;
    transform-style: preserve-3d;
    transform: scaleX(1) scaleY(1) scaleZ(1) rotateX(0deg) rotateY(20deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px) skewX(0deg) skewY(0deg);
    -webkit-transform: scaleX(1) scaleY(1) scaleZ(1) rotateX(0deg) rotateY(20deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px) skewX(0deg) skewY(0deg);
    -moz-transform: scaleX(1) scaleY(1) scaleZ(1) rotateX(0deg) rotateY(20deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px) skewX(0deg) skewY(0deg);
    width: 100%;
    max-height: 150%;
    max-width: 100%;
    top: 16%;
    /* max-width: 100%; */
    /* Larger size initially */
    align-items: center;
    perspective: 1000px;
    /* perspective-origin: 114% 31%; */
    justify-content: center;
    /* transition: max-width 0.5s ease, gap 0.5s ease; */
    transition: max-width 0.8s ease, gap 0.8s ease;
    /* Smooth transitions for max-width and gap */
    overflow: visible;

    position: relative;
    /* overflow-x: hidden; */
}



@media only screen and (min-width: 1024px) and (max-width: 1280px) {
    .gallery {
        -webkit-transform: scaleX(1) scaleY(0.8) scaleZ(1) rotateX(0deg) rotateY(20deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px) skewX(0deg) skewY(0deg);
        -moz-transform: scaleX(1) scaleY(0.8) scaleZ(1) rotateX(0deg) rotateY(20deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px) skewX(0deg) skewY(0deg);
        transform: scaleX(1) scaleY(0.8) scaleZ(1) rotateX(0deg) rotateY(20deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px) skewX(0deg) skewY(0deg);
        top: 10%;
    }
}

@media only screen and (min-width: 1281px) and (max-width: 1366px) {
    .gallery {
        -webkit-transform: scaleX(1) scaleY(0.8) scaleZ(1) rotateX(0deg) rotateY(20deg) rotateZ(0deg) translateX(0px) translateY(110px) translateZ(0px) skewX(0deg) skewY(0deg);
        -moz-transform: scaleX(1) scaleY(0.8) scaleZ(1) rotateX(0deg) rotateY(20deg) rotateZ(0deg) translateX(0px) translateY(110px) translateZ(0px) skewX(0deg) skewY(0deg);
        transform: scaleX(1) scaleY(0.8) scaleZ(1) rotateX(0deg) rotateY(20deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px) skewX(0deg) skewY(0deg);
        top: 8%;
        /* height: 100vh; */
    }
}


@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .gallery {

        -webkit-transform: scaleX(1) scaleY(0.8) scaleZ(1) rotateX(0deg) rotateY(20deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px) skewX(0deg) skewY(0deg);
        -moz-transform: scaleX(1) scaleY(0.8) scaleZ(1) rotateX(0deg) rotateY(20deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px) skewX(0deg) skewY(0deg);
        transform: scaleX(1) scaleY(0.8) scaleZ(1) rotateX(0deg) rotateY(20deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px) skewX(0deg) skewY(0deg);
        top: 12%;
        /* height: 100vh; */
    }
}

@media only screen and (min-width: 1512px) and (max-width: 1512px) {
    .gallery {

        -webkit-transform: scaleX(1) scaleY(0.87) scaleZ(1) rotateX(0deg) rotateY(20deg) rotateZ(0deg) translateX(0px) translateY(30px) translateZ(0px) skewX(0deg) skewY(0deg) !important;
        -moz-transform: scaleX(1) scaleY(0.87) scaleZ(1) rotateX(0deg) rotateY(20deg) rotateZ(0deg) translateX(0px) translateY(30px) translateZ(0px) skewX(0deg) skewY(0deg) !important;
        transform: scaleX(1) scaleY(0.87) scaleZ(1) rotateX(0deg) rotateY(20deg) rotateZ(0deg) translateX(0px) translateY(30px) translateZ(0px) skewX(0deg) skewY(0deg) !important;
        top: 9%;
        /* height: 100vh; */
    }
}

@media only screen and (min-width: 1601px) and (max-width: 1800px) {
    .gallery {
        /* transform: scaleX(1) scaleY(1) scaleZ(1) rotateX(0deg) rotateY(20deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px) skewX(0deg) skewY(0deg); */
        top: 15%;

    }
}


.gallery .item img {

    object-fit: cover;
    /* Ensure the image covers the area without distortion */
}

img {
    width: 100%;
}

.gallery.resized-gap1 {
    gap: 5% 4%;
    /* Smaller gap when triggered */
    max-width: 75%;

    /* Adjusted size when triggered */
}

@media only screen and (min-width: 1024px) and (max-width: 1600px) {
    .gallery.resized-gap1 {

        gap: 5% 4%;
        /* Smaller gap when triggered */
        max-width: 60%;
    }
}

.gallery .item {
    display: none;
    /* Hide all items initially */
}

.gallery .item:nth-child(-n+9) {
    display: block;
    /* Show only the first 14 items */
}


.read-more {
    position: absolute;
    left: 84%;
    bottom: -15%;
    background-color: transparent;
    letter-spacing: 1px;
    color: white;
    padding: 10px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    border: none;
    z-index: 100;
    transform: translateY(57%) translateX(17%);

    backface-visibility: hidden;
    /* Prevent the back face from being visible */
    transform-style: preserve-3d;
    /* Ensure child elements are rendered in 3D */
    text-rendering: optimizeLegibility;
    /* Improve text rendering */
    -webkit-font-smoothing: antialiased;
    /* Enhance text sharpness in WebKit browsers */
    -moz-osx-font-smoothing: grayscale;
    /* Enhance text sharpness in Firefox on macOS */
}

@media only screen and (min-width: 1024px) and (max-width: 1600px) {
    .read-more {
        left: 80%;
    }
}


@media only screen and (min-width: 1601px) and (max-width: 1800px) {
    .read-more {
        left: 84%;
    }
}

.read-more:hover {
    color: red;
}

/* Modal Styles */
.modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    z-index: 10;
    /* left: -44%; */
    top: 0%;
    width: 100%;
    height: 100%;
    /* Full viewport height */
    overflow: visible;
    /* Hide overflow on the modal */
    background: rgba(0, 0, 0, 0.8);
    /* Dark background with opacity */
    transform: translateY(0%);
}


.modal.blur-active::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    /* Darken background */
    z-index: 1;
    pointer-events: none;
    /* Allow interaction with other elements */
}

.blur-active .app {
    filter: blur(8px);
    /* Apply blur effect */
}

/* Modal content styles */
.modal-content {
    position: relative;
    margin: 0% auto;
    /* Center the content */
    background: linear-gradient(to right, #000000, #171717);
    width: 100%;
    /* Adjust as needed */
    max-height: 100%;
    /* Adjust the height */
    overflow: visible;
    /* Hide overflow for the content */
    z-index: 1;
}

/* Fixed header styles */
.modal-header {
    align-items: center;
    justify-content: space-between;
    padding: 40px 800px;

    background: linear-gradient(to left, #000000, #171717);
    /* Slightly lighter background */
    position: relative;
}

@media only screen and (min-width: 1024px) and (max-width: 1280px) {
    .modal-header {

        padding: 40px 520px;


    }
}



@media only screen and (min-width: 1280px) and (max-width: 1366px) {
    .modal-header {

        padding: 40px 565px;


    }
}

@media only screen and (min-width: 1367px) and (max-width: 1400px) {
    .modal-header {

        padding: 40px 580px;


    }
}

@media only screen and (min-width: 1401px) and (max-width: 1600px) {
    .modal-header {
        padding: 40px 600px;
    }
}

@media only screen and (min-width: 1600px) and (max-width: 1700px) {
    .modal-header {
        padding: 40px 650px;
    }
}

@media only screen and (min-width: 1700px) and (max-width: 1800px) {
    .modal-header {
        padding: 40px 720px;
    }
}

@media only screen and (min-width: 2000px) and (max-width: 2200px) {
    .modal-header {
        padding: 40px 892px;
    }
}

@media only screen and (min-width: 2200px) and (max-width: 2500px) {
    .modal-header {
        padding: 40px 1000px;
    }
}

@media only screen and (min-width: 2500px) and (max-width: 2700px) {
    .modal-header {
        padding: 40px 1110px;
    }
}

@media only screen and (min-width: 2700px) and (max-width: 3500px) {
    .modal-header {
        padding: 40px 1220px;
    }
}

.modal-title {
    margin: 0;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: #fff;
    /* Title color */
}

@media only screen and (min-width: 1024px) and (max-width: 1600px) {
    .modal-title {
        font-size: 32px;
    }
}


@media only screen and (min-width: 1600px) and (max-width: 1800px) {
    .modal-title {
        font-size: 32px;
    }
}

.close {
    color: #aaa;
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

/* Gallery container styles */
.modal-gallery {

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* Responsive grid */
    gap: 20px;
    /* Adjust gap as needed */
    padding: 4%;
    padding-left: 8%;
    padding-right: 8%;
    max-height: calc(90vh - 60px);
    /* Adjust the height considering the header */
    overflow-y: auto;
    width: 100%;
    z-index: 20;
    /* Enable vertical scrolling */
}

.modal-gallery::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari */
}

.modal-title1,
.modal-secondary {
    position: absolute;
    color: #fff;
    /* Adjust the color based on your design */
    align-self: center;
    padding: 10px;
    border-radius: 5px;
    z-index: 10;
    margin-left: 20px;
    opacity: 0;
}

.modal-title1 {

    font-size: 20px;
    font-weight: bolder;
    margin-bottom: 70px;
}

.modal-secondary {

    font-size: 14px;
}

.modal-gallery .item:hover .modal-title1,
.modal-gallery .item:hover .modal-secondary {

    opacity: 1;
}

.modal-gallery .item {
    position: relative;
    overflow: hidden;
    /* Ensure overlay stays within the item */
}



/* Overlay initially hidden */
.modal-gallery .item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    /* Example overlay color */
    opacity: 0;
    /* Initially hidden */
    transition: opacity 0.3s ease;
    /* Smooth transition */
    z-index: 1;
    /* Place overlay above item background but below content */
    pointer-events: none;
    /* Allow clicks to pass through */
}

/* Show the overlay on hover */
.modal-gallery .item:hover::before {
    opacity: 1;
    /* Make overlay visible on hover */
}

/* .modal-gallery.item .image-container {
  width: 250px;
  height:150px ;
  display: flex;
  align-items: center;
  position: relative;
  } */

.modal-gallery .image-container {
    width: 100%;
    /* Set the desired width */
    height: 250px;
    /* Set the desired height */
    display: flex;
    justify-content: center;
    /* Center content horizontally */
    align-items: center;
    position: relative;
    /* Keep relative positioning for potential overlays */
}

@media only screen and (min-width: 1024px) and (max-width: 1600px) {
    .modal-gallery .image-container {

        width: 100%;
        /* Set the desired width */
        height: 200px;
        /* Set the desired height */

    }
}


@media only screen and (min-width: 1600px) and (max-width: 1800px) {
    .modal-gallery .image-container {
        width: 100%;
        /* Set the desired width */
        height: 200px;
        /* Set the desired height */
    }
}


.modal-gallery .image-container img {
    max-width: 100%;
    /* Ensure the image fits within the container */
    max-height: 100%;
    /* Maintain aspect ratio within the container */
    object-fit: cover;
    /* Cover the container while maintaining aspect ratio */
}

/* 
    .gallery::after {
      content: "";
      position: absolute;
  
      right: -4%;
      top: 0%;
      width: 90%;
      height: 108%;
       background: linear-gradient(to left, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0));
      pointer-events: none; 
  
      z-index: 2;
  
    } */

.gallery .item {
    position: relative;

    width: 100%;
    /* filter: grayscale(100%); */
    transition: filter 0.3s ease;

    z-index: 2;

}

/* .gallery .item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;

  height: 100%;
  z-index: 1;

} */
.gallery .item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to left, rgba(0, 0, 0, 1), rgba(255, 255, 255, 0));
    opacity: 1;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.gallery .item:hover::before {
    opacity: 0;
    /* Hide the gradient on hover */
}

.gallery .item:nth-child(1)::before,
.gallery .item:nth-child(2)::before,
.gallery .item:nth-child(5)::before,
.gallery .item:nth-child(8)::before {
    width: 100%;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0));
    opacity: 1;
}

.gallery .item:nth-child(1):hover::before,
.gallery .item:nth-child(2):hover::before,
.gallery .item:nth-child(5):hover::before,
.gallery .item:nth-child(8):hover::before {
    opacity: 0;
    /* Change opacity to 0 on hover */
}


.gallery .item:nth-child(3)::before,
.gallery .item:nth-child(6)::before,
.gallery .item:nth-child(9)::before {
    width: 100%;
    opacity: 1;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.9), rgba(255, 255, 255, 0));
}

.gallery .item:nth-child(3):hover::before,
.gallery .item:nth-child(6):hover::before,
.gallery .item:nth-child(9):hover::before {
    opacity: 0;
    /* Change opacity to 0 on hover */
}

.gallery .item:nth-child(4)::before,
.gallery .item:nth-child(7)::before,
.gallery .item:nth-child(10)::before {
    width: 100%;
    opacity: 1;
    background: linear-gradient(to left, rgba(0, 0, 0, 1), rgba(255, 255, 255, 0));
}

.gallery .item:nth-child(4):hover::before,
.gallery .item:nth-child(7):hover::before,
.gallery .item:nth-child(10):hover::before {
    opacity: 0;
    /* Change opacity to 0 on hover */
}

.item-text {
    top: 0%;
    left: -10%;
    /* Add left positioning to center horizontally */
    position: absolute;
    /* Ensure it's positioned absolutely within its parent */
    writing-mode: vertical-rl;
    transform: rotateZ(180deg) rotateY(45deg) rotateX(0deg) translateY(0%);
    font-size: 20px;
    opacity: 0;
    backface-visibility: hidden;
    /* Prevent the back face from being visible */
    transform-style: preserve-3d;
    /* Ensure child elements are rendered in 3D */
    text-rendering: optimizeLegibility;
    /* Improve text rendering */
    -webkit-font-smoothing: antialiased;
    /* Enhance text sharpness in WebKit browsers */
    -moz-osx-font-smoothing: grayscale;
    /* Enhance text sharpness in Firefox on macOS */
    /* background-color: #ff0000; */
}


.gallery .item:hover .item-text {
    opacity: 1;
}

/* .gallery .item.image-container {
  display: flex;
  align-items: center;
  position: relative;
  } */
/* CSS for .image-container */
.gallery .item .image-container {
    width: 100%;
    height: 190px;
    display: flex;
    align-items: center;
    position: relative;
    /* perspective: 1000px;
  transform-style: preserve-3d; */
}

.horizontal-liner {
    border: 0;
    z-index: 0;
    width: 200px;
    margin: 20px;
    height: 0.5px;
    /* Adjust the thickness */
    background-color: rgb(75, 72, 72);
    background: linear-gradient(to left, transparent 0%, rgb(114, 114, 114) 50%, rgb(114, 114, 114) 50%, transparent 100%),
        linear-gradient(to right, transparent 0%, rgba(75, 72, 72, 1) 50%, rgba(75, 72, 72, 1) 50%, transparent 100%);
    z-index: 0;

}

/* Mobile view adjustments */

.horizontal-liner:nth-of-type(1) {
    transform: translateX(60vw) translateY(4vw) rotate(-9deg) skewY(0deg)scale(1);
}

.horizontal-liner:nth-of-type(2) {
    transform: translateX(68vw) translateY(10vw) rotate(-6deg) skewY(0deg)scale(1);
}

.horizontal-liner:nth-of-type(3) {
    transform: translateX(62vw) translateY(12vw) rotate(-6deg) skewY(0deg)scale(1);
}

.horizontal-liner:nth-of-type(4) {
    transform: translateX(62vw) translateY(18vw) rotate(-5deg) skewY(0deg)scale(1);
}

.horizontal-liner:nth-of-type(5) {
    transform: translateX(61vw) translateY(23vw) rotate(-3deg) skewY(0deg)scale(1);
}

.horizontal-liner:nth-of-type(6) {
    transform: translateX(64vw) translateY(25vw) rotate(-2deg) skewY(0deg)scale(0.8);
}

.horizontal-liner:nth-of-type(7) {
    transform: translateX(62vw) translateY(30vw) rotate(3deg) skewY(0deg)scale(1);
}

.horizontal-liner:nth-of-type(8) {
    transform: translateX(62vw) translateY(34vw) rotate(4deg) skewY(0deg)scale(1);
}

.horizontal-liner:nth-of-type(9) {
    transform: translateX(62vw) translateY(42vw) rotate(9deg) skewY(0deg)scale(1);
}

@media only screen and (min-width: 1024px) and (max-width: 1600px) {
    .horizontal-liner {
        left: 0%;

    }
}


@media only screen and (min-width: 1600px) and (max-width: 1800px) {
    .horizontal-liner {
        left: 0%;
    }
}

.gallery .item .image-container:nth-child(1),
.gallery .item .image-container:nth-child(2),
.gallery .item .image-container:nth-child(5),
.gallery .item .image-container:nth-child(8) {
    transform: rotateY(0deg);
}

.gallery .item .image-container img {
    max-width: 100%;
    /* Ensure the image fits within the container */
    max-height: 100%;
    /* Maintain aspect ratio within the container */
    object-fit: cover;
    /* Cover the container while maintaining aspect ratio */
}





.gallery .item:hover {
    filter: grayscale(0%);
    z-index: 3;
    /* Ensure the hovered item is above the overlay */
}

.gallery .item:hover::after {
    display: none;
    /* Hide the gradient overlay when hovering over the gallery */
}

.text {
    padding: 20px;
    transform-style: preserve-3d;
    /* transform: translateX(20vw) translateY(5px) rotateX(30deg) rotateZ(20deg); */
    transform: translateX(-20vw) translateY(5px) rotateX(10deg) rotateZ(-20deg);
    overflow-y: auto;
    max-height: 130vh;
    /* Adjust to fit content */
    max-width: 50%;
    /* Adjust to fit content */
    margin-left: 600px;
}

.plantext {
    padding: 20px;
    max-height: 130vh;
    /* Adjust to fit content */
    max-width: 100%;
    /* Adjust to fit content */
    margin-left: 100px;
}

.imagecontent {
    padding: 20px;
    max-height: 130vh;
    /* Adjust to fit content */
    max-width: 100%;
    /* Adjust to fit content */
}

.gallery::-webkit-scrollbar,
.text::-webkit-scrollbar {
    display: none;
}

.item {
    cursor: pointer;

}

.child-images {
    width: 100%;
    position: relative;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.3s ease;
}

.detail.open .child-images {
    visibility: visible;
    opacity: 1;
}

.child-images img {
    width: 20%;
    margin: 5px;

    display: none;
}


.swiper {
    /* width: 100%; */
    height: 100%;
    overflow: visible;
}

.column {
    flex: 1;
    width: 50%;
    overflow: hidden;


}

.column:last-child .content-scrollable {
    flex-grow: 1;
    max-height: 50%;
    padding-right: 10px;
    /* Optional padding to avoid content touching the edge */

}

/* Firefox */

.slider-column {
    display: flex;

    max-width: 100%;
    flex-grow: 1;
    /* Ensure the slider column takes up the available space */
}

.info-column {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    flex-grow: 1;
    /* Ensure the info column takes up the available space */
}

.swiper-container {
    align-items: center;
    justify-content: center;
    width: 100%;
}

.swiper-slide {
    display: flex;
    justify-content: center;
    /* align-items: center; */

    font-size: 18px;

    width: 300px;
    transition: transform 0.3s ease;

}

.swiper-slide img {
    padding-top: 1%;
    width: 85%;
    height: 95%;
}

/* .swiper-slide img {
      height: 200;
    } */
.swiper-button-prev,
.swiper-button-next {
    /* left: 0px; */
    transform: scale(0.5) translateX(0%);
    color: #E7432B;
    ;
    /* Changes the text color to black */

}

.swiper-slide-active {
    transform: scale(1);
}

.swiper-pagination-bullet {
    background: #727272;
    top: 0%;
}

.swiper-pagination-bullet-active {
    background: #ED2C10;
}



.detail .close-button {
    position: absolute;
    /* top: 20px; */
    /* Adjust as needed */
    right: 25px;
    /* Adjust as needed */

    border: none;
    color: white;
    font-size: 30px;
    /* Adjust size as needed */
    cursor: pointer;
    z-index: 10001;
    display: block;
    background-color: transparent;
    /* border-radius: 100%; */
}

.detail .close-button:hover {
    background-color: transparent;
    color: #ED2C10;
}

.detail {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    cursor: pointer;
    font-size: 0;
    display: flex;
    flex-direction: column;
    /* visibility: hidden; */
    width: 80%;
    height: 90%;
    overflow: hidden;
    /* overflow: hidden; */
    z-index: 999;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 1);
}

.detail>img {
    width: 100%;
    /* height: 100%; */
    object-fit: contain;
    display: block;
    z-index: 1;
}

.detail.show-image-only .content {
    display: none;
    /* Hide content when image is displayed */
}

.detail .content {
    background: rgba(35, 35, 35, 0.5);
    /* Semi-transparent black background */
    backdrop-filter: blur(10px);
    /* Blur effect for the background */
    padding: 1.7rem 1.5rem;
    font-size: 1rem;
    box-sizing: border-box;
    flex-grow: 1;
    position: relative;
    z-index: 1;
    /* Ensure content stays on top */
    height: 100%;
}



.detail .content>* {
    /* margin-bottom: 1rem; */
    /* flex-wrap: wrap; */
    height: 100%;

}

.row {
    display: flex;
}


.detail .title {
    font-size: 2rem;
    font-weight: bolder;
    text-transform: uppercase;
    text-align: left;
    margin-left: 15px;
    color: #E7432B;
    /* padding: 0px 28px;
  padding-top: 75px; */
    /* padding-top:3rem ; */
}

.detail .secondary {
    padding: 1% 1%;
    color: lightgray;
    text-align: left;
    margin-left: 15px;
}

.detail .size {
    padding: 1% 1%;
    color: lightgray;
    text-align: left;
    margin-left: 15px;
    /* font-weight: bold; */
}

.detail .status {
    padding: 1% 1%;
    color: lightgray;
    text-align: left;
    margin-left: 15px;
    /* font-weight: bold; */
}

.detail .typology {
    padding: 1% 1%;
    color: lightgray;
    text-align: left;
    margin-left: 15px;
    /* font-weight: bold; */
}

.detail .client {
    padding: 1% 1%;
    color: lightgray;
    text-align: left;
    margin-left: 15px;
    /* font-weight: bold; */
}

.detail .design {
    padding: 1% 1%;
    color: lightgray;
    text-align: left;
    margin-left: 15px;
    /* font-weight: bold; */
}

.detail .sitearea {
    padding: 1% 1%;
    color: lightgray;
    text-align: left;
    margin-left: 15px;
    /* font-weight: bold; */
}

.detail .description {
    line-height: 1.5;
    text-align: left;
    margin-left: 27px;
    padding: 3%;
    height: 100%;
    color: lightgray;
    overflow-y: auto;
}

/* For Webkit-based browsers like Chrome, Safari, and Edge */
.detail .description::-webkit-scrollbar {
    width: 2px;
    height: 20%;
    /* Adjust this to match the desired scrollbar height */
}

.detail .description::-webkit-scrollbar-thumb {
    background-color: red;
    border-radius: 10px;
}

.detail .description::-webkit-scrollbar-track {
    background: transparent;
}

/* Optional: Always show scrollbar even when not scrolling */


.vertical-text {
    writing-mode: vertical-rl;
    font-size: 60px;
    font-weight: 900;
    /* color: red; */
    position: absolute;
    right: 15%;
    /* Adjust this value to position text outside or close to gallery */

    /* Center vertically */
    text-align: center;
    background-image: linear-gradient(to top, #3d0a02, #b63420);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transform: rotate(180deg)translateY(-45%)rotateX(0deg)rotateY(60deg)scaleY(1.17) scaleX(1.5);
    letter-spacing: 1%;
    /* Adjust spacing as needed */
    z-index: 10;
    /* Ensure it appears above gallery items */
    overflow: visible;
    top: -2%;

}




@-moz-document url-prefix() {

    .vertical-text {
        /* right: 90px; */
        transform: rotate(180deg)translateY(-42%)rotateX(0deg)rotateY(60deg)scaleY(1.1) scaleX(1.5);
    }

}

@media only screen and (min-width: 1024px) and (max-width: 1280px) {
    .vertical-text {
        right: 13%;
        -webkit-transform: rotate(180deg)translateY(-37%)rotateX(0deg)rotateY(60deg)scaleY(1.1) scaleX(1.5);
        -moz-transform: rotate(180deg)translateY(-37%)rotateX(0deg)rotateY(60deg)scaleY(1.1) scaleX(1.5);
        transform: rotate(180deg)translateY(-37%)rotateX(0deg)rotateY(60deg)scaleY(1.1) scaleX(1.5);
    }
}

@media only screen and (min-width: 1352px) and (max-width: 1366px) {
    .vertical-text {
        right: 13%;
        -webkit-transform: rotate(180deg)translateY(-35%)rotateX(0deg)rotateY(60deg)scaleY(1.1) scaleX(1.5);
        -moz-transform: rotate(180deg)translateY(-35%)rotateX(0deg)rotateY(60deg)scaleY(1.1) scaleX(1.5);
        transform: rotate(180deg)translateY(-35%)rotateX(0deg)rotateY(60deg)scaleY(1.1) scaleX(1.5);
    }
}

@media only screen and (min-width: 1400px) and (max-width: 1480px) {
    .vertical-text {
        right: 13%;
        -webkit-transform: rotate(180deg)translateY(-40%)rotateX(0deg)rotateY(60deg)scaleY(1.1) scaleX(1.5);
        -moz-transform: rotate(180deg)translateY(-40%)rotateX(0deg)rotateY(60deg)scaleY(1.1) scaleX(1.5);
        transform: rotate(180deg)translateY(-40%)rotateX(0deg)rotateY(60deg)scaleY(1.1) scaleX(1.5);
    }
}

@media only screen and (min-width: 1600px) and (max-width: 1680px) {
    .vertical-text {
        right: 14%;
        -webkit-transform: rotate(180deg)translateY(-45%)rotateX(0deg)rotateY(60deg)scaleY(1.1) scaleX(1.5);
        -moz-transform: rotate(180deg)translateY(-45%)rotateX(0deg)rotateY(60deg)scaleY(1.1) scaleX(1.5);
        transform: rotate(180deg)translateY(-45%)rotateX(0deg)rotateY(60deg)scaleY(1.1) scaleX(1.5);
    }
}

@media only screen and (min-width: 1700px) and (max-width: 1800px) {
    .vertical-text {
        right: 14%;
        -webkit-transform: rotate(180deg) translateY(-53%) rotateX(0deg) rotateY(60deg) scaleY(1.35) scaleX(1.5);
        -moz-transform: rotate(180deg) translateY(-53%) rotateX(0deg) rotateY(60deg) scaleY(1.35) scaleX(1.5);
        transform: rotate(180deg) translateY(-53%) rotateX(0deg) rotateY(60deg) scaleY(1.35) scaleX(1.5);


    }
}

@media only screen and (min-width: 1800px) and (max-width: 1920px) {
    .vertical-text {
        right: 10%;
        -webkit-transform: rotate(180deg)translateY(-45%)rotateX(0deg)rotateY(60deg)scaleY(1.23) scaleX(1.5);
        -moz-transform: rotate(180deg)translateY(-45%)rotateX(0deg)rotateY(60deg)scaleY(1.23) scaleX(1.5);
        transform: rotate(180deg)translateY(-45%)rotateX(0deg)rotateY(60deg)scaleY(1.23) scaleX(1.5);

    }
}

@media only screen and (min-width: 1920px) and (max-width: 2020px) {
    .vertical-text {
        right: 10%;
        -webkit-transform: rotate(180deg) translateY(-60%) rotateX(0deg) rotateY(60deg) scaleY(1.3) scaleX(1.5);
        -moz-transform: rotate(180deg) translateY(-60%) rotateX(0deg) rotateY(60deg) scaleY(1.3) scaleX(1.5);
        transform: rotate(180deg) translateY(-60%) rotateX(0deg) rotateY(60deg) scaleY(1.3) scaleX(1.5);


    }
}

@media only screen and (min-width: 2020px) and (max-width: 2294px) {
    .vertical-text {
        right: 10%;
        -webkit-transform: rotate(180deg) translateY(-70%) rotateX(0deg) rotateY(60deg) scaleY(1.35) scaleX(1.5);
        -moz-transform: rotate(180deg) translateY(-70%) rotateX(0deg) rotateY(60deg) scaleY(1.35) scaleX(1.5);
        transform: rotate(180deg) translateY(-70%) rotateX(0deg) rotateY(60deg) scaleY(1.35) scaleX(1.5);


    }
}

@media only screen and (min-width: 2294px) and (max-width: 2560px) {
    .vertical-text {
        right: 10%;
        -webkit-transform: rotate(180deg) translateY(-75%) rotateX(0deg) rotateY(60deg) scaleY(1.35) scaleX(1.5);
        -moz-transform: rotate(180deg) translateY(-75%) rotateX(0deg) rotateY(60deg) scaleY(1.35) scaleX(1.5);
        transform: rotate(180deg) translateY(-75%) rotateX(0deg) rotateY(60deg) scaleY(1.35) scaleX(1.5);


    }
}

@media only screen and (min-width: 2560px) and (max-width: 2704px) {
    .vertical-text {
        right: 8%;
        -webkit-transform: rotate(180deg) translateY(-80%) rotateX(0deg) rotateY(60deg) scaleY(1.35) scaleX(1.5);
        -moz-transform: rotate(180deg) translateY(-80%) rotateX(0deg) rotateY(60deg) scaleY(1.35) scaleX(1.5);
        transform: rotate(180deg) translateY(-80%) rotateX(0deg) rotateY(60deg) scaleY(1.35) scaleX(1.5);


    }
}

@media only screen and (min-width: 2704px) and (max-width: 3024px) {
    .vertical-text {
        right: 8%;
        -webkit-transform: rotate(180deg) translateY(-85%) rotateX(0deg) rotateY(60deg) scaleY(1.35) scaleX(1.5);
        -moz-transform: rotate(180deg) translateY(-85%) rotateX(0deg) rotateY(60deg) scaleY(1.35) scaleX(1.5);
        transform: rotate(180deg) translateY(-85%) rotateX(0deg) rotateY(60deg) scaleY(1.35) scaleX(1.5);


    }
}

@media only screen and (min-width: 3024px) and (max-width: 3024px) {
    .vertical-text {
        right: 6%;
        -webkit-transform: rotate(180deg)translateY(-95%)rotateX(0deg)rotateY(60deg)scaleY(1.3) scaleX(1.5);
        -moz-transform: rotate(180deg)translateY(-95%)rotateX(0deg)rotateY(60deg)scaleY(1.3) scaleX(1.5);
        transform: rotate(180deg)translateY(-95%)rotateX(0deg)rotateY(60deg)scaleY(1.3) scaleX(1.5);

    }
}

img {
    width: 100%;
}


/* Ptoject Section */

.projects-section {
    z-index: 4;
    /* position: relative; */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* grid-auto-rows: minmax(500px, auto); */
    gap: 0 2%;

    transform: rotateY(-2deg)rotateX(3deg)rotateZ(1deg) skewY(0deg)skewX(-18deg) translateX(2%)translateY(20%) scale(0.9);
    max-width: 100%;
    min-height: 100%;

    transition: transform 0.5s ease;
    /* background-image: url('img/gallery/Group120.png'); */
    background-size: cover;
    /* Adjust background size */
    background-position: center;
    /* Adjust background position */
    background-repeat: no-repeat;
    /* Prevent repeating the background image */
    z-index: 5;
}

@media only screen and (min-width: 1024px) and (max-width: 1400px) {
    .projects-section {
        -webkit-transform: rotateY(-2deg) rotateX(2deg) rotateZ(1deg) skewY(0deg) skewX(-20deg) translateX(2%) translateY(3%) scale(0.6);
        -moz-transform: rotateY(-2deg) rotateX(2deg) rotateZ(1deg) skewY(0deg) skewX(-20deg) translateX(2%) translateY(3%) scale(0.6);
        transform: rotateY(-2deg) rotateX(2deg) rotateZ(1deg) skewY(0deg) skewX(-20deg) translateX(2%) translateY(3%) scale(0.6);
    }
}

@media only screen and (min-width: 1400px) and (max-width: 1480px) {
    .projects-section {
        -webkit-transform: rotateY(-2deg) rotateX(2deg) rotateZ(1deg) skewY(0deg) skewX(-20deg) translateX(2%) translateY(20%) scale(0.7);
        -moz-transform: rotateY(-2deg) rotateX(2deg) rotateZ(1deg) skewY(0deg) skewX(-20deg) translateX(2%) translateY(20%) scale(0.7);
        transform: rotateY(-2deg) rotateX(2deg) rotateZ(1deg) skewY(0deg) skewX(-20deg) translateX(2%) translateY(20%) scale(0.6);
    }
}

@media only screen and (min-width: 1480px) and (max-width: 1580px) {
    .projects-section {
        -webkit-transform: rotateY(-2deg) rotateX(2deg) rotateZ(1deg) skewY(0deg) skewX(-20deg) translateX(2%) translateY(18%) scale(0.7);
        -moz-transform: rotateY(-2deg) rotateX(2deg) rotateZ(1deg) skewY(0deg) skewX(-20deg) translateX(2%) translateY(18%) scale(0.7);
        transform: rotateY(-2deg) rotateX(2deg) rotateZ(1deg) skewY(0deg) skewX(-20deg) translateX(2%) translateY(10%) scale(0.7);
    }
}

@media only screen and (min-width: 1580px) and (max-width: 1680px) {
    .projects-section {
        -webkit-transform: rotateY(-2deg) rotateX(2deg) rotateZ(1deg) skewY(0deg) skewX(-20deg) translateX(2%) translateY(18%) scale(0.7);
        -moz-transform: rotateY(-2deg) rotateX(2deg) rotateZ(1deg) skewY(0deg) skewX(-20deg) translateX(2%) translateY(18%) scale(0.7);
        transform: rotateY(-2deg) rotateX(2deg) rotateZ(1deg) skewY(0deg) skewX(-20deg) translateX(2%) translateY(18%) scale(0.7);
    }
}

.target-section {
    position: relative;
    /* transform: translateX(0%) translateY(-50%); */
    transform: translateX(0%) translateY(0%);
    transition: transform 0.5s ease;
    z-index: 10;
    perspective: 200px;

}

.target-section.resized-gap5 {
    transform: translateX(0%) translateY(0%);
    z-index: 10;

}



.projects-section .projectitem {
    position: relative;
    /* Ensure the item is in a stacking context */
    width: 100%;
    filter: grayscale(100%);
    transition: filter 0.3s ease;
    /* Add a smooth transition for the filter change */
    z-index: 3;
    /* Ensure the items are below the overlay */
}


.project-card {
    display: block;
    padding: 5px;
    align-items: center;
    justify-content: center;
    height: 570.31px;
    opacity: 0;
    /* filter: grayscale(100%); */
    background-color: #161616;
    outline: 1px solid #2c2c2c;
    box-sizing: border-box;
    transition: transform 0.8s ease;
    transform: rotateY(-20deg) translateY(-100%);
    z-index: 0;

}

.resize-project-card {
    opacity: 1;
    transform: rotateY(-20deg) translateY(0%);
}

.project-card:hover {

    filter: grayscale(0%);
    transform: scale(1.1);

}

.project-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0));
    opacity: 0;
    transition: background 0.3s ease;
    pointer-events: none;
}

.item:hover .project-card::after {
    background: linear-gradient(to right, rgb(0, 0, 0), rgba(255, 255, 255, 0));
}

.item:nth-child(2) .project-card::after,
.item:nth-child(3) .project-card::after {
    opacity: 0.5;
    /* Adjust opacity as needed */
}

.item:nth-child(1):hover~.item:nth-child(2) .project-card::after {
    opacity: 1;
}

.item:nth-child(2):hover~.item:nth-child(3) .project-card::after {
    opacity: 1;
}


.project-img {
    text-align: center;


}



.project-card img {

    align-items: center;
    justify-items: center;
    /* object-fit: cover; */
    padding: 10px;
    /* Add padding around the image */
    box-sizing: border-box;
    /* Ensure padding is included in the element's total width and height */
    height: 400px;
    width: 289.64px;
    margin-left: 3%;

    /* Maintain aspect ratio */
}

/* Project name and category styles */

.project-info {
    display: flex;
    flex-direction: column;
    align-items: left;
    /* padding: 10px; */
    margin-left: 5%;
    margin-top: 2%;

}

.project-title {

    font-size: 30px;
    font-weight: bold;
    letter-spacing: 2px;

}

.project-card:hover .project-title {
    color: #ED2C10;
    /* Change color on hover if needed */
}

.project-category {

    font-size: 16px;
    font-weight: lighter;
    letter-spacing: 2px;

}

.projects-section .item .project-info {
    background-color: 252525;
}

.projectheadinglast {
    color: white;
    font-size: 34px;
    z-index: 2;
    text-align: center;
    margin-top: 20%;
    margin-bottom: 20px;
    position: relative;
    top: 00px;
    padding-top: 5%;
    transform: translateX(0%) translateY(0%);
    transition: transform 0.5s ease;
}

.heading {
    transition: transform 0.5s ease;
    transform: translateX(0%) translateY(-350%);
}

.heading .arrow {
    font-size: 40px;
}

.resize-heading {
    transform: translateX(0px) translateY(0%);
}

@media only screen and (min-width: 1024px) and (max-width: 1600px) {
    .projectheadinglast {
        margin-top: 10%;
        margin-bottom: 20px;
        padding-top: 0%;
    }
}

@media only screen and (min-width: 1600px) and (max-width: 1800px) {
    .projectheadinglast {
        margin-top: 20%;
        margin-bottom: 0px;
        padding-top: 0%;
    }
}



.projectheadinglast .white-text {
    color: white;
}

.projectheadinglast .red-text {
    color: #E7432B;
}

.projectsubheading {
    font-size: 24px;
    text-align: center;
    color: white;
    z-index: 2;
    position: relative;
    margin-bottom: 20px;
    top: 0%;
    font-weight: lighter;
    transform: translateX(0px) translateY(0%);
    transition: transform 0.5s ease;
}

.section-6 {
    position: relative;
}

.section-6 .headinglast,
.section-6 .subheading {
    transition: opacity 0.5s ease-out;
}

.hidden {
    opacity: 0;
}

/* heading last  text*/
.headinglast {
    color: white;
    font-size: 34px;
    z-index: 1;
    text-align: center;
    /* margin-top: 20%; */
    /* margin-bottom: 20px; */
    position: relative;
    top: 0%;
    /* left: 35%; */
    padding-top: 4%;
    opacity: 1;
    /* transform: translateX(0px); */
    /* transform: translateY(5px); */
    /* transform: rotateY(-20deg) translateY(0%); */
    transition: opacity 0.5s ease;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
    .headinglast {
        padding-top: 2%;

    }
}

@-moz-document url-prefix() {
    @media only screen and (min-width: 1400px) and (max-width: 1600px) {
        .headinglast {
            padding-top: 2%;
        }
    }
}


.hide-on-scroll {
    opacity: 0;
    display: none;
}

.headinglast .white-text {
    color: white;
}

.headinglast .red-text {
    color: #E7432B;
}

.arrow {
    font-size: 60px;
    font-weight: bolder;
    animation: fadeInOut 5s infinite;

}


.arrow-before {
    font-size: 60px;
    font-weight: bolder;
    opacity: 1;
    display: inline;
    transform: translateY(0%);
}


.arrow-after {
    display: none;
    font-size: 40px;
    font-weight: bolder;
    opacity: 0;

}


.lastheading {
    margin-top: 0%;
    transition: transform 0.6s ease;
    transform: translateY(100%);
}

.resized.lastheading {

    transform: translateY(0%);
}

@keyframes fadeInOut {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.subheading {
    font-size: 24px;
    text-align: center;
    color: white;
    z-index: 1;
    position: relative;
    /* left: 41%;
      top: 50%; */
    margin-bottom: 20px;

    font-weight: lighter;
    transform: translateX(0px);
    transition: opacity 0.5s ease;
}

@media (max-width: 768px) {
    .headinglast {
        font-size: 28px;
        margin-top: 100%;
        padding-top: 3%;
    }

    .subheading {
        font-size: 18px;
        margin-bottom: 15px;
    }
}

@media (max-width: 480px) {
    .headinglast {
        font-size: 20px;
        margin-top: 100%;
        padding-top: 2%;
    }

    .subheading {
        font-size: 16px;
        margin-bottom: 10px;
    }
}

.headinglast,
.subheading {
    transition: opacity 0.5s ease;
}



/* .container1 {
    max-width: 950px;
    margin: 0 auto;
    padding: 37px;
    position: relative;
    z-index: 1;
    transform: translateY(4%) skew(34deg, -4deg) rotate(-6deg) scale(0.9);
    -webkit-transform: translateY(4%) skew(34deg, -4deg) rotate(-6deg) scale(0.9);
    -moz-transform: translateY(4%) skew(34deg, -4deg) rotate(-6deg) scale(0.9);
} */
.container1 {
    max-width: 950px;
    margin: 0 auto;
    padding: 37px;
    position: relative;
    z-index: 1;
    transform: translateY(4%) skew(34deg, -4deg) rotate(-6deg) scale(0.9);
    transition: all 1s ease;
}

/* Straight version */
.container1.straight {
    transform: none;
}

.message-section {
    display: flex;
    gap: 10px;
    /* padding: 30px; */
    justify-content: center;
}

.message-box {
    flex: 1;
    background: linear-gradient(to right, #1A1A1A, #101010);
    padding: 20px;
    border-radius: 0px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}



.message-box:last-child {
    flex: 0 0 40%;
    /* background-color: #333;
    
    color: white; */
}

/* Optional styling */
.message-box h2 {
    margin-bottom: 10px;
}

.reach-us-button {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 20px;
    background-color: #333;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}

.form-fields {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

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

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

.form-group input {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.submit-button {
    padding: 12px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.submit-button:hover {
    background-color: #0056b3;
}

.alert {
    margin-top: 20px;
    padding: 10px;
    border-radius: 5px;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
}

@media only screen and (min-width: 1024px) and (max-width: 1366px) {
    .container1 {
        transform: translateY(-10%) skew(34deg, -4deg) rotate(-6deg) scale(0.6);
        -webkit-transform: translateY(-10%) skew(34deg, -4deg) rotate(-6deg) scale(0.6);
        -moz-transform: translateY(-10%) skew(34deg, -4deg) rotate(-6deg) scale(0.6);
    }
}

@media only screen and (min-width: 1366px) and (max-width: 1366px) {
    .container1 {
        transform: translateY(-10%) skew(34deg, -4deg) rotate(-6deg) scale(0.6);
        -webkit-transform: translateY(-10%) skew(34deg, -4deg) rotate(-6deg) scale(0.6);
        -moz-transform: translateY(-10%) skew(34deg, -4deg) rotate(-6deg) scale(0.6);
    }
}

@media only screen and (min-width: 1367px) and (max-width: 1367px) {
    .container1 {
        transform: translateY(0%) skew(34deg, -4deg) rotate(-6deg) scale(0.7);
        -webkit-transform: translateY(0%) skew(34deg, -4deg) rotate(-6deg) scale(0.7);
        -moz-transform: translateY(0%) skew(34deg, -4deg) rotate(-6deg) scale(0.7);
    }
}

@media only screen and (min-width: 1368px) and (max-width: 1480px) {
    .container1 {
        transform: translateY(0%) skew(34deg, -4deg) rotate(-6deg) scale(0.7);
        -webkit-transform: translateY(0%) skew(34deg, -4deg) rotate(-6deg) scale(0.7);
        -moz-transform: translateY(0%) skew(34deg, -4deg) rotate(-6deg) scale(0.7);
    }
}

@media only screen and (min-width: 1480px) and (max-width: 1600px) {
    .container1 {
        transform: translateY(0%) skew(34deg, -4deg) rotate(-6deg) scale(0.8);
        -webkit-transform: translateY(0%) skew(34deg, -4deg) rotate(-6deg) scale(0.8);
        -moz-transform: translateY(0%) skew(34deg, -4deg) rotate(-6deg) scale(0.8);
    }
}

@media only screen and (min-width: 1601px) and (max-width: 1800px) {
    .container1 {
        transform: translateY(5%) skew(32deg, -4deg) rotate(-5deg) scale(0.8);
        -webkit-transform: translateY(5%) skew(32deg, -4deg) rotate(-5deg) scale(0.8);
        -moz-transform: translateY(5%) skew(32deg, -4deg) rotate(-5deg) scale(0.8);
    }
}


.down-arrow {
    display: inline-block;
    color: #ED2C10;
    transform-origin: center;
    left: 7%;
    top: 5%;
    transform: scale(1.1) translateY(900%);
    position: relative;
    z-index: 1;

    animation: moveArrow 1.5s infinite, fadeArrow 1.5s infinite;
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {

    /* Styles specific to Safari */
    .down-arrow {
        top: -4%;
        transform: scale(1.1) translateY(900%);

    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5) and (min-width: 1700px) and (max-width: 1800px) {

    /* Styles specific to Safari */
    .down-arrow {
        top: -4%;
        transform: scale(1.1) translateY(1000%);

    }
}


@media only screen and (min-width: 1024px) and (max-width: 1365px) {
    .down-arrow {
        top: -20%;



    }
}

@media only screen and (min-width: 1366px) and (max-width: 1366px) {
    .down-arrow {
        top: -14%;



    }
}

@media only screen and (min-width: 1367px) and (max-width: 1480px) {
    .down-arrow {
        top: 0%;



    }
}

@media only screen and (min-width: 1600px) and (max-width: 1600px) {
    .down-arrow {
        left: 7%;

        top: 0%;

    }
}

@media only screen and (min-width: 1700px) and (max-width: 1800px) {
    .down-arrow {
        left: 5%;
        top: 0%;


    }
}

@media only screen and (min-width: 1800px) and (max-width: 1800px) {
    .down-arrow {
        left: 5%;



    }
}


.container1 h1 {
    color: #E7432B;
    font-size: 60px;
    margin-bottom: 20px;
    padding-left: 50px;
    padding-top: 30px;
    padding-bottom: 30px;
    font-weight: 900;
    background: linear-gradient(to right, #1A1A1A, #101010);

}

h1 {
    transform: translate(100%);
    transition: transform 0.7s ease;
}

.container1 h2 {

    font-size: 30px;
    padding-left: 80px;
    /* padding-top: 20px; */
    /* padding-bottom: 20px; */
    margin-bottom: 20px;
    font-weight: bold;
}

.container1 p {
    margin-bottom: 10px;
    padding-left: 30px;
}

.message-section {
    margin-bottom: 30px;
    padding-top: 10px;
    transform: translate(100%);
    /* background: linear-gradient(to right, #1A1A1A, #101010); */
    transition: transform 0.7s ease;
    letter-spacing: 2px;

}

.call-section {
    flex: 0 0 59%;
    background: linear-gradient(to right, #1A1A1A, #101010);
    /* background-color: #f0f0f0; */
    /* optional */
    /* padding: 1rem; */
    box-sizing: border-box;
}

.visit-section {
    flex: 0 0 40%;
    background: linear-gradient(to right, #1A1A1A, #101010);
    /* background-color: #e0e0e0; */
    /* optional */
    /* padding: 1rem; */
    box-sizing: border-box;
}

.reach-us-section {
    transform: translate(100%);
    /* background: linear-gradient(to right, #1A1A1A, #101010); */
    transition: transform 0.7s ease;
    gap: 10px;

}

.getintouchshadow {
    transform: scale(0.6) translateY(-131%) translateX(-5%)rotateX(0deg)rotateZ(-1deg);
    z-index: 0;
}

@media only screen and (min-width: 1024px) and (max-width: 1280px) {
    .getintouchshadow {
        transform: scale(0.6) translateY(-227%) translateX(-5.5%) rotateX(0deg) rotateZ(-1deg);
    }
}

@media only screen and (min-width: 1281px) and (max-width: 1366px) {
    .getintouchshadow {
        transform: scale(0.6) translateY(-233%) translateX(-5.5%) rotateX(0deg) rotateZ(-1deg);
    }
}

@media only screen and (min-width: 1367px) and (max-width: 1367px) {
    .getintouchshadow {
        transform: scale(0.6) translateY(-172%) translateX(-5.5%) rotateX(0deg) rotateZ(-1deg);
    }
}

@media only screen and (min-width: 1368px) and (max-width: 1480px) {
    .getintouchshadow {
        transform: scale(0.6) translateY(-173%) translateX(-5.5%) rotateX(0deg) rotateZ(-1deg);
    }
}

@media only screen and (min-width: 1480px) and (max-width: 1600px) {
    .getintouchshadow {
        transform: scale(0.7) translateY(-140%) translateX(-5.5%) rotateX(0deg) rotateZ(-1deg);
    }
}

@media only screen and (min-width: 1601px) and (max-width: 1800px) {
    .getintouchshadow {
        transform: scale(0.6) translateY(-143%) translateX(-7%)rotateX(0deg)rotateZ(-1deg);



    }
}

.resize-h1 {
    transform: translate(0%);
}

.resize-message-section {
    transform: translate(0%);
}

.resize-reach-us-section {
    transform: translate(0%);
}




.message-section .reach-us-section {


    border-radius: 10px;
    margin-bottom: 20px;

}

.message-section p {
    color: transparent;
}

.reach-us-section {
    display: flex;
    /* justify-content: space-between; */
    /* padding-bottom: 30px; */
}

/* .call-section,
.visit-section {
    width: 45%;
    letter-spacing: 2px;
} */

@media (max-width: 768px) {
    .reach-us-section {
        flex-direction: column;
    }

    .call-section,
    .visit-section {
        width: 100%;
        letter-spacing: 2px;
    }
}

@media only screen and (width: 1366px) and (height: 768px) {
    .vertical-text {
        top: 0;
    }
}