/*Font Inputs go here*/
@font-face {
       font-family: 'Graphik Regular';
       src: url('/media/im5fiuve/graphik-regular-web.ttf') format('truetype');
}

@font-face {
       font-family: 'Graphik Light';
       src: url('/media/4velqc4j/graphik-light-web.ttf') format('truetype');
}

@font-face {
       font-family: 'Graphik Bold';
       src: url('/media/ik4jhkme/graphik-semibold-web.ttf') format('truetype');
}


@font-face {
       font-family: 'Gotham Medium';
       src: url('/media/ud5byneq/gotham-medium.ttf') format('truetype');
}

@font-face {
       font-family: 'Gotham Book';
       src: url('/media/2lvnwcqk/gotham-book.ttf') format('truetype');
}

/* Mobile styles */
:root {
    --content-width: 100%;
    --footer-width: 100%;
    --header-width: 100%;
    --color-primary: #005a8a;
    --color-primary-hover: #005a8a;
    --color-secondary: #5a5a5a;
    --color-background: #eee;
    --tertiary-color: #fff;
    --text-on-dark-bg-color: #fff;
    --accent-color: #5a5a5a4f;
    --button-bg-color: #005a8a;
    --page-bg-color: #eee;
    --form-bg-color: #eee;
    --banner-bg-color: #eee;
    --header-bg-color: #eee;
    --footer-bg-color: #002957; 
    --accent-bg-color: #f6f6f6;
    --border-color: var(--tertiary-color);
    --cta-button: #005a8a;
    --cta-button-color: #fff;
    --button-hover-color: #005a8a;
    --button-background-color: #4d775e;
    --button-background-hover-color: #4d775e;
    --button-font-color: #000;
    --primary-font: 'Gotham Book', sans-serif;
    --secondary-font: 'Gotham Book', sans-serif;
    --header-font: 'Gotham Medium', sans-serif;
    --header-font-color: var(--color-primary);
    --body-font-color: #000;
    --footer-text-color: var(--tertiary-color);
    --footer-link-color: var(--color-primary);
    --banner-primary-font-color: #fff;
    --banner-secondary-font-color: var(--tertiary-color);
    --link-font-color: var(--color-primary);
    --bold-font-color: var(--color-primary);
    --button-font-color: var(--tertiary-color);
    --banner-primary-font-size: 32px;
    --banner-secondary-font-size: 18px;
    --large-header-font-size: 24px;
    --subheader-font-size: 18px;
    --paragraphHeader-font-size: 16px;
    --subsectionHeading-font-size: 16px;
    --body-font-size: 14px;
    --button-radius: 8px;
    --button-text-transform: capitalize;
    --form-radius: 30px;
    --field-radius: 6px;
    --nav-link-color: #000;
    --global-transition: all 0.3s ease;
    --default-text-alignment: justify;
     --primary-color: #1f4ed8;
      --text-color: #333;
      --background-color: #fff;
    
}


[x-cloak]{
    display: none!important;
}

.headerWrapper {
    width: var(--header-width);
    z-index: 2000;
    box-shadow: 0 -6px 10px 5px rgba(0,0,0,0.5);
}

.contentWrapper {
    width: var(--content-width);
    margin: 0 auto;
}

.country-form{
    width: 100%;
    margin: 0 auto;
}

#menubutton{
 top: 30px;
    right: 20px
}

.footerWrapper {
    width: var(--footer-width);
}
.footerWrapper p{
    color: var(--footer-text-color);
}
.footerWrapper a{
    color: var(--footer-link-color);
}

.profileIcon{
    width: 50px;
    fill: #000;
}

.profileBtn{
    transition: all 0.3s ease;
}

.profileBtn:focus, .profileBtn:hover{
  outline: none;
  --tw-ring-color: #e60000;
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: white;
  box-shadow:
    0 0 0 2px var(--tw-ring-offset-color),
    0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);

}

a{
    transition: all 0.3s ease;
    color: var(--link-font-color);
    font-size: var(--body-font-size);
}
a:hover{
    opacity: 0.8;
    text-decoration: underline;
}

.label{
        font-family: var(--primary-font);
    font-weight: normal;
    font-size: var(--body-font-size);
    width: 100%;
    color: var(--body-font-color);
    display: inline-block;
    margin-bottom: .5rem;
}
.select, .input{
    
        border: 0px solid #bbb !important;
    background-color: #f7f7f7 !important;
    padding: 16px !important;
    font-size: var(--body-font-size);
    min-width: 72%;
    margin-bottom: 20px !important;
}

.formCheckbox{
   border: 0px solid #bbb !important;
    background-color: var(--button-bg-color) !important;
    padding: 0px !important;
    font-size: var(--body-font-size);
    min-width: 0px !important;
    margin: 0 0 30 0 !important;
}

