:root{
    --primary:#d20018;
    --secondary:#fc8e01;
    --dark:#222;
    --light:#fff;
    --muted:#64748b;
    --glass:rgba(255,255,255,.72);
    --glass-border:rgba(255,255,255,.35);
    --radius:18px;
    --transition:.35s ease;
    --shadow: 0 10px 30px rgba(0,0,0,.08);
    --shadow-lg: 0 20px 60px rgba(0,0,0,.15);
}
body{
    font-family:'Poppins',sans-serif;
    color:#333;
    background:#fff;
}
.topbar{
    background:var(--primary);
    color:#fff;
    padding:10px 0;
    font-size:14px;
}
.topbar .top-action {
    display: flex;
    justify-content: flex-end;
}
.topbar a{
    color:#fff;
    margin-left:12px;
}
.topbar .social-icons {
    margin-left: 12px;
    border-left: 1px solid #fff;
    padding-left: 12px;
}
@media screen and (min-width: 992px) {
  .navbar {
    padding: 0;
    line-height: 3rem;
    .dropdown-menu {
      line-height: initial;
    }
  }  
  .dropdown {
    .dropdown-menu {
      display: none;
    }
  }
  .dropdown,
  .dropend {
    &:hover {
      & > .dropdown-menu {
        display: block;
      }
    }
  }
  .dropdown {
    &:hover {
      & > .dropdown-menu {
        margin-top: -.5rem;
      }
    }
  }
  .dropend {
    &:hover {
      & > .dropdown-menu {
        position: absolute;
        top: -.5rem;
        left: 100%;
        margin-left: 0;
      }
    }
  }
}
/* ====================   ASCP Premium Navbar  Bootstrap 5.3 /* 
=====================   Floating Navbar ========================= */
#ascpNavbar{
    position:relative;
    top:0;
    left:0;
    right:0;
    z-index:1080;
}
#ascpNavbar .navbar{
    width:min(1380px,96%);
    margin:auto;
    border-radius: 0 0 22px 22px;
    background:var(--glass);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border:1px solid var(--glass-border);
    box-shadow:var(--shadow);
    transition:.4s;
    padding:14px 24px;
}
#ascpNavbar.scrolled .navbar{
    background:#ffffff;
    padding:8px 24px;
    box-shadow:var(--shadow-lg);
}
/* ==========================================================
   Logo
========================================================== */
.logo-default{
    height:58px;
    transition:.35s;
}
.logo-small{
    display:none;
}
#ascpNavbar.scrolled .logo-default{
    height:46px;
}
/* ==========================================================
   Menu
========================================================== */
.navbar-nav{
    gap:6px;
}
.nav-link{
    position:relative;
    padding:14px 18px !important;
    color:#333!important;
    font-size:15px;
    font-weight:600;
    text-transform: uppercase;
    transition:var(--transition);
}
.nav-link:hover{
    color:var(--primary)!important;
}
.nav-link::after{
    content:"";
    position:absolute;
    left:18px;
    right:18px;
    bottom:8px;
    height:2px;
    background:var(--primary);
    transform:scaleX(0);
    transform-origin:left;
    transition:.3s;
}
.nav-link:hover::after,
.nav-link.active::after{
    transform:scaleX(1);
}
/* ==========================================================
   Buttons
========================================================== */
.navbar-actions{
    display:flex;
    align-items:center;
    gap:12px;
}
.btn-search{
    width:46px;
    height:46px;
    border-radius:50%;
    border:none;
    background:#ffffff;
    transition:.3s;
}
.btn-search:hover{
    background:var(--primary);
    color:#fff;
}
.btn-danger{
    background:var(--primary);
    border:none;
    border-radius:50px;
    padding:10px 24px;
    font-weight:600;
}
.btn-danger:hover{
    background:var(--primary-dark);
}
.btn-outline-danger{
    border-radius:50px;
    padding:10px 24px;
}
.btn-expand{
    position:relative;
    display:inline-block;
    padding:10px 20px;
    font-size: 16px;
    border-radius:8px;
    border:2px solid #df182a;
    color:#df182a;
    text-decoration:none;
    overflow:hidden;
    transition:.35s;
    z-index:1;
}
.btn-expand::before{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:0;
    height:0;
    background:var(--primary);
    border-radius:10px;
    transform:translate(-50%,-50%);
    transition:.55s ease;
    z-index:-1;
}
.btn-expand:hover{
    color:#fff;
}
.btn-expand:hover::before{
    width:120%;
    height:220%;
}
/* ==========================================================
   Mega Menu
========================================================== */
.mega-menu{
    width:100%;
    left:0!important;
    right:0!important;
    margin-top:24px;
    padding:45px;
    border:none;
    border-radius:24px;
    background:#ffffff;
    box-shadow:var(--shadow-lg);
    display:block;
    visibility:hidden;
    opacity:0;
    transform:translateY(20px);
    transition:.35s;
}
/* Desktop Hover */
@media(min-width:1200px){
    .mega-dropdown:hover>.mega-menu{
        visibility:visible;
        opacity:1;
        transform:translateY(0);
    }
}
.mega-menu h6{
    color:var(--primary);
    font-weight:700;
    margin-bottom:18px;
}
.mega-menu a {
    display: block;
    color: rgb(75, 85, 99);
    padding: 4px 0px;
    transition: 0.25s;
    text-decoration: none;
}
.mega-menu a:hover{
    color:var(--primary);
    padding-left:6px;
}
.mega-menu-btn{
    color: #fff!important;
    background-color: #a00d1b;
    font-weight: 500;
    margin: 6px auto;
}
.mega-menu-btn:hover{
    background-color: transparent;
    border: 1px solid #fff;
}

