wnav/* Description: Master CSS file */

/*****************************************
Table Of Contents:
- General Styles
- Navigation
- Header
- Statistics
- Introduction
- Details 1
- Services
- Details 2
- Invitation
- Projects
- Testimonials
- Contact
- Footer
- Copyright
- Back To Top Button
- Extra Pages
- Media Queries
******************************************/

/*****************************************
Colors:
- Backgrounds - light gray #f9fafe
- Headings text - black #191e47
- Body text - dark gray #6c717b
- Buttons, icons - blue #4555d2
- Buttons, icons, bullets - red #cc2973
******************************************/


/**************************/
/*     General Styles     */
/**************************/

body,
html {
    width: 100%;
	height: 100%;
}

body, p {
	color: #6c717b; 
	font: 400 1rem/1.625rem "Open Sans", sans-serif;
	text-align: justify;
}

h1 {
	color: #191e47;
	font-weight: 700;
	font-size: 2.5rem;
	line-height: 3.25rem;
	letter-spacing: -0.4px;
}

h2 {
	color: #191e47;
	font-weight: 700;
	font-size: 2rem;
	line-height: 2.5rem;
	letter-spacing: -0.2px;
	/* Added for small screens*/
	margin-top: 2rem;
}

h3 {
	color: #191e47;
	font-weight: 700;
	font-size: 1.75rem;
	line-height: 2.25rem;
	letter-spacing: -0.2px;
}

h4 {
	color: #191e47;
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 2rem;
}

h5 {
	color: #191e47;
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1.625rem;
}

 @media (max-width: 768px) {
     h2{
         text-align:center;
     }
 }

/**********************************************************/

h6 {
	color: #191e47;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.375rem;
}

.p-large {
	font-size: 1.125rem;
	line-height: 1.75rem;
}

.p-small {
	font-size: 0.875rem;
	line-height: 1.5rem;
}

.testimonial-text {
	font-style: italic;
}

.testimonial-author {
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1.75rem;
}

.li-space-lg li {
	margin-bottom: 0.5rem;
}

a {
	color: #6c717b;
	text-decoration: underline;
}

a:hover {
	color: #6c717b;
	text-decoration: underline;
}

.no-line {
	text-decoration: none;
}

.no-line:hover {
	text-decoration: none;
}

.blue {
	color: #4555d2;
}

.bg-gray {
	background-color: #f9fafe;
}

.btn-solid-reg {
	display: inline-block;
	padding: 1.375rem 2.25rem 1.375rem 2.25rem;
	border: 1px solid #4555d2;
	border-radius: 30px;
	background-color: #4555d2;
	color: #ffffff;
	font-weight: 600;
	font-size: 0.875rem;
	line-height: 0;
	text-decoration: none;
	transition: all 0.2s;
}

.btn-solid-reg:hover {
	background-color: transparent;
	color: #4555d2; /* needs to stay here because of the color property of a tag */
	text-decoration: none;
}

.btn-solid-lg {
	display: inline-block;
	padding: 1.625rem 2.625rem 1.625rem 2.625rem;
	border: 1px solid #4555d2;
	border-radius: 30px;
	background-color: #4555d2;
	color: #ffffff;
	font-weight: 600;
	font-size: 0.875rem;
	line-height: 0;
	text-decoration: none;
	transition: all 0.2s;
}

.btn-solid-lg:hover {
	background-color: transparent;
	color: #4555d2; /* needs to stay here because of the color property of a tag */
	text-decoration: none;
}

.btn-outline-reg {
	display: inline-block;
	padding: 1.375rem 2.25rem 1.375rem 2.25rem;
	border: 1px solid #cc2973;
	border-radius: 30px;
	background-color: transparent;
	color: #cc2973;
	font-weight: 600;
	font-size: 0.875rem;
	line-height: 0;
	text-decoration: none;
	transition: all 0.2s;
}

.btn-outline-reg:hover {
	background-color: #cc2973;
	color: #ffffff;
	text-decoration: none;
}

.btn-outline-lg {
	display: inline-block;
	padding: 1.625rem 2.625rem 1.625rem 2.625rem;
	border: 1px solid #cc2973;
	border-radius: 30px;
	background-color: transparent;
	color: #cc2973;
	font-weight: 600;
	font-size: 0.875rem;
	line-height: 0;
	text-decoration: none;
	transition: all 0.2s;
}

.btn-outline-lg:hover {
	background-color: #F3BD00;
	color: #ffffff;
	text-decoration: none;
}

.btn-outline-sm {
	display: inline-block;
	padding: 1rem 1.5rem 1rem 1.5rem;
	border: 1px solid #F3BD00;
	border-radius: 30px;
	background-color: transparent;
	color: #F3BD00;
	font-weight: 600;
	font-size: 0.875rem;
	line-height: 0;
	text-decoration: none;
	transition: all 0.2s;
}

.btn-outline-sm:hover {
	background-color: #F3BD00;
	color: #ffffff;
	text-decoration: none;
}

.form-group {
	position: relative;
	margin-bottom: 1.25rem;
}

.form-control-input,
.form-control-textarea {
	width: 100%;
	padding-top: 0.875rem;
	padding-bottom: 0.875rem;
	padding-left: 1.5rem;
	border: 1px solid #cbcbd1;
	border-radius: 30px;
	background-color: #ffffff;
	font-size: 0.875rem;
	line-height: 1.5rem;
	-webkit-appearance: none; /* removes inner shadow on form inputs on ios safari */
}

.form-control-textarea {
	display: block;
	height: 14rem; /* used instead of html rows to normalize height between Chrome and IE/FF */
}

.form-control-input:focus,
.form-control-textarea:focus {
	border: 1px solid #a1a1a1;
	outline: none; /* Removes blue border on focus */
}

.form-control-input:hover,
.form-control-textarea:hover {
	border: 1px solid #a1a1a1;
}

.form-control-submit-button {
	display: inline-block;
	width: 100%;
	height: 3.25rem;
	border: 1px solid #062352;
	border-radius: 30px;
	background-color: #062352;
	color: #ffffff;
	font-weight: 600;
	font-size: 0.875rem;
	line-height: 0;
	cursor: pointer;
	transition: all 0.2s;
}

.form-control-submit-button:hover {
	border: 1px solid #062352;
	background-color: transparent;
	color: #062352;
}



/**********************/
/*     Navigation     */
/**********************/
.navbar {
	background-color: #ffffff;
	font-weight: 600;
	font-size: 0.875rem;
	line-height: 0.875rem;
	box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.05);
}

.navbar .navbar-brand {
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
}

.navbar .logo-image img {
	width: 40%;
	
}



.navbar .logo-text {
	color: #191e47;
	font-weight: 700;
	font-size: 1.875rem;
	line-height: 1rem;
	text-decoration: none;
}

.offcanvas-collapse {
	position: fixed;
  /*top: 3.25rem;*/ /* adjusts the height bdropdown-menuetween the top of the page and the offcanvas menu */
	top: 4.25rem; /* adjusts the height between the top of the page and the offcanvas menu */
	bottom: 0;
	left: 100%;
	width: 100%;
	padding-right: 1rem;
	padding-left: 1rem;
	/*overflow-y: auto; */
	overflow-y: visible;
	visibility: hidden;
	background-color: #ffffff;
	transition: visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
	transition: transform .3s ease-in-out, visibility .3s ease-in-out;
	transition: transform .3s ease-in-out, visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
}

.offcanvas-collapse.open {
	visibility: visible;
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
}

.navbar .navbar-nav {
	margin-top: 0.75rem;
	margin-bottom: 0.5rem;
}

