old-riskletpy/backend/core/static/css/index.css

body {
    font-family: "Darker Grotesque", sans-serif;
}
  
.inner-container {
    display: grid;
    grid-template-columns: 1fr;
    background: linear-gradient(90deg, rgb(2, 0, 36) 0%, rgb(9, 9, 121) 50%, rgb(10, 8, 37) 100%);
    color: white;
    margin: 0;
    width: 100%;
    padding: 0;
    gap: 3%;
    padding: 60px;
    text-align: center;
}

.gif-container {
    display: flex;                
    justify-content: center;      
    align-items: center;         
    padding: 20px;               
}

.gif-container img {
    height: auto;                
    display: block;
    max-width: 700px;           
}
.insight-main {
    display: flex;
    justify-content: center;
    padding: 20px;
}
.insight-content {
    display: flex;
    width: 80%;
    box-shadow: 0 0 143px #f2f0fb;
}
.left-side {
    flex: 1; 
    display: flex;
    align-items: center; 
    justify-content: center; 
    padding: 20px; 
}
.right-side {
    flex: 1; 
    display: flex;
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
    padding: 20px; 
}
.insight-grid {
    display: flex;
    flex-direction: column; 
    align-items: center; 
    text-align: center; 
}
.insight-grid img {
    max-width: 100%; 
    height: auto; 
}
.out-risk-management {
    width: 100%;
    background-color: white;
    display: flex;
    justify-content: center;      
    align-items: center;          
    padding: 20px;                
}

.risk-management {
    width: 80%;                   
    display: grid;                
    grid-template-columns: 1fr;   
    text-align: center;           
    justify-content: center;       
    align-items: center;          
    gap: 20px;                   
    padding: 20px;               
    background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(223,240,255,1) 48%, rgba(255,255,255,1) 100%);
}
.risklet-action {
    display: flex;                
    flex-direction: column;       
    align-items: center;          
    justify-content: center;       
    text-align: center;          
    padding: 20px;               
}
.btn-bl{
    background: linear-gradient(230deg, #3652f3 16.03%, #a862ee 90.73%);
    color: #fff;
    border: none;
    border-radius: 11px;
    height: 100%;
    width: 100%;
    text-transform: uppercase;
    padding: 15px 20px;
    min-width: 200px;
    max-width: 300px;
    text-decoration: none;
    text-align: center;
}
.btn-bl-small{
    background: linear-gradient(230deg, #3652f3 16.03%, #a862ee 90.73%);
    color: #fff;
    border: none;
    border-radius: 11px;
    text-transform: uppercase;
    padding: 15px 20px;
    text-decoration: none;
    text-align: center;
}
.btn-bl:hover{
    color: white;
}
.btn-bl-small:hover{
    color: white;
}
.buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    text-align: center;
}
.demo-buttons{
    display: flex;
    justify-content: center;
    gap: 10px;
}
.sf-insight-main {
    padding: 8rem;
    border-radius: 2rem;
    box-shadow: 0 0 143px #f2f0fb;
    display: flex;
}
.insight-grid{
    display: grid;
    gap: 3rem;
}

.video-container {
    display: flex;                
    justify-content: center;      
    align-items: center;          
    width: 100%;                  
    max-width: 500px;             
    height: auto;                 
    max-height: 500px;            
    aspect-ratio: 16 / 9;         
    background: #000;            
    margin: 0 auto; 
}

.iframe {
    position: absolute;          
    top: 0;                      
    left: 0;                    
    width: 100%;                
    height: 100%;               
}

.form-check.other-gap .other-row {
    display: flex !important;
    align-items: center !important;
    flex-direction: row !important;
    gap: 0 !important;
}

.other-gap {
    display: flex !important;
    gap: 2rem !important;
}

.other-gap > .form-control {
    max-width: 350px;
}

@media (max-width: 768px) {
    .inner-container {
        padding: 60px; 
    }
    .gif-container img {
        width: 100%;
        max-width: 400px;
    }   
    .insight-content {
        flex-direction: column; 
        width: 100%; 
    }

    .left-side, .right-side {
        flex: none; 
        width: 100%; 
        padding: 10px; 
    }

    .insight-main {
        flex-direction: column; 
    }

    .risk-management {
        padding: 10px; 
    }

    .risklet-action {
        padding: 10px; 
    }

    .btn-bl, .btn-bl-small {
        width: 90%; 
        min-width: auto; 
        max-width: none; 
    }

    .buttons {
        flex-direction: column; 
        gap: 10px; 
    }

    .sf-insight-main {
        padding: 4rem;
    }

    .insight-grid {
        grid-template-columns: 1fr; 
    }

    .form-check.other-gap .other-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }
    .form-check.other-gap .form-control {
        width: 100%;
        max-width: 100%;
    }
    .other-gap {
        display: grid !important;
        gap: 0 !important;
    }
}