@font-face {
  font-family: Raleway-SemiBold;
  src: url(font/Raleway-SemiBold.ttf);
}
@font-face {
  font-family: Raleway-Regular;
  src: url(font/Raleway-Regular.ttf);
}
@font-face {
  font-family: Raleway-Medium;
  src: url(font/Raleway-Medium.ttf);
}
@font-face {
  font-family: Raleway-Bold;
  src: url(font/Raleway-Bold.ttf);
}

@font-face {
  font-family: Raleway-Black;
src: url(font/Raleway-Black.ttf);
}

 /* google icon */
@font-face {
 font-family: 'Material Symbols Rounded';
 font-style: normal;
 font-weight: 100 700;
 src: url(https://fonts.gstatic.com/s/materialsymbolsrounded/v138/sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190Fjzag.woff2) format('woff2');
}


.row{
   width:100%;
}
img{
   width: 100%;
}

.material-symbols-rounded {
 font-family: 'Material Symbols Rounded';
 font-weight: normal;
 font-style: normal;
 font-size: 30px;
 line-height: 1;
 letter-spacing: normal;
 text-transform: none;
 display: inline-block;
 white-space: nowrap;
 word-wrap: normal;
 direction: ltr;
 -webkit-font-feature-settings: 'liga';
 -webkit-font-smoothing: antialiased;
}

body {
   margin: 0;
   padding: 0;
   font-family: Arial, sans-serif;
   overflow: hidden;
   /* border-left: 10px solid #243748; */
   transition: border-left-width 0.3s linear;
  }
.border-lft{
  width: 10px;
  background: rebeccapurple;
  height: 100vh;
  left: 0;
  position: fixed;
  transition: width 0.3s linear;
}


*{
   font-family:  Raleway-SemiBold;
}
p{
   font-family: Raleway-Regular;
   font-size: 22px;
}

h1,h2,h3,h4{
   font-family: Raleway-Black;
   
}
h1{
  font-family: Raleway-Black;
  font-size: 5rem;
  font-weight: bolder;
}
.slider-container {
   height: 100vh;
   overflow: hidden;
}
.slide {
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   transition: transform 0.5s ease-in-out;
}


.slide img {
  width: 90%;
  height: auto;
   max-width: 90%;
   max-height: 100%;
   object-fit: cover;
   transition: 0.5s;
   transform: perspective(850px) rotateY(-35deg);
}
.slide img:hover {
-webkit-transform: scale(1.02);

}


.header {
 /* position: sticky; */
 position: absolute;
 top: 0;
 width: 100%;
 /*box-shadow: 0 4px 20px hsla(207, 24%, 35%, 0.1);*/
 background-color: #ffffff00;
 z-index: 2;
}
.verticle_center {
 
   margin-top: auto;
   margin-bottom: auto;

}

a {
   color: #243748;
   text-decoration: none !important;
}

.view_work{
   color: #243748;
   background: rgb(223, 225, 228);
   border-radius: 5px;
   padding-top: 10px;
   padding-right: 15px;
   padding-left: 15px;
   padding-bottom: 7px;
   width: 40%;
    transition: width 1s;
    opacity: 0.8;
}

.view_work:hover {
      width: 42%;
      opacity: 1;
      cursor: pointer;
}
.view_work a {
   color: #243748 !important;
   text-decoration: none !important;     
    display: flex;
   justify-content: space-between;
   opacity: 1 !important;
}
 
.left{
   float: left;
   font-size: 18px;
   font-family: Raleway-Bold;
}
.right{
   float: right;
   font-family: Raleway-Bold;
}


/*workslidehoverimage*/
/*.screen {
   display: block;
   width: 300px;
   height: 350px;
   overflow: hidden;
   position: relative;
   border: 2px solid #b3b3b3;
   border-radius: 1px;
   margin: 0 auto;
}*/
.screen {
   display: block;
   width: 611px;
   height: 366px;
   overflow: hidden;
   position: relative;
   border: 2px solid #b3b3b3;
   margin: 0 auto;
   margin-top: -520px;
   margin-left: 90px;
   border-radius: 5px;
}
.screen img {
   bottom: -1210px;
   width: 100%;
   height: auto;
   position: absolute;
   z-index: 0;
 margin:0;
 padding:0;
   -webkit-transition: top 11s;
   -moz-transition: top 11s;
   -ms-transition: top 11s;
   -o-transition: top 11s;
   transition: bottom 11s;
}
.screen:hover img {
 bottom: 0;
 -webkit-transition: all 11s;
 -moz-transition: all 11s;
 -ms-transition: all 11s;
 -o-transition: all 11s;
 transition: all 11s;
}

nav {
 display: flex;
 justify-content: space-between;
 align-items: center;
padding: 20px 10%;
}

.logo a {
 font-size: 18px;
 font-family: Raleway-Black;
 font-weight: bold;
 color: #243748;
 text-decoration: none;
 margin-right: 5px;

}

.text{
   position: relative;
   color: darkred;
}
.second-text::before{
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   border-left: 2px solid black;
   animation: animate 4s steps(12) infinite;
   /*background: red;*/
}
@keyframes animate{
   40%, 60% {
       left: 100%;
   }
   100% {
       left: 0%;
   }
}


ul {
 list-style-type: none;
}
.menu li {
   margin-left: 10px;
   margin-right: 10px;
}

.menu {
 display: flex;
 justify-content: center;
 align-items: center;
}

.menu a {
 display: block;
 padding: 10px 20px;
 font-size: 18px;
 font-weight: 500;
 transition: 0.2s all ease-in-out;
 color: #bc4848;
 text-decoration: none;
 font-weight: bold;
     font-family: 'Raleway-Bold';

}

.menu a:hover {
color: #bc4848;
   background: #ffcaca;
   border-radius: 5px;
   font-weight: bold;
}

.menu-icon {
 display: none;
}

#menu-toggle {
 display: none;
}


