:root {
    --the-black: rgba(30, 30, 30, 1);
    --the-white: rgba(255, 255, 255, 1);
    --primary: rgba(39, 54, 126, 1);
    --secondary: rgba(186, 208, 37, 1);
    --faded-green: rgba(232, 246, 194, 1);
}


/*Font icons*/
@font-face {
    font-family: 'bibicons';
    src: url('font/bibicons.eot?37600709');
    src: url('font/bibicons.eot?37600709#iefix') format('embedded-opentype'),
         url('font/bibicons.woff2?37600709') format('woff2'),
         url('font/bibicons.woff?37600709') format('woff'),
         url('font/bibicons.ttf?37600709') format('truetype'),
         url('font/bibicons.svg?37600709#bibicons') format('svg');
    font-weight: normal;
    font-style: normal;
  }
  /* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
  /* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
  /*
  @media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
      font-family: 'bibicons';
      src: url('../font/bibicons.svg?37600709#bibicons') format('svg');
    }
  }
  */
  [class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: "bibicons";
    font-style: normal;
    font-weight: normal;
    speak: never;
  
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    /* opacity: .8; */
  
    /* For safety - reset parent styles, that can break glyph codes*/
    font-variant: normal;
    text-transform: none;
  
    /* fix buttons height, for twitter bootstrap */
    line-height: 1em;
  
    /* Animation center compensation - margins should be symmetric */
    /* remove if not needed */
    margin-left: .2em;
  
    /* you can be more comfortable with increased icons size */
    /* font-size: 120%; */
  
    /* Font smoothing. That was taken from TWBS */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  
    /* Uncomment for 3D effect */
    /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
  }
  
  .icon-phone:before { content: '\e800'; } /* '' */
  .icon-personal-accdent-employment-welfare:before { content: '\e801'; } /* '' */
  .icon-one-stop-shop:before { content: '\e802'; } /* '' */
  .icon-police-report-motor-accident:before { content: '\e803'; } /* '' */
  .icon-police-report-no-motor:before { content: '\e804'; } /* '' */
  .icon-public-liability-claim-form:before { content: '\e805'; } /* '' */
  .icon-reinsurance:before { content: '\e806'; } /* '' */
  .icon-risk-management:before { content: '\e807'; } /* '' */
  .icon-search:before { content: '\e808'; } /* '' */
  .icon-actuarial-solutions:before { content: '\e809'; } /* '' */
  .icon-agriculture-insurance:before { content: '\e80a'; } /* '' */
  .icon-agriculture:before { content: '\e80b'; } /* '' */
  .icon-arrow-down:before { content: '\e80c'; } /* '' */
  .icon-minus:before { content: '\e80d'; } /* '' */
  .icon-arrow-up:before { content: '\e80e'; } /* '' */
  .icon-arrow-right:before { content: '\e80f'; } /* '' */
  .icon-arrow-left:before { content: '\e810'; } /* '' */
  .icon-specialised-insurance-services:before { content: '\e811'; } /* '' */
  .icon-serious-savings:before { content: '\e812'; } /* '' */
  .icon-theft-and-all-risk-claim-form:before { content: '\e813'; } /* '' */
  .icon-travel-insurance:before { content: '\e814'; } /* '' */
  .icon-travel:before { content: '\e815'; } /* '' */
  .icon-vision:before { content: '\e816'; } /* '' */
  .icon-windscreen-claim-form:before { content: '\e817'; } /* '' */
  .icon-assets-1:before { content: '\e818'; } /* '' */
  .icon-assets:before { content: '\e819'; } /* '' */
  .icon-business:before { content: '\e81a'; } /* '' */
  .icon-cancel:before { content: '\e81b'; } /* '' */
  .icon-car-insurance:before { content: '\e81c'; } /* '' */
  .icon-core-values:before { content: '\e81d'; } /* '' */
  .icon-email:before { content: '\e81e'; } /* '' */
  .icon-car:before { content: '\e81f'; } /* '' */
  .icon-employees:before { content: '\e820'; } /* '' */
  .icon-group-personal-accident:before { content: '\e821'; } /* '' */
  .icon-expert-advice:before { content: '\e822'; } /* '' */
  .icon-goods-in-transit-claim-form:before { content: '\e823'; } /* '' */
  .icon-home-cover:before { content: '\e824'; } /* '' */
  .icon-house-contents:before { content: '\e825'; } /* '' */
  .icon-home:before { content: '\e826'; } /* '' */
  .icon-individuals:before { content: '\e827'; } /* '' */
  .icon-mission:before { content: '\e828'; } /* '' */
  .icon-motor-accident:before { content: '\e829'; } /* '' */
  .icon-home-contents:before { content: '\e82a'; } /* '' */
  .icon-location:before { content: '\e82b'; } /* '' */
  .icon-empoyee-solutions:before { content: '\e82c'; } /* '' */
  .icon-instagram:before { content: '\f16d'; } /* '' */
  

/*------------------------------------------------------------*/

html,
body,
a,
p,
ul,
li {
    font-family: "Urbanist", sans-serif;
    font-weight: 400;
    font-style: normal;
}

html, body {
    overflow-x: hidden;
    width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Montserrat", sans-serif;
}

h2 {
    position: relative;
    font-size: 34px;
    font-weight: 900;
    line-height: 45px;
    margin-bottom: 40px;
    color: var(--primary);
}

h3 {
    position: relative;
    font-size: 28px;
    font-weight: 900;
}

h4 {
    position: relative;
    font-size: 24px;
    font-weight: 900;
}

