body{
    background-color: #E3E6E3;
    width: 70%;
    margin: 0 auto;
    padding:10px;
}

header{
    background-color: #009270;
    display: flex;
}
#logo-1{
    height: 46px;
    margin-top: 7px;
    margin-left: 10px;
}
ul{
    font-size: 17px;
    color: whitesmoke;
    margin-left: -13px;
    cursor: pointer;
}


#profile-icon{
    height: 39px;
    margin-left: 102px;
    margin-top: 11px;
    position: relative;
    left: -18px;
    cursor: pointer;
}

#cribPluss{
    margin-left: 20px;
    margin-top: 20px;
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-top: 5px;
    margin-top: 15px;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
}

.btn{
    margin-left: 35px;
    margin-top: -5px;
} 
.linked-list-1{
   
    background-color: whitesmoke;
    width: 10%;
    height: fit-content;
    position: absolute;
    display: none;
}
#sub-list{
    color: black;
    padding: 10px;
    font-family:'Times New Roman', Times, serif;
    margin-left: 10px;
}
#news-ul:hover{

    #linked-list-id-1{
        display: block;
        z-index: 10;
    }
}

#news-ul:hover{

    #linked-list-id-2{
        display: block;
        z-index: 10;
    }
}
#series-ul:hover{

        #linked-list-id-2{
            display: block;
            z-index: 10;
    
    }
}


#sub-list:hover{

    background-color: #b5b8b5ee;
    
}

#news-drop-icon{
    height: 13px;
}


/*------second drop down - series*/

.linked-list-2{
    background-color: whitesmoke;
    width: 20%;
    position: absolute;
    z-index: 10;
    cursor: pointer;
    display: none;
    margin-left: 10px;
}


/*-----------team linked list*/

.main-teams-list {
    z-index: 30;
    display: none;
    position: absolute;
}

.teams-linked-list {
    background-color: white;
    width: 104%;
    display: flex
;
}

.teams-sub-list ul{
    color: black;
    padding: 5px;
    margin-top: -4px;
    font-size: 18px;
    margin-left: 10px;

}
.associates-sub-list ul{
    color: black;
    padding: 5px;
    margin-left: 64px;
    margin-top: -4px;
    font-size: 18px;
}

#teams-ul:hover{
    .main-teams-list{
        display: block;

    }
}

.associates-sub-list ul:hover{
    background-color: rgb(159, 156, 156);
}

.teams-sub-list ul:hover{
    background-color: rgb(159, 156, 156);
}

/*-------------------------list of video drop down*/

.sub-list-videos{
    position: absolute;
    background-color: white;
    width: 8%;
    z-index: 22;
    display: none;
}
.sub-list-videos ul{
    color: black;
    margin-top: 8px;
}

.sub-list-videos ul:hover{
    background-color: #797777f1;
}

#videos-ul:hover{

    .sub-list-videos{
        
        display: block;
    }
    
}


/*-----------------rankings drop down bar*/

.sub-list-ranking{

    position: absolute;
    width: 12%;
    background-color: white;
    display: none;

}
.sub-list-ranking ul{
    color: black;
    margin-top: 5px;
    margin-bottom: 10px;

}
#ranking-ul:hover{
    .sub-list-ranking{
        display: block;
    }
}
.sub-list-ranking ul:hover{
    background-color: #7a7a7a;
}



/*------------sublist - more -drop down bar*/

.sub-list-more{
    position: absolute;
    background-color: white;
    width: 12%;
    z-index: 22;
    display: none;
}
.sub-list-more ul{
    color: black;
    margin-top: 8px;
    margin-bottom: 8px;
}

#more-ul:hover{

    .sub-list-more{
    
        display: block;
    }  
}

.sub-list-more ul:hover{
    background-color: #7a7a7a;
}








/*---------------first nav done!-------*/

/*------------wokring on second nav bar*/

nav{
    background: #040000a6;
}
.Second-nav{
    display: flex;
}
#all-matches{
    position: relative;
    left: 6%;
    width: 100px;
    cursor: pointer;
}

#arrow-drop-down-all{
    height: 19px;
    position: absolute;
}
.all-match-drop{
    background: none;
    color: white;
    font-size: 18px;
    position: absolute;
    top: -1px;
}

/*-------------drop-down-sub-div-all matches*/
                                                                 /*--------you are curently woking here*/

                                                                 
.all-match-drop{
    cursor: pointer;
    height: 38px;
    margin-top: -5px;
    width: 63px;
}

.all-match-drop2{
    
    background: none;
    color: white;
    font-size: 13px;
    position: absolute;
    margin-left: 3px;
    padding: 10px;
    top: 74px;
    display: none;
    cursor: pointer;
    background-color: #52504F;
}



#all-matches-main-div{
    display: none;
}



.list-A-M{
    display: flex;
    background-color: #444444;
}
.list-of-all-matches {
    display: flex;
    background-color: #444444;
    justify-content: start;
    width: 100%;
}

.list-A-M button{

    border-radius: 43px;
    padding-top: 7px;
    margin-left: 19px;
    text-align: center;
    width: 83px;
    height: 29px;
}

.div-sub-division-1{
    width: 30%;
    position: relative;
    left: 20px;
}
.div-sub-division-2{
    min-width: 30%;
    position: relative;
}
.div-sub-division-3{
    position: relative;
    min-width: 30%;
}

#div-sub-m-p1{
    color: #f5f5f5c4;
    font-size: 18px;
    font-weight: 100;
    margin: 0;
    padding: 0;
}
#div-sub-m-title{
    padding: 0;
    color:#35f1c57e;
    margin-bottom: 0;
    padding-top: 0;

}
#div-sub-m-info{
    padding-top: 0;
    color: #f5f5f5c4;
    margin: 0;
    padding-left: 0;
}



/*----second nav complete*/

.carousel-box{
    background: #FFFFFF;
    border-radius: 9px;
    padding: 3px;
    margin-top: 9px;
    margin-left: 9px;
    position: relative;
    scroll-behavior: smooth;
    min-width:27%;

}

#match-type{
    font-family: math;
    font-size: 15px;
    margin-left: 279px;
    padding: 6px;
    border-top-left-radius: 16px;
    border-bottom-right-radius: 16px;
    border-bottom-left-radius: 16px;
    border-top-right-radius: 16px;
    color: white;
    margin-top: 13px;
    position: absolute;
    background-color: #504f4f;
}

