/*////////////////////////////////////////////////////////////////////////////
// FILE    : ciip.css
// AUTHOR  : Campus CIIP
// PURPOSE : Stylesheet for ciip.mx landing page
////////////////////////////////////////////////////////////////////////////*/


/*////////////////////////////////////////////////////////////////////////////
// Body and Reset
////////////////////////////////////////////////////////////////////////////*/

*
{
  margin:                0;
  padding:               0;
  box-sizing:            border-box;
}

body
{
  margin:                0px;
  padding:               0px;
  font-family:           Georgia, serif;
  font-size:             100%;
  color:                 #303030;
  background-color:      #f5f5f0;
  line-height:           1.6;
}


/*////////////////////////////////////////////////////////////////////////////
// Header
////////////////////////////////////////////////////////////////////////////*/

div.Header
{
  width:                 100%;
  background-color:      #ffffff;
  padding:               20px 0px;
  text-align:            center;
  box-shadow:            0px 2px 5px rgba(0, 0, 0, 0.1);
}

img.Logo
{
  max-width:             200px;
  height:                auto;
  transition:            transform 0.3s ease;
}

img.Logo:hover
{
  transform:             scale(1.05);
}

@media (max-width: 600px)
{
  img.Logo
  {
    max-width:           150px;
  }
}


/*////////////////////////////////////////////////////////////////////////////
// Container and Layout
////////////////////////////////////////////////////////////////////////////*/

div.Container
{
  max-width:             1200px;
  margin:                0px auto;
  padding:               40px 20px;
}

@media (max-width: 768px)
{
  div.Container
  {
    padding:             30px 15px;
  }
}

@media (max-width: 480px)
{
  div.Container
  {
    padding:             20px 10px;
  }
}


/*////////////////////////////////////////////////////////////////////////////
// Typography
////////////////////////////////////////////////////////////////////////////*/

h1
{
  font-size:             240%;
  color:                 #8b1a1a;
  text-align:            center;
  margin:                20px 0px;
  line-height:           1.2;
}

h2
{
  font-size:             180%;
  color:                 #8b1a1a;
  margin:                30px 0px 15px 0px;
  text-align:            center;
}

h3
{
  font-size:             140%;
  color:                 #8b1a1a;
  margin:                20px 0px 10px 0px;
}

p
{
  font-size:             120%;
  line-height:           1.7;
  margin:                15px 0px;
}

@media (max-width: 768px)
{
  h1
  {
    font-size:           200%;
  }
  
  h2
  {
    font-size:           160%;
  }
  
  h3
  {
    font-size:           130%;
  }
  
  p
  {
    font-size:           110%;
  }
}

@media (max-width: 480px)
{
  h1
  {
    font-size:           170%;
  }
  
  h2
  {
    font-size:           140%;
  }
  
  h3
  {
    font-size:           120%;
  }
}


/*////////////////////////////////////////////////////////////////////////////
// Content Sections
////////////////////////////////////////////////////////////////////////////*/

