@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');




/* Root Color Codes */

:root{
   --corePink:     #e2716d;
   --corePinkFade: #e4aaa7;
   --corePinkSoft: #fcf5f4;
   --coreMidPink:  #cb433e;
   --coreDarkPink: #6c0225;
   --coreWhite:    white;
   --coreBlack:    black;
   --coreRed:      rgb(233,13,13);
   --coreGrey:     #acabab;
   --coreGreySoft:  #d3d3d3;
   --coreOrange:   #FFA500;
   --coreOrangeFade: #ebb161;
   --coreOrangeSoft: #fff4df;
   --coreMidOrange:  #fb9f21;
   --coreDarkOrange: #311c06;
   --coreDarkGreen: green;
  }





.divider {

  max-width: 100%;
  height: 2px;
  background-color: rgb(246,247,247);

}

.dividers {

  max-width: 100%;
  height: 10px;
  background-color: rgb(246,247,247);

}

/* btn-outline colors */

.btn-outline{

  background-color: Red;
  color: White;
  border-color: black;
  border-width: 2px;
  
  transition: opacity .15s;

  
}



.btn-outline:hover{

    background-color: var(--coreDarkGreen);
    color: white;
    border-color: var(--coreRed); 
   

}


.btn-outline:hover:active{

    background-color: var(--coreOrange); 
    color: black;
    border-color: black

}


/* Menu buttons Red/Black */

.btn-menu{

  background-color: var(--coreRed);
  color: white;
  border-radius: 0;
  height: 50px;
  width: 14%;
  font-size: x-large;
  
  
}

.btn-menu:hover{

  background-color: var(--coreBlack);
  color: white;
  border-color: var(--coreMidPink);  
  
}


.btn-menu:hover:active{

  background-color: var(--coreBlack);
  color: white;
  border-color: var(--coreMidPink);   

}

/* Drop-down main menu =dropdown-menu*/

.dropdown-menu{

  background-color: var(--coreBlack);
  color: White;
  border-color: var(--coreBlack); 
  border-radius: 0;
  height: 50px;
  width: 14%;
  
  
  
}

.dropdown-menu:hover{
  

  background-color: var(--coreBlack);
  color: White;
  border-color: var(--coreBlack); 
  border-radius: 0;
  height: 50px;
  width: 14%;
  
  
}

.dropdown-menu:active{
  

  background-color: var(--coreBlack);
  color: White;
  border-color: var(--coreBlack); 
  border-radius: 0;
  height: 50px;
  width: 14%;
  

}

/* Drop-down submenu =dropdown-item*/

.dropdown-item{

  background-color: var(--coreBlack);
  color: White;
  border-color: White; 
  border-radius: 0;
  height: 50px;
  
  
}


.dropdown-item:hover{
  

  background-color: var(--coreRed);
  color: White;
  border-color: var(--coreBlack); 
  border-radius: 0;
  height: 50px;

}



/* Heading Colors */

.cardheading{

    color: var(--coreDarkPink);

}


.h5pink{

    color: var(--corePink);

}

.h5red{

  color: var(--coreRed);

}

.h5orange{

  color: var(--coreOrangeFade)
}




h3 {

color: var(--coreDarkPink);

}

a { 

color: var(--corePink);

}

.footerlinksCol {

  color: white;


}

.footerlinksCol:hover {

    color: var(--coreOrangeFade);
    font-weight: 500;
 
  
  }

  .cardpink {

    background-color: var(--corePinkSoft);
    
  }

  .coreRed {

    color: var(--coreRed);
    
  }

  .cardOrangeSoft {

    background-color: var(--coreOrangeSoft);
    width: 100%;
    
  }
  /* Images */


  
.navImage{

    height: 100vh;
    background-image: url(/Images/Image20240221182127.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    
}


  /* Contact Class */

.contactBannerImg {

object-fit: cover;
width: 100vw;
height: 400px;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;

}



.contactImage {

  object-fit: cover;
  width: 400px;
  height: 400px;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  clip-path: circle(35% at center);
  
  }

 .desktopImage {
  
    width: 500px; 
    height: 1000px; 
    background-attachment: fixed;
    background-position: center;
    overflow: hidden;
    background-size: cover;
    object-fit: cover; 
    scale: scale-down;
    
 }
  




/* About Page style codes*/


.card-format{

  transition: transform 0.3s ease-in-out;
  color: black;
  font-weight: bolder;
  border-color: black;
  

}

.card-format:hover{

  transform: scale(1.05);
  
}


.icon{ 

  width: 35px;
  border-radius: 50%;
  border: red solid 2px;
  overflow: hidden;
  object-fit: cover;
  padding-left: 5px;
  display: inline-block;
  
      
}

/* Adding fonts */


.cardheight{

 
  height: 350px; 
 
 


}

.vacant {

    color: green;

}
/* Adding fonts */

h1 {

        font-family: "Roboto", sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 80px;
    
}

h2 {

        font-family: "Roboto", sans-serif;
        font-weight: 300;
        font-style: normal;
  
      
}

.display-4 {

   
        font-family: "Roboto", sans-serif;
        font-weight: 300;
        font-style: normal;
       
       
}

.display-2 {

   
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: normal;
   
   
}


/* font ref */

.roboto-thin {
    font-family: "Roboto", sans-serif;
    font-weight: 100;
    font-style: normal;
  }
  
  .roboto-light {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: normal;
  }
  
  .roboto-regular {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .roboto-medium {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: normal;
  }
  
  .roboto-bold {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: normal;
  }
  
  .roboto-black {
    font-family: "Roboto", sans-serif;
    font-weight: 900;
    font-style: normal;
  }
  
  .roboto-thin-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 100;
    font-style: italic;
  }
  
  .roboto-light-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: italic;
  }
  
  .roboto-regular-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: italic;
  }
  
  .roboto-medium-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: italic;
  }
  
  .roboto-bold-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: italic;
  }
  
  .roboto-black-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 900;
    font-style: italic;
  }