.elementor-13309 .elementor-element.elementor-element-24fabc0{padding:0px 0px 0px 0px;}.elementor-13309 .elementor-element.elementor-element-cc5ccd1 > .elementor-element-populated{padding:0px 0px 0px 0px;}/* Start custom CSS for html, class: .elementor-element-dd91746 */* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Urbanist', sans-serif;
scroll-behavior: smooth;
}
h1 {
font-size: 40px;
line-height: 48px;
margin-bottom: 20px;
color: #fff;
}
p {
font-family: 'Montserrat', sans-serif;
font-size: 14px;
}
.main{
display: none;
}
.first-section {
height: 500px;
background: url('https://jss-wordpress-media.s3.ap-south-1.amazonaws.com/anurag/Events.png');
background-size: cover;
position: relative;
}
.background-image {
font-family: 'Urbanist', sans-serif;
width: 100%;
max-width: 1150px;
margin: auto;
height: 500px;
align-content: center;
text-align: left;
display: flex;
flex-direction: column;
justify-content: center;
color: #fff;
padding-right: 50%;
}
.background-image p {
font-family: 'figtree';
}
.overlay {
position: absolute;
top: 20px;
left: 130px;
z-index: 1;
}
.overlay a {
text-decoration: none;
color: #fff;
display: inline-block;
padding: 10px 20px;
border-radius: 5px;
}
.overlay a .material-icons {
vertical-align: middle;
margin-right: 5px;
}
.search-bar {
width: 100%;
max-width: 600px;
margin: 0 auto;
position: relative;
background: #FFFFFF 0% 0% no-repeat padding-box;
box-shadow: 0px 6px 16px #171e3428;
border-radius: 10px;
opacity: 1;
top:-25px;
}
.search-bar input {
height: 60px;
width: 100%;
color: #000;
padding: 0 20px;
border: none;
outline: none;
border-radius: 10px;
font-size: 16px;
}
.search-bar input::placeholder {
color: #ccc;
font-size: 16px;
}
.search-bar i {
color: #000;
}
.search-bar button {
background: transparent;
border: none;
outline: none;
position: absolute;
right: 0;
top: 0;
height: 60px;
width: 50px;
cursor: pointer;
}
.second-section {
padding: 20px 10px;
width: calc(100% - 15%);
margin: 0 auto;
max-width: 1200px;
}
.tab-placeholder {
display: flex;
flex-wrap: wrap; 
justify-content: left;
margin-bottom: 30px;
gap: 20px; 
}
.tab {
padding: 8px 20px;
border-radius: 8px;
font-size: 14px;
cursor: pointer;
background: #EFEFEF;
color: #233659;
transition: background 0.3s ease;
text-align: center;
font-weight: 600;
}
.tab.active{
padding: 8px 20px;
border-radius: 8px;
font-size: 14px;
cursor: pointer;
background: linear-gradient(99deg, #C02633 0%, #233659 160%);
color: #fff;
transition: background 0.3s ease;
text-align: center;
font-weight: 600;
}
.tab:hover {
background: linear-gradient(99deg, #233659 0%, #C02633 160%);
color: #fff;
}
.section {
display: none;
}
.cards {
display: flex;
gap: 30px;
justify-content: center;
margin-top: 20px;
flex-wrap: wrap;
}
.card {
width: calc(33.33% - 20px);
margin-bottom: 20px;
background: #FFFFFF;
box-shadow: 0px 6px 30px #2B33561A;
border-radius: 10px;
position: relative;
}
i.fas.fa-arrow-right {
transform: matrix(0.66, -0.75, 0.75, 0.66, 0, 0);
margin-left: 10px;
font-size: 15px;
}
.card-image {
height: 370px;
overflow: hidden;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.card-image img {
width: 100%;
height: 100%;
transition: transform 0.3s ease;
background-size: contain;
}
.card-content {
padding: 20px 20px 10px;
position: relative;
}
.card-content h2 {
font-size: 20px;
height: max-content;
font-family: 'Urbanist', sans-serif;
font-weight: 600;
margin-bottom: 10px;
}
.card-content hr {
border: 0;
border-top: 1px solid #ccc;
margin: 5px 0;
}
.card-content p {
font-size: 14px;
}
.card-content a {
margin-top: 15px;
text-decoration: none;
color: #C02633;
display: flex;
align-items: center;
font-weight: 600;
/*TEXT AS UPPER CASE */
font-family: 'Urbanist', sans-serif; 
}
.card-content a:hover {
color: #273656;
}
.card-content a span {
margin-left: 5px;
}
.arrow-top-right {
transform: matrix(0.66, -0.75, 0.75, 0.66, 0, 0);
}
.loader-container {
position: relative;
}
.loader-wrapper {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1000;
}
#loader {
border: 5px solid #f3f3f3; /* Light grey */
border-top: 5px solid #C02633;
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 1s linear infinite; /* Spin animation */
}
.search-result-message {
text-align: center;
margin-top: 20px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); 
}
}
@media (min-width: 1400px) {
.background-image {
padding-right: 29%;
}
}
@media screen and (max-width: 1024px) {
.background-image p{
font-size: 14px;
}
.background-image {
height: 450px;
padding: 0 10px;
}
h1 {
font-size: 36px;
}
p {
font-size: 14px;
}
.overlay{
top:10px;
}
.search-bar{
top: -20px;
width : calc(100% - 40px);
}
.search-bar input {
height: 40px;
font-size: 14px;
}
.search-bar button {
height: 40px;
width: 40px;
}
.card {
width: calc(48% - 20px);
}
}
@media screen and (max-width: 768px) {
.first-section {
height: 450px;
} 
.background-image p{
font-size: 14px;
}
.background-image {
height: 450px;
padding: 0 10px;
}
h1 {
font-size: 32px;
line-height: 40px;
}
p {
font-size: 14px;
}
.overlay{
top:10px;
}
.search-bar{
top: -20px;
width : calc(100% - 40px);
}
.search-bar input {
height: 40px;
font-size: 14px;
}
.search-bar button {
height: 40px;
width: 40px;
}
.second-section {
padding: 20px;
width: 100%;
}
.card {
margin-right: 0;
width: 100%;
margin-bottom: 20px;
}
}/* End custom CSS */