/* 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; } }