/* Reset box-sizing to border-box */
/* Remove default margin and padding */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;   
}

:root {

/*Site Colors*/
    --ronkeinc-pink: #FF66B3;
    --transform60pink: #f99cca;
    --hoverpink:  rgba(244, 45, 201, 0.5);
    --transform25purple: rgb(220, 168, 233);
    --transform50purple: rgb(187, 33, 225);
    --transform55purple: rgb(95, 4, 118);
    --ronkeinc-royalblue: #1010f2;
    --ronkeinc-rgb-royalblue: rgb(16, 16, 242);
    --ronkeinc-darkblue: #200675;
    --ronkeinc-chocolate: #5c2f1f;
    --ronkeinc-gray: #818181;
    --gradientblue: #1616e6;
    --gradientblue2: #0a28d4;
    --buttonchangeblue: rgb(50, 47, 232); 
    --cardinalred: #9d0606; 

/*Font Families*/
--font-main: "Heebo", sans-serif;
--font-Gioviale: "Gioviale", sans-serif;
--font-Cursive: "Playwrite NL", cursive;
--font-REM: "REM", sans-serif;
--font-Berkshire: "Berkshire Swash", serif;    


/*Spacing*/
    --spacing-sm: 2px;
    --spacing-md: 16px;
    --spacing-lg: 32px;
    --spacing-xl: 64px;

/*Height & Width*/

    --standard-width: 1200px;
    --subtitle-height: 40px;
  
}/* background-image: linear-gradient(var(--ronkeinc-royalblue), var(--gradientblue), var(--gradientblue2)); */


/* Remove list styles */
ol, ul {
    list-style: none;
}

/* Remove default hyperlink styles */
a {
    text-decoration: none;
    color: inherit;
}

