/****** Font Declaration Start ******/
@font-face {
    font-family: "TradeGothicNextSRPro-HvCn";
    src: url("../fonts/font.woff2") format("woff2"),
      url("../fonts/font.woff") format("woff");
    font-display: swap;
  }
/****** Font Declaration End ******/

/****** Reset Styles Start ******/
*,
*::before,
*::after { box-sizing:border-box; }
a { text-decoration:none; color:inherit; cursor:pointer; }
button { background-color:transparent; color:inherit; border-width:0; padding:0; cursor:pointer; }
figure{ margin:0; }
ul,
ol,
dd{
    margin-bottom: 16px;
    margin-left: 16px;
    padding: 0px;
}
li{margin-bottom: 4px;}
h1,
h2,
h3,
h4,
h5,
h6 {
    margin:0;
    font-size:inherit;
    font-weight:400;
    margin-bottom:16px;
}
p{ margin:0; }
cite { font-style:normal; }
fieldset { border-width:0; padding:0; margin:0; }
/****** Reset Styles End ******/

/****** Global Root Variable Declaration Start ******/
:root {
    --primary-font-family: "TradeGothicNextSRPro-HvCn", "Signika", "SF Pro Rounded Bold", "SF Pro Display Bold", "Univers Condensed Bold", "Roboto (Bold 700)", sans-serif;
    --secondary-font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",Helvetica, Arial, sans-serif;

    --normal-font-size: 16px;
    --normal-line-height: 18px;
    --heading-font-size-d: 40px;
    --heading-line-height-d: 40px;
    --heading-font-size: 28px;
    --heading-line-height: 28px;

    --heading2-font-size-d: 40px;
    --heading2-line-height-d: 40px;
    --heading2-font-size: 28px;
    --heading2-line-height: 28px;

    --heading3-font-size-d: 32px;
    --heading3-line-height-d: 36px;
    --heading3-font-size: 28px;
    --heading3-line-height: 28px;

    --heading4-font-size-d: 26px;
    --heading4-line-height-d: 30px;
    --heading4-font-size: 26px;
    --heading4-line-height: 30px;

    --tagline-font-size-d: 26px;
    --tagline-line-height-d: 26px;
    --tagline-font-size: 20px;
    --tagline-line-height: 20px;

    --link-font-size: 16px;
    --link-line-height: 18px;
    --cta-btn-font-size: 16px;
    --cta-btn-line-height:1.125;
    --cta-link-font-size: 14px;
    --cta-link-line-height: 14px;
    --cta-border-radius: 8px;

    --breadcrumb-font-size: 14px;
    --breadcrumb-line-height: 17px;

    --menu-font-size: 16px;
    --menu-line-height: 16px;

    --menudrop-font-size: 14px;
    --menudrop-line-height: 12px;

    --benefit-list-font-size: 16px;
    --benefit-list-line-height: 16px;
    --benefit-list-font-size-d: 20px;
    --benefit-list-line-height-d: 20px;

    --label-font-size: 14px;
    --label-line-height: 16px;

    --text-underline: underline;
    --text-underline-none: none;
    --text-line-through: line-through;
    --text-uppercase: uppercase;
    --text-bold: bold;

    --center: center;
    --left: left;
    --right: right;

    --disable-opacity: 80%;
    --image-border-radius: 16px;
    --image-overlay: 65%;
    --feature-image-border-radius: 8px;
    --feature-image-overlay: 15%;
}
/****** Global Root Variable Declaration End ******/

/****** Common Tag Styles Start ******/
body{
    font-family: var(--secondary-font-family);
    font-size: var(--normal-font-size);
    line-height: 1.25;
    background-color: var(--grey-background-color);
    max-width: 1440px;
    margin: 0 auto;
    padding: 16px;
}

p{
    margin-bottom: 16px;
    color: var(--black-color);
}

h1{
    font-family: var(--primary-font-family) ;
    font-size: var(--heading-font-size);
    line-height: var(--heading-line-height) ;
}
h2{
    font-family: var(--primary-font-family) ;
    font-size: var(--heading2-font-size);
    line-height: var(--heading2-line-height) ;
}
h3{
    font-family: var(--primary-font-family) ;
    font-size: var(--heading3-font-size);
    line-height: var(--heading3-line-height) ;
}
h4{
    font-family: var(--primary-font-family) ;
    font-size: var(--heading4-font-size);
    line-height: var(--heading4-line-height) ;
}
/****** Common Tag Styles End ******/

