@charset "utf-8";
/* additional CSS */
.bg-black-75{
	background-color: rgba(0,0,0,0.75);
}
.bg-dark-gradient{
	background: linear-gradient(to bottom, #343a40, #212529);
}

.bg-black-gradient{
	background: linear-gradient(to bottom, #343a40, #000000);
}

.bg-light-gradient{
	background: linear-gradient(to bottom, #ffffff, #b8b8b8);
}

/* Template CSS */
html {
    scroll-behavior: smooth;
}

.najeeb-navbar{
	min-height: 4rem;
}

.navbar-brand{
	font-size: 1.4rem !important;
}

.navbar.nav-main .nav-item {
    position: relative;
    padding-left: 1.2rem;
    font-size: 1.4rem;
    font-weight: 500;
}

.navbar.nav-main .nav-item:before {
    content: '•';
    position: absolute;
    left: 0.25rem;
    top: 7px;
    color: rgb(180 180 180 / 0.5);
}

.navbar.nav-secondary .nav-item {
    position: relative;
    padding-left: 0.45rem;
    padding-right: 0.45rem;
    font-size: 1rem;
    font-weight: 500;
}

.navbar.nav-secondary .nav-item:before {
    content: '|';
    position: absolute;
    top: 0.4rem;
    left: -0.15rem;
    color: rgb(180 180 180 / 0.5);
}

.navbar.nav-secondary .nav-item:first-child:before {
    content: '';
}

.najeeb-hero-container{
	/*height: calc(100vh - 2rem); min-height: 540px;*/
	min-height: 420px;
	display: flex;
	justify-content: space-around;
}
.najeeb-hero-pic-container{
	overflow: hidden;
	position:relative;
	display: flex;
	justify-content: center;
    align-items: flex-end;
}
.najeeb-hero-pic-container img{
	object-fit: contain;
    width: 100%;
    max-height: 95%;
}
.najeeb-hero-text-container{
	width: 50%
}

.najeeb-container-bg{
	/*background-image: url("/images/najeeb-background.jpg");*/
	background-color: black;
	background-size: cover;
}
.najeeb-mw-600{
	max-width: 600px;
}

.najeeb-top-reposition{
	position: absolute;
    top: 0;
    z-index: -1;
}

/* front page table CSS*/
.najeeb-icon-text-table {
  width: 100%;
  border-collapse: separate; /* Ensure padding and spacing work properly */
  border-spacing: 0; /* Reset default spacing */
}

.najeeb-icon-text-table tr {
  border-bottom: 1px solid #ddd; /* Optional: adds a bottom border to rows for better visual separation */
}

.najeeb-icon-text-table td {
  padding-right: 15px; /* Space between the icon and the text */
  vertical-align: middle; /* Center content vertically */
}

.najeeb-icon-cell {
  padding-right: 15px; /* Space between the icon and the text */
}

.najeeb-icon-cell i {
  font-size: 2rem; /* Adjust icon size */
}

.najeeb-text-cell {
  padding: 8px 0; /* Adds vertical padding to text cells */
}
/*contact form CSS*/
    .contact-form-container {
      background-color: #41484e; /* Darker background for the form */
      border-radius: 8px; /* Rounded corners */
      padding: 40px;
    }

    .contact-form-container .form-control {
      background-color: #495057; /* Dark background for input fields */
      color: #e9ecef; /* Light text color for inputs */
      border: 1px solid #6c757d; /* Border color */
    }

    .contact-form-container .form-control::placeholder {
      color: #adb5bd; /* Lighter placeholder text color */
    }

    .contact-form-container .btn-primary {
      background-color: #007bff; /* Primary button color */
      border-color: #007bff;
    }

    .contact-form-container .btn-primary:hover {
      background-color: #0056b3; /* Darker button color on hover */
      border-color: #004085;
    }

    .alert {
      margin-top: 20px;
    }
/*Social Icons*/
    .social-icons a {
      display: inline-block;
      width: 64px;
      height: 64px;
      margin: 0 10px;
      text-align: center;
      line-height: 40px;
      border-radius: 50%;
      background-color: #343a40;
      color: #ffffff;
      transition: background-color 0.3s, color 0.3s;
    }

    .social-icons a:hover {
      background-color: #495057;
      color: #ffffff;
    }

    .social-icons img {
      width: 64px;
      height: 64px;
    }.center-block {
}
/*Profile card CSS*/
.profile-card-flex{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}
.profile-card-col1{
	flex: 1;
    max-width: 128px;
    margin: 1rem;
}
.profile-card-col2{
	flex: 1;
	min-width: 300px;
}

.profile-container {
            text-align: center;
			border-radius: 8px; 
        }

        .profile-picture {
            width: 128px;
            height: 128px;
            border-radius: 50%;
            overflow: hidden;
            margin: 0 auto;
            border: 3px solid #ddd; /* Optional border */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional shadow */
        }

        .profile-picture img {
            width: 100%;
            height: auto;
        }

        .profile-description {
            margin-top: 10px;
            font-size: 16px;
            color: #333;
        }

/* Mobile-specific styles */
@media (max-width: 1024px) {
.najeeb-hero-container{
	/*height: calc(75vh - 4rem);*/
}
}

.carousel-control-prev, .carousel-control-next {
	width: 3rem !important;
	height: 3rem !important;
	background-color: black !important;
	opacity: 0.75 !important;
	
	
}
.carousel-control-prev{
	left: calc(var(--bs-gutter-x)* .5) !important;
}
.carousel-control-next{
	right: calc(var(--bs-gutter-x)* .5) !important;
}

.carousel-control-prev-icon {
  animation: slide-left 1s infinite ease-in-out; /* Adjust duration and easing as needed */
}
.carousel-control-next-icon {
  animation: slide-right 1s infinite ease-in-out; /* Adjust duration and easing as needed */
}

/* Define the animation */
@keyframes slide-left {
  0% {transform: translateX(0);}
  50% {transform: translateX(-5px); /* Move 10px to the right */}
  100% {transform: translateX(0); /* Back to the start */}
}
@keyframes slide-right {
  0% {transform: translateX(0);}
  50% {transform: translateX(5px); /* Move 10px to the right */}
  100% {transform: translateX(0); /* Back to the start */}
}