.sub-sm-h-{

    display: flex;
    margin-top: -8px;
}
p{
    font-size: 13px;
    padding: 10px;
    width: 57%;
}

#SYT{
    height: 19px;
    width: 32px;
    margin-top: 5px;
}
#BRH{
    height: 19px;
    width: 32px;
    margin-top: 5px;
}

#country-name{
    margin-top: 0px;
    font-size: 24px;
    margin-left: 4px;
}
#runs{
    margin-top: 4px;
    position: relative;
    left: 92px;
}

#runs-opponet{
        margin-left: 87px;
        margin-top: 6px;

}

.sm-div{
    display: flex;
    margin-left: 9px;
}
.sm-div-2{
    display: flex;
    margin-left: 9px;
}
#current-status-of-match{
    text-decoration: none;
    color: red;
    font-size: 16px;
    margin-left: 9px;
}

.ls-sm-dv{
    text-decoration: none;
    background-color: #F0F0F0;
    padding: 3.3px;
    border-bottom-right-radius: 7px;
    border-bottom-left-radius: 7px;
    width: 100%;
    margin-left: -3px;
    margin-bottom: -3px;

}
#text-btm-lis-row{
    text-decoration: none;
    color: #040000a6;
    font-size: 10px;
    margin: 2px;
    font-family: math;
    position: relative;
    left: 60%;
}

/*--box editings compl by here*/


/*---going edit the main div which is the carousal -*/
.carousel{
    display: flex;
    overflow:scroll;
    position:relative;
    flex-direction: row;
    transition: all 3s ease;
    left: 0%;
    min-width: 100%;
    background: scroll;
    scrollbar-width: none;
    overflow-x: auto;
}

.btns{
    position: relative;
    z-index: 1;
    margin: 0;
    height: 0px;

}
#left-btn{
    position: relative;
    font-size: 3rem;
    padding-left: 24px;
    padding-right: 26px;
    padding-top: 13px;
    padding-bottom: 12px;
    border-radius: 61px;
    border: none;
    background-color: #e5ecea85;
    top: -149px;
    cursor: pointer;
    left: 0;
}

#right-btn{
    position: relative;
    font-size: 3rem;
    padding: 12px 26px 12px 24px;
    border-radius: 61px;
    border: none;
    background-color: #e5ecea85;
    top: -150px;
    left: 1184px;
    cursor: pointer;
}

/*-----------------third container-*/

.heading-3rd-div{
    display: flex;
    background-color: #FFFFFF;
    margin-top: 11px;
    margin-bottom: 11px;

}
#h2-3rd{

    color: black;
    display: flex;
    position: relative;
    left: 20px;

}

.ul-3rd{
    display: flex;
    left: 157px;
    position: relative;
}

#ul-3rd-div{
    color: black;
    background-color: #00000021;
    
    display: flex;
    padding: 0;
    margin: 10px;
}


#icon-3-div {
    position: relative;
   
    margin-top: -6px;
    height: 30px;
    position: relative;
    padding: 8px;
    margin-top: -1px;
}

#h3-div-sub-heading{
    padding: 0;
    margin: 0;
    margin-top: 8px;
    font-size:20px
}

/*---------------for the main div- news , video, and blogs css part start from here*/


.content{
    display: flex;
}


/*---news div css*/
.news{
    
    max-width: 20%;
    background-color:#E3E6E3;
}

.news-1{
    background-color: white;
}

#news-heading {
    width: 229px;
    font-size: 20px;
    color: #009270;
    margin-left: 0px;
    background-color: white;
    padding: 20px;
    margin-top: 0px;
}
.news1{
    max-width: 90%;
    margin: 9px;
    padding: 7px;
    font-size: 20px;
    margin-top: -20px;
    
}
#p-news1{
    text-decoration: none;
    color: black;
}
#p-news1-time{
    font-size: 19px;
    padding: 0;
    margin-top: 6px;
}
#p-news1:hover{
    text-decoration: underline;
}

/* latest photos div-----*/

.photos-2nd{
    background-color: white;
    margin-top: -9px;
}


#photos-heading-1{
    width: 221px;
    font-size: 20px;
    color: #009270;
    margin: 0px;
    padding-top: 12px;
    margin-left: -1px;
    padding-bottom: 10px;
}

#LP-1{
    height: 133px;
    width: 100%;
    border-radius: 10px;
}

#LP-t-1{
    font-size: 20px;
    width: 90%;
    color: black;
    position: relative;
    top: -33px;
    left: -6px;
    font-family: sans-serif;
}
.photo1{
    max-width: 93%;
    margin: 20px;
}

.photo2{
    max-width: 93%;
    margin: 20px;
    margin-top: -79px;
}

#photos-heading-1{
    width: 206px;
    font-size: 20px;
    color: #009270;
    margin: 10px;

}

#LP-time-1{
    font-size: 19px;
    position: relative;
    top: -63px;
    left: -8px;
    width: 217px;
}
#LP-hr{
    position: relative;
    top: -78px;
}


/*---blog div css*/
.blogs{
    background-color: #FFFFFF;
    margin-left: 10px;
    max-width: 50%;
}
#blog-img-1{
    height: 332px;
    width: 629px;
    object-fit: cover;
    padding: 24px;
    border-radius: 31px;
    margin-top: -24px;
}
#blog-top-short-heading{
    position: relative;
    left: 20px;
    color: #00000075;
    font-size: 20px;
    font-family: math;
}

