/* Alison By TeamXcel */

/*  ==========================================================================
    Table of Contets
    ==========================================================================
    
    1.0 Common Styles
    2.0 Header Section
    3.0 Hero Section
    4.0 About Section
    5.0 Feature Section
    6.0 Video Section
    7.0 Screenshot Section
    8.0 Pricing Section
    9.0 Counter Section
    10.0 Testimonial Section
    11.0 Blog Section
    12.0 Download Section
    13.0 Subscribe Section
    14.0 Footer Section
    15.0 Scrool To Top
    
    ==========================================================================
    Alison Portfolio Template Version 0.1
    ========================================================================== */

	@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,500,600,700|Oswald:400,500,600,700');
	
/*  ==========================================================================
    Common Styles
    ========================================================================== */
*{
	padding: 0;
	margin: 0;
}
body{
    background-color: #050505;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    line-height: 23px;
    color: #777;
    font-weight: 400;
    position: relative;
    overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6{
    font-family: 'Oswald', sans-serif;
    -webkit-font-smoothing:antialiased;
	color: #333;
}
h1{
    font-size: 40px;
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 10px;
    color: #fff;
    letter-spacing: -0.05em;
}
h2{
    font-size: 32px;
    color: #fff;
    margin: 0 0 10px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: -0.04em;
}
h3,h4{
    margin: 0 0 10px;
    font-weight: 600;
    line-height: 1.7;
    color: #fff;
    letter-spacing: -0.01em;
}
h3{
    font-size: 18px;
}
h4{
    font-size: 16px;
}
h5,h6{
    font-size: 14px;
    margin: 0 0 10px;
}
img{
    border: none;
    outline:none;
    max-width: 100%;
}
ul{
    display: block;
    list-style: none;
    padding: 0;
    margin: 0;
}
p, li, a, span{}
p{
    font-size: 18px;
    margin-bottom: 10px;
}
a, a:hover{
    text-decoration: none;
}
a:focus{
    outline: 0;
    text-decoration: none;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder{
   color: #ddd !important;
}

input:-moz-placeholder,
textarea:-moz-placeholder{ /* Firefox 18- */
   color: #ddd !important;  
}

input::-moz-placeholder,
textarea::-moz-placeholder{  /* Firefox 19+ */
   color: #ddd !important;  
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder{  
   color: #ddd !important;  
}
button{
    border: none;
	background: none;
}
/* Helper Class */
.padding{
    padding: 100px 0;
}
.no-padding{
    padding: 0;
}
.padding-15{padding: 15px;}
.padding-20{padding: 20px;}

.bg-white{ background-color: #fff; }
.bg-grey{ background-color: #eef3f9;}
.bg-dark{ background-color: #050505!important;}
.bd-top{ border-top: 1px solid #eaeaea;}
.bd-bottom{ border-bottom: 1px solid #eaeaea;}

.mb-10{ margin-bottom: 10px; }
.mb-15{ margin-bottom: 15px; }
.mb-20{ margin-bottom: 20px; }
.mb-25{ margin-bottom: 25px; }
.mb-30{ margin-bottom: 30px; }
.mb-35{ margin-bottom: 35px; }
.mb-40{ margin-bottom: 40px; }
.mb-45{ margin-bottom: 45px; }
.mb-50{ margin-bottom: 50px; }
.ml-15{ margin-left: 15px; }
.ml-20{ margin-left: 20px; }
.ml-25{ margin-left: 25px; }
.ml-30{ margin-left: 30px; }
.ml-35{ margin-left: 35px; }
.fz-28{ font-size: 28px; }
.fz-24{ font-size: 24px; }
.fz-22{ font-size: 22px; }
.fz-20{ font-size: 20px; }
.fz-18{ font-size: 18px; }
.fz-16{ font-size: 16px; }
.pd-15{ padding: 15px; }
.pdl-80{ padding-left: 80px; }
.text-black{
    color: #333;
}
.text-white{
    color: #ffffff;
}
.align-left{
    text-align: left;
}
.align-right{
    text-align: right;
}
.align-center{
    text-align: center;
}
.fl-right{
    float: right;
}
.fl-left{
    float: left;
}

.overlay{
    width: 100%;
    position: relative;
    z-index: 1;
}
.overlay:before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}

/* Preloader Styles */
.loaded .site-preloader-wrap {
    opacity: 0;
    visibility: hidden;
}
.site-preloader-wrap {
    position: fixed;
    z-index: 9999;
    height: 100%;
    width: 100%;
    background: #111;
    top: 0;left: 0
}

.site-preloader-wrap .spinner {
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -20px;
    margin-top: -20px;
}

.spinner {
  width: 40px;
  height: 40px;

  border-radius: 100%;  
  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
  animation: sk-scaleout 1.0s infinite ease-in-out;
}

@-webkit-keyframes sk-scaleout {
  0% { -webkit-transform: scale(0) }
  100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}

@keyframes sk-scaleout {
  0% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 100% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
    opacity: 0;
  }
}

/* Button Style */
.btn_group{}
.btn_group a{
    margin: 5px;
}
.default-btn{
    font-family: "Open Sans",sans-serif;
    letter-spacing: 2px;
    background-color: #ff4c4c;
    color: #ddd;
    line-height: 45px;
    display: inline-block;
    padding: 0 25px;
    border-radius: 0;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 700;
    position: relative;
    overflow: hidden;
    z-index: 1;
    -webkit-transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    -moz-transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    -ms-transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     -o-transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.default-btn:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #fff;
    -webkit-transform-origin: right center;
       -moz-transform-origin: right center;
        -ms-transform-origin: right center;
            transform-origin: right center;
    -webkit-transform: scale(0, 1);
       -moz-transform: scale(0, 1);
        -ms-transform: scale(0, 1);
         -o-transform: scale(0, 1);
            transform: scale(0, 1);
    -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
       -moz-transition: -moz-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        -ms-transition: -ms-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
         -o-transition: -o-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
}
.default-btn:hover{
    color: #111;
}
.default-btn:hover:before{
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -ms-transform-origin: left center;
        transform-origin: left center;
    -webkit-transform: scale(1, 1);
       -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
         -o-transform: scale(1, 1);
            transform: scale(1, 1);
}
.default-btn.btn_sm{
    line-height: 40px;
    padding: 0 15px;
}

/* Transition Effect */
a,a:hover, .overlay, img, .form-control,  .form-control:hover, button{
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
/* ==========================================================================
   Header Section
   ========================================================================== */
.header-section{
    background-color: transparent;
    /* width: 100%;
    height: 80px; */
    z-index: 999;
    position: fixed;
    left: 0;
    top: 0;
    padding: 10px 0;
}
/* .navbar-fixed-top.header-section{
    background-color: #111;
    box-shadow: 0px 16px 28px 0px rgba(0, 0, 0, 0.05);
    height: 70px;
    border-bottom: 0;
    padding: 0;
} */
.mainmenu .download-btn{
    background-color: #ef5560;
    box-shadow: 0 10px 35px 2px rgba(239, 85, 96, 0.8);
    border-radius: 30px;
    display: inline-block;
    padding: 10px 20px;
    text-transform: uppercase;
    font-size: 10px;
    color: #fff;
    font-weight: 600;
    line-height: 25px;
    margin: 14px 0;
}
.navbar-fixed-top .mainmenu .download-btn{
    background-color: #23262e;
    color: #fff;
}
.mainmenu .download-btn:hover{
    border-radius: 0;
    box-shadow: none;
}
.navbar-fixed-top ul.nav > li > a{
    color: #ddd;
}
.navbar-fixed-top ul.nav > li > a:hover,
.navbar-fixed-top ul.nav > li > a:focus,
.navbar-fixed-top ul.nav > li.active > a{
    color: #fff;
}
.logo-light,
.navbar-fixed-top .logo-light,
.logo-dark,
.navbar-fixed-top .logo-dark,
.navbar-fixed-top.header-section,
.header-section{
    transition: all 0.3s ease-in-out;
}
.navbar{
    border: medium none;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    -ms-border-radius: 0;
    border-radius: 0;
    margin: 0;
    position: relative;
    padding: 0;
}
.navbar-header {
    padding: 17px 0;
}
.navbar-header .brand{
    font-size: 25px;
    color: #333;
    font-family: 'Open Sans', sans-serif;
    letter-spacing: -1px;
    font-weight: 600;
	margin-left: 13px;
}
.navbar-header .nav-btn{
    padding: 8px;
    border-radius: 1px;
}
.navbar-header .nav-btn .icon-bar{
    background-color: #fff;
    width: 18px;
}
.navbar-fixed-top .navbar-header .nav-btn .icon-bar{
    background-color: #777;
}
.navbar-header .nav-btn:hover,
.navbar-header .nav-btn:focus{
    opacity: 0.8;
}

/* Nav Menu */
#navbar{
    z-index: 999;
    padding: 0 15px;
}
ul.nav{}
ul.nav > li{}
ul.nav > li > a{
    color: rgba(255, 255, 255, 0.9);
    font-family: 'Open Sans', sans-serif;
    display: inline-block;
    vertical-align: middle;
    padding: 0 10px;
    letter-spacing: 1px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 70px;
    z-index: 1;
}
ul.nav > li > a:hover,
ul.nav > li > a:focus,
ul.nav > li > a.active{
    background: none;
    color: #fff;
    opacity: 1;
}
.menu-btn{
    margin-left: 10px;
    margin-top: 10px;
}

/*Mobile Menu */
.menu-wrap{
    position: relative;
}
.slicknav_menu {
    background: none;
    padding: 4px 0;
    display:none;
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
}
.slicknav_nav {
    background-color: #fff;
}
.slicknav_btn{
    background-color: transparent;
    margin: 17px 5px 19px;
}
.slicknav_nav .slicknav_row:hover,
.slicknav_nav .slicknav_row, 
.slicknav_nav a,
.slicknav_nav a:hover{
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
}
.slicknav_nav .slicknav_row, 
.slicknav_nav a {
    padding: 10px 15px;
    margin: 0;
    color: #777;
}
.slicknav_nav a .caret{
    display: none;
}
.slicknav_nav ul{
    margin: 0;
}
.slicknav_nav ul li a{
    padding-left: 30px;
    font-size: 12px;
}
.slicknav_nav .slicknav_row:hover,
.slicknav_nav a:hover{
    background-color: transparent;
    color: #333;
}

/* ==========================================================================
   Hero Section
   ========================================================================== */
.hero-section {
    /* Adds a subtle top-to-bottom dark overlay gradient before loading the image */
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5)), url(./Gemini_Generated_Image_tka06gtka06gtka0.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 100%;
    height: 100vh;
    position: relative;
}

.hero-content h1{
    font-size: 80px;
    text-transform: uppercase;
}
.hero-content h5{
    color: #ddd;
    text-transform: uppercase;
    font-size: 25px;
}
.hero-content p{
    color: #ddd;
    margin-bottom: 50px;
    font-size: 20px;
}

.down-arrow a {
    position: absolute;
    width: 40px;
    height: auto;
    left: calc(50% - 25px);
    bottom: 50px;
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 600;
    color: #ddd;
    writing-mode: vertical-rl;
    text-align: center;
    line-height: 40px;
    animation: bounce 2s infinite;
    -webkit-animation: bounce 2s infinite;
    -moz-animation: bounce 2s infinite;
    -o-animation: bounce 2s infinite;
}

/* Down Arrow Animation */
@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 
    40% {-webkit-transform: translateY(-20px);}
    60% {-webkit-transform: translateY(-10px);}
}
 
@-moz-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
    40% {-moz-transform: translateY(-20px);}
    60% {-moz-transform: translateY(-10px);}
}
 
@-o-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
    40% {-o-transform: translateY(-20px);}
    60% {-o-transform: translateY(-10px);}
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-20px);}
    60% {transform: translateY(-10px);}
}
/* ==========================================================================
   About Section
   ========================================================================== */
