* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }


html {
    font-size: 112.5%;/*18px*/
    scroll-behavior: smooth;
}

body {
  background: #FBFBFB;
  font-family: 'Nunito', sans-serif;
  font-weight: 500;
  line-height: 160%;
  color: #171715;
}

/* unvisited link */
a:link {
  color: #AF395F;
  text-decoration: none;
}

/* mouse over link */
a:hover {
  color: #AF395F;
  text-decoration: underline;
}

/* selected link */
a:active {
  color: #D93B49;
}

/* visited link */
a:visited {
  color: #AF395F;
}


p {margin-bottom: 1rem;}


h1, h2, h3, h4 {
  font-family: 'Oswald', sans-serif;
}


h5 {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  line-height: 1.3;
}


.h1, h1 {
font-size: 4.2rem;
line-height: 4.4rem;
}


.h2, h2 {
font-size: 3.1rem;
}


.h3, h3 {
font-size: 2.3rem;
}


.h4, h4 {
font-size: 1.8rem;
}


.h5, h5 {
font-size: 1.3rem;
}


ol, ul {
padding-left: 1rem;
}


.card li {
    line-height: 1.7rem;
    font-weight: 700;
}



input:focus {
    border-color: #f4c4c8!important;
    border-width: 1px;
    border-style: solid;
    box-shadow: 0 0 10px #f4c4c8!important;
  }


  textarea:focus {
    border-color: #f4c4c8!important;
    border-width: 1px;
    border-style: solid;
    box-shadow: 0 0 10px #f4c4c8!important;
  }


.py-5 {
    padding-top: 2rem!important;
    padding-bottom: 2rem!important;
}


.pt-5 {
    padding-top: 2rem!important;
}


.pb-5 {
    padding-bottom: 2rem!important;
}


.pt-6 {
    padding-top: 3rem!important;
}


.small {
    font-size: 0.8rem;
    line-height: 1.3rem;
    font-weight: 700;
}


.strong {
    font-weight: 700;
}



.tracking-wide {
    letter-spacing: 0.05rem;
}


.badge {
    --bs-badge-font-weight: 500;
}



.btn-primary {
--bs-btn-color: #fff;
--bs-btn-bg: #AF395F;
--bs-btn-border-color: transparent;
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #761d3a;
--bs-btn-hover-border-color: transparent;
--bs-btn-focus-shadow-rgb: transparent;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #761d3a;
--bs-btn-active-border-color: transparent;
--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: #BBBBBB;
 box-shadow: 0px 1.43897px 2.21381px 0px rgba(33, 31, 36, 0.02), 0px 3.45805px 5.32008px 0px rgba(33, 31, 36, 0.03), 0px 6.51121px 10.01724px 0px rgba(33, 31, 36, 0.04), 0px 11.61488px 17.86905px 0px rgba(33, 31, 36, 0.05), 0px 21.72436px 33.42209px 0px rgba(33, 31, 36, 0.06), 0px 52px 80px 0px rgba(33, 31, 36, 0.08);
;
 border: none;
 font-size: 0.78rem;
 font-weight: 700;
}


.btn-primary:hover {
  background-color: #761d3a;
}

.btn-primary:active {
  background-color: #761d3a;
}


.btn-secondary {
--bs-btn-color: black;
--bs-btn-bg: transparent;
--bs-btn-border-color: #BC0000;
--bs-btn-hover-color: #BC0000;
--bs-btn-hover-bg: transparent;
--bs-btn-hover-border-color: #BC0000;
--bs-btn-focus-shadow-rgb: transparent;
--bs-btn-active-color: #BC0000;
--bs-btn-active-bg: transparent;
--bs-btn-active-border-color: #BC0000;
--bs-btn-active-shadow: transparent;
--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: #BBBBBB;
  border: 1px solid #BC0000;
 font-size: 1rem;
 font-weight: 600;
}


.btn.btn-primary.btn-lg {
  color: white;
}


.btn.btn-primary.btn-lg:hover {
    text-decoration: none;
}


.btn-lg-custom {
    font-size: 1rem;
    font-weight: 700;
}


.secondary {
    color: #AF395F;
}


#navbar-logo {
width: 10vw;
height: auto;
}


#hero {
  margin-top: 5%;
}


