@import url("../fonts/font.css");
body ,html{ padding: 0; margin: 0; position: relative; width: 100%; height: 100%; font-family: 'SF UI Display Thin', sans-serif; letter-spacing: 1px;}
* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    scroll-behavior: smooth;
    outline: none;
  }
/* Project Variables */
:root{
    --yellow:#FFCB29;
    --black:#141718;
    --dark:#1B1F20;
    --grey:#858585;
    --white:#FFF;
    --pale-yellow: #FFEAA9;
}
/* --------------------------------------- */
.white-txt{color:var(--white);}
.yellow-txt{color:var(--yellow);}
.black-txt{color:var(--black);}
.dark-txt{color:var(--dark);}
.pale-txt{color:var(--pale-yellow);}
.grey-txt{color:var(--grey);}

.white-bg{background-color:var(--white) !important;}
.yellow-bg{background-color:var(--yellow) !important;}
.black-bg{background-color:var(--black) !important;}
.dark-bg{background-color:var(--dark) !important;}
.pale-bg{background-color:var(--pale-yellow) !important;}
.semibold {
    font-family: 'SF UI Display Semibold';
}

a{color:var(--yellow);}
.row0{margin-left: 0; margin-right: 0;}
.col0{padding-left: 0; padding-right:0;}
.top-bar{ position: fixed; top: 0; width: 100%; background-color:#111; padding:10px; z-index: 9998; transition: all 0.3s ease-in-out;}
.black-top{ transition: all 0.3s ease-in-out;}
.cool-tainer{max-width: 94%; margin: 0 auto; padding:20px 10px 5px;}
.cool-logo a .logo-light, .cool-logo a .logo-dark{max-height:50px;}
.cool-logo a .logo-light{display: block;}
.cool-logo a .logo-dark{display: none;}
.black-top .cool-logo a .logo-light{display: none;}
.black-top .cool-logo a .logo-dark{display: block;}
.cool-menu{ display: block; text-align:right; margin-top:20px; color:var(--yellow)}
.cool-menu a{font-size:1.3rem; border:1px solid var(--yellow); padding:7px 10px; color:var(--yellow)}
.cool-nav{ padding:40px 0 10px; text-align:right; display: none; background:#33333390;}
.cool-nav ul{ margin: 0; padding:0; }
.cool-nav ul li{list-style: none !important; display: block; margin: 5px 0;}
.cool-nav ul li a{ text-decoration: none; padding:10px 20px; font-size: 0.8rem; color:#fff; font-family: Arial, sans-serif; letter-spacing: 3px;}
.black-top .cool-nav ul li a{ color:#000;}
.cool-nav-reviel{display:block; transition:all 0.8s ease-in-out;}
.bg-nav{background: rgba(27,31,32,0.9);}

h1 { margin:0; padding:0;}
.active .slideInLeft {
animation: slideInLeft 1.0s both
}

section{
  position: relative;
  text-align:left;
  min-height:100vh;
  padding:3% 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  overflow: hidden;
}
.section-white{ background-color:var(--white); color:#111517;}
.section-yellow{ background-color:var(--yellow);}
.section-dark{ background-color:var(--dark); color:#fff;}
.section-black{background-color: var(--black);color:#fff;}
.section-half{min-height:50vh;}
.flat-bar{min-height:250px; padding: 15% 0 3%;}
.flat-title h1{color: var(--white); font-size:2.5rem;}
/*----equal height---*/
.features {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
}
.flex-box {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
.msg{color:#ddd;}

.last-post{position:absolute;left:0; bottom:4%; width:100%; height:auto;}
.last-post h1{color: #fff;}

/* ======================Blog post====================== */
.nws-title{padding-top: 25%;color:#fff;font-size:2rem;font-weight:700;font-family: 'SF UI Display Light', sans-serif;}
.post-box{background: #0b0b0b1e; position: relative; margin: 20px 0 0;padding-bottom: 20px;border-radius:7px; transition:all 0.5s ease-in-out;}
.post-box h4{padding:4px 10px; font-family: 'SF UI Display Semibold', sans-serif;}
.post-box:hover{background:#161616a1; transition:all 0.5s ease-in-out;}
.feat-img-1, .feat-img{width:95%;height:220px;background-color:#ddd;background-size: cover;background-position: center;margin:10px; border-radius: 7px;}
.feat-img-1 {height: 350px;}
.post-title{padding:15px;font-size:1.2rem;font-weight:600;line-height: 1.1;color:#555;}
.post-title a{text-decoration:none; color:#f6f6f6;}
.lg-txt{font-size: 2.3rem; font-weight: 600;}
.x-space{padding:5px 15px 65px;margin-bottom:20px; }
.post-title a:hover{text-decoration:none; color: var(--yellow);}
.post-descript{padding:5px 15px 25px;margin-bottom:20px; font-size: 1rem; color:#fff; font-family: "SF UI Display Thin", sans-serif;}
.post-dates{padding:5px 15px; color:var(--yellow);font-size:0.8rem;}
.post-link{position:absolute; bottom:10px; width:100%; margin-top:10px; padding:6px 15px; color:var(--yellow); text-decoration: none;display:block;}
.post-link:hover{color:var(--yellow); text-decoration: none;display:block;}
.post-link:after{position:absolute; right:70%; content:"🡢"; opacity:0; color:var(--yellow); transition:all 0.5s ease-in-out;}
.post-link:hover:after{position:absolute; right:5%; content:"🡢"; opacity:1; color:var(--yellow); transition:all 0.5s ease-in-out;}
.read-title{font-size:1.8rem; text-align:center; color:var(--yellow); font-weight:700;letter-spacing:0.05rem;}
.read-body{color:#eee; font-size:1.2rem; text-align:justify; line-height:1;padding:20px 0 20px; font-family: sans-serif;}
.read-body p{font-family: Arial, Sans-serif; font-weight:200; letter-spacing:0.05rem; line-height:1.5; color:#bbbbbb;}
/*-============----===================-*/

/*--end of section 4---*/
.contact-cont{ padding:3% 0;}
.contact-txt{color:#eee;}
.contact-txt p{font-weight: 200; color:#dfdede; font-size: 0.8rem; margin: 0;}
.contact-txt a{text-decoration: none; color: var(--yellow); font-weight: 700;}
.subscribed input{text-decoration: none; color: #e4e3e3; padding: 10px; margin: 5px 0; background:#222; width: 60%; border: 0; border-bottom: 1px solid var(--yellow);}
.subscribed input:hover, .contact-txt input:hover{outline: none; border-bottom: 1px solid var(--yellow);}
.subscribed button{border:0; background:var(--yellow); color: #fff; padding:11px 20px; margin-left: -4px;}
/*----social---*/
.social{margin: 20px 0;}
.social ul{padding: 0; margin: 0;}
.social ul li{list-style: none; display: inline-block; margin-right:6px;}
.social ul li a{text-decoration: none; padding: 14px 20px; text-align: center; line-height: 1.1; font-size: 1.2rem; display: block; color: var(--black); background: var(--yellow);}
.social ul a:hover{ color: var(--yellow); background:#1c1d1e;}
/*------//--------*/

/* --------------------------- */
.footer-links{padding:1px;}
.footer-links ul{margin:0; padding:0; list-style: none;}
.footer-links ul li{display: block;}
.footer-links ul li a{display: block; padding:3px 8px; color:#fff; text-decoration: none;}
.footer-links ul li a:hover{display: block; padding:3px 8px; color: var(--yellow);}
/* ================================ */

/* ================================ */
.audio-box, .audio-box-2{
    padding:2% 3%; 
    background-position: center;
    background-size: cover;
    background-color: var(--yellow);
    margin: 30px 0;
    border-radius: 10px;
}
.audio-box-2{padding:1% 3%;}
.audio-details{padding:2px;}
.audio-details-2{padding: 16px 10px 0; display: inline-flex;}
.audio-details p, .audio-details h5{margin:0;}
.audio-details-2 h3{font-size: 1.35rem;}
.audio-details-2 h5{font-size: 0.75rem;}
.audio-thumb, .audio-thumb-2{
    display: block;
    width:100px;
    height: 100px;
    background-color: #f7d596;
    background-position: top center;
    background-size: cover;
    border-radius: 50%;
    margin: 10px auto;
    box-shadow: 2px 2px 6px #a6882e;
}
.audio-thumb-2{width:65px; height:65px; margin-top: 20px;}
.audio-details video{height:0; width:100%; margin: 5px 0; opacity:0;}
.audio-btn, .audio-btn-round, .audio-btn-round:hover, .audio-btn:hover{
    padding: 3px 15px;
    border: 1px solid var(--yellow);
    color: var(--yellow);
    font-size: 1rem;
    text-align: center;
    margin:10px;
    text-decoration: none;
    position: absolute;
    bottom: 7px;
    right: -23px;
    transition: all 0.5s ease-in-out;
}
.audio-btn{right:10px;}
.audio-btn-round, .audio-btn-round:hover{
   background-color: var(--yellow);
   color: var(--dark);
   border-radius: 23px;
   box-shadow: 2px 2px 6px #8f771b;
   padding: 10px 5px;
   font-size: 0.7rem;
   min-width: 90px;
   margin-top: 27px;
   font-family: "SF UI Display bold";
   display: block;
   margin-left: 2px;
}
.audio-btn:hover{background-color: var(--yellow); color: var(--dark);}

.share a {
    display: inline-block;
    font-size: 1rem;
    color: var(--yellow);
    border: 1px solid var(--yellow);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin-right: 8px;
}
/* =============================== */

@media(max-width: 600px){
    .cool-logo a .logo-light, .cool-logo a .logo-dark {margin-top:10px; max-height: 35px;}
    .audio-thumb {  width: 80px; height: 80px;}
    .audio-details h3{font-size: 1.35rem;}
    .audio-details p, .audio-details h5{font-size: 1rem;}
    .audio-btn-round, .audio-btn-round:hover { position:relative; padding: 8px 6px; font-size: 0.7rem; position: relative; width: 100%; right: 5px; margin-top: 10px;}
    .flat-title h1 {font-size: 2rem;}
    .feat-img-1 {height: 250px;}
    .post-box {top:5%;}
    .lg-txt {font-size: 1.3rem; line-height: 1.2;}
}