@import url("https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Dancing+Script:wght@700&family=Kaushan+Script&family=Montserrat:wght@500;700&family=Open+Sans&family=Pacifico&family=Poppins:wght@400;500&display=swap");
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
}
a{
    text-decoration: none;
}
/*
font-family: 'Kaushan Script', cursive;
font-family: 'Montserrat', sans-serif;
font-family: 'Dancing Script', cursive;
font-family: 'Open Sans', sans-serif;
font-family: 'Pacifico', cursive;
@font-face{
    fontfamily:'HelveticaNeue-Thin';
    src:local('HelveticaNeue-Thin.otf'),url('HelveticaNeue-Thin.otf') formate('opentype');
}
*/



#top-section{
    width: 100%;
    position: absolute;
    z-index: 10;
    background: rgba(3, 82, 187, 0.3);
}
.top-content{
    position: relative;
}
.top-content .latest{
    text-transform: uppercase;
    color: white;
    padding: 0 10px;
}

a.latest::before{
    content: "";
    width: 1px;
    height: 100%;
    background-color: black;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: 0.3s;
}
a.latest::after{
    content: "";
    width: 1px;
    height: 100%;
    background-color: black;
    position: absolute;
    bottom: 0;
    left: 4.2rem;
    transition: 0.3s;
}
.arrow .right-arrow{
    border-right: 1px solid black;
}
.arrow .left-arrow{
    border-right: 1px solid black;
}
.arrow a i{
    color: white;
}
.arrow .right-arrow:hover,
.arrow .left-arrow:hover{
    background: #363B40;
}
.news a{
    color: white;
}
.top-content{
    display: flex;
    gap: 10px;
    padding: 10px 0;
}
.top-right-content{
    display: flex;
    gap: 5px;
}
.top-right-content .login-register a{
    width: fit-content;
    height: fit-content;
    border: 1px solid black;
    border-radius: 5px;
    padding: 5px 10px;
}
.top-right-content .login-register .login-top{
    background: yellow;
    color: #000;
}
.top-right-content .login-register .register-top{
    background: red;
    color: white;
}


.menu{
    border-top: 2px solid #363B40;
}
.navbar-nav .nav-item{
    margin: 5px 15px;
}
.navbar-brand img{
    height: 5rem;
    width: 9rem;
}
.navbar-brand{
    animation-name: moving;
    animation-duration: 2s;
    animation-delay: 2s;
    animation-fill-mode: backwards;
}
@keyframes moving{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}
.nav-item .nav-link{
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: white;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
}
.nav-item .drop-menu{
    height: fit-content;
    width: fit-content;
    border-radius: 5px;
    background: rgba(60, 59, 59, 0.5);
    position: absolute;
    z-index: 9999;
}
.drop-menu li a{
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    padding-right: 1rem;
    padding-top: 20px;

}
.nav-item {
    position: relative;
  }
  .nav-item:hover .drop-menu {
    opacity: 1;
    visibility: visible;
    transition: all 0.5s ease-in-out;
  }
.drop-menu {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    transition: all 0.3s ease-in-out;
}
.drop-menu li{
    padding-bottom: 1rem;
}
.nav-item .drop-menu li{
    transition: all 0.3s ease-in-out;
}
.nav-item .drop-menu li a:hover{
    border-bottom: 2px solid #fce38a;
    transition: all 0.3s ease-in-out;

}


a.nav-link::after{
    content: "";
    width: 0;
    height: 2px;
    background-color: #fce38a;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: 0.3s;
}
a.nav-link::before{
    content: "";
    width: 0;
    height: 2px;
    background-color: #fce38a;
    position: absolute;
    top: 0;
    right: 0;
    transition: 0.3s;
}
a.nav-link:hover::after,
a.nav-link:hover::before{
    width: 100%;
}
a.nav-link:hover{
    color: #fce38a;
}
.header-wrapper{
    position: absolute;
    top: 40px;
    width: 100%;
    z-index: 99;
}
.carousel-inner .carousel-item #menu-banner-image{
    height: 55vh;
}
.carousel-item img{
    position: relative;
    height: 80vh;
}
.text-bg-dark{
    opacity: 0.8;
    margin-left: 20rem;
}
.card-body a h5{
    color: white;
}
.card-header{
    display: flex;
    justify-content: space-between;
}
#progress{
    padding-top: 2rem;
}

