@font-face {
    font-family: PoppinsLight;
    src: url(./Assets/Poppins-Light.ttf);
}

@font-face {
    font-family: PoppinsMedium;
    src: url(./Assets/Poppins-Medium.ttf);
}

html, body {
    min-height: 100%;
    max-width: 100%;
}

html, main{
    background-color: #9c89b8;
    color: #f0e6ef !important;
    font-family: PoppinsLight;
}

header {
    background-color: #9c89b8;
    padding-left: 50px;
    padding-top: 20px;
    font-size: xx-large;
    
}

.nav-item.nav-link{
    color: #f0e6ef !important;
    font-family: PoppinsMedium;
    letter-spacing: 6px !important;
    padding-right: 40px !important;
}

h5 {
    color: #9c89b8 !important;
    font-family: PoppinsMedium !important;
    font-size: xx-large;
}

.btn-primary{
    --bs-btn-color: #f0e6ef !important;
    --bs-btn-bg: #f0a6ca !important;
    --bs-btn-border-color: #f0a6ca !important;
    --bs-btn-hover-color: #f0e6ef !important;
    --bs-btn-hover-bg: #f0a6ca!important;
    --bs-btn-hover-border-color: #f0a6ca !important;
    --bs-btn-active-color: #f0e6ef !important;
    --bs-btn-active-bg: #f0a6ca !important;
    --bs-btn-active-border-color: #f0a6ca !important;

}

.card-title{
    padding-top: 2rem;
}

.card{
    background-color: #f0e6ef;
}

#abt{
    margin:auto;
}

p {
    overflow-wrap: break-word;
}

h1{
    font-weight: bold;
    letter-spacing: 0.5rem;
    font-size: 1.5rem;
    width:fit-content;
}

.top-para{
    margin-left: 5%;
    margin-top: -28%;
    width:fit-content;
}

.main-para{
    margin-left: 5%;
    margin-right: 5%;
    width:fit-content;
}

h2{
    font-weight: bold;
    letter-spacing: 0.25rem;
    font-size: 1rem;
    text-align: center;
    color:#9c89b8;
    width:fit-content;
}

img {
    max-width: 400px !important;
}

#factors{
    background-color: transparent;
}

.card{
    border-color: transparent;
    border-radius: 25px;
    height: auto;
}

.card img{
    border: 4px solid #f0e6ef;
    border-radius: 25px;
}

.container{
    justify-items: center;
}

body{
    background-color: #9c89b8;
    width:fit-content;
}

h3{
    font-weight: bold;
    letter-spacing: 0.2rem;
    font-size: 1.25rem;
    color: #9c89b8;
}

.card-title{
    margin-top: -2rem;
    word-wrap: normal;
}

.card-body{
    padding:0.5rem;
    margin-bottom: 0rem;
}

#row{
    height: 16rem;
}

p .card{
    color:#9c89b8;
} 

#services .card {
    height: 38rem;
    margin-top: 2rem;
    color: #9c89b8;
}

#factors .card {
    height: 16.5rem;
    width: 12rem;
    margin-top: 2rem;
    margin-right: 3rem;
}

.retirement p{
    margin: 5% !important; 
    text-align: right; 
    color: #f0e6ef;
}

.retirement h1 {
    text-align: right; 
    margin-left: 75%;
}

#asset4{
    border-radius: 50px; 
    border: 5px solid #f0e6ef; 
    margin-top: 19rem; 
    margin-left: 59rem; 
    margin-bottom: 1.5rem;
}

#services img {
    max-width: 100% !important;
}

#services h2 {
    width: 100% !important;
}

#services {
    margin-left: 5%;
}


.navbar {
    width: 100% !important;
}


/*
.top-para h1 {
    margin-top: -200px;
}*/

#asset6{
    border-radius: 50px; 
    border: 5px solid #f0e6ef; 
    margin-left: 5rem; 
    float: left; 
    margin-right:2%;
}

.import h1{
    margin-left: 5rem; 
    margin-top: 12rem;
}
#asset7 {
    border-radius: 50px;
    border: 5px solid #f0e6ef; 
    margin-top: 2rem; 
    margin-left: 5rem; 
    margin-bottom: 2rem; 
}

.factrs h1 {
    margin-top: -17rem; 
    text-align: left;
}

#backgro img {
    width:50rem; 
    border-color: transparent; 
}

#linkedin img, #phone img{
    width: 70px;
}

.top {
    padding-top: 20px;
}

#linkedin img {
    margin-left: 10px;
    border-radius: 0;
}

#phone img {
    margin-left:30%;
    margin-right: 0px;
    border-radius: 0;
}

.logo {
    margin-left: 150px ;
    border-radius: 0;
}

