@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo+Black&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');


@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo+Black&family=Geologica:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

html, body {
    position: relative;
    height: 100%;
}

body {
    /* background: #fff; */
    font-family: "Roboto", serif;
    font-size: 14px;
    color:#000;
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none;
}
button{
    box-shadow: none;
    outline: none;
}
button:focus {
    box-shadow: none !important;
    outline: none !important;
}
p,
a,
li,
h4,
h2,
h5
    {
        font-family:"Roboto", serif;
        font-style:normal;
      }
      h1,h3{
        /* font-family: "Anton", serif;
        font-weight: 400;
        font-style: normal; */
        /* font-family: "Archivo Black", serif; */
        font-weight: 400;
        font-style: normal;
      }
      p{
        font-size: 16px;
      }
      .smallheading{
        font-size: 1.5rem;
        }
      h1{
font-size: 3.5rem;
      }
      h3{
        font-size: 2rem;
              }
.container{
  max-width: 1280px;
  margin: 0 auto;
  height: 100%;
}
img{
    max-width: 100%;
}
.coverbgimg{
width: 100%;
position: relative;
height: 100%;
object-fit: cover;
background-position: center center;
background-size: cover;
}
a{
    color: var(--primarycolor);
}
.nav-link:focus, .nav-link:hover {
    color: var(--primarycolor);
  }
 ul{
    position: relative;
    list-style: none;
    text-decoration: none;
    }
    :root {
        --primarycolor: #00c4f4;
        --lightcolor: #fff;
        --darkcolor: #303030;
        --blackcolor: #000000;
        --whitecolor: #fff;
        --bordercolor: #b0b0b0;
        --border-dark-color:#494949;
        }
        :root {
            --header-primarycolor: #00c4f4;
            --header-lightcolor: #fff;
            --header-darkcolor: #303030;
            --header-whitecolor: #fff;
            --header-bordercolor: #b0b0b0;
            --header-border-dark-color:#494949;
            }
        :root {
            --footer-primarycolor: #00c4f4;
            --footer-lightcolor: #fff;
            --footer-darkcolor: #303030;
            --footer-whitecolor: #fff;
            --footer-bordercolor: #b0b0b0;
            --footer-border-dark-color:#494949;
            }
/*========== header ==========*/
.header_topbg{
    position: relative;
    width: 100%;
    background: #714425;
}
.header_topbg .nav{
    align-items: center;
    padding: 10px 0px;
}
.header_topbg .nav-item .nav-link{
color: var(--whitecolor);
}
.header_topbg .nav-item .nav-link i{
    padding: 0 10px;
    }
    .header_topbg p i{
        padding: 0 10px;
        }
        .header_topbg p {
      color: #fff;
            }
.socialtop .nav-link{
font-size: 22px;
}
.socialtop .nav-link:hover{
opacity: 0.7;
}

/*-----------------------------------------------*/

header nav{
background: #030B15;
border-bottom: 2px solid #303030;
border-bottom: 1px solid #2e2e2e;
position: relative;
}
header nav .navbar-collapse{

}
header nav{

}
header nav .navbar-brand {
    filter: none !important;
}
header nav .nav-link{
color:#ffffff !important;
font-size: 18px;
font-weight: 600;
line-height: 22px;
}
header nav .nav-link:hover{
    color: #00C4F4 !important;
}
header nav .navbar-nav{
gap: 0 20px;
}
header .navbar-toggler{
background: var(--header-whitecolor);
border: 1px solid  var(--header-bordercolor);
padding: 2px 4px;
}
header .navbar-toggler svg{
fill: var(--header-darkcolor);
width: 30px;
height: 30px;
}

header nav .navbar-nav .active a{
    color: var(--header-primarycolor);
}
header .contactheader{

}
header .contactheader h2{
    position: relative;
    font-size: 14px;
    color: #9b9b9b;
    margin-bottom: 0 !important;
}
header .btn_global{
    margin-left: 2rem;
    border-radius: 0;
}
header .iconimghead img{
width: 25px;
opacity: 0.4;
}




/*========== header ======//====*/
/*=============topbanner=================*/
.topbanner{
position: relative;
width: 100%;
}
.topbanner .swiper-container {
    width: 100%;
    height: 100%;
}
.topbanner .swiper-slide {
position: relative;
}

.topbanner .swiper-container-banner{
overflow-x: hidden;
}
.topbanner .swiper-container-banner .swiper-slide{
height: 900px;
}
.bannerimg{
    position: relative;
    height: 100%;
}
.slide_containner{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.slide_sec{
    width: 100%;
position: relative;
height: 100%;
}
.slide_sec::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.7;
  }
