/*
Preject Name: Otakim Mini Index Page
Preject URL: http://www.otakim.com
Version: 1.0
Description: Bootstrap4, HTML5, CSS3 and Fully Responsive Website.
Author: Otakim Team

/***** Genral CSS Start *****/
html { scroll-behavior: smooth; }
body { padding: 0px; margin: 0px; font-family: 'Rubik', sans-serif; overflow-x: hidden; color: #344f6b; font-weight: 400; line-height: 1.5;}
img {max-width: 100%; width: auto; height: auto;}
a { display: inline-block; text-decoration: none; -webkit-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s;}
a:hover, a:focus, button:hover, button:focus { outline: none !important; box-shadow: none !important; text-decoration: none !important; }
p {font-size: 20px; font-weight: 500; line-height: 1.5; margin-bottom: 10px;}
h1, h2, h3, h4, h5, h6, figure, ul { margin: 0; padding: 0px; }
ul {list-style: none; }

.text-blue {color: #344f6b;}
.text-yellow {color: #fcb948;}

h1, .h1 {font-size: 60px; font-weight: 500; line-height: 1.1; color: #344f6b; margin-bottom: 7px;}
h2, .h2 {font-size: 40px; font-weight: 700; line-height: 1.2; color: #344f6b; margin-bottom: 7px;}
h3, .h3 {font-size: 20px; font-weight: 700; line-height: 1.2; color: #344f6b; margin-bottom: 7px;}
h4, .h4 {font-size: 18px; font-weight: 700; line-height: 1.2; color: #344f6b; margin-bottom: 7px;}
/***** Genral CSS End *****/

/***** Product Quote Section Start *****/
.products-quote-sec {padding: 50px 0 0;}
.products-quote-sec [class*="col-"] {padding: 0 23px;}
.products-quote-sec .products-img {background-color: #F2F3F5; border-radius: 25px; padding: 2px; text-align: center; height: 315px; overflow: hidden; position: relative;}
.products-quote-sec .products-img iframe {max-width: 100%; max-height: 100%; height: 100%; border-radius: 23px; position: relative; z-index: 11;}
.products-quote-sec .products-img:before, 
.products-quote-sec .products-img:after {content: ""; position: absolute; width: 100%; height: 100%; transition: color 0.25s; border: 2px solid transparent; border-radius: 25px; width: 0; height: 0; z-index: 0;}
.products-quote-sec .products-img:before {top: 0; left: 0;}
.products-quote-sec .products-img:after {bottom: 0; right: 0;}
.products-quote-sec .products-item-wrp:hover .products-img:before, 
.products-quote-sec .products-item-wrp:hover .products-img:after {width: 100%; height: 100%;}
.products-quote-sec .products-item-wrp:hover .products-img:before {border-top-color: #fcb948; border-right-color: #fcb948; transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;}
.products-quote-sec .products-item-wrp:hover .products-img:after {border-bottom-color: #fcb948;border-left-color: #fcb948; transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;}
.products-quote-sec .products-detail-wrp {padding: 20px 25px 0;}
.products-quote-sec .products-item-wrp {margin-bottom: 65px;}
.products-quote-sec h2 {margin-bottom: 10px;}
.products-quote-sec p {font-weight: 400; margin-bottom: 10px; color: #163556;}
.products-quote-sec .products-quote-btn .btn-text {font-size: 20px; font-weight: 700; line-height: 1.4; color: #276BA9; text-decoration: underline; margin-bottom: 10px; -webkit-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s;}
.products-quote-sec a:hover .products-quote-btn .btn-text {color: #FCAF2D;}
.products-quote-sec .products-quote-btn .btn-primary-icon {margin-right: 8px;}
.products-quote-sec .products-quote-btn svg path {fill: #FCAF2D;}
/***** Product Quote Section End *****/

/***** FAQ & Review Section Start *****/
.faq-review-sec {padding: 60px 0; background-color: #f9f9f9;}
.faq-review-sec .section-sub-title a {color: #fcb948;}
.faq-review-sec .section-sub-title a:hover {color: #344f6b;}
.faq-review-sec .main-section-title {margin-bottom: 0;}
.faq-review-sec .main-section-detail {margin-bottom: 20px;}
.faq-review-sec .faq-contant-wrap {padding-right: 77px;}
.faq-review-sec .card {border: none !important; border-radius: 20px !important; background-color: #fff; margin-bottom: 8px; overflow: hidden;}
.faq-review-sec .card-header.collapsed {background-color: unset; border-bottom: none; padding: 33px 18px;}
.faq-review-sec .card-header {background-color: #fff; border-bottom: none; padding: 33px 18px 10px; cursor: pointer;}
.faq-review-sec .card-body {background-color: #fff; padding-top: 0;}
.faq-review-sec .card-header.collapsed:after {width: 22px; height: 22px; background-image: url(/Booklet/images/new-index/plus.png); top: 33px;}
.faq-review-sec .card-header:after {content: ""; float: right; position: absolute; left: 25px; top: 43px; color: #e04c9b; width: 23px; height: 3px; background-image: url(/Booklet/images/new-index/minus.png); background-size: cover; background-position: center center;}
.faq-review-sec .card-title {font-size: 20px; font-weight: 700; line-height: 1; color: #163556; margin-bottom: 0;}
.faq-review-sec .card-title .question-text {min-width: 80px;}
.faq-review-sec .card-body .answer-text {font-size: 20px; font-weight: 700; line-height: 1; color: #163556; min-width: 80px;}
.faq-review-sec .card-body p {font-weight: 400;}
.faq-review-sec .card-body a {color: #fcb948;}
.faq-review-sec .card-body a:hover {color: #344f6b;}
/***** FAQ & Review Section End *****/

/***** Media Query Start *****/
@media (min-width: 1366px) {
    .products-quote-sec .container {max-width: 1400px;}
    .faq-review-sec .container {max-width: 1400px;}
}
@media (max-width: 1365px) {
    h1, .h1 {font-size: 50px; margin-bottom: 5px;}
}
@media (max-width: 1199px) {
    .products-quote-sec .products-img {height: 300px;}
}
@media only screen and (max-width: 991px) {
    h1, .h1 {font-size: 40px;}
    h2, .h2 {font-size: 32px;}
    h3, .h3 {font-size: 18px;}
    h4, .h4 {font-size: 16px;}
    p {font-size: 16px;}

    .products-quote-sec .products-img {height: 300px;}
    .faq-review-sec .card-title {font-size: 18px;}

    .faq-review-sec.products-quote-mobile {background-color: #fff;}
    .faq-review-sec.products-quote-mobile p {font-weight: 400;}
    .faq-review-sec.products-quote-mobile .card-header, 
    .faq-review-sec.products-quote-mobile .card-body {background-color: #f9f9f9;}
    .faq-review-sec.products-quote-mobile .card-body iframe {max-width: 450px; margin-bottom: 10px;}
}
@media only screen and (max-width: 767px) {
    .products-quote-sec {margin-top: 0;}
    .products-quote-sec .products-detail-wrp {padding: 10px 15px 0;}
    .products-quote-sec .products-title {margin-bottom: 2px;}
    .products-quote-sec .products-detail {margin-bottom: 7px;}
    .products-quote-sec .products-item-wrp {margin-bottom: 35px;}

    .faq-review-sec {padding: 30px 0;}
    .faq-review-sec .faq-contant-wrap {padding-right: 0;}
    .faq-review-sec .main-section-title img {max-width: 40px;}
    .faq-review-sec .main-section-detail {margin-bottom: 16px;}
    .faq-review-sec .see-all-customer a {margin: 10px 0;}
    .faq-review-sec .review-item-inner {padding: 18px 15px 20px;}
    .faq-review-sec .review-wrp {margin-bottom: 23px;}
    .faq-review-sec .main-section-detail {margin-bottom: 10px;}
    .faq-review-sec .card-header.collapsed {padding: 16px 15px 16px 45px;}
    .faq-review-sec .card-title .question-text, .faq-review-sec .card-body .answer-text {display: none;}
    .faq-review-sec .card-header.collapsed:after {top: 17px;}
    .faq-review-sec .card-header:after {left: 15px;}
    .faq-review-sec .card-header {padding: 18px 15px 10px 45px;}
    .faq-review-sec .card-header::after {top: 28px;}
    .faq-review-sec .card-body {padding: 0 15px 15px;}
}
@media (max-width: 575px){
    h1, .h1 {font-size: 30px;}
    h2, .h2 {font-size: 25px;}
    h3, .h3 {font-size: 18px;}
    h4, .h4 {font-size: 16px;}
    p {font-size: 15px;}
    
    .products-quote-sec [class*="col-"] {padding: 0 15px;}
    .products-quote-sec .products-item-wrp {margin-bottom: 30px;}
    .products-quote-sec .products-quote-btn a {font-size: 16px;}

    .faq-review-sec .card-title {font-size: 15px;}
}