@charset "UTF-8";
/*   
Theme Name: Bao Chi Company Template
Theme URI:
Description: template for Bao Chi Company
Author: Mr.Hoanlv
Author URI:
Version: 0.1.1
*/
/* all display
-------------------------------------------------- */
/* Animate.css custom styles */
.animate__animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

.animate__fadeInDown {
  animation-name: animate__fadeInDown;
}

.animate__fadeInLeft {
  animation-name: animate__fadeInLeft;
}

/* Custom delay classes for staggered animations */
.animate__delay-1s { animation-delay: 0.2s; }
.animate__delay-2s { animation-delay: 0.4s; }
.animate__delay-3s { animation-delay: 0.6s; }
.animate__delay-4s { animation-delay: 0.8s; }
.animate__delay-5s { animation-delay: 1s; }

/* Smooth scroll */
html {
  scroll-behavior: smooth;
}

/* Keyframes for animations */
@keyframes heroFadeIn {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animation classes */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.slide-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: all 0.8s ease-out;
}

.slide-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.slide-right {
  opacity: 0;
  transform: translateX(50px);
  transition: all 0.8s ease-out;
}

.slide-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.scale-in {
  opacity: 0;
  transform: scale(0.9);
  transition: all 0.8s ease-out;
}

.scale-in.visible {
  opacity: 1;
  transform: scale(1);
}

body{
font-family:'Poppins',sans-serif;
margin:0;
color:#333;
}

.container{
width:1200px;
max-width:95%;
margin:auto;
}

header{
background:white;
color:#333;
position:sticky;
top:0;
z-index:1000;
border-bottom:2px solid #0a2f6b;
box-shadow:0 2px 10px rgba(0,0,0,0.1);
min-height:100px;
}

.nav{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 0;
}

/* Logo styling */
.logo img{
height:70px;
width:auto;
max-height:80px;
margin-right:15px;
}

.logo{
display:flex;
align-items:center;
}

.logo-text{
display:flex;
flex-direction:column;
margin-left:10px;
text-align:center;
}

.company-name{
font-size:12px;
font-weight:600;
color:#dc3545;
line-height:1.2;
margin-bottom:3px;
}

.lab-info{
font-size:14px;
font-weight:600;
color:#0066cc;
line-height:1.3;
max-width:350px;
}

nav a{
color:#333;
margin-left:25px;
text-decoration:none;
font-weight:500;
transition:color 0.3s ease;
position:relative;
}

nav a:hover{
color:#0a2f6b;
}

nav a.active{
color:#0a2f6b;
font-weight:600;
}

nav a.active:after{
content:'';
position:absolute;
width:100%;
height:2px;
bottom:-5px;
left:0;
background:#0a2f6b;
}

.hero{
height:600px;
position:relative;
overflow:hidden;
}

.hero-slider{
position:relative;
height:100%;
}

.hero-slide{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:white;
opacity:0;
transition:opacity 1s ease-in-out;
}

.hero-slide.active{
opacity:1;
}

.hero-slide:nth-child(1){
background:url('images/banner1.png') center/cover;
}

.hero-slide:nth-child(2){
background:url('images/banner2.png') center/cover;
}

.hero-slide:nth-child(3){
background:url('images/banner3.png') center/cover;
}

/* Hero Navigation */
.hero-nav{
position:absolute;
top:50%;
transform:translateY(-50%);
width:100%;
display:flex;
justify-content:space-between;
padding:0 20px;
z-index:100;
}

.hero-prev, .hero-next{
background:rgba(255,255,255,0.3);
border:none;
color:white;
font-size:24px;
width:50px;
height:50px;
border-radius:50%;
cursor:pointer;
transition:background 0.3s ease;
}

.hero-prev:hover, .hero-next:hover{
background:rgba(255,255,255,0.5);
}

/* Hero Dots */
.hero-dots{
position:absolute;
bottom:20px;
left:50%;
transform:translateX(-50%);
display:flex;
gap:10px;
z-index:100;
}

.hero-dot{
width:12px;
height:12px;
border-radius:50%;
background:rgba(255,255,255,0.5);
cursor:pointer;
transition:background 0.3s ease;
}

.hero-dot.active{
background:white;
}

.hero h1{
font-size:48px;
}

.btn{
background:#ff9800;
padding:12px 25px;
color:white;
text-decoration:none;
border-radius:4px;
transition:all 0.3s ease;
display:inline-block;
transform:translateY(0);
}

.btn:hover{
background:#f57c00;
transform:translateY(-2px);
box-shadow:0 5px 15px rgba(255,152,0,0.3);
}

.section{
padding:80px 0;
}

.gray{
background:#f4f4f4;
}

.about-grid{
display:grid;
grid-template-columns:2fr 1fr;
gap:40px;
}

.stats{
display:flex;
flex-direction:column;
gap:20px;
}

.stats h3{
font-size:36px;
color:#0a2f6b;
}

.service-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
margin-top:40px;
}

