@charset "utf-8";
/* CSS Document */
.loader {
    width: 48px;
    height: 48px;
    border: 5px solid #FFF;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    }

    @keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
    }
    .anc{ /* This class was used for JS-generated buttons, may no longer be needed if buttons are static HTML */
        width: 48.5%;
    }
/*--------RESET-CSS--------*/
body {
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    padding:0;
    background:#fff;
    color:#000000;
    text-align:center;
    font-family: 'Fira Sans', sans-serif; /* Added sans-serif fallback */
    font-weight:400;
    }
div, ul, h1, h2, h3, h4, h5, li, p, img, form, input, textarea {margin: 0; padding: 0;}
header, section, footer, aside, nav, main, article, figure {display: block;}
table, tr, td {border: 0;}
a {outline: none; color: inherit; text-decoration: none;}
img {border: none; height:auto; max-width: 100%;} /* Added max-width for responsive images */
li {list-style: none;}
* {box-sizing: border-box;}
.img-full {max-width: 100%;}
.clearall {
    clear: both;
    font-size: 1px;
    line-height: 1px;
    height: 1px;
    }
.wrapper{
    overflow:hidden; /* Consider if this is needed globally, can cause issues with sticky/fixed elements */
    }
/*--------fonts--------*/
/* Ensure these @font-face rules match the actual font files you are hosting or linking */
@font-face {
    font-family: 'Fira Sans';
    src: url('https://mybestplan.site/gg57-qs-display/css/FiraSans-BoldItalic.woff2') format('woff2'),
    url('https://mybestplan.site/gg57-qs-display/css/FiraSans-BoldItalic.woff') format('woff');
    font-weight: bold; /* Corresponds to 700 typically */
    font-style: italic;
    font-display: swap;
    }
@font-face {
    font-family: 'Fira Sans';
    src: url('https://mybestplan.site/gg57-qs-display/css/FiraSans-ExtraBold.woff2') format('woff2'),
    url('https://mybestplan.site/gg57-qs-display/css/FiraSans-ExtraBold.woff') format('woff');
    font-weight: 800; /* Explicitly set weight */
    font-style: normal;
    font-display: swap;
    }
