* {
    padding: 0;
    margin: 0;
    color: #e5e5e4;
    box-sizing: border-box;
}
html{
    scroll-behavior: smooth
}

::-webkit-scrollbar{
    width: 0px;
    background-color: transparent;
    
 }
 @import url("https://p.typekit.net/p.css?s=1&k=yqs6njb&ht=tk&f=53527.53528.53529.53530.53531.53532.53533.53534.53535.53536.53537.53538.53539.53540.53541.53542&a=103861573&app=typekit&e=css");

 @font-face {
 font-family:"tt-autonomous";
 src:url("https://use.typekit.net/af/3fe699/0000000000000000774f76d1/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3") format("woff2"),url("https://use.typekit.net/af/3fe699/0000000000000000774f76d1/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3") format("woff"),url("https://use.typekit.net/af/3fe699/0000000000000000774f76d1/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3") format("opentype");
 font-display:auto;font-style:italic;font-weight:600;font-stretch:normal;
 }
 
 @font-face {
 font-family:"tt-autonomous";
 src:url("https://use.typekit.net/af/4ade5a/0000000000000000774f76d2/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i3&v=3") format("woff2"),url("https://use.typekit.net/af/4ade5a/0000000000000000774f76d2/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i3&v=3") format("woff"),url("https://use.typekit.net/af/4ade5a/0000000000000000774f76d2/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i3&v=3") format("opentype");
 font-display:auto;font-style:italic;font-weight:300;font-stretch:normal;
 }
 
 @font-face {
 font-family:"tt-autonomous";
 src:url("https://use.typekit.net/af/c51949/0000000000000000774f76d4/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/c51949/0000000000000000774f76d4/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/c51949/0000000000000000774f76d4/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
 font-display:auto;font-style:normal;font-weight:400;font-stretch:normal;
 }
 
 @font-face {
 font-family:"tt-autonomous";
 src:url("https://use.typekit.net/af/591cff/0000000000000000774f76d5/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i2&v=3") format("woff2"),url("https://use.typekit.net/af/591cff/0000000000000000774f76d5/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i2&v=3") format("woff"),url("https://use.typekit.net/af/591cff/0000000000000000774f76d5/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i2&v=3") format("opentype");
 font-display:auto;font-style:italic;font-weight:200;font-stretch:normal;
 }
 
 @font-face {
 font-family:"tt-autonomous";
 src:url("https://use.typekit.net/af/b8bfdc/0000000000000000774f76d6/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/b8bfdc/0000000000000000774f76d6/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/b8bfdc/0000000000000000774f76d6/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
 font-display:auto;font-style:normal;font-weight:700;font-stretch:normal;
 }
 
 @font-face {
 font-family:"tt-autonomous";
 src:url("https://use.typekit.net/af/8ee0e0/0000000000000000774f76d7/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff2"),url("https://use.typekit.net/af/8ee0e0/0000000000000000774f76d7/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff"),url("https://use.typekit.net/af/8ee0e0/0000000000000000774f76d7/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("opentype");
 font-display:auto;font-style:normal;font-weight:500;font-stretch:normal;
 }
 
 @font-face {
 font-family:"tt-autonomous";
 src:url("https://use.typekit.net/af/1a295c/0000000000000000774f76d9/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n8&v=3") format("woff2"),url("https://use.typekit.net/af/1a295c/0000000000000000774f76d9/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n8&v=3") format("woff"),url("https://use.typekit.net/af/1a295c/0000000000000000774f76d9/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n8&v=3") format("opentype");
 font-display:auto;font-style:normal;font-weight:800;font-stretch:normal;
 }
 
 @font-face {
 font-family:"tt-autonomous";
 src:url("https://use.typekit.net/af/57ebc9/0000000000000000774f76df/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff2"),url("https://use.typekit.net/af/57ebc9/0000000000000000774f76df/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff"),url("https://use.typekit.net/af/57ebc9/0000000000000000774f76df/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("opentype");
 font-display:auto;font-style:italic;font-weight:400;font-stretch:normal;
 }
 
 @font-face {
 font-family:"tt-autonomous";
 src:url("https://use.typekit.net/af/7208c6/0000000000000000774f76da/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff2"),url("https://use.typekit.net/af/7208c6/0000000000000000774f76da/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff"),url("https://use.typekit.net/af/7208c6/0000000000000000774f76da/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("opentype");
 font-display:auto;font-style:normal;font-weight:300;font-stretch:normal;
 }
 
 @font-face {
 font-family:"tt-autonomous";
 src:url("https://use.typekit.net/af/08cb10/0000000000000000774f76dc/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("woff2"),url("https://use.typekit.net/af/08cb10/0000000000000000774f76dc/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("woff"),url("https://use.typekit.net/af/08cb10/0000000000000000774f76dc/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("opentype");
 font-display:auto;font-style:italic;font-weight:500;font-stretch:normal;
 }
 
 @font-face {
 font-family:"tt-autonomous";
 src:url("https://use.typekit.net/af/f0616c/0000000000000000774f76dd/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n2&v=3") format("woff2"),url("https://use.typekit.net/af/f0616c/0000000000000000774f76dd/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n2&v=3") format("woff"),url("https://use.typekit.net/af/f0616c/0000000000000000774f76dd/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n2&v=3") format("opentype");
 font-display:auto;font-style:normal;font-weight:200;font-stretch:normal;
 }
 
 @font-face {
 font-family:"tt-autonomous";
 src:url("https://use.typekit.net/af/473597/0000000000000000774f76db/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff2"),url("https://use.typekit.net/af/473597/0000000000000000774f76db/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff"),url("https://use.typekit.net/af/473597/0000000000000000774f76db/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("opentype");
 font-display:auto;font-style:italic;font-weight:700;font-stretch:normal;
 }
 
 @font-face {
 font-family:"tt-autonomous";
 src:url("https://use.typekit.net/af/08e02b/0000000000000000774f76de/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff2"),url("https://use.typekit.net/af/08e02b/0000000000000000774f76de/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff"),url("https://use.typekit.net/af/08e02b/0000000000000000774f76de/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("opentype");
 font-display:auto;font-style:normal;font-weight:600;font-stretch:normal;
 }
 
 @font-face {
 font-family:"tt-autonomous";
 src:url("https://use.typekit.net/af/87bddf/0000000000000000774f76e0/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i8&v=3") format("woff2"),url("https://use.typekit.net/af/87bddf/0000000000000000774f76e0/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i8&v=3") format("woff"),url("https://use.typekit.net/af/87bddf/0000000000000000774f76e0/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i8&v=3") format("opentype");
 font-display:auto;font-style:italic;font-weight:800;font-stretch:normal;
 }
 
 @font-face {
 font-family:"tt-autonomous-outline";
 src:url("https://use.typekit.net/af/66a429/0000000000000000774f76d3/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("woff2"),url("https://use.typekit.net/af/66a429/0000000000000000774f76d3/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("woff"),url("https://use.typekit.net/af/66a429/0000000000000000774f76d3/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n9&v=3") format("opentype");
 font-display:auto;font-style:normal;font-weight:900;font-stretch:normal;
 }
 
 @font-face {
 font-family:"tt-autonomous-outline";
 src:url("https://use.typekit.net/af/16caaf/0000000000000000774f76d8/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i9&v=3") format("woff2"),url("https://use.typekit.net/af/16caaf/0000000000000000774f76d8/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i9&v=3") format("woff"),url("https://use.typekit.net/af/16caaf/0000000000000000774f76d8/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i9&v=3") format("opentype");
 font-display:auto;font-style:italic;font-weight:900;font-stretch:normal;
 }
 @font-face {
    font-family:AoboshiOne-Regular;
    src: url(font/Aoboshi_One/AoboshiOne-Regular.ttf);
 }
 html{
    overflow-x: hidden;
 }
/* BODY */
body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: fit-content;
    max-height: 700vh;
    scroll-snap-type: y mandatory;
    width: 100%;
    overflow-x: hidden;
}

/* LANDING PAGE */
.container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100%;
    background-image: url(pictures/background.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

.saturation {
    height: 100vh;
    width: 917px;
    position: absolute;
    right: 0;
}

.saturation img {
    height: 100vh;
    width: 917px;
    object-position: center;
    transition: all 0.5 ease-in-out;
}

.landingpage {
    position: relative;
    height: 100vh;
    width: 100%;
    display: grid;
    grid-template-rows: 10.6% 89.4%;
    z-index: 12;
}

.landingpage .nav {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    
}

.landingpage .nav ul {
    height: 49px;
    width: 776px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 76px;
    margin-top: 10px;
    font-family: "tt-autonomous", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 24px;
  margin-right: 90px;
    
}
.landingpage  ul a {
 text-decoration: none;
}
/* Navbar List Items */
.landingpage .nav ul li {
    position: relative;
    list-style: none;
    cursor: pointer;
    padding: 17px 0; /* Add some padding for better click area */
    color: #e5e5e4;
}

.landingpage .nav ul li::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 5px;
    background-color: #e8bd3f;
    transition: all 0.3s ease-in-out;
}

.landingpage .nav ul li:hover::after {
    width: 100%;
}

.landingpage .nav .logo {
    height: 60px;
    width: 382px;
    margin-top: 10px;
    background-image: url(pictures/Logo.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-left: 102px;
}

.landingpage .main {
    display: grid;
    grid-template-columns: 50% 50%;
}

.landingpage .main .text .txtbox {
    position: absolute;
    top: 261px;
    left: 170px;
    width: 852px;
    height: 473.61px;
    display: flex;
    flex-direction: column;
}

.landingpage .main .text .txtbox #ready {
    width: 579px;
    height: 105px;
    font-family: "tt-autonomous", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 77.75px;
    color: #e5e5e4;
    /* for fonts */
}

.landingpage .main .text .txtbox h3 {
    width: 550px;
    height: 150px;
    font-family: "tt-autonomous-outline", sans-serif;
    font-weight: 900;
    font-style: normal;
    font-size: 53.56px;
    line-height: 70px;

    /* for fonts */
}

.landingpage .main .text .txtbox #reality {
    width: 852px;
    height: 168px;
    font-family: "tt-autonomous", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 120px;
    color: #e8bf29;
    /* for fonts */
}

.landingpage .main .text .txtbox  .buttons {
    height: 54.61px;
    width: 766px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
}

.landingpage .main .text .txtbox .buttons a .contactus{
    height: 60px;
    width: 337.07px;
    background-color: #e5e5e4;
    color:  #282827;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "tt-autonomous", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 33.05px;
    transition: width 0.4s ease;
    vertical-align: middle;
    padding-top: 4.27px;
    /* for fonts */
}
.contactus{
    padding-top: 4.27px;
    vertical-align: middle;
    height: 60px;
    width: 100%;
    text-decoration: none;
    color: #282827;
    font-size: 33.05px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.knowmore{
    text-decoration: none;
    padding-top: 4.27px;
    vertical-align: middle;
    height: 60px;
    width: 100%;
    text-decoration: none;
    color: #e5e5e5;
    font-size: 33.05px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.landingpage .main .text .txtbox .buttons a {text-decoration: none;}
.landingpage .main .text .txtbox .buttons a .knowmore{
    height: 60px;
    width: 337.07px;
    background-color: #282827;
    display:flex;
    align-items: center;
    justify-content: center;
    font-family: "tt-autonomous", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 33.05px;
    vertical-align: middle;
    color: #e5e5e4;
    padding-top: 4.27px;
   
    /* for fonts */
}
.landingpage .main .text .txtbox .buttons a .knowmore:hover,.landingpage .main .text .txtbox .buttons .contactus:hover{
    transition: all 0.4s ease-in-out;
    background-color:  #e8bf29;
    color: #e5e5e4;
    cursor:pointer;
    caret-color: #282827;
}
.landingpage .main .picture {
    height: 89.4vh;
    position: relative;
}

.landingpage .main .picture .jcb {
    height: 89.4%;
    width: 100%;
}

.landingpage .main .picture .jcb img {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 845px;
    width: 690px;
    object-position: center;
    object-fit: contain;
    transition: all 0.5 ease;
    z-index: -10;
}
/*WHY US PAGE */
.whyuscontainer{
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    background-color: #e8bf29;
    overflow: hidden;
    position: relative;
    transition: all 0.4s ease ;
    overflow: hidden;
}

.whyuscontainer img{
    position: absolute;
    height: 100vh;
    width: 100%;
    object-position: 60% 60%;
    
}
.whyuscontainer .whyustxt{
    position: absolute;
    top: 20px;
    height:675px;
    width:903px;
    display: flex;
    flex-direction: column;
    align-items: left;
    transition: all 0.5s ease;
    
}
.whyuscontainer .whyustxt h2{
    font-size: 120px;
    color:#282827;
    font-display:auto;
    font-style:normal;
    font-weight:600;
    font-stretch:normal;
    font-family: "tt-autonomous";
    margin-left:38px;
    margin-top: 15px;
}
.whyuscontainer .whyustxt p{
    height: fit-content;
    width: 865px;
    font-size: 23px;
    color:#282827;
    font-display:auto;
    font-style:normal;
    font-weight:200;
    font-stretch:normal;
    font-family: "tt-autonomous";
    margin-left:38px;
    word-wrap: break-word;
    line-height: 27px;
    margin-top: 22px;
    
}
/*whyus background animation*/
.whyuscontainer img.animate{
    animation: background 1.4s ease ;
}
@keyframes background {
    from{
       bottom: -800px;
    }
    to{
        bottom: 0;
    }
    
}
/*about us*/
.aboutus{
    position: relative;
    height: 100vh;
    width: 100%;
    background-color: #191919;
    background-image: url(pictures/newpattern.png);
    background-position: 50% 50%;
    background-size: 133%;
    display: grid;
    grid-template-columns: 56.25% 43.75%;
    overflow: hidden;
   
}
.aboutus .image{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.aboutus .image .rect1{
    height: 100px;
    width: 1080px;
    background-image: url(pictures/Rectangle\ 28.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.aboutus .image .rect2{
    height: 100px;
    width: 1080px;
    background-image: url(pictures/Rectangle\ 28-1.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.aboutus .image .logo{
    height: 400px;
    width: 400px;
    background-image: url(icons/kalorengineer.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}
.aboutus .image p{
    font-family:"tt-autonomous";
    font-display:auto;
    font-style:normal;
    font-weight:600;
    font-stretch:normal;
    font-size: 60px;
    position: relative;
    bottom: 25px;
}
.aboutus .text{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
}
.aboutus .text p{
    width: 660px;
    height: fit-content;
    word-break: keep-all;
    font-family:"tt-autonomous";
    font-display:auto;
    font-style:normal;
    font-weight:100;
    font-stretch:normal;
    line-height: 1.5em;
    font-size: 20px;
    text-align:justify;
    text-justify:inter-word;
    
} 
.aboutus .text a{
    height: 55px;
    width: 280px;
    text-decoration: none;
    border-radius: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 100px;
}
.aboutus .text .buttons{
    height: 55px;
    width: 686px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 65px;
}
.aboutus .text .button{
    position:relative;
    height: 55px;
    width: 280px;
    background-color: #e5e5e4;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #282827;
    font-size: 25px;
    font-family:"tt-autonomous";
    font-display:auto;
    font-style:normal;
    font-weight:900;
    font-stretch:normal;
    transition: all 0.4s ease-in-out;
}
.aboutus .text a #knowmore{
    background-color: #282827;
    color: #e5e5e4;
}
.aboutus .text a #testimony:hover,.aboutus .text a #knowmore:hover{
    background-color:  #e8bf29;
    color: #e5e5e4;
}
/*projects page*/
.projects{
    position: relative;
    width: 100%;
    height: 100vh;
    background: #f5f5f5;
   overflow: hidden;

}

.projects .slide .item{
    width: 200px;
    height: 270px;
    position: absolute;
    bottom: -120px;
    transform: translate(0, -50%);
    border-radius: 20px;
    box-shadow: 0 20px 40px #000000c7;
    background-position: 20% 50%;
    background-size: cover;
    display: inline-block;
    transition: 0.5s;
   
}

.projects .slide .item:nth-child(1),
.projects .slide .item:nth-child(2){
    bottom: 0;
    left: 0;
    transform: translate(0, 0);
    border-radius: 0;
    width: 100%;
    height: 100%;
    background-position: 50% 50%;
   
}

.projects .slide .item:nth-child(3){
    left: 60%;
}
.projects .slide .item:nth-child(4){
    left: calc(60% + 240px);
}
.projects .slide .item:nth-child(5){
    left: calc(60% + 480px);
}


/* here n = 0, 1, 2, 3,... */
.projects .slide .item:nth-child(n + 6){
    left: calc(60% + 720px);
    opacity: 0;
}



.projects .item .content{
    position: absolute;
    top: 10%;
    right: 20%;
    width: 300px;
    text-align: left;
    color: #e5e5e4;
    transform: translate(0, -50%);
    font-family: system-ui;
    display: none;
}


.projects .slide .item:nth-child(2) .content{
    display: block;
}


.projects .content .name{
    position: relative;
     left: -90px; 
     top: 70px;
    font-size: 65px;
    font-family:"tt-autonomous-outline";
    text-transform: uppercase;
    font-display:auto;
    font-style:normal;
    font-weight:900;
    font-stretch:normal;
    opacity: 0;
    animation: animate 1s ease-in-out 1 forwards;
    width: fit-content;
    
}

.projects .content .des{
    position: relative;
    left: -90px;
    top: 70px;
    margin-top: 10px;
    opacity: 0;
    animation: animate 1s ease-in-out 0.3s 1 forwards;
    font-family:"tt-autonomous";
    font-display:auto;
    font-style:normal;
    font-weight:500;
    font-stretch:normal;
    font-size: 25px;
    width: 665px;
    
}




@keyframes animate {
    from{
        opacity: 0;
        transform: translate(0, 100px);
        filter: blur(33px);
    }

    to{
        opacity: 1;
        transform: translate(0);
        filter: blur(0);
    }
}



.projects .button{
    width: fit-content;
    text-align: center;
    position: absolute;
    bottom: 100px;
    left:180px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
}

.projects .button button{
    width: 65px;
    height: 65px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    margin: 0 5px;
    background-color: #e5e5e4;
    transition: 0.3s;
   
}
.projects .button button i{
    color: #282828;
    font-size: 20px;
    font-weight: 900;
}

.projects .button button:hover{
    background: #b4b4b4;
    
}
/*main service page */
.mainservices{
       height: 100vh;
       width:100%;
       background-color: #191919;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       overflow: hidden;
}
.mainservices nav{
    height: 184.52px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.mainservices nav h2{
    align-self: center;
    justify-self: center;
    font-size: 70px;
    font-family:"tt-autonomous";
    font-display:auto;
    font-style:normal;
    font-weight:800;
    font-stretch:normal;
}
.mainservices nav .bar{
    height: 6px;
    width: 185px;
    background-color: #E8BF29;
    position: relative;
    top: 36.52px;
}
.mainservices footer{
    height:895.48px;
    width:100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
}
.mainservices footer .content:nth-child(n){
       width:524px;
       height: 220px;
       display: flex;
       align-items: top;
       justify-content:center;
       gap:34px;
       
}
.mainservices footer .content .pic{
    height: 120px;
    width: 120px;
    border-radius: 50%;
    background-color: #e8bf29;
    margin-top: 10px;
    transition: all 0.2s ease;
}
.mainservices footer .content .pic:hover{
    background-color: #e5e5e4;
}

.mainservices footer .content #pic1{
    background-image: url(icons/construction_black.png);
    background-size: 60% 60%;
    background-position: center;
    background-repeat: no-repeat;
}
.mainservices footer .content #pic2{
    background-image: url(icons/architectural_black.png);
     background-size: 60% 60%;
    background-position: center;
    background-repeat: no-repeat;
}
.mainservices footer .content #pic3{
    background-image: url(icons/electric-tower_black.png);
     background-size: 60% 60%;
    background-position: center;
    background-repeat: no-repeat;
}
.mainservices footer .content #pic4{
    background-image: url(icons/home-repair_black.png);
     background-size: 70% 70%;
    background-position: center;
    background-repeat: no-repeat;
}
.mainservices footer .content #pic5{
    background-image: url(icons/contract_black.png);
     background-size: 65% 65%;
    background-position: center;
    background-repeat: no-repeat;
}
.mainservices footer .content #pic6{
    background-image: url(icons/bank_black.png);
     background-size: 60% 60%;
    background-position: center;
    background-repeat: no-repeat;
}
.mainservices footer .content aside{
    height: 100%;
    width:370px;
    display:flex;
    flex-direction: column;
    justify-content: space-between;
}
.mainservices footer .content aside h1,.mainservices footer .content aside h2{
    height: auto;
    font-size: 25px;
    font-family:"tt-autonomous";
    line-height: 30px;
    margin-top: 10px;
    
}
.mainservices footer .content aside p{
    height:fit-content;
    width: 360px;
    font-size: 20px;
    font-family:"tt-autonomous";
    font-display:auto;
    font-style:normal;
    font-weight:200;
    font-stretch:normal;
    padding-left:5px;
    margin-bottom: 10px;
    line-height: 22px;
}
.mainservices footer .content:nth-child(1) aside p{
    margin-bottom: 40px;
}
.mainservices footer .content:nth-child(4) aside p{
    margin-bottom: 40px;
}
/*review page*/
.reviews{
    height: 100vh;
    width: 100%;
    background-color: #E8BF29;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 95px;
    overflow: hidden;
}
.reviews .reviewbox:nth-child(n){
    height: 500px;
    width: 455px;
    background-color: #191919;
    border-radius: 20px;
    box-shadow: -20px 16px 30px rgba(0,0,0,0.77);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease;
}
.reviews .reviewbox header{
    height: 113px;
    width: 100%;
    display: flex;
    align-items:end;
    justify-content: center;
    font-size: 50px;
    font-family:AoboshiOne-Regular;
   
}
.reviews .reviewbox footer{
    height: 469px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: left;
   
}
.reviews .reviewbox footer p:nth-child(1){
    font-size: 16px;
    font-family:"tt-autonomous";
    font-display:auto;
    font-style:normal;
    font-weight:200;
    font-stretch:normal;
    line-height: 25px;
    height:220px;
    width: 400px;
     margin-top: 37px;
     margin-left: 50px;
}
.reviews .reviewbox footer p:nth-child(2){
    font-size: 16px;
    font-family:"tt-autonomous";
    font-display:auto;
    font-style:normal;
    font-weight:200;
    font-stretch:normal;
    line-height: 25px;
     margin-top: 37px;
     margin-left: 50px;
}
.reviews .reviewbox footer p b{
    font-size: 17px;
}
.reviews .reviewbox:hover{
    scale:1.2;
    
} 

.reviews .reviewbox:nth-child(n).animate{
      animation: grow 1s ease;
}
.reviews.animate{
    animation: gap 1s ease;
}

@keyframes grow {
    from{
        scale: 0;
    }
    to{scale:1;}
    50%{
        scale:1.1;
       
    }
   
}

@keyframes gap{
    from{
        background-color: #e5e5e4;
        gap: 69px;
    }
    to{
        gap: 95px;
    }
    55%{gap: 89px;}
}

/*contactus page*/
.contactus{
    height: 100vh;
    width:100%;
    background-color: #191919;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.contactus header{
    height: 1060px;
    width: 100%;
    border-bottom: 1px solid #e8bf29;
    display: flex;
    align-items: center;
    justify-content: center;
}
.contactus header .alldetails{
    height: 730px;
    width: 1681px;
    display: grid;
    grid-template-columns: 50% 50%;
    background-color: #e5e5e4;
}
.contactus header .alldetails .mapping{
    display: flex;
    flex-direction: column;
    align-items:left;
    height:fit-content; 
    gap:50px;
    height: 100%;
}
.contactus header .alldetails .mapping h2{
    font-size: 60px;
    font-family:"tt-autonomous";
    font-display:auto;
    font-style:normal;
    font-weight:700;
    font-stretch:normal;
    color: #282827;
    margin-left: 70px;
    margin-top: 39px;
   
}
.contactus header .mapping .map{
    height:406px;
    width: 715px;
    border: 1px solid black;
    margin-left: 70px;
    margin-bottom:176px ;
}
.contactus header .details{
   height:100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 52.54px;
}

.contactus header .details .logo{
    height: 109.96px;
    width: 547px;
    background-image: url(pictures/blacklogo.png);
    background-position: center;
    background-size: cover;
    margin-top: 67PX;
}
.contactus header .details section{
    height: fit-content;
    width: 547px;
    display: flex;
    flex-direction: column;
    align-items: top;
    justify-content: left;
}
.contactus header .details section p{
    color: #282827;
    font-family:"tt-autonomous";
    font-display:auto;
    font-style:normal;
    font-weight:300;
    font-stretch:normal;
    font-size: 14px;
    line-height: 20px;
    
}
.contactus header .details section p:nth-child(3){
   margin-top: 20px;
   width: 597px;
   height: 73px;
}
.contactus header .details section p:nth-child(4){
    margin-top: 10px;
}
.contactus header .details section p:nth-child(6){
    margin-top: 17px;
    font-size: 15px;
}
.contactus footer{
    height: 20px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family:"tt-autonomous";
    font-display:auto;
    font-style:normal;
    font-weight:400;
    font-stretch:normal;
    font-size: 12px;
    background-color: #e8bf29;
    color: #282827;
}
@media only screen and (max-device-width: 430px) 
 /* This is for mobile phones portrait */
{
    html{
        overflow-x: hidden;
     }
    * {
        padding: 0;
        margin: 0;
        color: #e5e5e4;
        box-sizing: border-box;
    }
    body {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: fit-content;
        max-height: 700vh;
        scroll-snap-type: y mandatory;
        width: 100%;
        overflow-x: hidden;
    }
    /* LANDING PAGE */
    .container {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 500px;
        width: 100%;
        background-image: url(pictures/background.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        overflow: hidden;
        position: relative;
    }
    
    .saturation {
        height:500px;
        width: 215px;
        position: absolute;
        right: 0;
        overflow: hidden;
    }
    
    .saturation img {
        height: 500px;
        width: 54dvw;
        object-position: center;
        transition: all 0.5 ease-in-out;
        position: absolute;
        right: 0;
        min-width: 192px;
        overflow: hidden;
    }
    
    .landingpage {
        position: relative;
        height: 500px;
        width: 100%;
        display: grid;
        grid-template-rows: 10.6% 89.4%;
        z-index: 12;
    }
    
    .landingpage .nav {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        
    }
    
    .landingpage .nav ul {
        height: 18px;
        width: 50dvw;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5dvw;
        margin-top: -7px;
        font-family: "tt-autonomous";
        font-weight: 500;
        font-style: normal;
        font-size: 2dvw;
      margin-right: 2dvw;
        
    }
    .landingpage  ul a {
     text-decoration: none;
    }
    /* Navbar List Items */
    .landingpage .nav ul li {
        position: relative;
        list-style: none;
        cursor: pointer;
        padding: 13px 0; /* Add some padding for better click area */
        color: #e5e5e4;
    }
    
    .landingpage .nav ul li::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 0px;
        background-color: #e8bd3f;
        transition: all 0.3s ease-in-out;
    }
    
    .landingpage .nav ul li:hover::after {
        width: 100%;
    }
    
    .landingpage .nav .logo {
        height: 4.67dvw;
        width: 30.67dvw;
        margin-top: -3px;
        background-image: url(pictures/Logo.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        margin-left: 15px;
       
    }
    
    .landingpage .main {
        display: grid;
        grid-template-columns: 50% 50%;
        position: relative;
    }
    
    .landingpage .main .text .txtbox {
        position: absolute;
        top: 6dvw;
        left: 22px;
        width: 60dvw;
        height: 57dvw;
        display: flex;
        flex-direction: column;
        gap: 0px;
    }
    
    .landingpage .main .text .txtbox #ready {
        width: 48dvw;
        font-family: "tt-autonomous";
        font-weight: 700;
        font-style: normal;
        font-size: 6.4dvw;
        color: #e5e5e4;
       
        /* for fonts */
    }
    
    .landingpage .main .text .txtbox h3 {
        width: 65dvw;
        font-family: "tt-autonomous-outline";
        font-weight: 900;
        font-style: normal;
        font-size: 6.4dvw;
        line-height: 8dvw;
        margin-top: 2dvw;
        
        /* for fonts */
    }
    .landingpage .main .text .txtbox h3 b{
        font-family: "tt-autonomous-outline";
        font-weight: 900;
        font-style: normal;
        font-size: 6.4dvw;
    }
    .landingpage .main .text .txtbox #reality {
        width:50dvw;
        height: 28px;
        font-family: "tt-autonomous";
        font-weight: 700;
        font-style: normal;
        font-size: 6.7dvw;
        color: #e8bf29;
        margin-top: 3px;
        /* for fonts */
    }
    
    .landingpage .main .text .txtbox  .buttons {
        height:24dvw;
        width: 23dvw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        gap: 5dvw;
        margin-top: 28px;
        margin-left: 8px;
        
    }
    
    .landingpage .main .text .txtbox .buttons a .contactus {
        vertical-align: middle;
        height:8dvw;
        width: 23dvw;
        text-decoration: none;
        color: #282827;
        font-size: 2.4dvw;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        -webkit-tap-background-color:#e8bf29;
       
    }
    .landingpage .main .text .txtbox .buttons a .knowmore {
        text-decoration: none;
        padding-top: 4.27px;
        vertical-align: middle;
        height:8dvw;
        width: 23dvw;
        text-decoration: none;
        color: #e5e5e5;
        font-size: 2.4dvw;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor:none;
        -webkit-tap-highlight-background-color:#e8bf29;
    }
    .landingpage .main .text .txtbox .buttons a {
        height:8dvw;
        width: 23dvw;
        display:flex;
        align-items: center;
        justify-content: center;
        font-family: "tt-autonomous", sans-serif;
        font-weight: 700;
        font-style: normal;
        vertical-align: middle;
        color: #e5e5e4;
        padding-top: 4.27px;
        padding-bottom: 5px;
        font-size: 2.7dvw;
        z-index: 100;
        
    }
    .landingpage .main .text .txtbox .buttons a .contactus:hover,.landingpage .main .text .txtbox .buttons a .knowmore:hover{
        background-color: #e5e5e4;
        color: #282827;
    } 
    .landingpage .main .text .txtbox .buttons a .knowmore:hover{
       background-color: #282827;
       color: #e5e5e4;
    }

    .landingpage .main .picture {
        height:447px;
        width: 100%;
        position: absolute;
    }

    .landingpage .main .picture .jcb,
    .landingpage .main .picture .jcb img,
    .saturation,
    .saturation img,
    #layer2,
    #layer3 {
        transition: none !important;
        transform: none !important;
    }
    



    .landingpage .main .picture .jcb {
        position: absolute;
        height: 58.4dvw;
        width: 57.3dvw;
        bottom: 0px;
        right: 0px;
        min-height:195.2px;
        min-width: 190.4px;
    }
    
    .landingpage .main .picture .jcb img {
        position:absolute;
        right: 0;
        height: 58.4dvw;
        width: 57.3dvw;
        object-position: 90% 50%;
        object-fit:contain;
        transition: all 0.5 ease;
        z-index: -10;
        bottom: 0px;
        
        min-height:195.2px;
        min-width: 190.4px;
    }
    /*WHY US PAGE */
    .whyuscontainer{
        display: flex;
        flex-direction: column;
        height: 550px;
        width: 100%;
        background-color: #e8bf29;
        overflow: hidden;
        position: relative;
        transition: all 0.4s ease ;
    }
    
    .whyuscontainer img{
        position: absolute;
        height: 100%;
        width: 100%;
        object-position: 10% 100%;
        object-fit:cover;
        bottom: 0;
        
    }
    .whyuscontainer .whyustxt{
        position: absolute;
        top: 10px;
        height:50dvw;
        width:70%;
        display: flex;
        flex-direction: column;
        align-items: left;
        justify-content: left;
        transition: all 0.5s ease;
        left: 10px;
       
    }
    .whyuscontainer .whyustxt h2{
        font-size: 35px;
        width: 100%;
        color:#282827;
        font-display:auto;
        font-style:normal;
        font-weight:800;
        font-stretch:normal;
        font-family: "tt-autonomous";
        position: relative;
        left: -30px;
    }
    .whyuscontainer .whyustxt p{
        height: fit-content;
        width: 68dvw;
        font-size:2.4dvw;
        color:#282827;
        font-display:auto;
        font-style:normal;
        font-weight:400;
        font-stretch:normal;
        font-family: "tt-autonomous";
        word-break: break-all;
       line-height: 2.8dvw;
        text-align: left;
        position: relative;
        left: -30px;
        top: -10px;
        word-break: keep-all;
    }
   
    /*about us*/
    .aboutus{
        position: relative;
        height: 500px;
        width: 100%;
        background-color: #191919;
        background-image: url(pictures/newpattern.png);
        background-position: 30% 70%;
        background-size: 100%;
        display: grid;
        grid-template-columns: 45% 55%;
        overflow: hidden;  
    }
    .aboutus .image{
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }
    
    .aboutus .image .rect1{
        display: none;
        height: 20px;
        width: 100%;
        background-image: url(pictures/Rectangle\ 28.png);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .aboutus .image .rect2{
        display: none;
        height: 20px;
        width: 100%;
        background-image: url(pictures/Rectangle\ 28-1.png);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .aboutus .image .logo{
        height: 30dvw;
        width: 30dvw;
        background-image: url(icons/kalorengineer.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 158px;
    }
    .aboutus .image p{
        font-family:"tt-autonomous";
        font-display:auto;
        font-style:normal;
        font-weight:400;
        font-stretch:normal;
        font-size:5dvw;
        position: relative;
        bottom: 37%;
    }
    .aboutus .image p b{
        font-weight: 400;
    }
    .aboutus .text{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        font-weight:200;
       
    }
    .aboutus .text p{
        width: 95%;
        height: fit-content;
        font-family:"tt-autonomous";
        word-break: break-all;
        font-display:auto;
        font-style:normal;
        font-weight:300;
        font-stretch:normal;
        font-size:2.2dvw;
        text-align:left;
        line-height: 2.5dvw;
        text-align: justify;
        word-break: keep-all;
        position: relative;
        left: -6px;
    } 
    .aboutus .text a{
        height: 4.8dvw;
        width: 19dvw;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
        font-size: 1.9dvw;
    }
    .aboutus .text .buttons{
        margin-top: 5px;
        height: 4.8dvw;
        width: 30dvw;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12dvw;
    }
    .aboutus .text .button{
        position:relative;
        height: 4.8dvw;
        width: 19dvw;
        background-color: #e5e5e4;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #282827;
        font-size: 1.9dvw;
        font-family:"tt-autonomous";
        font-display:auto;
        font-style:normal;
        font-weight:500;
        font-stretch:normal;
        transition: all 0.4s ease-in-out;
        padding-top: 4px;
    }
    .aboutus .text #knowmore{
        background-color: #282827;
        color: #e5e5e4;
        width: 18dvw;
    }
    /*projects page*/
    .projects{
        position: relative;
        width: 100%;
        height:500px;
        background: #f5f5f5;
       overflow: hidden;
    
    }
    
    .projects .slide .item{
        width: 14dvw;
        height: 20dvw;
        position: absolute;
        bottom: -10px;
        transform: translate(0, -50%);
        border-radius: 10px;
        box-shadow: 0 20px 40px #000000c7;
        background-position: 20% 50%;
        background-size: cover;
        display: inline-block;
        transition: 0.5s;
       
    }
    
    .projects .slide .item:nth-child(1),
    .projects .slide .item:nth-child(2){
        bottom: 0;
        left: 0;
        transform: translate(0, 0);
        border-radius: 0;
        width: 100%;
        height: 100%;
        background-position: 50% 50%;
       
    }
    
    .projects .slide .item:nth-child(3){
        left: 45dvw;
        right: 20dvw;
    }
    .projects .slide .item:nth-child(4){
        left: calc(45dvw + 19%);
        right: 20dvw;
    }
    .projects .slide .item:nth-child(5){
        left: calc(45dvw + 38%);
        right: 20dvw;
    }
    
    
    /* here n = 0, 1, 2, 3,... */
    .projects .slide .item:nth-child(n + 6){
        left: calc(22dvw + 280px);
        opacity: 0;
    }
    
    
    
    .projects .item .content{
        position: absolute;
        top: 34%;
        right: 2dvw;
        width: 57dvw;
        height: 80dvw;
        text-align: left;
        color: #e5e5e4;
        transform: translate(0, -50%);
        font-family: system-ui;
        display: none;
        
    }
    
    
    .projects .slide .item:nth-child(2) .content{
        display: block;
    }
    
    
    .projects .content .name{
        position: static;
        margin-top: 5dvw;
        font-size: 6dvw;
        font-family:"tt-autonomous-outline";
        text-transform: uppercase;
        font-display:auto;
        font-style:normal;
        font-weight:900;
        font-stretch:normal;
        opacity: 0;
        animation: animate 1s ease-in-out 1 forwards;
        width: 49dvw;
        color: #f5f5f5;
        line-height: 7dvw;
       
    }
    
    .projects .content .des{
        position: static;
        margin-top: 1.3dvw;
        opacity: 0;
        animation: animate 1s ease-in-out 0.3s 1 forwards;
        font-family:"tt-autonomous";
        font-display:auto;
        font-style:normal;
        font-weight:300;
        font-stretch:normal;
        font-size:2.4dvw;
        line-height: 3.4dvw;
        color: #f5f5f5;
        width: 56dvw;
        text-align: justify;
        text-justify: inter-word;
    }
    
    
    
    
    @keyframes animate {
        from{
            opacity: 0;
            transform: translate(0, 100px);
            filter: blur(33px);
        }
    
        to{
            opacity: 1;
            transform: translate(0);
            filter: blur(0);
        }
    }
    
    
    
    .projects .button{
        width: fit-content;
        text-align: center;
        position: absolute;
        bottom: 35px;
        left:17px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
    }
    
    .projects .button button{
        width: 9dvw;
        height: 9vw;
        border-radius: 50%;
        border: none;
        cursor: pointer;
        margin: 0 5px;
        background-color: #e5e5e4;
        transition: 0.3s;
       
    }
    .projects .button button i{
        color: #282828;
        font-size:1.2rem;
        font-weight: 900;
    }
    
    .projects .button button:hover{
        background: #b4b4b4;
        
    }
    /*main service page */
    .mainservices{
           height:fit-content;
           width: 100%;
           background-color: #191919;
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
           overflow: hidden;
    }
    .mainservices nav{
        height: 30%;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        
    }
    .mainservices nav h2{
        align-self: center;
        justify-self: center;
        font-size: 7dvw;
        font-family:"tt-autonomous";
        font-display:auto;
        font-style:normal;
        font-weight:800;
        font-stretch:normal;
        margin-top: 5dvw;
    
    }
    .mainservices nav .bar{
        height: 2px;
        width: 20dvw;
        background-color: #E8BF29;
        position: relative;
        top: 9px;
    }
    .mainservices footer{
        position: relative;
        bottom: 0px;
        height:70%;
        width:100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content:start;
        gap: 4dvw;
    }
    .mainservices footer .content:nth-child(n){
           position:relative;
           height: 25dvw;
           display: flex;
           align-items: center;
           justify-content:center;
           gap:3dvw;
           left: 2dvw;
           width: 100%;
           margin-bottom: 2dvw;
    }
    .mainservices footer .content:nth-child(1){
        margin-top: 5dvw;
    }
    .mainservices footer .content:nth-child(6){
        margin-bottom: 9dvw;
    }
    .mainservices footer .content .pic{
        position: static;
        height: 14dvw;
        width: 14dvw;
        border-radius: 50%;
        background-color: #e8bf29;
        transition: all 0.2s ease;
        margin-bottom: 13dvw;
    }
    .mainservices footer .content .pic:hover{
        background-color: #e5e5e4;
    }
    
    .mainservices footer .content #pic1{
        background-image: url(icons/construction_black.png);
        background-size: 60% 60%;
        background-position: center;
        background-repeat: no-repeat;
    }
    .mainservices footer .content #pic2{
        background-image: url(icons/architectural_black.png);
         background-size: 60% 60%;
        background-position: center;
        background-repeat: no-repeat;
    }
    .mainservices footer .content #pic3{
        background-image: url(icons/electric-tower_black.png);
         background-size: 60% 60%;
        background-position: center;
        background-repeat: no-repeat;
    }
    .mainservices footer .content #pic4{
        background-image: url(icons/home-repair_black.png);
         background-size: 70% 70%;
        background-position: center;
        background-repeat: no-repeat;
    }
    .mainservices footer .content #pic5{
        background-image: url(icons/contract_black.png);
         background-size: 65% 65%;
        background-position: center;
        background-repeat: no-repeat;
    }
    .mainservices footer .content #pic6{
        background-image: url(icons/bank_black.png);
         background-size: 60% 60%;
        background-position: center;
        background-repeat: no-repeat;
    }
    .mainservices footer .content aside{
        position: relative;
        height: 100%;
        width:80%;
        display:flex;
        flex-direction: column;
        justify-content: center;
    }
    .mainservices footer .content aside h1,.mainservices footer .content aside h2{
        position: absolute;
        height: auto;
        font-size:3.5dvw;
        font-family:"tt-autonomous";
        line-height: 4dvw;
        margin-top: 5px;
        top: 0;
    }
    .mainservices footer .content aside p{
        position: absolute;
        height:fit-content;
        width: 100%;
        font-size: 2.7dvw;
        font-family:"tt-autonomous";
        font-display:auto;
        font-style:normal;
        font-weight:200;
        padding-left:0px;
        margin-top: -4px;
        line-height: 15px;
        top: 8dvw;
    }
    
    /*review page*/
    .reviews{
        height: 550px;
        width: 100%;
        background-color: #E8BF29;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 40px;
        position: relative;
        overflow: hidden;
    }
    .reviews .reviewbox:nth-child(n){
        height: 215px;
        width: 40dvw;
        background-color: #191919;
        border-radius: 20px;
        box-shadow: -20px 16px 30px rgba(0,0,0,0.77);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: all 0.5s ease;
    }
    .reviews .reviewbox header{
        height: 22.6%;
        width: 100%;
        display: flex;
        align-items:end;
        justify-content: center;
        font-size: 8dvw;
        font-family:AoboshiOne-Regular;
        padding-top:10dvw;
       
    }
    .reviews .reviewbox footer{
        height: 93.06%;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: left;
       
    }
    .reviews .reviewbox footer p:nth-child(1){
        font-size:2.7dvw;
        font-family:"tt-autonomous";
        font-display:auto;
        font-style:normal;
        font-weight:200;
        font-stretch:normal;
        line-height: 12px;
        height:fit-content;
        width: 32dvw;
         margin-top: 0px;
         margin-left:4dvw;
    }
    .reviews .reviewbox footer p:nth-child(2){
        font-size:2.7dvw;
        font-family:"tt-autonomous";
        font-display:auto;
        font-style:normal;
        font-weight:200;
        font-stretch:normal;
        line-height: 3.5dvw;
         margin-top: 10px;
         margin-left:4dvw;
    }
    .reviews .reviewbox footer p b{
        font-size:2.7dvw;
    }
    .reviews .reviewbox:hover{
        scale:1;
        
    } 
    
    .reviews .reviewbox:nth-child(n).animate{
          animation: grow 1s ease;
    }
    .reviews.animate{
        animation: gap 1s ease;
    }
    
    @keyframes grow {
        from{
            scale: 0;
        }
        to{scale:1;}
        50%{
            scale:1.1;
           
        }
       
    }
    
    @keyframes gap{
        from{
            background-color: #e5e5e4;
            gap: 10px;
        }
        to{
            gap: 20px;
        }
        55%{gap: 15px;}
    }
    
    .reviews .reviewbox:nth-child(1){
        position: absolute;
        top: 40px;
        left: 7%;
        z-index: 1;
    }
    .reviews .reviewbox:nth-child(2){
        position: absolute;
        left: 7%;
        top: 290px;
        z-index: 1;
    }
    .reviews .reviewbox:nth-child(3){
        position: absolute;
        right: 4%;
        z-index: 1;
    }





    /*contactus page*/
    .contactus{
        height: 580px;
        width: 100%;
        background-color: #191919;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
    }
    .contactus header{
        height: 96%;
        width: 100%;
        border-bottom: 3px solid #e8bf29;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .contactus header .alldetails{
        height:95%;
        width: 95%;
        display: flex;
        flex-direction: column;
        align-items: left;
        justify-content: left;
        background-color: #e5e5e4;
    }
    .contactus header .alldetails .mapping{
        height: 45%;
        display: flex;
        flex-direction: column;
        align-items:left;
        
    }
    .contactus header .alldetails .mapping h2{
        font-size: 7.5dvw;
        font-family:"tt-autonomous";
        font-display:auto;
        font-style:normal;
        font-weight:700;
        font-stretch:normal;
        color: #282827;
        margin-left: 25px;
        margin-top: 7px;
        height: 23px;
        width: 300px;
       
    }
    .contactus header .mapping .map{
        position: absolute;
        height:160px;
        width: 80dvw;
        border: 1px solid black;
        margin-left: 25px;
        margin-top:3px ;
        top: 70px;
    }
    .contactus header .details{
        position: relative;
       height: 55%;
       display: flex;
       flex-direction: column;
       align-items: left;
    }
    
    .contactus header .details .logo{
        height: 13.23dvw;
        width: 67.57dvw;
        background-image: url(pictures/blacklogo.png);
        background-position: center;
        background-size: cover;
        position: absolute;
        top: -60px;
        left: 25px;
        
    }
    .contactus header .details section{
        height: fit-content;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: top;
        justify-content: left;
    }
    .contactus header .details section p{
        color: #282827;
        font-family:"tt-autonomous";
        font-display:auto;
        font-style:normal;
        font-weight:300;
        font-stretch:normal;
        font-size: 2.5dvw;
        line-height: 0.8rem;
        width: 100dvw;
        margin-left: 25px;
    }
    .contactus header .details section p:nth-child(1){
        margin-top: 20dvw;
    }
    .contactus header .details section p:nth-child(3){
        margin-top: 8px;
       width:90dvw;
    }
    .contactus header .details section p:nth-child(4){
        margin-top: -7px;
        width:90dvw;
    }
    .contactus header .details section p:nth-child(6){
        margin-top: 3dvw;
        font-size: 2.5dvw;
    }
    .contactus footer{
        height: 12px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family:"tt-autonomous";
        font-display:auto;
        font-style:normal;
        font-weight:400;
        font-stretch:normal;
        font-size: 8px;
    }
}










@media only screen and (max-device-width: 430px) and (orientation:landscape)
    /* This is for Mobile Phones Landscape */

{

    html{
        overflow-x: hidden;
     }
    * {
        padding: 0;
        margin: 0;
        color: #e5e5e4;
        box-sizing: border-box;
    }
    body {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: fit-content;
        max-height: 7000vw;
        scroll-snap-type: y mandatory;
        width: 100%;
        overflow-x: hidden;
    }
    /* LANDING PAGE */
    .container {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 65vw;
        width: 100%;
        background-image: url(pictures/background.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        overflow: hidden;
        position: relative;
        max-height:fit-content;
    }
    
    .saturation {
        height:100%;
        width: 45%;
        position: absolute;
        right: 0;
        overflow: hidden;
    }
    
    .saturation img {
        height: 100%;
        width: 100%;
        object-position: center;
        transition: all 0.5 ease-in-out;
        position: absolute;
        right: 0;
        min-width: 192px;
        overflow: hidden;
    }
    
    .landingpage {
        position: relative;
        min-height: 65vw;
        width: 100%;
        max-height:fit-content;
        display: grid;
        grid-template-rows: 14% 86%;
        z-index: 12;
    }
    
    .landingpage .nav {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;  
    }
    
    .landingpage .nav ul {
        height: 40%;
        width: 49dvw;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5dvw;
        margin-top: -7px;
        font-family: "tt-autonomous";
        font-weight: 500;
        font-style: normal;
        font-size: 1.8dvw;
      margin-right: 2dvw;     
    }
    .landingpage  ul a {
     text-decoration: none;
    }
    /* Navbar List Items */
    .landingpage .nav ul li {
        position: relative;
        list-style: none;
        cursor: pointer;
        padding: 13px 0; /* Add some padding for better click area */
        color: #e5e5e4;
    }
    
    .landingpage .nav ul li::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 0px;
        background-color: #e8bd3f;
        transition: all 0.3s ease-in-out;
    }
    
    .landingpage .nav ul li:hover::after {
        width: 100%;
    }
    
    .landingpage .nav .logo {
        height: 4.67dvw;
        width: 30.67dvw;
        margin-top: -3px;
        background-image: url(pictures/Logo.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        margin-left: 2.5dvw;
       
    }
    
    .landingpage .main {
        display: grid;
        grid-template-columns: 50% 50%;
        position: relative;
    }
    
    .landingpage .main .text .txtbox {
        position: absolute;
        top: 2dvw;
        left: 22px;
        width: fit-content;
        height: fit-content;
        display: flex;
        flex-direction: column;
        gap: 0px;
    }
    
    .landingpage .main .text .txtbox #ready {
        width: 48dvw;
        font-family: "tt-autonomous";
        font-weight: 700;
        font-style: normal;
        font-size: 5.6dvw;
        line-height: 8dvw;
        color: #e5e5e4;
        height: auto;
        /* for fonts */
    }
    
    .landingpage .main .text .txtbox h3 {
        width: 54dvw;
        font-family: "tt-autonomous-outline";
        font-weight: 900;
        font-style: normal;
        font-size: 4.7dvw;
        line-height: 5.8dvw;
        margin-top: 0.7dvw;
        height: auto;
    }
    .landingpage .main .text .txtbox h3 b{
        font-family: "tt-autonomous-outline";
        font-weight: 900;
        font-style: normal;
        font-size: 4.7dvw;
    }
    .landingpage .main .text .txtbox #reality {
        width:50dvw;
        font-family: "tt-autonomous";
        font-weight: 700;
        font-style: normal;
        font-size: 6.9dvw;
        color: #e8bf29;
        margin-top: 0.7dvw;
        height: auto;
    }
    
    .landingpage .main .text .txtbox  .buttons {
        height:fit-content;
        width: fit-content;
        display: flex;
        flex-direction:row;
        align-items: center;
        justify-content: space-between;
        gap: 5dvw;
        margin-top: 2.5dvw;
        margin-left: 8px;
        margin-bottom: 1.2dvw;
    }
    
    .landingpage .main .text .txtbox .buttons a .contactus {
        vertical-align: middle;
        height: 5.6dvw;
        width: 23dvw;
        text-decoration: none;
        color: #282827;
        font-size: 2dvw;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        -webkit-tap-background-color:#e8bf29;
       
    }
    .landingpage .main .text .txtbox .buttons a .knowmore {
        text-decoration: none;
        padding-top: 4.27px;
        vertical-align: middle;
        height: 5.6dvw;
        width: 23dvw;
        text-decoration: none;
        color: #e5e5e5;
        font-size: 2.4dvw;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor:none;
        -webkit-tap-highlight-background-color:#e8bf29;
    }
    .landingpage .main .text .txtbox .buttons a {
        height: 5.6dvw;
        width: 23dvw;
        display:flex;
        align-items: center;
        justify-content: center;
        font-family: "tt-autonomous", sans-serif;
        font-weight: 700;
        font-style: normal;
        vertical-align: middle;
        color: #e5e5e4;
        padding-top: 4.27px;
        padding-bottom: 5px;
        font-size: 2.7dvw;
        z-index: 100;
        
    }
    .landingpage .main .text .txtbox .buttons a .contactus:hover,.landingpage .main .text .txtbox .buttons a .knowmore:hover{
        background-color: #e5e5e4;
        color: #282827;
    } 
    .landingpage .main .text .txtbox .buttons a .knowmore:hover{
       background-color: #282827;
       color: #e5e5e4;
    }

    .landingpage .main .picture {
        height:100%;
        width: 100%;
        position: absolute;
    }

    .landingpage .main .picture .jcb,
    .landingpage .main .picture .jcb img,
    .saturation,
    .saturation img,
    #layer2,
    #layer3 {
        transition: none !important;
        transform: none !important;
    }

    .landingpage .main .picture .jcb {
        position: absolute;
        height: 42.2dvw;
        width: 41.1dvw;
        bottom: 0px;
        right: 0px;
        min-height:195.2px;
        min-width: 190.4px;
    }
    
    .landingpage .main .picture .jcb img {
        position:absolute;
        right: 0;
        height: 42.2dvw;
        width: 41.1dvw;
        object-position: 90% 50%;
        object-fit:contain;
        transition: all 0.5 ease;
        z-index: -10;
        bottom: 0px;
        
        min-height:195.2px;
        min-width: 190.4px;
    }
    /*WHY US PAGE */
    .whyuscontainer{
        display: flex;
        flex-direction: column;
        min-height: 92vw;
        max-height: fit-content;
        width: 100%;
        background-color: #e8bf29;
        overflow: hidden;
        position: relative;
        transition: all 0.4s ease ;
    }
    
    .whyuscontainer img{
        position: absolute;
        height: 100%;
        width: 100%;
        object-position: 10% 100%;
        object-fit:cover;
        bottom: 0;
        
    }
    .whyuscontainer .whyustxt{
        position: absolute;
        top: 10px;
        height:50dvw;
        width:70%;
        display: flex;
        flex-direction: column;
        align-items: left;
        justify-content: left;
        transition: all 0.5s ease;
        left: 10px;
       
    }
    .whyuscontainer .whyustxt h2{
        font-size: 6.7dvw;
        width: 100%;
        color:#282827;
        font-display:auto;
        font-style:normal;
        font-weight:800;
        font-stretch:normal;
        font-family: "tt-autonomous";
        position: relative;
        left: -30px;
    }
    .whyuscontainer .whyustxt p{
        height: fit-content;
        width: 65dvw;
        font-size:1.88dvw;
        color:#282827;
        font-display:auto;
        font-style:normal;
        font-weight:400;
        font-stretch:normal;
        font-family: "tt-autonomous";
        word-break: break-all;
       line-height: 2.8dvw;
        text-align: left;
        position: relative;
        left: -30px;
        top: -10px;
        word-break: keep-all;
    }
   
    /*about us*/
    .aboutus{
        position: relative;
        min-height: 65vw;
        max-height: fit-content;
        width: 100%;
        background-color: #191919;
        background-image: url(pictures/newpattern.png);
        background-position: 30% 70%;
        background-size: 100%;
        display: grid;
        grid-template-columns: 45% 55%;
        overflow: hidden;  
       
    }
    .aboutus .image{
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }
    
    .aboutus .image .rect1{
        display: visible;
        height: 3.99dvw;
        width: 100%;
        background-image: url(pictures/Rectangle\ 28.png);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .aboutus .image .rect2{
        display: visible;
        height: 3.99dvw;
        width: 100%;
        background-image: url(pictures/Rectangle\ 28-1.png);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .aboutus .image .logo{
        height: 26dvw;
        width: 26dvw;
        background-image: url(icons/kalorengineer.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 0px;
    }
    .aboutus .image p{
        font-family:"tt-autonomous";
        font-display:auto;
        font-style:normal;
        font-weight:400;
        font-stretch:normal;
        font-size:5dvw;
        position: relative;
        bottom: 10%;
    }
    .aboutus .image p b{
        font-weight: 400;
    }
    .aboutus .text{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        font-weight:200;
       
    }
    .aboutus .text p{
        width: 95%;
        height: fit-content;
        font-family:"tt-autonomous";
        word-break: break-all;
        font-display:auto;
        font-style:normal;
        font-weight:300;
        font-stretch:normal;
        font-size:1.5dvw;
        text-align:left;
        line-height: 2.5dvw;
        text-align: justify;
        word-break: keep-all;
        position: relative;
        left: -6px;
    } 
    .aboutus .text a{
        height: 4.8dvw;
        width: 19dvw;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
        font-size: 1.9dvw;
    }
    .aboutus .text .buttons{
        margin-top: 5px;
        height: 4.8dvw;
        width: 30dvw;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12dvw;
    }
    .aboutus .text .button{
        position:relative;
        height: 4.8dvw;
        width: 19dvw;
        background-color: #e5e5e4;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #282827;
        font-size: 1.9dvw;
        font-family:"tt-autonomous";
        font-display:auto;
        font-style:normal;
        font-weight:500;
        font-stretch:normal;
        transition: all 0.4s ease-in-out;
        padding-top: 4px;
    }
    .aboutus .text #knowmore{
        background-color: #282827;
        color: #e5e5e4;
        width: 18dvw;
    }
    /*projects page*/
    .projects{
        position: relative;
        width: 100%;
       min-height: 70vw;
        max-height: fit-content;
        background: #f5f5f5;
       overflow: hidden;
    
    }
    
    .projects .slide .item{
        width: 15dvw;
        height: 19dvw;
        position: absolute;
        bottom: -8dvw;
        transform: translate(0, -50%);
        border-radius: 10px;
        box-shadow: 0 20px 40px #000000c7;
        background-position: 20% 50%;
        background-size: cover;
        display: inline-block;
        transition: 0.5s;
       
    }
    
    .projects .slide .item:nth-child(1),
    .projects .slide .item:nth-child(2){
        bottom: 0;
        left: 0;
        transform: translate(0, 0);
        border-radius: 0;
        width: 100%;
        height: 100%;
        background-position: 50% 50%;
       
    }
    
    .projects .slide .item:nth-child(3){
        left: 45dvw;
        right: 20dvw;
    }
    .projects .slide .item:nth-child(4){
        left: calc(45dvw + 19%);
        right: 20dvw;
    }
    .projects .slide .item:nth-child(5){
        left: calc(45dvw + 38%);
        right: 20dvw;
    }
    
    
    /* here n = 0, 1, 2, 3,... */
    .projects .slide .item:nth-child(n + 6){
        left: calc(22dvw + 280px);
        opacity: 0;
    }
    
    
    
    .projects .item .content{
        position: absolute;
        top: 34%;
        right: 2dvw;
        width: 57dvw;
        height: 80%;
        text-align: left;
        color: #e5e5e4;
        transform: translate(0, -50%);
        font-family: system-ui;
        display: none;
    }
    
    
    .projects .slide .item:nth-child(2) .content{
        display: block;
    }
    
    
    .projects .content .name{
        position: static;
        margin-top: 7dvw;
        font-size: 4.8dvw;
        font-family:"tt-autonomous-outline";
        text-transform: uppercase;
        font-display:auto;
        font-style:normal;
        font-weight:900;
        font-stretch:normal;
        opacity: 0;
        animation: animate 1s ease-in-out 1 forwards;
        width: 49dvw;
        color: #f5f5f5;
        line-height: 5.3dvw;
       
    }
    
    .projects .content .des{
        position: static;
        margin-top: 1.3dvw;
        opacity: 0;
        animation: animate 1s ease-in-out 0.3s 1 forwards;
        font-family:"tt-autonomous";
        font-display:auto;
        font-style:normal;
        font-weight:400;
        font-stretch:normal;
        font-size:2dvw;
        line-height: 3.2dvw;
        color: #f5f5f5;
        width: 56dvw;
        text-align: justify;
        text-justify: inter-word;
    }
    
    
    
    
    @keyframes animate {
        from{
            opacity: 0;
            transform: translate(0, 100px);
            filter: blur(33px);
        }
    
        to{
            opacity: 1;
            transform: translate(0);
            filter: blur(0);
        }
    }
    
    
    
    .projects .button{
        width: fit-content;
        text-align: center;
        position: absolute;
        bottom: 35px;
        left:17px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
    }
    
    .projects .button button{
        width: 9dvw;
        height: 9vw;
        border-radius: 50%;
        border: none;
        cursor: pointer;
        margin: 0 5px;
        background-color: #e5e5e4;
        transition: 0.3s;
       
    }
    .projects .button button i{
        color: #282828;
        font-size:1.2rem;
        font-weight: 900;
    }
    
    .projects .button button:hover{
        background: #b4b4b4;
        
    }
    /*main service page */
    .mainservices{
        position: relative;
           height:fit-content;
           max-height: fit-content;
           width: 100%;
           background-color: #191919;
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
           overflow: hidden;
    }
    .mainservices nav{
        height: 20%;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;   
    }
    .mainservices nav h2{
        align-self: center;
        justify-self: center;
        font-size: 5dvw;
        font-family:"tt-autonomous";
        font-display:auto;
        font-style:normal;
        font-weight:800;
        font-stretch:normal;
        margin-top: 2dvw;
    
    }
    .mainservices nav .bar{
        height: 2px;
        width: 15dvw;
        background-color: #E8BF29;
        position: relative;
        top: 1dvw;
    }
    .mainservices footer{
        position: relative;
        bottom: 0px;
        height:80%;
        width:100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content:start;
        gap: 1.4dvw;
    }
    .mainservices footer .content:nth-child(n){
           position:relative;
           height: fit-content;
           display: flex;
           align-items: left;
           justify-content:center;
           gap:3dvw;
           left: 2dvw;
           width: 100%;
           margin-bottom: 2dvw;
          
           
    }
    .mainservices footer .content:nth-child(1){
        margin-top: 5dvw;
    }
    .mainservices footer .content .pic{
        position: static;
        height: 9dvw;
        width: 9dvw;
        border-radius: 50%;
        background-color: #e8bf29;
        transition: all 0.2s ease;
        margin-bottom: 0dvw;
        margin-top: 0dvw;
    }
    .mainservices footer .content .pic:hover{
        background-color: #e5e5e4;
    }
    
    .mainservices footer .content #pic1{
        background-image: url(icons/construction_black.png);
        background-size: 60% 60%;
        background-position: center;
        background-repeat: no-repeat;
    }
    .mainservices footer .content #pic2{
        background-image: url(icons/architectural_black.png);
         background-size: 60% 60%;
        background-position: center;
        background-repeat: no-repeat;
    }
    .mainservices footer .content #pic3{
        background-image: url(icons/electric-tower_black.png);
         background-size: 60% 60%;
        background-position: center;
        background-repeat: no-repeat;
    }
    .mainservices footer .content #pic4{
        background-image: url(icons/home-repair_black.png);
         background-size: 70% 70%;
        background-position: center;
        background-repeat: no-repeat;
    }
    .mainservices footer .content #pic5{
        background-image: url(icons/contract_black.png);
         background-size: 65% 65%;
        background-position: center;
        background-repeat: no-repeat;
    }
    .mainservices footer .content #pic6{
        background-image: url(icons/bank_black.png);
         background-size: 60% 60%;
        background-position: center;
        background-repeat: no-repeat;
    }
    .mainservices footer .content aside{
        position: relative;
        height: 20dvw;
        width:70%;
        display:flex;
        flex-direction: column;
        align-items: left;
        justify-content: space-between;
        gap: 0dvw;
       
    }
    .mainservices footer .content aside h1,.mainservices footer .content aside h2{
        position: absolute;
        height: auto;
        font-size:2dvw;
        font-family:"tt-autonomous";
        line-height: 4dvw;
        margin-top: 0px;
        top: 0;
       
    }
    .mainservices footer .content aside p{
        position: absolute;
        height:fit-content;
        width: 70%;
        font-size: 1.7dvw;
        font-family:"tt-autonomous";
        font-display:auto;
        font-style:normal;
        font-weight:200;
        padding-left:0px;
        margin-top:2dvw;
        line-height: 2.4dvw;
        top: 3dvw;
    }
    
    /*review page*/
    .reviews{
        height: 100vw;
        width: 100%;
        background-color: #E8BF29;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 40px;
        position: relative;
        overflow: hidden;
    }
    .reviews .reviewbox:nth-child(n){
        height: 40dvw;
        width: 38dvw;
        background-color: #191919;
        border-radius: 20px;
        box-shadow: -20px 16px 30px rgba(0,0,0,0.77);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: all 0.5s ease;
    }
    .reviews .reviewbox header{
        height: 22%;
        width: 100%;
        display: flex;
        align-items:end;
        justify-content: center;
        font-size: 6dvw;
        font-family:AoboshiOne-Regular;
        padding-top:0dvw;
        position: static;
    }
    .reviews .reviewbox footer{
        height: 78%;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: left;
       
    }
    .reviews .reviewbox footer p:nth-child(1){
        font-size:2dvw;
        font-family:"tt-autonomous";
        font-display:auto;
        font-style:normal;
        font-weight:200;
        font-stretch:normal;
        line-height: 2.7dvw;
        height:fit-content;
        width: 32dvw;
         margin-top: 0px;
         margin-left:4dvw;
    }
    .reviews .reviewbox footer p:nth-child(2){
        font-size:1.7dvw;
        font-family:"tt-autonomous";
        font-display:auto;
        font-style:normal;
        font-weight:200;
        font-stretch:normal;
        line-height: 3.5dvw;
         margin-top: 10px;
         margin-left:4dvw;
    }
    .reviews .reviewbox footer p b{
        font-size:1.7dvw;
    }
    .reviews .reviewbox:hover{
        scale:1;
        
    } 
    
    .reviews .reviewbox:nth-child(n).animate{
          animation: grow 1s ease;
    }
    .reviews.animate{
        animation: gap 1s ease;
    }
    
    @keyframes grow {
        from{
            scale: 0;
        }
        to{scale:1;}
        50%{
            scale:1.1;
           
        }
       
    }
    
    @keyframes gap{
        from{
            background-color: #e5e5e4;
            gap: 10px;
        }
        to{
            gap: 20px;
        }
        55%{gap: 15px;}
    }
    
    .reviews .reviewbox:nth-child(1){
        position: absolute;
        top: 5dvw;
        left: 7%;
        z-index: 1;
    }
    .reviews .reviewbox:nth-child(2){
        position: absolute;
        left: 7%;
        top: 53dvw;
        z-index: 1;
    }
    .reviews .reviewbox:nth-child(3){
        position: absolute;
        right: 4%;
        z-index: 1;
    }





    /*contactus page*/
    .contactus{
        height: 100vw;
        width: 100%;
        background-color: #191919;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
    }
    .contactus header{
        height: 96%;
        width: 100%;
        border-bottom: 3px solid #e8bf29;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .contactus header .alldetails{
        position: relative;
        height:95%;
        width: 95%;
        display: flex;
        flex-direction: column;
        align-items: left;
        justify-content: left;
        background-color: #e5e5e4;
    }
    .contactus header .alldetails .mapping{
        height: 50%;
        display: flex;
        flex-direction: column;
        align-items:left;
        
    }
    .contactus header .alldetails .mapping h2{
        font-size: 6.5dvw;
        font-family:"tt-autonomous";
        font-display:auto;
        font-style:normal;
        font-weight:700;
        font-stretch:normal;
        color: #282827;
        margin-left: 4dvw;
        margin-top: 1dvw;
        height:auto;
        width: 60dvw;
       
    }
    .contactus header .mapping .map{
        position: absolute;
        height:33dvw;
        width: 80dvw;
        border: 1px solid black;
        margin-left: 4.1dvw;
        margin-top: 1dvw;
        top: 9dvw;
    }
    .contactus header .details{
        position: relative;
       height: 50%;
       display: flex;
       flex-direction: column;
       align-items: left;
      
    }
    
    .contactus header .details .logo{
        height: 9dvw;
        width: 45dvw;
        background-image: url(pictures/blacklogo.png);
        background-position: center;
        background-size: cover;
        position: absolute;
        top: -7.8dvw;
        left: 4.1dvw;
       
        
    }
    .contactus header .details section{
        height: fit-content;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: top;
        justify-content: left;
        position: absolute;
        bottom: 0;
    }
    .contactus header .details section p{
        color: #282827;
        font-family:"tt-autonomous";
        font-display:auto;
        font-style:normal;
        font-weight:300;
        font-stretch:normal;
        font-size: 2dvw;
        line-height: 2.4dvw;
        width: 100dvw;
        margin-left: 4.1dvw;
    }
    .contactus header .details section p:nth-child(1){
        margin-top: 0dvw;
    }
    .contactus header .details section p:nth-child(3){
        margin-top: 2dvw;
       width:90dvw;
    }
    .contactus header .details section p:nth-child(4){
        margin-top: 1dvw;
        width:90dvw;
    }
    .contactus header .details section p:nth-child(6){
        margin-top: 2dvw;
        font-size: 2dvw;
    }
    .contactus footer{
        height: 2%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family:"tt-autonomous";
        font-display:auto;
        font-style:normal;
        font-weight:400;
        font-stretch:normal;
        font-size: 1.8dvw;
    }
}






























