/* =====================================================
   LARGE SCREENS
===================================================== */

@media screen and (min-width: 1400px) {
}

@media screen and (max-width: 1023px) {
    .sustainability-metric-feature {
        gap: 34px;
        grid-template-columns: 1fr;
    }
    .sustainability-metric-image {
        min-height: 360px;
    }
    .accreditation-heading {
        gap: 22px;
        grid-template-columns: 1fr;
    }
    .accreditation-grid {
        grid-template-columns: 1fr;
    }
    .hse-heading {
        gap: 22px;
        grid-template-columns: 1fr;
    }
    .frameworks-heading {
        gap: 22px;
        grid-template-columns: 1fr;
    }
    .framework-panel,
    .framework-panel-sdgs,
    .framework-panel-wide {
        grid-column: auto;
        grid-template-columns: 1fr;
    }
    .framework-panel-enhanced-main {
        grid-column: auto;
    }
    .document-library {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 600px) {
    .sustainability-metric-image {
        min-height: 240px;
    }
    .sustainability-metric-content .heading,
    .accreditation-heading .heading {
        font-size: 28px;
    }
    .solar-metric-grid {
        grid-template-columns: 1fr;
    }
    .accreditation-card {
        grid-template-columns: 1fr;
    }
    .accreditation-visual {
        min-height: 190px;
    }
    .accreditation-photo {
        height: 220px;
    }
    .hse-heading .heading {
        font-size: 28px;
    }
    .frameworks-heading .heading {
        font-size: 28px;
    }
    .frameworks-grid {
        grid-template-columns: 1fr;
    }
    .framework-panel {
        min-height: 0;
        padding: 22px 18px;
    }
    .framework-image {
        min-height: 180px;
    }
    .framework-image-tall {
        max-height: 430px;
    }
    .framework-name-grid-two,
    .framework-name-grid-three {
        grid-template-columns: 1fr;
    }
    .hse-pillars {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .hse-pillars span:nth-child(2) {
        border-right: 0;
    }
    .hse-pillars span:nth-child(-n+2) {
        border-bottom: 1px solid rgba(80, 26, 115, 0.16);
    }
    .document-group {
        padding: 22px 18px;
    }
    .document-links a {
        gap: 8px;
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .document-links span {
        display: none;
    }
}

@media screen and (min-width: 1600px) {
}

@media screen and (min-width: 1900px) {
}


/* =====================================================
   DESKTOP & LAPTOP
===================================================== */

@media screen and (max-width: 1360px) {

    .logo {
        width: 250px;
    }

    .navabar li a,
    .scrolled .navabar li a {
        font-size: 13px;
        letter-spacing: 0.8px;
    }
    .content {
        font-size: 170px;
    }
    .headerright_blk {width: 72%}
}

@media screen and (max-width: 1300px) {
    .container {max-width: 100%;width: 92%}
}

/* ≤ 1290px */
@media screen and (max-width: 1290px) {

    .effect {
        height: 700px;
    }

    .bannertxt h1 {
        font-size: 45px;
        line-height: 1.2;
    }

    .heading {
        font-size: 35px;
        line-height: 1.1;
    }

    .subheading {
        font-size: 18px;
    }

    .sec2content {
        padding-right: 0;
    }

    .sec2,
    .sec3,
    .sec4,
    .sec5,
    .sec6,
    .sec7  {
        padding: 70px 0;
    }

    .sec3 {
        padding-top: 20px;
    }

    .coutnerwrap {
        margin-top: 70px;
    }

    .counterblk {
        font-size: 40px;
    }

    .leading-edge .counterblk {
        font-size: 28px;
    }

    .caption {
        margin: 0 0 15px 0;
    }

    .counter-innertxt {
        font-size: 18px;
    }

    .common-padding {
        padding: 70px 0;
    }
    .navabar ul{gap: 30px}
    .sec4 .reveal:nth-child(3){margin-bottom: 0}
}


/* ≤ 1250px */
@media screen and (max-width: 1250px) {
    .navabar {
        display: none;
    }

    .sec3blk {
        padding-left: 5%;
    }

    .navblk {
        display: flex;
        width: 55px;
    }
    .headerright_blk {width: auto}

    .mobilemenu {
        width: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .content {
        font-size: 150px;
    }

    .map {
        width: 100%;
    }

    footer {
        padding: 60px 0 30px;
    }

    footer .heading {
        font-size: 60px;
    }

    footer .subheading {
        font-size: 14px;
    }

    .flex-footerbootom {
        margin-top: 50px;
    }
    .newsheadinghome {font-size: 22px}
    .inner-banner img, .contactpage{height: 400px; object-fit: cover}
    .inner-banner-text h1{font-size: 60px}
    .productflex{flex-wrap: wrap;flex-direction: inherit;margin-top: 0px}
    .productflex .link{margin-bottom: 35px}
    .product-left{width: 100%}
    .application-intro {
        grid-template-columns: 1fr;
        gap: 34px;
    }
    .application-nav {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .application-block,
    .application-block-reverse {
        gap: 40px;
        grid-template-columns: 1fr;
    }
    .application-block-reverse .application-media,
    .application-block-reverse .application-content {
        grid-column: auto;
        grid-row: auto;
    }
    .range-guide-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
.boximg {
    width: 174px;
    padding: 15px;}
    .product-sec {
    display: flex;
    width: 49%}
    .product-sec {margin-top: 30px}
.product-table {font-size: 14px}



}


/* ≤ 1023px */
@media screen and (max-width: 1023px) {
    .contact-flex{margin-top: 30px; flex-wrap: wrap; justify-content: space-between;}
    .contact-width.dflex{width: 45%; margin-top: 20px}
    .addtext{width: calc(100% - 65px);}
    .product-sec{flex-wrap: wrap;}
    .application-section {
        padding: 52px 0;
    }
    .application-content .heading {
        font-size: 25px;
    }
    .application-content p,
    .range-guide-heading p {
        font-size: 15px;
    }
    .application-kicker {
        font-size: 17px;
    }
    .application-media,
    .application-media img {
        min-height: 270px;
    }
    .company-timeline-grid {
        gap: 26px 16px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding-top: 0;
    }
    .company-timeline-grid::before {
        display: none;
    }
    .company-timeline-card {
        min-height: 132px;
        padding: 24px 16px 18px 50px;
    }
    .company-timeline-card::before {
        left: 20px;
        top: 26px;
        transform: none;
    }
    .company-timeline-card::after {
        height: calc(100% - 50px);
        left: 32px;
        top: 48px;
        transform: none;
    }
    .company-timeline-card span,
    .company-timeline-card p {
        text-align: left;
    }
    .box-text {  width: 100%;}
    .sec6 .heading br{display: none;}
    .sec6content{width: 100%}
    .sec6content p{margin: 0}
    .effect {
        height: 600px;
    }
    .paper-color table{width: 1000px}
    .boximg {
        width: 128px;
        padding: 0;
        padding-bottom: 15px;
    }
    .product-heading { font-size: 20px; margin-bottom: 10px}

    .sec4 .heading br {
        display: none;
    }

    .sec4felx {
        align-items: stretch;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-top: 40px;
        padding-left: 0;
    }

    .sec4content {
        width: 100%;
    }

    .sec2flex {
        padding-left: 0;
        margin-top: 30px;
    }

    .sec2blk,
    .sec2content {
        width: 100%;
    }

    .sec2blk .heading br {
        display: none;
    }

    .heading {
        font-size: 30px;
    }

    .bannertxt h1 {
        font-size: 40px;
    }

    .arrowblk {
        width: 50px;
    }

    .counterblk {
        font-size: 35px;
    }

    .leading-edge .counterblk {
        font-size: 22px;
    }

    .counterinnerwrap {
        width: 31%;
    }

    .counter-innertxt {
        font-size: 16px;
    }

    .coutnerwrap {
        margin-top: 50px;
    }

    .content {
        font-size: 135px;
    }
    .pulsating-circle:before, .pulsating-circle.blue_dot:before {width: 100%; height: 100%; margin-left: -3px; margin-top: -3px }
    
    .pulsating-circle:after, .pulsating-circle.blue_dot:after{width: 15px; height: 15px}
    .boads-right { width: 100%;}
    .dflex{flex-wrap: wrap;}
    .tab-links li {
    padding: 10px 18px;
    margin-right: 15px;
    border: 2px solid #e6ddc1;
    font-size: 16px;
}
.contactpage h1 {
    font-size: 35px;
    margin-top: 50px;
}
.contactform {
    width: 100%;
    margin: 20px auto 0;
}

 .newsline {font-size:20px}
 .newsdate{font-size: 17px;margin-bottom: 10px}
    .flipcard_blk {flex-wrap: wrap;justify-content: center}
    .flip-card {width: 48%;height: 220px}
    .pulsating-circle .mappinname{font-size: 8px}
    .secwpdf{width: 47%}
    .productflex .heading sup {font-size: 15px;top:-15px}
}


/* ≤ 900px */
@media screen and (max-width: 900px) {

    footer .heading {
        font-size: 40px;
    }

    .content {
        font-size: 110px;
    }

    .sec3content {
        width: 100%;
    }
     .boximg {width: 100px}

    .sec2content p,
    .sec3content p {
        margin-bottom: 0;
    }
    .container{padding: 0}
    .sec2blkflex{flex-wrap: wrap;}
    .sec2blkflex .sec2blk { width:100%;}
    .aboutpageright{width: 100%}
    .aboutpageright .counterinnerwrap {
    width: 44%;
    padding: 13px 0 10px;
}
.aboutpageright .counterblk {  font-size: 30px;}
.aboutpageright .counter-innertxt {
    font-size: 16px;
    margin-bottom: 10px;
}
.aboutpageright .leading-edge .counterblk {font-size: 20px}
.aboutpageright .caption {
    margin: 0px 0 6px;
}


}


/* =====================================================
   TABLET
===================================================== */

@media screen and (max-width: 767px) {
    .certifi-box { width: 200px;}
    .newsblk {
    padding-left: 0;
    margin-top: 30px;
}
.certibox-text {
    width: calc(100% - 223px);
}
.certifi-flex{margin: 20px 0}
.tab-links{flex-wrap: wrap;}
.tab-links li{margin:5px}
    .product-sec {width: 100%}

    .tab-links li, .tab-links li.active {
        margin: 5px;
        width: 47%;
        font-size: 15px;
        border-bottom: 2px solid #cbc5bb;
    
}
.contact-width.dflex{width: 100%; margin-top: 20px}
.contactpage h1 {
    font-size: 30px;}
.bullettext li {font-size: 16px;padding: 5px 5px 5px 15px}

.inner-banner-text h1 {
        font-size: 50px;
    }.inner-banner-text {top: 29%}

    .newsheadinghome {
        font-size: 20px;
    }
        .formfieldblk {
    width: 100%;
    padding: 5px 0px;
}
.consubmit button, .newsbutton{
    font-size: 12px;
    padding: 10px 25px;
    margin-top: 25px;
}
.breadcrumb-wrap li {font-size: 12px}


    .mappin:before, .blue_dot .mappin:before {width: 14px; height: 14px; margin-left: 0;  }
/*    .mappin{width: 10px; height: 10px}*/
    .mappin:after, .blue_dot .mappin:after{width: 10px; height: 10px}
    .map{width: 130%; left: -15%;}
    .pulsating-circle .mappinname.leftname{right: 25px}
    .pulsating-circle .mappinname{left: 12px}
    
    .newsimg {
    width: 150px;}
    .newsec1 {margin-bottom: 20px}

    .common-padding,
    .sec2,
    .sec3,
    .sec4,
    .sec5,
    .sec6,
    .sec7 {
        padding: 40px 0;
    }
    .susbblk{margin-top: -40px; }

    .heading {
        font-size: 26px;
    }
    .newsheading{font-size:22px}

    .sec5 .heading br {
        display: none;
    }

    .sec4 .reveal:nth-child(3) {
        width: 100%;
        margin-bottom: 0;
    }

    .subheading,
    p {
        font-size: 14px;line-height: 26px
    }
    .desc p, .bullettext li{font-size: 14px !important;}

    .logo {
        width: 250px;
    }

    .effect {
        height: 500px;
    }

    .flex-footerbootom {
        margin-top: 35px;
        padding-top: 30px;
    }

    .footerlinkwrap a {
        margin-bottom: 10px;
        font-size: 14px;
    }

    .copywrite {
        font-size: 10px;
    }

    .link {
        font-size: 13px;
    }

    .link .color {
        width: 30px;
        height: 30px;
        top: 47%;
        left: -15px;
    }

    .social-icon {
        font-size: 20px;
    }

    .bannertxt h1 {
        font-size: 30px;
    }

    .coutnerwrap {
        flex-wrap: wrap;
    }

    .counterinnerwrap {
        width: 100%;
        border-top: 2px solid #cdb287;
        padding: 15px 0 25px;
    }

    .caption {
        margin: 0 0 11px;
    }

    .content {
        font-size: 87px;
    }
    .heading-inner {
    margin-bottom: 20px;
}
.paddingt50{padding-top: 20px !important}
.purple span {font-size: 22px}
.infraflex.align-center{align-items: flex-start;}
    .desc .newsheading {font-size: 20px}
    .company-history-section {
        padding: 44px 0;
    }
    .company-timeline-grid {
        gap: 14px;
        grid-template-columns: 1fr;
        padding-top: 0;
    }
    .company-timeline-card {
        min-height: auto;
        padding: 20px 20px 20px 58px;
    }
    .company-timeline-card::before {
        left: 20px;
        top: 24px;
        transform: none;
    }
    .company-timeline-card::after {
        height: calc(100% - 46px);
        left: 32px;
        top: 46px;
        transform: none;
    }
    .company-timeline-card:last-child::after {
        display: none;
    }
    .company-timeline-card span {
        font-size: 20px;
        margin-bottom: 8px;
    }
   
.mobilemap{display: block}
    .sec5{overflow: hidden}
     .mobilemap img.img-fluid {
        width: 155%;
        max-width: 155%;
        margin-left: -18%;
    }
    .pulsating-circle .mappinname{min-width: 55px;white-space: normal}
    .pulsating-circle.blue_dot.uk span.mappinname.leftname{top: -8px}
    .bannertxt{width: 90%;top: 50%}
    .bullettext li::before{top: 14px}
    
    .solar-plant{
    background: url(../images/solar-plant-bg.webp) no-repeat center;
    background-size: cover;
    background-attachment: inherit;
}
    .safechem .infraright{background: none !important;height: auto !important}
    .safechem .infraright img{display: block}
}


/* =====================================================
   MOBILE
===================================================== */

@media screen and (max-width: 600px) {
    .secwpdf{width: 100%;margin: 0 0 10px;background: url(../images/investor-icon-grey.png) no-repeat 96%;}
    .viewpdf{white-space: normal;padding: 10px 0 10px 10px}
.contactpage h1 {font-size: 22px;}
    .contactpage h1 br{display: none}
    .caption {
        font-size: 14px;
    }
    .application-intro-panel {
        padding: 25px 22px;
    }
    .application-intro-panel li {
        font-size: 15px;
    }
    .application-nav {
        grid-template-columns: 1fr;
        gap: 9px;
        margin-top: 30px;
    }
    .application-nav a {
        justify-content: flex-start;
        min-height: 54px;
        text-align: left;
    }
    .application-content .heading {
        font-size: 22px;
        line-height: 1.24;
    }
    .application-kicker {
        font-size: 16px;
        margin-bottom: 10px;
    }
    .application-page-heading {
        font-size: 23px;
    }
    .application-types {
        gap: 8px;
        margin-top: 20px;
    }
    .application-types span {
        font-size: 13px;
        padding: 0 0 5px;
    }
    .application-media,
    .application-media img {
        min-height: 210px;
    }
    .range-tags {
        gap: 8px;
        margin-top: 22px;
    }
    .range-tags a,
    .range-tags span {
        font-size: 12px;
        padding: 9px 10px;
    }
    .range-guide-grid {
        grid-template-columns: 1fr;
    }
    .range-card img {
        height: 160px;
    }
        .product-heading {
        font-size: 18px;}
            .product-sec {
        margin-top: 13px;
    }

    .mobilemenu {
        width: 60px;
        justify-content: flex-end;
    }

    .content {
        font-size: 80px;
    }

    .effect {
        height: 450px;
    }

    .counterblk {
        font-size: 30px;
    }

    .leading-edge .counterblk {
        font-size: 20px;
    }

    footer {
        padding: 60px 0;
    }

    .sec2content p,
    .sec4content p {
        margin-bottom: 0;
    }

    .sec3content {
        padding: 0;
    }
    .history-year {
    width: 35px;
    height: 77px;}
    .history-year {
    width: 35px;
    height: 77px;
    position: absolute;
    left: 22px; top: 146px}
    .history-slider { margin-top:30px;}
    .history-info p { font-size: 14px; margin-bottom: 0}
    .historyblk{height: 350px}
    .history-slider .slick-slide:nth-child(even) .history-year {
    transform: rotate(180deg);
    top: 129px;}
    .purple span {font-size: 20px}
    .infraflex{flex-wrap: wrap;}
    .infraleft, .infraright{width: 100%}
    .trc-service-grid {
        grid-template-columns: 1fr;
    }
    .trc-service-card {
        padding: 24px;
    }
    .sustainability .infraflex {  flex-direction: column-reverse;}
    .infraright.imgblk{margin-top: 25px}
    
    .flipcard_blk {display: block}
    .flip-card {width: 100%;margin: 0 0 10px 0}
    .slideinfoblk p {font-size: 14px}
    .sec3img {width: 90%;margin: 20px auto 0;padding: 0;}
    .productflex .heading sup {font-size: 12px;top:-12px}
}


/* ≤ 540px */
@media screen and (max-width: 540px) {
    .newsline {font-size: 18px}
     .newsdate{font-size: 16px;margin-bottom: 10px}

    footer .heading {
        font-size: 30px;
    }
    
    .certifi-flex{flex-wrap: wrap;}
        .certibox-text {
        width: 100%; margin-top:10px
    }
    .certifi-box {
        width: 150px;
    }
        .certifi-flex {
        margin: 34px 0;
    }


   .product-right {   width:100%;}

    .aboutpageright .counterinnerwrap{width: 100%}
    .aboutpageright .leading-edge .counterblk{margin-bottom: 20px}

    .container {
        padding: 0 !important;
    }

    .content {
        font-size: 65px;
    }

    .counter-innertxt {
        font-size: 14px;
    }

    footer .subheading {
        font-size: 13px;
    }

    .footerleftblk {
        width: 100%;
    }

    .footerlinkwrap {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .heading {
        font-size: 22px;
    }
    .newsheading{font-size:20px}

  

    .copywrite {
        text-align: center;
    }
        .inner-banner img, .contactpage {height: 300px}
        .inner-banner-text h1{font-size: 40px}
        .history-slider .slick-next, .history-slider .slick-prev{width: 30px; height: 30px}
    .product-sec {
        flex-wrap: wrap;
        justify-content: space-between;
    }
        .box-text {
        width: calc(100% - 100px);
    }
        .boximg {
        width: 85px;
    }
    .headerleft_blk {width: 200px}
    .logo {width: 100%;display: block}
    .mappin:after, .blue_dot .mappin:after{width: 8px; height: 8px}
    .mappin:before, .blue_dot .mappin:before{width: 12px;height: 12px;margin-left: -2px;margin-top: -1px}
    .map{width: 170%; left: -28%;}
    .pulsating-circle .mappinname.leftname{right: 10px}
    .bannertxt h1 br{display: none}
    .bannertxt h1{font-size: 26px}
}


/* ≤ 440px */
@media screen and (max-width: 440px) {

    footer .heading {
        font-size: 25px;
    }

    footer .subheading {
        font-size: 12px;
    }

    .content {
        font-size: 55px;
    }

    .navicon {
        background: #214ca2;
        width: 40px;
        height: 40px;
        padding: 8px 0;
    }

    .sec3img {
        margin-top: 10px;
        flex-wrap: wrap;
        width: 100%;
    }

    .sec3img .imgblk {
        margin: 10px;
        width: 100%;
    }

    .sec4felx {
        grid-template-columns: 1fr;
        justify-content: stretch;
    }

    .reveal {
        width: 100%;
    }

    .reveal:nth-child(2),
    .reveal:nth-child(3) {
        width: 100%;
        margin: 0;
        margin-top: 20px;
    }
    .susbblk {
        margin-top: -20px;
    }
        .inner-banner-text h1 {font-size: 35px}
    .map{width: 160%; left: -20%;}

}