.navbar .nav-item .nav-link {
	padding-top: 0.625rem;
	padding-bottom: 0.625rem;
	color: #0C2B4B;
	text-decoration: none;
	transition: all 0.2s ease;
}

.navbar .nav-item.dropdown.show .nav-link,
.navbar .nav-item .nav-link:hover,
.navbar .nav-item .nav-link.active {
	color: #F3BD00;
}


/* Dropdown Menu */
.navbar .dropdown .dropdown-menu {
	animation: fadeDropdown 0.2s; /* required for the fade animation */
}

/* PLM dropdown right arrow 03/19/2025 */

.plmdropdown-toggle::after {
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    /* border-top: .3em solid; */
    /* border-right: .3em solid transparent; */
    /* border-bottom: 0; */
    /* border-left: .3em solid transparent; */
    border-top: .3em solid transparent;
    border-right: 0;
    border-bottom: .3em solid transparent;
    border-left: .3em solid;
}

@keyframes fadeDropdown {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
	}
}

.navbar .dropdown-menu {
	margin-top: 0.25rem;
	margin-bottom: 0.25rem;
	border: none;
	background-color: #ffffff;
}

.navbar .dropdown-item {
	padding-top: 0.625rem;
	padding-bottom: 0.625rem;
	color: #191e47;
	font-weight: 600;
	font-size: 0.875rem;
	line-height: 0.875rem;
	text-decoration: none;
}

.navbar .dropdown-item:hover {
	background-color: #ffffff;
	color: #F3BD00;
}

.navbar .dropdown-divider {
	width: 100%;
	height: 1px;
	margin: 0.5rem auto 0.5rem auto;
	border: none;
	background-color: #efefef;
}
/* end of dropdown menu */

.navbar .navbar-toggler {
	padding: 0;
	border: none;
	font-size: 1.25rem;
}


/*****************/
/*    Header     */
/*****************/
.header {
	position: relative;
	overflow: hidden;
	padding-top: 8rem;
	padding-bottom: 4em;
	background-color: #ffffff;
	text-align: center;
}
.deco-star {
    position: relative;
}
.deco-star .decoration-star {
    position: absolute;
    top: 80px;
    left: 500px;
    width: 200px;
    opacity: 0.7;
    animation: circleanim 9s infinite linear;
}
.header .decoration-star {
	position: absolute;
	top: 80px;
	left: 500px;
	width: 200px;
	opacity: 0.7;
	animation: circleanim 9s infinite linear;
}
.form-1 .decoration-star {
	position: absolute;
	top: 80px;
	left: 500px;
	width: 200px;
	opacity: 0.7;
	animation: circleanim 9s infinite linear;
}
.form-2 .decoration-star {
	position: absolute;
	top: 80px;
	left: 500px;
	width: 200px;
	opacity: 0.7;
	animation: circleanim 9s infinite linear;
}
.basic-2 .decoration-star {
	position: absolute;
	top: 80px;
	left: 500px;
	width: 200px;
	opacity: 0.7;
	animation: circleanim 9s infinite linear;
}
@keyframes circleanim {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.header .decoration-star-2 {
	position: absolute;
	top: 80px;
	right: -100px;
	width: 200px;
	opacity: 0.7;
}

.header div[class*="col"] {  
	/* selects all elements which have classes starting with col */
	/* needed so that the absolute positioned decoration stays behind */
	position: relative;
}

.header .h1-large {
	margin-bottom: 1.75rem;
	font-size: 3rem;
	line-height: 3.5rem;
}

.header .p-large {
	margin-bottom: 2.25rem;
}

.header .btn-solid-lg,
.header .btn-outline-lg {
	margin-right: 0.25rem;
	margin-bottom: 1.25rem;
	margin-left: 0.25rem;
}

.header .image-container {
	margin-top: 5rem;
}


/**********************/
/*     Statistics     */
/**********************/
.counter {
	padding-top: 4.5rem;
	padding-bottom: 5.5rem;
	text-align: center;
}

.counter .counter-cell {
	margin-bottom: 4rem;
}

.counter .purecounter {
	margin-bottom: 1.5rem;
	color: #191e47;
	font-weight: 400;
	font-size: 4rem;
	line-height: 2rem;
}

.counter .counter-info {
	color: #6d717a;
	font-size: 0.875rem;
	line-height: 1.5rem;
}


/************************/
/*     Introduction     */
/************************/
.basic-1 {
	padding-top: 2.25rem;
	padding-bottom: 2.75rem;
}

.basic-1 h2 {
	margin-bottom: 1.75rem;
}


/*********************/
/*     Details 1     */
/*********************/
.basic-2 {
	position: relative;
	padding-top: 3.5rem;
	/*padding-bottom: 3.5rem;*/
}

.basic-2 .decoration-star {
	position: absolute;
	top: 530px;
	left: -100px;
	width: 200px;
	opacity: 0.7;
}

.basic-2 div[class*="col"] {  
	/* selects all elements which have classes starting with col */
	/* needed so that the absolute positioned decoration stays behind */
	position: relative;
}

.basic-2 .image-container {
	margin-bottom: 5rem;
}

.basic-2 h2 {
	margin-bottom: 1.875rem;
}

.basic-2 .list-unstyled {
	margin-bottom: 2rem;
}

.basic-2 .list-unstyled .fas {
	color: #cc2973;
	font-size: 0.375rem;
	line-height: 1.625rem;
}

.basic-2 .list-unstyled .flex-grow-1 {
	margin-left: 0.5rem;
}





/*******************/
/*     Contact     */
/*******************/
.form-1 {
	position: relative;
	overflow: hidden;
	padding-top: 9.5rem;
	padding-bottom: 5.75rem;
	text-align: center;
}
.form-2 {
	position: relative;
	overflow: hidden;
	padding-top: 1.5rem;
	padding-bottom: 3.75rem;
	/*text-align: center;*/
}

.form-1 .decoration-star, .form-2 .decoration-star {
	position: absolute;
	top: 600px;
	left: -100px;
	width: 200px;
	opacity: 0.7;
}

.form-1 .decoration-star-2, .form-2 .decoration-star-2 {
	position: absolute;
	top: 600px;
	right: -100px;
	width: 200px;
	opacity: 0.7;
}

.form-1 div[class*="col"] {  
	/* selects all elements which have classes starting with col */
	/* needed so that the absolute positioned decoration stays behind */
	position: relative;
}

.form-1 .image-container {
	margin-bottom: 5rem;
}

.form-1 h2 {
	margin-bottom: 2.5rem;
}


/******************/
/*     Footer     */
/******************/
.footer {
	padding-top: 2.5rem;
	padding-bottom: 0.5rem;
	background-color: #062352;
}

.footer a {
	text-decoration: none;
}

.footer .footer-col {
	margin-bottom: 1rem;
}

.footer h6 {
	margin-bottom: 0.625rem;
	color: #6c717b;
	opacity: 0.9;
}

.footer p,
.footer a,
.footer ul {
	opacity: 0.9;
}
.footer p {
    font-size: 14px;
    margin-bottom: 0px;
}

.footer .li-space-lg li {
	margin-bottom: 0.375rem;
}

.footer .footer-col.third .fa-stack {
	width: 2em;
	margin-bottom: 1.25rem;
	margin-right: 0.375rem;
	font-size: 1.375rem;
}

.footer .footer-col.third .fa-stack .fa-stack-2x {
	color: #ffffff;
	transition: all 0.2s ease;
}

.footer .footer-col.third .fa-stack .fa-stack-1x {
	color: #F3BD00;
	transition: all 0.2s ease;
}

.footer .footer-col.third .fa-stack:hover .fa-stack-2x {
	color: #F3BD00;
}

.footer .footer-col.third .fa-stack:hover .fa-stack-1x {
	color: #ffffff;
}


/*********************/
/*     Copyright     */
/*********************/
.copyright {
	padding-top: 1rem;
	text-align: center;
	background: #062352;
}

.copyright p,
.copyright a {
	text-decoration: none;
}


/******************************/
/*     Back To Top Button     */
/******************************/
#myBtn {
	position: fixed; 
  	z-index: 99; 
	bottom: 20px; 
	right: 20px; 
	display: none; 
	width: 52px;
	height: 52px;
	border: none; 
	border-radius: 50%; 
	outline: none; 
	background-color: #44434a; 
	cursor: pointer; 
}

