:root {
    --primary-color: #27305f;
    --Secondary-color: #5a5e70;
    --SubHeading-color: #10b1b5;
    --Span-color: #195571;
    --Peragraph-size: 16px;
    --Heading-size: 3rem;
    --Heading-weight: 300;
    --SubHeading-size: 1.6rem;
    --Rgular: regular_bold;
    --Rgular-medium: regular_medium;
}

.opacity-toggle{
    overflow: hidden;
}
 
/* .updated-mobile-logo {
    width: 80px !important;
  } */
 
main {
    line-height: 30px;
    background-color: #f5f5f5;
}
 
p {
    font-family: var(--Rgular-medium);
    line-height: 1.5;
    text-align: justify;
}
 
.container {
    max-width: 100%;
}
 
.nav-items-container {
    margin-left: auto;
}
 
.sub-heading {
    /* margin: 25px 0px; */
    font-size: 22px;
    font-family: var(--Rgular);
    text-align: center;
    color: #2D8DBF;
    font-size: 22px;
    margin-bottom: 30px;
}
 
.top-benner {
    background-image: linear-gradient(rgba(10, 48, 91, 0.6), rgba(10, 48, 91, 0.6)), url(https://s3.mordorintelligence.com/commodity/commodity-chemicals-materials.png);
    display: flex;
    height: 100vh;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    flex-direction: column;
    color: #fff;
    gap: 2rem;
 
}
 
.top-benner h1 {
    text-align: center;
    /* font-weight: 300; */
    font-size: 40px;
    font-family: var(--Rgular);
}
 
.top-benner h3 {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    line-height: 45px;
    font-size: 24px;
    color: #fff !important;
    width: 76vw;
    font-family: var(--Rgular);
}
 
.purchase-btn {
    cursor: pointer;
    background: #2c8ebf;
    font-family: var(--Rgular);
    color: white;
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
    width: auto;
    padding: 10px;
    outline: none;
    border: none;
    border-radius: 6px;
    margin-left: auto;
    margin-right: auto;
    opacity: 1 !important;
}
 
.purchase-btn:hover{
    background-color: rgb(30, 99, 133);
}
 
.chemical-desc{
    width: 90% !important;
    padding: 20px 50px !important;
}
 
.chemical-desc p{
    box-sizing: border-box;
    font-size: 16px;
    font-family:  var(--Rgular-medium);
    text-align: center;
}
 
.benefits-key-features-container{
    display: flex;
    flex-direction: column;
    padding-bottom: 50px;
    padding: 54px;
}
.benefits-key-features-container .benefits-key-features .benefits-key-features-header{
    text-align:center;
    color: #2D8DBF;
    font-size: 22px;
    margin-bottom:30px;
    font-family: var(--Rgular);
 
}
.benefits-key-features-container .benefits-key-features .benefits-key-features-list{
    padding:0px;
    line-height: 30px;
    font-size:16px;
    margin-bottom: 30px;
    list-style: none outside none;
}
.benefits-key-features-container .benefits-key-features .benefits-key-features-list>li{
    margin-bottom:10px;
}
 
.benefits-key-features-container .benefits-key-features .benefits-key-features-list>li::before{
    content:">";
    padding-right:10px;
    color: #2D8DBF;
}
 
.about-info {
    padding: 60px 0px;
}
 
.about-info h3,
.our-people-title {
    text-align: center;
    margin: 3%;
 
}
 
/* .owl-item{
  margin-right: 25px !important;
} */
.gptw-info {
    background-color: #ecf6f5;
    display: flex;
    align-items: start;
    padding: 4%;
    margin: 2%;
}
 
.gptw-info div {
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    padding: 1%;
    /* gap: 2rem; */
}
 
.gptw-info div h3 {
    color: #27305f;
    font-size: 22px;
    font-family: var(--Rgular);
}
 
.gptw-info div p {
    font-size: 18px;
    line-height: 1.5;
}
 
.offering-section {
    /* margin: 60px 0px 0px; */
    /* padding: 30px 0px;    */
}
 
.offering-section p {
    padding: 0 50px;
    text-align: center;
    line-height: 30px;
    font-size: 20px;
    margin-bottom: 50px;
}
 
.offering-section h5 {
    text-align: center;
    font-size: 16px;
    margin: 25px 20px;
    /* font-family: reular_bold; */
}
 
.offering-intro {
    display: flex;
    gap: 2rem;
}
 
.offering-intro div {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* gap: 2rem; */
}
 
.offering-intro div h4 {
    color: #2D8DBF;
    font-size: 18px;
    margin-bottom: 10px;
    line-height: 30px;
    /* margin: 25px 0; */
    font-family: var(--Rgular) !important;
}
 
.offering-intro div p {
    text-align: center;
    font-size: 16px;
    line-height: 30px;
}
 
.offering-intro div p a {
    color: red;
 
}
 
 
 
/* .intelligence-container {
    padding: 0 5%;
} */
.commodity-list-section {
    padding: 55px 35px;
    background-color: #fff;
}
 
.commodity-list-section .cm-list-header-search {
    display: flex;
    font-size: 28px;
    margin-bottom: 80px;
    align-items: center;
    justify-content: center;
}
 
.commodity-list-section .cm-list-header-search .cm-list-header {
    color: #2880AC;
    font-family: var(--Rgular);
}
.cm-list-wrapper .cm-list-items {
    -webkit-column-count: unset;
    /* Chrome, Safari, Opera */
    -moz-column-count: unset;
    /* Firefox */
    column-count: unset;
    width: 100%;
    list-style: none;
    padding: 1.7em;
    padding-left: 4rem;
    margin: 0;
    font-size: 110%;
    position: relative;
    z-index: 10;
    background: #2880AC;
    border: 1px solid #2880AC;
    height: 1250px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-evenly;
    /* border-radius: 5px; */
    /* box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.75); */
}
 
.cm-list-wrapper .cm-list-items:before {
    content: '';
    position: absolute;
    top: -2px;
    left: 1px;
    right: 1px;
    bottom: -2px;
    z-index: -1;
    background: white;
    transform: skew(2deg, 2deg);
    /* opacity:0; */
}
 
.cm-list-wrapper .cm-list-items:hover {
    /* box-shadow: 0 0 5px 0px #2880AC;
    border-color: #2880AC; */
    -webkit-animation-name: bordercolorslider;
    /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 3s;
    /* Safari 4.0 - 8.0 */
    animation-name: bordercolorslider;
    animation-duration: 3s;
}
 
.cm-list-items li {
    color: var(--Span-color);
}
.cm-list-wrapper .clcik-sample{
    text-align: end;
}
.cm-list-items li {
    margin-bottom: 10px;
    font-size: 16px;
}
 
.cm-list-items li:hover {
    color: #2880AC;
    cursor: pointer;
}
 
.cm-list-items>li:hover {
    text-decoration: none;
}
 
.cm-list-wrapper .cm-list-items >li::before {
    content: ">";
    color: var(--Span-color);
    padding-right: 8px;
}
 
.cm-list-wrapper .cm-list-items >li:hover::before {
    color: #2880AC;
}
.intelligence-container h4 {
    color: var(--Span-color);
    font-family: var(--Rgular) !important;
}
 
.intro_grid-container {
    width: 100%;
    padding-left: 0;
    margin: 3% auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* Creates 4 equal-width columns */
    grid-template-rows: repeat(4, 1fr);
    /* Creates 4 equal-height rows */
    gap: 10px;
    /* Optional: Adds gap between grid items */
    list-style: none;
 
}
 
/* .intro_grid-container li::before{
    content: "-";
    margin-right: 5px;
    color: var(--Span-color);
    
  } */
.intro_grid-container li a {
    color: var(--Span-color);
    font-family: var(--Rgular-medium);
 
}
 
.choice-section {
    margin: 60px 0;
}
 
.choice-item {
    display: flex;
    margin-bottom: 50px;
    -webkit-box-align: center;
    align-items: center;
    /* border-bottom: 1px solid rgba(168, 185, 193, 0.25); */
}
 
.choice-item img {
    width: 440px;
    margin: 20px;
}
 
.choice-item div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
}
 
