body{
    width: 100%; 
    margin: 0px; 
    padding: 0px; 
}

@font-face {
    font-family: 'Degular-Regular';
    src: url('/fonts/Degular-Regular.woff2') format('woff2'),
         url('/fonts/Degular-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Degular-Bold';
    src: url('/fonts/Debular-Semibold.woff2') format('woff2'),
         url('/fonts/Degular-Semibold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


:root {
    --darkblue: #294754;
    --lightblue: #b5cad7;
    --white: #FFFFFF;
  }


/*---------
defining font-styles
----------*/

h1{
    font-family: 'Degular-Bold', sans-serif; 
    font-weight: normal; 
    font-size: 20px; 
    line-height: 120%; 
    margin-block-start: 0em;
    margin-block-end: 0em;
    color: var(--darkblue);
}



p{
    font-family: 'Degular-Regular', sans-serif;
    font-weight: normal; 
    font-size: 20px; 
    line-height: 120%;
    margin-block-end: 0em;
    margin-block-start: 0em;
    color: var(--darkblue);
}

a{
    font-family: 'Degular-Regular', sans-serif;
    font-weight: normal; 
    font-size: 20px; 
    line-height: 120%;
    margin-block-end: 0.5em;
    margin-block-start: 0.5em;
    color: var(--darkblue);
    text-decoration: none;
}

a:hover{
    color: var(--lightblue);
}





/*----------
bg colors
------------*/
.bg-lightblue{
    background-color: var(--lightblue)
}



/*----------
margin padding settings
------------*/
.padding-25{
    padding: 4%;
}

/*----------
width and height settings
------------*/
.width-30{
    width: 20%;
}


.width-70{
    width: 84%;
}


.height-100{
    height:100vh;
}



/*-----------------
flexbox settings
-----------------*/
.flex{
    display: flex;
}

.flex-to-column{
    display: flex;
}

.items-end{
    align-items: end;
}

.items-end-to-center {
       align-items: end;
}
    

.between{
    justify-content: space-between;
}


.row{
    flex-direction: row;
}

.column{
    flex-direction: column;
}



/*-----------------
img settings
-----------------*/
svg {
    height: 190px;
    width: auto;
    margin-bottom: 6px;
}

.trade{
    height: 45px;
    width: auto;
    margin-bottom: -8px;
}




/*--------------------------- Desktop Regular size ----------------------------------*/
@media only screen and (max-width: 1150px) { 
    
    
/*----------
width and height settings
------------*/
.width-30{
    width: 25%;
}


.width-70{
    width: 76%;
}



/*-----------------
img settings
-----------------*/

.trade{
    height: 40px;
    width: auto;
    margin-bottom: -8px;
}
    
}


/*--------------------------- Desktop Regular size ----------------------------------*/
@media only screen and (max-width: 950px) { 
    
    
/*----------
width and height settings
------------*/
.width-30{
    width: 25%;
}


.width-70{
    width: 76%;
}

    
/*-----------------
img settings
-----------------*/
    svg {
    height: 140px;
    margin-bottom: 3px;
}
    
.trade{
    height: 30px;
    width: auto;
    margin-bottom: -8px;
}
       
    
}





/*--------------------------- Desktop Regular size ----------------------------------*/
@media only screen and (max-width: 900px) { 

    
  
    
    
/*-----------------
flexbox settings
-----------------*/
    
    .flex-to-column{
        display: flex;
        flex-direction: column-reverse;
    }
    
    
    
    .items-end-to-center {
    align-items: center;
}
    
    
  
    
        
/*----------
width and height settings
------------*/
.width-30{
   width: -webkit-fill-available;
    height: 20vh
}


.width-70{
   width: -webkit-fill-available;
    height: 80vh
}
    
    
    
/*----------
margin padding settings
------------*/
.padding-25{
    padding: 8%;
}
    
  
/*-----------------
img settings
-----------------*/
    svg {
    width: 160px;
    height: auto;
    margin-bottom: 3px;
}
    
.trade{
    width: 280px;
    height: auto;
    margin-bottom: -8px;
}
}




/*--------------------------- Desktop Regular size ----------------------------------*/
@media only screen and (max-width: 770px) { 

    
  
    
    
/*-----------------
flexbox settings
-----------------*/
    
    .flex-to-column{
        display: flex;
        flex-direction: column-reverse;
    }
    
    
    
    .items-end-to-center {
    align-items: center;
}
    
    
  
    
        
/*----------
width and height settings
------------*/
.width-30{
   width: -webkit-fill-available;
    height: 25vh
}


.width-70{
   width: -webkit-fill-available;
    height: 75vh
}
    
    
    
/*----------
margin padding settings
------------*/
.padding-25{
    padding: 8%;
}
    
  
/*-----------------
img settings
-----------------*/
    svg {
    height: 120px;
    margin-bottom: -1px;
}
    
.trade{
    height: 28px;
    width: auto;
    margin-bottom: -8px;
}
}