.form-btn{
    background: var(--button-bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--button-radius);
    text-transform: var(--button-text-transform);
    color: var(--button-font-color);
    font-family: var(--secondary-font);
    cursor: pointer;
    text-decoration: none;
}

.error{
    color: Red;
    display: block;
}
.correct{
    color: green;
    display: block;
}

.headerWrapper, .header {
    background: var(--header-bg-color);
}


.largeHeading{
    font-size: var(--large-header-font-size);
}
.subheading p, .subHeading{
    font-size: var(--subheader-font-size);
}

.heroInner .largeHeading, .heroInner .subheading p {
    color: var(--banner-primary-font-color);
}


dl, ol, ul {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    padding: 0px 20px 0px 20px;
}
li{
    list-style-type: circle;
}


.navigation {
    padding-right: 20px;
}

.nav-item {
    color: var(--nav-link-color);
    font-size: 14px;
    font-family: var(--primary-font);
}
.nav-item:hover{
    text-decoration: none;
}
.active{
    color: var(--color-primary);
}


 .video-container {
 width: 100%; 
 max-width: 100%;
 }
 .video-container video {
     width: 100%;
    height: 100%; 
}

 .hoverUnderline{
     background: var(--color-secondary);
 }
 
 .splitHeroWrapper {
     border-top: 1px solid var(--accent-color);
 }
 .splitHero{
          margin-top: 1rem;
          padding-bottom: 1rem;

 }

 .splitMedia{
     padding: 0 0.8rem;
 }
 
 .splitText{
     padding: 0 0.8rem;
 }

.ctaButton .btn-global, .btn-global{
    background: var(--button-bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--button-radius);
    text-transform: var(--button-text-transform);
    color: var(--button-font-color);
    font-family: var(--secondary-font);
    cursor: pointer;
    text-decoration: none;
    padding-block: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 5);
    /*font-weight: 600;*/
    margin-bottom: 3px;
}

.btn-global {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.25rem;
    font-size: var(--body-font-size);
    font-family: var(--primary-font);
    background-color: var(--button-bg-color);
    color: var(--button-font-color);
    border-radius: var(--button-radius);
    transition: var(--global-transition);
    text-decoration: none;
}

.btn-icon{
    color: #fff;
}
.btn-global:hover{
    text-decoration:none!important;
      opacity: 0.9;
}

.ctaButton .btn-global{
    border-radius: 25px;
    margin: 0!important;
}

.btn-global span {
    color: var(--button-font-color);
}
.ctaButton .btn-global:hover{
    opacity: 0.8;
    transition: var(--global-transition);

}
.carousel-slide {
    width: 100%;
    flex-shrink: 0;
    position: relative;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
}

.carousel-content {
    position: relative;
    z-index: 10;
    color: white;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
}

.carousel-content--left {
    align-items: flex-start;
    text-align: left;
}

.carousel-content--center {
    align-items: center;
    text-align: center;
}

.carousel-content--right {
    align-items: flex-end;
    text-align: right;
}

.carousel-title {
    font-size: 1.5rem;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
         color:  var(--text-on-dark-bg-color);
}

.carousel-desc {
    font-size: 1rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
     color:  var(--text-on-dark-bg-color);
}


.carousel-button {
    display: inline-block;
    margin-top: 1rem;
    background-color: var(--button-bg-color);
     background: var(--button-bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--button-radius);
    text-transform: var(--button-text-transform);
    color: var(--button-font-color);
    font-family: var(--secondary-font);
}

.carousel-link:hover {
    background-color: #f1f1f1;
}



/*ICONS*/

.iconHeader {
    margin-bottom: 10px;
}

/*TABS*/
.tabs-wrapper {
    margin-bottom: 2rem;
}

.tabs-headers {
    display: flex;
    position: relative;
    overflow-x: hidden;
    border-bottom: 1px solid #ddd;
}

