/* Media Queries for mobile screen */
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
body{
font-family: "DM Sans", sans-serif;
-----border-top-style: solid ;
border-top-color: #0e3068;
border-width: thick;
}
h2{
font-size:20px;
font-family:Bahnschrift;
color:#0e3068;
}
#logo{
height:40px;
}
#contact{
display: none;
}
#mobileScreenContact{
text-decoration: none;
margin-left:auto;
}
#headinglogoStyle{
display:flex;
background:white;
}
#shopingbag{
border: none;
background: none;
padding: 0;
margin: 0%;
height: 38px;
}
.tab {
background-color: #0e3068;
text-align: center;
}
.tab button{
height:20px;
font-size:12px;
color:Azure;
background-color: #0e3068;
}
.homecover{
height: 40dvh;
max-width: 100%;
}
.coverimage
{
background-image: url('coverimg.jpg');
background-attachment: fixed ;
background-size: 20%;
width: 100%;
}
.coverimage p{
margin-left: auto;
margin-right: auto;
margin-top: auto;
width:fit-content;
border: 1px solid black;
font-size: 15px;
padding:5px;
}
#p1
{
font-weight: bolder;
color: rgb(33, 32, 35);
background-color: #aaa046e7;
}
#p2{
font-weight: 500;
color: rgb(20, 19, 21);
background-color: #AAA046;
}
#p3{
color: rgb(24, 16, 66);
background-color: #AAA046;
}
.homeslideshow-container img{
width:100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.homeslideshow-container {
width:100%;
min-height: 250px;
position: relative;
margin: auto;
overflow: hidden;
}
.homeslide_img{vertical-align: middle;
animation: fade 1.5s
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
.qualityDevision{
padding-left:2%;
display:flex;
height: 30px;
gap:3%;
padding-bottom: 40%;
}
#qualitycheck{
padding-top: 23%;
height: 83px;
}
#trust{
padding-top: 30%;
height: 69px;
}
#experience{
height: 80px;
padding-top: 23%;
}
#quality{
padding-top: 23%;
height: 81px;
}
.qualityDevisionAlignment p{
font-size:6px ;
}
.bodyContentStyle{
display:block;
background-color: #00171f;
padding: 5%;
padding-bottom: 10%;
}
.bodyContentStyle h1{
border-left: 5px solid transparent;
border-image: linear-gradient(to bottom, #ff0000, #fa6c6c) 1 ;
padding-left: 1%;
font-size: xx-large;
font-family: "Poppins", Sans-serif;
font-size: 2.4rem;
font-weight: 600;
line-height: 1.1em;
color: #47c6f0;
}
.bodyContentStyle p{
font-family: 'Poppins', Helvetica, Arial, "sans-serif"!important;
font-size: 1rem;
line-height: 1.4em;
text-align: start;
color: #47c6f0;
font-weight: lighter;
}
#bodyContentStylesecond{
display:block;
gap:5%;
background-color: #00171f;
padding-bottom: 10%;
padding-left: 5%;
}
#bodyContentStyleULid{
transform: translateY(150px);
opacity: 0;
transition: all 0.4s ease;
}
#bodyContentStyleULid.active{
transform: translateY(0);
opacity: 1;
}
#homepageUniformImageAlignment{
display: grid;
gap:20%;
padding-left:5px;
}
#homepageUniformImageAlignment img{
width: 100%;
padding-top: 6%;
}
#homepageUniformImageAlignment{
opacity: 0;
transition: opacity 1s ;
}
#homepageUniformImageAlignment.active{
opacity: 1;
}
#homeBottomContentAlignment{
display:block;
grid-template-rows: auto auto auto;
justify-content: space-around;
padding-left: 10%;
padding-right: 4%;
padding-bottom:6% ;
}
#homeBottomContentAlignment img{
height: 38%;
width: 38%;
padding-left: 2%;
}
#homeBottomContentAlignment p{
width: 90%;
font-family: 'Poppins', Helvetica, Arial, "sans-serif"!important;
font-size: 1.2rem;
line-height: 1.5em;
text-align: center;
font-weight: lighter;
}
#fastimgid{
padding-left: 0%;
padding-right: 22%;
}
#choose{
padding: 0%;
width: fit-content;
margin-left: 18%;
margin-right:0% ;
font-size:xx-large ;
}
#capsection{
background: url('bgcap.png');
background-size: 50%;
height: 350px;
}
#transparantcolor{
background-color: rgba(0, 0, 0, 0.8);
width: 100%;
height: 100%;
}
#capsection p{
padding-top: 50px;
height: fit-content;
justify-self: center;
color: white;
width: fit-content;
font-family: 'Poppins', Helvetica, Arial, "sans-serif" !important;
font-size: 1rem;
line-height: 1.4;
text-align: justify;
text-align-last: center;
margin: 0 auto;
padding-left: 3%;
padding-right: 3%;
}
.showroomContentStyle{
display: flex;
}
.productImage{
height:60px;
width:60px;
}
/* The side navigation menu */
.sidenav {
/* height: 100%; 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
position: absolute; /* Stay in place */
z-index: 1; /* Stay on top */
top:90px;
left: 0;
background-color: #111; /* Black background color */
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
font-family: "Lato", sans-serif;
transition: background-color .5s; /* Smooth transition for background if content is pushed */
}
/* Sidenav links */
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 18px;
color: #818181;
display: block;
transition: 0.3s;
}
/* Change color of sidenav links on hover */
.sidenav a:hover {
color: #f1f1f1;
}
/* Style for the menu icon (hamburger) */
.menu-icon {
display: inline-block;
cursor: pointer;
padding: 10px;
position: absolute;
top: 100px;
left: 10px;
z-index: 2;
}
.bar1, .bar2, .bar3 {
width: 30px;
height: 2px;
background-color: #818181;
margin: 6px 0;
transition: 0.4s; /* Transition for the bars to transform into an X */
}
/* Rotate first bar */
.change .bar1 {
transform: translate(0, 8px) rotate(-45deg);
}
/* Fade out the second bar */
.change .bar2 {
opacity: 0;
}
/* Rotate last bar */
.change .bar3 {
transform: translate(0, -8px) rotate(45deg);
}
--------------------------------------------------------------------------------------
.sidebar-nav {
width: 250px; /* Adjust width as needed */
padding: 20px;
height: 100%; /* Full height sidebar */
position: fixed; /* Fixes position on the screen */
overflow-y: auto; /* Adds scrollbar if content is too long */
}
.sidebar-nav ul {
list-style-type: none; /* Removes bullet points */
padding: 0;
margin: 0;
}
.submenu {
display: none; /* Submenus can be toggled via JavaScript or CSS hover effects */
padding-left: 20px;
}
.submenu li a{
color: #f1f1f1;
}
.sidebar-nav li:hover .submenu {
display: block; /* Show submenu on hover */
}
/* side bar end */
.team-grid {
color:#313437;
background-color:#fff;
}
.team-grid p {
color:#7d8285;
font-family: sans-serif;
}
.team-grid h2 {
color: #000;
font-weight:bold;
margin-bottom:40px;
padding-top:40px;
font-family: s-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 2rem;
}
@media (max-width:767px) {
.team-grid h2 {
margin-bottom:25px;
padding-top:25px;
font-size:24px;
}
}
.team-grid .intro {
display: block;
font-size:16px;
max-width:500px;
margin:0 auto;
font-family: sans-serif;
}
.team-grid .intro p {
margin-bottom:0;
font-family: s-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size:16px;
font-weight:400;
line-height:1.5;
text-align:center;
text-size-adjust:100%;
}
.team-grid .people {
padding:50px 0;
}
.team-grid .item {
margin-bottom:30px;
}
.team-grid .item .box {
text-align:center;
background-repeat:no-repeat;
background-size:cover;
background-position:center;
height:280px;
position:relative;
overflow:hidden;
vertical-align: middle;
}
.team-grid .item .cover {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color:rgba(31,148,255,0.75);
transition:opacity 0.15s ease-in;
opacity:0;
padding-top:80px;
color:#fff;
text-shadow:1px 1px 1px rgba(0,0,0,0.15);
}
.team-grid .item:hover .cover {
opacity:1;
}
.team-grid .item .name {
font-weight:bold;
margin-bottom:8px;
font-family: sans-serif;
}
.team-grid .item .title {
text-transform:uppercase;
font-weight:bold;
color:#bbd8fb;
letter-spacing:2px;
font-size:13px;
margin-bottom:20px;
font-family: sans-serif;
line-height: 1.15;
font-family: sans-serif;
}
.text-center {
text-align: center !important
}
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto
}
@media (min-width:576px) {
.container {
max-width: 540px
}
}
@media (min-width:768px) {
.container {
max-width: 720px
}
}
@media (min-width:992px) {
.container {
max-width: 960px
}
}
@media (min-width:1200px) {
.container {
max-width: 1140px
}
}
.row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
@media (min-width: 768px)
{
.col-md-4 {
flex: 0 0 33.333333%;
max-width: 33.333333%
}
}
@media (min-width: 992px){
.col-lg-3 {
flex: 0 0 25%;
max-width: 25%
}
}
.col-md-4,.col-lg-3
{
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
box-sizing: border-box
}
/*Image gallery ends*/
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
.imageNameAlignment{
grid-template-columns:auto auto auto ;
grid-column-gap:2px;
grid-auto-rows: 120px;
}
.imageNameAlignment p{
font-size: 10px;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 500px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
#ReachUsContent{
padding:10px;
font-size:15px;
}
#ReachUsContent p{
border:2px solid black;
width:max-content;
font-family:Verdana;
background:#EADDCA;
}
iframe{
width:100%;
}
#order_image {
}
#cover{
width: 100%;
}
#cover1{
width:100%;
}
#cover2{
width:100%;
}
#order_image2 {
display: flex;
border: none;
height: fit-content;
background-image: url("uniformTshirt_background.png");
}
#bulk_order p{
font-size: small;
font-family: Impact;
font-weight: 400;
font-style: oblique;
font-variant: normal;
font-stretch: expanded;
}
#WeContactYouContent{
font-size:15px;
}
.types_of_uniforms{
align-items: center;
margin: 0;
padding: 0;
width: 60%;
height: 65px;
overflow-y: hidden;
}
#types p{
font-size: 18px;
font-weight: 1000;
padding-left: 2%;
color: #f3290a;
}
#type h1{
font-size: 18px;
width: 28%;
color: #adebff;
font-weight: lighter;
padding-left: 10%;
}
#type{
display: flex;
background-color: #00171f;
align-items: center;
height: 190px;
width: 100%;
}
#descrption{
background-color: #00171f;
height:450px ;
}
#descrption p{
margin: 0%;
color: #adebff;
font: sans-serif;
font-weight: lighter;
padding: 1%;
}
.bookbuttonup{
width: 150px;
height: 40px;
background-color:#f76f5a;
color:black;
border: none;
border-radius: 20px;
font-size: 17px;
font:Helvetica;
}
#bookbuttonupdiv{
text-align: center;
margin: 40px;
}
#Stitches h1{
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
#collar{
display: flex;
width: 100%;
height: 80px;
margin: 0%;
padding: 20px;
}
.collar_img{
height: 70px;
width: 60px;
padding: 5px;
margin: 0%;
transition: transform .4s; /* Animation */
}
.colcontainer{
position: relative;
}
.overlay {
position: absolute;
bottom:0;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5); /* Black see-through */
color: #f1f1f1;
width: 40px;
transition: .5s ease;
opacity:0;
color: white;
font-size: 12px;
padding: 12px;
text-align: center;
}
.colcontainer:hover {
transform: scale(1.14);
}
.colcontainer:hover .overlay {
opacity: 1;
}
#sleeve{
display:flex;
height :150px;
width: 100%;
padding-top:20px;
}
.sleevecontainer{
position: relative;
height: 100px;
padding: 10px;
}
.sleeve_img{
height: 80px;
width:100% ;
transition: transform .4s; /* Animation */
}
.overlaysleeve{
position: absolute;
bottom: 50px;
left: 10px;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5); /* Black see-through */
color: #f1f1f1;
width: 50px;
transition: .5s ease;
opacity:0;
color: white;
font-size: 12px;
padding: 12px;
text-align: center;
}
.sleevecontainer:hover{
transform: scale(1.14);
}
.sleevecontainer:hover .overlaysleeve {
opacity: 1;
}
#plaket{
display:flex;
height :180px;
width: 100%;
padding-top:10px;
}
.plaketcontainer{
position: relative;
height: 160px;
width: 100%;
padding: 10px;
}
.plket_img{
height: 150px;
width:100% ;
transition: transform .4s; /* Animation */
}
.overlayplaket{
position: absolute;
bottom: 30px;
left: 10px;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5); /* Black see-through */
color: #f1f1f1;
width: 100px;
height:60px ;
transition: .5s ease;
opacity:0;
color: white;
font-size: 12px;
padding: 12px;
text-align: center;
}
.plaketcontainer:hover{
transform: scale(1.14);
}
.plaketcontainer:hover .overlayplaket {
opacity: 1;
}
#stitch{
display:flex;
height :180px;
width: 100%;
padding-top:30px;
padding-bottom: 100px;
}
.stitchcontainer{
height :100px;
width: 100%;
padding: 10px;
position: relative;
}
.stitch_img{
height: 80px;
width:100% ;
transition: transform .4s; /* Animation */
}
.overlaystitch{
position: absolute;
bottom: 50px;
left: 10px;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5); /* Black see-through */
color: #f1f1f1;
width: 65px;
transition: .5s ease;
opacity:0;
color: white;
font-size: 12px;
padding: 11px;
text-align: center;
}
.stitchcontainer:hover{
transform: scale(1.14);
}
.stitchcontainer:hover .overlaystitch {
opacity: 1;
}
#sizecontiner{
background-color: #00171f;
width: 100%;
height: 350px;
padding-top:100px;
text-align-last: center;
margin-bottom: 100px;
}
.size{
height: 200px;
width: 150px;
}
.sell_productscontainer{
display: grid;
gap:20px;
padding: 30px;
}
.sellproduct{
height: 65%;
width:100% ;
background-color: #edeae7;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.sellproductdiv{
height: 600px;
width: 100%;
border-radius: 20px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.sellname{
padding-left:5%;
padding-top: 0px;
padding-bottom: 10px;
}
.sellname p
{
font-size: 17px;
font:Helvetica ;
}
.poloname{
font-weight: bolder;
}
.bookbutton{
width: 150px;
height: 40px;
background-color:#06275c;
color:white;
border: none;
border-radius: 20px;
font-size: 17px;
font:Helvetica ;
margin-left: 25px;
}
.buttonsize{
border-radius: 50%;
font-size: 16px;
font-weight: 400;
background-color: white;
color: #8c8f8e;
height: 30px;
width: 30px;
border: #bbb 1px solid;
padding: 5px;
}
.buttonsize:hover{
border: black 1px solid;
color: #000;
}
.buttonsize.active{
color: white;
background-color: black;
}
#expertpdiv{
background: url('bulkorder.png');
background-size: 50%;
height: 200px;
margin-top: 20%;
width: 100%;
}
#colourlayer{
background-color: rgba(0, 0, 0, 0.8);
height: 100%;
}
#expertp {
color:#f5f5f5;
font-size:20px;
padding:3%;
justify-self: center;
font-family: 'Poppins', Helvetica, Arial, "sans-serif" !important;
line-height: 1.4;
text-align: justify;
text-align-last: center;
margin: 0 auto;
max-width: 60ch;
}
.cart-box{
display: flex;
width: 100%;
align-items: center;
gap: 1rem;
margin-top: 1rem;
padding-bottom: 10px;
}
.cart-content{
border-bottom: 1px solid rgba(0,0,0,0.1);
display: none;
}
.cart-img{
width: 75px;
height: 108px;
object-fit: cover;
border:2px solid rgba(0,0,0,0.1);
padding: 5px;
border-radius: 10px;
}
.cart-quantity{
border:1.2px solid rgb(164, 163, 163);
outline:none ;
width: 100px;
height: 20px;
text-align: center;
font-size: 1rem;
border-radius: 10px;
}
.cart-remove{
all: unset;
font-size: 20px;
font-weight: bolder;
color:rgb(131, 127, 127);
cursor: pointer;
}
.cart-count{
position: absolute;
background-color: #0e3068;
top: -5px;
right: 0;
padding: 3px;
height: 20px;
width: 20px;
line-height:20px ;
border-radius: 50%;
z-index: 99;
display: none;
font-size: 12px;
color: #fff;
}
.btn-book{
background-color:#0e3068;
color:#fff;
border: none;
font-size: 1rem;
font-weight: 500;
cursor: pointer;
width: 35%px;
height: 45px;
border-radius: 6px;
margin-left: 65%;
display: none;
}
#btn-booklink{
text-decoration: none;
}
#btn-booklinkdiv{
padding-top: 10%;
}
#pagehead{
display: flex;
gap: 20%;
}
#pagehead h1{
font: 2em sans-serif;
font-weight: 500;
}
#pagehead a {
padding-top: 20px;
border: none;
background-color: white;
text-decoration: underline;
color: #8c8f8e;
}
.ShoppingcartContent-active{
right:0;
transition: 0.5s;
}
#Product_onetime_heading{
display: flex;
width: 100%;
flex-direction: row;
font: 1em sans-serif;
font-size: 12px;
font-weight: 200;
color: #8b8d8c;
border-bottom: 1px solid #e0e0e0;
}
#runtime_productString{
margin-right: 37%;
}
#runtime_sizeString{
margin-right: 20%;
}
#help{
width:fit-content;
height:fit-content;
padding-left:10px;
padding-right:10px;
background-color: white;
position: fixed;
bottom: 0;
left:50px;
border-radius: 10px;
}
#whatsapplink{
display: block;
text-align: center;
border: none;
border-radius: 50%;
background-image: linear-gradient(#0fb812 ,#1ab357);
width:60px;
height:60px;
position: fixed;
bottom: 0;
}
#whatsapp{
padding-top: 10px;
}
#scrollToTopBtn {
display:block ;
margin-left:auto;
border: none;
border-radius: 50%;
color: white;
cursor: pointer;
font-size: 12px;
background-image: linear-gradient(#ff512f ,#dd2476);
width:50px;
height:50px;
}
#bottomText{
margin:1px;
width:100%;
text-align: center;
border-top: 1px solid;
border-bottom: 1px solid;
background-color: #bbd6e9;
}
#bottomText p{
font-size:15px;
margin-top: 0;
}
/* Media Queries other than mobile ,Monitor changess*/
@media only screen and (min-width:480px){
body{
font-family:Calibri;
border-top-style: solid ;
border-top-color:#FFFFFF;
border-width: thick;
}
h2{
font-family:Bahnschrift;
color:#0e3068;
}
#logo{
max-height:140px;
}
#contact{
display: block;
}
#mobileScreenContact{
display:none;
}
.headingClass{
position: sticky;
top: 0;
}
#headinglogoStyle{
grid-auto-flow: column;
display:grid;
grid-template-columns: 70px 550px auto;
padding-left: 10px;
padding-right: 10px;
background-color: white;
}
#shopingbag{
border: none;
background: none;
padding: 0;
margin: 0%;
height: 38px;
}
.tab {
display:flex;
justify-content: flex-end;
gap:10px;
background-color: rgb(12, 152, 186);
padding-right:10px;
}
.tab button{
font-family:Calibri;
font-size: 15px;
font-weight: 400;
height:29px;
color:#ffffff;
background-color: rgb(12, 152, 186);
cursor: grab;
border: 0;
}
.tabbutton:active
{
background-color: #3e8e41;
transform: translateY(4px);
}
.homecover{
height: 230vh;
max-width: 100%
}
.coverimage
{
background-image: url('coverimg.jpg');
background-attachment: fixed ;
background-size: 25%;
width: 100%;
}
.coverimage p{
margin-left: auto;
margin-right: auto;
margin-top: auto;
width:fit-content;
border: 1px solid black;
animation:fadeEffect 2s;
}
#p1
{
font-size: 50px;
font-weight: bolder;
color: rgb(33, 32, 35);
background-color: #aaa046e7;
}
@keyframes fadeEffect{
0%{opacity: 0;}
100%{opacity: 1;}
}
#p2{
font-size: 45px;
font-weight: 500;
color: rgb(20, 19, 21);
background-color: #AAA046;
}
#p3{
font-size:40px ;
color: rgb(24, 16, 66);
background-color: #AAA046;
}
.qualityDevision{
padding-left:80px;
display:flex;
height: 150px;
gap:50px;
padding-bottom: 50px;
}
#qualitycheck{
padding-top: 23px;
height: 110px;
}
#trust{
padding-top: 30px;
height: 100px;
}
#experience{
height: 110px;
padding-top: 23px;
}
#quality{
padding-top: 23px;
height: 110px;
}
.qualityDevisionAlignment p{
font-size:16px ;
}
.bodyContentStyle{
display:grid;
grid-template-columns: 30% 70% ;
background-color: #00171f;
padding: 5%;
padding-bottom: 20%;
}
.bodyContentStyle h1{
border-left: 5px solid transparent;
border-image: linear-gradient(to bottom, #ff0000, #fa6c6c) 1 ;
padding-left: 4%;
font-size: xx-large;
font-family: "Poppins", Sans-serif;
font-size: 3.4rem;
font-weight: 600;
line-height: 1.1em;
color: #47c6f0;
}
.bodyContentStyle p{
font-family: 'Poppins', Helvetica, Arial, "sans-serif"!important;
font-size: 1rem;
line-height: 1.4em;
text-align: justify;
color: #47c6f0;
font-weight: lighter;
}
#bodyContentStylesecond{
display:grid;
grid-template-columns: 65% 33% ;
gap:5%;
background-color: #00171f;
padding-bottom: 20%; padding-left: 0%;
}
#bodyContentStyleULid{
transform: translateY(150px);
opacity: 0;
transition: all 0.4s ease;
}
#bodyContentStyleULid.active{
transform: translateY(0);
opacity: 1;
}
#homepageUniformImageAlignment{
display: grid;
gap:20px;
padding-left:50px;
}
#homepageUniformImageAlignment img{
width: 100%;
padding-top: 6%;
}
#homepageUniformImageAlignment{
opacity: 0;
transition: opacity 1s ;
}
#homepageUniformImageAlignment.active{
opacity: 1;
}
#homeBottomContentAlignment{
display:grid;
grid-template-columns: auto auto auto;
justify-content: space-around;
padding-left: 4%;
padding-right: 4%;
padding-bottom:6% ;
}
#homeBottomContentAlignment{
transform: translateY(50px);
opacity: 0;
transition: 1s all ease;
}
#homeBottomContentAlignment.active{
transform: translateY(0);
opacity: 1;
}
#homeBottomContentAlignment img{
height: 38%;
width: 38%;
padding-left: 15%;
}
#homeBottomContentAlignment p{
width: 90%;
font-family: 'Poppins', Helvetica, Arial, "sans-serif"!important;
font-size: 1rem;
line-height: 1.4em;
text-align: start;
font-weight: lighter;
}
#fastimgid{
padding-left: 0%;
padding-right: 22%;
}
#choose{
padding: 2%;
width: max-content;
margin-left: 35%;
margin-right:40% ;
font-size:xx-large ;
}
#capsection{
background: url('bgcap.png');
background-size: 50%;
height: 350px;
}
#transparantcolor{
background-color: rgba(0, 0, 0, 0.7);
width: 100%;
height: 100%;
}
#capsection p{
padding-top: 50px;
height: fit-content;
justify-self: center;
color: white;
width: 600px;
font-family: 'Poppins', Helvetica, Arial, "sans-serif" !important;
font-size: 1rem;
line-height: 1.4;
text-align: justify;
text-align-last: center;
margin: 0 auto;
}
#homebottomtalk{
padding-left: 10px;
padding-right: 10px;
width: 200px;
}
#ShowRoomContent{
padding-bottom:20px;
}
.showroomContentStyle{
display:block;
}
/*
dl{
width: 25%;
border:none;
border-radius: 3%;
background: #E8E3DA;
color:black;
padding:10px;
font-size:20px;
animation: showroomContentStyleDLAnimation 2s ease;
}
@keyframes showroomContentStyleDLAnimation {
from{transform: translateX(-150px);
opacity: 0;
transition: 0.5s all ease;}
to{ transform: translateX(0);
opacity: 1;}
}*/
.productImage{
height:200px;
width:200px;
}
/*old template image zooming*/
.showroomImageStyle{
animation: showroomImageStyleAnimation 2s ease;
}
@keyframes showroomImageStyleAnimation {
from{transform: translateY(150px);
opacity: 0;
transition: 0.5s all ease;}
to{ transform: translateY(0);
opacity: 1;}
}
.showroomImageStyle img{
transition: transform 0.5s;
}
.showroomImageStyle img:hover {
transform: scale(1.2);
}
/* Side bar start */
/* The side navigation menu */
.sidenav {
/* height: 100%; 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
position: absolute; /* Stay in place */
z-index: 1; /* Stay on top */
top:90px;
left: 0;
background-color: #111; /* Black background color */
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
font-family: "Lato", sans-serif;
transition: background-color .5s; /* Smooth transition for background if content is pushed */
}
/* Sidenav links */
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 18px;
color: #818181;
display: block;
transition: 0.3s;
}
/* Change color of sidenav links on hover */
.sidenav a:hover {
color: #f1f1f1;
}
/* Style for the menu icon (hamburger) */
.menu-icon {
display: inline-block;
cursor: pointer;
padding: 10px;
position: absolute;
top: 100px;
left: 10px;
z-index: 2;
}
.bar1, .bar2, .bar3 {
width: 30px;
height: 2px;
background-color: #818181;
margin: 6px 0;
transition: 0.4s; /* Transition for the bars to transform into an X */
}
/* Rotate first bar */
.change .bar1 {
transform: translate(0, 8px) rotate(-45deg);
}
/* Fade out the second bar */
.change .bar2 {
opacity: 0;
}
/* Rotate last bar */
.change .bar3 {
transform: translate(0, -8px) rotate(45deg);
}
--------------------------------------------------------------------------------------
.sidebar-nav {
width: 250px; /* Adjust width as needed */
padding: 20px;
height: 100%; /* Full height sidebar */
position: fixed; /* Fixes position on the screen */
overflow-y: auto; /* Adds scrollbar if content is too long */
}
.sidebar-nav ul {
list-style-type: none; /* Removes bullet points */
padding: 0;
margin: 0;
}
.submenu {
display: none; /* Submenus can be toggled via JavaScript or CSS hover effects */
padding-left: 20px;
}
.submenu li a{
color: #f1f1f1;
}
.sidebar-nav li:hover .submenu {
display: block; /* Show submenu on hover */
}
/* side bar end */
/* Image gallery section */
.team-grid {
color:#313437;
background-color:#fff;
}
.team-grid p {
color:#7d8285;
font-family: sans-serif;
}
.team-grid h2 {
color: #000;
font-weight:bold;
margin-bottom:40px;
padding-top:40px;
font-family: s-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 2rem;
}
@media (max-width:767px) {
.team-grid h2 {
margin-bottom:25px;
padding-top:25px;
font-size:24px;
}
}
.team-grid .intro {
display: block;
font-size:16px;
max-width:500px;
margin:0 auto;
font-family: sans-serif;
}
.team-grid .intro p {
margin-bottom:0;
font-family: s-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size:16px;
font-weight:400;
line-height:1.5;
text-align:center;
text-size-adjust:100%;
}
.team-grid .people {
padding:50px 0;
}
.team-grid .item {
margin-bottom:30px;
}
.team-grid .item .box {
text-align:center;
background-repeat:no-repeat;
background-size:cover;
background-position:center;
height:280px;
position:relative;
overflow:hidden;
vertical-align: middle;
}
.team-grid .item .cover {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color:rgba(31,148,255,0.75);
transition:opacity 0.15s ease-in;
opacity:0;
padding-top:80px;
color:#fff;
text-shadow:1px 1px 1px rgba(0,0,0,0.15);
}
.team-grid .item:hover .cover {
opacity:1;
}
.team-grid .item .name {
font-weight:bold;
margin-bottom:8px;
font-family: sans-serif;
}
.team-grid .item .title {
text-transform:uppercase;
font-weight:bold;
color:#bbd8fb;
letter-spacing:2px;
font-size:13px;
margin-bottom:20px;
font-family: sans-serif;
line-height: 1.15;
font-family: sans-serif;
}
.text-center {
text-align: center !important
}
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto
}
@media (min-width:576px) {
.container {
max-width: 540px
}
}
@media (min-width:768px) {
.container {
max-width: 720px
}
}
@media (min-width:992px) {
.container {
max-width: 960px
}
}
@media (min-width:1200px) {
.container {
max-width: 1140px
}
}
.row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
@media (min-width: 768px)
{
.col-md-4 {
flex: 0 0 33.333333%;
max-width: 33.333333%
}
}
@media (min-width: 992px){
.col-lg-3 {
flex: 0 0 25%;
max-width: 25%
}
}
.col-md-4,.col-lg-3
{
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
box-sizing: border-box
}
/*Image gallery ends*/
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 500px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
#tshirtTextAlignment{
padding-bottom:20px;
background:white;
}
#tshirtTextAlignment p{
background:white;
font-size:23px;
padding-top:10px;
padding-left:20px;
background: #dadada;
padding-top:20px;
padding-bottom:10px;
}
#tshirtsImageAlignment{
display: grid;
background:white;
grid-template-columns: auto auto auto auto auto;
grid-auto-rows: 250px;
padding-left:20px;
}
#tshirtsImageAlignment img{
border: 1px solid black;
transition: transform .7s ease-in-out;
}
#tshirtsImageAlignment img:hover{
transform: rotate(20deg);
}
#tshirtTextAlignment{
transform: translateY(150px);
opacity: 0;
transition: all 2s ease;
}
#tshirtTextAlignment.active{
transform: translateY(0);
opacity: 1;
}
#tshirtsImageAlignment{
transform: translateY(150px);
opacity: 0;
transition: all 0.5s ease;
}
#tshirtsImageAlignment.active{
transform: translateY(0);
opacity: 1;
}
#ReachUsContent{
padding:20px;
font-size:20px;
}
#ReachUsContent p{
border:1px solid black;
width:300px;
font-family:Cursive;
background:#EADDCA;
}
iframe{
width:100%;
}
#order_image {
border: none;
height: fit-content;
background-image: url("uniformTshirt_background.png");
}
#cover{
padding-left: 250px;
width:fit-content;
}
#order_image1{
background-image: linear-gradient(to bottom right, rgb(205, 235, 243), rgb(88, 197, 236));
}
#cover1{
padding-left: 250px;
width:fit-content;
height: 500px;
}
#order_image2 {
display: flex;
border: none;
height: fit-content;
background-image: url("uniformTshirt_background.png");
}
#bulk_orderp{
font-size: 50px;
font-family: Impact;
font-weight: 400;
font-style: oblique;
font-variant: normal;
font-stretch: expanded;
}
.slideshow-container {
width: 100%;
height: 500px;
position: relative;
margin: auto;
}
.slide_img{vertical-align: middle;
animation: fade 1.5s
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#WeContactYouContent{
font-size:20px;
/* animation: flowContent 2s ;*/
}/*
@keyframes flowContent{
from{
transform: translateY(100px);
opacity:0;
transition: all;
}
to{
transform: translate(0);
opacity: 1;
}
}*/
.types_of_uniforms{
align-items: center;
margin: 0;
padding: 0;
width: 300px;
height: 100px;
overflow-y: hidden;
}
#types p{
font-size: 34px;
font-weight: 1000;
padding-left: 6px;
color: #f3290a;
}
#type h1{
font-size: 40px;
width: max-content;
color: #adebff;
font-weight: lighter;
padding-left: 30%;
}
#type{
display: flex;
background-color: #00171f;
align-items: center;
height: 200px;
width: 100%;
}
#descrption{
background-color: #00171f;
height:280px ;
}
#descrption p{
margin: 0%;
color: #adebff;
font: sans-serif;
font-weight: lighter;
}
.bookbuttonup{
width: 150px;
height: 40px;
background-color:#f76f5a;
color:black;
border: none;
border-radius: 20px;
font-size: 17px;
font:Helvetica;
}
#bookbuttonupdiv{
text-align: center;
margin: 40px;
}
#Stitches {
align-content: center;
height: 250px;
}
#Stitches h1{
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
#collar{
display: flex;
width: 100%;
height: 250px;
margin: 0%;
padding: 10px;
}
.collar_img{
height: 185px;
width: 175px;
margin: 0%;
padding-right: 12px;
transition: transform .4s; /* Animation */
}
.colcontainer{
position: relative;
height: 210px;
margin: 0%;
}
.overlay {
position: absolute;
bottom:0;
left: 5px;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5); /* Black see-through */
color: #f1f1f1;
width: 140px;
transition: .5s ease;
opacity:0;
color: white;
font-size: 20px;
padding: 20px;
text-align: center;
}
.colcontainer:hover {
transform: scale(1.14);
}
.colcontainer:hover .overlay {
opacity: 1;
}
#sleeve{
display:flex;
height :350px;
padding-top:100px;
}
.sleevecontainer{
position: relative;
height: 300px;
padding: 10px;
}
.sleeve_img{
height: 300px;
width:100% ;
transition: transform .4s; /* Animation */
}
.overlaysleeve{
position: absolute;
bottom: 50px;;
left: 10px;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5); /* Black see-through */
color: #f1f1f1;
width: 200px;
transition: .5s ease;
opacity:0;
color: white;
font-size: 25px;
padding: 20px;
text-align: center;
}
.sleevecontainer:hover{
transform: scale(1.14);
}
.sleevecontainer:hover .overlaysleeve {
opacity: 1;
}
#plaket{
display:flex;
height :350px;
padding-top:150px;
}
.plaketcontainer{
position: relative;
height :350px;
width: 100%;
padding: 10px;
}
.plket_img{
height: 350px;
width:300px ;
transition: transform .4s; /* Animation */
}
.overlayplaket{
position: absolute;
bottom: 30px;
left: 10px;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5); /* Black see-through */
color: #f1f1f1;
width: 250px;
height:70px ;
transition: .5s ease;
opacity:0;
color: white;
font-size: 28px;
padding: 20px;
text-align: center;
}
.plaketcontainer:hover{
transform: scale(1.14);
}
.plaketcontainer:hover .overlayplaket {
opacity: 1;
}
#stitch{
display:flex;
height :380px;
padding-top:200px;
padding-bottom: 150px;
}
.stitchcontainer{
height :300px;
padding: 10px;
width: 100%;
position: relative;
}
.stitch_img{
height: 300px;
width:100% ;
transition: transform .4s; /* Animation */
}
.overlaystitch{
position: absolute;
bottom: 50px;
left: 10px;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5); /* Black see-through */
color: #f1f1f1;
width: 200px;
transition: .5s ease;
opacity:0;
color: white;
font-size: 25px;
padding: 20px;
text-align: center;
}
.stitchcontainer:hover{
transform: scale(1.14);
}
.stitchcontainer:hover .overlaystitch {
opacity: 1;
}
#sizecontiner{
background-color: #00171f;
width: 100%;
height: 350px;
padding-top:100px;
text-align-last: center;
margin-bottom: 100px;
}
.size{
height: 250px;
width: 200px;
}
#sizeid{
height: 250px;
width: 250px;
}
.sell_productscontainer{
display: flex;
gap:30px;
height: 500px;
width: 100%;
padding: 30px;
box-sizing: border-box;
}
.sellproduct{
height: 250px;
width:230px ;
background-color: #edeae7;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.sellproductdiv{
height: 450px;
width: 300px;
border-radius: 20px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.sellname{
padding-left:25px;
padding-top: 0px;
padding-bottom: 10px;
}
.sellname p
{
font-size: 17px;
font:Helvetica ;
}
.poloname{
font-weight: bolder;
}
.bookbutton{
width: 150px;
height: 40px;
background-color:#06275c;
color:white;
border: none;
border-radius: 20px;
font-size: 17px;
font:Helvetica ;
margin-left: 25px;
}
.buttonsize{
border-radius: 50%;
font-size: 16px;
font-weight: 400;
background-color: white;
color: #8c8f8e;
height: 30px;
width: 30px;
border: #bbb 1px solid;
padding: 5px;
}
.buttonsize:hover{
border: black 1px solid;
color: #000;
}
.buttonsize.active{
color: white;
background-color: black;
}
.cart-box{
display: grid;
grid-template-columns: 10% 32% 32% 14% 12%;
align-items: center;
gap: 1rem;
margin-top: 1rem;
padding-bottom: 10px;
}
.cart-content{
border-bottom: 1px solid rgba(0,0,0,0.1);
display: none;
}
.cart-img{
width: 75px;
height: 108px;
object-fit: cover;
border:2px solid rgba(0,0,0,0.1);
padding: 5px;
border-radius: 10px;
}
.cart-quantity{
border:1.2px solid rgb(164, 163, 163);
outline:none ;
width: 100px;
height: 20px;
text-align: center;
font-size: 1rem;
border-radius: 10px;
}
.cart-remove{
all: unset;
font-size: 20px;
font-weight: bolder;
color:rgb(131, 127, 127);
cursor: pointer;
}
.cart-count{
position: absolute;
background-color: #0e3068;
top: -5px;
right: 0;
padding: 3px;
height: 20px;
width: 20px;
line-height:20px ;
border-radius: 50%;
z-index: 99;
display: none;
font-size: 12px;
color: #fff;
}
.btn-book{
background-color:#0e3068;
color:#fff;
border: none;
font-size: 1rem;
font-weight: 500;
cursor: pointer;
width: 350px;
height: 45px;
border-radius: 6px;
margin-left: 65%;
display: none;
}
#btn-booklink{
text-decoration: none;
}
#btn-booklinkdiv{
padding-top: 10%;
}
#orderpagebody{
background-color : white;
}
#headingdiv{
padding:0px 50px 0px 50px ;
display: flex;
gap:80%;
margin-bottom: 0%;
}
#homelink{
text-decoration:none;
color: #0e3068;
font-size: 20px;
}
.topmargin{
margin-top: 0%;
margin-bottom: 0%;
}
#orderpage{
display: flex;
}
#deliverydiv{
padding: 10px 40px 10px 40px;
width: 50%;
}
#Contactheading{
font-family: Arial, Helvetica, sans-serif;
font-weight: 600;
color: #000;
}
#deliveryheading{
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-weight: 600;
}
input{
border-radius: 10px;
font-size: 13px;
border: 1px solid #ede7e7;
height: 50px;
width: 100%;
padding: 10px;
}
#comment{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
padding: 10px;
border: 1px solid #ede7e7;
border-radius: 10px;
}
#completeorder{
background-color:#0e3068;
border:none ;
color: white;
font-weight: 700;
font-size: large;
}
.centerline{
margin-top: 0%;
margin-bottom: 0%;
}
#productdetail{
background-color: #f4f4f4;;
width: 50%;
padding: 20px 40px 10px 40px;
}
.cart-img1{
width: 75px;
height: 75px;
border-radius: 10%;
border:0.5px solid rgba(0,0,0,0.1);
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);
}
.cartorder{
display: grid;
grid-template-columns:20% 1fr;
width: 500px;
margin-bottom: 20px;
}
.cart-title1{
font-weight: 400;
font-size: 14px;
font-family: Segoe UI;
color: #000000;
}
.cart-Itemsize1{
color: rgb(102, 102, 102);
font-weight: 400;
font-size: 12px;
font-family: Segoe UI;
}
.cart-Itemquantity1{
color: rgb(102, 102, 102);
font-weight: 400;
font-size: 12px;
font-family: Segoe UI;
}
.cart-box1{
padding: 7px;
}
/*---------------------*/
#ShoppingcartContent{
padding-right: 40px;
padding-left:40px ;
padding-bottom:15px ;
padding-top: 15px;
}
#pagehead{
display: flex;
gap: 65%;
}
#pagehead h1{
font: 2em sans-serif;
font-size: 240%;
font-weight: 500;
}
#pagehead a {
padding-top: 20px;
border: none;
background-color: white;
text-decoration: underline;
color: #8c8f8e;
}
.ShoppingcartContent-active{
right:0;
transition: 0.5s;
}
#Product_onetime_heading{
display: flex;
width: 100%;
flex-direction: row;
font: 1em sans-serif;
font-size: 12px;
font-weight: 200;
color: #8b8d8c;
border-bottom: 1px solid #e0e0e0;
}
#runtime_productString{
margin-right: 350px;
}
#runtime_sizeString{
margin-right: 320px;
}
#expertpdiv{
background: url('bulkorder.png');
background-size: 50%;
height: 200px;
margin-top: 20%;
width: 100%;
}
#colourlayer{
background-color: rgba(0, 0, 0, 0.8);
height: 120%;
}
#expertp {
color:#f5f5f5;
font-size:20px;
padding: 5%;
justify-self: center;
font-family: 'Poppins', Helvetica, Arial, "sans-serif" !important;
line-height: 1.4;
text-align: justify;
text-align-last: center;
margin: 0 auto;
max-width: 60ch;
}
#bottomText{
margin:1px;
width:100%;
text-align: center;
border-top: 1px solid;
border-bottom: 1px solid;
background-color: #bbd6e9;
}
#bottomText p{
font-size:25px;
margin-top: 0;
height:2px;
}
#scrollToTopBtn {
display:block ;
margin-left:auto;
border: none;
border-radius: 50%;
color: white;
cursor: pointer;
font-size: 18px;
background-image: linear-gradient(#ff512f ,#dd2476);
width:50px;
height:50px;
}
#help{
width:fit-content;
height:fit-content;
padding-left:10px;
padding-right:10px;
background-color: white;
position: fixed;
bottom: 0;
left:76%;
border-radius: 10px;
}
#whatsapplink{
display: block;
text-align: center;
border: none;
border-radius: 50%;
background-image: linear-gradient(#0fb812 ,#1ab357);
width:60px;
height:60px;
position: fixed;
bottom: 0;
right:0;
}
#whatsapp{
padding-top: 10px;
}
#scrollToTopBtn {
transform: translateY(150px);
opacity: 0;
transition: all 0.5s ease;
}
#scrollToTopBtn.active{
opacity: 1;
transform: translateY(0px);
}
}
.footer-basic {
padding:40px 0;
background-image: conic-gradient(from 90deg at -10% 100%, #bcc1cd 0deg, #bcc1cd 90deg, #fff 1turn);
color:#4b4c4d;
border-top:0.2px solid #bcc1cd;
}
.footer-basic ul {
padding:0;
list-style:none;
text-align:center;
font-size:18px;
line-height:1.6;
margin-bottom:0;
}
.footer-basic li {
padding:0 10px;
display: inline;
}
.footer-basic ul a {
color:inherit;
text-decoration:none;
opacity:0.8;
}
.footer-basic ul a:hover {
opacity:1;
}
.footer-basic ul a button{
all: unset;
}
.footer-basic .social {
text-align:center;
padding-bottom:10px;
}
.footer-basic .social > a {
font-size:24px;
width:40px;
height:40px;
line-height:40px;
display:inline-block;
text-align:center;
border-radius:50%;
border:1px solid #ccc;
margin:0 8px;
color:inherit;
opacity:0.75;
place-items: center;
}
.footer-basic .social > a:hover {
opacity:0.9;
}
.footer-basic .copyright {
margin-top:15px;
text-align:center;
font-size:13px;
color:#aaa;
margin-bottom:0;
}
/* ipad screen */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
.productImage{
height:125px;
width:125px;
}
}
#descrption{
background-color: #00171f;
height:450px ;
}