p, a, li {
	font-size: 16px;
}

a:hover {
    text-decoration: none !important;
}

.container {
    max-width: 90%;
}

button {
    outline: none !important;
}

.st3 {
    font-family: inherit !important;
}

/*--------------------------*/

.the-body-content {
    overflow: hidden;
}

html {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

ul {
    padding: 0;
}

/* .wp-block-list ul {
  list-style: none;         
  padding-left: 1.5em;    
  margin: 0;
}

.wp-block-list li {
  position: relative;
  margin-bottom: 0.6em;
  padding-left: 1em;
  line-height: 1.6;
}

.wp-block-list li::before {
  content: "•";             
  position: absolute;
  left: 0;
  color: var(--primary);  
  font-size: 4em;
  line-height: 1;
} */

/* li {
    list-style: none;
  } */

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

.the-body-content ul {
    padding-left: 3em; 
}

.the-body-content ul li {
    position: relative;
    list-style: disc;
    line-height: 2;
}

/* .the-body-content ul li::before {
    content: "•"; 
    font-weight: bold;
    color: var(--primary);
    margin-right: 10px;
    font-size: 0.9em;
    top: -1px;
    position: relative;
} */

a {
    color: var(--secondary);
    background-color: transparent;
    text-decoration: none;
    transition: 500ms ease-in-out;
}

a:hover {
    color: var(--faded-green);
}

a img {
    transition: 500ms;
}

a img:hover {
    opacity: 0.8;
    transform: scale(1.1);
}


/* Fullscreen Loader */
#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, #0a4a8e, #021b3b); /* calm, not bright */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  animation: bgPulse 10s infinite alternate;
}

/* Logo & tagline container */
.loader-content {
  text-align: center;
  color: white;
  animation: fadeIn 2s ease-in-out;
}

/* Logo */
.loader-content img {
  width: 140px;
  height: auto;
  display: block;
  margin: 0 auto 15px;
  animation: floatLogo 4s ease-in-out infinite;
}

/* Tagline */
.loader-tagline {
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: 2px;
  opacity: 0;
  animation: fadeUp 3s ease-in-out forwards 2s; /* fades in after logo */
}

