@media (min-width: 320px) and (max-width: 575.98px) { 

    body{
    padding: 0 8px;
}
.title h2 {
	font-size: 14px !important;
	
}

.title h3 {
	margin-top: 14px;
	margin-bottom: 18px;
    font-size: 24px;
}
    /* ===================== Navbar start ================================== */
    .navbar{
        background: white;
    }
      .navbar-toggler{
        border: 0;
    }
    .navbar-toggler:focus{
        box-shadow: none;
    }
    .navbar-toggler i {
        color: blue;
    }
   
    #navbar .navbar-nav .nav-item .nav-link{
        color: black;
    }
    #navbar .navbar-nav .nav-item .active{
        color: blue;
    }
     
    #navbar .navbar-nav {
	 gap: 5px;
   }

   #navbar {
	padding: 8px 0;
}


    /* ===================== Navbar end ================================== */


    /* ===================== Banner Start ================================== */
   #banner .top {
	text-align: center;
}

#banner .top h4 {
	padding-top: 6px;
	font-size: 20px;
	font-weight: 500;
}

#banner .bottom .social-container {
	width: auto;
	margin-top: 22px;
	margin-bottom: 72px;
	padding: 3px 6px;
	border-radius: 8px;
}

#banner .bottom .social-container i {
	font-size: 24px;
}

.medium {
	display: none;
}

/* Banner image container */
.banner_img {
  margin-top: -170px;
  display: flex;
  justify-content: center; /* horizontal center */
  align-items: center;     /* vertical center */
  
}

.banner_img img {
  max-width: 100%;
  height: auto;
}

#banner .top {
	max-width: 630px;
	padding-top: 100px;

}


    /* ===================== Banner end ================================== */


    /* ===================== About Start ================================== */
    
  :root {
            --primary-color: #e8bf96;
            --secondary-color: #1d1d1d;
            --text-color: #696969;
        }
        
        #about {
            padding: 60px 0;
            background: #FFF !important;
        }

        .about-tab-section .about-tab .about-tab-pills {
            background-color: #e8bf9659 !important;
            display: flex;
            flex-wrap: wrap;
            height: auto;
            border-radius: 30px;
            padding: 5px;
            margin-bottom: 30px;
        }

        .about-tab-section .about-tab .about-tab-pills .custom-nav-item {
            flex: 1 0 33.33%;
            min-width: 33.33%;
            text-align: center;
            margin-bottom: 5px;
        }

        .about-tab-section .about-tab .about-tab-pills .custom-nav-item .nav-link {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 12px 8px;
            font-weight: 500;
            font-size: 12px;
            color: #1d1d1d;
            border-radius: 100px;
            position: relative;
            text-transform: capitalize;
            transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
            overflow: hidden;
            height: 100%;
        }

      #about .expe-company {
        font-weight: 500 !important;
        font-size: 14px !important ;
      }

      #about h4{
        	font-size: 18px;
      }

      .about-tab-section .about-tab .about-tab-pills .custom-nav-item .nav-link.active {
        color: #1d1d1d;
        background-color: #e8bf96;
        border-radius: 28px;
      }

        .about-tab-section .about-tab .about-tab-pills .custom-nav-item .nav-link svg {
            margin-bottom: 5px;
            width: 18px;
            height: 18px;
        }

        .about-tab-section .about-tab .about-tab-content .about-data {
            padding-left: 0;
        }

        .about-tab-section .about-tab .about-tab-content .about-data li {
            display: grid;
            font-weight: 400;
            font-size: 12px;
            line-height: 1.6;
            padding-bottom: 8px;
            grid-template-columns: 100px 15px auto;
            word-break: break-word;
        }

        .about-tab-section .about-tab .experience-item {
            border-radius: 15px;
            padding: 20px;
            border: 2px solid rgba(0, 0, 0, 0.1);
            height: auto;
        }

        .about-tab-section .about-tab .experience-item .expe-year-section i {
            color: #e8bf96;
        }

        .about-tab-section .about-tab .experience-item .expe-year {
            font-size: 14px !important;
            color: #e8bf96;
            font-weight: 400 !important;
        }

        .about-tab-section .about-tab .experience-item .expe-company {
            font-size: 14px !important;
            text-transform: capitalize;
            margin-bottom: 15px;
            color: #696969;
            font-weight: 400 !important;
        }

        .about-tab-section .about-tab .experience-item .title {
            font-size: 18px !important;
        }

       