#bg-news-1-title{
    margin-left: 17px;
    font-size: 40px;
    margin-top: -9px;

}
#bg-news-3-title{
    margin-left: 17px;
    font-size: 40px;
    margin-top: -9px;


}
#bg-news-1-title:hover{
    text-decoration: underline;
}
#bg-news-2-title:hover{
    text-decoration: underline;
}
#bg-news-3-title:hover{
    text-decoration: underline;
}
#bg-news-2-title{
    margin-left: 17px;
    font-size: 40px;
    margin-top: -9px;
}
.blog-first h4{
    position: relative;
    left: 20px;
    color: #00000094;
    width: 96%;
}
#blog-href-1{
    margin-left: 20px;
    font-size: 22px;
    text-decoration: none;
    width: 96%;
    display: block;
}
#blog-href-2{
    margin-left: 20px;
    font-size: 22px;
    text-decoration: none;
    margin-top: 5px;
    width: 96%;
}
#blog-href-3{
    margin-left: 20px;
    font-size: 22px;
    text-decoration: none;
    margin-top: 5px;
    width: 96%;
}
#blog-href-4{
    margin-left: 20px;
    font-size: 22px;
    text-decoration: none;
    margin-top: 5px;
    width: 96%;
    display: block;
}
#blog-href-5{
    margin-left: 20px;
    font-size: 22px;
    text-decoration: none;
    margin-top: 5px;
    width: 96%;
    display: block;
}
#blog-href-6{
    margin-left: 20px;
    font-size: 22px;
    text-decoration: none;
    margin-top: 5px;
    width: 96%;
    display: block;
}
#blog-href-7{
    margin-left: 20px;
    font-size: 22px;
    text-decoration: none;
    margin-top: 5px;
    width: 96%;
    display: block;
}

#blog-img-2{
    height: 332px;
    width: 629px;
    object-fit: cover;
    padding: 24px;
    border-radius: 31px;
    margin-top: -10px;
}

#blog-img-3{
    height: 332px;
    width: 629px;
    object-fit: cover;
    padding: 24px;
    border-radius: 31px;
    margin-top: -10px;

}


/*---videos div css*/
.video-advert{
    max-width: 30%;
}


.videos{
    background-color: #FFFFFF;
    max-width: 100%;
    margin-left: 15px;
}


.ads-pace{
        padding: 18px;
        height: 30px;
        margin-bottom: 12px;
        background-color: #FFFFFF;
        margin-left: 12px;

}
 
.video1{
    margin-bottom: -73px;
}

#video-img-1 {
    height: 180px;
    width: 349px;
    padding: 14px;
    margin-top: -23px;
    border-radius: 20px;
    position: relative;
}
.text-icon{
    display: flex;
    position: relative;
    bottom: 85px;
    width: 161%;
    color: white;
    left: 20px;
}
#icon-arrow-right-up{
    height: 22px;
}
#videos-ptag-on-image{
    font-family: auto;
    color: white;
    font-size: 15px;
}
#videos-ptag-on-image:hover{
    text-decoration: underline;
}
#video-title-1{
        position: relative;
        margin-top: 9px;
        margin-left: 9px;
        padding-top: 9px;
        color: #009270;
        font-size: 19px;
}

#moreVideos{
    background-color: #02a47e;
    position: relative;
    left: 35%;
    padding: 9px;
    font-size: 20px;
    color: white;
    border: none;
    border-radius: 4px;
    margin-bottom: 25px;
}
#ads-space2{
    margin-top: 10px;
    padding: 5px;
}



.button-list-open-close .all-match2{
    display: none;
}





/*--------footer css begins here one*/


footer {
    height: 280px;
    width: 143%;
    margin: 0;
    background-color: #4A4A4A;
    padding: 0;
    position: relative;
    display: grid;
    margin-left: -22%;
    justify-content: center;
}


.main-parent-f{
    display: flex;
    left: -48px;
    position: relative;

}

.child-1-f img{
    height: 30px;
    margin-left: 20px;
}
.child-2-f{
    margin-left: 20px;
}
.child-3-f{
    margin-left: 20px;
}
.child-4-f{
    margin-left: 20px;
}

#blog-p-commom-2nd-head{
    font-size: 24px;
    width: 96%;
    color: #5f5b5b;
    margin-left: 9px;
    margin-right: 10px;
}




/*------special videos tag*/

#Special-v-tag{
    
    position: relative;
    font-size: 20px;
    width: 93%;
    margin-left: 8px;
    color: black;
    font-weight: 600;
    margin-top: -16px;
   
    font-family: sans-serif;

}
#special-v-tag-2 {
    position: relative;
    width: 93%;
    margin-left: 9px;
    font-size: 17px;
    font-family: sans-serif;
    font-family: sans-serif;
    margin-top: -32px;
    margin-bottom: 86px;
}

#quick-ass-href-bgt{
    text-decoration: none;
}


/*-=------------------------------------------------------------second page - bgt 2024 - 25---------------------------------------------*/
/*-=------------------------------------------------------------second page - bgt 2024 - 25---------------------------------------------*/
/*-=------------------------------------------------------------second page - bgt 2024 - 25---------------------------------------------*/
/*-=------------------------------------------------------------second page - bgt 2024 - 25---------------------------------------------*/
/*-=------------------------------------------------------------second page - bgt 2024 - 25---------------------------------------------*/
/*-=------------------------------------------------------------second page - bgt 2024 - 25---------------------------------------------*/
/*-=------------------------------------------------------------second page - bgt 2024 - 25---------------------------------------------*/
/*-=------------------------------------------------------------second page - bgt 2024 - 25---------------------------------------------*/
/*-=------------------------------------------------------------second page - bgt 2024 - 25---------------------------------------------*/
/*-=------------------------------------------------------------second page - bgt 2024 - 25---------------------------------------------*/



.bgt-f-div-h1{
    background-color: white;
    padding: 20px;
    font-family: sans-serif;;
    
}
#bgt-h4{
    position: relative;
    top: -9px;
    font-family: sans-serif;
    color: #5f5b5b;
}
.bgt-list-2nd-div{
    display: flex;
    background-color: white;
    position: relative;
    margin-top: -44px;
}
.bgt-list-2nd-div ul{
    color: black;
    font-size: 22px;
    font-family: sans-serif;
}
.bgt-list-2nd-div ul:hover{
    text-decoration: underline;
    text-decoration-color: green;
    text-underline-position: under;
    
}


#bgt-top-stories-heading{
    font-family: sans-serif;
    padding: 20px;
    margin: 0;
}
.BGT-top-stories-main-1{
    background-color: white;
    max-width: 70%;
}
.bgt-story-blocks{
    display: flex;
}