#myBtn:hover {
	background-color: #F3BD00;
}

#myBtn img {
	margin-bottom: 0.25rem;
	width: 18px;
}


/***********************/
/*     Extra Pages     */
/***********************/
.ex-header {
	padding-top: 8.5rem;
	padding-bottom: 4rem;
}

.ex-basic-1 .list-unstyled .fas {
	color: #cc2973;
	font-size: 0.375rem;
	line-height: 1.625rem;
}

.ex-basic-1 .list-unstyled .flex-grow-1 {
	margin-left: 0.5rem;
}

.ex-basic-1 .text-box {
	padding: 1.25rem 1.25rem 0.5rem 1.25rem;
	background-color: #f9fafe;
}

.ex-cards-1 .card {
	border: none;
	background-color: transparent;
}

.ex-cards-1 .card .fa-stack {
	width: 2em;
	font-size: 1.125rem;
}

.ex-cards-1 .card .fa-stack-2x {
	color: #cc2973;
}

.ex-cards-1 .card .fa-stack-1x {
	width: 2em;
	color: #ffffff;
	font-weight: 700;
	line-height: 2.125rem;
}

.ex-cards-1 .card .list-unstyled .flex-grow-1 {
	margin-left: 2.25rem;
}

.ex-cards-1 .card .list-unstyled .flex-grow-1 h5 {
	margin-top: 0.125rem;
	margin-bottom: 0.5rem;
}


.service-card-img-top {
    width: 100%;
    height: 250px;
}
.service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 0.25rem;
    z-index: 1;
    transition: 0.5s;
    overflow: hidden;
    height: 500px;
}
/*.service-card:hover h3, .service-card:hover p {*/
/*    color: #fff;    */
/*}*/
/*.service-card::before {*/
/*    content:'';*/
/*    position: absolute;*/
/*    left: -100%;*/
/*    background: #F3BD00;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    transition: 0.5s;*/
/*    z-index: -1;*/
/*}*/
/*.service-card:hover::before {*/
/*    left: 0%;*/
/*}*/
.profile-img {
}
@keyframes profileAnimate {
    0%, 100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
    50% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }
}
.partner-slider img {
    width: 100%;
    padding: 20px;
}
.heading-underline {
    border-bottom: 1px solid #ffc107;
    letter-spacing: 1px;
    word-spacing: 5px;
}
.who-we-are-wrapper {
    position: relative;
    /*width: 100%;*/
    /*height: 100%;*/
    overflow: hidden;
}
/*.who-we-are-box div{*/
/*    position:absolute;*/
/*    width: 60px;*/
/*    height: 60px;*/
    /*background-color: #ffc107;*/
/*    border: 6px solid #ffc107;*/
/*}*/


.gg-shape-triangle div {
    position:absolute;
    transform: scale(var(6,1));
    width: 48px;
    height: 18px;
    border-left: 3px solid transparent;
    border-bottom: 3px solid #ffc107;
}
.gg-shape-triangle div,
.gg-shape-triangle div::before {
    display: block;
    box-sizing: border-box;
    border-right: 3px solid transparent
}
.gg-shape-triangle div::before {
    content: "";
    position: absolute;
    width: 40px;
    height: 40px;
    border-left: 3px solid #ffc107;
    border-top: 3px solid #ffc107;
    border-bottom: 3px solid transparent;
    transform: rotate(45deg) skew(10deg,10deg);
    left: 0px;
    bottom: -21px;
}

.gg-shape-triangle div:nth-child(1) {
    top: 32%;
    left: 42%;
    animation: animateBox 10s linear infinite;
}
.gg-shape-triangle div:nth-child(2) {
    top: 70%;
    left: 50%;
    animation:  animateBox 7s linear infinite;
}
.gg-shape-triangle div:nth-child(3) {
    top: 36%;
    left: 6%;
    animation: animateBox 9s linear infinite;
}
.gg-shape-triangle div:nth-child(4) {
    top: 32%;
    left: 60%;
    animation: animateBox 10s linear infinite;
}
.gg-shape-triangle div:nth-child(5) {
    top: 67%;
    left: 10%;
    animation: animateBox 6s linear infinite;
}
.gg-shape-triangle div:nth-child(6) {
    top: 80%;
    left: 70%;
    animation: animateBox 12s linear infinite;
}
.gg-shape-triangle div:nth-child(7) {
    top: 60%;
    left: 80%;
    animation: animateBox 15s linear infinite;
}
.gg-shape-triangle div:nth-child(8) {
    top: 32%;
    left: 25%;
    animation: animateBox 16s linear infinite;
}
.gg-shape-triangle div:nth-child(9) {
    top: 90%;
    left: 70%;
    animation: animateBox 9s linear infinite;
}
.gg-shape-triangle div:nth-child(10) {
    top: 45%;
    left: 80%;
    animation: animateBox 12s linear infinite;
}
@keyframes animateBox {
    0%{
        transform: scale(0) translateY(0) rotate(0);
        opacity: 1;
    }
    100% {
        transform: scale(1.3) translateY(-90px) rotate(360deg);
        opacity: 0;
    }
}

@media (min-width: 350px) {
    .header .decoration-star {
		top: 100px;
		left: -150px;
		width: 300px;
	}
}
.team-item {
    position: relative;
    background: #424248;
    margin: 15px 5px;
    overflow: hidden;
    /*width:80px;*/
    cursor: pointer;
    transition: all .5s;
}

.item-meta {
    position: absolute;
    background: #061429;
    width: 100%;
    bottom: -35px;
    left: 0;
    padding: 0px 20px;
    transition: all .5s;
}
.team-item:hover .item-meta {
    bottom: 0px;
}
.item-meta h3 {
    color: #fff;
    font-size: 20px;
    font-weight: 500;
}
.item-meta h6 {
    font-size: 15px;
    font-weight: 500;
}
.item-image img {
    transition: all .5s;
}
.our-team-img {
    width: 100%;
    height: 350px;
    object-fit: cover;
  
  margin: 0 auto;
  
}
.para-right
{
    padding: 15px;
    margin-left: 20px;
}
.get-started {
    padding: 10px 18px;
    border: 1px solid #ffc107;
    border-radius: 10px;
    background-color: #ffc107;
    color: #191e47;
    font-weight: 800;
    font-size: 0.875rem;
    line-height: 0;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
}
.get-started:hover {
	border: 1px solid #062352;
	background-color: transparent;
	text-decoration: none;
	color: #062352;
}
.light-img {
    width: 30%;
}
.difference-img {
    width: 40%;
}

/*.team-item:hover img {*/
/*    background: #ff8100;*/
/*}*/
/*.add-bg {*/
/*    background-image: url('../images/blob.png');*/
/*}*/