.slide_sec h1{
text-align: left;
color: #fff;
}
.slide_sec h3{
    text-align: left;
    color: #fff;
    }
    .slide_sec p{
        text-align: left;
        color: #fff;
        }
.slide_sec h1{
    color: var(--primarycolor);
    }
    .slide_sec .row{
    position: relative;
}

.topbanner .swiper-container-banner .swiper-button-prev,.swiper-button-next{
    background: none;
    border: 1px solid #fff;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.topbanner .swiper-container-banner .swiper-button-prev svg,.swiper-button-next svg{
    width: 30px;
    fill: #fff;
}

/*=============topbanner=================*/

.banner__slider{
    position: relative;
    background: #000000;
    line-height: 0;
}
/* .banner__slider::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: #000000;
    opacity: 0.5;
} */
.slide {
    position: relative;
    transition: 1s;
    height: 750px;
}

.slide .slide__img {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
@media (min-width: 992px) {
    .slide .slide__img {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
   }
}
.slide__content .row img{
    position: absolute;
    bottom: 0;
}
.slide .slide__img img {
    width: 100%;
    height: 100%;
    opacity: 1 !important;
    animation-duration: 3s;
    transition: all 1s ease;
    object-fit: cover;
    background-size: 100%;
    opacity: 0.2 !important;
}
.slide .slide__content {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0;
    /* top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */
}
.slide .slide__content.slide__content__left {
    left: 15%;
    transform: translate(-15%, -50%);
}
.slide .slide__content.slide__content__right {
    right: 15%;
    left: auto;
    transform: translate(5%, -50%);
}
.slide .slide__content--headings {
    color: #fff;
}
.slide .slide__content--headings h2 {
    font-size: 2.5rem;
    margin: 10px 0;
}
.slide .slide__content--headings .animated {
    transition: all 0.5s ease;
}
.slide .slide__content--headings p {
line-height: 1.4;
}
.slide .slide__content--headings .title {
    font-size: 3.5rem;
}
.slide .slide__content--headings .button-custom {
    text-decoration: none;
    color: #333;
    padding: 1.2rem 2.5rem;
    font-size: 1.5rem;
}
.slider [data-animation-in] {
    opacity: 0;
    animation-duration: 1.5s;
    transition: opacity 0.5s ease 0.3s;
    transition: 1s;
}
.slick-dotted .slick-slider {
    margin-bottom: 30px;
}
.slick-dots {
    position: absolute;
    bottom: 25px;
    list-style: none;
    display: block;
    text-align: center;
    padding: 0;
    margin: 0;
    width: 100%;
}
.slick-dots li {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    padding: 0;
    cursor: pointer;
}
.slick-dots li button {
    border: 0;
    display: block;
    outline: none;
    line-height: 0px;
    font-size: 0px;
    color: transparent;
    padding: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--primarycolor);
    border-radius: 50%;
}
.slick-dots li button:hover, .slick-dots li button:focus {
    outline: none;
}
.simple-dots .slick-dots li {
    width: 20px;
    height: 20px;
}
.simple-dots .slick-dots li button {
    border-radius: 50%;
    background-color: white;
    opacity: 0.25;
    width: 20px;
    height: 20px;
}
.simple-dots .slick-dots li button:hover, .simple-dots .slick-dots li button:focus {
    opacity: 1;
}
.simple-dots .slick-dots li.slick-active button {
    color: white;
    opacity: 0.75;
}
.stick-dots .slick-dots li {
    height: 3px;
    width: 50px;
}
.stick-dots .slick-dots li button {
    position: relative;
    background-color: white;
    opacity: 0.25;
    width: 50px;
    height: 3px;
    padding: 0;
}
.stick-dots .slick-dots li button:hover, .stick-dots .slick-dots li button:focus {
    opacity: 1;
}
.stick-dots .slick-dots li.slick-active button {
    color: white;
    opacity: 0.75;
}
.stick-dots .slick-dots li.slick-active button:hover, .stick-dots .slick-dots li.slick-active button:focus {
    opacity: 1;
}
/* /////////// IMAGE ZOOM /////////// */
@keyframes zoomInImage {
    from {
        transform: scale3d(1, 1, 1);
        transition: 1s;
   }
    to {
        transform: scale3d(1.1, 1.1, 1.1);
        transition: 1s;
   }
}
@keyframes zoomOutImage {
    from {
        transform: scale3d(1.1, 1.1, 1.1);
        transition: 1s;
   }
    to {
        transform: scale3d(1, 1, 1);
        transition: 1s;
   }
}
.zoomOutImage {
    animation-name: zoomOutImage;
    transition: 1s;
}
.slick-nav {
    --active: #fff;
    --border: rgba(255, 255, 255, .12);
    width: 44px;
    height: 44px;
    position: absolute;
    cursor: pointer;
    top: calc(50% - 44px);
}
.slick-nav.prev-arrow {
    left: 3%;
    transform: scaleX(-1);
    z-index: 999;
}
.slick-nav.next-arrow {
    left: auto;
    right: 3%;
}
.slick-nav i {
    display: block;
    position: absolute;
    margin: -10px 0 0 -10px;
    width: 20px;
    height: 20px;
    left: 50%;
    top: 50%;
}
.slick-nav i:before, .slick-nav i:after {
    content: '';
    width: 10px;
    height: 2px;
    border-radius: 1px;
    position: absolute;
    left: 50%;
    top: 50%;
    background: var(--active);
    margin: -1px 0 0 -5px;
    display: block;
    transform-origin: 9px 50%;
}
.slick-nav i:before {
    transform: rotate(-40deg);
}
.slick-nav i:after {
    transform: rotate(40deg);
}
.slick-nav:before, .slick-nav:after {
    content: '';
    display: block;
    position: absolute;
    left: 1px;
    right: 1px;
    top: 1px;
    bottom: 1px;
    border-radius: 50%;
    border: 2px solid var(--border);
}
.slick-nav svg {
    width: 44px;
    height: 44px;
    display: block;
    position: relative;
    z-index: 1;
    color: var(--active);
    stroke-width: 2px;
    stroke-dashoffset: 126;
    stroke-dasharray: 126 126 0;
    transform: rotate(0deg);
}
.slick-nav.animate svg {
    animation: stroke 1s ease forwards 0.3s;
}
.slick-nav.animate i {
    animation: arrow 1.6s ease forwards;
}
.slick-nav.animate i:before {
    animation: arrowUp 1.6s ease forwards;
}
.slick-nav.animate i:after {
    animation: arrowDown 1.6s ease forwards;
}
@keyframes stroke {
    52% {
        transform: rotate(-180deg);
        stroke-dashoffset: 0;
   }
    52.1% {
        transform: rotate(-360deg);
        stroke-dashoffset: 0;
   }
    100% {
        transform: rotate(-180deg);
        stroke-dashoffset: 126;
   }
}
@keyframes arrow {
    0%, 100% {
        transform: translateX(0);
        opacity: 1;
   }
    23% {
        transform: translateX(17px);
        opacity: 1;
   }
    24%, 80% {
        transform: translateX(-22px);
        opacity: 0;
   }
    81% {
        opacity: 1;
        transform: translateX(-22px);
   }
}
@keyframes arrowUp {
    0%, 100% {
        transform: rotate(-40deg) scaleX(1);
   }
    20%, 80% {
        transform: rotate(0deg) scaleX(0.1);
   }
}
@keyframes arrowDown {
    0%, 100% {
        transform: rotate(40deg) scaleX(1);
   }
    20%, 80% {
        transform: rotate(0deg) scaleX(0.1);
   }
}