#contactForm{
    margin-left: 9%;
    margin-right: 9%;
}

main {
    padding-bottom: 30px;
}

header {
    width: 100%;
}

.navbar-nav {
    margin-left: 35%;
}


/*mobile*/
@media screen and (max-width: 426px) {
    #edu {
        margin-left:0 !important;
    }

    #services .card {
        height: 95%;
    }

    #services {
        margin-left: 1%;
    }

   .retirement img, .factrs img {
        width: 80%;
        margin: 10%!important;
        float:left;
    }

    .top-para, .extra, .retirement p, .main-para p{
        margin: 10% !important;
        overflow-wrap: normal;
        text-align: left;
    }

    .retirement h1 {
        text-align: left;
        margin-left: 10%;
    }
    .retirement img #asset4 {
        position: absolute;
        margin: -30%;
    }

    #abt-card{
        display: none;
    }

    .factrs h1, .factrs ul, .import h1 {
        margin: 10%;
    }

    #sections {
        margin-left: 15% !important;
        margin-top: 5%;
    }

    .coaching img {
        width: 80%;
        float: left;
        margin-left: 10%!important;
        margin-bottom: 20px;
    }

    #edu, #backgro {
        width: 100%;
    }

    #edu h5 {
        padding-top: 50px;
    }

    #backgro img {
        width: 90%;
        margin-left: 5%;
        padding-top: 25px;
    }

    #backgro {
        margin-top: 10px;
        margin-bottom: 20px;
    }

    #phone img, #linkedin img {
        width:50px;
        padding-top:0 !important;
        padding-bottom: 30px;
    }

    #phone img {
        margin-left: 26%;
    }

    #contactForm {
        margin:auto;
        width: 50%;
    }



}

/*large mobile*/
@media screen and (min-width: 427px) and (max-width: 767px){
    #services .card {
        height: fit-content;
    }

    #services {
        margin-left: auto;
    }

    #abt-card{
        width: 300px!important;
        margin-left: 10%!important;
        margin-top: 3%;
    }

    #asset6 {
        margin-left: 5%;
        margin-bottom: 5%;
        margin-top: 7%;
    }

    .extra {
        margin-left: 5%;
        margin-right: 5%;
    }

    .top-para {
        margin-top: -80px;
        margin-right: 5%;
    }

    .top-para h1 {
        margin-right: 40%;
    }

    #asset4{
        float:right;
        margin-top: auto;
        margin-right: 5%;
        margin-left: 2%;
    }

    .retirement h1 {
        text-align: right;
        display: flex;
        margin-left: 5%;
    }

    #asset7{
        margin-left: 5%;
    }

    .factrs ul, .factrs h1 {
        margin-left: 60%;
    }

    #sections .card {
        scale: 60%;
        margin-top: -90px;
        margin-left: 20%;;
    }

    .import h1{
        margin-bottom: 50px;
        margin-top:50px;
        margin-left: 5%;
    }

    #contactForm {
        margin-left: 50;
    }
}

/*tablet*/
@media screen and (min-width: 768px) and (max-width: 900px) {
    #services .card {
        height:auto;
    }

    #services {
        margin-left: auto;
    }

    #services a {
        margin-left: 20% !important;
    }

    #asset4 {
        margin-top: 1%; 
        margin-right: 5%; 
        margin-left: 2%;
        float:right;
    }

    .retirement h1 {
        text-align: right;
        margin-left: 5%;
        margin-top: 5%;
    }

    .extra {
        margin-left: 5%;
        margin-left: 5%;
    }

    .retirement p {
        margin-top: -2px !important;
        margin-bottom: 80%;
    }

    .factrs img {
        margin-left: 5% !important;
        margin-right: 2%;
        margin-top:0 !important;
    }

    .factrs h1{
        margin-left: 46%;
        display: flex;
    }

    .factrs ul {
        margin-left: 45%;
        margin-right: 5%;
    }

    #asset6 {
        margin-left: 5% !important;
    }

    #abt-card {
        margin-left: 65% !important;
    }

    .top-para {
        margin-top: 15%;
    }

    .top-para p {
        margin-right: -60%;
    }

    #sections .card {
        scale: 80%;
        margin-left: 50%;
        margin-top: 1%;
    }

    #edu, #backgro {
       width: 600px;
    }

    #edu {
        margin-left:47% !important;
    }

    #backgro {
        margin-left: 11%;
        padding-top: 30px;
        margin-bottom: 50px;
    }

    #backgro img {
        margin-left: 90px;
    }

    #phone img {
        margin-left: 205px;
        margin-right:10px;
    }

    #linkedin img {
        margin-left: 0;
    }

    #linkedin img, #phone img {
        margin-bottom: 30px;
    }

    #educ {
        padding-top: 50px;
    }

    #contactForm {
        margin-left: 2% !important;
    }
}

