@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
@import url("https://use.typekit.net/wuh2mjh.css");

body{    font-family: "Rubik", sans-serif;}



.jub{font-family: "jubilat-variable", sans-serif;
font-variation-settings: "wght" 400;}




.container{width:100%; padding-left: 20px; padding-right: 20px; margin: 0 auto;}
.btn{font-weight:500; text-transform: uppercase; padding:15px 22px; text-align: center; font-size:13px; border:1px solid #000000; line-height:1rem; display:flex; justify-content: center; border-radius: 30px; letter-spacing: 0; transition: all ease-in-out 0.2s;}

.btn:hover{transform: translateY(-2px); box-shadow: 0 10px 5px rgba(0,0,0,0.1);}

.primary.btn{background-color: #F9E668; border-color:#F9E668;}
.secondary.btn{background-color:  #ffffff; border-color:#40301E;}

.navigation ul{display: flex; gap:30px;}
.navigation ul li a{font-size:15px; transition: all ease-in-out 0.2s; display: block;}
.navigation ul li a:hover{transform: translateY(-2px);}
.navigation ul li:last-child a{text-transform: uppercase; text-decoration: underline;}

.box{background-color: #ffffff; border-radius: 10px; transition: all ease-in-out 0.2s;}
.box:hover{transform: translateY(-3px); box-shadow: 0 25px 30px rgba(0,0,0,0.1);}
.box .inner{border-radius: 8px; overflow: hidden;}
.box .inner img{border-radius: 0 0 8px 8px; width:100%; transition: all ease 0.2s; transform-origin: top center;}
.box:hover .inner img{transform: scale(1.1); transition: all ease 5s;}

.box .text{display: flex; flex-direction: column; gap:20px; padding:30px 20px}
.box .text h3{font-size:26px; line-height:1em;}
.box .text p{font-size:14px; line-height:1.4;}


.swiper-wrapper {
  transition-timing-function: linear !important;
}
.swiper-slide {
  width: auto; /* Required for continuous scrolling */
}


@media all and (min-width:640px)
{

}

@media all and (min-width:768px)
{
    .btn{font-size:16px}
    .navigation ul li a{font-size:16px;}
}

@media all and (min-width:1024px)
{
.navigation ul{gap:45px;}

    
}

@media all and (min-width:1280px)
{
    .box{border-radius: 30px;}
    .box .inner{border-radius: 15px;}
    .box .inner img{border-radius: 0 0 15px 15px;}
    .box .text h3{font-size:42px;}
    .box .text p{font-size:17px;}
}

@media all and (min-width:1536px)
{
.container{max-width:1560px;}
.box .text p{font-size:16px;}
.box .text{padding: 50px 40px;}
}