.service-card{
background:white;
padding:30px;
border-radius:10px;
box-shadow:0 5px 20px rgba(0,0,0,0.1);
transition:0.3s;
}

.service-card:hover{
transform:translateY(-8px);
}

.slider{
margin-top:40px;
position:relative;
}

.slide{
display:none;
background:white;
padding:40px;
border-radius:10px;
box-shadow:0 5px 20px rgba(0,0,0,0.1);
}

.slide.active{
display:block;
}

.gallery{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
margin-top:40px;
}

.gallery img{
width:100%;
border-radius:10px;
transition:0.3s;
}

.gallery img:hover{
transform:scale(1.05);
}

.contact{
text-align:center;
}

/* Contact Section Background */
#contact{
background:linear-gradient(rgba(10, 47, 107, 0.2), rgba(10, 47, 107, 0.6)), url('images/contact-bg.jpg') center/cover;
color:white;
position:relative;
padding:100px 0;
}

#contact h2{
color:white;
font-size:36px;
margin-bottom:30px;
}

#contact p{
color:#f8f9fa;
font-size:16px;
margin-bottom:15px;
}

#contact p b{
color:white;
}

footer{
background:#111;
color:white;
text-align:center;
padding:15px;
}
footer p{
    margin:0;
    font-size:12px;
}

/* responsive */

@media(max-width:900px){

.service-grid{
grid-template-columns:1fr 1fr;
}

.gallery{
grid-template-columns:1fr 1fr;
}

.about-grid{
grid-template-columns:1fr;
}

.hero h1{
font-size:34px;
}

}

@media(max-width:600px){

nav{
display:none;
}

.logo img{
height:50px;
max-height:60px;
}

.company-name{
font-size:14px;
}

.lab-info{
font-size:10px;
max-width:250px;
}

header{
min-height:80px;
}

.nav{
padding:15px 0;
}

.service-grid{
grid-template-columns:1fr;
}

.gallery{
grid-template-columns:1fr;
}

}

.about-section{
padding:80px 0;
background:#fff;
}

.section-title{
text-align:center;
font-size:36px;
margin-bottom:30px;
color:#0a2f6b;
}

.about-text{
max-width:900px;
margin:auto;
margin-bottom:20px;
text-align: justify;
line-height:1.7;
}

.about-features{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
margin-top:40px;
}

.feature-item{
display:flex;
align-items:flex-start;
gap:15px;
background:#ffffff;
padding:20px;
border-radius:10px;
box-shadow:0 6px 20px rgba(0,0,0,0.08);
transition:0.3s;
}

.feature-item:hover{
transform:translateY(-6px);
box-shadow:0 10px 25px rgba(0,0,0,0.15);
}

.feature-icon{
width:55px;
height:55px;
display:flex;
align-items:center;
justify-content:center;
background:#fefc03;
color:#333;
font-size:22px;
border-radius:50%;
margin-bottom:8px;
flex-shrink:0;
}

.feature-icon i{
font-size:22px;
flex-shrink:0;
}

.feature-content h3{
margin:0;
font-size:16px;
color:#0a2f6b;
margin-bottom:6px;
}

.feature-content p{
font-size:14px;
color:#555;
margin:0;
line-height:1.5;
}
@media (max-width:992px){

.about-features{
grid-template-columns:repeat(2,1fr);
}

}

@media (max-width:768px){

.about-features{
grid-template-columns:1fr;
}

.feature-item{
padding:18px;
}

.feature-icon{
width:48px;
height:48px;
font-size:20px;
background:#fefc03;
color:#333;
border-radius:50%;
flex-shrink:0;
}

}
.icon{
font-size:40px;
margin-bottom:15px;
}

.about-top{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
align-items:center;
margin-bottom:40px;
}

.about-image img{
width:100%;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,0.2);
}

.about-gallery{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:15px;
margin-bottom:40px;
}

.about-gallery img{
width:100%;
height:150px;
object-fit:cover;
border-radius:8px;
transition:0.3s;
}

.about-gallery img:hover{
transform:scale(1.05);
}
@media (max-width:768px){

.about-top{
grid-template-columns:1fr;
}

.about-gallery{
grid-template-columns:1fr 1fr;
}

}

.services-section{
padding:90px 0;
background:#f5f7fb;
}

.section-title{
text-align:center;
font-size:36px;
color:#0a2f6b;
margin-bottom:15px;
}

.section-subtitle{
text-align:center;
max-width:700px;
margin:auto;
margin-bottom:50px;
color:#555;
}

.services-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}

.service-card{
background:white;
padding:35px;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
transition:0.3s;
border-top:4px solid #ff9800;
}

.service-card:hover{
transform:translateY(-10px);
box-shadow:0 15px 35px rgba(0,0,0,0.15);
}

.service-icon{
font-size:36px;
margin-bottom:15px;
color:#0a2f6b;
display:flex;
justify-content:center;
align-items:center;
height:60px;
}