/*============== innertopbanner ================*/
.innertopbanner{
    height: 700px;
}

/*============== innertopbanner ==========//======*/
/*================== homeabout ===================================*/
.homeabout{
    width: 100%;
    position: relative;
    padding: 7rem 0rem;
    padding-bottom: 6rem;
    background-repeat: no-repeat;
    background-position: center center;
    object-fit: cover;
    background-size: 100%;
}
.homeabout h3{
    color: var(--primarycolor);
    margin-bottom: 1rem;
}
.homeabout h3 span{
    color: var(--lightcolor);
}
.homeabout h2{
    color: var(--lightcolor);
}
.homeabout p{
    color: var(--lightcolor);
}
.homeabout .row{
position: relative;
}
.homeabout::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: #000000;
    opacity: 0.8;
}

/*================== homeabout =========//==========================*/

/*================== productbasicsub =======================*/
.productbasicsub{
    position: relative;
    width: 100%;
    padding: 7rem 0rem;
    padding-top: 0rem;
}
.productbasicsub .product-basic{
text-align: center;
}
.productbasicsub .pic-2{
border-radius: 50%;
width: 300px;
height: 300px;
margin: 0 auto;
}
.productbasicsub .title{
margin-top: 1rem;
font-size: 22px;
}
.product-basic{
    padding: 0 20px;
}
.productbasicsub .slick-dots {
    bottom: -45px;
}

