:root {
    --font-size: 14px;
    --font-size-medium: 16px;
    --btn-font-size: 16px;
    --bg-column: #fbf9f4;
    --bg-main: #65306b;
    --bg-main-hover: #3b0c40;
    --bg-color: #65306b;
    --bg-color-light: #cb79d3;
    --bg-color-hover: #a940b3;
    --bg-btn-color: #65306b;
    --bg-btn-color-hover: #012c6a;
    --bg-btn-info: #128ced;
    --bg-greem: #266a57;
    --text-color: #65306b;
    --text-color-hover: #3b0c40;
    --text-info: #030405;
    --text-yellow: #f0c100;
    --text-greem: #266a57;
    --tw-gradient-stops: #266a57, #36a873;
    --tw-gradient-stops-hover: #0c4e2f, #278e5e;
}

body,
ul,
li {
    margin: 0;
    padding: 0;
    list-style: none;
}

body {
    font: 400 var(--font-size)/21px 'Nunito', Helvetica, Arial, sans-senif;
    background: #fff;
    line-height: 26px;
    color: #000;
}

a,
a:focus,
a:visited,
a:active {
    text-decoration: none;
    color: #000;
    cursor: pointer;
}

a:hover {
    cursor: pointer;
    color: var(--bg-color);
    text-decoration: none;
    -webkit-transition: all .4s ease 0s;
    transition: all .4s ease 0s
}

img {
    max-width: 100%
}

.cursor-pointer {
    cursor: pointer;
}

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

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

.bg-yellow {
    background: var(--bg-main);
}

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

.relative {
    position: relative;
}

.btn-custom {
    background-image: linear-gradient(to left, var(--tw-gradient-stops));
    border: none;
    color: #fff !important;
    border-radius: 30px;
    font-size: var(--btn-font-size);
    padding: 12px 40px 12px 16px;

    position: relative;

    & i {
        transition: all .4s ease 0s;
        position: absolute;
		top: 16px;
    }

    &:hover,
    :active,
    :focus {
        background-image: linear-gradient(to left, var(--tw-gradient-stops-hover));

        & i {
            margin-left: .75rem !important;
        }
    }
}

/* header */
.header {
    & .mainSeach {
        /* font-family: "Roboto Slab"; */

        & .form-search {
            position: relative;
            min-width: 240px;

            & .text {
                width: 100%;
                position: relative;
                background: transparent;

                & input {
                    height: 40px;
                    font-size: var(--font-size);
                    border: 1px solid #deede6;
                    background-color: #fdfcfc;
                    border-radius: 7px;

                    &:focus,
                    :active,
                    :visited {
                        outline: none;
                        box-shadow: 0 0 0 .25rem rgb(203 121 211 / 15%);
                        border: 1px solid var(--bg-color-light);
                    }
                }
            }

            & .buttom {
                position: absolute;
                top: 0;
                right: 0;

                & .btn-search {
                    border: none;
                    background: transparent;
                    color: #fff;
                    height: 40px;
                    padding-left: 10px;
                    padding-right: 10px;
                }
            }
        }
    }

    & .btn-link-buynow {
        background-image: linear-gradient(to left, var(--tw-gradient-stops));
        border: none;
        color: #fff;
        border-radius: 30px;
        font-size: var(--btn-font-size);
        text-transform: uppercase;
        font-weight: bold;
        padding: 6px 16px;
        /* font-family: "Roboto Slab"; */


        &:hover,
        :active,
        :focus {
            background-image: linear-gradient(to left, var(--tw-gradient-stops-hover));


        }

    }

    & .navbar-mobi {
        background-image: linear-gradient(to left, #0dcd98, #266a57);
        overflow: hidden;
        padding: 6px 15px;

        & .form-search {
            min-width: 100px !important;

            & .text {
                opacity: 0;
                transition: all .4s ease 0s;

                & input {
                    height: 36px !important;
                    border: none;
                }
            }

            & .buttom {
                position: absolute;
                top: 0;
                right: 0;
                background: #fff;
                border-radius: 100%;

                & .btn-search {
                    height: 35px !important;
                }
            }
        }

        & .btn-link-buynow {
            font-size: var(--font-size);
            padding: 6px 10px;
			border: 1px solid #35b77b;
            --tw-gradient-stops: #266a57, #0a9f5a;
            --tw-gradient-stops-hover: #0c4e2f, #278e5e;
        }
    }
}

/* menu */
.menu-navigation {

    & .nav {
        position: relative;
        /* font-family: "Roboto Slab"; */

        &>li {
            padding: 15px 26px;
            position: relative;

            &.has-sub::before {
                content: "\f282";
                font: normal normal normal 14px/1 bootstrap-icons;
                position: absolute;
                right: 5px;
                top: 21px;
                color: var(--text-greem);
            }

            &>a {
                font-size: var(--font-size-medium);
                color: var(--text-greem);
            }
			&.active > a{
				font-weight:bold;
			}
            & ul {
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                z-index: 1000;
                min-width: 100%;
                text-align: left;
                list-style: none;
                background-color: var(--bg-column);
                -webkit-background-clip: padding-box;
                background-clip: padding-box;
                border: 1px solid #ccc;
                border: 1px solid rgba(0, 0, 0, .15);
                border-radius: 2px;
                -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, .175);
                box-shadow: 0 3px 3px rgba(0, 0, 0, .175);

                & li {
                    padding: 15px 30px 15px 16px;
                    border-bottom: 1px solid #e3e0d9;
                    position: relative;

                    &:last-child {
                        border-bottom: none
                    }

                    &>ul {
                        left: 100%;
                        top: 0;
                    }

                    & a {
                        white-space: nowrap;
                        font-size: var(--font-size-medium);
                        color: var(--text-greem);
                        display: block;
                    }


                    &.has-sub:after {
                        content: "\f231";
                        font: normal normal normal 14px/1 bootstrap-icons;
                        position: absolute;
                        right: 5px;
                        top: 20px;
                        color: var(--text-greem);
                    }

                    &.has-sub:hover:after {
                        color: #fff;
                    }

                    &:hover {
                        background-color: var(--bg-greem);

                        &>a {
                            color: #fff;
                        }
                    }
                }


            }
        }
    }
}

