/* Bootstrap */
@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
/* Global */
body{
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
}
h1,h2{
    font-weight: 700;
}
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #fc834a;
    --bs-btn-border-color: #fc834a;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #ed763e;
    --bs-btn-hover-border-color: #ed763e;
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #fc834a;
    --bs-btn-active-border-color: #fc834a;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #d37346;
    --bs-btn-disabled-border-color: #d37346;
}
/* Header */
header{
    padding: 10px 0px;
    background: #d4e2f0;  
    text-align: center;
}
header img{
    height: 80px;
}
/* Banner */
.banner{
    background-image: url('img/banner.jpg');
    background-position: center bottom;
    background-size: cover;
    min-height: 650px;
    position: relative;
    z-index: 1;
}
.banner::before{
    content: '';
    background: rgb(0, 0, 0, 0.3);
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.logo{
    height: 130px;
    display: block;
    margin: 25px auto 80px;
}
.banner-content{
    z-index: 2;
}
.banner-content p{
    font-size: 30px;
    margin-bottom: 5px;
    padding-top: 30px;
    text-shadow: 5px 3px 3px rgba(0, 0, 0, 0.35);
}
.banner-content h2{
    font-size: 48px;
    margin-bottom: 40px;
    text-shadow: 5px 3px 3px rgba(0, 0, 0, 0.35);
}
.banner-content .btn{
    font-size: 20px;
    padding: 12px 25px;
}
/* Transforming */
.transforming{
    padding: 100px 0px;
    background: #EFEFEF url('img/chevron.png');
}
.transforming h2{
    font-size: 48px;
    margin-bottom: 25px;
    font-weight: 600;
    color:#383838;
    padding-top: 25px;
}
.transforming h2 span{
    color:#d37346;
}
.transforming p{
    font-size: 20px;
    line-height: 32px;
}
/* how it work */
.how-it-work{
    background: #d37346;
    padding: 80px 0px;
}
.how-it-work h2{
    font-size: 36px;
    margin-bottom: 45px;
}
.how-it-work-box h3{
    font-weight: 700;
    margin-bottom: 5px;
}
.how-it-work-box p{
    letter-spacing: 1px;
}
.how-it-work-box .how-it-work-box-1{
    margin-bottom: 45px;
}
.how-it-work-box .how-it-work-box-2{
    margin-bottom: 45px;
}
.how-it-work-box-2 img{
    margin-top: 15px;
}
.how-it-work-box-1 h3{
    margin-top: 15px;
} 
.how-it-work-box-2 h3{
    margin-top: 30px;
} 
.how-it-work-box-3 h3{
    margin-top: 15px;
} 
.transforming ul{
    font-size: 18px;
}
.how-it-work-box img{
    height: 150px;
}
/* Pricing */
.pricing{
    padding: 100px 0px; 
}
.pricing h2{
    font-size: 36px;
}
.pricing .card{
    padding: 0px;
    border:1px solid #fc834a;
}
.pricing .card .card-header{
    background: transparent;
    padding: 30px 25px;
    border-bottom: none;
}

.pricing .card .card-header h2{
    font-size: 30px;
}

.pricing .card .card-header h3{
    font-size: 18px;
}

.pricing .card .divider{
    background: #3c3b3b;
    text-align: center;
    padding: 25px 0px;
}

.pricing .card .divider p{
    font-size: 16px;
    font-weight: 600;
    color:#ffffff;
    margin-bottom: 0px;
}

.pricing .card .divider span{
    font-size: 14px;
}

.pricing .card .card-body{
    padding: 25px 15px;
}

.pricing .card .card-body h2{
    font-size: 24px;
    margin-bottom: 20px;
    margin-top: 10px;
}

.pricing .card .card-body ul{
    list-style: none;
    margin-left: 25px;
    margin-bottom: 30px;
}

.pricing .card .card-body ul li{
    margin-bottom: 15px;
    position: relative;
}

.pricing .card .card-body ul li::before{
    content: '✓';
    position: absolute;
    top:0px;
    left: -18px;
    color:#fc834a;
    font-weight: 600;
}

.pricing .card-footer{
    background: transparent;
    padding: 45px 15px;
    text-align: center;
}

.pricing .card-footer .btn{
    width: 90%;
    padding: 15px 0px;
    font-size: 20px;
    font-weight: 700;
}
/* Footer */
footer{
    padding: 60px 0px 50px;
    text-align: center;
    background: #383838;
}
footer ul li{
    position: relative;
}
footer ul li:not(:first-child)::before{
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 8px;
    background: #ffffff;
    position: absolute;
    top: 9px;
    left: -21px;
}
footer ul li.list-inline-item:not(:last-child){
    margin-right: 30px;
}
footer a{
    text-decoration: none;
    font-size: 18px;
    color:#ffffff;
}
footer img{
    height: 100px;
    margin-bottom: 25px;
}
/* Responsive Media Queries  */
					/* Max Width With Start Point */
/* Large devices (desktops, 992px and Down) */
@media (max-width: 991.98px) {
    .transforming{
        padding: 20px 0px 50px;
    }
    .how-it-work-box p br{
        display: none;
    }
    .pricing {
        padding: 50px 0px;
    }
    .transforming .btn{margin-bottom: 35px;}
    .how-it-work-box-2 img, 
    .how-it-work-box-1 h3, 
    .how-it-work-box-2 h3, 
    .how-it-work-box-3 h3{
        margin-top: 0px;
    }
    
}

/* Medium devices (tablets, 768px and Down) */
@media (max-width: 767.98px) {
    .logo{
        height: 80px;
        margin: 25px auto 50px;
    }
    .banner-content p{
        font-size: 22px;
    }
    .banner-content h2{
        font-size: 36px;
    }
    .transforming h2{
        font-size: 36px;
    }
    .how-it-work h2{
        font-size: 30px;
    }
    .how-it-work{
        padding: 50px 0px;
    }
    .how-it-work-box .d-flex{
        display: block !important; 
    }
    .how-it-work-box .d-flex .ms-4{
        margin-left: 0px !important;
        margin-top: 25px !important;
    }
    .how-it-work-box img{
        height: 120px;
    }
}

/* Small devices (landscape phones, 576px and Down) */
@media (max-width: 575.98px) {}

/* Small devices (landscape phones, 576px and down) */
@media (max-width: 576px) {}

/* Small devices (landscape phones, 480px and down) */
@media (max-width: 480px) {}

/* Small devices (landscape phones, 414px and down) */
@media (max-width: 414px) {}

/* Small devices (landscape phones, 384px and down) */
@media (max-width: 384px) {}

/* Small devices (landscape phones, 360px and down) */
@media (max-width: 360px) {}

/* Small devices (landscape phones, 360px and down) */
@media (max-width: 320px) {}