.slide-wrapper{
    position: relative;
}

.productbasicsub .slick-prev{
    left: -45px;
    position: absolute;
    font-size: 0;
    display: block;
    margin: 30px auto;
    border-bottom: 2px solid var(--primarycolor);
    border-right: 2px solid var(--primarycolor);
    transform: rotate(135deg);
    border-top: 0px;
    border-left: 0px;
    background: none;
}
   
.productbasicsub .slick-next{
    right: -45px;
    position: absolute;
    font-size: 0;
    display: block;
    margin: 30px auto;
    border-top: 2px solid var(--primarycolor);
    border-left: 2px solid var(--primarycolor);
    transform: rotate(135deg);
    border-right: 0px;
    border-bottom: 0px;
    background: none;
} 
.productbasicsub .slick-prev,.productbasicsub .slick-next{
    width: 35px;
    height: 35px;
    top: 40%;
}
.productbasicsub .price{
font-size: 20px;
font-weight: bold;
}
.productbasicsub .product-content p{
    margin-bottom: 0;
}









/*================== productbasicsub ================//=======*/

/*================== homeaboutsecond ==================================*/
.homeaboutsecond{

}
.homeaboutsecond .imgabout{
border-radius: 50%;
box-shadow: -5px 4px 0px 0px rgba(204,204,204,0.75);
-webkit-box-shadow: -5px 4px 0px 0px rgba(204,204,204,0.75);
-moz-box-shadow: -5px 4px 0px 0px rgba(204,204,204,0.75);
scale: 0.9;
}


/*================== homeaboutsecond ========================//==========*/
/*================== serviceshome ==================================*/
.serviceshome{
position: relative;
padding: 7rem 0rem;
}
.serviceshome h3{

}
.serviceshome .w-100{
height: 100%;
box-shadow: -2px 1px 11px 0px rgba(0,0,0,0.12);
-webkit-box-shadow: -2px 1px 11px 0px rgba(0,0,0,0.12);
-moz-box-shadow: -2px 1px 11px 0px rgba(0,0,0,0.12);
padding: 2rem 1rem;
}

/*================== serviceshome ========================//==========*/

/*================== servises_info ====================================*/

.servises_info{
    background: #f8f8f8;
}
.servises_info .w-100{
    box-shadow: none;
    padding-bottom: 0rem;
}
.servises_info .icon_box{
    position: relative;
}
.servises_info .icon_box img{
    position: relative;
    width: 70px;
}


/*================== servises_info ========================//==========*/
/*================== servises_infobg ==================================*/
.servises_infobg{

}
.servises_infobg h2{
    color: var(--lightcolor);
}
.servises_infobg .aboutinner{
    box-shadow: -7px 6px 15px 0px rgba(0,0,0,0.75);
    -webkit-box-shadow: -7px 6px 15px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: -7px 6px 15px 0px rgba(0,0,0,0.75);
    border-radius: 0px 25px 25px 25px;
-webkit-border-radius: 0px 25px 25px 25px;
-moz-border-radius: 0px 25px 25px 25px;
}
.servises_infobg ul li{
    color: var(--lightcolor);
}


/*================== servises_infobg ========================//==========*/

/*===================== footer ===============*/
.footerlogo{
    position: relative;
}
footer{
    /* background: var(--footer-darkcolor); */
    /* padding-top: 3rem; */
}
footer p{
color: var(--footer-whitecolor);
}
footer h3{
    color: var(--footer-whitecolor);
    }
footer h3{
font-size: 20px;
border-bottom: 1px solid var(--footer-border-dark-color);
padding-bottom: 1rem;
margin-bottom: 1rem;
}
.footermainmenu{

}
.footermainmenu li{
    
}
.footermainmenu li a{
    color: var(--footer-primarycolor);
    font-size: 16px;
    padding-left: 0;
    padding-right: 0;
}
.footermainmenu li a:hover{
    color: var(--footer-bordercolor);
}