/* Animations */
@keyframes floatLogo {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Background breathing animation */
@keyframes bgPulse {
  0% { background: radial-gradient(circle at center, #0a4a8e, #021b3b); }
  100% { background: radial-gradient(circle at center, #11284B, #000a1f); }
}


/* LOgo */

.log img {
    width: 270px;
}

.color-logo {
    display: none;
}

.sticky .color-logo {
    display: block;
}

.sticky .black-logo {
    display: none;
}


/*---------Banner----------*/

.home .mk-bgimg {
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0 0 40px 0;
    /* height: 220px; */
    height: 600px;   
}

.banner {
    position: relative;
    margin-bottom: 5em;  
}

.mk-bgimg {
	position: relative;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	margin: 0px 0 40px 0;
	height: 100vh;
	background-color: var(--the-dark-gray);
}

.mk-bgimg::before {
    content: none;
    /* position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('../css/img/arch.svg');
    right: -300px;
    background-repeat: no-repeat;
    bottom: 0;
    background-size: cover; */
}

/* Make sure .mk-bgimg’s content (text, etc.) sits on top */
.mk-bgimg > * {
  position: relative;
}

/* .ms-caption {
      position: absolute;
      z-index: 8;
      top: 35%;
  } */

.actual-bread {
    position: relative;
    z-index: 8;
    top: -14em !important;
    background: transparent;
    margin-bottom: -5em;
    /* padding: 10px 0px 0 45px; */
}

.mk-page-title {
    color: var(--the-white);
    font-weight: 400;
}

.breadcrumb {
    color: var(--primary);
    font-size: 1em;
    position: absolute;
    bottom: 0;
    font-weight: 600;
}

.breadcrumb a {
    color: var(--primary);
    font-weight: 400;
    font-size: 1em;
}

.breadcrumb .icon-right-arrow {
    color: var(--the-black);
}

.mk-bgimg .content {
	position: relative;
}

.breadcrumb-wrap {
    margin-bottom: 80px;
    position: absolute;
    bottom: 30px;
}

.ms-caption {
	position: absolute;
	display: block;
	margin-top: 200px;
	color: var(--the-white);
}

.ms-caption h1 {
	margin-bottom: 40px;
}

.mk-page-title {
	font-size: 1.4em;
	font-weight: 400;
	color: var(--the-white);
	/* text-transform: uppercase; */
}

  .breadcrumb {
	background-color: transparent;
	padding-left: 0;
    z-index: 999;
}


/* Banner */
.banner-section {
  position: relative;
  overflow: hidden; /* important to clip the arch inside the section */
  z-index: 0;
}

.banner-section.slider-container {
    border-bottom: 0;
}
.banner-section #homeSlider .item {
    height: 600px;
    overflow: hidden;
}

/*Banner Arch*/
.banner-section::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: clamp(250px, 35vw, 500px);
    height: clamp(250px, 35vw, 500px);
    background-color: var(--secondary); /* Or your desired banner background */
    border-top-left-radius: 100% 100%;
    z-index: 0;
    pointer-events: none;
}


.banner-section .hero-flex {
    align-items: center;
}
/*--------------------------*/


/*for banner image*/

.the-actual-img {
    position: absolute;
    background-position: right;
    background-repeat: no-repeat;
    background-size: contain;
    margin: 0 0 40px 0;
    height: 500px;
    width: 100%;
    /* z-index: 9 !important; */
    top: 35%;
    right: 5%;
}

.mk-bgimg {
    position: relative;
}


/*-------------------------*/


/*---------Search form------------*/


/*
  .search-field {
      border: none;
      background: var(--the-dark-blue);
      color: var(--white);
      padding: 25px;
  }
  
  .search-submit {
      border: none;
      position: absolute;
      margin-left: -69px;
      width: 50px;
      height: 50px;
      top: -24px;
      text-indent: -9999px;
  }
  
  .col-sm-6.search {
      margin-top: 23px;
  }
  
  .search-submit {
      border: none;
      position: absolute;
      margin-left: -69px;
      width: 48px;
      height: 50px;
      top: -24px;
      text-indent: -9999px;
      background-image: url('../img/search-icon.png');
      background-repeat: no-repeat;
      background-position: 10px 10px;
      background-color: transparent;
  }
  
  .search-form {
      text-align: right;
  }*/


/*-----------------------------*/


/*--------Search-----------*/

@media screen and (max-width: 575px) {
    .main-nav-container {
        top: -63px;
    }
}

@media screen and (max-width: 999px) and (min-width: 576px) {
    .main-nav-container {
        top: -50px;
    }
}

@media screen and (max-width: 1200px) and (min-width: 767px) {
    .main-nav-container {
        top: 25px;
        right: -120px;
    }
}

@media screen and (max-width: 1200px) {
    .the-search {
        display: inline-block;
        float: right;
        position: absolute;
        top: 0;
        right: 38px;
    }
    .fa.fa-bars {
        position: absolute;
        right: 0;
    }
    /* .main-nav-container {
          top: -55px;
      } */
}


@media only screen and (max-width: 580px) {
    .search-trigger {
        position: relative;
        display: block;
        width: 111px;
        height: 74px;
        overflow: hidden;
        white-space: nowrap;
        color: transparent;
        z-index: 10;
        top: -28px !important;
        background: transparent;
        right: 10px !important;
        margin-bottom: -51px !important;
    }
    .fa.fa-bars {
        position: absolute;
        right: 13px;
        top: 0em;
    }
    input[type="search"].search-field {
        top: -49px !important;
    }
}

@media screen and (max-width: 766px) and (min-width: 581px) {
    .search-trigger {
        top: 3.2em !important;
        right: 30px !important;
    }
    .fa.fa-bars {
        position: absolute;
        top: 6px !important;
        right: 12px !important;
    }
    input[type="search"].search-field {
        top: -1.2em !important;
    }
}

@media screen and (max-width: 991px) and (min-width: 767px) {
    .search-trigger {
        top: -1.5em !important;
        right: -99px !important;
    }
    .fa.fa-bars {
        position: absolute;
        right: -123px !important;
    }
    input[type="search"].search-field {
        top: -0.8em !important;
    }
}

@media screen and (max-width: 1200px) and (min-width: 992px) {
    #menu-primary-menu li {
        margin-right: 2px;
    }
    .menu-primary-menu-container {
        top: -25px;
    }
    .the-search {
        top: -98px !important;
        right: -138px !important;
    }
    input[type="search"].search-field {
        top: -3.1em !important;
    }
}

@media only screen and (min-width: 1201px) {
    .the-search {
        top: 0;
        right: -210px;
        position: relative;
    }
}

@media (min-width: 900px) {
    .search-trigger {
        position: relative;
        top: -5px !important;
    }
}

.search-trigger {
    position: relative;
    display: block;
    width: 111px;
    height: 74px;
    overflow: hidden;
    white-space: nowrap;
    color: transparent;
    z-index: 10;
    /* top: -10px !important; */
    background: transparent;
}

.search-trigger::before,
.search-trigger::after {
    content: "";
    position: absolute;
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    transition: opacity 0.3s;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.search-trigger::before {
    top: 15px;
    left: 32px;
    width: 45px;
    height: 45px;
    border-radius: 5px;
    content: "\e805";
    font-family: "saz";
    color: var(--the-white);
    text-indent: 11px;
    font-size: 1.4em;
    background: var(--the-dark-gray);
    padding: 5px 0px;
}


/* .search-trigger::after {
  height: 15px;
  width: 3px;
     background: var(--black);
  bottom: 20px;
  right: 159px;
  -webkit-transform: rotate(-40deg);
  -moz-transform: rotate(-40deg);
  -ms-transform: rotate(-40deg);
  -o-transform: rotate(-40deg);
  transform: rotate(-40deg);
} */


/* .search-trigger span {
  position: absolute;
  height: 100%;
  width: 100%;
} */

.search-trigger span::before,
.search-trigger span::after {
    content: "";
    position: absolute;
    display: inline-block;
    height: 3px;
    width: 35px;
    top: 50%;
    margin-top: -2px;
    left: 45%;
    margin-left: -11px;
    background: var(--the-black);
    opacity: 0;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    -moz-transition: opacity 0.3s, -moz-transform 0.3s;
    transition: opacity 0.3s, transform 0.3s;
}

.search-trigger span::before {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.search-trigger span::after {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.search-trigger.search-is-visible::before,
.search-trigger.search-is-visible::after {
    opacity: 0;
}

.search-trigger.search-is-visible span::before,
.search-trigger.search-is-visible span::after {
    opacity: 1;
}

.search-trigger.search-is-visible span::before {
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
}

.search-trigger.search-is-visible span::after {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

@media (max-width: 760px) {
    input[type="search"].search-field {
        padding: 0 20px;
        width: 38vw !important;
        z-index: 9;
        border: none;
    }
}

input[type="search"].search-field {
    padding: 0 20px;
    width: 55vw;
    z-index: 9;
    border: none;
}

.search .ms-caption h2 {
    color: var(--the-white);
}

.search {
    /* position: absolute; */
    height: 0px;
    width: 100%;
    /* top: 39px; */
    left: 0px !important;
    z-index: 3;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
    -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
    transition: opacity 0.3s 0s, visibility 0s 0.3s;
}

.search-icon {
    display: flex;
    align-items: center;
    height: 140px;
}

.search.search-results {
    position: absolute;
    height: 70px;
    width: 100%;
    top: 0px;
    /* left: 0; */
    z-index: 3;
    opacity: 1 !important;
    visibility: visible !important;
    -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
    -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
    transition: opacity 0.3s 0s, visibility 0s 0.3s;
}

.the-advanced-search {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 35px;
}

.search form {
    display: inline;
    border: 1px solid var(--the-dark-gray);
    padding: 18px 0px 16px 10px;
    border-radius: 50px;
}

div#search {
    padding-top: 1em;
}

.search input {
    position: relative;
    color: var(--the-black);
}

.search input::-webkit-input-placeholder,
.search input::-moz-placeholder,
.search input:-moz-placeholder,
.search input:-ms-input-placeholder {
    color: #c9cbc4;
}

.search input:focus {
    outline: none;
}

.srch {
    position: relative;
}

.search.is-visible {
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
    -moz-transition: opacity 0.3s 0s, visibility 0s 0s;
    transition: opacity 0.3s 0s, visibility 0s 0s;
    background: var(--the-white);
    position: absolute;
    z-index: 999999999999;
    top: 0;
    height: 100vh;
}

.the-search {
    display: inline-block;
    float: right;
}

.srch li {
    list-style: none;
}

.search-contents {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 4em 0;
}

#search .icon-magnifier {
    font-size: 20px;
    background: var(--the-dark-gray);
    color: var(--the-white);
    padding: 15px 12px;
    border-radius: 50%;
}

/* Slider */

.bkg-img {
        width: 100%;
        height: inherit;
        object-fit: cover;
    
}

.content-wrapper {
    position: absolute;
    /* top: 20%; */
}

.slider-caption h2 {
    color: var(--primary);
    font-weight: 900;
    text-transform: capitalize;
    font-size: 5em;
    line-height: 1;
}

.banner-section .slider-caption h2 {
    /* width: 60%; */
    font-size: 42px;
    line-height: 1.2;
}

.banner-section .slider-caption{
    width: 55%;
    font-size: 55px;
    line-height: 1.2;
}

.slider-caption p {
    font-size: 16px;
    color: var(--primary);
}

.slider-caption h2 .first-word {
    color: var(--secondary);

}

.hero-btns {
    display: flex;
    align-items: center;
    gap: 40px;
}

.hero-btn a {
    background: var(--primary);
    color: var(--the-white);
    padding: 10px 30px;
    display: inline-block;
    font-size: 18px;
    font-weight: 700;
    border-radius: 50px;
    border: none;
    box-shadow: 5px 5px 0 var(--faded-green);
    cursor: pointer;
    transition: transform 0.2s ease;
}

.hero-btn.generate-quote a {
    background: transparent;
    color: var(--primary);
    border: 1px solid var(--primary);

}

.hero-btn a:hover {
    background: var(--secondary);
    transform: translateY(-2px);
}

.slider-caption {
    margin-bottom: 40px;
}

#homeSlider .owl-nav.disabled {
    display: none;
}


#homeSlider .item {
    background-size: cover;
    height: 120vh;
    background-attachment: scroll;
    position: relative;
}

.home #homeSlider .item::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('../css/img/arch.svg');
    right: -300px;
    background-repeat: no-repeat;
    bottom: 0;
    background-size: cover;
    
}

.content-wrapper {
    position: relative;
    padding-top: 5%;
    color: var(--the-white);
    z-index: 999;
    flex-basis: 50%;
}

.banner-section .content-wrapper {
flex-basis: unset;
}

.hero-flex {
    display: flex;
    position: absolute;
    bottom: 0;
    z-index: 99;
    gap: 10px;
    /* align-items: center; */
}

.banner-section .hero-flex {
top: 0;
} 

.hero-image {
    flex-basis: 50%;
}

.post-wrap {
    display: flex;
    justify-content: space-between;
}

.post-title {
    margin-bottom: 30px;
}


a.post-title {
    color: var(--the-white);
    font-size: 24px;
    font-weight: 300;
    transition: 500ms;
}

.read-more a {
	color: var(--the-white);
	font-weight: 600;
	transition: 500ms;
}

.insights {
    margin-top: 5px;
}

.insights h2 {
    color: var(--the-white);
}

.insight-wrap {
    flex-basis: 33.3%;
}

.insight-wrap a.post-title {
	border-top: 1px solid var(--the-white);
	padding: 40px 0;
	display: inline-block;
	width: 100%;
    text-align: center;
}

.insight-wrap a.post-title:hover {
	border-top: 3px solid var(--the-yellow);
    color: var(--the-yellow);
}

.projects-wrapper {
	position: absolute;
	width: 100%;
	bottom: 0;
	z-index: 99;
}

@media(max-width: 767px) {
    .projects-wrapper {
      display: none;
    }
}

/* Body */


.front-content {
    margin-top: 60px;
}


.wp-block-ideabox-counter .ib-counter-container {
    text-align: left !important;
}

span.ib-counter-number, .ib-counter-number-prefix, .ib-counter-number-suffix {
    font-weight: 300 !important;
    color: var(--the-yellow) !important;
    font-size: 2em;
}

.wp-block-ideabox-counter {
    margin-bottom: 40px;
}

.wp-block-button a {
    margin-bottom: 20px;
}

.side-text {
    position: relative;
    margin-left: 80px;
    padding: 150px 0;
}

.side-text::before {
    content: "GAME CHANGING CAPABILITIES";
    position: absolute;
    left: -215px;
    top: 50%;
    transform: rotate(-90deg);
}

.black-bg {
    position: relative;
    color: var(--the-white);
    padding: 100px 0 50px 0;
}

.black-bg::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100vw;
    width: calc(153% - -120%);
    height: 100%;
    background: var(--the-black);
    z-index: -1;
}