/****** Button Style Start ******/
.btn{
    font-family: var(--secondary-font-family) ;
    font-size: var(--cta-btn-font-size);
    line-height: var(--cta-btn-line-height) ;
    border-radius: var(--cta-border-radius);
    font-weight: 700;
    text-decoration: var(--text-underline-none);
    padding: 8px 16px;
    display: inline-block;
    border: 1px solid var(--transparent-color);
    margin-bottom: 8px;
    white-space: normal;
    text-align: initial;
}
.default-btn:hover,
.default-btn:focus,
.secondary-btn:hover,
.secondary-btn:focus{
    background-color: var(--secondary-color);
    color: var(--white-color);
    border: 1px solid var(--transparent-color)
}
.default-btn:disabled,
.default-reverse-btn:disabled,
.default-btn.disabled,
.default-reverse-btn.disabled,
.secondary-btn.disabled,
.secondary-btn.disabled{
    background-color: var(--black-color);
    color: var(--white-color);
    border: 1px solid var(--transparent-color);
    opacity: 1;
}
.default-btn{
    background-color: var(--primary-color);
    color: var(--white-color);
}
.default-reverse-btn{
    background-color: var(--white-color);
    color: var(--primary-color);
}
.default-reverse-btn:hover,
.default-reverse-btn:focus,
.secondary-reverse-btn:hover,
.secondary-reverse-btn:focus {
  background-color: rgb(255 255 255 / 80%);
  color: var(--primary-color);
  border: 1px solid var(--transparent-color);
}
.default-reverse-btn:hover,
.secondary-reverse-btn:hover{
  opacity: 0.8;
}
.secondary-btn{
    background-color: var(--transparent-color);
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}
.secondary-reverse-btn{
    background-color: var(--transparent-color);
    color: var(--white-color);
    border: 1px solid var(--white-color);
}
.secondary-btn.external-btn{
    margin-right: 8px;
    padding: 0;
}
.secondary-btn.external-btn a{
    text-decoration: none;
    padding: 8px 16px;
    display: inline-block;
}
.secondary-btn.external-btn a:hover{
    color: var(--white-color);
}
.secondary-btn.external-btn a:focus{
    color: var(--white-color);
    background-color: var(--secondary-color);
    border-radius: 8px;
}
/****** Button Style End ******/


/****** Link Text Style Start ******/
a{
    font-family: var(--secondary-font-family);
    font-size: var(--normal-font-size);
    line-height: var(--normal-line-height);
    text-decoration: var(--text-underline);
}
a:hover{
    text-decoration: var(--text-underline-none);
}
a:focus,
.btn:focus{
    outline: 2px solid var(--black-color);
    outline-offset: 0px;
}
.default-link{
    color: var(--primary-color);
}
.default-link:disabled{
    color: var(--black-color);
    text-decoration: var(--text-line-through);
}
.default-link:hover{
    color: var(--secondary-color);
    text-decoration: var(--text-underline-none);
   }
.default-link:focus{
    background-color: var(--secondary-color);
    color: var(--white-color);
    border-bottom: 2px solid var(--black-color);
}
.reverse-link{
    color: var(--white-color);
}
.reverse-link:hover{
    color: var(--white-color);
    text-decoration: var(--text-underline-none);
}
.reverse-link:focus{
    background-color: var(--white-color);
    color: var(--primary-color);
    border-bottom: 2px solid var(--black-color);
}
.reverse-link:disabled{
    color: var(--white-color);
    text-decoration: var(--text-line-through);
}
/****** Link Text Style End ******/


/****** Desktop Styles start ******/
@media screen and (min-width: 992px){
    h1{
        font-size: var(--heading-font-size-d);
        line-height: var(--heading-line-height-d) ;
    }
    h2{
        font-size: var(--heading2-font-size-d);
        line-height: var(--heading2-line-height-d) ;
    }
    h3{
        font-size: var(--heading3-font-size-d);
        line-height: var(--heading3-line-height-d) ;
    }
    h4{
        font-size: var(--heading4-font-size-d);
        line-height: var(--heading4-line-height-d) ;
    }
}
/****** Desktop Styles end ******/