@charset "UTF-8";
/*--»»————-————　      ♔♕      —————————-—««-->
<--◄███▓▒░░       ® Micro Box        ░░▒▓███►-->
<--◄███▓▒░░    PHONE 0410 167 857    ░░▒▓███►-->
<--◄███▓▒░░   www.microbox.com.au    ░░▒▓███►-->
<--◄███▓▒░░       © FROM 2018        ░░▒▓███►-->
<--◄███▓▒░░   All Rights Reserved    ░░▒▓███►-->
<--◄███▓▒░░  Powered By Paul Henley  ░░▒▓███►-->
<--»»————-————　      ♔♕      —————————-—««--*/
*{
    /* Prevent image drag */
     -webkit-user-drag: none;
     -khtml-user-drag: none;
     -moz-user-drag: none;
     -o-user-drag: none;
    /* Prevent text selection */
     -webkit-touch-callout: none !important;
     -webkit-user-select: none;
    /* Safari */
     -moz-user-select: none;
    /* Firefox */
     -ms-user-select: none;
    /* Edge */
     user-select: none;
    /* Standard syntax */
    /* Smooth scrolling */
     scroll-behavior: smooth;
    /* Prevent zoom on touch devices */
     touch-action: pan-x pan-y;
    /* Font stack with fallback */
     font-family: system-ui, sans-serif;
    /* Remove outline on focus */
     outline: none;
    /* Hide scrollbars */
     scrollbar-width: none;
    /* Enhance Font */
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     border: 0;
     outline: 0;
	text-decoration: none;
}
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@600&display=swap');
body {
     background-color: rgb(255 255 255);
     font-family: system-ui, sans-serif;
     margin: 0px;
     padding: 0px;
}
.topbar {
  background-color: #93d1ff;
  /* height: 42px; */
  /* padding: 1rem; */
  padding-top: 10px;
  padding-bottom: 20px;
  text-align: center;
  width: 100%;
  transition: background-color 2s linear;
  /* margin-bottom: 30px; */
  /* background-image: linear-gradient(to right, rgb(0 142 255) 0%, #ab6965, rgb(33 39 40) 100%); */
  animation: topbar 10s infinite;
}
@keyframes topbar {
    0%   { background-color: rgb(96 171 255); }
    20%  { background-color: rgb(174 142 96); }
    40%  { background-color: rgb(198 205 125); }
    60%  { background-color: rgb(244 220 182); }
    80%  { background-color: rgb(68 91 71); }
    100% { background-color: rgb(96 171 255); } /* loop back to start */
}

        .category-gallery {
            /* display: grid; */
            /* grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); */
            /* grid-gap: 10px; */
            padding: 10px;
            align-items: baseline;
            display: flex;
            justify-content: center;
            align-content: flex-end;
            align-self: flex-end;
            flex-direction: row;
            flex-wrap: wrap;
            margin-bottom: 20px;
            margin-top: 20px;
            padding-left: 0px;
            padding-right: 0px;
            margin-left: 0px;
            margin-right: 0px;
        }

        .category-item {
            position: relative;
            text-align: center;
            border-style: none;
            border-color: #c1c1c1;
            padding: 10px;
            /* border-radius: 10px; */
            align-items: baseline;
            /* display: flex; */
            justify-content: center;
            align-content: flex-end;
            align-self: flex-end;
            /* background-color: #eaeaea; */
            /* height: 289px; */
            margin-left: 1px;
            margin-right: 1px;
            width: 160px;
            margin-bottom: 1px;
            margin-top: 1px;
            border: 1px solid #c1c1c1;
        }

