html {
  font-size: 16px; /* Base font size */
  scroll-behavior: smooth; /* Smooth scrolling for anchor links */
}

body {
  background: white; /* Background color */
  font-family: 'Roboto', sans-serif;
  text-decoration: none;
  line-height: 1.5;
  font-weight: 500;
}

body, div {
  margin: 0  auto;
    padding: 0;
}
.whitetext {
	
	color: #f5f5f5;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

h1 {
  font-family: 'Roboto', 'Segoe UI', sans-serif ;
  font-size: 18pt;
  color: #383838; /* #0273bc; */
  /*text-transform: uppercase;*/
  margin: 6px 16px 6px 16px;
  font-weight: 700;
  text-align: left;
}



h2 {
  font-size: 16pt;
  font-family: 'Roboto', 'Segoe UI', sans-serif ;
  color: #333333;
 /* text-transform: uppercase;*/
  margin: 6px 16px 6px 16px;
  font-weight: 700;
  text-align: left;
}

h3 {
  font-size: 14pt;
  font-family: 'Segoe UI', sans-serif;
  font-weight: 700;
  color: #383838; /* #0273bc; */
  /*text-transform: uppercase;*/
  margin: 6px 16px 6px 16px;
  text-align: left;
}

h4 {
  font-size: 14pt;
  font-family: 'Segoe UI', sans-serif;
  font-weight: 700;
  text-align: center;
  color: #383838;
  line-height: 1.2;
  margin: 6px 16px 6px 16px;
}

h5 {
  font-size: 13pt;
  font-family: 'Segoe UI', sans-serif;
  font-weight: 600;
  text-align: left;
  color: #383838;
  line-height: 1.2;
  margin: 6px 16px 6px 16px;
}

h6 {
  font-size: 12pt;
  font-family: 'Segoe UI', sans-serif;
  font-weight: 600;
  text-align: center;
  color: #383838;
  line-height: 1.2;
  margin: 6px 16px 6px 16px;
}

@media (max-width: 768px) {
  h1 {
  font-size: 16pt;
  }
  h2 {
  font-size: 14pt;
  }
  h3 {
  font-size: 13pt;
  }
  h4 {
  font-size: 12pt;
  }
  h5 {
  font-size: 12pt;
  }

}


p, ul, li, ol { /*Combine p and ul for consistent size*/
  font-size: 12pt; /* Same size as h6 */
  font-family: 'Roboto', 'Segoe UI', sans-serif;
  font-weight: 500;
  color:  #4A4A4A;
  line-height: 1.5; /* Same line height as h6 */
  /*text-align: justify;  Make paragraph and list alignment same */
  margin:  16px;
  }

        .text-lead {
            font-size: 14pt;
            line-height: 1.5;
            color:  #777777;
            font-weight:400;
        }
        
   
        .text-small {
            font-size: 10pt;
            line-height: 1.5;
        }
        
        .text-xsmall {
            font-size: 8pt;
            line-height: 1.5;
        }
        


ul, li, ol {
padding-left:0px;
  margin-left: 16px; 
}




.light {
  font-weight: 300;
}

.medium {
  font-weight: 500;
}

.ttt {
padding: 0px;
margin: 0px;
}

.ttt h1,
.ttt h2,
.ttt h3,
.ttt h4,
.ttt h5,
.ttt h6,
.ttt p,
.ttt ul,
.ttt li {
margin: 6px 6px 6px 16px;
line-height: 1.4;
}

/* Basic Link Styles - Inherit Color */
a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease-in-out;
}

a:visited {}

a:hover {
 /* color: white;*/
  text-decoration: none;
}

a:active {
  color: #ff0000;
}

ul.morespace {
  margin-left: 38px;
}

.arred li, .arblu li, .argrn li {
  list-style: none;
  padding-left:0px;
  margin-left: 24px; 
}

.arred li {
  list-style-image: url("2img/arred.gif");
  
}

.arblu li {
  list-style-image: url("2img/arblu.gif");
  
}

.argrn li {
  list-style-image: url("2img/argrn.gif");
 
}

#spacekgv {
	height: 20px;
}

#spacekgv40 {
	height: 40px;
}