.owl-nav {
    position: absolute;
    top: 20%;
    transform: translateY(-20%);
    width: 100%;
}

.owl-nav .owl-prev {
    position: absolute;
    left: -18px;

}

.owl-nav .owl-next {
    position: absolute;
    right: -18px;
}

.icon {
    background-color: purple;
    padding: 10px;
    color: #fff;
}

.owl-dots {
    display: none;
}

.owl-dot {
    transition: .2s ease;
}

.owl-dot.active {
    transform: scale(1.3);
}

.owl-dot span {
    width: 40px !important;
    height: 5px !important;
    transition: .3s ease;
}

.owl-dot.active span {
    background-color: purple !important;
}
.test-text .owl-1-image{
    height: 100px;
    width: 100px !important;
}
.test-text{
    padding-top: 1rem;
    /* border-bottom: 5px solid rgb(234, 28, 36); */
    display: flex;
    gap: 10px;
}



#latest-post{
    padding-top: 3rem;
}

.left-content .left-bar,
.right-content .right-bar{
    height: 2rem;
    width: 100%;
    background: rgb(240, 240, 240);
}
.left-bar h5,
.right-bar h5{
    padding-left: 1rem;
}
.left-bar,
.right-bar{
    display: flex;
}

.left-bar .border-left,
.right-bar .border-left{
    height: 2rem;
    width: 5px;
    background: black;
}
.left-post .heanline{
    font-size: 2rem;
    color: black;
}
.right-content .recommended_image img{
    height: 100px;
    width: 120px;
}
.abc{
    padding-top: 3rem;
}
.recommended_btn_football_time{
    justify-content: space-between;
}
.recommended_btn_football_time a{
    border: 1px solid black;
    width: fit-content;
    height: fit-content;
    padding: 3px 6px;
    color: white;
    background: black;
    border-radius: 5px;
}
.recommended_heading_list li .recommended_heading{
    color: black;
}
.recommended_btn_football_time p{
    font-size: 15px;
}
.recommended_see_more{
    padding-top: 10px;
    /* border-bottom: 2px solid rgb(192, 191, 191); */
}
.recommended_see_more a{
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    color: black;
    text-transform: uppercase;
    width: fit-content;
    height: fit-content;
    /* border: 1px solid black; */
    padding: 5px 20px;
    border-bottom: 2px solid rgb(192, 191, 191);
    /* background: rgb(41,183,61); */

}
.recommended_see_more a:hover{
    color: red;
}
.read_commented{
    gap: 10px;
    padding-top: 3rem;
}
.read_commented .most_Read{
    width: fit-content;
    height: fit-content;
    background: rgb(169, 167, 167);
    padding: 10px 45px;
    color: white;
}
.read_commented .Commented{
    width: fit-content;
    height: fit-content;
    background: rgb(169, 167, 167);
    padding: 10px 45px;
    color: white;
}
.read_commented .Commented.active,
.read_commented .most_Read.active{
    background: #000;
}
.read_commented .most_Read:hover,
.read_commented .Commented:hover{
    background: #000;
}
.countdown_score{
    padding-top: 1.5rem;
}
.countdown_score .high_school_score-1{
    height: 125px;
    width: 100%;
    background: #e1e1e3;

}
.countdown_score .high_school_score-2{
    position: relative;
    margin-top: 1rem;
    height: 150px;
    width: 100%;
    /* background: #141479; */
}
.countdown_score .high_school_score-3{
    position: relative;
    margin-top: 1rem;
    height: 125px;
    width: 100%;
    /* background: #141479; */
}
.countdown_score .high_school_score-4{
    position: relative;
    margin-top: 1rem;
    height: 125px;
    width: 100%;
    /* background: #141479; */
}
.countdown_score .high_school_score-5{
    position: relative;
    margin-top: 1rem;
    height: 125px;
    width: 100%;
    /* background: #141479; */
}
.high_school_score-2 .score-heading,
.high_school_score-3 .score-heading,
.high_school_score-4 .score-heading,
.high_school_score-5 .score-heading{
    position: absolute;
    z-index: 22;
}
.value-bar{
    position: absolute;
    height: 100%;
    width: 100%;
    background: #e1e1e3;

}
.high_school_score-3 .value-bar,
.high_school_score-4 .value-bar{
    position: absolute;
    height: 100%;
    width: 28%;
    background: #e1e1e3;
}
.score-heading li .counter{
    padding-top: 1rem;
}
.score-heading li a{
    color: black;
}
.score-heading li .count-score{
    border-bottom: 1px solid black;
}
/*Sport-score*/
/* #menu-image{
    background-image: url(image/football-field-banner-1.jpeg);
    height: 50vh;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

} */
.banner-section{
    position: relative;
}
/* .banner-image img{
    width: 100%;
    height: 100vh;
} */
.dropdown-score-nav-item h3{
    font-family: 'Montserrat', sans-serif;
    font-size: 40px;
    font-weight: 600;
    text-align: center;
    color: yellow;
}
.dropdown-score-heading-item li{
    font-family: 'Montserrat', sans-serif;
    font-size: 30px;
    font-weight: 400;
}
.dropdown-score-heading-item li span{
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}
.dropdown-score-heading-item li a,
.dropdown-score-heading-item li i{
    color: white;
    font-weight: 600;
}
.dropdown-score-nav-item{
    position: absolute;
    top: -6rem;
    left: 50%;
    transform: translate(-50% ,-50%);
}


