/* Font Family */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box
}
/* Bolier Plate */
input,
textarea,
select, option, button{
font-family: "Hanken Grotesk", sans-serif !important;
}
.text-custom{
color: #111111;
}
.d-flex {
display: flex;
}
.d-none {
display: none !important;
}
.js {
justify-content: space-between;
}
.al {
align-items: center;
}
.alb {
align-items: baseline !important;
}
.je {
justify-content: end !important;
}
.jc {
justify-content: center;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.ja {
justify-content: space-around;
}
.flex-column {
flex-direction: row;
}
body {
scroll-behavior: auto;
font-family: "Hanken Grotesk", sans-serif !important;
}
span{
color: #333333 !important;
font-family: "Hanken Grotesk", sans-serif !important;
}
.txt-333{
color: #111111 !important;
}
ol,
ul,
dl {
margin-top: 0;
margin-bottom: 0rem;
}
ol,
ul {
padding-left: 0;
}
a {
text-decoration: none !important;
}
.container-fluid {
width: 93%;
margin: auto;
}
.container {
width: 70%;
margin: auto;
}
.container-80{
width: 80%;
margin: auto;
}
.txt-center {
text-align: center !important;
}
.txt-start {
text-align: left !important;
}
.text-end {
text-align: right !important;
}
.mt-0 {
margin-top: 0px !important;
}
.mt-10 {
margin-top: 10px !important;
}
.mt-15 {
margin-top: 15px !important;
}
.mt-20 {
margin-top: 20px !important;
}
.mt-30 {
margin-top: 30px !important;
}
.mt-40 {
margin-top: 40px !important;
}
.mt-50 {
margin-top: 50px !important;
}
.mt-60 {
margin-top: 60px !important;
}
.mt-70 {
margin-top: 70px !important;
}
.mt-80 {
margin-top: 80px !important;
}
.pt-120 {
padding-top: 120px !important;
}
.mt-120 {
margin-top: 120px !important;
}
.my-120 {
margin: 120px 0px;
}
.mt-150 {
margin-top: 150px !important;
}
.my-80 {
margin: 40px 0px 80px 0px;
}
.mb-10 {
margin-bottom: 10px !important;
}
.mb-20 {
margin-bottom: 20px !important;
}
.mb-30 {
margin-bottom: 30px !important;
}
.mb-40 {
margin-bottom: 40px !important;
}
.mb-50 {
margin-bottom: 50px !important;
}
.mb-60 {
margin-bottom: 60px !important;
}
.mb-70 {
margin-bottom: 70px !important;
}
.ms-205 {
margin-left: 205px;
}
.ms-307 {
margin-left: 307px;
}
.my-50{
margin-top: 50px;
margin-bottom: 50px;
}
.w-60 {
width: 60%;
}
.mx-auto {
margin: 0px auto;
}
.my-30 {
margin: 30px 0px;
}
.gap-50{
gap: 50px !important;
}
.gap-75 {
gap: 75px;
}
.gap-80 {
gap: 80px;
}
.pt-10 {
padding-top: 10px !important;
}
.pt-20 {
padding-top: 20px !important;
}
.pt-30 {
padding-top: 30px !important;
}
.pt-40 {
padding-top: 40px !important;
}
.pt-50 {
padding-top: 50px !important;
}
.pt-60 {
padding-top: 60px !important;
}
.pt-70 {
padding-top: 70px !important;
}
.pt-80{
padding-top: 80px !important;
}
.pt-170{
padding-top: 170px !important;
}
.pb-10 {
padding-bottom: 10px !important;
}
.pb-20 {
padding-bottom: 20px !important;
}
.pb-30 {
padding-bottom: 30px !important;
}
.pb-40 {
padding-bottom: 40px !important;
}
.pb-50 {
padding-bottom: 50px !important;
}
.pb-60 {
padding-bottom: 60px !important;
}
.pb-70 {
padding-bottom: 70px !important;
}
.pl-50 {
padding-left: 50px !important;
}
.pl-40 {
padding-left: 40px !important;
}
.pl-30 {
padding-left: 30px !important;
}
.pl-20 {
padding-left: 20px !important;
}
.pl-10 {
padding-left: 10px !important;
}
.pr-50 {
padding-right: 50px !important;
}
.pr-40 {
padding-right: 40px !important;
}
.pr-30 {
padding-right: 30px !important;
}
.pr-20 {
padding-right: 20px !important;
}
.pr-10 {
padding-right: 10px !important;
}
.pb-0 {
padding-bottom: 0px !important;
}
.pr-0 {
padding-right: 0px !important;
}
.pt-0 {
padding-top: 0px !important;
}
.pl-0 {
padding-left: 0px !important;
}
.pr-0 {
padding-right: 0px !important;
}
.fs-14 {
font-size: 14px !important;
}
.fs-13 {
font-size: 13px !important;
}
.fs-12 {
font-size: 12px !important;
}
.mr-5{
margin-right: 5px;
}
h3 {
font-weight: 400 !important;
font-size: 50px;
color: #111111;
line-height: 64px;
}
h4 {
font-weight: 400;
font-size: 32px;
line-height: 42px;
}
/* common color */
.medium-vermilion {
background-color: #CF6737 !important;
}
.silver-lake-blue {
background-color: #0780C3 !important;
}
.forest-green {
background-color: #65AC62 !important;
}
.jasmine-yellow {
background-color: #F9DA78 !important;
}
.transition-resilience {
background-color: #6E62A2;
}
.txt-medium-vermilion {
color: #CF6737 !important;
}
.txt-silver-lake-blue {
color: #5E90C3 !important;
}
.txt-forest-green {
color: #65AC62 !important;
}
.txt-jasmine-yellow {
color: #F9DA78 !important;
}
.txt-transition-resilience {
color: #6E62A2;
}
/* Header Css */
header {
box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 4px -1px;
z-index: 99999;
position: sticky;
top: 0;
background: #fff;
width: 100%;
}
.header-bar {
padding: 25px 0px;
}
.br-vertical {
background: black;
height: 50px;
display: block;
width: 1px;
}
.nav-link {
margin: 10px 5px 10px 80px;
display: inline-block;
font-weight: 500;
font-size: 17px;
color: #111111;
text-decoration: none;
line-height: 14px;
transition: 0.3s ease;
}
.nav-active.active {
transition: 0.3s ease;
padding-top: 10px !important;
padding-bottom: 10px !important;
color: #CF6737 !important;
border-bottom: solid 2px #CF6737 ;
}
.nav-drop {
display: flex;
list-style: none;
}
.nav-drop li {
position: relative;
}
.nav-drop a:hover {
color: #CF6737;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #fff;
width: 650px;
box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
border-radius: 8px;
top: 52px;
left: -15px;
z-index: 10;
padding: 0;
}
.center-tab {
justify-content: center;
display: grid;
}
.end-tab {
margin-right: 35px;
justify-content: end;
display: grid;
}
.drop-2 {
position: absolute;
top: 52px;
left: -130px !important;
width: 450px;
padding: 10px 0px;
}
.drop-3 {
position: absolute;
top: 52px;
left: -350px !important;
width: 550px;
padding: 10px 0px;
}
.dropdown.active .dropdown-content {
display: block;
padding-bottom: 25px;
}
.tabs {
margin: 10px 22px;
display: flex;
border-bottom: 1px solid #ddd;
}
.tab-link {
flex: 1;
background: none;
font-weight: 400;
border: none;
padding: 10px 15px;
line-height: 24px;
font-size: 18px;
color: #111111;
cursor: pointer;
position: relative;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
transition: color 0.3s;
}
.tab-link:hover {
color: #CF6737;
}
.tab-link:not(.active):hover::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 2px;
background-color: #CF6737;
transition: width 0.3s;
}
.tabs .tab-link.active {
color: #CF6737 !important;
transition: none;
}
.tabs .tab-link.active::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 2px;
background-color: #CF6737;
}
.arrow i{
display: inline-block;
margin-left: 5px;
transition: transform 0.3s ease;
}
.tab-link.active .arrow i {
transform: rotate(180deg);
color: #CF6737;
}
.tab-pane {
display: none;
}
.tab-pane.active {
display: block;
}
.tab-pane ul {
list-style: none;
}
.tab-pane ul li {
margin: 5px 0;
}
.tab-pane ul li a {
font-weight: 600;
color: #111111;
padding: 5px 0;
display: block;
}
.tab-pane ul li a:hover {
color: #CF6737;
}
body > *:not(.desktop-header) {
transition: filter 0.3s ease;
filter: none; /* default */
}
body.page-blur > *:not(.desktop-header) {
filter: blur(5px);
}
/* hero-section */
.hero-heading h1 {
font-weight: 400;
font-size: 50px;
line-height: 64px;
padding-top: 20px;
padding-bottom: 35px;
}
.pt-animation{
padding-top: 80px !important;
}
.blocks {
display: flex;
justify-content: center;
align-items: center;
}
.hero-oval {
width: 600px;
height: 250px;
border-radius: 120px;
overflow: hidden;
}
.px-60{
padding: 0px 60px;
}
.hero-oval img {
width: 100%;
height: 100%;
object-fit: cover;
}
.block img {
width: 100%;
height: 100%;
}
/*Common Button css */
.btn-main {
font-family: "Hanken Grotesk", sans-serif !important;
cursor: pointer !important;
border: none !important;
text-decoration: none;
background-color: #00355C;
color: #fff !important;
padding: 8px 34px;
border-radius: 50px;
font-weight: 500;
font-size: 20px;
transition: 0.5s;
}
.btn-main:hover {
cursor: pointer !important;
transition: 0.5s;
background-color: #CF6737 !important;
}
.btn-main-2:hover {
cursor: pointer !important;
transition: 0.5s;
background-color: #CF6737 !important;
}
.btn-main-2{
cursor: pointer !important;
text-decoration: none;
background-color: #00355C;
color: #fff !important;
padding: 8px 20px;
border-radius: 50px;
font-weight: 500;
font-size: 20px;
}
.btn-outline {
text-decoration: none;
color: #fff;
border: 1.5px solid #fff;
padding: 8px 20px;
font-size: 20px;
font-weight: 500;
line-height: normal;
border-radius: 50px;
}
.services-section-heading {
width: 40%;
}
.services-section-paragraph {
width: 60%;
}
.services-section-heading h2 {
font-weight: 400 !important;
font-size: 50px;
color: #111111;
line-height: 64px;
}
.services-section-paragraph p {
font-size: 32px;
line-height: 42px;
font-weight: 400;
color: #111111;
}
.services-card-section {
gap: 20px;
}
.service-card {
display: flex;
flex-direction: column;
flex-grow: 1;
padding: 20px;
width: 277px;
height: 372px;
border-radius: 20px;
}
.service-card a {
align-self: self-start;
margin-top: auto;
}
.service-card h3 {
font-weight: 400;
font-size: 28px;
line-height: normal;
color: #fff;
}
.service-card p {
margin-top: 13px;
line-height: 32px;
font-weight: 400;
font-size: 20px;
color: #fff;
}
.laptop-upevent-view {
display: block;
}
.mobile-upevent-view {
display: none;
}
.mobile-view-event {
display: none !important;
}
.laptop-events {
display: block !important;
}
.captailize{
text-transform: uppercase ;
}
.txt-pastevt {
color: #000000 !important;
}
.bg-pastevt {
background-color: #C9D2D7 !important;
}
.event-head{
font-weight: 400 !important;
font-size: 32px !important;
line-height: 40px !important;
color: #11111 !important;
}
.upcoming-evnts h3 {
font-weight: 400 !important;
font-size: 50px;
color: #111111;
line-height: 64px;
}
.upcoming-evnts-card {
overflow: hidden;
border-radius: 24px;
position: relative;
background-color: #F9F7F1;
padding: 24px;
}
.upcoming-evnts-card h4 {
font-weight: 400;
font-size: 28px;
line-height: normal;
}
.upcoming-evnts-card span {
text-transform: uppercase;
font-size: 12px;
line-height: 20px;
font-weight: 700;
}
.upcoming-evnts-card p {
color: #333333;
font-size: 20px;
line-height: 32px;
font-weight: 400;
}
.categories {
margin-right: 8px;
font-weight: 400 !important;
text-transform: capitalize !important;
line-height: 20px !important;
font-size: 14px !important;
padding: 5px 12px;
border: 0.094rem solid #C6C6C6;
border-radius: 24px;
color: #333333 !important;
}
.categories span {
font-size: 14px;
font-weight: 400;
color: #333333 !important;
}
.upcoming-evnts-icn-1 {
position: absolute;
bottom: 0px;
left: 0px;
}
.upcoming-evnts-icn-2 {
width: 50px;
position: absolute;
top: 0px;
right: 0px;
}
.research-report-content {
width: 55%;
}
.research-report-content p {
color: #333333;
font-weight: 400;
font-size: 20px;
line-height: 32px;
}
.research-report-img {
position: relative;
display: inline-block; /* Keeps the container size based on the image */
text-align: center;
width: 40%;
}
.research-report-img img {
height: 330px;
border-radius: 24px !important;
width: 100%;
object-fit: cover;
}
.circle {
z-index: -9999;
position: absolute;
width: 200px; /* Adjust size as needed */
height: 200px; /* Adjust size as needed */
background: #F9DA78; /* Yellow with transparency, adjust color as needed */
border-radius: 100%;
}
.top-circle {
top: -50px; /* Half of circle height to center above image */
left: 50%;
transform: translateX(-50%); /* Centers the circle horizontally */
}
.bottom-circle {
bottom: -50px; /* Half of circle height to center below image */
left: 50%;
transform: translateX(-50%); /* Centers the circle horizontally */
}
.lastest-news {
padding: 80px 0px 110px 0px;
}
.categories-2 {
text-transform: capitalize;
padding: 5px 12px;
border: 1.5px solid #666666;
border-radius: 24px;
color: #333333 !important;
}
.lastest-heading {
width: 40%;
}
.lastest-paragraph {
width: 56%;
}
.lastest-heading h4 {
font-size: 28px;
font-weight: 400;
}
.lastest-paragraph p {
font-size: 20px !important;
line-height: 32px !important;
font-weight: 400 !important;
color: #333333;
}
.bg-bluish {
background-color: #ABCEDC;
}
.hr-linebb{
display: block;
width: 100%;
margin-top: 50px;
margin-bottom: 50px;
opacity: 30%;
background-color: #00528D;
height: 2px;
text-align: center;
}
.hr-line {
display: block;
width: 100%;
margin-top: 50px;
margin-bottom: 50px;
opacity: 30%;
background-color: #00528D;
height: 2px;
text-align: center;
}
.hr-line-blog {
display: block;
width: 100%;
margin: 40px auto;
opacity: 30%;
background-color: #00528D;
height: 2px;
text-align: center;
}
.blog-icn{
width: 18px !important;
height: 18px !important;
}
.hr-line-footer {
display: block;
width: 100%;
margin-top: 30px;
opacity: 30%;
background-color: #fff;
height: 1px;
text-align: center;
}
.hr-line-2 {
display: block;
width: 100%;
margin-top: 16px;
margin-bottom: 16px;
opacity: 30%;
background-color: #00528D;
height: 1px;
text-align: center;
}
.lastest-icn {
position: absolute;
bottom: 0px;
right: 0px;
}
.on-ground-card {
background-color: #F9F7F1;
padding: 16px 12px;
border-radius: 24px;
}
.on-ground-content h4 {
font-weight: 400;
font-size: 28px;
color: #111111;
}
.on-ground-content p {
color: #333333;
font-size: 20px;
font-weight: 400;
line-height: 32px;
}
.positive-relative {
position: relative;
}
.onthe-ground-icn {
position: absolute;
top: -120px;
left: 0px;
}
.updates-content {
width: 40%;
}
.updates-paragraph {
width: 55%;
}
.updates-paragraph p {
font-size: 20px;
line-height: 32px;
font-weight: 400;
color: #333333;
}
/* data */
.data-main{
width: 33%;
}
.data-arrow{
width: 20px !important ;
height: 20px !important;
margin: auto !important;
}
.data-card {
background-color: #F9DA78;
padding: 50px;
border-radius: 24px;
text-align: center;
}
.data-50 {
width: 50% !important;
}
.data p {
font-size: 20px;
line-height: 32px;
font-weight: 400;
color: #333333;
}
.data-card h4 {
font-size: 28px;
color: #111111;
font-weight: 400;
}
.gap-20 {
gap: 20px;
}
.data-card p {
font-size: 20px;
line-height: 32px;
font-weight: 400;
color: #333333;
}
.data-card i {
font-size: 20px;
color: #111111;
}
footer {
background-color: #00355C;
padding: 50px 0px;
}
.social-icn {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid ;
border-color: rgb(255, 255, 255 , 0.5 );
color: #fff;
font-size: 16px;
width: 50px;
height: 50px;
border-radius: 50px;
margin: 0px 5px;
}
.footer-nav {
margin-top: 30px;
}
.footer-nav h3 {
font-weight: 600 !important;
margin-bottom: 10px !important;
font-size: 24px !important;
line-height: 32px !important;
color: #fff !important;
}
.footer-nav li {
padding: 10px 0px;
}
.footer-nav-links {
text-decoration: none;
color: #fff;
opacity: 75%;
font-size: 18px;
font-weight: 400 !important;
}
.footer-nav-content p {
font-size: 20px;
font-weight: 400;
color: #fff;
}
.footer-nav-content span {
font-size: 16px;
font-weight: 400;
display: inline-block;
margin-top: 10px;
color: #fff !important;
}
.footer-nav-content h4 {
font-size: 18px;
font-weight: 600;
line-height: 32px;
color: #fff;
}
.column-3 {
width: 20%;
}
.column-4 {
width: 30%;
}
.footer-map-icn {
width: 36px;
height: 36px;
}
.footer-sub-content a {
font-size: 16px;
color: #fff;
opacity: 75%;
}
.footer-sub {
background-color: #19486B;
padding: 20px 0px;
}
.footer-copyright p {
color: #fff !important;
opacity: 50%;
font-size: 14px;
font-weight: 400;
}
.footer-copyright p a {
color: #fff !important;
}
/* Container for the animation */
.line-container {
position: relative;
width: 100%;
padding-bottom: 60px;
/* Position it in the middle of the viewport initially */
}
/* The main horizontal line */
.main-line {
position: absolute;
top: 50%;
left: 0;
height: 2px;
background-color: #00528D;
width: 0;
/* Start with 0 width, will animate to 100% */
opacity: 0;
/* Start with 0 opacity, will fade in */
}
/* The branch line */
.branch-line {
position: absolute;
top: 50%;
left: 10%;
/* Branch starts after 10% of the main line */
width: 2px;
height: 0;
/* Start with 0 height, will animate downward */
background-color: #00528D;
opacity: 0;
/* Start with 0 opacity, will fade in */
}
/* The oval button at the end of the branch */
.oval-button {
position: absolute;
top: 50%;
left: 10%;
transform: translate(-50%, 50px);
/* Center the button horizontally on the branch */
width: 173px;
height: 40px;
background-color: #F9DA78;
border-radius: 24px;
display: flex;
text-transform: uppercase;
align-items: center;
justify-content: center;
color: #111111;
font-size: 14px;
font-weight: 600;
opacity: 0;
/* Start hidden, will fade in */
}
/* Start and end markers (for visual reference) */
/* .start-point,
.end-point {
position: absolute;
top: 50%;
width: 10px;
height: 10px;
background-color: #333;
border-radius: 50%;
transform: translateY(-50%);
} */
.start-point {
left: 0;
}
.end-point {
right: 0;
}
/* on the ground change */
.on-ground-content{
width: 60%;
}
.on-ground-img{
width: 40%;
}
.publication-img{
width: 50%;
}
.publication-img img{
width: 100%;
height: 450px;
}
.card-content{
width: 50%;
}
.on-ground-img img{
width: 100%;
height: 298px ;
border-radius: 24px;
}
.otg-btn {
transform: translate(-50%, -40px) !important;
left: 50% !important;
}
.otg-branchline {
transform: translateY(-120px) !important;
left: 50%;
}
.otg-mainline {
transform: translateY(-120px) !important;
}
/* main line animation */
.service-animate-line{
transform: translateY(-30px) !important;
}
.service-animate-btn {
transform: translate(-50%, 19px) !important;
}
.service-animate-btn-2 {
left: 80% !important;
transform: translate(0%, -40px) !important;
}
.service-animate-line2{
left: 86% !important;
transform: translateY(-90px) !important;
}
.service-animatemain{
transform: translateY(-90px) !important;
}
/* electricity animation chnage */
.elc-line {
background-color: #CF6737 !important;
}
.accordion-icon i{
font-size: 28px ;
color: #00355C;
}
.elc-btn {
background-color: transparent !important;
border: solid 1px #CF6737 !important;
color: #CF6737 !important;
}
.elc-line-2 {
background-color: #CF6737 !important;
}
.elc-btn-2 {
background-color: transparent !important;
border: solid 1px #CF6737 !important;
color: #CF6737 !important;
}
.elc-main-2 {
background-color: #CF6737 !important;
}
/* transition resilience animation */
.tr-mnline{
background-color: #6E62A2 !important;
}
.tr-line {
background-color: #6E62A2 !important;
}
.tr-pad-40 {
padding-bottom: 80px;
}
.tr-top-15 {
position: absolute !important;
top: 23% !important;
}
.tr-btn {
background: transparent !important;
border: solid 1px #6E62A2 !important;
color: #6E62A2 !important;
}
/* low carbon pathways animation */
.lcp-line {
background-color: #0780C3 !important;
}
.lcp-btn {
background-color: transparent !important;
border: solid 1px #0780C3 !important;
color: #0780C3 !important;
}
.lcp-line-2 {
background-color: #0780C3 !important;
}
.lcp-btn-2 {
background-color: transparent !important;
border: solid 1px #0780C3 !important;
color: #0780C3 !important;
}
.lcp-main-2 {
background-color: #0780C3 !important;
}
/* inclusive renewables */
.ir-line {
background-color: #65AC62 !important;
}
.ir-btn {
background-color: transparent !important;
border: solid 1px #65AC62 !important;
color: #65AC62 !important;
}
.ir-line-2 {
background-color: #65AC62 !important;
}
.ir-btn-2 {
background-color: transparent !important;
border: solid 1px #65AC62 !important;
color: #65AC62 !important;
}
.ir-main-2 {
background-color: #65AC62 !important;
}
.contact-container {
display: flex;
max-width: 80%;
margin: 0 auto;
background-color: #fff;
overflow: hidden;
}
/* Left Section: Contact Form */
.contact-form {
width: 45%;
}
.contact-form-p1{
font-weight: 600;
font-size: 20px;
color: #333333;
line-height: 32px;
margin-bottom: 20px;
}
.contact-form-p2{
font-weight: 400 important;
font-size: 20px;
color: #333333;
line-height: 32px;
margin-bottom: 20px;
}
.contact-form form {
display: flex;
flex-direction: column;
}
.contact-form label {
font-size: 14px;
color: #111111;
margin-bottom: 5px;
}
.name-inputs {
display: flex;
gap: 20px;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
font-family: "Hanken Grotesk", sans-serif !important;
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 14px;
}
.career-inp:-webkit-autofill{
-webkit-box-shadow: 0 0 0px 1000px #D1E6D0 inset !important;
box-shadow: 0 0 0px 1000px #D1E6D0 inset !important;
-webkit-text-fill-color: #000 !important;
transition: background-color 5000s ease-in-out 0s;
}
.contact-form input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset !important;
box-shadow: 0 0 0px 1000px white inset !important;
-webkit-text-fill-color: #000 !important;
transition: background-color 5000s ease-in-out 0s;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
color: #aaa;
}
.contact-form select {
appearance: none;
background: url('data:image/svg+xml;utf8,') no-repeat right 10px center;
background-size: 12px;
}
.contact-form textarea {
resize: none;
}
.contact-form button {
width: 131px;
}
/* Right Section: Image and Contact Info */
.image-container img {
border-radius: 15px;
/* Rounded corners for the image */
display: block;
width: 100%;
height: 60%;
object-fit: cover;
}
.info-text {
padding: 30px 0px 0px 30px;
background-color: #fff;
}
.info-text h3 {
font-size: 28px;
line-height: 40px;
color: #000000;
font-weight: 100;
}
.info-text p {
font-size: 20px;
line-height: 32px;
color: #000000;
margin-bottom: 10px;
}
.contact-email {
padding: 16px 0px;
display: flex;
gap: 10px;
align-items: center;
}
.contact-email i {
color: #00355C;
border: solid #BFCCD6 1.5px;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
border-radius: 50%;
}
.social-icons i {
color: #00355C;
border: solid #BFCCD6 1.5px;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
border-radius: 50%;
}
.ico {
cursor: pointer;
color: #000000;
padding: 10px;
font-size: 20px;
}
.uploader{
cursor: pointer !important;
}
.w-100 {
width: 100% !important;
}
.info-text .social-icons {
display: flex;
gap: 15px;
margin: 10px 0;
}
.info-text .media-inquiries {
font-size: 20px;
line-height: 32px;
font-weight: 400;
color: #000000;
padding: 10px 0px;
}
.info-text .media-inquiries a {
color: #00355C;
text-decoration: none;
}
.info-text .media-inquiries a:hover {
text-decoration: underline;
}
.txt-black {
color: #000000;
}
.text-left {
text-align: left;
}
.team-section p {
font-size: 1.2rem;
color: #111111;
text-align: left;
margin-bottom: 40px;
}
.team-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
flex-wrap: wrap;
}
.team-icons {
display: flex;
justify-content: left;
gap: 15px;
}
.team-icons i {
color: #00355C;
border: solid #BFCCD6 1.5px;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
border-radius: 50%;
}
.team-icn{
width: 70px;
height: 70px;
}
.team-container2 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
flex-wrap: wrap;
}
.team-card {
background-color: #fff;
border-radius: 24px;
border: solid #B3C3CE 0.094rem;
width: 100%;
height: auto;
text-align: center;
margin-top: 20px;
padding: 24px 24px 32px 24px;
}
.team-card img {
width: 100%;
height: 246px;
object-fit: cover;
border-radius: 16px;
}
.team-card h3 {
font-weight: 500 !important;
font-size: 20px;
color: #000000;
text-align: left;
line-height: 28px;
}
.team-card p {
font-weight: 400;
line-height: 28px;
color: #111111;
font-size: 16px;
text-align: left;
}
.social-icons {
display: flex;
justify-content: left;
gap: 15px;
}
.social-icons a {
color: #666;
font-size: 1.2rem;
transition: color 0.3s ease;
}
.left-cont {
width: 75%;
}
.book-cover{
width: 162px;
height: 216px;
}
.left-cont h2 {
font-size: 28px;
line-height: 42px;
font-weight: 400;
}
.right-cont {
text-align: end !important;
}
.pt-lg-70{
padding-top: 60px !important;
}
.pb-lg-30{
padding-bottom: 30px !important;
}
.pt-lg-100{
padding-top: 100px;
}
.service-1 {
width: 100%;
/*height: 385px;*/
}
.service-1 img {
width: 100%;
/*height: 385px;*/
}
.box-left-top {
position: relative;
}
.box-top {
margin-top: -70px;
padding: 24px;
border-radius: 20px;
width: 100%;
height: 350px !important;
}
.Elec-Gov {
color: #fff;
line-height: 64px;
font-size: 50px;
font-weight: 400;
}
.Elec-Gov-p {
color: #fff;
line-height: 32px;
font-size: 20px;
font-weight: 400;
}
.Elec-Gov-right-box-p {
font-size: 20px;
color: #333333;
line-height: 32px;
font-weight: 400;
}
.WWD {
font-size: 50px;
}
.WWD-box {
position: relative;
padding: 40px;
background-color: #F9F7F1;
border-radius: 20px;
}
.wwd-content-box {
width: 50%;
}
.WWD-box-h4 {
width: 62%;
color: #111111;
font-weight: 400;
font-size: 28px;
}
.WWD-box-p {
width: 90%;
color: #111111;
font-size: 20px;
line-height: 32px;
font-weight: 400;
}
.in-focus-pos {
position: absolute;
z-index: 1;
left: -85px;
top: 14%;
}
.in-focus-pos img {
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
width: 554px;
height: 400px;
object-fit: cover;
}
.tr-bg {
background-color: #D3CFE3 !important;
}
.lcd-bg {
background-color: #C4E9FD !important;
}
.ir-bg {
background-color: #D1E6D0 !important;
}
.main-focus{
background-color: #F2D6CA;
border-radius: 20px;
}
.focus {
padding-bottom: 80px !important;
}
.in-focus-1 {
position: relative;
}
.in-focus-text {
padding-top: 70px;
padding-left: 44%;
}
.in-focus-1 h4 {
font-size: 28px;
color: #111111;
width: 98%;
font-weight: 400;
}
.in-focus-1 p {
font-size: 20px;
color: #333333;
line-height: 32px;
width: 95%;
font-weight: 400;
}
.in-focus-2 {
position: relative;
}
.in-focus-text-2 {
padding: 10px 45% 5% 40px;
}
.in-focus-pos-2 {
position: absolute;
right: -68px;
top: 0%;
}
.in-focus-pos-2 img {
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
width: 554px;
height: 415px;
object-fit: cover;
}
.in-focus-2 h4 {
font-size: 28px !important;
line-height: 40px !important;
color: #111111 !important;
font-weight: 400 !important;
width: 90%;
}
.in-focus-2 p {
margin-top: 20px;
font-size: 20px;
color: #333333;
line-height: 32px;
font-weight: 400;
width: 100%;
}
.box-grid{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
/*.box-1 {*/
/* width: 25%;*/
/*}*/
.box h4 {
font-size: 50px;
font-size: 28px;
color: white;
}
.box p {
padding-top: 10px;
font-size: 20px;
line-height: 32px;
font-weight: 400;
color: white;
flex-grow: 1;
margin-bottom: 35px;
}
.box {
display: flex;
flex-direction: column;
justify-content: space-between;
border-radius: 24px;
padding: 30px 20px 35px 20px;
}
.box-btn{
align-items: flex-start;
margin-top: auto;
}
/* .....................Page-2....................... */
.service-2 {
width: 100%;
height: 385px;
}
.service-2 img {
width: 100%;
}
.WWD-box-2-h4 {
width: 60%;
font-size: 28px;
font-weight: 400;
}
.WWD-box-2-p {
font-size: 20px;
line-height: 32px;
width: 70%;
font-weight: 300;
}
.WWD-box-2-p-2 {
font-size: 20px;
line-height: 32px;
width: 35%;
font-weight: 300;
}
.page-2-in-focus {
background-color: #D3CFE3;
border-radius: 20px;
position: relative;
}
.page-2-in-focus-pos {
position: absolute;
width: 100%;
height: 415px;
right: 85px;
top: 8%;
}
.page-2-in-focus-text {
padding-top: 40px;
padding-left: 45%;
padding-bottom: 5%;
}
.page-2-in-focus h4 {
font-size: 28px;
width: 90%;
font-weight: 400;
color: #111111;
}
.page-2-in-focus p {
font-size: 20px;
line-height: 32px;
width: 85%;
font-weight: 400;
color: #333333;
}
/* ....................Page-3................... */
.service-3 {
width: 100%;
height: 385px;
}
.service-3 img {
width: 100%;
}
.Elec-Gov-p-3 {
color: #fff;
line-height: 64px;
font-weight: 400;
font-size: 50px;
}
.Elec-Gov-p-p-3 {
color: #fff;
line-height: 32px;
font-size: 20px;
}
.WWD-box-h4-p-3 {
font-size: 28px;
width: 53%;
}
.WWD-box-p-3 {
font-size: 20px;
width: 70%;
}
.e-b {
width: 50%;
}
.WWD-box-h4-e-b {
width: 60%;
font-size: 28px;
}
.WWD-box-p-3-e-b {
width: 60%;
font-size: 20px;
line-height: 32px;
}
.ml-p {
margin-left: 160px;
}
.page-3-in-focus {
background-color: #C4E9FD;
border-radius: 20px;
position: relative;
}
.page-3-in-focus-pos {
position: absolute;
width: 100%;
height: 415px;
right: 85px;
top: 8%;
}
.page-3-in-focus-text {
padding-top: 40px;
padding-left: 45%;
padding-bottom: 5%;
}
.page-3-in-focus h4 {
font-size: 28px;
width: 80%;
}
.page-3-in-focus p {
font-size: 20px;
line-height: 32px;
width: 75%;
font-weight: 300;
}
.page-3-box-1 {
width: 22%;
}
.page-3-box-1 h2 {
font-size: 50px;
}
.page-3-box-2 {
width: 22%;
border-radius: 20px;
padding: 20px;
}
.page-3-box-2 h4 {
width: 50%;
font-size: 28px;
color: white;
}
.page-3-box-2 p {
font-size: 20px;
line-height: 32px;
width: 80%;
font-weight: 300;
color: white;
}
.page-3-box-3 {
width: 22%;
border-radius: 20px;
padding: 20px;
}
.page-3-box-3 h4 {
width: 70%;
font-size: 28px;
color: white;
}
.page-3-box-3 p {
font-size: 20px;
line-height: 32px;
width: 80%;
font-weight: 300;
color: white;
}
.page-3-box-4 {
width: 22%;
border-radius: 20px;
padding: 20px;
}
.page-3-box-4 h4 {
width: 50%;
font-size: 28px;
color: white;
}
.page-3-box-4 p {
font-size: 20px;
line-height: 32px;
width: 80%;
font-weight: 300;
color: white;
}
/* page.................4...................... */
.page-4-in-focus {
background-color: #D1E6D0;
border-radius: 20px;
position: relative;
}
.page-4-in-focus-pos {
position: absolute;
width: 100%;
height: 415px;
right: 85px;
top: 8%;
}
.page-4-in-focus-text {
padding-top: 40px;
padding-left: 45%;
padding-bottom: 5%;
}
.page-4-in-focus h4 {
font-size: 28px;
width: 80%;
}
.page-4-in-focus p {
font-size: 20px;
line-height: 32px;
width: 75%;
font-weight: 300;
}
.page-4-box-1 {
width: 22%;
}
.page-4-box-1 h2 {
font-size: 50px;
}
.page-4-box-2 {
width: 22%;
border-radius: 20px;
padding: 20px;
}
.page-4-box-2 h4 {
width: 50%;
font-size: 28px;
color: white;
}
.page-4-box-2 p {
font-size: 20px;
line-height: 32px;
width: 80%;
font-weight: 300;
color: white;
}
.page-4-box-3 {
width: 22%;
border-radius: 20px;
padding: 20px;
}
.page-4-box-3 h4 {
width: 70%;
font-size: 28px;
color: white;
}
.page-4-box-3 p {
font-size: 20px;
line-height: 32px;
width: 80%;
font-weight: 300;
color: white;
}
.page-4-box-4 {
background-color: #0780C3;
width: 22%;
border-radius: 20px;
padding: 20px;
}
.page-4-box-4 h4 {
width: 70%;
font-size: 28px;
color: white;
}
.page-4-box-4 p {
font-size: 20px;
line-height: 32px;
width: 80%;
font-weight: 300;
color: white;
}
/* ............................Aboutus...................... */
.ground-img{
width: 30%;
}
.ground-img img{
width: 100%;
}
.ground-content{
width: 70%;
}
.ab-top h1 {
font-size: 50px;
}
.ab-top p {
font-size: 32px;
}
.ab-text {
padding: 30px 0;
background-color: #F9F7F1;
}
.solar p {
font-size: 20px;
color: #333333;
line-height: 32px;
}
.solar {
width: 65%;
padding: 5%;
}
.cards {
justify-content: space-between;
}
.postion-number{
position: relative;
}
.balls{
padding-top: 60px;
}
.circle-2 {
top: -20%;
left: -65%;
position: absolute;
width: 192px;
height: 192px;
border-radius: 50%;
margin: auto;
background-color: #ABCEDC;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.circle-3 {
bottom: -40%;
left: -79%;
position: absolute;
width: 245px;
height: 245px;
border-radius: 50%;
margin: auto;
background-color: #D3CFE3;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.circle-4 {
top: -35%;
left: 95%;
position: absolute;
width: 245px;
height: 245px;
border-radius: 50%;
margin: auto;
background-color: #C9D2D7;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.circle-5 {
bottom: -60%;
left: 95%;
position: absolute;
width: 337px;
height: 337px;
border-radius: 50%;
margin: auto;
background-color: #C8A3AB;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.circle-1 {
width: 313px;
height: 313px;
border-radius: 50%;
margin: auto;
background-color: #D1E6D0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.circle-content {
display: flex;
flex-direction: column; /* Stack vertically */
align-items: center;
justify-content: center;
}
.circle-content h3 {
font-size: 80px !important;
font-weight: 300 !important;
margin: 0;
}
.txt-circle {
font-size: 18px;
width: 100%;
color: #333;
margin-top: 15px; /* Space between number and text */
}
.about-card {
position: relative;
background-color: #F9F7F1;
border-radius: 20px;
padding: 24px;
overflow: hidden;
}
.what-icn {
position: absolute;
right: 0px;
top: 0px;
}
.hero-abt{
justify-content: end ;
display: flex;
width: 45%;
}
.hero-1{
margin-left: -95px;
}
.hero-2{
z-index: 999 !important;
}
.d-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.about-card h4 {
padding-bottom: 20px;
font-size: 28px;
font-weight: 400;
color: #000000;
}
.about-card p {
padding-bottom: 30px;
font-size: 20px;
width: 90%;
line-height: 32px;
font-weight: 400;
color: #333333;
}
.gap-40 {
gap: 40px;
}
.gap-100{
gap: 100px;
}
.march p {
font-size: 20px;
font-weight: 300;
color: black;
}
.fiftyfour {
position: relative;
text-align: center;
}
.eight {
top: 0%;
left: 19%;
position: absolute;
}
.sixtyone {
top: 65%;
right: 12%;
position: absolute;
}
.thirtyfive {
top: -20%;
right: 15%;
position: absolute;
}
.fortyfour {
position: absolute;
left: 17%;
top: 80%;
}
.gaspy {
margin-top: 30% !important;
margin-bottom: 8%;
}
.container-1 {
padding-top: 60px !important;
width: 50%;
margin: auto;
}
.WWE p {
font-size: 20px;
line-height: 32px;
font-weight: 400;
color: #333333;
}
.WWE h3 {
text-align: center;
}
.gaspy-1 h4 {
font-size: 28px;
font-weight: 300;
}
.gaspy-1 p {
font-size: 20px;
font-weight: 300;
color: black;
}
.page-5-box-1 {
width: 21%;
border-radius: 20px;
padding: 20px;
}
.page-5-box-1 h4 {
width: 50%;
font-size: 28px;
color: white;
}
.page-5-box-1 p {
font-size: 20px;
line-height: 32px;
width: 80%;
font-weight: 300;
color: white;
}
.page-5-box-2 {
width: 21%;
border-radius: 20px;
padding: 20px;
}
.page-5-box-2 h4 {
width: 50%;
font-size: 28px;
color: white;
}
.page-5-box-2 p {
font-size: 20px;
line-height: 32px;
width: 80%;
font-weight: 300;
color: white;
}
.page-5-box-3 {
width: 21%;
border-radius: 20px;
padding: 20px;
}
.page-5-box-3 h4 {
width: 70%;
font-size: 28px;
color: white;
}
.page-5-box-3 p {
font-size: 20px;
line-height: 32px;
width: 80%;
font-weight: 300;
color: white;
}
.page-5-box-4 {
background-color: #0780C3;
width: 21%;
border-radius: 20px;
padding: 20px;
}
.page-5-box-4 h4 {
width: 70%;
font-size: 28px;
color: white;
}
.page-5-box-4 p {
font-size: 20px;
line-height: 32px;
width: 80%;
font-weight: 300;
color: white;
}
.left-area h2 {
font-size: 32px;
line-height: 42px;
width: 70%;
}
.R-repo {
color: black;
text-decoration: none;
list-style: none;
border: #111111 1px solid;
border-radius: 20px;
padding: 7px;
}
.left-area p {
font-size: 20px;
line-height: 32px;
width: 65%;
}
.right-area {
margin: auto;
}
.left-cont {
width: 70%;
}
.left-cont h2 {
font-size: 32px;
line-height: 42px;
color: #111111;
}
.right-cont {
align-items: center;
}
.member-content{
padding-top: 40px;
}
.member-content p{
padding-top: 6px;
font-size: 28px;
color: #111111;
white-space: nowrap;
}
/* .............................Blog........................ */
.image{
margin: auto;
padding: 10px 0px;
width: 772px !important;
}
.image img{
width: 100% !important;
height: 100%;
}
figcaption{
font-size: 16px;
font-weight: 400;
font-style: italic;
color: #494949;
text-align: center;
width: 100%;
max-width: 480px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
}
.m-auto {
margin: auto;
}
.blog-1 h1 {
font-weight: 400;
line-height: 64px;
font-size: 50px;
}
.blog-1 p {
font-size: 32px;
line-height: 42px;
}
.button-blog {
border: 1px solid #C6C6C6;
color: #333333;
border-radius: 20px;
padding: 5px 12px;
}
.blog-2 {
align-items: center;
}
.search-container {
display: flex;
justify-content: center;
align-items: center;
}
.search-box {
position: relative;
width: 800px;
}
.search-box input {
font-family: "Hanken Grotesk", sans-serif !important;
width: 100%;
padding: 18px 40px 18px 25px;
border: 1px solid #34577c;
border-radius: 30px;
outline: none;
font-size: 16px;
transition: 0.3s ease-in-out;
}
.search-box input:focus {
box-shadow: 0 0 5px rgba(52, 87, 124, 0.5);
}
.search-box .search-icon {
position: absolute;
right: 22px;
top: 50%;
transform: translateY(-50%);
color: #34577c !important;
font-size: 16px;
cursor: pointer;
}
.pc-blue::placeholder {
color: #00355C;
}
.f-1 {
width: 80%;
}
.article-card {
display: flex;
align-items: center;
max-width: 1000px;
background: #fff;
padding: 20px 0px;
}
.article-img img{
width: 350px !important;
height: 262px !important;
border-radius: 19px;
object-fit: cover;
}
.article-content {
width: 70%;
margin-left: 20px;
}
.article-category {
font-size: 12px;
font-weight: bold;
color: #5E90C3;
text-transform: uppercase;
letter-spacing: 1px;
}
.article-title {
font-size: 24px !important;
line-height: 32px !important;
font-weight: 400;
margin-top: 10px !important;
margin-bottom: 65px !important;
}
.article-meta{
margin-top: auto !important;
}
.article-meta h5 {
font-size: 16px !important;
color: #111111;
line-height: 28px;
font-weight: 400;
}
.article-meta p {
font-size: 12px !important;
color: #111111 !important;
line-height: 20px !important;
font-weight: 300 !important;
}
.w-1k {
width: 1000px;
}
.t-center {
text-align: center;
}
/* ...............................team................... */
.timeline-item:has(.tabteam.active-3) .timeline-marker {
width: 40px;
height: 40px;
left: -19px;
}
.gro-img {
position: relative;
}
.gro-cont {
position: absolute;
right: 0%;
left: 45%;
top: 31%;
}
.gro-cont p {
font-size: 32px;
}
.gro-icon {
display: flex;
}
.team-social{
display: flex;
}
.gro-icon {
margin-right: 8px;
border: 1px solid;
border-color: rgba(0, 53, 92, 0.25);
width: 30px;
height: 30px;
border-radius: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.gro-text p {
font-size: 20px;
line-height: 32px;
font-weight: 400;
color: #111111;
}
.blu {
padding-bottom: 40px !important;
position: relative;
}
.in-blu {
background-color: white;
width: 85%;
position: absolute;
border: 1px solid #5E90C3;
padding: 20px;
border-radius: 20px;
z-index: 1;
left: 10%;
top: 12%;
}
.blu-btn {
margin-top: 70px;
display: flex;
gap: 20px;
}
.a-center {
align-items: center;
}
.in-blu-txt-img {
padding: 4% 0;
}
.in-blu-in p {
color: #333333;
font-size: 28px;
font-weight: 400;
width: 70%;
}
.ml-b {
margin-left: 10%;
}
.sidebar {
padding: 0 30px;
width: 30%;
position: relative;
min-height: 300px;
}
.scroller {
height: 600px ;
width: 65%;
padding: 20px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 20px;
}
#scroller-bar::-webkit-scrollbar-track
{
border-radius: 10px;
}
#scroller-bar::-webkit-scrollbar
{ width: 8px;
}
#scroller-bar::-webkit-scrollbar-thumb
{
border-radius: 10px;
background-color: rgb(102, 102, 102 , 0.6);
}
.timeline-line {
height: 430px;
position: absolute;
top: 0;
bottom: 40%;
left: 30px;
width: 0.094rem;
background-color: #00355C;
}
.timeline-endpoint {
position: absolute;
bottom: 28%;
left: 30px;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #2a5a8f;
transform: translateX(-1.5px);
}
.timeline-item {
display: flex;
align-items: center;
margin-bottom: 30px;
position: relative;
}
.timeline-marker {
width: 15px;
height: 15px;
border-radius: 0;
background-color: #e67e22;
margin-right: 10px;
position: relative;
z-index: 1;
left: -6px;
}
.comp{
padding: 0px 1rem !important;
}
.content-box {
margin-right: 50px;
transition: opacity 0.3s ease;
}
.content-box.hidden {
display: none;
opacity: 0;
}
.tabteam {
cursor: pointer;
padding: 20px 0px;
transition: all 0.3s ease;
}
.tabteam.active-3 {
font-weight: bold;
color: #111111;
}
.timeline-title {
font-weight: 400;
font-size: 24px;
color: #666666;
padding-top: 7px;
}
.timeline-title.active3 {
font-weight: bold;
color: #000;
font-size: 24px;
}
.container-3 {
border-radius: 5px;
padding: 0 20px;
overflow-y: hidden;
}
.news-title {
line-height: 40px;
font-size: 28px;
color: #111111;
margin-bottom: 15px;
font-weight: 400;
}
.news-meta {
display: flex;
color: #777;
margin-bottom: 15px;
font-size: 14px;
}
.news-date {
font-size: 16px;
color: #666666 !important;
font-weight: 400;
margin-right: 10px;
}
.news-source {
font-size: 16px;
color: #666666 !important;
font-weight: 400;
margin-left: 10px;
}
.read-more {
display: inline-block;
color: #008EF5;
font-weight: 600;
text-decoration: none;
font-size: 16px;
margin-top: 5px;
}
.read-more:hover {
text-decoration: underline;
}
.divider {
height: 1px;
background-color:rgb(0, 82, 141, 0.3);
margin: 30px 0px 15px 0px;
width: 100%;
}
.scrollbar {
position: fixed;
top: 0;
right: 0;
width: 8px;
height: 100%;
background-color: #ddd;
border-radius: 4px;
}
.right-slide {
overflow-y: hidden;
}
.cont {
padding-bottom: 50px;
background-color: #F9F7F1;
}
/* ...........................................career........................... */
.end-slang{
padding: 0px 70px;
font-size: 20px !important;
line-height: 32px !important;
font-weight: 400 !important;
color: #333333 !important;
}
.end-slang-a{
color: #333333 !important;
font-size: 20px !important;
line-height: 32px !important;
font-weight: 700 !important;
}
.custom-content h4{
padding-top: 30px;
padding-bottom: 10px;
font-weight: 600 !important;
font-size: 24px !important;
}
.custom-content p{
padding-bottom: 0px !important;
}
.custom-content strong{
font-weight: 600 !important;
}
.custom-content ul{
padding: 0px 20px !important;
padding-bottom: 20px !important;
}
.custom-content ol{
padding-bottom: 20px !important;
padding: 0px 20px !important;
}
.custom-content ol li{
color: #333333;
font-size: 16px;
line-height: 28px;
margin: 10px 0px !important;
list-style: auto !important;
}
.custom-content ul li{
color: #333333;
font-size: 16px;
line-height: 28px;
margin: 10px 0px !important;
list-style: square !important;
}
.show-bullet li {
font-size: 16px;
color: #333;
list-style: disc;
margin-left: 20px;
margin-bottom: 10px;
}
.flex-nowrap-carrer {
flex-wrap: nowrap !important;
}
.job-button-container {
display: flex;
width: 100%;
max-width: 372px;
border-radius: 50px;
overflow: hidden;
border: 1px solid #0a3863;
}
.job-button {
font-family: "Hanken Grotesk", sans-serif !important;
flex: 1;
padding: 12px 16px;
border: none;
font-size: 16px;
font-weight: 400;
cursor: pointer;
color: #0a3863;
transition: background-color 0.3s ease;
text-align: center;
position: relative;
background-color: #D1E6D0;
}
.job-button.active {
background-color: white;
}
.job-button:first-child {
border-right: 1px solid #0a3863;
}
.tab-content-2 {
padding: 30px 6px;
margin: 0 auto;
background: #D1E6D0;
border-radius: 8px;
}
h5{
font-size: 24px !important;
}
.container-7 {
border-radius: 8px;
width: 100%;
max-width: 800px;
}
.form-row {
display: flex;
gap: 20px;
margin-bottom: 20px;
}
.form-group {
flex: 1;
border-radius: 20px;
}
.form-group.full-width {
width: 100%;
}
.career-inp label {
display: block;
font-size: 16px;
margin-bottom: 5px;
color: #090808;
font-weight: 400;
}
.brief{
line-height: 20px !important;
font-size: 16px !important;
color: #666666 !important;
font-weight: 400 !important;
}
.career-inp input[type="text"],
.career-inp input[type="email"],
.career-inp input[type="tel"],
.career-inp textarea,
.career-inp select {
font-family: "Hanken Grotesk", sans-serif !important;
background-color: transparent !important;
width: 100%;
padding: 10px;
border: 1px solid #757575;
border-radius: 8px;
font-size: 14px;
color: #757575;
box-sizing: border-box;
}
.career-inp:focus{
box-shadow: none !important;
outline: none !important;
border: 1px solid #757575;
}
.career-inp textarea {
resize: vertical;
}
.career-inp select {
color: #757575;
appearance: none;
background: url('data:image/svg+xml;utf8,') no-repeat right 10px center;
background-size: 12px;
padding-right: 30px;
}
.file-upload {
border: 2px dashed #ccc;
padding: 20px;
text-align: center;
border-radius: 4px;
}
.file-upload p {
font-size: 12px;
color: #666;
margin: 5px 0 0 0;
}
.file-upload {
border: 2px dashed #ccc;
padding: 20px;
text-align: center;
border-radius: 4px;
}
.file-upload p {
font-size: 12px;
color: #666;
margin: 5px 0 0 0;
}
.file-upload input {
display: none;
}
.file-upload img, .file-upload svg {
cursor: pointer !important;
width: 48px;
height: 48px;
}
#fileInfo {
font-size: 12px;
color: #666;
margin-top: 10px;
}
.accordion_header {
display: flex;
flex-direction: row;
gap: 12px;
align-items: center;
justify-content: space-between;
border-radius: 20px;
font-size: 18px;
font-weight: 500;
cursor: pointer;
}
.accordion-container {
padding: 16px 0px;
display: flex;
flex-direction: column;
gap: 36px;
overflow: hidden;
}
.accordion-item {
border-radius: 20px;
padding: 32px 36px;
}
.bg-green{
background-color: #D1E6D0;
}
.accordion-header {
font-family: "Hanken Grotesk", sans-serif !important;
position: relative;
width: 100%;
border: none;
display: flex;
flex-direction: row;
gap: 12px;
align-items: center;
justify-content: space-between;
border-radius: 20px;
font-size: 18px;
font-weight: 500;
cursor: pointer;
transition: all 0.5s ease-in-out;
}
.accordion-header h4{
font-weight: 500 !important;
color: #000000;
font-size: 28px;
}
.icon {
transition: transform 0.3s;
color: #333;
}
.accordion-header.active .icon {
transform: rotate(180deg);
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
position: relative;
}
.accordion-body {
opacity: 1;
transition: all 0.5s ease-in-out;
}
/**/
.accordion-body p {
font-size: 16px;
line-height: 32px;
font-weight: 400;
color: black;
padding-bottom: 12px;
}
.career {
display: flex;
justify-content: space-around;
align-items: center;
}
.career-1 p {
font-size: 28px;
}
.career-2 p {
font-size: 20px;
width: 70%;
}
.light-green {
background-color: #D1E6D0;
}
.career-img {
width: 90%;
position: relative;
}
.career-img img {
width: 100%;
}
.career-in-img {
position: absolute;
left: 10%;
bottom: -40%;
}
.car-p {
margin-top: 35px;
position: absolute;
width: 50%;
right: 0%;
font-size: 20px;
font-weight: 400;
color: #333333;
line-height: 32px;
}
.WWWU {
margin-top: 20.625rem;
}
.WWWU p {
font-size: 20px;
padding-top: 35px;
padding-bottom: 20px;
font-weight: 400;
color: #333;
line-height: 28px;
}
.c-box-1 {
padding-bottom: 90px !important;
position: relative;
overflow: hidden;
background-color: #F9F7F1;
border-radius: 24px;
padding: 25px;
width: 33%;
}
.c-box-1 h4 {
width: 90%;
font-size: 28px;
font-weight: 400;
color: #000;
}
.c-box-1 p {
font-size: 20px;
line-height: 32px;
color: #333333;
font-weight: 400;
}
.c-box-2 {
background-color: #F9F7F1;
border-radius: 20px;
padding: 20px;
width: 33%;
}
.c-box-2 h4 {
font-size: 24px;
width: 50%;
}
.c-box-2 p {
font-size: 20px;
width: 85%;
}
.c-box-3 {
background-color: #F9F7F1;
border-radius: 20px;
padding: 20px;
width: 33%;
}
.c-box-3 h4 {
font-size: 24px;
width: 60%;
}
.c-box-3 p {
font-size: 20px;
width: 85%;
}
.c-box-4 {
background-color: #F9F7F1;
border-radius: 20px;
padding: 20px;
width: 33%;
}
.c-box-4 h4 {
font-size: 24px;
width: 60%;
}
.c-box-4 p {
font-size: 20px;
width: 85%;
}
.c-box-5 {
background-color: #F9F7F1;
border-radius: 20px;
padding: 20px;
width: 33%;
}
.c-box-5 h4 {
font-size: 24px;
}
.c-box-5 p {
font-size: 20px;
width: 85%;
}
.c-box-6 {
background-color: #F9F7F1;
border-radius: 20px;
padding: 20px;
width: 33%;
}
.c-box-6 h4 {
font-size: 24px;
}
.c-box-6 p {
font-size: 20px;
width: 85%;
}
.acc-1 {
width: 32%;
}
.acc-2 {
width: 60%;
}
.acc-2 p {
font-size: 20px;
color: #333333;
line-height: 32px;
font-weight: 400;
}
.l-car {
font-size: 20px;
width: 72%;
}
.acc-4 {
width: 50%;
}
.acc-4 p {
font-size: 32px;
font-weight: 400;
color: #111111;
}
.acc-5 {
line-height: 32px;
color: #333333;
font-weight: 400;
font-size: 20px;
width: 50%;
}
.container-4 {
margin: auto;
width: 60%;
}
.int-App p {
font-size: 20px;
font-weight: 400;
line-height: 32px;
color: #333333;
}
.int-ul {
background-color: #F9F7F1;
padding: 35px 40px 35px 40px ;
border-radius: 24px;
}
.int-ul ul{
padding-left: 40px;
}
.sub-bullet {
list-style: square !important;
font-size: 17px;
line-height: 32px;
font-weight: 400;
color: #333333;
}
.int-ul h4 {
padding-bottom: 20px ;
font-size: 28px;
font-weight: 400;
color: #000000;
}
.int-ul li {
font-size: 20px;
}
.int-last h4 {
padding-bottom: 15px;
font-size: 28px;
font-weight: 400;
color: #000;
}
.int-last p {
font-size: 20px;
line-height: 32px;
font-weight: 400;
color: #333333;
}
.int-last a {
font-size: 20px;
line-height: 32px;
font-weight: 400;
color: #333333;
}
.f-top-h {
width: 65%;
}
.f-top-h h4 {
font-size: 32px;
font-weight: 400;
color: #111111;
}
.f-top-btn {
align-items: center;
}
.f-top-btn a {
width: auto;
margin: auto;
}
.f-top-btn i {
border: 1px solid #406885;
border-radius: 20px;
padding: 7px;
background-color: #406885;
}
.job-button-container {
margin-top: 10px ;
display: inline-flex;
border-radius: 20px;
overflow: hidden;
border: 1px solid #00355C;
}
.job-button {
border: none;
padding: 10px 10px;
text-align: center;
font-size: 16px;
color: #00355C;
background: transparent;
font-weight: 500;
cursor: pointer;
transition: background-color 0.2s;
}
.view-job {
border-right: 1.5px solid #1c7d4e;
}
.btn-active {
background-color: white;
}
.apply-now {
background-color: #d9edd1;
}
.job-button:hover {
opacity: 0.9;
}
.container-7 {
border-radius: 8px;
width: 100%;
max-width: 850px;
}
.apply-head{
font-weight: 600 !important;
font-size: 24px !important;
line-height: 44px !important;
color: #000000 !important;
}
.apply-para{
font-weight: 400 !important;
font-size: 20px !important;
line-height: 28px !important;
color: #333333 !important;
}
.form-row {
display: flex;
gap: 20px;
margin-bottom: 20px;
}
.form-group {
flex: 1;
border-radius: 20px;
}
.form-group.full-width {
width: 100%;
}
label {
display: block;
font-size: 16px;
color: #090808;
font-weight: 400;
}
.career-inp {
background-color: transparent !important;
width: 100%;
padding: 10px;
border: 1px solid #757575 !important;
border-radius: 8px;
font-size: 14px;
color: #757575;
box-sizing: border-box;
}
textarea {
resize: vertical;
}
select {
appearance: none;
background: url('../images/arrow-down-sign-to-navigate.png') no-repeat right 10px center;
background-size: 12px;
padding-right: 30px;
}
.file-upload {
justify-content: center;
border: 1px dashed #111111;
padding: 40px 40px;
text-align: center;
border-radius: 8px;
}
.file-upload p {
font-size: 16px !important;
color: #757575 !important;
line-height: 20px !important;
}
.event-bg {
width: 100%;
background-color: #00355C;
background-size: 100%;
height: 546px;
}
.event-txt h3 {
color: #fff;
}
.event-bg .d-flex {
gap: 40px;
}
.border-right {
border-right: 2px solid #000;
}
.w-48 {
width: 44%;
}
.w-6 {
width: 6%;
}
.w-50 {
width: 50%;
}
.justify-center {
justify-content: center;
}
.justify-left {
justify-content: left;
}
.data-slider {
margin: auto;
width: 100%;
}
.blog-slider {
margin: auto;
width: 100%;
height: 657px;
}
.border {
width: 1px;
background-color: #000000;
}
.oad-left {
width: 35%;
font-size: 24px;
font-weight: bold;
}
.subtext {
font-size: 32px;
color: #111111;
font-weight: 400;
}
.oad-right {
font-size: 16px;
color: #333333;
}
.oad-right p {
font-size: 20px;
line-height: 32px;
font-weight: 400;
}
.in-blu-in-tac {
width: 100%;
}
.in-blu-in-tac p {
font-size: 28px;
font-weight: 400;
}
.tac h2 {
font-size: 24px;
font-weight: 400;
}
.tac p {
color: #333333;
font-size: 16px;
font-weight: 400;
line-height: 28px;
}
.bold {
font-weight: bold;
}
.border-yellow {
border: 3px solid #F7DC6F;
}
.tac-underline {
color: #333;
text-decoration: underline !important;
}
.sider-img-tad {
height: 545px;
width: 532px;
}
.fs-20{
font-size: 20px !important;
}
.sub-head{
font-weight: 500 !important;
font-size: 20px !important;
padding-top: 30px !important;
}
.lod h2 {
font-size: 50px;
font-weight: 400;
line-height: 50px;
color: #111111;
}
.dataset {
padding-top: 50px;
padding-bottom: 33px;
}
.dataset h3 {
font-size: 28px;
font-weight: 400;
color: #111111;
line-height: 15px !important;
}
.dataset p {
padding-top: 30px;
line-height: 32px;
font-size: 20px;
font-weight: 400;
color: #333333;
}
.osd-w-para {
line-height: 32px;
width: 90% !important;
}
.w-90{
display: inline-block;
width: 87% !important;
}
.dataset span {
font-size: 16px;
line-height: 28px;
font-weight: 400;
color: #666666 !important;
}
.links a {
font-size: 20px;
color: #008EF5;
text-decoration: none;
margin-right: 20px;
font-weight: 600;
}
.link-padding {
padding: 0px 20px;
}
.link-padding-2 {
padding: 0px 20px 0px 0px;
}
.link-padding-3 {
padding: 0px 20px;
}
.links a:hover {
text-decoration: underline;
}
/* Powersector data */
.eny-view-more {
color: #008EF5 !important;
}
.eny-blu-osd {
position: relative;
width: 100%;
}
.eny-in-blu-oad {
background-color: white;
width: 90%;
max-width: 1070px;
position: relative;
border: 1px solid #5E90C3;
padding: 20px 0px 30px 100px;
border-radius: 20px;
z-index: 1;
margin: 20px auto;
box-sizing: border-box;
}
.eny-in-blu-in-tac {
max-width: 871px;
height: auto;
}
.eny-in-blu-in-tac p {
font-size: 28px;
font-weight: 400;
}
.eny-tac h2 {
font-size: 24px;
font-weight: 400;
}
.eny-tac p {
color: #333333;
font-size: 16px;
font-weight: 400;
line-height: 28px;
}
.eny-bold {
font-weight: bold;
}
.eny-tac li {
font-size: 16px;
font-weight: 400;
color: #333333;
margin-bottom: 10px;
}
.eny-border-yellow {
border: 0.094rem solid #F7DC6F;
}
.eny-tac-underline {
font-weight: 700;
text-decoration: underline;
}
.eny-hidden {
display: none;
}
.eny-osd-img-part-sec {
left: -10px;
border-radius: 0px 24px 24px 0px;
top: -21px;
background: #F7DC6F;
width: 200px;
height: 323px;
position: absolute;
}
.eny-osd-img-part-one {
position: relative;
}
.env-lg-view {
display: block;
}
.env-md-view {
display: none;
}
.psd-arrow {
font-size: 1.5em;
}
.psd-card-2 {
background-color: #F9DA78;
color: white;
text-align: center;
border-radius: 10px;
width: 50%;
height: 238px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.psd-card-2:hover {
transform: translateY(-5px);
}
.psd-card-2 h4 {
font-size: 28px;
font-weight: 400;
color: #111111;
margin-bottom: 10px;
}
.psd-card-div-2 {
display: flex;
justify-content: center;
align-items: center;
gap: 22px;
}
.psd-card-2 p {
color: #333333;
margin-bottom: 20px;
font-size: 20px;
margin-left: 5px;
font-weight: 400;
}
.psd-card-2 i {
color: #111111;
}
.ex-eodr {
line-height: 42px;
font-size: 32px;
font-weight: 400;
}
.ex-eodr-p {
line-height: 32px;
font-size: 20px;
font-weight: 400;
color: #333333;
}
.w-970 {
width: 970px;
}
.psd-end {
display: flex;
justify-content: end;
}
.border-psd {
width: 1px;
background-color: #000000;
}
.psd-left {
width: 36%;
font-size: 24px;
font-weight: bold;
}
.sub {
font-size: 32px;
color: #111111;
font-weight: 400;
}
.ourvalue {
color: #111111;
font-size: 50px;
margin: 0px;
font-weight: 400;
}
.psd-right {
width: 62%;
font-size: 16px;
color: #333333;
}
.psd-right p {
font-size: 20px;
line-height: 32px;
font-weight: 400;
}
.psd-btn-1 {
border: none;
background-color: #00355C;
color: #fff !important;
padding: 10px 20px;
border-radius: 50px;
font-weight: 500;
font-size: 18px;
}
.in-blu-oad {
background-color: white;
width: auto;
position: absolute;
border: 1px solid #5E90C3;
padding: 40px 90px 40px 90px;
border-radius: 20px;
z-index: 1;
left: 5%;
top: 12%;
}
.in-blu-oad-2 {
width: 100%;
background-color: white;
max-width: 1090px;
position: absolute;
border: 1px solid #5E90C3;
padding: 30px 0px 30px 85px;
border-radius: 20px;
z-index: 1;
left: 3%;
top: 2.594rem;
}
.in-blu-in-psd {
max-width: 871px;
}
.in-blu-in-psd p {
font-size: 28px;
font-weight: 400;
}
.psd h2 {
line-height: 32px;
font-size: 24px;
font-weight: 400;
}
.bold {
font-weight: bold;
}
.sider-img-psd {
max-width: 572px;
}
.sider-img-psd-1 {
max-width: 572px;
}
.psd-w-p {
max-width: 971px;
color: #333333;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 28px;
}
.border-yellow {
border: 3px solid #F7DC6F;
}
.search-container-psd {
display: flex;
justify-content: center;
align-items: center;
}
.search-box-psd {
position: relative;
max-width: 772px;
}
.search-box-psd input {
width: 100%;
padding: 12px 40px 12px 15px;
border: 2px solid #34577c;
border-radius: 25px;
outline: none;
font-size: 16px;
transition: 0.3s ease-in-out;
}
.search-box-psd input:focus {
box-shadow: 0 0 5px rgba(52, 87, 124, 0.5);
}
.search-box-psd .search-icon {
position: absolute;
left: 100%;
top: 50%;
transform: translateY(-50%);
color: #34577c;
font-size: 26px;
cursor: pointer;
}
.download-links{
display: flex !important;
}
.download-links {
margin-top: 20px;
}
.download-links a {
color: #008EF5;
text-decoration: none;
margin: 0px 13px !important;
font-size: 21px;
font-weight: 400;
line-height: 32px;
}
.border-psd-r {
border-right: 2px solid #E0E0E0;
}
.download-links a:hover {
text-decoration: underline;
}
.download-psd {
font-size: 20px;
font-weight: 400;
line-height: 32px;
color: #333333;
}
/* Basic CSS for styling */
.osd-slider-lg-view {
display: block;
}
.osd-slider-md-view {
display: none;
}
.download-nycontainer {
padding: 10px;
}
.download-nylabel {
display: block;
/* Ensures the label is on its own line */
margin-bottom: 5px;
/* Adds space between label and links */
color: #000;
}
.download-nylinks{
gap: 20px 0px !important;
grid-template-columns: repeat(6, 1fr);
display: grid
;
}
.download-nylinks a {
/* Space between links */
color: #007BFF;
/* Blue color for links */
text-decoration: none;
font-weight: 500;
}
.download-nylinks a:hover {
text-decoration: underline;
}
.fon-32 {
font-size: 32px;
font-weight: 400;
}
.fon-20 {
font-size: 20px;
font-weight: 400;
}
.fon-re {
font-size: 16px;
font-weight: 400;
}
.fon-re2 {
font-size: 16px;
font-weight: 300;
color: #00355C;
margin-top: 30px;
}
.marr {
font-weight: 500;
line-height: 24px;
margin-top: 5px;
color: #00000;
font-size: 16px;
}
.inp-1 {
padding: 12px;
border-radius: 7px;
width: 450px;
display: flex;
}
.textar {
height: 100px;
}
.wid-10 {
width: 949px;
border-radius: 8px;
padding: 10px;
}
.cooo {
color: #757575;
}
.itm {
align-items: baseline
}
.par2 {
margin-top: -13px;
}
.anker-we {
font-size: 18px;
color: #00355C;
font-weight: 400;
}
/* pranjul new page */
.event-bg {
background-image: url(../images/back-blue.png);
background-repeat: no-repeat;
background-size: 100% 100%;
height: 546px;
display: flex;
justify-content: center;
}
.event-txt h3 {
color: #fff;
}
.event-txt p {
color: #fff;
font-size: 32px;
line-height: 40px;
font-weight: 400;
}
.date-img img{
height: 224px;
object-fit: cover !important;
width: 100% !important;
border-radius: 24px !important;
}
.event-img img {
border-radius: 20px;
}
.up-lin {
border-bottom: 2px solid #B3CBDD;
}
.pas-line {
border-bottom: 2px solid #B3CBDD;
}
.up-event h2 {
font-size: 36px;
font-weight: 400;
color: #111111;
line-height: 56px;
}
.date {
width: 10%;
margin: auto;
}
.date h2 {
font-size: 36px;
font-weight: 300 !important;
color: #333333 !important;
}
.gre-spa{
font-size: 16px;
color: #333333;
font-weight: 400;
line-height: 28px;
}
.inpro {
width: 60%;
padding-left: 7%;
}
.date-img{
width: 30%;
}
.bor-line {
border: 4px solid #5E90C3;
border-radius: 20px;
}
.date-info {
width: 90%;
}
.inpro h2 {
font-weight: 400;
font-size: 24px;
color: #111111;
}
.date-img {
margin: auto;
}
.inpro p {
font-weight: 400;
font-size: 16px;
line-height: 28px;
color: #333333;
}
.bor-line-2 {
border: 4px solid #42AC3E;
border-radius: 20px;
}
.btn-out {
text-decoration: none;
background-color: #F3F3F3;
color: #8b8181;
padding: 10px 20px;
border-radius: 50px;
font-weight: 500;
font-size: 18px;
}
.bor-line-3 {
border: 4px solid #F9D962;
border-radius: 20px;
}
.inpro span {
font-weight: 700;
line-height: 20px;
text-transform: uppercase;
font-size: 12px;
color: #999999 !important;
}
.inpro-1 {
padding-left: 7%;
}
.inpro-1 h2 {
color: #111111;
font-weight: 400;
font-size: 24px;
width: 80%;
}
.inpro-1 p {
font-size: 16px;
line-height: 28px;
width: 75%;
color: #333333;
}
.inpro-2 {
padding-left: 7%;
}
.inpro-2 h2 {
font-weight: 400;
font-size: 24px;
width: 80%;
}
.inpro-2 p {
width: 75%;
}
.inpro-1 span {
font-size: 12px;
color: #999999;
}
.inpro-2 span {
font-size: 12px;
color: #999999;
}
.bor-line-4 {
border: 4px solid #5E90C3;
border-radius: 20px;
}
.inpro-3 {
padding-left: 7%;
}
.inpro-3 h2 {
font-weight: 400;
font-size: 24px;
width: 77%;
}
.inpro-3 p {
width: 80%;
}
.inpro-3 span {
font-size: 12px;
color: #999999;
}
.bor-line-5 {
border: 4px solid #CF6737;
border-radius: 20px;
}
.inpro-5 {
padding-left: 7%;
}
.inpro-5 h2 {
font-weight: 400;
font-size: 24px;
width: 77%;
}
.inpro-5 p {
width: 80%;
}
.inpro-5 span {
font-size: 12px;
color: #999999;
}
.pagination {
display: flex;
align-items: center;
list-style: none;
padding: 0;
}
.pagination li {
margin: 0 5px;
}
.pagination a {
text-decoration: none;
color: #00355C;
padding: 8px 12px;
border-radius: 5px;
transition: 0.3s;
}
.pagination .active a {
background-color: #0d3b66;
color: white;
}
.disabled span{
color: #757575 !important;
cursor: pointer;
}
.pagination .disabled a:hover {
color: #00355C;
cursor: pointer;
}
.natio {
display: flex;
justify-content: center;
align-items: center;
}
/* ............................................updates....................................... */
.table-container {
margin: 0 auto;
overflow-x: auto;
}
table {
width: 100%;
border-collapse: collapse;
background-color: #fff;
}
th,
td {
padding: 10px 12px;
text-align: left;
border-left: 0.094rem solid rgb(0, 82, 141, 0.3) !important;
border-right: 0.094rem solid rgb(0, 82, 141, 0.3) !important;
border-top: none !important;
border-bottom: none !important;
vertical-align: top;
}
th {
background-color: #F9DA78;
/* Light yellow background for header */
color: #000;
font-weight: 400;
border-top: none;
border-bottom: none;
font-size: 24px;
}
th:nth-child(1){
border-left: none !important;
white-space: nowrap;
}
th:nth-child(4){
border-right: none !important;}
td {
color: #000;
font-size: 16px;
}
tr:nth-child(even) {
background-color: #F9F7F1;
}
tr:nth-child(odd) {
background-color: #fff;
}
td:nth-child(3) {
max-width: 500px;
word-wrap: break-word;
line-height: 1.5;
}
td:nth-child(1){
border-left: none !important;
white-space: nowrap;
}
td:nth-child(4){
border-right: none !important;}
/*td:nth-child(2) {*/
/* white-space: nowrap;*/
/*}*/
td:nth-child(3){
border-right: none !important;
}
tr:nth-child(3){
border-right: none !important;
}
th:nth-child(3){
border-right: none !important;
}
/* ..........................up-update.............................. */
.banner {
width: 100%;
position: relative;
margin-bottom: 60px;
}
.banner-img {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 100%;
}
.banner-img img {
width: 100%;
height: 650px;
border-radius: 24px;
display: block;
}
.banner-text {
width: 90%;
max-width: 970px;
position: absolute;
background-color: #DB8365;
padding: 25px 30px;
border-radius: 25px;
bottom: -82px;
display: flex;
justify-content: space-between;
align-items: center;
}
.banner-hed {
flex: 1;
}
.banner-hed h4 {
font-size: 28px;
color: #00000;
font-weight: 400;
margin-bottom: 10px;
}
.banner-hed p {
font-size: 20px;
color: #FFFFFF;
line-height: 32px;
}
.banner-line {
height: 112px;
border: 1px solid #FFFFFF;
margin: 0 50px;
}
.line-border{
border-color: #5E90C3 !important;
}
.banner-btn {
margin-right: 10px;
display: flex;
align-items: center;
}
.banner-btn a {
width: 100%;
max-width: 213px !important;
border: 1px solid #FFFFFF;
padding: 8px 20px;
background-color: #F3F3F3;
border-radius: 40px;
color: #00355C;
text-decoration: none;
font-weight: 500;
font-size: 16px;
transition: all 0.3s ease;
white-space: nowrap;
}
.js {
justify-content: space-between;
}
.p-box {
margin: 0 auto;
display: flex;
}
.cut-top {
margin-top: 10%;
}
.left-section {
flex: 7;
padding-right: 60px;
}
.left-section h2 {
font-weight: 400;
color: #111111;
font-size: 36px;
line-height: 56px;
}
.left-section p {
font-size: 20px;
line-height: 32px;
font-weight: 400;
color: #333333;
margin-top: 5px;
margin-bottom: 20px;
}
.left-section {
font-size: 20px;
}
.right-section {
flex: 3;
padding-left: 40px;
position: relative;
}
.vertical-line {
position: absolute;
left: 0;
top: 0;
width: 2px;
height: 100%;
background-color: #4275b3;
}
.blue-dot {
position: absolute;
left: -3px;
bottom: 0px;
width: 8px;
height: 8px;
background-color: #4275b3;
border-radius: 50%;
}
.detail-item {
display: flex;
align-items: baseline;
margin-bottom: 20px;
}
.detail-text a {
color: #666666;
}
.detail-icon {
margin-right: 15px;
width: 22px;
text-align: center;
font-size: 20px;
}
.detail-icon i {
color: #666666;
}
.speaker-heading {
font-weight: 400;
font-size: 36px;
line-height: 56px;
color: #111111;
margin-top: 10px;
}
.side-heading {
font-size: 24px !important;
line-height: 32px !important;
font-weight: 500 !important;
color: #000000 !important;
margin-bottom: 13px !important;
}
.detail-text {
font-weight: 300;
color: #111111;
line-height: 32px;
font-size: 20px;
flex: 1;
}
.section-divider {
border-top: 1px solid #e0e0e0;
margin: 30px 0;
}
.section-divider h2 {
font-size: 24px;
line-height: 32;
}
.focus-badge a {
text-decoration: none;
display: inline-block;
border: 0.094rem solid #0780C3;
color: #0780C3;
border-radius: 30px;
padding: 8px 20px;
font-size: 18px;
font-weight: 400;
}
.event-custom h4{
color: #111111 !important;
font-size: 36px !important;
line-height: 56px !important;
font-weight: 400 !important;
margin-top: 10px;
}
.speaker {
display: flex;
margin-bottom: 40px;
}
.eventPhotoItem{
width: 100%;
border-radius: 16px !important;
}
.speaker-content {
flex: 1;
}
.speaker-name {
font-size: 24px;
font-weight: 400;
margin-bottom: 10px;
color: #000000;
}
.speaker-bio p {
font-size: 16px !important;
line-height: 28px !important;
color: #333333 !important;
font-weight: 400 !important;
}
.partners-section {
background-color: #b8dae6;
padding: 60px 0px;
width: 100%;
box-sizing: border-box;
min-height: 60vh;
}
.p-head {
margin-bottom: 20px;
color: #111111;
font-size: 36px;
line-height: 56px;
font-weight: 400;
}
.partners-grid {
align-items: baseline;
display: flex;
justify-content: space-between;
gap: 80px;
}
.partner {
flex: 1;
}
.partner-logo-container {
height: 90px;
margin-bottom: 25px;
display: flex;
align-items: center;
}
.partner-logo {
max-width: 160px;
}
.partner-name {
font-size: 24px;
color: #000000;
margin-bottom: 5px;
width: 90%;
}
.partner-subtitle {
font-size: 18px;
margin-bottom: 15px;
}
.partner-description {
font-size: 16px;
line-height: 28px;
font-weight: 400;
color: #333333;
}
.header {
flex-wrap: wrap;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
}
.title {
font-weight: 400;
color: #11111;
font-size: 36px;
line-height: 56px;
margin-bottom: 5px;
}
.language-option {
color: #007bff;
cursor: pointer;
margin-bottom: 15px;
}
.agenda-table {
width: 100%;
border-collapse: collapse;
overflow: hidden;
border-spacing: 0px;
border-radius: 8px;
}
thead{
border: none !important;
}
.table-header {
border-bottom: none !important;
}
.table-header th {
border-bottom: none !important;
font-weight: 500;
padding: 24px;
text-align: left;
color: #111111;
line-height: 32px;
}
.time-cell {
width: 18%;
}
.event-cell {
width: 40%;
}
.speaker-cell {
width: 42%;
}
.time-cell{
width: 10% !important;
}
.institution-cell{
width: 30% !important;
}
.update-cell{
width: 50% !important;
}
.txt-blue{
color: #008EF5 !important;
font-weight: 400 !important;
}
.bg-cream{
background-color: #F9F7F1 !important;
}
.instrument-cell{
width: 10% !important;
}
.agenda-row td {
padding: 24px;
border-bottom: none !important;
vertical-align: top;
font-size: 20px !important;
line-height: 32px;
color: #111111;
font-weight: 400;
}
.agenda-row:nth-child(even) {
background-color: #F9F7F1 !important;
}
.txt-355{
color: #00355C !important;
}
.contact-info {
width: 50%;
margin-top: 20px;
font-size: 24px;
color: #333;
}
.contact-info a {
text-decoration: none;
}
.contact-info a:hover {
text-decoration: underline;
}
.mid-line-hr {
color: #00528D;
border: 1.5px solid #00528D;
}
.eventScheduleWrapper {
padding: 32px 0;
background-color: #fff;
}
.scheduleContentBox {
margin: 0 auto;
}
.scheduleItemsGrid {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: space-between;
align-items: stretch; /* This ensures all children stretch equally */
}
.scheduleInfoCard {
flex: 1;
min-width: 250px;
display: flex; /* Make the card a flex container */
flex-direction: column; /* Stack children vertically */
justify-content: center; /* Center content vertically */
padding: 26px 13px;
border: 0.094rem solid #B3C3CE;
border-radius: 20px;
text-align: center;
}
.scheduleInfoCard span {
line-height: 28px !important;
font-size: 20px !important;
font-weight: 400 !important;
color: #333333 !important;
}
.scheduleInfoCard p {
margin-bottom: 0px !important;
line-height: 28px;
font-size: 20px;
font-weight: 600 !important;
color: #333333;
}
.eventPhotosSection {
padding: 32px 0;
background-color: #fff;
}
.eventPhotosContent {
margin-left: 17%;
padding: 0 16px;
}
.eventPhotosHeading {
margin-bottom: 32px;
}
.eventPhotosHeading h2 {
margin-left: 20px;
font-size: 36px;
font-weight: 400;
color: #111111;
}
.eventPhotosGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.eventPhotoItem img {
width: 100%;
height: 300px;
object-fit: cover;
border-radius: 8px;
}
.banner-hed-1 {
flex: 1;
}
.banner-hed-1 h4 {
font-size: 28px;
color: #000000;
font-weight: normal;
margin-bottom: 10px;
line-height: 1.2;
}
.banner-hed-1 p {
font-size: 20px;
color: #000000;
line-height: 1.3;
}
.banner-line-1 {
height: 80px;
border: 0.094rem solid #5E90C3;
margin: 0 30px;
}
.banner-btn-1 {
display: flex;
align-items: center;
}
.banner-btn-1 a {
border: 1px solid #FFFFFF;
padding: 8px 25px;
background-color: #F3F3F3;
border-radius: 20px;
color: #00355C;
text-decoration: none;
font-weight: bold;
font-size: 16px;
transition: all 0.3s ease;
white-space: nowrap;
}
.banner-btn-1 a:hover {
background-color: #FFFFFF;
}
.banner-text-1 {
width: 90%;
max-width: 970px;
position: absolute;
background-color: #C9D2D7;
padding: 25px 30px;
border-radius: 25px;
bottom: -50px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}
.vertical-line-2 {
position: absolute;
left: 0;
top: 0;
width: 2px;
height: 100%;
background-color: #4275b3;
}
/* .......................................rti-img............................................... */
.rti-img img {
width: 100%;
}
.w-80{
width: 50% !important;
}
.sub {
font-size: 32px;
color: #111111;
font-weight: 400;
}
.ourvalue {
font-size: 50px;
margin: 0px;
font-weight: 400;
margin-bottom: 8px !important;
}
.psd-right p {
font-size: 20px;
line-height: 32px;
font-weight: 400;
}
.psd-btn-1 {
border: none;
background-color: #00355C;
color: #fff !important;
padding: 10px 20px;
border-radius: 50px;
font-weight: 500;
font-size: 18px;
}
.dataListSection {
padding-bottom: 32px;
background-color: #fff;
}
.dataListContent {
margin: 0 auto;
padding: 0 16px;
}
#dept-option{
white-space: normal !important; /* allow line breaks */
word-wrap: break-word !important;
}
.dataListHeading {
margin-bottom: 32px;
display: flex;
justify-content: space-between;
align-items: center;
}
.dataListHeading h2 {
font-size: 50px;
font-weight: 400;
color: #1a1a1a;
}
.dataListFilters {
display: flex;
gap: 16px;
}
.custom-select-wrapper {
position: relative;
}
/* Base style */
.dataListFilterButton {
font-family: "Hanken Grotesk", sans-serif !important;
padding: 8px 30px 8px 20px;
border: 1px solid #ccc;
border-radius: 20px;
background-color: #fff;
font-size: 16px;
color: #707073;
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23666666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 15px center;
background-size: 12px;
transition: all 0.15s ease-in-out;
outline: none; /* Removes outline */
appearance: none; /* Remove native arrow */
-webkit-appearance: none; /* Safari */
-moz-appearance: none; /* Firefox */
}
/* Active Style */
.custom-select-wrapper.active .dataListFilterButton {
background-color: #00355C;
color: white;
border-color: #00355C;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 5L5 1L9 5' stroke='%23FFFFFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.cunter {
display: flex;
align-items: center;
color: #6A6762;
font-size: 14px;
line-height: 20px;
}
.dataListEntries {
display: flex;
flex-direction: column;
gap: 32px;
}
.dataEntryItem:last-child {
border-bottom: none;
}
.dataEntryItem h3 {
font-size: 28px;
font-weight: 400;
color: #000000;
margin-bottom: 20px;
line-height: 40px !important;
}
.dataEntryItem p {
font-size: 20px;
color: #333333;
margin-bottom: 16px;
line-height: 32px;
}
.dataEntryMeta {
padding-bottom: 8px;
}
.department-txt {
color: #333333 !important;
font-weight: 400;
font-size: 16px;
line-height: 28px;
}
.rti-data-head{
font-weight: 400;
font-size: 16px;
line-height: 28px;
color: #666666 !important;
}
.dataEntryDownload {
font-size: 20px;
color: #008EF5;
font-weight: 500;
text-decoration: none;
}
.dataEntryDownload:hover {
text-decoration: underline;
}
.bt-line {
border: 1px solid #E0E0E0;
}
.psd-arrow {
font-size: 1.5em;
}
.psd-card-2 {
background-color: #F9DA78;
color: white;
text-align: center;
border-radius: 10px;
width: 50%;
height: 238px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.psd-card-2:hover {
transform: translateY(-5px);
}
.psd-card-2 h4 {
align-items: center;
text-align: center;
font-size: 28px;
font-weight: 400;
color: #111111;
margin-bottom: 10px;
}
.psd-card-div-2 {
display: flex;
justify-content: center;
align-items: center;
gap: 22px;
}
.psd-card-2 p {
text-align: center;
color: #333333;
margin-bottom: 20px;
font-size: 20px;
margin-left: 66px;
font-weight: 400;
}
.psd-card-2 i {
color: #111111;
}
.ex-eodr {
line-height: 42px;
font-size: 32px;
font-weight: 400;
}
.ex-eodr-p {
line-height: 32px;
font-size: 20px;
font-weight: 400;
color: #333333;
}
.w-970 {
width: 970px;
}
.psd-end {
display: flex;
justify-content: end;
}
/* ...........................MEdia................................. */
.pt-cus-60{
padding-top: 100px;
}
.mediaSection {
padding-top: 56px;
padding-bottom: 56px;
background-color: #fff;
text-align: center;
}
.mediaContent-1 {
margin: 0 auto;
padding: 0 16px;
}
.mediaContent-1 h2 {
font-size: 50px;
font-weight: 500;
color: #111111;
line-height: 64px;
}
.mediaContent-1 p {
padding-top: 30px !important;
padding-bottom: 10px ;
font-size: 20px;
color: #111111;
}
.searchBarWrapper {
position: relative;
width: 100%;
max-width: 800px;
}
.searchBarWrapper2{
position: relative;
width: 100%;
max-width: 600px;
}
.searchInput {
font-family: "Hanken Grotesk", sans-serif !important;
width: 100%;
padding: 18px 40px 18px 25px;
border: 1px solid #34577c;
border-radius: 30px;
outline: none;
font-size: 16px;
transition: 0.3s ease-in-out;
}
.searchIcon i{
color: #00355C;
}
.searchIcon-rti i{
color: #00355C;
}
.searchInput::placeholder {
color: #00355C;
}
/* Search Icon */
.searchIcon {
position: absolute;
top: 60%;
right: 20px;
transform: translateY(-50%);
font-size: 16px;
color: #666;
}
.searchIcon-rti {
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
font-size: 16px;
color: #666;
}
.s-bar {
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
}
.mediaSectionWrapper {
padding: 32px 0;
background-color: #fff;
}
.mediaContent {
margin: 0 auto;
padding: 0 16px;
}
.mediaArticles {
display: flex;
flex-direction: column;
gap: 25px;
}
.mediaArticleItem:last-child {
border-bottom: none;
}
.mediaArticleItem h3 {
line-height: 42px !important;
font-size: 28px;
font-weight: 400 !important;
color: #111111;
margin-bottom: 15px;
}
.mediaArticleMeta {
font-size: 16px;
color: #666;
margin-bottom: 20px;
}
.mediaArticleMeta span {
color: #666666 !important;
font-weight: 400 !important;
font-size: 16px;
margin-right: 8px;
}
.mediaArticleLink {
font-size: 20px;
color: #008EF5;
text-decoration: none;
}
.left-ani {
position: relative;
}
.ani-left {
margin-top: 16.5rem;
position: absolute;
left: 0%;
}
.right-ani {
position: relative;
}
.ani-right {
margin-top: 62.25rem;
position: absolute;
right: 0%;
}
.owl-nav {
display: none;
}
/* Custom Navigation Buttons */
.custom-nav-1,
.custom-nav-2,
.custom-nav-3,
.custom-nav-4 {
position: relative;
width: 100%;
text-align: center;
}
.custom-nav-2 button.custom-prev-2 {
position: absolute;
left: 5% !important;
}
.custom-nav-2 button.custom-next-2 {
position: absolute;
right: 5% !important;
}
.custom-nav-1 button.custom-prev-1 {
position: absolute;
left: 10% !important;
}
.custom-nav-1 button.custom-next-1 {
position: absolute;
right: 10% !important;
}
.owl-carousel1 .owl-dots {
width: 10%;
position: relative;
left: 46%;
top: 40px;
}
/*.owl-carousel2 .owl-item{*/
/* height: 900px !important;*/
/*}*/
.owl-carousel2 .owl-dots {
width: 40%;
position: relative;
left: 36%;
top: 35px;
}
.custom-nav-1, .custom-nav-2{
padding-bottom: 35px !important;
}
.owl-carousel1 button.owl-dot {
background-color: #A6A6A6 !important;
width: 10px !important;
height: 10px !important;
margin: 0px 4px;
border-radius: 10px;
}
.owl-carousel2 button.owl-dot span{
margin: 0px 30px !important;
}
.owl-carousel2 button.owl-dot {
background-color: #A6A6A6 !important;
width: 10px !important;
height: 10px !important;
margin: 0px 4px;
border-radius: 10px;
}
.owl-carousel1 button.owl-dot span{
margin: 0px 30px !important;
}
.owl-carousel button.owl-dot.active {
background-color: #003366 !important;
}
.owl-carousel4 button.owl-dot {
background-color: #fff !important;
width: 10px !important;
height: 10px !important;
margin: 0px 4px;
border-radius: 10px;
}
.owl-carousel4 .owl-dots {
width: 10%;
position: relative;
left: 50%;
top: 0px;
}
.owl-carousel4 button.owl-dot span{
margin: 0px 30px !important;
}
.custom-nav-1 button,
.custom-nav-2 button,
.custom-nav-3 button,
.custom-nav-4 button {
background-color: transparent !important;
border: none !important;
margin: 0 0px !important;
cursor: pointer !important;
}
/* Hover Effect */
.custom-nav-1 button i:hover,
.custom-nav-2 button i:hover,
.custom-nav-3 button i:hover,
.custom-nav-4 button i:hover {
transition: 0.5s;
}
/* Icon Styling */
.custom-nav-1 button i,
.custom-nav-2 button i,
.custom-nav-3 button i,
.custom-nav-4 button i {
font-size: 28px;
color: #00355C;
transition: 0.5s;
}
.services-mobile {
display: none !important;
}
.services-laptop {
display: flex !important;
}
.bg-publication{
background-color: #ABCEDC;
}
.our-publications p {
font-size: 32px;
color: #111111;
width: 80%;
}
.my-20 {
margin: 20px 0px;
}
.py-20 {
padding: 20px 0px;
}
.our-publications-card {
display: flex;
border-radius: 10px;
padding-bottom: 40px;
}
.our-publications-card img {
width: 100%;
object-fit: cover;
border-radius: 16px;
}
.publicationcarousel-img{
width: 60%;
}
.card-content {
padding-left: 40px;
padding-right: 40px;
width: 50%;
}
.card-content h2 {
font-size: 28px;
color: #111111;
font-weight: 400;
padding-bottom: 15px;
}
.card-content p {
color: #333333;
font-size: 20px;
line-height: 32px;
width: 100%;
}
.publication-card h3 {
font-size: 20px;
line-height: 32px;
color: #111111;
}
.featured {
display: inline-block;
font-size: 12px;
color: #111111;
font-weight: bold;
text-transform: uppercase;
margin-bottom: 10px;
}
.publications-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 35px 20px;
}
.publication-card {
background-color: #fff;
border: solid #B3C3CE 0.094rem;
border-radius: 24px;
padding: 24px 24px 32px 24px;
}
.filter-bar {
display: flex;
align-items: center;
gap: 15px;
width: 63%;
}
.filter-bar span {
white-space: nowrap;
font-size: 16px;
color: #6A6762 !important;
font-weight: 400;
}
.filter-btn {
height: 42px;
padding: 8px 20px;
background-color: #00355C;
color: #fff;
border: none;
border-radius: 20px;
font-size: 16px;
width: 15%;
cursor: pointer;
transition: background-color 0.3s;
}
.right-border {
border: solid #E0E0E0 1px;
height: 30px;
}
.filter-btn:hover {
background-color: #00355C;
}
.filter-btn.active {
background-color: #00355C;
/* Darker blue for active state */
}
.filter-bar select {
padding: 8px 20px;
border: 1px solid #ccc;
border-radius: 20px;
background-color: #fff;
font-size: 16px;
color: #707073;
width: 15%;
cursor: pointer;
appearance: none;
/* Remove default dropdown arrow */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23666666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
/* Custom dropdown arrow */
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 12px;
}
.filter-bar select:focus {
outline: none;
border-color: #00355C;
}
.search {
position: relative;
display: flex;
align-items: center;
border: 1px solid #ccc;
border-radius: 20px;
background-color: #fff;
width: 60%;
}
.search-icon {
padding: 8px 10px;
font-size: 16px;
color: #707073 !important;
}
.search input {
padding: 8px 10px 8px 0;
border: none;
font-size: 16px;
color: #000000;
background: transparent;
width: 160px;
/* Adjust width as needed */
}
.search input:focus {
outline: none;
}
.search input::placeholder {
color: #999;
}
.publication-card img {
width: 100%;
border-radius: 16px;
height: 246px;
margin-bottom: 10px;
object-fit: cover;
}
.grid-card-content {
padding: 15px 5px;
}
.grid-card-content .date-publication {
display: block;
font-size: 12px;
color: #666666 !important;
text-transform: uppercase;
margin-bottom: 5px;
font-weight: 500;
line-height: 20px;
}
.grid-card-content h3 {
font-size: 20px;
color: #111111;
margin-bottom: 24px;
line-height: 32px;
font-weight: 400;
}
.tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.tags span {
cursor: pointer !important;
border: solid #B3C3CE 0.094rem !important;
color: #333333 !important;
padding: 5px 12px;
border-radius: 24px !important;
font-size: 14px !important;
line-height: 28px !important;
}
.w-m100{
min-width: 100px !important;
}
/* Dropdown menu styles */
.dropdwn-mnu {
position: absolute;
top: 100%;
right: 20px;
border-radius: 8px;
width: 250px;
z-index: 1000;
display: none;
padding: 16px;
}
.dropdwn-mnu.show {
display: block;
}
.dropdwn-mnu h4 {
font-size: 16px;
margin-bottom: 12px;
color: #333;
font-weight: 500;
}
.dropdwn-mnu .filter-option {
display: flex;
align-items: center;
padding: 8px 0;
cursor: pointer;
}
.dropdwn-mnu .filter-option input {
margin-right: 12px;
}
.dropdwn-mnu .filter-option label {
font-size: 14px;
color: #333;
}
.dropdwn-mnu .filter-section {
margin-bottom: 16px;
}
.dropdwn-mnu .filter-section:last-child {
margin-bottom: 0;
}
.dropdwn-mnu .search-input {
width: 100%;
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 4px;
margin-top: 8px;
font-size: 14px;
}
.dropdwn-mnu .apply-btn {
background-color: #003366;
color: white;
border: none;
padding: 8px 16px;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
margin-top: 16px;
width: 100%;
}
.header-icons {
position: relative;
}
/* Search dropdown styles */
.search-dropdown {
position: absolute;
top: 100%;
right: 0;
border-radius: 8px;
width: 280px;
padding: 16px;
display: none;
z-index: 1000;
margin-top: 8px;
}
.search-dropdown.show {
display: block;
}
.search-dropdown input {
width: 100%;
padding: 10px 12px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 14px;
outline: none;
}
.search-dropdown input:focus {
border-color: #003366;
box-shadow: 0 0 0 2px rgba(0, 51, 102, 0.1);
}
.search-icon {
cursor: pointer;
}
/* openaceesdata */
.open-head{
line-height: 16px;
font-size: 20px;
font-weight: 500;
color: #00000;
padding-top: 50px !important;
padding-bottom: 15px;
}
.custom-padding{
padding-left: 40px;
}
.border-right {
border-right: 2px solid #000;
}
.w-48 {
width: 44%;
}
.w-6 {
width: 6%;
}
.w-50 {
width: 50%;
}
.justify-center {
justify-content: center;
}
.justify-left {
justify-content: left;
}
.data-slider {
margin: auto;
width: 100%;
}
.blog-slider {
margin: auto;
width: 100%;
height: 657px;
border-radius: 24px;
object-fit: cover;
}
.w-772{
width: 820px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.subtext {
font-size: 32px;
color: #111111;
font-weight: 400;
}
.oad-right {
width: 62%;
font-size: 16px;
color: #333333;
}
.oad-right p {
font-size: 20px;
line-height: 32px;
font-weight: 400;
}
.blu-osd {
position: relative;
}
.in-blu-in-tac {
max-width: 871px;
}
.in-blu-in-tac p {
font-size: 28px;
font-weight: 400;
}
.tac h2 {
color: #111111;
line-height: 32px;
font-size: 24px;
font-weight: 400;
padding-bottom: 7px;
}
.tac p {
color: #333333;
font-size: 16px;
font-weight: 400;
line-height: 28px;
}
.bold {
font-weight: bold;
}
.tac li {
list-style: square !important;
font-size: 16px;
font-weight: 400;
color: #333333;
margin-bottom: 10px;
}
.tac li::marker{
color: #333333 !important;
}
.border-yellow {
border: 0.094rem solid #F7DC6F;
}
.tac-underline {
text-decoration: underline !important;
}
.sider-img-tad {
height: 545px;
max-width: 532px;
}
.sider-img-tad-opd {
width: auto;
}
.lod h2 {
font-size: 50px;
font-weight: 400;
line-height: 50px;
color: #111111;
}
.links {
box-shadow: none;
}
.links a {
font-size: 20px;
color: #008EF5;
text-decoration: none;
font-weight: 600;
text-align: center;
}
.link-padding {
padding: 0px 20px;
}
.link-padding-2 {
padding: 0px 20px 0px 0px;
}
.link-padding-3 {
padding: 0px 20px;
}
.links a:hover {
text-decoration: underline;
}
.ny-view-more {
margin-top: 20px;
font-weight: 600;
font-size: 18px;
color: #008EF5 !important;
}
.ny-blu-osd {
position: relative;
width: 100%;
}
.ny-in-blu-oad {
background-color: white;
width: 90%;
max-width: 1070px;
position: relative;
border: 1px solid #5E90C3;
padding: 20px 0px 30px 130px;
border-radius: 20px;
z-index: 1;
margin: 20px auto;
box-sizing: border-box;
}
.ny-in-blu-in-tac {
max-width: 871px;
height: auto;
}
.ny-in-blu-in-tac p {
font-size: 28px;
font-weight: 400;
}
.ny-tac h2 {
font-size: 24px;
font-weight: 400;
}
.ny-tac p {
color: #333333;
font-size: 16px;
font-weight: 400;
line-height: 28px;
}
.ny-bold {
font-weight: bold;
}
.ny-tac li {
font-size: 16px;
font-weight: 400;
color: #333333;
margin-bottom: 10px;
}
.ny-border-yellow {
border: 3px solid #F7DC6F;
}
.ny-tac-underline {
font-weight: 700;
text-decoration: underline;
}
.ny-hidden {
display: none;
}
.osd-slider-lg-view {
display: block;
}
.osd-slider-md-view {
display: none;
}
.ny-osd-img-part-sec {
left: -10px;
border-radius: 0px 24px 24px 0px;
top: -21px;
background: #F7DC6F;
width: 150px;
height: 210px;
position: absolute;
}
.ny-osd-img-part-one {
position: relative;
}
/* blog detait */
.frist-img-flote {
position: relative
}
.left-flote-img {
width: 12%;
position: absolute;
top: 53%;
left: 0%;
z-index: -9999;
}
.left-flote-img img {
width: 100%;
}
.left-flote-img-2 {
position: absolute;
top: 33%;
right: 0%;
z-index: -9999;
overflow: hidden;
}
.left-flote-img-3 {
width: 12%;
position: absolute;
top: 50%;
left: 0%;
z-index: -9999;
}
.left-flote-img-4 {
position: absolute;
top: 37%;
right: 0%;
z-index: -9999;
}
.bdp-label {
letter-spacing: 1px;
color: #5E90C3;
font-size: 12px;
font-weight: 500 !important;
line-height: 20px;
}
.bdp-heading {
margin-bottom: 20px !important;
font-size: 36px;
font-weight: 400;
color: #111111;
margin-bottom: 10px;
line-height: 56px;
}
.bdp-byline {
font-size: 20px;
color: #111111;
line-height: 36px;
font-weight: 400;
margin-bottom: 5px;
}
.bdp-date {
font-size: 16px;
color: #111111;
line-height: 24px;
}
.bdp-content {
font-size: 20px;
color: #333333;
line-height: 32px;
margin-bottom: 30px;
width: 820px;
font-weight: 400;
}
.bdp-content strong {
font-weight: bold !important;
}
.bdp-content a {
font-weight: 400 !important;
color: #333333 !important;
text-decoration: underline !important;
}
.underline-bdp {
text-decoration: underline;
font-weight: 400;
}
.bdp {
width: 1168px;
position: relative;
}
.quote-break{
display: flex;
gap: 20px;
justify-content: baseline;
}
.bdp-w-p {
width: 834px !important;
font-weight: 400 !important;
color: #111111;
font-size: 36px !important;
line-height: 56px;
}
.border-blue-pbd {
border: 2px solid #65AC62;
}
.short-pic {
top: -33px;
position: absolute;
right: -14%;
}
.quotes {
font-size: 50px;
}
.opd-margin-t {
margin-top: 80px !important;
margin-bottom: 160px !important;
}
.bdp-const {
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
display: flex;
justify-content: center;
align-items: center;
}
.image-box-bdp {
max-width: 820px;
margin: 0 auto;
background-color: #fff;
border-radius: 10px;
}
.bdp-image-container {
padding-top: 40px;
position: relative;
margin-bottom: 20px;
}
.bdp-image {
object-fit: cover;
border-radius: 24px !important;
width: 100%;
height: 434px !important;
display: block;
}
.bdp-caption {
font-size: 16px;
font-weight: 400;
font-style: italic;
color: #494949;
text-align: center;
margin-top: 10px;
width: 100%;
max-width: 480px;
margin-left: auto;
margin-right: auto;
}
.bdp-caption-2 {
font-size: 16px;
font-weight: 400;
font-style: italic;
color: #494949;
text-align: center;
margin-top: 10px;
width: 100%;
max-width: 520px;
margin-left: auto;
margin-right: auto;
}
.bdp-content p {
/*text-align: justify !important;*/
font-size: 20px;
line-height: 32px;
margin-top: 10px;
color: #333333;
font-weight: 400;
}
.bdp-content p:first-of-type {
margin-top: 0 !important;
}
.in-blu-zandu {
background-color: white;
width: 100%;
max-width: 1168px !important;
position: absolute;
border: 1px solid #5E90C3;
padding: 80px 130px 80px 130px;
border-radius: 20px;
z-index: 1;
left: 5%;
top: 14%;
}
.in-blu-in-tac p {
font-size: 28px;
font-weight: 400;
}
.tac h2 {
font-size: 24px;
font-weight: 400;
}
.tac p {
margin-bottom: 15px;
color: #333333;
font-size: 16px;
font-weight: 400;
line-height: 28px;
}
.bold {
font-weight: bold;
}
.bdp-border-b {
opacity: 30%;
border-top: 2px solid #00528D;
}
.bdp-border-b-2 {
border: 2px solid #00528D;
opacity: 30%;
}
.bdp-border-b-3 {
margin-top: 0px;
border-top: 2px solid #00528D;
opacity: 30%;
}
.bpd-container {
display: flex;
justify-content: center;
gap: 20px;
}
.bpd-card {
width: 33%;
border-radius: 24px;
overflow: hidden;
text-align: left;
padding: 20px;
border: 0.094rem solid;
border-color: rgb(0, 53, 92, 0.3);
}
.bpd-card img {
border-radius: 16px;
width: 100%;
height: 246px;
object-fit: cover;
}
.bpd-card-content {
padding: 15px;
}
.bpd-category {
font-size: 12px;
text-transform: uppercase;
font-weight: 500;
color: #5E90C3;
}
.bpd-category-2 {
font-size: 12px;
text-transform: uppercase;
font-weight: 500;
color: #CF6737;
}
.bpd-category-3 {
font-size: 12px;
text-transform: uppercase;
font-weight: 500;
color: #42AC3E;
}
.bpd-title {
color: #111111;
font-size: 24px;
line-height: 32px;
font-weight: 400;
margin: 10px 0;
}
.bpd-author {
font-size: 16px;
color: #111111 !important;
line-height: 24px;
font-weight: 400;
}
.bpd-author-2 {
font-size: 12px;
color: #111111 !important;
line-height: 20px;
font-weight: 300;
}
.bpd-button-container {
display: flex;
justify-content: center;
margin-top: 20px;
}
.bpd-button {
font-size: 20px;
font-weight: 400;
text-align: center;
display: inline-block;
padding: 10px 20px;
margin-top: 20px;
background-color: #003366;
color: white;
text-decoration: none;
border-radius: 25px;
}
.bpd-button-2 {
font-size: 15px;
display: flex;
justify-content: center;
align-items: center;
width: 54px;
height: 54px;
margin-top: 20px;
background-color: #003366;
color: white;
text-decoration: none;
border-radius: 50%;
}
.last-bpd h4 {
font-size: 28px;
font-weight: 600;
line-height: 36px;
}
.arrow.bpd {
font-size: 22px;
}
.nysec-border-purple {
border: 2px solid #D3CFE3;
}
.nysec-border-sky-blue {
border: 2px solid #5E90C3;
}
.nysec-osd-img-part-sec-3 {
left: -20px;
border-radius: 0px 24px 24px 0px;
top: -21px;
background: #D3CFE3;
width: 150px;
height: 210px;
position: absolute;
}
.nysec-osd-img-part-sec-2 {
left: -20px;
border-radius: 0px 24px 24px 0px;
top: -21px;
background: #5E90C3;
width: 150px;
height: 210px;
position: absolute;
}
.osd-slider-lg-view {
display: block;
}
.osd-slider-md-view {
display: none;
}
.nysec-blu-osd {
position: relative;
width: 100%;
max-width: 1070px;
margin: 0 auto;
}
.nysec-osd-img-part-sec {
left: -20px;
border-radius: 0px 24px 24px 0px;
top: -21px;
background: #D1E6D0;
width: 150px;
height: 210px;
position: absolute;
}
.nysec-in-blu-oad {
background-color: #fff;
/* Matching the green background from the UI */
width: 90%;
position: relative;
border: 1px solid #5E90C3;
padding: 20px 40px 30px 130px;
/* Adjusted padding to accommodate the quote icon */
border-radius: 20px;
z-index: 1;
margin: 20px auto;
box-sizing: border-box;
overflow: hidden;
/* Ensure the icon stays within bounds */
}
.nysec-in-blu-in-tac {
max-width: 871px;
height: auto;
}
.nysec-in-blu-in-tac .nysec-quote-text {
font-size: 28px;
font-weight: 400;
color: #333;
line-height: 1.6;
position: relative;
padding-right: 40px;
/* Space for the icon */
}
.nysec-quote-text::before {
font-size: 40px;
position: absolute;
left: -20px;
top: -10px;
}
.nysec-quote-text::after {
font-size: 40px;
position: absolute;
right: -10px;
bottom: -10px;
}
.nysec-tac h2 {
font-size: 24px;
font-weight: 400;
margin-top: 20px;
}
.nysec-tac p {
color: #333333;
font-size: 16px;
font-weight: 400;
line-height: 28px;
}
.nysec-bold {
font-weight: bold;
}
.nysec-tac-underline {
font-weight: 700;
text-decoration: underline;
}
.nysec-quote-icon {
position: absolute;
top: 24px;
right: 24px;
width: 30px;
height: 30px;
/* Matching the icon gradient */
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 16px;
z-index: 2;
}
.nysec-border-yellow {
border: 3px solid #F7DC6F;
}
.nysec-quotes {
width: 16px;
height: 16px;
top: -8px;
}
.nysec-quotes {
width: 20px;
height: 20px;
margin-right: 10px;
}
.nysec-border-green {
border: 2px solid #65AC62;
}
.osd-slider-lg-view {
display: block;
}
.osd-slider-md-view {
display: none;
}
.ga-our-ny-timeline-content p {
line-height: 28px;
margin: 0px;
font-size: 16px;
font-weight: 400;
color: #111111;
}
.ga-our-ny-timeline-container {
max-width: 800px;
margin: 0 auto;
position: relative;
}
/* Main vertical line */
.ga-our-ny-timeline-item {
display: flex;
margin-bottom: 30px;
position: relative;
}
.ga-our-ny-marker-container {
position: relative;
flex: 0 0 73px;
display: flex;
justify-content: flex-end;
align-items: flex-start;
padding-right: 25px;
}
.ga-our-ny-timeline-marker {
width: 16px;
height: 16px;
position: absolute;
top: 5px;
right: 13px;
z-index: 1;
}
.ga-our-ny-marker-1 {
top: 30px !important;
border-radius: 10%;
background-color: #E77F42;
/* Orange color from the image */
}
.ga-our-ny-marker-2 {
top: 153px !important;
border-radius: 50%;
background-color: #4686C6;
/* Blue color from the image */
}
.ga-our-ny-marker-3 {
top: 275px !important;
border-radius: 0% 50% 50% 0%;
background-color: #468C3E;
/* Green color from the image */
}
.ga-our-ny-marker-4 {
width: 8px !important;
height: 8px !important;
top: 440px !important;
border-radius: 50%;
background-color: #00355C;
/* Blue color from the image */
}
.ga-our-ny-timeline-content {
flex: 1;
padding-left: 10px;
}
.ga-os-ny-lg-view {
display: block;
}
.ga-os-ny-md-view {
display: none;
}
.ga-w-80 {
width: 733px;
}
.ga-ourstory-slider {
background-color: #CF6737;
color: white;
}
.ga-ourstory{
display: flex;
align-items: normal !important;
justify-content: space-between;
color: white;
}
.ga-os-text-box{
padding-top: 60px;
}
.ga-os-text-box h1 {
font-size: 50px;
margin: 0;
font-weight: 600;
}
.ga-os-para-1 {
font-size: 32px;
line-height: 1.6;
font-weight: 300;
margin-bottom: 60px;
margin-top: 10px;
}
.ga-os-image-box {
margin-right: -52px !important;
width: 46%;
position: relative;
display: flex !important;
justify-content: end !important;
}
.ga-os-image-box .main-img {
display: block;
position: relative;
z-index: 2;
}
.ga-ourstory-slider{
padding-bottom: 20px !important;
}
.ga-os-para-2 {
font-size: 32px;
font-weight: 300;
}
.ga-os-para-3 {
color: #333333;
font-size: 32px;
font-weight: 400;
}
.ga-os-mx-auto {
margin: auto;
}
.ga-line {
line-height: 1.6;
}
.ga-os-text-black {
color: #333333;
}
.ga-os-fs-20 {
line-height: 32px !important;
font-size: 20px !important;
font-weight: 400 !important;
color: #111111;
}
.ga-values-grid {
padding-top: 30px;
gap: 50px;
display: flex;
}
.ga-value-item {
border-radius: 8px;
}
.ga-os-bg-blue {
background-color: #ABCEDC;
}
.ga-ourvalue {
padding-top: 30px;
line-height: 64px;
color: #111111;
font-size: 50px !important;
margin-bottom: 20px !important;
font-weight: 400 !important;
}
.ga-os-fs-28 {
color: #111111;
font-size: 28px !important;
font-weight: 400 !important;
line-height: 35px !important;
margin-bottom: 20px;
}
.ga-os-fs-28-car {
color: #fff;
font-size: 28px !important;
margin-bottom: 20px;
}
.ga-pt-10 {
padding-top: 230px;
}
.ga-pb-10 {
padding-bottom: 200px;
}
.ga-div-flote {
margin-top: 40px;
margin-bottom: -180px;
background-color: #F9F7F1;
border-bottom-right-radius: 0px !important;
border-top-left-radius: 0px !important;
border-radius: 24px;
text-align: center;
width: 90%;
max-width: 1110px !important;
padding-top: 60px;
padding-bottom: 100px;
position: relative;
}
.ga-circle {
position: absolute;
border-radius: 50%;
}
.ga-circle-top-left {
width: 50px;
height: 50px;
top: 0;
left: 0px;
}
.ga-circle-bottom-right {
width: 90px;
height: 90px;
right: -11px;
bottom: 49px !important;
}
.ga-posi-relative {
position: relative;
}
.ga-pb-20 {
padding-bottom: 90px;
}
.ga-card {
background-color: #5E90C3;
color: white;
padding: 30px;
text-align: center;
border-radius: 16px;
width: 33%;
padding: 30px;
}
.ga-card h4 {
margin-bottom: 10px;
}
.ga-card-div {
display: flex;
justify-content: space-between;
align-items: center;
gap: 22px;
}
.ga-card p {
margin-top: 30px;
margin-bottom: 30px;
font-size: 20px;
line-height: 32px;
font-weight: 400;
}
.ga-arrow {
font-size: 1.5em;
}
.ga-arrow i{
color: #fff;
}
.ga-py-30 {
padding-top: 70px;
padding-bottom: 20px;
}
.ga-energy-justice-wrapper {
padding-bottom: 50px !important;
display: flex;
padding: 40px 0;
gap: 40px;
}
.ga-timeline-container-2 {
margin-top: 40px;
text-align: end;
position: relative;
width: 165px;
flex-shrink: 0;
}
.ga-border-right-ourstory-sp {
border-right: 2px solid #4A7DAE;
position: absolute;
height: 124px;
bottom: -23.5%;
left: 20.2%;
z-index: 9999;
}
.ga-timeline-line-2 {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 100%;
background-color: #00355C;
top: -80px;
z-index: 1;
}
.ga-vertical-line {
width: 2.5px;
height: 122px;
background-color: #4A7DAE;
margin: 0 auto;
position: relative;
top: 1px;
}
.ga-journey-button {
display: inline-block;
width: 173px;
background-color: #FFD68A;
color: #000;
padding: 12px 0;
border-radius: 20px;
font-size: 14px;
font-weight: 500;
margin-bottom: 20px;
text-align: center;
}
.ga-orange-badge {
position: absolute;
/*right: 96.5%;*/
top: -82px;
}
.ga-timeline-marker-2 {
width: 12px;
height: 12px;
border-radius: 50%;
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 2;
}
.ga-orange-marker-2 {
background-color: #CF6737;
top: 120px;
}
.ga-square-marker {
background-color: #CF6737;
top: 240px;
border-radius: 2px;
}
.ga-blue-marker {
background-color: #0780C3;
top: 360px;
}
.ga-green-marker {
background-color: #2B5741;
top: 480px;
}
.ga-content {
position: relative;
flex: 1;
}
.ga-heading {
margin-top: 62px;
margin-left: 10%;
font-size: 32px;
font-weight: 400;
color: #333333;
margin-bottom: 30px;
}
.ga-paragraph-1 {
font-weight: 400;
margin-left: 10%;
font-size: 20px;
line-height: 32px;
color: #111111;
margin-bottom: 45px;
}
.ga-paragraph {
font-weight: 400;
font-size: 20px;
line-height: 32px;
color: #111111;
margin-bottom: 24px;
}
.ga-bolly {
background-color: #FFFFFF;
}
.ga-our-secound {
width: auto;
margin: auto;
background-color: #c16533;
color: #fff;
display: flex;
justify-content: left;
align-items: start;
min-height: 100%;
}
.ga-our-secound-container {
width: 100%;
padding-left: 20px !important;
padding-top: 20px;
padding-bottom: 20px;
}
.ga-our-sec {
line-height: 40px;
font-size: 32px;
margin-bottom: 10px;
font-weight: 400;
}
.ga-our-secp {
font-size: 24px;
margin-bottom: 20px;
font-weight: 400;
}
.ga-image-placeholder {
width: 100%;
padding: 20px 0px !important;
}
.ga-image-placeholder img{
width: 100%;
}
.ga-lg-view-hero {
display: block !important;
}
.ga-sm-view-hero {
display: none !important;
}
.ourstory-btn{
transform: translate(-160px, 25px);}
.ourstory-line{
transform: translate(-87px, -28px);
}
/* disply none chnage */
.services-sm {
display: none !important;
}
.services-lg {
display: block !important;
}
.popup {
display: none;
/* Hidden by default */
position: fixed;
top: 57%;
left: 50%;
transform: translate(-50%, -50%) scale(0.7);
/* Start scaled down */
background: white;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
z-index: 1000;
width: 100%;
max-width: 1140px;
opacity: 0;
/* Start invisible */
transition: transform 0.3s ease, opacity 0.3s ease;
}
/* Overlay to dim the background */
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
opacity: 0;
transition: opacity 0.3s ease;
}
/* Close button styling (cross) */
.close-btn {
position: absolute;
top: 5px;
right: 7px;
background: none;
border: none;
font-size: 20px;
font-weight: bold;
color: #333;
cursor: pointer;
padding: 5px;
line-height: 1;
}
/*.close-btn:hover {*/
/* color: #dc3545;*/
/* Red on hover */
/*}*/
.scroll::-webkit-scrollbar-track
{
border-radius: 10px !important;
}
.scroll::-webkit-scrollbar
{ width: 4px !important;
margin-top: 30px !important;
}
.scroll::-webkit-scrollbar-thumb
{
border-radius: 10px !important;
background-color: rgb(102, 102, 102 , 0.6) !important;
}
/* Show pop-up and overlay with animation */
.popup.active {
display: block;
transform: translate(-50%, -50%) scale(1);
/* Scale to normal */
opacity: 1;
/* Fully visible */
}
.overlay.active {
display: block;
opacity: 1;
}
/* Form container CSS (from your code) */
.form-container {
background: white;
padding: 40px;
width: 100%;
border-radius: 8px;
margin: 0 auto;
}
.form-heading{
font-size: 32px;
line-height: 44px;
font-weight: 400;
}
.openaccess-label {
display: block;
margin: 10px 0 5px;
font-size: 16px;
font-weight: 400;
}
.form-row {
display: flex;
flex-wrap: wrap;
gap: 50px;
margin-bottom: 10px;
}
.openaccess-input[type="text"],
.openaccess-input[type="email"],
.openaccess-textarea {
width: 100%;
font-family: "Hanken Grotesk", sans-serif !important;
padding: 12px;
border: 1px solid #ccc;
border-radius: 7px;
font-size: 14px;
}
.openaccess-textarea {
height: 100px;
resize: vertical;
}
.checkbox-group {
display: flex;
align-items: flex-start;
margin: 15px 0;
}
.checkbox-group input[type="checkbox"] {
margin-right: 10px;
}
.submit-btn {
font-family: "Hanken Grotesk", sans-serif !important;
background: #00355C;
color: white;
padding: 12px 25px;
margin-top: 25px;
border: none;
border-radius: 25px;
cursor: pointer;
font-size: 18px;
transition: background-color 0.3s;
}
.submit-btn:hover {
background: #002541;
}
.anker-we {
font-size: 16px;
color: #00355C;
font-weight: 400;
text-decoration: none;
display: inline-block;
margin: 5px 0 15px 0;
}
.anker-we:hover {
text-decoration: underline;
}
.footer-note {
font-size: 15px;
font-weight: 300;
color: #00355C;
margin-top: 25px;
line-height: 1.5;
}
.link-padding-btn {
font-family: "Hanken Grotesk", sans-serif !important;
border: none;
background: transparent;
font-size: 20px;
font-weight: 600;
color: #008EF5;
text-decoration: none;
text-align: center;
}
.open-btn-mobile{
display: none !important;
}
.tab-navigation {
margin-bottom: 40px;
}
/* Custom dropdown wrapper */
.custom-dropdown {
position: relative;
display: inline-block;
margin-top: 30px;
font-weight: bold;
font-size: 16px;
cursor: pointer;
}
/* Dropdown trigger (displays selected option) */
.dropdown-trigger {
padding: 0.25em 2em 0.25em 0.5em; /* Match select padding */
background: transparent !important; /* No background */
border: none !important; /* No border */
box-shadow: none !important; /* No shadow */
outline: none !important; /* No outline */
background-image: url('data:image/svg+xml;utf8,') !important;
background-repeat: no-repeat !important;
background-position: right 5px center !important;
font-weight: bold;
font-size: 16px;
color: black;
}
/* Dropdown menu (hidden by default) */
.dropdown-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
min-width: 150px; /* Adjust as needed */
background: white !important; /* White background for options */
border: none !important; /* No border */
box-shadow: none !important; /* No shadow */
z-index: 1000;
padding: 0;
}
/* Show menu when active */
.custom-dropdown.active .dropdown-menu {
display: block;
}
/* Dropdown option */
.dropdown-option {
padding: 5px 10px; /* Match original option padding */
background: white !important; /* No background */
color: black !important; /* Default text color */
font-size: 16px;
font-weight: bold;
cursor: pointer;
}
/* Hover effect for options */
.dropdown-option:hover {
color: blue !important; /* Text color on hover */
background: white !important; /* No background change */
}
.tab-desktop{
display: block !important;
}
.tab-mobile{
display: none !important;
}
.mobile-nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: white;
z-index: 1000;
transform: translateX(-100%);
transition: transform 0.3s ease-in-out;
}
.mobile-nav.active {
transform: translateX(0);
}
.nav-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0px;
border-bottom: 1px solid #eee;
}
.logo {
font-size: 24px;
font-weight: bold;
letter-spacing: 2px;
}
.close-btn {
background: none;
border: none;
font-size: 24px;
cursor: pointer;
}
.nav-menu {
list-style: none;
}
.nav-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 0px;
border-bottom: 1px solid #eee;
cursor: pointer; /* Add cursor pointer to show it's clickable */
}
.nav-link {
text-decoration: none;
color: #333;
font-size: 18px;
}
.mob-menu-toggle {
position: absolute;
top: 13px;
right: 20px;
background: none;
border: none;
cursor: pointer;
z-index: 1001;
padding: 10px;
}
.mob-menu-toggle i {
color: black;
transition: transform 0.3s ease-in-out, opacity 0.2s ease-in-out;
}
.mob-menu-toggle .fa-bars {
display: block;
}
.mob-menu-toggle .fa-times {
position: absolute;
top: 10px;
right: 10px;
opacity: 0;
transform: rotate(-90deg);
}
.mob-menu-toggle.active .fa-bars {
opacity: 0;
transform: rotate(90deg);
}
.mob-menu-toggle.active .fa-times {
opacity: 1;
transform: rotate(0);
}
.submenu {
display: none;
list-style: none;
background-color: white;
position: absolute;
left: 0;
width: 100%;
height: 100%;
top: 0;
z-index: 1002;
}
.submenu.active {
display: block;
}
.back-btn {
display: flex;
align-items: center;
padding: 15px 20px;
font-size: 16px;
color: #00355C;
cursor: pointer;
}
.back-btn i {
margin-right: 10px;
}
.back-btn-2 {
display: flex;
align-items: center;
padding: 15px 20px;
font-size: 16px;
color: #11111;
cursor: pointer;
}
.back-btn-2 i {
margin-right: 10px;
}
.submenu-item {
padding: 25px 20px;
border-bottom: 1px solid #eee;
margin: auto;
width: 90%;
}
.submenu-link {
font-size: 20px !important;
line-height: 24px !important;
text-decoration: none;
color: #333;
font-size: 16px;
display: block;
}
.research-submenu {
display: none;
list-style: none;
}
.research-submenu.active {
display: block;
}
.research-header i {
transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.research-header {
display: flex;
justify-content: space-between;
align-items: center;
color: #333; /* Default black color */
transition: color 0.3s ease;
}
.research-header a{
color: #333;
text-decoration: none;
font-size: 20px;
line-height: 24px;
}
.research-header.active {
color: #E87722; /* Orange color when active */
}
.research-header i {
transition: transform 0.3s ease-in-out;
}
/*.research-header.active i {*/
/* transform: rotate(180deg);*/
/*}*/
.submenu-item.d-flex.js {
display: flex;
justify-content: space-between;
align-items: center;
color: #333;
transition: color 0.3s ease;
}
.submenu-item.d-flex.js.active {
color: #E87722;
}
.submenu-item.d-flex.js i {
transition: transform 0.3s ease-in-out;
}
.submenu-item.d-flex.js i.rotate {
transform: rotate(180deg);
}
.data-submenu {
display: none;
list-style: none;
padding-left: 20px;
}
.data-submenu.active {
display: block;
}
.submenu-item.d-flex.js .submenu-link {
color: #333;
transition: color 0.3s ease;
}
.submenu-item.d-flex.js.active .submenu-link {
color: #E87722;
}
.nav-head{
display: flex;
justify-content: space-between;
align-items: center;
padding: 25px 0px 25px 15px;
}
.mobile-header{
box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 4px -1px;
z-index: 99999;
position: sticky;
top: 0;
background: #fff;
width: 100%;
}
.open-mainhead{
font-size: 32px !important;
font-weight: 400 !important;
line-height: 44px !important;
color: #00000 !important;
}
.data-access-label{
display: block;
margin: 10px 0 5px;
font-size: 16px;
font-weight: 400;
}
.form-row {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 10px;
}
.mt-35{
margin-top: 35px;
}
.form-group label{
font-weight: 400 !important;
margin-bottom: 10px !important;
font-size: 16px!important;
color: #111111 !important;
margin-top: 10px !important;
}
.data-access-inp {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 7px;
font-size: 14px;
}
.data-access-textarea{
height: 100px;
resize: vertical;
}
.checkbox-group {
align-items: center !important;
display: flex;
align-items: flex-start;
margin: 15px 0;
}
.check-label{
margin-bottom: 0px !important;
}
.anker-we {
font-size: 16px;
color: #00355C;
font-weight: 400;
text-decoration: underline !important;
display: inline-block;
margin: 10px 0 15px 0;
}
.footer-note {
font-size: 15px;
font-weight: 300;
color: #666666;
margin-top: 25px;
line-height: 1.5;
}
.f-top-btn{
background-color: #003366;
display: flex;
align-items: center;
width: 100%;
min-width: 138px;
padding: 4px 4px;
height: 48px;
align-items: center;
gap: 8px !important;
border-radius: 30px;
}
.f-top-btn i{
color: #fff;
background-color: rgb(255, 255, 255, 0.2);
width: 40px;
height: 40px;
border-radius: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.f-top-btn h6{
margin-bottom: 0px;
color: #fff;
font-weight: 500;
font-size: 16px;
}
.team-tabs {
padding: 10px 20px 15px 20px;
}
.team-tab-links {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #666666;
}
.team-tab-link {
font-family: "Hanken Grotesk", sans-serif !important;
background: none;
border: none;
font-size: 16px;
font-weight: 500;
padding: 15px 30px;
color: #666666;
cursor: pointer;
position: relative;
transition: color 0.3s ease;
}
.team-tab-link.team-active,
.team-tab-link:hover {
color: #CF6737;
}
.team-tab-link i {
margin-right: 10px;
}
.team-tab-link::after {
content: '';
position: absolute;
width: 0;
height: 3px;
bottom: -1px;
left: 50%;
background: #CF6737;
transition: all 0.4s ease;
}
.team-tab-link.team-active::after {
width: 100%;
left: 0;
}
.team-tab-content {
margin-top: 50px;
display: none;
animation: fadeInUp 0.5s ease;
padding: 5px 10px 15px 10px;
}
.team-tab-content.team-active {
display: block;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* our-story-line-animation */
/* Timeline Section */
.ga-energy-justice-wrapper {
display: flex;
flex-direction: row;
position: relative;
width: 100%;
}
.ga-timeline-container-2 {
width: 50px;
position: relative;
margin-right: 30px;
}
.ga-timeline-container-2 img {
display: none;
}
.ga-orange-badge {
position: relative;
margin-bottom: 20px;
}
.line-container-2 {
position: relative;
width: 145px;
height: 100%;
}
.start-point, .end-point {
display: none;
}
.main-line.d-none {
display: none;
}
.ourstory-line {
width: 2px;
background-color: #00528D;
position: absolute;
left: 73px;
transform: translateX(-50%);
top: 0;
height: 0;
}
#our-journey-btn {
width: 150px;
height: 40px;
background-color: #F9DA78;
border-radius: 20px;
text-transform: uppercase;
color: #000;
position: absolute;
left: 73px;
transform: translateX(-50%);
top: 100px;
opacity: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
}
.ga-content {
flex: 1;
}
.ga-our-ny-timeline-container {
position: absolute;
top: 200px;
left: 48px;
width: 50px;
height: calc(100% - 200px);
}
.ga-our-ny-timeline-item {
position: relative;
}
.ga-our-ny-timeline-marker {
position: absolute;
left: 25px;
transform: translateX(-50%);
opacity: 0;
}
.ga-posi-relative {
position: relative;
}
.rotate {
transform: rotate(180deg);
transition: transform 0.3s ease;
}
.member-card{
display: flex;
align-items: center;
gap: 45px;
padding-top: 20px;
padding-bottom: 30px;
}
.member-img{
position: relative;
}
.member-img img{
width: 376px;
height: 376px;
clip-path: circle(50% at 50% 50%); /* Creates a circle with 50% radius at center */
object-fit: cover;
}
.member-img::before{
content: '';
background-color: #CF6737;
width: 225px;
height: 450px;
border-radius: 230px 0px 0px 230px;
z-index: -9999;
background-repeat: no-repeat !important;
position: absolute;
top: -38px;
left: -40px;
}
.member-img::after{
content: '';
background-color: #F9DA78;
width: 200px;
height: 200px;
border-radius: 100%;
z-index: -9999;
background-repeat: no-repeat !important;
position: absolute;
top: 50px;
left: 312px;
}
.line-container-3 {
position: relative;
width: 100%;
padding-bottom: 60px;
/* Position it in the middle of the viewport initially */
}
/* The main horizontal line */
.main-line-3 {
position: absolute;
top: 50%;
left: 0;
height: 2px;
background-color: #00528D;
width: 0;
/* Start with 0 width, will animate to 100% */
opacity: 0;
/* Start with 0 opacity, will fade in */
}
/* The branch line */
.branch-line-3 {
position: absolute;
top: 50%;
left: 10%;
/* Branch starts after 10% of the main line */
width: 2px;
height: 0;
/* Start with 0 height, will animate downward */
background-color: #00528D;
opacity: 0;
/* Start with 0 opacity, will fade in */
}
/* The oval button at the end of the branch */
.oval-button-3{
position: absolute;
top: 50%;
left: 10%;
transform: translate(-50%, 50px);
/* Center the button horizontally on the branch */
width: 150px;
height: 40px;
background-color: #F9DA78;
border-radius: 20px;
display: flex;
text-transform: uppercase;
align-items: center;
justify-content: center;
color: #000;
font-size: 13px;
font-weight: bold;
opacity: 0;
/* Start hidden, will fade in */
}
.postion-number{
position: relative;
}
.balls{
padding-top: 60px;
}
.circle-2 {
top: -20%;
left: -65%;
position: absolute;
width: 192px;
height: 192px;
border-radius: 50%;
margin: auto;
background-color: #ABCEDC;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.circle-3 {
bottom: -40%;
left: -79%;
position: absolute;
width: 245px;
height: 245px;
border-radius: 50%;
margin: auto;
background-color: #D3CFE3;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.circle-4 {
top: -52%;
left: 95%;
position: absolute;
width: 245px;
height: 245px;
border-radius: 50%;
margin: auto;
background-color: #C9D2D7;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.circle-5 {
bottom: -60%;
left: 95%;
position: absolute;
width: 337px;
height: 337px;
border-radius: 50%;
margin: auto;
background-color: #C8A3AB;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.circle-1 {
width: 313px;
height: 313px;
border-radius: 50%;
margin: auto;
background-color: #D1E6D0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.circle-content {
display: flex;
flex-direction: column; /* Stack vertically */
align-items: center;
justify-content: center;
}
.circle-content h3 {
font-size: 80px !important;
font-weight: 300 !important;
margin: 0;
}
.txt-circle {
font-size: 18px;
width: 100%;
color: #333;
margin-top: 15px; /* Space between number and text */
}
.filter-bar select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background: transparent;
padding-right: 32px;
position: relative;
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23333333' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 15px center;
border: 1px solid #E5E5E5;
border-radius: 20px;
padding: 0px 32px 0px 18px;
height: 42px;
font-size: 14px;
color: #333;
min-width: 100px;
}
.filter-bar select:focus {
outline: none !important; /* Remove yellow border */
background-color: #00355C !important;
color: white;
border-color: #00355C !important;
box-shadow: 0 0 0 2px rgba(0, 59, 92, 0.2); /* Custom focus style */
background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 5L5 1L9 5' stroke='%23FFFFFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Remove yellow focus ring in WebKit browsers (Chrome, Edge) */
.filter-bar select::-webkit-focus-ring {
outline: none !important;
border: none !important;
}
.filter-bar select option {
background-color: white;
color: #333;
padding: 10px 15px;
}
/* For Firefox */
.filter-bar select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #333;
outline: none !important;
}
.filter-bar select::-ms-expand {
display: none;
}
/* Filter options styling */
.filter-select.selected{
background-color: #00355C !important;
color: #fff !important;
}
.filter-options {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
width: 100%;
margin-bottom: 30px;
}
.filter-options .filter-btn {
padding: 7px 28px;
border: none;
background: #003B5C;
color: white;
border-radius: 20px;
cursor: pointer;
font-size: 14px;
white-space: nowrap;
min-width: 80px;
text-align: center;
font-weight: 500;
transition: all 0.3s ease;
}
.filter-options .filter-select:focus ~ .filter-btn,
.filter-options .filter-select:focus-within ~ .filter-btn {
background: #fff;
color: #fff;
border: 1px solid #E5E5E5;
}
.filter-options .filter-btn.active {
background: #00355C;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.filter-options .filter-select {
padding: 7px 32px 7px 18px;
border: 1px solid #E5E5E5 !important;
border-radius: 20px;
font-size: 14px;
color: #333 !important;
background-color: white !important;
cursor: pointer !important;
min-width: 140px;
width: auto;
text-align: left;
appearance: none;
-webkit-appearance: none; /* Remove default styles in WebKit browsers */
-moz-appearance: none; /* Remove default styles in Firefox */
background-image: url("data:image/svg+xml,%3Csvg width=%2710%27 height=%276%27 viewBox=%270 0 10 6%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M1 1L5 5L9 1%27 stroke=%27%23333333%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 15px center;
transition: all 0.3s ease;
}
/* Style for active/focused state with white arrow */
.filter-options .filter-select:focus,
.filter-options .filter-select.active {
background-color: #00355C !important;
color: white !important;
border-color: #00355C !important;
outline: none !important; /* Remove yellow border */
background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 5L5 1L9 5' stroke='%23FFFFFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Remove yellow focus ring in WebKit browsers (Chrome, Edge) */
.filter-options .filter-select::-webkit-focus-ring {
outline: none !important;
border: none !important;
}
/* Add rotation animation for the background image */
.filter-options .filter-select {
transition: background-image 0.3s ease, transform 0.3s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}
.filter-options .filter-select option {
background-color: white;
color: #333;
padding: 10px 15px;
font-size: 14px;
cursor: pointer;
}
.filter-options .filter-select option:hover,
.filter-options .filter-select option:focus {
background-color: #00355C !important;
color: white !important;
border: none !important;
}
.filter-options .filter-select:focus option:checked {
background-color: #00355C !important;
color: white !important;
}
.filter-options .filter-select optgroup {
padding: 8px 0;
font-weight: 500;
}
/* Style for the dropdown arrow when select is focused */
.filter-options .filter-select:focus {
background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 5L5 1L9 5' stroke='%23FFFFFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* When select has a value selected */
.filter-options .filter-select[value]:not([value=""]) {
color: #00355C;
font-weight: 500;
}
/* Dropdown menu styling */
.dropdwn-mnu {
position: absolute;
top: 100%;
right: 5px;
display: none;
z-index: 1000;
width: 420px;
padding: 6px;
opacity: 0;
transform: translateY(-15px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.dropdwn-mnu.show {
display: block;
opacity: 1;
transform: translateY(0);
}
/* Publications grid animation */
.publications-grid {
transition: transform 0.3s ease;
}
.publications-grid.shift-down {
transform: translateY(50px);
}
/* Add margin to header for smooth transition */
.header {
margin-bottom: 0px;
transition: margin-bottom 0.3s ease;
}
.header.expanded {
margin-bottom: 70px !important;
}
.filter-btn.active {
background-color: #00355C; /* active state */
}
.filter-btn.changed {
border: 1px solid #E5E5E5 !important;
color: #333;
background-color: transparent !important;
}
.tag-dropdown {
position: relative;
display: inline-block;
}
.tag-dropdown-toggle {
padding: 10px 20px;
border: 1px solid #ccc;
border-radius: 20px;
background-color: white;
cursor: pointer;
}
.tag-dropdown-menu {
display: none;
position: absolute;
top: 100%;
left: -100px;
z-index: 1;
background-color: white;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
min-width: 230px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.tag-dropdown-item {
display: block;
margin-bottom: 5px;
}
.tag-dropdown-menu.tag-show {
display: block;
}
.speaker-image {
margin-right: 20px;
position: relative;
}
.speaker-image img{
width: 150px !important;
height: 150px !important;
object-fit: cover;
border-radius: 100%;
}
.speaker-image::before{
border-radius: 230px 0px 0px 230px;
content: "";
position: absolute;
top: -11px;
left: -11px;
background-color: transparent;
z-index: -9999;
width: 100px;
height: 170px;
}
.speaker-1::before{
background-color: #65AC62 !important;
}
.speaker-2::before{
background-color: #CF6737 !important;
transform: rotate(180deg);
left: 60px !important;
}
.speaker-3::before{
background-color: #F9DA78 !important;
}
.speaker-4::before{
background-color: #0780C3 !important;
transform: rotate(180deg);
left: 60px !important;
}
.preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
overflow: hidden;
z-index: 99999;
}
.text-container {
display: flex;
flex-direction: row;
overflow: hidden;
color: #000;
visibility: hidden;
}
.text-container h1{
font-size: 50px;
}
@keyframes customZoomIn {
0% {
opacity: 0;
transform: scale(0.3);
}
50% {
opacity: 1;
}
100% {
transform: scale(1);
}
}
.zoomInCustom {
animation-name: customZoomIn;
}
.animated {
animation-duration: 1s;
animation-fill-mode: both;
}
.sub-heading-dta{
font-size: 20px !important;
color: #000000 !important;
font-weight: 500 !Important;
margin-top: 20px;
}
.marr{
font-size: 16px !important;
line-height: 28px !important;
color: #333333 !important;
font-weight: 400 !important;
}
.data-form-heading{
font-weight: 400 !important;
color: #111111 !important;
font-size: 32px !important;
line-height: 40px !important;
}
.m-0{
margin: 0 !important;
}