.footeotherlink{

}
.footeotherlink li{
    
}
.footeotherlink li a{
    color: var(--footer-primarycolor);
    font-size: 16px;
    padding-left: 0;
    padding-right: 0;
    position: relative;
}
.footeotherlink li a::before {
    content: "\f105";
    font: normal normal normal 14px / 1 FontAwesome;
    position: absolute;
    width: 100%;
    height: 100%;
    font-size: 16px;
    left: -13px;
    top: 11px;
    color: var(--footer-primarycolor);
    opacity: 1;
}
.footeotherlink li a:hover{
    color: var(--footer-bordercolor);
}
.footesupportlink{

}
.footesupportlink li{
    
}
.footesupportlink li a{
    color: var(--footer-primarycolor);
    font-size: 16px;
    padding-left: 0;
    padding-right: 0;
}
.footesupportlink li a:hover{
    color: var(--footer-bordercolor);
}

.column-count-nav{
    column-count: 2;
    margin: 0;
    padding: 0;
    margin-left: 1rem;
}
.column-count-nav li a{
    padding: 8px 0px;
    position: relative;
}
.column-count-nav li a::before {
    content: "\f105";
    font: normal normal normal 14px / 1 FontAwesome;
    position: absolute;
    width: 100%;
    height: 100%;
    font-size: 16px;
    left: -13px;
    top: 11px;
    color: var(--footer-primarycolor);
    opacity: 1;
}
.foo_abbress{
    margin-bottom: 0px;
}
.abbress_icon{
    color: var(--footer-primarycolor);
    font-size: 20px;
    width: 20px;
}
.foosocial{
    display: flex;
    gap: 0 30px;
    margin-left: 1rem;
}
.foosocial a {
    border: 1px solid var(--footer-primarycolor);
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}
.foosocial a i{
    color: var(--footer-primarycolor);
    font-size: 20px;
}
.foosocial a:hover i{
    color: var(--footer-bordercolor);
    font-size: 20px;
}
.copyrightbg{
    background: var(--footer-primarycolor);
}
.copyrightbg p{
text-align: center;
color: var(--footer-darkcolor);
padding-top: 1rem;
}

.footersectopnone{

}
.footersectopntow{
    
}
.footersectopnthree{
    
}
.footersectopnfour{
    
}
























/*===================== footer =====//=======*/


.tremsbgtext ul li {
position: relative;
font-size: 16px;
margin-bottom: 10px;
padding-left: 22px;
}
.tremsbgtext ul li::before {
content: "";
position: absolute;
left: 0;
top: 9px;
width: 10px;
height: 10px;
background: #ff8944;
border-radius: 50%;
}

.fooemail{

}
.foocontact{

}
.contact_icon{

}

.global_heading{
    position: relative;
    text-align: center;
    padding: 4rem 0rem;
}
.global_heading h2{
    position: relative;
    text-transform: uppercase;
    font-weight: 200;
}
.global_heading h3{
    position: relative;
    color: var(--primarycolor);
}
.global_heading p{
    position: relative;
    color: var(--bordercolor);
}