#owl-slider {
    background-color: #fbf9f4;

    & .item {
        & .caption {
            width: 560px;
            position: absolute;
            right: 15%;
            bottom: 10%;
            background-color: rgba(255, 255, 255, .6);
            backdrop-filter: blur(10px);
            padding: 40px;
            border-radius: 7px;
            font-size: var(--font-size-medium);

            & h2 {
                color: var(--text-greem);
                font-size: calc(var(--font-size) + 6px);
                margin-bottom: 20px;
                font-weight: bold;
            }

            & .btn-custom {
                --tw-gradient-stops: #266a57, #36a873;
                --tw-gradient-stops-hover: #0c4e2f, #278e5e;
            }
        }
    }

    & .owl-dots {
        & .owl-dot {
            background: var(--bg-greem) !important
        }
    }
}

.about {
    color: var(--text-greem);
    font-size: var(--font-size-medium);
    line-height: 30px;

    & h4 {
        font-size: calc(var(--font-size) + 6px);
        margin-bottom: 30px;
        font-weight: bold;
    }
}

.certificates {
    background-color: var(--bg-column);

    & .title {
        color: var(--text-greem);
        font-size: calc(var(--font-size) + 10px);
        margin-bottom: 30px;
        font-weight: bold;
    }

    & .overlay-images {
        background-color: transparent;
        margin-bottom: 5px;

        & .images {
            border: none;
        }
    }

    & .btn-custom {
        --tw-gradient-stops: #266a57, #36a873;
        --tw-gradient-stops-hover: #0c4e2f, #278e5e;
    }

    & .owl-dots {
        bottom: -32px !important;

        & .owl-dot {
            background-color: var(--bg-greem) !important;
        }
    }
}

.categories {
    background-color: var(--bg-column);

    & .title {
        color: var(--text-greem);
        font-size: calc(var(--font-size) + 10px);
        margin-bottom: 30px;
        font-weight: bold;
    }

    & .card {
        padding: 25px 30px;

        & .images {
            border: none;
            -webkit-transform: scale(1);
            transform: scale(1);
            -webkit-transition: .5s ease-in-out !important;
            transition: .5s ease-in-out !important
        }

        & .card-title {
            & a {
                color: var(--text-greem);
                font-size: calc(var(--font-size) + 4px);

                & i {
                    transition: all .4s ease 0s;
                }
            }
        }

        &:hover {
            & .images {
                -webkit-transform: scale(1.1);
                transform: scale(1.1)
            }

            & .card-title {
                & i {
                    margin-left: .75rem !important;
                }
            }
        }

    }
}

.knowledge {
    & .item {
        font-size: var(--font-size-medium);
        line-height: 26px;
        color: var(--text-greem);

        &:nth-child(2n+2) {
            background-color: var(--bg-column);
        }

        & .images {
            border: none
        }

        & .title {
            font-size: calc(var(--font-size) + 10px);
            line-height: 32px;
            margin-bottom: 20px;
            font-weight: bold;
        }
    }
}