.bgt-img-story img{
    height: 191px;
    padding: 16px;
    border-radius: 29px;
}
.bgt-story-text-1-h1 h1{
    width: 99%;
    margin-left: -3px;
    margin-top: 16px;
    font-family: sans-serif;
    font-size: 28px;
}
.bgt-story-text-1-h1 p{
    font-size: 20px;
    width: 87%;
    margin-top: -20px;
    position: relative;
    left: -11px;
}
#bgt-story-date-sub{
    position: relative;
    margin-top: -28px;
    font-size: 16px;
    font-family: sans-serif;
}

.bgt-matches--stats{
    background: white;
}


.bgt-main-both-stories-stats{
    display: flex;
    width: 100%;
}

.BGT-stats-main-2{
    min-width: 30%;
    background-color: #E3E6E3;
    margin-left: 9px;
    font-family: sans-serif;
}
.bgt-space-for-ads{
    background-color: white;
    min-height: 30px;
    margin-bottom: -13px;
}


/*----------------------------MATCHES STATS------------------------------------------------*/

.matches-bgt-all-match-stats-table {
    background-color: white;
    max-height: 246px;
}
.matches-bgt-all-match-stats-table h1{
    position: relative;
    color: #009270;
    padding-top: 26px;
    margin-left: 19px;
}
#h4-m-bgt-match-date{
    position: relative;
    margin-left: 10px;
}
.con-bgt-m-all{
    display: flex;
    margin-top: -37px;
    margin-left: 6px;
    color: #565353;

}
.bgt-div-for-f-counry-status{
    position: relative;
    left: 17px;
}
.bgt-runs{
    position: relative;
    left: 134px;
}

#bgt-hyperlink-result{
    position: relative;
    top: -23px;
    margin-left: 21px;
    color: blue;
    font-weight: 500;
    font-size: 19px;
}
#h4-m-bgt-match-date{
    font-size: 18px;
    margin-top: -9px;
}
.matches-bgt-all-match-stats-table hr{
    width: 90%;
    position: relative;
    top: -21px;
}
#line-bottom-2nd-div{
    margin: 0;
    margin-top: 0;
    position: relative;
}

.bgt-story-blocks hr{
    margin: 10px;
}
.BGT-top-stories-main-1 hr{
    width: 96%;
    color: rgb(177, 173, 173);
}



.lv-1-thumnails img{
    height: 200px;
    width: 276px;
    object-fit: cover;
    margin: -26px;
    margin-left: -17px;
    position: relative;
    margin-left: -15px;
    border-radius: 10px;
}
.lv-1-thumnails p {
    font-size: 17px;
    width: 256px;
    color: white;
    position: relative;
    text-decoration: underline;
    margin-left: -15px;
    margin-top: -38px;
    background-image: linear-gradient(355deg, black, #0000001c);
}
.lv-1-thumnails{
    max-width: 269px;
    padding: 14px;
    position: relative;
    top: 3px;
    left: 18px;
    height: 202px;
}

.heading-latest-vdeos h1{

    font-family: sans-serif;
    color: #009270;
    position: relative;
    margin-left: 20px;
}
.latest-videos-thmnails-titles{
    display: flex;
    flex-wrap: wrap;
}

.lastest-photos-ls-div{
    padding: 17px;
}

.select-1photos{
    max-width: 394px;
    background-color: #333333;
    border-radius: 10px;
    position: relative;
    height: 334px;
    margin: 16px;

}
.select-1photos img{
    height: 227px;
    width: 392px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.select-1photos p{
    position: relative;
    top: 10px;
    font-size: 1rem;
    color: white;
    font-family: sans-serif;
}
.select-1photos h1{
    position: relative;
    margin: 0;
    font-size: 1.4rem;
    margin-left: 10px;
    color: #ffffffcc;
    font-family: sans-serif;
}
.container-for-s-p-bgt{
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    max-width: 100%;
}

#lastest-photos-ls-div-h1{
    font-family: sans-serif;
    font-size: 2.3rem;
}

.bgt-story-text-1-h1 h1:hover{
    text-decoration: underline;
    text-decoration-color: black;
    cursor: pointer;
}
.bgt-story-blocks:hover{
    scale: 1.05;
    background-color: white;
}

#button-view-more-bgt{
    background-color: #009270;
    font-size: 20px;
    border: none;
    box-shadow: 0px 0px 0px 1px green;
    padding: 10px;
    position: relative;
    margin-left: 32%;
    margin-bottom: 30px;
    color: white;
}
.main-list-teams-bgt-2{
    width: 100%;
    background-color: white;
    
}
.main-list-teams-bgt-2 h1{
    color: #009270;
    margin-top: 10px;
    position: relative;
    margin-left: 10px;
    padding-top: 14px;
    width: 100%;
}
.main-list-teams-bgt-2 select{
    margin: 20px;
    padding: 16px;
    font-size: 20px;
    font-family: sans-serif;
    width: 90%;
}
.main-list-teams-bgt-2 select option{

    width: 100%;
    
}
.list-bgt-india-squad-option-value ul{ /*------------first team -india squad*/
    color: black;
}
.list-bgt-india-squad-option-value{
    margin-top: -21px;
    position: relative;
    padding-bottom: 10px;
}
.list-bgt-australian-squad-option-value{        /*------second list australia */
    color: black;
    margin-top: -20px;
}

.list-bgt-australian-squad-option-value ul{
    position: relative;
    color: black;
}

.list-bgt-prime-minister-XI-option-value{
    margin-top: 21px;
}
.list-bgt-prime-minister-XI-option-value ul{
    color: black;
    position: relative;
}

.videos2{
    background-color: white;
    margin-left: 12px;
}

.videos-222 {
    background-color: transparent;
    display: flex;
    height: 178px;
}

.videos-2222{
    margin-bottom: -198px;
}

#moreVideos1 {
    position: relative;
    padding: 8px;
    height: 113px;
    border-radius: 51px;
    border: none;
    font-size: 82px;
    background: none;
    top: -159px;
    left: 94%;
}

#video-img-22{
    height: 180px;
    width: 349px;
    padding: 14px;
    margin-top: -23px;
    border-radius: 20px;
    position: relative;
}
#video-title-22 {
    margin-left: 20px;
    font-size: 20px;
    color: #009276;
}
.containter-videos-222{
    background-color: transparent;
    height: 233px;
}