@media only screen and (min-device-width:768px ) and (orientation:portrait)
 /* This is for Android Tablet Portrait*/
{
    html{
        overflow-x: hidden;
     }

    * {
        padding: 0;
        margin: 0;
        color: #e5e5e4;
        box-sizing: border-box;
    }
    body {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content:center;
        min-height: fit-content;
        max-height: 700vh;
        scroll-snap-type: y mandatory;
        width: 100%;
        overflow-x: hidden;
        background-repeat:  no-repeat;
    }
    /* LANDING PAGE */
    .container {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 70vh;
        width: 100%;
        background-image: url(pictures/background.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        overflow: hidden;
        position: relative;
    }
    
    .saturation {
        height:70vh;
        width: 47dvw;
        position:absolute;
        right: 0;
        overflow: hidden;
    }
    
    .saturation img {
        height: 100%;
        width: 47dvw;
        object-position: center;
        transition: all 0.5 ease-in-out;
        position: absolute;
        right: 0;
        overflow: hidden;
    }
    
    .landingpage {
        position: relative;
        height: 70vh;
        width: 100%;
        display: grid;
        grid-template-rows: 10.6% 89.4%;
        z-index: 12;
    }
    
    .landingpage .nav {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        
    }
    
    .landingpage .nav ul {
        height: 18px;
        width: 50dvw;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5dvw;
        margin-top: -7px;
        font-family: "tt-autonomous";
        font-weight: 500;
        font-style: normal;
        font-size: 2dvw;
      margin-right: 3dvw;
        
    }
    .landingpage  ul a {
     text-decoration: none;
    }
    /* Navbar List Items */
    .landingpage .nav ul li {
        position: relative;
        list-style: none;
        cursor: pointer;
        padding: 13px 0; /* Add some padding for better click area */
        color: #e5e5e4;
    }
    
    .landingpage .nav ul li::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 0px;
        background-color: #e8bd3f;
        transition: all 0.3s ease-in-out;
    }
    
    .landingpage .nav ul li:hover::after {
        width: 100%;
    }
    
    .landingpage .nav .logo {
        height: 4.67dvw;
        width: 30.67dvw;
        margin-top: -3px;
        background-image: url(pictures/Logo.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        margin-left: 1.3dvw;
       
    }
    
    .landingpage .main {
        display: grid;
        grid-template-columns: 50% 50%;
        position: relative;
    }
    
    .landingpage .main .text .txtbox {
        position: relative;
        top: 15dvw;
        left: 4dvw;
        width: 60dvw;
        height: 57dvw;
        display: flex;
        flex-direction: column;
        gap: 0;
        
    }
    
    .landingpage .main .text .txtbox #ready {
        width: 48dvw;
        font-family: "tt-autonomous";
        font-weight: 700;
        font-style: normal;
        font-size: 6.0dvw;
        color: #e5e5e4;
       
        /* for fonts */
    }
    
    .landingpage .main .text .txtbox h3 {
        width: 65dvw;
        font-family: "tt-autonomous-outline";
        font-weight: 900;
        font-style: normal;
        font-size: 5dvw;
        line-height: 6.2dvw;
        
        
        /* for fonts */
    }
    .landingpage .main .text .txtbox h3 b{
        font-family: "tt-autonomous-outline";
        font-weight: 900;
        font-style: normal;
        font-size: 5dvw;
    }
    .landingpage .main .text .txtbox #reality {
        width:50dvw;
        height: fit-content;
        font-family: "tt-autonomous";
        font-weight: 700;
        font-style: normal;
        font-size: 6.7dvw;
        color: #e8bf29;

        
        
        /* for fonts */
    }
    
    .landingpage .main .text .txtbox  .buttons {
        height:24dvw;
        width: 23dvw;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 5dvw;
        margin-bottom: 80px;
        margin-left: 8px;
        
    }
    
    .landingpage .main .text .txtbox .buttons a .contactus {
        vertical-align: middle;
        height:8dvw;
        width: 23dvw;
        text-decoration: none;
        color: #282827;
        font-size: 2.4dvw;
        display: inline-flex;
        align-items: center;
        justify-content: center;
       
    }
    .landingpage .main .text .txtbox .buttons a .knowmore {
        text-decoration: none;
        padding-top: 4.27px;
        vertical-align: middle;
        height:8dvw;
        width: 23dvw;
        text-decoration: none;
        color: #e5e5e5;
        font-size: 2.4dvw;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        
    }
    .landingpage .main .text .txtbox .buttons a {
        height:8dvw;
        width: 23dvw;
        display:flex;
        align-items: center;
        justify-content: center;
        font-family: "tt-autonomous", sans-serif;
        font-weight: 700;
        font-style: normal;
        vertical-align: middle;
        color: #e5e5e4;
        padding-top: 4.27px;
        padding-bottom: 5px;
        font-size: 2.7dvw;
        position: relative;
        z-index: 100;
        
    }
    .landingpage .main .text .txtbox .buttons a .contactus :hover, .landingpage .main .text .txtbox .buttons a .knowmore:hover{
        background-color: #e8bf29;
    }

    .landingpage .main .picture {
        height:100%;
        width: 100%;
        position: absolute;
    }
    
    .landingpage .main .picture .jcb {
        position: absolute;
        height: 58.4dvw;
        width: 57.3dvw;
        bottom: 0px;
        right: -1px;
        min-height:150px;
        min-width: 122.48px;
        
    }
    
    .landingpage .main .picture .jcb img {
        position:absolute;
        right: -0px;
        height: 54.2dvw;
        width: 57.3dvw;
        object-position: 90% 50%;
        object-fit:contain;
        transition: all 0.5 ease;
        z-index: -10;
        bottom: 0px;
        max-width: 80%;
        max-height: 85%;
        min-height:150px;
        min-width: 122.48px;
    }
    /*WHY US PAGE */
    .whyuscontainer{
        display: flex;
        flex-direction: column;
        height: 80vh;
        width: 100%;
        background-color: #e8bf29;
        overflow: hidden;
        position: relative;
        transition: all 0.4s ease ;
    }
    
    .whyuscontainer img{
        position: absolute;
        height: 100%;
        width: 100%;
        object-position: 0% 50%;
        object-fit: cover;
        bottom: 0;
          
    }
    .whyuscontainer .whyustxt{
        position: absolute;
        top: 10px;
        height:60dvw;
        width:70%;
        display: flex;
        flex-direction: column;
        align-items: left;
        justify-content: left;
        transition: all 0.5s ease;
        left: 10px;
       
    }
    .whyuscontainer .whyustxt h2{
        font-size: 9dvw;
        width: 100%;
        color:#282827;
        font-display:auto;
        font-style:normal;
        font-weight:800;
        font-stretch:normal;
        font-family: "tt-autonomous";
        position: relative;
        left: -2dvw;
    }
    .whyuscontainer .whyustxt p{
        height: fit-content;
        width: 70dvw;
        font-size:1.89dvw;
        color:#282827;
        font-display:auto;
        font-style:normal;
        font-weight:400;
        font-stretch:normal;
        font-family: "tt-autonomous";
        word-break: break-all;
       line-height: 2.9dvw;
        text-align: left;
        position: relative;
        left: -1dvw;
        top: -1dvw;
        word-break: keep-all;
    }
   
    /*about us*/
    .aboutus{
        position: relative;
        height: 60vh;
        width: 100%;
        background-color: #191919;
        background-image: url(pictures/newpattern.png);
        background-position: 30% 70%;
        background-size: 100%;
        display: grid;
        grid-template-columns: 45% 55%;
        overflow: hidden;  
    }
    .aboutus .image{
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        justify-content: space-between;
        overflow:visible;
    }
    
    .aboutus .image .rect1{
        display: visible;
        height: 4.2dvw;
        width: 100%;
        background-image: url(pictures/Rectangle\ 28.png);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .aboutus .image .rect2{
        display: visible;
        height: 4.2dvw;
        width: 100%;
        background-image: url(pictures/Rectangle\ 28-1.png);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .aboutus .image .logo{
        height: 25dvw;
        width: 25dvw;
        background-image: url(icons/kalorengineer.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        margin-top: -5dvw;
        
    }
        
        
        
    .aboutus .image p{
        font-family:"tt-autonomous";
        font-display:auto;
        font-style:normal;
        font-weight:400;
        font-stretch:normal;
        font-size:4.2dvw;
        margin-top: -8.5dvw;

        
        
        
    }
    .aboutus .image p b{
        font-weight: 400;
    }
    .aboutus .text{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        font-weight:200;
       
    }
    .aboutus .text p{
        width: 95%;
        height: fit-content;
        font-family:"tt-autonomous";
        word-break: break-all;
        font-display:auto;
        font-style:normal;
        font-weight:300;
        font-stretch:normal;
        font-size:1.56dvw;
        text-align:left;
        line-height: 2.5dvw;
        text-align: justify;
        word-break: keep-all;
        position: relative;
        left: -6px;
    } 
    .aboutus .text a{
        height: 4.8dvw;
        width: 19dvw;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
        font-size: 1.3dvw;
    }
    .aboutus .text .buttons{
        margin-top: 5px;
        height: 4.8dvw;
        width: 30dvw;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12dvw;
    }
    .aboutus .text .button{
        position:relative;
        height: 4.8dvw;
        width: 19dvw;
        background-color: #e5e5e4;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #282827;
        font-size: 1.9dvw;
        font-family:"tt-autonomous";
        font-display:auto;
        font-style:normal;
        font-weight:500;
        font-stretch:normal;
        transition: all 0.4s ease-in-out;
        padding-top: 4px;
    }
    .aboutus .text #knowmore{
        background-color: #282827;
        color: #e5e5e4;
        width: 18dvw;
    }
    /*projects page*/
    .projects{
        position: relative;
        width: 100%;
        height:62vh;
        background: #f5f5f5;
        overflow: hidden;
    
    }
    
    .projects .slide .item{
        width: 14dvw;
        height: 20dvw;
        position: absolute;
        bottom: -8dvw;
        transform: translate(0, -50%);
        border-radius: 10px;
        box-shadow: 0 20px 40px #000000c7;
        background-position: 20% 50%;
        background-size: cover;
        display: inline-block;
        transition: 0.5s;
       
    }
    
    .projects .slide .item:nth-child(1),
    .projects .slide .item:nth-child(2){
        bottom: 0;
        left: 0;
        transform: translate(0, 0);
        border-radius: 0;
        width: 100%;
        height: 100%;
        background-position: 50% 50%;
       
    }
    
    .projects .slide .item:nth-child(3){
        left: 45dvw;
        right: 20dvw;
    }
    .projects .slide .item:nth-child(4){
        left: calc(45dvw + 19%);
        right: 20dvw;
    }
    .projects .slide .item:nth-child(5){
        left: calc(45dvw + 38%);
        right: 20dvw;
    }
    
    
    /* here n = 0, 1, 2, 3,... */
    .projects .slide .item:nth-child(n + 6){
        left: calc(22dvw + 280px);
        opacity: 0;
    }
    
    
    
    .projects .item .content{
        position: absolute;
        top: 24%;
        left: 26%;
        width: 300px;
        text-align: left;
        color: #e5e5e4;
        transform: translate(0, -50%);
        font-family: system-ui;
        display: none;
       
        
    }
    
    
    .projects .slide .item:nth-child(2) .content{
        display: block;
    }
    
    
    .projects .content .name{
        position: relative;
         left: 21dvw; 
         top: 5dvw;
        font-size: 6dvw;
        font-family:"tt-autonomous-outline";
        text-transform: uppercase;
        font-display:auto;
        font-style:normal;
        font-weight:900;
        font-stretch:normal;
        opacity: 0;
        animation: animate 1s ease-in-out 1 forwards;
        width: 55dvw;
        color: #f5f5f5;
       
    }
    
    .projects .content .des{
        position: relative;
        left: 21.2dvw;
        top: 5dvw;
        margin-top: 2dvw;
        opacity: 0;
        animation: animate 1s ease-in-out 0.3s 1 forwards;
        font-family:"tt-autonomous";
        font-display:auto;
        font-style:normal;
        font-weight:200;
        font-stretch:normal;
        font-size:2.2dvw;
        line-height: 3.3dvw;
        color: #f5f5f5;
        width: 57dvw;
    }
    
    
    
    
    @keyframes animate {
        from{
            opacity: 0;
            transform: translate(0, 100px);
            filter: blur(33px);
        }
    
        to{
            opacity: 1;
            transform: translate(0);
            filter: blur(0);
        }
    }
    
    
    
    .projects .button{
        width: fit-content;
        text-align: center;
        position: absolute;
        bottom: 35px;
        left:17px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
    }
    
    .projects .button button{
        width: 9dvw;
        height: 9vw;
        border-radius: 50%;
        border: none;
        cursor: pointer;
        margin: 0 5px;
        background-color: #e5e5e4;
        transition: 0.3s;
       
    }
    .projects .button button i{
        color: #282828;
        font-size:1.2rem;
        font-weight: 900;
    }
    
    .projects .button button:hover{
        background: #b4b4b4;
        
    }
    /*main service page */
    .mainservices{
           height:fit-content;
           width:100%;
           background-color: #191919;
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
           overflow: hidden;
           
    }
    .mainservices nav{
        height: 12%;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        
    }
    .mainservices nav h2{
        align-self: center;
        justify-self: center;
        font-size: 7dvw;
        font-family:"tt-autonomous";
        font-display:auto;
        font-style:normal;
        font-weight:800;
        font-stretch:normal;
        margin-top: 4dvw;
    
    }
    .mainservices nav .bar{
        height: 2px;
        width: 20dvw;
        background-color: #E8BF29;
        position: relative;
        top: 9px;
    }
    .mainservices footer{
        position: relative;
        bottom: 5px;
        height:88%;
        width:100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content:center;
        gap: 3dvw;
    }
    .mainservices footer .content:nth-child(n){
        position: relative;
           height: 20dvw;
           display: flex;
           align-items: top;
           justify-content:center;
           gap:2dvw;
           left: 2dvw;
           top: -3dvw;
           width: 100%;
         
           
    }
    .mainservices footer .content:nth-child(1){
        margin-top: 6dvw;
    }
    .mainservices footer .content .pic{
        position: relative;
        top:0dvw;
        height: 9dvw;
        width: 9dvw;
        border-radius: 50%;
        background-color: #e8bf29;
        transition: all 0.2s ease;
        
    }
    .mainservices footer .content .pic:hover{
        background-color: #e5e5e4;
    }
    
    .mainservices footer .content #pic1{
        background-image: url(icons/construction_black.png);
        background-size: 60% 60%;
        background-position: center;
        background-repeat: no-repeat;
    }
    .mainservices footer .content #pic2{
        background-image: url(icons/architectural_black.png);
         background-size: 60% 60%;
        background-position: center;
        background-repeat: no-repeat;
    }
    .mainservices footer .content #pic3{
        background-image: url(icons/electric-tower_black.png);
         background-size: 60% 60%;
        background-position: center;
        background-repeat: no-repeat;
    }
    .mainservices footer .content #pic4{
        background-image: url(icons/home-repair_black.png);
         background-size: 70% 70%;
        background-position: center;
        background-repeat: no-repeat;
    }
    .mainservices footer .content #pic5{
        background-image: url(icons/contract_black.png);
         background-size: 65% 65%;
        background-position: center;
        background-repeat: no-repeat;
    }
    .mainservices footer .content #pic6{
        background-image: url(icons/bank_black.png);
         background-size: 60% 60%;
        background-position: center;
        background-repeat: no-repeat;
    }
    .mainservices footer .content aside{
        height: 100%;
        width:80%;
        display:flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .mainservices footer .content aside h1,.mainservices footer .content aside h2{
        height: auto;
        font-size:3.5dvw;
        font-family:"tt-autonomous";
        line-height: 4.5dvw;
        margin-top: 1dvw;
        
    }
    .mainservices footer .content aside p{
        height:fit-content;
        width: 90%;
        font-size: 2.4dvw;
        font-family:"tt-autonomous";
        font-display:auto;
        font-style:normal;
        font-weight:200;
        padding-left:0.8dvw;
        margin-top: 0.5dvw;
        line-height: 3dvw;
        
    }
    
    /*review page*/
    .reviews{
        height: 120vw;
        width: 100%;
        background-color: #E8BF29;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0dvw;
        position: relative;
        overflow:hidden;
    }
    .reviews .reviewbox:nth-child(n){
        height: 45dvw;
        width: 40dvw;
        background-color: #191919;
        border-radius: 20px;
        box-shadow: -20px 16px 30px rgba(0,0,0,0.77);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: all 0.5s ease;
    }
    .reviews .reviewbox header{
        height: 12%;
        width: 100%;
        display: flex;
        align-items:end;
        justify-content: center;
        font-size: 7.2dvw;
        font-family:AoboshiOne-Regular;
        padding-top:10dvw;
        
       
    }
    .reviews .reviewbox footer{
        height: 88%;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: left;
        
    }
    .reviews .reviewbox footer p:nth-child(1){
        font-size:2.0dvw;
        font-family:"tt-autonomous";
        font-display:auto;
        font-style:normal;
        font-weight:200;
        font-stretch:normal;
        line-height: 2.8dvw;
        height:fit-content;
        width: 34dvw;
        margin-top: 0dvw;
        margin-left:3dvw;
        
    }
    .reviews .reviewbox footer p:nth-child(2){
        font-size:2.0dvw;
        font-family:"tt-autonomous";
        font-display:auto;
        font-style:normal;
        font-weight:200;
        font-stretch:normal;
        line-height: 3dvw;
         margin-top: 10px;
         margin-left:4dvw;
         
    }
    .reviews .reviewbox footer p b{
        font-size:2.0dvw;
    }
    .reviews .reviewbox:hover{
        scale:1;
        
    } 
    
    .reviews .reviewbox:nth-child(n).animate{
          animation: grow 1s ease;
    }
    .reviews.animate{
        animation: gap 1s ease;
    }
    
    @keyframes grow {
        from{
            scale: 0;
        }
        to{scale:1;}
        50%{
            scale:1.1;
           
        }
       
    }
    
    @keyframes gap{
        from{
            background-color: #e5e5e4;
            gap: 1dvw;
        }
        to{
            gap: 1.6dvw;
        }
        55%{gap: 1.2dvw;}
    }
    
    .reviews .reviewbox:nth-child(1){
        position: absolute;
        top: 10dvw;
        left: 7%;
        z-index: 1;
    }
    .reviews .reviewbox:nth-child(2){
        position: absolute;
        left: 7%;
        top: 65dvw;
        bottom: 3dvw;
        z-index: 1;
    }
    .reviews .reviewbox:nth-child(3){
        position: absolute;
        right: 6%;
        z-index: 1;
    }


    /*contactus page*/
    .contactus{
        height: 105vh;
        width:100%;
        background-color: #191919;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow:hidden;
    }
    .contactus header{
        height: 98%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        
    }
    .contactus header .alldetails{
        height:95%;
        width: 95%;
        display: flex;
        flex-direction: column;
        align-items: left;
        justify-content: left;
        background-color: #e5e5e4;
    }
    .contactus header .alldetails .mapping{
        height: 45%;
        display: flex;
        flex-direction: column;
        align-items:center;
        


        
    }
    .contactus header .alldetails .mapping h2{
        font-size: 7.5dvw;
        font-family:"tt-autonomous";
        font-display:auto;
        font-style:normal;
        font-weight:700;
        font-stretch:normal;
        color: #282827;
        margin-left: 0dvw;
        margin-top: 1.6dvw;
        height: auto;
        width: 100dvw;
        text-align: center;
       
    }
    .contactus header .mapping .map{
        position: absolute;
        height:40dvw;
        width: 90%;
        border: 1px solid black;
        margin-left: 0dvw;
        margin-top:3px ;
        top: 13dvw;
    }
    .contactus header .details{
        position: relative;
       height: 55%;
       display: flex;
       flex-direction: column;
       align-items: center;
    }
    
    .contactus header .details .logo{
        height: 13.23dvw;
        width: 67.57dvw;
        background-image: url(pictures/blacklogo.png);
        background-position: center;
        background-size: cover;
        position: absolute;
        align-self: center;
        top: -60px;
        left: 14vw;
        
    }
    .contactus header .details section{
        height: fit-content;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: top;
        justify-content: left;
    }
    .contactus header .details section p{
        color: #282827;
        font-family:"tt-autonomous";
        font-display:auto;
        font-style:normal;
        font-weight:300;
        font-stretch:normal;
        font-size: 2.5dvw;
        line-height: 3.4dvw;
        width: 100dvw;
        margin-left: 25px;
    }
    .contactus header .details section p:nth-child(1){
        margin-top: 20dvw;
    }
    .contactus header .details section p:nth-child(3){
        margin-top: 1dvw;
       width:90dvw;
       height: auto;
    }
    .contactus header .details section p:nth-child(4){
        margin-top: 1.2dvw;
        width:90dvw;
        height: auto;
    }
    .contactus header .details section p:nth-child(6){
        margin-top: 3dvw;
        font-size: 2.5dvw;
    }
    .contactus footer{
        height: 2%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family:"tt-autonomous";
        font-display:auto;
        font-style:normal;
        font-weight:400;
        font-stretch:normal;
        font-size: 1dvw;
    }
}










