/*! Body Layout */
.RowContent {
  max-width: 90%;
  margin: auto;
  padding: 0 10px; /* Add some padding for better spacing */
  box-sizing: border-box; /* Ensure padding doesn't overflow */
}

@media screen and (max-width: 1024px) {
  /* For tablet-sized screens, allow a bit more width */
  .RowContent {
    max-width: 92%;
  }
}

@media screen and (max-width: 768px) {
  /* For smaller tablets and large mobile devices */
  .RowContent {
    max-width: 94%;
  }
}

@media screen and (max-width: 600px) {
  /* For mobile devices */
  .RowContent {
    max-width: 96%;
    padding: 0 5px; /* Slightly less padding on mobile for better use of screen space */
  }
}

@media screen and (max-width: 480px) {
  /* For very small mobile devices */
  .RowContent {
    max-width: 98%;
    padding: 0 3px; /* Even less padding for tiny screens */
  }
}

.RowSection{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#959595+0,0d0d0d+46,010101+50,0a0a0a+53,4e4e4e+76,383838+87,1b1b1b+100;Black+Gloss+Pipe */
background: linear-gradient(45deg,  rgb(14, 36, 53) 0%,rgb(24, 47, 65) 46%,rgb(24, 47, 65) 50%,rgb(18, 35, 49) 53%,rgb(29, 43, 54) 76%,rgb(37, 57, 74) 87%,rgb(24, 47, 65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
padding: 32px 16px;

}
.menubar
{
width:100%;
padding:1%;
margin:auto;

}
.imagestyle
{
    margin-top:10px;
    border-style:solid;
    border-width: 2px;
    border-color: white;
    max-height: 320px;

}
@media screen and (max-width: 600px) {
  .imagestyle  {
    margin-top:10px;
    border-style:solid;
    border-width: 2px;
    border-color: white;
    max-height: 300px;
  }
}
.ServiceRowSide
{
    margin-top:52px;
}
@media screen and (max-width: 600px) {
    .ServiceRowSide  {
        margin-top:0px;
    }
  }
  .ServiceSideBox
  {
    padding:1%;
   
  }
  
  .tab1
{
 background-color: white;
 color:black;
}
.tab1:hover{
  background-color:#fea31f;
}
@media screen and (max-width: 600px) {
  .tab1:hover  {
     min-height: 60px;
     display: flex;
     justify-content: center;
     align-items: center;
  
  }
}



 /* display project image at home */
 /* Container needed to position the overlay. Adjust the width as needed */
.ImageContainer {
    position: relative;
   
  }

  

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;

}

.ImageContainer:hover .middle {
  opacity: 1;
}
/* The overlay effect - lays on top of the container and over the image */
.overlay_pro {
  position: absolute;
  bottom: 0;
  background: rgba(0, 0, 0.7, 0.7);
  /*Blacksee-through*/width: 100%;
  transition: .5s ease;
  opacity:1;
  padding:3px;
  text-align: center;
  -webkit-transition: .5s ease;
  -moz-transition: .5s ease;
  -ms-transition: .5s ease;
  -o-transition: .5s ease;
  min-height: 80px;
}

/* When you mouse over the container, fade in the overlay title */
.ImageContainer:hover .overlay_pro {
  opacity: 1;
  border-radius: 0px 0px 5px 5px;
  -webkit-border-radius: 0px 0px 5px 5px;
  -moz-border-radius: 0px 0px 5px 5px;
  -ms-border-radius: 0px 0px 5px 5px;
  -o-border-radius: 0px 0px 5px 5px;
}

/* [1] The container */
.img-hover-zoom {
  height: 100%;
  /*[1.1]Setitasperyourneed*/overflow: hidden;
  /*[1.2]Hidetheoverflowingofchildelements*/border-radius: 15px 15px 15px 15px;
  -webkit-border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  -ms-border-radius: 5px 5px 5px 5px;
  -o-border-radius: 5px 5px 5px 5px;
}

/* [2] Transition property for smooth transformation of images */
.img-hover-zoom img {
   filter: blur(0);
  transform: scale(1);
   transition: transform 1s, filter 2s ease-in-out;
    /*[1.2]Hidetheoverflowingofchildelements*/border-radius: 15px 15px 15px 15px;
  -webkit-border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  -ms-border-radius: 5px 5px 5px 5px;
  -o-border-radius: 5px 5px 5px 5px;
}

/* [3] Finally, transforming the image when container gets hovered */
.img-hover-zoom:hover img {
 

  filter: blur(0px);
  transform: scale(1.2);
   /*[1.2]Hidetheoverflowingofchildelements*/border-radius: 15px 15px 15px 15px;
   -webkit-border-radius: 5px 5px 5px 5px;
   -moz-border-radius: 5px 5px 5px 5px;
   -ms-border-radius: 5px 5px 5px 5px;
   -o-border-radius: 5px 5px 5px 5px;

}
.CapText
{
    color:white;
    font-size: 15px;
    font-weight: 400;
}
@media screen and (max-width: 600px) {
    .CapText {
        color:white;
        font-size: 13px;
        font-weight: 400;
    
    }
}
.CapTextSmall
{
    color:rgb(196, 193, 193);
    font-size: 13px;
    font-weight: 300;
}
@media screen and (max-width: 600px) {
    .CapTextSmall {
        color:rgb(196, 193, 193);
        font-size: 11px;
        font-weight: 400;
    
    }
}

/* Banner  */
.BannerContainer
{
   margin-top:-10px;

}
@media screen and (max-width: 600px) {
  .BannerContainer  {
    margin-top:-6px;
    height: auto;
  }
}

.sliderimg
{
  width: 100%;            /* Makes the image responsive */
  height: auto;           /* Maintains the aspect ratio */
  max-height: 70vh;       /* Limits the image height to 60% of the viewport height */

}
@media screen and (max-width: 600px) {
  .sliderimg  {
    min-height: 50vh;      /* Ensures that the image's minimum height is 50% of the viewport height */


  }
}
/* Default styling for .img11 */
.img11 {
  min-height: 60vh; /* Minimum height set to 60% of viewport height */
  width: 100%; /* Ensures the image fills the width of its container */
  height: auto; /* Maintains the aspect ratio of the image */
}

/* Mobile Styles (Small screens, max-width: 600px) */
@media screen and (max-width: 600px) {
  .img11 {
    min-height: 30vh; /* Slightly smaller image for small screens */
  }
}

/* Tablet Styles (Medium screens, max-width: 768px) */
@media screen and (max-width: 768px) {
  .img11 {
    min-height: 35vh; /* A bit larger image for tablets */
  }
}

/* Desktop Styles (Large screens, min-width: 1024px) */
@media screen and (min-width: 1024px) {
  .img11 {
    min-height: 30vh; /* Default 60% of viewport height for desktop */
  }
}

/* 4K Resolution Styles (Very large screens, min-width: 3840px) */
@media screen and (min-width: 3840px) {
  .img11 {
    min-height: 40vh; /* Larger image for 4K resolution */
  }
}


/* The footer section */
.footerlogo
{
  padding-left:20px;
}

.footerUrl {
  font-size: 12px; /* Default font size for larger screens */
  font-weight: 200;
  line-height: 1.2;
  text-decoration: none;
  color: #c51414;
  transition: color 0.3s ease; /* Optional: smooth transition for color change */
}

/* Hover State */
.footerUrl:hover {
  color: #f06d41; /* Hover color */
}


/* Mobile Styles (Max-width: 600px) */
@media screen and (max-width: 600px) {
  .footerUrl {
    font-size: 12px;  /* Smaller font size for mobile */
    text-align: center;  /* Center the text on mobile */
    line-height: 1.4;  /* Increase line height for better readability */
  }
}

/* Tablet Styles (Max-width: 768px) */
@media screen and (max-width: 768px) {
  .footerUrl {
    font-size: 12px;  /* Slightly larger font size for tablets */
    text-align: center;  /* Center the text on tablet */
    line-height: 1.3;  /* Adjust line height for tablets */
  }
}

/* Desktop Styles (Min-width: 1024px) */
@media screen and (min-width: 1024px) {
  .footerUrl {
    font-size: 10px;  /* Default font size for desktop */
    text-align: left;  /* Left-align text on desktop */
    line-height: 1.2;  /* Standard line height for desktop */
  }
}

.addresstext {
 
  line-height: 1.5;
  font-size: 16px;  /* Default font size for larger screens */
  text-decoration: none;
  word-spacing: 1px;
  text-align: left;  /* Left alignment for larger screens */
}

/* Mobile Styles (Max-width: 600px) */
@media screen and (max-width: 600px) {
  .addresstext {
    font-size: 14px;  /* Reduced font size for mobile */
    line-height: 1.3;  /* Adjusted line height for better readability on mobile */
    text-align: center;  /* Center-aligned text for smaller screens */
  }
}

/* Tablet Styles (Max-width: 768px) */
@media screen and (max-width: 768px) {
  .addresstext {
    font-size: 15px;  /* Slightly smaller font size for tablets */
    line-height: 1.25;  /* Slightly adjusted line height for tablet readability */
    text-align: center;  /* Center-aligned text for tablet */
  }
}

/* Desktop Styles (Min-width: 1024px) */
@media screen and (min-width: 1024px) {
  .addresstext {
    font-size: 18px;  /* Default font size for desktop */
    line-height: 1.5;  /* Default line height for desktop */
    text-align: left;  /* Left-aligned text for larger screens */
  }
}


.textbox3 {
  font-family: ABCWalterNeue, sans-serif;
  line-height: 1.2;
  font-size: 14px;  /* Default font size */
  color: white;
  text-decoration: none;
  word-spacing: 1px;
  text-align: left;
}

/* Mobile Styles (Max-width: 600px) */
@media screen and (max-width: 600px) {
  .textbox3 {
    font-size: 12px;  /* Smaller font size on mobile */
    text-align: center;  /* Center text on mobile */
    line-height: 1.4;  /* Adjust line height for better readability on smaller screens */
  }
}

/* Tablet Styles (Max-width: 768px) */
@media screen and (max-width: 768px) {
  .textbox3 {
    font-size: 13px;  /* Slightly larger font size for tablets */
    text-align: center;  /* Center text on tablet screens */
    line-height: 1.3;  /* Adjust line height for tablets */
  }
}

/* Desktop Styles (Min-width: 1024px) */
@media screen and (min-width: 1024px) {
  .textbox3 {
    font-size: 16px;  /* Larger font size for desktop */
    text-align: left;  /* Align text to the left on desktop */
    line-height: 1.2;  /* Maintain line height for readability on larger screens */
  }
}



.ftbox
{
padding:4px;
}
@media screen and (max-width: 600px) {
  .ftbox  {
        text-align: left;
        padding-bottom:15px;
        padding-left:10px;
        padding-right:10px;
   
           
  }
}

.image100
{
  max-height: 220px;
  min-height: 220px;

}
@media screen and (max-width: 600px) {
  .image100  {
    max-height: 200px;
    min-height: 200px;
  
           
  }
}

.container6
{
  max-height: 230px;
  min-height: 230px;
  background-color: white;
  padding-bottom:12px;

}
@media screen and (max-width: 600px) {
  .container6  {
    max-height: 240px;
    min-height: 240px;
    padding-bottom:6px;
  
           
  }
}
.heading{
padding: top 8px;
padding-bottom:8px;
color:rgb(119, 118, 118);

}
@media screen and (max-width: 600px) {
  .heading{
   
     padding-top: 4px;
      padding-bottom:4px
  
           
  }
}
.image101
{
margin-top: 98px;
min-height: 350px;
}
@media screen and (max-width: 600px) {
  .image101{
   
    margin-top: 30px;
    min-height: 350px;
  
           
  }
}
.s3_panel3
{

    background-color: #bdbbbb;
   
}
.border
{
    border-style: solid;
    border-width: 1px;
    border-color: #bcbbba;
}



.textline {
  color: white;
position:absolute;
  font-weight:200;
  top: 50%;
left:50%;
width:98%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);

  line-height: 1.1; 
}
/* The image box @index-service section */


