Files
new_raffles/public/raffles/assets/css/style.css
2025-07-27 17:40:56 +05:45

2917 lines
54 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;
}
/* @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: 42px;
color: var(--color-sec);
font-weight: 700;
text-align: center;
}
.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;
}
.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);
} */
.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;
}
.how-it-work input, .how-it-work textarea {
border: 1px solid #E3E3E3;
/* color: #FAFAFA; */
}
/* .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;
}
/* .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;
}
/* 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;
position: sticky;
top: 30px;
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 {
margin-bottom: 20px;
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:220px ;
width: 220px;
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: 252px;
}
.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: 106px;
}
.why-us .first-row .img5{
height:182px ;
width: 182px;
border-radius:0 100px 0 0;
object-fit: cover;
position: absolute;
top: 156px;
left: 252px;
}
.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:130px ;
width: 130px;
border-radius:0 0 60px 0;
object-fit: cover;
position: absolute;
top: 365px;
left: 252px;
}
.why-us .first-row .img8{
height:166px ;
width: 166px;
border-radius:0 0 90px 0;
object-fit: cover;
position: absolute;
top: 300px;
left: 460px;
}
}
.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%;
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-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.5rem;
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-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);
}
.footer-content .footer-inside{
padding-top: 40px;
}
@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;
}