#hero div {
  z-index: 10;
}


#hero img {
  z-index: 9;
}


#hero #title {
  z-index: 11;
}


#hero-img img {
  right: 0%;
}


#title {
  padding-top: 10%;
  padding-bottom: 10%;
}


#title-pricing {
  padding-top: 15%;
  padding-bottom: 8%;
  padding-left: 10%;
}


#ui {
overflow: hidden!important;
}


#container {
  z-index: 13;
}


.animated {
  position: relative;
  z-index: 12;
  width: 100vw;
  overflow: hidden; /* Hide overflowing content */
}


.animated::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #fff; /* Set the background color */
  z-index: -1; /* Place it behind the .animated content */
}


.animated .wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


.wrapper div {
  position: absolute;
  filter: blur(60px);
  opacity: 0.8;
}

.animated .one {
  border-radius: 100%;
  width: 40vw;
  height: 50vh;
  background-color: #b6acfc;
  left: 20%;
  top: -40%;
  z-index: 3;
  animation: fly1 5s linear infinite;
  transform: rotate(0) translate(10%) rotate(0);
}

.animated .two {
  width: 60vw;
  height: 60vh;
  background-color: #b3d3fc;
  bottom: -20%;
  left: -15%;
  z-index: 2;
  animation: fly2 10s linear infinite;
  transform: rotate(0) translate(30%) rotate(0);
}

.animated .three {
  border-radius: 100%;
  width: 100vw;
  height: 90vh;
  bottom: -30%;
  right: -30%;
  background-color: #ebd2fc;
  z-index: 1;
  animation: fly3 10s linear infinite;
  transform: rotate(0) translate(15%) rotate(0);
}


@keyframes fly1 {
  100% {
    transform: rotate(1turn) translate(10%) rotate(-1turn);
  }
}
@keyframes fly2 {
  100% {
    transform: rotate(1turn) translate(30%) rotate(-1turn);
  }
}
@keyframes fly3 {
  100% {
    transform: rotate(-1turn) translate(15%) rotate(1turn);
  }
}


#about {
  top: -10%;
  left: 0;
  width: 100%;
}



.form-control {
    font-size: 1rem;
}

.nav-link {
    font-size: 1rem;
    color: black;
}


.scroll-down {
    bottom: -25%;
    right: 35%;
}


nav i {
    font-size: 2rem;
}


nav img {
    width: 230px;
    height: 96px;
}


.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #171715;
    background-color: transparent;
}

.nav a {
    color: black;
    font-size: 0.78rem;
}

.nav a:hover {
    color: black;
    text-decoration: none;
}

.nav a:active {
    color: black;
}

.nav a:visited {
    color: black;
}


.nav button {
    font-size: 0.78rem;
    height: 48px;
}


.dropdown-menu {
    width: 20vw;
}


.nav-item:hover .dropdown-menu {
    display: block;
}



.bg-secondary {
        background-color: #E8F1FF!important;
    }


.bg-accent {
        background-color: #ac0004;
    }


.bg-light {
        background-color: #FCFAFA!important;
        color: #211E1E!important;
    }


.bg-dark {
        background-color: #0E103D!important;
        color: #FDF8F8!important;
    }


.bg-dark a {
        color: #FDF8F8!important;
    }


.bg-dark button {
        background-color: #FFFEFC!important;
        color: #171715!important;
    }



.radius-xs {
        border-radius: 4px;
    }



.radius-s {
        border-radius: 8px;
    }


.radius-m {
        border-radius: 16px;
    }


.radius-l {
        border-radius: 32px;
    }


.radius-xl {
        border-radius: 56px;
    }


.border-100 {
        border: 1px solid white;
    }


.input-custom {
        height: 48px!important;
    }



input::placeholder {
    color: #999!important;
    font-family: 'Nunito', sans-serif!important;
    font-weight: 300!important;
    line-height: 1.75!important;
}


textarea::placeholder {
    color: #999!important;
    font-family: 'Nunito', sans-serif!important;
    font-weight: 300!important;
    line-height: 1.75!important;
}


.elevation-s {
        box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.05);
    }