/* === Skill  Start ===== */
  
.Skill .progress_bar .skill {
	height: 120px;
}


.Skill h6 {
	font-size: 16px !important;
	
}

.Skill .container {
	margin-top: 50px;
	margin-bottom: 12px;
	
}



    /* ==== Skill  end ====== */

    /* ==== Certificate  Start ====== */
#pills-certificate .certificate-box {
	margin-top: 10px;
	margin-bottom: 110px;
	height: 330px;
	background: #fff;
	border: 5px solid #1565c0;
	border-radius: 20px;
	box-shadow: 0 10px 25px rgba(0,0,0,0.2);
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	transition: transform 0.4s ease, box-shadow 0.4s ease;
	width: 270px;
	
}
element {
	position: absolute;
	bottom: 5px;
	left: 50%;
	transform: translateX(-50%);
	padding: 6px 12px;
	background: rgb(76, 175, 80);
	color: rgb(255, 255, 255);
	border: medium;
	border-radius: 6px;
	cursor: pointer;
	font-size: 12px;
	font-weight: bold;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 10px;
	transition: 0.3s;
}
.certificate .title {
	position: absolute;
	bottom: -50px;
	left: 50%;
	transform: translateX(-50%);
	background: #1565c0;
	color: #fff;
	padding: 8px 22px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: bold;
	box-shadow: 0 5px 15px rgba(0,0,0,0.3);
	width: 250px;
	text-align: center;
}

    /* ==== Certificate  end ====== */

    
    /* ===================== About end ================================== */


    /* ==================== Work start============================== */


  #work {
    padding: 60px 4px; 
  }

  #work .projects-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
  }

  #work .projects-wrapper .work-container {
    margin: 0 auto;
    width: 100%;
  }

  /* Image smaller for mobile */
  #work .projects-wrapper .work-container .card-body {
    height: 200px; 
    border-radius: 4px;
  }

  #work .projects-wrapper .work-container .content {
    bottom: 15px;
    left: 50% !important;
    transform: translateX(-50%);
    text-align: center;
  }

  #work .projects-wrapper .work-container .content .content-title {
    font-size: 14px !important;
    padding: 4px 10px;
  }

  #work .projects-wrapper .work-container .content .tag {
    font-size: 10px !important;
    padding: 3px 10px;
  }

  #work .filter-options {
    text-align: center;
    margin-bottom: 20px;
  }

  #work .filter-options .categories {
	font-size: 12px;
	padding: 6px 12px;
	word-spacing: 2px;
	display: inline-block;
	margin: 3px;
}

#work .filter-options {
	display: flex !important;
	gap: 0px !important;
	justify-content: center !important;
	
  
}

    /* ==================== Work End============================== */









    /* ==================== Services start============================== */

#services {
	padding: 60px 0 60px;
}
.title h3 {
	margin-bottom: 40px;
	
}

#services .card {
	width: auto;
	height: 360px;
	padding: 24px;
}


#services .card i {
	font-size: 2.5rem;
}

#services .card .title {
	font-size: 1.3rem;
	line-height: 1rem;
	margin-block: 2rem 1rem;
}

.card .description {
	line-height: 1.4rem;
}

#services .box {
	margin-top: 20px;
}

    /* ==================== Services end============================== */





    /* ==================== Testimonial  Start============================== */


  
 
  #my-team {
    min-height: auto;
    padding: 40px 10px;
    
  }

  #my-team .container-slide {
    width: 100%;
    padding: 0 10px;
    
  }

  #my-team .slider-wrapper {
    margin: 0 10px 15px;
    padding: 15px;
  
  }

  #my-team .card {
    border-radius: 15px;
   
  }

  #my-team .card-img {
    width: 90px;
    height: 90px;
  }

  #my-team .content-box  {
     padding: 16px 8px;
  }
  #my-team .content-box .username {
    font-size: 16px !important;
  }

  #my-team .content-box .user-profession {
    font-size: 14px;
  }

  #my-team .social-icon {
    gap: 10px;
    padding: 20px 0;
  }

  #my-team .social-icon li a {
    font-size: 16px;
    height: 28px;
    width: 28px;
  }

  #my-team .text {
    width: 100%;
    font-size: 12px !important;
    margin-bottom: 10px !important;
    text-align: center;
  }
  #my-team .text h6 {
    font-size: 12px !important;
  }

  #my-team .btn {
	padding: 6px 10px;
	font-size: 10px;
	border-radius: 4px;
}