.category-title{
	padding: 0px;
	padding-top: 10px;
	padding-bottom: 10px;
	border-radius: 8px;
	margin:0px;
	height: 70px;
	color: #000000;
	font-size: 16px;
	font-family: arial;
	/* background-color: #fff; */
	/* border-bottom-left-radius: 20px; */
	/* border-bottom-right-radius: 20px; */
	/* border: 3px solid #979797; */
	width: 100%;
	max-width: 394px;
}
        .category-item img {
          max-width: 150px; */
          /* max-height: 150px; */
          width: 100%;
          /* max-width: 350px; */
          height: 180px;
          border-radius: 5px;
          /* border-bottom-left-radius: 0px; */
          /* border-bottom-right-radius: 0px; */
          border: 0px solid #979797;
        }
.site-title {
  color: #ffffff; /* Dark gray for softer contrast */
  margin: 0;
  font-size: 35px; /* More presence */
  font-weight: 400; /* Bold but not too heavy */
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: -0.02em; /* Subtle tightening */
  line-height: 1.2;
  
  /* Modern subtle styling */
  text-align: center;
  /* text-transform: uppercase; */ /* Optional: feels more like a logo */
  text-shadow: 0 2px 4px rgb(0 0 0); /* Gentle depth */
}


.bottombar {
    height: 100px;
    background-color: #030012;
}
.main_container {
     color: rgb(6 6 6);
     text-align: center;
     margin: 0px;
     margin-top: 0px;
     margin-bottom: 0px;
     font-size: 20px;
     overflow: hidden;
     justify-content: center;
     align-items: center;
     flex-wrap: wrap;
     padding-bottom: 0px;
     padding-left: 0px;
     padding-right: 0px;
     padding-top: 0px;
     /* border-radius: 20px; */
     /* border: 3px solid rgba(0, 0, 0, .125); */
     margin: 0 auto;   /* centers the body */
     padding: 0;
     max-width: 1300px; /* restricts width */
}
.footerlogo {
     margin-top: 20px;
     padding: 20px;
     width: 100%;
     max-width: 200px;
     height: auto;
     background-color: #ffffff;
     border-radius: 20px;
     border: 2px solid #5fbbe1;
     border-bottom: 0px;
     border-top-right-radius: 60px;
     border-top-left-radius: 60px;
}
.footer {
     overflow: hidden;
     justify-content: center;
     margin: 0px;
     height: 100%;
     align-items: center;
     flex-wrap: wrap;
     /* background-color: #ffffff; */
     /* padding: 20px; */
     /* border: 3px solid rgb(193 193 193); */
     border-left: none;
     border-right: none;
     border-bottom: none;
}
.copywritereserved {
     display: flex;
     justify-content: center;
     align-items: center;
     color: rgb(210 210 210);
}
.facebookdiv {
     display: flex;
     justify-content: center;
     margin-top: 30px;
     padding: 20px;
     width: -webkit-fill-available;
}
.ssl-img-div {
     display: flex;
     justify-content: center;
     align-items: center;
    /* margin-bottom: 20px;
     */
     margin-top: 5px;
}
.ssl-img {
     display: flex;
     height: 72px;
     width: 72px;
     justify-content: center;
     align-items: center;
     margin-top: 0px;
     cursor: pointer;
     animation: shake 1s infinite;
}
.ssl-img-text {
     color: #000000;
     text-align: center;
     display: flex;
     justify-content: center;
     align-items: center;
     border-style: none;
     font-size: 20px;
     font-weight: 400;
     width: 100%;
     margin: auto;
     padding-bottom: 20px;
}
.ssl-text-failed {
     color: rgb(255 0 0);
     text-align: center;
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100%;
     border-style: none;
     padding-top: 60px;
     font-size: 20px;
     width: 100%;
     margin: auto;
     padding-bottom: 20px;
}
@keyframes shake {
     10%, 90% {
         transform: translate3d(-1px, 0, 0);
    }
     20%, 80% {
         transform: translate3d(2px, 0, 0);
    }
     30%, 50%, 70% {
         transform: translate3d(-4px, 0, 0);
    }
     40%, 60% {
         transform: translate3d(4px, 0, 0);
    }
}
h2 {
     font-size: 22px;
     text-align: center;
     display: flex;
     margin-left: 20px;
     margin-right: 20px;
     border-radius: 50px;
     text-decoration: none;
     justify-content: center;
     padding: 9px;
     align-items: center;
}

