/* variable */
:root {
    --primary: #0050A0;
    --secondary: #003B78;
    --green: #45a146;
    --lightAqua: #77ccca;
    --light-bg: #deeff0;
    --light-Gray: #676767;
    --dark-Gray: #333333;
    --white: #fff;
    --black: #000;
    --heading-font: 'poppins';
    --primary-font: 'Roboto';
    --red: #f45959;
    --gap: 2em;
    --line-thickness: 1px;
    --line-color: #e0e0e0;
    --line-offset: calc(var(--gap) / 2);


}

/* html {
    scroll-behavior: smooth;
} */
/* box layout */
.box-layout {
    padding: 0 100px;
}

h1{
    font-size: max(2.856rem, min(8vw, 4.375rem));
    /* font-size: max(2.125rem, min(11vw, 4.375rem)); */
    line-height: 1.1;
    
}

h1,
h2 {
    font-family: var(--heading-font);
}

.h2,
h2 {
    line-height: 1.1;
    font-size: max(1.875rem, min(9vw, 3.238rem));
}

body {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--dark-Gray);
    font-family: var(--primary-font);
    font-weight: 400;
    letter-spacing: 0.3px;
    transition: all .3s ease-in-out;
    text-wrap-style: pretty;
}

.container {
    transition: all .3s ease-in-out;

}

/* header */
.navbar .navbar-nav .nav-link {
    font-weight: 400;
    font-size: 18px;
    padding: 10px 22px;
}

/* header .container-fluid {
    padding-left: 85px;
    padding-right: 85px;
} */

.sticky-wrap.shadow-in {
    left: 31px;
}

/* header .navbar-brand img {
    max-height:40px;
} */

header .navbar-brand img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    max-height: none;
}

header .navbar-brand {
    margin-right: 0;
    vertical-align: middle;
    padding: 20px 0;
    display: inline-block;
}

.navbar .navbar-nav .nav-link {
    font-weight: 500;
    font-size: 18px;
    padding: 10px 15px;
}

header.sticky .navbar-brand {
    padding: 20px 0;
}


/* bg color */
.bg-light-turquoise-blue {
    background-color: #edf9fa;
}

.bg-light-sea-green-transparent {
    background-color: rgba(22, 193, 204, 0.8);
}

.bg-light-sea-green-transparent-light {
    background-color: rgba(22, 193, 204, 0.15);
}
.btn.btn-transparent-white-light {
    background-color: rgb(255 255 255 / 90%);
    border-color: rgba(255, 255, 255, .7);
    color: var(--black);
}

/* border color */
.border-color-transparent-dark-gray {
    border-color: rgba(39, 47, 48, 0.1) !important;
}

.border-color-red {
    border-color: var(--red) !important;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: 25px;
    color: var(--secondary);

}

h2 {
    color: var(--dark-Gray);

}

/* btn */
.btn {
    text-transform: inherit;
    font-weight: 500;
    letter-spacing: 0px;
    /* border: 0; */
}

/* .btn-gradient{
    border: 0;
}
.btn-gradient:hover{
    border: 0;
} */
.btn.btn-extra-large {
    font-size: 1.125rem;
}

.btn.btn-large {
    font-size: 1.0625rem;
}

.btn.btn-medium {
    font-size: 1.2rem;
}

.btn.btn-small {
    font-size: .9375rem;
}

.btn.btn-very-small {
    font-size: 14px;
}

.btn-gradient-blueGreen {
    background-image: linear-gradient(to right, var(--primary), var(--green));
    background-size: 100% auto;
    color: var(--white);
    border: 0;
}

.btn.btn-switch-text.btn-extra-large>span {
    padding: 18px 35px;
}

.btn:hover {
    background-image: linear-gradient(to right, var(--secondary), var(--green));
    color: var(--white);
}

.btn.btn-transparent-white-light:active,
.btn.btn-transparent-white-light:hover {
    background-image: none;
    background-color: transparent;
}

.btn.btn-transparent-white-light:active,
.btn.btn-transparent-white-light:hover {
    background-color: rgb(255 255 255 / 90%);
    border-color: rgba(255, 255, 255, .7);
    color: var(--black);
}

[class*=btn-gradient-]:hover,
[class*=btn-transparent]:hover {
    background-position: initial;
}

.btn.btn-base-color:hover {
    background-color: var(--dark-gray);
    border-color: var(--dark-gray);
    color: var(--white);
}

[class*=btn-gradient-] {
    background-color: transparent;
    border-color: transparent;
}

