body {
    font-family: 'Poppins';

}

/*Navbar styles */

.logo {
    width: 80px;
}
.navbar-collapse {
    font-size: 20px;
}
.navbar-nav {
    margin-left: auto; /* Pushes navbar items to the right */
}
.nav-item {
    padding-left: 1rem; /* Adjust as needed */
    padding-right: 1rem; /* Adjust as needed */
    font-size:16px;
   
}

.nav-link{
    color:black; 
}

/*.carousel-inner{
     height: 80vh;
}*/
.carousel-item img {
    height: 80vh;
 
}
.carousemain{
    position: relative;
}
.carouseheading{
    padding-bottom: 4%; 
    font-size: 22px;
}
.carouselsubtext{
    font-size: 14px;
     line-height: 28px; 
     text-align: justify;
}
.carouselbutton{
    background-color: #F48839; color: white;
    width:45%;font-size:14px;
}
.carouselbutton:hover{
    background-color: #F48839; color: white;
   
}
.intro{
    margin-bottom:-3.3% ;
}
.intromain{
    border:1px solid white;padding:2%;
}
.introheading{
    font-family:Bodoni MT Black;
    font-size:32px;
    line-height:40px;
    font-weight:bolder;
    color:#294995;
}
.introsubheading{
    font-size:30px;
    line-height:38px;
    font-weight:bolder;
    color:white;
}
.introsubcontent{
    color:white;
    font-size:14px;
    line-height:28px;
}
.justlaunchedbutton{
    background-color: #F48839; 
    color: white;
    font-size:16px;
    margin-left:10%;
}
.justlaunchedbutton:hover{
    background-color: #F48839; 
    color: white;
}
#carouselcontent{
    position: absolute; 
    top: 50%; right: 0; 
    transform: translateY(-50%);
     background-color: rgba(38, 50, 71, 0.9);
      color: white; width: 34%; padding: 4%;
     height:80vh;
}
.carousel-caption-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 15px; /* Adjust padding if needed */
    background: rgba(255, 255, 255, 0.7); /* Optional background for better readability */
}
.carousel-caption-content{
    //background-color:black;
    background-color:#263247;
    
    color:white;
    padding-left:8%;
}

.carousellocationtext
{
    font-size:18px;
    color:white;
    padding-right:2%;
}
/*.carouselsubtext{
        font-size:14px;
        width:70%;
      
}*/
.hometext{
    margin-top:15%;
    margin-left:8%;
    margin-bottom:8%;
    font-size:24px;
    font-weight: bolder;;
    line-height:32px;
}
.homebox{
    margin-left:9%;margin-right:0px;
    background-image: url('../images/toy.png');
}
.boxbackground{
    background-color:lightgray; height:230px;
}
.movebox{
    margin-left:10%;
}
.image-wrapper {
    position: relative;
    width: 100%;
    height: 400px; /* Set the height of the image */
}
.homeboxtext{
    text-align:center;margin-top:25%;font-size:45px;font-weight:1500px;
}
.homeboxsubtext{
    text-align:center;font-size:25px;margin-left:5%;
}

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

.justlaunched{
    background-color:black;color:white;
    margin-left:-12px;
}

.projectimage{
    width:100%;height:400px;
}
.overlay-triangle {
position: absolute;
top: 0;
right: 0;
width: 150px; /* Width of the triangle */
height: 400px; /* Height of the triangle */
background: black;
clip-path: polygon(0 100%, 100% 100%, 100% 0);

/* Creates a right triangle with the right-angle at the top-right */
}

/*Testimonial Part */
.height {
height: 100vh;
}

.card {
border: none;
cursor: pointer;
background-color:transparent;
color:white;
}


.ratings i {
color: orange;
}

.testimonial-list {
list-style: none;
padding: 0;
height:250px;
overflow-y: auto;
border:1px solid black;
box-shadow:0px 0px 15px gray;
  
}

.testimonial-list li {
cursor: pointer;
// transition: background-color 0.3s ease, color 0.3s ease;
padding: 3px;
border-radius: 5px;

}