/*Card section*/
.card.h-100 {
    /* height: 408px !important;
    position: relative; */
    box-shadow: 0px 3px 8px rgba(60, 59, 59, 0.7);
    border: none;
    transition: all 0.4s ease-in-out;
}

.card-img, .card-img-top, .card-img-bottom {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 12px;
}
.card-body .card-text{
    height: fit-content;
    width: fit-content;
}
.card-body .read-more .read-more-btn a{
    height: fit-content;
    width: fit-content;
    background: rgb(41,183,61);
    padding: 5px 8px;
    transition: all 0.4s ease-in-out;
    border: 1px solid transparent;
    border-radius: 5px;
}
.card-body .read-more{
    display: flex;
    justify-content: space-between;
}
.card-body .read-more .comment-icon{
    font-size: 30px;
    margin-top: -0.8rem;
    color: black;
}
.read-more .comment-icon span{
    font-size: 22px;

}
.card-body .read-more .read-more-btn a{
    color: white;
    transition: all 0.4s ease-in-out;
}
.card-body .read-more .read-more-btn:hover a{
    color: black;
    border: 1px solid black;
    background: transparent;
    transition: all 0.4s ease-in-out;
}
.card-hov:hover{
    transform: scale(1.01);
    box-shadow: 0px 3px 8px rgba(60, 59, 59, 0.7);
    transition: all 0.3s ease-in-out;
}
.card-date-heading .card-title a{
    color: black;
}
.carousel-testimony{
    padding-top: 2rem;
}
#post-carousel{
    padding-top: 3rem;
}
#post-carousel .post-carousel-bar{
    height: 2rem;
    width: 100%;
    background: rgb(240, 240, 240);
}
.post-carousel-bar .post-carousel-border{
    height: 2rem;
    width: 5px;
    background: black;
}
.post-carousel-bar{
    display: flex;
}
.post-carousel-bar h5{
    padding-left: 10px;
}
#show-more{
    padding-top: 2rem;
}
.card.h-100.show-more-card {
    height: 450px !important;
    position: relative;
    box-shadow: 0px 3px 8px rgba(60, 59, 59, 0.7);
    border: none;
    transition: all 0.4s ease-in-out;
}
.show-more-card:hover{
    transform: scale(1.01);
    box-shadow: 0px 3px 8px rgba(60, 59, 59, 0.7);
    transition: all 0.3s ease-in-out;
}

