/* fonts import that should include */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap');


.wstyle-1 *{
    font-family: "Poppins", sans-serif;
}
.wstyle-2 *{
    font-family: "Public Sans", sans-serif;
}
.wstyle-3 *{
    font-family: "Montserrat", sans-serif;
}
.wstyle-4 *{
    font-family: "Nunito", sans-serif;
}
.wstyle-5 *{
    font-family: "Roboto", sans-serif;
}
/* end */

/* add this to keep the button hover effect */

.wstyle-1 a,
.wstyle-2 a,
.wstyle-3 a,
.wstyle-4 a,
.wstyle-5 a {
    text-decoration: none;
    transition: 0.4s ease;
}
.wstyle-1 a:hover,
.wstyle-2 a:hover,
.wstyle-3 a:hover,
.wstyle-4 a:hover,
.wstyle-5 a:hover {
    transform: scale(0.98);
}



/* end */

/* only need to add the class of the relavent button group */
.wstyle-1 {
    background-color: #F6FCFF;
    border: 1px solid #D1EEFA;
    border-radius: 16px;
    max-width: 740px;
    margin-inline: auto;
    width: 100%;
    padding: 20px 20px;
    p{
        text-align: center;
        font-size: 26px;
        line-height: 39px;
        font-weight: 600;
        margin-bottom: 27px;
    }
    .grid {
        position: relative;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));




        gap: 10px;
        margin-bottom: 15px;
        a{
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 13px;
            border-radius: 6px;
            color: #fff;
            padding: 15px 10px;
            font-size: 20px;
            line-height: 30px;
            font-weight: 500;
            background-color: #014C86;

  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;

        }
    }
    a.btn{
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 13px;
        border-radius: 6px;
        color: #fff;
        padding: 15px 10px;
        font-size: 22px;
        line-height: 30px;
        font-weight: 500;
        background-color: #21AA37;
        margin-bottom: 15px;
    }
    p.bottom {
        border-radius: 6px; 
        a{
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 13px;
            color: #fff;
            padding: 15px 10px;
            font-size: 22px;
            line-height: 30px;
            font-weight: 500;
            color: #000;
            text-decoration: none;
        }
        &:has(svg){
            color: #000000;
            background-color: #CEE2EC;
        }
    }
    @media screen and (width<= 768px){
        padding: 20px;
        p{
            font-size: 18px;
            line-height: 28px;
            margin-bottom: 15px;
        }
        .grid {
           margin-bottom:10px;
           gap: 5px;
           a{
            border-radius: 3px;
            color: #fff;
            padding: 5px 15px;
            font-size: 16px;
            line-height: 30px;
           } 
        }
        a.btn{
            border-radius: 3px;
            color: #fff;
            padding: 5px 15px;
            font-size: 16px;
            line-height: 30px;
        }
        p.bottom a{
            border-radius: 3px;
            padding: 5px 15px;
            font-size: 16px;
            line-height: 30px;
           svg {
            width: 20px;
           }
        }
    }
}
.wstyle-2 {
    background-color: #FBFBFB;
    border: 1px solid #E9E9E9;
    border-radius: 16px;
    max-width: 740px;
    margin-inline: auto;
    width: 100%;
    padding: 20px 20px;
    p{
        text-align: center;
        font-size: 32px;
        line-height: 43px;
        font-weight: 600;
        margin-bottom: 20px;
    }
    select {
        position: relative;
        display: block;
        width: 100%;
        font-size: 26px;
        line-height: 32px;
        outline: 2px solid #E9E9E9;
        border: none;
        padding: 15px 20px;
        background-color: #fff;
        border-radius: 6px;
        text-align: center;
        appearance: none;
        margin-bottom: 10px;
    }
    a.btn{
        display: flex;
        position: relative;
        margin-bottom: 10px;
        font-size: 26px;
        line-height: 32px;
        align-items: center;
        justify-content: center;
        gap: 20px;
        border-radius: 6px;
        background-color: #006CFA;
        color: #fff;
        padding: 15px 20px;
    }
    p.bottom {
        border-radius: 6px;
        background-color: #FFAE35;
        a {
            display: flex;
            position: relative;
            margin-bottom: 10px;
            font-size: 26px;
            line-height: 32px;
            align-items: center;
            justify-content: center;
            gap: 20px;
            font-weight: 400;
            padding: 15px 20px;
            color: #000000;
        }
    }
        @media screen and (width<= 768px){
        padding: 20px;
        p{
            font-size: 18px;
            line-height: 28px;
            margin-bottom: 15px;
        }
        select {
            font-size: 16px;
            line-height: 20px;
            padding: 10px 15px;
            border-radius: 4px;
            margin-bottom: 10px;
        }
        a.btn{
            margin-bottom: 10px;
            font-size: 18px;
            line-height: 20px;
            gap: 10px;
            border-radius: 4px;
            padding: 10px 15px;
            svg {
                width: 20px;
            }
        }
        p.bottom{
            margin-bottom: 10px;
            border-radius: 4px;
            a{
            font-size: 18px;
            line-height: 20px;
                gap: 10px;
                padding: 10px 15px;
                svg {
                    width: 20px;
                }
            }
            
        }
    }
}