/* ==========================================================
   Featured Card
========================================================== */
.mega-card{
    border-radius:20px;
    padding:30px;
    background:linear-gradient(135deg,#df182a,#ff5066);
    color:#fff;
    height:100%;
}
.mega-card h4{
    margin:18px 0;
    font-weight:700;
}
.mega-card p{
    opacity:.95;
}
/* ==========================================================
   Standard Dropdown
========================================================== */
.dropdown-menu{
    border:none;
    border-radius:16px;
    padding:12px;
    box-shadow:var(--shadow);
}
.dropdown-item{
    border-radius:10px;
    padding:11px 16px;
    transition:.25s;
}
.dropdown-item:hover{
    background:#fff1f2;
    color:var(--primary);
}
/* ==========================================================
   Mobile Toggle
========================================================== */
.navbar-toggler{
    width:52px;
    height:52px;
    border-radius:14px;
    background:#fff;
    font-size:28px;
}
/* ==========================================================
   Offcanvas
========================================================== */
.mobile-link,
.mobile-sublink,
.mobile-thirdlink{
    display:block;
    text-decoration:none;
    color:#222;
    transition:.3s;
}

.mobile-link{
    padding:15px 20px;
    font-weight:600;
    border-bottom:1px solid #eee;
}

.mobile-sublink{
    padding:12px 35px;
    background:#fafafa;
    border-bottom:1px solid #eee;
}

.mobile-thirdlink{
    padding:10px 55px;
    background:#f2f2f2;
    border-bottom:1px solid #eee;
    font-size:.95rem;
}

.mobile-link:hover,
.mobile-sublink:hover,
.mobile-thirdlink:hover{
    background:var(--primary);
    color:#fff;
}

.accordion-button{
    padding:15px 20px;
    font-weight:600;
    box-shadow:none !important;
}

.level2{
    padding-left:35px;
    background:#fafafa;
    font-weight:500;
}

.accordion-button:not(.collapsed){
    background:var(--secondary);
    color:#fff;
}

.accordion-button:focus{
    box-shadow:none;
}

/* ==========================================================
   Utilities
========================================================== */
.blur-bg{
    backdrop-filter:blur(18px);
}
.shadow-glass{
    box-shadow:var(--shadow);
}
.rounded-xl{
    border-radius:22px;
}
.transition{
    transition:.35s ease;
}
.btn-main{
    background:linear-gradient(90deg,var(--primary),var(--secondary));
    color:#fff;
    padding:12px 28px;
    border-radius:8px;
    font-weight:600;
}
.btn-main:hover{
    color:#fff;
    opacity:.9;
}
.btn-outline-main{
    border:2px solid var(--secondary);
    padding:12px 28px;
    color:#ff8c22;
    border-radius:8px;
    font-weight:600;
}
.hero{
    padding:50px 0;
    background:url('../images/hero-bg.png') no-repeat center;
    background-size:cover;
}
.hero h1{
    font-size:62px;
    font-weight:800;
    line-height:1.15;
}
.hero span{
    color:#ea2027;
    display:block;
}
.hero p{
    font-size:19px;
    color:#666;
    margin:30px 0;
    max-width:520px;
}
.hero-icons{
    display:flex;
    gap:25px;
    flex-wrap:wrap;
    margin-top:35px;
}
.hero-icons div{
    font-weight:500;
}
.hero-icons i{
    color:var(--secondary);
    margin-right:8px;
    font-size:22px;
}
.slider-ascp {
    overflow: hidden;
    border-radius: 15px;
    margin: 30px auto;
}

/* ==========================================
   Tabs
========================================== */

.tabs{
    margin:auto;
    background:#fff;
    border:1px solid #ddd;
    border-radius:8px;
    overflow:hidden;
}

.tabs input{
    display:none;
}

.tab-labels{
    display:flex;
    background:#eee;
}

.tab-labels label{
    flex:1;
    padding:15px;
    text-align:center;
    cursor:pointer;
    font-size: 18px;
    font-weight:bold;
    transition:.3s;
    border-right:1px solid #ddd;
}

.tab-labels label:last-child{
    border-right:none;
}

#tab1:checked ~ .tab-labels label[for="tab1"],
#tab2:checked ~ .tab-labels label[for="tab2"]{
    background:#df182a;
    color:#fff;
}

