-
Notifications
You must be signed in to change notification settings - Fork 0
/
style.css
1 lines (1 loc) · 52 KB
/
style.css
1
* { margin: 0; padding: 0; box-sizing: border-box; font-family:Ubuntu, sans-serif; /* font-family: 'Proxima Nova', sans-serif; */ } body { background-color: white; margin: 0; background-color: white; color: black; } .dark-mode { background-color: black; color: white; } .header { min-height: 100vh; width: 100%; background-image: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)), url(images/banner3.jpg); background-position: center; background-size: cover; position: relative; } nav { display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom: 2px solid white; } nav .logo-container { display: flex; align-items: center; } nav img { width: 90px; height: auto; margin-right: 10px; } .logo-text { color: white; font-weight: bold; font-size: 60px; } .nav-container { display: flex; align-items: center; } .nav-links ul { list-style: none; display: flex; /* Updated to flex */ padding: 8px 12px; position: relative; margin-right: 0 10px; transition: 1s; } .nav-links ul li { margin: 0 15px; position: relative; } .nav-links ul li a { text-decoration: none; color: white; font-weight: bold; font-size: 18px; } .nav-links ul li::after { content: ''; display: block; height: 2px; width: 0; background: white; transition: width 0.3s; } .nav-links ul li:hover::after { width: 100%; } .login-container { margin-left: auto; } .login-wrapper { text-decoration: none; /* Remove underline */ color: inherit; /* Inherit text color */ position: relative; padding: 10px; background-color: rgba(255, 255, 255, 0.8); border-radius: 10px; text-align: center; overflow: hidden; } .login-link { text-decoration: none; color: #333; font-weight: bold; position: relative; z-index: 1; } .sparkles { position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; } .sparkles::before, .sparkles::after { content: ''; position: absolute; width: 10px; height: 10px; background-color: #ffcc00; border-radius: 50%; opacity: 0; animation: sparkle 2s linear infinite; } .sparkles::before { top: 0; left: 0; } .sparkles::after { bottom: 0; right: 0; } @keyframes sparkle { 0%, 100% { transform: scale(0); opacity: 0; } 25% { transform: scale(1); opacity: 1; } 50% { transform: scale(0); opacity: 0; } 75% { transform: scale(1); opacity: 1; } } .text-box { width: 90%; color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; font-size: 24px; display: flex; flex-direction: column; align-items: center; } .text-box h1, .text-box p, .text-box .hero-btn { margin-bottom: 15px; } .hero-btn { display: inline-block; text-decoration: none; color: #fff; position: relative; cursor: pointer; } .btn-container { padding: 12px 24px; background-color: rgba(255, 255, 255, 0.3); border: 0px solid #fff; border-radius: 10px; transition: background-color 0.3s; } .hero-btn:hover .btn-container { background-color: rgba(255, 255, 255, 0.5); transition: 1s; } nav .fa { display: block; color: #fff; margin: 10px; font-size: 22px; cursor: pointer; } .logo-container p.location { font-size: 14px; color: #fff; margin-top: 5px; } /* Media Queries for Responsive Design FUSASIS */ @media (max-width: 1200px) { .logo-text { font-size: 40px; } } @media (max-width: 992px) { .logo-text { font-size: 30px; } .nav-links ul li { margin: 0 10px; } } @media (max-width: 768px) { .logo-text { font-size: 25px; } .nav-links ul { flex-direction: column; margin-right: 0; } .nav-links ul li { margin: 10px 0; } } @media (max-width: 576px) { .logo-text { font-size: 20px; } } /* YouTube Learn More */ .overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); justify-content: center; align-items: center; z-index: 999; border-radius: 20px; } .video-container { position: relative; padding-bottom: 56.25%; width: 80%; } .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .close-btn { position: absolute; top: 10px; right: 10px; cursor: pointer; color: #fff; font-size: 20px; font-weight: bold; } /* Mobile Styles */ @media screen and (max-width: 767px) { .nav-links { display: none; position: absolute; top: 70px; left: 0; width: 100%; background-color: #333; text-align: center; transition: transform 0.3s ease-in-out; /* Added transition property */ } .nav-links.show { display: flex; flex-direction: column; align-items: center; transform: translateY(0); } .nav-links ul { padding: 10px; margin: 0; list-style: none; } .nav-links li { margin: 10px 0; } .close-btn, .menu-btn { display: block; position: absolute; top: 20px; right: 20px; font-size: 24px; cursor: pointer; color: #fff; transition: transform 0.3s ease-in-out; /* Added transition property */ } .close-btn:hover, .menu-btn:hover { transform: scale(1.1); /* Added scale effect on hover */ } .login-container { display: none; } .text-box h1 { font-size: 20px; } } /* Desktop Styles FUSASIS */ @media screen and (min-width: 769px) { .nav-container { display: flex; justify-content: space-between; align-items: center; } .menu-bars, .close-btn, .menu-btn { display: none; } .nav-links { display: flex; } .login-container { display: flex; align-items: center; } } /* Add styles for close button */ .close-btn.show { display: block; } /* Add styles for close button */ .close-btn.show { display: block; } @keyframes slideIn { to { right: 0; /* Move to the right edge of the screen */ } } /* Add a media query for large screens */ @media (min-width: 701px) { .menu-bars, .close-btn { display: none; } } /* Your existing styles here... */ /* NOTICE BANNER... */ /* NOTICE BANNER... */ /* NOTICE BANNER... */ /* NOTICE BANNER... */ /* NOTICE BANNER... */ /* NOTICE BANNER... */ /* FUSASIS ends here... */ /* FUSASIS ends here... */ /* FUSASIS ends here... */ /* FUSASIS ends here... */ /* FUSASIS ends here... */ /* LANGUAGE */ .language-container { display: flex; align-items: center; justify-content: center; font-size: 20px; /* Adjust size as needed */ } .language-container .material-icons { margin-right: 10px; /* Add space between icon and select */ } /*----- COURSES WE OFFER -----*//*----- COURSES WE OFFER -----*//*----- COURSES WE OFFER -----*//*----- COURSES WE OFFER -----*/ .course { width: 90%; margin: auto; text-align: center; padding-top: 50px; } h1 { font-size: 35px; font-weight: 500; } p { color: #000000; font-size: 15px; font-weight: 300; line-height: 20px; padding: 10px; } .row { margin-top: 1%; display: flex; justify-content: space-between; flex-wrap: wrap; } /* Updated colors for each course */ .course-col a { text-decoration: none; color: black; } .course-col:nth-child(1) { background: rgba(52, 152, 219, 0.7); /* Blue for Elementary Education */ } .course-col:nth-child(2) { background: #ee873b; /* Orange/Yellow for Business Administration */ } .course-col:nth-child(3) { background: #706d8c; /* Grey for Criminology */ } .course-col:nth-child(4) { background: #266f9d; /* Blue for Secondary Education */ } .course-col:nth-child(5) { background: rgba(255, 101, 163, 0.7); /* Pink for Hospitality Management */ } .course-col:nth-child(6) { background: #007300; /* Green for Information Technology */ } /* Repeat the pattern for other course-col elements with respective rgba values */ .course-col { flex-basis: 15%; /* Adjust the width for six courses in a row on large screens */ border-radius: 10px; margin-bottom: 10px; /* Add some margin to separate the tiles */ padding: 15px 25px; /* Corrected padding value */ box-sizing: border-box; transition: 0.5s; position: relative; border: 5px solid white; /* Set border to be 5px solid white */ margin-right: 1px; margin-left: 1px; } .course-col img { max-width: 100%; max-height: 100%; display: block; margin: 0 auto 10px; /* Adjust margin as needed */ } h3 { text-align: center; font-weight: 600; margin: 10px 0; } .course-col:hover { box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.2); transform: scale(1.05); /* Slightly reduced scale effect on hover */ transition: box-shadow 0.5s, transform 0.5s; /* Added transitions for smoother effect */ } /* Media Query for Extra Small and Small Screens */ @media (max-width: 768px) { .course-col { flex-basis: 48%; /* Adjust the width for two courses in a row on small screens */ } } /* Media Query for Extra Small Screens */ @media (max-width: 480px) { .course-col { flex-basis: 100%; /* Adjust the width for one course in a row on extra small screens */ } } /* PHILOSOPHY, VISION AND MISSION FUSASIS */ /* PHILOSOPHY, VISION AND MISSION FUSASIS */ /* PHILOSOPHY, VISION AND MISSION FUSASIS */ /* Default text color */ .pvm { color: black; } /* Dark mode text color */ .dark-mode .pvm { color: white; } .pvm { width: 80%; margin: auto; text-align: center; padding-top: 50px; margin-bottom: 2px; } .pvm-col { flex-basis: 30%; border-radius: 10px; margin-bottom: 0px; position: relative; overflow: hidden; } .pvm-col { flex: 0 0 30%; position: relative; overflow: hidden; margin: 10px; } .pvm-col img { width: 100%; display: block; } .layer { background: transparent; height: 100%; width: 100%; position: absolute; top: 0; left: 0; transition: 0.5s; display: flex; flex-direction: column; align-items: center; justify-content: center; } .layer:hover { background: rgba(10, 24, 222, 0.7); } .layer h3 { font-weight: 500; color: #fff; font-size: 20px; opacity: 0; transition: 0.5s; } .layer:hover h3 { opacity: 1; } /* Media query for small screens */ /* Common styles for both small and large screens FUSASIS CERTIFIED */ @media (max-width: 767px) { .pvm-col { flex: 0 0 100%; } } /* New CSS for responsive design */ @media only screen and (max-width: 600px) { footer { flex-direction: column; /* Stack items vertically on small screens */ align-items: center; /* Center items horizontally */ } footer div { margin-bottom: 10px; /* Add margin between footer links */ } } /* ENROLLMENT FUSASIS*/ /* ENROLLMENT FUSASIS*/ /* ENROLLMENT FUSASIS*/ /* ENROLLMENT FUSASIS*/ /* ENROLLMENT FUSASIS*/ /* ENROLLMENT FUSASIS*/ .enroll { margin: 100px auto; width: 90%; border-radius: 10px; text-align: center; padding: 100px 0; position: relative; overflow: hidden; margin-top: 25px; margin-bottom: 25px; } .enroll::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(rgba(30, 30, 30, 0.7), rgba(30, 30, 30, 0.7)); z-index: -1; } .enroll::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-position: center; background-size: cover; z-index: -2; animation: backgroundAnimation 10s linear infinite; /* Set the animation duration to 15 seconds for continuous transition */ } @keyframes backgroundAnimation { 0%, 25% { background-image: url(images/enbr1.jpg); } 25.1%, 50% { background-image: url(images/enbr6.png); } 50.1%, 75% { background-image: url(images/enbr7.webp); } 75.1%, 100% { background-image: url(images/enbr4.jpg); } } .enroll h1 { color: #fff; margin-bottom: 5px; padding: 0; } .hero-btn { display: inline-block; padding: 10px 20px; font-size: 20px; text-decoration: none; color: #fff; background-color: #007BFF; border-radius: 10px; } .hero-btn:hover { background-color: #0056b3; } /* Common styles for both small and large screens */ @media(max-width: 767px) { .cta h1 { font-size: 24px; } } /* New styles for the small circles */ .circle { position: absolute; background-color: #007BFF; /* Fill color of the circles */ border-radius: 50%; width: 10px; height: 10px; animation: moveCircle 10s linear infinite; /* Adjust the animation duration as needed */ } /* Keyframes for the circle animation */ @keyframes moveCircle { 0% { left: 20%; /* Initial position */ opacity: 0; /* Initially invisible */ } 20% { opacity: 1; /* Make circles visible when background image starts to change */ } 25%, 50% { left: 50%; /* Move the circles to the center */ } 75% { opacity: 0; /* Make circles invisible before next image transition */ } 100% { left: 80%; /* Final position */ opacity: 0; /* Make circles invisible */ } } /* Place the circles under the "ENROLL TODAY" button */ .circle1, .circle2, .circle3, .circle4 { bottom: 30px; /* Adjust the distance from the bottom as needed */ } .circle1 { left: 20%; /* Adjust the position of the first circle */ } .circle2 { left: 35%; /* Adjust the position of the second circle */ } .circle3 { left: 50%; /* Adjust the position of the third circle */ } .circle4 { left: 65%; /* Adjust the position of the fourth circle */ } /* FOOTER FUSASIS*/ /* FOOTER FUSASIS*/ /* FOOTER FUSASIS*/ /* FOOTER FUSASIS*/ /* FOOTER FUSASIS*/ /* FOOTER FUSASIS*/ /* FOOTER FUSASIS*/ .footer{ width: 100%; text-align: center; padding: 30px 0; } .footer h4{ margin-bottom: 1px; margin-top: 1px; font-weight: 600; } .icon { font-size: 30px; /* Adjust the size as needed */ } .fa-heart{ color: #f44336; } /**/ /* ABOUT US PAGE FUSASIS*/ /* ABOUT US PAGE FUSASIS*/ /* ABOUT US PAGE FUSASIS*/ /* ABOUT US PAGE FUSASIS*/ /* ABOUT US PAGE FUSASIS*/ .sub-header{ height: 30vh; widows: 100%; background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(images/about.webp); background-position: bottom; background-size: cover; text-align: center; color: #fff; } .sub-header h1{ margin-top: 10px; } .about-us{ width: 80%; margin: auto; padding-top: 0px; padding-bottom: 0px; } .about-col{ flex-basis: 100%; padding: 30px 2px; text-align: justify; } .about-col img{ width: 100%; border-radius: 15px; } .about-col h1{ padding-top: 0; } .about-col p{ padding: 15px 0 25px; } .indented-paragraph { text-indent: 70px; /* Adjust the indentation as needed */ } /* ACCREDITED */ .accredited-container { text-align: left; /* Center the text */ } .accredited-text { background-color: #f2f2f2; padding: 50px 10px; border-radius: 10px; } .image-container { display: flex; justify-content: space-between; /* Distributes space between elements */ align-items: center; } /*ACREDITED2*/ /* General Styling */ #companies-projects { max-width: 800px; margin: 0 auto; padding: 20px; } #companies-projects h3 { text-align: center; font-size: 1.8em; margin-bottom: 20px; } #companies-projects ul { display: flex; flex-wrap: wrap; list-style: none; padding: 0; gap: 15px; justify-content: center; } .company-link { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: #333; font-size: 1em; padding: 10px; border: 1px solid #ddd; border-radius: 8px; transition: background-color 0.3s, box-shadow 0.3s; width: 120px; /* Increased width for larger screens */ text-align: center; } .company-link:hover { background-color: #f7f7f7; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .company-link img { width: 100%; /* Adjusts image to fill container width */ max-width: 80px; /* Limits maximum size for large screens */ height: auto; /* Maintains aspect ratio */ margin-bottom: 8px; border-radius: 4px; } .company-link span { font-size: 0.9em; color: #555; } /* Responsive Styling */ @media (max-width: 768px) { .company-link { width: 100px; } .company-link img { max-width: 60px; } } @media (max-width: 600px) { .company-link { font-size: 0.9em; padding: 8px; width: 80px; } .company-link img { max-width: 50px; } } /*SOCIAL MEDIA*/ #sns-projects { max-width: 800px; margin: 0 auto; padding: 20px; } /*#sns-projects h3 { text-align: center; font-size: 1.8em; margin-bottom: 20px; }*/ #sns-projects ul { display: flex; flex-wrap: wrap; list-style: none; padding: 0; gap: 15px; justify-content: center; } .sns-link { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: #333; font-size: 1em; padding: 10px; border: 1px solid #ddd; border-radius: 8px; transition: background-color 0.3s, box-shadow 0.3s; width: 120px; /* Increased width for larger screens */ text-align: center; } .sns-link:hover { background-color: #f7f7f7; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .sns-link img { width: 100%; /* Adjusts image to fill container width */ max-width: 80px; /* Limits maximum size for large screens */ height: auto; /* Maintains aspect ratio */ margin-bottom: 8px; border-radius: 4px; } .sns-link span { font-size: 0.9em; color: #555; } /* Responsive Styling */ @media (max-width: 768px) { .sns-link { width: 100px; } .sns-link img { max-width: 60px; } } @media (max-width: 600px) { .sns-link { font-size: 0.9em; padding: 8px; width: 80px; } .sns-link img { max-width: 50px; } } .column_2 { flex: 1; text-align: center; margin: 5px; /* Adjust the margin value to control the space */ } #sns-projects { max-width: 800px; margin: 0 auto; padding: 20px; } #sns-projects h3 { text-align: left; /* Left aligns the heading */ font-size: 1.8em; margin-bottom: 20px; } #sns-projects ul { display: flex; flex-wrap: wrap; list-style: none; padding: 0; gap: 15px; justify-content: center; } .sns-link { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: #333; font-size: 1em; padding: 10px; border: 1px solid #ddd; border-radius: 8px; transition: background-color 0.3s, box-shadow 0.3s; width: 120px; text-align: center; } .sns-link:hover { background-color: #f7f7f7; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .sns-link img { width: 100%; max-width: 80px; height: auto; margin-bottom: 8px; border-radius: 4px; } .sns-link span { font-size: 0.9em; color: #555; } /* Responsive Styling */ @media (max-width: 768px) { .sns-link { width: 100px; } .sns-link img { max-width: 60px; } } @media (max-width: 600px) { .sns-link { font-size: 0.9em; padding: 8px; width: 80px; } .sns-link img { max-width: 50px; } } /* Media query for smaller screens */ @media screen and (max-width: 768px) { .accredited-container { text-align: center; /* Center the text */ } .column_2 { flex-basis: calc(50% - 20px); /* Set each column to occupy 50% of the container width minus margins */ } } /* ABOUT LOGO */ .about-logo { padding: 10px; background-color: white; text-align: justify; margin: 20px 0; margin-bottom: 2px; margin-top: 2px; } .about-logo .logo-wrapper { display: flex; align-items: center; justify-content: flex-end; /* Align logo to the right */ flex-direction: row-reverse; /* Reverse the direction for logo to be on the right */ } .about-logo .logo-description { position: relative; max-width: 100%; /* Ensure full width usage */ padding: 20px; border-radius: 8px; background-image: url('images/logo.png'); /* Background image */ background-size: contain; /* Adjusted background size */ background-position: right center; /* Aligned background image to the right */ background-repeat: no-repeat; opacity: 0.9; /* Make the background image semi-transparent */ z-index: 0; /* Ensure it's in the background */ } .about-logo h2 { margin: 10px 0; font-size: 24px; position: relative; z-index: 1; /* Ensure text is above the background image */ } .about-logo p { font-size: 16px; line-height: 1.5; color: #000; /* Change text color to black */ position: relative; z-index: 1; /* Ensure text is above the background image */ margin-left: 20px; /* Add margin to the left side of the paragraph */ } .map-container { position: relative; width: 100%; padding-top: 56.25%; /* Aspect Ratio 16:9 */ height: 0; overflow: hidden; } .map-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 10px; } @media (max-width: 1200px) { .map-container { flex-direction: column; } iframe { height: 300px; /* Adjust height for smaller viewports */ } } @media (max-width: 768px) { .about-logo { padding: 5px; margin: 10px 0; } .about-logo .logo-wrapper { flex-direction: column; /* Stack logo and description vertically */ align-items: flex-start; /* Align items to the start */ } .about-logo .logo-description { padding: 10px; background-size: cover; /* Ensure the background covers the area */ } .about-logo h2 { font-size: 20px; } .about-logo p { font-size: 14px; margin-left: 10px; } .map-container { gap: 5px; /* Reduce gap for smaller screens */ } iframe { height: 250px; /* Further adjust height for smaller viewports */ } } @media (max-width: 480px) { .about-logo .logo-description { padding: 5px; background-size: contain; /* Adjust background size */ } .about-logo h2 { font-size: 18px; } .about-logo p { font-size: 12px; margin-left: 5px; } iframe { height: 200px; /* Further adjust height for very small viewports */ } } /* YouTube Video *//* YouTube Video *//* YouTube Video *//* YouTube Video */ .youtube-video { padding: 0; } .video-wrapper { max-width: 90%; margin: 0 auto; padding: 50px 0; } .video-container { position: relative; padding-bottom: 56.25%; /* 16:9 aspect ratio */ height: 0; overflow: hidden; width: 100%; } .youtube-iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; border-radius: 20px; /* Add border radius */ } @media (max-width: 768px) { .video-wrapper { padding: 20px 0; } .video-container { padding-bottom: 75%; /* 4:3 aspect ratio for smaller screens */ } } /* YouTube Video *//* YouTube Video *//* YouTube Video *//* YouTube Video */ /* WORK WITH US, CSR, ORG AND MORE CONTENT *//* WORK WITH US, CSR, ORG AND MORE CONTENT *//* WORK WITH US, CSR, ORG AND MORE CONTENT */ .flex-container { display: flex; justify-content: space-around; } .image-link { display: flex; flex-direction: column; align-items:center; text-align:center; text-decoration: none; color: blue; } .material-icons { font-size: 30px; margin-bottom: 10px; } h3 { margin: 0; } .image-link:hover .material-icons { color: forestgreen; } /* Responsive styles */ @media (max-width: 768px) { .flex-container { flex-direction: column; align-items: center; } .image-link { margin-bottom: 20px; /* Add some space between items */ } } /* WORK WITH US, CSR, ORG AND MORE CONTENT *//* WORK WITH US, CSR, ORG AND MORE CONTENT *//* WORK WITH US, CSR, ORG AND MORE CONTENT */ /* LIBRARY PAGE FUSASIS*/ /* LIBRARY PAGE FUSASIS*/ /* LIBRARY PAGE FUSASIS*//* LIBRARY PAGE FUSASIS*//* LIBRARY PAGE FUSASIS*/ /* PRIVACY POLICY PAGE FUSASIS*/ /* PRIVACY POLICY PAGE FUSASIS*/ /* PRIVACY POLICY PAGE FUSASIS*/ /* PRIVACY POLICY PAGE FUSASIS*/ .policy-header{ height: 30vh; widows: 100%; background: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)), #008000; /* Green color */ background-position: top; background-size: cover; text-align: center; color: #fff; } .policy-header h1{ margin-top: 10px; } .policy-us{ width: 80%; margin: auto; padding-top: 0px; padding-bottom: 0px; } .policy-col{ flex-basis: 100%; padding: 30px 2px; text-align: justify; } .apolicy-col img{ width: 100%; border-radius: 15px; } .policy-col h1{ padding-top: 0; } .policy-col p{ padding: 15px 0 25px; } .indented-paragraph { text-indent: 70px; /* Adjust the indentation as needed */ } /*TERMS OF USE*//*TERMS OF USE*//*TERMS OF USE*//*TERMS OF USE*//*TERMS OF USE*//*TERMS OF USE*//*TERMS OF USE*//*TERMS OF USE*//*TERMS OF USE*/ .terms-header{ height: 30vh; widows: 100%; background: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)), #008000; /* Green color */ background-position: top; background-size: cover; text-align: center; color: #fff; } .terms-header h1{ margin-top: 10px; } .terms-us{ width: 80%; margin: auto; padding-top: 0px; padding-bottom: 0px; } .terms-col{ flex-basis: 100%; padding: 30px 2px; text-align: justify; } .terms-col img{ width: 100%; border-radius: 15px; } .terms-col h1{ padding-top: 0; } .terms-col p{ padding: 15px 0 25px; } .indented-paragraph { text-indent: 70px; /* Adjust the indentation as needed */ } /*STUDENT HANDBOOK*/ /*STUDENT HANDBOOK*/ /*STUDENT HANDBOOK*/ /*STUDENT HANDBOOK*/ /*STUDENT HANDBOOK*/ /*STUDENT HANDBOOK*/ /*STUDENT HANDBOOK*/ /*STUDENT HANDBOOK*/ .handbook-header{ height: 30vh; widows: 100%; background: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)), #253d7d; /* Green color */ background-position: top; background-size: cover; text-align: center; color: #fff; } .handbook-header h1{ margin-top: 10px; } .handbook-us{ width: 80%; margin: auto; padding-top: 0px; padding-bottom: 0px; } .handbook-col{ flex-basis: 100%; padding: 30px 2px; text-align: justify; } .handbook-col img{ width: 100%; border-radius: 15px; } .handbook-col h1{ padding-top: 0; } .handbook-col p{ padding: 15px 0 25px; } .indented-paragraph { text-indent: 70px; /* Adjust the indentation as needed */ } /*SUPREME STUDNT COUNCIL*//*SUPREME STUDNT COUNCIL*//*SUPREME STUDNT COUNCIL*//*SUPREME STUDNT COUNCIL*//*SUPREME STUDNT COUNCIL*//*SUPREME STUDNT COUNCIL*/ .ssc-header{ height: 30vh; widows: 100%; background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(images/studntorg.webp); background-position: top; background-size: cover; text-align: center; color: #fff; } .ssc-header h1{ margin-top: 10px; } .ssc-us{ width: 80%; margin: auto; padding-top: 0px; padding-bottom: 0px; } .ssc-col{ flex-basis: 100%; padding: 30px 2px; text-align: justify; } .ssc-col img{ width: 100%; border-radius: 15px; } .ssc-col h1{ padding-top: 0; } .ssc-col p{ padding: 15px 0 25px; } .indented-paragraph { text-indent: 70px; /* Adjust the indentation as needed */ } /*COOKIE POLICY *//*COOKIE POLICY *//*COOKIE POLICY *//*COOKIE POLICY *//*COOKIE POLICY *//*COOKIE POLICY *//*COOKIE POLICY *//*COOKIE POLICY */ .cookie-header{ height: 30vh; widows: 100%; background: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)), #008000; /* Green color */ background-position: top; background-size: cover; text-align: center; color: #fff; } .cookie-header h1{ margin-top: 10px; } .cookie-us{ width: 80%; margin: auto; padding-top: 0px; padding-bottom: 0px; } .cookie-col{ flex-basis: 100%; padding: 30px 2px; text-align: justify; } .acookie-col img{ width: 100%; border-radius: 15px; } .cookie-col h1{ padding-top: 0; } .cookie-col p{ padding: 15px 0 25px; } .indented-paragraph { text-indent: 70px; /* Adjust the indentation as needed */ } /*NEWSROOM */ /*NEWSROOM */ /*NEWSROOM */ /*NEWSROOM */ /*NEWSROOM */ /*NEWSROOM */ /*NEWSROOM */ /*NEWSROOM */ /*NEWSROOM */ /*NEWSROOM */ .news-header{ height: 30vh; widows: 100%; background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(images/news.jpg); background-position:center; background-size: cover; text-align: center; color: #fff; } .news-header h1{ margin-top: 10px; } /*ORIG*/ .hgbcnews { width: 80%; margin: auto; text-align: center; padding-top: 25px; } h1 { font-size: 35px; font-weight: 500; } p { color: #000000; font-size: 15px; font-weight: 300; line-height: 20px; padding: 10px; } .row { margin-top: 1%; display: flex; justify-content: space-between; flex-wrap: wrap; } .news-col a { text-decoration: none; color: black; } .news-col { flex-basis: 23%; /* Default to 4 tiles */ border-radius: 20px; margin-bottom: 2%; padding: 20px 12px; box-sizing: border-box; transition: 0.5s; position: relative; color: white; /* Ensures text is readable on image backgrounds */ background-size: cover; background-position: center; } /* Pattern for background images and gradients .news-col:nth-child(6n+2) { --bg-image: url('https://example.com/business-administration.jpg'); --bg-gradient: rgba(255, 217, 125, 0.7); } .news-col:nth-child(6n+3) { --bg-image: url('https://example.com/criminology.jpg'); --bg-gradient: rgba(149, 165, 166, 0.7); } .news-col:nth-child(6n+4) { --bg-image: url('https://example.com/secondary-education.jpg'); --bg-gradient: rgba(52, 152, 219, 0.7); } .news-col:nth-child(6n+5) { --bg-image: url('https://example.com/hospitality-management.jpg'); --bg-gradient: rgba(255, 101, 163, 0.7); } .news-col:nth-child(6n+6) { --bg-image: url('https://example.com/information-technology.jpg'); --bg-gradient: rgba(111, 156, 61, 0.7); } .news-col { background: linear-gradient(to bottom, var(--bg-gradient), var(--bg-gradient)), var(--bg-image); } h3 { text-align: center; font-weight: 600; margin: 10px 0; } */ .news-col:hover { box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.2); transform: scale(1.15); transition: box-shadow 0.5s, transform 0.5s; } /* For small screens in portrait and landscape mode */ @media (max-width: 768px) { .news-col { flex-basis: 100%; /* Full width for small screens */ } .row { flex-direction: row; /* Ensure rows remain in row direction */ } } /* For large screens in portrait mode */ @media (min-width: 769px) and (orientation: portrait) { .news-col { flex-basis: 30%; /* Three tiles per row in portrait */ } } /* For very small screens in landscape mode */ @media (max-width: 480px) and (orientation: landscape) { .news-col { flex-basis: 100%; /* Full width for very small screens in landscape */ } } /*TRANSPARENCY REPORT from Information Technology*/ .ITtransparency-header{ height: 30vh; widows: 100%; background: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)), #008000; /* Green color */ background-position: top; background-size: cover; text-align: center; color: #fff; } .ITtransparency-header h1{ margin-top: 10px; } .ITtransparency-us{ width: 80%; margin: auto; padding-top: 0px; padding-bottom: 0px; } .ITtransparency-col{ flex-basis: 100%; padding: 30px 2px; text-align: justify; } .atransparency-col img{ width: 100%; border-radius: 15px; } .ITtransparency-col h1{ padding-top: 0; } .ITtransparency-col p{ padding: 15px 0 25px; } .indented-paragraph { text-indent: 70px; /* Adjust the indentation as needed */ } /* CSS for YouTube Video Information Technology */ .youtube-videoIT { padding: 0; } .video-wrapperIT { max-width: 60%; /* Adjust this for desktop view */ margin: 0 auto; padding: 20px 0; /* Adjust padding as needed */ } .video-containerIT { position: relative; padding-bottom: 56.25%; /* 16:9 aspect ratio */ height: 0; overflow: hidden; width: 100%; } .youtube-iframeIT { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; border-radius: 20px; /* Add border radius */ } /* Media query for smaller screens */ @media (max-width: 768px) { .video-wrapperIT { max-width: 95%; /* Slightly smaller than full width */ padding: 10px 15px; /* Add padding to prevent touching */ box-sizing: border-box; /* Ensure padding doesn't affect width */ } } /*ELEMENTARY EDUCATION PAGE*//*ELEMENTARY EDUCATION PAGE*//*ELEMENTARY EDUCATION PAGE*//*ELEMENTARY EDUCATION PAGE*//*ELEMENTARY EDUCATION PAGE*/ .about-col { display: flex; flex-direction: column; } .content-wrapper { display: flex; flex-direction: column; } .image-container { flex: 1; } .text-container { text-align: justify; flex: 1; } .responsive-image { max-width: 100%; height: auto; } @media screen and (min-width: 768px) { .content-wrapper { flex-direction: row; /* Arrange items in a row on larger screens */ } .image-container { max-width: 50%; /* Make the image container take up 50% of the width */ } .text-container { max-width: 50%; /* Make the text container take up 50% of the width */ padding-left: 20px; /* Add some space between the image and text */ } } .responsive-image { max-width: 100%; height: auto; } @media screen and (min-width: 768px) { .responsive-image { max-width: 100%; /* Adjust the maximum width as needed */ } } .elem-header{ height: 30vh; widows: 100%; background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url('images/ELEMHEAD.jpg'); background-position:center; background-size: cover; text-align: center; color: #fff; } .elem-header h1{ margin-top: 10px; } /*BUSINESS ADMINISTRATION PAGE*//*BUSINESS ADMINISTRATION PAGE*//*BUSINESS ADMINISTRATION PAGE*//*BUSINESS ADMINISTRATION PAGE*/ .bussad-header{ height: 30vh; widows: 100%; background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url('images/BUSSADHEAD.jpg'); background-position:center; background-size: cover; text-align: center; color: #fff; } .bussad-header h1{ margin-top: 10px; } /*CRIMINOLOGY PAGE*//*CRIMINOLOGY PAGE*//*CRIMINOLOGY PAGE*//*CRIMINOLOGY PAGE*//*CRIMINOLOGY PAGE*//*CRIMINOLOGY PAGE*//*CRIMINOLOGY PAGE*/ .crim-header{ height: 30vh; widows: 100%; background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url('images/CRIMIHEAD.jpg'); background-position:center; background-size: cover; text-align: center; color: #fff; } .crim-header h1{ margin-top: 10px; } /*SECONDARY EDUCATION PAGE*//*SECONDARY EDUCATION PAGE*//*SECONDARY EDUCATION PAGE*//*SECONDARY EDUCATION PAGE*//*SECONDARY EDUCATION PAGE*/ .bsed-header{ height: 30vh; widows: 100%; background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url('images/SECONHEAD.jpg'); background-position:center; background-size: cover; text-align: center; color: #fff; } .bsed-header h1{ margin-top: 10px; } /*HOSPITALITY MGMT PAGE*//*HOSPITALITY MGMT PAGE*//*HOSPITALITY MGMT PAGE*//*HOSPITALITY MGMT PAGE*//*HOSPITALITY MGMT PAGE*//*HOSPITALITY MGMT PAGE*/ .bshm-header{ height: 30vh; widows: 100%; background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url('images/HOSPMGHEAD.jpg'); background-position:center; background-size: cover; text-align: center; color: #fff; } .bshm-header h1{ margin-top: 10px; } /*INFORMATION TECHNOLOGY PAGE*//*INFORMATION TECHNOLOGY PAGE*//*INFORMATION TECHNOLOGY PAGE*//*INFORMATION TECHNOLOGY PAGE*/ .bsit-header{ height: 30vh; widows: 100%; background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url('images/ACTITHEAD.jpg'); background-position:center; background-size: cover; text-align: center; color: #fff; } .bsit-header h1{ margin-top: 10px; } .transparency-heading { font-family: 'Ubuntu', sans-serif; /* Changed to Ubuntu Font */ text-align: center; color: white; background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */ padding: 20px; border-radius: 10px; margin: 0 auto; max-width: 80%; /* Restrict width */ position: relative; overflow: hidden; transition: all 0.4s ease; } .transparency-heading a { color: white; text-decoration: none; position: relative; z-index: 1; } .transparency-heading a:hover { text-decoration: underline; /* Add underline on hover */ } .transparency-heading::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, #ffcc00, transparent, #000000); transform: rotate(0deg); animation: galaxy-spin 12s infinite linear; opacity: 0.6; z-index: 0; } @keyframes galaxy-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .transparency-heading a:hover::before { content: ''; position: absolute; top: 50%; left: 50%; width: 300%; height: 300%; background: radial-gradient(circle, rgba(255, 255, 255, 0.8), transparent); transform: translate(-50%, -50%); border-radius: 50%; animation: pulse 1.5s infinite; } @keyframes pulse { 0% { transform: scale(0.9); opacity: 0.7; } 50% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(0.9); opacity: 0.7; } } /* Optional: Style for responsiveness */ @media (max-width: 768px) { .transparency-heading { max-width: 95%; /* Wider on small screens */ } } /*ASSOCIATE COMPUTER TECHNOLOGY PAGE*//*ASSOCIATE COMPUTER TECHNOLOGY PAGE*//*ASSOCIATE COMPUTER TECHNOLOGY PAGE*/ .act-header{ height: 30vh; widows: 100%; background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url('images/ACTHEAD.jpg'); background-position:center; background-size: cover; text-align: center; color: #fff; } .act-header h1{ margin-top: 10px; } .act { margin: 20px auto; /* Adjust the margin as needed to reduce spacing between courses */ width: 100%; border-radius: 10px; text-align: center; padding: 100px 0; position: relative; overflow: hidden; background-image: url(deptmodel/BSIT.jpg); background-position: center; background-size: cover; } .act::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(rgba(30, 30, 30, 0.7), rgba(30, 30, 30, 0.7)); z-index: -1; } .act .hero-btn { display: inline-block; padding: 20px 20px; font-size: 20px; text-decoration: none; color: #fff; background-color: #007BFF; border-radius: 10px; } .act .hero-btn:hover { background-color: #0056b3; } /*ADMISSION */ /*ADMISSION */ /*ADMISSION *//*ADMISSION *//*ADMISSION *//*ADMISSION *//*ADMISSION *//*ADMISSION *//*ADMISSION *//*ADMISSION */ .admission-header{ height: 30vh; widows: 100%; background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(images/about.jpg); background-position: bottom; background-size: cover; text-align: center; color: #fff; } .admission-header h1{ margin-top: 10px; } .admission-us{ width: 80%; margin: auto; padding-top: 0px; padding-bottom: 0px; } .admission-col{ flex-basis: 100%; padding: 30px 2px; text-align: justify; } .admission-col img{ width: 100%; border-radius: 15px; } .admission-col h1{ padding-top: 0; } .admission-col p{ padding: 15px 0 25px; } .indented-paragraph { text-indent: 70px; /* Adjust the indentation as needed */ } /* ACCORDION */ /* ACCORDION */ /* ACCORDION */ /* ACCORDION */ /* ACCORDION */ /* ACCORDION */ /* ACCORDION */ /* ACCORDION */ /* ACCORDION */ .accordion-container { max-width: 800px; margin: 20px auto; } .accordion { margin-bottom: 10px; } .accordion-btn { background-color: #04091E; color: #fff; padding: 10px; width: 100%; text-align: left; cursor: pointer; border: none; outline: none; border-radius: 5px; } .accordion-content { display: none; padding: 10px; } .accordion-content p { margin: 0; }.accordion-content { display: none; padding: 10px; } .accordion-content.show { display: block; } /* Media query for small screens */ @media screen and (max-width: 767px) { .accordion-btn { width: auto; } } /* Add this CSS to your existing stylesheet */ /* Style for the accordion button */ .accordion-btn { background-color: #f4f4f4; color: #333; cursor: pointer; padding: 18px; width: 100%; text-align: left; border: none; outline: none; transition: background-color 0.3s ease; } /* Style for the accordion content container */ .accordion-content { padding: 0 18px; display: none; overflow: hidden; background-color: #f9f9f9; border-left: 1px solid #ddd; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; } /* Show the accordion content when it's open */ .accordion-content.show { display: block; } /*ADMISSION*/ /*ADMISSION*/ /*ADMISSION*/ /*ADMISSION*/ /*ADMISSION*/ /*ADMISSION*/ /*ADMISSION*/ /*ADMISSION*/ /*ADMISSION*/ /*ADMISSION*/ .admission-header{ height: 30vh; widows: 100%; background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(images/admission.webp); background-position: center; background-size: cover; text-align: center; color: #fff; } .admission-header h1{ margin-top: 10px; } /* Footer Styles */ /* Footer Styles */ /* Footer Styles */ /* Footer Styles */ /* Footer Styles */ /* Footer Styles */ /* Footer Styles */ .footer { background-color: #04091E; /* black background color */ color: #fff; /* white text color */ padding: 20px; /* adjust padding as needed */ text-align: center; /* center align text */ } .footer-text { color: #fff; /* Set text color to white */ } /* Apply the footer style to your footer element */ .footer { background-color: #04091E; color: #fff; padding: 20px; text-align: center; } .made{ color: #fff !important; /* Set link text color to white */ text-decoration: none; /* Add underline to link text */ } .FUSASIS{ color: #fff !important; text-decoration: underline; /* Remove underline on hover, adjust as needed */ } /* ACCORDION ADMISSION */ /* ACCORDION ADMISSION *//* ACCORDION ADMISSION *//* ACCORDION ADMISSION *//* ACCORDION ADMISSION *//* ACCORDION ADMISSION */ .accordion-container { max-width: 800px; margin: 20px auto; } .accordion { margin-bottom: 10px; } .accordion-btn { background-color: #04091E; color: #fff; padding: 10px; width: 100%; text-align: left; cursor: pointer; border: none; outline: none; border-radius: 5px; } .accordion-content { display: none; padding: 10px; } .accordion-content p { margin: 0; }.accordion-content { display: none; padding: 10px; } .accordion-content.show { display: block; } /* Media query for small screens */ @media screen and (max-width: 767px) { .accordion-btn { width: auto; } } /* MEET THE DEVELOPER PAGE FUSASIS*/ /* MEET THE DEVELOPER PAGE FUSASIS*/ /* MEET THE DEVELOPER PAGE FUSASIS*/ /* MEET THE DEVELOPER PAGE FUSASIS*/ .fusasis-header{ height: 30vh; widows: 100%; background: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)), linear-gradient(to right, rgba(253, 13, 136, 1) 0%, rgba(253, 63, 153, 1) 8.611825108528137%, rgba(252, 107, 162, 1) 17.223650217056274%, rgba(248, 115, 162, 1) 26.092544198036194%, rgba(223, 129, 166, 1) 34.96143817901611%, rgba(214, 138, 168, 1) 36.632390320301056%, rgba(225, 167, 181, 1) 41.25964045524597%, rgba(229, 183, 196, 1) 46.40102833509445%, rgba(211, 189, 202, 1) 55.26992380619049%, rgba(181, 195, 208, 1) 61.95372939109802%, rgba(143, 203, 214, 1) 68.12339425086975%, rgba(126, 206, 217, 1) 74.29305911064148%, rgba(58, 218, 230, 1) 80.71979582309723%, rgba(38, 220, 234, 1) 85.08997559547424%, rgba(29, 221, 236, 1) 88.303342461586%); background-position: bottom; background-size: cover; text-align: center; color: #fff; } .fusasis-header h1{ margin-top: 10px; } .fusasis-us{ width: 80%; margin: auto; padding-top: 0px; padding-bottom: 0px; } .fusasis-col { text-align: justify } .developer { position: relative; cursor: pointer; } .developer img { width: 100%; height: auto; border-radius: 50%; transition: transform 0.3s ease-in-out; } .developer h3 { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 16px; font-weight: bold; opacity: 0; transition: opacity 0.3s ease-in-out; } .developer:hover img { transform: scale(1.1); } .developer:hover h3 { opacity: 1; } .fusasis-col { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; } .fusasis-col .developer { margin: 5px; text-align: center; } .fusasis-col .developer img { width: 200px; /* Set the width to your desired size */ height: 200px; /* Set the height to your desired size */ object-fit: cover; /* Maintain aspect ratio while covering the specified size */ border-radius: 50%; transition: transform 0.5s ease-in-out; } .fusasis-col .developer h3 { margin-top: 10px; font-size: 16px; font-weight: bold; opacity: 0; transition: opacity 0.3s ease-in-out; } .fusasis-col .developer:hover img { transform: scale(1.1); } .fusasis-col .developer:hover h3 { opacity: 1; } /* MEET JESUS, THE DEVELOPER.*/ /* MEET JESUS, THE DEVELOPER.*/ /* MEET JESUS, THE DEVELOPER.*/ /* MEET JESUS, THE DEVELOPER.*/ .jesus-header{ height: 30vh; widows: 100%; background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(images/gradient.jpg); background-position: bottom; background-size: cover; text-align: center; color: #fff; } .jesus-header h1{ margin-top: 10px; } .jesus-us{ width: 80%; margin: auto; padding-top: 0px; padding-bottom: 0px; } .jesus-col { text-align: justify } .developer { position: relative; cursor: pointer; } .developer img { width: 100%; height: auto; border-radius: 50%; transition: transform 0.3s ease-in-out; } .developer h3 { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 16px; font-weight: bold; opacity: 0; transition: opacity 0.3s ease-in-out; } .developer:hover img { transform: scale(1.1); } .developer:hover h3 { opacity: 1; } .jesus-col { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; } .jesus-col .developer { margin: 5px; text-align: center; } .jesus-col .developer img { width: 200px; /* Set the width to your desired size */ height: 200px; /* Set the height to your desired size */ object-fit: cover; /* Maintain aspect ratio while covering the specified size */ border-radius: 50%; transition: transform 0.5s ease-in-out; } .jesus-col .developer h3 { margin-top: 10px; font-size: 16px; font-weight: bold; opacity: 0; transition: opacity 0.3s ease-in-out; } .jesus-col .developer:hover img { transform: scale(1.1); } .jesus-col .developer:hover h3 { opacity: 1; } /* COURSES PAGE FUSASIS*/ /* COURSES PAGE FUSASIS*/ /* COURSES PAGE FUSASIS*/ /* COURSES PAGE FUSASIS*/ /* COURSES PAGE FUSASIS*/ .course-header { height: 30vh; width: 100%; background: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)), #00008b; background-position: top; background-size: cover; text-align: center; color: #fff; } .course-header .header-content { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; } .course-header img { max-width: 100%; height: auto; } .course-header h1 { margin-top: 10px; } .course-us { background-color: #f8f8f8; padding: 20px; } .course-col { max-width: 800px; margin: 0 auto; } .expandable-banner { display: none; padding: 20px; border: 1px solid #ccc; margin-top: 20px; } .expand-btn { cursor: pointer; color: #007bff; } /* COURSES BSED FUSASIS */ /* COURSES BSED FUSASIS */ /* COURSES BSED FUSASIS */ /* COURSES BSED FUSASIS */ /* COURSES BSED FUSASIS */ .BEED { margin: 20px auto; /* Adjust the margin as needed to reduce spacing between courses */ width: 100%; border-radius: 10px; text-align: center; padding: 100px 0; position: relative; overflow: hidden; background-image: url(deptmodel/EDU.jpg); background-position: center; background-size: cover; } .BEED::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(rgba(30, 30, 30, 0.7), rgba(30, 30, 30, 0.7)); z-index: -1; } .BEED .hero-btn { display: inline-block; padding: 20px 20px; font-size: 20px; text-decoration: none; color: #fff; background-color: #007BFF; border-radius: 10px; } .BEED .hero-btn:hover { background-color: #0056b3; } /* Common styles for both small and large screens */ @media(max-width: 767px) { .cta h1 { font-size: 24px; } } /* Position the enroll button for large screens */ @media(min-width: 768px) { .BEED .hero-btn, .BEED .hero-btn { position: absolute; bottom: 20px; right: 20px; } } /* COURSES BSBA FUSASIS */ /* COURSES BSBA FUSASIS */ /* COURSES BSBA FUSASIS */ /* COURSES BSBA FUSASIS */ /* COURSES BSBA FUSASIS */ .BSBA { margin: 20px auto; /* Adjust the margin as needed to reduce spacing between courses */ width: 100%; border-radius: 10px; text-align: center; padding: 100px 0; position: relative; overflow: hidden; background-image: url(deptmodel/BSBA.jpg); background-position: center; background-size: cover; } .BSBA::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(rgba(30, 30, 30, 0.7), rgba(30, 30, 30, 0.7)); z-index: -1; } .BSBA .hero-btn { display: inline-block; padding: 20px 20px; font-size: 20px; text-decoration: none; color: #fff; background-color: #007BFF; border-radius: 10px; } .BSBA .hero-btn:hover { background-color: #0056b3; } /* Common styles for both small and large screens */ @media(max-width: 767px) { .cta h1 { font-size: 24px; } } /* Position the enroll button for large screens */ @media(min-width: 768px) { .BSBS .hero-btn, .BSBA .hero-btn { position: absolute; bottom: 20px; right: 20px; } } /* COURSES BCRIM FUSASIS */ /* COURSES BCRIM FUSASIS */ /* COURSES BCRIM FUSASIS */ /* COURSES BCRIM FUSASIS */ /* COURSES BCRIM FUSASIS */ .BCRIM { margin: 20px auto; /* Adjust the margin as needed to reduce spacing between courses */ width: 100%; border-radius: 10px; text-align: center; padding: 100px 0; position: relative; overflow: hidden; background-image: url(deptmodel/BCRIM.jpg); background-position: center; background-size: cover; } .BCRIM::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(rgba(30, 30, 30, 0.7), rgba(30, 30, 30, 0.7)); z-index: -1; } .BCRIM .hero-btn { display: inline-block; padding: 20px 20px; font-size: 20px; text-decoration: none; color: #fff; background-color: #007BFF; border-radius: 10px; } .BCRIM .hero-btn:hover { background-color: #0056b3; } /* Common styles for both small and large screens */ @media(max-width: 767px) { .cta h1 { font-size: 24px; } } /* Position the enroll button for large screens */ @media(min-width: 768px) { .BCRIM .hero-btn, .BCRIM .hero-btn { position: absolute; bottom: 20px; right: 20px; } } /* COURSES BSED FUSASIS */ /* COURSES BSED FUSASIS */ /* COURSES BSED FUSASIS */ /* COURSES BSED FUSASIS */ /* COURSES BSED FUSASIS */ .BSED { margin: 20px auto; /* Adjust the margin as needed to reduce spacing between courses */ width: 100%; border-radius: 10px; text-align: center; padding: 100px 0; position: relative; overflow: hidden; background-image: url(deptmodel/SEC.jpg); background-position: center; background-size: cover; } .BSED::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(rgba(30, 30, 30, 0.7), rgba(30, 30, 30, 0.7)); z-index: -1; } .BSED .hero-btn { display: inline-block; padding: 20px 20px; font-size: 20px; text-decoration: none; color: #fff; background-color: #007BFF; border-radius: 10px; } .BSED .hero-btn:hover { background-color: #0056b3; } /* Common styles for both small and large screens */ @media(max-width: 767px) { .cta h1 { font-size: 24px; } } /* Position the enroll button for large screens */ @media(min-width: 768px) { .BSED .hero-btn, .BSED .hero-btn { position: absolute; bottom: 20px; right: 20px; } } /* COURSES BSHM FUSASIS */ /* COURSES BSHM FUSASIS */ /* COURSES BSHM FUSASIS */ /* COURSES BSHM FUSASIS */ /* COURSES BSHM FUSASIS */ .BSHM { margin: 20px auto; /* Adjust the margin as needed to reduce spacing between courses */ width: 100%; border-radius: 10px; text-align: center; padding: 100px 0; position: relative; overflow: hidden; background-image: url(deptmodel/BSHM.jpg); background-position: center; background-size: cover; } .BSHM::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(rgba(30, 30, 30, 0.7), rgba(30, 30, 30, 0.7)); z-index: -1; } .BSHM .hero-btn { display: inline-block; padding: 20px 20px; font-size: 20px; text-decoration: none; color: #fff; background-color: #007BFF; border-radius: 10px; } .BSHM .hero-btn:hover { background-color: #0056b3; } /* Common styles for both small and large screens */ @media(max-width: 767px) { .cta h1 { font-size: 24px; } } /* Position the enroll button for large screens */ @media(min-width: 768px) { .BSHM .hero-btn, .BSHM .hero-btn { position: absolute; bottom: 20px; right: 20px; } } /* COURSES BSIT FUSASIS */ /* COURSES BSIT FUSASIS */ /* COURSES BSIT FUSASIS */ /* COURSES BSIT FUSASIS */ /* COURSES BSIT FUSASIS */ .BSIT { margin: 20px auto; /* Adjust the margin as needed to reduce spacing between courses */ width: 100%; border-radius: 10px; text-align: center; padding: 100px 0; position: relative; overflow: hidden; background-image: url(deptmodel/BSIT.jpg); background-position: center; background-size: cover; } .BSIT::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(rgba(30, 30, 30, 0.7), rgba(30, 30, 30, 0.7)); z-index: -1; } .BSIT .hero-btn { display: inline-block; padding: 20px 20px; font-size: 20px; text-decoration: none; color: #fff; background-color: #007BFF; border-radius: 10px; } .BSIT .hero-btn:hover { background-color: #0056b3; } /* Common styles for both small and large screens */ @media(max-width: 767px) { .cta h1 { font-size: 24px; } } /* Position the enroll button for large screens */ @media(min-width: 768px) { .BSIT .hero-btn, .BSIT .hero-btn { position: absolute; bottom: 20px; right: 20px; } } /*ACT PAGE FUSASIS*/ .ACT { margin: 20px auto; /* Adjust the margin as needed to reduce spacing between courses */ width: 100%; border-radius: 10px; text-align: center; padding: 100px 0; position: relative; overflow: hidden; background-image: url(deptmodel/ACT.jpg); background-position: center; background-size: cover; } .ACT::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(rgba(30, 30, 30, 0.7), rgba(30, 30, 30, 0.7)); z-index: -1; } .ACT .hero-btn { display: inline-block; padding: 20px 20px; font-size: 20px; text-decoration: none; color: #fff; background-color: #007BFF; border-radius: 10px; } .ACT .hero-btn:hover { background-color: #0056b3; } /* Common styles for both small and large screens */ @media(max-width: 767px) { .cta h1 { font-size: 24px; } } /* Position the enroll button for large screens */ @media(min-width: 768px) { .ACT .hero-btn, .ACT .hero-btn { position: absolute; bottom: 20px; right: 20px; } } /* Dark mode styles */ body.dark-mode { background-color: #1e1e1e; /* Dark background color */ color: #fff; /* Light text color */ } /* Styles for the header */ .header { background-color: transparent; /* Remove any background color */ border-bottom: none; /* Remove any border */ } /*LOG IN */ .loading-spinner { display: none; /* Hide by default */ position: fixed; top: 50%; left: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; border: 6px solid #ddd; border-top-color: #3498db; border-radius: 50%; animation: spin 1s ease infinite; z-index: 9999; /* Ensure it appears on top */ } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /*EMOJI*/ .emoji { display: inline-block; font-size: 1em; /* Adjust size for more impact */ transition: opacity 0.5s ease, transform 0.5s ease; position: relative; } @keyframes orbit { 0% { transform: rotate(0deg) translateX(0); } 25% { transform: rotate(90deg) translateX(20px); } 50% { transform: rotate(180deg) translateX(0); } 75% { transform: rotate(270deg) translateX(-20px); } 100% { transform: rotate(360deg) translateX(0); } } /*.orbit { animation: orbit 2s ease-in-out infinite; }*/ .power-up { animation: powerUp 0.5s ease-in-out forwards; } @keyframes powerUp { 0% { transform: scale(1); opacity: 0; } 50% { transform: scale(1.5); opacity: 1; } 100% { transform: scale(1); } }