@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sofia&display=swap');
html{
	scroll-behavior: smooth;
}
body{
    overflow-x:hidden;
    font-family: "Roboto", serif;
    position: relative;
}
body::-webkit-scrollbar {
    width: 4px;
}

body::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px #fff;
}

body::-webkit-scrollbar-thumb {
    background-color: #df0424;
    outline: 1px solid #df0424;
    border-radius: 5px;
}
.header.sticky{
    position: fixed;
    top: 0px;
    left: 0;
    width: 100%;
    z-index: 99999999999999;
    background: #fff;
    transition: 0.5s all ease;
}
.headerUp{
    background: #df0424;
    padding: 7px 0;
}
.headerUp .left{}
.headerUp .left .phone{
    border-right: 1px solid #ddd;
    margin-right: 15px;
    padding-right: 15px;
}
.headerUp .left .phone a{
    font-size: 14px;
    display: inline-flex;
    gap: 5px;
    align-items: center;
    color: #fff;
    font-weight: 400;
}
.headerUp .left .phone a i{
    color: #fff;
}
.headerUp .right{}
.headerUp .right ul{}
.headerUp .right ul li{
    margin-left: 15px;
}
.headerUp .right ul li a{
    color: #fff;
    font-size: 15px;
}

.icon-close2 {
    display: none;
}

.icon-menu {
    display: none;
}

.logoMenu{
    padding: 10px 0;
    /* box-shadow: 0 5px 5px #ddd; */
}
.logoMenu .logo{
    width: 8%;
}
.logoMenu .logo a{}
.logoMenu .logo a img{}
.logoMenu .menu{}
.logoMenu .menu ul{}
.logoMenu .menu ul li{
    padding: 12px 20px;
    /* background: #df0424; */
    position: relative;
}
.logoMenu .menu ul li a{
    color: #000;
    font-weight: 600;
    font-size: 15px;
}
.logoMenu .menu>ul>li>ul {
    position: absolute;
    left: 0;
    z-index: 9999999;
    background: #fff;
    top: 120%;
    border-radius: 4px;
    width: 300px;
    transform: rotateX(90deg);
    transform-origin: top;
    transition: 0.5s all ease;
    box-shadow: 0 0 5px #ddd;
}

.logoMenu .menu>ul>li:hover>ul {
    transform: rotateX(0deg);
    transition: 0.5s all ease;
}
.logoMenu .menu>ul>li>ul>li{
    border-bottom: 1px solid #df04251a;
    padding: 10px 15px;
    font-size: 13px;
}
.logoMenu .menu>ul>li>ul>li>a{
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #000;
}

.logoMenu .contact{}
.logoMenu .contact .help {
    margin-right: 10px;
}

.logoMenu .contact .help i {
    font-size: 40px;
    color: #df0424;
    margin-right: 10px;
    display: inline-block;
}

.logoMenu .contact .help h6 {
    font-size: 14px;
}

.logoMenu .contact .help h4 {
    font-size: 28px;
}

.logoMenu .contact .help a {
    /* color: #df0424; */
    color: #000;
}


.hero{
    height: 80vh;
    width: 100%;
    background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,236,230,1) 50%, rgba(255,236,230,1) 100%);
    /* padding: 5vh 0; */
}

.carousel {
    overflow: hidden;
    width: 100%;
    position: relative;
    margin: 0 auto;
    height: 80vh;
}

.carousel .carousel-item {
    position: relative;
}

.carousel .carousel-item,
.carousel-item-visible {
    display: none;
}

.carousel .carousel-item img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    animation: sliderzoom 20s linear infinite;
}

@keyframes sliderzoom {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.5);
    }
}





.carousel .carousel-item-visible {
    display: block;
    animation: fadeVisibility 0.5s;
}

