pricing.css

*{

padding: 0%;
margin: 0%;
box-sizing: border-box;
/* overflow: hidden; */
}
:root {
--bs-blue: #091242;
--bs-white:white;
--bs-green:#2FB95D;
--bs-gold:#FFB629;
}
/* nav bar  */
.navbar{
display: flex;
width: 100%;
justify-content: space-between;
padding: 1rem;
background-color: var(--bs-blue);
z-index: 199;
}
.logo h4{
font-size: 27px;
color: var(--bs-white);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.logo{
display: flex;
gap: 1rem;
z-index:10;
}
.nav-menu{
display: none;
}
.hamburger{
position: relative;
display: block;
width: 35px;
cursor: pointer;
height: 5px;
background: none;
appearance: none;
outline: none;
border: none;
z-index: 100;
}
.hamburger .bar,.hamburger:after, .hamburger:before{
content: '';
display: block;
width: 100%;
height: 5px;
background-color:var(--bs-white);
margin: 3px 0px ;
transition: 0.4s;
}
.mobile-nav{
display: block;
z-index: 0;
}
.hamburger.is-active:after{
transform: rotate(45deg) translate(-8px, -9px);
}
.hamburger.is-active:before{
transform: rotate(-45deg) translate(-5px,4px);
}
.hamburger.is-active .bar{
opacity: 0;
}
.mobile-nav{
position: fixed;
top: 0;
left: 100%;
width: 100%;
min-height:50vh;
display: block;
z-index: 98;
background-color:var(--bs-blue);
padding-top: 50px;
transition: 0.4s;
z-index:1;
}
.mobile-nav.is-active{
left: 0;
}
.mobile-nav a{
display: block;
width: 100%;
margin:  16px 16px;
text-align: center;
padding: 12px 12px;
color: var(--bs-white);
text-decoration:none ;
text-transform: capitalize;
transition: 0.4s;
font-size: 19px;
}
.head-message{
display:none ;
}
.hero-section{
    background-image: linear-gradient(91deg, #032D5F 19.32%, rgba(9, 18, 66, 0.35) 59.95%),url(img/princing\ bg.png);
    background-size:cover;
background-repeat: no-repeat;
/* width: 100%; */
}
.head-message p{
color: var(--bs-white);
color: var(--bs-white);
font-family: 'Bebas Neue', sans-serif;
font-family: 'Kanit', sans-serif;
font-family: 'Nosifer', sans-serif;
font-family: 'Oswald', sans-serif;
margin-top: .6rem;
text-transform: capitalize;
}
.hero-content{
padding: 1rem 2rem 0rem 2rem;
/* padding-left: 10rem; */
}
.hero-content p{
background: rgba(4, 28, 55, 0.50);
max-width: 24%;
border-left: solid 2px gold;
color: var(--bs-white);
padding: .3rem;
font-family: 'Bebas Neue', sans-serif;
font-family: 'Kanit', sans-serif;
font-family: 'Nosifer', sans-serif;
font-family: 'Oswald', sans-serif;
}
.hero-content h1{
color: var(--bs-white);
font-family: 'Bebas Neue', sans-serif;
font-family: 'Kanit', sans-serif;
font-family: 'Nosifer', sans-serif;
font-family: 'Oswald', sans-serif;
padding-top: 1rem;
font-size: 20px;
padding-bottom: 3rem;
}
.pricing-section{
    padding: 4rem 4rem 4rem 4rem ;

}
.pricing-section h1,h5{
   text-align: center;
   color: #091242;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    }
    .test img{
    width: 70%;
    }
    .test{
    display: block;
    gap: 2rem;
    margin-left: 3rem;
    margin-right: 3rem;
    }
    .test2 h5{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* font-size: 25px; */
    color: #091242;
    }
    .test p{
    color: #091242;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    font-size: 13px;
    }
    .test2{
    padding:2rem 1rem 0rem 1rem;
    background: #F4F4F4;
    text-align: left;
    border-radius: 20px;
    }
    .test3 p{
    color: #091242;
    }
    .test3{
    padding:2rem 1rem 0rem 1rem;
    background: #091242;
    text-align: left;
    border-radius: 20px;
    }
    .test4{
    padding:2rem 1rem 0rem 1rem;
    background: var(--bs-gold);
    text-align: left;
    border-radius: 20px;
    }
    .none{
    display: none;
    }
    .pricing-section{
        padding: 4rem 4rem 4rem 4rem ;
   
   }
   .pricing-section h1,h5{
       text-align: center;
       color: #091242;
       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   }
   .plans{
       width: 100%;
       display: block;
       gap: 3rem;
       justify-content: center;
       margin: auto;
       
       padding-top: 3rem;
   }
   .pricing-section h1{
    font-size: 18px;
   } 
   .basics{
       padding: 2rem;
       background: #F4F4F4;
       margin-bottom: 2rem;
   }
   .basics h4{
       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
       font-size: 15px;
       text-align: center;
       padding-bottom: 2rem;
   
   
   }
   .basics h2{
       font-size: 30px;
       font-weight: 700;
       padding-bottom: 2rem;
   }
   .basics strong{
       font-size: 14px;
       font-weight: 500;
   }
   .basics p{
       padding-bottom: .4rem;
       color: #091242;
       padding-top:.3rem;
       font-size: 14px;
       font-weight: 700;
       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   }
   .basics button{
       margin-top: 1rem;
       border: none;
       background-color: #091242;
       padding: .6rem;
       border-radius: 10px;
   
   }
   .basics a{
       color: var(--bs-white);
       text-decoration: none;
   }
   .Standard{
       padding: 2rem;
       margin-bottom: 2rem;

       background:#032D5F;
   }
   .Standard h4{
       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
       font-size: 15px;
       text-align: center;
       padding-bottom: 2rem;
   
   color: var(--bs-white);
   }
   .Standard h2{
       font-size: 30px;
       font-weight: 700;
       padding-bottom: 2rem;
       color: white;
   }
   .Standard strong{
       font-size: 14px;
       font-weight: 500;
       color: white;
   }
   .Standard p{
       padding-bottom: .4rem;
       color: #091242;
       padding-top:.3rem;
       font-size: 14px;
       font-weight: 700;
       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
       color: white;
   }
   .Standard button{
       margin-top: 1rem;
       border: none;
       background-color:var(--bs-gold);
       padding: .6rem;
       border-radius: 10px;
   
   }
   .Standard a{
       color: var(--bs-white);
       text-decoration: none;
   }
   .Premium{
       padding: 2rem;
       background: #F4F4F4;
       margin-bottom: 2rem;

   }
   .Premium h4{
       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
       font-size: 15px;
       text-align: center;
       padding-bottom: 2rem;
   
   
   }
   .Premium h2{
       font-size: 30px;
       font-weight: 700;
       padding-bottom: 2rem;
   }
   .Premium strong{
       font-size: 14px;
       font-weight: 500;
   }
   .Premium p{
       padding-bottom: .4rem;
       color: #091242;
       padding-top:.3rem;
       font-size: 14px;
       font-weight: 700;
       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   }
   .Premium button{
       margin-top: 1rem;
       border: none;
       background-color: #091242;
       padding: .6rem;
       border-radius: 10px;
   
   }
   .Premium a{
       color: var(--bs-white);
       text-decoration: none;
   }
@media (min-width:768px) {
.navbar{
/* display: flex; */
width: 100%;
/* justify-content: space-between; */
padding: 1rem;
}
.logo{
font-size: 30px;
z-index: 20;
}
.nav-menu{
display: none;
}
.hamburger{
position: relative;
display: block;
width: 35px;
cursor: pointer;
height: 5px;
background: none;
appearance: none;
outline: none;
border: none;
z-index: 100;
}
.hamburger .bar,.hamburger:after, .hamburger:before{
content: '';
display: block;
width: 100%;
height: 5px;
background-color: var(--bs-white);
margin: 3px 0px ;
transition: 0.4s;
}
.mobile-nav{
display: block;
}
.hamburger.is-active:after{
transform: rotate(45deg) translate(-8px, -9px);
}
.hamburger.is-active:before{
transform: rotate(-45deg) translate(-5px,4px);
}
.hamburger.is-active .bar{
opacity: 0;
}
.mobile-nav{
position: fixed;
top: 0;
left: 100%;
width: 100%;
min-height:50vh;
display: block;
z-index:1;
background-color:var(--bs-blue);
padding-top: 50px;
transition: 0.4s;
}
.mobile-nav.is-active{
left: 0;
}
.mobile-nav a{
display: block;
width: 100%;
margin:  16px 16px;
text-align: center;
padding: 12px 12px;
background-color:var();
color:var(--bs-white);
text-decoration:none ;
text-transform: capitalize;
transition: 0.4s;
}
.mobile-nav a:hover{
background-color:var(--secondary);
color:var(--light) ;
} 
.hero-section{
    background-image: linear-gradient(91deg, #032D5F 19.32%, rgba(9, 18, 66, 0.35) 59.95%),url(img/princing\ bg.png);

background-size:cover;
background-repeat: no-repeat;
/* width: 100%; */
}
.hero-content h1{
padding-bottom: 7rem;
}
.pricing-section{
    padding: 4rem 4rem 4rem 4rem ;

}
.pricing-section h1,h5{
   text-align: center;
   color: #091242;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
}
@media (min-width:1024px) {
.navbar{
display: flex;
}
#navabar{
transition: 0.4s;
}
.nav-menu{
display: flex;
background-color:rgba(9, 18, 66, 0.25);
justify-content:center;
padding: 1rem;
gap: 5rem;
}
.mobile-nav{
display: none;
}
.mobile{
display: none;
}
.nav-menu ul{
display: flex;
gap: 2rem;
list-style: none;
width: 100%;
}
.ali a{
color: var(--bs-white);
text-decoration: none;
text-transform: capitalize;
font-size: 17px;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: 600;
}
.hero-section{
background-image: linear-gradient(91deg, #032D5F 19.32%, rgba(9, 18, 66, 0.35) 59.95%),url(img/princing\ bg.png);
background-size:cover;
background-repeat: no-repeat;
/* width: 100%; */
}
.head-message{
display: block;
}
.head-message p{
color: var(--bs-white);
color: var(--bs-white);
font-family: 'Bebas Neue', sans-serif;
font-family: 'Kanit', sans-serif;
font-family: 'Nosifer', sans-serif;
font-family: 'Oswald', sans-serif;
margin-top: .6rem;
text-transform: capitalize;
}
.hero-content{
padding: 5rem;
/* padding-left: 10rem; */
}
.hero-content p{
background: rgba(4, 28, 55, 0.50);
max-width: 7%;
border-left: solid 2px gold;
color: var(--bs-white);
padding: .3rem;
font-family: 'Bebas Neue', sans-serif;
font-family: 'Kanit', sans-serif;
font-family: 'Nosifer', sans-serif;
font-family: 'Oswald', sans-serif;
}
.hero-content h1{
color: var(--bs-white);
font-family: 'Bebas Neue', sans-serif;
font-family: 'Kanit', sans-serif;
font-family: 'Nosifer', sans-serif;
font-family: 'Oswald', sans-serif;
padding-top: 2rem;
font-size: 40px;
padding-bottom: 3rem;
}
.pricing-section{
     padding: 4rem 4rem 4rem 4rem ;

}
.pricing-section h1,h5{
    text-align: center;
    color: #091242;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.plans{
    width: 70%;
    display: flex;
    gap: 3rem;
    justify-content: center;
    margin: auto;
    padding-top: 3rem;
}
.basics{
    padding: 2rem;
    background: #F4F4F4;
}
.basics h4{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 15px;
    text-align: center;
    padding-bottom: 2rem;


}
.basics h2{
    font-size: 30px;
    font-weight: 700;
    padding-bottom: 2rem;
}
.basics strong{
    font-size: 14px;
    font-weight: 500;
}
.basics p{
    padding-bottom: .4rem;
    color: #091242;
    padding-top:.3rem;
    font-size: 14px;
    font-weight: 700;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.basics button{
    margin-top: 1rem;
    border: none;
    background-color: #091242;
    padding: .6rem;
    border-radius: 10px;

}
.basics a{
    color: var(--bs-white);
    text-decoration: none;
}
.Standard{
    padding: 2rem;
    background:#032D5F;
}
.Standard h4{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 15px;
    text-align: center;
    padding-bottom: 2rem;

color: var(--bs-white);
}
.Standard h2{
    font-size: 30px;
    font-weight: 700;
    padding-bottom: 2rem;
    color: white;
}
.Standard strong{
    font-size: 14px;
    font-weight: 500;
    color: white;
}
.Standard p{
    padding-bottom: .4rem;
    color: #091242;
    padding-top:.3rem;
    font-size: 14px;
    font-weight: 700;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: white;
}
.Standard button{
    margin-top: 1rem;
    border: none;
    background-color:var(--bs-gold);
    padding: .6rem;
    border-radius: 10px;

}
.Standard a{
    color: var(--bs-white);
    text-decoration: none;
}
.Premium{
    padding: 2rem;
    background: #F4F4F4;
}
.Premium h4{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 15px;
    text-align: center;
    padding-bottom: 2rem;


}
.Premium h2{
    font-size: 30px;
    font-weight: 700;
    padding-bottom: 2rem;
}
.Premium strong{
    font-size: 14px;
    font-weight: 500;
}
.Premium p{
    padding-bottom: .4rem;
    color: #091242;
    padding-top:.3rem;
    font-size: 14px;
    font-weight: 700;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.Premium button{
    margin-top: 1rem;
    border: none;
    background-color: #091242;
    padding: .6rem;
    border-radius: 10px;

}
.Premium a{
    color: var(--bs-white);
    text-decoration: none;
}
.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    }
    .test img{
    width: 70%;
    }
    .test{
    display: flex;
    gap: 2rem;
    padding-top: .4rem;
    margin-left: 3rem;
    margin-right: 3rem;
    }
    .test h5{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 25px;
    }
    .test2{
    padding: 2rem;
    background: #F4F4F4;
    text-align: left;
    border-radius: 20px;
    }
    .test3{
    padding: 2rem;
    background: #091242;
    text-align: left;
    border-radius: 20px;
    }
    .test4{
    padding: 2rem;
    background: var(--bs-gold);
    text-align: left;
    border-radius: 20px;
    }
    .none{
    display:block;
    }
}