.show-top-bar{
    height: 5px;
    width: 100%;
    background: rgb(193, 192, 192);
}
.show-btn{
    margin-top: 3rem;
}
.show-btn a{
    font-family: 'Montserrat', sans-serif;
    font-weight: 200;
    color: white;
    height: fit-content;
    width: 100%;
    padding: 10px 20px;
    background: rgb(41,183,61);
    border: 2px solid gray;
    border-radius: 10px;
    transition: all 0.5s ease-in-out;
}
.show-btn a:hover{
    background: transparent;
    color: black;
    transition: all 0.5s ease-in-out;
}
.go-top a i{
    color: black;
    font-size: 2rem;
    margin-left: 12px;
    margin-top: 8px;

}
.go-top a{
    position: fixed;
    right: 2.5rem;
    bottom: 2rem;
    width: 50px;
    height: 50px;
    border: 1px solid red;
    background-color: greenyellow;
    border-radius: 50%;
}
footer{
    margin-top: 3rem;
    padding: 2rem;
    height: fit-content;
    width: 100%;
    background: rgb(9,20,38);
}
.left-footer .footer-heading a img{
    height: 60%;
    width: 60%;
}
.footer-heading h5{
    text-transform: uppercase;
    padding-top: 1rem;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 2rem;
    color: rgb(217, 216, 216);
    border-bottom: 4px solid rgb(217, 216, 216);
}
.left-footer p{
    font-family: 'Open Sans', sans-serif;
    font-weight: 200;
    font-size: 18px;
    color: white;
    padding-top: 1rem;
}
.recent-post-footer{
    display: flex;
    flex-direction: column;
    padding-top: 1rem;
}
.recent-post-footer a{
    color: white;
    font-family: 'Open Sans', sans-serif;
    font-weight: 200;
    font-size: 18px;
    padding-bottom: 1rem;
}
.recent-post-footer a:hover,
.popular-post-footer a:hover{
    color: rgb(189, 27, 32);
}

.recent-post-footer a i{
    color: white;
    font-size: 20px;
}
.popular-post-footer{
    display: flex;
    flex-direction: column;
    padding-top: 1rem;
}
.popular-post-footer a{
    color: white;
    font-family: 'Open Sans', sans-serif;
    font-weight: 200;
    font-size: 18px;
    padding-bottom: 1rem;
}
.popular-post-footer a i{
    color: white;
    font-size: 20px;
}
.contact-post-footer{
    display: flex;
    flex-direction: column;
    padding-top: 1rem;
}
.contact-post-footer a{
    color: white;
    font-family: 'Open Sans', sans-serif;
    font-weight: 200;
    font-size: 18px;
    padding-bottom: 1rem;
}
.contact-post-footer a i{
    color: white;
    font-size: 20px;
}
.contact-post-footer p{
    color: white;
    font-family: 'Open Sans', sans-serif;
    font-weight: 200;
    font-size: 18px;
}
.contact-post-footer form input{
    border: none;
    padding: 10px 10px;
}
.footer-subscribe{
    display: flex;
}
.contact-post-footer form .subscribe{
    width: fit-content;
    height: fit-content;
    background: yellow;
    border: none;
    padding: 10px 10px;
}

.left-info h6{
    padding-top: 1rem;
    color: rgb(254, 250, 250);
}
.left-info p{
    font-family: 'Open Sans', sans-serif;
    font-weight: 200;
    font-size: 18px;
    color: white;
    padding-top: 0.7rem;
}
.contact-icone ul{
    display: flex;
    gap: 25px;
    font-size: 3rem;
}
.contact-icone ul li a i{
    color: white;
}
.copy-right h6{
    padding-top: 1.5rem;
    color: rgb(126, 24, 28);
}

.right-content{
    position: relative;
}
.slider-2{
    position: absolute;
    left: -5.6rem;
}
.slide-up-down{
    transform: rotate(90deg);
    width: 270px;
    margin-top:100px;
  }
  .slide-up-down .item{
    transform: rotate(-90deg);
  }
  .slide-up-down img {
    transform: rotate(-90deg);
    width: 120px !important;
  }
  .slide-text {
    transform: rotate(-90deg);
  }
  .slide-up-down .owl-nav{
    display: flex;
    justify-content: space-between;
    position: absolute;
    width: 100%;
    top: calc(50% - 33px);
  }
  .slide-up-down .owl-nav .owl-next {
    position: absolute;
    right: -262px;
}
  div.slide-up-down .owl-nav .owl-prev, div.slide-up-down .owl-nav .owl-next{
    font-size: 36px;
    top: unset;
    bottom: -57px;
    left: 4px;
  }

  .owl-theme .owl-nav [class*='owl-']:hover {
    background: none;
    color: #FFF;
    text-decoration: none;
}