@media only screen 
and (min-device-width: 834px) 
and (max-device-width: 1194px)
and (-webkit-min-device-pixel-ratio: 2) {
  /* Styles for 11-inch iPad Pro (Landscape)*/

  html{
    overflow-x: hidden;
 }
 
* {
    padding: 0;
    margin: 0;
    color: #e5e5e4;
    box-sizing: border-box;
    
}
body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: fit-content;
    max-height: 700vh;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    width: 100%;
    overflow-x: hidden;
}

/* LANDING PAGE */
.container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100%;
    background-image: url(pictures/background.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

.saturation {
    height: 100vh;
    width: 50dvw;
    position: absolute;
    right: 0;
   overflow: hidden;
}

.saturation img {
    height: 100vh;
    width: 100%;
    object-position: center;
    transition: all 0.5 ease-in-out;
    overflow: hidden;
}

.landingpage {
    position: relative;
    height: 100vh;
    width: 100%;
    display: grid;
    grid-template-rows: 10.6% 89.4%;
    z-index: 12;
}

.landingpage .nav {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    
}

.landingpage .nav ul {
    height: 49px;
    width: 50dvw;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6.5dvw;
    margin-top: 2dvw;
    font-family: "tt-autonomous", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 1.6dvw;
    margin-right: 4dvw;
    
}
.landingpage  ul a {
 text-decoration: none;
}
/* Navbar List Items */
.landingpage .nav ul li {
    position: relative;
    list-style: none;
    cursor: pointer;
    padding: 17px 0; /* Add some padding for better click area */
    color: #e5e5e4;
}

.landingpage .nav ul li::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background-color: #e8bd3f;
    transition: all 0.3s ease-in-out;
}

