/* ----------------- General Rules ----------------- */

@import url('https://fonts.googleapis.com/css2?family=Ruda&display=swap');

body {
    font-family: 'Ruda', sans-serif;
    background-color: #e6e7ee;
    color: #44476a;
    margin: 0 a;
}
h3 {font-size: 2.8rem;line-height: 1.3;}
h4 {font-size: 1.8rem; font-weight: 700;margin-bottom: 10px;}
p { font-size: 1.65rem; font-weight: 300;line-height: 1.6;margin-bottom: 16px;}
hr{margin: 3rem auto ;border-top: .0625rem solid rgba(38,40,51,.05);}
a { color: #44476a;}
a:hover { text-decoration: none;color: #44476a;}
.text-none-weight { font-weight: normal;}
.font-small{ font-size: 14px; margin: 8px auto 16px;}
.title-section{margin:0 auto 24px}
.shadow-soft {
    background-color: #e6e7ee!important;
    box-shadow: 6px 6px 12px #b8b9be,-6px -6px 12px #fff!important;
    border-radius: .55rem;
    border: .0625rem solid #d1d9e6;
}
.shadow-inset {
    padding: 10px;
    border-color: #d1d9e6!important;
    box-shadow: inset 2px 2px 5px #b8b9be,inset -3px -3px 7px #fff!important;
}
.cycle {border-radius: 50%!important;}
.p-0 { padding-bottom: 128px;}
.p-1 { padding: 20px;margin-bottom: 24px;}

/* ----------------- Navbar Section ----------------- */
.shadow-soft-md {
        background-color: #e6e7ee!important;
        box-shadow: 6px 6px 12px #b8b9be,-6px -6px 12px #fff!important;
        border-radius: .55rem;
        border: .0625rem solid #d1d9e6;
    }
.navbar { min-height: 100px;}
.navbar-default {margin-bottom: 0px; background-color: #e6e7ee;border-bottom-color:#d1d9e6!important;}
.navbar-brand img{
        margin-left: 20px;
        padding: 15px; 
        background-color: #e6e7ee!important;
        box-shadow: 6px 6px 12px #b8b9be,-6px -6px 12px #fff!important;
        border-radius: .55rem;
        border: .0625rem solid #d1d9e6;
    }
.navbar-default .navbar-nav>li>a {color: #44476a; margin-top: -20px;padding-left: 64px;}
.navbar-default .navbar-nav>li>a:hover {font-weight: bold;}
    @media (min-width: 768px){
        .navbar-right {margin-right: 177px;margin-top: 43px;}

    .navbar-right .dropdown-menu {
        min-width: 18rem;
        min-height: 13rem;
        right: -99px;
        padding: .7rem 0;
        color: #44476a;
        background-color: #e6e7ee!important;
        box-shadow: 6px 6px 12px #b8b9be,-6px -6px 12px #fff!important;
        border-radius: .55rem;
        border: .0625rem solid #d1d9e6;
    }
    .navbar-right .dropdown-menu>li>a { padding: 0.8rem 1rem; }
    .navbar-right .dropdown-menu>li>a:hover , .recipe .recipe-details .btn-view:hover {
        background-color: #e6e7ee;
        box-shadow: inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #fff!important;
    }
    .dropdown-toggle:hover .fa-angle-down {
        animation: down 1s ease-in-out alternate ;
        transform: rotateZ(0deg);
        transition: transform .2s ease; 
    }
    .navbar-nav>li>.dropdown-menu { display: none;}
    .navbar-nav>li:hover>.dropdown-menu { display: block; transition: all 1s ease;}
    
    
}
/* ----------------- Navbar Section ----------------- */

.features { margin: 90px auto 0px; }
.features .feature-content  { margin-top: 70px;padding: 24px;}
.features .cycle-bg {
    border-radius: 50%;
    padding: 1rem!important;
    border-color: #d1d9e6!important;
    background-color: #e6e7ee!important;
    width: 90%;
    margin: 0 auto;
}
.features .feature-content-img { border-radius:50%;max-width: 100%;height: auto;}


/* ----------------- Recipes Card & Statistics & Menu card Section ----------------- */

.recipes-card .card { padding: 48px 24px; }
.menu-card .card { padding: 48px 24px 55px;}
.recipes-card .card .icon-shape, .menu-card .card .icon-shape { width: 9.5rem;height: 9.5rem;margin: 0 auto 24px;}
.recipes-card .card p {font-size: 1.4rem;line-height: 1.8;width: 286px;margin: 0 auto;}
.fa-smile-beam , .fa-eye { font-size: 5rem; }
.counter { font-size: 2.8rem; font-weight: bold;font-weight: 400;}
.card-title { margin: 0px auto 8px;}


/* ----------------- Covid Eating Section ----------------- */

.covid-eating .organic-radius {
    border-radius: 63% 37% 30% 70%/50% 45% 55% 50%;
    padding: 1rem!important;
    border-color: #d1d9e6!important;
    background-color: #e6e7ee!important;
    transform: rotate(180deg);
    padding: 0 15px;
}
.covid-eating .organic-radius .img-fluid {
    border-radius: 63% 37% 30% 70%/50% 45% 55% 50%;
    max-width: 100%;
    height: auto;
    transform: rotate(360deg);

}
.covid-eating .eating-info { padding: 20px 25px;}

/* ----------------- Our Editor Section ----------------- */

.our-editor h3 { margin: 0px auto 48px;}
.card-container { margin: 0 0 48px;padding: 24px 0;}
 .card-container .card-image { width: 15rem;height: 15rem;padding: 16px;margin: 0 auto;}
 .card-container .card-image img {padding:12px;}
.card-container .card-body{padding: 1.5rem;}
.card-container .card-body .social-list {margin: 16px 0; font-size: 18px;}

/* ----------------- Footer Section ----------------- */

.footer { padding-top: 8rem!important;border-top: .0625rem solid #d1d9e6!important;margin-bottom: 48px;}
.footer .social {
    padding: 19px;
    width: 6.5rem;
    height: 6.5rem;
    margin-right: 10px;
    background-color: #e6e7ee!important;
    box-shadow: 6px 6px 12px #b8b9be,-6px -6px 12px #fff!important;
    border-radius: .55rem;
    border: .0625rem solid #d1d9e6;
    transition: all .2s ease;
}.footer ul .social:hover {
    border-color: #d1d9e6!important;
    box-shadow: inset 2px 2px 5px #b8b9be,inset -3px -3px 7px #fff!important;
}
.footer p { font-size: 14px; margin: 8px auto 16px;}
.footer  h5 { font-size: 20px;margin: 0 auto 14px;font-weight: 700;}
.footer .useful-links .links {margin-top: .5rem!important;margin-bottom: 1rem;}
.footer .useful-links li {margin-left: -9px;margin-bottom: 1rem!important;}
.footer .useful-links li a{
    padding: 10px;
    color: #31344b;
    font-size: 16px;
    font-weight: 400;
    transition: all .2s ease;
    border-radius: .55rem;
}
.footer .useful-links li a:hover{
    padding: 10px;
    border-color: #d1d9e6!important;
    box-shadow: inset 2px 2px 5px #b8b9be,inset -3px -3px 7px #fff!important;
}
.footer .subscribe form {margin-left: -15px;}
.footer .subscribe form input {
    font-size: 1.2rem;
    margin-bottom: .5rem!important;
    height: calc(1.5em + 1.2rem + .0625rem);
    padding: 2rem 1.7rem;
    color: #44476a;
    background-color: #e6e7ee;
    background-clip: padding-box;
    border: .0625rem solid #d1d9e6;
    border-radius: .55rem;
    box-shadow: inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #fff;
    transition: all .2s ease;
}
.form-control::-webkit-input-placeholder { color: #44476a; } 
.footer .subscribe form .btn-subscribe , .btn-submit {
    background-color: #e6e7ee!important;
    border-radius: .55rem;
    border: .0625rem solid #d1d9e6;
    padding: .75rem .95rem;
    transition: all .2s ease;
    letter-spacing: .025em;
    font-size: 1.5rem;
    box-shadow: 3px 3px 6px #b8b9be, -3px -3px 6px #fff;
    transition: all .2s ease;
    cursor: pointer;
    margin-bottom: 8px;
}
.footer .subscribe form .btn-subscribe:hover{
    box-shadow: inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #fff;   
}
a.privacy {font-weight: 600;color: #44476a;}

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

.banner {
    background: url(../images/banner-01.jpg) no-repeat center center fixed;
    -webkit-background: url(../images/banner-01.jpg) no-repeat center center fixed;
    -moz-background: url(../images/banner-01.jpg) no-repeat center center fixed;
    -o-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 600px;
    position: relative;
    text-align: center;
}
.banner .overlay {
    position: absolute;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,.3);
}
.banner a.btn-scroll {
    position: absolute;
    bottom: 5rem;
    left: 20%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.banner .btn-scroll .mouse {
    width: 2.7rem;
    height: 6.2rem;
    border: 2px solid #e6e7ee;
    background-color: #e6e7ee;
    border-radius: 2rem;
    margin-bottom: .5rem;
    display: flex;
}
.banner .btn-scroll .mouse span {
    width: 1rem;
    height: 1rem;
    background-color: #44476a;
    display: block;
    border-radius: 50%;
    margin: auto;
    animation: move-wheel 1s linear infinite
}
.banner .btn-scroll .arrow span {
    display: block;
    height: 1.5rem;
    width: 1.5rem;
    border: 3px solid transparent;
    border-right-color: #44476a;
    border-bottom-color: #44476a;
    transform: rotate(45deg);
    animation: arrow-down .5s alternate infinite
}
@keyframes move-wheel{
    0% {
        opacity: 0;
        transform: translateY(-1rem);
    }
    100% {
        opacity: 1;
        transform: translateY(1rem);
    }
}
@keyframes arrow-down{
    0% {opacity: 0;}
    25% {opacity: .25;}
    50% {opacity: .5;}
    75% {opacity: .75;}
    100% {opacity: 1;}
}

/* ----------------- Recipes Section ----------------- */
.menu-card .recipe { position: relative;padding: 24px;transition: all .2s ease-in-out;cursor: pointer;}
.menu-card .recipe .recipe-name{ margin-top: 50px;}
.menu-card .recipe .recipe-name:hover{ font-weight: bold;}
.menu-card .recipe .recipe-img img{
 position: absolute;
 width: 60%;
 top: -69px;
 right: -81px;
 left: 89px;
 transition: all .2s ease-in-out;
}
.menu-card .recipe:hover .recipe-img img { transform-origin: center;transform-box:fill-box;animation: rotate-dish 1.5s alternate;}
@keyframes rotate-dish {
    0%{transform: rotateZ(0deg)}
    50%{transform: rotateZ(30deg)scale(.9)}
    100%{transform: rotateZ(0deg)}
}
.recipe .recipe-details .recipe-time { margin-bottom: 24px;}
.recipe .recipe-details .btn-view  {
    letter-spacing: .025em;
    font-size: 1.5rem;
    transition: all .2s ease;
    cursor: pointer;
    margin-bottom: 8px;
    padding: .9rem 2.8rem;
    box-shadow: 3px 3px 6px #b8b9be, -3px -3px 6px #fff!important;
}
.recipe .recipe-details .fa-utensils::before  { margin-right: 10px;}
.pagination>li>a {
    border-radius: 50%;
    margin: auto 5px;
    background-color: #e6e7ee!important;
    border-color: #d1d9e6!important;
    box-shadow: inset 2px 2px 5px #b8b9be,inset -3px -3px 7px #fff;
    color: #44476a;
    transform: scale(.8);
}
.pagination>.active>a, .pagination>li>a:hover {transform: scale(1); color: #44476a;box-shadow: 6px 6px 12px #b8b9be,-6px -6px 12px #fff;}
.pagination>li.active>a:hover {  font-weight: bold; color: #44476a;  }
.pagination>li:first-of-type>a ,.pagination>li:first-of-type>a:hover ,
.pagination>li:last-of-type>a, .pagination>li:last-of-type>a:hover  { background-color: #e6e7ee!important; margin: auto 10px;box-shadow:none;border:none;}

/* ----------------- Contact Section ----------------- */
.contact {
    padding: 48px!important;
    width: 60%;
    overflow: auto;
    margin: 60px auto 138px;
}
.contact-header {
    padding: 20px 24px;
    border-bottom: .0625rem solid rgba(243,247,250,.05);
    border-radius: .55rem!important;
    margin-bottom: 24px;
}
.contact-map {
    padding: 28px!important;
    border-radius: .55rem!important;
    margin-bottom: 3rem!important;
}
.map {
    height: 500px;
    width: 100%;
    filter: grayscale(100%);
    border-radius: .55rem!important;
}
.contact h3 { margin: 26px auto 22px;}
.contact p { width: 80%;margin: 0 auto 48px;
}
.contact .box { margin-bottom: 24px;}
.icon-box{
    width: 10.5rem;
    height: 10.5rem;
    margin: 0 auto; 
    line-height: 120px;
    margin-bottom: 24px;
}
.icon-box-title { font-size: 16.5px;font-weight: 600;margin: 0px auto 8px}
.contact form {width: 600px;margin: 0 auto;}
.contact form label { font-size: 14px;margin-bottom: .5rem;text-align: left;}
.contact form input, .contact form textarea { padding: 11px 14px;  background-color: #e6e7ee!important;}
.contact form .input-group-addon{     background-color: #e6e7ee; border: .0625rem solid #d1d9e6;}
.btn-submit{padding: 8.8px 15.2px;}

/* ------------------ Small Screen ------------------------ */
@media (max-width: 767px){
    .p-0 { padding-bottom: 48px;}
    .row { margin-right: 15px;margin-left: 15px;}
    h3 strong { font-size: 25px;}
    .navbar {min-height: 80px;}
    .navbar-default {
        margin-bottom: 0px; 
        background-color: #e6e7ee;
        border-bottom-color:#d1d9e6!important;
    }
    .navbar-brand img{margin-left: 0px;padding: 11px 15px;}
    .navbar-default .navbar-toggle {border-color: #d1d9e6;margin-top: 20px;}
    .navbar-default .navbar-toggle .icon-bar { background-color: #44476a;}
    .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
        color: #44476a;
        background-color: #e6e7ee;
    }
    .navbar-default .navbar-collapse { border-color: #e6e7ee;}
    .navbar-right { margin-right: 0px;margin-top: 32px;}
    .navbar-default .navbar-nav>li>a {color: #44476a;padding: 24px 20px;}
    .navbar-default .navbar-nav .open .dropdown-menu>li>a {
        padding: 0.8rem 3rem;
        color: #44476a; 
        background-color: #e6e7ee;
    }
    .navbar-default .navbar-nav .open .dropdown-menu>li:last-child>a { margin-bottom: 24px;}
    .navbar-right .dropdown-menu>li>a:hover { 
        box-shadow: inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #fff!important;
    }
    .navbar-nav .open .dropdown-menu>li>a {line-height: 24px;}
    /* ---------------------------------------- */
    .features { margin-top: 50px; }
    .features .feature-content  { margin-top: 0px;padding: 0px ; text-align: center;}
    .features .feature-content p { font-size: 1.55rem; padding-bottom: 43px; }
    /* ---------------------------------------- */
    .recipes-card .card p { width: 262px;}
    /* ---------------------------------------- */
    .covid-eating .eating-info { padding: 20px 0px;text-align: center;}
    /* ---------------------------------------- */
    .card-title {font-size: 23px;}
    .recipes-card .card {padding: 24px 24px;}
    .counter {font-size: 33px;}
    /* ------------------------------ */
    .subscribe-section { margin-bottom: 48px;}
    /* ------------------------------ */
    .menu-card .recipe .recipe-img img {width: 46%;right: -93px;left: 146px;}
    .footer .subscribe form input { height: calc(2.5em + 1.6rem + .0625rem);}
    /* ------------------------------ */
    .contact {padding: 8px!important;width: 93%;margin-bottom: 100px;}
    .contact-header { padding: 20px 0 0; margin-bottom: 38px;}
    .contact-map { padding: 24px!important;}
    .contact p {width: 85%;}
    .contact .input-group .form-control {width: 53%;}
    .contact .form-control {width: 56%;padding: .6rem .75rem;}
    
}