.about-section{}
.about-wrap{
    display: flex;
    align-items: center;
}
.about-content{
    padding-right: 40px;
}
.about-content .default-btn{
    margin-top: 20px;
}
.about-content p{
    color: #bbb;
}
/* ==========================================================================
   Service Section
   ========================================================================== */
/* .service-section{
      background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5)), url(./secton\ 3.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 100%;
    height: 100%;
} */

.service-section{
    position: relative;
    overflow: hidden;
}

.service-section::before{
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            rgba(0,0,0,.70),
            rgba(0,0,0,.85)
        ),
        url("./secton 3.png");

    background-size: cover;
    background-position: center;

    filter: blur(4px) brightness(0.6);

    transform: scale(1.08);

    z-index: 1;
}

.service-section > *{
    position: relative;
    z-index: 2;
}
.service-section .section-heading p{
    color: #ddd;
}
.service-wrap{
    margin-top: -15px;
    margin-bottom: -15px;
}
/* .service-content{
    background-color: rgba(255,255,255,0.03);
    padding: 30px 20px;
    transition: all 0.2s ease-in-out;
}
.service-content:hover{
    background-color: rgba(255,255,255,0.05);
    transition: all 0.2s ease-in-out;
} */

.service-content{
    background: rgba(12, 17, 28, 0.78);

    backdrop-filter: blur(16px);

    border: 1px solid rgba(255,255,255,0.05);

    padding: 35px 25px;

    transition: all 0.4s ease;

    border-radius: 8px;
}

