/* ----------------- All Overall Control------------- */

h1,h2,h3,h4,h5 {
	font-family: "Georgia","Helvetica Neue",Helvetica,Arial,sans-serif !important;
	line-height: 45px !important;
	font-weight: 200;
}

p{
	font-family: "Georgia","Helvetica Neue",Helvetica,Arial,sans-serif !important;
	line-height: 31px;
	color: #696969;
}

a {
  color: #671314;
  
}
a:hover {
  color: #571011;
}


ul{list-style: none;}

.btn-danger{
	background-color: #671314 !important;
	border-style: none !important;
}

.btn-danger:hover{
	background-color: #571011 !important;
}

.btn-danger a:hover{
	color: #fff !important;
}

.btn-danger a{
  color: #fff;
  text-decoration: none;
}


.btn-group button{
	margin-right: 5px;
}

img.loading-placeholder {
  filter: blur(8px);
  transition: filter 0.6s ease;
}

img.loading-placeholder[loading="lazy"]:not([src=""]) {
  filter: blur(0);
}

#fabiButton{
	display: none; /* Hidden by default */
	position: fixed; /* Fixed/sticky position */
	bottom: 20px; /* Place the button at the bottom of the page */
	right: 30px; /* Place the button 30px from the right */
	z-index: 99; /* Make sure it does not overlap */
	border: none; /* Remove borders */
	outline: none; /* Remove outline */
	background-color: #671314; /* Set a background color */
	color: white; /* Text color */
	cursor: pointer; /* Add a mouse pointer on hover */
	padding: 15px; /* Some padding */
	border-radius: 10px; /* Rounded corners */
	font-size: 18px; /* Increase font size */
}

#fabiButton:hover{
	background-color: #571011;
}

/* ----------------- Jumbotron Starts------------- */

.jumbotron-1{
	background-color: #ced4da;
}

.jumbotron-1 a{
	color: #fff !important;
	text-decoration: none !important;
}

.jumbotron-2{
	background-color: #12121c;
}

.jumbotron-2 h1{
	color: #fff;
}

.jumbotron-2 p{
	line-height: 35px;
	color: #fff;
}

.jumbotron-2 li{
	color: #fff;
}
/* ----------------- Jumbotron Ends ------------- */



/* ----------------- Carousel on index page Starts------------- */

.c-item{
	height: 700px;
}

.c-image{
	height: 100%;
	object-fit: cover;
	filter: brightness(0.75);
}

.carousel-bottom img{
	width: 24px;
	height: 24px;
}

.carousel-caption p {
    font-size: 1rem;
    color: #fff;

  }

.carousel-caption {
  bottom: 0;
  padding-bottom: 100px;
      width: 60%;
}

@media (max-width: 768px) {
  .carousel-caption {
    padding-bottom: 120px;
  }

  .carousel-caption h1 {
    font-size: 1.75rem;
  }

  .carousel-caption p {
    font-size: 1rem;
    color: #fff;
  }
}

.carousel-caption h1 {
  font-size: 2.5rem;
  color: #fff;
}

@media (max-width: 768px) {
  .carousel-caption h1 {
    font-size: 1.75rem;
  }

  .carousel-caption p {
    font-size: 1rem;
    width: 90%;
  }

  .carousel-bottom img {
    width: 20px;
    height: 20px;
  }
}

.carousel-bottom {
  flex-wrap: wrap;
  gap: 0.5rem;
}
/* ----------------- All Carousel on index page ENDS------------- */



/* ----------------- All Navbar Elements------------- */

.FB_logo{
	 height: 65%;
	 width: 65%;
	 object-fit: cover;
}

.navbar{
	background-color: #292929;
}

.dropdown-adj img{
	width: 20px;
	height: 20px;
	margin-right: 5px;
}

.dropdown-menu{
	background-color: #292929 !important;
}

.dropdown-menu a:hover{
	background-color: #0e0e0e !important;
	color: #fff !important;
}

.dropdown-menu a{	
	color: #fff !important;
}

.top-navbar {
  background-color: #0e0e0e;
  padding: 10px 0;
}


/* ----------------- All Navbar Elements Ends------------- */


/* ----------------- All Footer Elements------------- */
.hover-underline:hover {
    color: #571011 !important;
    text-decoration: underline 1px !important;
}

footer {
  background-color: #dfe3e7 !important;
}

footer span{
  color: #89181a;
}

@media (max-width: 575.98px) {
  .footer-middle {
    font-size: 1.05rem !important;
  }
}

/* ----------------- All Footer Elements End------------- */

/* ----------------- Top Footer 2025 Starts------------- */
.TopFooter{
  background-color: #000;
}

.TopFooter a img {
  transition: transform 0.3s;
  width: 30px;
}
.TopFooter a img:hover {
  transform: scale(1.1);
}

/* ----------------- Top Footer 2025 Ends------------- */	

/* ----------------- Graphic Design Page Intro Sections Starts ------------- */
.intro-section {
  padding: 4rem 0; 
}

.intro-image img {
  max-width: 100%;
  border-radius: 10px;
}

.intro-section h2{
  color: #ff6f61;
  font-weight: bold;
}