.elevation-m {
        box-shadow:
          1.2px 1px 2.2px rgba(0, 0, 0, 0.008),
          2.9px 2.5px 5.3px rgba(0, 0, 0, 0.012),
          5.4px 4.6px 10px rgba(0, 0, 0, 0.015),
          9.6px 8.3px 17.9px rgba(0, 0, 0, 0.018),
          18px 15.5px 33.4px rgba(0, 0, 0, 0.022),
          43px 37px 80px rgba(0, 0, 0, 0.03)
        ;
        }


.elevation-l {
        box-shadow:
          2px 2px 2.2px rgba(0, 0, 0, 0.02),
          4.9px 4.9px 5.3px rgba(0, 0, 0, 0.028),
          9.3px 9.3px 10px rgba(0, 0, 0, 0.035),
          16.5px 16.5px 17.9px rgba(0, 0, 0, 0.042),
          30.9px 30.9px 33.4px rgba(0, 0, 0, 0.05),
          74px 74px 80px rgba(0, 0, 0, 0.07)
        ;
    }


.elevation-xl {
        box-shadow: 2px 4px 30px rgba(0, 0, 0, 0.05);
    }



.dropdown-menu a {
    color: #171715!important;
}


.dropdown-menu a:hover {
    color: #BC0000!important;
    background-color: transparent;
}


.dropdown-menu a:active {
    background-color: transparent!important;
}


.dropdown-item a:link a:visited a:hover a:active {
    color: #171715!important;
}


.dropdown-item a:hover {
    background-color: #ededed!important;
}


.dropdown-item a:active {
    background-color: #dedede!important;
}


.dropdown-item.active, .dropdown-item:active {
color: #171715!important;
text-decoration: none;
background-color: #dedede!important;
}


.dropdown-menu {
--bs-dropdown-min-width: 8rem;
}


.navbar {
--bs-navbar-toggler-border-color: none;
--bs-navbar-toggler-border-radius: none;
--bs-navbar-toggler-icon-bg: none;
}


.navbar-toggler:focus {
    box-shadow: none;
}


.hamburger {
width: 32px;
height: 32px;
}



footer .nav-link {
    font-size: 0.8rem;
    line-height: 1.3rem;
}


footer li {
    font-size: 0.8rem;
    line-height: 1.3rem;
}


footer p {
    font-size: 0.8rem;
    line-height: 1.3rem;
}



.footer-dark {
  color: white;
  background-color: #211E1E;

}


.footer-dark .bg-accent {
  background-color: white;
  color: black;
}


.footer-dark a {
  color: white!important;
}


.footer-dark li {
  color: white!important;
}


.footer-dark .lnkd-dark a {
  color: black!important;
}



.big {
        font-family: 'Nunito Sans', sans-serif;
        font-size: 1em;
        line-height: 1.3;
        font-weight: 500;
    }


#navbar-example2 {
    z-index: 100!important;
    }


.navbar-expand-transition {
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}


.navbar-expand-transition.expanded {
    background-color: white!important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}


.navbar-expand-transition.expanded .navbar-toggler {
    color: white; /* Change to the desired color */
}


.navbar-expand-transition.expanded .navbar-toggler {
    color: var(--bs-navbar-color);
}



.navbar-expand-transition.expanded .nav a {
    color: var(--bs-navbar-color);
}



#cookiePopup {
  background-color: white;
  border-radius: 12px;
  position: fixed;
  width: 70vw;
  max-width: 42.85em;
  text-align: justify;
  line-height: 1.8em;
  transition: all 0.5s ease-in;
  z-index: 20;
}



#cookiePopup button {
  display: block;
  position: relative;
  min-width: 9em;
  font-size: 0.8em;
}


.hide {
  visibility: hidden;
  bottom: 0;
  right: 2em;
}


.show {
  visibility: visible;
  bottom: 2em;
  right: 2em;
}

.btn-carousel-prev {
    background-image: url("../img/btn-prev.svg");
}

.btn-carousel-next {
    background-image: url("../img/btn-next.svg");
}

.btn-carousel-prev .btn-carousel-next {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 100% 100%;
}

.carousel-control-custom-next, .carousel-control-custom-prev {
    opacity: 1;
}

.carousel-control-next-icon, .carousel-control-prev-icon {
    width: 4rem;
    height: 4rem;
}