a {
    color: var(--light-Gray);
}

a:hover {
    color: var(--primary);
}

.contentwrapper {
    margin-top: 7rem;
}

/* ---------------header----------------- */

/* header .navbar [class*=col-] .navbar-nav .nav-item:hover a,
header .navbar [class*=col-] .navbar-nav .nav-item.active a 
{
    color: var(--primary);
} */

header .navbar {
    background: var(--white);
}

.navbar .navbar-nav .nav-link {
    color: var(--black);
}

.navbar .navbar-nav .nav-item:hover .nav-link, .navbar .navbar-nav .nav-item.active .nav-link {
    color: var(--primary) !important;
    opacity: 1;
}

.navbar .navbar-nav .nav-item .nav-link.active {
    color: var(--secondary);
}

/* header.sticky.sticky-active [data-header-hover=light] .icon>a, header.sticky.sticky-active [data-header-hover=light] .navbar-nav .nav-link {
    color: var(--secondary);
} */


/* ---------------footer----------------- */
footer .footer-logo img {
    max-height: none;
}

.footer-logo {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

footer span {
    color: var(--primary);
}

/* --------------home - hero banner------------- */

.hero-banner{
    background: url('../images/home-banner.webp') no-repeat center center / cover ;
    
}
.hero-banner::before{
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    background: linear-gradient(90deg, rgb(0 0 0 / 45%), rgb(0 0 0 / 0%));
}
/* ------------------------about us---------------------- */
.aboutUs-img {
    aspect-ratio: 1/1;
    border-radius: 0 10rem 0 10rem;
}

/* what we offer */

.whatWeOffer-sec {
    background: var(--very-light-gray);
}

.whatWeOffer-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(min-content, 1fr);
    align-items: stretch;
    gap: var(--gap);
    overflow: hidden;
}

.whatWeOffer-wrapper .card-body {
    position: relative;
    /* padding: 1.5em; */
    display: flex;
    align-items: center;
    justify-content: center;
}

.whatWeOffer-wrapper .card-body::before,
.whatWeOffer-wrapper .card-body::after {
    content: "";
    background-color: rgb(32 38 79 / 12%);
    position: absolute;
}

.whatWeOffer-wrapper .card-body::after {
    inline-size: 100%;
    block-size: 1px;
    inset-block-start: calc(var(--line-offset) * -1);
    inset-inline-start: 0;
}

.whatWeOffer-wrapper .card-body::before {
    inline-size: 1px;
    block-size: 100%;
    inset-block-start: 0;
    inset-inline-start: calc(var(--line-offset) * -1);
}

.services-icon::before {
    content: '';
    position: absolute;
    height: 80px;
    width: 80px;
    background: white;
    bottom: 18px;
    left: 0;
    right: 0;
    margin: 0 auto;
    border-radius: 50%;
}



/* ----------------------why choose us------------------ */

.whyChooseUs-sec .process-step-style-05 .progress-step-separator {
    position: absolute;
    bottom: -10px;
    width: 1px;
    left: 50%;
    height: 100%;
    z-index: -1;
}

