.info-card { min-height: 100%; display: flex; flex-direction: column; justify-content: start; background-color: #ffffff; border-radius: 8px; transition: transform 0.3s ease; } .info-card:hover { transform: translateY(-5px); } /* Quick Links Section Background */ .quick-links-container { background-color: #ffffff; } /* Services Portal Card Front */ .portal-services-front { color: #ffffff; background: linear-gradient(135deg, #a35bcd, #12001e); } /* Quick Links Heading */ .quick-links-title { font-weight: bold; color: #0825c9; } .view-more-link { color: #315af3; text-decoration: underline; margin-left: 5px; } .view-more-link:hover { color: #1f3fd1; text-decoration: none; } .banner .owl-carousel .item-first, .banner .owl-carousel .item-second, .banner .owl-carousel .item-third { background-size: cover; background-position: center; /* height: 500px; */ } /* Header Banner Styling */ .header-banner { background: url('your-banner-image.jpg') no-repeat center center; background-size: cover; padding: 30px 0; color: #fff; position: relative; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } .header-banner .container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .header-banner h1 { margin: 0; font-size: 26px; font-weight: bold; line-height: 1.3; } .header-banner p { margin: 5px 0 0; font-size: 16px; line-height: 1.4; } /* Emblem or Logo */ .header-banner img { height: 60px; max-width: 100%; } /* Optional: Font Awesome icon (include this in your ) */ @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css'); /* .banner-item-01, .banner-item-02, .banner-item-03, .banner-item-04 , .banner-item-05 , .banner-item-06 { min-height: 60vh; background-size: contain; background-position: center center; background-repeat: no-repeat; } */ .banner-item-01, .banner-item-02, .banner-item-03, .banner-item-04, .banner-item-05, .banner-item-06, .banner-item-07, .banner-item-08{ /* min-height: 60vh; */ height: 60vh; background-position: center; background-repeat: no-repeat; background-size: cover; /* prevents clipping */ background-color: #7487a1; /* optional background */ } @media (max-width: 768px){ .banner-item-01, .banner-item-02, .banner-item-03, .banner-item-04, .banner-item-05, .banner-item-06, .banner-item-07, .banner-item-08{ height: 35vh; background-size: contain; } .banner .text-content h2{ font-size: 26px; letter-spacing: 1px; } .banner .text-content h4{ font-size: 16px; } } /* All banners use the same image */ /* .banner-item-06 { background-image: url('images/ba.png'); } */ .banner-item-03 { background-image: url(https://ksrec.kerala.gov.in/website/website_malayalam/assets/newdashboard/images/banner2_mala.png); /* background-image: url('images/banner2_mala.png'); */ } /* .banner-item-03 { background-image: url('images/zx4.png'); } */ .banner-item-01 { background-image: url(https://ksrec.kerala.gov.in/website/website_malayalam/assets/newdashboard/images/banner1_mala.png); /* background-image: url('images/banner1_mala.png'); */ } .banner-item-04{ background-image: url(https://ksrec.kerala.gov.in/website/website_malayalam/assets/newdashboard/images/banner4_mala.png); /* background-image: url('images/banner4_mala.png'); */ } .banner-item-05{ background-image: url(https://ksrec.kerala.gov.in/website/website_malayalam/assets/newdashboard/images/banner6_mala.png); /* background-image: url('images/banner6_mala.png'); */ } .banner-item-06 { background-image: url(https://ksrec.kerala.gov.in/website/website_malayalam/assets/newdashboard/images/banner3_mala.png); /* background-image: url('images/banner3_mala.png'); */ } .banner-item-02 { background-image: url(https://ksrec.kerala.gov.in/website/website_malayalam/assets/newdashboard/images/BANNERR24.png); /* background-image: url('images/BANNERR24.png'); */ } /* banner123.png */ .custom-heading-black { text-align: -webkit-center; color: white !important; border-radius: 13px; border-bottom: 2px solid #002c61; padding-bottom: 10px; padding-top: 10px; background: linear-gradient(90deg, #332abb, #000000); font-weight: initial; margin-bottom: 1rem; /* Equivalent to Bootstrap’s mb-3 */ } .owl-theme .owl-nav { background-color: #cd4c1e; margin-top: 10px; } .border-bottom { border-bottom: 1px solid #1d4a76 !important; } /* Full flex container */ .flex-container { display: flex; width: 100%; gap: 20px; align-items: flex-start; padding: 0 20px; box-sizing: border-box; } /* Flex ratios */ .flex-5 { flex: 5; } .flex-3 { flex: 3; } .flex-4 { flex: 4; } /* Video */ .video-box video { width: 100%; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.3); } /* Description */ .video-content h2 { margin-top: 1px; font-size: 24px; font-weight: 700; margin-bottom: 39px; } .video-content p { line-height: 1.6; font-size: 16px; margin-bottom: 15px; } /* ========================= TOURISM MODULE (FIXED) ========================= */ .tourism-module { position: relative; padding: 40px 25px; border-radius: 20px; overflow: hidden; color: #fff; } /* Background Image */ .tourism-module .tourism-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } /* Dark overlay for heading visibility */ .tourism-module::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); /* keeps original style but improves readability */ z-index: 2; } /* Keep content above overlay */ .tourism-module > * { position: relative; z-index: 3; } /* Heading */ .tourism-module h4 { font-size: 1.6rem; color: #fff; text-transform: uppercase; letter-spacing: 1px; text-align: center; margin-bottom: 30px; } /* Grid */ .module-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 25px; } /* Tourism Box (Original Style Preserved) */ .tourism-box { color: white; padding: 30px 20px; border-radius: 16px; text-align: center; font-weight: 600; font-size: 1rem; cursor: pointer; transition: all 0.4s ease-in-out; position: relative; overflow: hidden; text-decoration: none; } /* Original Different Colors */ .tourism-box:nth-child(1) { background: linear-gradient(135deg, #66bb6a, #43a047); } .tourism-box:nth-child(2) { background: linear-gradient(135deg, #ef5350, #c62828); } .tourism-box:nth-child(3) { background: linear-gradient(135deg, #29b6f6, #0288d1); } .tourism-box:nth-child(4) { background: linear-gradient(135deg, #ab47bc, #7b1fa2); } .tourism-box:nth-child(5) { background: linear-gradient(135deg, #ffb300, #f57c00); } .tourism-box:nth-child(6) { background: linear-gradient(135deg, #5c6bc0, #283593); } .tourism-box:nth-child(7) { background: linear-gradient(135deg, #d81b60, #880e4f); } .tourism-box:nth-child(8) { background: linear-gradient(135deg, #00897b, #004d40); } /* Icons */ .tourism-box i { font-size: 2.2rem; margin-bottom: 12px; display: block; transition: transform 0.3s ease; } /* Hover Effect (Original) */ .tourism-box:hover { transform: translateY(-10px) scale(1.05); box-shadow: 0px 12px 25px rgba(0,0,0,0.2); } .tourism-box:hover i { transform: rotate(15deg) scale(1.2); } .tourism-box p { margin: 0; font-size: 1rem; letter-spacing: 0.5px; color: white; } /* Responsive */ @media (max-width: 992px) { .tourism-module { padding: 30px 15px; } .tourism-module h4 { font-size: 1.3rem; line-height: 1.4; } .module-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px; } .tourism-box { padding: 22px 12px; font-size: 0.9rem; } .tourism-box i { font-size: 1.8rem; } } .pastel-box { transition: transform 0.3s ease, box-shadow 0.3s ease; border-radius: 12px; color: #002c61; } .pastel-box:hover { transform: translateY(-8px); box-shadow: 0 12px 20px rgba(0, 0, 0, 0.12); } .emoji { font-size: 40px; margin-bottom: 10px; } /* Pastel color classes */ .pastel-pink { background-color: #fde2e4; } .pastel-green { background-color: #e3aa9a; } .pastel-blue { background-color: #dbeafe; } .pastel-purple { background-color: #e0bbf9; } .pastel-grey { background-color: #f9efab; } .pastel-cyan { background-color: #c2f0f7; } .pastel-mint { background-color: #daf5dc; } .pastel-beige { background-color: #fdf6e3; } .pastel-red { background-color: #ffe0e0; } .card-body h5 { font-weight: bold; color: #002c61; } .card-body p { font-size: 0.9rem; color: #555; } /* what do we do */ /* Replaces the former inline max-width + centering */ .constrained-container { max-width: 1440px; margin-left: auto; margin-right: auto; } /* Optional: make sure it behaves well on very wide screens */ @media (min-width: 1441px) { .constrained-container { padding-left: 15px; padding-right: 15px; } } /* Optional: tighter gutters on smaller screens if you want */ @media (max-width: 575px) { .constrained-container { padding-left: 0; padding-right: 0; } } .what-we-do-section { background-image: url(https://ksrec.kerala.gov.in/website/website_malayalam/assets/newdashboard/images/bg5.jpg); /* background-image: url('website/assets/newdashboard/images/bg5.jpg'); */ /* Choose ONE of the path variants below that works on your server: */ /* Variant A - root-relative (usually best for most projects) */ /* background-image: url('/assets/newdashboard/images/bg5.jpg'); */ /* Variant B - if CSS is in /assets/newdashboard/css/ (sibling folder) */ /* background-image: url('../images/bg5.jpg'); */ /* Variant C - full path using your PHP variable (if you must keep logic in CSS) */ /* background-image: url('images/bg5.jpg'); */ font-family: 'Roboto', sans-serif; background-color: #e8f1ff; background-size: cover; background-position: center; background-repeat: no-repeat; padding: 60px 0; } .col-md-12 .what-we-do-title { text-align: center; font-size: 2.5rem; font-weight: 700; color: #ffffff; /* background: yellow; */ margin-bottom: 1.5rem; } .best-features-custom { background-color: #879ab7; margin-top: 0; } .constrained-fluid { max-width: 100%; margin-left: auto; margin-right: auto; } .custom-btn { background-color: #cd4c1e; border-color: #cd4c1e; color: #ffffff; } .custom-btn:hover { background-color: #b84319; border-color: #b84319; color: #ffffff; } .best-features-custom .container-fluid { max-width: 100%; } .career-item { background-color: #ffeee9; } .career-date { font-size: 14px; } .career-title { font-size: 14px; color: #ff0018 !important; font-weight: 500; } .career-description { font-size: 13px; margin-bottom: 0; text-align: justify; } .career-item-light { background-color: #f8f9fa; } .career-description-dark { color: black; } .career-item-success { background-color: #e4ffe5; } .career-title-small { font-size: 14px; color: #ff0018 !important; font-weight: 500; } .career-deadline { font-size: 14px; color: #ff0018 !important; font-weight: 400; } .whats-new-box { font-family: 'Segoe UI', sans-serif; } .whats-new-highlight { background-color: #e4ffe5 !important; } .video-module { background-color: #f3f2fb; position: relative; padding: 40px 0; color: #000000ff; font-family: 'Roboto', sans-serif; } .custom-video { border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .video-title { font-size: 20px; /* Reduced size */ } .video-text { font-size: 14px; /* Reduced paragraph size */ text-align: justify; } .portal-card:nth-child(1) .portal-card-front { background: linear-gradient(135deg, #ff5fd7, #feb47b); } .portal-card:nth-child(2) .portal-card-front { background: linear-gradient(135deg, #43cea2, #185a9d); /* Publications */ } .portal-card:nth-child(3) .portal-card-front { color: white; background: linear-gradient(135deg, #f57c00, #ffb74d); } .portal-card:nth-child(4) .portal-card-front { background: linear-gradient(135deg, #a35bcd, #12001e); color: white; } .abc{ text-align: justify; font-size: 14px; line-height: 1.8; color: #363333; } /* .what-we-do-title { text-align: center; font-size: 2.5rem; font-weight: 700; color: #ffffff !important; margin-bottom: 1.5rem; } */ .what-we-do-section .card-wrapper { height: 100%; /* helps equal height cards in row */ } .what-we-do-section .card { border-radius: 12px; transition: transform 0.4s ease, box-shadow 0.4s ease, background-color 0.4s ease; /* background-color: #c0d3a1; */ height: 100%; border: none; padding: 25px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); margin: 15px; } .what-we-do-section .card:hover { transform: translateY(-10px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12); } /* Per-card hover color themes */ .what-we-do-section .card:nth-child(1):hover { background-color: #e3f2fd; } .what-we-do-section .card:nth-child(2):hover { background-color: #fff3e0; } .what-we-do-section .card:nth-child(3):hover { background-color: #ede7f6; } .what-we-do-section .card:nth-child(4):hover { background-color: #e8f5e9; } .what-we-do-section .card:nth-child(5):hover { background-color: #fce4ec; } .what-we-do-section .card:nth-child(6):hover { background-color: #e0f7fa; } .what-we-do-section .card:nth-child(7):hover { background-color: #f1f8e9; } .what-we-do-section .card:nth-child(8):hover { background-color: #f3e5f5; } .what-we-do-section .card:nth-child(9):hover { background-color: #ffebee; } .what-we-do-section .card-body { text-align: center; padding: 0; } .what-we-do-section .card-body div:first-child { font-size: 48px; margin-bottom: 15px; } .what-we-do-section h5 { color: #002c61; font-weight: bold; margin-bottom: 10px; } .what-we-do-section p { text-align: justify; color: #000000; font-size: .7rem; line-height: 1.6; } /* Responsive spacing */ @media (min-width: 992px) { .what-we-do-section .col-lg-4 { flex: 0 0 31.5%; max-width: 31.5%; } } @media (max-width: 991px) { .what-we-do-section .col-md-6 { flex: 0 0 48%; max-width: 48%; } } @media (max-width: 575px) { .what-we-do-section .col-sm-12 { flex: 0 0 100%; max-width: 100%; } .what-we-do-section .card { margin: 10px 0; } } @keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } /* */ .highlights-slider { background: linear-gradient(135deg, #fff5f7, #fce8ff); border-radius: 15px; /* padding: 15px; */ box-shadow: 0 4px 20px rgba(0,0,0,0.08); } .gradient-caption { font-weight: bold; font-size: 1.2rem; margin-bottom: 15px; background: linear-gradient(45deg, #ff6f61, #d63f8a); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .highlights-carousel .highlight-item { position: relative; overflow: hidden; border-radius: 12px; } .highlights-carousel .highlight-item img { width: 100%; height: 415px; object-fit: contain; display: block; } .highlights-carousel .highlight-item img.contain-img { object-fit: contain; } .highlight-caption { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.5); padding: 10px 15px; color: #fff; font-weight: 500; font-size: 1rem; } .highlights-carousel .owl-nav button { position: absolute; top: 40%; background: rgba(255,255,255,0.7); border-radius: 50%; width: 35px; height: 35px; } .highlights-carousel .owl-nav .owl-prev { left: -15px; } .highlights-carousel .owl-nav .owl-next { right: -15px; } .highlights-carousel .owl-dots .owl-dot span { background: #ff6f61; } .portal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .portal-card { position: relative; height: 210px; /* increased height */ perspective: 1000px; } .portal-card-inner { position: relative; width: 100%; height: 100%; transition: transform 0.6s; transform-style: preserve-3d; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); } .portal-card:hover .portal-card-inner { transform: rotateY(180deg); } .portal-card-front, .portal-card-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 12px; padding: 40px; color: #000000; display: flex; flex-direction: column; justify-content: space-between; } .portal-card-back { background: linear-gradient(135deg, #1f4037, #99f2c8); /* background: linear-gradient(135deg, #ff4b1f, #1fddff); */ transform: rotateY(180deg); } .portal-icon { position: absolute; bottom: 15px; right: 15px; font-size: 60px; /* opacity: 0.2; */ } .portal-title { font-weight: bold; text-transform: uppercase; font-size: 1.1rem; } .portal-desc { font-size: 0.9rem; } .portal-link { font-weight: bold; text-transform: uppercase; font-size: 0.85rem; } .acc-tender { background: #f5e7fb !important; } .acc-eoi { background: rgb(246, 255, 247) !important; } .acc-quotation { background: rgb(255, 241, 232) !important; } .acc-circular { background: rgb(255, 217, 238) !important; } .acc-notice { background: rgb(235, 229, 199) !important; } .acc-result { background: #f5e7fb !important; } .acc-archive { background: #f0f4f8 !important; } .acc-download { background: #eef7ff !important; } .carousel-caption { background-color: #709eff; position: absolute; right: 15%; bottom: 20px; left: 15%; z-index: 10; padding-top: 20px; padding-bottom: 20px; color: #000000; text-align: center; } .carousel-control-next, .carousel-control-prev { position: absolute; top: 0; bottom: 0; display: -ms-flexbox; display: flex ; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; width: 15%; color: #fff; text-align: center; opacity: -.5; } .accordion-gallery-section { padding: 40px 0; /* background: linear-gradient(135deg, #f7f9fc, #e6f2ef); */ background: linear-gradient(135deg, #ffffff, #e6f2ef) } .accordion-container { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.08); } .accordion-item { border-bottom: 1px solid #ddd; } .accordion-header { background: linear-gradient(90deg, #332abb, #000000); color: white; padding: 15px 18px; font-size: 16px; border: none; cursor: pointer; width: 100%; text-align: left; transition: all 0.3s ease; } .accordion-header:hover { background: linear-gradient(90deg, #000000, #00a97f); transform: scale(1.01); } .accordion-content { max-height: 0; overflow: hidden; background: #f9f9f9; transition: max-height 0.3s ease, padding 0.3s ease; } .accordion-content ul { margin: 0; padding: 10px 20px; list-style: none; } .accordion-content li { padding: 6px 0; } .accordion-content a { text-decoration: none; color: #333; } .accordion-content a:hover { color: #ff6600; } .gradient-caption { font-size: 1.5rem; font-weight: bold; background: linear-gradient(90deg, #2f00ff, #ee0979); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 15px; } .events-gallery { background: #e5e5ff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.08); padding: 15px; } .events-gallery .carousel-item img { width: 100%; height: 420px; object-fit: cover; border-radius: 8px; } .project-showcase { padding: 40px 20px; max-width: 2375px; /* max-width: 1800px; More stretched width */ margin: 0 auto; /* background: linear-gradient(135deg, #f0f4f8, #dbe6f6); */ background:linear-gradient(135deg, #efebeb, #f1d1d1); border-radius: 8px; } .section-title { text-align: center; margin-bottom: 20px; font-size: 28px; font-weight: bold; color: #b90101; } .filter-buttons { text-align: center; margin-bottom: 25px; } .filter-btn { background: #315af3; color: white; border: none; padding: 10px 20px; margin: 0 6px; cursor: pointer; border-radius: 14px; transition: background 0.3s, transform 0.2s; } .filter-btn:hover, .filter-btn.active { background: #002d5a; transform: translateY(-2px); } .projects-flex { /* animation: scrollLinks 50s linear infinite; */ display: flex; flex-wrap: wrap; justify-content: center; gap: 50px; /* Adjust spacing */ } .project-card p { /* padding-top: 1px; */ padding-left: 21px; padding-right: 19px; TEXT-ALIGN: justify; /* font-family: 'Roboto'; */ margin-bottom: 0px; font-size: 12px; font-weight: 200; color: #000000; line-height: 27px; } .project-card { background: #fff; border: 1px solid #ddd; border-radius: 6px; overflow: hidden; width: 490px; /* Consistent card size */ height: 420px; text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease; } .project-card:hover { transform: translateY(-6px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); } .project-card img { background-color: #b90101; /* width: 100%; */ width:492px; height: 285px; /* Fixed height for uniform look */ /* width: 520px; height: 286px; */ object-fit: contain; /* Ensures images scale proportionally without distortion */ display: block; } .proj-card-title { /* Custom class to avoid conflicts */ padding: 12px; font-size: 21px; margin: 0; font-weight: bold; color: #000000ff; background: linear-gradient(90deg, #ffeded, #ffffff); letter-spacing: 0.5px; } .project-card.hidden { display: none; } .quick-links-container { /* background: #c97f72; */ padding: 20px; /* increased from 10px */ border-radius: 12px; overflow: hidden; text-align: center; margin: 20px auto; /* spacing around the container */ max-width: 100%; /* ensures responsiveness */ } .quick-links-slider { display: flex; gap: 50px; /* more space between logos */ animation: scrollLinks 25s linear infinite; align-items: center; padding: 10px 0; } .quick-links-slider a img { max-height: 110px; /* increased from 50px */ transition: transform 0.3s ease-in-out; } .quick-links-slider a:hover img { transform: scale(1.1); } @keyframes scrollLinks { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } .whats-new-list span { color: #000 !important; } /* footer */ /* ===== KSREC Footer ===== */ .ksrec-footer { background: linear-gradient(135deg, #0b1e36, #002d5a); color: #fff; font-size: 1.1rem; } .footer-title { font-size: 1.3rem; padding-bottom: 21px; } .footer-address { font-size: 1.05rem; line-height: 1.6; color: white; margin-bottom: 15px; text-align: justify; } /* Footer container */ .footer-container { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; padding: 50px 20px; max-width: 1400px; margin: auto; flex-wrap: wrap; /* responsive wrapping */ } .footer-col { flex: 1; min-width: 200px; color: white; } .institution { flex: 1.5; } .map-col { flex: 1.2; max-width: 400px; } .map-wrapper { border-radius: 8px; overflow: hidden; } .footer-heading { font-weight: 600; text-transform: uppercase; margin-bottom: 15px; border-bottom: 2px solid #ffcc00; display: inline-block; padding-bottom: 5px; font-size: 1.15rem; } .footer-links { list-style: none; padding: 0; margin: 0; } .footer-links li { margin-bottom: 8px; font-size: 1.05rem; } .footer-links a { color: #ddd; text-decoration: none; transition: all 0.3s ease; } .footer-links a:hover { color: #ffcc00; padding-left: 5px; } .contact-inline { margin-top: 10px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; font-size: 1.05rem; } .contact-inline i { margin-right: 8px; color: #ffcc00; } .footer-bottom { text-align: center; padding: 15px; background-color: #cd4c1e; font-size: 1.05rem; } /* Responsive */ @media (max-width: 992px) { .footer-container { flex-direction: row; gap: 30px; } } @media (max-width: 768px) { .footer-container { flex-direction: column; text-align: center; } .footer-col { min-width: 100%; } .map-col { max-width: 100%; } .contact-inline { justify-content: center; } }