.carousel-dark .carousel-control-next-icon, .carousel-dark .carousel-control-prev-icon {
filter: none;
}



.bg-blur-01 {
    background-image: url("../img/bg-blur-01.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


.bg-blur-sm {
    background-image: url("../img/bg-blur-sm.png");
    width: 572px;
    height: 868px;
    right: -203px;
    bottom: -236px;
    background-repeat: no-repeat;
    background-clip: content-box;
    position: absolute;
    z-index: -10;
    background-size: cover;
}


#accordion .accordion-button {
  font-size: 1.25rem;
  font-weight: 700;
}


.accordion {
    --bs-accordion-active-bg: white;
    --bs-accordion-border-radius: 16px;
    }


.accordion-item {
    border-radius: 16px!important;
    }


.accordion-button:not(.collapsed) {
    border-top-left-radius: 16px!important;
    border-top-right-radius: 16px!important;
    box-shadow: none;
    padding: 3rem 3rem 1rem;
    color: #171715;
    }


.accordion-button {
    border-radius: 16px!important;
    padding: 3rem;
    }


.accordion-body {
    padding-right: 3rem!important;
    padding-left: 3rem!important;
    }


.iceberg-01 {
    position: absolute;
    content: "";
    background-image: url("../img/iceberg-01.svg");
    width: 30%;
    height: 30%;
    background-size: contain;
    background-position: left bottom;
    background-repeat: no-repeat;
    bottom: 0px;
    right: 0px;
    z-index: 10;
    }


.iceberg-02 {
    position: absolute;
    content: "";
    background-image: url("../img/iceberg-02.svg");
    width: 30%;
    height: 30%;
    background-size: contain;
    background-position: left bottom;
    background-repeat: no-repeat;
    bottom: 0px;
    right: 0px;
    z-index: 10;
    }


.iceberg-03 {
    position: absolute;
    content: "";
    background-image: url("../img/iceberg-03.svg");
    width: 46%;
    height: 46%;
    background-size: contain;
    background-position: left bottom;
    background-repeat: no-repeat;
    bottom: 0px;
    left: 0px;
    z-index: 10;
    }


.iceberg-04 {
    position: absolute;
    content: "";
    background-image: url("../img/iceberg-04.svg");
    width: 25%;
    height: 25%;
    background-size: contain;
    background-position: left bottom;
    background-repeat: no-repeat;
    bottom: 0px;
    right: 0px;
    z-index: 10;
    }


.iceberg-05 {
    position: absolute;
    content: "";
    background-image: url("../img/iceberg-05.svg");
    width: 30%;
    height: 30%;
    background-size: contain;
    background-position: left bottom;
    background-repeat: no-repeat;
    bottom: 0px;
    right: 0px;
    z-index: 10;
    }



/* contorno dell'iceberg
.highlight {
background-color: #CADEF9;
width: 294px;
height: 240px;
clip-path: polygon(293.18px 198.27px, 252.04px 82.65px, 131.03px 0.89px, 94.52px 81.51px, 48.58px 94.45px, 1.78px 147.57px, 102.11px 239.89px, 147.46px 230.01px, 218.57px 214.52px, 272.02px 202.88px, 293.18px 198.27px);
}
*/



#parent1 {
margin-right: 24px;
}


.conditions {
    max-width: 200px;
}


.pricing {
    max-width: 500px;
}


.pricing .iceberg-01 {
    width: 40%;
    height: 40%;
}

.pricing .iceberg-05 {
    width: 40%;
    height: 40%;
    bottom: 0px;
    right: 5%;
}



.card .btn-primary {
 font-size: 0.9rem;
 font-weight: 700;
}


.bronze {
 background: #FFF8F1!important;
}


.silver {
 background: #F7F6F6!important;
}


.gold {
 background: #FFFBEF!important;
}


.bronze p {
    background: rgb(205,127,50);
    background: linear-gradient(352deg, rgba(205,127,50,1) 0%, rgba(232,158,85,1) 35%, rgba(255,206,158,1) 100%);
    color: #633E1A;
}


.silver p {
    background: rgb(167,165,165);
    background: linear-gradient(0deg, rgba(167,165,165,1) 0%, rgba(192,192,192,1) 35%, rgba(236,234,234,1) 100%);
    color: #565656;
}


