*{
    margin: 0px;
    padding: 0px;
    /* border: 1px solid red; */
}


:root{
    --boarde:red;
    --font_size:15px;
    --font_size1:60px;
    --font_style:arial;
    
}

body{
  /* background-image: linear-gradient(to left,#d1e8f7,white); */
background-image: url("background_banner.jpeg");
background-size: cover;

margin: 0px;
padding: 0px;
}















.banear_sagar{
width: 100%;
height: auto;
/* border: 1px solid var(--boarde); */
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
padding: 20px 0px;
background-image: url("background_banner.jpeg");
flex-wrap: wrap;

}




.banear_sagar .banear_text{
width: 42%;
height: auto;
/* border: 1px solid var(--boarde); */
/* justify-items: center; */
align-content: center;
}


.banear_sagar .banear_img{
width: 43%;
height: 540px;
/* border: 1px solid var(--boarde); */
position: relative;
justify-content: center;
align-items: center;
display: flex;

}

.banear_sagar .banear_text .text{
width: 100%;
height: auto;
/* border: 1px solid var(--boarde); */
padding: 10px 0px;
 font-family: "Amaranth", sans-serif;
font-size: 20px;
font-weight: 500;
}


.banear_sagar .banear_text .text09{
width: 100%;
height: auto;
/* border: 1px solid var(--boarde); */
padding: 10px 0px;
 font-family: "Amaranth", sans-serif;
font-size: 20px;
font-weight: 500;
}



.banear_sagar .banear_text .text_1{
width: 90%;
height: auto;
/* border: 1px solid var(--boarde); */
padding: 10px 20px;
font-size: var(--font_size1);
font-weight: 600;
letter-spacing: 2px;
/* font-family: arial; */
 font-family: "Be Vietnam Pro", sans-serif;
}


.banear_sagar .banear_text .text_3{
width: 80%;
height: auto;
/* border: 1px solid var(--boarde); */
padding: 10px 0px;
font-size: var(--font_size);
line-height: 30px;
font-family: var(--font_style);
}



.banear_sagar .banear_text .text_4{
width: 100%;
height: 30px;
/* border: 1px solid var(--boarde); */
padding: 10px 0px;
display: flex;
gap: 15px;
}


.banear_sagar .banear_text .text_4 .icon{
width: 40px;
height: auto;
/* border: 1px solid var(--boarde); */
text-align: center;
align-content: center;
font-size: 25px;
cursor: pointer;
transition: 0.2s all ease-in;
}

.banear_sagar .banear_text .text_4 .icon:hover{
   transform: translateY(-5px);
   font-size: 30px;

}

.banear_sagar .banear_text .text_5{
width: 100%;
height: auto;
/* border: 1px solid var(--boarde); */
padding: 15px 0px;
align-items: center;
display: flex;
}

.banear_sagar .banear_text .text_5 .downlod_cv{
width: 180px;
height: auto;
border: 1px solid white;
color: black;
background-color: white;
padding: 18px 0px;
border-radius: 30px;
text-align: center;
align-content: center;
position: relative;
font-family: ARIAL;
font-weight: 500;
font-size: 15px;
cursor: pointer;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 5px 15px,
        rgba(73, 191, 245, 0.5) 5px 2px 15px;
        overflow: hidden;
        z-index: 1;
        transition: 3s all ease-in;
}

.banear_sagar .banear_text .text_5 .downlod_cv  span{
z-index: 10;
}

.banear_sagar .banear_text .text_5 .downlod_cv:after{
    content:' ';


    position: absolute;
    top: 26px;
width: 40PX;
border: 1PX SOLID white;
height: auto;
left: 100%;
z-index: 1;

}












.banear_sagar .banear_text .text_5 .downlod_cv:before{
     content:' ';
width: 100%;
height: 100%;
border-radius: 30px;
position: absolute;
/* border: 1px solid white; */
/* color: black; */
background-color: red;
top: 0px;
left: -100%;
 background: linear-gradient(
    82.3deg,
    rgba(150, 93, 233, 1) 10.8%,
    rgba(99, 88, 238, 1) 94.3%
  );
  transition: 2s all ease-in;
  z-index: -1;
}





.banear_sagar .banear_text .text_5 .downlod_cv:hover::before{
left: 0%;
}
















.banear_sagar .banear_text .text_5 .skile{
width: 100px;
height: auto;
/* border: 1px solid var(--boarde); */
padding: 10px 0px;
font-size: var(--font_size);
margin-left: 74PX;
}


.banear_sagar .banear_img .background_img{
width: 130px;
height: 120px;
/* border: 1px solid var(--boarde); */
position: absolute;
bottom: 55px;
left: 28px;
/* animation: a 1s linear infinite alternate-reverse; */

}
.banear_sagar .banear_img .background_img img{
width: 100%;
height: 100%;
}

.banear_sagar .banear_img .background_img1{
width: 130px;
height: 130px;
/* border: 1px solid var(--boarde); */
position: absolute;
top: 34px;
right: 70px;
/* animation: a 4.5s linear infinite alternate-reverse; */


}
.banear_sagar .banear_img .background_img1 img{
width: 100%;
height: 100%;



}.banear_sagar .banear_img .background_img2{
width: 120px;
height: 120px;
/* border: 1px solid var(--boarde); */
position: absolute;
bottom: 20px;
right: 20px;
}
.banear_sagar .banear_img .background_img2 img{
width: 100%;
height: 100%;
}





.banear_sagar .banear_img .img{
width: 360px;
height: 360px;
/* border: 1px solid var(--boarde); */
transform: rotate(314deg);
position: relative;
z-index: 1;
border-radius: 10px;
  /* background-image: linear-gradient(to top, rgba(169, 184, 235, 0.527),rgba(169, 184, 235, 0.705)); */
 background-image: linear-gradient(to top,rgba(169, 184, 235, 0.027), rgba(169, 184, 235, 0.705));


}

