@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;700;800;900&display=swap');

:root
{
    /* Colo Variables */
    --MNBlueTheme: #84b1f5;
    --MNBlue2Shade: #4481DB;
    --MNGreenTheme: #009245;
    --MNGrayTheme: #707070;
    --MNDarkerGray: #4D4D4D;
    

    /* Font size variables */
    --MNtinyfonts: 12px;
    --MNSmallFonts: 13px;
    --MNheadings: 34px;
    --subHeading: 50px;

    /* Transition times */
    --normalTrans: 0.15s ease-out;
    --easedInTrans: 0.3s ease-in;
    --fastTrans: 0.2s ease;
}

html
{
    scroll-behavior: smooth;
}

*
{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: Montserrat, Sans-serif;
}

a
{
    text-decoration: none;
}

.hide
{
    display: none;
}

.pageTitle
{
    margin: 10px auto;
    text-align: center;
    
}

.pageTitle h1
{
    font-size: 50px;
    font-weight: 900;
    color: var(--MNDarkerGray);
}


.topBar
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 50px;
    
    background-image: linear-gradient(45deg,rgba(255, 255, 255, 0),rgba(255, 255, 255, 0)),url(./img/Details\ Bg.jpg);
    background-size: 100%;
    background-position: center;
    
    animation: zoom 50s infinite ease-out;
}

.topBar > a > svg
{
    height: 85px;
}

.topNavigations
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.topNavs a
{
    font-size: var(--MNtinyfonts);
    font-weight: 500;
    color: var(--MNGrayTheme);
    padding: 5px;
    transition: font-weight var(--normalTrans), color var(--normalTrans);
}

.topNavs a:hover
{
    color: var(--MNBlue2Shade);
    
}

.topNavs
{
    margin-bottom: 5px;
}

.topNavButton
{
    border: none;
    padding: 15px 25px;
    font-weight: 600;
    font-size: var(--MNtinyfonts);
    background-color: var(--MNBlue2Shade);
    color: white ;
    border-radius: 5px;
    transition: background-color var(--normalTrans);
}

.topNavButton:hover
{
    background-color: var(--MNGreenTheme);
    cursor: pointer;
}

.socials
{
    padding-top: 10px;
}

.socials *
{
    margin-right: 6px;
}

.socials a
{
    color: var(--MNBlue2Shade);
    font-size: var(--MNSmallFonts);
}

.socials a > i
{
    transition: var(--fastTrans);
}

.socials a:hover > i
{
    transform: scale(150%);
}


/* The navigations */
.ribbonTitle
{
    display: none;
}

.navigation
{
    /* position: relative; */
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(45deg,rgba(0, 117, 226, 0.938),rgba(16, 34, 95, 0.767)),url(./img/cann.jpg);
    background-size: 100%;
    background-position: center;
    background-attachment: fixed;
    height: 50px;
    position: sticky;
    top: 0;
    z-index: 100;

    box-shadow: 0 15px 30px -10px #000;
}

.navigation ul a
{
    color: rgb(255, 255, 255);
    font-size: var(--MNSmallFonts);
    font-weight: 600;

}

.navigation ul li
{
    list-style: none;
    display: inline-block;
    padding: 17px;
    letter-spacing: 0.3px;
    transition: var(--normalTrans);
}

.navigation ul i
{
    position: absolute;
    top: -5px;
    opacity: 0%;
    font-size: 17px;
    transform: translateX(-58px);
    color: var(--MNDarkerGray);
    transition: var(--fastTrans);
}

.navigation ul li:hover
{
    background-color: var(--MNGreenTheme);
    /* box-shadow: 0 0 10px -5px var(--MNDarkerGray); */
}

#active-tab
{
    background-color: var(--MNBlueTheme);
    box-shadow: 0 0 10px -5px var(--MNDarkerGray);
}

.navigation ul li:hover ~ i
{
    opacity: 100%;
    top: -30px;
}

.hiddenNav
{
    display: none;
}

#partnerIcon
{
    transform: translateX(-67px);
}

#contactIcon
{
    transform: translateX(-68px);
}

#privateIcon
{
    transform: translateX(-73px);
}

/* The burger style and animations */
.menuIcons
{
    position: absolute;
    right: 30px;
    display: none;
}

.menuIcons:hover
{
    cursor: pointer;
}

.menuIcons > .bars
{
    background-color: #fff;
    height: 4px;
    width: 20px;
    margin-bottom: 4px;
    border-radius: 50px;
    transition: var(--fastTrans);
}

.clickedBurger
{
    transition: var(--normalTrans);
}

.clickedBurger > #bar1
{
    transform: rotate(45deg) translateY(5px);
}

.clickedBurger > #bar2
{
    transform: rotate(-45deg) translateY(-5px);
}


/* The search bar */
.search
{
    position: absolute;
    left: 30px;
}

#searchBox
{
    border: none;
    background-color: var(--MNBlueTheme);
    height: 35px;
    border-radius: 4px;
    width: 230px;
    color: white;
    padding-left: 20px;
    font-weight: 600;
}

