.webp .mh {background-image: linear-gradient(to bottom right,#000532ab,#1a0c00cc), url("/Uploaded/Image/mastheads/Geometric-Hex.webp");}
.no-webp .mh {background-image:linear-gradient(to bottom right,#000532ab,#1a0c00cc), url("/Uploaded/Image/mastheads/Geometric-Hex.jpg");}
@media (max-width: 450px) {
.webp .mh {background-image: linear-gradient(to bottom right,#000532ab,#1a0c00cc), url("/uploaded/Image/mastheads/mobile/450_Geometric-Hex.webp");}
.no-webp .mh {background-image: linear-gradient(to bottom right,#000532ab,#1a0c00cc), url("/uploaded/Image/mastheads/mobile/450_Geometric-Hex.jpg");}
}

.background-transition {height: calc(8vw + 50px); max-height: 250px}
#transition-one {background: linear-gradient(182deg, #fff 0%, #fff 40%, #333333aa 40.3%, #333333aa 45.1%, #333333aa 45.4%, #333333aa), linear-gradient(183.7deg, #fff 0%, #222 39.8%, #222222aa 40.2%, #222222aa 50.8%, #333333 51.2%, #333333);}


#transition-two {background: linear-gradient(177.3deg, #333 0%, #333 40%, #333333aa 40.3%, #333333aa 49.1%, #222 49.4%, #222), linear-gradient(179deg, #333 0%, #333 39.8%, #333333aa 40.2%, #333333aa 50.8%, #222 51.2%, #222);
}

#transition-three {    background: linear-gradient(183deg, #222 0%, #222 43%, #1d4f91aa 43.3%, #1d4f91aa 52.1%, #1d4f91 52.4%, #1d4f91), linear-gradient(182.3deg, #222 0%, #222 43.8%, #1d4f91aa 44.2%, #1d4f91aa 53.8%, #1d4f91 54.2%, #1d4f91);}



html {scroll-behavior: smooth;}

html {
  scroll-padding-top: 5rem;
}

.section-title {
    color: #fff;
    justify-content: center;
    margin: 10px 0 10px 0;
    padding: 0 10px;
    font-size: 1.5em;
    background-color: #565656;
    background-image: url(/uploaded/image/Cards/CardTitleBlank.png);
    border: 2px solid #fff;
    border-radius: 4px;
    box-shadow: 0 5px 14px -5px #909090;
    height: 70px;
    background-repeat: no-repeat;
    background-position: right;
    background-size: contain;
    display: flex;
    align-items: center;
    grid-column: -1/1;
}

div#MID {
    margin-top: auto;
    margin-bottom: auto;
}

/*---------------------- GREY SECTION START------------------------------- */
div#regGrey {
    background: #333;
 
}

div#PPL{
    border: none;
    background: none;
    box-shadow: none;
color: white;
}

#regGrey .card-subtitle {  color: white;}

h3.section-title {
    background: transparent!important;
    font-weight: normal;
    height: unset;
    padding: 10px;
}


#regGrey a {
    color: white!important;
}

#regGrey .card-col-container {
    margin-top: 30px;
    
}



/*---------------------- GREY SECTION END  ------------------------------- */

/*---------------------- Purple SECTION START------------------------------- */
#regPurple {
    background: #eee;
}


div#regPurple {
    background: #222;
    padding: 0% 2% 0% 2%;
}

#regPurple .card-span.across-three.clean {
    background: none;
}

#regPurple .card-subtitle {
    color: white;
    border: none;
}

/*---------------------- Purple SECTION END  ------------------------------- */

/*---------------------- RED/BLUE SECTION START------------------------------- */

.Feefo-title {
    font-size: 2.2em;
    text-transform: uppercase;
    font-weight: 700;
    color: white;
    line-height: 1em;
margin: 0px;

}
/*---------------------- RED/BLUE SECTION END  ------------------------------- */


.DownThree {
grid-row: 1/4;
}


@media (max-width: 1000px)
.DownThree {
    grid-row: 1/3!important;
}

@media (max-width: 700px) {
.card-col-container {column-gap: 10px!important;
grid-gap: 10px!important;}
}