/*Sport-score*/

.navbar-nav .sport-score-nav-item .sport-score-nav-link{
    color: white;
}
#dropdown-score{
    padding-top: 3.5rem;
}
.dropdown-score-nav{
    border-bottom: 5px solid rgb(183, 182, 182);
}
.dropdown-score-heading{
    gap: 5px;
}

.pagination-btn{
    margin-top: 2rem    ;
}
.pagination .page-item .page-link{
    color: black;
}

/*about us*/

.about-left-content img{
    width: 100%;
    height: 20rem;
    margin-top: 15rem;
}

.about-right-content h2{
    color: #ff0000;
    margin-top: 2rem;
    margin-bottom: 2rem;
    font-size: 50px;
}
.about-right-content p{
    font-size: 18px;
}

.straight-line{
    border-bottom: 2px solid rgb(201, 196, 196);
    margin-top: 5px;
    margin-bottom: 2rem;
    width: 100%;
    padding-top: 2rem;
}
.statement-div p{
    font-size: 18px;
}
.statement{
    display: flex;
    flex-direction: column;
}
.statement i{
    font-size: 3rem;
    margin-left: 40%;

    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* Contact */
.contact-left img{
    width: 100%;
    height: 20rem;
    margin-top: 15rem;
}
.contact-right img{
    width: 100%;
    height: 5rem;
}
.contact-right h2{
    width: 100%;
    background: #ddd;
    border: 1px solid transparent;
    margin-top: 3rem;
    padding: 2px;
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 2rem;
}
.contact-right h3{
    font-size: 1.2rem;
    font-weight: 400;

}
.contact-right p{
    font-size: 10px;
    font-weight: 400;

}
.contact-right p span{
    font-size: 10px;
    font-weight: 700;

}
.contact-right-content{
    margin-bottom: 2rem;
}
.contact-right a{
    margin-left: 50%;
    border: 1px solid black;
    padding: 5px 10px ;
    text-transform: uppercase;
}
.contact-left-side-section h2{
    margin-top: 4rem;
    text-transform: uppercase;
    font-size: 2rem;
    color: rgba(29, 22, 77, 0.807);
    margin-bottom: 3rem;

}
.contact-right h2{
    padding: 5px 20px;
}
.Query-all-content i{
    font-size: 3rem;
    margin-bottom: 2rem;
}
.call-Us i{
    font-size: 3rem;
    margin-bottom: 2rem;
}
.Query-all-content p{
    font-size: 1.5rem;

    padding-bottom: 2rem;
}
.contact-left
.call-Us p{
    font-size: 1.5rem;
    padding-bottom: 2rem;
}
.contact-right-side-section h2{
    margin-top: 4rem;
    text-transform: uppercase;
    font-size: 2rem;
    color: rgba(29, 22, 77, 0.807);
    margin-bottom: 3rem;
}
.contact-right-side-section .name,
.contact-right-side-section .email,
.contact-right-side-section .number,
.contact-right-side-section .text-box
{
    padding: 4px 6px;
    width: 60%;
    margin-bottom: 1rem;
    outline: none;

}
.contact-right-side-section button{
    padding: 5px 10px;
    text-transform: uppercase;
    margin-bottom: 2rem;
}
#contact-section{
    background: rgb(190, 240, 167);
}
.contact-left-side-section h2,
.contact-right-side-section h2{
    margin-top: 4rem;
    text-transform: uppercase;
    font-size: 2rem;
    margin-bottom: 3rem;
    font-style: italic;
}
.contact-left-side-section h2 span,
.contact-right-side-section h2 span{
    color: #ce1a38a1;
}
.contact-information,
.business-info,
.email-info{
    display: flex;
    margin-bottom: 1rem;
    border: 1px solid black;
    padding: 1.65rem 1rem;
    border-radius: 10px;
    background: #fff;
}
.contact-information h4,
.business-info h4,
.email-info h4{
    text-transform: uppercase;
    font-weight: 450;
}
.contact-information p,
.business-info p,
.email-info p{
    line-height: 16px;
    font-size: 16px ;
}