.top-side-menu-pp-nav-bag{
    background-color: #0000009c;
    /* position: absolute; */
    z-index: 100;
    width: 70%;
    position: absolute;
    height: 113%;
    top: 0;
    display: none;
}
.top-bar-m- h1{
    background-color: #009273;
    color: white;
    margin-left: 10px;
}
.button-pp-m-bar img{
    height: 26px;
    width: 26px;
    margin-top: 29px;
    position: relative;
}

.top-bar-m-{
    display: flex;
    background-color: #009273;
}
.button-pp-m-bar{
    position: relative;
    left: 87%;
}
.popup-menubar-div{
    width: 80%;
}
.list-ul-pp-m img{
    background: white;
    height: 36px;
    margin-top: 10px;
    margin-left: 20px;
}
.list-ul-pp-m ul{
    font-family: sans-serif;
    font-size: 20px;
    color: black;
}
.list-ul-pp-m{
    display: flex;
    background: white;
}

.list-ul-pp-m-gap p{
    background-color: rgb(182 178 178);
    width: 98%;
    height: 40px;
    margin: 0;
}
.ham-nav-bar-menu img{
    height: 30px;
    width: 30px;
    margin-top: 40px;
    cursor: pointer;
}



/*-----------------responsive css - ------------------------------------------------*/
/*-----------------responsive css - ------------------------------------------------*/
/*-----------------responsive css - ------------------------------------------------*/
/*-----------------responsive css - ------------------------------------------------*/
/*-----------------responsive css - ------------------------------------------------*/
/*-----------------responsive css - ------------------------------------------------*/
/*-----------------responsive css - ------------------------------------------------*/
/*-----------------responsive css - ------------------------------------------------*/

@media (min-width: 319px) and (max-width:1023px) {

    body{
    background-color: #E3E6E3;
    width: 100%;
    margin:0;
    padding:0px;
    }
    header ul{
        display:none;
    }
    header a img{
        display: none;
    }
    header #logo-1{
        height: 40px;
        position: relative;
        width: auto;
        
        margin-top: 14px;
    }
    .ham-nav-bar-menu p{
        transform: rotate(90deg);
        height: 28px;
        width: 16px;
        position: relative;
        font-size: 29px;
        color: white;
        margin-left: 9px;
    }
    .ham-nav-bar-menu{
        position: relative;
        left: 13px;
        top: -8px;
    }

    header a{
        text-decoration: none;
        position: relative;
        left: 68%;
        min-width: 10%;
        
    }
    header a p{
        font-size: 22px;
        font-family: sans-serif;
        color: white;
        font-weight: 800;
        margin-top: 12px;
        position: relative;
    }
    header{
        margin-top: 10px;
        position: fixed;
        z-index: 102;
        width: 100%;;
        top: 0;
    }

    .Second-nav ul{
        display: none;
    }
    .Second-nav{
        background-color: #009270;
        position: fixed;
        width: 100%;
        z-index: 106;
        top: 92px;
    }
    .f-second-nav{
        position: relative;
        width: 46%;
        display: grid;
        justify-content: center;
        height: 49px;
        margin-top: 8px;
    }
    .second-nav-sticky-addon{
        display: block;
        width: 100%;
        left: 0%;
        position: absolute;
        height: 71px;
        background-color: #009270;
        margin-top: 68px;
    }

    .f-second-nav p{
        font-size: 18px;
        color: white;
        margin-top: 10px;
    }
    .f-second-nav-2{
        position: absolute;
        left: 51%;
        width: 44%;
        top: 9px;
    }
    .f-second-nav-2 p{
        font-size: 18px;
        color: white;
        margin-top: 10px;
    }
    .carousel{
        position: relative;
        margin-top: 146px;
    }
    .carousel-box{
        padding: 5px;
        scroll-behavior: smooth;
        min-width: 33%;
    }
    .btns{
        display: none;
    }


    .f-second-nav-2{
        position: absolute;
        left: 66%;
        width: 24%;
    }

    .btn{
        display: none;
    }
    footer {
        height: 220px;
        width: 100%;
        margin: 0;
        background-color: #4A4A4A;
        padding: 0;
        position: relative;
        display: grid;
        margin-left: 0%;
        justify-content: center;
    }
    .child-1-f img {
        height: 30px;
        margin-left: 311px;
    }
    .main-parent-f {
        display: flex;
        left: 0;
        position: relative;
    }

    .heading-3rd-div{
        background-color: transparent;
    }
    #h2-3rd{
        display: none;
    }
    .ul-3rd{
        left: 11px;
        padding: 10px;
        overflow: scroll;
        width: 100%;
        scroll-behavior: smooth;
        scrollbar-width: none;
    }
    #ul-3rd-div{
        color: black;
        background-color: white;
        display: flex;
        padding: 0;
        margin: 3px;
        min-width: 30%;
    }
    #quick-ass-href-bgt {
        text-decoration: none;
        color: black;
    }

    .news-1{
        display: none;
    }
    .photos-2nd{
        display: none;
    }
    .ads-pace{
        display: none;
    }
    .blogs {
        background-color: #FFFFFF;
        margin-left: 0px;
        min-width: 100%;
    }
    .content{
        width: 100%;
    }
    .videos2{
        display: none;
    }
    .videos{
        display: none;
    }
    #video-img-22 {
        height: 153px;
        width: 325px;
        border-radius: 21px;
        position: relative;
        margin: 0;
        object-fit: cover;
    }
    .video-2222{
        width: 32%;
        padding: 6px;
    }
    .text-icon-1{
         display: flex;
         position: relative;
         bottom: 81px;
         width: 100%;
         color: white;
         left: 12px;
         background-image: linear-gradient(9deg, black, transparent);
         height: 63px;
    }
    #blog-img-1 {
        height: 100%;
        width: 96%;
        padding: 20px;
        border-radius: 21px;
       
    }
    #blog-href-7{
        display: none;
    }
    .blog-first br{

        display: none;
    }
    #blog-img-2{
        height: 100%;
        width: 96%;
    }
    #blog-img-3{
        height: 100%;
        width: 96%;
    }
    #blog-title-22{
        font-size: 21px;
        font-family: sans-serif;
        margin-left: 10px;

    }
    /*-------------footer --------*/
    .child-1-f img {
        height: 3vw;
        position: relative;
        right: 4px;
        margin-top: 2vh;
    }
    .child-2-f {
        margin-left: 0px;
    }
    .child-2-f ul{
        font-size: 1.2vw;
        color: white;
        cursor: pointer;
        padding: 1.2vw;
        margin: 2px;
    }
    .top-side-menu-pp-nav-bag{
        display: none;
        z-index: 103;
        width: 100%;

    }
    .button-pp-m-bar {
        position: relative;
        left: 80%;
        padding: 0px 16px;
        cursor: pointer;
    }
    
    /*------------------now i need to add a bottom sticky nav----------------------------*/

}

