﻿

#SectionsBody
{
    margin:0;
}

/*---------------------------------------*/

.SectionsWrap
{
    width:100%;
    min-height:100vh;
    text-align:center;
    font-family:Arial;
    color:white;
    background:linear-gradient(160deg,#FF5572, #fe8096);
    box-sizing:border-box;
    display:table;
    padding:20vh 0;
}

.Sectionwrap a
{
    color:white;
    text-decoration:none;
    border:none;
}

/*---------------------------------------*/
.col
{
    width:18%;
    min-height:250px;
    display:inline-block;
    box-sizing:border-box;
    float:left;
    margin-left:2%;
}

    .col p
    {
        text-align: justify;
    }

.col span
    {
        font-size:25px;
        font-weight:bold;
        text-shadow:2px 2px 1px #999999;
    }


    .col hr
    {
        box-shadow:none;
        color:white;
        border:1px solid white;
    }

#col1
{
        margin-left:11%;
}

.Square
{
    color:white;
    width:100%;
    min-height:250px;
    display:inline-block;
    box-sizing:border-box;
    float:left;
    padding:40px 30px;
    margin-bottom:20px;
    transition-duration:0.5s;
}

    .Square:hover
    {
        transform:scale(1.05,1.05);
    }

#Section1
{
    border:5px solid White;
    border-radius:50px 50px 0 50px;
}

#Section2
{
    background-color:#FCDDE2;
    color:rgba(255,255,255,0);
    background-image:url("HomeImages/Strawberry.png");
    background-position:center;
    background-size:contain;
    background-repeat:no-repeat;
    border:5px dashed #FF5572;
    border-radius:50px 50px 50px 50px;
}

#Section3
{
    background-color:#B9EB68;
    border:5px solid #B9EB68;
    border-radius:0 50px 0 50px;
}

#Section4
{
    color:#FF5572;
    background-color:#FFFFFF;
    border:5px solid #FFFFFF;
    border-radius:0 50px 50px 50px;
}


/*----------------------------------------- Tablet --------------------------------------*/
@media screen and (min-width:481px) and (max-width: 768px)
{
    .SectionsWrap
    {
		min-height:50vh;
        background:linear-gradient(160deg,#FF5572, #fe8096);
        padding:5vh 0;
    }

    .col
    {
        width: 33%;
        margin-left: 2%;
    }

    #col2
    {
        clear:right;
    }

    #col1, #col3
    {
        clear:left;
        margin-left: 16%;
    }


    #col3, #col4
    {
        margin-top:40px;
    }

}


/*------------------------------------------- Mobile ------------------------------------*/
@media screen and (max-width: 992px)
{
    .SectionsWrap
    {
		min-height:30vh;
        background:linear-gradient(160deg,#FF5572, #fe8096);
        padding:5vh 0;
    }

    .col
    {
        width: 40%;
        min-height: 300px;
        margin-left: 5%;
        margin-top:30px;
    }

    #col1
    {
        margin-top:0px;
		margin-left:7%;
    }

	#col3
	{
		margin-left:7%;
	}

    .Square
    {
        color: white;
        min-height: 200px;
        padding: 20px 10px;
        margin-bottom: 20px;
    }
}