.contact-right-side-section i{
    border: 1px solid black;
    background: #c5af3f;
    padding: 10px;
    border-radius: 50%;
    margin-right: 1rem;
    font-size: 25px;
}

.contact-left-side-section .First-Name,
.contact-left-side-section .Last-Name{
    width: 45%;
}
.contact-left-side-section .Email-Name{
    width: 91%;
}
.contact-right h2{
    padding: 5px 20px;
}
.Query-all-content i{
    font-size: 3rem;
    margin-bottom: 2rem;
}
.call-Us i{
    font-size: 3rem;
    margin-bottom: 2rem;
}
.Query-all-content p{
    font-size: 1.5rem;

    padding-bottom: 2rem;
}
.contact-left
.call-Us p{
    font-size: 1.5rem;
    padding-bottom: 2rem;
}
.contact-right-side-section .name,
.contact-right-side-section .email,
.contact-right-side-section .number,
.contact-right-side-section .text-box
{
    padding: 4px 6px;
    width: 60%;
    margin-bottom: 1rem;
    outline: none;

}
.contact-right-side-section button{
    padding: 5px 10px;
    text-transform: uppercase;
    margin-bottom: 2rem;
}

/* Score CSS */
.High-School-Football-scores-left-content h2{
    margin-bottom: 2rem;
    font-size: 3rem;
    padding-top: 2rem;
}
.post-div{
    display: flex;
    flex-direction: row;
}
.in-score,
.time-div,
.by-admin,
.view-div,
.comment-div{
    display: flex;
    flex-direction: row;
    margin-right: 2rem;
}
.in-score i,
.time-div i,
.by-admin i,
.view-div i,
.comment-div i{
    font-size:20px;
    vertical-align:middle;
    margin-right: 5px;
}
.High-School-Football-scores-left-content-image img{
    width: 80%;
    height: 25rem;
    margin-top: 3rem;
    padding-bottom: 2rem;
}
.paragraph-div h3{
    margin-top: 2rem;
}
.paragraph-div h3,
.paragraph-div p{
    margin-bottom: 2rem;
}
.link-div h3{
    background: #ddd;
    text-transform: uppercase;
    padding: 5px 10px;
    text-align: center;
}
.link-div a{
    display: block;
    line-height: 80px;
    font-size: 1.3rem;
    text-decoration: underline;
    text-align: center;
    color: #000;

}
.link-div{

    padding: 10px;
}
.link-div button{
    padding: 5px 10px;
    text-align: center;
    margin-left: 43%;
    margin-bottom: 2rem;

}
.count-down-right-side .countdown_score{
    margin-bottom: 2rem;
}
.count-down-right-side .count-down-right-btn{
    border: 1px solid #000;
    padding: 5px 10px;
    margin-left: 43%;
    text-transform: uppercase;

}
.share-on-div {
    background: #ddd;
    display: flex;
    padding: 5px 10px;
    margin-top: 1rem;
}
.share-on-div h2{
    font-size: 2rem;
    font-weight: 400;
}
.share-on-div  .share-on-icon-div i{
    margin: 10px;
    font-size: 2.3rem;
}
.leave-a-comment h2{
    font-size: 2rem;
    font-weight: 400;
    text-transform: uppercase;
    margin-top: 2rem;
}
.leave-a-comment h3{
    font-size: 1.5rem;
    font-weight: 400;
    text-transform: uppercase;
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.form-class input{
    display: block;
    width: 60%;
    margin-bottom: 1rem;
    padding: 5px 10px;
    outline: none;
}
.form-class textarea{
    display: block;
    width: 60%;
    margin-bottom: 2rem;
    padding: 5px 10px ;
    outline: none;
}
.leave-a-comment button{
    padding: 5px 10px ;
}




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

    .top-content .latest{
        font: 15px;
        margin-top: 10px;
    }
    .top-content .arrow{
        display: flex;
        flex-direction: row;
    }
    .top-content .arrow a i{
        margin-top: 15px;
    }

    .top-content .social-icon{
        display: flex;
    }
    .top-content .social-icon a i{
        font-size: 20px;
        margin-top: 15px;
    }
    .top-content .news a{
        font-size: 15px;
    }

    /* #top-section{
        display: none;
        visibility: hidden;
    } */


    form{
        margin-top: 10px;
    }
    form .top-search{
        width: 50%;
    }

    .card.h-100 {
        height: 510px !important;
    }
    .card.h-100.show-more-card {
        height: 510px !important;
    }
    .owl-nav {
        display: none;
    }

    .nav-item:hover .drop-menu {
        opacity: 1;
        visibility: visible;
        transition: all 0.5s ease-in-out;
        /* transform: translateX(5rem); */
        transform: translate(5.5rem,-2.2rem);
        background: rgba(60, 59, 59, 0.2);

      }
      .nav-item:hover .score-drop_down li a{
        color: black;

      }
    .owl-dots {
        display: block;
    }
    .in-score i,
    .time-div i,
    .by-admin i,
    .view-div i,
    .comment-div i{
    font-size:15px;
    }

    .in-score,
    .time-div,
    .by-admin,
    .view-div,
    .comment-div{
    display: flex;
    flex-direction: column;
    margin-right: 2rem;
}
}

