/* Read Me:

Dark Blue Color: #2a3775
Light Peach Color: #ffdcbb
Light Orange Color: #ff7c53 
Very Light grey: #dbdbdb
Medium Light Grey: #c9c9c9

*/





/* tools */

.hide {
  display: none !important;
}

/* ___________*/




/* Universal Page Settings */

body {
  font-family: "Montserrat", Helvetica, Arial, sans-serif !important;
}

.btn{
  border-radius: 50px !important;
}

.no-decoration-link{
  text-decoration: none !important;
}

/* ___________*/




/*NAVBAR --- NAVBAR --- NAVBAR --- NAVBAR --- NAVBAR --- NAVBAR --- NAVBAR --- NAVBAR  
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/

    
    #navbar{
      /*background-color: white;*/
      background-color: rgba(0,0,0,0);
      /*top: 10px !important;*/
      border-bottom: 0px solid #F1F4F4;
    }

    .navbar-nav a {
      color: #383838; 
    }
    
    .navbar-brand {
        color: #ffffff
    }
    
    .navbar-brand-text{
      font: 23px "Montserrat";
      font-weight: 700;
      display: inline;
    
    }
    
    .navbar-brand-text:hover {
        color: #ff7c53;
    }
    
    #logoMain{
      width: 48px;
      padding-right: 0px;
      margin-top: -5px;
      margin-left: -5px;
    }
    
    #slideNavMenu {
      font-size: 14px; 
      margin-left: auto;
      
    }

    #nav-link1{
      color: #ffffff;
    }

    #nav-link2{
      color: #ffffff;
    }
    
    #nav-link3{
      color: #ffffff;
    }
    
    #nav-link4{
      color: #ffffff;
    }
    
    #nav-link5{
      color: #ffffff;
    }
    
    #navButton {
      display: inline;
      margin-right: 20px;
      border-radius: 50px;
    }
    
    #navButtonMob {
      display: none;
    }
    

/* Specific CSS for white NavBar (non transparent) */

    
    #navbarWhite{
      background-color: white;
      border-bottom: 1px solid #F1F4F4;
    }
    
    .navbar-brand-text-white{
      font: 22px "Montserrat";
      font-weight: 700;
      display: inline;
      color: #212121;
    }
    
    #nav-link1_white{
      color: #212121;
    }

    #nav-link2_white{
      color: #212121;
    }
    
    #nav-link3_white{
      color: #212121;
    }
    
    #nav-link4_white{
      color: #212121;
    }
    
    #nav-link5_white{
      color: #212121;
    }
       
    
          /* CSS for when the browser's width is 767px wide or less: MOBILE DEVICES */
          @media screen and (max-width: 767px) {
            
            
              .navbar-brand {
                  text-decoration: none !important;
                  color: white;
                  margin-right: 0px !important;
                  margin-left: 10px;
              }
              
              .navbar-brand-text{
                font: 16px "Montserrat";
                font-weight: 700;
                display: inline;
              
              }

              .navbar-brand-text-white{
                font: 16px "Montserrat";
                font-weight: 700;
                display: inline;
                color: #212121;
              }
                        
              #logoMain{
                width: 28px;
                padding-right: 0px;
                margin-top: -3px;
                margin-left: -5px;
              }
              
              #nav-link-mob1{
                color: #ff7c53;
              }
          
              #nav-link-mob2{
                color: #ff7c53;
              }
              
              #nav-link-mob3{
                color: #ff7c53;
              }
              
              #nav-link-mob4{
                color: #ff7c53;
              }
              
              #nav-link-mob5{
                color: #ff7c53;
              }
              
              #nav-link-mob6{
                color: #ff7c53;
              }
            
          }
          
          
          /* CSS for when the browser's width is 768px wide up to 1181px wide: TABLETS */
          @media only screen 
            and (min-device-width: 768px) 
            and (max-device-width: 1181px) 
              {
                
                .navbar-brand {
                    color: white;
                    margin-right: 0px !important;
                    margin-left: 0px;
                }
                
                .navbar-brand-text{
                  font: 20px "Montserrat";
                  font-weight: 700;
                  display: inline;
                
                }
                
                #logoMain{
                  width: 35px;
                  padding-right: 0px;
                  margin-top: -5px;
                  margin-left: -5px;
                }
                
                #nav-link-mob1{
                  color: #ff7c53;
                }
            
                #nav-link-mob2{
                  color: #ff7c53;
                }
                
                #nav-link-mob3{
                  color: #ff7c53;
                }
                
                #nav-link-mob4{
                  color: #ff7c53;
                }
                
                #nav-link-mob5{
                  color: #ff7c53;
                }
                
                #nav-link-mob6{
                  color: #ff7c53;
                }
              
                
              }

