/* GLOBAL */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
}

/* TOPBAR */
.topbar {
  display: flex;
  justify-content: space-between;
  padding: 6px 40px;
  background: black;
  color: white;
}

/* HEADER */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 40px;
  background: #f5f5f5;
}

nav a {
  margin: 0 10px;
  text-decoration: none;
  color: black;
}

.search-btn {
  background: #f4511e;
  color: white;
  border: none;
  padding: 8px 15px;
}

/* HERO */
.hero {
  display: flex;
  padding: 20px 40px;
  gap: 20px;
}

/* SIDEBAR */
.sidebar {
  width: 260px;
  background: #178a96;
  color: white;
  border-radius: 6px;
  padding: 15px;
}

.sidebar ul {
  list-style: none;
  padding: 0;
}

.sidebar li {
  padding: 10px 0;
  border-bottom: 1px solid #ffffff40;
}

/* SLIDER */
.slider {
  flex: 1;
}

.slider img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

/* FEATURES */
.features {
  display: flex;
  justify-content: space-around;
  text-align: center;
  padding: 40px;
}

.circle {
  width: 80px;
  height: 80px;
  background: #1e5cc4;
  border-radius: 50%;
  margin: auto;
}

/* ENQUIRY */
.enquiry {
  display: flex;
  padding: 40px;
  gap: 20px;
}

.form input, .form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
}

/* FOOTER */
footer {
  display: flex;
  justify-content: space-around;
  padding: 0px;
  background: black;
  color: white;
}











body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #f5f5f5;
}

/* HEADER */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 40px;
  background: white;
  border-bottom: 2px solid #ddd;
}

.logo {
  font-weight: bold;
  color: #1e88a8;
}

nav a {
  margin: 0 10px;
  text-decoration: none;
  color: #333;
}

nav a.active {
  color: #1e88a8;
  font-weight: bold;
}

.search-btn {
  background: #f4511e;
  color: white;
  border: none;
  padding: 8px 15px;
}

/* BREADCRUMB */
.breadcrumb {
  padding: 15px 40px;
  font-size: 14px;
}

/* LAYOUT */
.container {
  display: flex;
  padding: 20px 40px;
}

/* SIDEBAR */
.hero-section {
  display: flex;
  padding: 20px 40px;
  gap: 20px;
}

/* SIDEBAR */
.sidebar {
  width: 260px;
  background: #178a96;
  color: white;
  border-radius: 6px;
  padding: 15px;
}

.sidebar h3 {
  margin-top: 0;
  border-bottom: 2px solid white;
  padding-bottom: 10px;
  letter-spacing: 1px;
}

.sidebar ul {
  list-style: none;
  padding: 0;
}

.sidebar li {
  padding: 10px 0;
  border-bottom: 1px solid #ffffff40;
  cursor: pointer;
  transition: 0.3s;
}

.sidebar li:hover {
  padding-left: 8px;
  background: #157a85;
}

/* SLIDER */
.slider {
  flex: 1;
}

.slider img {
  width: 100%;
  height: 530px;
  object-fit: cover;
  border-radius: 6px;
}
/* CONTENT */
.content {
  flex: 1;
  margin-left: 30px;
}

.content h2 {
  margin-top: 0;
}

.content span {
  font-size: 14px;
  color: gray;
}

/* SORT */
.sort {
  margin: 15px 0;
}

.sort span {
  margin: 0 5px;
  cursor: pointer;
}

.sort .active {
  color: #1e88a8;
  font-weight: bold;
}

/* GRID */
/* .grid {
  display: flex;
  gap: 20px;
} */

/* CARD */
.card {
  background: #fff;
  padding: 15px;
  width: 250px;
  text-align: center;
  border-radius: 5px;
  /* box-shadow: 0 2px 5px rgba(0,0,0,0.1); */
}

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

.card h4 {
  margin: 10px 0 5px;
}

.card p {
  color: gray;
}

.wishlist {
  display: block;
  margin-top: 10px;
  color: gray;
  cursor: pointer;
}


.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #000;
  color: white;
  padding: 6px 40px;
  font-size: 14px;
}

.topbar .right a {
  color: white;
  margin-left: 12px;
  font-size: 14px;
  transition: 0.3s;
}

