/**
 * Basic CSS Media Query Template
 * TODO: I should probably use Sass...
 * Author: Michael Vieth
 * ------------------------------------------
 *  Responsive Grid Media Queries - 1280, 1024, 768, 480
 *   1280-1024   - desktop (default grid)
 *   1024-768    - tablet landscape
 *   768-480     - tablet 
 *   480-less    - phone landscape & smaller
 * --------------------------------------------
 */
 .the_float {
    background-color: #FFFFFF;
    border-radius: 20px;
     margin-top: -180px; 
    width: 80%;
}

.main_cont {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid black; /* for visualization */
    height: 100vh;
    overflow:scroll;
  }
.that_float {
    background-color: #FFFFFF;
    border-radius: 20px;
    margin-top: 0px;
    width: 80%;
    height: 98vh;
    overflow-y: scroll;
    font-family: 'Times New Roman', Times, serif;
    font-size: 14px;
}
.sechead1 {
	font-size: 38px;
	font-weight: 600;
	font-family: inherit;
	color: #DEE0FF;
}
.banner_desc
{
    z-index: 2 !important;
    position: absolute;
    color: #FFFFFF;
    margin-top: 200px;
}
.karibu,.banner_body,.banner_footing{ padding-left: 3vw;}
.c_button{ margin-left: 3vw;}
 @media all and (min-width: 1024px) and (max-width: 1280px) {
    .banner_footing
    {
        font-family: sora, sans-serif;
    color: #c5c1c1;
    display: flex;
    font-size: 20px;
    width: 40vw;
    
    }
    .banner_body
{
font-family: sora, sans-serif;
color: #FFFFFF;
font-size: 38px;
font-weight: bold;
display: flex;
width: 50vw;


}
._services_desc {
	background-color: #fff;
	padding: 30px 30px 20px;
	margin: -50px 20px 0;
	z-index: 99;
	position: relative;
    font-family: "poppins", sans-serif;
    height:250px;
}

.kontent
{
        font-size: 14px;
        color: gray;

}
.mg5{

margin: 5rem;    
}
.mg5_spec {
    margin: 1.5rem;
}
.lowertitle {
	font-size: 14px;
}
.the_float {
    background-color: #FFFFFF;
    border-radius: 20px;
     margin-top: -180px; 
    width: 100%;
}
.sechead1 {
	font-size: 28px;
	font-weight: 600;
	font-family: inherit;
	color: #DEE0FF;
}
  }

 @media all and (min-width: 768px) and (max-width: 1024px) { 
    .banner_footing
    {
        font-family: sora, sans-serif;
    color: #c5c1c1;
    display: flex;
    font-size: 20px;
    width: 40vw;
    
    
    }
    .banner_body
{
font-family: sora, sans-serif;
color: #FFFFFF;
font-size: 38px;
font-weight: bold;
display: flex;
width: 50vw;


}
._services_desc {
	background-color: #fff;
	padding: 15px 30px 20px;
	margin: -50px 10px 10px;
	z-index: 99;
	position: relative;
	font-family: "poppins", sans-serif;
	height: 210px;
}

.kontent
{
        font-size: 13px;
        color: gray;

}
.mg5{

    margin: 1.5rem;    
    }
.mg5_spec {
        margin: 1.5rem;
    }

.the_float {
	background-color: #FFFFFF;
	border-radius: 20px;
	/* margin-top: -180px; */
	width: 100%;
}
.sechead1 {
	font-size: 28px;
	font-weight: 600;
	font-family: inherit;
	color: #DEE0FF;
}
 }
 
 @media all and (min-width: 480px) and (max-width: 768px) { 
    .banner_footing {
        font-family: sora, sans-serif;
        color: #c5c1c1;
        display: flex;
        font-size: 14px;
        width: 80vw;
    }
    .banner_body {
        font-family: sora, sans-serif;
        color: #FFFFFF;
        font-size: 20px;
        font-weight: bold;
        display: flex;
        width: 50vw;
    }
    .kontent
    {
            font-size: 12px;
            color: gray;
    
    }
    ._services_desc {
        background-color: #fff;
        padding: 15px 30px 20px;
        margin: -50px 20px 10px;
        z-index: 99;
        position: relative;
        font-family: "poppins", sans-serif;
        height: 210px;
    }
    .mg5{

        margin: 0.5rem;    
        }
        .the_float {
            background-color: #FFFFFF;
            border-radius: 20px;
             margin-top: 20px;
            width: 100%;
        }
 }
 
 @media all and (max-width: 480px) {
    .sechead1 {
        font-size: 28px;
        font-weight: 600;
        font-family: inherit;
        color: #DEE0FF;
    }
    .banner_footing {
        font-family: sora, sans-serif;
        color: #c5c1c1;
        display: flex;
        font-size: 14px;
        width: 90vw;
    }
    .banner_body {
        font-family: sora, sans-serif;
        color: #FFFFFF;
        font-size: 14px;
        font-weight: bold;
        display: flex;
        width: 80vw;
    }
    .kontent
    {
            font-size: 12px;
            color: gray;
    
    }
    ._services_desc {
        background-color: #fff;
        padding: 15px 30px 20px;
        margin: 00px 00px 10px;
        z-index: 99;
        position: relative;
        font-family: "poppins", sans-serif;
        height: 180px;
    }

    .mg5{

        margin: 0rem;    
        }
        .the_float {
            background-color: #FFFFFF;
            border-radius: 20px;
            margin-top: 0px;
            width: 100%;
        }
        .that_float {
            background-color: #FFFFFF;
            border-radius: 20px;
            margin-top: 0px;
            width: 100%;
            height: 98vh;
            overflow-y: scroll;
        }
  }
 
 
 /* Portrait */
 @media screen and (orientation:portrait) { /* Portrait styles here */ }
 /* Landscape */
 @media screen and (orientation:landscape) { /* Landscape styles here */ }
 
 
 /* CSS for iPhone, iPad, and Retina Displays */
 
 /* Non-Retina */
 @media screen and (-webkit-max-device-pixel-ratio: 1) {
 }
 
 /* Retina */
 @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
 only screen and (-o-min-device-pixel-ratio: 3/2),
 only screen and (min--moz-device-pixel-ratio: 1.5),
 only screen and (min-device-pixel-ratio: 1.5) {
 }
 
 /* iPhone Portrait */
 @media screen and (max-device-width: 480px) and (orientation:portrait) {
 } 
 
 /* iPhone Landscape */
 @media screen and (max-device-width: 480px) and (orientation:landscape) {
 }
 
 /* iPad Portrait */
 @media screen and (min-device-width: 481px) and (orientation:portrait) {
 }
 
 /* iPad Landscape */
 @media screen and (min-device-width: 481px) and (orientation:landscape) {
 }