.service-content:hover{

    background: linear-gradient(
        135deg,
        rgba(25,30,40,0.92),
        rgba(18,22,32,0.92)
    );

    border-color: rgba(255,215,120,0.35);

    box-shadow:
        0 20px 50px rgba(0,0,0,0.35),
        0 0 30px rgba(255,215,120,0.15);

    transform: translateY(-8px);
}
.service-content i{
    font-size: 40px;
    color: #ff4c4c;
    margin-bottom: 15px;
}
.service-content h3{
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 1px;
    margin-bottom: 5px;
}
.service-content p{
    color: #bbb;
    font-size: 13px;
}

/* ==========================================================================
   Portfolio Section
   ========================================================================== */
.portfolio-section{
    padding-bottom: 0;
}
.portfolio-section .section-heading p{
    color: #ddd;
}
.portfolio-items .col-lg-4{
    padding: 0;
}
.portfolio-wrap{
    display: flex;
    align-items: center;
}
.portfolio-content{}
.portfolio-thumb img{
    width: 100%;
}
.portfolio-thumb{
    position: relative;
}
.portfolio-box .hover{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    
    opacity: 0;
    visibility: hidden;
    padding: 15px;
}
.portfolio-box .hover div{
    background-color: rgba(255,255,255,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.portfolio-box:hover .hover{
    opacity: 1;
    visibility: visible;
}
/* ==========================================================================
   CTA Section
   ========================================================================== */
.cta-section{}
.cta-section{
    padding: 50px 0;
}
.cta-section .cta-content h2{
    font-size: 40px;
    margin-bottom: 25px;
}


/* ==========================================================================
   Contact Section
   ========================================================================== */
.contact-section{
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.contact-wrap{
    display: flex;
    align-items: center;
    padding: 120px 0;
}
/*Contact Form*/
.contact-form .form-control{
    border: none;
    border-bottom: 1px solid #333;
    border-radius: 0;
    height: 45px;
    background-color: transparent;
    color: #fff;
}
.form-control:hover,
.form-control:focus{
    box-shadow: none;
}
.contact-form .submit-button:hover{ cursor: pointer; }
.contact-form{
    padding-right: 40px;
}
.contact-form .form-control.message{
    height: 120px;
}
#form-messages{
    display: none;
}
#form-messages.alert-danger,
#form-messages.alert-success{
    display: block;
}
/*Google Map*/
#google-map{
    width: 50%;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
}
/* ==========================================================================
   Footer Section
   ========================================================================== */
