/* ------------------------------------------------------------ Heroes, Cards, and Features ------------------------------------------------------------ */



/* -------------------- SECTION: Heroes -------------------- */


/* ----- Vertical Heroes ----- */
.hero_Centered{
    display: flex;
    flex-direction: column;
    align-items: center;

    height: fit-content;
    width: calc(90% - 80px); max-width: calc(1200px - 80px); min-width: calc(1000px - 80px);

    margin: 20px 0;
    padding: 40px;

    /* border-radius: 10px; */
    /* border: 2px solid red; */
}



/* ----- Horizontal Heroes ----- */

.hero_Horizontal{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;

    /* justify-self: flex-start; */
    /* align-self: flex-start; */

    width: calc(90% - 80px); max-width: calc(1200px - 80px); min-width: calc(1000px - 80px);
    height: fit-content;
    min-height: 250px;

    margin: 40px 0;
    padding: 60px 40px;

    /* border: 1px solid red; */
}
.hero_Horizontal .imageBin{
    display: flex;
    justify-content: center;
    align-items: center;
    object-fit: contain;

    /* align-self: flex-start; */
    

    width: calc(48% - 20px);

    margin: 0 10px;

    /* border: 1px solid red; */
}
.hero_Horizontal .heroImage{
    object-fit: contain;
    width: calc(100% - 20px - 10px); max-width: calc(100% - 20px - 10px); min-width: calc(100% - 20px - 10px);
    height: 100%; min-width: 100%; max-width: 100%;
    margin: 5px;

    align-self: flex-start;
    /* justify-self: flex-start; */
    /* border: 4px solid yellow; */
}
.hero_Horizontal .contentBin{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    /* align-self: flex-start; */
    
    width: 50%; min-width: 350px; max-width: 700px;

    margin: 0;

    /* border: 1px solid green; */
}






.hero2{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    /* align-items: center; */

    height: fit-content;
    width: 100%; max-width: 1400px;

    margin: 0;
    /* border: 2px solid red; */
}
.hero2 img{
    max-width: 40%;
    /* max-height: 40rem; */
    object-fit:cover;
    margin: 0;
}
.hero3{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: fit-content;
    width: 60rem;   
    height: 20rem;

    border: 2px solid lightgray;
    border-radius: 4px;
    background-color: whitesmoke;
    box-shadow: 5px 5px 5px -5px black;
}
.hero3 h1{
    color: var(--primary);
}
.hero3 h4{
    width: 50rem;
}

/* Standard hero bins */
.heroBinHoriz{
    display: flex;
    flex-direction: column;
    align-items: center;
    
    /* justify-content: space-evenly; */
    margin: 0;

    width: 40%;
    max-width: 600px;
    /* border: 2px solid blue; */
}



/* ---------- Simple Cards ---------- */
.simpleCardMedium{
    display: flex;
    flex-direction: column;

    width: 44%; min-width: calc(350px - 40px); max-width: calc(650px - 40px);
    height: fit-content; min-height: 300px;

    padding: 20px;
    margin: 0px;
    margin-bottom: 20px;
    margin-right: 20px;

    border: 1px solid lightgray;
}


/* ---------- Cards (OLD) ---------- */
.cardSmall{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 300px;
    height: 150px;

    margin: 1rem;
    padding: 10px;

    color: black;
    border: 2px solid lightgray;
    border-radius: 10px;
    box-shadow: 5px 5px 10px -5px black;
    background-color: white;

    transition: 0.8s ease-in-out;
}
.cardMed{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 250px;
    height: 250px;

    margin: 10px;
    padding: 10px;

    color: black;
    border: 2px solid lightgray;
    border-radius: 10px;
    box-shadow: 5px 5px 10px -5px black;
    background-color: white;

    transition: 0.8s ease-in-out;
}
.cardMed .cardHeader{
    display: flex;
    align-items: center;
    /* justify-content: space-evenly; */

    width: 100%;
    /* border: 1px solid red; */
}
.cardMed .cardHeader h6{
    margin: 0 5px;
    font-size: 22px;
    /* border: 1px solid green; */
}
.cardMed .cardIcon{
    width: 50px;
    height: 50px;
}
.cardMed .cardBody{
    height: 100%;
    margin: 2px 0;
}
.cardMed .cardBody p {
    font-size: 14px;
    text-align: left;

    /* border: 1px solid blue; */
}


