﻿/* Custom scrollbar styles */
::-webkit-scrollbar {
width: 6px; /* width of the entire scrollbar */
}

::-webkit-scrollbar-track {
background: #f1f1f1; /* color of the tracking area */
}

::-webkit-scrollbar-thumb {
    background: #0253a7;
    border-radius: 6px; /* color of the scroll thumb */
}

::-webkit-scrollbar-thumb:hover {
background: #555; /* color of the scroll thumb on hover */
}

abbr{font-weight:500; text-decoration:none; font-style:italic; background:#f2f2f2}
abbr[title], acronym[title]{border-bottom:none}

a{text-decoration:none}
#topBar{background:#F19D1F}

.clrWhite{color:#fff}


#header{position: absolute;top:40px;right: 0;left: 0;z-index: 5;background-color:#fff; box-shadow: 2px 2px 10px rgb(0 0 0 / 20%); z-index:99 !important; animation-duration: 0.5s;transition: 0.5s; }
#header.is-sticky {position: fixed;padding: 8px 0;/*backdrop-filter: blur(10px);*/animation: slideDown 0.5s ease-out;}
#sliderSpace{height:110px}

.is-sticky{position:fixed !important;animation:slideDown 0.5s ease-out;}
#logo {float:left; width:350px; }
#logo img{width:100%}

#topNav{float:right; list-style:none; margin-top:60px}
#topNav li{display:inline-block; }
#topNav li a{display:block;text-decoration:none; font-weight:600; color:#0253a7; padding:8px 16px; transition:0.5s all }
#topNav li a:hover{color:#000}

#navBtn{display:none; z-index:90; float:right; margin-top:30px; margin-bottom:10px }
#navBtn .line{width: 40px;height: 3px; border-radius:3px; background-color: #00592D;display: block;margin: 5px auto;-webkit-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}

#navBtn.is-active .line:nth-child(2){opacity: 0;}
#navBtn.is-active .line:nth-child(1){-webkit-transform: translateY(8px) rotate(45deg);-ms-transform: translateY(8px) rotate(45deg);-o-transform: translateY(8px) rotate(45deg);transform: translateY(8px) rotate(45deg);}
#navBtn.is-active .line:nth-child(3){-webkit-transform: translateY(-8px) rotate(-45deg);-ms-transform: translateY(-8px) rotate(-45deg);-o-transform: translateY(-8px) rotate(-45deg);transform: translateY(-8px) rotate(-45deg);}


#banner{background:url(../images/banner-bg.jpg) no-repeat center  center; background-size:cover}
.bannerSpace{display:block; height:50px}
#imgSlider{}
#imgSlider div{width:100%}
    #imgSlider div img{width:100%}

.themeClrPrime{color:#0253a7}
.themeClrSec{color:#F19D1F}



.clrText{color:#333}
.clrGray{color:#4e4e4e}
.clrLight{color:#979797}

.clrF7{color:#f7f7f7}

.themeBgPrime{background:#0253a7}
.themeBgSec{background:#F19D1F}
.themeBgTri{background:#e6f3c1}

.anchPrime{display:inline-block; background:transparent; padding:8px 16px; border:2px solid #0253a7; color:#0253a7; transition: .5s all; font-weight:600 }
.anchPrime:hover{background:#0253a7; color:#fff}

.anchSec{display:inline-block; background:transparent; padding:8px 16px; border:2px solid #fff; color:#fff; transition: .5s all; font-weight:600 }
.anchSec:hover{background:#0253a7; color:#fff}

#serviceSection{background:#0253a7}
/*#strengthSection{background:#e3edc2}*/

#topSocial{float:right}
#topSocial .con{background:url(../images/icons/phone.png) no-repeat left center; padding-left:32px; display:inline-block; color:#fff; line-height:1.5; font-weight:600 }
    /*#topSocial .fb, #topSocial .lin, #topSocial .insta {display:inline-block; height:24px; width:24px}
    #topSocial .fb{background:url(../images/icons/facebook.png) no-repeat center center}
    #topSocial .lin{background:url(../images/icons/linked_in.png) no-repeat center center; margin-left:5px}
    #topSocial .insta{background:url(../images/icons/insta.png) no-repeat center center; margin-left:5px}*/


.whiteBox{background:#fff}
.container{position:relative}
.overlay{position: absolute;top: 0;bottom: 0;left: 0;right: 0;height: 100%;width: 100%;opacity: 0;transition: .5s ease;background-color: #fff;}
.container:hover .overlay {opacity: 0.8;}
.srv-cap {color: #0253a7;font-size: 1.5em; font-weight:bold; position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);text-align: center;}


#textFactory{display:flex; justify-content: center;}
#rawSection{background:#0253a7}

#footer{background:#282828}

#footerNav{}
#footerNav li{display:block; list-style:none}
#footerNav li a{text-decoration:none; color:#f7f7f7; padding:5px; font-weight:300; transition:all .5s; display:block}
#footerNav li a:hover{text-decoration:underline}

#site-credit{background-color:#000; color:#7a7a7a; text-align:center}
#site-credit a{text-decoration:none; display:inline-block; color:#7a7a7a; font-weight:500 }
#site-credit a:hover{color:#f7f7f7}

#ministrySection{background:#f2f2f2}

#greenTriangleTop {width: 0;height: 0;border-style: solid;border-top-width: 100px; border-right-width:0; border-bottom-width:0; border-color: transparent transparent transparent #0253a7;}
#greenTriangleBottom {width: 0;height: 0;border-style: solid; border-top-width: 0; border-bottom-width:100px; border-left-width:0; border-color: transparent #0253a7 transparent transparent;}

#lemonTriangleTop{width: 0;height: 0;border-style: solid;border-top-width: 100px; border-right-width:0; border-bottom-width:0; border-color: transparent transparent transparent #e3edc2;}
#lemonTriangleBottom{width: 0;height: 0;border-style: solid; border-top-width: 0; border-bottom-width:100px; border-left-width:0; border-color: transparent #e3edc2 transparent transparent;}

#rawTopGreen {width: 0;height: 0;border-style: solid;border-top-width: 100px; border-right-width:0; border-bottom-width:0; border-color: transparent transparent transparent #0253a7;}
#rawBottomGreen {width: 0;height: 0;border-style: solid;border-top-width: 0;border-bottom-width: 100px;border-left-width: 0;border-color: transparent #0253a7 transparent transparent;}

.pgHeader{width:100%; border-bottom:2px solid #005995}
.pg_TB_pad{padding:1.5em 0;}

/* bCrumbs*/
/*.bCrumb{list-style:none;float:left;display:inline;font-size:1em}
.bCrumb li{float:left;display:inline;margin-right:0.6em;color:#122a47; line-height:2}
.bCrumb li a{text-decoration:none;font-size:1em; font-weight:bold; color:#122a47;}
.bCrumb li a:hover{border-bottom:1px solid #2ad56e; }
.bCrumb li a.bHome{display:inline-block; height:32px; width:32px; background:url(../images/icons/home.png) no-repeat top center;}
*/


.breadcrumb {display: inline-block;	box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);overflow: hidden;border-radius: 5px;}
.breadcrumb a{text-decoration: none;outline: none;	display: block;	float: left;font-size: .9em;line-height: 36px;color: white;	padding: 0 10px 0 10px;	background: #666;background: linear-gradient(#666, #333);position: relative;}
.breadcrumb p{outline: none;	display: block;	float: left;font-size: .9em;line-height: 36px; color:#666; padding: 0 10px 0 30px;}
/*since the first link does not have a triangle before it we can reduce the left padding to make it look consistent with other links*/
.breadcrumb a:first-child {	padding-left: 20px;	border-radius: 5px 0 0 5px; /*to match with the parent's radius*/}
.breadcrumb a:first-child:before {	left: 14px;}
.breadcrumb a:last-child {border-radius: 0 5px 5px 0; padding-right: 20px;}
/*hover/active styles*/
.breadcrumb a.active{background: #333;	background: linear-gradient(#333, #000);}
.breadcrumb a.active:after{background: #333;background: linear-gradient(135deg, #333, #000);}

/*adding the arrows for the breadcrumbs using rotated pseudo elements*/
.breadcrumb a:after {content: '';position: absolute;top: 0; right: -18px; width: 36px; 	height: 36px;	transform: scale(0.707) rotate(45deg);z-index: 1;background: #f2f2f2;background: linear-gradient(135deg, #f2f2f2, #fff);box-shadow: 2px -2px 0 2px rgba(0, 0, 0, 0.4), 3px -3px 0 2px rgba(255, 255, 255, 0.1);	border-radius: 0 5px 0 50px;}
/*we dont need an arrow after the last link*/
.breadcrumb a:last-child:after {content: none;}
/*we will use the :before element to show numbers*/

.flat a, .flat a:after {background: white;color: black;transition: all 0.5s;}
.flat a:before {background: white;box-shadow: 0 0 0 1px #ccc;}
.flat a.active, .flat a.active:after{background: #0253a7; color:#fff }

.simpleList{list-style: square inside url("sqpurple.gif");}
.simpleList li{font-size:1.1em; padding:5px}

.simpleTable {font-family: "Roboto", sans-serif;border-collapse: collapse;width: 100%;}
.simpleTable td, .simpleTable th {border: 1px solid #ddd;padding: 8px;}
.simpleTable tr:nth-child(even){background-color: #f2f2f2;}
.simpleTable tr:hover {background-color: #ddd;}
.simpleTable th {padding-top: 12px;  padding-bottom: 12px;  text-align: left;  background-color: #00592D;  color: white;}

#map-canvas{width:100%;height:400px;margin:0;padding:0;}

.contactBorder_box{ border:2px solid #00592D; min-height:260px }
.contactBorder_box:hover{border:2px solid #000; transition: all .5s}

#backTop {display: inline-block;background: #0253a7 url(../images/icons/backTop.png) no-repeat center center;width: 50px;height: 50px;text-align: center;border-radius: 4px;position: fixed;bottom: 30px;right: 30px;transition: background-color .3s, opacity .5s, visibility .5s;  opacity: 0;visibility: hidden;z-index: 1000;}
#backTop:hover {cursor: pointer;background-color: #333;}
#backTop:active {background-color: #555;}
#backTop.show {opacity: 1;visibility: visible;}

.bottomLogo{width:60%}


.products-section {font-family: Arial, sans-serif;}
.section-title {text-align: center;margin-bottom: 30px;}
.tabs {text-align: center;margin-bottom: 30px;}

.tab-btn {padding: 12px 25px;border: none;background: #e5e5e5; margin: 0 5px;cursor: pointer;font-size: 16px; font-weight:600; transition: 0.3s;}
.tab-btn.active {background: #0d6efd;color: white;}
.tab-panel {display: none;}
.tab-panel.active {display: block;}
.product-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 20px;}
.product-card {background: #fff;padding: 20px;border: 1px solid #eee;transition: 0.3s;}
.product-card:hover {box-shadow: 0 5px 15px rgba(0,0,0,0.08);}
.product-card h4 {margin-bottom: 10px;}
.product-card p {font-size: 14px;color: #555;}

.about-page {line-height: 1.6;}
.container-abt {margin: auto;padding: 60px 20px;}
.light-bg {background: #f7f7f7;}
.section-title {text-align: center;font-size: 32px;margin-bottom: 30px;}
.center-text {text-align: center;margin-bottom: 30px;}
.strength-grid {display: grid;grid-template-columns: repeat(auto-fit,minmax(220px,1fr));gap: 20px;}
.strength-card {background: #fff;padding: 20px;border: 1px solid #eee;text-align: center;font-weight: 600;}
.vision-mission {display: grid;grid-template-columns: 1fr 1fr;gap: 40px;}
.vision,.mission {background: #fff;padding: 30px;border: 1px solid #eee;}
.mission ul {padding-left: 18px;}
.division-grid {display: grid;grid-template-columns: repeat(auto-fit,minmax(350px,1fr));gap: 30px;}
.division-card {background: #fff;padding: 30px;border: 1px solid #eee;}
.division-card ul {padding-left: 18px;}
.quality-grid {display: grid;grid-template-columns: repeat(auto-fit,minmax(200px,1fr));gap: 20px;text-align: center;}
.quality-grid div {background: #fff;padding: 20px;border: 1px solid #eee;font-weight: 600;}
.leadership-grid {display: grid;grid-template-columns: repeat(auto-fit,minmax(280px,1fr));gap: 25px;}
.leader-card {background: #fff;padding: 25px;border: 1px solid #eee;}
.growth-grid {display: grid;grid-template-columns: repeat(auto-fit,minmax(250px,1fr));gap: 20px;}
.growth-grid div {background: #fff;padding: 20px;border: 1px solid #eee;text-align: center;font-weight: 600;}

.leaderImg{width:60%}

.marquee-wrapper {width: 100%;overflow: hidden;position: relative;}
.marquee-wrapper::before,.marquee-wrapper::after {content: '';position: absolute;top: 0;bottom: 0;width: 120px;z-index: 2;pointer-events: none;}
.marquee-wrapper::before {left: 0;}
.marquee-wrapper::after {right: 0;}
.marquee-track {display: flex;align-items: center;gap: 24px;width: max-content;animation: marquee-scroll 28s linear infinite;}
.marquee-track:hover {animation-play-state: paused; /* Pauses on hover */}
.logo-card {display: flex;align-items: center;justify-content: center;background: #ffffff;border: 1px solid #e5e7eb;border-radius: 12px;padding: 18px 32px;flex-shrink: 0;transition: box-shadow 0.25s ease, transform 0.25s ease;}
.logo-card:hover {box-shadow: 0 6px 20px rgba(0,0,0,0.10);transform: translateY(-3px);}
.logo-card img {width:150px}


@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Respects accessibility preference */
@media (prefers-reduced-motion: reduce) {
    .marquee-track {
        animation: none;
    }
}
/* ===================== Media Queries Starts here ==================== */
@media screen and (max-width: 1600px)
{

}
@media screen and (max-width: 1200px)
{	

}
@media screen and (max-width: 1140px) 
{

}
@media screen and (max-width: 1024px)
{
    #logo{width:300px}
    #topNav{margin-top:60px}
}
@media screen and (max-width: 920px) 
{

}
@media screen and (max-width: 860px) {
    #topNav{display:none; position:absolute; background:#fff; top:40px; right:20px; width:170px; z-index:9; box-shadow: 2px 2px 8px rgb(0 0 0 / 10%); }
    #navBtn{display:block; }
    #topNav li {display:block; text-align:center;  }
    #topNav li a{ padding:10px 10px 20px 10px; border-bottom:1px solid #f2f2f2}
    #logo{width:200px}
    #sliderSpace{height:90px}
}
@media screen and (max-width: 800px) 
{
    #textFactory {align-items:center; }
    #textFactory img{display:none}
    .bottomLogo{ width:200px}

}
@media screen and (max-width: 768px) 
{
    .vision-mission {grid-template-columns: 1fr;}
}
@media screen and (max-width: 640px) 
{
    
}
@media screen and (max-width: 480px) 
{
    
    #navBtn{margin-top:30px}
}
@media screen and (max-width: 360px) 
{

}