.footer-section{
    background-color: #111;
    display: block;
    color: #fff;
    text-align: center;
    padding: 30px 0;
}
.footer-section p{
    text-transform: uppercase;
    font-size: 12px;
    margin: 0;
}  

/* ==========================================================================
   Scroll To Top
   ========================================================================== */
#scroll-to-top{
    background-color: #fff;
    display: none;
    width: 45px;
    height: 45px;
    text-align: center;
    font-size: 14px;
    border-radius: 50%;
    line-height: 45px;
    color: #555;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999;
}
#scroll-to-top:hover{
    background-color: #282828;
    color: #fff;
}

.final-message{
   
    text-align:center;
}

.final-title{
    color:#fff;
    font-size:64px;
    font-weight:700;
    line-height:1.3;
    letter-spacing:2px;
    text-transform:uppercase;
}

.final-divider{
    width:120px;
    height:1px;
    background:#D4AF37;
    margin:50px auto;
}

.wish-text{
    color:#D4AF37;
    letter-spacing:5px;
    text-transform:uppercase;
    margin-bottom:25px;
    font-size:14px;
}

.birthday-cake{
    width:180px;
    cursor:pointer;
    transition:.6s ease;
}

.birthday-cake:hover{
    transform:scale(1.08);
}

#birthdayReveal{

    position:fixed;
    inset:0;

    background:#050505;

    display:flex;
    justify-content:center;
    align-items:center;

    opacity:0;
    visibility:hidden;

    transition:1.2s ease;

    z-index:99999;
}

#birthdayReveal.show{
    opacity:1;
    visibility:visible;
}

.reveal-content{
    text-align:center;
}

.small-text{
    display:block;
    color:#D4AF37;
    letter-spacing:8px;
    margin-bottom:25px;
    font-size:14px;
}