/* ----------------- Graphic Design Page Intro Sections Ends ------------- */





/* ----------------- Gallery Page Starts ------------- */



.galleryFB_Graphics img {
    width: 100%;              /* makes image fill container */
    height: auto;             /* keeps image aspect ratio */
    display: block;           /* removes extra space at the bottom */
    border-radius: 15px;      /* adds rounded corners */
}

.galleryFB_Graphics a {
    display: block;           /* ensures anchor respects the border radius */
    padding: 10px;            /* your desired padding */
    border-radius: 25px;      /* matches image radius */
    overflow: hidden;         /* clips overflowing image/content */
}

.card-img-top {
  border-radius: 10px !important;
  object-fit: cover;
  width: 100%;
  height: auto;
}

/* ----------------- Gradient/Call to action Starts ------------- */

.cta-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #ff9966, #ff5e62, #7f00ff);
    padding: 40px;
    color: #fff;
    gap: 30px;
}

.cta-left {
    flex: 1;
}

.cta-heading {
    font-size: 2rem;
    margin-bottom: 15px;
}

.cta-text {
    font-size: 1rem;
    margin-bottom: 20px;
    color: #260c0c;
}

.cta-button {
    display: inline-block;
    text-decoration: none;
    background: #fff;
    color: #333;
    padding: 12px 24px;
    border-radius: 20px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.cta-button:hover {
    background-color: #f0f0f0;
}

.cta-right {
    flex: 1;
    display: flex;
    justify-content: center;
}

.cta-images {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.cta-images img {
    width: 90%;
    height: auto;
    border-radius: 15px;
    object-fit: cover;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .cta-container {
        flex-direction: column;
        text-align: center;
        padding: 25px;
    }

    .cta-right {
        margin-top: 25px;
    }

    .cta-images {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .cta-images {
        grid-template-columns: 1fr;
    }
}


/* ----------------- Gradient/Call to action Ends------------- */

/* ----------------- Graphic Design specific css build starts ------------- */

.btn-secondaryFB {
	display: inline-block;
	background-color: #c3c3c3;
	padding: 0.75rem 1.5rem;
	border-radius: 5px;
	text-decoration: none;
	color: #000;
}

.btn-secondaryFB:hover {
  background-color: #ccc;
  color: #000;
}
.btn-salmon{
	display: inline-block;
	padding: 0.75rem 1.5rem;
	background-color: #ff6f61;
	border-radius: 5px;
	color: #fff;
	text-decoration: none;
}
.btn-salmon:hover {
	background-color: #e65b50;
	color: #fff;
}

.hero {
	text-align: center;
	padding: 6rem 2rem;
}
.hero h1{
	font-weight: bold;
}

.hero p{
	font-size: 1.2rem !important;
	padding-bottom: 25px;
}

.portfolio-section {
  background-color: #fafafa;
}

.contact-section {
  text-align: center;

}

/* Responsive Styles */
@media (max-width: 768px) {
  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  .container {
    padding: 2rem 1rem;
  }

  p, li {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 1.5rem 1rem;
  }

  h1 {
    font-size: 1.75rem;
  }

  h2 {
    font-size: 1.25rem;
  }

  p, li {
    font-size: 0.95rem;
  }
}

/* ----------------- Graphic Design specific css build Ends ------------- */

/* ----------------- Infinite Carousel Starts ------------- */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.logos {
  overflow: hidden;
  padding: 60px 0;
  background: white;
  white-space: nowrap;
  position: relative;
}

.logos:before,
.logos:after {
  position: absolute;
  top: 0;
  width: 250px;
  height: 100%;
  content: "";
  z-index: 2;
}

.logos:before {
  left: 0;
  background: linear-gradient(to left, rgba(255, 255, 255, 0), white);
}

.logos:after {
  right: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), white);
}

.logos:hover .logos-slide {
  animation-play-state: paused;
}

.logos-slide {
  display: inline-block;
  animation: 35s slide infinite linear;
}

.logos-slide img {
  height: 200px;
  margin: 0 40px;
}

@media (max-width: 480px) {
  .logos-slide img {
    max-height: 90px;
    margin: 0 20px;
  }
}

/* ----------------- Infinite Carousel Ends (on graphic design page) ------------- */

/* ----------------- Resume Page start ------------- */

.fabian-resume ul{
	padding-left: 30px;
}

.fabian-resume ul li{
	list-style-type: circle;
}

.fabian-resume h2{
	margin-top: 0; 
}

.fabian-resume h4{
	color: #ec9c09; 
}

.fabian-resume h3{
	margin-top: 0;
	color: #671314; 
}

.fabian-resume span{
	font-weight: bold;
}

hr.dotted{
	border-top: 3px dotted #bbb;
}

.sticky-resume{
  position: sticky;
  top: 1px;
  z-index: 10;
  padding: 1rem;
}

.fabian-resume .row {
  align-items: flex-start;
}

.sticky-resume {
  align-self: flex-start;
}



/* ----------------- Resume Page Ends ------------- */

/* ----------------- About Page start ------------- */

.about-me{
	padding-right: 20px;
}

/* ----------------- About Page Ends ------------- */