.focus-in-contract-bck {
	-webkit-animation: focus-in-contract-bck 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation: focus-in-contract-bck 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes focus-in-contract-bck {
	0% {
		letter-spacing: 1em;
		-webkit-transform: translateZ(300px);
		transform: translateZ(300px);
		-webkit-filter: blur(12px);
		filter: blur(12px);
		opacity: 0;
	}
	
	100% {
		-webkit-transform: translateZ(12px);
		transform: translateZ(12px);
		-webkit-filter: blur(0);
		filter: blur(0);
		opacity: 1;
	}
}

@keyframes focus-in-contract-bck {
	0% {
		letter-spacing: 1em;
		-webkit-transform: translateZ(300px);
		transform: translateZ(300px);
		-webkit-filter: blur(12px);
		filter: blur(12px);
		opacity: 0;
	}
	
	100% {
		-webkit-transform: translateZ(12px);
		transform: translateZ(12px);
		-webkit-filter: blur(0);
		filter: blur(0);
		opacity: 1;
	}
}

.fade-in {
	-webkit-animation: fade-in 4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	animation: fade-in 4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.fade-in {
	-webkit-animation: fade-in 4s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1s both;
	animation: fade-in 4s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1s both;
}

@-webkit-keyframes fade-in {
	0% {
		opacity: 0;
	}
	
	100% {
		opacity: 1;
	}
}

@keyframes fade-in {
	0% {
		opacity: 0;
	}
	
	100% {
		opacity: 1;
	}
}

.grow:hover {
	-webkit-animation: jello-horizontal 0.9s steps(20, end) both;
	        animation: jello-horizontal 0.9s steps(20, end) both;
}
@-webkit-keyframes jello-horizontal {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
@keyframes jello-horizontal {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
		}
.scale-out-center {
	-webkit-animation: scale-out-center 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) 10s both;
	        animation: scale-out-center 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) 10s both;
}
@-webkit-keyframes scale-out-center {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
}
@keyframes scale-out-center {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
}
.blink-1 {
	-webkit-animation: blink-1 3s infinite both;
	        animation: blink-1 3s infinite both;
}
@-webkit-keyframes blink-1 {
  0%,
  50%,
  100% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}
@keyframes blink-1 {
  0%,
  50%,
  100% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}

.rounded img {
	border-radius: 10px;
}
.bottom {
	z-index: 1;}
.top {
	z-index: 9999;}

@media only screen and (max-width: 768px) {
    .hide-on-mobile-tablet {
        display: none !important;
    }
}
@media(min-width: 768px) {
  .hide-on-pc {
    display: none !important;
  }
}
.call-icon {
  z-index: 9999;
	width: 6.5rem;
  display: flex;
  justify-content: right;
	align-items: right;
  position: fixed; 
	overflow: hidden;	
	position: -webkit-fixed;
	bottom: 65px; right: 2px; }

.slide-in-bottom {
	-webkit-animation: slide-in-bottom 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(1000px);
            transform: translateY(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(1000px);
            transform: translateY(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

.shake-horizontal {
	-webkit-animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
	        animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}
@-webkit-keyframes shake-horizontal {
  0%,
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70% {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
  }
  20%,
  40%,
  60% {
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
  }
  80% {
    -webkit-transform: translateX(8px);
            transform: translateX(8px);
  }
  90% {
    -webkit-transform: translateX(-8px);
            transform: translateX(-8px);
  }
}
@keyframes shake-horizontal {
  0%,
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70% {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
  }
  20%,
  40%,
  60% {
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
  }
  80% {
    -webkit-transform: translateX(8px);
            transform: translateX(8px);
  }
  90% {
    -webkit-transform: translateX(-8px);
            transform: translateX(-8px);
  }
}
.jello:hover {
	-webkit-animation: jello-horizontal 0.9s steps(20, end) both;
	        animation: jello-horizontal 0.9s steps(20, end) both;
}
@-webkit-keyframes jello-horizontal {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
@keyframes jello-horizontal {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
		}
@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@500;600&display=swap');

body .body {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Barlow Semi Condensed', sans-serif;
}
.outerdiv
{
	width: flex;
    min-height: flex;
    background: #E2FCC700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.innerdiv
{
	transform: scale(1.0);
	margin: 1rem;
	display: grid;
	grid-gap: 1.2rem;
	grid-template-rows: repeat(2,22rem);
	grid-template-columns: repeat(4,17rem);
}
.eachdiv
{
	padding: 1rem 2rem;
    border-radius: 0.8rem;
    box-shadow: 5px 5px 20px #6d6b6b6b;
}
.div1
{
	background: #85AB5E;
    grid-column: 1/3;
    grid-row: 1/2;
    background-image: url(https://hoistfencing.uk/wp-content/uploads/2023/09/commaV3.png);
    background-repeat: no-repeat;
    background-position-x: 25rem;
}
.div2
{
	background:whitesmoke;
    grid-column: 3/4;
    grid-row: 1/2;
}
.div3
{
	background: #85AB5E;
    grid-column: 4/5;
    grid-row: 1/3;
    color: black;
}
.div4
{
	background: #0B303B;
	grid-column: 1/2;
    grid-row: 2/3;
    color: black;
}
.div5
{
	background: #E2FDC7;
	grid-column: 2/4;
    grid-row: 2/3;
}
.userdetails
{
	display: flex;
}
.imgbox
{
	margin-right: 1rem;
}
.imgbox img
{
	border-radius: 50%;
	width: 2rem;
	border: 2px solid #cec5c5;
}
.detbox
{
	display: flex;
    flex-direction: column;
    justify-content: center;
}
.detbox p
{
	margin: 0;
}
.detbox .name
{
	color: #FFFFFF;
    font-size: 0.9rem;
    margin-bottom: 0.1rem;
    font-weight: 600;
		font: poppins;
}
.detbox .name.dark
{
	color: #49505A;
}
.detbox .designation
{
	color: #FFFFFF;
    opacity: 80%;
    font-size: 0.8rem;
}
.detbox .designation.dark
{
	color: #49505A;
}
.review h4
{
	font-size: 1.4rem;
	color: #FFFFFF;
    font-weight: 600;
    line-height: 0.9;
    margin-bottom: 0.8rem;
}
.review.dark h4{
	color:#4B5258;
}
.review p
{
	font-family: poppins;
	font-size: 1rem;
    color: #FFFFFF;
    font-weight: 200;
    opacity: 70%;
    line-height: 1.13;
}
.review.dark p{
	color: #0e0e0e;
}

@media only screen and (max-width: 1000px)
{
	.innerdiv
	{
		transform: scale(0.7);
	}
}
@media only screen and (max-width: 800px)
{
	.innerdiv
	{
		transform: scale(0.6);
	}
}
@media only screen and (max-width: 600px)
{
	.div1 {
	 background-position-x: 10rem;
	}
	.innerdiv
	{
		display: flex; 
		flex-direction: column;
		transform: scale(1);
		margin: 2rem;
		margin-bottom: 5rem;
	}
}
.tracking-in-expand {
	-webkit-animation: tracking-in-expand 2s cubic-bezier(0.215, 0.610, 0.355, 1.000) 0.5s both;
	        animation: tracking-in-expand 2s cubic-bezier(0.215, 0.610, 0.355, 1.000) 0.5s both;
}
@-webkit-keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
@keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
.puff1 {
	-webkit-animation: puff-in-tr 1s cubic-bezier(0.470, 0.000, 0.745, 0.715) 2s both;
	        animation: puff-in-tr 1s cubic-bezier(0.470, 0.000, 0.745, 0.715) 2s both;
}
@-webkit-keyframes puff {
  0% {
    -webkit-transform: scale(2);
            transform: scale(2);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    -webkit-filter: blur(4px);
            filter: blur(4px);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
@keyframes puff-in-tr {
  0% {
    -webkit-transform: scale(2);
            transform: scale(2);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    -webkit-filter: blur(4px);
            filter: blur(4px);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
.puff2 {
	-webkit-animation: puff-in-tr 1s cubic-bezier(0.470, 0.000, 0.745, 0.715) 2.5s both;
	        animation: puff-in-tr 1s cubic-bezier(0.470, 0.000, 0.745, 0.715) 2.5s both;
}
@-webkit-keyframes puff {
  0% {
    -webkit-transform: scale(2);
            transform: scale(2);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    -webkit-filter: blur(4px);
            filter: blur(4px);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
@keyframes puff-in-tr {
  0% {
    -webkit-transform: scale(2);
            transform: scale(2);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    -webkit-filter: blur(4px);
            filter: blur(4px);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}

.puff3 {
	-webkit-animation: puff-in-tr 1s cubic-bezier(0.470, 0.000, 0.745, 0.715) 3.5s both;
	        animation: puff-in-tr 1s cubic-bezier(0.470, 0.000, 0.745, 0.715) 3.5s both;
}
@-webkit-keyframes puff {
  0% {
    -webkit-transform: scale(2);
            transform: scale(2);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    -webkit-filter: blur(4px);
            filter: blur(4px);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
@keyframes puff-in-tr {
  0% {
    -webkit-transform: scale(2);
            transform: scale(2);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    -webkit-filter: blur(4px);
            filter: blur(4px);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
.puff4 {
	-webkit-animation: puff-in-tr 1s cubic-bezier(0.470, 0.000, 0.745, 0.715) 4s both;
	        animation: puff-in-tr 1s cubic-bezier(0.470, 0.000, 0.745, 0.715) 4s both;
}
@-webkit-keyframes puff {
  0% {
    -webkit-transform: scale(2);
            transform: scale(2);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    -webkit-filter: blur(4px);
            filter: blur(4px);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
@keyframes puff-in-tr {
  0% {
    -webkit-transform: scale(2);
            transform: scale(2);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    -webkit-filter: blur(4px);
            filter: blur(4px);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
.fade-in4 {
	-webkit-animation: fade-in 4s cubic-bezier(0.390, 0.575, 0.565, 1.000) 6s both;
	        animation: fade-in 4s cubic-bezier(0.390, 0.575, 0.565, 1.000) 6s both;
}
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
:root {
  --primary: #0B303B;
  --secondary: #0B303B;
  --background: #0B303B;
  --highlight: #0B303B;
  /* Theme color */
  --theme: var(--primary);
}
*, *::before, *::after {
  box-sizing: border-box;
}
body .accordion .accordion--radio {
  display: grid;
  place-content: center;
  grid-template-columns: repeat(auto-fit, min(100%, 30rem));
  min-height: 100vh;
  place-items: start;
  gap: 1rem;
  margin: 20;
  padding: 1rem;
  color: var(--primary);
  background: var(--background);
  width: flex;
}

/* Core styles/functionality */
.tab input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.tab__content {
  max-height: 0;
  overflow: hidden;
  transition: all 0.35s;
}
.tab input:checked ~ .tab__content {
  max-height: 12rem;
}

/* Visual styles */
.accordion {
  color: #0B303B;
  border-radius: 0.5rem;
  overflow: hidden;
  opacity: 95%;
  background-color: #E2FDC7;
  font-family: default;
  opacity: 90%;
  font-size: 1rem;
}
.tab__label,
.tab__close {
  display: flex;
  color: #E2FDC7;
  background: var(--theme);
  cursor: pointer;
  font-family: default;
}
.tab__label {
  justify-content: space-between;
  padding: 1.5rem;
}
.tab__label::after {
  content: "\276F";
  width: 1em;
  height: 1em;
  text-align: center;
  transform: rotate(90deg);
  transition: all 1s;
}
.tab input:checked + .tab__label::after {
  transform: rotate(270deg);
}
.tab__content p {
  margin: 0;
  padding: 1rem;
}
.tab__close {
  justify-content: flex-end;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
}
.accordion--radio {
  --theme: var(--secondary);
}

/* Arrow animation */
.tab input:not(:checked) + .tab__label:hover::after {
  animation: bounce .5s infinite;
}
@keyframes bounce {
  25% {
    transform: rotate(90deg) translate(.25rem);
  }
  75% {
    transform: rotate(90deg) translate(-.25rem);
  }
}
.frame {
width:90%;
margin: auto; 
min-height:400px;	
height:auto;
display:flex;
border-color: #0B303B;
border-radius:15px;
box-shadow: 5px 5px 20px #6d6b6b;
}
.frame2 {
margin: auto; 
display:flex;
border-color: #0B303B;
border-radius:15px;
box-shadow: 5px 5px 20px #6d6b6b;
}