/*larger tablets and smaller laptops*/
@media screen and (min-width: 901px) and (max-width: 1439px){

    #services a {
        margin-left: 30% !important;
    }

    #services .card {
        height: 500px;
    }

    #services {
        margin-left: auto;
    }

    .top-para {
        margin-top: -150px !important;
        margin-right: 27% !important;
    }
    
    .logo {
        margin-left: 10px;
    }

    #linkedin img, #phone img {
        width: 7%;
    }

    

    #phone img {
        margin-left: 75px;
    }

    #asset4 {
        margin-right: 5%;
        float: right;
        margin-top: 1%;
        margin-left: 2%;
    }
    .extra {
        margin-left: 5%;
        margin-right:5%;
        width:fit-content;
    }

    .retirement {
        margin-top: 5%;
    }

    .retirement h1 {
        text-align: right;
        display: flex;
        margin-left: 50px;
    }

    .retirement p {
        margin-top: 0 !important;
    }

    .factrs h1{
        margin-top: 5px;
        margin-right: 8%;
        display: flex;
    }
    
    .factrs ul{
      margin-left: 5px;
    }

    #asset7{
        float: left;
        margin-right: 50px;
        margin-left: 5%;
        margin-top: 0;
    }
    
    .import h1 {
        margin-top: 150px;
        margin-bottom: 40px;
    }

    #sections .card {
        scale: 80%;
        margin-left: 55%;
        margin-top: -45px;
    }

    #contactForm {
        margin-left: 8% !important;
    }

    #backgro {
        width: 100%;
    }

    #edu {
        width: 100%;
    }

    .navbar-nav{
        margin-left: 0%;
    }

}

/*laptops*/
@media screen and (min-width: 1440px) and (max-width: 1800px){
    
    .card #abt-card{
        float:left;
        margin-top: 0;
        margin-right: 0;
        margin-left: 75% !important;
        position: absolute;
        justify-content: right !important;
    }

    #asset4 {
        margin-right: 5%;
        float: right;
        margin-top: 1%;
        margin-left: 2%;
    }

    .extra {
        margin-left: 5%;
        margin-right:5%;
        width:fit-content;
    }

    .retirement {
        margin-top: 5%;
    }

    .retirement h1 {
        text-align: right;
        margin-right: 0%;
        margin-left:23%;
    }

    .retirement p {
        margin-top: 0 !important;
    }

    .factrs h1{
        margin-top: 5px;
        margin-right: 8%;
        display: flex;
    }
    
    .factrs ul{
      margin-left: 5px;
    }

    #asset7{
        float: left;
        margin-right: 50px;
        margin-left: 5%;
        margin-top: 0;
    }
    
    .import h1 {
        margin-top: 150px;
    }

    #factors .card{
        margin-left: 55%;
    }

    #contactForm {
        margin-left: 6% !important;
    }

    #backgro {
        width: 75vw;
    }

    #phone img {
        margin-left: 20%;
    }

    .row {
        width:100%;
    }

    .navbar {
        padding-left: 0%;
    }

    .top-para p, .extra p{
        margin-right: 27% !important;
    }

    #services {
        margin-left: 15%!important;
    }

    .coaching {
        margin-top: 5%;
    }

    
}

/*monitors*/
@media screen and (min-width: 1801px) and (max-width: 3000px){
    .coaching {
        margin-top: 10px;
    }

    .top-para {
        margin-top: -25%;
    }

    #services {
        margin-left: 30%;
    }
    
    .card #abt-card{
        float:left;
        margin-top: 0;
        margin-right: 0;
        margin-left: 75% !important;
        position: absolute;
        justify-content: right !important;
    }

    #asset4 {
        margin-right: 5%;
        float: right;
        margin-top: 1%;
        margin-left: 2%;
    }

    .extra {
        margin-left: 5%;
        margin-right:5%;
        width:fit-content;
    }

    .retirement {
        margin-top: 5%;
    }

    .retirement h1 {
        text-align: right;
        margin-right: 0%;
        margin-left:23%;
    }

    .retirement p {
        margin-top: 0 !important;
    }

    .factrs h1{
        margin-top: 5px;
        margin-right: 8%;
        display: flex;
    }
    
    .factrs ul{
      margin-left: 5px;
    }

    #asset7{
        float: left;
        margin-right: 50px;
        margin-left: 5%;
        margin-top: 0;
    }
    
    .import h1 {
        margin-top: 150px;
    }

    #factors .card{
        margin-left: 55%;
    }

    #contactForm {
        margin-left: 6% !important;
    }

    .top-para, .extra {
        margin-right: 27%;
    }

    #backgro {
        width: 70vw;
    }

    


}