.content{
    display:none;
    padding:25px;
    font-size: 16px;
}

#tab1:checked ~ .contents #content1,
#tab2:checked ~ .contents #content2{
    display:block;
}
/* ==========================================
   Premium Glass Button
========================================== */
.glass-btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    padding:10px 25px;
    margin:10px;
    border-radius:10px;
    text-decoration:none;
    font-size:16px;
    font-weight:normal;
    color:#fff;
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    background:var(--primary);
    border:1px solid rgba(255,255,255,.25);
    box-shadow: 0 8px 30px rgba(0,0,0,.18), inset 0 1px 1px rgba(255,255,255,.20);
    transition:.45s ease;
    z-index:1;
}
.glass-btn>span{color: #fff;}
/* Animated Fill */
.glass-btn::before{
    content:"";
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:url("images/logo-small.png") no-repeat left center, linear-gradient(90deg, #ff3f2a, var(--primary));
    transition:.45s ease;
    z-index:-2;
}
/* Shine Effect */
.glass-btn::after{
    content:"";
    position:absolute;
    top:0;
    left:-130%;
    width:60%;
    height:100%;
    background: rgba(255,255,255,.30);
    transform:skewX(-25deg);
    transition:.75s;
}
.glass-btn span{
    position:relative;
    z-index:5;
}
/* Hover */
.glass-btn:hover{
    color:#fff;
    box-shadow: 0 10px 15px rgba(223,24,42,.30);
}
.glass-btn:hover::before{
    left:0;
}
.glass-btn:hover::after{
    left:160%;
}
/* Click */
.glass-btn:active{
    transform:scale(.96);
}
/* Secondary */
.glass-light{
    color:#ffffff;
    background:var(--secondary);
}
.glass-light::before{
    background:linear-gradient(90deg, var(--secondary), rgba(255,193,7,.25) );
}

h5.block-head-primary {
    margin: 0;
    padding: 5px 15px;
    background-color: var(--primary);
    color: #fff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
h5.block-head-secondary {
    margin: 0;
    padding: 5px 15px;
    background-color: var(--secondary);
    color: #fff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.about-ascp{
    background-image: url(../images/hero.jpg); 
    background-size: contain; 
    background-repeat: no-repeat; 
    min-height: 450px;
    position: relative;
    padding: 30px;
}
section.comm-slider {
    width: 60%;
    min-width: 280px;
    padding: 12px 20px;
    position: absolute;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    background-color: #ffffff;
    border: 1px solid #ddd;
    right: 0;
    top: 20%;
}
section.comm-slider>h2 {
    position: absolute;
    font-size: 18px;
    background-color: #dc3545;
    color: #fff;
    padding: 4px 12px;
    border-radius: 8px 8px 0 0;
    top: -29px;
    left: 5px;
}
.carousel-item.mang{
    display: flex;
    align-items: center;
}
.carousel-item.mang>img{
    width: 100px;
    height: 100px;
    border-radius: 90px;
    margin: 15px;
}
.designation>h4 {
    font-size: 16px;
    line-height: 18px;
    font-weight: bold;
}
.designation>p {
    font-size: 13px;
    color: var(--primary);
    line-height: 16px;
    margin: 0;
}
.isc {
    border: 1px solid #ddd;
    border-radius: 12px;
    box-shadow: var(--shadow);
    overflow: hidden;
}
.isc-info {
    background-color: var(--primary);
    padding: 0;
    color: #fff;
    border-right: 1px solid #ddd;
}
.isc-details {
    padding: 30px;
}
.isc-details>h3 {
    font-size: 23px;
    text-transform: uppercase;
    margin: 0 0 30px 0;
    font-weight: bold;
}
.isc-details>span {
    color: #ffe188;
    font-size: 20px;
    border-top: 2px solid;
    border-bottom: 2px solid;
    padding: 6px;
    margin-bottom: 20px;
    display: inline-block;
}
.isc .partners{
    overflow: hidden;
}
/*==================================
    CLIENT LOGO SLIDER
==================================*/
.logo-slider {
    overflow: hidden;
    position: relative;
    width: 100%;
    background: #fff;
    padding: 20px 0;
}
.logo-slider>h3 {
    background-color: var(--secondary);
    font-size: 17px;
    text-align: center;
    color: #fff;
    width: 30%;
    margin: 0 auto;
    position: absolute;
    line-height: 26px;
    top: 5px;
    left: 35%;
    z-index: 9;
    border-radius: 18px;
}
@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.logos {
  overflow: hidden;
  padding: 40px 0;
  background: white;
  white-space: nowrap;
  position: relative;
  border-top: 1px dashed #ccc;
  border-bottom: 1px dashed #ccc;
}

.logos:before,
.logos:after {
  position: absolute;
  top: 0;
  width: 250px;
  height: 100%;
  content: "";
  z-index: 2;
}

.logos:before {
  left: 0;
  background: linear-gradient(to left, rgba(255, 255, 255, 0), white);
}

.logos:after {
  right: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), white);
}

.logos:hover .logos-slide {
  animation-play-state: paused;
}

.logos-slide {
  display: inline-block;
  animation:75s slide infinite linear;
}

.logos-slide img {
  height: 70px;
  margin: 0 20px;
}

.conferences .btn-group {
    width: 90%;
    margin: 6px 0;
}
.conferences .btn-group .btn {
    border-color: #fff;
    color: #fff;
}
.conferences .btn-group .btn-year {
    background-color: var(--secondary);
}
.conferences .btn-group .btn-one {
    background-color: #a43545;
}
.conferences .btn-group .btn-three {
    background-color: #ff5066;
}
.conferences .btn-group .btn-two {
    background-color: #dc3545;
}

.focus-panel {
    border: 1px solid #ddd;
    margin: 0 0 20px 0;
    border-radius: 6px;
    overflow: hidden;
}
.focus-panel .subject {
    background-color: #df182a;
    padding: 5px 12px;
    font-size: 16px;
    color: #fff;
    font-weight: bold;
    text-align: center;
}
.focus-panel .country {
    text-align: center;
    padding: 4px 12px;
    background-image: url(images/focus-country-flag.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: right;
}
.focus-panel .country strong {
    color: #000;
    margin: 0 8px;
    font-weight: bolder;
    font-size: 18px;
}
.focus-panel .tag {
    text-align: center;
    line-height: 32px;
}
.focus-panel .tag a {
    color: #1756a8;
    font-weight: bold;
    font-style: italic;
    letter-spacing: 1px;
    line-height: 32px;
    text-decoration: none;
}



.left-box {
    border: 1px solid #d5d5d5;
    float: left;
    width: 49%;
    min-height: 100px;
    margin-right: 1%;
}
.left-arrow-text {
    width: 26%;
    float: left;
    position: relative;
    padding: 15px;
}
.left-arrow-text aside {
    position: absolute;
    right: -26px;
    top: 44%;
    bottom: 0px;
    z-index: 9;
}
.left-arrow-text h2 {
    font-family: 'Dosis', sans-serif;
    font-size: 20px;
    color: #000;
}
.left-arrow-text h2:after {
    content: "";
    display: block;
    border-bottom: 2px solid #fff;
    width: 40px;
    padding: 8px 0;
}
.left-arrow-text h5 {
    font-size: 11px;
    color: #757575;
    font-style: italic;
    padding: 10px 0 25px 0;
}

.speaker-slider {
    max-width: 350px;
    margin: 20px auto;
    background: #fff;
    border-radius: 20px;
    padding: 30px 20px;
    text-align: center;
    box-shadow: -1px -1px 8px 3px rgba(0, 0, 0, .08);
    transition: .3s;
    display: flex;
}
#speakerCarousel {
    min-height: 250px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.speaker-card img{
    width:120px;
    height:120px;
    object-fit:cover;
    border-radius:50%;
    margin-bottom:10px;
}
.speaker-card h5{
    margin-bottom:5px;
    font-weight:700;
}
.speaker-card p{
    color:#6c757d;
    font-size:14px;
    margin-bottom:15px;
}
.carousel-control-prev,
.carousel-control-next{
    width:25px;
    color: var(--primary);
}
.carousel-control-prev-icon,
.carousel-control-next-icon{
    background-color:var(--primary);
    border-radius:50%;
    background-size: 70%;
    width: 25px;
    height: 25px;
}

.event-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.page-title{
    font-size:2rem;
    font-weight:700;
    color: var(--primary);
}
.section-title{
    font-size:2rem;
    font-weight:700;
    color: var(--primary);
}

.poster-card{
    border:none;
    border-radius:15px;
    overflow:hidden;
    transition:.4s;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
    background:#fff;
}

.poster-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(0,0,0,.15);
}

.poster-image{
    overflow:hidden;
    position:relative;
}

.poster-image img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    object-position: top;
    transition: .5s;
}

