body { font-family: "Sora", sans-serif; color: #111111; background: #fff; }
p { font-family: "Inter", sans-serif; color: #363636; font-size: 16px; font-weight: 400; line-height: 28px; letter-spacing: 0.5px; text-decoration: none; }
/* Nav */
.navbar-toggler { border: none; }
.navbar-toggler:focus { box-shadow: none; }
.navbar img { width: 72px; }
.navbar { background-color: rgba(250, 251, 255, 0.8) !important; padding-top: 0; padding-bottom: 0; box-shadow: -2px 26px 33px 0px rgba(0, 0, 0, 0.05); transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s; }
.navbar a { font-size: 19px !important; font-family: "Sora", sans-serif; color: #111111 !important; font-weight: 500 !important; letter-spacing: 1px; margin: 0 14px; }
.navbar a:hover, .navbar a:focus { color: #000; transition: 0.2s; }
.header-contact-icons a { margin: 0 2px; }
.header-contact-icons i { border-radius: 50%; width: 40px; height: 40px; color: #000; font-size: 18px; text-align: center; line-height: 38px; background-color: #f3f4f6; }
.header-contact-icons i:hover, .header-contact-icons i:focus { background-color: #000000; color: #fff; transition: 0.4s; }
/* Underline From Left */
.hvr-underline-from-left { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; overflow: hidden; }
.hvr-underline-from-left:before { content: ""; position: absolute; z-index: -1; left: 0; right: 100%; bottom: 0; background: #000; height: 2px; -webkit-transition-property: right; transition-property: right; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; }
.hvr-underline-from-left:hover:before, .hvr-underline-from-left:focus:before, .hvr-underline-from-left:active:before { right: 0; }
/* Home */
.home { padding-top: 120px; padding-bottom: 0px; }
.home-image img { width: 92%; }
.about { padding-top: 120px; padding-bottom: 120px; }
.home-content { margin: auto; }
.home h1 { font-size: 68px; font-weight: 600; color: #333; margin-bottom: 0; }
.home h2 { font-size: 24px; margin-bottom: 24px; }
.home p { color: #212121; font-family: "Inter", sans-serif; font-size: 16px; line-height: 1.7; letter-spacing: 0; word-wrap: break-word; font-weight: 400; padding-right: 100px; }
.home-buttons, .cv-button { margin-top: 40px; }
.home-buttons a, .cv-button a { color: #fff; font-family: "Inter", sans-serif; font-size: 16px; line-height: 1.7; letter-spacing: 0; word-wrap: break-word; font-weight: 400; text-decoration: none; padding: 12px 22px; background-color: #000; border-radius: 20px; border: 1px solid #000; }
.home-buttons a:hover, .home-buttons a:focus, .cv-button a:hover, .cv-button a:focus { background-color: #232323; transition: 0.4s; }
figure { width: 100%; height: 100%; margin: 0; padding: 0; background: #fff; overflow: hidden; }
figure:hover+span { bottom: -36px; opacity: 1; }
/* Zoom In #1 */
.hover01 figure img { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: .4s ease-in-out; transition: .4s ease-in-out; }
.hover01 figure:hover img { -webkit-transform: scale(1.1); transform: scale(1.1); }
/* Shine */
.hover14 figure { position: relative; }
.hover14 figure::before { position: absolute; top: 0; left: -75%; z-index: 2; display: block; content: ''; width: 50%; height: 100%; background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%); background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%); -webkit-transform: skewX(-25deg); transform: skewX(-25deg); }
.hover14 figure:hover::before { -webkit-animation: shine .75s; animation: shine .75s; }
@-webkit-keyframes shine { 100% {
 left: 125%;
}
}
@keyframes shine { 100% {
 left: 125%;
}
}
/* Animation */
.home-image, .about-image { animation: move 0.7s infinite ease-in-out alternate; }
@keyframes move { from {
transform: translateY(0px);
}
to { transform: translateY(-6px); }
}
/* About */
.about h1 { margin-bottom: 20px; }
.cv-button i { margin-right: 6px; }
.about img { width: 85%; border-radius: 25px; }
/* Skills */
.skills, .contact { background-color: #f3f4f6; padding-top: 120px; padding-bottom: 120px; }
.skills h1, .portfolio h1, .contact h1 { color: #e4e4e4; font-size: 113px; font-weight: 600; line-height: 54px; text-align: center; }
.skills h2, .portfolio h2, .contact h2 { color: #000000; font-size: 37px; font-weight: 600; line-height: 20px; margin-bottom: 20px; text-align: center; }
.skills p, .portfolio p, .contact p { text-align: center; margin-bottom: 24px; }
.skills h3 { font-size: 20px; font-weight: 500; }
.skills i { font-size: 24px; background-color: #f3f4f6; border-radius: 10px; margin-bottom: 16px; width: 55px; height: 50px; display: flex; justify-content: center; align-items: center; }
.skills-boxes, .skills-boxes p { text-align: left; margin-bottom: 0; }
.skills-boxes .col-lg-3 { background-color: #fff; padding: 24px; border-radius: 25px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 2px 14px 0 rgba(0, 0, 0, 0.02); width: 22%; margin: 12px; }
.skills-boxes .col-lg-3:hover { box-shadow: 0 15px 15px rgba(0, 0, 0, 0.3); transition: 0.1s; }
/* Portfolio */
.portfolio { padding-top: 120px; padding-bottom: 120px; }
.portfolio img { border-radius: 20px; }
.nav-pills .nav-link.active { background-color: #000; }
.nav-pills .nav-link { color: #000000; }
.portfolio .col-lg-4, .portfolio .col { padding-top: 12px; padding-bottom: 12px; }
figure { width: 100%; height: 100%; margin: 0; padding: 0; background: #fff; overflow: hidden; border-radius: 25px; }
figure:hover+span { opacity: 1; }
/* Zoom In #1 */
.hover01 figure img { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: .5s ease-in-out; transition: .5s ease-in-out; }
.hover01 figure:hover img { -webkit-transform: scale(1.1); transform: scale(1.1); }
/* Lightbox */
@keyframes zoomin {  0% {
 transform: scale(1);
}
 50% {
 transform: scale(1.05);
}
 100% {
 transform: scale(1);
}
}
.gallery-item { display: block; }
.gallery-item img { box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.15); transition: box-shadow 0.2s; }
.gallery-item:hover img { box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.35); }
.lightbox-modal .modal-content { background-color: var(--lightbox); }
.lightbox-modal .btn-close { position: absolute; top: 1.25rem; right: 1.25rem; font-size: 1.25rem; z-index: 10; filter: invert(1) grayscale(100); }
.lightbox-modal .modal-body { display: flex; align-items: center; padding: 0; }
.lightbox-modal .lightbox-content { width: 100%; }
.lightbox-modal .carousel-inner { width: 34%; border-radius: 25px; }
.lightbox-modal .carousel-inner img { animation: zoomin 10s linear infinite; border-radius: 25px; }
.lightbox-modal .carousel-control-prev, .lightbox-modal .carousel-control-next { width: auto; }
.lightbox-modal .carousel-control-prev { left: 1.25rem; }
.lightbox-modal .carousel-control-next { right: 1.25rem; }
 @media (min-width: 1400px) {
.lightbox-modal .carousel-inner { max-width: 60%; }
}
[data-bs-theme=dark] .lightbox-modal {  --bs-carousel-control-icon-filter: none;
}
.btn-fullscreen-enlarge, .btn-fullscreen-exit { position: absolute; top: 1.25rem; right: 3.5rem; z-index: 10; border: 0; background: transparent; opacity: .6; font-size: 1.25rem; }
.bi { display: inline-block; width: 1em; height: 1em; vertical-align: -0.035em; fill: currentcolor; }
/* Contact */
.contact-content p { text-align: left; margin-bottom: 5px; }
.contact-content a { color: #212121; text-decoration: none; }
.contact-content a:hover, .contact-content a:focus { color: #000; transition: 0.4s; }
.contact-content .row { padding-top: 12px; padding-bottom: 12px; }
.contact-icons { background-color: #fff; border-radius: 15px; display: flex; align-items: center; justify-content: center; }
.contact-icons i { font-size: 24px; }
/* Form */
.contact-form { padding: 30px; padding-bottom: 0px; }
 input[type=text], [type=email] {
 width: 100%;
 padding: 12px 20px;
 color: #333;
 font-size: 16px;
 border: none;
 border: 1px solid #E2E6E7;
 border-radius: 15px;
 background: #fff;
}
textarea { width: 100%; padding: 20px 20px; color: #333; font-size: 17px; resize: none; height: 184px; border: none; border: 1px solid #E2E6E7; padding-bottom: 16px; border-radius: 15px; background: #fff; }
input[type=submit] { padding: 10px 30px; background: none; color: #fff; font-size: 16px; border: none; }
.contact-form .col-lg-12, .contact-form .col-lg-6 { margin-top: 0; padding-bottom: 17px; }
.contact-form #button { background-color: #000; padding: 10px 24px; color: #fff; border: 1px solid #6f2a26; border-radius: 25px; }
.contact-form #button:hover, .contact-form #button:focus { color: #000; border: 1px solid #000000; background: transparent; transition: 0.4s; }
/* Copyright */
.copyright p { text-align: center; padding-top: 25px; padding-bottom: 10px; }
/* Back to top */
.back-to-top { background-color: #000; border: 1px solid #000; bottom: 35px; right: 8px; color: #fff; width: 45px; height: 45px; border-radius: 50%; }
.back-to-top:hover, .back-to-top:focus { background-color: transparent; border: 1px solid #000; color: #000; transition: 0.4s; box-shadow: none; }

/* Responsive */
@media (min-width: 0px) and (max-width: 575.98px) {
.navbar img { width: 60px; }
.navbar .container { padding-left: 24px; padding-right: 24px; }
.navbar-nav a { font-size: 15px !important; border-bottom: 1px solid #e6e6e6 !important; margin: 0 12px; }
.header-contact-icons { padding-top: 10px; padding-bottom: 10px; padding-left: 12px; }
.home h1 { font-size: 50px; }
.home h2 { font-size: 18px; margin-bottom: 16px; }
.home-image img { order: 1; width: 100%; margin: auto; display: block; }
.home-content { order: 2; padding-top: 40px; }
.home { padding-top: 50px; }
.home-buttons a, .cv-button a { display: block; padding: 10px 20px; text-align: center; border-radius: 20px; }
.home p { padding-right: 0; }
.about-image img { width: 100%; margin-bottom: 30px; }
.about, .skills, .contact, .portfolio { padding-top: 60px; padding-bottom: 60px; }
.contact { padding-bottom: 20px; padding-left: 24px; padding-right: 24px; }
.about h1 { margin-bottom: 10px; }
.skills { padding-left: 24px; padding-right: 24px; }
.skills h1, .portfolio h1, .contact h1 { font-size: 70px; line-height: 32px; }
.skills h2, .portfolio h2, .contact h2 { font-size: 28px; }
.skills-boxes .col-lg-3 { width: 100%; margin: 10px 0; }
.lightbox-modal .carousel-inner { width: 90%; border-radius: 25px; }
.contact-form { padding: 0px; margin-top: 20px; }
.contact-form .col-lg-12, .contact-form .col-lg-6 { padding-left: 0; padding-right: 0; }
.contact-form #button { border-radius: 20px; }
.contact-form #button { width: 100%; }
.contact-content .col-2 { width: 60px; }
}
@media (min-width: 576px) and (max-width: 767.98px) {
.navbar img { width: 60px; }
.navbar-nav a { font-size: 15px !important; border-bottom: 1px solid #e6e6e6 !important; margin: 0 12px; }
.header-contact-icons { padding-top: 10px; padding-bottom: 10px; padding-left: 12px; }
.home h1 { font-size: 50px; }
.home h2 { font-size: 18px; margin-bottom: 16px; }
.home-image img { order: 1; width: 100%; margin: auto; display: block; }
.home-content { order: 2; padding-top: 40px; }
.home { padding-top: 50px; }
.home-buttons a, .cv-button a { display: block; padding: 10px 20px; text-align: center; border-radius: 20px; }
.home p { padding-right: 0; }
.about-image img { width: 100%; margin-bottom: 30px; }
.about, .skills, .contact { padding-top: 70px; padding-bottom: 70px; }
.skills { padding-left: 30px; padding-right: 30px; }
.skills h1, .portfolio h1, .contact h1 { font-size: 70px; line-height: 32px; }
.skills h2, .portfolio h2, .contact h2 { font-size: 28px; }
.skills-boxes .col-lg-3 { width: 100%; margin: 10px 0; }
.lightbox-modal .carousel-inner { width: 90%; border-radius: 25px; }
.contact-form { padding: 0px; margin-top: 20px; }
.contact-form .col-lg-12, .contact-form .col-lg-6 { padding-left: 0; padding-right: 0; }
.contact-form #button { border-radius: 20px; }
.contact-form #button { width: 100%; }
.contact-content .col-2 { width: 60px; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
.navbar img { width: 60px; }
.navbar-nav a { font-size: 15px !important; border-bottom: 1px solid #e6e6e6 !important; margin: 0 12px; }
.header-contact-icons { padding-top: 10px; padding-bottom: 10px; padding-left: 12px; }
.home h1 { font-size: 50px; }
.home h2 { font-size: 18px; margin-bottom: 16px; }
.home-image img { order: 1; width: 100%; margin: auto; display: block; }
.home-content { order: 2; padding-top: 40px; }
.home { padding-top: 50px; }
.home-buttons a, .cv-button a { display: block; padding: 10px 20px; text-align: center; border-radius: 20px; }
.home p { padding-right: 0; }
.about-image img { width: 100%; margin-bottom: 30px; }
.about, .skills, .contact { padding-top: 70px; padding-bottom: 70px; }
.skills { padding-left: 32px; padding-right: 32px; }
.skills h1, .portfolio h1, .contact h1 { font-size: 70px; line-height: 32px; }
.skills h2, .portfolio h2, .contact h2 { font-size: 28px; }
.skills-boxes .col-lg-3 { width: 100%; margin: 10px 0; }
.lightbox-modal .carousel-inner { width: 90%; border-radius: 25px; }
.contact-form { padding: 0px; margin-top: 20px; }
.contact-form .col-lg-12, .contact-form .col-lg-6 { padding-left: 0; padding-right: 0; }
.contact-form #button { border-radius: 20px; }
.contact-form #button { width: 100%; }
.contact-content .col-2 { width: 60px; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
.contact-content .col-lg-1 { height: 55px; }
.contact-content i { font-size: 22px; }
}