/*!
 * Start Bootstrap - Blog Home HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */



 /* Global settings */
/* Global settings */


/* Base style for .to */
.to {
  color: #76a7d2; /* Default color */
  text-decoration: none; /* Removes the underline by default */
  transition: color 0.3s ease; /* Smooth transition for color change */
}

/* Hover state */
.to:hover {
  color: #f06d41; /* Hover color */
}





/* Base Styles for .custom-btn */
.custom-btn {
  width: 250px; /* Minimum width adjusts based on content */
  height: 60px; /* Height adjusts based on content */
  padding-top: 20px; /* Adjust padding based on screen size */
  font-size: clamp(18px, 4vw, 25px);  /* Fluid typography with min and max values */
  border: 1px solid #fbfafa;
  text-decoration: none;
  font-weight: 400;
  background: transparent;
  cursor: pointer;
  transition: all 0.7s ease;
  position: relative;
  display: inline-flex;  /* Use inline-flex for centering text */
  justify-content: center; /* Center text horizontally */
  align-items: center; /* Center text vertically */
  border-radius: 6px;
  font-family: Roboto, sans-serif;
}

/* Button Styling for .btn-16 */
.btn-16 {
  background: #eeeded;
  color: #1a1a1a;
  z-index: 1;
}

.btn-16:after {
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  top: 0;
  left: 0;
  direction: rtl;
  z-index: -1;
  background: #f45037;
  transition: all 0.7s ease;
  border-radius: 6px;
}

.btn-16:hover {
  color: #f3f5f7;
}

.btn-16:hover:after {
  left: auto;
  right: 0;
  width: 100%;
}

.btn-16:active {
  top: 2px;
}


/* Mobile Styles (Max-width: 600px) */
@media screen and (max-width: 600px) {
  .custom-btn {
  
    height: 60px;
    font-size: clamp(12px, 6vw, 18px); /* Fluid font size */
    padding-top:10px;
  }
 
}

/* Tablet Styles (Max-width: 768px) */
@media screen and (max-width: 768px) {
  .custom-btn {
  
    height: 60px;
    font-size: clamp(14px, 5vw, 20px); /* Fluid font size */
    padding-top:10px;
  }
 
}

/* For 1280x720 (HD) */
@media screen and (min-width: 1280px) and (max-width: 1920px) {
  .custom-btn {
  
    height: 60px;
    font-size: clamp(16px, 3vw, 22px); /* Fluid font size */
    padding-top:10px;
  }
 
}

/* For 1920x1080 (Full HD) */
@media screen and (min-width: 1920px) and (max-width: 2560px) {
  .custom-btn {
  
    height: 60px;
    padding-top:10px;
    font-size: clamp(16px, 2.5vw, 20px); /* Fluid font size */
  }
 
}

/* For 2560x1440 (2K) */
@media screen and (min-width: 2560px) and (max-width: 3840px) {
  .custom-btn {
   
    height: 60px;
    font-size: clamp(25px, 2vw, 35px); /* Fluid font size */
    padding-top:10px;
  }
 
}

/* For 3840x2160 (4K Ultra HD) */
@media screen and (min-width: 3840px) {
  .custom-btn {
    height: 60px;
    font-size: clamp(20px, 2vw, 30px); /* Fluid font size */
  
  }
 
}

/* For 854x480 (SD) */
@media screen and (min-width: 854px) and (max-width: 1280px) {
  .custom-btn {
    height: 60px;
    font-size: clamp(14px, 5vw, 20px); /* Fluid font size */
    
  }
  
}

/* For 640x360 (Low resolution mobile) */
@media screen and (max-width: 640px) {
  .custom-btn {
    height: 60px;
    font-size: clamp(12px, 6vw, 18px); /* Fluid font size */
   

  }
 
}

.d1{
  margin-top: -20px;
}







/* Base Styles */
.call {
  border-style: solid;
  border-color: white;
  border-width: 1px;
  padding: 8px 16px; /* Default padding */
  display: inline-block;
  margin-top:0px;
  padding: 5px 10px; /* Default padding */
  background-color: transparent;
  text-align: center;
  display: inline-block;
  text-decoration: none;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.7s ease;
  position: relative;
  display: inline-flex;  /* Use inline-flex for centering text */
  justify-content: center; /* Center text horizontally */
  align-items: center; /* Center text vertically */
  border-radius: 6px;
  font-family: Roboto, sans-serif;
}

.copyrightrow{
  background-color: #132839;

}
.developedby {
  font-weight: 100;
  font-size: 11px;
  color: rgb(148, 145, 145);
  line-height: 1.2;
  word-spacing: 1px;
  text-align: center; /* Optional: Center text for better readability */
}
.developedby:hover {
  font-weight: 100;
  font-size: 11px;
  color: rgb(249, 249, 250);
  line-height: 1.2;
  word-spacing: 1px;
  text-align: center; /* Optional: Center text for better readability */
}

.copyrightmark {
  font-weight: 100;
  font-size: 11px;
  color: rgb(148, 145, 145);
  line-height: 1.2;
  word-spacing: 1px;
  text-align: center; /* Optional: Center text for better readability */
}

/* For screens smaller than 600px (Mobile devices) */
@media screen and (max-width: 600px) {
  .copyrightmark {
    font-size: 10px; /* Smaller font size for mobile devices */
    line-height: 1.3; /* Slightly increased line-height for readability */
  }
}

