@font-face {
    font-family: 'Sabon';
    src: url(./fonts/Sabon_Roman.woff2) format('woff');
}


@font-face {
    font-family: 'FamiljinGrotesk';
    src: url(./fonts/FamiljenGrotesk-Regular.woff) format('woff');
}


@font-face {
    font-family: 'GroteskMono';
    src: url(./fonts/GeneralGrotesqueMono-Regular.woff) format('woff');
}

body{margin: 0px;}

ul li{ list-style: none;}
a{text-decoration: none;}
p{ font-family: 'GroteskMono';}
h1{ font-family: 'Sabon'; font-size: 60px;}
h2{font-family: 'Sabon'; font-size: 43px; padding: 50px 0px;}
h3{font-family: 'FamiljinGrotesk'; font-weight: 100; font-size: 23px;}



    
.header{ font-family: 'FamiljinGrotesk'; background-color: #311c3b;  padding: 33px 20px;  align-items: center; border-bottom: 1px solid #795095;     background-position-y: bottom;}
.header a{color: white; font-size: 17px; font-weight: 500;}
.header .nav-bar ul li{ list-style-type: none; padding: 0px 15px; }
.header .nav-bar ul li a:hover{color: #f15a25;}
.header .nav-bar ul{display:flex; padding: 0px; margin: 0px;}
.header .button{text-align: end;}
.header .row{align-items: center;}
.header button span i{color: white;}
.header .logo img{width: 100%;}


.btn-outlined{ border: 2px solid #f15a25; background-color: none; padding: 12px 25px; border-radius: 25px; font-family: 'FamiljinGrotesk';}
.btn-outlined span{padding-left:10px ;}
.btn-outlined:hover{background-color: #f15a25;}

.landing-sec{background-color: #311c3b; height: 85vh; color: white;  background-image: url(./images/home-splash-1.png); background-repeat: no-repeat; background-position: right;}
.landing-sec .container{display: flex; flex-direction: column; height: 100%; justify-content: space-around;}
.landing-sec .content{width: 50%;}
.landing-sec .content p{padding: 25px 0px;}
.landing-sec .content a{color: white;}
.landing-sec .content h1{ font-family: 'Sabon'; font-size: 60px; color: white;}
/* .landing-sec .content{display: grid; grid-template-rows: 60% 20% 20%;} */

.slider-sec{background-color: #f2d5b0; color: black;}
.client-sec{display: grid; grid-template-columns: repeat(2, 1fr); padding: 35px 0px; justify-content: center;}

.slider-sec .slider{padding: 35px 0px;}
.slider-sec .slider .card-footer a{color: grey; font-family: 'GroteskMono';}
.slider-sec .slider .card-footer a:hover{color: #f15a25;}
.slider-sec .card .card-footer img{width: auto;}
.slider-sec .slider .owl-carousel .owl-dots{margin-top: 45px!important;}
.slider-sec .slider .item{     display: flex; flex-direction: column-reverse;border-radius: 15px; box-shadow: 10px 10px purple; margin-bottom: 10px;}
.slider-sec .content .card{ border-bottom-right-radius: 15px; border-bottom-left-radius: 15px;}
.slider-sec .image img {border-top-right-radius: 15px; border-top-left-radius: 15px;}
/* .slider-sec .slider .owl-carousel .owl-stage-outer{overflow: visible!important;} */
 
.card{ background-color: white; height: 100%; display: flex; flex-direction: column; justify-content: space-between;}
.card .card-body{padding: 45px;}
.card .card-footer{padding: 45px; background-color: white; border: none;}

.sec-2{padding: 60px 0px 100px 0px; }
.sec-2 .container{background-image: url(./images/home-splash.png); background-size: 70%;
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: 100%;}

.sec-2 ul{margin: 60px 0px;}
.sec-2 .content{margin-bottom: 240px;}
.sec-2 ul li{font-size: 21px; text-decoration: underline; text-decoration-color: #f15a25; padding: 10px 0px;}
.sec-2 ul li:hover{color: #f15a25; text-decoration-color: black;}
.sec-2 a.btn-outlined{color: black;}

.sec-3{background-color: #e8cde2; padding:50px 0px; background-image: url(./images/home-splash-2.png); background-repeat: no-repeat; background-position: right;}
.sec-3 .card{ border-radius: 15px; box-shadow: 10px 10px black ; margin: 80px 20px; height: auto; text-align: center;}
.sec-3 .card img{width: 100%; border-top-left-radius:15px ; border-top-right-radius:15px ;}

.footer{background-color: #311c3b; color: white;}
.footer .footer-bg{background-color: #e8cde2; background-image: url(./images/footer-cap.png); background-position: right; height: 300px;}
.footer h2{width: 80%;}
.footer a.btn-outlined{color: white;}
.footer ul li{font-family: 'GroteskMono' ; padding-bottom: 20px; color: #e8cde2; ;}
.footer ul li:hover{color: #f15a25;}
.footer .copy-right {margin-top: 50px;}
.footer .copy-right ul {display: flex; }
.footer .copy-right ul li{padding-right:30px; font-size: 13px;}



/* Internal */

.header .bg-white{background-color: white; color: black;}
.process-sec a, .bg-white a,.bg-white button span i{color: black;}
.process-sec{padding: 100px 0px;}
.process-sec .bg img{width: 100%; padding: 30px 0px;}
.process-sec .row{justify-content: center;}
.process-sec .content{text-align: center;}
.process-sec h3{padding: 30px 0px;}

.sp{padding-bottom: 120px;}
.sp h2{text-align: center;}
.sp .sp-detail{margin-top: 50px;}
.sp .sp-detail{text-align: center; justify-content: space-around;}
.sp .sp-detail h3{font-size: 22px; padding-bottom: 20px;}
.sp .sp-detail p span{color: #f15a25;}

.cap-sec{background-color: #efebb1; padding-top: 50px;  background-image:url(./images/process-splash-two-1.png); background-repeat: no-repeat; background-position-x: right;}
.cap-sec .heading-sec {align-items: center;}
.cap-sec .sec-3 h2{font-size: 30px; text-align: left; }
.cap-sec  .sec-3{background-image: none; background-color: transparent; margin: 0px;}
.cap-sec .card{padding-bottom:50px; margin:0px; height: 100%;}
.cap-sec ul li{ list-style-type:  disc; text-align: left;}
.cap-sec a.btn-outlined{color: black;}
.cap-sec .card-footer{text-align: left;}
.cap-sec .sec-3 .row{margin-bottom: 50px;}
/* .cap-sec .bg{background-color: white; background-image: url(./images/divider-lemon.png); background-position-y: bottom; background-repeat: no-repeat; height: 350px;} */
.cap-sec .sec-3 .col-12{margin-bottom: 25px;}
.cap-sec .bg {overflow: hidden;}
.cap-sec .bg img{  background-color: white;}


/* companis */
.comp-sec{background-color: white; padding-top: 60px; text-align: center;}
.comp-sec .container{padding-bottom: 100px; border-bottom: 1px solid black;}
.comp-sec a.btn-outlined{color: black;}
.comp-sec .client-sec{padding-top: 90px 0px;}

/* App */
.app-sec {padding: 150px 0px;}
.app-sec  .content{text-align: center; justify-content: center;}
.app-sec  .content-detail {display: grid; grid-template-columns: 30% 30%; justify-content: space-around;}
.app-sec  .content-detail h2{color: #f15a25; font-size: 32px; }
.app-sec  .content-detail div{padding-bottom: 70px;}

/* card slider sec  */
.card-slider {background-color: #f2d5b0; padding: 60px 0px;}
.card-slider .sec-3{background-color: #f2d5b0; background-image: none; padding: 0px;}
.card-slider .card{padding-bottom: 30px;}
.card-slider .card h2{color: #f15a25; font-family: 'GroteskMono'; font-size: 52px;}
.card-slider .card-body{padding:0px 45px;}
.card-slider .card-footer{ padding: 0px; text-align: center; justify-content: center; display: flex;}
.card-slider .card-footer img{width: 50%!important;}
/* .card-slider .item,.card-slider .content,.card-slider .item,.card-slider .card {height: 100%;} */
/* .card-slider .owl-carousel .item{height: 100%!important;} */

.bg-yellow{background-color: #f2d5b0!important;}



@media (max-width: 400px) {
    .header .nav-bar ul{display:block; padding: 10px 0px; text-align: center;}
    .header .nav-bar ul li{padding: 10px 0px; font-weight: bold;}
    .header nav{justify-content: center;}
    .button{display: none;} 
    .header .row{flex-direction: row-reverse;}
    .landing-sec,.sec-3{background-image: none;}
    .landing-sec .content{width: 100%;}
    .sec-2 .container {background-image: none;}
    .sec-2 .content{margin-bottom: 0px ;}
    .btn-outlined{width: 100%; text-align: center; display: block;}
    .sec-2 a.btn-outlined{margin: 0px;}
    .sec-3 .card{margin: 20px;}
    .footer a.btn-outlined {display: block; margin-bottom: 30px;}

    /* internal */
    .process-sec{padding: 30px 0px;}
    .cap-sec,.app-sec,.app-sec  .content-detail div, .card-slider{padding: 0px;}
    .cap-sec .bg img{width: 100%;}
    .app-sec .content-detail {grid-template-columns: auto;}
    

}


@media (min-width: 900px) {

    .client-sec { grid-template-columns: repeat(5, 1fr); justify-content: left;}

   
    .slider-sec .slider .item{display: grid; grid-template-columns: 50% 50%;}
    .slider-sec .content .card{ border-bottom-left-radius: 15px!important; border-top-left-radius: 15px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;}
    .slider-sec .image img {border-bottom-right-radius: 15px; border-top-right-radius: 15px!important; border-top-right-radius: 0px; border-top-left-radius: 0px;}
    


  }