.wstyle-3 {
    background-color: #FBFBFB;
    border: 1px solid #E9E9E9;
    border-radius: 16px;
    max-width: 740px;
    margin-inline: auto;
    width: 100%;
    padding: 20px 20px;
    p{
        text-align: center;
        font-size: 26px;
        line-height: 32px;
        font-weight: 600;
        margin-bottom: 20px;
        &.bottom {
            font-size: 19px;
            line-height: 23px;
            margin-bottom: 0px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;

            a{
                text-decoration: underline;
                color: #000;
            }
            svg {
                margin: 0px 5px 0px 10px;
            }
        }
    }
    .grid {
        position: relative;
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 10px;
        margin-bottom: 20px;
        a{
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 37px;
            color: #fff;
            padding: 15px 10px;
            font-size: 20px;
            line-height: 30px;
            font-weight: 500;
            background-color: #000000;


  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;


        }
    }
    a.btn {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 37px;
        color: #000000;
        padding: 15px 20px;
        font-size: 22px;
        line-height: 30px;
        font-weight: 500;
        background-color: #FFEE00;
        margin-bottom: 15px;
    }
    @media screen and (width<= 768px){
        padding: 20px;
        p{
            font-size: 18px;
            line-height: 28px;
            margin-bottom: 15px;
            &.bottom {
                font-size: 16px;
                line-height: 20px;
                gap: 0;
                svg{
                    width: 20px;
                }
            }
        }
        .grid {
           margin-bottom:10px;
           gap: 5px;
           a{
            color: #fff;
            padding: 5px 15px;
            font-size: 16px;
            line-height: 30px;
           } 
           svg {
            width: 20px;
           }
        }
        a.btn {
            padding: 10px 15px;
            font-size: 18px;
            line-height: 20px;
            margin-bottom: 15px;
        }
    }
}

.wstyle-4 {
    background-color: #F6FCFF;
    border: 1px solid #D1EEFA;
    border-radius: 16px;
    max-width: 740px;
    margin-inline: auto;
    width: 100%;
    padding: 20px 20px;
    p{
        text-align: center;
        font-size: 28px;
        line-height: 38px;
        font-weight: 600;
        margin-bottom: 20px;
        &.bottom {
            font-size: 19px;
            line-height: 23px;
            margin-bottom: 0px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;

            a{
                text-decoration: underline;
                color: #000;
            }
            svg {
                margin: 0px 5px 0px 10px;
            }
        }
    }
    .grid {
        position: relative;
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
        gap: 10px;
        margin-bottom: 20px;
        a{
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 37px;
            color: #fff;
            padding: 15px 10px;
            font-size: 20px;
            line-height: 28px;
            font-weight: 500;
            background: linear-gradient(#3C6FFA,#2938BD);
           /* border: 1px solid #272E81;*/
        }
    }
    a.btn {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 37px;
        color: #fff;
        padding: 15px 10px;
        font-size: 24px;
        line-height: 30px;
        font-weight: 500;
        background: linear-gradient(#FF2D5D,#D60031);
        margin-bottom: 25px;
        border: 1px solid #C00060;
    }
    @media screen and (width<= 768px){
        padding: 20px;
        p{
            font-size: 18px;
            line-height: 28px;
            margin-bottom: 15px;
            &.bottom {
                font-size: 16px;
                line-height: 20px;
                gap: 0;
                svg{
                    width: 20px;
                }
            }
        }
        .grid {
           margin-bottom:10px;
           gap: 5px;
           a{
            color: #fff;
            padding: 5px 15px;
            font-size: 16px;
            line-height: 30px;
           } 
           svg {
            width: 20px;
           }
        }
        a.btn {
            padding: 10px 15px;
            font-size: 18px;
            line-height: 20px;
            margin-bottom: 15px;
        }
    }
}

.wstyle-5 {
    background-color: #FBFBFB;
    border: 1px solid #E9E9E9;
    border-radius: 16px;
    max-width: 740px;
    margin-inline: auto;
    width: 100%;
    padding: 20px 20px;
    p{
        text-align: center;
        font-size: 31px;
        line-height: 40px;
        font-weight: 600;
        margin-bottom: 26px;
        &.bottom {
            font-size: 19px;
            line-height: 23px;
            margin-bottom: 0px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;

            a{
                text-decoration: underline;
                color: #000;
            }
            svg {
                margin: 0px 5px 0px 10px;
            }
        }
    }
    .grid {
        position: relative;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
        gap: 10px;
        margin-bottom: 20px;
        a{
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
            color: #fff;
            padding: 15px 10px;
            font-size: 22px;
            line-height: 30px;
            font-weight: 500;
            background-color: #3826B0;
        }
    }
    a.btn {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        color: #fff;
        padding: 15px 10px;
        font-size: 22px;
        line-height: 30px;
        font-weight: 500;
        background-color: #FD2939;
        margin-bottom: 15px;
       
        margin-inline: auto;
    }
        @media screen and (width<= 768px){
        padding: 20px;
        p{
            font-size: 18px;
            line-height: 28px;
            margin-bottom: 15px;
            &.bottom {
                font-size: 16px;
                line-height: 20px;
                gap: 0;
                svg{
                    width: 20px;
                }
            }
        }
        .grid {
           margin-bottom:10px;
           gap: 5px;
           grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
           a{
            color: #fff;
            padding: 5px 15px;
            font-size: 16px;
            line-height: 30px;
           } 
           svg {
            width: 20px;
           }
        }
        a.btn {
            padding: 10px 15px;
            font-size: 18px;
            line-height: 20px;
            margin-bottom: 15px;
        }
    }
}


.wstyle-5 .grid:has(a:nth-child(3)):not(:has(a:nth-child(4))) {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 10px;
}
.wstyle-5 .grid:has(a:nth-child(3)):not(:has(a:nth-child(4))) a {
  flex: 1 1 auto;
  min-width: 0;
}