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




/*------------------------------------------
            
			
		+++++ Basic settings+++++
			  
			 
-------------------------------------------*/


html {
    scroll-behavior: smooth;
    
}

          body {
            font-family: "Libre Baskerville", serif;/*---Basic Font family------*/   
            background-color: #F7F4DB;           
               }

               
            p{
                font-family: 'Open Sans', sans-serif;
            }


                              a, a:hover {
                                     text-decoration: none; /*---Link underline remove------*/
                                      }


/*----------------------------------------

    ++++Fix the Container Width+++

-----------------------------------------*/

   
.container {
    min-width: 70%; /*----Container minimum width that will be mantain---*/
    max-width: 80%; /*----Container maximum width that will be mantain---*/
}



/*----------------------------------------

            ++++Menu+++

-----------------------------------------*/

       .menu{
                display: flex;
        justify-content: center;
            align-items: center;
       background-color: #F7F4DB;
         text-transform: uppercase;
              font-size: clamp(10pt,2vw,12pt);
                padding: 5pt 0pt;
                font-family: 'Open Sans', sans-serif;
                

       }
       .menu .flex-fill{
          padding-left: 3vw;
       }


       .menu .logo {
              display: flex;
      justify-content: center;
          align-items: center;
       }

       .menu .logo-big {
                width: clamp(80pt,15vw,150pt);
       }

       .menu .logo-sm{
               width: 30pt;
       }
      
       .menu .form-select{
              width: 60pt;
     text-transform: uppercase;
        
       }

       .menu i{
        font-size: 12pt;
       }

       @media screen and (max-width: 768px){
            
        .menu-title,
        .menu .logo-big,
        .con {
            display: none;
        }

       }


       @media screen and (min-width: 768px){
            
        .menu .con-icon,
        .menu .logo-sm {
            display: none;
        }

       }


       .offcanvas a{
        color:black;
       }

       .offcanvas a:hover{
        color:#D40101;
       }



       .hero-section .container{

        padding: 9vw 0pt;
        min-width: 94%; 
       }

     

@media screen and (max-width: 768px){
     
    .hero-section .container {
     max-width: 85% !important; /*----Container minimum width that will be mantain---*/
    
}

}


       .hero-section {
        background-image: url(../img/hero-bg.jpg);
        width: 100%;
        background-size: cover;
        overflow: hidden;
       }


       .hero-section .hero-bg{
        background: rgba(0, 0, 0, 0.2);
       }

      

       .hero-section .left h4{
        font-size: clamp(16pt,2vw,24pt);       
        text-transform: inherit;      
           font-weight: bolder;
        padding-bottom: 5pt; 
           
                 color: #ffffff;
                
        
             text-wrap: pretty;
            
       }


       .hero-section .left p{  /*-----Section text-------*/      
        font-weight: normal;
          font-size: clamp(9pt,2vw,10pt); 
              color: #ffffff; 
              padding-bottom: 0.5vw;
    
              font-weight: 400;


}

.hero-section .left button { /*-----Section Button---------*/
    font-weight: 400 !important;
  letter-spacing: 5px;
  padding: clamp(6pt,1vw,12pt) clamp(15pt,3vw,30pt);
  text-decoration: none;

text-transform: uppercase;
font-size: clamp(9pt,2vw,10pt);
  
   background-color: transparent;
   color: #ffffff;
   border: 1px solid #ffffff;
   
   
   margin-top: 2vw;
}


.hero-section .left button:hover{

    background-color: #ffffff;
    color:#000000;
    
    box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.1), -6px -6px 12px rgba(0, 0, 0, 0.15) inset, 6px 6px 12px rgba(255, 255, 255, 0.25) inset, -6px -6px 12px rgba(255, 255, 255, 0.05);


}


.hero-section .text-box{
    background-color: #D8B8B9;
    padding: 30pt;
   
}

.hero-section .text-box h5{

    font-size: clamp(16pt,2vw,24pt);       
        text-transform: inherit;      
           font-weight: bolder;
        padding-bottom: 5pt; 
           
                 color: #000000;
                
        
             text-wrap: pretty;
}


.hero-section .text-box a,
.hero-section .text-box a:hover{
    color:#C70505
}





.about-section{
    padding-top: 8vw;
}


.about-section i {
    font-size: clamp(21pt,4vw,42pt);
}

.about-section p {
    text-align: left;
}


.service-section {
    padding: 4vw 0pt;
}

.service-section .row{

    display: flex;
      justify-content: center;
          
          text-align: center;


}

.service-section i {
    font-size: clamp(21pt,4vw,42pt);
}

.service-section p {
    text-align: left;
}


.footer-section {

    background-color: #C60000;
    display: flex;
    justify-content: center;
    align-items: center;
}
.footer-section nav{
    justify-content: center;
}

.footer-section a,
.footer-section a:hover{
    color:#ffffff;
    font-size: clamp(9pt,2vw,10pt);
}





    .copyright .container {
        
        
    }

    .copyright p { /*-----Copyright Text-----*/
        font-size: clamp(10pt,2vw,12pt);
        text-transform: capitalize;
        text-align: center;
        color: #c4dff6;
        padding: 15pt 0pt 3pt 0pt;
    }

    .copyright span {
        color: #F87381; /*-----Copyright highlighted Text-----*/
    }