.bg-picture-primary {
    background-image: url('../images/bg-primary.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
    height: 800px;
}

.text-position {
    padding-top: 20px;
}

.center-margin {
    margin-right: auto;
    margin-left: auto;
}

.text-head {
    font-size: 50px;
    font-weight: 700;
}

.material-icons.md-18 {
    font-size: 18px;
}

.material-icons.md-24 {
    font-size: 24px;
}

.material-icons.md-36 {
    font-size: 36px;
}

.material-icons.md-48 {
    font-size: 48px;
}

.material-icons.md-blue {
    color: blue;
}

.i-size{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: azure;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.i-size .fas{
    position: relative;
    top: 10px;
}

a{
    color: black;
}

.section-color{
    background-color: #ce9393;
}

.app-color{
    background-color: #dbdbdb;
}

.oCom-color{
    background-color: #e28445;
}

body{
    font-family: 'Roboto', sans-serif;
}

.footer{
    background-color: #2d3246;
    color: beige;
}

.img-formation{
    height: 250px;
}

.text-p25{
    font-size: 25px;
}

.text-justify{
    text-align: justify;
}

.footer p{
    font-size: 14px;
    margin: 2px;
}

.footer a{  
    color: white;
    text-decoration: none;
    padding: 6px;
}

.footer a:hover{  
    color: blue;
}

.w-icon{
    width: 80px;
}

.home-icon{
    width: 40px;
}

.link-none{
    text-decoration: none;
}

body h1, body h2, body h3, body h4, body h5, body h6{
    font-weight: 700;
}

.divalign{
    align-content: center;
}

#scrollToBottomBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed position on the screen */
    bottom: 20px; /* 20px from the bottom */
    right: 30px; /* 30px from the right */
    z-index: 99; /* Make sure it's on top of other content */
    border: none; /* Remove border */
    outline: none; /* Remove outline on focus */
    background-color: #555; /* Dark grey background */
    color: white; /* White text/icon */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 18px; /* Larger font size for the arrow */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}

#scrollToBottomBtn:hover {
    background-color: #000; /* Black background on hover */
}

#scrollToTopBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed position on the screen */
    top: 30px; /* Adjust this to be above the 'scroll to bottom' if both are present, or pick a good spot */
    right: 30px; /* 30px from the right */
    z-index: 99; /* Make sure it's on top of other content */
    border: none; /* Remove border */
    outline: none; /* Remove outline on focus */
    background-color: #555; /* Dark grey background */
    color: white; /* White text/icon */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 18px; /* Larger font size for the arrow */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}

#scrollToTopBtn:hover {
    background-color: #000; /* Black background on hover */
}