/*************************/
/*     Media Queries     */
/*************************/	
/* Min-width 768px */
@media (min-width: 768px) {

	/* Header */
	.header {
		padding-top: 11rem;
		padding-bottom: 5em;
	}

	.header .decoration-star {
		top: 100px;
		left: -150px;
		width: 300px;
	}
	
	.header .decoration-star-2 {
		top: 140px;
		right: -200px;
		width: 400px;
	}
	/* end of header */


	/* Statistics */
	.counter .counter-cell {
		display: inline-block;
		margin-right: 1.5rem;
		margin-left: 1.5rem;
		vertical-align: top;
	}
	/* end of statistics */


	/* Services */
	.cards-1 .card {
		margin-right: 2rem;
		margin-left: 2rem;
	}
	
	/* end of services */


	/* Contact */
	.form-1 .decoration-star, .form-2 .decoration-star {
		left: -150px;
		width: 300px;
	}
	
	.form-1 .decoration-star-2, .form-2 .decoration-star {
		right: -200px;
		width: 400px;
	}
	/* end of contact */


	/* Extra Pages */
	.ex-basic-1 .text-box {
		padding: 1.75rem 2rem 0.875rem 2rem;
	}
	/* end of extra pages */
}
/* end of min-width 768px */


/* Min-width 992px */
@media (min-width: 992px) {
	
	/* General Styles */
	.h2-heading {
		width: 35.25rem;
		margin-right: auto;
		margin-left: auto;
	}

	.p-heading {
		width: 46rem;
		margin-right: auto;
		margin-left: auto;
	}
	/* end of general styles */


	/* Navigation */
	.navbar {
		padding-top: 1rem;
		background-color: #ffffff;
		box-shadow: none;
		transition: all 0.2s;
	}

	.navbar.extra-page {
		padding-top: 0.5rem;
	}

	.navbar.top-nav-collapse {
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
		background-color: #ffffff;
		box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.05);
	}

	.offcanvas-collapse {
		position: static;
		top: auto;
		bottom: auto;
		left: auto;
		width: auto;
		padding-right: 0;
		padding-left: 0;
		background-color: transparent;
		overflow-y: visible;
		visibility: visible;
	}

	.offcanvas-collapse.open {
		-webkit-transform: none;
		transform: none;
	}

	.navbar .navbar-nav {
		margin-top: 0;
		margin-bottom: 0;
	}
	
	.navbar .nav-item .nav-link {
		padding-right: 0.75rem;
		padding-left: 0.75rem;
	}

	.navbar .dropdown-menu {
		padding-top: 0.75rem;
		padding-bottom: 0.75rem;
		box-shadow: 0 3px 3px 1px rgba(0, 0, 0, 0.08);
	}

	.navbar .dropdown-divider {
		width: 90%;
	}

	.navbar .nav-item .btn-outline-sm {
		margin-top: 0;
		margin-left: 1rem;
	}
	/* end of navigation */


	/* Header */
	.header {
		text-align: left;
	}

	.header .text-container {
		margin-top: 4rem;
	}

	.header .image-container {
		margin-top: 0;
	}

	.header .btn-solid-lg,
	.header .btn-outline-lg {
		margin-right: 0;
		margin-left: 0;
	}
	
	.header .btn-solid-lg {
		margin-right: 0.5rem;
	}
	/* end of header */


	/* Statistics */
	.counter .purecounter {
		font-size: 6rem;
		line-height: 4rem;
	}
	/* end of statistics */


	/* Introduction */
	.basic-1 h2 {
		width: 90%;
	}
	/* end of introduction */


	/* Details 1 */
	.basic-2 .decoration-star {
		top: 260px;
		left: -150px;
		width: 300px;
	}

	.basic-2 .image-container {
		margin-bottom: 0;
	}
	/* end of details 1 */


	/* Services */
	.cards-1 .text-container {
		margin-bottom: 0;
	}
	/* end of services */


	/* Details 2 */
	.basic-3 .decoration-star {
		top: 260px;
		right: -150px;
		width: 300px;
	}

	.basic-3 .image-container {
		text-align: right;
	}
	/* end of details 2 */


	/* Invitation */
	.basic-4 h4 {
		width: 48rem;
		margin-right: auto;
		margin-left: auto;
	}
	/* end of invitation */


	/* Projects */
	.cards-2 .card {
		display: inline-block;
		width: 292px;
		max-width: 100%;
		vertical-align: top;
	}
	
	.cards-2 .card:nth-of-type(3n+2) {
		margin-right: 1.5rem;
		margin-left: 1.5rem;
	}
	/* end of projects */


	/* Contact */
	.form-1, .form-2 {
		text-align: left;
	}

	.form-1 .decoration-star, .form-2 .decoration-star {
		top: 260px;
	}
	
	.form-1 .decoration-star-2, .form-2 .decoration-star-2 {
		top: 240px;
	}

	.form-1 .image-container {
		margin-bottom: 0;
	}
	/* end of contact */


	/* Footer */

	.footer .footer-col.first {
		display: inline-block;
		width: 320px;
		margin-right: 1.75rem;
		vertical-align: top;
	}
	
	.footer .footer-col.second {
		display: inline-block;
		width: 320px;
		margin-right: 1.75rem;
		vertical-align: top;
	}
	
	.footer .footer-col.third {
		display: flex;
		/*width: 224px;*/
		text-align: left;
		vertical-align: top;
		justify-content: center;
	}

	.footer .footer-col.third .fa-stack {
		margin-left: 0;
		margin-right: 0.375rem;
	}
	/* end of footer */


	/* Extra Pages */
	.ex-cards-1 .card {
		display: inline-block;
		width: 296px;
		vertical-align: top;
	}

	.ex-cards-1 .card:nth-of-type(3n+2) {
		margin-right: 1rem;
		margin-left: 1rem;
	}
	/* end of extra pages */
}
/* end of min-width 992px */


/* Min-width 1200px */
@media (min-width: 1200px) {
	
	/* General Styles */
	.container {
		max-width: 1140px;
	}
	/* end of general styles */
	

	/* Header */
	.header {
		padding-top: 7rem;
		padding-bottom: 6rem;
	}

	.header .text-container {
		margin-top: 6.5rem;
	}

	.header .decoration-star {
		top: 200px;
		left: -200px;
		width: 500px;
	}
	
	.header .decoration-star-2 {
		top: 150px;
		right: -200px;
		width: 600px;
	}

	.header .h1-large {
		font-size: 4.25rem;
		line-height: 4.875rem;
	}

	.header .image-container {
		text-align: right;
	}
	/* end of header */


	/* Statistics */
	.counter .counter-cell {
		margin-right: 3.5rem;
		margin-left: 3.5rem;
		width: 180px;
	}
	
	.counter .counter-cell:first-of-type {
		margin-left: 0;
	}

	.counter .counter-cell:last-of-type {
		margin-right: 0;
	}

	.counter .purecounter {
		font-size: 6.75rem;
		line-height: 4.5rem;
	}
	/* end of statistics */


	/* Details 1 */
	.basic-2 .decoration-star {
		top: 140px;
		left: -200px;
		width: 500px;
	}

	.basic-2 .text-container {
		margin-top: 5rem;
		margin-left: 2.5rem;
	}

	.basic-2 h2 {
		width: 90%;
	}
	
	/* end of details 1 */


	/* Services */
	.cards-1 .text-container {
		margin-top: 2rem;
		margin-right: 4.75rem;
	}

	.cards-1 .card {
		margin-right: 2.25rem;
		margin-left: 2.25rem;
	}

	.cards-1 .card:nth-of-type(3n+1) {
		margin-left: 0;
	}
	
	.cards-1 .card:nth-of-type(3n+3) {
		margin-right: 0;
	}
	/* end of services */


	/* Details 2 */
	.basic-3 .decoration-star {
		top: 140px;
		right: -200px;
		width: 500px;
	}

	.basic-3 .text-container {
		margin-top: 6rem;
		margin-right: 3rem;
	}

	.basic-3 h2 {
		width: 95%;
	}
	/* end of details 2 */


	/* Projects */
	.cards-2 .card {
		width: 350px;
	}

	.cards-2 .card:nth-of-type(3n+2) {
		margin-right: 1.625rem;
		margin-left: 1.625rem;
	}
	/* end of projects */


	/* Testimonials */
	.slider-1 .quotes-decoration {
		left: 170px;
		width: 220px;
	}

	.slider-1 .slider-container {
		width: 82%;
		margin-right: auto;
		margin-left: auto;
	}
	/* end of testimonials */


	/* Contact */
	.form-1 .decoration-star, .form-2 .decoration-star {
		top: 140px;
		left: -300px;
		width: 600px;
	}
	
	.form-1 .decoration-star-2, .form-2 .decoration-star-2 {
		top: 140px;
		right: -300px;
		width: 600px;
	}

	.form-1 .text-container, .form-2 .text-container {
		margin-left: 2.5rem;
	}

	.form-1 h2 {
		width: 82%;
	}
	/* end of contact */


	/* Footer */
	.footer .footer-col.first {
		width: 352px;
		margin-right: 6rem;
	}
	
	.footer .footer-col.second {
		margin-right: 6.5rem;
	}
	
	.footer .footer-col.third {
		text-align: left;
	}
	/* end of footer */


	/* Extra Pages */
	.ex-cards-1 .card {
		width: 336px;
	}

	.ex-cards-1 .card:nth-of-type(3n+2) {
		margin-right: 2.875rem;
		margin-left: 2.875rem;
	}
	/* end of extra pages */
}
/* end of min-width 1200px */