/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */




/*BODY --- BODY --- BODY --- BODY --- BODY --- BODY --- BODY --- BODY  
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/

.hover-button:hover{
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
    color: white;
}

#BlueButton{
      border-radius: 50px;
      background-color: #2a3775;
      color: white;
}


/*-----------About Panel --------------*/

.AboutPanelContainerFluid{
  background-color: #efefef;
}

.AboutPanelHeader{
  font-family: monospace;
  font-size: 40px;
  font-weight: 900;
  color:#de4a33;
}

.AboutPanelSubheader{
  font-family: "Montserrat";
  font-size: 15px;
  font-weight: 300;
  color:#212121;
  
}

.youtube-chan{
  max-width: 200px;
  margin-top: 20px;
}

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

/* ------------ skills panel -------------*/

.skillsPanelHeader{
  font-family: monospace;
  font-size: 35px;
  font-weight: 900;
  color:#212121;
  margin-bottom: 25px;
}

.skillsPanelSubheader{
  font-family: monospace;
  font-size: 25px;
  font-weight: 900;
  color:#212121;
  margin-bottom: 25px;
}

.skills-card{
  border: solid 2px #ededed !important;
  min-width: 35rem;
}

.skills-card-header{
  background-color: #de4a33 !important;
  color: white;
  font-size: 20px;
}

.list-group-item{
  font-size: 15px;
}

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

/* ------------ portfolio panel -------------*/

.PortfolioPanelContainerFluid{
  background-color: #efefef;
}

.PortfolioPanelHeader{
  font-family: monospace;
  font-size: 40px;
  font-weight: 900;
  color:#de4a33;
  margin-bottom: 25px;
}

.PortfolioPanelSubheader{
  font-family: "Montserrat";
  font-size: 20px;
  font-weight: 600;
  color:#212121;
  margin-bottom: 20px;
}

.portfolio-card{
  min-height: 36rem;
  min-width: 35rem;
  max-width: 35rem;
  padding: 0px;
  margin: 20px;
}

.portfolio-card-img-top{
  max-height: 20rem;
  width: 100%;
  object-fit: cover; /* This prevents the squashing */
  object-position: center; /* Optional: crops from center (default), top, or bottom */
}

.portfolio-card-header{
  font-weight: 600;
  font-size: 22px;
}

.portfolio-card-text{
  font-size: 12px;
}

.portfolio-list-item{
  font-size: 12px;
  color: #de4a33;
}

.portfolio-card-github-logo{
  width: 8.7rem;
}
/* -------------------------*/

/* -----------Qualifications Panel --------------*/

.qualificationsPanelHeader{
  font-family: monospace;
  font-size: 35px;
  font-weight: 900;
  color:#212121;
  margin-bottom: 30px;
  margin-top: 50px;
}

.qualifications-table-head{
  background-color: #de4a33;
  color: white;
}