.gold p {
    background: rgb(230,175,9);
    background: linear-gradient(0deg, rgba(230,175,9,1) 0%, rgba(255,192,0,1) 35%, rgba(255,236,177,1) 100%);
    color: #70570D;
}


.circular-div {
  width: 100px;
  height: 100px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 3px solid #AF395F;
  font-family: 'Oswald', sans-serif;
  font-size: 1.75em;
}


#contact {
    background-image: url("../img/bg-blur-02.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto;
    z-index: 0;
}



.overlay-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 1056px;
  height: 729px;
}


.overlay-svg {
  position: absolute;
  top: 0;
  left: 0;
}


.slider {
  -webkit-appearance: none;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}


.slider:hover {
  opacity: 1;
}


input.slider:focus {
  border-color: transparent!important;
  border-width: 0;
  border-style: none;
  box-shadow: none!important;
}



.slider::-webkit-slider-runnable-track {
    background: #edc5d3;
    overflow: visible;
    border-radius: 25px;
    height: 4px;
  }


.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #9e254e;
  cursor: pointer;
  position: relative;
  top: -5px;
}


.slider::-webkit-slider-thumb:active {
  background: #6d1b3b;
}



.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #9e254e;
  cursor: pointer;
  position: relative;
  top: -5px;
}


.form-check-input:checked {
  background-color: #AF395F;
  border-color: #AF395F;
}


.timeline {
  position: relative;
  padding: 20px 0;
}

.timeline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  background-color: #E4E4E4;
}

.dot {
  position: absolute;
  left: 50%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #5b59cf;
  transform: translateX(-50%);
}

.event {
  position: absolute;
  left: calc(50% + 30px);
  width: 300px;
  padding: 20px;
  background-color: #EAEFFF;
  border-radius: 8px;
}

.bg-event{
  background-color: #EAEFFF;
}


.table-striped>tbody>tr:nth-of-type(odd)>* {
--bs-table-bg-type: #f8f9fa;
}


.table-highlight {
--bs-table-bg: #dbe4ff;
}


.total {
background-color: transparent!important;
--bs-table-bg-type: transparent!important;
}



.borderless-bottom {
border-width: 0px!important;
}


table {
font-size: 0.9rem;
}


#dot2 {
top: 200px;
}

#event2 {
top: 180px;
}

#dot3 {
top: 600px;
}

#event3 {
top: 580px;
}

#dot4 {
top: 1200px;
}

#event4 {
top: 1180px;
}

#dot5 {
top: 800px;
}

#event5 {
top: 780px;
}


#hero-pricing {
background-image: url('../img/hero_pricing.svg');
background-size: cover;
background-position: center;
}



.carousel-control-prev {
    height: 70%;
}


.carousel-control-next {
    height: 70%;
}



/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}


/* media queries */

/* up to 992px*/
@media only screen and (max-width: 992px) {

        html {
        font-size: 100%;/*16px*/
        }


        .h1, h1 {
        font-size: 2.8rem;
        line-height: 3.2rem;
        }


        .h2, h2 {
        font-size: 2.1rem;
        }


        .h3, h3 {
        font-size: 1.7rem;
        }


        .h4, h4 {
        font-size: 1.4rem;
        }


        .h5, h5 {
        font-size: 1.2rem;
        }


        .nav a {
            color: black;
            font-size: 1rem;
        }

    
        nav .border-start {
        border-width: 0px!important;
        border-style: none!important;
        border-color: transparent!important;
        }


        .image-container {
        display: flex!important;
        justify-content: center!important;
        position: relative;
        }

        .svg-bg {
        width: 100%;
        height: auto;
        }


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

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


        #accordion .accordion-button {
        font-size: 1.2rem;
        }


        .accordion-button:not(.collapsed) {
        padding: 1rem 1rem 0.5rem;
        }


        .accordion-button {
        padding: 1rem;
        }

        .accordion-body {
        padding-right: 1rem!important;
        padding-left: 1rem!important;
        }


        #hero-pricing {
        background-image: url('../img/hero_pricing.svg');
        background-size: cover;
        background-position: center;
        }


        #hero-img {
        width: 100%;
        }

}



