body{margin:0; padding: 0; overflow-x: hidden;}
:root{
	--smaller:10px;
	--small:12px;
	--medium:14px;
	--regular:16px;
	--large:20px;
	--xlarge:24px;
	--xxlarge:30px;

	--background: #00A99D;
	--primary-col:#0b6962;
	--foreground: white;
	--dark-foreground: #8c8c8c;
	--accent:#ffae00;
}
::-webkit-scrollbar{width: 10px;}
::-webkit-scrollbar-thumb{background-color: var(--background);
border:1px solid white;}
*{font-size: var(--medium); scroll-behavior: smooth;}
nav{background-color: white; min-height: 80px;}

.nav-section{display: flex; justify-content: space-between; align-items: center;
 padding: 20px; }
.nav-section .icon{}
.nav-icon i{font-size: 20px;}
.links{}
.links ul{padding: 0; display: flex; justify-content: center; column-gap: 10px;}
.links ul li{list-style: none;}
.links ul li a{text-decoration: none; color: black; font-weight: bold;
padding: 18px;}
.links ul li a:hover{color: var(--background);}

.mobile-links{margin-top: 20px;}
.mobile-links ul{padding: 0; padding: 20px;}
.mobile-links ul li{list-style: none; padding: 5px; border-bottom: 1px solid white;}
.mobile-links ul li a{text-decoration: none; color: black;}
.mobile-links ul .active-link{background-color: black;}
.mobile-links ul .active-link a {color: white;}

.banner{border-bottom: 50px solid var(--primary-col);}
.banner-inner{height: 700px; background:linear-gradient(40deg,white,white,var(--background));}
.banner-inner > div{height: 100%;}
.banner-txt{display: flex; flex-direction: column; color: white; padding: 80px;
margin-left: 200px; margin-top: 100px; width: 700px; color: var(--primary-col);}
.banner-illustration{position:absolute; right:100px; margin-top: -450px;}

.types-section{padding: 40px; margin-top: 50px;}
.type-box-container{display: flex; justify-content: center; align-items: center; gap: 50px;
flex-wrap: wrap; margin-top: 100px;}
.type-box{width: 400px; display: flex; flex-direction: column; gap: 10px; text-align: center; align-items: center;
box-shadow: 0 0 10px rgb(201, 201, 201); padding: 40px; border-radius: 20px;}
.type-box-img{width: 100px; height: 100px; display: flex; justify-content: center; align-items: center; border-radius: 50%;
background-color: var(--background); color: white;}
.type-box-img i{font-size: 40px;}


.services-section{padding: 40px; margin-top: 100px; margin-bottom: 100px;}
.services-container{display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
margin-top: 50px; gap: 20px; padding-left: 200px; padding-right: 200px;}
.service-box{position: relative; width: 350px;}
.service-box img{width: 100%; height: 100%; object-fit: cover;}
.service-box-txt{ width: calc(100% - 40px); margin-left: 20px; box-shadow: 0 0 6px rgb(198, 198, 198);
padding: 10px; transform: translate(0,-50px); background-color: white; text-align: center;}


.note-section{
	background-color: var(--primary-col); display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 10px; color: white; padding: 60px;
}


.section-two > div{padding: 20px;}
.section-three{padding: 70px;}
.section-four{padding: 70px;}
.section-five{padding: 70px;}


.brief{padding: 40px; background-color: rgb(191, 238, 51);}
.section-header{display: flex; align-items: center; flex-direction: column;}



/*about*/
.about-banner{display: flex; justify-content: center; align-items: center; height: 50vh; background:url("../bitmap/banner.png");
color: white; flex-direction: column; background-size: cover;}
.about-sect-1{position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column;
padding: 30px; text-align: center; background-color: var(--primary-col); width: max-content; margin-left: 50%;
transform: translate(-50%,0); margin-top: 50px; color: white;}
.about-sect-1 p{width: 500px;}
.about-sect-point{position: absolute; right: -168px; margin-top: -70px; }

.core-values{padding: 100px;}
.core-values .values{display: flex; flex-wrap: wrap; margin-top: 40px;}
.values > div{display: flex; gap: 10px; align-items: center;}

.history{color: white; background-color: var(--primary-col); padding: 40px;}


/* Contact */
.contact-banner{display: flex; justify-content: center; align-items: center; height: 50vh; background:url("../bitmap/customer-service.png");
	color: var(--primary-col); background-size: cover; flex-direction: column;}
.contact-form{ display: flex; flex-direction: column; background-color: var(--primary-col);
padding: 40px; color: white;}
.contact-form label{}
.contact-form input{width: 100%; max-width: 500px; padding: 40px; border: none;
border: 1px solid white; outline: none; background: none;}

.contact-form textarea{width: 100%; max-width: 500px;  padding: 40px; border: none;
	border: 1px solid white; outline: none; background: none;}