/* ------------------------------ Mykro App Cards and Thumbnails ------------------------------ */

/* -------------------- App Cards -------------------- */

/* ----- Small Card ----- */
.MykroAppCardSmall{
    display: flex;
    /* align-items: center; */
    user-select: none;

    width: 250px;
    height: 200px;

    padding: 5px;
    margin: 0px;
    margin-bottom: 20px;
    margin-right: 20px;

    /* color: white; */
    color: black;
    background-color: white;
    /* background-color: var(--primary); */
    /* border: 4px solid var(--primary); */
    border: 2px solid lightgray;
    /* border-radius: 5px; */

    transition: 0.1s ease-in-out;

}
.MykroAppCardSmall:hover{
    /* cursor: pointer; */
    background-color: var(--primary_whisp);
}
.MykroAppCardSmall .icon {
    width: 75px;
    max-height: 75px;

    margin-right: 10px;
}
.MykroAppCardSmall .vertBin{
    height: 50px;
    width: fit-content;
    max-width: 135px;
    margin: 10px 0 0 10px;
}

/* ----- Medium Card ----- */
.MykroAppCardMedium{
    display: flex;
    flex-direction: column;
    align-items: start;

    user-select: none;

    width: calc(300px - 40px - 2px); min-width: calc(300px - 40px - 2px); max-width: calc(300px - 40px - 2px);
    height: calc(300px - 10px - 2px);

    padding: 0;
    padding: 20px;
    margin: 0 20px;
    /* margin-right: 20px; */

    /* background-color: whitesmoke; */
    border: 1px solid lightgray;
    /* border-radius: 5px; */

    transition: 0.25s ease-in-out;

}
.MykroAppCardMedium .imageBin{
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 150px; max-height: 150px;
    /* border: 1px solid red; */
}
.MykroAppCardMedium .img{
    object-fit: contain;
    max-width: calc(150px - 2px);     
    max-height: calc(150px - 2px);
    border: 1px solid lightgray;
    border-radius: 10px;
}
.MykroAppCardMedium:hover{
    cursor: default;
    /* height: 400px; */
    background-color: whitesmoke;
}
 .expandMediumCard {
    height: calc(400px - 10px - 2px);
    /* min-width: 300px; */
 }

/* ----- Large Card ----- */
.MykroAppCardLarge{
    display: flex;
    flex-direction: column;
    align-items: center;
    /* user-select: none; */


    width: 80%; max-width: calc(1200px - 22px); min-width: calc(750px - 22px);
    height: fit-content; min-height: 500px;

    padding: 20px 10px;
    margin: 15px 0;

    /* background-color: whitesmoke; */
    border: 1px solid lightgray;
    border-radius: 5px;
    /* border: 4px solid green; */
}
.MykroAppCardLarge .contentContainer{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    width: 100%;
    height: fit-content;

    /* border: 1px solid green; */

}
.MykroAppCardLarge .contentBin{
    justify-content: center;
    align-items: center;
    height: fit-content;
    width: 62%; max-width: 62%; 

    padding: 10px;
    /* border: 1px solid blue; */
}
.MykroAppCardLarge .imageBin{
    display: flex;
    flex-direction: column;

    align-items: center;

    object-fit: contain;
    height: fit-content;
    width: 35%; max-width: 35%;

    /* border: 1px solid red; */
}
.MykroAppCardLarge .imageBin .image{
    object-fit: contain;
    max-height: 200px;
}

