/* Base Styles */

p{font-family: 'Poppins', sans-serif; font-size:16px; color:#000;}
.hero {text-align: center; background: url('https://www.religareonline.com/cdn/wp-content/uploads/2025/08/about-banner.png') center 48px no-repeat; background-size:cover; }
.hero-content{display:flex; justify-content:center; min-height:485px; position:relative;}
.hero h1 {font-size: 40px; font-weight: 700;}
h2, h4{font-family: 'Poppins', sans-serif;}
.bannerText{text-align:left; font-size:40px; color:#303049; position:absolute; top:170px; left:0px;}
.bannerText strong{font-weight:700;}
.bannerText span{font-weight:400;}
.db{display:inline-block;}
.offerings-section h2, .leaders-section h2, .milestones h2, .awards-section h2 {
font-size:32px !important;
margin-bottom: 20px;
color:#163597;
}
.offerings-section h4, .leaders-section h4, .milestones h4, .awards-section h4 {
font-size:20px !important;
text-transform:uppercase;
margin-bottom: 20px;
color:#45B543;
letter-spacing: 2px;
}
/* Responsive */
@media (max-width:768px) {
.hero{min-height:165px; background-size:contain;}
.bannerText{font-size:15px !important; top:80px; left:12px;}
.hero-content{min-height:200px;}
}
/******************* About Section ***************************/
.about-section {padding:50px 20px; position:relative !important;}
.aboutContainer {
max-width:1200px;
margin:auto;
display:flex;
flex-wrap:wrap;
gap:40px;
align-items:flex-start;
position:relative;
}
.about-left {
background:#f9f9ff;
border-radius:15px;
padding:48px 120px 48px 48px;
text-align:justify
}
.about-right {
flex:1;
display: flex;
flex-direction: column;
align-self:center;
gap:20px;
position: absolute;
right:100px !important;
top:91px !important;
}

.about-subtitle {
color: #00a86b;
letter-spacing: 2px;
font-weight: 600;
margin-bottom: 10px;
}
.about-title {
font-size: 32px;
font-weight: 700;
color: #1a2a6c;
margin-bottom: 20px;
}
.about-left p {margin-bottom: 15px;}
.about-stats {
display: flex;
gap:30px;
margin-top:30px;
flex-wrap:wrap;
}
.stat{text-align:center;}
.stat h3 {
font-size: 22px;
font-weight: 700;
color: #000;
padding-top:10px;
margin-bottom:0px;
}
.stat p {font-size:14px; color:#555;}
.vision-card, .mission-card {
background: #00a86b;
color: #fff;
padding: 20px;
border-radius: 12px;
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
margin-bottom: 25px;
}
.vision-card h3, .mission-card h3 {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
font-size:22px;
}
.vision-card p, .mission-card p {
font-size: 14px;
line-height: 1.6;
color:#fff;
padding-left:72px;
padding-right:0px;
text-align:left;
}
/* Responsive */
@media (max-width: 992px) {
.aboutContainer { flex-direction: column; }
.about-left{padding:35px 20px 35px 20px;}
.about-right {width:100%; position:initial; right:0px !important; margin-top:20px;}
.about-stats { justify-content: center; gap: 70px;}
.about-section{padding-bottom:0px; padding-top:30px;}
}
/********************** Our Offering Styling ******************/
.offerings-section{
padding: 60px 20px;
text-align: center;
margin-top: 80px;
}
.offerings-section h6 {
color: #00a651;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
}
.offerings-section h2 {
font-weight:700;
color:#1a3d8f;
margin-bottom:20px;
}
.offerings-section p {
color:#444;
font-size:15px;
line-height:1.6;
}
/* Offerings Box */
.offering_Box{width:33.33%;}

.offerBox{padding-top:20px; display:flex; flex-flow:row; flex-wrap: wrap;}
.offerings-box {
display: flex;
align-items: flex-start;
gap: 15px;
margin-bottom: 30px;
text-align: left;
}
.offerings-icon {
min-width: 60px;
border-radius: 50%;
}
.offerings-icon svg {
width: 28px;
height: 28px;
fill: #fff;
}
.offerings-text h5 {
font-size: 18px;
font-weight: 700;
margin-bottom: 5px;
color: #1a1a1a;
}
.offerings-text p {
margin: 0;
font-size: 15px;
color: #555;
}
/* Note */
.note {
font-size: 13px;
color: #666;
margin-top: 20px;
font-style: italic;
}
/* Responsive Adjustments */
@media (max-width: 768px) {
.offerings-section {
padding: 40px 15px;
margin-top:485px;
}
.offerings-text h5 {font-size: 16px;}
.offerings-text p {font-size: 14px;}
}
.hover-underline {
font-size: 2rem;
color: #ffffff;
position: relative;
display: inline-block;
display: flex;
padding:15px 0px;
cursor:pointer;
}
.hover-underline::after,
.hover-underline::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, #18aab5, #138db6);
  bottom: -5px;
  left: 0;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s ease-out;
}
.hover-underline::before {top: -5px; transform-origin: left;}
.hover-underline:hover::after,
.hover-underline:hover::before {
  transform: scaleX(1);
}
/***************************Value Section************************************/
.valueSection{position:relative; background: url('https://rblmarketing.s3.ap-south-1.amazonaws.com/media/2025/08/29093042/strive-1.png') center center no-repeat; background-size:cover;
}
.values-section {
color: #fff;
text-align:center;
padding:50px 20px;
position:relative;
min-height:445px;
}
.values-section h2 {
font-size: 2.5rem;
font-weight: bold;
margin: 10px 0 40px;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 0px;
}
.values-container {
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:20px;
margin-top:20px;
position: absolute !important;
top:75%;
left:0%;
}
.value-box {
flex: 1 1 150px;
max-width: 180px;
background: #fff;
color: #333;
padding: 25px 15px;
border-radius: 12px;
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.value-box:hover {
transform: translateY(-8px) !important;
box-shadow: 0px 6px 20px rgba(0,0,0,0.15);
}
.value-box svg {
width: 40px;
height: 40px;
margin-bottom: 15px;
}
.value-title {
font-size: 16px;
font-weight: bold;
font-family: 'Poppins', sans-serif;
padding-top:20px;
}
/* Specific colors */
.service { background: #7dc245; color: #fff; }
.teamwork { background: #f04925; color: #fff; }
.respect { background: #058bc6; color: #fff; }
.innovation { background: #d22328; color: #fff; }
.vision { background: #828282; color: #fff; }
.excellence { background: #e7b62d; color: #fff; }
.cursor-box {
background-color: #333;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.cursor-box::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
top: -100%;
left: -100%;
transition: all 0.5s ease;
}
.cursor-box:hover::before {top:100%; left:100%;}
/* Unique styles for each cursor type */
.crosshair {
cursor: pointer;
background:#7dc245;
border: 1px solid #4caf50;
}
.crosshair:hover {
transform: scale(1.05);
box-shadow: 0 0 0 5px #4caf5030;
}
.crosshair1 {
background:#f04925;
border: 1px solid #ba290a;
}
.crosshair2 {
background:#058bc6;
border: 1px solid #04628c;
}
.crosshair3 {
background:#d22328;
border: 1px solid #a5080d;
}
.crosshair4 {  
background:#828282;
border: 1px solid #686868;
}
.crosshair5 {
background:#e7b62d;
border: 1px solid #b88e19;
}
.zoom-in {
cursor: zoom-in;
background: linear-gradient(145deg, #2a2a2a, #383838);
border: 2px solid #3f51b5;
}
.zoom-in:hover {
transform: scale(1.15);
}
/* Animations */
@keyframes pulse {
0% { transform: scale(1.05); }
50% { transform: scale(1); }
100% { transform: scale(1.05); }
}
@keyframes shake {
0%, 100% { transform: translateX(0) scale(1.05); }
25% { transform: translateX(-5px) scale(1.05); }
75% { transform: translateX(5px) scale(1.05); }
}
@keyframes moveAround {
0% { transform: translate(0, 0) scale(1.05); }
25% { transform: translate(5px, -5px) scale(1.05); }
50% { transform: translate(0, 0) scale(1.05); }
75% { transform: translate(-5px, 5px) scale(1.05); }
100% { transform: translate(0, 0) scale(1.05); }
}
/* Responsive */
@media (max-width: 768px) {
.values-container {
gap:15px;
}
/*.value-box {flex: 1 1 45%;}*/
.cursor-box {width: 120px; height: 120px;}
.values-section{min-height:auto; padding:0px 20px;}
.values-section h2{display:none;}
.valueSection{position:initial; background:none;}
}
@media (max-width: 480px) {
.value-box {flex: 1 1 100%;}
.cursor-box {width: 140px; height: 140px;}
}

@media (max-width: 375px) {
.cursor-box {width: 100px; height: 130px;}
.values-container{position:inherit !important;}
.value-box {flex: 1 1 45% !important;}
.offerings-section{margin-top:0px !important;}
}

/********************** Leader Section ******************/
 .leaders-section { display:none;
background: url('https://rblmarketing.s3.ap-south-1.amazonaws.com/media/2025/09/04095407/leader-bg.png') center center no-repeat; 
background-size:cover;
text-align: center;
padding: 50px 20px; 
}
.leaders-section h4 {
color:#45B543;
font-size: 20px;
font-weight: 700;
letter-spacing: 2px;
margin-bottom: 8px;
}
.leaders-section h2 {
color:#163597;
font-size: 32px;
font-weight: 700;
margin-bottom: 15px;
}
.leaders-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
max-width: 1200px;
margin: 0 auto;
}
.leader-card {
background: #fff;
border-radius: 12px;
overflow: hidden;
transition: transform 0.3s ease;
}
.leader-card:hover{transform: translateY(-8px);}
.leader-card img {
width:100%; 
height: 280px; 
object-fit: cover; 
border-top-left-radius: 12px; 
border-top-right-radius: 12px;
}
.leader-info {padding: 15px;}
.leader-info h3 {
font-size: 16px;
font-weight: 700;
margin: 8px 0 5px;
color: #000;
}
.leader-info p {
font-size: 14px;
color: #555;
margin: 0;
}
.card1{height:auto; cursor:pointer;}	
.card1 .icon {
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.card1 .slide {transition: 0.5s;}
.card1 .slide.slide1 {
position: relative;
display: flex;
width: fit-content;
justify-content: center;
align-items: center;
z-index: 1;
transition: .7s;
 
}
.card1:hover .slide.slide1{
transform: translateY(0px);
}
.card1 .slide.slide2 {
cursor:pointer;
position: relative;
display: flex;
justify-content: center;
align-items:center;
padding: 20px;
height:110px;
width: 169px;
box-sizing: border-box;
transition: .8s;
box-shadow: 0 10px 15px rgba(0,0,0,0.2);
background: #fff;
}
.card1:hover .slide.slide2{
transform: translateY(0);
}
.card1 .slide.slide2 .content p {
font-size: 14px;
color: #555;
margin: 0;
}
.card1 .slide.slide2 .content h3 {
font-size: 15px;
font-weight: 700;
margin: 8px 0 5px;
color: #000;
} 
@media (max-width: 768px) {
.leaders-container{
display:flex;
flex-wrap: wrap;
}
.card1 .slide.slide2 .content p{padding-bottom:10px; font-size:15px;}
.card1 .slide.slide2 .content h3{padding-bottom:10px;font-size: 15px;}
.leaders-section h2 {
font-size: 22px;
}
.card1{
display: inline-block;
width: 46%;	
}
.card1 .slide.slide1{
transform:translateY(20px);
}
.card1 .slide.slide2{
height: 180px;
transform: translateY(0px);
}
.card1 .slide.slide2 .content h3{font-size:15px;}
.card1.last{
width: 100%;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
}
}
	
/********************** Milestone Section ******************/
.milestones h4 {
color:#45B543;
font-size: 20px;
font-weight: 700;
letter-spacing: 2px;
margin-bottom: 8px;
}
.milestones h2 {
color:#163597;
font-size: 32px;
font-weight: 700;
margin-bottom: 15px;
}
.timeline-container {
position:relative;
width:100%;
margin-top:-40px;
overflow:hidden;
background:url(../../assets/images/timeline-bg.jpg) center center no-repeat;
}
/* Timeline Line */
.timeline-line {
position: absolute;
top: 50%;
left: 0;
height: 4px;
width: 0;
background: #138DB6;
background: linear-gradient(90deg, rgba(19, 141, 182, 1) 0%, rgba(22, 172, 137, 1) 50%, rgba(25, 100, 167, 1) 100%);
transition: width 6s linear;
}
.timeline-items {
display: flex;
justify-content: space-between;
position: relative;
margin-top: 60px;
}
.timeline-item {
text-align: center;
width: 120px;
opacity: 0;
transform: scale(0.8);
transition: all 0.6s ease;
position:relative;
}
.timeline-item.active{background:url(../../assets/images/dotted.jpg) center 145px no-repeat;}
.timeline-item.d.active{background:url(../../assets/images/dotted1.jpg) center 190px no-repeat;}
.item-name{font-size:14px; padding-bottom:10px; font-family: 'Poppins', sans-serif;}
.timeline-item.active {
opacity: 1;
transform: scale(1);
}
.timeline-item img {
width: 50px;
height: 50px;
object-fit: contain;
margin-bottom: 10px;
}
.timeline-item .year {
font-weight: bold;
color: #007b5e;
margin-bottom: 5px;
font-size:20px;
font-family: 'Poppins', sans-serif;
}
.timeline.grow::after {
height: 100%; /* grow down when active */
}
.milestones.desktop{display:block;}	
.milestones.mobile{display:none;}	
/* Alternate top & bottom placement */
.timeline-item:nth-child(odd) {margin-top:-10px;}
.timeline-item:nth-child(even) {padding-top:223px;}
@media (max-width: 938px) {
.milestones.desktop{display:none;}
.milestones.mobile{display:block;}
.timeline {
position: relative;
max-width: 900px;
margin: 50px auto;
padding: 20px 0;
}
/* Center vertical line */
.timeline::after {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 4px;
background: linear-gradient(180deg, rgba(19, 141, 182, 1) 0%, rgba(22, 172, 137, 1) 70%, rgba(25, 100, 167, 1) 100%);
height: 0; 
transition: height 0.3s ease-out;
}
/* Timeline item */
.milestone {
position: relative;
width:55%;
padding: 20px 85px;
box-sizing: border-box;
opacity: 0;
transform: translateY(40px);
transition: all 0.6s ease-out;
}
.milestone.show {
opacity: 1;
transform: translateY(0);
}
.milestone.left { left: 0; text-align: right; }
.milestone.right { left:49.5%; text-align: left; }
/* Circles */
.milestone::before {
content: '';
position: absolute;
top: 25px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
border: 4px solid rgb(22 172 137);
z-index: 1;
}
.milestone.left::before { right: -12px; }
.milestone.right::before { left: -12px; }
/* Styling content */
.milestone h3 {font-weight: bold;
color: #007b5e;
margin-bottom: 5px;
font-size: 20px;
font-family: 'Poppins', sans-serif; margin-top: 10px;
}
.milestone p {
font-size:14px;
padding-bottom: 10px;
font-family: 'Poppins', sans-serif;
}
/* Dynamic line growth */
.timeline::after {
height: calc(var(--scroll, 0) * 100%);
}
 }
/* Mobile view */
@media screen and (max-width: 768px) {
.milestone {padding-left:0px;}
.milestone.left{left:0;}
.milestone.right {right:0;}
.milestone.right{padding-left:20px;}
.milestone::before { left: 0; }
.milestone.left::before{left:55.5%;}
.milestone.right::before{left:-3.5%;}
} 
/********************** Award Section ******************/
.awards-section {
text-align:center;
padding: 60px 20px;
background:#f9f9f9;
}
.awards-container{margin-top:30px; display:flex; flex-wrap:wrap; gap:20px; justify-content:center;}
.awards-section h4 {
color:#45B543;
font-size: 20px;
font-weight: 700;
letter-spacing: 2px;
margin-bottom: 8px;
}
.awards-section h2 {
color:#163597;
font-size: 32px;
font-weight: 700;
margin-bottom: 15px;
}
.awards-section p {
color: #000;
font-size: 16px;
line-height: 1.5;
}
.cardBody {padding:0px 5px !important; width:15% !important;}
.cardBody img{width:100%; height:auto;}
.award-card {
margin-bottom:25px;
}
.award-icon {
width: 70px;
height: 70px;
margin-bottom: 15px;
}
.award-card p {
font-size: 12px;
color: #333;
margin: 0;
line-height: 1.4;
padding: 40px;
}
.award-card strong {
display: block;
margin-top: 5px;
font-weight: 700;
color: #000;
}
@media (max-width: 768px) {
.awards-section h2 {
font-size: 22px;
}
.award-card{margin-bottom:25px;}
.award-card p{font-size: 21px;}
}


.about, .values, .offerings, .leaders, .milestones, .awards {
padding: 60px 20px;
max-width: 1200px;
margin: auto;
text-align: center;
}
.vision-mission {
display: flex;
gap: 20px;
margin: 40px 0;
}
.card.green { background: #00a86b; }
.card.blue { background: #0077c2; }
.stats {
display: flex;
justify-content: center;
gap: 40px;
margin-top: 30px;
}
.stats h3 {
font-size: 24px;
color: #007a5c;
}
.value-grid, .offer-grid, .leader-grid, .award-grid {
display: grid;
gap: 20px;
margin-top: 30px;
}
.value-grid { grid-template-columns: repeat(3, 1fr); }
.offer-grid { grid-template-columns: repeat(3, 1fr); }
.leader-grid { grid-template-columns: repeat(5, 1fr); }
.award-grid { grid-template-columns: repeat(3, 1fr); }
.offer, .value, .award {
background: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* ---------------- Responsive ---------------- */
@media (max-width: 1024px) {
.vision-mission { flex-direction: column; }
.stats { flex-direction: column; gap: 20px; }
.value-grid { grid-template-columns: repeat(2, 1fr); }
.offer-grid { grid-template-columns: repeat(2, 1fr); }
.leader-grid { grid-template-columns: repeat(3, 1fr); }
.award-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
header { flex-direction: column; align-items: flex-start; }
.nav { flex-direction: column; align-items: flex-start; margin-top: 10px; }
.hero h1 { font-size: 28px; }
.value-grid, .offer-grid, .leader-grid, .award-grid {grid-template-columns: 1fr;}
.cardBody{width:36% !important;}
.awards-container{margin-top:20px !important; display:flex; flex-direction:row !important; flex-wrap:wrap; align-items:center;}
.offering_Box{width:100%;}
.offerBox{padding:20px; display:flex; flex-flow:column; justify-content: center;}
}