@import url('./fonts/stylesheet.css');

html {

    scroll-behavior: smooth

}



body {

    padding: 0;

    margin: 0;

    font-family: Gilroy, sans-serif;

    font-size: 16px

}



*, ::after, ::before {

    box-sizing: border-box;

}



a,

a:hover {

    text-decoration: none

}



button{

    border: none;

    padding: 0px;

}



ul{

    margin: 0;

    padding: 0;

    list-style: none;

}



.themeRow {

    width: 100%;

    float: left

}



.themeContainer {

    width: 100%;

    margin: 0 auto;

    max-width: 1170px

}



input, .form-select{

    outline: none;

}



ul::-webkit-scrollbar{

    width: 7px;

    border-radius: 10px;

}



ul::-webkit-scrollbar-track{

    background: #1ad5975e;

    border-radius: 10px;

}



ul::-webkit-scrollbar-thumb{

    background: #1AD598;

    border-radius: 10px;

}



ul::-webkit-scrollbar-thumb:hover{

    background: #0fa372;

}





#headerBar{

    background: #292544;

    width: 100%;

    display: flex;

}



.headerTopBar{

    width: 100%;

    float: left;

    padding: 15px 0;

}

.headerInfo{

    display: flex;

    align-items: center;

    float: left;

}

.infoBox img{

}

.infoBox{

    background: #322f48;

    display: flex;

    align-items: center;

    border-radius: 100px;

    padding: 9px 10px;

    margin-right: 10px;

}

.infoBox:last-child{margin-right: 0;}

.infoBox p{

    display: flex;

    flex-direction: column;

    color: #ffffff;

    font-weight: 400;

    font-size: 12px;

    margin: 0;

    line-height: 18px;

}

.infoBox a{

    font-size: 20px;

    color: #ffffff;

}

.infoBox a span{

    font-weight: 600;

}

.infoImg{

    width: 30px; 

    height: 30px; 

    margin-right: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 100%;

}

.infoImg.whatsapp{

    background: #0a7d3c;

}

.infoImg.email{

    background: #5d93da;

}

.headerOrder{

    display: flex;

    align-items: center;

    float: right;

    margin-top: 5px;

}

.orderBox{

    display: flex;

    align-items: center;

    font-size: 14px;

    color: #ffffff;

    font-weight: 600;

    background: #68acff;

    padding: 12px 10px;

    margin:0;

}

.orderBox img{margin-right: 10px;}

.orderBox p{

    color: white;

}

.orderBox a{}

.orderBox a span{}

.orderSearch{

    position: relative;

}

.orderSearch input{

    background: #322f48;

    border: 0px;

    height: 45px;

    text-indent: 10px;

    font-size: 14px;

    color: #ffffff;

    font-weight: 600;

}

