@font-face {
     font-family: 'Archive';
    /* Choose a name for your font */
     src: url('font/Archive.ttf') format('woff2');
     font-weight: normal;
     font-style: normal;
}
 @font-face {
     font-family: 'CudexB';
    /* Choose a name for your font */
     src: url('font/Caudex-Bold.ttf') format('woff2');
     font-weight: normal;
     font-style: normal;
}
 @font-face {
     font-family: 'Mont';
    /* Choose a name for your font */
     src: url('font/Mont.ttf') format('woff2');
     font-weight: normal;
     font-style: normal;
}
 html {
     scroll-behavior: smooth;
     scroll-padding-top: 50px;
}
 body {
     margin: 0;
     padding: 0;
     padding-top: 20px;
     background-color: #1a1a1a;
     overflow-anchor: none;
     font-family: 'Mont';
}
 p {
     text-align: justify;
}
 .banner a {
     color: #A36F72;
     font-size: 20px;
     padding-right: 20px;
}
 .banner a:hover, .banner a:active {
     color: #DFDFDF;
}
 .navbar {
     margin-top: 10vh;
     background-color: #1a1a1a;
     transition: top 0.6s ease-in-out;
     position: sticky;
     top: 0;
     z-index: 100;
     font-family: 'Mont', tahoma;
}
 .nav-link {
     margin: 0 5px;
     color: #DFDFDF;
    /* Light gray for normal state */
}
 .nav-link:hover {
     color: #FEEBCA;
    /* White for hover state */
}
 .navbar-brand, .navbar-brand:hover {
     color: #FEEBCA;
    /* White for hover state */
     font-size: 24px;
     font-family: 'Archive', tahoma;
}
 .banner {
     height: 85vh;
     background-image: url('img/y2.png');
     background-size: contain;
     background-repeat: no-repeat;
     background-position: right;
}
 .smaller {
     font-size: 22px !important;
     color: #DFDFDF;
}
 .banner h1 {
     color: #FEEBCA;
     text-align: left;
     font-family: 'CudexB', tahoma;
     margin-top: 18%;
     font-size: 54px;
     padding-left: 1.1em;
}
 .banner-text{
     font-size: 22px;
     font-family: 'Mont', tahoma;
     color: #DFDFDF;
     position: absolute;
     text-align: left;
     padding-left: 2.8em;
     line-height: 36px;
     margin-top: -20px;
}
 .navbar-toggler-icon {
     background-image: none !important;
}
 .navbar-toggler span {
     display: inline-block;
     background: #FFF;
     height: 2px;
     width: 22px;
     position: relative;
     transition: all 0.35s ease;
}
 .navbar-toggler span:before, .navbar-toggler span:after {
     content: "";
     position: absolute;
     width: 100%;
     height: 2px;
     background: #FFF;
     transition: all 0.35s ease;
}
 .navbar-toggler span:before {
     top: -7px;
}
 .navbar-toggler span:after {
     bottom: -7px;
}
 .navbar-toggler-open {
     transform: rotate(90deg);
}
 .navbar-toggler-open:before {
     transform: rotate(45deg);
     top: 0;
}
 .navbar-toggler-open:after {
     transform: rotate(-45deg);
     bottom: 0;
}
 .h1 {
     padding-left: 10px;
}
 .navbar-toggler-icon {
     color: #FEEBCA;
}
	 .education div {
  text-align: left;
}