#page25b {
  --max-width: 1400px; /* Standard maximum desktop width */
  --side-padding: 35px; /* Responsive side padding */
  --border-radius: 0.625rem; /* 10px equivalent in rem */
  width: min(100% - 2 * var(--side-padding), var(--max-width));
  margin-inline: auto; /* Modern equivalent of margin: 0 auto */
  background: #f0f0f0; /* Light grey background */
  border-radius: var(--border-radius); /* All corners rounded */
  border: 1px solid #BBB;
  box-shadow: 0 1px 5px #BBB;
  box-sizing: border-box; /* Includes padding/border in width calculation */
  padding: 1rem; /* Add padding to contain content */
  display: flex; /* Use flexbox for flexible layout */
  flex-direction: column; /* Stack content vertically */
  align-items: stretch; /* Stretch items to container width */
}

/* Mobile-first media queries */
@media (max-width: 768px) {
  #page25b {
    --side-padding: 1rem; /* Smaller padding on mobile */
    border-radius: var(--border-radius); /* All corners rounded */
    border-left: none;
    border-right: none;
    padding: 0.5rem; /* Adjust padding for mobile */
  }
}

/* Optional: Adjust for very large screens */
@media (min-width: 1600px) {
  #page25b {
    --max-width: 1400px; /* Wider container for large screens */
  }
}

/* Main page container (your existing #page25rl) */
#page25rl {
    --max-width: 100%;
    /*--side-padding: 1.5rem;*/
    --border-radius: 0.625rem;
    width: min(100% - 2 * var(--side-padding), var(--max-width));
    margin-inline: auto;
    position: relative;
    background: #ffffff;
    border-radius: var(--border-radius) var(--border-radius) var(--border-radius) var(--border-radius);
    border: 1px solid #BBB;
    box-shadow: 0 1px 5px #BBB;
    box-sizing: border-box;
    padding: 1.5rem;
}


/* Optional: Adjust for very large screens */
@media (min-width: 1600px) {
    #page25rl {
        --max-width: 1400px; /* Wider container for large screens */
    }
}


#aboutpane {
	margin: 15px;
	height: 100%;
	padding: 10px;
	background: #fff;
/*border: 1px solid #BBB;*/border-radius: 4px;
	box-shadow: 0 1px 5px #BBB;
}

#hmn0 {
	padding: 20px 0 20px 10px;
	background: white;
	border: 1px solid #DDD;
	border-radius: 4px;
}

#dotline {
	height: 1px;
	width: 100%;
	border-bottom: 1px dotted #BBB;
}
  .full-width-grey {
    display: flex; /* Enable flexbox for responsiveness */
    width: 100%; /* Occupies the full width of its parent */
    background-color: #adb5bd; /* My favorite background color: a nice green */
    padding: 20px; /* Add some internal padding for content */
    box-sizing: border-box; /* Include padding and border in the width calculation */
    color: white; /* Optional: Set text color for better contrast */
    text-align: center; /* Optional: Center the text within the container */
    flex-direction: row; /* Default: items arranged in a row */
    justify-content: center; /* Center items horizontally */
    align-items: center; /* Center items vertically */
    flex-wrap: wrap; /* Allow items to wrap to the next line if needed */
  }


.pagetitle25 {
  width: 100%;
  /* Set a minimum height or a height based on content */
  min-height: 80px;
  /* or height: 50vh; */
  background: linear-gradient(to top, #000428 0%, #004e92 100%);
  /*background-image: url('bg-amenu.jpg');  
  background-size: cover; 
  background-position: center;
  background-repeat: no-repeat;*/

  display: flex; /* For centering content if needed */
  justify-content: center;
  align-items: center;

  color: white; /* Example text color */
  text-align: center;
}
/* Media query for mobile devices (you might need to adjust the max-width) */
@media (max-width: 768px) {
  .pagetitle25 {
    display: none !important;
  }
}

/* -------------------------Menu Cool Back to Top ------------------------- */
          #backtop {
	        position: fixed;
            left:auto;right: 20px;top:auto;bottom: 20px;
	        outline: none;
            overflow:hidden;
            color:#fff;
            text-align:center;
            background-color:rgba(49,79,96,0.84);
            height:40px;
            width:40px;
            line-height:40px;
            font-size:14px;
            border-radius:2px;
            cursor:pointer;
            transition:all 0.3s linear;
            z-index:999999;

            opacity:1;
            display:none;
        }
        #backtop:hover {
            background-color:#27CFC3;
        }
        #backtop.mcOut {
            opacity:0;
        }
        