.banear_sagar .banear_img .img:before{
    content:' ';
width: 100%;
height: 100%;
/* border: 1px solid var(--boarde); */
position: absolute;
top: 20px;
right: -20px;
z-index: -5;
background-color:black;
/* z-index: 0; */
border-radius: 10px;
}

.banear_sagar .banear_img .img img{
width: 100%;
height: 100%;
transform: rotate(45deg);
}

.banear_sagar .banear_img .img .rating{
width: 50px;
height: 150px;
/* border: 1px solid var(--boarde); */
position: absolute;
border-radius: 22px;
    bottom: 40%;
    left: -4%;
background-color: white;
animation: s 4.5s linear infinite alternate-reverse;
transform: rotate(314deg);
display: flex;
box-shadow:-4px 3px 50px 1px rgb(123, 126, 126);
}

.banear_sagar .banear_img .img .rating1{
width: 50px;
height: 150px;
/* border: 1px solid var(--boarde); */
position: absolute;
border-radius: 22px;
    top: 36%;
    right: -14%;
display: flex;
background-color: white;
animation: m 4.5s linear infinite alternate-reverse;
transform: rotate(314deg);
box-shadow:-4px 3px 50px 1px rgb(123, 126, 126);

}
 
@keyframes s{
0%{
    bottom:45% ;
}
100%{
    bottom:20%;
}
}

@keyframes m{
0%{
    top:40%;
}
100%{
    top:15%;
}
} 








/* code */
/* From Uiverse.io by Na3ar-17 */ 
.container {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
}

.label {
  background-color: transparent;
  border: 2px solid rgb(91, 91, 240);
  display: flex;
  align-items: center;
  border-radius: 50px;
  width: 160px;
  cursor: pointer;
  transition: all 0.4s ease;
  padding: 5px;
  position: relative;
}

.label::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  width: 8px;
  height: 8px;
  transition: all 0.4s ease;
  border-radius: 100%;
  margin: auto;
  opacity: 0;
  visibility: hidden;
}

.label .input {
  display: none;
}

.label .title {
  font-size: 17px;
  color: black;
  transition: all 0.4s ease;
  position: absolute;
  right: 18px;
  /* bottom: 14px; */
  text-align: center;
}

.label .title:last-child {
  opacity: 0;
  visibility: hidden;
}

.label .circle {
  height: 45px;
  width: 45px;
  border-radius: 50%;
  background-color: rgb(91, 91, 240);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.4s ease;
  position: relative;
  box-shadow: 0 0 0 0 rgb(255, 255, 255);
  overflow: hidden;
}

.label .circle .icon {
  color: #fff;
  width: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.4s ease;
}

.label .circle .square {
  aspect-ratio: 1;
  width: 15px;
  border-radius: 2px;
  background-color: #fff;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.4s ease;
}

.label .circle::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  background-color: #3333a8;
  width: 100%;
  height: 0;
  transition: all 0.4s ease;
}

.label:has(.input:checked) {
  width: 57px;
  animation: installed 0.4s ease 3.5s forwards;
}

.label:has(.input:checked)::before {
  animation: rotate 3s ease-in-out 0.4s forwards;
}

.label .input:checked + .circle {
  animation:
    pulse 1s forwards,
    circleDelete 0.2s ease 3.5s forwards;
  rotate: 180deg;
}

.label .input:checked + .circle::before {
  animation: installing 3s ease-in-out forwards;
}

.label .input:checked + .circle .icon {
  opacity: 0;
  visibility: hidden;
}

.label .input:checked ~ .circle .square {
  opacity: 1;
  visibility: visible;
}

.label .input:checked ~ .title {
  opacity: 0;
  visibility: hidden;
}

.label .input:checked ~ .title:last-child {
  animation: showInstalledMessage 0.4s ease 3.5s forwards;
}