.carousel .carousel-item .carDetails {
    background: #000000af;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}



.carousel .carousel-item .carDetails img {
    width: 120px;
    height: 120px;
    margin-bottom: 80px;
    margin-top: 30px;
}



.carousel .carousel-actions {
    display: flex;
    width: 100%;
    justify-content: space-between;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.carousel .carousel-actions div {
    border-radius: 5px;
    width: 40px;
    height: 40px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    text-indent: 0;
    outline: none;
    border: 2px solid #ddd;
    background: none;
    color: #ddd;
    display: grid;
    place-content: center;
    margin: 0px 10px;
}

.carousel .carousel-actions div:hover {
    border: 2px solid #ff0000;
    color: #fff;
    background: #ff0000;
}

.carousel .carousel-actions button:focus {
    border: none;
}

.carousel .carousel-actions button#carousel-prev {
    margin-left: 20px;
}

.carousel .carousel-actions button#carousel-next {
    margin-right: 20px;
}

@keyframes fadeVisibility {
    0% {
        opacity: 0.8;
    }

    100% {
        opacity: 1;
        transform: opacity linear;
    }
}


.hero .left{
    width: 50%;
    background: #0000007c;
    padding: 30px;
}
.sofia{
    font-weight: 600;
    color: #df0424;
    margin-bottom: 20px;
    font-size: 24px;
}
.title{
    font-size: 35px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #000;
}
.para{
    font-size: 15px;
    font-weight: 400;
    line-height: 26px;
    margin-bottom: 20px;
    color: #000;
}
.hero .left h4{
    font-weight: 600;
    color: #fff;
    margin-bottom: 20px;
    font-size: 35px;
}
.hero .left h1{
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #fff;
}
.hero .left p{
    font-size: 13px;
    font-weight: 500;
    line-height: 26px;
    margin-bottom: 20px;
    color: #fff;
    text-align: justify;
}


.aboutUs{
    padding: 40px 0;
}
.aboutUs .left{
    width: 47%;
    display: flex;
    gap: 30px;
    align-items: flex-start;
    position: relative;
}
.aboutUs .left img{
    width: 100%;
}
.aboutUs .left .exp{
    position: absolute;
    transform: rotate(-90deg);
    background: #df0424;
    padding: 20px;
    gap: 15px;
    top: 107px;
    left: -100px;
    width: 268px;
}
.aboutUs .left .exp h2{
    font-size: 25px;
    color: #fff;
    text-align: center;
}
.aboutUs .left .exp p{
    font-size: 16px;
    font-weight: 400;
    line-height: 25px;
    color: #fff;
    text-align: center;
}
.aboutUs .right{
    width: 47%;
}
.aboutUs .right ul{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap:12px;
    margin-bottom: 20px;
}
.aboutUs .right ul li{
    display: flex;
    gap: 8px;
    align-items: start;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
}
.aboutUs .right ul li i{
    font-size: 18px;
    color: #df0424;
}

.ceonm img{
    width: 50px;
    height: 50px;
    margin-right: 20px;
    border-radius: 50%;
    border: 2px solid #df0424;
    padding: 2px;
}
.ceonm .nme h3{
    font-size: 14px;
    letter-spacing: 1px;
    font-weight:600;
    color: #df0424;
    line-height: 24px;
}
.ceonm .nme p.ceo{
    font-size: 13px;
    letter-spacing: 2px;
    margin-bottom: 0;
}




.explore{
    background: #f1f1f1;
    padding: 40px 0;
}
.explore h2{
    font-size: 32px;
    font-weight: 400;
    border-bottom: 1px solid #df0424;
    padding-bottom: 15px;
    margin-bottom: 20px;
}
.explore h2 span{
    font-weight: 500;
    color: #df0424;
}
.explore .productList{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-bottom: 30px;
}
.explore .productList .sinProduct{
    box-shadow: 0 0 30px #ddd;
    border: 1px solid #f1f1f1;
    background: #fff;
}
.explore .productList .sinProduct .img{
    margin-bottom: 15px;
}
.explore .productList .sinProduct .img img{
    height: 200px;
    object-fit: cover;
}
.explore .productList .sinProduct .info{}
.explore .productList .sinProduct .info h5{
    font-size: 18px;
    color: #df0424;
    font-weight: 500;
    text-align: center;
    margin-bottom: 12px;
    text-transform: capitalize;
}
.explore .productList .sinProduct .info p{
    font-size: 13px;
    font-weight: 400;
    color: #000;
    text-align: center;
    margin-bottom: 12px;
    line-height: 24px;
    padding: 0 12px;
}
.explore .productList .sinProduct .info p a{
    font-size: 11px;
    padding: 4px 20px;
}