/*==================== product ====================*/
.product_sec{
    position: relative;
    padding-bottom: 2rem;
    padding-top: 7rem;
}
.product-bgbox{
    background-color: var(--whitecolor);
    box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.07);
    -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.07);
    -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.07);
    position: relative;
    
}
.product-bgbox .product-image{ 
    position: relative; 
    overflow: hidden;
}
.product-bgbox .product-image a.image{
    display: block;
    overflow: hidden;
    position: relative;
}
.product-bgbox .product-image img{
    width: 100%;
    height: auto;
}
.product-image .pic-1{
    backface-visibility: hidden;
    transition: all 0.5s;
}
.product-bgbox:hover .product-image .pic-1{ opacity: 1; }
.product-image .pic-2{
    width: 100%;
    height: 100%;
    transform: translateX(-120%);
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.3s;
}
.product-bgbox:hover .product-image .pic-2{ transform: translateX(0); }
.product-bgbox .product-sale-label{
    color: #222;
    font-size: 14px;
    font-weight: 500;
    text-transform: capitalize;
    padding: 0 5px;
    transform: translateX(-60px);
    position: absolute;
    top: 10px;
    left: 10px;
    transition: all 500ms ease-in-out 0s;
}
.product-bgbox:hover .product-sale-label{ transform: translateX(0); }
.product-bgbox .product-like-icon{
    color: #333;
    font-size: 18px;
    line-height: 18px;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    transition: all 0.3s ease 0s;
}
.product-bgbox:hover .product-like-icon:hover{ color: #eb2f06; }   
.product-bgbox .product-button-group{
    font-size: 0;
    width: 100%;
    opacity: 1;
    text-align: center;
    transform: translateX(-50%);
    position: absolute;
    left: 50%;
    bottom: 20px;
    transition: all .3s ease-out 0s;
}
.product-bgbox:hover .product-button-group{ opacity: 1; }
.product-bgbox .product-button-group a{
    color: var(--whitecolor);
    background: #000;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 43px;
    height: 45px;
    width: 40px;
    position:relative;
    display: inline-block;
    transition: all 0.3s;
}
.product-bgbox .product-button-group a i{line-height:inherit;}
.product-bgbox .product-button-group a:before{
    content: "";
    background:  var(--primarycolor);
    width: 0;
    height: 100%;
    position: absolute;
    top: auto;
    bottom: 0;
    left: auto;
    right: 0;
    transition: all .4s ease-in-out 0s;
    z-index: -1;
}
.product-bgbox .product-button-group a:hover:before{
    width: 100%;
    right: auto;
    left: 0;
}
.product-bgbox .product-button-group a.add-to-cart{
    width: calc(100% - 87.5px);
    margin: 0 3px;
    transform: translateY(100px);
}
/* .product-bgbox .product-button-group a:nth-child(1){ transform: translateX(-45px); }
.product-bgbox .product-button-group a:nth-child(3){ transform: translateX(45px); } */
.product-bgbox:hover .product-button-group a.add-to-cart{ transform: translateY(0); }
.product-bgbox:hover .product-button-group a{ transform: translate(0); }
.product-bgbox .product-button-group a:hover{ color: var(--whitecolor); }
.product-bgbox .product-content{ padding: 12px; }
.product-bgbox .title{
    font-size: 17px;
    font-weight: 600;
    text-transform: capitalize;
    margin: 0 0 5px;
}
.product-bgbox .title a{
    color: var(--blackcolor);
    transition: all 0.5s ease;
}
.product-bgbox .title a:hover{ color: var(--primarycolor);}
.product-bgbox .price{
    color: var(--primarycolor);
    font-size: 16px;
    font-weight: 500;
    margin: 0 2px;
}
.product-bgbox .price span{
    color: #999;
    text-decoration: line-through;
}
@media screen and (max-width:990px){
    .product-bgbox{ margin: 0 0 30px; }
}

/*==================== product ===========//=========*/
/*================ productdetails =====================*/
.productdetails{
    position: relative;
}
.productdetails .headingbg{
color: #ffffff;
}
.productdetails .pricestyle{
    color: var(--primarycolor);
    font-size: 30px;
    font-weight: 600;
}
.alldetails_text{
    position: relative;
}
.alldetails_text strong{
    font-size: 16px;
}
.alldetails_text ul{
    margin: 1rem 0rem;
    padding: 0;
}
.alldetails_text ul li {
    position: relative;
    font-size: 16px;
    margin-bottom: 10px;
    padding-left: 22px;
    color: #ffffff;
    }
    .alldetails_text ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 10px;
    height: 10px;
    background: var(--primarycolor);
    border-radius: 50%;
    }
    .alldetails_text h3,h4,h2,strong{
        font-family: "Roboto", serif;
        font-size: 22px;
        font-weight: 600;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 0.5rem !important;
        color: #ffffff;
    }
    .alldetails_text p{
        color: #fff !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 0.5rem !important;

    }
/*================ productdetails =============//======*/
/*===================== breadcrumb_sec ==============*/
.breadcrumb_sec{
    position: relative;
    width: 100%;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    object-fit: cover !important;
}
.breadcrumb_sec::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: #000000;
    opacity: 0.5;
}
.breadcrumb_sec .global_heading{
text-align: left;
}
.breadcrumb_sec .active{
color: var(--lightcolor);
}
.breadcrumb_sec .breadcrumb-item+.breadcrumb-item::before {
    color: var(--lightcolor);
}


/*===================== breadcrumb_sec =====//=======*/
/*============== blog_sec ===============================*/
.blog_sec{
    position: relative;
    padding-bottom: 7rem;
    padding-top: 7rem;
}

.blog_sec .imgstyle{
    width: 100%;
    height: 360px;
    object-fit: cover;
    background-position: center center;
}
.global_heading_color{
color: var(--primarycolor);
padding: 1rem 0rem;
margin-bottom: 0;
}
.blog_sec p{
    color: var(--bordercolor);
}
.blogbox{
    position: relative;
    box-shadow: -1px 0px 11px 0px rgba(0,0,0,0.1);
    -webkit-box-shadow: -1px 0px 11px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: -1px 0px 11px 0px rgba(0,0,0,0.1);
border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
overflow: hidden;
padding-bottom: 1.5rem;
}
.blogbox p{
margin: 0 1.5rem;
}
.blogbox h3{
    margin: 0 1.5rem;
    }
    
