@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body{ font-family:Roboto !important; background:#fff; font-size:15px; cursor:default;}
::selection{ color:#fff; background:#4058fe;} ::-moz-selection{ color:#fff; background:#4058fe;} ::-webkit-selection{ color:#fff; background:#4058fe;}
*{ outline:none !important; text-decoration:none !important; list-style:none;} ul, li{ padding:0; margin:0; list-style:none;}

.heading-section{ float: left; width: 100%; padding: 90px 0 200px; background: url(../images/f-bg.webp) no-repeat left top, linear-gradient(-160deg, rgba(1,216,216,1) 0%, rgba(0,49,226,1) 100%); clip-path: polygon(0% 0px, 100% 0%, 100% 84.77%, 0% 100%, 25% 100%, 0% 100%); position: relative; overflow: hidden; background-size: cover;}
.heading{ max-width: 1000px; margin: 0 auto 100px auto; position: relative; z-index: 1;}
.heading h1{ font-weight: bold; font-size: 2.3rem; margin-bottom: 20px; margin-top: 10px; color: #fff;}
.post-info{ display: inline-block;}
.post-info ul{ display: flex;}
.post-info ul li{ font-size: 1.1rem; padding: 0 15px; position: relative; color: #aaa;}
.post-info ul li:before{ position: absolute; content: ''; width: 8px; height: 2px; background: #999; top: 0; bottom: 0; left: -2px; margin: auto;}
.post-info ul li:first-child:before{ display: none;}
.post-info ul li:first-child{ padding-left: 45px;}
.post-info ul li span{ color: #777;}
.uniqfont{ font-family: 'Playfair Display', serif !important;}
.user-img{ width: 35px; height: 35px; background: #ccc; border-radius: 100%; overflow: hidden; display: inline-block; position: absolute; top: 0; bottom: 0; left: 0; margin: auto;}
.user-img img{ width: 100%;}
.heading-section .graphics{ width: 100%; border-radius: 15px; overflow: hidden; margin: 0;}
.heading p{ color: #fff; opacity: 0.7; font-size: 1rem; line-height: 28px;}
.heading .btn{ padding: 14px 40px; background: #0b87e7; border-radius: 15px; border: none; font-weight: 600; margin-top: 15px;}
.bg{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; height: 100%;}

.banner{ display: inline-block; width: 100%; background: #e0e0e0; min-height: 550px;}
.banner img{ width: 100%; height: auto;}

.content-section{ float: left; width: 100%; padding: 0;}
.content-wrap{ padding: 50px; background: #fff; border-radius: 15px; box-shadow: 0 5px 15px -1px rgba(0,0,0,.15); position: relative; margin-top: -200px; z-index: 1;}
.content-section .container{ max-width: 1000px;}
.content-section p{ line-height: 2rem; font-size: 1.1rem; font-weight: 400; color: #555;}
.content-section p a{ color: #4058fe; font-weight: 500; text-decoration: underline !important;}
.heading-sm{ font-size: 1.2rem !important;}
.heading-md{ font-size: 1.8rem !important; font-weight: 600;}
.heading-lg{ font-size: 2.4rem !important;}
.content-section h1{ font-size: 2.1rem; font-weight: 600; margin: 40px 0 25px 0;}
.content-section h2{ font-size: 1.8rem; font-weight: 600; margin: 40px 0 25px 0;}
.content-section h3{ font-size: 1.6rem; font-weight: 600; margin: 40px 0 25px 0;}
.content-section h4{ font-size: 1.5rem; font-weight: 600; margin: 40px 0 25px 0;}
.content-section ul{ margin-left: 30px !important;}

.mb-20{ margin-bottom: 20px !important;}
.mt-40{ margin-top: 40px !important;}

.content-section ul li{ list-style: disc !important; font-size: 1.1rem; line-height: 2rem; margin-bottom: 8px; color: #555;}
.content-section ol li{ list-style: decimal !important; font-size: 1.1rem; line-height: 2rem; margin-bottom: 8px; color: #555;}

footer{ float: left; width: 100%; padding: 190px 0 70px; background: #00285c url(../images/f-bg.webp) no-repeat left top; background-size: cover; position: relative; margin-top: -120px; clip-path: polygon(0% 100px, 100% 0%, 100% 100%, 0% 100.16%, 25% 100%, 0% 100%); position: relative; overflow: hidden;}
footer .bg{ width: 100%; height: auto;}
footer p{ margin: 0; color: #fff; margin-top: 40px; font-size: 1.1rem;}
footer ul.social{ text-align: center; display: inline-block; margin: auto 0 auto 0; text-align: center;}
footer ul.social li{ display: inline-block; margin: 0 5px;}
footer ul.social li a{ display: block; width: 45px; height: 45px; border-radius: 100%; background: #eee; line-height: 43px; color: #fff; margin: auto;}
.fb{ background: #3b5596 !important;}
.tw{ background: #1a9dfc !important;}
.ins{ background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%) !important;}
.in{ background: #0375b0 !important;}
.yt{ background: #FF0000 !important;}
.wp{ background: #25D366 !important;}
.pin{ background: #c8232c  !important;}
footer .text-center{ position: relative; z-index: 1;}

.graphics{ width: 100%; margin: 20px 0; border-radius: 15px; overflow: hidden;}
.graphics img{ width: 100%;}


@keyframes flt {
    0% {
    left: -100px;
    opacity: 0;
}
	60% {
    left: 15px;
    opacity: 1;
}
    100% {
    left: 1px;
    opacity: 1;
}
}



@media (max-width: 991px) {
	footer ul.social{ width: auto; height: auto; position: static; margin-left: 0; margin-bottom: 0; background: none; box-shadow: none;}
    footer ul.social li{ display: inline-block; width: auto; margin: 0 5px;}
    footer ul.social li a{ width: 40px; height: 40px; line-height: 39px;}
    footer ul.social li a svg{ width: 16px; height: 16px;}
    nav .d-flex{ display: inline-block !important; width: 100%;}
    .navbar-nav .nav-item{ margin-left: 0; margin-bottom: 5px;}
    .navbar-toggler{ border-color: #fff; background: #fff;}
}

@media (max-width: 767px) {
    .heading-section{ padding: 40px 0 130px 0 !important;}
    .heading-section .graphics{ margin-bottom: 30px; margin-top: 30px;}
    .content-wrap{ padding: 25px;}
}

@media (max-width: 480px) {
    .content-section p, .content-section ol, .content-section li, .content-section p a{ font-size: 1rem !important; line-height: 1.7rem;}
    .content-section{ padding: 20px 0;}
    .banner{ min-height: 250px;}
    .heading h1{ font-size: 1.8rem;}
    .heading{ margin-bottom: 40px;}
    .content-section ol li, .content-section ul li{ line-height: 1.4rem;}
    footer{ padding: 170px 0 30px 0; margin-top: -150px;}
}