/* mobile only */
@media only screen and (max-width: 576px) {


        .h1, h1 {
        font-size: 2.5rem;
        line-height: 2.8rem;
        }


        .h2, h2 {
        font-size: 2.1rem;
        }


        .h3, h3 {
        font-size: 1.7rem;
        }


        .h4, h4 {
        font-size: 1.4rem;
        }


        .h5, h5 {
        font-size: 1.2rem;
        }


        #title {
        padding-top: 10%;
        padding-bottom: 40%;
        }


        #title h5 {
        width: 50%!important;
        }


        #hero-img img {
        top: 43vw;
        right: -66%;
        width: 126vw;
        }


        #about {
        top: -3%;
        border-bottom: 1px solid lightgrey;
        padding-bottom: 32px;
        }


        .elevation-menu {
        box-shadow:
          1.2px 1px 2.2px rgba(0, 0, 0, 0.008),
          2.9px 2.5px 5.3px rgba(0, 0, 0, 0.012),
          5.4px 4.6px 10px rgba(0, 0, 0, 0.015),
          9.6px 8.3px 17.9px rgba(0, 0, 0, 0.018),
          18px 15.5px 33.4px rgba(0, 0, 0, 0.022),
          43px 37px 80px rgba(0, 0, 0, 0.03);
        }


        .dropdown-menu {
        width: 100%;
        }


        .carousel-control-prev {
        position: absolute;
        left: 30%;
        bottom: 5%;
        display: flex;
        align-items: flex-end;
        }


       .carousel-control-next {
        position: absolute;
        left: 50%;
        bottom: 5%;
        display: flex;
        align-items: flex-end;
        }


        .carousel-control-prev {
        height: 95%;
        }


        .carousel-control-next {
        height: 95%;
        }


        .dropdown-menu {
        width: 100%;
        }


        .carousel-control-prev, .carousel-control-next {
        width: 64px!important;
        }


        #intro {
        padding-right: 0px;
        }


        .btn-tertiary {
        font-size: 0.7rem;
        font-weight: 600;
        }


        .custom-lottie-container {
        width: 180px!important;
        }


        #cookiePopup {
        width: 100%;
        background-color: white;
        border-radius: 0;
        color: black;
        }
          

        .hide {
        bottom: 2em;
        right: 0;
        }
          

        .show {
        right: 0;
        bottom: 0;
        }


        .response {
        position: fixed;
        top: 16px;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        z-index: 20;
        }


        .circular-div {
        width: 80px;
        height: 80px;
        }


        #ui {
        overflow: hidden!important;
        }


        .illustration {
        max-width: 80vw;
        }


        .timeline::before {
        content: '';
        position: absolute;
        top: 0;
        left: 10%;
        width: 2px;
        height: 100%;
        background-color: #ccc;
        }


        .dot {
        position: absolute;
        left: 10%;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #007bff;
        transform: translateX(-50%);
        }


        .event {
        position: absolute;
        left: calc(10% + 30px);
        width: 300px;
        padding: 20px;
        background-color: #EAEFFF;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }


        #dot2 {
        top: 150px;
        }


        #event2 {
        top: 130px;
        }


        #dot3 {
        top: 280px;
        }


        #event3 {
        top: 260px;
        }


        #dot4 {
        top: 410px;
        }


        #event4 {
        top: 390px;
        }


        #dot5 {
        top: 410px;
        }


        #event5 {
        top: 390px;
        }


        #title-pricing {
        padding-top: 20%;
        padding-bottom: 20%;
        padding-left: 5%;
        }


        #navbar-logo {
        width: 35vw;
        height: auto;
        }


        #icebergs-calculator {
        left: 13%;
        bottom: 13%;
        }


        .image-container {
          display: block!important;
        }


        .image-container img {
          width: 150%;
        }


        .image-container .overlay-image {
          left: 75%;
        }


        .image-container .overlay-svg {
          left: 75%;
        }


        #cropped {
          height: 60vw;
        }

}