.swiper-slide-button.swiper-button-next {
	margin: -12px;
}
.swiper-slide-button.swiper-button-prev {
    margin: -12px;
}

    /* ==================== Testimonial end============================== */








    /* ==================== Blog start============================== */

#blog {
	padding: 60px 0 60px;
}
#blog .blog-content h6 a {
	font-size: 14px;
	font-weight: 700;

}

#blog .read-link {
   margin-top: 4px !important;
}


#blog .read-link a button {
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 500;
  border-radius: 6px;
}
#blog .blog-box {
   margin-top: 52px;
}

    
    /* ==================== Blog end============================== */


    /* ==================== Contact Part Start ============================== */

  #Contact_us {
    padding: 90px 16px; 
  }

  #Contact_us .title h2 {
    margin-bottom: 40px;
    font-size: 22px;
    text-align: center;
  }

  #Contact_us .container .row {
    flex-direction: column; 
    align-items: center;
  }

  #Contact_us .container .row .left h2 {
    font-size: 20px;
    margin-top: 20px;
    text-align: center;
  }

  #Contact_us .container .row .left h3 {
    width: 100%;
    font-size: 24px;
    text-align: center;
    margin-bottom: -20px !important;
  }

  #Contact_us .container .row .left h4 {
    width: 100%;
    font-size: 16px;
    text-align: center;
    margin-top: 0px;
  }

  #Contact_us .container .row .right form {
    margin-top: 25px;
    width: 100%;
  }

  #Contact_us .container .row .right form input,
  #Contact_us .container .row .right form .message input {
    width: 100%; 
    padding: 8px 15px;
    font-size: 12px;
  }

  #Contact_us .container .row .right button {
    width: 100%;
    padding: 8px 0;
    font-size: 18px;
    justify-content: center; 
  }

  .contact-left .title-section p {
    font-size: 14px !important;
    text-align: center;
  }

  .contact-left .contact-grid .contact-type {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 15px;
  }

  .contact-left .contact-grid .contact-type .contact-icon {
  width: 35px;
  height: 35px;
  border: 1px solid salmon;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ebb884;
  border-radius: 50px;
  margin-bottom: -4px;  
}


 

    /* ==================== Contact Part end ============================== */





    /* ==================== Footer start ============================== */
  footer {
    padding: 60px 20px 20px; 
    text-align: left; 
  }

 footer h5 {
  margin-top: 46px;
	margin-bottom: 14px;
	font-size: 18px;
}
footer p, footer a {
	font-size: 14px;
	margin-bottom: 6px;
	text-align: left;
}

  /* Social Icons */
 footer .social-icons {
	margin-top: 14px;
}

 footer .social-icons a {
	justify-content: flex-start;
	margin-bottom: 14px;
	font-size: 14px;
}

  footer .social-icons i {
    font-size: 18px;
    padding: 6px;
  }

  /* Newsletter */
  footer .newsletter {
    display: flex;
    justify-content: flex-start; 
    margin-top: 20px;
    flex-wrap: wrap;
  }

  footer .newsletter input {
	width: 100%;
	border-radius: 20px;
	margin-bottom: 10px;
	font-size: 14px;
}

footer .newsletter input {
	padding: 8px 0 8px 16px;
}

  footer .newsletter button {
	width: auto;
	border-radius: 22px;
	font-size: 14px;
	padding: 8px 17px;
}

  /* Footer bottom */
  .footer-bottom {
    font-size: 13px;
    margin-top: 56px !important;
    line-height: 1.6;
    text-align: left; 
  }
  .footer-bottom p{
    font-size: 11px;
    margin: 0 auto;
  }
  .footer-bottom p span{
    font-size: 12px;
  }

  


    /* ==================== Footer  end ============================== */


 

}