.blog_sec .blogbox p a{
    font-weight: bold;
}
.blog_sec .blogbox p a:hover{
    color: #89b2f7;
}
.blogimg{
    height: 500px !important;
}


/*============== blog_sec ================//=============*/

/*============== faqs_sec =============================*/
.faqs_sec{
    position: relative;
    padding-bottom: 7rem;
    padding-top: 7rem;
}
.faqs_sec .faqsbox{
    position: relative;
    box-shadow: 0px -1px 32px 0px rgba(0,0,0,0.21);
    -webkit-box-shadow: 0px -1px 32px 0px rgba(0,0,0,0.21);
    -moz-box-shadow: 0px -1px 32px 0px rgba(0,0,0,0.21);
    border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
overflow: hidden;
}
.faqs_sec .accordion-button:not(.collapsed) {
    background: var(--primarycolor);
    color: var(--whitecolor);
}
.faqs_sec .accordion-button{
    font-weight: 600;
    font-size: 22px;
}
.faqs_sec .accordion-body{
    font-weight: 400;
    font-size:16px;
}

/*============== faqs_sec ================//===========*/
/*============== contact_sec =============================*/
.contact_sec{
    position: relative;
}


input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
  border: none;
  border: 1px solid rgb(189 189 189);
  background: transparent;
  outline: none;
  width: 100%;
  text-transform: capitalize;
  padding: 1rem 1rem;
  font-size: 17px;
  color: #ffffff;
}
input::placeholder {
    color: #ffffff;
  }
  textarea::placeholder {
    color: #ffffff !important;
  }
.contact_sec .aside {
background: var(--primarycolor);
}
.bgcontact{
    background: #fff;
    padding-bottom: 3rem;
}
.bgcontact .contacttext{ 
    box-shadow: 1px 1px 10px 0px rgba(0,0,0,0.15);
    -webkit-box-shadow: 1px 1px 10px 0px rgba(0,0,0,0.15);
    -moz-box-shadow: 1px 1px 10px 0px rgba(0,0,0,0.15);
padding: 2rem 1rem;
margin-bottom: 1rem;
border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
}
.bgcontact .contacttext svg{ 
width: 40px;
fill: var(--primarycolor);
margin:0rem 1.5rem;
}







.bgcontact .contacttext p{ 
    margin: 0;
    color: #6d6d6d;
}
.contact_sec .icon_contact{
    border: 1px solid currentColor;
    border-radius: 20%;
    padding: 1rem;
    font-size: 18px;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
}
.btn_global{
    background: var(--primarycolor);
    color: var(--whitecolor);
    font-weight: bold;
}
.btn_global:hover{
    background: var(--darkcolor);
    color: var(--whitecolor);
}
.contact_sec .aside a{
    color: var(--whitecolor);
    font-size: 18px;
}
.contact_sec .aside p{
    color: var(--whitecolor);
    font-size: 18px;
    padding-bottom: 0;
    margin-bottom: 0;
}
.container_from{
    position: relative;
    padding: 7rem 0rem;
}
.contact_map{
    width: 100%;
    position: relative;
}
.contact_map iframe{
    width: 100%;
    height: 450px;
}

/*============== contact_sec ================//===========*/
/*============== about_sec ===============*/
.about_sec{
    width: 100%;
    position: relative;
}
.about_sec .blogbox{
box-shadow: none;
}
.about_sec img{
    border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
}
.about_sec .global_heading_color{
    color: var(--primarycolor);
    padding-bottom: 0;
}


/*============== about_sec =========//======*/
/*========================================*/
.error_sec {
    position: relative;
    padding-bottom: 7rem;
    padding-top: 7rem;
}

/*===================================//=====*/
/*============= contact from ============*/
.error {
    display: block;
    width: 100%;
    color: #c73f3f;
    padding-top: 12px;
}

.successgreencolorc {
    color: #43e393;
    font-weight: bold;
}
.sucMessage{
    color: #43e393;
    font-weight: bold;
    margin-bottom: 1rem;
}




/*============= contact from ====//========*/
/*=============== media quary =======================*/

