body{
    box-sizing: border-box;
    background: #f1f1f1;
}
* , ul , a{
    margin: 0;
    padding: 0;
    outline: none;
    border: none;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}
h1,h2,h3,h4,h5,h6,li{
    margin: 0;
    padding: 0;
}
:root{
    --bree: "Bree Serif", Serif!important;
    --lato: 'Poppins', sans-serif!important;
    --blue: #36A8EB!important;
    --yellow: #FED700!important;
    --light_blue: #F2FAFF!important;
    --footer-blue: #0D2865;
    --black: #000!important;
    --grey: #f5f5f5!important;
    --white: #fff!important;
    --pink: #FF758E!important;
    --text-black: #222!important;
    --text-grey: #424242!important;
    font-size: 10px!important;
    --transition: transition: all ease-in .3s;
    --text-shadow: 0px 4px 4px rgba(19, 22, 68, 0.2)!important;
    --box-shadow: 0px 4px 4px 0px rgba(66, 66, 66, 0.20)!important;
}

/*Follow Cursor Begin*/

#circle {
  position: absolute;
  width: 20px;
  height: 20px;
  margin: -15px 0 0 0;
  background: var(--black);
  opacity: .7;
  border-radius: 80%;
  backface-visibility: hidden;
  z-index: 99999;
}

/*Follow Cursor End*/

/*Top Button*/

#BackToTop{
    font-size: 2rem;
    background: var(--black);
    padding: 8px 15px;
    color: var(--white);
    position: fixed;
    bottom: 40px;
    right: 40px;
    border-top: inset 5px solid var(--pink);
    transition: background ease-in .2s;
    border-radius: 15px 15px 0px 0px;
    z-index: 999;
}
#BackToTop:hover{
    background: var(--blue);
}
#BackToTop:active{
    background: var(--pink);
}

/*Top Button*/


/*Hide In Web*/

/*Mobile Menu */

.mobile-menu , .mobile-menu-outer{
    display: none;
}
.mobactive{
    display: block!important;
    animation: topslide ease-in .3s 1;
}

/*Mobile Menu */

/*Mbile CateGory*/

.mobile-categorybar{
    display: none;
}

/*Mbile CateGory*/

/*Laptop Slider*/

.slider-for-mobile{
    display: none;
}

/*Laptop Slider*/

/*Brands Slider*/

.mobile-brands-section , .mobile-laptop-slider{
    display: none;
}

/*Brands Slider*/

/*Hide In Web*/


/*Top Header Begin*/

