@import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Scheherazade+New&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Arvo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Arvo:wght@400;700&family=Lora:ital,wght@1,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Arvo:wght@400;700&family=Kalam&family=Lora:ital,wght@1,600&display=swap');
*
{ 
  margin:0;
  padding:0;
  box-sizing:border-box;
  text-decoration:none;
}

html
{
  scroll-behavior:smooth;}

.max-width
{
  max-width:1300px;
  padding:0 80px;
  margin:auto;
  
}

/* navbar styling */

.navbar
{
  position:fixed;
  width:100%;
  padding:25px 0;
  z-index:999;
   /* background:crimson; */
  font-family:'Lora',sans-serif;
  transition: all 0.3s ease;
}

.navbar.sticky
{
  padding:25px 0;
  background:darkturquoise;
}

.navbar .max-width
{
   display:flex;
   align-items:center;
   justify-content:space-between;
}
.navbar .logo a{
  color:white;
  font-size:39px;
  font-weight:600;
}

.navbar .logo a span{
  color:#00CED1;
  transition: all 0.3s ease;
}

.navbar.sticky .logo a span{
  color:white;
}
.navbar .menu li {
   list-style:none;
   display:inline-block;
}

.navbar .menu li a{
   color:white;
   font-size:21px;
   margin-left:20px;
  font-weight:500;
  transition:color 0.3s ease;
}

.navbar .menu li a:hover
{
  color:darkturquoise;
}
.navbar.sticky .menu li a:hover
{ 
  color:black;}

/* menu btn styling */
 
.menu-btn
{
  color:#fff;
  font-size:23px;
  cursor:pointer;
  display:none;
}


/* Home Section */

.home
{
  display:flex;
  background:black;
  height:100vh;
  color:white;
  min-height:500px;
  
  font-family:'Playfair Display',sans-serif;
}

.home .max-width
{
  margin: auto 0 auto 40px;
}

.home .home-content .text-1{
  font-size:27px;
}

.home .home-content .text-2{
  font-size:55px;
  font-weight:700;
  margin-left:-3px;
  
}

.home .home-content .text-2:after{
  content:"";
  position:absolute;
  background-color:darkturquoise;
  height:3px;
  width:0%;
  left:110px;
  top:290px;
  transition:0.3s;
}
.home .home-content .text-2:hover
{
  color:darkturquoise;
}
.home .home-content .text-2:hover:after{
  width:20%;
  
}

.home .home-content .text-3{
  font-size:40px;
  margin:5px 0; 
}

.home .home-content .text-3 span{
  color:darkturquoise;
  font-weight:bold;
  font-size:43px;
  font-family:'Kalam';
}

.home .home-content a {
   display:inline-block;
   background:darkturquoise;
   color:white; 
   height:50px;
   font-size:20px;
   padding:0px;
   margin-top:10px;
   border-radius:3px;
  
   border:none;
   overflow:hidden;
   cursor:pointer;
   transition: all 0.3s ease;
}

.b,
.bt
{
  display:inline-flex;
  align-items:center;
  padding:0 10px;
  color:white;
  height:100%;}

.b
{
   font-size:15px;
   background:rgba(0,0,0,0.1);
}
.home .home-content a:hover
{
    color:#00CED;
    background:none;
    transform:scale(1.2);
    border:2px solid darkturquoise;
}


/* about section styling */

section{
  padding:105px 0;
}
.about{
    font-family:'Scheherazade',sans-serif;
    background:#000;
    color:white;
}

.about .title{
       position:relative;
       text-align:center;
       font-size:40px;
       margin-bottom:60px;
       font-weight:500;
       padding-bottom:20px;
       font-family:'Playfair Display',sans-serif;
       color:#fff;
}

.about .title::before{
   content:"";
   position:absolute;
   bottom:0px;
   left:50%;
   width:180px;
   height:3px;
   background:#fff;
   transform:translateX(-50%);
}

.about .title::after{
   content:"who I am";
   position:absolute;
   bottom:-12px;
   left:50%;
   font-size:20px;
   color:darkturquoise;
   padding:5px;
   background:#000;
   transform:translateX(-50%);
}

