@import url('https://fonts.googleapis.com/css?family=Heebo&display=swap');

*, *:link, *:visited, *:hover, *:active {
    text-decoration: none;
    list-style: none;
    font-family: 'Heebo', sans-serif;
    letter-spacing: 1px;
}

:root {
    --principalBackground: #EfEEE8;
    --radius: 1.7rem;
    --asGrey: #7b7f80;
    --asRed: #7b1318;
    --asBlack: #343a40;
    --theOrange: #DE362B;
    --theGreen: #2A9D8F;
    --white: #FFFFFF;
    --theBlack: #363740;
    --black: #000000;
    --colorOverlay: #C9BFB5;
    --ContainerBackgroundOne: #E9ECEF;
    --inputTextareaBackground: #F8F9FA;
    --BackgroundOne: #F2F2F2;
    --shadowOne: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
    --shadowTwo: rgba(0, 0, 0, 0.1) 0px 10px 50px;
    --shadowThree: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    --shadowFour: var(--asRed) 0px 1px 4px, var(--asRed) 0px 0px 0px 3px;
    --shadowFive: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    --transition: 0.2s ease-in-out;
}

body {
    background-color: brown;
}

input:focus {
  outline: none !important;
  transition: 0.1s ease-in-out;
  box-shadow: var(--asRed) 0px 0px 0px 3px;
}
.text-primary-as{
    color : var(--asRed)
}
.btn-primary-as{
    background-color : #7b1318 !important;
    color: white !important;
}
.bg-primary-as{
    background-color : #7b1318 !important;
    color: white !important;
}
.the-body {
    float: right;
    margin-top: 100px;
    margin-bottom: 100px;
    width: 75%;
    margin-right: 30px;
}

.card {
    margin: 0px 0px 0px 0px;
}


.card-body {
    min-height: 200px;
}

.work .text h3{
    color: var(--white);
}

.icon-as-red{
    color: var(--asRed)
}

@media (max-width:1024px) {
    .the-body {
        float: inline-end;
        width: 95%;
        margin: 150px 12px 100px 0px;
    }
}


img {
    max-width: 100%;
    height: auto;
  }


.card-as{
    border: none;
    transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
    overflow:hidden;
    border-radius:25px;
    min-height:450px;
    box-shadow: 0 0 12px 0 rgba(0,0,0,0.2);
    background-color: #cccccc;
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover;

   @media (max-width: 768px) {
    min-height:350px;
  }

  @media (max-width: 420px) {
    min-height:300px;
  }
  
}

@media (max-width: 1300px) {
    .hide-on-mobile{
        display: none;
    }
}