.whyChooseUs-img {
    aspect-ratio: 1/1;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.whyChooseUs-sec .bg-dark-gray,
.bg-dark-gray:focus {
    background-color: var(--primary);
}

/* validation form success code  */

.form-control.error {
    font-size: 16px;
}

.input-fields span {
    margin-left: 3px;
}

.error {
    color: #f74141;
    font-size: 12px;
    font-weight: 400;
    margin-bottom: .6rem;
}

.contact-form-sec label .label-span {
    color: #f74141;
    font-size: 15px;
}

.success-msg {
    padding: 4rem 3rem;
    text-align: center;
    background: var(--white);
    border-radius: 20px;
}

.success-msg h5 {
    color: var(--primary-color);
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 10px;
}

.success-msg p {
    margin-bottom: 0;
}

/* ready to light up */
.light-up-sec{
    background: url('../images/hm-band.webp') no-repeat center center / cover;
}

.light-up-sec::before{
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    background: #000;
    opacity: 0.5;
}

.light-up-sec .bg-gradient-black-dark-orange {
    background-image: linear-gradient(to right top, #353332, #312b28, #15110f, #4a3229, #5a2611);
}


.topbar-nav {
    display: flex;
    gap: 20px;
    justify-content: end;
    align-items: center;
}

.top-bar {
    background: linear-gradient(to right, var(--primary), var(--green));;
    padding: 6px 0px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1030;
    transition: top 0.3s ease;
}


.topbar-nav .nav-link {
    font-size: 15px;
    color: var(--white);
}

.topbar-nav .nav-link:hover {
    color: var(--secondary);
    transform: 0.3s ease-in-out;
    -webkit-transform: 0.3s ease-in-out;
    -moz-transform: 0.3s ease-in-out;
    -ms-transform: 0.3s ease-in-out;
    -o-transform: 0.3s ease-in-out;
}

header.sticky.sticky-active .header-reverse.glass-effect {
    top: 0;
}

.navbar-nav {
    gap: 30px;
}

.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

nav {
    margin-top: -2px;
}

.breadcrump {
    height: 450px;
    position: relative;
    display: flex;
    align-items: center;
}
.career-breadcrump{
    background: url(../images/hero-banner.webp) center / cover no-repeat;
}

.about-breadcrump {
    background: url(../images/about-us-banner.webp) no-repeat center center / cover;
}

.solution-breadcrump {
    background: url(../images/solution-banner.webp) no-repeat center center / cover;
}

.services-breadcrump {
    background: url(../images/service-banner.webp) no-repeat center center / cover;
}

.industries-serve-breadcrump {
    background: url(../images/industries-we-serve-banner.webp) no-repeat center center / cover;
}

.project-banner {
    background: url(../images/projects/project-banner.webp) no-repeat center center / cover;
}

.contact-breadcrump {
    background: url(../images/contact-us-banner.webp) no-repeat center center / cover;
}

/* .career-breadcrump{
    background: url(../images/);
} */
.breadcrump-heading {
    position: relative;
}

.breadcrump-heading h1 {
    color: var(--white);

}

.breadcrump-heading p {
    margin-bottom: 0;
}

.breadcrump::before {
    content: "";
    position: absolute;
    height: 100%;
    background: linear-gradient(90deg, rgb(0 0 0 / 45%), rgb(0 0 0 / 0%));
    width: 100%;
    top: 0;
    /* background: #000;
    opacity: 0.2; */
}

.contact-parallax {
    background: url(../images/contact-parallax-img.jpg);
    background-position: 50% 62.9254px;
    border-radius: 6px;
    overflow: hidden;
    background-attachment: fixed;
    -webkit-transition-duration: 0s;
    margin: 0px 20px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
}

.overlap-map {
    margin-top: -502.5px;
}

.overlap-map iframe {
    width: 100%;
}

.gradient-text {
    background-image: linear-gradient(to right, var(--primary), var(--green));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.contact-breadcrump .row {
    position: relative;
    z-index: 1;
}

footer a {
    color: var(--dark-Gray);
}


/* Rutuja code add on  (13-5-25) */


/* ----------------why-philips---------------  */

.color-primary {
    color: var(--primary);
}

.why-philips-img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    aspect-ratio:9 / 7;
}

.premiere-advantage-img {
    display: block;
    object-fit: cover;
    aspect-ratio: 1/1;

}

.premiere-adv-list ul li {
    list-style: circle;
}

.advantage-txt {
    background: var(--very-light-gray);
    height: 100%;
    padding: 30px;
    border-radius: 24px;
}

.adv-right-content {
    padding-left: 5rem;
}

.card-wrap img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    max-width: 60px;
}

.card-wrap {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

.card-wrap p {
    line-height: 1.2;
}


/* ------------------our solutions---------------- */

.innovation-sec {
    background: var(--light-bg);
}

.bredcrumb-back-img {
    aspect-ratio: 9 / 12;
}

.bredcrumb-front-img {
    aspect-ratio: 9/10;
}

.lighting-types .text-outline {
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-color: var(--black);
}

.border-btm {
    border-bottom: 1px solid #dbd3d3;

}


.btm-btn-sec-btn .border-bclack.btn {
    border: 2px solid black;
}

.btm-btn-sec-btn .border-bclack.btn:hover {
    background-image: none;
    background-color: transparent;
    color: var(--black);
}

/*------------------- services -----------------*/


.service-sec .feature-box-icon i {
    color: var(--white);
}

.service-sec .feature-box-icon {
    background: var(--primary);
}

.service-sec .feature-box.feature-box-left-icon {
    align-items: anchor-center !important;
}

.customized-lighting-img,
.automation-setup-img,
.consumption-img,
.ongoing-support-img,
.consultation-planning-img,
.installation-img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    aspect-ratio: 9 / 10;
}

.consultation-planning-wrap {
    /* background: var(--primary); */
    /* background: var(--green); */
    background: var(--lightAqua);
}

/* ---------------------project page------------------- */

.hospitality-chain-img {
    height: 100%;
    width: 100%;
    display: block;
    object-fit: cover;
    aspect-ratio: 9 / 7;
}

.impact-items {
    background: var(--very-light-gray);
    height: 100%;
    width: 100%;
    padding: 2rem;
    text-align: center;
    display: flex;
    align-items: center;
    border-radius: 24px;
    font-weight: 400;
    line-height: 1.2;
}


/* -------------------career page---------------------- */
.why-work-sec .feature-box-icon {
    background: var(--light-bg);
    padding: 18px;
    border-radius: 24px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    width: 80px;
    height: 80px;
}

.open-roles-sec .progress-step-separator {
    background-color: var(--primary);
}


/* -------------------validation form code---------------------- */
.form-control.error {
    font-size: 16px;
}

/* spinner  */

.loading-animation {
    width: 100%;
    bottom: 0;
    z-index: -1;
}

#loadingSpinner {
    display: none;
}

