/* #aboutbg {
	padding-top:100px;
	margin-top:180px;
	margin-top:213px;
	color: #fff; 	
	background-image: url("/about/images/leadership.jpeg");
	 background-repeat: no-repeat;
	background-size:100% 100%;
	height:350px;
} */
#aboutbg {
	padding-top:100px;
	margin-top:200px;
	color: #fff; 	
	/* background-image: url("/about/images/nistatglance.jpeg"); */
    background-image: url("/about/images/leadership.jpeg");
	 background-repeat: no-repeat;
	background-size:100% 100%;
	height:350px;
}


#aboutbg-withoutpageheader{
	padding-top:100px;
	/*margin-top:110px;*/
	margin-top:163px;
	color: #fff; 	
	background-image: url("/about/images/about.jpg");
	 background-repeat: no-repeat;
	background-size:100% 100%;
	height:350px;
}

#aboutbg h1{
display:block;
}


#aboutbg-withoutpageheader h1{
display:block;
}

@media (min-width: 769px) and (max-width: 950px) {
#aboutbg h1{
display:none;
}


#aboutbg-withoutpageheader h1{
display:none;
}
#aboutbg{
margin-top:-80px;	
	background-repeat: no-repeat;
	background-size:100%;
	/* //height:250px;
	//border:solid red 1px; */
	position:static;
}

#aboutbg-withoutpageheader{
margin-top:-80px;	
	background-repeat: no-repeat;
	background-size:100%;
	/* //height:250px;
	//border:solid red 1px; */
	position:static;
}

}

@media (min-width: 280px) and (max-width: 576px) {
#aboutbg h1{
display:none;
}


#aboutbg-withoutpageheader h1{
display:none;
}
#aboutbg{
margin-top:-45px;	
	background-repeat: no-repeat;
	/* background-size:100%; */
	height:150px;
	/* //border:solid red 1px; */
}

#aboutbg-withoutpageheader{
margin-top:-45px;	
	background-repeat: no-repeat;
	background-size:100%;
	height:150px;
	/* //border:solid red 1px; */
}
.headertext{padding:0px 0px 0px 0px; font-size:20px; margin-top:-10px; }

}

@media (min-width: 577px) and (max-width: 768px) {
#aboutbg h1{
display:none;
}


#aboutbg-withoutpageheader h1{
display:none;
}
#aboutbg{
	margin-top:-80px;	
	background-repeat: no-repeat;
	background-size:100%;
	height:200px;
	/* //border:solid red 1px; */
	position:static;
}

#aboutbg-withoutpageheader{
	margin-top:-80px;	
	background-repeat: no-repeat;
	background-size:100%;
	height:200px;
	/* //border:solid red 1px; */
	position:static;
}

}






@media (min-width: 768px) {
  .navbar-header {
    float: left;
  }
}

.divsection-inner {
    background-color: #2d4697;
    border: 0;
    border-radius: 0;
    margin-bottom: 0px;
    position: fixed;
    margin-top:172px; 
    width: 100%;
    z-index: 1;
}
@media (min-width: 769px) and (max-width: 950px) {

    .divsection-inner {
        display:flex;
        position: absolute;
        margin-top: 230px;
        z-index: 0;
        /* //border:solid yellow 1px; */
    }
}

@media (min-width: 577px) and (max-width: 768px) {
    .divsection-inner {
        display:flex;
        position: absolute;
        margin-top: 200px;
        z-index: 0;
        /* //border:solid red 1px; */
    }
}

@media (min-width: 280px) and (max-width: 576px) {
    .divsection-inner {
        /* display:flex; */
        position: absolute;
        margin-top: 105px;
        z-index: 1;
        /* //border:solid red 1px; */
    }
}

.nav li a {
    padding: 0px;
    padding-top: 12px;

}

.navbar-nav {
    text-align: center;
    width: 100%;

}

.navbar-nav>li {
    /* width:20%; */
    text-align: center;

}

