@media (max-width:1446px) {

   ul {
      font-size: 19px;
   }

}

@media (max-width:1400px) {
   .head-main {
      width: 80%;
      justify-content: space-between;
      padding: 0 25px;
   }

   .first {
      width: auto;
      font-size: 30px;
   }

   .second {
      width: auto;
      flex: 1;
      display: flex;
      justify-content: center;
   }

   ul {
      gap: 18px;
      font-size: 18px;
   }

   .btn {
      padding: 14px 24px;
      font-size: 18px;
   }
    .skills{
      width: 85%;
   }

   .my-skill{
      font-size: 40px;
   }
   .about-left{
      height: auto;
   }
}

@media (max-width:1128px) {
   .about {
      width: auto;
   }
}

@media (max-width:1100px) {
   ul {
      gap: 12px;
      font-size: 15px;
      flex-wrap: wrap;
   }

   .first {
      font-size: 26px;
   }

   .btn {
      padding: 10px 18px;
      font-size: 15px;
   }

   .about-text {
      font-size: 14px;
   }

   .skills{
      width: 90%;
   }

   .my-skill{
      font-size: 36px;
   }

   .skill-info span:first-child{
      font-size: 22px;
   }
   .project-title{
      font-size: 36px;
   }

}

@media (max-width:914px) {
   ul {
      gap: 10px;
      font-size: 14px;
   }

   .first {
      font-size: 24px;
   }

   .btn {
      padding: 8px 14px;
      font-size: 14px;
   }

   .main1 {
      display: block;
      justify-items: center;
   }

   .left {
      width: 90%;
   }

   .p {
      width: 100%;
   }

   .right {
      margin-top: 50px;
   }

   .baner {
      padding: 0px 0px;
   }

   .side {
      display: block;
      justify-items: center;
   }

   .img {
      height: auto;
      width: 100%;
   }

   .main-img {
      width: 63%;
   }

   .about-right {
      width: 100%;
   }

   .first-about {
      margin-top: 20px;
   }

   .who {
      font-size: 40px;
      margin-top: 20px;
   }

   .about-left {
      width: 90%;
      height: auto;
   }

   .about-text {
      font-size: 16px;
      margin-top: 8px;
   }

   .d {
      margin-top: 30px;
      padding: 18px 46px;
   }
   .container{
   grid-template-columns: repeat(2, 1fr);
   }
}

@media (max-width:900px){
   .my-skill{
      font-size: 32px;
   }

   .skill-info{
      font-size: 16px;
   }

   .skill-info span:first-child{
      font-size: 20px;
   }
   .project-title{
      font-size:36px;
   }
}

@media (max-width:851px) {
   ul {
      gap: 5px;
      font-size: 12px;
   }
}

@media (max-width:771px) {

   ul{
      display: block;
      padding: 20px 0px;
   }

   .icon1{
      display: block;
      position: absolute;
      left: 90%;
      font-size: 30px;
      top: 0%;
   }
  
 ul li{
   padding: 20px;
   font-size: 17px;
 }
 ul li:hover::before {
   width: 70%;
   margin-left: 0px;
}

   #av{
      position: absolute;
      left: -120%;
      height: 100vh;
  
   }


   .head-main {
      justify-content: space-between;
      width: 82%;
   }

   .first {
      font-size: 22px;
   }

   .icon {
      display: block;
   
   }

   .head {
      justify-items: center;
   }
    .skills{
      width: 90%;
      padding: 15px;
   }

   .my-skill{
      font-size: 28px;
   }

   .skill-info{
      font-size: 14px;
   }

   .skill-info span:first-child{
      font-size: 18px;
   }
   .project-title{
      font-size: 33px;
   }
   .container{
      grid-template-columns: repeat(1, 1fr);;
   }
}

@media (max-width:549px) {
   .who {
      width: auto;
      font-size: 32px;
   }

   .main-img {
      height: 440px;
      width: 280px;
   }

   .first-about {
      font-size: 38px;
   }
}

@media (max-width:480px) {

   .first {
      font-size: 23px;
   }

   .circle {
      height: 350px;
      width: 350px;
   }

   .about {
      font-size: 26px;
   }

   .first-about {
      font-size: 29px;
   }

   .main-img {
      width: 330px;
      height: 380px;
   }

   .img {
      margin-top: -50px;
   }

   .who {
      margin-top: -50px;
   }
    .my-skill{
      font-size: 24px;
   }

   .skill-info span:first-child{
      font-size: 16px;
   }

   .prog{
      height: 10px;
   }
   .project-title{
      font-size: 24px;
   }
}