.top-header{
    background: url(../images/topheader-background.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 50px;
    display: flex;;
}
.top-header .top-header-left{
    display: flex;
    gap: 40px;
}
.top-header .top-header-left .contact-content{
    display: flex;
    gap: 10px;
    align-items: center;
}
.top-header .top-header-left .contact-content a{
    font-size: 1.6rem;
    color: var(--white);
}
.top-header .top-header-left .contact-content i{
    font-size: 1.8rem;
}
.social-icons {
    display: flex;
    gap: 20px;
    align-items: center;
}
.social-icons i{
    font-size: 2rem;
    color: var(--text-black);
}

/*Top Header End*/

/*Heading Style*/

.heading2 h4{
    font-size: 2.4rem;
    font-weight: 600;
    color: #FF4C3B;
    line-height: 30px;  
    display: inline-flex;
    align-items: center;
    position: relative;
}
.heading2 h4::after , .heading2 h4::before{
    width: 15%;
    margin-top: 5px;
    content: "";
    position: absolute;
    height: 3px;
}
.heading2 h4::after {
    background: var(--black);
    right: -17%;
    animation: slideline ease-in 1.4s infinite .7s;
}
.heading2 h4::before {
    background: var(--blue);
    right: -32%;
    animation: slideline2 ease-in 1.4s infinite;
}
.heading h1{
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 30px;  
    display: inline-flex;
    align-items: center;
    position: relative;
}
.heading h1::after , .heading h1::before{
    width: 15%;
    margin-top: 5px;
    content: "";
    position: absolute;
    height: 3px;
}
.heading h1::after {
    background: var(--black);
    right: -17%;
    animation: slideline ease-in 1.4s infinite .7s;
}
.heading h1::before {
    background: var(--blue);
    right: -32%;
    animation: slideline2 ease-in 1.4s infinite;
}
@keyframes slideline{
    0%{
        transform: translateX(0%);
    }
    50%{
        transform: translateX(100%);
    }
    100%{
        transform: translateX(0%);
    }
}
@keyframes slideline2{
    0%{
        transform: translateX(-100%);
    }
    50%{
        transform: translateX(0%);
    }
    100%{
        transform: translateX(-100%);
    }
}

/*Heading Style End*/

/*Sticky Nav*/

.sticky-nav{
    background: #fff;
    box-shadow: 0px 2px 6px rgb(34, 34, 34, 0.15);
    width: 100%;
    height: unset!important;
    left: 0;
    top: 0;
    position: fixed!important;
    transition: top 0.4s ease-in-out!important;
    -webkit-transition: top 0.4s ease-in-out!important;
    z-index: 999;
    padding: 10px calc(100% - 95%)!important;
    animation: moveDown 0.5s ease-in-out;
}

@keyframes moveDown{
    from{
        transform: translateY(-100px);
    }
    to{
        transform: translateY(0px);
    }
}

/*Sticky Nav End*/


/*Main Navbar Begin*/

.main-navbar-outer{
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    z-index: 9999;
    height: 100px;
}
.main-navbar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100px;
}
.main-navbar .navbar-items{
    display: flex;
    gap: 40px;
    align-items: center;
}
.main-navbar .navbar-items li {
    position: relative;
    overflow: hidden;
    display: block;
    cursor: pointer;
    line-height: 40px;
}
.main-navbar .navbar-items li:first-child:after{
    position: absolute;
    content: "";
    width: 20000%;
    height: 2px;
    bottom: 0;
    left: 0;
    background: url(../images/line.svg);
    background-repeat: repeat;
    animation: line linear 360s infinite;
}
.main-navbar .navbar-items li:first-child a{
    font-weight: 700;
}
.main-navbar .navbar-items li:hover::after{
    position: absolute;
    content: "";
    width: 20000%;
    height: 2px;
    bottom: 0;
    left: 0;
    background: url(../images/line.svg);
    background-repeat: repeat;
    animation: line linear 360s infinite;
}
@keyframes line{
    0%{
        transform: translateX(-100%);
    }
    100%{
        transform: translateX(200%);
    }
}
.main-navbar .navbar-items li a{
    font-size: 1.8rem;
    color: var(--text-black);
    font-weight: 600;
    display: block;
}
.main-navbar .navbar-items li:hover a{
    font-weight: 700;
}

/*Main Navbar End*/

/*Hero Section Begin*/