@media only screen and (max-width:991px) {
    h1{
        font-size: 2.5rem;
              }
              h3{
                font-size: 1.8rem;
                      }
    .topbanner .swiper-container-banner .swiper-slide{
        height: 500px;
        }
  }
  @media only screen and (max-width:767px) {
    header nav .navbar-collapse{
        position: absolute;
    z-index: 9999;
    background: #030b15;
    width: 100%;
    left: 0;
    right: 0;
    top: 79px;
    padding: 0 20px;
    }
    header nav .nav-link {
        font-size: 16px;
        padding: 7px 10px !important;
    }
    header .btn_global {
        margin-left: 0rem;
    }
    header .iconimghead img {
        width: 16px;
    }
    header .contactheader h2 {
        font-size: 10px;
    }
.contactheader a{
    font-size: 12px !important;
}
header .btn_global {
    font-size: 11px !important;
}
header .navbar-toggler {
    position: absolute;
    right: 13px;
}

header .btn_global{
    margin-right: 48px;
    margin-top: 6px;
}

header nav .navbar-brand {
    filter: none !important;
    width: 90px;
    margin: 0;
}
header .iconimghead img {
    width: 11px;
}
.contactheader a {
    font-size: 8px !important;
}
header .btn_global {
    margin-right: 45px;
    margin-top: 6px;
    font-size: 9px !important;
}
header .navbar-toggler {
    z-index: 999;
}
















  }



/*=============== media quary =============//========*/

.topbanner .swiper-pagination-bullet {
    background: var(--primarycolor);
    width: 20px;
    height: 20px;
  }

  .topbanner .swiper-pagination-bullet-active{
    border: 2px solid #fff;
  }

  .topbanner .swiper-pagination-bullets{
    bottom: 40px;
  }



  .animeslide-heading {
    margin-bottom: 25px;
    transition-delay: 3s;
  }
  .animeslide-heading span {
    font-size: 16px;
    background-color: #f08723;
    padding: 6px 12px 7px;
    border-radius: 8px;
    font-weight: normal;
  }
  .animeslide-desc {
    padding: 15px 22px;
    border-radius: 8px;
    background-color: #202238;
    max-width: 480px;
    opacity: 0.9;
  }
  
  [data-animate] {
    opacity: 0;
    transition: all 0.8s ease-out;
  }
  [data-animate="bottom"] {
    transform: translate3d(0, 15px, 0);
  }
  
  .animeslide-bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    border-radius: 8px;
    background-color: #202238;
    max-width: 600px;
    z-index: 1;
    padding: 35px 35px;
    right: 0;
    font-size: 14px;
  }
  .animeslide-bottom .cell {
    position: relative;
    opacity: 1;
    z-index: 2;
    height: 40px;
    bottom: inherit;
  }
  .animeslide-bottom .animeslide-scrollbar {
    margin-top: 16px;
  }
  .animeslide-bottom .animeslide-scrollbar-drag {
    height: 6px;
  }
  .animeslide-bottom .animeslide-pagination {
    font-size: 25px;
    bottom: inherit;
    color:#fff;
  }
  .animeslide-bottom .animeslide-pagination b {
    font-size: 28px;
    margin-top: -5px;
  }
  
  .animeslide-bottom .animeslide-pagination span {
    padding-left: 5px;
    padding-right: 5px;
  }
  .animeslide-button-next,
  .animeslide-button-prev {
    outline: none;
  }
  .animeslide-button-next::after,
  .animeslide-button-prev::after {
    font-size: 22px;
    color: #fff;
  }



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

  .breadcrumb_sec .global_heading h3 {
    padding: 0 1rem;
  }
  .breadcrumb_sec nav {
    padding: 0 1rem;
  }
  .faqs_sec ,.blog_sec ,.product_sec{
    padding-bottom: 4rem;
    padding-top: 4rem;
  }
  .slide_sec h1 {
    font-size: 25px;
  }
  .topbanner .slide_sec h3 {
    font-size: 18px;
  }
  .topbanner .swiper-container-banner .swiper-button-prev, .swiper-button-next {
    width: 40px;
    height: 40px;
  }
  .footer{
padding-left: 1rem;
padding-right: 1rem;
position: relative;
  }
  .footeotherlink {
    margin-left: 1rem;
}


  }

.footerbgicon p i{
margin-right: 0.7rem;
}

.solusanheading{
    color: #ffffff;
  text-align: center;
  font-size: 2rem;
  margin-bottom: 3rem;
}


.contacttext h2{
    color: #000000;
}
.bgcontactsid{
    background: none;
}

.bgcontactsid .contacttext{

}
.bgcontactsid .contacttext h2 {
    color: #fff;
}

.bgcontact .contacttext p {
    color: #fff;
}
.container_from h3{
    color: #ffffff;
}
.container_from h3 {
    color: #ffffff;
    text-align: center;
}