@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Manrope:wght@300..800&display=swap');

body{font-family: "Manrope", sans-serif;background-color: #fefefe;}

.font1{ font-family: "DM Serif Display", serif;}

#sideMenu {height: 100%;position: fixed;left: 0;width: 100%;margin-top: 0px;transform: translateX(-100%);transition: transform 250ms ease-in-out;background: #fff;;z-index: 1;top: 0; overflow-y: scroll;}
input[type="checkbox"]:checked~#sideMenu {transform: translateX(0);}
input[type=checkbox] {transition: all 0.3s;box-sizing: border-box; display: none;}
.sideIconToggle {transition: all 0.3s;box-sizing: border-box;cursor: pointer;position: absolute;z-index: 99; height: 100%;width: 100%;top: 12px;right: 15px;height: 22px;width: 22px;}
.spinner {transition: all 0.3s; box-sizing: border-box;position: absolute;height: 3px;width: 100%;background-color: #343f52;}
.horizontal {transition: all 0.3s;box-sizing: border-box;position: relative;float: left;margin-top: 3px;}
.diagonal.part-1 {position: relative;transition: all 0.3s; box-sizing: border-box; float: left;}
.diagonal.part-2 {transition: all 0.3s;box-sizing: border-box;position: relative;float: left; margin-top: 3px;}
input[type=checkbox]:checked~.sideIconToggle>.horizontal {transition: all 0.3s; box-sizing: border-box; opacity: 0;}
input[type=checkbox]:checked~.sideIconToggle>.diagonal.part-1 {transition: all 0.3s;box-sizing: border-box;transform: rotate(135deg);margin-top: 8px; background-color: #343f52;}
input[type=checkbox]:checked~.sideIconToggle>.diagonal.part-2 {transition: all 0.3s;box-sizing: border-box;transform: rotate(-135deg); margin-top: -9px; background-color: #343f52;}

.bg-dot-primary { background-image: radial-gradient(#3f78e0 2px, transparent 2.5px);background-size: 0.9rem 0.9rem}

.btn{border-bottom: 1px solid #dee0ff; padding-bottom: 3px; }
.btn:before {content: ""; position: absolute; right: 0;bottom: -2px; left: 0;transform: scaleX(0); transition: transform .6s cubic-bezier(.075,.82,.165,1); transform-origin: center right; height: 1px;background-color: #3f78e0;}
.btn:hover:before {width: 100%;transform: scaleX(1); transform-origin: center left; }

.blog_subttl:before {content: ""; position: absolute; display: inline-block; top: 54%; transform: translateY(-60%); left: 0; width: 0.75rem;height: 0.05rem; background:#3f78e0;}
select:after {display: none;}

.about-content p{ color: rgb(96 105 123); font-size: 1.125rem; line-height: 1.75rem; margin-bottom: 2rem;}
.blog-content p, .blog-content ol li, .blog-content ul li{width:100%;line-height: 1.75rem;font-weight: 500; font-size: 1rem; color: rgb(96 105 123); margin-bottom: 1rem;}
.blog-content ol  { list-style: decimal; list-style-position: inside;}
blog-content ul  { list-style: disc; list-style-position: inside;}
.social-share-btn svg {width: 18px; height: 18px;}
.blog_social p{width:auto; font-weight: 700; font-size: 18px; margin-bottom: 0;}
.astro-social-share {display: flex; flex-direction: row; gap: 10px;}
.blog_tags span {background-color: #edeff4; padding: 10px 20px; color: #000; border-radius: 30px; text-transform: capitalize; font-weight: bold;}
.blog_author img {width: 60px !important; height: 60px !important; border-radius: 50%;}

.wrapper input{display: none;}
.wrapper .btn1{cursor: pointer;display: none;}
.wrapper .btn1.close-btn{position: absolute;right: 15px;top: 20px;}

.modal-img:after {content: ''; position: absolute;right: 0; bottom: 1rem;width: 2.6rem; height:2.6rem;z-index: 1; transition: all .3s ease-in-out; opacity: 0; color: #343f52;   background: rgba(0,0,0,.5); box-shadow: 0 0.25rem 0.75rem rgba(30,34,40,.02); border-radius: 100%; display: flex; align-items: center;   justify-content: center;  backface-visibility: hidden;
background-image: url("data:image/svg+xml,%3Csvg width='16px' height='16px' fill='%23fff' viewBox='0 -0.5 21 21' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3Eplus %5B%231469%5D%3C/title%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cdefs%3E%3C/defs%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Dribbble-Light-Preview' transform='translate(-99.000000, -440.000000)' fill='%23fff' %3E%3Cg id='icons' transform='translate(56.000000, 160.000000)'%3E%3Cpath d='M57.7,289 L54.55,289 L54.55,286 L52.45,286 L52.45,289 L49.3,289 L49.3,291 L52.45,291 L52.45,294 L54.55,294 L54.55,291 L57.7,291 L57.7,289 Z M55.6,280 L55.6,282 L61.9,282 L61.9,288 L64,288 L64,280 L55.6,280 Z M61.9,298 L55.6,298 L55.6,300 L64,300 L64,292 L61.9,292 L61.9,298 Z M45.1,292 L43,292 L43,300 L51.4,300 L51.4,298 L45.1,298 L45.1,292 Z M45.1,288 L43,288 L43,280 L51.4,280 L51.4,282 L45.1,282 L45.1,288 Z' id='plus-%5B%231469%5D'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
background-position: center center; background-repeat: no-repeat;}
.modal-img:hover:after {opacity:1; right: 1rem;;}

@media screen and (max-width: 767px) {
.wrapper .btn1{display: block;}.wrapper .nav-links{position: fixed;height: 100vh;width: 100%;max-width: 100%;
top: 0;left: -100%;background: #fff;padding: 70px 10px;overflow-y: auto;transition: all 0.3s ease;}
#menu-btn:checked ~ .nav-links{left: 0%;}
#menu-btn:checked ~ .btn.menu-btn{display: none;}
#close-btn:checked ~ .btn.menu-btn{display: block;}
}

.modal-img{
    max-height: 260px;
    overflow: hidden;
}