:root {
  --shell_Mid_Grey: #7F7F7F;
  --Shell_Pale_Grey: #D9D9D9;
  --Shell_Very_Dark_Grey: #404040;
  --Shell_Dark: #000000;
  --Shell_Yellow: #FBCE07;
  --Shell_Red: #dd1d21;
  --Shell_Light_Grey: #A6A6A6;
  --Shell_Icon: #595959;
  --Shell_Very_Pale_BG_Grey: #F7F7F7;
  --Shell_Blue: #003C88;
  --Shell_Light: #FFFFFF;
  --grey_clr: #d8d8d8;
  --dark_clr: #404040;
  --light_clr: #ffffff;
  --yellow_clr: #fbce07;
  --blue_clr: #003C88;
  --grey_light_clr: #7f7f7f;
  --red_clr: #dd1d21;
  --yellow: #FFC600;
  --red: #DD1D21;
  --blue: #336094;
  --grey: #4A4A4A;
  --primary-grey: #343434;
  --light-grey: #F5F5F5;
  --light-yellow: #FEF5D6;
}

*,
::after,
::before {
  box-sizing: border-box;
}

html {
  scroll-behavior: auto !important;
}

header {
  background-color: white;
}

header .shell-header.blue {
  background-color: var(--blue);
}

header .header-logo {
  max-width: unset !important;
}

header .container {
  max-width: 1320px;
}

body {
  color: var(--grey);
  font-family: ShellMedium, Arial;
  margin: 0px;
}

a {
  color: var(--blue);
}

ul {
  list-style: none;
  padding-left: 1.25em;
}

li {
  position: relative;
}

li::before {
  color: var(--yellow);
  content: "•";
  position: absolute;
  left: -20px;
  top: 0.8em;
  transform: translateY(-50%) scale(1.6);
}

.text-blue {
  color: var(--blue);
}

img {
  height: auto;
  max-width: 100%;
}

.container {
  margin: 0 auto;
  max-width: 1296px;
  padding-left: 12px;
  padding-right: 12px;
  width: 100%;
}

.flex {
  display: flex;
}

.col,
.column {
  flex-direction: column;
}

.flex-start {
  justify-content: flex-start;
  gap: 40px;
}

.space-between {
  justify-content: space-between;
  gap: 40px;
}

.spacer {
  padding-top: 50px;
  padding-bottom: 50px;
}

.spacer-lg {
  padding-top: 66px;
  padding-bottom: 66px;
}

.form {
  max-width: 487px;
  width: 100%;
}

.center {
  margin: 0 auto;
  text-align: center;
}

.align-center {
  align-items: center;
}

.fullwidth {
  font-size: 20px;
  padding: 24px 0;
  width: 100%;
}

.main-offer {
  padding-bottom: 40px;
}

body h2 {
  margin-top: 0px;
}

.main-offer .content *:last-child {
  margin-bottom: 0px;
}

.main-offer .offer {
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 705px;
  width: 100%;
}

.main-offer .offer * {
  margin: 0;
}

.double-img {
  margin-bottom: 50px;
}

p.reference {
  font-size: 14px;
}

.page-header {
  background: white;
  border-radius: 20px 20px 0 0;
  padding: 69px;
  position: relative;
  max-width: 660px;
  visibility: hidden;
  width: 100%;
}

.page-header p:last-child {
  margin-bottom: 0px;
}

.mb-15 {
  margin-bottom: 15px;
}

