@import url("https://fonts.googleapis.com/css2?family=Marcellus&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
:root {
    --main-color: #32383d;
    --carousel-nav-bg: #000;
}

*{margin: 0;padding: 0;box-sizing: border-box;font-family: "Inter", serif;}
body{position: relative;scroll-behavior: smooth;}
a{text-decoration: none;}
button{cursor: pointer;}
img{width: 100%;height: auto;display: block;}
ol,ul{list-style: none;}



/************* BLOG HOMEPAGE *****************/

.head-menu{ width: 1140px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
.head-menu-links, .head-menu-social-media{ display: flex; justify-content: space-between; align-items: center; }
.head-menu-links li a, .head-menu-social-media li a{color: #000;display: block; padding: 12px; font-size: 14px; text-decoration: none; transition: all 0.2s linear; }
.head-menu-links li a:hover{text-decoration: underline;}
.head-menu-social-media li:nth-child(1) a:hover{background-color: #1877F2;color: #fff;}
.head-menu-social-media li:nth-child(2) a:hover{background-color: #E1306C;color: #fff;}
.head-menu-social-media li:nth-child(3) a:hover{background-color: #1DA1F2;color: #fff;}

.blog-main-logo{background-color: #000;text-align: center;}
.blog-main-logo a{display: inline-block;padding: 40px 0;}
.blog-main-logo a img{width: 350px;}

.toggleMenu, .nav-cross, .nav-overlay, .blog-nav-logo { display: none; }
.nav-cross img { width: 70%; height: auto; }
.blog-nav{background: #fcfcfc;box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);}
.blog-nav-ul{display: flex; justify-content: center; align-items: center; }
.blog-nav-li{position: relative;}
.blog-nav-li > a{box-shadow: -1px 0 0 0 rgba(0, 0, 0, .05);background: #fcfcfc;padding: 16px;color: #4a4a4a; display: flex; justify-content: center; align-items: center; gap: 5px; white-space: nowrap; font-size: 16px; font-weight: 400; transition: all 0.15s ease-in-out; }
.blog-nav-li > a:hover{box-shadow: 0 2px 2px rgba(0, 0, 0, .1);background: #fff;color: var(--main-color);}
.blog-nav-li > a i{font-size: 14px;width: 16px;margin-top: 4px;}
.sub-menu{ position: absolute; z-index: 10; width: 250px; display: none; margin: 0; background-color: #fff; box-shadow: 0 6px 12px rgba(0, 0, 0, .175); }
.sub-menu-li{text-align: left;border-bottom: 1px solid rgba(0, 0, 0, .05);}
.sub-menu-li:last-child{border-bottom: none;}
.sub-menu-li a{padding: 16px;display: block;color: #4a4a4a;transition: all 0.2s ease-in-out;}
.sub-menu-li a:hover{color: var(--main-color);}
.blog-nav-li:hover .sub-menu{display: block;}
.blog-search-input{position: absolute;right: 0;display: none;z-index: 2;}
.blog-search-input input{ padding: 15px; width: 300px; border: none; border-top: 2px solid var(--main-color);outline: none; }


.blog-banner-item{position: relative;width: auto;height: 250px;}
.blog-banner-item-link{display: block;width: 100%; height: 100%;overflow: hidden; }
.blog-banner-item-link img{object-fit: cover;height: 100%;transform: scale(1);transition: all 0.15s linear;}
.blog-banner-overlay{ position: absolute; /* display: block; */ width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.4); z-index: 2; cursor: pointer; transition: all 0.15s linear; }
.blog-banner-item:hover .blog-banner-overlay{background-color: rgba(0, 0, 0, 0.8);}
.blog-banner-item:hover .blog-banner-item-link img{transform: scale(1.1);}
.blog-banner-txt{ position: absolute; top: 0%; left: 50%; transform: translateX(-50%); z-index: 3; text-align: center; width: 100%; margin-top: 20%; }
.blog-banner-txt h2{ font-size: 22px; text-shadow: 1px 1px 3px rgba(0, 0, 0, .7); font-weight: 500; }
.blog-banner-txt h2 a{ font-family: "Marcellus", serif; color: #FFF; }
.blog-banner-txt p{ color: #fff; margin-top: 15px; font-weight: 300; font-size: 14px; }
.blog-banner-carousel .owl-nav{opacity: 0;transition: all 0.15s linear;}
.blog-banner-carousel:hover .owl-nav{opacity: 1;}
.blog-banner-carousel .owl-nav button.owl-prev{ position: absolute; left: 0; top: 0%; font-size: 30px; color: #444444; padding: 0 20px !important; height: 250px; background-color: rgb(255, 255, 255, 0.5); margin: 0; border-radius: 0; transition: all 0.15s linear; }
.blog-banner-carousel .owl-nav button.owl-next{ position: absolute; right: 0; top: 0%; font-size: 30px; color: #444444; padding: 0 20px !important; height: 250px; background-color: rgb(255, 255, 255, 0.5); margin: 0; border-radius: 0; transition: all 0.15s linear; }
.blog-banner-carousel .owl-nav button.owl-prev:hover, .blog-banner-carousel .owl-nav button.owl-next:hover{background-color: rgb(255, 255, 255, 0.8);color: #444444;}


.blog-home-body-wrapper, .blog-categories-wrapper{background-color: #f9f9f9;}
.blog-home-body{width: 1140px;margin: 0 auto;padding: 30px 0;display: flex;justify-content: space-between;align-items: start;}
.blog-home-body-left, .blog-categories-body-left{width: 70%;}
.blog-home-body-right, .blog-categories-body-right{width: 27%;}
.sliding-blogs{box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1);}
.blog-carousel .item{padding: 0 1px; /*height: 380px;*/}
.blog-section-title, .you-may-also-like{ font-family: "Marcellus", serif; font-size: 24px; font-weight: 400; color: #232323; text-align: center; background-color: #fff; padding: 15px 15px 18px; border-top: 2px solid var(--main-color); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1); }
.blog-section-body{padding: 20px;background-color: #f9f9f9;box-shadow: inset 0px 2px 3px 0 rgba(0, 0, 0, .1);}
.blog-box-img{height: 200px;}
.blog-box-img img{height: 100%;}
.blog-box-img, .d-b-b-small-card-img, .all-blogs-box-img, .recent-posts-box-img, .you-may-also-like-small-card-img{overflow: hidden;}
.blog-box-img img, .d-b-b-small-card-img img, .all-blogs-box-img img, .recent-posts-box-img img, .you-may-also-like-small-card-img img{transform: scale(1);transition: all 0.3s ease-in-out;object-fit: cover;}
.blog-box-img img:hover, .d-b-b-small-card-img img:hover, .all-blogs-box-img img:hover, .recent-posts-box-img img:hover, .you-may-also-like-small-card-img img:hover{transform: scale(1.1);}
.blog-box-txt{text-align: center;padding: 20px;box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1);background-color: #fff;}
.blog-box-date{ padding: 10px 0; font-size: 14px; color: #9b9b9b; }
.blog-box-heading{ font-family: "Marcellus", serif; font-size: 20px; color: #232323; font-weight: 500;overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;transition: all 0.15s linear; }
.blog-box-heading:hover, .d-b-b-small-card-title:hover, .recent-posts-box-txt:hover, .you-may-also-like-small-card-title:hover{color: var(--main-color);}
.blog-box-subheading{ color: #444444; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 2; -webkit-box-orient: vertical; font-size: 14px; line-height: 22px; }
.blog-carousel .owl-nav{ position: absolute; width: 105.5%; left: -20px; top: 106%; margin-top: 0; background: #f3f3f3; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1); padding: 10px; }
.blog-carousel .owl-nav button.owl-prev, .blog-carousel .owl-nav button.owl-next{ margin: 0 5px; padding: 0px 16px 2px 14px !important; background-color: var(--main-color); color: #fff; font-size: 30px; }
.blog-carousel .owl-nav button.owl-prev:hover, .blog-carousel .owl-nav button.owl-next:hover{background-color: #000;}


.double-blogs{margin-top: 95px;display: flex; justify-content: space-between; align-items: start;}
.double-blog-box{width: 48.5%;}
.double-blog-box .blog-section-title a{ font-family: inherit; color: inherit; font-size: inherit; }
.double-blog-box-body, .all-blogs-body{padding: 20px;box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1);}
.double-blog-box-lower{margin-top: 20px;}
.d-b-b-small-card{ display: flex; justify-content: start; align-items: start; gap: 12px; margin-top: 20px; background-color: #fff; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1); }
.d-b-b-small-card:first-child, .all-blogs-box:first-child{margin-top: 0;}
.d-b-b-small-card-img{width: 70%;}
.d-b-b-small-card-title{ font-size: 14px; font-family: "Marcellus", serif; color: #232323; transition: all 0.15s linear; }


.all-blogs{margin-top: 80px;}
.all-blogs-box{box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1);background-color: #fff;display: flex;justify-content: start;align-items: start;margin-top: 20px;}
.all-blogs-box-img, .all-blogs-box-txt{width: 95%;}
.all-blogs-box-txt{padding: 20px;}
.all-blogs-box-txt .blog-box-subheading{-webkit-line-clamp: 2;}
.all-blogs-load-more{width: 100%;background: #f3f3f3;box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1);padding: 16px;text-align: center;margin-top: 1px;}
.load-more-blogs{font-size: 14px;padding: 7px 28px;background-color: var(--main-color);color: #fff;border: none;border-radius: 4px;}
.load-more-blogs:hover{background-color: #000;}



.fixed-section{position: sticky;top: 20px;}
.fixed-section-title{ font-family: "Marcellus", serif; font-size: 20px; font-weight: 400; color: #232323; text-align: center; background-color: #fff; padding: 15px 15px 18px; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1); }
.fixed-section-body{ padding: 20px;background: #f3f3f3;box-shadow: inset 0px 2px 3px 0 rgba(0, 0, 0, .1); }
.recent-posts-box{ display: flex; justify-content: space-between; align-items: start; margin-top: 20px; }
.recent-posts-box:first-child{margin-top: 0;}
.recent-posts-box-img{width: 45%;}
.recent-posts-box-txt{ font-family: "Marcellus", serif; width: 95%; font-size: 15px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; color: #444444; transition: all 0.15s linear; }
.blog-footer{background-color: #000;}
.blog-copyright{width: 1140px;margin: 0 auto;padding: 20px 0;color: rgba(249, 249, 249, 0.7);font-size: 14px;}
.blog-copyright a{color: inherit;}



/************* BLOG CATEGORIES *****************/

.blog-categories{ width: 1140px; margin: 0 auto; padding: 30px 0; }
.blog-breadcrumbs{ width: 100%; display: flex; flex-wrap: wrap; list-style: none; font-size: 16px; align-items: center; background-color: #fff; padding: 14px 20px; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1); }
.blog-breadcrumbs li { display: flex; align-items: center; }
.blog-breadcrumbs li a { color: var(--main-color); }
.blog-breadcrumbs li:after { content: "\00BB "; margin: 0 8px; }
.blog-breadcrumbs li:last-child:after{ content: ""; }
.blog-categories-body{ display: flex; justify-content: space-between; align-items: start; margin-top: 30px; }
.blog-categories-title{border-top: none;}
.blog-categories-body-right{   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1);}
.blog-categories-body-right .fixed-section-body{background-color: #f9f9f9;}
.gift-ideas-body{ display: flex; justify-content: start; align-items: start; flex-wrap: wrap; }
.gift-ideas-box{width: 50%;border: 1px solid #d5d5d5;}
.gift-ideas-box-txt{ color: #444444; font-size: 14px; text-align: center; padding: 10px; }
.blog-categories-body-left-inner{background-color: #fff; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1); }



/************* BLOG DETAILS *****************/

.blog-details-head{padding: 24px;text-align: center;}
.blog-details-head a{color: var(--main-color);}
.blog-details-head h1{font-size: 36px; padding: 20px 0; font-family: "Marcellus", serif; color: #232323; }
.blog-details-head p {/*padding: 10px 0 0;*/ font-size: 14px; color: #9b9b9b; }
.blog-details-txt-body{padding: 36px;background-color: #fff;}
.blog-details-subtext p{color: #444444;padding-top: 20px;line-height: 24px;}
.blog-details-subtext p:first-child{padding-top: 0;}
.blog-details-main{margin-top: 30px;}
.blog-details-main-title, .blog-details-subtext h2, .blog-details-subtext h3, .blog-details-box-txt h2, .blog-details-box-txt h3{font-family: "Marcellus", serif; color: #232323; font-size: 24px; margin-top:30px }
.blog-details-box{margin-top: 20px; }
.blog-details-box-title{font-family: "Marcellus", serif; color: #232323; font-size: 18px; }
.blog-details-box-image{width: 300px; margin: 20px auto 0; }
.blog-details-box-txt{margin-top: 20px; }
.blog-details-box-txt p{padding-top: 15px; line-height: 24px; color: #444444; }
.blog-details-box-txt p:first-child{padding-top: 0;}
.you-may-also-like-blogs{margin-top: 30px;}
.you-may-also-like-blogs-body{padding: 20px; background: #f3f3f3; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1); display: flex; justify-content: start; align-items: start; flex-wrap: wrap; gap: 3%; row-gap: 20px; }
.you-may-also-like-small-card{width: 48.5%; display: flex; justify-content: start; align-items: start; gap: 12px; background-color: #fff; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1); padding:20px }
.you-may-also-like-small-card-img{width: 40%;}
.you-may-also-like-small-card-title{width: 95%; font-size: 16px; font-family: "Marcellus", serif; font-weight: normal; color: #232323; transition: all 0.15s linear; }












/************* MEDIA QUIRIES *****************/

@media only screen and (max-width: 1200px) {
    
    .head-menu, .blog-home-body, .blog-copyright, .blog-categories{width: 92%}

    /*  HEAD  */
    .head-menu, .blog-main-logo{display: none;}
    .blog-nav-logo{display: block;text-align: center;}
    .blog-nav-logo a{display: inline-block;padding: 12px 0 7px;}
    .blog-nav-logo a img{width: 100px;height: 35px;}
    .hamburger{display: inline-block;position: absolute; top: 0.5%; left: 28px; }
    .ham-1{ background-color: #000; width: 25px; height: 2px; /*transition: all 0.3s ease-in-out;*/ }
    .ham-2{ background-color: #000; width: 15px; height: 2px; margin: 7px 0; /*transition: all 0.3s ease-in-out;*/ }
    .ham-3{ background-color: #000; width: 25px; height: 2px; /*transition: all 0.3s ease-in-out;*/ }
    .blog-nav-ul{ flex-direction: column; align-items: start; justify-content: start; width: 270px; height: 100vh; position: absolute; top: 0; z-index: 3; background-color: #fcfcfc; box-shadow: 0 6px 12px #000000a8; left: -800px; padding: 3px 0px; transition: 0.3s ease-in-out; overflow-y: auto;}
    .nav-cross {border-radius: 50%; display: flex; justify-content: center; align-items: center; margin: 8px -5px 12px auto; cursor: pointer; }
    .blog-nav-li{text-align: left; padding: 0; width: 100%;}
    .blog-nav-li:hover .sub-menu {display: none; }
    .blog-nav-li > a{font-size: 16px; width: 100%; padding: 0.8em; display: flex; justify-content: space-between; /*border-bottom: 1px solid #EAEAEA;*/border-bottom: 1px solid rgba(0, 0, 0, .1); }
    .sub-menu{position: static; width: 100%; box-shadow: none; }
    .sub-menu-li{border-bottom: 1px solid rgba(0, 0, 0, .1);}
    .sub-menu-li a{justify-content: space-between; overflow: hidden; padding: 16px 32px; }
    .nav-show{left: 0;transition: 0.3s ease-in-out;}
    .nav-overlay{ /* display: block; */ background-color: #00000054; width: 100%; height: 100vh; position: absolute; top: 0; left: 0; z-index: 2; }
    .body-noscroll{overflow: hidden;}
    .nav-cross{/*border: 1px solid; width: 30px; height: 30px;*/ border-radius: 50%; display: flex; justify-content: center; align-items: center; margin: 11px 11px 11px auto; cursor: pointer; }
    .blog-nav-ul::-webkit-scrollbar { width: 4px; }
    .blog-nav-ul::-webkit-scrollbar-thumb { background: var(--main-color); border-radius: 10px; }
    .blog-nav-ul::-webkit-scrollbar-track { box-shadow: grey 0px 0px 5px inset; border-radius: 10px; }
    .blog-search a{display: none;}
    .blog-search-input{position: static;display: block;border-bottom: 1px solid rgba(0, 0, 0, .1);}
    .blog-search-input li{padding: 10px;}
    .blog-search-input input{width: 100%;border-top: none;background-color: #eeeeee;}


    /*  HOMEPAGE  */
    .blog-home-body, .blog-categories-body{flex-direction: column; align-items: center; gap: 50px; }
    .blog-home-body-left, .blog-categories-body-left{width: 100%;}
    .blog-home-body-right, .blog-categories-body-right{width: 300px;}
    .blog-carousel .owl-nav{width: 104%;}
    .blog-banner-carousel .owl-nav{opacity: 1;}
    .blog-banner-carousel .owl-nav button.owl-prev, .blog-banner-carousel .owl-nav button.owl-next{top: 40%;font-size: 35px;padding: 0 12px !important;height: 70px;}

}


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

    /*  HOMEPAGE  */
    .hamburger{top: 0.35%;}
    .blog-banner-txt{margin-top: 24%;}
    .blog-banner-txt h2{padding: 0 20px;font-size: 20px;}
    .double-blogs{flex-direction: column;}
    .double-blog-box {width: 100%;}
    .d-b-b-small-card-img {width: 130px; }
    .all-blogs-box{flex-direction: column;}
    .all-blogs-box-img, .all-blogs-box-txt {width: 100%; }
    .blog-carousel .owl-nav {width: 107%; }


    /*  BLOG DETAILS  */
    .blog-details-head h1{font-size: 28px;padding: 12px 20px;}
    .you-may-also-like-small-card{width: 100%;}
    .you-may-also-like-small-card-title{padding: 10px 0;}
}


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

    /*  HOMEPAGE  */
    .blog-banner-txt{margin-top: 30%;}
    .blog-carousel .owl-nav {width: 112%; }


    /*  BLOG DETAILS  */
    .blog-details-head{padding: 16px;}
    .blog-details-head h1 {font-size: 24px; }
    .blog-details-txt-body{padding: 16px;}
    .blog-details-main-title, .blog-details-subtext h2, .blog-details-subtext h3, .blog-details-box-txt h2, .blog-details-box-txt h3{margin-top: 20px;font-size: 22px;}
    .blog-details-subtext p{padding-top: 12px;}
    .you-may-also-like-small-card-img, .you-may-also-like-small-card-title{width: 50%;}
    .you-may-also-like-small-card-title{padding: 5px 0;font-size: 14px;}

}