html {
font-size: 100%;
box-sizing: border-box;
font-family: 'DM Sans', sans-serif;
scroll-behavior: smooth;
}
*,
*::after,
*::before {
box-sizing: inherit;
margin: 0;
padding: 0;
}
body {
overflow-y: scroll;
overflow-x: hidden;
}
a {
text-decoration: none;
}
body {
background-color: #334b35;
}
header {
/*height: 100vh;*/
width: 100%;
}
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background-color: #334b35;
height: 15vh;
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 2rem;
padding-right: 2rem;
}
@media (min-width: 75em) {
.navbar {
padding-left: 4rem;
padding-right: 4rem;
}
}
.navbar .logo img {
height: 70px;
}
@media (min-width: 75em) {
.navbar .logo img {
height: 80px;
}
}
.navbar .hamburger span {
display: block;
width: 25px;
height: 3px;
background-color: white;
margin-left: auto;
transition: all 300ms ease-in-out;
transform-origin: 5px 1px;
}
.navbar .hamburger span:not(:last-child) {
width: 35px;
margin-bottom: 6px;
}
.navbar__menu {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar__menulist {
display: flex;
margin-right: 2rem;
}
@media (min-width: 75em) {
.navbar__menulist {
list-style: none;
}
.navbar__menulist li {
margin-left: 2rem;
}
.navbar__menulist li a {
color: white;
text-decoration: none;
}
.navbar__menulist li {
font-size: 1rem;
}
.navbar__menulist li a {
color: #b3c5b5;
transition: all 300ms ease-in-out;
}
}
.nav-link {
position: relative;
}
.nav-link:hover {
color: white;
}
.nav-link::before {
transition: 300ms;
height: 2px;
content: "";
position: absolute;
top: 25px;
background-color: #f1cf69;
}
.nav-link-ltr::before {
width: 0%;
bottom: 10px;
}
.nav-link-ltr:hover::before {
width: 100%;
}
.menulist {
position: fixed;
top: 15vh;
left: 0;
right: 0;
height: 85vh;
background-color: rgba(38, 60, 40, 0.95);
display: flex;
flex-direction: column;
list-style: none;
transform: translateX(-100%);
transition: all 500ms ease-in-out;
}
.menulist li {
margin-left: 2rem;
}
.menulist li a {
color: white;
text-decoration: none;
}
.menulist li {
margin-top: 2rem;
display: flex;
justify-content: space-between;
}
.menulist li i {
margin-right: 2rem;
padding: .5rem .75rem 0.5rem .75rem;
background-color: #f1cf69;
}
.menulist li .social-icons {
list-style: none;
display: flex;
justify-content: flex-start;
}
.menulist li .social-icons li {
margin-left: 2rem;
}
.menulist li .social-icons li a {
color: white;
text-decoration: none;
}
.menulist li .social-icons li {
margin: 0;
margin-right: .2rem;
}
.menulist li .social-icons li a i {
font-size: 1.5rem;
color: white;
background-color: transparent;
margin-right: 1rem;
padding: 0;
}
.navbar__contact {
display: flex;
align-items: center;
border-left: 1px solid rgba(155, 155, 155, 0.4);
}
.navbar__contact i {
margin-right: 2rem;
margin-left: 2rem;
padding: 20px;
color: white;
background-color: #6d8c54;
border-radius: 50%;
transition: all 300ms ease-in-out;
}
.navbar__contact i:hover {
background-color: #f1cf69;
}
.navbar__contact .phone h5 {
color: #b3c5b5;
}
.navbar__contact .phone p {
color: white;
}
.hide_mobile {
display: none;
}
@media (min-width: 75em) {
.hide_mobile {
display: flex;
flex-direction: row;
}
}
@media (min-width: 75em) {
.hide_desktop {
display: none;
}
}
.hero {
margin-top: 15vh;
height: 85vh;
background-image: linear-gradient(to bottom, rgba(90, 90, 90, 0.3), rgba(51, 75, 53, 0.6)), url("/images/header-bg.jpg");
background-size: cover;
/*Whatever the screen width it fit the image*/
background-position: top right;
padding-left: 2rem;
padding-right: 2rem;
display: flex;
flex-direction: column;
justify-content: center;
}
@media (min-width: 75em) {
.hero {
background-size: 100% 100%;
background-position: center center;
animation: grow 5s infinite alternate;
animation-iteration-count: 1;
padding-left: 4rem;
padding-right: 4rem;
}
}
.hero h6 {
color: white;
border-bottom: 1px solid white;
padding-bottom: 4px;
display: inline;
font-weight: 700;
letter-spacing: 2px;
font-size: .7rem;
opacity: 0;
transition: all 1000ms ease-in-out;
}
@media (min-width: 37.5em) {
.hero h6 {
font-size: 1rem;
}
}
@media (min-width: 75em) {
.hero h6 {
font-size: 1.2rem;
}
}
.hero h1 {
font-family: 'Shadows Into Light Two';
font-size: 2.5rem;
margin-top: 2rem;
color: white;
opacity: 0;
transform: translateY(150%);
transition: all 1000ms ease-in-out;
transition-delay: 250ms;
}
@media (min-width: 75em) {
.hero h1 {
font-size: 4rem;
}
}
.hero p {
margin-top: .5rem;
color: white;
opacity: 0;
transform: translateY(150%);
transition: all 1000ms ease-in-out;
transition-delay: 500ms;
}
@media (min-width: 75em) {
.hero p {
font-size: 1.2rem;
width: 50%;
line-height: 1.7;
}
}
.hero .btn-hero {
margin-top: 2rem;
padding: 1rem;
border: none;
border-radius: 10px;
background-color: #f1cf69;
color: #334b35;
text-transform: uppercase;
font-weight: 700;
opacity: 0;
transform: translateY(150%);
transition: all 1000ms ease-in-out;
transition-delay: 750ms;
cursor: pointer;
}
@keyframes grow {
0% {
background-size: 120% 120%;
}
100% {
background-size: 100% 100%;
}
}
.active .navbar__menulist {
list-style: none;
flex-direction: column;
align-items: flex-start;
}
.active .navbar__menulist li {
margin-left: 2rem;
}
.active .navbar__menulist li a {
color: white;
text-decoration: none;
}
.active .navbar__menulist li {
margin-top: 2rem;
}
.active .menulist {
transform: translateX(0);
}
.active .navbar__contact {
display: none;
}
.active .hamburger > span:first-child {
transform: rotate(45deg);
}
.active .hamburger > span:nth-child(2) {
opacity: 0;
}
.active .hamburger > span:nth-child(3) {
transform: rotate(-45deg);
width: 35px;
}
.reveal .hero__text h6, .reveal .hero__text h1, .reveal .hero__text p, .reveal .hero__text button {
opacity: 1;
transform: translateY(0);
}
.about {
padding-top: 2rem;
padding-bottom: 2rem;
}
@media (min-width: 56.25em) {
.about {
padding-top: 4rem;
}
}
.about__container {
display: flex;
flex-direction: column;
height: auto;
padding-left: 2rem;
padding-right: 2rem;
}
@media (min-width: 56.25em) {
.about__container {
flex-direction: row;
height: auto;
padding-left: 4rem;
padding-right: 4rem;
}
}
.about__image {
height: auto;
order: 2;
}
@media (min-width: 56.25em) {
.about__image {
width: 40%;
order: 1;
}
}
.about__image img {
height: 400px;
width: 100%;
border-radius: 10px;
object-fit: cover;
}
@media (min-width: 56.25em) {
.about__image img {
height: 600px;
}
}
.about__icon {
margin-top: 2rem;
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center;
background-color: #6d8c54;
padding: 2rem;
}
@media (min-width: 56.25em) {
.about__icon {
margin-top: 0;
margin-left: 4rem;
margin-right: 4rem;
transform: translate(0%, -50%);
transition: all 500ms ease-in-out;
transition-delay: 250ms;
}
}
.about__icon i {
color: #f1cf69;
font-size: 3rem;
margin-bottom: 1rem;
}
.about__icon span {
font-family: 'Shadows Into Light Two';
color: white;
font-size: 2rem;
margin-bottom: 1rem;
}
.about__icon h5 {
color: white;
font-size: 1rem;
}
.about__text {
margin-top: 2rem;
order: 1;
}
@media (min-width: 56.25em) {
.about__text {
margin-top: 0;
width: 60%;
padding-left: 4rem;
order: 2;
}
}
.about__text i {
color: #f1cf69;
font-size: 2rem;
margin-bottom: 1rem;
}
.about__text h6 {
color: #b3c5b5;
font-size: 1rem;
margin-bottom: 1rem;
}
.about__text h2 {
color: white;
font-size: 2rem;
margin-bottom: 1rem;
}
.about__text p {
color: #b3c5b5;
font-size: 1rem;
line-height: 1.75;
margin-bottom: .5rem;
}
.about__features {
margin-top: 2rem;
list-style: none;
}
.about__features > li {
display: flex;
align-items: center;
margin-bottom: 1.5rem;
}
.about__features > li i {
margin: 0;
}
.about__features > li p {
margin-left: 1rem;
}
.section--hidden {
opacity: 0;
transform: translateX(-100%);
}
.shine {
position: relative;
overflow: hidden;
}
.shine::before {
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
content: "";
display: block;
height: 99%;
left: -75%;
position: absolute;
top: 0;
transform: skewX(-25deg);
width: 50%;
z-index: 2;
}
.shine:hover::before, .shine:focus::before {
animation: shine 0.95s;
}
@keyframes shine {
100% {
left: 125%;
}
}
.services .wheat {
height: 50vh;
width: 100%;
background-image: linear-gradient(to bottom, rgba(51, 75, 53, 0.9), rgba(51, 75, 53, 0.9)), url("/images/wheat-bg.jpg");
background-size: cover;
/*Whatever the screen width it fit the image*/
background-position: top right;
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem;
}
.services .wheat i {
color: #f1cf69;
font-size: 2rem;
margin-top: 1rem;
margin-bottom: 1rem;
}
@media (min-width: 56.25em) {
.services .wheat i {
margin-top: 2rem;
}
}
.services .wheat h6 {
color: #b3c5b5;
font-size: 1rem;
margin-bottom: 1rem;
}
.services .wheat h2 {
color: white;
font-size: 2rem;
margin-bottom: 1rem;
}
.card {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 20px;
padding-left: 2rem;
padding-right: 2rem;
}
@media (min-width: 75em) {
.card {
padding-left: 4rem;
padding-right: 4rem;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
}
.card__item {
transform: translateY(-125px);
margin-bottom: 2rem;
position: relative;
}
@media (min-width: 75em) {
.card__item {
transform: translateY(-150px);
}
}
.card__overlay {
position: absolute;
content: "";
top: 0;
left: 0;
right: 0;
bottom: 50%;
background-color: rgba(0, 0, 0, 0);
transition: .3s;
}
.card__overlay:hover, .card__overlay:focus {
box-shadow: inset 0 125px 0 125px rgba(0, 0, 0, 0.3);
}
.card__image {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
height: 250px;
display: flex;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.card__image i {
color: #f1cf69;
font-size: 2rem;
height: 80px;
width: 80px;
background-color: #263c28;
border-radius: 50%;
margin-top: auto;
margin-left: auto;
margin-right: auto;
transform: translateY(50%);
display: flex;
align-items: center;
justify-content: center;
transition: 0.3s;
}
.card__image i:hover, .card__image i:focus {
box-shadow: inset 0 -80px 0 0 #f1cf69;
color: #334b35;
}
.card .img1 {
background-image: url("/images/kutu1.jpg");
}
.card .img2 {
background-image: url("/images/kutu2.jpg");
}
.card .img3 {
background-image: url("/images/kutu3.jpg");
}
.card .img4 {
background-image: url("/images/kutu4.jpg");
}
.card__text {
width: 100%;
height: 250px;
background-color: #263c28;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-left: 2rem;
padding-right: 2rem;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.card__text h5 {
font-family: 'Shadows Into Light Two';
font-weight: bolder;
font-size: 1.5rem;
color: white;
margin-bottom: .5rem;
margin-top: .5rem;
}
.card__text p {
text-align: center;
color: #b3c5b5;
margin-bottom: .5rem;
}
.card__text i {
padding: 1rem;
background-color: #f1cf69;
border-radius: 50%;
}
footer {
background-image: linear-gradient(to bottom, #334b35, rgba(51, 75, 53, 0.95)), url("/images/farm-bg.jpg");
background-size: cover;
/*Whatever the screen width it fit the image*/
background-position: center bottom;
background-repeat: no-repeat;
height: auto;
width: 100%;
display: flex;
flex-direction: column;
padding: 2rem;
}
@media (min-width: 56.25em) {
footer {
flex-direction: row;
align-items: flex-start;
}
}
@media (min-width: 75em) {
footer {
padding-left: 4rem;
padding-right: 4rem;
}
}
.contact {
display: flex;
flex-direction: column;
}
@media (min-width: 56.25em) {
.contact {
flex-direction: row;
justify-content: flex-end;
width: 50%;
}
}
@media (min-width: 56.25em) {
.contact__image {
width: 50%;
}
}
.contact__image img {
height: 70px;
margin-bottom: 1rem;
}
@media (min-width: 75em) {
.contact__image img {
height: 80px;
}
}
.contact__image ul {
margin-top: 1rem;
list-style: none;
}
.contact__image ul li {
margin-left: 2rem;
}
.contact__image ul li a {
color: white;
text-decoration: none;
}
.contact__image ul li {
display: flex;
justify-content: flex-start;
align-items: flex-start;
margin: 0;
margin-bottom: .5rem;
}
.contact__image ul li i {
margin-right: 1rem;
padding: .5rem;
background-color: #f1cf69;
border-radius: 50%;
}
.contact__image ul li p {
padding-top: .25rem;
margin-bottom: 1rem;
color: white;
}
.contact__description {
padding-bottom: 1rem;
border-bottom: 1px solid rgba(155, 155, 155, 0.5);
color: #b3c5b5;
}
.contact__social {
margin-top: 3rem;
}
@media (min-width: 56.25em) {
.contact__social {
width: 50%;
margin-top: 0;
text-align: center;
}
}
.contact__social h5 {
color: white;
font-size: 1.2rem;
}
.contact__social ul {
list-style: none;
display: flex;
justify-content: flex-start;
margin-top: 1rem;
}
.contact__social ul li {
margin-left: 2rem;
}
.contact__social ul li a {
color: white;
text-decoration: none;
}
@media (min-width: 56.25em) {
.contact__social ul {
justify-content: center;
}
}
.contact__social ul li {
margin: 0;
margin-right: 1rem;
}
.contact__social ul li a i {
font-size: 1.5rem;
color: #b3c5b5;
transition: .3s;
}
.contact__social ul li a i:hover {
color: #f1cf69;
}
.other {
display: flex;
flex-direction: column;
}
@media (min-width: 56.25em) {
.other {
flex-direction: row;
width: 50%;
}
}
.other__explore {
margin-top: 3rem;
}
@media (min-width: 56.25em) {
.other__explore {
width: 50%;
margin-top: 0;
text-align: center;
}
}
.other__explore h5 {
color: white;
font-size: 1.2rem;
}
.other__explore ul {
list-style: none;
margin-top: 1rem;
}
.other__explore ul li {
margin-left: 2rem;
}
.other__explore ul li a {
color: white;
text-decoration: none;
}
.other__explore ul li {
margin: 0;
margin-bottom: 1rem;
}
.other__explore ul li a {
color: #b3c5b5;
font-size: 1rem;
transition: .3s;
}
.other__explore ul li a:hover {
color: #f1cf69;
}
.other__group {
margin-top: 3rem;
}
@media (min-width: 56.25em) {
.other__group {
width: 50%;
margin-top: 0;
text-align: center;
}
}
.other__group h5 {
color: white;
font-size: 1.2rem;
}
.other__group ul {
list-style: none;
margin-top: 1rem;
}
.other__group ul li {
margin-left: 2rem;
}
.other__group ul li a {
color: white;
text-decoration: none;
}
.other__group ul li {
margin: 0;
margin-bottom: 1rem;
}
.other__group ul li a .miceplan {
height: 40px;
}
.other__group ul li a .micefilo {
height: 45px;
}
.subfooter {
background-color: #6d8c54;
height: 7vh;
display: flex;
justify-content: center;
align-items: center;
}
.subfooter .click {
color: #b3c5b5;
}
.subfooter img {
margin-left: .3rem;
height: 15px;
}
.order_button {
border: 1px solid #f1cf69;
padding: .75rem;
border-radius: 10px;
width: 75%;
text-decoration: none;
background-color: #f1cf6a;
color: white;
font-weight: 700;
text-align: center;
cursor: pointer;
transition: all 300ms ease-in-out;
color: #263c28;
}
.order_button:hover {
background-color: #263c28;
color: #b3c5b5;
}
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}
.d-flex {
display: flex;
flex-direction: column;
background: #f6f6f6;
border-radius: 0 0 5px 5px;
padding: 25px;
}
@media (min-width: 75em) {
.d-flex {
flex-direction: row;
}
}
form {
flex: 4;
}
.Yorder {
flex: 2;
}
.title {
background: linear-gradient(to bottom right, #334b35 0%, #6d8c54 100%);
border-radius: 5px 5px 0 0;
padding: 20px;
color: #f6f6f6;
}
h2 {
margin: 0;
padding-left: 15px;
}
.required {
color: red;
}
label,
table {
display: block;
}
label > span {
float: left;
width: 100%;
margin: 10px 0 5px 0;
padding-right: 10px;
}
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"],
select {
width: 100%;
height: 30px;
padding: 5px 10px;
margin-bottom: 10px;
border: 1px solid #dadada;
color: #888;
margin-bottom: 10px;
}
@media (min-width: 75em) {
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"],
select {
width: 85%;
}
}
select {
width: 100%;
height: 45px;
padding: 5px 10px;
margin-bottom: 10px;
}
@media (min-width: 75em) {
select {
width: 85%;
}
}
.Yorder {
margin-top: 15px;
height: 600px;
padding: 20px;
border: 1px solid #dadada;
}
table {
margin: 0;
padding: 0;
}
th {
border-bottom: 1px solid #dadada;
padding: 10px 0;
}
tr > td:nth-child(1) {
text-align: left;
color: #2d2d2a;
}
tr > td:nth-child(2) {
text-align: right;
color: #52ad9c;
}
td {
border-bottom: 1px solid #dadada;
padding: 25px 25px 25px 0;
}
p {
display: block;
color: #888;
margin: 0;
/* padding-left: 25px; */
}
.Yorder > div {
padding: 15px 0;
}
button {
/* width: 100%; */
margin-top: 10px;
padding: 10px;
border: none;
border-radius: 30px;
background: #52ad9c;
color: #fff;
font-size: 15px;
font-weight: bold;
}
button:hover {
cursor: pointer;
background: #428a7d;
}
.pay_images img {
width: 50px;
}
.iyizico_icon_container {
justify-content: center;
align-items: center;
display: flex;
}
.iyizico_icon_container img {
height: 60px;
padding: 1em;
}
@media (min-width: 75em) {
.iyizico_icon_container img {
height: 70px;
}
}
.form-docs {
background-color: #f1f6f9;
}
.docDiv {
font-size: 12px;
color: #888;
margin-bottom: 1rem;
}
.docDiv a {
font-size: 12px;
color: #888;
margin-bottom: 1rem;
}
.wallnut {
height: auto;
background-color: #b3c5b5;
padding: 2rem 0;
width: 100%;
padding: 8rem 0;
}
.wallnut__container {
display: flex;
justify-content: center;
align-items: center;
}
.wallnut__cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
max-width: 100%;
grid-gap: 2rem;
}
@media (min-width: 75em) {
.wallnut__cards {
padding-left: 4rem;
padding-right: 4rem;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
grid-gap: 3rem;
}
}
.wallnut h2 {
width: 100%;
text-align: center;
margin-bottom: 3rem;
font-size: 2rem;
}
.wallnut i {
color: #263c28;
font-size: 2rem;
}
.wallnut__card {
width: 320px;
height: auto;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
border-radius: 16px;
display: flex;
position: relative;
padding: 1rem 0;
}
@media (min-width: 75em) {
.wallnut__card {
width: 350px;
height: auto;
}
}
.wallnut__card:nth-child(1) {
background-color: #6d8c54;
}
.wallnut__card:nth-child(2) {
background-color: #334b35;
}
.wallnut__card:nth-child(3) {
background-color: #263c28;
}
.wallnut__text {
width: 100%;
padding-top: 1.5rem;
padding-left: 1rem;
padding-bottom: 1rem;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.wallnut__text h1 {
color: white;
}
.wallnut__text h6 {
font-size: 1.5rem;
color: #f1cf69;
}
.wallnut__text p {
color: #b3c5b5;
font-size: 1rem;
}
.wallnut__stats {
margin-top: auto;
display: flex;
}
.wallnut__price {
margin-right: .5rem;
padding-right: .5rem;
border-right: 2px solid #b3c5b5;
}
.wallnut__image {
position: absolute;
z-index: 2;
height: 100px;
width: 100px;
right: 0;
top: 0;
}
.wallnut__image img {
height: 125px;
transform: translateX(-35%);
}
/*# sourceMappingURL=main.css.map */