/* Home Block */

@media(max-width: 767px){

    .content-wrapper {
        padding-top: 280px;
        color: var(--the-white);
    }

}

@media(max-width:1200px) {
    .content-wrapper {
        padding-top: 20%;
    }
}


/* Buttons */

.btn a, .wp-block-button a {
	background: var(--the-yellow);
	color: var(--the-black);
	padding: 20px 40px;
	text-transform: uppercase;
	display: inline-block;
    transition: 500ms ease-in-out;
}

.btn a:hover, .wp-block-button a:hover, .build-project a:hover {
	background: var(--the-black) !important;
	color: var(--the-white) !important;
    transition: 500ms ease-in-out;

}

.wp-block-button.is-style-outline a:hover {
	background: var(--the-white) !important;
	color: var(--the-black) !important;
    
    transition: 500ms ease-in-out;

}


button.owl-next {
	position: absolute;
	right: 34%;
	top: 50%;
}

button.owl-next span, button.owl-prev span {
    display: none;
}

@media(max-width:600px){
    .owl-prev {
        display: none;
    }
}

button.owl-prev {
    position: absolute;
    top: 50%;
    left: 0;
}

.owl-next i {
	background: var(--the-yellow);
	color: var(--the-black);
	padding: 20px 20px;
	border-radius: 50px;
	display: inline-block;
	font-size: 20px;
}