.about .about-content{
  display:flex;
   flex-wrap:wrap;
   align-items:center;
   justify-content:space-between;
}

.about .about-content .left
{
  width:45%;
}
.about .about-content .left img{
  
   height:400px;
   width:400px;
   
   object-fit:cover;
}

.about .about-content .right{
  width:55%;}


.about .about-content .right .text-4{
  font-size:28px;
  font-weight:600;
  margin-bottom:10px;

}


.about .about-content .right .text-4 a{
  color:darkturquoise;
}
.about .about-content .right .text-4 span{
  color:darkturquoise;
  font-weight:bold;
  font-size:33px;
  font-family:'Kalam';
}


.about .about-content .right p
{ 
   text-align:justify;
color:#fff;
} 
.about .about-content .right p span
{ 
   color:darkturquoise;
   font-style:italic;
   font-weight:bold;
} 

/* Experience */


.exp{
    font-family:'Scheherazade',sans-serif;
}

.exp .title{
       position:relative;
       text-align:center;
       font-size:40px;
       margin-bottom:50px;
       font-weight:500;
       padding-bottom:20px;
       font-family:'Playfair Display',sans-serif;
       color:white;
}

.exp .title::before{
   content:"";
   position:absolute;
   bottom:0px;
   left:50%;
   width:200px;
   height:3px;
   background:#fff;
   transform:translateX(-50%);
}

.exp .title::after{
   content:"what I have done";
   position:absolute;
   bottom:-12px;
   left:50%;
   font-size:20px;
   color:darkturquoise;
   padding:5px;
   background:#000;
   transform:translateX(-50%);
}
.exp
{
   width:100%;
   height:100%;
   background:#000;   
}

.container
{
   margin: 200px auto 100px;
   display:grid;
   grid-template-columns: repeat( auto-fit, minmax(350px, 1fr));
   grid-gap:20px;
}

