html {
overflow-x: hidden;
height: 100%;
scroll-behavior: smooth;
}

body {
font-family: "Inter", sans-serif;
overflow-x: hidden;
font-weight: 400;
}



a {
text-decoration: none;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

a:hover {
text-decoration: none;
}

.whatpeoplesaybg {
float: left;
width: 100%;
padding: 50px 0;
}

.whatpeoplesaybg h2 {
font-weight: 700;
text-align: left;
}

.whatpeoplesaybg h4 {
text-align: left;
margin-bottom: 50px;
}

.whatpeoplesaybox {
border-radius: 15px;
padding: 15px;
position: relative;
box-shadow: 0 0 15px #ccc;
float: left;
width: 96%;
margin: 15px 2%;
}

.hikebox {
float: left;
width: 100%;
text-align: right;
}

.hikebox span {
display: inline-block;
color: #1a923a;
padding: 0.2rem;
font-size: 12px;
font-weight: 700;
opacity: 0.88;
border-radius: 0.5rem;
border: solid 0.1rem #d3e8d8;
}

.whatpeoplesaybox-mid {
float: left;
width: 100%;
/* margin-top: 15px; */
display: flex;
align-items: center;
justify-content: space-between;
}

.scalerbox {
display: block;
align-items: center;
color: #000;
font-weight: 700;
font-size: 12px;
}

.scalerbox label {
color: #91a1b7;
margin: 0 15px 0 0;
font-size: 12px;
}

.scalerbox img {
max-width: 60px;
}

.scalerbox-arrow {
text-align: center;
font-size: 25px;
margin-top: 0;
}

.whatpeoplesaybox-bottom {
float: left;
width: 100%;
color: #000;
font-weight: 600;
}

.whatpeoplesaybox-dec {
float: left;
width: 100%;
border-left: solid 3px #395ca3;
padding: 15px;
font-size: 14px;
margin-top: 15px;
}

@media only screen and (max-width: 969px) {
.scalerbox {
	display: block;
	text-align: center;
}
}

.careerhike .scalerbox img {
max-width: 60px;
}

.careerhike .scalerbox label {
margin: 0 5px 0 0;
font-size: 11px;
}

.careerhike .scalerbox-arrow {
margin-top: 0;
}

#time_counter {
float: left;
position: relative;
background: #184ad2;
left: 0;
width: 100%;
text-align: center;
padding: 6px 0;
}

#time_counter button {
background: #000;
color: #fff;
border: none;
display: inline-block;
vertical-align: middle;
padding: 10px 25px;
border-radius: 5px;
margin-left: 30px;
}

#time_counter h1 {
display: inline-block;
font-size: 20px;
color: #fff;
font-weight: 700;
margin-right: 30px;
vertical-align: middle;
}

.days,
.hours,
.minutes,
.second {
display: inline-block;
margin: 0 6px;
text-align: center;
vertical-align: middle;
}

.days h3,
.hours h3,
.minutes h3,
.second h3 {
display: inline-block;
background: yellow;
padding: 8px;
margin: 0;
border-radius: 5px;
color: #000;
font-size: 17px;
font-weight: 700;
}

.days span,
.hours span,
.minutes span,
.second span {
display: block;
color: #fff;
font-size: 13px;
}

.banner-ai {
float: left;
width: 100%;
background: url(../images/banner-ai.webp) no-repeat;
background-size: cover;
position: relative;
padding: 35px 0 75px 0;
}

.banner-ai-inner {
float: left;
width: 55%;
}

.banner-ai-links {
float: left;
width: 100%;
}

.banner-ai-links ul {
padding: 0;
margin: 0;
}

.banner-ai-links li {
background: url(../images/banner-ai-links.png) no-repeat left center;
padding: 0 15px 0 20px;
float: left;
list-style: none;
}

.banner-ai-links li:first-child {
background: none;
padding-left: 0;
}

.banner-ai-links li a {
color: #fff;
font-size: 14px;
font-weight: 500;
}

.banner-ai-links li a:hover {
color: #c3d9f8;
}

.bestsaller {
float: left;
width: 100%;
padding: 15px 0;
}

.bestsaller span {
display: inline-block;
color: #f18a05;
font-weight: 600;
font-size: 14px;
background: #fdf5d9;
padding: 5px 10px;
border-radius: 50px;
}

.banner-ai-text {
float: left;
width: 100%;
}

.banner-ai-text h1 {
color: #fff;
font-size: 38px;
line-height: 44px;
margin: 0;
font-weight: 600;
}

.banner-ai-text p {
color: #fff;
font-size: 14px;
line-height: 25px;
margin: 15px 0;
}

.banner-ai-btngrp {
float: left;
width: 100%;
}

.applybtn {
display: inline-block;
border-radius: 5px;
width: 225px;
text-align: center;
height: 54px;
line-height: 54px;
color: #fff;
font-size: 17px;
font-weight: 500;
background: #f2163f;
float: left;
}

.applybtn:hover {
color: #f2163f;
background: #fff;
}

.btnstyle002 {
overflow: hidden;
float: left;
position: relative;
text-align: center;
width: 225px;
height: 54px;
background: #ffe500;
color: #000;
font-weight: 500;
text-decoration: none;
border-radius: 5px;
padding: 15px 20px;
}

.btnstyle002:hover {
background: #000;
color: #fff;
}

.btnstyle002:after {
-webkit-animation-direction: forward;
animation-direction: forward;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: moveAfter;
animation-name: moveAfter;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
background: linear-gradient(
	180deg,
	hsla(21, 63%, 73%, 0),
	hsla(0, 0%, 100%, 0.5) 50%,
	hsla(21, 63%, 73%, 0)
);
bottom: -50%;
content: "";
left: -50%;
position: absolute;
right: -50%;
top: -50%;
-webkit-transform: rotate(60deg) translate(-5em, 7.5em);
transform: rotate(60deg) translate(-5em, 7.5em);
}

@-webkit-keyframes moveAfter {
to {
	-webkit-transform: rotate(60deg) translate(1em, -9em);
	transform: rotate(60deg) translate(1em, -9em);
}
}

@keyframes moveAfter {
to {
	-webkit-transform: rotate(60deg) translate(1em, -9em);
	transform: rotate(60deg) translate(1em, -9em);
}
}

.downbtn {
display: inline-block;
border-radius: 5px;
width: 225px;
float: left;
text-align: center;
height: 54px;
line-height: 54px;
margin: 0 10px;
color: #f2163f;
font-size: 17px;
font-weight: 500;
background: #fce0e5;
}

.downbtn:hover {
color: #fce0e5;
background: #f2163f;
}

.rippleinfo span {
display: inline-block;
width: 50px;
height: 50px;
border-radius: 50%;
margin: 0 5px;
position: relative;
cursor: pointer;
}

.rippleinfo span::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: inherit;
border-radius: 50%;
z-index: -1;
animation: ripple 1.5s ease-out infinite;
}

.rippleinfo span:first-child {
background-color: #ff414d;
}

.rippleinfo span:first-child::before {
animation-delay: 0.2s;
}

.rippleinfo span:last-child {
background-color: #fff;
transform: scale(0.9);
}

.rippleinfo span:last-child::before {
animation-delay: 1s;
}

.videoicons {
color: #0d4a9b;
margin: 0px auto;
display: table;
font-size: 14px;
margin-top: 18px;
cursor: pointer;
}

.rippleinfo {
float: left;
}

.watchbanner h6 {
font-size: 18px;
color: #fff;
font-weight: 500;
width: auto !important;
float: left;
margin: 5px 0px 0px 8px;
}

.watchbanner h6 label {
font-size: 17px;
color: #fff;
font-weight: 700;
}

@keyframes ripple {
from {
	opacity: 1;
	transform: scale(0);
}

to {
	opacity: 0;
	transform: scale(3);
}
}

.banner-ai-experts {
float: left;
width: 100%;
margin-top: 25px;
}

.banner-ai-experts p {
color: #fff;
font-size: 14px;
font-weight: 600;
margin-bottom: 20px;
}

.banner-ai-experts a {
display: inline-block;
margin-right: 3px;
}

.banner-aistrip {
float: left;
width: 100%;
margin-top: -45px;
position: relative;
z-index: 9;
}

.banner-aistrip ul {
padding: 0;
margin: 0 -1%;
}

.banner-aistrip ul li {
margin: 0 0.5%;
width: 19%;
box-shadow: 0px 6px 10px #ccc;
min-height: 100px;
display: flex;
align-items: center;
float: left;
padding: 12px;
background: #fff;
border-radius: 5px;
}

.banner-aistrip ul li span {
margin-right: 10px;
}

.banner-aistrip-text h5 {
color: #000;
font-size: 15px;
line-height: 20px;
font-weight: 600;
margin: 0;
}

.banner-aistrip-text p {
color: #818993;
font-size: 13px;
line-height: 18px;
font-weight: 600;
margin: 0;
}

.careeroppbg {
float: left;
width: 100%;
padding: 30px 0;
}

.careeroppbg-inner {
border: solid 1px #e5e7e8;
padding: 35px;
float: left;
width: 100%;
border-radius: 10px;
}

.careeroppbg-inner h1 {
color: #212223;
font-size: 30px;
font-weight: 600;
text-align: center;
margin: 0 0 40px 0;
}

.careeroppbg-inner .nav-tabs {
border: none;
}

.careeroppbg-inner .nav-tabs .nav-item {
width: 24%;
margin-right: 1%;
float: left;
}

.careeroppbg-inner .nav-tabs .nav-link {
padding: 10px 20px;
background: #f1f4f8;
color: #000;
font-size: 17px;
font-weight: 500;
display: flex;
align-items: center;
min-height: 80px;
border-radius: 10px 10px 0 0;
}

.careeroppbg-inner .nav-tabs .nav-link span {
display: inline-block;
padding-right: 15px;
}

.careeroppbg-inner .nav-tabs .nav-link.active,
.careeroppbg-inner .nav-tabs .nav-link:hover {
background: #0d4a9b;
color: #fff;
}

.careeroppbg-inner-text {
padding: 0px;
}

.careeroppbg-inner-text p {
color: #353535;
font-size: 14px;
line-height: 22px;
}

.careeroppbg-inner-text h3 {
color: #363636;
font-size: 14px;
font-weight: 700;
margin: 0 0 10px 0;
}

.careeroppbg-inner-text h3 span {
font-weight: 400;
}

.careeroppbg-inner-text h4 {
color: #363636;
font-size: 14px;
font-weight: 600;
margin: 20px 0 17px 0;
}

.careeroppbg-inner-text a {
display: inline-block;
margin-right: 20px;
}

.getcertfiedbgnew {
float: left;
width: 100%;
}

.getcertfiedbgnew-inner {
border: solid 1px #e5e7e8;
padding: 35px;
float: left;
width: 100%;
border-radius: 10px;
}

.getcertfiedbgnew-inner h1 {
color: #212223;
font-size: 30px;
font-weight: 600;
text-align: center;
margin: 0 0 20px 0;
}

.getcertfiedbgnew-inner h6 {
color: #0d4a9b;
font-size: 17px;
font-weight: 400;
text-align: center;
margin: 0 0 20px 0;
}

.getcertfiedbgnew-box {
margin: 15px 0;
padding: 40px 55px;
border-radius: 10px;
background: #f8f8f8;
text-align: center;
}

.getcertfiedbgnew-box .fa {
color: #0d4a9b;
font-size: 65px;
}

.getcertfiedbgnew-box h4 {
color: #0d4a9b;
font-size: 14px;
font-weight: 700;
margin: 18px 0;
}

.getcertfiedbgnew-box h3 {
    color: #0d4a9b;
    font-size: 14px;
    font-weight: 700;
    margin: 18px 0;
    }
    .getcertfiedbgnew-box div {
        font-size: 14px;
    }
.getcertfiedbgnew-box p {
color: #566366;
font-size: 15px;
line-height: 20px;
font-weight: 500;
margin: 0;
}

.getcertfiedbgnew-box:hover {
background: #1051a6;
}

.getcertfiedbgnew-box:hover h4,
.getcertfiedbgnew-box:hover p,
.getcertfiedbgnew-box:hover .fa {
color: #fff;
}

.ourclientbg-new {
float: left;
width: 100%;
padding: 50px 0;
text-align: center;
}

.ourclientbg-new h1 {
color: #212223;
font-size: 30px;
font-weight: 600;
text-align: center;
margin: 0 0 40px 0;
}

.whymakesnew {
float: left;
width: 100%;
padding-bottom: 20px;
}

.whymakesnew h1 {
color: #212223;
font-size: 30px;
font-weight: 600;
text-align: center;
margin: 0 0 40px 0;
}

.whymakes-box {
margin: 15px 0;
border: solid 2px #b7c2c9;
border-radius: 15px;
padding: 30px;
min-height: 320px;
text-align: center;
}

.whymakes-box h4 {
color: #1051a6;
font-weight: 600;
font-size: 20px;
margin: 18px 0;
}

.whymakes-box p {
color: #232323;
font-size: 15px;
line-height: 22px;
margin: 0;
}

.artificialintelligence-bg {
float: left;
width: 100%;
background: #f3f6f8;
padding: 45px 0;
}

.artificialintelligence-bg h1 {
color: #2b5b87;
font-weight: 600;
text-align: center;
font-size: 30px;
margin: 0 0 30px 0;
}

.artificialintelligence {
padding: 0 30px 45px 30px;
background: #fff;
border-radius: 10px;
float: left;
width: 100%;
margin: 15px 0;
}

.artificialintelligence ul {
padding: 0;
margin: 0;
}

.artificialintelligence ul li {
margin-top: 20px;
list-style: none;
color: #2e2e2e;
font-size: 18px;
line-height: 23px;
float: left;
font-weight: 600;
display: flex;
align-items: center;
width: 100%;
}

.artificialintelligence ul li span {
float: left;
margin-right: 10px;
}

.artificialintelligence-topimg {
width: 100%;
text-align: center;
margin-top: -27px;
}

.specialisation-bg {
padding: 50px 0;
float: left;
width: 100%;
}

.specialisation-bg h1 {
color: #212223;
font-size: 30px;
font-weight: 600;
margin: 0 0 20px 0;
}

.specialisation-bg h5 {
color: #2a2c2d;
font-size: 14px;
font-weight: 400;
margin: 0 0 25px 0;
}

.specialisation-bg .nav-tabs {
border: none;
text-align: center;
display: block;
}

.specialisation-bg .nav-tabs .nav-item {
display: inline-block;
margin: 0 5px;
}

.specialisation-bg .nav-tabs .nav-link {
border: solid 2px #0d4a9b;
color: #0d4a9b;
font-size: 14px;
font-weight: 600;
border-radius: 7px;
padding: 15px 35px;
}

.specialisation-bg .nav-tabs .nav-link.active,
.specialisation-bg .nav-tabs .nav-link:hover {
background: #0d4a9b;
color: #fff;
}

.topic_covered {
padding: 30px 0;
width: 100%;
}

.topic_covered h2 {
color: #0d4a9b;
font-size: 24px;
font-weight: 600;
text-align: center;
margin: 0 0 15px 0;
}

.coveredrow {
margin: 15px 0;
border-radius: 10px;
padding: 25px;
background: #f7feff;
float: left;
width: 100%;
}

.coveredrow span {
display: inline-block;
width: 47px;
height: 47px;
text-align: center;
line-height: 47px;
border-radius: 50%;
color: #098f9e;
background: #c8f6fb;
font-size: 18px;
font-weight: 700;
}

.coveredrow h3 {
color: #222222;
font-size: 17px;
line-height: 24px;
font-weight: 600;
margin: 0 0 12px 0;
}

.coveredrow p {
color: #2a2c2d;
font-size: 14px;
line-height: 24px;
margin: 0;
}

.coveredrow-left {
width: 10%;
float: left;
}

.coveredrow-right {
width: 88%;
float: right;
}

.colorbox2 {
background: #fef7ff;
}

.colorbox2 span {
background: #f7d8fd;
color: #c20c95;
}

.colorbox3 {
background: #fdfceb;
}

.colorbox3 span {
background: #fffbc1;
color: #e6bf08;
}

.colorbox4 {
background: #f5fff6;
}

.colorbox4 span {
background: #ccffd3;
color: #15bf65;
}

.colorbox5 {
background: #fff6f6;
}

.colorbox5 span {
background: #facdcd;
color: #e03434;
}

.colorbox6 {
background: #f9faff;
}

.colorbox6 span {
background: #d1d8fd;
color: #264bc4;
}

.colorbox7 {
background: #faffe9;
}

.colorbox7 span {
background: #ecfeb4;
color: #a9d816;
}

.colorbox8 {
background: #f7feff;
}

.colorbox8 span {
background: #c8f6fb;
color: #098f9e;
}

.colorbox9 {
background: #fffeee;
}

.colorbox9 span {
background: #fffbc1;
color: #dea700;
}

.colorbox10 {
background: #fff6f6;
}

.colorbox10 span {
background: #facdcd;
color: #cc162f;
}

.colorbox11 {
background: #f1fff2;
}

.colorbox11 span {
background: #c8fbcb;
color: #0ec118;
}

.colorbox12 {
background: #f2f4fb;
}

.colorbox12 span {
background: #d1d8fd;
color: #2d4bc3;
}

.projectsnewbg {
float: left;
width: 100%;
}

.projectsnewbg h1 {
color: #212223;
font-size: 30px;
font-weight: 600;
margin: 0 0 15px 0;
text-align: center;
}

.projectsnewbg h5 {
color: #2a2c2d;
font-size: 14px;
font-weight: 400;
margin: 0;
text-align: center;
}

.projectsnewbg-practice {
text-align: center;
width: 100%;
padding: 35px 0;
}

.projectsnewbg-practice ul {
padding: 0;
margin: 0;
}

.projectsnewbg-practice li {
display: inline-block;
padding: 0px;
text-align: left;
min-width: 240px;
}

.projectsnewbg-practice li img {
float: left;
margin-right: 12px;
}

.projectsnewbg-practice li h3 {
color: #f91c4b;
font-size: 21px;
font-weight: 600;
margin: 0;
}


.projectsnewbg-practice li p {
color: #494c4e;
font-size: 19px;
font-weight: 500;
margin: 0;
}

.projectsnewbg-bottom {
width: 100%;
}

.projectsnewbg-bottom .nav-tabs {
border: none;
text-align: center;
display: block;
margin-bottom: 35px;
}

.projectsnewbg-bottom .nav-tabs .nav-item {
display: inline-block;
min-width: 270px;
margin: 0 5px;
}

.projectsnewbg-bottom .nav-tabs .nav-link {
border: solid 2px #0d4a9b;
color: #0d4a9b;
font-size: 14px;
font-weight: 600;
border-radius: 7px;
padding: 15px 35px;
}

.projectsnewbg-bottom .nav-tabs .nav-link.active,
.projectsnewbg-bottom .nav-tabs .nav-link:hover {
background: #0d4a9b;
color: #fff;
}

.products_slide {
background: #fafafa;
padding: 40px;
border-radius: 15px;
text-align: center;
}

.products_slide h3 {
margin: 22px 0;
}

.products_slide h3 span {
font-size: 20px;
font-weight: 600;
color: #4798cc;
border-bottom: solid 3px #ecbe44;
padding-bottom: 15px;
display: inline-block;
}

.products_slide p {
color: #76787a;
font-size: 15px;
line-height: 22px;
margin: 0;
}

.products_slide:hover {
background: #0d4a9b;
}

.products_slide:hover h3 span {
color: #fff;
border-bottom: solid 3px #fff;
}

.products_slide:hover p {
color: #fff;
}

.syllabusnewbg {
float: left;
width: 100%;
padding-top: 40px;
}

.programmright {
width: 100%;
box-shadow: 0px 0px 13px #ccc;
background: #fff;
border-top: solid 5px #ffae2f;
border-radius: 10px;
padding: 25px 20px;
margin-bottom: 15px;
float: left;
}

.programmright h1 {
width: 100%;
font-size: 18px;
color: #000;
margin: 5px 0px 10px;
font-weight: 600;
float: left;
}

.programlist {
width: 100%;
float: left;
}

.programlist ul {
width: 50%;
float: left;
padding: 0;
margin: 0;
}

.programlist ul li {
width: 100%;
margin: 5px 0px;
float: left;
list-style: none;
}

.proginfoss {
width: 100%;
float: left;
}

.priiconss {
float: left;
}

.protxts {
float: left;
font-size: 14px;
color: #1c1d1d;
padding: 10px 0px 0px 10px;
font-weight: 600;
}

.applnowbtn {
padding: 10px 20px;
width: auto;
border-radius: 5px;
font-weight: 600;
background: #000000;
color: #fff;
margin: 0px auto;
outline: none;
border: none;
display: table;
}

.applnowbtn:hover {
background: #ec5252;
color: #fff;
}

.faqnew {
float: left;
width: 100%;
}

.faqnew .accordion > .card .card-header {
padding: 0px;
}

.faqnew .accordion > .card {
background: none;
}

.faqnew .btn-link {
padding: 10px 20px;
color: #000;
font-size: 14px;
text-align: left;
width: 100%;
font-weight: 600;
background: #fff;
}

.faqnew .card-header {
border-bottom: solid 1px #f9f9f9;
}

.faqnew .card-body {
padding: 0px;
width: 100%;
float: left;
}

.faqnew .btn-link:hover,
.faqnew .btn-link:focus {
color: #000;
text-decoration: none;
}

.faqnew .btn-link .fa {
font-size: 22px;
padding-right: 0px;
margin-right: 0px;
float: right;
color: #000;
}

.faqnew .card {
border-bottom: solid 1px #f9f9f9 !important;
margin: 2px 0px;
}

.syllabusheadings {
width: 100%;
}

.syllabusheadings h1 {
display: flex;
align-items: center;
justify-content: space-between;
margin: 0;
}

.syllabusheadings h1 span {
color: #2e2e2e;
font-size: 30px;
font-weight: 600;
}

.syllabusheadings h1 a {
padding: 13px 15px;
text-align: center;
font-weight: 600;
font-size: 14px;
background: #1e7ae1;
border-radius: 5px;
color: #fff;
float: right;
}

.syllabusheadings h1 a:hover {
background: #000;
color: #fff;
}

.syllabusheadings p {
color: #2a2c2d;
font-size: 14px;
line-height: 25px;
margin: 15px 0;
}

.syllabusnewbg .card-header {
border: none;
background: #f7f9fc;
}

.syllabusnewbg .faqnew .accordion > .card {
border: none !important;
}

.syllabusnewbg .faqnew .btn-link {
background: #f7f9fc;
border-radius: 5px;
padding: 18px 45px;
color: #44474b;
font-size: 14px;
font-weight: 400;
}

.syllabusnewbg .faqnew .card-body {
background: #f7f9fc;
padding: 17px 45px;
}

.moduleintro {
width: 100%;
}

.moduleintro h4 {
color: #477ab3;
font-size: 15px;
font-weight: 600;
margin: 0;
}

.moduleintro h5 {
color: #000;
font-size: 15px;
font-weight: 600;
margin: 0;
}

.moduleintro ul {
padding: 0;
margin: 10px 0;
}

.moduleintro ul li {
list-style: none;
background: url(../images/bluedot.png) no-repeat left center;
padding-left: 20px;
color: #43464a;
font-size: 14px;
}

.moduleintro p {
color: #43464a;
font-size: 14px;
margin: 0;
}

.careerservices-new {
float: left;
width: 100%;
padding: 45px 0;
}

.careerservices-new h1 {
color: #2e2e2e;
font-size: 30px;
font-weight: 600;
margin: 0 0 30px 0;
}

.careerservices-new-left {
float: left;
width: 40%;
}

.careerservices-new-left img {
max-width: 100%;
}

.careerservices-new-right {
float: right;
width: 57%;
}

.careerservices-new-right .projectsnewbg-bottom .nav-tabs .nav-item {
min-width: 230px;
margin: 5px 3px;
}

.placement-assistance {
width: 100%;
margin-bottom: 35px;
float: left;
}

.placement-assistance-left {
float: left;
width: 10%;
}

.placement-assistance-right {
float: left;
width: 88%;
}

.placement-assistance-right h2 {
color: #2a2c2d;
font-size: 20px;
font-weight: 600;
margin: 0;
}

.placement-assistance-right p {
color: #2a2c2d;
font-size: 14px;
line-height: 25px;
margin: 15px 0;
}

.placement-assistance-right a {
color: #3e79a2;
font-size: 14px;
font-weight: 600;
}

.placement-assistance-right a:hover {
color: #000;
}

.network-reach-newbg {
float: left;
width: 100%;
}

.network-reach-newbg h1 {
color: #2e2e2e;
font-size: 30px;
text-align: center;
font-weight: 600;
margin: 0 0 30px 0;
}

.keyfeaturenew {
padding: 50px;
border-radius: 15px;
background: #f4f8f9;
}

.keyfeaturenew h2 {
color: #0f6ab7;
font-size: 23px;
font-weight: 600;
margin: 0;
}

.keyfeaturenew ul {
padding: 0;
margin: 20px 0;
}

.keyfeaturenew ul li {
background: url(../images/rightarrow.png) no-repeat left 7px;
padding-left: 30px;
list-style: none;
color: #2a2c2d;
font-size: 14px;
line-height: 24px;
margin: 5px 0;
}

.downreportbtn {
width: 100%;
font-size: 14px;
color: #fff;
font-weight: 600;
background: #1a64c0;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px 27px;
}

.downreportbtn:hover {
background: #000;
color: #fff;
}

.keyfeaturenew-logo {
width: 100%;
float: left;
padding: 25px;
border-radius: 15px;
background: #f4f8f9;
}

.keyfeaturenew-logo a {
display: inline-block;
margin: 10px 26px;
}

.certificate-companies {
float: left;
width: 100%;
padding: 70px 0;
}

.certificate-companies-img {
float: right;
width: 45%;
}

.certificate-companies-img img {
max-width: 100%;
padding: 20px;
}

.certificate-companies-text {
float: left;
width: 50%;
}

.certificate-companies-text {
padding-top: 20px;
}

.certificate-companies-text h5 {
color: #0a4c9e;
font-size: 20px;
font-weight: 600;
margin: 0;
}

.certificate-companies-text h1 {
color: #2e2e2e;
font-size: 30px;
line-height: 37px;
font-weight: 600;
margin: 0;
}

.certificate-companies-text p {
color: #37393b;
font-size: 15px;
line-height: 22px;
margin: 20px 0;
}

.certificate-companies-text a {
width: 265px;
max-width: 100%;
font-size: 14px;
color: #fff;
font-weight: 600;
background: #1a64c0;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px 27px;
}

.certificate-companies-text a:hover {
background: #000;
color: #fff;
}

.howtoapply-new {
float: left;
width: 100%;
}

.howtoapply-new h1 {
color: #2e2e2e;
font-size: 30px;
font-weight: 600;
text-align: center;
margin: 0 0 35px 0;
}

.howtoapply-new-left {
background: #f8fafc;
border-radius: 10px;
border: solid 1px #d5dadd;
padding: 60px 45px;
}

.howtoapply-new-left ul {
padding: 0;
margin: 0;
}

.howtoapply-new-left li {
list-style: none;
background: url(../images/bluedot.png) no-repeat left top;
padding-left: 20px;
padding-bottom: 50px;
position: relative;
}

.howtoapply-new-left li::after {
height: 130px;
width: 2px;
position: absolute;
bottom: 0;
left: 3px;
content: "";
background: #cde4f8;
}

.howtoapply-new-left li:last-child::after {
display: none;
}

.howtoapply-new-left li h4 {
color: #0f6ab7;
font-size: 14px;
font-weight: 700;
margin: 0;
text-transform: uppercase;
}

.howtoapply-new-left li h3 {
color: #2a2c2d;
font-size: 18px;
font-weight: 600;
margin: 14px 0;
}

.howtoapply-new-left li p {
color: #2a2c2d;
font-size: 15px;
margin: 0;
}

.howtoapply-new-right {
background: #f8fafc;
border-radius: 10px;
border: solid 1px #d5dadd;
overflow: hidden;
}

.howtoapply-new-right h2 {
color: #3b3e40;
font-size: 17px;
font-weight: 600;
text-align: center;
background: #fff;
border-bottom: solid 1px #e9e9e9;
margin: 0;
padding: 20px 0;
}

.howtoapply-new-rightform {
padding: 34px;
}

.howtoapply-new-rightform .form-control {
font-size: 15px;
font-weight: 500;
color: #212323;
height: 54px;
border: none;
border-bottom: solid 1px #b7babb;
background: none;
border-radius: 0px;
box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0);
box-shadow: 3px 0px 15px rgba(0, 0, 0, 0);
padding: 0px;
}

.howtoapply-new-rightform .form-control::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: #212323;
}

.howtoapply-new-rightform .form-control::-moz-placeholder {
/* Firefox 19+ */
color: #212323;
}

.howtoapply-new-rightform .form-control:-ms-input-placeholder {
/* IE 10+ */
color: #212323;
}

.howtoapply-new-rightform .form-control:-moz-placeholder {
/* Firefox 18- */
color: #212323;
}

.howtoapply-new-rightform .submitbtn {
display: inline-block;
border-radius: 10px;
width: 100%;
text-align: center;
padding: 15px 0px;
font-size: 14px;
font-weight: 600;
color: #fff;
border: none;
background: #1a64c0;
}

.howtoapply-new-rightform .submitbtn:hover {
background: #000;
}

.privacytext {
color: #889194;
font-size: 14px;
font-weight: 500;
line-height: 24px;
}

.privacytext a {
color: #0674b3;
text-decoration: underline;
}

.privacytext a:hover {
color: #000;
}

.programfeenew {
float: left;
width: 100%;
padding: 40px 0;
}

.programfeenew h1 {
color: #2e2e2e;
font-size: 30px;
font-weight: 600;
margin: 0 0 35px 0;
}

.programfeenew-inner {
float: left;
width: 100%;
border-radius: 10px;
border: solid 1px #cfd5d8;
overflow: hidden;
}

.programfeenew-inner-left {
float: left;
width: 40%;
position: relative;
padding: 40px;
}

.programfeenew-inner-left::after {
background: #1a64c0;
width: 70%;
height: 100%;
position: absolute;
left: 0;
top: 0;
content: "";
}

.programfeenew-inner-price {
border-radius: 10px;
border: solid 1px #cfd5d8;
background: #fff;
padding: 35px 0;
text-align: center;
position: relative;
z-index: 99;
}

.programfeenew-inner-price p {
color: #0a4c9e;
font-weight: 700;
font-size: 20px;
text-transform: uppercase;
}

.programfeenew-inner-price h2 {
color: #2e2e2e;
font-weight: 700;
font-size: 44px;
text-transform: uppercase;
margin: 0;
}

.programfeenew-inner-right {
float: left;
width: 60%;
padding: 32px 28px 32px 0;
}

.programfeenew-inner-right h5 {
color: #1a64c0;
font-size: 15px;
font-weight: 700;
text-transform: uppercase;
margin: 0;
}

.programfeenew-inner-right h4 {
color: #37393b;
font-size: 19px;
font-weight: 700;
margin: 12px 0;
}

.programfeenew-inner-right h4 span {
font-weight: 500;
font-size: 15px;
}

.programfeenew-inner-right a {
display: inline-block;
padding: 10px 30px;
color: #fff;
border-radius: 5px;
font-size: 14px;
font-weight: 600;
background: #29c95a;
}

.programfeenew-inner-right a:hover {
background: #000;
color: #fff;
}

.programfeenew-inner-right p {
color: #37393b;
font-size: 15px;
line-height: 22px;
font-weight: 500;
margin: 15px 0;
}

.programfeenew-inner-right ul {
padding: 0;
margin: 0;
}

.programfeenew-inner-right li {
display: inline-block;
vertical-align: middle;
list-style: none;
margin-left: 15px;
}

.eligibility-criteria-row {
float: left;
width: 100%;
}

.eligibility-criteria {
float: left;
width: 100%;
border-radius: 15px;
border: solid 1px #cfd5d8;
padding: 35px;
min-height: 255px;
}

.eligibility-criteria h2 {
position: relative;
color: #2a2c2d;
font-size: 20px;
font-weight: 600;
margin: 0 0 25px 0;
padding-bottom: 18px;
}

.eligibility-criteria h2::after {
position: absolute;
left: 0;
bottom: 0;
content: "";
background: #1a64c0;
width: 50px;
height: 4px;
}

.eligibilitylist1 {
padding: 0;
margin: 0;
}

.eligibilitylist1 li {
color: #37393b;
font-size: 15px;
font-weight: 500;
padding: 5px 0;
list-style: none;
}

.eligibilitylist1 li span {
display: inline-block;
width: 45px;
vertical-align: middle;
}

.eligibilitylist2 {
padding: 0;
margin: 0;
}

