body {
    font-family: 'Rubik' !important;
}

.container {
    max-width: 100% !important;
    overflow: auto;
    height: 100%;
}

#NavContainerCentered .navbar {
    background-color: #22B05B !important;
    /* color: #22B05B  !important; */
}

#SpinnerMaincontainer {
    position: absolute;
    height: 100vh;
    width: 100vw;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    z-index: 1051;
    background: black;
    opacity: 0.5;
    display: none;
}

#Spinnercontainer {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
}


#AboutTopContainer,
#ServicesTopContainer,
#OurStoryTopContainer,
#AgreementsTopContainer,
#PartnershipsTopContainer,
#ContactTopContainer,
#ProjectsTopContainer,
#AdminNavigator .navbar {
    background-color: #fafafa !important;
}

.nav-link {
    padding: 0 !important;
}

.navbar-nav .nav-link {
    padding-right: 2.5rem !important;
    padding-left: 2.5rem !important;
}

.navbar-light .navbar-nav .nav-link {
    cursor: pointer;
    color: #fff !important;
}

.navbar-light .navbar-nav .nav-link:hover {
    color: #16472a !important;
}

#AppBodyContainer {
    background-color: #fff !important;
}

#SystemManagementAdminNavigator {
    height: 100%;
    width: 140px;
    float: left;
    background-color: #fafafa;
}

#SystemManagementMainBodyContainer {
    float: left;
    width: calc(100% - 140px);
    height: 100%;
    padding: 10px;
    overflow: hidden auto;
}

#AdminNavigator {
    height: 100%;
}

#AdminNavigator .navbar {
    padding: 0;
}

#MainNavContainer .dropdown-toggle::after {
    display: none !important;
}

#loginUserTag {
    width: 40PX;
    height: 40px;
    background-color: #22B05B;
    border-radius: 50px;
    font-weight: bold;
    font-size: 26px;
    text-align: center !important;
}

#loginUserTag .dropdown-toggle:hover {
    color: #fff !important;
}

#loginUserTag .dropdown-toggle {
    padding: 0;
    color: #fff;
}

.agri-color {
    color: #22B05B !important
}

.agri-background {
    background-color: #22B05B !important;
    border-color: #22B05B !important
}

.form-control:focus,
input[custom-file-input]:focus,
.uneditable-input:focus {
    border-color: #22B05B !important;
    box-shadow: 0 1px 1px #22B05B inset, 0 0 8px #22B05B !important;
    outline: 0 none;
}

.carousel-item {
    height: 90vh;
    overflow: hidden;
}

#secondPart {
    margin-top: 100px !important;
}

#secondPart img,
.carousel-item img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

@media (max-width:767px) {

    #imgSliderMainContainer,
    .carousel .slide,
    .carousel-inner,
    .carousel-indicators .carousel-item,
    #secondPart img,
    .carousel-item img {
        height: 70%;
    }

    .carousel-indicators,
    #SliderSocialMedia {

        margin-bottom: 50% !important;
    }
}

/* #secondPart p{
    padding: 50px 0px;
} */

#imgSliderMainContainer {
    position: relative;
}

.carousel-caption {
    width: auto;
    height: fit-content;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    z-index: 10;
}

.carousel-item img {
    filter: brightness(85%);
}

.AlertRed {
    border-color: red !important;
    color: red !important
}

.AlertRed:focus,
input[custom-file-input]:focus,
.uneditable-input:focus {
    border-color: custom-orange !important;
    box-shadow: 0 1px 1px rgba(229, 103, 23, 0.075) inset, 0 0 8px custom-orange !important;
    outline: 0 none !important;
}

.AlertRed:focus {
    border-color: #ff4444 !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 68, 68, .25) !important;
}

#secondPart,
#thirdPart,
#CalculatorPart,
#fourthPart {
    max-width: 1250px;
    margin: auto;
    padding-right: 30px;
    padding-left: 30px;
}

#thirdPart {
    font-size: 33px;
    /* width: 500px; */
    color: #22B05B;
    font-weight: 600;
}

#MainCalculatorPart {
    background: #FAFAFA 0% 0% no-repeat padding-box;
}

#CalculatorPart .row .col-12 label {
    width: 230px
}

#fourthPart {
    text-align: center;
}

#fourthPart h4,
#fourthPart img {
    cursor: pointer;
}

#fourthPart img {
    height: 100px;
    width: 100px;
}

