@font-face {
    font-family: 'Bricksram Regular';
    src: url("../otf/bricksram-regular.otf");
}

@font-face {
    font-family: 'Roboto-Regular';
    src: url("../woff/roboto-regular.woff");
}

#first_sec {
    padding-top: 125px;
    padding-bottom: 50px;
}

a {
    text-decoration: none !important;
}

#first_sec h2 {
    font-family: 'Roboto-Regular';
    /* font-weight: 900;
    font-size: 24px; */
    font-weight: 500;
    font-size: 18px;
    line-height: 20px;
    color: #666666;
}

.device-img-blk {
    position: sticky;
    top: 125px;
    z-index: 1;
}

.device-img-slides {
    display: none;
    text-align: center;
    width: 100%;
    /* padding: 0px 0px 0px 80px; */
}

/* .device-img-slides {} */

.device-bottom-cursor {
    cursor: pointer;
}

.device-img-prev, .device-img-next {
    cursor: pointer;
    position: absolute;
    top: 40%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: #dddddd;
    font-weight: bold;
    font-size: 20px;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
}

.device-img-next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.device-img-prev:hover, .device-img-next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

.elementor-clearfix {
    font-weight: 700;
    font-family: 'Roboto-Regular';
}

.caption-device-img-blk {
    text-align: center;
    background-color: #222;
    padding: 2px 16px;
    color: white;
}

.device-bottom-row:after {
    content: "";
    display: table;
    clear: both;
}

.device-bottom-col {
    float: left;
    width: 14%;
    text-align: center;
}

.device-bottom-col img {
    width: 60px;
    padding: 0 0 0 0;
}

.device-bottom-img {
    opacity: 0.6;
}

.active, .device-bottom-img:hover {
    opacity: 1;
}

.slide_images {
    width: 50%;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 760px) {
    .device-img-slides {
        width: 100%;
        padding: 0px 0px 0px 0px;
        margin: auto;
    }

    .device-bottom-col { 
        width: 19%; 
    }

    .slide_images {
        width: 100%;
    }
}

/* @font-face {
    font-family: 'ProximaNova-Regular';
    src: url('https://family1st.io/review-slider/proxima_ssv/ProximaNova-Regular.otf');
    font-display: swap;
} */

.addTobtn {
    background: #ffce00;
    border-radius: 5px;
    padding: 6px 18px;
    color: #000000;
    font-family: 'Roboto-Regular' !important;
    text-align: center;
    font-size: 26px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 10px;
}

.pclasscus {
    color: #000;
    font-size: 25px !important;
    font-weight: 700;
    font-family: 'Roboto-Regular' !important;
    line-height: 31px !important;
    text-align: justify;
    margin-bottom: 31px;
}

form {
    margin: 0 auto;
    padding-top: 15px;
}

.value-button {
    display: inline-block;
    border: 1px solid #ddd;
    margin: 0px;
    width: 50px;
    height: 51px;
    text-align: center;
    vertical-align: middle;
    padding: 3px 0;
    background: #d4d4d4;
    font-family: 'Roboto-Regular';
    font-size: 30px;
    font-weight: 600;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.value-button:hover {
    cursor: pointer;
}

form #decrease {
    margin-right: -4px;
    border-radius: 5px 0 0 5px;
}

form #increase {
    margin-left: -4px;
    border-radius: 0 8px 8px 0;
}

form #input-wrap {
    margin: 0px;
    padding: 0px;
}

input#deviceQty {
    text-align: center;
    border: none;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    margin: 0px;
    width: 60px;
    height: 48px;
    font-family: 'Roboto-Regular' !important;
    font-size: 15px;
    font-weight: 600;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.shipping-details {
    color: #000000;
    padding-left: 4px;
    font-family: 'Roboto-Regular';
    font-size: 18px;
    font-weight: 700;
}

.shipping-details a {
    text-decoration: none;
}

.shipping-details a:hover {
    text-decoration: underline;
}

.shipping-details li {
    margin-bottom: 5px;
}

