:root{
    --bg-dark: #231f20 !important;
    --bg-darkblue: #074578 !important;
    --bg-lightblue: #007ebf !important;
    --bg-skyblue: #00bef2 !important;
    --bg-sitegray: #90b4d4 !important;
    --bg-darkgray: #666 !important;
    --bg-danger: #ff0000 !important;
    --bg-white: #ffffff !important;
    --bg-an: #00b0f0 !important;
    --bg-re: #ff0000 !important;
    --bg-pe: #ffff00 !important;
    --bg-gl: #00b050 !important;
    --bg-oc: #7030a0 !important;
    --bg-po: #ffc000 !important;
}
.btn-primary{ background: #00bef2 !important; color: #FFF; border: none; font-weight:500 !important;}
.btn-primary:hover{ background: #415ec1 !important;}

.btn-danger{ background: #d12229 !important; color: #FFF; border: none;}
.btn-danger:hover{ background: #9d1f24 !important;}


.resp{width:100% !important;}
.bold{font-weight: 600;}
.navbar-brand{width: 450px;}
.text-left{text-align: left;}
.input-rounded{border-radius: 32px;}
body, p{font-size: 16px; font-weight: 400; color: var(--bg-dark);}

p{ font-size: 16px; font-weight: 400; text-align: justify; text-justify: inter-word; hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;} 

.list{ margin: 0; padding:15px; line-height: 20px;}
.list li, .list ol{margin-bottom: 10px; font-size: 16px; font-weight: 400; text-align: justify;}

.dropcap {
  font-size:16px; font-weight: 400;
  line-height: 1.7;
  margin-bottom: 20px;
}

input, label{ font-weight: 400; font-size:16px;}

.dropcap::first-letter {
  font-size: 5.5em;   /* make just the first letter bigger */
  font-weight:300 !important;
  float: left;
  line-height: 1; font-family: Times New Roman !important;
  margin-right: 6px;  /* spacing between the big letter and text */
}

.sm{font-size: 12px;}
h1{font-size: 34px;}
h2{font-size: 30px;}
h3{font-size: 28px;}
h4{font-size: 26px;}
h5{font-size: 24px;}
h6{font-size: 22px;}
h7{font-size: 18px; line-height: 14px !important;}
h8{font-size: 16px;}
h1 span, h2 span, h3 span, h4 span, h5 span, h6 span, h7 span, h8 span{color: var(--bg-darkgray);}
h1,h2,h3,h4,h5,h6,h7{ color: var(--bg-darkblue); font-weight: 600;}

.map iframe{width: 100%; height: 550px; padding: 3px; border-radius: 8px !important; border: 1px solid #999 !important;}
.nav-link{padding:10px 10px !important; font-weight: 500 !important; color: #000; }
.dropdown-item{font-weight: 500 !important; color: #000;}

.bg-dark{background: var(--bg-dark);}
.bg-darkblue{background: var(--bg-darkblue);}
.bg-lightblue{background: var(--bg-lightblue);}
.bg-skyblue{background: var(--bg-skyblue);}
.bg-sitegray{background: var(--bg-sitegray);}
.bg-danger{background: var(--bg-danger);}
.bg-white{background: var(--bg-white);}
.text-darkblue{color: var(--bg-darkblue);}
.bg-light{background:#f9f9f9 !important;}

.colorbox{padding: 15px; text-align: center; border:1px solid #333; font-size: 16px; font-weight: 600;}
.bg-an{background: var(--bg-an);}
.bg-re{background: var(--bg-re);}
.bg-pe{background: var(--bg-pe);}
.bg-gl{background: var(--bg-gl);}
.bg-oc{background: var(--bg-oc);}
.bg-po{background: var(--bg-po);}


a.abstract{ position: relative; margin: 0 auto 10px auto; padding: 4px 15px; color: #fff ; border-radius: 32px; display: inline-block; text-align: center; width:auto;}

.rev_slider img.hidden-xs{display: block !important;}
.rev_slider img.visible-xs{display: none !important;}

.spc img{border-radius: 100%; transition: all, .5s; border:0px dotted #017ebe; padding: 0px; background: #abe0f9; margin-bottom: 5px; width:100%;}
.spc img:hover{ transform: scale(1.02); background: #84abbc;}
.spc .flg{border-radius: 0 !important; width: 42px; display: block; margin: 5px auto;}

.border-bottom-bold{ border-bottom: 2px dotted #007dbe;}
.border-tb-bold{ border-bottom: 2px dotted #007dbe; border-top: 2px dotted #007dbe;}

.target{padding: 10px; border: none !important;}
.target img{width: 64px; height: 64px; padding: 8px; border: 1px solid #999; background: #FFF; border-radius: 50%; margin-right:15px; float: left;}
.target h5{color: #333; font-size: 1rem; margin-bottom: 0;}

.target h1 span{color: #333; font-size: 18px !important; margin-bottom: 0;}


.patronage{border-radius: 0 0 20px 20px; padding-top: 10px;}
.patronage h6{color: #fff; margin-bottom: 0px; font-weight: 600; font-size: 14px;}
.patronage h1{color: #fff; font-size: 18px; font-weight: 800; margin-bottom: 10px;}





img.welcome{width: 300px !important; margin: 0 auto;}

.target h1 span{color: #666; font-size: 18px !important; text-align: center !important;}
.half-round{border-radius:50px 0 50px 0;}

.imgajax img{width: 100%; padding: 0px; border: 0px solid #66c; transition: all, .5s;}
.imgajax:hover img{ background: #ffff; padding: 2px; border: 0px solid #f00;}

.card {background: transparent !important; border: none; box-shadow: none;}



@keyframes blink {
        0% {
          background-color: #f00;
          box-shadow: 0 0 5px #054481;
        }
        50% {
          background-color: #f00;
          box-shadow: 0 0 10px #f00;
        }
        100% {
          background-color: #054481;
          box-shadow: 0 0 5px #054481;
        }
}

.blink{ animation: blink 1000ms infinite;}

.swarper{      
 /*background:linear-gradient(#cee8ee, white) !important;*/
    background: #24296d; padding:0;
}

.countdown {
  display: flex;
  justify-content: center;
  gap: 5px;
  font-size: 14px; color: #b3dde9;
}

.countdown div {
  background: #2c2a7c;
  width: 120px;
  height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;   /* 🔥 make circle */
  color: #FFF;
  
}

.countdown span {
  font-size: 28px;
  color: #FFF; /* gold highlight */
  margin-bottom: 0px;
}

.spc h7{font-size: 14px !important; text-transform: uppercase; font-weight: 400; line-height:15px !important;}
.spc p{font-size: 10px !important; display: none;}


.home{font-size: 16px !important;}


.welcome-note-section {
  background: url('../towers.jpg') no-repeat center center/cover;
  position: relative;
  padding: 60px 0;
}

.welcome-box {
  background: rgba(0, 255, 255, 0.08);
  backdrop-filter: blur(4px);
  border-left: 0px solid #00eaff;
  border-radius: 10px;
  position: relative; /* important for absolute child */
  overflow: hidden;
}

.chairman-img {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 280px;
  border-radius: 20px;
}

@media (max-width: 768px) {
  .chairman-img {
    position: static; /* no overlap on mobile */
    display: block;
    margin: 20px auto 0;
    width: 200px;
  }
}




.targeth1{ font-size: 1.8rem; color:#2c2a7c;}
.targeth1 span{ display: block; font-weight: 700; color: #2c2a7c;}


.ass img{margin-bottom: 15px;}
.ass h5{ font-size: .8rem; line-height: .8rem;}
.ass h5 span{ display: block; font-size: .7rem; color: #333; font-weight: 400; padding-bottom: 5px;}

.assos{ line-height: 1.9rem; font-size: 1.4rem;}
.assos .bolder{ display: block; color: #2c2a7c; font-weight: 700; letter-spacing: 1px; font-size: 1.8rem;}

.assos h2{ line-height: 1.6rem; margin: 0; font-weight: 500; font-size: .9rem !important;}
.assos p{ line-height: 1rem; font-weight: 400; color: #555 !important; font-size: .65rem !important;}


.committee h1, .committee p, .committee h7{ color: #FFF;}

.accordion {
      margin: 0 auto;
      border-radius: 12px;
      overflow: hidden;
    }

    .accordion-item {
      background: #fff;
      margin-bottom: 10px;
      border-radius: 8px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.08);
      overflow: hidden;
    }

    .accordion-header{
      background: #2c2b7c; color:#FFF; 
      padding: 8px 20px;
      cursor: pointer;
      font-size: 1rem;
      font-weight: 500;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: background 0.3s ease;
    }

    .accordion-header:hover {
      background: #2f53bb;
    }

    .accordion-icon {
      font-size: 20px;
      font-weight: bold;
      transition: transform 0.3s ease;
    }

    .accordion-content {
      height: 0;
      overflow: hidden;
      padding: 0 20px;
      background: #F1F1F1;
      color: #333;
      transition: max-height 0.5s ease, padding 0.3s ease, opacity 0.5s ease;
      opacity: 0;
    }

    .accordion-item.active .accordion-content {
      padding: 15px 20px;
      opacity: 1;
    }

    .accordion-item.active .accordion-icon {
      content: "-";
      transform: rotate(180deg);
    }

    /* Mobile tweaks */
    @media (max-width: 600px) {
      .accordion-header {
        font-size: .7rem;
        padding: 6px 16px;
      }
      .accordion-content {
        font-size: 12px; color: #333;
      }
    }

.card{ box-shadow: 0 0 15px #ddd !important;}

@media (max-width: 900px) {
    
    .navbar-nav{ color: #FFF !important;}
    .nav-item{ color: #FFF !important;} 
    .nav-link{ color: #FFF !important;}   
    
.navbar-collapse .nav-link,
  .navbar-collapse .dropdown-item {
    color: #fff !important;
  }

  /* hover / active states */
  .navbar-collapse .nav-link:hover,
  .navbar-collapse .dropdown-item:hover {
    color: #f8f9fa !important;
  }

  /* dropdown menu background */
  .navbar-collapse .dropdown-menu {
    background-color:rgba(255,255,255, 0.3) !important; /* match navbar bg */
    border: none;
  }
.navbar-nav .nav-link {
    color: #fff !important;
  }
  .navbar-nav .nav-link:hover,
  .navbar-nav .nav-link:focus {
    color: #f8f9fa !important;
  }
  .navbar-nav .dropdown-menu {
    background-color: #0d6efd; /* same dark blue as your navbar */
    border: none; color: #FFF !important;
  }
  .navbar-nav .dropdown-item {
    color: #fff !important;
  }
  .navbar-nav .dropdown-item:hover {
    color: #fff !important;
  }    
    
.ass h5{ font-size: .65rem; line-height: .7rem;} 
.ass h5 span{ font-size: .65rem; padding-bottom: 5px; color: #333;}    
    
.assos{ line-height: 1rem; font-size: .6rem !important;}    
.assos .bolder{ display: block; color: #2c2a7c; font-weight: 700; letter-spacing: 1px; font-size: 1.2rem;}
    
    
.targeth1{ font-size: 1.4rem;}    
body, .list li, .list ol, .dropcap, .form-control, label, input{font-size: 12px; font-weight: 400;}
.list li{line-height: 16px !important;}    
p{ font-size: 12px; font-weight: 400; text-align: justify; text-justify: inter-word; hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;}    
.card .btn-primary, .card .btn-danger{font-weight: 400;}    
.card-body ul{margin: 0; padding:0 15px;}    

h1{font-size: 1.3rem;}
h2{font-size: 1.2rem;}
h3{font-size: 1.1rem;}
h4{font-size: 1rem;}
h5{font-size: .9rem;}
h6{font-size: .8rem;}
h7{font-size: .7rem; line-height: 14px !important;}
h8{font-size: 16px;} 
    .target h5{ font-size: .6rem;}    
    
    
.target img{width: 44px !important; height: 44px !important; margin-top:-5px;}    
    
.countdown {
  display: flex;
  justify-content: center;
  gap: 10px;
  font-size: 12px !important;
}

.countdown div {
  width: 100px;
  height: 90px;
  
}

.countdown span {
  font-size: 28px;
  color: #FFF; /* gold highlight */
  margin-bottom: 0px;
}    
    

.offcanvas, .offcanvas-header{ background: #2c2a7c;}    
.offcanvas-body{background: #2c2a7c !important; padding-top: 50px !important;}
.spc h7{font-size: 14px !important; line-height:15px !important;}
    .spc p{font-size: 10px !important;}    
.swarper{      
 /*background:linear-gradient(#cee8ee, white) !important;*/
    background: #24296d; padding: 50px 0;
}
       
    .slogan h3{font-size: 14px;}
    .navbar-brand, .logo{width:280px;}
}