.eligibilitylist2 li {
color: #37393b;
font-size: 15px;
font-weight: 500;
background: url(../images/rightarrow-blue.png) no-repeat left 3px;
padding-left: 20px;
margin: 5px 0;
float: left;
width: 34%;
list-style: none;
}

.faqnewbg {
float: left;
width: 100%;
padding: 45px 0;
}

.faqnewbg h1 {
color: #2e2e2e;
font-size: 30px;
font-weight: 600;
text-align: center;
margin: 0 0 45px 0;
}

.faqnewbg-inner {
border-radius: 10px;
padding: 30px;
float: left;
box-shadow: 0px 0px 15px #e5e5e5;
width: 100%;
}

.faqnewbg-inner .nav-tabs {
float: left;
width: 25%;
background: #1081cb;
border: none;
display: block;
border-radius: 6px;
}

.faqnewbg-inner .nav-tabs .nav-item {
display: block;
margin: 10px;
}

.faqnewbg-inner .nav-tabs .nav-link {
border: none;
display: block;
padding: 20px;
text-transform: uppercase;
color: #fff;
}

.faqnewbg-inner .nav-tabs .nav-link.active,
.faqnewbg-inner .nav-tabs .nav-link:hover {
background: #6bb1df;
color: #fff;
}

.faqnewbg-inner .tab-content {
float: right;
width: 100%;
}

.faqnewbg-inner1 .tab-content1 {
    float: left;
    width: 100%;
    }

.faqnewbg-inner .faqnew .btn-link {
padding: 12px 9px;
background: #f4f4f5;
font-size: 14px;
}

.faqnewbg-inner .faqnew .btn-link h2 {
    font-size: 14px;
}
.faqnewbg-inner .faqnew .card {
border: none;
margin-bottom: 20px;
}
.morefaq .card-header {
    background: none;
    padding: 0;
    }

.faqnewbg-inner .faqnew .card-body {
padding: 30px 0px;
}

.supportbgnew {
float: left;
width: 100%;
padding: 65px 0;
}

.supportbgnew h1,
.supportbgnew h2 {
font-size: 30px;
font-weight: 600;
text-align: center;
color: #2e2e2e;
margin: 0 0 45px 0;
}

.supportbgnew-inner {
float: left;
width: 100%;
border: solid 1px #d9dde0;
border-radius: 15px;
padding: 25px 0;
position: relative;
}

/* .supportbgnew-inner-img {
	position: absolute;
	left: 0;
	bottom: -30px;
} */

.supportbgnew-inner-content {
float: right;
width: 60%;
}

.supportbgnew-inner-content h4 {
color: #1a64c0;
font-size: 15px;
text-transform: uppercase;
font-weight: 700;
margin: 0;
}

.supportbgnew-inner-content h2 {
color: #37393b;
font-size: 27px;
font-weight: 500;
margin: 10px 0;
}

.supportbgnew-inner-content p {
color: #37393b;
font-size: 22px;
font-weight: 300;
}

.supportbgnew-inner-content a {
display: inline-block;
border-radius: 10px;
color: #fff;
font-size: 14px;
margin-right: 10px;
padding: 12px 0;
background: #3aa63a;
text-align: center;
font-weight: 600;
width: 215px;
}

.supportbgnew-inner-content a .fa {
padding-right: 10px;
font-size: 22px;
display: inline-block;
vertical-align: middle;
}

.supportbgnew-inner-content a:hover {
background: #000 !important;
color: #fff;
}

@media screen and (min-width: 961px) {
.supportbgnew-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
}

/*** 09 Feb***/

.itfeaturevideorow {
float: left;
width: 100%;
text-align: center;
padding: 50px 0;
}

.itfeaturevideorow h1 {
color: #212223;
font-size: 30px;
font-weight: 600;
margin: 0 0 40px 0;
}

.itfeaturevideo {
display: inline-block;
width: 800px;
border: solid 3px #ccc;
height: 450px;
border-radius: 10px;
overflow: hidden;
}

@keyframes fade-in-up {
0% {
	opacity: 0;
}

100% {
	transform: translateY(0);
	opacity: 1;
}
}

.video-wrap {
position: relative;
display: inline-block;
width: 800px;
border: solid 3px #ccc;
border-radius: 10px;
overflow: hidden;
z-index: 222;
}

.video iframe {
width: 100%;
max-height: 100%;
}

.stuck {
position: fixed;
bottom: 100px;
right: 20px;
transform: translateY(100%);
width: 400px;
height: 225px;
animation: fade-in-up 0.25s ease forwards;
}

.ourclientbg-new img {
padding: 0 3px;
}

.banner-ai-experts img {
max-width: 140px;
}

.moretext {
display: none;
}

.moreless-button {
background: #0d4a9b;
color: #fff;
padding: 10px 15px;
border-radius: 5px;
font-weight: 600;
display: inline-block;
}

.moreless-button:hover {
color: #fff;
}

.footerai {
float: left;
width: 100%;
padding: 50px 0;
background: #185b75;
}

.footerai p {
color: #fff;
margin-bottom: 5px;
font-size: 13px;
}

.footerai a {
color: #fff;
}

.footerai h3 {
color: #fff;
font-weight: 600;
margin: 0 0 20px 0;
font-size: 20px;
}

.footerai hr {
border-top: solid 1px #fff;
margin: 40px 0;
}

.relatedcourses {
float: left;
width: 100%;
padding: 50px 0;
}

.relatedcoursebox {
width: 100%;
margin: 15px 0px;
float: left;
background: #fff;
box-shadow: 0px 5px 15px #d3d3d3;
padding: 0;
overflow: hidden;
border-radius: 10px;
}

.relatedcoursebox img {
width: 100%;
}

.relatedcourses h1 {
color: #212223;
font-size: 30px;
font-weight: 600;
text-align: center;
margin: 0 0 20px 0;
}

.relatedcoursebox-content {
padding: 15px;
}

.starlable {
background: #d89a4d;
border-radius: 50px;
color: #fff;
font-weight: 600;
padding: 2px 15px;
}

.relatedcoursebox-content h3 {
font-size: 20px;
margin: 0 0 15px 0;
}

.relatedcoursebox-content p {
color: #999;
display: flex;
align-items: center;
justify-content: space-between;
}

.datareviewsbg {
float: left;
width: 100%;
background: #f3f6f8;
padding: 5px 0;
}

.datareviewsbg h1 {
color: #212223;
font-size: 30px;
font-weight: 600;
text-align: center;
margin: 0 0 40px 0;
}

.datareview {
width: 100%;
margin: 15px 0px;
float: left;
background: #fff;
box-shadow: 0px 5px 15px #d3d3d3;
padding: 25px;
overflow: hidden;
border-radius: 10px;
}

.datareview-head img {
border-radius: 50%;
width: 60px;
height: 60px;
margin-right: 15px;
}

.datareview-head {
display: flex;
align-items: center;
margin-bottom: 25px;
}

.datareview-head-right h3 {
font-weight: 600;
font-size: 20px;
}

.datareview-head-right p {
color: #dd9f40;
margin: 0;
}

.morefaq .card-header {
background: none;
padding: 0;
}

#accordion .panel-title a {
display: block;
background: #0d4a9b;
color: #fff;
border-radius: 5px;
font-size: 18px;
font-weight: 600;
padding: 20px 15px;
}

.ourclientbg-new img {
max-width: 100px !important;
}

.viewmorebtn {
display: block;
margin: 0 auto;
}

.ratinglink {
display: inline-block;
margin-left: 15px;
color: #fff;
font-weight: 500;
}

.ratinglink .fa {
color: #ff7a00;
margin: 0 2px;
}

.ratinglink a {
color: #f90;
text-decoration: underline;
}

.ratingstarfa {
display: inline-block;
margin: 0 3px;
}

.city-section {
float: left;
width: 100%;
padding: 65px 0;
}

.city-section .city-link-container {
display: flex;
flex-wrap: wrap;
}

.city-section .city-link-container a {
font-size: 14px;
line-height: 34px;
color: #000;
margin-right: 25px;
}

.sec-navbar {
float: left;
width: 100%;
background-color: rgb(255, 255, 255);
position: sticky;
top: 50px;
box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.121);
}

.sec-navbar nav ul {
display: flex;
flex-wrap: nowrap;
margin: 0;
padding: 0;
list-style: none;
overflow-x: auto;
}

.sec-navbar nav ul li a {
white-space: nowrap;
padding: 18px 12px;
display: inline-block;
font-size: 15px;
line-height: 16px;
border-radius: 0;
cursor: pointer;
font-weight: 600;
color: #000;
letter-spacing: 0.3px;
position: relative;
}

.sec-navbar nav ul li.active a {
color: red;
}

.sec-navbar .enroll-btn {
display: inline-block;
border-radius: 6px;
white-space: nowrap;
/* width: 100%; */
text-align: center;
padding: 5px 15px;
font-size: 14px;
font-weight: 600;
border: none;
width: 200px;
padding: 16px 20px 16px 20px;
}

.sec-navbar nav ul li.active a::after {
position: absolute;
content: "";
width: 100%;
height: 3px;
bottom: 0;
left: 0;
background-color: red;
}

/* Set the width and height of the scrollbar */
.sec-navbar ::-webkit-scrollbar {
width: 5px;
height: 5px;
}

/* Set the background color of the scrollbar */
.sec-navbar ::-webkit-scrollbar-track {
background-color: #f1f1f1;
}

/* Set the color and shape of the scrollbar thumb */
.sec-navbar ::-webkit-scrollbar-thumb {
background-color: #888;
border-radius: 5px;
}

.fixed-nav {
position: fixed;
z-index: 222;
}

@media only screen and (min-width: 1141px) and (max-width: 1270px) {
.container {
	max-width: 1120px;
}

.banner-ai-inner {
	width: 65%;
}

.banner-aistrip-text h5 {
	font-size: 13px;
}

.careeroppbg-inner .nav-tabs .nav-link {
	font-size: 14px;
}

.specialisation-bg .nav-tabs .nav-link {
	padding: 15px;
}

.priiconss {
	float: left;
}

.protxts {
	width: 75%;
}

.projectsnewbg-bottom .nav-tabs .nav-link {
	padding: 15px 25px;
}

.careerservices-new-right .projectsnewbg-bottom .nav-tabs .nav-item {
	min-width: 180px;
}

.eligibilitylist1 li span {
	float: left;
	margin-bottom: 15px;
}

.programfeenew-inner-right li {
	margin-left: 10px;
}

.eligibilitylist2 li {
	width: 45%;
}
}

@media only screen and (min-width: 960px) and (max-width: 1140px) {
.container {
	max-width: 950px;
}

.banner-ai-inner {
	width: 100%;
}

.careeroppbg-inner .nav-tabs .nav-link {
	font-size: 13px;
}

.getcertfiedbgnew-box {
	padding: 20px;
}

.specialisation-bg .nav-tabs .nav-link {
	padding: 15px;
	font-size: 13px;
}

.programmright {
	margin-top: 20px;
}

.careerservices-new-right .projectsnewbg-bottom .nav-tabs .nav-item {
	min-width: 170px;
}

.projectsnewbg-bottom .nav-tabs .nav-link {
	padding: 15px;
	font-size: 13px;
}

.placement-assistance-right {
	float: right;
	width: 85%;
}

.eligibilitylist1 li span {
	float: left;
	margin-bottom: 15px;
}

.eligibilitylist2 li {
	width: 50%;
}

.supportbgnew-inner-img {
	width: 40%;
	bottom: 0;
}

.supportbgnew-inner-img img {
	max-width: 100%;
}
}

@media screen and (max-width: 991px) {
.video-wrap {
	width: 100%;
}
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
.banner-ai-inner {
	width: 100%;
}

.banner-aistrip ul {
	margin: 0;
}

.banner-aistrip ul li {
	width: 48%;
	margin: 1%;
}

.careeroppbg-inner .nav-tabs .nav-item {
	width: 48%;
	margin: 1%;
}

.getcertfiedbgnew-box {
	padding: 20px 15px;
}

.whymakes-box {
	padding: 15px;
}

.specialisation-bg .nav-tabs .nav-item {
	float: left;
	width: 48%;
	margin: 1%;
}

.faqnewbg-inner .nav-tabs .nav-item {
	display: block;
	width: 100%;
	margin: 10px 0px;
	padding-inline: 5px;
}

.faqnewbg-inner .nav-tabs .nav-link {
	padding: 5px;
}

.topic_covered {
	float: left;
}

.coveredrow-left {
	width: 18%;
}

.coveredrow-right {
	width: 80%;
}

.projectsnewbg-practice li {
	min-width: 220px;
}

.projectsnewbg-bottom .nav-tabs .nav-item {
	min-width: 210px;
}

.programmright {
	margin-top: 20px;
}

.careerservices-new-left {
	width: 100%;
}

.careerservices-new-right {
	width: 100%;
	padding-top: 20px;
}

.careerservices-new-right .projectsnewbg-bottom .nav-tabs .nav-item {
	min-width: 210px;
}

.howtoapply-new-right {
	margin-top: 25px;
}

.programfeenew-inner-price p {
	font-size: 15px;
}

.programfeenew-inner-price h2 {
	font-size: 34px;
}

.programfeenew-inner-left {
	padding: 80px 40px;
}

.eligibilitylist2 li {
	width: 100%;
}

.eligibilitylist1 li span {
	float: left;
	margin-bottom: 25px;
}

.supportbgnew-inner-img {
	position: inherit;
	bottom: 0;
	width: 100%;
}

.supportbgnew-inner-img img {
	width: 100%;
}

.supportbgnew-inner-content {
	width: 100%;
	padding: 15px;
}

.supportbgnew-inner-content a {
	margin: 5px 0;
}

.itfeaturevideo {
	width: 96%;
}
}

@media only screen and (min-width: 600px) and (max-width: 767px) {
.banner-ai-inner {
	width: 100%;
}

.banner-ai-text h1 {
	font-size: 28px;
	line-height: 34px;
}

.downbtn {
	margin: 0 0 0 10px;
}

.applybtn {
	margin-bottom: 10px;
}

.watchbanner {
	float: left;
	width: 100%;
	margin-top: 10px;
}

.banner-ai-experts img {
	max-width: 100px;
}

.banner-aistrip {
	margin-top: 15px;
}

.banner-aistrip ul {
	margin: 0;
}

.banner-aistrip ul li {
	width: 48%;
	margin: 1%;
}

.careeroppbg-inner {
	padding: 15px;
}

.careeroppbg-inner .nav-tabs .nav-item {
	width: 100%;
	margin: 5px 0;
}

.careeroppbg-inner-text a {
	margin: 5px;
	max-width: 100px;
}

.getcertfiedbgnew-inner {
	padding: 15px;
}

.specialisation-bg .nav-tabs .nav-item {
	float: left;
	width: 100%;
	margin: 5px 0;
}

.faqnewbg-inner .nav-tabs .nav-item {
	padding: 5px;
}

.topic_covered {
	float: left;
}

.coveredrow-left {
	width: 17%;
}

.coveredrow-right {
	width: 82%;
}

.projectsnewbg-practice li {
	width: 33.3%;
	/* margin: 15px 0; */
	text-align: center;
	min-width: 0;
}

.projectsnewbg-practice li img {
	float: none;
	display: inline-block;
	margin-right: 0;
}

.projectsnewbg-bottom .nav-tabs .nav-item {
	width: 100%;
	margin: 5px 0;
}

.programmright {
	margin-top: 15px;
}

.programlist ul {
	width: 100%;
}

.careerservices-new-left {
	width: 100%;
}

.careerservices-new-right {
	width: 100%;
	margin-top: 20px;
}

.placement-assistance-left {
	width: 17%;
}

.placement-assistance-right {
	width: 80%;
	float: right;
    font-size: 14px;
}

.keyfeaturenew {
	padding: 30px 15px;
}

.keyfeaturenew-logo a img {
	max-width: 80px;
}

.certificate-companies-img {
	width: 100%;
}

.certificate-companies-text {
	width: 100%;
}

.howtoapply-new-right {
	margin-top: 20px;
}

.programfeenew-inner-left {
	width: 100%;
}

.programfeenew-inner-left::after {
	width: 100%;
}

.programfeenew-inner-right {
	width: 100%;
	padding: 20px;
}

.programfeenew-inner-right a {
	padding: 10px;
	font-size: 14px;
}

.eligibilitylist1 li span {
	float: left;
	margin-bottom: 25px;
}

.eligibilitylist2 li {
	width: 100%;
}

.faqnewbg-inner .nav-tabs {
	width: 100%;
}

.faqnewbg-inner .tab-content {
	width: 100%;
	padding-top: 20px;
}

.supportbgnew-inner-img {
	position: inherit;
	bottom: 0;
	width: 100%;
}

.supportbgnew-inner-img img {
	width: 100%;
}

.supportbgnew-inner-content {
	width: 100%;
	padding: 15px;
}

.supportbgnew-inner-content a {
	margin: 5px 0;
}

.itfeaturevideo {
	width: 96%;
}

.itfeaturevideorow iframe {
	height: 270px;
}

.itfeaturevideo {
	height: auto;
	border: none;
}
}

@media only screen and (max-width: 599px) {
.stuck {
	width: 260px;
	height: 145px;
	box-shadow: 0px 0px 15px #00000066;
}

.banner-ai-inner {
	width: 100%;
}

.banner-ai-text h1 {
	font-size: 28px;
	line-height: 34px;
}

.downbtn {
	margin: 0;
}

.applybtn {
	margin-bottom: 10px;
}

.watchbanner {
	float: left;
	width: 100%;
	margin-top: 10px;
}

.banner-ai-experts img {
	max-width: 100px;
}

.banner-aistrip {
	margin-top: 15px;
}

.banner-aistrip ul {
	margin: 0;
}

.banner-aistrip ul li {
	width: 100%;
	margin: 10px 0;
}

.careeroppbg-inner {
	padding: 15px;
}

.careeroppbg-inner .nav-tabs .nav-item {
	width: 100%;
	margin: 5px 0;
}

.careeroppbg-inner-text a {
	margin: 5px;
	max-width: 100px;
}

.getcertfiedbgnew-inner {
	padding: 15px;
}

.specialisation-bg .nav-tabs .nav-item {
	float: left;
	width: 100%;
	margin: 5px 0;
}

.faqnewbg-inner .nav-tabs .nav-item {
	padding: 5px;
}

.topic_covered {
	float: left;
}

.coveredrow-left {
	width: 17%;
}

.coveredrow-right {
	width: 82%;
}

.projectsnewbg-practice li {
	width: 33.3%;
	/* margin: 15px 0; */
	text-align: center;
	min-width: 0;
}

.projectsnewbg-practice li img {
	float: none;
	display: inline-block;
	margin-right: 0;
}

.projectsnewbg-bottom .nav-tabs .nav-item {
	width: 100%;
	margin: 5px 0;
}

.programmright {
	margin-top: 15px;
}

.programlist ul {
	width: 100%;
}

.careerservices-new-left {
	width: 100%;
}

.careerservices-new-right {
	width: 100%;
	margin-top: 20px;
}

.placement-assistance-left {
	width: 17%;
}

.placement-assistance-right {
	width: 80%;
	float: right;
    font-size: 14px;
}

.placement-assistance-right h5 {
    font-size: 14px;
    
}

.keyfeaturenew {
	padding: 30px 15px;
}

.keyfeaturenew-logo a img {
	max-width: 80px;
}

.certificate-companies-img {
	width: 100%;
}

.certificate-companies-text {
	width: 100%;
}

.howtoapply-new-right {
	margin-top: 20px;
}

.programfeenew-inner-left {
	width: 100%;
}

.programfeenew-inner-left::after {
	width: 100%;
}

.programfeenew-inner-right {
	width: 100%;
	padding: 20px;
}

.programfeenew-inner-right a {
	padding: 10px;
	font-size: 1rem;
}

.eligibilitylist1 li span {
	float: left;
	margin-bottom: 25px;
}

.eligibilitylist2 li {
	width: 100%;
}

.faqnewbg-inner .nav-tabs {
	width: 100%;
}

.faqnewbg-inner .tab-content {
	width: 100%;
	padding-top: 20px;
}

.supportbgnew-inner-img {
	position: inherit;
	bottom: 0;
	width: 100%;
}

.supportbgnew-inner-img img {
	width: 100%;
}

.supportbgnew-inner-content {
	width: 100%;
	padding: 15px;
}

.supportbgnew-inner-content a {
	margin: 5px 0;
}

.itfeaturevideo {
	width: 96%;
}

.itfeaturevideorow iframe {
	height: 200px;
}

.itfeaturevideo {
	height: auto;
	border: none;
}
}

@media screen and (max-width: 470px) {
.projectsnewbg-practice li {
	width: 33.3%;
	/* margin: 15px 0; */
	text-align: center;
	min-width: 0;
}

.projectsnewbg-practice li img {
	float: none;
	display: inline-block;
	margin-right: 0;
	width: 35px;
}

.projectsnewbg-practice li h3 {
	font-size: 14px;
}

.projectsnewbg-practice li p {
	color: #494c4e;
	font-size: 13px;
	font-weight: 500;
	margin: 0;
}
}

.faculty-box {
text-align: center;
padding: 30px;
background-color: #fff;
margin-bottom: 30px;
box-shadow: 0px 5px 15px #d3d3d3;
border-radius: 10px;
height: 450px
}

.faculty-box .body {
	text-align: start;
	/* padding: 30px 30px 0; */
	padding: 15px 15px 0;
	flex: 1;
	background-color: #dc3545;
	color: white;
  }

  .faculty-box:nth-child(even) .body {
	background-color: #232323;
  }



.faculty-box .faculty-img {
/* width: 120px;
	height: 120px; */
	width: 80px;
	height: 80px;
	object-fit: cover;
	border-radius: 50%;
	right: 10px;
	bottom: 90px;
}

.faculty-box .faculty-img img {
	width: 120px;
	height: 120px;
}

.faculty-box .name {
font-weight: bold;
margin-top: 28px;
margin-bottom: 8px;
color: inherit;
}

.faculty-box .title {
text-transform: uppercase;
font-weight: bold;
color: #aeaeae;
letter-spacing: 2px;
font-size: 13px;
}

 .faculty-box .description {
	letter-spacing: 0.6px;
	font-weight: 400;
	/* font-size: 17px; */
	margin-top: 15px;
	/* margin-bottom: 20px; */
	font-size: 14px;
	margin-bottom: 55px;
  }

  .faculty-box footer {
	width: 100%;
	height: 130px;
  }
  
  .faculty-box footer img:first-child {
	margin-top: 30px;
	margin-left: 25px;
	height: 65px;
	background: white;
	padding: 5px;
	border-radius: 10px;
  }
  
  .mentor .review_scroll_sec .linkedin-icon > svg {
	/* height: 24px;
	width: 24px; */
	height: 20px;
	width: 20px;
  }
  .faculty-box .linkedin-icon {
	/* bottom: 85px;
	right: 103px; */
	bottom: 85px;
	right: 75px;
  }

@media only screen and (min-width: 768px) {
.with-nav .owl-nav {
	display: block !important;
}

.with-nav .owl-prev,
.owl-next {
	position: absolute;
	top: 40%;
	transform: translateY(-50%);
	font-size: 0;
	border: none;
	background-color: transparent;
	color: #fff;
}

.with-nav .owl-prev {
	left: -50px;
	font-size: 3.5rem !important;
}

.with-nav .owl-next {
	right: -50px;
	font-size: 3.5rem !important;
}

.with-nav.owl-theme .owl-nav [class*="owl-"]:hover {
	background: transparent;
	color: unset;
	text-decoration: none;
}

.owl-nav button:focus {
	outline: none;
	outline: none;
}
.mentor .review_scroll_sec .linkedin-icon > svg {
	height: 24px;
	width: 24px;
  }
  .faculty-box .linkedin-icon {
	bottom: 85px;
	right: 103px;
  }

}

@media screen and (max-width: 767px) {
.with-nav .owl-nav {
	display: none !important;
}

.syllabusheadings h1 {
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
}

  .faculty-box .description {
	margin-bottom: 90px;
  }
}

@media screen and (max-width: 574px) {
.banner-ai-links li a,
.bestsaller span,
.videoicons,
.protxts,
.moduleintro ul li,
.moduleintro p,
.howtoapply-new-left li h4,
.privacytext,
.city-section .city-link-container a,
.careeroppbg-inner .nav-tabs .nav-link,
.banner-aistrip-text h5,
.careeroppbg-inner-text p,
.getcertfiedbgnew-box p,
.whymakes-box p,
.products_slide p,
.moduleintro h4,
.moduleintro h5,
.certificate-companies-text p,
.howtoapply-new-left li p,
.howtoapply-new-rightform .form-control,
.programfeenew-inner-right h5,
.programfeenew-inner-right h4 span,
.programfeenew-inner-right p,
.eligibilitylist1 li,
.eligibilitylist2 li,
.supportbgnew-inner-content h4,
.sec-navbar nav ul li a,
.programfeenew-inner-price p,
.faculty-box .description {
	font-size: 14px;
}
}

@media screen and (max-width: 600px) {
.btnstyle002 {
	width: auto;
	padding: 15px 20px;
	margin-right: 10px;
}

.downbtn {
	width: auto;
	padding: 0 15px;
}
}

@media screen and (max-width: 360px) {
.btnstyle002 {
	font-size: 14px;
	padding: 15px 15px;
}

.downbtn {
	font-size: 14px;
	padding: 0 12px;
}
}

@media screen and (max-width: 300px) {
.btnstyle002 {
	font-size: 14px;
	padding: 15px 15px;
	margin-bottom: 10px;
}
}

/* 23-09-2023 */
#counsellingpopup {
z-index: 9999999999;
}

#counsellingpopup .modal-body {
padding: 0;
}

#counsellingpopup .modal-content {
background: #ecedef;
border-radius: 30px;
overflow: hidden;
padding: 0;
border: none;
}

.counsellingpopupbg {
float: left;
width: 100%;
font-family: "Inter", sans-serif;
position: relative;
}
/* Added by Ravi*/
.flip-card {
    background-color: transparent;
    width: 300px;
    height: 230px;
    perspective: 1000px;
    margin: 10px 0
}


.flip-card-front h3 {
    color: #000;
    font-size: 20px;
    font-weight: 600;
    margin-top: 22px;
    line-height: 26px
}
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg)
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.flip-card-front {
    background: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 3px 3px 3px #ccc
}



.flip-card-back {
    padding: 5px;
    border-radius: 10px;
    background: #377fd8;
    box-shadow: 3px 3px 3px #ccc;
    transform: rotateY(180deg);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 26px;
    align-items: center;
    justify-content: center;
    display: flex
}
.coursesbg {
    float: left;
    width: 100%;
    background: #f7f7f7;
    padding: 40px 0
}

.coursesbg h1 {
    color: #000;
    font-size: 27px;
    line-height: 34px;
    font-weight: 700;
    margin: 0 0 10px 0
}

.coursesbg h6 {
    color: #000;
    font-size: 17px;
    font-weight: 500;
    margin: 0 0 30px 0
}
.liveprogrambg {
    padding: 70px 0;
    text-align: center
}
.liveprogram-innerbg h1 {
    color: #000;
    font-size: 25px;
    font-weight: 600;
    margin: 30px 0
}

.liveprogram-innerbg span {
    font-family: 'segoepr', Times, serif;
    color: #3370ee
}
#pills-tab {
    justify-content: center;
    gap: 15px;
}
.m-0 {
    margin: 0 !important
}
.mb-3,
.my-3 {
    margin-bottom: 1rem !important
}
.nav {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none
}

.tab-content>.active {
    display: block
}
.fade {
    transition: opacity .15s linear
}
.align-items-center {
    -ms-flex-align: center !important;
    align-items: center !important
}
.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px
}
@media only screen and (min-width:768px) and (max-width:959px) {
    .popularcourses-header {
        display: block;
        text-align: center
    }

    .popularcourses-header-img {
        padding: 0 0 15px 0
    }

    .algorithm-bg-left {
        width: 100%;
        margin-top: 20px
    }

    .algorithm-bg-right {
        width: 100%
    }

    .algorithm-bg-left p {
        text-align: left
    }

    .popularcourses-boxbg-bottom {
        margin-top: 0
    }

    .popularcourses-boxbg-bottom-top ul li {
        width: 100%;
        margin: 10px 0
    }

    .popularcourses-boxbg-bottom-top-text h4,
    .popularcourses-boxbg-bottom-top-text p {
        text-align: left
    }

    .popularcourses-boxbg-bottom-mid ul li {
        width: 100%;
        margin: 10px 0;
        min-height: inherit
    }

    .popularcourses-boxbg-bottom-bottom ul li {
        width: 100%;
        margin: 10px 0
    }

    .popularcourses-boxbg-top h4 {
        padding: 6px 0 0 20px;
        text-align: left
    }

    .syllabushead {
        text-align: center
    }

    .syllabushead p {
        width: 100%
    }

    .syllabushead a {
        float: none;
        display: inline-block
    }

    .syllabustabs-bg .nav-pills .nav-link {
        font-size: 10px
    }

    .program-highlights-new ul li {
        width: 100%
    }

    .flip-card {
        width: 100% !important;
        height: 270px !important
    }
}