button.owl-next::before {
    content: "\e80f";
    font-size: 22px;
    font-family: 'bibicons';
    background: var(--the-white);
    padding: 15px 23px;
    border-radius: 15px;
    color: var(--primary);
}

button.owl-prev::before {
    content: "\e810";
    font-size: 22px;
    font-family: 'bibicons';
    background: var(--the-white);
    padding: 15px 23px;
    border-radius: 15px;
    color: var(--primary);
    margin-left: 15px;
}

#leadership .owl-nav.disabled {
    position: absolute;
    right: 36%;
    top: 80%;
}


#leadership button.owl-prev {
	position: absolute;
	top: 0;
	left: -150px;
}

#leadership button.owl-next {
	position: absolute;
	right: 34%;
	top: 50%;
}


@media(max-width:1300px){
    #leadership .owl-nav.disabled {
    position: absolute;
    right: 30%;
    top: 85%;
}
}

/* News */

.home-news {
    margin: 40px 0;
}

.news-wrap .news-img img {
	width: 100%;
	object-fit: cover;
	height: 250px;
       border-radius: 20px;
}

.news-title h4 {
    text-transform: capitalize;
    color: var(--primary);
}

.news-title a {
	text-transform: uppercase;
    color: var(--the-black);
    transition: 500ms ease-in-out;
}

.news-title a:hover {
    color:  var(--the-yellow);
}

.news-img {
	overflow: hidden;
}

.news-holder {
	padding: 40px 20px;
}

.news-wrap {
    margin-bottom: 40px;
    border-radius: 30px;
    background: var(--faded-green);
    overflow: hidden;
    padding: 20px;
}


/* Hero Box */

.hero-box {
    display: flex;
    gap: 10%;
    justify-content: space-between;
    align-items: center;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.64);
    box-shadow: 0px 4px 60px 0px rgba(0, 0, 0, 0.10);
    backdrop-filter: blur(20.000001907348633px);
    padding: 20px 40px;
    position: relative;
    z-index: 1;
    width: 100%;
    margin-top: -220px;
}

.hero-item {
    border-radius: 20px;
    border: 1px solid #27367E;
    background: #FFF;
    min-width: 150px;
    padding: 20px;
    text-align: center;
}

.hero-item p {
    color: #27367E;
    text-align: center;
    font-size: 11.429px;
    font-style: normal;
    font-weight: 700;
}

.hero-item i {
    font-size: 2em;
    color: var(--primary);
}

.hero-icons-wrap {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-basis: 60%;
}

.item-flex {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-basis: 40%;
    justify-content: space-between;
}

.slider-container {
    border-bottom: 8em solid var(--faded-green);
}


/* About Section */
section.about-bib {
    margin-top: 150px;
}

/*  */

/* Quote Options */

.quote-options-section {
    font-family: 'Poppins', sans-serif;
    text-align: center;
    padding: 60px 20px;
    background: #fff;
  }
  
  .quote-subheading {
    margin-bottom: 40px;
  }

  
  .quote-subheading p {
    font-size: 1rem;
    color: #333;
  }
  
