/* Reset */

*{margin:0;padding:0;box-sizing:border-box;}
html{
    scroll-behavior:smooth;
}
body{font-family:Arial, Helvetica, sans-serif;background:#F8FAFC;position:relative;}
body.menu-open{overflow:hidden;}
.navbar{width:100%;background:#fff;display:grid;grid-template-columns:3fr 5fr;grid-gap:10px;padding:10px 100px;box-shadow:0 2px 10px rgba(0,0,0,.08);position:fixed;top:0;left:0;z-index:1000;}
.logo img{height:60px;display:block;}

/* Navigation */

.navlinks{width:100%;display:grid;grid-template-columns:1fr 1.2fr 1.5fr 1fr 1fr;grid-gap:20px;margin-top:20px;}
.navlinks li a{text-decoration:none;color:#003B6D;font-size:16px;font-weight:600;transition:.3s;padding:7px 10px;}
.navlinks li a:hover{color:#333;}
.menubtn{display:none;}

.lander{position:relative;width:100%;height:70vh;overflow:hidden;}
.slides{width:100%;height:100%;position:relative;}
.slide{position:absolute;width:100%;height:100%;opacity:0;transition:opacity 1s ease-in-out;}
.slide.active{opacity:1;}
.slide img{width:100%;height:100%;object-fit:cover;}
.slide::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.45);}
.overlay{position:absolute;top:60%;left:50%;transform:translate(-50%,-50%);text-align:center;color:#fff;z-index:2;width:90%;}
.overlay h1{font-size:3rem;margin-bottom:15px;}
.overlay p{font-size:1.2rem;margin-bottom:25px;}
.btn{display:inline-block;padding:12px 30px;background:#f90731;color:#fff;text-decoration:none;border-radius:5px;transition:.3s;}
.btn:hover{background:#fff;}

.intro{display:block;width:100%;padding:50px 100px;background:#fff;}
.intro h2{display:block;text-align:center;color:#0B7D3E;margin-bottom:30px;font-size:32px;}
.intro p{margin-bottom:10px;text-align:center;color:#333;}
.intro a{display:block;width:200px;border-radius:14px;margin:auto;padding:10px;text-align:center;background:#f90731;color:#fff;font-size:18px;font-weight:600;}

.functions{Display:block;width:100%;padding:30px 100px;background:#003B6D;}
.functions h2{display:block;text-align:center;color:#fff;margin-bottom:30px;font-size:32px;}
.functiongrid{display:grid;grid-template-columns:repeat(3, 1fr);gap:20px;}
.functionbox{width:100%;display:block;background:#3498db;color:#fff;padding:40px 20px;text-align:center;border-radius:8px;font-size:18px;}
/* Center the last two items */
.functionbox:nth-child(4){grid-column:1 / 2;}
.functionbox:nth-child(5){grid-column:3 / 4;}
.functionbox p{margin-bottom:10px;}
.functionbox a{color:#fff;margin-bottom:10px;}
.functionbox img{width:100%;display:block;margin-bottom:10px;}

.recent{width:100%;padding:30px 100px 0px 100px;background:#fff;}
.recent h2{font-size:32px;color:#333;margin-bottom:20px;text-align:center;}
.recent p{margin-bottom:30px;color:#333;text-align:center;}
.table-wrapper{width:100%;overflow-x:auto;margin:30px 0;-webkit-overflow-scrolling:touch;}
.responsive-table{width:100%;min-width:700px;border-collapse:collapse;table-layout:fixed;font-family:Arial, Helvetica, sans-serif;background:#fff;}
/* First column is 3x wider than the others */
.responsive-table col.col-first{width:42.86%;}
.responsive-table col.col-small{width:14.285%;}
.responsive-table th,.responsive-table td{padding:15px;border:1px solid #ddd;text-align:center;vertical-align:middle;}
.responsive-table th:first-child,.responsive-table td:first-child{text-align:left;}
.responsive-table thead th{background:#0b6aa2;color:#fff;font-weight:bold;}
.responsive-table tbody tr:nth-child(even){background:#f7f7f7;}
.responsive-table td{color:#333;}

.partners{width:100%;padding:30px 100px;background:#fff;}
.partners-heading{text-align:center;margin-bottom:35px;}
.partners-heading h2{font-size:32px;color:#333;margin-bottom:20px;}
.partners-heading p{color:#333;margin-bottom:30px;}
.partners-carousel{width:100%;overflow:hidden;position:relative;}
.partners-track{display:flex;align-items:center;gap:30px;width:max-content;}
.partner{flex:0 0 auto;width:180px;height:100px;display:grid;place-items:center;background:#fff;border:1px solid #e5e5e5;border-radius:10px;transition:.3s;}
.partner:hover{transform:translateY(-5px);box-shadow:0 10px 25px rgba(0,0,0,.12);}
.partner img{max-width:140px;max-height:70px;width:auto;height:auto;object-fit:contain;filter:grayscale(100%);opacity:.8;transition:.3s;}
.partner:hover img{filter:none;opacity:1;}

footer{width:100%;padding:30px 100px;background:#222;display:grid;grid-template-columns:repeat(3, 1fr);grid-gap:30px;}
footer div{display:block;width:100%;}
footer div p,footer div h4{}
footer div h4{color:#fff;font-size:24px;margin-bottom:20px;}
footer div p{color:#fff;margin-bottom:10px;}
footer div ul{display:block;width:100%;padding:left:10px;}
footer div ul li{margin-bottom:10px;}
footer div ul li a{color:#fff;}
footer img{display:block;width:100%;max-width:250px;margin-bottom:30px;}

@media (max-width:768px){
    .navbar{padding:10px 20px;display:block;}
    .navlinks{display:none;}
    .menubtn{display:block;position:absolute;top:20px;right:20px;color:#333;font-size:30px;cursor:pointer}
    
    .overlaynav {height: 0%;width: 100%;position: fixed;z-index: 1000;top: 0%;left: 0%;background-color: rgb(0,0,0);background-color: rgba(0,0,0, 0.9);overflow-y: hidden;transition: 0.5s;}
    .overlaynav-content {position: relative;top: 25%;width: 100%;text-align: center;margin-top: 30px;}
    .overlaynav a {padding: 8px;text-decoration: none;font-size: 36px;color: #818181;display: block;transition: 0.3s;}
    .overlaynav a:hover, .overlay a:focus {color: #f1f1f1;}
    .overlaynav .closebtn {position: absolute;top: 20px;right: 45px;font-size: 60px;}

    
    .intro{padding:50px 20px;}
    .functions{padding:30px 20px;}
    .recent{padding:30px 20px 0px 20px;}
    .partners{padding:30px 20px;}
    footer{padding:30px 20px;grid-template-columns:repeat(2, 1fr);}
    
    .functiongrid{grid-template-columns:repeat(2, 1fr);}
    .functionbox:nth-child(4),.functionbox:nth-child(5){grid-column:auto;}
    
    .lander{height:60vh;}
    .overlay h1{font-size:2rem;}
    .overlay p{font-size:1rem;}
    
    .partner{width:130px;height:80px;}
    .partner img{max-width:90px;}
    
    .responsive-table{min-width:650px;}
    .responsive-table th,.responsive-table td{padding:12px;font-size:14px;}
}

@media (max-width:480px){
    footer{grid-template-columns:1fr;}
    .functionbox{grid-template-columns:1fr;}
    
    .partner{width:110px;height:70px;}
    .partner img{max-width:80px;}
    
    .responsive-table{min-width:600px;}
    .responsive-table th,.responsive-table td{padding:10px;font-size:13px;}
}

@media(max-width:992px){
    .partner{width:150px;height:90px;}
    .partner img{max-width:110px;}
}