@font-face {
    font-family: 'Fira Sans';
    src: url('https://mybestplan.site/gg57-qs-display/css/FiraSans-Medium.woff2') format('woff2'),
    url('https://mybestplan.site/gg57-qs-display/css/FiraSans-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    }
@font-face {
    font-family: 'Fira Sans';
    src: url('https://mybestplan.site/gg57-qs-display/css/FiraSans-Bold.woff2') format('woff2'),
    url('https://mybestplan.site/gg57-qs-display/css/FiraSans-Bold.woff') format('woff');
    font-weight: 700; /* Explicitly set weight */
    font-style: normal;
    font-display: swap;
    }
@font-face {
    font-family: 'Fira Sans';
    src: url('https://mybestplan.site/gg57-qs-display/css/FiraSans-MediumItalic.woff2') format('woff2'),
    url('https://mybestplan.site/gg57-qs-display/css/FiraSans-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
    }
@font-face {
    font-family: 'Fira Sans';
    src: url('https://mybestplan.site/gg57-qs-display/css/FiraSans-Regular.woff2') format('woff2'),
    url('https://mybestplan.site/gg57-qs-display/css/FiraSans-Regular.woff') format('woff');
    font-weight: 400; /* Explicitly set weight */
    font-style: normal;
    font-display: swap;
    }

/*--------MAIN-CSS--------*/
.container {
    width:1170px;
    margin:0 auto;
    padding:0 15px; /* Added horizontal padding for consistent spacing */
    position:relative;
    box-sizing: border-box; /* Ensure padding doesn't add to width */
    }

/*--------TOP-STRIP--------*/
.top_strip{
    float:left; /* Consider removing floats if not needed for layout */
    width:100%;
    padding:7px 0 5px;
    background:#fcf0c8;
    }
.top__strip_text{
    /* float:left; */ /* Text will center by default in parent if body is text-align:center */
    width:100%;
    color:#000;
    font-size:18px;
    line-height:1.3; /* Adjusted from 24px */
    font-weight:400;
    letter-spacing:0.5px;
    text-align: center; /* Explicitly center */
    }
.top__strip_text img{
    display:inline-block;
    vertical-align:middle;
    width:120px;
    /* max-width:100%; */ /* Already handled by global img style */
    margin:-4px 0 0 5px;
    }

/*--------BANNER--------*/
.banner{
    float:left; /* Consider removing floats */
    width:100%;
    background:#0a609c;
    position:relative;
    padding: 0 0 20px 0; /* Add bottom padding to contain elements if :before is removed or adjusted */
    }
/* The :before element creates a darker strip at the bottom.
   If the banner__img is meant to overlap it, this is fine.
   If not, it might be simpler to create an actual div for that strip. */
.banner:before{
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height:117px;
    background:#0a558f;
    z-index: 0; /* Ensure it's behind content */
    }
.banner__left{
    float:left; /* Consider flexbox for layout instead of floats */
    width:100%;
    padding:40px 0 20px; /* Adjusted padding */
    text-align:center;
    position:relative;
    z-index:1;
    }
.banner__heading{
    /* float:left; */ /* Will be centered by .banner__left text-align:center */
    width:100%;
    color:#fff;
    font-size:52px; /* Adjusted desktop size */
    line-height:1.15;
    font-weight:800; /* Using ExtraBold */
    letter-spacing: -0.5px;
    margin-bottom: 10px; /* Space between multiple p.banner__heading */
}
.banner__heading hr {
    border: none;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.4); /* Slightly more visible */
    margin: 8px auto 15px auto; /* Spacing around the line */
    width: 70%;
}

.banner__text1{
    /* float:left; */
    width:100%;
    margin-top:15px;
    color:#fff;
    font-size:20px;
    line-height:1.4;
    font-weight:500;
    letter-spacing:0.3px;
    }
.banner__text1 em{
    font-weight: 700; /* Bolder "America" */
    font-style: italic; /* Keep italic if desired */
}

.banner__box_bottom{
    display:inline-block; /* This makes max-width effective for centering */
    vertical-align:top;
    width:100%;
    max-width:600px; /* Adjusted for better button layout */
    background:#fff;
    margin-top:25px;
    text-align:center;
    border-radius:12px;
    padding:20px 15px 25px;
    }
.banner__box_bottom h1{ /* "Are You Currently Insured?" */
    /* float:left; */
    width:100%;
    font-size:24px; /* Adjusted desktop size */
    line-height:1.3;
    font-weight:700;
    letter-spacing:0.3px;
    margin-bottom:15px;
    color: #333333; /* Ensure good contrast */
    }
.banner__button_box {
    /* float: left; */ /* Not needed with flex */
    width: 100%;
    display: flex;
    flex-wrap: wrap; /* Allow wrapping if needed, though space-between might be enough */
    justify-content: space-around; /* Or space-between if you prefer them at edges */
    gap: 10px; /* Adds space between buttons if they wrap or are side-by-side */
}

.banner__button {
    display: inline-block; /* Or flex: 1; if you want them to take equal space when side-by-side */
    /* width: 48.5%; */ /* Let flexbox handle sizing or set explicit width if always side-by-side */
    flex-basis: calc(50% - 10px); /* Example for two buttons with a gap */
    min-width: 120px; /* Ensure buttons don't get too small */
    height: auto; /* Let padding define height */
    outline: none;
    border: 2px solid #0f75bc; /* Slightly thicker border */
    border-radius: 6px;
    background: #fff;
    font-family: 'Fira Sans', sans-serif;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 800; /* ExtraBold */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s linear;
    cursor: pointer;
    text-decoration: none;
    color: #0a609c; /* Text color to match banner */
    padding: 15px 10px; /* Adjusted padding */
    box-sizing: border-box;
}

.banner__button:hover {
    border-color: #10b118; /* Change border color on hover too */
    background: #10b118;
    color: #fff;
}
.banner__secure{
    /* float:left; */
    width:100%;
    margin-top:20px;
    color:rgba(255,255,255,0.9);
    font-size:15px;
    line-height:1.6;
    font-weight:400;
    }
.banner__secure img{
    display:inline-block;
    vertical-align:middle;
    margin:-4px 6px 0 0;
    width:12px;
    }
.banner__img {
    /* float:left; */ /* Not needed if .banner is flex or if this is last element */
    width:100%;
    margin-top: 20px; /* Add space if it's below text and buttons */
    position: relative; /* If it's meant to interact with the :before pseudo-element */
    z-index: 1;
    }
.banner__img img{
    display:block;
    margin:0 auto;
    /* width:720px; */ /* Max-width is 100%, this can be removed */
    /* max-width:100%; */ /* Global style handles this */
    }

/*--------FEATURED-SECTION--------*/
.featured__section{
    float:left;
    width:100%;
    padding:25px 0 25px;
    background:#eff8ff;
    }
.featured__icon{
    /* float:left; */ /* Flex handles this */
    width:100%;
    display:flex;
    justify-content:center;
    flex-wrap: wrap; /* Allow wrapping on smaller screens if needed */
    gap: 15px; /* Spacing between items */
    }
.featured__icon li{
    /* width:30%; */ /* Flex basis will handle this better */
    flex-basis: auto; /* Adjust as needed, or let content define width up to a point */
    padding:0 20px; /* Reduced horizontal padding */
    border-right:1px solid #cccccc;
    text-align: center; /* Center content within li */
    }
.featured__icon li:last-child{ border-right:none;}
.featured__icon li img{
    display:block;
    margin:0 auto; /* Center image */
    /* max-width:100%; */ /* Global */
    width:auto; /* Let height control it, or set specific width */
    height:36px;
    }
.featured__icon li p{
    color:#333;
    font-size:16px;
    line-height:1.4;
    font-weight:400;
    letter-spacing:0.3px;
    margin-top:8px;
    }
/*====quote_sec1====*/
.quote_sec1{
    float:left;
    width:100%;
    padding:60px 0;
    }
.common_heading{
    float:left;
    width:100%;
    font-size:36px;
    line-height:44px;
    color:#000;
    font-weight:800;
    letter-spacing:0.5px;
    }
.quote_s1_chart_box{
    display:inline-block;
    vertical-align:middle;
    width:100%;
    max-width:630px;
    margin-top:50px;
    border:3px solid #eef8fb;
    border-radius:10px;
    overflow:hidden;
    }
.quote_s1_chart_box table{
    float:left;
    width:100%;
    border:none;
    position:relative;
    border-collapse: collapse; /* Added */
    }
.quote_s1_chart_box table tr td{
    color:#000000;
    font-size:17px;
    line-height:25px;
    text-align:center;
    border:none; /* Will be overridden by specific borders if any */
    padding:18px 5px; /* Added horizontal padding */
    letter-spacing:0.3px;
    width:22.5%;
    }
.quote_s1_chart_box table tr:nth-child(even){ background:#f7f7f7;}

.quote_s1_chart_box table tr td:first-child{
    width:32.5%;
    padding:14px 10px 15px 20px; /* Adjusted padding */
    text-align:left;
    font-weight:600;
    }

.quote_s1_chart_box table tr th{
    font-weight:600;
    color:#fff;
    padding:14px 5px; /* Added horizontal padding */
    text-align:center;
    font-size:18px;
    line-height:26px;
    background:#1973b7;
    width:22.5%;
    }
.quote_s1_chart_box table tr th:first-child{
    width:32.5%;
    padding:14px 10px 14px 20px; /* Adjusted padding */
    text-align:left; /* Align header with its column content */
    /* font-weight:600; */ /* Already set */
    }
.quote_health_btn{
    display:inline-block;
    vertical-align:middle;
    background:#0cc34d;
    width:100%;
    max-width:425px;
    height:64px;
    border-radius:50px;
    border:1px solid #31d48c;
    box-shadow:0 6px 10px 1px rgba(27,210,129,0.4);
    margin-top:40px;
    font-size:20px;
    line-height:61px; /* Ensure text is centered */
    color:#fff;
    letter-spacing:0.5px;
    font-weight:bold; /* Already bold */
    }
.table-height{
    float:left;
    width:100%;
    height: 366px;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    }
.table-height::-webkit-scrollbar{
    display: none;
    }
.quote_s1_chart_box table tr td.bold{ font-weight:bold; position:relative;}
.blur{
    filter: blur(7px);
    -webkit-filter: blur(7px);
    }

/*====quote_sec2====*/
.quote_sec2{
    float:left;
    width:100%;
    padding:60px 0;
    background:#eef8fb;
    }
.s2_text{
    float:left;
    width:100%;
    font-size:18px;
    line-height:26px;
    letter-spacing:0.5px;
    color:#000;
    font-weight:normal; /* Explicitly normal */
    margin-top:25px;
    }
.testi_row{
    float:left; /* Consider flexbox */
    width:100%;
    margin-top:40px;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    gap: 20px; /* Spacing for wrapped items */
    }
.testi_col{
    width:32%; /* This will create issues with gap if sum > 100%. Let flex-basis handle it. */
    flex-basis: calc(33.333% - 15px); /* Example for 3 columns with gap */
    min-width: 280px; /* Prevent excessive shrinking */
    padding:20px 25px;
    border-radius:10px;
    text-align:left;
    background:#fff;
    border:1px solid #1973b7;
    }
.star{ float:left;} /* Ensure this is styled or replaced if not actual stars */
.testi_col .s2_text{ /* This reuses .s2_text, ensure it's intended */
    margin-top:10px;
    width: 100%; /* Override float if parent is flex */
    float: none;
    }
.testi_name_box{
    /* float:left; */ /* Not needed if parent is flex */
    width:100%;
    position:relative; /* For t-img */
    padding:10px 0 10px 70px; /* Removed horizontal padding from text part */
    margin-top:20px;
    text-align:left;
    display: flex; /* For better alignment of name/title */
    flex-direction: column;
    justify-content: center;
    min-height: 60px; /* To match t-img height */
    }
.t-img{
    position:absolute;
    left:0;
    top:50%;
    width:60px;
    height: 60px; /* Ensure it's a circle */
    margin-top:-30px;
    border-radius:50%;
    overflow: hidden; /* If image isn't perfectly square */
    }
.t-img img { /* Ensure image fills the circle */
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.t-name{
    /* float:left; */
    width:100%;
    font-size:18px;
    line-height:1.3; /* Adjusted from 26px */
    color:#000;
    font-weight:800;
    }
.t-name span{ /* Verified stamp */
    /* float:left; */ /* Not needed */
    width:100%;
    font-size:12px;
    line-height:1.3; /* Adjusted from 16px */
    color:#0fa343;
    font-weight:400; /* Explicitly normal */
    margin-top:5px
    }
.t-chk{ /* Checkmark image */
    display:inline-block;
    vertical-align:middle;
    margin:-2px 5px 0 0;
    }
/*===footer====*/
.footer{ /* This class is not used in your HTML, .site-footer is */
    float:left;
    width:100%;
    padding:40px 0;
    background:#fff;
    }
.footer-text{ /* This class is not used in your HTML */
    float:left;
    width:100%;
    font-size:13px;
    line-height:22px;
    letter-spacing:0.3px;
    color:#191919;
    font-weight:normal;
    margin:15px 0;
    }
.uptext{ text-transform:uppercase; font-weight:600;}

.showTab, .showMob{ display:none;} /* These control visibility based on screen size */
.showDesk{ display:block;}
.hideDesk{ display:none;}


/*--------Media-Querry--------*/

@media only screen and (max-width:1200px){
.container{width:1004px; padding: 0 15px;} /* Added padding */

.banner__left{ padding:30px 0 15px;} /* Adjusted */
.banner__heading {font-size: 46px; line-height: 1.15;} /* Adjusted */

.featured__icon li { /* width: 32%; */ padding: 0 30px;} /* Adjusted padding */
}

@media only screen and (max-width:1023px){
.container{width:100%; max-width: 750px; padding:0 15px;} /* Allow it to shrink */

.showDesk{display: none;}
.showTab{display: block;} /* This will show elements with class .showTab */

.banner:before{ height:100px;} /* Adjusted */
.banner__heading { font-size: 40px; line-height: 1.2;}
.banner__box_bottom{ margin-top:20px; width:90%; max-width: 550px;} /* Added max-width */
.banner__box_bottom h1 { font-size: 22px; line-height: 1.3;}
/* .banner__img { top:120px;} */ /* Removing fixed positioning unless absolutely necessary */
.banner__img img {width: 100%; max-width: 500px;} /* Ensure it scales but doesn't get overly large */
.banner__text1 { font-size: 18px; }


.featured__section { padding: 20px 0 20px;}
.featured__icon{ justify-content: space-around; } /* Better distribution */
.featured__icon li { width: auto; flex-grow: 1; max-width: 30%; padding: 0 10px;} /* Allow flex items to grow but not excessively */
.featured__icon li img{ height:30px;}
.featured__icon li p{ font-size:15px; line-height:1.3; letter-spacing:0;}

.quote_sec1{ padding:40px 0;}
.common_heading{ font-size: 30px; line-height: 1.3; } /* Adjusted */
.quote_s1_chart_box{ margin-top:30px;}

.quote_sec2{ padding:40px 0;}
.s2_text{ margin-top:15px; font-size: 17px; line-height: 1.5; } /* Adjusted */
.testi_row{ margin-top:30px; gap: 15px;}
.testi_col { padding: 20px 15px; flex-basis: calc(50% - 10px); min-width: 260px; } /* Aim for 2 columns */
}

@media only screen and (max-width:767px){
.container{width:100%; padding:0 15px; box-sizing:border-box;}

.showDesk, .showTab {display:none;} /* Hide desktop and tablet specific elements */
.showMob{display:block;} /* Show mobile specific */
.hideMob{ display:none;} /* Hide elements not for mobile */

.top__strip_text { font-size: 14px; line-height: 1.5; letter-spacing: 0.2px;} /* Adjusted */
.top__strip_text img { width: 100px; margin: -3px 0 0 3px;} /* Adjusted */

.banner__left { width:100%; padding: 25px 0 15px; text-align:center; margin-top:0;}
/* .banner__rating { font-size: 16px; line-height: 22px;} */ /* This class not in HTML */
/* .banner__rating img { margin: -3px 3px 0 0; width: 80px;} */
.banner__heading {
    font-size: 34px;    /* IMPROVED: Increased for mobile */
    line-height: 1.2;   /* IMPROVED: Better spacing */
    font-weight: 800;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
}
.banner__heading:first-of-type {
    margin-bottom: 10px;
}
.banner__heading hr {
    margin: 5px auto 12px auto; /* Adjusted spacing */
    width: 70%;
    background-color: rgba(255, 255, 255, 0.3);
}

.banner__text1{
    margin-top:12px;
    font-size:18px; /* IMPROVED: Increased */
    line-height: 1.5;
}
.banner__box_bottom {
    width:100%;
    padding:20px 15px 20px;
    margin-top: 20px;
}
.banner__box_bottom h1{
    font-size:22px; /* IMPROVED: Slightly increased */
    line-height:1.3;
    margin-bottom:15px;
}
.banner__button_box {
    flex-direction: column; /* Stack Yes/No buttons on mobile */
    gap: 12px; /* Space between stacked buttons */
}
.banner__button{
    width:100%; /* Full width when stacked */
    height:auto;
    padding: 14px 10px; /* Adjusted padding */
    font-size: 18px;
    line-height: 1.3;
}

.banner__secure {
    margin-top: 20px;
    font-size: 13px;
    line-height: 1.6;
}
.banner__secure img {
    margin: -3px 5px 0 0;
    width: 11px;
}
.banner__img{ width:100%; margin-left:0; margin-top: 15px;} /* Simpler full width */
.banner__img img { width: 100%; max-width: 450px; /* Control max size on mobile */ }


.featured__section{ background:#eff8ff; border-bottom:none; padding:25px 0 20px;}
.featured__icon{
    width:100%; margin-left:0; /* Simpler full width */
    flex-direction: column;
    align-items: center;
    gap: 15px; /* Space between stacked items */
}
.featured__icon li{
    width: 90%; /* Wider when stacked */
    max-width: 320px;
    padding: 10px 0;
    border-right: none;
    border-bottom: 1px solid #ddeeff;
    margin-bottom: 0; /* Gap handles spacing */
}
.featured__icon li:last-child{
    border-bottom: none;
}
.featured__icon li img { height: 30px; }
.featured__icon li p{ font-size:15px; line-height:1.4; margin-top:8px;}

.quote_sec1{ padding:25px 0 30px;}
.common_heading{ font-size:24px; line-height:1.3;} /* Adjusted */
.s2_text{ font-size:16px; line-height:1.6; margin-top:15px;} /* Adjusted */
.table-height{height: 255px;} /* Keep original or adjust */
.quote_s1_chart_box{ margin-top:15px;}
.quote_s1_chart_box table tr th{ font-size:13px;line-height: 1.4;padding: 12px 5px;} /* Adjusted */
.quote_s1_chart_box table tr td{ font-size:12px; line-height:1.4; padding:10px 5px; width:21%;} /* Adjusted */
.quote_s1_chart_box table tr td:first-child{ padding:10px 8px; } /* Adjusted */
.quote_health_btn{ margin-top:25px;max-width: 300px; height: 55px;line-height: 53px;font-size: 17px;} /* Adjusted */


.quote_sec2{ padding:25px 0 30px;}
.testi_col{ padding:20px 15px; width:100%; flex-basis: 100%;} /* Full width when stacked */
.testi_row { margin-top: 25px; gap:20px;} /* Keep original or adjust */

.footer{ padding:20px 0;} /* This class isn't used in HTML, but if it were... */
.footer-text{ font-size:12px; line-height:20px; margin:10px 0;} /* This class isn't used */

} /* End of @media only screen and (max-width:767px) */


@media only screen and (max-width:370px) { /* For very small mobile screens */
    .top__strip_text {
        font-size: 12px;
        line-height: 1.5;
    }
    .top__strip_text img {
        width: 80px;
    }
    .banner__heading {
        font-size: 28px;
        line-height: 1.2;
    }
    .banner__text1 {
        font-size: 15px;
        margin-top: 10px;
    }
    .banner__box_bottom h1 {
        font-size: 20px;
        margin-bottom: 12px;
    }
    .banner__button {
        font-size: 16px;
        padding: 12px 8px;
    }
    .featured__icon li p {
        font-size: 13px;
    }
    .common_heading {
        font-size: 22px;
    }
    .s2_text {
        font-size: 15px;
    }
}