.spinner {
    border: 5px solid var(--primary);
    border-top: 4px solid var(--white);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 20px auto 0;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


.contact-form-sec label span {
    color: #ff0000;
}

.success-msg {
    padding: 4rem 3rem;
    text-align: center;
    background: #eceff1;
    border-radius: 20px;
}

.success-msg h5 {
    color: var(--primary-color);
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 10px;
}

.success-msg p {
    margin-bottom: 0;
}

.form-control,
.form-select,
input,
select,
textarea {
    /* padding: 12px 25px 12px 12px !important; */
    padding: 12px 25px;
    font-size: 15px;
}

input:-internal-autofill-selected {
    padding: 12px 25px 12px 12px !important;
}

.contact-form-style-03 .form-group .form-icon {
    top: 45%;
}


/* new code add on */
/* About us */

.premiereAdv-content {
    padding-left: 4rem;
}
.lighting-purpose{
    background: url('../images/abt-us-band.webp') no-repeat center center / cover;
}
.lighting-purpose::before{
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    background: #000;
    opacity: 0.5;
}

.portfolio-boxed .portfolio-box:hover .portfolio-image img{
    opacity: 1;
}

.map-wrap iframe, .map-wrap {
    height: 100%;
    width: 100%;
    border-radius: 24px;
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
    -ms-border-radius: 24px;
    -o-border-radius: 24px;
}


.client-slider-img {
    text-align: center;
    height: 100%;
    filter: grayscale(1);
}

.client-slider-img:hover{
    filter: grayscale(0);
    -webkit-filter: grayscale(0);
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}

.client-slider-img img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    max-height: 75px;
    max-width: 78%;
}