.s4-details{ margin-top: 50px; text-align: center;}

.pic-frame-container{display: flex; justify-content: center;}
.pic-frame{width: 300px; border: 1px solid; padding: 10px; text-align: center;}
.pic-frame .pic{width: 100%; height: 250px; background-color: gray; margin-bottom: 20px;}
.pic img{width: 100%; height: 100%; object-fit: cover; object-position: 0 -1px;}

.brief-text{max-width: 400px; text-align: center; margin-left: 50%; transform: translate(-50%,0); min-width: 350px;}

.main-focus{padding: 40px;background-color: var(--background); color: white;}
.focus-container{display: flex; justify-content: center; column-gap: 40px; margin-top: 20px; flex-wrap: wrap;}
.focus-row{width: 300px; text-align: center}
.focus-row i{font-size: 50px;}

.business-values{padding: 40px;}
.gallery{padding: 40px; background-color: #f2f2f2;}
.caro{ height: 500px; padding: 10px; margin-left: 50%; transform: translate(-50%,0); border: 1px solid black; min-width: 400px;}
.caro-inner,.caro-item{width: 100%; height: 100%;}
.caro-item img{width: 100%; height: 100%; object-fit: cover; object-position: 0 1px;}

/*about ends here*/


/*Products*/
.product-value-container{display: flex; justify-content: center;
align-items: center; flex-wrap: wrap; padding: 40px; column-gap: 30px; grid-row-gap: 20px;}
.product-value-row{width: 350px; padding: 20px; border-radius: 10px; box-shadow: 0 0 6px gray; text-align: center}
.product-value-row i{font-size: 50px;}
.products{background-color: var(--background); padding: 40px; color: white;}
.products-other{background-color: #f2f2f2; padding: 40px;}

.product-carousel{ width: 90%; height: 250px; margin-left: 50%; transform: translate(-50%,0); margin-top: 40px; position: relative; overflow: hidden;}
.product-carousel-inner{position: absolute; height: 100%;
display: flex; column-gap: 10px; animation: 3s slide linear infinite;}
.product-caro-item{width: 200px; height: 100%; background-color: white;}
.product-caro-item img{width: 100%; height: 100%; object-fit: cover;}

.product-box-container{display: flex; column-gap: 30px; margin-top: 50px; justify-content: center; flex-wrap: wrap; grid-row-gap: 30px;}
.product-box{width: 200px; height: 200px; background-color: white; padding: 20px; border-radius: 10px;}
.product-box img{width: 100%; height: 100%; object-fit: cover;}

.brands{padding: 40px;}
.brand-box-container{display: flex; column-gap: 30px; margin-top: 50px; justify-content: center; flex-wrap: wrap; grid-row-gap: 30px;}
.brand-box{width: 200px; height: 200px; background-color: white; padding: 20px; border-radius: 10px; box-shadow: 0 0 6px rgba(0,0,0,0.4);}
.brand-box:hover{box-shadow: 0 0 10px rgba(0,0,0,0.6);}
.brand-box img{width: 100%; height: 100%; object-fit: contain;}
/*Products ends here*/




.objective-container{}
.objective-row{display: flex; column-gap: 20px; align-items: center; justify-content: center; flex-wrap: wrap;}
.objective-row:nth-child(even){flex-direction: row-reverse}
.object-img{width:230px; height: 230px; flex-shrink: 0;}
.object-img img{width: 100%; height: 100%; object-fit: contain;}
.object-txt{width: 500px;}

footer{padding: 40px; background-color: rgb(20, 20, 20); color: white; position: relative}
.icon-nav{position: absolute; right: 80px; bottom: 60px; border:1px solid white;
text-decoration: none; color: white; padding: 10px;}

.footer-inner{display: flex; justify-content: center; align-items: center; column-gap: 40px;}
.footer-inner section{width:500px;}
.footer-inner .footer-links{width: 200px;}
.footer-links ul{padding:0;}
.footer-links ul li{list-style: none; padding: 5px;}
.footer-links ul .active-link a{font-weight: bold;}
.footer-links ul li a{text-decoration: none; color: white;}


.footer-contact ul{margin-top: 10px;}
.footer-contact ul li{list-style: none; padding: 5px;}
.footer-contact ul .active-link a{font-weight: bold;}
.footer-contact ul li a{text-decoration: none; color: white;}


.socials{display: flex; column-gap: 10px; justify-content: center;}
.socials i{font-size: 20px;}
.socials a{text-decoration: none; color: white;}
.socials a:hover{text-decoration: none; color: var(--accent);}
.contact-info{column-gap: 10px; display: flex; justify-content: center; align-items: center;}
.contact-info i{width: 40px; height: 40px; display: flex; align-items: center; border:1px solid white; border-radius: 50px; justify-content: center;}