/* box news */
.box-news {
    & .title {
        color: var(--text-greem);
        font-size: calc(var(--font-size) + 10px);
        margin-bottom: 30px;
        font-weight: bold;
    }

    & .item-news {
        background-color: var(--bg-column);

        &.top-news {
            color: var(--text-greem);
        }

        & h3.name {
            line-height: 20px;

            & a {
                color: var(--text-greem);
                font-size: var(--font-size);
                font-weight: bold;
            }
        }

        & .timer {
            font-size: calc(var(--font-size) - 2px);
            color: #333;
            font-style: italic;
            margin-bottom: 0;
        }

        & .box-images {
            & .images {
				border: none;
				background:#fff;
				background-repeat: no-repeat;
                background-position: center;
                -webkit-transform: scale(1);
                transform: scale(1);
                -webkit-transition: .5s ease-in-out !important;
                transition: .5s ease-in-out !important;
            }
        }

        &.top-news {
            h3.name a {
                font-size: var(--font-size-medium);

            }
        }

        &:hover {
            & .images {
                -webkit-transform: scale(1.1);
                transform: scale(1.1);
            }
        }
    }
}

/* box news */
.products {
    background-color: var(--bg-column);

    & .title {
        color: var(--text-greem);
        font-size: calc(var(--font-size) + 10px);
        margin-bottom: 30px;
		font-weight: bold;
    }

    & .card {
        padding: 25px;

        & .image {
            border: none;
            -webkit-transform: scale(1);
            transform: scale(1);
            -webkit-transition: .5s ease-in-out !important;
            transition: .5s ease-in-out !important
        }

        & .card-title {
            text-align: center;
			margin-top:15px;
			margin-bottom: 0;
            & a {
                color: var(--text-greem);
                font-size: var(--font-size-medium);
            }
        }

        &:hover {
            & .image {
                -webkit-transform: scale(1.1);
                transform: scale(1.1)
            }
        }

    }
}