@media only screen and (min-width: 576px) and (max-width: 768px) {


   #navbar-logo {
    width: 25vw;
    height: auto;
    } 

    #title {
    padding-top: 10%;
    padding-bottom: 20%;
    }


    #hero-img img {
    top: -2vw;
    right: -38%;
    width: 85%;
    }


    #ui {
    overflow: hidden!important;
    }
    

    #about {
    top: -5%;
    }


    .timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    width: 2px;
    height: 100%;
    background-color: #ccc;
    }

    .dot {
    position: absolute;
    left: 10%;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #007bff;
    transform: translateX(-50%);
    }

    .event {
    position: absolute;
    left: calc(10% + 30px);
    width: 300px;
    padding: 20px;
    background-color: #EAEFFF;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }


    #dot2 {
    top: 150px;
    }

    #event2 {
    top: 130px;
    }

    #dot3 {
    top: 280px;
    }

    #event3 {
    top: 260px;
    }

    #dot4 {
    top: 410px;
    }

    #event4 {
    top: 390px;
    }

    #dot5 {
    top: 410px;
    }

    #event5 {
    top: 390px;
    }


    .features-slide {
    z-index: 0;
    overflow: hidden;
    max-width: 500px;
    }


    #icebergs-calculator {
    left: 25%;
    bottom: 20%;
    }


    #cropped {
    height: 40vw;
    }

}




/* starting from 992px*/
@media only screen and (min-width: 992px) {

    nav .border-bottom {
    border-width: 0px!important;
    border-style: none!important;
    border-color: transparent!important;
    }

    #intro {
    padding-right: 15%;
    }
}



@media only screen and (min-width: 768px) and (max-width: 992px) {


    #navbar-logo {
    width: 20vw;
    height: auto;
    }


    #hero-img img {
    top: -5vw;
    right: -38%;
    width: 85%;
    }


    #ui {
    overflow: hidden!important;
    }


    #about {
    top: -2%;
    left: 0;
    width: 100%;
    }


    #icebergs-calculator {
    left: 25%;
    bottom: 24%;
    }

}




/* large devices */
@media only screen and (min-width: 992px) and (max-width: 1200px) {


    #navbar-logo {
    width: 15vw;
    height: auto;
    }

    #hero-img img {
    top: 0%;
    right: -10%;
    width: 140%;
    }


    .w-lg-50 {
    width: 50%;
    }


    #imageContainer img {
    width: 180%;
    height: auto;
    }


    .features-slide {
    z-index: 0;
    overflow: hidden;
    max-width: 800px!important;
    }


    #icebergs-calculator {
    left: 25%;
    bottom: 48%;
    }

}



/* x-large devices */
@media only screen and (min-width: 1200px) and (max-width: 1400px) {

    
    #navbar-logo {
    width: 10vw;
    height: auto;
    }


    #hero-img img {
    top: 0%;
    right: -5%;
    width: 130%;
    }

    .w-lg-50 {
    width: 50%;
    }

    .custom-lottie-container {
    width: 480px!important;
    }

    #imageContainer img {
    width: 140%;
    height: auto;
    }


    .features-slide {
    z-index: 0;
    overflow: hidden;
    max-width: 1000px;
    }


    #icebergs-calculator {
    left: 25%;
    bottom: 40%;
    }


    }


/* xx-large devices */
@media only screen and (min-width: 1400px) {

    #hero-img img {
    top: -5%;
    right: -5%;
    width: 110%;
    }

    .w-lg-50 {
    width: 50%;
    }


    #imageContainer img {
    width: 120%;
    height: auto;
    }


    .features-slide {
    z-index: 0;
    overflow: hidden;
    max-width: 1000px;
    }


    .gap-4 {
    gap: 2.3rem!important;
    }


    #icebergs-calculator {
    left: 25%;
    bottom: 30%;
    }

}


@media only screen and (min-width: 2048px) {

        
    #hero-img img {
     right: 0%;
     top: -5%;
    }

    .hero img {
    padding-left: 20%!important;
    }


    #hero-img img {
    top: -10%;
    right: 10%;
    width: 45vw;
    }


    #title-pricing {
    padding-top: 8%;
    padding-bottom: 10%;
    padding-left: 23%;
    }


    #imageContainer img {
    width: 90%;
    height: auto;
    }


    #container {
    max-width: 1520px;
    }


    .features-slide {
    z-index: 0;
    overflow: hidden;
    max-width: 1000px;
    }


    .gap-4 {
    gap: 2.5rem!important;
    }


    #icebergs-calculator {
    left: 25%;
    bottom: 34%;
    }

}