/* ============================================================= B-Vocal Landing Page Css =============================================================*/


/*.... Font Face .... */
@font-face                                                  {font-family: 'Nunito';src: url('../fonts/Nunito-Black.woff2') format('woff2'),url('../fonts/Nunito-Black.woff') format('woff');font-weight: 900;font-style: normal;font-display: swap;}
@font-face                                                  {font-family: 'Nunito';src: url('../fonts/Nunito-Bold.woff2') format('woff2'),url('../fonts/Nunito-Bold.woff') format('woff');font-weight: bold;font-style: normal;font-display: swap;}
@font-face                                                  {font-family: 'Nunito';src: url('../fonts/Nunito-ExtraBold.woff2') format('woff2'),url('../fonts/Nunito-ExtraBold.woff') format('woff');font-weight: bold;font-style: normal;font-display: swap;}
@font-face                                                  {font-family: 'Nunito';src: url('../fonts/Nunito-Light.woff2') format('woff2'),url('../fonts/Nunito-Light.woff') format('woff');font-weight: 300;font-style: normal;font-display: swap;}
@font-face                                                  {font-family: 'Nunito';src: url('../fonts/Nunito-ExtraLight.woff2') format('woff2'),url('../fonts//Nunito-ExtraLight.woff') format('woff');font-weight: 200;font-style: normal;font-display: swap;}
@font-face                                                  {font-family: 'Nunito';src: url('../fonts/Nunito-SemiBold.woff2') format('woff2'),url('../fonts/Nunito-SemiBold.woff') format('woff');font-weight: 600;font-style: normal;font-display: swap;}
@font-face                                                  {font-family: 'Nunito';src: url('../fonts/Nunito-Regular.woff2') format('woff2'),url('../fonts/Nunito-Regular.woff') format('woff');font-weight: normal;font-style: normal;font-display: swap;}
@font-face                                                  {font-family: 'Nunito';src: url('../fonts/Nunito-Medium.woff2') format('woff2'),url('../fonts/Nunito-Medium.woff') format('woff');font-weight: 500;font-style: normal;font-display: swap;}

:root       {
    --white:#FFFFFF;
    --black:#000000;

    --primary-color:#3B3D94;
    --primary-100:#D6EFFF;
    --primary-700:#4247B3;

    --natural-200:#E3E5E7;
    --natural-600:#808690;
    --natural-800:#61646C;

    --header-bg:rgba(255, 255, 255, 0.8);
    --brand-logo-bg:#EBEBEB;
    --navbar-link-color:rgba(51, 52, 56, 1);
    
    --common-paragraph:#505258;
    --secondary-section-bg:#F7FAFC;
    --tab-button-heading:#333438;
}

/* -- Common Element CSS Start -- */ 
*                                                           {margin: 0px; padding: 0px; box-sizing: border-box;transition: all ease-in-out 0.25s;}
*:focus, *:active, *:visited, *:hover                       {text-decoration: none;outline: none;box-shadow: none;}
html                                                        {scroll-behavior: smooth;}
body                                                        {font-family:'Nunito' ; font-size: 16px; line-height: 22px;}

img                                                         {border: 0px; max-width: 100%;width: 100%;height: auto;transition: all ease-in-out 0.25s;}
ul,ol                                                       {list-style: none;}
a                                                           {text-decoration: none; outline: none;transition: all ease-in-out 0.25s;}
.common-section-spacing                                     {margin-top: 120px;}

/* ..................................... Typography ..................................... */
h1                                                          {font-size: 48px; line-height: 66px;color:var(--white);margin: 0;}
h2                                                          {font-size: 40px; line-height: 54px;margin: 0;font-weight: 600;text-align: center;}
h3                                                          {font-size: 32px; line-height: 44px;margin: 0;}
h4                                                          {font-size: 28px; line-height: 38px;margin: 0;}
h5                                                          {font-size: 24px; line-height: 32px;margin: 0;}
h6                                                          {font-size: 20px; line-height: 28px;margin: 0;}
p                                                           {font-size: 18px; line-height: 24px;margin: 0;}
small                                                       {font-size: 14px; line-height: 20px;margin: 0;}
.p-small                                                    {font-size: 12px;line-height: 16px;color: var(--natural-800);}
/* ..................................... Typography Ends ..................................... */

