*,*::after, *::before { box-sizing: border-box; margin: 0; padding: 0; } /* Header Start */ header { margin: 0; width: 100%; background-color: #fff; position: fixed; height: 100px; z-index: 2000; } .header-info { font-size: 0.9rem; color: #555; } .logo .Navbar-brand-img { max-width: 100%; height: auto; } .Navbar-brand { display: flex; align-items: center; justify-content: center; } .logo { float: center; padding-top: 5px; } nav { height: 100%; position: fixed; right: 0; width: 320px; transform: translateX(320px); transition: transform 560ms ease-in-out; background-color: white; ol { margin: 0; padding: 0; border-top: 1px solid #eee; z-index: -1; li { list-style: none; color: #fff; text-transform: uppercase; font-weight: bold; padding: 20px; cursor: pointer; border-bottom: 1px solid #eee; transition: 0.25s; span { display: block; font-size: 14px; color: #353535; } a { color: #353535; text-transform: uppercase; font-weight: bold; color: #353535; cursor: pointer; text-decoration: none; } &:hover { background-color: #eee; } } } } input[type="checkbox"]:checked ~ nav { transform: translateX(0); } input[type="checkbox"] { box-sizing: border-box; display: none; transition: all 0.25s; } .menuIconToggle { box-sizing: border-box; cursor: pointer; position: fixed; z-index: 40; height: 100%; width: 100%; top: 2px; right: 15px; height: 30px; width: 30px; transition: all 0.3s; } .menuIconToggle i { font-size: 22px; color: #1b1b1b; transition: all 0.3s; } h1 { margin: 0; font-size: 3em; text-align: center; } @media screen and (max-width: 640px) { nav { height: 100%; width: 100%; transform: translateX(100%); } @media (max-width: 768px) { .header-info { font-size: 0.8rem; text-align: center; } .logo .Navbar-brand-img { width: 280px; } } @media (max-width: 576px) { .logo .Navbar-brand-img { width: 250px; } .header-info { font-size: 0.7rem; } } @media (max-width: 406px) { .logo .Navbar-brand-img { width: 230px; } .header-info { font-size: 0.7rem; } } } /* Header End */ /* carousel start */ .Activity{ padding-top: 110px } .Activity .row { box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; padding: 20px; border-radius: 10px; border: 2px solid grey; background: rgb(2,3,3); background: linear-gradient(180deg, rgba(0, 0, 0, 0.418) 0%, rgba(6, 155, 255, 0.288) 100%); } .Activity .row h2{ text-transform: uppercase; font-weight: bold; font-size: 1.5rem; } @media (max-width: 768px) { .Activity .row h2{ text-transform: uppercase; font-weight: bold; font-size: 1.5rem; text-align: center; } } .carousel .carousel-inner{ border-radius: 10px; } .carousel .carousel-item img{ border-radius: 10px; } /* Interactive Anima ```n */ .description-container { animation: fadeIn 2s ease-in-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .carousel-item img { object-fit: cover; height: 100%; width: 100%; } .interactive:hover { transform: scale(1.05); transition: transform 0.3s ease; } /* Animated line */ .line { position: relative; height: 4px; background: linear-gradient(to right, #0770e0, #232325); animation: moveLine 2s infinite alternate; } @keyframes moveLine { 0% { background-position: 0%; } 100% { background-position: 100%; } } /* Carousel End */ .card-head { text-align: center; background: #02132f; background: linear-gradient(to bottom, #02132f 32%, #174f6f 46%, #0095cf 64%); background-clip: text; -webkit-text-fill-color: transparent; font-weight: bold; text-transform: uppercase; font-family: "Times New Roman", Times, serif; font-size: 2rem; }