.container .card
{
  position:relative;
  width: 350px;
 
  margin:0 auto;
  background:#333;
  padding:20px;
  box-sizing: border-box;
  text-align:center;

  overflow:hidden;
}
.container .card:hover
{
    box-shadow: 0 10px 40px darkturquoise; 
}
.container .card .layer
{
   position:absolute;
   top:calc(100% - 2px);
   left:0;
   
   width:100%;
    height:100%;
    background-image: linear-gradient(#00CED1, #AFEEEE);
   
   z-index:1;
   transition:0.5s;
} 


.container .card:hover .layer
{
  top:0;
}
.container .card .content
{
  position:relative;
  z-index:2;
}

.container .card .content p
{
  font-size:15px;
  line-height:24px;
  color:#fff;
  text-align:justify;
}
.container .card .content:hover p
{
  color:black;}
.container .card .content .imgBx
{
  width:100px;
  height:100px;
  margin:0 auto;
  border-radius:50%;
  overflow:hidden;
  border:4px solid #fff;
}

.container .card .details
{
  margin-top:10px;}

.container .card .details h2 span
{
  font-size:20px;
  font-style:italic;
}
/* Skills Section */



.skills{
    font-family:'Scheherazade',sans-serif;
    background:#000;}

.skills .title{
       position:relative;
       text-align:center;
       font-size:40px;
       margin-bottom:50px;
       font-weight:500;
       padding-bottom:20px;
       font-family:'Playfair Display',sans-serif;
       color:black;
       color:#fff;
}

.skills .title::before{
   content:"";
   position:absolute;
   bottom:0px;
   left:50%;
   width:200px;
   height:3px;
   background:#fff;
   transform:translateX(-50%);
}

.skills .title::after{
   content:"My Core Skills";
   position:absolute;
   bottom:-12px;
   left:50%;
   font-size:20px;
   color:darkturquoise;
   padding:5px;
   background:#000;
   transform:translateX(-50%);
}
.skills .cont1
{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:row-reverse;
  flex-wrap:wrap;
  margin-top : 40px;
}

.skills .cont1 .clock
{
  width:340px;
  height:400px;
  margin:20px;
  
  border:15px solid #fff;
  background:black;
  
  transition:0.5s;
}
.skills .cont1 .clock:hover
{
  background:none;
}
.skills .cont1 .clock .box1
{
  position:relative;
  display:block;
  justify-content:center;
  align-items:center;
  text-align:center;
  overflow:hidden;
  transition:0.5s;
  margin-top:20px;
   margin-left:20px;
 }

.skills .cont1 .clock:hover
{
  transform:translateY(-20px);
  box-shadow: 10px 20px 40px darkturquoise;
}


 .skills .cont1 .clock .box1 .percent
{
  position:relative;
  
  width:150px;
  height:150px;
  border-radius:50%;
  box-shadow: inset 0 0 50px #000;
}

.skills .cont1 .clock .box1 .percent .number
{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  border-radius:50%;
 color:#fff;
}
.percent .number h2
{ 
  color:#fff;
  font-weight:700;
  font-size:35px;
  transition:0.5s;
  
}

.clock:hover .percent .number h2
{
  color:darkturquoise;
  font-size:50px;
}

.skills .cont1 .clock .box1 .percent .number h2 span
{
  font-size:30px;
  color:#fff;
  transition:0.5s;
}

.skills .cont1 .clock:hover .percent .number h2 span
{
  color:darkturquoise;
}
.clock:hover .no
{
  color:darkturquoise;
  transform:scale(1.5);
}
.no
{
 position:relative;
 color:#fff;
 margin-top:20px;
 font-weight:700;
 font-size:18px;
 letter-spacing: 1px;
 text-transform:uppercase;
  transition:0.5s;
}
svg
{
   position:relative;
   width:150px;
   height:150px;
   }
svg circle{

   width:100%;
   height:100%;
   fill:none;
   stroke:#555;
   stroke-width:10;
   stroke-linecap:round;
   transform:translate(5px, 5px);
}

svg circle:nth-child(2)
{
  stroke-dasharray:440;
  stroke-dashoffset:440;
}

.clock:nth-child(1) svg circle:nth-child(2)
{
  stroke-dashoffset: calc(440 - (440 * 90) / 100);
  stroke:darkturquoise;
}


.clock:nth-child(2) svg circle:nth-child(2)
{
  stroke-dashoffset: calc(440 - (440 * 75) / 100);
  stroke:darkturquoise;
}

.clock:nth-child(3) svg circle:nth-child(2)
{
    stroke-dashoffset: calc(440 - (440 * 65) / 100);
   stroke:darkturquoise;
}

.clock:nth-child(4) svg circle:nth-child(2)
{
    stroke-dashoffset: calc(440 - (440 * 60) / 100);
   stroke:darkturquoise;
}

.clock:nth-child(5) svg circle:nth-child(2)
{
    stroke-dashoffset: calc(440 - (440 * 80) / 100);
   stroke:darkturquoise;
}

.clock:nth-child(6) svg circle:nth-child(2)
{
   stroke-dashoffset: calc(440 - (440 * 70) / 100);
  stroke:darkturquoise;
}

.clock:nth-child(7) svg circle:nth-child(2)
{
   stroke-dashoffset: calc(440 - (440 * 75) / 100);
  stroke:darkturquoise;
}

.clock:nth-child(8) svg circle:nth-child(2)
{
   stroke-dashoffset: calc(440 - (440 * 65) / 100);
stroke:darkturquoise;
}

.clock:nth-child(9) svg circle:nth-child(2)
{
  stroke-dashoffset: calc(440 - (440 * 75) / 100);
stroke:darkturquoise;
}



/* Works */


.works{
    font-family:'Scheherazade',sans-serif;
    background:black;
}

.works .title{
       position:relative;
       text-align:center;
       font-size:40px;
       margin-bottom:50px;
       font-weight:500;
       padding-bottom:20px;
       font-family:'Playfair Display',sans-serif;
       color:white;
}

.works .title::before{
   content:"";
   position:absolute;
   bottom:0px;
   left:50%;
   width:200px;
   height:3px;
   background:#fff;
   transform:translateX(-50%);
}

.works .title::after{
   content:"My Artworks";
   position:absolute;
   bottom:-12px;
   left:50%;
   font-size:20px;
   color:darkturquoise;
   padding:5px;
   background:#000;
   transform:translateX(-50%);
}

 .works .raj
{
  
   
   display:flex;
   justify-content:center;
   flex-direction:row-reverse;
   flex-wrap:wrap;
   margin:50px;
  
}

  .works .raj .taj
{

 height:450px;
 background:white;
 width:350px;
 margin:30px 90px;
 transform-style:preserve-3d;
 transform:perspective(1000px);
 
  transition:1s;
}
.raj .taj:hover
{
  transform:translateX(50%);
  box-shadow: 10px 20px 40px darkturquoise;
}
.works .raj .taj .pic
{
  position:relative;
  width:100%;
  height:100%;
  z-index:1;
  transform-origin:left;
  transform-style:preserve-3d;
  transition:1s;
}

.taj:hover .pic
{
  transform:rotateY(-180deg);
box-shadow: 10px 20px 40px darkturquoise;
}
.taj .pic img
{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transform-style:preserve-3d;
  
}
.taj .dets
{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  padding:20px;
  display:flex;
  justify-content:center;
  align-items:center;
}

.taj .dets .gun
{
  display:flex;
  justify-content:center;
   align-items:center;
   flex-direction:column;
}


.taj .dets .gun h2 span
{
  font-style:italic;
  font-size:18px;
  }
.soc
{
  display:flex;
  
    justify-content:center;
  align-items:center;

  
  background:black;
}
.social-icons
{
  position:relative;
  margin-top:45px;
  margin-left:-36px;
  display:flex;
   justify-content:center; 
  align-items:center;

}
.social-icons a
{
   display:flex;
   height:75px;
   width:75px;
   margin:0 10px;
  align-items:center;
   justify-content:center;
transition:0.5s;}

.social-icons a i
{
  font-size:25px;
  color:white;
  
}
.social-icons a:hover i
{
   transform:scale(1.2);
    color:darkturquoise;
}

.social-icons a:hover
{
  transform:translateY(-10px);
}

.ger
{
  display:flex;
  justify-content:center;
  align-items:center;
  color:white;
  background:black;
}
.ger span
{
  margin:0 15px;
  color:red;
  transition:0.5s;
}
.ger span:hover
{
  transform:scale(1.5);
  color:darkturquoise;
}

h3{
  font-family: "Kalam";
}

/* responsive media query */


@media (max-width:1330px){
  .home .max-width{
    margin-left:0px;
}
}
@media (max-width:1104px)
{
.about .about-content .left img{
  
   height:350px;
   width:350px;   
}
}

@media (max-width:991px) { 
    .max-width{
     padding:0 50px;     
}

}

@media (max-width:947px){
    .max-width{
     padding:0 50px;     
}

.menu-btn
{
  display:block;
  z-index:999;
}
.menu-btn i.active:before
{
   content:"\f00d";
}
    .navbar .menu 
{
    position:fixed;
    height:100vh;
    width:100%;
    left:-100%;
    top:0;
    background:#111;
    text-align:center;
    padding-top:80px;
    transition: all 0.3s ease;
  }
 
.navbar .menu.active{
  left:0;
}
    .navbar .menu li{
     display:block;
}
        .navbar .menu li a{
     display:inline-block;
     margin:20px 0;
      font-size:25px;
}
  .home .home-content .text-2{
  font-size:70px;

}

.home .home-content .text-3
{
  font-size:35px;
  
}
.social-icons a
{
   height:65px;
   width:65px;
}
.max-width
{
  max-width:800px;
  }

.about .about-content .column{
  width:100%;
}
.about .about-content .left{
  display:flex;
  justify-content: center;
  margin: 0 auto 60px;
}
.about .about-content .right
{
  flex:100%;
  }


}

@media (max-width:690px){
   .max-width{
     padding:0 23px;
}
 home .home-content .text-2{
  font-size:6 0px;

}

.home .home-content .text-3
{
  font-size:32px;
  
}
.exp .container .card{
    width:275px;
    height:310px;
    margin-bottom:20px;
  }
.exp .container .card .imgBx
{
  width:100%;
  height:100%;
}
.social-icons a
{
   height:45px;
   width:45px;
}

}

@media (max-width:500px){

   home .home-content .text-2{
  font-size:50px;

}

.home .home-content .text-3
{
  font-size:27px;
  
}
.social-icons a
{
   height:25px;
   width:25px;
}

}