@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800&display=swap");
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {
margin: 0;
padding: 0;
}
body {
font-family: 'DM Sans', sans-serif;
font-size: 14px;
color: #000;
}
a {
text-decoration: none;
}
.f40 {
font-size: 40px;
}
.f35 {
font-size: 35px;
font-weight: 500;
}
.f20 {
font-size: 20px;
}
.f25 {
font-size: 25px;
}
.f18 {
font-size: 18px;
}
.f12 {
font-size: 12px;
}
.f11 {
font-size: 11px;
}
.f16 {
font-size: 16px; 
}
.bggrey {
background: #F5F5F5;
}
.yellowbg {
background-color: #FFDE25;
}
.yelltopborder {
border-top: 8px solid #FFDE25;
}
.blulink {
color: #0165B3;
}
.blulink:hover {
color: #0165B3;
}
header {
box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.1);
}
.menu-primary-menu-container {
margin:0 auto !important;
}
.navbar .dropdown:hover .dropdown-menu {
display: block;
opacity: 1;
}
.navbar-nav .nav-link {
color: #212529;
font-weight: 500;
transition: all 0.3s ease;
padding: 10px 48px;
margin: 7px 7px 7px 7px;
border-radius: 25px;
font-size: 16px;
padding: 10px 23px !important;
}
.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active, .navbar-nav li.active .nav-link {
background-color: #0165B3;
color: #FFF !important;
}
.dropdown:hover .nav-link  {
background-color: #0165B3;
color: #FFF !important;
}
.navbar-nav .dropdown-menu li.active .nav-link.active {
color: #000 !important;
}
.navbar-expand-lg .navbar-nav .dropdown-menu {
position: absolute;
left: 10px;
border-radius: 10px;
border: 1px solid #D2D2D2;
padding: 0px;
width: 212px;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
}
.dropdown-toggle::after {
display: none;
border: none;
}
.dropdown-toggle {
position: relative;
top: -4px;
}
.dropdown-item {
font-size: 14px;
padding: 8px 10px;
} .dropdown-menu li:first-child a.dropdown-item:hover, .dropdown-menu li:first-child a.nav-link.active {
border-top-left-radius: 10px !important;
border-top-right-radius: 10px !important;
} .dropdown-menu li:last-child a.dropdown-item:hover, .dropdown-menu li:last-child a.nav-link.active {
border-bottom-left-radius: 10px !important;
border-bottom-right-radius: 10px !important;
}
.dropdown-item:hover, .dropdown-item.active, .dropdown-menu .nav-link.active {
background-color: #FFDE25 !important;
color: #000 !important;
border-radius: 0 !important;
margin: 0 !important;
padding: 8px 10px !important;
font-size: 14px !important;
}
.dropdown-menu .nav-link.active::after {
display: none !important;
}
.nav-item.dropdown .nav-link::after {
content: '\f107'; 
font-family: "Font Awesome 6 Free";
font-weight: 700;
margin-left: 3px;
transition: transform 0.3s ease;
display: inline-block;
position: relative;
top: 3px;
}
.dropdown-toggle::after {
vertical-align: 0;}
.nav-item.dropdown:hover .nav-link::after {
transform: rotate(180deg);
color: #FFF;
}
.bannertxt {
margin-top: 190px;
}
.bannertxt h1 {
font-size: 48px;
}
.bannertxt h1 span {
font-size: 48px;
font-weight: bold;
color: #FFDE25;
}
.video-wrapper {
position: relative;
width: 100%;
margin: auto;
overflow: hidden;
border-radius: 30px;
}
.video-el {
width: 100%;
object-fit: cover;
border-radius: 25px;
transition: all 0.5s 
ease;
position: relative;
z-index: 0;
}
.contnumb {
font-size: 88px;
white-space: pre-wrap;
}
.numbtxt {
font-size: 25px;
white-space: pre-wrap;
color: #463F3F;
font-weight: 400;
}
.features-section {
background-color: #005da8;
color: white;
padding: 40px;
background-image: url(//suntechnologiesindia.com/wp-content/themes/octoniontheme/images/blueprint.png); 
background-size: contain;
}
.feature-item {
margin-bottom: 30px;
}
.feature-item img {
margin-right: 15px;
width: 60px;
height: 68px;
}
.feature-item h5 {
font-weight: 500;
font-size: 22px;
}
.headtxt {
position: absolute;
top: 15%;
}
.headtxt h2, .ourclients h2, .vissionmission h2, .heading h2 {
font-size: 35px;
font-weight: 500;
}
.slick-slide img {
margin: 0 auto;
}
.viewbtn {
background-color: #0165B3;
color: #fff;
text-transform: uppercase;
padding: 11px 23px;
font-size: 16px;
font-weight: 500;
}
.viewbtn:hover {
background-color:#FFDE25 ;
color: #000;
}
.cntbtn {
background-color: #FFF;
color: #0165B3;
text-transform: uppercase;
padding: 11px 23px;
font-size: 16px;
font-weight: 500;
border-radius: 15px;
border: 1px solid #fff;
margin-top: 20px;
}
.cntbtn:hover {
background-color: transparent;
color: #fff;
border: 1px solid #fff;
}
.achivebtn {
background-color: #0165B3;
color: #fff;
padding: 11px 23px;
font-size: 16px;
font-weight: 500;
}
.achivebtn:hover {
background-color: #041929;
color: #fff;
}
.banner {
position: relative;
width: 100%;
height: 300px; margin-top: 190px;
}
.banner img {
width: 100%;
height: 100%; object-fit: cover; border-radius: 30px;
display: block;
margin-top: 30px;
}
.banner .overlay-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
text-align: center;
}
.banner h1 {
font-size: 48px;
font-weight: 500;
color: #fff;
}
.whtwedotxt {
top: 25%;
}
.achvetxt {
top: 9.5%;
left: 3%;
}
.yellowbox {
background-color: #FFDE25;
padding: 30px;
border-radius: 18px;
width: 55%;
height:550px;
}
.techspecf .table-striped > tbody > tr:nth-of-type(odd) > * {
background-color: #FFFEFA !important; }
.techspecf  tr {
background-color: #FFFEFA !important; }
.techspecf  td, .techspecf  th{
padding: 18px !important; }
.numbered-list {
list-style: none;
padding: 0;
margin: 0;
}
.numbered-list li {
display: flex;
align-items: flex-start;
margin-bottom: 25px;
}
.number {
font-size: 45px;
font-weight: 500;
color: #D9D7D7; margin-right: 15px;
flex-shrink: 0;
}  .nav-tabs {
border: 0;
}
.nav-tabs .nav-link {
color: #000;
border-radius: 0;
margin-right: 8px;
padding: 10px 148px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
background-color: #F0F0F0;
border-bottom: 0;
} .nav-tabs .nav-link.active {
background-color: #005da8 !important;
color: #fff !important;
} .nav-tabs .nav-link:hover {
background-color: #005da8 !important;
color: #fff;
} .tab-content {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
border-top: none;
border-bottom: none;
padding: 20px;
}
.language-dropdown .btn {
background-color: #f8f9fa;
border: 1px solid #ddd;
color: #333;
margin-left: 40%;
margin-top: 7%;
width: 120px;
}
.language-dropdown .dropdown-item.active, .language-dropdown .dropdown-item:hover  {
background-color: #ffc107 !important;
color: #000 !important;
}
.language-dropdown .dropdown-item:hover {
background-color: #f1f1f1;
}
.solution-card {
position: relative;
overflow: hidden;
}
.solution-card img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.solution-card:hover img {
transform: scale(1.05);
}
.solution-text {
position: absolute;
bottom: 15px;
left: 15px;
color: #fff;
font-size: 1.1rem;
font-weight: 500;
text-shadow: 0 2px 5px rgba(0,0,0,0.6);
}
.step-header {
background: #FFD52E; color: #000;
font-weight: 600;
display: inline-block;
padding: 6px 20px;
border-radius: 20px;
font-size: 16px;
margin-bottom: 35px;
}
.step-header1 {
background: #FFD52E;
color: #000;
font-weight: 600;
display: inline-block;
padding: 10px;
border-radius: 5px;
font-size: 16px;
margin-bottom: 35px;
}
.step-box h5 {
font-weight: 600;
margin-bottom: 10px;
font-size: 18px;
}
.step-box p {
font-size: 0.95rem;
color: #555;
} .steps-row {
position: relative;
}
.steps-row::before {
content: "";
position: absolute;
top: 15px;
left: 0;
right: 0;
height: 1px;
background: #BDBDBD;
z-index: 0;
}
.step-col {
position: relative;
z-index: 1;
}
.feature-list {
list-style: none;
padding: 0;
margin: 0 20% 0 10%;
}
.mrfft {
margin: 0 0 0 10%;
}
.getstrttxt {
top: 17%;
left: 5%;
color: #fff;
}
.feature-list li {
display: flex;
align-items: flex-start;
margin-bottom: 20px;
}
.feature-list li img {    
margin-right: 12px;    
}
.feature-title {
font-weight: 600;
margin-bottom: 4px;
}
.feature-text {
color: #333;
font-size: 0.95rem;
margin: 0;
}
.offer-section, .partnersec, .commersec, .resdentsec {
position: relative;
min-height: 700px;
display: flex;
align-items: self-end;
justify-content: center;
}
.offer-section {
background: url(//suntechnologiesindia.com/wp-content/themes/octoniontheme/images/govrnimg.png) no-repeat center center/cover;     
}
.partnersec {    
background: url(//suntechnologiesindia.com/wp-content/themes/octoniontheme/images/partnrbigimg.png) no-repeat center center/cover;
}
.commersec {    
background: url(//suntechnologiesindia.com/wp-content/themes/octoniontheme/images/comrclbigimg.png) no-repeat center center/cover;
}
.resdentsec {    
background: url(//suntechnologiesindia.com/wp-content/themes/octoniontheme/images/resdbigimg.png) no-repeat center center/cover;
}
.offer-box {
background: #FFDE25;
padding: 80px 40px 60px 40px;
max-width: 1320px;
}
.offer-box h2 {
font-weight: bold;
text-align: center;
margin-bottom: 30px;
}
.offer-icon, .offer-icon1, .offer-icon2, .offer-icon3, .offer-iconpat {
position: absolute;    
left: 50%;
transform: translateX(-50%);
background: white;
border-radius: 50%;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 3px 8px rgba(0,0,0,0.2);
}
.offer-icon {     
top: 263px;     
}
.offer-icon1 {     
top: 233px;     
}
.offer-iconpat {
top: 231px;     
}
.offer-icon2 {
top: 214px;
}
.offer-icon3 {
top: 330px;
}
.feature-box {
background: #f5f5f5;
padding: 12px 18px;
border-radius: 6px;
display: flex;
align-items: center;
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
height: 100%; }
.feature-box img {
margin-right: 10px;
}
.feature-box span {
font-size: 15px;
font-weight: 500;
color: #333;
} .project-card {
border: 1px solid #ddd;
border-radius: 10px;
background: #fff;
height: 100%;
}
.project-card h5 {
font-size: 16px;
font-weight: 600;
background-color: #F4F4F4;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom: 1px solid #BDBDBD;
}
.project-card img {
border-radius: 6px;
margin-bottom: 12px;
}
.project-card p {
margin: 0;
font-size: 14px;
}
.project-card .label {
font-weight: 600;
}
.bordebttm {
border-bottom: 1px soldi #BDBDBD;
} .card-box {
border: 0;
padding: 20px;
border-radius: 12px;
}
.results-box {
background: #F3FAFF;
border-radius: 15px;
padding: 20px;
margin-top: 20px;
border: 1px solid #F3FAFF;
}
.results-box p {
margin: 0.4rem 0;
font-size: 15px;
}
.results-box span {
font-weight: 600;
} .accordion-body {
padding: 0;
}
.accordion-flush .accordion-item .accordion-button,
.accordion-flush .accordion-item .accordion-button.collapsed {
padding: 12px 0px;
}
.accordion-item {
border-bottom: 1px solid #BDBDBD !important;
}
.accordion-collapse {
border: 0;
}
.accordion-button:focus {
box-shadow: none;
border: none;
}
.accordion-body p {
padding: 0px 0px 9px 0px;
}
.accordion-button::after {
width: auto;
height: auto;
content: "+";
font-size: 27px;
background-image: none;
font-weight: 500;
transform: translateY(-4px);
}
.accordion-button:not(.collapsed)::after {
width: auto;
height: auto;
background-image: none;
content: "-";
font-size: 27px;
transform: translate(-5px, -4px);
transform: rotate(0deg);
}
.accordion-button:not(.collapsed) {
background-color: #fff;
color: #000;
box-shadow:none;
} 
.brochure-card {
background: #fff;
padding: 20px;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.brochure-card img {
border-radius: 8px;
margin-bottom: 20px;
max-width: 100%;
}
.btn-download {
background-color: #007bff;
font-weight: 600;
padding: 12px;
width: 100%;
border-radius: 6px;
color: #fff;
}
.btn-download:hover {
background-color: #0056b3;
}  .whatsapp-float {
position: fixed;
bottom: 20px;
right: 20px;
background: #25D366;
border-radius: 50%;
padding: 12px;
cursor: pointer;
z-index: 9999;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.whatsapp-float img {
width: 50px;
height: 50px;
} .whatsapp-chat-box {
display: none;
position: fixed;
bottom: 90px;
right: 20px;
width: 280px;
background: #fff;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
z-index: 9999;
overflow: hidden;
font-family: Arial, sans-serif;
}
.chat-header {
background: #25D366;
color: #fff;
padding: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
.chat-header button {
background: none;
border: none;
color: #fff;
font-size: 18px;
cursor: pointer;
}
.chat-body {
padding: 15px;
font-size: 14px;
color: #333;
}
.chat-btn {
display: block;
text-align: center;
background: #25D366;
color: #fff;
padding: 10px;
margin-top: 10px;
border-radius: 5px;
text-decoration: none;
}
.chat-btn:hover {
background: #1ebe5b;
}
.bg-img {
max-height: 198px;
object-fit: cover;
border-radius: 25px;
}
.dataTables_wrapper .dataTables_paginate {
padding-top: 30px;
}
table.dataTable {
border-top: 1px solid rgba(0, 0, 0, 0.3);
}
.dataTables_wrapper .dataTables_filter {
margin-bottom: 20px;
display:flex;
flex-direction:row-reverse;
}
.wpcf7-spinner {
display: none !important;
} .button, .button1 {
pointer-events: auto;
cursor: pointer;
padding: 11px 23px;
font-size: 16px;
font-weight: 500;
position: relative;
display: inline-block;
border-radius: 0.375rem;
}
.button {
background: #0165B3;
color: #fff;
border: 0;
}
.button1 {
background: white;
color: #0165B3;
}
.button::before,
.button::after,
.button1::before,
.button1::after{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.button--telesto {
overflow: hidden;
color: #fff !important;
}
.button--telesto1 {
overflow: hidden;
color: #0165B3 !important;
text-transform: uppercase;
}
.button--telesto span, .button--telesto1 span {
display: block;
position: relative;
z-index: 1;
}
.button--telesto > span, .button--telesto1 > span {
overflow: hidden; }
.button--telesto:hover > span > span, .button--telesto1:hover > span > span {
animation: MoveRightInitial 0.1s forwards, MoveRightEnd 0.3s forwards 0.2s;
color:#000 !important ;
}
@keyframes MoveRightInitial {
to {
transform: translate3d(105%,0,0);
}
}
@keyframes MoveRightEnd {
from {
transform: translate3d(-100%,0,0);
}
to {
transform: translate3d(0,0,0);
}
}
.button--telesto::before,
.button--telesto::after {
content: '';
background: #FFDE25;
}
.button--telesto1::before,
.button--telesto1::after {
content: '';
background: #FFDE25;
}
.button--telesto::before, .button--telesto1::before {
width: 135%;
-webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0% 0%);
clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0% 0%);
transform: translate3d(-100%,0,0);
}
.button--telesto:hover::before, .button--telesto1:hover::before {
transform: translate3d(0,0,0);
transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
}
.button--telesto::after, .button--telesto1::after {
width: 105%;
transform: translate3d(100%,0,0);
transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
}
.button--telesto:hover::after, .button--telesto1:hover::after {
transform: translate3d(0,0,0);
transition: transform 0.01s 0.3s cubic-bezier(0.7, 0, 0.2, 1);
} a.learn-more {
position: relative;
display: inline-block;
cursor: pointer;
outline: none;
border: 0;
vertical-align: middle;
text-decoration: none;
background: transparent;
padding: 0;
width: 148px;
height: auto;
}
a.learn-more .circle {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: relative;
display: block;
margin: 0;
width: 30px;
height: 30px;
background: #0165B3;
border-radius: 1.625rem;
}
a.learn-more .circle .icon {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: absolute;
top: 0;
bottom: 0;
margin: auto;
background: #fff;
}
a.learn-more .circle .icon.arrow {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
left: 4px;
width: 16px;
height: 2px;
background: none;
}
a.learn-more .circle .icon.arrow::before {
position: absolute;
content: "";
top: -0.25rem;
right: 0.0625rem;
width: 0.625rem;
height: 0.625rem;
border-top: 0.125rem solid #fff;
border-right: 0.125rem solid #fff;
transform: rotate(45deg);
}
a.learn-more .button-text {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: absolute;
top: -2px;
left: 0;
right: 0;
bottom: 0;
padding: 6px 0px;
margin: 0 0 0 0;
color: #0165B3;
font-size: 14px;
line-height: 1.6;
text-align: center;
width: 171px;
}
a.learn-more:hover .circle {
width: 100%;
padding: 10px 0px;
}
a.learn-more:hover .circle .icon.arrow {
background: #fff;
transform: translate(1rem, 0);
}
a.learn-more:hover .button-text {
color: #fff;
}
.logo-inline {
vertical-align: middle;
margin-top: -6px; position: relative;
} .gtranslate_wrapper {
position: absolute !important;
left: 57px !important;
top: 9px !important;
z-index: 999999 !important;
}
@media (max-width: 768px) {
.gtranslate_wrapper {
left: 13px !important;
}
}
.gt_selected a {
padding: 9px 5px !important;
border-radius: 5px !important;
}
.gt_switcher a {
font-size: 15px !important;}
.gt_option a {
padding: 6px 5px !important;
} .roi-box {
border: 1px solid #d9d9d9;
border-radius: 6px;
overflow: hidden;
background: #fff;
}
.roi-box .box-header {
background: #f1f8ff;
padding: 8px 12px;
font-weight: 600;
font-size: 15px;
border-bottom: 1px solid #d9d9d9;
}
.roi-box .box-header .f12 {
font-size:12px;
font-weight: 400 !important;
}
.roi-box .box-body {
padding: 12px;
font-size: 14px;
}
.roi-box .box-body p {
margin-bottom: 20px;
}
.highlight {
border-radius: 6px;
background: #ECECEC;
text-align: center;
padding: 10px;
font-size: 13px;
font-weight: 500;
}
.highlight strong {
display: block;
font-size: 15px;
}
.roi-box .box-body .highlight p {
margin-bottom: 10px !important;
}
.btn-calc {
background: #0165B3;
color: #fff;
font-weight: 600;
padding: 12px;
border-radius: 4px;
width: 100%;
}
.btn-calc:hover {
background: #004da8;
color: #fff;
}
.savings-row p {
font-weight: 600;
font-size: 14px;
margin-bottom: 0;
}
.savings-row small {
font-size: 12px;
color: #666;
}
.allcatg .form-select {
position: relative;
top: 50px;
}
.roundcorners {
border-radius:10px;
} footer {
background-color: #041929;
}
footer .address i {
font-size: 18px;
color: #FFDE25;
}
footer .copyrights i {
font-size: 20px;
color: #FFF;
}
footer .copyrights a:hover,  footer .copyrights i:hover {
color: #FFDE25;
}
footer ul.list-unstyled a {
color: #fff;
}
footer ul.list-unstyled a:hover {
color: #FFDE25;
} #progress {
position: fixed;
bottom: 106px;
right: 33px;
height: 50px;
width: 50px;
display: none;
place-items: center;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
cursor: pointer;
z-index: 9999;
}
#progress-value {
display: block;
height: calc(100% - 8px);
width: calc(100% - 8px);
background-color: #0165B3;
border-radius: 50%;
display: grid;
place-items: center;
}
#progress-value svg {
width: 40px;
color: #fff;
}
.table-responsive {
max-height: 600px; overflow-y: auto;
position: relative;
margin-bottom: 50px;
}
#portfolio-table thead th {
position: sticky;
top: 0;
background: #ffffff;
z-index: 20;
}
.mb25 {
margin-bottom: 36px;
border-bottom:0;
} #menu {
background: #fff;
height: 100%;
opacity: 0;
overflow-y: hidden;
position: fixed;
top: 0px;
right: 0;
visibility: hidden;
width: 100%;
transition: all 0.2s ease-out;
z-index: 1100;
text-align: left;
padding-top: 93px;  
}
#menu.open {
opacity: 1;
visibility: visible;
}
#menu .main-nav ul {
list-style: none;
margin: 0;
padding: 50px 10px 0px 0px;
}
#menu .main-nav ul li {
border-bottom: 0px solid #d9d9d9;
padding: 10px 10px 10px 25px;
}
#menu .main-nav ul li ul  {
padding: 10px 0px 0px 6px;
}
#menu .main-nav ul li ul li {
border-bottom: 0px solid #d9d9d9;
padding: 5px 0px;
}
#menu .main-nav ul li a {
font-size: 25px;
color: #000;
font-weight: 500;
text-decoration: none;
text-transform: capitalize;
}
#menu .main-nav ul li a:hover {
color: #0165B3;
}
#menu .main-nav ul li a[aria-expanded="true"]::after {
content: "\f106";
font-family: "FontAwesome";
float: right;
font-size: 18px;
}
#menu .main-nav ul li a[aria-expanded="false"]::after {
content: "\f107";
font-family: "FontAwesome";
float: right;
font-size: 18px;
}
#menu .main-nav ul li ul li a {
font-size: 18px;
font-weight: 400;
text-transform: capitalize;
}
.toggle-menu { background: none;
border-radius: 5px;
cursor: pointer;
border: 0;
position: relative;
z-index: 1110;
top: 0;
right: 14px;
padding: 0px;
}
.toggle-menu span {
background-color: #000;
content: "";
display: block;
height: 3px;
left: calc(50% - 13px);
position: absolute;
top: calc(50% - 2px);
transform-origin: 50% 50%;
transition: background-color 0.2s ease-in-out, top 0.2s 0.2s ease-out, transform 0.2s linear;
width: 26px;
right: 0;
border-radius: 2px;
}
.toggle-menu span:before {
background-color: #000;
content: "";
display: block;
height: 3px;
position: absolute;
transform-origin: 50% 50%;
transition: background-color 0.2s ease-in-out, top 0.2s 0.2s ease-out, transform 0.2s linear;
width: 26px;
border-radius: 2px;
}
.toggle-menu span:after {
background-color: #000;
content: "";
display: block;
height: 3px;
position: absolute;
transform-origin: 50% 50%;
transition: background-color 0.2s ease-in-out, top 0.2s 0.2s ease-out, transform 0.2s linear;
width: 26px;
border-radius: 2px;
}
.toggle-menu span:before {
top: 7px;
}
.toggle-menu span:after {
top: -7px;
}
.toggle-menu.active span {
background-color: transparent;
transition: background 0.2s ease-out;
}
.toggle-menu.active span:before,
.toggle-menu.active span:after {
transition: top 0.2s ease-out, transform 0.2s 0.2s ease-out;
}
.toggle-menu.active span:before {
top: 0;
transform: rotate3d(0, 0, 1, -45deg);
}
.toggle-menu.active span:after {
top: 0;
transform: rotate3d(0, 0, 1, 45deg);
}
#filterCapacity {
width:400px;
} @media (min-width: 821px) {
.d-custmd-none {
display: none !important;}
} @media (max-width: 575.98px) and (max-width: 767px) {
.offer-box {
margin: 60px 20px 0px 20px;
position: relative;
}
.offer-icon1, .offer-icon2, .offer-icon3 {
top: -25px;
}
.navbar-nav .nav-link.active, .navbar-nav li.active .nav-link {
color: #000 !important;
background: none;
}
.bannertxt {
margin-top: 9rem !important;
}
.bannertxt h1 {
font-size: 30px;
} 
.bannertxt h1 span {
font-size: 30px;
}
.contnumb {
font-size: 48px;
font-weight: 600;
}
.numbtxt {
font-size: 19px;
}
.headtxt h2, .ourclients h2 {
font-size: 35px;
}
.leader .f25 {
font-size: 18px;
}
.headtxt {
top: 6%;
}
.features-section {
padding: 20px;
}
.banner h1 {
font-size: 25px;} .bluebox{
background: url(//suntechnologiesindia.com/wp-content/themes/octoniontheme/images/mbblubg.png) no-repeat center top;
background-size: cover;
width: 100%;
padding-top: 193%; }
.getstrttxt {
top: 11%;
}
.whtwedotxt {
top: 5%;
}
.achvetxt {
top: 0;
left: 0;
position: inherit !important;
}
.yellowbox {
width: 100%;
height: 524px;
} .language-dropdown .btn {
margin-left: 0; margin-top: 0;
}
.headtxt h2, .ourclients h2, .vissionmission h2, .heading h2 {
font-size: 27px;
}
.step-header {
margin-bottom: 13px;
}
.steps-row::before {
height: 0;
}
.step-header1 {
margin-bottom: 7px;
}
.navbar-nav .nav-link.active, .navbar-nav .nav-link:hover {
background-color: transparent !important;
color: #000 !important;
}
.navbar-expand-lg .navbar-nav .dropdown-menu {
position: inherit;
width: 100%;
top: 0;
}
.dropdown-menu .nav-link.active, .dropdown-item:hover   {
background-color: transparent !important;
font-size: 18px !important;	
}
.nav-item.dropdown:hover .nav-link::after {
color: #000;
}
.f35 {
font-size: 27px;}
.offer-section, .partnersec, .commersec, .resdentsec {
min-height: 1024px;
}
.offer-section {
background: url(//suntechnologiesindia.com/wp-content/themes/octoniontheme/images/mbgovrnimg.png) no-repeat center center/cover;     
}
.partnersec {    
background: url(//suntechnologiesindia.com/wp-content/themes/octoniontheme/images/mbpartnrbigimg.png) no-repeat center center/cover;
}
.commersec {    
background: url(//suntechnologiesindia.com/wp-content/themes/octoniontheme/images/mbcomrclbigimg.png) no-repeat center center/cover;
}
.resdentsec {    
background: url(//suntechnologiesindia.com/wp-content/themes/octoniontheme/images/mbresdbigimg.png) no-repeat center center/cover;
} .bg-img {
max-height: 177px;}
.bg-img1 {
max-height: 277px;
border-radius: 37px;}
.bg-img2 {
max-height: 300px;
border-radius: 37px;}
.gt_selected a {
padding: 5px 5px !important;
width: 142px !important;}
.gt_switcher {
width: 155px !important;
}
.allcatg .form-select {
top: 0;
} .navbar-nav .nav-link, .navbar-nav .nav-link.active  {
padding: 0px 0px !important;
margin: 0px;}
.dropdown-item {
padding: 0px 0px;
}
.navbar-nav li.active .nav-link, .navbar-nav .dropdown-menu li.active .nav-link.active, .dropdown:hover .nav-link   {
background-color: #fff !important;
color: #000 !important;
}
.banner img {
height: 199px;
}
.banner {
margin-top: 111px;
height: 191px;
}
#filterCapacity {
width: 220px;
}
#calculate-solar {
width:100%;
margin-bottom: 20px;
}
.button--telesto1 {
width: 96%;
text-align: center;
}
.width365{
width: 365px;
}
.dataTables_wrapper .dataTables_filter input {
width: 97%;
border: 1px solid #dee2ef;
margin-top: 11px;
padding: 0.375rem 0.75rem;
}
#portfolio-table_filter label, #filterC {
text-align: left !important;
} #portfolio-table thead {
display: none;
} #portfolio-table tbody tr {
display: block;
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 10px;
margin-bottom: 15px;
padding: 12px;
}
table.table-striped tbody tr.odd
{
background-color: #fff !important;
} #portfolio-table tbody td {
display: block;
width: 100%;
padding: 6px 0;
border: none !important;
} #portfolio-table tbody td:nth-child(1)::before {
content: "Category:";
font-weight: 600;
display: block;
margin-bottom: 2px;
color: #000;
}
#portfolio-table tbody td:nth-child(2)::before {
content: "Capacity/Type:";
font-weight: 600;
display: block;
margin-bottom: 2px;
color: #000;
}
#portfolio-table tbody td:nth-child(3)::before {
content: "Location/Client:";
font-weight: 600;
display: block;
margin-bottom: 2px;
color: #000;
}
#portfolio-table tbody td:nth-child(4)::before {
content: "Description:";
font-weight: 600;
display: block;
margin-bottom: 2px;
color: #000;
}
} @media screen and (min-width: 768px) and (max-width: 991px) {
.dispnone {
display: none !important;}
.contnumb {
font-size: 45px;}
.numbtxt {
font-size: 17px;}
.achvetxt {
top: 3.5%;
}
.pr-20 {
padding-right: 20px;
}
.leader .f25 {
font-size: 16px;
}
.whtwedotxt {
top: 2%;
}
.yellowbox {
padding: 16px;
width: 67%;
height: 338px;
}
.yellowbox .f18 {
font-size: 15px;
margin-bottom: 10px !important;
}
.yellowbox .f35 {
font-size: 24px;}
} @media (min-width: 1500px) {
}