.search >input::placeholder
{
    color: rgba(255, 255, 255, 0.356);
}

.search >input:focus
{
    outline: none;
}


/* HomeBG */
.homeBG
{
    height: 230px;
    background-image: linear-gradient(45deg,rgba(255, 255, 255, 0),rgba(255, 255, 255, 0)),url('./img/cann.jpg');
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    transition: background 0.6s ease-out;
}

.bg2
{
    background-image: linear-gradient(45deg,rgba(255, 255, 255, 0),rgba(255, 255, 255, 0)),url('./img/cann_plant1.jpg');
}

.bg3
{
    background-image: linear-gradient(45deg,rgba(255, 255, 255, 0),rgba(255, 255, 255, 0)),url('./img/cann_plant2.jpg');
}

.homeBG:hover
{
    background-size: 102%;
}

.homeBgText
{
    padding: 30px;
    margin-left: 90px;
}

.homeBgText h1
{
    font-size: 70px;
    line-height: 3.4rem;
    letter-spacing: -3px;
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
}

#greeting
{
    opacity: .7;
}

.homeBgText p
{
    font-weight: 800;
    font-size: var(--MNSmallFonts);
    color: rgba(255, 255, 255, 0.753);
}

/* Page and Org Introduction */
.orgIntro
{
    background-image: linear-gradient(45deg,rgba(255, 255, 255, 0),rgba(255, 255, 255, 0)),url(./img/Details\ Bg.jpg);
    background-size: 100%;
    background-position: center;
    animation: zoom 20s infinite ease-out;
}

/* Animations */
/* Background Animations */
@keyframes zoom
{
    0%
    {
        background-size: 100%;
    }

    50%
    {
        background-size: 200%;
    }

    100%
    {
        background-size: 100%;
    }
}

/* Button Click animation */
.clickedItem
{
    animation: clicked 0.7s ease-out 1s ;
}

@keyframes clicked 
{
    0%
    {
        transform: scale(100%);
    }

    50%
    {
        transform: scale(80%);
    }

    100%
    {
        transform: scale(100%);
    }
}

.imgInfoTab
{
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap-reverse;
}

.sideImg
{
    height: 300px;
}

.info
{
    padding: 20px;
    max-width: 500px;
}

#welcome
{
    text-align: center;
    font-size: var(--MNSmallFonts);
    font-weight: 800;
    color: var(--MNGreenTheme);
}

.headings
{
    text-align: center;
    font-size: var(--subHeading);
    font-weight: 800;
    color: var(--MNDarkerGray);
    letter-spacing: -2px;
    margin-bottom: 20px;
}

.headSPan
{
    font-weight: 200;
}

.pagePara
{
    font-size: var(--MNSmallFonts);
    font-weight: 400;
    color: var(--MNDarkerGray);
    line-height: 20px;
    letter-spacing: 0.3px;
}

.infoBtns
{
    display: flex;
    align-self: center;
    justify-content: center;
    padding: 20px;
}

.infoBtns > *
{
    margin-right: 20px;
}

.infoBtns > a > button
{
    border: none;
    padding: 15px;
    max-width: 170px;
    font-size: var(--MNtinyfonts);
    font-weight: 400;
    border-radius: 5px;
    transition: transform 0.2s ease-out;
}

#learnBtn
{
    background-color: transparent;
    border: 1px solid var(--MNGreenTheme);
    color: var(--MNGreenTheme);
}

#learnBtn:hover
{
    background-color: var(--MNGreenTheme);
    color: #fff;
    cursor: pointer;
}

#appointBtn
{
    background-color: var(--MNGreenTheme);
    color: #fff;
}

#appointBtn:hover
{
    background-color: var(--MNBlue2Shade);
    cursor: pointer;
}

/* Values tab styling */
.values
{
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
  padding: 30px;
}



.vision
{
    background-image: linear-gradient(45deg,rgba(0, 117, 226, 0.938),rgba(16, 34, 95, 0.767)),url(./img/cann.jpg);
    background-size: 100%;
    background-position: center;
    background-attachment: fixed;
    min-width: 100%;
    color: #fff;
}

.vision h1
{
    font-weight: 900;
    color: #fff;
}

.vision .pagePara
{
    color: #fff;
}

