@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{font-family:'Inter',sans-serif;background:#f4f6f9;color:#333;line-height:1.6;}
a{text-decoration:none;color:inherit;}
.container{width:92%;max-width:1300px;margin:auto;}

/* TOPBAR */
.topbar{background:#0d1b2a;color:#fff;font-size:13px;padding:6px 0;}
.topbar .row{display:flex;justify-content:space-between;flex-wrap:wrap;row-gap:4px;}

/* HEADER */
header{background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.08);position:sticky;top:0;z-index:999;}
.header-flex{display:flex;justify-content:space-between;align-items:center;padding:14px 0;}
.logo{font-size:30px;font-weight:700;color:#1b263b;}
.logo span{color:#415a77;font-weight:300;}

/* HEADER RIGHT */
.header-right{display:flex;align-items:center;gap:24px;}

/* NAV DESKTOP */
nav ul{list-style:none;display:flex;gap:30px;}
nav ul li{position:relative;}
nav ul li a{
   color:#1b263b;
   font-weight:600;
   text-decoration:none;
   font-size:15px;
   padding-bottom:3px;
   border-bottom:2px solid transparent;
   transition:.2s;
}
nav ul li a:hover{color:#101b29;border-color:#101b29;}

/* DROPDOWN */
nav ul li.dropdown .dropdown-menu{
    background:#fff;
    position:absolute;
    top:38px;
    left:0;
    min-width:220px;
    display:none;
    box-shadow:0 4px 12px rgba(0,0,0,.12);
    border-radius:6px;
    padding:10px 0;
    z-index:9999;
}
nav ul li.dropdown.open .dropdown-menu{
    display:block;
}
.dropdown-menu li a{
    display:block;padding:10px 16px;color:#333;font-size:14px;
}
.dropdown-menu li a:hover{background:#f0f4ff;color:#101b29;}

/* SOCIAL ICONS HEADER (desktop only) */
.header-social{display:flex;gap:10px;align-items:center;}
.header-social a{color:#415a77;font-size:18px;transition:.2s;}
.header-social a:hover{color:#101b29;}

/* HAMBURGER */
.hamburger{display:none;cursor:pointer;}
.hamburger span{display:block;width:28px;height:3px;background:#333;margin:4px;border-radius:3px;}

/* MOBILE NAV */
@media(max-width:900px){
    nav{display:none;}
    .hamburger{display:block;}
    .header-social{display:none;}
}
.mobile-menu{
    display:none;background:white;padding:16px 20px;
    position:absolute;top:120px;left:0;width:100%;
    box-shadow:0 3px 10px rgba(0,0,0,.15);z-index:9998;
}
.mobile-menu a{
    display:block;padding:12px 0;border-bottom:1px solid #eee;
    font-size:16px;color:#333;text-decoration:none;
}
.mm-parent{
    font-weight:600;padding:12px 0;border-bottom:1px solid #eee;
    cursor:pointer;font-size:16px;position:relative;
}
.mm-parent::after{
    content:"▾";
    position:absolute;right:10px;top:50%;transform:translateY(-50%);
    font-size:15px;color:#666;
}
.mm-child{display:none;padding-left:12px;}
.mm-child a{font-size:15px;}

/* SLIDER */
#slider{position:relative;height:500px;overflow:hidden;}
.slide{
    position:absolute;width:100%;height:100%;
    background-size:cover;background-position:center;
    opacity:0;transition:1s;
}
.slide.active{opacity:1;}
.slide-text{
    position:absolute;bottom:60px;left:50%;transform:translateX(-50%);
    background:rgba(0,0,0,0.55);
    color:#fff;padding:26px 32px;border-radius:10px;
    text-align:center;max-width:700px;width:90%;
}
.slide-text h2{font-size:34px;margin-bottom:8px;font-weight:700;}
.slide-text p{font-size:17px;}

/* ARROWS */
.arrow{
    position:absolute;top:50%;transform:translateY(-50%);
    font-size:40px;background:rgba(0,0,0,.35);
    color:#fff;padding:10px 15px;border-radius:8px;cursor:pointer;
}
.arrow.left{left:25px;} .arrow.right{right:25px;}
.arrow:hover{background:rgba(0,0,0,.6);}

/* SECTIONS */
.section{padding:60px 0;}
.section h1{font-size:32px;margin-bottom:20px;color:#1b263b;text-align:center;}

/* CARDS */
.cards{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:30px;
}
.card{
    background:white;padding:22px;border-radius:12px;
    box-shadow:0 4px 12px rgba(0,0,0,.08);
}
.card-image img{
    width:100%;border-radius:10px;margin-bottom:12px;
    height:170px;object-fit:cover;
}
.card h3{margin-bottom:10px;color:#101b29;font-size:20px;}
.card p{font-size:15px;}

/* PAGE HERO */
.page-hero{
    position:relative;padding:60px 0;
    background-size:cover;background-position:center;
    color:#fff;margin-bottom:30px;
}
.page-hero::before{
    content:'';position:absolute;inset:0;
    background:rgba(0,0,0,0.45);
}
.page-hero .container{
    position:relative;text-align:center;
}
.page-hero h1{font-size:34px;margin-bottom:6px;}
.page-hero p{font-size:14px;opacity:0.9;}
.about-hero{background-image:url('https://picsum.photos/1300/350?about');}
.blog-hero{background-image:url('https://picsum.photos/1300/350?blog');}

/* PAGE LAYOUT 3/9 */
.page-layout{
    display:grid;
    grid-template-columns:280px minmax(0,1fr);
    gap:30px;
}
.side-menu{
    background:#fff;padding:20px;border-radius:10px;
    box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.side-menu h3{font-size:18px;margin-bottom:10px;color:#1b263b;}
.side-menu ul{list-style:none;}
.side-menu li a{
    display:block;padding:7px 0;
    color:#415a77;font-size:14px;text-decoration:none;
}
.side-menu li a:hover{color:#101b29;}
.page-content{
    background:#fff;padding:24px;border-radius:10px;
    box-shadow:0 2px 8px rgba(0,0,0,.06);
    font-size:15px;
}
.page-content p{margin-bottom:12px;}

/* BLOG */
.blog-list .card a{
    color:#101b29;font-weight:700;font-size:18px;text-decoration:none;
}

/* BLOG DETAIL */
.blog-detail{
    background:white;padding:28px;border-radius:12px;
    box-shadow:0 2px 10px rgba(0,0,0,.1);
}
.blog-detail h1{margin-bottom:15px;font-size:30px;}
.blog-detail p{margin-bottom:14px;font-size:16px;line-height:1.8;}

/* FOOTER */
footer{
    background:#000;color:#bbb;
    margin-top:60px;padding:30px 0 15px;
}
.footer-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:20px;
    margin-bottom:15px;
    font-size:14px;
}
.footer-col h4{color:#fff;font-size:16px;margin-bottom:8px;}
.footer-col ul{list-style:none;}
.footer-col li a{
    color:#bbb;font-size:13px;text-decoration:none;
    display:block;padding:3px 0;
}
.footer-col li a:hover{color:#fff;}
.footer-bottom{text-align:center;font-size:13px;color:#888;}
.footer-social{display:flex;gap:10px;margin-top:8px;}
.footer-social a{color:#bbb;font-size:18px;text-decoration:none;}
.footer-social a:hover{color:#fff;}

@media(max-width:900px){
  .page-layout{grid-template-columns:1fr;}
  #slider{height:380px;}
  .slide-text h2{font-size:26px;}
}