.banner-caption{
    margin: 3rem 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.banner-caption p{
    font-size: max(1.3375rem, min(3vw, 1.125rem));
     
}

.open-roles-sec{
    background-color: var(--very-light-gray);
}

.process-step-icon-wrap{
    padding-bottom: 25px;
}
.whyChooseUs-sec .process-step-item{
    align-items: start;
}
.open-roles-card{
    background: var(--white);
}
.open-roles-card {
    background: var(--white);
    padding: 2rem 3.5rem;
    border-radius: 24px;
    height: 100%;
    /* line-height: 1.7; */
}
.industry-type-wrap{
    background: var(--very-light-gray);
    height: 100%;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 24px;
}
.industry-content {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}
.content-pills{
    background: var(--white);
    padding: .5rem .7rem;
    border-radius: 8px;
    text-align: center;
    width: 205px;
    display: flex;
    justify-content: center;
    align-items: center;

}
.industries-serve-sec .text-outline{
    -webkit-text-fill-color:var(--black);
    -webkit-text-stroke-color: var(--black);
}
.industries-serve-sec span{
    font-family: var(--heading-font);
}
.work-card-wrap {
    display: flex;
    flex-direction: column;
}
.work-card {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 1.5rem;
    text-align: left;
    margin-bottom: 1.2rem;
}
.work-card img{
    height: 100%;
    width: 100%;
    object-fit: contain;
}
.work-card-wrap .work-card:last-child{
    margin-bottom: 0;
}
.why-work-sec .whyWork-img  {
    height: 100%;
    width: 100%;
    object-fit: cover;
    aspect-ratio: 16 / 17;
}
    


/* *********************** Responsive *********************** */
@media screen and (min-width: 1600px) {
    .contentwrapper {
        margin-top: 9rem;
    }
}
@media screen and (max-width: 1600px) {
    section {
        padding-top: 70px ;
        padding-bottom: 70px ;
    }
    
}

@media screen and (min-width: 1400px) {
    .process-step-style-05 .process-content {
        max-width: 85%;
    }
}

@media screen and (max-width: 1600px) {
    header .navbar-brand img {
        max-width: 150px;
    }

    .navbar .navbar-nav .nav-link {
        padding: 10px 9px;
    }
    
}

@media screen and (max-width: 1440px) {
    header .navbar-brand img {
        max-width: 140px;
    }

    .navbar .navbar-nav .nav-link {
        font-size: 15px;
    }
    .content-pills {
        width: 180px;
    }
}

@media screen and (max-width: 1199px) {
    .why-philips-img {
        aspect-ratio: 9/11.5;
    }
    .adv-right-content {
        padding-left: 1rem;
    }
}

@media screen and (min-width: 991px) and (max-width: 1199px) { 
    .content-pills {
        width: 190px;
    }
    .industry-type-wrap {
        padding: 1rem;
    }
    .aboutUs-img {
        aspect-ratio: 9 / 11;
        border-radius: 0 8rem 0 8rem;
    }
    .why-work-sec .whyWork-img  {
        aspect-ratio: 16 / 17;
    }
}

@media screen and (max-width: 991px) {
    .why-philips-img {
        aspect-ratio: 16/10;
    }
    .adv-right-content {
        padding-left: 20px;
    }

    .premiereAdv-content {
        padding-left: 0px;
    }

    .breadcrump{
        height: 370px;
    }
    .contentwrapper {
        margin-top: 8rem;
    }
    .aboutUs-img {
        aspect-ratio: 16 / 9;
    }
    .whyChooseUs-sec .process-step-item {
        align-items: baseline;
    }
    .map-wrap{
        height: 350px;
    }
    body {
        font-size: 1.3rem;
    }
    .industry-type-wrap{
        margin-top: 3rem;
    }
    .sec-heading{
        padding-top: 3rem;
    }
    .content-pills {
        width: 190px;
    }
    .industries-serve-sec{
        padding-bottom: 7rem;
    }
    .whyChooseUs-img {
        aspect-ratio: 16 / 9;
    }
  
    .customized-lighting-img, .automation-setup-img, .consumption-img, .ongoing-support-img, .consultation-planning-img, .installation-img {
        aspect-ratio: 9 / 6;
    }
    .premiere-advantage-img {
        aspect-ratio: 9 / 5;
    }
    .why-work-sec .whyWork-img {
        aspect-ratio: 16 / 12;
    }
}

@media screen and (max-width: 767px) {
    header .header-top-bar {
        display: block;
        height: auto;
        padding-right: 0;
    }
    .banner-caption h1{
        letter-spacing: 1px;
    }
        header .header-top-bar+.navbar {
        top: 38px;
    }
}

@media screen and (max-width: 680px) {
    .whatWeOffer-wrapper{
        grid-template-columns: repeat(2, 1fr);
    }
    .aboutUs-img {
        aspect-ratio: 16 / 11;
    }
}

@media screen and (max-width: 575px) {
    .contentwrapper {
        margin-top: 9rem;
    }
    .sec-heading {
        padding-top: 2rem;
    }
    .open-roles-card {
        width: 100%;
    }
}

@media screen and (max-width: 480px) {
    .whatWeOffer-wrapper{
        grid-template-columns: repeat(1, 1fr);
    }
    .aboutUs-img {
        aspect-ratio: 9/8;
    }
    .content-pills {
        width: 170px;
    }
    .whyChooseUs-img {
        aspect-ratio: 16 / 11;
    }
    .btn.btn-switch-text.btn-medium>span {
        padding: 15px 23px;
    }
    .why-work-sec .whyWork-img {
        aspect-ratio: 1 / 1;
    }
    .work-card {
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        text-align: center;
        margin-bottom: 3rem;
    }
    .work-card-wrap {
        margin-bottom: 1.5rem;
    }

}

@media screen and (max-width: 380px) {
    .banner-caption{
        margin: 4rem 0;
    }
    .aboutUs-img {
        aspect-ratio: 1 / 1;
        border-radius: 0 6rem 0 6rem;
        -webkit-border-radius: 0 6rem 0 6rem;
        -moz-border-radius: 0 6rem 0 6rem;
        -ms-border-radius: 0 6rem 0 6rem;
        -o-border-radius: 0 6rem 0 6rem;
    }
    .breadcrump {
        height: 440px;
    }
}