/* Default styles (for desktop and larger screens) */
.img-no-mobile {
  width: 100%;
  /* Other container styles */
}

.img-no-mobile img {
  display: block;
  width: 100%;
  height: auto;
}


/* Media query for mobile devices */
@media (max-width: 768px) {
  .img-no-mobile {
    display: none; /* Hide the entire container */
  }
}         
/* ---------------------Above img-no-mobile--------------*/
/* Base styles for the image container */
.img-boxx {
  width: 100%;
  overflow: hidden; /* Clip the zoomed image within the container */
}

.img-boxx img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.3s ease-in-out; /* Smooth zoom transition for the image */
}

/* Zoom/Hover Effect for the Container */
.img-boxx-zoomable {
  transition: transform 0.3s ease-in-out; /* Smooth zoom transition */
}

.img-boxx-zoomable:hover {
  transform: scale(1.05); /* Slightly zoom the container */
}

/* Zoom/Hover Effect for the Image */
.img-boxx-image-zoomable img {
  transition: transform 0.3s ease-in-out; /* Smooth zoom transition for the image */
}

.img-boxx-image-zoomable:hover img {
  transform: scale(1.05); /* Slightly zoom the image */
}

/* Utility classes for hiding elements */
.hide-img-boxx {
  display: none !important;
}

.hide-img {
  display: none !important;
}

/* Media query for mobile devices (you might need to adjust the max-width) */
@media (max-width: 768px) {
  .hide-img-boxx-mobile {
    display: none !important;
  }

  .hide-img-mobile {
    display: none !important;
  }
}
/* PAGE MAIN Base container styles */
.main-container {
  width: 100%;
  max-width: 1300px; /* Adjust this to your preferred maximum content width */
  margin: 0 auto;
  padding: 0 .5rem; /* Default padding for mobile */
  box-sizing: border-box;
  background-color:white;
}

/* Responsive padding adjustments */
@media (min-width: 768px) {
  .main-container {
    padding: 0 2rem; /* Larger padding for tablets */
  }
}

@media (min-width: 1024px) {
  .main-container {
    padding: 0 2rem; /* Even larger padding for desktops */
  }
}

/* Optional: Add some vertical spacing */
.main-content {
  padding:  0; /* Vertical padding */
}

/* ----------------IMG BOXX END-----------------------*/
        
/* Demo content styles */
        .demo-section {
           /* margin-bottom: 40px; */
            padding: 5px;
            background-color: white;
            border-radius: var(--border-radius);
          /*  box-shadow: 0 2px 4px rgba(0,0,0,0.1); */
        }

        .demo-content {
            padding: 0px;
            flex-grow: 1;
        }
        
        .demo-title {
            margin-top: 0;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
        }

        /* --------------------------BOXX-------------------------- */
       .boxx {
    display: flex;
    flex-wrap: wrap;
   /* margin-left: -5px;
    margin-right: -5px; */
    
}

.boxx-item {
    box-sizing: border-box;
    padding: 5px;
    margin-bottom: 10px;
    width: 100%;
}
.boxx-item-first {
   flex-direction: column;
   display: flex;
}

.boxx-item-second {
   flex-direction: column;
   display: flex;
}


.boxx-item-hover {
            box-sizing: border-box;
            padding: 5px;
            margin-bottom: 10px;
            width: 100%;
        }

          
        .boxx-item-hover:hover {
            transform: translateY(-5px);
        }