@media only screen and (min-width:600px) and (max-width:767px) {
    .popularcourses-header {
        display: block;
        text-align: center
    }

    .popularcourses-header-img {
        padding: 0 0 15px 0
    }

    .popularcourses-boxbg-bottom {
        margin-top: 0
    }

    .algorithm-bg-left {
        width: 100%;
        margin-top: 20px
    }

    .algorithm-bg-right {
        width: 100%
    }

    .algorithm-bg-left p {
        text-align: left
    }

    .fewreviewsbg-left {
        width: 100%
    }

    .fewreviewsbg-right {
        width: 100%
    }

    .fewreviewsbg-left p {
        text-align: left
    }

    .popularcourses-boxbg-bottom-top ul li {
        width: 100%;
        margin: 10px 0
    }

    .popularcourses-boxbg-bottom-top-text h4,
    .popularcourses-boxbg-bottom-top-text p {
        text-align: left
    }

    .popularcourses-boxbg-bottom-mid ul li {
        width: 100%;
        margin: 10px 0;
        min-height: inherit
    }

    .popularcourses-boxbg-bottom-bottom ul li {
        width: 100%;
        margin: 10px 0
    }

    .popularcourses-boxbg-top h4 {
        padding: 6px 0 0 20px;
        text-align: left
    }

    .syllabushead {
        text-align: center
    }

    .syllabushead p {
        width: 100%
    }

    .syllabushead a {
        float: none;
        display: inline-block
    }

    .syllabustabs-bg .nav-pills .nav-link {
        font-size: 12px
    }

    .nav-pills .nav-link {
        padding: 10px 15px;
        font-size: 14px
    }

    .populartag {
        margin: 10px 0 0 0
    }

    .flip-card {
        width: 100% !important;
        margin: 10px 0 !important;
        height: 140px
    }

    .liveprogram-innerbg .row {
        display: block
    }

    .liveprogram-innerbg .col-md-4 {
        width: 50%;
        float: left
    }

    .flip-card-front img {
        width: 50px
    }

    .flip-card-front h3 {
        font-size: 12px;
        line-height: 16px;
        margin-top: 10px
    }

    .flip-card-front {
        padding: 20px
    }

    .flip-card-back {
        font-size: 12px;
        line-height: 16px
    }

    .liveprogram-innerbg h1 {
        font-size: 12px;
        margin: 5px 0
    }

    .popularcourses-bg2 {
        padding: 40px 0
    }

    .popularcourses-bg2 h1 {
        margin-bottom: 10px
    }

    .popularcourses-boxbg-top h4 {
        font-size: 12px
    }

    .popularcourses-header {
        padding: 20px
    }

    .popularcourses-header-img img {
        width: 40px
    }

    .popularcourses-header-text h2 {
        font-size: 12px
    }

    .popularcourses-header-text p {
        font-size: 11px;
        line-height: 15px
    }

    .popularcourses-boxbg-top {
        min-height: inherit
    }

    .popularcourses-boxbg-bottom-top ul li {
        margin: 5px 0;
        padding: 5px 0
    }

    .popularcourses-boxbg-bottom-mid ul li {
        padding: 10px
    }

    .popularcourses-boxbg-bottom-bottom h3 {
        font-size: 13px;
        margin: 0 0 10px 0
    }

    .popularcourses-boxbg-bottom-bottom ul li a .fa {
        padding-left: 0
    }

    .popularcourses-boxbg-bottom-bottom ul li a {
        font-size: 11px
    }

    .popularcourses-boxbg-bottom-top-text h4 {
        font-size: 11px
    }

    .popularcourses-boxbg-bottom-top-text p {
        font-size: 13px
    }

    .gethired-stepsbg h3 {
        margin: 15px 0 !important;
        font-size: 13px
    }

    .gethired-stepsbg {
        padding: 0
    }

    .syllabusbg-new .tab-content h2 {
        font-size: 20px
    }

    .syllabusbg-new .tab-content p {
        font-size: 12px
    }

    .brochbtn {
        font-size: 12px
    }

    /* .salbustabingmain .tab .nav-item .nav-link {
        width: 20%;
        margin: 0
    } */

    .salbustabingmain .tab .nav-item .nav-link span,
    .salbustabingmain .tab .nav-item .nav-link p {
        font-size: 10px
    }

    .blueimg img {
        width: 25px
    }

    .faq .btn-link {
        font-size: 14px
    }

    .borderfaq {
        font-size: 14px !important
    }

    .faqinsidecontent li {
        font-size: 14px
    }

    .program-highlights-new ul li {
        font-size: 14px
    }

    .program-highlights-new ul li img {
        width: 19px
    }

    .tabstimestrip ul.nav-pills li {
        width: 33.33%
    }

    .tabstimestrip .nav-pills .nav-link {
        padding: 10px;
        font-size: 14px
    }

    .howitworksetion {
        padding: 0
    }

    .highleavedstrip {
        padding: 20px 0 0 0
    }

    .checksyllabus-bannerbg-content h1 {
        font-size: 14px;
        line-height: 25px
    }

    .checksyllabus-bannerbg-content ul li {
        font-size: 14px
    }

    .clientsquotes h3 {
        font-size: 15px
    }

    .clientsquotes .owl-carousel .owl-item p {
        font-size: 15px
    }

    .bookbtn02 a {
        font-size: 13px;
        padding: 12px 0
    }

    .fewreviewsbg-left h1 {
        font-size: 18px
    }

    .fewreviewsbg {
        padding: 50px 0
    }

    .quicklinks ul li a {
        font-size: 13px
    }
}
@media only screen and (max-width:599px) {
    .popularcourses-header {
        display: block;
        text-align: center
    }

    .popularcourses-header-img {
        padding: 0 0 15px 0
    }

    .popularcourses-boxbg-bottom {
        margin-top: 0
    }

    .popularcourses-boxbg-bottom-top ul li {
        width: 100%;
        margin: 10px 0
    }

    .popularcourses-boxbg-bottom-top-text h4,
    .popularcourses-boxbg-bottom-top-text p {
        text-align: left
    }

    .popularcourses-boxbg-bottom-mid ul li {
        width: 100%;
        margin: 10px 0;
        min-height: inherit
    }

    .popularcourses-boxbg-top h4 {
        padding: 6px 0 0 20px;
        text-align: left
    }

    .algorithm-bg-left {
        width: 100%;
        margin-top: 20px
    }

    .algorithm-bg-right {
        width: 100%
    }

    .algorithm-bg-left p {
        text-align: left
    }

    .fewreviewsbg-left {
        width: 100%
    }

    .fewreviewsbg-right {
        width: 100%
    }

    .fewreviewsbg-left p {
        text-align: left
    }

    .syllabushead {
        text-align: center
    }

    .syllabushead p {
        width: 100%
    }

    .syllabushead a {
        float: none;
        display: inline-block
    }

    .syllabustabs-bg .nav-item {
        float: left;
        width: 48%;
        margin: 1%
    }

    .nav-pills .nav-link {
        padding: 10px 15px;
        font-size: 14px
    }

    .populartag {
        margin: 10px 0 0 0
    }

    .flip-card {
        width: 100% !important;
        margin: 10px 0 !important;
        height: 140px
    }

    .liveprogram-innerbg .row {
        display: block
    }

    .liveprogram-innerbg .col-md-4 {
        width: 50%;
        float: left
    }

    .flip-card-front img {
        width: 50px
    }

    .flip-card-front h3 {
        font-size: 12px;
        line-height: 16px;
        margin-top: 10px
    }

    .flip-card-front {
        padding: 20px
    }

    .flip-card-back {
        font-size: 12px;
        line-height: 16px
    }

    .liveprogram-innerbg h1 {
        font-size: 12px;
        margin: 5px 0
    }

    .popularcourses-bg2 {
        padding: 40px 0
    }

    .popularcourses-bg2 h1 {
        margin-bottom: 10px
    }

    .popularcourses-boxbg-top h4 {
        font-size: 12px
    }

    .popularcourses-header {
        padding: 20px
    }

    .popularcourses-header-img img {
        width: 40px
    }

    .popularcourses-header-text h2 {
        font-size: 12px
    }

    .popularcourses-header-text p {
        font-size: 11px;
        line-height: 15px
    }

    .popularcourses-boxbg-top {
        min-height: inherit
    }

    .popularcourses-boxbg-bottom-top ul li {
        margin: 5px 0;
        padding: 5px 0
    }

    .popularcourses-boxbg-bottom-mid ul li {
        padding: 10px
    }

    .popularcourses-boxbg-bottom-bottom h3 {
        font-size: 13px;
        margin: 0 0 10px 0
    }

    .popularcourses-boxbg-bottom-bottom ul li a .fa {
        padding-left: 0
    }

    .popularcourses-boxbg-bottom-bottom ul li a {
        font-size: 11px
    }

    .popularcourses-boxbg-bottom-top-text h4 {
        font-size: 11px
    }

    .popularcourses-boxbg-bottom-top-text p {
        font-size: 13px
    }

    .gethired-stepsbg h3 {
        margin: 15px 0 !important;
        font-size: 13px
    }

    .gethired-stepsbg {
        padding: 30px 0 0 0
    }

    .booktrialbtn1 {
        display: inline-block
    }

    .counsbtn1 {
        padding: 13px;
        font-size: 13px
    }

    .syllabusbg-new .tab-content h2 {
        font-size: 20px
    }

    .syllabusbg-new .tab-content p {
        font-size: 12px
    }

    .brochbtn {
        font-size: 12px
    }

    .salbustabingmain .tab .nav.nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .salbustabingmain .tab .nav-item {
        /* width: 20%; */
        width: auto;
        margin: 0;
        padding: 4px;
    }

    .salbustabingmain .tab .nav-item .nav-link {
        padding: 5px;
        border-radius: 5px;
        width: 100%;
        text-align: center;
        background: #f0f8ff;
        min-height: 0;
    }

    .salbustabingmain .tab .nav-link span,
    .salbustabingmain .tab .nav-link p {
        font-size: 10px;
        margin-bottom: 0;
        white-space: nowrap;
    }


    .blueimg img {
        width: 25px
    }

    .faq .btn-link {
        font-size: 11px
    }

    .borderfaq {
        font-size: 11px !important
    }

    .faqinsidecontent li {
        font-size: 12px
    }

    .faqinsidecontent p {
        font-size: 12px
    }

    .program-highlights-new ul li {
        font-size: 10px
    }

    .program-highlights-new ul li img {
        width: 19px
    }

    .tabstimestrip ul.nav-pills li {
        width: 33.33%
    }

    .tabstimestrip .nav-pills .nav-link {
        padding: 10px;
        font-size: 11px
    }

    .howitworksetion {
        padding: 0
    }

    .highleavedstrip {
        padding: 20px 0 0 0
    }

    .checksyllabus-bannerbg-content h1 {
        font-size: 14px;
        line-height: 25px
    }

    .checksyllabus-bannerbg-content ul li {
        font-size: 14px
    }

    .clientsquotes h3 {
        font-size: 15px
    }

    .clientsquotes .owl-carousel .owl-item p {
        font-size: 15px
    }

    .bookbtn02 a {
        font-size: 13px;
        padding: 12px 0
    }

    .fewreviewsbg-left h1 {
        font-size: 18px
    }

    .fewreviewsbg {
        padding: 50px 0
    }

    .quicklinks ul li a {
        font-size: 13px
    }

    .program-btnleft,
    .program-btnrihgt {
        margin: 10px 5px !important
    }

    .traktopinfo {
        text-align: left;
        font-size: 16px
    }
}
	

@media (min-width:768px) {
    .col-md {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%
    }

    .col-md-auto {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: 100%
    }

    .col-md-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%
    }

    .col-md-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%
    }

    .col-md-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%
    }

    .col-md-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%
    }

    .col-md-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%
    }

    .col-md-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%
    }

    .col-md-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%
    }

    .col-md-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%
    }

    .col-md-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%
    }

    .col-md-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%
    }

    .col-md-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%
    }

    .col-md-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%
    }

    .order-md-first {
        -ms-flex-order: -1;
        order: -1
    }

    .order-md-last {
        -ms-flex-order: 13;
        order: 13
    }

    .order-md-0 {
        -ms-flex-order: 0;
        order: 0
    }

    .order-md-1 {
        -ms-flex-order: 1;
        order: 1
    }

    .order-md-2 {
        -ms-flex-order: 2;
        order: 2
    }

    .order-md-3 {
        -ms-flex-order: 3;
        order: 3
    }

    .order-md-4 {
        -ms-flex-order: 4;
        order: 4
    }

    .order-md-5 {
        -ms-flex-order: 5;
        order: 5
    }

    .order-md-6 {
        -ms-flex-order: 6;
        order: 6
    }

    .order-md-7 {
        -ms-flex-order: 7;
        order: 7
    }

    .order-md-8 {
        -ms-flex-order: 8;
        order: 8
    }

    .order-md-9 {
        -ms-flex-order: 9;
        order: 9
    }

    .order-md-10 {
        -ms-flex-order: 10;
        order: 10
    }

    .order-md-11 {
        -ms-flex-order: 11;
        order: 11
    }

    .order-md-12 {
        -ms-flex-order: 12;
        order: 12
    }

    .offset-md-0 {
        margin-left: 0
    }

    .offset-md-1 {
        margin-left: 8.333333%
    }

    .offset-md-2 {
        margin-left: 16.666667%
    }

    .offset-md-3 {
        margin-left: 25%
    }

    .offset-md-4 {
        margin-left: 33.333333%
    }

    .offset-md-5 {
        margin-left: 41.666667%
    }

    .offset-md-6 {
        margin-left: 50%
    }

    .offset-md-7 {
        margin-left: 58.333333%
    }

    .offset-md-8 {
        margin-left: 66.666667%
    }

    .offset-md-9 {
        margin-left: 75%
    }

    .offset-md-10 {
        margin-left: 83.333333%
    }

    .offset-md-11 {
        margin-left: 91.666667%
    }
}
@media (min-width:992px) {
    .col-lg {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%
    }

    .col-lg-auto {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: 100%
    }

    .col-lg-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%
    }

    .col-lg-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%
    }

    .col-lg-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%
    }

    .col-lg-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%
    }

    .col-lg-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%
    }

    .col-lg-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%
    }

    .col-lg-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%
    }

    .col-lg-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%
    }

    .col-lg-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%
    }

    .col-lg-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%
    }

    .col-lg-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%
    }

    .col-lg-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%
    }

    .order-lg-first {
        -ms-flex-order: -1;
        order: -1
    }

    .order-lg-last {
        -ms-flex-order: 13;
        order: 13
    }

    .order-lg-0 {
        -ms-flex-order: 0;
        order: 0
    }

    .order-lg-1 {
        -ms-flex-order: 1;
        order: 1
    }

    .order-lg-2 {
        -ms-flex-order: 2;
        order: 2
    }

    .order-lg-3 {
        -ms-flex-order: 3;
        order: 3
    }

    .order-lg-4 {
        -ms-flex-order: 4;
        order: 4
    }

    .order-lg-5 {
        -ms-flex-order: 5;
        order: 5
    }

    .order-lg-6 {
        -ms-flex-order: 6;
        order: 6
    }

    .order-lg-7 {
        -ms-flex-order: 7;
        order: 7
    }

    .order-lg-8 {
        -ms-flex-order: 8;
        order: 8
    }

    .order-lg-9 {
        -ms-flex-order: 9;
        order: 9
    }

    .order-lg-10 {
        -ms-flex-order: 10;
        order: 10
    }

    .order-lg-11 {
        -ms-flex-order: 11;
        order: 11
    }

    .order-lg-12 {
        -ms-flex-order: 12;
        order: 12
    }

    .offset-lg-0 {
        margin-left: 0
    }

    .offset-lg-1 {
        margin-left: 8.333333%
    }

    .offset-lg-2 {
        margin-left: 16.666667%
    }

    .offset-lg-3 {
        margin-left: 25%
    }

    .offset-lg-4 {
        margin-left: 33.333333%
    }

    .offset-lg-5 {
        margin-left: 41.666667%
    }

    .offset-lg-6 {
        margin-left: 50%
    }

    .offset-lg-7 {
        margin-left: 58.333333%
    }

    .offset-lg-8 {
        margin-left: 66.666667%
    }

    .offset-lg-9 {
        margin-left: 75%
    }

    .offset-lg-10 {
        margin-left: 83.333333%
    }

    .offset-lg-11 {
        margin-left: 91.666667%
    }
}
.col,
.col-1,
.col-10,
.col-11,
.col-12,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-auto,
.col-lg,
.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-auto,
.col-md,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-auto,
.col-sm,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-auto,
.col-xl,
.col-xl-1,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-auto {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 5px
}



.booktrialbtn:hover {
    background: #f6d038 !important;
    border-color: #f6d038 !important;
    color: #0b254d !important;
    box-shadow: 0 0 13px #f6d038 !important
}
.justify-content-center {
    -ms-flex-pack: center !important;
    justify-content: center !important
}



.nav-link {
    display: block;
    padding: .5rem 1rem
}

.nav-pills .nav-link {
    border-radius: .25rem;
    background: #f0f2f8;
    margin-right: 10px;
    padding: 11px 40px;
    color: #000;
    font-weight: 600
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: #fff;
    background-color: #007bff
}

.coursesbg .nav-pills .nav-link {
    background: #dde1ec;
    margin-right: 10px;
    padding: 11px 40px;
    color: #000;
    font-weight: 700
}

.coursesbg .nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    background: linear-gradient(90deg, rgba(53, 106, 239, 1) 40%, rgba(45, 143, 230, 1) 100%);
    color: #fff
}

.coursemodule-bg {
    float: left;
    width: 100%;
    padding: 50px 0;
    background: #eceded;
    font-family: 'Inter', sans-serif
}

.coursemodule-bg h1 {
    color: #000;
    font-size: 27px;
    font-weight: 600;
    margin: 0
}

.coursemodule-bg h6 {
    color: #363636;
    font-size: 17px;
    font-weight: 500;
    margin: 10px 0
}
p{
	font-size: 14px;
}
ul {
    padding: 0;
    margin: 0
}

ul li {
    list-style-type: none;
	font-size: 14px;
}

dl,
ol,
ul {
    margin-top: 0;
    margin-bottom: 1rem;
	font-size: 14px;
}
*,
::after,
::before {
    box-sizing: border-box;
    
	
	
}
div li{
    font-size: 14px;
}


/*-------*/

@media only screen and (min-width: 320px) and (max-width: 768px) {
#welcomepopup {
	max-width: 370px !important;
	left: 8px;
	top: inherit;
	bottom: 20px;
	padding: 0 !important;
	border-radius: 20px;
	background: #00205f;
	height: auto;
	font-family: "Open Sans", sans-serif;
}

.trakmenu ul li {
	float: none;
	display: inline-block;
	padding: 0px 7px !important;
}

#welcomepopup .modal-header .close {
	opacity: 1;
	color: #00205f;
	background-color: #fff;
	z-index: 99;
	box-shadow: none;
	width: 30px;
	position: relative;
	border-radius: 50%;
	height: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	right: 10px;
	top: 10px;
}

#welcomepopup .modal-header {
	text-align: center;
	display: block;
	border: none;
}

#welcomepopup .modal-footer {
	text-align: center;
	display: block;
	border: none;
	background: #fff;
}

.yallowbox {
	display: inline-block;
	padding: 5px 20px;
	border-radius: 5px;
	background: #fefe00;
	color: #000;
	font-weight: 700;
}

#welcomepopup .modal-body p {
	color: #fff;
	font-weight: 700;
	font-size: 14px;
}
}

.counsellingpopupbg .close {
color: #0072bc;
opacity: 1;
position: absolute;
top: 10px;
font-size: 30px;
right: 20px;
outline: none;
}

.counsellingpopupbg-img {
float: left;
width: 50%;
}

.counsellingpopupbg-img img {
width: 100%;
}

.counsellingpopupbg-form {
padding: 50px 40px;
}

.counsellingpopupbg-form {
float: left;
width: 50%;
padding: 10px 15px;
}

.counsellingpopupbg-form h1 {
color: #0072bc;
font-size: 25px;
font-weight: 700;
text-align: center;
margin: 0 0 27px 0;
}

.counsellingpopupbgIframe {
width: 100%;
border: none;
height: 590px;
}

@media only screen and (max-width: 767px) {
.counsellingpopupbg-img {
	display: none;
}

.counsellingpopupbg-form {
	width: 100%;
	padding: 20px;
}

/* .whymakesnew .row [class*="col-"]{
		padding-inline: 5px;
	} */

.whymakesnew .row [class*="col-"],
.getcertfiedbgnew .row [class*="col-"] {
	padding-inline: 5px;
	margin-bottom: 15px;
}

.whymakes-box {
	min-height: auto;
}

.whymakes-box,
.getcertfiedbgnew-box {
	padding: 20px 10px;
	height: 100%;
	margin-bottom: 0;
}

.whymakes-box img {
	width: 60px;
}

.getcertfiedbgnew-box .fa {
	font-size: 45px;
}

.whymakes-box h4,
.getcertfiedbgnew-box h2 {
	font-size: 14px;
}

.whymakes-box p,
.getcertfiedbgnew-box p {
	font-size: 14px;
}
}

.review_scroll_sec {
overflow: auto;
white-space: nowrap;
}

.review_scroll_sec .review_scroll_inner {
display: flex;
}

.review_scroll_sec .review_scroll_inner .whatpeoplesaybox {
min-width: 410px !important;
display: flex;
flex-direction: column;
}

.review_scroll_sec .review_scroll_inner .whatpeoplesaybox * {
white-space: normal;
}

.review_scroll_sec
.review_scroll_inner
.whatpeoplesaybox
.whatpeoplesaybox-mid {
margin-top: auto;
/* padding-top: 25px; */
}

@media screen and (max-width: 600px) {
.review_scroll_sec .review_scroll_inner .whatpeoplesaybox {
	min-width: 325px !important;
}
}

@media screen and (max-width: 959px) {
.sticky-nav {
	display: flex !important;
	flex-wrap: nowrap;
	white-space: nowrap;
	overflow-x: auto;
	position: sticky;
	top: 60px;
	z-index: 99;
	background: #fff;
}
}

@media screen and (max-width: 767px) {
.sticky-nav {
	top: 110px;
	z-index: 99;
	background: #fff;
	gap: 10px;
	padding: 5px;
}

.sticky-nav .nav-item {
	min-width: auto !important;
	width: auto !important;
	display: inline-block;
}

.sticky-nav .nav-link {
	font-size: 10px !important;
	border-radius: 2px !important;
	padding: 5px 10px !important;
}

.sticky-nav.center-nav {
	justify-content: center !important;
}
}

.curriculum-accordion {
border: 1px solid #e1e1e1;
padding: 15px;
border-radius: 10px;
}

.curriculum-accordion .card {
border: 0;
border-radius: 10px;
background: none;
}

.curriculum-accordion .card .card-header + div {
background: #f7f9fc !important;
}

.curriculum-accordion .card .card-header {
border: 0;
padding: 0;
margin: 5px 0;
border-radius: 10px;
}

.curriculum-accordion .card .card-header .btn-header-link.collapsed {
color: #000;
border-radius: 10px !important;
font-family: "Inter", sans-serif;
font-weight: 600;
font-size: 14px;
}

.curriculum-accordion .card .card-header .btn-header-link {
color: #000;
display: block;
background: #f7f9fc;
text-align: left;
box-shadow: 0 0 0 #000;
padding: 15px 50px 15px 20px;
border-radius: 10px;
font-family: "Inter", sans-serif;
font-weight: 600;
font-size: 14px;
position: relative;
}

.curriculum-accordion .card .card-header .btn-header-link::after {
content: "\f107";
position: absolute;
font: normal normal normal 14px / 1 FontAwesome;
text-rendering: auto;
color: #000;
font-size: 14px;
right: 30px;
top: 50%;
transform: translateY(-50%) rotateZ(0deg);
transition: 0.3s all;
}

.curriculum-accordion
.card
.card-header
.btn-header-link[aria-expanded="true"]::after {
transform: translateY(-50%) rotateZ(180deg);
}

.curriculum-accordion .card .collapse {
border: 0;
}

.curriculum-accordion .card-body {
padding: 20px;
}

.curriculum-accordion .innerfaq .card {
border: solid 1px #d9d9d9 !important;
margin-bottom: 7px;
}

.curriculum-accordion .implementation-content ul {
padding: 0;
margin: 0;
}

.curriculum-accordion .implementation-content ul li {
position: relative;
list-style: none;
color: #000;
font-size: 14px;
font-family: "Inter", sans-serif;
font-weight: 500;
padding: 0 0 10px 25px;
}

.curriculum-accordion .implementation-content ul li::before {
content: "";
height: 8px;
width: 8px;
border-radius: 50%;
position: absolute;
background-color: #377cef;
top: 5px;
left: 0;
}

.curriculum-accordion .implementation-content ul li:last-child::after {
display: none;
}

.curriculum-accordion .implementation-content ul li::after {
content: "";
border: dotted 1px #377cef;
height: 100%;
width: 1px;
position: absolute;
bottom: -9px;
left: 3px;
}

.curriculum-accordion .implementation-content h3,
.curriculum-accordion .implementation-content h4,
.curriculum-accordion .implementation-content h5 {
color: #477ab3;
font-size: 15px;
font-family: "Inter", sans-serif;
font-weight: 600;
margin: 18px 0 5px 0;
}

.curriculum-accordion .implementation-content h5 {
color: #000;
}

.program-highlights {
float: left;
width: 100%;
}

.program-highlights .highlight-card {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
}

.program-highlights .highlight-card img {
width: 120px;
margin-bottom: 10px;
}

.program-highlights .highlight-card h4 {
text-align: center;
font-size: 20px;
}

.program-highlights .highlight-card h3 {
    text-align: center;
    font-size: 14px;
    }

.learning-path-outer {
display: flex;
justify-content: space-between;
}

.learning-path-card {
position: relative;
flex-grow: 0;
flex-shrink: 0;
width: 150px !important;
}

.learning-path-card .learning-path-card-img {
padding: 0 20px;
}

.learning-path-card .learning-path-card-img img {
max-width: 100%;
}

.learning-path-card .learning-path-card-img::after {
position: absolute;
content: "";
top: 55px;
left: calc(100% + 10px);
width: 35px;
height: 35px;
background-image: url(../images/icons/fast-forward.png);
background-size: contain;
transform: translateY(-50%);
}

.learning-path-card.last-card .learning-path-card-img::after {
display: none;
}

.learning-path-card img {
max-width: 100%;
margin-bottom: 10px;
}

.learning-path-card p {
text-align: center;
font-size: 14px;
font-weight: 500;
}
.learning-path-card h3 {
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    }

.bottom-text {
border: 2px solid #9b9b9b;
border-top: 0;
height: 60px;
max-width: 85%;
margin: 0 auto;
position: relative;
}

.bottom-text h3 {
position: absolute;
top: 100%;
left: 50%;
background-color: #fff;
padding: 0 10px;
white-space: nowrap;
transform: translate(-50%, -20px);
}

/* BSR */
.video-youtube .faculty-box {
padding: 0;
overflow: hidden;
}