/* Min-width 1400px */
@media (min-width: 1400px) {
	
	/* Header */
	/*.header .decoration-star {
		top: 120px;
		left: -250px;
		width: 600px;
	}
	
	.header .decoration-star-2 {
		top: 60px;
		right: -300px;
		width: 700px;
	}*/
	/* end of header */
	
}
/* end of min-width 1400px */
@media (max-width: 480px) {
    .navbar .logo-image img {
        width: 75px;
    	height: 50px;
    }
    .our-team-img {
        height: 300px;
    }
}


/********************************/
/*header and content seperation*/
/******************************/

/* Added for header and content seperation having image in the left or right*/
/* Overall section style */
.content-section {
  margin: 50px 0;
  padding: 40px;
  border-radius: 8px;
  background-color: #f9f9f9;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out;
  display:flex;
}


/* Added for header and content seperation without image adjustment */
.info-section{
    margin: 50px 0;
      padding: 40px;
      border-radius: 8px;
      background-color: #f9f9f9;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease-in-out;
}

/* Header style 1 */
.section-header {
  text-transform: uppercase;
  font-size: 2rem;
  font-weight: 700;
  line-height: 2.5rem;
  color: #191e47;
  border-bottom: 2px solid #fdb515;
  padding-bottom: 10px;
  margin-bottom: 20px;
  letter-spacing: -0.2px;
  animation: headerFadeIn 1s ease-out;
  /* Added for small screens*/
  margin-top: 2rem;
}

/* Header style 2 */
.section-header2 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 2.5rem;
  color: #191e47;
  border-bottom: 2px solid #fdb515;
  padding-bottom: 10px;
  margin-bottom: 20px;
  letter-spacing: -0.2px;
  animation: headerFadeIn 1s ease-out;
  /* Added for small screens*/
  margin-top: 2rem;
}

/* Header style 3 */
.section-header3 {
    font-size: 28px;
    margin-bottom: 20px;
    border-left: 5px solid #F3BD00;
    padding-left: 15px;
}


/* Content style */
.section-content  {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 15px;
  font-family: 'Arial', sans-serif;
  margin-right:55px;
}

/* Animation for header */
@keyframes headerFadeIn {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
      .content-section {
    flex-direction: column;
    padding: 20px;
    text-align: center;
  }
  
  .section-header {
    font-size: 1.6rem;
    margin-bottom: 15px;
  }
  
  .section-content ul {
    padding-left: 20px;
    text-align: left;
  }

  .section-content li {
    margin-bottom: 10px;
    font-size: 1rem;
  }
}


/********************************/
/*Portfolio Management Hero Section*/
/******************************/

    .hero-section {
      position: relative;
      background-size: cover;
      background-position: center;
      height: 90vh;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 20px;
      
    }
    
  

    .hero-overlay {
      background-color: rgba(6, 35, 82, 0.7); /* dark blue overlay */
      padding: 40px;
      border-radius: 12px;
      max-width: 700px;
      text-align: center;
    }
    
    .hero-overlay h1 {
      font-size: 42px;
      margin-bottom: 20px;
      color: #F3BD00;
    }

    .hero-overlay p {
      font-size: 20px;
      line-height: 1.5;
      color: #ffffff;
    }
    
    .teamcenter-hero-section {
      background-size: cover;
      height: 90vh;
      color: white;
      align-items: center;
      padding: 80px 20px;
      
    }
    
    .teamcenter-hero-overlay{
      position: relative;
      z-index: 2;
      padding: 0 20px; /* Keep responsive text spacing */
      max-width: 700px;
      text-align: left;
        }
    .teamcenter-hero-overlay h1 {
      font-size: 35px;
      margin-bottom: 20px;
      color:white;
    }
    
    .teamcenter-hero-overlay p {
      font-size: 20px;
      line-height: 1.5;
      color: #6c717b;
    }
    
    
    
    .btn-primary {
      background-color: #0066cc;
      color: #fff;
      padding: 12px 30px;
      border-radius: 5px;
      font-weight: 600;
      transition: background 0.3s;
    }
    
    .btn-primary:hover {
      background-color: #004c99;
    }

    @media (max-width: 768px) {
      .hero-overlay h1 {
        font-size: 32px;
      }

      .hero-overlay p {
        font-size: 16px;
      }
    }
    
  .feature-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 25px;
    }

    .feature-card {
      transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
            cursor: pointer;
            border-radius: 15px; /* Rounded corners */
            height: 100%;
            overflow: hidden;
            position: relative;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
            display: flex;
            flex-direction: column;
            border: 2px solid #fdb515;/* Set border width and color */
    }
    .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
        }
    
    .feature-card-header {
            background-color: #062352;
            color: white;
            text-align: center;
            padding: 20px;
            border-top-left-radius: 15px; /* Rounded corners */
            border-top-right-radius: 15px; /* Rounded corners */
            height: 80px;
        }
        
    .feature-card-header .feature-card-title {
            font-size: 1.2rem;
            font-weight: bold;
            margin-bottom: 9px;
			color: #fdb515;
			
        }
        
     .feature-card-body {
            background-color: #f8f9fa;
            padding: 15px;
            padding-bottom: 10px;
            text-align: center;
            flex-grow: 1;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

    .feature-card-body .icon {
            font-size: 3rem;
            color: #fdb515;
            margin-bottom: 15px;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            /*background-color: #e9ecef;*/
            background-color: #062352;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: auto;
            margin-right: auto;
        }

    .feature-card-body p {
            font-size: 0.95rem;
            color: #555;
            line-height: 1.5;
            text-align:left;
        }
        
    .feature-card-body .overview {
      margin-top: 10px;
      text-align: left;
      font-size: 0.9rem;
      color: #444;
    }
    
    .feature-card-body .offerings {
      margin-top: 10px;
      text-align: left;
      font-size: 0.9rem;
      color: #444;
    }

    .feature-card-body .offerings strong {
      display: block;
      margin-bottom: 5px;
      color: #062352;
    }
    /* Feature-card in Teamcenter PLM */
    
     .feature-card-body .overview strong {
      display: block;
      margin-bottom: 5px;
      color: #062352;
    }
    
    .feature-card-body .overview p {
        font-size: 0.95rem;
        color: #555;
        line-height: 1.5;
        text-align:left;
    }
    

    .feature-card-body .benefits {
      margin-top: 10px;
      text-align: left;
      font-size: 0.9rem;
      color: #444;
    }

    .feature-card-body .benefits strong {
      display: block;
      margin-bottom: 5px;
      color: #062352;
    }

    /* Responsive tweak for mobile */
    @media (max-width: 480px) {
      .feature-card-header {
        height: auto;
        padding: 15px;
      }

      .feature-card-header .feature-card-title {
        font-size: 1rem;
      }
    }


/********************************/
/*Aavneo Services in Aras PLM Section*/
/******************************/

/* Section styles */
.services-section {
    padding: 20px 20px;
    height: 105vh;
}

services-section h2 {
    /*margin-bottom: 20px;*/
    font-size: 2rem;
    color: #333;
}

services-section p {
    font-size: 1.2rem;
    color: #555;
}

.img-style{
    max-width: 500px;
  width: 100%;
  border-radius: 20px;
  object-fit: cover;
  flex: 1 1 40%;
}

/* Optional: Add some space between sections */
#aras-consulting_services {
    background-color: #f9f9f9;
}