.boxx-deco {
 
    background: #ffffff;
    border-radius: var(--border-radius) var(--border-radius) var(--border-radius) var(--border-radius);
    border: 1px solid 000080;
    box-shadow: 1px 2px 6px #000080;
    box-sizing: border-box;
    padding: 5px;
    /*new*/
    display: flex;
    flex-direction: column;
    height: 100%;
	
}
.boxx-deco2 {
    background: #ffffff;
    border-radius: 8px;
    box-sizing: border-box;
   
    margin-inline: auto;
    position: relative;
   
    
    border: 1px solid #BBB;
    box-shadow: 0 1px 5px #BBB;
    
    padding: 5px;

    /*new*/
    display: flex;
    flex-direction: column;
    height: 100%;
}

.boxx-plain {
            background: #ffffff;
}

.boxx-line {
	border:1px gray solid;
	    background: linear-gradient(135deg, #f2f4f6 0%, #dce0e5 100%);
}
        
.boxx-dark {
            background: linear-gradient(135deg, #f5f7fa 0%, #e4e7eb 100%);
            color: white;
            box-shadow: 0 3px 12px rgba(0,0,0,0.2);
}
        
.boxx-dark h1 h3 h2 p {
            color: white;
}
      
        


       


.boxx.cols-4 .boxx-item {
    display: flex; /* Makes the item itself a flex container */
}
.boxx.cols-4 .boxx-item-content {
    flex: 1; /* Makes content expand to fill available height */
    display: flex; /* Optional: for better content alignment */
    flex-direction: column; /* Stacks content vertically */
}

@media (min-width: 769px) {
    .boxx.cols-2 .boxx-item { width: calc(50% - 10px); }
    .boxx.cols-3 .boxx-item { width: calc(33.33% - 10px); }
    .boxx.cols-4 .boxx-item { width: calc(25% - 10px); align-items: stretch; /* This makes all items stretch to same height */}
    .boxx.cols-5 .boxx-item { width: calc(20% - 10px); }
    .boxx.cols-6 .boxx-item { width: calc(16.666% - 10px); }
    .boxx { align-items: stretch; }
   
}

.boxx.vertical-top { align-items: flex-start; }
.boxx.vertical-middle { align-items: center; }
.boxx.vertical-bottom { align-items: flex-end; }
.boxx.vertical-stretch { align-items: stretch; }

/*.boxx.horizontal-left { justify-content: flex-start; }
.boxx.horizontal-center { justify-content: center; }
 .boxx.horizontal-right { justify-content: flex-end; } */
.boxx-item .boxx.horizontal-right { float: right; } 
.boxx-item  .boxx.horizontal-left { float: left; } 
.boxx.horizontal-space-between { justify-content: space-between; }
.boxx.horizontal-space-around { justify-content: space-around; }
.boxx.horizontal-space-evenly { justify-content: space-evenly; }

.boxx-item-content {
    padding: 5px;
    /*border: 1px solid #e0e0e0;
    border-radius: 8px;*/
}

.boxx-item-content.left {
    background: #f8f9fa;
    text-align: left;
}

.boxx-item-content.right {
    background: #f0f8ff;
    text-align: right;
}

/* Custom width classes */
.boxx-width-left { width: 70%; }
.boxx-width-right { width: 30%; }

/* Vertical stacking */
.boxx-stack {
    display: flex;
    flex-direction: column;
}

/* Tight spacing */
.boxx-tight {
    margin-left: -5px;
    margin-right: -5px;
        padding: 5px;
    margin-bottom: 10px;

}


.boxx-nospace {
    margin: 0px;
    padding: 0px;
     border: none;
    border-radius: 0px;

}

/* Responsive split layout */
@media (min-width: 769px) {
    .boxx-split .boxx-item:first-child {
        width: 70% !important;
    }
    .boxx-split .boxx-item:last-child {
        width: 30% !important;
    }
}

@media (max-width: 768px) {
    .boxx-split .boxx-item {
        width: 100% !important;
    }
     .boxx-item-first {	order: 1; }
    .boxx-item-second { 	 order: 2; }
}

/* Responsive column classes */
@media (min-width: 769px) {
    .boxx.cols-md-2 .boxx-item {
        width: calc(50% - 10px);
    }
    .boxx.cols-md-2 .boxx-item:first-child {
        width: calc(60% - 10px);
    }
    .boxx.cols-md-2 .boxx-item:last-child {
        width: calc(40% - 10px);
    }
}

@media (max-width: 768px) {
    .boxx.cols-md-2 .boxx-item {
        width: 100%;
    }
}

/* Responsive column classes */
@media (min-width: 769px) {
    .boxx.cols-md-3 .boxx-item {
        width: calc(50% - 10px);
    }
    .boxx.cols-md-3 .boxx-item:first-child {
        width: calc(70% - 10px);
    }
    .boxx.cols-md-3 .boxx-item:last-child {
        width: calc(30% - 10px);
    }
}

@media (max-width: 768px) {
    .boxx.cols-md-3 .boxx-item {
        width: 100%;
    }
}

.boxx-img-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}


     .main-container25 {
            width: 100%;
            padding: 20px 20px;
            background: linear-gradient(to bottom right, #109bc5, #014b91);
        }
/* About Header */

:root {
	--primary-blue: #1a73e8;
	--dark-blue: #0d5bba;
	--engineering-green: #34a853;
	--it-blue: #4285f4;
	--dark-gray: #333;
	--medium-gray: #666;
	--light-gray: #f8f9fa;
	--white: #fff;
}



.about-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	color: white;
}
/* Header */
.about-header {
	background: linear-gradient(135deg, var(--primary-blue) 0%, var(--engineering-green) 100%);
	color: var(--white);
	padding: 80px 0;
	text-align: center;
	clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
	margin-bottom: 60px;
}
.about-header h1 {
	font-size: 3rem;
	margin-bottom: 20px;
	font-weight: 700;
	text-align:center;

}

.about-header p {
	font-size: 1.2rem;
	max-width: 800px;
	margin: 0 auto;
}

.section-title {
	font-size: 2.2rem;
	color: #1a73e8;
	margin-bottom: 30px;
	position: relative;
	display: inline-block;
	text-align:center;
	
}

.section-title h2 {
text-align:center;
}

.section-title:after {
	content: "";
	position: absolute;
	bottom: -10px;
	left: 50%;
	transform: translateX(-50%);
	width: 80px;
	height: 3px;
	background-color: #1a73e8;
	
}


@media (max-width: 768px) {
.about-header h1 {
	font-size: 2.2rem;
}
.section-title {
	font-size: 1.8rem;
}
}


/* CLean SPLIT Container */
        .clean-split-container {
            display: flex;
            width: 100%;
           /* min-height: 100vh; */
        }

        /* Content side - exactly 50% width */
        .clean-split-content {
            flex: 0 0 50%;
            display: flex;
            align-items: left;
            box-sizing: border-box;
            background-color: #ffffff;
            color: #333333;
        }

        /* Left content side */
        .clean-split-left {
            justify-content: flex-end;
            padding-left: 6vw; /* Standard margin from left edge */
            padding-right: 20px; /* Minimal right padding */
        }

        /* Right content side */
        .clean-split-right {
            justify-content: flex-start;
            padding-right: 6vw;  /* Standard margin from right edge */
            padding-left: 20px;   /* Minimal left padding */
        }

        .clean-split-text {
            max-width: 700px;
            width: 100%;
            padding: 2rem 0; /* Vertical padding only */
        }

        /* Dark text version */
        .clean-split-dark {
            background-color: #222222;
            color: #f0f0f0;
        }
        .clean-split-dark h1, 
        .clean-split-dark h2,
        .clean-split-dark h3 { color: #ffffff; }
        .clean-split-dark p { color: #e0e0e0; }
        .clean-split-dark a { color: #4dabf7; }
        .clean-split-dark ul li { color: #e0e0e0; }

        /* Image side - exactly 50% width, edge-to-edge */
        .clean-split-image {
            flex: 0 0 50%;
            overflow: hidden;
        }

        .clean-split-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            display: block;
        }

        /* Responsive behavior */
        @media (max-width: 768px) {
            .clean-split-container {
                flex-direction: column;
                min-height: auto;
            }

            .clean-split-content,
            .clean-split-image {
                flex: 1 1 100%;
                width: 100%;
            }

            .clean-split-content {
                order: 2;
                padding: 3rem 5vw !important; /* Consistent mobile padding */
                justify-content: left;
            }

            .clean-split-image {
                order: 1;
                height: 50vh;
            }
        }
/* END Of Clean Split */