#thirdPartColor {
    border: 2px solid #22B05B;
    width: 170px;
    margin-left: calc(50% - 85px);
}

#footerMainContainer {
    background-color: #fafafa;
}

#footer {
    /* background: #22B05B; */
    max-width: 1250px;
    margin: auto !important;
}

#footerFollowUS {
    width: 840px;
    margin: auto;
    height: 125px;
}

#footerFollowUS>div {
    float: left;
    padding-left: 15px
}

#footerSocialMedia {
    width: 165px;
    margin: auto;
    height: 125px;
    text-align: -webkit-center
}

#footerSocialMedia>div {
    float: left;
    padding-left: 15px
}

#PartnershipsContainer .row,
#AgreementsContainer .row,
#ServicesContainer .row,
#ProductsContainer .row,
#AboutContainer .row {
    margin: 30px;
}

#AgreementsTopContainer,
#PartnershipsTopContainer,
#OurStoryTopContainer,
#AboutTopContainer,
#ContactTopContainer,
#ServicesTopContainer,
#ProductsTopContainer,
#ProjectsTopContainer {

    max-width: 1250px;
    margin: auto;
    padding: 25px;
    text-align: center;
    min-height: 170px;
}

/* #ServicesTopContainer{
    padding:50px;
    text-align: center;
    max-width: 500px;
} */
#ServicesTopContainer .row {
    margin: 15px;
    text-align: left;
    margin: 30px auto;
    text-align: center;
}

#ServicesTopContainer h1 {
    font-weight: bold;
}


#ServicesMainContainer,
#ProductsMainContainer,
#PartnershipsMainContainer,
#AgreementsMainContainer,
#ProjectsMainContainer,
#OurStoryMainContainer,
#AboutMainContainer,
#ContactMainContainer {
    height: 100%;
    padding: 0;
}

#ServicesContainer,
#PartnershipsContainer,
#AgreementsContainer,
#ProjectsContainer,
#OurStoryContainer,
#AboutContainer,
#ContactContainer {
    position: relative;
    margin-top: -250px;
}

#ProductsContainer {
    position: relative;
    margin-top: -150px;

}

#ServicesBodyContainer,
#ProductsBodyContainer,
#PartnershipsBodyContainer,
#AgreementsBodyContainer,
#ProjectsBodyContainer,
#OurStoryBodyContainer,
#AboutBodyContainer,
#ContactBodyContainer {
    max-width: 1250px;
    margin: auto;
}

.MainImgContainer {
    filter: brightness(50%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 420px;
    width: 100%;
}

#ServicesMainContainer .MainImgContainer {
    background-image: url("/images/headerImgs/HeaderImage01.jpg");
}

#ProductsMainContainer .MainImgContainer {
    background-image: url("/images/headerImgs/HeaderImage01.jpg");
}

#PartnershipsMainContainer .MainImgContainer {
    background-image: url("/images/headerImgs/HeaderImage02.jpg");
}

#AgreementsMainContainer .MainImgContainer {
    background-image: url("/images/headerImgs/HeaderImage03.jpg");
}

#ProjectsMainContainer .MainImgContainer {
    background-image: url("/images/headerImgs/HeaderImage04.jpg");
}

#OurStoryMainContainer .MainImgContainer {
    background-image: url("/images/headerImgs/HeaderImage05.jpg");
}

#AboutMainContainer .MainImgContainer {
    background-image: url("/images/headerImgs/HeaderImage06.jpg");
}

#ContactMainContainer .MainImgContainer {
    background-image: url("/images/headerImgs/HeaderImage07.jpg");
}

.MainImgAndTitleContainer {
    position: relative;
}

.TitleContainer {
    position: absolute;
    top: 30px;
    left: 10%;
    font-size: 4em;
    font-weight: bold;
    color: #fff;
}

.carousel-caption.d-none.d-md-block {
    display: initial !important;
}

#ProjectsCardsContainer {
    text-align: center;
    color: #22B05B;
}

#ProjectsCardsContainer .card {
    border-radius: 15px;
}

#ProjectsCardsContainer div {
    margin-top: 20px
}

#ServicesBodyContainer>.row h3,
#ProductsBodyContainer>.row h3,
#PartnershipsBodyContainer>.row h3,
#AgreementsBodyContainer>.row h3,
#ProjectsBodyContainer>.row h3,
#OurStoryBodyContainer>.row h3,
#AboutBodyContainer>.row h3,
#ContactBodyContainer>.row h3 {
    width: 100%;
    text-align: center;
}

