*{
    margin: 0;
    padding: 0;
}
.sonu-portfolio-parent{
    height: auto;
    /* background-color: beige; */
    display: flex;
    background-color: #151515;
}
.sonu-portfolio-parent .sonu-portfolio-left{
    width: 20%;
    height: 735px;
    /* border: 1px solid black; */
    background-color: #222222;
    position: fixed;
}
.sonu-portfolio-left .sonu-portfolio-left-top{
    height: 180px;
    /* border: 1px solid red; */
    display: flex;
    align-items: center;
    justify-content: center;
   
}
.sonu-portfolio-left-top .sonu-logo{
   height: 180px;
    display: flex;
   align-items: center;
   justify-content: center;
   position: absolute;
}
.sonu-portfolio-left-top .sonu-logo a{
     color: #dfdeda;
    font-weight: 600;
    padding: 15px 20px;
    font-size: 30px;
    letter-spacing: 2px;
    position: relative;
    text-decoration: none;
}
.sonu-portfolio-left-top .sonu-logo a::before{
    content: ' ';
    position: absolute;
    width: 20px;
    height: 20px;
    border-bottom: 5px solid #ec3819;
    border-left: 5px solid #ec3819;
    bottom: 0;
    left: 0;
}
.sonu-portfolio-left-top .sonu-logo a::after{
    content: ' ';
    position: absolute;
    width: 20px;
    height: 20px;
    border-top: 5px solid #ec3819;
    border-right: 5px solid #ec3819;
    top: 0;
    right: 0;
}
.sonu-portfolio-left-top .sonu-logo a span{
    /* font-family: 'Clicker Script', cursive; */
    font-family: Brush Script MT;
    font-weight: 500;
    /* font-family: 80px; */
}

.sonu-portfolio-left .sonu-portfolio-left-down{
    height: 530px;
    /* border: 1px solid red; */
    display: flex;
    align-items: center;
    justify-content: center;
    
}
.sonu-portfolio-left-down ul li{
     padding: 10px 0px;
    margin-bottom: 15px;
    display: block;
    
}
.sonu-portfolio-left-down ul li a:hover{
    color: #ec3819;
}
.sonu-portfolio-left-down ul li a{
    text-decoration: none;
    font-weight: 600;
    /* border-bottom: 1px solid #e8dfec; */
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    display: block;
    color: #dfdeda;
}
.sonu-portfolio-left-down ul li .active{
    color: #ec3819;
}
.sonu-portfolio-left-down ul li i{
    margin-right: 15px;
}
.sonu-portfolio-parent .sonu-portfolio-right{
    width: 80%;
    height: auto;
    margin-left: 305px;
    /* display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid black;
    background-color: #151515; */
}
.sonu-portfolio-right .sonu-portfolio-sub-right{
     width: 100%;
    height: 735px;
    /* margin-left: 305px; */
    display: flex;
    align-items: center;
    justify-content: center;
    /* border: 1px solid black; */
    background-color: #151515;
}
.sonu-portfolio-right .sonu-portfolio-container-right{
    width: 90%;
    height: 500px;
    /* border: 1px solid red; */
    display: flex;
}
.sonu-portfolio-container-right .sonu-portfolio-container-text{
    width: 60%;
    /* border: 1px solid green; */
    display: flex;
    align-items: center;
    justify-content: center;
}
.sonu-portfolio-container-text .sonu-portfolio-sun-container-text{
    height: 80%;
    width: 100%;
    /* border: 1px solid red; */
}
.sonu-portfolio-sun-container-text h4{
     color: #dfdeda;
     font-family: 'Inter', sans-serif;
    font-size: 14px;
}
h3.hello{
    font-size: 40px;
    color: #dfdeda;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    /* margin: 20px 0px; */
}
h3.hello span{
    color: #ec3819;
    font-size: 35px;
    font-family: Brush Script MT;
    font-weight: 500;
    animation:rimi 6s linear infinite;
}
@keyframes rimi{
0%{
letter-spacing:0px;
text-shadow:3px 3px 3px #ec3819;
}
50%{
letter-spacing:2px;
text-shadow:3px 3px 3px purple;
}
100%{
letter-spacing:4px;
text-shadow:3px 3px 3px #fc8c1c;
}
}