.card-wrapper {
  display: grid;
  gap: 20px;
  justify-content: space-around;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.card-icon i {
    font-size: 64px;
    color: var(--primary);
}
  
.option-card {
    background-color: var(--faded-green);
    border-radius: 30px;
    padding: 30px 60px;
    flex: 0 1 350px;
    position: relative;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
  
  .card-number {
    background-color: var(--secondary);
    color: var(--primary);
    font-weight: 600;
    font-size: 1rem;
    border-radius: 0 20px 20px 0;
    padding: 5px 15px;
    position: absolute;
    top: 65px;
    left: 0;
}
  
  .card-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary);
    margin: 40px 0 20px;
  }
  
  .card-title span {
    color: var(--wp--preset--color--black);
    font-weight: 600;
    font-size: 15px;
}
  
  .card-text {
    color: #000;
    font-size: 0.95rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 100px;
    font-family: "Urbanist", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.card-text ul {
    padding-left: 1em;
}
  
  .card-icon {
    margin-top: 30px;
    text-align: left;
  }
  
  .card-icon img {
    width: 40px;
    height: auto;
  }

  section {
    margin-bottom: 60px;
}

  /* Underline CSS */
  
  .wp-block-heading.is-style-underline-heading, h2.underline, h3.underline, h4.underline{
    text-align: center;
    position: relative;
    color: var(--wp--preset--color--primary); 
  }
  
  .wp-block-heading.is-style-underline-heading::after, h2.underline::after, h3.underline::after {
    content: "";
    display: block;
    margin: 0.5em auto 0;
    width: 80px;
    height: 4px;
    background: linear-gradient(
        90deg,
        var(--primary) 0%,
        var(--primary) 60.33%,
        #ffffff 15.33%,
        #ffffff 70.66%,
        var(--secondary) 18.66%,
        var(--secondary) 100%
    );
    border-radius: 4px;
}

h4.underline {
    text-align: left;
    color: var(--wp--preset--color--accent-green); 
}

h4.underline::after {
    margin: 0.5em 0;
        content: "";
    display: block;
    width: 80px;
    height: 4px;
    background: linear-gradient(
        90deg,
        var(--secondary) 0%,
        var(--secondary) 60.33%,
        transparent 15.33%,
        transparent 70.66%,
        var(--the-white) 18.66%,
        var(--the-white) 100%
    );
    border-radius: 4px;
}


/* Call Back Section */

.callback-section {
  background-color: var(--primary);
  color: #fff;
  padding: 60px 20px;
  font-family: 'Poppins', sans-serif;
  position: relative;
}

.has-primary-background-color::before {
    content: "";
    background-color: var(--primary);
    width: 150vw;
    left: -50vw;
    position: absolute;
    height: 100%;
    top: 0;
}

.callback-section.business-insurance {
        min-height: 545px;
}

.callback-section.business-insurance::after {
    content: "";
    position: absolute;
    width: 550px;
    height: 100%;
    background-image: url('../css/img/business-insurance.png');
    right: 0;
    background-repeat: no-repeat;
    bottom: 0;
    background-size: cover;
}

.callback-container {
    display: grid;
    margin: 0 auto;
    align-items: center;
    gap: 30px;
    grid-template-columns: 1fr 1fr;
}

.callback-form {
  flex: 1 1 50%;
  max-width: 550px;
  position: relative;
}

.subtitle {
  color: var(--wp--preset--color--accent-green);
  font-weight: 600;
  margin-bottom: 8px;
}

.callback-section h2 {
color: #FFF;
font-family: Montserrat;
font-size: 40px;
font-style: normal;
font-weight: 900;
line-height: 41px;
margin-top: 30px;
}

.description {
  color: #e1e1e1;
  font-size: 14px;
  margin-bottom: 24px;
}

.callback-form form input[type="text"],
.callback-form form input[type="email"],
.callback-form form textarea {
  width: 100%;
  padding: 15px;
  border-radius: 12px;
  border: none;
  margin-bottom: 15px;
  font-size: 14px;
  outline: none;
}

.callback-form form textarea {
    min-height: 250px;
}

.form-bottom, .form-bottom p  {
  display: flex;
  gap: 10px;
}

.form-bottom input[type="email"] {
  flex: 2;
}

.form-bottom button {
  flex: 1;
  background-color: var(--secondary);
  border: none;
  border-radius: 50px;
  padding: 15px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  color: #1D2A7A;
  transition: 0.3s;
  height: 50px;
}

.form-bottom button:hover {
  background-color: var(--faded-green);
}


.callback-image {
    position: relative;
    border-radius: 52.179px;
    border: 0.932px solid #FFF;
    background: rgba(195, 195, 195, 0.45);
    box-shadow: 42px 40px 50px 0px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(16.305904388427734px);
    padding: 15px 15px 80px;
    margin-top: 100px;
    justify-self: end;
}

.callback-content {
    justify-self: start;
}

.callback-image img {
    width: 100%;
    border-radius: 20px;
    border-radius: 35.179px;

}

.learn-btn a{
    background: var(--secondary);
    color: var(--the-white);
    padding: 10px 30px;
    display: inline-block;
    font-size: 18px;
    font-weight: 700;
    border-radius: 50px;
    border: none;
box-shadow: 5px 6px 0px 0px rgba(186, 208, 37, 0.29);
    cursor: pointer;
    transition: transform 0.2s ease;
}

.bi-buttoms a {
    border-radius: 20px;
    border: 0.932px solid #FFF;
    background: rgba(195, 195, 195, 0.40);
    box-shadow: 42px 40px 50px 0px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(16.305904388427734px);
    padding: 15px 30px;
    display: inline-block;
    color: var(--white);
}

.bi-buttoms {
    display: flex;
    flex-direction: column;
    gap: 60px;
    align-items: end;
    position: absolute;
    top: 150px;
    right: -450px;
    z-index: 9;
}

.assets-btn {
    margin-right: 140px;
}

.agric-btn {
    margin-right: 180px;
}

/* Leadership */

#leadership .callback-container {
    flex-wrap: nowrap;
    gap: 7.5%;
    align-items: center;
}

