Files
new_raffles/public/raffles/assets/css/style.css

3916 lines
64 KiB
CSS

:root {
--color-brand: #CE171F;
--color-sec: #1856A6;
--color-ter: #3c3bc3;
--color-four: #121178;
--color-yellow: #FDB913;
--color-sec2: #1F3869;
--color-light-red: #F7EFFF;
--color-light-blue: #FAFAFA;
--color-light-grey: #E1E1E1;
--color-green: #28A745;
}
@font-face {
font-family: 'Outfit';
src: url('../fonts/outfit/Outfit-VariableFont_wght.ttf') format('truetype');
font-weight: 100 900;
font-style: normal;
}
.bibhuti {
font-family: 'pacifico', cursive;
}
/* @font-face {
font-family: 'Poppins';
src: url('assets/fonts/Poppins/Poppins-Regular.ttf') format('ttf'),
url('assets/fonts/Poppins/Poppins-Regular.ttf') format('wottfff');
font-weight: normal;
font-style: normal;
} */
body {
/* font-family: 'Poppins', sans-serif !important; */
font-family: 'Outfit', sans-serif;
/* font-weight: normal; */
}
.text-brand {
color: var(--color-brand) !important;
}
.text-sec {
color: var(--color-sec) !important;
}
.text-sec2 {
color: var(--color-sec2) !important;
}
.text-ter {
color: var(--color-ter) !important;
}
.text-four {
color: var(--color-four) !important;
}
.text-grey {
color: grey !important;
}
.bg-brand {
background-color: var(--color-brand) !important;
color: white;
}
.bg-sec {
background-color: var(--color-sec) !important;
}
.bg-yellow {
background-color: var(--color-yellow) !important;
}
.bg-ter {
background-color: var(--color-ter) !important;
}
.bg-light-red {
background-color: var(--color-light-red) !important;
}
.bg-light-blue {
background-color: var(--color-light-blue) !important;
}
.bg-green {
background-color: var(--color-green) !important;
}
.border-light-grey {
border: 1px solid var(--color-light-grey) !important;
}
.button-hover:hover {
box-shadow: 0 5px 10px gray;
transform: translateY(-5px);
transition: .3s all ease-in-out;
}
.text-hover:hover {
transform: translateY(-5px);
transition: .3s all ease-in-out;
}
/* font size */
.text-10 {
font-size: 10px;
}
.text-12 {
font-size: 12px;
}
.text-14 {
font-size: 14px !important;
}
.text-16 {
font-size: 16px;
}
.text-18 {
font-size: 18px;
}
.text-20 {
font-size: 20px;
}
.text-24 {
font-size: 24px;
}
.text-40 {
font-size: 40px;
}
.section {
margin-top: 30px;
}
.section-heading {
font-size: 42px;
color: var(--color-brand);
font-weight: 700;
text-align: center;
}
.section-heading-sec {
font-size: 32px;
color: var(--color-sec);
font-weight: 700;
text-align: center;
}
@media (min-width:540px) {
.section-heading-sec {
font-size: 42px;
}
}
.hover\:bg-white:hover {
background-color: white !important;
}
.hover\:text-black:hover {
color: black !important;
}
.section-break {
margin: 60px 0;
position: relative;
height: 1px;
background-color: #e0e0e0;
}
.section-break::after {
content: "";
position: absolute;
width: 50px;
height: 5px;
background-color: #e74c3c;
top: -2px;
left: 50%;
transform: translateX(-50%);
border-radius: 2px;
}
/* Alternative section break - just a line */
.simple-break {
margin: 40px 0;
height: 1px;
background: linear-gradient(to right, transparent, #d0d0d0, transparent);
}
/* Alternative section break - dots */
.dot-break {
margin: 40px 0;
text-align: center;
letter-spacing: 8px;
color: #d0d0d0;
font-size: 20px;
}
.border-right-brand {
border-right: 1px solid var(--color-sec) !important;
}
.horz-line {
height: 150px;
width: 1px;
background-color: black;
position: relative;
z-index: -1;
}
/* .horz-line {
transition: all 1s ease-in-out;
transform: translateY(-90px);
opacity: 0;
} */
/* .horz-line.animate {
transform: translateY(0);
opacity: 1;
} */
.uni-img {
transition: all 1s ease-in-out;
transform: translateY(-90px);
opacity: 0;
width: 60%;
}
.uni-img img {
width: 100%;
height: 100%;
}
.uni-img.animate {
transform: translateY(0);
opacity: 1;
}
.uni-video {
margin: 30px 0;
background-color: #FEFDFD;
}
@media (min-width:540px) {
.uni-video {
padding: 30px 0;
}
}
.dotted {
/* width: 50%; */
height: 25px;
/* border: 1px solid black; */
border-right: 5px dotted var(--color-sec);
}
.dotted-b {
/* width: 50%; */
height: 25px;
/* border: 1px solid black; */
border-right: 5px dotted black;
}
.curve-1::after {
content: "";
position: absolute;
bottom: 70px;
/* Adjust as needed */
left: 9%;
width: 200px;
/* Set width */
height: 50px;
/* Set height */
background-image: url('assets/images/demo/start-hub-1/lines.svg');
background-size: contain;
background-repeat: no-repeat;
}
.iconbox-icon-wrap .bg-change {
background-color: #f7efff;
color: #fdb100;
}
/* [data-custom-animations="true"] .animation-element {
opacity: 0;
transform: translate(-10px, 10px);
transition: all 0.8s ease;
} */
/* [data-custom-animations="true"].animate-now .animation-element {
opacity: 1;
transform: translate(0, 0);
} */
/* Animated phone icon on top */
.phone-icon-top {
position: absolute;
top: -25px;
left: 20px;
width: 40px;
height: 40px;
background: #ef4444;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
z-index: 10;
animation: phoneRing 2s ease-in-out infinite;
}
.cta-wrapper {
position: relative;
display: inline-block;
/* bottom: -55px; */
left: 50%;
translate: -50%;
z-index: 100;
}
.phone-icon-top svg {
width: 20px;
height: 20px;
fill: white;
}
/* Phone ringing animation */
@keyframes phoneRing {
0%,
10%,
20%,
30%,
50%,
100% {
transform: rotate(0deg) scale(1);
}
5%,
15%,
25% {
transform: rotate(-15deg) scale(1.1);
}
35% {
transform: rotate(15deg) scale(1.1);
}
}
.cta-button-call {
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
color: white;
padding: 12px 20px;
border-radius: 50px;
text-decoration: none;
font-size: 16px;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 12px;
border: none;
cursor: pointer;
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
transition: all 0.2s ease;
animation: jump 1.5s ease-in-out infinite;
position: relative;
padding-left: 50px;
/* Extra space for phone icon */
}
/* Continuous jumping animation */
@keyframes jump {
0%,
60%,
100% {
transform: translateY(0);
}
30% {
transform: translateY(-8px);
}
}
.cta-button-call:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
animation-play-state: paused;
}
.cta-button-call:hover .phone-icon-top {
animation-play-state: paused;
transform: scale(1.2);
}
.cta-button-call:active {
transform: translateY(0);
}
/* Red accent circle */
.cta-accent {
width: 20px;
height: 20px;
background: #ef4444;
border-radius: 50%;
position: relative;
flex-shrink: 0;
}
.cta-accent::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 6px;
height: 6px;
background: white;
border-radius: 50%;
transform: translate(-50%, -50%);
}
/* Text styling */
.cta-text {
white-space: nowrap;
}
@media (max-width: 768px) {
.cta-button {
padding: 16px 30px;
padding-left: 45px;
font-size: 15px;
gap: 10px;
}
.phone-icon-top {
width: 35px;
height: 35px;
top: -22px;
left: 15px;
}
.phone-icon-top svg {
width: 18px;
height: 18px;
}
.cta-accent {
width: 18px;
height: 18px;
}
.cta-accent::after {
width: 5px;
height: 5px;
}
}
@media (max-width: 480px) {
.cta-button {
padding: 14px 25px;
padding-left: 40px;
font-size: 14px;
gap: 8px;
}
.phone-icon-top {
width: 32px;
height: 32px;
top: -20px;
left: 12px;
}
.phone-icon-top svg {
width: 16px;
height: 16px;
}
.cta-text {
white-space: normal;
line-height: 1.3;
}
}
.call-request {
position: fixed;
top: 40%;
left: 0%;
width: 120px;
background-color: var(--color-sec);
border-radius: 0px 20px 20px 0;
z-index: 10000;
padding: 10px;
}
.call-request p {
font-size: 12px;
color: white;
margin: 0;
}
.call-request img {
position: absolute;
top: -10px;
right: 5px;
width: 70px;
}
.process-icon {
cursor: pointer;
transition: transform 0.5s ease-in-out;
}
.process-icon:active {
animation: flick 0.2s ease-in-out;
}
/* .iconbox-icon-wrap::after{
content: "";
background: url("../images/icons/curve.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
position: absolute;
right: -40px;
top: 40px;
display: block;
width: 100px;
height: 100px;
} */
.curve-img,
.curve-img1 {
display: none;
}
@media (min-width:992px) {
.curve-img,
.curve-img1 {
display: block;
}
}
.icon1 .curve-img {
position: absolute;
left: -103px;
top: 0px;
width: 149px;
height: 154px;
object-fit: cover;
}
.icon1 .curve-img1 {
position: absolute;
right: -103px;
top: 0px;
width: 149px;
height: 154px;
object-fit: cover;
transform: scaleX(-1);
}
@keyframes flick {
0% {
transform: scale(1) rotate(0deg);
}
50% {
transform: scale(1.2) rotate(100deg);
}
100% {
transform: scale(1) rotate(0deg);
}
}
/* .main-nav li a:hover{
color: var(--color-brand) !important;
} */
#plane {
position: absolute;
/* 🔥 KEY CHANGE: absolute instead of fixed */
width: 80px;
top: 200px;
left: 100px;
transition: transform 0.2s ease;
pointer-events: none;
z-index: 9999;
/* transform: rotateX(90deg); */
}
header .main-heading {
padding-right: 10px;
padding-left: 10px;
}
@media (min-width:1199px) {
header .main-heading {
padding-right: 60px;
padding-left: 60px;
}
}
.main-header .btn-solid {
font-weight: 700;
}
/* why us-uk */
.bg-dark-before::before {
content: "";
position: absolute;
left: 0;
right: 0;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.26);
border-radius: 30px;
}
/* courses */
.course-section {
padding-bottom: 30px;
background-color: #F5F3FE;
}
.course-box {
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
justify-content: center;
transition: .3s all ease-in-out;
padding: 40px 20px;
background-color: #2453da;
}
.course-box:hover {
background-color: white !important;
border: .5px solid rgb(173, 171, 171);
border-radius: 10px;
}
.course-box:hover i,
.course-box:hover p {
color: var(--color-sec) !important;
}
.course-finder-box:hover {
box-shadow: 0 5px 15px rgba(128, 128, 128, 0.377);
transition: .3s all ease-in-out;
}
.how-it-work input,
.how-it-work textarea {
border: 1px solid #E3E3E3;
/* color: #FAFAFA; */
}
/* course detail */
/* Course Header */
.course-header {
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}
.university-info {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 20px;
}
.university-logo {
width: 80px;
height: 80px;
background: #2E7D32;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 32px;
font-weight: bold;
}
.university-details h1 {
font-size: 28px;
color: #2c3e50;
margin-bottom: 5px;
}
.university-name {
color: #4472C4;
font-size: 18px;
font-weight: 600;
}
.course-meta {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-top: 20px;
padding: 20px;
background: #f8f9fa;
border-radius: 8px;
}
.meta-item {
text-align: center;
}
.meta-label {
font-size: 12px;
color: #666;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 5px;
}
.meta-value {
font-size: 16px;
font-weight: 600;
color: #2c3e50;
}
/* Course Content */
.course-content {
display: flex;
flex-direction: column;
gap: 20px;
}
.content-section {
background: white;
padding: 25px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.section-title {
font-size: 20px;
color: #2c3e50;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 2px solid #4472C4;
}
.requirements-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.requirement-card {
background: #f8f9fa;
padding: 20px;
border-radius: 8px;
border-left: 4px solid #4472C4;
}
.requirement-title {
font-weight: 600;
color: #2c3e50;
margin-bottom: 10px;
}
.requirement-details {
color: #666;
font-size: 14px;
}
.score-badge {
background: #4472C4;
color: white;
padding: 4px 12px;
border-radius: 15px;
font-size: 12px;
font-weight: 600;
display: inline-block;
margin: 5px 5px 0 0;
}
.intake-badges {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.intake-badge {
background: #4472C4;
color: white;
padding: 8px 16px;
border-radius: 20px;
font-size: 14px;
font-weight: 500;
}
/* Sidebar */
.sidebar {
display: flex;
flex-direction: column;
gap: 20px;
}
.sidebar-card {
background: #B8CCE4;
padding: 25px;
border-radius: 10px;
text-align: center;
}
.sidebar-title {
font-size: 20px;
color: #2c3e50;
margin-bottom: 15px;
font-weight: 600;
}
.form-group {
margin-bottom: 15px;
text-align: left;
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 14px;
}
.form-group textarea {
height: 80px;
resize: vertical;
}
.btn-blue {
background: #4472C4;
color: white;
padding: 12px 30px;
border: none;
border-radius: 25px;
font-weight: 600;
cursor: pointer;
width: 100%;
}
.quick-info {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.info-item {
display: flex;
justify-content: space-between;
padding: 10px 0;
border-bottom: 1px solid #eee;
}
.info-item:last-child {
border-bottom: none;
}
.info-label {
font-weight: 600;
color: #2c3e50;
}
.info-value {
color: #666;
}
/* Course Modules */
.modules-grid {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.module-item {
background: #f8f9fa;
padding: 15px;
border-radius: 8px;
border-left: 3px solid #F4B942;
width: 100%;
}
.module-name {
font-weight: 600;
color: #2c3e50;
margin-bottom: 5px;
}
.module-credits {
color: #666;
font-size: 14px;
}
/* Career Prospects */
.career-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
}
.career-item {
background: #f8f9fa;
padding: 15px;
border-radius: 8px;
text-align: center;
border: 2px solid transparent;
transition: all 0.3s ease;
}
.career-item:hover {
border-color: #4472C4;
transform: translateY(-2px);
}
.career-icon {
font-size: 24px;
margin-bottom: 10px;
}
.career-title {
font-weight: 600;
color: #2c3e50;
}
/* Fees Breakdown */
.fees-table {
width: 100%;
border-collapse: collapse;
margin-top: 15px;
}
.fees-table th,
.fees-table td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #eee;
}
.fees-table th {
background: #f8f9fa;
font-weight: 600;
color: #2c3e50;
}
.fees-table .total-row {
background: #4472C4;
color: white;
font-weight: 600;
}
/* Responsive */
@media (max-width: 768px) {
.university-info {
flex-direction: column;
text-align: center;
}
.course-meta {
grid-template-columns: 1fr;
}
.requirements-grid {
grid-template-columns: 1fr;
}
.modules-grid {
grid-template-columns: 1fr;
}
.career-list {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.course-header,
.content-section,
.sidebar-card,
.quick-info {
padding: 20px;
}
.career-list {
grid-template-columns: 1fr;
}
}
/* .universities-slider{
background: url(../images/general/uni-banner.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 350px;
padding-top: 150px;
margin-bottom: 450px;
margin-top: -80px;
} */
.universities-slider {
/* background: url(../images/general/uni-banner.png); */
/* background: url(../images/general/our-partner-img.png); */
/* background-repeat: no-repeat;
background-position: center; */
/* background-size: cover; */
/* height: 350px; */
/* padding-top: 264px;
margin-bottom: 150px;
margin-top: -80px; */
}
.universities-slider .partner-bg {
width: 95%;
margin: auto;
height: 250px;
}
@media (min-width:768px) {
.universities-slider .partner-bg {
width: 95%;
margin: auto;
height: 350px;
}
}
.universities-slider .partner-bg img {
width: 100%;
height: 100%;
object-fit: cover;
}
.uni-bg-image {
position: relative;
}
.uni-bg-image video {
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
/* transform: translate(-50%, -50%); */
z-index: -1;
/* behind the content */
object-fit: cover;
opacity: 1;
}
.center-image {
width: 200px;
height: 200px;
background: url('https://via.placeholder.com/200') no-repeat center/cover;
border-radius: 50%;
z-index: 2;
}
.line-group {
display: none;
}
.title-line {
width: 65PX;
height: 3px;
background-color: var(--color-brand);
margin-bottom: 10px;
}
@media (min-width:768px) {
.line-group {
position: absolute;
top: 40%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 60px;
z-index: 1;
}
}
.line {
width: 0;
height: 1px;
background: var(--color-brand);
opacity: 0;
transition: width 0.6s ease, opacity 0.6s ease;
}
.line-item {
display: flex;
gap: 20px;
align-items: center;
}
.line-text {
opacity: 0;
margin-left: 10px;
font-size: 16px;
transition: opacity 0.6s ease;
}
@media (min-width:768px) {
.left-group {
left: 0%;
align-items: flex-end;
}
.right-group {
right: 0%;
align-items: flex-start;
}
}
@media (min-width:992px) {
.left-group {
left: 00%;
align-items: flex-end;
}
.right-group {
right: 00%;
align-items: flex-start;
}
}
.visible .line {
width: 100px;
opacity: 1;
}
.visible .line-text {
opacity: 1;
}
/* testimonial */
.testimonial-boxes .box {
background-color: #0052be;
border-radius: 30px;
box-shadow: 0 -1px 10px rgba(124, 123, 123, 0.61);
}
/* .testimonial-boxes{
animation: fall 2s ease-in-out forwards;
} */
/* @keyframes fall {
0% { transform: translateY(-100px) rotate(0deg); opacity: 0; }
100% { transform: translateY(150px) rotate(10deg); opacity: 1; }
} */
.testimonial-slides {
background-color: #F5F3FE;
}
@media (max-width:768px) {
.testimonial-boxes .box {
width: 40%;
}
}
@media (min-width:768px) {
.testimonial-boxes .box {
width: 19%;
}
}
.ui-selectmenu-button {
display: none;
}
select {
display: block !important;
}
.course-finder-top input::placeholder {
/* color: white; */
font-size: 14px;
}
.course-finder-top input {
/* background-color: #1856a641; */
border: 1px solid rgb(196, 194, 194);
border-radius: 10px;
}
.course-finder .answer {
border: 2px solid var(--color-ter);
border-radius: 30px;
font-weight: bold;
padding: 10px;
}
.course-finder-form {
padding: 20px;
border-radius: 10px;
border: 1px solid rgb(203, 199, 199);
}
.course-finder-box {
padding: 10px 20px;
border-radius: 10px;
margin-bottom: 20px;
border: 1px solid rgb(203, 199, 199);
}
.course-finder .module-title {
background-color: #1856a638;
}
/* resource */
.free-resources-content {
padding: 40px 0;
}
.free-resources-content .first-row {
border: 1px solid #E5E5E5;
display: flex;
padding: 0;
flex-direction: column;
border-radius: 10px;
position: sticky;
top: 100px;
}
ul,
ol {
list-style: none;
padding-left: 0;
/* Optional: Removes left indentation */
}
.free-resources-content .first-row li::marker {
display: none !important;
}
.free-resources-content .first-row .tab-btn {
padding: 15px 20px;
}
.free-resources-content .first-row .tab-btn.active {
background-color: var(--color-brand);
}
.free-resources-content .first-row .tab-btn.active h5 {
color: white;
}
.free-resources-content .first-row li {
border-bottom: 1px solid #E5E5E5;
}
.free-resources-content .first-row li:hover {
background-color: var(--color-brand);
transition: .3s all ease-in-out;
color: white;
}
.free-resources-content .first-row li:hover h5 {
transition: .3s all ease-in-out;
color: white;
}
.free-resources-content .third-row .divider {
height: 2px;
width: 40px;
background-color: var(--color-brand);
margin-top: 10px;
}
.free-resources-content input,
.free-resources-content textarea {
border: none;
border-radius: 0;
border-bottom: 1px solid #2E02494D;
}
.free-resources-content form input::placeholder,
.free-resources-content form textarea::placeholder {
color: #2E02494D;
}
.free-resources-content form input:focus,
.free-resources-content form textarea:focus {
outline: none;
border-bottom: 1px solid var(--color-brand) !important;
}
.free-resources-content form input:focus::placeholder,
.free-resources-content form textarea:focus::placeholder {
color: black;
}
.free-resources-content table tr {
margin: 10px 0;
}
@media (max-width:768px) {
.monkey-img .fa-arrow-left {
display: none;
}
.monkey-img .fa-arrow-up {
display: block;
}
}
@media (min-width:768px) {
.monkey-img .fa-arrow-left {
display: block;
}
.monkey-img .fa-arrow-up {
display: none;
}
}
.second-row {
position: sticky;
top: 60px;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
.banner-size {
width: 100%;
margin: auto;
}
.banner .animated-text {
color: #56566e;
}
.banner .module-btn-sm {
padding: 3px 22px !important;
}
.banner-arrow {
padding: 2px 2px 1px 2px;
}
@media (min-width: 576px) {
.banner-sizer {
max-width: var(--lqd-container-width-xs, 540px);
}
}
@media (min-width: 768px) {
.banner-size {
max-width: var(--lqd-container-width-sm, 720px);
}
}
@media (min-width:992px) {
.banner-size {
width: 1170px;
margin: auto;
}
}
.banner-size .module-content .iconbox {
padding: 5px 0px;
}
.banner-size .module-content .iconbox h3 {
display: block;
}
.review-button {
background-color: transparent;
border: 0;
}
.review-button p {
background: var(--color-sec);
color: white;
border-radius: 30px;
padding: 0px 20px;
border: 1px solid var(--color-sec);
margin: 0;
font-size: 20px;
box-shadow: 0 5px 10px gray;
cursor: pointer;
animation: bounce 1.5s ease-in-out infinite;
}
/* Continuous jumping animation */
@keyframes bounce {
0%,
60%,
100% {
transform: translateY(0);
}
30% {
transform: translateY(-8px);
}
}
/* banners of pages */
.about-banner {
height: 44vh;
width: 100%;
background-image: url("../images/about/about-banner.png") !important;
background-repeat: no-repeat;
background-position: center;
position: relative;
z-index: 10;
background-size: cover;
}
.about-page-banner {
height: auto;
padding-top: 47px;
width: 100%;
}
@media (min-width:992px) {
.about-page-banner {
/* height: 63vh; */
padding-top: 0;
}
}
.study-destinations-banner,
.test-preparations-banner,
.services-banner {
height: auto;
padding-top: 85px;
width: 100%;
}
@media (min-width:992px) {
.study-destinations-banner,
.test-preparations-banner {
/* height: 63vh; */
padding-top: 0;
}
.services-banner {
height: 40vh;
padding-top: 0;
}
}
.study-destinations-banner img,
.test-preparations-banner img,
.about-page-banner img,
.services-banner img {
height: 100%;
width: 100%;
object-fit: cover;
}
/* about page */
.about-banner::after {
/* content: ""; */
width: 100%;
height: 100%;
background-color: rgba(126, 123, 123, 0.527);
position: absolute;
top: 0;
left: 0;
z-index: 20;
}
.page-banner {
height: 50vh;
width: 100%;
background-image: url("../images/general/about-banner.png") !important;
background-repeat: no-repeat;
background-position: center;
position: relative;
z-index: 10;
background-size: cover;
/* Ensures it fills the area */
border-radius: 20px;
/* background-color: red; */
}
.page-banner::after,
.bg-after::after {
/* content: ""; */
width: 100%;
height: 100%;
background-color: rgba(126, 123, 123, 0.527);
position: absolute;
top: 0;
left: 0;
z-index: 20;
border-radius: 20px;
}
.about-page .ceo-container,
#about-page .ceo-container {
position: relative;
max-width: 1000px;
margin: 0 auto;
background: linear-gradient(135deg, #ffffff 0%, #f0f4ff 100%);
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
overflow: hidden;
}
.about-page .design-element {
position: absolute;
width: 300px;
height: 300px;
border-radius: 50%;
background: linear-gradient(45deg, #6e57e0 0%, #9b6dff 100%);
top: -100px;
left: -100px;
z-index: 1;
}
.about-page .content-wrapper {
display: grid;
grid-template-columns: 1fr 1.5fr;
position: relative;
z-index: 2;
}
.about-page .image-section {
position: relative;
padding: 40px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.about-page .image-frame {
position: relative;
width: 220px;
height: 220px;
border-radius: 20px;
overflow: hidden;
/* transform: rotate(-5deg); */
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
border: 5px solid white;
}
.career .image-frame {
position: relative;
width: 300px;
height: 240px;
border-radius: 20px;
overflow: hidden;
/* transform: rotate(-5deg); */
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
border: 5px solid white;
}
.about-page .ceo-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.about-page .name-badge {
color: black;
padding: 8px;
font-size: 26px;
font-weight: 700;
}
.about-page .message-section {
padding: 60px 40px;
position: relative;
}
.about-page .accent-line {
position: absolute;
left: 0;
top: 80px;
width: 5px;
height: 100px;
background: linear-gradient(to bottom, #ff7e5f, #feb47b);
}
.about-page .title {
font-size: 18px;
text-transform: uppercase;
letter-spacing: 3px;
color: #6e57e0;
margin-bottom: 10px;
font-weight: 500;
}
.about-page .heading {
font-size: 42px;
font-weight: 700;
color: #2d3748;
margin-top: 0;
margin-bottom: 30px;
line-height: 1.2;
}
.about-page .message {
font-size: 18px;
line-height: 1.8;
color: #4a5568;
position: relative;
padding-left: 20px;
margin-top: 30px;
border-left: 2px dashed #d1d9e6;
}
.about-page .quote-mark {
position: absolute;
font-size: 120px;
color: rgba(110, 87, 224, 0.1);
top: -40px;
left: -20px;
font-family: Georgia, serif;
}
@media (max-width: 768px) {
.about-page .content-wrapper {
grid-template-columns: 1fr;
}
.about-page .image-section {
padding-bottom: 0;
}
.about-page .message-section {
padding-top: 20px;
}
}
.blog {
position: relative;
}
.blog .blog-line {
width: 40px;
height: 2px;
background-color: var(--color-brand);
}
.blog-filter {
background-color: #F2F4FF;
border-radius: 30px;
padding: 20px;
margin-top: 20px;
/* left: 30px; */
}
.blog-post:hover img {
transform: scale(1.1);
/* Horizontal flip */
transition: transform 0.3s ease;
}
.blog .blog-pagination:hover p {
box-shadow: 0 5px 10px var(--color-sec);
transform: translate(-5px);
transition: .4s all ease-in-out;
}
.blog .blog-post:hover {
/* box-shadow: 0 5px 10px grey; */
/* padding: 20px; */
}
.reading-time {
position: absolute;
bottom: 10px;
left: 10px;
background-color: white;
color: var(--color-sec);
}
/* blog detail */
.blog-detail-box {
padding: 30px 40px;
margin-bottom: 20px;
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(128, 128, 128, 0.479);
}
.blog-detail-box .accent-line {
position: absolute;
left: 0;
top: 0px;
width: 5px;
height: 100%;
background: #F59E0B;
}
.blog-quote {
position: relative;
padding: 20px;
background-color: #FFF9EB;
}
.cta-widget {
background: linear-gradient(135deg, #1e3a8a, #3b82f6);
color: #fff;
text-align: center;
padding: 30px;
}
.cta-title {
font-size: 22px;
margin-bottom: 15px;
color: #fff;
}
.cta-text {
font-size: 15px;
}
.cta-button {
display: inline-block;
background-color: #f59e0b;
color: #fff;
padding: 12px 25px;
border-radius: 30px;
font-weight: 500;
transition: all 0.3s ease;
font-size: 14px;
}
.cta-button:hover {
background-color: #fff;
color: #1e3a8a;
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.sidebar-widget {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
padding: 25px;
margin-bottom: 30px;
}
.widget-title {
font-size: 20px;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid #f0f0f0;
color: #1e3a8a;
font-weight: 600;
}
.popular-posts-list {
list-style: none;
}
.popular-post-item {
display: flex;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #f0f0f0;
}
.popular-post-item:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.popular-post-image {
width: 70px;
height: 70px;
border-radius: 5px;
overflow: hidden;
margin-right: 15px;
}
.popular-post-title {
font-size: 15px;
font-weight: 500;
margin-bottom: 5px;
}
.popular-post-date {
font-size: 12px;
color: #888;
}
/* Hero Section */
.blog-hero {
position: relative;
height: 400px;
overflow: hidden;
margin-bottom: 40px;
border-radius: 10px;
margin-top: 30px;
}
.blog-hero img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.blog-hero:hover img {
transform: scale(1.03);
}
.blog-hero-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
padding: 30px;
color: #fff;
}
.blog-category {
background-color: #f59e0b;
color: #fff;
padding: 5px 15px;
border-radius: 20px;
font-size: 14px;
display: inline-block;
margin-bottom: 15px;
font-weight: 500;
}
.blog-title {
font-family: 'Playfair Display', serif;
font-size: 36px;
margin-bottom: 15px;
line-height: 1.2;
}
.blog-meta {
display: flex;
align-items: center;
font-size: 14px;
color: rgba(255, 255, 255, 0.8);
}
.blog-meta-divider {
margin: 0 10px;
}
/* select 2 */
.select2-container {
width: 200px !important;
}
.select2-container--default .select2-selection--single {
height: 35px !important;
background-color: #F2F4FF !important;
border-radius: 30px !important;
border: 1px solid #F2F4FF !important;
padding-left: 10px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
font-size: 14px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
margin-left: -10px !important;
margin-top: 0px !important;
}
/* events */
@media (min-width:768px) {
.events {
width: 95%;
margin: auto;
}
}
@media (min-width:992px) {
.events {
width: 85%;
margin: auto;
}
}
@media (min-width:1200px) {
.events {
width: 75%;
margin: auto;
}
}
.events .carousel-item-content {
box-shadow: 0 4px 10px rgb(206, 206, 206);
border-radius: 30px;
}
.events .carousel-item-content img {
border-radius: 30px 30px 0 0;
}
.events .event-block {
box-shadow: 0 4px 10px rgb(206, 206, 206);
border-radius: 30px;
}
.events .event-block img {
border-radius: 30px 30px 0 0;
}
.events .flickity-viewport {
height: 450px !important;
}
.events button {
border: 1px solid var(--color-ter);
padding: 10px 30px;
font-weight: bold;
}
.events button:hover {
border: 1px solid var(--color-ter);
background-color: var(--color-ter);
color: white !important;
box-shadow: 0 5px 10px var(--color-ter);
transform: translateY(-5px);
transition: .3s all ease-in-out;
}
/* why choose us */
.why-us {
border-bottom: 2px dotted black;
}
.why-us .become-member {
background-color: #1856A6D4;
}
.choose.active {
padding: 10px 20px;
background-color: var(--color-brand);
color: white;
font-size: 20px;
border-radius: 10px;
border: 1px solid var(--color-brand);
}
.choose {
padding: 10px 20px;
background-color: white;
color: #2E02494D;
font-size: 20px;
border-radius: 10px;
border: 1px solid #2E02494D;
}
.why-us form input,
.why-us form textarea {
border: none;
border-radius: 0;
border-bottom: 1px solid #2E02494D;
}
.why-us form input::placeholder,
.why-us form textarea::placeholder {
color: #2E02494D;
}
.why-us form input:focus,
.why-us form textarea:focus {
outline: none;
border-bottom: 1px solid var(--color-brand) !important;
}
.why-us form input:focus::placeholder,
.why-us form textarea:focus::placeholder {
color: black;
}
.why-us .first-row .img1 {
height: 220px;
width: 220px;
border-radius: 100px 0 0 0;
object-fit: cover;
}
.why-us .first-row .img2 {
height: 76px;
width: 76px;
border-radius: 24px;
object-fit: cover;
}
.why-us .first-row .img3 {
height: 106px;
width: 106px;
border-radius: 0 50px 0 0;
object-fit: cover;
}
.why-us .first-row .img4 {
height: 114px;
width: 114px;
border-radius: 0 0 0 50px;
object-fit: cover;
}
.why-us .first-row .img5 {
height: 182px;
width: 182px;
border-radius: 0 100px 0 0;
object-fit: cover;
}
.why-us .first-row .img6 {
height: 142px;
width: 142px;
border-radius: 0 0 0 90px;
object-fit: cover;
}
.why-us .first-row .img7 {
height: 130px;
width: 130px;
border-radius: 0 0 60px 0;
object-fit: cover;
}
.why-us .first-row .img8 {
height: 166px;
width: 166px;
border-radius: 0 0 90px 0;
object-fit: cover;
}
@media (max-width:1400px) {
.why-us .first-row .mobile-view {
display: block;
width: 100%;
height: 100%;
}
.why-us .first-row .image-part {
display: none;
}
}
@media (min-width:1400px) {
.why-us .first-row .mobile-view {
display: none;
}
.why-us .first-row .image-part {
display: block;
}
.why-us .first-row .img1 {
height: 167px;
width: 158px;
border-radius: 100px 0 0 0;
object-fit: cover;
position: absolute;
top: 5px;
left: 0px;
}
.why-us .first-row .img2 {
height: 76px;
width: 76px;
border-radius: 24px;
object-fit: cover;
position: absolute;
top: 55px;
left: 220px;
}
.why-us .first-row .img3 {
height: 106px;
width: 106px;
border-radius: 0 50px 0 0;
object-fit: cover;
position: absolute;
top: 5px;
left: 390px;
}
.why-us .first-row .img4 {
height: 114px;
width: 114px;
border-radius: 0 0 0 50px;
object-fit: cover;
position: absolute;
top: 270px;
left: 68px;
}
.why-us .first-row .img5 {
height: 150px;
width: 130px;
border-radius: 0 100px 0 0;
object-fit: cover;
position: absolute;
top: 156px;
left: 220px;
}
.why-us .first-row .img6 {
height: 142px;
width: 142px;
border-radius: 0 0 0 90px;
object-fit: cover;
position: absolute;
top: 415px;
left: 0px;
}
.why-us .first-row .img7 {
height: 102px;
width: 104px;
border-radius: 0 0 60px 0;
object-fit: cover;
position: absolute;
top: 365px;
left: 220px;
}
.why-us .first-row .img8 {
height: 127px;
width: 116px;
border-radius: 0 0 90px 0;
object-fit: cover;
position: absolute;
top: 300px;
left: 380px;
}
}
.why-us .icons:hover {
background-color: var(--color-brand);
color: white;
}
.popup-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: #7777775d;
backdrop-filter: blur(10px);
visibility: hidden;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.1s ease-in-out;
z-index: 100;
}
.popup-container.active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.close-btn {
position: absolute;
top: 10px;
right: 20px;
}
/* get in touch */
.popup-container-inside {
width: 90%;
/* height: 90vh; */
margin: auto;
margin-top: 10px;
position: relative;
}
.popup-container-inside .inside1 {
background-color: white;
height: 100vh;
width: 100%;
border-radius: 30px 0 0 30px;
}
.popup-container-inside .inside2 {
background: linear-gradient(to bottom, #1856A6, #CE171F);
height: 100%;
width: 100%;
border-radius: 0 30px 30px 0;
}
.popup-container-inside .inside-content {
position: absolute;
top: 20px;
left: 20px;
width: 90%;
height: 100%;
}
.popup-container-inside .inside-content .map {
height: 90vh;
}
.inside-content form input,
.inside-content form textarea {
border: none;
border-radius: 0;
border-bottom: 1px solid #2E02494D;
}
.inside-content form input::placeholder,
.inside-content form textarea::placeholder {
color: #2E02494D;
}
.inside-content form input:focus,
.inside-content form textarea:focus {
outline: none;
border-bottom: 1px solid var(--color-brand) !important;
}
.inside-content form input:focus::placeholder,
.inside-content form textarea:focus::placeholder {
color: black;
}
.popup-container-inside input[type=number]::-webkit-outer-spin-button,
.popup-container-inside input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.popup-container-inside input[type=number] {
-moz-appearance: textfield;
/* Firefox */
}
/* for mobile view */
.mobile-navbar-collapse .menu-dropdown {
background-color: #8fb6f41e;
}
.menu-dropdown ul {
padding: 0 25px 0;
}
.menu-dropdown ul li {
padding: 20px 0;
}
.menu-dropdown ul li a {
color: black;
}
.popup-container-inside-mobile {
width: 100%;
margin-top: 30px;
padding: 60px 0;
}
.popup-container-inside-mobile .inside-content .inside1 {
background-color: #9cbbe446;
width: 100%;
/* border-radius: 30px 0 0 30px; */
}
.popup-container-inside-mobile .inside-content {
width: 100%;
}
.popup-container-inside-mobile .inside-content .map {
height: 400px;
width: 100%;
}
/* career */
.career .career-box {
border: 1px solid rgb(233, 230, 230);
border-radius: 30px;
padding: 30px 20px;
}
.career .career-box:hover {
box-shadow: 0 5px 10px gray;
}
.career .career-box i {
color: #FFA033;
}
.career .career-box button {
display: inline-block !important;
padding: 10px;
border: 2px solid #FFA033;
border-radius: 30px;
background-color: white;
color: #FFA033;
width: 40%;
font-size: 14px;
}
.career .career-box button:hover {
border: 2px solid #FFA033;
background-color: #FFA033;
color: white;
transition: .3s all ease-in-out;
}
/* contact us */
.contact-box {
/* border: 1px solid rgb(206, 201, 201); */
box-shadow: 0 5px 10px gray;
padding: 60px 0;
}
.contact-form {
padding: 50px 40px;
box-shadow: 0 5px 10px gray;
}
@media (min-width:768px) {
.contact-form {
width: 70%;
margin: auto;
}
}
.contact-form input,
.contact-form textarea {
border: 1px solid rgb(184, 180, 180);
border-radius: 0;
}
.contact-form input:focus,
.contact-form textarea:focus {
outline: none;
border: 1px solid var(--color-brand);
}
.accordion-heading:hover .accordion-title-txt {
padding-left: 10px;
transition: 0.4s all ease-in-out;
}
/* franchise */
.franchise-form {
width: 90%;
margin: 30px auto 0 auto;
padding: 50px;
border-radius: 30px;
}
.franchise-form select {
border: 2px solid var(--color-brand);
/* custom border color */
font-size: 16px;
/* text size for selected item */
padding: 8px;
border-radius: 5px;
background-color: white;
color: #333;
outline: none;
}
/* Change arrow icon (optional) */
.franchise-form select::-ms-expand {
display: none;
/* remove default arrow in IE */
}
/* Style options (limited support) */
.franchise-form select option {
font-size: 14px;
/* text size inside dropdown */
color: #333;
background: white;
}
/* Hover effect on options (ONLY works in Firefox) */
.franchise-form select option:hover {
background: var(--color-brand) !important;
color: white;
}
.franchise-form input,
.franchise-form textarea,
.franchise-form select option {
border: 1px solid rgb(226, 224, 224);
border-radius: 0;
}
.franchise-form .ui-selectmenu-text {
color: white;
}
.franchise-form input:focus,
.franchise-form textarea:focus,
.franchise-form select option:focus {
outline: none;
border: 1px solid var(--color-brand);
}
.franchise-form .select2-container {
width: 100% !important;
}
.franchise-form .select2-container--default .select2-selection--single {
height: 46px !important;
background-color: #fff !important;
border-radius: 0 !important;
border: 1px solid rgb(226, 224, 224) !important;
padding-left: 10px !important;
padding-top: 10px;
}
.franchise-form .select2-container--default .select2-selection--single .select2-selection__rendered {
font-size: 16px !important;
}
.franchise-form .select2-container--default .select2-selection--single .select2-selection__arrow b {
margin-left: -10px !important;
margin-top: 0px !important;
}
.franchise-model {
width: 80%;
margin-left: auto;
}
#franchise-invest-button {
display: none !important;
}
#franchise-timeframe-button {
display: none !important;
}
/* social-platform */
.social-platform .iconbox:hover i {
color: white !important;
}
@media (min-width:768px) {
.social-platform .social-linkedin,
.social-platform .social-pinterest,
.social-platform .social-youtube {
width: 25%;
}
}
/* cost calculator */
.total-cost {
padding: 20px 40px;
/* background: url("../images/general/cost-bg.png"); */
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-color: #F9F5F2;
border-radius: 30px;
/* z-index: 2; */
}
@media (min-width:992px) and (max-width:1200px) {
.total-cost {
padding: 20px 2px;
}
}
.total-cost table {
/* border: 2px solid white; */
border-collapse: separate;
}
.total-cost h4 {
color: #A8664E;
font-weight: bold;
font-size: 22px;
text-align: center;
padding-bottom: 10px;
}
.total-cost thead tr th {
background-color: #D7E1D5;
font-size: 16px;
/* padding-left: 0.8em; */
text-align: center;
}
.total-cost tbody tr td {
font-size: 16px;
text-align: center;
/* background-color: #D2EBE2; */
}
.total-cost tbody tr:nth-child(1) {
background-color: #D2EBE2;
}
.total-cost tbody tr:nth-child(2) {
background-color: #D3E8EB;
}
.total-cost tbody tr:nth-child(3) {
background-color: #DEDDE6;
}
.total-cost tbody tr:nth-child(4) {
background-color: #D9CEDB;
}
.total-cost tbody tr:nth-child(5) {
background-color: #F6D0C9;
}
.cost-choosing {
padding: 30px;
border-radius: 30px;
background-color: #F7F0FF;
}
.cost-choosing .circle1 {
width: 25px;
height: 25px;
border-radius: 100%;
background-color: #23B334;
}
.cost-choosing .circle2 {
width: 25px;
height: 25px;
border-radius: 100%;
background-color: #9A249E;
}
.cost-choosing .tabs:hover {
box-shadow: 0 5px 10px gray;
transform: translateY(-10px);
transition: .3s all ease-in-out;
cursor: pointer;
}
.cost-choosing .next-btn button {
background-color: #0000002a;
}
.cost-choosing .next-btn button:hover i {
margin-left: 10px;
transition: .3s all ease-in;
}
.cost-choosing .next-btn i {
color: var(--color-ter);
padding: 5px 8px;
background-color: #FFEFE0;
border-radius: 100%;
/* margin-left: 10px; */
font-size: 12px;
}
.cost-choosing,
.total-cost {
position: relative;
z-index: 2;
}
canvas {
position: absolute;
top: 0;
left: 0;
z-index: 1;
pointer-events: auto;
}
.section-fall {
/* height: 500px; */
width: 100vw;
position: relative;
/* display: flex; */
justify-content: center;
align-items: center;
}
.progress-line {
position: relative;
height: 80px;
margin-top: 20px;
}
.progress-track {
position: absolute;
top: 50%;
left: 30px;
right: 30px;
height: 5px;
background: #ccc;
transform: translateY(-50%);
}
.progress-track span {
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
}
.banana img {
width: 24px;
}
.banana {
top: 50%;
}
#b1 {
left: 0%;
}
#b2 {
left: 25%;
}
#b3 {
left: 50%;
}
#b4 {
left: 75%;
}
#b5 {
left: 100%;
}
.monkey {
position: absolute;
bottom: 22px;
transition: 0.5s all ease;
}
.monkey img {
width: 60px;
max-width: 80px;
}
@media (min-width:992px) {
.monkey img {
width: 80px;
max-width: 80px;
}
}
#b5 img {
width: 30px;
max-width: 30px;
}
#b5 {
display: block;
}
#b5.active {
display: none;
}
/* .monkey {
position: absolute;
top: -40px;
font-size: 24px;
transition: left 0.4s ease;
} */
.cost-choosing .step-content {
display: none;
}
.cost-choosing .step-content.active {
display: block;
}
/* career details */
.career-img {
width: 50px;
height: 50px;
border: 1px solid var(--color-brand);
border-radius: 100%;
}
.career-img img {
width: 100%;
height: 100%;
padding: 5px;
}
.career.details .career-box {
box-shadow: 0 5px 10px var(--color-sec);
}
.career-details h3 {
font-size: 20px;
margin-bottom: 0;
}
.career-details p {
font-size: 14px;
}
.career-details h4 {
font-size: 15px;
font-weight: normal;
}
.career-details .content h6,
.career .content li {
font-size: 12px;
}
.career-details ul {
padding-left: 0 !important;
}
.career-details ul li {
list-style: none;
font-size: 14px;
}
.career-details .form {
background-color: white;
box-shadow: 0 5px 10px gray;
padding: 40px;
}
.career-details form input,
.career-details form textarea {
border: 1px solid rgb(206, 202, 202);
}
.career-details form input:focus,
.career-details form textarea:focus {
outline: 0;
border: 1px solid var(--color-brand);
}
.line-through {
width: 100%;
border-bottom: 1px solid var(--color-sec);
}
.career-details .position {
padding: 5px;
background-color: white;
position: absolute;
top: -15px;
left: 100px;
font-size: 14px !important;
}
.career-details .position h4 {
font-size: 16px !important;
}
@media (min-width:778px) {
.career-details .position {
padding: 5px;
background-color: white;
position: absolute;
top: -20px;
left: 400px;
}
.career-details .position h4 {
font-size: 22px !important;
}
}
/* gallery */
.gallery {
column-count: 4;
column-gap: 0px;
height: 100%;
/* padding: 8px; */
}
.gallery img {
width: 100%;
margin-bottom: 8px;
border-radius: 6px;
cursor: pointer;
transition: transform 0.3s ease;
}
.gallery img:hover {
transform: scale(1.03);
}
/* Lightbox */
.lightbox {
position: fixed;
top: 70px;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.95);
display: flex;
align-items: center;
justify-content: center;
z-index: 999;
visibility: hidden;
opacity: 0;
transition: opacity 0.3s ease;
}
.lightbox.active {
visibility: visible;
opacity: 1;
}
.lightbox img {
width: 50%;
height: 60%;
max-width: 90%;
max-height: 85%;
border-radius: 8px;
object-fit: cover;
}
.navbar-menu li {
position: relative;
}
/* .dropdown:hover .dropdown-menu{
display: flex;
gap: 10px;
justify-content: space-between;
border-top: 3px solid var(--color-brand);
border-bottom: 3px solid var(--color-brand);
width: 50%;
transition: .5s all ease-in-out;
}
.dropdown-menu ul{
display: flex;
gap: 10px;
flex-direction: column;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
background: #fff;
display: none;
min-width: 400px;
width: 100%;
z-index: 100;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.dropdown-menu {
padding: 20px 0;
}
.dropdown-menu li {
list-style: none;
}
.dropdown-menu a {
font-size: 14px;
padding: 0 15px;
} */
/* Dropdown Styles */
.dropdown {
position: relative;
}
.dropdown-trigger {
display: flex;
align-items: center;
gap: 0.25rem;
background: none;
border: none;
color: #64748b;
cursor: pointer;
font-size: 1rem;
font-weight: 400;
padding: 0.5rem 0;
transition: color 0.3s ease;
}
.dropdown-trigger:hover {
color: #1e293b;
}
.dropdown-icon {
font-size: 0.75rem;
transition: transform 0.3s ease;
}
.dropdown:hover .dropdown-icon {
transform: rotate(180deg);
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
margin-top: 0.5rem;
opacity: 0;
visibility: hidden;
transform: translateX(-50%) translateY(-1rem);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1000;
}
.dropdown:hover .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.dropdown-content {
background: white;
border-radius: 1.5rem;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
border: 1px solid #e2e8f0;
padding: 2rem;
width: 800px;
position: relative;
overflow: hidden;
}
/* Background Decorations */
.bg-decoration {
position: absolute;
border-radius: 50%;
opacity: 0.5;
pointer-events: none;
}
.bg-decoration-1 {
top: -8rem;
right: -8rem;
width: 16rem;
height: 16rem;
background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 100%);
}
.bg-decoration-2 {
bottom: -6rem;
left: -6rem;
width: 12rem;
height: 12rem;
background: linear-gradient(45deg, #dcfce7 0%, #dbeafe 100%);
}
/* Services Grid */
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
position: relative;
z-index: 10;
}
.service-category {
display: flex;
flex-direction: column;
gap: 1rem;
}
.category-title {
font-size: 0.75rem;
font-weight: 600;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.05em;
border-bottom: 1px solid #e2e8f0;
padding-bottom: 0.5rem;
}
.service-items {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.service-item {
cursor: pointer;
border-radius: 0.75rem;
padding: 0.75rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
display: flex;
align-items: flex-start;
gap: 0.75rem;
}
.service-item:hover {
background: #f8fafc;
transform: translateY(-0.25rem) scale(1.05);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.service-icon {
padding: 0.2rem;
border-radius: 0.5rem;
color: white;
font-size: 1rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
flex-shrink: 0;
width: 2rem;
height: 2rem;
display: flex;
align-items: center;
justify-content: center;
}
.service-item:hover .service-icon {
transform: scale(1.1) rotate(6deg);
}
.service-icon img {
height: 100%;
width: 100%;
object-fit: cover;
box-shadow: 0 5px 10px gray;
border-radius: 100%;
}
.service-content {
flex: 1;
min-width: 0;
}
.service-name {
font-size: 0.875rem;
font-weight: 500;
color: #1e293b;
margin-bottom: 0.25rem;
transition: color 0.3s ease;
}
.service-item:hover .service-name {
color: #0f172a;
}
.service-description {
font-size: 0.75rem;
color: #64748b;
opacity: 0;
max-height: 0;
overflow: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
line-height: 1.4;
}
.service-item:hover .service-description {
opacity: 1;
max-height: 5rem;
margin-top: 0.25rem;
}
.service-border {
position: absolute;
bottom: 0;
left: 0.75rem;
right: 0.75rem;
height: 2px;
width: 0;
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 1px;
}
.service-item:hover .service-border {
width: calc(100% - 1.5rem);
}
/* Color Classes */
.blue-bg {
background: #3b82f6;
}
.red-bg {
background: #ef4444;
}
.green-bg {
background: #10b981;
}
.purple-bg {
background: #8b5cf6;
}
.orange-bg {
background: #f97316;
}
.indigo-bg {
background: #6366f1;
}
.pink-bg {
background: #ec4899;
}
.emerald-bg {
background: #059669;
}
.cyan-bg {
background: #06b6d4;
}
.amber-bg {
background: #f59e0b;
}
.rose-bg {
background: #f43f5e;
}
.teal-bg {
background: #14b8a6;
}
.blue-gradient {
background: linear-gradient(90deg, #3b82f6, transparent);
}
.red-gradient {
background: linear-gradient(90deg, #ef4444, transparent);
}
.green-gradient {
background: linear-gradient(90deg, #10b981, transparent);
}
.purple-gradient {
background: linear-gradient(90deg, #8b5cf6, transparent);
}
.orange-gradient {
background: linear-gradient(90deg, #f97316, transparent);
}
.indigo-gradient {
background: linear-gradient(90deg, #6366f1, transparent);
}
.pink-gradient {
background: linear-gradient(90deg, #ec4899, transparent);
}
.emerald-gradient {
background: linear-gradient(90deg, #059669, transparent);
}
.cyan-gradient {
background: linear-gradient(90deg, #06b6d4, transparent);
}
.amber-gradient {
background: linear-gradient(90deg, #f59e0b, transparent);
}
.rose-gradient {
background: linear-gradient(90deg, #f43f5e, transparent);
}
.teal-gradient {
background: linear-gradient(90deg, #14b8a6, transparent);
}
/* Responsive Design */
@media (max-width: 1024px) {
.dropdown-content {
width: 700px;
}
}
@media (max-width: 768px) {
.dropdown-content {
width: 90vw;
padding: 1.5rem;
}
.services-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.cta-content {
flex-direction: column;
gap: 1rem;
text-align: center;
}
}
@media (max-width: 480px) {
.dropdown-content {
width: 95vw;
padding: 1rem;
}
.services-grid {
gap: 1rem;
}
}
/* Enhanced Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.dropdown:hover .dropdown-content {
animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Focus States for Accessibility */
.dropdown-trigger:focus,
.nav-link:focus,
.cta-button:focus,
.book-call-btn:focus {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}
.service-item:focus {
outline: 2px solid #3b82f6;
outline-offset: 2px;
border-radius: 0.75rem;
}
/* Show on toggle */
.dropdown.open .dropdown-menu {
display: block;
}
.nav-button {
position: absolute;
top: 50%;
font-size: 1.5em;
background: rgba(255, 255, 255, 0.2);
border: none;
color: #fff;
padding: 5px 20px;
cursor: pointer;
user-select: none;
transform: translateY(-50%);
border-radius: 50%;
}
.nav-button:hover {
background: rgba(255, 255, 255, 0.4);
}
.prev {
left: 20px;
}
.next {
right: 20px;
}
.close-btn {
position: absolute;
top: 10px;
right: 25px;
font-size: 0.8em;
color: #fff;
cursor: pointer;
background: rgba(255, 255, 255, 0.2);
padding: 6px 12px;
border-radius: 50%;
z-index: 100;
transition: background 0.3s ease;
}
.close-btn:hover {
background: rgba(255, 255, 255, 0.4);
}
@media (max-width: 1024px) {
.gallery {
column-count: 3;
}
}
@media (max-width: 768px) {
.gallery {
column-count: 2;
}
}
@media (max-width: 480px) {
.gallery {
column-count: 1;
}
}
/* sitemap */
.sitemap-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 20px;
}
.sitemap-category {
background: white;
border-radius: 16px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
border: 1px solid #e2e8f0;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.sitemap-category::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #dc2626 0%, #1e40af 100%);
}
.sitemap-category:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}
.sitemap-category h2 {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 20px;
color: #1e293b;
display: flex;
align-items: center;
gap: 10px;
}
.category-icon {
width: 40px;
height: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
color: white;
flex-shrink: 0;
padding: 8px;
}
.core-pages .category-icon {
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
}
.study-abroad .category-icon {
background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
}
.student-support .category-icon {
background: linear-gradient(135deg, #059669 0%, #047857 100%);
}
.more-info .category-icon {
background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
}
.careers .category-icon {
background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
}
.sitemap-category ul {
list-style: none;
padding: 0;
}
.sitemap-category li {
margin-bottom: 12px;
}
.sitemap-category li a {
text-decoration: none;
color: #475569;
font-weight: 500;
padding: 10px 15px;
border-radius: 8px;
display: block;
transition: all 0.3s ease;
border-left: 3px solid transparent;
}
.sitemap-category li a:hover {
background: #f1f5f9;
color: #dc2626;
border-left-color: #dc2626;
transform: translateX(5px);
}
.stats-section {
background: white;
border-radius: 16px;
padding: 30px;
margin-bottom: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
border: 1px solid #e2e8f0;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
.stat-item {
text-align: center;
padding: 20px;
border-radius: 12px;
background: #f8fafc;
}
.stat-number {
font-size: 2rem;
font-weight: 700;
color: #dc2626;
margin-bottom: 5px;
}
.stat-label {
color: #64748b;
font-size: 0.9rem;
}
/* Responsive Design */
@media (max-width: 768px) {
.sitemap-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.sitemap-category {
padding: 20px;
}
.sitemap-category h2 {
font-size: 1.3rem;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.sitemap-category {
padding: 15px;
}
.stats-grid {
grid-template-columns: 1fr;
}
}
/* service */
.service-points {
border: .5px solid #1856a61e;
}
.service-points:hover {
border: 1px solid #1856A6;
background-color: #1856A6;
transition: 0.3s all ease-in-out;
box-shadow: 0 5px 14px #1856A6;
}
.lqd-tabs-style-9 .lqd-tabs-nav li.active {
border: 1px solid #1856A6;
}
@media (max-width:479px) {
.lqd-tabs-style-9 .lqd-tabs-nav {
flex-direction: row;
}
.lqd-tabs-style-9 .lqd-tabs-nav li {
width: 50%;
}
}
/* footer */
/* footer background image can be useed for other site as well */
.footer-graphics {
background: url("../images/general/footer-graphics.png");
background-position: center;
background-size: contain;
background-repeat: no-repeat;
padding: 35px;
margin-bottom: -10px;
}
.footer-content {
background-color: var(--color-yellow);
}
.highlight-tab {
background-color: #e0f2fe;
/* light blue */
font-weight: bold;
color: #0c4a6e;
/* dark brand color */
}
.footer-content .footer-inside {
padding-top: 30px;
}
@media (min-width:768px) {
.footer-graphics {
padding: 47px;
}
}
@media (min-width:1200px) {
.footer-graphics {
padding: 67px;
}
}
footer input::placeholder {
color: white;
/* Change placeholder text color */
opacity: 1;
/* Ensures full visibility */
font-size: 12px;
}
footer input,
footer button {
border-bottom: 1px solid white;
}
.lqd-fancy-menu input::placeholder {
color: gray;
}
.lqd-fancy-menu input:focus {
outline: 0;
border: 1px solid var(--color-brand);
}
footer form {
border-radius: 4px;
/* border: 0.1px solid white; */
margin-bottom: 10px;
}
footer form input {
background-color: #fff;
margin: 2px 0;
}
footer form button {
background-color: #675113;
margin: 2px 0;
}
footer form input::placeholder {
color: rgb(37, 36, 36) !important;
}
.footer-logos {
width: 100%;
/* padding: 10px 0; */
}
.footer-logos .row {
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin: 0 15px;
gap: 7px;
}
.footer-logos img {
padding: 5px;
margin: 5px 0;
}
/* .footer-logos img:hover{
transition: .3s all ease-in-out;
box-shadow: 0 5px 10px rgb(180, 179, 179);
} */
.footer-bottom {
/* background-color: #731c1c; */
background-color: var(--color-brand);
padding: 20px 0;
}
.social-icons-footer i {
color: #3c2c07;
font-size: 30px;
}