*{
    padding: 0px;
    margin:0px;
    box-sizing: border-box;
}
body{
    background-color:black;
}
.navbar-collapse{
    flex-grow:0!important
}
.btn-link{
    /* border-radius: 25px; */
    /* background-color: gold; */
    padding: 7px;
    width: 120px;
    height: 50px;
}
 .nav-item a:hover{ background-color:rgb(25, 235, 217);
    transition: all 1s;
    transition-duration: 3s;
    transform-style: preserve-3d;
    border-radius: 70px;
    color: black;
    border-radius: 45px;
    

} 
.container-fluid .navbar-brand{
    background-image: url(https://media4.giphy.com/media/3ov9jDJSnYG7ADBbOM/giphy.gif)!important;
color: transparent;
background-clip: text;
font-size: 50px;
}
.container-fluid .navbar-brand:hover{
    background-image: url(https://media4.giphy.com/media/3ov9jDJSnYG7ADBbOM/giphy.gif)!important;
color: transparent;
background-clip: text;
font-size: 50px;
}



 .nav-item a::before {
    content: "";
    height: 0%;
    width: 100%;
    position: absolute;
    background-color: rgb(25, 235, 217);;
    left: 0px;
    bottom: 0px;
    z-index: -1;
    transition: all 1s;
    
;}
img{
    height:380px;
    width:305px
}





.nav-item a::after {
    content: "";
    height: 0%;
    width: 100%;
    position: absolute;
    background-color: rgb(25, 235, 217);;
    right: 0px;
    top: 0px;
    z-index: -1;
    transition: all 1s;
    
;}
.a1:hover{
    color: black !important;
}




    .nav-item a:hover::before, .nav-item a:hover::after {
    height: 50%!important;
;}

.btn-link:hover{background-color: skyblue;
    color:black;}


    /* boxes below nav bar */
    .boxes{
       min-width: 50%
        ;background-color: black; display: flex;
        justify-content: space-around;
        height:100vh;
        animation-name: pro;
    animation-timing-function: linear;
    animation-timeline:view();
    animation-range: entry;
        

    }
    .a1{
        border:none;
        text-decoration:none;
    }

    .boxes1{display: flex;
        flex-direction: column;
        width:50%;
        gap: 44px  ;color:white ;margin-top: 60px;
        margin-left: 80px;padding: 20px;
        animation-name: pro;
    animation-timing-function: linear;
    animation-timeline:view();
    animation-range: entry;

    }
    .boxes2{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .circle3 {
    height: 200px;
    width: 200px;
    background-color: rgb(25, 235, 217);
    border-radius: 50%;
    display: flex;
    justify-content:center ;
    align-items: center;
    position: relative;
    padding: 50px;
    animation-name: pro;
    animation-timing-function: linear;
    animation-timeline:view();
    animation-range: entry;
}

.circle2 {
    background-color: rgb(68, 67, 67);
    padding: 56px;
    border-radius: 50%;
    height: 300px;
    width: 300px;
    animation-name: pro;
    animation-timing-function: linear;
    animation-timeline:view();
    animation-range: entry;
}

.circle1 {
    background-color: rgb(48, 47, 47);
    padding: 50px;
    border-radius: 50%;
    position: relative;
    height: 400px;
    width: 400px; margin-left: 80px;
    animation-name: pro;
    animation-timing-function: linear;
    animation-timeline:view();
    animation-range: entry;
    
    

}
.boxes2{display: flex;
        flex-direction: column;
        width:50%;
        left: 20px;
        margin-top: 20px;
        animation-name: pro;
    animation-timing-function: linear;
    animation-timeline:view();
    animation-range: entry;


}
.boxes h1{
    font-size: 50px;
}
p{
        text-align: justify;
        font-size: 25px;
    }

    .nav-link{
        color: white!important;


    }
@media only screen and (min-width:320px ) and
    (max-width:600px )


    { 
        .boxes h1{
            font-size: 20px;
        }
        
        
        .boxes{
        flex-wrap: wrap;

    }
    .boxes2{
        order:-1 ;
        width: 100%;
       
        
    }
    .boxes1{
        margin-left: 20px;width: 100%;
        text-align: center;
        gap:0px;
        font-size: 10px;
    }
    P{
        font-size: 10PX;
        margin-left: 0px;
    }
    .circle1{
        margin-left: 0px;
        width:250px;
        height:250px;padding:25px;
       margin: auto;
    }
    img{
        width:250px;
        height:250px
    }
    .circle2{
        margin-left: 0px;
        width:200px;
        height:200px;padding: 25px;
    }
    .circle3{
        margin-left: 0px;
        width:150px;
        height:150px;padding: 2px;
    }

    } 
    @media only screen and (min-width:601px ) and
    (max-width:960px ){
        .boxes2{
            width:100%
            ;
        }
        .circle1{
            margin-left: 20px;
        }
    .boxes{
        flex-wrap: wrap;

    }
    .boxes2{
        order:-1 ;
        width: 100%;
       
        
    }
    .boxes1{
        margin-left: 20px;width: 100%;
        text-align: center;
        gap:0px;

    }
    p{
        font-size: 18px;
    }
    .circle1{
        margin-left: 0px;
        width:250px;
        height:250px;padding:25px;
       margin: auto;
    }
    img{
        width:250px;
        height:250px
    }
    .circle2{
        margin-left: 0px;
        width:200px;
        height:200px;padding: 25px;
    }
    .circle3{
        margin-left: 0px;
        width:150px;
        height:150px;padding: 2px;
    }
    /* .nav-link{
        font-size: 10px;
    } */

    } 
    
    .s1{
        color:rgb(25, 235, 217)
    }
    @media only screen and (min-width:601px ) and
    (max-width:960px ){
        .boxes2{
            width:100%
            ;
        }
        .circle1{
            justify-content: center;
        }
    }
    .navbar {
        background-color: black!important;
    }
.about{
    width:100%;
    background-color: black;
    height:90vh;display:flex;
    flex-wrap: wrap;position: relative;
    /* justify-content: center; */
    justify-content: space-around;
    /* align-items: center; */
    padding: 100px;
    animation-name: pro;
    animation-timing-function: linear;
    animation-timeline:view();
    animation-range: entry;
   
}
.sec1{
    width:30%;
    background-color: black;
    position: relative
}

.sec2{
    background-color: black;
    width:70%
    /* height:90vh;width:60%;margin-left: 500px !important; */
   ; display:flex;
   flex-direction: column;
   /* position: absolute; */
   /* justify-content: space-around; */
}
.sec2 h1{
    font-size: 160px;
    margin-top: 15px;
    -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: aqua;
  opacity: 0.5;
  color: transparent;
  padding-left: 10px;
  
}

.sec2 p{
    margin-top: 70px;
    color:snow;display: flex
    ;justify-content: space-around!important;
    padding-left: 78px;
}
.pic1{
    width:350px;
    height:350px;background-color: black;
    position: absolute;margin-top: 70px;
    margin-left: 15px;
    box-shadow: 10px 10px 0px aqua;
}
.pic2{
    width:200px;
    height:200px;background-color: black;
    /* margin-left: 50px; */
    /* margin-top: 20px; */
    position: relative;
    border-top:10px solid aqua !important;
    border-left:10px solid aqua !important;
}
 
.pic2 img{
    margin-top:-30px;    height: 365px;
    width: 305px;
}
h6{
    position: relative;
    margin-top: -105px;
    margin-left: 98px;
    font-size: 40px;
    color: gray;
}
.ab1 span{
    background-color: black;
    color: aqua;
    margin: 0px;
   padding-top: 40px;
   display: inline-block;
   border-bottom: 5px solid gold;
   /* width: 100%; */
   /* text-align: center; */
   /* margin: auto; */
   font-size: 50px;

}
.ab1{
    text-align: center;
}
.ab1:hover{
    color:yellow
}
@media (max-width: 1245px) and (min-width: 750px) {
  .about {
    flex-direction: column;
    height: auto; /* allow flexible height */
  }

  .sec1, 
  .sec2 {
    width: 100%;  /* stack full width */
  }

  .sec2 h1 {
    font-size: clamp(40px, 8vw, 100px); /* smaller heading */
    text-align: center;
    padding-left: 0;
  }

  .sec2 p {
    margin-top: 40px;
    text-align: center;
    padding: 0 20px; /* add breathing space */
  }

  .pic1 {
    position: relative; 
    margin: 20px auto; /* center on tablet */
    left: auto;
    top: auto;
  }

  .pic2 {
    /* margin: 20px auto; */
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .pic1 img{
    margin-top: 90px;
    margin-left:155px
  }

  h6 {
    font-size: 28px; /* smaller subtitle */
    top: auto;
    left: auto;
    transform: none;
    margin: 20px 0 0;
    position: relative;
    text-align: center;
  }
}
@media (max-width: 768px) {
  .about {
    flex-direction: column;
    height: auto;
    padding: 20px 10px;
  }

  .sec1,
  .sec2 {
    width: 100%;
  }

  .sec2 h1 {
    font-size: clamp(30px, 10vw, 60px); /* much smaller heading */
    text-align: center;
    padding-left: 0;
    margin-top: 20px;
  }

  .sec2 p {
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.4;
    text-align: center;
    padding: 0 10px;
  }

  .pic1 {
    width: 250px;
    height: 250px;
    margin: 20px auto;
    position: relative;
    box-shadow: 6px 6px 0px aqua;
  }

  .pic2 {
    width: 150px;
    height: 150px;
    /* margin: 15px auto; */
    border-width: 6px;
  }

  .pic2 img {
    width: 200px;
    height: auto;
    margin-top: -26px;
  }

  h6 {
    font-size: 20px;
    position: relative;
    margin: 10px auto 0;
    text-align: center;
  }
}

/* lines */

.boxes4{
    background-color:black;
    min-height:150vh;
}
.container{
    background-color: black;
    height:110vh;
    /* padding-top:200px; */
    display: flex;
    justify-content:center;
    align-items:flex-start;
    width: 100%;
    /* padding:20px; */
    margin-left:27px;
    margin: 0px;
    animation-name: pro;
    animation-timing-function: linear;
    animation-timeline:view();
    animation-range: entry;
}
.box{
    height:90vh;
    width:100%;
    margin-top:60px;
    /* border:2px solid white; */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;   
    animation-name: pro;
    animation-timing-function: linear;
    animation-timeline:view();
    animation-range: entry;
    margin-left: 90px!important;       
}
.box>h1{
    color:red;
    font-weight: bold;
    margin-top:-180px;
    font-size:60px;
    animation-name: pro;
    animation-timing-function: linear;
    animation-timeline:view();
    animation-range: entry;
}
/* Line */
.line{
    height:1.2px;
    width:300px;
    background-color: yellow;
    position:absolute;
    animation-name: pro;
    animation-timing-function: linear;
    animation-timeline:view();
    animation-range: entry;
}

.line5{
    height:1.2px;
    width: 238px !important;;
    background-color: yellow;
    position:absolute
    ;top:67%;
    animation-name: pro;
    animation-timing-function:linear;
    animation-timeline:view();
    animation-range:entry;
    left:30%
}



.mini-line{
    width:50px;
    height:1.2px;
    background-color:yellow;
    position:absolute;
}
/* mini-circle */
.mc{
    position:absolute;
    height:50px;
    width:50px;
    border:1.5px solid yellow;
    border-radius:50%;
}
.mc-odd{
    top:-25px;
    left:-50px;
}
.mc-even{
    top:-25px;
    right:-50px;
}


.mc>h2 {
    font-size: 30px;
    text-align: center;
    margin-top: 10px;
    color: aqua}

/* Line-1 */
.line1{
    top:20%;
    left:20%;
    transform:rotate(15deg);
}
.mini-line1{
    right:-14.5%;
    top:15.6px;
    transform:rotate(40deg);
}
/* line-2 */
.line2{
    top:19%;
    right:20%;
    transform:rotate(-15deg);
}
.mini-line2{
    left:-14.5%;
    top:15.6px;
    transform:rotate(-40deg);
}
/* line-3 */
.line3{
    top:50%;
    left:20%;
    transform:rotate(0deg);
}
.mini-line3{
    right:-13.5%;
    top:-18.6px;
    transform:rotate(-230deg);
}
/* line-4 */
.line4{
    top:50%;
    right:20%;
    transform:rotate(0deg);
}
.mini-line4{
    left:-13.5%;
    top:-18.6px;
    transform:rotate(230deg);
}
/* line-5 */
.line5{
    width:320px;
    top:64%;
    left:30%;
    transform:rotate(-40deg);
}
.mini-line5{
    right:-18.5%;
    top:-13.9px;
    transform:rotate(-35deg);
}
/* line-6 */
.line6{
    height:1.2px;
    width: 238px !important;;
    background-color: yellow;
    position:absolute
    ;top:64%
;left:50%;
    right:25%;
    transform:rotate(40deg);
}
.mini-line6{
    left:-19.5%;
    top:-13.9px;
    transform:rotate(35deg);
}
/* content */
.skill-box{
    position:absolute;
    width:380px;
    color:white;
    /* border:2px solid white; */
}
.html{
    transform:rotate(-15deg);
    top:-173px;
    left:-184px;
}
.css{
    transform:rotate(15deg);
    top:-154px;
    left:-20px;
}
.javascript{
    top:-178px;
    left:-150px;
}
.reactjs{
    top:-187px;
    left:-50px;
}
.java{
    top:-81px;
    right:-38px;
    transform: rotate(40deg);
}
.bootspring{
    top:-109px;
    right:-329px;
    transform: rotate(-40deg);
}

.h2{
    color: red!important;
}
.boxes4{
    width: 100%;
}
.skill-box p{
    font-size: 20px!important;
    text-align: none!important;
    margin-top:45px
}
.line h3{
    margin-top: 2px;
}
.my-skill-2
{
    display: none;
    scroll-margin: 100px;
     animation-name: pro;
    animation-timing-function: linear;
    animation-timeline: view();
    animation-range: entry;
}
.heading
{
    position: relative;
    width: 200px;
    height: 80px;
    left: -60px;
}
.cont-skill
{
    padding-left: 60px;
    margin: 0px 30px 20px 30px;
    padding-right: 10px;

     animation-name: pro;
    animation-timing-function: linear;
    animation-timeline: view();
    animation-range: entry;
}
.cont-skill p
{
    color: white;
    margin-top: -40px;
     line-height: 25px;
    font-size: 20px;
}
.hed
{
    border-bottom: 2px solid yellow;
    width: 90px;
    color: white;
    padding: 5px 10px 2px 10px;
    position: absolute;
    left: 48px;
    top: -16px;
}
.hed-line-2
{
    width: 60px;
}
.hed-line-3
{
    width: 160px;
}
.hed-line-4
{
    width: 115px;
}
.hed-line-5
{
    width: 157px;
}
.num
{
    position: absolute;
    border: 2px solid yellow;
    width: 50px;
    height: 50px;
    display: flex;
    border-radius: 50%;
    color: white;
    justify-content: center;
    align-items: center;
}
.project>h1{
    text-align: center;
     font-size: 60px;
    color: rgb(25, 235, 217);
     background-image: url("https://view.subpage.app/app/company/C532b8873cc5442e2b1f2265b77a7d7dc/domain/MTiT0jFlGh/page/Ma9aQb2DGh/article/M52e59e269bfbc6d871027a280eb17cb21721814253357/hero/M4cd31c583ffb66e17295695c64b440bd1722590762244.webp");
    background-clip: text; animation-name: pro;
    animation-timing-function: linear;
    animation-timeline:view();
    animation-range: entry;
}
.project-content{
    animation-name: pro;
    animation-timing-function: linear;
    animation-timeline:view();
    animation-range: entry;
}
.project-line {
    display: flex;
    gap: 6px;
    justify-content: center;
    align-items: center;
    padding-bottom: 50px;animation-name: pro;
    animation-timing-function: linear;
    animation-timeline:view();
    animation-range: entry;
}

.pr-line {
    height: 3px;
    background-color: rgb(235, 214, 25);
    border: none;
    border-radius: 10px;
    width: 50px;animation-name: pro;
    animation-timing-function: linear;
    animation-timeline:view();
    animation-range: entry;
}

.pr-lines1 {
    width: 65px;
   background-image: linear-gradient(10deg, rgba(214, 208, 208, 0.5) ,rgba(132, 199, 238, 0.267) , rgba(230, 38, 111, 0.5), rgba(243, 80, 243, 0.5));
}

.pr-lines2 {
    width: 46px;
    background-image: linear-gradient(60deg, rgba(119, 7, 7, 0.5) ,rgba(214, 208, 208, 0.5) ,rgba(132, 199, 238, 0.267), rgb(250, 52, 128, 0.5), rgba(136, 8, 136, 0.5));
}

.pr-lines3 {
    width: 25px;
    background-image: linear-gradient(60deg, rgba(214, 208, 208, 0.5) ,rgba(132, 199, 238, 0.267) , rgba(250, 42, 42, 0.5) , rgb(250, 52, 128, 0.5), rgba(136, 8, 136, 0.5));
}

.pr-lines4 {
    width: 15px;
    background-image: linear-gradient(60deg, rgba(250, 42, 42, 0.5) , rgba(240, 110, 159, 0.5),rgba(214, 208, 208, 0.5) ,rgba(132, 199, 238, 0.267) , rgba(209, 20, 209, 0.5));
}

.pr-lines5 {
    width: 8px;
    background-image: linear-gradient(60deg, rgba(230, 20, 20, 0.5) ,rgba(132, 199, 238, 0.267) , rgba(160, 153, 153, 0.5) 0%, rgb(250, 52, 128, 0.5), rgba(136, 8, 136, 0.5));
} 
/* ------------project-end------------- */
/* ------------project-cube-start------------- */

.cube {
    width: 200px;
    height: 200px;
    position: relative;
    transform-style: preserve-3d;
    animation: spin 5s infinite linear;
    transform: rotateX(-10deg) rotateY(20deg);
    top: 50px;
    left: 50px;
}
.img-prjt{
    width:200px;
    height:150px;
    margin-bottom: 20px;
}
.face {
    position: absolute;
    width: 200px;
    height: 200px;

}
.top-cube {
    background-image: linear-gradient(60deg, rgba(241, 132, 178, 0.5),rgba(2, 30, 46, 0.267));
    transform: rotateX(90deg) translateZ(100px);
}
.bottom-cube {

    background-image: linear-gradient(60deg,rgba(248, 85, 194, 0.267),rgba(139, 252, 246, 0.5));
    transform: rotateX(-90deg) translateZ(170px);
}
.right-cube {
    background-image: linear-gradient(60deg,rgba(240, 100, 154, 0.267),rgba(139, 252, 246, 0.5));
    transform: rotateY(90deg) translateZ(100px);
    height: 270px;
}
.left-cube {
    background-image: linear-gradient(60deg,rgba(2, 30, 46, 0.267),rgba(139, 252, 246, 0.5));
    transform: rotateY(-90deg) translateZ(100px);
    height: 270px;
}
.back-cube{
    background-image: linear-gradient(60deg,rgba(2, 30, 46, 0.267),rgba(139, 252, 246, 0.5));
    transform: rotateX(-180deg) translateZ(100px);
    height: 270px;
}
.front-cube {

    background-image: linear-gradient(60deg,rgba(2, 30, 46, 0.267),rgba(139, 252, 246, 0.5));
    transform: rotateX(0deg) translateZ(100px);
    height:270px;
}
.left-cnt-prjt{
    transform: rotate(270deg);
    margin-top: -35px;
    font-size: 30px;
}
/* ------------project-cube-start------------- */

/* ------------project-content-start------------- */
.pro-top-cnt{
    display: flex;
    justify-content: space-evenly;
}
.pro-cnt1{
    width:50%;
    color:white;
}
.pro-cnt1>p{
    margin-top: 20px;
    font-size: 22px;
}
.cube-box{
     top:-10px;
    position:relative;
    width:25%;
    height:350px;
}
.cube{
   position: absolute;
   top:30px;
}
.pro-center-cnt{
        display: flex;
    justify-content: space-evenly;
    margin-top: 150px;
}
.pro-bottom-cnt{
        display: flex;
    justify-content: space-evenly;
    margin-top: 150px;
}
.box-icn{
    background-color: white;
}
.link{
    color: black;
}
/* ------------project-content-end------------- */
/* ---------------------project-media-query-------------------------- */
 @media only screen and (min-width:300px) and (max-width:1100px){
    .pro-top-cnt{
       flex-direction: column;
       justify-content: center;
       align-items: center;
    }
     .pro-center-cnt{
       flex-direction: column;
       justify-content: center;
       align-items: center;
       margin-top: 70px;
    }
     .pro-bottom-cnt{
       flex-direction: column;
       justify-content: center;
       align-items: center;
        margin-top: 60px;
    }
    .pro-cnt1{
        width:70%;
        text-align: center;
        margin-top: 30px;
        text-align: center;
    }
    .cube{
        left:0px;
    }
 }
 /* ------------education-start--------------- */
 /* ---------education-start------------ */
 .ed-lines1 {
    width: 65px;
   background-image: linear-gradient(10deg, rgba(214, 208, 208, 0.5) ,rgba(132, 199, 238, 0.267) , rgba(230, 38, 111, 0.5), rgba(243, 80, 243, 0.5));
}

.ed-lines2 {
    width: 46px;
    background-image: linear-gradient(60deg, rgba(119, 7, 7, 0.5) ,rgba(214, 208, 208, 0.5) ,rgba(132, 199, 238, 0.267), rgb(250, 52, 128, 0.5), rgba(136, 8, 136, 0.5));
}

.ed-lines3 {
    width: 25px;
    background-image: linear-gradient(60deg, rgba(214, 208, 208, 0.5) ,rgba(132, 199, 238, 0.267) , rgba(250, 42, 42, 0.5) , rgb(250, 52, 128, 0.5), rgba(136, 8, 136, 0.5));
}

.ed-lines4 {
    width: 15px;
    background-image: linear-gradient(60deg, rgba(250, 42, 42, 0.5) , rgba(240, 110, 159, 0.5),rgba(214, 208, 208, 0.5) ,rgba(132, 199, 238, 0.267) , rgba(209, 20, 209, 0.5));
}

.ed-lines5 {
    width: 30px;
    background-image: linear-gradient(60deg, rgba(230, 20, 20, 0.5) ,rgba(132, 199, 238, 0.267) , rgba(160, 153, 153, 0.5) 0%, rgb(250, 52, 128, 0.5), rgba(136, 8, 136, 0.5));
} 
.ed-line {
    height: 3px;
    background-color: rgb(235, 214, 25);
    border: none;
    border-radius: 10px;
}
.education>h1{
    color:white;
    text-align: center;
    margin-top: 30px;

}
.pro-cnt1>span{
        margin-top: 20px;
        padding:8px 15px;
        border:1px solid rgb(243, 240, 240);
        border-radius: 8px;
        background-color:transparent;

    }
    /* ---------value-start-----------/ */
.values{
    background-color: transparent;
    display: flex;
    width:100%;
    justify-content:center;
    padding-bottom: 50px;
    animation-name: pro;
    animation-timing-function: linear;
    animation-timeline:view();
    animation-range: entry;
}
.value-left,.value-right{
     width:40%;
    display: flex;
    flex-direction: column;
    gap:50px;
    animation-iteration-count: 1;
}

.value{
    height:12px;
    border: 1px solid rgb(250, 248, 248);
    border-radius: 10px;   
    background-color: antiquewhite;
     margin-top:-15px;
}
.value-blue{
     height:12px;
      border-radius: 10px;   
      background-color: rgb(102, 241, 241);
      margin-top:-1px;
}
.value-blue-1{
      width:55%;
}
.value-blue-2{
     width:80%;
}
.value-blue-3{
     width:56%;
}
.value-blue-4{
     width:70%;
}
.pre{
display: flex;
justify-content: space-between;
}
.pre>span{
    margin-bottom:-30px;
    color:white
}
.clr-details p 
{
    font-size: 20px;
}
@media only screen and (min-width:300px) and (max-width:1100px){
    .values{
        flex-direction: column;
        justify-content: center;
        align-items:center ;
    }  
    .value-left,.value-right{
        width:70%;
    }
.pre-4{
    margin-top:30px;
}
}
/* ----------value-end------------/ */
/* ------------education-end--------------- */


.contact-head{
    background-color: black;
    margin-left:100px;
    padding-bottom: 50px;
    animation-name: pro;
    animation-timing-function: linear;
    animation-timeline:view();
    animation-range: entry;padding-top: 110px;
}
.contact-head span{
    color:aqua;
}
.contact-head h1{
    color:white;
}
.contact{
    background-color: black;
    display: flex;
    justify-content: space-between;
    color:white;
    margin-top: 25px;
}
.cont-about p{font-size: 20px;

}
.cont-about{
    width:30%
}
.icn-sc{
    font-size: 30px;
    color:aqua;
}
.cont-scroll{
    height:80px;
    width:80px;
    border-radius: 50%;
    border:1px solid white;
    text-align: center;
    display:flex;
    justify-content: center;
    align-items: center;
    margin-top: 80px;
    color:white;
    margin-right:55px;
}
.green{
    display:none;
}
.cont-Navigation p{
    font-size: 20px;
}

.cont-contact p{
    font-size: 20px;
}
@media only screen and (min-width:300px) and (max-width:1100px){
    .cont-about{
    width:40%
}
.contact-head{
   margin-left:50px;
}
.contact{
    margin-top:50px;
    margin-left:0px;
}
}
/* /----------------------------------------/ */
/* /------------------contact-2---------------------/ */

@media only screen and (min-width:300px) and (max-width:600px){
    .green{
    display:unset;
}
.blue-circle{
    display:flex;
    flex-direction: row;
    background-color: rgb(43, 226, 217);
    gap:30px;
    padding-left:30px;
    margin-top:50px;
    height: 400px;
    align-items: center;
     border-start-start-radius: 3% 0%;
     border-start-end-radius:70% 70%;
     padding-top:50px;
}
    .contact-head{
        display:none;
    }
.clr-icns{
    display: flex;
    flex-direction: column;
     gap:49px;
}
.clr-icns img{
    height:30px;
    width:30px;
}
.git-up{
    background-color: rgb(236, 234, 238);
    border-radius: 50%;
}
.clr-details{
    display: flex;
    flex-direction: column;
    gap:20px;
    font-size: 25px!important;
    color:rgb(5, 5, 5);
    margin-top: 10px;
}
.clr-areow{
    display: flex;
    justify-content: center;
    position: relative;
    bottom: -60px;
    align-items:center ;
    height:50px;
    width:50px;
    border:1px solid rgb(8, 8, 8);
    color:black;
    border-radius: 50%;
}
.green2{
    background-color: rgb(160, 219, 22);
    padding-top:1px;
    border-start-end-radius: 70% 70%;
     border-start-start-radius: 0% 0%;
}
}
.web-bgcl {
    padding-left: 0px;
}
@media only screen and (min-width:300px) and (max-width:400px){
   .blue-circle{
    gap:10px;
    padding-left:20px;
    width:100%;
   } 
}


.maindiv{
    animation-name: pro;
    animation-timing-function: linear;
    animation-timeline:view();
    animation-range: entry;
}
@keyframes pro 
{
    0%
    {
        opacity: 0.5;
        transform: scale(0.5);
    }
    
     100%
    {
        opacity: 1;
        transform: scale(1);
    } 
}
.education{
    animation-name: pro;
    animation-timing-function: linear;
    animation-timeline:view();
    animation-range: entry;
}
.cube
{
    left: -60px;
}


@media only screen and (min-width:300px) and (max-width:1400px){



    .my-skill-2{
        display: block;

    }
    .box{
        display: none;
    }
    .container
    {
        display: none;
    }
}