.MykroAppCardLarge .featuresBin{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;

    width: calc(100%);
    height: fit-content;

    padding: 0;

    /* transition: 0.2s ease-in-out; */
}
.MykroAppCardLarge .featuresListBin{
    display: flex;
    flex-direction: column;

    width: calc(100%);
    height: fit-content;

    padding: 0;
    margin: 10px 0 0;

    border-radius: 10px;
}
.MykroAppCardLarge .featuresListBin:hover{
    cursor: default;
}
.MykroAppCardLarge .featuresListItem{
    display: flex;
    align-items: center;
    height: fit-content;

    border-bottom: 1px solid lightgray;

}
.MykroAppCardLarge .featureTitle{
    text-align: left;
    font-size: 14px;
    line-height: 22px;

    height: calc(30px - 8px);
    width: calc(250px - 8px);

    padding: 4px;
    border: none;


}
.MykroAppCardLarge .featureDescription{
    display: flex;
    justify-content: center;
    align-items: center;

    text-align: center;
    font-size: 14px;
    line-height: 30px;

    height: 30px;
    width: calc(50% - 125px - 2px);

    border: none;
    /* border: 1px solid lightgray; */
}
.MykroAppCardLarge .middleBlock{
    border-left: none;
    border-right: none;
}
.MykroAppCardLarge .noTop{
    border-top: none;
}


/* -------------------- App Thumbnails -------------------- */

.MykroAppThumbnail{
    display: flex;
    /* align-items: center; */
    user-select: none;

    width: 250px;
    height: 75px;

    padding: 5px;
    margin: 0px;
    margin-bottom: 20px;
    margin-right: 20px;

    /* color: white; */
    color: black;
    background-color: white;
    /* background-color: var(--primary); */
    /* border: 4px solid var(--primary); */
    border: 2px solid lightgray;
    /* border-radius: 5px; */

    transition: 0.1s ease-in-out;
}
/* .MykroAppThumbnail:hover{
    cursor: pointer;
    background-color: var(--secondary_lite);
} */
.MykroAppThumbnail .icon {
    width: 75px;
    max-height: 75px;

    margin-right: 10px;

    border-radius: 10px;
}
.MykroAppThumbnail .vertBin{
    height: fit-content;
    width: fit-content;
    max-width: 135px;
    margin: 10px 0 0 10px;
}

.thumbnailSelected{
    background-color: var(--secondary_lite);
    border: 1px solid var(--primary);
}

/* ------------------------------ Features and Pricing ------------------------------ */

/* ---------- Horizontal scroll bin for cards ---------- */
.featureBin1{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;

    overflow-x: scroll;

    padding: 20px 5px;
    margin: 20px 0;

    width: fit-content; max-width: 90%;
    height: fit-content;
    min-height: 400px;

    /* background-color: white; */
    /* border: 1px solid gray; */
}


/* ---------- Feature cards ---------- */
.featureCardSmall{
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;

    min-width: 200px;
    height: 250px;

    /* padding: 1rem; */
    margin: 0 25px;

    background-color: whitesmoke;
    /* background-color: var(--primary); */
    border: 2px solid lightgray;
    border-radius: 10px;

    transition: 0.3s ease-in-out;
}
.featureCardSmall:hover{
    height: 325px;
    min-width: 250px;
}

/* ---------------------------------------- SECTION: Pricing cards ---------------------------------------- */

/* ---------- Standard Pricing Card ---------- */

/* ------ Card Body ------ */
.pricingCard1{
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;

    max-width: 350px; min-width: 350px;
    height: 800px;

    /* padding: 1rem; */
    margin: 0 20px;
    padding: 0 25px;

    background-color: white;
    /* background-color: var(--primary); */
    border: 2px solid white;
    /* border-radius: 10px; */

    transition: 0.1s ease-in-out;
}
.pricingCard1:hover{
    cursor: default;
    border: 2px solid var(--primary);
    background-color: whitesmoke;
    /* min-width: 405px; */
    /* height: 555px; */
}

.cardBannerFull{
    font-size: 20px;
    line-height: 38px;
    text-align: center;
    height: 40px;
    /* height: fit-content; */
    width: calc(100%);

    padding: 2px 0;
    margin: 0;

    /* border: 1px solid red; */
}
.pricingCardDescription{
    min-height: 60px; max-height: 60px;

    /* border: 1px solid blue; */
}