.video-youtube .faculty-box figure img {
cursor: pointer;
height: 100%;
width: 100%;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.video-youtube .faculty-box div {
padding: 10px 30px 30px;
}
.video-youtube-popup {
position: fixed;
z-index: 99999;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
bottom: 0;
justify-content: center;
align-items: center;
display: none;
}
.video-youtube-popup.show {
display: flex;
}
.video-youtube-popup .wrapper {
position: relative;
min-width: 25px;
min-height: 25px;
background-color: black;
border-radius: 10px;
padding: 10px;
}
.video-youtube-popup .close-btn {
cursor: pointer;
position: absolute;
top: -17px;
right: -17px;
padding: 4px;
background-color: red;
border-radius: 50%;
color: wheat;
}
.video-youtube-popup .close-btn > svg {
width: 25px;
height: 25px;
}
.video-youtube-popup iframe {
width: 60vw;
height: 50vh;
}
/* / BSR */

@media screen and (min-width: 1140px) and (max-width: 1279px) {
.learning-path-card {
	width: 130px !important;
}

.learning-path-card .learning-path-card-img::after {
	top: 50px;
	left: calc(100% + 10px);
	width: 20px;
	height: 20px;
}
}

@media screen and (min-width: 960px) and (max-width: 1139px) {
.learning-path-outer {
	transform: scale(0.95);
}

.learning-path-card {
	width: 130px !important;
}

.learning-path-card .learning-path-card-img::after {
	top: 50px;
	width: 20px;
	height: 20px;
}
}

@media screen and (min-width: 768px) and (max-width: 959px) {
.learning-path-card {
	width: 100px !important;
}

.learning-path-card .learning-path-card-img::after {
	top: 30px;
	left: 100%;
	width: 20px;
	height: 20px;
}

.learning-path-card p {
	font-size: 14px;
}
}

.graph-text {
display: flex;
justify-content: space-between;
padding: 0 10px 0 40px;
margin-top: 20px;
font-size: 14px;
}

.graph-text p {
margin-bottom: 0;
text-align: center;
}

.avg-salery {
display: flex;
align-items: center;
justify-content: center;
margin-top: 40px;
gap: 10px;
}

.avg-salery p {
margin-bottom: 0;
}

.avg-salery .box {
background-color: #0a4c9e;
width: 40px;
height: 40px;
}

@media screen and (min-width: 1280px) {
.graph-text {
	padding: 0 50px 0 90px;
}

.graph-text p {
	font-size: 20px;
}
.graph-text h3   {
	font-size: 20px;
}

}

@media screen and (min-width: 1140px) and (max-width: 1279px) {
.graph-text {
	padding: 0 40px 0 75px;
}

.graph-text p {
	font-size: 20px;
}
.avg-salery .box { 
	width: 30px;
	height: 30px;
}
}
@media screen and (min-width: 768px) and (max-width: 1139px) {
.avg-salery .box { 
	width: 35px;
	height: 35px;
}
}

@media screen and (max-width: 767px) {
.graph-text {
	padding: 0 4px 0 20px;
	gap: 15px;
}

.graph-text p {
	font-size: 11px;
}
.avg-salery .box { 
	width: 20px;
	height: 20px;
}
}

@media screen and (max-width: 460px) {
.graph-text h3{
	gap: 10px;
    font-size: 13px;

}

.graph-text p {
	font-size: 10px;
} 
}

@media screen and (min-width: 768px) and (max-width: 1139px) {
.avg-salery .box { 
	width: 35px;
	height: 35px;
}
}


@media screen and (max-width: 767px) {
.learning-path-outer {
	flex-direction: column;
	position: relative;
	padding-left: 35px;
	padding-right: 10px;
}

.learning-path-outer::before {
	position: absolute;
	content: "";
	left: 7px;
	top: 35px;
	bottom: 52px;
	width: 2px;
	border: 2px dotted #377cef;
}

.learning-path-card {
	position: relative;
	width: auto !important;
	padding-right: 10px;
	display: flex;
	align-items: center;
	border: 1px solid #377cef;
	margin-bottom: 16px;
	border-radius: 5px;
	background-color: #fff;
}

.learning-path-card::before {
	position: absolute;
	content: "";
	left: -35px;
	top: calc(50% - 7px);
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background-color: #377cef;
}

.learning-path-card::after {
	position: absolute;
	content: "";
	left: -35px;
	top: calc(50% - 1px);
	width: 40px;
	height: 2px;
	border-radius: 50%;
	background-color: #377cef;
	z-index: -1;
}

.learning-path-card .learning-path-card-img {
	width: 80px;
	padding: 10px;
	flex-shrink: 0;
}

.learning-path-card .learning-path-card-img img {
	margin-bottom: 0;
}

.learning-path-card p {
	font-size: 18px;
	margin-bottom: 0;
}

.learning-path-card .learning-path-card-img::after {
	display: none;
}

.learning-path-card p {
	text-align: left;
}

.bottom-text {
	border-left: 0;
	border-right: 0;
}
}

@media screen and (min-width: 500px) and (max-width: 767px) {
.bottom-text {
	height: 40px;
	max-width: 80%;
}

.bottom-text h3 {
	font-size: 15px;
	transform: translate(-50%, -10px);
}
}

@media screen and (max-width: 574px) {
.program-highlights .row [class*="col-"] {
	padding-left: 8px;
	padding-right: 8px;
}

.program-highlights .highlight-card {
	padding: 0;
}

.program-highlights .highlight-card img {
	width: 50px;
}

.program-highlights .highlight-card h4 {
	font-size: 14px;
}

.learning-path-card .learning-path-card-img {
	width: 65px;
}
.learning-path-card h3{
    font-size: 14px;
}



.learning-path-card p {
	font-size: 15px;
	margin-bottom: 0;
}

/* 	.learning-path-outer {
		white-space: nowrap;
	}

	.learning-path-card {
		width: 80px !important;
	}

.learning-path-card .learning-path-card-img {
		padding: 0 5px;
	}

	.learning-path-card .learning-path-card-img::after {
		top: 35px;
		left: 100%;
		width: 20px;
		height: 20px;
	}

	.learning-path-outer .learning-path-card p {
		font-size: 8px;
		white-space: normal;
	} */

.bottom-text {
	max-width: 88%;
}

.bottom-text h3 {
	font-size: 18px;
	transform: translate(-50%, -10px);
}
}

@media screen and (max-width: 460px) {
/* .learning-path-outer {
		white-space: nowrap;
	} */

/* .learning-path-card {
		width: 55px !important;
	}

	.learning-path-card .learning-path-card-img {
		padding: 0 5px;
	}

	.learning-path-card .learning-path-card-img::after {
		top: 25px;
		left: 100%;
		width: 10px;
		height: 10px;
	}

	.learning-path-outer .learning-path-card p {
		font-size: 8px;
		white-space: normal;
	} */

.bottom-text {
	height: 30px;
}

.bottom-text h3 {
	font-size: 14px;
	/* transform: translate(-50%, -10px); */
}
/* BSR */
.video-youtube-popup .wrapper {
	border-radius: 3px;
	padding: 2px;
}
.video-youtube-popup .close-btn {
	cursor: pointer;
	position: absolute;
	top: -10px;
	right: -10px;
	padding: 1px;
	background-color: red;
	border-radius: 50%;
	color: wheat;
}
.video-youtube-popup .close-btn > svg {
	width: 20px;
	height: 20px;
}
.video-youtube-popup iframe {
	width: 90vw;
	height: 25vh;
}
}
/* BSR */

.mentor,
.faq {

width: 100%;
}

.btn-center-section {
float: left;
width: 100%;
padding: 25px 0;
}

/* .container::after {
	display: block;
	clear: both;
	content: "";
} */

.brochbtn {
padding: 13px 15px;
text-align: center;
font-weight: 600;
font-size: 14px;
background: #1a64c0;
border-radius: 5px;
color: #fff;
display: inline-flex;
justify-content: center;
align-items: center;
}

.brochbtn:hover {
background: #ec5252;
color: #fff;
}
.review_scroll_sec .review_scroll_inner .faculty-box {
min-width: 410px !important;
margin: 20px;
}
.review_scroll_sec .review_scroll_inner .faculty-box .title,
.review_scroll_sec .review_scroll_inner .faculty-box .description {
white-space: break-spaces;
}

@media screen and (max-width: 600px) {
.review_scroll_sec .review_scroll_inner .faculty-box {
	min-width: 325px !important;
}
}

/* 22-03-2023 */

/* html,
body {
	height: 100%;
} */

/* .sec-navbar {
	z-index: 999;
} */

@media screen and (max-width: 767px) {
.center-nav {
	display: none !important;
	position: fixed;
	width: 100%;
	top: 100px;
	left: 0;
	z-index: 99;
	background: #fff;
}

.sticky-section .center-nav {
	display: flex !important;
}
}

/* BSR -19-04-2024 */
.hero-event-lable {
  width: max-content;
  gap: 10px;
}
.hero-event-lable > svg {
  height: 24px;
  width: 24px;
}
.hero-event-lable > p {
  font-size: 13px;
  font-weight: 500;
  line-height: 13px;
}
.banner-feature-item {
  gap: 10px;
}
.banner-feature-item figure > svg {
  color: rgb(32 168 152 / 1);
  height: 18px;
  width: 18px;
}
.banner-feature-item > p {
  margin: 0;
  margin-bottom: 15px;
/*  line-height: 40px;*/
}
.banner-video-btn {
  gap: 10px;
}

.video-youtube .faculty-box div {
  padding: 10px 30px 30px;
}
.video-youtube-popup {
  position: fixed;
  z-index: 99999;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  bottom: 0;
  justify-content: center;
  align-items: center;
  display: none;
}
.video-youtube-popup.show {
  display: flex;
}
.video-youtube-popup .wrapper {
  position: relative;
  min-width: 25px;
  min-height: 25px;
  background-color: black;
  border-radius: 10px;
  padding: 10px;
}
.video-youtube-popup .close-btn {
  cursor: pointer;
  position: absolute;
  top: -17px;
  right: -17px;
  padding: 4px;
  background-color: red;
  border-radius: 50%;
  color: wheat;
}
.video-youtube-popup .close-btn > svg {
  width: 25px;
  height: 25px;
}
.video-youtube-popup iframe {
  width: 60vw;
  height: 50vh;
}
.interview-call {
  padding-top: 1000px !important;
}
.interview-call .row {
  gap: 5px;
}
.interview-call figure img {
  width: 100%;
  height: 70px;
  padding: 5px;
  object-fit: contain;
  object-position: center;
}
.interview-call h3 {
  font-size: 24px;
}
.mentor-profile .card {
  border: 0;
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
}
.mentor-profile .card-header,
.mentor-profile .card-body,
.mentor-profile .card-header > div {
  flex: 1;
}
.mentor-profile .card-header {
  padding: 0;
  height: 226px;
/*  max-height: 226px;*/
/*  max-width: 540px;*/
}

.mentor-profile .card-header .wrapper {
  /*
  width: 100%;
  height: 100%;
  */
  background-color: #000;
  background-image: linear-gradient(to right, rgb(44, 44, 44), rgb(0, 0, 0));
}
.mentor-profile .card-header .left > p {
  padding-left: 10px;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
}
.mentor-profile .card-header .left > p span {
  color: #007bff;
  text-decoration: underline;
}
.mentor-profile .card-header .border-layer {
  border: 4px solid rgba(132, 146, 166, .3);
  border-radius: 10px;
  overflow: hidden;
}
.mentor-profile .card-header .right {
  flex: 1;
  display: flex;
  justify-content: end;
}
.mentor-profile .card-header .right > img {
/*  height: 100%;*/
  height: 160px;
  object-fit: contain;
  object-position: bottom right;
}
.mentor-profile .card-header .play-btn {
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}
.mentor-profile .card-header .play-btn button {
  height: 40px;
  width: 40px;
  padding: 0;
  background-color: #007bff;
  border-radius: 50%;
}
.mentor-profile .card-header .play-btn svg {
  color: white;
}
.mentor-profile .card-body {
    padding-top: 15px;
}
.mentor-profile .card-body .lable {
  width: fit-content;
  padding: 5px 18px;
  background-color: rgb(227, 234, 245);
}
.mentor-profile .card-body .lable p {
  margin: 0;
  color: rgb(35, 35, 35);
  font-size: 14px;
  font-weight: 400;
}
.mentor-profile .card-body .profile {
  gap: 10px;
}
.mentor-profile .card-body .profile figure img {
  height: 72px;
  width: 72px;
  border-radius: 50%;
}
.mentor-profile .card-body p {
  margin-top: 20px;
  color: rgb(128, 128, 128);
  font-size: 14px;
  text-align: left;
}
.mentor-profile .card-body .title div {
  gap: 10px;
}
.mentor-profile .card-body .title .meta-tags .lable {
  gap: 10px;
  width: fit-content;
  padding: 5px 9px;
  background-color: rgb(227, 234, 245);
  color: rgb(128 128 128 / 1);
}
.mentor-profile .card-body .title .meta-tags .lable p {
  color: rgb(128 128 128 / 1);
}
.mentor-profile .card-body .title .meta-profile a {
  margin-top: -12px;
  display: inline-block;
}
.mentor-profile .card-body .companies {
  gap: 10px;
}
.mentor-profile .card-body .companies img {
  height: 30px;
}
.hiring-organization .row {
	gap: 45px;
  }
  .hiring-organization .item {
	gap: 25px;
  }
  .owl-carousel .owl-stage {
	transition-timing-function: linear !important;
  }
  .hiring-organization .head {
	background-color: #dc3545;
	z-index: 999;
	top: -39px;
	font-size: 14px;
	font-weight: 700;
	border-radius: 12px;
  }
  .hiring-organization .company-slider {
	background-color: #f3f5fd;
	padding: 13px 10px;
	border-radius: 25px;
  }
  .hiring-organization .swiper-wrapper {
	position: relative;
	transition-timing-function: linear !important;
  }

@media screen and (max-width: 460px) {
  .video-youtube-popup .wrapper {
    border-radius: 3px;
    padding: 2px;
  }
  .video-youtube-popup .close-btn {
    cursor: pointer;
    position: absolute;
    top: -10px;
    right: -10px;
    padding: 1px;
    background-color: red;
    border-radius: 50%;
    color: wheat;
  }
  .video-youtube-popup .close-btn > svg {
    width: 20px;
    height: 20px;
  }
  .video-youtube-popup iframe {
    width: 90vw;
    height: 25vh;
  }
  .interview-call {
    /*padding-top: 1230px !important;*/
    padding-top: 1885px !important;
  }
  .interview-call figure {
    margin: 0;
    padding: 0;   
  }
}
/*
@media (min-width: 576px) and (max-width: 767.98px) {
  .mentor-profile .card-header {
    height: 300px;
  }
}
*/
/*@media (min-width: 768px) and (max-width: 991.98px){*/
@media (min-width: 768px){
  /*
  .mentor-profile .card {
    height: 306px;
  }
  */

  .hero-event-lable > p {
    font-size: 15px;
  }
  .mentor-profile .card-header {
    padding: 0;
    height: auto;
    height: 306px;
    background-color: unset;
    border: none;
    display: flex;
    justify-content: center;
  }
  .mentor-profile .card-header .border-layer {
    max-width: 540px;
  }
  .mentor-profile .card-body .companies {
    gap: 20px;
  }
  .mentor-profile .card-header .right > img {
/*    height: 100%;*/
    height: 306px;
  }
  .mentor-profile .card-header .left > p {
    font-size: 24px;
  }
  .mentor-profile .card-header .play-btn button {
    height: 50px;
    width: 50px;
  }
  .mentor-profile .card-body {
    padding-top: 10px;
  }
  .mentor-profile .card-body .companies img {
    height: 40.5px;
  }
  .mentor-profile .card-body .title .meta-tags .lable {
    padding: 5px 18px;
  }  
  .mentor-profile .card-body .lable p {
    font-weight: 500;
  }  
  .mentor-profile .card-body p {
    margin-top: 0;
    font-size: 18px;
  }
  .hiring-organization .owl-carousel {
	padding: 25px 20px;
  }
  .hiring-organization .head {
	font-size: 14px;
  }
}
@media (min-width: 992px){
  /*.mentor-profile .card {
    height: 306px;
  }*/
  .mentor-profile .card-header .left > p {
    font-size: 27px;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .mentor-profile .card-header {
    min-width: 55% !important;
  }
}
/* / BSR -19-04-2024 */
/* BSR -08-07-2024 */
.products_slide:hover p {
    color: #76787a;
  }
  .projectsnewbg .owl-carousel .item {
    padding-top: 33px !important;
  }
  .projectsnewbg-bottom .owl-nav {
    display: block !important;
  }
  .projectsnewbg-bottom .owl-dots {
    display: none !important;
  }
  .projectsnewbg-bottom .owl-nav .owl-prev {
    border-radius: 10px 0 0 10px;
  }
  .projectsnewbg-bottom .owl-nav .owl-next {
    border-radius: 0 10px 10px 0;
  }
  
  .project-item-slide {
    background: unset !important;
    border: 1px solid #0d4a9b;
    max-width: 330px;
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 40px 29px;
  }
  .project-item-slide .card-title {
    position: absolute;
    display: flex;
    width: 100%;
    justify-content: center;
    top: -22px;
    left: 0;
  }
  .project-item-slide .card-title.multiline {
    top: -33px;
  }
  .project-item-slide .card-title > p {
    width: 63%;
    background-color: #0d4a9b;
    color: white;
    padding: 9px 24px;
    border-radius: 500px;
  }
  .project-item-slide > h5 {
    font-weight: 500;
    font-size: 18px;
    line-height: 24px;
  }
  .project-item-slide > p {
    font-size: 17px;
    line-height: 24px;
  }
  .project-item-slide .techs {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 1fr;
  }
  .project-item-slide .techs p {
    color: unset;
    border: 1px solid #0d4a9b;
    border-radius: 50px;
    padding: 5px 0;
  }
  .owl-carousel .owl-nav > button[type="button"] {
    background-color: #0d4a9b !important;
    margin: 0 !important;
    padding: 0 11px !important;
  }
  .owl-carousel .owl-nav > button.disabled {
    opacity: unset !important;
  }
  .owl-carousel .owl-nav button span {
    color: white;
    font-size: 52px;
    line-height: 0.7;
    font-weight: 200;
  }
  @media only screen and (min-width: 768px) {
    .projectsnewbg-bottom .owl-next {
      position: unset;
      top: unset;
      transform: unset;
      font-size: unset;
      border: unset;
      background-color: unset;
      color: unset;
    }
  }
  /* / BSR -08-07-2024 */

  /* BSR -27-08-2024 */
.fs-6 {
    font-size: 13px !important;
}
.fw-bold {
    font-weight: 700 !important;
}
.text-start {
    text-align: left !important;
}
.me-1 {
    margin-right: .25rem !important;
}
.align-self-stretch {
    align-self: stretch !important;
}
@media (min-width: 460px) {
    .fs-6 {
        font-size: 16px !important;
    }
}

/* table-heading */
.comparison-with-other .head, .comparison-with-other .head > p {
    font-size: 25px !important;
}
.comparison-with-other .head > p {
    color: rgb(13, 74, 155);
}
/* -/- table-heading */
.comparison-with-other .table-heading {
    border-top-left-radius: 1rem !important;
    border-top-right-radius: 1rem !important;
}
.comparison-with-other .table-bottom {
    border-bottom-left-radius: .5rem !important;
    border-bottom-right-radius: .5rem !important;
}
.comparison-with-other .table-heading-blue {
    background-color: #0d4a9b;
    color: #fff;
}
.comparison-with-other .table-heading-gray {
    background: #EEEEEE;
}
.comparison-with-other .data-row-1 {
    background-color: #fafafa;
    border-top-left-radius: .5rem;
}
.comparison-with-other .row-white {
    background-color: #fafafa;
}
.comparison-with-other .row-slate {
    background-color: #eeeeee;
}
.comparison-with-other .border-col-primary {
    border-color: #9868ef !important;
    border-width: 3px !important;
    border-left: 3px solid #0d4a9b !important;
    border-right: 3px solid #0d4a9b !important;
}
.comparison-with-other .table-bottom .border-col-primary {
    border-bottom: 3px solid #0d4a9b !important;
    border-bottom-left-radius: 1rem !important;
    border-bottom-right-radius: 1rem !important;
}
.comparison-with-other .table-txt-icon > p {
    margin: unset;
    font-size: 13px;
    text-align: left;
}

/* Review Section */
.whatpeoplesaybg .desktop-menu-version {
    width: 100%;
}
.whatpeoplesaybg .desktop-menu-version .btn:focus {
    box-shadow: none !important;
}
.whatpeoplesaybg .desktop-menu-version .btn {
    font-size: 16px;
    font-weight: 700;
    padding: 0 20px;
}
.whatpeoplesaybg .desktop-menu-version .btn.active {
    color: #0d4a9b !important;
}
.whatpeoplesaybg .desktop-menu-version .position-relative:not(:last-child) {
    border-right: 1px solid #c5c5c5 !important;
}
@media only screen and (min-width: 600px) {
    .whatpeoplesaybg .desktop-menu-version .btn.active:after {
        background-color: #fff;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 10px solid #0d4a9b;
        bottom: -60%;
        content: "";
        height: 0;
        left: 50%;
        position: absolute;
        transform: translateX(-50%);
        transition: .3s ease-in;
        width: 0;
    }
}


.whatpeoplesaybg .btn.btn-outline-primary {
    border-color: #0d4a9b !important;
    color: #0d4a9b !important;
    box-shadow: none !important;
}
.whatpeoplesaybg .btn.btn-outline-primary:hover {
    background-color: #0d4a9b !important;
    color: #fff !important;
    box-shadow: none !important;
}
.whatpeoplesaybg .btn.btn-outline-primary:focus {
    box-shadow: none !important;
}
.whatpeoplesaybg .btn.btn-outline-primary.active {
    background-color: #0d4a9b !important;
    color: #fff !important;
}
.whatpeoplesaybox {
    border: 1px solid #0d4a9b;
    box-shadow: none;
}
.whatpeoplesaybox .card-sub-title {
    width: 100%;
    position: absolute;
    display: flex;
    justify-content: center;
    top: -22px;
    left: 0;
}
.whatpeoplesaybox .card-sub-title > p {
    width: 50%;
    background-color: #0d4a9b;
    color: white;
    padding: 9px 24px;
    border-radius: 500px;
}
.whatpeoplesaybox img.profile-pic {
    width: 85px !important;
    height: 85px !important;
    padding: 5px;
    border-radius: 50%;
    box-shadow: 0 0 5px #ccc;
    margin-right: 15px;
}
.whatpeoplesaybox .linkdin-img {
    bottom: 30px;
    right: -10px;
}

.whatpeoplesaybox h3 {
    font-weight: 700;
    font-size: 20px;
}
.whatpeoplesaybox h4 {
    min-height: 35px;
}
.whatpeoplesaybox .description {
    border-width: 3px !important;
    border-color: #395ca3 !important;
}
/* -/- Review Section */

/* Certificate Section */
.certificate-companies .tabs .btn {
    box-shadow: unset !important;
}
.certificate-companies .tabs .btn h3 {
    font-size: 24px;
    font-weight: 600;
}
.certificate-companies .tabs .btn h3.active {
    color: #0d4a9b !important;
    text-decoration: underline;
    text-underline-offset: 15px;
}
.certificate-companies .card-wrapper .features picture {
    min-width: 35px;
    width: 35px;
}
.certificate-companies .card-wrapper .features picture img {
    width: 100%;
}
.certificate-companies .card-wrapper .features h4 {
    font-size: 20px;
    font-weight: 600;
}
.certificate-companies .card-wrapper .img-section {
    gap: 10px;
}
.certificate-companies .card-wrapper .img-section .click-btn {
    gap: 5px;
}
.certificate-companies .card-wrapper .img-section .click-btn picture {
    width: 15px;
}
.certificate-companies .card-wrapper .img-section .click-btn p {
    margin: unset;
    cursor: pointer;
    margin-top: 5px;
}
.certificate-companies .card-wrapper .btn {
    color: #fff;
    font-weight: 600;
    background-color: #dc3545;
    border-radius: 9px;
    padding: 10px 13px;
}
.certificate-companies .card-wrapper .btn.filled-light {
    color: #dc3545;
    background-color: #ffeaec;
    border: 1px solid #dc3545;
}
.video-youtube-popup.certificate-companies .wrapper {
    border-radius: unset !important;
    padding: 4px;
    background: unset !important;
}
.video-youtube-popup.certificate-companies .wrapper {
    border-radius: unset !important;
    padding: 4px;
    background: unset !important;
}
.video-youtube-popup.certificate-companies .close-btn {
    color: black;
    background: transparent !important;
    right: 23px;
    top: 5px;
    width: 20px;
}
/* -/- Certificate Section */

/* CareerServices Section */
.careerservices-new {
    color: #fff;
    background-color: #000;
}
.careerservices-new .title {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.9;
}
.careerservices-new .title > b {
    color: #ffe500;
    text-decoration: underline;
    text-underline-offset: 13px;
    top: -15px;
}
.careerservices-new .sub-title {
    font-size: 14px;
    font-weight: 400;
    color: white;
}
.careerservices-new .circle-wrapper {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background-color: #ffe500;
}
.careerservices-new .circle-wrapper span {
    font-size: 24px;
    font-weight: 600;
    color: #000;
}
.careerservices-new .line-gradient {
    width: 2px;
    height: 98%;
    background: linear-gradient(0deg, #1a1a1a, #1a1a1a 15%, #ecd615 70%, #ffe500);
}
.careerservices-new .end-point {
    width: 18px;
    height: 18px;
    border-radius: 18px;
    background:#ffe500;
}
.careerservices-new .right {
    padding-bottom: 35px;
}
.careerservices-new .right h3 {
    margin-bottom: 54px;
}
.careerservices-new .right h3.view {
    margin-bottom: 5px;
}

.careerservices-new .right .card-wrapper-outer {
    padding: 13px;
}
.careerservices-new .right .card-wrapper {
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0);
    background: linear-gradient(#1a1a1a, #1a1a1a) padding-box, linear-gradient(145deg, hsla(0, 0%, 100%, .4), #292929) border-box;
    border: 1px solid transparent;
    border-radius: 9px;
    padding: 36px !important;
}
.careerservices-new .right .card-wrapper img {
    height: 60px;
    width: 60px;
}
.careerservices-new .right .card-wrapper > h4 {
    font-size: 17px;
    font-weight: 500;
    margin-top: 8px;
    margin-bottom: 4px;
}
.careerservices-new .right .card-wrapper > p {
    font-size: 13px;
    font-weight: 400;
    color: gray;
}
.careerservices-new .right .heading  h3 {
    font-size: 21px !important;
    font-weight: 500 !important;
}
.careerservices-new .right .heading img {
    bottom: -15px;
    left: 0;
    fill: yellow !important;
}
.careerservices-new .companies .companies-wrapper {
    padding: 12px;
    border: 1px solid transparent;
    background: linear-gradient(hsla(0, 0%, 100%, .3), transparent) padding-box, linear-gradient(145deg, hsla(0, 0%, 100%, .1), hsla(0, 0%, 100%, .1)) border-box;
    border-radius: 18px;
} 

.careerservices-new .companies .companies-wrapper img {
    width: 80px;
}
.careerservices-new .companies .companies-wrapper .col-3 {
    flex: 0 0 20% !important;
} 
.careerservices-new .right .meta-section > p {
    margin-top: 45px;
    font-size: 15px;
    font-weight: 400;

}
.careerservices-new .right .meta-section > a {
    margin-top: 50px;
    font-size: 14px;
    font-weight: 600;
    color: #000;
    background-color: #ffe500;
    border-radius: 9px;
    padding: 10px 16px;
    white-space: nowrap;
}
.careerservices-new .right .card-wrapper {
    height: 100%;
    width: 100%;
    border: 1px solid transparent;
    border-radius: 9px;
    padding: 20px !important;
}
.careerservices-new .curriculum .right .inner-left {
    display: flex;
    flex-direction: column;
    gap: 15px;
    color: #fff;
}
.careerservices-new .curriculum .right .inner-left .card-wrapper {
    height: auto;
    padding: 16px 0 !important;
    background: unset;
    cursor: pointer;
}
.careerservices-new .curriculum .right .inner-left .card-wrapper .icon  {
    padding: unset;
    max-width: 20px;
}
.careerservices-new .curriculum .right .inner-left .card-wrapper:hover {
    color: white;
    background-color: rgba(0, 0, 0, 0);
    background: linear-gradient(#1a1a1a, #1a1a1a) padding-box, linear-gradient(145deg, hsla(0, 0%, 100%, .4), #292929) border-box;
}
.careerservices-new .curriculum .right .inner-left .row {
    margin: unset !important;
}
.careerservices-new .curriculum .right .inner-left .number {
    font-size: 16px;
    font-weight: 500;
    color: #ffe500;
}
.careerservices-new .curriculum .right .inner-left .content h4 {
    font-size: 16px;
    font-weight: 600;
}
.careerservices-new .curriculum .right .inner-left .content p {
    font-size: 12px;
    font-weight: 400;
    margin-bottom: unset !important;
}
.careerservices-new .curriculum .right .topic-details ul {
    padding-left: 1px;
    min-height: 40px;
    max-height: 1500px;
    
}



.careerservices-new .curriculum .right .topic-details ul li {
    
    list-style-type: disc;
    font-weight: 500;
    font-size: 14px;

position: relative;
list-style: none;
color: #fff;
font-size: 12px;
font-family: "Inter", sans-serif;
font-weight: 500;
padding: 0 0 10px 25px;
}


.careerservices-new .curriculum .right .topic-details ul li::before {
    content: "";
  height: 8px;
  width: 8px;
  border-radius: 50%;
  position: absolute;
  background-color: #ffe501;
  top: 5px;
  left: 0;

}

.careerservices-new .curriculum .right .topic-details ul li::after {
    content: "";
  border: dotted 1px #000;
  height: 100%;
  width: 1px;
  position: absolute;
  bottom: -9px;
  left: 3px;
}
.careerservices-new .curriculum .right .topic-details .test ul li::after {
    content: "";
     border: dotted 1px #ffe501;
  height: 100%;
  width: 1px;
  position: absolute;
  bottom: -9px;
  left: 3px;
}

.careerservices-new .curriculum .right .topic-details .test ul li:last-child::after {
    border: none;  /* or set content to none to remove the pseudo-element entirely */
    content: none; /* Optionally remove content */
  }


.careerservices-new .curriculum .right .topic-details.card-wrapper-outer {
    background-color: rgb(26, 26, 26);
    border-radius: 9px;
    padding: 2px 1px 1px;
    color: white;
}


.careerservices-new .curriculum .right .topic-details .title {
    font-size: 17px;
    font-weight: 500;
}
.careerservices-new .curriculum .topic-details .sub-title,
.careerservices-new .curriculum .topic-details .sub-title h4,
.careerservices-new .curriculum .topic-details .sub-title p {
    margin: unset !important;
}
.careerservices-new .curriculum .topic-details .sub-title h4 {
    font-size: 14px;
    color: white;
}
.careerservices-new .curriculum .right .topic-details .sub-title p {
    font-size: 13px;
    line-height: 1.2;
    color: #ffe500;
}
.careerservices-new .curriculum .right .topic-details .sub-title h4, .careerservices-new .curriculum .right .topic-details .sub-title p {
    font-weight: 400;
}
.careerservices-new .curriculum .right .topic-details .border-outline {
    height: 0.9px;
    background-color: rgb(43, 43, 43);
}
.careerservices-new .curriculum .right .topic-details .custom-scroll::-webkit-scrollbar {
    width: 3px;
}
.careerservices-new .curriculum .right .topic-details .custom-scroll::-webkit-scrollbar-thumb {
    border-radius: 50px;
    background-color: #4a4a4a;
}
.compare-tbl-green-img, .compare-tbl-red-svg {
    min-width: 11px;
    height: auto;
    margin-top: 4px;
    margin-right: 5px;
}
.compare-tbl-red-svg {
    width: 17px;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
  }
  
  .slider {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
  }
  
  .slider-track {
    display: flex;
    animation: scroll 20s linear infinite;
  }
  
  @keyframes scroll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }
  
  .slider-item {
    display: inline-block;
    padding: 10px;
  }
  
  .profile-card {
    background: #ffffff;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 150px;
  }
  
  .profile-image {
    border-radius: 50%;
    width: 80px;
    height: 80px;
    margin-bottom: 10px;
  }
  
  .profile-name {
    font-size: 1rem;
    font-weight: bold;
    color: #333;
  }
  
  .company-logo {
    margin-top: 10px;
    width: 60px;
    height: auto;
  }
  
  

@media (min-width: 320px) {
    /* certificate-companies */
    .certificate-companies .section-title h2 {
        font-size: 24px;
        font-weight: 800;
    }
    .certificate-companies .section-title h2 > b {
        color: #9769ef;
        display: block;
    }
    .certificate-companies .section-title p {
        font-size: 14px;
    }
    .certificate-companies .tabs {
        gap: 20px;
    }
    .certificate-companies .tabs .btn h3 {
        font-size: 15px;
        display: inline;
    }
    .certificate-companies .tabs .btn.active h3 {
        color: #ff0000;
    }
    .certificate-companies .tabs .btn.active {
        text-decoration: none !important;
        border-radius: unset !important;
        border-bottom: 2px solid #ff0000;
    }
    .certificate-companies .tabs .btn {
        padding: unset !important;
        padding-right: 5px;
    }
    .certificate-companies .card-wrapper .features h4 {
        font-size: 14px;
        line-height: 1.6;
    }
    .certificate-companies .card-wrapper .features p {
        font-size: 14px;
    }
    .certificate-companies .card-wrapper .btn {
        padding: 8px 10px;
        font-size: 12px;
    }
    #scrollble-ul-page {
        display: flex;
        overflow-x: auto;
        scroll-behavior: smooth;
      }
    /* -/- certificate-companies */

    .careerservices-new .curriculum .left,
    .careerservices-new .requirement .left,
    .careerservices-new .services .left,
    .careerservices-new .companies .left {
        padding: unset !important;
    }
    .careerservices-new .curriculum .right .inner-left .number {
        padding: unset !important;
        padding-left: 5px !important;
    }
    .careerservices-new .curriculum .right .inner-left .content {
        padding: 0px 10px !important;
    }
    .careerservices-new .curriculum .right .inner-left .content h4 {
        font-size: 15px !important;
    }
    .careerservices-new .curriculum .right .inner-left .content p {
        font-size: 14px !important;
    }
    .careerservices-new .curriculum .right .inner-left .card-wrapper .icon {
        max-width: 15px !important;
    }
}
@media (min-width: 767px) {
    .certificate-companies .section-title h2 {
        font-size: 32px;
    }
    .certificate-companies .section-title p {
        font-size: 15px;
    }
    .certificate-companies .tabs .btn h3 {
        font-size: 24px;
    }
    .certificate-companies .card-wrapper .features picture {
        min-width: 40px;
        width: 40px;
    }
    .certificate-companies .card-wrapper .features h4 {
        font-size: 19px;
    }
    .certificate-companies .card-wrapper .features p {
        font-size: 14px;
        word-spacing: 2px;
    }
    .certificate-companies .card-wrapper .btn {
        font-size: 16px;
    }

    .curriculum {
        width: 100% !important;
    }
    .careerservices-new .right {
        padding-bottom: 25px;
    }
    .careerservices-new .title {
        font-size: 36px;
        font-weight: 700;
    }
    .careerservices-new .title > b {
        top: unset;
    }
    .careerservices-new .sub-title {
        font-size: 14px;
        font-weight: 400;
        margin-bottom: 35px;
    }
    .careerservices-new .right .heading h3 {
        font-size: 28px !important;
    }
    .careerservices-new .right .card-wrapper > h4 {
        font-size: 19px;
        font-weight: 600;
    }
    .careerservices-new .right .card-wrapper > p {    
        font-size: 15px;
    }
    .careerservices-new .right .meta-section > a {
        font-size: 16px;
        font-weight: 700;
        padding: 14px 18px;
    }
    .careerservices-new .companies .companies-wrapper {
        padding: 20px;
    }
    .careerservices-new .right .meta-section > p {
        font-size: 19px;
    }
    .careerservices-new .curriculum .right .inner-left .number {
        font-size: 20px;
        font-weight: 600;
        color: #ffe500;
    }
    .careerservices-new .curriculum .right .inner-left .content h4 {
        font-size: 18px;
        font-weight: 600;
    }
    .careerservices-new .curriculum .right .inner-left .content p {
        font-size: 14px;
    }
    .careerservices-new .curriculum .right .inner-right .card-wrapper-outer {
        padding: 32px 32px 36px;
    }
    .careerservices-new .curriculum .right .inner-right .title {
        font-size: 20px;
        font-weight: 500;
    }
    .careerservices-new .curriculum .right .inner-right .sub-title p {
        font-size: 15px;
    }
    .careerservices-new .curriculum .right .inner-right .card-wrapper-outer {
        padding: 32px 18px 36px;
    }
    .careerservices-new .curriculum .right .inner-right ul {
        padding-left: 35px;
    }
    .careerservices-new .curriculum .right .inner-right ul li {
        font-size: 14px;
    }
    .careerservices-new .companies .companies-wrapper img {
        width: 100px;
    }
    .compare-tbl-green-img, .compare-tbl-red-svg {
        min-width: 13px;
        max-width: 13px;
        margin-top: 4px;
        margin-right: 10px !important;
    }
    .compare-tbl-red-svg {
        min-width: 15px;
    }
    .comparison-with-other .table-txt-icon > p {
        font-size: 16px;
    }
}

@media (min-width: 768px) and (max-width: 960px){
    .careerservices-new .title {
        font-size: 30px;
    }
    .careerservices-new .right .card-wrapper {
        padding: 22px !important;
    }
    .careerservices-new .right .card-wrapper > h4 {
        font-size: 17px;
    }
    .careerservices-new .right .card-wrapper > p {
        font-size: 13px;
    }
    .careerservices-new .curriculum .right .inner-left .card-wrapper .icon {
        max-width: 17px;
    }
    .careerservices-new .curriculum .right .inner-right .card-wrapper-outer {
        padding: 20px 18px 25px;
    }
    .careerservices-new .curriculum .right .inner-right .title {
        font-size: 18px;
    }
    .careerservices-new .curriculum .topic-details .sub-title h4 {
        font-size: 13px;
    }
    .careerservices-new .curriculum .right .inner-right .sub-title p {
        font-size: 14px;
    }
    .careerservices-new .curriculum .right .inner-right ul {
        padding-left: 22px;
    }
    .careerservices-new .curriculum .right .inner-right ul li {
        font-size: 15px;
    }
}
@media (min-width: 1200px) {
    .certificate-companies .card-wrapper .features {
        margin: 40px 0;
    }
    .certificate-companies .card-wrapper .features h4 {
        font-size: 21px;
    }
    .certificate-companies .card-wrapper .features p {
        font-size: 15px;
    }
    .certificate-companies .card-wrapper .btn {
        font-size: 18px;
        padding: 11px 10px;
    }
}
/* -/- CareerServices Section */

@media (max-width: 768px) {
    .footer {
      background-color: #4a148c;
      color: white;
      padding: 40px 20px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 30px;
    }
  }

  @media (min-width: 768px) {
    .footer {
      background-color: #4a148c;
      color: white;
      padding: 40px 20px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 30px;
    }
  }
  
  @media (max-width: 768px) {
    .footer-section {
      flex: 1;
      min-width: 250px;
    }
  }
  
  @media (max-width: 768px) {
    .footer {
      color: white;
    }
  }
  
  @media (max-width: 768px) {
    .footer-section h3 {
      font-size: 18px;
      margin-bottom: 15px;
      border-bottom: 2px solid #ffcc00;
      display: inline-block;
      padding-bottom: 5px;
    }
  }
  
  @media only screen and (max-width: 479px) {
    .demandstrip h3 {
      text-align: center;
    }
  }
  
  .demandstrip h3 {
    width: 100%;
    font-size: 14px;
    color: #0d4a9b;
    margin: 0px 0px 10px;
      margin-bottom: 10px;
    font-weight: 600;
    float: left;
  }
  
  @media (max-width: 768px) {
    .footer-section p, .footer-section ul {
      font-size: 14px;
      line-height: 1.8;
      margin: 0;
      padding: 0;
      list-style: none;
    }
  }
  
  @media only screen and (max-width: 479px) {
    .testnametxt h4, p {
      text-align: center;
      width: 100%;
    }
  }
  
  @media (max-width: 768px) {
    .social-icons {
      display: flex;
      gap: 10px;
      margin-top: 10px;
    }
  }
  
  @media (max-width: 768px) {
    .footer-bottom {
      background-color: #311b92;
      color: #ddd;
      text-align: center;
      padding: 10px 20px;
      font-size: 14px;
    }
  }

  @media (min-width: 768px) {
    .footer-bottom {
      background-color: #311b92;
      color: #ddd;
      text-align: center;
      padding: 10px 20px;
      font-size: 14px;
    }
  }
  /* / BSR -27-08-2024 */
  .top-bar {
    background-color: #f8f9fa;
    padding: 10px 0;
    font-size: 14px;
    border-bottom: 1px solid #ddd;
}

.top-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-bar .contact-info {
    display: flex;
    gap: 55px;
    color: #333;
}

.top-bar .contact-info i {
    margin-right: 5px;
    color: #007bff;
}

.top-bar .top-links a {
    margin-left: 15px;
    color: #007bff;
    text-decoration: none;
}

.top-bar .top-links a:hover {
    text-decoration: underline;
}
.faq-section {
    text-align: center;
    padding: 20px;
    background-color: #f8f9fa;
    font-family: Arial, sans-serif;
  }
  @media only screen and (max-width: 768px) {
    .faq-buttons button {
      flex: 1 1 auto;
      min-width: 90px;
      padding: 8px 12px;
    }
  }
  
  .faq-section {
    text-align: center;
    font-family: Arial, sans-serif;
  }
  
  .faq-buttons button {
    font-size: 16px;
    font-weight: bold;
    padding: 10px 18px;
    border: 2px solid #ccc;
    border-radius: 50px;
    background-color: transparent;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 120px;
  }
  
  @media (max-width: 768px) {
    .faq-container {
      padding: 0 15px;
    }
  }
  .faq-container {
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
  }
  
  element {
    display: block;
  
  }
 
  
  
  .faq-section {
    text-align: center;
    font-family: Arial, sans-serif;
  }
  @media (max-width: 768px) {
    .faq-item {
      border-radius: 8px;
      padding: 10px 15px;
    }
  }
  .faq-item {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    margin-bottom: 15px;
    padding: 15px 20px;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
  }
  
  
  .faq-item:hover {
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
  }
  .faq-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 30px;
  }
  .faq-section .faq-question {
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    float: none;
  }
  .demandstrip h3 {
    width: 100%;
    font-size: 14px;
    color: #0d4a9b;
    margin: 0px 0px 10px;
    font-weight: 600;
    float: left;
  }
  .faq-section .faq-question span.faq-toggle {
    font-size: 20px;
    font-weight: bold;
    color: #007bff;
    margin-left: auto;
  }
  .faq-item.active .faq-answer {
    display: block;
  }
  .faq-section p {
    font-size: 16px;
    color: #6c757d;
    margin-bottom: 30px;
  }
  .faq-answer {
    font-size: 16px;
    color: #6c757d;
    margin-top: 10px;
    display: none;
    text-align: left;
  }
  .faq-heading {
    font-size: 50px; /* Default for desktop */
    
    font-family: "DM Serif Display", serif;
  }
  
  @media (max-width: 768px) {
    .faq-heading {
      font-size: 32px; /* Smaller size for mobile */
      
      font-family: "DM Serif Display", serif;
    }
  }
/*-------*/

.who-should-join {
    background-color: #fefcf8;
    padding: 40px 20px;
    text-align: center;
    font-family: 'Inter', sans-serif;
  }
  
  .title {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 40px;
    color: #000;
  }
  
  .join-cards {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
    flex-wrap: wrap;
  }
  
  .join-card {
    max-width: 280px;
    text-align: center;
    padding: 0 10px;
  }
  
  .icon {
    width: 60px;
    height: 60px;
    margin-bottom: 16px;
  }
  
  .join-card h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 16px;
    color: #000;
  }
  
  .join-card ul {
    list-style-type: disc;
    margin: 0;
    padding-left: 20px;
    text-align: left;
    font-size: 16px;
    color: #333;
    line-height: 1.8;
  }
  
  .join-card ul li {
    list-style-type: disc !important;
    display: list-item !important;
  }
  
  .divider {
    width: 1px;
    height: auto;
    background-color: #e0e0e0;
  }
 /*-----------*/
 .career-outcomes {
    background-color: #ffffff;
    padding: 40px 20px;
    font-family: 'Inter', sans-serif;
    text-align: center;
  }
  
  .career-outcomes h2 {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 40px;
  }
  
  .career-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
  }
  
  .career-card {
    max-width: 450px;
 
  padding: 24px;
  background-color: #fff;
  border-radius: 12px;
  text-align: center;
  font-family: "Inter", sans-serif;
  }
  
  .career-card h3 {
    font-size: 22px;
  font-weight: 600;
  margin-bottom: 24px;
  line-height: 1.5;
  }
  
  .companies {
    font-size: 22px;
  font-weight: 600;
  margin-bottom: 24px;
  line-height: 1.5;
  }
  
  .companies img {
    width: 100px;
    height: auto;
  }
  
  .salary-chart {
    position: relative;
  width: 250px;
  height: 250px;
  margin: 0 auto 24px auto;
  }
  
  .center-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .growth-label {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: #f5f5f5;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 18px;
    font-weight: 600;
    color: #333;
  }
  
  .salary-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 16px;
    font-size: 18px;
    gap: 6px;
  }
  
  .salary-details div {
    display: flex;
    gap: 10px;
    align-items: center;
  }
  
  .salary-details .tag {
    background: #007bff;
    color: white;
    border-radius: 8px;
    padding: 6px 10px;
    font-weight: 500;
  }
  
  .salary-details .tag-green {
    background: #2cb88d;
  }
  
  .skill-icons {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
  }
  .icon-block {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .icon-block img {
    width: 40px;
    height: 40px;
    margin-bottom: 6px;
  }
  
  .icon-block p {
    font-size: 14px;
    margin: 0;
    color: #000;
    text-align: center;
    line-height: 1.3;
  }
  
  .skill-icons img {
    width: 40px;
    height: auto;
  }
  .mini-bar-wrapper {
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px solid #eee;
  }
  
  .mini-bar-wrapper h4 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
    line-height: 1.3;
  }

  .timeline-container {
    background-color: #fffdf9;
    min-height: 100vh;
    padding: 2rem;
    text-align: center;
  }
  
  .timeline-wrapper {
    display: flex;
  flex-wrap: nowrap; /* <-- no wrapping */
  overflow-x: auto; /* <-- enable horizontal scroll */
  scroll-snap-type: x mandatory; /* optional for smoother scrolling */
  gap: 2rem;
  padding-bottom: 1rem; /* extra padding for mobile thumb */
  }

  .timeline-wrapper::-webkit-scrollbar {
    display: none; /* optional: hide scrollbar for clean look */
  }
  
  .timeline-item {
    flex: 0 0 auto; /* important! don't shrink */
  scroll-snap-align: start; /* clean scroll snapping */
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 140px;
  }
  
  .timeline-icon {
    font-size: 48px; /* Larger icon size for better visibility */
    line-height: 1;
  }
  
  .timeline-month {
    font-size: 16px;
  font-weight: 700;
  color: #0a4e86;
  margin-top: 10px;
  }
  
  .timeline-title {
    font-size: 15px;
  color: #0a4e86;
  margin-top: 6px;
  line-height: 1.4;
  }
  
  .timeline-footer {
    margin-top: 40px;
    font-size: 18px;
    font-weight: bold;
    color: #0a4e86;
  }
  .timeline-box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 140px;
    text-align: center;
    padding-bottom: 20px;
  }
  
  .timeline-box:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 40px; /* center of icon vertically */
    left: 100%;
    height: 2px;
    width: 40px;
    background-color: #113264;
    z-index: 1;
  }
  @media (max-width: 768px) {
    .timeline-row {
      flex-direction: column;
      align-items: center;
    }
  
    .timeline-box:not(:last-child)::after {
      display: none;
    }
  }
  .timeline-section {
    background-color: #fffdf9;
    padding: 40px 20px;
    font-family: 'Helvetica Neue', sans-serif;
    color: #0a4e86;
    text-align: center;
  }
  .timeline-line {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
    gap: 40px;
  }
  .timeline-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 140px;
    position: relative;
  }
  .timeline-circle {
    background-color: #0a4e86;
  border-radius: 50%;
  width: 110px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease;
  }
  .timeline-circle:hover {
    transform: scale(1.05);
  }
  .timeline-block:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 40px;
    left: 100%;
    width: 40px;
    height: 2px;
    background-color: #0a4e86;
    margin-left: 10px;
  }
  .timeline-arrow {
    font-size: 24px;
    color: #0a4e86;
    margin-top: 12px;
  }
  .timeline-step {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .timeline-icon-img {
    width: 52px;
    height: 52px;
    object-fit: contain;
  }
  
 
   /* === Keyframes (ensure these are in your style.css) === */
@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    25% { transform: translateY(-15px) rotate(5deg); }
    50% { transform: translateY(-30px) rotate(0deg); }
    75% { transform: translateY(-15px) rotate(-5deg); }
  }
  @keyframes floatTech {
    0%, 100% { transform: translateY(0px) scale(1) rotate(0deg); }
    50% { transform: translateY(-20px) scale(1.1) rotate(180deg); }
  }
  @keyframes rotateRing {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.1); }
    100% { transform: rotate(360deg) scale(1); }
  }
  @keyframes pulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
  }
  @keyframes glow {
    0%, 100% { box-shadow: 0 0 15px currentColor; } /* Reduced glow for performance */
    50% { box-shadow: 0 0 25px currentColor, 0 0 35px currentColor; }
  }
  @keyframes slideInLeft {
    0% { transform: translateX(-80px); opacity: 0; } /* Reduced distance */
    100% { transform: translateX(0); opacity: 1; }
  }
  @keyframes slideInRight {
    0% { transform: translateX(80px); opacity: 0; } /* Reduced distance */
    100% { transform: translateX(0); opacity: 1; }
  }
  @keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
  @keyframes codeRain {
    0% { transform: translateY(-50vh); opacity: 0; } /* Adjusted for viewport height */
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(50vh); opacity: 0; }
  }
  @keyframes ping {
    75%, 100% { transform: scale(1.8); opacity: 0; } /* Slightly reduced scale */
  }
  @keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15%); } /* Reduced bounce height */
  }
  
  /* === DataScienceBanner Styles === */
  .banner {
    min-height: 100vh;
    background: linear-gradient(135deg, #1e3a8a 0%, #3730a3 25%, #581c87 50%, #7c2d12 75%, #1e3a8a 100%);
    position: relative;
    overflow: hidden;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: white;
    padding-top: 2rem; /* Add some padding at the top for mobile */
    padding-bottom: 2rem; /* Add some padding at the bottom for mobile */
  }
  
  .background-container {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    overflow: hidden;
  }
  
  .dynamic-gradient {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    transition: all 0.3s ease-out;
  }
  
  .particle {
    position: absolute;
    border-radius: 50%;
    animation-name: float; /* Link to keyframe name */
    animation-duration: 6s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
  }
  
  .floating-element {
    position: absolute;
    font-size: 1.5rem; /* Smaller for mobile */
    animation-name: floatTech;
    animation-duration: 8s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    opacity: 0.5; /* Slightly more subtle */
  }
  
  .geometric-pattern-1 {
    position: absolute; top: 15%; left: 5%;
    width: 60px; height: 60px; /* Smaller */
    border: 1px solid rgba(96, 165, 250, 0.2);
    border-radius: 50%;
    animation: rotateRing 20s linear infinite; /* Slower */
  }
  
  .geometric-pattern-2 {
    position: absolute; top: 65%; right: 10%;
    width: 50px; height: 50px; /* Smaller */
    background: linear-gradient(45deg, rgba(168, 85, 247, 0.1), transparent);
    transform: rotate(45deg);
    animation: pulse 5s ease-in-out infinite; /* Slower */
  }
  
  .geometric-pattern-3 {
    position: absolute; bottom: 15%; left: 8%;
    width: 80px; height: 2px; /* Thinner */
    background: linear-gradient(90deg, rgba(6, 182, 212, 0.3), transparent);
    animation: glow 4s ease-in-out infinite alternate;
  }
  
  .content1 {
    position: relative; z-index: 10;
    display: flex; flex-direction: column; /* Mobile first: stack */
    min-height: calc(100vh - 4rem); /* Adjust for banner padding */
    align-items: center;
    padding: 1rem; /* Mobile padding */
    box-sizing: border-box;
  }
  
  .left-content {
    flex: 1; width: 100%;
    max-width: 100%; 
    padding: 1rem 0; /* Vertical padding for mobile */
    display: flex; flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  
  .right-content {
    flex: 1; display: flex;
    justify-content: center; align-items: center;
    width: 100%;
    min-height: 250px; /* Min height for visual on mobile */
    margin-top: 1.5rem;
    overflow: hidden; /* Hide parts of visual if too big for mobile */
  }
  
  .breadcrumb1 {
    display: flex; align-items: center; gap: 0.3rem;
    margin-bottom: 0.8rem; color: #e0e0e0; font-size: 0.8rem;
  }
  .breadcrumb-item { cursor: pointer; transition: color 0.3s ease; }
  .breadcrumb-item:hover { color: white; }
  .breadcrumb-arrow { width: 0.8rem; height: 0.8rem; }
  .breadcrumb-current { color: #7dd3fc; }
  
  .badge-container { position: relative; display: inline-block; margin-bottom: 1rem; }
  .badge-glow { position: absolute; inset: -3px; background: linear-gradient(45deg, #f59e0b, #f97316); border-radius: 2rem; filter: blur(6px); opacity: 0.5; animation: pulse 2s ease-in-out infinite; }
  .badge { position: relative; background: linear-gradient(45deg, #f59e0b, #f97316); color: white; padding: 0.5rem 1rem; border-radius: 2rem; display: flex; align-items: center; gap: 0.4rem; font-weight: bold; font-size: 0.8rem; box-shadow: 0 5px 15px rgba(245, 158, 11, 0.2); }
  .badge-icon { width: 0.8rem; height: 0.8rem; fill: currentColor; }
  
  .rating-container { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-bottom: 1rem; }
  .review-text { font-size: 1rem; color: #e0e0e0; }
  .rating-number { font-size: 1.8rem; font-weight: bold; color: #fbbf24; }
  .stars-container { display: flex; gap: 0.15rem; }
  .star { width: 1rem; height: 1rem; color: #fbbf24; transition: transform 0.5s ease; }
  .ratings-link { color: #7dd3fc; text-decoration: underline; cursor: pointer; font-size: 0.8rem; transition: color 0.3s ease; }
  .ratings-link:hover { color: #bae6fd; }
  
  .title-container { margin-bottom: 1.5rem; }
  .title { font-size: 2.2rem; font-weight: 900; line-height: 1.2; margin-bottom: 0.5rem; }
  .title-line1 { display: block; background: linear-gradient(90deg, #ffffff, #e0e7ff, #ede9fe); -webkit-background-clip: text; background-clip: text; color: transparent; animation: pulse 3s ease-in-out infinite; }
  .title-line2 { display: block; background: linear-gradient(90deg, #60a5fa, #a78bfa, #22d3ee); background-size: 200% 200%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gradientShift 3s ease infinite; }
  .subtitle { font-size: 1rem; color: #d1d5db; line-height: 1.5; }
  
  .next-batch-container { position: relative; margin-bottom: 1.5rem; }
  .next-batch-glow { position: absolute; inset: -2px; background: linear-gradient(45deg, #3b82f6, #a855f7); border-radius: 0.8rem; filter: blur(5px); opacity: 0.3; animation: pulse 3s ease-in-out infinite; }
  .next-batch { position: relative; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 0.8rem; padding: 1rem; display: flex; align-items: center; gap: 0.8rem; cursor: pointer; transition: transform 0.3s ease; }
  .next-batch:hover { transform: scale(1.03); }
  .next-batch-icon { background: linear-gradient(45deg, #3b82f6, #a855f7); padding: 0.8rem; border-radius: 0.6rem; display: flex; align-items: center; justify-content: center; }
  .calendar-icon { width: 1.2rem; height: 1.2rem; color: white; }
  .next-batch-text { font-size: 1rem; font-weight: 600; color: white; }
  
  .features-container { margin-bottom: 1.5rem; width:100%; max-width: 450px; margin-left:auto; margin-right:auto; }
  .feature-item { display: flex; align-items: flex-start; gap: 0.8rem; margin-bottom: 0.8rem; transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
  .feature-item:hover .feature-text { color:white; }
  .feature-icon-container { position: relative; flex-shrink: 0; }
  .feature-icon-glow { position: absolute; inset: -3px; background: linear-gradient(45deg, #10b981, #059669); border-radius: 50%; filter: blur(3px); opacity: 0.5; }
  .feature-icon { position: relative; width: 1.2rem; height: 1.2rem; color: #10b981; background: rgba(16, 185, 129, 0.15); padding: 0.4rem; border-radius: 50%; }
  .feature-text { font-size: 0.9rem; color: #e0e0e0; line-height: 1.5; text-align: left; }
  
  .cta-container { position: relative; margin-bottom: 1.5rem; width: 100%; max-width: 400px; }
  .cta-glow { position: absolute; inset: -3px; background: linear-gradient(45deg, #fbbf24, #f59e0b, #f97316); border-radius: 0.8rem; filter: blur(6px); opacity: 0.6; animation: pulse 2s ease-in-out infinite; }
  .cta-button { position: relative; background: linear-gradient(45deg, #fbbf24, #f59e0b); color: #1f2937; padding: 0.9rem 1.5rem; border-radius: 0.8rem; border: none; font-size: 1rem; font-weight: bold; display: flex; align-items: center; gap: 0.7rem; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 10px 20px rgba(251, 191, 36, 0.25); width: 100%; justify-content: center; }
  .cta-button:hover { transform: scale(1.03); box-shadow: 0 15px 25px rgba(251, 191, 36, 0.35); }
  .cta-icon { width: 1.2rem; height: 1.2rem; animation: bounce 2s ease-in-out infinite; }
  .cta-arrow { width: 1.2rem; height: 1.2rem; transition: transform 0.3s ease; }
  .cta-button:hover .cta-arrow { transform: translateX(4px); }
  
  .description-container { margin-bottom: 1.5rem; }
  .description1 { font-size: 0.9rem; color: #d1d5db; line-height: 1.6; }
  
  .companies-container { width:100%; max-width:450px; margin-left:auto; margin-right:auto; }
  .companies-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 1rem; }
  .company-logo-item {
    font-size: 0.9rem; font-weight: bold; padding: 0.5rem; text-align: center;
    background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0.4rem;
    cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: glow 4s ease-in-out infinite alternate; /* Pulsing glow */
  }
  .company-logo-item:hover { transform: scale(1.15); box-shadow: 0 0 12px currentColor; }
  
  .visual-container {
    position: relative; width: 100%; max-width: 300px; /* Adjusted for mobile */
    height: auto; aspect-ratio: 1 / 1;
    transition: opacity 1s ease-out, transform 1s ease-out;
    margin: 0 auto; /* Center it */
  }
  .holo-display { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 120px; } /* Smaller */
  .holo-ring1 { position: absolute; inset: 0; border: 2px solid rgba(96, 165, 250, 0.5); border-radius: 50%; animation: rotateRing 10s linear infinite; }
  .holo-ring2 { position: absolute; inset: 12%; border: 1px solid rgba(168, 85, 247, 0.4); border-radius: 50%; animation: rotateRing 8s linear infinite reverse; }
  .holo-ring3 { position: absolute; inset: 24%; border: 1px solid rgba(6, 182, 212, 0.3); border-radius: 50%; animation: rotateRing 6s linear infinite; }
  .holo-core { position: absolute; inset: 36%; background: radial-gradient(circle, rgba(96, 165, 250, 0.2), rgba(168, 85, 247, 0.15)); border-radius: 50%; display: flex; align-items: center; justify-content: center; animation: pulse 3s ease-in-out infinite; }
  .holo-center-icon { font-size: 1.8rem; animation: bounce 2s ease-in-out infinite; }
  
  .data-point { position: absolute; font-size: 1.2rem; animation: floatTech 5s ease-in-out infinite; opacity: 0.7; }
  .data-point-1 { top: 10%; right: 15%; animation-delay: 0s; }
  .data-point-2 { bottom: 10%; left: 10%; animation-delay: 1s; }
  .data-point-3 { top: 15%; left: 5%; animation-delay: 2s; }
  .data-point-4 { bottom: 20%; right: 10%; animation-delay: 3s; }
  
  .hand-silhouette { position: absolute; bottom: 2%; right: 5%; width: 180px; height: 180px; opacity: 0.5; }
  .hand-svg { width: 100%; height: 100%; }
  .hand-path { animation: pulse 4s ease-in-out infinite; }
  .tech-dot-1, .tech-dot-2, .tech-dot-3 { animation-name: ping; animation-duration: 2s; animation-timing-function: cubic-bezier(0,0,0.2,1); animation-iteration-count: infinite;}
  .tech-dot-2 { animation-delay: 0.5s; }
  .tech-dot-3 { animation-delay: 1s; }
  .data-stream { animation: pulse 3s ease-in-out infinite; }
  
  .code-rain { position: absolute; top: 0; right: 2%; width: 70px; height: 100%; overflow: hidden; opacity: 0.15; }
  .code-column { position: absolute; color: #10b981; font-size: 0.7rem; animation-name: codeRain; animation-duration: 3s; animation-timing-function: linear; animation-iteration-count: infinite; writing-mode: vertical-rl; }
  
  /* Animation State Classes */
  .slide-in-left { animation-name: slideInLeft; animation-duration: 0.8s; animation-timing-function: ease-out; animation-fill-mode: forwards; }
  .slide-out-left { transform: translateX(-80px); opacity: 0; }
  .slide-in-right { animation-name: slideInRight; animation-duration: 1s; animation-timing-function: ease-out; animation-fill-mode: forwards; }
  .slide-out-right { transform: translateX(80px); opacity: 0; }
  
  .slide-in-left-delay-1 { animation-delay: 0.2s; opacity: 0; animation-name: slideInLeft; animation-duration: 0.8s; animation-timing-function: ease-out; animation-fill-mode: forwards; }
  .slide-in-left-delay-2 { animation-delay: 0.4s; opacity: 0; animation-name: slideInLeft; animation-duration: 0.8s; animation-timing-function: ease-out; animation-fill-mode: forwards; }
  .slide-in-left-delay-3 { animation-delay: 0.6s; opacity: 0; animation-name: slideInLeft; animation-duration: 0.8s; animation-timing-function: ease-out; animation-fill-mode: forwards; }
  .slide-in-left-delay-4 { animation-delay: 0.8s; opacity: 0; animation-name: slideInLeft; animation-duration: 0.8s; animation-timing-function: ease-out; animation-fill-mode: forwards; }
  .slide-in-left-delay-5 { animation-delay: 1.0s; opacity: 0; animation-name: slideInLeft; animation-duration: 0.8s; animation-timing-function: ease-out; animation-fill-mode: forwards; }
  .slide-in-left-delay-6 { animation-delay: 1.2s; opacity: 0; animation-name: slideInLeft; animation-duration: 0.8s; animation-timing-function: ease-out; animation-fill-mode: forwards; }
  .slide-in-left-delay-7 { animation-delay: 1.4s; opacity: 0; animation-name: slideInLeft; animation-duration: 0.8s; animation-timing-function: ease-out; animation-fill-mode: forwards; }
  .slide-in-left-delay-8 { animation-delay: 1.6s; opacity: 0; animation-name: slideInLeft; animation-duration: 0.8s; animation-timing-function: ease-out; animation-fill-mode: forwards; }
  
  /* Desktop and larger screen adjustments */
  @media (min-width: 768px) {
    .banner { padding-top: 0; padding-bottom: 0; }
    .content1 {
      flex-direction: row;
      padding: 0 2rem; /* Restore padding for larger screens */
      align-items: center; /* Align items to center for row layout */
    }
    .left-content {
      max-width: 50%; /* Limit width of left content */
      padding: 2rem;  /* Restore padding */
      align-items: flex-start; /* Align text to start */
      text-align: left;
    }
    .right-content {
      margin-top: 0;
      min-height: auto;
      justify-content: center; /* Center visual content */
    }
  
    .floating-element { font-size: 2rem; }
    .geometric-pattern-1 { width: 100px; height: 100px; }
    .visual-container { max-width: 500px; } /* Slightly smaller for better balance */
    .holo-display { width: 180px; height: 180px; }
    .holo-center-icon { font-size: 2.5rem; }
    .data-point { font-size: 1.8rem; }
    .hand-silhouette { width: 250px; height: 250px; }
    .code-rain { width: 90px; opacity: 0.2; }
    .code-column { font-size: 0.75rem; }
    
    .title { font-size: 3.5rem; }
    .subtitle { font-size: 1.25rem; }
    .rating-number { font-size: 2.2rem; }
    .star { width: 1.25rem; height: 1.25rem; }
    .next-batch-text { font-size: 1.1rem; }
    .feature-text { font-size: 1rem; }
    .cta-button { padding: 1.2rem 2rem; font-size: 1.1rem; }
    .description { font-size: 1rem; }
    .companies-grid { grid-template-columns: repeat(3, 1fr); }
    .company-logo-item { font-size: 1rem; }
  }
  
  @media (min-width: 1024px) { /* Larger desktop adjustments */
    .left-content { max-width: 45%; padding: 3rem; } /* Give a bit more space */
    .right-content { justify-content: flex-end; } /* Push visual to the right */
    .visual-container { max-width: 600px; }
    .title { font-size: 4rem; }
    .subtitle { font-size: 1.5rem; }
    .holo-display { width: 200px; height: 200px; }
    .holo-center-icon { font-size: 3rem; }
    .data-point { font-size: 2rem; }
    .hand-silhouette { width: 300px; height: 300px; opacity: 0.7;}
    .code-rain { width: 100px; opacity: 0.3; }
    .code-column { font-size: 0.8rem; }
  }

  /*changes for course highlight */
  /* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.course-highlights-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #000000 100%);
  padding: 4rem 2rem;
  overflow: hidden;
  position: relative;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Smooth Background System */
.background-system {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.animated-grid {
  position: absolute;
  inset: 0;
  opacity: 0.2;
}

.grid-line-vertical {
  position: absolute;
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, rgba(59, 130, 246, 0.3), transparent);
  animation: gridPulse 4s ease-in-out infinite;
}

.grid-line-horizontal {
  position: absolute;
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(147, 51, 234, 0.3), transparent);
  animation: gridPulse 4s ease-in-out infinite;
}

.cosmic-elements {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cosmic-orb {
  position: absolute;
  border-radius: 50%;
  animation: cosmicFloat 6s ease-in-out infinite;
}

.cosmic-orb-1 {
  top: 5rem;
  left: 5rem;
  width: 1.5rem;
  height: 1.5rem;
  background: rgba(59, 130, 246, 0.2);
}

.cosmic-orb-2 {
  top: 8rem;
  right: 8rem;
  width: 1rem;
  height: 1rem;
  background: rgba(147, 51, 234, 0.3);
  animation-delay: 2s;
}

.cosmic-orb-3 {
  bottom: 10rem;
  left: 10rem;
  width: 2rem;
  height: 2rem;
  background: rgba(236, 72, 153, 0.15);
  animation-delay: 4s;
}

.cosmic-orb-4 {
  bottom: 5rem;
  right: 5rem;
  width: 1.25rem;
  height: 1.25rem;
  background: rgba(6, 182, 212, 0.25);
  animation-delay: 1s;
}

.orbital-ring {
  position: absolute;
  border: 1px solid rgba(59, 130, 246, 0.1);
  border-radius: 50%;
}

.orbital-ring-1 {
  top: 25%;
  left: 25%;
  width: 10rem;
  height: 10rem;
  animation: orbitalSlow 30s linear infinite;
}

.orbital-ring-2 {
  bottom: 25%;
  right: 25%;
  width: 8rem;
  height: 8rem;
  border-color: rgba(147, 51, 234, 0.1);
  animation: orbitalReverse 25s linear infinite;
}

.light-sweep {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), transparent, rgba(147, 51, 234, 0.05));
  animation: lightSweep 8s ease-in-out infinite;
}

/* Container and Layout */
.content-container {
  max-width: 112rem;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}

/* Header Styles */
.header-section {
  text-align: center;
  margin-bottom: 5rem;
  position: relative;
}

.header-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: linear-gradient(to right, rgba(59, 130, 246, 0.2), rgba(147, 51, 234, 0.2));
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  padding: 0.75rem 1.5rem;
  margin-bottom: 2rem;
  animation: badgeFloat 3s ease-in-out infinite;
}

.header-badge-text {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  font-size: 1rem;
}

.crown-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: #fbbf24;
  animation: crownGlow 2s ease-in-out infinite;
}

.sparkles-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: #60a5fa;
  animation: sparkleRotate 3s linear infinite;
}

.main-title {
  font-size: clamp(3rem, 8vw, 7rem);
  font-weight: 900;
  color: transparent;
  background: linear-gradient(to right, #ffffff, #dbeafe, #e9d5ff);
  background-clip: text;
  -webkit-background-clip: text;
  margin-bottom: 1.5rem;
  animation: titleGlow 4s ease-in-out infinite;
  line-height: 1.1;
}

.subtitle {
  font-size: 1.25rem;
  color: #d1d5db;
  max-width: 48rem;
  margin: 0 auto 2rem;
  line-height: 1.6;
  animation: subtitleFade 1s ease-out 0.5s both;
}

.title-underline {
  width: 12rem;
  height: 0.25rem;
  background: linear-gradient(to right, #3b82f6, #8b5cf6, #ec4899);
  border-radius: 9999px;
  margin: 0 auto;
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
  animation: underlineExpand 2s ease-out 1s both;
}

.floating-decoration {
  position: absolute;
  animation: decorationFloat 4s ease-in-out infinite;
}

.atom-decoration {
  top: -1rem;
  left: -3rem;
  width: 2rem;
  height: 2rem;
  color: rgba(59, 130, 246, 0.6);
}

.orbit-decoration {
  top: -2rem;
  right: -2rem;
  width: 1.5rem;
  height: 1.5rem;
  color: rgba(147, 51, 234, 0.6);
  animation-delay: 1s;
}

.rocket-decoration {
  top: 3rem;
  left: -2rem;
  width: 1.75rem;
  height: 1.75rem;
  color: rgba(236, 72, 153, 0.6);
  animation-delay: 2s;
}

/* Grid Layout */
.highlights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2.5rem;
}

@media (min-width: 768px) {
  .highlights-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .highlights-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
  }
}

@media (min-width: 1280px) {
  .highlights-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
/*course Highlight starts*/
.highlight-card {
  position: relative;
  cursor: pointer;
  height: 24rem;
  perspective: 3000px;
  animation: cardCosmicEntrance 1.5s cubic-bezier(0.23, 1, 0.32, 1) both;
}

.highlight-card.large {
  grid-column: span 2;
}

/*course Highlight starts*/
.highlight-card1 {
  position: relative;
  cursor: pointer;
  height: 12rem;
  perspective: 3000px;
  animation: cardCosmicEntrance 1.5s cubic-bezier(0.23, 1, 0.32, 1) both;
}

.highlight-card1.large {
  grid-column: span 2;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card-inner.flipped {
  transform: rotateY(180deg);
}

/* Card Front */
.card-front {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  background: linear-gradient(135deg, 
    rgba(17, 24, 39, 0.9), 
    rgba(31, 41, 55, 0.9), 
    rgba(17, 24, 39, 0.9)
  );
  backdrop-filter: blur(20px);
  border-radius: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card-front:hover {
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4), 
              0 0 0 1px rgba(255, 255, 255, 0.1),
              0 0 30px rgba(59, 130, 246, 0.3);
  transform: perspective(3000px) rotateX(-5deg) rotateY(5deg) translateZ(20px) scale(1.02);
}

.card-background-layers {
  position: absolute;
  inset: 0;
}

.background-gradient {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  transition: all 0.6s ease;
}

.highlight-card:hover .background-gradient {
  opacity: 0.1;
  animation: backgroundShift 5s ease-in-out infinite;
}

.particle-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.particle {
  position: absolute;
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 50%;
  opacity: 0.4;
  transition: all 0.3s ease;
}

.highlight-card:hover .particle {
  animation: particleFloat 4s ease-in-out infinite;
}

.geometric-overlay {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.geometric-shape {
  position: absolute;
  opacity: 0.05;
  transition: all 1s ease;
}

.highlight-card:hover .geometric-shape {
  opacity: 0.1;
}

.geometric-shape-1 {
  top: 0;
  right: 0;
  width: 8rem;
  height: 8rem;
  clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 30% 100%, 0% 70%);
}

.highlight-card:hover .geometric-shape-1 {
  animation: geometricMorph 4s ease-in-out infinite;
}

.geometric-shape-2 {
  bottom: 0;
  left: 0;
  width: 6rem;
  height: 6rem;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.highlight-card:hover .geometric-shape-2 {
  animation: geometricSpin 3s linear infinite;
}

.geometric-shape-3 {
  top: 50%;
  left: 50%;
  width: 4rem;
  height: 4rem;
  transform: translate(-50%, -50%);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.highlight-card:hover .geometric-shape-3 {
  animation: geometricPulse 2s ease-in-out infinite;
}

.neural-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.1;
  transition: opacity 0.6s ease;
}

.highlight-card:hover .neural-pattern {
  animation: neuralPulse 2s ease-in-out infinite;
}

.neural-line {
  position: absolute;
  width: 1px;
  height: 2rem;
  background: rgba(255, 255, 255, 0.3);
  animation: neuralLineActive 2s ease-in-out infinite;
}

/* Card Content */
.card-content {
  position: relative;
  z-index: 20;
  padding: 2rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.icon-container {
  position: relative;
  width: 4rem;
  height: 4rem;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.highlight-card:hover .icon-container {
  animation: iconCosmic 3s ease-in-out infinite;
}

.card-icon {
  width: 2rem;
  height: 2rem;
  color: white;
  position: relative;
  z-index: 10;
}

.icon-glow {
  position: absolute;
  inset: 0;
  border-radius: 1rem;
  opacity: 0.5;
  transition: all 0.6s ease;
}

.highlight-card:hover .icon-glow {
  animation: iconGlowPulse 1.5s ease-out infinite;
}

.icon-depth {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), transparent);
  border-radius: 1rem;
}

.icon-shadow {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 1rem;
  height: 1rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  transform: translate(0.5rem, 0.5rem);
  filter: blur(0.25rem);
}

.floating-decorations {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  opacity: 0;
  transition: all 0.3s ease;
}

.highlight-card:hover .floating-decorations {
  opacity: 1;
}

.floating-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  animation: floatingPulse 1s ease-in-out infinite;
}

.floating-dot-1 {
  background: #10b981;
}

.floating-dot-2 {
  background: #3b82f6;
  animation-delay: 0.2s;
}

.floating-dot-3 {
  background: #8b5cf6;
  animation-delay: 0.4s;
}

.number-section {
  text-align: right;
}

.card-number {
  font-size: 3rem;
  font-weight: 900;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  line-height: 1;
}

.highlight-card:hover .card-number {
  transform: scale(1.1);
  animation: numberCosmic 2s ease-in-out infinite;
}

.number-decorations {
  display: flex;
  gap: 0.25rem;
  justify-content: flex-end;
  margin-top: 0.5rem;
  opacity: 0;
  transition: all 0.3s ease;
}

.highlight-card:hover .number-decorations {
  opacity: 1;
}

.number-decoration {
  width: 1rem;
  height: 1rem;
  animation: decorationDance 1s ease-in-out infinite;
}

.sparkles-decoration {
  color: #fbbf24;
}

.gem-decoration {
  color: #60a5fa;
  animation-delay: 0.2s;
}

.zap-decoration {
  color: #8b5cf6;
  animation-delay: 0.4s;
}

.content-section {
  flex-grow: 1;
}

.card-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: white;
  margin-bottom: 0.75rem;
  line-height: 1.3;
  transition: all 0.5s ease;
}

.highlight-card:hover .card-title {
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.card-subtitle {
  color: #d1d5db;
  font-weight: 500;
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
  transition: all 0.3s ease;
}

.card-footer {
  margin-top: auto;
}

.footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.star-rating {
  display: flex;
  gap: 0.25rem;
}

.star {
  width: 1rem;
  height: 1rem;
  color: #fbbf24;
  fill: currentColor;
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.highlight-card:hover .star {
  animation: starCosmic 3s ease-in-out infinite;
  transform: scale(1.1);
}

.footer-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.explore-text {
  color: #9ca3af;
  font-size: 0.875rem;
  transition: all 0.3s ease;
}

.chevron-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: #9ca3af;
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.highlight-card:hover .chevron-icon {
  transform: translateX(0.5rem) scale(1.1);
  color: white;
}

.trend-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: #10b981;
  opacity: 0;
  transition: all 0.3s ease;
  animation: trendBounce 1s ease-in-out infinite;
}

.highlight-card:hover .trend-icon {
  opacity: 1;
}

.progress-container {
  position: relative;
  height: 0.5rem;
  background: rgba(55, 65, 81, 0.5);
  border-radius: 9999px;
  overflow: hidden;
  backdrop-filter: blur(2px);
}

.progress-bar {
  height: 100%;
  transform-origin: left;
  transition: all 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  transform: scaleX(0);
}

.highlight-card:hover .progress-bar {
  transform: scaleX(1);
}

.progress-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  opacity: 0;
  transition: all 0.3s ease;
}

.highlight-card:hover .progress-shimmer {
  opacity: 1;
  animation: progressShimmer 2s ease-in-out infinite;
}

.progress-indicator {
  position: absolute;
  right: 0;
  top: 50%;
  width: 1rem;
  height: 1rem;
  background: white;
  border-radius: 50%;
  transform: translateY(-50%) translateX(0.5rem);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.corner-decorations {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.corner-decoration-bottom {
  bottom: 1rem;
  left: 1rem;
}

.corner-decoration-top {
  top: 1rem;
  left: 1rem;
}

.corner-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: rgba(107, 114, 128, 0.6);
  transition: all 0.3s ease;
}

.highlight-card:hover .corner-icon {
  animation: cornerGlow 3s ease-in-out infinite;
}

.highlight-card:hover .shield-icon {
  animation: shieldGlow 3s ease-in-out infinite;
}

.highlight-card:hover .infinity-icon {
  animation: infinitySpin 4s linear infinite;
}

/* Card Back */
.card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  transform: rotateY(180deg);
  border-radius: 1.5rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4), 
              0 0 0 1px rgba(255, 255, 255, 0.1);
  color: white;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.back-cosmic-background {
  position: absolute;
  inset: 0;
}

.cosmic-orbit-1 {
  position: absolute;
  top: -5rem;
  right: -5rem;
  width: 10rem;
  height: 10rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  animation: cosmicOrbit 15s linear infinite;
}

.cosmic-orbit-2 {
  position: absolute;
  bottom: -4rem;
  left: -4rem;
  width: 8rem;
  height: 8rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  animation: cosmicOrbitReverse 20s linear infinite;
}

.cosmic-center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15rem;
  height: 15rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: cosmicPulse 4s ease-in-out infinite;
}

.star-field {
  position: absolute;
  inset: 0;
}

.star1 {
  position: absolute;
  width: 0.25rem;
  height: 0.25rem;
  background: white;
  border-radius: 50%;
  animation: starTwinkle 2s ease-in-out infinite;
}

.back-content {
  position: relative;
  z-index: 10;
  padding: 2rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.back-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  animation: backHeaderSlide 0.6s ease-out;
}

.award-icon {
  width: 2rem;
  height: 2rem;
  animation: awardBounce 2s ease-in-out infinite 0.5s;
}

.back-title-section h3 {
  font-size: 1.5rem;
  font-weight: 700;
}

.back-title-section p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.875rem;
}

.back-description {
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.6;
  margin-bottom: 1.5rem;
  animation: backContentFade 0.8s ease-out 0.2s both;
}

.back-description.large {
  font-size: 1rem;
}

.back-description.small {
  font-size: 0.875rem;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.feature-item1 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  padding: 0.5rem;
  backdrop-filter: blur(2px);
  animation: featureAppear 0.5s ease-out both;
}

.feature-dot {
  width: 0.5rem;
  height: 0.5rem;
  background: white;
  border-radius: 50%;
  animation: featurePulse 1s ease-in-out infinite;
}

.feature-text1 {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}

.back-footer {
  margin-top: auto;
  animation: backFooterSlide 0.6s ease-out 0.4s both;
}

.back-button {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border-radius: 1rem;
  padding: 1rem;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
}

.back-button:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

.back-button-content {
  font-size: 0.875rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.back-chevron {
  width: 1.25rem;
  height: 1.25rem;
  transform: rotate(180deg);
  transition: all 0.3s ease;
}

.back-button:hover .back-chevron {
  animation: backChevronBounce 1s ease-in-out infinite;
}

.back-sparkles {
  width: 1.25rem;
  height: 1.25rem;
  transition: all 0.3s ease;
}

.back-button:hover .back-sparkles {
  animation: backSparklesSpin 1s linear infinite;
}

/* CTA Section */
.cta-section {
  text-align: center;
  margin-top: 6rem;
}

.cta-container1 {
  background: linear-gradient(to right, 
    rgba(59, 130, 246, 0.1), 
    rgba(147, 51, 234, 0.1), 
    rgba(236, 72, 153, 0.1)
  );
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1.5rem;
  padding: 3rem;
  max-width: 64rem;
  margin: 0 auto;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.cta-crown {
  width: 3rem;
  height: 3rem;
  color: #fbbf24;
  margin: 0 auto 1.5rem;
  animation: crownFloat 3s ease-in-out infinite;
}

.cta-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: white;
  margin-bottom: 1.5rem;
  animation: ctaTitle 2s ease-in-out infinite;
}

.cta-description {
  color: #d1d5db;
  font-size: 1.125rem;
  margin-bottom: 2rem;
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
}

.cta-button1 {
  background: linear-gradient(to right, #2563eb, #7c3aed, #db2777);
  color: white;
  padding: 1rem 3rem;
  border-radius: 1rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  animation: ctaButton 2s ease-in-out infinite;
}

.cta-button1:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  transform: scale(1.05) translateY(-2px);
}

.cta-rocket {
  width: 1.5rem;
  height: 1.5rem;
}

.cta-sparkles {
  width: 1.5rem;
  height: 1.5rem;
}

/* Keyframe Animations */
@keyframes gridPulse {
  0%, 100% { opacity: 0.1; }
  50% { opacity: 0.3; }
}

@keyframes cosmicFloat {
  0%, 100% { 
    transform: translateY(0px) translateX(0px) rotateZ(0deg); 
  }
  25% { 
    transform: translateY(-15px) translateX(10px) rotateZ(90deg); 
  }
  50% { 
    transform: translateY(-10px) translateX(20px) rotateZ(180deg); 
  }
  75% { 
    transform: translateY(-20px) translateX(5px) rotateZ(270deg); 
  }
}

@keyframes orbitalSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes orbitalReverse {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

@keyframes lightSweep {
  0% { 
    background: linear-gradient(135deg, transparent, transparent, transparent); 
  }
  50% { 
    background: linear-gradient(135deg, transparent, rgba(59, 130, 246, 0.1), transparent); 
  }
  100% { 
    background: linear-gradient(135deg, transparent, transparent, transparent); 
  }
}

@keyframes badgeFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-5px); }
}

@keyframes crownGlow {
  0%, 100% { 
    color: #fbbf24; 
    filter: drop-shadow(0 0 5px #fbbf24); 
  }
  50% { 
    color: #ffd700; 
    filter: drop-shadow(0 0 15px #ffd700); 
  }
}

@keyframes sparkleRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes titleGlow {
  0%, 100% { 
    text-shadow: 0 0 20px rgba(59, 130, 246, 0.3); 
  }
  50% { 
    text-shadow: 0 0 40px rgba(59, 130, 246, 0.6), 0 0 60px rgba(147, 51, 234, 0.4); 
  }
}

@keyframes subtitleFade {
  from { 
    opacity: 0; 
    transform: translateY(20px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0px); 
  }
}

@keyframes underlineExpand {
  from { width: 0; }
  to { width: 12rem; }
}

@keyframes decorationFloat {
  0%, 100% { 
    transform: translateY(0px) scale(1); 
  }
  50% { 
    transform: translateY(-10px) scale(1.1); 
  }
}

@keyframes cardCosmicEntrance {
  0% { 
    opacity: 0; 
    transform: perspective(3000px) rotateX(80deg) rotateY(-40deg) translateZ(-300px) scale(0.4); 
  }
  100% { 
    opacity: 1; 
    transform: perspective(3000px) rotateX(0deg) rotateY(0deg) translateZ(0px) scale(1); 
  }
}

@keyframes backgroundShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes particleFloat {
  0%, 100% { 
    transform: translateY(0px) translateX(0px) scale(1); 
  }
  25% { 
    transform: translateY(-20px) translateX(15px) scale(1.2); 
  }
  50% { 
    transform: translateY(-10px) translateX(25px) scale(0.8); 
  }
  75% { 
    transform: translateY(-25px) translateX(5px) scale(1.1); 
  }
}

@keyframes geometricMorph {
  0%, 100% { 
    clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 30% 100%, 0% 70%); 
  }
  50% { 
    clip-path: polygon(0% 30%, 70% 0%, 100% 100%, 0% 100%, 0% 70%); 
  }
}

@keyframes geometricSpin {
  from { transform: rotate(0deg) scale(1); }
  to { transform: rotate(360deg) scale(1.1); }
}

@keyframes geometricPulse {
  0%, 100% { 
    transform: translate(-50%, -50%) scale(1); 
  }
  50% { 
    transform: translate(-50%, -50%) scale(1.3); 
  }
}

@keyframes neuralPulse {
  0%, 100% { opacity: 0.1; }
  50% { opacity: 0.3; }
}

@keyframes neuralLineActive {
  0%, 100% { 
    opacity: 0.2; 
    transform: scaleY(1); 
  }
  50% { 
    opacity: 0.6; 
    transform: scaleY(1.5); 
  }
}

@keyframes iconCosmic {
  0%, 100% { 
    transform: rotateY(0deg) rotateX(0deg) scale(1); 
  }
  25% { 
    transform: rotateY(90deg) rotateX(15deg) scale(1.1); 
  }
  50% { 
    transform: rotateY(180deg) rotateX(0deg) scale(1.05); 
  }
  75% { 
    transform: rotateY(270deg) rotateX(-15deg) scale(1.1); 
  }
}

@keyframes iconGlowPulse {
  0% { 
    transform: scale(1) rotateZ(0deg); 
    opacity: 0.5; 
  }
  100% { 
    transform: scale(2) rotateZ(180deg); 
    opacity: 0; 
  }
}

@keyframes floatingPulse {
  0%, 100% { 
    opacity: 0.6; 
    transform: scale(1); 
  }
  50% { 
    opacity: 1; 
    transform: scale(1.2); 
  }
}

@keyframes numberCosmic {
  0%, 100% { 
    transform: scale(1.1) rotateZ(0deg); 
  }
  50% { 
    transform: scale(1.2) rotateZ(5deg); 
  }
}

@keyframes decorationDance {
  0%, 100% { 
    transform: scale(1) rotate(0deg); 
  }
  50% { 
    transform: scale(1.2) rotate(180deg); 
  }
}

@keyframes starCosmic {
  0%, 100% { 
    transform: scale(1.1) rotateZ(0deg) rotateY(0deg); 
  }
  25% { 
    transform: scale(1.3) rotateZ(90deg) rotateY(90deg); 
  }
  50% { 
    transform: scale(1.4) rotateZ(180deg) rotateY(180deg); 
  }
  75% { 
    transform: scale(1.3) rotateZ(270deg) rotateY(270deg); 
  }
}

@keyframes trendBounce {
  0%, 100% { 
    transform: translateY(0px) rotateX(0deg) scale(1); 
  }
  50% { 
    transform: translateY(-5px) rotateX(15deg) scale(1.1); 
  }
}

@keyframes progressShimmer {
  0% { 
    transform: translateX(-100%) skewX(-20deg); 
  }
  100% { 
    transform: translateX(200%) skewX(-20deg); 
  }
}

@keyframes cornerGlow {
  0%, 100% { 
    color: rgba(107, 114, 128, 0.6); 
  }
  50% { 
    color: rgba(59, 130, 246, 0.8); 
    filter: drop-shadow(0 0 5px rgba(59, 130, 246, 0.5)); 
  }
}

@keyframes shieldGlow {
  0%, 100% { 
    color: rgba(107, 114, 128, 0.6); 
  }
  50% { 
    color: rgba(16, 185, 129, 0.8); 
    filter: drop-shadow(0 0 5px rgba(16, 185, 129, 0.5)); 
  }
}

@keyframes infinitySpin {
  from { transform: rotate(0deg) scale(1); }
  to { transform: rotate(360deg) scale(1.1); }
}

@keyframes cosmicOrbit {
  from { 
    transform: rotate(0deg) translateX(50px) rotate(0deg); 
  }
  to { 
    transform: rotate(360deg) translateX(50px) rotate(-360deg); 
  }
}

@keyframes cosmicOrbitReverse {
  from { 
    transform: rotate(0deg) translateX(30px) rotate(0deg); 
  }
  to { 
    transform: rotate(-360deg) translateX(30px) rotate(360deg); 
  }
}

@keyframes cosmicPulse {
  0%, 100% { 
    transform: translate(-50%, -50%) scale(1); 
    opacity: 0.1; 
  }
  50% { 
    transform: translate(-50%, -50%) scale(1.2); 
    opacity: 0.05; 
  }
}

@keyframes starTwinkle {
  0%, 100% { 
    opacity: 0.3; 
    transform: scale(1) rotate(0deg); 
  }
  50% { 
    opacity: 1; 
    transform: scale(1.5) rotate(180deg); 
  }
}

@keyframes backHeaderSlide {
  from { 
    opacity: 0; 
    transform: translateX(-20px) rotateY(-15deg); 
  }
  to { 
    opacity: 1; 
    transform: translateX(0px) rotateY(0deg); 
  }
}

@keyframes backContentFade {
  from { 
    opacity: 0; 
    transform: translateY(10px) rotateX(-10deg); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0px) rotateX(0deg); 
  }
}

@keyframes backFooterSlide {
  from { 
    opacity: 0; 
    transform: translateY(20px) rotateX(-20deg); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0px) rotateX(0deg); 
  }
}

@keyframes featureAppear {
  from { 
    opacity: 0; 
    transform: translateX(-10px) scale(0.8); 
  }
  to { 
    opacity: 1; 
    transform: translateX(0px) scale(1); 
  }
}

@keyframes featurePulse {
  0%, 100% { 
    opacity: 0.8; 
    transform: scale(1); 
  }
  50% { 
    opacity: 1; 
    transform: scale(1.2); 
  }
}

@keyframes awardBounce {
  0%, 100% { 
    transform: translateY(0px) scale(1); 
  }
  50% { 
    transform: translateY(-8px) scale(1.1); 
  }
}

@keyframes backChevronBounce {
  0%, 100% { 
    transform: rotate(180deg) translateY(0px); 
  }
  50% { 
    transform: rotate(180deg) translateY(-3px); 
  }
}

@keyframes backSparklesSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes crownFloat {
  0%, 100% { 
    transform: translateY(0px); 
  }
  50% { 
    transform: translateY(-5px); 
  }
 }
 
 @keyframes ctaTitle {
  0%, 100% { 
    text-shadow: 0 0 20px rgba(59, 130, 246, 0.3); 
  }
  50% { 
    text-shadow: 0 0 40px rgba(59, 130, 246, 0.6), 0 0 60px rgba(147, 51, 234, 0.4); 
  }
 }
 
 @keyframes ctaButton {
  0%, 100% { 
    transform: translateY(0px); 
  }
  50% { 
    transform: translateY(-2px); 
  }
 }
 
 
 /* Responsive Design */
 @media (max-width: 768px) {
  .course-highlights-container {
    padding: 2rem 1rem;
  }

  .highlights-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .main-title {
    font-size: 3rem;
  }
  
  .subtitle {
    font-size: 1rem;
  }
  
  .highlight-card {
    height: 20rem;
  }
  
  .highlight-card.large {
    grid-column: span 1;
  }
  
  .card-content {
    padding: 1.5rem;
  }
  
  .card-title {
    font-size: 1.25rem;
  }
  
  .card-number {
    font-size: 2rem;
  }
  
  .features-grid {
    grid-template-columns: 1fr;
  }
  
  .cta-container1 { /* Corrected class name from .cta-container to .cta-container1 to match JS/HTML */
    padding: 2rem 1rem;
  }
  
  .cta-title {
    font-size: 2rem;
  }
 }
 
 @media (max-width: 480px) {
  .highlights-grid {
    gap: 1.5rem;
  }
  
  .main-title {
    font-size: 2.5rem;
  }
  
  .highlight-card {
    height: 18rem;
  }
  
  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .number-section {
    text-align: left;
  }
 }
 /*Course Highlight css ends*/
 /* Base Testimonials Section Styles */
.testimonials-section {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(135deg, rgb(2, 6, 23), rgb(15, 23, 42), rgb(30, 41, 59));
  overflow: hidden;
  padding: 5rem 0;
}

/* Background Styles */
.testimonials-background {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Code Stream Styles */
.code-stream {
  position: absolute;
  font-family: 'Courier New', monospace;
  font-size: 0.75rem;
  animation: code-stream 15s linear infinite;
}

.code-stream-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  background: rgba(15, 23, 42, 0.4);
  border-radius: 0.375rem;
  border: 1px solid rgba(71, 85, 105, 0.4);
  backdrop-filter: blur(4px);
}

.code-indicator {
  width: 0.5rem;
  height: 0.5rem;
  background: rgb(59, 130, 246);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

.code-text {
  color: rgba(148, 163, 184, 0.8);
}

/* ML Algorithm Styles */
.ml-algorithm {
  position: absolute;
  animation: ml-algorithm-drift 60s linear infinite;
}

.ml-algorithm-content {
  padding: 1rem;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.6), rgba(30, 41, 59, 0.7));
  border-radius: 0.75rem;
  border: 1px solid rgba(71, 85, 105, 0.4);
  backdrop-filter: blur(12px);
  min-width: 280px;
}

.ml-algorithm-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.ml-algorithm-indicator {
  width: 0.75rem;
  height: 0.75rem;
  background: rgb(59, 130, 246);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

.ml-algorithm-title {
  font-size: 0.875rem;
  font-family: 'Courier New', monospace;
  color: rgba(148, 163, 184, 0.9);
  font-weight: 600;
}

.ml-algorithm-code {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-family: 'Courier New', monospace;
}

.code-line {
  opacity: 0.6;
}

.code-line.cyan { color: rgba(125, 211, 252, 0.7); }
.code-line.green { color: rgba(134, 239, 172, 0.7); }
.code-line.purple { color: rgba(196, 181, 253, 0.7); }
.code-line.yellow { color: rgba(253, 224, 71, 0.7); }
.code-line.pink { color: rgba(244, 114, 182, 0.7); }
.code-line.indigo { color: rgba(165, 180, 252, 0.7); }
.code-line.emerald { color: rgba(110, 231, 183, 0.7); }
.code-line.orange { color: rgba(251, 146, 60, 0.7); }

.ml-4 { margin-left: 1rem; }

.algorithm-progress {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
}

.progress-label {
  color: rgba(156, 163, 175, 0.6);
}

.progress-value {
  color: rgba(59, 130, 246, 0.7);
}

.progress-bar-container {
  width: 100%;
  background: rgba(55, 65, 81, 0.3);
  border-radius: 9999px;
  height: 0.25rem;
}

.progress-bar {
  background: rgba(71, 85, 105, 0.8);
  height: 0.25rem;
  border-radius: 9999px;
  transition: all 1s ease;
}

/* Formula Float Styles */
.formula-float {
  position: absolute;
  font-family: 'Courier New', monospace;
  font-size: 0.875rem;
  animation: formula-float 25s linear infinite;
}

.formula-content {
  padding: 0.5rem;
  background: rgba(15, 23, 42, 0.3);
  border-radius: 0.375rem;
  border: 1px solid rgba(71, 85, 105, 0.3);
  backdrop-filter: blur(4px);
}

.formula-text {
  color: rgba(148, 163, 184, 0.8);
}

/* Data Flow Styles */
.data-flow-stream {
  position: absolute;
  width: 0.25rem;
  height: 2rem;
  animation: data-flow 8s linear infinite;
}

/* Container Styles */
.testimonials-container {
  position: relative;
  z-index: 10;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Header Styles */
.testimonials-header {
  text-align: center;
  margin-bottom: 5rem;
}

.header-content {
  transition: all 1s ease;
  transform: translateY(2.5rem);
  opacity: 0;
}

.header-content.visible {
  transform: translateY(0);
  opacity: 1;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 2rem;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(32px);
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  margin-bottom: 2.5rem;
  transition: all 0.7s ease;
  position: relative;
  overflow: hidden;
}

.status-badge:hover {
  transform: scale(1.05);
}

.status-indicator {
  width: 1rem;
  height: 1rem;
  background: linear-gradient(to right, rgb(59, 130, 246), rgb(71, 85, 105));
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
  box-shadow: 0 0 1rem rgba(59, 130, 246, 0.6);
}

.status-text {
  color: rgb(229, 231, 235);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
}

.status-dots {
  display: flex;
  gap: 0.25rem;
}

.status-dot {
  width: 0.5rem;
  height: 0.5rem;
  background: linear-gradient(to right, rgb(59, 130, 246), rgb(71, 85, 105));
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

.status-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: rgb(125, 211, 252);
  animation: pulse 2s ease-in-out infinite;
}

.status-background {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(59, 130, 246, 0.1), rgba(71, 85, 105, 0.1), rgba(30, 41, 59, 0.1));
  transform: translateX(-100%);
  transition: transform 1s ease;
}

.status-badge:hover .status-background {
  transform: translateX(100%);
}

/* Title Styles */
.main-title {
  font-size: clamp(3rem, 8vw, 4.5rem);
  font-weight: 900;
  margin-bottom: 2rem;
  line-height: 1.1;
  position: relative;
  cursor: pointer;
}

.title-text {
  background: linear-gradient(to right, #ffffff, rgb(191, 219, 254), #ffffff);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  position: relative;
  z-index: 10;
  transition: all 1s ease;
}

.main-title:hover .title-text {
  background: linear-gradient(to right, rgb(125, 211, 252), rgb(148, 163, 184), rgb(71, 85, 105));
  background-clip: text;
  -webkit-background-clip: text;
}

.title-glow-1 {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(59, 130, 246, 0.4), rgba(71, 85, 105, 0.3), rgba(30, 41, 59, 0.2));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  filter: blur(0.5rem);
  transform: scale(1.1);
  opacity: 0;
  transition: all 0.7s ease;
}

.main-title:hover .title-glow-1 {
  opacity: 1;
}

.title-glow-2 {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(125, 211, 252, 0.3), rgba(59, 130, 246, 0.2), rgba(71, 85, 105, 0.2));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  filter: blur(0.75rem);
  transform: scale(1.2);
  opacity: 0;
  transition: all 1s ease;
}

.main-title:hover .title-glow-2 {
  opacity: 1;
}

.title-sparkles {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: all 0.5s ease;
}

.main-title:hover .title-sparkles {
  opacity: 1;
}

.sparkle {
  position: absolute;
  width: 1.5rem;
  height: 1.5rem;
  color: rgb(250, 204, 21);
  animation: ping 1s ease-in-out infinite;
}

.subtitle {
  font-size: 1.25rem;
  color: rgb(209, 213, 219);
  max-width: 48rem;
  margin: 0 auto;
  line-height: 1.6;
  position: relative;
}

.rocket-emoji {
  display: inline-block;
  margin-left: 0.5rem;
  animation: bounce 1s ease-in-out infinite;
}

/* Category Filter Styles */
.category-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 4rem;
  transition: all 1s ease;
  animation-delay: 0.3s;
  transform: translateY(2.5rem);
  opacity: 0;
}

.category-filter.visible {
  transform: translateY(0);
  opacity: 1;
}

.category-btn {
  position: relative;
  padding: 1rem 2rem;
  font-weight: 700;
  font-size: 0.875rem;
  transition: all 0.7s ease;
  transform: scale(1);
  border-radius: 1rem;
  backdrop-filter: blur(32px);
  border: 1px solid;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  cursor: pointer;
}

.category-btn:not(.active) {
  color: rgb(209, 213, 219);
  border-color: rgba(255, 255, 255, 0.1);
}

.category-btn.active {
  color: white;
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 25px 50px -12px rgba(71, 85, 105, 0.4);
}

.category-btn:hover {
  transform: scale(1.1) translateY(-0.5rem);
  color: white;
  border-color: rgba(255, 255, 255, 0.2);
}

.category-btn-content {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.category-indicators {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.chevron-icon {
  width: 1rem;
  height: 1rem;
  animation: bounce 2s ease-in-out infinite;
}

.zap-icon {
  width: 1rem;
  height: 1rem;
  color: rgb(250, 204, 21);
  animation: pulse 2s ease-in-out infinite;
}

.category-btn-hover {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(71, 85, 105, 0), rgba(30, 41, 59, 0.3), rgba(15, 23, 42, 0));
  transform: translateX(-100%);
  transition: transform 1s ease;
}

.category-btn:hover .category-btn-hover {
  transform: translateX(100%);
}

.category-btn-blur {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.1);
  opacity: 0;
  transition: all 0.5s ease;
  filter: blur(2.5rem);
}

.category-btn:hover .category-btn-blur {
  opacity: 1;
}

.category-btn-active-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(71, 85, 105, 0.3), rgba(30, 41, 59, 0.2));
  animation: pulse 2s ease-in-out infinite;
}

.category-btn-active-glow {
  position: absolute;
  inset: -0.25rem;
  background: linear-gradient(to right, rgb(71, 85, 105), rgb(30, 41, 59), rgb(15, 23, 42));
  opacity: 0.3;
  filter: blur(1rem);
  animation: pulse 2s ease-in-out infinite;
}

.testimonials-grid{
  display:flex !important;         /* beat the rogue “display:grid” */
  flex-wrap:nowrap !important;     /* keep cards in one long row    */
  overflow-x:auto;                 /* allow horizontal scrolling    */
  overflow-y:hidden;               /* prevent accidental vert. bar  */
  -webkit-overflow-scrolling:touch;/* smooth momentum scroll iOS    */
}

.testimonials-grid .testimonial-card{
  flex:0 0 24rem;                  /* 320 px → same as Tailwind w-80 */
  max-width:30rem;                 /* avoid growing in large screens */
  margin-right:1rem;               /* small gap between cards        */
}

@media (min-width: 1024px) {
  .testimonials-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Testimonial Card Styles */
.testimonial-card {
  transition: all 1s ease;
  transform: translateY(7.5rem);
  opacity: 0;
}

.testimonial-card.visible {
  transform: translateY(0);
  opacity: 1;
}

.card-wrapper {
  position: relative;
  height: 100%;
  cursor: pointer;
}



.card-main {
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(32px);
  border-radius: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  transition: all 1s ease;
  transform: scale(1);
  overflow: hidden;
  height: 100%;
  perspective: 1000px;
}

.card-main:hover {
  transform: scale(1.05) translateY(-2rem);
  box-shadow: 0 25px 50px -12px rgba(71, 85, 105, 0.3);
  border-color: rgba(255, 255, 255, 0.3);
}

.card-background {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: all 1s ease;
  border-radius: 1.5rem;
}

.card-main:hover .card-background {
  opacity: 0.15;
}

.category-badge {
  position: absolute;
  top: -1rem; /* MODIFIED: Was -1.5rem, adjusted to prevent clipping */
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
}

.category-badge-inner {
  padding: 0.75rem 2rem;
  border-radius: 1rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: white;
  box-shadow: 0 20px 50px rgba(71, 85, 105, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.2);
  transform: rotate(2deg);
  transition: all 0.7s ease;
}

.card-main:hover .category-badge-inner {
  transform: rotate(0deg) scale(1.1);
}

.category-badge-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.award-icon {
  width: 1rem;
  height: 1rem;
}

.sparkles-icon {
  width: 0.75rem;
  height: 0.75rem;
  animation: pulse 2s ease-in-out infinite;
}

.card-content {
  padding: 2rem;
  padding-top: 1rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.date-badge {
  padding: 0.5rem 1rem;
  background: linear-gradient(to right, rgba(71, 85, 105, 0.3), rgba(30, 41, 59, 0.3));
  border-radius: 0.75rem;
  border: 1px solid rgba(148, 163, 184, 0.4);
  backdrop-filter: blur(4px);
}

.date-text {
  color: rgb(203, 213, 225);
  font-size: 0.875rem;
  font-weight: 600;
}

.rating-stars {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.star-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: rgb(250, 204, 21);
  fill: currentColor;
  transition: all 0.3s ease;
}

.card-main:hover .star-icon {
  transform: scale(1.25);
}

/* Profile Section */
.profile-section {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.avatar-container {
  position: relative;
}

.avatar {
  position: relative;
  width: 5rem;
  height: 5rem;
  border-radius: 1rem;
  overflow: hidden;
  transition: all 0.7s ease;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 1.25rem;
  position: relative;
  z-index: 10;
}

.card-main:hover .avatar {
  transform: scale(1.15) rotate(6deg);
}

.avatar-ring-1 {
  position: absolute;
  inset: 0;
  border-radius: 1rem;
  border: 2px solid rgba(255, 255, 255, 0.5);
  animation: pulse-ring 2s ease-in-out infinite;
}

.avatar-ring-2 {
  position: absolute;
  inset: 0;
  border-radius: 1rem;
  border: 1px solid rgba(59, 130, 246, 0.4);
  transform: scale(1.1);
  animation: pulse-ring-delayed 2s ease-in-out infinite 0.5s;
}

.avatar-ring-3 {
  position: absolute;
  inset: 0;
  border-radius: 1rem;
  border: 1px solid rgba(168, 85, 247, 0.3);
  transform: scale(1.2);
  animation: pulse-ring-slow 3s ease-in-out infinite 1s;
}

.linkedin-badge {
  position: absolute;
  bottom: -0.5rem;
  right: -0.5rem;
  background: linear-gradient(to right, rgb(37, 99, 235), rgb(29, 78, 216));
  padding: 0.625rem;
  border-radius: 0.75rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  transition: all 0.5s ease;
  border: 1px solid rgba(59, 130, 246, 0.5);
}

.card-main:hover .linkedin-badge {
  transform: scale(1.25) rotate(12deg);
}

.linkedin-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: white;
}

.linkedin-glow {
  position: absolute;
  inset: 0;
  background: rgba(37, 99, 235, 0.5);
  border-radius: 0.75rem;
  filter: blur(1rem);
  transform: scale(1.5);
  opacity: 0;
  transition: all 0.5s ease;
}

.card-main:hover .linkedin-glow {
  opacity: 1;
}

.profile-info {
  flex: 1;
}

.profile-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: white;
  margin-bottom: 0.5rem;
  transition: all 0.5s ease;
}

.card-main:hover .profile-name {
  color: transparent;
  background: linear-gradient(to right, rgb(125, 211, 252), rgb(148, 163, 184));
  background-clip: text;
  -webkit-background-clip: text;
}

.profile-role {
  color: rgb(209, 213, 219);
  font-size: 0.875rem;
  line-height: 1.6;
  margin-bottom: 0.5rem;
}

.profile-company {
  color: rgb(156, 163, 175);
  font-size: 0.875rem;
}

.salary-badge {
  margin-top: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  background: linear-gradient(to right, rgba(59, 130, 246, 0.2), rgba(71, 85, 105, 0.2));
  border-radius: 0.5rem;
  border: 1px solid rgba(59, 130, 246, 0.4);
}

.trending-icon {
  width: 1rem;
  height: 1rem;
  color: rgb(59, 130, 246);
}

.salary-text {
  color: rgb(125, 211, 252);
  font-size: 0.875rem;
  font-weight: 700;
}

/* Testimonial Text */
.testimonial-text {
  position: relative;
  margin-bottom: 2rem;
  flex: 1;
}

.quote-left {
  position: absolute;
  top: -1rem;
  left: -1rem;
  font-size: 5rem;
  color: rgba(71, 85, 105, 0.3);
  font-family: serif;
  pointer-events: none;
  transition: transform 0.5s ease;
}

.card-main:hover .quote-left {
  transform: scale(1.1);
}

.testimonial-content {
  border-left: 4px solid;
  border-image: linear-gradient(to bottom, rgb(71, 85, 105), rgb(30, 41, 59)) 1;
  padding-left: 1.5rem;
  position: relative;
  z-index: 10;
}

.testimonial-paragraph {
  color: rgb(229, 231, 235);
  line-height: 1.6;
  font-size: 0.875rem;
  transition: color 0.5s ease;
}

.card-main:hover .testimonial-paragraph {
  color: white;
}

.quote-right {
  position: absolute;
  bottom: -2rem;
  right: -1rem;
  font-size: 5rem;
  color: rgba(30, 41, 59, 0.3);
  font-family: serif;
  pointer-events: none;
  transform: rotate(180deg);
  transition: transform 0.5s ease;
}

.card-main:hover .quote-right {
  transform: rotate(180deg) scale(1.1);
}

/* Career Progression */
.career-progression {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.05), rgba(59, 130, 246, 0.1), rgba(255, 255, 255, 0.05));
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.7s ease;
  margin-bottom: 1.5rem;
  backdrop-filter: blur(4px);
}

.card-main:hover .career-progression {
  background: linear-gradient(to right, rgba(71, 85, 105, 0.15), rgba(30, 41, 59, 0.2), rgba(15, 23, 42, 0.15));
}

.career-item {
  text-align: center;
  flex: 1;
}

.career-label {
  font-size: 0.75rem;
  color: rgba(156, 163, 175, 0.6);
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.career-company {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgb(229, 231, 235);
  padding: 0.25rem 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0.5rem;
}

.career-arrow-container {
  margin: 0 1.5rem;
  position: relative;
}

.career-arrow {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.7s ease;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.card-main:hover .career-arrow {
  transform: scale(1.25) rotate(180deg);
}

.arrow-icon {
  width: 1.5rem;
  height: 1.5rem;
  color: white;
}

.career-arrow-glow {
  position: absolute;
  inset: 0;
  background: rgba(71, 85, 105, 0.4);
  border-radius: 50%;
  filter: blur(2.5rem);
  transform: scale(2);
  opacity: 0;
  transition: all 0.7s ease;
}

.card-main:hover .career-arrow-glow {
  opacity: 1;
}

.career-particles {
  position: absolute;
  inset: 0;
}

.career-particle {
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  background: linear-gradient(to right, rgb(71, 85, 105), rgb(30, 41, 59));
  border-radius: 50%;
  animation: ping 1s ease-in-out infinite;
}

/* Read More Button */
.read-more-btn {
  margin-top: auto;
  width: 100%;
  padding: 1rem 2rem;
  background: linear-gradient(to right, rgb(71, 85, 105), rgb(30, 41, 59), rgb(15, 23, 42));
  color: white;
  font-weight: 700;
  border-radius: 1rem;
  transition: all 0.5s ease;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
}

.read-more-btn:hover {
  transform: scale(1.05) translateY(-0.5rem);
  box-shadow: 0 25px 50px -12px rgba(71, 85, 105, 0.5);
}

.read-more-content {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.read-more-arrow {
  width: 1.25rem;
  height: 1.25rem;
  transition: transform 0.3s ease;
}

.read-more-btn:hover .read-more-arrow {
  transform: translateX(0.5rem);
}

.read-more-bg-1 {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgb(15, 23, 42), rgb(30, 41, 59), rgb(71, 85, 105));
  transform: translateX(-100%);
  transition: transform 0.7s ease;
}

.read-more-btn:hover .read-more-bg-1 {
  transform: translateX(0);
}

.read-more-bg-2 {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.3);
  opacity: 0;
  transition: all 0.5s ease;
  filter: blur(0.5rem);
}

.read-more-btn:hover .read-more-bg-2 {
  opacity: 1;
}

.read-more-bg-3 {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(125, 211, 252, 0.2), rgba(71, 85, 105, 0.2));
  opacity: 0;
  transition: all 0.3s ease;
}

.read-more-btn:hover .read-more-bg-3 {
  opacity: 1;
}

/* Card Border Effects */
.card-border-glow {
  position: absolute;
  inset: 0;
  border-radius: 1.5rem;
  border: 2px solid transparent;
  background: linear-gradient(to right, rgba(71, 85, 105, 0.4), rgba(30, 41, 59, 0.3), rgba(15, 23, 42, 0.2));
  opacity: 0;
  transition: all 0.7s ease;
  filter: blur(1px);
  pointer-events: none;
}

.card-main:hover .card-border-glow {
  opacity: 1;
}

/* Hover Particles */
.hover-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hover-particle {
  position: absolute;
  width: 0.75rem;
  height: 0.75rem;
  background: linear-gradient(to right, rgb(71, 85, 105), rgb(30, 41, 59));
  border-radius: 50%;
  animation: float-particle 4s ease-out infinite;
  opacity: 0.8;
}

/* Card Shadow */
.card-shadow {
  position: absolute;
  inset: 0;
  opacity: 0;
  border-radius: 1.5rem;
  filter: blur(0.75rem);
  transform: translateY(1.5rem);
  transition: all 1s ease;
  z-index: -10;
}

.card-main:hover ~ .card-shadow {
  opacity: 0.3;
}

/* CTA Section */
.cta-section {
  text-align: center;
  transition: all 1s ease;
  animation-delay: 1.5s;
  transform: translateY(2.5rem);
  opacity: 0;
}

.cta-section.visible {
  transform: translateY(0);
  opacity: 1;
}

.cta-container {
  position: relative;
  display: inline-block;
}

.cta-btn {
  position: relative;
  padding: 1.5rem 5rem;
  background: linear-gradient(to right, rgb(71, 85, 105), rgb(30, 41, 59), rgb(15, 23, 42));
  color: white;
  font-weight: 900;
  font-size: 1.25rem;
  border-radius: 1.5rem;
  transition: all 0.7s ease;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
}

.cta-btn:hover {
  transform: scale(1.1) translateY(-1.5rem);
  box-shadow: 0 25px 50px -12px rgba(71, 85, 105, 0.5);
}

.cta-content {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.cta-award {
  width: 1.75rem;
  height: 1.75rem;
  animation: pulse 2s ease-in-out infinite;
}

.cta-arrow {
  width: 1.75rem;
  height: 1.75rem;
  transition: all 0.5s ease;
}

.cta-btn:hover .cta-arrow {
  transform: translateX(1rem) scale(1.25);
}

.cta-bg-1 {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgb(15, 23, 42), rgb(30, 41, 59), rgb(71, 85, 105));
  transform: translateX(-100%);
  transition: transform 1s ease;
}

.cta-btn:hover .cta-bg-1 {
  transform: translateX(100%);
}

.cta-bg-2 {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.4);
  opacity: 0;
  transition: all 0.7s ease;
  filter: blur(0.75rem);
  transform: scale(1.5);
}

.cta-btn:hover .cta-bg-2 {
  opacity: 1;
}

.cta-bg-3 {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(125, 211, 252, 0.3), rgba(71, 85, 105, 0.3));
  opacity: 0;
  transition: all 0.5s ease;
}

.cta-btn:hover .cta-bg-3 {
  opacity: 1;
}

.cta-particles {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: all 0.5s ease;
}

.cta-btn:hover .cta-particles {
  opacity: 1;
}

.cta-particle {
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  background: white;
  border-radius: 50%;
  animation: ping 1s ease-in-out infinite;
}

.cta-orbiting {
  position: absolute;
  inset: -4rem;
  opacity: 0;
  transition: all 0.7s ease;
}

.cta-btn:hover ~ .cta-orbiting {
  opacity: 1;
}

.cta-orbit {
  position: absolute;
  width: 1.5rem;
  height: 1.5rem;
  background: linear-gradient(to right, rgb(71, 85, 105), rgb(30, 41, 59));
  border-radius: 50%;
  animation: bounce 1s ease-in-out infinite;
  opacity: 0.8;
}

/* Keyframe Animations */
@keyframes code-stream {
  0% { 
    transform: translateX(-100px);
    opacity: 0;
  }
  10% { 
    opacity: 0.8;
  }
  90% { 
    opacity: 0.8;
  }
  100% { 
    transform: translateX(calc(100vw + 100px));
    opacity: 0;
  }
}

@keyframes ml-algorithm-drift {
  0% { 
    transform: translateX(-350px);
    opacity: 0;
  }
  15% { 
    opacity: 0.6;
  }
  85% { 
    opacity: 0.6;
  }
  100% { 
    transform: translateX(calc(100vw + 350px));
    opacity: 0;
  }
}

@keyframes formula-float {
  0% { 
    transform: translateX(-200px);
    opacity: 0;
  }
  20% { 
    opacity: 0.5;
  }
  80% { 
    opacity: 0.5;
  }
  100% { 
    transform: translateX(calc(100vw + 200px));
    opacity: 0;
  }
}

@keyframes data-flow {
  0% { 
    transform: translateY(-50px);
    opacity: 0;
  }
  20% { 
    opacity: 0.8;
  }
  80% { 
    opacity: 0.8;
  }
  100% { 
    transform: translateY(calc(100vh + 50px));
    opacity: 0;
  }
}

@keyframes bubble-burst {
  0% { 
    transform: scale(0) rotate(0deg);
    opacity: 1;
  }
  50% { 
    transform: scale(1.2) rotate(180deg);
    opacity: 0.8;
  }
  100% { 
    transform: scale(0) rotate(360deg);
    opacity: 0;
  }
}

@keyframes pulse-ring {
  0%, 100% { 
    opacity: 0.4;
    transform: scale(1);
  }
  50% { 
    opacity: 0.8;
    transform: scale(1.15);
  }
}

@keyframes pulse-ring-delayed {
  0%, 100% { 
    opacity: 0.3;
    transform: scale(1.1);
  }
  50% { 
    opacity: 0.6;
    transform: scale(1.25);
  }
}

@keyframes pulse-ring-slow {
  0%, 100% { 
    opacity: 0.2;
    transform: scale(1.2);
  }
  50% { 
    opacity: 0.5;
    transform: scale(1.35);
  }
}

@keyframes float-particle {
  0% { 
    transform: translateY(0px) rotate(0deg) scale(0); 
    opacity: 0;
  }
  20% { 
    opacity: 1;
    transform: scale(1);
  }
  80% { 
    opacity: 1;
  }
  100% { 
    transform: translateY(-80px) rotate(360deg) scale(0); 
    opacity: 0;
  }
}

@keyframes pulse {
  0%, 100% { 
    opacity: 1;
  }
  50% { 
    opacity: 0.5;
  }
}

@keyframes ping {
  0% { 
    transform: scale(1);
    opacity: 1;
  }
  75%, 100% { 
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes bounce {
  0%, 100% { 
    transform: translateY(0);
  }
  50% { 
    transform: translateY(-25%);
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .testimonials-container {
    padding: 0 1rem; /* Existing: Kept */
  }
  
  .main-title {
    font-size: 2.5rem; /* Existing: Kept */
  }
  
  .category-filter {
    gap: 0.25rem; /* Existing: Kept */
  }
  
  .category-btn {
    padding: 0.75rem 1.5rem; /* Existing: Kept */
    font-size: 0.75rem; /* Existing: Kept */
  }
  
  /* MODIFIED: Testimonials Grid for Mobile Horizontal Scrolling */
  .testimonials-grid {
    /* grid-template-columns: 1fr; /* REMOVED this line */
    /* gap: 1.5rem; /* This will be applied by flex gap */
    display: flex;                 
    overflow-x: auto;              
    gap: 1.5rem;                   
    padding-left: 1rem;            
    padding-right: 1rem;
    padding-bottom: 1rem;          
    scroll-snap-type: x mandatory; 
    -webkit-overflow-scrolling: touch; 
  }
  
  /* ADDED: Testimonial Card styles for Mobile Horizontal Scrolling */
  .testimonial-card { /* These styles apply to .testimonial-card specifically within this media query */
    flex: 0 0 auto;     
    width: 85vw;        
    max-width: 330px;   
    scroll-snap-align: start; 
    /* Note: Existing animation styles on .testimonial-card will still apply */
  }
  
  .cta-btn {
    padding: 1rem 2rem; /* Existing: Kept */
    font-size: 1rem; /* Existing: Kept */
  }
}

/* Utility Classes */
.perspective-1000 {
  perspective: 1000px;
}

.transform-gpu {
  transform: translate3d(0, 0, 0);
}

.backdrop-blur-2xl {
  backdrop-filter: blur(32px);
}
/* TestimonialsSection.css */

/* TestimonialsSection.css */

/* testimonials.css */

/* testimonials.css */

/* Scrollbar Hiding */
/* Scrollbar Hiding */
.custom-scrollbar::-webkit-scrollbar {
  display: none; /* For Chrome, Safari, Opera */
}
.custom-scrollbar {
  -ms-overflow-style: none;  /* For IE and Edge */
  scrollbar-width: none;  /* For Firefox */
}

/* Base styles for animated background elements */
.testimonials-background .code-stream,
.testimonials-background .ml-algorithm,
.testimonials-background .formula-float,
.testimonials-background .data-flow-stream {
  position: absolute;
  will-change: transform, opacity;
}

.code-stream-content,
.ml-algorithm-content,
.formula-content {
  /* e.g. display: flex; align-items: center; */
}
.code-indicator,
.ml-algorithm-indicator {
  /* e.g. width: 6px; height: 6px; background-color: #0ff; border-radius: 50%; margin-right: 8px; */
}
.code-text,
.ml-algorithm-title,
.formula-text {
  /* e.g. font-family: monospace; font-size: 12px; color: #ccc; */
}
.ml-algorithm-header {
  /* e.g. display: flex; align-items: center; margin-bottom: 8px; padding: 4px; background: rgba(0,0,0,0.2); border-radius: 4px; */
}
.ml-algorithm-code .code-line {
  /* e.g. margin-bottom: 3px; white-space: pre; font-size: 11px; */
}

/* (bubble/burst CSS was removed in previous step) */

/* Algorithm progress bar */
.algorithm-progress {
  /* e.g. margin-top: 12px; padding: 5px; background: rgba(0,0,0,0.1); border-radius: 4px; */
}
.progress-header {
  /* e.g. display: flex; justify-content: space-between; font-size: 10px; margin-bottom: 4px; color: #ddd; */
}
.progress-bar-container {
  /* e.g. background-color: rgba(255,255,255,0.15); height: 5px; border-radius: 2.5px; overflow: hidden; */
}
.progress-bar {
  /* e.g. background-color: #0ff; height: 100%; transition: width 0.5s ease; */
}

/* Fade‐in / slide animations */
.header-content.visible,
.category-filter.visible,
.testimonial-card.visible,
.cta-section.visible {
  /* e.g. opacity: 1; transform: translateY(0); transition: opacity 0.6s ease-out, transform 0.6s ease-out; */
}
.header-content,
.category-filter,
.testimonial-card,
.cta-section {
  /* e.g. opacity: 0; transform: translateY(15px); */
}

/* Status badge */
.status-badge {
  /* e.g. position: relative; display: inline-flex; align-items: center; padding: 6px 12px; background-color: rgba(0,0,0,0.3); border-radius: 16px; backdrop-filter: blur(5px); */
}
.status-indicator {
  /* e.g. width: 8px; height: 8px; background-color: #0f0; border-radius: 50%; margin-right: 8px; animation: pulse 1.5s infinite; */
}
/*
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
*/
.status-text {
  /* e.g. font-size: 12px; font-weight: 500; letter-spacing: 0.5px; */
}
.status-dots {
  /* e.g. display: flex; margin-left: 8px; */
}
.status-dot {
  /* e.g. width: 4px; height: 4px; background-color: rgba(255,255,255,0.5); border-radius: 50%; margin-left: 3px; animation: bounce 1s infinite; */
}
/*
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
*/
.status-icon {
  /* e.g. margin-left: 8px; */
}
.status-background {
  /* e.g. position: absolute; inset: 0; background: linear-gradient(45deg, rgba(255,255,255,0.1), transparent); border-radius: 16px; z-index: -1; */
}

/* Main title */
.main-title {
  /* e.g. position: relative; font-size: 36px; font-weight: bold; text-align: center; margin: 20px 0; */
}
.title-text {
  /* e.g. position: relative; z-index: 1; */
}
.title-glow-1,
.title-glow-2 {
  /* e.g. position: absolute; filter: blur(15px); opacity: 0.5; background: cyan; */
}
.title-sparkles {
  /* e.g. position: absolute; inset: 0; pointer-events: none; */
}
.sparkle {
  /* e.g. position: absolute; width: 6px; height: 6px; background: white; border-radius: 50%; animation: sparkle-anim 1.5s infinite; */
}
/*
@keyframes sparkle-anim {
  0%,100% { opacity: 0; transform: scale(0.5); }
  50% { opacity: 1; transform: scale(1.2); }
}
*/
.subtitle {
  /* e.g. text-align: center; font-size: 16px; color: #aaa; */
}
.rocket-emoji {
  /* e.g. margin-left: 8px; */
}

/* Category filter */
.category-btn {
  /* e.g. padding: 8px 16px; border-radius: 20px; margin: 5px; transition: all 0.3s ease; border: 1px solid transparent; position: relative; overflow: hidden; */
}
.category-btn.active {
  /* e.g. border-color: cyan; box-shadow: 0 0 15px cyan; */
}
.category-btn-content {
  /* e.g. display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; */
}
.category-indicators {
  /* e.g. display: flex; align-items: center; margin-left: 8px; */
}
/* .chevron-icon, .zap-icon { ... } */
.category-btn-hover,
.category-btn-blur,
.category-btn-active-bg,
.category-btn-active-glow {
  /* e.g. position: absolute; inset: 0; border-radius: inherit; pointer-events: none; */
}

/* Testimonial card */
.testimonial-card {
  /* Sizing is driven by Tailwind classes (flex-shrink-0 w-80 snap-start) */
}
.card-wrapper {
  position: relative;
  height: 100%;
}

/* Core card styling */
.card-main {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: rgba(30, 41, 59, 0.8);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.card-background {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.7;
}

/* — UPDATED: Centered header (date, category, stars) — */
.card-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 12px;
}

/* Date badge stays small & centered */
.date-badge {
  background: rgba(0, 0, 0, 0.3);
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 10px;
  margin-bottom: 6px;
}

/* Category text centered under the date */
.category-text {
  font-size: 12px;
  font-weight: 500;
  color: #ddd;
  margin-bottom: 6px;
}

/* The stars remain centered */
.rating-stars {
  display: flex;
}
.star-icon {
  color: #FFD700;
  width: 14px;
  height: 14px;
  margin-left: 2px;
}

/* Avatar + LinkedIn container */
.profile-section {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.avatar-container {
  position: relative;
  margin-right: 12px;
}
.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid transparent;
  position: relative;
  z-index: 1; /* Ensure avatar is behind LinkedIn badge */
}
.avatar-ring-1,
.avatar-ring-2,
.avatar-ring-3 {
  position: absolute;
  border-radius: 50%;
  border-style: solid;
  pointer-events: none;
}
/* (You can keep your ring animations here) */

/* — FIXED: Bring LinkedIn badge above the avatar — */
.linkedin-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 2; /* Higher than avatar */
  background: #0077B5;
  color: white;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid white;
}
.linkedin-icon {
  width: 10px;
  height: 10px;
}
.linkedin-glow {
  position: absolute;
  inset: -2px;
  background: radial-gradient(circle, rgba(0,119,181,0.6) 0%, transparent 70%);
  border-radius: 50%;
  z-index: -1;
  animation: pulse-linkedin 2s infinite;
}
@keyframes pulse-linkedin {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.2); opacity: 0.3; }
}

.profile-info {
  flex-grow: 1;
}
.profile-name {
  font-size: 16px;
  font-weight: 600;
}
.profile-role {
  font-size: 13px;
  color: #bbb;
}
.profile-company {
  font-size: 12px;
  color: #999;
}
.salary-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(0, 255, 0, 0.1);
  color: #0f0;
  padding: 3px 8px;
  border-radius: 10px;
  font-size: 11px;
  margin-top: 4px;
}
.trending-icon {
  margin-right: 4px;
}

/* Testimonial text */
.testimonial-text {
  margin: 12px 0;
  font-size: 13px;
  line-height: 1.6;
  color: #ddd;
  position: relative;
  padding: 0 10px;
}
.quote-left {
  position: absolute;
  left: -5px;
  top: -5px;
  font-size: 24px;
  opacity: 0.3;
}
.quote-right {
  position: absolute;
  right: -5px;
  bottom: -10px;
  font-size: 24px;
  opacity: 0.3;
}

/* Career progression (unchanged) */
.career-progression {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 16px 0;
  padding: 8px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}
.career-item {
  text-align: center;
}
.career-label {
  font-size: 10px;
  color: #aaa;
  margin-bottom: 2px;
}
.career-company {
  font-size: 12px;
  font-weight: 500;
}
.career-arrow-container {
  position: relative;
}
.career-arrow {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.arrow-icon {
  color: white;
}
/* (We removed the particles here as requested) */

/* Read More button (unchanged) */
.read-more-btn {
  margin-top: auto;
  background: transparent;
  border: 1px solid cyan;
  color: cyan;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}
/* (Any read-more backgrounds remain as is, if present) */

.card-border-glow {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(45deg, cyan, magenta);
  z-index: -1;
  filter: blur(5px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.testimonial-card:hover .card-border-glow {
  opacity: 0.7;
}

/* CTA Section (unchanged) */
.cta-container1 {
  /* e.g. position: relative; display: flex; justify-content: center; margin-top: 30px; */
}
.cta-btn {
  /* e.g. background: linear-gradient(45deg, cyan, magenta); color: white; padding: 12px 24px; border-radius: 30px; font-size: 16px; border: none; position: relative; overflow: hidden; */
}

/* --- Paste this at the end of your existing CSS file --- */
/* --- It includes new styles and overrides for the LinkedIn badge --- */

/* AVATAR & PROFILE SECTION STYLES */
.profile-section {
  display: flex;
  align-items: center; /* Vertically align items */
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.avatar-container {
  position: relative;
  flex-shrink: 0; /* Prevent the container from shrinking */
}

.avatar {
  position: relative;
  width: 5rem;  /* 80px */
  height: 5rem; /* 80px */
  border-radius: 50%; /* Make it a circle */
  background-size: cover;
  background-position: center;
  overflow: hidden;
  transition: all 0.7s ease;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.4);
  border: 3px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 1.5rem;
  z-index: 10;
}

.card-main:hover .avatar {
  transform: scale(1.1);
  border-color: rgba(59, 130, 246, 0.5);
}

.avatar-ring-1, .avatar-ring-2, .avatar-ring-3 {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}

.avatar-ring-1 { border: 1px solid rgba(255, 255, 255, 0.2); animation: pulse-ring 3s ease-in-out infinite; }
.avatar-ring-2 { border: 1px solid rgba(59, 130, 246, 0.2); transform: scale(1.1); animation: pulse-ring-delayed 3s ease-in-out infinite 0.5s; }
.avatar-ring-3 { border: 1px solid rgba(168, 85, 247, 0.1); transform: scale(1.2); animation: pulse-ring-slow 4s ease-in-out infinite 1s; }

/* --- MODIFICATION 3: LINKEDIN BADGE STYLES --- */

/* This is the clickable 'a' tag */
.linkedin-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 28px; /* Slightly larger for better clickability */
  height: 28px;
  background: linear-gradient(145deg, #0077B5, #0e66a2); /* LinkedIn blue gradient */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 119, 181, 0.5);
  transition: all 0.3s ease;
  border: 2px solid white; /* White border to pop against the avatar */
  z-index: 20; /* Ensure it's above the avatar */
  cursor: pointer;
}

.card-main:hover .linkedin-badge {
  transform: scale(1.2) rotate(10deg);
  box-shadow: 0 6px 15px rgba(0, 119, 181, 0.7);
}

.linkedin-icon {
  width: 14px; /* Icon size */
  height: 14px;
  color: white;
}

/* Optional glowing effect for the badge */
.linkedin-glow {
  position: absolute;
  inset: -4px;
  background: rgba(0, 119, 181, 0.5);
  border-radius: 50%;
  filter: blur(8px);
  transform: scale(1.2);
  opacity: 0;
  transition: all 0.5s ease;
  z-index: -1;
}

.card-main:hover .linkedin-badge .linkedin-glow {
  opacity: 1;
}

/* PROFILE INFO STYLES */
.profile-info {
  flex-grow: 1; /* Allow the info section to take remaining space */
}

.profile-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: white;
  margin-bottom: 0.25rem;
  transition: color 0.5s ease;
}

.card-main:hover .profile-name {
  color: #a7d8ff; /* Light blue on hover */
}

.profile-role {
  color: rgb(209, 213, 219);
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 0.75rem;
}

.salary-badge {
  margin-top: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  background: rgba(22, 163, 74, 0.15); /* Green background */
  border-radius: 9999px;
  border: 1px solid rgba(34, 197, 94, 0.4);
}

.trending-icon {
  width: 1rem;
  height: 1rem;
  color: #22c55e; /* Green icon */
}

.salary-text {
  color: #bbf7d0; /* Light green text */
  font-size: 0.875rem;
  font-weight: 700;
}


/* --- (Keep all your other CSS styles as they were) --- */

/* Any other CTA particle/orbit styles remain as is */


/*Video Testimony */

.epic_testimonial_universe {
  position: relative;
  min-height: 100vh;
  padding: 80px 20px;
  background: #0a0a0a;
  overflow: hidden;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Cinematic Background */
.epic_testimonial_cosmic_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.epic_testimonial_stars_layer {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(2px 2px at 20px 30px, #fff, transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 90px 40px, #fff, transparent),
    radial-gradient(1px 1px at 130px 80px, rgba(255,255,255,0.6), transparent),
    radial-gradient(2px 2px at 160px 30px, rgba(255,255,255,0.9), transparent);
  background-repeat: repeat;
  background-size: 200px 100px;
  animation: epic_testimonial_stars_twinkle 10s linear infinite;
}

@keyframes epic_testimonial_stars_twinkle {
  0%, 100% { opacity: 0.8; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-5px); }
}

.epic_testimonial_nebula {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.3;
  animation: epic_testimonial_nebula_drift 20s ease-in-out infinite;
}

.epic_testimonial_nebula_1 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, #ff6b6b, #4ecdc4, #45b7d1);
  top: 10%;
  left: 10%;
  animation-delay: 0s;
}

.epic_testimonial_nebula_2 {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, #f093fb, #f5576c, #4facfe);
  top: 60%;
  right: 20%;
  animation-delay: 7s;
}

.epic_testimonial_nebula_3 {
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, #43e97b, #38f9d7, #667eea);
  bottom: 20%;
  left: 30%;
  animation-delay: 14s;
}

@keyframes epic_testimonial_nebula_drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(30px, -20px) scale(1.1); }
  50% { transform: translate(-20px, 30px) scale(0.9); }
  75% { transform: translate(40px, 10px) scale(1.05); }
}

.epic_testimonial_aurora {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    45deg,
    transparent 0%,
    rgba(0, 255, 255, 0.1) 25%,
    transparent 50%,
    rgba(255, 0, 255, 0.1) 75%,
    transparent 100%
  );
  animation: epic_testimonial_aurora_wave 15s ease-in-out infinite;
}

@keyframes epic_testimonial_aurora_wave {
  0%, 100% { transform: translateX(-100%) skewX(0deg); opacity: 0.3; }
  50% { transform: translateX(100%) skewX(20deg); opacity: 0.6; }
}

/* Floating Particles */
.epic_testimonial_particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.epic_testimonial_particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: radial-gradient(circle, #00ffff, transparent);
  border-radius: 50%;
  animation: epic_testimonial_particle_float 15s linear infinite;
}

@keyframes epic_testimonial_particle_float {
  0% {
    transform: translateY(100vh) translateX(0) scale(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
    transform: translateY(90vh) translateX(10px) scale(1);
  }
  90% {
    opacity: 1;
    transform: translateY(10vh) translateX(-20px) scale(1);
  }
  100% {
    transform: translateY(-10vh) translateX(30px) scale(0);
    opacity: 0;
  }
}

/* Header Section */
.epic_testimonial_header_galaxy {
  position: relative;
  z-index: 10;
  text-align: center;
  margin-bottom: 80px;
}

.epic_testimonial_cosmic_badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(0, 255, 255, 0.1);
  border: 2px solid rgba(0, 255, 255, 0.3);
  border-radius: 50px;
  padding: 12px 24px;
  margin-bottom: 30px;
  backdrop-filter: blur(20px);
  overflow: hidden;
}

.epic_testimonial_badge_glow {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.4), transparent);
  animation: epic_testimonial_badge_scan 3s ease-in-out infinite;
}

@keyframes epic_testimonial_badge_scan {
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: 100%; }
}

.epic_testimonial_badge_icon {
  font-size: 20px;
  animation: epic_testimonial_star_pulse 2s ease-in-out infinite;
}

@keyframes epic_testimonial_star_pulse {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.2) rotate(180deg); }
}

.epic_testimonial_cosmic_title {
  font-size: 4rem;
  font-weight: 900;
  margin-bottom: 20px;
  line-height: 1.1;
}

.epic_testimonial_title_line {
  display: block;
  background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: epic_testimonial_title_glow 3s ease-in-out infinite;
}

.epic_testimonial_title_highlight {
  background: linear-gradient(135deg, #00ffff 0%, #ff00ff 50%, #ffff00 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: epic_testimonial_rainbow_flow 4s ease-in-out infinite;
}

@keyframes epic_testimonial_title_glow {
  0%, 100% { text-shadow: 0 0 20px rgba(255, 255, 255, 0.5); }
  50% { text-shadow: 0 0 30px rgba(255, 255, 255, 0.8); }
}

@keyframes epic_testimonial_rainbow_flow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.epic_testimonial_cosmic_subtitle {
  font-size: 1.3rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 50px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

/* Stats Constellation */
.epic_testimonial_stats_constellation {
  display: flex;
  justify-content: center;
  gap: 60px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.epic_testimonial_stat_planet {
  position: relative;
  width: 120px;
  height: 120px;
}

.epic_testimonial_stat_orbit {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid rgba(0, 255, 255, 0.3);
  border-radius: 50%;
  animation: epic_testimonial_orbit_pulse 3s ease-in-out infinite;
}

@keyframes epic_testimonial_orbit_pulse {
  0%, 100% { transform: scale(1); border-color: rgba(0, 255, 255, 0.3); }
  50% { transform: scale(1.1); border-color: rgba(0, 255, 255, 0.6); }
}

.epic_testimonial_stat_core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(0, 255, 255, 0.2), rgba(0, 0, 0, 0.8));
  border: 2px solid rgba(0, 255, 255, 0.5);
  border-radius: 50%;
  width: 80px;
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(20px);
}

.epic_testimonial_stat_number {
  font-size: 1.2rem;
  font-weight: 800;
  color: #00ffff;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
  margin-bottom: 2px;
}

.epic_testimonial_stat_label {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  font-weight: 600;
}

/* Main Theater */
.epic_testimonial_theater {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 40px;
  max-width: 1400px;
  margin: 0 auto;
}

/* Navigation Portals */
.epic_testimonial_nav_portal {
  position: relative;
  width: 70px;
  height: 70px;
  background: rgba(0, 0, 0, 0.8);
  border: 2px solid rgba(0, 255, 255, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #00ffff;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  backdrop-filter: blur(20px);
  overflow: hidden;
  flex-shrink: 0;
}

.epic_testimonial_nav_energy {
  position: absolute;
  width: 100%;
  height: 100%;
  background: conic-gradient(from 0deg, transparent, #00ffff, transparent);
  border-radius: 50%;
  opacity: 0;
  animation: epic_testimonial_energy_spin 2s linear infinite;
  transition: opacity 0.3s ease;
}

.epic_testimonial_nav_portal:hover .epic_testimonial_nav_energy {
  opacity: 1;
}

@keyframes epic_testimonial_energy_spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.epic_testimonial_nav_portal:hover {
  transform: scale(1.1);
  border-color: rgba(0, 255, 255, 0.8);
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.5);
}
.feature-link {
  color: inherit; /* Inherits the color from the parent text */
  text-decoration: none; /* Removes the default underline */
  font-weight: 600; /* Makes the link slightly bolder */
  transition: text-decoration 0.3s ease;
}

.feature-link:hover {
  color: #A855F7;
  text-decoration: underline; /* Adds an underline when you hover over the link */
  text-decoration-color: #A855F7; /* Optional: adds a colored underline */
}
/* Showcase Container */
.epic_testimonial_showcase {
  flex: 1;
  overflow: hidden;
  border-radius: 20px;
  position: relative;
}

.epic_testimonial_cards_universe {
  display: flex;
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  width: 100%;
}

.epic_testimonial_slide_dimension {
  display: flex;
  gap: 30px;
  
}

/* Hologram Cards */
.epic_testimonial_hologram_card {
  background: rgba(0, 0, 0, 0.9);
  border-radius: 24px;
  overflow: visible;
  position: relative;
  flex: 1;
  min-height: 700px;
  backdrop-filter: blur(20px);
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  animation: epic_testimonial_card_materialize 1s ease-out forwards;
  opacity: 0;
  transform: translateY(50px) scale(0.9);
  z-index: 10;
}

@keyframes epic_testimonial_card_materialize {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.epic_testimonial_hologram_card:hover {
  transform: translateY(-15px) scale(1.02);
  box-shadow: 
    0 30px 80px rgba(0, 255, 255, 0.3),
    inset 0 0 50px rgba(0, 255, 255, 0.1);
}

/* Holographic Borders */
.epic_testimonial_holo_border {
  position: absolute;
  background: linear-gradient(90deg, transparent, #00ffff, transparent);
  z-index: 5;
}

.epic_testimonial_holo_top, .epic_testimonial_holo_bottom {
  width: 100%;
  height: 2px;
  animation: epic_testimonial_holo_scan_h 3s ease-in-out infinite;
}

.epic_testimonial_holo_left, .epic_testimonial_holo_right {
  width: 2px;
  height: 100%;
  animation: epic_testimonial_holo_scan_v 3s ease-in-out infinite;
}

.epic_testimonial_holo_top { top: 0; animation-delay: 0s; }
.epic_testimonial_holo_right { right: 0; animation-delay: 0.75s; }
.epic_testimonial_holo_bottom { bottom: 0; animation-delay: 1.5s; }
.epic_testimonial_holo_left { left: 0; animation-delay: 2.25s; }

@keyframes epic_testimonial_holo_scan_h {
  0%, 100% { opacity: 0.3; transform: scaleX(0.5); }
  50% { opacity: 1; transform: scaleX(1); }
}

@keyframes epic_testimonial_holo_scan_v {
  0%, 100% { opacity: 0.3; transform: scaleY(0.5); }
  50% { opacity: 1; transform: scaleY(1); }
}

/* Video Portal */
.epic_testimonial_video_portal {
  position: relative;
  height: 280px;
  overflow: hidden;
  border-radius: 24px 24px 0 0;
}

.epic_testimonial_video_dimension {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1a1a2e, #16213e);
}

.epic_testimonial_video_screen {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.5s ease;
}

.epic_testimonial_hologram_card:hover .epic_testimonial_video_screen {
  transform: scale(1.05);
  filter: brightness(1.1) contrast(1.1);
}

/* Holographic Overlay */
.epic_testimonial_holo_overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 255, 255, 0.1) 50%,
    transparent 100%
  );
  pointer-events: none;
}

.epic_testimonial_scan_lines {
  position: absolute;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 255, 255, 0.03) 2px,
    rgba(0, 255, 255, 0.03) 4px
  );
  animation: epic_testimonial_scan_move 2s linear infinite;
}

@keyframes epic_testimonial_scan_move {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

.epic_testimonial_data_stream {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 80px;
  height: 20px;
  background: rgba(0, 255, 255, 0.2);
  border-radius: 10px;
  overflow: hidden;
}

.epic_testimonial_data_stream::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, #00ffff, transparent);
  animation: epic_testimonial_data_flow 1.5s ease-in-out infinite;
}

@keyframes epic_testimonial_data_flow {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* Epic Play Button */
.epic_testimonial_play_reactor {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  cursor: pointer;
  transition: all 0.4s ease;
}

.epic_testimonial_reactor_core {
  position: relative;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(0, 255, 255, 0.8), rgba(0, 0, 0, 0.9));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(0, 255, 255, 0.6);
  backdrop-filter: blur(20px);
}

.epic_testimonial_reactor_ring {
  position: absolute;
  border: 1px solid rgba(0, 255, 255, 0.4);
  border-radius: 50%;
  animation: epic_testimonial_ring_pulse 2s ease-in-out infinite;
}

.epic_testimonial_reactor_ring_1 {
  width: 100%;
  height: 100%;
  animation-delay: 0s;
}

.epic_testimonial_reactor_ring_2 {
  width: 120%;
  height: 120%;
  top: -10%;
  left: -10%;
  animation-delay: 0.5s;
}

.epic_testimonial_reactor_ring_3 {
  width: 140%;
  height: 140%;
  top: -20%;
  left: -20%;
  animation-delay: 1s;
}

@keyframes epic_testimonial_ring_pulse {
  0%, 100% { 
    transform: scale(1); 
    opacity: 0.6; 
    border-color: rgba(0, 255, 255, 0.4); 
  }
  50% { 
    transform: scale(1.1); 
    opacity: 1; 
    border-color: rgba(0, 255, 255, 0.8); 
  }
}

.epic_testimonial_play_icon {
  font-size: 24px;
  color: #00ffff;
  z-index: 10;
  position: relative;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
}

.epic_testimonial_reactor_pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  background: rgba(0, 255, 255, 0.3);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.epic_testimonial_play_reactor:hover .epic_testimonial_reactor_pulse {
  width: 200px;
  height: 200px;
}

.epic_testimonial_reactor_active .epic_testimonial_reactor_core {
  background: radial-gradient(circle, rgba(255, 0, 255, 0.8), rgba(0, 0, 0, 0.9));
  border-color: rgba(255, 0, 255, 0.6);
}

.epic_testimonial_reactor_active .epic_testimonial_play_icon {
  color: #ff00ff;
  text-shadow: 0 0 10px rgba(255, 0, 255, 0.8);
}

/* Quote Hologram */
.epic_testimonial_quote_hologram {
  position: absolute;
  bottom: -60px;
  left: 15px;
  right: 15px;
  background: rgba(0, 0, 0, 0.9);
  border: 1px solid rgba(0, 255, 255, 0.3);
  border-radius: 16px;
  padding: 16px;
  backdrop-filter: blur(20px);
  z-index: 20;
}

.epic_testimonial_quote_matrix {
  position: relative;
}

.epic_testimonial_quote_glyph {
  position: absolute;
  top: -10px;
  left: -5px;
  font-size: 3rem;
  color: rgba(0, 255, 255, 0.3);
  line-height: 1;
  pointer-events: none;
}

.epic_testimonial_quote_stream {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
  margin: 0;
  padding-left: 20px;
}

/* Data Panel */
.epic_testimonial_data_panel {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: calc(100% - 280px);
}

/* Profile Matrix */
.epic_testimonial_profile_matrix {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.epic_testimonial_avatar_container {
  position: relative;
  flex-shrink: 0;
}

.epic_testimonial_avatar_field {
  position: relative;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(0, 255, 255, 0.5);
}

.epic_testimonial_avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s ease;
}

.epic_testimonial_avatar_glow {
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #00ffff, #ff00ff, #ffff00, #00ffff);
  opacity: 0;
  animation: epic_testimonial_avatar_spin 3s linear infinite;
  transition: opacity 0.3s ease;
}

.epic_testimonial_hologram_card:hover .epic_testimonial_avatar_glow {
  opacity: 1;
}

@keyframes epic_testimonial_avatar_spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.epic_testimonial_verified_seal {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 24px;
  height: 24px;
  background: radial-gradient(circle, #00ff00, #00aa00);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  border: 2px solid rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
}

.epic_testimonial_identity_data {
  flex: 1;
  min-width: 0;
}

.epic_testimonial_name_display {
  font-size: 1.2rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 6px;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}

.epic_testimonial_company_badge {
  display: inline-block;
  background: linear-gradient(135deg, #00ffff, #0080ff);
  color: #000;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
}

.epic_testimonial_role_tag {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}

.epic_testimonial_rating_stars {
  display: flex;
  gap: 4px;
  margin-top: 8px;
}

.epic_testimonial_star {
  font-size: 16px;
  opacity: 0.3;
  transition: all 0.3s ease;
  animation: epic_testimonial_star_twinkle 2s ease-in-out infinite;
}

.epic_testimonial_star_active {
  opacity: 1;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
}

@keyframes epic_testimonial_star_twinkle {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* Metrics Dashboard */
.epic_testimonial_metrics_dashboard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.epic_testimonial_metric_card {
  background: rgba(0, 255, 255, 0.1);
  border: 1px solid rgba(0, 255, 255, 0.3);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
}

.epic_testimonial_metric_card:hover {
  background: rgba(0, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 255, 255, 0.2);
}

.epic_testimonial_metric_icon {
  font-size: 20px;
  flex-shrink: 0;
}

.epic_testimonial_metric_data {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.epic_testimonial_metric_label {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 2px;
  font-weight: 600;
}

.epic_testimonial_metric_value {
  font-size: 0.85rem;
  color: #00ffff;
  font-weight: 700;
  text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
}

/* Skills Matrix */
.epic_testimonial_skills_matrix {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.epic_testimonial_skill_node {
  position: relative;
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(0, 255, 255, 0.3);
  border-radius: 8px;
  padding: 8px 12px;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
  overflow: hidden;
  animation: epic_testimonial_skill_appear 0.6s ease-out forwards;
  opacity: 0;
  transform: translateY(10px);
}

@keyframes epic_testimonial_skill_appear {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.epic_testimonial_skill_glow {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.3), transparent);
  transition: all 0.3s ease;
}

.epic_testimonial_skill_node:hover {
  border-color: rgba(0, 255, 255, 0.6);
  color: #00ffff;
  transform: translateY(-2px);
}

.epic_testimonial_skill_node:hover .epic_testimonial_skill_glow {
  left: 100%;
}

/* Achievement Seal */
.epic_testimonial_achievement_seal {
  position: relative;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.2), rgba(255, 140, 0, 0.1));
  border: 2px solid rgba(255, 215, 0, 0.5);
  border-radius: 16px;
  padding: 16px;
  text-align: center;
  overflow: hidden;
}

.epic_testimonial_achievement_ring {
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border: 2px solid rgba(255, 215, 0, 0.3);
  border-radius: 20px;
  animation: epic_testimonial_achievement_pulse 3s ease-in-out infinite;
}

@keyframes epic_testimonial_achievement_pulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.05); opacity: 1; }
}

.epic_testimonial_achievement_content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.epic_testimonial_achievement_icon {
  font-size: 20px;
  animation: epic_testimonial_rocket_launch 2s ease-in-out infinite;
}

@keyframes epic_testimonial_rocket_launch {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.epic_testimonial_achievement_text {
  font-size: 0.9rem;
  font-weight: 700;
  color: #ffd700;
  text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
}
/* 1) Mobile-first defaults: these styles apply everywhere EXCEPT 
      where you override them below */
      .epic_testimonial_explore_btn {
        display: flex;
        position: relative;
        background: linear-gradient(135deg,#00ffff,#0080ff);
        color: #000;
        border: none;
        border-radius: 12px;
        padding: 24px 20px;      /* ← mobile padding */
        font-weight: 700;
        font-size: 0.9rem;
        cursor: pointer;
        align-items: center;
        justify-content: space-between;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        overflow: hidden;
        transition: all .4s cubic-bezier(.175,.885,.32,1.275);
      }
      
      /* 2) Desktop override: anything ≥ 481px uses these instead */
      @media (min-width: 481px) {
        .epic_testimonial_explore_btn {
          padding: 14px 20px;    /* ← desktop padding */
          /* you can change any other properties here, too */
        }
      }
      

.epic_testimonial_btn_energy {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.5s ease;
}

.epic_testimonial_explore_btn:hover .epic_testimonial_btn_energy {
  left: 100%;
}

.epic_testimonial_explore_btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 30px rgba(0, 255, 255, 0.3);
}

.epic_testimonial_btn_arrow {
  font-size: 16px;
  transition: transform 0.3s ease;
}

.epic_testimonial_explore_btn:hover .epic_testimonial_btn_arrow {
  transform: translateX(5px);
}

/* Quantum Navigation */
.epic_testimonial_quantum_nav {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 60px;
}

.epic_testimonial_quantum_dot {
  position: relative;
  width: 50px;
  height: 50px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.epic_testimonial_quantum_core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background: rgba(0, 255, 255, 0.5);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.epic_testimonial_quantum_field {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border: 2px solid rgba(0, 255, 255, 0.3);
  border-radius: 50%;
  opacity: 0;
  transition: all 0.3s ease;
}

.epic_testimonial_quantum_active .epic_testimonial_quantum_core {
  background: #00ffff;
  width: 16px;
  height: 16px;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
}

.epic_testimonial_quantum_active .epic_testimonial_quantum_field {
  opacity: 1;
  border-color: rgba(0, 255, 255, 0.8);
  animation: epic_testimonial_quantum_spin 2s linear infinite;
}

.epic_testimonial_quantum_dot:hover .epic_testimonial_quantum_field {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.2);
}

@keyframes epic_testimonial_quantum_spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* YouTube Video Modal */
.epic_testimonial_video_modal_overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(20px);
  animation: epic_testimonial_modal_fade_in 0.4s ease-out;
}

@keyframes epic_testimonial_modal_fade_in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.epic_testimonial_video_modal_container {
  background: rgba(0, 0, 0, 0.95);
  border: 2px solid rgba(0, 255, 255, 0.3);
  border-radius: 24px;
  overflow: hidden;
  max-width: 90vw;
  max-height: 90vh;
  width: 800px;
  backdrop-filter: blur(30px);
  position: relative;
  animation: epic_testimonial_modal_slide_up 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 0 50px rgba(0, 255, 255, 0.3);
}

@keyframes epic_testimonial_modal_slide_up {
  0% {
    opacity: 0;
    transform: translateY(50px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.epic_testimonial_modal_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(0, 255, 255, 0.2);
  background: rgba(0, 255, 255, 0.05);
}

.epic_testimonial_modal_profile {
  display: flex;
  align-items: center;
  gap: 12px;
}

.epic_testimonial_modal_profile img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid rgba(0, 255, 255, 0.5);
  object-fit: cover;
}

.epic_testimonial_modal_profile h3 {
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 2px;
}

.epic_testimonial_modal_profile span {
  color: #00ffff;
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.epic_testimonial_modal_close {
  position: relative;
  width: 50px;
  height: 50px;
  background: rgba(255, 0, 0, 0.1);
  border: 2px solid rgba(255, 0, 0, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #ff4444;
  transition: all 0.3s ease;
  overflow: hidden;
}

.epic_testimonial_close_energy {
  position: absolute;
  width: 100%;
  height: 100%;
  background: conic-gradient(from 0deg, transparent, #ff4444, transparent);
  border-radius: 50%;
  opacity: 0;
  animation: epic_testimonial_energy_spin 2s linear infinite;
  transition: opacity 0.3s ease;
}

.epic_testimonial_modal_close:hover {
  background: rgba(255, 0, 0, 0.2);
  border-color: rgba(255, 0, 0, 0.6);
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(255, 0, 0, 0.4);
}

.epic_testimonial_modal_close:hover .epic_testimonial_close_energy {
  opacity: 1;
}

.epic_testimonial_video_container_modal {
  position: relative;
  width: 100%;
  height: 450px;
  background: #000;
}

.epic_testimonial_video_frame_modal {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.epic_testimonial_youtube_iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: #000;
}

.epic_testimonial_video_holo_effects {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.epic_testimonial_holo_corner {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 2px solid #00ffff;
  opacity: 0.6;
  animation: epic_testimonial_corner_pulse 3s ease-in-out infinite;
}

.epic_testimonial_holo_tl {
  top: 10px;
  left: 10px;
  border-right: none;
  border-bottom: none;
}

.epic_testimonial_holo_tr {
  top: 10px;
  right: 10px;
  border-left: none;
  border-bottom: none;
}

.epic_testimonial_holo_bl {
  bottom: 10px;
  left: 10px;
  border-right: none;
  border-top: none;
}

.epic_testimonial_holo_br {
  bottom: 10px;
  right: 10px;
  border-left: none;
  border-top: none;
}

@keyframes epic_testimonial_corner_pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}

.epic_testimonial_modal_footer {
  padding: 20px 24px;
  background: rgba(0, 255, 255, 0.05);
  border-top: 1px solid rgba(0, 255, 255, 0.2);
}

.epic_testimonial_modal_success_metrics {
  display: flex;
  justify-content: space-around;
  gap: 20px;
  flex-wrap: wrap;
}

.epic_testimonial_modal_metric {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 255, 255, 0.1);
  border: 1px solid rgba(0, 255, 255, 0.3);
  border-radius: 12px;
  padding: 8px 16px;
  flex: 1;
  min-width: 120px;
  justify-content: center;
  transition: all 0.3s ease;
}

.epic_testimonial_modal_metric:hover {
  background: rgba(0, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 255, 255, 0.2);
}

.epic_testimonial_modal_metric_icon {
  font-size: 16px;
  flex-shrink: 0;
}

.epic_testimonial_modal_metric_text {
  color: #00ffff;
  font-weight: 600;
  font-size: 0.9rem;
  text-align: center;
}

/* Responsive Design */
@media (max-width: 1200px) {
  .epic_testimonial_slide_dimension {
    gap: 20px;
  }
}

@media (max-width: 768px) {
  /* 1) Enable horizontal swipe on the showcase */
  .epic_testimonial_showcase {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    overflow-y: visible !important;
  }

  /* 2) Line up all cards in one row */
  .epic_testimonial_cards_universe {
    display: flex !important;
    transform: none !important;
    transition: none !important;
    gap: 16px;
  }

  /* 3) Remove the old “slide” wrappers completely */
  .epic_testimonial_slide_dimension {
    display: contents !important;
  }

  /* 4) Make each card 90vw wide, snap into place */
  .epic_testimonial_hologram_card {
    flex: 0 0 auto !important;
    width: 90vw !important;
    max-width: none !important;
    scroll-snap-align: start !important;
    margin-right: 16px !important;
  }

  /* 5) Hide desktop arrows on mobile */
  .epic_testimonial_nav_portal {
    display: none !important;
  }
}



@media (max-width: 480px) {
  .epic_testimonial_cosmic_title {
    font-size: 2rem;
  }

  .epic_testimonial_stats_constellation {
    flex-direction: column;
    align-items: center;
  }

  .epic_testimonial_video_portal {
    height: 200px;
  }

  .epic_testimonial_profile_matrix {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .epic_testimonial_skills_matrix {
    grid-template-columns: 1fr;
  }

  .epic_testimonial_video_modal_container {
    width: 95vw;
    max-width: 400px;
  }

  .epic_testimonial_video_container_modal {
    height: 250px;
  }

  .epic_testimonial_modal_success_metrics {
    flex-direction: column;
  }
}


@media (max-width: 768px) {
  .epic_testimonial_showcase {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    overflow-y: visible !important;
  }
  .epic_testimonial_cards_universe {
    display: flex !important;
    transform: none !important;
    transition: none !important;
    gap: 16px;
  }
  .epic_testimonial_slide_dimension {
    display: contents !important;
  }
  .epic_testimonial_hologram_card {
    flex: 0 0 90vw !important;
    width: 90vw !important;
    max-width: none !important;
    scroll-snap-align: start !important;
    margin-right: 16px !important;
  }
}

/* --- Paste this at the end of your existing CSS file --- */
/* --- It includes new styles and overrides for the LinkedIn badge --- */

/* AVATAR & PROFILE SECTION STYLES */
.profile-section {
  display: flex;
  align-items: center; /* Vertically align items */
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.avatar-container {
  position: relative;
  flex-shrink: 0; /* Prevent the container from shrinking */
}

.avatar {
  position: relative;
  width: 5rem;  /* 80px */
  height: 5rem; /* 80px */
  border-radius: 50%; /* Make it a circle */
  background-size: cover;
  background-position: center;
  overflow: hidden;
  transition: all 0.7s ease;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.4);
  border: 3px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 1.5rem;
  z-index: 10;
}

.card-main:hover .avatar {
  transform: scale(1.1);
  border-color: rgba(59, 130, 246, 0.5);
}

.avatar-ring-1, .avatar-ring-2, .avatar-ring-3 {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}

.avatar-ring-1 { border: 1px solid rgba(255, 255, 255, 0.2); animation: pulse-ring 3s ease-in-out infinite; }
.avatar-ring-2 { border: 1px solid rgba(59, 130, 246, 0.2); transform: scale(1.1); animation: pulse-ring-delayed 3s ease-in-out infinite 0.5s; }
.avatar-ring-3 { border: 1px solid rgba(168, 85, 247, 0.1); transform: scale(1.2); animation: pulse-ring-slow 4s ease-in-out infinite 1s; }

/* --- MODIFICATION 3: LINKEDIN BADGE STYLES --- */

/* This is the clickable 'a' tag */
.linkedin-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 35px; /* Slightly larger for better clickability */
  height: 35px;
  background: linear-gradient(145deg, #0077B5, #0e66a2); /* LinkedIn blue gradient */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 119, 181, 0.5);
  transition: all 0.3s ease;
  border: 2px solid white; /* White border to pop against the avatar */
  z-index: 20; /* Ensure it's above the avatar */
  cursor: pointer;
}

.card-main:hover .linkedin-badge {
  transform: scale(1.2) rotate(10deg);
  box-shadow: 0 6px 15px rgba(0, 119, 181, 0.7);
}

.linkedin-icon {
  width: 14px; /* Icon size */
  height: 14px;
  color: white;
}

/* Optional glowing effect for the badge */
.linkedin-glow {
  position: absolute;
  inset: -4px;
  background: rgba(0, 119, 181, 0.5);
  border-radius: 50%;
  filter: blur(8px);
  transform: scale(1.2);
  opacity: 0;
  transition: all 0.5s ease;
  z-index: -1;
}

.card-main:hover .linkedin-badge .linkedin-glow {
  opacity: 1;
}

/* PROFILE INFO STYLES */
.profile-info {
  flex-grow: 1; /* Allow the info section to take remaining space */
}

.profile-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: white;
  margin-bottom: 0.25rem;
  transition: color 0.5s ease;
}

.card-main:hover .profile-name {
  color: #a7d8ff; /* Light blue on hover */
}

.profile-role {
  color: rgb(209, 213, 219);
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 0.75rem;
}

.salary-badge {
  margin-top: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  background: rgba(22, 163, 74, 0.15); /* Green background */
  border-radius: 9999px;
  border: 1px solid rgba(34, 197, 94, 0.4);
}

.trending-icon {
  width: 1rem;
  height: 1rem;
  color: #22c55e; /* Green icon */
}

.salary-text {
  color: #bbf7d0; /* Light green text */
  font-size: 0.875rem;
  font-weight: 700;
}

/* File: CommunitySection.css */

/* --- 1. Scoped Light Theme & Variables --- */
.logicmojo-community-section {
  --background: 0 0% 100%; /* White */
  --foreground: 220 15% 20%; /* Dark Blue-Gray Text */
  --card: 0 0% 100%; /* White */
  --card-foreground: 220 15% 20%;
  --primary: 250 80% 58%;
  --primary-foreground: 0 0% 100%;
  --primary-glow: 260 75% 65%;
  --secondary: 210 95% 55%;
  --muted: 220 20% 92%;
  --muted-foreground: 220 10% 45%;
  --accent: 330 80% 55%;
  --border: 220 20% 88%;
  --ring: 250 80% 58%;
  --radius: 0.75rem;
  --shadow-card: 0 4px 20px hsl(var(--primary) / 0.08);
  --shadow-card-hover: 0 8px 30px hsl(var(--primary) / 0.15);
  
  /* Scoped global styles */
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- 2. Animations --- */
@keyframes pulse { 50% { opacity: 0.7; } }
@keyframes fade-in {
  from { opacity: 0; transform: translateY(1rem); }
  to { opacity: 1; transform: translateY(0); }
}
.logicmojo-community-section .animate-fade-in {
  animation: fade-in 0.5s ease-out backwards;
}

/* --- 3. Hero Section --- */
.logicmojo-community-section .hero-section {
  position: relative; overflow: hidden;
  background-color: hsl(var(--muted) / 0.3);
  padding: 6rem 1rem;
}
.logicmojo-community-section .hero-grid-background {
  display: none; /* Grid pattern is too noisy for light mode */
}
.logicmojo-community-section .hero-content { position: relative; max-width: 80rem; margin: auto; text-align: center; }
.logicmojo-community-section .hero-icon-container { margin-bottom: 2rem; display: flex; justify-content: center; }
.logicmojo-community-section .hero-icon-wrapper {
  position: relative; border-radius: 9999px;
  background-image: linear-gradient(to bottom right, hsl(var(--primary)), hsl(var(--primary-glow)));
  padding: 1.5rem;
}
.logicmojo-community-section .hero-icon-glow {
  position: absolute; inset: 0; border-radius: 9999px;
  background-image: linear-gradient(to right, hsl(var(--primary)), hsl(var(--primary-glow)));
  opacity: 0.4; filter: blur(32px);
  animation: pulse 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.logicmojo-community-section .main-heading { margin-bottom: 1.5rem; font-size: 3rem; font-weight: 800; letter-spacing: -0.025em; }
.logicmojo-community-section .gradient-text {
  background-image: linear-gradient(to right, hsl(var(--primary)), hsl(var(--primary-glow)), hsl(var(--secondary)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.logicmojo-community-section .subheading { max-width: 42rem; margin: 0 auto 3rem; font-size: 1.125rem; color: hsl(var(--muted-foreground)); }

/* --- 4. Stats Grid --- */
.logicmojo-community-section .stats-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; max-width: 48rem; margin: 0 auto; }
.logicmojo-community-section .stat-item { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.logicmojo-community-section .stat-icon-wrapper { border-radius: 9999px; padding: 0.75rem; }
.logicmojo-community-section .stat-icon-wrapper.primary { background-color: hsl(var(--primary) / 0.1); } .logicmojo-community-section .text-primary { color: hsl(var(--primary)); }
.logicmojo-community-section .stat-icon-wrapper.secondary { background-color: hsl(var(--secondary) / 0.1); } .logicmojo-community-section .text-secondary { color: hsl(var(--secondary)); }
.logicmojo-community-section .stat-icon-wrapper.accent { background-color: hsl(var(--accent) / 0.1); } .logicmojo-community-section .text-accent { color: hsl(var(--accent)); }
.logicmojo-community-section .stat-number { font-size: 1.875rem; font-weight: 700; }
.logicmojo-community-section .stat-label { font-size: 0.875rem; color: hsl(var(--muted-foreground)); }

/* --- 5. Students Section --- */
.logicmojo-community-section .students-section { padding: 5rem 1rem; }
.logicmojo-community-section .section-container { max-width: 80rem; margin: 0 auto; }
.logicmojo-community-section .section-header { text-align: center; margin-bottom: 4rem; }
.logicmojo-community-section .section-title { margin-bottom: 1rem; font-size: 2.25rem; font-weight: 700; }
.logicmojo-community-section .section-subtitle { max-width: 42rem; margin: 0 auto; font-size: 1.125rem; color: hsl(var(--muted-foreground)); }
.logicmojo-community-section .scroller-container { display: flex; flex-direction: column; gap: 2rem; }
.logicmojo-community-section .horizontal-scroller { display: flex; gap: 1rem; padding-bottom: 1rem; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.logicmojo-community-section .horizontal-scroller::-webkit-scrollbar { display: none; }
.logicmojo-community-section .scroller-item { flex: 0 0 90%; }

/* --- 6. Card & Button Primitives --- */
.logicmojo-community-section .card-base { border-radius: var(--radius); border: 1px solid hsl(var(--border)); background-color: hsl(var(--card)); color: hsl(var(--card-foreground)); box-shadow: var(--shadow-card); }
.logicmojo-community-section .button-base { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; white-space: nowrap; border-radius: 0.375rem; font-size: 0.875rem; font-weight: 500; transition: all 0.2s; cursor: pointer; border: none; }
.logicmojo-community-section .button-base:focus-visible { outline: none; box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring)); }
.logicmojo-community-section .button-base.variant-github { background-color: hsl(var(--foreground)); color: hsl(var(--background)); font-weight: 600; }
.logicmojo-community-section .button-base.variant-github:hover { background-color: hsl(var(--foreground) / 0.9); }
.logicmojo-community-section .button-base.size-lg { height: 2.75rem; padding: 0 2rem; border-radius: 0.5rem; }

/* --- 7. Student Card --- */
.logicmojo-community-section .student-card { transition-property: transform, box-shadow; transition-duration: 300ms; }
.logicmojo-community-section .student-card.group:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.logicmojo-community-section .avatar-container { margin-bottom: 1rem; display: flex; justify-content: center; }
.logicmojo-community-section .avatar-image {
  position: relative; height: 6rem; width: 6rem; border-radius: 9999px;
  border: 4px solid hsl(var(--background)); object-fit: cover;
  box-shadow: 0 0 0 1px hsl(var(--border)), 0 0 0 4px hsl(var(--primary) / 0.2);
  transition: all 300ms ease;
}
.logicmojo-community-section .group:hover .avatar-image { box-shadow: 0 0 0 1px hsl(var(--border)), 0 0 0 4px hsl(var(--primary) / 0.4); }
.logicmojo-community-section .avatar-glow { display: none; } /* Glow is not effective on light mode */
.logicmojo-community-section .student-name { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.25rem; }
.logicmojo-community-section .student-username { font-size: 0.875rem; color: hsl(var(--muted-foreground)); font-family: monospace; }
.logicmojo-community-section .student-blurb {
  margin-bottom: 1.5rem; font-size: 0.875rem; color: hsl(var(--muted-foreground)); min-height: 2.5rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.logicmojo-community-section .button-icon { height: 1rem; width: 1rem; transition: transform 300ms ease; }
.logicmojo-community-section .group-btn:hover .button-icon { transform: rotate(12deg); }
.logicmojo-community-section .card-decorative-overlay { display: none; } /* Overlay not needed for light mode */

/* --- 8. Footer --- */
.logicmojo-community-section .footer { border-top: 1px solid hsl(var(--border)); background-color: hsl(var(--muted) / 0.3); padding: 3rem 1rem; }
.logicmojo-community-section .footer-container { max-width: 80rem; margin: 0 auto; text-align: center; }

/* --- 9. Helper Classes --- */
.logicmojo-community-section .relative { position: relative; }
.logicmojo-community-section .block { display: block; }
.logicmojo-community-section .w-full { width: 100%; }
.logicmojo-community-section .h-16, .logicmojo-community-section .w-16 { height: 4rem; width: 4rem; }
.logicmojo-community-section .h-6, .logicmojo-community-section .w-6 { height: 1.5rem; width: 1.5rem; }
.logicmojo-community-section .text-primary-foreground { color: hsl(var(--primary-foreground)); }
.logicmojo-community-section .text-muted-foreground { color: hsl(var(--muted-foreground)); }
.logicmojo-community-section .text-center { text-align: center; }
.logicmojo-community-section .mb-3 { margin-bottom: 0.75rem; }
.logicmojo-community-section .p-6 { padding: 1.5rem; }
.logicmojo-community-section .text-sm { font-size: 0.875rem; }

/* --- 10. Responsive Breakpoints --- */
@media (min-width: 640px) {
  .logicmojo-community-section .main-heading { font-size: 3.75rem; }
  .logicmojo-community-section .stats-grid { grid-template-columns: repeat(3, 1fr); }
  .logicmojo-community-section .scroller-item { flex-basis: 50%; }
}
@media (min-width: 1024px) {
  .logicmojo-community-section .main-heading { font-size: 4.5rem; }
  .logicmojo-community-section .scroller-item { flex-basis: 33.3333%; }
}