div.Hero
{
  text-align:            center;
  margin:                40px 0px;
  padding:               40px 20px;
  background:            linear-gradient(135deg, #8b1a1a 0%, #a52a2a 100%);
  color:                 #ffffff;
  border-radius:         8px;
  box-shadow:            0px 4px 10px rgba(0, 0, 0, 0.15);
}

div.Hero h1,
div.Hero h2
{
  color:                 #ffffff;
  text-shadow:           2px 2px 4px rgba(0, 0, 0, 0.3);
}

div.Hero h2
{
  font-size:             150%;
  font-weight:           normal;
  margin-top:            15px;
}

@media (max-width: 768px)
{
  div.Hero
  {
    padding:             30px 15px;
    margin:              30px 0px;
  }
}


div.MainContent
{
  background-color:      #ffffff;
  padding:               40px;
  border-radius:         8px;
  box-shadow:            0px 2px 8px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px)
{
  div.MainContent
  {
    padding:             30px 20px;
  }
}

@media (max-width: 480px)
{
  div.MainContent
  {
    padding:             20px 15px;
  }
}


div.TextBlock
{
  margin:                25px 0px;
}

div.TextBlock p
{
  text-align:            justify;
}


/*////////////////////////////////////////////////////////////////////////////
// Special Boxes
////////////////////////////////////////////////////////////////////////////*/

div.HighlightBox
{
  background-color:      #fff8dc;
  border-left:           5px solid #8b1a1a;
  padding:               20px 25px;
  margin:                30px 0px;
  border-radius:         4px;
}

div.HighlightBox h3
{
  margin-top:            0px;
  text-align:            center;
}

div.HighlightBox p
{
  text-align:            center;
  margin-bottom:         0px;
}


div.ValuesBox
{
  background-color:      #f0f0f0;
  padding:               25px 30px;
  margin:                30px 0px;
  border-radius:         8px;
  border:                2px solid #8b1a1a;
}

div.ValuesBox h3
{
  text-align:            center;
  margin-top:            0px;
}

div.ValuesBox p
{
  text-align:            justify;
}


div.FeatureBox
{
  background:            linear-gradient(135deg, #8b1a1a 0%, #a52a2a 100%);
  color:                 #ffffff;
  padding:               25px 30px;
  margin:                35px 0px;
  border-radius:         8px;
  text-align:            center;
  box-shadow:            0px 4px 10px rgba(0, 0, 0, 0.2);
}

div.FeatureBox h3
{
  color:                 #ffffff;
  margin:                0px;
  font-size:             160%;
  text-shadow:           2px 2px 4px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px)
{
  div.FeatureBox h3
  {
    font-size:           140%;
  }
}


/*////////////////////////////////////////////////////////////////////////////
// Online Section
////////////////////////////////////////////////////////////////////////////*/

div.OnlineSection
{
  margin:                50px 0px;
  padding:               30px 0px;
  border-top:            3px solid #8b1a1a;
  border-bottom:         3px solid #8b1a1a;
}

div.OnlineSection h2
{
  color:                 #8b1a1a;
  font-size:             200%;
  margin-bottom:         25px;
}


/*////////////////////////////////////////////////////////////////////////////
// Call to Action Section
////////////////////////////////////////////////////////////////////////////*/

div.CTASection
{
  text-align:            center;
  margin:                50px 0px 30px 0px;
  padding:               40px 20px;
  background-color:      #f9f9f9;
  border-radius:         8px;
}

div.CTASection h2
{
  color:                 #8b1a1a;
  font-size:             200%;
  margin-bottom:         25px;
}

a.CTAButton
{
  display:               inline-block;
  padding:               15px 50px;
  background:            linear-gradient(135deg, #8b1a1a 0%, #a52a2a 100%);
  color:                 #ffffff;
  text-decoration:       none;
  font-size:             130%;
  font-weight:           bold;
  border-radius:         50px;
  transition:            all 0.3s ease;
  box-shadow:            0px 4px 10px rgba(139, 26, 26, 0.3);
}

a.CTAButton:hover
{
  background:            linear-gradient(135deg, #ff6b6b 0%, #ee5a5a 100%);
  box-shadow:            0px 6px 15px rgba(139, 26, 26, 0.4);
  transform:             translateY(-2px);
}

p.CTASubtext
{
  color:                 #666666;
  font-size:             110%;
  margin-top:            15px;
  font-style:            italic;
}

@media (max-width: 600px)
{
  a.CTAButton
  {
    padding:             12px 35px;
    font-size:           115%;
  }
}


/*////////////////////////////////////////////////////////////////////////////
// Footer Section
////////////////////////////////////////////////////////////////////////////*/

div.FooterSection
{
  text-align:            center;
  padding:               30px 20px;
  margin-top:            40px;
  border-top:            2px solid #d0d0d0;
  color:                 #666666;
}

div.FooterSection p
{
  font-size:             100%;
  line-height:           1.5;
}

div.FooterSection a
{
  color:                 #8b1a1a;
  text-decoration:       none;
  font-weight:           bold;
}

div.FooterSection a:hover
{
  text-decoration:       underline;
}


/*////////////////////////////////////////////////////////////////////////////
// Links
////////////////////////////////////////////////////////////////////////////*/

a
{
  color:                 #8b1a1a;
  text-decoration:       none;
  transition:            color 0.3s ease;
}

a:hover
{
  color:                 #a52a2a;
  text-decoration:       underline;
}