.sonu-portfolio-sun-container-text h2{
    font-size: 32px;
    margin-top: 20px;
    font-weight: 600;
    color: #dfdeda;
    /* background: slateblue; */
    display: inline-block;
}
.sonu-portfolio-sun-container-text h2 span{
    position: relative;
    display: inline-block;
    color: transparent;
    -webkit-text-stroke: .7px #ec3819;
    animation: text-style 16s linear infinite;
    animation-delay: calc(-4s * var(--i));
}
@keyframes text-styly{
    25%,100%{
        display: none;
    }
}
.sonu-portfolio-sun-container-text h2 span::before{
    content: attr(data-text);
    position: absolute;
    width: 0;
    border-right: 2px solid #ec3819;
    color:#ec3819;
    white-space: nowrap;
    overflow: hidden;
    animation: file-text 4s linear infinite;
}
@keyframes file-text{
    10%,100%{
        width: 0;
    }
    70%,90%{
        width: 100%;
    }
}
.sonu-portfolio-sun-container-text h5{
    margin: 25px 0px;
    font-weight: 500;
    font-size: 15px;
    color: #e8dfec;
    font-family: 'Inter', sans-serif;
    line-height: 22px;
    text-align: justify;
}
.sonu-portfolio-sun-container-text .button{
    height: 60px;
    /* border: 1px solid black; */
    margin: 30px 0px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.button .a1{
    width: 15%;
    height: 38px;
     margin: 6px;
}
.button .btn{
    width: 100%;
    height: 100%;
    /* border: 2px solid #ec3819; */
    border: none;
    outline: none;
    border-radius: 50px;
   font-size: 13px;
    font-weight: 600;
    color: #fff;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    /* text-transform: uppercase; */
    background-size: 200% auto;
    background-image: linear-gradient(to left, #ec3819 0%, #fc8c1c 50%, #ec3819 100%);
   
}
.button .btn:hover{
    box-shadow: 0 0 10px #ec3819;
    background-position: right center;
    color: #fff !important;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}
.button .a2{
    width: 18%;
    height: 38px;
    margin: 20px;
}
.button .btn1{
    width: 100%;
    height: 100%;
    /* border: 2px solid #ec3819; */
    border: none;
    outline: none;
    border-radius: 50px;
   font-size: 13px;
    font-weight: 600;
    color: #fff;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    /* text-transform: uppercase; */
    background-size: 200% auto;
    background-image: linear-gradient(to left, #ec3819 0%, #fc8c1c 50%, #ec3819 100%);
}
.button .btn1:hover{
    box-shadow: 0 0 10px #ec3819;
    background-position: right center;
    color: #fff !important;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}


.sonu-portfolio-container-right .sonu-portfolio-container-img{
    width: 40%;
    /* border: 1px solid green; */
}
.sonu-portfolio-container-img .my-img{
    display: flex;
    align-items: center;
    justify-content: center;
}
.sonu-portfolio-container-img .my-img img{
    height: 300px;
    margin-top: 100px;
}
.my-img::after{
    content: ' ';
    position:v absolute;
    height: 80px;
    width: 80px;
    border-bottom: 10px solid #ec3819;
    border-right: 10px solid #ec3819;
    margin-right: -35px;
    margin-bottom: -470px;
}
.my-img img{
/* background:black; */
/* width:400px; */
height:300px;
/* border-radius:10px 10px; */
/* margin-top:50px; */
/* margin-left:250px; */
border-radius: 5px;
animation:rim 6s linear infinite;
}
@keyframes rim{
0%{

box-shadow:0px 0px 15px #ec3819;
}
50%{

box-shadow:1px 1px 15px purple;
}
100%{

box-shadow:0px 0px 15px #fc8c1c;
}
}

.my-img::before{
    content: ' ';
    position:v absolute;
    height: 80px;
    width: 80px;
    border-top: 10px solid #ec3819;
    border-left: 10px solid #ec3819;
    margin-left: -35px;
    margin-top: -282px;
}
.icons{
    text-align: center;
    /* border: 1px solid red; */
     margin-top: 100px;
}
.icons p{
    font-size: 18px;
    /* margin-top: 20px; */
}
.icons p i{
    color: #ec3819;
    margin: 10px 10px;
}
.icons p i:hover{
   filter: drop-shadow(0px 0px 8px #ec3819);
    /* border-radius: 50px; */
}



                                        /* section about */
.about-section{
    height: 700px;
    /* border: 1px solid red; */
     background-color: #151515;
}
.about-section .about-title{
    height: 60px;
    /* border: 1px solid black; */
    /* margin-top: 40px; */
}
.about-title p{
    font-size: 30px;
    font-weight: 600;
    margin: 0px 15px;
    color: #e8dfec;
    font-family: 'Inter', sans-serif;
    position: relative;
}
.about-title p::before{
    content: ' ';
    height: 4px;
    width: 50px;
    background-color: #ec3819;
    position: absolute;
    top: 100%;
    left: 0;
}
.about-title p::after{
    content: ' ';
    height: 4px;
    width: 25px;
    background-color: #ec3819;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
}
.about-section .about-container{
    height: 500px;
    /* border: 1px solid black; */
    margin-top: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.about-container .about-sub-container{
    width: 90%;
    height: 95%;
    /* border: 1px solid red; */
    display: flex;
}
.about-sub-container .sonu-about-img{
    width: 40%;
    height: 100%;
    /* border: 1px solid green; */
    /* margin-right: 30px; */
    /* background-color: aquamarine; */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    /* margin: 0px 10px; */
}

.about-sub-container .sonu-about-img img{
    height: 300px;
    width: 300px;
    border-radius: 50%;
    margin: 0px 10px;
    border: 2px solid #ec3819;
    object-fit: cover;
}
.sonu-about-img .sonu-circle-spine{
    position: absolute;
  top:13%;
  left: -3%;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  /* border-bottom: 2px solid red; */
  /* border-top: 2px solid red; */
  border-left: 3px solid #ec3819;
  animation: spin 4s linear infinite;
  border-right: 3px solid #ec3819;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.about-sub-container .sonu-about-information{
    width: 60%;
    height: 100%;
    /* border: 1px solid gold; */
}
.sonu-about-information .sonu-about-heading{
    height: 100px;
    /* border: 1px solid red; */
}
.sonu-about-heading p{
    font-size: 30px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    line-height: 40px;
    margin: 15px 0px;
    color: #e8dfec;
}
.sonu-about-heading p span{
    color: #ec3819;
    font-size: 28px;
    font-family: Lucida Handwriting;
}
.sonu-about-text{
    margin: 10px 0px;
}
.sonu-about-text p{
    text-align: justify;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #e8dfec;
}

.sonu-about-inform{
    display: flex;
    margin: 30px 0px;
}
.sonu-about-inform .sonu-about-left-inform{
    height: 200px;
    width: 50%;
    /* border: 1px solid black; */
    font-size: 15px;
     font-family: 'Inter', sans-serif;
     font-weight: 550;
}
.name{
    height: 40px;
    /* border: 1px solid red; */
    display: flex;
}
.name p{
    margin: 20px 5px;
    color: #e8dfec;
}
.name .input1{
    width: 50%;
    border-bottom: 1px solid #333;
   margin-left: 40px;
}
.input1 h6{
    margin: 15px 0px;
    text-align: start;
    font-size: 14px;
     font-family: 'Inter', sans-serif;
     font-weight: 550;
     color: #e8dfec;
}
.dob{
    height: 40px;
    /* border: 1px solid red; */
    display: flex;
     margin-top: 5px;
}
.dob p{
    margin: 20px 5px;
    color: #e8dfec;
}
.dob .input2{
    width: 50%;
    border-bottom: 1px solid #333;
   margin-left: 45px;
}
.input2 h6{
    margin: 15px 0px;
    text-align: start;
    font-size: 14px;
     font-family: 'Inter', sans-serif;
     font-weight: 550;
     color: #e8dfec;
}
.add{
    height: 40px;
    /* border: 1px solid red; */
    display: flex;
     margin-top: 5px;
}
.add p{
   margin: 20px 5px;
   color: #e8dfec;
}
.add .input3{
    width: 50%;
    border-bottom: 1px solid #333;
   margin-left: 20px;
}
.input3 h6{
    margin: 15px 0px;
    text-align: start;
    font-size: 14px;
     font-family: 'Inter', sans-serif;
     font-weight: 550;
     color: #e8dfec;
}
.gen{
    height: 40px;
    /* border: 1px solid red; */
    display: flex;
    margin-top: 5px;
}
.gen p{
    margin: 20px 5px;
    color: #e8dfec;
}
.gen .input4{
    width: 50%;
    border-bottom: 1px solid #333;
   margin-left: 30px;
}
.input4 h6{
    margin: 15px 0px;
    text-align: start;
    font-size: 14px;
     font-family: 'Inter', sans-serif;
     font-weight: 550;
     color: #e8dfec;
}
.sonu-about-inform .sonu-about-right-inform{
    height: 200px;
    width: 50%;
    /* border: 1px solid black; */
     font-size: 15px;
     font-family: 'Inter', sans-serif;
     font-weight: 550;
}
.age{
    height: 40px;
    /* border: 1px solid red; */
    display: flex;
    margin-top: 5px;
}
.age p{
    margin: 20px 0px;
    color: #e8dfec;
}
.age .input5{
    width: 50%;
    border-bottom: 1px solid #333;
   margin-left: 48px;
}
.input5 h6{
    margin: 15px 0px;
    text-align: start;
    font-size: 14px;
     font-family: 'Inter', sans-serif;
     font-weight: 550;
     color: #e8dfec;
}
.ph{
    height: 40px;
    /* border: 1px solid red; */
    display: flex;
    margin-top: 5px;
}
.ph p{
    margin: 20px 0px;
    color: #e8dfec;
}
.ph .input6{
    width: 50%;
    border-bottom: 1px solid #333;
   margin-left: 30px;
}
.input6 h6{
    margin: 15px 0px;
    text-align: start;
    font-size: 14px;
     font-family: 'Inter', sans-serif;
     font-weight: 550;
     color: #e8dfec;
}
.blood{
    height: 40px;
    /* border: 1px solid red; */
    display: flex;
    margin-top: 5px;
}
.blood p{
    margin: 20px 0px;
    color: #e8dfec;
}
.blood .input7{
    width: 50%;
    border-bottom: 1px solid #333;
   margin-left: 35px;
}
.input7 h6{
    margin: 15px 0px;
    text-align: start;
    font-size: 14px;
     font-family: 'Inter', sans-serif;
     font-weight: 550;
     color: #e8dfec;
}
.email{
    height: 40px;
    /* border: 1px solid red; */
    display: flex;
    margin-top: 5px;
}
.email p{
    margin: 20px 0px;
    color: #e8dfec;
}
.email .input8{
    width: 50%;
    border-bottom: 1px solid #333;
   margin-left: 38px;
}
.input8 h6{
    margin: 15px 0px;
    text-align: start;
    font-size: 14px;
     font-family: 'Inter', sans-serif;
     font-weight: 550;
     color: #e8dfec;
}
.button1{
    /* border: 1px solid red; */
    margin-top: -15px;
}
.button1 button{
    width: 18%;
    height: 40px;
     border: none;
    outline: none;
    border-radius: 50px;
   font-size: 13px;
    font-weight: 600;
    color: #fff;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    /* text-transform: uppercase; */
    background-size: 200% auto;
    background-image: linear-gradient(to left, #ec3819 0%, #fc8c1c 50%, #ec3819 100%);
}
.button1 button:hover{
    box-shadow: 0 0 10px #ec3819;
    background-position: right center;
    color: #fff !important;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}


                                                        /* section-skills */
.sonu-main-skills{
    height: auto;
}
.sonu-main-skills .sonu-main-skills-title{
    height: 100px;
    /* border: 1px solid green; */
}
.sonu-main-skills-title p{
     font-size: 30px;
    font-weight: 600;
    margin: 0px 15px;
    color: #e8dfec;
    position: relative;
    font-family: 'Inter', sans-serif;
}
.sonu-main-skills-title p::before{
    content: ' ';
    height: 4px;
    width: 50px;
    background-color: #ec3819;
    position: absolute;
    top: 100%;
    left: 0;
}
.sonu-main-skills-title p::after{
    content: ' ';
    height: 4px;
    width: 25px;
    background-color: #ec3819;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
}
.sonu-skills-progress{
    height: 450px;
    /* border: 1px solid red; */
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.sonu-skills-progress .sonu-skills-left-progress{
    height: 100%;
    width: 45%;
    /* border: 1px solid green; */
}
.sonu-skills-left-progress .sonu-skills-left-progress-heading{
    height: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sonu-skills-left-technical{
     margin-top: 10px;
    height: 90%;
    /* border: 1px solid white; */
}
.sonu-skills-left-technical .sonu-skills-left-sub1-technical{
    height: 50%;
    width: 100%;
    /* border: 1px solid red; */
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
                                                                        /* circle */
.circle{
  /* display: flex; */
  align-items: center;
  gap: 20px;
  /* margin-bottom: 20px; */
}

/* Icon */


/* Circular progress */
.circle-wrapper {
  position: relative;
  /* width: 100px; */
  /* height: 100px; */
  /* display: flex; */
}

.circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(#ec3819 calc(var(--percentage) * 1%), #333333 0%);
   
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.circle::before {
  content: '';
  position: absolute;
  width: 100px;
  height: 100px;
  background: #151515;
  border-radius: 50%;
}

.label {
  position: absolute;
  font-size: 20px;
  font-weight: bold;
  color: #e8dfec;
  filter: drop-shadow(0px 0px 6px #fff);
}

.skill-name {
  text-align: center;
  margin-top: 10px;
  font-size: 18px;
  color: #e8dfec;
  font-weight:600;
  filter: drop-shadow(0px 0px 6px #ffffff6a);
  font-family: 'Inter', sans-serif;
}
.sonu-skills-left-technical .sonu-skills-left-sub2-technical{
     height: 50%;
    width: 100%;
    /* border: 1px solid red; */
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.sonu-skills-left-progress-heading p{
    font-family: 'Inter', sans-serif;
    color: #e8dfec;
    font-size: 28px;
    font-weight: 600;
}
.sonu-skills-progress .sonu-skills-right-progress{
    height: 100%;
    width: 50%;
    /* border: 1px solid green; */
}
.sonu-skills-right-progress .sonu-skills-right-progress-heading{
    height: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sonu-skills-right-progress-heading p{
    font-family: 'Inter', sans-serif;
    color: #e8dfec;
    font-size: 28px;
    font-weight: 600;
}
.sonu-skills-right-technical{
    margin-top: 10px;
    height: 90%;
    /* border: 1px solid white; */
}
.bar-shadow {
      filter: drop-shadow(0px 0px 6px #ec3919a9);
    }
    .w3-container{
        background-color: #333;
    }
    .sonu{
        width: 100%;
        height: 15%;
        text-align: center;
        /* border: 1px solid red; */
        display: flex;
        margin-bottom: -15px;
    }
    .text{
        /* height: 25%; */
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .text p{
        margin: 15px 10px;
        color: #e8dfec;
    }
    .text h6{
        
        color: #e8dfec;
    }
    .p{
        height: 8px;
        background-color: #ec3819;
    }
    .color{
        background-color: #ec3819 !important;
    }
    .sonu-icon{
       
      width: 20%;
      text-align: center;
      font-size: 50px;
      color: #E34F26; /* HTML5 color */
      /* margin-left: 45px; */
      /* border: 1px solid red; */
      display: flex;
      align-items: center;
      justify-content: flex-end;
    
    }
    .sonu2{
        width: 60%;
        margin-left: 30px;
    }
.sonu-icon2{
       
    width: 20%;
      text-align: center;
      font-size: 50px;
      color: #5453f5; /* HTML5 color */
      /* margin-left: 45px; */
      /* border: 1px solid red; */
      display: flex;
      align-items: center;
      justify-content: flex-end;
    
}
.sonu-icon3{
       
    width: 20%;
      text-align: center;
      font-size: 50px;
      color: #d6b72f; /* HTML5 color */
      /* margin-left: 45px; */
      /* border: 1px solid red; */
      display: flex;
      align-items: center;
      justify-content: flex-end;
    
}
.sonu-icon4{
       
    width: 20%;
      text-align: center;
      font-size: 50px;
      color: #d6b72f; /* HTML5 color */
      /* margin-left: 45px; */
      /* border: 1px solid red; */
      display: flex;
      align-items: center;
      justify-content: flex-end;
    
}
.sonu-icon4 img{
    height: 50px;
    width: 50px;
}
.sonu-icon5{
       
     width: 20%;
      text-align: center;
      font-size: 50px;
      color: #d6b72f; /* HTML5 color */
      /* margin-left: 45px; */
      /* border: 1px solid red; */
      display: flex;
      align-items: center;
      justify-content: flex-end;
    
}
.sonu-icon6{
       
     width: 20%;
      text-align: center;
      font-size: 50px;
      color: #2b98c5; /* HTML5 color */
      /* margin-left: 45px; */
      /* border: 1px solid red; */
      display: flex;
      align-items: center;
      justify-content: flex-end;
    
}
.sonu-skills-education{
    height: auto;
    /* border: 1px solid green; */
    display: flex;
    align-items: center;
    justify-content: center;
}
.sonu-skills-education .sonu-skills-education-container{
    height: 80%;
    width: 60%;
    margin-top: 50px;
    /* border: 1px solid white; */
}
.sonu-skilla-education-container-heading{
    height: 10%;
    /* border: 1px solid red; */
    display: flex;
    align-items: center;
    justify-content: center;
}
.sonu-skilla-education-container-heading p{
    font-family: 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #e8dfec;
}
.sonu-skills-education-container-content{
     height: 90%;
     margin-top: 15px;
    /* border: 1px solid red; */
     position: relative;
  margin-left: 30px;
  border-left: 3px solid #ec3819;
}
                                                    /* time-line */
.timeline-item {
  position: relative;
  margin-bottom: 30px;
  padding-left: 40px;
}

.timeline-icon {
  position: absolute;
  left: -20px;
  top: -8px;
  background-color: #ec3819;
  color: white;
  width: 40px;
  height: 40px;
  line-height: 36px;
  text-align: center;
  border-radius: 50%;
  font-size: 16px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.timeline-content{
  border: 2px solid #ec3819;
  border-radius: 5px;
  position: relative;
   overflow: hidden;
    cursor: pointer;
    z-index: 50;
}
.timeline-content::before{
    content: ' ';
    width: 100%;
    height: 100%;
    background-color: #ec391926;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    transform: translateX(-100%);
    transition: 1s all ease;
}
.timeline-content:hover::before{
    transform: translateX(0%);
 }
.timeline-content h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: #ec3819;
}
.timeline-content h4{
    color: #e8dfec;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
}
.timeline-content p {
  /* margin: 5px 0 0; */
  text-align: justify;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  color: #b7c1cd;
  line-height: 1.6;
}
                                                                        /* services */
.sonu-service-main{
    height: auto;
    background-color: #151515;
}
.sonu-service-main .sonu-service-heading{
    height: 150px;
}
.sonu-service-main .sonu-service-heading p{
     font-size: 30px;
    font-weight: 600;
    margin: 0px 15px;
    color: #e8dfec;
    position: relative;
    font-family: 'Inter', sans-serif;
}
.sonu-service-main .sonu-service-heading p::before{
    content: ' ';
    height: 4px;
    width: 50px;
    background-color: #ec3819;
    position: absolute;
    top: 100%;
    left: 0;
}
.sonu-service-main .sonu-service-heading p::after{
    content: ' ';
    height: 4px;
    width: 25px;
    background-color: #ec3819;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
}
.sonu-service-main .sonu-service-main-container{
    height: 620px;
    display: flex;
    /* align-items: center; */
    justify-content: center;
     /* border: 1px solid white; */
}
.sonu-service-main-container .sonu-service-sub-container{
    height: 90%;
    width: 80%;
    /* border: 1px solid white; */
    
}
.sonu-service-sub-container .sonu-service-sub-container1{
    height: 48%;
    width: 100%;
    /* border: 1px solid red; */
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    
}
.sonu-service-sub-container1 .sonu-service-card{
    width: 30%;
    height: 100%;
    background-color: #ec391915;
    border-radius: 10px;
}
.sonu-service-card .sonu-service-card-icon{
    height: 100px;
     /* border: 1px solid white; */
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sonu-service-card .sonu-service-card-icon i{
    font-size: 40px;
    color: #ec3819;
     margin-top: 30px;
}
.sonu-service-sub-container1 .sonu-service-card:hover{
    border: 2px solid #ec3819;
    border-radius: 10px;
    filter: drop-shadow(0px 0px 6px #ec391939);
}

.sonu-service-card .sonu-service-card-heading{
    height: 40px;
    /* border: 1px solid white; */
    display: flex;
    align-items: center;
    justify-content: center;
}
.sonu-service-card .sonu-service-card-heading p{
    color: #e8dfec;
    font-size: 25px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
}
.sonu-service-card .sonu-service-card-text{
    height: 60px;
    /* border: 1px solid white; */
    
}
.sonu-service-card .sonu-service-card-text p{
    text-align: center;
    font-family: 'Inter', sans-serif;
    color: #e8dfeca9;
    font-size: 14px;
    margin-top: 8px;
    line-height: 20px;
}
.sonu-service-sub-container .sonu-service-sub-container2{
    height: 48%;
    width: 100%;
    /* border: 1px solid red; */
     display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin-top: 20px;
}
.sonu-service-sub-container2 .sonu-service-card{
    width: 30%;
    height: 100%;
    background-color: #ec391915;
    border-radius: 10px;
}
.sonu-service-sub-container2 .sonu-service-card:hover{
    border: 2px solid #ec3819;
    border-radius: 10px;
    filter: drop-shadow(0px 0px 6px #ec391939);
}

.sonu-service-card .sonu-service-card-heading{
    height: 40px;
    /* border: 1px solid white; */
    display: flex;
    align-items: center;
    justify-content: center;
}
.sonu-service-card .sonu-service-card-heading p{
    color: #e8dfec;
    font-size: 25px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
}
.sonu-service-card .sonu-service-card-text{
    height: 60px;
    /* border: 1px solid white; */
    
}
.sonu-service-card .sonu-service-card-text p{
    text-align: center;
    font-family: 'Inter', sans-serif;
    color: #e8dfeca9;
    font-size: 14px;
    margin-top: 8px;
    line-height: 20px;
}

                                                                    /* my===work */
.sonu-my-work{
    height: auto;
}
.sonu-my-work .sonu-my-work-heading{
    height: 150px;
    /* border: 1px solid red; */
}
.sonu-my-work .sonu-my-work-heading p{
     font-size: 30px;
    font-weight: 600;
    margin: 0px 15px;
    color: #e8dfec;
    position: relative;
    font-family: 'Inter', sans-serif;
}
.sonu-my-work .sonu-my-work-heading p::before{
    content: ' ';
    height: 4px;
    width: 50px;
    background-color: #ec3819;
    position: absolute;
    top: 105%;
    left: 0;
}
.sonu-my-work .sonu-my-work-heading p::after{
    content: ' ';
    height: 4px;
    width: 25px;
    background-color: #ec3819;
    position: absolute;
    top: 105%;
    left: 0;
    margin-top: 8px;
}
.sonu-my-work .sonu-project-main-container{
    height: 650px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* border: 1px solid red; */
}
.sonu-project-main-container .sonu-project-container{
    height: 85%;
    width: 95%;
    /* border: 1px solid white; */
}
.sonu-project-container .sonu-project-container-sub1{
    height: 48%;
    width: 100%;
    /* border: 1px solid white; */
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.sonu-project-container-sub1 .sonu-project-container-box{
    height: 100%;
    width: 30%;
    display: flex;
    overflow: hidden;
    border-radius: 15px;
    align-items: center;
    border: 2px solid #ec3819;
    position: relative;
    /* filter: drop-shadow(-2px 2px 12px #ec3919a9); */
    box-shadow: 0 4px 10px #e34f26eb;
}
.sonu-project-container-sub1 .sonu-project-img{
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sonu-project-container-sub1 .sonu-project-img img{
    height: 100%;
    width: 100%;
   opacity: .5s;
   transition: .5s;
   object-fit: cover;
}
.sonu-project-content{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: linear-gradient(rgba(0,0,0,0.2), #ec3819);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    transition: 0.5s;
    padding: 0 2rem;
}
.sonu-project-container-box:hover .sonu-project-content{
    opacity: 1;
}
.sonu-project-container-box:hover .sonu-project-img img{
    transform: scale(1.1);
    object-fit: cover;
}
.sonu-project-content h3{
    font-size: 30px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    color: #e8dfec;
}
.sonu-project-content p{
    font-size: 15px;
    font-family: 'Inter', sans-serif;
    color: #e8dfec;
    margin: 5px 0 15px 0;
}
.sonu-project-content a{
    background-color: #fff;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border: 1px solid #E34F26;
    outline: 2px solid #fff;
}
.sonu-project-container .sonu-project-container-sub2{
    height: 48%;
    width: 100%;
    /* border: 1px solid white; */
    margin-top: 20px;
     display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.sonu-project-container-sub2 .sonu-project-container-box{
    height: 100%;
    width: 30%;
    display: flex;
    overflow: hidden;
    border-radius: 15px;
    align-items: center;
    border: 2px solid #ec3819;
    position: relative;
    /* filter: drop-shadow(-2px 2px 12px #ec3919a9); */
    box-shadow: 0 4px 10px #e34f26eb;
}
.sonu-project-container-sub2 .sonu-project-img{
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sonu-project-container-sub2 .sonu-project-img img{
    height: 100%;
    width: 100%;
   opacity: .5s;
   transition: .5s;
   object-fit: cover;
}
                                                            /* contact */
.sonu-contact-main{
    height: auto;
    background-color: #151515;
}
.sonu-contact-main .sonu-contact-heading{
    height: 150px;
}
.sonu-contact-main .sonu-contact-heading p{
     font-size: 30px;
    font-weight: 600;
    margin: 0px 15px;
    color: #e8dfec;
    position: relative;
    font-family: 'Inter', sans-serif;
}
.sonu-contact-main .sonu-contact-heading p::before{
    content: ' ';
    height: 4px;
    width: 50px;
    background-color: #ec3819;
    position: absolute;
    top: 100%;
    left: 0;
}
.sonu-contact-main .sonu-contact-heading p::after{
    content: ' ';
    height: 4px;
    width: 25px;
    background-color: #ec3819;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
}
.sonu-contact-main .sonu-contact-main-container{
    height: 525px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* border: 1px solid white; */
}
.sonu-contact-main-container .sonu-contact-container{
    width: 90%;
    height: 95%;
    /* border: 1px solid white; */
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.sonu-contact-container .sonu-contact-container-left{
    width: 40%;
    height: 100%;
    /* border: 1px solid white; */
}

.sonu-contact-container-left .sonu-contact-container-left-heading p{
    font-size: 40px;
    margin-top: 90px;
    font-weight: 600;
    color: #e8dfec;
    font-family: 'Inter', sans-serif;
}
.sonu-contact-container-left .sonu-contact-container-left-contact-icon{
    height: 240px;
    margin-top: 10px;
    /* border: 1px solid white; */
}
.sonu-contact-container-left-contact-icon .sonu-contact-container-left-contact-sub-icon{
    width: 60%;
    height: 100%;
    /* border: 1px solid white; */
}
.sonu-contact-container-left-contact-sub-icon .sonu-contact-container-left-contact-sub-icon1{
    height: 65px;
    /* border: 1px solid red; */
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
}
.sonu-contact-container-left-contact-sub-icon1 .sonu-contact-icon1{
    height: 90%;
    width: 23%;
    background-color: #313945;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sonu-contact-container-left-contact-sub-icon1 .sonu-contact-icon1 i{
    color: #ec3819;
    font-size: 30px;
}
.sonu-contact-container-left-contact-sub-icon1 .sonu-contact-text1{
    height: 100%;
    width: 73%;
    /* background-color: #313945; */
}
.sonu-contact-container-left-contact-sub-icon1 .sonu-contact-text1 h4{
    color: #ec3819;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    margin-top: 10px;
}
.sonu-contact-container-left-contact-sub-icon1 .sonu-contact-text1 h5{
    color:#e8dfec;
    font-size: 13px;
    margin-top: 4px;
    font-family: 'Inter', sans-serif;
}
.sonu-contact-container-left .sonu-contact-container-left-text p{
    color: #e8dfeca9;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    margin-top: 10px;
    text-align: justify;
}
.sonu-contact-container .sonu-contact-container-right{
    width: 50%;
    height: 100%;
    background-color: #313945;
    border-radius: 5px;
}
.sonu-contact-container-right .sonu-contact-container-right-heading{
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sonu-contact-container-right .sonu-contact-container-right-heading p{
     font-size: 30px;
    font-weight: 600;
    color: #e8dfec;
    font-family: 'Inter', sans-serif;
}
.sonu-contact-container-right .sonu-contact-container-right-heading p span{
    color: #ec3819;
    font-family: 'Inter', sans-serif;
}
.sonu-contact-container-right .sonu-contact-container-right-input1{
    height: 60px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.sonu-contact-container-right .sonu-contact-container-right-input1 .input1{
    width: 45%;
    height: 90%;
    border-radius: 4px;
    border: none;
    outline: none;
    background-color: #151515;
}
.sonu-contact-container-right .sonu-contact-container-right-input1 .input1:hover{
    border:1.5px solid #ec3819;
    border-radius: 4px;
}
.sonu-contact-container-right .sonu-contact-container-right-input2{
    height: 200px;
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sonu-contact-container-right .sonu-contact-container-right-input2 .input2{
    height: 100%;
    width: 93%;
    background-color: #151515;
    border: none;
    outline: none;
    border-radius: 4px;
}
.sonu-contact-container-right .sonu-contact-container-right-input2 .input2:hover{
    border:1.5px solid #ec3819;
    border-radius: 4px;
}
.sonu-contact-container-right .button2{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
    
}
.button2 .aa{
    width: 22%;
    height: 35px;
     /* margin: 6px; */
}
.button2 .btn3{
    width: 100%;
    height: 100%;
    /* border: 2px solid #ec3819; */
    border: none;
    outline: none;
    border-radius: 50px;
   font-size: 13px;
    font-weight: 600;
    color: #fff;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    /* text-transform: uppercase; */
    background-size: 200% auto;
    background-image: linear-gradient(to left, #ec3819 0%, #fc8c1c 50%, #ec3819 100%);
   
}
.button2 .btn3:hover{
    box-shadow: 0 0 10px #ec3819;
    background-position: right center;
    color: #fff !important;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}