#leadership .callback-image, #leadership .callback-text {
    flex-basis: 50%;
}

@media(max-width:768px){
    #leadership .callback-image, #leadership .callback-text {
    flex-basis: unset;
    box-shadow: none;
}
.callback-text {
    margin-top: 15px;
}
#leadership .owl-nav.disabled {
    position: absolute;
    right: 0;
    top: unset;
}
.position p {
    font-size: 14px;
}
}

#leadership .callback-image .position {
    background: var(--white);
    padding: 5px 20px;
    border-radius: 50px;
}

#leadership .position p {
    color: var(--primary);
    text-align: center;
    margin: 0;
    font-weight: 700;
}

#leadership .callback-image img {
    margin-bottom: 30px;
}

#leadership .callback-image {
    padding: 15px 15px 30px;
    margin-top: 100px;
}


@media(max-width:1290px) {
.callback-image {
    max-width: 400px;
}
}

@media(min-width:1290px) {
#leadership .callback-image {
    max-width: 550px;
}

}

#leadership .callback-text .position {
    opacity: 0.3;
    background: #FFF;
    display: inline-block;
    text-align: center;
    padding: 7px 20px;
    border-radius: 50px;
    margin-bottom: 30px;
}

#leadership .callback-image {
    justify-self: auto;
}

/* Testimonials */

.testimonials-section {
    background: var(--primary);
    color: #fff;
    padding: 60px 20px;
    font-family: 'Segoe UI', sans-serif;
    z-index: 99;
    min-height: 600px;
    position: relative;
    overflow: hidden;
}

.section-title {
    z-index: 9999;
    position: relative;
    background: var(--primary);
    color: var(--white);
    max-width: 500px;
    padding: 30px;
}

.testimonials-rows {
    display: flex;
    flex-direction: column;
    gap: 30px;
    position: relative;
    /* top: 100px; */
    right: 0;
}

.testimonials-section .section-title h6 {
  color: #a0f33e;
  font-weight: bold;
  margin-bottom: 10px;
  position: relative;
  display: inline-block;
}

.testimonials-section .section-title h2 {
    font-size: 2rem;
    font-weight: bold;
    line-height: 1.4;
    margin-bottom: 40px;
    color: var(--white);
}

.testimonials-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.testimonial-card {
    padding: 20px;
    margin: 0 15px;
    max-width: 400px;
    width: 100%;
    color: #fff;
    flex-shrink: 0;
    text-align: left;
    position: relative;
    border-radius: 20px;
    border: 0.932px solid #FFF;
    background: rgba(195, 195, 195, 0.40);
    box-shadow: 42px 40px 50px 0px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(16.3059024810791px);
}


section.testimonials-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 150px;
    width: 100%;
    background: linear-gradient(to top, rgba(39, 54, 126, 1), rgba(39, 54, 126, 0.6), transparent);
    z-index: 1;
    pointer-events: none;
}

.testimonial-card .profile-img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 10px;
}

.testimonial-card .stars {
    color: #ffcf3f;
    font-size: 26px;
}

.testimonial-card .name {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 10px;
    color: var(--the-white);
    font-family: "Century Gothic";
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px;
}

.testimonial-card p {
    overflow: hidden;
    text-wrap: auto;
    color: var(--the-white);
    font-family: "Century Gothic";
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 19.984px;
}

.testimony-header {
    display: flex;
    align-items: center;
    gap: 20px;
}

.testimonials-marquee {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: scroll-right 40s linear infinite;
}



.testimonial-card .profile-img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 10px;
}

@keyframes scroll-right {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0%);
  }
}

.section-title h6 {
    text-transform: uppercase;
    color: #888;
    font-size: 16px;
}

.section-title h2 {
    font-size: 32px;
    margin: 10px 0 30px;
}

.marquee-row {
    /* overflow: hidden; */
    white-space: nowrap;
    position: relative;
}

.marquee-track {
    display: inline-flex;
    animation: marquee 20s linear infinite;
}

.marquee-row.reverse .marquee-track {
    animation-direction: reverse;
}


.testimonial-card img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
}

@keyframes marquee {
    0% { transform: translateX(100%); }
    100% { transform: translateX(0%); }
}


/* Get Quote */

section.get-quote {
    padding: 60px 0;
    position: relative;
    height: 600px;
    margin-bottom: 0;
}

.quote-text {
    position: relative;
    z-index: 9;
}
section.get-quote::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('../css/img/get-quote.png');
    background-repeat: no-repeat;
    background-size: cover;
    top: 0;
}


/* Cards List Style */

.list .card-wrapper {
    display: flex;
    gap: 20px;
    flex-direction: column;
}

.list .option-card {
    flex-direction: row;
    justify-content: space-between;
    flex: unset;
    width: 100%;
    padding: 30px 30px 30px 60px;
}

.list .card-icon i {
    background: rgba(186, 208, 37, 0.29);
    padding: 40px;
    border-radius: 20px;
    flex: unset;
}

.list .card-text {
    min-height: unset;
}

.list .card-icon {
    padding-bottom: 30px;
}

/* Partners */

section#partners {
    background: var(--primary);
    padding: 60px 0;
}

section#partners h5 {
    font-size: 20px;
    text-align: center;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 40px;
}