h1 {
  color: var(--Primary-Grey-Main, #4A4A4A);
  font-size: 39px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
  margin: 0px;
}

h2 {
  color: var(--Primary-Grey-Main, #4A4A4A);
  font-size: 32px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 20px;
}

h3 {
  color: var(--Primary-Grey-Main, #4A4A4A);
  font-size: 28px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
  letter-spacing: -1px;
}

h4 {
  color: var(--Primary-Grey-Main, #4A4A4A);
  font-family: ShellHeavy, Arial;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.05;
  margin-bottom: 15px;
  margin-top: 0px;
}


h5 {
  color: var(--Primary-Grey-Main, #4A4A4A);
  font-family: ShellHeavy, Arial;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  margin-bottom: 15px;
  margin-top: 0px;
}

p {
  color: var(--Primary-Grey-Main, #4A4A4A);
  font-family: ShellMedium, Arial;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
  letter-spacing: -0.5px;
}


body .size-16 {
  font-size: 16px;
}

body .size-20 {
  font-size: 20px;
}

body .size-30 {
  font-size: 30px;
}

.small-text,
.small-text :is(p, ul, li) {
  font-size: 16px;
}

p.lead {
  color: var(--Secondary-Night-Main, #336094);
  font-family: ShellHeavy, Arial;
  font-size: 22px;
  font-style: normal;
  font-weight: 600;
  line-height: 125%;
}

ul li {
  color: var(--Primary-Grey-Main, #4A4A4A);
  font-family: ShellMedium, Arial;
  font-size: 18px;
  font-style: normal;
  line-height: 144.444%;
  padding-bottom: 10px;
}

img.bordered {
  border-radius: 24px;
  overflow: hidden;
}

.form-container {
  border-radius: 20px;
  background: var(--light-grey);
  overflow: hidden;
  padding: 30px 40px;
}

.form-white .form-container {
  background: white;
  box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.15);
}

.form-container .form-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  max-width: 456px;
}

form .market-heading {
  font-family: ShellMedium, Arial;
}

form .sc-button {
  background: var(--Primary-Yellow-Main, #FFC600) !important;
  color: var(--Primary-Grey-Main, #4A4A4A) !important;
  width: 100%;
  padding: 15px 40px;
  border-radius: 10px;
  border: 0px;
  cursor: pointer;
  text-align: center;
  color: var(--Primary-Grey-Main, #4A4A4A);
  text-align: center;
  font-family: ShellMedium, Arial;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
  transition: all 0.2s ease-out;
}

form .sc-button:hover {
  background-color: #336094 !important;
  color: white !important;
}

.form-container.contact-us-form {
  background-color: white;
  box-shadow: 1px 0 16.5px 0 rgba(0, 0, 0, 0.15);
  padding: 0px;
}

.form-container.contact-us-form #formThanks {
  padding: 20px 40px;
}

.form-container.contact-us-form h2 {
  margin-bottom: 0px;
  padding: 25px 40px;
}

.form-container.contact-us-form #formContainer {
  padding: 40px;
}

form {
  margin-top: 35px;
}

form .form-submit {
  background-color: #336094;
  color: #FFF;
}

body .selectize-input,
form input[data-field-type="Phone"],
form input[data-field-type="Text"] {
  height: 58px !important;
  border-radius: 10px;
  color: #919191 !important;
  font-size: 18px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: -1px;
  padding: 18px 20px;
  text-align: left;
}

body .selectize-input,
.form-container input:not([type=checkbox]),
.form-container select,
.form-container textarea {
  box-shadow: 2px 2px 8px 0px #D9D9D9 inset;
}

body .selectize-input.dropdown-active,
body .selectize-input:focus {
  border-radius: 10px;
}

input::placeholder {
  color: #919191 !important;
}

.form-group select {
  background-image: url(https://image.chemical.shell.com/lib/fe2d11737364047e731176/m/1/arrow.png);
  background-position: center right 10px;
  background-repeat: no-repeat;
  border-radius: 10px;
  color: #919191 !important;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-size: 18px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: -1px;
  height: 58px !important;
  padding: 18px 20px;
  text-align: left;
}

.checkbox-form-control {
  align-items: center;
  font-family: ShellMedium, Arial;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.1;
  display: grid;
  grid-template-columns: 1em auto;
  gap: 2em;
  margin-top: 7%;
  line-height: 22px;
  letter-spacing: -0.02em;
  text-align: left;
}

.sc-consent {
  font-family: ShellMedium, Arial;
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0px;
  text-align: left;
  margin: 18px auto;
}

body .market-value {
  font-family: ShellMedium !important;
}

.checkbox-form-control+.checkbox-form-control {
  margin-top: 1em;
}

input[type=checkbox] {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  /* Remove most all native input styles */
  -moz-appearance: none;
  appearance: none;
  /* For iOS < 15 */
  /* Not removed via appearance */
  margin: 0;
  font: inherit;
  color: #4a4a4a;
  width: 30px;
  height: 30px;
  border: 1px solid #4a4a4a;
  border-radius: 6px;
  transform: translateY(-0.075em);
  display: grid;
  place-content: center;
}

input[type=checkbox]::before {
  content: "";
  width: 15px;
  height: 15px;
  -webkit-clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0);
  transform-origin: bottom left;
  transition: 120ms transform ease-in-out;
  box-shadow: inset 2px 2px #4a4a4a;
  /* Windows High Contrast Mode */
  background-color: #4a4a4a;
}

input[type=checkbox]:checked::before {
  transform: scale(1);
}

.form-title {
  color: var(--Primary-Grey-Main, #4A4A4A);
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
  /* 28.8px */
}

.form-check {
  padding-left: 0px !important;
}

.form-check-input {
  position: relative !important;
  margin-left: 0px !important;
}

.two-col .row {
  gap: 20px;
}

.two-col h3 {
  max-width: 563px;
  width: 100%;
}

.blue-text, .text-blue {
  color: var(--blue);
}
.red-text, .text-red {
  color: var(--red);
}

footer {
  background-color: var(--light-grey);
  padding: 10px;
  text-align: center;
}

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

footer .links ul li a {
  font-size: 16px;
}

.form-group {
  margin-bottom: 1rem;
}

.checkbox-container .form-group {
  margin-bottom: 0.5rem;
}

.parallax-container {
  position: relative;
  height: 550px;
  overflow: hidden;
  width: 100%;
}

.parallax-container>.container {
  align-items: flex-end;
  display: flex;
  height: 100%;
}

.parallax-container img {
  position: absolute;
  top: 50%;
  left: 50%;
  height: auto;
  transform: translate(-50%, -50%);
  width: 100%;
}

body .featured-img {
  height: auto;
  max-width: unset;
  width: 100%;
  margin-bottom: 40px;
  margin-top: 50px;
}

.stats {
  padding: 70px 0;
}

.stats h2 {
  color: white;
  margin: 0;
  text-align: center;
}

.stats .container {
  flex-direction: column;
  gap: 60px;
}

.stats-container {
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.stats-container .stat {
  align-items: center;
  border-radius: 16px;
  background: var(--Secondary-Night-700, #204B7A);
  color: white;
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: flex-start;
  padding: 20px;
  width: 100%;
}

.stat h3 {
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 25px;
  /* 125% */
  margin: 0px;
}

.stat .count {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.25;
}

.stats-container .stat * {
  color: white;
}

.headline h2 {
  margin: 24px auto;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1*0);
  margin-right: calc(-.5 * 1.5rem);
  margin-left: calc(-.5 * 1.5rem);
}

.row>* {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(1.5rem * .5);
  padding-left: calc(1.5rem * .5);
  margin-top: var(0);
}

.form-control {
  display: block;
  width: 100%;
  padding: 18px 20px;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--bs-body-color);
  background-color: white;
  background-clip: padding-box;
  border: 1px solid #dee2e6;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.form-control:focus {
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}

.p-50 {
  padding-top: 50px;
  padding-bottom: 50px;
}

.p-60 {
  padding-top: 60px;
  padding-bottom: 60px;
}

.btn {
  align-items: center;
  display: inline-flex;
  gap: 10px;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  justify-content: center;
  line-height: 26px;
  text-decoration: none;
  color: var(--Shell_Very_Dark_Grey);
  background-color: var(--Shell_Yellow);
  border-radius: 6px;
  padding: 10px 16px;
  margin: 17px 0 0;
  position: relative;
  transition: 0.3s;
}

.btn svg path {
  transition: fill 0.3s ease-out;
}

.btn:hover {
  color: var(--Shell_Yellow);
  background-color: var(--Shell_Very_Dark_Grey);
  border-color: var(--Shell_Very_Dark_Grey);
}

.btn:hover svg path {
  fill: var(--Shell_Yellow);
}

.btn.co {
  font-size: 20px;
  margin-top: 0px;
  margin-bottom: 30px;
}

.btn.co path {
  transition: fill 0.3s ease-out;
}

.btn.co:hover path {
  fill: var(--Shell_Yellow);
}

.two-col .left,
.two-col .right,
.fade-in,
.pops {
  visibility: hidden;
}

.main-offer {
  padding-top: 65px;
  padding-bottom: 65px;
}
    
.main-offer.sm-padding {
  padding-top: 25px;
  padding-bottom: 50px;
}

.main-offer .more-links {
  gap: 10px;
}

.main-offer a.link {
  color: #336094;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
  /* 24px */
  text-decoration-line: underline;
}

.absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.bg-yellow {
  background-color: var(--yellow);
}

.bg-grey {
  background-color: var(--light-grey);
}

.bg-blue {
  background-color: var(--blue);
  color: white;
}

.bg-blue * {
  color: white;
}

.red-btn {
  background-color: var(--red);
  border-radius: 6px;
  color: white;
  padding: 10px 16px;
  transition: background-color 0.3s ease-out;
  text-decoration: none;
}

.red-btn:hover {
  background-color: var(--grey);
}

.sm-title {
  max-width: 765px;
  margin: 0 auto;
  text-align: center;
}

.bullets {
  align-items: flex-start;
  padding: 40px 0 65px 0;
  gap: 20px;
  flex-wrap: wrap;
}

.bullets .bullet {
  background-color: var(--light-grey);
  border-radius: 15px;
  flex: 1 1 48%;
  gap: 15px;
  padding: 30px 40px;
  text-align: left;
}

.bullets .bullet .icon {
  background-color: var(--yellow);
  border-radius: 50%;
  flex: none;
  height: 64px;
  position: relative;
  width: 64px;
}
    
.bullets .bullet p:last-child {
  margin-bottom: 0px;
}

.bullets .bullet .icon svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.bullets .bullet p {
  color: var(--Primary-Grey-Main, #4A4A4A);
  font-family: ShellMedium, Arial;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 22.6px;
  /* 141.25% */
}

.bullets .bullet p.title {
  color: var(--Primary-Grey-Main, #4A4A4A);
  font-family: ShellHeavy, Arial;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 125%;
  margin: 0 0 10px 0;
}

.pills .pill {
  align-items: center;
  background-color: var(--yellow);
  border-radius: 24px;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

.pills .pill.pill-grey {
  background-color: var(--light-grey);
}
    
.pills .pill.pill-white {
  background-color: white;
} 
    
.pills .pill.shadow {
  box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.15);
}
    
.pills .pill .half {
  flex: 0 1 50%;
  padding: 0px;
  position: relative;
  overflow: hidden;
}

.pills .pill .half.text {
  padding: 35px;
}

.pills .pill .half.img {
  font-size: 0;
  line-height: 0;
  min-height: 300px;
}

.bg-grey .pill {
  background-color: white;
}

.pills .pill .half img {
  height: 100%;
  max-width: unset;
  min-width: 100%;
  width: 100%;
  position: absolute;
  inset: 0;
  object-fit: cover;
}

.sc-button.submit-btn {
  background-color: #336094;
  color: #FFF;
}
    
form .sc-button.submit-btn.btn-blue {
  background: var(--Secondary-Night-Main, #336094) !important;
  color: white !important;
}
    
.sc-button .default-text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}
    
form .sc-button.submit-btn.btn-blue:hover {
  background: #4A4A4A !important;
}
    
.form-container.contact-us-form .submit-btn {
  
}
    
table.shell-table {
  border-collapse: collapse;
  border-radius: 12px;
  background: #FFF;
  box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.07);
  overflow: hidden;
}

table.shell-table th {
  background: #356194;
  color: white;
  padding: 12px 24px;
  text-align: left;
}

table.shell-table tr:nth-child(even) {
  background-color: var(--light-grey);
}

table.shell-table td {
  padding: 12px 24px;
}

.loading-text {
  display: none;
  gap: 10px;
}

.loading-text.show {
  align-items: center;
  display: flex;
  justify-content: center;
}

.loading-text .loading {
  align-items: center;
  display: flex;
  justify-content: center;
  font-weight: bold;
}

.loading-text .period {
  margin: 0px;
  animation: bounce 1.5s infinite ease-in-out;
  -webkit-animation: bounce 1.5s infinite ease-in-out;
}

.loading-text .period:nth-child(2) {
  animation-delay: 0.2s;
}

.loading-text .period:nth-child(3) {
  animation-delay: 0.4s;
}

@-webkit-keyframes bounce {

  0%,
  100% {
    -webkit-transform: translateY(0);
  }

  50% {
    -webkit-transform: translateY(-3px);
  }
}

@keyframes bounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-3px);
  }
}

@media (min-width: 1301px) {
 
.main-offer .content {
  max-width: 637px;
  width: 100%;
}
    
  main.offset-form .form {
    margin-top: -230px;
  }

  .container .compact {
    max-width: 600px;
    width: 100%;
  }
}

@media (max-width: 1300px) {
  .double-img {
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (max-width: 1200px) {
// old reverse
}

@media (min-width: 992px) {
  .container > .half {
    flex: 1 1 48%;
  }
    
  .col-md-5 {
    flex: 0 0 auto;
    width: 41%;
  }

  .col-md-6 {
    flex: 0 0 auto;
    width: 48%;
  }

  .col-md-7 {
    flex: 0 0 auto;
    width: 56%;
  }

  .row .half,
  .two-col .text,
  .two-col .img {
    width: 48%;
  }
}

@media (max-width: 991px) {
    
  .main-offer {
    padding-top: 0px;
  }

  .main-offer.hero-container {
    padding-top: 66px;
    margin-bottom: 30px;  
  }
    
  .page-header {
    padding: 30px 5px;
  }

  h1 {
    font-size: 2rem;
  }

  .flex {
    flex-direction: column;
  }
  
  .reverse {
    flex-direction: column-reverse;
  }

  .content,
  .text,
  .form {
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .form-container {
    padding: 30px 20px;
  }

  .col-md-5,
  .col-md-6,
  .col-md-7,
  .row .half {
    width: 100%;
  }

  .stats-container {
    flex-direction: column;
  }

  .parallax-container {
    height: 350px;
  }

  .parallax-container img {
    top: 20%;
  }

  h2 {
    font-size: 25px;
  }

  h3 {
    font-size: 20px;
  }
}