.grade_column{
  text-align: right;
}

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



          /* CSS for when the browser's width is 767px wide or less: MOBILE DEVICES */
          @media screen and (max-width: 767px) {
              
              .navbar{
                max-width: 100vw !important;
              }
              
              .SecondPanelHeader{
                font-size: 25px;
              }
              
              
              /*-----------About Panel --------------*/
              
              .AboutPanelContainerFluid{
                background-color: #efefef;
              }
              
              .AboutPanelHeader{
                font-family: monospace;
                font-size: 30px;
                font-weight: 900;
                color:#de4a33;
              }
              
              .AboutPanelSubheader{
                font-family: "Montserrat";
                font-size: 12px;
                font-weight: 300;
                color:#212121;
                
              }
              
              .youtube-chan{
                max-width: 150px;
                margin-top: 20px;
              }
              
              /*-----------------------------------------*/
              
              /* ------------ skills panel -------------*/
              
              .skillsPanelHeader{
                font-family: monospace;
                font-size: 30px;
                font-weight: 900;
                color:#212121;
                margin-bottom: 25px;
                margin-top: 25px;
              }
              
              .skillsPanelSubheader{
                font-family: monospace;
                font-size: 20px;
                font-weight: 900;
                color:#212121;
                margin-bottom: 25px;
              }
              
              .skills-card{
                border: solid 2px #ededed !important;
                min-width: 20rem;
              }
              
              .skills-card-header{
                background-color: #de4a33 !important;
                color: white;
                font-size: 17px;
              }
              
              .list-group-item{
                font-size: 12px;
              }
              
              /* ------------------------*/
              
              /* ------------ portfolio panel -------------*/
              
              .PortfolioPanelContainerFluid{
                background-color: #efefef;
              }
              
              .PortfolioPanelHeader{
                font-family: monospace;
                font-size: 30px;
                font-weight: 900;
                color:#de4a33;
                margin-bottom: 25px;
                margin-top: 25px;
              }
              
              .PortfolioPanelSubheader{
                font-family: "Montserrat";
                font-size: 20px;
                font-weight: 600;
                color:#212121;
                margin-bottom: 20px;
              }
              
              .portfolio-card{
                min-height: 30rem;
                min-width: 15rem;
                max-width: 25rem;
                padding: 0px;
                margin: 5px;
              }
              
              .portfolio-card-header{
                font-size: 15px;
                font-weight: 600;
              }
              
              .portfolio-card-text{
                font-size: 12px;
              }
              
              .portfolio-list-item{
                font-size: 12px;
                color: #de4a33;
              }
              
              .card-body a{
                font-size: 13px;
              }
              
              .portfolio-card-github-logo{
                width: 7.8rem;
              }

              /* -------------------------*/
              
              /* -----------Qualifications Panel --------------*/
              
              .qualificationsPanelHeader{
                font-family: monospace;
                font-size: 30px;
                font-weight: 900;
                color:#212121;
                margin-bottom: 30px;
                margin-top: 30px;
              }
              
              .qualifications-table-head{
                background-color: #de4a33;
                color: white;
              }
              
              .table-responsive th {
                font-size: 10px;
              }
              
              .table-responsive td {
                font-size: 10px;
              }
              
              .grade_column{
                text-align: right;
              }
              
              
              /* -------------------------*/


                            
          }
          
          
          /* CSS for when the browser's width is 768px wide up to 1181px wide: TABLETS */
          @media only screen 
            and (min-device-width: 768px) 
            and (max-device-width: 1181px) 
              {
               
              .voucherPanelHeader{
                font-size: 35px;
                color:#2a3775;
                margin-bottom: 25px;
              }
              
              .voucherPanelList{
                margin-left: -10px;
              }
              
              .voucherPanelList li {
                font-size: 16px;
                margin-bottom: 15px;
                list-style: none;
              }

              .voucherPanelRegulatoryWording{
                font-size: 10px;
                color: grey;
              }
              
              #retailerlogos{
                max-width: 350px;
              }
             
              .SecondPanelHeader{
                font-size: 35px;
              }
              
              .ThirdPanelContainer{
                text-align: center;
              }
              
              .ThirdPanelHeader{
                font-size: 35px;
              }

              .ThirdPanelList{
                text-align: left;
                padding-right: 25px;
              }
              
              .ThirdPanelList li {
                font-size: 20px;
                margin-bottom: 15px;
              }
              
              #insurerlogos{
                max-width: 600px;
              }
              
              .FifthPanelHeader{
                font-size: 35px;
              }
              
              .why-us-box{
                max-width: 600px;
                margin-left: auto;
                margin-right: auto;
              }
              
              .boxTitle{
                font-size: 25px;
              }
              
              .riskwording{
                font-size: 17px;
              }
              
              #digitalgpimage{
                max-width: 400px !important;
                margin-top: 0px;
                margin-left: auto;
                margin-right: auto;
              }
              
              #cyclingimage{
                max-width: 400px !important;
                margin-top: 0px;
                margin-left: auto;
                margin-right: auto;
              }
              
              #musicimage{
                max-width: 480px !important;
                margin-top: 20px;
                margin-left: auto;
                margin-right: auto;
              }              
              
              #CUSTOMERS_image{
                max-width: 600px;
              }
              
            }
            
            
          /* CSS for IPAD PRO ONLY */
          @media only screen 
            and (min-device-width: 1024px) 
            and (max-device-width: 1025px) 
              {
                  
                #retailerlogos{
                  max-width: 370px;
                  margin-top: 30px;
                }
                
                #insurerlogos{
                  max-width: 400px;
                  margin-top: 30px;
                } 
                
                #CUSTOMERS_image{
                  max-width: 600px;
                }
              
                #importantstuffimage{
                  max-width: 400px;
                  margin-top: 50px;
                }
              }
              
          /* CSS for GALAXY FOLD ONLY */
          @media only screen 
            and (min-device-width: 279px) 
            and (max-device-width: 281px) 
              {
                
                #retailerlogos{
                  max-width: 170px;
                }
                
                #insurerlogos{
                  max-width: 170px;
                } 
              
                #CUSTOMERS_image{
                  max-width: 200px;
                }
                
                #importantstuffimage{
                  max-width: 200px;
                }
                
                #navButtonMob {
                  display: none !important;
                }
                
                .body-brands-card{
                  border-radius: 30px !important;
                  border: none !important;
                  width: 15rem;
                }
                
                .body-products-card{
                  border-radius: 30px !important;
                  border: none !important;
                  width: 15rem;
                }
              
                #Life_image{
                  max-width: 150px;
                  margin: auto;
                }
                
                #CIC_image{
                  max-width: 150px;
                  margin: auto;
                }
                
                #IP_image{
                  max-width: 150px;
                }
                
                #MP_image{
                  max-width: 150px;
  
                }
                
                #PMI_image{
                  max-width: 150px;
                  margin: auto;
                }
                
                #IHT_image{
                  max-width: 150px;
                  margin: auto;
                }  
                
                #cashback{
                  max-width: 150px;
                  margin: auto;
                }
                
                #wills{
                  max-width: 150px;
                  margin: auto;
                }
                
                #giveaway{
                  max-width: 150px;
                  margin: auto;
                }  
                
              }
            
            
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< *



/*FOOTER --- FOOTER --- FOOTER --- FOOTER --- FOOTER --- FOOTER --- FOOTER --- FOOTER  
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/

#footer{
  background-color:#212121; 
  font-family: "Montserrat";
}

.footer-text{
  font-size: 12px;
}

.LogoTextFooter{
  font-size: 26px;
  font-weight: 900;
  color: white;
}


          /* CSS for when the browser's width is 767px wide or less: MOBILE DEVICES */
          @media screen and (max-width: 767px) {
            
              .LogoTextFooter{
                font-size: 20px;
                font-weight: 900;
                color: white;
              }
              
              .footer-text{
                font-size: 10px;
              }              
          }

/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< *




/*PRIVACY POLICY --- PRIVACY POLICY --- PRIVACY POLICY --- PRIVACY POLICY --- PRIVACY POLICY  
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/

#privacyPolicyContainerFluid{
  margin-top: 100px;
}

#privacyPolicyContainer{
}

.privacyPolicyHeader{
  font-weight: 700;
}

/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< *