.testimonial-list li.active {
color:black;
font-size:20px;
//background-image:url('asset/images/rec.png');
background-image: url('../images/rec.png');
background-repeat:no-repeat;
background-position:5px 10px;
padding-left:9px;
padding-top:15px;
}

.testimonial-content {
// transition: opacity 0.5s ease-in-out;

overflow-y: auto;
position: relative;
}

.testimonial-content.hidden {
opacity: 0;
display: none;
}

.testimonial-content.show {
opacity: 1;
display: block;
}

.testimonialbox{
    margin-left:3%;
    height:250px;
    border:1px solid black;
    box-shadow:0px 0px 15px gray;
    padding:1%;
    color:white;
}
.testimonialname{
    text-align:center;font-size:20px;
}

#footerpart
{
background-color: black;
color:white !important;
font-family: 'Poppins';
// height:300px;
    
}

.footerhomemenu
{
    color:white;text-decoration:none;
    padding-left:7%;
    font-size:16px;
    font-weight: bolder;
}
.footersecondpart
{
    color:white;
    text-decoration:none;
    font-size:16px;
    font-weight: bolder;
}
.footericon{
    border:2px solid gray;
    padding:2%;color:gray;
    font-size:30px;
    margin-right:2%;
}

/*about us styles */

#aboutus {
    position: relative;
    height: 110vh; /* Adjust the height as needed */
    background-image: url('../images/aboutusbanner.jpg'); /* Replace with your actual image path */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#aboutus::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 50%; /* Adjust the width to match the size of the triangle */
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 100%);
    clip-path: polygon(0 0, 100% 0, 0 100%);
    z-index: 1; /* Ensure the triangle is above the background image */
}

.content {
    position: relative;
    z-index: 2; /* Ensure content appears above the triangle */
    padding: 20px;
    color: white;
    display: flex;
    align-items: center;
    height: 100%;
    padding-left: 40px; /* Adjust the padding as needed */
}

.content h1 {
    font-size: 3rem; /* Adjust the font size as needed */
    margin-top: 15%;
}
.whatwedofirst
{
    background-image:url('../images/banner2.jpeg');
    background-size:100% 100%;
    
}

/* what we do section */
.stats-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 40px;
  //  background-image: url('https://img.freepik.com/free-photo/modern-city-building_1127-3391.jpg?size=626&ext=jpg&ga=GA1.2.916468271.1684154292&semt=sph');
   background-image:url('../images/banner2.jpeg');
    background-size: cover;
    background-position: center;
    width: 100%;
    height:450px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.stat-box {
    flex: 1;
    text-align: center;
   // padding: 2px;
    background-color: rgba(255, 255, 255, 0.9);
    margin: 7px;
   // border-radius: 10px;
    position: relative;
    overflow: hidden;
    height:390px;
    width:200px !important;
    padding-top:30px;
}

.stat-box h2 {
    font-size: 45px;
    color: transparent;
   // background-image: url('https://img.freepik.com/free-photo/modern-city-building_1127-3391.jpg?size=626&ext=jpg&ga=GA1.2.916468271.1684154292&semt=sph');
   background-image:url('../images/banner2.jpeg');
   
   background-size: cover;
    background-position: center;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stat-box p {
    //font-size: 2rem;
    font-size:25px;
    font-weight:bold;
    color: #333;
    margin: 20px 0 0 0;
    padding-left:2%;
    padding-right:2%;
    
}

/*overlay images */

.standardfontsize{
    font-size:14px;
    line-height:28px;
    text-align:justify;
}
    .overlay-text {
position: absolute;
top: 30px;
left: 11px;
background-color: lightgray;
color: black;
padding: 10px;
//font-size: 24px;
font-weight: bold;
text-align: left;
border:none;
// box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.overlay-text-index {
    position: absolute;
    top: 0px;
    left: 11px;
    background-color: lightgray;
    color: black;
   padding: 10px;
    font-size: 20px;
    font-weight: bold;
    text-align: left;
    border:none;
    // box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }
.maincolumn{
    position: relative;
}

.overlay-boxes{
    position: absolute; 
    bottom: -220px;
     left: 50%;
     transform: translateX(-50%);
     width: 100%; 
    justify-content: space-between;
}
.box{
    padding-left:5%;
}
.boxlayout{
    text-align:center;
    //border:1px solid black;
    height:400px;
    padding:1%;
    width:90%;
    box-shadow:8px 8px 5px lightgray; 
    background-color: white;
  
}
.readbutton{
    width:100px;
    background-color:#F48839;
    border:none;
   
    
}
.readtext{
    text-decoration:none;
 
    color:white;
    font-weight:bolder;
    font-size:16px;
}
.headingtext{
    color:#F48839;
    font-size:26px;
    font-weight:bolder;
}
.whatwedoimage
{
    width:100%;
    height:450px;
    box-shadow:15px 15px 10px gray;

}

/* Project styles */
#project {
    position: relative;
    height: 110vh; /* Adjust the height as needed */
    background-image: url('../images/projectbanner.jpg'); /* Replace with your actual image path */
    background-size: 100% 100%;
  //  background-position: center;
    background-repeat: no-repeat;
}

#project::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 50%; /* Adjust the width to match the size of the triangle */
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 100%);
    clip-path: polygon(0 0, 100% 0, 0 100%);
    z-index: 1; /* Ensure the triangle is above the background image */
}