.txtline
{
  font-family:  ABCWalterNeue, sans-serif; 
  line-height: 1.5; font-size: 14px;
  text-decoration: none;
  color: #727171;
}
.txtline2
{
  font-family:  ABCWalterNeue, sans-serif;
 
  font-size: 13px;
  text-decoration: none;
  color: #9e9d9d;
  text-align: left;
  line-height: 1.4;

}

/* The hyperlink section */
/* The textbox section */
.textbox2
{
  padding-right:15px;



}
@media screen and (max-width: 600px) {
  .textbox2{
  
    padding: 1%;
 
  
           
  }
}
.side1
{
  padding-left:5px;



}
@media screen and (max-width: 600px) {
  .textbox2{
  
    padding-left:0px;
 
  
           
  }
}
.div2
{

  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  border-style: solid;
  overflow: hidden;
}

.p12
        { 
            font-weight: 300;
            line-height: 1.4;
            color: #534f4f;
            font-size: 14px;
            padding-right: 10px;
            text-align: left;
            word-spacing: -2px;
        }

@media screen and (max-width: 600px) {
  .p12  {
            font-weight: 100;
            line-height: 1.2;
            color: #534f4f;
            font-size: 13px;
             text-align: justify;
            word-spacing: -2px;
  }
}

.whatsapp-button{
  position: fixed;
  bottom: 45px;
  right: 55px;
  z-index: 1;
  background-color: #25d366;
  border-radius: 50px;
  color: #ffffff !important;
  text-decoration: none;
  width: 50px;
  height: 50px;
  font-size: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  -webkit-box-shadow: 0px 0px 25px -6px rgba(0,0,0,1);
  -moz-box-shadow: 0px 0px 25px -6px rgba(0,0,0,1);
  box-shadow: 0px 0px 25px -6px rgba(0,0,0,1);
  animation: effect 5s infinite ease-in;
}
.whatsapp-button:hover {
  background-color: #128C7E;
}

.whatsapp-button i {
  margin-right: 1px;
}

.downlod-button{
  position: fixed;
  bottom: 45px;
  right: 115px;
  z-index: 1;
  background-color: #25d366;
  border-radius: 50px;
  color: #ffffff !important;
  text-decoration: none;
  width: 50px;
  height: 50px;
  font-size: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  -webkit-box-shadow: 0px 0px 25px -6px rgba(0,0,0,1);
  -moz-box-shadow: 0px 0px 25px -6px rgba(0,0,0,1);
  box-shadow: 0px 0px 25px -6px rgba(0,0,0,1);
  animation: effect 5s infinite ease-in;
}
.downlod-button:hover {
  background-color: #128C7E;
}

.downlod-button i {
  margin-right: 1px;
}