.slides{
    display: flex;
    width: 100%;
    height: 70vh;
}
.slides .sinSlide{
    width: 20%;
    position: relative;
    cursor: pointer;
    transition: 0.5s all ease;
}
.slides .sinSlide.active{
    width: 40%;
    transition: 0.5s all ease;
}
.slides .sinSlide img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.slides .sinSlide .info{
    position: absolute;
    width: calc(100% - 60px);
    height: calc(100% - 60px);
    background: #00000086;
    top: 0;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: end;
}
.slides .sinSlide .info h2{
    color: #fff;
    font-size: 28px;
    text-transform: uppercase;
    /* transform: rotate(-90deg); */
    /* transform-origin: left; */
    margin-bottom: 15px;
    width: 300px;
}
.slides .sinSlide .info p{
    font-size: 14px;
    line-height: 25px;
    color: #fff;
    margin-bottom: 15px;
    display: none;
}
.slides .sinSlide .info a{
    text-align: center;
    display: none;
}
.slides .sinSlide.active .info p,
.slides .sinSlide.active .info a{
    display: block;
}




.services{
    padding: 40px 0;
}
.services .container{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.services .sinService{
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}
.services .sinService img{}
.services .sinService h5{
    font-size: 17px;
    font-weight: 500;
    color: #df0424;
    text-align: center;
    margin-bottom: 10px;
}
.services .sinService h4{
    font-size: 18px;
    font-weight: 500;
    color: #000;
    text-align: center;
    margin-bottom: 10px;
}
.services .sinService p{
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    margin-bottom: 15px;
    line-height: 24px;
}



.Gallery{
    padding: 40px 0px;
    background: #f1f1f1;
}
.Gallery h1{
    color: #000;
    font-family: "DM Sans", Sans-serif;
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
}
.Gallery h5{
    color: #000;
    font-family: "DM Sans", Sans-serif;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 40px;
    text-align: center;
    line-height: 22px;
}
.Gallery .gallry{
    display: flex;
    row-gap: 25px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}
.Gallery .gallry .singleSer{
    border-radius: 3px;
    transition: 0.5s all ease;
    margin: 0 15px;
    width: calc(25% - 30px);
}
.Gallery .gallry .singleSer:hover{
    transform: scale(1.05);
    transition: 0.5s all ease;
}
.Gallery .gallry .singleSer img{
    border: 1px solid #df042433;
    transition: 1s all ease;
    height: 180px;
    object-fit: cover;
}
.Gallery .gallry .singleSer:hover img{
    transform: rotateY(360deg);
    transition: 1s all ease;

}

.Gallery .gallry .singleSer .data p{
    margin-top: 15px;
}/* 
.Gallery .gallry .singleSer .data p a{
    font-size: 11px;
    font-weight: normal;
    line-height: 1em;
    letter-spacing: 2px;
    background: #df0424;
    color: #FFFFFF;
    border-radius: 25px;
    box-shadow: 0px 0px 0px 0px rgb(0 0 0 / 10%);
    padding: 10px 20px 10px 20px;
    border: 1px solid #fff;
    transition: 0.5s all ease;
    display: inline-block;
    margin-bottom: 10px;
}
.Gallery .gallry .singleSer .data p a:hover{
    background: transparent;
    color: #df0424;
    border: 1px solid #df0424;
} */





/* Footer */
.footer{
	background: #000000;
	padding: 50px 0px 0px 0px;
}
.footer .container{
    gap: 3%;
}
.flogo{
    flex: 1.5;
}
.flogo a{
    display: block;
    margin-bottom: 20px;
}
.flogo img{
    width: 100px;
}
.flogo p,
.fSocial p{
    color: #c7c7c7;
    font-size: 12px;
    line-height: 20px;
    margin-bottom: 15px;
}
.flogo ul li a span{
    font-size: 13px;
    color: #c7c7c7;
}

.Company,  
.fSocial{
    flex: 1;
    margin-bottom: 20px;
}
.account{
    flex: 2;
    margin-bottom: 20px;
}
.kuteShop h4, 
.Company h4, 
.account h4, 
.fSocial h4{
	margin-bottom: 20px;
	color: #f1f1f1;
    text-transform: capitalize;
    font-size: 16px;
    font-weight: 700;
}
.Company ul, 
.account ul{
	display: block;
    margin-right: 20px;
} 
.Company ul li, 
.account ul li{
	display: flex;
    align-items: center;
	font-size: 13px;
	margin: 8px 0px;
    line-height: 24px;
}

.Company ul li a, 
.account ul li a{
	color: #9c9c9c;
}

.Company ul li i, 
.account ul li i{
	color: #df0424;
    margin-right: 10px;
}
ul.socialIcon{
	margin-bottom: 10px;
    display: flex;
}
ul.socialIcon li a{
    background: #fff;
	color: #df0424!important;
	display: grid;
	place-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	font-size: 13px;
    margin-right: 10px;
}
ul.socialIcon li a span{
	color: #000;
}


.fSocial ul.contactDetails{
    justify-content: left;
    margin-bottom: 10px;
}
.fSocial ul.contactDetails li{
    font-size: 13px;
    margin-bottom: 10px;
}
.fSocial ul.contactDetails li a{
    color: #9c9c9c;
    display: flex;
    align-items: center;
}
.fSocial ul.contactDetails li a i{
    color: #000;
    background: #fff;
    padding: 10px;
    border-radius: 50%;
    margin-right: 10px;
}



.copyRight{
	padding: 12px 0px;
	color: #fff;
	font-size: 14px;
    background-color: #df0424;
}







.banner{
    width: 100%;
    padding: 70px 0px;
    background: linear-gradient(#000000ed, #000000f7), url(img/banner1.jpg) no-repeat center center / cover;
}
.banner h2{
    color: #fff;
    font-size: 32px;
    text-align: center;
    font-weight: 500;
}



.testimonial{
    padding: 70px 0;
    background: #fcfcfc;
}
.testimonial h2{
    text-align: center;
    font-size: 30px;
    font-weight: 400;
    margin-bottom: 50px;
    position: relative;
    padding-bottom: 20px;
}
.testimonial h2::before{
    content: "";
    width: 50%;
    height: 2px;
    background: linear-gradient(90deg, #fff, #df0424, #fff);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
.testimonial h2::after{
    content: "";
    width: 10px;
    height: 10px;
    background: #df0424;
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid #fff;
    border-radius: 50%;
}
.testimonial .slider{}
.testimonial .slider .item{
    margin: 0 8px;border: 1px solid #ffeba3;padding: 20px;height: 220px;border-radius: 5px;
    background: #fff;
}
.testimonial .slider .item .head{display: flex;justify-content: space-between;align-items: flex-start;margin-bottom: 15px;}
.testimonial .slider .item .head img{width: 55px;}
.testimonial .slider .item .head .data{margin-left: 8px;}
.testimonial .slider .item .head .data h3{font-size: 14px;color: #5d6f80;font-weight: 600;}
.testimonial .slider .item .head .data ul{display: flex;}
.testimonial .slider .item .head .data ul li{color: #df0424;}
.testimonial .slider .item .head .data h6{font-size: 10px;font-weight: 500;}
.testimonial .slider .item .head img.location{width: 20px;}
.testimonial .slider .item p{font-size: 13px;line-height: 24px;}

.testimonial .slick-dots li {
    position: relative;
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0 3px;
    padding: 0;
    cursor: pointer;
}
.testimonial .slick-dots li button {
    padding: 4px;

}
.testimonial .slick-dots li.slick-active button {
   background: #df0424;

}






.contactUs{
    padding: 75px 0;
}
.contactUs .details{
    display: flex;
    gap: 2%;
    margin-bottom: 40px;
}
.contactUs .details .sin{
    background: #fff;
    box-shadow: 0 0 10px #ddd;
    padding: 30px;
    text-align: center;
    margin-bottom: 15px;
    position: relative;
    width: 31%;
    border-radius: 5px;
}
.contactUs .details .sin::after{
    content: '';
    width: 40px;
    height: 40px;
    border-top: 1px solid #df0424;
    border-right: 1px solid #df0424;
    border-radius: 0 10px 0 0;
    position: absolute;
    top: 30px;
    right: 30px;
    transition: 0.5s all ease;
}
.contactUs .details .sin:hover::after{
    width: 70px;
    height: 70px;
    transition: 0.5s all ease;
}
.contactUs .details .sin i{
    background: #df0424;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 50%;
    font-size: 22px;
    color: #fff;
    display: inline-block;
}
.contactUs .details .sin h4{
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
}
.contactUs .details .sin p{
    font-size: 13px;
    color: #111111;
}
.getinTouch{
    font-size: 32px;
    font-weight: 700;
    color: #df0424;
    text-align: center;
    margin-bottom: 50px;
}


.contactUs .right{
    width: calc(100% - 60px);
    background: #fff;
    padding: 30px;
    box-shadow: 0 0 10px #ddd;
}
.contactUs .right form{}
.contactUs .right form .flex-between-center.column{
    gap: 2%;
    margin-bottom: 20px;
}
.contactUs .right form .input-control{
    /* border-bottom: 1px solid #c2c2c2; */
    width: 50%;
    display: flex;
    position: relative;
    background: #f1f1f1;
    box-shadow:0 0 2px #a8a8a8;
}
.contactUs .right form .input-control::after{
    content: "";
    position: absolute;
    height: 1px;
    width: 0%;
    background: #df0424;
    left: 0;
    bottom: 0;
    transition: 0.5s ease;
}
.contactUs .right form .input-control:hover::after{
    width: 100%;
    transition: 0.5s ease;
}
.contactUs .right form .input-control.textarea{
    width: 100%;
    font-size: 14px;
}
.contactUs .right form .input-control i{
    display: inline-block;
    padding: 7px;
    color: #df0424;
    background: #f0f0f0;
}
.contactUs .right form .input-control input{
    width: 100%;
    padding: 6px;
    border: none;
    background: none;
    font-size: 12px;
    padding: 10px;
}
.contactUs .right form .input-control input::placeholder,
.contactUs .right form .input-control textarea::placeholder{
    color: #000;
}
.contactUs .right form .input-control textarea{
    width: 100%;
    padding: 6px;
    border: none;
    background: none;
}
.contactUs .right form .submit{
    background: #df0424;
    padding: 10px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20%;
    color: #fff;
    cursor: pointer;
    border: none;
}
.contactUs .right form .submit i{
    margin-right: 15px;
}
.contactUs .right form .submit input[type="submit"]{
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
}


.contact-map{width: 100%;}
.contact-map iframe{
    width: 100%;
    height: 400px;
}



/* history */
.history {
    width: 100%;
    padding: 50px 0px;
    background: #df0424;
    /* background: linear-gradient(#86b200bf,#86b200bf), url('img/Fotolia_71015817_M.jpg') no-repeat center / cover; */
    position: relative;
    /* clip-path: polygon(0 0, 0 51%, 0 85%, 50% 100%, 100% 85%, 100% 48%, 100% 0, 50% 15%); */
}
.history .container .row{
    padding: 0px 60px;
}

.history .shape1 {
    width: 300px;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0.5;
    animation: shape 2s infinite alternate-reverse;
}

.history .shape2 {
    width: 300px;
    position: absolute;
    right: 0;
    bottom: 0;
    animation: shape 2s infinite alternate-reverse;
}

.history span {
    font-size: 30px;
    border: 1px solid #fff;
    padding: 20px;
    border-radius: 50%;
    /* background: #2196f3; */
    display: inline-block;
    margin-right: 12px;
    width: 35px;
    height: 35px;
    display: grid;
    place-content: center;
}

.history .hisData {}

.history h2 {
    font-size: 25px;
    text-align: left;
}

.history h5 {
    font-size: 15px;
}



.whatsapp{
    position: fixed;
    top: 92vh;
    left: 20px;
    cursor: pointer;
    display: grid;
    place-content: center;
    -webkit-transition: .5s ease;
    transition: .5s ease;
    z-index: 999999;
}
.whatsapp p{
    display: flex;
    align-items: center;
}
.whatsapp p i{
    width: 40px;
    height: 40px;
    background: #49e670;
    display: grid;
    place-content: center;
    border-radius: 50%;
    font-size: 24px;
    color: #fff;
    margin-right: 10px;
    position: relative;
}
.whatsapp p i::after{
    content: "";
    position: absolute;
    right: -9px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #49e670;
}
.whatsapp p span{
    background: #fff;
    padding: 5px 15px;
    border-radius: 5px;
    box-shadow: 0 0 10px #000;
    color: #000;
    font-size: 13px;
}


.callUs{
    position: fixed;
    top: 92vh;
    right: 20px;
    cursor: pointer;
    display: grid;
    place-content: center;
    -webkit-transition: .5s ease;
    transition: .5s ease;
    z-index: 999999;
}
.callUs p{
    display: flex;
    align-items: center;
}
.callUs p i{
    width: 40px;
    height: 40px;
    background: #df0424;
    display: grid;
    place-content: center;
    border-radius: 50%;
    font-size: 24px;
    color: #fff;
    margin-left: 10px;
    position: relative;
}
.callUs p i::after{
    content: "";
    position: absolute;
    left: -9px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 5px solid transparent;
    border-right: 5px solid #df0424;
    border-bottom: 5px solid transparent;
    border-left: 5px solid transparent;
}
.callUs p span{
    background: #fff;
    padding: 5px 15px;
    border-radius: 5px;
    box-shadow: 0 0 10px #000;
    color: #000;
    font-size: 13px;
}




.showImg {
    position: fixed;
    top: 0px;
    left: 0;
    width: 100vw;
    height: 90vh;
    background: #000000b3;
    z-index: 199999999999999;
    transform: scale(0);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5vh 0;
    transition: 0.5s all ease;
    
}
.showImg.active {
    transform: scale(1);
    transition: 0.5s all ease;
}
.showImg img {
    max-width: 500px;
}
.showImg span {
    color: #fff;
    position: absolute;
    right: 40px;
    top: 20px;
    display: block;
    z-index: 199999999999999;
}
@media only screen and (min-width: 481px) and (max-width: 767px) {
    .showImg img {
        max-width: 630px;
    }
}
@media only screen and (min-width: 320px) and (max-width: 480px) {
    .showImg img {
        max-width: 320px;
    }
    
}





.category{
    padding: 30px 0;
}
.category .container{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap:50px;
}
.category .left{}
.category .left h2{
    font-size: 25px;
    font-weight: 500;
    margin-bottom: 15px;
}
.category .left p{
    font-size: 13px;
    line-height: 22px;
    text-align: justify;
}
.category .right,
.glimg .singleSer{
    position: relative;
}
.category .right img{}
.category .right .info,
.glimg .singleSer .info{
    position: absolute;
    top: 0;
    left: 0;
    background: #000000b3;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    transform: scale(0);
    transition: 0.5s;
}
.category .right:hover .info,
.glimg .singleSer:hover .info{
    transform: scale(1);
    transition: 0.5s;
}

.category .right .info p{
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 15px;
}
.glimg .singleSer .info p{
    font-size: 12px;
    margin-bottom: 10px;
}




.popup {
    position: relative;
    height: 100%;
    width: 100%;
    background: #e3f2fd;
}
.popup .popupBox {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.overlay {
    position: fixed;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.65);
    opacity: 0;
    pointer-events: none;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.popup.active .overlay {
    opacity: 1;
    pointer-events: auto;
}

.popupBox {
    max-width: 306px;
    width: 100%;
    padding: 25px 30px;
    border-radius: 5px;
    background-color: #fff;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    transform: translate(-50%, -50%) scale(1.2);
    position: relative;
    z-index: 9999999999999999999;
    border: 2px solid #df0424;
}

.popup.active .popupBox {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

.popupBox i.close-btn {
    font-size: 20px;
    color: #df0424;
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
    background: #df042430;
    border-radius: 50%;
    padding: 7px;
    display: block;
}

.popup form h3{
    text-align: center;
    font-size: 18px;
    color: #df0424;
    margin-bottom: 15px;
    font-weight: 500;
    border-bottom: 1px solid #ddd;
    padding-bottom: 12px;
}
.popup form .controll{
    margin-bottom: 12px;
}
.popup form .controll label{
    display: block;
    font-size: 13px;
}
.popup form .controll input,
.popup form .controll select,
.popup form .controll select,
.popup form .controll textarea{
    width: calc(100% - 30px);
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 13px;
}
.popup form .controll select{
    width:100%;
    padding: 10px 5px!important;
}
.popup form input[type="submit"]{
    width: 100%;
    background: #df0424;
    padding: 12px 0;
    border-radius: 3px;
    border: none;
    color: #fff;
    font-size: 13px;
}




.paynow {
    position: relative;
    height: 100%;
    width: 100%;
    background: #f1f1f1;
    padding: 50px 0;
    display: flex;
    justify-content: center;
}
.paynowBox {
    max-width: 306px;
    width: 100%;
    padding: 25px 30px;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    border: 2px solid #ddd;
}

.paynow form h3{
    text-align: center;
    font-size: 18px;
    color: #df0424;
    margin-bottom: 15px;
    font-weight: 500;
    border-bottom: 1px solid #ddd;
    padding-bottom: 12px;
}
.paynow form .controll{
    margin-bottom: 12px;
}
.paynow form .controll label{
    display: block;
    font-size: 13px;
    margin-bottom: 5px;
}
.paynow form .controll input,
.paynow form .controll select,
.paynow form .controll select,
.paynow form .controll textarea{
    width: calc(100% - 30px);
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 13px;
}
.paynow form .controll select{
    width:100%;
    padding: 10px 5px!important;
}
.paynow form button[type="submit"],
.paynow form input[type="submit"]{
    width: 100%;
    background: #df0424;
    padding: 12px 0;
    border-radius: 3px;
    border: none;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
}











.select-box {
    position: relative;
    width: calc(100% - 6px);
    padding: 2px 3px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 14px;
}

.select-box .selected-option input[name="cCode"] {
    width: 50px;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 2px;
    font-size: 12px;
}

input.number {
    width: calc(100% - 30px);
    padding: 10px 15px 10px 5px!important;
    border: none!important;
    border-radius: 3px;
    font-size: 14px;
}

/* .select-box input:focus {
    border: 1px solid #000;
} */

.selected-option {
    background-color: #fff;
    border-radius: .5rem;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.selected-option div.codeFlag {
    position: relative;
    text-align: center;
    cursor: pointer;
}

.selected-option div.codeFlag::after {
    position: absolute;
    content: "";
    right: 8px;
    top: 45%;
    transform: translateY(-50%) rotate(45deg);
    border-right: 5px solid #000;
    border-bottom: 5px solid #000;
    border-top: 5px solid transparent;
    border-left: 5px solid transparent;
    transition: .2s;
}

.selected-option div.codeFlag::after .flag.active{
    transform: translateY(-20%) rotate(225deg);
}

.select-box .options {
    position: absolute;
    top: 50px;
    width: calc(100% - 15px);
    background-color: #ffffff;
    border-radius: 3px;
    display: none;
    padding: 10px 0 10px 10px;
    border: 1px solid #ddd;
}

.select-box .options.active {
    display: block;
}

.select-box .options::before {
    position: absolute;
    content: "";
    left: 15px;
    top: -18px;
    width: 0;
    height: 0;
    border: .6rem solid transparent;
    border-bottom-color: #000;
}

input.search-box {
    background: #f4f4f4;
    color: #000;
    padding: 8px;
    font-size: 12px;
    border: none;
    margin-bottom: 5px;
    width: calc(100% - 42px)!important;
}

svg.iconify.iconify--flag {
    margin: 0 5px;
}

.select-box ol {
    list-style: none;
    max-height: 200px;
    overflow: overlay;
}

.select-box ol::-webkit-scrollbar {
    width: 0.6rem;
}

.select-box ol::-webkit-scrollbar-thumb {
    width: 0.4rem;
    height: 3rem;
    background-color: #ccc;
    border-radius: .4rem;
}

.select-box ol li {
    padding: 8px;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
}

.select-box ol li.hide {
    display: none;
}

.select-box ol li:not(:last-child) {
    border-bottom: 1px solid #eee;
}

.select-box ol li:hover {
    background-color: lightcyan;
}

.select-box ol li .country-name {
    margin-left: .4rem;
}

.select-box ol li input {
    width: 45px!important;
    padding: 0!important;
    text-align: right!important;
    border: none!important;
    background: none!important;
}





.glimg {
    padding-top: 30px;
}
.glimg .gallry{
    display: flex;
    row-gap: 25px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}
.glimg .gallry .singleSer{
    border-radius: 3px;
    transition: 0.5s all ease;
    margin: 0 15px;
    width: calc(25% - 30px);
}
.glimg .gallry .singleSer:hover{
    transform: scale(1.05);
    transition: 0.5s all ease;
}
.glimg .gallry .singleSer img{
    border: 1px solid #df042433;
    transition: 1s all ease;
    height: 180px;
    object-fit: cover;
}
.glimg .gallry .singleSer:hover img{
    transform: rotateY(360deg);
    transition: 1s all ease;

}









.news {
    padding: 50px 0px 50px 0px;
    background: #fcfcfc;
}

.news h5 {

    text-transform: uppercase;
    font-size: 16px;
    color: #000;
    font-weight: 600;
    margin-bottom: 20px;
}

.news h2 {
    font-size: 28px;
    color: #df0424;
    /* width: 60%; */
    margin-bottom: 50px;
    line-height: 30px;
}

.news .allnews {
    display: flex;
    flex-wrap: wrap;
    gap: 3%;
}

.news .allnews .sinnews {
    width: 31%;
    box-shadow: 0px 10px 60px 0px #ddd;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 40px;
}

.news .allnews .sinnews .newsImg {
    width: 100%;
    height: 235px;
    position: relative;
}

.news .allnews .sinnews .newsImg video {
    height: 100%;
    object-fit: cover;
    width: 100%;
    position: relative;
}

.news .allnews .sinnews .newsImg img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.news .allnews .sinnews .newsImg .icon {
    background: #df0424;
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    padding: 10px 12px;
    font-size: 12px;
    color: #fff;
    border-radius: 5px 0px 0px 0px;
}

.news .allnews .sinnews .newsImg::before {
    content: '';
    width: 100%;
    height: 100%;
    background: #00000082;
    position: absolute;
    top: -100%;
    left: 0;
    transition: 0.5s all ease;
}

.news .allnews .sinnews:hover .newsImg::before {
    top: 0%;
}

.news .allnews .sinnews .newsImg .icon span {
    margin-right: 10px;
}

.news .allnews .sinnews .newsInfo {
    padding: 15px 20px 20px 20px;
}

.news .allnews .sinnews .newsInfo h6 {
    font-size: 12px;
    text-transform: capitalize;
    font-weight: 400;
    margin-bottom: 10px;
    padding-top: 10px;
    position: relative;
}

.news .allnews .sinnews .newsInfo h6 span.icons {
    margin-right: 10px;
}

.news .allnews .sinnews .newsInfo h5 {
    font-size: 16px;
    text-transform: capitalize;
    font-weight: 600;
    margin-bottom: 10px;
    padding-top: 15px;
    position: relative;
}

.news .allnews .sinnews .newsInfo h5 a {
    color: #df0424;
}

.news .allnews .sinnews .newsInfo h5::before {
    content: '';
    width: 60px;
    height: 3px;
    background: linear-gradient(45deg, #df0424, #df0424);
    position: absolute;
    top: 0;
    left: 0;
}

.news .allnews .sinnews .newsInfo p {
    font-size: 14px;
    line-height: 20px;
    color: #818181;
    margin-bottom: 10px;
}

.news .allnews .sinnews .newsInfo p a {
    color: #df0424;
}






.blogdetails {
    padding: 0px 0;
}

.blogdetails .container {
    background: #fff;
    box-shadow: 0 0 5px #c2c2c2;
    padding: 30px;
}

.blogdetails img {
    /* width: 60%;
    margin: 20px auto 30px auto;
    display: block; */
    margin-bottom: 30px;
}

.blogdetails h2 {
    font-size: 30px;
    color: #df0424;
    margin-bottom: 20px;
    font-weight: 600;
}

.blogdetails p {
    font-size: 15px;
    color: #6D6F72;
    margin-bottom: 15px;
    font-weight: 400;
    line-height: 25px;
}