.poster-card:hover img{
    transform:scale(1.08);
}

.poster-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);
    opacity:0;
    transition:.4s;
    display:flex;
    align-items:center;
    justify-content:center;
}

.poster-card:hover .poster-overlay{
    opacity:1;
}

.poster-overlay .btn{
    transform:translateY(20px);
    transition:.4s;
}

.poster-card:hover .btn{
    transform:translateY(0);
}

.category{
    position:absolute;
    top:15px;
    left:15px;
    z-index:2;
}

.card-body h5{
    font-weight:700;
}

.card-body p{
    color:#666;
}

.modal-content{
    background:transparent;
    border:none;
}

.modal-body img{
    height:100%;
    border-radius:10px;
}

h3.subhead {
    font-size: 18px;
    color: var(--primary);
    font-style: italic;
    border-top: 1px solid #bbb;
    padding: 5px;
    font-weight: 400;
    text-align: center;
    line-height: 10px;
    float: left;
    width: 100%;
    position: relative;
    margin: 0!important;
    text-transform: none;
}
h3.subhead:before {
    position: absolute;
    right: 0px;
    top: -2px;
    content: "";
    display: block;
    border: 2px solid var(--primary);
    width: 22px;
    height: 2px;
    background-color: var(--primary);
}
h3.subhead span {
    position: absolute;
    left: 0px;
    top: -2px;
    right: 0px;
    content: "";
    display: block;
    border: 1px solid var(--primary);
    width: 98px;
    height: 2px;
    text-align: center;
    margin: 0 auto;
    background-color: var(--primary);
}
h3.subhead:after {
    position: absolute;
    left: 0px;
    top: -2px;
    content: "";
    display: block;
    border: 1px solid var(--primary);
    width: 22px;
    height: 2px;
    background-color: var(--primary);
}
h3.subhead strong {
    color: #888;
    font-style: normal;
    padding: 20px;
    display: block;
    font-weight: normal;
    font-size: 24px;
    line-height: 32px;
}