.choice-item div h4 {
    color: var(--Span-color);
    font-family: var(--Rgular) !important;
}
 
.choice-item ul li {
    font-family: var(--Rgular-medium);
    text-align: justify;
}
 
.distrubuting-img-aspect-ratio {
    aspect-ratio: 220/221;
}
 
.global-map-img-aspect-ratio {
    aspect-ratio: 20/11;
}
 
.robust-method-img-aspect-ratio {
    aspect-ratio: 440/557;
}
 
.about-cta {
    text-align: center;
    text-decoration: underline;
    /* color: #AD101B; */
    cursor: pointer;
    box-sizing: border-box;
    line-height: 26px;
    font-family: "regular_medium";
    font-size: 20px;
}
 
.about-cta:hover {
    color: #ad101b;
}
 
.categories-heading-about {
    font-family: regular_bold;
}
 
.hubs-heading {
    color: #000;
    font-family: 'regular_bold';
    font-size: 16px;
    margin-bottom: 0px;
    display: inline-block;
}
 
.hubs-anchor {
    text-transform: capitalize !important;
}
 
.ic-info h4 {
    color: var(--Span-color);
    font-size: 18px;
    margin: 25px 0;
    font-family: var(--Rgular) !important;
}
 
.ic-info p {
    font-family: var(--Rgular-medium);
    color: rgb(19, 41, 61);
}
 
 
 
@media (max-width: 1280px) {
    .intro_grid-container {
        grid-template-columns: repeat(3, 1fr);
    }
}
 
@media (max-width: 968px) {
    main {
        line-height: normal;
    }
 
    .gptw-info div {
        padding: 2%;
    }
 
    .top-benner {
        padding: 0 10px;
    }
 
    .top-benner h1 {
        font-size: 30px;
        margin-bottom: 20px;
 
    }
 
    .top-benner h3 {
        margin-bottom: 0px;
        font-size: 16px;
        line-height: 1.5;
        width: auto;
    }

    .purchase-btn{
        margin-top: 20px;
    }

    .chemical-desc{
        padding: 50px 50px !important;
    }
 
    .about-info p {
        width: 100%;
        font-size: 16px;
    }
 
    .gptw-info {
        flex-direction: column;
        align-items: center;
    }
 
    .gptw-info div h3 {
        font-size: 20px;
    }
 
    .offering-intro {
        display: block;
    }
 
    .intro_grid-container {
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(1, 1fr);
    }
 
    .choice-item {
        display: block;
    }
 
    .choice-item img {
        width: 300px;
        height: auto;
        margin: 0px;
    }
 
    .choice-item div {
        display: block;
    }
 
    .choice-item_middle {
        display: flex;
        flex-direction: column-reverse;
        align-items: baseline;
    }
 
    .gptw-info div p {
        font-size: 16px;
    }
 
    .cm-list-wrapper .cm-list-items {
        height: auto;
        flex-wrap: nowrap;
    }
 
    .cm-list-wrapper .cm-list-items:before {
        top: 0px;
        left: -43px;
        right: -43px;
        bottom: 0px;
    }
}


@media (max-width: 576px){
.top-benner h3{
   font-size: 14px;
}

.offering-section p{
    font-size: 17px;
}

.offering-intro div p{
    font-size: 14px;
}

.benefits-key-features-list li{
    font-size: 15px;
}

}