/*
Theme Name:Junior
Description:Online Learning Platform
Author:WayoLabs
Author URI: https://WayoLabs.com
Version 1.1
*/
body{
position:relative; float:left;
padding: 0px !important;
margin: 0px !important;
line-height: 1.5; /* 1.6 times the font size */
font-family: "Quicksand", sans-serif;
font-optical-sizing: auto;
/*
font-weight: 700;
font-style: normal;
*/
background:#efefe3;
background:#f4f4ed;
background:rgb(248, 248, 243);
background-color: #ededea;
background-color: #f5f5f3;
overflow-x:hidden;
}
h2 a{
font-family: "Oswald", serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
font-size:45px;
color:#454545;
}
/**
header{
position: relative;
float:left;
width:100%;
box-sizing: border-box;
background-color: #efefef;
}
**/
.site-header{
position: fixed;
top:0px;
float:left;
width:100%;
box-sizing: border-box;
height:65px;
background-color: #fff;
z-index: 2000;
/*background-color: #000000;*/
border-bottom:solid 2px #000;
background: rgba(255, 255, 255, 0.9); /* semi-transparent */
backdrop-filter: blur(18px);
overflow: hidden;
}
.explore-icon-wrap{
position: relative;float:left;
width:60px; height:100%;
box-sizing: border-box;
border-right: solid 1px #1a1a1a;
}
.explore-icon {
margin-top:20px;margin-left:20px;
position: relative;
float: left;
width: 20px;
height: 20px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 4px;
cursor: pointer;
}
.explore-icon span {
background: #302f30;
border-radius: 2px;
}
.logo{
position: relative;
float:left;
width:auto;
height:100%;
box-sizing: border-box;
left:5px;
}
.logo a{
position: relative;
float:left;
width:100%;
height:100%;
display:block;
}
.logo a img{
position: relative;
float:left;
width:auto !important;
height:100% !important;
}
/* ===== global Menu ===== */
/* ===== Overlay ===== */
.global-menu-overlay{
position: fixed;
inset: 0;
background: rgba(8, 0, 255, 0.1);
backdrop-filter: blur(2px);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
z-index: 2500;
}
.global-menu-overlay.active{
opacity: 1;
pointer-events: all;
}
.global-menu-flap{
position: fixed;
float:left;
top:0px;
left: -200%;
width:20%;
height:100%;
box-sizing: border-box;
z-index:3000;
background: rgba(241, 241, 238, 0.9);
background: rgba(255, 255, 0, 0.9);
backdrop-filter: blur(8px);
}
/* ===== Responsive ===== */
/* Tablets */
@media (max-width: 1024px){
.global-menu-flap{
width: 30%;
}
}
/* Mobile */
@media (max-width: 768px){
.global-menu-flap{
width: 100%;
}
}
.global-menu-flap.active {
left: 0;
}
.global-menu-close-btn{
position: relative;
float: right;
font-size: 32px;
cursor: pointer;
font-weight: bold;
width:50px;
height: 50px;
text-align: center;
box-sizing: border-box;
display: block;
margin-bottom:10px;
z-index:3500;
}
.global-menu-flap-container{
position: relative;
width: 100%;
height: auto;
background: none;
box-sizing: border-box;
}
.global-menu-wrap{
position: relative;
padding: 20px;
width: 100%;
height:auto;
background: none;
box-sizing: border-box;
}
.global-menu{
position: relative;
float:left;
width:100%;
height:auto;
box-sizing: border-box;
font-size:30px;
font-weight: 600;
color:black;
margin-bottom:5px;
cursor:pointer;
}
.global-menu a{
position: relative;
float:left;
width:100%;
height:auto;
box-sizing: border-box;
text-decoration: none;
display: block;
color:rgb(22, 22, 22);
}
.global-menu a:hover{
color:rgb(0, 42, 255);
}
.global-menu-text{
position: relative;
float:left;
width:auto;
height:auto;
box-sizing: border-box;
margin-top:10px;
margin-bottom:5px;
text-decoration: dashed underline;
font-size:20px;
cursor: default;
}
.global-menu .wlj-community{
position: relative;
float:left;
width:auto;
height:180px;
box-sizing: border-box;
border-radius: 15px;
border: 2px solid #15ff00;
cursor: default;
}
/***************************global menu flap************/
/***************************menu flap************/
.menu-flap{
position: fixed;
float:left;
width:100%;
height:100%;
box-sizing: border-box;
z-index:3000;
background:#fafafa;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(8px);
display: none;
}
.menu-flap.active {
display: flex;
}
.menu-flap-container{
position: relative;
padding: 20px;
width: 100%;top:50px;
left:50px;
background: none;
box-sizing: border-box;
/*
border-radius: 10px;
text-align: center;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
*/
}
.flap-close-btn {
position: absolute;
top: 10px;
right: 10px;
width: 30px;
height: 30px;
background-color: #ff4d4d;
color: white;
border: none;
border-radius: 50%;
font-size: 20px;
font-weight: bold;
text-align: center;
line-height: 30px;
cursor: pointer;
transition: 0.3s;
}
.flap-close-btn:hover {
background-color: #cc0000;
}
/***************************menu flap************/
.mob-menu-wrap{
position: fixed;
right:10px;
width:auto;
height:auto;
box-sizing: border-box;
}
.menu-icon {
width: 35px;
height: 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
position: relative;
float:left;
top: 15px;left:0px;
}
.menu-icon div {
width: 100%;
height: 4px;
background-color: black;
border-radius: 2px;
transition: 0.4s;
}
.desk-menu{
position: relative;float:left;
top:0px;
left:10px;
width:70%;
height:100%;
box-sizing: border-box;
overflow:hidden;
}
/* Responsive Styles */
@media (max-width: 768px) {
.desk-menu {
display: none;
}
}
nav{
position: relative;float:left;
top:0px;
width:90%;
height:auto;
box-sizing: border-box;
}
.main-menu{
position: relative;
float:left;
width:100%;
height:auto;
box-sizing: border-box;
}
.menu-items{
position: relative;
float:left;
width:auto;
height:auto;
box-sizing: border-box;
list-style: none;
padding:0px !important;margin: 0px !important;
text-align: center;
}
.menu-items li{
position: relative;
float:left;
width:auto;
height:auto;
box-sizing: border-box;
/*background-color: #000000;*/
border: solid 1px #000000;
}
.menu-items li a{
position: relative;
float:left;
width:auto;
height:58px;
box-sizing: border-box;
border-right: solid 1px #efefef;
padding:10px;padding-top:15px;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
background-color: #ffffff;
color: rgb(0, 0, 0);
display: block;
text-decoration: none;
}
.menu-items li a:hover{
background-color: #000000;
color: rgb(255, 255, 255);
}
.menu-items .sub-menu {
display: none;
position: absolute;
top:60px;
background: #ffffff;
list-style: none;
padding: 10px;
width: auto;
border: solid 1px black;
}
.menu-items li:hover .sub-menu {
display: block;
}
main{
position: relative;
float:left;
width:100%;
height:auto;
box-sizing: border-box;
}
.cat-page-wrap{
position:relative;
float:left;
width:100%;
height:auto;
box-sizing: border-box;
background:rgb(243, 231, 231);
overflow:hidden;
}
/**************************index.php********************/
.top-banner-wrap{
position: relative;
top:0px;left:0px;
float:left;
width:100% ;
height:auto;
box-sizing: border-box;
z-index:200;
background:black;
background: linear-gradient(135deg, #3d0075, #6a0dad, #b4009e, #ff0080);
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
padding-bottom:80px;
margin-top:60px;
}
.sticky {
position: fixed;
top: 60px;
left: 0;
background: linear-gradient(135deg, #3d0075, #6a0dad, #b4009e, #ff0080);
}
.top-title-wrap{
position: relative;float:left;
width:100%;height:auto;
padding-left:60px; box-sizing: border-box;
}
.top-subtitle-wrap{
position: relative;float:left;
width:100%;height:auto;
padding-left:60px; box-sizing: border-box;
}
.top-sub-title{
position: relative;float:left;
color:black;
width:100%;height:auto;
font-size:40px;font-size:240%;
text-shadow: 1px 1px 0px #fafafa;
font-family: "Anton", sans-serif;
font-weight: 500;
font-style: normal;
font-optical-sizing: auto;
background: linear-gradient(0deg, #fff, #ff00c3);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: left;
}
.sub-cat-btn-scroller{
position: absolute;bottom:0px;
width:95%;height:50px;padding:5px;
}
@media only screen and (max-width: 330px) {
.sub-cat-btn-scroller {
display: none;
}
}
.scroll-container {
display: flex;
align-items: center;
gap: 10px;
width:100%;height:auto;
}
.scroll-btn {
position: relative;float:left;
background: black;
color: white;
border: none;
padding: 0px;
cursor: pointer;
font-size: 18px;
border-radius: 50%;
width: 35px;
height: 35px;
font-weight:600;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.scroll-btn:hover {
background: #222;
}
.top-sub-cat-btns{
/**
position: relative;float:left;
width:100%;height:auto;
**/
display: flex;
height:50px;
overflow-x: auto;
white-space: nowrap;
scroll-behavior: smooth;
max-width: 90%; /* Adjust width as needed */
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.top-sub-cat-btns::-webkit-scrollbar {
display: none;
}
.sub-cat-btn{
position: relative;float:left;
background:black; color:white;padding:5px;cursor:pointer;margin:5px;
width:auto;height:auto;
background-color: #6200ea;
color: white;
padding: 12px 24px;
font-size: 16px;
border: none;
border-radius: 10px; /* Rounded corners */
cursor: pointer;
}
.top-cats-wrapper{
position:relative;float:left;top:0px;
width:100%;
height:auto;
border:solid 0px black;
border-radius:5px;
}
.top-cat-item{
position:relative;float:left;width:200px;height:200px;
margin-right:10px;
margin-bottom:10px;
list-style:none;
}
.cat-link{
position:relative;float:left;width:100%;height:100%;display:block;
border:solid 1px #454545;
border-radius:5px;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
background:#fafafa;
justify-content: center;
}
.cat-link:hover{
background:red;
background: linear-gradient(135deg, #6a0dad, #ff00ff);
background: linear-gradient(135deg, #3d0075, #6a0dad, #b4009e, #ff0080);
.cat-link-heading{
color:#fafafa;
}
}
.cat-link-heading{
position:relative;float:left;width:100%;text-align:center;
font-size:40px;color:#343434;font-weight:600;
}
.cat-link-img{position:relative;float:left;width:80%;padding:10% 10%;}
.content-area{
position: relative;float:left;width:100%;height:auto;
color:white;
padding-top:50px;
padding:30px;
box-sizing: border-box;
margin-bottom:10px;
}
.category-name{
position: relative;float:left;width:100%;height:auto;
color:black; text-align: center;
}
.category-desc{
position: relative;float:left;width:100%;height:auto;
color:black; text-align: center;}
.subcategory-group{
position: relative;float:left;width:100%;height:auto;
border-left:solid 1px white;margin-top:20px;margin-bottom:20px;
}
.subcat-title{
position: relative;float:left;width:auto;height:auto;
margin-bottom:20px;
font-size:20px;padding:5px;background:white;color:black;
}
.post-loop{
position: relative;float:left;width:100%;height:auto;
background-color: #e7a30400;
box-sizing: border-box;
}
/* Default width for larger screens */
.post-loop article{
position:relative;float:left;
width:20%;
height:auto;
background:white;
color:black;
margin: 1%;
padding-top:0px;
box-sizing: border-box;
border-radius: 4px; /* 5px rounded corners */
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
/* For tablets and small desktops */
@media only screen and (max-width: 1024px) {
.post-loop article {
width: 30%;
}
}
/* For small mobile screens */
@media only screen and (max-width: 600px) {
.post-loop article {
width: 48%;
}
}
/* For extra small screens */
@media only screen and (max-width: 400px) {
.post-loop article {
width: 100%;
}
}
.post-loop article:hover{
box-shadow: 0 8px 8px rgba(0,0,0,0.25), 0 8px 8px rgba(0,0,0,0.22);
}
.post-loop article img{
position:relative;float:left;
width:100%;
height:auto;
border-radius:4px 4px 0px 0px;
margin-top:0px;
}
.entry-header{
position: relative;float: left;
width:100%;height: auto;
}
.entry-header h2 a{
position: relative;float: left;
width:100%;height: auto;
padding:0px;
display:block;
padding-left: 5px;
text-align: left;
font-family: "Quicksand", sans-serif;
font-size:25px;
font-weight:500;
color:black;
text-decoration: none;
line-height:1.2;
padding:5px;
box-sizing: border-box;
}
.entry-header h2 a:hover{
text-decoration: none;
}
.entry-content{
position: relative;float: left;
width:100%;height: auto;
padding:10px; box-sizing: border-box;
line-height:1.2;
background-color: #f5f3f3;
}
/*
.entry-content img{
border-radius: 15px;
box-shadow: 5px 5px 1px rgba(60, 0, 255, 0.873), 5px 5px 2px rgba(247, 0, 255, 0.79);
}
*/
figure img{
border-radius: 15px;
border:solid 4px rgba(60, 0, 255, 0.873);
box-shadow: 3px 3px 1px rgba(255, 255, 0), 5px 5px 2px rgba(255, 255, 0, 0.79);
}
.container{
margin: 0 auto;
width:60% ;
height:auto;
max-width: 100%;
box-sizing: border-box;
}
/* Mobile responsiveness */
@media (max-width: 1000px) {
.container {
width: 90%; /* Make it wider on smaller screens */
}
}
@media (max-width: 480px) {
.container {
width: 90%; /* Almost full width for very small screens */
}
}
.single-post{
position:relative;
float:left;
width:100%;
height:auto;
box-sizing: border-box;
padding-bottom:30px;
}
.single-post article{
position:relative;
float:left;
width:100%;
height:auto;
box-sizing: border-box;
padding-top:50px;
}
.single-post article img{
width:100%;
height:auto;
border-radius:4px 4px 0px 0px;
}
.post-content{
position:relative;
float:left;
width:100%;
height:auto;
box-sizing: border-box;
background-color: rgb(255, 255, 255);
padding:20px;
font-size:25px;margin-top:10px;
border-bottom: solid 4px rgb(0, 17, 255);
}
.post-navigation{
position:relative;
float:left;
width:100%;
height:auto;
box-sizing: border-box;
margin-top:30px;
margin-bottom:50px;
}
.post-navigation .prev{
position: relative;float: left;
width:40%;
height:auto;
box-sizing: border-box;
}
.post-navigation .next{
position: relative;float: right;
width:40%;
height:auto;
box-sizing: border-box;
}
.post-navigation .prev a{
position: relative;float: left;
width:100%;
height:auto;
background-color: #0004ff;
color:wheat;
box-sizing: border-box;
padding:10px;
border-radius: 12px;
text-decoration: none;
font-size: 20px;
}
.post-navigation .next a{
position: relative;float: left;
width:100%;
height:auto;
background-color: #0004ff;
color:wheat;
box-sizing: border-box;
padding:10px;
border-radius: 12px;
text-decoration: none;
font-size: 20px;
}
.post-title{
font-size:35px;
font-weight:bold;
line-height:1.2;
margin-top:40px;
margin-bottom:20px;
}
.wp-block-preformatted{
background-color: #fafafa;
padding: 15px;
border-right: 4px solid #0073aa;
border-bottom: 4px solid #0073aa;
font-family: monospace;
white-space: pre-wrap; /* Allows text wrapping */
font-size:18px;
border: 2px solid;
border-image-source: linear-gradient(to right, magenta, blue);
border-image-slice: 1;
background-color: #000;
color:white;
}
/* If you need to set a specific width and height */
.site-header .logo img {
width: 100px; /* Adjust width as needed */
height: auto;
}
/*******************sidebar****************/
.sidebar_0{
}
.toggle-sidebar_1-btn {
position: fixed;
left: 0px;
top: 80px;
z-index: 1000;
background: black;
color: white;
border: none;
padding: 5px 9px;
cursor: pointer;
font-size: 16px;
border-radius: 0px 5px 5px 0px;
z-index:1600;
display: none;
}
/* show toggle on small screens */
@media (max-width: 1000px) {
.toggle-sidebar_1-btn {
display: flex;
}
}
.sidebar_1{
position: fixed;
left:0px;
top:0px;
width:20%;
height:100%;
padding-top:75px;
box-sizing: border-box;
overflow-y: scroll;
overflow-x:hidden;
border-right:solid 2px black;
z-index:1500;
background:#fafafa;
background:rgb(243, 231, 231,0.9);
backdrop-filter: blur(18px);
}
/* Hide sidebar on small screens */
@media (max-width: 1000px) {
.sidebar_1 {
transform: translateX(-100%); /* Moves sidebar off-screen */
}
.sidebar_1.active_sidebar {
transform: translateX(0); /* Brings sidebar back */
width:100%;
padding-left:50px;
}
}
/* Target the scrollbar inside .your-element */
.sidebar_1::-webkit-scrollbar {
width: 6px;
}
.sidebar_1::-webkit-scrollbar-thumb {
background: #007bff; /* Blue */
border-radius: 5px;
}
.sidebar_1::-webkit-scrollbar-thumb:hover {
background: #0056b3; /* Darker blue */
}
#sidebar {
position:relative;float:left;
width: 100%;
padding: 5px;
border: 1px solid #000;
}
.sidebar-widget {
margin-bottom: 10px;
}
.widget-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
.related-posts {
position:relative;float:left;width:80%;height:auto;
box-sizing: border-box;padding:5px;
left:20%;
}
.related-posts .category_subtitle {
position:relative;float:left;width:auto;height:auto;
font-size: 20px;
margin-bottom: 10px;
box-sizing: border-box;
font-weight:500;
}
.related-posts-list{
position: relative;
float: left;width:80%;
height: auto;
box-sizing: border-box;
margin-bottom:20px;
}
.related-post-box {
position: relative;
float: left;
width: 260px;
border: 1px solid #e5e5e5;
border-radius: 10px;
margin:5px;
overflow: hidden;
background: #fff;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.related-post-box a {
text-decoration: none;
color: inherit;
display: block;
}
.related-post-thumb img {
width: 100%;
height: 160px;
object-fit: cover;
display: block;
}
.related-post-title {
padding: 12px;
font-size: 18px;
font-weight: 600;
}
.related-post-box:hover {
transform: translateY(-5px);
box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
/****************home-feature-show2***************/
.home-featured-show-container{
position:relative;
float: left;
width:100%;
height: 600px;
box-sizing: border-box;
margin-top:60px;
margin-bottom:60px;
overflow: hidden;
}
.home-featured-show-wrapper{
position: absolute;
inset: 0; /* top:0; right:0; bottom:0; left:0; */
width:100%;
height: auto;
box-sizing: border-box;
opacity: 0;
transition: opacity 0.6s ease;
pointer-events: none; /* hidden slide click na ho */
}
.home-featured-show-wrapper.active {
opacity: 1;
pointer-events: auto;
}
.home-featured-show-back{
position:absolute;top:0px;left:0px;z-index:10;
width:100%;height:auto;
overflow: hidden;
}
.home-featured-show-back img{
width:100%;
height:600px;
object-fit: contain;
object-fit: cover;
}
.home-featured-show-aligner{
/*
position:relative;float:left;width:80%;height:auto;
left:10%;
box-sizing: border-box;
z-index:100;
**/
position: relative;
width: 80%;
margin: 0 auto; /* center instead of left:10% */
height: auto;
box-sizing: border-box;
z-index: 100;
}
/* Mobile optimization */
@media (max-width: 768px) {
.home-featured-show-aligner {
width: 94%;
}
}
/* Small phones */
@media (max-width: 480px) {
.home-featured-show-aligner {
width: 96%;
}
}
.hfsa-left{
position: relative;float:left;
width:60%;height:auto;
box-sizing: border-box;
padding: 0px;
padding-top:50px;
}
.hfsa-left-sub-title{
position: relative;float:left;
width:100%;height:auto;
font-size:20px;font-weight:800;
color:black;
}
.hfsa-left-main-title{
position: relative;float:left;
width:100%;height:auto;
font-size:120px;
color:rgb(34, 34, 34);
line-height: 1.05;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-family: "Cormorant Garamond", serif;
font-weight:550;
}
.highlight {
position: relative;
display: inline-block;
}
.highlight::after {
content: "";
position: absolute;
left: -2px;
bottom: 0;
width: 100%;
height: 20px;
background: rgba(255, 243, 128, 0.8);
z-index: -1;
border-radius: 30px;
transform: rotate(-1deg);
}
.hfsa-left-desc{
position: relative;float:left;
width:100%;height:auto;
font-size:23px;font-weight:500;
color:black;
margin-top:20px;
}
.hfsa-left-btn-wrap{
position: relative;float:left;
width:100%;height:auto;
margin-top:30px;
}
.cta-btn1 {
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
font-size: 22px;
font-weight: 600;
color: #000;
}
.arrow-icon{
width: 45px;
height: 45px;
background: #0029ff; /* Blue Circle */
color: #ffdf00; /* Yellow Play Arrow */
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
border-radius: 50%;
transition: 0.3s;
}
/* Hover Effect */
.cta-btn1:hover .arrow-icon {
transform: scale(1.1);
background: #001dcc;
}
.cta-btn1:hover {
text-shadow: 1px 1px 1px yellow;
}
.hfsa-right{
position: relative;float:left;
width:40%;height:auto;
box-sizing: border-box;
padding: 0px;
}
.hfsa-right img{
position: relative;float:left;
width:100%;
box-sizing: border-box;
}
@media (max-width: 1300px) {
.home-featured-show-container{
height: 620px;
}
.home-featured-show-back img{
height: 620px;
}
.hfsa-left-main-title{
font-size: 82px;
line-height: 1.0;
text-align: center;
margin-top:5px;
}
.hfsa-left-sub-title{
text-align: center;
}
.hfsa-left-desc{
text-align: center;
font-size: 18px;
margin-top: 15px;
}
.hfsa-left{
width: 65%;
}
.hfsa-left-btn-wrap{
margin-top: 20px;
display: flex;
justify-content: center;
}
.hfsa-right{
width: 35%;
}
.hfsa-right img{
width: 100%;
}
}
@media (max-width: 1200px) {
.home-featured-show-container{
height: 1080px;
}
.home-featured-show-back img{
height: 1080px;
}
.hfsa-left-main-title{
font-size: 82px;
line-height: 1.0;
text-align: center;
margin-top:5px;
}
.hfsa-left-sub-title{
text-align: center;
}
.hfsa-left-desc{
text-align: center;
font-size: 18px;
margin-top: 15px;
}
.hfsa-left{
width: 100%;
}
.hfsa-left-btn-wrap{
margin-top: 20px;
display: flex;
justify-content: center;
}
.hfsa-right{
width: 100%;
}
.hfsa-right img{
width: 100%;
}
}
@media (max-width: 768px) {
.home-featured-show-container{
height: 1080px;
}
.home-featured-show-back img{
height: 1080px;
}
.hfsa-left-main-title{
font-size: 72px;
line-height: 1.0;
text-align: center;
margin-top:5px;
}
.hfsa-left-sub-title{
text-align: center;
}
.hfsa-left-desc{
text-align: center;
font-size: 18px;
margin-top: 15px;
}
.hfsa-left{
width: 100%;
}
.hfsa-left-btn-wrap{
margin-top: 20px;
display: flex;
justify-content: center;
}
.hfsa-right{
width: 100%;
}
.hfsa-right img{
width: 100%;
}
}
/****************home-feature-show2***************/
.scroller-header{
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 78%;
height: 60px;
z-index: 2000;
transition: transform 0.3s ease, opacity 0.3s ease;
opacity: 0;
}
/* Visible state */
.scroller-header.show{
transform: translateX(-50%) translateY(0);
opacity: 1;
}
/* 📱 Mobile view */
@media (max-width: 1300px){
.scroller-header{
width: 60%;
}
}
/* 📱 Mobile view */
@media (max-width: 1134px){
.scroller-header{
top: auto; /* top hatao */
bottom: 5px; /* thoda upar from bottom */
width: 95%; /* mobile friendly width */
background-color: rgba(255, 255, 255, 0.9);
height: auto;
border-radius:10px;
border:solid 1px black;
}
}
.page-title{
position: relative;
float:left;
color:rgb(93, 93, 91);
color:rgb(30, 30, 29);
font-size:30px;
font-size:140%;
font-weight:600;
text-shadow: 1px 1px 2px #ffff00a3;
font-style: normal;
font-optical-sizing: auto;
line-height: 1.2;
text-align: left;
padding:10px;
box-sizing: border-box;
width:80%;
display: block;
margin-left:10px;
padding-top:15px;
box-sizing: border-box;
}
/* 📱 Mobile view */
@media (max-width: 700px){
.page-title{
font-size:130%;
line-height: 1.0;
width:100%;
text-align: center;
padding-top:0px;
}
}
/* 📱 Mobile view */
@media (max-width: 400px){
.page-title{
font-size:120%;
line-height: 0.9;
width:100%;
text-align: center;
padding-top:0px;
}
}
.enroll-button-wrap{
position: relative;
float: left;
height:auto;
width:10%;
box-sizing: border-box;
margin-right:15px;
}
/* 📱 Mobile view */
@media (max-width: 1286px){
.enroll-button-wrap{
width: 15%; /* mobile friendly width */
}
}
/* 📱 Mobile view */
@media (max-width: 700px){
.enroll-button-wrap{
width: 20%; /* mobile friendly width */
margin: 0 auto; /* center */
float: none;
}
}
@media (max-width: 550px){
.enroll-button-wrap{
width: 30%; /* mobile friendly width */
margin: 0 auto; /* center */
float: none;
}
}
/* 📱 Mobile view */
@media (max-width: 400px){
.enroll-button-wrap{
width: 35%; /* mobile friendly width */
margin: 0 auto; /* center */
float: none;
}
}
/* 📱 Mobile view */
@media (max-width: 400px){
.enroll-button-wrap{
width: 40%; /* mobile friendly width */
margin: 0 auto; /* center */
float: none;
}
}
/* 📱 Mobile view */
@media (max-width: 300px){
.enroll-button-wrap{
width: 50%; /* mobile friendly width */
margin: 0 auto; /* center */
float: none;
}
}
.enroll-button-second {
position: relative;
margin: 10px;
background: linear-gradient(45deg, rgb(146, 145, 89), black);
border: 2px solid rgb(0, 0, 255);
color: rgb(237, 237, 237);
padding: 5px 10px;
font-size: 100%;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 6px 2px rgb(255, 255, 0);
box-shadow: 0 3px 2px rgb(43, 0, 255);
width:100%;
text-decoration: none;
display: block;
box-sizing: border-box;
}
.demo-button {
position: absolute;
right:0px;
background: rgb(47, 45, 45);
border: 2px solid rgb(252, 255, 74);
color: rgb(255, 255, 156);
padding: 5px 15px;
font-size: 20px;
border-radius: 8px;
cursor: pointer;
margin: 10px;
transition: all 0.3s ease;
box-shadow: 2px 2px 1px rgb(0, 38, 255);
}
/**************live post wrapper on home ************/
.live_posts_container{
position: relative;
float: left;
width:100%;
height: auto;
box-sizing: border-box;
background:yellow;
}
.live_posts_aligner{
margin: 0 auto ;
width: 85%;
height: auto;
}
.live_posts_wrapper{
position:relative;float:left;width:100%;height:auto;
background:none;margin-bottom:15px;
box-sizing: border-box;
padding:20px;
}
.live-posts-title{
position: relative;float:left;
color:black;
width:100%;height:auto;
font-size:80px;font-size:480%;
text-shadow: 1px 1px 0px rgb(27, 27, 27);
font-family: "Anton", sans-serif;
font-weight: 700;
font-style: normal;
font-optical-sizing: auto;
background: linear-gradient(90deg, #ffffff, #ffffff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
}
.live-posts-subtitle {position: relative;float:left; width:100%;
font-size: 30px; /* Large text */
font-weight:700;
background-image: linear-gradient(45deg, #ff00ff, #6a0dad, #00f0ff, #ff0080);
background-image: linear-gradient(45deg, #ff00ff, #6a0dad, #b4009e, #ff0080);
background-image: linear-gradient(45deg, #ff00ff, #6a0dad, #0000ff, #ff0080);
background-image: linear-gradient(45deg, #ffe600, #0011ff, #0000ff, #ff0080);
background-size: 300% 300%;
color: white;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: gradientAnimation 3s infinite linear;
padding:10px;
line-height: .1;
text-decoration: underline;
text-align: center;
}
@keyframes gradientAnimation {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* ================= LIVE POSTS – MOBILE ONLY ================= */
@media (max-width: 768px){
.live-posts-title{
font-size: 152px; /* down from 80px */
line-height: 1.1;
text-shadow: 1px 1px 0px rgb(27, 27, 27);
margin-bottom: 10px;
text-align:center;
}
.live-posts-subtitle{
font-size: 25px; /* down from 30px */
padding: 6px 10px;
line-height: 1.3; /* FIX for mobile overlap */
text-decoration-thickness: 2px;
text-align:center;
}
}
/* Extra small phones */
@media (max-width: 480px){
.live-posts-title{
font-size: 48px;
}
.live-posts-subtitle{
font-size: 25px;
line-height: 1.4;
}
}
.live_posts_list{
position:relative;float:left;width:100%;height:auto;
background:none;margin-bottom:15px;
box-sizing: border-box;
padding:20px;
border-left:solid 4px rgb(255, 255, 255);
border-radius: 15px;
margin-top: 40px;
}
.live_post_loop{
position: relative;float:left;width:100%;height:auto;
background-color: #e7a30400;
box-sizing: border-box;
}
/* Default width for larger screens */
.live_post_loop article{
position:relative;float:left;
width:40%;
height:auto;
background:white;
color:black;
margin: 1%;
padding-top:0px;
box-sizing: border-box;
border-radius: 4px; /* 5px rounded corners */
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
border: solid 1px #6200ff;
}
@media (max-width: 768px) {
.live_post_loop article{
width: 100%;
margin: 12px 0;
}
}
/**front page rocket wrapper**/
.rocket-wrap{
position: absolute;
top:220px;
left:70px;
z-index: 1000;
transition: all 1.5s ease-in-out;
width:100px;
height: auto;
animation: rocketFloat 3s ease-in-out infinite;
}
/* Mobile optimization */
@media (max-width: 768px) {
.rocket-wrap {
left:0px;
}
}
/**front page rocket wrapper**/
/**live page rocket wrapper**/
.rocket-wrap-live{position: absolute; top:0px;right:20px;z-index: 1000;
transition: all 1.5s ease-in-out; width:80px;height:auto;
animation: rocketFloat 3s ease-in-out infinite;
}
/**live page rocket wrapper**/
.rocket{width:80%; transition: transform 0.5s ease;}
/* Up-Down Floating */
@keyframes rocketFloat {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}
/* Slight Rotation */
@keyframes rocketTilt {
0%, 100% {
transform: rotate(-4deg);
}
50% {
transform: rotate(4deg);
}
}
.live_post_loop article:hover{
box-shadow: 0 4px 4px rgba(0,0,0,0.25), 0 6px 6px rgba(0,0,0,0.22);
}
.live_post_loop article img{
position:relative;float:left;
width:100%;
height:auto;
border-radius:4px 4px 0px 0px;
margin-top:0px;
}
/**************live post wrapper on home ************/
.partner-block{position: relative;
float:left;width:100%;height:auto;
background-color: #fafafa;
padding-bottom: 40px;
}
.partner-aligner{
margin: 0 auto ;
width: 80%;
height: auto;
padding:20px;
}
.partner-title{
position: relative;float:left;
color:black;
width:100%;height:auto;
font-size:60px;font-size:360%;
text-shadow: 1px 1px 0px rgb(27, 27, 27);
font-family: "Anton", sans-serif;
font-weight: 700;
font-style: normal;
font-optical-sizing: auto;
background: linear-gradient(90deg, #ffffff, #ffffff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
}
@media (max-width: 768px){
.partner-title{
font-size: 38px; /* down from 80px */
line-height: 1.1;
text-shadow: 1px 1px 0px rgb(27, 27, 27);
margin-bottom: 10px;
}
}
.partner-logos{
position: relative;float:left;
width:100%;height:auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 20px;
margin-top: 30px;
}
.partner-logos img{
max-width: 150px;
height: 100px;
object-fit: contain;
filter: grayscale(100%);
transition: filter 0.3s ease;
border-radius: 4px;
border: solid 1px #ccc;
}
.partner-logos img:hover{
filter: grayscale(10%);
}
/***********home gallery ***********/
.gallery-home-wrapper{
position: relative;float:left;width:100%;height:700px;
padding-top:20px;
padding-bottom: 40px;
box-sizing: border-box;
background-color: #000;
}
.gallery-title-wrap{
position: relative;
float:left;
width:100%;
height:auto;
box-sizing: border-box;
margin-top:50px;
}
.gallery-title{
position: relative;
float:left;
width:100%;
height:auto;
box-sizing: border-box;
color:rgb(255, 242, 0);
font-size:60px;font-size:260%;
font-weight: 500;
font-style: normal;
padding:20px;
text-align: center;
line-height: 1.2;
}
.gallery-rows-wrap{
position: absolute;top:180px;height: 650px;
width: 100%;box-sizing: border-box;
overflow: hidden;
}
.gallery-row1{
position: relative; float: left;
left: -900px;
height: 220px;
width: max-content;box-sizing: border-box;
display: flex;
gap: 10px;
margin-top: 20px;
overflow: hidden;
}
.gallery-row2{
position: relative; float: left;
left: 0px;
height: 220px;
width: max-content;
box-sizing: border-box;
display: flex;
gap: 10px;
margin-top: 20px;
overflow: hidden;
}
.gallery-image-wrap::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(45deg, #0044ff, #01259d);
mix-blend-mode: screen; /* blend color over grayscale image */
opacity: 0.6; /* intensity */
pointer-events: none;
z-index: 1000;
border-radius: 10px;
}
.gallery-image-wrap{
position: relative;
float: left;
width: auto;
height: 200px;
border-radius: 10px;
object-fit: cover;
box-sizing: border-box;
padding:5px;
background-color: rgb(60, 60, 60);
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
transition: background-color 0.1s linear; /* smooth color change */
}
.gallery-image-wrap:hover{ background-color: rgb(0, 0, 0) !important;}
.back1{ background-color: rgb(0, 68, 255) !important; }
.back2{ background-color: rgb(255, 255, 0) !important; }
.gallery-image-wrap img{
position: relative;
float: left;
width: auto;
height: 100%;
object-fit: contain;
border-radius: 10px;
filter: contrast(.805) brightness(0.98) saturate(.5);
transition: filter 0.5s linear; /* smooth color change */
}
.gallery-image-wrap img:hover{
filter: contrast(1.04) brightness(1) saturate(1.1);}
/***********home gallery **********/
/**************highlights post wrapper on home ************/
.hightlight_aligner{
margin: 0 auto ;
width: 80%;
height: auto;
}
.hightlight_posts_wrapper{
position:relative;float:left;width:100%;height:auto;
background:none;margin-bottom:15px;
box-sizing: border-box;
text-align: center;
}
.hightlight-posts-title-wrap{
position: relative;
float:left;
box-sizing: border-box;
width:20%;height:auto;
}
.hightlight-posts-title{
position: absolute;
left:0px;top:100px;
left:-50px;
color:rgb(219, 219, 219);
box-sizing: border-box;
width:20%;height:100px;
font-size:80px;
font-family: "Anton", sans-serif;
font-weight: 700;
font-style: normal;
font-optical-sizing: auto;
align-items: center;
justify-content: center;
transform: rotate(-90deg);
margin-top: 290px; /* Adjust this for fine-tuning */
line-height: 3;
}
.hightlight_posts_list{
position:relative;float:right;width:80%;
background:white;margin-bottom:15px;
box-sizing: border-box;
padding:20px;
border-left:solid 4px rgb(255, 255, 255);
border-right:solid 4px rgb(255, 255, 255);
border-radius: 15px;
margin-top: 40px;
}
.hightlight_post_loop{
position: relative;float:left;width:100%;height:auto;
background-color: #e7a30400;
box-sizing: border-box;
}
/* Default width for larger screens */
.hightlight_post_loop article{
position:relative;float:left;
width:25%;
height:auto;
background:white;
color:black;
margin: 1%;
padding-top:0px;
box-sizing: border-box;
border-radius: 4px; /* 5px rounded corners */
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.hightlight_post_loop article img{
position:relative;float:left;
width:100%;
height:300px;
border-radius:4px 4px 0px 0px;
margin-top:0px;
object-fit:cover;
}
.hightlight_post_loop article:hover{
box-shadow: 0 1px 1px rgb(242, 255, 0), 0 1px 1px rgb(242, 255, 0);
}
.more-highlights-btn-wrap{
position: relative;float:left;
width:100%;height:auto;
margin-top:30px;
text-align: center;
}
.more-highlights-btn {
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
font-size: 22px;
font-weight: 600;
color: #ffffff;
margin-top: 20px;
background-color: blue;
padding:2px;padding-left:8px;
border-radius: 12px;
box-shadow: 2px 2px 1px rgb(255, 255, 0);
}
.more-highlights-btn:hover{
box-shadow: 5px 5px 5px rgb(255, 255, 0);
color: #fffb00;
}
/* ================= HIGHLIGHTS – MOBILE ONLY ================= */
@media (max-width: 768px){
.hightlight_aligner{
width: 100%;
}
.hightlight_posts_wrapper{
padding: 10px;
margin-top:20px;
box-sizing: border-box;
}
/* Disable rotated side title on mobile */
.hightlight_posts_list{
float:right;
width: 80%;
margin-top: 0;
border-left: none;
border-right: none;
}
.hightlight_post_loop{
display: flex;
flex-wrap: wrap;
gap: 12px;
}
/* Cards: 2 per row on mobile */
.hightlight_post_loop article{
width: 48%;
margin: 0;
}
.hightlight_post_loop article img{
height: 180px;
}
.hightlight_post_loop article h2 a{
font-size: 18px ;
line-height: 1.3;
padding: 8px;
}
.more-highlights-btn{
font-size: 18px;
padding: 6px 10px;
}
.arrow-icon{
width: 32px;
height: 32px;
font-size: 14px;
}
}
/* Extra small phones */
@media (max-width: 480px){
/* Single column for very small screens */
.hightlight_post_loop article{
width: 100%;
}
.hightlight_post_loop article img{
height: 200px;
}
}
/**************highlights post wrapper on home ************/
/*** Tutorials Gallery ***/
.jr_tut_container{
position: relative;float: left;
width: 100%;
/*
background: #fdf7df;
background:#ffffeb;
*/
padding: 80px 0 60px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
}
.jr_tut_aligner{
margin: 0 auto;
width: min(1180px, 90%);
}
/* Header */
.jr_tut_header{
text-align: center;
margin-bottom: 40px;
}
.jr_tut_title{
font-size: 54px;
font-weight: 600;
margin: 0 0 10px;
line-height: 1.2;
}
.highlight2 {
position: relative;
display: inline-block;
color:blue;
font-weight: 700;
}
.highlight2::after {
content: "";
position: absolute;
left: -2px;
bottom: 0;
width: 100%;
height: 10px;
background: rgba(255, 243, 128, 0.8);
z-index: -1;
border-radius: 30px;
transform: rotate(-1deg);
}
.jr_tut_subtitle{
font-size: 1.4rem;
max-width: 600px;
margin: 0 auto 24px;
line-height: 1.5;
color: #555;
}
/* Filters (dummy) */
.jr_tut_filters{
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 0.95rem;
color: #333;
}
.jr_tut_filters span{
font-weight: 500;
}
.jr_tut_select button{
border-radius: 999px;
border: 1px solid rgba(0,0,0,0.1);
padding: 6px 14px;
font-size: 0.9rem;
background: #fff8e6;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
}
.jr_tut_select button:hover{
background: #fff;
box-shadow: 0 8px 18px rgba(0,0,0,0.08);
}
.jr_tut_select_caret{
font-size: 0.75rem;
}
/* Cards grid */
.jr_tuts_wrap{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 24px;
}
.jr_tut_btn{
display: inline-flex;
align-items: center;
justify-content: center;
height: 30px;
margin: 48px auto 0;
padding: 10px;
font-size: 16px;
font-weight: 600;
letter-spacing: 0.3px;
color: #fff;
background: #0004ff;
border: none;
border-radius: 10px;
cursor: pointer;
box-shadow: 2px 2px 1px rgb(255, 255, 0);
text-decoration: none;
transition: transform 0.25s ease,box-shadow 0.25s ease,background 0.25s ease;
}
.jr_tut_btn:hover{
box-shadow: 5px 5px 5px rgb(255, 255, 0);
color:yellow;
}
/* Individual card */
.jr_tut_card{
position: relative;
width: 100%;
background: #fff;
color: #000;
border-radius: 6px;
box-shadow: 0 1px 3px rgba(0,0,0,.12),
0 1px 2px rgba(0,0,0,.24);
transition: transform .25s ease, box-shadow .25s ease;
overflow: hidden;
padding:4px;
box-sizing: border-box;
}
.jr_tut_card:hover{
box-shadow: 0 8px 8px rgba(0,0,0,0.25),
0 8px 8px rgba(0,0,0,0.22);
}
.jr_tut_card:hover .jr_tut_readmore{
text-decoration: underline;
}
/* Make full card clickable */
.jr_tut_card_link{
display: block;
text-decoration: none;
color: inherit;
}
.jr_tut_thumb{
width: 100%;
height: 160px;
background-size: cover;
background-position: center;
border-radius: 6px 6px 0 0;
}
.jr_tut_thumb--placeholder{
display: flex;
align-items: center;
justify-content: center;
background: #f2f2f2;
font-weight: 600;
}
.jr_tut_card_body{
width: 100%;
box-sizing: border-box;
}
.jr_tut_meta_row{
padding: 8px 10px 0;
font-size: 13px;
opacity: .7;
}
.jr_tut_chip{
background: #eee;
padding: 2px 8px;
border-radius: 12px;
margin-right: 6px;
}
.jr_tut_card_title{
margin: 0;
}
.jr_tut_card_title{
padding: 5px 10px;
font-family: "Quicksand", sans-serif;
font-size: 20px;
font-weight: 500;
line-height: 1.2;
color: #000;
}
.jr_tut_excerpt{
padding: 10px;
font-size: 16px;
line-height: 1.2;
color: #000;
margin: 0;
}
.jr_tut_card_footer{
padding: 0 10px 12px;
}
.jr_tut_readmore{
font-size: 14px;
font-weight: 500;
}
/* Empty state */
.jr_tut_empty{
grid-column: 1 / -1;
text-align: center;
color: #555;
padding: 20px 0;
}
/* Responsive tweaks */
@media (max-width:400px){
.jr_tut_card{
width: 100%;
}
.jr_tut_header{
text-align: left;
}
.jr_tut_title{
text-align: left;
line-height: 1.2;
}
.jr_tut_subtitle{
text-align: left;
margin-left: 0;
}
.jr_tut_filters{
flex-wrap: wrap;
justify-content: flex-start;
}
}
/**************blog news wrapper on home ************/
.news_posts_wrapper{
position:absolute;float:left;width:100%;height:auto;
background:none;margin-bottom:15px;
box-sizing: border-box;
padding:20px;
opacity: .05;
}
.news-posts-title{
position: relative;float:left;
color:black;
width:auto;height:auto;
font-size:480%;
text-shadow: 1px 1px 0px rgb(27, 27, 27);
font-family: "Anton", sans-serif;
font-weight: 700;
font-style: normal;
font-optical-sizing: auto;
background: linear-gradient(90deg, #ffffff, #ffffff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.news-posts-subtitle {position: relative;float:left; width:100%;
font-size: 30px;
font-weight:700;
background-image: linear-gradient(45deg, #ff00ff, #6a0dad, #00f0ff, #ff0080);
background-image: linear-gradient(45deg, #ff00ff, #6a0dad, #b4009e, #ff0080);
background-image: linear-gradient(45deg, #ff00ff, #6a0dad, #0000ff, #ff0080);
background-size: 300% 300%;
color: white;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: gradientAnimation 3s infinite linear;
padding:10px;
line-height: .1;
text-decoration: underline;
}
@keyframes gradientAnimation {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/*************kaka*********/
.news-section-container{
position: relative;
float: left;
width: 100%;
height: auto;
box-sizing: border-box;
background-color: #fbff00;
}
.news-section-middle-aligner{
margin:0 auto;
width:50%;height: auto;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
}
@media (max-width: 1024px){
.news-section-middle-aligner{
width: 75%;
}
}
@media (max-width: 900px){
.news-section-middle-aligner{
width: 80%;
}
}
@media (max-width: 680px){
.news-section-middle-aligner{
width: 90%;
}
}
@media (max-width: 400px){
.news-section-middle-aligner{
width: 98%;
}
}
.news-section-wrapper {
position:relative;float:left;
width:100%;
height:auto;
background-size: cover;
color:black;
margin-bottom:1%;
padding-top:0px;
box-sizing: border-box;
border-radius: 4px; /* 5px rounded corners */
box-shadow: 0 3px 3px rgba(0,0,0,0.12), 0 3px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
box-sizing: border-box;
padding: 30px;
border: solid 4px #ffee00;
border: solid 4px #000000;
}
@media (max-width: 400px){
.news-section-wrapper {
padding: 5px;
}
}
.news-header {
position:relative;float:left;
width:100%;height: auto;
text-align: center;
margin-bottom: 30px;
}
.edition-star {
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 2px;
line-height: .15;
margin-top:30px;
}
.edition-title {
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 2px;
line-height: .15;
}
.breaking-title {
font-size: 3rem;
font-weight: 700;
letter-spacing: 3px;
display: inline-block;
margin-top: 0px;
margin-bottom: 0px;
line-height: 1.0;
}
.news-grid {
position: relative;
float: left;
width: 100%;
height: auto;
box-sizing: border-box;
border-top:double 12px rgb(63, 63, 63);
padding:10px;
padding-top:20px;
}
.news-title {color:#000;}
.news:hover .news-title {
color: #f0f8ff;
color: #1900ff;
transition: color 0.3s ease;
}
.news1 {
position: relative;
float: left;
width: 70%;
height: auto;
border-right: solid 2px #505050 ;
box-sizing: border-box;
padding-right: 20px;
}
@media (max-width: 500px){
.news1 {
width: 100%;
border-right:none;
margin-bottom:10px;
padding-right: 0px;
padding-bottom: 10px;
border-bottom: solid 2px #505050 ;
}
}
.news1-title{
position: relative;
float: left;
width: 100%;
height: auto;
line-height: 1;
text-transform: uppercase;
font-size: 1.7rem;
padding: 0px;
margin:0px;
margin-bottom:10px;
text-align: left;
color:#000;
}
.news1-image img {
position: relative;
float: left;
width: 100%;
height: 450px;
object-fit: cover;
transition: border-color 0.5s ease;
border: 1px solid rgb(117, 117, 117);
}
.news1-image img:hover {
}
.news1-excerpt {
font-size: 1rem;
color: #444;
}
.news2 {
position: relative;
float: left;
width: 30%;
margin-bottom: 20px;
padding-left: 10px;
padding-top:0px;
box-sizing: border-box;
}
@media (max-width: 500px){
.news2 {
width: 100%;
border-right:none;
margin-bottom:10px;
padding-left: 0px;
}
}
.news2-image img {
position: relative;
float: left;
width: 100%;
object-fit: cover;
}
.news2-title {
position: relative;
float: left;
width: 100%;
text-transform: uppercase;
font-size: 1.34rem;
font-weight: bold;
line-height: 1.0;
margin-bottom: 5px;
text-align: left;
}
.news2-content {
position: relative;
float: left;
width: 100%;
font-size: 0.9rem;
color: #555;
text-align: left;
}
.more-info {
text-align: center;
font-size: 0.9rem;
color: #666;
margin-top: 30px;
}
.news3 {
position: relative;
float: left;
width: 100%;
height: auto;
margin-top: 20px;
margin-bottom: 20px;
border-top: 2px solid #2e2e2e;
padding-top: 10px;
box-sizing: border-box;
}
.news3-left{
position: relative;
float: left;
width: 60%;
height: auto;
box-sizing: border-box;
padding:10px;
}
@media (max-width: 500px){
.news3-left {
float:right;
width: 100%;
}
}
.news3-title{
position: relative;
float: left;
width: 100%;
height: auto;
box-sizing: border-box;
text-transform: uppercase;
font-size: 1.64rem;
font-weight: bold;
line-height: 1.0;
margin-bottom: 5px;
text-align: left;
}
.news3-content{
position: relative;
float: left;
width: 100%;
height: auto;
box-sizing: border-box;
text-align: left;
}
.news3-right{
position: relative;
float: left;
width: 40%;
height: auto;
box-sizing: border-box;
}
.news3-right img {
position: relative;
float: left;
width: 100%;
height: 400px;
object-fit: cover;
}
@media (max-width: 500px){
.news3-right {
width: 100%;
}
.news3-right img {
float: left;
}
}
/**************magzine news type post wrapper on home ************/
/*******************sidebar****************/
.toggle-toc_container-btn{
position: fixed;
right: -10px;
top: 80px;
color: white;
border: none;
padding: 5px 9px;
cursor: pointer;
font-size: 16px;
z-index: 1000;
display: none;
transform: rotate(90deg);
background: linear-gradient(45deg, violet, blue);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
/* show toggle on small screens */
@media (max-width: 1000px) {
.toggle-toc_container-btn {
display: flex;
}
}
.toc_container{
position:fixed;float:right;top:80px;right:0px;
width:20%;height:auto;
box-sizing: border-box;
padding:10px;
transition: left 0.3s ease-in-out;
}
/* Hide sidebar on small screens */
@media (max-width: 1000px) {
.toc_container {
transform: translateX(101%); /* Moves sidebar off-screen */
}
.toc_container.active_toc {
transform: translateX(0); /* Brings sidebar back */
/* width:100%;
padding-left:50px;*/
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(8px);
border-radius:5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
width:40%;
}
}
/* Hide sidebar on small screens */
@media (max-width: 400px) {
.toc_container {
transform: translateX(101%); /* Moves sidebar off-screen */
}
.toc_container.active_toc {
transform: translateX(0); /* Brings sidebar back */
/* width:100%;
padding-left:50px;*/
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(8px);
border-radius:5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
width:60%;
}
}
/************kaka**************/
.toc-widget{
position:relative;float:left;width:95%;margin:2px;height:auto;
box-sizing: border-box;
padding:5px;
border:solid 1px #efefef;
border-radius:5px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.toc-widget ul{
list-style: none;
padding: 0;}
.toc-widget ul li {
margin-bottom: 2px;
}
.toc-link {
font-size:15px;
text-decoration: none;
color: #343434;
display:block;
padding:2px;
transition: color 0.3s ease;
}
.toc-link:hover {
color: #000 !important;
cursor:pointer;
}
.toc-link:visited {
color: #343434;
}
.active {
font-weight: bold;
color: #0073aa !important; /* WordPress blue */
border-left: 3px solid #0073aa;
padding-left: 8px;
}
.wp-block-code{background:gray;padding:10px;}
/*************css for live sessions*************/
.live-entry-wrapper{
position: relative;float: left;
width: 100%;
}
.live-entry-header{
position: relative;float: left;
width:100%;height: auto;
margin-top:60px;
background: linear-gradient(75deg, rgb(25, 0, 255) 0%, rgb(255, 247, 0) 50%, rgb(96, 83, 237) 100%);
background: #000;
background: #e7e7e4;
background: #FFE7BE;
}
/* Live Session Title Styles */
.live-title-wrap{
position: relative;float: left;
width:100%;height:auto;
box-sizing: border-box;
}
.live-title-blur{
position: absolute;top:0px;left:0px;
width:100%;height:100%;
background: url("http://codelab.local/wp-content/uploads/2025/04/image-mesh-gradient.png");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
filter: blur(60px); /* Blurring effect on the background */
}
.live-mode{
position: relative;
float: left;
width:auto;height:auto;
font-size: 0.8rem;
color:white;
border: rgb(255, 225, 0) 1px solid ;
border-radius: 5px;
padding:5px;
background-color: red ;
margin-left:20px;
}
.pulse-border {
animation: pulse 2s linear infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 5px rgba(0, 0, 255, 0), 0 0 10px rgba(0, 0, 255, 0);
}
50% {
box-shadow: 0 0 20px #ff0, 0 0 40px #ff0;
}
100% {
box-shadow: 0 0 5px rgba(0, 0, 255, 0), 0 0 10px #00f;
}
}
.live-title {
position: relative;float: left;
width:100%;height:auto;
font-size: 3.2rem;
font-weight: 700;
line-height:.92;
display:block;
font-family: "Bebas Neue", sans-serif;
color:rgb(255, 251, 0);
padding:20px;
padding-bottom:5px;
box-sizing: border-box;
font-optical-sizing: auto;
margin-top:0px;
text-shadow: 1px 1px 1px #ffff00;
-webkit-background-clip: text;
-webkit-text-fill-color: rgb(0, 0, 0);
}
.live-subtitle{
position: relative;float: left;
width:100%;height:auto;
font-size: 1.5rem;
line-height:1;
color:rgb(0, 64, 255);
padding:20px;
padding-top:5px;
box-sizing: border-box;
font-optical-sizing: auto;
font-weight: 600;
}
.typing-complete{
}
.live-column-wrap{
position: relative;margin: 0 auto; /* center */
width:80%;height:auto;
box-sizing: border-box;
padding-top:50px;
/*
background: linear-gradient(75deg, rgba(136, 0, 255, 1) 0%, rgba(199, 87, 190, 1) 50%, rgba(191, 83, 237, 1) 100%);
*/
}
/* 📱 Mobile */
@media (max-width: 768px){
.live-column-wrap{
width: 95%; /* almost full width */
padding-top: 30px;
}
}
@media (max-width: 400px){
.live-column-wrap{
width: 98%; /* almost full width */
padding-top: 30px;
}
}
.live-column-half{
position: relative;float: left;
width:50%;height:auto;
box-sizing: border-box;
}
/* Mobile adjustments */
@media (max-width: 768px) {
.live-column-half {
width:100%;
}
}
.live-column1{
position: relative;float: left;
width:50%;height:auto;
box-sizing: border-box;
}
/* Mobile adjustments */
@media (max-width: 768px) {
.live-column1 {
width:100%;
}
}
.live-column2{
position: relative;float: left;
width:50%;height:auto;
box-sizing: border-box;
}
/* Mobile adjustments */
@media (max-width: 768px) {
.live-column2 {
width:100%;
}
}
.live-entry-pic{
position: relative;float: left;
width:100%;height: 500px;
box-sizing: border-box;
padding:10px;
}
.live-entry-pic img{
display: block;
margin: 0 auto;
width: 100%;
height: 100%;
box-sizing: border-box;
border-radius:10px 10px 10px 10px;
box-shadow: 5px 5px 1px rgb(255, 255, 0);
border: solid 5px blue;
object-fit: cover;
}
.enroll-now-btn-wrap{
position: relative;
float:left;
padding:10px;
box-sizing: border-box;
height: auto;
width: 100%;
}
.details-table-wrapper {
position: relative;
float:left;
box-sizing: border-box;
height: auto;
width: 100%;
padding:10px;
padding-left:15px;
border-radius: 10px;
}
.details-table {
position: relative;
float:left;
box-sizing: border-box;
height: auto;
width: 100%;
border-radius: 10px;
padding: 2px;
overflow-x: auto;
background-color: rgb(47, 0, 235);
background-color: rgba(236, 224, 0, 0);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
background-color: #2800b6;
background-color: rgb(47, 0, 235);
background-color: #000cef;
background-color: #0026ff;
}
.details-table thead th {
position: relative;
float:left;
background-color: #1f1f1f;
color: #ffffff;
text-align: left;
padding: 12px 16px;
font-size: 16px;
border-radius: 10px;
}
.details-table tbody td {
padding: 5px 8px;
font-size: 13px;
color: #ffffff;
border-radius: 10px;
text-align: center;
margin-right:2px;
box-sizing: border-box;
}
.details-table tbody tr{
border-bottom: 1px solid #ddd;
}
.details-table tbody tr:nth-child(even) {
border-bottom: 1px solid #ddd;
background-color: #0026ff;
}
.details-table tbody tr:nth-child(odd) {
background-color: red;
background-color: #000cef;
}
.table-data-text{
position: relative;float: left;
font-size: 14px;
font-weight: 700;
color: #ffffff;
text-align: center;
width:25%;
box-sizing: border-box;
padding: 5px 8px;
}
/* 📱 Mobile */
@media (max-width: 768px){
.table-data-text{
width: 100%; /* stack */
float: none; /* IMPORTANT */
font-size: 13px; /* thoda compact */
text-align: center; /* better readability */
padding: 8px 10px;
}
}
.batch-list {
position: relative;float: right;
padding: 5px 8px;
font-size: 18px;
border: 2px solid #d1d5db; /* soft gray */
border-radius: 12px;
background-color: #fff34c;
color: #222222;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 16px 16px;
width:75%;
box-sizing: border-box;
}
/* 📱 Mobile */
@media (max-width: 768px){
.batch-list{
width: 100%; /* stack */
float: none; /* IMPORTANT */
font-size: 15px;
}
}
.batch-list option{
background-color: #a99ec3 !important;
font-size:16px;
}
.batch-list option:hover{
background-color: #000000;
}
.batch-list:focus {
outline: none;
border-radius: 10px;
border-color: #000000;
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.3);
}
/*
.batch-list {
width: 80%;
padding: 8px 12px;
border-radius: 8px;
border: none;
font-size: 14px;
background: #ffffff;
color: #000;
}
.batch-list option{
padding: 8px 10px;
font-size: 14px;
background: #ffff00 !important;
color: #000000;
}
.batch-list option:hover{
background-color: #0026ff;
color: #ffffff;
}
.batch-list option:checked{
background-color: #ffdd00;
color: #ffffff;
}
*/
/***************course Instructor Profile************/
.meet-your-mentors{
position: relative;
float: left;
width: 100%;
height: auto;
padding:15px;
box-sizing: border-box;
padding-top:50px;
background-color:#ffffff ;
}
.mentor-wrap {
position: relative;
margin: 0 auto;
box-sizing: border-box;
height: auto;
width: 80%;
z-index:2;
}
@media (max-width: 768px) {
.meet-your-mentors {
padding: 12px;
padding-top: 25px;
}
.mentor-wrap {
width: 95%;
}
}
.mentor-title{
position: relative;
float:left;
padding:10px;
box-sizing: border-box;
height: auto;
width: 100%;
font-size: 40px;
font-weight: bold;
color:rgb(0, 0, 0);
}
.mentor-wrap ul {
position: relative;
float:left;
box-sizing: border-box;
height: auto;
width: 100%;
list-style: none;
padding: 0;
margin: 0;
justify-content: center;
}
.mentor-wrap ul li {
position: relative;
float: left;
border: 1px solid #000000;
border-radius: 12px;
width: 48%;
height: auto;
box-sizing: border-box;
margin:5px;
margin-bottom:20px;
text-align: center;
transition: transform 0.3s;
}
/* 📱 Mobile */
@media (max-width: 768px){
.mentor-wrap ul li{
width: 100%; /* single column */
}
}
.mentor-wrap ul li:hover {
transform: translateY(-8px);
}
.mentor-top{
position: relative;
float:left;
width: 100%;
height: auto;
box-sizing: border-box;
}
.mentor-top-left{
position: relative;
float:left;
width:50%;
height: auto;
box-sizing: border-box;
padding:10px;
}
.mentor-name {
font-size: 50px;
font-weight: 800;
color: #0400ff;
margin-bottom: 10px;
text-transform: uppercase;
line-height: 1;
text-align: left;
margin-top: 50px;
margin-bottom: 50px;
padding-left: 10px;
text-shadow: 1px 1px 1px rgb(255, 255, 0);
}
/**mobile**/
@media (max-width: 768px) {
.mentor-name{
font-size:40px;
margin-top:20px;
margin-bottom:20px;
}
}
.mentor-top-right{
position: relative;
float:left;
width:50%;
height: auto;
box-sizing: border-box;
}
@media (max-width: 768px) {
.mentor-top-left,
.mentor-top-right {
width: 100%;
}
}
.mym-heading-wrap{
position: relative;
float: left;
width: 80%;
height: 170px;
box-sizing: border-box;
margin-left:10%;
margin-right:10%;
background-color: #c9c9c9;
border-radius: 0 0 10px 10px;
padding-bottom:10px;
}
@media (max-width: 768px) {
.mym-heading-wrap {
height:50px;
margin:5%;
}
}
.mym-heading{
position: absolute;
bottom:10px;
width: 100%;
height: auto;
font-size: 20px;
font-weight: 800;
}
.mentor-mid{
position: relative;
float:left;
width: 100%;
height: auto;
box-sizing: border-box;
}
.mentor-mid-left{
position: relative;
float:left;
width:50%;
height: auto;
box-sizing: border-box;
padding:10px;
}
.mentor-desc {
position: relative;
float: left;
width: 100%;
box-sizing: border-box;
padding-top:20px;
font-size: 16px;
color: #2d2d2d;
font-weight: 500;
font-style: italic;
text-align: left;
}
.mentor-pic {
position: relative;
float: left;
width: 100%;
height: auto;
}
.mentor-pic img {
width: 100%;
height: auto;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.mentor-mid-right{
position: relative;
float:left;
width:50%;
height: auto;
box-sizing: border-box;
}
.mentor-bottom{
position: relative;
float:left;
width: 100%;
height: auto;
box-sizing: border-box;
}
.mentor-bottom-left{
position: relative;
float:left;
width:50%;
height: auto;
box-sizing: border-box;
padding:10px;
}
.mentor-bottom-right{
position: relative;
float:left;
width:50%;
height: auto;
box-sizing: border-box;
}
.mentor-social-wrap{
position: relative;
float: left;
width: 80%;
height: 120px;
box-sizing: border-box;
margin-left:10%;
margin-right:10%;
background-color: #c9c9c9;
border-radius: 10px 10px 0px 0px;
padding-top:10px;
}
@media (max-width: 768px) {
.mentor-social-wrap {
height:50px;
}
}
.mentor-social{
position: absolute;
float: left;
width: 100%;
height: auto;
font-size: 20px;
font-weight: 800;}
@media (max-width: 768px) {
.mentor-mid-left,
.mentor-mid-right, .mentor-bottom-left, .mentor-bottom-right {
width: 100%;
}
}
/* 📱 Mobile */
@media (max-width: 768px){
.mentor-left{
width: 100%; /* single column */
}
}
/* 📱 Mobile */
@media (max-width: 768px){
.mentor-right{
width: 100%; /* single column */
}
}
.instructor-social{
position: absolute;
float: left;
width: 100%;
height: auto;
top:580px;
font-size: 20px;
font-weight: 800;}
.instructor-pic {
position: relative;
float: left;
width: 100%;
height: auto;
}
.instructor-pic img {
width: 100%;
height: auto;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.instructor-name {
font-size: 50px;
font-weight: 800;
color: #0400ff;
margin-bottom: 10px;
text-transform: uppercase;
line-height: 1;
text-align: left;
margin-top: 50px;
margin-bottom: 50px;
padding-left: 10px;
text-shadow: 1px 1px 1px rgb(255, 255, 0);
}
.instructor-desc {
font-size: 16px;
color: #2d2d2d;
font-weight: 500;
font-style: italic;
text-align: left;
}
/***************Instructor Profile ends***********/
.live-features-wrap{
position: relative;
float:left;
width: 100%;
height: 100px;
padding:15px;
box-sizing: border-box;
}
.live-features-scroller{
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
.live-features{
position: relative;
float: left;
width: max-content;
height: auto;
display: flex;
gap: 10px;
box-sizing: border-box;
overflow: hidden;
height: auto;
padding:10px;
list-style: none;
}
.live-features li {
position: relative;
float:left;
padding:5px;
box-sizing: border-box;
align-items: center;
background-color: #fff700;
color:rgb(0, 0, 0);
font-size:20px;
cursor:default;
line-height: 1;
border: 4px solid;
border-radius: 5px;
/* Mobile styles */
@media (max-width: 768px) {
font-size:20px;
}
}
.live-features li:hover {
border-top:solid 4px #0000ff;
border-right:solid 4px #fffb00;
border-left:solid 4px #0000ff;
border-bottom:solid 4px #ffe600;
}
.live-features li img {
width: 40px;
height: 40px;
object-fit: contain;
margin-right: 15px;
}
/***************Live curriculam***********/
.live-curriculam-aligner{
position: relative;float: left;
width: 100%;
height: auto;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-color:#000000;
padding-bottom:50px;
}
.live-curriculam-wrapper{
position: relative;margin:0 auto; /* center */
width:80%;height:auto;
box-sizing: border-box;padding:5px;}
/* 📱 Mobile */
@media (max-width: 768px){
.live-curriculam-wrapper{
width: 95%;
}
}
@media (max-width: 400px){
.live-curriculam-wrapper{
width: 98%; /* almost full width */
}
}
.live-curriculam-title{
position: relative;float: left;
width:100%;height:auto;
margin-top:20px;
color:rgb(255, 255, 0);
font-weight: 700;
font-size: 40px;
text-align:center
}
.live-curriculam-title span{color:rgb(43, 0, 255);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center bottom;
padding-bottom: 20px;
font-weight: 700;
}
.live-curriculam-subtitle{
position: relative;float: left;
width:100%;height:auto;
font-size: 40px;
margin-bottom:20px;
color:rgb(124, 124, 124);
font-size: 20px;
text-align:center
}
.live-curriculam {
position: relative;float: left;
width:100%;height:auto;
}
.live-curriculam-cards{
display: flex;
flex-wrap: wrap;
justify-content: center;
justify-content: space-between;
align-items: stretch; /* Ensures equal height */
gap: 20px; /* Space between cards */
}
/*
.live-curriculam-cards{
position: relative;float: left;
width:100%;height:auto;
box-sizing: border-box;
}
.live-curriculam-card {
position: relative;
float: left;
background: #ffffed;
background: #ffffff;
border: 4px solid #fffb00;
border: 1px solid #1f1f1f;
border-radius: 12px;
width: 30%;
height:auto;
text-align: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
align-items: center;
box-shadow: 1px 1px 4px rgb(251, 255, 0);
transition: transform 0.2s ease, box-shadow 0.2s ease;
margin:10px;
box-sizing: border-box;
}
*/
.live-curriculam-card {
flex: 1 1 30%; /* Allows flexible width with equal height */
display: flex;
flex-direction: column;
justify-content: space-between; /* Keeps content spaced evenly */
justify-content: flex-start; /* prevent stretch */
background: #ffffff;
border: 1px solid #1f1f1f;
border-radius: 12px;
text-align: center;
box-shadow: 1px 1px 4px rgb(251, 255, 0);
transition: transform 0.2s ease, box-shadow 0.2s ease;
margin: 10px;
box-sizing: border-box;
}
.live-curriculam-card:hover {
transform: translateY(-4px);
}
.curriculam-image{
position: relative;
float: left;
width: 100%;
height:auto;
box-sizing: border-box;
}
.curriculam-image img {
position: relative;
float: left;
width: 100%;
height:auto;
box-sizing: border-box;
width: 100%;
height: 200px;
object-fit: cover;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
.curriculam-title{
position: relative;float: left;
width:100%;height:auto;
font-size: 22px;
font-weight: 700;
color:rgb(0, 0, 0);
margin-top:10px;
box-sizing: border-box;
text-align: left;
padding-left:10px;
padding:15px;
}
.curriculam-points {
position: relative;
float: left;
width:95%;height:auto;
list-style: none;
padding-left: 10px;
box-sizing: border-box;
}
.curriculam-points li{
position: relative;
float: left;
width:100%;height:auto;
font-size: 17px;
font-weight: 500;
color: #080808;
padding-left: 30px;
margin-bottom: 10px;
box-sizing: border-box;
text-align: left;
}
.curriculam-points ::before {
content: "\2714"; /* Unicode checkmark */
position: absolute;
left: 0;
color: #0022ff;
text-shadow: 1px 1px 1px rgb(221, 255, 0);
font-weight: bold;
padding-left: 5px;
}
/***************Live curriculam ***********/
/***certificate section ***/
.certificate-aligner{
width:100%;
padding:85px 0;
margin-top:100px;
background-color:#0b0f17;
background-image:
linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
background-size:40px 40px;
overflow:hidden;
border-top: rgba(255,255,0,0.192) 5px dashed ;
}
/* Wrapper */
.certificate-wrapper{
width:80%;
margin:0 auto;
display:flex;
align-items:center;
gap:60px;
box-sizing:border-box;
padding:20px;
}
/* 📱 Mobile */
@media (max-width: 768px){
.certificate-wrapper{
width: 95%;
flex-direction: column; /* stack items */
gap: 20px; /* smaller gap */
padding: 15px;
text-align: center; /* nicer for stacked layout */
}
}
/* Left Side */
.certificate-left-side{
width:50%;
box-sizing:border-box;
}
/* Certificate Image */
.certificate-pic{
width:100%;
}
.certificate-pic img{
width:100%;
height:auto;
border-radius:16px;
box-shadow:20px 25px 70px rgba(255, 255, 0, 0.175);
display:block;
}
/* Right Side */
.certificate-right-side{
width:50%;
color:#ffffff;
box-sizing:border-box;
}
/* Small Badge */
.certificate-badge{
font-size:12px;
letter-spacing:2px;
text-transform:uppercase;
opacity:0.8;
margin-bottom:20px;
}
/* Main Heading */
.certificate-title{
font-size:52px;
font-weight:700;
line-height:1.2;
color:#f5f5c6;
margin-bottom:20px;
}
.certificate-title span{
color:#ffd700;
}
/* Subtitle */
.certificate-subtitle{
font-size:18px;
color:#cfcfcf;
max-width:480px;
line-height:1.6;
}
/* ===============================
RESPONSIVE (MOBILE)
================================ */
@media (max-width: 900px){
.certificate-wrapper{
flex-direction:column;
gap:40px;
}
.certificate-left-side,
.certificate-right-side{
width:100%;
text-align:center;
}
.certificate-subtitle{
margin:0 auto;
}
.certificate-title{
font-size:38px;
}
}
/**certificate section ends***/
/***************Live Tech Stack***********/
.live-tech-stack-aligner{
position: relative;float: left;
width: 100%;
height: auto;
background-color: rgb(255, 255, 110);background-color: rgb(41, 41, 41);
background-color: rgb(255, 255, 0);
background-image:
linear-gradient(rgba(37, 37, 37, 0.285) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0) 1px, transparent 1px);
background-size:40px 40px;
overflow:hidden;
}
.live-tech-stack-wrapper{
position: relative;margin:0 auto; /* center */
width:80%;height:auto;
box-sizing: border-box;padding:15px;
padding-top:25px;
}
/* 📱 Mobile */
@media (max-width: 768px){
.live-tech-stack-wrapper{
width: 95%; /* more space on small screen */
padding: 12px; /* compact padding */
}
}
/* 📱 Small mobile (optional) */
@media (max-width: 480px){
.live-tech-stack-wrapper{
width: 100%;
padding: 10px;
}
}
.live-tech-stack-title{
position: relative;float: none;
width:auto;height:auto;
margin-top:20px;
color:rgb(0, 0, 0);
font-weight: 700;
font-size: 40px;
text-align:center;
line-height: 1.2;
}
.live-tech-stack-title span{
position: relative;float: none;
color:rgb(43, 0, 255);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center bottom;
padding-bottom: 15px;
font-weight: 700;
width: auto;
line-height: 1.2;
}
.live-tech-stack-subtitle{
position: relative;float: left;
width:100%;height:auto;
font-size: 40px;
margin-bottom:20px;
color:rgb(124, 124, 124);
font-size: 20px;
text-align:center
}
.live-tech-stack {
position: relative;float: left;
width:100%;height:auto;
}
.live-tech-stack-group{
position: relative;float: left;
width:100%;height:auto;
padding:20px;
box-sizing: border-box;
/*background-color: rgb(255, 255, 186);*/
border-radius: 15px;
margin-bottom: 30px;
border: 2px solid #1d1d1d;
background-color: #ffffff;
background-color: #000000;
}
.live-tech-stack-group h3{
position: relative;float: left;
width:100%;height:auto;
font-size: 25px;
font-weight: 700;
color:rgb(0, 0, 0);
margin-bottom:15px;
color:white;
}
.tech-cards{
position: relative;float: left;
width:100%;height:auto;
box-sizing: border-box;
}
.tech-card {
position: relative;
float: left;
background: #ffffff;
border: 2px solid #1d1d1d;
border-radius: 12px;
padding:10px;
width: 20%;
height:auto;
text-align: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
align-items: center;
box-shadow: 4px 4px 0px rgb(13, 0, 255);
transition: transform 0.2s ease, box-shadow 0.2s ease;
box-sizing: border-box;
margin:10px;
}
/* 📱 Mobile */
@media (max-width: 768px){
.tech-card{
width: 95%; /* single column */
}
}
.tech-card:hover {
transform: translateY(-4px);
}
.tech-card img {
position: relative;
width: 100%;
height:auto;
object-fit: contain;
margin-bottom: 10px;
}
.tech-card span {
position: relative;
float: left;
width:100%;height:auto;
font-size: 20px;
font-weight: 500;
color: #080808;
}
/***************Live Tech Stack***********/
/***************course outline ***********/
.live-course-outline-wrapper{
position: relative;float: left;width:100%;height:auto;
box-sizing: border-box;padding:15px;
}
.live-course-outline-title-wrapper{
margin : 0px auto;
width:98%;
height: auto;
padding-top:50px;
}
.live-course-outline-title{
position: relative;float: left;
width:100%;height:auto;
font-size:40px;
font-weight: 700;
text-align: center;
padding:0px;
line-height: 1.3;
margin-bottom: 25px;
}
.handdrawn-underline{
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center bottom;
padding-bottom: 10px;
}
.live-course-outline-section-wrapper{
margin : 0px auto;
width:80%;height: auto;
box-sizing: border-box;
}
@media (max-width: 768px) {
.live-course-outline-section-wrapper {
width:95%;
}
}
.live-course-modules-wrapper{
position: relative;float: left;width:100%;height:auto;
box-sizing: border-box; margin-bottom:15px;
border:rgb(14, 1, 67) solid 5px;
border-radius: 15px;
background-color: rgb(115, 0, 255);
/* background: linear-gradient(135deg, #3d0075, #6a0dad, #b4009e);
*/
margin-top:20px;
}
.live-course-modules-title{
position: relative;float: left;width:100%;height:auto;
box-sizing: border-box;padding:5px;
text-align: center;color:white;font-size: 30px;
font-weight: 700;
border-radius: 10px 10px 0px 0px;
/*
background: rgb(72, 0, 255);
*/
}
.live-course-modules{
position: relative;float: left;width:100%;height:auto;
box-sizing: border-box;
padding:20px;
}
.live-course-module{
position: relative;float: left;width:98%;height:auto;
box-sizing: border-box;
margin:1%;
transition: transform 0.2s ease, box-shadow 0.2s ease;
border-radius: 15px 15px 15px 15px;
margin-bottom: 20px;margin-top: 15px;
background-color: #f7f7f7;
box-shadow: 0 10px 1px rgba(0, 0, 0, 0.758);
border: solid 4px black;
}
.live-course-module:hover{
box-shadow: 0 5px 2px rgb(255, 255, 0);
background: rgb(255, 255, 255);
}
.arrow {
position: relative;
float: left;
height: 50px;
width: 100%;
margin: 0;
}
/* Hand-drawn vertical line with imperfections */
.arrow::before {
content: '';
position: absolute;
left: 50%;
top: -5px;
width: 6px;
height: 110%;
background: transparent;
border-left: 10px solid #000000;
transform: translateX(-50%) rotate(1deg);
border-radius: 8px;
clip-path: polygon(0 0, 100% 0, 98% 100%, 2% 100%);
animation: wobble 2s infinite;
}
/* Hand-drawn arrowhead */
.arrow::after {
content: '';
position: absolute;
bottom: -5px;
left: 50%;
width: 20px;
height: 20px;
border-right: 10px solid #030303;
border-bottom: 10px solid #222;
transform: translateX(-50%) rotate(45deg) scaleY(1.2) rotate(2deg);
border-radius: 3px;
clip-path: polygon(0 0, 100% 0, 100% 90%, 90% 100%, 0 100%);
}
.lcos-title{
position: relative;float: left;width:100%;height:auto;
box-sizing: border-box;padding:2px;
text-align: center;color:white;font-size: 25px;
border-radius: 15px 15px 0px 0px;
background:blue;
box-shadow: 0px 4px 2px rgba(0, 0, 0, 0.1);
cursor:pointer;
}
.lcos-details{
position: relative;float: left;width:100%;
box-sizing: border-box;
height: 0px;
overflow: hidden;
transition: height 0.4s ease;
}
.lcos-details-open{height: auto;}
.lcos-details ul{
position: relative;float: left;width:100%;height:auto;
box-sizing: border-box;list-style: none;padding:5px;
}
.lcos-details ul li{
position: relative;float: left;width:90%;height:auto;
box-sizing: border-box;padding:2px;
margin: 5px;font-size: 20px;
}
/*************************Faqs********************/
.faq-wrapper{
position: relative;
float: left;
width:100%;
height: auto;
box-sizing: border-box;
padding:20px;
padding-bottom: 40px;
}
.faq-container {
width: 80%;
margin: 0 auto;
}
@media (max-width: 768px) {
.faq-container {
width:95%;
}
}
.faq-title{
font-weight: 700;
margin-bottom: 15px;
font-size: 25px;
box-sizing: border-box;
padding: 10px;
}
.faq-item {
background: rgb(255, 255, 255);
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
margin-bottom: 15px;
overflow: hidden;
font-size: 20px;
}
.faq-item input {
display: none;
}
.faq-item label {
display: block;
padding: 18px 24px;
font-weight: bold;
cursor: pointer;
position: relative;
background: rgb(255, 255, 255);
color:#232323;
font-size: 22px;
}
.faq-item label::after {
content: '+';
position: absolute;
right: 24px;
top:10px;
font-size: 32px;
text-shadow: 1px 1px 1px rgba(25, 0, 255, .5);
transition: transform 0.3s ease;
}
.faq-item input:checked + label::after {
content: '−';
transform: rotate(180deg);
}
.faq-answer {
max-height: 0;
padding: 0 24px;
overflow: hidden;
transition: all 0.3s ease;
background-color: #faf8f8;
color:#414043;
font-weight: 500;
border-top:solid 1px rgb(42, 50, 165);
}
.faq-item input:checked ~ .faq-answer {
max-height: 500px;
padding: 18px 24px;
}
.faq-answer p {
margin: 0;
line-height: 1.6;
}
/****************Faqs**********************************/
/* Archive page card titles */
.archive-live .card-title.live-title {
font-size: 1.8rem;
margin-bottom: 1rem;
}
.live-container{
position: relative;
float:left;
width:100%;
height:auto;
box-sizing: border-box;
padding-top:0px;
}
/*************live footer************/
/* feedbacks of wayolabs */
.feedback-house-wrapper{
position: relative;
float:left;
width:100%;
height: 850px;
}
.feedback-house {
position: absolute;
width: 100%;
background-color: #000;
box-sizing: border-box;
padding-top:20px;
height: 100%;
}
.feedback-title {
margin: 0 auto;
width:90%;
text-align: center;
}
.feedback-title h1 {
margin: 0 auto;
padding-top:60px;
margin-bottom: 10px;
color: #e6e6e6;
font-size:50px;
width:45%;
line-height: 35px;
border-bottom:solid 7px rgb(255, 106, 0);
border-bottom:solid 7px rgb(255, 255, 0);
}
@media (max-width: 768px) {
.feedback-title h1 {
width:90%;
}
}
.feedback-title p {
width:100%;
font-size:25px;
color: #8d8c90;
margin: 0 auto;
}
.feedback-wrapper {
position: relative;
margin: 0 auto;
width: 90%;
height: auto;
box-sizing: border-box;
padding:30px;
padding-bottom:0px;
}
.feedback-container {
position:relative;
display: flex;
overflow-x: auto;
scroll-behavior: smooth;
gap: 20px;
padding: 20px 0;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
width: 98%;
height: auto;
box-sizing: border-box;
}
@media (max-width: 768px) {
.feedback-wrapper {
width: 100%;
padding: 12px;
padding-bottom: 0;
}
.feedback-container {
gap: 14px;
padding: 12px 0;
}
}
.feedback-container::-webkit-scrollbar {
display: none;
}
.feedback-card {
flex: 0 0 300px;
background: white;
border-radius: 10px;
padding: 25px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
background-color: #1f1f1f;
border:solid 4px rgb(57, 19, 228);
background-color: #242422;
background-color: #fff700;
cursor: grabbing;
cursor: grab;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.feedback-card:hover {
transform: translateY(-2px);
box-shadow: 0 5px 5px rgb(52, 30, 195);
}
.student-info {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.student-avatar {
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
margin-right: 15px;
border:solid 4px rgb(22, 22, 22);
}
.student-name {
font-weight: 600;
margin-bottom: 3px;
color: #000dff;
font-size: 25px;
}
.student-course {
font-size: 0.9rem;
color: #000000;
}
.rating {
display: flex;
margin-bottom: 15px;
display: none;
}
.star {
color: #e2e8f0;
font-size: 1.2rem;
margin-right: 3px;
}
.star.filled {
color: #0011ffa3;
}
.feedback-text {
line-height: 1.5;
color: #000000;
font-size:16px;
font-weight: 500;
}
.nav-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
background: white;
border-radius: 50%;
border: none;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
cursor: pointer;
font-size: 1.2rem;
color: #ff0000;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.nav-btn:hover {
background: #ae00ff;
color: white;
}
.nav-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
background: white;
color: #818181;
}
#prevBtn {
left: 0;
transform: translateX(-50%) translateY(-50%);
}
#nextBtn {
right: 0;
transform: translateX(50%) translateY(-50%);
}
.dots-container {
display: flex;
justify-content: center;
margin-top: 20px;
gap: 8px;
}
.dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: #ffff00;
border: none;
cursor: pointer;
transition: all 0.3s ease;
}
.dot.active {
background: #1e00ff;
width: 24px;
border-radius: 6px;
}
@media (max-width: 768px) {
.feedback-card {
flex: 0 0 280px;
}
.nav-btn {
width: 35px;
height: 35px;
font-size: 1rem;
}
#prevBtn {
left: -15px;
}
#nextBtn {
right: -15px;
}
}
@media (max-width: 480px) {
.header h1 {
font-size: 1.8rem;
}
.header p {
font-size: 1rem;
}
.feedback-card {
flex: 0 0 260px;
padding: 20px;
}
.nav-btn {
display: none;
}
}
/*************feedbacks of wayo labs***********/
/********* recommendations for wayo labs ******/
.recommendation-house{
position: relative;
float: left;
width: 100%;
height: auto;
background-color: rgb(38, 38, 40);
box-sizing: border-box;
padding: 40px;
background-color: rgb(111, 0, 255);
background: linear-gradient(135deg, #3d0075, #6a0dad, #b4009e, #8000ff);
opacity: .9;
}
/* Mobile adjustments */
@media (max-width: 768px) {
.recommendation-house {
padding: 10px;
}
}
.recommend-left{
position: relative;
float: left;
width: 70%;
height: 350px;
box-sizing: border-box;
padding: 20px;
border-radius: 15px;
}
/* Mobile adjustments */
@media (max-width: 768px) {
.recommend-left {
width: 100%;
padding: 10px;
height: 500px;
}
}
.part2{
position: relative;
float: left;
width: 100%;
height: auto;
box-sizing: border-box;
padding: 20px;
color:rgb(128, 128, 128);
padding-bottom:100px;
}
.part2 .sidha{
position: relative;
float: left;
width: auto;
height: auto;
box-sizing: border-box;
color:rgb(236, 237, 243);
font-size:120px;
font-size:70px;
font-weight: 700;
line-height: .7;
border-bottom:#1e00ff solid 20px;
}
@media (max-width: 768px) {
.part2 .sidha{
font-size:300%;
font-weight: 700;
border-bottom:#1e00ff solid 10px;
}
}
.part2 .ghuma{
position: absolute;
bottom: 10px;
transform: rotate(320deg);
transform-origin: left top;
display: inline-block;
color:rgb(236, 237, 243);
font-size:60px;
font-weight: 500;
line-height: .7;
border-bottom:#1e00ff solid 10px;
}
@media (max-width: 768px) {
.part2 .ghuma{
bottom: 10px;left:40px;
font-size:200%;
font-weight: 500;
border-bottom:#1e00ff solid 10px;
line-height: .7;
}
}
.part3{
position: relative;
float: left;
width: 100%;
height: auto;
padding: 20px;
box-sizing: border-box;
line-height: .3;
color:rgb(255, 255, 255);
font-size:130px;
font-weight: 700;
}
@media (max-width: 768px) {
.part3{
font-size:400%;
font-weight: 700;
}
}
.part3 ul{
position: relative;
list-style: none;
width:auto;
padding: 0px;
margin:0px;
padding-bottom: 20px;;
height: auto;
}
@media (max-width: 768px) {
.part3 ul{
float:left;
}
}
.part3 ul li{
display: none;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.part3 ul li.visible {
display: block;
opacity: 1;
}
.remommender-list-wrap{
position: relative;
float: left;
width: 100%;
height: auto;
box-sizing: border-box;
padding:0px;
padding-bottom:0px;
margin-top:0px;
}
.mini-recommender-wrapper {
position: absolute;
float: left;
width: 99%;
height: auto;
box-sizing: border-box;
padding:0px;
padding-bottom:0px;
}
.mini-recommender-container {
position:relative;
display: flex;
overflow-x: auto;
scroll-behavior: smooth;
gap: 10px;
padding: 20px 0;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
width: 90%;
height: auto;
box-sizing: border-box;
}
@media (max-width: 768px) {
.mini-recommender-container{
width: 100%;
}
}
.mini-recommender-container::-webkit-scrollbar {
display: none;
}
.mini-recommender-card {
flex: 0 0 200px;
background: white;
border-radius: 10px;
padding: 15px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
background-color: #1f1f1f;border:solid 4px rgb(57, 19, 228);
background-color: #b6b9d1;
background-color: #84879f;
cursor: grabbing;
cursor: grab;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.mini-recommender-card.active {
transform: translateY(-2px);
box-shadow: 0 5px 5px rgb(52, 30, 195);
border:solid 4px rgb(34, 34, 34);
background-color: #0000ff;
}
.mini-recommender-card:hover {
box-shadow: 0 5px 5px rgb(52, 30, 195);
}
.mini-recommender-info {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.mini-recommender-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
margin-right: 15px;
}
.mini-recommender-name {
font-weight: 600;
margin-bottom: 3px;
color: #efefef;
font-size: 25px;
}
.mini-recommender-course {
font-size: 0.9rem;
font-weight: 650;
color: #efefef;
}
.mini-recommender-text{
display: none;
}
/***/
.recommend-right{
position: relative;
float: left;
width: 30%;
height: auto;
box-sizing: border-box;
padding: 10px;
border-radius: 15px;
font-size: 1.4rem;
background: radial-gradient(circle 80px at 80% -10%, #ffffff, #000000);
box-shadow: -10px -10px 3px #6d0075;
}
@media (max-width: 768px) {
.recommend-right{
width: 95%;
padding-left:15px;
}
}
.recommend-right:hover{
box-shadow: -5px -5px 3px #0400ff;
}
.blob1 {
position: absolute;
width: 70px;
height: 100%;
border-radius: 16px;
bottom: 0;
left: 0;
background: radial-gradient(
circle 60px at 0% 100%,
#ff5e00,
#d3cbfd,
transparent
);
box-shadow: -10px 10px 30px #0051ff2d;
}
.recommend-inner-content {
position: relative;
float: left;
padding: 14px 5px;
border-radius: 14px;
color: #fff;
z-index: 3;
background: radial-gradient(circle 180px at 80% 50%, #aa00ff, #0400ff);
width: 100%;
height: auto;
box-sizing: border-box;
}
.recommend-inner1{
position: relative;
float: left;
width:100%;height: auto;
box-sizing: border-box;
}
.recommender-pic {
position: relative;
float: left;
width: 40%;
height: auto;
margin-right: 5%;
box-sizing: border-box;
}
.recommender-pic img {
box-sizing: border-box;
width: 100%;
height: auto;
border-radius: 50%;
background-color: #ccc;
background-size: cover;
background-position: center;
margin: 0 auto 10px auto;
border:solid 4px rgb(183, 0, 255);
}
.recommender-intro{
position: relative;float: left;
width: 50%;
height:auto;
box-sizing: border-box;
padding-top: 20px;
color: #040404;
}
.recommender-name{
position: relative;float: left;
width: 100%;
height:auto;
box-sizing: border-box;
font-weight: 600;
color: #ffffff;
}
.recommender-desig{
position: relative;float: left;
width: 100%;
height:auto;
box-sizing: border-box;
font-weight: 400;
color: #ffffff;
}
.recommender-text{
position: relative;float: left;
width: 100%;
min-height:300px;
box-sizing: border-box;
color: #b7bfff;
padding:10px;
border-radius: 10px;
font-size:20px;
line-height: 1.2;
font-weight: 350;
}
/*****************index page css**************/
.video-background {
position: relative;
float: left;
width: 100%;
height: 100vh;
overflow: hidden;
z-index: 1000;
}
.video-background video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
transform: translate(-50%, -50%);
object-fit: cover;
}
.video-content {
position: relative;
z-index: 1;
color: white;
text-align: center;
top: 40%;height: 100%;
transform: translateY(-40%);
background-color: rgb(115, 0, 255);
opacity: .2;
}
.video-content2 {
z-index: 2; position: absolute;
padding: 20px;
box-sizing: border-box;
color: white;
text-align: center;
top: 40%;
transform: translateY(-40%);
font-size:40px;
}
.dabbe{
position: absolute;
padding: 20px;
box-sizing: border-box;
color: white;
text-align: center;
width:30%;height:auto;
font-size:20px;
background-color: #0000ff;
border-radius: 15px;
border:solid 4px black;
}
/**********************enroll-modal ********************/
.enroll-modal{
position: fixed;
float:left;
width:100%;
height:100%;
box-sizing: border-box;
z-index:3000;
background:#fafafa;
background: rgba(48, 48, 48, 0.9);
backdrop-filter: blur(1px);
padding:50px;
display: none;
}
.enroll-modal-container{
position: relative;
float: left;
left:30%;
padding: 30px;
border-radius: 12px;
max-width: 400px;
width: 90%;
border-radius: 20px;
background-color: #dbd8c4;
height: auto;
border: 2px solid #264143;
border-radius: 20px;
box-shadow: 3px 4px 0px 1px #5100ff;
/* Mobile styles */
@media (max-width: 768px) {
left:0%;
padding:10px;
width: 98%;
padding-top:50px;
}
}
.enroll-modal-close-btn {
position: absolute;
top: 10px;
right: 10px;
width: 30px;
height: 30px;
background-color: #ff4d4d;
color: white;
border: none;
border-radius: 50%;
font-size: 20px;
font-weight: bold;
text-align: center;
line-height: 30px;
cursor: pointer;
transition: 0.3s;
}
.enroll-modal-close-btn:hover {
background-color: #cc0000;
}
.enroll-modal.active {
display: flex;
}
.enroll-steps{
position: relative;
float: left;
height: 400px;
width: 100%;
display: block;
overflow: hidden;
}
.enroll-form,
.enroll-pay {
position: absolute;
top: 0;
left: 0;
width: 100%;
transition: transform 0.5s ease-in-out;
}
/* Show the form first */
.enroll-form {
transform: translateX(0%);
z-index: 2;
}
/* Hidden by default: pushed off-screen to the right */
.enroll-pay {
transform: translateX(100%);
z-index: 1;
}
/* Animate form out to left */
.enroll-form.slide-left {
transform: translateX(-100%);
}
/* Animate payment in from right */
.enroll-pay.slide-in {
transform: translateX(100%);
z-index: 300;
}
.enroll-pay-tilte{
position: relative;
float: left;
height: auto;
width: 100%;
font-size:18px;
font-weight: 500;
}
.enroll-pay-amount{
position: relative;
float: left;
height: auto;
width: 100%;
font-size:22px;
font-weight: 600;
margin-bottom: 10px;
}
.enroll-gateway{
position: relative;
float: left;
height: auto;
width: 100%;
}
.enroll-gateway img{
position: relative;
float: left;
height: auto;
width: 100%;
border-radius: 15px;
}
.enroll-form-title{
font-size:25px;
font-weight: 500;
line-height: 1;
margin-bottom: 15px;
}
.enroll-form-title span{
font-size:25px;
font-weight: 700;
line-height: 1.5;
}
.enroll-form label {
font-weight: 600;
}
.enroll-form input[type="text"],
.enroll-form input[type="email"] {
position: relative;
float: left;
height:40px;
width: 100%;
box-sizing: border-box;
padding: 15px;
margin-top: 1px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 18px;
color:#040404;
border:solid 2px blue;
}
.enroll-submit-btn {
position: relative;
float: left;
padding: 15px;
margin: 25px 0px;
width: auto;
height:auto;
display: block;
font-size: 20px;
color:white;
background: #000000;
border-radius: 10px;
font-weight: 400;
box-shadow: 3px 3px 0px 0px #001dfc;
border:solid 2px #1100fc;
text-decoration: none;
}
.enroll-submit-btn:focus {
transform: translateY(4px);
box-shadow: 1px 2px 0px 0px #5100ff;
}
.enroll-submit-btn:hover {
cursor: pointer;
box-shadow: 3px 3px 0px 0px #151515;
}
/**********part of enrollment form now***/
.modern-select {
padding: 10px 14px;
font-size: 16px;
border: 2px solid #d1d5db; /* soft gray */
border-radius: 12px;
background-color: #0055ff72;
color: #f8f8f8;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 16px 16px;
width:100%;
}
.modern-select option{
background-color: #4800ff;
}
.modern-select option:hover{
background-color: #000000;
}
.modern-select:focus {
outline: none;
border-radius: 10px;
border-color: #000000; /* blue-500 */
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3); /* blue glow */
}
/**********enroll modal***/
.menu-link-del{
position: relative;
float:left;
width: 50%;
height: auto;
box-sizing: border-box;
}
.menu-link-del a{
position: relative;
float:left;
width: auto;
height: auto;
box-sizing: border-box;
display: block;
color:rgb(0, 0, 255);
margin:7px;
font-size:42px;
font-weight: 600;
text-decoration: none;
background-color: #ffffff;
padding:5px;
border:solid 4px blueviolet;
border-radius: 15px;
}
.menu-link-del a:hover{
color:rgb(0, 0, 7);
border:solid 4px rgb(13, 0, 255);
}
/*************footer style************/
footer{
position: relative;
float:left;
width:100%;
height:auto;
}
.site-footer{
background:#000;
color:#fff;
}
/* Background + layout */
.footer-links{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
gap:40px;
padding:100px 60px 60px;
background: url('assets/images/bg3.jpg');
background-repeat: no-repeat;
background-position:center bottom;
height: 500px;
}
/* Columns */
.footer-col{
display:flex;
flex-direction:column;
gap:14px;
min-width:200px;
}
/* Logo */
.footer-logo img{
max-width:140px;
filter: drop-shadow(0 0 12px rgba(0,153,255,0.6));
}
/* Links */
.footer-col a{
color:#888987;
color:#423fff;
font-size:20px;
font-weight:600;
text-decoration:none;
transition: all .25s ease;
}
.footer-col a:hover{
color:#ffff00;
text-shadow:0 0 6px rgb(50, 88, 255);
}
/* Bottom bar */
.footer-bottom{
text-align:center;
padding:15px;
font-size:14px;
color:#434343;
}
/* Mobile */
@media (max-width:768px){
.footer-links{
padding:70px 25px 40px;
text-align:center;
justify-content:center;
}
.footer-col{
align-items:center;
}
}
/*
.footer-links{
position: relative;
float:left;
width: 100%;
height: auto;
box-sizing: border-box;
padding:20px;
padding-bottom:0px;
padding-top:150px;
background-color: #000000;
}
.footer-col1{
position: relative;
float:left;
width: 15%;
height: auto;
box-sizing: border-box;
padding:50px;
padding-top:5px;
padding-bottom:5px;
@media (max-width: 768px) {
width: 95%;
}
}
.footer-col1 img{
position: relative;
float:left;
width: 100%;
height: auto;
box-sizing: border-box;
}
.footer-col2{
position: relative;
float:left;
width: 20%;
height: auto;
box-sizing: border-box;
@media (max-width: 768px) {
width: 95%;
text-align: center;
}
}
.footer-col2 a{
position: relative;
float:left;
width: 100%;
height: auto;
box-sizing: border-box;
display: block;
color:rgb(0, 0, 203);
margin:7px;
font-size:22px;
font-weight: 600;
}
.footer-col2 a:hover{
color:#fffb00;
}
.footer-col4{
position: relative;
float:left;
width: 100%;
height: auto;
box-sizing: border-box;
padding:50px;
padding-top:5px;
padding-bottom:5px;
@media (max-width: 768px) {
width: 100%;
}
}
.footer-col4 img{
position: relative;
float:right;
width: 100%;
height: auto;
box-sizing: border-box;
opacity: .8;
}
**/
/*************footer style************/
/*********workshop style**************/
/*************css for workshops*************/
.workshop-container{
position: relative; float: left;
width: 100%;height: auto;
box-sizing: border-box;
padding: 0px;
}
.workshop-entry-wrapper {
position: relative; float: left;
width: 100%;height: auto;
box-sizing: border-box;
}
.workshop-entry-header {
position: relative; float: left;
width: 100%; height: auto;
margin-top: 60px;
box-sizing: border-box;
background-color: rgb(37, 25, 25);
background: -webkit-radial-gradient(#000000,#251919 );
background: radial-gradient(#000000,#251919);
background: -webkit-linear-gradient(-45deg,#251919 50%, #100c08 50%);
background: linear-gradient(-45deg,#251919 50%,#100c08 50%);
border-bottom: solid 1px black;
}
/* Workshop Title Styles */
.workshop-title-wrap {
position: relative; float: left;
width: 100%; height: auto;
box-sizing: border-box;
}
.workshop-title-blur {
position: absolute; top: 0px; left: 0px;
width: 100%; height: 0px;
background: url("https://wayolabs.com/coding/wp-content/uploads/2025/06/image-mesh-gradient.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.workshop-title {
position: relative; float: left;
width: 100%; height: auto;
font-size: 4.5rem;
font-weight: 700;
font-family: "Bebas Neue", sans-serif;
color: rgb(255, 255, 255);
padding: 5px;
padding-left:32px;
box-sizing: border-box;
line-height: .9;
text-shadow: 1px 1px 1px #000000;
-webkit-background-clip: text;
-webkit-text-fill-color: rgb(44, 44, 44);
-webkit-text-fill-color: #eddcd9;
-webkit-text-fill-color: wheat;
}
.workshop-subtitle {
position: relative; float: left;
width: 100%; height: auto;
font-size: 1.5rem;
line-height: .9;
color: rgb(32, 32, 32);
padding-left: 35px;
padding-top: 5px;
box-sizing: border-box;
-webkit-text-fill-color: rgb(103, 99, 89);
}
.workshop-label {
position: relative; float: left;
width: auto; height:auto;
font-weight: 700;
line-height: 1.8;
font-size: 1.8rem;
color: rgb(64, 0, 255);
margin-left: 35px;
padding-top: 20px;
box-sizing: border-box;
overflow: hidden;
}
.workshop-column-wrap {
position: relative; float: left;
width: 100%; height: auto;
box-sizing: border-box;
}
.workshop-column-half, .workshop-column1, .workshop-column2 {
position: relative; float: left;
height: auto;
box-sizing: border-box;
}
.workshop-column-half {
width: 50%;
}
@media (max-width: 768px) {
.workshop-column-half, .workshop-column1, .workshop-column2 {
width: 100%;
}
}
.workshop-column1 {
width: 70%;
box-sizing: border-box;
border-right:solid 0px rgb(0, 0, 0);
@media (max-width: 768px) {
width: 100%;
}
}
.workshop-column2 {
width: 30%;
box-sizing: border-box;
padding:25px;
@media (max-width: 768px) {
width: 100%;
}
}
.workshop-entry-pic {
position: relative; float: left;
width: 100%; height: auto;
padding: 30px;
box-sizing: border-box;
}
.workshop-entry-pic img {
display: block;
margin: 0 auto;
width: 100%;
height: auto;
border-radius: 10px;
border:solid 1px rgb(140, 0, 255);
box-shadow: 5px 5px 0px rgb(170, 0, 217);
}
.enroll-now-btn-wrap {
position: relative;
float: left;
padding: 10px;
box-sizing: border-box;
width: 100%;
margin-top:10px;
}
.normal-button {
background: white;
border: 2px solid black;
color: black;
padding: 12px 24px;
font-size: 20px;
border-radius: 8px;
cursor: pointer;
margin: 10px;
transition: all 0.3s ease;
box-shadow: 0 1px 1px rgba(115, 0, 255, 0.6);
}
.colorful-button {
position: relative;
float: left;
background: linear-gradient(45deg, rgb(146, 145, 89), black);
border: 2px solid rgb(0, 0, 255);
color: rgb(237, 237, 237);
padding: 12px 24px;
font-size: 20px;
border-radius: 8px;
cursor: pointer;
margin: 10px;
transition: all 0.3s ease;
box-shadow: 0 6px 2px rgb(255, 255, 0);
box-shadow: 0 6px 2px rgb(43, 0, 255);
margin-bottom:20px;
text-decoration: none;
display: block;
}
.colorful-button:hover {
border: 2px solid rgb(0, 0, 0);
background: linear-gradient(45deg, rgb(145, 91, 91), black);
}
.fee-things{
position: relative;
float:left;
width:auto;height:auto;
}
.fee-actual{
position: absolute;
top:-25px;
width:auto;height:auto;
color: rgb(255, 0, 0);
padding: 12px 24px;
font-size: 20px;
font-weight: 700;
text-decoration: line-through;
}
.fee-offer{
position: relative;
float:left;
width:auto;height:auto;
color: rgb(44, 44, 44);
padding: 12px 24px;
font-size: 26px;
font-weight: 800;
}
.fee-comment1{
position: relative;
float:left;
width:auto;height:auto;
color: rgb(111, 111, 111);
padding-left: 22px;
font-size: 12px;
font-weight: 500;
margin-top:10px;
}
.workshop-info-wrapper {
position: relative;
float: left;
width: 100%;
margin-bottom: 20px;
box-sizing: border-box;
}
.workshop-info{
position: relative;
float: left;
width: auto;
padding: 10px 15px;
box-sizing: border-box;
margin:5px;
font-weight: 700;
color:white;
background-color: rgb(47, 0, 235);
border-radius: 20px;
}
/*
.details-table {
max-width: 600px;
width: auto;
background-color: rgb(47, 0, 235);
overflow-x: auto;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.details-table thead th {
background: #1f1f1f;
color: white;
padding: 12px 16px;
font-size: 16px;
}
.details-table tbody td {
padding: 5px 8px;
font-size: 15px;
color: white;
}
.details-table tbody tr:nth-child(even) {
background: #6a00ff;
}
.details-table tbody tr:nth-child(odd) {
background: #5900ff;
}
.details-table tbody tr:hover {
background: #9900f9;
}
.batch-list {
list-style: none;
padding: 0;
}
.batch-list li {
padding: 1px;
margin-bottom: 6px;
border-bottom: 1px solid #2a38806d;
}
*/
/***************Instructor Profile***********/
/*
.instructor-wrap {
float: left;
width: 100%;
padding: 10px;
box-sizing: border-box;
}
.instructor-title {
font-size: 20px;
font-weight: bold;
color: black;
}
.instructor-wrap ul {
list-style: none;
padding: 0;
margin: 0;
float: left;
width: 100%;
}
.instructor-wrap ul li {
width: 25%;
float: left;
padding: 10px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.15);
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
margin: 5px;
text-align: center;
transition: transform 0.3s;
}
.instructor-wrap ul li:hover {
transform: translateY(-8px);
}
.instructor-pic {
width: 50%;
border-radius: 50%;
background-color: rgb(187, 0, 255);
margin: 0 auto 10px;
}
.instructor-pic img {
width: 100%;
border-radius: 50%;
border: 1px solid black;
}
.instructor-name {
font-size: 16px;
font-weight: bold;
color: #fff;
}
.instructor-desc {
font-size: 14px;
color: #eee;
}
**/
/***************Instructor Profile ends***********/
/***************Workshop Tech Stack & Instructor Wrapper***********/
.workshop-tech-instructor-wrapper {
position: relative;
float: left;
width: 100%;
padding: 15px;
background-color: rgb(37, 25, 25);
box-sizing: border-box;
background: -webkit-linear-gradient(-45deg,rgb(37, 25, 25) 50%, #100c08 50%);
background: linear-gradient(-45deg,rgb(37, 25, 25) 50%,#100c08 50%);
}
/***********workshop instructor wrap*********/
.workshop-instructor-wrap {
position: relative;
float:left;
padding:10px;
box-sizing: border-box;
height: auto;
width: 50%;
z-index:2;
@media (max-width: 768px) {
width: 100%;
}
}
.workshop-instructor-title{
position: relative;
float:left;
padding: 20px 0;
box-sizing: border-box;
height: auto;
width: 100%;
font-size: 30px;
color:rgb(243, 237, 237);
color:wheat;
}
.workshop-instructor-wrap ul {
position: relative;
float:left;
box-sizing: border-box;
height: auto;
width: 100%;
list-style: none;
padding: 0;
margin: 0;
justify-content: center;
}
.workshop-instructor-wrap ul li {
position: relative;
float: left;
border: 1px solid #000000;
border-radius: 12px;
width: 25%;
height: auto;
text-align: center;
padding: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s;
background-color: #8c00ff;
background-color: rgb(37, 25, 25);
margin:5px;
box-shadow: 0 8px 32px 0 rgba(64, 0, 255, 0.159);
text-align: center;
transition: transform 0.3s;
@media (max-width: 768px) {
width: 40%;
}
}
.workshop-instructor-wrap ul li:hover {
transform: translateY(-8px);
box-shadow: 0 8px 32px 0 rgba(64, 0, 255, 0.714);
}
.workshop-instructor-pic {
width: 50%;
height: auto;
padding-top:2px;
padding-left:-2px;
border-radius: 50%;
margin: 0 auto 10px;
background-color: rgb(187, 0, 255);
}
.workshop-instructor-pic img {
width: 100%;
height: auto;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: 50%;
margin: 0 auto 0px;
border:solid 1px rgb(0, 0, 0);
}
.workshop-instructor-name {
font-size: 16px;
font-weight: bold;
color: #fff;
margin-bottom: 10px;
}
.workshop-instructor-desc {
font-size: 14px;
color: #eee;
}
/***********workshop instructor wrap*********/
/***********workshop tech stack wrap*********/
.workshop-tech-stack-wrapper {
position: relative;
float:left;
padding:10px;
box-sizing: border-box;
height: auto;
width: 50%;
z-index:2;
@media (max-width: 768px) {
width: 100%;
}
}
.workshop-tech-stack-title {
color: wheat;
font-size: 30px;
padding: 20px 0;
}
.workshop-tech-stack {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.workshop-tech-stack .tech-card {
border: 1px solid #5d00ff;
border-radius: 12px;
padding: 12px 16px;
width: 100px;
text-align: center;
box-shadow: 0 2px 2px rgb(196, 0, 240);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.workshop-tech-stack .tech-card:hover {
transform: translateY(-4px);
box-shadow: 0 6px 2px rgb(196, 0, 240);
}
.workshop-tech-stack .tech-card img {
width: 70%;
margin-bottom: 10px;
}
.workshop-tech-stack .tech-card span {
font-size: 20px;
font-weight: 500;
color: #555555;
}
/************* workshop-feature-outcome-wrapper *************/
.workshop-feature-outcome-wrapper{
position: relative;
float: left;
width:100%;
height: auto;
box-sizing: border-box;
border-top:solid 1px black;
background-color: #100c08;
background-color: rgb(37, 25, 25);
}
.workshop-features-side{
position: relative;
float: left;
width: 40%;
padding: 15px;
box-sizing: border-box;
@media (max-width: 768px) {
width: 100%;
}
}
.workshop-features-title {
box-sizing: border-box;
color: rgb(182, 182, 182);
font-size: 40px;
padding: 20px 0;
display: none;
}
.workshop-features {
position: relative;
float: left;
width: 100%;
padding: 15px;
padding-top: 100px;
box-sizing: border-box;
}
.workshop-features ul {
position: relative;
float: left;
list-style: none;
padding: 0;
margin: 0;
float: left;
}
.workshop-features li {
position: relative;
float: left;
padding: 5px;
width: auto;
height: auto;
margin:20px;
border-radius: 5px;
font-size: 25px;
background-color: #000;
color: white;
border: 4px solid;
border-color: #0000ff #cc00ff #cc00ff #0000ff;
transform: rotate(-10deg);
transform-origin: left top; /* optional: controls pivot point */
}
@media (max-width: 768px) {
.workshop-features li {
font-size: 20px;
}
}
.workshop-outcomes-side{
position: relative;
float: left;
width: 60%;
height: 545px;
background-color: #0000ff;
box-sizing: border-box;
border-radius: 0px 0px 0px 10px;
@media (max-width: 768px) {
width: 100%;
border-radius: 0px;
}
}
.outcomes-house {
position: absolute;
width: 100%;
background-color: #0000ff;
box-sizing: border-box;
padding-top:20px;
border-left:solid 5px blue;
border-bottom:solid 5px blue;
}
.workshop-outcomes-title{
position: relative;
box-sizing: border-box;
color: rgb(244, 233, 233);
font-size: 40px;
padding: 20px ;
}
.workshop-outcome-wrap {
position:relative;
display: flex;
overflow-x: auto;
scroll-behavior: smooth;
gap: 20px;
padding: 0px 0;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
width: 100%;
height: auto;
box-sizing: border-box;
border-bottom:solid 5px blue;
}
.workshop-outcome-wrap::-webkit-scrollbar {
display: none;
}
/*
.workshop-outcome-wrap{
position: relative;
box-sizing: border-box;
color: rgb(93, 93, 93);
font-size: 30px;
padding: 20px 0;
width: 100%;
background-color: yellow;
}
*/
.outcome-card {
flex: 0 0 300px;
border-radius: 10px;
text-align: center;
padding: 25px;
border:solid 4px rgb(57, 19, 228);
box-shadow: 0 2px 2px rgb(196, 0, 240);
background: #0a0a0a;
cursor: grabbing;
cursor: grab;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.outcome-card:hover {
transform: translateY(-4px);
box-shadow: 0 5px 5px rgb(52, 30, 195);
box-shadow: 0 6px 2px rgb(196, 0, 240);
border:solid 4px blueviolet;
}
/*
.outcome-card {
background: #0a0a0a;
border: 1px solid #5d00ff;
border-radius: 12px;
padding: 12px 16px;
width: 50%;
text-align: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 0 2px 2px rgb(196, 0, 240);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.outcome-card:hover {
transform: translateY(-4px);
box-shadow: 0 6px 2px rgb(196, 0, 240);
}*/
.outcome-card img {
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 50%;
object-fit: contain;
margin-bottom: 10px;
}
.outcome-card span {
font-size: 20px;
font-weight: 500;
color: #eaeaea;
}
/************* workshop-feature-outcome-wrapper *************/
/***woorkshop enrollment form style**/
.wrkshp-enroll-container{
position: relative;
float: left;
padding:10px;
padding-top:20px;
margin-top:20px;
border-radius: 12px;
max-width: 400px;
width: 90%;
border-radius: 20px;
background-color: ;
background: -webkit-linear-gradient(-45deg,wheat 50%, #EDDCD9 50%);
background: linear-gradient(-45deg, wheat 50%, #EDDCD9 50%);
height: auto;
border: 2px solid #6200ff;
border-radius: 20px;
box-shadow: 3px 4px 0px 1px #5100ff;
/* Mobile styles */
@media (max-width: 768px) {
left:0%;
padding:10px;
width: 98%;
padding-top:50px;
}
}
.wrkshp-enroll-steps{
position: relative;
float: left;
height: 400px;
width: 100%;
display: block;
overflow: hidden;
}
.wrkshp-enroll-form,
.wrkshp-enroll-pay {
position: absolute;
top: 0;
left: 0;
width: 100%;
transition: transform 0.5s ease-in-out;
}
/* Show the form first */
.wrkshp-enroll-form {
transform: translateX(0%);
z-index: 2;
}
/* Hidden by default: pushed off-screen to the right */
.wrkshp-enroll-pay {
transform: translateX(100%);
z-index: 1;
}
/* Animate form out to left */
.wrkshp-enroll-form.slide-left {
transform: translateX(-100%);
}
/* Animate payment in from right */
.wrkshp-enroll-pay.slide-in {
transform: translateX(100%);
z-index: 300;
}
.wrkshp-enroll-pay-tilte{
position: relative;
float: left;
height: auto;
width: 100%;
font-size:18px;
font-weight: 500;
}
.wrkshp-enroll-pay-amount{
position: relative;
float: left;
height: auto;
width: 100%;
font-size:22px;
font-weight: 600;
margin-bottom: 10px;
}
.wrkshp-enroll-gateway{
position: relative;
float: left;
height: auto;
width: 100%;
}
.wrkshp-enroll-gateway img{
position: relative;
float: left;
height: auto;
width: 100%;
border-radius: 15px;
}
.wrkshp-enroll-form-title{
font-size:25px;
font-weight: 500;
line-height: 1;
margin-bottom: 20px;
}
.wrkshp-enroll-form-title span{
font-size:25px;
font-weight: 700;
line-height: 1.5;
}
.wrkshp-enroll-form label {
font-weight: 600;
}
.wrkshp-enroll-form input[type="text"],
.wrkshp-enroll-form input[type="email"] {
position: relative;
float: left;
height:40px;
width: 100%;
box-sizing: border-box;
padding: 15px;
margin-top: 1px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 18px;
color:#2f00eb;
border:solid 2px blue;
}
.wrkshp-enroll-submit-btn {
position: relative;
float: left;
padding: 10px;
padding-left: 20px;
padding-right: 20px;
margin: 25px 0px;
width: auto;
height:auto;
display: block;
font-size: 20px;
color:white;
background: #000000;
border-radius: 10px;
font-weight: 400;
box-shadow: 3px 3px 0px 0px #0b00df;
border:solid 1px #f800fc;
text-decoration: none;
}
.wrkshp-enroll-submit-btn:focus {
transform: translateY(5px);
box-shadow: 1px 2px 0px 0px #d900ff;
}
.wrkshp-enroll-submit-btn:hover {
cursor: pointer;
box-shadow: 1px 2px 0px 0px #5100ff;
}
.wrkshp-modern-select {
padding: 10px 14px;
font-size: 16px;
border: 2px solid #0055d5; /* soft gray */
border-radius: 6px;
background-color: #ffffff;
color:#2f00eb;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 16px 16px;
width:100%;
font-size:18px;
}
.wrkshp-modern-select option{
background-color: #ffffff;
}
.wrkshp-modern-select option:hover{
background-color: #000000;
}
.wrkshp-modern-select:focus {
outline: none;
border-radius: 10px;
border-color: #000000; /* blue-500 */
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3); /* blue glow */
}
/********************** Workshop FAQs *********************/
.workshop-content-faq-combine{
position: relative;
float: left;
width: 100%;
height: auto;
box-sizing: border-box;
padding: 20px;
border-bottom: solid 14px rgb(220, 212, 255);
padding-bottom: 40px;
background-color: rgb(37, 25, 25);
}
/*************** Workshop Content ***********/
.workshop-content-details-wrapper {
position: relative; float: left; width: 50%; height: auto;
box-sizing: border-box; padding: 15px;
@media (max-width: 768px) {
width: 100%;
}
}
.workshop-content-title-wrapper {
margin: 0px auto;
width: 98%;
height: auto;
padding: 0px;
}
.workshop-content-title {
position: relative; float: left;
width: auto;
font-size: 40px;
font-weight: 700;
text-align: center;
padding: 0px;
margin-bottom: 15px;
color:wheat;
color:#eddcd9;
}
.handdrawn-underline {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center bottom;
padding-bottom: 10px;
}
.workshop-content-section-wrapper {
margin: 0px auto;
width: 98%;
}
@media (max-width: 768px) {
.workshop-content-section-wrapper {
width: 95%;
}
}
.workshop-section-wrapper {
position: relative; float: left; width: 100%; height: auto;
box-sizing: border-box; margin-bottom: 15px;
border: rgb(14, 1, 67) solid 5px;
border-radius: 15px;
background-color: rgb(115, 0, 255);
margin-top: 20px;
}
.workshop-section-title {
position: relative; float: left; width: 100%; height: auto;
box-sizing: border-box; padding: 5px;
text-align: center; color: white; font-size: 30px;
font-weight: 700;
border-radius: 10px 10px 0px 0px;
}
.workshop-modules-wrapper {
position: relative; float: left; width: 100%; height: auto;
box-sizing: border-box; padding: 20px;
}
.workshop-module {
position: relative; float: left; width: 98%; height: auto;
box-sizing: border-box; margin: 1%;
transition: transform 0.2s ease, box-shadow 0.2s ease;
border-radius: 15px;
margin-bottom: 20px; margin-top: 15px;
background-color: #f7f7f7;
box-shadow: 0 10px 1px rgba(0, 0, 0, 0.758);
border: solid 4px black;
}
.workshop-module:hover {
box-shadow: 0 5px 2px rgb(242, 0, 255);
background: rgb(255, 255, 255);
}
.arrow {
position: relative;
float: left;
height: 50px;
width: 100%;
margin: 0;
}
.arrow::before {
content: '';
position: absolute;
left: 50%;
top: -5px;
width: 6px;
height: 110%;
background: transparent;
border-left: 10px solid #000000;
transform: translateX(-50%) rotate(1deg);
border-radius: 8px;
clip-path: polygon(0 0, 100% 0, 98% 100%, 2% 100%);
animation: wobble 2s infinite;
}
.arrow::after {
content: '';
position: absolute;
bottom: -5px;
left: 50%;
width: 20px;
height: 20px;
border-right: 10px solid #030303;
border-bottom: 10px solid #222;
transform: translateX(-50%) rotate(45deg) scaleY(1.2) rotate(2deg);
border-radius: 3px;
clip-path: polygon(0 0, 100% 0, 100% 90%, 90% 100%, 0 100%);
}
.module-title {
position: relative; float: left; width: 100%; height: auto;
box-sizing: border-box; padding: 2px;
text-align: center; color: white; font-size: 25px;
border-radius: 15px 15px 0px 0px;
background: blue;
box-shadow: 0px 4px 2px rgba(0, 0, 0, 0.1);
cursor: pointer;
}
.module-topics {
position: relative; float: left; width: 100%;
box-sizing: border-box;
height: 0px;
overflow: hidden;
transition: height 0.4s ease;
}
.module-topics-open { height: auto; }
.module-topics ul {
position: relative; float: left; width: 100%; height: auto;
box-sizing: border-box; list-style: none; padding: 5px;
}
.module-topics ul li {
position: relative; float: left; width: 90%; height: auto;
box-sizing: border-box; padding: 2px;
margin: 5px; font-size: 20px;
}
/************workshop-conent style ends*************/
.workshop-faq-wrapper {
position: relative;
float: left;
width: 50%;
height: auto;
box-sizing: border-box;
padding: 20px;
padding-bottom: 40px;
@media (max-width: 768px) {
width: 100%;
}
}
.workshop-faq-container {
width: 80%;
margin: 0 auto;
}
@media (max-width: 768px) {
.workshop-faq-container {
width: 95%;
}
}
.workshop-faq-title {
font-weight: 700;
margin-bottom: 15px;
font-size: 25px;
box-sizing: border-box;
padding: 10px;
color:wheat;
}
.workshop-faq-item {
background: rgb(255, 255, 255);
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
margin-bottom: 15px;
overflow: hidden;
font-size: 20px;
}
.workshop-faq-item input {
display: none;
}
.workshop-faq-item label {
display: block;
padding: 18px 24px;
font-weight: bold;
cursor: pointer;
position: relative;
background: rgb(255, 255, 255);
color: #232323;
font-size: 22px;
}
.workshop-faq-item label::after {
content: '+';
position: absolute;
right: 24px;
top: 10px;
font-size: 32px;
text-shadow: 1px 1px 1px rgba(25, 0, 255, .5);
transition: transform 0.3s ease;
}
.workshop-faq-item input:checked + label::after {
content: '−';
transform: rotate(180deg);
}
.workshop-faq-answer {
max-height: 0;
padding: 0 24px;
overflow: hidden;
transition: all 0.3s ease;
background-color: #faf8f8;
color: #414043;
font-weight: 500;
border-top: solid 1px rgb(42, 50, 165);
}
.workshop-faq-item input:checked ~ .workshop-faq-answer {
max-height: 500px;
padding: 18px 24px;
}
.workshop-faq-answer p {
margin: 0;
line-height: 1.6;
}
.workshop-entry-content{
position: relative;float: left;
width:100%;height: auto;
padding:80px; box-sizing: border-box;
line-height:1.2;
}
.workshop-entry-content img{
border-radius: 15px;
box-shadow: 5px 5px 1px rgba(60, 0, 255, 0.873), 5px 5px 2px rgba(247, 0, 255, 0.79);
}
/********************** Workshop FAQs *********************/
/************contact us page **********/
/* ===== CONTACT PAGE BASE ===== */
/*
.contact-page{
position: relative;
float: left;
width: 100%;
padding-top: 100px;
padding-bottom: 80px;
background: #fafafa;
box-sizing: border-box;
}
.contact-container{
width: 80%;
max-width: 1200px;
margin: 0 auto;
box-sizing: border-box;
}
.contact-grid{
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 60px;
align-items: start;
}
.contact-info{
background: #f7f7f7;
padding: 30px;
border-radius: 14px;
box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.contact-info h2{
margin-top: 0;
margin-bottom: 10px;
}
.contact-info p{
margin-bottom: 20px;
color: #555;
}
.contact-item{
margin-top: 20px;
font-size: 16px;
}
.contact-item a{
color: #0004ff;
font-weight: 600;
text-decoration: none;
}
.contact-qr{
margin-top: 30px;
}
.contact-qr img{
width: 160px;
height: auto;
border-radius: 8px;
border: 1px solid #eee;
}
.contact-form-wrap{
background: #ffffff;
padding: 32px;
border-radius: 14px;
box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.contact-form-wrap h1{
margin-top: 0;
}
.contact-form-wrap input,
.contact-form-wrap textarea{
width: 100%;
padding: 12px;
margin-bottom: 15px;
border-radius: 6px;
border: 1px solid #ccc;
box-sizing: border-box;
}
.contact-form-wrap button{
background: #0004ff;
color: #fff;
padding: 12px 30px;
border: none;
border-radius: 999px;
font-weight: 600;
cursor: pointer;
}
.contact-success{
color: #1a7f37;
font-weight: 600;
margin-bottom: 15px;
}
.contact-error{
color: #c62828;
font-weight: 600;
margin-bottom: 15px;
}
@media(max-width: 900px){
.contact-container{
width: 90%;
}
.contact-grid{
grid-template-columns: 1fr;
}
}
*********contact us page ends***********/
/* ===== CONTACT PAGE BASE ===== */
.contact-page{
position: relative;
float: left;
width: 100%;
padding-top: 80px;
padding-bottom: 100px;
background: #f5f6f8;
box-sizing: border-box;
}
.contact-container{
width: 85%;
max-width: 1300px;
margin: 0 auto;
box-sizing: border-box;
}
.contact-grid{
display: grid;
grid-template-columns: 1.05fr 1.25fr;
gap: 80px;
align-items: flex-start;
}
.contact-info{
background: #0e0e0e;
color: #ffffff;
padding: 44px;
border-radius: 18px;
box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}
.contact-info h2{
margin-top: 0;
margin-bottom: 14px;
font-size: 28px;
font-weight: 700;
}
.contact-info p{
margin-bottom: 28px;
color: #cfcfcf;
font-size: 16px;
line-height: 1.6;
}
.contact-item{
margin-bottom: 26px;
font-size: 17px;
}
.contact-item span{
margin-bottom: 6px;
color: #ffffff;
}
.contact-item a{
color: #4d6bff;
font-weight: 600;
font-size: 18px;
text-decoration: none;
}
.contact-item a:hover{
text-decoration: underline;
}
.contact-qr{
margin-top: 36px;
}
.contact-qr p{
margin-bottom: 12px;
font-weight: 600;
color: #e0e0e0;
}
.contact-qr img{
width: 220px;
max-width: 100%;
border-radius: 14px;
background: #000;
padding: 14px;
}
.contact-form-wrap{
background: #ffffff;
padding: 44px;
border-radius: 18px;
box-shadow: 0 20px 50px rgba(0,0,0,0.08);
}
.contact-form-wrap h1{
margin-top: 0;
font-size: 32px;
font-weight: 700;
}
.contact-form-wrap p{
margin-bottom: 24px;
color: #555;
font-size: 16px;
}
.contact-form-wrap input,
.contact-form-wrap textarea{
width: 100%;
padding: 16px;
margin-bottom: 18px;
border-radius: 10px;
border: 1px solid #d0d0d0;
font-size: 16px;
box-sizing: border-box;
}
.contact-form-wrap textarea{
min-height: 140px;
}
.contact-form-wrap button{
background: #0004ff;
color: #fff;
padding: 14px 44px;
border: none;
border-radius: 999px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
box-shadow: 0 12px 30px rgba(0,4,255,0.35);
}
/* STATUS */
.contact-success{
color: #2ecc71;
font-weight: 600;
margin-bottom: 18px;
}
.contact-error{
color: #ff6b6b;
font-weight: 600;
margin-bottom: 18px;
}
/* ===== MOBILE ===== */
@media(max-width: 900px){
.contact-container{
width: 92%;
}
.contact-grid{
grid-template-columns: 1fr;
gap: 50px;
}
.contact-info,
.contact-form-wrap{
padding: 32px;
}
}
/***about page ****/
.about-wrapper{
position: relative; float: left;
width: 100%; height: auto;
background-color: #f2f2e1;
background-image:
linear-gradient(rgba(45,45,45,0.09) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
background-size:40px 40px;
overflow:hidden;
z-index: 100;
}
.myheading1{
color: #404044;
font-weight: 800;
font-size: 58px;
line-height: 1.4;
margin: 0px;
}
.myparagraph {
font-size: 32px;
line-height: 1.2;
margin-bottom: 0;
}
.underline {
position: relative;
display: inline-block;
z-index: 100;
}
.underline::after {
content: "";
position: absolute;
left: -2px;
bottom: 0;
width: 100%;
height: 20px;
background: rgba(255, 243, 128, 0.8);
z-index: 100;
border-radius: 30px;
transform: rotate(-1deg);
}
/* COMMON */
.about-container{
width: 85%;
max-width: 1300px;
margin: auto;
}
.about-hero-text{
font-size: 32px;
line-height: 1.2;
}
/* HERO */
.about-hero{
padding: 160px 0 120px;
}
.about-hero-grid{
display:grid;
grid-template-columns: 1fr 1fr;
gap:60px;
}
.hero-image img{
width:100%;
border-radius: 30px;
border: 3px solid #0004ff;
}
.values-box{
color:#0000ff;
list-style: none;
font-weight: 100;
}
.values-box ul{
margin-bottom: 16px;
font-size: 28px;
list-style: none;
}
.values-box li{
position: relative;
padding-left: 36px; /* space for tick */
margin-bottom: 16px;
font-size: 28px;
}
.values-box li::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
color: #0000ff;
font-weight: 700;
}
/* JOURNEY */
.about-journey{
padding: 50px 0;
}
.about-journey-grid{
display:grid;
grid-template-columns: 1fr 1fr;
gap:60px;
}
.journey-image img{
width:100%;
border-radius: 30px;
border:3px solid #0000ff;
}
.journey-text p{
font-size: 32px;
line-height: 1.2;
}
/* EXPERTISE */
.about-expertise{
padding: 150px 0;
}
.expertise-grid{
display:grid;
grid-template-columns: repeat(4,1fr);
gap:30px;
}
.expert-card{
background:#fff;
padding:40px;
border-radius: 25px;
text-align:center;
font-weight:600;
}
/* TEAM */
.about-team{
display:grid;
grid-template-columns: 1fr 1fr;
align-items:center;
}
.about-team-image img{
width:100%;
border-right:solid 4px blue;
border-top:solid 4px yellow;
border-radius: 0px 30px 0px 0px;
}
.about-team-text{
padding:80px;
}
/* ===============================
ABOUT PAGE – RESPONSIVE
=============================== */
/* -------- Tablets (<= 1024px) -------- */
@media (max-width: 1024px) {
.myheading1 {
font-size: 44px;
line-height: 1.3;
}
.myparagraph,
.about-hero-text,
.journey-text p {
font-size: 26px;
line-height: 1.3;
}
.about-hero {
padding: 120px 0 80px;
}
.about-hero-grid,
.about-journey-grid,
.about-team {
grid-template-columns: 1fr;
gap: 40px;
}
.about-team-text {
padding: 40px;
}
.expertise-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* -------- Mobile (<= 768px) -------- */
@media (max-width: 768px) {
.about-container {
width: 92%;
}
.myheading1 {
font-size: 36px;
line-height: 1.25;
}
.myparagraph,
.about-hero-text,
.journey-text p {
font-size: 22px;
line-height: 1.4;
}
.about-hero {
padding: 100px 0 60px;
}
.hero-image img,
.journey-image img {
border-radius: 20px;
}
.values-box li {
font-size: 22px;
padding-left: 30px;
}
.values-box li::before {
font-size: 18px;
top: 2px;
}
.expertise-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.expert-card {
padding: 30px;
}
.about-team-image img {
border-right: none;
border-top: solid 4px yellow;
border-radius: 20px 20px 0 0;
}
.about-team-text {
padding: 30px 20px;
}
}
/* -------- Small Mobile (<= 480px) -------- */
@media (max-width: 480px) {
.myheading1 {
font-size: 30px;
}
.myparagraph,
.about-hero-text,
.journey-text p {
font-size: 20px;
}
.underline::after {
height: 14px;
}
.expert-card {
padding: 24px;
font-size: 18px;
}
}
/*********whatsapp floating button style **********/
/*
.float-button {
text-decoration: none;
position: fixed;
padding: 10px;
padding-right: 15px;
bottom: 30px;
right: 30px;
color: #fff;
background-color:#25D366;
border-radius: 25px 30px 5px 25px;
z-index: 100;
font-family: Arial;
font-size: 17px;
animation: whatsapp-animation 0.5s ease-in-out;
box-shadow: 1px 2px 5px 2px rgba(30,30,30,0.3);
transition:all 0.3s ease-out;
}
.float-button:hover {
background-color: #128C7E;
color: #fff;
}
.fa-whatsapp {
font-size: 20px !important;
padding-right: 5px;
padding-left: 5px;
}
@keyframes whatsapp-animation {
from {
opacity: 0%;
}
to {
opacity: 100%
}
}
@media screen and (max-width: 545px) {
span {
display: none;
}
.float-button {
bottom: 15px;
right: 15px;
width: 20px;
border-radius: 20px 20px 5px 20px;
}
.fa-whatsapp {
font-size: 22px !important;
padding: 4px;
}
}
*/
.wa-float {
position: fixed;
bottom: 28px;
right: 28px;
width: 58px;
height: 58px;
background: linear-gradient(135deg, #1BD15E, #07E358);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
text-decoration: none;
z-index: 9999;
box-shadow: 0 10px 30px rgba(37, 211, 102, 0.45);
animation: wa-enter 0.6s ease-out, wa-pulse 2.2s infinite;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.wa-float:hover {
transform: scale(1.08);
box-shadow: 0 15px 40px rgba(37, 211, 102, 0.65);
}
.wa-icon {
width: 28px;
height: 28px;
}
/* Slide in */
@keyframes wa-enter {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Pulse glow */
@keyframes wa-pulse {
0% {
box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
}
70% {
box-shadow: 0 0 0 18px rgba(37, 211, 102, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
}
}
/* Mobile tweak */
@media (max-width: 600px) {
.wa-float {
width: 54px;
height: 54px;
bottom: 18px;
right: 18px;
}
.wa-icon {
width: 26px;
height: 26px;
}
}
/******* WhatsApp Floating Button *********/