.list {
    font-family: 'Roboto-Regular';
    font-size: 15px;
    color: #333333;
    padding-left: 27px;
    font-weight: 700;
    list-style-type: disc;
    line-height: 26px;
}

.list li {
    margin-bottom: 0px;
}

.list li::marker {
    /* color: #000; */
    color: #0467FE;
    font-size: 22px;
}

.accordion-button {
    background-color: #fff;
    border: 1px solid #cccccc;
}

.accordion-button:hover, .accordion-button.active {
    border: 1px solid #cccccc;
    background-color: #fff;
}

.accordion-button:not(.collapsed) {
    color: #777777 !important;
    background-color: #fff !important;
}

.accordion-button a {
    color: #777777;
    font-weight: 600;
    text-decoration: none;
}

.accordion-button a:hover {
    color: #0a58ca;
    text-decoration: underline;
}

.accordion-body ul li {
    font-size: 16px;
    font-weight: 700;
    color: #777777;
    font-family: 'Roboto-Regular';
}

.accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' d='M8 0a1 1 0 0 1 1 1v6h6a1 1 0 1 1 0 2H9v6a1 1 0 1 1-2 0V9H1a1 1 0 0 1 0-2h6V1a1 1 0 0 1 1-1z' clip-rule='evenodd'/%3e%3c/svg%3e") !important;
    transform: scale(.7) !important;
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' d='M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z' clip-rule='evenodd'/%3e%3c/svg%3e") !important;
}

#first_sec ul {
    /* font-size: 20px; */
    text-align: justify;
    font-family: 'Roboto-Regular';
}

.list_text {
    font-family: 'Roboto-Regular';
    padding-left: 27px;
    text-align: justify !important; 
}

.list_text li::marker {
    color: #000;
    font-size: 24px;
}

.text1 {
    /* font-size: 15px; */
    padding-left: 27px;
    text-align: justify;
    font-family: 'Roboto-Regular';
}

/************ 2nd section ***********/
/* #second_sec {
    margin-top: 60px;
    margin-bottom: 50px;
} */
#second_sec p {
    font-size: 21px;
    font-family: 'Roboto-Regular';
}

#second_sec ul {
    font-size: 20px;
    font-family: 'Roboto-Regular';
}

#first_sec h5 {
    font-family: 'Roboto-Regular';
    font-weight: 700;
    font-size: 23px;
    padding-left: 27px;
    text-align: justify;
}

.addToactivate {
    background: #0b5dc1 ;
    border-radius: 5px;
    padding: 6px 18px;
    color: #fff;
    font-family: 'Roboto-Regular' !important;
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
}


/* @media(min-width: 320px) and (max-width: 768px) { */
@media (max-width: 767px) {
    .pclasscus {
        color: #000;
        font-size: 30px !important;
        font-weight: 700;
        font-family: 'Roboto-Regular' !important;
        line-height: 36px !important;
        text-align: initial;
        margin-bottom: 31px;
    }

    #first_sec ul {
        text-align: initial;
        font-family: 'Roboto-Regular';
    }

    .addToactivate {
        background: #0b5dc1 ;
        border-radius: 5px;
        padding: 6px 18px;
        color: #fff;
        font-family: 'Roboto-Regular' !important;
        text-align: center;
        font-size: 24px;
        font-weight: 600;
        cursor: pointer;
        width: 70%;
        margin-left: auto;
        margin-right: auto;
        display: block;
        margin-bottom: 30px;
    }

    #first_sec h5 {
        font-family: 'Roboto-Regular';
        font-weight: 700;
        font-size: 28px;
        padding-left: 27px;
        text-align: initial;
        line-height: 35px;
    }
}


@media  (min-width : 768px) and (max-width: 1024px) {
    .addToactivate {
        font-size: 19px;
        padding: 6px 13px;
    }

    .addTobtn {
        width: 150%;
    }

    .mobile-img {
        max-width: 23% !important;
        margin-top: -50px !important;
    }
}