/* @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'); */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400..800&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* outline: 2px solid red; */
}
:root {
    --color-white: #fff;
    --color-lightwhite: #F8F8F8;
    --color-black: #000;
    --color-red: #702E52;
    --color-blue: #ebf3fc46;
    --color-darkwhite: #F3F5FC;
}
body{
    /* font-family: "Inter", sans-serif; */
      font-family: "Syne", sans-serif;
    transition: all .3s;
}

.just{
    text-align: justify;
}
a{
    text-decoration: none;
}
/* header_section---start---here  */
.header_section{
    background-color: var(--color-red);
}
/* header_section---ends---here  */
/* navbar_section---start----here  */
.navbar {
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.123);
    background-color: var(--color-yellow);
}
.nav-link{
    color: var(--color-black);
    font-weight:600;
    font-size: 1.5rem;
}
.nav-link:hover{
    color: var(--color-red);
}
.nav-link.active{
    color: var(--color-red);
}
.navbar-toggler-icon{
    color: var(--color-red);
}
/* navbar_section---ends----here  */
/* banner_section---start---here  */
.banner_section{
    background-image: url('../images/home-banner.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.call-btn-2{
    background-color: var(--color-white);
    color: var(--color-red);
    font-size: 1rem;
    border-radius: 8px;
    border: 2px solid var(--color-white);
    transition: all .3s;
}
.call-btn-2:hover{
    background-color: var(--color-red);
    color: var(--color-white);
    border: 2px solid var(--color-white);
}
.call-btn{
    background-color: var(--color-red);
    color: var(--color-white);
    font-size: 1rem;
    border-radius: 8px;
    border: 2px solid var(--color-red);
    transition: all .3s;
}
.call-btn:hover{
    background-color: var(--color-white);
    color: var(--color-red);
    border: 2px solid var(--color-red);
}
/* banner_section---ends---here  */
/* strip_section---start---here   */
.strip_section{
    background-color: #D9D9D9;
}
/* strip_section---ends---here   */
/* hero_section---start----here  */
.hero_subtitle{
    color: var(--color-red);
    /* text-decoration: underline; */
}
.hero_card{
    border: 1px solid var(--color-lightwhite);
    background-color: var(--color-white);
    color: var(--color-black);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    height: 100%;
    min-height: 290px;
    cursor: pointer;
    transition: all .3s;
}
.hero_card:hover{
    background-color: var(--color-red);
    color: var(--color-white);
}
.hero_card:hover .image-circle i{
    color: var(--color-white);
}
.hero_card p{
    font-size: 12px;
}
.image-circle{
    height: 35px;
    width: 35px;
    border-radius: 100%;
    background-color: var(--color-blue);
    font-size: 32px;
    position: relative;
}
.image-circle i{
    position: absolute;
    top: -40%;
    color: var(--color-red);
}
.sub-hero_section{
    background-color: var(--color-lightwhite);
    position: relative;
    height: 200px;
    margin-top: -8%;
    z-index: -1;
}
.hero-shape{
    position: absolute;
    top: 30%;
    left: 0;
}
/* hero_section---ends----here  */
/* connect_section----start----here   */
.connect_section{
    background-color: var(--color-lightwhite);
}
/* connect_section----ends----here   */
/* choose_section---start---here  */
.choose_section{
    background-image: url('../images/shape-img.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-color: var(--color-lightwhite);
}
.choose-card{
    border: 2px solid var(--color-white);
    transition: all .3s;
    cursor: pointer;
    height: 100%;
    min-height: 250px;
    border-radius: 10px;
}
.choose-card:hover{
    border: 2px solid var(--color-red);
}

/* choose_section---ends---here  */
/* main_section---start---here  */
.main_section{
    background-image: url('../images/main-bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
/* main_section---ends---here  */
/* plan_section---start---here  */
.plan_section{
    background-color: #F5F5F8;
}
.plan_section h5{
    color: var(--color-red);
    text-transform: uppercase;
}
.plan-card{
    background-color: var(--color-white);
    cursor: pointer;
    transition: all .3s;
}
.plan-card:hover{
    background-color: var(--color-red);
}
.plan-card:hover .fw-bold{
    color: var(--color-white);
}
.plan-card:hover .img-wrapper{
    border: 1px solid var(--color-white);
}
.plan-card:hover .plan_list li::before {
    color: var(--color-white);
  }
.plan-card:hover .plan_list li {
    color: var(--color-white);
  }
.plan-card:hover .call-btn{
    background-color: var(--color-white);
    color: var(--color-red) !important;
    border: 2px solid var(--color-white);
}
.img-wrapper{
    border: 1px solid var(--color-red);
    border-radius: 50px;
    color: var(--color-red);
}
.plan-img-wrapper{
    height: 40px;
    width: 40px;
    border-radius: 100%;
    background-color: var(--color-lightwhite);
}
.plan_list li::before {
    content: "\2714";
    color: var(--color-red);
    margin-right: 8px;
  }
.plan_list li{
    font-weight: 600;
    line-height: 2;
}  
/* plan_section---ends---here  */
/* about_section---start---here  */
.about_section{
    background-color: var(--color-darkwhite);
}
/* about_section---ends---here  */
/* internet_section---start----here   */
.internet_section{
    background-color: var(--color-white);
}
.internet-card{
    background-color: #F5F5F8;
}
.internet-data p{
    color: var(--color-red);
}
/* internet_section---ends----here   */
/* footer_section---start---here  */
.footer_section{
   background-color: var(--color-black);
    color: var(--color-white);  
}
.footer_section p a{
    color: var(--color-white);
    font-size: 1.3rem;
}
.footer_section p a:hover{
    color: var(--color-red);
}
/* footer_section---ends---here  */
/* sticky_section---start---here  */
.sticky_section{
    background-color: var(--color-red);
    position: sticky;
    bottom: 0;
    z-index: 9999;
}
.sticky_section a span{
    background-color: var(--color-white);
    border-radius: 8px;
}
.sticky_section a{
    color: var(--color-black);
    font-weight: 700;
    font-size: 1.3rem;
}
/* sticky_section---ends---here  */
/* contact page  */
.contact-choose_section{
    background-color: var(--color-darkwhite);
}
.contact-choose-card p{
    text-align: justify;
}
.contact-choose-card{
    border: 2px solid var(--color-red);
    transition: all .3s;
    cursor: pointer;
    height: 100%;
    min-height: 250px;
    background-color: var(--color-white);
}
.contact-choose-card:hover{
    background-color: var(--color-red) !important;
    color: var(--color-white);
}
.contact-choose-card:hover a{
    color: var(--color-white) !important;
}
.text-justify{text-align:justify;}
p{text-align:justify;}