/*...................................... Common ....................................... */
button                                                      {padding: 10px;min-width: 170px;font-size: 16px; line-height: 22px; background: var(--primary-color);transition: all ease-in-out 0.25s;border-radius: 30px;text-align: center;color: var(--white);border: 1px solid var(--primary-color);font-weight: 500;}
button:hover                                                {background: transparent;color: var(--primary-color);}
input,
textarea                                                    {padding: 24px;background-color: var(--secondary-section-bg);border: none;border-bottom: 2px solid var(--natural-200);color: var(--black);}
input:focus, textarea:focus                                 {border-color: var(--primary-color);}
input::-ms-input-placeholder,
textarea::-ms-input-placeholder                             { color: var(--natural-800);}
input::placeholder, textarea::placeholder                   {color: var(--natural-800);}
textarea::-webkit-resizer                                   {display: none;}
.container                                                  {width: 100%;}
.common-heading                                             {display: flex;flex-direction: column;gap: 20px;align-items: center;justify-content: center;margin: 0 auto;max-width: 630px;}
.common-heading p                                           {color: var(--common-paragraph);margin: 0 auto;}
.work-section .common-heading p,
.faq-section .common-heading p,         
.contact-section .common-heading p                          {max-width: 468px;}

/* ..................................... Header Css ..................................... */
.navbar                                                     {padding: 25px 0;background: var(--header-bg);}
.navbar-items                                               {gap: 56px;}
.navbar a, 
footer a                                                    {font-size: 20px;line-height: 28px;color: var(--navbar-link-color);position: relative;}
.navbar a:hover,
footer a:hover                                              {color: var(--primary-color);}
.navbar-items a::after                                      {content: '';position: absolute;width: 0%;height: 2px ;background-color: var(--primary-color);left: 50%;transform: translateX(-50%);bottom: -2px;transition: all ease-in-out 0.25s;}
.navbar-items a:hover::after                                {width: 100%;}
.brand-logo img                                             {width: 170px;aspect-ratio: 3.4 / 1 ;object-fit: contain;object-position: left;}
.navbar-toggler,
.offcanvas-header .btn-close                                {padding: 0;border: none;width: fit-content;min-width: 40px}
.offcanvas-header                                           {padding: 20px ;}
.navbar-toggler:focus                                       {box-shadow: none;}
/* .offcanvas.offcanvas-end                                 {width: 100%;} */

/* ..................................... Header Css Ends ..................................... */

/* ..................................... Banner Section Css  ..................................... */
.banner-section-main                                        {padding-inline: 12px;}
.banner-section                                             {padding: 97px 0 0;max-width: 1326px;margin: 100px auto 0;background:url(../images/purple-banner.png) no-repeat center;background-size: cover;border-radius: 40px;overflow: hidden;}
.banner-left                                                {max-width: 558px;}
.banner-left h1                                             {transition: all linear 0.25s;opacity: 0;}
.banner-left p                                              {color: var(--primary-100);margin: 16px 0 28px;transition: all linear 0.25s;opacity: 0;}
.secondary-button                                           {display: flex;align-items: center;gap: 10px;color: var(--white);position: relative;width: fit-content;}
.secondary-button .arrow-container                          {max-width: 15px;}
.secondary-button .arrow-container img                      {transform-origin: center;}
.secondary-button::after                                    {content: '';width: 100%;position: absolute;left: 0;bottom: -4px;background-color: white;height: 1px;transition: all ease-in-out 0.25s;}
.secondary-button:hover::after                              {width: 0;}
.secondary-button:hover img                                 {transform: rotate(-45deg);}
.banner-container                                           {gap: 80px;align-items: end;}
.banner-right                                               {max-width: 554px;overflow: hidden;}
.banner-right img                                           {aspect-ratio:0.98 / 1;width: 100%;transform: translateY(100%);position: relative;opacity: 0;transition: all linear 0.25s;}
.banner-download                                            {color: var(--white);margin-top: 88px;font-weight: 600;}
.download-link-container                                    {gap: 24px;}
.download-link-container a                                  {cursor:not-allowed;}
.banner-section .download-link-container                    {margin-top: 12px;margin-bottom: 97px;}
.download-link-container img                                {max-width: 178px;}
.download-section .banner-download                  {margin-top: 0;}
/* ..................................... Banner Section Css Ends ..................................... */

