/* nav and header */


body{
    margin: 0;
    padding-top: 100px;
    overflow-x: hidden;
    
 
}

.trending-next-container {
			display: flex;
			flex-wrap: wrap;
			gap: 2%;
			justify-content: space-between;
			margin: 0 auto;
			max-width: 1200px;
		}

		.trending-table, .next-match-table {
			flex: 1 1 48%;
			min-width: 300px;
			box-sizing: border-box;
		}

		@media (max-width: 768px) {
			.trending-next-container {
				flex-direction: column;
				gap: 20px;
			}

			.trending-table, .next-match-table {
				flex: 1 1 100%;
				width: 100%;
			}
		}


a:hover{
    cursor: pointer;
}

.navbody{
    background-color: rgb(224, 224, 224);
    position: fixed;
    z-index: 1;
    top: 0px;

}

.navcurve{
    background-color: rgb(221, 211, 199);
    border-radius: 30px;
    transition: transform 0.3s ease;
}

.navcurve:hover{
    background-color: rgb(180, 101, 101);
    transform: scale(0.9);
}

.navcurve a{
    text-decoration: none;
    color: red;
    font-size: 22px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: 700;
    
}

.navcurve a:hover{
    color: white;
}
/* welcome/intro */
.navwelcome{
    background-color: rgb(224, 224, 224);
    position: relative;
    bottom: 39px;
    background-image: url(MEDIA/cups/historyb.jpg);
    background-repeat: repeat;
    height: 600px;
}

.navwelcome tr td h1{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 80px;
    color:   rgb(67, 121, 240);
    line-height: 300px;
}
   
.navwelcome tr td h1 span{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 45px;
    color: red;
  
    position: relative;
    top: 90px;
    right: 30px;
}
/* nextfixture/trend */
.fixtren{
    background-color:  rgb(224, 224, 224);
    border-radius: 40px;
    transition: transform 0.3s ease;
}

.fixtren:hover{
    transform: scale(0.9);
    cursor: pointer;
}

.tren{
    width: 200px;
    height: 60px;
    background-color: red;
    color: rgb(243, 241, 241);
    font-size: 25px;
    font-weight: bold;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    border: none;
    position: relative;
    bottom: 20px;
}

.tren1{
    width: 200px;
    height: 60px;
    background-color: red;
    color: rgb(243, 241, 241);
    font-size: 25px;
    font-weight: bold;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    border: none;  
}