.partner-flex {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.partner img {
    width: 120px;
    height: 90px;
    object-fit: contain;
    margin: 0 20px;
}

/* Contact Us */

/* div#page-content {
    margin: 40px auto;
} */

/* Mobile Responsiveness */

@media(max-width: 767px){
    .hero-flex {
flex-wrap: wrap;
    }

    .content-wrapper, .hero-image {
    flex-basis: 100%;
}

.content-wrapper {
    padding-top: 200px;
}

.hero-flex {
    top: 0;
}

.contact-us-btn a {
    display: none;
}

.menu-search-wrap {
    gap: unset;
    flex-direction: row-reverse;
}

.main-logo {
    padding: 10px 30px !important;
}

.the-menu {
    padding: 5px 15px;
}

div#topHeader.scrolled {
 top: 0;
}

.scrolled .main-logo {
    border-radius: 0;
}

.hero-image {
    display: none;
}

.hero-btns {
    flex-wrap: wrap;
}

.hero-icons-wrap {
    flex-wrap: wrap;
}

.hero-box {
    display: flex;
    gap: 10%;
 justify-content: center;
    flex-wrap: wrap;
}

.item-flex {
    flex-basis: 100%;
    justify-content: center;
}
.item-flex svg {
    display: none;
}

.hero-btn a {
    margin-top: 20px;
}

.abt-title {
    margin-top: 40px;
    text-align: center;
}

.card-wrapper {
    flex-wrap: wrap;
}

.callback-container {
    display: flex;
    flex-wrap: wrap !important;
    justify-content: center;
}

.callback-form {
    z-index: 9;
}
.footer-menu {
    grid-template-columns: unset;
}

.banner-section .slider-caption h2 {
    width: 100%;
    font-size: 30px;
    line-height: 1.2;
}

.banner-section .slider-caption {
    width: 90%;
}

.banner-section .content-wrapper {
    padding-top: 30px;
}
.banner-section #homeSlider .item::after {
    display: none;
}

.list .option-card {
    flex-direction: column-reverse;
}

.details-flex {
    flex-wrap: wrap;
}

.address .details {
    flex-basis: 100%;
    flex-wrap: wrap;
}

}

/* Claim Forms */

.btn a, .wp-block-button a {
    background: var(--primary);
    color: var(--the-white);
    padding: 10px 15px;
    text-transform: capitalize;
    display: inline-block;
    transition: 500ms ease-in-out;
    border-radius: 50px;
    width: 100%;
}

#claims .btn {
    padding: 0;
}


#claims .card-title {
margin-top: 20px;
}

.btn.download-form a {
    background: transparent;
    border: 1px solid var(--primary);
    color: var(--primary);
    margin-top: 20px;
}


#claims .card-wrapper {
    display: grid;
    gap: 5%;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

@media (max-width: 767px) {

    .bi-buttoms {
    display: flex;
    flex-direction: column;    
    gap: 60px;
    align-items: end;
    position: absolute;
    z-index: 9;
    right: -394px;
    }

    .callback-section.business-insurance::after {
    background-image: none;
    }

    .callback-form {
    flex: 1 1 50%;
    max-width: 550px;
    position: relative;
    }

    .callback-section.business-insurance .callback-form {
    padding-left:90px
    }
}

@media (max-width: 1045px){
    .callback-section h2 {
    max-width: 300px;
    }

    .callback-section p {
        max-width: 260px;
    }

    .callback-section.business-insurance::after {
    bottom: -94px;
    width: 400px;
    height: 90%;
    }

    .bi-buttoms {
    right: -360px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: static;
    gap: 20px;
    padding-top: 30px;
    max-width: none;
    }
    
    .bi-buttoms a {
    white-space: nowrap; 
    }
        #mega-menu-wrap-primary 
    #mega-menu-primary > 
    li.mega-menu-megamenu > 
    ul.mega-sub-menu li.mega-menu-column-standard > 
    a.mega-menu-link, 
    #mega-menu-wrap-primary #mega-menu-primary > 
    li.mega-menu-megamenu > 
    ul.mega-sub-menu li.mega-menu-column 
    > ul.mega-sub-menu > li.mega-menu-item 
    > a.mega-menu-link {
    font-size: 14px;
    }

    #mega-menu-wrap-primary #mega-menu-primary > 
    li.mega-menu-megamenu > ul.mega-sub-menu 
    li.mega-menu-column-standard h4.mega-block-title, 
    #mega-menu-wrap-primary #mega-menu-primary > 
    li.mega-menu-megamenu > ul.mega-sub-menu 
    li.mega-menu-column > ul.mega-sub-menu > 
    li.mega-menu-item h4.mega-block-title {
        font-size: 14px;
    }

    p, a, li {
    font-size: 14px;
    }

    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
    margin-top: 15px;
    }
}


/* Tips */

.tip-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 9998;
    display: none;
}

.tip-popup {
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff;
    padding: 20px;
    border: 2px solid #ccc;
    box-shadow: 0 0 15px rgba(0,0,0,0.3);
    z-index: 9999;
    max-width: 500px;
    width: 90%;
    border-radius: 8px;
    animation: fadeIn 0.4s ease-out;
}

.tip-popup-content {
    position: relative;
}

.tip-close {
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 22px;
    cursor: pointer;
    color: #666;
    transition: color 0.2s;
    z-index: 999;
}

.tip-close:hover {
    color: #000;
}
.tip-popup-content h3 {
	color: var(--the-black);
	font-weight: 500;
}

.tip-text {
	margin-top: 10px;
	color: var(--the-black);
}


@keyframes fadeIn {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}