.education img {
  display: block;
  text-align: left;
}
 @media screen and (max-width: 992px) {
.small-text p {
	font-size: 14px !important;
}
.col-md-6 p {
	font-size: 14px !important;

}
	 
.top-mob {
	margin-bottom: 30px;
}
	 p {
		 margin: 10px;
		 text-align: left;
	 }
	 
     .nav-item:nth-child(5) {
         display: none;
    }
}
 .sticky {
     position: fixed;
     top: 0;
     width: 100%;
}
 .icon-row {
     display: flex;
     flex-direction: row;
}
 .navbar-toggler:focus {
     outline: none;
}
 button {
     --c: #A36F72;
    /* the color*/
     box-shadow: 0 0 0 .1em inset var(--c);
     --_g: linear-gradient(var(--c) 0 0) no-repeat;
     background: var(--_g) calc(var(--_p,0%) - 100%) 0%, var(--_g) calc(200% - var(--_p,0%)) 0%, var(--_g) calc(var(--_p,0%) - 100%) 100%, var(--_g) calc(200% - var(--_p,0%)) 100%;
     background-size: 50.5% calc(var(--_p,0%)/2 + .5%);
     outline-offset: .1em;
     transition: background-size .4s, background-position 0s .4s;
}
 button:hover {
     --_p: 100%;
     transition: background-position .4s, background-size 0s;
     color: #1A1A1A;
}
 button:active {
     box-shadow: 0 0 9e9q inset #0009;
     background-color: var(--c);
     color: #1A1A1A;
}
 .new {
     color: #7DA3B7;
}
 button {
     font-family: 'Mont', arial;
     font-size: 1.5rem;
    /* Adjust font size as desired */
     cursor: pointer;
     padding: 0.2em 0.4em;
    /* Adjust padding as desired */
     font-weight: bold;
     border: none;
     color: #A36F72;
}
 button.no-style {
     background: none;
     box-shadow: none;
     outline: none;
}
/* Apply different styles for mobile screens */
 @media screen and (max-width: 992px) {
     .touch {
         font-size: 12px !important;
    }
     .touch i {
         font-size: 14px !important;
    }
     .services a {
         font-size: 16px !important;
    }
     .education {
         font-size: 12px;
    }
     .color1 {
         font-size: 14px !important;
    }
     .banner-text {
         font-size: 24px;
    }
     button {
         font-size: 1.4rem;
    }
     .banner {
         background-image: none;
         margin-top: 0;
    }
     .banner::before {
         content: "";
         position: absolute;
         top: 0px;
         right: 0px;
         bottom: 0px;
         left: 0px;
        /* Specify the background image to be used */
         background-image: url('img/y.png');
         background-size: cover;
         opacity: 0.1;
    }
     body {
         padding-top: 0;
    }
     .navbar {
         padding-top:0;
    }
     .mt-4 {
         margin-top: 0px !important;
    }
     .banner-text {
         text-align: center;
    }
}
 .round {
     position: relative;
     border: 3px solid #fff;
     width: 100px;
     height: 100px;
     border-radius: 100%;
     bottom: -15vh;
     left: 50%;
}
 .round span {
     z-index: 999;
     height: 3px;
     margin:1px;
     width: 30px;
     background: #fff;
     transition: 0.4s ease;
}
 .round span:first-child {
     display: block;
     position: absolute;
     transform: rotate(45deg);
     left: 25%;
     bottom: 35%;
}
 .round span:nth-child(2) {
     display: block;
     position: absolute;
     transform: rotate(-45deg);
     left: 45%;
     bottom: 35%;
}
 .round span:nth-child(3) {
     display: block;
     position: absolute;
     transform: rotate(45deg);
     left: 25%;
     bottom: 54%;
}
 .round span:nth-child(4) {
     display: block;
     position: absolute;
     transform: rotate(-45deg);
     left: 45%;
     bottom: 54%;
}
 .round:hover span:nth-child(1) {
     transform: rotate(-135deg);
}
 .round:hover span:nth-child(2) {
     transform: rotate(135deg);
}
 .round:hover span:nth-child(3) {
     transform: rotate(225deg);
}
 .round:hover span:nth-child(4) {
     transform: rotate(-225deg);
}
/* About Me */
 .about-section {
     padding: 50px 0;
     background-color: #222;
     color: #DFDFDF;
}
 .show-section {
     padding: 50px 0;
     background-color: #fff;
     color: #1a1a1a;
}
 .expert-text {
     margin-bottom: 30px;
}
/* Services */
 .fa {
     font-size: 24px;
     margin-bottom: 10px;
}
 .row.services {
     display: flex;
     justify-content: space-between;
     width: 100%;
}
 .services a {
     flex: 1;
     text-decoration: none;
     color: inherit;
     font-family: 'Mont';
     font-size: 22px;
}
 .service-box {
     padding: 20px;
     text-align: center;
     margin: 10px;
}
 .color1 {
     background: linear-gradient(#5D737E 0 0) no-repeat calc(200% - var(--p, 0%)) 100% / 200% var(--p, 0.58em);
     transition: 0.3s var(--t, 0s), background-position 0.3s calc(0.3s - var(--t, 0s));
     border: 1px solid #5D737E;
}
 .color1:hover {
     --p: 100%;
     --t: 0.3s;
     color: #fff;
}
 .color2 {
     border: 1px solid #A36F72;
     background: linear-gradient(#A36F72 0 0) no-repeat calc(200% - var(--p, 0%)) 100% / 200% var(--p, 0.58em);
     transition: 0.3s var(--t, 0s), background-position 0.3s calc(0.3s - var(--t, 0s));
}
 .color2:hover {
     --p: 100%;
     --t: 0.3s;
     color: #fff;
}
 .color3 {
     border: 1px solid #FEEBCA;
     background: linear-gradient(#FEEBCA 0 0) no-repeat calc(200% - var(--p, 0%)) 100% / 200% var(--p, 0.58em);
     transition: 0.3s var(--t, 0s), background-position 0.3s calc(0.3s - var(--t, 0s));
}
 .color3:hover {
     --p: 100%;
     --t: 0.3s;
     color: #222;
}
 .title {
     font-size: 60px;
     left: 0;
     top: 0;
     margin-bottom: 5vh;
     padding: 10px;
     position: relative;
     opacity: 0.2;
     color: #DFDFDF;
     font-family: 'Archive';
}
 .profile {
     width: 94%;
     padding: 10px;
     line-height: 40px;
     color: #DFDFDF;
     background-color: #2a2a2a;
}
 .education {
     width: 94%;
     display: grid;
     grid-template-columns: 50% 50%;
     grid-template-rows: 50% 50%;
     font-size: 14px;
}
 .education a {
     color: #A36F72;
}
 .education a:hover {
     color: #FEEBCA;
}
 .education img {
     width: 70px;
     padding-right: 10px;
}
 .education div {
     padding-bottom: 0px;
}
/* About Me */
 .web-section {
     padding: 50px 0;
     color: #DFDFDF;
     background: linear-gradient(to bottom, #1a1a1a, #343E44);
     background-attachment: fixed;
}
 .ux-section {
     padding: 50px 0;
     color: #DFDFDF;
     background: linear-gradient(to bottom, #1a1a1a, #362526);
     background-attachment: fixed;
}
 .contact-section {
     padding: 50px 0;
     color: #DFDFDF;
}
 .skills, .skills .skill, .skills .skill .skill-title, .skills .skill .skill-bar {
     width: 100%;
     float: left;
}
 .skills {
     padding:15px;
}
 .skills .skill {
     margin-bottom: 30px;
}
 .skills .skill .skill-title {
     color: #DFDFDF;
     margin-bottom: 10px;
     font-weight: 400;
     font-size: 14px;
}
 .skills .skill .skill-bar {
     width: 0;
     height: 6px;
     background: #f0f0f0;
     transition: 1s cubic-bezier(1, 0, .5, 1);
     -webkit-transition: 1s cubic-bezier(1, 0, .5, 1);
     -ms-transition: 1s cubic-bezier(1, 0, .5, 1);
}
 .skills.active .skill .skill-bar {
     width: 100%;
}
 .skills .skill .skill-bar span {
     float: left;
     width: 0%;
     background: #5D737E;
     height: 6px;
     position: relative;
     transition: 1s cubic-bezier(1, 0, .5, 1);
     -webkit-transition: 1s cubic-bezier(1, 0, .5, 1);
     -ms-transition: 1s cubic-bezier(1, 0, .5, 1);
}
 .new span {
     background: #A36F72 !important;
}
 .skills .skill .skill-bar span b {
     float: left;
     width: 100%;
     position: relative;
     text-align: right;
     opacity: 0;
     font-size: 14px;
     color: #fff;
     font-weight: 400;
     top: -13px;
}
 .gallery-image {
     padding: 20px;
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
}
 .gallery-image img {
     transform: scale(1.0);
     transition: transform 0.4s ease;
}
 .img-box {
     box-sizing: content-box;
     margin: 10px;
     height: 300px;
     width: calc(33.33% - 20px);
     overflow: hidden;
     display: inline-block;
     color: white;
     position: relative;
     background-color: white;
     text-align: center;
    /* Center align content within img-box */
}
 .img-box img {
     width: 80%;
     height: 100%;
     object-fit: cover;
     display: block;
    /* Remove default inline-block spacing */
     margin: 0 auto;
    /* Center the image horizontally */
     filter: grayscale(100%);
    /* Apply grayscale effect */
     transition: filter 0.3s;
    /* Smooth transition */
}
 .caption {
     position: absolute;
     bottom: 5px;
     left: 20px;
     opacity: 0.0;
     transition: transform 0.3s ease, opacity 0.3s ease;
}
 .transparent-box {
     height: 300px;
     width: 350px;
     background-color:rgba(0, 0, 0, 0);
     position: absolute;
     top: 0;
     left: 0;
     transition: background-color 0.3s ease;
	 color: #fff !important;
}
 .img-box:hover img {
     transform: scale(1.1);
     filter: grayscale(0%);
}
 .img-box:hover .transparent-box {
     background-color:rgba(0, 0, 0, 0.5);
}
 .img-box:hover .caption {
     transform: translateY(-20px);
     opacity: 1.0;
}
 .img-box:hover {
     cursor: pointer;
}
 .caption > p:nth-child(2) {
     font-size: 0.8em;
}
 .opacity-low {
     opacity: 0.5;
}
/* Responsive styles */
 @media (max-width: 1200px) {
     .img-box {
         width: calc(33.333% - 20px);
        /* 3 in a row */
    }
}
 @media (max-width: 900px) {
     .img-box {
         width: calc(50% - 20px);
        
    }
	 .contact-section .color3 {
    font-size: 22px !important;
	}
	.img-box img {
    width: 100% !important;
	height: auto;
	}
	.img-box {
	height: 280px !important;
	}
	.transparent-box {
    height: 280px;
    width: 100%;
	}
	.round {
    margin-top: 20px;
}
}
 @media (max-width: 600px) {
     .img-box {
         width: calc(100% - 20px);
        /* 1 in a row */
    }
}
 .touch {
     font-size: 16px;
}
 .touch i {
     font-size: 24px;
}
 .copyright {
     text-align:center;
     padding-top: 60px;
     color: #FEEBCA;
}
 .yellow {
     color: #FEEBCA;
}
 .section-wrapper {
     padding: 60px 0;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
}
 .section-image img {
     max-width: 100%;
     height: auto;
}
 .alternate .section-content {
     order: 2;
}
 .alternate .section-image {
     order: 1;
}
 .section-content p {
     font-size: 18px;
     padding-top: 20px;
}
 .section-content h1 {
     padding-bottom: 40px;
}
 .red {
     color: #A36F72;
}
a:hover {
	text-decoration: none;
}
.next {
    color: #1a1a1a;
    font-size: 1.3rem;
    text-decoration: none;
    margin-top: 1em;
    display: inline-block;
    padding: .5em;
    margin-left: -.5em;
    position: relative;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);

    &:before, &:after {
        position: absolute;
        content: '';
        border-bottom: 1px solid #A36F72;
        border-radius: 1em;
        bottom: .3em;
        transition: transform .5s cubic-bezier(0.075, 0.82, 0.165, 1);
    }

    &:before {
        width: 1em;
        transform-origin: left;
    }

    &:after {
        width: 82%;
        left: 1em;
        transform: translateX(110%);
    }

    &:hover:before {
        transform: scaleX(0.3);
    }

    &:hover:after {
        transform: translateX(0);
    }

}
a:hover {
	color: #A36F72;
}

.small-text p {
	font-size: 16px !important;
}
#funFactBtn {
	color: #FEEBCA;
	cursor: pointer;
}
.col-md-6 {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.next {
  position: absolute;
  bottom: -10vh;
}