.orderSearch input::placeholder{color: #ffffff;}

.orderSearch button{

    position: absolute;

    right: 0;

    bottom: 0;

    top: 0;

    width: 40px;

    border: 0;

    cursor: pointer;

    background: none;

}



.orderSearch input:focus,.orderSearch input:active{

    background:#322f48;

    box-shadow:none;

    border:0px;

}



.orderSearch input.nonshake{border-radius: 0px!important;background: #000!important;}



.orderSearch button img{}



#footerBar{

    background: #121325;

    width: 100%;

    display: flex;

    margin-top: 20px;

}



.footerLink{

    float: left;

    display: flex;

    align-items: center;

    padding: 17px 0 16px 0;

}

.footerLink a{

    display: flex;

    align-items: center;

    border: 1px solid #23243e;

    padding: 0px 22px;

    line-height: 50px;

    margin-right: 10px;

    color: white;

    border-radius: 5px;

    font-weight: 500;

    font-size: 14px;

    transition: .3s ease;

}

.footerLink a:hover{background: #23243e;}

.footerLink a img{

    margin-right: 10px;

}

.footerLogo{

    float: right;

    display: flex;

    align-items: center;

    justify-content: center;

    height: 85px;

}

.footerLogo img{width: 100%;}



.footerBg{

    background: #23243e;

    width: 100%;

    max-width: 300px;

    float: right;

}



#footer{background: #18192f;border-top: 1px solid #4d4e61;width: 100%; display: flex;}



#footer .themeContainer{height: 100%;}



.menuFooter{

    float: left;

    display: flex;

    flex-direction: column;

}

.menuFooter span{

    color: #1e93ff;

    font-weight: 500;

    margin-bottom: 15px;

    line-height: 15px;

}

.menuFooter span:before{

    content: "";

    width: 17px;

    height: 7px;

    background: #1e93ff;

    display: block;

    border-radius: 5px;

    float: left;

    margin-top: 4px;

    margin-right: 4px;

}

.menuFooter ul{

    display: flex;

    flex-direction: column;

}

.menuFooter ul li{margin-bottom: 15px;display: flex;}

.menuFooter ul li a{

    color: #ccccdd;

    font-size: 12px;

    font-weight: 400;

    transition: .3s ease;

    line-height: 14px;

}

.menuFooter ul li a:hover{

    color: #1e93ff;

}

.menuFooter ul li a:before{

    content: "";

    width: 5px;

    height: 5px;

    background: #3f4351;

    border-radius: 5px;

    display: block;

    float: left;

    margin-top: 4px;

    margin-right: 3px;

}

.menuFooter ul li a:hover:before{

    background: #1e93ff;

}



.menuContact{

    height: 100%;

    padding: 34px 40px 27px 20px;

}

.menuContact ul{}

.menuContact ul li{margin-bottom: 25px;}

.menuContact ul li a{

    font-size: 16px;

    color: #ffffff;

    display: flex;

    align-items: center;

    line-height: 20px;

}

.menuContact ul li a img{

    margin-right: 20px;

}

.menuContact ul li a span{

    font-weight: 700;

    margin-left: 4px;

}

.menuContact ul li a p{margin:0px;}



.socialMedia{display: flex;align-items: center;}

.socialMedia a{

    display: flex;

    align-items: center;

    justify-content: center;

    width: 42px;

    height: 42px;

    background: #18192f;

    border-radius: 5px;

    margin-right: 15px;

    color: white;

    font-size: 20px;

    transition: .3s ease-in-out;

}

.socialMedia a:hover{background: black;}

.socialMedia a img{}



#copyright{

    border-top: 1px solid #4d4e61;

    background: #18192f;

    width: 100%;

    display: flex;

}

.copyright{

    display: flex;

    align-items: center;

    justify-content: space-between;

    height: 60px;

}

.copyright span{

    color: #ffffff;

    font-size: 14px;

    font-weight: 400;

}

.copyImg{

    height: 60px;

    display: flex;

    align-items: center;

    justify-content: center;

}

.copyImg img{}





.commentbarsection {
    width: 100%;
    margin-top: 30px;
    overflow: hidden;
    padding-top: 40px;
}

.commentbarsection .area {
    float: left;
    width: 100%;
    /* background: #292544; */
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    padding-top: 25px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 60px;
    position: relative;
}
/*
.commentbarsection .area::after {
    content: "";
    background: #1BBDE4;
    height: 100%;
    width: 100vh;
    position: absolute;
    left: 100%;
    top: 0;
}
*/
.commentbarsection .bcicon {
    /* background: #1e93ff; */
    /* width: 80px; */
    /* height: 80px; */
    /* border-radius: 50%; */
    /* position: absolute; */
    /* top: -40px; */
    /* left: calc(50% - 40px); */
    text-align: center;
    /* line-height: 80px; */
    color: #4b4b4b;
    /* font-size: 30px; */
}

.commentbarsection .commentcreate h4 {
    float: left;
    width: 100%;
    color: #fff;
    font-weight: 500;
    font-size: 22px;
    margin-bottom: 19px;
}

.commentbarsection .commentcreate {
    float: left;
    width: 100%;
}

.commentcreate .form {
    float: left;
    width: 100%;
    padding: 20px;
    background: #FFFFFF;
    border-radius: 8px;
}

.commentcreate .form h5 {
    float: left;
    width: 100%;
    color: #1e93ff;
    font-weight: 600;
    font-size: 19px;
    position: relative;
    padding-left: 30px;
    margin-bottom: 20px;
}

.commentcreate .form h5::before {
    content: "";
    background: url(../img/icon/commentcreateicon.svg);
    width: 18px;
    height: 18px;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    top: 3px;
}

.commentcreate .form .input {
    float: left;
    width: 100%;
    position: relative;
    margin-bottom: 12px;
}

.commentcreate .form .input input {
    float: left;
    width: 100%;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #D0D8E8;
    padding: 15px 15px;
    color: #211E20;
    font-weight: 500;
    padding-left: 45px;
}

.commentcreate .form .input textarea {
    float: left;
    width: 100%;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #D0D8E8;
    padding: 13px 15px;
    color: #211E20;
    font-weight: 500;
    padding-left: 45px;
    min-height: 160px;
    max-height: 230px;
    margin-bottom: 10px;
}

.commentcreate .form .input input::placeholder {
    color: #211E20;
    font-size: 15px;
}

.commentcreate .form .input.user::before {
    content: "\f21b";
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    font-size: 20px;
    margin-right: 12px;
    color: #D0D8E8;
    left: 17px;
    top: 12px;
    position: absolute;
}

.commentcreate .form .input.message::before {
    content: "\f086";
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    font-size: 17px;
    margin-right: 12px;
    color: #D0D8E8;
    left: 17px;
    top: 14px;
    position: absolute;
}

.commentcreate .form button {
    float: right;
    width: 27%;
    background: #1e93ff;
    border: 0;
    color: #fff;
    border-radius: 8px;
    padding: 13px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 18px;
    /* margin-bottom: -50px; */
    position: relative;
    transition: all 0.6s;
}

.commentcreate .form button::after {
    content: "\f178";
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    font-size: 20px;
    margin-right: 12px;
    color: #fff;
    right: 4px;
    position: absolute;
}

.commentcreate .form button:hover {
    background: #0e65b5;
}

.commentcreate .puan {
    float: left;
    width: 100%;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #D0D8E8;
    padding: 15px 15px;
    color: #211E20;
    font-weight: 500;
    padding-left: 15px;
}

.commentcreate .puan::before {
    /* content: "\f005"; */
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    font-size: 17px;
    margin-right: 12px;
    color: #D0D8E8;
    left: 17px;
    top: 14px;
    position: absolute;
}

.rating label {
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
}

.rating label:last-child {
    position: static;
}

.rating label:nth-child(1) {
    z-index: 5;
}

.rating label:nth-child(2) {
    z-index: 4;
}

.rating label:nth-child(3) {
    z-index: 3;
}

.rating label:nth-child(4) {
    z-index: 2;
}

.rating label:nth-child(5) {
    z-index: 1;
}

.rating label input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.rating label .icon {
    float: left;
    color: transparent;
    margin-left: 8px;
    cursor: pointer;
}

.rating label:last-child .icon {
    color: #FF6720;
    cursor: pointer;
}

.rating:not(:hover) label input:checked~.icon,
.rating:hover label:hover input~.icon {
    color: #ac3e0b;
    cursor: pointer;
}

.rating {
    display: inline-block;
    position: relative;
    float: left;
    font-size: 22px;
    line-height: 12px;
    margin-top: 5px;
}

.commentlist {
    float: right;
    width: 100%;
    max-width: 550px;
    padding-left: 0;
    max-height:410px;
    overflow: hidden;
    overflow-y: scroll;
    padding-right: 15px;
}
@media (max-width:768px) {
    .commentlist {
        margin-top: 40px;
    }
}

.commentlist::-webkit-scrollbar-track {
    border-radius: 5px;
    width: 100%;
    height: 100%;
}

.commentlist::-webkit-scrollbar {
    width: 4px;
    border-radius: 5px;
    background-color: #ffffff4b;
}

.commentlist::-webkit-scrollbar-thumb {
    border-radius: 100px;
    background-color: #FFFFFF;
    height: 5px;
}

.commentitem {
    float: left;
    width: 100%;
    /* background: #fff; */
    /* border-radius: 8px; */
    padding: 15px;
    /* box-shadow: 0px 0px 5px rgba(13, 18, 31, 0.048); */
    /* margin-bottom: 18px; */
    border-bottom: 1px solid #00000042;
}

.commentitem .hdtop {
    float: left;
    width: 100%;
    border-bottom: 0;
    padding: 0;
    margin-top: 8px;
}

.commentitem .user {
    float: left;
    width: 60%;
}

.commentitem .user img {
    float: left;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
}

.commentitem .user .info {
    float: left;
    width: calc(100% - 45px);
}

.commentitem .user .info h6 {
    float: left;
    width: 100%;
    margin-bottom: 0;
    color: #2B3339;
    font-size: 18px;
    font-weight: 600;
}

.commentitem .user .info span {
    font-size: 14px;
}

.commentitem .starlist {
    float: right;
    width: 40%;
    margin-top: 10px;
}

.commentitem .starlist i {
    float: right;
    color: #2acf8f;
    font-size: 15px;
    margin-left: 5px;
}

.commentitem p {
    float: left;
    width: 100%;
    margin-bottom: 0;
    font-weight: normal;
    color: #717C91;
    margin-top: 20px;
}

@keyframes color-slide {
    0% {
      background-color: rgba(13, 84, 255, 0.95);
      background-position: 200% 0;
    }
    100% {
      background-color: rgb(61, 120, 255);
      background-position: 0 0;
    }
  }

  .whitecolor{
    /* color: white; */
  }
  .owl-carousel22 .owl-item img {
    filter: brightness(0.1);
   transition: 0.3s all ease;
}
  .owl-carousel22 .owl-item img:hover {
    filter: brightness(1);
      transition: 0.3s all ease;
}
.owl-carousel22.owl-drag .owl-item {
    background: white;
    padding: 1.3rem;
    border-radius: 1rem;
}
.flexdd{
    padding-top: 2rem;
    padding-bottom: 1rem;

}
.flexdd .btn-pack-buy {
    color: #fff !important;
    font-weight: 500;
    font-size: 14px;
    transition: .2s;
    padding: 7px 10px;
    margin: 0 auto;
    margin-bottom: 15px;
    background: unset;
    box-shadow: unset;
    border-radius: 50px;
}
.flexdd .active.btn-pack-buy,.flexdd .btn-pack-buy:hover {

   
       background: white;
    box-shadow: 0px 4px 20px white;
 
}
.kaNePe{background: white;padding: 1rem 1rem;display: flex;align-content: center;justify-content: center;align-items: center;flex-wrap: nowrap;gap: 25px;}

.kaNe{
display: flex;
    flex-direction: column;
    gap: 15px;
}
.commentlist::-webkit-scrollbar {
    background-color: #1e93ff;
}
@keyframes leaves{0%{transform:scale(1)}100%{transform:scale(.3)}}section.features .title{color:#19203f;font-size:24px;font-weight:600;margin-bottom:30px}section.features .item{margin-bottom: 20px; box-shadow: -9px 9px 49px rgba(41,46,55,.15); border-radius: 2px; background-color: #fff; display: flex; align-items: center; justify-content: start; flex-direction: column; padding: 30px 20px 20px; padding-top: 0; border-radius: 20px; height: auto;}section.features .item span.icon{margin-top: -65px; width: 100px; height: 110px; font-size: 26px; color: #fff; /* background: #455ee0; */ border-radius: 100%; display: flex; align-items: center; justify-content: center; position: relative; font-weight: 400;}section.features .item span.icon i{font-weight:400}section.features .item span.icon:before{background:url(../img/spaniconback.png) center center no-repeat;width:114px;height:114px;content:"";position:absolute;opacity:.9}section.features .item span.name{margin-top: 0px; color: #000; font-size: 18px; font-weight: 800; margin-bottom: 16px;}section.features .item p{color:#333341;font-size:16px;font-weight:400;text-align:center;line-height:1.3;padding-left:24px;padding-right:24px}@media (min-width:1200px){.col-xl-25{flex:0 0 auto;width:20%}}@media (max-width:991px){section.features .item{margin-bottom:100px;height:auto}}@media (max-width:576px){section.features .item{margin-bottom:70px;height:auto}
section.features .item span.icon {
margin-top: -43px;
width: 90px;
height: 90px;
}
section.features .item p {
font-size: 12px;
padding-left: 0px;
padding-right: 0px;
}
section.features .item span.name {
margin-top: 0px;
color: #000;
font-size: 16px;
font-weight: 800;
    text-align: center;
margin-bottom: 10px;
}
section.features .item {
margin-bottom: 55px;
}
}

.w-70{width: 70%}
.w-30{width: 30%}
.dflx .w-70 p{
color: white;
opacity: 1;
text-align: left;
font-size: 16px;
}
.ixxxa {
    background: #1f84d3;
    padding: 1rem;
    border-radius: 50%;
    width: 70px;
    height: 65px;
    display: flex;
    color: white!important;
    align-items: center;
    justify-content: center;
    align-content: center;
    position: relative;
}

.ixxxa:after{
        content: "";
    background: #1f84d3;
    position: absolute;
    height: 75px;
    width: 8px;
    bottom: -65px;
}
.son .ixxxa:after{
        content: unset;
}
.dflx{
    display: flex;
        gap: 75px;
           
    padding: 2rem;
    border-radius: 20px;
        align-content: center;
    justify-content: center;
    align-items: center;
}
.w-70{width: 70%}
.w-30{width: 30%}
.dflx .w-70 p{
        margin: 0;
    color: #63677d;
    opacity: 1;
    text-align: left;
    font-size: 16px;
        word-break: break-word;
}

.w100{
   aspect-ratio: 16 / 9;
  width: 100%;
}

.dfff{
        display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.dflx .w-70 h2{
    color: #63677d;
    opacity: 1;
    font-size: 19px;
    text-align: left;
    word-break: break-word;
}
.dflx .w-70 ul {
    list-style: auto;
    padding-left: 15px;
}
.dflx .w-70 ul li{
    color: #63677d;
    opacity: 1;
    text-align: left;
        word-break: break-word;
}
.dflx .w-70 a{
    color: #63677d;
    opacity: 1;
    text-align: left;
        word-break: break-word;
}

@media only screen and (max-width: 768px) {

.ixxxa {;
    width: 55px;
    height: 50px;
    }
    .ixxxa:after {
    content: "";
    background: #1f84d3;
    position: absolute;
    height: 115px;
    width: 8px;
    bottom: -115px;
}
.dflx {
   flex-direction: column;
    gap: 15px;
}
.w-70 {
    width: 100%;
}
.w-30 {
    width: 100%;
}
}