@media (max-width:380px) {
   .circle {
      height: 270px;
      width: 270px;
   }

   .about {
      font-size: 22px;
   }

   .head-main {
      width: 75%;
   }

   .main-img {
      width: 290px;
      height: 380px;
   }

   .d {
      font-size: 17px;
   }

   
}
/* ===================== 1200px ===================== */

@media (max-width:1200px){

.contact-sub{
    width:95%;
    gap:20px;
}

.contact-sub1{
    width:55%;
}

.contact-sub2{
    width:42%;
}

.need-custom{
    padding:15px 20px;
}

.need-get,
.need-icon{
    padding:8px 20px;
}

.lr{
    width:55%;
    margin-left:20px;
}

}

/* ===================== 992px ===================== */

@media (max-width:992px){

.my-contact{
    font-size:40px;
}

.contact-sub{
    flex-direction:column;
    align-items:center;
    gap:30px;
}

.contact-sub1,
.contact-sub2{
    width:100%;
}

.phone{
    width:90%;
}

.need{
    width:90%;
    height:auto;
    padding-bottom:20px;
}

.need-custom{
    padding:20px;
}

.need-get,
.need-icon{
    padding:8px 20px;
}

.lr{
    width:50%;
    margin-left:20px;
}

}

/* ===================== 768px ===================== */

@media (max-width:769px){

.my-contact{
    font-size:34px;
    width: 96%;
}
.contact-sub2{
   margin-top: 40px;
}
.contact-sub1{
   width: 96%;
}
.first-con-sub{
    grid-template-columns:1fr;
}

.ss,
.dd,
.contact-sub1 textarea{
    width:100%;
    box-sizing:border-box;
    font-size:18px;
}

.contact-sub1{
    padding:20px;
}

.contact-sub1 textarea{
    min-width:100%;
    max-width:100%;
}

.phone{
    width:95%;
}

.need{
    width:95%;
}

.lr{
    width:70%;
    margin:20px auto 0;
    display:block;
}

}

/* ===================== 576px ===================== */

@media (max-width:576px){

.my-contact{
    font-size:30px;
}

.contact-sub{
    width:100%;
}

.contact-sub1,
.contact-sub2{
    border-radius:12px;
    width:96%;
}

.ss,
.dd{
    padding:14px;
    font-size:16px;
}

.contact-sub1 textarea{
    font-size:16px;
}

.phone{
    flex-direction:column;
   
    height:auto;
    padding:20px 0;
}

.icon-side{
    margin-left:0;
    margin-top:15px;
}

.need-custom{
    font-size:20px;
    text-align:center;
}

.need-get{
    text-align:center;
}

.need-icon{
    font-size:15px;
}

.lr{
    width:80%;
}

}

/* ===================== 480px ===================== */

@media (max-width:480px){

.my-contact{
    font-size:26px;
}

.contact-sub1{
    padding:15px;
}

.ss,
.dd,
.contact-sub1 textarea{
    font-size:15px;
}

.icon-circle{
    width:45px;
    height:45px;
    font-size:20px;
}

.icon-side span{
    font-size:18px !important;
}

.need-custom{
    font-size:18px;
}

.need-get,
.need-icon{
    font-size:14px;
}

.lr{
    width:90%;
}

}

/* ===================== 380px ===================== */

@media (max-width:380px){

.my-contact{
    font-size:22px;
}

.contact-sub1{
    padding:12px;
}

.phone{
    width:100%;
}

.need{
    width:100%;
}

.need-custom{
    font-size:17px;
}

.need-get,
.need-icon{
    font-size:13px;
}

.lr{
    font-size:15px;
}

}

/* ===================== 280px ===================== */

@media (max-width:280px){

.my-contact{
    font-size:18px;
}

.ss,
.dd,
.contact-sub1 textarea{
    padding:10px;
    font-size:13px;
}

.icon-circle{
    width:38px;
    height:38px;
    font-size:16px;
}

.icon-side span{
    font-size:15px !important;
}

.icon-side{
    font-size:12px;
}

.need-custom{
    font-size:15px;
}

.need-get,
.need-icon{
    font-size:12px;
}

.lr{
    width:100%;
    font-size:13px;
}

}