.pricingCard1 .bestForBin{
    height: 200px;
    /* border: 1px solid red; */
}
.pricingCard1 .includesBin{
    height: 100px;
    /* border: 1px solid blue; */
}










/* --------------- Feature Bin for Plan Features --------------- */
.pc_featureContainer1{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;

    /* overflow-x: scroll; */

    width: calc(100%); 
    height: fit-content;

    padding: 0;

    border: 1px solid red;
}
.pc_featureContainer1 .expandableBin_Trigger{
    display: flex;

    width: calc(100% - 40px);

    padding: 5px 20px;

    transition: 0.2s ease-in-out;
}
.pc_featureContainer1 .expandableBin_Trigger:hover{
    cursor: pointer;
    background-color: lightgray;

}
.pc_featureContainer1 .expandableBin_ContentBin{
    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;
    /* overflow-x: scroll; */

    width: calc(100%); min-width: calc(100%);
    height: fit-content;



    transition: 0.2s ease-in-out;
}
.pc_featureContainer1 .expandableBin_Content{
    display: none;
    /* justify-content: center;
    align-items: center; */
    overflow-x: scroll;

    width: 100%; min-width: 100%;

    /* border:1px solid red; */
    border-radius: 10px;
}

.pc_featureContainer1 .featuresListBin{
    display: block;

    width: fit-content;
    height: fit-content;

    padding: 0;
    margin: 0;
    margin-left: 10px;

}
.pc_featureContainer1 .featuresListItem{
    display: flex;
    align-items: center;

    width: 100%;
    height: fit-content;

    border-bottom: 1px solid lightgray;
}

.pc_featureContainer1 .featureTitle{
    text-align: left;
    font-size: 14px;
    line-height: 22px;

    height: calc(30px - 8px);
    width: calc(200px - 8px); min-width: calc(200px - 8px);

    padding: 4px;


}
.pc_featureContainer1 .featureDescription{
    text-align: center;
    font-size: 14px;
    line-height: 30px;

    height: 30px;
    width: 250px;

    /* border: 1px solid lightgray; */
}

.pc_featureContainer1 .middleBlock{
    border-left: none;
    /* border-right: none; */
}
.pc_featureContainer1 .endBlock{
    border-left: none;
    /* border-right: none; */
}
.pc_featureContainer1 .noTop{
    border-top: none;
}

/* ------------------------------ Clickable Link Cards ------------------------------ */

.linkCardListBin{
    display: flex;

    flex-wrap: wrap;

    width: 100%;

    padding: 0;
    margin: 5px 0;

    /* border: 1px solid red; */
}

.linkCardSmall_ListItem{
    display: flex;
    
    font-size: 14px;
    line-height: 30px;
    text-decoration: none;
    color: var(--primary);

    width: 250px;
    height: 30px;

    padding: 5px;
    margin: 5px;

    border: 1px solid lightgray;
}
.linkCardLarge_ListItem{
    display: flex;
    flex-direction: column;
    
    /* font-size: 14px;
    line-height: 30px; */
    text-decoration: none;
    /* color: var(--primary); */
    color: black;

    width: 550px;
    height: fit-content;

    padding: 5px;
    margin: 5px;

    border: 1px solid lightgray;
}

.linkCardLarge_ListItem:hover{
    cursor: pointer;
    background-color: var(--bg7);
}



/* ------------------------------ Expandable Bins ------------------------------ */

.expandableBinTitle{
    display: flex;
    flex-direction: column;
    align-items: start;

    width: calc(100% - 20px);
    height: calc(65px - 20px);
    /* height: fit-content; */

    padding: 10px;

    transition: 0.2s ease-in-out;
}
.expandableBinTitle:hover{
    cursor: pointer;
    background-color: var(--primary_whisp);
}

.expandableBinContent{
    display: none;

    width: 100%;
    height: fit-content;

    transition: 0.2s ease-in-out;

    /* border: 1px solid red; */
}