.sec-desk aside {
    display: inline-flex;
    align-items: flex-start;
}
.sec-desk aside>article {
    padding: 20px;
}
.sec-desk img {
    max-width: 130px;
    border-radius: 6px;
    margin: 15px;
}
.sec-desk article {
    text-align: justify;
    font-size: 15px;
    line-height: 20px;
    color: #212529;
}

.benefits {
    display: inline-flex;
    flex-direction: row;
}
.red-box {
    width: 50%;
}
.red-box article {
    min-height: 150px;
    width: 100%;
    padding: 25px 15px 15px 25px;
    color: #fff;
    font-size: 13px;
    line-height: 16px;
    display: block;
}
.red-box:nth-child(1) article:nth-child(1) {
    background: #c91b2b;
}
.red-box:nth-child(1) article:nth-child(2) {
    background: #fa1025;
}
.red-box:nth-child(2) article:nth-child(2) {
    background: #df182a;
}
.red-box:nth-child(2) article:nth-child(1) {
    background: #ff263a;
}
.red-box article p {
    min-height: 40px;
}
.red-box a {
    color: #fdfeff;
    padding: 15px 0 0 0;
    display: block;
}
.press {
    border: 1px solid #ccc;
    padding: 12px;
    border-radius: 6px;
}
.press .link {
    display: flex;
    align-items: center;
    border-top: 1px solid #ddd;
    padding: 12px;
}
.press .link>dt {
    color: var(--primary);
    display: inline-grid;
    justify-content: center;
}
.press .link>a {
    color: #666;
    font-size: 13px;
    padding: 0 12px 0 20px;
    text-decoration: none;
    line-height: 18px;
}
.press .link>a:hover {
    color: #000;
}
.mag img {
    width: 100%;
    box-shadow: 0 0 7px #aaa;
}

