@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&family=Iosevka+Charon:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&family=Libre+Franklin:ital,wght@0,100..900;1,100..900&display=swap');

:root{
  --color-1: #fd9b00;
  --color-2: #157f33;
  --color-3: #888;
  --color-4: #a5b9ad;
  --color-5: #558e4c;
}


body{margin: 0; padding: 0; font-size: clamp(0.7rem, 1vw, 2rem); font-family: "Libre Franklin", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal;}

h1, h2, h3, h4, h5, h6{
  font-family: "Iosevka Charon", monospace;
  font-weight: 700;
  font-style: normal;
}

.button{padding: 20px 55px; border: none; display: inline-block; font-size: 20px;}
.button.black{color: black}

.color-1{color: var(--color-1);}
.color-1-bg{background-color: var(--color-1);}
.color-2{color: var(--color-2);}
.color-2 path{fill: var(--color-2)}
.color-2-bg{background-color: var(--color-2); color: #fff;}
.color-3{color: var(--color-3)}
.color-3-bg{background-color: var(--color-3);}
.color-4{color: var(--color-4)}
.color-4-bg{background-color: var(--color-4);}
.color-5{color: var(--color-5)}
.color-5-bg{background-color: var(--color-5);}
.linear-1{background: linear-gradient(to right, var(--color-2), var(--color-1)); border-radius: 50px; color: #fff;}

.border-right{border-right: 1px solid;}
.border-bottom{border-bottom: 1px solid;}
.menu-contact, .menu-contact > form{display: flex; gap: 15px;}
.oval-icon{border-radius: 100%;}
.menu-contact path{color: var(--color-1);}
.padding-15{padding: 15px;}
.checkpoints ul li, .checkpoints-2 ul li{list-style-type: none; margin: 10px 0; padding-left: 50px; position: relative}
.checkpoints ul li:before, .checkpoints-2 ul li:before{content: "✔️"; color: #fff; background-color: var(--color-1); display: inline-block; border-radius: 100%; padding: 5px; aspect-ratio: 1/1; font-size: 7px; position: absolute; left: 20px;}
.checkpoints-2 ul li:before{background-color: var(--color-2);}
.line-before .Text, .line-after .Text, .line-both .Text{width: fit-content; margin: 0 auto; position: relative;}
.line-before .Text:before, .line-both .Text:before{ position: absolute; top: 50%; transform: translateY(-50%); left: -29px; background-color: var(--color-1); width: 20px; height: 2px; content: "";}
.line-after .Text:after, .line-both .Text:after{ position: absolute; top: 50%; transform: translateY(-50%); right: -29px; background-color: var(--color-1); width: 20px; height: 2px; content: "";}
.line-after .Text{width: fit-content; position: relative;}
.oval{border-radius: 50%; overflow: hidden; }
.File{position: relative;}

.blink{animation: blink 10s linear infinite;}
.rainbow{aspect-ratio: 3.05/1;}
.rainbow .image{ object-fit: contain;;}
.curved-bg{position: absolute;left: 0;width: 100%;bottom: 0;height: auto;z-index: -1;}
.circle:before{content: ""; border: 30px solid var(--color-1); aspect-ratio: 1/1; width: 100%; height: 100%; top: 0; left: 0; position: absolute; border-radius: 50%;}

@keyframes rotatenonstop {from {transform: rotate(0deg);} to {transform: rotate(360deg);}}
@keyframes blink {0% {transform: scale(0.7);} 50% {transform: scale(1.3);} 100% {transform: scale(0.7);}}

/* HEADER */
#header{z-index: 2; position: relative;}
#top-bar{border-bottom: 10px solid var(--color-1);}
.menu-item{color: var(--color-2); font-size: 20px; position: relative; display: block; padding: 10px 20px;}
.menu-item:hover{border-bottom: 2px solid var(--color-1); padding-bottom: 10px; color: var(--color-2);}
.menu-item.active{background-color: var(--color-2); color: #fff; border-radius: 10px;}
.menu-item > .sub-menu{position: absolute; top: 100%; left: 0; width: 300px; height: auto; display: none; background-color: #fff; padding: 30px; border-radius: 10px; box-shadow: 0 0 5px #333;}
.menu-item:hover > .sub-menu{display: block;}
.menu-item .sub-item{padding: 10px 0; color: var(--color-2);}
#header .top-menu{display: flex; gap: 20px;}
.percentage-scale:before{content: ""; display: block; position: absolute; left: 0; top: 0; height: 50%; width: 100%; background-color: var(--color-1); opacity: 0.1; border-radius:10px;}
.percentage-scale:after{content: ""; display: block; position: absolute; left: 0; top: 0; height: 50%; width: 90%; background: linear-gradient(to right, var(--color-2), var(--color-1)); opacity: 0.5; border-radius:10px;}
.rotated-background{position: relative;}
.menu-file-after{width: 30px; height: 25px;}
.rotated-background:before{content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; content: ""; background-color: var(--color-1); -webkit-transform: rotate(5deg); transform: rotate(5deg); z-index: -9;}
/* FOOTER */
.footer-overlay{opacity: 0.9;}
#footer-line{transform: translateY(-100%);}