.landingpage .nav ul li:hover::after {
    width: 100%;
}

.landingpage .nav .logo {
    height: 2.7dvw;
    width: 17dvw;
    margin-top: 2dvw;
    background-image: url(pictures/Logo.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    margin-left: 4dvw;
}

.landingpage .main {
    display: grid;
    grid-template-columns: 50% 50%;
}

.landingpage .main .text .txtbox {
    position: absolute;
    top: 13.594dvw;
    left: 4.78dvw;
    width: 53dvw;
    height:fit-content;
    display: flex;
    flex-direction: column;
    gap:0dvw;
   
}

.landingpage .main .text .txtbox #ready {
    width: fit-content;
    height: fit-content;
    font-family: "tt-autonomous", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 4.036dvw;
    color: #e5e5e4;
    margin-left: 4.283dvw;
  
    /* for fonts */
}

.landingpage .main .text .txtbox h3 {
    width: 35dvw;
    height: fit-content;
    font-family: "tt-autonomous-outline", sans-serif;
    font-weight: 900;
    font-style: normal;
    font-size: 2.79dvw;
    line-height: 3.5dvw;
    margin-left: 4.699dvw;
    margin-top: -0.3dvw;
    /* for fonts */
}
.landingpage .main .text .txtbox h3 b{
    font-size: 2.79dvw;
}

.landingpage .main .text .txtbox #reality {
    width: 53dvw;
    height: fit-content;
    font-family: "tt-autonomous", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 6.25dvw;
    color: #e8bf29;
    margin-left: 4.074dvw;
    margin-top: 1dvw;
    /* for fonts */
}

.landingpage .main .text .txtbox  .buttons {
    height: fit-content;
    width: fit-content;
    display: inline-flex;
    align-items: center;
    justify-content: left;
    gap: 4.85dvw;
    margin-left: 5.5dvw;
    margin-top: 2.5dvw;

   
}
.landingpage .main .text .txtbox .buttons a{
    height: 2.828dvw;
}
.landingpage .main .text .txtbox .buttons a .contactus{
    height: 2.828dvw;
    width: 18dvw;
    background-color: #e5e5e4;
    color:  #282827;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "tt-autonomous", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 1.8dvw;
    transition: width 0.4s ease;
    vertical-align: middle;
    padding-top: 4.27px;
   
    /* for fonts */
}

.landingpage .main .text .txtbox .buttons a {text-decoration: none;}
.landingpage .main .text .txtbox .buttons a .knowmore{
    height: 2.828dvw;
    width: 18dvw;
    background-color: #282827;
    display:inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "tt-autonomous", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 1.8dvw;
    vertical-align: middle;
    color: #e5e5e4;
    padding-top: 4.27px;
   
   
    /* for fonts */
}
.landingpage .main .text .txtbox .buttons a .knowmore:hover ,.landingpage .main .text .txtbox .buttons .contactus:hover{
    transition: all 0.4s ease-in-out;
    background-color:  #e8bf29;
    color: #e5e5e4;
    cursor:pointer;
    caret-color: #282827;
}
.landingpage .main .picture {
    height: 89.4vh;
    position: relative;
}

.landingpage .main .picture .jcb {
    position: absolute;
    bottom: 0;
    right: 0;
    height:42.26dvw;
    width: 34.4dvw;
}

.landingpage .main .picture .jcb img {
    position: absolute;
    bottom: -3px;
    right: 0;
    height:100%;
    width: 100%;
    object-position: center;
    object-fit: contain;
    transition: all 0.5 ease;
    z-index: -10;
}
/*WHY US PAGE */
.whyuscontainer{
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    background-color: #e8bf29;
    overflow: hidden;
    position: relative;
    transition: all 0.4s ease ;
}

.whyuscontainer img{
    position: absolute;
    height: 100vh;
    width: 100%;
    object-position:  100% 10%;
    bottom: 0;
    
}
.whyuscontainer .whyustxt{
    position: absolute;
    top: 0;
    height:37dvw;
    width: 64.4dvw;
    display: flex;
    flex-direction: column;
    align-items: left;
    transition: all 0.5s ease;

    
}
.whyuscontainer .whyustxt h2{
    font-size: 8dvw;
    color:#282827;
    font-display:auto;
    font-style:normal;
    font-weight:600;
    font-stretch:normal;
    font-family: "tt-autonomous";
    margin-left:1dvw;
    margin-top: 1.3dvw;
   width: 61.3dvw;
}
.whyuscontainer .whyustxt h2 b{
    font-size: 8dvw;
    font-weight: 600;
}
.whyuscontainer .whyustxt p{
    height: fit-content;
    width: 46dvw;
    font-size:1.1dvw;
    color:#282827;
    font-display:auto;
    font-style:normal;
    font-weight:200;
    font-stretch:normal;
    font-family: "tt-autonomous";
    margin-left:1.5dvw;
    word-wrap: break-word;
    line-height: 1.69dvw;
    margin-top: 0dvw;
    
}
/*whyus background animation*/
.whyuscontainer img.animate{
    animation: background 1.4s ease ;
}
@keyframes background {
    from{
       bottom: -800px;
    }
    to{
        bottom: 0;
    }
    
}
/*about us*/
.aboutus{
    position: relative;
    height: 100vh;
    width: 100%;
    background-color: #191919;
    background-image: url(pictures/newpattern.png);
    background-position: 40% 50%;
    background-size: 133%;
    display: grid;
    grid-template-columns: 50% 50%;
    overflow: hidden;
   
}
.aboutus .image{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    justify-content: space-between;
   height: 100%;
}

