@font-face {
    font-family: 'Replica';
    src: url("../assets/font/ReplicaPro.ttf");
}

:root {
    --primary-font-family: 'Replica std', sans-serif;
    --secondary-font-family: 'Arial', sans-serif;

    --font-size-11: 11px;
    --font-size-12: 12px;
    --font-size-13: 13px;
    --font-size-14: 14px;
    --font-size-15: 15px;
    --font-size-16: 16px;
    --font-size-17: 17px;
    --font-size-18: 18px;
    --font-size-20: 20px;
    --font-size-21: 21px;
    --font-size-22: 22px;
    --font-size-24: 24px;
    --font-size-25: 25px;
     --font-size-26: 26px;
    --font-size-30: 30px;
    --font-size-32: 32px;
    --font-size-36: 36px;
    --font-size-38: 38px;
    --font-size-40: 40px;
    --font-size-45: 45px;
    --font-size-50: 50px;
    --font-size-55: 55px;
    --font-size-60: 60px;
    --font-size-80: 80px;
    --font-size-106: 106px;


    --line-height-14: 14px;
    --line-height-15: 15px;
    --line-height-16: 16px;
    --line-height-17: 17px;
    --line-height-18: 18px;
    --line-height-19: 19px;
    --line-height-20: 20px;
    --line-height-22: 22px;
    --line-height-24: 24px;
    --line-height-25: 25px;
    --line-height-26: 26px;
    --line-height-29: 29px;
    --line-height-30: 30px;
    --line-height-32: 32px;
    --line-height-34: 34px;
    --line-height-42: 42px;
    --line-height-48: 48px;
    --line-height-50: 50px;
    --line-height-55: 55px;
    --line-height-60: 60px;
    --line-height-64: 64px;
    --line-height-66: 66px;
    --line-height-69: 69px;
    --line-height-89: 89px;
    --line-height-121: 121px;

    --t-upper: uppercase;
    --t-lower: lowercase;


    --fw-normal: normal;
    --fw-bold: bold;
    --fw-700: 700;
    --fw-600: 600;
    --fw-500: 500;
    --fw-400: 400;

    --color-white: #fff;
    --color-black: #000000;
    --light-grey: #EFF3F5;
    --dark-grey: #848484;
    --extra-dark-grey: #313131;
    --dark-skyBlue: #006491;
    --skyBlue: #1E94C9;
    --EFEFEF: #EFEFEF;

    --linearGradient1: transparent linear-gradient(90deg, #EFEFEF33 0%, #000000 100%);

}

body{
    margin: 0!important;
    color: black;
    font-family: var(--secondary-font-family);
}
h1, h2{
    font-family: var(--primary-font-family);
}
h3, h4, h5,h6{
    font-family: var(--primary-font-family);
}
.bold{
    font-weight: bold;
}
.darkBg {
    background-color: var(--color-black);
    color: var(--color-white);
}  

.bannerHeading {
    font-size: var(--font-size-55);
    font-style: var(--fw-normal);
    font-weight: var(--fw-bold);
    line-height: var(--line-height-66);
    color: var(--color-white);
    font-family: var(--primary-font-family);
}
.bg-efef {
    background: #EFEFEF;
}
.gray-background {
    background: #EFEFEF;
}
.largeHead {
    font-family: var(--secondary-font-family);
    font-size: var(--font-size-106);
    font-style: var(--fw-normal);
    font-weight: var(--fw-bold);
    line-height: var(--line-height-121);
}

.head1 {
    font-family: var(--primary-font-family);
    font-size: var(--font-size-50)!important;
    font-style: var(--fw-normal);
    font-weight: var(--fw-bold);
    line-height: var(--line-height-60)!important;
}

.head2 {
    font-family: var(--primary-font-family);
    font-size: var(--font-size-45)!important;
    font-style: var(--fw-normal);
    font-weight: var(--fw-bold);
    line-height: var(--line-height-55)!important;
    /*color: black;*/
}

.head3 {
    font-family: var(--secondary-font-family);
    font-size: var(--font-size-36)!important;
    font-style: var(--fw-normal);
    font-weight: var(--fw-bold);
    line-height: var(--line-height-42)!important;
}

.head4 {
    font-family: var(--secondary-font-family);
    font-size: var(--font-size-25)!important;
    font-style: var(--fw-normal);
    font-weight: var(--fw-bold);
    line-height: var(--line-height-29)!important;
}

.head5 {
    font-family: var(--secondary-font-family);
    font-size: var(--font-size-20);
    font-style: var(--fw-normal);
    font-weight: var(--fw-bold);
    line-height: var(--line-height-26);
}

.para1 {
    font-family: var(--secondary-font-family);
    font-size: var(--font-size-30);
    font-weight: var(--fw-bold);
    line-height: var(--line-height-34);
}

.para2 {
    font-family: var(--secondary-font-family);
    font-size: var(--font-size-20);
    font-weight: var(--fw-bold);
    line-height: var(--line-height-26);
}

.para3 {
    font-family: var(--secondary-font-family);
    font-size: var(--font-size-16);
    line-height: var(--line-height-20);
    font-weight: 400;
}

.para4 {
    font-family: var(--secondary-font-family);
    font-size: var(--font-size-14);
    line-height: var(--line-height-16);
}

.para5 {
    font-family: var(--secondary-font-family);
    font-size: var(--font-size-16);
    line-height: var(--line-height-20);
}

.btn1 {
    font-size: var(--font-size-17);
    font-family: var(--secondary-font-family);
    line-height: var(--line-height-20);
    color: var(--color-black);
    font-weight: 600;
    text-decoration: none;
    transition: all .3s ease-in;
    background-color: var(--color-white);
    padding: 17px 45px!important;
    max-width: fit-content;
    width: 100%;
    transition: background-color 0.4s ease-in-out;
    display: inline-block;
    border-radius: 0!important;
    vertical-align: middle;
}

.btn1 svg {
    margin-left: 11px;
    vertical-align: baseline;

    display: inline-block;
    transition: transform 0.3s ease-out;
}

.btn1:hover {
    color: var(--color-black);
}

.btn1:hover svg {
    transform: translateX(4px);
}


.btn2 {
    font-size: var(--font-size-20);
    line-height: var(--line-height-26);
    color: var(--color-black);
    font-weight: bold;
    text-decoration: none;
    transition: all .3s ease-in;
    width: 100%;
    display: inline-block;
    vertical-align: middle;
}

.btn2 svg {
    margin-left: 9px;
    vertical-align: baseline;

    display: inline-block;
    transition: transform 0.3s ease-out;
}

.btn2:hover {
    color: var(--color-black);
}

.btn2:hover svg {
    transform: translateX(4px);
}

.btn2_small {
    font-size: var(--font-size-20);
    line-height: var(--line-height-26);
    color: var(--color-black);
    font-weight: bold;
    text-decoration: none;
    transition: all .3s ease-in;
    width: 100%;
    display: inline-block;
    vertical-align: middle;
}

.btn2_small svg {
    margin-left: 9px;
    vertical-align: baseline;

    display: inline-block;
    transition: transform 0.3s ease-out;
}

.btn2_small:hover {
    color: var(--color-black);
}

.btn2_small:hover svg {
    transform: translateX(4px);
}
.btn3_light{
    font-size: var(--font-size-17);
    line-height: var(--line-height-20);
    color: white!important;
    font-weight: bold;
    text-decoration: none;
    transition: all .3s ease-in;
    width: 100%;
    display: inline-block;
    vertical-align: middle;
}
.btn3_light svg {
    margin-left: 9px;
    display: inline-block;
    transition: transform 0.3s ease-out;
}
.btn3_light svg path{
    stroke: #fff;
}
.btn3_light:hover svg {
    transform: translateX(4px);
}
.darkBTn {
    background: var(--color-black);
    color: var(--color-white)!important;
}
.darkBTn:hover{
    background: var(--color-black);
    color: var(--color-white);
}
.darkBTn svg path {
    stroke: var(--color-white)
}

.smBTn {
    width: 57px!important;
    height: 57px!important;
    background: black!important;
}

.smBTn.slick-prev svg{
    transform: rotate(180deg);
}

.smBTn svg {
    transition: transform 0.3s ease-out;
}

.slick-prev:before,
.slick-next:before {
    display: none;
} 

.smBTn:hover{
    /*background: #006491!important;*/
}
/*.smBTn:hover svg{
    transform: translateX(4px);
}*/
a:visited {
    color: #000;
}
input.wpcf7-form-control{
    background: white;
}
.footer .input-button input.wpcf7-form-control{
    max-width: 162px;
}

@media only screen and (max-width: 1820px) {

	.bannerHeading {
	    font-size: var(--font-size-45);
	    line-height: var(--line-height-50);
	}
	.largeHead {
	    font-size: 92px;
	    line-height: 99px;
	}

	.head1 {
	    font-size: var(--font-size-45)!important;
	    line-height: var(--line-height-55)!important;
	}

	.head2 {
	    font-size: 41px!important;
	    line-height: 45px!important;
	}

	.head3 {
	    font-size: var(--font-size-30)!important;
	    line-height: 36px!important;
	}

	.head4 {
	    font-size: var(--font-size-22)!important;
	    line-height: var(--line-height-24)!important;
	}

	.head5 {
	    font-size: var(--font-size-18);
	    line-height: var(--line-height-20);
	}	
	.para1 {
	    font-size: 27px;
	    line-height: 31px;
	}
	.para2{
	    font-size: var(--font-size-18);
	    line-height: var(--line-height-20);
	}
	.para5 {
	    font-size: var(--font-size-14);
	    line-height: var(--line-height-16);
	}
}

@media only screen and (max-width: 1620px) {
	.bannerHeading {
	    font-size: 43px;
	    line-height: 47px;
	}
}


@media only screen and (max-width: 1480px) {

.bannerHeading {
    font-size: var(--font-size-38);
    line-height: var(--line-height-42);
}
   .largeHead {
    font-size: var(--font-size-80);
    line-height: var(--line-height-89);
}

.head1 {
    font-size: var(--font-size-40)!important;
    line-height: var(--line-height-50)!important;
}

.head2 {
    font-size: var(--font-size-38)!important;
    line-height: var(--line-height-48)!important;
}

.head3 {
    font-size: var(--font-size-25)!important;
    line-height: var(--line-height-32)!important;
}

.head4 {
    font-size: var(--font-size-20)!important;
    line-height: var(--line-height-26)!important;
}

.head5 {
    font-size: var(--font-size-17);
    line-height: var(--line-height-22);
}
.para1 {
    font-size: 25px;
    line-height: 26px;
}
.para2{
    font-size: var(--font-size-16);
    line-height: var(--line-height-22);
}
.para5 {
    font-size: var(--font-size-13);
    line-height: var(--line-height-15);
}

}

@media only screen and (max-width: 1280px) {
    .para1 {
        font-size: 20px;
        line-height: 23px;
    }
}
@media only screen and (max-width: 968px) {
.bannerHeading {
    font-size: var(--font-size-26);
    line-height: var(--line-height-30);
}
.largeHead {
    font-size: var(--font-size-60);
    line-height: var(--line-height-69);
}
.head1 {
    font-size: var(--font-size-24)!important;
    line-height: var(--line-height-26)!important;
}
.head2 {
    font-size: var(--font-size-25)!important;
    line-height: var(--line-height-30)!important;
}

.head4 {
    font-size: var(--font-size-15)!important;
    line-height: var(--line-height-17)!important;
}

.head5 {
    font-size: var(--font-size-14);
    line-height: var(--line-height-17);
}

.para1 {
    font-size: var(--font-size-16);
    line-height: var(--line-height-18);
}

.para2 {
    font-size: var(--font-size-14);
    line-height: var(--line-height-19);
}

.para3 {
    font-size: var(--font-size-12);
    line-height: var(--line-height-16);
}

.para5 {
    font-size: var(--font-size-14);
    line-height: var(--line-height-16);
}
.smBTn {
    width: 24px!important;
    height: 24px!important;
    background: black!important;
}
.btn1 {
    font-size: 11px;
    line-height: 12px;
    padding: 9px 21px!important;
}
.btn1 svg{
    width: 4px;
    height: 8px;
    margin-left: 9px;
}
.btn2_small {
    font-size: var(--font-size-12);
    line-height: var(--line-height-14);
}
.btn2_small svg {
    margin-left: 6px;
    vertical-align: middle;
    width: 9px;
    height: 9px;
}
header .menu-class li.menu-item .btn2 svg {
    width: 9px;
    height: 13px;
}
.btn2 {
    font-size: 12px;
    line-height: 15px;
}
.btn2 svg {
    margin-left: 6px;
    vertical-align: middle;
    width: 5px;
    height: 10px;
}
.btn3_light {
    font-size: 12px;
    line-height: 15px;
}
.btn3_light svg {
    margin-left: 6px;
    vertical-align: middle;
    width: 5px;
    height: 10px;
}

/*mobile view*/
@media only screen and (max-width: 570px) {
    .bannerHeading {
        font-size: var(--font-size-26);
        line-height: var(--line-height-30);
    }
   /* .head1 {
        font-size: var(--font-size-20)!important;
        line-height: var(--line-height-24)!important;
    }*/
   /*.head2 {
        font-size: var(--font-size-20)!important;
        line-height: var(--line-height-30)!important;
    }
    .head4 {
        font-size: var(--font-size-13)!important;
        line-height: var(--line-height-15)!important;
    }*/
    .featureProductSlider .btn2 {
        font-weight: bold;
    }
}