/* For screens between 601px and 768px (Tablets) */
@media screen and (min-width: 601px) and (max-width: 768px) {
  .copyrightmark {
    font-size: 10px; /* Slightly smaller than default size */
    line-height: 1.25; /* Adjust line-height for better spacing */
  }
}

/* For screens between 769px and 1024px (Small desktops or large tablets) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .copyrightmark {
    font-size: 10px; /* Default size for medium screens */
    line-height: 1.2; /* Normal line-height */
  }
}

/* For screens larger than 1024px (Desktops and larger screens) */
@media screen and (min-width: 1025px) {
  .copyrightmark {
    font-size: 11px; /* Larger font size for bigger screens */
    line-height: 1.4; /* Increased line-height for better readability */
  }
}

 

.bg10{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f0f9ff+0,cbebff+47,a1dbff+100;Blue+3D+%2313 */
background: linear-gradient(45deg,  rgba(240,249,255,1) 0%,rgba(203,235,255,1) 47%,rgba(161,219,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}
.bg11{
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f6f8f9+0,e5ebee+50,d7dee3+51,f5f7f9+100;White+Gloss */
background: linear-gradient(45deg,  rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}
.sharebtn
{
  color:#534f4f;
  text-decoration: none;
  font-size: 12px;
}

.w {
  margin: 0px 0;
  max-width: 85%;

}
@media screen and (max-width: 600px) {
.w  {
  margin: 0px 0;
  min-width: 100%;

}
}
.copyright
{
 background-color:#262626;
}
.footercolor
{
   /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b5bdc8+0,828c95+36,28343b+100;Grey+Black+3D */
background: linear-gradient(to bottom,  rgb(78, 98, 122) 10%,rgba(24, 46, 65) 50%,rgba(24, 46, 65) 10%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}
.tglbar
{
   /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b5bdc8+0,828c95+36,28343b+100;Grey+Black+3D */
background: linear-gradient(to bottom,  rgb(78, 98, 122) 10%,rgba(24, 46, 65) 50%,rgba(24, 46, 65) 10%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}
.taba2{
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#feccb1+0,f17432+50,ea5507+51,fb955e+100;Red+Gloss+%232 */
background: linear-gradient(135deg,  rgba(254,204,177,1) 0%,rgba(241,116,50,1) 50%,rgba(234,85,7,1) 51%,rgba(251,149,94,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}
.taba
{
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#feccb1+0,f17432+50,ea5507+51,fb955e+100;Red+Gloss+%232 */
background: linear-gradient(to bottom,  rgba(254,204,177,1) 0%,rgba(241,116,50,1) 50%,rgba(234,85,7,1) 51%,rgba(251,149,94,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}
.taba:hover{
  background-color:#fea31f;
}
@media screen and (max-width: 600px) {
  .taba  {
     min-height: 60px;
     display: flex;
     justify-content: center;
     align-items: center;
  
  }
}
/*! dropdown menu */
.cont1
{
  max-width:600px;
}
@media screen and (max-width: 600px) {
  .cont1  {
    max-width:100%;
  }
}

.a2
{
  text-decoration:none;
  color: white;
}
.a2:hover
{
  text-decoration:none;
  color: teal;
}
.vission
{
    margin-top: -120px;
}
@media screen and (max-width: 600px) {
  .vission  {
     margin-top: 190px;
  
  }
}
.dv1
{
    min-height: 300px;
}
@media screen and (max-width: 600px) {
  .dv1  {
     min-height: 500px;
  
  }
}
.p11
        { 
         
            padding-right: 18px;
            margin-bottom: 16px;
        }

@media screen and (max-width: 600px) {
  .p11  {
    padding-right: 0px;
    margin-bottom: 16px;
  }
}

.p13
        { 
            font-weight: 200;
            line-height: 1.3;
            color: #534f4f;
            font-size: 12px;
            margin-top:-8px;
          
            
        }

@media screen and (max-width: 600px) {
  .p13  {
            font-weight: 100;
            line-height: 1.2;
            color: #534f4f;
            font-size: 11px;
  }
}


.a3
{
  font-family:  ABCWalterNeue, sans-serif; 
  line-height: 1.2; font-size: 12px;
  color: white;
  text-decoration: none;

}
.a3:hover{
  color:teal;
}

.boder{
  border-bottom-style: solid;
  border-color: white;
  border-width: 2px;

}
.m5{
  margin-top:8px;
  text-align: right;
}
@media screen and (max-width: 600px) {
  .m5  {
     margin-top:-5px;
     text-align: left;
  }
}
/*! dropdown menu */
b
{
  position: inherit; /* or absolute */

}

/* Base Styles */
.dropbtn {
  color: white;
  padding: 5px 10px; /* Default padding */
  background-color: transparent;
  text-align: center;
  display: inline-block;
  text-decoration: none;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.7s ease;
  position: relative;
  display: inline-flex;  /* Use inline-flex for centering text */
  justify-content: center; /* Center text horizontally */
  align-items: center; /* Center text vertically */
  border-radius: 6px;
  font-family: Roboto, sans-serif;
}


/* Responsive Adjustments for Small Screens (Mobile) */
@media screen and (max-width: 600px) {
  .dropbtn {
    
    padding: 4px 8px; /* Adjust padding for mobile */
  }
}

/* Adjustments for Tablets (Medium Screens) */
@media screen and (max-width: 768px) {
  .dropbtn {
  
    padding: 5px 9px; /* Adjust padding for tablets */
  }
}

/* Adjustments for Larger Screens */
@media screen and (min-width: 1024px) {
  .dropbtn {
    
    padding: 6px 12px; /* Adjust padding for larger screens */
  }
}



.dropdown {
  
  display: inline-block;

  
}
#myNavbar {
  overflow: visible;
  z-index: 10; /* Increase the z-index to ensure it is above other content */
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1000;
  color: white;
}
/* Prevent the w3-card class from interfering */
#myNavbar.w3-card {
  overflow: visible;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #606060;}


/*! dropdown menu */

/* Desktop (Large screens) */
@media screen and (min-width: 1024px) {
  .dropdown-content {
    min-width: 300px; /* Keep default size for desktop */
    background-color:#1b3043; /* Darker background color for desktop */
    color: #fff; /* White text color for better contrast */
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); /* Retain box-shadow for desktop */
    padding: 12px; /* Adjust padding for better alignment on desktop */
  }
}




/* Base Styles for .text_block */
.text_block {
  position: absolute;
  bottom: 50px; /* Default position from the bottom */
  left: 7%; /* Center the block horizontally */
  right: 10%;
  color: white;
  padding: 5px 5px; /* Add padding around the text */
  background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
  border-radius: 5px; /* Optional: Add rounded corners for a softer look */
  text-align: left; /* Default text alignment */
  width: auto; /* Width will adjust based on content */
  max-width: 90%; /* Ensure text block doesn't go beyond the container */
}

/* Mobile Styles (Max-width: 600px) */
@media screen and (max-width: 600px) {
  .text_block {
    bottom: 40px; /* Adjust position for mobile */
    left: 10px; /* Reduce left padding to fit mobile screens */
    right: 10px; /* Add right padding to ensure text doesn't touch edges */
    width: calc(100% - 20px); /* Make the block take up almost the full width */
    padding: 10px; /* Adjust padding */
    text-align: center; /* Center the text for small screens */
  }
}

/* Tablet Styles (Max-width: 768px) */
@media screen and (max-width: 768px) {
  .text_block {
    bottom: 60px; /* Adjust position for tablets */
    left: 20px; /* Add more space from the left */
    right: 20px; /* Add more space from the right */
    width: calc(100% - 40px); /* Ensure text block takes up most of the screen width */
    padding: 10px 20px; /* Padding for tablets */
    text-align: center; /* Center text for medium screens */
  }
}

/* Desktop Styles (Min-width: 1024px) */
@media screen and (min-width: 1024px) {
  .text_block {
    bottom: 50px; /* Adjust position for larger screens */
    left: 7%; /* Default position for larger screens */
    right: auto; /* Remove right for fixed position */
    width: auto; /* Auto width based on content */
    text-align: left; /* Align text to the left for larger screens */
    max-width: 100%; /* Limit width to prevent text block from being too wide */
  }
}


/* Base Styles */
.tagline1 {
  font-weight: 800;
  font-size: 60px; /* Default font size for large screens */
  font-family: "Segoe UI", Arial, sans-serif;
  color: white;
}

/* Mobile Styles (Max-width: 600px) */
@media screen and (max-width: 600px) {
  .tagline1 {
    font-weight: 600; /* Slightly lighter font weight for mobile */
    font-size: 25px; /* Smaller font size for mobile screens */
    font-family: "Segoe UI", Arial, sans-serif; /* Default font family */
  }
}

/* Tablet Styles (Max-width: 768px) */
@media screen and (max-width: 768px) {
  .tagline1 {
    font-weight: 700; /* Medium font weight for tablets */
    font-size: 40px; /* Font size for tablets */
  }
}

/* Large Screens (Min-width: 1024px) */
@media screen and (min-width: 1024px) {
  .tagline1 {
    font-weight: 800; /* Use the default weight for larger screens */
    font-size: 60px; /* Default large font size */
  }
}

/* Base Styles */
.tagline2 {
  font-weight: 300;
  font-size: 50px; /* Default font size for large screens */
  font-family: "Segoe UI", Arial, sans-serif;
  color: white;
  margin-top:-55px;
}

/* Mobile Styles (Max-width: 600px) */
@media screen and (max-width: 600px) {
  .tagline2 {
    font-weight: 300; /* Slightly lighter font weight for mobile */
    font-size: 20px; /* Smaller font size for mobile screens */
    font-family: "Segoe UI", Arial, sans-serif; /* Default font family */
    margin-top:-20px;
  }
}

/* Tablet Styles (Max-width: 768px) */
@media screen and (max-width: 768px) {
  .tagline2 {
    font-weight: 400; /* Medium font weight for tablets */
    font-size: 30px; /* Font size for tablets */
    margin-top:-20px;
  }
}

/* Large Screens (Min-width: 1024px) */
@media screen and (min-width: 1024px) {
  .tagline2 {
    font-weight: 400; /* Use the default weight for larger screens */
    font-size: 50px; /* Default large font size */
    margin-top:-55px;
}
}




/* Base Styles for .image */
.image {
  display: block;
  width: 100%; /* Make the image responsive to the width of the container */
  height: auto; /* Maintain aspect ratio of the image */
  object-fit: cover; /* Ensures the image covers the container area without distortion */
  min-height: 35vh; /* Adjusts height relative to the viewport */
  border-radius: 6px 6px 6px 6px;
  -webkit-border-radius: 6px 6px 6px 6px;
  -moz-border-radius: 6px 6px 6px 6px;
  -ms-border-radius: 6px 6px 6px 6px;
  -o-border-radius: 6px 6px 6px 6px;
}

/* Mobile Styles (Max-width: 600px) */
@media screen and (max-width: 600px) {
  .image {
    width: 100%; /* Ensures the image width is fully responsive */
    height: auto; /* Keeps the aspect ratio intact on small screens */
    max-height: 50vh; /* Adjust height slightly for smaller screens */
    border-radius: 6px 6px 6px 6px;
    -webkit-border-radius: 6px 6px 6px 6px;
    -moz-border-radius: 6px 6px 6px 6px;
    -ms-border-radius: 6px 6px 6px 6px;
    -o-border-radius: 6px 6px 6px 6px;
  }
}

/* Tablet Styles (Max-width: 768px) */
@media screen and (max-width: 768px) {
  .image {
    width: 100%; /* Ensures the image width is responsive */
    height: auto; /* Maintains aspect ratio */
    max-height: 50vh; /* Adjust height slightly for smaller screens */
    border-radius: 6px 6px 6px 6px;
    -webkit-border-radius: 6px 6px 6px 6px;
    -moz-border-radius: 6px 6px 6px 6px;
    -ms-border-radius: 6px 6px 6px 6px;
    -o-border-radius: 6px 6px 6px 6px;
  }
}

/* Desktop Styles (Min-width: 1024px) */
@media screen and (min-width: 1024px) {
  .image {
    width: 100%; /* Keeps image responsive */
    height: auto; /* Maintains aspect ratio */
    max-height: 55vh; /* Adjusts height relative to the viewport */
    border-radius: 6px 6px 6px 6px;
    -webkit-border-radius: 6px 6px 6px 6px;
    -moz-border-radius: 6px 6px 6px 6px;
    -ms-border-radius: 6px 6px 6px 6px;
    -o-border-radius: 6px 6px 6px 6px;
  }
}


/* Base Styles for .image */
.image2 {
  display: block;
  width: 100%; /* Make the image responsive to the width of the container */
  height: auto; /* Maintain aspect ratio of the image */
  object-fit: cover; /* Ensures the image covers the container area without distortion */
  min-height: 35vh; /* Adjusts height relative to the viewport */
  border-radius: 6px 6px 6px 6px;
  -webkit-border-radius: 6px 6px 6px 6px;
  -moz-border-radius: 6px 6px 6px 6px;
  -ms-border-radius: 6px 6px 6px 6px;
  -o-border-radius: 6px 6px 6px 6px;
}

/* Mobile Styles (Max-width: 600px) */
@media screen and (max-width: 600px) {
  .image2 {
    width: 100%; /* Ensures the image width is fully responsive */
    height: auto; /* Keeps the aspect ratio intact on small screens */
    max-height: 10vh; /* Adjust height slightly for smaller screens */
    border-radius: 6px 6px 6px 6px;
    -webkit-border-radius: 6px 6px 6px 6px;
    -moz-border-radius: 6px 6px 6px 6px;
    -ms-border-radius: 6px 6px 6px 6px;
    -o-border-radius: 6px 6px 6px 6px;
  }
}

/* Tablet Styles (Max-width: 768px) */
@media screen and (max-width: 768px) {
  .image2 {
    width: 100%; /* Ensures the image width is responsive */
    height: auto; /* Maintains aspect ratio */
    max-height: 12vh; /* Adjust height slightly for smaller screens */
    border-radius: 6px 6px 6px 6px;
    -webkit-border-radius: 6px 6px 6px 6px;
    -moz-border-radius: 6px 6px 6px 6px;
    -ms-border-radius: 6px 6px 6px 6px;
    -o-border-radius: 6px 6px 6px 6px;
  }
}

/* Desktop Styles (Min-width: 1024px) */
@media screen and (min-width: 1024px) {
  .image2 {
    width: 100%; /* Keeps image responsive */
    height: auto; /* Maintains aspect ratio */
    max-height: 30vh; /* Adjusts height relative to the viewport */
    border-radius: 6px 6px 6px 6px;
    -webkit-border-radius: 6px 6px 6px 6px;
    -moz-border-radius: 6px 6px 6px 6px;
    -ms-border-radius: 6px 6px 6px 6px;
    -o-border-radius: 6px 6px 6px 6px;
  }
}



/* The image box @index-service section */
.container_img {
  position: relative;
  width: 100%; /* Ensure the container takes up full width */
  overflow: hidden; /* Hide anything outside the container (important for overlay) */
}

/* The overlay effect */
.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
  overflow: hidden;
  width: 100%;
  height: 0; /* Initially hidden */
  transition: height 0.7s ease; /* Smooth transition on hover */
  border-radius: 6px; /* Slight border radius for smooth corners */
}

/* On hover, expand the overlay */
.container_img:hover .overlay {
  height: 100%; /* Expand the overlay to cover the whole container */
  border-radius: 6px; /* Consistent border radius on hover */
}

/* Optional: Add text or other content inside the overlay */
.overlay .text {
  color: white;
  text-align: center;
  font-size: 18px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  padding: 10px;
}

/* Mobile Styles */
@media screen and (max-width: 600px) {
  .container_img {
    width: 100%; /* Ensure image takes up full width */
  }

  .overlay {
    border-radius: 4px; /* Slightly smaller border radius for mobile */
  }

  .overlay .text {
    font-size: 16px; /* Slightly smaller text on mobile */
  }
}

/* Tablet Styles */
@media screen and (max-width: 768px) {
  .overlay {
    border-radius: 5px; /* A little more rounded corners for tablets */
  }

  .overlay .text {
    font-size: 17px; /* Slightly smaller text for tablet screens */
  }
}

/* Base Styles for .hlink1 */
.hlink1 {
  color: white;
  text-decoration: none;
  font-size: 20px; /* Default font size */
  transition: color 0.7s ease; /* Smooth color transition */
}

.hlink1:hover {
  color: rgb(185, 188, 188); /* Hover color */
  text-decoration: none; /* No underline on hover */
}

/* Mobile Styles for .hlink1 (Max-width: 600px) */
@media screen and (max-width: 600px) {
  .hlink1 {
    font-size: 16px; /* Smaller font size for mobile */
  }
}

/* Tablet Styles for .hlink1 (Max-width: 768px) */
@media screen and (max-width: 768px) {
  .hlink1 {
    font-size: 18px; /* Slightly larger font size for tablets */
  }
}

/* Base Styles for .hlink2 */
.hlink2 {
  color: rgb(107, 105, 105);
  /*Defaulttextcolor*/text-decoration: none;
  font-size: 14px;
  /*Defaultfontsize*/transition: color 0.7s ease;
  /*Smoothcolortransition*/line-height: 1.2;
  /*Lineheight*/font-weight: 600;
  -webkit-transition: color 0.7s ease;
  -moz-transition: color 0.7s ease;
  -ms-transition: color 0.7s ease;
  -o-transition: color 0.7s ease;
}

.hlink2:hover {
  color: #ec7344; /* Hover color */
  text-decoration: none; /* No underline on hover */
}

/* Mobile Styles for .hlink2 (Max-width: 600px) */
@media screen and (max-width: 600px) {
  .hlink2 {
    font-size: 13px; /* Slightly smaller font size for mobile */
  }
}

/* Tablet Styles for .hlink2 (Max-width: 768px) */
@media screen and (max-width: 768px) {
  .hlink2 {
    font-size: 13px; /* Keep same size for tablets */
  }
}

/* Desktop Styles for .hlink2 (Min-width: 1024px) */
@media screen and (min-width: 1024px) {
  .hlink2 {
    font-size: 14px; /* Keep default size for larger screens */
  }
}










#myNavbar {
  overflow: visible;
  z-index: 10; /* Increase the z-index to ensure it is above other content */
}

/* Prevent the w3-card class from interfering */
#myNavbar.w3-card {
  overflow: visible;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #606060;}


/*! dropdown menu */
/*! Banner Outline */


/*! Banner Outline */

.tx1
{
   
    font-size: 45px;
    line-height: 1.5;
    font-weight:800; 
   font-family: "Segoe UI", Arial, sans-serif;
   color: white;

}
.tx2
{
   
    font-size: 25px;
    line-height: 1.5;
    font-weight:600; 
   font-family: "Segoe UI", Arial, sans-serif;
   color: white;

}



.certificate
{
    background-color: #293d48;
    padding:10px;
    position: relative;

}
.certificate:hover .overlayc {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}
.overlayc {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #f58320;
  overflow: hidden;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transition: .3s ease;
}
.overlaytext {
  color: white;
  font-size: 15px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center
}
.certificateImage
{

    max-height: 160px;
    min-height: 160px;
    width: 60%;
}
.inquery
{
    padding:5px;
    background-color:#f38421;
    color: white;
    font-family:  ABCWalterNeue, sans-serif;
    font-size: 18px;
}
.pnl 
{
    margin-top:20px;
    background-color:#f38421;
}
@media screen and (max-width: 600px) {
  .pnl  {
     margin-top:-20px;
     background-color:#f38421;
  
  }
}
.w3-padding-8
{
    padding-top:8px;
    padding-bottom:8px;
}


.contain
{
     position: relative;
}

/* Banner  */



.text-block3 {
  position: absolute;
  bottom: 0px;
  right: 20px; 
  color: white;
  padding-left: 20px;
  padding-right: 20px;
  
    background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
}
@media screen and (max-width: 600px) {
  .text-block3  {
  position: absolute;
  bottom: 0px;
  right: 20px;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
  color: white;
  padding-left: 20px;
  padding-right: 20px;
 
  }
}
.text-block4 {
  position: absolute;
  bottom: 200px;
  left: 30px;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
  color: white;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 10px;
 
}
@media screen and (max-width: 600px) {
  .text-block4  {
  position: absolute;
  bottom: 5px;
  left: 25px;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
  color: white;
  padding-left: 10px;
  padding-right: 10px;
   padding-bottom: 5px;
  
  }
}
.text-block5 {
  position: absolute;
  bottom: 60px;
  left: 50px;
  background-color: #fcb825;
  color: white;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 10px;
 
}
@media screen and (max-width: 600px) {
  .text-block5  {
  position: absolute;
  bottom: 5px;
  left: 25px;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
  color: white;
  padding-left: 10px;
  padding-right: 10px;
   padding-bottom: 5px;
  
  }
}


.headline4
{
    font-family: Arimo, sans-serif !important;
    font-weight: 800;
     font-size:25px;
}
@media screen and (max-width: 600px) {
  .headline4  {
    margin-top:10px;
     font-weight: 400;
     font-size:14px;

  }
}

.headline5
{
    font-family: Arimo, sans-serif !important;
    font-weight: 800;
     font-size:25px;
}
@media screen and (max-width: 600px) {
  .headline5  {
     font-weight: 400;
     font-size:12px;
  }
}
.headline6
{
   font-size:35px;
   font-weight:100; 
   font-family: "Segoe UI", Arial, sans-serif;
    color: white;
}
@media screen and (max-width: 600px) {
  .headline6  {
     font-weight: 200;
     font-size:15px;
  }
}
.headline7
{
   font-size:20px;
   font-weight:400; 
   font-family: "Segoe UI", Arial, sans-serif;
    color: #fcb825;
}
@media screen and (max-width: 600px) {
  .headline7  {
     font-weight: 400;
     font-size:13px;
      font-family: "Segoe UI", Arial, sans-serif;
    color: #fcb825;
  }
}
.headline7
{
   font-size:20px;
   font-weight:400; 
   font-family: "Segoe UI", Arial, sans-serif;
    color: black;
}
@media screen and (max-width: 600px) {
  .headline7  {
     font-weight: 400;
     font-size:13px;
      font-family: "Segoe UI", Arial, sans-serif;
    color: black;
  }
}
.headline8
{
   font-size:16px;
   font-weight:100; 
   font-family: "Segoe UI", Arial, sans-serif;
     color: black;
}
@media screen and (max-width: 600px) {
  .headline8  {
     font-weight: 100;
     font-size:10px;
     font-family: "Segoe UI", Arial, sans-serif;
    color: black;
  }
}
.headline9
{
   font-size:20px;
   font-weight:400; 
   font-family: "Segoe UI", Arial, sans-serif;
    color: #fcb825;
}
@media screen and (max-width: 600px) {
  .headline9  {
     font-weight: 400;
     font-size:13px;
      font-family: "Segoe UI", Arial, sans-serif;
    color: #fcb825;
  }
}
.headline8
{
   font-size:16px;
   font-weight:100; 
   font-family: "Segoe UI", Arial, sans-serif;
     color: #fcb825;
}
@media screen and (max-width: 600px) {
  .headline8  {
     font-weight: 100;
     font-size:10px;
     font-family: "Segoe UI", Arial, sans-serif;
    color: #fcb825;
  }
}
.line
{
  border-style: solid;
  border: width 1px;
  border-color:#e0dede;

}
.postbox{

  height: 42vh;
  background-color:white;
  padding:8px;
  
  
}
@media screen and (max-width: 600px) {
  .postbox  {
   height: auto;
  background-color:white;
  padding:8px;
  }
}
.projectbox{
  max-height: 350px;
  min-height: 350px;
  background-color:white;
  
  
}
.post_caption
{
  
    font-weight:600; 
    font-family: ABCWalterNeue,  sans-serif;
    color: #f84c3e;
    font-size: 2rem;
    text-decoration: none;
    line-height: 1.2;
    border-bottom-style: solid;
    border: width 1px;
    border-color:#e0dede;
  
  
}
@media screen and (max-width: 600px) {
  .post_caption  {
     font-weight: 200;  
     font-size: .8rem;
      font-family: ABCWalterNeue,  sans-serif;
      text-decoration: none;
      line-height: 1.2;

  }
}
.pro_caption
{
  
    font-weight:300; 
    font-family: ABCWalterNeue,  sans-serif;
    color: #f84c3e;
    font-size: .8rem;
    min-height: 50px;
    text-decoration: none;
    line-height: 1.3;
  
  
}
@media screen and (max-width: 600px) {
  .pro_caption  {
     font-weight: 400;  
     font-size: .7rem;
      font-family: ABCWalterNeue,  sans-serif;
  }
}
.pro_content
{
    font-size: .2rem;
   font-weight:100; 
    color: black;
    line-height: 1.3;

  
}
@media screen and (max-width: 600px) {
  .pro_content  {
     font-weight: 100;
    font-size: .6rem;
     line-height: 1.3;
  }
}

.menu_item
{
    border-width: 1px;
    border-bottom-style: solid;
    border-color: #8b919c;
    min-width: 220px;
    

}
/* Login css-----------------------------------------------------------  */

.s3_panel
{

    background-color: #f8f8f6;
   
}
.s3_panel1
{

    
    background-color:#f38421;
   
}
@media screen and (max-width: 600px) {
  .s3_panel1  {
    background-color: #f38421;
  }
}

.text1
{
    
     color: #7d7e82;
     padding-right: 6px;
     font-size: 13px;
}
.s3_textbox1
{
   
font-weight: normal;
    font-family:  ABCWalterNeue, sans-serif;
    font-size: 1.125rem;
    font-weight: 300;
    line-height: 1.3;
    

}
@media screen and (max-width: 600px) {
  .s3_textbox1  {
    font-weight: 300;
    font-size: 1.0rem;
     font-family:  ABCWalterNeue, sans-serif;
      line-height: 1.4
  }
}

.s3_textbox
{
   
   font-family:  ABCWalterNeue, sans-serif;
    font-size: 1.0rem;
    font-weight: 300;
    line-height: 1.3;
    

}
@media screen and (max-width: 600px) {
  .s3_textbox  {
    font-weight: 300;
    font-size: 0.8rem;
     font-family:  ABCWalterNeue, sans-serif;
      line-height: 1.4
  }
}
.s3_textbox2
{
   
   
    color: #7d7e82;
     font-size: 12px;
   

}
.s3_textbox4
{ 
    font-family:  ABCWalterNeue, sans-serif;
    color: black;
    font-weight: normal;
    font-size: 1rem;
    line-height: 1.2;
}
@media screen and (max-width: 600px) {
  .s3_textbox4  {
  font-weight: normal;;
    font-size: 1rem;
     font-family:  ABCWalterNeue, sans-serif;
      line-height: 1.2
  }
}
.s3_textbox3
{
    border-style: solid;
    border-width: 1px;
    border-color:#dfdeda ;
    border-radius: 4px;
    background-color: white;   
    color: #191919;
  

}



.dropdwn{

    background-color: #303338;
}

.nvlink
{
    text-decoration: none;
    color: white;

   

}
.nvlink:hover
{
    border-left-style: solid;
     border-width: 5px;
     border-color: white;
      color: white;
     text-decoration: none;
}
.s3_footer_p
{
    font-size: 13px;
    line-height: 17px;
    font-family: Arimo, sans-serif !important;
    font-weight: 400;
    font-style: normal;
    font-display: fallback;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    color: #8b919c;
    letter-spacing: .1px;
    font-kerning: normal;
    text-align: justify;
    text-justify: inter-word;
    word-spacing: -1px;
    white-space: normal;
    word-break:break-all;
    unicode-bidi: isolate;
    overflow-wrap: break-word;
    hyphens: manual;
    margin: 0 auto;
}
.s3_footer_h4
{
    font-size: 20px;
    font-weight: 600;
    line-height: 32px;
    margin: 0;
    color: white;
    font-family: Arimo, sans-serif !important;
}
.s3_footer-bg
{
    background-color: #262626;
}
.s3_padding_sm
{
    padding-top:4px;
    padding-bottom: 4px;
}
.s3_btm_border
{
    border-bottom-style: solid;
    border-width: 1px;
    border-color: gray;
}



/* Navigation Css-----------  */
.TopBar
{
   background-color: #262626;

}
@media screen and (max-width: 600px) {
  .TopBar  {
  background-color: #262626;
  border-top-color: rgba(255, 255, 255, 0.2);
  color: #8b919c;
  font-size: 12px;
  }
}
.logobox
{

    float: right;
    margin-left:15%;
    
}
.logobox2
{

    float: left;
    margin-right:15%;
    
}
.nvbar{

   background-color: #303338; 
   

}

/* Navigation Css-----------  */



.s3_top_font
{
    color: #8b919c;
    font-size: 12px;
}
.s3_login_company
{
    font-size: 12px;
    font-family: monospace;
    color:navajowhite;
}

.s3_h1 {
    font-size: 2.5rem;
    font-weight: 400;
    line-height: inherit;
    margin: 0;
    color: #262626;
   font-family: "Segoe UI", Arial, sans-serif;

}
@media screen and (max-width: 600px) {
  .s3_h1  {
    font-weight: 400;
    font-size: 2.0rem;
    color: #262626;
     font-family: "Segoe UI", Arial, sans-serif;
  }
}


.s3_h2 {
    font-size: 1.7rem;
    font-weight: 400;
    line-height: inherit;
    color: #262626;
    font-family: "Segoe UI", Arial, sans-serif;
   
}
@media screen and (max-width: 600px) {
  .s3_h2 {
     font-weight: 300;
     font-size: 1.3rem;
     color: #262626;
     font-family: "Segoe UI", Arial, sans-serif;

  }
}

.s3_h3 {
    font-size: 16px;
    font-weight: 200;
    color: dimgray;
     font-family: "Segoe UI", Arial, sans-serif;
  
}
@media screen and (max-width: 600px) {
  .s3_h3  {
    font-weight: 100;
    font-size:13px;
    color: dimgray;
     font-family: "Segoe UI", Arial, sans-serif;
  }
}


.animate-charcter
{
   text-transform: uppercase;
  background-image: linear-gradient(
    -225deg,
    #231557 0%,
   
    #fff800 100%
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: #fff;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 2s linear infinite;
  display: inline-block;
   
}

@keyframes textclip {
  to {
    background-position: 200% center;
  }
}



.mission {
    font-size: 26px;
    font-weight: 800;
    color: white;
     font-family: "Segoe UI", Arial, sans-serif;
     text-shadow: 12px 12px 4px #000000;
  
}
@media screen and (max-width: 600px) {
  .mission  {
    font-weight: 600;
    font-size:16px;
     color: white;
     font-family: "Segoe UI", Arial, sans-serif;
  }
}

.bg-image {
  /* The image used */
 
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/15.jpg");

  /* Full height */
  height: 100%;
 
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.circle {
    background-color: forestgreen;
    border-radius: 50%;
    height: 5rem;
    width: 5rem;
}
.circle2 {
    /*Permalink-usetoeditandsharethisgradient:;
    https://colorzilla.com/gradient-editor/#feccb1+0,f17432+50,ea5507+51,fb955e+100;
    Red+Gloss+%232*/background: linear-gradient(to bottom,  rgba(254,204,177,1) 0%,rgba(241,116,50,1) 50%,rgba(234,85,7,1) 51%,rgba(251,149,94,1) 100%);
    /*W3C,IE10+,FF16+,Chrome26+,Opera12+,Safari7+*/border-radius: 70%;
    height: 3rem;
    width: 3rem;
    -webkit-border-radius: 70%;
    -moz-border-radius: 70%;
    -ms-border-radius: 70%;
    -o-border-radius: 70%;
}
.center {
  display: block;
  padding-left: 10%;
 padding-right: 10%;
 
}






/* The image used */
.imgposition
{
  margin-top:160px;
}
@media screen and (max-width: 600px) {
  .imgposition  {
    margin-top:10px;
  }
}

.img_border1
{
    border-style: solid;
    border-width: 5px;
    border-color:white;
    border-radius: 10px;

}
.border2
{
    border-bottom-style: solid;
    border-width: 1px;
    border-color:#dfdeda;

}
.img-border3
{
    border-style: solid;
    border-width: 8px;
    border-color: #5f5f5f;
    border-radius: 5px 5px 60px;
}
.bg1 {
  /* The image used */
 
  background-image:  url("../images/bg5.jpg");

  /* Full height */
  height: 100%;
 
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.bg3 {
  /* The image used */
 
  background-image:  url("../images/footer.jpg");

  /* Full height */
  height: 100%;
 
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
@media screen and (max-width: 600px) {
  .bg3  {
      min-height: 300px;
      background-position: left;
      background-repeat: no-repeat;
      background-size: cover;
  }
}
.bg2 {
  /* The image used */
 
  background-image:  url("../images/15.jpg");

  /* Full height */
  min-height: 300px;
 
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media screen and (max-width: 600px) {
  .bg2  {
     min-height: 500px;
  }
}
.cont{

  min-height:70vh; background-color: #182e41; margin-top: -120px;
}
@media screen and (max-width: 600px) {
  .cont  {
     min-height:50vh; background-color: #182e41; margin-top: -110px;
  }
}

.talk{

  font-size:14px;
   font-family:  ABCWalterNeue, sans-serif;
    line-height: 1.2;
     font-weight: 400;
     color: white;
}
@media screen and (max-width: 600px) {
  .talk  {
     font-size:12px;
    font-family:  ABCWalterNeue, sans-serif;
    line-height: 1.2;
     font-weight: 400;
     color: white;
  }
}
.s3_footer_caption {
  font-size: 14px;  /* Default font size for larger screens */
  font-weight: 400;  /* Adjusted to 400 as font-weight 200 is overridden */
  text-justify: inter-word;  /* Ensures text justification with space between words */
  display: block;
  color: white;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-family: ABCWalterNeue, sans-serif;
  line-height: 1.4;  /* Line height for better readability */
}

/* Mobile Styles (Max-width: 600px) */
@media screen and (max-width: 600px) {
.s3_footer_caption {
  font-size: 12px;  /* Smaller font size for mobile */
  line-height: 1.3;  /* Adjust line height for mobile readability */
  margin-block-start: 0.5em;  /* Reduced margin on mobile */
  margin-block-end: 0.5em;  /* Reduced margin on mobile */
}
}

/* Tablet Styles (Max-width: 768px) */
@media screen and (max-width: 768px) {
.s3_footer_caption {
  font-size: 13px;  /* Slightly larger font size for tablets */
  line-height: 1.35;  /* Slightly adjusted line height for tablet */
  margin-block-start: 0.75em;  /* Slightly smaller margin for tablets */
  margin-block-end: 0.75em;  /* Slightly smaller margin for tablets */
}
}

/* Desktop Styles (Min-width: 1024px) */
@media screen and (min-width: 1024px) {
.s3_footer_caption {
  font-size: 14px;  /* Default font size for desktop */
  line-height: 1.4;  /* Standard line height for desktop */
  margin-block-start: 1em;  /* Default margin for larger screens */
  margin-block-end: 1em;  /* Default margin for larger screens */
}
}

.s3_h4 {
    font-size: 12px;
    letter-spacing: 0.1em;
    font-weight: 400;
    display: block;
    color: white;
    padding:4px;
   font-family: Arimo, sans-serif !important;
    text-transform: uppercase;
}
.s3_why_text {
    font-size: 12px;
    letter-spacing: 0.1em;
    font-weight: 400;
    display: block;
    color: white;
    padding:2px;
   font-family: Arimo, sans-serif !important;
}
.s3_h5 {
    font-size: 10px; 
    display: block;
    color: white;
    padding:2px;
    font-family: Arimo, sans-serif !important;
}
.s3_pp_txt 
{
    
   font-weight: 100;
    font-size:14px;
    color: white;
    font-family:  ABCWalterNeue, sans-serif;
    
}
.s3_p_txt 
{
    
   font-weight: 100;
    font-size:12px;
    color: black;
    font-family:  ABCWalterNeue, sans-serif;
    
}
@media screen and (max-width: 600px) {
  .s3_p_txt   {
    font-weight: 100;
    font-size:10px;
    color: black;
    font-family:  ABCWalterNeue, sans-serif;
  }
}

.bottomsection1
{
    background-color:#262626 ;
    padding-bottom:0px;

}
.bottomsection2
{
    background-color:#d3d3d3 ;
    padding-bottom:0px;

}

.s3_productbox_bar 
{
    background-color:#ea2016;

}
.s3_footerfrnt
{
    font-size: 12px;
    color: #7d7e82;
    

}
.s3_footerfrnt_url
{
   font-size: 12px;
   
    color: #7d7e82;
    
}

.w3-topbar {
    border-top: 6px solid white !important;
}

/* banner image slider  */

.slideshow-container {
    max-width: 100%;
    position: relative;
    margin: auto;
}


.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}



/* background Image  */
.bg_img 
{
    background-image: url("image/home/L.jpg");
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    height: 300px;
    margin-bottom: -5px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.section_bg
{

    background-color: #333b35;
}
/* Login css-----------------------------------------------------------  */

.login_h1
{
font-size: 45px;
font-weight:800;
font-display:block;
font-family: Verdana, sans-serif !important;
color:#b91c47 ;
}

.login_h4
{
font-size: 16px;
font-weight:500;
font-display:block;
font-family: Verdana, sans-serif !important;
color:#b91c47 ;
}

/* ------------------------------------------------------------  */

/* navbar-----------------------------------------------------------  */

.navbar_bg
{
background-color:#b91c47 ;
}

/* navbar-----------------------------------------------------------  */
.hf{
color: rgb(224, 221, 221);
text-decoration: none;
font-style: italic;

}
.hf:hover{
  color: rgb(75, 95, 247);
  text-decoration: none;
  font-style: italic;
  
  }