#aras-implementation_services {
    background-color: #eaf2f8;
}

#aras-data-migration_services {
    background-color: #f7f7f7;
}

#aras-integration_services {
    background-color: #f9f9f9;
}

#aras-data-sustenance_services {
    background-color: #eaf2f8;
}

#aras-subcontractor_services {
    background-color: #f7f7f7;
}

@media (max-width: 1080px) {
    .services-section {
        padding: 20px 20px;
        height: 80vh;
    }
}
@media (max-width: 780px) {
    .services-section {
        padding: 20px 20px;
        height: 140vh;
    }
}

/*************************************/
/*Why choose Aavneo Services Section**/
/************************************/


    .why-choose-hero {
      position: relative;
      padding: 40px 20px 20px;
      background-color: #f4f4f4;
    }
    
    .hero-title {
      text-align: center;
      font-size: 2.8rem;
      font-weight: bold;
      color: #062352;
      margin-bottom: 30px;
    }
    
    .hero-image-container {
      background-image: url('images/Aras/why choose us2.jpg');
      background-size: 100%;
      background-position: center;
      background-repeat:no-repeat;
      height: 500px;
      position: relative;
      border-radius: 15px;
      overflow: hidden;
    }
    
    .choose-hero-overlay {
      position: absolute;
      bottom: 0;
      width: 100%;
      padding: 30px 20px;
      background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
      backdrop-filter: blur(3px);
      display: flex;
      justify-content: center;
      align-items: flex-end;
    }
    
    .hex-reasons-container {
      display: flex;
      /*flex-wrap: wrap;*/
      justify-content: center;
      gap: 100px 40px;
    }
    
    .hex-reason {
      position: relative;
      width: 130px;
      height: 160px;
    }
    
    .hex {
      width: 110px;
      height: 110px;
      margin: 0 auto;
      /*background-color:#062352;*/
      background-color:#fdb515;
      clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
      /*clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);*/
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
      color: #fdb515;
      transition: transform 0.3s ease;
    }
    
    
    .pointer {
      position: absolute;
      width: 160px;
      text-align: center;
      background-color: #ffffff;
      padding: 6px 12px;
      font-size: 0.9rem;
      font-weight: 600;
      color: #062352;
      border-radius: 20px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.15);
      z-index: 1;
    }
    
    .pointer.up {
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%) translateY(-15px);
    }
    
    .pointer.down {
      top: 60%;
      left: 50%;
      transform: translateX(-50%) translateY(15px);
    }
    
    .pointer.up::after,
    .pointer.down::after {
      content: '';
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      border: solid transparent;
      height: 0;
      width: 0;
      pointer-events: none;
    }
    
    .pointer.up::after {
      top: 100%;
      border-top-color: #ffffff;
      border-width: 8px;
      border-bottom: 0;
    }
    
    .pointer.down::after {
      bottom: 100%;
      border-bottom-color: #ffffff;
      border-width: 8px;
      border-top: 0;
    }
    
    /* Responsive */
    @media (max-width: 1024px) {
      .hero-title {
        font-size: 2.4rem;
      }
    
      .hex-reasons-container {
        gap: 80px 10px;
      }
    
    .choose-hero-overlay {
        display:block;
    }
    
      .hex {
        width: 100px;
        height: 100px;
        font-size: 1.8rem;
      }
    
      .pointer {
        width: 150px;
        font-size: 0.85rem;
      }
      .hero-image-container{
          height:350px;
      }
    }
    
    @media (max-width: 768px) {
      .hero-image-container {
        height: 400px;
      }
    
      .hero-title {
        font-size: 2rem;
        margin-bottom: 20px;
      }
    
      .choose-hero-overlay {
        flex-direction: column;
        align-items: center;
        display:block;
        gap: 40px;
        padding: 20px 10px;
      }
    
      .hex-reasons-container {
        gap: 50px 20px;
      }
    
      .hex {
        width: 80px;
        height: 80px;
        font-size: 1.5rem;
      }
    
      .pointer {
        width: 90px;
        font-size: 0.75rem;
        padding: 5px 10px;
      }
    }
    
    @media (max-width: 480px) {
      .hero-image-container {
        height: 350px;
      }
    
      .hero-title {
        font-size: 1.7rem;
      }
    
      .hex {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
      }
    
      .pointer {
        width: 100px;
        font-size: 0.7rem;
        padding: 4px 8px;
      }
    
      .hex-reasons-container {
        gap: 40px 15px;
      }
    }
    
    
