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: 0px 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: 22px;
font-weight: 600;
border: none;
width: 200px;
padding: 10px 10px 16px 10px;
}
.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;
min-height: 26rem;
perspective: 3000px;
animation: cardCosmicEntrance 1.5s cubic-bezier(0.23, 1, 0.32, 1) both;
}
.program-highlights1 .highlight-card1 {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
}
.highlight-card1 {
position: relative;
cursor: pointer;
height: 10rem;
perspective: 3000px;
animation: cardCosmicEntrance 1.5s cubic-bezier(0.23, 1, 0.32, 1) both;
}
.highlight-card.large {
grid-column: span 2;
}
.card-inner {
position: relative;
width: 100%;
min-height: 26rem;
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;
top: 0;
left: 0;
width: 100%;
height: 100%;
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: 1.5rem;
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: 3rem;
height: 3rem;
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;
top: 0;
left: 0;
width: 100%;
height: 100%;
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: 1.25rem 1.5rem;
height: 100%;
display: flex;
flex-direction: column;
overflow-y: auto;
}
.back-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.75rem;
animation: backHeaderSlide 0.6s ease-out;
}
.award-icon {
width: 1.5rem;
height: 1.5rem;
flex-shrink: 0;
animation: awardBounce 2s ease-in-out infinite 0.5s;
}
.back-title-section h3 {
font-size: 1.15rem;
font-weight: 700;
line-height: 1.2;
}
.back-title-section p {
color: rgba(255, 255, 255, 0.8);
font-size: 0.75rem;
}
.back-description {
color: rgba(255, 255, 255, 0.93);
line-height: 1.5;
margin-bottom: 0.75rem;
font-size: 0.8rem;
animation: backContentFade 0.8s ease-out 0.2s both;
word-wrap: break-word;
overflow-wrap: break-word;
}
.back-description.large {
font-size: 0.8rem;
}
.back-description.small {
font-size: 0.78rem;
}
.features-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.4rem;
margin-bottom: 0.75rem;
flex: 1 1 auto;
}
.feature-item1 {
display: flex;
align-items: center;
gap: 0.4rem;
background: rgba(255, 255, 255, 0.1);
border-radius: 0.4rem;
padding: 0.35rem 0.5rem;
backdrop-filter: blur(2px);
animation: featureAppear 0.5s ease-out both;
min-width: 0;
}
.feature-dot {
width: 0.35rem;
height: 0.35rem;
background: white;
border-radius: 50%;
flex-shrink: 0;
animation: featurePulse 1s ease-in-out infinite;
}
.feature-text1 {
font-size: 0.7rem;
color: rgba(255, 255, 255, 0.9);
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.back-footer {
margin-top: auto;
flex-shrink: 0;
padding-top: 0.25rem;
animation: backFooterSlide 0.6s ease-out 0.4s both;
}
.back-button {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border-radius: 0.75rem;
padding: 0.5rem 0.75rem;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.25);
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.75rem;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.back-chevron {
width: 1rem;
height: 1rem;
transform: rotate(180deg);
transition: all 0.3s ease;
}
.back-button:hover .back-chevron {
animation: backChevronBounce 1s ease-in-out infinite;
}
.back-sparkles {
width: 1rem;
height: 1rem;
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 {
min-height: 24rem;
}
.card-inner {
min-height: 24rem;
}
.highlight-card.large {
grid-column: span 1;
}
.card-content {
padding: 1.25rem;
}
.back-content {
padding: 1rem 1.25rem;
}
.card-title {
font-size: 1rem;
}
.card-number {
font-size: 1.7rem;
}
.features-grid {
grid-template-columns: repeat(2, 1fr);
gap: 0.3rem;
}
.back-description {
font-size: 0.75rem;
line-height: 1.4;
margin-bottom: 0.5rem;
}
.back-title-section h3 {
font-size: 1rem;
}
.feature-text1 {
font-size: 0.65rem;
}
.feature-item1 {
padding: 0.25rem 0.4rem;
}
.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 {
min-height: 22rem;
}
.card-inner {
min-height: 22rem;
}
.highlights-grid {
grid-template-columns: 1fr;
}
.card-header {
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
}
.number-section {
text-align: left;
}
.back-content {
padding: 1rem;
}
.back-header {
margin-bottom: 0.5rem;
}
.features-grid {
grid-template-columns: repeat(2, 1fr);
gap: 0.3rem;
}
.feature-text1 {
font-size: 0.65rem;
}
.back-description {
font-size: 0.75rem;
line-height: 1.4;
}
}
/* Hide scrollbar on back-content but allow scrolling */
.back-content::-webkit-scrollbar {
width: 0;
display: none;
}
.back-content {
-ms-overflow-style: none;
scrollbar-width: none;
}
/*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: -28px;
}
/* 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;
}
.card-main:hover .linkedin-badge {
transform: scale(1.2) rotate(10deg);
box-shadow: 0 6px 15px rgba(0, 119, 181, 0.7);
}
.linkedin-badge {
position: absolute;
bottom: 0;
right: 0;
width: 40px; /* Slightly larger for better clickability */
height: 40px;
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;
}
.linkedin-icon {
width: 14px; /* Icon size */
height: 14px;
color: white;
}
.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;
}
.card-main:hover .linkedin-badge .linkedin-glow {
opacity: 1;
}
@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; */
}
/* 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);
}
/* 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;
}
}
.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 {
text-decoration: underline; /* Adds an underline when you hover over the link */
text-decoration-color: #A855F7; /* Optional: adds a colored underline */
}
@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;
}
}
/* 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%; }
}