#menu-toggle:checked ~ .menu {
 transform: scale(1, 1);
}

@media only screen and (max-width: 950px) {
 .menu {
   padding: 15px;
   flex-direction: column;
   background-color: #ffcaca;
   align-items: center;
   position: absolute;
   top: 70px;
   left: 0;
   width: 100%;
   z-index: 1;
   transform: scale(1, 0);
   transform-origin: top;
   transition: transform 0.3s ease-in-out;
   /*box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;*/
   margin-top: 5px;
   margin-bottom: 5px;
 }

 .menu a {
   color: #bc4848;
   background: #ffe1e1;
   border-radius: 5px;
   font-weight: bold;
   
 }

 .menu li {
   margin-bottom: 10px;
   width: 100%;
 }

 .menu-icon {
   display: block;
   color: #bc4848;
   font-size: 28px;
   cursor: pointer;
 }
}



/*overlay*/
@media (max-width: 809px){
.framer-15whqm6 {
   background-color: #111111bf;
   z-index: 1;
}
}
.framer-15whqm6 {
   inset: 0;
   position: fixed;
   user-select: none;
}

/*about section*/

.about_txt_container::-webkit-scrollbar {
   /*background-color: #fff;*/
   width: 6px;
   border-radius: 16px;
   margin-right: 5px;
}

/* background of the scrollbar except button or resizer */
.about_txt_container::-webkit-scrollbar-track {
   /*background-color: #fff;*/
   border-radius: 16px;
}

/* scrollbar itself */
.about_txt_container::-webkit-scrollbar-thumb {
   background: #babac0;
   border-radius: 16px;
   border: 0px solid;
}

/* set button(top and bottom of the scrollbar) */
.about_txt_container::-webkit-scrollbar-button {
   display:none;
}
.about_txt_container{
   padding: 5% 10%;
   overflow: auto;
   height: 85vh;

}
.about_txt_container p{
       font-size: 18px;
       text-indent: 50px;
   text-align: justify;
}

.about_txt_head{
       font-size: 18px;
font-family: 'Raleway-Bold';
margin-left: 5px;
}


.about_btn{
   width: 75%;
   text-decoration: none !important;
   display: flex;
   justify-content: space-between;
}
.about_btn_action{
   color: #243748;
   background: rgb(223, 225, 228);
   border-radius: 5px;
   padding-top: 10px;
   padding-right: 15px;
   padding-left: 15px;
   padding-bottom: 7px;
   width: 28%;
    transition: width 1s;
    opacity: 0.8;
}

.about_btn_action:hover {
      width: 33%;
      opacity: 1;
      cursor: pointer;
}
.about_btn_action a {
   color: #243748 !important;
   text-decoration: none !important;     
    display: flex;
   justify-content: space-between;
   opacity: 1 !important;
}



.full-menu{
 position: fixed;
 width: 100%;
 height: 100vh;
 top: 0;
 z-index: 100;
 visibility: hidden;
}

.full-menu .outter{
 height: 100vh;
}

.full-menu .site-menu li a{
 color: #000;
 transition: all ease 0.3s;
 -webkit-transition: all ease 0.3s;
 -moz-transition: all ease 0.3s;
 -ms-transition: all ease 0.3s;
 -o-transition: all ease 0.3s;
 padding: 0 10%;
} 

.darkness .full-menu .site-menu li a{
 color:#000;
}

.full-menu .site-menu li:hover a{
 letter-spacing: 4px;
 opacity: .5;
} 

.inner{
 height: 100%;
 width: 100%;
 display: table-cell;
 vertical-align: middle;

}

.outter{
 height: 100%;
 width: 100%;
 display: table;
}
.full-menu .left-content{
/*  background: #EFEFEF;*/
 transform: translateX(-100%);
 -webkit-transform: translateX(-100%);
 -moz-transform: translateX(-100%);
 -ms-transform: translateX(-100%);
 -o-transform: translateX(-100%);
}

