* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

body {
  background: #f7f9fc;
  color: #222;
  overflow-x: hidden;
}
a{    
  text-decoration: none;
}

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


header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  background: rgba(10, 77, 140, 0.85);
  backdrop-filter: blur(10px);
  z-index: 1000;
}

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


.logo{

display:flex;

align-items:center;

}

.logo a{

display:flex;

align-items:center;

text-decoration:none;

}

.logo img{

width:60px;

height:60px;
    border-radius: 50px;

margin-right:15px;

transition:.3s;

}

.logo img:hover{

transform:rotate(5deg) scale(1.08);

}

.logo-text{

display:flex;

flex-direction:column;

}

.logo-text h2{

color:#fff;

font-size:28px;

font-weight:700;

line-height:30px;

margin:0;

}

.logo-text span{

color:#f4b400;

font-size:13px;

letter-spacing:1px;

text-transform:uppercase;

}


@media(max-width:991px){

.logo img{

width:48px;

height:48px;

margin-right:10px;

}

.logo-text h2{

font-size:22px;

}

.logo-text span{

font-size:11px;

}

}

@media(max-width:576px){

.logo img{

width:42px;

height:42px;

}

.logo-text h2{

font-size:18px;

}

.logo-text span{

display:none;

}

}


.menu{

display:flex;

align-items:center;

list-style:none;

}

.menu>li{

position:relative;

margin-left:30px;

}

.menu>li>a{

display:block;

padding:32px 0;

color:#fff;

font-size:14px;

font-weight:500;

text-decoration:none;

transition:.35s;

}

.menu>li>a:hover{

color:#f4b400;

}


.arrow{

font-size:11px;

margin-left:6px;

}

.submenu{

position:absolute;

top:120%;

left:0;

width:240px;

background:#fff;

border-radius:10px;

padding:12px 0;

opacity:0;

visibility:hidden;

transition:.35s;

box-shadow:0 15px 45px rgba(0,0,0,.15);

}

.dropdown:hover>.submenu{

top:100%;

opacity:1;

visibility:visible;

}

.submenu li{

position:relative;

list-style:none;

}

.submenu li a{

display:flex;

justify-content:space-between;

align-items:center;

padding:6px 22px;

color:#333;

text-decoration:none;

transition:.3s;

}

.submenu li a:hover{

background:#0a4d8c;

color:#fff;

}

.submenu-right{

position:absolute;

left:102%;

top:0;

width:240px;

background:#fff;

border-radius:10px;

opacity:0;

visibility:hidden;

transition:.35s;

box-shadow:0 15px 45px rgba(0,0,0,.15);

}

.dropdown-right:hover>.submenu-right{

opacity:1;

visibility:visible;

left:100%;

}

.menu>li>a::after{

content:"";

position:absolute;

left:0;

bottom:22px;

width:0;

height:3px;

background:#f4b400;

transition:.35s;

}

.menu>li:hover>a::after{

width:100%;

}

.mobile-btn{

display:none;

font-size:32px;

color:#fff;

cursor:pointer;

}

@media(max-width:991px){

.mobile-btn{

display:block;

}

.navbar{

position:fixed;

top:85px;

left:-100%;

width:310px;

height:100vh;

background:#083f74;

transition:.4s;

overflow:auto;

}

.navbar.active{

left:0;

}

.menu{

display:block;

padding:30px;

}

.menu>li{

margin:0;

}

.menu>li>a{

padding:16px;

border-bottom:1px solid rgba(255,255,255,.1);

}

.submenu{

display:none;

position:static;

opacity:1;

visibility:visible;

width:100%;

box-shadow:none;

padding:0;

border-radius:0;

}

.submenu-right{

display:none;

position:static;

opacity:1;

visibility:visible;

width:100%;

box-shadow:none;

}

.submenu li a{

padding-left:35px;

}

.submenu-right li a{

padding-left:55px;

}

}
































.hero {
  height: 100vh;
  position: relative;
}