.aboutus .image .rect1{
    height: 4.79dvw;
    width: 100%;
    background-image: url(pictures/Rectangle\ 28.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.aboutus .image .rect2{
    height: 4.79dvw;
    width: 100%;
    background-image: url(pictures/Rectangle\ 28-1.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.aboutus .image .logo{
    height: 20dvw;
    width: 20dvw;
    background-image: url(icons/kalorengineer.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}
.aboutus .image p{
    font-family:"tt-autonomous";
    font-display:auto;
    font-style:normal;
    font-weight:600;
    font-stretch:normal;
    font-size: 3.4dvw;
    position: relative;
}
.aboutus .text{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
}
.aboutus .text p{
    width: 43dvw;
    height: fit-content;
    word-break: keep-all;
    font-family:"tt-autonomous";
    font-display:auto;
    font-style:normal;
    font-weight:100;
    font-stretch:normal;
    line-height: 1.9dvw;
    font-size: 1.2dvw;
    text-align:justify;
    text-justify:inter-word;
} 
.aboutus .text a{
    height: 3.78dvw;
    width: 19dvw;
    text-decoration: none;
    border-radius: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    
}
.aboutus .text .buttons{
    height: 3.78dvw;
    width: 43dvw;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4.5dvw;
}
.aboutus .text .button{
    position:relative;
    height: 3.78dvw;
    width: 19dvw;
    background-color: #e5e5e4;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #282827;
    font-size: 1.5dvw;
    font-family:"tt-autonomous";
    font-display:auto;
    font-style:normal;
    font-weight:900;
    font-stretch:normal;
    transition: all 0.4s ease-in-out;
}
.aboutus .text a #knowmore{
    background-color: #282827;
    color: #e5e5e4;
}
.aboutus .text a #testimony:hover,.aboutus .text a #knowmore:hover{
    background-color:  #e8bf29;
    color: #e5e5e4;
}
/*projects page*/
.projects{
    position: relative;
    width: 100%;
    height: 100vh;
    background: #f5f5f5;
   overflow: hidden;

}

.projects .slide .item{
    width:13dvw;
    height: 15dvw;
    position: absolute;
    bottom: -5.67dvw;
    transform: translate(0, -50%);
    border-radius: 1.2dvw;
    box-shadow: 0 20px 40px #000000c7;
    background-position: 20% 50%;
    background-size: cover;
    display: inline-block;
    transition: 0.5s;
   
}

.projects .slide .item:nth-child(1),
.projects .slide .item:nth-child(2){
    bottom: 0;
    left: 0;
    transform: translate(0, 0);
    border-radius: 0;
    width: 100%;
    height: 100%;
    background-position: 50% 50%;
   
}

.projects .slide .item:nth-child(3){
    left: 50dvw;
    right: 10dvw;
}
.projects .slide .item:nth-child(4){
    left: calc(50dvw + 16%);
    right: 10dvw;
}
.projects .slide .item:nth-child(5){
    left: calc(50dvw + 32%);
    right: 10dvw;
}




/* here n = 0, 1, 2, 3,... */
.projects .slide .item:nth-child(n + 6){
    left: calc(50dvw + 64%);
    opacity: 0;
}



.projects .item .content{
    position: absolute;
    top: 20dvw;
    right: 4dvw;
    width: 43dvw;
    text-align: left;
    color: #e5e5e4;
    transform: translate(0, -50%);
    font-family: system-ui;
    display: none;
    height: 40dvw;
    
}


.projects .slide .item:nth-child(2) .content{
    display: block;
}


.projects .content .name{
    position: static;
    margin-top:2.7dvw;
    font-size:3.7dvw;
    line-height: 4.3dvw;
    font-family:"tt-autonomous-outline";
    text-transform: uppercase;
    font-display:auto;
    font-style:normal;
    font-weight:900;
    font-stretch:normal;
    opacity: 0;
    animation: animate 1s ease-in-out 1 forwards;
    width: fit-content;
    
}

.projects .content .des{
    position: static;
    margin-top:2dvw;
    opacity: 0;
    animation: animate 1s ease-in-out 0.3s 1 forwards;
    font-family:"tt-autonomous";
    font-display:auto;
    font-style:normal;
    font-weight:300;
    font-stretch:normal;
    font-size:1.5dvw;
    line-height: 2dvw;
    width: 40dvw;
    height: fit-content;
    
}




@keyframes animate {
    from{
        opacity: 0;
        transform: translate(0, 100px);
        filter: blur(33px);
    }

    to{
        opacity: 1;
        transform: translate(0);
        filter: blur(0);
    }
}



.projects .button{
    width: fit-content;
    text-align: center;
    position: absolute;
    bottom: 7dvw;
    left:10dvw;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4dvw;
}

.projects .button button{
    width:4.5dvw;
    height: 4.5dvw;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    margin: 0 5px;
    background-color: #e5e5e4;
    transition: 0.3s;
   
}
.projects .button button i{
    color: #282828;
    font-size: 1.5dvw;
    font-weight: 900;
}

.projects .button button:hover{
    background: #b4b4b4;
    
}
/*main service page */
.mainservices{
       height: 100vh;
       width:100%;
       background-color: #191919;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       overflow: hidden;
}
.mainservices nav{
    height: 12%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.mainservices nav h2{
    align-self: center;
    justify-self: center;
    font-size: 4.5dvw;
    font-family:"tt-autonomous";
    font-display:auto;
    font-style:normal;
    font-weight:800;
    font-stretch:normal;
    height: fit-content;
}
.mainservices nav .bar{
    height: 0.41dvw;
    width: 13dvw;
    background-color: #E8BF29;
    position: relative;
    top: 4%;
}
.mainservices footer{
    height:88%;
    width:100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
}
.mainservices footer .content:nth-child(n){
       width:31dvw;
       height: 15dvw;
       display: flex;
       align-items: top;
       justify-content:left;
       gap:1.6dvw;       
}
.mainservices footer .content .pic{
    height:5.6dvw;
    width:5.6dvw;
    border-radius: 50%;
    background-color: #e8bf29;
    margin-top: 0.8dvw;
    transition: all 0.2s ease;
}
.mainservices footer .content .pic:hover{
    background-color: #e5e5e4;
}

.mainservices footer .content #pic1{
    background-image: url(icons/construction_black.png);
    background-size: 60% 60%;
    background-position: center;
    background-repeat: no-repeat;
}
.mainservices footer .content #pic2{
    background-image: url(icons/architectural_black.png);
     background-size: 60% 60%;
    background-position: center;
    background-repeat: no-repeat;
}
.mainservices footer .content #pic3{
    background-image: url(icons/electric-tower_black.png);
     background-size: 60% 60%;
    background-position: center;
    background-repeat: no-repeat;
}
.mainservices footer .content #pic4{
    background-image: url(icons/home-repair_black.png);
     background-size: 70% 70%;
    background-position: center;
    background-repeat: no-repeat;
}
.mainservices footer .content #pic5{
    background-image: url(icons/contract_black.png);
     background-size: 65% 65%;
    background-position: center;
    background-repeat: no-repeat;
}
.mainservices footer .content #pic6{
    background-image: url(icons/bank_black.png);
     background-size: 60% 60%;
    background-position: center;
    background-repeat: no-repeat;
}
.mainservices footer .content aside{
    height: 100%;
    width:24dvw;
    display:flex;
    flex-direction: column;
    justify-content: space-between;
}
.mainservices footer .content aside h1,.mainservices footer .content aside h2{
    height: auto;
    font-size: 1.3dvw;
    font-family:"tt-autonomous";
    line-height: 2dvw;
    margin-top: 0.6dvw;
}
.mainservices footer .content aside p{
    height:fit-content;
    width:22dvw;
    font-size:1.1dvw;
    font-family:"tt-autonomous";
    font-display:auto;
    font-style:normal;
    font-weight:200;
    font-stretch:normal;
    padding-left:5px;
    line-height: 1.8dvw; 
    margin-top: 2%;
}
.mainservices footer .content:nth-child(1) aside p{
    margin-top: 7%;
}
.mainservices footer .content:nth-child(4) aside p{
    margin-top: 7%;
}
/*review page*/
.reviews{
    height: 100vh;
    width: 100%;
    background-color: #E8BF29;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4.5dvw;
    overflow:hidden;
}
.reviews .reviewbox:nth-child(n){
    height: 32dvw;
    width: 28dvw;
    background-color: #191919;
    border-radius: 2dvw;
    box-shadow: -20px 16px 25px rgba(0,0,0,0.77);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease;
}
.reviews .reviewbox header{
    height:20%;
    width: 100%;
    display: flex;
    align-items:end;
    justify-content: center;
    font-size: 3.6dvw;
    font-family:AoboshiOne-Regular;
    
}
.reviews .reviewbox footer{
    height:80%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: left;
}
.reviews .reviewbox footer p:nth-child(1){
    font-size: 1dvw;
    font-family:"tt-autonomous";
    font-display:auto;
    font-style:normal;
    font-weight:200;
    font-stretch:normal;
    line-height: 1.6dvw;
    height:24dvw;
    width: 25dvw;
    margin-top: 1.4dvw;
    margin-left: 1.7dvw;
}
.reviews .reviewbox footer p:nth-child(2){
    font-size: 1dvw;
    font-family:"tt-autonomous";
    font-display:auto;
    font-style:normal;
    font-weight:200;
    font-stretch:normal;
    line-height: 1.6dvw;
     margin-top: 1dvw;
     margin-bottom: 1dvw;
     margin-left: 3dvw;
}
.reviews .reviewbox footer p b{
    font-size: 1dvw;
}
.reviews .reviewbox:hover{
    scale:1.2;
    
} 

.reviews .reviewbox:nth-child(n).animate{
      animation: grow 1s ease;
}
.reviews.animate{
    animation: gap 1s ease;
}

@keyframes grow {
    from{
        scale: 0;
    }
    to{scale:1;}
    50%{
        scale:1.1;
    }
   
}

@keyframes gap{
    from{
        background-color: #e5e5e4;
        gap: 3.6dvw;
    }
    to{
        gap: 4.5dvw;
    }
    55%{
        gap: 3.5dvw;
    }
}

/*contactus page*/
.contactus{
    height: 100vh;
    width:100%;
    background-color: #191919;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow:hidden;
}
.contactus header{
    height: 98.1%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.contactus header .alldetails{
    height: 95%;
    width: 95%;
    display: grid;
    grid-template-columns: 50% 50%;
    background-color: #e5e5e4;
}
.contactus header .alldetails .mapping{
    display: flex;
    flex-direction: column;
    align-items:left;
    height:fit-content; 
    gap:3dvw;
    height: 100%;
}
.contactus header .alldetails .mapping h2{
    font-size: 3.89dvw;
    font-family:"tt-autonomous";
    font-display:auto;
    font-style:normal;
    font-weight:700;
    font-stretch:normal;
    color: #282827;
    margin-left: 3dvw;
    margin-top: 6dvw;
   
}
.contactus header .mapping .map{
    height:25dvw;
    width: 44.5dvw;
    border: 1px solid black;
    margin-left: 3dvw;
    margin-bottom:176px ;
}
.contactus header .details{
   height:100%;
   display: flex;
   flex-direction: column;
   align-items: left;
   gap: 3.56dvw;
}

.contactus header .details .logo{
    height: 8dvw;
    width:39.8dvw;
    background-image: url(pictures/blacklogo.png);
    background-position: center;
    background-size: cover;
    margin-top: 6.8dvw;
    margin-left:-2dvw;
}
.contactus header .details section{
    height: fit-content;
    width: 37.3dvw;
    display: flex;
    flex-direction: column;
    align-items: top;
    justify-content: left;
    margin-left:-4.1dvw;
}
.contactus header .details section p{
    color: #282827;
    font-family:"tt-autonomous";
    font-display:auto;
    font-style:normal;
    font-weight:300;
    font-stretch:normal;
    font-size: 1.07dvw;
    line-height: 1.4dvw;
    
}
.contactus header .details section p:nth-child(3){
   margin-top: 1.1dvw;
   width:42dvw;
   height: 4.6dvw;
}
.contactus header .details section p:nth-child(4){
    margin-top: 1dvw;
}
.contactus header .details section p:nth-child(6){
    font-size: 1.07dvw;
    font-size: 1.1dvw;
}
.contactus footer{
    height: 1.9%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family:"tt-autonomous";
    font-display:auto;
    font-style:normal;
    font-weight:400;
    font-stretch:normal;
    font-size: 0.9dvw;
    background-color: #e8bf29;
    color: #282827;
}
}


















@media only screen 
and (min-device-width: 834px) 
and (max-device-width: 1194px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) 

    /*Styles for 11-inch iPad Pro (Portrait)*/

{


    html{
        overflow-x: hidden;
     }

    * {
        padding: 0;
        margin: 0;
        color: #e5e5e4;
        box-sizing: border-box;
    }
    body {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content:center;
        min-height: fit-content;
        max-height: 700vh;
        scroll-snap-type: y mandatory;
        width: 100%;
        overflow-x: hidden;
        background-repeat:  no-repeat;
    }
    /* LANDING PAGE */
    .container {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 70vh;
        width: 100%;
        background-image: url(pictures/background.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        overflow: hidden;
        position: relative;
    }
    
    .saturation {
        height:70vh;
        width: 47dvw;
        position:absolute;
        right: 0;
        overflow: hidden;
    }
    
    .saturation img {
        height: 100%;
        width: 47dvw;
        object-position: center;
        transition: all 0.5 ease-in-out;
        position: absolute;
        right: 0;
        overflow: hidden;
    }
    
    .landingpage {
        position: relative;
        height: 70vh;
        width: 100%;
        display: grid;
        grid-template-rows: 10.6% 89.4%;
        z-index: 12;
    }
    
    .landingpage .nav {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        
    }
    
    .landingpage .nav ul {
        height: 18px;
        width: 50dvw;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5dvw;
        margin-top: -7px;
        font-family: "tt-autonomous";
        font-weight: 500;
        font-style: normal;
        font-size: 2dvw;
      margin-right: 3dvw;
        
    }
    .landingpage  ul a {
     text-decoration: none;
    }
    /* Navbar List Items */
    .landingpage .nav ul li {
        position: relative;
        list-style: none;
        cursor: pointer;
        padding: 13px 0; /* Add some padding for better click area */
        color: #e5e5e4;
    }
    
    .landingpage .nav ul li::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 0px;
        background-color: #e8bd3f;
        transition: all 0.3s ease-in-out;
    }
    
    .landingpage .nav ul li:hover::after {
        width: 100%;
    }
    
    .landingpage .nav .logo {
        height: 4.67dvw;
        width: 30.67dvw;
        margin-top: -3px;
        background-image: url(pictures/Logo.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        margin-left: 1.3dvw;
       
    }
    
    .landingpage .main {
        display: grid;
        grid-template-columns: 50% 50%;
        position: relative;
    }
    
    .landingpage .main .text .txtbox {
        position: relative;
        top: 15dvw;
        left: 4dvw;
        width: 60dvw;
        height: 57dvw;
        display: flex;
        flex-direction: column;
        gap: 0;
        
    }
    
    .landingpage .main .text .txtbox #ready {
        width: 48dvw;
        font-family: "tt-autonomous";
        font-weight: 700;
        font-style: normal;
        font-size: 6.0dvw;
        color: #e5e5e4;
       
        /* for fonts */
    }
    
    .landingpage .main .text .txtbox h3 {
        width: 65dvw;
        font-family: "tt-autonomous-outline";
        font-weight: 900;
        font-style: normal;
        font-size: 5dvw;
        line-height: 6.2dvw;
        
        
        /* for fonts */
    }
    .landingpage .main .text .txtbox h3 b{
        font-family: "tt-autonomous-outline";
        font-weight: 900;
        font-style: normal;
        font-size: 5dvw;
    }
    .landingpage .main .text .txtbox #reality {
        width:50dvw;
        height: fit-content;
        font-family: "tt-autonomous";
        font-weight: 700;
        font-style: normal;
        font-size: 6.7dvw;
        color: #e8bf29;

        
        
        /* for fonts */
    }
    
    .landingpage .main .text .txtbox  .buttons {
        height:24dvw;
        width: 23dvw;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 5dvw;
        margin-bottom: 80px;
        margin-left: 8px;
        
    }
    
    .landingpage .main .text .txtbox .buttons a .contactus {
        vertical-align: middle;
        height:8dvw;
        width: 23dvw;
        text-decoration: none;
        color: #282827;
        font-size: 2.4dvw;
        display: inline-flex;
        align-items: center;
        justify-content: center;
       
    }
    .landingpage .main .text .txtbox .buttons a .knowmore {
        text-decoration: none;
        padding-top: 4.27px;
        vertical-align: middle;
        height:8dvw;
        width: 23dvw;
        text-decoration: none;
        color: #e5e5e5;
        font-size: 2.4dvw;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        
    }
    .landingpage .main .text .txtbox .buttons a {
        height:8dvw;
        width: 23dvw;
        display:flex;
        align-items: center;
        justify-content: center;
        font-family: "tt-autonomous", sans-serif;
        font-weight: 700;
        font-style: normal;
        vertical-align: middle;
        color: #e5e5e4;
        padding-top: 4.27px;
        padding-bottom: 5px;
        font-size: 2.7dvw;
        position: relative;
        z-index: 100;
        
    }
    .landingpage .main .text .txtbox .buttons a .contactus :hover, .landingpage .main .text .txtbox .buttons a .knowmore:hover{
        background-color: #e8bf29;
    }

    .landingpage .main .picture {
        height:100%;
        width: 100%;
        position: absolute;
    }
    
    .landingpage .main .picture .jcb {
        position: absolute;
        height: 58.4dvw;
        width: 57.3dvw;
        bottom: 0px;
        right: -1px;
        min-height:150px;
        min-width: 122.48px;
        
    }
    
    .landingpage .main .picture .jcb img {
        position:absolute;
        right: -0px;
        height: 54.2dvw;
        width: 57.3dvw;
        object-position: 90% 50%;
        object-fit:contain;
        transition: all 0.5 ease;
        z-index: -10;
        bottom: 0px;
        max-width: 80%;
        max-height: 85%;
        min-height:150px;
        min-width: 122.48px;
    }
    /*WHY US PAGE */
    .whyuscontainer{
        display: flex;
        flex-direction: column;
        height: 80vh;
        width: 100%;
        background-color: #e8bf29;
        overflow: hidden;
        position: relative;
        transition: all 0.4s ease ;
    }
    
    .whyuscontainer img{
        position: absolute;
        height: 100%;
        width: 100%;
        object-position: 0% 50%;
        object-fit: cover;
        bottom: 0;
          
    }
    .whyuscontainer .whyustxt{
        position: absolute;
        top: 10px;
        height:60dvw;
        width:70%;
        display: flex;
        flex-direction: column;
        align-items: left;
        justify-content: left;
        transition: all 0.5s ease;
        left: 10px;
       
    }
    .whyuscontainer .whyustxt h2{
        font-size: 9dvw;
        width: 100%;
        color:#282827;
        font-display:auto;
        font-style:normal;
        font-weight:800;
        font-stretch:normal;
        font-family: "tt-autonomous";
        position: relative;
        left: -2dvw;
    }
    .whyuscontainer .whyustxt p{
        height: fit-content;
        width: 70dvw;
        font-size:1.89dvw;
        color:#282827;
        font-display:auto;
        font-style:normal;
        font-weight:400;
        font-stretch:normal;
        font-family: "tt-autonomous";
        word-break: break-all;
       line-height: 2.9dvw;
        text-align: left;
        position: relative;
        left: -1dvw;
        top: -1dvw;
        word-break: keep-all;
    }
   
    /*about us*/
    .aboutus{
        position: relative;
        height: 60vh;
        width: 100%;
        background-color: #191919;
        background-image: url(pictures/newpattern.png);
        background-position: 30% 70%;
        background-size: 100%;
        display: grid;
        grid-template-columns: 45% 55%;
        overflow: hidden;  
    }
    .aboutus .image{
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        justify-content: space-between;
        overflow:visible;
    }
    
    .aboutus .image .rect1{
        display: visible;
        height: 4.2dvw;
        width: 100%;
        background-image: url(pictures/Rectangle\ 28.png);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .aboutus .image .rect2{
        display: visible;
        height: 4.2dvw;
        width: 100%;
        background-image: url(pictures/Rectangle\ 28-1.png);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .aboutus .image .logo{
        height: 25dvw;
        width: 25dvw;
        background-image: url(icons/kalorengineer.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        margin-top: -5dvw;
        
    }
        
        
        
    .aboutus .image p{
        font-family:"tt-autonomous";
        font-display:auto;
        font-style:normal;
        font-weight:400;
        font-stretch:normal;
        font-size:4.2dvw;
        margin-top: -8.5dvw;

        
        
        
    }
    .aboutus .image p b{
        font-weight: 400;
    }
    .aboutus .text{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        font-weight:200;
       
    }
    .aboutus .text p{
        width: 95%;
        height: fit-content;
        font-family:"tt-autonomous";
        word-break: break-all;
        font-display:auto;
        font-style:normal;
        font-weight:300;
        font-stretch:normal;
        font-size:1.56dvw;
        text-align:left;
        line-height: 2.5dvw;
        text-align: justify;
        word-break: keep-all;
        position: relative;
        left: -6px;
    } 
    .aboutus .text a{
        height: 4.8dvw;
        width: 19dvw;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
        font-size: 1.3dvw;
    }
    .aboutus .text .buttons{
        margin-top: 5px;
        height: 4.8dvw;
        width: 30dvw;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12dvw;
    }
    .aboutus .text .button{
        position:relative;
        height: 4.8dvw;
        width: 19dvw;
        background-color: #e5e5e4;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #282827;
        font-size: 1.9dvw;
        font-family:"tt-autonomous";
        font-display:auto;
        font-style:normal;
        font-weight:500;
        font-stretch:normal;
        transition: all 0.4s ease-in-out;
        padding-top: 4px;
    }
    .aboutus .text #knowmore{
        background-color: #282827;
        color: #e5e5e4;
        width: 18dvw;
    }
    /*projects page*/
    .projects{
        position: relative;
        width: 100%;
        height:62vh;
        background: #f5f5f5;
        overflow: hidden;
    
    }
    
    .projects .slide .item{
        width: 14dvw;
        height: 20dvw;
        position: absolute;
        bottom: -8dvw;
        transform: translate(0, -50%);
        border-radius: 10px;
        box-shadow: 0 20px 40px #000000c7;
        background-position: 20% 50%;
        background-size: cover;
        display: inline-block;
        transition: 0.5s;
       
    }
    
    .projects .slide .item:nth-child(1),
    .projects .slide .item:nth-child(2){
        bottom: 0;
        left: 0;
        transform: translate(0, 0);
        border-radius: 0;
        width: 100%;
        height: 100%;
        background-position: 50% 50%;
       
    }
    
    .projects .slide .item:nth-child(3){
        left: 45dvw;
        right: 20dvw;
    }
    .projects .slide .item:nth-child(4){
        left: calc(45dvw + 19%);
        right: 20dvw;
    }
    .projects .slide .item:nth-child(5){
        left: calc(45dvw + 38%);
        right: 20dvw;
    }
    
    
    /* here n = 0, 1, 2, 3,... */
    .projects .slide .item:nth-child(n + 6){
        left: calc(22dvw + 280px);
        opacity: 0;
    }
    
    
    
    .projects .item .content{
        position: absolute;
        top: 24%;
        left: 26%;
        width: 300px;
        text-align: left;
        color: #e5e5e4;
        transform: translate(0, -50%);
        font-family: system-ui;
        display: none;
       
        
    }
    
    
    .projects .slide .item:nth-child(2) .content{
        display: block;
    }
    
    
    .projects .content .name{
        position: relative;
         left: 21dvw; 
         top: 5dvw;
        font-size: 6dvw;
        font-family:"tt-autonomous-outline";
        text-transform: uppercase;
        font-display:auto;
        font-style:normal;
        font-weight:900;
        font-stretch:normal;
        opacity: 0;
        animation: animate 1s ease-in-out 1 forwards;
        width: 55dvw;
        color: #f5f5f5;
       
    }
    
    .projects .content .des{
        position: relative;
        left: 21.2dvw;
        top: 5dvw;
        margin-top: 2dvw;
        opacity: 0;
        animation: animate 1s ease-in-out 0.3s 1 forwards;
        font-family:"tt-autonomous";
        font-display:auto;
        font-style:normal;
        font-weight:200;
        font-stretch:normal;
        font-size:2.2dvw;
        line-height: 3.3dvw;
        color: #f5f5f5;
        width: 57dvw;
    }
    
    
    
    
    @keyframes animate {
        from{
            opacity: 0;
            transform: translate(0, 100px);
            filter: blur(33px);
        }
    
        to{
            opacity: 1;
            transform: translate(0);
            filter: blur(0);
        }
    }
    
    
    
    .projects .button{
        width: fit-content;
        text-align: center;
        position: absolute;
        bottom: 35px;
        left:17px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
    }
    
    .projects .button button{
        width: 9dvw;
        height: 9vw;
        border-radius: 50%;
        border: none;
        cursor: pointer;
        margin: 0 5px;
        background-color: #e5e5e4;
        transition: 0.3s;
       
    }
    .projects .button button i{
        color: #282828;
        font-size:1.2rem;
        font-weight: 900;
    }
    
    .projects .button button:hover{
        background: #b4b4b4;
        
    }
    /*main service page */
    .mainservices{
           height:fit-content;
           width:100%;
           background-color: #191919;
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
           overflow: hidden;
           
    }
    .mainservices nav{
        height: 12%;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        
    }
    .mainservices nav h2{
        align-self: center;
        justify-self: center;
        font-size: 7dvw;
        font-family:"tt-autonomous";
        font-display:auto;
        font-style:normal;
        font-weight:800;
        font-stretch:normal;
        margin-top: 4dvw;
    
    }
    .mainservices nav .bar{
        height: 2px;
        width: 20dvw;
        background-color: #E8BF29;
        position: relative;
        top: 9px;
    }
    .mainservices footer{
        position: relative;
        bottom: 5px;
        height:88%;
        width:100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content:center;
        gap: 3dvw;
    }
    .mainservices footer .content:nth-child(n){
        position: relative;
           height: 20dvw;
           display: flex;
           align-items: top;
           justify-content:center;
           gap:2dvw;
           left: 2dvw;
           top: -3dvw;
           width: 100%;
         
           
    }
    .mainservices footer .content:nth-child(1){
        margin-top: 6dvw;
    }
    .mainservices footer .content .pic{
        position: relative;
        top:0dvw;
        height: 9dvw;
        width: 9dvw;
        border-radius: 50%;
        background-color: #e8bf29;
        transition: all 0.2s ease;
        
    }
    .mainservices footer .content .pic:hover{
        background-color: #e5e5e4;
    }
    
    .mainservices footer .content #pic1{
        background-image: url(icons/construction_black.png);
        background-size: 60% 60%;
        background-position: center;
        background-repeat: no-repeat;
    }
    .mainservices footer .content #pic2{
        background-image: url(icons/architectural_black.png);
         background-size: 60% 60%;
        background-position: center;
        background-repeat: no-repeat;
    }
    .mainservices footer .content #pic3{
        background-image: url(icons/electric-tower_black.png);
         background-size: 60% 60%;
        background-position: center;
        background-repeat: no-repeat;
    }
    .mainservices footer .content #pic4{
        background-image: url(icons/home-repair_black.png);
         background-size: 70% 70%;
        background-position: center;
        background-repeat: no-repeat;
    }
    .mainservices footer .content #pic5{
        background-image: url(icons/contract_black.png);
         background-size: 65% 65%;
        background-position: center;
        background-repeat: no-repeat;
    }
    .mainservices footer .content #pic6{
        background-image: url(icons/bank_black.png);
         background-size: 60% 60%;
        background-position: center;
        background-repeat: no-repeat;
    }
    .mainservices footer .content aside{
        height: 100%;
        width:80%;
        display:flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .mainservices footer .content aside h1,.mainservices footer .content aside h2{
        height: auto;
        font-size:3.5dvw;
        font-family:"tt-autonomous";
        line-height: 4.5dvw;
        margin-top: 1dvw;
        
    }
    .mainservices footer .content aside p{
        height:fit-content;
        width: 90%;
        font-size: 2.4dvw;
        font-family:"tt-autonomous";
        font-display:auto;
        font-style:normal;
        font-weight:200;
        padding-left:0.8dvw;
        margin-top: 0.5dvw;
        line-height: 3dvw;
        
    }
    
    /*review page*/
    .reviews{
        height: 120vw;
        width: 100%;
        background-color: #E8BF29;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0dvw;
        position: relative;
        overflow:hidden;
    }
    .reviews .reviewbox:nth-child(n){
        height: 45dvw;
        width: 40dvw;
        background-color: #191919;
        border-radius: 20px;
        box-shadow: -20px 16px 30px rgba(0,0,0,0.77);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: all 0.5s ease;
    }
    .reviews .reviewbox header{
        height: 12%;
        width: 100%;
        display: flex;
        align-items:end;
        justify-content: center;
        font-size: 7.2dvw;
        font-family:AoboshiOne-Regular;
        padding-top:10dvw;
        
       
    }
    .reviews .reviewbox footer{
        height: 88%;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: left;
        
    }
    .reviews .reviewbox footer p:nth-child(1){
        font-size:2.0dvw;
        font-family:"tt-autonomous";
        font-display:auto;
        font-style:normal;
        font-weight:200;
        font-stretch:normal;
        line-height: 2.8dvw;
        height:fit-content;
        width: 34dvw;
        margin-top: 0dvw;
        margin-left:3dvw;
        
    }
    .reviews .reviewbox footer p:nth-child(2){
        font-size:2.0dvw;
        font-family:"tt-autonomous";
        font-display:auto;
        font-style:normal;
        font-weight:200;
        font-stretch:normal;
        line-height: 3dvw;
         margin-top: 10px;
         margin-left:4dvw;
         
    }
    .reviews .reviewbox footer p b{
        font-size:2.0dvw;
    }
    .reviews .reviewbox:hover{
        scale:1;
        
    } 
    
    .reviews .reviewbox:nth-child(n).animate{
          animation: grow 1s ease;
    }
    .reviews.animate{
        animation: gap 1s ease;
    }
    
    @keyframes grow {
        from{
            scale: 0;
        }
        to{scale:1;}
        50%{
            scale:1.1;
           
        }
       
    }
    
    @keyframes gap{
        from{
            background-color: #e5e5e4;
            gap: 1dvw;
        }
        to{
            gap: 1.6dvw;
        }
        55%{gap: 1.2dvw;}
    }
    
    .reviews .reviewbox:nth-child(1){
        position: absolute;
        top: 10dvw;
        left: 7%;
        z-index: 1;
    }
    .reviews .reviewbox:nth-child(2){
        position: absolute;
        left: 7%;
        top: 65dvw;
        bottom: 3dvw;
        z-index: 1;
    }
    .reviews .reviewbox:nth-child(3){
        position: absolute;
        right: 6%;
        z-index: 1;
    }


    /*contactus page*/
    .contactus{
        height: 105vh;
        width:100%;
        background-color: #191919;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow:hidden;
    }
    .contactus header{
        height: 98%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        
    }
    .contactus header .alldetails{
        height:95%;
        width: 95%;
        display: flex;
        flex-direction: column;
        align-items: left;
        justify-content: left;
        background-color: #e5e5e4;
    }
    .contactus header .alldetails .mapping{
        height: 45%;
        display: flex;
        flex-direction: column;
        align-items:center;
        


        
    }
    .contactus header .alldetails .mapping h2{
        font-size: 7.5dvw;
        font-family:"tt-autonomous";
        font-display:auto;
        font-style:normal;
        font-weight:700;
        font-stretch:normal;
        color: #282827;
        margin-left: 0dvw;
        margin-top: 1.6dvw;
        height: auto;
        width: 100dvw;
        text-align: center;
       
    }
    .contactus header .mapping .map{
        position: absolute;
        height:40dvw;
        width: 90%;
        border: 1px solid black;
        margin-left: 0dvw;
        margin-top:3px ;
        top: 13dvw;
    }
    .contactus header .details{
        position: relative;
       height: 55%;
       display: flex;
       flex-direction: column;
       align-items: center;
    }
    
    .contactus header .details .logo{
        height: 13.23dvw;
        width: 67.57dvw;
        background-image: url(pictures/blacklogo.png);
        background-position: center;
        background-size: cover;
        position: absolute;
        align-self: center;
        top: -60px;
        left: 14vw;
        
    }
    .contactus header .details section{
        height: fit-content;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: top;
        justify-content: left;
    }
    .contactus header .details section p{
        color: #282827;
        font-family:"tt-autonomous";
        font-display:auto;
        font-style:normal;
        font-weight:300;
        font-stretch:normal;
        font-size: 2.5dvw;
        line-height: 3.4dvw;
        width: 100dvw;
        margin-left: 25px;
    }
    .contactus header .details section p:nth-child(1){
        margin-top: 20dvw;
    }
    .contactus header .details section p:nth-child(3){
        margin-top: 1dvw;
       width:90dvw;
       height: auto;
    }
    .contactus header .details section p:nth-child(4){
        margin-top: 1.2dvw;
        width:90dvw;
        height: auto;
    }
    .contactus header .details section p:nth-child(6){
        margin-top: 3dvw;
        font-size: 2.5dvw;
    }
    .contactus footer{
        height: 2%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family:"tt-autonomous";
        font-display:auto;
        font-style:normal;
        font-weight:400;
        font-stretch:normal;
        font-size: 1dvw;
    }
}






























