@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css?family=Raleway:200,100,400');
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+Pro:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+Pro:wght@600&display=swap');
body{
font-family: 'Raleway', sans-serif;
}
.container {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
width: 1050px;
height: 100%;
top: 74px;
left: -294px;
}
.container h1{
/*font-style: 'Raleway', sans-serif;*/
font-family: 'Source Serif Pro', serif;
font-weight: 50;
font-size: 60px;
}
/*.container span {
font-family: Source Sans Pro;
font-size: 36px;
}*/
.image2
{

background-repeat : no-repeat;
position : absolute ;
left : 923px;
top : 891px;
width : 165px;
height : 335px;
}
.image3
{

background-repeat : no-repeat;
position : absolute ;
left : 456px;
top : 755px;
width : 165px;
height : 335px;
}
/*.image1
{
background-image : url(image1.png);
background-repeat : no-repeat;
position : absolute ;
left : 923px;
top : 245px;
width : 165px;
height : 335px;
}*/
.image
{
background-image : url(home-images/image.png);
background-repeat : no-repeat;
position : absolute ;
left : 1134px;
top : 125px;
width : 164px;
height : 335px;
}
.name
{
/*background-image : url(home-images/name.png);*/
background-repeat : no-repeat;
position : absolute ;
left : 25px;
top : 101px;
width : 166px;
height : 32px;
}
.st0
{
border-style : Solid;
border-color : #1A1A1A;
border-color : rgba(204, 204, 204);
border-width : 1px;
position : absolute ;
left : 701px;
top : 885px;
width : 164px;
height : 0px;
}
.background
{
/*background-image : url(home-images/background.png);*/
font-family: 'Raleway', sans-serif;
background : #EFEEEE;
background : rgba(239, 238, 238, 1);
position : absolute ;
left : 3px;
top : 0px;
width : 1345px;
height : 1500px;
z-index: 0;
}
.overlapart
{
background-image : url(home-images/overlapart.png);
background-repeat : no-repeat;
position : absolute ;
left : 217px;
top : 347px;
width : 325px;
height : 107px;
}
.st1
{
/*border-style : Solid;
border-color : black;
border-color : rgba(204, 204, 204);
border-width : 0.01px;*/
position : absolute ;
left : 924px;
top : 892px;
width : 163px;
height : 333px;
}
.st1:hover .image {
opacity: 1;
filter: brightness(0%);
}
.st1:hover .middle {
opacity: 1;
}
.st2
{
/*border-style : Solid;
border-color : black;
border-color : rgba(204, 204, 204);
border-width : 0.01px;*/
position : absolute ;
left : 457px;
top : 755px;
width : 163px;
height : 333px;
overflow: hidden;
}
.st2:hover .image {
opacity: 1;
filter: brightness(0%);
}
.st2:hover .middle {
opacity: 1;
}
.image5
{
background-image : url(home-images/image5.png);
background-repeat : no-repeat;
position : absolute ;
left : 709px;
top : 847px;
width : 37px;
height : 25px;
}
.image4
{

background-repeat : no-repeat;
position : absolute ;
left : 1134px;
top : 835px;
width : 164px;
height : 333px;
}
.st3
{
/*border-style : Solid;
border-color : black;
border-color : rgba(204, 204, 204);
border-width : 0.01px;*/
position : absolute ;
left : 1135px;
top : 125px;
width : 163px;
height : 333px;
overflow: hidden;
}
.st3:hover .image {
opacity: 1;
filter: brightness(0%);
}
.st3:hover .middle {
opacity: 1;
}
.st4
{
/*border-style : Solid;
border-color : black;
border-color : rgba(204, 204, 204);
border-width : 0.01px;*/
position : absolute ;
left : 698px;
top : 960px;
width : 163px;
height : 333px;
}
.st4:hover .image {
opacity: 1;
filter: brightness(0%);
}
.st4:hover .middle {
opacity: 1;
}
.st5
{
/*border-style : Solid;
border-color : black;
border-color : rgba(204, 204, 204);
border-width : 0.01px;*/
position : absolute ;
left : 698px;
top : 340px;
width : 163px;
height : 333px;
}
.st5:hover .image {
opacity: 1;
filter: brightness(0%);
}
.st5:hover .middle {
opacity: 1;
}
.image6
{
background-image : url(home-images/image6.png);
background-repeat : no-repeat;
position : absolute ;
left : 937px;
top : 774px;
width : 38px;
height : 26px;
}
.st6
{
/*border-style : Solid;
border-color : #1A1A1A;
border-color : rgba(204, 204, 204);
border-width : 0.01px;*/
position : absolute ;
left : 1134px;
top : 835px;
width : 163px;
height : 333px;
}
.st6:hover .image {
opacity: 1;
filter: brightness(0%);
}
.st6:hover .middle {
opacity: 1;
}
.madeby
{
font-family : Microsoft PhagsPa;
font-size : 15px;
position: relative;
line-height : 16.87px;
color : #808080;
color : rgb(77, 77, 77);
top:1088px;
left: 615px;
width: 181px;
height: 17px;
z-index: 4;
}
.aboutme{
font-family: 'Source Serif Pro', serif;
z-index: 1;
font-size: 25px;
position: relative;
color: white;
left : 76px;
top : 6px;
width : 87px;
height : 37px;
/*z-index: 6;*/

}
.linkedin
{
font-family: 'Source Serif Pro', serif;
font-size : 14px;
position: relative;
line-height : 16.87px;
/*color : #4D4D4D;*/
color : rgb(77, 77, 77);
top:498px;
left:242px;
width: 39px;
height: 11px;
z-index: 4;

}
.instagram
{
font-family: 'Source Serif Pro', serif;
font-size : 14px;
position: relative;
line-height : 16.87px;
color : #4D4D4D;
color : rgb(77, 77, 77);
top:487px;
left: 356px;
width: 46px;
height: 11px;
z-index: 4;

}
.upcoming
{
font-family: 'Source Serif Pro', serif;
font-size : 16px;
position: absolute;
line-height : 16.87px;
color : #4D4D4D;
color : rgb(77, 77, 77);
top:607px;
left: 214px;
width: 146px;
height: 18px;
z-index: 4;

}
.research
{
font-family: 'Source Serif Pro', serif;
font-size : 16px;
position: absolute;
line-height : 16.87px;
color : #4D4D4D;
color : rgb(77, 77, 77);
top:658px;
left: 214px;
width: 239px;
height: 118px;
z-index: 4;

}
.one
{
font-family: 'Source Serif Pro', serif;
font-size : 18px;
font-weight: 600;
position: relative;
color : #1A1A1A;
color : rgb(26, 26, 26);
top:184px;
left:705px;
width:143px;
height:48px ;
z-index: 4;

}
.two
{
font-family: 'Source Serif Pro', serif;
font-size : 18px;
font-weight: 600;
position: relative;
color : #1A1A1A;
color : rgb(26, 26, 26);
top:68px;
left:934px;
width:151px;
height:82px ;
z-index: 4;
}
.three
{
font-family: 'Source Serif Pro', serif;
font-size : 18px;
font-weight: 600;
position: relative;
color : #1A1A1A;
color : rgb(26, 26, 26);
top:342px;
left:1148px;
width:137px;
height:63px;
text-align: right;
z-index: 4;
}
.four
{
font-family: 'Source Serif Pro', serif;
font-size : 18px;
font-weight: 600;
position: relative;
color : #1A1A1A;
color : rgb(26, 26, 26);
top:405px;
left:466px;
width:121px;
height:64px ;
z-index: 4;
}
.five
{
font-family: 'Source Serif Pro', serif;	font-size : 18px;
font-weight: 600;
position: relative;
color : #1A1A1A;
color : rgb(26, 26, 26);
top:460px;
left:1248px;
width:57px;
height:20px ;
z-index: 4;
}
.six
{
font-family: 'Source Serif Pro', serif;
font-size : 18px;
font-weight: 600;
position: relative;
color : #1A1A1A;
color : rgb(26, 26, 26);
top:482px;
left:934px;
width:138px;
height:22px ;
z-index: 4;
}
.seven
{
font-family: 'Source Serif Pro', serif;
font-size : 18px;
font-weight: 600;
position: relative;
color : #1A1A1A;
color : rgb(26, 26, 26);
top:540px;
left:706px;
width:58px;
height:22px ;
z-index: 4;
}
.NormalCharacterStyle4
{
font-family : Georgia;
font-size : 12px;
line-height : 16.87px;
color : #1A1A1A;
color : rgb(26, 26, 26);
}
.NormalCharacterStyle5
{
font-family : Georgia;
font-size : 12px;
line-height : 16.87px;
color : #1A1A1A;
color : rgb(26, 26, 26);
}
.NormalCharacterStyle6
{
font-family : Georgia;
font-size : 12px;
line-height : 16.87px;
color : #1A1A1A;
color : rgb(26, 26, 26);
}
.NormalCharacterStyle7
{
font-family : Georgia;
font-size : 12px;
color : #1A1A1A;
color : rgb(26, 26, 26);
}
.NormalCharacterStyle8
{
font-family : Georgia;
font-size : 12px;
line-height : 16.87px;
color : #1A1A1A;
color : rgb(26, 26, 26);
}
.NormalCharacterStyle9
{
font-family : Georgia;
font-size : 12px;
line-height : 16.87px;
color : #1A1A1A;
color : rgb(26, 26, 26);
}
.NormalCharacterStyle10
{
font-family : Georgia;
font-size : 14px;
color : #E6E6E6;
color : rgb(230, 230, 230);
}
/*.portfolio
{
font-family : Microsoft PhagsPa;
position: relative;
font-size : 14px;
color : #666666;
color : rgb(102, 102, 102);
left : 504px;
top : 1284px;
width : 55px;
height : 16px;
z-inde
}*/
.resume
{
font-family : Microsoft PhagsPa;
font-size : 14px;
position: relative;
color : #666666;
color : rgb(102, 102, 102);
left : 30px;
top : 161px;
width : 54px;
height : 16px;
}
.st7
{
/*border-style : Solid;
border-color : #1A1A1A;
border-color : rgba(204, 204, 204);
border-width : 0.01px;*/
position : absolute ;
left : 924px;
top : 245px;
width : 163px;
height : 333px;
overflow: hidden;
}
.image{
opacity: 1;
display: block;
width: 100%;
height: auto;
top: 0px;
left: 3px;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.st7:hover .image {
opacity: 1;
filter: brightness(0%);
}
.st7:hover .middle {
opacity: 1;
}
.text {
color: lightseagreen;
font-size: 16px;
padding: 16px 32px;
}
.button{
position: relative;
top:490px;
left: 212px;
width: 244.5px;
height: 50px;
}
.st8
{
/*border-style : Solid;
border-color : #000000;
border-color : rgba(204, 204, 204);
border-width : 0.01px;*/
position : absolute ;
left : 52px;
top : 666px;
width : 67px;
height : 67px;
}
.st9
{

/*border-color : #1A1A1A;*/

position : absolute ;
left : 0px;
top : 306px;
width : 171px;
height : 186px;
}
.text {
color: white;
position: relative;
top: 35%;
display: flex;
justify-content: left;
font-size: 11px;
font-family: 'Source Serif Pro', serif;
font-weight: 90;
text-align: center;
animation: spacing 4s ease-out alternate infinite;
animation-delay: -2s;
z-index: 6;
text-shadow: 0px 0px 6px hsla(0, 0%, 100%, 0.4);
transform:
}
.water {
position: relative;
width: 171px;
height: 186px;
overflow: hidden;
display: flex;
justify-content: center;
border-radius: 0px;
box-shadow: 18px 18px 30px rgba(209, 217, 230, 1), -18px -18px 30px rgba(255, 255, 255, 1);
transform: translate3d(0, 0, 0);
}
.water:after {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0%;
border-radius: 50px;
background: linear-gradient(
transparent 0%,
transparent 40%,
hsla(188, 63%, 45%, 0.8) 100%
);
mix-blend-mode: color;
z-index: 4;
transform: translate3d(0, 0, 0);
}
.ripple-one {
position: absolute;
top: 20%;
width: 525px;
height: 525px;
border-radius: 45%;
transform-origin: 50% 48%;
animation: water 5s infinite linear;
background: hsla(212, 64%, 72%, 0.7);
z-index: 3;
transform: translate3d(0, 0, 0);
}
.ripple-two {
position: absolute;
width: 500px;
height: 500px;
border-radius: 42%;
top: 20%;
transform-origin: 50% 48%;
animation: water 4s infinite linear;
background: hsla(212, 64%, 72%, 0.4);
z-index: 2;
}
.ripple-three {
position: absolute;
top: 20%;
width: 650px;
height: 650px;
border-radius: 45%;
transform-origin: 50% 48%;
animation: water 6s infinite linear;
background: hsla(214, 55%, 73%, 0.4);
z-index: 1;
}
@keyframes water {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes spacing {
0% {	letter-spacing: 0.7em; margin-left: 0.7em; }
100% { letter-spacing: 1em; margin-left: 1em;}
}
.vline1
{
border-style : Solid;
/*border-color : black;*/
border-color : rgba(204, 204, 204);
border-width : 0.01px;
position : absolute ;
left : 25px;
top : 0px;
width : 0px;
height : 607px;
}
.st10
{
/*background : #000000;*/
background : rgba(0, 0, 0, 1);
position : absolute ;
left : 217px;
top : 491px;
width : 244px;
height : 49px;
}
.vline3
{
border-radius: 0px;
background: #EFEEEE;
box-shadow:  16px 16px 32px #cbcaca,
-16px -16px 32px #ffffff;
/*border-style : Solid;
border-color : #EFEEEE;
border-color : rgba(204, 204, 204);
border-width : 0.01px;*/
position : absolute ;
left : 698px;
top : 0px;
width : 0px;
height : 1499px;
/*box-shadow: 10px 10px 20px #cbcaca,
-10px -10px -20px #ffffff; */
}
.vline5
{
/*border-style : Solid;
border-color : #B3B3B3;
border-color : rgba(204, 204, 204);
border-width : 0.01px;*/
position : absolute ;
left : 1298px;
top : 0px;
width : 0px;
height : 1499px;
}
.vline5_1_
{
/*bu*/
position : absolute ;
left : 457px;
top : 495px;
width : 0px;
height : 1005px;
}
.image11
{
background-image : url(home-images/image11.png);
background-repeat : no-repeat;
position : absolute ;
left : 707px;
top : 210px;
width : 33px;
height : 19px;
}
.vline2
{
border-style : Solid;
/*border-color : black;*/
border-color : rgba(204, 204, 204);
border-width : 0.01px;
position : absolute ;
left : 211px;
top : 0px;
width : 0px;
height : 541px;
}
.vline4
{
/*border-style : Solid;
border-color : #B3B3B3;
border-color : rgba(204, 204, 204);
border-width : 0.01px;*/
position : absolute ;
left : 924px;
top : 0px;
width : 0px;
height : 1500px;
}
.st11
{
border-style : Solid;
/*border-color : #1A1A1A;*/
border-color : rgba(204, 204, 204);
border-width : 1px;
position : absolute ;
left : 701px;
top : 248px;
width : 165px;
height : 0px;
}
.image10
{
background-image : url(home-images/image10.png);
background-repeat : no-repeat;
position : absolute ;
left : 937px;
top : 113px;
width : 38px;
height : 20px;
}
.st12
{
border-style : Solid;
/*border-color : #1A1A1A;*/
border-color : rgba(204, 204, 204);
border-width : 1px;
position : absolute ;
left : 928px;
top : 152px;
width : 163px;
height : 0px;
}
.image8
{
background-image : url(home-images/image8.png);
background-repeat : no-repeat;
position : absolute ;
left : 468px;
top : 624px;
width : 38px;
height : 25px;
}
.st13
{
border-style : Solid;
/*border-color : #1A1A1A;*/
border-color : rgba(204, 204, 204);
border-width : 0.01px;
position : absolute ;
left : 461px;
top : 663px;
width : 163px;
height : 0px;
}
.st14
{
border-style : Solid;
/*border-color : #808080;*/
border-color : rgba(204, 204, 204);
border-width : 0.01px;
position : absolute ;
left : 1135px;
top : 535px;
width : 163px;
height : 0px;
}
.image9
{
background-image : url(home-images/image9.png);
background-repeat : no-repeat;
position : absolute ;
left : 1252px;
top : 493px;
width : 37px;
height : 26px;
}
.st15
{
border-style : Solid;
/*border-color : #1A1A1A;*/
border-color : rgba(204, 204, 204);
border-width : 0.01px;
position : absolute ;
left : 1134px;
top : 772px;
width : 163px;
height : 0px;
}
.st16
{
border-style : Solid;
/*border-color : #1A1A1A;*/
border-color : rgba(204, 204, 204);
border-width : 0.01px;
position : absolute ;
left : 929px;
top : 819px;
width : 162px;
height : 0px;
}
.image7
{
background-image : url(home-images/image7.png);
background-repeat : no-repeat;
position : absolute ;
left : 1255px;
top : 731px;
width : 36px;
height : 25px;
}
.box1{
	position: absolute;
border-radius: 0px;
background: #EFEEEE;
box-shadow:  16px 16px 32px #cbcaca,
-16px -16px 32px #ffffff;
/*border-style : Solid;
border-color : #EFEEEE;
border-color : rgba(204, 204, 204);
border-width : 0.01px;*/
position : absolute ;
left : 0px;
top : 0px;
width : 698px;
height : 1499px;
/*box-shadow: 10px 10px 20px #cbcaca,
-10px -10px -20px #ffffff; */
z-index: 2;
}
.box1 img{
	position: relative;
	top:1354px;
	left: 535px;
}
.box2{
	position: absolute;
border-radius: 0px;
background: #EFEEEE;
box-shadow:  16px 16px 32px #cbcaca,
-16px -16px 32px #ffffff;
/*border-style : Solid;
border-color : #EFEEEE;
border-color : rgba(204, 204, 204);
border-width : 0.01px;*/
position : absolute ;
left : 0px;
top : 0px;
width : 924px;
height : 1499px;
/*box-shadow: 10px 10px 20px #cbcaca,
-10px -10px -20px #ffffff; */
z-index: 1;	
}
.box2 img{
	position: relative;
	top:1350px;
	left: 698px;

}
.box3{
	border-radius: 0px;
background: #EFEEEE;
box-shadow:  16px 16px 32px #cbcaca,
-16px -16px 32px #ffffff;
/*border-style : Solid;
border-color : #EFEEEE;
border-color : rgba(204, 204, 204);
border-width : 0.01px;*/
position : absolute ;
left : 0px;
top : 0px;
width : 1298px;
height : 1499px;
}
.box4{
	border-radius: 0px;
background: #EFEEEE;
box-shadow:  16px 16px 32px #cbcaca,
-16px -16px 100px #EFEEEE;
/*border-style : Solid;
border-color : #EFEEEE;
border-color : rgba(204, 204, 204);
border-width : 0.01px;*/
position : absolute ;
left : 0px;
top : 495px;
width : 457px;
height : 1005px;
z-index: 4;
}
.underline {
  border-bottom: 2px solid currentColor;
}