.hero-section{
    position: relative;
    height: 900px;
    width: 100%;
    overflow: hidden;
    background: linear-gradient(180deg, var(--light_blue) 30% , transparent 70%);
    display: flex;
    justify-content: center;
    align-items: center;
}
.droppingballs{
    height: 500px;
    overflow: hidden;
}
.hero-section .wave{
    position: absolute;
    content: "";
    background: #F2FAFF;
    background: url(../images/Rectangle\ 9.svg);
    width: 100%;
    height: 800px;
    top: 100px;
    left: 0;
    background-repeat: no-repeat;
    filter: drop-shadow(4px 4px 12px rgb(240, 240, 240));
    z-index: 1;
}
.hero-section .wave img{
    position: absolute;
    z-index: 29;
}
@keyframes crrotate{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
.hero-section .wave img:nth-child(1){
    left: -5%;
    top: -12%;
    animation: crrotate ease-in 5s infinite;
}
.hero-section .wave img:nth-child(2){
    left: 10%;
    bottom: 200px;
    animation: crrotate ease-in 5s infinite;
}
.hero-section .wave img:nth-child(3){
    right: 0%;
    top: -12%;
}
.hero-section .wave img:nth-child(4){
    right: -3%;
    bottom: 13%;
    width: 520px;
    animation: crrotate ease-in 5s infinite;
}
.banner-slider{
    position: relative;
    z-index: 99;
    align-items: center;
    justify-content: space-between;
}
.banner-slider .banner-left{
    display: flex;
    flex-direction: column;
}
.banner-slider .banner-left h1{
    font-size: 5rem;
    font-weight: 700;
    color: var(--text-black);
    padding-bottom: 40px;

    &&
    span{
        color: var(--blue);
    }
}
.slider-inner.item {
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.viewmore {
    display: block;
}
.viewmore a{
    display: inline-block;
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--white);
    padding: 12px 40px;
    background: var(--black);
    border-radius: 10px;
    transition: all ease-in .3s;
}
.viewmore:hover a{
    box-shadow: 6px 6px 0px var(--black);
    background: var(--blue);
}

/*Mobile Banner Begin*/

.mobile-banner-outer{
    display: none;
}

/*Mobile Banner End*/


/*Owl Navigation Mai Cherkhani*/

.hero-section .owl-theme .owl-dots .owl-dot span {
    width: 20px;
    height: 5px;
    margin: 5px 7px;
    background: #869791;
    border-radius: 30px;
}
.hero-section .owl-theme .owl-dots .owl-dot.active span{
    background: var(--blue);
}
.hero-section .owl-theme .owl-dots{
    position: absolute;
    left: 0;
    width: 100%;
}

/*Owl Navigation Mai Cherkhani*/

/*CateGories Begin*/

.categorybar .categories-wrapper{
    justify-content: space-between;
    align-items: center;
    padding-bottom: 60px;
}
.categorybar .categories-wrapper .categories {
    text-align: center;
}
.categorybar .categories-wrapper .categories img{
    width: 100%;
    margin-bottom: 20px;
}
.categorybar .categories-wrapper .categories span{
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--black);
}

/*Hero Section End*/

/*Welcome Section Begin*/