.side-box {
    padding: 12px;
}
.side-box-block {
    display: flex;
    border: 1px solid #ddd;
    align-content: flex-start;
    min-height: 300px;
    overflow: hidden;
    border-radius: 5px;
}
.side-box-block .side-bar {
    width: 30%;
    padding: 12px;
    background-color: #dedede;
    color: #fff;
}
.side-bar.yellow {
    background-color: var(--secondary);
}
.side-bar.red {
    background-color: var(--primary);
}
.side-box-block .side-bar h2 {
    font-size: 17px;
    font-weight: bold;
    line-height: 22px;
    padding-bottom: 20px;
    border-bottom: 1px dashed #fff;
    margin-bottom: 20px;
}
.side-box-block .side-bar h5 {
    font-size: 14px;
    font-style: italic;
}
.side-box-content {
    text-align: center;
    vertical-align: middle;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-direction: column;
}
.side-box-content img {
    max-width: 90%;
    margin: auto;
    vertical-align: middle;
}


 /* ===============================
           GALLERY
        =============================== */

        .gallery-item {
            position: relative;
            overflow: hidden;
            border-radius: 10px;
            background: #fff;
        }

        .gallery-item img {
            width: 100%;
            height: 240px;
            object-fit: cover;
            display: block;
            transition: transform .5s ease;
        }

        .gallery-item:hover img {
            transform: scale(1.06);
        }

        /* Zoom icon */

        .gallery-item::after {
            content: "\f52a";
            font-family: "bootstrap-icons";
            position: absolute;
            left: 50%;
            top: 50%;
            width: 46px;
            height: 46px;
            transform: translate(-50%, -50%);
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: rgba(0,0,0,.65);
            color: #fff;
            font-size: 18px;
            opacity: 0;
            transition: .3s ease;
            pointer-events: none;
        }

        .gallery-item:hover::after {
            opacity: 1;
        }


        /* ===============================
           COLORBOX
        =============================== */

       #cboxOverlay,
#colorbox,
#cboxWrapper {
  position: absolute;
  top: 0;
  left: 0;
}

#cboxOverlay {
  position: fixed;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  background: rgba(5, 10, 18, 0.88);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 1090 !important;
}

#colorbox {
  z-index: 1095 !important;
  overflow: visible !important;
  outline: 0;
}

#cboxWrapper {
  max-width: none;
  overflow: visible !important;
}

#cboxContent {
  position: relative;
  overflow: visible !important;
  background: transparent;
}

#cboxLoadedContent {
  margin: 0;
  overflow: hidden !important;
  border-radius: 12px;
  background: #0b0f16;
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.45);
}

#cboxLoadedContent .cboxPhoto {
  display: block;
  border: 0;
}

#cboxLoadingOverlay,
#cboxLoadingGraphic {
  position: absolute;
  inset: 0;
}

/* Sleek icon controls */
#cboxPrevious,
#cboxNext,
#cboxClose {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.94);
  color: #17202b;
  line-height: 1;
  text-indent: 0;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.3);
  transition: background-color 0.2s ease, color 0.2s ease,
              transform 0.2s ease, box-shadow 0.2s ease;
}

#cboxPrevious,
#cboxNext {
  position: absolute;
  top: 50%;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  transform: translateY(-50%);
  font-size: 25px;
  z-index: 2;
}

#cboxPrevious {
  left: 16px;
}

#cboxNext {
  right: 16px;
}

#cboxClose {
  position: absolute;
  top: -17px;
  right: -17px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 20px;
  z-index: 3;
}

#cboxPrevious:hover,
#cboxNext:hover,
#cboxClose:hover {
  background: #df182a;
  color: #fff;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.38);
}

#cboxPrevious:hover {
  transform: translateY(-50%) scale(1.06);
}

#cboxNext:hover {
  transform: translateY(-50%) scale(1.06);
}

#cboxClose:hover {
  transform: scale(1.06);
}

