/* ===== webiste color ===== */
 :root {
     --primary-color: #1363C6;
     --secondary-color: #15ACE1;
     --light-color: #F4F7FE;
     --dark-color: #14183E;
 }

 /* ===== fot mobile screen ===== */
 @media (max-width:576px) {

     /* ==== navbar section ===== */
     .button_1 {
         padding: 10px 10px;
     }

     .button_2 {
         padding: 5px 5px;
     }


     /* ===== about sectio ===== */
     .about_section_content {
         padding-left: 10px !important;
         padding-top: 50px !important;
     }

     .card {
         width: 100% !important;
     }

     /* ===== feature section ===== */
     .feature_user_counter {
         display: inline-block !important;
         width: 98% !important;
         margin-left: 0px !important;
     }

     .feature_userr {
         width: 100% !important;
     }

 }



 /* ===== for tablets screen ====== */
 @media (max-width:768px) {

     /* ===== card section ===== */
     .card {
         width: 100% !important;
     }

     .card_item {
         margin-top: 30px !important;
         margin-left: 0px !important;
     }

     .card-item1 {
         margin-top: 20px !important;
     }

     /* ===== feature section ===== */
     .feature_images img {
         margin-left: 0px !important;
     }

     .feature_user2 {
         margin-left: 0px !important;
     }

     .feature_images {
         padding-top: 50px !important;
     }

     /* ===== images section ===== */
     .imgaes_card1 {
         margin-top: 20px !important;
     }

     .imgaes_card2 {
         margin-top: 20px !important;
     }

     .imgaes_card3 {
         margin-top: 20px !important;
     }

     .images_heading {
         padding: 5px !important;
         margin-top: 10px !important;
     }

     .images_heading h1 {
         font-size: 30px !important;
     }
 }




 /* ====== for destop and loptopn screen ===== */
 @media (max-width:992px) {

     /* ===== navbar section ===== */
     .nav-item {
         padding-top: 20px !important;
     }

     .navbar_icons {
         padding: 5px !important;
     }

     .navbar-brand h1 {
         font-weight: 700 !important;
     }

     .navbar-toggler {
         border: 1px solid var(--light-color) !important;
     }

     .navbar-toggler .navbar-toggler-icon {
         background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
     }

     .navbar-collapse {
         background-color: var(--primary-color) !important;
     }


     /* ===== hero section ===== */


     .hero_btn {
         text-align: center !important;
     }

     .hero_heading {
         text-align: center !important;
     }

     .hero_heading h1 {
         font-size: 3rem !important;
     }

     .hero_paragraph {
         text-align: center !important;
     }

     .btn_section {
         text-align: center !important;
     }

     /* ===== about section ===== */
     .about_wrapper {
         padding-top: 0px !important;
     }

     .about_images {
         padding-top: 0px !important;
     }

     /* ===== cards section ===== */
     .card {
         width: 100% !important;
     }

     .card_section {
         padding-top: 100px !important;
     }

     /* ===== images section ===== */
     .imgaes_card1 {
         margin-top: 20px !important;
     }

     .imgaes_card2 {
         margin-top: 20px !important;
     }

     .imgaes_card3 {
         margin-top: 20px !important;
     }

 }






 /* ===== for large screen ===== */
 @media (max-width:1200px) {
     header {
         height: auto !important;
     }


     /* ===== about section ===== */
     .about_wrapper {
         padding-top: 0px !important;
         margin-top: 0px !important;
     }

     .about_images img {
         margin-top: 170px !important;
         background-color: black !important;
     }

     .about_images::after {
         margin-top: 170px !important;

     }

     /* ===== card section ===== */
     .card {
         width: 100% !important;
     }

 }

 /* ========= for large screen ============ */
 @media (max-width:1400px) {

     /* ===== hero section ===== */
     header {
         height: auto !important;
     }

     /* ===== card section ===== */
     .card {
         width: 100% !important;
         height: auto !important;
     }
 }