.consortium h2{
   
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.consortium h2 a{
    text-decoration: none;
    color: red;
}

.fixt h1{
    color: red;
    font-size: 35px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
}
   
.fixti h1{
    color:rgb(141, 83, 83);
    font-size: 24px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
}

.fixn h1{
    color: red;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
}

.clips a button{
    width: 200px;
    height: 60px;
    border-radius: 30px;
    background-color: red;
    color: rgb(250, 223, 223);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
    border: none;
    font-size: 20px;
}

.clips a button:hover{
    background-color: rgb(128, 44, 44);
    color: rgb(255, 250, 250);
    cursor: pointer;
}

.local button{
    width: 350px;
    height: 60px;
    border: none;
    background-color: rgb(235, 192, 192);
    color: rgb(104, 21, 21);
    font-size: 20px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-align: center;
    
}
/* latest news */
.latet h2{
    position: relative;
    right: 575px;
    color: red;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
    font-size: 27px;
    
}

.imgnew img{
    object-fit: contain; 
}

.imgnewa a img{
    object-fit: contain; 
}
 
.fixtren1{
    background-color:  rgb(224, 224, 224);
    border-radius: 40px;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.fixtren1:hover{
    transform: scale(0.9);
    cursor: pointer;
}

.fixtren2{
    background-color:  rgb(224, 224, 224);
    border-radius: 40px;
    position: relative;
    left: 20px;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.fixtren2:hover{
    transform: scale(0.9);
    cursor: pointer;
}

.v h1{
    color: red;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
    font-size: 50px;
}

.fixtren2vid{
    background-color:  rgb(224, 224, 224);
    border-radius: 40px;
    position: relative;
    left: 15px;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.fixtren2vid:hover{
    transform: scale(0.9);
    cursor: pointer;
}

.fixtren3{
    background-color:  rgb(224, 224, 224);
    border-radius: 40px;
    position: relative;
    left: 40px;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.fixtren3:hover{
    transform: scale(0.9);
    cursor: pointer;
}

.fixtren3vid{
    background-color:  rgb(224, 224, 224);
    border-radius: 40px;
    position: relative;
    left: 30px;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.fixtren3vid:hover{
    transform: scale(0.9);
    cursor: pointer;
}

.news h2{
    
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
}

.news h2 a{
    text-decoration: none;
    color: red;
    font-size: 21px;
}
/* latest videos */
.latetv {
    text-align: left; 
    position: relative;
    left: 15px;

}

.latetv h2{
    color: red;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
    font-size: 27px;
  
}

.news-1a{
    color: rgba(110, 14, 14, 0.884);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 14.5px;
}

.imag{
    position: relative;
    top: 50px;
}

.viddet h2 a{
    text-decoration: none;
    color: red;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 18.5px;
    text-align: center;
}
/* npfl table */
.tabledet h2{
    color: red;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 50px;
}

.tablelink a{
    text-decoration: none;
    color: red; 
    position: relative;
    top: 1200px;
    left: 1050px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 27px;
}

.leaguetable{
    border-collapse: collapse;
}

.tabspan{
    color:  rgb(180, 101, 101);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 45px;
}

.tabhead th{
    color:  rgb(211, 191, 191);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 30px;
    padding: 10px;
}

.tabhead{
    background-color:  rgb(226, 8, 8);
}

.tabrow1 td{
    color:  rgb(22, 224, 231);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 30px;
    padding: 10px;
}

.tabrow1{
    background-color:  rgb(9, 16, 126);
}

.tabrow2 td{
    color:  rgb(211, 191, 191);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 30px;
    padding: 10px;
    
}

.tabrow2{
    background-color:  rgb(221, 61, 69);
}
/* kit */
.kitsh{
    text-align: left;
    position: relative;
    left: 30px;
    color: red;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
    font-size: 20px;
}

.fixtrenkit{
    background-color:  rgb(226, 220, 220);
    border-radius: 40px;
    cursor: pointer;
    transition: 0.3s ease;
    cursor: pointer;
}

.fixtrenkit:hover{
    transform: scale(0.9);
}

.fixtrenkit1{
    background-color:   rgb(226, 220, 220);
    border-radius: 40px;
    cursor: pointer;
    position: relative;
    left: 15px;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.fixtrenkit1:hover{
    transform: scale(0.9);
}

.fixtrenkit2{
    background-color:   rgb(226, 220, 220);
    border-radius: 40px;
    cursor: pointer;
    position: relative;
    left: 30px;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.fixtrenkit2:hover{
    transform: scale(0.9);
}

.kittxt{
    color: red;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
    font-size: 30px;
}

.num{
    color: red;
    font-size: 25px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.numth{
    color: black;
    font-size: 25px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-decoration: line-through;
}

.kitbtn button{
    width: 200px;
    height: 60px;
    border-radius: 30px;
    background-color: red;
    color: rgb(250, 223, 223);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
    border: none;
    font-size: 20px;
    cursor: pointer;
}

.kitbtn button:hover{
    background-color:  rgb(250, 250, 250);
    color: red;
    cursor: pointer;
   
}
/* boot */
.btsh h2 a{
    color: red;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
    text-decoration: none;
}

.bt{
    color: red;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
    font-size: 25px;
}

.canc{
    color: black;
    font-weight: bold;
    font-size: 25px;
    text-decoration: line-through;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.can{
    color: red;
    font-weight: bold;
    font-size: 25px;
 
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
/* SQUAD SHEET header top */
.fif{
    position: relative;
    bottom: 42px;
    background-color:  rgb(224, 224, 224);
}

.men{
    color: red;
    font-weight: bold;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.coef{
    color: rgb(133, 7, 65);
    font-weight: bold;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.in h3{
    color: red;
    font-weight: bold;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 23px;
}

.out{
    color:  rgb(133, 7, 65);
    font-weight: bold;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 20px;
}

.n{
    color:  green;
    font-weight: bold;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 20px;
}

.ad{
    background-color: rgb(146, 146, 146);
}

.ad tr td h3 {
    color: red;
    font-weight: bold;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 30px;
}
/* SQUAD SHEET table */
.tabsq{
    border-collapse: collapse;
    border-color: rgb(199, 123, 123);
   
}

.tabsq1{
    border-collapse: collapse;
}
.tabsqhead th{
    color: red;
    font-weight: bold;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 25px;
    text-decoration: underline;
    background-color:   rgb(223, 189, 189);
}

.btnsq button{
    height: 60px;
    width: 60px;
    border-radius: 30px;
    background-color: red;
    color:  white;
    font-size: 19px;
    font-weight: bold;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    border: none;
}

.btnsq{
    background-color: rgb(185, 180, 180);
}

.wordssq{
    color:  red;
    font-size: 20.5px;
    font-weight: bold;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}



.wordssqgk{
    color:  rgb(32, 29, 29);
    font-size: 17px;
    font-weight: bold;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.sqimg img{
    border-radius: 70px;
    height: 180px;
    width: 130px;
}

.others h2{
    color:  red;
    font-size: 20.5px;
    font-weight: bold;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
/* about us */
.topic{
    position: relative;
    top: 13px;
    background-color: rgb(224, 224, 224);
    color: red;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;   
}

.topic1{
    position: relative;
    bottom: 25px;
    background-color: rgb(224, 224, 224);
    color: red;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; 
}

.colab1{
    background-color: rgb(180, 58, 58);
}

.abbody{
    background-color:rgb(207, 201, 201);
    padding: 0;
}

.abhome a{
    text-decoration: none;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: white;
    font-size: 35px;
}

.abhome a:hover{
    color: rgb(39, 199, 18);
}

.abshop a button{
    height: 98px;
    width: 180px;
    background-color:rgb(207, 201, 201);
    color: rgb(180, 58, 58);
    font-size: 22px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    border-radius: 30px;
    font-weight: bold;
    border: none;
    transition: transform 0.3s ease;
}

.abshop a button:hover{
    background-color: rgb(39, 199, 18);
    color: rgb(221, 206, 206);
    cursor: pointer;
    transform: scale(0.9);
}

.socab{
    background-color: rgb(221, 206, 206);
    border-radius: 70px;   
}

.socab:hover{
    background-color: rgb(39, 199, 18);
    color: rgb(221, 206, 206);
    cursor: pointer;
}

.rootab{
    padding-left: 10px;
    padding-right: 10px;
    color: rgb(230, 58, 58);
    font-size: 25px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; 
    font-weight: bold;
}

.paraab{
    padding-left: 10px;
    padding-right: 10px;
    color:rgb(230, 58, 58);
    font-size: 20px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: bold;
}

.sponab{
    color: black;
    font-size: 50px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: bold;
    color: rgb(230, 58, 58);
}
/* store */
.fixtrenst{
    background-color:  rgb(224, 224, 224);
    border-radius: 35px;
    position: relative;
    left: 10px;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.fixtrenst:hover{
transform: scale(0.9);
}

.fixtrensto{
    background-color:  rgb(224, 224, 224);
    border-radius: 35px;
    position: relative;
    left: 25px;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.fixtrensto:hover{
    transform: scale(0.9);
}

.fixtrenstor{
    background-color:  rgb(224, 224, 224);
    border-radius: 35px;
    position: relative;
    left: 40px;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.fixtrenstor:hover{
    transform: scale(0.9);
}

.fixtrenstors{
    background-color:  rgb(224, 224, 224);
    border-radius: 35px;
    position: relative;
    left: 10px;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.fixtrenstors:hover{
    transform: scale(0.9);
}


.fixtrenstorsy{
    background-color:  rgb(224, 224, 224);
    border-radius: 35px;
    position: relative;
    left: 30px;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.fixtrenstorsy:hover{
    transform: scale(0.9);
}

.fixtrenstore{
    background-color:  rgb(224, 224, 224);
    border-radius: 35px;
}

.bootname{
    color: red;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
    font-size: 20px;
}

.sp1{
    color: red;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
    font-size: 20px;
}

.sp2{
    text-decoration: line-through;
    color:  green;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
    font-size: 20px;
}

.btnst h3 a{
    color:  rgb(224, 224, 224);
    text-decoration: none;   
}

.btnst h3 a:hover{
    color:  rgb(255, 255, 255);
     
}


.btnst{
    height: 70px;
    width: 150px;
    border-radius: 30px;
    border: none;
    background-color: red;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
    font-size: 20px;
    text-align: center;
}

.btnst:hover{
    background-color: rgb(15, 209, 15);
    
}
/* detail pages */
.bootimg{
    border-radius: 25px;
}

.bootnnm h3{
    position: relative;
    right: 30px;
    top: 15px;
    font-size: 36.5px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
    color: rgb(255, 3, 3);
}

.detailssh h3{
    font-size: 18px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
    position: relative;
    left: 2px;
    color: rgb(255, 3, 3);
}

.detailssh1 h3{
    font-size: 18px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
    color: rgb(255, 3, 3);
}

.detailssh3 h3{
    font-size: 18px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
    color: rgb(255, 3, 3);
    text-align: center;
}

.btnshp a{
   
    text-decoration: none;
}

.sizekitbar {
    height: 30px;
    width: 90px;
    border: none;
    background-color: rgb(240, 255, 255);
    color: red;
    font-size: 15px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
    text-align: center;
    position: relative;
    left: 50px;
    bottom: 45px;
    cursor: pointer;
}

.sizebar label{
    font-size: 20px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
    color:  red;
}

.corp{
    font-size: 20px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
    color:  red;
}

.btnshp a button{
    height: 70px;
    width: 150px;
    border-radius: 30px;
    border: none;
    background-color: red;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
    font-size: 20px;
    color:  rgb(255, 255, 255);
    cursor: pointer;
    transition: transform 0.3s ease;
}

.btnshp a button:hover{
    background-color: rgb(255, 255, 255);
    color:  rgb(248, 3, 3);
    transform: scale(0.9);
}

.tbd{
    background-color: rgb(224, 224, 224);
    border-radius: 30px;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.tbl{
    background-color: rgb(224, 153, 153);
    border-radius: 30px;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.captothers h2{
    color: red;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
    font-size: 30px;
}

.item1{
    background-color:  rgb(224, 153, 153);
    border-radius: 35px;
    border: none;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.item1:hover{
    transform: scale(0.9);
}

.item1 table tr td h3{
    color:  rgb(224, 224, 224);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
    font-size: 22.5px;
}

.item2{
    background-color:   rgb(224, 224, 224);
    border-radius: 35px;
    border: none;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.item2:hover{
    transform: scale(0.9);
}

.item2 table tr td h3{
    color:  rgb(49, 49, 49);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
    font-size: 22.5px;
}

/* cart page */
.itemcart{
    background-color: rgb(245, 238, 229);
}

.cartitem{
    color: red; 
    font-size: 33px; 
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; 
    font-weight: bold;
}

.product th{
    color:rgb(114, 113, 113);
}

.poscart{
    position: relative;
    bottom: 220px;
}

.poscart2{
    position: relative;
    bottom: 100px;
}

.imgcart img{
    position: relative;
    right: 150px;
}

.proddet{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 25px;
    color: rgb(49, 49, 49);
}

.proddet1{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 40px;
    color: rgb(218, 73, 73);
}

.proddet2{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 25px;
    color: rgb(33, 126, 212);
}

.remove button{
    height: 70px;
    width: 150px;
    border-radius: 30px;
    border: none;
    background-color: red;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
    font-size: 20px;
    text-align: center;
    color: white;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.remove button:hover{
    color: red;
    background-color: white;
    transform: scale(0.9);
}

.Shopping a{
    text-decoration: none;
    color: red;
    font-size: 20px;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif ;
    font-weight: bold;
}

.summary{
    background-color:   rgb(224, 224, 224);
}

.orderr h1{
    color: red;
    font-size: 30px;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif ;
    font-weight: bold;
}

.itemnum{
    color: red;
    font-size: 12.5px;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif ;
    font-weight: bold;
  
}

.itemat{
    color: red;
    font-size: 25px;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif ;
    font-weight: bold;
}

.hrr hr{
    background-color:  rgb(148, 143, 143);
}

.shipping label{
    color: red;
    font-size: 25px;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif ;
    font-weight: bold;
    position: relative;
    left: 5px;
}

.deliveryselect {
    height: 90px;
    width: 250px;
    border: none;
    background-color: rgb(255, 255, 255);
    color: red;
    font-size: 18px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
}

.promocode input{
    height: 60px;
    width: 200px;
    border: none;
    background-color: rgb(255, 255, 255);
    color: red;
    font-size: 15px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
}

.apply button{
    height: 70px;
    width: 150px;
    border-radius: 30px;
    border: none;
    background-color: red;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
    font-size: 20px;
    text-align: center;
    color: white;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.apply button:hover{
    color: red;
    background-color: white;
    transform: scale(0.9);
}

.totalcost h1{
    color: red;
    font-size: 25px;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif ;
    font-weight: bold;
}

.costant {
    color: red;
    font-size: 25px;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif ;
    font-weight: bold;
}

.checkout button{
    height: 80px;
    width: 130px;
    border-radius: 30px;
    border: none;
    background-color: red;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
    font-size: 18px;
    text-align: center;
    color: white;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.checkout:hover button{
    background-color: rgb(206, 192, 192);
    color: red;
    transform: scale(0.9);
}

/* contact us */
.map{
    padding-right: 15px;
}

.mapbody{
    background-color: rgb(248, 239, 239);
}

.contactform{
    background-color: rgb(252, 196, 196);
}

.contacttopic{
    color: rgb(58, 54, 54);
    font-size: 25px;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif ;
    font-weight: bold;
    position: relative;
    left: 100px;
}

.contactdet{
    color: rgb(58, 54, 54);
    font-size: 25px;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif ;
    font-weight: bold;
}

.contacttype input{
    height: 60px;
    width: 200px;
    border: none;
    border-radius: 15px;
    background-color: rgb(255, 255, 255);
    color: rgb(58, 54, 54);
    font-size: 15px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
}

.contactselect {
    height: 50px;
    width: 150px;
    border: none;
    background-color: rgb(255, 255, 255);
    color: rgb(58, 54, 54);
    font-size: 18px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    position: relative;
    left: 30px;
}

.contactmessage{
    height: 80px;
    width: 170px;
    border: none;
    background-color: rgb(255, 255, 255);
    color: rgb(58, 54, 54);
    font-size: 12px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    position: relative;
    left: 23px;
}

.contactbtn button{
    height: 50px;
    width: 130px;
    border-radius: 30px;
    border: none;
    background-color: rgb(75, 75, 75);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
    font-size: 20px;
    text-align: center;
    color: white;
    cursor: pointer;
    transition: transform 0.3s ease;
    position: relative;
    right: 90px;
}

.contactbtn button:hover{
    color: rgb(75, 75, 75);
    background-color: white;
    transform: scale(0.9);
}

.contactinfo{
    background-color: rgb(252, 196, 196);
}

.contactinfo2{
    background-color: rgb(139, 139, 139);
}

.contaddress h4{
    color: rgb(58, 54, 54);
    font-size: 20px;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif ;
    font-weight: bold;
}

.contaddress h2{
    color: rgb(58, 54, 54);
    font-size: 20px;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif ;
    font-weight: bold;
}

.emailaddress h2{
    color: rgb(245, 17, 17);
    font-size: 20px;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif ;
    font-weight: bold;
}

.emailaddress h4{
    color: rgb(245, 17, 17);
    font-size: 20px;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif ;
    font-weight: bold;
}

/* checkout */
.fieldcheck {
    border-color: red;
    border-radius: 40px;
}

.fieldcheck legend {
    font-size: 18px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: 800;
    color:  red;
}

.checkoutdiv {
    background-color: #FFF8F8;
}

.checkoutdetail {
    padding-left: 5px;
}

.checkoutdetail label {
    font-weight: bold;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 18px;
    color: #333333;
}

.checkoutinput input{
    background-color: #FFFFFF;
    height: 60px;
    width: 210px;
    color: red;
    font-size: 18px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
    border-radius: 15px;
    border-color: rgb(255, 8, 8);
    text-align: center;
    cursor: pointer;
}

.checkoutinput input::placeholder {
    color: #333333;
    font-size: 18px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
    cursor: pointer;
}

.checkoutselect select{
    background-color: #FFFFFF;
    height: 60px;
    width: 210px;
    color: #333333;
    font-size: 18px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
    border-radius: 15px;
    border-color: rgb(255, 8, 8);
    border-width: 2.3px ;
    text-align: center;
    cursor: pointer;
}

.checkoutmessage textarea{
    background-color: #FFFFFF;
    height: 90px;
    width: 240px;
    color: red;
    font-size: 15px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: 700;
    border-radius: 15px;
    border-color: rgb(255, 8, 8);
    text-align: center;
    cursor: pointer;
    border-width: 2.3px ;
}

.checkoutpay button{
    background-color: #fa0505;
    height: 50px;
    width: 100px;
    color: rgb(252, 246, 246);
    font-size: 15px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: 700;
    border-radius: 25px;
    border: none;
    text-align: center;
    cursor: pointer;
    border-width: 2.3px ;
    transition: transform 0.3s ease;
}

.checkoutpay button:hover{
    background-color:  #3b3636;
    color: #f3eded;
    transform: scale(0.9);
}

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}