/* Animated spinning gradient halo */
@keyframes rotateGradient {
     0% {
         transform: rotate(0deg);
    }
     100% {
         transform: rotate(360deg);
    }
}
.invisible_div {
     overflow: hidden;
     display: flex;
     justify-content: center;
     align-items: center;
     margin-top: 20px;
     margin-bottom: 20px;
     border-radius: 20px;
     flex-wrap: wrap;
     margin-right: auto;
     width: 100%;
     margin-left: auto;
     /* padding-left: 10px; issue not lining up dont use*/
     /* padding-right: 10px; issue not lining up dont use*/
     padding-top: 10px;
     padding-bottom: 10px;
}
h3 {
     color: rgb(139 139 139);
     font-size: 23px;
     font-weight: 300;
     margin: 0px;
     margin-bottom: 10px;
     width: 100%;
}
.footertxt{
	text-align: center;
	font-size:20px;
	color: #000000 !important;
	border-style: none;
	padding: 0px;
	justify-content: center;
	align-items: center;
	text-align: center;
	margin-top: 1px;
	line-height: 1.1;
	margin-bottom: 1px;
	font-size: 17px;
	font-weight: 400;
	margin-right: 15px;
	margin-left: 15px;
	width: auto;
}
.center_footer_logo {
     display: flex;
     justify-content: center;
}

.social_icons {
     width: 56px;
}
.social_btns {
     background-color: transparent;
    /* Rounded button for a more modern look */
     -webkit-appearance: none;
     text-align: center;
     font-size: 20px;
     cursor: pointer;
     margin: 5px;
    /* Square shape with equal height and width */
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 0;
    /* Soft border with transparency */
     transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    /* Smooth transitions */
    /* Light background color for initial state */
}
.social_btns:hover {
     transform: scale(1.1);
    /* Slight zoom effect on hover */
}
.social_btns:active {
     transform: scale(0.98);
    /* Slight shrink effect on click */
}
.social_btns img {
     width: 40px;
    /* Appropriate size for the icon */
     height: 40px;
    /* Ensures icon scales properly */
     transition: filter 0.3s ease;
    /* Smooth transition for hover effect */
     border-radius: 50px;
     border: 2px solid #2196F3;
     padding: 3px;
}
.social_btns:hover img {
     filter: brightness(1.2);
    /* Increase brightness of the icon on hover */
}
.footer_social_links {
     display: flex;
     justify-content: center;
     align-items: center;
     position: fixed;
     padding: 20px;
     left: 0%;
     right: 0%;
     z-index: 1;
     position: relative;
     margin: 0px;
     background-color: #ffffff29;
}
.logo-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
  /* margin-top: 20px; */
  margin-bottom: 60px;
  background-color: #daefff;
}

.logo-bar img {
  height: 110px;
  transition: transform 0.3s;
  padding: 10px;
}

.logo-bar img:hover {
  transform: scale(1.5);
}
 .pagination {
            text-align: center;
            padding-top: 20px;
            padding-bottom: 20px;
            /* background-color: #d1d1d1; */
            border-top-left-radius: 50px;
            border-top-right-radius: 50px;
            /* animation: menu 10s infinite; */
            /* position: fixed; */
            /* bottom: 0px; */
            width: 100%;
        }

        .pagination a {
  padding: 5px 13px;
  color: #000000;
  transition: all 0.3s;
  border: none;
  /* background-color: #032b5e; */
  font-size: 20px;
  border-radius: 500px;
  margin: 0 4px;
  cursor: pointer;
  text-decoration: none;
  border: 3px solid #c1c1c1;
  }


        .pagination a:hover {
 color: #000000;
			background-color: #e9e9e9;
 /* background-color: #008eff; */
 }