/*------this was for hide the nav bar menu and top storues and videos float.. on screen width exceeding - 1022px*/

@media (min-width: 1023px) and (max-width:2900px){
    .second-nav-sticky-addon{
        display: none;
    }
    header a p{
        display: none;
    }
    .ham-nav-bar-menu{
        display: none;
    }
    .containter-videos-222{
        display: none;
    }
    #blog-title-22{
        display:none;
    }
    .top-side-menu-pp-nav-bag{
        display: none;
    }
    .ham-nav-bar-menu img{
        display: none;
    }
}

/*--responsive desingh for each phones begins now -- startinwith the lowest to hightest*/

/*-------------------galazzy z fold 5--------*/

/*-------------------galazzy z fold 5--------*/

/*-------------------galazzy z fold 5--------*/

@media (min-width: 318px) and (max-width:376px){

    .second-nav-sticky-addon{

    }
    .f-second-nav-2 {
        position: absolute;
        left: 64%;
        width: 33%;
    }
    header a{
        left: 33%;
    }
    .carousel{

    }
    .carousel-box{
        min-width: 90%;
    }
    #ul-3rd-div{
        min-width: 60%;
    }
    .containter-videos-222{
        overflow: scroll;
        scroll-behavior: smooth;
        scrollbar-width: none;
    }
    .video-2222{
        width: 78%;
    }
    #video-img-22{
        height: 156px;
        width: 290px;
    }
    .text-icon-1{
        width: 84%;
    }
    #moreVideos1{
        display: none;
    }
    #blog-img-1{
        width: 89%;
    }
    .blogs{
        border-top-left-radius: 7px;
        border-top-right-radius: 7px;
        margin: 7px;
    }
    #bg-news-1-title{
        margin-left: 17px;
        font-size: 25px;
        margin-top: -18px;
        width: 90%;
    }
    #blog-p-commom-2nd-head {
        font-size: 20px;
        width: 90%;
        color: #5f5b5b;
        margin-left: 9px;
        margin-right: 10px;
        margin-top: -21px;
    }
    #blog-img-2{
        width: 86%;
    }
    #bg-news-2-title {
        margin-left: 18px;
        font-size: 25px;
        margin-top: -23px;
        width: 87%;
    }
    #blog-href-6{
        display: none;
    }
    
    #bg-news-3-title {
        font-size: 25px;
        width: 90%;
    }
    footer{
        display: none;
    }
    header a{
        
        left: 34%;
       
    }
    header a p {
        font-size: 15px;
    }
    .ul-3rd {
        overflow: scroll;
        width: 94%;
        margin: 14px;
        margin-left: -3px;
    }
    .blogs{
        margin: 0;
    }
    #blog-top-short-heading{
        left: 15px;
    }
    #blog-img-3 {
        
        width: 87%;
    }
    header #logo-1{
        left: 26%;
    }
    .f-second-nav-2 {
        position: absolute;
        left: 56%;
        width: 54%;
    }.top-side-menu-pp-nav-bag{
        height: 541%;
    }
    .button-pp-m-bar img{
        left: -83px;
    }
}

/*----------iphone 12 pro*/

@media (min-width: 376px) and (max-width:391px){
    #logo-1{
        left: 15%;

    }
    #moreVideos1{
        display: none;
    }
    header a{
        left: 21%;
    }
    header a p {
        font-size: 17px;
    }
    .f-second-nav-2 {
        position: absolute;
        left: 33%;
        width: 28%;
    }
    .f-second-nav{
        left: -19px;
    }
    .carousel-box {
        min-width: 88%;
    }
    #ul-3rd-div {
        min-width: 58%;
    }
    .containter-videos-222 {
        width: 100%;
        overflow: scroll;
        scrollbar-width: none;
        transition: all 3s ease;
        height: 100%;
        overflow-y: hidden;

    }
    .video-2222 {
        width: 83%;
    }

    #blog-img-1{
        width: 89%;
    }

    #bg-news-1-title {
        font-size: 30px;
    }
    #blog-p-commom-2nd-head {
        font-size: 20px;
        width: 91%;
        margin-top: -18px;
    }
    #bg-news-2-title {
        margin-left: 12px;
        font-size: 30px;
        margin-top: -15px;
        width: 95%;
    }
    #blog-href-6{
        display: none;
    }
    #bg-news-3-title {
        margin-left: 12px;
        font-size: 30px;
        margin-top: -17px;
    }
    #blog-img-3 {
        height: 100%;
        width: 88%;
    }
    footer{
        display: none;
    }
    .f-second-nav-2 {
        position: absolute;
        left: 49%;
        width: 46%;
    }
    .ul-3rd {
        left: 0px;
        width: 98%;
    }
    #blog-img-2 {
        height: 100%;
        width: 89%;
    }
    #video-img-22{
        height: 246px;
    }
    .button-pp-m-bar{
        left: 53%;
    }
    .list-ul-pp-m-gap p {
        width: 94%;
        height: 18px;
    }
    .f-second-nav-2 p {
        font-size: 18px;
        color: white;
        margin-top: 10px;
        width: 100%;
    }
    #blog-top-short-heading {
        left: 9px;
    }

}
@media (min-width: 392px) and (max-width:415px) {

    .carousel-box {
        min-width: 82%;
    }
    #ul-3rd-div{
        min-width: 53%;
    }
    .ul-3rd{
        left: 10px;
        padding: 2px;
        width: 96%;
    }
    .containter-videos-222{
        overflow: scroll;
        scrollbar-width: none;
        max-height: 60%;
        overflow-y: hidden;
        width: 93%;
        margin-left: 16px;
    }
    #blog-p-commom-2nd-head {
        width: 92%;
    }
    .video-2222 {
        width: 79%;
        padding: 6px;
    }
    .blogs img{
        max-width: 88%;
    }
    .blog p{
        width: 92%;
    }
    footer{
        display: none;
    }
    #logo-1{
        left: 26%;
    }
    header a{
        left: 37%;
    }
    header a p{
        font-size: 18px;
    }
    #blog-href-6{
        display: none;
    }
    .f-second-nav-2{
        width: 31%;
    }
    .f-second-nav-2 p{
        width: 100%;
        left: 61%;
    }
    #blog-top-short-heading{
        margin-left: 10px;
        width: 80%;
    }
    .button-pp-m-bar{
        left: 56%;
    }
    .list-ul-pp-m-gap p{
        width: 94%;
        height: 25px;
    }
    #moreVideos1{
        display: none;
    }
}
@media (min-width: 416px) and (max-width:431px){
    #logo-1{

    }
    #blog-title-22{
        max-width: 90%;;
    }
    .carousel-box {
        min-width: 82%;
    }
    #ul-3rd-div{
        min-width: 53%;
    }
    .ul-3rd{
        left: 10px;
        padding: 2px;
        width: 96%;
    }
    .containter-videos-222{
        overflow: scroll;
        scrollbar-width: none;
        max-height: 60%;
        overflow-y: hidden;
        width: 91%;
        margin-left: 16px;
    }
    .video-2222 {
        width: 79%;
        padding: 6px;
    }
    .blogs img{
        max-width: 88%;
    }
    .blog-first p{
        width: 90%;
    }
    #blog-p-commom-2nd-head {
        font-size: 22px;
        width: 91%;
    }
    footer{
        display: none;
    }
    #logo-1{
        left: 26%;
    }
    header a{
        left: 37%;
    }
    header a p{
        font-size: 18px;
    }
    .f-second-nav-2{
        width: 31%;
    }
    .f-second-nav-2 p{
        width: 82%;
        left: 61%;
    }
    #blog-top-short-heading{
        margin-left: 10px;
        width: 80%;
    }
    .button-pp-m-bar{
        left: 56%;
    }
    .list-ul-pp-m-gap p{
        width: 94%;
        height: 25px;
    }
    #moreVideos1{
        display: none;
    }
}

