:root {
 --crimson: #400913;
 --grass: #395f46;
 --milk: #d5d9c7;
 --dark: #0d0201;
 --scarlet: #730909;
}
@import url("https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Duru+Sans&display=swap");

body {
 font-family: "Duru Sans", sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
 font-family: "Crimson Text", serif !important;
}

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

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

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

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

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

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

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

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

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

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

.svg-image {
 width: 30%;
}

#svg-row {
 max-width: 1000px;
}

@font-face {
 font-family: "Ronaile";
 src: url("Ronaile-Regular.woff2") format("woff2"), url("Ronaile-Regular.woff") format("woff");
 font-weight: normal;
 font-style: normal;
 font-display: swap;
}

.logo {
 font-family: "Ronaile", sans-serif;
 transform: scaleX(1.2);
}
nav a,
.navbar-overflow a,
footer a {
 transition: ease-in-out 0.5s;
}
nav a:hover,
footer a:hover {
 color: var(--scarlet);
}
.navbar-overflow a:hover {
 color: var(--crimson);
}
.navbar-overflow {
 background-color: rgba(0, 0, 0, 0.856);
 width: 100vw;
 height: 100vh;
 position: fixed;
 display: none;
}

.hero {
 background-color: #ced3be;
}

.card {
 background-color: #bec4ad;
}

.card-image {
 background-size: cover;
 background-position: center;
 border-radius: 100%;
 width: 7rem;
 height: 7rem;
}
#mobile-text {
 display: none;
}
ol li {
 transition: 0.5s;
}
ol li:hover {
 cursor: pointer;
 color: var(--crimson);
 transition: 0.5s;
}

@media screen and (max-width: 1023px) {
 #hero-block {
  display: block;
 }
 #hero-block .w-2\/6,
 #hero-block .w-4\/6 {
  width: 100%;
 }
}

@media screen and (max-width: 535px) {
 #top1,
 #top2 {
  width: 48%;
  margin: auto;
 }
 #top3 {
  width: 100%;
 }
 .w-4\/6.ps-auto.lg\:ps-2.flex.gap-2 {
  flex-wrap: wrap;
 }
 #desktop-text {
  display: none;
 }
 #mobile-text {
  display: block;
 }

 .svg-image {
  width: 70%;
 }
 #svg-row {
  flex-direction: column;
  justify-content: center;
  align-items: center;
 }

 .bg-milk.p-6.rounded-lg.shadow-lg.flex.items-center.justify-between {
  flex-direction: column !important;
  padding: 0;
  margin-left: 10px;
  margin-right: 10px;
  padding-bottom: 20px;
 }

 .cardPart {
  width: 100% !important;
 }
 .bg-milk.p-6.rounded-lg.shadow-lg.flex.items-center.justify-between img {
  width: 100%;
  height: 12rem;
  border-radius: 0.5rem 0.5rem 0 0;
 }
}
@media screen and (max-width: 359px) {
 #top1,
 #top2 {
  height: 21rem;
 }
 .card-image {
  width: 5rem;
  height: 5rem;
 }
}

@media screen and (max-width: 1535px) {
    .flex.pt-1.w-full.gap-2.border-b.border-neutral-500 {
        flex-direction: column;
    }
}
.clearfix::after{content:"";display:table;clear:both}