/* .navbar-nav-6>li {
    width: 16%;
    text-align: center;
    padding: 0px;
    margin: 0px;
    //border: solid red 1px;
} */

.navbar-inverse .navbar-text {
    color: #ffffff;
}

.navbar-inverse .navbar-nav>li>a {
    color: #ffffff;
    font-size: 1.5vh;
    -webkit-transition: 0.8s;
    /* Safari */
    transition: 0.8s;
}

.navbar-inverse .navbar-nav>li>a:hover,
.navbar-inverse .navbar-nav>li>a:focus {
    color: #df9d00;
}

.navbar ul li a i {
    font-size: 2.8vh;
}

.navbar-inverse .navbar-nav-7>li>a {
    font-size: 1.4vh;
}

@media (min-width: 951px) and (max-width: 2000px) {

    .navbar-inverse .navbar-nav-7>li>a {
        font-size: 0.8vw;
    }

    .navbar-inverse .navbar-nav-7>li>a>i {
        font-size: 1.4vw;
    }

}



@media (min-width: 280px) and (max-width: 576px){
.navbar-nav >  li  {
	width:100%;
	text-align:left;
}
.headertext{padding:0px 0px 0px 0px; font-size:20px; margin-top:-10px; }
 .container {
        width: 100%;
        padding: 0px;
        margin: 0px;
    }

}

    /* Leader Cards (President & Vice President) */
    .leader-card {
        background-color: #ffffff;
        border-radius: 12px;
        padding: 30px 33px 25px 120px;
        margin-bottom: 30px;
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
    }

    .leader-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15);
    }

    .president-card,
    .vice-president-card {
        background: linear-gradient(135deg, #364995, #5a6abf);
        color: #ffffff;
    }

    .leader-content {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .leader-card img {
        border-radius: 25%;
        width: 135px;
        height: 150px;
        object-fit: cover;
        border: 4px solid rgba(255, 255, 255, 0.7);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
        background-color: #f8f9fa;
    }

    .leader-card:hover img {
        transform: scale(1.05);
        border-color: white;
    }

    .leader-text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: left;
    }

    .leader-card h4 {
        font-weight: 600;
        margin-bottom: 10px;
        color: inherit;
        font-size: 2rem;
    }

    .leader-card h5 {
        font-weight: 500;
        margin-bottom: 15px;
        color: rgba(255, 255, 255, 0.9);
        font-size: 1.7rem;
    }

    /* BOG Cards */
    .BOGdiv {
        padding: 10px;
    }

    .BOGborder {
        background-color: white;
        border-radius: 12px;
        padding: 20px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        text-align: center;
        transition: all 0.3s ease;
        height: 100%;
        position: relative;
        overflow: visible;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .BOGborder::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient(to right, #364995, #5a6abf);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.4s ease;
    }

    .BOGborder:hover {
        transform: translateY(-8px);
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    }

    .BOGborder:hover::after {
        transform: scaleX(1);
    }

    .BOGborder img {
        border-radius: 25%;
        width: 125px;
        height: 145px;
        object-fit: cover;
        margin-bottom: 15px;
        border: 3px solid #f0f0f0;
        transition: all 0.3s ease;
        display: block;
        max-width: 100%;
        background-color: #f8f9fa;
    }

    .BOGborder:hover img {
        border-color: #2d4697;
        transform: scale(1.05);
    }

    .BOGborder h4 {
        font-weight: 600;
        margin-bottom: 8px;
        color: #2d4697;
        width: 100%;
        word-wrap: break-word;
    }

    .BOGborder p {
        color: #6c757d;
        margin-bottom: 0;
        width: 100%;
    }

    /* Center elements within center tag */
    .BOGborder center {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Fix image container for better visibility */
    .BOGborder center,
    .leader-card center {
        min-height: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .BOGdiv p {
        font-size: 12px;

    }

    .BOGdiv h4 {
        font-size: 15px;

    }

    /* Improved responsive styles for all screen sizes */
    @media (max-width: 1200px) {
        .leader-card {
            padding: 20px;
        }

        .leader-card img {
            width: 120px;
            height: 140px;
        }

        .BOGborder h4 {
            font-size: 0.95rem;
        }
    }

    @media (max-width: 991px) {

        /* Adjust the president/vice-president section padding */
        .row[style="padding: 15px 130px 0px;"] {
            padding: 15px 50px 0px !important;
        }

        .BOGborder img {
            width: 85px;
            height: 100px;
        }

        .leader-card img {
            width: 100px;
            height: 110px;
        }

        .leader-card h4 {
            font-size: 1.3rem;
        }

        .BOGborder h4 {
            font-size: 0.9rem;
        }

        .BOGborder p {
            font-size: 0.85rem;
        }

        /* Stack image and text vertically on smaller screens */
        .leader-content {
            flex-direction: column;
            text-align: center;
        }

        .leader-text {
            text-align: center;
        }
    }

    @media (max-width: 768px) {

        /* Adjust the president/vice-president section padding for mobile */
        .row[style="padding: 15px 130px 0px;"] {
            padding: 15px 15px 0px !important;
        }

        /* Make president and vice president cards stack on mobile */
        .col-md-6[style="padding-right: 15px;"],
        .col-md-6[style="padding-left: 15px;"] {
            flex: 0 0 100%;
            max-width: 100%;
            padding-right: 15px !important;
            padding-left: 15px !important;
            margin-bottom: 20px;
        }

        .leader-card {
            margin-bottom: 20px;
        }

        .leader-card img {
            width: 110px;
            height: 120px;
        }

        .leader-card p {
            font-size: 0.9rem;
            line-height: 1.4;
        }

        /* Make BOG cards two per row on tablets */
        .BOGdiv {
            width: 50%;
            flex: 0 0 50%;
            max-width: 50%;
        }

        .BOGborder img {
            width: 80px;
            height: 100px;
        }
    }

   @media (max-width: 576px) {
    .leader-card {
        padding: 15px;
    }

    .leader-card img {
        width: 100px;
        height: 110px;
        margin-bottom: 15px;
    }

    .leader-card h4 {
        font-size: 1.2rem;
        margin-bottom: 8px;
    }

    .leader-card h5 {
        font-size: 1rem;
        margin-bottom: 10px;
    }

    .leader-card p {
        font-size: 0.85rem;
    }

    .BOGborder {
        padding: 15px 10px;
    }

    .BOGborder img {
        width: 70px;
        height: 90px;
    }
    h1{
        font-size: 25px;
    }
 .paragraphBody {
	 padding: 0 20px 0 20px;
  }
 
    /* ✅ Keep BOG cards in two columns on mobile */
    .BOGdiv {
        width: 50%;
        flex: 0 0 50%;
        max-width: 50%;
        padding: 6px; /* small gap between cards */
    }
}


    @media (max-width: 400px) {
        .leader-card img {
            width: 80px;
            height: 90px;
        }

        .leader-card h4 {
            font-size: 1.1rem;
        }

        .leader-card h5 {
            font-size: 0.9rem;
        }

        .leader-card p {
            font-size: 0.8rem;
        }

        .BOGborder img {
            width: 70px;
            height: 80px;
        }
    }

.navbar-nav-4 >  li  {
	/* width:25%; */
	text-align:center;
}


  .headertext{
	margin-top: 120px;
	text-shadow: 2px 3px 3px #000000;
	
}
.headertext{padding:60px 0px 0px 60px; font-size:45px;}
.section-header{padding-bottom:20px; padding-top:0px;}
.paragraphBody {
	  text-align:justify;
	  line-height:25px;
      /* padding: 0 20px 0 20px; */
  }
    .paragraphBody li {
	  text-align:justify;
	  line-height:25px;
  }
 

  .greybg{
	background-color:#f5f4f4;
}

.paddingtopbottom{
	padding-top:40px;
	padding-bottom:40px;
}