@media (max-width: 768px) {

    #ServicesBodyContainer,
    #ProductsBodyContainer,
    #PartnershipsBodyContainer,
    #AgreementsBodyContainer,
    #AboutBodyContainer {
        margin-left: 0;
        margin-right: 0;

    }

    #OurStoryBodyContainer,
    #ProjectsBodyContainer,
    #ContactBodyContainer {
        margin-left: 15px;
        margin-right: 15px;
    }

    .navBarLoginButtom {
        border: initial;
        border-radius: initial;
        padding: initial;
        height: initial;
        margin-top: initial;
    }

    #LoginContainer {
        height: initial !important;
    }
}

.navBarLoginButtom {
    border: 1px solid rgba(0, 0, 0, .5);
    border-radius: 5px;
    padding: 1px 3px !important;
    height: 26px;
    margin-top: 7px;
}

.btn:hover {
    background-color: #10813d !important;
    box-shadow: 0 1px 1px #10813d inset, 0 0 8px #10813d !important;
}

#LoginContainer input {
    text-align: center;
}

#HomeMainContainer h1 {
    font-size: 34px;
    font-weight: bold;
}

#HomeMainContainer p {
    font-size: 20px;
}

.ProductsQuantity {
    border: 0.6px solid #22B05B;
    border-radius: 5px;
    color: #22B05B;
    font-size: 13px;
}

.ProductsIngredient {
    font-size: 12px;
    text-align: left;
}

.secondary:hover {
    background-color: red !important;
    box-shadow: 0 1px 1px red inset, 0 0 8px red !important;
}

.arrowMainContainer {
    cursor: pointer;
    color: #22B05B;
    position: relative;
}

.arrowContainer {
    height: 60px;
}

.arrowArrow {
    margin-left: 174px;
    margin-top: 7px;
    font-size: 30px;
    float: left;
}

.arrowLine {
    width: 108px;
    height: 31px;
    margin-left: 78px;
    border-bottom: 3px solid #22B05B;
    position: absolute;
    float: left;
    transition: 0.3s;
}

@media (max-width:767px) {
    .arrowArrow {
        margin-top: 6px;
    }
}

.arrowLine:hover {
    width: 158px;
    margin-left: 28px;
}


.arrowText {
    position: absolute;
    margin-left: 70px;
    top: 40px;
}



.arrowMainContainerFooter {
    position: relative;
    cursor: pointer;
    color: #22B05B;
}

.arrowContainerFooter {
    position: relative;
    color: #22B05B;
    height: 60px;
}

.arrowArrowFooter {
    position: absolute;
    margin-left: 102px;
    font-size: 28px;
    float: left;
    color: #22B05B;
    top: 40px;

}

.arrowLineFooter {
    position: absolute;
    top: 30px;
    width: 63px;
    height: 34px;
    margin-left: 50px;
    border-bottom: 3px solid #22B05B;
    position: absolute;
    float: left;
    color: #22B05B;
    transition: 0.3s;
}


.arrowLineFooter:hover {
    width: 85px;
    margin-left: 30px;
}


.arrowTextFooter {
    position: absolute;
    margin-left: 10px;
    top: 40px;
}

.carousel-caption {
    text-align: left !important;
    width: 40% !important;
    margin-left: 0 !important;
    margin-top: 60px !important;
}

.carousel-caption h3 {
    font-size: 4em !important;
    font-weight: bold !important;
    margin-bottom: 50px !important;

}
@media (max-width:767px) {

    .carousel-caption h3 {
        font-size: 2em !important;
    }    
}

.carousel-caption p {

    font-size: 1.6em !important;
}

#SliderSocialMedia {
    position: absolute;
    bottom: -45px;
    right: 0;
    z-index: 16;
    /* width: 376px; */
    margin: auto;
    height: 125px;
    text-align: -webkit-center;
}

#SliderSocialMedia>div {
    float: left;
    filter: brightness(0) invert(1);
    padding-left: 15px
}

#SliderSocialMedia>div:hover {
    cursor: pointer;
    filter: brightness(1) invert(0);
}


@media (max-width: 1250px) {

    #footer h3 {
        margin-left: initial !important;
        text-align: center !important
    }
}

.modal-body .row {
    margin-bottom: 10px !important;
}

.modal-body label {
    margin: 0;
    color: #151515;
    font-size: 14px;
    font-weight: bolder;
}

.modal-body p {
    margin: 0;
}