.service-icon i{
font-size:36px;
}

.service-card h3{
color:#0a2f6b;
margin-bottom:10px;
}

.service-card ul{
margin-top:15px;
padding-left:18px;
color:#444;
}

.service-card li{
margin-bottom:6px;
}
.projects-bg{
background-image:url("images/bg-project.jpg");
background-size:cover;
background-position:center;
position:relative;
padding:100px 0;
}

.projects-bg::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(10,30,70,0.15);
}
.projects-section{
    padding:90px 0;
}
.projects-section .container{
position:relative;
z-index:2;
}
.projects-section .section-subtitle{
    color:#fff;
}
.projects-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
margin-top:50px;
}

.project-card{
background:white;
border-radius:12px;
overflow:hidden;
box-shadow:0 10px 25px rgba(0,0,0,0.1);
transition:0.4s;
}

.project-card:hover{
transform:translateY(-10px);
box-shadow:0 15px 35px rgba(0,0,0,0.2);
}

.project-card img{
width:100%;
height:200px;
object-fit:cover;
}

.project-content{
padding:25px;
}

.project-content h3{
color:#0a2f6b;
margin-bottom:10px;
}

.project-content p{
font-size:14px;
margin-bottom:6px;
color:#555;
}
.equipment-section{
padding:90px 0;
background:#f5f7fb;
}

.equipment-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
margin-top:40px;
}

.equipment-card{
background:white;
border-radius:12px;
overflow:hidden;
box-shadow:0 10px 25px rgba(0,0,0,0.1);
transition:0.3s;
}

.equipment-card:hover{
transform:translateY(-10px);
box-shadow:0 15px 35px rgba(0,0,0,0.2);
}

.equipment-card img{
width:100%;
height:220px;
object-fit:contain;
object-position:center;
background:#f8f9fa;
}

.equipment-info{
padding:20px;
text-align:center;
}

.equipment-info h3{
color:#0a2f6b;
margin-bottom:8px;
}

.equipment-info p{
font-size:14px;
color:#555;
}
/* Tablet */

@media (max-width: 992px){

.container{
width:90%;
}

/* ABOUT */

.about-features{
grid-template-columns:repeat(2,1fr);
}


/* SERVICES */

.services-grid{
grid-template-columns:repeat(2,1fr);
}


/* PROJECTS */

.projects-grid{
grid-template-columns:repeat(2,1fr);
}


/* TEXT */

.section-title{
font-size:30px;
}

.section-subtitle{
font-size:15px;
}
.equipment-grid{
grid-template-columns:repeat(2,1fr);
}
}
/* Mobile */

@media (max-width: 768px){

.section{
padding:60px 0;
}


/* ABOUT */

.about-text{
font-size:15px;
padding:0 10px;
}

.about-features{
grid-template-columns:1fr;
gap:20px;
}

.feature-box{
padding:25px;
}


/* SERVICES */

.services-grid{
grid-template-columns:1fr;
gap:25px;
}

.service-card{
padding:30px;
}

.service-icon{
font-size:36px;
}


/* PROJECTS */

.projects-grid{
grid-template-columns:1fr;
gap:25px;
}

.project-card img{
height:180px;
}

.project-content{
padding:20px;
}

.project-content h3{
font-size:18px;
}

.project-bg{
background-attachment:scroll;
}
/* TITLES */

.section-title{
font-size:26px;
}

.section-subtitle{
font-size:14px;
}
.equipment-grid{
grid-template-columns:1fr;
}
}
/* Small phones */

@media (max-width: 480px){

.section{
padding:50px 0;
}

.section-title{
font-size:22px;
}

.section-subtitle{
font-size:13px;
}


.about-text{
font-size:14px;
}


.service-card{
padding:25px;
}

.feature-box{
padding:20px;
}


.project-card img{
height:160px;
}

.project-content h3{
font-size:16px;
}
.equipment-card img{
height:200px;
object-fit:contain;
object-position:center;
background:#f8f9fa;
}
}

.lab-section{
padding:90px 0;
background:#f7f9fc;
}

.lab-intro{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
align-items:center;
margin-bottom:40px;
}

.lab-intro img{
width:100%;
border-radius:10px;
box-shadow:0 10px 25px rgba(0,0,0,0.15);
}

.lab-text{
font-size:16px;
line-height:1.7;
color:#444;
}


/* table */

.table-wrapper{
overflow-x:auto;
}

.lab-table{
width:100%;
border-collapse:collapse;
background:white;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

.lab-table th{
background:#0a2f6b;
color:white;
padding:14px;
text-align:left;
}

.lab-table td{
padding:12px;
border-bottom:1px solid #eee;
}

.lab-table tr:hover{
background:#f2f6ff;
}

.group-title td{
background:#eaf0ff;
font-weight:bold;
color:#0a2f6b;
}

@media (max-width:768px){

.lab-intro{
grid-template-columns:1fr;
}

.lab-table th,
.lab-table td{
font-size:14px;
}

}