/* Reset font styles */
body {
    font-family: 'Heebo', sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

/* Reset form elements */
button, input, select, textarea {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    background-color: initial;
}

/* Add your custom styles below this line */


@keyframes smooth {
    0% {
     transform: translateX(-2000px);
   }
   100% {
     transform: translateX(0px);
 }  
 }
 

@keyframes flipandback {

    0% {
     left: -2000px;
    } 
     5% {
         left: -10px;
     } 
 
     5% {
         left: -30px;
     }
     10% {
         left: -40px;
         transform: rotateY(0deg);
         left: 0px;
         color: #FFF;
     }
     25% {
         transform: rotate(20deg);
         left: 0px;
         color: rgb(220, 168, 233);
         
     }
     50% {
         transform: rotate(0deg);
         left: 500px;
         color: rgb(187, 33, 225);
     }
     55% {
         transform: rotate(0deg);
         left: 500px;
         color: rgb(95, 4, 118);
     }
     60% {
         transform: rotate(0deg);
         left: 500px;        
         color:#f99cca;
     }
     75% {
         transform: rotate(0deg);
         left: 500px;        
         color:#9d0606;
     }
     100% {
         transform: rotate(-360deg);
         left: 0px;
     }
     
 }
 

.bodyofsite {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
    width: 100%;
    padding: 0;

}

.header {
    
    top: 0;
    left: 0;
    width: 100%;
    background: none;
    color: #FF66B3;    
    height: 520px;
    overflow: hidden;

}

.header .header__container {
    position: relative;
    margin: 0;
    padding: 0 15px;
    overflow: hidden; 
    width: 100%;
    height: 125px; 
    border: none;
    outline: none; 
    color: var(--ronkeinc-pink);
    background-color: var(--ronkeinc-royalblue);   

}

.header__navcontainer {
    display: flex;
    flex-flow: row nowrap;
    column-gap: 17px;
    justify-content: space-between;
    align-items: center; 
    height: 125px; 
    border: none;
    outline: none;
    padding: 10px 5px;  
    animation: smooth 4s;
    animation-timing-function: linear;
    

}

.header__logo {  
    display: flex;
    align-items: center;
    justify-content: center;   
    padding: 5px 5px; 
    background-color:rgba(240, 248, 255, 0.912);
    box-shadow: 1px -4px 30px 9px rgba(0, 0, 0, 0.3); 
    border-radius: 3px 5px ;
 
   /*  box-shadow: 2px 2px 2px 1px  rgba(240, 248, 255, 0.822) inset;
    border-radius: 10px 15px; */
}

.img__logo {
    width: 130px;
    align-self: center;
    cursor: pointer;
    box-shadow: -5px 11px 3px 3px rgba(16, 16, 242, 0.3), 
    0 0 0 0.8px rgba(16, 16, 242, 0.3),
    2px 1px 1px 2px rgba(16, 16, 242, 0.3);
    border-radius: 3px 5px;
  
   
    
   
}



.site__navheader {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 10px 0;
    height: 90px;
}

.navheader {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 0;  
    height: 90px;   
}

.site__navlist {
    display: flex;
    column-gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site__navitem {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
}  

.site__buttonlink {
    font-family: var(--font-REM);
    font-weight: 600;
    font-style: italic;  
    font-size: 20px;
    align-self: center;
    margin-left: 20px;
    margin-right: 20px;
    background-color: var(--buttonchangeblue);
    color: var(--ronkeinc-pink);
    text-decoration: none;
    border: none;
    outline: none;
    padding: 14px 40px;
    border-radius: 4px;
    box-shadow: 2px 1px 12px 1px rgba(0, 0, 0, 0.3);
    cursor: pointer;

}

.site__buttonlink:hover {
    background-color:  rgba(229, 33, 186, 0.572);
    color: var(--ronkeinc-royalblue);
}

.site__buttonlink:last-child {
    display: flex;
    align-items: center;
}


.header__container .header__companynamecontainer{
    position: relative;
    height: 600px;
    width: 100%;
    

}
.header__companyname {
    position: relative;
    display: flex; 
    flex-flow: column nowrap;
    justify-content: center; 
    align-items: center;
    font-family: var(--font-Gioviale);
    font-weight: 730;
    font-style: normal;
    font-size: 120px;
    text-align: center;
    color: var(--ronkeinc-pink);
    height: 200px;
    width: 100%;
    padding: 200px 0 0 0;
    text-shadow: 1px 6px 4px rgba(0, 0, 0, 0.5), 
                2px -2px 0 rgba(16, 16, 242, 0.3); 
                
                animation: flipandback 5s;    
                animation-direction: normal;
}


.angle {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(130deg, #1616e6,#1010F2 70%, #0a28d4);
    transform: skewY(7deg);
    transform-origin: top right;
    box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.5);
   
   
}



.sidenav {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0;
  left: 0;
  background-color: #111; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */

}


.main {
    display: flex;
    width: 100%;
    height: 1200px;
    padding: 180px 5px 0 0;
    transition: margin-left .5s;  

}

.clientservices {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0;
    margin: 0;
    /* background-image: linear-gradient(90deg, rgba(247, 246, 244, 0.694), rgba(111, 111, 113, 0.543) 30%, rgba(247, 246, 244, 0.694)); */
    color: var(--ronkeinc-darkblue);   
    font-weight: 500;
    font-style: italic;
    font-size: 20px;
    line-height: 1.5;
    text-align: center;
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
}

.sidenav {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: var(--ronkeinc-pink); 
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
    
}

.angle > .main > .clientservices {
    flex: 1;
}


.main > .ads {
    flex: 0 0 15vw; 
} 

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: var(--ronkeinc-darkblue);
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: var(--gradientblue2);
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
  }

.hamburgerbtn {
    font-size: 20px;
    cursor: pointer;
    color: var(--ronkeinc-pink);
    padding: 0 1px 0 0;
}

.hamburgerbtn:hover {
    color: var(--gradientblue2);
}


.bodyofsite > .clientservices {
    display: flex;
    justify-content: center;
    width: 100%;
}   

.clientservices .card__container {
    display: flex;
    margin: 10px 0 0 0;   
}

.clientservices .card__container .card {
    width: 100%;
    padding: 0 2px 0 0;
    margin: 0 1px 0 0;
    flex-wrap: wrap;
    justify-content: center;
   
}

.section__container {
    width: 100%;
    max-width: var(--standard-width);
}

.ads {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 25px 0 0 0;
    /* background-image: linear-gradient(90deg,rgba(247, 246, 244, 0.694), rgba(111, 111, 113, 0.543) 30%, rgba(247, 246, 244, 0.694)); */

} 

.ads__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0;
    margin: 0;
}

.ads__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0;
    margin: 0;
}
 
.card {
    position: relative;
    min-width: 100px;
    min-height: 72px;
    overflow: hidden;
}



  
  .two-column > .col-left {
    width: 50%;
    box-sizing: border-box;
    padding: 0 var(--spacing-md) 0 0;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
  }
  
  .two-column > .col-right {
    width: 50%;
    box-sizing: border-box;
    padding: 0 0 0 var(--spacing-md);
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
  }
  

.subtitle {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--ronkeinc-darkblue);
    font-size: var(--subtitle-height);
    font-weight: 700;

}

.footer {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 90px;
    background-color: #fff;
    /* background-image: linear-gradient(135deg, rgba(16, 16, 242, 0.458) 70%, rgba(255, 102, 179, 0.423)); */
    color: var(--ronkeinc-darkblue);    
    font-weight: 800;    
    font-size: 30px;    
    margin: var(--spacing-sm) 0 0 0;

}