.welcome-section-outer{
    position: relative;
    width: 100%;
    overflow: hidden;
    background: url(../images/welcome-bg-img.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 100px 0px;
}
.welcome-section-outer .heading{
    padding-bottom: 20px;
}
.welcome-section-outer .welcome-section h2{
    font-size: 3.2rem;
    font-weight: 700;
    font-family: var(--bree);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding-bottom: 20px;
}
.welcome-section-outer .welcome-section p{
    font-size: 1.8rem;
    color: var(--black);
    padding-right: 20px;
    text-align: justify;
}
.welcome-section-outer .welcome-section .welcome-section-right img{
    width: 100%;
}
.welcome-section-outer .floating-shapes img{
    position: absolute;
}
.welcome-section-outer .floating-shapes img:nth-child(1){
    position: absolute;
    top: 0;
    left: -4%;
}
.welcome-section-outer .floating-shapes img:nth-child(2){
    position: absolute;
    bottom: 20%;
    right: 4%;
}

@media only screen and (min-width: 1170px){
    .welcome-section-outer .welcome-section p {
    font-size: 1.8rem;
    color: var(--black);
    letter-spacing: 1px;
    padding-right: 150px;
    text-align: justify;
    line-height: 30px;
}
.welcome-section-outer .welcome-section .welcome-section-right img {
    width: 100%;
}
.welcome-section-outer .welcome-section {
    justify-content: space-between;
}
.welcome-section-outer .col-lg-6:nth-child(2){
    width: 47%;
}
}

/*Welcome Section End*/

/*Product Section Begin*/

.product-section-outer{
    padding: 80px 0px 0px;
    text-align: center;
}


.product-sectionbanner-outer{
    background: var(--black);
    padding: 20px 0;
}
.product-sectionbanner{
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    align-items: center;
}
.product-sectionbanner h1{
    font-size: 4rem;
    font-family: var(--bree);
    color: var(--white);
}
.product-sectionbanner img{
    width: 20%;
}
.laptopbnr{
    background: #FB9AAC;
}
.accessoriesbnr{
    background: var(--blue);
}


.product-section-outer .heading{
    padding-bottom: 40px;
}
.product-section-outer .heading h1{
    font-size: 3.6rem;
    font-weight: 700;
    font-family: var(--bree);
}
.product-section-outer .product-section{
    padding: 80px 0px;
}

/*Product Slider Begin*/

.product-section{
    justify-content: space-between;
}
.product-section .product-card{
    position: relative;
    overflow: hidden;
    background: var(--white);
    padding: 20px;
    border-radius: 15px;
    z-index: 5;
}
.product-section .laptop-card{
    max-width: 23%;
}
.product-section .product-card .bubble img{
    position: absolute;
    opacity: .4;
    transition: all ease-in 0.4s;
    z-index: -1;
}
.product-section .product-card .bubble img:nth-child(1){
    left: -15%;
    top: -15%;
}
.product-section .product-card .bubble img:nth-child(2){
    right: -15%;
    bottom: -15%;
    transform: rotate(-65deg);
}
.product-section .product-card:hover .bubble img{
    transform: scale(2);
}
.product-section .product-card .product-details .product-spec {
    padding: 20px 5px 0px;
}
.product-section .product-card .product-details .product-spec span{
    font-size: 1.8rem;
    color: var(--text-grey);
    font-weight: 600;
}
.product-section .product-card .product-details img{
    width: 70%;
    height: auto;
    transition: all ease-in .3s 0.2s;
}
.product-section .product-card:hover .product-details img{
    transform: scale(1.2);
}
.product-section .product-card{
    height: 385px;
}
.product-section .product-card .product-details {
    text-align: center;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;
    height: 100%;
}
.product-section .product-card img {
    display: block;
    width: auto;
}

/*Product Section End*/





ball{
    background: url(../images/hole-circle-1.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    height: 100px;
    width: 100px;
    opacity: 0;
  filter: drop-shadow(inset -25px -15px 40px rgba(0,0,0,.3));
  animation: bounce 2s linear;
  z-index: 2;
}
@keyframes bounce {
  0% {
    opacity: .1;
    bottom: 100%;
  }
  50% {
    opacity: .2;
    bottom: 90%;
  }
  60% {
    opacity: 1;
    bottom: 70%;
  }
  70% {
    opacity: .5;
    bottom: 50%;
  }
  80% {
    opacity: .2;
    bottom: 60%;
  }
  90% {
    opacity: .1;
  }
  95% {
    opacity: .5;
    bottom: 70%;
  }
  100% {
    opacity: 0;
    bottom: 80%;
  }
}






/* Add this CSS to your stylesheet */
.cursor {
    width: 100px; /* Adjust the size as needed */
    height: 100px; /* Adjust the size as needed */
    border-radius: 50%; /* To maintain a circular shape */
  }
  


/*Why CHoose Section Begin*/

.whychoose-outer{
    background: url(../images/whychoosebg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    padding: 150px 0px 100px;
    text-align: center;
    justify-content: center;
}
.whychoose-outer .heading h1{
    font-size: 3rem;
    font-family: var(--bree);
    padding-bottom: 40px;
    color: var(--black);
}
.whychoose-outer .whychoose .features{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 40px;
    overflow-y: hidden;
}
.whychoose-outer .whychoose .features img{
    width: 90px;
}
.whychoose-outer .whychoose .features:hover img{
    animation: translate ease-in .5s 1;
}
.whychoose-outer .whychoose .features span{
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--black);
    padding-bottom: 10px;
}

/*Why CHoose Section End*/

/*Showcase Begin*/

.showcase-outer{
    padding: 80px 0px;
}
.showcase-outer .showcaseimg .showcase-image{
    padding: 0px 20px;
    overflow: hidden;
}
.showcase-outer .showcaseimg .showcase-image img{
    width: 100%;
    transition: all ease .3s;
}
.showcase-outer .showcaseimg .showcase-image:hover img{
    transform: scale(1.1);
}
.showcase-outer .showcaseimg .audioshowcase img{
    width: 100%;
}
.showcase-outer .showcaseimg .audioshowcase{
    padding-bottom: 30px;
    overflow: hidden;
}

/*Showcase End*/

/*Brand Slider Begin*/

.brands-section-outer{
    text-align: center;
    position: relative;
    background: var(--white);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.10);
    padding: 30px 0px;
}
.brands-section-outer .brands-images{
    text-align: center;
    display: flex;
    justify-content: center;
    filter: grayscale(1);
    transition: all ease-in .2s;
}
.brands-section-outer .brands-images:hover{
    filter: grayscale(0);
}
.owl-theme .owl-nav {
    top: 40%;
    left: 0;
    position: absolute;
    width: 100%;
}
.owl-carousel .owl-nav button.owl-next span, .owl-carousel .owl-nav button.owl-prev span {
    font-size: 5rem;
    color: var(--blue);
    z-index: 99;
    padding: 0px;
    position: absolute;
    top: 0;
}
.owl-carousel .owl-nav button.owl-next span{
    right: -3%;
}
.owl-carousel .owl-nav button.owl-prev span{
    left: -3%;
}

/*Brand Slider End*/
.heading h1{
    font-size: 3rem;
    font-family: var(--bree);
}
/*Gallery Section Begin*/

.gallery-section-outer{
    padding: 80px 0px;
    text-align: center;
    position: relative;
    z-index: 9999;
}
.gallery-section-outer .gallery-section{
    padding: 40px 0px 0px;

}
.gallery-section-outer .gallery-section .gallery-img{
    flex-direction: column;
    position: relative;
}
.gallery-section-outer .gallery-section .gallery-img .glimginner{
    overflow: hidden;
}
.gallery-section-outer .gallery-section .gallery-img .glimginner:hover img{
    transform: scale(1.3);
}
.gallery-section-outer .gallery-section .gallery-img img{
    width: 100%;
    transition: all ease-in .3s;
}
.galleryFullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    background: rgba(0, 0, 0, 0.70);
    display: flex;
    justify-content: center;
    align-items: center;
}