.darkness .full-menu .left-content{
 background: #1b1b1b;
}

.darkness .full-menu .right-content{
 background: #000;
}

.full-menu .right-content{
 
 padding: 60px 60px;
 transform: translateX(100%);
 -webkit-transform: translateX(100%);
 -moz-transform: translateX(100%);
 -ms-transform: translateX(100%);
 -o-transform: translateX(100%);
}

.full-menu .right-content, .full-menu .left-content{
 transition: all ease 0.5s;
 -webkit-transition: all ease 0.5s;
 -moz-transition: all ease 0.5s;
 -ms-transition: all ease 0.5s;
 -o-transition: all ease 0.5s;
}

.full-menu.active .left-content, .full-menu.active .right-content{
 visibility: visible;
 transform: translateX(0);
 -webkit-transform: translateX(0);
 -moz-transform: translateX(0);
 -ms-transform: translateX(0);
 -o-transform: translateX(0);
}

.full-menu .right-content ul li{
 font-size: 15px;
 font-weight: 600;
 line-height: 27px;
}

.full-menu .right-content ul{
 margin-bottom: 30px;
}

.full-menu .right-content ul li:first-child{
 color:#969696;
 font-weight: 400;
}

.darkness .full-menu .right-content ul li:first-child{
 opacity: .7;
}

.full-menu .right-content ul.social-links li:first-child{
 width: 100%;
}

.full-menu .right-content ul.social-links li{
 float: left;
 margin-right: 30px;
}

.full-menu .right-content ul li a{
 color: #000;
}

.darkness .full-menu .right-content ul li a {
 color: #000;
}

.darkness .full-menu .right-content ul li {
 color: #000;
}

.full-menu .right-content ul li a:hover{
 opacity: .5;
 transition: opacity ease 0.3s;
 -webkit-transition: opacity ease 0.3s;
 -moz-transition: opacity ease 0.3s;
 -ms-transition: opacity ease 0.3s;
 -o-transition: opacity ease 0.3s;
}

.full-menu .logo{
 position: absolute;
 top:30px;
 left: 45px;
}

.full-menu .close-icon{
 position: absolute;
 top: 40px;
 right: 64px;
 cursor: pointer;
}

.full-menu .close-icon img{
 max-width: 16px;
}

.dots {
  position: absolute;
  top: 50%;
  right: 10px; /* Adjust position according to your design */
  transform: translateY(-50%);
}

.dot {
  width: 10px;
  height: 10px;
  background-color: #888;
  border-radius: 50%;
  margin: 5px 0;
}

/* Active dot style */
.dot.active {
  background-color: #333;
}

 

#animated-border {
   display: none; /* Initially hide the border */
   position: fixed;
   top: 0;
   left: 0;
   z-index: 999;
   height: 100%;
   width: 0;
   background-color: rgba(128, 98, 98, 0); /* Adjust color as needed */
 }
 
 @keyframes animateBorder {
   100% {
     width: 100%;
   }
 }

 .nxtimg{
   width: 40%;
 }


 .proj1{
   background: rgb(50, 119, 0);
 }


 /* char rotation anination */

 .name {
   font-size: 18px;
 font-family: Raleway-Black;
 font-weight: bold;
 
   text-transform: uppercase;
   position: relative;
   display: inline-block;
 z-index: 1;
   letter-spacing: 2px;
}


 .logo:hover .first-a {
   animation: firstAAnimation 1.5s forwards;
   
 }
 

 .logo:hover .last-a {
   animation: lastAAnimation 1.5s forwards;
 }

 @keyframes firstAAnimation {
   0% {
     transform: translateY(0) translateX(0) rotate(0deg);
      
   }
   25% {
     transform: translateY(25px) translateX(0px) rotate(0deg); 
     color: #000000a6;
   }
   50% {
     transform: translateY(25px) translateX(0) rotate(0deg);
     color: #000000a6;

   }
   75% {
     transform: translateY(25px) translateX(154px) rotate(360deg);
     color: #000000a6;

   }
   100% {
     transform: translateY(0px) translateX(154px) rotate(360deg);

   }
 }

 @keyframes lastAAnimation {
   0% {
     transform: translateY(0) translateX(0)  rotate(0deg);
   }
   25% {
     transform: translateY(-25px) translateX(00px)  rotate(0deg);
     color: #000000a6;
   }
   50% {
     transform: translateY(-25px) translateX(00px)  rotate(0deg);
     color: #000000a6;
   }
   75% {
     transform: translateY(-25px) translateX(-154px)  rotate(-360deg);
     color: #000000a6;
   }
   100% {
     transform: translateY(0) translateX(-154px) rotate(-360deg);
   }
 }

 .rotate-char {
   display: inline-block;
   transition: transform 0.5s;
 
 }

 .first-a {
   left: -20px;
 }

 .last-a {
   right:-20px;
 }