#cboxPrevious:focus-visible,
#cboxNext:focus-visible,
#cboxClose:focus-visible {
  outline: 3px solid rgba(223, 24, 42, 0.42);
  outline-offset: 3px;
}

#cboxCurrent {
  position: absolute;
  bottom: 14px;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
  margin: 0;
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.68);
  color: #fff;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
}

#cboxTitle {
  position: absolute;
  right: 16px;
  bottom: 14px;
  left: 16px;
  z-index: 1;
  color: #fff;
  text-align: left;
  pointer-events: none;
}

@media (max-width: 767.98px) {
  #cboxPrevious,
  #cboxNext {
    width: 42px;
    height: 42px;
    font-size: 21px;
  }

  #cboxPrevious {
    left: 8px;
  }

  #cboxNext {
    right: 8px;
  }

  #cboxClose {
    top: -12px;
    right: -8px;
    width: 38px;
    height: 38px;
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #cboxPrevious,
  #cboxNext,
  #cboxClose {
    transition: none;
  }
}

.conatct-box {
    padding: 20px;
    border: 1px solid #ddd;
}
.conatct-box>h6 {
    font-weight: bold;
}

/*======================================
        FOOTER
======================================*/
.footer{
    background:#0f172a;
    color:#cbd5e1;
    padding:80px 0 0;
    position:relative;
    margin-top: 50px;
}
.footer-logo{
    max-width:180px;
}
.footer h5{
    color:#fff;
    margin-bottom:25px;
    font-weight:700;
}
.footer p{
    line-height:1.8;
}
.footer ul{
    list-style:none;
    padding:0;
}
.footer ul li{
    margin-bottom:14px;
}
.footer ul li a{
    color:#cbd5e1;
    text-decoration:none;
    transition:.3s;
}
.footer ul li a:hover{
    color:#df182a;
    padding-left:6px;
}
/* Social */
.social-links{
    margin-top:30px;
}
.social-links a{
    width:42px;
    height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-right:10px;
    border-radius:50%;
    background:#1e293b;
    color:#fff;
    transition:.3s;
}
.social-links a:hover{
    background:#df182a;
    transform:translateY(-4px);
}
/* Newsletter */
.newsletter{
    margin-top:30px;
    padding:25px;
    border-radius:18px;
    background:rgba(255,255,255,.05);
    backdrop-filter:blur(10px);
}
.newsletter h6{
    color:#fff;
    margin-bottom:15px;
}
.newsletter .form-control{
    border:none;
    min-height:50px;
}
.newsletter .btn{
    min-width:140px;
}
/* Bottom */
.footer-bottom{
    margin-top:70px;
    padding:20px 0;
    border-top:1px solid rgba(255,255,255,.08);
}
.footer-bottom a{
    color:#cbd5e1;
    margin-left:20px;
    text-decoration:none;
}
.footer-bottom a:hover{
    color:#df182a;
}
/* Scroll */
#scrollTop{
    position:fixed;
    right:25px;
    bottom:25px;
    width:52px;
    height:52px;
    border:none;
    border-radius:50%;
    background:#df182a;
    color:#fff;
    box-shadow:0 10px 25px rgba(223,24,42,.4);
    z-index:999;
    transition:.3s;
}
#scrollTop:hover{
    transform:translateY(-5px);
}

.inside h3>span{color: var(--primary);}
.inside .main-content{
    margin: 20px auto;
}
.inside .main-content p{
    margin: 10px auto;
    text-align: justify!important;
}
.inside h3{
    margin-top: 50px;
    text-align: center;
}
.banner {
    min-height: 300px;
    border-radius: 12px;
    margin: 20px auto;
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
}
.banner.vision{
    background-image: url(../images/banners/vision.jpg);
}
.banner.committee{
    background-image: url(../images/banners/comm.jpg);
}
.banner.sec{
    background-image: url(../images/banners/sec.jpg);
}
.banner.eastern{
    background-image: url(../images/banners/eastern-banner.jpg);
}
.banner.northern{
    background-image: url(../images/banners/northern-banner.jpg);
}
.banner.southern{
    background-image: url(../images/banners/southern-banner.jpg);
}
.banner.western{
    background-image: url(../images/banners/western-banner.jpg);
}
.banner.central{
    background-image: url(../images/banners/central-banner.jpg);
}
.banner.bharati{
    background-image: url(../images/banners/bharati-banner.jpg);
}


