/* Extra small devices (portrait phones, less than 576px) */
 @media (max-width: 575.98px) {


   /*=========== common style ========== */
   body {
     text-align: center;
   }

   .c-target,
   .c-btn {
     margin: 15px 0;
   }

   #hero,
   #skill,
   #portfolio,
   #review {
     padding: 120px 0;
   }

   /* ==============header section start ============ */
   .menu {
     padding-top: 0px;
   }

   .menu li {
     margin-top: 1rem !important;
     width: fit-content;
   }

   /* ==============header section end ============ */
   /*========= hero section start =========== */

   .hero-wrapper {
     text-align: center;
   }

   .hero-left h1 {
     padding-bottom: 10px;
     text-align: center;
     font-size: 58px;
   }

   .hero-left h2 {
     font-size: 30px;
     height: 10vh;
   }

   .hero-right {
     margin-top: 60px;
     position: unset !important;
     clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%) !important;
   }

   .scroll-down {
     bottom: 6px;
   }

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


   /*================= about section start ============= */
   #about {
     padding: 120px 0;
   }

   .order-0 {
     order: 1 !important;
   }

   .img-fluid.abt-bg-one {
     z-index: -1;
     position: absolute;
     background: var(--six-color);
     width: 100%;
     height: 50vh;
     top: -30px;
   }

   .img-fluid.abt-img-two {
     position: unset;
     width: 100%;
   }

   .about-content {
     text-align: center;
     margin-bottom: 60px;
   }

   /*================= about section end ============= */

   /*================== skill section start ==================== */

   .tech-skill {
     text-align: center;
   }

   .pro-skills {
     text-align: left;
   }

   .circle-chart {
     width: 87px;
     height: 87px;
     margin-bottom: 0;
   }

   /*================== skill section end ==================== */

   /*================= portfolio section start =============== */
   #portfolio {
     padding-top: 120px;
     padding-bottom: 0;
   }

   .portfolio-btn {
     display: none;
   }


   .mixit-item {
     margin-bottom: 60px;
   }

   /*================= portfolio section end =============== */

   /* ==============review section start ================ */
   .review-cont {
     padding-top: 60px;
   }

   /* ==============review section end ================ */

   /* ==================contact section start ===================== */
   .contact-right {
     padding-top: 60px;
   }

   /* ==================contact section end ===================== */


   /*============ footer section start ================ */
   footer {
     padding-top: 60px;
   }

   .foot-wrapper {
     padding-top: 0;
   }

   .foot-head input {
     width: 100%;
   }

   .foot-nav ul li {
     width: fit-content;
   }

   .foot-link {
     display: flex;
     justify-content: center;
   }

   .foot-link li {
     margin-top: 10px;
     display: block;
     width: fit-content;
   }

   /*============ footer section end ================ */

   /*========= topbtn ============= */

   #topbtn {
     right: 10px;
     font-size: 18px;
     width: 40px;
     height: 40px;
   }
 }

 /*================= Small devices (landscape phones, 576px and up)====================*/
 @media (min-width: 576px) and (max-width: 767.98px) {

   /*=========== common style ========== */
   body {
     text-align: center;
   }

   .c-target,
   .c-btn {
     margin: 15px 0;
   }

   #hero,
   #skill,
   #portfolio,
   #review,
   #about {
     padding: 150px 0;
   }

   /* ==============header section start ============ */
   .menu {
     padding-top: 0px;
   }

   .menu li {
     margin-top: 1rem !important;
     width: fit-content;
   }

   /* ==============header section end ============ */
   /*========= hero section start =========== */

   .hero-wrapper {
     text-align: center;
   }

   .hero-left h1 {
     padding-bottom: 10px;
     text-align: center;
     font-size: 58px;
   }

   .hero-left h2 {
     font-size: 30px;
     height: 10vh;
   }

   .hero-right {
     margin-top: 60px;
     position: unset !important;
     clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%) !important;
   }

   .scroll-down {
     bottom: 6px;
   }

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


   /*================= about section start ============= */
   .order-0 {
     order: 1 !important;
   }

   .img-fluid.abt-bg-one {
     z-index: -1;
     position: absolute;
     background: var(--six-color);
     width: 100%;
     height: 70vh;
     top: -30px;
   }

   .img-fluid.abt-img-two {
     position: unset;
     width: 100%;
   }

   .about-content {
     text-align: center;
     margin-bottom: 80px;
   }

   /*================= about section end ============= */

   /*================== skill section start ==================== */

   .tech-skill {
     text-align: center;
   }

   .pro-skills {
     text-align: left;
   }

   .circle-chart {
     width: 87px;
     height: 87px;
     margin-bottom: 0;
   }

   /*================== skill section end ==================== */

   /*================= portfolio section start =============== */
   #portfolio {
     padding-bottom: 0;
   }

   .portfolio-btn {
     display: none;
   }


   .mixit-item {
     margin-bottom: 60px;
   }

   /*================= portfolio section end =============== */

   /* ==============review section start ================ */
   .review-cont {
     padding-top: 60px;
   }

   /* ==============review section end ================ */

   /* ==================contact section start ===================== */
   #contact {
     padding: 0;
   }

   .contact-right {
     padding-top: 60px;
   }

   .contact-wrapper {
     margin: 150px 0;
   }

   /* ==================contact section end ===================== */


   /*============ footer section start ================ */
   footer {
     padding-top: 60px;
   }

   .foot-wrapper {
     padding-top: 60px;
   }


   .foot-nav ul li {
     width: fit-content;
   }


   /*============ footer section end ================ */

   /*========= topbtn ============= */

   #topbtn {
     right: 10px;
     font-size: 18px;
     width: 40px;
     height: 40px;
   }




 }



 /* ==============================medium devices (tablets, 768px up  ===========================================*/
 @media (min-width: 768px) and (max-width: 991.98px) {

   /*=========== common style ========== */
   body {
     text-align: left;
   }

   .c-target,
   .c-btn {
     margin: 15px 0;
   }

   #hero,
   #skill,
   #portfolio,
   #review {
     padding: 80px 0;
   }

   /* ==============header section start ============ */
   .menu {
     padding-top: 0px;
   }

   .menu li:not(:last-child) {
     margin-right: 2rem !important;
   }

   /* ==============header section end ============ */
   /*========= hero section start =========== */

   .hero-left h1 {
     padding-bottom: 10px;
     text-align: center;
     font-size: 58px;
   }

   .hero-left h2 {
     font-size: 30px;
     height: 10vh;
   }

   .hero-right {
     margin-top: 60px;
     position: unset !important;
     clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%) !important;
   }

   .scroll-down {
     bottom: 6px;
   }

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


   /*================= about section start ============= */
   #about {
     padding: 100px 0;
   }

   .align-items-start {
     align-items: center !important;
   }

   .img-fluid.abt-bg-one {
     z-index: -1;
     position: absolute;
     background: var(--six-color);
     width: 100%;
     height: 41vh;
     top: -30px;
   }

   .img-fluid.abt-img-two {
     position: unset;
     width: 100%;
   }

   .about-content {
     text-align: center;
     margin-bottom: 80px;
   }

   /*================= about section end ============= */

   /*================== skill section start ==================== */


   .tech-skill {
     text-align: center;
   }

   .pro-skills {
     text-align: left;
   }

   .circle-chart {
     width: 87px;
     height: 87px;
     margin-bottom: 0;
   }

   /*================== skill section end ==================== */

   /*================= portfolio section start =============== */
   #portfolio {
     padding-bottom: 0;
   }

   .portfolio-btn {
     display: none;
   }


   .mixit-item {
     margin-bottom: 60px;
   }

   /*================= portfolio section end =============== */

   /* ==============review section start ================ */

   /* ==============review section end ================ */

   /* ==================contact section start ===================== */
   .contact-wrapper {
     margin: 0;
   }

   /* ==================contact section end ===================== */


   /*============ footer section start ================ */
   footer {
     padding-top: 60px;
   }

   .foot-wrapper {
     padding-top: 60px;
   }


   .foot-nav ul li {
     width: fit-content;
   }


   /*============ footer section end ================ */





 }


 /* Large devices (desktops, 992px and up) */
 @media (min-width: 992px) and (max-width: 1199.98px) {
   /* ================hero section start =============== */

   /* ================hero section end =============== */
 }

 /* Large devices ( large desktops, 992px and up) */
 @media (min-width: 1200px) and (max-width: 1399.98px) {

   /*============ about section start ================= */
   .img-fluid.abt-bg-one {
     top: -123px;
   }

   .img-fluid.abt-img-two {
     top: -80px;
   }

   /*============ about section end ================= */
 }

 /* Extra extra large devices ( extra extra large desktops, 1200px and up) */
 @media (min-width: 1400px) {

   /*============ about section start ================= */
   .img-fluid.abt-bg-one {
     width: 65%;
     top: -160px;
   }

   .img-fluid.abt-img-two {
     top: -130px;
     width: 65%;
   }

   /*============ about section end ================= */
 }