@media only screen and (min-device-width: 992px)
/* Styles for Laptops, Android tablet & Pc (Landscape)*/

{
    html{
        overflow-x: hidden;
     }
     
    * {
        padding: 0;
        margin: 0;
        color: #e5e5e4;
        box-sizing: border-box;
        
    }
    body {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: fit-content;
        max-height: 700vh;
        overflow-x: hidden;
        scroll-snap-type: y mandatory;
        width: 100%;
        overflow-x: hidden;
    }
    
    /* LANDING PAGE */
    .container {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        width: 100%;
        background-image: url(pictures/background.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        overflow: hidden;
    }
    
    .saturation {
        height: 100vh;
        width: 50dvw;
        position: absolute;
        right: 0;
       overflow: hidden;
    }
    
    .saturation img {
        height: 100vh;
        width: 100%;
        object-position: center;
        transition: all 0.5 ease-in-out;
        overflow: hidden;
    }
    
    .landingpage {
        position: relative;
        height: 100vh;
        width: 100%;
        display: grid;
        grid-template-rows: 10.6% 89.4%;
        z-index: 12;
    }
    
    .landingpage .nav {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        
    }
    
    .landingpage .nav ul {
        height: 49px;
        width: 50dvw;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6.5dvw;
        margin-top: 2dvw;
        font-family: "tt-autonomous", sans-serif;
        font-weight: 500;
        font-style: normal;
        font-size: 1.6dvw;
        margin-right: 4dvw;
        
    }
    .landingpage  ul a {
     text-decoration: none;
    }
    /* Navbar List Items */
    .landingpage .nav ul li {
        position: relative;
        list-style: none;
        cursor: pointer;
        padding: 17px 0; /* Add some padding for better click area */
        color: #e5e5e4;
    }
    
    .landingpage .nav ul li::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 3px;
        background-color: #e8bd3f;
        transition: all 0.3s ease-in-out;
    }
    
    .landingpage .nav ul li:hover::after {
        width: 100%;
    }
    
    .landingpage .nav .logo {
        height: 2.7dvw;
        width: 17dvw;
        margin-top: 2dvw;
        background-image: url(pictures/Logo.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        margin-left: 4dvw;
    }
    
    .landingpage .main {
        display: grid;
        grid-template-columns: 50% 50%;
    }
    
    .landingpage .main .text .txtbox {
        position: absolute;
        top: 13.594dvw;
        left: 4.78dvw;
        width: 53dvw;
        height:fit-content;
        display: flex;
        flex-direction: column;
        gap:0dvw;
       
    }
    
    .landingpage .main .text .txtbox #ready {
        width: fit-content;
        height: fit-content;
        font-family: "tt-autonomous", sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 4.036dvw;
        color: #e5e5e4;
        margin-left: 4.283dvw;
      
        /* for fonts */
    }
    
    .landingpage .main .text .txtbox h3 {
        width: 35dvw;
        height: fit-content;
        font-family: "tt-autonomous-outline", sans-serif;
        font-weight: 900;
        font-style: normal;
        font-size: 2.79dvw;
        line-height: 3.5dvw;
        margin-left: 4.699dvw;
        margin-top: -0.3dvw;
        /* for fonts */
    }
    .landingpage .main .text .txtbox h3 b{
        font-size: 2.79dvw;
    }
    
    .landingpage .main .text .txtbox #reality {
        width: 53dvw;
        height: fit-content;
        font-family: "tt-autonomous", sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 6.25dvw;
        color: #e8bf29;
        margin-left: 4.074dvw;
        margin-top: 1dvw;
        /* for fonts */
    }
    
    .landingpage .main .text .txtbox  .buttons {
        height: fit-content;
        width: fit-content;
        display: inline-flex;
        align-items: center;
        justify-content: left;
        gap: 4.85dvw;
        margin-left: 5.5dvw;
        margin-top: 2.5dvw;
        

       
    }
    .landingpage .main .text .txtbox .buttons a{
        height: 2.828dvw;
        
    }
    .landingpage .main .text .txtbox .buttons a .contactus{
        height: 2.828dvw;
        width: 18dvw;
        background-color: #e5e5e4;
        color:  #282827;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-family: "tt-autonomous", sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 1.8dvw;
        transition: width 0.4s ease;
        vertical-align: middle;
        padding-top: 4.27px;
        
       
        /* for fonts */
    }
 
    .landingpage .main .text .txtbox .buttons a {text-decoration: none;}
    .landingpage .main .text .txtbox .buttons a .knowmore{
        height: 2.828dvw;
        width: 18dvw;
        background-color: #282827;
        display:inline-flex;
        align-items: center;
        justify-content: center;
        font-family: "tt-autonomous", sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 1.8dvw;
        vertical-align: middle;
        color: #e5e5e4;
        padding-top: 4.27px;
        
       
       
        /* for fonts */
    }
    .landingpage .main .text .txtbox .buttons a .knowmore:hover ,.landingpage .main .text .txtbox .buttons .contactus:hover{
        transition: all 0.4s ease-in-out;
        background-color:  #e8bf29;
        color: #e5e5e4;
        cursor:pointer;
        caret-color: #282827;
    }
    .landingpage .main .picture {
        height: 89.4vh;
        position: relative;
    }
    
    .landingpage .main .picture .jcb {
        position: absolute;
        bottom: 0;
        right: 0;
        height:42.26dvw;
        width: 34.4dvw;
    }
    
    .landingpage .main .picture .jcb img {
        position: absolute;
        bottom: -3px;
        right: 0;
        height:100%;
        width: 100%;
        object-position: center;
        object-fit: contain;
        transition: all 0.5 ease;
        z-index: -10;
    }
    /*WHY US PAGE */
    .whyuscontainer{
        position: relative;
        display: flex;
        flex-direction: column;
        height: 100vh;
        width: 100%;
        background-color: #e8bf29;
        overflow: hidden;
        position: relative;
        transition: all 0.4s ease ;
    }
    
    .whyuscontainer img{
        position: absolute;
        height: 100vh;
        width: 100%;
        object-position:  100% 10%;
        bottom: 0;
        
    }
    .whyuscontainer .whyustxt{
        position: absolute;
        top: 0;
        height:37dvw;
        width: 64.4dvw;
        display: flex;
        flex-direction: column;
        align-items: left;
        transition: all 0.5s ease;

        
    }
    .whyuscontainer .whyustxt h2{
        font-size: 8dvw;
        color:#282827;
        font-display:auto;
        font-style:normal;
        font-weight:600;
        font-stretch:normal;
        font-family: "tt-autonomous";
        margin-left:1dvw;
        margin-top: 1.3dvw;
       width: 61.3dvw;
    }
    .whyuscontainer .whyustxt h2 b{
        font-size: 8dvw;
        font-weight: 600;
    }
    .whyuscontainer .whyustxt p{
        height: fit-content;
        width: 46dvw;
        font-size:1.1dvw;
        color:#282827;
        font-display:auto;
        font-style:normal;
        font-weight:200;
        font-stretch:normal;
        font-family: "tt-autonomous";
        margin-left:1.5dvw;
        word-wrap: break-word;
        line-height: 1.69dvw;
        margin-top: 0dvw;
        
    }
    /*whyus background animation*/
    .whyuscontainer img.animate{
        animation: background 1.4s ease ;
    }
    @keyframes background {
        from{
           bottom: -800px;
        }
        to{
            bottom: 0;
        }
        
    }
    /*about us*/
    .aboutus{
        position: relative;
        height: 100vh;
        width: 100%;
        background-color: #191919;
        background-image: url(pictures/newpattern.png);
        background-position: 40% 50%;
        background-size: 133%;
        display: grid;
        grid-template-columns: 50% 50%;
        overflow: hidden;
       
    }
    .aboutus .image{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        justify-content: space-between;
       height: 100%;
    }
    
    .aboutus .image .rect1{
        height: 4.79dvw;
        width: 100%;
        background-image: url(pictures/Rectangle\ 28.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .aboutus .image .rect2{
        height: 4.79dvw;
        width: 100%;
        background-image: url(pictures/Rectangle\ 28-1.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .aboutus .image .logo{
        height: 20dvw;
        width: 20dvw;
        background-image: url(icons/kalorengineer.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .aboutus .image p{
        font-family:"tt-autonomous";
        font-display:auto;
        font-style:normal;
        font-weight:600;
        font-stretch:normal;
        font-size: 3.4dvw;
        position: relative;
    }
    .aboutus .text{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 40px;
    }
    .aboutus .text p{
        width: 43dvw;
        height: fit-content;
        word-break: keep-all;
        font-family:"tt-autonomous";
        font-display:auto;
        font-style:normal;
        font-weight:100;
        font-stretch:normal;
        line-height: 1.9dvw;
        font-size: 1.2dvw;
        text-align:justify;
        text-justify:inter-word;
    } 
    .aboutus .text a{
        height: 3.78dvw;
        width: 19dvw;
        text-decoration: none;
        border-radius: 17px;
        display: flex;
        align-items: center;
        justify-content: center;
        
    }
    .aboutus .text .buttons{
        height: 3.78dvw;
        width: 43dvw;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4.5dvw;
    }
    .aboutus .text .button{
        position:relative;
        height: 3.78dvw;
        width: 19dvw;
        background-color: #e5e5e4;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #282827;
        font-size: 1.5dvw;
        font-family:"tt-autonomous";
        font-display:auto;
        font-style:normal;
        font-weight:900;
        font-stretch:normal;
        transition: all 0.4s ease-in-out;
    }
    .aboutus .text a #knowmore{
        background-color: #282827;
        color: #e5e5e4;
    }
    .aboutus .text a #testimony:hover,.aboutus .text a #knowmore:hover{
        background-color:  #e8bf29;
        color: #e5e5e4;
    }
    /*projects page*/
    .projects{
        position: relative;
        width: 100%;
        height: 100vh;
        background: #f5f5f5;
       overflow: hidden;
    
    }
    
    .projects .slide .item{
        width:13dvw;
        height: 15dvw;
        position: absolute;
        bottom: -5.67dvw;
        transform: translate(0, -50%);
        border-radius: 1.2dvw;
        box-shadow: 0 20px 40px #000000c7;
        background-position: 20% 50%;
        background-size: cover;
        display: inline-block;
        transition: 0.5s;
       
    }
    
    .projects .slide .item:nth-child(1),
    .projects .slide .item:nth-child(2){
        bottom: 0;
        left: 0;
        transform: translate(0, 0);
        border-radius: 0;
        width: 100%;
        height: 100%;
        background-position: 50% 50%;
       
    }
    
    .projects .slide .item:nth-child(3){
        left: 50dvw;
        right: 10dvw;
    }
    .projects .slide .item:nth-child(4){
        left: calc(50dvw + 16%);
        right: 10dvw;
    }
    .projects .slide .item:nth-child(5){
        left: calc(50dvw + 32%);
        right: 10dvw;
    }
    
    
    
    
    /* here n = 0, 1, 2, 3,... */
    .projects .slide .item:nth-child(n + 6){
        left: calc(50dvw + 64%);
        opacity: 0;
    }
    
    
    
    .projects .item .content{
        position: absolute;
        top: 20dvw;
        right: 4dvw;
        width: 43dvw;
        text-align: left;
        color: #e5e5e4;
        transform: translate(0, -50%);
        font-family: system-ui;
        display: none;
        height: 40dvw;
        
    }
    
    
    .projects .slide .item:nth-child(2) .content{
        display: block;
    }
    
    
    .projects .content .name{
        position: static;
        margin-top:2.7dvw;
        font-size:3.7dvw;
        line-height: 4.3dvw;
        font-family:"tt-autonomous-outline";
        text-transform: uppercase;
        font-display:auto;
        font-style:normal;
        font-weight:900;
        font-stretch:normal;
        opacity: 0;
        animation: animate 1s ease-in-out 1 forwards;
        width: fit-content;
        
    }
    
    .projects .content .des{
        position: static;
        margin-top:2dvw;
        opacity: 0;
        animation: animate 1s ease-in-out 0.3s 1 forwards;
        font-family:"tt-autonomous";
        font-display:auto;
        font-style:normal;
        font-weight:300;
        font-stretch:normal;
        font-size:1.5dvw;
        line-height: 2dvw;
        width: 40dvw;
        height: fit-content;
        
    }
    
    
    
    
    @keyframes animate {
        from{
            opacity: 0;
            transform: translate(0, 100px);
            filter: blur(33px);
        }
    
        to{
            opacity: 1;
            transform: translate(0);
            filter: blur(0);
        }
    }
    
    
    
    .projects .button{
        width: fit-content;
        text-align: center;
        position: absolute;
        bottom: 7dvw;
        left:10dvw;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4dvw;
    }
    
    .projects .button button{
        width:4.5dvw;
        height: 4.5dvw;
        border-radius: 50%;
        border: none;
        cursor: pointer;
        margin: 0 5px;
        background-color: #e5e5e4;
        transition: 0.3s;
       
    }
    .projects .button button i{
        color: #282828;
        font-size: 1.5dvw;
        font-weight: 900;
    }
    
    .projects .button button:hover{
        background: #b4b4b4;
        
    }
    /*main service page */
    .mainservices{
           height: 100vh;
           width:100%;
           background-color: #191919;
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
           overflow: hidden;
    }
    .mainservices nav{
        height: 12%;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .mainservices nav h2{
        align-self: center;
        justify-self: center;
        font-size: 4.5dvw;
        font-family:"tt-autonomous";
        font-display:auto;
        font-style:normal;
        font-weight:800;
        font-stretch:normal;
        height: fit-content;
    }
    .mainservices nav .bar{
        height: 0.41dvw;
        width: 13dvw;
        background-color: #E8BF29;
        position: relative;
        top: 4%;
    }
    .mainservices footer{
        height:88%;
        width:100%;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        flex-wrap: wrap;
    }
    .mainservices footer .content:nth-child(n){
           width:31dvw;
           height: 15dvw;
           display: flex;
           align-items: top;
           justify-content:left;
           gap:1.6dvw;       
    }
    .mainservices footer .content .pic{
        height:5.6dvw;
        width:5.6dvw;
        border-radius: 50%;
        background-color: #e8bf29;
        margin-top: 0.8dvw;
        transition: all 0.2s ease;
    }
    .mainservices footer .content .pic:hover{
        background-color: #e5e5e4;
    }
    
    .mainservices footer .content #pic1{
        background-image: url(icons/construction_black.png);
        background-size: 60% 60%;
        background-position: center;
        background-repeat: no-repeat;
    }
    .mainservices footer .content #pic2{
        background-image: url(icons/architectural_black.png);
         background-size: 60% 60%;
        background-position: center;
        background-repeat: no-repeat;
    }
    .mainservices footer .content #pic3{
        background-image: url(icons/electric-tower_black.png);
         background-size: 60% 60%;
        background-position: center;
        background-repeat: no-repeat;
    }
    .mainservices footer .content #pic4{
        background-image: url(icons/home-repair_black.png);
         background-size: 70% 70%;
        background-position: center;
        background-repeat: no-repeat;
    }
    .mainservices footer .content #pic5{
        background-image: url(icons/contract_black.png);
         background-size: 65% 65%;
        background-position: center;
        background-repeat: no-repeat;
    }
    .mainservices footer .content #pic6{
        background-image: url(icons/bank_black.png);
         background-size: 60% 60%;
        background-position: center;
        background-repeat: no-repeat;
    }
    .mainservices footer .content aside{
        height: 100%;
        width:24dvw;
        display:flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .mainservices footer .content aside h1,.mainservices footer .content aside h2{
        height: auto;
        font-size: 1.3dvw;
        font-family:"tt-autonomous";
        line-height: 2dvw;
        margin-top: 0.6dvw;
    }
    .mainservices footer .content aside p{
        height:fit-content;
        width:22dvw;
        font-size:1.1dvw;
        font-family:"tt-autonomous";
        font-display:auto;
        font-style:normal;
        font-weight:200;
        font-stretch:normal;
        padding-left:5px;
        line-height: 1.8dvw; 
        margin-top: 2%;
    }
    .mainservices footer .content:nth-child(1) aside p{
        margin-top: 7%;
    }
    .mainservices footer .content:nth-child(4) aside p{
        margin-top: 7%;
    }
    /*review page*/
    .reviews{
        height: 100vh;
        width: 100%;
        background-color: #E8BF29;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4.5dvw;
        overflow:hidden;
    }
    .reviews .reviewbox:nth-child(n){
        height: 32dvw;
        width: 28dvw;
        background-color: #191919;
        border-radius: 2dvw;
        box-shadow: -20px 16px 25px rgba(0,0,0,0.77);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: all 0.5s ease;
    }
    .reviews .reviewbox header{
        height:20%;
        width: 100%;
        display: flex;
        align-items:end;
        justify-content: center;
        font-size: 3.6dvw;
        font-family:AoboshiOne-Regular;
        
    }
    .reviews .reviewbox footer{
        height:80%;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: left;
    }
    .reviews .reviewbox footer p:nth-child(1){
        font-size: 1dvw;
        font-family:"tt-autonomous";
        font-display:auto;
        font-style:normal;
        font-weight:200;
        font-stretch:normal;
        line-height: 1.6dvw;
        height:24dvw;
        width: 25dvw;
        margin-top: 1.4dvw;
        margin-left: 1.7dvw;
    }
    .reviews .reviewbox footer p:nth-child(2){
        font-size: 1dvw;
        font-family:"tt-autonomous";
        font-display:auto;
        font-style:normal;
        font-weight:200;
        font-stretch:normal;
        line-height: 1.6dvw;
         margin-top: 1dvw;
         margin-bottom: 1dvw;
         margin-left: 3dvw;
    }
    .reviews .reviewbox footer p b{
        font-size: 1dvw;
    }
    .reviews .reviewbox:hover{
        scale:1.2;
        
    } 
    
    .reviews .reviewbox:nth-child(n).animate{
          animation: grow 1s ease;
    }
    .reviews.animate{
        animation: gap 1s ease;
    }
    
    @keyframes grow {
        from{
            scale: 0;
        }
        to{scale:1;}
        50%{
            scale:1.1;
        }
       
    }
    
    @keyframes gap{
        from{
            background-color: #e5e5e4;
            gap: 3.6dvw;
        }
        to{
            gap: 4.5dvw;
        }
        55%{
            gap: 3.5dvw;
        }
    }
    
    /*contactus page*/
    .contactus{
        height: 100vh;
        width:100%;
        background-color: #191919;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        overflow:hidden;
    }
    .contactus header{
        height: 98.1%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .contactus header .alldetails{
        height: 95%;
        width: 95%;
        display: grid;
        grid-template-columns: 50% 50%;
        background-color: #e5e5e4;
    }
    .contactus header .alldetails .mapping{
        display: flex;
        flex-direction: column;
        align-items:left;
        height:fit-content; 
        gap:3dvw;
        height: 100%;
    }
    .contactus header .alldetails .mapping h2{
        font-size: 3.89dvw;
        font-family:"tt-autonomous";
        font-display:auto;
        font-style:normal;
        font-weight:700;
        font-stretch:normal;
        color: #282827;
        margin-left: 3dvw;
        margin-top: 6dvw;
       
    }
    .contactus header .mapping .map{
        height:25dvw;
        width: 44.5dvw;
        border: 1px solid black;
        margin-left: 3dvw;
        margin-bottom:176px ;
    }
    .contactus header .details{
       height:100%;
       display: flex;
       flex-direction: column;
       align-items: left;
       gap: 3.56dvw;
    }
    
    .contactus header .details .logo{
        height: 8dvw;
        width:39.8dvw;
        background-image: url(pictures/blacklogo.png);
        background-position: center;
        background-size: cover;
        margin-top: 6.8dvw;
        margin-left:-2dvw;
    }
    .contactus header .details section{
        height: fit-content;
        width: 37.3dvw;
        display: flex;
        flex-direction: column;
        align-items: top;
        justify-content: left;
        margin-left:-4.1dvw;
    }
    .contactus header .details section p{
        color: #282827;
        font-family:"tt-autonomous";
        font-display:auto;
        font-style:normal;
        font-weight:300;
        font-stretch:normal;
        font-size: 1.07dvw;
        line-height: 1.4dvw;
        
    }
    .contactus header .details section p:nth-child(3){
       margin-top: 1.1dvw;
       width:42dvw;
       height: 4.6dvw;
    }
    .contactus header .details section p:nth-child(4){
        margin-top: 1dvw;
    }
    .contactus header .details section p:nth-child(6){
        font-size: 1.07dvw;
        font-size: 1.1dvw;
    }
    .contactus footer{
        height: 1.9%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family:"tt-autonomous";
        font-display:auto;
        font-style:normal;
        font-weight:400;
        font-stretch:normal;
        font-size: 0.9dvw;
        background-color: #e8bf29;
        color: #282827;
    }
}




@media only screen 
and (min-device-width: 1024px) 
and (max-device-width: 1366px)
and (-webkit-min-device-pixel-ratio: 2) {
  /* Styles for 12.9-inch iPad Pro (Landscape)*/
  html{
    overflow-x: hidden;
 }
 
* {
    padding: 0;
    margin: 0;
    color: #e5e5e4;
    box-sizing: border-box;
    
}
body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: fit-content;
    max-height: 700vh;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    width: 100%;
    overflow-x: hidden;
}

/* LANDING PAGE */
.container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100%;
    background-image: url(pictures/background.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

.saturation {
    height: 100vh;
    width: 50dvw;
    position: absolute;
    right: 0;
   overflow: hidden;
}

.saturation img {
    height: 100vh;
    width: 100%;
    object-position: center;
    transition: all 0.5 ease-in-out;
    overflow: hidden;
}

.landingpage {
    position: relative;
    height: 100vh;
    width: 100%;
    display: grid;
    grid-template-rows: 10.6% 89.4%;
    z-index: 12;
}

.landingpage .nav {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    
}

.landingpage .nav ul {
    height: 49px;
    width: 50dvw;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6.5dvw;
    margin-top: 2dvw;
    font-family: "tt-autonomous", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 1.6dvw;
    margin-right: 4dvw;
    
}
.landingpage  ul a {
 text-decoration: none;
}
/* Navbar List Items */
.landingpage .nav ul li {
    position: relative;
    list-style: none;
    cursor: pointer;
    padding: 17px 0; /* Add some padding for better click area */
    color: #e5e5e4;
}

.landingpage .nav ul li::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background-color: #e8bd3f;
    transition: all 0.3s ease-in-out;
}

.landingpage .nav ul li:hover::after {
    width: 100%;
}

.landingpage .nav .logo {
    height: 2.7dvw;
    width: 17dvw;
    margin-top: 2dvw;
    background-image: url(pictures/Logo.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    margin-left: 4dvw;
}

.landingpage .main {
    display: grid;
    grid-template-columns: 50% 50%;
}

.landingpage .main .text .txtbox {
    position: absolute;
    top: 13.594dvw;
    left: 4.78dvw;
    width: 53dvw;
    height:fit-content;
    display: flex;
    flex-direction: column;
    gap:0dvw;
   
}

.landingpage .main .text .txtbox #ready {
    width: fit-content;
    height: fit-content;
    font-family: "tt-autonomous", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 4.036dvw;
    color: #e5e5e4;
    margin-left: 4.283dvw;
  
    /* for fonts */
}

.landingpage .main .text .txtbox h3 {
    width: 35dvw;
    height: fit-content;
    font-family: "tt-autonomous-outline", sans-serif;
    font-weight: 900;
    font-style: normal;
    font-size: 2.79dvw;
    line-height: 3.5dvw;
    margin-left: 4.699dvw;
    margin-top: -0.3dvw;
    /* for fonts */
}
.landingpage .main .text .txtbox h3 b{
    font-size: 2.79dvw;
}

.landingpage .main .text .txtbox #reality {
    width: 53dvw;
    height: fit-content;
    font-family: "tt-autonomous", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 6.25dvw;
    color: #e8bf29;
    margin-left: 4.074dvw;
    margin-top: 1dvw;
    /* for fonts */
}

