@font-face {
    font-family: 'miraimedium';
    src: url('../font/mirai-medium-webfont.woff2') format('woff2'),
         url('../font/mirai-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'mirairegular';
    src: url('../font/mirai-regular-webfont.woff2') format('woff2'),
         url('../font/mirai-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
:root{
    --primarily: #b42824;
    --secondly: #ebebeb;
    --thirdly: #555555;

	--light: linear-gradient(0deg, rgba(0,0,0,0.6306897759103641) 19%, rgba(120,114,114,0.34217436974789917) 100%);
    
	--lightBlue: #dededf;

	--title: #282828;
	--text: #808285;
	--text: #4c4c4c;
    --white: #fff;
    --black: #000;
	--gray: #f6f6f6;


    --value: 5;
    
    --smallest-value: 12px;
    --small-value: 14px;
    --default-value: 15px;
    --medium-value: 17px;
    --big-value: 20px;
    --biggest-value: 26px;
    
    --border-color: rgb(206 204 204 / 100%);
	--box-shadow: 0 0 15px 2px rgba(90, 52, 52, 0.08);
	--box-shadow2: 0 0 15px 2px rgba(90, 52, 52, 0.3);

    
}
* {
  box-sizing: border-box;
  font-stretch: normal;
  margin: 0;
  padding: 0;
}
html {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;

    font-size: 62.5%;
}
body {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    font-family: 'miraimedium', 'mirairegular' !important;
    font-size: var(--medium-value) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
	color: var(--text) !important;
	overflow-x: hidden !important;
}
img {
  max-width: 100%;
}
a, a:hover, a:focus, a:active {
    text-decoration: none !important;
}

ul, li {
	list-style: none !important;
}


/*---------------------- Begin: title  -------------------- */
.title {
	font-weight: 700;
}
.text__bg {
	background: var(--primarily);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.primarily__title {
	font-size: 4.5rem;
}
.secondly__title {
	font-size: 3.6rem;
}
.thirdly__title {
	font-size: 2.5rem;
}
.fourthly__title {
	font-size: 2.2rem;
}
.fifthly__title {
	font-size: 2rem;
}



.heading {
	padding: 0.5rem 1rem;
	color: var(--primarily);
	background: white;
}


.line-height-1-4 {
	line-height: 1.4;
}
.line-height-1-5 {
	line-height: 1.5;
}
.line-height-1-6 {
	line-height: 1.6;
}

/*---------------------- End: title -------------------- */


/*---------------------- Begin: title__brd -------------------- */
.title__brd {
	position: relative;
}
.title__brd:before {
	position: absolute;
	content: '';
	width: 100px;
	height: 4px;
	background: var(--primarily);

	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
}

/*---------------------- End: title__brd -------------------- */


/*---------------------- Begin: colors  -------------------- */
.primarily__clr{
	color: var(--primarily);
}
.secondly__clr {
	color: var(--secondly);
}
.title__clr {
	color: var(--title);
}
.text__clr {
	color: var(--text);
}
.text__black {
	color: var(--black);
}


.bg__primarily__clr{
	background: var(--primarily);
}
.bg__secondly__clr {
	background: var(--secondly);
}
.bg__title__clr {
	background: var(--title);
}
.bg__text__clr {
	background: var(--text);
}
.bg__text__black {
	background: var(--black);
}
.bg__light__blue {
	background: var(--lightBlue);
}

/*---------------------- End: colors -------------------- */


/*---------------------- Begin: whatsApp, callUs -------------------- */
.whatsApp, .callUs {
	position: fixed;
	left: 1rem;
	z-index: 999;

	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	color: var(--white);

	display: flex;
	justify-content: center;
	align-items: center;

	font-size: var(--biggest-value)
}
.whatsApp, .whatsApp:hover {
	bottom: 1rem;
	background: #25D366;
}
.callUs  {
	bottom: 6rem;
	background: green;
	font-size: var(--medium-value)
}
.whatsApp:hover , .callUs:hover {
	color: var(--white)
}


/*---------------------- End: whatsApp -------------------- */




/*---------------------- Begin: btn-------------------- */
.button {
	display: inline-block;
	font-size: var(--default-value);
	padding: 0.5em 1.6em;
	border: none;
}
.button2 {
	border-radius: 3rem;
}
.button, .form__button {
	background: var(--primarily);
	color: var(--white);
}
.button:hover, 
.form__button:hover {
	background: var(--primarily);
	color: var(--white);
}
/*---------------------- End: btn-------------------- */

/*---------------------- Begin: main-------------------- */
#main {
	min-height: 100vh;
}
section {
	padding: 7rem 0 4rem 0;
}
.gray__bg {
	background: var(--gray);
}

/*---------------------- End: main-------------------- */


/*---------------------- Begin: grid -------------------- */
.grid {
	display: grid;
	grid-gap: 2rem;
	grid-template-columns: auto;
}

.grid-2{
	grid-template-columns: 1fr 1fr;
}
.grid-5 {
	grid-template-columns: repeat(2, 1fr);
}

@media screen and (min-width: 992px){
	.grid-2{
		grid-template-columns: 1fr 1fr;
	}
	.grid-5 {
		grid-template-columns: repeat(5, 1fr);
	}
	
}
@media screen and (max-width: 600px){
	.grid-5 {
		grid-template-columns: repeat(1, 1fr);
	}
	
}

/*---------------------- End: grid -------------------- */



/*---------------------- Begin: header -------------------- */
header {
	padding: 15px 0;
}
.a1-fence-logo {
	width: 20rem;
}
header h2 {
	text-align: right;
	margin: 0;
}

/*---------------------- End: header -------------------- */


/*---------------------- Begin: footer  -------------------- */
footer {
	padding: 1rem 0;
}
footer a {
	color: var(--primarily);
}

.scrollTop {
    position: fixed;
    z-index: 999;
    bottom: 2rem;
    right: 2rem;
    display: none;
}
.scrollTop a {
    width: 5rem;
    height: 5rem;
    line-height: 5rem;
    display: inline-block;
    text-align: center;
    border-radius: 50%;
    color: var(--white);
    box-shadow: var(--shadow);
	background: var(--black);

}

/*---------------------- End:  footer -------------------- */




/*---------------------- Begin: banner -------------------- */
.banner {
	width: 100%;
	height: 55rem;
	position: relative;
	z-index: 1;


	display: flex;
	align-items: center;


}
.banner:before {
	position: absolute;
	content: '';
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	/* background: rgba(0,0,0,0.6); */
	background: rgb(20 20 20 / 50%);
}
.banner-content  h1 {
	font-weight: 700;
	font-size: 6rem;
	margin-bottom: 2rem;
	text-shadow:2px 0px black;
}
.banner-content {

}


/*---------------------- End: banner -------------------- */




/*---------------------- Begin: content  -------------------- */
.content {

}
.content-list {

}
.content-list li {
	display: flex;
	align-items: center;	
	font-size: 1.6rem;

}
.content-list li:not(:last-child) {
	margin-bottom: 1rem;
}
.icon {
	display: inline-block;
	margin-right: 1rem;
	--val: 2.5rem;
	width: var(--val) !important;
	padding: 0.58rem;
	height: var(--val);	
	line-height: var(--val);	
	text-align: center;
	color: white;
	background: var(--primarily);
	border-radius: 50%;
}


/*---------------------- End:  content -------------------- */


/*---------------------- Begin: accordion  -------------------- */
.accordion__area { }
.accordion__area .card {
    margin-bottom: 1rem;
    border: none;
}
.accordion__area .accordion>.card>.card-header {
    padding: 0;
    background: 0 0;
}
.accordion__area .accordion>.card>.card-header a {
    width: 100%;
    float: left;
    background: var(--white);
    padding: 20px;
}
.accordion__area .card-body {
    background: var(--white);
    border-top: 1px solid var(--primarily)!important;
}

.accordion__area .card__box {
	background: var(--secondly);
}
.card__box {
	box-shadow: var(--box-shadow);
	background: var(--white);
	overflow: hidden;
}
.card__box__content {
	padding: 0.5rem 2rem;

}

/*---------------------- End: accordion  -------------------- */


/*---------------------- Begin: compliances  -------------------- */
.compliances {

}
.compliances .card__box   {
	padding: 2rem 1.2rem;
}
.compliances img {
	height: 150px
}

/*---------------------- End: compliances  -------------------- */


/*---------------------- Begin:   -------------------- */


/*---------------------- End:   -------------------- */



/*---------------------- Begin: responsive -------------------- */
@media (min-width: 1400px) {



}
@media (max-width: 1400px) {


}
@media (max-width: 1300px) {



}
@media (max-width: 992px) {
.data-center .card__box{
	margin-bottom: 1.5rem;
}
	



}
@media (max-width: 768px) {

	.primarily__title {
		font-size: 4.0rem;
	}
	.secondly__title {
		font-size: 3.0rem;
	}
	.thirdly__title {
		font-size: 2.0rem;
	}



}

@media (max-width: 767px) {

	
	.secondly__title {
		font-size: 2.8rem;
	}

}
@media (max-width: 600px) {

	.primarily__title {
		font-size: 2.8rem;
	}
	.secondly__title {
		font-size: 2.4rem;
	}
	.thirdly__title,.fourthly__title, .fifthly__title  {
		font-size: 1.8rem;
	}

	body {
		font-size: 16px !important;
	}
	.a1-fence-logo {
		width: 14rem;
	}


	
}
@media (max-width: 480px) {
	

	

}
@media (max-width: 450px) {
	
	


	 
	.primarily__title {
		font-size: 2.6rem;
	}
	.secondly__title {
		font-size: 2.3rem;
	}


}
@media (max-width: 360px) {
	
}
@media (max-width: 320px) {

}


/*---------------------- End: responsive -------------------- */