/* pink - #ff4584 */
html,
body {
margin: 0;
padding: 0;
box-sizing: border-box;
max-width: 100%;
overflow-x: hidden;
}
/*smoothing scroll */
* {
scroll-behavior: smooth;
}
/*scroll bar effect*/
::-webkit-scrollbar {
width: 12px;
background: #f6f6f7;
border: 1px solid transparent;
}
::-webkit-scrollbar-thumb {
background-color: #7952b3;
/*#023047*/
}
/*--------------------------------------------------------------
# Navbar
--------------------------------------------------------------*/
.navbar {
width: 100%;
background-color: transparent;
position: absolute;
padding: 5px 5px;
z-index: 999;
text-shadow: 0px 2px 10px #FFB703;
/*rgba(0, 0, 0, 0.2)*/
}
.logos {
width: 100%;
background-color: transparent;
position: absolute;
z-index: 999;
}
.logos-scroll {
transition: 0.5s;
animation: scroll 0.6s 1;
}
.logos img {
width: 7em;
}
.logo-abgec {
float: left;
margin: 1em;
}
.logo-gecb {
float: right;
margin: 1em;
}
#navbar-brand-abgec {
display: none;
}
#navbar-brand-gecb {
display: none;
}
.nav-item .nav-link {
font-family: 'Raleway', sans-serif;
font-size: 1.3rem;
font-weight: bolder;
text-transform: uppercase;
margin: 0px 10px;
position: relative;
color: rgb(13, 1, 1);
/*#023047;*/
}
.nav-item .nav-link:after {
position: absolute;
top: 0;
left: 0;
bottom: 100%;
height: 1px;
transform: scaleX(0);
transition: 0.5s;
content: "";
transform-origin: left;
background-color: #023047;
}
.nav-item .nav-link:hover :after {
transform-origin: right;
transform: scaleX(1);
}
.nav-item .nav-link:before {
position: absolute;
left: 0;
content: "";
bottom: 0;
width: 100%;
height: 2px;
transform: scaleX(0);
transform-origin: left;
background-color: black;
transition: 0.5s;
}
.nav-item .nav-link:hover:before {
transform: scaleX(1);
transform-origin: right;
}
.navbar-scroll {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: rgb(255, 254, 255);
/* background-image: linear-gradient( rgb(94, 26, 154), rgb(255, 105, 255)); */
/* rgba(255, 255, 255, 1)*/
padding: 5px 0px;
transition: 0.5s;
animation: scroll 0.6s 1;
}
.navbar-scroll>.navbar-toggler {
color: #023047 !important;
}
.nav-item .myprofile {
color: white;
font-weight: 600;
background-color: #ff4584;
padding: 0.5rem;
border: 0;
border-radius: 1rem;
margin: 0.2rem;
}
.nav-item .myprofile:hover {
background-image: linear-gradient(rgb(94, 26, 154), rgb(255, 105, 255));
;
box-shadow: 5px 5px 5px rgb(74, 73, 73);
}
@keyframes scroll {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(0%);
}
}
.nav-item .active {
color: #023047 !important;
}
/*--------------------------------------------------------------
# home Section
--------------------------------------------------------------*/
#homebg {
object-fit: cover;
width: 100vw;
height: 120vh;
position: relative;
top: 0;
left: 0;
z-index: -1;
margin-top: -8em;
}
#homebgmobile {
display: none;
}
@media (max-width: 768px) {
.navbar {
width: 100%;
background-color: rgb(253, 253, 253);
color: #000;
/*one change*/
position: absolute;
padding: 10px 10px;
z-index: 999;
text-shadow: 0px 2px 10px #FFB703;
/*rgba(0, 0, 0, 0.2)*/
display: block;
overflow-x: auto;
}
/* .navbar-nav{
margin-left: auto;
} */
.navbar-scroll {
position: fixed;
top: 0;
right: 0;
width: 100%;
background-color: rgb(255, 255, 255);
color: #000a35;
/*one change*/
padding: 5px 5px;
transition: 0.5s;
animation: scroll 0.6s 1;
}
.logos {
display: none;
}
#homebg {
display: none;
}
#homebgmobile {
display: block;
object-fit: cover;
width: 100%;
height: 105vh;
position: relative;
top: 0;
left: 0;
z-index: -1;
}
}
/*--------------------------------------------------------
marquee tag
--------------------------------------------------------- */
/* Marqueee --- */
#marquee {
font-size: 2rem;
/* background-color: red; */
background-color: #ff4584;
color: white;
font-weight: 600;
height: 3.8rem;
/*margin: 0rem 0;*/
}
#marquee-link {
color: blue;
/* color: #7952b3; */
text-decoration: underline;
}
#marquee-link:hover {
color: whitesmoke;
}
/*--------------------------------------------------------------
# About Us
--------------------------------------------------------------*/
.about-us {
width: 100%;
height: 100vh;
background: url('../images/aboutBg2.png');
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: center;
}
.about-box {
width: 75%;
height: 90%;
background-color: #fff;
box-shadow: 10px 5px 5px gray;
display: flex;
padding: 3rem;
}
.text-about {
width: 50%;
padding: 2rem;
}
/* .heading-about{
width: 50%;
} */
.heading-about {
padding: 2rem 0;
}
.heading-about h2 {
font-size: 6rem;
margin: 0;
}
.text-about p {
font-size: 1.2rem;
margin: 0;
}
.text-about .myBtn {
margin-top: 1em;
padding: 0.5rem 1rem;
border-radius: 10px;
background-color: #7952b3;
cursor: pointer;
font-size: 1rem;
color: white;
}
.text-about .myBtn:hover {
transform: translateY(-10%);
}
.about-misvis {
width: 50%;
/* background-color: #7952b3; */
background-image: linear-gradient(rgb(94, 26, 154), rgb(255, 105, 255));
box-shadow: 10px 5px 5px gray;
padding: 2% 3.5%;
align-content: space-around;
}
.vision {
margin-bottom: 10%;
}
.mission-heading {
display: flex;
justify-content: center;
align-items: center;
}
.mission-heading img {
width: 80px;
}
.mission h2,
.vision h2 {
font-size: 2rem;
font-weight: bold;
}
.mission p,
.vision p {
color: #fff;
font-size: 1.3rem;
text-align: center;
}
/*----Responsive about us---*/
@media (max-width:768px) {
.about-us {
margin-bottom: 1rem;
width: 100%;
height: 100vh;
background: none;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.about-box {
/* width: 60%;
height: 80%; */
width: 90%;
height: 100%;
background-color: #fff;
/* box-shadow: 10px 5px 5px gray; */
box-shadow: none;
display: flex;
flex-direction: column;
padding: 0.5rem;
}
.text-about {
width: 100%;
padding: 0.5rem;
margin-bottom: 1rem;
}
.heading-about {
padding: 1rem 0;
}
.heading-about h2 {
font-size: 5rem;
margin: 0;
}
.about-misvis {
padding: 1.5rem 0.5rem;
width: 100%;
background-color: #7952b3;
box-shadow: 10px 5px 5px gray;
align-content: space-around;
text-align: justify;
}
.mission-heading img {
width: 60px;
}
/* .mission p, .vision p{
text-align: justify;
letter-spacing: 0.2rem;
} */
}
/*--------------------------------------------------------------
# Executive Teams
--------------------------------------------------------------*/
.heading-exe {
font-size: 2.5rem;
font-family: 'Poppins', sans-serif;
font-weight: 800;
text-align: center;
align-items: center;
margin-bottom: 1.5em;
}
.swiper {
width: 1100px;
}
section .card .image {
height: 160px;
width: 160px;
border-radius: 50%;
padding: 0.4rem;
background: #FFF;
}
section .card .image img {
height: 100%;
width: 100%;
border-radius: 50%;
border: 3px solid #fff;
}
.card {
position: relative;
background: #fff;
border-radius: 10%;
margin: 10px 0;
width: 280px;
}
.card::before {
content: "";
position: absolute;
height: 55%;
width: 100%;
background-image: linear-gradient(rgb(94, 26, 154), rgb(255, 105, 255));
border-radius: 20px 20px 0 0;
}
.card .card-content {
display: flex;
flex-direction: column;
align-items: center;
padding: 30px;
position: relative;
z-index: 100;
}
.card .media-icons {
position: absolute;
top: 15px;
right: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.card .media-icons i {
opacity: 0.6;
margin-top: 10px;
transition: all 0.3s ease;
cursor: pointer;
color: #fff;
}
.card .media-icons i:hover {
opacity: 1;
}
.card .name-profession {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 10px;
color: #333;
}
.name-profession .name {
font-size: 1rem;
font-weight: 700;
}
.name-profession .prof {
font-size: 0.8rem;
font-weight: 500;
}
/*.swiper-pagination-bullet{
height: 7px;
width: 26px;
border-radius:25px;
background-color: #FB8500;
}*/
/*--------Responsive Executive Team---------*/
@media(max-width:768px) {
#executive-team {
/* background: #8ECAE6; */
margin-top: 65vh;
/* margin-top: 15vh; */
margin-bottom: 8vh;
}
.swiper {
width: 100%;
/* border: 2px solid palevioletred; */
/* margin-top: -10%; */
}
.section-title {
padding: 1rem 0;
}
.section-title h2 {
font-size: 4rem;
margin-left: 7%;
}
.card {
/* position: relative; */
background: #fff;
/* border-radius: 10%; */
/* margin: 10px 0; */
/* width: 280px; */
/* width: 25px; */
/* height: 10%; */
/* background-color: #008CBA; */
/* width: 100% !important;
margin: 0 1vw; */
height: 65vh;
}
.card::before {
content: "";
position: absolute;
height: 210px;
width: 100%;
background-image: linear-gradient(rgb(94, 26, 154), rgb(255, 105, 255));
border-radius: 20px 20px 0 0;
/* border: 3px solid black; */
}
.card .card-content {
display: flex;
flex-direction: column;
align-items: center;
padding: 30px;
position: relative;
z-index: 100;
/* background-color: yellow; */
/* width: 90%; */
}
.card .media-icons {
position: absolute;
top: 0px;
right: 20px;
display: flex;
/* flex-direction: column; */
flex-direction: row;
row-gap: 20px;
align-items: center;
/* border: 7px solid green; */
/* margin-top: -20px; */
/* margin: 2px 90px; */
}
.card .media-icons a {
margin: 0px 3px;
}
.card .media-icons i {
opacity: 0.6;
/* margin-top: 10px; */
transition: all 0.3s ease;
cursor: pointer;
color: #fff;
/* border: 3px solid red; */
/* margin: 0 100%; */
/* padding: 20px; */
}
.card .name-profession {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 3rem;
color: #333;
/* background-color: palegreen; */
}
.name-profession .name {
font-size: 1.8rem;
font-weight: 700;
text-align: center;
height: auto;
/* background-color: #2196f3; */
margin-bottom: 0;
}
.name-profession .prof {
margin-top: 0;
font-size: 1.2rem;
font-weight: 500;
text-align: center;
/* background-color: orangered; */
}
}
/*Glimpses Start*/
/*.Grid {
/* width: 70rem; */
/* margin: 2rem 0;
align-self: center; */
.Grid .section-title {
margin: 0;
}
.Grid-row {
display: flex;
justify-content: space-around;
margin-bottom: 2.5rem;
}
.G_Card {
position: relative;
flex: 0 1 15rem;
background-color: #fff;
padding-bottom: 5rem;
transition: background-color 0.2s cubic-bezier(0.5, 0.3, 0.8, 0.06);
color: #000;
}
.Card-thumb {
position: relative;
width: 21rem;
height: 14rem;
perspective-origin: 50% 0%;
perspective: 600px;
z-index: 1;
}
.Card-image,
.Card-shadow {
position: absolute;
display: block;
width: 21rem;
height: 14rem;
transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
}
.Card-shadow {
opacity: 0.8;
}
.Card-shadow:nth-child(1) {
opacity: 0.6;
background-color: #673ab7;
transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1) 0.07s;
}
.Card-shadow:nth-child(2) {
opacity: 0.7;
background-color: #3f51b5;
transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1) 0.05s;
}
.Card-shadow:nth-child(3) {
background-color: #2196f3;
transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1) 0.03s;
}
.Card-image {
position: relative;
background-size: auto 100%;
background-position: center;
background-repeat: no-repeat;
background-color: #607d8b;
}
.Card-image::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #3f51b5;
content: '';
opacity: 0;
transition: opacity 0.1s;
}
.Card-title,
.Card-explore {
position: absolute;
bottom: 0;
display: flex;
align-items: center;
width: 100%;
height: 5rem;
text-align: center;
transition: all 0.2s cubic-bezier(0.5, 0.3, 0.8, 0.06);
}
.Card-title span {
font-size: 1.5rem;
background-color: #d4cccc;
font-weight: 700;
color: #333;
}
.Card-title span,
.Card-explore span {
padding: 0.5rem;
flex: 1 1 auto;
text-align: center;
}
.Card-explore {
opacity: 0;
transform: translate(0, -1rem);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 1px;
color: #673ab7;
}
.Card-button {
position: absolute;
left: 50%;
top: 5rem;
padding: 0.5rem 1rem;
background-color: #fff;
border-radius: 2rem;
border: 2px solid #3f51b5;
color: #fff;
font-size: 0.75rem;
font-weight: 600;
transform: translate(-50%, 2rem);
cursor: pointer;
transition: all 0.2s;
opacity: 0;
outline: none;
z-index: 4;
}
.G_Card:hover,
.Card--active {
background-color: #f5f5f5;
cursor: pointer;
}
.G_Card:hover .Card-thumb,
.Card--active .Card-thumb {
z-index: 3;
}
.G_Card:hover .Card-title,
.Card--active .Card-title {
opacity: 0;
}
.G_Card:hover .Card-explore,
.Card--active .Card-explore {
opacity: 1;
transform: translate(0, 1rem);
transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1) 0.1s;
}
.Card:hover .Card-image,
.Card--active .Card-image {
transform: scale(1.05) translate(0, -1rem) rotateX(25deg);
}
.Card:hover .Card-image::before,
.Card--active .Card-image::before {
opacity: 0.4;
}
.G_Card:hover .Card-shadow:nth-child(3),
.Card--active .Card-shadow:nth-child(3) {
transform: scale(1.02) translate(0, -0.3rem) rotateX(15deg);
}
.G_Card:hover .Card-shadow:nth-child(2),
.Card--active .Card-shadow:nth-child(2) {
transform: scale(0.9) translate(0, 1rem) rotateX(15deg);
}
.G_Card:hover .Card-shadow:nth-child(1),
.Card--active .Card-shadow:nth-child(1) {
transform: scale(0.82) translate(0, 2.4rem) rotateX(5deg);
}
.G_Card:hover .Card-button,
.Card--active .Card-button {
opacity: 1;
color: #3f51b5;
transform: translate(-50%, 0);
}
.G_Card:hover .Card-button:hover,
.Card--active .Card-button:hover {
color: #fff;
background-color: #3f51b5;
}
.Card--active,
.Card--active:hover {
background: none;
}
.Card--active .Card-explore,
.Card--active:hover .Card-explore {
opacity: 0;
transform: translate(0, 3rem);
transition: all 0.5s cubic-bezier(0.42, 0, 0.58, 1);
}
.Card--active .Card-image,
.Card--active:hover .Card-image {
opacity: 0;
transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
transform: scale(1.05) translate(0, -2.5rem) rotateX(50deg);
}
.Card--active .Card-image::before,
.Card--active:hover .Card-image::before {
opacity: 0.4;
}
.Card--active .Card-button,
.Card--active:hover .Card-button {
opacity: 0;
transition: all 0.35s cubic-bezier(0.42, 0, 0.58, 1);
transform: translate(-50%, -2rem) scale(1, 0.4);
}
.Grid-row:nth-child(1) .G_Card:nth-child(1).Card--active .Card-shadow:nth-child(3),
.Grid-row:nth-child(1) .G_Card:nth-child(1) .Card--active:hover .Card-shadow:nth-child(3) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1);
transform: scale(1) translate(6%, 113%);
}
.Grid-row:nth-child(1) .G_Card:nth-child(1).Card--active .Card-shadow:nth-child(2),
.Grid-row:nth-child(1) .G_Card:nth-child(1) .Card--active:hover .Card-shadow:nth-child(2) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1) 0.1s;
transform: scale(1) translate(6%, 223%);
}
.Grid-row:nth-child(1) .Card:nth-child(1).Card--active .Card-shadow:nth-child(1),
.Grid-row:nth-child(1) .Card:nth-child(1) .Card--active:hover .Card-shadow:nth-child(1) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1) 0.2s;
transform: scale(2.1) translate(81%, 80%);
}
.Grid-row:nth-child(1) .G_Card:nth-child(2).Card--active .Card-shadow:nth-child(3),
.Grid-row:nth-child(1) .G_Card:nth-child(2) .Card--active:hover .Card-shadow:nth-child(3) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1);
transform: scale(1) translate(-108%, 113%);
}
.Grid-row:nth-child(1) .G_Card:nth-child(2).Card--active .Card-shadow:nth-child(2),
.Grid-row:nth-child(1) .G_Card:nth-child(2) .Card--active:hover .Card-shadow:nth-child(2) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1) 0.1s;
transform: scale(1) translate(-108%, 223%);
}
.Grid-row:nth-child(1) .G_Card:nth-child(2).Card--active .Card-shadow:nth-child(1),
.Grid-row:nth-child(1) .G_Card:nth-child(2) .Card--active:hover .Card-shadow:nth-child(1) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1) 0.2s;
transform: scale(2.1) translate(26%, 80%);
}
.Grid-row:nth-child(1) .G_Card:nth-child(3).Card--active .Card-shadow:nth-child(3),
.Grid-row:nth-child(1) .G_Card:nth-child(3) .Card--active:hover .Card-shadow:nth-child(3) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1);
transform: scale(1) translate(-222%, 113%);
}
.Grid-row:nth-child(1) .G_Card:nth-child(3).Card--active .Card-shadow:nth-child(2),
.Grid-row:nth-child(1) .G_Card:nth-child(3) .Card--active:hover .Card-shadow:nth-child(2) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1) 0.1s;
transform: scale(1) translate(-222%, 223%);
}
.Grid-row:nth-child(1) .G_Card:nth-child(3).Card--active .Card-shadow:nth-child(1),
.Grid-row:nth-child(1) .G_Card:nth-child(3) .Card--active:hover .Card-shadow:nth-child(1) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1) 0.2s;
transform: scale(2.1) translate(-29%, 80%);
}
.Grid-row:nth-child(2) .G_Card:nth-child(1).Card--active .Card-shadow:nth-child(3),
.Grid-row:nth-child(2) .G_Card:nth-child(1) .Card--active:hover .Card-shadow:nth-child(3) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1);
transform: scale(1) translate(6%, -55%);
}
.Grid-row:nth-child(2) .G_Card:nth-child(1).Card--active .Card-shadow:nth-child(2),
.Grid-row:nth-child(2) .G_Card:nth-child(1) .Card--active:hover .Card-shadow:nth-child(2) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1) 0.1s;
transform: scale(1) translate(6%, 55%);
}
.Grid-row:nth-child(2) .G_Card:nth-child(1).Card--active .Card-shadow:nth-child(1),
.Grid-row:nth-child(2) .G_Card:nth-child(1) .Card--active:hover .Card-shadow:nth-child(1) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1) 0.2s;
transform: scale(2.1) translate(81%, 0%);
}
.Grid-row:nth-child(2) .G_Card:nth-child(2).Card--active .Card-shadow:nth-child(3),
.Grid-row:nth-child(2) .G_Card:nth-child(2) .Card--active:hover .Card-shadow:nth-child(3) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1);
transform: scale(1) translate(-108%, -55%);
}
.Grid-row:nth-child(2) .G_Card:nth-child(2).Card--active .Card-shadow:nth-child(2),
.Grid-row:nth-child(2) .G_Card:nth-child(2) .Card--active:hover .Card-shadow:nth-child(2) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1) 0.1s;
transform: scale(1) translate(-108%, 55%);
}
.Grid-row:nth-child(2) .G_Card:nth-child(2).Card--active .Card-shadow:nth-child(1),
.Grid-row:nth-child(2) .G_Card:nth-child(2) .Card--active:hover .Card-shadow:nth-child(1) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1) 0.2s;
transform: scale(2.1) translate(26%, 0%);
}
.Grid-row:nth-child(2) .G_Card:nth-child(3).Card--active .Card-shadow:nth-child(3),
.Grid-row:nth-child(2) .G_Card:nth-child(3) .Card--active:hover .Card-shadow:nth-child(3) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1);
transform: scale(1) translate(-222%, -55%);
}
.Grid-row:nth-child(2) .G_Card:nth-child(3).Card--active .Card-shadow:nth-child(2),
.Grid-row:nth-child(2) .G_Card:nth-child(3) .Card--active:hover .Card-shadow:nth-child(2) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1) 0.1s;
transform: scale(1) translate(-222%, 55%);
}
.Grid-row:nth-child(2) .G_Card:nth-child(3).Card--active .Card-shadow:nth-child(1),
.Grid-row:nth-child(2) .G_Card:nth-child(3) .Card--active:hover .Card-shadow:nth-child(1) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1) 0.2s;
transform: scale(2.1) translate(-29%, 0%);
}
.Grid-row:nth-child(3) .G_Card:nth-child(1).Card--active .Card-shadow:nth-child(3),
.Grid-row:nth-child(3) .G_Card:nth-child(1) .Card--active:hover .Card-shadow:nth-child(3) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1);
transform: scale(1) translate(6%, -223%);
}
.Grid-row:nth-child(3) .G_Card:nth-child(1).Card--active .Card-shadow:nth-child(2),
.Grid-row:nth-child(3) .G_Card:nth-child(1) .Card--active:hover .Card-shadow:nth-child(2) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1) 0.1s;
transform: scale(1) translate(6%, -113%);
}
.Grid-row:nth-child(3) .G_Card:nth-child(1).Card--active .Card-shadow:nth-child(1),
.Grid-row:nth-child(3) .G_Card:nth-child(1) .Card--active:hover .Card-shadow:nth-child(1) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1) 0.2s;
transform: scale(2.1) translate(81%, -80%);
}
.Grid-row:nth-child(3) .G_Card:nth-child(2).Card--active .Card-shadow:nth-child(3),
.Grid-row:nth-child(3) .G_Card:nth-child(2) .Card--active:hover .Card-shadow:nth-child(3) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1);
transform: scale(1) translate(-108%, -223%);
}
.Grid-row:nth-child(3) .G_Card:nth-child(2).Card--active .Card-shadow:nth-child(2),
.Grid-row:nth-child(3) .G_Card:nth-child(2) .Card--active:hover .Card-shadow:nth-child(2) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1) 0.1s;
transform: scale(1) translate(-108%, -113%);
}
.Grid-row:nth-child(3) .G_Card:nth-child(2).Card--active .Card-shadow:nth-child(1),
.Grid-row:nth-child(3) .G_Card:nth-child(2) .Card--active:hover .Card-shadow:nth-child(1) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1) 0.2s;
transform: scale(2.1) translate(26%, -80%);
}
.Grid-row:nth-child(3) .G_Card:nth-child(3).Card--active .Card-shadow:nth-child(3),
.Grid-row:nth-child(3) .G_Card:nth-child(3) .Card--active:hover .Card-shadow:nth-child(3) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1);
transform: scale(1) translate(-222%, -223%);
}
.Grid-row:nth-child(3) .G_Card:nth-child(3).Card--active .Card-shadow:nth-child(2),
.Grid-row:nth-child(3) .G_Card:nth-child(3) .Card--active:hover .Card-shadow:nth-child(2) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1) 0.1s;
transform: scale(1) translate(-222%, -113%);
}
.Grid-row:nth-child(3) .G_Card:nth-child(3).Card--active .Card-shadow:nth-child(1),
.Grid-row:nth-child(3) .G_Card:nth-child(3) .Card--active:hover .Card-shadow:nth-child(1) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1) 0.2s;
transform: scale(2.1) translate(-29%, -80%);
}
@media(max-width:768px) {
.Grid {
display: flex;
justify-content: center;
align-items: center;
}
.Grid .section-title .primary-heading {
font-size: 2.8rem;
font-weight: bold;
text-align: center;
margin: 4rem 0;
margin-left: 0 !important;
padding-bottom: 5px;
color: transparent;
background-image: url("../images/gif.webp");
background-position: center;
-webkit-background-clip: text;
-moz-background-clip: text;
-o-background-clip: text;
background-clip: text;
}
.G_Card {
display: flex;
flex-direction: column;
position: none;
flex: 0 1 15rem;
background-color: #fff;
padding-bottom: 5rem;
transition: background-color 0.2s cubic-bezier(0.5, 0.3, 0.8, 0.06);
color: #000;
}
.G_Card span {
z-index: 2;
}
.Card-explore {
position: none;
display: flex;
align-items: center;
width: 100%;
height: 5rem;
margin-top: 2rem;
text-align: center;
transition: all 0.2s cubic-bezier(0.5, 0.3, 0.8, 0.06);
}
.Grid-row {
display: flex;
flex-direction: column;
/* align-items: center; */
justify-content: center;
}
.G_Card,
.Card-thumb {
text-align: center;
padding: 0 0.56rem;
}
.Card-title span {
text-align: center;
}
}
.Gallery {
display: block;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #f5f5f5;
opacity: 0;
transform: scale(1.2);
transition: none;
padding: 18rem 0;
overflow-y: scroll;
}
.Gallery-header {
position: absolute;
left: 0;
right: 0;
top: 0;
background-color: #eee;
padding-bottom: 5rem;
}
.Gallery-close {
position: absolute;
right: 1rem;
top: 1rem;
font-size: 3rem;
opacity: 0.5;
cursor: pointer;
}
.Gallery-close:hover {
opacity: 0.8;
}
.Gallery-images {
display: flex;
width: 47rem;
margin: 0 auto;
justify-content: space-between;
margin-bottom: 1rem;
}
.Gallery-images:nth-child(3) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1) 0.33s;
opacity: 0;
transform: translate(0, 3rem) scale(1.1);
}
.Gallery-images:nth-child(4) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1) 0.44s;
opacity: 0;
transform: translate(0, 3rem) scale(1.1);
}
.Gallery-images:nth-child(5) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1) 0.55s;
opacity: 0;
transform: translate(0, 3rem) scale(1.1);
}
.Gallery-images:nth-child(6) {
transition: all 0.2s cubic-bezier(0.7, 0, 0.78, 1) 0.66s;
opacity: 0;
transform: translate(0, 3rem) scale(1.1);
}
.Gallery-left {
flex: 1 auto;
display: flex;
justify-content: space-between;
flex-direction: column;
}
.Gallery-image {
display: block;
width: 15rem;
height: 9.5rem;
transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
background: #aebfc7;
background-size: auto 100%;
background-position: center;
background-repeat: no-repeat;
}
.Gallery-image--primary {
width: 31rem;
height: 20rem;
background-color: #673ab7;
}
.Gallery--active {
z-index: 100;
background: #fff;
transform: scale(1);
opacity: 1;
transition: all 0.5s cubic-bezier(0.7, 0, 0.78, 1) 0.1s;
}
.Gallery--active .Gallery-close {
display: block;
}
.Gallery--active .Gallery-images {
opacity: 1;
transform: none;
}
/*--------------------------------------------------------------
# glimpses
--------------------------------------------------------------*/
.hi-slide {
/*position: relative;*/
display: flex;
justify-content: center;
width: 754px;
height: 292px;
/*margin: 115px auto 0;*/
align-items: center;
}
.hi-slide .hi-next,
.hi-slide .hi-prev {
position: absolute;
top: 50%;
width: 40px;
height: 40px;
margin-top: -20px;
border-radius: 50px;
line-height: 40px;
text-align: center;
cursor: pointer;
background-color: #fff;
color: black;
transition: all 0.6s;
font-size: 20px;
font-weight: bold;
}
.hi-slide .hi-next:hover,
.hi-slide .hi-prev:hover {
opacity: 1;
background-color: #fff;
}
.hi-slide .hi-prev {
left: -60px;
}
.hi-slide .hi-prev::before {
content: "<";
}
.hi-slide .hi-next {
right: -60px;
}
.hi-slide .hi-next::before {
content: ">";
}
.hi-slide>ul {
list-style: none;
position: relative;
width: 754px;
height: 292px;
margin: 0;
padding: 0;
}
.hi-slide>ul>li {
overflow: hidden;
position: absolute;
z-index: 0;
left: 377px;
top: 146px;
width: 0;
height: 0;
margin: 0;
padding: 0;
border: 3px solid #fff;
background-color: #333;
cursor: pointer;
}
.hi-slide>ul>li>img {
width: 100%;
height: 100%;
background-position: center;
}
/* .hi-slide > ul > li > img:hover .image{
opacity: 0.3;
display: block; */
/* width: 100%; */
/* height: auto; */
/* transition: .5s ease;
backface-visibility: hidden; */
/* } */
.hi-slide .image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.hi-slide>ul>li>img:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
/*footer {
position: relative;
width: 100%;
background: #fb8500;
min-height: 100px;
padding: 20px 50px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
footer .social_icon,
footer .menu {
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin: 10px 0;
flex-wrap: wrap;
}
footer .social_icon li,
footer .menu li {
list-style: none;
}
footer .social_icon li a,
footer .menu li a {
font-size: 2.5em;
color: #fff;
margin: 0 10px;
display: inline-block;
transition: 0.5s;
}
footer .social_icon li a:hover {
transform: translateY(-10px);
}
footer .menu li a {
font-size: 1.3em;
color: #fff;
margin: 0 10px;
display: inline-block;
text-decoration: none;
opacity: 0.75;
}
footer .menu li a:hover {
opacity: 1;
}
footer p {
color: #fff;
text-align: center;
margin-top: 15px;
margin-bottom: 10px;
font-size: 1.1em;
}
footer .wave {
position: absolute;
top: -100px;
left: 0;
width: 100%;
height: 100px;
background: url('../images/wave.png');
background-size: 1000px 100px;
}
footer .wave#wave1 {
z-index: 1000;
opacity: 1;
bottom: 0;
animation: animateWave 4s linear infinite;
}
footer .ofc_address {
color: white;
text-align: center;
font-size: 28px;
font-weight: 800;
}
footer .address {
color: white;
text-align: center;
font-size: 15px;
font-weight: 600;
}
footer .wave#wave2 {
z-index: 999;
opacity: 0.5;
bottom: 10px;
animation: animateWave_02 4s linear infinite;
}
footer .wave#wave3 {
z-index: 1000;
opacity: 0.2;
bottom: 15px;
animation: animateWave 3s linear infinite;
}
footer .wave#wave4 {
z-index: 999;
opacity: 0.7;
bottom: 20px;
animation: animateWave_02 3s linear infinite;
}
@keyframes animateWave {
0% {
background-position-x: 1000px;
}
100% {
background-position-x: 0px;
}
}
@keyframes animateWave_02 {
0% {
background-position-x: 0px;
}
100% {
background-position-x: 1000px;
}
}*/
.footer {
width: 100vw;
display: flex;
background-image: linear-gradient(rgb(94, 26, 154), rgb(255, 105, 255));
}
.footer .contact {
width: 50%;
text-align: center;
background-color: #fff;
margin: 20px;
color: #7952b3;
box-shadow: 10px 10px 5px rgb(58, 49, 49);
}
.map {
width: 50%;
height: 100%;
margin: 20px;
box-shadow: 10px 10px 5px rgb(58, 49, 49);
margin-right: 35px;
}
.contact-heading h2 {
display: inline-block;
width: fit-content;
padding-bottom: 3px;
font-size: 2rem;
letter-spacing: 0.3rem;
color: #7952b3;
margin-bottom: 10px;
border-bottom: 3px solid red;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.address h4 {
font-size: 1.3rem;
}
.address p {
font-size: 1.1rem;
}
.contact a {
color: #000;
margin: 0.5em;
}
.contact p {
font-size: 1.1rem;
}
.copyright {
color: #fff;
letter-spacing: 0.2rem;
}
@media(max-width:768px) {
.Grid .section-title .primary-heading {
font-size: 2.8rem;
font-weight: bold;
text-align: center;
margin: 4rem 0;
margin-left: 0 !important;
padding-bottom: 5px;
color: transparent;
background-image: url("../images/gif.webp");
background-position: center;
-webkit-background-clip: text;
-moz-background-clip: text;
-o-background-clip: text;
background-clip: text;
}
.member-count {
height: auto;
display: flex;
}
.three {
display: flex;
flex-direction: column;
}
}
@media(max-width:768px) {
.footer {
display: flex;
flex-direction: column;
}
.footer .contact,
.footer .map {
width: 100%;
padding: 0;
margin-left: auto;
margin-right: auto;
margin: 0.5rem 0;
}
.footer .contact {
margin-top: 0;
}
.footer .map {
margin-bottom: 0;
width: 90%;
margin-left: auto;
margin-right: auto;
}
}
/*events*/
.event-container {
background-image: linear-gradient(rgb(94, 26, 154), rgb(255, 105, 255));
width: 100%;
}
.event-main {
height: 550px;
width: 100%;
display: flex;
/* position: relative; */
align-items: center;
justify-content: space-around;
padding: 2rem;
}
.event-img {
height: 400px;
width: 700px;
background-color: #6b28cf;
justify-content: center;
/* margin-left: 60px; */
display: flex;
align-items: center;
/* box-shadow: 0 4px 8px 0 rgba(120, 54, 227, 0.2), 0 6px 20px 0 rgba(222, 32, 149, 0.19); */
box-shadow: 10px 10px 5px rgb(58, 49, 49);
}
.event-img img {
height: 500px;
width: 300px;
}
.event-info {
/* position: absolute; */
/* z-index: 1; */
height: 350px;
width: 250px;
background-color: rgba(255, 255, 255, 0.9);
color: black;
border-radius: 4%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.event-info .event-marquee {
background-color: #6b28cf;
font-weight: 600;
/*padding: 3px;
margin-top: 10px;*/
color: #fff;
font-size: 20px;
}
.event-info .event-date {
border-bottom: 3px solid #6b28cf;
margin: 2px;
padding: 5px;
}
.event-info i {
padding: 5px;
}
.event-info .event-location {
font-size: 16px;
padding: 5px;
font-weight: 900;
}
.event-info .event-para {
margin: 9px;
}
.event-info .details-button {
background-color: #ff4584;
height: 40px;
width: 100px;
margin: 7px;
border: none;
font-weight: 500;
font-size: 14px;
}
/* .details-button a{
text-decoration: none;
color: black;
} */
.event-info .details-button:hover {
background-color: #6b28cf;
color: #fff;
}
/* .event-info .details-button a:hover{
color: #fff;
} */
.past-event-heading {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 2rem;
padding: 1rem;
font-size: 25px;
}
#carousel>div {
backface-visibility: hidden;
}
.container-rotate {
position: relative;
width: 550px;
height: 250px;
perspective: 600px;
margin-top: 2rem;
margin-bottom: 14rem;
margin-left: auto;
margin-right: auto;
}
#carousel {
position: fixed;
width: 100%;
height: 70%;
transform-style: preserve-3d;
transform: translateZ(-300px);
transition: all 1s ease-in;
}
#carousel>div {
display: block;
position: absolute;
top: 55px;
left: 170px;
width: 200px;
object-fit: cover;
border: 2px solid #000a35;
border-radius: 0.5em;
overflow: hidden;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
/* backface-visibility: hidden; */
}
#carousel {
animation: spin 35s infinite linear;
}
/* =======past events div====== */
.past-event-info {
aspect-ratio: 2/1.8;
padding: 8px;
}
.event-name {
border-bottom: 3px solid #ff4584;
background-image: linear-gradient(rgb(94, 26, 154), rgb(255, 105, 255));
display: flex;
justify-content: center;
align-items: center;
}
.event-name h2 {
font-size: 2rem;
font-weight: 500;
color: #fff;
padding: 0.2rem;
}
.past-event-date {
font-size: 17px;
margin: 5px;
padding: 1px;
}
.past-event-location {
font-size: 14px;
padding: 5px;
margin-bottom: 8px;
font-weight: 600;
}
.past-event-para {
padding: 5px;
margin: 4px;
font-size: 12px;
}
.past-event-info .details-button {
display: block;
background-color: #6b28cf;
height: 25px;
width: 100px;
margin: 8px;
border: none;
font-weight: 500;
font-size: 11px;
border-radius: 10px;
color: #fff;
}
.past-event-info .details-button:hover {
background-color: #ff4584;
color: #fff;
}
.past-event-info .details-button a {
cursor: pointer;
color: #fff;
text-decoration: none;
}
.event-img img {
position: relative;
display: block;
width: 100%;
max-width: 100%;
aspect-ratio: 3/2;
object-fit: cover;
}
/* 40deg = 360/9 */
#carousel div:nth-child(1) {
transform: rotateY(0deg) translateZ(300px);
}
#carousel div:nth-child(2) {
transform: rotateY(40deg) translateZ(300px);
}
#carousel div:nth-child(3) {
transform: rotateY(80deg) translateZ(300px);
}
#carousel div:nth-child(4) {
transform: rotateY(120deg) translateZ(300px);
}
#carousel div:nth-child(5) {
transform: rotateY(160deg) translateZ(300px);
}
#carousel div:nth-child(6) {
transform: rotateY(200deg) translateZ(300px);
}
#carousel div:nth-child(7) {
transform: rotateY(240deg) translateZ(300px);
}
#carousel div:nth-child(8) {
transform: rotateY(280deg) translateZ(300px);
}
figcaption {
background-color: #fff;
color: #001368;
text-align: center;
}
@keyframes spin {
from {
transform: rotateY(0);
}
to {
transform: rotateY(360deg);
}
}
/* Pause animation */
#carousel:hover {
animation-play-state: paused;
}
/* .active {
transform: scale(2);
} */
.container2 {
min-height: 100vh;
display: grid;
place-items: center;
margin-bottom: 4.5rem;
/* background: linear-gradient(to bottom right, #000a35, #001368, #000c3f, #000416); */
}
/*-------events end----------------------*/
/* Testimonials*/
h1 {
font-size: 2.5rem;
font-weight: normal;
color: #444;
text-align: center;
margin: 2rem 0;
}
.wrapper {
width: 90%;
margin: 0 auto;
max-width: 80rem;
margin-top: 10rem;
}
.cols {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.col {
width: calc(25% - 2rem);
margin: 1rem;
cursor: pointer;
}
.container {
/* border: 2px solid black; */
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 1000px;
perspective: 1000px;
}
.front,
.back {
background-size: cover;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25);
border-radius: 10px;
background-position: center;
-webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
-o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
text-align: center;
min-height: 280px;
height: auto;
border-radius: 10px;
color: #fff;
font-size: 1.5rem;
}
.back {
background: #673ab7;
background: -webkit-linear-gradient(#023047 0%);
background: -o-linear-gradient(#023047 0%);
background: linear-gradient(#023047 0%);
}
.front:after {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
content: '';
display: block;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-radius: 1%;
}
.container:hover .front,
.container:hover .back {
-webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
-o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
}
.back {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.inner {
-webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);
transform: translateY(-50%) translateZ(60px) scale(0.94);
top: 50%;
position: absolute;
left: 0;
width: 100%;
padding: 2rem;
-webkit-box-sizing: border-box;
box-sizing: border-box;
outline: 1px solid transparent;
-webkit-perspective: inherit;
perspective: inherit;
z-index: 2;
}
.container .back {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.container .front {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.container:hover .back {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.container:hover .front {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.details {
/* border: 2px solid green; */
text-align: center;
margin-top: 3vh;
font-size: 1.4rem;
font-weight: bold;
}
#Events .section-title {
width: 100%;
}
@media(max-width:768px) {
#Events {
/* border: 6px solid violet; */
display: flex;
flex-direction: column;
align-items: flex-start;
}
/* .section-title {
padding: 0rem 0;
text-align: center;
margin: 0;
}
.section-title h2 {
font-size: 4rem;
text-align: center;
padding: 0;
/* margin-left: 6%; */
/* border: 2px solid palevioletred; */
/* align-items: flex-start; */
/*} */
.event-container {
background-image: linear-gradient(rgb(94, 26, 154), rgb(255, 105, 255));
/* width: 375px; */
height: 105vh;
/* border: 4px solid blue; */
/* align-items: flex-start; */
/* width: 100%; */
/* width: 375px; */
margin-top: -2%;
/* display: flex; */
/* align-items: center; */
overflow: hidden;
align-items: flex-start;
}
.event-main {
height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
/* position: relative; */
/* align-items: center; */
/* justify-content: space-around; */
/* padding: 2rem; */
/* border: 4px solid red; */
}
.event-img {
/* border: 4px solid yellow; */
height: 29%;
width: 100%;
background-color: #6b28cf;
justify-content: center;
margin-top: 10%;
/* margin-left: 60px; */
display: flex;
align-items: center;
/* box-shadow: 0 4px 8px 0 rgba(120, 54, 227, 0.2), 0 6px 20px 0 rgba(222, 32, 149, 0.19); */
box-shadow: 10px 10px 5px rgb(58, 49, 49);
}
.event-img img {
height: 100%;
width: 100%;
/* border: 4px solid green */
}
.event-info {
/* position: absolute; */
/* z-index: 1; */
/* height: 350px;
width: 250px; */
background-color: rgba(255, 255, 255, 0.9);
color: black;
border-radius: 4%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-top: 6%;
}
.event-info .event-marquee {
background-color: #6b28cf;
font-weight: 600;
padding: 3px;
margin-top: 10px;
color: #fff;
font-size: 20px;
}
.event-info .event-date {
border-bottom: 3px solid #6b28cf;
margin: 2px;
padding: 5px;
}
.event-info i {
padding: 5px;
}
.event-info .event-location {
font-size: 16px;
padding: 5px;
font-weight: 900;
}
.event-info .event-para {
margin: 9px;
}
.event-info .details-button {
background-color: #ff4584;
height: 40px;
width: 100px;
margin: 7px;
border: none;
font-weight: 500;
font-size: 14px;
}
}
/* MEMBER COUNT ---------------------------------------------------------------------------- */
.member-count {
/* border: 2px solid yellowgreen; */
/* margin-top: 8vh; */
margin: 5rem 0;
height: 15vh;
background-image: linear-gradient(rgb(94, 26, 154), rgb(255, 105, 255));
box-shadow: 10px 10px 5px #aaaaaa;
}
.three {
text-align: center;
font-size: 40px;
color: black;
display: flex;
justify-content: center;
width: 100%;
height: 35px;
padding: 1rem;
}
.four {
text-align: center;
font-size: 40px;
color: black;
display: flex;
justify-content: center;
width: 100%;
height: 20px;
padding: 1.5rem;
}
.three_one,
.three_two,
.three_three {
text-align: center;
font-size: 40px;
color: black;
display: flex;
justify-content: center;
width: 100%;
font-size: 30px;
}
/* REsponsive ------------------------------------------------ */
@media screen and (max-width: 64rem) {
.col {
width: calc(33.333333% - 2rem);
}
}
@media screen and (max-width: 48rem) {
.col {
width: calc(50% - 2rem);
}
}
@media screen and (max-width: 32rem) {
.col {
width: 100%;
margin: 0 0 2rem 0;
}
}
.section-title {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 0;
}
.primary-heading {
font-size: 2.8rem;
font-weight: bold;
text-align: center;
margin: 4rem 0;
margin-left: 0 !important;
padding-bottom: 5px;
color: transparent;
background-image: url("../images/gif.webp");
background-position: center;
-webkit-background-clip: text;
-moz-background-clip: text;
-o-background-clip: text;
background-clip: text;
}
.footer .primary-heading {
margin: 1rem 0;
}
/* .section-title{
display: flex;
justify-content: center;
align-items: center;
/* text-align: center; */
/* } */
/* .style-head-main{
font-size: 2.8rem;
font-weight: bold;
text-align: center;
margin:4rem 0;
padding-bottom: 5px;
position: relative;
color: transparent;
/* background-image: url("../images/gif.webp");
background-position: center;
-webkit-background-clip:text;
-moz-background-clip: text;
-o-background-clip: text;
background-clip: text; */
/* .style-head-main:after {
content: '';
position: absolute;
display: block;
width: 100px;
height: 3px;
bottom: 0;
left: 0;
} */
/* .style-head-main-2{
font-size: 2.8rem;
font-weight: bold;
position: relative;
color: transparent;
/* background-image: url("../images/text-bg.webp"); */
/* background-image: url("../images/gif.webp");
background-position: center;
-webkit-background-clip:text;
-moz-background-clip: text;
-o-background-clip: text;
background-clip: text; */
/* .style-head-main-2:after {
content: '';
position: absolute;
display: block;
width: 100px;
height: 3px;
bottom: 0;
left: 0;
} */
@media (max-width:768px) {
.past-event-info {
aspect-ratio: 0.8/1;
padding: 8px;
}
.main-event {
/* padding: 1rem; */
margin: 0 1rem;
/* height: 65vh; */
width: 70%;
}
.main .container-rotate {
padding: 0 0.8rem;
}
.Grid {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.Grid-row {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.G_Card {
margin: 1rem 0;
margin-left: auto;
margin-right: auto;
}
/* .G_Card span{
padding: 0;
width: 100%;
} */
.member-count{
display:none;
}
}