.tablinks {
    background: none;
    border: none;
    padding: 10px 8px;
    cursor: pointer;
    font-size: 10px;
    white-space: nowrap;
    position: relative;
    font-family: var(--header-font, sans-serif);
    color: var(--header-font-color, #333);
    transition: color 0.3s ease;
}

.tablinks:hover,
.tablinks.activeTab {
    color: var(--button-hover-color, #c02aff);
}

.activeTab-bar {
    position: absolute;
    bottom: 0;
    height: 4px;
    background-color: var(--button-hover-color, #c02aff);
    transition: left 0.3s ease, width 0.3s ease;
}

.tab-container {
    margin-top: 1rem;
}

.tabItem {
    padding: 20px 0;
    animation: fadeEffect 0.4s ease-in-out;
}

@keyframes fadeEffect {
    from { opacity: 0; transform: scale(0.97); }
    to { opacity: 1; transform: scale(1); }
}

.card{
    background: linear-gradient(to right, #820000, #e60000);
    text-align: center;
    transition: transform 0.3s ease-in-out, background 0.3s ease-in-out;
}
.card-title{
        color: var(--text-on-dark-bg-color);
        font-weight: 300;
        font-family: var(--secondary-font);
        font-size: 2.1rem;

}
.card-text{
        color: var(--text-on-dark-bg-color);
font-weight: 300;
    font-size: var(--body-font-size);
    text-transform: uppercase;
            font-family: var(--secondary-font);
}

.cardHover{
        transition: transform 0.3s ease-in-out, background 0.3s ease-in-out;
opacity: 1 !important;
text-decoration: none!important;
}

.cardHover:hover .card{
animation: moveUp 0.3s ease-in-out forwards;

}


@keyframes moveUp {
 to {
transform: translateY(-10px);
 }
}



.bannerBackground {
    background: #000;
}

.bpHeading {
    font-size: var(--banner-primary-font-size);
    color: var(--banner-primary-font-color);
}

.bsHeading, .bsHeading p, .bsHeading span, .bsHeading i {
    font-size: var(--banner-secondary-font-size);
    color: var(--banner-secondary-font-color);
}

.bsHeading b, .bsHeading strong{
    color: #fff;
}



h1, h2, h3, h4, h5, h6 {
    font-family: var(--header-font);
    font-weight: bold;
    color: var(--header-font-color);
    margin: 1em 0 0.5em 0;
}

h1 {
    font-size: var(--large-header-font-size);
    margin: 0;
    padding-bottom: 10px;
}

h2 {
    font-size: var(--subheader-font-size);
    margin: 0;
    padding-bottom: 10px;
}

h3 {
    font-size: var(--subheader-font-size);
    margin: 0;
}

h4 {
    font-size: var(--paragraphHeader-font-size);
    margin: 0;
    padding-bottom: 5px;
}

h5, h6 {
    font-size: var(--subsectionHeading-font-size);
    margin: 0;
}

b, strong {
    color: var(--bold-font-color);
}

p, span, i {
    color: var(--body-font-color);
    font-size: var(--body-font-size);
    font-family: var(--primary-font);
    text-align: var(--default-text-alignment);
}
p{
    margin: 10px 0px;
}

  .logo {
        width: 200px;
    }


/***Tables ***/
.tablestyle { width:100%; margin: 0 0 1em 0 }
.tablestyle th { background: var(--color-primary); font-family: var(--primary-font); font-weight: normal; color:#FFF; padding:10px; text-align:left; }
.tablestyle td { padding:10px; border-bottom:1px solid #2b0033; }

.confirmation { padding:20px 0; }
.confirmation table { width: 80%; }
.confirmation table td { border-bottom:1px solid #DDDDDD; padding:5px; }
.confirmation td.label { font-family: var(--primary-font); font-weight: normal; width: 50%; vertical-align: top; }

th.left, td.left { text-align: left; }
th.right, td.right { text-align: right; }


.transparent{
    background: transparent;
    background-color: transparent;
}



/* Tablet styles */
@media (min-width: 768px) {
    :root {
        --content-width: 90%;
        --banner-primary-font-size: 48px;
        --banner-secondary-font-size: 24px;
        --large-header-font-size: 28px;
        --subheader-font-size: 22px;
        --paragraphHeader-font-size: 18px;
        --subsectionHeading-font-size: 18px;
    }
    
    .largeHeading{
    font-size: var(--large-header-font-size);
}
.subheading p, .subHeading{
    font-size: var(--subheader-font-size);
}

    .logo {
        width: 200px;
    }

    .navigation {
        padding-right: 40px;
    }
}

/* Desktop styles */
@media (min-width: 1024px) {
    :root {
        --content-width: 60%;
        --banner-primary-font-size: 66px;
        --banner-secondary-font-size: 32px;
        --large-header-font-size: 42px;
        --subheader-font-size: 28px;
        --paragraphHeader-font-size: 18px;
        --subsectionHeading-font-size: 18px;
        --body-font-size: 16px;
        --default-text-alignment: left;
    }
    
    .tablinks{
        padding: 10px 20px;
        font-size: var(--body-font-size);
    }
    .error{
        display: inline;
    }
    
    .label{
    width: 40%;
}

.select, .input{
    min-width: 30%;
}

.country-form{
    width: 80%;
    margin: 0 auto;
}
    
    .headerInner{
            min-height: 90px;
}
    
    .largeHeading{
    font-size: var(--large-header-font-size);
}
.subheading p, .subHeading{
    font-size: var(--subheader-font-size);
}
    
    .card-title{
        font-size: 3.25rem;
    }

    .logo {
        width: 250px;
    }

    .navigation {
        padding-right: 80px;
    }
    .nav-item{
        font-size: 14px;
    }
    
    .carousel-content{
        padding: 5rem;
    }
    
    .carousel-title {
    font-size: 2.5rem;
    }

    .carousel-desc {
            1.5rem;
    }
    
    .tablinks {
    margin-right: 40px;
    font-size: 20px;
}

}