@media (min-width: 432px) and (max-width:541px){

    #logo-1{

    }
    #blog-title-22{
        max-width: 90%;;
    }
    .carousel-box {
        min-width: 64%;
    }
    #ul-3rd-div{
        min-width: 53%;
    }
    .ul-3rd{
        left: 10px;
        padding: 2px;
        width: 96%;
    }
    .containter-videos-222{
        overflow: scroll;
        scrollbar-width: none;
        max-height: 60%;
        overflow-y: hidden;
        width: 91%;
        margin-left: 16px;
    }
    .video-2222 {
        width: 79%;
        padding: 6px;
    }
    .blogs img{
        max-width: 88%;
    }
    .blog-first p{
        width: 90%;
    }
    #blog-p-commom-2nd-head {
        font-size: 22px;
        width: 91%;
    }
    footer{
        display: none;
    }
    #logo-1{
        left: 26%;
    }
    header a{
        left: 47%;
    }
    header a p{
        font-size: 18px;
    }
    .f-second-nav-2{
        width: 31%;
    }
    .f-second-nav-2 p{
        width: 82%;
        left: 61%;
    }
    #blog-top-short-heading{
        margin-left: 10px;
        width: 80%;
    }
    .button-pp-m-bar{
        left: 56%;
    }
    .list-ul-pp-m-gap p{
        width: 96%;
        height: 17px;
    }
    #moreVideos1{
        display: none;
    }

}


@media (min-width: 541px) and (max-width:769px) {
    #logo-1{

        left: 34%;
    }
    #blog-title-22{
        max-width: 90%;;
    }
    .carousel-box {
        min-width: 42%;
    }
    #ul-3rd-div{
        min-width: 36%;
    }
    .ul-3rd{
        left: 10px;
        padding: 2px;
        width: 96%;
    }
    #video-title-22{
        
    }
    .containter-videos-222{
        overflow: scroll;
        scrollbar-width: none;
        max-height: 60%;
        overflow-y: hidden;
        width: 95%;
        margin-left: 16px;
    }
    .video-2222 {
        width: 79%;
        padding: 6px;
    }
    .blogs img{
        max-width: 93%;
    }
    
    .blog-first p{
        width: 90%;
    }
    #blog-p-commom-2nd-head {
        font-size: 22px;
        width: 91%;
    }
    footer{
        display: none;
    }
    #logo-1{
        left: 26%;
    }
    header a{
        left: 58%;
    }
    header a p{
        font-size: 18px;
    }
    .f-second-nav-2{
        width: 31%;
    }
    .f-second-nav-2 p{
        width: 82%;
        left: 61%;
    }
    #blog-top-short-heading{
        margin-left: 10px;
        width: 80%;
    }
    .button-pp-m-bar{
        left: 56%;
    }
    .list-ul-pp-m-gap p{
        width: 96%;
        height: 17px;
    }
    #moreVideos1{
        display: none;
    }

}

@media (min-width: 769px) and (max-width:1023px) {

    #logo-1{

        left: 34%;
    }
    #blog-title-22{
        max-width: 90%;;
    }
    .carousel-box {
        min-width: 42%;
    }
    #ul-3rd-div{
        min-width: 36%;
    }
    .ul-3rd{
        left: 10px;
        padding: 2px;
        width: 96%;
    }
    #video-title-22{
        
    }
    .containter-videos-222{
        overflow: scroll;
        scrollbar-width: none;
        max-height: 60%;
        overflow-y: hidden;
        width: 95%;
        margin-left: 16px;
    }
    .video-2222 {
        width: 79%;
        padding: 6px;
    }
    .blogs img{
        max-width: 93%;
    }
    
    .blog-first p{
        width: 90%;
    }
    #blog-p-commom-2nd-head {
        font-size: 22px;
        width: 91%;
    }
    footer{
        display: none;
    }
    #logo-1{
        left: 26%;
    }
    header a{
        left: 58%;
    }
    header a p{
        font-size: 18px;
    }
    .f-second-nav-2{
        width: 31%;
    }
    .f-second-nav-2 p{
        width: 82%;
        left: 61%;
    }
    #blog-top-short-heading{
        margin-left: 10px;
        width: 80%;
    }
    .button-pp-m-bar{
        left: 56%;
    }
    .list-ul-pp-m-gap p{
        width: 96%;
        height: 17px;
    }
    #moreVideos1{
        display: none;
    }

}