/*************************************/
/*News and Announcement Section on Home page **/
/************************************/  
    
    .news-carousel {
      padding: 50px 20px;
      background-color: white;
    }
    .news-carousel h2 {
      text-align: center;
      margin-bottom: 30px;
    }
    .center-slide {
      justify-content: center;
      display: flex;
    }
    .swiper-slide {
      background: #fff;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    }
    .swiper-slide img {
      width: 100%;
      height: 180px;
      object-fit: cover;
    }
    .slide-content {
      padding: 20px;
    }
    .slide-content h3 {
      margin-bottom: 10px;
      font-size: 1.1rem;
    }
    .slide-content p {
      font-size: 0.95rem;
      color: #444;
    }
    .slide-content a {
      display: inline-block;
      margin-top: 10px;
      color: #fdb515;
      font-weight: bold;
      text-decoration: none;
    }
    .slide-content a:hover {
      text-decoration: underline;
    }
    .project-badge {
      margin-bottom: 10px;
    }
    
    .project-badge span {
      background-color: #ffc107; /* warning yellow */
      color: #212529;
      padding: 4px 8px;
      font-size: 0.75rem;
      font-weight: 600;
      border-radius: 4px;
      display: inline-block;
    }
    .swiper-nav-wrapper {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin-top: 20px;
    }
    
    .swiper-button-prev,
    .swiper-button-next {
      position: static !important;  /* remove Swiper’s absolute positioning */
      background-color: #007bff;
      color: #fff;
      padding: 10px 14px;
      border-radius: 4px;
      font-size: 18px;
      font-weight: bold;
      cursor: pointer;
      user-select: none;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }
    
    /* Optional hover effect */
    .swiper-button-prev:hover,
    .swiper-button-next:hover {
      background-color: #0056b3;
    }


/*****************************************************************************************************************/    
/****************************Cybersecurity Approaches and Implementation scenarios section **********************/
/***************************************************************************************************************/


        .process {
            padding: 80px 2rem;
            background: #ffffff;
        }

        .process-steps {
            max-width: 1000px;
            margin: 0 auto;
            grid-template-columns: repeat(3, 1fr); 
            display: flex; /* Change to flexbox for better centering control of the last row */
            flex-wrap: wrap; /* Allows items to wrap to the next line */
            justify-content: center; /* This centers both the first (3) and second (2) rows */
            gap: 2rem;
                    
            
        }

        .process-step {
            background: white;
            padding: 1.5rem; /* Reduced padding slightly */
            font-size: 0.9rem;
            position: relative;
            border-radius: 50%;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
            border-left: 5px solid #fdb515; 
            text-align: center;
            width: 270px;
            height: 270px;
            /* Ensure text is centered vertically */
            display: flex; 
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .process-step h3 {
            color: #062352;
            margin: 10px 0;
        }
        
        .process-step p {
            color: #5c667a;
            line-height: 1.4;
            font-size: 0.9rem;
            text-align:center;
        }
        
        .step-icon {
            width: 50px; /* Slightly smaller number circle */
            height: 50px;
            
            /* Updated number background to Golden Yellow accent */
            background: #062352; 
            
            color: #fdb515; /* Dark text on Yellow circle */
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
            font-weight: bold;
            margin-bottom: 10px;
        }
        
        
        
        
        
        /* Implementation Scenarios */
        
        
        .scenarios-section {
            background-color: #ffffff; /* Matches hero background */
            padding: 40px 5%;
            text-align: center;
        }
        
        .scenarios-section .section-title {
            color: #062352;
            font-size: 2.5em;
            margin-bottom: 50px;
        }
        
        .scenarios-list-container {
            max-width: 1000px;
            margin: 0 auto;
            /* Arranges the two lists side-by-side on large screens */
            display: flex; 
            justify-content: space-between;
            gap: 20px;
        }
        
        .scenarios-list {
            list-style: none;
            padding: 0;
            margin: 0;
            text-align: left;
            flex-basis: 50%; /* Each list takes up half the width */
        }
        
        .scenarios-list li {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            /*font-size: 1.15em;
            color: #062352;*/
            font-size: 0.95rem;
            color: #555;
            line-height: 1.4;
            padding: 10px 0;
            border-bottom: 1px solid #e0e0e0; /* Subtle separator */
        }
        
        .bullet-icon {
            /* Use the yellow accent for visibility */
            color: #fdb515; 
            font-size: 1.4em;
            margin-right: 15px;
            min-width: 30px; /* Ensures consistent alignment */
        }
        
        

        /* Responsive adjustment for single column on small screens */
        @media (max-width: 768px) {
            .scenarios-list-container {
                flex-direction: column; /* Stacks lists vertically */
                gap: 0; 
            }
            .scenarios-list {
                flex-basis: 100%;
                margin-bottom: 30px;
            }
        }   

/*****************************************************************************************************************/    
/****************************About Us - Timeline, Metrics and verticals******************* **********************/
/***************************************************************************************************************/   
        #about-glance-rebuilt {
				padding-top: 60px;
				padding-bottom: 60px;
			}



			/* --- Timeline Section Styling --- */
			.timeline-container {
				position: relative;
				/* Remove explicit width definition if using Bootstrap container, but adding margin: auto for centering */
				width: 90%; 
				margin: 0 auto 50px auto; /* Ensures horizontal centering and pushes content below */
				
				/* Crucial: Set a height based on the boxes (approx. 90px) + space + line (approx. 4px) + dots. */
				/* Adjust this height value (e.g., 120px) if your content boxes are taller or shorter. */
				height: 140px; 
				
				padding-top: 10px; 
			}

			/* The horizontal line */
			.timeline-line {
				position: absolute;
				/* Position the line relative to the timeline-container's top */
				top: 120px; 
				left: 0;
				right: 0;
				height: 4px;
				background-color: #f8b400; 
				z-index: 1;
			}

			.timeline-item {
				position: absolute;
				/* Boxes remain positioned at the top */
				top: 0; 
				transform: translateX(-50%); 
				width: 15%; 
				text-align: center;
				z-index: 2;
			}

			.timeline-dot {
				width: 16px;
				height: 16px;
				background-color: #f8b400;
				border-radius: 50%;
				position: absolute;
				/* Positioned relative to the item, set to match the line's top value (100px) minus half the dot height (8px) */
				top: 112px; 
				left: 50%;
				transform: translateX(-50%);
				border: 2px solid #fff; 
			}
			.timeline-box {
				background-color: #062352; /* Dark Blue boxes */
				color: #ffffff;
				padding: 15px 10px;
				border-radius: 8px;
				font-size: 0.85rem;
				line-height: 1.3;
				box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
				/* ADDED: Fixed height for consistency */
                height: 90px;
			}
            
            @media (max-width: 991.98px) {
    
                /*TIMELINE CONTAINER: Switch to vertical flow */
                .timeline-container {
                    width: 100%;
                    height: auto; /* Remove fixed height */
                    padding-top: 20px;
                    border-left: 4px solid #f8b400; /* Vertical line replaces horizontal line */
                    margin-left: 15px; /* Creates space for the left border/line */
                    margin-bottom: 30px;
                }
            
                /* Remove the horizontal line that now conflicts with the vertical one */
                .timeline-line {
                    display: none;
                }
                
                /* TIMELINE ITEMS: Remove absolute positioning and stack vertically */
                .timeline-item {
                    position: relative; /* Switch to normal document flow */
                    left: auto !important; /* Ignore the inline 'left' percentages */
                    transform: none;
                    width: 95%; /* Use almost full width */
                    margin-bottom: 30px;
                    margin-left: 20px; /* Space the box away from the vertical line */
                    
                }
                
            
                /* TIMELINE DOTS: Reposition dot to the left, crossing the vertical line */
                .timeline-dot {
                    position: absolute;
                    top: 35%;
                    left: -30px; /* Position dot on the new vertical line (15px margin + 15px offset) */
                    transform: none;
                }
            }
            
            
            
            /* --- Mission Statement Styling (to ensure centering) --- */
			.mission-box {
				border: 2px solid #fdb515 ;
				border-radius: 8px;
				padding: 20px 30px;
				/* Adjusted width and added margin: 0 auto for guaranteed centering */
				width: 65%; 
				margin: 40px auto 0 auto; /* Margin ensures separation from the timeline above */
				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
			}


			.mission-box p {
				margin: 0;
				font-size: 1.1rem;
				color: #062352;
			}

			.mission-box strong {
				font-weight: 700;
				color: #fdb515;
			}
			
			@media (max-width: 991.98px) {
				/* ... (Keep your existing mobile styles to maintain responsiveness) ... */
				.mission-box {
                    width: 90%;
                }
			}
			
			
			/* --- Key Metrics Styling --- */
			.metric-row {
				display: flex;
				justify-content: center;
				flex-wrap: wrap; 
				gap: 30px; /* Increased gap for better separation on desktop */
				padding: 30px 0;
				border-top: 1px solid #eee; /* Added a subtle line for definition */
				border-bottom: 1px solid #eee;
			}

			.metric-box {
				/* New: Card-like appearance */
				background-color: #f7f7f7; /* Light background for the card */
				border: 1px solid #fdb515;
				border-radius: 8px;
				
				padding: 20px; /* Increased padding */
				margin-bottom: 0; /* Removed bottom margin since we use gap now */
				
				/* Adjusted width to be more proportionate (less strict max-width) */
				width: 200px; /* New fixed width for a clean look */
				min-height: 180px; /* Ensures all boxes have a uniform height */
				text-align: center;
				
				/* New: Box Shadow for a subtle lift */
				box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); 
				transition: transform 0.3s ease;
			}

			/* Hover effect for a little interactivity */
			.metric-box:hover {
				transform: translateY(-5px);
			}

			.metric-box i {
				/* Make the icons much larger and bold */
				font-size: 3.5rem; /* Larger icon size */
				color: #fdb515; /* Dark Blue brand color */
				margin-bottom: 10px;
				height: auto; /* Allow icon container to fit the large icon */
			}

			.metric-box strong {
				/* Highlight the key number/data */
				display: block; /* Makes the strong text take its own line */
				font-size: 1.1rem; /* Slightly larger key data font */
				color: #062352;
				font-weight: 700;
			}

			.metric-box p {
				font-size: 0.95rem; /* Slightly increased readability */
				line-height: 1.4;
				color: #555;
				/* FIX: Override any inherited text-align: justify */
                text-align: center;
				
			}

			/* Override the mobile styles to ensure they remain functional */
			@media (max-width: 991.98px) {
				/* ... (Keep your existing mobile styles to maintain responsiveness) ... */
				
				.metric-box {
					/* Revert to mobile styles for full width and flex layout */
					width: 100%;
					min-height: auto; /* Allow height to collapse on mobile */
					text-align: left;
					background-color: transparent; /* Remove card background on mobile */
					border: none;
					box-shadow: none;
					padding: 10px 0;
				}
				.metric-box:hover {
					transform: none;
				}
				
				.metric-row {
                    gap: 0;
                }
                
                .metric-box i {
                    margin-bottom: 0;
                    margin-right: 15px;
                    flex-shrink: 0;
                }
                .metric-box p {
                    font-size: 1rem;
                }
                
			}
			
			
			/* Vertical Area - Main layout for Verticals and Horizontals */
        .verticals-area {
            display: flex;
            /* Ensure no padding at the top of content-area */
            padding: 20px 0 40px 0; 
            position: relative; 
        }

        /* Wrapper for the main content to push it away from the labels */
        .verticals-content-wrapper {
            flex-grow: 1;
            padding-left: 60px; /* Space for the vertical labels */
            /* Add padding to the top of the content wrapper to match the card start */
            padding-top: 20px; 
            padding-bottom: 20px; 
        }
        
        /* Vertical Labels Container - Updated positioning */
        .verticals-label-container {
            /* Position the container relative to the content-area start */
            position: absolute;
            left: 0;
            /* Set top value to align with the top padding of the wrapper */
            top: 40px; 
            /* We don't need 100% height anymore, as we align to the grid */
            width: 50px; 
            height: 270px; /* Set a fixed height that covers the card grid area (adjust if necessary) */
            display: flex;
            align-items: flex-start; /* Align label to the top of its container */
            justify-content: center;
            z-index: 10;
        }

        .verticals-label {
            /* Reset label positioning/size for this new container alignment */
            writing-mode: vertical-lr;
            text-orientation: mixed;
            height: 270px; /* Adjust height to match the vertical span of the cards */
            left: 25px; /* Adjust to place it correctly */
            transform: translateX(-50%);
            position: absolute;
            top: 0; /* Starts at the top of the parent container (.verticals-label-container) */
        
            /* Existing styles below */
            background-color: #f8f8f8; 
            color: #666;
            font-size: 0.9em;
            font-weight: 600;
            padding: 15px 5px;
            border-right: 2px solid #ddd;
            display: flex;
            justify-content: center;
        }
        
        /* Horizontals Label */
        .horizontals-label-container {
            position: absolute;
            left: 0;
            /*bottom: -15px;  Position relative to the bottom of the content-area */
            width: 50px;
            height: 250px; /* Adjust height to match visual */
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10;
        }
        
        .horizontals-label {
            background-color: #f8f8f8;
            color: #666;
            font-size: 0.9em;
            font-weight: 600;
            writing-mode: vertical-lr;
            text-orientation: mixed;
            padding: 15px 5px;
            border-right: 2px solid #ddd;
            height: 230px; /* Adjust height */
            display: flex;
            justify-content: center;
            transform: translateX(-50%);
            left: 25px; /* Adjust to place it correctly */
            position: absolute;
        }
        
        /* Wrapper for the main content to push it away from the labels */
        .verticals-content-wrapper {
            flex-grow: 1;
            padding-left: 60px; /* Space for the vertical labels */
        }
        
        
        /* Verticals Grid */
        .verticals-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
            gap: 20px;
            margin-bottom: 40px; /* Space before horizontals */
            padding-right: 40px; /* Internal padding for cards */
        }
        
        .vertical-card {
            background-color: #0A2E67; /* Dark blue background */
            color: #fff;
            padding: 25px;
            border-radius: 8px;
            text-align: center;
            height: 280px; /* Fixed height for uniformity as in image */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }
        
        .vertical-card i{
        /* Make the icons much larger and bold */
				font-size: 3.5rem; /* Larger icon size */
				color: #fdb515; /* Dark Blue brand color */
				margin-bottom: 10px;
				height: auto; /* Allow icon container to fit the large icon */
        }
        
        
        .card-title {
            font-size: 1.2em;
            font-weight: 700;
            margin-bottom: 10px;
            color: #FFD700; /* Yellow text for title */
        }
        
        .card-description {
            font-size: 0.85em;
            line-height: 1.4;
            color: #f0f0f0; /* Lighter white for description */
            
            text-align: center;
        }
        
        /* Horizontals Section */
        .horizontals-section {
            padding-right: 40px; /* Internal padding */
        }
        
        .horizontal-item {
            background-color: #fefefe; /* Very light background for items */
            border: 1px solid #ddd;
            border-radius: 5px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            padding: 12px 15px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }
        
        .horizontal-item:last-child {
            margin-bottom: 0;
        }
        
        .horizontal-item .arrow {
            width: 15px;
            height: 15px;
            background-color: #FFD700; /* Yellow arrow */
            clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
            margin-right: 15px;
            flex-shrink: 0; /* Prevent arrow from shrinking */
        }
        
        .horizontal-item p {
            margin: 0;
            font-size: 0.9em;
            color: #444;
            text-align: left;
        }
        
        .horizontal-item p strong {
            color: #0A2E67; /* Dark blue for bold text */
            margin-right: 8px;
            font-weight: 600;
            text-align: left;
        }
        
        .horizontal-item p span {
            color: #666;
        }
        	
        /* Responsive Design */
        @media (max-width: 768px) {
        .verticals-area {
                flex-direction: column; /* Stack vertically */
                padding: 0;
            }

            .verticals-label-container,
            .horizontals-label-container {
                position: static; /* Remove absolute positioning */
                width: 100%;
                height: auto;
                display: flex;
                justify-content: flex-start; /* Align label text to left */
                padding-left: 25px; /* Keep some indent */
                margin-bottom: 15px;
            }
        
            .verticals-label,
            .horizontals-label {
                writing-mode: horizontal-tb; /* Horizontal text */
                text-orientation: unset;
                width: auto;
                height: auto;
                border-right: none;
                border-bottom: 2px solid #ddd; /* Bottom border for separator */
                padding: 5px 0;
                transform: none; /* Reset transform */
                left: auto;
                position: static;
                align-items: center;
            }
        
            .verticals-content-wrapper {
                padding-left: 25px; /* Adjust padding */
                padding-right: 25px;
            }
        
            .verticals-grid {
                grid-template-columns: 1fr; /* Single column for cards */
                gap: 25px;
                padding-right: 0;
            }
        
            .vertical-card {
                height: auto; /* Allow height to adjust */
                padding: 20px;
            }
        
            .horizontals-section {
                padding-right: 0;
                margin-top: 20px; /* Space after horizontals label */
                padding-left: 25px;
                padding-right: 25px;
            }
            .horizontal-item p{
                align-items:left;
            }
            
        }