.galleryFullscreen img {
    max-width: 500px;
    max-height: 500px;
}
#closeButton{
    position: absolute;
    right: 40px;
    top: 0;
    z-index: 1000;
}
#closeButton i{
opacity: 0;
    font-size: 3rem;
    color: white;

    cursor: pointer;
}
.galleryoutersection{
    position: relative;
    width: 100%;
    height: 100%;
}


.overhide{
    overflow: hidden;
}

/*Gallery Section End*/

/*Testimonial  Section Begin*/

.testimonial-section-outer{
    padding: 0px 0px;
    text-align: center;
}

.testimonial-section-outer .heading{
    padding: 0px 0px 40px;
}
.testimonial-section-outer .testimonial{
    text-align: center;
    padding: 60px 0px 90px;
}
.testimonial-section-outer .testimonial1{
    background: url(../Testimonial/testimonialbg-1.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.testimonial-section-outer .testimonial2{
    background: url(../Testimonial/testimonialbg-2.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.testimonial-section-outer .testimonial3{
    background: url(../Testimonial/testimonialbg-3.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.testimonial-section-outer .testimonial .testimonial-img{
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
    text-align: center;
    flex-direction: column;
    align-items: center;
}
.testimonial-section-outer .testimonial .testimonial-img h3{
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--text-grey);
    padding-bottom: 10px;
}
.stars i{
    color: #EDCE23;
    font-size: 1.2rem;
}
.testimonial-section-outer .testimonial .testimonial-img img{
    width: 100px;
    border: 2px solid var(--white);
}
.testimonial-section-outer .testimonial .testimonial-content{
    width: 100%;
    padding: 0px calc(100% - 80%);
}
.testimonial-section-outer .testimonial2 .testimonial-content{
    width: 100%;
    padding: 0px calc(100% - 92%);
}
.testimonial-section-outer .testimonial .testimonial-content p{
    font-size: 1.6rem;
    font-weight: 500;
}
.testimonial-section-outer .testimonial-slider{
    border: 4px solid #89D3FF;
    padding: 20px;
    border-radius: 15px;
}

/*Testimonial  Section End*/

/*Services Section Begin*/

.services-section{
    background: var(--blue);
    padding: 40px 0px;
    margin: 80px 0px;
}
.services-section .service:nth-child(4) p{
    padding-top: 10px;
}
.services-section .service{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
}
.services-section .service img{
    transition: all ease-in .3s;
}
.services-section .service:hover img{
    animation: translate ease-in .5s 1;
}
@keyframes translate{
    0%{
        transform: translateY(0);
        opacity: 1;
    }
    50%{
        transform: translateY(-100%);
        opacity: 1;
    }
    60%{
        transform: translateY(-100%);
        opacity: 0;
    }
    80%{
        transform: translateY(100%);
        opacity: 0;
    }
    100%{
        transform: translateY(0);
        opacity: 1;
    }
}
.services-section .service p{
    color: var(--white);
    font-size: 1.4rem;
    font-weight: 500;
    margin-top: 5px;
    margin-bottom: 0;
}
.services-section .service span{
    color: var(--black);
    font-size: 1.4rem;
    font-weight: 500;
}

/*Services Section End*/

/*Get In Touch Section Begin*/

.get-in-touch-section-outer{
    background: #F3EAEA;
    padding: 80px 0px 40px;
}
.get-in-touch-section-outer .get-in-touch-section .get-in-touch-left p{
    font-size: 1.8rem;
    color: var(--text-grey);
    padding-top: 20px;
    padding-right: 20px;
    font-weight: 400;
}
.get-in-touch-section-outer .get-in-touch-section .get-in-touch-right{
    gap: 40px 0px;
}
.get-in-touch-section-outer .get-in-touch-section .get-in-touch-right .social-card{
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    width: 48%;
    align-items: center;
    border: 2px solid var(--black);
    padding: 20px;
    transition: all ease-in .3s;
    position: relative;
    overflow: hidden;
    z-index: 2;
}
.get-in-touch-section-outer .get-in-touch-section .get-in-touch-right .social-card::after{
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    transition: all ease-in .3s;
    z-index: -1;
}
.get-in-touch-section-outer .get-in-touch-section .get-in-touch-right .social-card i{
    font-size: 3rem;
    color: var(--black);
    transition: all ease-in .3s;
}
.get-in-touch-section-outer .get-in-touch-section .get-in-touch-right .social-card h6{
    font-size: 1.4rem;
    color: var(--black);
    font-weight: 500;
    padding-bottom: 5px;
    transition: all ease-in .3s;
}
.get-in-touch-section-outer .get-in-touch-section .get-in-touch-right .social-card span , .get-in-touch-section-outer .get-in-touch-section .get-in-touch-right .social-card a{
    font-size: 1.2rem;
    text-decoration: none;
    color: var(--text-grey);
    transition: all ease-in .3s;
}
.get-in-touch-section-outer .get-in-touch-section .get-in-touch-right .whatsapp:hover::after{
    background: #2BB140;
    left: 0;
}
.get-in-touch-section-outer .get-in-touch-section .get-in-touch-right .phonenumber:hover::after{
    background: var(--black);
    left: 0;
}
.get-in-touch-section-outer .get-in-touch-section .get-in-touch-right .timing:hover::after{
    background: var(--blue);
    left: 0;
}
.get-in-touch-section-outer .get-in-touch-section .get-in-touch-right .emailid:hover::after{
    background: var(--yellow);
    left: 0;
}
.get-in-touch-section-outer .get-in-touch-section .get-in-touch-right .social-card:hover ,.get-in-touch-section-outer .get-in-touch-section .get-in-touch-right .social-card:hover  span , .get-in-touch-section-outer .get-in-touch-section .get-in-touch-right .social-card:hover  a , .get-in-touch-section-outer .get-in-touch-section .get-in-touch-right .social-card:hover  h6 , .get-in-touch-section-outer .get-in-touch-section .get-in-touch-right .social-card:hover i{
    color: var(--white);
}

/*Get In Touch Section End*/

/*Footer Section Begin*/

.footer-section{
    background: var(--black);
    padding: 80px 0px;
    position: relative;
    overflow: hidden;
    z-index: 5;
}
.floatcr img{
    position: absolute;
    animation: crrotate ease-in 5s infinite;
    z-index: -1;
}
.floatcr img:nth-child(1){
    left: -5%;
    top: 0;
}
.floatcr img:nth-child(2){
    left: 10%;
    bottom: 0;
}
.floatcr img:nth-child(3){
    right: -3%;
    bottom: 0;
}
.footer-section .footer-widget ul{
    display: flex;
    flex-direction: column;
}
.footer-section .footer-widget ul h2{
    position: relative;
    display: inline-block;
    overflow: hidden;
    font-size: 2.4rem;
    color: var(--white);
    font-weight: 600;
    padding-bottom: 10px;
    margin-bottom: 20px;
}
.footer-section .footer-widget ul h2::after{
    position: absolute;
    content: "";
    width: 20000%;
    height: 2px;
    bottom: 0;
    left: 0;
    z-index: 1;
    background: url(../images/line2.svg);
    background-repeat: repeat;
    animation: line linear 1200s infinite;
}
.footer-section .footer-widget ul li{
    display: block;
}
.footer-section .footer-widget ul li a{
    position: relative;
    overflow: hidden;
    display: inline-block;
    color: var(--white);
    font-size: 1.6rem;
    padding: 10px 0px;
}
.footer-section .footer-widget ul li a:hover{
    text-decoration: underline;
}
.footer-section .footer-widget ul li a i{
    font-size: 1.3rem;
    padding-left: 5px;
}
/* .footer-section .footer-widget ul li a:hover::after {
    position: absolute;
    content: "";
    width: 20000%;
    height: 2px;
    bottom: 0;
    left: 0;
    z-index: 1;
    background: url(../images/line.svg);
    background-repeat: repeat;
    animation: line linear 440s infinite;
} */
.footer-section .footer-widget h2{
    color: var(--white);
}
.footer-section .footer-widget .social-card{
    display: flex;
    justify-content: space-between;
}
.footer-section .footer-widget .social-card a i{
    font-size: 1.6rem;
    color: var(--white);
    padding: 7px;
    border-radius: 7px;
}
.footer-section .footer-widget .social-card a i:nth-child(1){
    background: #4267B2;
}
.footer-section .footer-widget .social-card a:nth-child(2) i{
    background: #DB004D;
}
.footer-section .footer-widget .social-card a:nth-child(3) i{
    background: #2BB140;
}
.footer-section .footer-widget .social-card a:nth-child(5) i{
    background: #F92828;
}
.facebook-api iframe{
    width: 100%;
    height: 100%;
}
.copyright{
    padding: 15px 0;
    background: var(--blue);
    text-align: center;
}
.copyright p a img{
    width: 100px;
    margin-right: 5px;
}
.copyright p {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    color: var(--white); 
    font-size: 1.6rem;
}
.footer-section .newsletter{
    position: relative;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    margin-top: 10px;
}
.footer-section .newsletter input{
    width: 100%;
    padding: 10px 0px 10px 10px;
    border-radius: 5px 15px 15px 5px;
    font-size: 1.6rem;
    background: #343232;
}
.footer-section .newsletter button{
    position: absolute;
    right: 0;
    top: 0;
    border-radius: 0px 15px 15px 0px;
    overflow: hidden;
}

/*Footer Section End*/


/*Animation Delay*/

#products .product-card:nth-child(2){
    animation-delay: 0.2s;
}
#products .product-card:nth-child(3){
    animation-delay: 0.4s;
}
#products .product-card:nth-child(4){
    animation-delay: 0.6s;
}




/*Whatspp Api*/

.whatsappapi{
    position: fixed;
    left: 40px;
    bottom: 40px;
    z-index: 99;
}
.whatsappapi a i{
    font-size: 4.8rem;
    color: white;
    background: #2BB140;
    border-radius: 50%;
}