@font-face {
    font-family: 'Obviously Bold';
    src: url('Obviously-Bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Georgia Pro';
    src: url('GeorgiaPro-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Apply the fonts */
.obviously-bold {
    font-family: 'Obviously Bold', sans-serif !important;
}

.georgia-pro {
    font-family: 'Georgia Pro', Georgia, serif !important;
}

.instagram-profile-generator-font {
    font-family: 'Instagram Sans', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

.bg-secondary { background-color: #e3e3e3 !important; }
.bg-dark { background-color: #202020 !important; }
.text-secondary { color: #e3e3e3 !important; }
.text-muted { color: #c0c0c0 !important; }
.border-muted { color: #c0c0c0 !important; }
.bg-muted { background-color: #aaaaaa !important; }
.text-insta-blue { color: #0297fe; }
.text-brand-1 { color: #2EDDFC; }

.insta-btn.btn-brand-1 {
    background-color: #014D5B;
    color: #ffffff; /* Ensure text is readable */
    border: 2px solid #014D5B;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border-radius: 5px;
    transition: all 0.3s ease-in-out;
}
.insta-btn.btn-brand-1:hover,
.insta-btn.btn-brand-1:focus {
    background-color: #013742; /* Slightly darker for hover */
    border-color: #013742;
    color: #ffffff;
    text-decoration: none;
}
.insta-btn.btn-brand-1:active {
    background-color: #012B34; /* Even darker when clicked */
    border-color: #012B34;
}

.insta-check.form-check-input:checked {
    background-color: #2EDDFC !important;
    border-color: #2EDDFC !important;
}

.insta-check.form-check-input:focus,
.insta-check.form-check-input:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 0.25rem rgba(46, 221, 252, 0.5) !important;
    border-color: #2EDDFC !important;
}

.fs-7 { font-size: 0.75rem !important;     /* 12px */  }
.fs-8 { font-size: 0.625rem !important;    /* 10px */  }
.fs-9 { font-size: 0.6rem !important;     /* 8px */   }
.fs-10 { font-size: 0.5rem !important;     /* 6px */ }
.fs-11 { font-size: 0.375rem !important;   /* 4px */ }
.fs-12 { font-size: 0.25rem !important;   /* 3px */ }

.smartphone-wrapper {
    background-image: url('cell_frame_3.png');
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.fa-clone {
    transform: scaleX(-1) !important;
}
.fa-clone {
    transform: scaleX(-1) !important;
}
.fa-thumbtack {
    transform: rotate(45deg) !important;
}