.footer {
    background-color: #fbf6e7;

    & .info {
        color: var(--text-greem);
        line-height: 26px;

        & .company-name,
        h3 {
            font-size: calc(var(--font-size) + 4px);
            margin-bottom: 15px;
            font-weight: bold;
			line-height: 28px;
        }

        & p {
            margin-bottom: 10px;
        }
    }

    & .form-newsletter {
        position: relative;

        & button {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            font-size: 28px;
            background-color: transparent;
            border: none;
            color: var(--bg-greem);
        }
		& input{
			 padding-left: 50px;
			 border-radius: 7px;
			 font-size: var(--font-size);
		}
        & input:not(.is-invalid) {
            height: 40px;
            border: 1px solid #6fdaa8;
            background-color: #fdfcfc;
            &:focus,
            :active,
            :visited {
                outline: none;
                box-shadow: 0 0 0 .25rem rgb(25 135 84 / 15%);
                border: 1px solid var(--bg-greem);
            }
        }
		& .has-invalid {
			& button{
				color: #dc3545!important;
			}
		}
		& .email_err {
			position: absolute;
			top: 106%;
			text-align: left;
			color: #ca424f;
			left: 0;
			min-width: 100%;
			background: #f8d7da;
			padding: 5px 10px;
			border: 2px solid #f5c6cb;
			border-radius: 3px;
		}
    }

    & .copyright {
        background-color: #f2e4b9;
        color: var(--text-greem);
        text-align: center;
        padding: 15px;

    }
}
.pages-content{
	background-color: var(--bg-column);
	color: var(--text-greem);
	& .content-header, .content-footer{
		& table{
			background-color:#fff;
			color: var(--bg-greem);
			width:100%!important;
			margin-top:15px;
			& p:last-child{
				margin-bottom:0
			}
			& > :not(caption) > * > *{
				padding:.75rem;
			}
			& tr:nth-child(2n+1){
				background-color: #deede6;
			}
			& img{
				margin-bottom:0!important;
				width:auto!important;
			}
			& tr{
				& td{vertical-align:middle}
			}
		}
		& img:not(.item-gallery){
			margin-bottom:20px;
			width:100%
		}
		& ul, ol{
			padding-left:30px;
			& li{
				margin-bottom:10px;
			}
		}
		& ul{
			& li{
				list-style: disc;
			}
		}
		& ol{
			& li{
				list-style: decimal;
			}
		}
		& h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1{
			font-weight:bold;
		}
		& h2{font-size: calc(var(--font-size) + 6px);}
		& h3{font-size: calc(var(--font-size) + 4px);}
		& h4{font-size: calc(var(--font-size) + 2px);}
		& h5{font-size: var(--font-size);}
		& h6{font-size: var(--font-size);}
		& a{color: var(--text-greem);font-size: initial;}
	}
	& .content-header{
		font-size:var(--font-size-medium);
		& .title{
			 font-size: calc(var(--font-size) + 10px);
			 margin-bottom: 15px;
             font-weight: bold;
		}
	}
	& .content-footer{
		background-color:#fff;
		font-size:var(--font-size-medium);
		& .title{
			 font-size: calc(var(--font-size) + 10px);
			 margin-bottom: 15px;
             font-weight: bold;
		}
		& .category-footer-box{
			& .caption {
				background-color: var(--bg-column);
				padding:15px;
				border-radius:7px;
				& .title{
					 font-size: calc(var(--font-size) + 2px);
				}
			}
		}
	}
	& p{
		margin-bottom:10px;
	}
	& .sticky-top {
		top: 20px;
	}
	& .list-news{
		& .title{
			font-size: calc(var(--font-size) + 10px);
			 margin-bottom: 30px;
             font-weight: bold;
		}
		& .box-news{
			background: transparent;
			& .name{
				font-size: calc(var(--font-size) + 4px);
				font-weight:bold;
				color: var(--text-greem);
				
			}
			& .overview{
				font-size: calc(var(--font-size) + 2px);
				margin-top: 15px;
			}
		}
	}
	& .form-contact{
		& .title{
			font-size: calc(var(--font-size) + 10px);
			 margin-bottom: 30px;
             font-weight: bold;
		}
		& .form-group{
			margin-bottom:15px;
			& input{
				padding: 10px;
				color: var(--text-greem);
				&:focus,
				:active,
				:visited {
					 outline: none;
					box-shadow: 0 0 0 .25rem rgb(25 135 84 / 15%);
					border: 1px solid var(--bg-greem);
				}
			}
		}
		& .btn-custom  {
			--tw-gradient-stops: #266a57, #36a873;
			--tw-gradient-stops-hover: #0c4e2f, #278e5e;
		}
		
	}
	& .product-info{
		font-size: var(--font-size-medium);
		& h1{
			font-size: calc(var(--font-size) + 12px);
			line-height: 36px;
		}
		& .btn-link-buynow {
			background-image: linear-gradient(to left, var(--tw-gradient-stops));
			border: none;
			color: #fff;
			border-radius: 30px;
			font-size: var(--btn-font-size);
			text-transform: uppercase;
			font-weight: bold;
			padding: 6px 16px;
			/* font-family: "Roboto Slab"; */


			&:hover,
			:active,
			:focus {
				background-image: linear-gradient(to left, var(--tw-gradient-stops-hover));


			}

		}
		& .accordion{
			--bs-accordion-bg:transparent;
			--bs-accordion-active-color:var(--text-greem);
			--bs-accordion-bg:transparent;
			--bs-accordion-active-bg:transparent;
			--bs-accordion-border-color:rgba(11, 87, 64,.08);
			& .accordion-item{
				border-left:0;
				border-right:0;
				border-radius: 0;
				& .accordion-button {
					color: var(--text-greem);
					box-shadow: none;
					font-weight:bold;
					padding-left:0;
					padding-right:0;
					&:focus,
					:active,
					:visited{
						box-shadow: none;
					}
					&:after{
						content: "\f282";
						font-family: bootstrap-icons;
						background-image:none;
					}
					& .icon-accordion{
						fill:var(--bg-greem);
						margin-right:12px;
					}
				}
			}
			& .accordion-body{
				color: var(--text-greem);
				padding-left:0;
				padding-right:0;
				& table{
					& td{
						vertical-align:middle;
					}
				}
				& .btn-custom {
					--tw-gradient-stops: #266a57, #36a873;
					--tw-gradient-stops-hover: #0c4e2f, #278e5e;
					padding: 10px 40px 10px 16px;
					& i {
						top: 14px;
					}
				}
			}
		}
	}
	& .pagination {
		--bs-pagination-color:var(--bg-greem);
		--bs-pagination-active-border-color:var(--bg-greem);
		--bs-pagination-hover-color:var(--bg-greem);
		--bs-pagination-active-bg:var(--bg-greem);
		& .page-link{
			& i.bi{
				padding: 5px 0;
				display: block;
			}
		}
		& .page-item{
			&:not(.disabled){
				& .page-link{
					color: var(--bs-pagination-color)!important;
				}
			}
			&.active{
				& .page-link{
					color: #fff!important;
				}
			}
		}
		
	}
}
.overlay-images {
    overflow: hidden
}