/* ..................................... Work Section Css  ..................................... */
.work-section                                               {overflow: hidden;}
.work-section-card-container                                {margin-top: 80px;position: relative;}
.work-card                                                  {display: flex;flex-direction: column;align-items: center;text-align: center;max-width: 300px;margin: 0 auto;position: relative;height: 100%;}
.work-card::after                                           {content: '';position: absolute;width: 120%;left: 50%;top: 37px;height: 1px;border-bottom: 3px dashed var(--natural-200);z-index: -1;}
.work-section .row .col-md-4:last-child .work-card::after   {content: none;}
.work-card-number                                           {width: 74px;aspect-ratio: 1;border-radius: 50%;background-color: var(--primary-color);display: flex;align-items: center;justify-content: center;color: var(--white);}
.work-card-header                                           {margin: 46px 0 18px;font-weight: 700;}
.work-card-header h6                                        {font-weight: 600;color: var(--black);}
.work-card-description                                      {color: var(--natural-800);}
/* ..................................... Work Section Css Ends ..................................... */

/* ..................................... Features Section Css  ..................................... */
.features-section                                           {padding: 120px 0;background: var(--secondary-section-bg);overflow: hidden;}
.tab-section                                                {margin-top: 80px;}
.tab-container                                              {gap: 24px;}
.tab-button-container                                       {gap: 24px;}
.tab-button                                                 {padding: 24px 20px;background-color: var(--white);border-radius: 12px;cursor: pointer;box-shadow: 0px 0px 20px 0px #0063F514;max-width: 315px;min-height: 228px;opacity: 0;transform: translateY(50%);transition: all linear 0.25s;}
.tab-button:hover                                           {box-shadow: 0px 0px 20px 0px #7E94DC}
.tab-button-img img                                         {width:40px ;aspect-ratio: 1;}
.tab-button-heading                                         {margin: 24px 0 16px;color: var(--tab-button-heading);font-weight: 600;}
.tab-button-description                                     {color: var(--natural-800);font-weight: 400;}
.tab-content img                                            {width: 100%;aspect-ratio: 0.85 / 1;object-fit: cover;border-radius: 16px;}
.tab-pane                                                   {transition: all ease-in-out 0.3s;opacity: 0; }
.tab-pane.show                                              {opacity: 1;}
.tab-button-card-img                                        {margin-top: 20px;display: none;border-radius: 12px;overflow: hidden;aspect-ratio: 1;}
.tab-button-card-img img                                    {aspect-ratio: 1;object-fit: cover;}
/* ..................................... Features Section Css Ends  ..................................... */

/* ..................................... FAQ's Section Css   ..................................... */
.accordion                                                  {gap: 24px;}
.accordion-section                                          {margin: 80px auto 0;max-width: 946px;;}
.accordion-button                                           {display: flex;align-items: center;gap: 24px;padding: 24px 20px 0;}
.accordion-button h6                                        {color: var(--black);}
.accordion-icon-container                                   {width: 28px;position: relative;aspect-ratio: 1;}
.accordion-icon-container img                               {aspect-ratio: 1;width: 28px;position: absolute;left: 0;top: 0;}
.accordion-button:not(.collapsed) .accordion-plus           {transform: rotate(-90deg) ;opacity: 0;transform-origin: center;}
.accordion-button:not(.collapsed) .accordion-minus          {opacity: 1;}
.accordion-minus                                            {opacity: 0;}
.accordion-icon-container span                              {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}
.icon-minus                                                 {width: 7px;height: 2px;background: var(--black);}
.icon-plus                                                  {width: 2px;height: 7px;background: var(--black);}
.accordion-button::after                                    {content: none;}
/* .accordion-button:not(.collapsed) .icon-plus             {transform: rotate(-90deg) translate(-50%, -50%);opacity: 0;} */
.accordion-button:not(.collapsed)                           {background:var(--secondary-section-bg) ;}
.accordion-item:first-of-type>.accordion-header .accordion-button   {border: none;border-radius: 0;}
.accordion-item:first-of-type                               {border: none;}
.accordion-button:focus                                     {box-shadow: none;}
.accordion-item                                             {border: none;}
.accordion-body                                             {border: none;background-color: var(--secondary-section-bg);padding: 16px 20px 24px 70px;color: var(--natural-800);}
.accordion                                                  {border: none !important;--bs-accordion-border-color:none}
.accordion-icon-container                                   {flex-shrink: 0;}
/* ..................................... FAQ's Section Css Ends  ..................................... */

/* ..................................... Download  Section Css   ..................................... */
.download-section                                           {}
.download-section-container                                 {display: flex;align-items: center;justify-content: space-between;padding: 60px;background: url(../images/download-section-bg.png) no-repeat center;background-size: cover;border-radius: 40px;max-height: 654px;overflow: hidden;gap: 32px;}
.qr-code-container                                          {width: 170px;aspect-ratio: 1;}
.qr-code-container img                                      {width: 170px;aspect-ratio: 1;}
.download-left,
.download-right                                             {max-width: 558px;width: 50%;}
.download-content                                           {margin: 40px 0 44px;display: flex;flex-direction: column;color: var(--white);gap: 8px;}
.download-section .download-link-container                  {margin: 12px 0 0 ;}
.download-right                                             {display: flex;gap: 30px;}
.mobile-animation-container                                 {display: flex;flex-direction: column;gap: 30px;  }
.animation-one                                              {animation: upward 20s linear  infinite ;}
.animation-two                                              {animation: downward 20s  linear infinite ;}
@keyframes upward                                           {
    0%                                                      {transform: translateY(25%);}
    100%                                                    {transform: translateY(-25%);}
}
@keyframes downward                                         {
    0%                                                      {transform: translateY(-25%);}
    100%                                                    {transform: translateY(25%);}
}
/* ..................................... Download Section Section Css Ends  ..................................... */

/* ..................................... Contact  Section Css Ends  ..................................... */
.contact-container                                          {width: 100%;margin-top: 75px;}
.contact-container .row                                     {row-gap: 24px;}
.contact-link                                               {padding: 16px 18px;width: 100%;background-color: var(--secondary-section-bg);border-radius: 12px;display: flex;gap: 12px;align-items: center;position: relative;z-index: 1;overflow: hidden;}
.contact-link::after                                        {content: '';position: absolute;width: 0%;height: 100%;background: var(--primary-color);left: 0;top: 0;transition: all ease-in-out 0.25s;z-index: -1;}
.contact-link:hover::after                                  {width: 100%;}
.contact-link:hover .contact-link-details                   {color: var(--white);}
.contact-link-image                                         {width: 44px;aspect-ratio: 1;}
.contact-link-details                                       {color: var(--black);display: flex;flex-direction: column;gap: 2px;transition: all ease-in-out 0.01s;}
.map-container                                              {border-radius: 12px;overflow: hidden;margin-top: 24px;}
.contact-right                                              {padding: 40px;background: var(--secondary-section-bg);border-radius: 24px;height: 100%;}
.contact-right form                                         {margin-top: 24px;;display: flex;flex-direction: column;}
form button                                                 {margin-top: 52px;}
.contact-link-image                                         {flex-shrink: 0;}
form input,
form textarea                                               {border-radius: 0;}
/* ..................................... Contact Section Section Css Ends  ..................................... */

/* ..................................... Footer Css Ends  ..................................... */
footer                                                      {border-top: 1px solid var(--natural-600);padding: 60px 0 0;}
.footer-logo                                                {width: 170px;height: 50px;background:var(--brand-logo-bg) ;}
.footer-left h5                                             {color: var(--primary-700);margin-top: 24px;}
.footer-left                                                {max-width: 364px;}
.footer-right                                               {display: flex;flex-direction: column;gap: 24px;align-items: end;}
.footer-container                                           {padding-bottom: 36px;border-bottom: 1px solid var(--natural-200);display: flex;align-items: center;justify-content: space-between;}
.copyright-section                                          {padding: 24px 0;display: flex;justify-content: space-between;align-items: center;}
/* ..................................... Footer Css Ends  ..................................... */

/* ..................................... Responsive Starts ..................................... */
@media (min-width: 1400px)                                  {
    .container                                              {max-width: 1140px;}
}

@media screen and (max-width:1550px)                        {
    .container                                              {max-width: 1140px;}
    /* Typography */
    h1                                                      {font-size: 44px; line-height: 60px;}
    h2                                                      {font-size: 38px; line-height: 50px;}
    h3                                                      {font-size: 30px; line-height: 40px;}
    h4                                                      {font-size: 26px; line-height: 34px;}
    /* Header */
    .navbar                                                 {padding: 22px 0;}
}
@media screen and (max-width: 1199px)                       {
    .container                                              {max-width: 940px;}
    /* Typography */
    h1                                                      {font-size: 40px; line-height: 56px;}
    h2                                                      {font-size: 34px; line-height: 48px;}
    h3                                                      {font-size: 28px; line-height: 38px;}
    h4                                                      {font-size: 24px; line-height: 32px;}
    h5                                                      {font-size: 22px; line-height: 30px;}
    h6                                                      {font-size: 19px; line-height: 24px;}
    p                                                       {font-size: 16px; line-height: 24px;}
    /* Common */
    .common-section-spacing                                 {margin-top: 80px;}
    /* Header */
    .navbar a, footer a                                     {font-size: 18px;line-height: 24px;}
    .navbar-items                                           {gap: 26px;}
    /* Banner */
    .banner-container                                       {gap: 40px;}
    .banner-section                                         {padding: 80px 0px 0 40px;}
    .banner-left,
    .banner-right                                           {max-width: 50%;}

    .work-section-card-container                            {margin-top: 60px;}
    .work-card-number                                       {width: 66px;}
    .work-card::after                                       {top: 33px;}
    .work-card-header                                       {margin-top: 36px;}
    /*  */
    .features-section                                       {padding: 80px 0;}
    .tab-section                                            {margin-top: 60px;}
    .tab-button-heading                                     {margin: 16px 0 12px;}
    /*  */
    .accordion-section                                      {margin-top: 60px;}
    .qr-code-container img,
    .qr-code-container                                      {width: 150px;}
    .download-content                                       {margin: 20px 0 ;}
    .download-section-container                             {max-height: 620px;padding: 50px;border-radius: 20px;}
    /*  */
    .contact-container                                      {margin-top: 60px;}

}
@media screen and (max-width: 991px)                        {
    .container                                              {max-width: 750px;}
    /* Typography */
    h1                                                      {font-size: 32px; line-height: 42px;}
    h2                                                      {font-size: 30px; line-height: 40px;}
    h3                                                      {font-size: 26px; line-height:34px ;}
    h4                                                      {font-size: 22px; line-height: 30px;}
    h5                                                      {font-size: 20px; line-height: 28px;}
    h6                                                      {font-size: 18px; line-height: 24px;}
    .common-section-spacing                                 {margin-top: 60px;}
    /* Header */

    .navbar-items                                           {gap: 20px;}
    /* Banner */
    .banner-download                                        {margin-top: 40px;}
    .banner-section .download-link-container                {margin-bottom: 60px;}
    .banner-section                                         {padding: 60px 30px 0;}
    .work-section-card-container                            {margin-top: 40px;}
    .work-card-number                                       {width: 60px;}
    .work-card-header h6                                    {min-height: 48px;}
    /* .tab-container */
    .tab-container                                          {flex-direction: column;gap: 16px;}
    .tab-button-container                                   {flex-direction: row !important;gap: 16px;}
    .tab-button                                             {min-height: 160px;padding: 20px;display: flex;flex-direction: column;justify-content: space-between;}
    .tab-content                                            {display: none;}
    .tab-content img                                        {aspect-ratio: 1;}
    .tab-button-heading                                     {margin: 12px 0 10px;}
    .tab-button-card-img                                    {display: block;}
    .tab-button-container > div                             {width: 50%;}
    .tab-section                                            {margin-top: 40px;}
    .features-section                                       {padding: 60px 0;}
    /*  */
    .accordion-section                                      {margin-top: 40px;}
    .accordion                                              {gap: 20px;}
    /*  */
    .qr-code-container img                                  {width: 130px;}
    .qr-code-container                                      {width: 130px;}
    .download-right                                         {gap: 20px;}
    .mobile-animation-container                             {gap: 20px;}
    /*  */
    .contact-container                                      {margin-top: 40px;}
    .contact-container .row                                 {row-gap: 18px;}
    .contact-right                                          {padding: 30px;border-radius: 12px;}
    .contact-right form                                     {margin-top: 20px;}
    form button                                             {margin-top: 40px;}
    input, textarea                                         {padding: 18px;}

}
@media screen and (max-width:767px)                         {
    .container                                              {max-width: 540px ;}
    /* Typography */
    h1                                                      {font-size: 32px; line-height: 40px;}
    h2                                                      {font-size: 28px; line-height: 36px;}
    h3                                                      {font-size: 24px; line-height: 32px;}
    h4                                                      {font-size: 20px; line-height: 28px;}
    h5                                                      {font-size: 18px; line-height: 24px;}
    small                                                   {font-size: 12px; line-height: 18px;}
    .p-small                                                {font-size: 10px;line-height: 14px;}
    /* Header */
    .navbar-items                                           {flex-direction: column;margin-block: 40px !important; align-items: center;gap: 40px;}
    .navbar                                                 {padding: 16px 0;}
    /*  */
    .banner-section                                         {border-radius: 20px;margin-top: 82px;}
    .banner-container                                       {flex-direction: column;align-items: center;justify-content: center;text-align: center;gap: 20px;}
    .banner-section .secondary-button                       {margin: 0 auto;}
    .banner-section .download-link-container                {justify-content: center;margin-bottom: 40px;gap: 16px;}
    .download-link-container img                            {max-width: 150px;}
    .banner-left                                            {max-width: 100%;}
    .banner-right                                           {max-width: 70%;}
    /*  */
    .work-card                                              {flex-direction: row;max-width: 100%;gap: 16px;align-items: baseline;text-align: start;}
    .work-section-card-container .row                       {row-gap: 20px;}
    .work-card-number                                       {flex-shrink: 0;}
    .work-card-header                                       {margin: 0;}
    .work-card-header h6                                    {min-height: unset;margin-bottom: 8px;}
    .work-card::after                                       {left: 27px;width: 1px;height: 100%;border-left:3px dashed var(--natural-200);}
    .work-card-number                                       {width: 54px;}
    /*  */
    .tab-content                                            {width: 60%;}
    .features-section                                       {padding: 40px 0;}
    .tab-button-container > div                             {width: 100%;}   
    .tab-button                                             {max-width: 100%;display: flex;gap: 8px;align-items: center;min-height: unset;padding:20px;flex-direction: row;}
    .tab-button-container                                   {flex-direction: column !important;width: 100%;}
    .tab-button-img                                         {flex-shrink: 0;}
    .tab-button-card-img                                    {width: 220px;margin-top: 0;flex-shrink: 0;}
    /*  */
    .accordion-section                                      {margin-top: 20px;}
    .accordion-button                                       {padding: 20px 16px 0;gap: 16px;}
    .accordion-body                                         {padding:16px 20px 16px 60px ;}
    .accordion-button                                       {align-items: start;}
    /*  */
    .download-section-container                             {flex-direction: column;padding-bottom: 0;border-radius: 10px;padding-inline: 20px;padding-top: 40px;}
    .download-left, .download-right                         {width: 100%;}
    .download-section-container                             {max-height: unset;}
    .download-right                                         {max-height: 500px;overflow: hidden;align-items: center;justify-content: center;}
    .download-left                                          {display: flex;flex-direction: column;align-items: center;text-align: center;}
    .contact-container                                      {margin-top: 30px;}
    .contact-link                                           {align-items: baseline;}
    /*  */
    .footer-container                                       {flex-direction: column;}
    footer .navbar-items                                    {flex-direction: row;gap: 20px;margin-block: 20px !important;}
    .footer-left                                            {max-width: unset;display: flex;flex-direction: column;align-items: center;text-align: center;}
    .footer-left h5                                         {margin-top: 12px;}
    .footer-right                                           {gap: 0;align-items: center;}
    footer                                                  {padding: 20px 0 0 ;}
    footer .brand-logo img                                  {object-position: center;}
    .copyright-section                                      {padding: 16px 0;}
}
@media screen and (max-width: 575px)                        {
    .container                                              {max-width: 100%;}
    /* Typography */
    h1                                                      {font-size: 26px; line-height: 38px;}
    h2                                                      {font-size: 24px; line-height: 32px;}
    h3                                                      {font-size: 20px; line-height: 28px;}
    h4                                                      {font-size: 18px; line-height: 24px;}
    h5                                                      {font-size: 16px; line-height: 24px;}
    .common-section-spacing                                 {margin-top: 40px;}
    /* navbar */
    .navbar                                                 {padding: 12px 0;}
    /*  */
    .banner-section                                         {border-radius: 10px;padding: 40px 10px 0;background-position: -150px;}
    .banner-container                                       {gap: 0;}
    .banner-right                                           {max-width: 80%;}
    .tab-button                                             {padding: 16px ;}
    .features-section                                       {padding: 30px 0;}
    .accordion-body                                         {padding: 12px 12px 12px 60px;}
    .download-section-container                             {padding-top: 20px;}
    .contact-container                                      {margin-top: 30px 20px;}
    .contact-right                                          {padding: 20px 16px;}
    footer a                                                {font-size: 16px;}
}
@media screen and (max-width: 480px)                        {
    .tab-button                                             {flex-direction: column;}
    .tab-button-card-img                                    {width: 280px;aspect-ratio: 1;}
}