/* Section 1*/
#sect1 {
    display:flex;
}

#sect1Info {    
    max-width: 400px;
    display: flex;
    flex-direction:column;
    text-align:left;
    margin-left:70px;
}

#sect1Head {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight:800;    
    font-size: 60px;
    line-height: 73px;    
    text-transform: uppercase;
    text-align: left;
}

#sect1Sub {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 800;
    font-size: 16px;
    line-height: 73px;
    max-width:150px;
}

#sect1Design {
    background-image: url('/assets/index/sect1bg.png');
    background-size: cover;
    background-repeat: no-repeat;
    height: 692px;
    align-items: center;
    display: flex;    
}

/* Section 2*/

#sect2 {
    display: flex;
    background-image: url('/assets/index/sect2bg.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    flex-direction:column;
    padding-top:10px;    
}



#sect2Head {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 30px;
    text-transform: uppercase;
    max-width: 600px;
    margin: auto;
}

#sect2Row{
    display:flex;
    flex-direction:row;
}

#sect2Info {
    
    display: flex;
    flex-direction: column;
    text-align: left;
    color: #ffffff;
    text-align: center;
    align-content: center;
}



#sect2Sub {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 800;
    font-size: 16px;
    line-height: 73px;
    width: 50px;
    display: flex;
}

#sect2Design {
    height: 500px;
    align-items: center;
    display: flex;
}

#sect2img{
    margin-top: -100px;
    display: flex;
    flex-direction:column;
}

#sect2points{
    display:flex;
    flex-direction: column;
}

#sect2PointsHead{
    color: #ffffff;
    text-align: left;
    max-width:400px;
}

#sect2points > ul li {
    color: #ffffff;
    list-style-image: url('/assets/index/bulletpoint.png');
    background-repeat: no-repeat;
    vertical-align: top;
    padding-bottom: 10px;
    text-align: left;
    max-width: 400px;
}

#sect3{
    display: flex;
    flex-direction: column;
}

#sect3Info {
    
    display: flex;
    flex-direction: column;
    text-align: left;
    color: #000000;
    text-align: center;
    align-content: center;
    margin: 0 auto;
}

#sect3Head {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 30px;
    text-transform: uppercase;
    color: #000000;
    max-width: 600px;
    margin: auto;
}

#sect3Sub {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;    
    font-size: 16px;    
    max-width: 400px;
    display: flex;
    color: #000000;
    margin:0 auto;
}

.sectRow {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    justify-content:space-around;
}

.sect3BigBtn {
    width: 100%;
    height:120px;
    background-color: #ff7500;
    border-radius: 13px;
    display: flex;
    text-align:center;
    color: #ffffff;
    align-items: center;
    text-transform: uppercase;
    display: flex;
    margin-top:50px;
    font-size: 20px;
    font-weight: bold;
}


div.exBox {
    width: 400px;
    height: 530px;
    box-shadow: 0px 4px 4px rgb(224 224 224);
    border-radius: 20px 20px 20px 20px;    
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    margin-right: 20px;
    margin-bottom: 20px;
}

div.exBoxImg {
    width: 400px;
    height: 300px;    
    display: flex;
    background-repeat: no-repeat;
}

p.exHead {
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 800;
    font-size: 25px;
    margin-top:25px;
    margin-left:25px;
    text-align: left;
}

p.exSub {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    text-align: left;
    max-width: 300px;
    font-size: 12px;
    margin-top: 5px;
    margin-left: 25px;
}

div.exDiff{
    display: flex; 
    flex-direction: row;
    margin-left: 25px;    
}
.droplet {margin-left: -3px;}

#sect4{
    background-image:url('/assets/index/sect4bg.jpg');
    background-repeat: no-repeat;
    width:100%;
    height: auto;
    margin-top:50px;
    display:flex;
    flex-direction: row;
}

#sect4Cell1{
    display: flex;
    width: 50%;
    margin-left:10px;
}

#sect4Cell1Content {
    width: 480px;
    height: auto;
    padding-top:50px;
    padding-left:50px;
    padding-right:50px;
    box-shadow: 0px 4px 4px rgb(224 224 224);
    border-radius: 20px 20px 20px 20px;
    background-repeat: no-repeat;
    background-color: white;
    display: flex;
    flex-direction: column;
    margin:0 auto;
    margin-top:120px;

}

#sect4Cell2Content{
    margin-top: 120px;
    margin-left: 50px;
    max-width:450px;
    text-align: left;
    padding-left: 20px;
}

#sect4Cell1ContentHead{
    text-transform:uppercase;
    font-family:Montserrat;
    font-weight:800;
    font-size:25px;
    font-weight:bolder;
}

#sect4Cell1ContentPrice {
    color: #ff7500;
    font-size: 42px;
    font-family: Montserrat;
    font-weight: 800;
    vertical-align: middle;
    display: inline;
}

.sect4ContentPriceText {
    color: #000000;
    font-size: 32px;
    font-family: Montserrat;
    font-weight: 800;
    vertical-align: middle;
    line-height: normal;
    text-align: left;
    margin-left: 10px;
    display: inline;
}

.sect3MoreInfo{
    font-weight: bold;
    
}

.sect4Cell1PriceHolder{
    display:flex;    
}

#sect4Cell1Content > ul li {
    color: #000000;
    font-size: 13px;
    list-style-image: url('/assets/index/sect4bulletpoint.png');
    background-repeat: no-repeat;
    vertical-align: top;
    padding-bottom: 10px;
    text-align: left;
    max-width: 400px;
}
#sect4Cell2 {
    display: flex;
    flex-direction: column;
    width: 50%;
}

#sect4Head{
    font-size:45px;
    font-family: Montserrat;
    font-weight:800;
    color:#ffffff;
    text-transform: uppercase;
}

#sect4Sub {
    font-size: 16px;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 300;
    color: #ffffff;
}

#sect4Subtext{
    font-size:12px;
    color:#ffffff;
    margin-top:100px;
    font-style:italic;
}

@media (max-width: 800px) {    
    #sect1 {
        flex-direction: column;
    }

    #sect1Info{
        margin-left:10px;
        text-align: justify;
    }

    #sect1Head{
        font-size:50px;
    }

    #sect2 {
        flex-direction: column;
    }

    #sect2Row {
        flex-direction: column;
    }

    #sect2points {
        margin-left:10px;
    }

    #sect2img{
        width:100%;        
    }

    #sect4{
        flex-direction: column;
    }

    #sect4Cell1{
        width: 95%;
        margin-top: 10px;
        margin-left: auto;
        margin-right: auto;        
    }
    #sect4Cell1ContentPrice
    {
        font-size:32px;
    }
    .sect4ContentPriceText
    {
        font-size:28px;
    }

    #sect4Cell2{
        width:100%;
        margin: 0 auto;
    }

    #sect4Cell1Content {
        margin-top: 0px;
        margin: 0 auto;
        
        padding:20px;
        box-shadow: 2px 8px 8px rgb(224 224 224);
    }

    #sect4Cell2Content{
        
    }

    div.exBox{
        width:95%;
        margin: 0 auto;        
        margin-bottom:10px;
    }

    div.exBoxImg {
        background-size: contain;
        width: 100%;
    }
}