.topbar .right a:nth-child(1):hover { color: #1877f2; } /* Facebook */
.topbar .right a:nth-child(2):hover { color: #1da1f2; } /* Twitter */
.topbar .right a:nth-child(3):hover { color: #e4405f; } /* Instagram */
.topbar .right a:nth-child(4):hover { color: #0077b5; } /* LinkedIn */
.topbar .right a:nth-child(5):hover { color: #ff0000; } /* YouTube */



/* mobile */
@media (max-width: 768px) {

  /* TOPBAR */
  .topbar {
    flex-direction: column;
    text-align: center;
    padding: 8px;
  }

  /* HEADER */
  header {
    flex-direction: column;
    text-align: center;
  }

  nav {
    margin: 10px 0;
  }

  nav a {
    display: block;
    margin: 5px 0;
  }

  .search-btn {
    margin-top: 10px;
  }

  /* HERO */
  .hero {
    flex-direction: column;
    padding: 15px;
  }

  .sidebar {
    width: 100%;
  }

  .slider img {
    height: auto;
  }

  /* FEATURES */
  .features {
    flex-direction: column;
    gap: 30px;
  }

  /* ENQUIRY */
  .enquiry {
    flex-direction: column;
    padding: 20px;
  }

  /* FOOTER */
  footer {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }
}


.features {
  display: flex;
  justify-content: space-around;
  text-align: center;
  padding: 50px 40px;
  background: #f9f9f9;
}

.feature {
  width: 220px;
  transition: 0.3s;
}

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

/* ICON CIRCLE */
.circle {
  width: 80px;
  height: 80px;
  background: #633C1D;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
}

.circle i {
  color: white;
  font-size: 30px;
}

/* TEXT */
.feature h3 {
  margin-top: 15px;
  font-size: 18px;
}

.feature p {
  font-size: 14px;
  color: #555;
  margin-top: 10px;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .features {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }

  .feature {
    width: 80%;
  }
}



.enquiry {
  display: flex;
  gap: 30px;
  padding: 50px 40px;
  background: #f9f9f9;
}

/* VIDEO */
.video {
  flex: 1;
}

/* FORM */
.form {
  flex: 1;
  background: white;
  padding: 25px;
  border-radius: 8px;
  /* box-shadow: 0 3px 10px rgba(0,0,0,0.1); */
}

.form h2 {
  margin-bottom: 20px;
  color: #1e5cc4;
}

/* ROW (2 columns) */
.row {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.form input,
.form select,
.form textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

.form textarea {
  height: 100px;
  resize: none;
  margin-bottom: 15px;
}

/* BUTTON */
.form button {
  width: 100%;
  background: #f4511e;
  color: white;
  border: none;
  padding: 12px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 4px;
  transition: 0.3s;
}

.form button:hover {
  background: #d84315;
}


@media (max-width: 768px) {

  .enquiry {
    flex-direction: column;
    padding: 20px;
  }

  .row {
    flex-direction: column;
  }

}




.footer {
  background: #0b1c2c;
  color: #ddd;
  padding-top: 40px;
}

.footer-container {
  display: flex;
  justify-content: space-between;
  padding: 0 40px 40px;
  flex-wrap: wrap;
}

.footer-col {
  width: 23%;
}

.footer-col h3 {
  color: #fff;
  margin-bottom: 15px;
}

.footer-col p {
  font-size: 14px;
  line-height: 1.6;
}

/* LINKS */
.footer-col ul {
  list-style: none;
  padding: 0;
}

.footer-col ul li {
  margin-bottom: 8px;
}

.footer-col ul li a {
  text-decoration: none;
  color: #ccc;
  font-size: 14px;
}

.footer-col ul li a:hover {
  color: #f4511e;
}

/* SOCIAL */
.social a {
  display: inline-block;
  margin-right: 10px;
  color: white;
  font-size: 14px;
  background: #1e5cc4;
  padding: 8px;
  border-radius: 50%;
}

.social a:hover {
  background: #f4511e;
}

/* NEWSLETTER */
.newsletter {
  margin-top: 10px;
}

.newsletter input {
  width: 100%;
  padding: 8px;
  margin-bottom: 8px;
  border: none;
}

.newsletter button {
  width: 100%;
  padding: 8px;
  background: #f4511e;
  border: none;
  color: white;
  cursor: pointer;
}

/* BOTTOM */
.footer-bottom {
  text-align: center;
  padding: 15px;
  background: #06121d;
  color: #ffffff;
  font-size: 14px;
}

@media (max-width: 768px) {

  .footer-container {
    flex-direction: column;
    gap: 30px;
  }

  .footer-col {
    width: 100%;
  }

}
.grid {
  display: grid;
 grid-template-columns:repeat(2, 600px);
  gap: 25px;
     justify-content:center;
}
@media (max-width: 992px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

.card {
  background: #fff;
  padding: 15px;
  text-align: center;
  border-radius: 6px;
  /* box-shadow: 0 2px 8px rgba(0,0,0,0.1); */
}

.card img {
  width: 100%;
  height: 250px;
  object-fit: cover;
}
@media (max-width: 768px) {

  /* TOPBAR */
  .topbar {
    flex-direction: column;
    text-align: center;
    padding: 8px;
    font-size: 12px;
  }

  /* HEADER */
  header {
    flex-direction: column;
    text-align: center;
    padding: 15px;
  }

  .logo img {
    width: 180px;
    margin: 0;
  }

  nav {
    margin: 10px 0;
  }

  nav a {
    display: block;
    margin: 5px 0;
  }

  .search-btn {
    margin-top: 10px;
  }

  /* BREADCRUMB */
  .breadcrumb {
    padding: 10px 15px;
    font-size: 13px;
  }

  /* MAIN CONTAINER */
  .container {
    flex-direction: column;
    padding: 15px;
  }

  /* SIDEBAR */
  .sidebar {
    width: 100%;
    margin-bottom: 15px;
  }

  /* CONTENT */
  .content {
    margin-left: 0;
  }

  .content h2 {
    font-size: 18px;
  }

  /* GRID → 1 COLUMN */
  /* .grid {
    grid-template-columns: 1fr;
  } */

  /* CARD IMAGE */
  .card img {
    height: 200px;
  }

  /* FOOTER */
  .footer-container {
    flex-direction: column;
    gap: 25px;
    padding: 20px;
  }

  .footer-col {
    width: 100%;
  }

}





/* about */
/* HERO */
.about-hero {
  background: linear-gradient(to right, #1e5cc4, #178a96);
  color: white;
  text-align: center;
  padding: 60px 20px;
}

.about-hero h1 {
  font-size: 36px;
  margin-bottom: 10px;
}

/* ABOUT SECTION */
.about-content {
  display: flex;
  gap: 40px;
  padding: 50px 40px;
}

.about-text {
  flex: 1;
}

.about-text h2 {
  color: #1e5cc4;
}

.about-image {
  flex: 1;
}

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

/* VALUES */
.values {
  background: #f5f5f5;
  padding: 50px 40px;
  text-align: center;
}

.value-grid {
  display: flex;
  justify-content: space-around;
  margin-top: 30px;
}

.value-card {
  width: 220px;
  background: white;
  padding: 20px;
  border-radius: 8px;
  transition: 0.3s;
}

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

.value-card i {
  font-size: 30px;
  color: #1e5cc4;
  margin-bottom: 10px;
}

@media (max-width: 768px) {

  .about-content {
    flex-direction: column;
    padding: 20px;
  }

  .value-grid {
    flex-direction: column;
    gap: 20px;
    align-items: center;
  }

  .value-card {
    width: 90%;
  }

  .about-hero h1 {
    font-size: 24px;
  }

}
/* contact */
/* HERO */
.contact-hero {
  background: linear-gradient(to right, #1e5cc4, #277bdb);
  color: white;
  text-align: center;
  padding: 60px 20px;
}

.contact-hero h1 {
  font-size: 56px;
}

/* CONTAINER */
.contact-container {
  display: flex;
  gap: 40px;
  padding: 50px 40px;
}

/* INFO */
.contact-info {
  flex: 1;
  text-align: center;
  margin-top: 30px;
}

.contact-info h2 {
  color: #1e5cc4;
}

.contact-info p {
  margin: 10px 0;
  font-size: 14px;
}

.contact-info i {
  margin-right: 8px;
  color: #633c1d;
}

/* FORM */
.contact-form {
  flex: 1;
  background: #fff;
  padding: 25px;
  border-radius: 8px;
  /* box-shadow: 0 3px 10px rgba(0,0,0,0.1); */
}

.contact-form h2 {
  margin-bottom: 15px;
}

.row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
}

.contact-form textarea {
  height: 100px;
  margin-bottom: 10px;
}

/* BUTTON */
.contact-form button {
  width: 100%;
  background: #633c1d;
  color: white;
  border: none;
  padding: 12px;
  cursor: pointer;
}

/* MAP */
.map iframe {
  width: 100%;
  height: 300px;
  border: none;
}


@media (max-width: 768px) {

  .contact-container {
    flex-direction: column;
    padding: 20px;
  }

  .row {
    flex-direction: column;
  }

  .contact-hero h1 {
    font-size: 24px;
  }

}

/* HERO */
.training-hero {
  background: linear-gradient(to right, #0d2e66, #bcccea);
  color: white;
  text-align: center;
  padding: 60px 20px;
}

.training-hero h1 {
  font-size: 36px;
}

/* INTRO */
.training-intro {
  text-align: center;
  padding: 40px;
}

/* GRID */
.training-grid {
  display: flex;
  justify-content: space-around;
  padding: 40px;
}

.training-card {
  width: 280px;
  text-align: center;
  background: #fff;
  padding: 25px;
  border-radius: 8px;
  /* box-shadow: 0 3px 10px rgba(0,0,0,0.1); */
}

.training-card i {
  font-size: 35px;
  color: #1e5cc4;
  margin-bottom: 10px;
}

/* DETAILS */
.training-details {
  display: flex;
  justify-content: space-around;
  padding: 40px;
  background: #f5f5f5;
}

.detail-box {
  width: 40%;
  
}

.detail-box ul {
  padding-left: 20px;
}

/* CTA */
.training-cta {
  text-align: center;
  padding: 50px;
}

.training-cta button {
  background: #f4511e;
  color: white;
  border: none;
  padding: 12px 25px;
  cursor: pointer;
}


@media (max-width: 768px) {

  .training-grid {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .training-card {
    width: 90%;
  }

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

  .detail-box {
    width: 100%;
  }

  .training-hero h1 {
    font-size: 24px;
  }

}


/* --------- */
.journal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  padding: 30px 40px;
}

/* EACH CARD */
.journal-item {
  display: flex;
  gap: 15px;
  background: #fff;
  padding: 15px;
  border-radius: 6px;
  border: 1px solid #eee;
  transition: 0.3s;
}

.journal-item:hover {
  /* box-shadow: 0 4px 12px rgba(0,0,0,0.1); */
}

/* IMAGE */
.journal-item img {
  width: 110px;
  height: 150px;
  object-fit: cover;
  border-radius: 4px;
}

/* CONTENT */
.journal-content h3 {
  margin: 0 0 6px;
  font-size: 18px;
  color: #5a2d82; /* same purple tone */
}

.journal-content p {
  font-size: 14px;
  color: #444;
  line-height: 1.5;
}

/* LINKS */
.journal-links {
  margin-top: 10px;
}

.journal-links a {
  text-decoration: none;
  color: #5a2d82;
  margin-right: 12px;
  font-weight: 500;
}

.journal-links a::after {
  content: "|";
  margin-left: 10px;
  color: #ccc;
}

.journal-links a:last-child::after {
  content: "";
}

.journal-links a:hover {
  color: #f4511e;
}@media (max-width: 768px) {

  .journal-grid {
    grid-template-columns: 1fr;
    padding: 15px;
  }

  .journal-item {
    flex-direction: column;
    text-align: center;
  }

  .journal-item img {
    margin: auto;
  }

}

.about-modern {
  padding: 60px 40px;
  background: #f8f9fb;
}

.about-container {
  display: flex;
  gap: 40px;
  align-items: center;
}

/* LEFT */
.about-left {
  flex: 1;
}

.about-left h2 {
  color: #1e5cc4;
  margin-bottom: 10px;
}

.about-left .highlight {
  font-weight: 600;
  color: #f4511e;
  margin-bottom: 15px;
}

.about-left p {
  line-height: 1.7;
  color: #444;
  margin-bottom: 10px;
  text-align: justify;
}

.about-btn {
  margin-top: 15px;
  background: #1e5cc4;
  color: white;
  border: none;
  padding: 10px 18px;
  cursor: pointer;
  border-radius: 4px;
}

/* RIGHT CARDS */
.about-right {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.about-card {
  background: white;
  padding: 20px;
  text-align: start;
  text-align: justify;
  color: #000;
  border-radius: 8px;
  /* box-shadow: 0 3px 10px rgba(0,0,0,0.08); */
}

.about-card h3 {
  margin: 0;
  color: #1e5cc4;
}

.about-card p {
  margin: 5px 0 0;
  font-size: 14px;
}
@media (max-width: 768px) {

  .about-container {
    flex-direction: column;
  }

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

}

/* HEADER */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 40px;
  background: linear-gradient(135deg, #ffffff, #ffffff);
  /* box-shadow: 0 2px 10px rgba(0,0,0,0.15); */
}


/* HEADER */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 40px;
  background: linear-gradient(135deg, #ffffff, #ffffff);
  /* box-shadow: 0 2px 10px rgba(0,0,0,0.15); */
}

/* Navigation Links */
header nav a {
  margin: 0 15px;
  text-decoration: none;
  color: #020202;
  font-weight: 600;
  transition: 0.3s;
}

header nav a:hover {
  color: #ffd54f;
}

/* Search Button */
.search-btn {
  background: #ff9800;
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 600;
  transition: 0.3s;
}

.search-btn:hover {
  background: #f57c00;
}

/* Mobile */
@media (max-width: 768px) {
  header {
    flex-direction: column;
    text-align: center;
    padding: 15px;
  }

  header nav {
    margin: 15px 0;
  }

  header nav a {
    display: block;
    margin: 8px 0;
  }
}



/* .banner-section{
    width:100%;
    max-width:1400px;
    margin:0px auto;
} */

/* .banner-img{
    width:100%;
    height:450px;
    object-fit:cover;
    display:block;
    border-radius:8px;
}

 */




.about-section{
    width:90%;
    margin:50px auto;
}

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

.about-card,
.stats-card{
    background:#fff;
    border-radius:12px;
    padding:30px;
    /* box-shadow:0 2px 10px rgba(0,0,0,0.08); */
}

.about-card h2,
.stats-card h3{
    color:#024AA0;
    margin-bottom:20px;
}

.about-card p{
    line-height:1.9;
    color:#555;
    margin-bottom:15px;
}

.stats-card{
    text-align:center;
}

.stats-card img{
    width:180px;
    max-width:100%;
    margin-bottom:20px;
}

.stat-box{
    margin:25px 0;
}

.stat-box h2{
    color:#024AA0;
    margin-bottom:5px;
}

.stat-box p{
    color:#666;
}

@media(max-width:992px){

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

}


.why-choose{
    padding:50px 4%;
    background:#f5f7fa;
}

.section-title{
    text-align:center;
    margin-bottom:30px;
}

.section-title h2{
    font-size:36px;
    color:#024AA0;
    margin-bottom:8px;
}

.section-title p{
    font-size:16px;
    color:#666;
}

.feature-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
}

.feature-card{
    background:#fff;
    padding:20px;
    border-radius:10px;
    text-align:center;
    /* box-shadow:0 2px 8px rgba(0,0,0,0.08); */
    transition:.3s;
}

.feature-card:hover{
    transform:translateY(-4px);
}

.feature-card i{
    font-size:32px;
    color:#024AA0;
    margin-bottom:12px;
}

.feature-card h3{
    font-size:20px;
    color:#024AA0;
    margin-bottom:8px;
}

.feature-card p{
    font-size:14px;
    color:#666;
    line-height:1.5;
    margin:0;
}

@media(max-width:992px){
    .feature-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:768px){
    .feature-grid{
        grid-template-columns:1fr;
    }

    .section-title h2{
        font-size:28px;
    }
}




.indexing-section{
    width:90%;
    margin:50px auto;
    background:#fff;
    padding:30px;
    border-radius:12px;
    /* box-shadow:0 2px 10px rgba(0,0,0,.08); */
}

.indexing-section h2{
    color:#2842b4;
    font-size:42px;
    margin-bottom:25px;
}

.logo-slider{
    overflow:hidden;
    position:relative;
    width:100%;
}

.logo-track{
    display:flex;
    width:calc(250px * 16);
    animation:scroll 30s linear infinite;
}

.logo-box{
    width:200px;
    height:100px;
    margin-right:20px;
    background:#fff;
    border:1px solid #ddd;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.logo-box img{
    max-width:170px;
    max-height:90px;
    object-fit:contain;
}

.logo-slider:hover .logo-track{
    animation-play-state:paused;
}

@keyframes scroll{
    0%{
        transform:translateX(0);
    }
    100%{
        transform:translateX(-1920px);
    }
}

@media(max-width:768px){

    .indexing-section h2{
        font-size:28px;
    }

    .logo-box{
        width:180px;
        height:120px;
    }

}

/* .hero-section{
    position:relative;
    min-height:70vh;
    background:url("images/new slider.png") center center/cover no-repeat;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    overflow:hidden;
} */

/* .hero-overlay{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%; */
    /* background:rgba(0,0,0,0.55); */
/* } */

.hero-content{
    position:relative;
    z-index:2;
    max-width:900px;
    padding:20px;
    color:#fff;
}

.hero-badge{
    display:inline-block;
    background:#ffc107;
    color:#000;
    padding:8px 18px;
    border-radius:30px;
    font-weight:600;
    margin-bottom:20px;
}

.hero-content h1{
    font-size:58px;
    font-weight:700;
    margin-bottom:15px;
    color:#fff;
    text-transform:none;
    letter-spacing:1px;
}

.hero-subtitle{
    font-size:26px;
    margin-bottom:15px;
    color:#f8f9fa;
}

.hero-text{
    font-size:18px;
    color:#ddd;
    margin-bottom:30px;
}

.hero-buttons{
    display:flex;
    justify-content:center;
    gap:15px;
    flex-wrap:wrap;
}

.hero-buttons .btn{
    padding:12px 30px;
    border-radius:30px;
    font-weight:600;
}

.btn-warning{
    background:#ffc107;
    border:none;
}

.btn-light{
    background:#fff;
    border:none;
}

@media(max-width:768px){

    .hero-section{
        min-height:60vh;
    }

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

    .hero-subtitle{
        font-size:18px;
    }

    .hero-text{
        font-size:15px;
    }
}





/* RESET */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* TOP HEADER */
.top-header {
    background: #ffffff;
    padding: 15px 30px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ddd;
}

.top-header .logo img {
    width: 250px;
    max-width: 100%;
    margin-left: 100px;
}

/* BOTTOM NAVBAR */
/* .main-navbar {
    background: #024AA0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    height: 60px;
} */

/* NAVIGATION */
.main-navbar nav {
    display: flex;
    gap: 30px;
}

.main-navbar nav a {
    color: white;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    line-height: 60px;
    transition: 0.3s;
}

.main-navbar nav a:hover {
    color: #ffd700;
}

/* SEARCH BUTTON */
.search-btn {
    background: #ffffff;
    color: #024AA0;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}

.search-btn:hover {
    background: #ffd700;
    color: #000;
}

/* MOBILE */
@media (max-width: 768px) {
    .main-navbar {
        flex-direction: column;
        height: auto;
        padding: 10px;
    }

    .main-navbar nav {
        flex-direction: column;
        width: 100%;
        text-align: center;
        gap: 10px;
    }

    .search-btn {
        margin-top: 10px;
    }
}


.top-header {
    background: #fff;
    padding: 5px 30px;   /* was 15px 30px */
    min-height: 110px;    /* adjust as needed */
    display: flex;
    align-items: center;
}

.top-header .logo img {
    width: 280px;        /* slightly smaller logo */
    height: auto;
}



.main-navbar {
    background: #024AA0;
    height: 50px;        /* was around 80px+ */
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.main-navbar nav a {
    line-height: 60px;
    font-size: 16px;
    padding: 0 0px;
}


/* Hide toggle on desktop */
.menu-toggle{
    display:none;
}

/* Mobile */
@media (max-width:768px){

    /* Logo Header */
    .top-header{
        justify-content:center;
        padding:10px;
        min-height:auto;
    }

    .top-header .logo img{
        width:180px;
    }

    /* Navbar */
    .main-navbar{
        position:relative;
        height:60px;
        padding:0 15px;
        display:flex;
        justify-content:space-between;
        align-items:center;
    }

    /* Show Hamburger */
    .menu-toggle{
        display:block;
        background:none;
        border:none;
        color:#fff;
        font-size:28px;
        cursor:pointer;
    }

    /* Hide menu initially */
    .main-navbar nav{
        display:none;
        position:absolute;
        top:60px;
        left:0;
        width:100%;
        background:#024AA0;
        flex-direction:column;
        z-index:999;
    }

    /* Show when active */
    .main-navbar nav.active{
        display:flex;
    }

    .main-navbar nav a{
        padding:15px;
        text-align:center;
        border-bottom:1px solid rgba(255,255,255,.2);
        color:#fff;
        text-decoration:none;
    }

    .search-btn{
        display:none;
    }
}




.contact-section{
    padding:80px 20px;
    background:#f5f8fc;
}

.contact-card{
    max-width:1200px;
    margin:auto;
    display:grid;
    grid-template-columns:1fr 1.2fr;
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    /* box-shadow:0 15px 40px rgba(0,0,0,.08); */
}

.contact-info{
    background:linear-gradient(135deg,#024AA0,#012f67);
    color:#fff;
    padding:50px;
}

.subtitle{
    color:#ffd700;
    font-size:14px;
    letter-spacing:2px;
}

.contact-info h2{
    margin:10px 0 20px;
    font-size:36px;
}

.contact-info p{
    line-height:1.8;
}

.info-item{
    /* display:flex; */
    gap:15px;
    margin-top:30px;
}

.info-item i{
    font-size:22px;
    color:#ffd700;
    margin-top:5px;
}

.info-item h4{
    margin-bottom:5px;
}

.social-links{
    margin-top:40px;
}

.social-links a{
    width:45px;
    height:45px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.15);
    color:#fff;
    border-radius:50%;
    margin-right:10px;
    text-decoration:none;
    transition:.3s;
}

.social-links a:hover{
    background:#ffd700;
    color:#000;
}

.contact-form{
    padding:50px;
}

.contact-form h2{
    color:#024AA0;
    margin-bottom:25px;
}

.input-group{
    display:flex;
    gap:20px;
    margin-bottom:20px;
}

.contact-form input,
.contact-form select,
.contact-form textarea{
    width:100%;
    padding:14px;
    border:1px solid #ddd;
    border-radius:10px;
    font-size:15px;
}

.contact-form textarea{
    resize:none;
    margin-bottom:20px;
}

.contact-form button{
    background:#024AA0;
    color:#fff;
    border:none;
    padding:14px 35px;
    border-radius:8px;
    cursor:pointer;
    font-size:16px;
    transition:.3s;
}

.contact-form button:hover{
    background:#012f67;
}

@media(max-width:768px){

    .contact-card{
        grid-template-columns:1fr;
    }

    .input-group{
        flex-direction:column;
        gap:15px;
    }

    .contact-info,
    .contact-form{
        padding:30px;
    }
}




/* =========================
   CONFERENCE HERO
========================= */

.training-hero{
    background: linear-gradient(rgba(186, 191, 197, 0.8), rgba(2,74,160,.80)),
                url('images/new slider.png');
    background-size: cover;
    background-position: center;
    text-align: center;
    padding: 100px 20px;
    color: #fff;
}

.training-hero h1{
    font-size: 52px;
    font-weight: 700;
    margin-bottom: 15px;
}

.training-hero p{
    font-size: 22px;
    opacity: .95;
}

/* =========================
   INTRO SECTION
========================= */

.training-intro{
    max-width: 1100px;
    margin: 60px auto;
    text-align: center;
    padding: 0 20px;
}

.training-intro h2{
    color:#024AA0;
    font-size:40px;
    margin-bottom:20px;
}

.training-intro p{
    font-size:18px;
    line-height:1.8;
    color:#555;
}

/* =========================
   CONFERENCE CARD
========================= */

.conference-section{
    padding:20px;
    max-width:1200px;
    margin:auto;
}

.conference-card{
    background:#fff;
    border-radius:15px;
    padding:50px;
    /* box-shadow:0 5px 20px rgba(0,0,0,.08); */
    border-top:5px solid #024AA0;
}

.conference-icon{
    width:100px;
    height:100px;
    margin:auto;
    background:#024AA0;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.conference-icon i{
    color:#fff;
    font-size:45px;
}

.conference-card h2{
    text-align:center;
    margin-top:25px;
    color:#024AA0;
    font-size:38px;
}

.conference-tagline{
    text-align:center;
    color:#c68a00;
    font-weight:600;
    font-size:18px;
    margin:15px 0 30px;
}

.conference-card h3{
    color:#024AA0;
    margin-bottom:20px;
}

.conference-card p{
    color:#555;
    font-size:17px;
    line-height:1.9;
    margin-bottom:18px;
}

.conference-btn{
    display:inline-block;
    margin-top:15px;
    background:#024AA0;
    color:#fff;
    padding:12px 30px;
    border-radius:30px;
    text-decoration:none;
    font-weight:600;
}

.conference-btn:hover{
    background:#01357a;
    color:#fff;
}

/* =========================
   CTA SECTION
========================= */

.training-cta{
    background:#024AA0;
    color:#fff;
    text-align:center;
    padding:70px 20px;
    margin-top:60px;
}

.training-cta h2{
    font-size:38px;
    margin-bottom:15px;
}

.training-cta p{
    font-size:18px;
    margin-bottom:25px;
}

.training-cta button{
    background:#ffc107;
    color:#000;
    border:none;
    padding:14px 35px;
    border-radius:30px;
    font-size:17px;
    font-weight:600;
    cursor:pointer;
}

.training-cta button:hover{
    background:#ffb300;
}

/* =========================
   MOBILE
========================= */

@media(max-width:768px){

    .training-hero{
        padding:70px 20px;
    }

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

    .training-hero p{
        font-size:16px;
    }

    .training-intro h2{
        font-size:30px;
    }

    .conference-card{
        padding:30px 20px;
    }

    .conference-card h2{
        font-size:28px;
    }

    .training-cta h2{
        font-size:28px;
    }
}


.topbar .left a {
    color: #fff;
    text-decoration: none;
}

.topbar .left a:hover {
    color: #fff;
}

.topbar .left a:visited {
    color: #fff;
}


/* =========================
   CONFERENCE HERO
========================= */

.training-hero{
    background: linear-gradient(rgba(2,74,160,.80), rgba(2,74,160,.80)),
                url('');
    background-size: cover;
    background-position: center;
    text-align: center;
    padding: 6px 20px;
    color: #fff;
}

.training-hero h1{
    font-size: 52px;
    font-weight: 700;
    margin-bottom: 15px;
}

.training-hero p{
    font-size: 22px;
    opacity: .95;
}

/* =========================
   INTRO SECTION
========================= */

.training-intro{
    max-width: 1100px;
    margin: 60px auto;
    text-align: center;
    padding: 0 20px;
}

.training-intro h2{
    color:#024AA0;
    font-size:40px;
    margin-bottom:20px;
}

.training-intro p{
    font-size:18px;
    line-height:1.8;
    color:#555;
}

/* =========================
   CONFERENCE CARD
========================= */

.conference-section{
    padding:20px;
    max-width:1200px;
    margin:auto;
}

.conference-card{
    background:#fff;
    border-radius:15px;
    padding:50px;
    /* box-shadow:0 5px 20px rgba(0,0,0,.08); */
    border-top:5px solid #024AA0;
}

.conference-icon{
    width:100px;
    height:100px;
    margin:auto;
    background:#024AA0;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.conference-icon i{
    color:#fff;
    font-size:45px;
}

.conference-card h2{
    text-align:center;
    margin-top:25px;
    color:#024AA0;
    font-size:38px;
}

.conference-tagline{
    text-align:center;
    color:#c68a00;
    font-weight:600;
    font-size:18px;
    margin:15px 0 30px;
}

.conference-card h3{
    color:#024AA0;
    margin-bottom:20px;
}

.conference-card p{
    color:#555;
    font-size:17px;
    line-height:1.9;
    margin-bottom:18px;
}

.conference-btn{
    display:inline-block;
    margin-top:15px;
    background:#024AA0;
    color:#fff;
    padding:12px 30px;
    border-radius:30px;
    text-decoration:none;
    font-weight:600;
}

.conference-btn:hover{
    background:#01357a;
    color:#fff;
}

/* =========================
   CTA SECTION
========================= */

.training-cta{
    background:#024AA0;
    color:#fff;
    text-align:center;
    padding:70px 20px;
    margin-top:60px;
}

.training-cta h2{
    font-size:38px;
    margin-bottom:15px;
}

.training-cta p{
    font-size:18px;
    margin-bottom:25px;
}

.training-cta button{
    background:#ffc107;
    color:#000;
    border:none;
    padding:14px 35px;
    border-radius:30px;
    font-size:17px;
    font-weight:600;
    cursor:pointer;
}

.training-cta button:hover{
    background:#ffb300;
}

/* =========================
   MOBILE
========================= */

@media(max-width:768px){

    .training-hero{
        padding:70px 20px;
    }

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

    .training-hero p{
        font-size:16px;
    }

    .training-intro h2{
        font-size:30px;
    }

    .conference-card{
        padding:30px 20px;
    }

    .conference-card h2{
        font-size:28px;
    }

    .training-cta h2{
        font-size:28px;
    }
}




.carousel,
.carousel-inner,
.carousel-item{
    height:340px;
   
}

/* .carousel-item img{
    height:300px;
    object-fit:cover;
} */

.hero-section{
    width:100%;
}

.carousel-item img{
    width:100%;
    aspect-ratio:16/5;
    object-fit:contain;
    background:#fff;
}
.carousel-item img{
    width:100%;
    height:590px;
    object-fit:contain;
    background:#fff;
}

.hero-section{
    margin-top:50px;
}
.hero-section,
.carousel{
    margin-top:0;
}
.carousel{
    margin:0px auto;
}
.carousel-item img{
    height:300px;
    object-fit:cover;
}
.carousel{
    border-radius:15px;
    overflow:hidden;
}
.carousel{
    /* box-shadow:0 8px 25px rgba(0,0,0,.15); */
}
.top-header{
    position:sticky;
    top:0;
    z-index:999;
    background:#fff;
}

.slider-btn{
    display:inline-block;
    margin-top:0px;
    background:#ffc107;
    color:#000;
  
    border-radius:30px;
    text-decoration:none;
    font-weight:600;
}




.hero-section{
    width:100%;
    margin:0;
    padding:0;
}

.carousel{
    width:100%;
    max-width:100%;
    margin:0;
    border-radius:0;   /* remove rounded corners */
    overflow:hidden;
}

.carousel-inner,
.carousel-item{
    width:100%;
    height:550px;
}

.carousel-item img{
    width:100%;
    height:340px;
    object-fit:cover;
    display:block;
}




.journal-grid{
    display:grid;
    grid-template-columns:repeat(2, 600px);
    justify-content:center;
    gap:20px;
    margin:0 auto;
    
}

.journal-item{
    display:flex;
    align-items:center;
    gap:15px;
    background:#fff;
    border:1px solid #e5e5e5;
    border-radius:10px;
    padding:15px;
    transition:.3s;

        width:600px;
    padding:10px;
    min-height:auto;
}

.journal-item:hover{
    /* box-shadow:0 5px 20px rgba(0,0,0,.08); */
    transform:translateY(-3px);
}

.journal-item img{
    width:150px;
    height:220px;
    object-fit:cover;
    border-radius:5px;
    flex-shrink:0;
}

.journal-content h3{
    font-size:16px;
    color:#222;
    margin-bottom:8px;
    line-height:1.4;
}


/* .journal-content p{
    display:none;
} */

.journal-links{
    display:flex;
    gap:10px;
    margin-top:10px;
}

.journal-links a{
    background:#0056b3;
    color:#fff;
    padding:8px 14px;
    border-radius:5px;
    text-decoration:none;
    font-size:13px;
    font-weight:600;
}

.journal-links a:last-child{
    background:#fff;
    color:#0056b3;
    border:1px solid #0056b3;
}

@media(max-width:768px){
    .journal-grid{
         grid-template-columns:repeat(2, 600px);
    }
}





.main-navbar{
    background:#024AA0;
    height:60px;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:0;
}

.main-navbar nav{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:50px;
    width:100%;
}

.main-navbar nav a{
    color:#fff;
    text-decoration:none;
    font-size:17px;
    font-weight:600;
    line-height:60px;
}



.footer-col ul li a{
    color:#fff;
    text-decoration:none;
}

.footer-col ul li a:hover{
    color:#f8c146;
}



*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Poppins', sans-serif;
    font-size:16px;
    line-height:1.8;
    color:#444;
    font-weight:400;
}

h1,h2,h3,h4,h5,h6{
    font-family:'Poppins', sans-serif;
    font-weight:600;
    color:#f7f8fa;
}

p{
    font-family:'Poppins', sans-serif;
    font-size:16px;
    line-height:2;
    color:#fffdfd;
}

a{
    font-family:'Poppins', sans-serif;
}





.section-title{
    text-align:center;
    max-width:900px;
    margin:0 auto 50px;
}

.section-title h2{
    font-size:36px;
    color:#0a4f8a;
}

.section-title p{
    color:#666;
    line-height:1.8;
}

.conference-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:40px;
    background:#fff;
    padding:35px;
    margin-bottom:35px;
    border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    border-left:6px solid #0a4f8a;
}

.conference-left{
    flex:1;
}

.status{
    display:inline-block;
    color:#fff;
    padding:7px 18px;
    border-radius:30px;
    font-size:13px;
    margin-bottom:15px;
    font-weight:600;
}

.open{
    background:#28a745;
}

.register{
    background:#0d6efd;
}

.upcoming{
    background:#ff9800;
}

.conference-left h2{
    color:#0a4f8a;
    margin:10px 0;
    font-size:30px;
}

.conference-left h4{
    color:#666;
    margin-bottom:20px;
}

.conference-meta{
    display:flex;
    gap:30px;
    flex-wrap:wrap;
    margin-bottom:20px;
    font-weight:600;
}

.conference-meta span i{
    color:#0a4f8a;
    margin-right:8px;
}

.conference-left p{
    color:#555;
    line-height:1.8;
}

.conference-left ul{
    margin-top:20px;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
}

.conference-left li{
    list-style:none;
}

.conference-left li::before{
    content:"✔";
    color:green;
    margin-right:8px;
}

.conference-right{
    min-width:220px;
    display:flex;
    flex-direction:column;
    gap:15px;
}

.conference-btn{
    text-align:center;
    text-decoration:none;
    background:#0a4f8a;
    color:#fff;
    padding:14px;
    border-radius:6px;
    font-weight:600;
    transition:.3s;
}

.conference-btn:hover{
    background:#083765;
}

.green{
    background:#28a745;
}

.green:hover{
    background:#1d7c33;
}

@media(max-width:900px){

.conference-row{
    flex-direction:column;
}

.conference-right{
    width:100%;
}

.conference-left ul{
    grid-template-columns:1fr;
}

}






.conference-hero{

background:linear-gradient(rgba(0,72,130,.75),rgba(0,72,130,.75)),
url(images/conference-banner.jpg);

background-size:cover;

background-position:center;

padding:90px 20px;

text-align:center;

color:#fff;

}

.conference-badge{

background:#28a745;

padding:8px 20px;

border-radius:30px;

display:inline-block;

margin-bottom:20px;

font-weight:600;

}

.conference-hero h1{

font-size:46px;

max-width:950px;

margin:auto;

}

.conference-hero h3{

margin-top:20px;

font-size:30px;

}

.hero-info{

margin:30px 0;

display:flex;

justify-content:center;

gap:40px;

flex-wrap:wrap;

font-size:18px;

}

.hero-buttons{

margin-top:30px;

}

.btn-primary{

background:#0d6efd;

padding:14px 35px;

color:#fff;

text-decoration:none;

border-radius:6px;

margin-right:15px;

display:inline-block;

}

.btn-secondary{

background:#28a745;

padding:14px 35px;

color:#fff;

text-decoration:none;

border-radius:6px;

display:inline-block;

}

.conference-container{

max-width:1200px;

margin:70px auto;

padding:0 20px;

}

.conference-container h2{

color:#004882;

margin-bottom:20px;

font-size:34px;

}

.conference-container p{

line-height:1.8;

color:#555;

}

.date-table{

width:100%;

border-collapse:collapse;

margin-top:20px;

}

.date-table th{

background:#004882;

color:#fff;

padding:15px;

}

.date-table td{

padding:15px;

border:1px solid #ddd;

}

.track-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:20px;

margin-top:30px;

}

.track-grid div{

background:#f4f7fb;

padding:20px;

border-left:5px solid #004882;

border-radius:8px;

font-weight:600;

}

.conference-cta{

background:#004882;

color:#fff;

text-align:center;

padding:80px 20px;

}

.conference-cta h2{

font-size:38px;

margin-bottom:15px;

}

@media(max-width:768px){

.conference-hero h1{

font-size:30px;

}

.hero-info{

flex-direction:column;

gap:15px;

}

}