/* fonts */
@font-face {
    font-family: 'roboto_r';
    src: url('../fonts/Roboto-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'roboto_m';
    src: url('../fonts/Roboto-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'roboto_b';
    src: url('../fonts/Roboto-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'roboto_black';
    src: url('../fonts/Roboto-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'roboto_eb';
    src: url('../fonts/Roboto-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'roboto_l';
    src: url('../fonts/Roboto-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'roboto_sb';
    src: url('../fonts/Roboto-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'roboto_t';
    src: url('../fonts/Roboto-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'rubik_black';
    src: url('../fonts/Rubik-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'rubik_b';
    src: url('../fonts/Rubik-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'rubik_eb';
    src: url('../fonts/Rubik-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'rubik_l';
    src: url('../fonts/Rubik-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'rubik_m';
    src: url('../fonts/Rubik-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'rubik_r';
    src: url('../fonts/Rubik-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'rubik_sb';
    src: url('../fonts/Rubik-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* ============================================
   GLOBAL STYLES & VARIABLES
   ============================================ */
:root {
    --primary: #076297;
    --second: #66a900;
    --white: #fff;
    --dark: #000;
    --text: #1f2937;
}

html {
  scroll-behavior: smooth;
}

body {    
    font-family: "Roboto", sans-serif, "Rubik", sans-serif;
    background-color: var(--white);
    font-style: normal;
    font-optical-sizing: auto;
    /* text-wrap: balance; */
}
.form-control:focus {box-shadow: none;}
/* custom css */
p {letter-spacing: 0.1px;font-size: 1em;}
ul {list-style: none;padding-left: 0;margin-bottom: 0;}
a, a:hover {text-decoration: none;transition: all 0.3s ease;display: inline-block;}
button {outline: none;transition: all 0.3s ease;border: 0;}
.section {width: 100%;overflow: hidden;}

.container {max-width: 1340px;}

/* Buttons */
.btn-split, .cd-white {
    position: relative;
    padding: 10px 34px;
    font-size: 16px;
    font-family: 'roboto_m';
    color: var(--white);
    background: var(--primary);
    border: none;
    border-radius: 24px;
    cursor: pointer;
    overflow: hidden;
}
.cd-white {background-color: var(--white);color: var(--primary);}
.cd-white:hover {color: var(--white);}
.btn-split span, .cd-white span {
    position: relative;
    z-index: 2;
    transition: all 0.4s ease;
    display: inline-block;
}
.btn-split::before,
.btn-split::after,
.cd-white::before,
.cd-white::after {
    content: "";
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    color: var(--white);
    background: var(--second);
    transition: transform 0.4s ease;
    z-index: 1;
}
.cd-white::before,
.cd-white::after {background-color: var(--second);color: var(--white) !important;}
.btn-split::before {
    left: 0;
    transform: translateX(-100%);
}
.btn-split::after {
    right: 0;
    transform: translateX(100%);
}
.btn-split:hover::before {
    transform: translateX(0);
}
.btn-split:hover::after {
    transform: translateX(0);
}
.btn-split:hover span {
    letter-spacing: 2px;
}

/* ==== list ==== */
.cd-list {padding-left: 10px;margin-bottom: 1.5rem;}
.cd-list li {position: relative;padding-left: 1.5rem;font-family: 'rubik_m';color: var(--primary);padding-block: 5px;}
.cd-list li::before {position: absolute;content: '\f00c';font-family: "Font Awesome 6 Pro";color: #66a900;left: 0;font-weight: 800;}

/* font size */
.cd-sectiontitle .titleh2 { color: var(--primary);font-size: clamp(1.8rem, 2vw, 2.5em);font-family: 'rubik_sb';}
.cd-sectiontitle .title36 {font-size: 2.75em;font-weight: 600;margin-bottom: 8px;color: var(--dark);}
.cd-sectiontitle .cd-subtitle {font-size: 1.25em;font-family: 'rubik_m';color: var(--primary);}
.cd-sectiontitle .cd-subtitle18 {font-size: 18px;font-weight: bold;color: var(--btn-bg);}
.cd-titleh3 {font-size: 22px;font-weight: 600;}

/* custom css # */

/* top bar */
.cd-topbar {background-color: #f5f5f5;padding: 8px 0;}
.cd-topbar .cd-rightside {display: flex;gap: 10px;}
.cd-topbar .cd-rightside .cd-gratingText {color: var(--primary);}
.cd-topbar .cd-rightside .cd-rating {font-size: 1em;color: #ff8a00;}
.cd-topbar .cd-leftside ul {display: flex;gap: 10px;justify-content: end;position: relative;}
.cd-topbar .cd-leftside ul li {position: relative;}
.cd-topbar .cd-leftside ul li:first-child {border-right: 2px solid var(--primary);padding-right: 10px;}
.cd-topbar .cd-leftside ul .cdlink {color: var(--primary);}
.cd-topbar .cd-leftside ul .cdlink:hover {color: var(--dark);}

/* ========= header ========== */
.navbar {background-color: var(--white);}
.cd-navheader .cd-logo {height: 39px;}
.cd-navheader .nav-link {font-size: 1em;color: var(--primary);font-weight: 400;padding-inline: 1rem !important;}
.cd-navheader .nav-link:hover {color: var(--dark);}
.cd-navheader .cd-navregisterBtn {background-color: #66a900;color: var(--white);border-radius: 24px;font-family: 'rubik_m';padding: 10px 18px;}
.cd-navheader .cd-navregisterBtn:hover {background-color: #66a900;color: var(--white);box-shadow: 0 10px 13px -14px #000;}

/* ------ hero ------- */
.slider-container {width: 100%;}
.slider-container .cd-innerbox {position: relative;}
.slider-container .cd-innerbox .cd-textbox {position: absolute;max-width: 1320px;margin: 0 auto;left: 0;right: 0;top: 5rem;color: white;}
.slider-container .cd-innerbox .cd-textbox .cd-headingText {font-size: clamp(1.5rem, 3vw, 2.5rem);font-family: 'rubik_r';}
.slider-container .cd-innerbox .cd-textbox .cd-secondText {font-size: clamp(1.125rem, 2vw, 1.375rem);font-family: 'rubik_r';margin: 1rem 0 1.5rem;}
.slide-box {background: var(--white);overflow: hidden;}
.slide-box img {width: 100%;display: block;}
.slick-prev:before, .slick-next:before {color: #000;font-size: 25px;}

/* === about === */
.cd-about {padding: 4rem 0;}
.cd-about .cd-clogo{position: relative;margin-bottom: 5rem;}
.cd-about .cd-clogo::after {position: absolute;content: '';background-image: url('../images/c-logo-png.webp');background-repeat: no-repeat;background-position: top center;background-size: cover;top: 0;width: 100%;min-height: 230px;}
.cd-about .cd-aboutTitle {font-size: clamp(2rem, 3vw, 3.75rem);font-family: 'rubik_l';color: var(--primary);}
.cd-about .cd-leftSide p {font-family: 'rubik_r';color: var(--primary);}



/* === solustion === */
.cd-solustion {text-align: center;padding: 4rem 0;}
.cd-solustion .cd-innerbox {padding: 3rem 2.5rem;border-radius: 3rem;background-image: linear-gradient( 45deg, rgb(7,98,151) 0%, rgb(102,169,0) 100%);background-image: -moz-linear-gradient( 45deg, rgb(7,98,151) 0%, rgb(102,169,0) 100%);background-image: -webkit-linear-gradient( 45deg, rgb(7,98,151) 0%, rgb(102,169,0) 100%);background-image: -ms-linear-gradient( 45deg, rgb(7,98,151) 0%, rgb(102,169,0) 100%);}
.cd-solustion .cd-sectionTitle h2 {font-size: clamp(1.8rem, 3vw, 3rem);color: var(--white);font-family: 'rubik_b';}
.cd-solustion .cd-sectionTitle p {font-size: clamp(1.5rem, 2vw, 1.25rem);color: var(--white);font-family: 'rubik_m';}
.cd-solustion .cd-card {margin: 10px 0;}
.cd-solustion .cd-card figure {margin: 0;overflow: hidden;border-radius: 20px;}
.cd-solustion .cd-card h3 {color: var(--white);font-size: clamp(1.2rem, 2vw, 1.5rem);font-family: 'roboto_b';margin: 1.5rem 0 1rem;}
.cd-solustion .cd-card p {color: var(--white);font-size: clamp(1rem, 2vw, 1rem);font-family: 'roboto_r';margin-bottom: 1.5rem;}
.cd-solustion .cd-smallbox {max-width: 930px;margin: 0 auto;background-image: linear-gradient(45deg, rgb(7 98 151 / 39%) 0%, rgb(102 169 0 / 22%) 100%);background-image: -moz-linear-gradient(45deg, rgb(7 98 151 / 39%) 0%, rgb(102 169 0 / 22%) 100%);background-image: -webkit-linear-gradient(45deg, rgb(7 98 151 / 39%) 0%, rgb(102 169 0 / 22%) 100%);background-image: -ms-linear-gradient(45deg, rgb(7 98 151 / 39%) 0%, rgb(102 169 0 / 22%) 100%);border-bottom-left-radius: 3rem;border-bottom-right-radius: 3rem;}
.cd-solustion .cd-smallbox .cd-innerinfo {padding: 5px 3rem 2rem;display: flex;align-items: center;justify-content: space-between;gap: 10px;flex-wrap: wrap;}
.cd-solustion .cd-smallbox .cd-innerinfo .cd-textbox {text-align: left;}
.cd-solustion .cd-smallbox .cd-innerinfo .cd-textbox h4 {font-size: clamp(1.2rem, 2vw, 1.5rem);font-family: 'rubik_m';color: var(--primary);}
.cd-solustion .cd-smallbox .cd-innerinfo .cd-textbox h5 {font-size: clamp(1rem, 2vw, 1.125rem);font-family: 'rubik_m';color: var(--primary);}

/* ==== service ==== */
.cd-service {padding: 4rem 0;}
.cd-service .sprite {display: inline-block; vertical-align: middle;}
.cd-service .sprite {background-image: url('../images/icon/services.webp'); background-position: left center; background-repeat: no-repeat;}
.cd-service .sprite.s1_png {background-position: 0 0; width: 60px; height: 60px;}
.cd-service .sprite.s2_png {background-position: 0 -65px; width: 60px; height: 60px;}
.cd-service .sprite.s3_png {background-position: 0 -130px; width: 60px; height: 60px;}
.cd-service .sprite.s4_png {background-position: 0 -195px; width: 60px; height: 60px;}
.cd-service .sprite.s5_png {background-position: 0 -260px; width: 60px; height: 60px;}
.cd-service .cd-serviceIcon {display: grid;grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));gap: 20px;text-align: center;}
.cd-service .cd-round {display: flex;flex-direction: column;align-items: center;justify-content: center;transition: transform 0.3s ease;padding: 1rem;cursor: pointer;margin: 1rem 0;}
.cd-service .cd-round:hover {transform: translateY(-5px);}
.cd-service .cd-round p {font-size: 1em;font-family: 'rubik_m';color: var(--primary);margin-bottom: 0;}
.cd-service .cd-iconround {width: 134px;height: 134px;border-radius: 50%;background: var(--primary);display: flex;align-items: center;justify-content: center;margin-bottom: 1rem;box-shadow: 3px 4px 7px 1px rgb(0 0 0 / 14%);border: 1px solid #38b5e7;transition: all 0.5s ease;}
.cd-service .cd-iconround:hover {background-color: var(--second);}
.cd-service .cd-iconround span {width: 40px;height: 40px;display: block;}

/* ==== choose ==== */
.cd-whyChoose .cd-sectiontitle .titleh2 {margin-bottom: 1.5rem;}
.cd-whyChoose .cd-sectiontitle .cd-subtitle {margin-bottom: 10px;}
.cd-whyChoose .cd-rightside .cd-listwork {border-radius: 20px;padding: 1.6rem 2rem;display: flex;align-items: center;gap: 10px;}
.cd-whyChoose .cd-rightside .cd-listwork + .cd-listwork {margin-top: 1.5rem;}
.cd-whyChoose .cd-rightside .cd-listwork {background-color: #dff9df;}
.cd-whyChoose .cd-rightside .cd-listwork:nth-child(2) {background-color: #e7f6ff;}
.cd-whyChoose .cd-rightside .cd-listwork:nth-child(3) {background-color: #fff7e8;}
.cd-whyChoose .cd-rightside .cd-listwork .cd-counter {font-size: clamp(2rem, 3vw, 3.75rem);font-family: 'rubik_l';color: var(--primary);margin-right: 1rem;}
.cd-whyChoose .cd-rightside .cd-listwork .cd-textbox h3 {color: var(--primary);font-size: clamp(1.2rem, 2.5vw, 1.5rem);font-family: 'rubik_b';}
.cd-whyChoose .cd-rightside .cd-listwork .cd-textbox p {margin-bottom: 0;color: var(--primary);}
.cd-cta {display: flex;align-items: center;gap: 26px;justify-content: center;padding-block: 3rem;}
.cd-cta h3 {font-size: clamp(1.2rem, 2.5vw, 1.5rem);font-family: 'rubik_m';margin-bottom: 0;color: var(--primary);}

/* ==== project ==== */
.cd-projects {background-color: #e7f6ff;padding: 4rem 0;}
.cd-projects .cd-listofProjects {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 20px;margin-top: 1rem;}
/* Card Container */
.cd-projects .solar-card {/*width: 350px;*/overflow: hidden;cursor: pointer;margin: 1rem 0;}
.cd-projects .card-image {position: relative;overflow: hidden;}
.cd-projects .card-image img {width: 100%;display: block;transition: transform 0.5s ease;}
.cd-projects .overlay {position: absolute;inset: 0;background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.1));transition: background 0.4s ease;}
/* Text Content */
.cd-projects .card-content {position: absolute;bottom: 20px;left: 0;right: 0;margin: 0 auto;color: #fff;transition: transform 0.4s ease;}
.cd-projects .card-content h3 {margin: 0;font-size: clamp(1.2rem, 2.5vw, 1.5rem);font-family: 'rubik_sb';text-align: center;padding-inline: 10px;}
/* Hover Effects */
.cd-projects .solar-card:hover img {transform: scale(1.1);}
.cd-projects .solar-card:hover .overlay {background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0.2));}
.cd-projects .solar-card:hover .card-content {transform: translateY(-5px);}
.cd-projects .cd-btnbox {text-align: center;margin-top: 3rem;}

/* ==== ctasection ==== */
.cd-ctasection {background-color: var(--primary);padding: 4rem;color: var(--white);}
.cd-ctasection .cd-msgbtn h2 {font-size:  clamp(1.8rem, 3vw, 2.25rem);font-family: 'rubik_m';}
.cd-ctasection .cd-msgbtn h3 {font-size:  clamp(1.2rem, 3vw, 1.5rem);font-family: 'rubik_r';}
.cd-ctasection .cd-calltext {text-align: right;}
.cd-ctasection .cd-calltext .cd-custcall {color: var(--white);font-size: clamp(2rem, 3vw, 3.75rem);font-family: 'rubik_l';}

/* --- footer --- */
.cd-footer {background-color: var(--white);padding: 4rem 0 0;color: var(--primary);}
.cd-footer .cd-footerinfo {display: flex;align-items: start;gap: 1rem;justify-content: space-between;border-bottom: 1px solid var(--primary);padding-bottom: 3rem;}
.cd-footer .cd-footerinfo .cd-footicon {flex: 0 0 auto;}
.cd-footer .cd-footerinfo .cd-footlist {display: flex;align-items: start;gap: 1.5rem;}
.cd-footer .cd-footerinfo .cd-footlist h3 {font-size: clamp(1.2rem, 3vw, 1.5rem);font-family: 'rubik_m';}
.cd-footer .cd-footerinfo .cd-footlist p {font-size: 1em;font-family: 'rubik_m';margin-bottom: 0;}
.cd-footer .cd-link {color: var(--primary);}
.cd-copyright {text-align: center;padding: 2.5rem 0;display: flex;justify-content: center;gap: 10px;}
.cd-copyright p, .cd-copyright .cd-policy {font-size: 1em;font-family: 'rubik_m';margin-bottom: 0;color: var(--primary);}
.cd-copyright .cd-policy {text-decoration: underline;}

/*===========
     Mobile view 
=================*/
.mobile-sticky-footer {
	display: inline-block;
	width: 100%;
}
.mobile-sticky-footer {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	background-color: var(--primary);
}
.mobile-sticky-footer a {
	float: left;
	width: 20%;
	padding: 3px 10px;
	text-align: center;
	color: var(--white);
	font-size: 26px;
}
.mobile-sticky-footer a:hover {
	background-color: rgba(0,0,0,0.5);
}
/*======= # Mobile view =======*/

/* ======= back to top ========== */
#return-to-top {
    position: fixed;
    border: 2px solid #fff;
    bottom: 20px;
    right: 20px;
    background-color: #000;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    line-height: 39px;
    display: block;
    text-decoration: none;
    display: none;
    text-align: center;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    z-index: 9999;
    -webkit-box-shadow: 0px 0px 19px 0px rgba(0,0,0,0.25);
    box-shadow: 0px 0px 19px 0px rgba(0,0,0,0.25);
    opacity: 0.3;
}
#return-to-top:hover {opacity: 1;}
#return-to-top i {
    color: #fff;
    font-weight: 600;
    margin: 0;
    top: 0;
    position: relative;
    font-size: 22px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    cursor: pointer;
}
/* ======= # back to top ========== */


/* ============================================
   RESPONSIVE UTILITIES
   ============================================ */
@media (min-width: 992px) {
    .mobile-sticky-footer {display: none;}
    
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    
}
@media (max-width: 991px) {
    .cd-topbar {display: none;}
    #return-to-top {bottom: 50px;}
    .cd-navheader button.navbar-toggler {border: 0;padding: 0;}
    .cd-footer {margin-bottom: 45px;}
    .cd-footer .cd-footerinfo {flex-wrap: wrap;}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    
}
@media (max-width: 767px) {    
    .cd-copyright {flex-wrap: wrap;}
    .slider-container .cd-innerbox .cd-textbox {top: 5rem;padding-inline: 1rem;}
    .slide-box img {width: auto;}
    .cd-about, .cd-solustion, .cd-service, .cd-projects {padding: 2rem 0;}
    .cd-footer {padding-top: 2rem;}
    .cd-solustion .cd-innerbox {padding: 2rem 1.5rem;}
}
@media only screen and (min-width: 640px) and (max-width: 767px) {
    
}
@media (max-width: 639px) {
    .cd-about .cd-clogo::after {min-height: 60px;}
    .cd-about .cd-clogo {margin-bottom: 2rem;}
    .cd-solustion .cd-smallbox { margin-top: -45px;padding-top: 4rem;z-index: -1;position: relative;}
    .cd-solustion .cd-smallbox img {display: none;}
    .cd-solustion .cd-smallbox .cd-innerinfo {justify-content: center;}
    .cd-service .cd-serviceIcon {gap: 0;}
    .cd-service .cd-round {margin: 0;}
    .cd-whyChoose .cd-rightside {margin-top: 2rem;}
    .cd-cta {flex-wrap: wrap;text-align: center;padding-block:2rem}
    .cd-projects .cd-listofProjects {gap: 0;}
    .cd-projects .cd-btnbox {margin-top: 2rem;}
    .cd-ctasection {padding: 1.5rem;}
    .cd-ctasection .cd-calltext {text-align: center;}
    .cd-ctasection .cd-calltext .cd-custcall {margin-top: 1rem;}
}