.landingpage .main .text .txtbox  .buttons {
    height: fit-content;
    width: fit-content;
    display: inline-flex;
    align-items: center;
    justify-content: left;
    gap: 4.85dvw;
    margin-left: 5.5dvw;
    margin-top: 2.5dvw;

   
}
.landingpage .main .text .txtbox .buttons a{
    height: 2.828dvw;
}
.landingpage .main .text .txtbox .buttons a .contactus{
    height: 2.828dvw;
    width: 18dvw;
    background-color: #e5e5e4;
    color:  #282827;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "tt-autonomous", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 1.8dvw;
    transition: width 0.4s ease;
    vertical-align: middle;
    padding-top: 4.27px;
   
    /* for fonts */
}

.landingpage .main .text .txtbox .buttons a {text-decoration: none;}
.landingpage .main .text .txtbox .buttons a .knowmore{
    height: 2.828dvw;
    width: 18dvw;
    background-color: #282827;
    display:inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "tt-autonomous", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 1.8dvw;
    vertical-align: middle;
    color: #e5e5e4;
    padding-top: 4.27px;
   
   
    /* for fonts */
}
.landingpage .main .text .txtbox .buttons a .knowmore:hover ,.landingpage .main .text .txtbox .buttons .contactus:hover{
    transition: all 0.4s ease-in-out;
    background-color:  #e8bf29;
    color: #e5e5e4;
    cursor:pointer;
    caret-color: #282827;
}
.landingpage .main .picture {
    height: 89.4vh;
    position: relative;
}

.landingpage .main .picture .jcb {
    position: absolute;
    bottom: 0;
    right: 0;
    height:42.26dvw;
    width: 34.4dvw;
}

.landingpage .main .picture .jcb img {
    position: absolute;
    bottom: -3px;
    right: 0;
    height:100%;
    width: 100%;
    object-position: center;
    object-fit: contain;
    transition: all 0.5 ease;
    z-index: -10;
}
/*WHY US PAGE */
.whyuscontainer{
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    background-color: #e8bf29;
    overflow: hidden;
    position: relative;
    transition: all 0.4s ease ;
}

.whyuscontainer img{
    position: absolute;
    height: 100vh;
    width: 100%;
    object-position:  100% 10%;
    bottom: 0;
    
}
.whyuscontainer .whyustxt{
    position: absolute;
    top: 0;
    height:37dvw;
    width: 64.4dvw;
    display: flex;
    flex-direction: column;
    align-items: left;
    transition: all 0.5s ease;

    
}
.whyuscontainer .whyustxt h2{
    font-size: 8dvw;
    color:#282827;
    font-display:auto;
    font-style:normal;
    font-weight:600;
    font-stretch:normal;
    font-family: "tt-autonomous";
    margin-left:1dvw;
    margin-top: 1.3dvw;
   width: 61.3dvw;
}
.whyuscontainer .whyustxt h2 b{
    font-size: 8dvw;
    font-weight: 600;
}
.whyuscontainer .whyustxt p{
    height: fit-content;
    width: 46dvw;
    font-size:1.1dvw;
    color:#282827;
    font-display:auto;
    font-style:normal;
    font-weight:200;
    font-stretch:normal;
    font-family: "tt-autonomous";
    margin-left:1.5dvw;
    word-wrap: break-word;
    line-height: 1.69dvw;
    margin-top: 0dvw;
    
}
/*whyus background animation*/
.whyuscontainer img.animate{
    animation: background 1.4s ease ;
}
@keyframes background {
    from{
       bottom: -800px;
    }
    to{
        bottom: 0;
    }
    
}
/*about us*/
.aboutus{
    position: relative;
    height: 100vh;
    width: 100%;
    background-color: #191919;
    background-image: url(pictures/newpattern.png);
    background-position: 40% 50%;
    background-size: 133%;
    display: grid;
    grid-template-columns: 50% 50%;
    overflow: hidden;
   
}
.aboutus .image{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    justify-content: space-between;
   height: 100%;
}

.aboutus .image .rect1{
    height: 4.79dvw;
    width: 100%;
    background-image: url(pictures/Rectangle\ 28.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.aboutus .image .rect2{
    height: 4.79dvw;
    width: 100%;
    background-image: url(pictures/Rectangle\ 28-1.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.aboutus .image .logo{
    height: 20dvw;
    width: 20dvw;
    background-image: url(icons/kalorengineer.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}
.aboutus .image p{
    font-family:"tt-autonomous";
    font-display:auto;
    font-style:normal;
    font-weight:600;
    font-stretch:normal;
    font-size: 3.4dvw;
    position: relative;
}
.aboutus .text{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
}
.aboutus .text p{
    width: 43dvw;
    height: fit-content;
    word-break: keep-all;
    font-family:"tt-autonomous";
    font-display:auto;
    font-style:normal;
    font-weight:100;
    font-stretch:normal;
    line-height: 1.9dvw;
    font-size: 1.2dvw;
    text-align:justify;
    text-justify:inter-word;
} 
.aboutus .text a{
    height: 3.78dvw;
    width: 19dvw;
    text-decoration: none;
    border-radius: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    
}
.aboutus .text .buttons{
    height: 3.78dvw;
    width: 43dvw;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4.5dvw;
}
.aboutus .text .button{
    position:relative;
    height: 3.78dvw;
    width: 19dvw;
    background-color: #e5e5e4;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #282827;
    font-size: 1.5dvw;
    font-family:"tt-autonomous";
    font-display:auto;
    font-style:normal;
    font-weight:900;
    font-stretch:normal;
    transition: all 0.4s ease-in-out;
}
.aboutus .text a #knowmore{
    background-color: #282827;
    color: #e5e5e4;
}
.aboutus .text a #testimony:hover,.aboutus .text a #knowmore:hover{
    background-color:  #e8bf29;
    color: #e5e5e4;
}
/*projects page*/
.projects{
    position: relative;
    width: 100%;
    height: 100vh;
    background: #f5f5f5;
   overflow: hidden;

}

.projects .slide .item{
    width:13dvw;
    height: 15dvw;
    position: absolute;
    bottom: -5.67dvw;
    transform: translate(0, -50%);
    border-radius: 1.2dvw;
    box-shadow: 0 20px 40px #000000c7;
    background-position: 20% 50%;
    background-size: cover;
    display: inline-block;
    transition: 0.5s;
   
}

.projects .slide .item:nth-child(1),
.projects .slide .item:nth-child(2){
    bottom: 0;
    left: 0;
    transform: translate(0, 0);
    border-radius: 0;
    width: 100%;
    height: 100%;
    background-position: 50% 50%;
   
}

.projects .slide .item:nth-child(3){
    left: 50dvw;
    right: 10dvw;
}
.projects .slide .item:nth-child(4){
    left: calc(50dvw + 16%);
    right: 10dvw;
}
.projects .slide .item:nth-child(5){
    left: calc(50dvw + 32%);
    right: 10dvw;
}




/* here n = 0, 1, 2, 3,... */
.projects .slide .item:nth-child(n + 6){
    left: calc(50dvw + 64%);
    opacity: 0;
}



.projects .item .content{
    position: absolute;
    top: 20dvw;
    right: 4dvw;
    width: 43dvw;
    text-align: left;
    color: #e5e5e4;
    transform: translate(0, -50%);
    font-family: system-ui;
    display: none;
    height: 40dvw;
    
}


.projects .slide .item:nth-child(2) .content{
    display: block;
}


.projects .content .name{
    position: static;
    margin-top:2.7dvw;
    font-size:3.7dvw;
    line-height: 4.3dvw;
    font-family:"tt-autonomous-outline";
    text-transform: uppercase;
    font-display:auto;
    font-style:normal;
    font-weight:900;
    font-stretch:normal;
    opacity: 0;
    animation: animate 1s ease-in-out 1 forwards;
    width: fit-content;
    
}

.projects .content .des{
    position: static;
    margin-top:2dvw;
    opacity: 0;
    animation: animate 1s ease-in-out 0.3s 1 forwards;
    font-family:"tt-autonomous";
    font-display:auto;
    font-style:normal;
    font-weight:300;
    font-stretch:normal;
    font-size:1.5dvw;
    line-height: 2dvw;
    width: 40dvw;
    height: fit-content;
    
}




@keyframes animate {
    from{
        opacity: 0;
        transform: translate(0, 100px);
        filter: blur(33px);
    }

    to{
        opacity: 1;
        transform: translate(0);
        filter: blur(0);
    }
}



.projects .button{
    width: fit-content;
    text-align: center;
    position: absolute;
    bottom: 7dvw;
    left:10dvw;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4dvw;
}

.projects .button button{
    width:4.5dvw;
    height: 4.5dvw;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    margin: 0 5px;
    background-color: #e5e5e4;
    transition: 0.3s;
   
}
.projects .button button i{
    color: #282828;
    font-size: 1.5dvw;
    font-weight: 900;
}

.projects .button button:hover{
    background: #b4b4b4;
    
}
/*main service page */
.mainservices{
       height: 100vh;
       width:100%;
       background-color: #191919;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       overflow: hidden;
}
.mainservices nav{
    height: 12%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.mainservices nav h2{
    align-self: center;
    justify-self: center;
    font-size: 4.5dvw;
    font-family:"tt-autonomous";
    font-display:auto;
    font-style:normal;
    font-weight:800;
    font-stretch:normal;
    height: fit-content;
}
.mainservices nav .bar{
    height: 0.41dvw;
    width: 13dvw;
    background-color: #E8BF29;
    position: relative;
    top: 4%;
}
.mainservices footer{
    height:88%;
    width:100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
}
.mainservices footer .content:nth-child(n){
       width:31dvw;
       height: 15dvw;
       display: flex;
       align-items: top;
       justify-content:left;
       gap:1.6dvw;       
}
.mainservices footer .content .pic{
    height:5.6dvw;
    width:5.6dvw;
    border-radius: 50%;
    background-color: #e8bf29;
    margin-top: 0.8dvw;
    transition: all 0.2s ease;
}
.mainservices footer .content .pic:hover{
    background-color: #e5e5e4;
}

.mainservices footer .content #pic1{
    background-image: url(icons/construction_black.png);
    background-size: 60% 60%;
    background-position: center;
    background-repeat: no-repeat;
}
.mainservices footer .content #pic2{
    background-image: url(icons/architectural_black.png);
     background-size: 60% 60%;
    background-position: center;
    background-repeat: no-repeat;
}
.mainservices footer .content #pic3{
    background-image: url(icons/electric-tower_black.png);
     background-size: 60% 60%;
    background-position: center;
    background-repeat: no-repeat;
}
.mainservices footer .content #pic4{
    background-image: url(icons/home-repair_black.png);
     background-size: 70% 70%;
    background-position: center;
    background-repeat: no-repeat;
}
.mainservices footer .content #pic5{
    background-image: url(icons/contract_black.png);
     background-size: 65% 65%;
    background-position: center;
    background-repeat: no-repeat;
}
.mainservices footer .content #pic6{
    background-image: url(icons/bank_black.png);
     background-size: 60% 60%;
    background-position: center;
    background-repeat: no-repeat;
}
.mainservices footer .content aside{
    height: 100%;
    width:24dvw;
    display:flex;
    flex-direction: column;
    justify-content: space-between;
}
.mainservices footer .content aside h1,.mainservices footer .content aside h2{
    height: auto;
    font-size: 1.3dvw;
    font-family:"tt-autonomous";
    line-height: 2dvw;
    margin-top: 0.6dvw;
}
.mainservices footer .content aside p{
    height:fit-content;
    width:22dvw;
    font-size:1.1dvw;
    font-family:"tt-autonomous";
    font-display:auto;
    font-style:normal;
    font-weight:200;
    font-stretch:normal;
    padding-left:5px;
    line-height: 1.8dvw; 
    margin-top: 2%;
}
.mainservices footer .content:nth-child(1) aside p{
    margin-top: 7%;
}
.mainservices footer .content:nth-child(4) aside p{
    margin-top: 7%;
}
/*review page*/
.reviews{
    height: 100vh;
    width: 100%;
    background-color: #E8BF29;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4.5dvw;
    overflow:hidden;
}
.reviews .reviewbox:nth-child(n){
    height: 32dvw;
    width: 28dvw;
    background-color: #191919;
    border-radius: 2dvw;
    box-shadow: -20px 16px 25px rgba(0,0,0,0.77);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease;
}
.reviews .reviewbox header{
    height:20%;
    width: 100%;
    display: flex;
    align-items:end;
    justify-content: center;
    font-size: 3.6dvw;
    font-family:AoboshiOne-Regular;
    
}
.reviews .reviewbox footer{
    height:80%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: left;
}
.reviews .reviewbox footer p:nth-child(1){
    font-size: 1dvw;
    font-family:"tt-autonomous";
    font-display:auto;
    font-style:normal;
    font-weight:200;
    font-stretch:normal;
    line-height: 1.6dvw;
    height:24dvw;
    width: 25dvw;
    margin-top: 1.4dvw;
    margin-left: 1.7dvw;
}
.reviews .reviewbox footer p:nth-child(2){
    font-size: 1dvw;
    font-family:"tt-autonomous";
    font-display:auto;
    font-style:normal;
    font-weight:200;
    font-stretch:normal;
    line-height: 1.6dvw;
     margin-top: 1dvw;
     margin-bottom: 1dvw;
     margin-left: 3dvw;
}
.reviews .reviewbox footer p b{
    font-size: 1dvw;
}
.reviews .reviewbox:hover{
    scale:1.2;
    
} 

.reviews .reviewbox:nth-child(n).animate{
      animation: grow 1s ease;
}
.reviews.animate{
    animation: gap 1s ease;
}

@keyframes grow {
    from{
        scale: 0;
    }
    to{scale:1;}
    50%{
        scale:1.1;
    }
   
}