@keyframes pulse {
  0% {
    scale: 0.95;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  }
  70% {
    scale: 1;
    box-shadow: 0 0 0 16px rgba(255, 255, 255, 0);
  }
  100% {
    scale: 0.95;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

@keyframes installing {
  from {
    height: 0;
  }
  to {
    height: 100%;
  }
}

@keyframes rotate {
  0% {
    transform: rotate(-90deg) translate(27px) rotate(0);
    opacity: 1;
    visibility: visible;
  }
  99% {
    transform: rotate(270deg) translate(27px) rotate(270deg);
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes installed {
  100% {
    width: 150px;
    border-color: rgb(35, 174, 35);
  }
}

@keyframes circleDelete {
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes showInstalledMessage {
  100% {
    opacity: 1;
    visibility: visible;
    right: 56px;
  }
}





















/* m/m */

@media (max-width:1290px) {
    .banear_sagar .banear_img .img{
        width: 300px;
        height: 300px;
    }
}












@media (max-width:1060px) {
    .banear_sagar .banear_img .img{
        width: 250px;
        height: 250px;
    }
    .banear_sagar .banear_img .img .rating{
width: 40PX;
height: 128PX;
    }
    .banear_sagar .banear_img .img .rating1{

width: 40PX;
height: 128PX;
right: -20%;
    }
}


@media (max-width:922px) {
    .banear_sagar .banear_img .img{
        width: 350px;
        height: 350px;
        
                right: 12px;
    }
    .banear_sagar{
        display: block;
        justify-items: center;
        align-content: center;
    }
    .banear_sagar .banear_text{
        width: 80%;
        padding: 0px 50px;

    }
    .banear_sagar .banear_img{
        width: 80%;
        padding: 0px 50px;

    }
    
    .banear_sagar .banear_img .img .rating{
width: 50PX;
height: 150PX;
    }
    .banear_sagar .banear_img .img .rating1{

width: 50PX;
height: 150PX;
right: -18%;
    }
}



@media (max-width:710px) {
    .banear_sagar .banear_img .img{
        width: 300px;
        height: 300px;
    }
}

@media (max-width:610px) {
    .banear_sagar .banear_img .img{
        width: 250px;
        height: 250px;
        border-radius: 5px;
    }
    .banear_sagar .banear_img .background_img{
width: 100px;
height: 90px;
    }
    .banear_sagar .banear_img .background_img1{
width: 100px;
height: 90px;

    }
    .banear_sagar .banear_img .background_img2{
width: 100px;
height: 90px;

    }
    .banear_sagar .banear_img{
      height: 432px;
    }
    .banear_sagar .banear_img .img:before {
top: 16px;
    right: -18px;
  border-radius: 5px;
} 

    .banear_sagar .banear_img .img .rating{
width: 40PX;
height: 128PX;
    }
    .banear_sagar .banear_img .img .rating1{

width: 40PX;
height: 128PX;
right: -20%;
    }
}

@media (max-width:510px) {
   
    .banear_sagar .banear_text{
        width: 80%;
        padding: 0px 0px;

    }
    .banear_sagar .banear_img{
        width: 100%;
        padding: 0px 0px;

    }   
     .banear_sagar .banear_img .img{
        width: 200px;
        height: 200px;
    }
    .banear_sagar .banear_text .text_1{
      font-size: 30px;
      padding: 10px 0px ;
      width: 100%;
    }
    .banear_sagar .banear_text .text_3{
      width: 100%;
    }
    .banear_sagar .banear_text .text_5 .skile{
      margin-left: 0px;
    }
    .banear_sagar{
      /* overflow: hidden; */
    }
    .label .circle{
      width: 40px;
      height: 40px;
    }
    
    .banear_sagar .banear_img .background_img{
width: 80px;
height: 70px;
bottom: 58px;
    left: 68px;
    }
    .banear_sagar .banear_img .background_img1{
width: 80px;
height: 70px;
top: 48px;
    right: 75px;

    }
    .banear_sagar .banear_img .background_img2{
width: 80px;
height: 70px;

    }
    .banear_sagar .banear_img{
      height: 400px;
    }
    
    .banear_sagar .banear_img .img:before {
top: 12px;
    right: -13px;
  border-radius: 5px;
} 

    .banear_sagar .banear_img .img .rating{
width: 35PX;
height: 110PX;
    }
    .banear_sagar .banear_img .img .rating1{

width: 35PX;
height: 110PX;
right: -20%;
    }
} 




@media (max-width:400px) {
    
     .banear_sagar .banear_img .img{
        width: 170px;
        height: 170px;
    }
    .banear_sagar .banear_text{
      width: 90%;
      padding: 0px 0px;
    }
    
    .banear_sagar .banear_img .background_img2{
        bottom: 77px;
    right: 32px;
     width: 70px;
    height: 60px;

    }
        .banear_sagar .banear_img .background_img1 {
        
        top: 100px;
        right: 75px;
         width: 70px;
    height: 60px;
} 
        .banear_sagar .banear_img .background_img {
        
      
         width: 70px;
    height: 60px;
} 

    .banear_sagar .banear_img .img .rating{
width: 30PX;
height: 88PX;
    }
    .banear_sagar .banear_img .img .rating1{

width: 30PX;
height: 88PX;
right: -20%;
    }
}


@media (max-width:330px) {
    
     .banear_sagar .banear_img .img{
        width: 150px;
        height: 150px;
    }
     .banear_sagar .banear_img .background_img2{
        bottom: 77px;
    right: 32px;
    width: 60px;
    height: 50px;

    }
        .banear_sagar .banear_img .background_img1 {
        
    width: 60px;
    height: 50px;
} 
        .banear_sagar .banear_img .background_img {
        
    width: 60px;
    height: 50px;
} 
    .banear_sagar .banear_img {
        height: 338px;
    }
    
    .banear_sagar .banear_img .img .rating{
width: 28PX;
height: 80PX;
    }
    .banear_sagar .banear_img .img .rating1{

width: 28PX;
height: 80PX;
right: -20%;
    }
  }




















/* nav bar */




  
.nav_bar_sagar{
width: 100%;
height: 50px;
z-index: 99;
/* border: 1px solid red; */
border-radius: 20px 20px 5px 5px;
display: flex;
position: absolute;
position: sticky;
top: 0px;
justify-content: space-around;
align-items: center;
padding: 10px 0px;
background-image: linear-gradient(to top,white,#b7dbf1);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 5px 15px, #c0cdf0 5px 2px 15px;
}

.nav_bar_sagar .nav_img{
width: auto;
height: auto;
/* border: 1px solid red; */
text-align: center;
align-content: center;
font-size: 40px;
}

.nav_bar_sagar  .nav_home{
width: 50%;
height: 100%;
/* border: 1px solid red; */
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
}

.nav_bar_sagar  .nav_home .home{
width: auto;
height: auto;
/* border: 1px solid red; */
padding: 5px 10px;
font-family: arial;
font-size: 15px;
font-weight: 500;
   cursor: pointer;
}

.nav_bar_sagar  .nav_button{
width: auto;
height: auto;
border: 1px solid white;
border-radius: 10px;
padding: 10px 30px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 5px 15px, rgba(73, 191, 245, 0.5) 5px 2px 15px;
   cursor: pointer;
   background-color: white;
}


























/* From Uiverse.io by Priyanshu02020 */ 
#heart {
  display: none;
}

.like-button {
  position: relative;
  cursor: pointer;
  display: flex;
  height: 48px;
  width: 136px;
  border-radius: 16px;
  border: none;
  background-color: #27a3e1d4;
  overflow: hidden;
  box-shadow:
    inset -2px -2px 5px rgba(255, 255, 255, 0.2),
    inset 2px 2px 5px rgba(0, 0, 0, 0.1),
    4px 4px 10px rgba(0, 0, 0, 0.4),
    -2px -2px 8px rgba(255, 255, 255, 0.1);
}

.like {
  width: 70%;
  height: 100%;
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: space-evenly;
}

.like-icon {
  fill: #dae2f3;
  height: 28px;
  width: 28px;
}

.like-text {
  color: #fcfcfc;
  font-size: 16px;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.like-count {
  position: absolute;
  right: 0;
  width: 30%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  font-size: 16px;
  border-left: 2px solid #4e4e4e;
  transition: all 0.5s ease-out;
}

.like-count.two {
  transform: translateY(40px);
}

.on:checked ~ .like .like-icon {
  fill: #fc4e4e;
  animation: enlarge 0.2s ease-out 1;
  transition: all 0.2s ease-out;
}

.on:checked ~ .like-count.two {
  transform: translateX(0);
  color: #fcfcfc;
}

.on:checked ~ .like-count.one {
  transform: translateY(-40px);
}

@keyframes enlarge {
  0% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1.2);
  }
}



/* nav bar */























/* about sation------------------------------------- */
.about_sagar_about{
  width: 100%;
  height: auto;
  /* border: 1px solid black; */

   
  /* background-image: url(background_img.jpg); */
}

.about_sagar_about .about_text_sagar_leter{
width: aut0;
height: auto;
padding: 10px 0px;
/* display: flex; */
padding: 20px 0px 0px 0px;
justify-items: center;
align-content: center;
/* border: 1px solid red; */
}

.about_sagar_about .about_text_sagar_leter .text{
width: aut0;
height: auto;
padding: 10px 0px;
/* border: 1px solid red; */
font-family: arial;
font-size: 30px;
font-weight: 600;
}

.about_sagar_about .about_text_sagar_leter .img{
width: 240px;
height: 25px;
padding: 0px 0px;
/* border: 1px solid red; */
}


.about_sagar_about .about_text_sagar_leter .img img{
width: 100%;
height:100% ;
padding: 0px 0px;
/* position: relative;
top: -5px; */
/* border: 1px solidtop red; */
}






.about_sagar_about .about_sagar{
  width: auto;
  /* border: 1px solid black; */
  height: auto;
  padding: 20px 0px;
  display:flex;
  gap: 30px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.about_sagar_about .about_sagar .about_phote{
  width: 580px;
  /* border: 1px solid red; */
  height: 500px;
  justify-items: center;
  align-content: center;
  /* padding: 20px 0px; */
}


.about_sagar_about .about_sagar .about_phote .my_phote{
  width: 320px;
  /* border: 1px solid red; */
  height: 84%;
  border-radius: 10px;
  position: relative;
  /* padding: 20px 0px; */
}.about_sagar_about .about_sagar .about_phote .my_phote img{
  width: 100%;
  height: 100%;
  border-radius:10px ;
  
}
.about_sagar_about .about_sagar .about_phote .my_phote .photo_top{
  width: 100px;
  border: 3px solid white;
  height: 100px;
  border-radius: 10px;
  position: absolute;
  top: -7%;
  left: -11%;
  overflow: hidden;
}


.about_sagar_about .about_sagar .about_phote .my_phote .photo_button{
  width: 110px;
  border: 3px solid white;
  height: 130px;
  border-radius: 10px;
  position: absolute;
  right: -10%;
  bottom: 4%;
  overflow: hidden;
}



.about_sagar_about .about_sagar .about_phote .my_phote .photo_button_left{
  width: 111%;
  /* border: 1px solid white; */
  height: 74px;
  border-radius: 10px;
  position: absolute;
  left: -11%;
  bottom: -1%;
  overflow: hidden;
}

.about_sagar_about .about_sagar .about_phote .my_phote .photo_button img{
  width: 100%;
  height: 100%;
}
.about_sagar_about .about_sagar .about_phote .my_phote .photo_top img{
  width: 100%;
  height: 100%;
}
.about_sagar_about .about_sagar .about_phote .my_phote .photo_button_left img{
  width: 100%;
  height: 100%;
}





.about_sagar_about .about_sagar .about_text{
  width: 580px;
  /* border: 1px solid red; */
  height: auto;
  padding: 20px 0px;
}


.about_sagar_about .about_sagar .about_text .text{
  width: 100%;
  /* border: 1px solid red; */
  height: auto;
  font-family: arial;
  font-size: 600;
  font-size: 40px;
  line-height: 50px;
}


.about_sagar_about .about_sagar .about_text .text1{
  width: 100%;
  /* border: 1px solid red; */
  height: auto;
  font-family: arial;
  font-size: 600;
  font-size: 16px;
  line-height: 25px;
  padding-top: 10px;
  /* padding: 10px 0px; */
}



.about_sagar_about .about_sagar .about_text .box_about{
  width: 98%;
  /* border: 1px solid red; */
  height: auto;
  font-family: arial;
  font-weight: 600;
  font-size: 16px;
  line-height: 25px;
  display: flex;
  padding: 13px 0px 13px 10px;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
  border-radius: 5px;
  
    background-image: linear-gradient(to bottom, #fff, #28b9cf5c);
    box-shadow: 2px 2px 25px -10px rgb(0 28 28) inset;
    
}


.about_sagar_about .about_sagar .about_text .box_about .box{
  width: 50px;
  /* border: 1px solid red; */
  height: 50px;
  text-align: center;
  align-content: center;
  border-radius: 50%;
      box-shadow: 2px 2px 18px 0px rgb(7 253 253) inset;
 
}


.about_sagar_about .about_sagar .about_text .box_about .box1{
  width: 82%;
  /* border: 1px solid red; */
  height: auto;
  font-size: 15px;
  font-weight: 500;
 
}
.about_sagar_about .about_sagar .about_text .box_about .box1 p{
 
  font-size: 20px;
  font-weight: 600;
  padding-bottom: 13px;
 
}
.about_sagar_about .about_sagar .about_text .all_box{
  width: 100%;
  /* border: 1px solid red; */
  height: auto;
  padding-top: 20px ;
  display: flex;
  justify-content: space-between;
  align-items: center; 
}

.about_sagar_about .about_sagar .about_text .all_box .phote{
  width:auto ;
  /* border: 1px solid red; */
  height: auto;
display: flex;
gap: 12px;
align-items: center;
 
}
.about_sagar_about .about_sagar .about_text .all_box .phote_bouton{
  width: auto;
  /* border: 1px solid red; */
  height: auto;
 border-radius: 20px; 
 font-size: 14px;
 padding: 10px 10px;
 font-family: ARIAL;
 text-align: center;
 align-content: center;
   cursor: pointer;
}


.about_sagar_about .about_sagar .about_text .all_box .phote .phote_gol{
  width:40px ;
  /* border: 1px solid red; */
  height: 40px;
 border-radius: 50%; 
 overflow: hidden;
 background-color: black;
}
.about_sagar_about .about_sagar .about_text .all_box .phote .phote_gol img{
  width:100% ;
  height: 100%;
 
}




.about_sagar_about .about_sagar .about_text .all_box .phote .phote_gol1{
  width:auto ;
  /* border: 1px solid red; */
  height: auto;
  text-align: center;
  align-content: center;
  font-family: arial;
  font-size: 12px;
  
}


.about_sagar_about .about_sagar .about_text .all_box .phote .phote_gol1 p{

  font-family: arial;
  font-size: 14px;
  font-weight: 500;
  padding-bottom: 7px;
}














/* about sation */















/* skills sction---------- */

.skils_sagar{
  width: 100%;
  height: auto;
  /* border: 1px solid red; */
  padding: 10px 0px;
  justify-items: center;
  align-content: center;
  
  /* background-image: url(background_img.jpg); */
}

.skils_sagar .skils_hading{
  width: 100%;
  height: auto;
  /* border: 1px solid red; */
  padding: 10px 0px 40px 0px;
  /* align-content: center; */
  /* text-align: center; */
justify-items: center;
align-content: center;
}




.skils_sagar .skils_hading .text{
width: aut0;
height: auto;
padding: 10px 0px;
/* border: 1px solid red; */
font-family: arial;
font-size: 30px;
font-weight: 600;
}
.skils_sagar .skils_hading .img{
width: 240px;
height: 25px;
padding: 0px 0px;
/* border: 1px solid red; */
}

.skils_sagar .skils_hading .img img{
width: 100%;
height: 100%;
}









.skils_sagar .skils_style{
  width: auto;
  height: auto;
  /* border: 1px solid red; */
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 30px;
  /* align-content: center; */
  /* text-align: center; */
}


.skils_sagar .skils_style .skills{
  width: 235px;
  height: 130px;
  border-radius: 10px;
  /* border: 1px solid red; */
  /* display: grid; */
  padding: 18px 15px;
 /* justify-items: center; */
 align-content: center;  
   background-image: linear-gradient(to top, rgb(255 255 255 / 77%), rgb(73 191 245 / 28%));

    box-shadow: 2px 2px 25px -10px rgb(0 28 28) inset;

}




.skils_sagar .skils_style .skills .skils_img{
  width: 100%;
  height: auto;
  /* border: 1px solid red; */
  display: flex;
  gap: 10px;
  padding-top: 3px;
  
}

.skils_sagar .skils_style .skills .skils_img1{
  width: 100%;
  height: auto;
  /* border: 1px solid red; */
  display: flex;
  justify-content: space-between;
  font-family: arial;
  padding: 20px 0px 5px 0px;

  
}



.skils_sagar .skils_style .skills .skils_img .prog{
height: 9.5px;
width: 100%;
appearance: none;
-webkit-appearance: none; 
background-color: transparent;
}

.skils_sagar .skils_style .skills .skils_img .prog::-webkit-progress-bar{
background-color: rgb(147, 151, 151);
border-radius: 10px;
}


.skils_sagar .skils_style .skills .skils_img .prog::-webkit-progress-value{
border-radius: 10px;
background-image: linear-gradient(to right,rgb(210, 30, 255),rgb(6, 105, 211),rgb(165, 30, 255));
/* color: orangered; */
}





.skils_sagar .skils_style .skills .skils_img3{
  width: 100px;
  height: 2px;
  background-color: rgb(33, 10, 241);
  /* border: 1px solid red; */
  display: flex;
  margin-top: 25PX;
  
}

.skils_sagar .skils_style .skills .skils_img .img{
  width: 40px ;
  height: 40px;
  /* border: 1px solid red; */
  border-radius: 50%;
  text-align: center;
  align-content: center;
  
    box-shadow: 2px 2px 18px 0px rgb(7 253 253) inset;
  /* display: flex; */
}

.skils_sagar .skils_style .skills .skils_img .text{
  width: auto;
  height: auto;
  /* border: 1px solid red; */
  align-content: center;
  /* border-radius: 50%; */
  /* display: flex; */
}




/* skills sction---------- */





/* project */



.my_projects{
    /* border: 1px solid red; */
    width: 100%;
    height: auto;
    padding: 20px 0px;
    justify-items: center;
    align-content: center;
    /* background-image: url("background_img.jpg"); */
}



.my_projects .hading{
    /* border: 1px solid red; */
    width: 100%;
    height: auto;
    padding: 20px 0px 40px 0px;
    justify-items: center;
    align-content: center;
}








.my_projects .hading .text{
width: aut0;
height: auto;
padding: 10px 0px;
/* border: 1px solid red; */
font-family: arial;
font-size: 30px;
font-weight: 600;
}
.my_projects .hading .img{
width: 240px;
height: 25px;
padding: 0px 0px;
/* border: 1px solid red; */
}
.my_projects .hading .img img{
width: 100%;
height: 100%;
}



.my_projects .projects{
    /* border: 1px solid red; */
    width: auto;
    height: auto;
    /* padding: 20px 0px; */
    /* display: flex; */
    justify-content: center;
    align-items: center;
    gap: 30px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
}

.my_projects .projects .box_pojects{
    /* border: 1px solid red; */
    width: 335px;
    height: auto;
    border-radius: 10px;
    padding: 15px 15px;
    /* justify-items: end; */
    /* align-content: end; */
    /* background-color: rgb(214, 210, 210); */
        background-image: linear-gradient(to top, rgb(255, 255, 255), rgba(169, 184, 235, 0.705));

    box-shadow: 2px 2px 25px -10px rgb(0 28 28) inset;
}



.my_projects .projects .box_pojects .box_pojects_img{
    /* border: 1px solid red; */
    width: 100%;
    height: 190px;
    overflow: hidden;
    border-radius: 10px;
    background-color: white;
    position: relative;
    /* transition: 2s all ease-in-out; */
}

.my_projects .projects .box_pojects:hover .box_pojects_img img{
   transform:scale(110%);
}


.my_projects .projects .box_pojects .box_pojects_img .time{
    border: 1px solid red;
    width: auto;
    height: auto;
    z-index: 5;
    /* overflow: hidden; */
    border-radius: 7px;
    background-color: white;
    position: absolute;
    bottom: 12px;
    left: 12px;
    padding: 6px 10px;
    /* transition: 2s all ease-in-out; */
}



.my_projects .projects .box_pojects .box_pojects_img img{
    /* border: 1px solid red; */
    width: 100%;
    height: 100%;
    transition: 2s all ease-in-out;
}

.my_projects .projects .box_pojects .box_pojects_text{
    /* border: 1px solid black; */
    width: 100%;
    height: 37%;
    margin-right: 20px;
    /* padding: 6px 0px; */
    /* text-align: center; */
    justify-items: center;
    align-content: center;
    border-radius:0px 0px 10px 10px;
}

.my_projects .projects .box_pojects .box_pojects_text .link{
    /* border: 1px solid black; */
    width: 100%;
    height: 40px;
    border-radius: 5px;
    text-align: center;
    align-content: center;
    background-color: #17afc6;
    /* margin-right: 20px; */
    /* padding: 6px 0px; */
    /* text-align: center; */
    /* justify-items: center; */
    /* align-content: center; */
    /* border-radius:0px 0px 10px 10px; */
}










.my_projects .projects .box_pojects .box_pojects_text .hadding{
    /* border: 1px solid black; */
    width: 100%;
    height: auto;
    /* margin-right: 20px; */
    padding: 5px 0px 0px 0px;
    font-size: 25px;
    font-family: arial;
    font-weight: 600;
    /* text-align: center; */
    /* border-radius:0px 0px 10px 10px; */
}




.my_projects .projects .box_pojects .box_pojects_text .used{
    /* border: 1px solid black; */
    width: 100%;
    height: auto;
    /* margin-right: 20px; */
    padding: 12px 0px 0px 0px;
    font-size: 18px;
    font-family: arial;
    font-weight: 500;
    /* text-align: center; */
    /* border-radius:0px 0px 10px 10px; */
}

.my_projects .projects .box_pojects .box_pojects_text .hadding1{
    /* border: 1px solid black; */
    width: 100%;
    height: auto;
    /* margin-right: 20px; */
    line-height: 25px;
    padding: 10px 0px;
    display: flex;
    gap: 10px;
    /* text-align: center; */
    /* border-radius:0px 0px 10px 10px; */
}

.my_projects .projects .box_pojects .box_pojects_text .hadding1 p{
   

  width: 50px;
  height: auto;
  border-radius: 5px;
  text-align: center;
  align-content: center;
  border: 1px solid red;
  padding: 0.5px 0px;
}







/* project */
















/* footer--------------------- */

.footer_sagar{
    width: 100%;
    height: auto;
    /* border: 1px solid red; */
    justify-items: center;
    align-content: center;
    /* background-image: url("background_banner.jpeg"); */
    /* background-color: #28b9cf; */
        /* background-image: linear-gradient(to top, rgb(255 255 255 / 77%), rgb(73 191 245 / 28%)); */
             
      background-image:linear-gradient(to top, #d1e8f7, #17afc6);
        box-shadow: 2px 2px 25px -10px rgb(0 28 28) inset;

}




.footer_sagar .footer_main{
    width: auto;
    height: auto;
    /* border: 1px solid red; */
    padding: 20px 20px;
    display: flex;
    gap: 40px;
}



.footer_sagar .footer_main .fotter{
    width: 280px;
    height: auto;
    /* border: 1px solid red; */
    /* padding: 20px 0px; */
    /* display: flex; */
}


.footer_sagar .footer_main .fotter .name{
    width: auto;
    height: auto;
    /* border: 1px solid red; */
    font-family: arial;
    font-size: 40px;
    /* padding: 20px 0px; */
    /* display: flex; */
}

.footer_sagar .footer_main .fotter .connect{
    width: auto;
    height: auto;
    /* border: 1px solid red; */
    font-family: arial;
    font-size: 18px;
    font-weight: 600;
    padding: 20px 0px;
    display: flex;
}
.footer_sagar .footer_main .fotter .share{
    width: auto;
    height: auto;
    /* border: 1px solid red; */
    /* font-family: arial; */
    font-size: 20px;
    /* font-weight: 600; */
    padding: 10px 0px;
    display: flex;
    gap: 20px;
}
.footer_sagar .footer_main .fotter .share span{
  /* padding: 0px 20px 0px 0px; */
height: 40px;
  width: 40px;
  /* border: 1px solid red; */
  border-radius: 50%;
  text-align: center;
  align-content: center;
    background-color: blue;
  color: white;
}

.footer_sagar .footer_main .fotter .donlode{
  padding: 10px 0px 20px 0px;
height:auto;
/* border: 1px solid red; */
  width: auto;
  display: flex;
  gap: 20px;
  
}


.footer_sagar .footer_main .fotter .donlode .goole{
  /* padding: 0px 20px 0px 0px; */
height:40px;
/* border: 1px solid red; */
  width: 110px;
  display: flex;
  gap: 10px;
  background-color: aqua;
  border-radius: 7px;
  justify-content: center;
  align-items: center;
   font-size: 16px;
}



.footer_sagar .footer_main .fotter .donlode .goole span{
  /* padding: 0px 20px 0px 0px; */
height:auto;
/* border: 1px solid red; */
  width: auto;
  /* display: flex; */
  /* gap: 20px; */
  /* border-radius: 7px; */
  /* justify-content: center; */
  /* align-items: center; */
  font-size: 16px;
  
}



.footer_sagar .footer_main .fotter .donlode .app{
  background-color: aqua;
  /* padding: 0px 20px 0px 0px; */
height: 40px;
/* border: 1px solid red; */
  width: 110px;
  display: flex;
  gap: 10px;
  border-radius: 7px;
  justify-content: center;
  align-items: center;
   font-size: 16px; 
}


.footer_sagar .footer_main .fotter .donlode .app span{

  /* padding: 0px 20px 0px 0px; */
height:auto;
font-size: 16px;
/* border: 1px solid red; */
  width: auto;
  /* display: flex; */
  /* gap: 20px; */
  /* border-radius: 7px; */
  /* justify-content: center; */
  /* align-items: center; */
  
}



.footer_sagar .footer_main .fotter1{
    width: 450px;
    height: auto;
    /* border: 1px solid red; */
    padding: 20px 0px;
    /* justify-items: center; */
    /* display: flex; */
}


.footer_sagar .footer_main .fotter1 .quick_link{
    width: 100%;
    height: auto;
    /* border: 1px solid red; */
    font-family: arial;
    font-size:18px;
    font-weight: 600;
    /* padding: 20px 0px; */
    /* display: flex; */
}


.footer_sagar .footer_main .fotter1 .all_link{
    width: 100%;
    height: auto;
    /* border: 1px solid red; */
    font-family: arial;
    font-size:16px;
    font-weight: 500;
    display: flex;
    padding: 20px 0px;
    display: flex;
    justify-content: space-between;
    gap: 20PX;
    align-items: center;
}



.footer_sagar .footer_main .fotter1 .input{
    width: auto;
    height: auto;
    /* border: 1px solid red; */
    padding: 20px 0px;
    position: relative;
    display: flex;
    
}


.footer_sagar .footer_main .fotter1 .input i{
   position: absolute;
   font-size: 20px;
   /* left: 10px; */
   top: 31px;
   /* border-bottom: 1px solid red; */
    
}

.footer_sagar .footer_main .fotter1 .input .red{
   /* position: absolute; */
   /* width: 100px; */
   padding: 12px 80px 12px 35px;
outline: none;
   font-size: 15px;
border: none;
   border-bottom: 2px solid #3333a8;
   
    /* background-color: #28b9cf; */
    background-image: linear-gradient(to top, #7dbbe2d9, #17afc6b0);

    
}

.footer_sagar .footer_main .fotter1 .input .ok{
  
   padding: 10px 30px   ;
   border-radius: 30px;
   margin-left: 15px;

    
}



.footer_sagar .footer_main .fotter1 .main_footer{
  
   /* padding: 10px 30px   ; */
   margin-top: 20px;
   border-radius: 10px;
   /* border: 1px solid red; */
   /* margin-left: 15px; */
   width: 50px;
   height: 50px;
   background-color: aquamarine;

    
}



.footer_sagar .footer_main .fotter2{
    width: 300px;
    height: auto;
    /* border: 1px solid red; */
    padding: 0px 0px 0px 30px;
    /* display: flex; */
}


.footer_sagar .footer_main .fotter2 .address{
    width: auto;
    height: auto;
    /* border: 1px solid red; */
    font-family: arial;
    font-size: 18px;
    font-weight: 600;
    padding: 15px 0px;
    /* display: flex; */
}




.footer_sagar .footer_main .fotter2 .map{
    width: auto;
    height: auto;
    /* border: 1px solid red; */
    display: flex;
    font-family: arial;
    font-size: 16px;
    font-weight: 500;
    padding: 10px 0px;
    /* display: flex; */
}

.footer_sagar .footer_main .fotter2 .map p{
   padding: 0px;
   margin:0px
}
.footer_sagar .footer_main .fotter2 .map span{
   padding: 0px  10px 0px 0px;
   margin:0px
}






.footer_sagar .footer_main .fotter2 .email{
    width: auto;
    height: auto;
    /* border: 1px solid red; */
    display: flex;
    font-family: arial;
    font-size: 16px;
    font-weight: 500;
    padding: 10px 0px;
    /* display: flex; */
}

.footer_sagar .footer_main .fotter2 .email p{
   padding: 0px;
   margin:0px
}
.footer_sagar .footer_main .fotter2 .email span{
   padding: 0px  10px 0px 0px;
   margin:0px
}



.footer_sagar .footer_main .fotter2 .phone{
    width: auto;
    height: auto;
    /* border: 1px solid red; */
    display: flex;
    font-family: arial;
    font-size: 16px;
    font-weight: 500;
    padding: 10px 0px;
    /* display: flex; */
}

.footer_sagar .footer_main .fotter2 .phone p{
   padding: 0px;
   margin:0px
}
.footer_sagar .footer_main .fotter2 .phone span{
   padding: 0px  10px 0px 0px;
   margin:0px
}







.footer_sagar .footer_text{
    width: 96%;
    height: auto;
    border-top: 2px solid #3333a8;
    padding: 20px 0px;
    font-family: arial;
    font-size: 16px;
}




















/* footer----------------------------- */



/* conncet-------------------- */
.sagar_contact_us{
    /* border: 1px solid red; */
    width: 100%;
    height: auto;
    padding: 0px 0px 30px 0px;
    justify-items: center;
    align-content: center;
}


.sagar_contact_us .hadding{
    /* border: 1px solid red; */
    width: 100%;
    height: auto;
    padding: 20px 0px 0px 0px;
    justify-items: center;
    align-content: center;
}




.sagar_contact_us .hadding .text{
width: auto;
height: auto;
padding: 10px 0px;
/* border: 1px solid red; */
font-family: arial;
font-size: 30px;
font-weight: 600;
}
.sagar_contact_us .hadding .img{
width: 240px;
height: 25px;
padding: 0px 0px;
/* border: 1px solid red; */
}.sagar_contact_us .hadding .img img{
width: 100%;
height: 100%;
}






.sagar_contact_us .main{
    /* border: 1px solid red; */
    width: auto;
    height: auto;
    display: flex;
    gap: 30px;
    justify-content: center;
    /* align-items: center; */
    padding: 20px 0px;
}




.sagar_contact_us .main .get_in{
    /* border: 1px solid red; */
    width: 560px;
    height: auto;
    /* justify-items: center; */
    align-content: center;
    /* display: flex; */
    padding: 20px 0px;
}



.sagar_contact_us .main .get_in .text{
    /* border: 1px solid red; */
    width: 100%;
    height: auto;
    display: flex;
    /* padding: 20px 0px; */
    font-family: arial;
    font-weight: 600;
    font-size: 35px;

}



.sagar_contact_us .main .get_in .text1{
    /* border: 1px solid red; */
    width: 100%;
    height: auto;
    display: flex;
    padding: 20px 0px;
    line-height: 26px;
    font-family: arial;
    font-size: 16px;
}

.sagar_contact_us .main .get_in .text2{
    /* border: 1px solid red; */
    width: auto;
    height: auto;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    padding: 20px 0px;
    line-height: 26px;
    font-family: arial;
    font-size: 16px;
    gap: 30px;
    /* justify-content: space-between; */
}


.sagar_contact_us .main .get_in .text2 .mine{
    /* border: 1px solid red; */
    width:240px;
    height: 70px;
    /* padding: 20px 0px; */
    line-height: 26px;
    font-family: arial;
    font-size: 16px;
    border-radius: 10px;
    
    background-image: linear-gradient(to top, rgb(255 255 255 / 77%), rgb(73 191 245 / 28%));
    box-shadow: 2px 2px 25px -10px rgb(0 28 28) inset;
}




.sagar_contact_us .main .get_in .input{
    /* border: 1px solid red; */
    width: 100%;
    height: auto;
    justify-content: space-between;
    /* align-content: center; */
    display: flex;
    /* padding: 18px 0px; */
    gap: 20px;
}


.sagar_contact_us .main .get_in .input .in{
    /* border: 1px solid red; */
    width: 45%;
    border: none;
    height: auto;
    /* justify-items: center; */
    /* align-content: center; */
    /* display: flex; */
    border-radius:10px ;
    padding: 16px 0px 16px 10px;
    background-image: linear-gradient(to top, rgb(255 255 255 / 77%), rgb(73 191 245 / 28%));
    box-shadow: 2px 2px 25px -10px rgb(0 28 28) inset;
}
.sagar_contact_us .main .get_in .input .put{
    /* border: 1px solid red; */
    border: none;
    width: 45%;
    height: auto;
    border-radius: 10px;
    /* justify-items: center; */
    /* align-content: center; */
    /* display: flex; */
    padding: 16px 0px 16px 10px;
    
    background-image: linear-gradient(to top, rgb(255 255 255 / 77%), rgb(73 191 245 / 28%));
    box-shadow: 2px 2px 25px -10px rgb(0 28 28) inset;
}

.sagar_contact_us .main .get_in .emile{
    /* border: 1px solid red; */
    width: 96%;
    height: auto;
    /* justify-items: center; */
    /* align-content: center; */
    /* display: flex; */
    border-radius: 10px;
    padding: 16px 10px 16px 10px;
    margin-top: 26px;
    
    background-image: linear-gradient(to top, rgb(255 255 255 / 77%), rgb(73 191 245 / 28%));
    box-shadow: 2px 2px 25px -10px rgb(0 28 28) inset;
    border: none;
}





.sagar_contact_us .main .get_in .massage{
    /* border: 1px solid red; */
    width:96%;
    height: auto;
    /* justify-items: center; */
    /* align-content: center; */
    /* display: flex; */
    padding: 20px  10px 100px 10px;
    border-radius: 10px;
    margin-top: 26px;
    background-image: linear-gradient(to top, rgb(255 255 255 / 77%), rgb(73 191 245 / 28%));
    box-shadow: 2px 2px 25px -10px rgb(0 28 28) inset;
    border: NONE;

}



.sagar_contact_us .main .get_in .sub{
    /* border: 1px solid red; */
    width:auto;
    height: auto;
    /* justify-items: center; */
    /* align-content: center; */
    /* display: flex; */
    padding: 14px 30px;
    border-radius: 10px;
    margin-top: 26px;
    background-image: linear-gradient(to top, rgb(255 255 255 / 77%), rgb(73 191 245 / 28%));
    box-shadow: 2px 2px 25px -10px rgb(0 28 28) inset;

}



















/* conncet-------------------- */























.sagar_home{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: absolute;
  /* border:2px solid  black; */
  /* background-color: red; */
  z-index: 30;
  position: fixed;
  right: 60px;
  bottom: 60px;
   cursor: pointer;
   background-color: white;
   text-align: center;
   align-content: center;
   font-size: 20px;  
   transition: 0.25s;
   box-shadow: 0 7px 13px -3px #95e5f2, 0 2px 4px 0 #28b9cf, inset 0 0 0 0 skyblue;
}