/* Social Bar Styling */
.socialsBar
{
    background-color: var(--MNGreenTheme);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.socialsBar > *
{
    margin-right: 60px;
}

.socialsBar h1
{
    font-weight: 200;
    font-size: 30px;
}

.socialDes
{
    display: flex;
    align-items: center;
}

.socialDes p
{
    font-size: var(--MNtinyfonts);
    margin-left: 10px;
}

/* Products */
.productContainer
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.singleProduct
{
    width: 250px;
    height: 300px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2%;
    color: #fff;
    margin: 20px;
    transition: transform 0.3s ease;
    position: relative;
    z-index: 1;


    background-image: linear-gradient(45deg,rgba(0, 117, 226, 0.938),rgba(16, 34, 95, 0.767)),url(./img/PharmaSmaal.jpg);
    background-size: 100%;
    background-position: center;

}

.singleProduct:hover
{
    cursor: pointer;
    transform: scale(105%);
    background: linear-gradient(rgb(59, 131, 77),rgb(13, 114, 106));
}


.productTopic
{
    text-align: center;
    font-size: 12px;
}


.PackageName
{
    font-size: 30px;
    font-weight: 900;
    line-height: 25px;
}

.Proddesciption
{
    font-size: var(--MNSmallFonts);
    font-weight: 500;
    padding: 20px;
    text-align: justify;
    opacity: .7;
}




/* Contacts Bar styling */
.contactsTab
{
    background-color: var(--MNBlue2Shade);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.contactsTab > *
{
    margin-right: 30px;
}
.contactsTab h1
{
    font-size: 30px;
    font-weight: 200;
    color: #fff;
}

.buttonCombo
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.buttonCombo > a > button:hover
{
    cursor: pointer;
    color: var(--MNBlue2Shade);
    background-color: #fff;
    font-weight: 400;
}

.buttonCombo > a > button
{
    border: none;
    padding: 20px 50px;
    font-size: 18px;
    font-weight: 200;
    background-color: var(--MNBlueTheme);
    color: #fff;
    border-radius: 9px;
    box-shadow: 0 0 10px -5px var(--MNDarkerGray);
}

.buttonCombo p
{
    font-size: var(--MNtinyfonts);
    color: rgba(255, 255, 255, 0.438);
}

/* Footer */
.footerWrapper
{
    background-color: #000000;
    padding: 90px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.footerWrapper img
{
    height: 100px;
    margin-bottom: 20px;
}

.footerWrapper p
{
    font-size: 11px;
    letter-spacing: 0.6px;
    max-width: 190px;
    padding: 10px;
    line-height: 20px;
}

.footerWrapper h1
{
    font-weight: 900;
}

#navBottom
{
    font-weight: 400;
    margin-bottom: 20px;
}

#navBottom i
{
    margin-right: 10px;
}

#remarks
{
    max-width: 100vw;
    text-align: center;
    background-color: #000000;
    color: #fff;
    font-size: var(--MNtinyfonts);
}

.footColContainer a
{
    color: #fff;
    text-decoration: none;
}

/* Responsive Code -- Media Queries */
@media screen and (max-width:1000px) 
{
    .search
    {
        display: none;
    }    
}

@media screen and (max-width:800px)
{
    :root
    {
        --subHeading: 30px;
        --MNSmallFonts: 10px;
        --MNtinyfonts: 10px;
    }

    .pagePara
    {
        line-height: 15px;
        margin: 20px;

    }

    .infoBtns > button
    {
        width: 130px;
        margin-right: 5px;
    }

    .infoBtns
    {
        padding: 10px;
    }

    .topBar > a > svg
    {
        height: 50px;
    }

    .topNavs
    {
        display: none;
    }

    .socials
    {
        display: none;
    }
    .menuIcons
    {
        display: inline-block;
    }

   .navOptions
   {
       position: fixed;
       top: 0;
       left: 0;
       background-color: var(--MNBlue2Shade);
       width: 200px;
       display: flex;
       flex-direction: column;
        min-height: 100vh;
       transform: translateX(-5000px);
       transition: var(--normalTrans);
   }

   .hiddenNav
   {
       display: block;
   }

   .showNav
    {
        transform: translateX(0px);
    }

   .navigation ul i
   {
       display: none;
   }

   .navigation ul li
   {
       display: block;
   }

   .homeBG
   {
       height: 150px;
       background-size: cover;
   }

   .homeBG:hover
   {
       background-size: cover;
   }

   .homeBgText
   {
       margin-left: 10px;
   }

   .homeBgText h1
   {
       font-size: 30px;
       line-height: 25px;
   }

   #welcomeMsg
   {
       font-size: 9px;
   }

   .sideImg
   {
       height: 150px;
   }

   .serviceHighlights img
    {
        height: 200px;
    }

    .socialsBar h1
    {
        display: none;
    }

    .buttonCombo > a > button
    {
        width: 200px;
        height: 50px;
        padding: 5px;
        font-size: 10px;
        font-weight: 700;
    }

    .buttonCombo
    {
        margin: 10px auto;
    }

    .contactsTab
    {
        flex-direction: column;
    }

    .contactsTab h1
    {
        display: none;
    }

    .ribbonTitle
    {
        display: contents;
        font-weight: 800;
        color: #fff;
        letter-spacing: 0.8px;
    }

}

@media screen and (max-width:420px)
{
    .topBar > a > svg
    {
        height: 40px;
        margin-right: 10px;
    }

    .infoBtns > a > button
    {
        width: 150px;
    }
}

#hiddenLogo
{
    position: absolute;
    left: 70px;
    top: 0;
    opacity: .8;
    display: none;
}

.devider
{
    height: 0.7px;
    background: rgb(163, 163, 163);
    margin: 5px 20px;
}

#hiddenLogo > img
{
    height: 60px;
}