@keyframes gap{
    from{
        background-color: #e5e5e4;
        gap: 3.6dvw;
    }
    to{
        gap: 4.5dvw;
    }
    55%{
        gap: 3.5dvw;
    }
}

/*contactus page*/
.contactus{
    height: 100vh;
    width:100%;
    background-color: #191919;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow:hidden;
}
.contactus header{
    height: 98.1%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.contactus header .alldetails{
    height: 95%;
    width: 95%;
    display: grid;
    grid-template-columns: 50% 50%;
    background-color: #e5e5e4;
}
.contactus header .alldetails .mapping{
    display: flex;
    flex-direction: column;
    align-items:left;
    height:fit-content; 
    gap:3dvw;
    height: 100%;
}
.contactus header .alldetails .mapping h2{
    font-size: 3.89dvw;
    font-family:"tt-autonomous";
    font-display:auto;
    font-style:normal;
    font-weight:700;
    font-stretch:normal;
    color: #282827;
    margin-left: 3dvw;
    margin-top: 6dvw;
   
}
.contactus header .mapping .map{
    height:25dvw;
    width: 44.5dvw;
    border: 1px solid black;
    margin-left: 3dvw;
    margin-bottom:176px ;
}
.contactus header .details{
   height:100%;
   display: flex;
   flex-direction: column;
   align-items: left;
   gap: 3.56dvw;
}

.contactus header .details .logo{
    height: 8dvw;
    width:39.8dvw;
    background-image: url(pictures/blacklogo.png);
    background-position: center;
    background-size: cover;
    margin-top: 6.8dvw;
    margin-left:-2dvw;
}
.contactus header .details section{
    height: fit-content;
    width: 37.3dvw;
    display: flex;
    flex-direction: column;
    align-items: top;
    justify-content: left;
    margin-left:-4.1dvw;
}
.contactus header .details section p{
    color: #282827;
    font-family:"tt-autonomous";
    font-display:auto;
    font-style:normal;
    font-weight:300;
    font-stretch:normal;
    font-size: 1.07dvw;
    line-height: 1.4dvw;
    
}
.contactus header .details section p:nth-child(3){
   margin-top: 1.1dvw;
   width:42dvw;
   height: 4.6dvw;
}
.contactus header .details section p:nth-child(4){
    margin-top: 1dvw;
}
.contactus header .details section p:nth-child(6){
    font-size: 1.07dvw;
    font-size: 1.1dvw;
}
.contactus footer{
    height: 1.9%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family:"tt-autonomous";
    font-display:auto;
    font-style:normal;
    font-weight:400;
    font-stretch:normal;
    font-size: 0.9dvw;
    background-color: #e8bf29;
    color: #282827;
}
}













@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (orientation: portrait)
  and (-webkit-min-device-pixel-ratio: 2)
    /* Styles for 12.9-inch iPad Pro (Portrait) */

  {

        html{
            overflow-x: hidden;
         }
    
        * {
            padding: 0;
            margin: 0;
            color: #e5e5e4;
            box-sizing: border-box;
        }
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content:center;
            min-height: fit-content;
            max-height: 700vh;
            scroll-snap-type: y mandatory;
            width: 100%;
            overflow-x: hidden;
            background-repeat:  no-repeat;
        }
        /* LANDING PAGE */
        .container {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 70vh;
            width: 100%;
            background-image: url(pictures/background.png);
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            overflow: hidden;
            position: relative;
        }
        
        .saturation {
            height:70vh;
            width: 47dvw;
            position:absolute;
            right: 0;
            overflow: hidden;
        }
        
        .saturation img {
            height: 100%;
            width: 47dvw;
            object-position: center;
            transition: all 0.5 ease-in-out;
            position: absolute;
            right: 0;
            overflow: hidden;
        }
        
        .landingpage {
            position: relative;
            height: 70vh;
            width: 100%;
            display: grid;
            grid-template-rows: 10.6% 89.4%;
            z-index: 12;
        }
        
        .landingpage .nav {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            
        }
        
        .landingpage .nav ul {
            height: 18px;
            width: 50dvw;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 5dvw;
            margin-top: -7px;
            font-family: "tt-autonomous";
            font-weight: 500;
            font-style: normal;
            font-size: 2dvw;
          margin-right: 3dvw;
            
        }
        .landingpage  ul a {
         text-decoration: none;
        }
        /* Navbar List Items */
        .landingpage .nav ul li {
            position: relative;
            list-style: none;
            cursor: pointer;
            padding: 13px 0; /* Add some padding for better click area */
            color: #e5e5e4;
        }
        
        .landingpage .nav ul li::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 0px;
            background-color: #e8bd3f;
            transition: all 0.3s ease-in-out;
        }
        
        .landingpage .nav ul li:hover::after {
            width: 100%;
        }
        
        .landingpage .nav .logo {
            height: 4.67dvw;
            width: 30.67dvw;
            margin-top: -3px;
            background-image: url(pictures/Logo.png);
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            margin-left: 1.3dvw;
           
        }
        
        .landingpage .main {
            display: grid;
            grid-template-columns: 50% 50%;
            position: relative;
        }
        
        .landingpage .main .text .txtbox {
            position: relative;
            top: 15dvw;
            left: 4dvw;
            width: 60dvw;
            height: 57dvw;
            display: flex;
            flex-direction: column;
            gap: 0;
            
        }
        
        .landingpage .main .text .txtbox #ready {
            width: 48dvw;
            font-family: "tt-autonomous";
            font-weight: 700;
            font-style: normal;
            font-size: 6.0dvw;
            color: #e5e5e4;
           
            /* for fonts */
        }
        
        .landingpage .main .text .txtbox h3 {
            width: 65dvw;
            font-family: "tt-autonomous-outline";
            font-weight: 900;
            font-style: normal;
            font-size: 5dvw;
            line-height: 6.2dvw;
            
            
            /* for fonts */
        }
        .landingpage .main .text .txtbox h3 b{
            font-family: "tt-autonomous-outline";
            font-weight: 900;
            font-style: normal;
            font-size: 5dvw;
        }
        .landingpage .main .text .txtbox #reality {
            width:50dvw;
            height: fit-content;
            font-family: "tt-autonomous";
            font-weight: 700;
            font-style: normal;
            font-size: 6.7dvw;
            color: #e8bf29;
    
            
            
            /* for fonts */
        }
        
        .landingpage .main .text .txtbox  .buttons {
            height:24dvw;
            width: 23dvw;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            gap: 5dvw;
            margin-bottom: 80px;
            margin-left: 8px;
            
        }
        
        .landingpage .main .text .txtbox .buttons a .contactus {
            vertical-align: middle;
            height:8dvw;
            width: 23dvw;
            text-decoration: none;
            color: #282827;
            font-size: 2.4dvw;
            display: inline-flex;
            align-items: center;
            justify-content: center;
           
        }
        .landingpage .main .text .txtbox .buttons a .knowmore {
            text-decoration: none;
            padding-top: 4.27px;
            vertical-align: middle;
            height:8dvw;
            width: 23dvw;
            text-decoration: none;
            color: #e5e5e5;
            font-size: 2.4dvw;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            
        }
        .landingpage .main .text .txtbox .buttons a {
            height:8dvw;
            width: 23dvw;
            display:flex;
            align-items: center;
            justify-content: center;
            font-family: "tt-autonomous", sans-serif;
            font-weight: 700;
            font-style: normal;
            vertical-align: middle;
            color: #e5e5e4;
            padding-top: 4.27px;
            padding-bottom: 5px;
            font-size: 2.7dvw;
            position: relative;
            z-index: 100;
            
        }
        .landingpage .main .text .txtbox .buttons a .contactus :hover, .landingpage .main .text .txtbox .buttons a .knowmore:hover{
            background-color: #e8bf29;
        }
    
        .landingpage .main .picture {
            height:100%;
            width: 100%;
            position: absolute;
        }
        
        .landingpage .main .picture .jcb {
            position: absolute;
            height: 58.4dvw;
            width: 57.3dvw;
            bottom: 0px;
            right: -1px;
            min-height:150px;
            min-width: 122.48px;
            
        }
        
        .landingpage .main .picture .jcb img {
            position:absolute;
            right: -0px;
            height: 54.2dvw;
            width: 57.3dvw;
            object-position: 90% 50%;
            object-fit:contain;
            transition: all 0.5 ease;
            z-index: -10;
            bottom: 0px;
            max-width: 80%;
            max-height: 85%;
            min-height:150px;
            min-width: 122.48px;
        }
        /*WHY US PAGE */
        .whyuscontainer{
            display: flex;
            flex-direction: column;
            height: 80vh;
            width: 100%;
            background-color: #e8bf29;
            overflow: hidden;
            position: relative;
            transition: all 0.4s ease ;
        }
        
        .whyuscontainer img{
            position: absolute;
            height: 100%;
            width: 100%;
            object-position: 0% 50%;
            object-fit: cover;
            bottom: 0;
              
        }
        .whyuscontainer .whyustxt{
            position: absolute;
            top: 10px;
            height:60dvw;
            width:70%;
            display: flex;
            flex-direction: column;
            align-items: left;
            justify-content: left;
            transition: all 0.5s ease;
            left: 10px;
           
        }
        .whyuscontainer .whyustxt h2{
            font-size: 9dvw;
            width: 100%;
            color:#282827;
            font-display:auto;
            font-style:normal;
            font-weight:800;
            font-stretch:normal;
            font-family: "tt-autonomous";
            position: relative;
            left: -2dvw;
        }
        .whyuscontainer .whyustxt p{
            height: fit-content;
            width: 70dvw;
            font-size:1.89dvw;
            color:#282827;
            font-display:auto;
            font-style:normal;
            font-weight:400;
            font-stretch:normal;
            font-family: "tt-autonomous";
            word-break: break-all;
           line-height: 2.9dvw;
            text-align: left;
            position: relative;
            left: -1dvw;
            top: -1dvw;
            word-break: keep-all;
        }
       
        /*about us*/
        .aboutus{
            position: relative;
            height: 60vh;
            width: 100%;
            background-color: #191919;
            background-image: url(pictures/newpattern.png);
            background-position: 30% 70%;
            background-size: 100%;
            display: grid;
            grid-template-columns: 45% 55%;
            overflow: hidden;  
        }
        .aboutus .image{
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            justify-content: space-between;
            overflow:visible;
        }
        
        .aboutus .image .rect1{
            display: visible;
            height: 4.2dvw;
            width: 100%;
            background-image: url(pictures/Rectangle\ 28.png);
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
        }
        .aboutus .image .rect2{
            display: visible;
            height: 4.2dvw;
            width: 100%;
            background-image: url(pictures/Rectangle\ 28-1.png);
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
        }
        .aboutus .image .logo{
            height: 25dvw;
            width: 25dvw;
            background-image: url(icons/kalorengineer.png);
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
            margin-top: -5dvw;
            
        }
            
            
            
        .aboutus .image p{
            font-family:"tt-autonomous";
            font-display:auto;
            font-style:normal;
            font-weight:400;
            font-stretch:normal;
            font-size:4.2dvw;
            margin-top: -8.5dvw;
    
            
            
            
        }
        .aboutus .image p b{
            font-weight: 400;
        }
        .aboutus .text{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 10px;
            font-weight:200;
           
        }
        .aboutus .text p{
            width: 95%;
            height: fit-content;
            font-family:"tt-autonomous";
            word-break: break-all;
            font-display:auto;
            font-style:normal;
            font-weight:300;
            font-stretch:normal;
            font-size:1.56dvw;
            text-align:left;
            line-height: 2.5dvw;
            text-align: justify;
            word-break: keep-all;
            position: relative;
            left: -6px;
        } 
        .aboutus .text a{
            height: 4.8dvw;
            width: 19dvw;
            text-decoration: none;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            font-size: 1.3dvw;
        }
        .aboutus .text .buttons{
            margin-top: 5px;
            height: 4.8dvw;
            width: 30dvw;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12dvw;
        }
        .aboutus .text .button{
            position:relative;
            height: 4.8dvw;
            width: 19dvw;
            background-color: #e5e5e4;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #282827;
            font-size: 1.9dvw;
            font-family:"tt-autonomous";
            font-display:auto;
            font-style:normal;
            font-weight:500;
            font-stretch:normal;
            transition: all 0.4s ease-in-out;
            padding-top: 4px;
        }
        .aboutus .text #knowmore{
            background-color: #282827;
            color: #e5e5e4;
            width: 18dvw;
        }
        /*projects page*/
        .projects{
            position: relative;
            width: 100%;
            height:62vh;
            background: #f5f5f5;
            overflow: hidden;
        
        }
        
        .projects .slide .item{
            width: 14dvw;
            height: 20dvw;
            position: absolute;
            bottom: -8dvw;
            transform: translate(0, -50%);
            border-radius: 10px;
            box-shadow: 0 20px 40px #000000c7;
            background-position: 20% 50%;
            background-size: cover;
            display: inline-block;
            transition: 0.5s;
           
        }
        
        .projects .slide .item:nth-child(1),
        .projects .slide .item:nth-child(2){
            bottom: 0;
            left: 0;
            transform: translate(0, 0);
            border-radius: 0;
            width: 100%;
            height: 100%;
            background-position: 50% 50%;
           
        }
        
        .projects .slide .item:nth-child(3){
            left: 45dvw;
            right: 20dvw;
        }
        .projects .slide .item:nth-child(4){
            left: calc(45dvw + 19%);
            right: 20dvw;
        }
        .projects .slide .item:nth-child(5){
            left: calc(45dvw + 38%);
            right: 20dvw;
        }
        
        
        /* here n = 0, 1, 2, 3,... */
        .projects .slide .item:nth-child(n + 6){
            left: calc(22dvw + 280px);
            opacity: 0;
        }
        
        
        
        .projects .item .content{
            position: absolute;
            top: 24%;
            left: 26%;
            width: 300px;
            text-align: left;
            color: #e5e5e4;
            transform: translate(0, -50%);
            font-family: system-ui;
            display: none;
           
            
        }
        
        
        .projects .slide .item:nth-child(2) .content{
            display: block;
        }
        
        
        .projects .content .name{
            position: relative;
             left: 21dvw; 
             top: 5dvw;
            font-size: 6dvw;
            font-family:"tt-autonomous-outline";
            text-transform: uppercase;
            font-display:auto;
            font-style:normal;
            font-weight:900;
            font-stretch:normal;
            opacity: 0;
            animation: animate 1s ease-in-out 1 forwards;
            width: 55dvw;
            color: #f5f5f5;
           
        }
        
        .projects .content .des{
            position: relative;
            left: 21.2dvw;
            top: 5dvw;
            margin-top: 2dvw;
            opacity: 0;
            animation: animate 1s ease-in-out 0.3s 1 forwards;
            font-family:"tt-autonomous";
            font-display:auto;
            font-style:normal;
            font-weight:200;
            font-stretch:normal;
            font-size:2.2dvw;
            line-height: 3.3dvw;
            color: #f5f5f5;
            width: 57dvw;
        }
        
        
        
        
        @keyframes animate {
            from{
                opacity: 0;
                transform: translate(0, 100px);
                filter: blur(33px);
            }
        
            to{
                opacity: 1;
                transform: translate(0);
                filter: blur(0);
            }
        }
        
        
        
        .projects .button{
            width: fit-content;
            text-align: center;
            position: absolute;
            bottom: 35px;
            left:17px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
        }
        
        .projects .button button{
            width: 9dvw;
            height: 9vw;
            border-radius: 50%;
            border: none;
            cursor: pointer;
            margin: 0 5px;
            background-color: #e5e5e4;
            transition: 0.3s;
           
        }
        .projects .button button i{
            color: #282828;
            font-size:1.2rem;
            font-weight: 900;
        }
        
        .projects .button button:hover{
            background: #b4b4b4;
            
        }
        /*main service page */
        .mainservices{
               height:fit-content;
               width:100%;
               background-color: #191919;
               display: flex;
               flex-direction: column;
               align-items: center;
               justify-content: center;
               overflow: hidden;
               
        }
        .mainservices nav{
            height: 12%;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            
        }
        .mainservices nav h2{
            align-self: center;
            justify-self: center;
            font-size: 7dvw;
            font-family:"tt-autonomous";
            font-display:auto;
            font-style:normal;
            font-weight:800;
            font-stretch:normal;
            margin-top: 4dvw;
        
        }
        .mainservices nav .bar{
            height: 2px;
            width: 20dvw;
            background-color: #E8BF29;
            position: relative;
            top: 9px;
        }
        .mainservices footer{
            position: relative;
            bottom: 5px;
            height:88%;
            width:100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content:center;
            gap: 3dvw;
        }
        .mainservices footer .content:nth-child(n){
            position: relative;
               height: 20dvw;
               display: flex;
               align-items: top;
               justify-content:center;
               gap:2dvw;
               left: 2dvw;
               top: -3dvw;
               width: 100%;
             
               
        }
        .mainservices footer .content:nth-child(1){
            margin-top: 6dvw;
        }
        .mainservices footer .content .pic{
            position: relative;
            top:0dvw;
            height: 9dvw;
            width: 9dvw;
            border-radius: 50%;
            background-color: #e8bf29;
            transition: all 0.2s ease;
            
        }
        .mainservices footer .content .pic:hover{
            background-color: #e5e5e4;
        }
        
        .mainservices footer .content #pic1{
            background-image: url(icons/construction_black.png);
            background-size: 60% 60%;
            background-position: center;
            background-repeat: no-repeat;
        }
        .mainservices footer .content #pic2{
            background-image: url(icons/architectural_black.png);
             background-size: 60% 60%;
            background-position: center;
            background-repeat: no-repeat;
        }
        .mainservices footer .content #pic3{
            background-image: url(icons/electric-tower_black.png);
             background-size: 60% 60%;
            background-position: center;
            background-repeat: no-repeat;
        }
        .mainservices footer .content #pic4{
            background-image: url(icons/home-repair_black.png);
             background-size: 70% 70%;
            background-position: center;
            background-repeat: no-repeat;
        }
        .mainservices footer .content #pic5{
            background-image: url(icons/contract_black.png);
             background-size: 65% 65%;
            background-position: center;
            background-repeat: no-repeat;
        }
        .mainservices footer .content #pic6{
            background-image: url(icons/bank_black.png);
             background-size: 60% 60%;
            background-position: center;
            background-repeat: no-repeat;
        }
        .mainservices footer .content aside{
            height: 100%;
            width:80%;
            display:flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .mainservices footer .content aside h1,.mainservices footer .content aside h2{
            height: auto;
            font-size:3.5dvw;
            font-family:"tt-autonomous";
            line-height: 4.5dvw;
            margin-top: 1dvw;
            
        }
        .mainservices footer .content aside p{
            height:fit-content;
            width: 90%;
            font-size: 2.4dvw;
            font-family:"tt-autonomous";
            font-display:auto;
            font-style:normal;
            font-weight:200;
            padding-left:0.8dvw;
            margin-top: 0.5dvw;
            line-height: 3dvw;
            
        }
        
        /*review page*/
        .reviews{
            height: 120vw;
            width: 100%;
            background-color: #E8BF29;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0dvw;
            position: relative;
            overflow:hidden;
        }
        .reviews .reviewbox:nth-child(n){
            height: 45dvw;
            width: 40dvw;
            background-color: #191919;
            border-radius: 20px;
            box-shadow: -20px 16px 30px rgba(0,0,0,0.77);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            transition: all 0.5s ease;
        }
        .reviews .reviewbox header{
            height: 12%;
            width: 100%;
            display: flex;
            align-items:end;
            justify-content: center;
            font-size: 7.2dvw;
            font-family:AoboshiOne-Regular;
            padding-top:10dvw;
            
           
        }
        .reviews .reviewbox footer{
            height: 88%;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: left;
            
        }
        .reviews .reviewbox footer p:nth-child(1){
            font-size:2.0dvw;
            font-family:"tt-autonomous";
            font-display:auto;
            font-style:normal;
            font-weight:200;
            font-stretch:normal;
            line-height: 2.8dvw;
            height:fit-content;
            width: 34dvw;
            margin-top: 0dvw;
            margin-left:3dvw;
            
        }
        .reviews .reviewbox footer p:nth-child(2){
            font-size:2.0dvw;
            font-family:"tt-autonomous";
            font-display:auto;
            font-style:normal;
            font-weight:200;
            font-stretch:normal;
            line-height: 3dvw;
             margin-top: 10px;
             margin-left:4dvw;
             
        }
        .reviews .reviewbox footer p b{
            font-size:2.0dvw;
        }
        .reviews .reviewbox:hover{
            scale:1;
            
        } 
        
        .reviews .reviewbox:nth-child(n).animate{
              animation: grow 1s ease;
        }
        .reviews.animate{
            animation: gap 1s ease;
        }
        
        @keyframes grow {
            from{
                scale: 0;
            }
            to{scale:1;}
            50%{
                scale:1.1;
               
            }
           
        }
        
        @keyframes gap{
            from{
                background-color: #e5e5e4;
                gap: 1dvw;
            }
            to{
                gap: 1.6dvw;
            }
            55%{gap: 1.2dvw;}
        }
        
        .reviews .reviewbox:nth-child(1){
            position: absolute;
            top: 10dvw;
            left: 7%;
            z-index: 1;
        }
        .reviews .reviewbox:nth-child(2){
            position: absolute;
            left: 7%;
            top: 65dvw;
            bottom: 3dvw;
            z-index: 1;
        }
        .reviews .reviewbox:nth-child(3){
            position: absolute;
            right: 6%;
            z-index: 1;
        }
    
    
        /*contactus page*/
        .contactus{
            height: 105vh;
            width:100%;
            background-color: #191919;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow:hidden;
        }
        .contactus header{
            height: 98%;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            
        }
        .contactus header .alldetails{
            height:95%;
            width: 95%;
            display: flex;
            flex-direction: column;
            align-items: left;
            justify-content: left;
            background-color: #e5e5e4;
        }
        .contactus header .alldetails .mapping{
            height: 45%;
            display: flex;
            flex-direction: column;
            align-items:center;
            
    
    
            
        }
        .contactus header .alldetails .mapping h2{
            font-size: 7.5dvw;
            font-family:"tt-autonomous";
            font-display:auto;
            font-style:normal;
            font-weight:700;
            font-stretch:normal;
            color: #282827;
            margin-left: 0dvw;
            margin-top: 1.6dvw;
            height: auto;
            width: 100dvw;
            text-align: center;
           
        }
        .contactus header .mapping .map{
            position: absolute;
            height:40dvw;
            width: 90%;
            border: 1px solid black;
            margin-left: 0dvw;
            margin-top:3px ;
            top: 13dvw;
        }
        .contactus header .details{
            position: relative;
           height: 55%;
           display: flex;
           flex-direction: column;
           align-items: center;
        }
        
        .contactus header .details .logo{
            height: 13.23dvw;
            width: 67.57dvw;
            background-image: url(pictures/blacklogo.png);
            background-position: center;
            background-size: cover;
            position: absolute;
            align-self: center;
            top: -60px;
            left: 14vw;
            
        }
        .contactus header .details section{
            height: fit-content;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: top;
            justify-content: left;
        }
        .contactus header .details section p{
            color: #282827;
            font-family:"tt-autonomous";
            font-display:auto;
            font-style:normal;
            font-weight:300;
            font-stretch:normal;
            font-size: 2.5dvw;
            line-height: 3.4dvw;
            width: 100dvw;
            margin-left: 25px;
        }
        .contactus header .details section p:nth-child(1){
            margin-top: 20dvw;
        }
        .contactus header .details section p:nth-child(3){
            margin-top: 1dvw;
           width:90dvw;
           height: auto;
        }
        .contactus header .details section p:nth-child(4){
            margin-top: 1.2dvw;
            width:90dvw;
            height: auto;
        }
        .contactus header .details section p:nth-child(6){
            margin-top: 3dvw;
            font-size: 2.5dvw;
        }
        .contactus footer{
            height: 2%;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family:"tt-autonomous";
            font-display:auto;
            font-style:normal;
            font-weight:400;
            font-stretch:normal;
            font-size: 1dvw;
        }
  }