#birthdayReveal h1{
    font-size:90px;
    color:white;
    margin:0;
    font-weight:700;
}

#birthdayReveal h2{
    font-size:140px;
    color:#D4AF37;
    margin:0;
    font-weight:700;
}

.gold-line{
    width:120px;
    height:1px;
    background:#D4AF37;
    margin:40px auto;
}

#birthdayReveal p{
    color:rgba(255,255,255,.85);
    font-size:20px;
}

.signature{
    display:block;
    margin-top:25px;
    color:rgba(255,255,255,.7);
    letter-spacing:4px;
    text-transform:uppercase;
}

.gold-particle{
    position:fixed;
    top:-20px;
    width:8px;
    height:8px;
    border-radius:50%;
    background:#FFD166;
    pointer-events:none;
    animation:goldFall linear forwards;
}

@keyframes goldFall{

    to{
        transform:translateY(110vh);
        opacity:0;
    }
}

@media(max-width:768px){

    .final-title{
        font-size:34px;
    }

    #birthdayReveal h1{
        font-size:40px;
    }

    #birthdayReveal h2{
        font-size:65px;
    }
}

/* =========================
   RESPONSIVE TYPOGRAPHY
========================= */

.final-title{
    font-size: 40px ;
    line-height: 1.3;
}

#birthdayReveal h1{
    font-size: clamp(40px, 6vw, 90px);
}

#birthdayReveal h2{
    font-size: clamp(55px, 10vw, 140px);
}

#birthdayReveal p{
    font-size: clamp(16px, 2vw, 22px);
}

/* =========================
   RESPONSIVE CAKE
========================= */

.birthday-cake{
    width: 100%;
    max-width: 280px;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* =========================
   RESPONSIVE CONTAINERS
========================= */

.final-message{
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.reveal-content{
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* =========================
   LARGE DESKTOPS
========================= */

@media (min-width: 1600px){

    .final-title{
        max-width: 1400px;
        margin: auto;
    }

    .birthday-cake{
        max-width: 320px;
    }
}

/* =========================
   TABLETS
========================= */

@media (max-width: 992px){

    .final-message{
        padding: 100px 20px;
    }

    .birthday-cake{
        max-width: 220px;
    }
}

/* =========================
   MOBILE
========================= */

@media (max-width: 768px){

    .final-message{
        padding: 80px 20px;
    }

    .wish-text{
        font-size: 12px;
        letter-spacing: 3px;
    }

    .birthday-cake{
        max-width: 180px;
    }

    .gold-line{
        width: 80px;
    }

    .signature{
        font-size: 14px;
        letter-spacing: 2px;
    }
}

/* =========================
   SMALL PHONES
========================= */

@media (max-width: 480px){

    .final-message{
        padding: 60px 15px;
    }

    .birthday-cake{
        max-width: 140px;
    }

    .final-divider{
        width: 60px;
    }

    .wish-text{
        font-size: 11px;
    }
}

/* --- Logo Sizing & Placement --- */
.navbar-logo {
    /* 1. Control the Size */
    height: 150px;          /* Adjust this height to make your logo bigger or smaller */
    width: auto;           /* Keeps the logo perfectly in proportion so it doesn't stretch */
    
    /* 2. Control the Placement & Alignment */
    display: inline-block;
    vertical-align: middle; /* Perfectly aligns the logo vertically with your menu text */
    
    /* 3. Safety Smoothness */
    max-height: 100%;      /* Prevents the logo from busting out of the navbar on small screens */
    transition: all 0.3s ease; /* Adds a smooth transition if you decide to shrink it on scroll later */
}

/* Optional mobile fix: if the logo looks too big on tight smartphone screens */
@media (max-width: 576px) {
    .navbar-logo {
        height: 35px;      /* Slightly smaller on phones so the hamburger menu / links fit */
    }
}

/* Container to manage spacing below the image */
.section-top-img-container {
    margin-bottom: 25px; /* Space between the image and the heading "About Her" */
    display: block;
}

/* Highly customizable image properties */
.section-top-img {
    /* CONTROL SIZE HERE */
    width: 350px;          /* Change this to adjust the width (e.g., 100%, 150px, etc.) */
    height: auto;          /* Keeps the aspect ratio perfect */
    padding-left: 80px;
    /* OPTIONAL STYLING */
    object-fit: cover;     
    border-radius: 8px;    /* Optional: Makes corners slightly rounded. Change to 50% for a circle. */
}