@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600&display=swap');
*{margin:0; padding:0; box-sizing:border-box; }
body{padding:0; border:2px solid red; margin:0 2px;}
a{text-decoration:none; font-weight:bold; transition:0.5s;} a:hover, a:active, a:focus {color:#ff0000; outline:none; text-decoration:none;}
p{font-size:120%; padding:1px 2px 2px 1px; color:#031602; line-height:140%; text-align:justify; margin-bottom:15px;}

.ul,ol li{margin-left:25px; padding:10px 0; font-size:115%;}
.container{background-color:#fff; padding:2px 0px 0px 3px; }
h1{line-height:35px; }

.category a{display:block; padding:5px 1px 5px 4px; margin-bottom:5px; border-radius:2px; background:#ffd500; color:#000; }
.category a:hover{display:block; padding:5px 1px 5px 4px; margin-bottom:5px; border-radius:2px;  text-decoration:none; background:#6899e8; color:#fff;}
.heading{font-weight:750; background-color:red; color:white; padding:2px 1px 2px 5px; border-radius:3px;}
.success-msg{padding:4px 7px; background:rgb(1, 149, 1); color:#fff; font-weight:600; border-radius:6px; width:auto; cursor:pointer;}
.error-msg{padding:4px 7px; background: rgb(255, 0, 0); color: #fff; font-weight: 600; border-radius:6px; width:auto; cursor:pointer;}
.success{color:green; font-weight:600;} .error{color:red;} .display-left{float:left;} .display-center{float:center;} .display-right{float:right;}
.dot-dot-text{text-overflow:ellipsis; overflow:hidden; height:1.2em; white-space:nowrap; }

.footer{background-color:#FFF0F0; border-top:5px solid #4527a0; padding:5px; font-family:'Poppins', sans-serif;} .footer .display-center a{font-size:18px; font-weight:600; text-decoration:none;} .hr{width:100%; margin:5px 0 10px 0; padding:0;} .display-center{text-align:center;} .footer .display-right{text-align:right; }
.footer-sicial-img{display:flex;  transition:all .3s ease-in-out; font-size:20px;}
.footer-sicial-img img{display:inline-block !important; width:25px; height:26px; border-radius:50%; margin:1px 0px 0px 9px;}

.search-form{display:flex; justify-content:center; margin-bottom:5px; color:#332f2f; opacity:0.7;}
.searct-text{width:100%; padding:6px; font-size:110%; border-radius:4px; }
.search-form button {padding:6px; background-color:#0000FF; color:#FFF; border:none; border-radius:4px; cursor:pointer; font-size:110%; margin:0px 0px 0px 5px; transition:background-color 0.3s; }
.search-form button:hover {background-color: #0056b3; }

.scroll-table-data{height:400px; width:100%; overflow:scroll; }
.half-scroll-table-data{height:240px; width:100%; overflow:scroll; }
table{table-layout:fixed; width:100%; border-collapse:collapse; min-width:rem-calc(640); display:table} 
thead th{background:blue; color:yellow; font-size:120%; font-weight:bold; padding:2px 0px 2px 1px; text-align:center; align-items:center; border:1px solid #fff; position:sticky; top:-1.5px;}
tbody td{padding:1px 1px 1px 5px; font-size:110%; border:1px solid black;} 
tr:nth-child(even) {background-color: #f2f2f2;}
.table-srno{width:60px; text-align:center; justify-content:center; align-items:center; vertical-align:center;} .table-status{width:85px;}
.table-mob{width:135px;} .table-name{width:200px; overflow:hidden;} .table-date{width:240px; overflow:hidden;}
.table-email{width:310px;  }
.table-address{width:450px; font-weight:bold; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

.input-container{width:100%;}
.form-label{margin:0; padding:0; font-weight:600; width:100%; display:inline-block;}
.input-field{width:100%; border:1px solid #d4e4fc; border-radius:4px; padding:1.5px 8px 1.5px 8px; font-size:18px; height:40px; margin-bottom:6px;}
.input-field:focus{width:100%; border:1px solid #6ef592; border-radius:4px; outline:none;} .input-field:active{color:green; }

.container ul li{margin-left:25px; padding:10px 0; font-size:120%;}
.info{background-color: #e7f3fe; font-size:23px; color:green; font-weight:600; border-left:3px solid #2196F3; border-radius:3px; margin:0; padding:2px 1px 2px 4px;}
.success-msg{padding:4px 7px; background:rgb(1, 149, 1); color:#fff; font-weight:600; border-radius:6px; width:auto; min-height:32px; cursor:pointer;}
.error-msg{padding:4px 7px; background: rgb(255, 0, 0); color:#fff; font-weight:600; border-radius: 6px; width:auto; cursor:pointer;}
.error{color:red; font-size:110%; margin-top:0; font-weight:600;} 
.login-btn{width:100%; display:block; background:blue; border:none; border-radius:4px; color:#fff; font-size:20px; font-weight:700; padding:4px; letter-spacing:1px; text-align:center; cursor:pointer;}

.post-title{width:100%; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:130%; font-weight:650;} 
.post-title:hover{-webkit-line-clamp:unset; overflow:unset; cursor:pointer;}  .post-titleimg img{width:100%; height:auto; border-radius:5px; }
.post-subtitle{font-size:120%;font-weight:600; color:#007979; }  .post-des li img{width:100%; height:auto; border-radius:5px; background:red; } 

.post-details{width:100%; height:135px; overflow:hidden; display:flex; background-color:#fff; box-shadow:0 4px 8px 0 rgba(0,0,0,0.2); border-radius:1px; margin-bottom:10px;} 
.post-left{width:35%; margin-right:10px;} .post-left img{width:100%; max-height:1424px; overflow:hidden; border-radius:5px; }  
.post-right{width:65%; align-items:flex-start;} 
.post-right .post-title{width:100%; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:110%; font-weight:550;} 
.post-right .post-des{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:80%;} 
.post-right .post-date{font-size:90%; text-align:left; top:250px;}

.postauthor-details {width:100%; height:auto; display:flex; align-items:center; border:1px solid #ddd; padding:2px 0px 2px 5px;}
.postauthor-left{margin-right:5px; } .postauthor-left img{width:50px; height:50px; border:3px solid white; box-shadow:0 2px 4px rgba(0, 0, 0, 0.2); border-radius:50%; }
.postauthor-right{width:100%; display:flex; margin-top:-3px; flex-direction:column; }
.postauthor-right strong{font-size:23px; font-weight:bold; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;}
.postauthor-right span{font-size:20px; color:#B22222; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;}

.post-share{width:100%; display:flex; position:relative; color:blue; cursor:pointer; border:20px; font-size:120%; font-weight:600; overflow:scroll;}
.post-share span{width:100%; display:flex; position:absolute; background:yellow; transition:0.3s linear; padding:4px;}
.post-share:hover span{transition:0.3s linear;  transform:translateX(+100%); display:none; }
.post-share a{width:100%; margin-right:2px; background:indigo; color:#fff; border-radius:3px; padding:4px;} .post-share a:hover{transition:0.3s linear; }


/*Header Css*/
.header{position:-webkit-sticky; position:sticky; width:100%; left:0; top:0; padding:0; z-index:99; }
.header-main{ position:-webkit-sticky; position:sticky; width:100%; padding:3px 0; background-image:linear-gradient(#ff9933, white, green); background-color: transparent; border-radius:3px;  display:flex; align-items:center; justify-content:space-between; }
.header .logo{padding:0 0px 0px 15px; }
.header .logo a{font-size:30px; font-weight:600; text-transform:capitalize; color:#e91e63; }
.logo a img{display:block; width:45px; height:45px; text-align:center; justify-content:center; margin:0; padding:0;}
.header .nav-menu{padding:0 15px; }
.header .menu > .menu-item{ margin-left:30px; display:inline-block; position:relative; }
.header .menu > .menu-item > a{display:block; padding:12px 0; font-size:16px; color:#000000; text-transform:capitalize; font-weight:600; transition:all 0.3s ease; }
.header .menu > .menu-item > a .plus{display:inline-block; width:12px; height:12px; position:relative; margin-left:5px;  pointer-events:none; }
.header .menu > .menu-item > a .plus:before,
.header .menu > .menu-item > a .plus:after{content:''; position:absolute; box-sizing:border-box; left:50%; top:50%; background-color:#000000; height:2px; width:100%; transform:translate(-50%,-50%); transition:all 0.3s ease; }
.header .menu > .menu-item:hover > a .plus:before,
.header .menu > .menu-item:hover > a .plus:after{background-color:#e91e63; }
.header .menu > .menu-item > a .plus:after{transform:translate(-50%,-50%) rotate(-90deg);	 }
.header .menu > .menu-item > .sub-menu > .menu-item > a:hover,
.header .menu > .menu-item:hover > a{color:#e91e63; }
.header .menu > .menu-item > .sub-menu{box-shadow:0 0 10px rgba(0,0,0,0.2); width:190px; position:absolute; right:0; top:100%; background-color:#ffffff; margin:auto; padding:0px; border-top:3px solid #e91e63; transform:translateY(10px); transition:all 0.3s ease; opacity:0; visibility:hidden; }
.header .menu > .menu-item > .sub-menu > .menu-item{display:block; }
.header .menu > .menu-item > .sub-menu > .menu-item > a{display:block; padding:5px 0px 10px 8px; font-size:16px; font-weight:600; color:#000000; transition:all 0.3s ease; text-transform:capitalize; }
.header .open-nav-menu{width:40px; height:34px; margin-right:15px; display:none; align-items:center; justify-content:center; cursor:pointer; }
.header .open-nav-menu span{display:block; height:3.5px; width:25px; background-color:#000000; position:relative;  margin-left:-25px;}
.header .open-nav-menu span:before, .header .open-nav-menu span:after{content:''; position:absolute; left:0; width:100%; height:100%; background-color:#000000; box-sizing:border-box; }
.header .open-nav-menu span:before{top:-9.5px; } .header .open-nav-menu span:after{top:9.5px; }
.header .close-nav-menu{width:100%; height:52px; background-image:linear-gradient(#ff9933, white, green); background-color:transparent; margin-left:0; cursor:pointer; display:none; align-items:center; font-weight:bold;}
.header .close-nav-menu img{width:25px; height:25px; margin-left:80%;}
.header .menu-overlay{position:fixed; z-index:999; background-color:rgba(0,0,0,0.5); left:0; top:0; height:100%; width:100%; visibility:hidden; opacity:0; transition:all 0.3s ease; }

@media(min-width:712px){
body{ max-width:1350px; margin:auto;} 
.header-main{position:relative; max-width:1350px; margin:0;}
.header .menu > .menu-item-has-children:hover > .sub-menu{transform:translateY(0); opacity:1; visibility:visible; }
.header .menu > .menu-item-has-children:hover > a .plus:after{transform:translate(-50%,-50%) rotate(0deg); }

}

@media(max-width:710px){
.header .menu-overlay.active{visibility:visible; opacity:1;}
.header .nav-menu{position:fixed; right:-280px; visibility:hidden; width:280px; height:100%; top:0; padding:0; overflow-y:auto; background-color:#222222; z-index:1000; transition:all 0.5s ease; }
.header .nav-menu.open{visibility:visible; right:0px; }
.header .menu > .menu-item{display:block; margin:0; }
.header .menu > .menu-item-has-children > a{display:flex; justify-content:space-between; align-items:center; }
.header .menu > .menu-item > a{color:#ffffff; padding:12px 10px; border-bottom:1px solid #333333;}
.header .menu > .menu-item:first-child > a{border-top:1px solid #333333; }
.header .menu > .menu-item > a .plus:before, .header .menu > .menu-item > a .plus:after{background-color:red; }
.header .menu > .menu-item-has-children.active > a .plus:after{transform:translate(-50%,-50%) rotate(0deg); }
.header .menu > .menu-item > .sub-menu{width:100%; position:relative; opacity:1; visibility:visible; border:none; background-color:transparent; box-shadow:none; transform:translateY(0px); padding:0px; left:auto; top:auto; max-height:0; overflow:hidden; }
.header .menu > .menu-item > .sub-menu > .menu-item > a{padding:12px 30px; color:#ffffff; border-bottom:1px solid #333333; scroll-behavior:auto; }
.header .close-nav-menu, .header .open-nav-menu{display:flex;  margin:0 !important;}
}


@media only screen and (min-width:320px) and (max-width:750px){ /* Smartphones (portrait and landscape) ----------- */
.flex{display:block; font-size:19px; margin:0; z-index:4;}
.flex .box1{margin:0 auto 10px auto; width:99.5%; height:auto; padding:3px 2px 0px 2px; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); background-color:#ebeef2; border-radius:5px; transition: 0.6s; }
.flex .box2{margin:0 auto; width:99.5%; height:100%; padding:3px 4px; box-shadow:0 4px 8px 0 rgba(0,0,0,0.2); border-radius:5px; background-color:#ebeef2; transition: 0.6s; }
}

@media only screen and (min-width:751px) and (max-width:981px){ /* iPads (portrait and landscape) ----------- */
.flex{display:flex; font-size:20px; margin:0; z-index:4;}
.flex .box1{margin:0; width:621px; height:auto; padding:3px 2px 0px 2px; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); background-color:#f7f6f2; border-radius:5px; transition: 0.6s; }
.flex .box2{margin-left:4px; width:360px !important; height:100%; padding:3px 4px 0px 4px; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); background-color:#f7f6f2; border-radius:5px; transition: 0.6s; }
}

@media (min-width:981px) and (max-width:1420px){ /* Portrait tablet to landscape and desktop */ 
.flex{display:flex; font-size:20px; margin:0; z-index:4;}
.flex .box1{margin:0 auto; width:1020px; height:auto; padding:3px 0px; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); background-color:#ebeef2; border-radius:5px; transition: 0.6s; }
.flex .box2{margin-left:4px; width:400px; height:100%; padding:3px 4px; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); background-color:#ebeef2; border-radius:5px; transition: 0.6s; }
}

@media (min-width:1420px){ /* Very Big Screen */
.flex{display:flex; font-size:18px; width:1350px; margin:0; z-index:2;}
.flex .box1{margin:0 auto; width:990px; height:auto; padding:4px; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); background-color:#ebeef2; border-radius:5px; transition: 0.6s; }
.flex .box2{margin-left:5px; width:430px; height:100%; padding:3px; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); background-color:#ebeef2; border-radius:5px; transition: 0.6s; }
}