.overlay-images .images {
    border: 1px solid #ddd;
    border-radius: 3px;
    -moz-transition: all .4s ease-out;
    -o-transition: all .4s ease-out;
    -webkit-transition: all .4s ease-out;
    -ms-transition: all .4s ease-out;
    transition: all .4s ease-out;
    -webkit-backface-visibility: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
    padding-top: 100%
}

.owl-navi .owl-prev {
    left: 10px;
    top: 50%;
    margin-top: -25px;
    text-indent: 1px !important;
    color: transparent;
    position: absolute
}

.owl-navi .owl-next {
    right: 10px;
    top: 50%;
    margin-top: -25px;
    text-indent: 1px !important;
    color: transparent;
    width: 30px !important;
    position: absolute
}

.owl-navi .owl-prev:before {
    content: "";
    background: url("../images/pre.png") no-repeat center center;
    width: 25px;
    height: 51px;
    display: block
}

.owl-navi .owl-next:before {
    content: "";
    background: url("../images/next.png") no-repeat center center;
    width: 25px;
    height: 51px;
    display: block
}

.owl-navi .owl-dots,
.nav-dots .owl-dots {
    position: absolute;
    bottom: 10px;
    right: 0;
    width: 100%;
    text-align: center;
}

.owl-navi .owl-dots .owl-dot,
.nav-dots .owl-dots .owl-dot {
    width: 10px;
    height: 10px;
    background: var(--bg-main);
    display: inline-block;
    margin-left: 5px;
    border-radius: 15px;
    transition: all .3s;
}

.owl-navi .owl-dots .owl-dot.active,
.nav-dots .owl-dots .owl-dot.active {
    background: var(--bg-main);
    width: 30px;
}

.owl-navi .disabled {
    background: #ddd !important;
    opacity: .9
}

#goTop {
    position: fixed;
    bottom: 20px;
    right: 10px;
    cursor: pointer;
    display: none;
    z-index: 10000;
    background: var(--bg-greem);
    border-radius: 50%;
    font-size: 36px;
    color: #fff;
}
/*Loading*/
#loading{position:fixed;background: rgba(255,255,255,.7);background-attachment:fixed;top:0;left:0;bottom:0;right:0;z-index:99999}
.loading{position:absolute;left:50%;top:50%;margin-top:-31px;margin-left:-31px;border-bottom:2px solid rgba(0,0,0,0.1);border-left:2px solid rgba(0,0,0,0.1);border-right:2px solid rgba(0,0,0,0.1);border-top:2px solid red;border-radius:100%;height:50px;width:50px;animation:rot .6s infinite linear}
.embed-responsive {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden
}

.embed-responsive::before {
    display: block;
    content: ""
}

.embed-responsive .embed-responsive-item,
.embed-responsive embed,
.embed-responsive iframe,
.embed-responsive object,
.embed-responsive video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0
}

.embed-responsive-21by9::before {
    padding-top: 48%
}

.embed-responsive-16by9::before {
    padding-top: 56.25%
}

.embed-responsive-4by3::before {
    padding-top: 75%
}

.embed-responsive-1by1::before {
    padding-top: 100%
}
.close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
}
button.close {
    padding: 0;
    background-color: transparent;
    border: 0;
    -webkit-appearance: none;
}
.close:not(:disabled):not(.disabled)
 {
    cursor: pointer;
}

.modal-header .close {
    padding: 1rem;
    margin: -1rem -1rem -1rem auto;
}
.animatable {
    /* initially hide animatable objects */
    visibility: hidden;

    /* initially pause animatable objects their animations */
    animation-play-state: paused;
}

/* show objects being animated */
.animated {
    visibility: visible;

    animation-fill-mode: both;
    animation-duration: 1s;
    animation-play-state: running;
}

@keyframes rot{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}@-webkit-keyframes rot{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}
@keyframes moveUp {
    0% {
        transform: translateY(40px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes fadeBgColor {

    0%,
    70% {
        background: none;
    }

    100% {
        background: #464646;
    }
}

.animated.animationDelay {
    animation-delay: 0.4s;
}

.animated.animationDelayMed {
    animation-delay: 1.2s;
}

.animated.animationDelayLong {
    animation-delay: 1.6s;
}

.animated.fadeBgColor {
    animation-name: fadeBgColor;
}

.animated.moveUp {
    animation-name: moveUp;
}