.projectmainimage
{
    width:100%;height:400px;
}
.lineleft{
    margin-left:-100px;
}
.projectread{
    text-decoration:none;font-size:22px;color:black;
}
.lineright{
    position:absolute; 
    top:30px; 
    left:-150px;
     width:auto;
      height:auto;
}

#contactus {
    position: relative;
    height: 110vh; /* Adjust the height as needed */
    background-image: url('../images/contactusbanner.jpg'); /* Replace with your actual image path */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#contactus::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 50%; /* Adjust the width to match the size of the triangle */
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 100%);
    clip-path: polygon(0 0, 100% 0, 0 100%);
    z-index: 1; /* Ensure the triangle is above the background image */
}
.contactform
{
    height:60px;border-radius:0px;margin:2%;
}
.messageform{
    height:200px;
    border-radius:0px;
    margin:2%;
}
#space{
    padding:5%;
}
.marginspace{
    margin-left:10%;
}
.justlaunchedtext{
    margin-left:10%;padding-right:10%;
}
#mission{
    margin-top:300px;
}
.new{
    margin-top:-4%;
}
.slogam{
    text-align:center;
    font-family:Dancing Script;
    color:#F48839;
    font-weight:bolder;
}


/* relevant styles */
.img__wrap {
    position: relative;
    height: 300px;
    width: 360px;
    
  }
  
  .img__description_layer {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0, 0.6);
   color: #fff;
  // color: black;
   
    visibility: hidden;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
   transition: opacity .2s, visibility .2s;
  }
  
  .img__wrap:hover .img__description_layer {
    visibility: visible;
    opacity: 1;
  }
  
  .img__description {
    transition: .2s;
    transform: translateY(1em);
  }
  
  .img__wrap:hover .img__description {
    transform: translateY(0);
  }
  .ourprojects{
    background-image: url('../images/testinew.png'); 
    background-size:100% 100%;
    background-color: rgba(0,0,0, 0.6);
 
  }

  .introduction{
    background-image: url('../images/introductionbanner.png'); 
    background-size:100% 100%;
   // background-color: rgba(0,0,0, 0.6);
  // height:400px;
 
  }
/*
.teamimage{
    border:2px dotted grey; font-size:20px; 
    width:230px; height:230px; border-radius:50%;
     display:flex; justify-content:center; align-items:center;
     margin-left:20%;margin-top:-40%;padding-top:20%;

}

.teamimagenew{
  padding-top:30%;

}
*/ 