.slide {
  position: absolute;
  width: 100%;
  height: 100vh;
  opacity: 0;
  transition: 1s;
  background-size: cover;
  background-position: center;
}

.slide:nth-child(1) {
  background: url('https://cibatrade.ca/file/system/site/fa/img/image1.jpg') no-repeat center/cover;
}
.slide:nth-child(2) {
  background: url('https://cibatrade.ca/file/system/site/fa/img/image3.jpg') no-repeat center/cover;
}


.slide.active {
  opacity: 1;
}

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(10, 77, 140, 0.6);
}

.hero-content {
  position: absolute;
  top: 67%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
}

.hero-content h1 {
  font-size: 45px;
}

.hero-content p {
  margin: 15px 0;
}

.btn {
  display: inline-block;
  padding: 12px 25px;
  background: #f4b400;
  color: #000;
  border-radius: 5px;
  margin-top: 10px;
  transition: 0.3s;
}

.btn:hover {
  background: #8b5e3c;
  color: #fff;
}

.btn-dark {
  display: inline-block;
  padding: 10px 20px;
  background: #0a4d8c;
  color: #fff;
  margin-top: 10px;
}


.about {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 80px 0;
  gap: 40px;
}

.about img {
  width: 100%;
  border-radius: 10px;
}


.boxes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 60px 0;
}

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

.box:hover {
  transform: translateY(-10px);
  border-top: 3px solid #0a4d8c;
}


.stats {
  display: flex;
  justify-content: space-around;
  background: #0a4d8c;
  color: #fff;
  padding: 60px 0;
  text-align: center;
}


.cta {
  text-align: center;
  padding: 80px 20px;
}


footer {
  text-align: center;
  padding: 20px;
  background: #222;
  color: #fff;
}


@media (max-width: 768px) {

  nav ul {
    display: none;
    flex-direction: column;
    background: #0a4d8c;
    position: absolute;
    top: 60px;
    right: 0;
    width: 200px;
    padding: 20px;
  }

  nav ul.active {
    display: flex;
  }

  .menu-toggle {
    display: block;
  }

  .about {
    flex-direction: column;
  }

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

  .hero-content h1 {
    font-size: 28px;
  }

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

.about-hero{
  height: 60vh;
  background: url("https://images.unsplash.com/photo-1523050854058-8df90110c9f1") center/cover;
  position: relative;
  display:flex;
  justify-content:center;
  align-items:center;
  color:white;
}

.about-hero .overlay{
  position:absolute;
  width:100%;
  height:100%;
  background: rgba(10,77,140,0.7);
}

.hero-text{
  position:relative;
  text-align:center;
}

.hero-text h1{
  font-size:45px;
}


.breadcrumb{
  padding:20px 0;
  color:#555;
}


.about-main{
  padding:80px 0;
}

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

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

.about-text h2{
  color:#0a4d8c;
  margin-bottom:15px;
}


.mv-section{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  padding:60px 10%;
  background:#f4f7fb;
}

.mv-card{
  background:#fff;
  padding:30px;
  border-radius:15px;
  box-shadow:0 10px 25px rgba(0,0,0,0.1);
  transition:0.3s;
}

.mv-card:hover{
  transform:translateY(-5px);
}

.mv-card.highlight{
  background:#0a4d8c;
  color:#fff;
}


.timeline{
  padding:80px 0;
}

.timeline h2{
  text-align:center;
  margin-bottom:40px;
  color:#0a4d8c;
}

.timeline-item{
  background:#fff;
  margin-bottom:20px;
  padding:20px;
  border-left:5px solid #f4b400;
  box-shadow:0 5px 20px rgba(0,0,0,0.1);
  border-radius:10px;
}

.timeline-item span{
  font-weight:bold;
  color:#0a4d8c;
}


@media(max-width:768px){
  .about-grid,
  .mv-section{
    grid-template-columns:1fr;
  }

  .hero-text h1{
    font-size:28px;
  }
}