@media screen and (min-width: 501px) and (max-width: 670px) {
    .top-content .latest{
        font: 15px;
        margin-top: 10px;
    }
    .top-content .arrow{
        display: flex;
        flex-direction: row;
    }
    .top-content .arrow a i{
        margin-top: 15px;
    }

    .top-content .social-icon{
        display: flex;
    }
    .top-content .social-icon a i{
        font-size: 20px;
        margin-top: 15px;
    }
    .top-content .news a{
        font-size: 15px;
    }
    form .top-search{
        width: 60%;
    }
    .slide-card {
        display: none;
        visibility: hidden;
    }
    form{
        margin-top: 10px;
    }
}

@media screen and (min-width: 671px) and (max-width: 770px) {
    .top-content .arrow{
        display: flex;
        flex-direction: row;
    }
    .top-content .arrow a i{
        margin-top: 5px;
    }

    .top-content .social-icon{
        display: flex;
    }
    .top-content .social-icon a i{
        font-size: 25px;
        margin-top: 5px;
    }
    .top-content .news a{
        font-size: 15px;
    }
    form .top-search{
        width: 55%;
    }
    form{
        margin-top: 5px;
    }
    .slide-card {
        display: none;
        visibility: hidden;
    }
}

@media screen and (min-width: 771px) and (max-width: 1025px) {
    .top-content .arrow{
        display: flex;
        flex-direction: row;
    }
    .top-content .arrow a i{
        margin-top: 5px;
    }

    .top-content .social-icon{
        display: flex;
    }
    .top-content .social-icon a i{
        font-size: 25px;
        margin-top: 5px;
    }
    .top-content .news a{
        font-size: 15px;
    }
    form .top-search{
        width: 55%;
    }
    form{
        margin-top: 5px;
    }



    .read_commented a{
    font-size: 20px;
   }
   .read_commented .most_Read{
    width: 50%;
    height: 60%;
    padding: 10px 20px;
}
.read_commented .Commented{
    width: fit-content;
    height: fit-content;
    background: rgb(169, 167, 167);
    padding: 10px 20px;
    color: white;
}
.slide-card {
    display: none;
    visibility: hidden;
}

}




/* @media screen and (max-width: 700px) {
    html {
        font-size: 70%;
    }
    .left-discuss{
        text-align: center;
    }
    .mid-discuss .send-message{
       text-align: center;
    }
    .right-discuss ul{
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 1rem;
    }
    .work-image-grid{
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 1fr;
    }

}
@media screen and (min-width: 601px) and (max-width: 800px) {
    .work-image-grid{
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 1fr;
    }
    .left-discuss{
        text-align: center;
    }
    .right-discuss ul{
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 1rem;
    }
    .name-email input{
        width: 16rem;
        height: 3rem;
    }
    .message input{
        width: 34rem;
        height: 3rem;
    }
} */