.teamimage{
    border:1px solid black;
    padding:4%;
    width:90%;
    height:350px;
    box-shadow:0px 0px 15px grey;
}
.leftspace{
    padding-left:2%;
}
.whychoosecontent{
    background-color:#263247;
    height:200px;
    padding:5%;
}
.creative{
    color:white;font-size:18px;padding-top:5%;
}
.subcreative{
    color:white;font-size:14px;padding-top:5%;
}
.improving{
    font-size:18px;padding-top:5%;
}
.subimproving{
    font-size:14px;padding-top:5%;
}
.choosesection{
    height:400px;padding:0 !important;
}
.chooseimage{
    width:100%;height:100%;
}
.chooserightsection{
    height:200px;padding:5%;
}
.why{
    text-align:right;font-size:20px;
}
.choose{
    text-align:right;
    font-size:24px;
    font-weight:bolder;
}
.choosecontent{
    text-align:right;
    font-size:14px;
    line-height:20px;
}
.honest{
    background-color:#263247;
    height:200px;
    padding:5%;
}
.honesttitle{
    color:white;
    font-size:18px;
    padding-top:5%;
}
.honestcontent{
    color:white;
    font-size:14px;
    padding-top:5%;
}
.quality{
    background-color:black;
    height:200px;
    padding:5%;
}
.qualitytitle{
    color:white;
    font-size:18px;
    padding-top:5%;
}
.qualitycontent{
    color:white;
    font-size:14px;
    padding-top:5%;
}
.introimage{
    width:400px;
}
@media only screen and (max-width: 600px) {
    .teamimagespacing{
        padding-top:4%;
    }
    .testimonialname{
    font-size:14px;
}

    .box1{
        //border:2px solid red;
        height:100px;
        font-size:12px;
    }
     .box2{
        border:2px solid red;
        height:100px;
        font-size:12px;
    }
    .leftspace{
    padding-left:0px !important;
}
    .introimage{
    width:300px;
}
    .img__wrap {
        margin-top:5%;
    }    
    .intro{
      //  margin:5%;
      padding-top:10%;
      padding-bottom:12%;
      //  border:2px solid red;
    }
    .justlaunchedbutton{
        
        margin-bottom:4%;
    }
    .carousel-item img {
        height: 60vh;
    }
    #carouselcontent{
        height:60vh;
        width:45%;
    }
    .carouseheading{
        padding-bottom: 1%; 
        font-size: 18px;
    }
    .carousellocationtext
    {
        font-size:14px;
       
        padding-right:1%;
    }
    .carouselsubtext{
        font-size: 12px;
         line-height: 18px; 
      
    }
    .carouselbutton{
      
        width:80%;font-size:10px;
    }
    .boxbackground
    {
       // height:150px;
        margin-top:4%;
        width:80%;
    }
    .movebox{
        margin-left:0px;
    }
        
    #space{
        padding:0px;
    }


    #justlaunched{
        margin-top:50px !important;
    
        margin-left:0px !important;
        
    }
    .justlaunched{
        margin-left:2.5%;
        width:95%;
    }
    .marginspace{
        margin-left:0 !important;
    }
    .justlaunchedtext{
        margin-left:0px !important;
        padding-right:0px !important;
    }
    .projectspace{
        margin-bottom:4%;
    }
    .testimonialbox{
        margin-left:5% !important;
        //height:350px;
        height:200px;
        
        border:1px solid black;
        box-shadow:0px 0px 15px gray;
        padding:0px !important;
        width:93%;
        font-size:12px;
        
    }
    #aboutus {
    
       height: 60vh !important;
    }
    #project{
        height: 60vh !important;
    }
    #contactus{
        height:60vh !important;
      
    }
    .headingsize{
        font-size:25px !important;
        padding-top:15% !important;
        margin-left:-7%!important;
    }
    .headingsizecontactus{
             font-size:19px !important;
               padding-top:15% !important;
        margin-left:-7%!important;
           
    }
    .overlay-boxes {
        position: static !important; 
        bottom: auto !important;
        transform: none;
        width: auto; 
        justify-content: normal; /* Or remove if not needed */
       
      
    }
    .boxlayout{
        margin-top:10% !important;   
    }
    #mission{
        margin-top:20px !important;
    }
     .new{
        margin-top:-2% !important;
    }
    .contacttext{
        margin-top:10% !important;
      
    }
    .stat-box p {
    //font-size: 2rem;
         font-size:20px;
    }
    .whattext{
        margin-top:10%;
    }
    #leaderimg{
        text-align:center;
       
    }
}