@media (min-width: 768px) and (max-width:1023px) {

    body{
    background-color: #E3E6E3;
    width: 100%;
    margin:0;
    padding:0px;
    }
    header ul{
        display:none;
    }
    header a img{
        display: none;
    }
    header #logo-1{
        height: 40px;
        position: relative;
        width: auto;
        
        margin-top: 14px;
    }
    .ham-nav-bar-menu p{
        transform: rotate(90deg);
        height: 28px;
        width: 16px;
        position: relative;
        font-size: 29px;
        color: white;
        margin-left: 9px;
    }
    .ham-nav-bar-menu{
        position: relative;
        left: 13px;
        top: -8px;
    }

    header a{
        text-decoration: none;
        position: relative;
        left: 68%;
        min-width: 10%;
        
    }
    header a p{
        font-size: 22px;
        font-family: sans-serif;
        color: white;
        font-weight: 800;
        margin-top: 12px;
        position: relative;
    }
    header{
        margin-top: 10px;
        position: fixed;
        z-index: 102;
        width: 100%;;
        top: 0;
    }

    .Second-nav ul{
        display: none;
    }
    .Second-nav{
        background-color: #009270;
        position: fixed;
        width: 100%;
        z-index: 106;
        top: 92px;
    }
    .f-second-nav{
        position: relative;
        width: 46%;
        display: grid;
        justify-content: center;
        height: 49px;
        margin-top: 8px;
    }
    .second-nav-sticky-addon{
        display: block;
        width: 100%;
        left: 0%;
        position: absolute;
        height: 71px;
        background-color: #009270;
        margin-top: 68px;
    }

    .f-second-nav p{
        font-size: 18px;
        color: white;
        margin-top: 10px;
    }
    .f-second-nav-2{
        position: absolute;
        left: 51%;
        width: 44%;
        top: 9px;
    }
    .f-second-nav-2 p{
        font-size: 18px;
        color: white;
        margin-top: 10px;
    }
    .carousel{
        position: relative;
        margin-top: 146px;
    }
    .carousel-box{
        padding: 5px;
        scroll-behavior: smooth;
        min-width: 33%;
    }
    .btns{
        display: none;
    }


    .f-second-nav-2{
        position: absolute;
        left: 66%;
        width: 24%;
    }

    .btn{
        display: none;
    }
    footer {
        height: 220px;
        width: 100%;
        margin: 0;
        background-color: #4A4A4A;
        padding: 0;
        position: relative;
        display: grid;
        margin-left: 0%;
        justify-content: center;
    }
    .child-1-f img {
        height: 30px;
        margin-left: 311px;
    }
    .main-parent-f {
        display: flex;
        left: 0;
        position: relative;
    }

    .heading-3rd-div{
        background-color: transparent;
    }
    #h2-3rd{
        display: none;
    }
    .ul-3rd{
        left: 11px;
        padding: 10px;
        overflow: scroll;
        width: 100%;
        scroll-behavior: smooth;
        scrollbar-width: none;
    }
    #ul-3rd-div{
        color: black;
        background-color: white;
        display: flex;
        padding: 0;
        margin: 3px;
        min-width: 30%;
    }
    #quick-ass-href-bgt {
        text-decoration: none;
        color: black;
    }

    .news-1{
        display: none;
    }
    .photos-2nd{
        display: none;
    }
    .ads-pace{
        display: none;
    }
    .blogs {
        background-color: #FFFFFF;
        margin-left: 0px;
        min-width: 100%;
    }
    .content{
        width: 100%;
    }
    .videos2{
        display: none;
    }
    .videos{
        display: none;
    }
    #video-img-22 {
        height: 153px;
        width: 325px;
        border-radius: 21px;
        position: relative;
        margin: 0;
        object-fit: cover;
    }
    .video-2222{
        width: 32%;
        padding: 6px;
    }
    .text-icon-1{
         display: flex;
         position: relative;
         bottom: 81px;
         width: 100%;
         color: white;
         left: 12px;
         background-image: linear-gradient(9deg, black, transparent);
         height: 63px;
    }
    #blog-img-1 {
        height: 100%;
        width: 96%;
        padding: 20px;
        border-radius: 21px;
       
    }
    #blog-href-7{
        display: none;
    }
    .blog-first br{

        display: none;
    }
    #blog-img-2{
        height: 100%;
        width: 96%;
    }
    #blog-img-3{
        height: 100%;
        width: 96%;
    }
    #blog-title-22{
        font-size: 21px;
        font-family: sans-serif;
        margin-left: 10px;

    }
    /*-------------footer --------*/
    .child-1-f img {
        height: 3vw;
        position: relative;
        right: 4px;
        margin-top: 2vh;
    }
    .child-2-f {
        margin-left: 0px;
    }
    .child-2-f ul{
        font-size: 1.2vw;
        color: white;
        cursor: pointer;
        padding: 1.2vw;
        margin: 2px;
    }
    .top-side-menu-pp-nav-bag{
        display: none;
        z-index: 103;
        width: 100%;

    }
    .button-pp-m-bar {
        position: relative;
        left: 80%;
        padding: 0px 16px;
        cursor: pointer;
    }
    
    /*------------------now i need to add a bottom sticky nav----------------------------*/

}

/*------this was for hide the nav bar menu and top storues and videos float.. on screen width exceeding - 1022px*/

@media (min-width: 1023px) and (max-width:2900px){
    .second-nav-sticky-addon{
        display: none;
    }
    header a p{
        display: none;
    }
    .ham-nav-bar-menu{
        display: none;
    }
    .containter-videos-222{
        display: none;
    }
    #blog-title-22{
        display:none;
    }
    .top-side-menu-pp-nav-bag{
        display: none;
    }
    .ham-nav-bar-menu img{
        display: none;
    }
}