.banner>h2 {
    background-color: var(--secondary);
    padding: 5px 30px;
    position: absolute;
    bottom: 10px;
    left: 0;
    border-radius: 0 30px 30px 0;
    color: #fff;
    text-shadow: 1px 1px 3px #41340c;
}
.inside li{
    text-align: justify;
    margin-bottom: 15px;
}
.leadership-box {
    border: 1px solid #ddd;
    margin: 12px auto;
}
.leadership-box img{width: 100%;}
.leadership-box .name {
    border-bottom: 4px solid var(--primary);
    font-weight: bold;
    padding: 10px;
    margin: 0 auto;
}
.leadership-box .name>cite {
    font-weight: normal;
    font-style: normal;
    color: #555;
    font-size: 15px;
    letter-spacing: -0.3px;
    line-height: 12px;
}


.gallery img{
    width:100%;
    height:250px;
    object-fit:cover;
    border-radius:12px;
    cursor:pointer;
    transition:.35s;
}

.gallery img:hover{
    transform:scale(1.05);
    box-shadow:0 20px 40px rgba(0,0,0,.25);
}

/* Modal */

.modal-content{
    background:transparent;
    border:none;
}

.modal-body{
    text-align:center;
    position:relative;
}

.news-list .news {
    display: flex;
    margin: 12px auto;
    border-radius: 10px;
    border: 1px dashed #ccc;
    padding: 0 18px;
    flex-direction: row;
}
.news-list .news h2 {
    display: flex;
    font-size: 16px;
    margin: 0 20px 0 0;
    width: 14%;
    min-width: 180px;
    color: var(--primary);
    line-height: 42px;
    border-right: 2px dashed #666;
    align-items: center;
}
.news-list .news a {
    display: flex;
    font-size: 16px;
    color: #666;
    text-decoration: none;
    text-align: justify;
    flex-direction: column;
    justify-content: center;
}

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

@media(max-width:1199px){
    #mainNavbar{
        display:none!important;
    }
    .btn{
        overflow:hidden;
        position:relative;
    }
    .ripple{
        position:absolute;
        border-radius:50%;
        background:rgba(255,255,255,.45);
        transform:scale(0);
        animation:ripple .6s linear;
        pointer-events:none;
    }
    @keyframes ripple{
        to{
            transform:scale(4);
            opacity:0;
        }
    }
    /* JS Mega Menu */
    .mega-menu{
        display:block;
        opacity:0;
        visibility:hidden;
        transform:translateY(20px);
        transition:.35s;
    }
    .mega-menu.show{
        opacity:1;
        visibility:visible;
        transform:translateY(0);
    }
    #ascpNavbar{
        top:1px;
        z-index: 1;
    }
    #ascpNavbar .navbar{
        width:96%;
    }
}
@media(min-width:1200px){
    .navbar-toggler{
        display:none;
    }
}
@media(max-width:767px){
    #ascpNavbar .navbar{
        width:94%;
        padding:12px 18px;
    }
    .logo-default{
        height:46px;
    }
    .btn-search{
        display:none;
    }
    .offcanvas{
        width:100%;
    }

    body{
        padding-top:0;
    }
    .mid-line, .top-contact>span {
        letter-spacing: -0.35px;
    }
    .hero {
        padding: 0;
    }
    .hero h1 {
        font-size: 45px;
        line-height: 1;
    }
    .hero p {
        font-size: 17px;
        line-height: 24px;
        text-align: justify;
    }
    .about-ascp {
        padding: 30px 10px;
    }
    section.comm-slider {
        width: 100%;
        padding: 0;
        position: unset;
        margin: 75% auto 0;
    }
    section.comm-slider>h2 {
        position: unset;
    }
    .logo-slider>h3 {
        width: 90%;
        margin: 0 auto;
        position: unset;
    }
    .logos:before, .logos:after {
        width: 50px;
    }

    .sec-desk aside {
        flex-direction: column;
    }
    .sec-desk aside>div {
        display: flex;
    }
    .sec-desk article {
        font-size: 18px;
        line-height: 24px;
    }
    .red-box article {
        min-height: 185px;
    }
    .event-title {
        flex-direction: column;
    }
    .news-list .news {
        flex-direction: column;
    }
    .news-list .news h2 {
        margin: 8px auto;
        border-bottom: 1px solid #ddd;
        width: auto;
        min-width: 180px;
        padding-bottom: 4px;
    }

    .side-box-block {
        flex-direction: column-reverse;
    }
    .side-box-block .side-bar {
        width: 100%; 
    }
}